/* Arcade skin ("Fliperama") — Phase 4. A utility remap, not a rewrite: the
   markup stays Tailwind utilities, this file re-points what they MEAN,
   scoped under .skin-arcade. Tokens copied from the King of the World Cup
   soccer theme (see docs/05-arcade-skin.md header for source paths). */

/* Crest tokens (docs/05 §4) — crests render in both skins; only the color
   values swap. Declared outside .skin-arcade so mono gets sane defaults. */
:root {
  --crest-outline: #000;
  --crest-white: #FFFFFF;
}

.skin-arcade {
  /* Deviation from docs/05 §4 (logged in the phase report): the spec pins
     the crest outline to --arc-crt-900, but crests sit on crt-700/800/900
     card surfaces that are themselves near that color, so the outline
     vanished. crt-600 (a step lighter, still neutral chrome — not a hero
     or team color) keeps the shield edge visible against every card. */
  --crest-outline: var(--arc-crt-600);
  --crest-white: #E8E4F5;

  --arc-crt-900: #0C0820;
  --arc-crt-800: #14102B;
  --arc-crt-700: #1D1740;
  --arc-crt-600: #2A2257;
  --arc-ink: #F3EEFF;
  --arc-ink-dim: #B4A9E0;
  --arc-ink-faint: #7E72B8;
  --arc-yellow: #FFE24D;
  --arc-yellow-deep: #E8B400;
  --arc-cyan: #34E6D9;
  --arc-magenta: #FF3DA6;
  --arc-pitch: #1F7A3E;
  --arc-chalk: #EAF3E6;
  --arc-shadow: 4px 4px 0 var(--arc-crt-900);
  --arc-scanline: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.16) 2px 3px);

  font-family: 'Space Mono', monospace;
  background-color: var(--arc-crt-900) !important;
}

/* --- Utility remap (docs/05 §2) ------------------------------------- */

.skin-arcade .bg-white { background-color: var(--arc-crt-800) !important; }
.skin-arcade .bg-zinc-100 { background-color: var(--arc-crt-900) !important; }
.skin-arcade .text-black { color: var(--arc-ink) !important; }
.skin-arcade .text-zinc-500,
.skin-arcade .text-zinc-600 { color: var(--arc-ink-dim) !important; }
.skin-arcade .text-zinc-400,
.skin-arcade .text-zinc-300 { color: var(--arc-ink-faint) !important; }
.skin-arcade .border-black { border-color: var(--arc-cyan) !important; }
.skin-arcade .border-zinc-300,
.skin-arcade .border-zinc-400,
.skin-arcade .border-zinc-600 { border-color: var(--arc-crt-600) !important; }

/* .bg-black is overloaded: full-screen dark surfaces (match wrapper, the
   DEMITIDO dark card) vs. real primary buttons (JOGAR, CONFIRMAR, ACEITAR,
   CONTINUAR, selected posture). Default to the dark-surface meaning; only
   an actual <button> gets the yellow hero treatment (docs/05 §2). */
.skin-arcade .bg-black { background-color: var(--arc-crt-900) !important; }

.skin-arcade button.bg-black {
  background-color: var(--arc-yellow) !important;
  color: var(--arc-crt-900) !important;
  box-shadow: var(--arc-shadow);
}
.skin-arcade button.bg-black:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--arc-crt-900);
}

/* Alert sections / active states that sit on top of remapped bg-white */
.skin-arcade .bg-zinc-100,
.skin-arcade .bg-zinc-200 { background-color: var(--arc-crt-700) !important; }

/* Match screen wrapper + reveal dark variant */
.skin-arcade .bg-zinc-900 { background-color: var(--arc-crt-900) !important; }

.skin-arcade button { border-radius: 0; }
.skin-arcade button.border,
.skin-arcade button.border-2 { box-shadow: 3px 3px 0 var(--arc-crt-900); }
/* Primary (yellow) buttons already carry --arc-shadow above — don't double it. */
.skin-arcade button.bg-black.border,
.skin-arcade button.bg-black.border-2 { box-shadow: var(--arc-shadow); }

/* CRT scanline veil — sits over everything, including overlays (z-50). */
body.skin-arcade { position: relative; }
body.skin-arcade::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--arc-scanline);
  pointer-events: none;
  z-index: 90;
}

/* Reveal overlay (GOOOL) — hero color on the player's own reveal only. */
.skin-arcade #reveal-overlay.bg-white #reveal-label {
  color: var(--arc-yellow);
  text-shadow: 6px 6px 0 var(--arc-crt-900);
}

/* Magenta reserved: crisis card border, Z4 rows, DEMITIDO title, red-card reveal. */
.skin-arcade #crisis-card { border-color: var(--arc-magenta) !important; }
.skin-arcade .border-l-4.border-zinc-400 { border-left-color: var(--arc-magenta) !important; }
.skin-arcade #reveal-overlay[data-reveal-kind="danger"] #reveal-label {
  color: var(--arc-magenta) !important;
  text-shadow: var(--arc-shadow);
}
/* Verdict title color hook — data-verdict-tone set by objectiveCard.js (P4.3). */
.skin-arcade [data-verdict-tone="danger"] { color: var(--arc-magenta) !important; }
.skin-arcade [data-verdict-tone="hero"] {
  color: var(--arc-yellow) !important;
  text-shadow: 6px 6px 0 var(--arc-crt-900);
}

/* Picker screens (§5): yellow = difficulty/tier stars, scarce everywhere else. */
.skin-arcade .star-rating { color: var(--arc-yellow) !important; }

/* Hub (§5): confidence meter fill is cyan (Força stays yellow — the only
   other bar on the Hub, and already the default life-bar treatment). */
.skin-arcade .confidence-track.bg-zinc-200.border.border-zinc-400 > .bg-black {
  background: repeating-linear-gradient(to right, var(--arc-cyan) 0 8%, var(--arc-crt-900) 8% 10%) !important;
}

/* Hub (§5): objective banner border flips to magenta when off-track. */
.skin-arcade .objective-off-track { border-color: var(--arc-magenta) !important; }

/* Match + decision overlay (§5): the score is the one yellow hero. */
.skin-arcade #score,
.skin-arcade #decision-score {
  color: var(--arc-yellow) !important;
  text-shadow: 6px 6px 0 var(--arc-crt-900);
}

/* The DEMITIDO card's primary CTA is bg-white (inverted, so it pops against
   the dark card in mono) — under arcade that remaps to crt-800, which reads
   flat against the crt-900 card. Give it the same yellow hero treatment as
   every other primary button instead. */
.skin-arcade #retry-btn.bg-white,
.skin-arcade #nova-carreira-btn.bg-white {
  background-color: var(--arc-yellow) !important;
  color: var(--arc-crt-900) !important;
  box-shadow: var(--arc-shadow);
}

/* Form fields — native inputs/selects don't carry bg-white/text-black, so
   they'd otherwise stay a stray white box against the CRT field. */
.skin-arcade input,
.skin-arcade select {
  background-color: var(--arc-crt-800);
  color: var(--arc-ink);
}
.skin-arcade input::placeholder { color: var(--arc-ink-faint); }
.skin-arcade select option { background-color: var(--arc-crt-800); color: var(--arc-ink); }

/* Força / fit bars — chunky segmented "life bar" (P4.3 base treatment). */
.skin-arcade .bg-zinc-200.border.border-zinc-400 { border-color: var(--arc-cyan) !important; }
.skin-arcade .bg-zinc-200.border.border-zinc-400 > .bg-black {
  background: repeating-linear-gradient(to right, var(--arc-yellow) 0 8%, var(--arc-crt-900) 8% 10%) !important;
  box-shadow: none;
}

/* Momentum bar (docs/06 P4.5b) — neon pressure gauge. Yours = hero yellow;
   theirs = magenta (being pressed IS danger — sanctioned in docs/05 §5 via
   docs/06). Stepped motion for the pixel feel. */
.skin-arcade #momentum-track,
.skin-arcade #decision-momentum-track {
  border-color: var(--arc-crt-600) !important;
  background: var(--arc-crt-900) !important;
}
.skin-arcade #momentum-fill,
.skin-arcade #decision-momentum-fill {
  transition-timing-function: steps(4, end);
}
.skin-arcade #momentum-fill.momentum-mine,
.skin-arcade #decision-momentum-fill.momentum-mine {
  background: var(--arc-yellow) !important;
}
.skin-arcade #momentum-fill.momentum-theirs,
.skin-arcade #decision-momentum-fill.momentum-theirs {
  background: var(--arc-magenta) !important;
}