:root { color-scheme: dark; --cyan:#5cf4ff; --gold:#ffd95c; --panel:#0b1d43; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#03091c; }
body { color:#f5fbff; font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; }
button { font:inherit; }
.game-shell { min-height:100vh; position:relative; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 50% 115%,#183576 0,#091638 34%,#03091b 72%); }
.game-shell::before { content:""; position:absolute; inset:0; z-index:-3; background:radial-gradient(ellipse at 16% 40%,rgba(68,56,255,.16),transparent 32%),radial-gradient(ellipse at 85% 24%,rgba(0,224,255,.12),transparent 30%); }
.stars { position:absolute; inset:0; z-index:-2; opacity:.5; background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#8deeff 1px,transparent 1px); background-size:62px 62px,95px 95px; background-position:10px 15px,42px 48px; }
.stars-b { transform:scale(1.3) rotate(4deg); opacity:.22; animation:drift 22s linear infinite; }
@keyframes drift { to { transform:scale(1.3) rotate(4deg) translateY(70px); } }
.topbar { height:64px; position:relative; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:0 3vw; border-bottom:1px solid rgba(116,223,255,.19); background:rgba(4,10,31,.78); backdrop-filter:blur(14px); }
.brand { border:0; color:white; background:none; display:flex; gap:10px; align-items:center; cursor:pointer; text-align:left; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; color:#08112d; font-size:20px; background:linear-gradient(145deg,#fff590,#ffae2b); clip-path:polygon(50% 0,61% 35%,100% 38%,69% 60%,80% 100%,50% 76%,20% 100%,31% 60%,0 38%,39% 35%); filter:drop-shadow(0 0 10px #ffc94f); }
.brand b { display:block; letter-spacing:.08em; font-size:15px; }.brand small { display:block; color:#7beeff; font-size:9px; letter-spacing:.34em; }
.top-actions { display:flex; gap:8px; }.round-action { border:1px solid rgba(105,225,255,.35); border-radius:999px; padding:8px 13px; color:#bdf8ff; background:rgba(18,55,97,.52); cursor:pointer; font-size:11px; font-weight:900; }
.page-panel { min-height:calc(100vh - 64px); padding:34px 24px 28px; display:flex; flex-direction:column; align-items:center; position:relative; }
.mission-badge,.mission-complete { color:#80edff; border:1px solid rgba(95,222,255,.35); background:rgba(20,67,117,.38); border-radius:999px; font-size:9px; font-weight:900; letter-spacing:.22em; padding:6px 13px; }
.page-panel h1 { font-size:clamp(30px,4vw,50px); line-height:1.15; text-align:center; margin:12px 0 7px; letter-spacing:.04em; text-shadow:0 4px 30px rgba(0,0,0,.5); }.page-panel h1 em { color:var(--gold); font-style:normal; }
.page-panel>p { margin:0 0 22px; color:#a8bddb; font-weight:800; font-size:14px; }.back-link { position:absolute; left:4vw; top:34px; border:0; background:none; color:#9ec9e9; cursor:pointer; font-size:12px; font-weight:900; }
.planet { position:absolute; border-radius:50%; z-index:-1; opacity:.68; }.planet-one { width:210px; height:210px; left:-70px; top:15%; background:radial-gradient(circle at 35% 30%,#aa70ff,#3e2377 58%,#101438 60%); box-shadow:0 0 70px #5831a955; }.planet-two { width:70px; height:70px; right:8%; top:22%; background:radial-gradient(circle at 30% 30%,#6ff5ee,#176390 55%,#082247 58%); }

/* title */
.home-screen { justify-content:center; padding-top:20px; }.home-screen h1 { font-size:clamp(36px,5vw,62px); }.mode-cards { width:min(740px,95%); display:grid; grid-template-columns:1fr 1fr; gap:18px; }.mode-cards button { position:relative; min-height:190px; padding:24px 20px 18px; border:1px solid #315e8d; border-radius:22px; color:white; background:linear-gradient(145deg,rgba(20,51,99,.95),rgba(7,22,55,.96)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 18px 45px rgba(0,0,0,.22); cursor:pointer; transition:.2s; overflow:hidden; }.mode-cards button:hover { transform:translateY(-4px); border-color:#61e8ff; box-shadow:0 0 28px rgba(64,221,255,.17); }.mode-cards button::after { content:""; position:absolute; inset:auto -35px -55px auto; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,#2fc8eb44,transparent 68%); }.mode-icon { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 9px; border-radius:50%; color:#0a2040; background:linear-gradient(#8ff8ff,#3bcde0); font:1000 29px Arial; box-shadow:0 0 24px #48e6ff55; }.mode-cards small,.mode-cards b,.mode-cards i { display:block; }.mode-cards small { color:#80b4d9; font-size:10px; font-weight:900; }.mode-cards b { margin:4px 0; font-size:21px; }.mode-cards i { color:#90a8c8; font-size:11px; font-style:normal; }.saved-setting { margin-top:15px; color:#6f8cab; font-size:10px; font-weight:900; }

/* course map */
.course-screen { padding-top:27px; }.course-screen h1 { font-size:37px; }.course-map { width:min(850px,95%); display:grid; grid-template-columns:repeat(5,1fr); gap:13px; align-items:stretch; position:relative; }.course-map::before { content:""; position:absolute; z-index:-1; left:7%; right:7%; top:55px; height:2px; background:linear-gradient(90deg,#3d7f9d,#5eddef,#3d7f9d); opacity:.45; }.course-map button { min-height:245px; position:relative; padding:17px 10px 14px; display:flex; flex-direction:column; align-items:center; border:1px solid #2c527c; border-radius:18px; color:white; background:linear-gradient(160deg,rgba(19,47,91,.95),rgba(6,20,49,.98)); cursor:pointer; transition:.2s; box-shadow:inset 0 1px rgba(255,255,255,.08),0 14px 35px rgba(0,0,0,.2); }.course-map button:hover { transform:translateY(-5px); border-color:#59ddf4; }.course-number { position:absolute; left:10px; top:10px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#bdefff; background:#173b66; font:900 11px Arial; }.course-planet { width:76px; height:76px; display:grid; place-items:center; margin:12px 0 15px; border-radius:50%; color:#0b2444; font:1000 23px Arial; font-style:normal; background:radial-gradient(circle at 32% 27%,#f8ffbe,#5ce7dc 45%,#2874b3 75%); box-shadow:0 0 25px #3fddef55; }.course-map button:nth-child(2) .course-planet{background:radial-gradient(circle at 32% 27%,#fff1b0,#ff9f57 48%,#a43f69 78%)}.course-map button:nth-child(3) .course-planet{background:radial-gradient(circle at 32% 27%,#efc9ff,#a578ff 48%,#4e3c9d 78%)}.course-map button:nth-child(4) .course-planet{background:radial-gradient(circle at 32% 27%,#c7f7ff,#64a8ff 48%,#304aa5 78%)}.course-map button:nth-child(5) .course-planet{background:radial-gradient(circle at 32% 27%,#fff6a6,#f7c32e 48%,#bd5d19 78%)}.course-copy { min-height:72px; }.course-copy b,.course-copy small { display:block; }.course-copy b { font-size:14px; line-height:1.4; }.course-copy small { margin-top:4px; color:#7796bc; font-size:9px; }.stars-earned { margin-top:auto; }.stars-earned i { color:#294461; font-style:normal; font-size:16px; }.stars-earned i.on { color:#ffd95c; text-shadow:0 0 8px #ffd95c; }.course-map button>em { position:absolute; top:-9px; padding:3px 8px; border-radius:99px; color:#332800; background:#ffd95c; font-size:8px; font-style:normal; font-weight:900; }

/* settings */
.settings-screen { padding-top:25px; }.settings-screen h1 { font-size:34px; }.selected-course { width:min(600px,92%); display:flex; align-items:center; justify-content:center; gap:12px; margin:4px 0 14px; padding:10px; border:1px solid #2d5683; border-radius:14px; background:rgba(10,30,67,.8); }.selected-course>i { width:39px; height:39px; display:grid; place-items:center; border-radius:50%; color:#092144; background:#71eff7; font-style:normal; font-weight:1000; }.selected-course small,.selected-course b { display:block; }.selected-course small { color:#7797ba; font-size:8px; }.selected-course b { font-size:15px; }.settings-grid { width:min(720px,95%); display:grid; grid-template-columns:1fr 1fr; gap:12px; }.settings-grid fieldset { min-width:0; border:1px solid #2b527d; border-radius:16px; padding:12px; background:linear-gradient(145deg,rgba(17,42,82,.9),rgba(7,22,53,.92)); }.settings-grid legend { color:#bfefff; padding:0 7px; font-size:11px; font-weight:900; }.time-choices,.layout-choices { display:flex; gap:7px; }.time-choices button,.layout-choices button { flex:1; min-height:54px; border:1px solid #315477; border-radius:10px; color:#9db7d5; background:#08182f; cursor:pointer; }.time-choices button.selected,.layout-choices button.selected { color:white; border-color:#5deeff; background:#13396b; box-shadow:0 0 12px #4cecff33; }.time-choices b,.time-choices small { display:block; }.time-choices b { font-size:20px; }.time-choices small { font-size:8px; }.layout-choices button { font-size:11px; font-weight:900; }.guide-setting { grid-column:1/3; }.guide-setting label { display:flex; align-items:center; gap:10px; cursor:pointer; }.guide-setting input { position:absolute; opacity:0; }.guide-setting label>span { width:40px; height:22px; position:relative; border-radius:99px; background:#19304e; transition:.2s; }.guide-setting label>span::after { content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#6683a3; transition:.2s; }.guide-setting input:checked+span { background:#2dbfd1; }.guide-setting input:checked+span::after { left:21px; background:white; }.guide-setting label b { font-size:12px; }.guide-setting>small { margin-left:50px; color:#728cac; font-size:9px; }.primary-button { margin-top:17px; padding:13px 25px; border:0; border-radius:999px; color:#08223e; background:linear-gradient(#80f7ff,#39cddd); font-weight:1000; cursor:pointer; box-shadow:0 0 22px #4be9ff44; }.primary-button span { margin-left:9px; }

/* preparation */
.prepare-screen { min-height:calc(100vh - 64px); display:flex; flex-direction:column; align-items:center; padding:18px 2vw 20px; }.prepare-copy { text-align:center; }.prepare-copy h1 { margin:7px 0 2px; font-size:34px; }.prepare-copy p { margin:0 0 8px; color:#9db8d7; font-size:12px; }.prepare-copy p b { color:#ffe16a; font-size:17px; }.home-hand-labels { width:min(520px,80%); display:flex; justify-content:space-between; color:#7795b7; font-size:10px; font-weight:900; }.home-sequence { display:flex; align-items:center; gap:8px; margin:3px 0 11px; }.home-sequence span { width:38px; height:38px; display:grid; place-items:center; position:relative; border:2px solid #5cecff; border-radius:8px; color:#eaffff; background:#123968; font:1000 18px Arial; box-shadow:0 0 12px #47e7ff44; }.home-sequence span:nth-child(1),.home-sequence span:nth-child(8){border-color:#ff6f9f}.home-sequence span:nth-child(2),.home-sequence span:nth-child(7){border-color:#b987ff}.home-sequence span:nth-child(3),.home-sequence span:nth-child(6){border-color:#5f9dff}.home-sequence span:nth-child(4),.home-sequence span:nth-child(5){border-color:#47d99b}.home-sequence i { width:32px; }.home-sequence .bump::after { content:""; position:absolute; bottom:4px; width:11px; height:2px; border-radius:2px; background:white; }.prepare-deck { width:min(1080px,97%); padding:13px; border:2px solid #2c5c82; border-radius:18px; background:linear-gradient(#18395e,#07152b); box-shadow:0 18px 50px #0007,inset 0 1px #5f8ca8; }.space-start { margin-top:15px; display:flex; align-items:center; gap:10px; border:0; background:none; color:#c9e9ff; cursor:pointer; font-weight:900; }.space-start kbd { padding:8px 28px; border:1px solid #62e8f7; border-radius:9px; color:#08243e; background:#70edf4; box-shadow:0 4px #228292; }.countdown-number { margin-top:8px; color:#ffe16a; font:1000 54px Arial; text-shadow:0 0 22px #ffc844; }

/* play */
.play-screen { height:calc(100vh - 64px); min-height:680px; display:grid; grid-template-rows:56px 54px minmax(180px,1fr) 294px; position:relative; min-width:900px; }.hud { display:grid; grid-template-columns:repeat(4,1fr); width:min(920px,92%); height:48px; margin:6px auto 0; border:1px solid rgba(87,181,236,.3); border-radius:13px; background:rgba(6,18,50,.84); overflow:hidden; z-index:8; }.hud>div { display:flex; align-items:center; justify-content:center; gap:7px; border-right:1px solid rgba(98,170,222,.15); }.hud>div:last-child{border:0}.hud small{font-size:9px;color:#84a2c8;font-weight:900}.hud b{font-size:21px;color:#eafaff}.hud b.danger{color:#ff7885;animation:pulse .6s infinite alternate}.combo b{color:#ffd95c}.combo span{font-size:10px;color:#ffb547;font-weight:900}.speed span{display:flex;gap:3px}.speed i{width:5px;height:14px;border-radius:2px;background:#172d4e}.speed i.on{background:#46eafa;box-shadow:0 0 6px #46eafa}
.prompt-strip { width:min(1080px,96%); height:48px; margin:2px auto 4px; display:grid; grid-template-columns:1fr 1.7fr 1fr; align-items:center; border:1px solid rgba(69,145,196,.25); border-radius:12px; background:rgba(7,21,52,.88); overflow:hidden; z-index:9; }.prompt-strip>div { height:100%; display:flex; align-items:center; justify-content:center; gap:10px; border-right:1px solid rgba(71,143,190,.16); }.prompt-strip>div:last-child{border:0}.course-mini small,.course-mini b { display:block; }.course-mini small{font-size:7px;color:#6888aa}.course-mini b{font-size:10px;color:#a8c9e7}.letter-mission small{font-size:8px;color:#7895b5}.letter-mission b{font:1000 25px Arial;color:#ffe16a}.word-progress small{font-size:8px;color:#78a3c3}.word-progress>b{font-size:18px}.word-progress>span{display:flex;gap:2px}.word-progress i{font-style:normal;color:#566b87;font:900 14px Arial}.word-progress i.done{color:#4be2ad}.word-progress i.current{color:#ffe16a;text-shadow:0 0 8px #ffcb43}.finger-text>i{width:12px;height:28px;border-radius:9px;background:var(--finger);box-shadow:0 0 10px var(--finger)}.finger-text small,.finger-text b{display:block}.finger-text small{font-size:7px;color:#738faa}.finger-text b{font-size:10px;color:var(--finger)}
.space-field { position:relative; overflow:hidden; border-bottom:1px solid rgba(83,205,255,.22); }.space-field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55px;background:linear-gradient(transparent,rgba(38,113,198,.15));pointer-events:none}.moon{position:absolute;width:150px;height:150px;border-radius:50%;right:-48px;top:18%;background:radial-gradient(circle at 35% 28%,#d2e8ff,#64739b 48%,#20294a 67%);opacity:.25;box-shadow:0 0 70px #668cff55}.guide-beam { position:absolute; bottom:0; width:2px; z-index:2; background:linear-gradient(transparent,var(--finger)); box-shadow:0 0 9px var(--finger); opacity:.55; pointer-events:none; }
.target { position:absolute; width:56px; height:56px; margin-left:-28px; transform:translateY(-50%); display:grid; place-items:center; z-index:4; filter:drop-shadow(0 7px 12px rgba(0,0,0,.5)); }.target b{z-index:2;font:1000 25px Arial;color:white;text-shadow:0 0 8px var(--finger)}.target-ring{position:absolute;inset:4px;border:3px solid var(--finger);border-radius:50%;background:radial-gradient(circle,#17487e,#10264f 65%,#0b1733 66%);box-shadow:0 0 15px color-mix(in srgb,var(--finger) 70%,transparent),inset 0 0 12px #36c7ee44}.target::before,.target::after{content:"";position:absolute;width:16px;height:25px;top:16px;background:#264b79;border:2px solid var(--finger);z-index:-1}.target::before{left:-3px;clip-path:polygon(100% 0,100% 100%,0 78%,0 20%)}.target::after{right:-3px;clip-path:polygon(0 0,0 100%,100% 78%,100% 20%)}.target>i{position:absolute;bottom:-10px;width:9px;height:14px;background:linear-gradient(#ffec62,#ff733e,transparent);clip-path:polygon(20% 0,80% 0,100% 100%,50% 75%,0 100%)}.target.waiting{opacity:.57;filter:saturate(.45)}.target.active .target-ring{animation:targetPulse .65s infinite alternate}@keyframes targetPulse{to{box-shadow:0 0 25px var(--finger),inset 0 0 15px #36c7ee88;transform:scale(1.06)}}
.missile { position:absolute; z-index:6; bottom:2%; width:18px; height:34px; margin-left:-9px; animation:missileFlight var(--shot-duration,.2s) cubic-bezier(.2,.72,.2,1) forwards; }.missile span{display:block;color:var(--finger);font-size:20px;filter:drop-shadow(0 0 7px var(--finger))}.missile i{display:block;width:7px;height:26px;margin:-3px auto 0;background:linear-gradient(#fff,var(--finger) 35%,transparent);filter:blur(1px)}@keyframes missileFlight{to{bottom:calc(100% - var(--target-y));transform:scale(.72)}}

/* keyboard */
.keyboard-deck { z-index:10; padding:5px 2vw 9px; border-top:3px solid #2a5378; background:linear-gradient(#122a4c,#07152e 19%,#050e22); box-shadow:inset 0 2px #5e92b1; }.hands { height:48px; width:min(840px,94%); margin:0 auto 3px; display:grid; grid-template-columns:125px 1fr 125px; align-items:center; }.hands>strong { justify-self:center; padding:5px 16px; border:1px solid color-mix(in srgb,var(--finger) 55%,#24496b); border-radius:999px; color:var(--finger); background:#081c39; font-size:10px; box-shadow:0 0 12px color-mix(in srgb,var(--finger) 25%,transparent); }.hand { height:43px; position:relative; }.hand .palm { position:absolute; bottom:1px; width:64px; height:25px; display:grid; place-items:end center; border:1px solid #31587a; border-radius:16px 16px 10px 10px; color:#6685a2; background:#102b4b; font-size:7px; }.left-hand .palm{right:4px}.right-hand .palm{left:4px}.hand>i:not(.thumb) { position:absolute; top:0; width:12px; height:27px; border:1px solid #31587a; border-radius:9px 9px 5px 5px; background:#102b4b; }.left-hand>i:not(.thumb){right:calc(10px + var(--n) * 15px)}.right-hand>i:not(.thumb){left:calc(10px + var(--n) * 15px)}.hand>i.active{border-color:var(--finger)!important;background:var(--finger)!important;box-shadow:0 0 11px var(--finger)}.hand .thumb{position:absolute;top:21px;width:24px;height:12px;border:1px solid #31587a;border-radius:10px;background:#102b4b}.left-hand .thumb{left:45px;transform:rotate(-28deg)}.right-hand .thumb{right:45px;transform:rotate(28deg)}
.full-keyboard { width:min(1080px,100%); margin:auto; user-select:none; }.physical-row { height:40px; display:flex; gap:4px; margin:3px 0; }.physical-row button { min-width:0; height:40px; position:relative; overflow:hidden; border:1px solid #335879; border-radius:6px; color:#8fa8c1; background:linear-gradient(145deg,#112b49,#07172d); box-shadow:inset 0 1px #3b5e78,inset 0 -3px #040d1e,0 2px 4px #020817; }.physical-row button.targetable { color:#d9f4ff; cursor:pointer; }.physical-row button.targetable::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--finger); opacity:.65; }.physical-row button:disabled { opacity:.46; }.physical-row button b { position:relative; z-index:2; font:800 clamp(7px,1vw,11px) Arial; }.physical-row button.targetable b { position:absolute; right:6px; bottom:6px; font-size:13px; color:#dff8ff; }.launch-port { position:absolute; left:5px; top:4px; width:20px; height:20px; border:1px solid #3d7195; border-radius:50%; background:radial-gradient(circle,#020712 30%,#153e62 32%,#07182b 60%); box-shadow:inset 0 0 5px black; }.launch-port i { position:absolute; inset:4px; border:1px solid #1a526d; border-radius:50%; }.physical-row button.home-key { border-color:color-mix(in srgb,var(--finger) 70%,#335879); background:linear-gradient(145deg,#163858,#0a203a); }.home-dot { position:absolute; right:4px; top:4px; width:5px; height:5px; border-radius:50%; background:var(--finger); box-shadow:0 0 6px var(--finger); }.key-bump { position:absolute; right:6px; bottom:3px; width:11px; height:2px; z-index:3; border-radius:4px; background:white; box-shadow:0 0 4px #fff; }.physical-row button.key-hint { z-index:3; border-color:var(--finger); box-shadow:0 0 16px var(--finger),inset 0 1px #7ad8ee,inset 0 -3px #071323; transform:translateY(-2px); }.physical-row button.key-hint .launch-port { border-color:var(--finger); box-shadow:0 0 9px var(--finger),inset 0 0 4px black; }.physical-row button.key-pressed { transform:translateY(2px); filter:brightness(1.4); }.prepare-keyboard .home-key { border-color:var(--finger); box-shadow:0 0 12px color-mix(in srgb,var(--finger) 70%,transparent); }.prepare-keyboard .home-key .launch-port { border-color:var(--finger); }.prepare-keyboard .physical-row { height:44px; }.prepare-keyboard .physical-row button { height:44px; }

/* modal and results */
.overlay{position:fixed;z-index:50;inset:0;background:rgba(1,5,18,.78);backdrop-filter:blur(8px);display:grid;place-items:center}.modal{width:min(390px,90%);border:1px solid #4c9ec6;border-radius:22px;padding:28px;text-align:center;background:linear-gradient(145deg,#15345f,#081732);box-shadow:0 20px 70px #000}.modal-icon{display:grid;place-items:center;margin:auto;width:58px;height:58px;border-radius:50%;background:#65eaff;color:#082343;font-size:25px;font-weight:1000;box-shadow:0 0 22px #5ce7ff66}.modal h2{font-size:28px;margin:12px 0 4px}.modal p{color:#a9bdd9;font-size:13px}.modal button,.result-actions button{border:0;border-radius:999px;padding:12px 25px;background:#58e8f4;color:#082443;font-weight:1000;cursor:pointer;margin:7px}.modal button.quiet,.result-actions button.quiet{background:#142d50;color:#b9d1ec;border:1px solid #365c83}
.result-panel { justify-content:center; padding-top:18px; }.result-emblem{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(#fff082,#f3ad22);color:#50350c;font-size:29px;box-shadow:0 0 30px #ffcf4666;border:4px solid #fff3a8}.result-panel h1{font-size:30px;margin:5px 0}.earned-stars span{font-size:25px;color:#263f5c}.earned-stars span.on{color:#ffd95c;text-shadow:0 0 10px #ffd95c}.score-card{width:min(420px,92%);text-align:center;border:1px solid #488eb5;border-radius:15px;background:rgba(11,31,69,.8);padding:8px}.score-card small{display:block;color:#86a3c6;font-weight:900;font-size:9px}.score-card b{font:900 37px Arial;color:#ffe16b}.score-card span{color:#ffe16b;font-weight:900}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);width:min(560px,94%);gap:8px;margin:9px 0}.result-grid>div{border:1px solid #294e79;border-radius:12px;background:rgba(10,27,60,.78);padding:8px;text-align:center}.result-grid>div>span{display:block;color:#61ebff}.result-grid small{display:block;color:#849fc1;font-size:8px;font-weight:900}.result-grid b{font:900 22px Arial}.result-grid i{font:800 8px "Yu Gothic";font-style:normal;margin-left:2px}.learning-advice{display:flex;align-items:center;gap:7px;min-height:42px;padding:6px 12px;border:1px solid #2d5279;border-radius:11px;background:#091a36;color:#91aeca}.learning-advice>small{font-size:8px;font-weight:900}.learning-advice kbd{display:inline-grid;place-items:center;width:30px;height:30px;margin:0 2px;border:1px solid #5c779d;border-radius:6px;background:#132441;color:#c8efff;box-shadow:0 2px #061127;font:900 15px Arial}.learning-advice>b{color:var(--finger,#53edbd);font-size:10px}.word-review{width:min(560px,94%);display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.word-review p{margin:0;padding:6px 10px;border-radius:9px;background:#0b2342}.word-review span,.word-review b{display:block}.word-review span{font-size:7px;color:#718eac}.word-review b{font-size:11px;color:#bdefff}.no-star-note{margin:5px 0!important;color:#7c94b1!important;font-size:8px!important}.result-actions{margin-top:5px}
.flash-miss::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;box-shadow:inset 0 0 90px #ff4a5e55}@keyframes pulse{to{opacity:.55}}

@media(max-width:900px){.mode-cards{grid-template-columns:1fr}.course-map{grid-template-columns:1fr 1fr}.course-map::before{display:none}.course-map button{min-height:180px}.play-screen{min-width:900px}.game-shell.screen-playing,.game-shell.screen-paused{overflow-x:auto}.page-panel{overflow:auto}.back-link{position:static;align-self:flex-start}.settings-grid{grid-template-columns:1fr}.guide-setting{grid-column:1}.topbar{padding:0 15px}}
@media(max-height:760px) and (min-width:901px){.play-screen{grid-template-rows:50px 48px minmax(150px,1fr) 262px}.keyboard-deck{padding-top:3px}.hands{height:39px}.hand{transform:scale(.84)}.physical-row{height:35px;margin:2px 0}.physical-row button{height:35px}.prompt-strip{height:43px}.hud{height:43px}.prepare-screen{padding-top:8px}.prepare-copy h1{font-size:27px}.prepare-keyboard .physical-row{height:38px}.prepare-keyboard .physical-row button{height:38px}.home-sequence{margin-bottom:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* learning guide refinements */
.prepare-hands { width:min(560px,88%); margin:0 auto 2px; }
.prepare-hands .hands { width:100%; height:47px; }
.prepare-hands .hand { transform:scale(1.08); }
.left-hand>i:not(.thumb) { right:var(--offset); }
.right-hand>i:not(.thumb) { left:var(--offset); }

/* row / finger course selector */
.course-tabs { display:flex; gap:8px; margin:-10px 0 17px; padding:4px; border:1px solid #284c75; border-radius:999px; background:#071831; }
.course-tabs button { min-width:128px; padding:8px 17px; border:0; border-radius:999px; color:#7896b8; background:transparent; cursor:pointer; font-size:11px; font-weight:900; }
.course-tabs button.selected { color:#08223f; background:#63e8f1; box-shadow:0 0 15px #55ecff44; }
.sequence-course-map { width:min(620px,95%); grid-template-columns:repeat(2,minmax(220px,1fr)); }
.sequence-course-map::before { display:none; }
.sequence-course-map button { min-height:225px; }
.special-course-map { width:min(330px,95%); grid-template-columns:1fr; }
.special-course-map::before { display:none; }
.special-course-map button { min-height:225px; }
.finger-course-map { width:min(900px,96%); display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.finger-select-hand { position:relative; padding-top:10px; }
.finger-select-digits { height:130px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; align-items:end; padding:0 18px; }
.finger-select-digits button { height:var(--digit-height); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px solid color-mix(in srgb,var(--finger) 62%,#284a6d); border-radius:24px 24px 10px 10px; color:#eafaff; background:linear-gradient(180deg,color-mix(in srgb,var(--finger) 32%,#12284a),#0b203d); cursor:pointer; box-shadow:0 0 16px color-mix(in srgb,var(--finger) 18%,transparent),inset 0 1px #ffffff33; transition:.18s; }
.finger-select-digits button:hover { transform:translateY(-5px); box-shadow:0 0 24px color-mix(in srgb,var(--finger) 55%,transparent); }
.finger-select-digits button>b { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#09213e; background:var(--finger); font-size:12px; }.finger-select-digits button>small { margin-top:4px; color:#c5daf0; font-size:8px; white-space:nowrap; }.finger-select-digits button>span i { color:#28435f; font-style:normal; font-size:10px; }.finger-select-digits button>span i.on { color:#ffd85c; }.finger-select-digits button>em { position:absolute; top:-8px; padding:2px 5px; border-radius:99px; color:#342700; background:#ffd85c; font-size:6px; font-style:normal; font-weight:900; }
.finger-select-palm { height:115px; margin:0 6px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px solid #315b7d; border-radius:22px 22px 48px 48px; background:linear-gradient(#133553,#091e3a); box-shadow:inset 0 1px #ffffff26,0 15px 32px #0004; }.finger-select-palm b { color:#b9eaff; font-size:20px; }.finger-select-palm small { color:#6d8eae; font-size:8px; }.finger-select-hand.left { transform:rotate(-2deg); }.finger-select-hand.right { transform:rotate(2deg); }

/* hands laid over the keyboard */
.full-keyboard { position:relative; }
.keyboard-hands-overlay { position:absolute; inset:0; z-index:8; pointer-events:none; overflow:hidden; }
.typing-hand { position:absolute; top:72px; height:160px; opacity:.45; filter:drop-shadow(0 0 10px #68dcff55); }
.typing-hand-left { left:8.5%; width:35%; transform:rotate(-2deg); }.typing-hand-right { left:50%; width:32%; transform:rotate(2deg); }
.typing-palm { position:absolute; left:13%; right:8%; top:68px; height:86px; border:2px solid #87dfffb0; border-radius:38% 38% 25% 25%; background:linear-gradient(#6ad9ff44,#369aca66); backdrop-filter:blur(1px); }
.typing-wrist { position:absolute; left:31%; width:42%; top:135px; height:45px; border:2px solid #87dfff99; border-top:0; border-radius:0 0 17px 17px; background:#369aca55; }
.typing-hand>i:not(.typing-thumb) { position:absolute; top:8px; width:16%; height:78px; border:3px solid var(--finger); border-radius:18px 18px 9px 9px; background:color-mix(in srgb,var(--finger) 28%,#55c9ee44); box-shadow:0 0 8px color-mix(in srgb,var(--finger) 45%,transparent); }
.typing-hand>i:not(.typing-thumb):nth-of-type(1){left:4%;top:28px;height:64px;transform:rotate(-8deg)}
.typing-hand>i:not(.typing-thumb):nth-of-type(2){left:25%;top:12px;height:78px;transform:rotate(-3deg)}
.typing-hand>i:not(.typing-thumb):nth-of-type(3){left:47%;top:5px;height:86px}
.typing-hand>i:not(.typing-thumb):nth-of-type(4){left:69%;top:18px;height:75px;transform:rotate(4deg)}
.typing-hand-right>i:not(.typing-thumb):nth-of-type(1){left:4%;top:18px;height:75px;transform:rotate(-4deg)}
.typing-hand-right>i:not(.typing-thumb):nth-of-type(2){left:26%;top:5px;height:86px}
.typing-hand-right>i:not(.typing-thumb):nth-of-type(3){left:48%;top:12px;height:78px;transform:rotate(3deg)}
.typing-hand-right>i:not(.typing-thumb):nth-of-type(4){left:70%;top:28px;height:64px;transform:rotate(8deg)}
.typing-hand>i.active { opacity:1; background:color-mix(in srgb,var(--finger) 72%,#ffffff33); box-shadow:0 0 20px var(--finger); }
.typing-thumb { position:absolute; top:84px; width:33%; height:26px; border:2px solid #87dfffaa; border-radius:15px; background:#4db7dc66; }.typing-hand-left .typing-thumb{right:-1%;transform:rotate(-24deg)}.typing-hand-right .typing-thumb{left:-3%;transform:rotate(24deg)}

/* high-contrast instruction keyboard */
.instruction-keyboard .physical-row button:not(.focus-key) { opacity:.1; filter:grayscale(1) brightness(.55); }
.instruction-keyboard .physical-row button.focus-key { opacity:1!important; filter:none; z-index:10; border:2px solid #fff; background:linear-gradient(145deg,color-mix(in srgb,var(--finger) 76%,#ffffff),color-mix(in srgb,var(--finger) 52%,#0a1e3d)); box-shadow:0 0 20px var(--finger),inset 0 1px #fff; }
.instruction-keyboard .focus-key b { color:#fff; font-size:15px; text-shadow:0 1px 3px #000; }.instruction-keyboard .focus-key .launch-port { border-color:white; background:radial-gradient(circle,#061121 25%,var(--finger) 30%,#09213b 64%); }.strong-home-guide .instruction-keyboard .focus-key { animation:homeGlow 1s infinite alternate; }
.strong-home-guide .key-bump { width:15px; height:3px; background:#fff; box-shadow:0 0 10px #fff; animation:bumpBlink .65s infinite alternate; }
@keyframes homeGlow { to { box-shadow:0 0 30px var(--finger),inset 0 0 10px #fff8; } } @keyframes bumpBlink { to { opacity:.25; } }

/* lesson and untimed practice */
.lesson-screen,.trial-screen { justify-content:flex-start; padding-top:18px; overflow:auto; }.lesson-screen h1,.trial-screen h1 { font-size:29px; margin:7px 0; }.lesson-card { width:min(720px,94%); display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:8px; align-items:stretch; margin-bottom:8px; }.lesson-key-line { display:grid; place-items:center; grid-row:1/3; padding:10px 15px; border:1px solid #4ccfe8; border-radius:12px; color:#fff07c; background:#0d3159; font:1000 18px Arial; letter-spacing:.08em; }.lesson-card p { margin:0; display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #294f75; border-radius:10px; color:#b9d0e9; background:#091c39; font-size:10px; }.lesson-card p>span { flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:#08233d; background:#5ce8f2; font:900 10px Arial; }.lesson-finger { grid-column:2/4; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--finger); font-size:10px; font-weight:900; }.lesson-finger i { width:11px; height:25px; border-radius:8px; background:var(--finger); box-shadow:0 0 10px var(--finger); }.lesson-deck { width:min(1080px,98%); padding:10px; border:2px solid #2c5c82; border-radius:16px; background:linear-gradient(#173858,#06142a); box-shadow:0 15px 40px #0006,inset 0 1px #5f8ca8; }.lesson-actions { display:flex; gap:8px; align-items:center; margin-top:5px; }.secondary-button { padding:10px 17px; border:1px solid #3f688d; border-radius:999px; color:#a9c5df; background:#0d2746; cursor:pointer; font-size:10px; font-weight:900; }
.trial-screen>p { margin-bottom:9px; }.trial-sequence { max-width:95%; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:3px; }.trial-sequence span { width:33px; height:33px; display:grid; place-items:center; border:1px solid #294a6a; border-radius:7px; color:#4c6580; background:#09192f; font:900 15px Arial; }.trial-sequence span.current { color:#071f3a; border-color:white; background:var(--finger); box-shadow:0 0 15px var(--finger); transform:translateY(-3px); }.trial-sequence span.done { color:#5de9b5; border-color:#35a77d; background:#0b3a35; }.trial-finger { width:min(620px,90%); }.trial-finger .hands { height:42px; }.trial-screen .primary-button { margin-top:7px; }
.countdown-screen { min-height:calc(100vh - 64px); display:flex; flex-direction:column; align-items:center; justify-content:center; }.countdown-screen p { color:#94b0cf; font-weight:900; }.countdown-screen .countdown-number { font-size:92px; }

@media(max-width:900px){.finger-course-map{grid-template-columns:1fr}.lesson-card{grid-template-columns:1fr}.lesson-key-line{grid-row:auto}.lesson-finger{grid-column:auto}.keyboard-hands-overlay{display:none}}

/* keyboard row vocabulary and left/right boundary */
.physical-row { position:relative; isolation:isolate; }
.physical-row.band-top { background:linear-gradient(90deg,#315e9118,#4189c326); border-top:1px dotted #6ea6c866; border-bottom:1px dotted #6ea6c833; }
.physical-row.band-home { background:linear-gradient(90deg,#317aa526,#4fa8c838); border-top:2px solid #73d9ef66; border-bottom:2px solid #73d9ef66; }
.physical-row.band-bottom { background:linear-gradient(90deg,#473a8a18,#5249a72a); border-top:3px double #8d8bea55; border-bottom:3px double #8d8bea44; }
.physical-row.band-top>button,.physical-row.band-home>button,.physical-row.band-bottom>button { z-index:2; }
.hand-divider { position:absolute; z-index:15; top:-4px; bottom:-4px; width:3px; border-radius:4px; background:linear-gradient(#ffffffaa,#5ce8ff,#ffffffaa); box-shadow:0 0 10px #5ce8ff; pointer-events:none; }
.band-home .hand-divider { width:4px; box-shadow:0 0 15px #8ef3ff; }

/* target row shapes */
.target-row-badge { position:absolute; z-index:7; top:-24px; left:50%; transform:translateX(-50%); min-width:25px; height:18px; display:flex; align-items:center; justify-content:center; gap:3px; padding:2px 5px; border:1px solid #dffaffbb; border-radius:999px; color:white; background:#071a37e8; box-shadow:0 0 8px color-mix(in srgb,var(--finger) 60%,transparent); white-space:nowrap; }
.target-row-badge i { color:var(--finger); font:1000 11px Arial; font-style:normal; }.target-row-badge em { color:#e9faff; font-size:7px; font-style:normal; font-weight:1000; }
.target.row-top .target-ring { border-style:dashed; }.target.row-top::before,.target.row-top::after { top:9px; clip-path:polygon(50% 0,100% 100%,0 76%); }
.target.row-home .target-ring { border-width:4px; border-style:solid; }.target.row-home::before,.target.row-home::after { top:16px; clip-path:polygon(100% 5%,100% 95%,0 78%,0 22%); }
.target.row-bottom .target-ring { border-style:double; border-width:6px; }.target.row-bottom::before,.target.row-bottom::after { top:23px; clip-path:polygon(0 0,100% 22%,50% 100%); }
.target.row-symbol .target-ring { border-radius:13px; transform:rotate(45deg); border-style:double; }.target.row-symbol::before,.target.row-symbol::after { top:17px; height:19px; }
.target-thruster { position:absolute; bottom:-10px; width:9px; height:14px; background:linear-gradient(#ffec62,#ff733e,transparent); clip-path:polygon(20% 0,80% 0,100% 100%,50% 75%,0 100%); }

/* impact and shatter */
.target-burst { position:absolute; z-index:14; width:1px; height:1px; pointer-events:none; }
.burst-flash { position:absolute; left:-13px; top:-13px; width:26px; height:26px; border-radius:50%; background:white; box-shadow:0 0 12px #fff,0 0 27px var(--finger),0 0 48px var(--finger); animation:burstFlash .28s ease-out forwards; }
.burst-ring { position:absolute; left:-9px; top:-9px; width:18px; height:18px; border:3px solid var(--finger); border-radius:50%; box-shadow:0 0 12px var(--finger); animation:burstRing .38s ease-out forwards; }
.target-burst.big .burst-flash { width:34px; height:34px; left:-17px; top:-17px; }.target-burst.big .burst-ring { border-width:5px; }
.target-burst>i { position:absolute; left:-4px; top:-5px; width:8px; height:10px; border:1px solid #fff; background:linear-gradient(145deg,#fff,var(--finger) 48%,#15355a 50%); box-shadow:0 0 7px var(--finger); clip-path:polygon(50% 0,100% 30%,72% 100%,0 74%); animation:burstFragment .42s cubic-bezier(.15,.72,.22,1) var(--delay) forwards; }
.target-burst.row-top>i { border-radius:5px 5px 1px 1px; }.target-burst.row-home>i { clip-path:polygon(0 0,100% 8%,86% 100%,12% 84%); }.target-burst.row-bottom>i { clip-path:polygon(50% 0,100% 100%,0 78%); }
@keyframes burstFlash { 0%{transform:scale(.35);opacity:1} 55%{transform:scale(1.2);opacity:.9} 100%{transform:scale(2.1);opacity:0} }
@keyframes burstRing { 0%{transform:scale(.3);opacity:1} 100%{transform:scale(4.3);opacity:0} }
@keyframes burstFragment { 0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1} 70%{opacity:1} 100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rotation)) scale(.55);opacity:0} }
@media(prefers-reduced-motion:reduce){.target-burst>i{display:none}.target-burst .burst-ring{animation-duration:.16s!important}.target-burst .burst-flash{animation-duration:.13s!important}}

/* large pre-stage briefing and unified SPACE navigation */
.space-start.space-advance { margin-top:15px; gap:12px; color:#d9f4ff; font-size:14px; font-weight:1000; }
.space-start.space-advance kbd { min-width:132px; padding:10px 30px; border:2px solid #c9fbff; border-radius:10px; color:#08243e; background:linear-gradient(#a5fbff,#54dce8); box-shadow:0 5px #228292,0 0 22px #55eaff55; font:1000 15px Arial; letter-spacing:.12em; }
.space-start.space-advance:hover kbd { filter:brightness(1.12); transform:translateY(-1px); }
.space-start.space-advance:active kbd { transform:translateY(4px); box-shadow:0 1px #228292; }
.lesson-screen { width:100%; padding:16px clamp(20px,4vw,64px) 28px; }
.lesson-screen h1 { margin:9px 0 15px; font-size:clamp(34px,3.5vw,48px); }
.lesson-screen .lesson-card { width:min(1180px,94vw); min-height:132px; grid-template-columns:1.35fr 1fr 1fr; gap:13px; margin-bottom:14px; padding:12px; border:1px solid #31638d; border-radius:20px; background:linear-gradient(145deg,rgba(18,54,95,.86),rgba(6,22,52,.9)); box-shadow:0 16px 42px #0005,inset 0 1px #ffffff16; }
.lesson-screen .lesson-key-line { padding:16px 22px; border-width:2px; border-radius:15px; box-shadow:inset 0 0 24px #3acde51c; font-size:clamp(22px,2.5vw,32px); text-align:center; }
.lesson-screen .lesson-card p { gap:12px; padding:13px 15px; border-color:#37668e; border-radius:13px; color:#d4e5f5; font-size:clamp(12px,1.25vw,16px); line-height:1.45; }
.lesson-screen .lesson-card p>span { width:32px; height:32px; box-shadow:0 0 12px #5ce8f244; font-size:15px; }
.lesson-screen .lesson-finger { min-height:36px; gap:10px; border-radius:11px; background:color-mix(in srgb,var(--finger) 10%,#081a35); font-size:14px; }
.lesson-screen .lesson-finger i { width:14px; height:32px; box-shadow:0 0 14px var(--finger); }
.lesson-screen .lesson-deck { width:min(1240px,96vw); padding:14px; border-color:#2c698e; border-radius:20px; background:linear-gradient(#173f64,#06142a); box-shadow:0 18px 50px #0007,inset 0 1px #69a4c5; }
.lesson-screen .prepare-keyboard .physical-row { height:48px; margin:4px 0; }
.lesson-screen .prepare-keyboard .physical-row button { height:48px; }
.lesson-screen .lesson-actions { gap:12px; margin-top:9px; }
.lesson-screen .lesson-actions .space-start { margin-top:0; }

/* move game records into the existing top edge so the target field grows */
.screen-playing .topbar,.screen-paused .topbar { padding-inline:1.5vw; gap:12px; }
.screen-playing .brand,.screen-paused .brand,.screen-playing .top-actions,.screen-paused .top-actions { flex:none; }
.play-top-hud { flex:1; max-width:820px; height:50px; display:grid; grid-template-columns:1.2fr 1fr 1fr 1.35fr; gap:6px; margin-inline:auto; }
.play-top-hud>div { min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; padding:4px 10px; border:1px solid rgba(87,181,236,.25); border-radius:10px; background:rgba(10,31,66,.72); }
.play-top-hud small { color:#84a2c8; font-size:8px; font-weight:900; white-space:nowrap; }
.play-top-hud b { color:#eafaff; font-size:18px; }
.play-top-hud b.danger { color:#ff7885; animation:pulse .6s infinite alternate; }
.play-top-hud .time>span { color:#9bb5d0; font-size:8px; font-weight:900; }
.play-screen { grid-template-rows:54px minmax(236px,1fr) 294px; }

@media(max-width:900px){
  .lesson-screen .lesson-card { grid-template-columns:1fr; }
  .lesson-screen .lesson-key-line { grid-row:auto; }
  .lesson-screen .lesson-finger { grid-column:auto; }
  .play-top-hud { min-width:560px; }
  .screen-playing .topbar,.screen-paused .topbar { min-width:900px; }
}
@media(max-height:760px) and (min-width:901px){
  .play-screen { grid-template-rows:48px minmax(198px,1fr) 262px; }
  .lesson-screen { padding-top:8px; }
  .lesson-screen h1 { margin:4px 0 8px; font-size:30px; }
  .lesson-screen .lesson-card { min-height:105px; margin-bottom:8px; padding:8px; }
  .lesson-screen .lesson-card p { padding-block:8px; font-size:12px; }
  .lesson-screen .prepare-keyboard .physical-row,.lesson-screen .prepare-keyboard .physical-row button { height:39px; }
  .lesson-screen .lesson-deck { padding:9px; }
  .lesson-screen .space-start.space-advance { margin-top:5px; }
}

/* unmistakable current-key guidance */
.full-keyboard.has-key-hint:not(.instruction-keyboard) .physical-row button.targetable:not(.key-hint) { filter:brightness(.62) saturate(.72); opacity:.76; }
.physical-row button.key-hint { z-index:20; border:3px solid #fff; color:#06172b; background:linear-gradient(145deg,color-mix(in srgb,var(--finger) 88%,#fff),color-mix(in srgb,var(--finger) 72%,#061a37)); box-shadow:inset 0 0 0 3px var(--finger),inset 0 2px #ffffffcc,inset 0 -4px #06142a99; transform:translateY(-2px) scale(1.055); }
.physical-row button.key-hint b { color:#06152a!important; font-size:17px!important; text-shadow:0 1px 1px #ffffffbb; }
.physical-row button.key-hint .launch-port { border:3px solid #fff; background:radial-gradient(circle,#fff 0 16%,var(--finger) 19% 40%,#07152b 44%); box-shadow:inset 0 0 0 2px var(--finger),inset 0 0 5px #fff; }
.physical-row button.key-hint .launch-port i { border-color:#fff; box-shadow:inset 0 0 4px #fff; }
.physical-row button.key-pressed { filter:none; }
.physical-row button.key-hint.key-pressed { transform:translateY(2px) scale(1.035); }
.physical-row button.key-hint.key-correction { border-color:#fff7a3; background:linear-gradient(145deg,#fff5a1,#ffc928 58%,#b26b08); box-shadow:inset 0 0 0 4px #ffbf29,inset 0 2px #fff; }
.physical-row button.key-hint.key-correction .launch-port { --finger:#ffd84e; border-color:#fff; background:radial-gradient(circle,#fff 0 18%,#ffd84e 22% 43%,#503400 47%); box-shadow:inset 0 0 0 3px #ffb91f,inset 0 0 5px #fff; }
.physical-row button.utility,.physical-row button.utility:focus,.physical-row button.utility:active { outline:none; color:#8fa8c1; border-color:#335879; background:linear-gradient(145deg,#112b49,#07172d); box-shadow:inset 0 1px #3b5e78,inset 0 -3px #040d1e,0 2px 4px #020817; filter:none; }

/* the falling-target field now uses the former prompt-strip space */
.play-screen { grid-template-rows:minmax(290px,1fr) 294px; }
.play-top-hud.has-word { max-width:980px; grid-template-columns:1fr .85fr 1.7fr .85fr 1.2fr; }
.top-word-progress { gap:7px!important; padding-inline:10px!important; white-space:nowrap; }
.top-word-progress>small { color:#73a7c8; font-size:7px; }
.top-word-progress>b { color:#fff; font-size:16px; }
.top-word-progress>span { gap:1px; }
.top-word-progress i { font-size:12px; }
@media(max-width:1100px){
  .play-top-hud.has-word { min-width:650px; }
  .top-word-progress>small { display:none; }
}
@media(max-height:760px) and (min-width:901px){
  .play-screen { grid-template-rows:minmax(246px,1fr) 262px; }
}

/* word-course map and detailed romanization choices */
.word-course-map { width:min(900px,95%); grid-template-columns:repeat(3,1fr); }
.word-course-map::before { display:none; }
.word-course-map button { min-height:205px; }
.settings-screen { height:calc(100vh - 64px); overflow:auto; padding-bottom:42px; }
.shot-speed-setting { grid-column:1/3; }
.shot-speed-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.shot-speed-choices button { min-height:54px; border:1px solid #315477; border-radius:10px; color:#9db7d5; background:#08182f; cursor:pointer; }
.shot-speed-choices button.selected { color:white; border-color:#5deeff; background:#13396b; box-shadow:0 0 12px #4cecff33; }
.shot-speed-choices b,.shot-speed-choices small { display:block; }
.shot-speed-choices b { font:1000 20px Arial; }.shot-speed-choices small { font-size:8px; }
.shot-speed-setting>small { display:block; margin-top:7px; color:#728cac; font-size:9px; }
.romanization-setting { grid-column:1/3; }
.romanization-setting>p { margin:0 0 10px; color:#89a7c6; font-size:10px; font-weight:900; }
.roman-presets { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:11px; }
.roman-presets button { min-height:42px; border:1px solid #3f7198; border-radius:10px; color:#d5f5ff; background:#102c50; cursor:pointer; font-size:11px; font-weight:1000; }
.roman-presets button:hover { border-color:#5ceeff; background:#17406c; }
.roman-choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.roman-choice-row { min-width:0; display:grid; grid-template-columns:110px 1fr; align-items:center; gap:7px; padding:7px 9px; border:1px solid #274c70; border-radius:10px; background:#081a34; }
.roman-choice-row>b { color:#a9cce6; font-size:10px; }
.roman-choice-row>div { min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.roman-choice-row button { min-width:0; min-height:33px; padding:4px 6px; border:1px solid #294866; border-radius:8px; color:#708ba6; background:#07142a; cursor:pointer; font:900 9px Arial; overflow:hidden; text-overflow:ellipsis; }
.roman-choice-row button i { margin-right:4px; color:#45627e; font-style:normal; }
.roman-choice-row button.selected { color:#fff; border-color:#72eff7; background:#16446c; box-shadow:0 0 11px #58e9ff33; }
.roman-choice-row button.selected i { color:#64f1f7; }

/* clearer, concise pre-stage teaching */
.lesson-key-line { gap:7px; }
.lesson-key-line small,.lesson-key-line b { display:block; }
.lesson-key-line small { color:#74b8d1; font:1000 9px "Yu Gothic"; letter-spacing:.08em; }
.lesson-key-line b { color:#fff07c; font:inherit; }
.lesson-card p>i { min-width:0; font-style:normal; }
.lesson-card p>i small,.lesson-card p>i b { display:block; }
.lesson-card p>i small { margin-bottom:3px; color:#6f9cbb; font-size:8px; }
.lesson-card p>i b { color:#e4f2ff; }
.special-rule-cards { width:min(1180px,94vw); display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:-5px 0 12px; }
.special-rule-cards>div { display:flex; align-items:center; gap:12px; min-height:70px; padding:10px 14px; border:1px solid #34739a; border-radius:14px; background:linear-gradient(145deg,#10355b,#081b37); box-shadow:inset 0 1px #ffffff1f; }
.special-rule-cards>div>span { flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:11px; color:#092140; background:#72eef5; box-shadow:0 0 14px #5deaff55; font-size:21px; font-weight:1000; }
.special-rule-cards i { min-width:0; font-style:normal; }.special-rule-cards small,.special-rule-cards b { display:block; }
.special-rule-cards small { color:#8ba8c4; font-size:8px; }.special-rule-cards b { margin-top:3px; color:#fff07c; font:1000 15px Arial; }

/* prominent word panel, quieter play field */
.play-top-hud.has-word { max-width:1080px; height:56px; grid-template-columns:.75fr .65fr 2.4fr .7fr 1fr; }
.play-top-hud.has-word>div:not(.top-word-progress) { padding-inline:6px; }
.top-word-progress { min-width:300px; min-height:54px; position:relative; display:grid!important; grid-template-rows:27px 23px; place-items:center; gap:0!important; padding:2px 16px!important; border:2px solid #77f3ff!important; background:linear-gradient(145deg,#164c78,#10244c)!important; box-shadow:0 0 20px #55eaff55,inset 0 1px #ffffff44; }
.top-word-progress>small { position:absolute; left:7px; top:5px; color:#8dd8ec; font-size:7px; }
.top-word-progress>b { color:#fff; font-size:clamp(21px,2vw,27px); line-height:1; text-shadow:0 0 10px #6eeaff66; }
.top-word-progress>span { display:flex; align-items:center; gap:3px; }
.top-word-progress i { min-width:18px; height:24px; display:grid; place-items:center; border-radius:5px; color:#7288a3; font-size:16px; }
.top-word-progress i.done { color:#51e9b1; }
.top-word-progress i.current { min-width:24px; height:25px; color:#182000; border:2px solid #fff6a0; background:#ffe15b; box-shadow:0 0 15px #ffd94f; font-size:19px; transform:translateY(-1px); }
.play-screen { grid-template-rows:minmax(336px,1fr) 248px; }
.keyboard-deck { padding-top:7px; }

@media(max-width:1100px){
  .play-top-hud.has-word { min-width:720px; }
  .play-top-hud.has-word .speed small { display:none; }
  .top-word-progress { min-width:280px; }
}
@media(max-width:900px){
  .word-course-map { grid-template-columns:1fr 1fr; }
  .sequence-course-map { grid-template-columns:1fr; }
  .shot-speed-setting { grid-column:1; }
  .roman-choice-grid { grid-template-columns:1fr; }
  .special-rule-cards { grid-template-columns:1fr; }
}
@media(max-width:620px){
  .course-tabs { max-width:94%; flex-wrap:wrap; justify-content:center; border-radius:20px; }
  .course-tabs button { min-width:132px; }
}
@media(max-height:760px) and (min-width:901px){
  .play-screen { grid-template-rows:minmax(290px,1fr) 215px; }
  .keyboard-deck { padding-block:3px; }
  .special-rule-cards>div { min-height:55px; padding-block:6px; }
}
@media(prefers-reduced-motion:reduce){.missile{animation-duration:var(--shot-duration,.2s)!important}}
/* Small screens: touch keyboard fits the available width. */
@media(max-width:620px){
 .play-screen{min-width:0;width:100%;height:calc(100svh - 64px);min-height:530px;grid-template-rows:minmax(260px,1fr) 204px}
 .game-shell.screen-playing,.game-shell.screen-paused{overflow-x:hidden}
 .keyboard-deck{padding:6px 5px 10px}
 .full-keyboard{width:100%;min-width:0}
 .physical-row{height:46px;gap:3px;margin:4px 0}
 .physical-row button,.prepare-keyboard .physical-row button,.lesson-screen .prepare-keyboard .physical-row button{height:46px;touch-action:manipulation;padding:0}
 .physical-row button:disabled{display:none}
 .physical-row:not(:has(button:not(:disabled))){display:none}
 .physical-row button.targetable{flex:1!important;min-width:0}
 .physical-row button.targetable b{font-size:15px;right:auto;left:50%;bottom:12px;transform:translateX(-50%)}
 .physical-row button .launch-port{display:none}
 .physical-row button.key-hint b{font-size:17px!important}
 .physical-row button.key-hint{transform:none}
 .keyboard-hands-overlay,.hands{display:none}
 .prepare-keyboard .physical-row,.lesson-screen .prepare-keyboard .physical-row{height:46px}
 .page-panel{padding:22px 12px}
 .page-panel>p{font-size:13px;text-align:center;line-height:1.7}
 .topbar{padding:0 8px}.top-actions{gap:4px}.round-action{padding:9px 10px;min-height:40px}
 button{touch-action:manipulation}
 .course-map{grid-template-columns:1fr}.course-map button{min-height:130px}
 .lesson-deck,.prepare-copy,.lesson-card{width:100%;min-width:0}
}
@media(max-width:380px){.physical-row{gap:2px}.physical-row button.targetable b{font-size:13px}.round-action{font-size:10px;padding:8px}}
@media(max-width:620px){
 .screen-playing .topbar,.screen-paused .topbar{min-width:0;width:100%;height:auto;min-height:112px;flex-wrap:wrap;gap:4px;padding:6px 8px}
 .screen-playing .brand,.screen-paused .brand{height:38px}.screen-playing .brand-mark,.screen-paused .brand-mark{height:30px;width:30px}
 .screen-playing .top-actions,.screen-paused .top-actions{margin-left:auto}
 .play-top-hud,.play-top-hud.has-word{order:3;flex-basis:100%;min-width:0;max-width:100%;height:48px;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 .play-top-hud .speed{display:none}.play-top-hud>div{padding:4px;gap:4px}.play-top-hud b{font-size:18px}
 .play-top-hud.has-word{height:94px;grid-template-rows:44px 46px}.play-top-hud .top-word-progress{grid-column:1/-1;grid-row:2}
 .play-screen{height:calc(100svh - 112px);min-height:510px;grid-template-rows:minmax(230px,1fr) 220px}
 .game-shell:has(.play-top-hud.has-word) .play-screen{height:calc(100svh - 158px)}
}