:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #101217;
  color: #e8eaef;
  --muted: #a0a6b2;
  --line: #2b303a;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1080px; margin: auto; padding: 24px; }
header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
h1 { font-size: 18px; font-weight: 650; margin: 0; }
header p { font-size: 13px; color: var(--muted); margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
a:hover, summary:hover { color: #ffdb72; }
button, summary, .repo-link { -webkit-tap-highlight-color: transparent; }
button {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  min-height: 36px;
  padding: 8px 10px;
}
button:hover { background: #272c36; }
button:disabled { opacity: .5; cursor: wait; }
:where(button, a, summary):focus-visible { outline: 2px solid #ffdb72; outline-offset: 3px; }
[hidden] { display: none !important; }
#cabinet {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #050609;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.playfield { position: relative; display: flex; justify-content: center; min-height: 224px; }
canvas {
  display: block;
  width: auto;
  height: min(68svh, 672px);
  max-width: 100%;
  aspect-ratio: 256 / 224;
  object-fit: contain;
  image-rendering: pixelated;
  outline: none;
}
canvas:focus-visible { outline: 1px solid #ffdb72; outline-offset: -2px; }
.play {
  position: absolute;
  top: 72%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 600;
  min-width: 132px;
  min-height: 44px;
  background: #ffdb72;
  color: #151515;
  border-color: #ffdb72;
  box-shadow: 0 2px 16px #0006;
}
.play:hover { background: #ffe8a2; }
.player-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  background: #181b22;
  border-top: 1px solid var(--line);
}
.player-actions { display: flex; gap: 2px; }
.repo-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 8px 10px;
  min-height: 36px;
  font-size: 12px;
  white-space: nowrap;
  text-decoration: none;
}
.repo-link svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
#status { margin: 0; padding: 8px 12px; color: var(--muted); font-size: 11px; }
#status[data-error] { color: #ff9b92; }
.player-options { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 24px; position: relative; }
summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 16px 0; }
summary::marker { font-size: 10px; }
#help { grid-column: 1; grid-row: 1; min-width: 0; }
#help[open] { grid-column: 1 / -1; }
.quick-links { grid-column: 2; grid-row: 1; display: flex; gap: 20px; font-size: 12px; padding: 16px 0; z-index: 1; }
.quick-links a { color: var(--muted); text-decoration: none; }
.quick-links a:hover { color: #ffdb72; }
.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 4px 0 20px; }
.controls p { margin: 0; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.controls strong { font-size: 12px; color: #e8eaef; font-weight: 600; }
kbd { font: inherit; color: #e8eaef; }
#help [data-debug] { color: var(--muted); font-size: 12px; }
.save-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 12px 0; color: var(--muted); font-size: 12px; }
.save-tools button { border-color: var(--line); white-space: nowrap; }
.showcase { border-top: 1px solid var(--line); }
.showcase video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 8px 0 24px; background: #050609; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 24px; }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.gallery figcaption { padding-top: 8px; font-size: 12px; color: var(--muted); }
footer { padding-top: 16px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.phone-help { display: none !important; }
#touch-controls { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#touch-controls button, .touch-dpad { touch-action: none; }
.phone .phone-help { display: flex !important; }
.phone main { padding: 12px max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.phone header { margin-bottom: 12px; }
.phone #cabinet { touch-action: none; }
.phone .playfield { width: 100%; min-height: 0; }
.phone #screen { width: 100%; height: auto; max-height: 56svh; }
.phone .play { z-index: 3; }
.phone #touch-controls {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  grid-template-rows: 44px 144px;
  align-items: center;
  gap: 8px;
  padding: 8px 8px max(10px, env(safe-area-inset-bottom));
  background: #151921;
}
.touch-menu { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: center; }
.touch-menu button { padding: 7px 14px; min-width: 64px; min-height: 44px; font-size: 10px; }
.touch-dpad { width: 144px; height: 144px; display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); border-radius: 50%; background: #202631; justify-self: center; }
.touch-dpad button { padding: 0; font-size: 20px; background: #303847; border: 1px solid #596579; min-width: 44px; min-height: 44px; }
.touch-dpad button:first-child { grid-column: 2; }
.touch-dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.touch-dpad span { grid-column: 2; grid-row: 2; background: #303847; }
.touch-dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }
.touch-dpad button:last-child { grid-column: 2; grid-row: 3; }
.touch-actions { display: grid; grid-template-columns: repeat(3, minmax(44px, 1fr)); gap: 7px; max-width: 228px; width: 100%; justify-self: end; }
.touch-actions button { padding: 0 2px; min-width: 44px; height: 56px; border-radius: 10px; font-size: 9px; color: #e8eaef; background: #293344; border: 1px solid #596579; }
.touch-actions .touch-jump { color: #ffdf85; border-color: #a88948; }
.touch-actions [data-key=KeyS] { color: #e0c6f8; border-color: #856899; }
#touch-controls button.pressed { background: #586981; border-color: #ffdf85; color: #fff; }
.phone .player-actions #pause, .phone .player-actions #fullscreen { display: none; }
.phone .player-toolbar button, .phone .repo-link { min-height: 44px; }
.game-expanded { overflow: hidden; }
#cabinet.expanded, #cabinet:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#cabinet.expanded .playfield, #cabinet:fullscreen .playfield { flex: 1; min-height: 0; }
#cabinet.expanded canvas, #cabinet:fullscreen canvas { width: 100%; height: 100%; max-height: 100%; }
#cabinet.expanded .player-toolbar, #cabinet:fullscreen .player-toolbar { flex: none; }
@media (max-width: 700px) {
  main { padding: 16px 12px; }
  header { flex-direction: column; gap: 3px; }
  h1 { font-size: 16px; }
  header p { font-size: 12px; }
  .controls { grid-template-columns: 1fr; gap: 20px; }
  .quick-links { gap: 12px; }
  .gallery { gap: 12px; }
}
@media (orientation: landscape) {
  .phone main { padding-top: 6px; }
  .phone header { display: none; }
  .phone #cabinet {
    display: grid;
    grid-template-columns: minmax(146px, 1fr) auto minmax(174px, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: calc(100svh - 12px);
    min-height: 268px;
    padding: 0 max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left));
  }
  .phone .playfield { grid-column: 2; grid-row: 1; height: 100%; min-width: 0; }
  .phone #screen { width: auto; height: 100%; max-width: calc(100vw - 356px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-height: 100%; }
  .phone #touch-controls { display: contents; }
  .phone .touch-dpad { grid-column: 1; grid-row: 1; align-self: center; transform: translateY(15px); }
  .phone .touch-menu { position: absolute; left: max(8px, env(safe-area-inset-left)); top: 8px; gap: 4px; max-width: 142px; flex-wrap: wrap; }
  .phone .touch-menu button { font-size: 9px; padding: 6px; min-width: 60px; }
  .phone .touch-actions { grid-column: 3; grid-row: 1; padding-left: 8px; align-self: center; }
  .phone .player-toolbar { grid-column: 1 / -1; grid-row: 2; margin: 0 -6px; }
  .phone #status { grid-column: 1 / -1; }
  .phone .play { top: 50%; font-size: 14px; min-width: 100px; }
  .phone #cabinet.expanded, .phone #cabinet:fullscreen { height: 100dvh; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .phone #cabinet.expanded canvas, .phone #cabinet:fullscreen canvas { width: auto; }
}
@media (orientation: portrait) {
  .phone #cabinet.expanded .playfield, .phone #cabinet:fullscreen .playfield { flex: 1 1 0; overflow: hidden; }
  .phone #cabinet.expanded #touch-controls, .phone #cabinet:fullscreen #touch-controls { flex: none; }
}