@font-face{font-family:Cartridge;src:url('./assets/cartridge-pixel.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--base:#142536;--ink:#fff1cf;--soft:#d1ded0;--panel:#233945;--cell:#304a53;--rule:#677b74;--jade:#aee1bc;--gold:#ffd699;font:15px Cartridge,'Courier New',monospace}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 45% 0,#42574f,var(--base) 67%);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{outline:2px solid var(--jade);outline-offset:-3px}
button:active{background:#517367}
button:disabled{opacity:.42;cursor:default}
a{color:inherit;text-decoration:none}
.site{margin:auto;max-width:972px;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:.06em}
.mast p,footer{font-size:10px;color:var(--soft)}
footer{text-align:right;margin-top:8px}
.mast img,canvas,.result-art{image-rendering:pixelated}
#cabinet{border:1px solid var(--rule);background:var(--panel);box-shadow:0 6px #102531}
#screen:focus{outline:none}
.rail{display:flex;justify-content:space-between;align-items:center;padding-left:10px;border-bottom:1px solid var(--rule);text-transform:uppercase;color:var(--jade);font-size:11px;letter-spacing:.045em}
.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:#22353a;box-shadow:inset 0 -3px #bd8b65}
.primary:active{background:#ffe8ac}
.cover{position:relative;overflow:hidden;aspect-ratio:3/2;background:#172738}
.cover img,.cover canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.identity{position:absolute;bottom:13%;left:4%;text-shadow:2px 2px #172637}
.identity h1{font-size:clamp(22px,7.8vw,54px);line-height:.96;text-transform:uppercase;letter-spacing:-.04em}
.identity h1 span{color:#ffd38a}
.identity p{font-size:clamp(8px,2.55vw,13px);line-height:1.4;color:#eff0cc;margin-top:8px;background:#15283bc7;padding:2px 4px 2px 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.5}
.menu .hint{display:none}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.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:12px}
#room{display:block;width:100%;height:auto;max-height:282px;aspect-ratio:1;object-fit:contain;border:1px solid var(--rule);background:#172c36;touch-action:pan-y}
.note{font-size:10px;line-height:1.28;min-height:27px;color:var(--soft);padding:1px 2px}
.moves{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
.moves button{padding:2px;font-size:11px}
.echo-action{font-size:12px}
.result-art{width:100%;height:92px;object-fit:cover}
.rooms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.rooms button{text-align:left;font-size:12px}
.rooms small{display:block;color:var(--soft);font-size:9px;line-height:1.4}
.map{display:grid;gap:2px;padding:4px;background:#192d38}
.map>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.map span{text-align:center;padding:4px 1px;min-height:25px;background:#2d4954;font-size:11px}
dialog{color:var(--ink);background:#304851;border:1px solid #a5b7a5;padding:12px;width:min(495px,calc(100vw - 24px));max-height:calc(100dvh - 22px);overflow:auto}
dialog::backdrop{background:#102333de}
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}
  #room{max-height:max(145px,calc(100dvh - 324px))}
}
@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.3fr) 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}
  .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}
  #room{grid-column:1;grid-row:1/4;align-self:center;max-height:calc(100dvh - 110px)}
  .result-art{height:36px}
  .rooms{grid-template-columns:repeat(4,minmax(0,1fr))}
}