/* Quick-start stage: match the game's gold, crystal and six-color keys. */
:root{--guide-bg:#10101e;--guide-paper:#fff5df;--guide-gold:#f3c979;--guide-edge:#bf8d4f;--guide-muted:#c2bfd1;--guide-cyan:#8fffe7;--guide-ink:#211322;--guide-shadow:#0009}
.tutorial-sheet{display:flex;flex-direction:column;max-width:460px;padding:0;overflow:hidden;border:1px solid var(--guide-edge);border-radius:20px;background:var(--guide-bg);box-shadow:0 24px 70px var(--guide-shadow),inset 0 0 0 3px #f3c97912;color:var(--guide-paper)}
.tutorial-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:43px;padding:0 11px 0 19px;border-bottom:1px solid #f3c97936;flex-shrink:0;background:linear-gradient(110deg,#a56e2c35,transparent)}
.tutorial-top>span{color:var(--guide-gold);font-size:9px;font-weight:800;letter-spacing:.2em}
.tutorial-top .nav-icon{width:35px;height:35px;min-height:35px;background:transparent;color:var(--guide-gold);font-size:24px}
.tutorial-body{overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--guide-edge) var(--guide-bg)}
.tutorial-hero{height:clamp(160px,25cqh,225px);position:relative;isolation:isolate;background:url("assets/tutorial-stage-v241.webp") center 60%/cover;border-bottom:1px solid #f3c97955;overflow:hidden}
.tutorial-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b072444,#0b072400 80%),radial-gradient(ellipse at 50% 35%,#080615b3,transparent 60%);z-index:-1}
.tutorial-speed-readout{position:absolute;inset:10% 0 auto;display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 14px #000;line-height:1}
.tutorial-speed-readout>span{font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--guide-paper)}
.tutorial-speed-readout>strong{display:flex;align-items:baseline;gap:3px;margin:4px 0 6px;font-size:clamp(54px,10cqh,80px);letter-spacing:-.065em;color:var(--guide-paper);filter:drop-shadow(0 0 12px #f3c97970)}
.tutorial-speed-readout b{font-weight:800;font-variant-numeric:tabular-nums}.tutorial-speed-readout strong small{font-size:.48em;font-weight:500}
.tutorial-speed-readout em{padding:5px 11px;border:1px solid #f3c97999;border-radius:20px;font-size:9px;letter-spacing:.07em;font-weight:800;font-style:normal;background:#1a0d26c9;color:var(--guide-gold)}
.tutorial-spark{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#fff2 45%,transparent 60%);transform:translateX(-100%);animation:guide-sheen 1.1s .15s ease-out both}
.tutorial-copy{padding:17px 21px 15px}
.tutorial-eyebrow{font-size:8px;letter-spacing:.2em;color:var(--guide-gold);font-weight:800}
.tutorial-sheet .tutorial-copy h2{font-size:clamp(21px,5.3cqw,27px);line-height:1.35;margin:6px 0 9px;font-weight:800;letter-spacing:-.025em;text-wrap:balance}
.tutorial-lead{font-size:12px;line-height:1.65;margin:0 0 13px;color:var(--guide-muted)}
.tutorial-adjust{display:flex;gap:12px;align-items:center;padding:12px 13px;border:1px solid #f3c97944;border-radius:10px;background:linear-gradient(120deg,#f3c97910,#5d22a018)}
.tutorial-adjust-icon{font-size:29px;color:var(--guide-gold)}
.tutorial-adjust strong{font-size:12px;line-height:1.5}.tutorial-adjust p{font-size:12px;margin:3px 0;color:var(--guide-cyan);font-weight:800}.tutorial-adjust small{font-size:10px;color:var(--guide-muted);line-height:1.5;display:block}
.tutorial-tempo{font-size:10px;line-height:1.6;margin:9px 1px 13px;color:var(--guide-muted)}
.tutorial-play-tip{display:flex;align-items:center;gap:12px;border-top:1px solid #f3c97928;padding-top:10px}.tutorial-play-tip>span{color:var(--guide-cyan);font-size:20px;text-shadow:0 0 18px var(--guide-cyan)}
.tutorial-play-tip p{margin:0}.tutorial-play-tip strong{display:block;font-size:12px}.tutorial-play-tip small{display:block;font-size:10px;line-height:1.6;color:var(--guide-muted);margin-top:2px}
.tutorial-footer{flex-shrink:0;padding:13px 17px 10px;border-top:1px solid #f3c97944;background:linear-gradient(180deg,#1f172a,var(--guide-bg));box-shadow:0 -8px 20px #0003;z-index:1}
.tutorial-actions{display:grid;grid-template-columns:.85fr 1.15fr;gap:9px}.tutorial-actions button{font-size:13px;min-height:47px;white-space:nowrap;border-radius:9px;font-weight:800}
.tutorial-actions .text-action{background:#ffffff05;border-color:#f3c97970;color:var(--guide-gold)}
.tutorial-actions .primary{color:var(--guide-ink);background:linear-gradient(130deg,#fff3bb,#efc16c 50%,#efac98);border:1px solid #fff0c7;box-shadow:0 3px 16px #eaa64530}
.tutorial-actions button:active{transform:translateY(1px);filter:brightness(1.12)}
.tutorial-footer>p{text-align:center;font-size:9px;color:var(--guide-muted);margin:8px 0 0}
.welcome{background:linear-gradient(#0a081a66,#0a081ad9),url("assets/tutorial-stage-v241.webp") center/cover}
.welcome-card{background:#10101eea;border-color:var(--guide-edge);box-shadow:0 20px 70px var(--guide-shadow),inset 0 0 0 4px #f3c9790c;backdrop-filter:blur(8px)}
.welcome-speed{display:flex;justify-content:center;align-items:center;gap:13px;margin-top:15px;color:var(--guide-paper)}
.welcome-speed>span{font-size:12px;color:var(--guide-muted)}.welcome-speed>strong{font-size:26px;letter-spacing:-.05em;color:var(--guide-gold)}
.landscape .tutorial-sheet{max-width:780px;max-height:calc(var(--app-h) - 24px);padding:0}
.landscape .tutorial-top{min-height:34px;padding-left:18px}.landscape .tutorial-top .nav-icon{height:32px;min-height:32px}
.landscape .tutorial-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)}
.landscape .tutorial-hero{height:100%;min-height:240px;background-position:50% 70%;border-bottom:0;border-right:1px solid #f3c97944}
.landscape .tutorial-speed-readout{top:12%}.landscape .tutorial-speed-readout>strong{font-size:70px}
.landscape .tutorial-copy{padding:13px 20px 12px}.landscape .tutorial-sheet .tutorial-copy h2{font-size:23px;margin:4px 0 7px}.landscape .tutorial-lead{font-size:11px;margin-bottom:9px;line-height:1.5}
.landscape .tutorial-adjust{padding:8px 11px}.landscape .tutorial-tempo{font-size:9px;margin:7px 0}.landscape .tutorial-play-tip{padding-top:7px}
.landscape .tutorial-footer{display:flex;flex-direction:row-reverse;align-items:center;gap:16px;padding:10px 15px}.landscape .tutorial-actions{width:58%;flex-shrink:0}.landscape .tutorial-footer>p{margin:0;text-align:left;line-height:1.5}
@container(max-height:570px) and (max-width:550px){.tutorial-top{min-height:35px}.tutorial-hero{height:140px}.tutorial-speed-readout>strong{font-size:50px}.tutorial-copy{padding:12px 17px}.tutorial-sheet .tutorial-copy h2{font-size:20px}.tutorial-lead{font-size:11px;margin-bottom:9px}.tutorial-adjust{padding:9px 11px}.tutorial-tempo{margin:7px 0}.tutorial-play-tip{padding-top:8px}.tutorial-footer{padding:10px 13px 8px}}
@container(max-height:360px) and (min-width:551px){.landscape .tutorial-hero{min-height:230px}.landscape .tutorial-copy{padding:10px 15px}.landscape .tutorial-sheet .tutorial-copy h2{font-size:20px}.landscape .tutorial-footer{padding:7px 12px}.landscape .tutorial-actions button{min-height:40px}}
@keyframes guide-sheen{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.tutorial-spark{animation:none;display:none}.tutorial-actions button:active{transform:none}}