/* Impeccable-guided refinement, 2026-10-25.
   Preserves the supplied cinematic world and all runtime/measurement code.
   Canvas bounds, input targets, physical lane positions and game timing stay unchanged. */
:root{
 --ui-safe-top:env(safe-area-inset-top);
 --ui-ink:#f4f0e5;
 --ui-secondary:#d1dfe2;
 --ui-gold:#e1c99e;
 --ui-gold-pressed:#c7a974;
 --ui-surface:#10242f;
 --ui-rule:#b6ced333;
 --ui-focus:#c5efff;
 --ui-body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
 --ui-display:Georgia,"Times New Roman","Songti SC","STSong",serif;
 --ui-space-1:4px;
 --ui-space-2:8px;
 --ui-space-3:12px;
 --ui-space-4:16px;
 --ui-space-5:24px;
 --ui-space-6:32px;
}
::selection{background:#e1c99e;color:#10242f}
button,a,select,input,textarea{touch-action:manipulation}
button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible,.game-copy:focus-visible{outline:2px solid var(--ui-focus);outline-offset:4px}
button:disabled{opacity:.58;cursor:wait;transform:none}
select,input,textarea{caret-color:var(--ui-gold)}
*{scrollbar-color:#9aafba66 #0d202b;scrollbar-width:thin}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-thumb{background:#9aafba66;border-radius:6px}
*::-webkit-scrollbar-track{background:#0d202b}
.scene{color:var(--ui-ink)}
.scene header{padding:calc(20px + var(--ui-safe-top)) 24px 0;gap:12px}
.brand{gap:8px;min-width:0;max-inline-size:48%;margin-inline-end:0;overflow:hidden}
.brand span{font:15px/1.35 var(--ui-display);letter-spacing:.01em;min-inline-size:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:none}
.brand img{width:27px;height:27px}
.header-actions{gap:8px;flex-shrink:0}
#languageSelect{height:44px;min-height:44px;width:116px;max-width:31vw;padding:8px 7px;background:#10242fe8;border:1px solid #b6ced34d;border-radius:6px;color:var(--ui-ink);font:12px/1.4 var(--ui-body)}
#languageSelect option{background:#10242f;color:var(--ui-ink)}
.sound{width:44px;height:44px;background:#10242f99;border:1px solid #b6ced34d;color:#e2edf0}
.sound svg{width:19px}
.scene .eyebrow{display:none}
.serif{font-family:var(--ui-display)}
.intro{inset:18% 24px auto}
.intro h1,.scene[data-stage=ready] .intro h1{font-size:clamp(34px,10.1vw,42px);line-height:1.16;letter-spacing:-.02em;margin:0 0 20px;text-wrap:balance;text-shadow:0 3px 20px #06131de6}
.intro h1 em{color:var(--ui-gold)}
.intro .desc,.scene[data-stage=ready] .intro .desc{font:14px/1.7 var(--ui-body);color:var(--ui-secondary);max-inline-size:35ch;margin:0 auto;text-shadow:0 2px 12px #071321}
.gate-bottom{left:24px;right:24px;bottom:calc(76px + env(safe-area-inset-bottom))}
.cta,.next-stage{font-family:var(--ui-body);font-weight:600;letter-spacing:.01em;background:var(--ui-gold);color:#162a32;border:0;border-radius:7px;box-shadow:0 7px 22px #020b1340;transition:background-color .18s ease-out,box-shadow .18s ease-out,transform .18s ease-out}
.cta{font-size:16px;line-height:1.45;padding:14px 18px;min-height:56px}
.cta:hover,.next-stage:hover{background:#eddbb8;filter:none;box-shadow:0 9px 24px #020b1355}
.cta:active,.next-stage:active{background:var(--ui-gold-pressed);transform:translateY(1px)}
.scene[data-stage=gate] .hint,.hint{font:12px/1.6 var(--ui-body);color:#d7e3e4;max-inline-size:36ch;margin:12px auto 0}
.gate-sigil{width:46px;height:46px;left:calc(50% - 23px);top:55%;border:0;box-shadow:none}
.gate-sigil i{inset:-8px;border:1px solid #d8e7df26}
.gate-sigil span{font-size:0;width:28px;height:28px;background:url('assets/spark.svg') center/contain no-repeat;text-shadow:none;filter:none}
.guide{top:calc(112px + env(safe-area-inset-top));left:24px;right:24px;max-height:calc(100% - 238px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0 2px 12px;overscroll-behavior:contain;scroll-padding-block:8px}
.guide h1{font:34px/1.2 var(--ui-display);letter-spacing:-.02em;text-wrap:balance;margin:0 0 24px}
.guide-title-star{display:none}
.steps{gap:0;margin:0 0 24px}
.steps li{font:14px/1.65 var(--ui-body);color:#dfebed;gap:14px;padding:14px 0}
.steps li:first-child{padding-top:0}
.steps li+li{border-top:1px solid var(--ui-rule)}
.step-no{width:28px;height:28px;border-color:#e1c99e80;color:var(--ui-gold);font:600 12px/1 var(--ui-body);margin-top:1px}
.guide .cta{font:600 15px/1.45 var(--ui-body);min-height:54px}
.copy-status{font:13px/1.6 var(--ui-body);color:#d4f0dd;margin:16px 0 0;min-height:24px}
.back-button{font:13px/1.4 var(--ui-body);color:#d2dfe2;min-height:44px;padding:12px 8px}
.copy-field{font:13px/1.5 var(--ui-body);border-radius:6px;min-height:44px}
.scene[data-stage=ready] .intro{top:18%}
.ready-summary{gap:12px;top:57%;font:12px/1.55 var(--ui-body);color:#e1e9e9}
.ready-summary span{padding:8px 4px;border:0}
.ready-summary span+span{border-inline-start:1px solid var(--ui-rule)}
.level-hud{top:calc(82px + var(--ui-safe-top));font:11px/1.4 var(--ui-body);color:#d8e5e8;height:32px}
.level-hud b{font:500 21px/1 var(--ui-body);font-variant-numeric:tabular-nums;color:var(--ui-gold)}
.level-hud small{font-size:10px;color:#c3d5da}
.level-hud i,.level-hud i:after{height:2px}
.level-hud i:after{background:#d3eaf0}
.level-hud.danger b{color:#ffd1b5}
.scene[data-stage=draw] .game-copy{top:calc(122px + var(--ui-safe-top))}
.scene[data-stage=defend] .game-copy,.scene[data-stage=cast] .game-copy{top:calc(120px + var(--ui-safe-top))}
.scene:is([data-stage=draw],[data-stage=defend],[data-stage=cast]) .game-copy{padding:0 8px 6px;border-radius:0;background:linear-gradient(180deg,#081925b3,#08192544)}
.scene:is([data-stage=draw],[data-stage=defend],[data-stage=cast]) .game-copy h1{font:25px/1.22 var(--ui-display);letter-spacing:-.01em;margin-bottom:8px;text-wrap:balance;color:var(--ui-ink)}
.scene:is([data-stage=draw],[data-stage=defend],[data-stage=cast]) .game-copy .desc{font:13px/1.55 var(--ui-body);color:#dce8e9}
.game-bottom .gesture-label{font:12px/1.55 var(--ui-body);color:#dce8e9;margin-bottom:16px}
.stage-track{gap:7px}
.stage-track span{font:11px/1.35 var(--ui-body);color:#c0d1d6}
.stage-track span i{width:20px;height:20px;border-color:#b6ced34d;font:11px/1 var(--ui-body)}
.stage-track .current{color:#f1dfbd}
.stage-track .current i{background:var(--ui-gold);color:#162a32;box-shadow:none}
.stage-track .done{color:#d2eff5}
.stage-track b{background:var(--ui-rule);width:8px}
.next-stage{font-size:14px;line-height:1.45;min-height:48px;padding:12px 16px}
.tiny-tip{font:11px/1.5 var(--ui-body);color:#bfd2d8}
.progress-caption{font:12px/1.45 var(--ui-body);gap:10px;color:#dce8e9}
.progress-caption b{font:500 26px/1 var(--ui-body);font-variant-numeric:tabular-nums;color:#f2e2c3}
.progress-caption small{font:12px/1.4 var(--ui-body);color:#cadce0}
.trace-requirement,.miss-count{font:11px/1.5 var(--ui-body);color:#d7e2e4}
.guard-cue{font-family:var(--ui-body);color:#f1dfbd}
.guard-sector{border:1px solid #c5e3eb7a;background:#102d3d55;text-shadow:none}
.guard-sector span{font-size:0;opacity:1;width:23px;height:23px;background:#e0eff1;mask:url('assets/ui-direction.svg') center/contain no-repeat;-webkit-mask:url('assets/ui-direction.svg') center/contain no-repeat}
.lane-0 span{rotate:-45deg}.lane-2 span{rotate:45deg}
.guard-sector:active{background:#bbdce66b}
.stage-seal{font:14px/1.5 var(--ui-body);border:1px solid #bfdfe778;background:#102d3db3;border-radius:6px;box-shadow:none;padding:10px 18px;color:#e5f6f7}
.success-copy h1,.failure-copy h1{font:34px/1.22 var(--ui-display);letter-spacing:-.02em;text-wrap:balance;margin-bottom:20px;color:var(--ui-ink)}
.success-copy .desc,.failure-copy .desc{font:14px/1.7 var(--ui-body);color:#d5e5e8}
.failure-level,.result-note .small-serif{font:13px/1.65 var(--ui-body);color:#d1e0e3}
.outline-button{font:600 14px/1.4 var(--ui-body);letter-spacing:0;min-height:48px;border-radius:6px;background:#10242fd9;border-color:#e1c99e80;backdrop-filter:none;color:#f1dfbd;padding:13px 28px}
.outline-button:hover{background:#193441}
.victory-stats{gap:12px}.victory-stats span{font:11px/1.5 var(--ui-body);color:#d7e6e8}.victory-stats b{font-family:var(--ui-display);color:var(--ui-gold)}
.toast{border:0;border-radius:8px;background:#19323eed;font:13px/1.6 var(--ui-body);box-shadow:0 7px 24px #020b1355;color:#f0f6f4}
.scene footer{font:11px/1.5 var(--ui-body);color:#c0d2d7;letter-spacing:0}
.startup{border:0;border-radius:12px;background:#10242ff5;box-shadow:0 12px 40px #020b1380;color:#f4e9d0}
.startup a{border-radius:6px;min-height:44px}
.preview-nav{font:11px/1.5 var(--ui-body);gap:10px;flex-wrap:wrap;max-width:calc(100% - 32px)}
html[dir=rtl] .serif,html[dir=rtl] .guide h1,html[dir=rtl] .intro h1,html[dir=rtl] .scene[data-stage=ready] .intro h1,html[dir=rtl] .success-copy h1,html[dir=rtl] .failure-copy h1,html[dir=rtl] .scene .game-copy h1{font-family:var(--ui-body);letter-spacing:0;line-height:1.4}
html:is(:lang(zh-CN),:lang(ja),:lang(ko)) .intro h1{letter-spacing:.01em;line-height:1.3}
html:is(:lang(zh-CN),:lang(ja),:lang(ko)) .intro .desc{max-inline-size:100%}
html:is(:lang(th),:lang(km),:lang(si),:lang(ta),:lang(bn)) .serif,html:is(:lang(th),:lang(km),:lang(si),:lang(ta),:lang(bn)) .guide h1{font-family:var(--ui-body);letter-spacing:0;line-height:1.4}
@media(max-width:370px){
 .scene header{padding-inline:16px;gap:8px}.brand{gap:6px}.brand img{width:23px;height:23px}.brand span{font-size:13px}#languageSelect{width:106px;max-width:34vw}.sound{width:44px;height:44px}.header-actions{gap:6px}
 .intro{inset-inline:20px}.intro h1,.scene[data-stage=ready] .intro h1{font-size:34px}.intro .desc,.scene[data-stage=ready] .intro .desc{font-size:13px}
 .gate-bottom{left:20px;right:20px}.guide{left:20px;right:20px}.guide h1{font-size:30px}.steps li{font-size:13px;gap:12px}.stage-track span{font-size:10px}.stage-track{gap:5px}
}
@media(max-height:720px){
 .scene header{padding-top:calc(12px + var(--ui-safe-top))}
 .level-hud{top:calc(73px + var(--ui-safe-top));height:24px}.level-hud b{font-size:18px}
 .intro,.scene[data-stage=ready] .intro{top:18%}.intro h1,.scene[data-stage=ready] .intro h1{font-size:32px;line-height:1.2;margin-bottom:16px}.intro .desc,.scene[data-stage=ready] .intro .desc{font-size:13px;line-height:1.6}
 .gate-bottom{bottom:calc(59px + env(safe-area-inset-bottom))}.cta{min-height:52px;padding:12px 16px;font-size:15px}.scene[data-stage=gate] .hint,.hint{font-size:11px;line-height:1.5;margin-top:10px}
 .guide{top:calc(88px + env(safe-area-inset-top));max-height:calc(100% - 214px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.guide h1{font-size:29px;margin-bottom:20px}.steps{margin-bottom:20px}.steps li{padding-block:12px}.guide .cta{min-height:50px}
 .scene:is([data-stage=draw],[data-stage=defend],[data-stage=cast]) .game-copy{top:calc(100px + var(--ui-safe-top))}
 .scene:is([data-stage=draw],[data-stage=defend],[data-stage=cast]) .game-copy h1{font-size:21px;line-height:1.25;margin-bottom:6px}.scene:is([data-stage=draw],[data-stage=defend],[data-stage=cast]) .game-copy .desc{font-size:12px;line-height:1.5}
 .game-bottom .gesture-label{font-size:11px;line-height:1.5;margin-bottom:10px}.stage-track span{font-size:10px}.stage-track{gap:5px}.stage-track span i{width:18px;height:18px}.progress-caption{font-size:11px}.progress-caption b{font-size:24px}.trace-requirement,.miss-count{font-size:10px}
 .success-copy h1,.failure-copy h1{font-size:29px;margin-bottom:16px}.success-copy .desc,.failure-copy .desc{font-size:13px;line-height:1.6}.scene footer{font-size:10px}.ready-summary{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.cta,.next-stage,.sound{transition:none}}