.player-chip{display:flex;align-items:center;gap:8px;border:1px solid #c9b998;background:#fff9ed;border-radius:24px;padding:7px 12px;font-size:12px;white-space:nowrap}.player-chip .player-label{color:var(--muted);font-size:10px}.player-chip strong{font-weight:400;max-width:100px;overflow:hidden;text-overflow:ellipsis}.name-panel{margin:22px 0 4px;padding:18px 20px;background:#fffaf0;border:1px solid #d4c4a5;border-left:3px solid var(--gold);border-radius:6px;max-width:390px}.name-panel .name-label{margin:0 0 10px;font:18px/1.6 var(--title);letter-spacing:.08em;color:var(--ink)}.name-panel input{background:#fffdf7;max-width:none;font-size:16px}.name-panel .primary{width:100%;margin-top:13px}.name-panel .name-help{font-size:11px;line-height:1.8;color:var(--muted);margin:10px 0 0}.name-dialog-input{margin:18px auto 8px;max-width:100%;font-size:16px}.name-error{min-height:22px;color:var(--red)!important;margin:6px 0!important}
.scroll-intro{overflow:hidden}.scroll-reveal{position:relative;margin:19px 0 12px;padding:0 12px;perspective:800px}.scroll-reveal .intro-art{display:block;width:100%;height:auto;max-height:none;aspect-ratio:3/2;margin:0;border-radius:0;border-top:8px solid #ddc9a3;border-bottom:8px solid #ddc9a3;clip-path:inset(0 49.5%);animation:openPainting 1.75s cubic-bezier(.22,.65,.25,1) forwards;background:#e9ddc2}.scroll-rod{position:absolute;top:-7px;bottom:-7px;width:13px;z-index:2;border-radius:4px;background:linear-gradient(90deg,#6c4b31,#b8945f 28%,#d9bb7e 47%,#a48152 74%,#654831);box-shadow:2px 2px 7px #4e371f33;pointer-events:none}.scroll-rod:before,.scroll-rod:after{content:'';position:absolute;left:-2px;width:17px;height:8px;background:#64492f;border-radius:3px}.scroll-rod:before{top:0}.scroll-rod:after{bottom:0}.scroll-rod.left{left:calc(50% - 13px);animation:rodLeft 1.75s cubic-bezier(.22,.65,.25,1) forwards}.scroll-rod.right{right:calc(50% - 13px);animation:rodRight 1.75s cubic-bezier(.22,.65,.25,1) forwards}.scroll-intro>.chapter,.scroll-intro>h2,.scroll-intro>.verse{animation:inkAppear .7s ease both}.scroll-intro>.verse{animation-delay:.16s}.scroll-intro.is-unrolling #beginLevel{opacity:.45;cursor:wait}.scroll-status{font:12px/1.8 var(--verse)!important;letter-spacing:.12em;margin:10px 0!important}.scroll-intro:not(.is-unrolling) .scroll-status{color:var(--muted)}
@keyframes openPainting{to{clip-path:inset(0 0)}}@keyframes rodLeft{to{left:0}}@keyframes rodRight{to{right:0}}@keyframes inkAppear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(max-width:760px){.masthead{flex-wrap:wrap;gap:8px}.player-chip{margin-left:auto}.masthead>.season{display:none}.name-panel{max-width:none;padding:16px}.player-chip strong{max-width:85px}.scroll-reveal{margin:16px 0}.scroll-intro .verse{margin-bottom:12px}}@media(prefers-reduced-motion:reduce){.scroll-reveal .intro-art{clip-path:none;animation:none}.scroll-rod.left{left:0;animation:none}.scroll-rod.right{right:0;animation:none}.scroll-intro>.chapter,.scroll-intro>h2,.scroll-intro>.verse{animation:none}}
/* Keep the start action outside the scrollable illustration area. */
.dialog.scroll-intro{display:flex;flex-direction:column;overflow:hidden;padding:0;max-height:calc(100svh - 40px)}
.scroll-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 30px 12px;scrollbar-gutter:stable}
.scroll-actions{flex:0 0 auto;padding:14px 30px 22px;background:var(--paper);border-top:1px solid var(--line);position:relative;z-index:3}
.dialog .scroll-actions .primary{width:100%;min-height:48px;margin:0;display:block}
.scroll-content .scroll-reveal{max-width:100%;width:min(100%,48svh);margin:18px auto 12px}
.scroll-content>.chapter,.scroll-content>h2,.scroll-content>.verse{animation:inkAppear .7s ease both}
@media(max-width:760px){.scroll-content{padding:22px 20px 10px}.scroll-actions{padding:12px 20px 18px}.scroll-content>h2{margin:8px 0}.scroll-content>p.verse{margin:12px auto 16px}}
@media(prefers-reduced-motion:reduce){.scroll-content>.chapter,.scroll-content>h2,.scroll-content>.verse{animation:none}}