:root {
  color-scheme: dark;
  background: #06070e;
  color: #f5efd9;
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #06070e; }

/* p5.js backdrop: a low-resolution canvas upscaled with crisp pixels behind the cabinet. */
.backdrop-canvas {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
  transition: filter 480ms steps(4);
}
.backdrop-canvas[data-mood="paused"] { filter: brightness(.5); }
.backdrop-canvas[data-mood="over"] { filter: grayscale(.85) brightness(.55); }
.machine { width: 100%; height: 100%; height: 100dvh; padding: 12px; }
.arcade-frame { width: 100%; height: 100%; display: grid; place-items: center; }
.arcade-frame:fullscreen { background: #06070e; padding: 12px; }

/* The cabinet is a grid whose arrangement controls.js picks: strip (keyboard), portrait or landscape (touch). */
.cabinet {
  --px: 2; --cpx: 2; --fpx: 2;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "screen screen" "actions bar";
  align-items: center;
  gap: 10px 12px;
  max-width: 100%;
  position: relative;
  z-index: 1;
}
.screen-frame {
  grid-area: screen;
  justify-self: center;
  border: var(--bezel, 12px) solid #202943;
  border-image-slice: 6;
  border-image-width: var(--bezel, 12px);
  border-image-repeat: round;
  image-rendering: pixelated;
  filter: drop-shadow(0 14px 40px #0009);
}
/* With a backdrop, the ring is transparent and the backdrop paints a bezel in its own style. */
.screen-frame.is-themed { border-color: transparent; border-image: none; filter: none; }

/* Control-panel plates: dark panels with a ring of pellet dots, like the cabinet's control deck. */
.plate {
  border: calc(6px * var(--fpx)) solid #0b0e1a;
  border-image: var(--plate) 6 fill / calc(6px * var(--fpx)) round;
  padding: calc(var(--px) * 2px);
  image-rendering: pixelated;
}

.backdrop-picker {
  position: fixed;
  z-index: 5;
  display: grid;
  justify-items: start;
  gap: calc(var(--px) * 2px);
  filter: drop-shadow(0 10px 24px #000c);
}
.backdrop-picker[hidden] { display: none; }
.picker-row { display: flex; gap: calc(var(--px) * 2px); }
#screen {
  display: block;
  width: 224px;
  height: 288px;
  aspect-ratio: 7 / 9;
  background: #000;
  image-rendering: pixelated;
  outline: none;
}
#screen:focus-visible { outline: 1px solid #748ac7; outline-offset: 2px; }

/* Art-pixel canvases: --w/--h are authored pixels, --u the integer CSS size of one. */
.pix {
  --u: var(--px);
  display: block;
  width: calc(var(--w) * var(--u) * 1px);
  height: calc(var(--h) * var(--u) * 1px);
  image-rendering: pixelated;
}
.cap, .lcd { --u: var(--cpx); }

.pad {
  grid-area: pad;
  display: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  filter: drop-shadow(0 calc(var(--px) * 2px) 0 #0006);
}
.actions {
  grid-area: actions;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--px) * 3px);
}
.bezel-controls {
  grid-area: bar;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 3px);
  min-width: 0;
}
#level { display: block; flex: none; }

/* Pixel buttons */
.pix-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 1.5px);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.pix-btn:focus-visible { outline: 2px dotted var(--accent, #ffe52c); outline-offset: 3px; }
.pix-btn:disabled { cursor: default; }
.pix-btn .face { filter: drop-shadow(0 calc(var(--px) * 1px) 0 #0008); }
@media (hover: hover) {
  .pix-btn:not(:disabled):hover .face { filter: brightness(1.16) drop-shadow(0 calc(var(--px) * 1px) 0 #0008); }
}
.pix-btn.is-pop .face { animation: pix-pop 180ms steps(3, jump-none); }
.pix-btn.is-attract .face { animation: pix-coin 1.2s steps(1) infinite; }
@keyframes pix-pop {
  0% { transform: translateY(calc(var(--px) * 1px)); }
  50% { transform: translateY(calc(var(--px) * -1px)); }
  100% { transform: none; }
}
@keyframes pix-coin {
  50% { filter: brightness(1.28) drop-shadow(0 0 calc(var(--px) * 2px) color-mix(in srgb, var(--accent, #ffe52c) 45%, transparent)); }
}
.round .cap { margin-top: calc(var(--px) * 0.5px); }
/* Paused or game over: every control dims except START (RESUME / AGAIN) and MENU, the ways onward. */
.cabinet:is(.is-paused, .is-over) :is(.pad, #pause, .bezel-controls > :not(#menu)) { filter: brightness(.45) saturate(.7); transition: filter 240ms steps(3); }
.cabinet[data-layout="strip"] .round .cap { display: none; }
/* The SKILL button is for touch players; keyboards and pads have their own action keys. */
.cabinet[data-layout="strip"] #action { display: none; }
#action[disabled] { visibility: hidden; }
#pause { margin-top: calc(var(--px) * 7px); }
.cabinet[data-layout="strip"] #pause { margin-top: 0; }


/* Touch: handheld under the screen */
.cabinet[data-layout="portrait"] {
  grid-template-areas: "screen screen" "bar bar" "pad actions";
  row-gap: calc(var(--px) * 4px);
}
.cabinet[data-layout="portrait"] .bezel-controls { justify-self: stretch; justify-content: space-between; }
.cabinet[data-layout="portrait"] #level { margin-right: auto; }
.cabinet[data-layout="portrait"] .pad { justify-self: start; margin-left: calc(var(--px) * 2px); }
.cabinet[data-layout="portrait"] .actions { justify-self: end; margin-right: calc(var(--px) * 2px); }

/* Touch: side panels like a control deck */
.cabinet[data-layout="landscape"] {
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr auto 1fr;
  /* The settings keys stack directly above PAUSE and START, the pair centred on the right. */
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "pad screen ." "pad screen bar" "pad screen actions" "pad screen .";
  row-gap: calc(var(--px) * 5px);
  column-gap: calc(var(--px) * 6px);
}
/* Centre the D-pad in the whole left region, where the thumb rests. */
.cabinet[data-layout="landscape"] .pad { justify-self: center; }
.cabinet[data-layout="landscape"] .bezel-controls {
  align-self: end;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-items: center;
}
.cabinet[data-layout="landscape"] #level { grid-column: 1 / -1; }
.cabinet[data-layout="landscape"] .actions { align-self: start; justify-self: center; }

.cabinet:not([data-layout="strip"]) .pad { display: block; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 420px), (max-height: 500px) {
  .machine, .arcade-frame:fullscreen { padding: 6px; }
  .cabinet { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pix-btn.is-pop .face, .pix-btn.is-attract .face { animation: none; }
}

/* Boot screen: gold covers split apart once the game is ready (see loader.js). */
.loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; }
.loader-cover {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    radial-gradient(circle, #f4b91c 1.5px, transparent 2px) 0 0 / 16px 16px,
    #ffe52c;
  /* loader.js sets the timing from boot-timeline.js so the covers finish with the boot sound. */
  transition: transform var(--cover-time, 1000ms) cubic-bezier(.6, 0, .3, 1) var(--cover-delay, 300ms);
}
.loader-cover.left { left: 0; box-shadow: inset -6px 0 0 #b87313, inset -12px 0 0 #f4b91c; }
.loader-cover.right { right: 0; box-shadow: inset 6px 0 0 #b87313, inset 12px 0 0 #f4b91c; }
.loader-panel {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px;
  width: min(92vw, 480px); padding: 18px 16px 14px;
  background: #000; border: 4px solid #284bff; border-radius: 10px;
  box-shadow: 0 0 0 4px #000, 0 0 0 6px #284bff, 8px 10px 0 6px #0006;
  transition: opacity 250ms steps(3);
}
.loader-title { font: 40px/1 "AstraTitle", ui-monospace, monospace; color: #ffe52c; letter-spacing: 1px; }
.loader-bar { width: 100%; max-width: 448px; height: auto; aspect-ratio: 448 / 48; image-rendering: pixelated; }
.loader-label { font: 700 13px/1 ui-monospace, "Cascadia Mono", monospace; color: #fff6df; letter-spacing: 2px; white-space: pre; }
.loader-hint { font: 11px/1 ui-monospace, "Cascadia Mono", monospace; color: #7689cb; letter-spacing: 1px; }
.loader-dedication { font: 700 11px/1.3 ui-monospace, "Cascadia Mono", monospace; color: #ffc27a; letter-spacing: 1px; text-align: center; margin-top: 6px; }
.loader-disclaimer { font: 9px/1.3 ui-monospace, "Cascadia Mono", monospace; color: #6f7aa3; letter-spacing: 1px; text-align: center; }
.loader-disclaimer span { display: inline-block; }
.loader.is-done { pointer-events: none; }
.loader.is-done .loader-panel { opacity: 0; }
.loader.is-done .loader-cover.left { transform: translateX(-101%); }
.loader.is-done .loader-cover.right { transform: translateX(101%); }
@media (max-width: 420px) { .loader-title { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) {
  .loader-cover { transition: none; }
  .loader { transition: opacity var(--cover-time, 300ms) linear var(--cover-delay, 0ms); }
  .loader.is-done { opacity: 0; }
}