:root{color-scheme:dark;--bg:#08131d;--panel:#101f2c;--panel2:#14293a;--line:#385168;--muted:#a7becf;--text:#ecf5fc;--accent:#8edcfe;--gold:#ffe1a2;--good:#66ddaa;--warn:#ffc472;--bad:#ff747a}*{box-sizing:border-box}body{margin:0;color:var(--text);background:radial-gradient(ellipse at 75% -20%,#27425c 0%,transparent 54%),linear-gradient(180deg,#0d1e2c,#071019);font:15px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif;min-height:100vh}a{color:var(--accent)}button,select,input{font:inherit}button{cursor:pointer}.shell{max-width:1650px;margin:0 auto;padding:18px clamp(12px,2vw,27px) 32px}.header{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:15px}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:900;color:var(--accent)}.header h1{font:700 clamp(27px,3.1vw,44px)/1.15 Georgia,serif;margin:6px 0}.header p{margin:0;color:var(--muted)}.back{display:inline-block;border:1px solid var(--line);padding:9px 13px;text-decoration:none;border-radius:11px;color:var(--text)}.layout{display:grid;grid-template-columns:minmax(205px,250px) minmax(0,1fr) minmax(250px,310px);gap:13px;align-items:start}.panel{border:1px solid var(--line);border-radius:17px;background:linear-gradient(135deg,#142838,#0e1c29);padding:16px;min-width:0;box-shadow:0 9px 32px #0002}.panel h2{font-size:15px;letter-spacing:.04em;margin:0 0 12px;color:var(--gold)}.telemetry{display:grid;gap:7px}.read{border-bottom:1px solid #34495a;padding:9px 0;display:flex;align-items:center;justify-content:space-between;gap:9px}.read span{font-size:12px;color:var(--muted)}.read strong{font-size:14px;text-align:right;font-variant-numeric:tabular-nums}.read big{font-size:19px;font-weight:850;color:var(--accent)}.meter{height:8px;background:#2a3d4a;border-radius:20px;overflow:hidden;margin:6px 0}.meter i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#61dca1,#e9c36b,#ff646f);transition:width .1s}.small{font-size:12px;color:var(--muted)}.tag{display:inline-flex;padding:5px 9px;font-weight:800;font-size:11px;border:1px solid #407168;color:var(--good);border-radius:100px;background:#17403a}.tag.warn{color:var(--warn);border-color:#826441;background:#40321e}.tag.bad{color:var(--bad);border-color:#9c5057;background:#452832}.scene{padding:10px}.scene-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:9px;padding:0 4px}.scene-top h2{margin:0;font-size:15px}.scene-viewport{position:relative;border:1px solid #46627d;border-radius:13px;overflow:hidden;background:#10263d;aspect-ratio:1.64;max-height:650px;min-height:305px}.scene-viewport canvas{width:100%;height:100%;display:block;touch-action:none}.overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#081323c9;text-align:center;padding:25px;z-index:2;backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.outcome{max-width:470px}.outcome h2{font:700 clamp(25px,3.4vw,38px) Georgia,serif;color:var(--gold);margin:0 0 8px}.outcome p{color:#e8f2fb;font-size:15px}.statusline{min-height:38px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 4px;color:var(--muted);font-size:13px}.statusline strong{color:var(--text)}.buttons{display:flex;flex-wrap:wrap;gap:8px}.btn{padding:11px 15px;border:1px solid #3f6880;border-radius:10px;background:#1e3a51;color:#f2f8ff;font-weight:800;min-height:44px}.btn.primary{background:linear-gradient(120deg,#f7dca8,#e3b77e);border-color:#ffd49c;color:#1b2731}.btn.danger{background:#693642;border-color:#b2616b}.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b5e6ff;outline-offset:3px}.ctrl{margin:12px 0 17px}.ctrl label{display:flex;justify-content:space-between;gap:6px;align-items:center;font-weight:750;font-size:13px}.ctrl output{color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}.ctrl input[type=range]{width:100%;accent-color:#95d7ff;cursor:pointer;margin-top:9px}.ctrl select{display:block;margin-top:6px;background:#193447;border:1px solid #496177;border-radius:8px;padding:9px;width:100%;color:var(--text)}.mini{border-radius:10px;background:#172e3b;padding:10px;margin:13px 0;color:#d7e9f0;font-size:12px}.mission{background:#172f3d;border-left:3px solid var(--gold);padding:12px;font-size:13px;margin-bottom:15px}.mission strong{color:var(--gold)}.under{border:1px solid var(--line);padding:13px 16px;border-radius:11px;margin-top:14px;color:#bbd1db;font-size:12px}.legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.legend i{height:9px;width:9px;border-radius:50%;display:inline-block;background:#7fd4f1}.footer{font-size:12px;color:#a8bdc9;padding-top:18px}.time{color:var(--gold);font-variant-numeric:tabular-nums}.gamepad{display:flex;gap:9px;flex-wrap:wrap;padding-top:8px}.gamepad button{flex:1;white-space:nowrap}.callout{font-size:12px;color:#f7d5a2;background:#47332166;border:1px solid #9a744baa;padding:10px;border-radius:9px;margin:10px 0}.composite{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.composite .ctrl{margin:4px 0}.keyboard{font-size:11px;color:#88b6c9;padding:8px 0}@media(max-width:1180px){.layout{grid-template-columns:minmax(195px,240px) minmax(0,1fr)}.controls{grid-column:1/-1}.control-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}.controls .mission{grid-column:1/-1}.controls .buttons{grid-column:1/-1}}@media(max-width:720px){.shell{padding:11px}.layout{display:flex;flex-direction:column}.scene{order:0;width:100%}.meters{order:1;width:100%}.controls{order:2;width:100%}.scene-viewport{aspect-ratio:1.18;min-height:310px;max-height:550px}.control-flow{display:block}.telemetry{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 13px}.read{display:block;min-height:58px}.read strong{display:block;text-align:left}.header h1{font-size:27px}.panel{padding:12px}.btn{padding:10px 11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Ensure canvas viewport cannot widen the page on narrow phones, even with inline desktop geometry. */
@media(max-width:720px){.scene-viewport{width:100%;height:345px!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important}.scene-top{flex-wrap:wrap}.statusline{flex-wrap:wrap}.keyboard{overflow-wrap:anywhere}}

/* 4.83.6: pointer controls on the diving-bell scene */
#bellCanvas{touch-action:none;cursor:grab;outline-offset:-4px}#bellCanvas:active{cursor:grabbing}#bellCanvas:focus-visible{outline:3px solid #b5e6ff}#bellHelp strong{color:#ffe1a2}#bellHelp{line-height:1.5;font-size:12px;color:#c4e7f1;padding:12px;background:#163040;border-radius:9px;margin-top:9px}
