:root{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#080f26;color:#f1f6ff;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;}body{min-height:100dvh;background:radial-gradient(ellipse at 20% 12%,#263965 0%,transparent 36%),radial-gradient(ellipse at 85% 85%,#1b2049,transparent 50%),#080f26}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:2px solid #7bdcff;outline-offset:3px}.shell{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 12px max(10px,env(safe-area-inset-bottom));width:100%}
.heading{width:min(456px,calc(100vw - 24px));display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.identity{display:flex;align-items:center;gap:7px;min-width:120px}.brand-star{color:#8cecff;font-size:27px;text-shadow:0 0 18px #2ad5ff}.identity strong{display:block;font-size:15px;letter-spacing:.07em;line-height:1.1}.identity em{font-style:normal;color:#78d8ff}.identity small{color:#99accd;font-size:10px;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}.hud{display:flex;gap:10px}.hud>div{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:90px;padding:7px 10px;border:1px solid #4763875f;border-radius:12px;background:linear-gradient(180deg,#101b38cc,#0d1731c6);box-shadow:inset 0 1px #ffffff0d}.hud span{font-size:9px;font-weight:850;letter-spacing:.12em;color:#9ab4d5}.hud strong{font-size:18px;letter-spacing:.05em;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 10px #0008}.view-btn{border:1px solid #4d6389;border-radius:100px;background:#14213e;padding:7px 10px;color:#c8eaff;font-size:11px;font-weight:750;box-shadow:inset 0 1px #ffffff12}.view-btn[aria-pressed="true"]{border-color:#3e9eaf;background:#12334b;color:#8ef8ff}
.game-wrap{position:relative;flex:none;width:min(456px,calc(100vw - 24px),calc((100dvh - 148px)*456/840));aspect-ratio:456 / 840;min-width:0;overflow:hidden;border:2px solid #49698e;border-radius:16px;background:#080e21;box-shadow:0 0 0 4px #101f36,0 14px 45px #0008,0 0 34px #218ac733;justify-self:center}
canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.top-shine{position:absolute;inset:0;pointer-events:none;border-radius:14px;box-shadow:inset 0 0 0 2px #c0d8ff22,inset 0 12px 35px #a6d8ff10,inset 0 -15px 30px #0009}.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:linear-gradient(165deg,#060b20d8,#0a1735f0 65%,#0b0e22e9);text-align:center}.overlay.show{display:flex}.panel{width:min(100%,340px);border:1px solid #5e749d88;border-radius:20px;padding:26px 20px;background:#0b1737e8;box-shadow:0 12px 55px #0009}.panel .hero{font-size:43px;margin:0 0 6px;filter:drop-shadow(0 0 22px #62bcff)}.panel h1{font-size:clamp(26px,7vw,36px);line-height:1.04;letter-spacing:.04em;margin:4px 0 12px;color:#fff}.panel h1 b{color:#8be4ff}.panel p{line-height:1.48;color:#d2deef;font-size:14px;margin:8px 0 20px}.panel .tip{font-size:12px;color:#9bb7d4}.panel button{border:1px solid #627ca3;background:#1b2a49;color:#fff;border-radius:13px;min-height:45px;padding:10px 15px;font-weight:800;margin:5px;max-width:100%}.panel button.primary{width:100%;background:linear-gradient(120deg,#58d8f3,#9de1ff);color:#08152f;border:0;box-shadow:0 7px 24px #31d8fa49;font-size:16px}.panel input{max-width:100%;min-height:42px;padding:8px 12px;border:1px solid #5f7192;background:#0c142d;color:#fff;border-radius:10px}.score-row{display:flex;justify-content:space-between;padding:7px 12px;border-bottom:1px solid #fff2;font-size:14px}.launch-hint{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);border:1px solid #9de9ff;background:#102850e8;color:#e7ffff;padding:10px 18px;border-radius:40px;white-space:nowrap;font-size:13px;font-weight:850;box-shadow:0 5px 30px #29b7ff88;animation:glow 1.65s ease-in-out infinite alternate}.launch-hint span{opacity:.65;font-weight:500;margin-left:10px}.launch-hint[hidden]{display:none!important}.impact{position:absolute;top:14%;left:50%;transform:translate(-50%,-50%);color:#adfaff;font-weight:900;letter-spacing:.08em;text-shadow:0 0 15px #36e9ff;pointer-events:none;opacity:0;transition:opacity .17s}.impact.show{opacity:1}@keyframes glow{from{box-shadow:0 5px 15px #1d9bce44}to{box-shadow:0 5px 32px #3bdcffaa}}
.turn-toast{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);max-width:min(88%,340px);padding:10px 14px;border-radius:14px;border:1px solid #6ec0ff88;background:#0d1a37ef;color:#eef7ff;box-shadow:0 10px 30px #0008;text-align:center;font-size:13px;line-height:1.3;z-index:2}.turn-toast strong{color:#8be4ff}.turn-toast[hidden]{display:none!important}
.mobile-controls{display:grid;grid-template-columns:1fr .86fr 1fr;gap:7px;width:min(456px,calc(100vw - 24px));user-select:none}.mobile-controls button{touch-action:none;min-height:48px;border-radius:12px;border:1px solid #5678a3;background:linear-gradient(155deg,#213b66,#14243e);color:#e7f6ff;font-size:12px;font-weight:900;box-shadow:inset 0 1px #fff2}.mobile-controls button:active{background:#3c739b;transform:translateY(1px)}.mobile-controls button span{font-size:17px;color:#91edff}.mobile-controls .plunge-btn{background:linear-gradient(155deg,#65e0f1,#329ac9);color:#061933;border-color:#70deff}
.footer{width:min(456px,calc(100vw - 24px));display:flex;flex-direction:column;align-items:stretch;gap:8px;font-size:10px;color:#a2b9d7;text-align:center}.footer button{border:1px solid #49658b4d;background:linear-gradient(180deg,#101a36b3,#0e1630ad);color:#bfeeff;font-size:11px;padding:7px 10px;border-radius:12px;min-height:36px}.footer-section{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px}.help-row{color:#a2b9d7;line-height:1.35}.toggle-row,.action-row{padding:8px 10px;border:1px solid #45618b48;border-radius:14px;background:linear-gradient(180deg,#0d1732cf,#0b1430c7);box-shadow:inset 0 1px #ffffff0a}.toggle-row{justify-content:center}.action-row{justify-content:center}.touch-help{display:none}.desktop-help,.touch-help{width:100%}
@media(min-width:960px) and (hover:hover) and (pointer:fine){
.mobile-controls{display:none}
.shell{display:grid;grid-template-columns:minmax(360px,min(58vw,calc((100dvh - 40px)*456/840),560px)) minmax(250px,320px);grid-template-rows:auto auto;align-items:start;justify-content:center;column-gap:24px;row-gap:16px;padding:16px 18px;max-width:1180px;margin:0 auto}
.heading{grid-column:2;grid-row:1;width:auto;align-self:start;display:grid;grid-template-columns:1fr;justify-content:stretch;gap:14px;padding:16px 18px;border:1px solid #4c638f88;border-radius:18px;background:linear-gradient(180deg,#0e1733d8,#0b1330d0);box-shadow:0 10px 34px #0006}.identity{gap:10px}.brand-star{font-size:30px}.identity strong{font-size:18px}.identity small{font-size:11px}.hud{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hud>div{padding:10px 12px;border:1px solid #4e658a66;border-radius:14px;background:#0d1a37c0}.hud strong{font-size:28px}.hud span{font-size:10px}.view-btn{width:100%;padding:10px 12px;font-size:13px;text-align:center}
.game-wrap{grid-column:1;grid-row:1 / span 2;width:min(58vw,calc((100dvh - 40px)*456/840),560px);align-self:center;border-radius:22px;box-shadow:0 0 0 4px #101f36,0 18px 55px #0009,0 0 46px #218ac744}
.footer{grid-column:2;grid-row:2;width:auto;align-self:start;justify-content:flex-start;align-content:flex-start;text-align:left;gap:10px;padding:14px 18px;border-radius:18px;border:1px solid #4c638f88;background:linear-gradient(180deg,#0e1733d8,#0b1330d0);box-shadow:0 10px 34px #0006;font-size:12px}.footer button{padding:8px 10px;font-size:13px}.footer-section{justify-content:flex-start}.help-row{padding-bottom:2px}.toggle-row,.action-row{justify-content:flex-start}.desktop-help{font-size:12px;line-height:1.45}.touch-help{display:none}
}
@media(max-width:600px){.shell{gap:5px;padding:6px 8px max(8px,env(safe-area-inset-bottom))}.heading,.mobile-controls,.footer{width:min(456px,calc(100vw - 16px))}.game-wrap{width:min(456px,calc(100vw - 16px),calc((100dvh - 304px)*456/840));border-radius:11px}.desktop-help{display:none}.touch-help{display:inline}.identity strong{font-size:12px}.brand-star{font-size:21px}.hud{gap:8px;flex-wrap:wrap}.hud>div{min-width:76px;padding:6px 8px}.hud strong{font-size:15px}.view-btn{padding:5px 8px;font-size:10px}.panel{padding:20px 14px}.footer{gap:5px}.footer-section{gap:5px 6px}.footer button{min-height:30px;padding:4px 8px}.toggle-row,.action-row{padding:5px 6px}.music-volume{width:100%;justify-content:center;font-size:10px}.music-volume input{width:72px}}
@media(max-height:620px) and (min-width:960px){.shell{grid-template-columns:minmax(330px,min(54vw,calc((100dvh - 28px)*456/840),520px)) minmax(230px,300px);column-gap:18px;padding:10px 14px}.heading,.footer{padding:12px 14px}.game-wrap{width:min(54vw,calc((100dvh - 28px)*456/840),520px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:360px) and (max-height:620px){.shell{gap:4px;padding:4px 7px}.heading,.mobile-controls,.footer{width:calc(100vw - 14px)}.game-wrap{width:min(calc(100vw - 14px),calc((100dvh - 316px)*456/840))}.mobile-controls button{touch-action:none;min-height:40px}.footer{gap:3px}.footer button{padding:3px 6px;font-size:10px;min-height:26px}.footer-section{gap:3px 5px}.toggle-row,.action-row{padding:3px 4px}.overlay{padding:5px;overflow-y:auto}.panel{padding:8px}.panel .hero{font-size:23px;margin:0}.panel h1{font-size:20px;margin:2px 0 5px}.panel p{font-size:11px;line-height:1.2;margin:4px 0 7px}.panel button{min-height:32px;font-size:11px;padding:5px 7px;margin:2px}.panel button.primary{font-size:12px}}

.stuck-hint{position:absolute;top:9%;left:50%;transform:translateX(-50%);z-index:2;max-width:90%;border:1px solid #f9d988;border-radius:13px;background:#1d2745ef;color:#fff8df;padding:9px 13px;font-size:12px;font-weight:650;box-shadow:0 5px 22px #000a;text-align:center}.stuck-hint strong{color:#ffe092;white-space:nowrap}.stuck-hint[hidden]{display:none!important}

/* M12 controls; compact on short screens, no page scroll in regular mobile view. */
.footer button[aria-pressed="true"]{color:#dcfaff;font-weight:850;text-shadow:0 0 9px #2ca6e8;border-color:#4e87b6aa}
.footer button[aria-pressed="false"]{color:#7389a8}
@media(max-width:420px){.footer{gap:4px}.footer button{font-size:10px;min-height:28px;padding:4px 7px}.footer-section{gap:4px 6px}.toggle-row,.action-row{padding:4px 5px}}

/* M13.3: independent soundtrack level, no changes to table rendering or physics. */
.music-volume{display:inline-flex;gap:6px;align-items:center;justify-content:center;color:#bad9f7;white-space:nowrap;font-size:11px;padding:0 2px}.music-volume input{width:78px;accent-color:#62d9fa;cursor:pointer;vertical-align:middle}.music-volume output{font-variant-numeric:tabular-nums;min-width:28px;text-align:right}.music-volume input:focus-visible{outline:2px solid #81e8ff;outline-offset:3px}@media(max-width:420px){.music-volume{font-size:10px}.music-volume input{width:65px}}@media(min-width:960px) and (hover:hover) and (pointer:fine){.music-volume{width:100%;justify-content:flex-start}.music-volume input{flex:1;width:auto;max-width:140px}}

/* M13.5: keep the launch instruction by the real right-hand launcher. */
.launch-hint{left:auto;right:3%;bottom:5%;transform:none;padding:7px 10px;font-size:11px;z-index:1}
.launch-hint span{margin-left:5px}
@media(max-width:600px){.launch-hint{font-size:10px;padding:6px 8px;bottom:3%}.turn-toast{bottom:8%;font-size:12px;padding:8px 10px}}

/* Main-menu credits. Text stays inside the menu card on compact screens. */
.credits-content{text-align:left;max-width:100%;margin:4px 0 12px}
.credits-content p{font-size:13px;line-height:1.35;margin:0 0 10px;color:#d8e9f9}
.credits-content strong{color:#a2e9ff}
.credits-content .credits-license{font-size:11px;color:#b1c7df}
.credits-content a{color:#a6edff;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.credits-content a:focus-visible{outline:2px solid #a6edff;outline-offset:3px}
.overlay .panel{max-height:calc(100% - 6px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:600px){.credits-content p{font-size:12px;margin-bottom:7px}.credits-content .credits-license{font-size:10px}}
@media(max-width:600px){
  .overlay.credits-visible{position:fixed;inset:0;z-index:30;padding:12px;background:#080e21f2}
  .overlay.credits-visible .panel{width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px 18px}
  .overlay.credits-visible .panel h1{margin:3px 0 10px}
  .overlay.credits-visible .credits-content p{font-size:13px;line-height:1.4;margin-bottom:10px}
}

/* Language selection stays alongside the camera control on desktop and mobile. */
.heading-actions{display:flex;align-items:center;gap:7px;min-width:0}.language-btn{border:1px solid #538ab2;border-radius:30px;background:#172848;color:#e3faff;font-size:11px;font-weight:850;padding:7px 9px;min-height:33px;white-space:nowrap}.language-btn[aria-pressed="true"]{border-color:#76daf6;color:#fff}.heading-actions .view-btn{flex:1;min-width:0}
@media(min-width:960px) and (hover:hover) and (pointer:fine){.heading-actions{width:100%}.heading-actions .view-btn{width:auto}.language-btn{font-size:12px;min-height:39px;padding:9px}}
@media(max-width:600px){.heading-actions{gap:5px;flex-wrap:wrap}.language-btn{font-size:10px;min-height:27px;padding:5px 7px}.heading-actions .view-btn{flex:0 0 auto;min-height:27px}.heading{gap:5px}}
@media(max-width:360px){.heading-actions .view-btn{max-width:116px;white-space:normal}}