/* THE AMERICAN POLITICS SIMULATOR — editorial political drama: paper, ink, institutional red */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* Form controls don't inherit the page font by default — without this, every
   button in the game (including .option, the primary one) silently rendered in
   the browser's Arial while all the prose around it used the system stack.
   Anything that wants a different face still sets font-family itself. */
button, input, select, textarea { font-family: inherit; }

:root {
  /* editorial political drama: paper, ink, institutional red, brass */
  --bg: #F3F0E8;
  --bg-deep: #EAE5D8;
  --panel: #FBF9F3;
  --panel2: #F1EDE1;
  --panel3: #E6E0D0;
  --border: #C9C3B4;
  --border-soft: #DDD7C9;
  --text: #172238;
  --muted: #667080;
  --accent: #A63A3A;      /* institutional red */
  --accent-bright: #8F2F2F;
  --accent-dim: #7E2B2B;
  --good: #2E7D46;
  --bad: #A63A2E;
  --blue: #223A5E;        /* ink navy */
  --blue-deep: #3A5680;
  --white: #10192E;       /* "strong ink" — the loudest text on paper */
  /* darkened from #A6864A, which sat at 3.01:1 on paper — under the 4.5:1
     minimum for the small uppercase labels that use it most */
  --brass: #7D6130;
  --brass-bright: #A6864A;   /* decorative only: rules, stars, seal fills */
  --serif: "Palatino", "Georgia", "Iowan Old Style", serif;
  --shadow: 0 1px 3px rgba(23, 34, 56, .16);
}

html, body {
  background:
    linear-gradient(180deg, #F6F3EC 0%, var(--bg) 240px),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  min-height: 100%;
}

/* the top edge respects the phone's status bar when the page runs full-bleed
   (home-screen app, native wrapper); env() is 0 in a normal browser tab */
.screen { display: none; max-width: 560px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) 12px 118px; }
.screen.active { display: block; }

/* ---------- shared flag stripe ---------- */
.flag-stripe {
  height: 5px; border-radius: 3px; margin: 18px auto 0; max-width: 280px;
  background: linear-gradient(90deg, var(--accent) 0 33.3%, #FFFFFF 33.3% 66.6%, var(--blue) 66.6% 100%);
}

/* ---------- title ---------- */
#screen-title.active { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding-bottom: 12px; }
.title-wrap { text-align: center; width: 100%; }
.title-seal { font-size: 20px; letter-spacing: 10px; margin-bottom: 10px; color: var(--brass); font-family: var(--serif); }
.game-title {
  font-family: var(--serif);
  font-size: 32px; letter-spacing: 3px; color: var(--white); font-weight: 700;
  max-width: 480px; margin: 0 auto; line-height: 1.22;
  text-shadow: none;
}
/* the lockup: CAREER small and widely tracked above POLITICIAN in the
   editorial serif — ink does the work, brass and the stripe are the accents */
.game-title .wm-kicker {
  display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: 12px; text-indent: 12px;
  color: var(--text); margin-bottom: 4px;
}
.game-title .wm-main { display: block; font-size: 40px; letter-spacing: 4px; text-indent: 4px; }
.wm-descriptor {
  color: var(--muted); font-size: 12px; letter-spacing: 2.5px; text-indent: 2.5px;
  text-transform: uppercase; margin-top: 12px;
}
.tagline { color: var(--muted); margin: 16px 0 30px; font-style: italic; font-family: var(--serif); font-size: 15px; }

/* ---------- panels ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
h2 { margin-bottom: 10px; font-size: 21px; font-family: var(--serif); letter-spacing: .3px; }
h3 { font-size: 15px; }
.muted { color: var(--muted); font-size: 13px; margin: 6px 0; line-height: 1.5; }

/* ---------- character creation ---------- */
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.cc-grid label, .modal-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
input, select, textarea {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 11px;
  font-size: 15px;
  width: 100%;
  appearance: none;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); }

/* ---------- keyboard focus ----------
   The old rule here was `outline: none` on every focused field, which left
   keyboard users with no idea where they were. :focus-visible restores a
   strong indicator for keyboard/AT navigation without drawing a ring around
   everything a mouse touches. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}
.option:focus-visible, .deb-move:focus-visible, .vtab:focus-visible, .linkish:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* a visible target even where the background is dark */
#modal-content :focus-visible { outline-color: var(--accent); }

/* screen-reader-only live region */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- reduced motion ----------
   Honour the OS setting: the pulsing crisis badge, the fireworks, the modal
   slide and every bar transition become instant rather than animated. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .crisis-badge, .crisis-dot { animation: none !important; opacity: 1 !important; }
  .fw { display: none !important; }
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }

/* ---------- buttons ---------- */
.option {
  display: block; width: 100%;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 13px 15px;
  font-size: 15px;
  text-align: left;
  margin-top: 9px;
  cursor: pointer;
  transition: transform .06s, background .15s, border-color .15s;
}
.option:hover:not(:disabled) { background: var(--panel3); border-color: var(--blue-deep); }
.option:active { transform: scale(.985); }
.option b { display: block; }
.option small { color: var(--muted); font-size: 12px; display: block; margin-top: 3px; line-height: 1.4; }
.option.primary {
  background: var(--accent);
  border-color: var(--accent-dim);
  text-align: center; font-weight: 700; color: #FBF9F3;
}
.option.primary:hover:not(:disabled) { background: var(--accent-bright); border-color: var(--accent-bright); }
.option.danger { border-color: var(--bad); color: var(--bad); }
.option.ghost { background: transparent; border-color: transparent; text-align: center; color: var(--muted); }
.option.big { padding: 16px; font-size: 17px; text-align: center; }
.option:disabled { opacity: .4; cursor: default; }

/* ---------- HUD ---------- */
#hud-top {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
  position: sticky; top: calc(8px + env(safe-area-inset-top)); z-index: 5;
  box-shadow: var(--shadow);
  overflow: hidden;
}
#hud-top::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent) 0 33.3%, #FFFFFF 33.3% 66.6%, var(--blue) 66.6% 100%);
}
.hud-flex { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel3);
  border: 2.5px solid var(--blue);
  font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--white);
  box-shadow: 0 1px 3px rgba(23,34,56,.2);
}
.hud-name { font-size: 18px; font-family: var(--serif); letter-spacing: .3px; display: flex; align-items: center; gap: 7px; }
.party-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 6px currentColor; }
.ideo-tag { font-family: var(--sans, inherit); font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; cursor: help; }
.hud-office { color: var(--blue); font-size: 13.5px; margin-top: 2px; }
.hud-year { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.campaign-tag { color: var(--good); font-weight: 700; }
.pill { background: var(--panel2); border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px; font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ---------- stats ---------- */
.stat { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.stat-label { width: 106px; font-size: 11.5px; color: var(--muted); flex-shrink: 0; text-transform: uppercase; letter-spacing: .4px; }
.stat-val { width: 30px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 600; }
.bar { flex: 1; height: 9px; background: var(--bg-deep); border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(23,34,56,.18); }
.fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-deep)); border-radius: 6px; transition: width .45s ease; }
.fill.danger { background: var(--bad); }
.cap-pips { color: var(--accent-bright); font-size: 13px; letter-spacing: 2.5px; }
.money-row { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--muted); }
.money-row b { color: var(--text); }
.traits-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border-soft); }
.trait-chip { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; font-size: 12.5px; color: var(--muted); cursor: help; transition: border-color .15s; }
.trait-chip:hover { border-color: var(--blue); }
.trait-chip b { color: var(--blue); font-size: 13px; }
.traits-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; opacity: .75; }
.hintable { cursor: help; }
.hintable:active { opacity: .7; }
/* ---------- the four spaces ---------- */
.gview { display: none; }
.gview.active { display: block; }
#view-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 8;
  display: flex; justify-content: center; gap: 2px;
  background: rgba(246, 243, 236, .95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-soft);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}
.vtab {
  flex: 1; max-width: 150px;
  background: transparent; border: none; color: var(--muted);
  font-family: var(--serif); font-size: 12px; letter-spacing: .5px;
  padding: 8px 2px; cursor: pointer; border-radius: 8px;
  border-top: 2px solid transparent;
}
.vtab.active { color: var(--white); border-top-color: var(--accent); background: rgba(166, 58, 58, .08); }
.screen#screen-game { padding-bottom: 130px; }

/* the tile map */
.tile-map {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px;
  margin: 10px 0 6px;
}
.tile {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text);
  border-radius: 4px; border: 1px solid rgba(23, 34, 56, .18);
  cursor: help;
}
.tile-home { outline: 2px solid var(--text); outline-offset: 1px; }
.tile-home::after { content: "⌂"; font-size: 10px; margin-left: 2px; }
.map-sub {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 2px;
  font-size: 12px; color: var(--muted); margin: 16px 0 6px;
  border-bottom: 1px solid var(--border-soft); padding-bottom: 4px;
}
.arena-row, .cal-row, .rec-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px;
}
.arena-row:last-child, .cal-row:last-child, .rec-row:last-child { border-bottom: none; }
.arena-row small, .cal-row small, .rec-row small { display: block; color: var(--muted); font-size: 11.5px; }
.arena-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.arena-lean { border-radius: 6px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.cal-year {
  font-family: var(--serif); font-weight: 700; color: var(--blue);
  background: var(--bg-deep); border-radius: 6px; padding: 2px 8px; font-size: 12.5px;
}
.rec-dead { opacity: .55; }
.rec-dead b { text-decoration: line-through; text-decoration-thickness: 1px; }

/* network cards */
.npc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.npc-card {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 4px;
  padding: 12px 10px; text-align: center; cursor: pointer; color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: border-color .15s, transform .06s;
}
.npc-card:hover { border-color: var(--blue-deep); }
.npc-card:active { transform: scale(.98); }
.npc-face {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel3); border: 2px solid var(--border);
  font-family: var(--serif); font-weight: 700; font-size: 16px;
}
.npc-card b { font-size: 13.5px; }
.npc-card small { color: var(--muted); font-size: 11px; }
.npc-mood { font-size: 11.5px; color: var(--muted); }

/* the debate question */
.debate-q {
  font-family: var(--serif); font-size: 15.5px; font-style: italic;
  border-left: 3px solid var(--accent); background: var(--panel2);
  padding: 10px 12px; margin: 10px 0 4px; line-height: 1.5;
}
.debate-q-tag { display: block; font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); margin-top: 4px; }

/* ---------- election night ---------- */
.night { text-align: center; padding: 6px 0; }
.night-head {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 3px;
  font-size: 13px; color: var(--accent); border-bottom: 3px double var(--text);
  padding-bottom: 8px; margin-bottom: 12px;
}
/* the returns board: one row per candidate on the ballot, however many that is */
.night-slate { display: flex; flex-direction: column; gap: 7px; margin-bottom: 4px; }
.night-row {
  display: grid; grid-template-columns: minmax(104px, 1.2fr) 1.5fr auto;
  align-items: center; gap: 8px; text-align: left;
}
.night-name {
  font-family: var(--serif); font-size: 13px; font-weight: 700; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.night-row.you .night-name { color: var(--blue); font-size: 14.5px; }
.night-bar { display: block; height: 13px; background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 3px; overflow: hidden; }
.night-bar i { display: block; height: 100%; transition: width .35s ease-out; }
.night-pct { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.night-row.you .night-pct { font-size: 22px; color: var(--blue); }
.night-report { font-size: 11.5px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); margin: 8px 0 10px; }
.cty-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px;
  max-width: 320px; margin: 0 auto 10px;
}
.cty { aspect-ratio: 1; background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 2px; transition: background .3s; }
.cty-you { background: var(--blue-deep); }
.cty-opp { background: var(--accent); }
.cty-third { background: var(--brass); }
.night-status { font-family: var(--serif); font-style: italic; font-size: 14px; min-height: 22px; color: var(--text); }

/* ---------- the adviser's brief & unfinished business ---------- */
.briefs-panel { border-left: 3px solid var(--brass); padding: 12px 14px; }
.brief-kicker {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 2.5px;
  font-size: 11px; color: var(--brass); margin-bottom: 5px;
}
.brief-line { font-size: 13.5px; line-height: 1.5; color: var(--text); margin-bottom: 4px; }
.thread-line {
  font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-bottom: 3px;
  padding-left: 12px; position: relative;
}
.thread-line::before { content: "◆"; position: absolute; left: 0; font-size: 7px; top: 5px; color: var(--brass); }
.rec-option { border-left: 3px solid var(--brass); }
.rec-option b { color: var(--white); }

/* the national archives on the title screen */
#archives-line {
  margin-top: 26px; font-size: 12.5px; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: 14px;
  max-width: 380px; margin-left: auto; margin-right: auto;
}
.arch-kicker {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 3px;
  font-size: 11px; color: var(--brass); margin-bottom: 4px;
}
.arch-last { margin-top: 4px; font-style: italic; font-family: var(--serif); }

/* ---------- opening briefing ---------- */
.briefing { padding: 2px 0 4px; }
.briefing-kicker {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 4px;
  font-size: 11px; color: var(--accent); text-align: center;
}
.briefing-title {
  font-family: var(--serif); font-size: 24px; text-align: center; color: var(--white);
  margin: 6px 0 4px; border-bottom: 2px solid var(--border); padding-bottom: 12px;
}
.briefing-item { margin-top: 16px; }
.briefing-item > b { font-size: 15.5px; color: var(--white); display: block; margin-bottom: 4px; }
.briefing-item p { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0; }
.briefing-item p b { color: var(--white); }

/* ---------- decisions as documents ---------- */
.doc-news {
  border-top: 3px double var(--text); border-bottom: 1px solid var(--border);
  padding: 10px 2px 12px; margin-bottom: 4px; background: var(--panel);
}
.np-mast {
  font-family: var(--serif); font-size: 22px; font-weight: 700; text-align: center;
  letter-spacing: 1px; color: var(--white); border-bottom: 1px solid var(--text); padding-bottom: 5px;
}
.np-date {
  text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--muted); padding: 4px 0 8px; border-bottom: 3px double var(--text); margin-bottom: 10px;
}
.np-head { font-family: var(--serif); font-size: 24px; line-height: 1.15; margin: 0 0 8px; color: var(--white); }
.np-body { font-family: var(--serif); font-size: 15px; line-height: 1.55; }
.np-body::first-letter { font-size: 34px; float: left; line-height: .9; padding-right: 6px; font-family: var(--serif); color: var(--accent); }
.doc-memo {
  background: #F6F2E4; border: 1px solid var(--border); border-left: 4px solid var(--brass);
  padding: 12px 14px; margin-bottom: 4px;
  font-family: "Courier New", ui-monospace, monospace;
}
.memo-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); margin-bottom: 8px; }
.memo-line { font-size: 12.5px; color: var(--text); }
.memo-line i { font-style: normal; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
.memo-body { font-size: 13.5px; line-height: 1.55; margin-top: 9px; }
.doc-letter {
  background: var(--panel); border: 1px solid var(--border);
  padding: 16px 16px 12px; margin-bottom: 4px; text-align: left;
  box-shadow: 2px 2px 0 var(--border-soft);
}
.lt-seal { text-align: center; color: var(--brass); font-size: 11px; letter-spacing: 6px; }
.lt-head { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: var(--muted); border-bottom: 1px solid var(--border); padding: 4px 0 8px; margin-bottom: 10px; }
.lt-title { font-family: var(--serif); font-size: 19px; margin: 0 0 7px; color: var(--white); }
.lt-body { font-family: var(--serif); font-size: 14.5px; line-height: 1.6; }
.doc-prompt { margin-top: 10px; }

/* ---------- campaign headquarters ---------- */
.hq-panel {
  border: 1px solid rgba(166, 58, 58, .5);
  background: linear-gradient(180deg, rgba(166, 58, 58, .08) 0%, var(--panel) 55%);
  margin-bottom: 12px;
}
.hq-banner {
  font-family: var(--serif); letter-spacing: 3px; font-size: 12.5px; font-weight: 700;
  color: var(--accent); text-align: center; margin-bottom: 8px;
}
.hq-race { font-size: 13.5px; text-align: center; margin-bottom: 10px; color: var(--text); }
.hq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hq-cell {
  background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 4px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
}
.hq-cell span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.hq-cell b { font-size: 13.5px; color: var(--text); line-height: 1.3; }
.hq-cell small { font-size: 11px; color: var(--muted); }
.hq-note { font-size: 12px; color: var(--muted); margin-top: 8px; text-align: center; }

/* always-visible vitals on phones: no scrolling to remember your own approval */
.mini-stats {
  display: none; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border-soft);
  font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums;
}
.mini-stats i, .modal-stats i {
  font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin-right: 1px;
}
@media (max-width: 999px) {
  .mini-stats { display: flex; }
  /* On a phone the work comes first: the year's moves and the decisions on the
     desk sit above the stat panel, with the record at the bottom. Desktop is
     unaffected — it positions these by grid-area, not document order. */
  #view-desk.active { display: flex; flex-direction: column; }
  /* the button-clearance padding belongs at the end of the page, not mid-column */
  #center-col { order: 1; display: flex; flex-direction: column; padding-bottom: 0; }
  .world-strip { order: 2; }
  #stats { order: 3; }
  #record-col { order: 4; }
  #briefs { order: 1; }
  #hq { order: 2; }
  #actions { order: 3; }
  #docket { order: 4; }
}


/* playbook category tabs */
.ptab-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; border-bottom: 1px solid var(--border-soft); padding-bottom: 8px; }
.ptab {
  background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
  font-family: var(--serif); font-size: 12.5px; letter-spacing: 1px;
  padding: 7px 12px; border-radius: 20px; cursor: pointer;
}
.ptab i { font-style: normal; font-size: 11px; opacity: .65; margin-left: 5px; }
.ptab.active { background: var(--blue); border-color: var(--blue); color: #FBF9F3; }
.ptab-body { min-height: 60px; }

/* character creation: the choices explain themselves */
.cc-grid .cc-wide { grid-column: 1 / -1; }
.cc-note { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin-top: 4px; }
.cc-note b { color: var(--text); }
.cc-note .bad { color: var(--bad); }

/* collapsible action groups (library modal reuses .option cards) */
.act-group { margin-bottom: 2px; }
.act-body { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 7px; }
.act-body .action-btn { width: 100%; height: 100%; margin-top: 0; }

/* the three-slot year plan */
.slot-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.slot {
  border: 1px solid var(--border); border-radius: 4px; padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
  background: var(--panel2); min-height: 88px; justify-content: center;
}
.slot b { font-size: 13px; line-height: 1.3; }
.slot small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.slot-num {
  font-family: var(--serif); font-size: 11px; color: var(--brass);
  border: 1px solid var(--border); border-radius: 50%; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.slot-filled { background: var(--panel); border-style: solid; }
.slot-filled small { color: var(--good); }
.slot-open {
  cursor: pointer; border: 1.5px dashed var(--accent); background: rgba(166, 58, 58, .05);
  color: var(--text); transition: background .15s, transform .06s;
}
.slot-open:hover { background: rgba(166, 58, 58, .1); }
.slot-open:active { transform: scale(.98); }
.slot-open b { color: var(--accent); }
.slot-locked { opacity: .45; border-style: dashed; }
.act-group summary.group-label {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 8px;
}
.act-group summary.group-label::-webkit-details-marker { display: none; }
.act-group summary.group-label::before { content: "▸"; font-size: 11px; color: var(--muted); transition: transform .15s; }
.act-group[open] summary.group-label::before { transform: rotate(90deg); }
.group-count {
  font-size: 11px; color: var(--muted); background: var(--bg-deep);
  border-radius: 8px; padding: 1px 7px; font-family: var(--sans, inherit);
}

/* crisis dressing: the world strip chip and the desk item */
.crisis-chip {
  color: var(--bad); font-weight: 700;
  animation: crisis-pulse 2.2s ease-in-out infinite;
}
.crisis-chip b { color: var(--bad); letter-spacing: .5px; }
@keyframes crisis-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.docket-item.crisis-item {
  border: 1px solid rgba(166, 58, 58, .45);
  background: rgba(166, 58, 58, .06);
  border-radius: 4px; padding: 10px;
}

/* election-night fireworks */
#fx-fireworks {
  position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden;
}
.fw-p {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  opacity: 0; animation: fw-fly 1.35s cubic-bezier(0.12, 0.65, 0.4, 1) forwards;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.35);
}
@keyframes fw-fly {
  0%   { transform: translate(0, 0) scale(1.1); opacity: 1; }
  65%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

#hint-pop {
  display: none; position: absolute; z-index: 60;
  background: var(--bg-deep);
  border: 1px solid var(--blue-deep);
  border-radius: 11px;
  padding: 11px 13px;
  font-size: 13px; line-height: 1.5; color: var(--text);
  box-shadow: 0 4px 16px rgba(23, 34, 56, .28);
  animation: hintfade .12s ease-out;
}
@keyframes hintfade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.upcoming-race { padding: 9px 13px; font-size: 13px; color: var(--muted); border: 1px dashed var(--border); border-radius: 4px; margin-top: 6px; }
.upcoming-race b { color: var(--text); }

/* ---------- career & world strips ---------- */
.career-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.career-chip {
  background: var(--panel);
  border: 1px solid var(--border-soft); border-radius: 13px; padding: 10px 4px 8px; text-align: center;
  box-shadow: var(--shadow);
}
.career-chip span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.career-chip b { font-size: 20px; color: var(--white); font-family: var(--serif); }
.world-strip {
  display: flex; justify-content: space-between; gap: 8px;
  background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 4px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 12px; color: var(--muted); flex-wrap: wrap;
}
.world-strip b { color: var(--text); }

/* ---------- actions ---------- */
.ap-row { font-size: 13px; color: var(--muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 1px; }
.ap-row b { color: var(--blue); font-size: 16px; }
.group-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted);
  margin: 16px 0 3px;
}
.group-label::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.action-btn {
  display: block; width: 100%; text-align: left;
  background: var(--panel2); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: 4px; padding: 12px 14px; margin-top: 7px; font-size: 14px; cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s;
}
.action-btn:hover:not(:disabled) { background: var(--panel3); border-color: var(--blue-deep); }
.action-btn:active { transform: scale(.99); }
.action-btn:disabled { opacity: .38; cursor: default; }
.action-btn small { color: var(--muted); display: block; font-size: 12.5px; margin-top: 2px; line-height: 1.45; }

.sticky-bottom {
  position: fixed; bottom: calc(58px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: calc(100% - 24px); max-width: 536px; z-index: 6;
  box-shadow: 0 4px 16px rgba(23, 34, 56, .28);
}
/* while the year still has moves in it, the button stands down */
#end-year-btn.not-ready {
  background: var(--panel);
  border-color: var(--border);
  color: var(--muted);
  font-weight: 400; font-size: 13px; padding: 10px;
  box-shadow: var(--shadow);
}
#end-year-btn.not-ready:hover:not(:disabled) { background: var(--panel3); border-color: var(--blue-deep); }
/* the fixed End Year button must never sit on top of the last card — the
   clearance lives on the desk itself, since the columns get reordered on mobile */
#center-col { padding-bottom: 0; }
@media (min-width: 1080px) {
  #center-col { padding-bottom: 20px; }
  /* desktop: actions flow in two columns so the center column stays in view */
  .act-body { grid-template-columns: 1fr 1fr; }
}

/* ---------- the docket & people ---------- */
.docket-panel { border-color: var(--accent-dim); }
.docket-title { font-family: var(--serif); letter-spacing: 1px; font-size: 14px; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 10px; }
.docket-item { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.docket-item:last-child { border-bottom: none; }
.docket-item b { font-size: 15px; }
.docket-item .muted { margin: 4px 0 8px; }
.docket-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.docket-btn {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 8px 11px; font-size: 12.5px; cursor: pointer; line-height: 1.3;
  transition: background .15s, border-color .15s;
}
.docket-btn:hover { background: var(--panel3); border-color: var(--accent); }
.people-row { display: flex; flex-wrap: wrap; gap: 7px; }
.npc-chip {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 12px; font-size: 12px; color: var(--muted); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.npc-chip:hover { border-color: var(--blue); background: var(--panel3); }
.alloc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.alloc-grid label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.alloc-grid input { padding: 8px; }
.preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.alloc-total { font-size: 13px; font-weight: 700; color: var(--good); padding: 6px 0; }
.alloc-total.bad-total { color: var(--bad); }
.modal-stats {
  display: flex; flex-wrap: wrap; gap: 5px 12px;
  background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 4px;
  padding: 8px 11px; margin-bottom: 12px;
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  /* pinned while the modal scrolls: decisions deserve visible numbers */
  position: sticky; top: -22px; z-index: 3;
  box-shadow: 0 2px 8px rgba(23, 34, 56, .16);
}
.npc-chip b { color: var(--text); font-weight: 600; }
.npc-chip small { text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }
.ap-chip { color: var(--blue); }
.obit { font-family: var(--serif); font-size: 15.5px; line-height: 1.65; margin: 12px 0; padding: 12px; background: var(--bg-deep); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; }

/* ---------- the record (log) ---------- */
.log-title {
  font-family: var(--serif); text-align: center;
  color: var(--text); text-transform: uppercase; letter-spacing: 3px; font-size: 14px;
  padding-bottom: 9px; margin-bottom: 4px;
  border-bottom: 2px solid var(--border);
  position: relative;
}
.log-title::after { content: "★  ★  ★"; display: block; font-size: 7px; color: var(--muted); letter-spacing: 6px; margin-top: 5px; }
.log-entry { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; line-height: 1.5; }
.log-entry:last-child { border-bottom: none; }
.log-year {
  color: var(--blue); font-weight: 700; font-size: 11px; flex-shrink: 0;
  background: var(--bg-deep); border-radius: 6px; padding: 2px 6px; height: fit-content; margin-top: 2px;
}
.log-entry.bad { border-left: 3px solid var(--bad); padding-left: 9px; }
.log-entry.good { border-left: 3px solid var(--good); padding-left: 9px; }
.fx { display: inline-block; font-size: 11px; border-radius: 5px; padding: 0 5px; margin: 1px 1px; white-space: nowrap; }
.fx.good { background: rgba(46, 125, 70, .12); color: var(--good); }
.fx.bad { background: rgba(166, 58, 46, .12); color: var(--bad); }

/* ---------- modal ---------- */
#modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 20;
  overscroll-behavior: contain;
  background: rgba(23, 34, 56, .42);
  backdrop-filter: blur(3px);
  align-items: flex-end; justify-content: center;
}
#modal-overlay.open { display: flex; }
.modal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  width: 100%; max-width: 560px;
  max-height: 86vh; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: slideup .24s ease-out;
  position: relative;
}
.modal-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent) 0 33.3%, #FFFFFF 33.3% 66.6%, var(--blue) 66.6% 100%);
}
@keyframes slideup { from { transform: translateY(44px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-card h2 { color: var(--white); font-family: var(--serif); }
.modal-card p { line-height: 1.55; margin: 9px 0; font-size: 15px; }
.modal-card label { margin-top: 10px; }
.writein { margin-top: 15px; border-top: 1px dashed var(--border); padding-top: 13px; }
.writein textarea { resize: none; }
.vote-line {
  font-size: 19px; text-align: center; padding: 12px;
  background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 4px; margin: 12px 0;
  font-family: var(--serif);
}
.vote-line b { color: var(--blue); }
.factors { list-style: none; margin: 8px 0; }
.factors li { padding: 5px 0; font-size: 13.5px; border-bottom: 1px dotted var(--border-soft); }
.factors li:last-child { border-bottom: none; }
.factors li.good::before { content: "▲ "; color: var(--good); }
.factors li.bad::before { content: "▼ "; color: var(--bad); }

/* ---------- legacy ---------- */
#legacy-content h1 { color: var(--white); font-size: 28px; font-family: var(--serif); }
.how { font-size: 15px; margin: 8px 0; }
.rep {
  background: var(--bg-deep); border: 1px solid var(--accent-dim); border-radius: 4px;
  padding: 14px; margin: 14px 0; font-family: var(--serif); font-size: 16px;
}
.score-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 14px; }
.score-row span { width: 100px; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .5px; }
.score-row b { width: 30px; text-align: right; font-family: var(--serif); font-size: 16px; }
.legacy-line { margin: 14px 0; font-size: 17px; color: var(--blue); font-family: var(--serif); }
.tl { padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; line-height: 1.45; }
.tl-year { color: var(--blue); font-weight: 700; margin-right: 7px; }
.tl.bad { border-left: 3px solid var(--bad); padding-left: 9px; }
.tl.good { border-left: 3px solid var(--good); padding-left: 9px; }

@media (min-width: 700px) {
  body { padding-top: 20px; }
}

/* ---------- desktop layout: nav rail becomes a masthead bar ---------- */
@media (min-width: 1080px) {
  #screen-game.active { max-width: 1160px; padding: 20px 20px 60px; }
  #hud-top { position: static; }
  #view-nav {
    position: static; background: transparent; backdrop-filter: none;
    border-top: none; border-bottom: 2px solid var(--border);
    padding: 0; margin-bottom: 16px; justify-content: flex-start; gap: 6px;
  }
  .vtab { flex: none; padding: 10px 22px; font-size: 14px; border-radius: 0; border-top: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
  .vtab.active { border-bottom-color: var(--accent); background: transparent; }
  .screen#screen-game { padding-bottom: 60px; }
  /* the desk: dossier left, work surface center, the record right */
  #view-desk.active {
    display: grid;
    grid-template-columns: 300px minmax(400px, 1fr) minmax(280px, 360px);
    grid-template-areas: "stats center record" "world center record" "end center record" ". center record";
    gap: 16px; align-items: start;
  }
  #stats { grid-area: stats; margin: 0; }
  .world-strip { grid-area: world; margin: 0; }
  #center-col { grid-area: center; padding-bottom: 0; }
  #center-col .panel { margin-bottom: 14px; }
  #record-col {
    grid-area: record;
    position: sticky; top: 16px;
    max-height: calc(100vh - 32px); overflow-y: auto;
  }
  #end-year-btn {
    grid-area: end;
    position: static; transform: none; width: 100%; max-width: none;
    box-shadow: var(--shadow);
  }
  #view-map, #view-network { max-width: 780px; margin: 0 auto; }
  #modal-overlay { align-items: center; }
  .modal-card { border-radius: 8px; max-width: 540px; }
  #screen-legacy { max-width: 760px; }
}

/* ============================================================
   THE DEBATE — a televised exchange, not a health bar
   ============================================================ */
.deb-head {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 2.5px;
  font-size: 12px; color: var(--accent); text-align: center;
  border-bottom: 3px double var(--text); padding-bottom: 8px; margin-bottom: 12px;
}
.deb-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; }
.deb-cand { text-align: center; min-width: 0; }
.deb-cand b { display: block; font-family: var(--serif); font-size: 14px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deb-cand small { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.deb-face {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--border);
  background: var(--panel2); font-family: var(--serif); font-weight: 700; font-size: 15px;
}
.deb-face.you { border-color: var(--blue); color: var(--blue); }
.deb-face.opp { border-color: var(--accent); color: var(--accent); }
.deb-comp { height: 7px; background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 4px; overflow: hidden; margin: 5px 0 2px; }
.deb-comp i { display: block; height: 100%; transition: width .35s; }
.deb-comp i.you { background: var(--blue-deep); }
.deb-comp i.opp { background: var(--accent); }
.deb-vs { font-family: var(--serif); font-style: italic; color: var(--muted); padding-top: 14px; }
.deb-tags { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 4px; }
.deb-tag { font-size: 11px; padding: 1px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); }
.deb-tag.bad { color: var(--bad); border-color: rgba(166,58,46,.4); }
.deb-tag.good { color: var(--good); border-color: rgba(46,125,70,.4); }

.deb-mom { position: relative; height: 10px; background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 5px; margin: 12px 0 3px; overflow: hidden; }
.deb-mom-fill { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, var(--blue-deep), var(--blue)); }
.deb-mom-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); }
.deb-mom-label { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 10px; }

.deb-q {
  background: #F6F2E4; border: 1px solid var(--border); border-left: 4px solid var(--brass);
  padding: 11px 13px; border-radius: 4px; font-family: var(--serif); font-size: 15px; line-height: 1.45; margin-bottom: 10px;
}
.deb-topic { display: block; font-family: -apple-system, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--brass); margin-bottom: 5px; }
.deb-exchange { background: var(--panel2); border: 1px solid var(--border-soft); border-radius: 4px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.deb-advice { font-size: 12.5px; line-height: 1.45; color: var(--muted); font-family: var(--serif); font-style: italic; margin-bottom: 10px; padding-left: 10px; border-left: 2px solid var(--border); }
.deb-advice i { font-style: normal; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; display: block; margin-bottom: 2px; }
.deb-blocs { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.bloc { font-size: 11px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--border); }
.bloc.up { color: var(--good); border-color: rgba(46,125,70,.45); }
.bloc.down { color: var(--bad); border-color: rgba(166,58,46,.45); }

.deb-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.deb-move {
  text-align: left; background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; padding: 9px 10px; cursor: pointer; transition: border-color .15s, background .15s;
  font-size: 13px; line-height: 1.35;
}
.deb-move:hover:not(:disabled) { background: var(--panel3); border-color: var(--blue-deep); }
.deb-move b { display: block; font-size: 13px; line-height: 1.25; }
/* title and its status chip share a row; the chip never pushes the name around */
.deb-title { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.deb-title b { flex: 1; min-width: 0; }
.deb-title .deb-chip { flex-shrink: 0; white-space: nowrap; }
/* family on the left, composure cost pinned right — a float here collided
   with the title whenever a name wrapped to two lines */
.deb-move .deb-fam {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--brass); margin: 3px 0 4px;
}
.deb-move small { display: block; font-size: 11px; line-height: 1.35; color: var(--muted); }
.deb-move:disabled { opacity: .45; cursor: default; }
.deb-move.worn { border-style: dashed; }
@media (max-width: 420px) { .deb-moves { grid-template-columns: 1fr; } }

.scout { background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin: 10px 0; }
.scout-head { font-family: var(--serif); text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: var(--accent); margin-bottom: 6px; }
.scout-row { font-size: 12.5px; line-height: 1.5; }
.scout-row i { font-style: normal; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-right: 6px; }

.deb-blocs-panel { margin: 8px 0 12px; }
.deb-bloc-row { display: grid; grid-template-columns: 100px 1fr 34px; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 12.5px; }
.deb-bloc-bar { height: 9px; background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 4px; overflow: hidden; }
.deb-bloc-bar i { display: block; height: 100%; }
.deb-bloc-bar i.up { background: var(--good); }
.deb-bloc-bar i.down { background: var(--bad); }
.deb-bloc-row b.good { color: var(--good); text-align: right; }
.deb-bloc-row b.bad { color: var(--bad); text-align: right; }

/* ---------- the debate, round 2: a live opponent ---------- */
.deb-transcript {
  background: var(--panel2); border: 1px solid var(--border-soft); border-radius: 4px;
  padding: 4px 12px; margin-bottom: 10px;
}
.deb-beat { font-size: 12.5px; line-height: 1.5; padding: 7px 0; border-bottom: 1px dashed var(--border-soft); }
.deb-beat:last-child { border-bottom: none; }
.deb-speaker {
  display: inline-block; font-family: var(--serif); font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--blue); margin-right: 5px;
}
.deb-speaker.opp { color: var(--accent); }
.deb-beat.mod .deb-speaker { color: var(--brass); }
.deb-beat.room { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.deb-round-chip {
  font-family: var(--serif); font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  padding: 2px 8px; border-radius: 3px; border: 1px solid var(--border);
}
.deb-round-chip.you { color: #FBF9F3; background: var(--blue); border-color: var(--blue); }
.deb-round-chip.them { color: #FBF9F3; background: var(--accent); border-color: var(--accent-dim); }
.deb-round-chip.even { color: var(--muted); }
.deb-reveal {
  background: rgba(166, 58, 58, .07); border: 1px solid rgba(166, 58, 58, .35); border-left: 4px solid var(--accent);
  border-radius: 4px; padding: 9px 12px; margin-bottom: 8px; font-size: 13px; line-height: 1.45;
}
.deb-reveal-k {
  display: block; font-family: var(--serif); font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--accent); margin-bottom: 3px;
}
.deb-init { font-size: 12px; color: var(--muted); margin-bottom: 8px; line-height: 1.45; }
.deb-init b { color: var(--bad); }
.deb-chip {
  float: right; font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  padding: 1px 6px; border-radius: 9px; border: 1px solid var(--border); margin-left: 6px;
}
.deb-chip.good { color: var(--good); border-color: rgba(46,125,70,.5); background: rgba(46,125,70,.07); }
.deb-chip.bad { color: var(--bad); border-color: rgba(166,58,46,.5); background: rgba(166,58,46,.06); }

/* ---------- portraits ---------- */
.pt { display: block; border-radius: 50%; }
.avatar { padding: 0; border: none; background: none; box-shadow: none; width: 54px; height: 54px; flex-shrink: 0; }
.avatar .pt { box-shadow: 0 1px 3px rgba(23, 34, 56, .22); }
.npc-face { width: 46px; height: 46px; border: none; background: none; display: block; margin: 0 auto 4px; border-radius: 50%; }
.npc-face.warm .pt { box-shadow: 0 0 0 2px rgba(46, 125, 70, .5); }
.npc-face.cold .pt { box-shadow: 0 0 0 2px rgba(166, 58, 46, .5); }
.deb-face { width: 56px; height: 56px; border: none; background: none; display: inline-block; }
.deb-face .pt { box-shadow: 0 1px 4px rgba(23, 34, 56, .25); }
.legacy-portrait { display: flex; justify-content: center; margin-bottom: 10px; }
.legacy-portrait .pt { box-shadow: 0 2px 8px rgba(23, 34, 56, .25); }
/* the face you're building, on the creation screen */
.cc-preview { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.cc-preview #cc-portrait { flex-shrink: 0; }
.cc-preview .cc-note { margin-top: 0; font-family: var(--serif); font-size: 14px; color: var(--text); }

/* ---------- debate: hand slots, spoken lines, live audience ---------- */
.deb-slot-label {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 2px;
  font-size: 11px; color: var(--brass); margin: 12px 0 5px;
  border-top: 1px solid var(--border-soft); padding-top: 8px;
}
.deb-move.picked { border-color: var(--blue); background: rgba(58, 86, 128, .09); }
.deb-quote {
  font-family: var(--serif); font-size: 13.5px; line-height: 1.5; font-style: italic;
  padding: 2px 0 5px; color: var(--text);
}
.deb-quote.opp { color: var(--accent-dim); }
.deb-mom-row { display: flex; align-items: center; gap: 7px; margin: 12px 0 3px; }
.deb-mom-row .deb-mom { flex: 1; margin: 0; }
.deb-mom-name { font-family: var(--serif); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.deb-mom-name.you { color: var(--blue); }
.deb-mom-name.opp { color: var(--accent); }
.deb-mom-fill.you { background: linear-gradient(90deg, var(--blue-deep), var(--blue)); }
.deb-mom-fill.opp { background: linear-gradient(90deg, var(--accent), var(--accent-dim)); }
.deb-blocbar { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 10px; }
.bstat {
  font-size: 11px; letter-spacing: .5px; padding: 2px 7px; border-radius: 10px;
  border: 1px solid var(--border-soft); color: var(--muted); background: var(--panel2);
  font-variant-numeric: tabular-nums;
}
.bstat.up { color: var(--good); border-color: rgba(46,125,70,.4); }
.bstat.down { color: var(--bad); border-color: rgba(166,58,46,.4); }
.scout.compact { margin: 8px 0 10px; padding: 8px 11px; }
.face-btn {
  margin-top: 6px; background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 20px; padding: 3px 10px; font-size: 11px; cursor: pointer; font-family: inherit;
}
.face-btn:hover { border-color: var(--blue-deep); color: var(--text); }
.deb-cost { font-style: normal; font-size: 11px; letter-spacing: .3px; color: var(--muted); text-transform: none; white-space: nowrap; flex-shrink: 0; }
.deb-cost.gain { color: var(--good); }
.deb-comp-warn { font-size: 11px; line-height: 1.3; color: var(--bad); margin-top: 3px; }

/* ---------- the format fork: debate vs. town hall ---------- */
.deb-format { display: grid; gap: 9px; margin: 12px 0 4px; }
.deb-format .deb-move { text-align: left; }
.deb-format .deb-move b { font-size: 15px; }
.deb-format .deb-move small { line-height: 1.5; }

/* ---------- loadout: what you're actually walking on with ---------- */
.deb-drilled { font-style: normal; color: var(--good); }
.deb-move .deb-drilled::before { content: "· "; color: var(--brass); }
.deb-manifest {
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel2);
  padding: 9px 11px; margin: 12px 0 6px;
}
.deb-manifest .deb-slot-label { margin-top: 0; border-top: none; padding-top: 0; }
.deb-mani-row { font-size: 12.5px; line-height: 1.55; padding: 2px 0; }
.deb-mani-row i {
  font-style: normal; text-transform: uppercase; font-size: 11px; letter-spacing: 1px;
  color: var(--muted); margin-right: 6px;
}
.deb-mani-note { font-size: 11px; color: var(--muted); margin-top: 5px; }

/* ---------- the record: doors that a stat will never open ---------- */

/* ---------- the town hall ---------- */
.th-score { font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 3px; }
.th-score b { font-size: 16px; color: var(--text); }
.th-asker {
  font-family: var(--serif); font-size: 12.5px; line-height: 1.55; color: var(--muted);
  border-left: 2px solid var(--border); padding: 2px 0 2px 9px; margin: 10px 0 4px;
}
/* the answers are the thing you're actually reading — give them room */
.th-answer { padding: 11px 12px; }
.th-answer b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.th-aids { display: grid; gap: 6px; margin-top: 10px; }
.th-aids .option { margin: 0; font-size: 12.5px; }
.th-final {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 12px;
}
.th-final-cell {
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel2);
  padding: 7px 4px; text-align: center;
}
.th-final-cell b { display: block; font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.th-final-cell small { display: block; font-size: 11px; color: var(--muted); letter-spacing: .3px; margin-top: 2px; }

/* ============================================================
   RELEASE UI — menu, about/privacy, import, diagnostics, beta badge
   ============================================================ */
.beta-badge {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 2.5px;
  font-size: 11px; color: var(--brass); margin: 10px 0 16px;
}
.title-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 18px; }
.linkish {
  background: none; border: none; color: var(--muted); font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 2px;
}
.linkish:hover { color: var(--accent); }
.title-warn {
  margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--bad);
  border: 1px solid rgba(166,58,46,.35); background: rgba(166,58,46,.06);
  border-radius: 4px; padding: 9px 12px; text-align: left;
}
.vtab-menu { margin-left: auto; }
.menu-version {
  font-size: 11.5px; color: var(--muted); text-align: center;
  margin: 14px 0 4px; letter-spacing: .3px;
}
.conf-target {
  border-left: 3px solid var(--accent); padding: 6px 0 6px 11px;
  margin: 10px 0; font-size: 14.5px;
}
.about-h {
  font-family: var(--serif); font-size: 13px; text-transform: uppercase;
  letter-spacing: 1.6px; color: var(--accent); margin: 14px 0 6px;
}
.diag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.5;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 4px;
  padding: 10px; margin: 10px 0; max-height: 220px; overflow: auto; white-space: pre-wrap; color: var(--muted);
}


/* ============================================================
   MINIMUM LEGIBLE TYPE
   9.5px reads well in a mockup and badly in a forty-minute session, so the
   floor for anything carrying meaning is 11px. The only exception is the
   decorative home glyph on the map.
   ============================================================ */

/* ============================================================
   TITLE KEY ART
   ============================================================ */
.key-art-holder {
  max-width: 520px; margin: 4px auto 18px; border: 1px solid var(--border);
  border-radius: 5px; overflow: hidden; box-shadow: var(--shadow); background: var(--panel2);
}
.key-art { display: block; width: 100%; height: auto; }
@media (max-height: 720px) { .key-art-holder { max-width: 400px; margin-bottom: 12px; } }

/* ============================================================
   THE FRONT PAGE — milestone screens
   ============================================================ */
.fp {
  background: #FBF8EF;
  border: 1px solid var(--border);
  padding: 16px 18px 14px;
  margin: 2px 0 4px;
  position: relative;
  box-shadow: 0 1px 4px rgba(23,34,56,.14);
}
.fp-rule { height: 3px; background: var(--text); margin: 0 0 6px; }
.fp-rule.thin { height: 1px; background: var(--border); margin: 6px 0; }
.fp-masthead {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(20px, 6.4vw, 34px); letter-spacing: 2px;
  text-align: center; color: var(--text); line-height: 1.05;
}
.fp-dateline {
  display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--serif); font-size: 11px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted); padding: 2px 0 6px;
}
.fp-headline {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(24px, 8vw, 42px); line-height: 1.06; letter-spacing: -.4px;
  text-align: center; margin: 12px 0 8px; color: var(--white);
}
.fp-deck {
  font-family: var(--serif); font-style: italic; text-align: center;
  font-size: clamp(13px, 3.6vw, 16px); line-height: 1.45; color: var(--muted);
  padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.fp-body { font-family: var(--serif); font-size: 14px; line-height: 1.62; color: var(--text); }
.fp-body p { margin-bottom: 9px; }
.fp-body p:first-of-type::first-letter {
  float: left; font-size: 42px; line-height: .84; padding: 3px 7px 0 0;
  font-weight: 700; color: var(--accent);
}
.fp-cut { float: right; width: 96px; margin: 2px 0 8px 12px; text-align: center; }
.fp-cut svg, .fp-cut > span { display: block; margin: 0 auto; filter: grayscale(.35) contrast(1.05); }
.fp-cut figcaption {
  font-size: 11px; line-height: 1.35; color: var(--muted); margin-top: 5px;
  border-top: 1px solid var(--border); padding-top: 4px; font-style: italic;
}
.fp-body::after { content: ""; display: block; clear: both; }
.fp-stamp {
  position: absolute; right: 10px; bottom: 8px;
  font-family: var(--serif); font-weight: 700; font-size: 12px;
  letter-spacing: 2.5px; color: var(--accent);
  border: 2px solid var(--accent); border-radius: 3px;
  padding: 4px 9px; transform: rotate(-6deg); opacity: .82;
  background: rgba(251,248,239,.75);
}
@media (min-width: 460px) { .fp-body { column-count: 2; column-gap: 20px; } .fp-cut { width: 84px; } }

/* ============================================================
   THE DESK — collapsed profile
   ============================================================ */

/* ============================================================
   THE NETWORK — grouping, household, empty state
   ============================================================ */
.net-group-label {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 2px;
  font-size: 11px; color: var(--brass); margin: 14px 0 7px;
  border-top: 1px solid var(--border-soft); padding-top: 9px;
  display: flex; align-items: baseline; gap: 8px;
}
.net-group-label:first-of-type { border-top: none; padding-top: 0; margin-top: 4px; }
.fam-pip {
  font-size: 11px; letter-spacing: .3px; text-transform: none;
  border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; color: var(--muted);
}
.fam-pip.good { color: var(--good); border-color: rgba(46,125,70,.4); }
.fam-pip.bad { color: var(--bad); border-color: rgba(166,58,46,.4); }
.house-list { display: grid; gap: 5px; }
.house-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  border-left: 2px solid var(--brass); padding: 4px 0 4px 9px;
}
.house-row b { font-size: 14px; }
.house-row small { color: var(--muted); font-size: 11px; text-align: right; }
.house-row.muted-row { border-left-color: var(--border); opacity: .7; }
.net-empty-lead { font-family: var(--serif); font-size: 14.5px; font-style: italic; margin: 4px 0 12px; }
.net-seeds { display: grid; gap: 7px; }
.net-seed {
  border: 1px dashed var(--border); border-radius: 4px; padding: 9px 11px;
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(201,195,180,.10) 6px 12px);
  opacity: .78;
}
.net-seed b { display: block; font-size: 13.5px; color: var(--muted); }
.net-seed small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* ============================================================
   MODE IDENTITIES — the debate is broadcast, the town hall is a room
   ============================================================ */
.deb-broadcast {
  background: linear-gradient(180deg, #223A5E, #1B3050);
  color: #EFEADC; border-radius: 4px 4px 0 0;
  margin: -2px -4px 10px; padding: 9px 12px;
  border: none; position: relative;
}
/* on its own line: an absolutely-positioned badge collided with the title
   whenever the office name wrapped to two lines on a phone */
.deb-broadcast::before {
  content: "● LIVE"; display: block; text-align: center;
  font-size: 11px; letter-spacing: 1.6px; color: #E8837A; margin-bottom: 3px;
}
.th-mode .th-head {
  background: linear-gradient(180deg, #F6EFDC, #EFE6CE);
  color: var(--accent-dim); border: 1px solid #DCCFA8; border-bottom-width: 2px;
  border-radius: 4px; margin: -2px -4px 10px; padding: 9px 12px;
}
.th-mode .deb-q {
  border-left: 3px solid var(--brass);
  background: linear-gradient(90deg, rgba(166,134,74,.08), transparent 70%);
}
.th-mode .th-asker { border-left-color: var(--brass); }

/* ============================================================
   FAMILY EVENTS — a person, not a memo
   ============================================================ */
.fam-header {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--border); border-left: 3px solid var(--brass);
  background: var(--panel2); border-radius: 4px;
  padding: 9px 12px; margin-bottom: 12px;
}
.fam-face { flex-shrink: 0; line-height: 0; }
.fam-face svg { border-radius: 50%; border: 2px solid var(--brass); background: var(--panel); }
.fam-who { flex: 1; min-width: 0; }
.fam-who b { display: block; font-size: 15px; font-family: var(--serif); }
.fam-who small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.fam-state {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px;
  color: var(--muted); white-space: nowrap;
}
.fam-state.good { color: var(--good); border-color: rgba(46,125,70,.4); }
.fam-state.bad { color: var(--bad); border-color: rgba(166,58,46,.4); }
/* the stamp sits in its own gutter rather than over the last line */
.fp { padding-bottom: 46px; }
.fp-stamp { bottom: 12px; }
/* the collapsed profile reads as one line, not three columns fighting */
@media (max-width: 520px) {
      }

/* ============================================================
   TOUCH TARGETS
   The 44px guideline applies to anything a thumb has to hit. The bottom nav,
   the trait/category chips, the map hints and the face reroll were all under it.
   ============================================================ */
.vtab { min-height: 46px; }
.face-btn { min-height: 40px; padding: 8px 14px; }
.trait-chip { min-height: 34px; display: inline-flex; align-items: center; padding: 6px 11px; }
.tile { min-width: 26px; min-height: 26px; }
.linkish { min-height: 40px; padding: 8px 6px; }
.bstat, .bloc, .deb-chip, .pill { padding: 4px 9px; }
@media (max-width: 520px) {
  .vtab { min-height: 50px; font-size: 13px; }
  .npc-card { min-height: 120px; }
}

/* ---------- the chamber: the whip board ---------- */
.whip-status {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 4px;
  padding: 7px 10px; margin: 10px 0;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.whip-status i { font-style: normal; text-transform: uppercase; letter-spacing: .5px; font-size: 10px; }
.wb-oppo { border-left: 3px solid var(--bad); padding-left: 8px; }
.whip-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 10px 0 12px; }
.whip-colhead {
  font-size: 9px; text-transform: uppercase; letter-spacing: .6px; text-align: center;
  color: var(--muted); border-bottom: 2px solid var(--border); padding-bottom: 3px; margin-bottom: 4px;
  font-weight: 700;
}
.whip-col:first-child .whip-colhead { color: var(--good); border-color: var(--good); }
.whip-col:last-child .whip-colhead { color: var(--bad); border-color: var(--bad); }
.whip-card {
  display: block; width: 100%; text-align: left;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 5px; margin-bottom: 4px; font-size: 10.5px; line-height: 1.3;
  color: var(--text); overflow: hidden;
}
.whip-card b { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whip-card small { display: block; color: var(--muted); font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whip-card:disabled { opacity: .85; }
.whip-card.wc-locked { border-color: var(--brass); background: rgba(166, 134, 74, .08); }
.whip-card.wc-target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); opacity: 1; cursor: pointer; }
/* ---------- the roll call ---------- */
.rc-list { margin: 10px 0; }
.rc-card {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--panel2);
  padding: 7px 10px; margin-bottom: 5px; font-size: 13px;
  opacity: 0; animation: rc-reveal .45s ease-out forwards;
}
.rc-card small { color: var(--muted); }
.rc-vote { margin-left: auto; font-weight: 800; letter-spacing: 1.5px; font-size: 12px; }
.rc-card.yea { border-left: 3px solid var(--good); } .rc-card.yea .rc-vote { color: var(--good); }
.rc-card.nay { border-left: 3px solid var(--bad); } .rc-card.nay .rc-vote { color: var(--bad); }
.rc-tally {
  text-align: center; font-family: var(--serif); font-size: 17px; font-weight: 700;
  letter-spacing: 1px; padding: 10px; margin: 10px 0;
  border-top: 2px solid var(--border); border-bottom: 2px solid var(--border);
  opacity: 0; animation: rc-reveal .5s ease-out forwards;
}
.rc-tally.good { color: var(--good); } .rc-tally.bad { color: var(--bad); }
@keyframes rc-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }