@font-face{font-family:Cartridge;src:url('./assets/cartridge-pixel.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--bg:#11282f;--ink:#fff0cc;--soft:#c7dfd2;--panel:#203e43;--cell:#294c50;--rule:#64827b;--jade:#9ee2bc;--gold:#ffd194;font:15px Cartridge,'Courier New',monospace}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 44% 0,#36594f,var(--bg) 68%);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 7px;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--jade);outline-offset:-3px}
button:active{background:#477568}
button:disabled{opacity:.45;cursor:default}
a{color:inherit;text-decoration:none}
.site{margin:auto;max-width:990px;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;gap:12px;min-height:41px;margin-bottom:6px}
.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(--soft)}
footer{text-align:right;margin-top:8px}
#cabinet{border:1px solid var(--rule);background:var(--panel);box-shadow:0 6px #0d252b}
#screen:focus{outline:none}
.rail{display:flex;justify-content:space-between;align-items:center;padding-left:10px;border-bottom:1px solid var(--rule);color:var(--jade);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.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:#22323a;box-shadow:inset 0 -3px #c58765}
.primary:active{background:#ffe8a6}
.cover{position:relative;overflow:hidden;aspect-ratio:3/2;background:#102b36}
.cover img,.cover canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.identity{position:absolute;bottom:10%;left:4%;text-shadow:2px 2px #122d36}
.identity h1{font-size:clamp(25px,8.6vw,55px);line-height:.92;text-transform:uppercase;letter-spacing:-.055em}
.identity h1 span{color:#ffba83}
.identity p{font-size:clamp(8px,2.55vw,13px);line-height:1.4;color:#e3efc7;margin-top:9px;background:#102d38c0;padding:3px 4px 3px 0}
.menu,.panel{padding:8px;display:grid;gap:7px}
.menu .primary{min-height:49px}
.menu p,.panel p,dialog p{font-size:12px;color:var(--soft);line-height:1.46}
.menu .hint{display:none}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.list{display:grid;gap:5px}
.choice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px}
.choice>button:first-child{text-align:left}
.choice small{display:block;font-size:9px;color:var(--soft);margin-top:2px}
.game{display:grid;gap:4px;padding:5px}
.board,.control{min-width:0;display:grid;align-content:start;gap:4px}
.meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;text-align:center}
.meters>div{background:var(--cell);border:1px solid var(--rule);padding:3px 1px;font-size:9px;color:var(--soft)}
.meters b{display:block;color:var(--ink);font-size:14px}
#court{display:block;width:100%;height:auto;max-height:304px;aspect-ratio:240/232;object-fit:contain;border:1px solid var(--rule);background:#112c34;touch-action:none}
.note{font-size:10px;line-height:1.25;min-height:26px;color:var(--soft);padding:0 2px}
.label{font-size:10px;color:var(--soft);padding:2px 1px 0}
.three button{padding-inline:1px;font-size:11px}
.three button[aria-pressed=true]{box-shadow:inset 0 -3px var(--jade);background:#436654}
.three .swing{background:var(--gold);color:#25363a;box-shadow:inset 0 -3px #c58765}
.three .swing:active{background:#ffe9b0}
.movement{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.movement button{touch-action:none}
.result-art{width:100%;height:94px;object-fit:cover;image-rendering:pixelated}
dialog{color:var(--ink);background:#2b4a4d;border:1px solid #9ebfb1;padding:12px;width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 22px);overflow:auto}
dialog::backdrop{background:#10272ce0}
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%,920px);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}
  #court{max-height:max(148px,calc(100dvh - 350px))}
  .control .label:first-child{display:none}
}
@media(min-width:650px),(orientation:landscape){
  .title-layout{display:grid;grid-template-columns:minmax(0,1.46fr) minmax(0,1fr)}
  .menu{align-content:center;padding:14px}
  .menu .hint{display:block;margin-bottom:3px}
  .game{grid-template-columns:minmax(0,1.34fr) minmax(0,1fr);padding:6px;gap:6px}
  .control{align-content:center}
}
@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(135px,calc(100dvh - 98px),284px);aspect-ratio:auto}
  .cover img,.cover canvas{object-position:center 55%}
  .menu{padding:7px}
  .menu .hint{display:none}
  .game{padding:2px 3px;gap:4px}
  .game .board{display:contents}
  .game .meters,.game .note,.game .control{grid-column:2}
  .game .meters{grid-row:1}
  .game .control{grid-row:2}
  .game .note{grid-row:3}
  .control .label:first-child{display:none}
  #court{grid-column:1;grid-row:1/4;align-self:center;max-height:calc(100dvh - 110px)}
  .result-art{height:36px}
}