/* ==========================================================================
   GODBREAKER DESIGN SYSTEM — loaded last; the single source of truth for type,
   colour roles and the shared panel components. Earlier sheets (style, refinement,
   forge, saga, lighting, atlas-ui) still provide layout and ornament, but every
   text size in the game should come from the tokens below.

   Type scale (412 px phone ≈ u 4.1 px):
     display  37px  Cinzel 700   screen titles (VICTORY, phase name)
     h1       25px  Cinzel 700   panel / modal titles, stage name
     h2       18px  Cinzel 700   card titles, boss name, battle title
     body     14px  Vietnam 400  paragraphs, list rows, buttons (Cinzel)
     small    12.5  Vietnam 400  secondary rows, meta, chips
     label    11px  Vietnam 700  UPPERCASE section labels / eyebrows, tracking .18em
     micro    10px  Vietnam 600  HUD values, sockets, captions on bars
   Families: Cinzel = names & titles · Be Vietnam Pro = everything read · Playfair italic = story voice.
   ========================================================================== */
#game {
  --ff-head: 'Cinzel', 'Times New Roman', serif;
  --ff-body: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --ff-story: 'Playfair Display', Georgia, serif;
  --fs-display: max(30px, calc(var(--u) * 9));
  --fs-h1: max(21px, calc(var(--u) * 6));
  --fs-h2: max(16px, calc(var(--u) * 4.3));
  --fs-body: max(13.5px, calc(var(--u) * 3.45));
  --fs-small: max(12px, calc(var(--u) * 3));
  --fs-label: max(10.5px, calc(var(--u) * 2.6));
  --fs-micro: max(9.5px, calc(var(--u) * 2.3));
  --tx-hi: #f5ead0; --tx: #ddd1b6; --tx-dim: #a99c80; --tx-faint: #776d5b;
  --accent: #e3bf78; --accent-hi: #ffe2a2; --ok: #9fd48a; --bad: #ef8a6d;
  --line: #c9a86a3d; --line-strong: #c9a86a99;
  --sp-1: calc(var(--u) * 1); --sp-2: calc(var(--u) * 2); --sp-3: calc(var(--u) * 3); --sp-4: calc(var(--u) * 4); --sp-5: calc(var(--u) * 5); --sp-6: calc(var(--u) * 6);
  font-family: var(--ff-body); font-size: var(--fs-body); color: var(--tx);
}
#game .ui-icon { flex: none; }

/* ---------------------------------------------------------------- shared text roles */
#game .eyebrow { font: 700 var(--fs-label)/1.2 var(--ff-body); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
#game .btn { font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-body); letter-spacing: .08em; line-height: 1.1; text-transform: none; }
#game .btn.small { font-size: var(--fs-small); }
#game .btn .ui-icon { width: 1.1em; height: 1.1em; vertical-align: -.15em; }

/* ---------------------------------------------------------------- panels */
#game .panel { font-size: var(--fs-body); color: var(--tx); padding: var(--sp-5); }
#game .panel h2 { font: 700 var(--fs-h1)/1.15 var(--ff-head); letter-spacing: .03em; color: var(--tx-hi); margin: 0 0 var(--sp-2); }
#game .panel h3 { display: flex; align-items: center; gap: var(--sp-2); font: 700 var(--fs-label)/1.2 var(--ff-body); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: var(--sp-5) 0 var(--sp-2); }
#game .panel h3 small { font: 600 var(--fs-micro)/1 var(--ff-body); letter-spacing: .1em; color: var(--tx-faint); }
#game .panel h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
#game .panel p, #game .panel li { font-size: var(--fs-body); line-height: 1.5; }
#game .panel .sub { font-size: var(--fs-small); line-height: 1.5; color: var(--tx-dim); margin: 0 0 var(--sp-3); }
#game .panel small { font-size: var(--fs-small); color: var(--tx-dim); }
#game .panel .row { margin-top: var(--sp-5); gap: var(--sp-2); }
#game .panel .row .btn { min-height: calc(var(--u) * 11); }
#game .panel .row .btn:not(.gold) { flex: 0 0 auto; min-width: 32%; }

/* chips: one shape for meta, stats and rewards */
#game .meta-chip, #game .stat-chip, #game .reward-chip {
  display: inline-flex; align-items: center; gap: .45em; min-height: calc(var(--u) * 7); padding: 0 var(--sp-2);
  border: 1px solid var(--line); border-radius: 3px; background: #0a0f0e99; color: var(--tx);
  font: 600 var(--fs-small)/1 var(--ff-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
#game .meta-chip .ui-icon, #game .stat-chip .ui-icon { width: 1.15em; height: 1.15em; color: var(--accent); }
#game .meta-chip.type-elite { color: #a6e3a0; border-color: #8fd28a55; }
#game .meta-chip.type-miniboss { color: #ff9f86; border-color: #ff8a6a55; }
#game .meta-chip.type-boss { color: #d6b3ff; border-color: #b98cff66; }
#game .meta-chip.type-trial { color: #9fe0ff; border-color: #7fcff055; }
#game .stage-meta, #game .result-turns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: 0; }
#game .stat-chip small { margin-left: .5em; padding-left: .5em; border-left: 1px solid var(--line-strong); font: 600 var(--fs-small)/1 var(--ff-body); color: var(--tx-dim); }

/* stars: earned = filled gold, unearned = engraved outline */
#game .mini-star, #game .rs { display: inline-flex; color: #8a7a5a; }
#game .mini-star .ui-icon { width: 1.05em; height: 1.05em; }
#game .mini-star.earned, #game .rs.earned { color: #ffd77e; }
#game .mini-star.earned svg, #game .rs.earned svg { fill: currentColor; filter: drop-shadow(0 0 3px #ffb44a88); }
#game .mini-star.unearned svg, #game .rs.off svg { fill: #00000055; opacity: .75; }

/* ---------------------------------------------------------------- stage preview */
#game .stage-panel { padding-top: 0; }
#game .stage-preview-art { height: calc(var(--u) * 26); margin: 0 calc(var(--sp-5) * -1) var(--sp-4); padding: var(--sp-4) var(--sp-5); background-size: cover; background-position: center 30%; display: flex; align-items: flex-end; }
#game .stage-preview-art .eyebrow { color: var(--accent-hi); text-shadow: 0 1px 6px #000; }
#game .stage-panel h2 { margin-bottom: var(--sp-2); }
#game .enemy-list { display: flex; flex-direction: column; gap: var(--sp-1); }
#game .wave-label { font: 600 var(--fs-micro)/1 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-faint); margin: var(--sp-2) 0 var(--sp-1); }
#game .enemy-list .e { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1); border: 1px solid var(--line); border-radius: 3px; background: #0a0f0e8c; font-size: var(--fs-body); }
#game .enemy-preview img { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 2px; border: 1px solid var(--line-strong); object-fit: cover; object-position: center 20%; }
#game .enemy-preview > span:last-child { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
#game .enemy-preview b { font: 700 var(--fs-body)/1.2 var(--ff-head); letter-spacing: .02em; color: var(--tx-hi); }
#game .enemy-preview small { font: 500 var(--fs-small)/1.2 var(--ff-body); color: var(--tx-dim); font-variant-numeric: tabular-nums; }
#game .enemy-list .objective { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); color: var(--tx); }
#game .reward-grid { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
#game .reward-chip { font-size: var(--fs-body); color: var(--tx-hi); }
#game .reward-chip .rc-ic { display: inline-flex; color: var(--accent); }
#game .reward-chip .rc-ic .ui-icon, #game .reward-chip .rc-ic img { width: 1.25em; height: 1.25em; border-radius: 2px; }
#game .reward-chip.relic { border-color: #e3bf7877; background: #2a200f99; }
#game .star-goals { list-style: none; margin: 0; padding: 0; }
#game .star-goal { display: grid; grid-template-columns: calc(var(--u) * 13) 1fr auto; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px solid #ffffff0d; font-size: var(--fs-small); line-height: 1.35; color: var(--tx); }
#game .star-goal:last-child { border-bottom: 0; }
#game .sg-stars { display: inline-flex; gap: 1px; }
#game .sg-done { display: inline-flex; color: var(--ok); }
#game .sg-done .ui-icon { width: 1.2em; height: 1.2em; }
#game .star-goal.missed .sg-text { color: var(--tx-dim); }
#game .overtime-note { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-left: 2px solid #d9874f; background: #2a150c66; font-size: var(--fs-small); line-height: 1.45; color: var(--tx-dim); }
#game .overtime-note .ui-icon { width: 1.2em; height: 1.2em; margin-top: .1em; color: #f0a46e; }
#game .overtime-note b { color: var(--tx-hi); font-weight: 700; }

/* ---------------------------------------------------------------- result */
#game .result-panel { text-align: center; }
#game .result-panel .result-stage { display: block; margin-bottom: var(--sp-1); }
#game .result-panel .result-title { font: 700 var(--fs-display)/1 var(--ff-head); letter-spacing: .08em; margin: 0 0 var(--sp-3); color: var(--tx-hi); text-shadow: 0 0 24px #ffc96a44; }
#game .result-panel.lost .result-title { color: #e9b6a2; text-shadow: 0 0 24px #d0503044; }
#game .big-stars { display: flex; justify-content: center; align-items: flex-end; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: 0; }
#game .big-stars .rs .ui-icon { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
#game .big-stars .rs:nth-child(2) .ui-icon { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
#game .result-turns { justify-content: center; }
#game .new-best { font: 700 var(--fs-micro)/1 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; padding: .6em .9em; border-radius: 99px; background: linear-gradient(#ffe7a3, #c88a32); color: #2b1806; }
#game .result-panel h3, #game .result-panel .star-goals, #game .result-panel .reward-grid, #game .result-panel .result-record { text-align: left; }
#game .result-panel .reward-grid { justify-content: flex-start; }
#game .result-reason { font: 600 var(--fs-body)/1.45 var(--ff-body); color: var(--tx-hi); margin: var(--sp-3) 0 var(--sp-1); }
#game .result-advice { font-size: var(--fs-small); color: var(--tx-dim); margin: 0; }
#game .level-up, #game .reward-relic { margin-top: var(--sp-2); text-align: left; }
#game .level-up { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid #e3bf7877; background: #2a200f99; color: var(--tx-hi); font-weight: 600; }
#game .relic-item b { display: block; font: 700 var(--fs-body)/1.25 var(--ff-head); color: var(--tx-hi); margin: .2em 0; }
#game .relic-item small { font-size: var(--fs-small); line-height: 1.4; }
#game .result-record { margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-2); }
#game .result-record summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); font: 700 var(--fs-label)/1.2 var(--ff-body); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-dim); padding: var(--sp-1) 0; }
#game .result-record summary::-webkit-details-marker { display: none; }
#game .result-record summary::after { content: '+'; margin-left: auto; font: 400 var(--fs-h2)/1 var(--ff-body); color: var(--accent); }
#game .result-record[open] summary::after { content: '–'; }
#game .kv { font-size: var(--fs-small); row-gap: var(--sp-1); }
#game .kv span:nth-child(odd) { color: var(--tx-dim); }
#game .kv span:nth-child(even) { color: var(--tx-hi); font-weight: 600; }

/* ---------------------------------------------------------------- quests / camp / guide / language */
#game .quest-entry h3 { margin: 0; font: 700 var(--fs-body)/1.25 var(--ff-head); letter-spacing: .02em; text-transform: none; color: var(--tx-hi); }
#game .quest-entry h3::after { display: none; }
#game .quest-entry p { font-size: var(--fs-small); color: var(--tx-dim); margin: var(--sp-1) 0; }
#game .quest-status, #game .quest-reward { font: 600 var(--fs-small)/1 var(--ff-body); }
#game .guide-entry b { font: 700 var(--fs-body)/1.25 var(--ff-head); color: var(--tx-hi); }
#game .guide-entry small { font-size: var(--fs-small); line-height: 1.4; color: var(--tx-dim); }
#game .language-option b { font: 700 var(--fs-h2)/1.2 var(--ff-body); }
#game .language-option small { font: 600 var(--fs-micro)/1 var(--ff-body); letter-spacing: .14em; }

/* ---------------------------------------------------------------- map */
#game .map-header .realm b { font: 700 var(--fs-h2)/1.1 var(--ff-head); letter-spacing: .06em; }
#game .map-header .realm span { font: 500 var(--fs-micro)/1.3 var(--ff-body); letter-spacing: .04em; color: var(--tx-dim); }
#game .map-header .chip { font: 700 var(--fs-small)/1 var(--ff-body); }
#game .atlas-map .node .label { font: 700 max(11px, calc(var(--u) * 2.5))/1.25 var(--ff-head); letter-spacing: .03em; }
#game .atlas-map .node.side .label { font-family: var(--ff-body); font-weight: 600; letter-spacing: 0; }
#game .atlas-map .node .node-number { font: 700 max(14px, calc(var(--u) * 3.6))/1 var(--ff-head); }
#game .map-footer .map-progress { font-size: var(--fs-small); color: var(--tx-dim); }
#game .map-footer .map-progress b { color: var(--tx-hi); }

/* ---------------------------------------------------------------- battle HUD */
#game .b-top .title { font: 700 var(--fs-h2)/1.1 var(--ff-head); letter-spacing: .05em; color: var(--tx-hi); }
#game .b-top .title small { font: 600 var(--fs-micro)/1 var(--ff-body); letter-spacing: .18em; color: var(--tx-dim); margin-top: .4em; }
#game .b-top .turn-counter { display: block; margin-top: .45em; font: 600 var(--fs-label)/1 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-dim); font-variant-numeric: tabular-nums; }
#game .b-top .turn-counter .tc-turn { color: var(--tx-hi); }
#game .b-top .turn-counter.near-par .tc-par { color: #f0c36e; }
#game .b-top .turn-counter.over-par, #game .b-top .turn-counter.over-par .tc-turn { color: var(--bad); }
#game .hero-name { font: 700 var(--fs-label)/1 var(--ff-head); letter-spacing: .14em; color: var(--tx-hi); }
#game .hero-name span { font: 600 var(--fs-micro)/1 var(--ff-body); letter-spacing: .14em; color: var(--tx-faint); }
#game .bar .txt { font: 600 var(--fs-micro)/1 var(--ff-body); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
#game .enemy .name { font: 700 var(--fs-small)/1.15 var(--ff-head); letter-spacing: .04em; color: var(--tx-hi); }
#game .enemy.solo .name { font-size: var(--fs-body); }
#game .enemy.boss .name, #game .enemy.miniboss .name, #game .enemy.elite.solo .name { font-size: var(--fs-h2); }
#game .enemy .kind { font: 700 var(--fs-micro)/1 var(--ff-body); letter-spacing: .3em; }
#game .enemy .intent { font: 700 var(--fs-small)/1 var(--ff-body); font-variant-numeric: tabular-nums; }
#game .enemy .intent::before { font-size: .7em; }
#game .enemy .badges .badge, #game .enemy .phase-pips, #game .enemy .passive { font: 600 var(--fs-micro)/1.3 var(--ff-body); }
#game .skill .nm { font: 700 var(--fs-micro)/1.15 var(--ff-head); letter-spacing: .04em; }
#game .skill .cost { font: 700 var(--fs-micro)/1 var(--ff-body); }
#game .battle-status { font: 700 var(--fs-label)/1 var(--ff-head); letter-spacing: .16em; color: var(--accent); }
#game .battle-status span { font: 500 var(--fs-micro)/1 var(--ff-body); letter-spacing: .04em; text-transform: none; color: var(--tx-dim); margin-left: .8em; }
#game .tooltip { font-size: var(--fs-small); line-height: 1.5; }
#game .tooltip b { font-family: var(--ff-head); color: var(--tx-hi); }
#game .coach-cap { font: 700 var(--fs-body)/1.3 var(--ff-head); }
#game .coach-tap { font: 600 var(--fs-micro)/1 var(--ff-body); }

/* ---------------------------------------------------------------- battlefield scale: bosses dominate */
/* Guardians and gods rise to the top edge of the screen; their HUD floats over the feet
   instead of reserving a band under them, so the sprite gains ~40% height. */
#game .enemy.elite.solo .portrait { top: calc(var(--u) * -1); bottom: calc(var(--u) * 2.5); left: -6%; right: -6%; width: auto; }
/* Boss / guardian: framed from the knees up — the sprite continues behind the hero panel. */
#game .enemy.boss .portrait, #game .enemy.miniboss .portrait { top: calc(var(--u) * -1); bottom: calc(var(--u) * -10.5); left: -15%; right: -15%; width: auto; overflow: hidden; }
#screen-battle .b-player { z-index: 3; }
#game .enemy.boss .portrait img, #game .enemy.miniboss .portrait img, #game .enemy.elite.solo .portrait img { --actor-scale: 1; }
#game .enemy.boss .enemy-hud, #game .enemy.miniboss .enemy-hud, #game .enemy.elite.solo .enemy-hud {
  left: 6%; width: 88%; padding: var(--sp-4) var(--sp-2) 0; background: linear-gradient(transparent, #070b0ad9 60%); }
#game .enemy.boss .ground-aura, #game .enemy.miniboss .ground-aura { display: none; }
#game .enemy.boss .portrait::before, #game .enemy.miniboss .portrait::before { display: none; }
/* The battle title already names a solo guardian/god: the floating HUD is just its health and phase. */
#game .enemy.boss .name, #game .enemy.miniboss .name, #game .enemy.boss .kind, #game .enemy.miniboss .kind { display: none !important; }
#game .enemy.boss .phase-pips, #game .enemy.boss .passive { display: inline; margin: var(--sp-1) 0 0; color: var(--tx-dim); }
#game .enemy.boss .phase-pips { margin-right: .8em; }
/* keep the title readable where the boss's head passes behind it */
#screen-battle .b-top { position: relative; z-index: 3; }
#screen-battle .b-top .title { text-shadow: 0 0 10px #000, 0 2px 4px #000; }
#screen-battle .b-enemies { z-index: 2; }

/* ---------------------------------------------------------------- quest journal */
#game .panel .close-x { position: absolute; top: var(--sp-3); right: var(--sp-3); width: calc(var(--u) * 8); height: calc(var(--u) * 8); display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 2px; background: #0a0f0ecc; color: var(--tx-dim); cursor: pointer; }
#game .panel .close-x .ui-icon { width: 50%; height: 50%; }
#game .panel .close-x:hover { color: var(--tx-hi); border-color: var(--accent); }
#game .quest-panel h2 { display: flex; align-items: center; gap: var(--sp-2); padding-right: calc(var(--u) * 9); }
#game .quest-panel h2 .ui-icon { width: .9em; height: .9em; color: var(--accent); }
#game .quest-entry { padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
#game .quest-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
#game .quest-reward { display: inline-flex; align-items: center; gap: .35em; padding: .45em .7em; border: 1px solid var(--line); border-radius: 3px; background: #0a0f0e99; color: var(--tx-hi); }
#game .quest-reward .ui-icon { width: 1.1em; height: 1.1em; color: var(--accent); }
#game .quest-entry .row { justify-content: space-between; align-items: center; margin-top: var(--sp-2); }
#game .quest-entry .row .btn { min-height: calc(var(--u) * 8.5); min-width: calc(var(--u) * 24); flex: 0 0 auto; }
#game .quest-status { display: inline-flex; align-items: center; gap: .4em; color: var(--tx-dim); }
#game .quest-entry.q-ready .quest-status, #game .quest-entry.q-claimed .quest-status { color: var(--ok); }
#game .quest-entry.q-active .quest-status { color: var(--accent); }
#game .quest-status .ui-icon { width: 1.1em; height: 1.1em; }
#game .quest-panel > .row:last-child { flex-wrap: wrap; justify-content: stretch; }
#game .quest-panel > .row:last-child .btn { flex: 1 1 30%; min-width: 0; padding-left: var(--sp-1); padding-right: var(--sp-1); white-space: nowrap; }

/* ---------------------------------------------------------------- camp */
#game .camp-panel h2 { display: flex; align-items: center; gap: var(--sp-2); padding-right: calc(var(--u) * 9); }
#game .camp-panel h2 .ui-icon { width: .9em; height: .9em; color: var(--accent); }
#game .camp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); margin: var(--sp-3) 0 0; }
#game .cs-tile { display: flex; flex-direction: column; gap: .35em; padding: var(--sp-2); border: 1px solid var(--line); border-radius: 3px; background: #0a0f0e99; min-width: 0; }
#game .cs-tile small { font: 700 var(--fs-micro)/1 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-faint); }
#game .cs-tile b { display: inline-flex; align-items: center; gap: .35em; font: 700 var(--fs-h2)/1 var(--ff-body); color: var(--tx-hi); font-variant-numeric: tabular-nums; }
#game .cs-tile b .ui-icon { width: .85em; height: .85em; color: var(--accent); }
#game .cs-tile.cs-level { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; column-gap: var(--sp-2); }
#game .cs-tile.cs-level small:last-child { letter-spacing: .04em; text-transform: none; color: var(--tx-dim); font-variant-numeric: tabular-nums; }
#game .cs-tile .xp-bar { position: relative; height: calc(var(--u) * 1.4); border-radius: 99px; background: #ffffff12; overflow: hidden; }
#game .cs-tile .xp-bar i { position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, #a87b3a, #ffd98a); }
#game .weapon-item .ic { color: var(--accent); }
#game .weapon-item .btn { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: .35em; min-width: calc(var(--u) * 20); padding: var(--sp-1) var(--sp-2); }
#game .weapon-item .btn .cost-pill { display: inline-flex; align-items: center; gap: .3em; font: 700 var(--fs-small)/1 var(--ff-body); }
#game .relic-item .skill-cost { display: inline-flex; align-items: center; gap: .3em; color: #9fd6e8; font-weight: 600; margin: .1em 0 .3em; }
#game .relic-item .skill-cost .ui-icon { width: 1em; height: 1em; }
#game .relic-item .equip-state { flex: none; display: inline-flex; align-items: center; gap: .3em; font: 700 var(--fs-micro)/1 var(--ff-body); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-dim); }
#game .relic-item.on .equip-state { color: var(--ok); }
#game .camp-actions { flex-wrap: wrap; }
#game .camp-actions .btn { flex: 1 1 30%; min-width: 0; white-space: nowrap; }

/* ---------------------------------------------------------------- result screen v2
   Hero band (stage art + light rays + title + stamped stars) → 3 headline stats →
   reward tiles → star checklist → collapsible record → actions. */
#game .result-panel { padding-top: 0; text-align: left; overflow-x: hidden; }
#game .result-hero { position: relative; isolation: isolate; margin: 0 calc(var(--sp-5) * -1) var(--sp-4); padding: var(--sp-6) var(--sp-5) var(--sp-4); text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #0b0f0e1f 0%, #0b100f8c 50%, #0d1311 100%), var(--hero-art) center 35% / cover no-repeat; border-bottom: 1px solid var(--line-strong); }
#game .result-hero::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: calc(var(--u) * 16); height: 3px; margin-left: calc(var(--u) * -8); background: linear-gradient(90deg, transparent, var(--accent-hi), transparent); }
#game .result-rays { position: absolute; z-index: -1; left: 50%; top: 58%; width: calc(var(--u) * 150); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: .55; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, #ffd88a33 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 12%, transparent 52%); mask: radial-gradient(circle, #000 0 12%, transparent 52%); animation: resultRays 30s linear infinite; }
#game .result-rays::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, #ffd27a55, transparent 65%); }
@keyframes resultRays { to { rotate: 360deg; } }
#game .result-panel .result-stage { display: block; margin: 0 0 var(--sp-1); color: var(--accent-hi); text-shadow: 0 1px 4px #000; }
#game .result-panel .result-title { margin: 0; font: 800 var(--fs-display)/1 var(--ff-head); letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff7dd 10%, #f3cf7f 55%, #b9823a 92%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #3a250c) drop-shadow(0 0 18px #ffbe5a55); }
#game .result-panel.lost .result-title { background-image: linear-gradient(180deg, #f6e1d6 10%, #d58f78 55%, #84402f 92%); filter: drop-shadow(0 2px 0 #2a0f0a) drop-shadow(0 0 18px #c8402a44); }
#game .result-panel.lost .result-rays { opacity: .18; filter: grayscale(1); }
#game .result-hero .big-stars { margin: var(--sp-3) 0 0; gap: var(--sp-1); }
#game .result-hero .big-stars .rs .ui-icon { width: calc(var(--u) * 14); height: calc(var(--u) * 14); stroke-width: 1.2; }
#game .result-hero .big-stars .rs:nth-child(2) { translate: 0 calc(var(--u) * -2.5); }
#game .result-hero .big-stars .rs:nth-child(2) .ui-icon { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
#game .result-hero .big-stars .rs.off { color: #6d6249; }
#game .result-hero .big-stars .rs.off svg { fill: #0a0d0ccc; opacity: 1; }
#game .result-hero .big-stars .rs.earned svg { fill: #ffd77e; filter: drop-shadow(0 0 6px #ffbf55) drop-shadow(0 2px 0 #7a4c12); }
#game .result-hero .big-stars .rs { animation: starStamp .55s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(.35s + var(--i) * .28s); }
#game .result-hero .big-stars .rs.off { animation-name: starFade; }
@keyframes starStamp { 0% { opacity: 0; transform: scale(2.4) rotate(-25deg); filter: brightness(3); } 60% { opacity: 1; } 100% { transform: none; filter: none; } }
@keyframes starFade { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }
#game .result-hero .new-best { position: absolute; top: var(--sp-3); right: var(--sp-3); }

#game .result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }
#game .rs-tile { display: flex; flex-direction: column; align-items: center; gap: .45em; padding: var(--sp-2) var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: 3px; background: linear-gradient(#141c19, #0b100f); text-align: center; min-width: 0; }
#game .rs-tile small { font: 700 var(--fs-micro)/1 var(--ff-body); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-faint); }
#game .rs-tile b { font: 700 var(--fs-h1)/1 var(--ff-head); color: var(--tx-hi); font-variant-numeric: tabular-nums; }
#game .rs-tile b i { font-style: normal; font-size: .55em; margin-left: .05em; color: var(--tx-dim); }
#game .rs-tile > span { font: 600 var(--fs-micro)/1.2 var(--ff-body); color: var(--tx-dim); width: 100%; display: flex; justify-content: center; }
#game .rs-tile.good > span { color: var(--ok); }
#game .rs-tile.over > span { color: var(--bad); }
#game .rs-bar { display: block; position: relative; width: 70%; height: calc(var(--u) * 1.2); margin-top: .2em; border-radius: 99px; background: #ffffff14; overflow: hidden; }
#game .rs-bar i { position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, #8f2a22, #e0564a); border-radius: inherit; }
#game .rs-tile.good .rs-bar i { background: linear-gradient(90deg, #5a8f3a, #a6dc7c); }

#game .result-counsel { display: flex; flex-direction: column; gap: .4em; margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-left: 2px solid #d9604a; background: #2a0f0b66; }
#game .result-counsel b { font: 700 var(--fs-body)/1.35 var(--ff-body); color: var(--tx-hi); }
#game .result-counsel span { font-size: var(--fs-small); line-height: 1.45; color: var(--tx-dim); }

#game .reward-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 24), 1fr)); gap: var(--sp-1); }
#game .reward-tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3);
  border: 1px solid #e3bf7840; border-radius: 3px; background: radial-gradient(ellipse at 15% 50%, #e3bf7822, transparent 60%), #0b100f; animation: rewardIn .4s ease-out both; }
#game .reward-tile:nth-child(2) { animation-delay: .1s; } #game .reward-tile:nth-child(3) { animation-delay: .2s; }
@keyframes rewardIn { from { opacity: 0; transform: translateY(6px); } }
#game .reward-tile .rt-ic { grid-row: 1 / 3; display: grid; place-items: center; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: radial-gradient(circle, #e3bf7833, #e3bf7808 70%); color: var(--accent-hi); }
#game .reward-tile .rt-ic .ui-icon { width: 55%; height: 55%; }
#game .reward-tile b { font: 700 var(--fs-h2)/1 var(--ff-body); color: var(--tx-hi); font-variant-numeric: tabular-nums; }
#game .reward-tile small { font: 700 var(--fs-micro)/1.2 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-faint); }
#game .reward-tile.shard .rt-ic { color: #c9a6ff; background: radial-gradient(circle, #b98cff33, transparent 70%); }
#game .result-panel .level-up { justify-content: space-between; margin-top: var(--sp-1); border-color: #e3bf7877; background: linear-gradient(90deg, #3a2a12cc, #1a140bcc); font: 700 var(--fs-small)/1 var(--ff-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hi); }
#game .result-panel .level-up .ui-icon { width: 1.2em; height: 1.2em; }
#game .result-panel .level-up b { margin-left: auto; font: 700 var(--fs-h2)/1 var(--ff-head); letter-spacing: .04em; text-transform: none; color: var(--tx-hi); }
#game .result-panel .reward-relic { margin-top: var(--sp-1); border-color: #e3bf7866; background: #1a140bcc; }
#game .result-panel .star-goals.compact .star-goal { padding: calc(var(--u) * 1.4) 0; }
#game .result-panel .row { margin-top: var(--sp-4); }
@media (prefers-reduced-motion: reduce) { #game .result-rays, #game .result-hero .big-stars .rs, #game .reward-tile { animation: none !important; } }
/* Actions stay reachable: the button bar sticks to the bottom edge of the scrolling panel. */
#game .result-panel > .row:last-child { position: sticky; bottom: calc(var(--sp-5) * -1); z-index: 2; margin: var(--sp-4) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1); padding: var(--sp-3) var(--sp-5) var(--sp-4);
  background: linear-gradient(180deg, #0d131100, #0d1311f2 28%); }
#game .result-panel .star-goals.compact .star-goal { padding: var(--sp-1) 0; }
#game .build-tag { position: absolute; right: var(--sp-2); bottom: var(--sp-1); z-index: 3; font: 500 max(9px, calc(var(--u) * 1.8))/1 var(--ff-body); letter-spacing: .06em; color: #ffffff4d; font-style: normal; pointer-events: none; }
#game .map-progress .build-tag { position: static; margin-left: .8em; }

/* ---------------------------------------------------------------- stage preview: compact (fits a phone without scrolling) */
#game .stage-panel { padding-bottom: var(--sp-4); }
#game .stage-panel .stage-preview-art { height: calc(var(--u) * 17); margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); }
#game .stage-panel h2 { margin-bottom: var(--sp-1); }
#game .stage-panel h3 { margin: var(--sp-3) 0 var(--sp-1); }
#game .stage-panel .meta-chip, #game .stage-panel .reward-chip { min-height: calc(var(--u) * 6.2); }
#game .stage-panel .enemy-list .e { padding: calc(var(--u) * .8) var(--sp-2) calc(var(--u) * .8) calc(var(--u) * .8); }
#game .stage-panel .enemy-preview img { width: calc(var(--u) * 8.5); height: calc(var(--u) * 8.5); }
#game .stage-panel .enemy-preview > span:last-child { flex-direction: row; align-items: baseline; justify-content: space-between; flex: 1; gap: var(--sp-2); }
#game .stage-panel .star-goal { padding: calc(var(--u) * .7) 0; grid-template-columns: calc(var(--u) * 11) 1fr auto; }
#game .stage-panel .overtime-note { margin-top: var(--sp-2); padding: calc(var(--u) * 1.2) var(--sp-2); font-size: var(--fs-micro); align-items: center; }
#game .stage-panel .row { margin-top: var(--sp-3); }
#game .stage-panel .row .btn { min-height: calc(var(--u) * 10); }
/* rewards and enemies share one band when there is a single foe */
#game .stage-panel .stage-split { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--sp-3); align-items: start; }
#game .stage-panel .stage-split h3 { margin-top: var(--sp-3); }
#game .stage-panel .stage-split .reward-grid { flex-direction: column; align-items: stretch; }
#game .stage-panel .stage-split .reward-chip { justify-content: flex-start; }
#game .stage-panel .stage-split .enemy-preview > span:last-child { flex-direction: column; align-items: flex-start; gap: .25em; }
#game .stage-panel .stage-split h3 { white-space: nowrap; }
#game .stage-panel .stage-split h3::after { display: none; }
#game .stage-panel .stage-split .e { min-height: calc(var(--u) * 13.4); }
#game .stage-panel .stage-preview-art { background-position: center 58%; }

/* ---------------------------------------------------------------- obstacles & locks (painted v5 family) */
#game .tile .gem .shape.stone.has-art { background: url('../assets/art/v4/rune_stone_v5.png') center / contain no-repeat !important; border-radius: 0; box-shadow: none; clip-path: none;
  filter: brightness(.8) saturate(.8) drop-shadow(0 2px 2px #000a); }
#game .tile[data-rune=stone] .ico { display: none; }
#game .tile.locked .ov { background: none !important; z-index: 3; }
#game .tile.locked .ov::before { content: '' !important; position: absolute; inset: -4%; font-size: 0; opacity: 1;
  background: url('../assets/art/v4/chain_lock_v5.png') center / contain no-repeat; filter: drop-shadow(0 2px 2px #000b); }
#game .tile.locked .gem { filter: brightness(.62) saturate(.55); }

/* ---------------------------------------------------------------- map v2: ink on parchment
   Medallion nodes, inked place names written on the map (no dark boxes), a ribbon only on the
   frontier, dashed ink routes that turn to gold once walked. */
#game .atlas-map .node .disc { width: calc(var(--u) * 10.5); height: calc(var(--u) * 10.5); border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #46544b, #18221e 72%);
  box-shadow: 0 0 0 1.5px #2a1c0e, 0 0 0 calc(var(--u) * .75) #a98448, 0 0 0 calc(var(--u) * 1.05) #2f1f0d, 0 4px 9px #2a1a0a99, inset 0 2px 3px #ffffff26, inset 0 -4px 7px #0009; }
#game .atlas-map .node .node-number { color: #efe2c2; text-shadow: 0 1px 2px #000; }
#game .atlas-map .node.locked .disc { background: radial-gradient(circle at 50% 35%, #5a574d, #2b2a24 75%); box-shadow: 0 0 0 1.5px #2a1c0e, 0 0 0 calc(var(--u) * .75) #8b7f68, 0 0 0 calc(var(--u) * 1.05) #2f1f0d, 0 3px 6px #2a1a0a88, inset 0 -4px 7px #0008; }
#game .atlas-map .node.locked .node-number { color: #d3c9b0; opacity: .75; }
#game .atlas-map .node.cleared .disc { background: radial-gradient(circle at 50% 30%, #7a5a2a, #2e200d 75%); box-shadow: 0 0 0 1.5px #2a1c0e, 0 0 0 calc(var(--u) * .75) #e6c07a, 0 0 0 calc(var(--u) * 1.05) #3a260e, 0 4px 9px #2a1a0a99, inset 0 2px 3px #ffe9b044; }
#game .atlas-map .node.cleared .node-number { color: #fff0c8; }
#game .atlas-map .node.available .disc { background: radial-gradient(circle at 50% 30%, #8e6a30, #3a2810 75%); box-shadow: 0 0 0 1.5px #2a1c0e, 0 0 0 calc(var(--u) * .8) #ffd98a, 0 0 0 calc(var(--u) * 1.1) #3a260e, 0 0 calc(var(--u) * 5) #ffc45a99, inset 0 2px 3px #fff2c855; }
#game .atlas-map .node.boss .disc, #game .atlas-map .node.miniboss .disc { width: calc(var(--u) * 13); height: calc(var(--u) * 13); overflow: hidden; }
#game .atlas-map .node.miniboss .disc { box-shadow: 0 0 0 1.5px #2a1c0e, 0 0 0 calc(var(--u) * .8) #b9533a, 0 0 0 calc(var(--u) * 1.1) #2f130b, 0 4px 9px #2a1a0a99; }
#game .atlas-map .node.boss .disc { box-shadow: 0 0 0 1.5px #2a1c0e, 0 0 0 calc(var(--u) * .9) #9a72d6, 0 0 0 calc(var(--u) * 1.2) #1f1230, 0 0 calc(var(--u) * 4) #9a72d666; }
#game .atlas-map .node.boss .map-foe, #game .atlas-map .node.miniboss .map-foe { border-radius: 50%; opacity: 1; }
#game .atlas-map .node.locked .map-foe { filter: grayscale(.8) brightness(.6); }
#game .atlas-map .node.side .disc { width: calc(var(--u) * 7.5); height: calc(var(--u) * 7.5); }
/* padlock emblem in the medallion's corner instead of over the number */
#game .atlas-map .lock-badge { position: absolute; right: calc(var(--u) * -1.8); bottom: calc(var(--u) * -1.4); z-index: 2; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); margin: 0; padding: 0; border: 0; background: url('../assets/art/v4/padlock_v5.png') center / contain no-repeat; filter: drop-shadow(0 1px 1px #000c); }
#game .atlas-map .lock-badge > * { display: none; }
/* inked place names */
#game .atlas-map .node .label { background: none; border: 0; box-shadow: none; padding: 0; max-width: calc(var(--u) * 24);
  font: 700 max(11px, calc(var(--u) * 2.55))/1.2 var(--ff-head); letter-spacing: .04em; color: #2a1a0b;
  text-shadow: 0 0 2px #f4e6c4, 0 0 5px #f4e6c4, 0 0 9px #ecdab0, 0 0 14px #e6d1a2; }
#game .atlas-map .node.locked .label { color: #4d3d29; }
#game .atlas-map .node.side .label { font: italic 600 max(10.5px, calc(var(--u) * 2.3))/1.2 var(--ff-story); letter-spacing: 0; color: #3a2814; }
#game .atlas-map .node.frontier .label { padding: calc(var(--u) * .7) calc(var(--u) * 1.6); border-radius: 2px; color: #2b1806; text-shadow: none;
  background: linear-gradient(#f6e3b4, #dcbd7f); border: 1px solid #8a6630; box-shadow: 0 2px 5px #2a1a0a88, inset 0 1px #fff7dd; }
#game .atlas-map .node .stars:not(:empty) { background: #2a1c0ee6; border-color: #b98a46; }
/* routes */
#game .map-paths path { stroke: #4e3820; stroke-width: 2.2; stroke-dasharray: 1 7; stroke-linecap: round; opacity: .8; }
#game .map-paths path[stroke="#713f22"] { stroke: #b8862f; stroke-width: 3; stroke-dasharray: none; opacity: 1; filter: drop-shadow(0 0 2px #ffd27a); }
/* sealed skill sockets use the same painted padlock */
#game .skill.tut-locked::after { -webkit-mask: none; mask: none; background: url('../assets/art/v4/padlock_v5.png') center / contain no-repeat; filter: grayscale(.35) brightness(.8) drop-shadow(0 2px 2px #000c); width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); top: 16%; }
/* soft parchment smudge behind inked names so they read over busy cartography */
#game .atlas-map .node:not(.frontier) .label { padding: calc(var(--u) * .5) calc(var(--u) * 1.4); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, #f3e4c0e6 0%, #f0e0b9b3 45%, #ecd9ae00 72%); }
/* locked medallions recede: faded bronze on parchment instead of black holes */
#game .atlas-map .node.locked .disc { width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5);
  background: radial-gradient(circle at 50% 35%, #8a8170, #4f493d 78%); box-shadow: 0 0 0 1.5px #3a2a16, 0 0 0 calc(var(--u) * .6) #9c8a68, 0 0 0 calc(var(--u) * .9) #3a2a16, 0 2px 5px #2a1a0a66, inset 0 -3px 6px #0006; }
#game .atlas-map .node.locked .node-number { color: #f1e6cb; opacity: .85; }
#game .atlas-map .node.locked.boss .disc, #game .atlas-map .node.locked.miniboss .disc { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
#game .atlas-map .node.locked .map-foe { filter: grayscale(.6) sepia(.35) brightness(.85); }

/* Final lock treatment stays separate from the painted rune family. */
#game .tile.locked .gem { filter: brightness(.85) saturate(.8) !important; }
#game .tile.locked .ov::before { inset: 0; opacity: .95; }
#game .tile.locked .ov::before { inset: 7%; opacity: .92; }

/* ---------------------------------------------------------------- line breaking: no orphan words anywhere
   Paragraph-like text avoids a lone last word (pretty); short display text balances its lines. */
#game p, #game li, #game small, #game .sub, #game .story-text, #game .story-text .line, #game .tooltip, #game .tipbox,
#game .coach-cap, #game .result-advice, #game .result-counsel span, #game .relic-item small, #game .guide-entry small,
#game .quest-entry p, #game .tier-text, #game .brief-note, #game .title-tag, #game .overtime-note span { text-wrap: pretty; }
#game h1, #game h2, #game h3, #game .eyebrow, #game .label, #game .banner, #game .phase-banner h1, #game .phase-banner p,
#game .brief-foe b, #game .enemy-preview b, #game .relic-item b, #game .skill .nm, #game .coach-toast, #game .story-speaker,
#game .result-reason, #game .result-counsel b, #game .atlas-map .node .label { text-wrap: balance; }