/* ============================================================================
   ui2.css — Voucher Wars UI 2.0 design system: MISSION CONTROL
   Amber instrument-console on deep charcoal. Rules of the identity:
   - Primary information is BRIGHT NEUTRAL (--ink); amber is RESERVED for
     focus, decisive actions, and live/hot values — never body text.
   - Semantic good/warn/critical are separate from the accent.
   - Tabular numerals wherever digits align; engraved section labels.
   - Dark-primary. data-contrast="high" raises text/border contrast;
     data-effects="off" kills textures/glows (also the 10-foot Xbox base).
   - The arena render canvas is theme-immune (never styled from here).
   ========================================================================== */

:root {
  /* surfaces */
  --u2-bg:      #171410;
  --u2-panel:   #201b15;
  --u2-panel2:  #282219;
  --u2-bezel:   #37332c;   /* neutral line — amber stays for focus/action */
  --u2-inset:   #100e0a;

  /* text */
  --u2-ink:     #f0e9dc;   /* primary — bright neutral, NOT amber */
  --u2-dim:     #9d968a;   /* muted NEUTRAL secondary copy */
  --u2-warmdim: #a89a83;   /* engraved labels only */
  --u2-faint:   #6f6353;

  /* the accent — spend it on focus + actions + live values only */
  --u2-amber:      #ffb24d;
  --u2-amber-hot:  #ffd08a;
  --u2-amber-ink:  #1a1508;  /* text on amber fills */

  /* semantics (independent of accent) */
  --u2-good:    #79d476;
  --u2-warn:    #e5b93e;
  --u2-crit:    #e8654a;
  --u2-info:    #7db6d9;

  /* type */
  --u2-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --u2-mono: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
  --u2-fs-0: 13px;  /* labels/meta   */
  --u2-fs-1: 14px;  /* body          */
  --u2-fs-2: 16px;  /* emphasized    */
  --u2-fs-3: 20px;  /* section/hero  */
  --u2-fs-4: 28px;  /* display       */

  /* spacing / shape */
  --u2-s1: 6px;  --u2-s2: 10px;  --u2-s3: 16px;  --u2-s4: 24px;  --u2-s5: 36px;
  --u2-r:  4px;

  /* motion */
  --u2-fast: 120ms cubic-bezier(.2,.9,.3,1);
  --u2-slow: 260ms cubic-bezier(.2,.9,.3,1);

  /* focus ring (controller + keyboard; pointer suppresses via :focus-visible) */
  --u2-focus: 0 0 0 2px var(--u2-bg), 0 0 0 4px var(--u2-amber);
}

:root[data-contrast="high"] {
  --u2-ink: #ffffff; --u2-dim: #cfc2ab; --u2-faint: #948871;
  --u2-bezel: #56493a; --u2-panel: #241f18;
}

/* 10-foot / Xbox density: bigger type + targets, driven off one attribute the
   shell stamps when a gamepad is the active modality or ?tv=1. */
:root[data-density="tv"] {
  --u2-fs-0: 16px; --u2-fs-1: 19px; --u2-fs-2: 22px; --u2-fs-3: 27px; --u2-fs-4: 38px;
  --u2-s1: 8px; --u2-s2: 14px; --u2-s3: 22px; --u2-s4: 32px; --u2-s5: 48px;
}

/* ── base ─────────────────────────────────────────────────────────────── */
.u2 * { margin: 0; box-sizing: border-box; }
.u2 {
  background: var(--u2-bg);
  color: var(--u2-ink);
  font: var(--u2-fs-1)/1.5 var(--u2-sans);
}
.u2 ::selection { background: var(--u2-amber); color: var(--u2-amber-ink); }

.u2 [data-focusable]:focus-visible,
.u2 .u2-focused {                 /* focusNav stamps .u2-focused for gamepad */
  outline: none;
  box-shadow: var(--u2-focus);
  border-radius: var(--u2-r);
}

/* ── panels ───────────────────────────────────────────────────────────── */
.u2-panel {
  background: var(--u2-panel);
  border: 1px solid var(--u2-bezel);
  border-radius: var(--u2-r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.u2-panel > h2, .u2-label {
  color: var(--u2-warmdim);
  font: 600 11px var(--u2-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--u2-dim);
}
.u2-panel > h2 {
  padding: var(--u2-s2) var(--u2-s3);
  border-bottom: 1px solid var(--u2-bezel);
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.u2-btn {
  display: inline-flex; align-items: center; gap: var(--u2-s2);
  padding: var(--u2-s2) var(--u2-s3);
  background: var(--u2-panel2);
  border: 1px solid var(--u2-bezel);
  border-radius: var(--u2-r);
  color: var(--u2-ink);
  font: 600 var(--u2-fs-1) var(--u2-sans);
  cursor: pointer;
  transition: border-color var(--u2-fast), background var(--u2-fast);
  min-height: 40px;
}
.u2-btn:hover { border-color: var(--u2-amber); }
.u2-btn:active { transform: translateY(1px); }
.u2-btn[disabled] { opacity: .45; cursor: default; transform: none; }

.u2-btn--primary {
  background: var(--u2-amber);
  border-color: var(--u2-amber);
  color: var(--u2-amber-ink);
  font-weight: 700;
  letter-spacing: .04em;
}
.u2-btn--primary:hover { background: var(--u2-amber-hot); }
.u2-btn--danger { border-color: var(--u2-crit); color: var(--u2-crit); }
.u2-btn--danger:hover { background: rgba(232,101,74,.12); }

/* pending state (action lifecycle): the shell adds .is-busy while submitting */
.u2-btn.is-busy { pointer-events: none; opacity: .7; position: relative; }
.u2-btn.is-busy::after {
  content: ""; width: 14px; height: 14px; margin-left: 6px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: u2spin .7s linear infinite;
}
@keyframes u2spin { to { transform: rotate(360deg); } }

/* ── data readouts ────────────────────────────────────────────────────── */
.u2-num  { font-family: var(--u2-mono); font-variant-numeric: tabular-nums; }
.u2-hot  { color: var(--u2-amber-hot); }     /* live/changing values only  */
.u2-good { color: var(--u2-good); }
.u2-warn { color: var(--u2-warn); }
.u2-crit { color: var(--u2-crit); }

.u2-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--u2-s2) var(--u2-s3);
  border-bottom: 1px dashed var(--u2-bezel);
}
.u2-row:last-child { border-bottom: 0; }

/* ── chips ────────────────────────────────────────────────────────────── */
.u2-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: var(--u2-panel2);
  border: 1px solid var(--u2-bezel);
  border-radius: var(--u2-r);
  font: 600 var(--u2-fs-0) var(--u2-mono);
  letter-spacing: .06em;
  color: var(--u2-ink);
  cursor: pointer;
}
.u2-chip.is-on { border-color: var(--u2-amber); color: var(--u2-amber); }

/* ── nav (surface switcher) ───────────────────────────────────────────── */
.u2-nav { display: flex; gap: 4px; }
.u2-nav a {
  padding: var(--u2-s2) var(--u2-s3);
  color: var(--u2-dim); text-decoration: none;
  font: 600 var(--u2-fs-0) var(--u2-mono); letter-spacing: .16em;
  border: 1px solid transparent; border-radius: var(--u2-r);
  min-height: 40px; display: inline-flex; align-items: center;
}
.u2-nav a:hover { color: var(--u2-ink); }
.u2-nav a.is-on {
  color: var(--u2-amber);
  border-color: var(--u2-bezel);
  background: var(--u2-panel2);
  box-shadow: inset 0 -2px 0 var(--u2-amber);
}

/* ── toasts / drawer ──────────────────────────────────────────────────── */
.u2-toast {
  position: fixed; right: var(--u2-s4); bottom: var(--u2-s4); z-index: 400;
  display: grid; gap: var(--u2-s2); width: min(360px, calc(100vw - 32px));
}
.u2-toast .t {
  background: var(--u2-panel);
  border: 1px solid var(--u2-bezel);
  border-left: 3px solid var(--u2-good);
  border-radius: var(--u2-r);
  padding: var(--u2-s2) var(--u2-s3);
  animation: u2in var(--u2-slow);
}
.u2-toast .t.err  { border-left-color: var(--u2-crit); }
.u2-toast .t.warn { border-left-color: var(--u2-warn); }
@keyframes u2in { from { opacity: 0; transform: translateY(8px); } }

/* ── utility ──────────────────────────────────────────────────────────── */
.u2-grid   { display: grid; gap: var(--u2-s3); }
.u2-scroll { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) {
  .u2 * { animation: none !important; transition: none !important; }
}

/* ── Legacy adapter ────────────────────────────────────────────────────────
   The old renderers (slices 3-6 replace them) consume tokens.css variables.
   Inside the u2 shell, re-point those variables at Mission Control so every
   class-styled legacy element re-skins for free. Inline hardcoded hexes in
   old template strings stay as-is until their slice rewrites them. */
.u2 {
  --primary-color:   var(--u2-amber);
  --secondary-color: var(--u2-crit);
  --success-color:   var(--u2-good);
  --danger-color:    var(--u2-crit);
  --warning-color:   var(--u2-warn);
  --dark-bg:         var(--u2-bg);
  --card-bg:         var(--u2-panel);
  --border-color:    var(--u2-bezel);
  --text-color:      var(--u2-ink);
  --text-muted:      var(--u2-dim);
  --bg:     var(--u2-bg);
  --card:   var(--u2-panel);
  --accent: var(--u2-amber);
  --muted:  var(--u2-dim);
  --good:   var(--u2-good);
}
.u2 .btn-primary   { background: var(--u2-amber); color: var(--u2-amber-ink); border-color: var(--u2-amber); }
.u2 .btn-primary:hover { background: var(--u2-amber-hot); }
.u2 .btn-secondary { background: var(--u2-panel2); color: var(--u2-ink); border: 1px solid var(--u2-bezel); }
.u2 .btn-danger    { border-color: var(--u2-crit); color: var(--u2-crit); background: transparent; }