@font-face{font-family:Cartridge;src:url('./assets/cartridge-pixel.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--base:#101d35;--ink:#fff0d2;--muted:#c4daea;--panel:#203651;--cell:#294362;--rule:#55748d;--ice:#99e6ed;--gold:#ffd18f;font:15px Cartridge,'Courier New',monospace}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 45% 0,#324868,var(--base) 66%);min-height:100dvh}
h1,h2,h3,p{margin:0}
button{background:var(--cell);border:1px solid var(--rule);color:inherit;font:inherit;min-height:44px;padding:5px 8px;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--ice);outline-offset:-3px}
button:active{background:#3c6383}
button:disabled{opacity:.43;cursor:default}
a{color:inherit;text-decoration:none}
.site{margin:auto;max-width:1000px;padding:max(7px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.mast{display:flex;justify-content:space-between;align-items:center;min-height:41px;margin-bottom:6px;gap:12px}
.mast a{display:flex;gap:7px;align-items:center;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.mast img,canvas{image-rendering:pixelated}
.mast p,footer{font-size:11px;color:var(--muted)}
footer{text-align:right;margin-top:8px}
#cabinet{border:1px solid var(--rule);background:var(--panel);box-shadow:0 6px #0c192d}
#screen:focus{outline:none}
.rail{display:flex;align-items:center;justify-content:space-between;padding-left:10px;border-bottom:1px solid var(--rule);text-transform:uppercase;letter-spacing:.06em;font-size:10px;color:var(--ice)}
.rail button{width:46px;border-width:0 0 0 1px}
.rail svg{width:21px;stroke:var(--ink);stroke-width:2;fill:none}
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule)}
.tools button{border-width:0 1px 0 0}
.tools button:last-child{border-right:0}
.primary{background:var(--gold);color:#1b2b43;box-shadow:inset 0 -3px #bd835e}
.primary:active{background:#ffe5aa}
.cover{position:relative;overflow:hidden;aspect-ratio:3/2;background:#0b2250}
.cover img,.cover canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.identity{position:absolute;bottom:13%;left:5%;max-width:88%;text-shadow:2px 2px #131f3a}
.identity h1{font-size:clamp(26px,9vw,60px);line-height:1;text-transform:uppercase;letter-spacing:-.04em;color:#fff0d1}
.identity h1 span{color:#ffb476}
.identity p{font-size:clamp(9px,2.75vw,14px);line-height:1.4;color:#d5edf3;margin-top:8px}
.menu,.panel{padding:8px;display:grid;gap:7px}
.menu .primary{min-height:49px}
.menu p,.panel p,dialog p{font-size:12px;color:var(--muted);line-height:1.5}
.menu .hint{display:none}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.list{display:grid;gap:5px}
.course{display:grid;grid-template-columns:1fr auto;gap:4px}
.course>button:first-child{text-align:left}
.course small{display:block;font-size:9px;color:var(--muted);line-height:1.4}
.course img{display:none}
.game{display:grid;padding:5px;gap:4px}
.board,.aim-controls{display:grid;align-content:start;gap:4px;min-width:0}
.meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;text-align:center}
.meters>div{border:1px solid var(--rule);padding:4px 1px;font-size:9px;background:var(--cell);color:var(--muted)}
.meters b{display:block;padding-top:1px;color:var(--ink);font-size:13px}
#terrain{display:block;width:100%;height:auto;aspect-ratio:300/204;object-fit:contain;touch-action:none;background:#101d35;border:1px solid var(--rule)}
.note{font-size:10px;line-height:1.3;min-height:27px;padding:1px 2px;color:var(--muted)}
.aim{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:2px}
.aim button{padding:0;width:44px}
.aim label{min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;padding:2px 5px;border:1px solid var(--rule);background:var(--cell);font-size:10px;color:var(--muted)}
.aim input{grid-column:1/-1;width:100%;min-width:0;height:21px;margin:0;accent-color:var(--ice)}
.aim output{color:var(--ink)}
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.result-art{width:100%;height:95px;object-fit:cover;image-rendering:pixelated}
dialog{color:var(--ink);background:#2a4461;border:1px solid #94b9cf;padding:12px;width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 22px);overflow:auto}
dialog::backdrop{background:#121e34e0}
dialog>*+*{margin-top:8px}
.expanded{position:fixed;inset:0;z-index:10;overflow:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.expanded #screen,.expanded .tools{width:min(100%,960px);margin-inline:auto}
body.lock{overflow:hidden}
@media(max-width:500px){.mast p{display:none}}
@media(max-width:600px) and (max-height:650px) and (orientation:portrait){
  body:has(#screen[data-page=game]) .mast{display:none}
  #terrain{max-height:max(110px,calc(100dvh - 285px))}
}
@media(min-width:650px),(orientation:landscape){
  .title-layout{display:grid;grid-template-columns:minmax(0,1.48fr) minmax(0,1fr)}
  .menu{align-content:center;padding:14px}
  .menu .hint{display:block;margin-bottom:3px}
  .game{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);padding:6px;gap:6px}
  .aim-controls{align-content:center}
  .list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(orientation:landscape) and (max-height:450px){
  .mast,footer{display:none}
  .site{padding-block:max(2px,env(safe-area-inset-top)) max(2px,env(safe-area-inset-bottom))}
  .cover{height:clamp(137px,calc(100dvh - 97px),278px);aspect-ratio:auto}
  .cover img,.cover canvas{object-position:center 58%}
  .menu{padding:7px}
  .menu .hint{display:none}
  .game{padding:3px;gap:5px}
  #terrain{max-height:calc(100dvh - 169px)}
  .result-art{height:36px}
}