/* ════════════════════════════════════════════════════════════════════
   DESIGN PASS v2 — the APPROVED subset (behind the flag)
   Every rule here is scoped to html.design-v2, set only by
   SOG_FEATURES.DESIGN_V2 (js/feature-flags.js) or a ?design=v2 URL.
   Without that class this file does nothing. js/design-v2.js splits the
   turn line into label + number.

   Kept (and only these):
     1. battle location scores at the large size (sized to each battle's
        location bar), vertically centred
     2. the turn box: two columns (TURN over 1/4 | CARDS TO PLAY over its
        number), a thin vertical rule between them
     3. purple End Turn (enabled)
     4. result screens: purple Continue / Play Again, neutral other buttons,
        18px subline and location rows
     5. purple outline on the map's transition (exit) boxes
     6. purple ring round the map's objective node
     7. purple Save Deck button in the deck builder (enabled)
     8. the learning check popup's frame (bronze edge and rings)
   The signal colour is the I'M READY purple.
   ════════════════════════════════════════════════════════════════════ */

html.design-v2 {
  --tap:        #7a3aab;   /* I'M READY purple (top of its gradient) */
  --tap-deep:   #5e2890;
  --tap-hi:     #9450c8;   /* hover */
  --tap-hi-deep:#6e34a8;
  --tap-line:   #c79bf2;   /* outlines / rings on dark or busy ground */
  --tap-text:   #fff5e6;
}

/* ── 1. Battle location scores: large, vertically centred, sized to the bar
   44px where the bar is 44px tall (most battles). Where a battle's bar is
   shorter (the Neanderthal camp: 30px) js/design-v2.js shrinks the digits so
   their ink is ~75% of it: it sets --dv2-score-size / --dv2-score-nudge on
   each .battle-location from its bar's measured height.
   The pixel font's digits sit above the middle of their line box (at any size
   the ink's centre is 0.1 × the font size high), so flex-centring leaves the
   ink high: a zero-height line box adds no height to the row, and a top pad of
   0.2 × the size drops the ink's centre onto the box's centre. */
html.design-v2 .battle-loc-score-opp,
html.design-v2 .battle-loc-score-player {
  font-size: var(--dv2-score-size, 44px);
  width: 60px;
  line-height: 0;
  padding-top: var(--dv2-score-nudge, 8.8px);
}

/* ── 2. Turn box: two columns, label over number ─────────────────────
   Left: "TURN" over the large "1/4" (js/design-v2.js splits "TURN 1 / 4"
   into .dv2-turn-label + .dv2-turn-num). Right: the ticker's label
   ("CARDS TO PLAY" / "CAPITAL") over its large number. A thin vertical rule
   between them replaces the old horizontal one (same colour and weight).
   Both labels: same small size, muted cream. Numbers keep their colours
   (gold turn, cyan ticker) and the ticker's glow. The pair is centred
   vertically in the box, whose height stays 112px. Its width grows from 210
   to ~250: "CARDS TO PLAY" alone is 121px wide at the 16px label size. */
html.design-v2 .battle-hud-topleft {
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
  height: 112px;
  padding: 12px 14px;
}
html.design-v2 .battle-turn-info,
html.design-v2 .battle-capital-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
html.design-v2 .battle-turn-info {
  border-bottom: none;
  border-right: 1px solid rgba(200, 160, 32, 0.32);   /* the old horizontal rule's style */
  padding: 0 14px 0 0;
  /* Fixed: the widest turn ("4/4", 68px at 44px) + 14 + the 1px rule, so the
     box keeps one width all game (CTGalbite's digits differ in width). */
  box-sizing: border-box;
  width: 83px;
  flex: 0 0 auto;
}
html.design-v2 .battle-capital-info { padding: 0 0 0 14px; }
html.design-v2 .battle-turn-info .dv2-turn-label,
html.design-v2 .battle-capital-label {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.12em;
  color: #cdbb94;                                     /* muted cream, both labels */
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}
html.design-v2 .battle-turn-info .dv2-turn-num { font-size: 44px; line-height: 1; letter-spacing: 0.02em; color: var(--snes-yellow); }
html.design-v2 .battle-capital-num { font-size: 44px; line-height: 1; }

/* ── Shared purple button look (items 3, 4, 7) ─────────────────────── */
html.design-v2 .btn-end-turn:not(:disabled),
html.design-v2 .result-actions .btn-primary[id$="-continue"],
html.design-v2 .result-actions .btn-primary[id$="-again"],
html.design-v2 #result-play-again,
html.design-v2 .btn-save:not(:disabled) {
  background: linear-gradient(180deg, var(--tap) 0%, var(--tap-deep) 100%) !important;
  border: 3px solid var(--tap-line) !important;
  color: var(--tap-text) !important;
  text-shadow: 1px 1px 0 #000;
  box-shadow: 0 4px 0 #2a0f40, 0 5px 0 #000, 0 0 14px rgba(148, 80, 200, 0.35) !important;
}
html.design-v2 .btn-end-turn:hover:not(:disabled),
html.design-v2 .result-actions .btn-primary[id$="-continue"]:hover,
html.design-v2 .result-actions .btn-primary[id$="-again"]:hover,
html.design-v2 #result-play-again:hover,
html.design-v2 .btn-save:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--tap-hi) 0%, var(--tap-hi-deep) 100%) !important;
  border-color: #e2c6ff !important;
  color: #fff !important;
}
/* End Turn's turn-1 attention pulse: purple, to match the button */
html.design-v2 .btn-end-turn.adv-pulse:not([disabled]) {
  box-shadow: 0 0 0 3px var(--tap-line), 0 0 22px 6px rgba(176, 112, 240, 0.85) !important;
}

/* ── 4. Result screens: the other buttons go neutral; small text 18px ─ */
html.design-v2 .result-actions .btn-primary:not([id$="-continue"]):not([id$="-again"]):not(#result-play-again) {
  background: #2e1c0c !important;
  border: 2px solid #8a6a40 !important;
  color: #ead9b4 !important;
  box-shadow: 0 3px 0 #140a02, 0 4px 0 #000 !important;
}
html.design-v2 .result-actions .btn-primary:not([id$="-continue"]):not([id$="-again"]):not(#result-play-again):hover {
  border-color: var(--tap-line) !important;
  color: #fff !important;
}
html.design-v2 .adv-result .result-subline { font-size: 18px; }
html.design-v2 .adv-result .result-loc-row,
html.design-v2 .adv-result .result-loc-row * { font-size: 18px !important; }
html.design-v2 .adv-result .result-actions .btn-primary { font-size: 18px !important; }

/* ── 5. Map transition (exit) boxes: purple outline ────────────────── */
html.design-v2 .overworld-exit:hover,
html.design-v2 .overworld-exit--flash {
  border-color: var(--tap-line) !important;
  background: rgba(122, 58, 171, 0.12) !important;
}
@media (hover: none) {
  html.design-v2 .overworld-exit { border-color: rgba(199, 155, 242, 0.55) !important; }
}

/* ── 6. Map objective: purple ground ring (the node's own glow stays gold) */
html.design-v2 .overworld-node.is-objective::after {
  border-color: var(--tap-line) !important;
  border-width: calc(4px / var(--node-s, 1)) !important;
  box-shadow: 0 0 0 calc(1.5px / var(--node-s, 1)) rgba(30, 8, 50, 0.6),
              0 0 calc(14px / var(--node-s, 1)) rgba(176, 112, 240, 0.8),
              inset 0 0 calc(12px / var(--node-s, 1)) rgba(176, 112, 240, 0.5) !important;
  width: max(124%, calc(96px / var(--node-s, 1))) !important;
}

/* ── 8. Learning check popup: bronze frame ─────────────────────────── */
html.design-v2 .learning-check-popup {
  border-color: #8a6a40 !important;
  box-shadow: 0 0 0 2px #000, 0 0 0 5px #6b4a1e, 0 8px 30px rgba(0, 0, 0, 0.8) !important;
}