/* Night Shift — shares the site's Manrope faces and logo from ../assets. */
@font-face{font-family:Manrope;src:url('../assets/fonts/manrope-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Manrope;src:url('../assets/fonts/manrope-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}@font-face{font-family:Manrope;src:url('../assets/fonts/manrope-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}@font-face{font-family:Manrope;src:url('../assets/fonts/manrope-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{color-scheme:dark;--bg:#0a161c;--panel:#11232c;--ink:#f1f1e9;--muted:#9aacb2;--gold:#d7b477;--line:rgba(182,206,211,.17);--green:#9bdfc0;font-family:Manrope,Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;background:var(--bg);color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{border:0}button:disabled:hover{background:transparent}button[hidden],[hidden]{display:none!important}a{color:inherit;text-decoration:none}.app{max-width:1512px;margin:auto;padding:0 44px}.masthead{height:94px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:15px}.brand-mark{display:flex;align-items:center;justify-content:center;border:1px solid #819b9d;border-radius:50%;width:46px;height:46px;color:var(--gold);font-family:Georgia,serif;font-size:16px;letter-spacing:-1px}.brand-mark span{font-size:11px;margin:0 1px}.brand-name{font-size:14px;letter-spacing:1.5px;font-weight:600}.brand-name>span{display:block;color:var(--muted);font-size:10px;letter-spacing:2.3px;margin-top:7px;font-weight:400}.header-actions{display:flex;align-items:center;gap:9px}.icon-button{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);background:transparent;border-radius:50%;font-size:21px;color:#d9e2e2;transition:background .2s,border-color .2s}.icon-button:hover{border-color:#8d9c9f;background:#21333b}.text-button{background:none;font-size:12px;letter-spacing:1px;min-width:40px;min-height:40px}.mute-line{position:absolute;top:18px;width:20px;height:1px;background:#d9e2e2;transform:rotate(-48deg);box-shadow:0 0 0 2px var(--bg)}.game-shell{border:1px solid var(--line);background:#0b1c27;overflow:hidden}.hud{height:78px;border-bottom:1px solid var(--line);padding:0 30px;display:flex;align-items:center;justify-content:space-between;background:#10212a}.hud-title{display:flex;flex-direction:column;gap:8px;min-width:170px}.tiny-label{font-family:Manrope,Arial,Helvetica,sans-serif;font-size:10px;letter-spacing:1.6px;font-weight:500;color:#afc0c5}.hud-title>.tiny-label{color:var(--gold);font-size:12px;letter-spacing:2px}.shift-label{font-size:10px;letter-spacing:1.6px;color:#879ba5}.metrics{display:flex;gap:65px;align-items:center}.metric{display:flex;flex-direction:column;gap:6px;min-width:88px}.metric strong{font-family:'Courier New',monospace;font-size:25px;line-height:1;font-weight:400;letter-spacing:1px;font-variant-numeric:tabular-nums}.muted{color:#70838d}.pause-button{margin-left:50px}.stage{position:relative;width:100%;aspect-ratio:16/9;isolation:isolate;overflow:hidden;background:#0c2036}.stage canvas{width:100%;height:100%;display:block;outline:none;touch-action:none}.start-panel{position:absolute;left:6%;top:10%;width:43%;z-index:2}.eyebrow{font-size:11px;letter-spacing:2px;line-height:1.6;color:var(--gold);margin:0 0 23px}.eyebrow>span{display:inline-block;width:19px;height:1px;background:var(--gold);vertical-align:middle;margin-right:9px}h1{font-weight:400;font-size:clamp(48px,7.2vw,104px);line-height:.88;letter-spacing:-4px;margin:0 0 25px}h1 em{font-style:normal;color:var(--gold)}.intro{font-size:16px;line-height:1.7;color:#c2cdd2;margin:0 0 26px}.start-actions{display:flex;align-items:flex-start;flex-direction:column;gap:14px}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:40px;background:var(--gold);color:#152831;font-size:15px;padding:17px 22px;min-height:52px;min-width:236px;transition:background .2s,transform .2s}.primary-button:hover{background:#eccb91;transform:translateY(-1px)}.primary-button>span:last-child:not(:first-child){font-size:23px;line-height:1}.practice-button{display:block;padding:4px 0;font-size:13px;color:#d3dde0;background:none;border-bottom:1px solid #70838c}.practice-button:hover{color:var(--gold);border-color:var(--gold)}.start-note{font-size:11px;color:#849ba7;margin:20px 0 0}.scene-caption{position:absolute;bottom:29px;left:6%;right:4%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.8px;color:#a9bec7;pointer-events:none}.scene-caption>span:last-child{color:var(--gold)}.control-desk{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:82px;background:#10212a;padding:16px 30px;border-top:1px solid var(--line)}.keyboard-guide{display:flex;gap:27px;align-items:center;color:#b0c0c6;font-size:12px}.keyboard-guide>span{display:flex;align-items:center;gap:4px}.keyboard-guide>span>span{margin-left:7px}kbd{font-family:inherit;font-size:14px;display:inline-grid;place-items:center;min-width:26px;height:27px;border:1px solid #3d515c;border-bottom-width:2px;border-radius:3px;color:#dce4e5}kbd.space-key{font-size:10px;letter-spacing:1px;width:61px}.desk-note{display:flex;align-items:center;gap:17px}.desk-note strong{font:17px 'Courier New',monospace;color:var(--gold)}.touch-controls{display:none;gap:7px;align-items:center}.control-key{width:48px;height:46px;border:1px solid #45606d;background:#1c3543;border-radius:4px;font-size:24px;touch-action:none;user-select:none;-webkit-user-select:none}.control-key.active,.control-key:active{background:#d7b477;color:#11232c;border-color:#d7b477}.control-divider{width:4px}.drop-key{font-size:11px;letter-spacing:.5px;width:auto;min-width:112px;padding:0 12px;margin-left:5px;color:#122632;background:var(--gold);border-color:var(--gold)}footer{display:flex;justify-content:space-between;gap:20px;padding:21px 0 28px;color:#859ba5;font-size:11px;line-height:1.6}footer>span:last-child{font-size:9px;letter-spacing:1.5px}.footer-separator{padding:0 12px;color:#54707e}.play-hint{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 20px;border:1px solid rgba(170,196,206,.2);background:rgba(9,28,39,.9);color:#d9e6e8;font-size:13px;line-height:1.4;max-width:94%;width:max-content;text-align:center;pointer-events:none;border-radius:3px}.hint-dot{width:5px;height:5px;background:var(--gold);border-radius:50%;flex-shrink:0}.play-hint.ready{border-color:rgba(155,223,192,.5);color:var(--green)}.play-hint.ready .hint-dot{background:var(--green)}.toast{position:absolute;left:50%;top:25px;transform:translate(-50%,-10px);color:var(--ink);background:rgba(8,26,36,.94);border:1px solid var(--line);padding:12px 23px;opacity:0;transition:opacity .2s,transform .2s;font-size:14px;letter-spacing:.2px;pointer-events:none;width:max-content;max-width:90%;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.toast.good{color:var(--green);border-color:#5f9580}.toast.bad{color:#efb4a2;border-color:#aa7060}.overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(4,15,23,.73);backdrop-filter:blur(7px);padding:24px;overflow:auto}.dialog{width:440px;max-width:100%;padding:30px;background:#112730;border:1px solid #4b5c5e;box-shadow:0 20px 90px #0008}.dialog .eyebrow{margin-bottom:14px}.dialog h2{font-weight:400;letter-spacing:-1px;font-size:36px;line-height:1.1;margin:0 0 17px}.dialog>p:not(.eyebrow){font-size:15px;color:#b7c8cf;line-height:1.65;margin:0 0 23px}.dialog .primary-button{width:100%;margin-top:20px}.dialog>.practice-button{margin:16px auto 0}.help-dialog{width:580px}.help-dialog h2{font-size:32px}.help-steps{list-style:none;padding:0;margin:0}.help-steps li{display:flex;align-items:flex-start;gap:16px;margin:0 0 14px}.step-number{color:var(--gold);font:13px 'Courier New',monospace;margin-top:3px}.help-steps p{font-size:14px;line-height:1.5;color:#c7d3d8;margin:0}.help-tip{border-left:2px solid var(--gold);padding:9px 14px;font-size:12px;line-height:1.6;color:#9fb9c4;background:#18303a}.result-dialog{width:490px}.result-score{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px}.result-score strong{font:54px 'Courier New',monospace;letter-spacing:-3px;color:var(--gold)}.result-score>span{font-size:10px;letter-spacing:1px;color:#9fb5bf}.result-details{display:flex;justify-content:space-between;font-size:12px;color:#b7c8cf;padding:14px 0}.lesson{background:#18303a;padding:14px 16px;margin-top:2px}.lesson .tiny-label{color:var(--gold);font-size:9px}.lesson p{font-size:13px;line-height:1.5;color:#b6cbd3;margin:8px 0 0}.game-shell.playing .hud-title>.tiny-label{color:#d8e6e9}.urgent{color:#efa58c!important}.noscript{padding:20px;background:#402522}.app:fullscreen{overflow:auto;background:var(--bg);max-width:none;display:flex;flex-direction:column;align-items:center;padding:0 20px}.app:fullscreen>.masthead,.app:fullscreen>footer{width:min(100%,1500px)}.app:fullscreen .game-shell{width:min(100%,calc((100vh - 190px) * 1.777));margin:auto}.app:fullscreen .masthead{height:65px;flex-shrink:0}.app:fullscreen footer{padding:10px 0}.app:fullscreen .hud{height:64px}.app:fullscreen .control-desk{min-height:60px;padding:10px 25px}
@media(min-width:1600px){.app{padding:0 30px}.masthead{height:104px}}
@media(max-width:1100px){.app{padding:0 24px}.metrics{gap:35px}.hud{padding:0 22px}.pause-button{margin-left:15px}.desk-note .tiny-label{display:none}.keyboard-guide{gap:18px}.start-panel{top:8%}h1{margin-bottom:18px}.eyebrow{margin-bottom:18px}.intro{margin-bottom:18px;font-size:14px}.start-actions{gap:10px}.start-note{margin-top:13px}.primary-button{min-height:46px;padding:13px 18px}.scene-caption{bottom:20px}.dialog{padding:24px}.dialog .eyebrow{font-size:10px}.dialog h2{font-size:30px}.dialog>p:not(.eyebrow){font-size:14px;margin-bottom:13px}.result-score strong{font-size:42px}.help-steps li{margin-bottom:10px}.help-steps p{font-size:13px}.help-tip{font-size:11px}.dialog .primary-button{margin-top:13px}.result-details{padding:10px 0}.lesson{padding:10px 13px}}
@media(pointer:coarse){.touch-controls{display:flex}.keyboard-guide{display:none}.desk-note .tiny-label{display:none}.control-desk{justify-content:center}.desk-note{margin-left:auto}.start-note{font-size:10px}}
@media(max-width:760px){.app{padding:0 12px}.masthead{height:72px}.brand{gap:10px}.brand-mark{width:37px;height:37px;font-size:13px}.brand-name{font-size:11px;letter-spacing:1px}.brand-name>span{font-size:9px;letter-spacing:1.5px;margin-top:5px}.header-actions{gap:5px}.icon-button{width:34px;height:34px;font-size:18px}.mute-line{top:16px}.fullscreen{display:none}.hud{height:62px;padding:0 13px}.hud-title{min-width:105px;gap:6px}.hud-title>.tiny-label{font-size:10px}.shift-label{font-size:8px}.metrics{gap:18px}.metric{min-width:54px}.metric .tiny-label{font-size:8px;letter-spacing:.7px}.metric strong{font-size:20px}.pause-button{margin-left:8px}.stage{aspect-ratio:16/10}.start-panel{top:8%;left:5%;width:57%}.eyebrow{font-size:9px;margin-bottom:12px}h1{font-size:clamp(38px,8vw,65px);letter-spacing:-2px;margin-bottom:14px}.intro{font-size:12px;line-height:1.5;margin-bottom:15px}.primary-button{font-size:13px;min-width:190px;padding:11px 15px;min-height:43px}.start-note{display:none}.practice-button{font-size:11px}.scene-caption{font-size:8px;bottom:13px}.scene-caption>span:first-child{display:none}.scene-caption{justify-content:flex-end}.control-desk{min-height:70px;padding:12px 13px}.keyboard-guide{font-size:10px;gap:13px}.keyboard-guide>span{gap:3px}.keyboard-guide>span>span{margin-left:3px}.desk-note{display:none}kbd{min-width:23px;height:24px}kbd.space-key{width:48px;font-size:8px}footer{font-size:10px;padding-top:15px;gap:12px}footer>span:last-child{font-size:8px;letter-spacing:.5px}.footer-separator{padding:0 5px}.play-hint{font-size:11px;bottom:14px;padding:8px 11px}.toast{font-size:12px;top:12px;padding:9px 14px}.overlay{padding:15px;align-items:flex-start}.dialog{margin:auto;padding:21px;width:440px}.dialog h2{font-size:27px}.dialog .eyebrow{font-size:9px;margin-bottom:10px}.help-steps p{font-size:12px}.dialog>p:not(.eyebrow){font-size:13px}.result-score strong{font-size:35px}.lesson p{font-size:12px}.result-details{font-size:11px}.game-shell:has(.overlay:not([hidden])) .stage{min-height:475px;aspect-ratio:auto}}
@media(max-width:480px){.app{padding:0 8px}.header-actions{gap:2px}.brand-name{font-size:10px}.brand-mark{width:32px;height:32px}.icon-button{width:32px;height:32px}.hud-title{min-width:83px}.hud-title>.tiny-label{font-size:9px;letter-spacing:1px}.shift-label{font-size:8px;letter-spacing:1px}.metrics{gap:12px}.metric{min-width:48px}.metric strong{font-size:18px}.metric .tiny-label{font-size:7px}.pause-button{width:28px;height:28px;margin-left:4px}.score-metric{min-width:43px}.stage{aspect-ratio:1.24}.start-panel{top:7%;width:72%}h1{font-size:48px;margin-bottom:13px}.eyebrow{margin-bottom:13px}.intro{font-size:12px;margin-bottom:16px}.start-actions{gap:11px}.primary-button{min-height:45px}.scene-caption{display:none}.touch-controls{display:flex;gap:5px;width:100%;justify-content:center}.keyboard-guide{display:none}.control-key{width:42px;height:45px}.drop-key{width:105px;min-width:105px;font-size:10px;margin-left:3px}.control-divider{width:3px}.control-desk{padding:12px 7px}.play-hint{bottom:14px;font-size:10px;width:92%;max-width:92%}footer>span:first-child{max-width:160px}footer>span:last-child{max-width:140px;text-align:right}.footer-separator{padding:0 2px}}
@media(max-height:560px) and (orientation:landscape){.app{padding:0 14px;max-width:1000px}.masthead{height:48px}.brand-mark{height:30px;width:30px}.brand-name>span{display:none}.hud{height:51px}.stage{aspect-ratio:2.5}.start-panel{top:8%;width:56%}h1{font-size:43px;display:inline-block;margin:0 20px 12px 0;vertical-align:top}.start-panel>.eyebrow{font-size:9px;margin-bottom:12px}.intro{display:inline-block;font-size:12px;width:190px;vertical-align:top;padding-top:5px}.start-actions{flex-direction:row;align-items:center;gap:20px}.primary-button{min-width:180px;font-size:12px;padding:10px 14px}.start-note,.scene-caption{display:none}.control-desk{padding:8px 15px;min-height:59px}.control-key{height:40px}.touch-controls{display:flex}.keyboard-guide{display:none}footer{padding:9px 0;font-size:9px}.overlay{align-items:flex-start}.dialog{margin:0 auto}.game-shell:has(.overlay:not([hidden])) .stage{min-height:310px}.help-dialog{width:650px}.help-dialog h2{font-size:24px}.help-steps li{margin-bottom:7px}.help-tip{padding:6px 12px}.dialog .primary-button{margin-top:10px}.result-dialog{width:600px}.result-score{float:left;width:45%;margin-right:5%;border:0}.result-details{display:flex;flex-direction:column;gap:7px;min-height:57px}.lesson{clear:both}.lesson p{margin:5px 0 0}.dialog h2{font-size:26px;margin-bottom:10px}.dialog .eyebrow{margin-bottom:8px}.dialog>p:not(.eyebrow){margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
/* Instrument labels remain legible on narrow screens. */
.tiny-label,.shift-label,.start-note,.scene-caption,.brand-name>span{font-size:12px}
.metric .tiny-label{font-size:12px;letter-spacing:1px}
.practice-button,.keyboard-guide,.help-tip,.result-details,.lesson p{font-size:14px}
.help-steps p{font-size:14px}.result-score>span,.lesson .tiny-label{font-size:12px}
@media(max-width:760px){.hud-title{min-width:90px}.hud-title>.tiny-label{font-size:11px;letter-spacing:1px}.shift-label{font-size:10px}.metric .tiny-label{font-size:10px;letter-spacing:.5px}.start-panel>.eyebrow{font-size:10px}.practice-button{font-size:12px}.brand-name>span{font-size:10px}.scene-caption{font-size:10px}.keyboard-guide{font-size:12px}.result-details,.lesson p,.help-steps p{font-size:13px}}
@media(max-width:480px){.hud-title{display:none}.metrics{flex:1;justify-content:space-around;gap:8px}.metric .tiny-label{font-size:11px;letter-spacing:.5px}.metric strong{font-size:22px}.pause-button{margin-left:12px}.stage{min-height:305px}.brand-name>span{font-size:9px}.intro{font-size:13px}.practice-button{font-size:12px}.help-steps p{font-size:14px}.help-tip{font-size:13px}.overlay{padding:12px}.dialog{padding:18px}.game-shell:has(.overlay:not([hidden])) .stage{min-height:525px}}

/* Shanghai O&M identity — matched to the supplied website.
   Original logo, white masthead, Arial typography and site color tokens. */
:root{--bg:#fff;--panel:#11282f;--ink:#fff;--muted:#9cafb4;--gold:#d9ac69;--line:rgba(195,209,212,.2);--brand-ink:#142d34;--brand-muted:#5e7177;--brand-line:#dce4e5;color-scheme:light;font-family:Manrope,Arial,Helvetica,sans-serif}
body{background:#fff;-webkit-font-smoothing:antialiased}
.app{max-width:none;padding:0}
.masthead{height:100px;padding:0 clamp(24px,4.2vw,80px);background:#fff;border-bottom:1px solid var(--brand-line);gap:24px;color:var(--brand-ink)}
.brand{gap:13px;min-width:0}
.brand-logo{display:block;width:48px;height:48px;object-fit:contain;flex-shrink:0}
.brand-name{font-size:18px;line-height:1.3;letter-spacing:-.015em;text-transform:none;font-weight:700;white-space:nowrap}
.header-actions{flex-shrink:0;gap:12px}
.header-actions .icon-button{color:var(--brand-ink);border:1px solid var(--brand-line);border-radius:0;background:#fff;font-size:20px}
.header-actions .icon-button:hover{background:#f2f5f5;border-color:#a8b8bc}
.header-actions .text-button{color:var(--brand-ink);font-size:12px;font-weight:500;border-bottom:1px solid var(--brand-ink);min-width:34px;min-height:34px;padding:5px}
.header-actions .mute-line{background:var(--brand-ink);box-shadow:0 0 0 2px #fff}
.game-shell{width:calc(100% - 8.4vw);max-width:1440px;margin:32px auto 0;border:0;background:#11282f;color:#fff}
.hud{background:#11282f;border-color:#375059}
.hud-title>.tiny-label{color:#d9ac69}
.stage{background:#11282f}
.start-panel{top:10%}
h1{font-size:clamp(48px,6.3vw,88px);font-weight:500;line-height:1.02;letter-spacing:-.055em;margin-bottom:22px}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.1em;color:#d2dedf}
.eyebrow>span{width:26px}
.intro{font-size:16px;line-height:1.7;color:#c3d1d4}
.primary-button{min-height:54px;padding:13px 23px;background:#d9ac69;color:#0b2027;font-size:14px;font-weight:600;border-radius:0}
.primary-button:hover{background:#ebc48d}
.practice-button{color:#c3d1d4;font-weight:400;border-bottom-color:#738b94}
.pause-button{border-radius:0}
.control-desk{background:#f2f5f5;color:var(--brand-ink);border-top:0;border-bottom:1px solid var(--brand-line);padding-top:22px;padding-bottom:22px}
.keyboard-guide{color:var(--brand-muted)}
kbd{border-color:#b2c1c5;color:var(--brand-ink);background:#fff;border-radius:0}
.desk-note .tiny-label{color:var(--brand-muted)}
.desk-note strong{color:#9e6722}
.control-key{border-radius:0;background:#fff;color:var(--brand-ink);border-color:#b2c1c5}
.control-key.active,.control-key:active{background:#d9ac69;color:#0b2027;border-color:#d9ac69}
.drop-key{background:#d9ac69;color:#0b2027;border-color:#d9ac69}
.dialog{background:#11282f;border-color:#506871;box-shadow:0 20px 90px #0006}
.dialog h2{font-weight:500;letter-spacing:-.04em}
.help-tip,.lesson{background:#1a353d}
footer{width:calc(100% - 8.4vw);max-width:1440px;margin:auto;padding:27px 0 30px;color:var(--brand-muted);font-size:12px;background:#fff}
footer>span:last-child{font-size:11px;letter-spacing:.06em}
.app:fullscreen{background:#fff;padding:0 20px}
.app:fullscreen .game-shell{margin:auto}
.app:fullscreen .masthead{padding-left:0;padding-right:0}
@media(min-width:1600px){.app{padding:0}.masthead{height:100px}}
@media(max-width:1100px){.header-actions{gap:8px}.brand-name{font-size:17px}.intro{font-size:15px}.start-panel{top:8%}}
@media(max-width:760px){.app{padding:0}.masthead{height:80px;padding:0 20px;gap:12px}.brand{gap:8px}.brand-logo{width:36px;height:36px}.brand-name{font-size:14px;white-space:normal;max-width:250px}.header-actions{gap:5px}.header-actions .icon-button{width:34px;height:34px}.game-shell{width:calc(100% - 32px);margin-top:20px}h1{font-size:clamp(44px,7.5vw,60px);line-height:1;letter-spacing:-.055em;margin-bottom:14px}.intro{font-size:14px;line-height:1.55;margin-bottom:16px}.primary-button{min-height:46px;padding:11px 16px;font-size:13px}.start-panel>.eyebrow{font-size:11px}.control-desk{padding-top:15px;padding-bottom:15px}footer{width:calc(100% - 32px);font-size:11px}footer>span:last-child{font-size:10px}}
@media(max-width:480px){.masthead{height:90px;padding:0 14px;gap:10px}.brand-logo{width:34px;height:34px}.brand-name{font-size:13px;line-height:1.4;max-width:157px;letter-spacing:-.025em}.header-actions{gap:4px}.header-actions .icon-button{width:30px;height:34px}.header-actions .text-button{min-width:28px;font-size:11px}.game-shell{width:100%;margin-top:0}.start-panel{top:8%;width:78%}.stage{min-height:325px}h1{font-size:48px;margin-bottom:15px}.intro{font-size:14px}.practice-button{font-size:12px}.primary-button{min-height:47px}.control-desk{padding:14px 7px}footer{width:calc(100% - 28px);padding:20px 0}footer>span:last-child{font-size:9px}.dialog h2{font-size:27px}}
@media(max-width:350px){.masthead{padding:0 10px;gap:7px}.brand{gap:6px}.brand-logo{width:28px;height:28px}.brand-name{font-size:12px;max-width:140px}.header-actions{gap:3px}.header-actions .icon-button{width:28px}.header-actions .text-button{min-width:25px}}
@media(max-height:560px) and (orientation:landscape){.app{padding:0;max-width:none}.masthead{height:60px;padding:0 20px}.brand-logo{width:34px;height:34px}.brand-name{font-size:14px}.game-shell{margin-top:0;width:100%}.start-panel{top:8%;width:65%}h1{font-size:42px;line-height:1;display:inline-block;margin-right:20px}.intro{display:inline-block;font-size:13px;width:205px}.start-actions{gap:20px}.primary-button{min-height:42px;font-size:12px}.control-desk{padding:9px 15px}footer{padding:12px 0;width:calc(100% - 40px)}}

/* Four-language selector and Arabic text direction. Physical controls stay LTR. */
.language-select{font:500 13px Manrope,Arial,Helvetica,sans-serif;color:#142d34;background:#fff;border:0;border-bottom:1px solid #142d34;border-radius:0;min-height:40px;width:100px;padding:6px 4px;cursor:pointer;flex-shrink:0;color-scheme:light}
.language-select:focus-visible{outline:2px solid #d9ac69;outline-offset:4px}
.masthead,.hud,.touch-controls,.keyboard-guide,.scene-caption{direction:ltr}
.metric strong,.result-score strong,kbd,.brand-name,footer>span:last-child{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .start-panel,[dir=rtl] .dialog{direction:rtl;text-align:right}
[dir=rtl] h1{direction:ltr;text-align:left}
[dir=rtl] .eyebrow,[dir=rtl] .tiny-label,[dir=rtl] .shift-label,[dir=rtl] .scene-caption,[dir=rtl] .drop-key{letter-spacing:0}
[dir=rtl] .metric .tiny-label,[dir=rtl] .shift-label,[dir=rtl] .keyboard-guide>span>span{direction:rtl;unicode-bidi:isolate}
[dir=rtl] .intro,[dir=rtl] .help-steps p,[dir=rtl] .lesson p{line-height:1.8}
[dir=rtl] .help-tip{border-left:0;border-right:2px solid var(--gold)}
[dir=rtl] .start-panel .eyebrow>span{margin-right:0;margin-left:9px}
[dir=rtl] .play-hint,[dir=rtl] .toast{direction:rtl}
[dir=rtl] .start-actions{align-items:stretch;max-width:300px;margin-left:auto}
[dir=rtl] .practice-button{align-self:flex-start}
[dir=rtl] .result-details{gap:16px;flex-wrap:wrap}
[dir=rtl] .result-score{gap:14px}
[lang=zh-Hans] .intro,[lang=zh-Hans] .help-steps p{line-height:1.8}
@media(max-width:760px){.language-select{width:85px;font-size:12px}[dir=rtl] .metric .tiny-label{font-size:11px}[dir=rtl] .play-hint{line-height:1.6}}
@media(max-width:480px){.language-select{width:70px;font-size:12px;min-height:34px}.brand{flex:1}.brand-name{min-width:0}.header-actions{gap:4px}[dir=rtl] .metric .tiny-label{font-size:11px}[dir=rtl] .intro{font-size:14px;line-height:1.7}[dir=rtl] .start-panel>.eyebrow{font-size:11px}[dir=rtl] .start-actions{max-width:250px}[dir=rtl] .dialog h2{font-size:26px;line-height:1.35}[dir=rtl] .result-details{gap:8px}[lang=zh-Hans] .intro{line-height:1.7}}
@media(max-width:350px){.language-select{width:65px;font-size:11px}.brand-name{font-size:11px}.masthead{gap:5px}.header-actions{gap:3px}}