#sheet-arcade {
  --arcade-cream: #f4ead7;
  --arcade-mint: #9ad6bf;
  --arcade-amber: #f3c779;
  --arcade-navy: #121b25;
}
.arcade-intro {
  margin-top: -4px;
}
.arcade-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.arcade-choice {
  min-height: 92px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
  padding: 14px;
  text-align: left;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
}
.arcade-choice strong {
  color: var(--arcade-cream);
  font:
    700 16px ui-monospace,
    "Cascadia Mono",
    monospace;
}
.arcade-choice span {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.4;
}
.arcade-choice[aria-pressed="true"] {
  border-color: var(--arcade-amber);
  box-shadow: inset 0 0 0 1px #f3c77955;
  background: #25323b;
}
.arcade-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.arcade-stat {
  padding: 7px 5px;
  background: var(--arcade-navy);
  border: 1px solid #344351;
  border-radius: 6px;
  text-align: center;
}
.arcade-stat small {
  display: block;
  color: #8fa0ad;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.arcade-stat output {
  display: block;
  margin-top: 2px;
  color: var(--arcade-cream);
  font:
    700 15px ui-monospace,
    "Cascadia Mono",
    monospace;
}
.arcade-stage {
  overflow: hidden;
  width: 100%;
  border: 1px solid #3b4b58;
  border-radius: 8px;
  background: var(--arcade-navy);
  box-shadow: inset 0 0 32px #060a0f88;
}
#arcade-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  image-rendering: pixelated;
  touch-action: none;
}
#arcade-canvas:focus-visible,
.arcade-choice:focus-visible {
  outline: 3px solid var(--arcade-amber);
  outline-offset: 2px;
}
#arcade-duck-stage {
  min-height: min(70dvh, 620px);
  display: grid;
  place-items: center;
}
#arcade-duck-frame {
  display: block;
  width: 100%;
  height: min(70dvh, 620px);
  border: 0;
  background: #313942;
}
#sheet-arcade[data-game="picker"] .arcade-play,
#sheet-arcade[data-game="picker"] .arcade-controls,
#sheet-arcade:not([data-game="picker"]) .arcade-picker,
#sheet-arcade:not([data-game="picker"]) .arcade-intro,
#sheet-arcade:not([data-game="breakout"]):not([data-game="snake"])
  #arcade-breakout-stage,
#sheet-arcade:not([data-game="duck-hunt"]) #arcade-duck-stage,
#sheet-arcade:not([data-game="breakout"]):not([data-game="snake"]) .arcade-hud,
#sheet-arcade:not([data-game="snake"]) #arcade-snake-controls {
  display: none;
}
#arcade-snake-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(44px, 64px));
  gap: 6px;
  justify-content: center;
  margin: 10px auto;
}
#arcade-snake-controls .btn {
  min-height: 44px;
  touch-action: manipulation;
}
#arcade-snake-controls [data-snake-turn="up"] {
  grid-column: 2;
}
#arcade-snake-controls [data-snake-turn="left"] {
  grid-column: 1;
  grid-row: 2;
}
#arcade-snake-controls [data-snake-turn="down"] {
  grid-column: 2;
  grid-row: 2;
}
#arcade-snake-controls [data-snake-turn="right"] {
  grid-column: 3;
  grid-row: 2;
}
.arcade-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.arcade-controls .btn {
  min-height: 44px;
}
#arcade-start,
#arcade-duck-start {
  border-color: var(--arcade-mint);
}
#arcade-status {
  min-height: 2.8em;
  margin: 8px 0 0;
  color: var(--arcade-cream);
}
#arcade-motion-note {
  margin-top: 6px;
}
.arcade-attribution {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.arcade-attribution a {
  color: var(--gold);
}
@media (max-width: 560px) {
  .arcade-picker {
    grid-template-columns: 1fr;
  }
  .arcade-hud {
    grid-template-columns: repeat(2, 1fr);
  }
  #arcade-duck-stage,
  #arcade-duck-frame {
    min-height: 58dvh;
    height: 58dvh;
  }
  .arcade-controls .btn {
    flex: 1 1 calc(50% - 4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-choice {
    scroll-behavior: auto;
  }
}