* { box-sizing: border-box; }
body { font-family: var(--font-sans); }
main { max-width: 1120px; margin: auto; padding: 24px; }
h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 400; letter-spacing: -.04em; }
.intro { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.intro > p, .footnote { font-size: .8rem; color: var(--muted); line-height: 1.6; }
.eyebrow { font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .15em; }
.field-wrap { width: 100%; }
#stage {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  width: 100%;
  background: #141820;
  border: 1px solid #677181;
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
}
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.hud {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  top: max(12px, env(safe-area-inset-top));
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  max-width: calc(100% - 100px);
  margin: 0;
  padding: 7px 10px;
  color: #fff8e9;
  background: #202738e6;
  border-radius: 6px;
  font: 12px var(--font-mono);
  pointer-events: none;
}
.hud b { font-variant-numeric: tabular-nums; font-weight: 500; }
button {
  cursor: pointer;
  font: inherit;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--foreground);
}
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, #stage:focus-visible {
  outline: 3px solid #d49b51;
  outline-offset: 3px;
}
#pause {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  min-width: 64px;
  z-index: 3;
}
#overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  padding: 20px;
  overflow: auto;
  text-align: center;
  color: #fff8e9;
  background: #202738ed;
}
#overlay[hidden] { display: none; }
#overlay h2 { margin: 8px 0; font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 400; }
#detail { max-width: 490px; line-height: 1.6; font-size: .9rem; margin: 4px 0 16px; }
.menu-help { max-width: 510px; margin: 6px 0; font-size: .75rem; line-height: 1.5; color: #cbd6db; }
#launch { background: #f5deb3; color: #202738; border-color: #f5deb3; margin-bottom: 8px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; font-size: .8rem; }
.toolbar label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.toolbar input { width: 100px; accent-color: #96734c; }
.toolbar a { color: var(--muted); padding: 12px; }
/* Touch controller: a classic 8-bit pad drawn only in CSS. It sits outside #stage, so every rule
   below is scoped to #field and shown only when #stage has .touch-device. */
.touch-controls { display: none; }
#field:has(#stage.touch-device) .touch-controls {
  display: grid;
  position: relative;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 24px max(12px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  --dpad: 80px; --btn: 48px; --arm: 26px;
  color: #3a3a3a;
  background: #c9c9c9;
  border: 3px solid #8c8c8c;
  border-radius: 22px 22px 40px 40px;
  box-shadow: inset 0 -5px 0 #b3b3b3, 0 3px 0 #6e6e6e;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Black inset faceplate band across the top of the body. */
#field:has(#stage.touch-device) .touch-controls::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 9px; height: 11px;
  border-radius: 6px;
  background: #0d0d0d;
  box-shadow: inset 0 2px 3px #000, 0 1px 0 #f4f4f4;
}
/* Every control keeps a box of at least 44 by 44 px; visible shapes are drawn inside it. */
#field:has(#stage.touch-device) .touch-controls button {
  position: relative;
  display: block;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#field:has(#stage.touch-device) .touch-controls button:active { filter: brightness(.7); }
/* D-pad: black plus from two gradient bars with a small centre dimple. */
#field:has(#stage.touch-device) .touch-controls #move-pad {
  width: var(--dpad); height: var(--dpad);
  background:
    radial-gradient(circle, #3a3a3a 0 4px, transparent 5px) center / 100% 100% no-repeat,
    linear-gradient(#141414, #141414) center / var(--arm) 100% no-repeat,
    linear-gradient(#141414, #141414) center / 100% var(--arm) no-repeat;
}
/* B and A: round red buttons. */
#field:has(#stage.touch-device) .touch-controls #fire,
#field:has(#stage.touch-device) .touch-controls #jump {
  width: var(--btn); height: var(--btn);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #f06a5f, #cf2a22 58%, #991a14);
  box-shadow: 0 3px 0 #6b1410;
}
/* SELECT and START: dark grey pills, each in a 44 px box. */
#field:has(#stage.touch-device) .touch-controls #lock,
#field:has(#stage.touch-device) .touch-controls #start { width: 44px; height: 44px; }
#field:has(#stage.touch-device) .touch-controls #lock::before,
#field:has(#stage.touch-device) .touch-controls #start::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 11px;
  margin: -5.5px 0 0 -17px;
  border-radius: 6px;
  background: linear-gradient(#5e5e5e, #2b2b2b);
  box-shadow: 0 1px 0 #8f8f8f;
}
#field:has(#stage.touch-device) .touch-controls .center { display: flex; justify-self: center; }
#field:has(#stage.touch-device) .touch-controls .sel { display: grid; justify-items: center; gap: 2px; }
#field:has(#stage.touch-device) .touch-controls .ab { display: flex; align-items: center; gap: 8px; }
#field:has(#stage.touch-device) .touch-controls .ab-item { display: grid; justify-items: center; gap: 4px; }
#field:has(#stage.touch-device) .touch-controls .sel span { font: 700 10px/1.1 var(--font-mono); letter-spacing: .04em; color: #a10f16; }
#field:has(#stage.touch-device) .touch-controls .letter { font: 700 13px/1 var(--font-mono); color: #a10f16; }
/* Landscape touch: no body background. The pieces float at the screen edges (D-pad left, B and A right)
   with SELECT and START small at the bottom centre. Only the buttons take pointer input. */
#field:has(#stage.touch-device:not(.portrait)) .touch-controls {
  height: 124px;
  margin-top: -124px;
  padding: 6px max(10px, env(safe-area-inset-right, 0px)) 8px max(10px, env(safe-area-inset-left, 0px));
  --dpad: 76px; --btn: 46px; --arm: 24px;
  align-items: end;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}
#field:has(#stage.touch-device:not(.portrait)) .touch-controls::before { content: none; }
#field:has(#stage.touch-device:not(.portrait)) .touch-controls button { pointer-events: auto; opacity: .55; }
#field:has(#stage.touch-device:not(.portrait)) .touch-controls button:active { opacity: .9; filter: none; }
#field:has(#stage.touch-device:not(.portrait)) .touch-controls .sel span,
#field:has(#stage.touch-device:not(.portrait)) .touch-controls .letter { color: #ffb3a8; text-shadow: 0 0 3px #000; opacity: .55; }
/* Portrait touch: the canvas keeps the 256:240 shape and the controller sits under it. */
#stage.portrait { aspect-ratio: 256 / 240; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.site-foot { margin-top: 24px; }
.field-wrap:is(:fullscreen, :-webkit-full-screen, .immersive) {
  background: var(--background);
  width: 100%;
  height: 100dvh;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
}
.field-wrap:is(:fullscreen, :-webkit-full-screen, .immersive) #stage { border-radius: 0; flex-shrink: 0; max-height: calc(100dvh - 56px); }
.field-wrap.immersive { position: fixed; inset: 0; z-index: 9999; }
body:has(.immersive) { overflow: hidden; }
.dark #stage { border-color: #65707e; }
@media (max-height: 450px) and (orientation: landscape) {
  main { padding: 0; max-width: none; }
  .site-head, .site-foot, .intro, .footnote { display: none; }
  #stage { height: calc(100dvh - 52px); min-height: 300px; border-radius: 0; }
  .toolbar { margin: 0; gap: 5px; min-height: 52px; }
  .toolbar button { padding: 4px 8px; }
  #overlay { padding: 10px; }
  #overlay .eyebrow { margin: 0; }
  #detail { font-size: .8rem; margin-bottom: 8px; }
  .menu-help { margin: 3px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Menus and letterboxing share the shell; play pixels keep their fixed palette. */
#quit[hidden] { display: none; }
#overlay { background: #101c28f5; }
#overlay h2 { font-family: var(--font-mono); font-weight: 700; }

#cheats-tag { position: absolute; left: 12px; top: 32px; color: #fff8e9; background: #202738; padding: 4px 8px; font-size: 12px; }
#cheats-panel[hidden], #initials[hidden], #cheats-tag[hidden], #launch[hidden], #cheats-open[hidden] { display: none; }
#scores { font: 12px var(--font-mono); max-width: 320px; width: 100%; }
#score-list { text-align: left; columns: 2; padding-left: 30px; }
.new-score { color: #f5deb3; font-weight: bold; }
#initial-slots { display: flex; justify-content: center; gap: 8px; }
.initial-slot { display: flex; flex-direction: column; align-items: center; }
.initial-slot.active { outline: 2px solid #f5deb3; }
.initial-slot output { font: 20px var(--font-mono); padding: 4px; }

/* Arcade shell: screen visibility is owned by outpost-menu. */
#overlay { background: linear-gradient(#080c20f7, #101c28fa); font-family: var(--font-mono); gap: 5px; }
#overlay [hidden] { display: none !important; }
#title-art { width: min(70%, 410px); color: #f8e8a0; }
#title-logo { display: block; width: 100%; max-height: 185px; filter: drop-shadow(4px 5px #a83838); }
.tagline, .press-start { font-size: clamp(10px, 1.4vw, 14px); margin: 10px 0; }
.press-start { animation: start-blink 1.2s steps(1) infinite; color: #48b8b0; }
@keyframes start-blink { 50% { opacity: 0; } }
.motion-off .press-start, [data-motion="off"] .press-start { animation: none; }
#menu-actions { display: grid; min-width: 180px; gap: 2px; }
#overlay button { border-radius: 0; font: bold 12px var(--font-mono); color: #f8e8a0; background: #101c28; border: 1px solid #586878; }
#menu-actions button { position: relative; min-height: 32px; padding: 4px 22px; border-color: transparent; background: transparent; }
#overlay button[data-selected="true"]::before { content: "\25b6"; position: absolute; left: 5px; color: #48b8b0; }
#overlay button[data-selected="true"] { outline: 2px solid #48b8b0; outline-offset: -2px; }
#overlay h2 { color: #f8e8a0; text-transform: uppercase; margin: 0 0 4px; }
#detail { margin: 2px 0 6px; line-height: 1.25; }
#cheats-panel { width: min(100%, 720px); }
#cheats-grid { display: grid; grid-template-columns: 1.35fr 1fr .65fr; gap: 12px; }
.cheat-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 5px; }
.cheat-group h3 { grid-column: 1 / -1; margin: 0 0 4px; color: #48b8b0; font-size: 12px; }
#cheats-grid button { position: relative; min-height: 44px; width: 100%; padding: 5px 14px; }
#cheats-grid button[aria-pressed="true"]::after { content: "\2713 ON"; display: block; color: #b8e888; font-size: 9px; }
#cheats-grid button.pressed, #cheats-grid button:active { background: #684830; transform: translateY(1px); }
#cheats-grid button.flash { box-shadow: inset 0 0 0 3px #f8e8a0; }
#cheat-description, #cheat-status, .menu-note { font-size: 11px; line-height: 1.3; margin: 5px 0; }
#cheat-description, #cheat-status { min-height: 15px; }
#cheat-status { color: #b8e888; }
#scores { max-width: 600px; }
#score-list { max-height: 130px; }
#controls { width: min(100%, 720px); }
.key-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; font-size: 11px; }
.key-columns h3 { margin: 3px 0; color: #48b8b0; font-size: 12px; }
.key-columns dl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin: 5px 0; }
.key-columns dd { margin: 0; color: #cbd6db; }
.touch-keys { display: none; }
.touch-device .touch-keys { display: block; }
@media (max-height: 450px) and (orientation: landscape) {
  #title-logo { max-height: 100px; }
  .tagline, .press-start { margin: 5px 0; }
  #overlay { gap: 3px; }
  #overlay h2 { font-size: 18px; }
  #cheats-grid { gap: 10px; }
  .cheat-group { gap: 3px; }
  .cheat-group h3 { margin-bottom: 0; }
  #cheats-grid button { padding: 3px 12px; min-height: 36px; }
  #cheats-panel > p { margin: 3px 0; min-height: 12px; font-size: 10px; line-height: 1.2; }
  .key-columns { font-size: 10px; }
  .key-columns dl { gap: 2px 6px; }
}
@media (prefers-reduced-motion: reduce) { .press-start { animation: none; } }