:root {color-scheme:dark;--ink:#e3eaf5;--muted:#8390ac;--edge:#253047;--blue:#62cfef;--red:#ff7468;--chrome:145px}
* {box-sizing:border-box}
html,body {margin:0;min-height:100%;background:#070c18}
body {min-height:100dvh;display:grid;place-items:center;padding:16px 12px;background:radial-gradient(ellipse at 50% 15%,#17263b 0,transparent 65%),#070c18;color:var(--ink);font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px}
button,input {font:inherit}
button {color:var(--ink);background:#121e30;border:1px solid var(--edge);border-radius:6px;padding:9px 11px;cursor:pointer}
button:hover {background:#20334b;border-color:var(--blue)}
button:focus-visible,canvas:focus-visible {outline:2px solid var(--blue);outline-offset:3px}
button:disabled {opacity:.65;cursor:wait}
[hidden] {display:none!important}
#player {width:100%;max-width:680px;display:flex;flex-direction:column;align-items:center;gap:12px}
.screen {width:min(640px,calc((100dvh - var(--chrome)) * 10 / 9),calc(100vw - 24px));aspect-ratio:10/9;position:relative;background:#04070e;box-shadow:0 24px 80px #0008,0 0 0 1px #354055;border-radius:3px;overflow:hidden;flex-shrink:0}
canvas,#poster {display:block;width:100%;height:100%;image-rendering:pixelated;position:absolute;inset:0;object-fit:contain}
canvas {opacity:0}
body.started canvas {opacity:1}
body.started #poster {display:none}
#overlay {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 16px 8%;background:linear-gradient(transparent 50%,#040a17b8)}
#play {background:#f2b967;color:#1e1520;font-weight:bold;letter-spacing:.03em;border-color:#ffe5a8;padding:13px 24px;box-shadow:0 4px 0 #694b37}
#play:hover {background:#ffcf87;transform:translateY(-1px)}
#status {text-align:center;margin:15px 0 0;color:#e3eaf5;text-shadow:0 1px 3px #000;max-width:32em;line-height:1.5}
body.started #overlay {justify-content:center;background:#040a17bc}
.toolbar {display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap}
.toolbar button {padding:7px 9px;font-size:11px}
.volume {display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px}
input[type=range] {width:76px;accent-color:var(--blue)}
.hint {color:#c2cddd;text-align:center;margin:0;line-height:1.9;font-size:11px}
.hint span {padding:0 5px;color:#53617b}
kbd {font:inherit;color:#eff6ff;background:#162238;border:1px solid #344159;border-radius:3px;padding:2px 4px}
#notice {color:var(--muted);text-align:center;font-size:10px;margin:0;line-height:1.5;min-height:15px}
#controller {display:none;width:100%;max-width:580px;align-items:center;justify-content:space-between;gap:10px;user-select:none;-webkit-user-select:none;touch-action:none}
#controller button {touch-action:none;-webkit-touch-callout:none}
.dpad {display:grid;grid-template:repeat(3,38px)/repeat(3,38px);gap:3px}
.dpad button {padding:0;background:#17263b;font-size:17px}
.up {grid-area:1/2}.left {grid-area:2/1}.right {grid-area:2/3}.down {grid-area:3/2}
.start {font-size:10px;border-radius:20px;white-space:nowrap}
.actions {display:flex;gap:9px;align-items:center}
.action {border-radius:50%;width:62px;height:62px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.action b {font-size:21px}.action span {font-size:8px}
.throttle {border-color:#3d9ebc;color:#a5eaff}.bomb {border-color:#ad5c55;color:#ffc0ac}
#controller button.pressed {background:#3a6782;border-color:#a9eeff;transform:translateY(1px)}
#player:fullscreen {max-width:none;height:100dvh;background:#070c18;justify-content:center;padding:12px}
@media (pointer:coarse),(max-width:600px) {
  :root {--chrome:315px}
  body {padding:12px}
  #player {gap:10px}
  #controller {display:flex}
  .hint {font-size:10px}.hint span {padding:0 2px}
  .toolbar {gap:5px}.toolbar button {padding:7px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  :root {--chrome:85px}
  #player {max-width:none;display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
  .screen {grid-column:2;grid-row:1/4;width:min(55vw,calc((100dvh - 24px)*10/9))}
  #controller {display:contents}
  .dpad {grid-column:1;grid-row:2;justify-self:center}
  .actions {grid-column:3;grid-row:2;justify-self:center}
  .start {grid-column:3;grid-row:3;justify-self:center}
  .toolbar {grid-column:1;grid-row:3;align-self:start}
  .toolbar .volume,#save,#load,.hint,#notice {display:none}
}