.opening-layer{position:fixed;inset:0;z-index:20;visibility:hidden;pointer-events:none}
.opening-backdrop{position:absolute;inset:0;background-image:url("../decor/paper-grain.svg"),linear-gradient(180deg,var(--bg),var(--face));background-size:512px 512px,100% 100%}
.opening-meta{position:absolute;left:24px;right:24px;text-align:center;color:var(--ink);font-size:14px;line-height:1.8;letter-spacing:.24em}
.opening-meta p{margin:0}.opening-meta p+p{margin-top:6px;letter-spacing:.3em}
[data-route=B] .opening-word{position:fixed;z-index:21;margin:0;color:var(--ink);transform-origin:center;pointer-events:none;visibility:hidden}
.opening-skip{position:fixed;bottom:24px;right:28px;z-index:22;min-height:44px;padding:8px 16px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,sans-serif;cursor:pointer}
.opening-skip[hidden]{display:none}.opening-skip:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:600px){.opening-meta{font-size:12px}.opening-skip{bottom:16px;right:16px}}
@media(prefers-reduced-motion:reduce){.opening-layer,.opening-word,.opening-skip{display:none!important}}
.scroll-cue{position:fixed;right:28px;bottom:24px;z-index:10;display:flex;align-items:center;flex-direction:column;color:var(--ink);background:var(--bg) url('../decor/paper-grain.svg') 0 0/512px;border:1px solid var(--ink);padding:10px 8px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;font-family:inherit;min-width:48px;box-sizing:border-box}
.scroll-cue[hidden]{display:none}.scroll-cue[data-visible=true]{opacity:1;visibility:visible}
.scroll-cue[data-kind=tag]{width:56px;outline:1px solid var(--line);outline-offset:-5px;gap:12px;border-top:4px double var(--ink)}
.cue-label{font-size:14px;letter-spacing:.12em;line-height:1.4;writing-mode:vertical-rl}
.cue-mark{display:none}.cue-mark svg{display:block;width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.3}
.cue-arrow{display:block;width:18px;height:34px;overflow:hidden}.cue-arrow svg{width:18px;height:32px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;animation:cue-down 2.8s ease-in-out infinite}
.scroll-cue[data-kind=seal]{width:84px;height:84px;padding:8px 5px 6px;border-radius:50%;outline:1px solid var(--line);outline-offset:-5px;gap:2px;display:grid;grid-template-columns:1fr 20px;align-content:center;justify-content:center}
[data-kind=seal] .cue-mark{display:block;grid-column:1/3;justify-self:center}[data-kind=seal] .cue-mark svg{width:27px;height:27px}
[data-kind=seal] .cue-label{writing-mode:horizontal-tb;letter-spacing:0;font-size:12px;justify-self:end}[data-kind=seal] .cue-arrow{width:14px;height:23px}[data-kind=seal] .cue-arrow svg{width:12px;height:22px}
.scroll-cue:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.scroll-cue:hover{background-color:var(--face)}
@keyframes cue-down{0%,20%,100%{transform:translateY(-3px)}60%{transform:translateY(3px)}}
.scroll-cue[data-quiet=true] .cue-arrow svg{animation:none}
@media(max-width:600px){.scroll-cue{right:14px;bottom:16px}.scroll-cue[data-kind=tag]{width:48px;gap:8px;padding:10px 6px}.scroll-cue[data-kind=seal]{width:72px;height:72px}.cue-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){.scroll-cue{transition:none}.cue-arrow svg{animation:none}}

/* 選択された縦札全体を、矢印と一緒にゆっくり動かす。 */
.scroll-cue[data-kind=tag][data-visible=true]{animation:cue-sign-float 2.8s ease-in-out infinite}
.scroll-cue[data-kind=tag] .cue-arrow svg{animation:none}
@keyframes cue-sign-float{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
.scroll-cue[data-kind=tag][data-quiet=true]{animation:none}
@media(prefers-reduced-motion:reduce){.scroll-cue[data-kind=tag][data-visible=true]{animation:none}}