/* The Games — one stylesheet. Dark broadcast palette, serif headlines,
   readable body type. Desktop arena fits in one viewport with no page scroll. */
:root {
  --bg: #0c1518;
  --bg-2: #111d21;
  --panel: #15232a;
  --panel-2: #1a2b32;
  --line: #2a3d45;
  --line-2: #36505a;
  --text: #ece6d8;
  --muted: #9aa8a5;
  --dim: #6f7f7d;
  --gold: #dcae68;
  --gold-2: #f2d4a0;
  --red: #d86a5f;
  --red-bg: #3a1f1f;
  --green: #8fc19a;
  --blue: #7fb6c4;
  --serif: 'IM Fell English', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --radius: 6px;
  --hud-h: 64px;
  color-scheme: dark;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
h1 { font-family: var(--serif); font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -.01em; }
h1 em, h2 em { color: var(--gold-2); }
h2 { font-family: var(--serif); font-size: 26px; line-height: 1.15; }
h3 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
p { margin: 0; }
code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--gold-2); }
kbd { font: 600 11px/1 ui-monospace, monospace; color: var(--dim); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 5px; min-width: 20px; text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.eyebrow { display: block; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lead { color: #c4ccc8; font-size: 16px; max-width: 64ch; margin: 12px 0 22px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.spread { justify-content: space-between; }
.row.center { justify-content: center; }
.row.wrap { flex-wrap: wrap; }
.icon { flex: none; }

/* Buttons */
.button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: var(--radius); border: 1px solid transparent; font-weight: 700; font-size: 14px; letter-spacing: .02em; transition: background .15s, border-color .15s, transform .15s; }
.button.primary { background: var(--gold); color: #1a1a16; }
.button.primary:hover:not(:disabled) { background: var(--gold-2); }
.button.primary:disabled { background: #4b4638; color: #9a927e; }
.button.ghost { border-color: var(--line-2); background: transparent; }
.button.ghost:hover { border-color: var(--gold); color: var(--gold-2); }
.button.danger { border-color: #7a3a35; background: var(--red-bg); color: #ffb9b1; }
.text-button { background: none; border: 0; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 4px; display: inline-flex; align-items: center; gap: 6px; }
.text-button:hover { color: var(--gold-2); }
.icon-button { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 10px; color: var(--muted); font-size: 13px; font-weight: 600; }
.icon-button:hover { color: var(--gold-2); border-color: var(--gold); }
.segmented { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.segmented button { background: transparent; border: 0; padding: 9px 16px; color: var(--muted); font-weight: 600; }
.segmented button[aria-pressed="true"] { background: var(--gold); color: #1a1a16; }
.segmented.small button { padding: 6px 12px; font-size: 13px; }

/* Brand and top bar */
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; border: 1.5px solid var(--gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold); }
.brand strong { display: block; font-family: var(--serif); font-size: 18px; letter-spacing: .12em; font-weight: 400; }
.brand small { display: block; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.topbar { min-height: var(--hud-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px clamp(16px, 3vw, 32px); border-bottom: 1px solid var(--line); background: var(--bg-2); position: sticky; top: 0; z-index: 5; }
.topbar-note { color: var(--muted); font-size: 13px; }
.hud-nav { display: flex; gap: 8px; }
.stages { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.stages li { font-size: 12px; font-weight: 600; color: var(--dim); padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); }
.stages li.done { color: var(--muted); border-color: transparent; }
.stages li.done::before { content: '✓ '; color: var(--green); }
.stages li.now { color: #1a1a16; background: var(--gold); border-color: var(--gold); }

/* Title */
.title-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; padding: 40px clamp(20px, 6vw, 96px); background: radial-gradient(circle at 75% 45%, #25343a 0, #121e22 45%, var(--bg) 80%); overflow: hidden; position: relative; }
.title-copy { position: relative; z-index: 1; max-width: 720px; display: grid; gap: 24px; }
.title-copy h1 { font-size: clamp(46px, 6vw, 88px); }
.title-copy > p { color: #c1c9c5; font-size: 17px; max-width: 52ch; }
.title-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.title-art { position: absolute; right: -6vw; top: 50%; width: min(52vw, 720px); aspect-ratio: 1; transform: translateY(-50%); display: grid; place-items: center; }
.title-art .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(220,174,104,.2); }
.title-art .r2 { inset: 12%; border-style: dashed; animation: spin 140s linear infinite; }
.title-star { font-family: Georgia, serif; font-size: clamp(160px, 22vw, 360px); color: rgba(220,174,104,.28); }
@keyframes spin { to { transform: rotate(360deg); } }
.title-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.title-card { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(21,35,42,.8); }
.title-card:hover { border-color: var(--gold); }
.title-card .icon { color: var(--gold); margin-top: 2px; }
.title-card strong { display: block; font-size: 15px; }
.title-card small { display: block; color: var(--muted); font-size: 13px; }
.title-card.daily { border-color: rgba(220,174,104,.5); }
.achievements { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.achievement { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); opacity: .55; }
.achievement.earned { opacity: 1; border-color: rgba(220,174,104,.6); }
.achievement .icon { color: var(--dim); margin-top: 2px; }
.achievement.earned .icon { color: var(--gold); }
.achievement strong { display: block; font-size: 14px; }
.achievement small { display: block; color: var(--muted); font-size: 12px; }
.achievement em { font-style: normal; color: var(--gold-2); font-size: 11px; }
.district-wins { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.district-wins span { padding: 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); opacity: .5; }
.district-wins span.won { opacity: 1; border-color: var(--gold); background: #2a2c24; }
.district-wins b { display: block; font-size: 16px; }
.district-wins small { color: var(--muted); font-size: 11px; }
.unlocked { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 99px; border: 1px solid var(--gold); background: #2f2a1b; color: var(--gold-2); font-size: 14px; }
@media (max-width: 860px) { .title-cards { grid-template-columns: 1fr; } .district-wins { grid-template-columns: repeat(4, 1fr); } }
.hall { border-top: 1px solid var(--line); padding-top: 18px; }
.hall h2 { font-size: 20px; margin-bottom: 10px; }
.hall ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hall li { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(21,35,42,.7); border: 1px solid var(--line); border-radius: var(--radius); }
.hall li.won { border-color: rgba(220,174,104,.5); }
.hall li b { color: var(--gold); font-size: 16px; font-weight: 700; }
.hall li strong { display: block; font-size: 14px; }
.hall li small { color: var(--muted); font-size: 12px; }

/* Setup */
.setup { max-width: 1240px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 32px) 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.setup-col { display: grid; gap: 20px; align-content: start; }
.setup h1 { margin-bottom: 4px; }
.field { display: grid; gap: 8px; }
.field > span, .field .row > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.field input, .search { width: 100%; height: 44px; padding: 0 12px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 16px; }
.field .row input { flex: 1; }
.hint { color: var(--muted); font-size: 14px; }
.hint strong { color: var(--text); font-weight: 600; }
.bonus { color: var(--gold-2); white-space: nowrap; }
.district-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.district-grid button, .background-grid button, .difficulty-grid button, .exit-grid button, .pick-grid button { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; transition: border-color .15s, background .15s; }
.district-grid button b { display: block; font-size: 18px; font-weight: 700; line-height: 1.1; }
.district-grid button small, .background-grid small, .difficulty-grid small, .exit-grid small, .pick-grid small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.district-grid button.career b { color: var(--gold); }
.background-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.background-grid b, .difficulty-grid b, .exit-grid strong, .pick-grid strong { display: block; font-size: 14px; }
.difficulty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
[aria-pressed="true"]:is(.district-grid button, .background-grid button, .difficulty-grid button, .exit-grid button, .pick-grid button) { border-color: var(--gold); background: #2a2c24; }
:is(.district-grid, .background-grid, .difficulty-grid, .exit-grid, .pick-grid) button:hover:not(:disabled) { border-color: #8e805f; }
.stat-rows { display: grid; gap: 4px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.stat-row strong { display: block; }
.stat-row small { color: var(--muted); font-size: 12px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-2); background: transparent; border-radius: var(--radius); color: var(--gold); }
.stepper button:disabled { opacity: .35; }
.stepper b { min-width: 22px; text-align: center; font-size: 20px; font-weight: 700; }
.points { font-size: 13px; color: var(--muted); }
.points b { color: var(--gold-2); font-size: 18px; }
.points.done b { color: var(--green); }
.notice { color: #ffb9b1; background: var(--red-bg); border: 1px solid #7a3a35; border-radius: var(--radius); padding: 10px 12px; font-size: 14px; }
.setup-actions { margin-top: 6px; }
.challenge { color: var(--gold-2); background: #2f2a1b; border: 1px solid var(--gold); border-radius: var(--radius); padding: 10px 12px; font-size: 14px; }

/* Capitol */
.capitol { max-width: 1320px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 32px) 48px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.capitol-main { display: grid; gap: 18px; min-width: 0; }
.stage h1 { margin: 6px 0 0; }
.capitol-side { position: sticky; top: calc(var(--hud-h) + 20px); display: grid; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.tribute-card { display: flex; gap: 12px; align-items: center; }
.tribute-card h2 { font-size: 22px; }
.tribute-portrait { width: 64px; height: 76px; border-radius: var(--radius); overflow: hidden; flex: none; border: 1px solid var(--line-2); }
.stat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 0; }
.stat-list div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 4px 0; font-size: 14px; }
.stat-list dt { color: var(--muted); }
.stat-list dd { margin: 0; font-weight: 700; }
.stat-list .wide { grid-column: 1 / -1; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; align-content: flex-start; }
.chips li { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line-2); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--muted); font-weight: 600; }
.tabs button[aria-selected="true"] { color: var(--gold-2); border-bottom-color: var(--gold); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.card { position: relative; text-align: left; display: grid; gap: 6px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; transition: border-color .15s, transform .15s, background .15s; }
.card:hover { border-color: var(--gold); background: var(--panel-2); transform: translateY(-1px); }
.card strong { font-size: 16px; }
.card small { color: var(--muted); font-size: 13px; }
.card em { font-style: normal; font-size: 13px; color: var(--gold-2); }
.card kbd { position: absolute; top: 12px; right: 12px; }
.banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 8px; border: 1px solid rgba(220,174,104,.5); background: rgba(220,174,104,.08); margin-bottom: 16px; }
.banner p { color: var(--muted); font-size: 14px; }
.search { margin-bottom: 12px; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; margin-bottom: 16px; }
.person { display: flex; gap: 12px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.person.friendly { border-color: rgba(143,193,154,.55); }
.person.pickable:hover { border-color: #8e805f; }
.person.selected { border-color: var(--gold); background: #2a2c24; }
.person-portrait { width: 58px; height: 70px; flex: none; overflow: hidden; border-radius: 5px; }
.person-body { display: grid; gap: 3px; align-content: start; min-width: 0; }
.person-body strong { font-size: 15px; }
.person-body small { color: var(--muted); font-size: 12px; }
.person-body .studied { color: var(--blue); }
.type { font-weight: 700; }
.type-career { color: #f19c92; } .type-hunter { color: #e6b877; } .type-survivor { color: var(--green); } .type-hider { color: var(--blue); } .type-schemer { color: #c9a8e0; }
.person-actions { display: flex; gap: 6px; margin-top: 4px; }
.person-actions button { font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--panel-2); }
.person-actions button:hover:not(:disabled) { border-color: var(--gold); }
.person-actions button:disabled { opacity: .4; }
.person-actions b { color: var(--green); }
.pile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.pile { text-align: left; display: grid; gap: 8px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.pile:hover { border-color: #8e805f; }
.pile.selected { border-color: var(--gold); background: #2a2c24; }
.pile small { color: var(--muted); font-size: 13px; }
.risk { font-size: 12px; font-weight: 700; color: var(--red); white-space: nowrap; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.pick-grid button:disabled { opacity: .45; }
.exit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 18px; }

/* Reports */
.report { display: grid; gap: 6px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; }
.line { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #d3d9d6; }
.line .icon, .line .dot { margin-top: 3px; color: var(--dim); }
.line .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); flex: none; margin-top: 8px; }
.line-cannon { color: #e8b5ae; } .line-cannon .icon { color: var(--red); }
.line-danger { color: #ffc2ba; } .line-danger .icon { color: var(--red); }
.line-crowd { color: var(--gold-2); } .line-crowd .icon { color: var(--gold); }
.line-headline { color: var(--text); font-weight: 600; } .line-headline .icon { color: var(--gold); }
.line-warning .icon { color: var(--gold); }
.line-ally { color: #c5e6cc; } .line-ally .icon { color: var(--green); }
.line-loot .icon { color: var(--blue); }
.line-rival { color: #ffb4a8; font-weight: 600; } .line-rival .icon { color: var(--red); }
.line-combat .icon { color: var(--red); }

/* HUD */
.hud { position: sticky; top: 0; z-index: 5; height: var(--hud-h); display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); padding: 0 clamp(12px, 2vw, 24px); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.hud-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-portrait { width: 38px; height: 44px; border-radius: 5px; overflow: hidden; flex: none; border: 1px solid var(--line-2); }
.hud-id strong { display: block; font-size: 15px; white-space: nowrap; }
.hud-id small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hud-stats { display: flex; gap: clamp(14px, 2.4vw, 32px); flex: 1; justify-content: center; }
.hud-stat { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.hud-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hud-stat b { font-size: 15px; }
.hud-stat.crowd b { color: var(--gold-2); font-size: 18px; }
.hud-time, .hud-alive { display: grid; text-align: center; line-height: 1.15; }
.hud-time strong, .hud-alive strong { font-size: 18px; font-weight: 700; }
.hud-time span, .hud-alive span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.meter { display: inline-block; width: 90px; height: 7px; background: #2b3a40; border-radius: 99px; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 99px; background: var(--gold); transition: width .3s; }
.meter.hp span { background: linear-gradient(90deg, #c4574c, #e0916d); }
.meter.energy span { background: linear-gradient(90deg, #6fa37b, #a9cf8f); }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 12px; height: 7px; border-radius: 2px; background: #2b3a40; }
.pips i.on { background: #e0a15f; }

/* Arena layout */
.arena { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.15fr) minmax(260px, .75fr); height: calc(100vh - var(--hud-h)); }
.arena > section, .arena > aside { overflow-y: auto; padding: 18px; min-width: 0; }
.col-map { border-right: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.col-console { display: grid; gap: 14px; align-content: start; }
.col-pack { border-left: 1px solid var(--line); background: var(--bg-2); display: grid; gap: 14px; align-content: start; }
.map-wrap { width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1; }
.arena-map { width: 100%; height: 100%; display: block; }
.map-forcefield { fill: none; stroke: rgba(127,182,196,.35); stroke-width: .5; stroke-dasharray: 1 1.5; }
.map-edge { stroke: rgba(236,230,216,.12); stroke-width: .4; stroke-dasharray: 1 1.2; }
.map-edge.live { stroke: rgba(220,174,104,.55); stroke-width: .6; stroke-dasharray: none; }
.map-edge.dead { stroke: rgba(236,230,216,.04); }
.map-node { stroke: rgba(236,230,216,.18); stroke-width: .5; transition: stroke .15s; }
.map-label { font: 700 2.6px var(--sans); fill: #eee7d5; text-anchor: middle; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: .5; }
.map-zone.closed .map-node { stroke: #2a2f31; }
.map-zone.closed .map-label { fill: #6b6f70; }
.map-zone.reachable { cursor: pointer; }
.map-zone.reachable .map-node { stroke: rgba(220,174,104,.55); stroke-width: .7; }
.map-zone.reachable:hover .map-node, .map-zone.reachable:focus-visible .map-node { stroke: var(--gold-2); stroke-width: 1; }
.map-zone:focus { outline: none; }
.map-zone.selected .map-node { stroke: var(--gold-2); stroke-width: 1.4; filter: drop-shadow(0 0 1.6px rgba(242,212,160,.7)); }
.map-hazard-ring { fill: rgba(216,106,95,.14); stroke: var(--red); stroke-width: .6; animation: pulse 1.6s ease-in-out infinite; }
.map-closing-ring { fill: none; stroke: var(--red); stroke-width: .6; stroke-dasharray: 1.2 1; }
@keyframes pulse { 50% { opacity: .45; } }
.map-hazard-icon circle { fill: var(--red); }
.map-hazard-icon text, .map-you text, .map-tribute text { font: 700 2.4px var(--sans); text-anchor: middle; pointer-events: none; }
.map-hazard-icon text { fill: #fff; font-size: 3px; }
.map-you circle { fill: var(--gold); stroke: #1a1a16; stroke-width: .4; }
.map-you text { fill: #1a1a16; font-size: 1.7px; }
.map-tribute circle { stroke: #0c1518; stroke-width: .4; }
.map-tribute.foe circle { fill: #c8594e; }
.map-tribute.friend circle { fill: #6fa37b; }
.map-tribute text { fill: #fff; font-size: 1.9px; }
.map-feast path { fill: var(--gold-2); stroke: #1a1a16; stroke-width: .3; }
.map-loot rect { fill: var(--blue); stroke: #0c1518; stroke-width: .3; }
.map-snare circle { fill: none; stroke: var(--gold-2); stroke-width: .5; }
.zone-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 8px; }
.zone-card h3 { font-family: var(--serif); font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 400; }
.traits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; }
.traits div { background: var(--bg-2); border-radius: 5px; padding: 6px 8px; }
.traits dt { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.traits dd { margin: 0; font-size: 13px; font-weight: 600; }

/* Console */
.alerts { display: grid; gap: 6px; }
.alert { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--panel); }
.alert .icon { margin-top: 2px; }
.alert-danger { border-color: #7a3a35; background: var(--red-bg); color: #ffc9c2; }
.alert-danger .icon { color: var(--red); }
.alert-warn { border-color: #6a5630; background: #2c2618; color: #f2dcb2; }
.alert-warn .icon { color: var(--gold); }
.alert-gold { border-color: var(--gold); background: #2f2a1b; color: var(--gold-2); }
.alert-info .icon { color: var(--blue); }
.decision, .combat, .event { display: grid; gap: 12px; }
.decision-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.decision-head h2 { margin-top: 2px; }
.decision-head p { margin-top: 4px; font-size: 14px; }
.choices { display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; transition: border-color .12s, background .12s, transform .12s; }
.choice:hover:not(:disabled) { border-color: var(--gold); background: var(--panel-2); transform: translateX(2px); }
.choice:disabled { opacity: .5; }
.choice-bold { border-color: #5a4a30; }
.choice-body { flex: 1; display: grid; gap: 2px; min-width: 0; }
.choice-body strong { font-size: 15px; }
.choice-body small { color: var(--muted); font-size: 13px; }
.choice-body em { font-style: normal; font-size: 12px; color: var(--gold-2); }
.choice:disabled .choice-body em { color: #e7a39a; }
.choice-stats { display: flex; align-items: center; gap: 8px; flex: none; }
.dmg { font-size: 12px; font-weight: 700; color: var(--muted); }
.chance { flex: none; font: 700 14px var(--sans); padding: 5px 8px; border-radius: 5px; min-width: 50px; text-align: center; }
.chance-good { background: rgba(143,193,154,.16); color: var(--green); }
.chance-fair { background: rgba(220,174,104,.14); color: var(--gold-2); }
.chance-poor { background: rgba(216,106,95,.16); color: #f19c92; }

/* Combat */
.combat { border: 1px solid #5a2f2b; background: linear-gradient(180deg, #221a1b, transparent 260px); border-radius: 10px; padding: 16px; }
.range { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.range-close { color: #ffc9c2; border-color: #7a3a35; }
.duel { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 10px; align-items: center; }
.fighter { display: grid; gap: 4px; justify-items: start; }
.fighter.foe { justify-items: end; text-align: right; }
.fighter-portrait { width: 72px; height: 86px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-2); }
.fighter strong { font-size: 15px; }
.fighter small { color: var(--muted); font-size: 12px; }
.fighter .meter { width: 100%; max-width: 160px; }
.duel-gap { display: grid; justify-items: center; gap: 4px; }
.duel-gap em { font-style: normal; color: var(--gold-2); font-size: 12px; font-weight: 700; }
.duel-line { width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--dim) 0 4px, transparent 4px 8px); }
.duel-line.close { width: 30%; background: var(--red); }
.intent { border-radius: 8px; padding: 12px 14px; border: 1px solid var(--line-2); background: var(--panel); display: grid; gap: 4px; }
.intent p { font-size: 16px; font-weight: 600; }
.intent-threat { border-color: #7a3a35; background: var(--red-bg); }
.intent-opening { border-color: rgba(143,193,154,.6); background: #1d2c22; }
.intent-odds { font-size: 13px; color: #ffc9c2; font-weight: 700; }
.round-log { display: grid; gap: 3px; padding-left: 12px; border-left: 2px solid var(--line-2); }
.round-log p { font-size: 14px; color: #d3d9d6; }

/* Event */
.event { border: 1px solid rgba(220,174,104,.45); border-radius: 10px; padding: 16px; background: linear-gradient(180deg, #221f17, transparent 240px); }
.event-head { display: flex; gap: 14px; align-items: flex-start; }
.event-head p { color: #cfd5d1; margin-top: 6px; }
.event-portrait { width: 72px; height: 86px; border-radius: 6px; overflow: hidden; flex: none; border: 1px solid var(--line-2); }

/* Pack */
.panel { display: grid; gap: 10px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel-head h3 { display: flex; align-items: center; gap: 6px; }
.panel-head span { font-size: 13px; color: var(--muted); }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.item { display: grid; gap: 6px; padding: 9px 10px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.item.equipped { border-color: rgba(220,174,104,.6); }
.item strong { font-size: 14px; }
.item small { display: block; color: var(--muted); font-size: 12px; }
.tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1a1a16; background: var(--gold); border-radius: 3px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; }
.item-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.item-actions button { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--panel-2); }
.item-actions button:hover:not(:disabled) { border-color: var(--gold); }
.item-actions button:disabled { opacity: .4; }
.item-actions button.ghost { background: transparent; color: var(--muted); }
.item-actions button.armed { border-color: var(--red); background: var(--red-bg); color: #ffc9c2; }
.hint-card { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px 10px; border-radius: var(--radius); border: 1px solid rgba(127,182,196,.5); background: rgba(127,182,196,.08); }
.hint-card span { flex: 1; }
.hint-card .icon { color: var(--blue); }
.hint-card button { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--blue); background: var(--panel-2); }
.hint-card.swap { border-color: var(--gold); background: rgba(220,174,104,.08); }
.ally-block { display: grid; gap: 6px; }
.ally-gear button { font-size: 11px; }
.rival-panel { border: 1px solid #7a3a35; background: linear-gradient(180deg, #2a1a1b, transparent); border-radius: 8px; padding: 10px; }
.rival-panel h3 { color: var(--red); }
.map-tribute.rival circle { fill: #8c1f1a; stroke: #ffb4a8; stroke-width: .5; }
.ground h4 { font-size: 12px; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 6px; }
.ally { display: flex; gap: 10px; align-items: center; }
.ally-portrait { width: 40px; height: 48px; border-radius: 5px; overflow: hidden; flex: none; }
.ally strong { display: block; font-size: 14px; }
.ally small { display: block; color: var(--muted); font-size: 12px; }
.ally .meter { width: 120px; }
.gifts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gifts button { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; padding: 7px 9px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--panel); text-align: left; }
.gifts button b { color: var(--gold-2); }
.gifts button:hover:not(:disabled) { border-color: var(--gold); }
.gifts button:disabled { opacity: .45; }

/* Overlays */
.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(4,9,11,.72); display: grid; place-items: center; padding: 16px; }
.sheet { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 20px; display: grid; gap: 14px; align-content: start; }
.sheet.narrow { width: min(460px, 100%); }
.sheet.wide { width: min(1100px, 100%); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.howto { margin: 0; display: grid; gap: 10px; }
.howto div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.howto dt { color: var(--gold); font-weight: 700; }
.howto dd { margin: 0; color: #cfd5d1; }
.menu-actions { display: grid; gap: 8px; }
.chronicle { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chronicle li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.chronicle li > span { color: var(--dim); font-size: 12px; text-transform: capitalize; }
.chronicle .line-cannon p { color: #e8b5ae; }
.chronicle .line-headline p { font-weight: 600; }
.roster { display: grid; grid-template-columns: 300px 1fr; gap: 16px; min-height: 0; }
.roster-list { display: grid; gap: 4px; max-height: 68vh; overflow: auto; align-content: start; padding-right: 4px; }
.roster-item { display: flex; gap: 10px; align-items: center; text-align: left; padding: 6px 8px; border-radius: var(--radius); border: 1px solid transparent; background: none; }
.roster-item:hover { background: var(--panel); }
.roster-item.selected { border-color: var(--gold); background: var(--panel); }
.roster-item.dead { opacity: .5; }
.roster-item strong { display: block; font-size: 14px; }
.roster-item small { color: var(--muted); font-size: 12px; }
.mini-portrait { width: 34px; height: 40px; border-radius: 4px; overflow: hidden; flex: none; }
.roster-detail { display: grid; gap: 14px; align-content: start; }
.roster-head { display: flex; gap: 16px; }
.roster-portrait { width: 150px; height: 178px; border-radius: 8px; overflow: hidden; flex: none; border: 1px solid var(--line-2); }
.roster-head h3 { font-family: var(--serif); font-size: 28px; text-transform: none; color: var(--text); letter-spacing: 0; font-weight: 400; }
.roster-head p { margin-top: 6px; }

/* Ending */
.ending { max-width: 900px; margin: 0 auto; padding: 48px 20px 64px; display: grid; gap: 22px; justify-items: center; text-align: center; }
.ending-symbol { font-family: Georgia, serif; font-size: 72px; color: var(--gold); line-height: 1; }
.ending.lost .ending-symbol { color: var(--red); }
.ending h1 { font-size: clamp(40px, 6vw, 68px); }
.ending .lead { margin: 0; }
.ending-stats { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 10px; margin: 0; width: 100%; }
.ending-stats div { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.ending-stats dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.ending-stats dd { margin: 4px 0 0; font-size: 30px; font-weight: 700; }
.ending-stats small { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-left: 4px; }
.recap { width: 100%; display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: center; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.recap-map { width: 100%; display: block; }
.recap-ground { fill: #172523; }
.recap-edge { stroke: rgba(236,230,216,.1); stroke-width: .5; }
.recap-zone circle { fill: #26332f; }
.recap-zone.visited circle { fill: #3d5048; }
.recap-zone.closed circle { fill: #141a1c; }
.recap-zone text { font: 600 3.4px var(--sans); fill: #6f7f7d; text-anchor: middle; text-transform: uppercase; }
.recap-zone.visited text { fill: #d8d2c2; }
.recap-route { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linejoin: round; }
.recap-kill circle { fill: #c8594e; }
.recap-kill text { font: 700 3.6px var(--sans); fill: #fff; text-anchor: middle; }
.recap-turn path { fill: var(--gold-2); }
.recap-start { fill: var(--muted); }
.recap-end { fill: var(--gold-2); }
.recap-end.fallen { fill: var(--red); }
.recap-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.recap-list li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 14px; }
.recap-list span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
@media (max-width: 860px) { .recap { grid-template-columns: 1fr; } .recap-map-wrap { max-width: 280px; margin: 0 auto; } .recap-list li { grid-template-columns: 1fr; gap: 2px; } }
.share { width: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: center; text-align: left; background: var(--panel); border: 1px solid rgba(220,174,104,.4); border-radius: 10px; padding: 16px; }
.share-card { aspect-ratio: 1200 / 630; border-radius: 8px; overflow: hidden; background: var(--bg-2); display: grid; place-items: center; border: 1px solid var(--line-2); }
.share-card img { width: 100%; height: 100%; display: block; }
.share-body { display: grid; gap: 10px; }
.share-body h2 { font-size: 24px; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-status { min-height: 20px; font-size: 13px; color: var(--green); }
@media (max-width: 860px) { .share { grid-template-columns: 1fr; } }
.final-moments { width: 100%; text-align: left; display: grid; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.final-moments h2 { font-size: 20px; margin-bottom: 4px; }
.fallen { width: 100%; text-align: left; }
.fallen h2 { margin-bottom: 10px; }
.fallen ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.fallen li { display: flex; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; }
.fallen strong { display: block; font-size: 14px; }
.fallen small { color: var(--muted); font-size: 12px; }

/* The nightly broadcast */
.overlay.broadcast { background: radial-gradient(ellipse at 50% 20%, #1b2a3a 0, #070c12 70%); place-items: center; }
.sky { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 12% 20%, #fff8, transparent), radial-gradient(1px 1px at 30% 70%, #fff6, transparent), radial-gradient(1.5px 1.5px at 55% 35%, #fff9, transparent), radial-gradient(1px 1px at 78% 15%, #fff7, transparent), radial-gradient(1px 1px at 88% 62%, #fff5, transparent), radial-gradient(1.5px 1.5px at 42% 12%, #fff8, transparent), radial-gradient(1px 1px at 66% 82%, #fff5, transparent), radial-gradient(1px 1px at 8% 88%, #fff6, transparent); }
.broadcast-body { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; max-width: 980px; }
.broadcast-seal { font-size: 46px; color: var(--gold); text-shadow: 0 0 30px rgba(220,174,104,.6); animation: glow 3s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .55; } }
.broadcast-body h2 { font-size: clamp(34px, 5vw, 56px); }
.sky-faces { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.sky-faces li { display: grid; gap: 4px; justify-items: center; opacity: 0; animation: appear .9s ease forwards; animation-delay: var(--delay, .4s); }
.sky-portrait { width: 104px; height: 124px; border-radius: 8px; overflow: hidden; filter: grayscale(.6) brightness(1.1) drop-shadow(0 0 16px rgba(160,200,255,.35)); border: 1px solid rgba(180,210,255,.35); }
.sky-faces strong { font-size: 15px; }
.sky-faces small { color: var(--muted); font-size: 12px; }
@keyframes appear { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.broadcast-count { color: var(--gold-2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 30; display: flex; gap: 12px; align-items: center; max-width: min(560px, calc(100vw - 32px)); background: var(--red-bg); color: #ffd5cf; border: 1px solid #7a3a35; border-radius: 8px; padding: 10px 14px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.toast button { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; }

/* Responsive */
@media (max-width: 1280px) {
  .arena { grid-template-columns: minmax(300px, .9fr) minmax(400px, 1.1fr); grid-template-rows: auto; height: auto; min-height: calc(100vh - var(--hud-h)); }
  .arena > section, .arena > aside { overflow: visible; }
  .col-pack { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
  .hud-nav .icon-button span { display: none; }
}
@media (max-width: 1080px) {
  .capitol { grid-template-columns: 1fr; }
  .capitol-side { position: static; }
  .setup { grid-template-columns: 1fr; }
  .title-screen { grid-template-columns: 1fr; }
  .title-art { opacity: .35; }
}
@media (max-width: 860px) {
  :root { --hud-h: auto; }
  .hud { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 10px 14px; }
  .hud-stats { order: 3; flex-basis: 100%; justify-content: space-between; }
  .meter { width: 64px; }
  .arena { grid-template-columns: 1fr; }
  .col-console { order: -1; }
  .col-map { border-right: 0; border-top: 1px solid var(--line); }
  .arena > section, .arena > aside { padding: 14px 16px; }
  .topbar { flex-wrap: wrap; }
  .stages { order: 3; flex-basis: 100%; }
  .district-grid { grid-template-columns: repeat(4, 1fr); }
  .background-grid, .exit-grid { grid-template-columns: repeat(2, 1fr); }
  .difficulty-grid, .pile-grid { grid-template-columns: 1fr; }
  .roster { grid-template-columns: 1fr; }
  .roster-list { max-height: 30vh; }
  .ending-stats { grid-template-columns: repeat(2, 1fr); }
  .traits { grid-template-columns: repeat(2, 1fr); }
  .duel { grid-template-columns: 1fr 40px 1fr; }
  .howto div, .chronicle li { grid-template-columns: 1fr; gap: 2px; }
  kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }