/* ============================================================
   arcade.css, retro arcade widgets for the Joy-Con style control layer
   ============================================================
   Self-contained: it carries its own tokens (--arcade-*) so it works on any page
   and does not depend on base.css. High-contrast focus ring (white outline over a
   dark inner ring over a bright fill, readable on every key colour), chunky pixel
   keys, a pixel-style font with a safe fallback. No images, no external requests.

   Font: 'Press Start 2P' is used only if it is installed locally (local() source,
   no network, no 404 noise); otherwise the stack falls to a bold monospace with
   font smoothing off and letter spacing, which still reads as chunky pixels. To
   ship the real face, drop an OFL woff2 into the repo and add one @font-face. */

@font-face {
  font-family: 'Arcade Pixel';
  src: local('Press Start 2P'), local('PressStart2P-Regular'), local('VT323'), local('Silkscreen');
  font-display: swap;
}

:root {
  --arcade-font: 'Arcade Pixel', ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
  --arcade-bg: #14122b;
  --arcade-panel: #221f45;
  --arcade-key: #3a3670;
  --arcade-key-edge: #0c0b1f;
  --arcade-ink: #f4f1ff;
  --arcade-dim: #8a85c2;
  --arcade-ok: #1fbf6a;
  --arcade-util: #c2410c;
  --arcade-focus: #ffe14d;
  --arcade-focus-ring: #ffffff;
  --arcade-px: 4px;
}

/* Child lock: nothing selectable, no scroll chaining, no touch callouts. */
.arcade-locked,
.arcade-locked body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  cursor: none;
}

.arcade-widget,
.arcade-touchpad,
.arcade-overlay {
  font-family: var(--arcade-font);
  font-weight: 700;
  letter-spacing: 0.06em;
  -webkit-font-smoothing: none;
  font-smooth: never;
  color: var(--arcade-ink);
  image-rendering: pixelated;
}

.arcade-widget {
  display: inline-flex;
  flex-direction: column;
  gap: calc(var(--arcade-px) * 3);
  padding: calc(var(--arcade-px) * 3);
  background: var(--arcade-panel);
  border: var(--arcade-px) solid var(--arcade-key-edge);
  box-shadow: 0 0 0 var(--arcade-px) var(--arcade-key);
}

/* The big answer / name box. */
.arcade-display {
  min-height: 3rem;
  padding: 0.4rem 0.7rem;
  font-size: 1.6rem;
  line-height: 1.2;
  text-align: right;
  background: var(--arcade-bg);
  color: var(--arcade-ok);
  border: var(--arcade-px) solid var(--arcade-key-edge);
  overflow-wrap: anywhere;
  white-space: pre;
}
.arcade-display.is-empty { color: var(--arcade-dim); }
.arcade-name { text-align: left; letter-spacing: 0.18em; }

/* Key grids. Cells are placed by explicit grid-row / grid-column from JS. */
.arcade-grid {
  display: grid;
  gap: calc(var(--arcade-px) * 2);
}
.arcade-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(3.4rem, 1fr)); }
.arcade-grid[data-cols="7"] { grid-template-columns: repeat(7, minmax(2.6rem, 1fr)); }

.arcade-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: 0.3rem;
  font-size: 1.15rem;
  text-align: center;
  background: var(--arcade-key);
  color: var(--arcade-ink);
  border: var(--arcade-px) solid var(--arcade-key-edge);
  box-shadow: 0 var(--arcade-px) 0 var(--arcade-key-edge);
}
.arcade-letter-grid .arcade-key { font-size: 1rem; min-height: 2.8rem; }
.arcade-key-ok { background: var(--arcade-ok); color: #04210f; }
.arcade-key-util { background: var(--arcade-util); color: #fff; font-size: 0.8rem; }
.arcade-key-symbol { background: #0e7490; color: #fff; }

/* The focus ring: yellow fill, white outer ring, dark inner ring. Three cues
   (hue, brightness, outline), so it reads for colour-blind children and on every
   key colour. The key lifts by one pixel step as well. */
.is-arcade-focus {
  background: var(--arcade-focus);
  color: #1a1400;
  outline: var(--arcade-px) solid var(--arcade-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 calc(var(--arcade-px) + 2px) var(--arcade-key-edge);
  position: relative;
  z-index: 1;
}

/* Multiple choice. */
.arcade-choices { align-items: stretch; min-width: 16rem; }
.arcade-choices-column { display: flex; flex-direction: column; }
.arcade-choices-grid { display: grid; grid-template-columns: 1fr 1fr; }
.arcade-choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0.4rem 0.8rem;
  font-size: 1.05rem;
  background: var(--arcade-key);
  border: var(--arcade-px) solid var(--arcade-key-edge);
  box-shadow: 0 var(--arcade-px) 0 var(--arcade-key-edge);
}
/* .arcade-choice sets its own background after the shared focus rule, so the focused choice kept the dark key fill under the dark focus ink
   (1.7:1, owner report 08/11/26). The focused choice uses the one focus treatment: yellow fill, dark ink. */
.arcade-choice.is-arcade-focus { background: var(--arcade-focus); color: #1a1400; }
.arcade-choice-mark { visibility: hidden; }
.arcade-choice.is-arcade-focus .arcade-choice-mark { visibility: visible; }
.arcade-choice-text { overflow-wrap: anywhere; }

/* The on-screen Joy-Cons: d-pad and Capture on the left, the X Y A B diamond and Home on the right. Shown on every page. */
.arcade-touchpad {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  max-width: 30rem;
  box-sizing: border-box;
  padding: 0.6rem 1.2rem;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.arcade-padrow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.arcade-cap, .arcade-home { display: flex; justify-content: center; }
.arcade-dpad {
  display: grid;
  grid-template: "u u u" "l . r" "d d d" / 1fr 1fr 1fr;
  gap: 4px;
}
.arcade-tbtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  min-height: 3.6rem;
  font-size: 1.2rem;
  background: var(--arcade-key);
  color: var(--arcade-ink);
  border: var(--arcade-px) solid var(--arcade-key-edge);
  box-shadow: 0 var(--arcade-px) 0 var(--arcade-key-edge);
  touch-action: none;
}
.arcade-tbtn-up { grid-area: u; justify-self: center; }
.arcade-tbtn-left { grid-area: l; }
.arcade-tbtn-right { grid-area: r; }
.arcade-tbtn-down { grid-area: d; justify-self: center; }
/* The face buttons sit in a diamond: X top, Y left, A right, B bottom (the Switch layout). */
.arcade-ab { display: grid; grid-template-areas: ". x ." "y . a" ". b ."; gap: 0.2rem; justify-items: center; align-items: center; }
.arcade-tbtn-x { grid-area: x; }
.arcade-tbtn-y { grid-area: y; }
.arcade-tbtn-a { grid-area: a; }
.arcade-tbtn-b { grid-area: b; }
.arcade-ab .arcade-tbtn { border-radius: 50%; min-width: 3.4rem; min-height: 3.4rem; background: var(--arcade-util); }
.arcade-ab .arcade-tbtn-a { background: var(--arcade-ok); color: #04210f; }
/* The small key letter printed on each button (W A S D, K, J, I, U, N, C). */
.arcade-keycap { position: absolute; right: 0.2rem; bottom: 0.1rem; font-size: 0.6rem; line-height: 1; opacity: 0.8; font-family: var(--arcade-font); pointer-events: none; }
.arcade-ab .arcade-keycap { right: 0.55rem; bottom: 0.3rem; opacity: 0.9; }
.arcade-cap .arcade-tbtn, .arcade-home .arcade-tbtn { min-width: 4.6rem; min-height: 1.7rem; border-radius: 999px; font-size: 0.6rem; letter-spacing: 0.08em; background: var(--arcade-key); gap: 0.35rem; }
.arcade-cap .arcade-keycap, .arcade-home .arcade-keycap { position: static; opacity: 0.9; color: var(--arcade-focus); }
.arcade-tbtn.is-pressed { background: var(--arcade-focus); color: #1a1400; transform: translateY(var(--arcade-px)); box-shadow: none; }

/* Adult PIN overlay. */
.arcade-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: rgba(10, 9, 28, 0.94);
}
.arcade-overlay-title { font-size: 1.1rem; color: var(--arcade-focus); }
.arcade-overlay-msg { min-height: 1.4rem; color: #ff8a8a; font-size: 0.9rem; white-space: pre; }

/* The OS reduced-motion preference freezes the arcade widgets' CSS motion. */
@media (prefers-reduced-motion: reduce) {
  .arcade-widget *, .arcade-touchpad *, .arcade-overlay * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------
   A1b: structured answer entry (entry-form.js) and the bar model (bar-model.js)
   ------------------------------------------------------------------ */
.arcade-grid[data-cols="12"] { grid-template-columns: repeat(12, minmax(1.1rem, 1fr)); }
.arcade-key-field { min-height: 2.2rem; font-size: 0.8rem; background: var(--arcade-panel); color: var(--arcade-dim); text-transform: uppercase; }
.arcade-key-option { min-height: 2.4rem; font-size: 0.95rem; background: #0e7490; color: #fff; }

.arcade-entry-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  min-width: 14rem;
}
.arcade-entry-sep { color: var(--arcade-dim); }
.arcade-field {
  display: inline-block;
  min-width: 2.2rem;
  padding: 0 0.3rem;
  border-bottom: 4px solid var(--arcade-dim);
  min-height: 1.9rem;
}
.arcade-field.is-active { border-bottom-color: var(--arcade-focus); color: var(--arcade-focus); }
.arcade-field.is-empty { color: var(--arcade-dim); }
.arcade-frac { display: inline-flex; flex-direction: column; align-items: stretch; gap: 0.15rem; }
.arcade-frac .arcade-field { border-bottom: none; text-align: center; }
.arcade-frac .arcade-field.is-active { background: rgba(255, 225, 77, 0.18); }
.arcade-frac-bar { display: block; height: 4px; background: var(--arcade-ink); }

/* Bar model: units are equal width; a bar's width is proportional to its unit count. */
.arcade-bm { display: flex; flex-direction: column; gap: 0.7rem; min-width: 18rem; font-family: var(--arcade-font); font-weight: 700; color: var(--arcade-ink); }
.arcade-bm-readonly { display: inline-flex; padding: 0.7rem; background: var(--arcade-panel); border: var(--arcade-px) solid var(--arcade-key-edge); }
.arcade-bm-row { display: grid; grid-template-columns: 4.2rem 1fr; align-items: start; gap: 0.5rem; }
.arcade-bm-label { padding-top: 0.6rem; font-size: 0.8rem; color: var(--arcade-dim); overflow-wrap: anywhere; }
.arcade-bm-label.is-hidden { visibility: hidden; }
.arcade-bm-bar { display: flex; }
.arcade-bm-unit {
  flex: 1 1 0;
  min-width: 1.6rem;
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--arcade-key);
  border: 3px solid var(--arcade-key-edge);
  font-size: 1rem;
}
.arcade-bm-unit.is-unknown, .arcade-bm-brace.is-unknown, .arcade-bm-diffcell.is-unknown { color: var(--arcade-focus); }
.arcade-bm-brace {
  margin-top: 0.3rem;
  min-height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--arcade-dim);
  border-top: none;
  border-radius: 0 0 0.7rem 0.7rem;
  font-size: 0.9rem;
}
.arcade-bm-brace.is-blank { border-style: dashed; }
.arcade-bm-diff { display: flex; align-items: center; gap: 0.5rem; margin-left: 4.7rem; font-size: 0.8rem; color: var(--arcade-dim); }
.arcade-bm-diffcell { min-width: 2.6rem; min-height: 1.8rem; display: flex; align-items: center; justify-content: center; border: 3px dashed var(--arcade-dim); color: var(--arcade-ink); font-size: 0.9rem; }
.arcade-bm-cmds { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.arcade-bm-cmd { padding: 0.5rem 0.9rem; background: var(--arcade-key); border: var(--arcade-px) solid var(--arcade-key-edge); box-shadow: 0 var(--arcade-px) 0 var(--arcade-key-edge); font-size: 0.95rem; }
.arcade-bm-done { background: var(--arcade-ok); color: #04210f; }
.arcade-bm-modal:empty { display: none; }
.arcade-bm-menu { display: flex; flex-direction: column; gap: 0.3rem; }
.arcade-bm-menu-item { padding: 0.45rem 0.8rem; background: var(--arcade-key); border: var(--arcade-px) solid var(--arcade-key-edge); font-size: 0.95rem; }
.arcade-bm-split { display: flex; flex-direction: column; gap: 0.3rem; font-size: 1rem; }
.arcade-bm-split-hint { font-size: 0.75rem; color: var(--arcade-dim); }
/* The focus fill must win over each cell's own background (declared above). */
.arcade-key-field.is-arcade-focus, .arcade-key-option.is-arcade-focus, .arcade-bm-unit.is-arcade-focus, .arcade-bm-brace.is-arcade-focus,
.arcade-bm-label.is-arcade-focus, .arcade-bm-diffcell.is-arcade-focus, .arcade-bm-cmd.is-arcade-focus, .arcade-bm-menu-item.is-arcade-focus {
  background: var(--arcade-focus);
  color: #1a1400;
}

/* In-game menu (Start) and Controls card (Select). */
.arcade-menu {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 9, 28, 0.82);
}
.arcade-menu-card {
  min-width: 15rem;
  max-width: min(22rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--arcade-panel);
  color: var(--arcade-ink);
  border: var(--arcade-px) solid var(--arcade-key-edge);
  font-family: var(--arcade-font);
}
.arcade-menu-title { font-size: 1.1rem; color: var(--arcade-focus); text-align: center; }
.arcade-menu-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem 0.8rem; min-height: 2.6rem; box-sizing: border-box; background: var(--arcade-key); border: var(--arcade-px) solid var(--arcade-key-edge); font-size: 0.95rem; cursor: pointer; }
.arcade-menu-ctl { cursor: default; font-size: 0.85rem; }
.arcade-menu-key { font-family: var(--arcade-font); color: var(--arcade-focus); }
.arcade-menu-hint { font-size: 0.75rem; color: var(--arcade-dim); text-align: center; }