:root{color-scheme:light;--page:#f8f4ff;--surface:#fffdfb;--ink:#34223e;--muted:#776781;--line:#eaddE8;--accent:#a51d4e;--accent-soft:#fff0f4;--panel:#fff7f3;--green:#18794d;--red:#b42d40;--shadow:#61314d13}
[data-theme="dark"]{color-scheme:dark;--page:#100e1a;--surface:#1d1626;--ink:#fff3f8;--muted:#bcadc6;--line:#463247;--accent:#ffa8c2;--accent-soft:#382136;--panel:#271d2d;--green:#82e3ad;--red:#ff96a1;--shadow:#0004}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink);font-family:"Segoe UI",system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button,a,.joystick{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}button:disabled{cursor:default}a{color:inherit}.header{max-width:1240px;margin:auto;min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 30px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:750;font-size:15px}.brand img{width:48px;height:48px;object-fit:contain}.brand small{display:block;font-size:8px;letter-spacing:2px;color:var(--muted);margin-top:5px}.header-actions{display:flex;align-items:center;gap:12px}.theme-button,.back{border:1px solid var(--line);border-radius:12px;background:var(--surface);min-height:42px;padding:10px 14px;text-decoration:none;font-size:13px;font-weight:650}.theme-button{color:var(--ink);font-size:20px;line-height:1}.stage{position:relative;max-width:1100px;margin:12px auto 36px;padding:28px 42px 20px;background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:0 16px 60px var(--shadow);overflow:hidden}.stage:before{content:"";position:absolute;pointer-events:none;width:440px;height:440px;right:-240px;top:-260px;background:radial-gradient(circle,#ec9b8c26,transparent 68%)}.stage-top{display:flex;align-items:center;gap:14px;margin-bottom:32px}.game-tag{padding:7px 10px;border-radius:7px;background:var(--accent);color:var(--surface);font-size:10px;font-weight:850;letter-spacing:1.5px}.stage-category{color:var(--muted);font-size:9px;font-weight:750;letter-spacing:2px}.live-dot{margin-left:auto;width:7px;height:7px;background:#ec9271;border-radius:50%;box-shadow:0 0 0 5px #ec927115}.intro{display:grid;grid-template-columns:1.15fr 1fr;column-gap:50px;align-items:center}.eyebrow{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:1.7px;line-height:1.8;margin:0 0 16px}h1{font-size:clamp(34px,4.5vw,56px);line-height:1.07;letter-spacing:-2px;margin:0}h1 em{font-style:normal;color:var(--accent)}.subtitle{font-size:20px;font-weight:650;margin:16px 0 22px}.intro-stats{display:flex;gap:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0}.intro-stats>span{font-size:10px;color:var(--muted)}.intro-stats strong{display:block;color:var(--ink);font-size:25px;line-height:1.3;font-variant-numeric:tabular-nums}.intro-stats strong span{font-size:15px}.how-to{margin-top:23px;font-size:12px;line-height:1.8;color:var(--muted)}.how-to h2{font-size:14px;color:var(--ink);margin:0 0 6px}.how-to p{margin:0}.how-to ol{padding-left:18px;margin:9px 0 0}.intro-art{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:100px 100px 24px 24px;min-height:370px;padding:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transform:rotate(3deg)}.art-label,.art-caption{font-size:8px;letter-spacing:1.6px;color:var(--muted);z-index:1}.art-caption{margin-top:24px;letter-spacing:.6px;font-size:10px}.ready-words{display:flex;flex-direction:column;align-items:center;font-size:62px;font-style:italic;font-weight:950;line-height:1.04;letter-spacing:-3px;transform:rotate(-8deg);margin-top:30px}.ready-words span:first-child{color:var(--accent)}.ready-words span:nth-child(2){color:#da8940}.ready-words strong{color:var(--green)}.navigation-controls{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:24px;width:100%;max-width:590px;margin:28px auto 0}.joystick{position:relative;flex-shrink:0;user-select:none;touch-action:none;cursor:grab;aspect-ratio:1}.joystick:focus{outline:none}.joystick:active{cursor:grabbing}.joystick-base{display:block;width:100%;height:100%;pointer-events:none}.joystick-knob{position:absolute;width:58%;height:58%;object-fit:contain;left:21%;top:21%;pointer-events:none;transform:translate(var(--stick-x,0px),var(--stick-y,0px));transition:transform .17s ease;filter:drop-shadow(0 4px 4px #0003)}.joystick.dragging .joystick-knob{transition:none}.nav-joystick{width:116px}.nav-arrow{display:flex;align-items:center;justify-content:center;gap:15px;min-height:58px;flex:1;max-width:185px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;font-weight:750;font-size:13px;text-align:left;background:var(--accent-soft);color:var(--accent);transition:transform .2s,box-shadow .2s}.nav-arrow>span:only-child{font-size:24px}.nav-arrow small{display:block;font-weight:500;margin-top:2px;font-size:11px}.start-arrow{background:var(--green);border-color:transparent;color:var(--surface)}.retry-arrow{background:#ffe2b9;color:#79400c;border-color:#f3c58a}.nav-arrow:hover{transform:translateY(-2px);box-shadow:0 5px 12px var(--shadow)}.input-hint{grid-column:1/-1;text-align:center;color:var(--muted);font-size:10px;line-height:1.6;margin:13px 0 0}.stage-footer{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:8px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}.round-status{display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:750}.timer{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}.timer strong{color:var(--ink);font-size:24px;font-variant-numeric:tabular-nums}.time-bar{height:7px;border-radius:10px;overflow:hidden;background:var(--line);margin:14px 0 32px}.time-bar>div{height:100%;width:100%;background:linear-gradient(90deg,#ec9860,#c42e62);border-radius:inherit;transition:width .1s linear}.time-bar.urgent>div{background:var(--red)}.play-layout{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:38px;min-height:370px}.defect-panel{text-align:center}.defect-display{padding:28px 15px 16px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}.defect-label,.chart-caption{font-size:8px;letter-spacing:1.8px;font-weight:750;color:var(--muted)}.defect-display h2{font-size:clamp(26px,3.5vw,38px);line-height:1.2;letter-spacing:-1px;margin:16px 0;color:var(--accent);outline:none}.defect-prompt{font-size:13px;line-height:1.7;color:var(--muted);margin:18px 0 0}.defect-prompt strong{color:var(--ink)}.direction-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(92px,11vw,134px) minmax(0,1fr);grid-template-rows:minmax(74px,auto) auto minmax(74px,auto);gap:14px 9px;align-items:center}.play-joystick{grid-column:2;grid-row:2;width:100%}.action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;width:100%;min-height:82px;padding:10px 8px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;line-height:1.5;transition:background .15s,transform .15s,border-color .15s;overflow-wrap:break-word}.action-up{grid-column:2;grid-row:1}.action-left{grid-column:1;grid-row:2}.action-right{grid-column:3;grid-row:2}.action-down{grid-column:2;grid-row:3}.direction-marker{font-size:16px;color:var(--accent);line-height:1}.action:not(:disabled):hover,.action.aimed{background:var(--accent-soft);border-color:var(--accent);transform:translateY(-2px)}.action.correct{border-color:var(--green);color:var(--green);background:var(--accent-soft)}.action.wrong{border-color:var(--red);color:var(--red);background:var(--accent-soft)}.feedback{text-align:center;font-size:12px;font-weight:700;color:var(--accent);min-height:36px;line-height:1.5;margin:19px 0 0}.feedback[data-kind="correct"]{color:var(--green)}.feedback[data-kind="wrong"]{color:var(--red)}.results{text-align:center;max-width:620px;margin:auto}.result-spark{font-size:64px;color:#df9650;line-height:1;margin:8px 0 18px}.results .eyebrow{margin-bottom:10px}.results h2{font-size:clamp(28px,5vw,46px);letter-spacing:-1.5px;color:var(--accent);margin:0;outline:none}.results>p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.6}.score-label{margin:26px 0 0;font-size:15px;font-weight:650}.score{display:flex;justify-content:center;align-items:baseline;gap:12px;line-height:1.2}.score strong{font-size:80px;letter-spacing:-4px}.score>span{font-size:30px;color:var(--muted)}.review{text-align:left;border-top:1px solid var(--line);margin-top:28px;padding-top:18px}.review summary{font-size:12px;color:var(--accent);font-weight:700;cursor:pointer}.review ol{padding-left:23px;font-size:12px;line-height:1.6}.review li{padding:10px 0;border-bottom:1px solid var(--line)}.review li strong,.review li span{display:block}.review li span{color:var(--muted)}.review .review-correct{color:var(--green)}.review .review-wrong{color:var(--red)}.no-script{text-align:center}
@media(min-width:1200px){.stage{margin-top:22px;padding:32px 48px 22px}.intro{column-gap:75px}.intro-art{min-height:400px}.game{padding:5px 0 30px}.play-layout{gap:65px;min-height:415px}}
@media(max-width:760px){.header{padding:12px 18px;min-height:74px}.brand{font-size:12px;gap:8px}.brand img{width:38px;height:38px}.brand small{font-size:6px;letter-spacing:1.3px}.header-actions{gap:7px}.back{font-size:11px;padding:10px}.stage{margin:6px 14px 20px;padding:22px 23px 16px;border-radius:22px}.stage-top{margin-bottom:24px}.intro{gap:0 25px}.intro-art{min-height:315px;padding:15px;border-radius:70px 70px 20px 20px}.ready-words{font-size:50px}.art-label{font-size:6px}.art-caption{font-size:8px;text-align:center}.intro-stats{gap:22px}.play-layout{grid-template-columns:1fr;gap:18px;min-height:0}.defect-panel .eyebrow{margin-bottom:12px}.defect-display{max-width:480px;margin:auto;padding:18px 14px 12px}.defect-display h2{margin:10px 0;font-size:30px}.defect-prompt{display:none}.time-bar{margin-bottom:22px}.direction-grid{max-width:430px;margin:auto;grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr);gap:9px}.action{font-size:12px;min-height:73px}.feedback{min-height:24px;margin-top:12px}.choice-panel .input-hint{margin-top:5px}.stage-footer{margin-top:22px;font-size:7px;letter-spacing:1px}}
@media(max-width:520px){.header{padding:10px 14px}.back span{display:none}.back{font-size:18px;min-width:40px;text-align:center}.stage{margin:0 9px 14px;padding:18px 16px 15px}.stage-top{margin-bottom:24px;gap:10px}.stage-category{font-size:8px;letter-spacing:1.2px}.intro{grid-template-columns:1fr}.intro-copy{text-align:center}h1{font-size:44px}.subtitle{font-size:18px;margin:13px 0 20px}.intro-stats{justify-content:center;gap:42px}.how-to{text-align:left;margin-top:20px;font-size:12px}.intro-art{display:none}.navigation-controls{gap:10px;margin-top:25px}.nav-joystick{width:94px}.nav-arrow{padding:10px 8px;gap:6px;font-size:11px;min-height:55px}.nav-arrow small{font-size:10px}.stage-footer{font-size:6px;letter-spacing:.8px}.round-status{font-size:15px}.timer strong{font-size:22px}.time-bar{margin:12px 0 20px}.defect-display h2{font-size:29px}.direction-grid{grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr);gap:8px 7px}.action{font-size:11px;padding:9px 5px}.defect-label,.chart-caption{font-size:7px}.results .navigation-controls{margin-top:25px}.result-spark{font-size:50px}.score strong{font-size:70px}.review{margin-top:22px}}
@media(max-width:359px){.brand{font-size:10px}.brand small{font-size:5px}.stage{padding:16px 12px}.stage-category{font-size:7px}.direction-grid{grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);gap:8px 5px}.action{font-size:10px}.nav-joystick{width:78px}.nav-arrow{font-size:10px;padding:9px 6px}.navigation-controls{gap:7px}h1{font-size:38px}.input-hint{font-size:9px}}
@media(max-height:600px) and (min-width:650px){.header{min-height:60px;padding-top:8px;padding-bottom:8px}.stage{margin-top:0;padding-top:16px}.stage-top{margin-bottom:16px}.play-layout{grid-template-columns:1fr 1.1fr;gap:24px;min-height:0}.direction-grid{grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);gap:7px}.action{min-height:65px;font-size:11px}.time-bar{margin-bottom:16px}.stage-footer{margin-top:18px}.game{padding-bottom:0}}
@media(max-width:520px) and (max-height:760px){.game .chart-caption{display:none}.game .defect-display{padding:12px}.game .defect-display h2{margin:8px 0 0;font-size:26px}.stage-top{margin-bottom:16px}.game .time-bar{margin-bottom:14px}.game .defect-panel .eyebrow{font-size:8px;margin-bottom:8px}.game .direction-grid{grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr)}.game .action{min-height:65px}.game .feedback{margin-top:9px}.stage-footer{margin-top:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Give the instructions priority over the intro title and decoration. */
#intro h1{font-size:34px;line-height:1.15;letter-spacing:-1px}
#intro .subtitle{font-size:16px;margin:8px 0 12px}
#intro .intro-stats{padding:10px 0;gap:24px}
#intro .intro-stats strong{font-size:20px}
#intro .how-to{font-size:16px;line-height:1.5;margin-top:16px;color:var(--ink)}
#intro .how-to h2{font-size:20px;margin-bottom:8px}
#intro .how-to ol{padding-left:23px;margin-top:10px}
#intro .how-to li{padding-left:3px;margin-top:7px}
@media(max-width:760px){
 .stage:has(#intro:not([hidden])){padding-top:14px}
 .stage:has(#intro:not([hidden])) .stage-top{margin-bottom:12px}
 #intro{grid-template-columns:1fr}
 #intro .intro-art{display:none}
 #intro .intro-copy{text-align:left}
 #intro .eyebrow{display:none}
 #intro h1{font-size:28px;letter-spacing:-.8px}
 #intro h1 br{display:none}
 #intro .intro-stats{justify-content:space-between;gap:10px;padding:9px 0}
 #intro .intro-stats>span{display:flex;align-items:baseline;gap:5px;font-size:11px}
 #intro .intro-stats strong{display:inline;font-size:18px}
 #intro .intro-stats strong span{font-size:12px}
 #intro .navigation-controls{margin-top:16px;gap:10px}
 #intro .nav-joystick{width:76px}
 #intro .nav-arrow{font-size:12px;min-height:48px;padding:8px}
 #intro .nav-arrow small{font-size:11px}
 #intro .input-hint{margin-top:6px;font-size:11px}
 .stage:has(#intro:not([hidden])) .stage-footer{margin-top:12px;padding-top:10px}
}
@media(max-width:520px){
 body:has(#intro:not([hidden])) .header{min-height:60px;padding-top:8px;padding-bottom:8px}
 #intro h1{font-size:26px}
 #intro .subtitle{font-size:15px}
 #intro .how-to{margin-top:13px}
 #intro .how-to h2{font-size:19px;margin-bottom:6px}
}
@media(max-width:359px){
 #intro h1{font-size:23px;letter-spacing:-.7px}
 #intro .intro-stats>span{font-size:10px;gap:4px}
 #intro .intro-stats strong{font-size:16px}
 #intro .nav-joystick{width:66px}
}