:root{color-scheme:dark;--bg:#08121c;--panel:#101f2c;--line:#294151;--text:#e8f2f7;--muted:#9cb3c1;--accent:#80e7d2;--amber:#ffc773;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.42;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button{border:1px solid var(--line);background:#142635;border-radius:7px;min-height:42px;padding:9px 15px}button:hover:not(:disabled){background:#203c4a;border-color:#669eaa}.site-bar{height:76px;max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #21313e}.brand{font-size:17px;font-weight:800;letter-spacing:2px;display:flex;align-items:center;gap:10px}.brand>span{display:grid;place-items:center;background:#17343e;color:var(--accent);border:1px solid #47727b;border-radius:7px;width:32px;height:36px;transform:rotate(-6deg)}.brand small{font-size:9px;color:#84a8b9;font-weight:500;border-left:1px solid #38505c;padding-left:10px;letter-spacing:2px}.back-link{font-size:13px;color:#b5ccd8}main{max-width:1320px;margin:auto;padding:36px 24px 24px}.intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:2.1px;color:var(--accent);font-weight:700;margin:0 0 12px}h1{font-size:32px;letter-spacing:-1px;margin:0 0 10px}h1>span{font-size:12px;font-weight:500;letter-spacing:1px;padding:5px 10px;margin-left:15px;vertical-align:middle;border:1px solid #385563;border-radius:4px;color:#a8c3cd}.intro>div>p:last-child{color:var(--muted);font-size:14px;line-height:1.8;margin:0}.tech-tags{display:flex;gap:7px;padding-bottom:3px}.tech-tags span{border:1px solid #2c4350;border-radius:4px;padding:7px 10px;color:#b0c6ce;font-size:11px;white-space:nowrap}.arcade{border:1px solid #355261;border-radius:12px;overflow:hidden;background:#0c1a25;box-shadow:0 18px 45px #0003}.game-toolbar{min-height:67px;padding:10px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:#101e2a}.game-tabs{display:flex;gap:5px}.game-tabs button{color:#809ba9;background:transparent;border-color:transparent;font-size:11px;white-space:nowrap}.game-tabs strong{font-size:15px;font-weight:600;margin-left:6px}.game-tabs [aria-selected=true]{color:var(--accent);background:#173a3f;border-color:#315d63}.actions{display:flex;gap:7px}.actions button{font-size:12px;padding:8px 12px}.actions kbd{font-size:10px;margin-left:4px;border:0;padding:0;color:#9cb3c1;background:none}#fullscreen{border-color:#406778;color:#bee5f0}.play-screen{position:relative;aspect-ratio:16/9;background:#112333;min-height:250px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.hud{position:absolute;left:27px;right:27px;top:20px;display:flex;justify-content:space-between;pointer-events:none;text-shadow:0 2px 8px #000}.hud small{font-size:9px;letter-spacing:2px;color:#b9d4dd}.hud strong{display:block;font:700 26px/1.3 ui-monospace,Consolas,monospace;letter-spacing:1px;color:#fff}.hud-right{text-align:right}.hud-right>span{font-size:20px;letter-spacing:4px;color:#80ebd3}.hud-right strong{font-size:11px;margin-top:7px;letter-spacing:1.5px}.game-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#071522c9,#0b1b2780 60%,#08192333);padding:28px}.game-overlay[hidden]{display:none}.overlay-card{max-width:620px;width:100%;text-align:center}.overlay-card .eyebrow{color:#9ed2dc;letter-spacing:3px;font-size:11px}.overlay-card h2{font-size:clamp(25px,4.4vw,47px);line-height:1.25;margin:14px 0 18px;letter-spacing:-1px;text-shadow:0 3px 24px #0009}.overlay-card>p:not(.eyebrow){font-size:15px;line-height:1.8;color:#c0d2dc;margin:0 auto 20px;max-width:540px}.overlay-hints{display:flex;justify-content:center;gap:22px;color:#d9e8ed;font-size:13px;margin:22px 0}.overlay-hints>span{white-space:nowrap}kbd{display:inline-block;font:600 11px ui-monospace,Consolas,monospace;background:#1b3345;border:1px solid #456275;border-bottom-width:2px;border-radius:4px;padding:3px 6px;margin:0 2px;min-width:22px;text-align:center;color:#e7f1f4}.primary{min-width:230px;min-height:55px;background:var(--accent);color:#07372f;font-size:17px;font-weight:800;border-color:#a5f3e3;box-shadow:0 5px 0 #29776e}.primary:hover:not(:disabled){background:#b2f7e8;border-color:#e8fff9}.primary span{margin-left:32px;font-size:21px}.overlay-card .overlay-foot{font-size:11px!important;margin:20px 0 0!important;color:#9fb8c4!important}.canvas-note{position:absolute;bottom:18px;left:25px;color:#acc6cf;font-size:10px;letter-spacing:1px;pointer-events:none;text-shadow:0 1px 5px #000}.touch-controls{position:absolute;bottom:16px;left:20px;right:20px;display:none;justify-content:space-between;pointer-events:none}.touch-controls>div{display:flex;gap:12px}.touch-controls button{pointer-events:auto;width:57px;height:53px;font-size:21px;background:#173245c9;touch-action:none;user-select:none;border-color:#71909e7a}.touch-controls button.is-down{background:#438073}.touch-controls .touch-jump{width:83px;color:#a6f6d9;font-size:15px;border-color:#6da896}.touch-reload{position:absolute;bottom:20px;right:24px;color:#fbe2a7;border-color:#bb955a;background:#493b23db;font-size:14px}.touch-reload[hidden]{display:none}.command-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 23px;border-top:1px solid var(--line);background:#12232f}.command-label{font-size:10px;letter-spacing:2px;color:#81cbbb}.command-strip p{font-size:13px;line-height:1.9;color:#adc5d0;margin:5px 0 0}.command-strip b{color:#e2eef4;font-weight:600}#runtime-status{white-space:nowrap;font-size:10px;color:#93b1bd;border-left:1px solid #38505c;padding-left:18px}.below-game{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:28px 0 32px}.how-to{padding:3px 0}.how-to h2{font-size:19px;margin:8px 0 12px}.how-to>p:last-child{font-size:13px;line-height:1.9;color:var(--muted);max-width:600px;margin:0}.technical{border:1px solid var(--line);border-radius:8px;background:#0f1d28;align-self:start}.technical summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:18px;font-size:13px;list-style:none}.technical summary::-webkit-details-marker{display:none}.technical summary small{display:block;color:#7296a5;font-size:10px;margin-top:6px}.technical summary>span:last-child{color:var(--accent);font-size:22px}.technical[open] summary>span:last-child{transform:rotate(45deg)}.diagnostics{border-top:1px solid var(--line);padding:16px 18px}.diagnostics dl{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin:0}.diagnostics dt{font-size:10px;color:#88a5b3;margin-bottom:5px}.diagnostics dd{font:11px ui-monospace,Consolas,monospace;margin:0;color:#c1e4e6}.diagnostics>p{font-size:11px;line-height:1.9;margin:18px 0 0;color:#89a9b6}footer{display:flex;justify-content:space-between;gap:20px;font-size:11px;line-height:1.8;color:#7897a5;padding:19px 0;border-top:1px solid #233845}footer p{margin:0}footer a{color:#b2ced8;white-space:nowrap}.arcade:fullscreen,.arcade.expanded{display:flex;flex-direction:column;border:0;border-radius:0;width:100vw;height:100vh;height:100dvh;background:#08121c}.arcade:fullscreen .play-screen,.arcade.expanded .play-screen{flex:1;min-height:0;aspect-ratio:auto;display:flex;align-items:center;justify-content:center}.arcade:fullscreen canvas,.arcade.expanded canvas{object-fit:contain}.arcade.expanded{position:fixed;inset:0;z-index:10000}.arcade:fullscreen .game-toolbar,.arcade.expanded .game-toolbar{flex-shrink:0}.arcade:fullscreen .command-strip,.arcade.expanded .command-strip{flex-shrink:0;padding-top:9px;padding-bottom:9px}.arcade:fullscreen .command-label,.arcade.expanded .command-label{display:none}body.has-expanded{overflow:hidden}@media(pointer:coarse){.arcade.is-playing .touch-controls:not([hidden]){display:flex}.arcade.is-playing .canvas-note{display:none}}@media(max-width:800px){main{padding:25px 16px}.site-bar{padding:0 16px;height:66px}.intro{gap:12px}.tech-tags{display:none}h1{font-size:28px}.game-toolbar{padding:8px;gap:8px;flex-wrap:wrap}.game-tabs strong{font-size:13px}.game-tabs button{padding:8px 10px}.actions{margin-left:auto}.actions button{font-size:11px;padding:7px 9px;min-height:37px}.actions kbd{display:none}.command-strip{padding:12px 14px;display:block}#runtime-status{display:block;border:0;padding:7px 0 0;font-size:10px}.below-game{grid-template-columns:1fr;gap:20px}.overlay-hints{gap:12px;font-size:11px}.overlay-card>p:not(.eyebrow){font-size:13px;margin-bottom:10px}.overlay-card h2{margin:8px 0 12px}.overlay-card .overlay-foot{margin-top:13px!important}.overlay-card .eyebrow{font-size:9px}.game-overlay{padding:20px}.hud{left:16px;right:16px;top:12px}.hud strong{font-size:21px}.hud-right strong{font-size:9px}.hud small{font-size:8px}.hud-right>span{font-size:16px}.primary{min-height:46px;min-width:200px;font-size:15px}footer{display:block}footer a{display:inline-block;margin-top:10px}.play-screen{min-height:330px}.arcade:fullscreen .play-screen,.arcade.expanded .play-screen{min-height:0}.arcade:fullscreen #runtime-status,.arcade.expanded #runtime-status{display:none}}@media(max-width:480px){h1>span{font-size:10px;margin-left:8px;padding:4px 6px}.back-link{font-size:11px}.brand small{display:none}.intro>div>p:last-child{font-size:12px}.game-tabs{width:100%;justify-content:space-between}.game-tabs button{flex:1}.actions{margin:0;width:100%;justify-content:space-between}.actions button{flex:1}.overlay-hints{flex-wrap:wrap;gap:8px;margin:14px 0}.game-overlay{padding:25px 14px 15px}.overlay-card h2{font-size:27px}.overlay-card>p:not(.eyebrow){font-size:12px}.hud small{display:none}.hud strong{font-size:17px}.hud-right strong{font-size:8px}.hud-right>span{font-size:14px}.overlay-card .overlay-foot{font-size:10px!important}.diagnostics dl{grid-template-columns:repeat(2,1fr)}.command-strip p{font-size:12px}.canvas-note{font-size:8px;left:15px;bottom:10px}.touch-controls{left:12px;right:12px;bottom:13px}.touch-controls button{width:46px;height:45px}.touch-controls .touch-jump{width:69px}.touch-reload{right:12px;bottom:13px;min-height:38px;font-size:12px}}@media(max-height:550px) and (orientation:landscape){.arcade:fullscreen .command-strip,.arcade.expanded .command-strip{display:none}.arcade:fullscreen .game-toolbar,.arcade.expanded .game-toolbar{min-height:46px;padding:4px 10px;flex-wrap:nowrap}.arcade:fullscreen .game-tabs,.arcade.expanded .game-tabs{width:auto}.arcade:fullscreen .actions,.arcade.expanded .actions{width:auto;margin-left:auto}.overlay-card .overlay-foot{display:none}.overlay-hints{margin:10px 0}.overlay-card h2{font-size:28px;margin:5px 0}.overlay-card>p:not(.eyebrow){font-size:12px;margin-bottom:8px}.overlay-card .eyebrow{margin-bottom:5px}.primary{min-height:42px}.hud{top:10px}.game-overlay{padding:15px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
:root canvas{object-fit:contain}
/* Keep overlays constrained to the viewport: an implicit grid track otherwise
   takes the intrinsic width of the hint row before percentage sizing resolves. */
.game-overlay{display:flex;align-items:center;justify-content:center;min-width:0}
.overlay-card{flex:0 1 620px;min-width:0;width:100%;max-width:100%;overflow-wrap:anywhere}
.overlay-card h2,.overlay-card>p{max-width:100%}
.overlay-hints{min-width:0;flex-wrap:wrap}
.overlay-hints>span{max-width:100%}
.overlay-card .primary{min-width:0;width:min(230px,100%);max-width:100%}
.touch-controls,.touch-controls>div{min-width:0}
@media(max-width:480px){.overlay-card{flex-basis:100%}.overlay-card .eyebrow{letter-spacing:1.5px}.overlay-card h2{font-size:clamp(23px,7.2vw,27px)}.overlay-hints{column-gap:9px;row-gap:6px}.touch-controls>div{gap:8px}}
/* A min-height must not transfer through aspect-ratio into a wider playfield. */
.play-screen{width:100%;max-width:100%;min-width:0}
@media(max-width:800px){.play-screen{aspect-ratio:auto;height:330px}.arcade:fullscreen .play-screen,.arcade.expanded .play-screen{height:auto}}