:root {
    --bg: #000000;
    --red: #e3001b;
    --red-hi: #ff2a3d;
    --red-deep: #6b000f;
    --ink: #f2f2f2;
    --muted: #8c8c8c;
    --u: 1;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* The arcade cabinet is black in every theme on purpose. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --bg: #000000; --ink: #f2f2f2; }
  }
  :root[data-theme="dark"] { --bg: #000000; --ink: #f2f2f2; }
  *, *::before, *::after { box-sizing: inherit; }
  html { height: 100%; scroll-padding-top: env(safe-area-inset-top, 0px); }
  body {
    height: 100%; margin: 0; background: var(--bg); color: var(--ink);
    font-family: "Press Start 2P", "Courier New", monospace;
    overflow: hidden; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  }
  #app { height: 100%; display: flex; flex-direction: column; align-items: center; }
  #stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 8px; }
  #screen { position: relative; box-shadow: 0 0 0 2px var(--red-deep), 0 0 40px rgba(227, 0, 27, 0.25); }
  #screen::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.22) 3px);
    mix-blend-mode: multiply;
  }
  canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

  /* Score entry and prize draw */
  #entry {
    position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.82); overflow-y: auto; padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  #entry[hidden] { display: none; }
  .panel {
    width: min(100%, 500px); margin: auto; padding: 22px 22px 18px; background: #000; text-align: left;
    border: 3px solid var(--red); box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--red-deep), 0 0 50px rgba(227,0,27,.3);
  }
  .panel h2 { margin: 0 0 10px; font-size: 18px; color: var(--red-hi); font-weight: 400; line-height: 1.4; text-align: center; }
  .panel .sc { margin: 0 0 14px; font-size: 22px; color: var(--ink); text-align: center; }
  .panel .lead { margin: 0 0 18px; font-size: 10px; line-height: 1.8; color: var(--ink); text-align: center; }
  .field { margin-bottom: 14px; min-width: 0; }
  .row { display: flex; gap: 12px; }
  .row .field { flex: 1 1 0; }
  .panel label { display: block; margin-bottom: 7px; font-size: 9px; color: var(--red-hi); line-height: 1.5; }
  .panel label span { color: var(--muted); }
  .panel input, .panel select {
    width: 100%; font: inherit; font-size: 13px; color: var(--ink); background: #140003;
    border: 2px solid var(--red-deep); border-radius: 0; padding: 11px 10px; caret-color: var(--red-hi);
    -webkit-user-select: text; user-select: text;
  }
  #nameInput { text-transform: uppercase; letter-spacing: 0.06em; }
  .panel select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 32px;
    background-image: linear-gradient(45deg, transparent 50%, var(--red-hi) 50%), linear-gradient(135deg, var(--red-hi) 50%, transparent 50%);
    background-position: calc(100% - 17px) 55%, calc(100% - 11px) 55%; background-size: 6px 6px; background-repeat: no-repeat;
  }
  .panel select option { background: #000; color: var(--ink); }
  .panel input:focus, .panel select:focus { outline: none; border-color: var(--red-hi); }
  .panel .bad { border-color: var(--red-hi); background-color: #2a0006; }
  .err { min-height: 1em; margin: 2px 0 12px; font-size: 9px; line-height: 1.6; color: #ffb020; }
  .panel button {
    display: block; width: 100%; font: inherit; font-size: 12px; cursor: pointer; border: 0; border-radius: 0; padding: 14px 12px;
  }
  #saveBtn { color: #000; background: var(--red-hi); box-shadow: 4px 4px 0 var(--red-deep); }
  #saveBtn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--red-deep); }
  #replayBtn { margin-top: 14px; color: var(--ink); background: transparent; border: 2px solid var(--red-deep); font-size: 10px; }
  #replayBtn:hover { border-color: var(--red-hi); }
  .panel button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .fine { margin: 14px 0 0; font-size: 8px; line-height: 1.8; color: var(--muted); text-align: center; }
  @media (max-width: 420px) { .row { flex-direction: column; gap: 0; } .panel { padding: 18px 14px 14px; } }

  .check { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 14px; cursor: pointer; position: relative; }
  .panel label.check { display: flex; margin-bottom: 14px; color: var(--ink); font-size: 10px; line-height: 1.7; }
  .check input { position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
  .check .box { flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid var(--red-deep); background: #140003; position: relative; }
  .check input:checked + .box { background: var(--red-hi); border-color: var(--red-hi); }
  .check input:checked + .box::after { content: ""; position: absolute; left: 6px; top: 1px; width: 5px; height: 11px; border: solid #000; border-width: 0 3px 3px 0; transform: rotate(45deg); }
  .check input:focus-visible + .box { outline: 2px solid var(--ink); outline-offset: 2px; }
  .check.bad .box { border-color: var(--red-hi); background: #2a0006; }
  .check .txt { padding-top: 4px; }
  .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
  #drawFields[hidden] { display: none; }
  .fine a { color: var(--red-hi); }
  #saveBtn[disabled] { opacity: 0.6; cursor: wait; }
  #saveBtn { font-size: 11px; line-height: 1.6; }
  .terms {
    display: block; margin: 0 0 16px; padding: 12px; text-align: center; text-decoration: none;
    font-size: 10px; line-height: 1.5; color: var(--ink); border: 2px dashed var(--red-deep);
  }
  .terms::after { content: " \2197"; font-family: system-ui, sans-serif; }
  .terms:hover { border-color: var(--red-hi); color: var(--red-hi); }
  .terms:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

  /* Touch controls */
  #touch { display: none; width: 100%; max-width: 640px; gap: 10px; padding: 6px 12px 12px; flex: 0 0 auto; }
  #touch.on { display: flex; }
  #touch button {
    flex: 1 1 0; height: 68px; border: 2px solid var(--red-deep); background: #120003; color: var(--red-hi);
    font: inherit; font-size: 12px; border-radius: 0; touch-action: none; display: flex; align-items: center; justify-content: center;
  }
  #touch button.fire { flex: 1.6 1 0; background: var(--red); color: #000; border-color: var(--red-hi); }
  #touch button.small { flex: 0.6 1 0; color: var(--muted); }
  #touch button.down { filter: brightness(1.5); }
  #touch svg { width: 26px; height: 26px; fill: currentColor; }