:root { color-scheme: dark; font-family: ui-monospace, Consolas, monospace; color: #dce8ec; background: #080e14; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 300px; }
main { width: min(100% - 40px, 1040px); margin: 32px auto; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
h1 { margin: 0; font-size: clamp(20px, 3vw, 28px); letter-spacing: .15em; color: #8fe7ef; }
.edition { font-size: 12px; letter-spacing: .13em; color: #8295a3; }
.cabinet { position: relative; background: #000; border: 1px solid #294451; box-shadow: 0 12px 50px #0008; }
canvas { display: block; width: 100%; aspect-ratio: 5 / 3; image-rendering: pixelated; background: #000; }
canvas:focus-visible { outline: 2px solid #8fe7ef; outline-offset: 3px; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: #02080ddd; padding: 28px; }
.overlay[hidden] { display: none; }
.overlay p { line-height: 1.65; max-width: 450px; }
button { border: 1px solid #38515f; border-radius: 4px; background: #111e28; color: #e1eef2; padding: 10px 15px; font: inherit; font-size: 14px; cursor: pointer; min-height: 42px; }
button:hover { background: #1d3341; border-color: #69bfc9; }
button:focus-visible { outline: 2px solid #8fe7ef; outline-offset: 3px; }
button:disabled { opacity: .4; cursor: wait; }
button[aria-pressed=true] { background: #234754; border-color: #8fe7ef; }
#play { background: #8fe7ef; color: #09131b; font-weight: bold; padding: 13px 24px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #22333f; }
#status { font-size: 13px; color: #9cb2bf; margin: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.instructions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px; margin: 26px 0; font-size: 14px; }
dt { color: #c8d9e2; margin-bottom: 8px; min-height: 23px; }
dd { margin: 0; color: #93a7b5; line-height: 1.5; }
kbd { font-family: inherit; display: inline-block; padding: 2px 5px; border: 1px solid #354752; border-radius: 3px; font-size: 13px; }
footer { color: #7e939f; font-size: 12px; line-height: 1.6; }
.touch-controls { display: none; justify-content: space-between; gap: 24px; margin: 18px 0; user-select: none; }
.touch-controls button { touch-action: none; min-width: 52px; min-height: 52px; }
.dpad { display: grid; grid-template-columns: repeat(3, 52px); gap: 6px; }
[data-control=up] { grid-column: 2; }
[data-control=left] { grid-column: 1; }
.select { align-self: center; padding: 18px; border-color: #69bfc9; }
.cabinet:fullscreen { display: flex; align-items: center; justify-content: center; border: none; background: black; }
.cabinet:fullscreen canvas { width: min(100vw, 200vh); height: auto; max-height: 100vh; }
@media (pointer: coarse) { .touch-controls { display: flex; } }
@media (max-width: 680px) {
  main { width: min(100% - 24px, 1040px); margin: 18px auto; }
  header { flex-wrap: wrap; gap: 6px; }
  .edition { font-size: 12px; }
  .toolbar { align-items: flex-start; flex-direction: column; }
  .instructions { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .actions { width: 100%; }
  .actions button { flex: 1; padding: 8px; font-size: 13px; }
}

/* Kosmic Keep: an amber command console around the original vector display. */
.cabinet { display:grid; place-items:center; }
.cabinet canvas { width:min(100%,100vh); }
:root { background:#090d12; color:#dce3e8; }
main { max-width:1000px; }
header { margin:24px 0; }
.eyebrow,.overline { font-size:10px; letter-spacing:.17em; color:#8c9ba5; }
.eyebrow { margin:0 0 9px; }
h1 { font-size:clamp(30px,5vw,48px); color:#f0ece2; letter-spacing:.075em; line-height:1; }
.title-dot { color:#efb457; }
.edition { text-align:right; line-height:1.8; color:#d3ad70; }
.briefing { display:flex; justify-content:space-between; gap:28px; padding:18px 0 22px; border-top:1px solid #27313a; }
.briefing h2 { margin:7px 0 8px; font-size:19px; font-weight:500; color:#edc281; }
.briefing p { margin:0; color:#9daeb9; font-size:12px; line-height:1.6; max-width:720px; min-height:38px; }
.best { display:flex; flex-direction:column; gap:8px; min-width:140px; align-items:flex-end; }
.best strong { color:#eef1ee; font-size:24px; font-weight:400; }
.best>span:last-child { font-size:10px; color:#758793; }
.cabinet { border-color:#3f453f; box-shadow:0 12px 44px #0007; }
#play { background:#efb457; }
.command { border:1px solid #2b343d; margin-top:20px; }
.upgrade-strip { display:grid; grid-template-columns:repeat(6,1fr); }
.system { padding:12px 14px 10px; display:grid; gap:7px; border-right:1px solid #2b343d; color:#70818e; }
.system:last-child { border-right:0; }
.system>span:first-child { font-size:10px; letter-spacing:.12em; }

.system .pips { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; max-width:108px; padding:9px 0; }
.upgrade-oval { display:block; height:9px; border:1px solid #667986; border-radius:999px; background:transparent; }
.upgrade-oval.filled { background:#b7ccd4; border-color:#b7ccd4; }
.system.selected .upgrade-oval.filled { background:#efb457; border-color:#efb457; }
.upgrade-oval.next { border-color:#ffe0ab; box-shadow:0 0 0 1px #efb457; }
.system.selected { background:#efb4570d; box-shadow:inset 0 2px #efb457; color:#efb457; }

.upgrade-detail { border-top:1px solid #2b343d; display:flex; gap:24px; padding:15px; justify-content:space-between; min-height:90px; }
.upgrade-detail p { font-size:12px; color:#9daeb9; line-height:1.6; margin:7px 0 0; max-width:650px; }
.quote { display:flex; flex-direction:column; align-items:flex-end; min-width:190px; gap:10px; }
.quote strong { font-size:12px; font-weight:400; color:#edc281; }
.quote span { font-size:10px; color:#788c99; }
details { border-top:1px solid #27313a; padding:16px 0; font-size:12px; color:#aebbc4; }
summary { cursor:pointer; color:#efb457; }
.manual { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; line-height:1.8; }
.manual strong { color:#e4e9e8; }
footer { border-top:1px solid #27313a; padding:16px 0 24px; }
a { color:#b9b08d; text-underline-offset:3px; }
@media(max-width:680px){ .best{display:none;} .briefing{gap:10px;} .system{padding:10px 7px;} .system .pips{gap:2px;} .upgrade-oval{height:7px;}
.upgrade-detail{flex-direction:column;gap:12px;} .quote{align-items:flex-start;gap:6px;} .manual{grid-template-columns:1fr;} .edition{font-size:10px;}}

@media(max-width:680px){
  .upgrade-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .system:nth-child(3) { border-right:0; }
  .system:nth-child(-n+3) { border-bottom:1px solid #2b343d; }
}

/* Touch layout: full-width game with one control row underneath. */
.play-area { background:#090d12; }
.touch-hint { display:none; }
.touch-controls b { font-size:25px; line-height:1; }
.touch-controls span { font-size:9px; letter-spacing:.06em; }
.touch-controls small { font-size:8px; color:#e8c790; }
.touch-controls button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:8px 3px; border-radius:9px; }
.touch-controls button.is-held { background:#654b24; border-color:#efb457; transform:translateY(1px); }
.touch-controls [data-control=fire] { background:#342a1b; border-color:#bd914e; color:#ffe0ac; }
.rail-label { color:#76858d; text-align:center; }
.play-area:fullscreen, .play-area.focus-view { width:100%; height:100%; overflow:auto; padding:16px; background:#090d12; }
.play-area.focus-view { position:fixed; inset:0; z-index:20; height:100dvh; }
body.in-focus { overflow:hidden; }
@media (pointer:coarse), (max-width:680px) {
  .play-area { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; align-items:start; }
  .touch-controls { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-column:1; grid-row:2; gap:6px; margin:0; position:static; }
  .touch-controls button { grid-area:auto; min-width:0; width:100%; min-height:64px; }
  .touch-controls [data-control=up] { min-height:64px; border-color:#ad874b; }
  .cabinet { grid-column:1; grid-row:1; min-width:0; width:100%; box-shadow:none; }
  .cabinet canvas { width:100%; }
  .command { display:none; }
  .toolbar { grid-column:1 / -1; grid-row:3; padding:8px 0; }
  .upgrade-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .system { padding:9px 6px; gap:3px; }
  .system:nth-child(3) { border-right:0; }
  .system:nth-child(-n+3) { border-bottom:1px solid #2b343d; }
  .system .pips { padding:5px 0; gap:2px; }
  .system>span:first-child { font-size:9px; }
  .upgrade-detail { flex-direction:column; gap:12px; padding:12px 10px; min-height:0; }
  .upgrade-detail p { font-size:11px; line-height:1.5; }
  .quote { min-width:0; align-items:flex-start; gap:6px; }
  .quote strong { font-size:11px; }
  .touch-hint { display:block; font-size:11px; color:#94a1ac; line-height:1.6; }
  .overlay { padding:12px; }
  .overlay p { font-size:11px; line-height:1.4; }
  #play { padding:10px; font-size:12px; }
}
@media (max-width:680px) {
  main { width:auto; margin:0; padding:12px max(10px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
  header { margin:8px 0 16px; }
  h1 { font-size:clamp(20px,6vw,30px); letter-spacing:.02em; }
  .eyebrow { font-size:8px; }
  .edition { display:none; }
  .briefing { padding:10px 0 14px; }
  .briefing h2 { font-size:15px; margin:6px 0; }
  .briefing p { font-size:11px; min-height:0; }
  .overline { font-size:9px; letter-spacing:.06em; }
  .toolbar { flex-direction:column; gap:8px; }
  .actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .actions button { min-height:44px; padding:6px 3px; font-size:11px; }
  .instructions { display:none; }
  .play-area:fullscreen, .play-area.focus-view { padding:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); align-content:start; }
}

/* Preserve touch layout if native fullscreen changes the viewport. */

  body.touch-view .play-area { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; align-items:start; }
  body.touch-view .touch-controls { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-column:1; grid-row:2; gap:6px; margin:0; position:static; }
  body.touch-view .touch-controls button { grid-area:auto; min-width:0; width:100%; min-height:64px; }
  body.touch-view .touch-controls [data-control=up] { min-height:64px; border-color:#ad874b; }
  body.touch-view .cabinet { grid-column:1; grid-row:1; min-width:0; width:100%; box-shadow:none; }
  body.touch-view .cabinet canvas { width:100%; }
  body.touch-view .command { display:none; }
  body.touch-view .toolbar { grid-column:1 / -1; grid-row:3; padding:8px 0; }
  body.touch-view .upgrade-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.touch-view .system { padding:9px 6px; gap:3px; }
  body.touch-view .system:nth-child(3) { border-right:0; }
  body.touch-view .system:nth-child(-n+3) { border-bottom:1px solid #2b343d; }
  body.touch-view .system .pips { padding:5px 0; gap:2px; }
  body.touch-view .system>span:first-child { font-size:9px; }
  body.touch-view .upgrade-detail { flex-direction:column; gap:12px; padding:12px 10px; min-height:0; }
  body.touch-view .upgrade-detail p { font-size:11px; line-height:1.5; }
  body.touch-view .quote { min-width:0; align-items:flex-start; gap:6px; }
  body.touch-view .quote strong { font-size:11px; }
  body.touch-view .touch-hint { display:block; font-size:11px; color:#94a1ac; line-height:1.6; }
  body.touch-view .overlay { padding:12px; }
  body.touch-view .overlay p { font-size:11px; line-height:1.4; }
  body.touch-view #play { padding:10px; font-size:12px; }
/* Desktop fullscreen uses the remaining viewport for the game, not a vh width cap. */
@media (min-width:681px) and (pointer:fine) {
  body:not(.touch-view) .play-area:is(:fullscreen,.focus-view) {
    display:grid;
    grid-template-rows:minmax(0,1fr) auto auto;
    gap:8px;
    padding:8px;
    overflow:hidden;
  }
  body:not(.touch-view) .play-area:is(:fullscreen,.focus-view) .cabinet {
    min-width:0;
    min-height:0;
    container-type:size;
    box-shadow:none;
  }
  body:not(.touch-view) .play-area:is(:fullscreen,.focus-view) canvas {
    width:min(100cqw,calc(100cqh * 5 / 3));
    height:auto;
  }
  body:not(.touch-view) .play-area:is(:fullscreen,.focus-view) .command {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,1fr);
    margin:0;
  }
  body:not(.touch-view) .play-area:is(:fullscreen,.focus-view) .system {
    padding:8px;
    gap:3px;
  }
  body:not(.touch-view) .play-area:is(:fullscreen,.focus-view) .upgrade-detail {
    min-height:0;
    padding:8px 12px;
    gap:12px;
    border-top:0;
    border-left:1px solid #2b343d;
  }
  body:not(.touch-view) .play-area:is(:fullscreen,.focus-view) .upgrade-detail p {
    margin:4px 0 0;
  }
  body:not(.touch-view) .play-area:is(:fullscreen,.focus-view) .quote { min-width:150px; }
  body:not(.touch-view) .play-area:is(:fullscreen,.focus-view) .toolbar { padding:0; border:0; }
}