/* Prime Minister, a British political sandbox.
   BOLD edition: vivid colour, big numbers, badges, depth and motion, while
   keeping a British identity (Commons green, division red, despatch-box red,
   a thread of gold). Every class hook from the engine is preserved. */

:root {
  /* Surfaces */
  --paper:      #eaeef4;   /* page background, cool light */
  --paper-2:    #f3f6fa;
  --paper-card: #ffffff;   /* raised surfaces */
  --ink:        #141b27;   /* primary text */
  --ink-soft:   #495469;   /* secondary text */
  --ink-faint:  #8b94a6;   /* captions, fine print */
  --rule:       #dce3ec;   /* hairlines, borders */
  --rule-soft:  #eef2f7;
  --max:        1640px;    /* near full-screen dashboard */
  --accent:     #16a85a;   /* per-scenario brand colour (set in JS) */

  /* Vivid accents */
  --green:      #16a85a;   /* government / passed / good */
  --green-bg:   #e3f6eb;
  --green-d:    #0f7d43;
  --red:        #e23b32;   /* blocked / danger / the red box */
  --red-bg:     #fdebe9;
  --red-d:      #b62a23;
  --blue:       #2f62d4;   /* opposition */
  --blue-bg:    #e7eefb;
  --gilt:       #d49a1f;   /* the crown / gold */
  --gilt-bg:    #fbf0d6;
  --centre:     #6b7686;

  /* Per-scenario theming hooks (overridden by body[data-theme="…"]) */
  --statusbar-bg: linear-gradient(180deg, #141b27, #1d2738);
  --statusbar-ink: #ffffff;
  --statusbar-sub: #aeb8c8;
  --crisis-tint: var(--red-bg);
  --body-glow: radial-gradient(1200px 480px at 50% -120px, #dfe7f1 0%, transparent 70%);
  --section-label-ink: var(--ink-soft);

  --shadow:     0 1px 2px rgba(20,27,39,.06), 0 4px 14px rgba(20,27,39,.07);
  --shadow-lg:  0 8px 30px rgba(20,27,39,.16);
  --r:          12px;      /* card radius */

  --serif: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: var(--serif);   /* headline voice, overridden per scenario theme */
}

/* Headlines speak in the theme's display voice (body text follows --serif). */
h1, .crisis-headline, #go-title, .addr strong { font-family: var(--display); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
/* No italics anywhere: emphasis is carried by weight, colour and small-caps. */
em, i, cite, address, .dial-mood, .bb-mood { font-style: normal; }

body {
  margin: 0;
  background: var(--body-glow), var(--paper);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.55;
  font-feature-settings: "liga" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
}

/* Shared label idiom: bold small-caps sans */
.section-label, .dial-label, .kicker, .charcount,
.choice small, .nation-name, .press-lean, .division-tag {
  font-family: var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===================== PER-SCENARIO THEMES =====================
   Each scenario sets body[data-theme] (in renderChrome) so the whole game
   reskins: surfaces, ink, accents, the statusbar and the page glow all flow
   from variables, so one block per era gives each sim its own world. */

/* Iran 1979: dark imperial, gold on deep aubergine-black. */
body[data-theme="iran"] {
  --paper: #15100b; --paper-2: #1d160f; --paper-card: #241b12;
  --ink: #f3e8d1; --ink-soft: #c6b491; --ink-faint: #8d7c5d;
  --rule: #3b2e1d; --rule-soft: #2a2014; --centre: #9a8a6b;
  --accent: #cea94c; --gilt: #cea94c; --gilt-bg: #2f2412;
  --green: #46b673; --green-bg: #15301f; --green-d: #62c489;
  --red: #db5a4f; --red-bg: #3a1c18; --red-d: #e3776e; --crisis-tint: #2d1813;
  --blue: #6f97e2; --blue-bg: #1a2740;
  --statusbar-bg: linear-gradient(180deg, #0e0a06, #1d150c); --statusbar-ink: #f3e8d1; --statusbar-sub: #b7a482;
  --body-glow: radial-gradient(1200px 520px at 50% -140px, #3c2d13 0%, transparent 72%);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 14px 44px rgba(0,0,0,.6);
}
/* Greece 2015: Aegean white and cobalt blue. */
body[data-theme="greece"] {
  --paper: #e8f0fb; --paper-2: #f2f8ff; --paper-card: #ffffff;
  --ink: #0c2747; --ink-soft: #3a567c; --ink-faint: #7f96b5;
  --rule: #cee0f4; --rule-soft: #e6eefb;
  --accent: #0e5bb0; --gilt: #1672c9; --gilt-bg: #dcebfb;
  --statusbar-bg: linear-gradient(180deg, #0a3b78, #0e5bb0); --statusbar-ink: #ffffff; --statusbar-sub: #bcd6f3;
  --body-glow: radial-gradient(1200px 480px at 50% -120px, #cfe2fa 0%, transparent 70%);
}
/* Germany 2010/2015: austere graphite and gold, black masthead. */
body[data-theme="germany"] {
  --paper: #e7e7e4; --paper-2: #f1f1ee; --paper-card: #ffffff;
  --ink: #16171a; --ink-soft: #45474c; --ink-faint: #84878f;
  --rule: #d3d4d2; --rule-soft: #e8e8e5;
  --accent: #20211f; --gilt: #c19a2b; --gilt-bg: #f6ecca;
  --statusbar-bg: linear-gradient(180deg, #0a0a0b, #232427); --statusbar-ink: #ffffff; --statusbar-sub: #b6b8be;
  --body-glow: radial-gradient(1100px 460px at 50% -120px, #d8d8d4 0%, transparent 70%);
}
/* Nixon 1973: paranoid Watergate, oak and oxblood in low light. */
body[data-theme="nixon"] {
  --paper: #181513; --paper-2: #201b18; --paper-card: #251f1b;
  --ink: #ece4da; --ink-soft: #b6a899; --ink-faint: #837567;
  --rule: #3a2f27; --rule-soft: #2a221c; --centre: #97877a;
  --accent: #9c3b32; --gilt: #b98a3e; --gilt-bg: #2c2114;
  --green: #5a9e6a; --green-bg: #182c1d; --green-d: #74b483;
  --red: #c44a3f; --red-bg: #381a16; --red-d: #d36a5f; --crisis-tint: #2c1713;
  --blue: #6f8fc0; --blue-bg: #1b2436;
  --statusbar-bg: linear-gradient(180deg, #100c0a, #221a14); --statusbar-ink: #ece4da; --statusbar-sub: #b0a191;
  --body-glow: radial-gradient(1200px 520px at 50% -140px, #2c2017 0%, transparent 72%);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 14px 44px rgba(0,0,0,.6);
}
/* De Gaulle, May 1968: bold poster red and black on bone paper. */
body[data-theme="degaulle"] {
  --paper: #efe9df; --paper-2: #f6f1e9; --paper-card: #fbf7f0;
  --ink: #18130f; --ink-soft: #45403a; --ink-faint: #837c72;
  --rule: #d8cfc0; --rule-soft: #e8e1d4;
  --accent: #c01922; --gilt: #b58a2d; --gilt-bg: #f1e6c9;
  --statusbar-bg: linear-gradient(180deg, #121110, #2a2724); --statusbar-ink: #f3ede2; --statusbar-sub: #c0b6a6;
  --body-glow: radial-gradient(1100px 460px at 50% -120px, #e3d8c4 0%, transparent 70%);
}
/* Gorbachev 1991: late-Soviet red and iron grey. */
body[data-theme="gorbachev"] {
  --paper: #16140f; --paper-2: #1e1b15; --paper-card: #232019;
  --ink: #ece6d6; --ink-soft: #b3ab98; --ink-faint: #837c6a;
  --rule: #37322a; --rule-soft: #272219; --centre: #948c7a;
  --accent: #c02528; --gilt: #c6a23a; --gilt-bg: #2c2513;
  --green: #5aa06a; --green-bg: #18301d; --green-d: #74b483;
  --red: #cf3a31; --red-bg: #381914; --red-d: #db5b50; --crisis-tint: #2e1612;
  --blue: #7090c2; --blue-bg: #1b2538;
  --statusbar-bg: linear-gradient(180deg, #1a0f0d, #3a1512); --statusbar-ink: #f0e6d4; --statusbar-sub: #c2b39a;
  --body-glow: radial-gradient(1200px 520px at 50% -140px, #43150f 0%, transparent 72%);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 14px 44px rgba(0,0,0,.6);
}
/* Ceausescu 1989: cold concrete and a dying red. */
body[data-theme="ceausescu"] {
  --paper: #15161a; --paper-2: #1c1e22; --paper-card: #212328;
  --ink: #e4e6ea; --ink-soft: #a6abb3; --ink-faint: #767c85;
  --rule: #33363c; --rule-soft: #25282d; --centre: #8a909a;
  --accent: #b13a35; --gilt: #9aa0aa; --gilt-bg: #262a30;
  --green: #579d77; --green-bg: #18301f; --green-d: #71b58f;
  --red: #c4453c; --red-bg: #361a17; --red-d: #d2655b; --crisis-tint: #2b1714;
  --blue: #6f8bb6; --blue-bg: #1b242f;
  --statusbar-bg: linear-gradient(180deg, #0d0f12, #232830); --statusbar-ink: #e4e6ea; --statusbar-sub: #a0a6af;
  --body-glow: radial-gradient(1200px 520px at 50% -140px, #232a33 0%, transparent 72%);
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.5); --shadow-lg: 0 14px 44px rgba(0,0,0,.6);
}
/* Allende 1973: warm Andean ochre, terracotta and cream. */
body[data-theme="allende"] {
  --paper: #efe6d8; --paper-2: #f5eee2; --paper-card: #fbf6ec;
  --ink: #2a1c12; --ink-soft: #5a4636; --ink-faint: #927d68;
  --rule: #ddccb4; --rule-soft: #ece1cd;
  --accent: #c0492a; --gilt: #c08a2c; --gilt-bg: #f1e3c4;
  --statusbar-bg: linear-gradient(180deg, #3a1d12, #6a2f1c); --statusbar-ink: #f7ecdb; --statusbar-sub: #d7bda3;
  --body-glow: radial-gradient(1100px 460px at 50% -120px, #e6d4b6 0%, transparent 70%);
}
/* Partition 1947: saffron and green on warm cream. */
body[data-theme="partition"] {
  --paper: #f3ecdd; --paper-2: #f8f2e6; --paper-card: #fdf9f0;
  --ink: #21180f; --ink-soft: #4f4234; --ink-faint: #8c7d68;
  --rule: #e0d3bb; --rule-soft: #efe6d3;
  --accent: #128a52; --gilt: #d98a23; --gilt-bg: #f6e6c4;
  --statusbar-bg: linear-gradient(180deg, #103d2a, #15633f); --statusbar-ink: #f7f1e4; --statusbar-sub: #c3d8c8;
  --body-glow: radial-gradient(1100px 460px at 50% -120px, #ecd9b4 0%, transparent 70%);
}
/* Carter 1979-80: muted 1970s avocado, harvest gold and tan. */
body[data-theme="carter"] {
  --paper: #e8e3d4; --paper-2: #f1ecdf; --paper-card: #f8f4e9;
  --ink: #23211a; --ink-soft: #514d3f; --ink-faint: #8d8773;
  --rule: #d6cfba; --rule-soft: #e7e1cf;
  --accent: #6e7b35; --gilt: #c79328; --gilt-bg: #f0e6c5;
  --statusbar-bg: linear-gradient(180deg, #2c3320, #4a5230); --statusbar-ink: #f3efde; --statusbar-sub: #c9cba8;
  --body-glow: radial-gradient(1100px 460px at 50% -120px, #ddd6bd 0%, transparent 70%);
}

/* Per-scenario TYPEFACES + BACKGROUND TEXTURES (override the colour blocks
   above; later same-specificity rules win, colours are preserved). Each era
   gets its own headline voice, body voice and page texture. */
body[data-theme="iran"] {
  --btn-ink: #1c1206;
  --serif: "Cormorant Garamond", Georgia, serif; --display: "Marcellus", Georgia, serif;
  --body-glow:
    radial-gradient(1200px 520px at 50% -140px, rgba(206,169,76,.16) 0%, transparent 72%),
    repeating-linear-gradient(45deg, rgba(206,169,76,.05) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(206,169,76,.05) 0 2px, transparent 2px 22px);
}
body[data-theme="greece"] {
  --serif: "Cardo", Georgia, serif; --display: "Cardo", Georgia, serif;
  --body-glow:
    radial-gradient(1200px 480px at 50% -120px, rgba(14,91,176,.14) 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(14,91,176,.04) 0 1px, transparent 1px 26px);
}
body[data-theme="germany"] {
  --serif: "Inter", system-ui, sans-serif; --display: "Inter", system-ui, sans-serif;
  --body-glow:
    radial-gradient(1100px 460px at 50% -120px, rgba(20,21,25,.06) 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(20,21,25,.04) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(20,21,25,.04) 0 1px, transparent 1px 30px);
}
body[data-theme="nixon"] {
  --serif: "Domine", Georgia, serif; --display: "Special Elite", "Courier New", monospace;
  --body-glow:
    radial-gradient(1200px 520px at 50% -140px, rgba(155,59,50,.14) 0%, transparent 72%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 6px);
}
body[data-theme="degaulle"] {
  --serif: "Inter", system-ui, sans-serif; --display: "Oswald", "Arial Narrow", sans-serif;
  --body-glow:
    repeating-linear-gradient(45deg, rgba(192,25,34,.06) 0 28px, transparent 28px 56px),
    radial-gradient(1100px 460px at 50% -120px, rgba(192,25,34,.10) 0%, transparent 70%);
}
body[data-theme="gorbachev"] {
  --serif: "PT Serif", Georgia, serif; --display: "PT Sans Narrow", "Arial Narrow", sans-serif;
  --body-glow:
    radial-gradient(900px 760px at 108% -10%, rgba(192,37,40,.32) 0%, transparent 55%),
    repeating-linear-gradient(60deg, rgba(192,37,40,.05) 0 3px, transparent 3px 30px);
}
body[data-theme="ceausescu"] {
  --serif: "Inter", system-ui, sans-serif; --display: "Oswald", "Arial Narrow", sans-serif;
  --body-glow:
    radial-gradient(1200px 520px at 50% -140px, rgba(60,66,74,.5) 0%, transparent 72%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 14px);
}
body[data-theme="allende"] {
  --serif: "Bitter", Georgia, serif; --display: "Bitter", Georgia, serif;
  --body-glow:
    radial-gradient(1100px 460px at 50% -120px, rgba(192,73,42,.14) 0%, transparent 70%),
    repeating-linear-gradient(35deg, rgba(192,73,42,.04) 0 20px, transparent 20px 56px);
}
body[data-theme="partition"] {
  --serif: "Cormorant Garamond", Georgia, serif; --display: "Rozha One", Georgia, serif;
  --body-glow:
    linear-gradient(180deg, rgba(217,138,35,.12) 0%, transparent 15%, transparent 85%, rgba(18,138,82,.12) 100%),
    radial-gradient(1100px 460px at 50% -120px, rgba(217,138,35,.10) 0%, transparent 70%);
}
body[data-theme="carter"] {
  --serif: "Bitter", Georgia, serif; --display: "Domine", Georgia, serif;
  --body-glow:
    repeating-linear-gradient(0deg, rgba(110,123,53,.05) 0 40px, rgba(199,147,40,.045) 40px 80px),
    radial-gradient(1100px 460px at 50% -120px, rgba(110,123,53,.10) 0%, transparent 70%);
}

/* --- Screen switching --------------------------------------------------- */
.screen { display: none; }
.screen.is-active { display: block; }

/* ===================== SETUP ===================== */
.paper { max-width: 580px; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.crest { text-align: center; }
.portcullis, .emblem { color: var(--gilt); display: inline-block; filter: drop-shadow(0 2px 6px rgba(212,154,31,.4)); }
.kicker { font-size: 0.72rem; font-weight: 700; color: var(--gilt); margin: 0.8rem 0 0.2rem; }
h1 {
  font-size: 3.4rem; font-weight: 700; letter-spacing: -0.02em;
  margin: 0.1rem 0 0.6rem; line-height: 1.04;
}
.lede { font-size: 1.18rem; color: var(--ink-soft); max-width: 32rem; margin: 0 auto 2.4rem; }
.lede em { font-style: normal; color: var(--ink); }

.gov-form { text-align: left; }
.field { margin-bottom: 1.6rem; }
.field > label {
  display: block; font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.55rem;
}
input[type="text"], select, textarea {
  width: 100%; font-family: var(--serif); font-size: 1.1rem; color: var(--ink);
  background: var(--paper-card); border: 1.5px solid var(--rule); border-radius: 9px;
  padding: 0.75rem 0.85rem; transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg);
}
select { appearance: none; background-image: none; cursor: pointer; }

.choices { display: grid; gap: 0.55rem; }
.choice {
  display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--rule); border-radius: 10px; background: var(--paper-card);
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s;
}
.choice:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.choice input { margin-top: 0.35rem; accent-color: var(--green); }
.choice span { display: flex; flex-direction: column; }
.choice strong { font-weight: 700; }
.choice small { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-faint); margin-top: 0.2rem; }
.choice:has(input:checked) { border-color: var(--green); background: var(--green-bg); box-shadow: 0 0 0 3px var(--green-bg); }

.muted { color: var(--ink-faint); font-weight: 400; }

/* --- Scenario picker ---------------------------------------------------- */
.scenario-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.scenario {
  display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; text-align: left; width: 100%; cursor: pointer;
  padding: 1.15rem 1.15rem 1.25rem; border: 1px solid var(--rule); border-top: 4px solid var(--card-accent, var(--centre)); border-radius: 14px;
  background: var(--paper-card); font-family: var(--serif); box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.scenario:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.scenario.is-selected { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-bg), var(--shadow); }
.scenario.is-locked { opacity: 0.82; }
.scenario.is-locked:hover { border-color: var(--gilt); }
.scenario-lock {
  font-family: var(--sans); font-size: 0.54rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--gilt); border-radius: 20px; padding: 0.1rem 0.45rem; margin-left: 0.5rem; vertical-align: middle;
}
.scenario-badge {
  flex: none; width: 2.9rem; height: 2.9rem; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, #1a2433, #2c3a52); color: #fff;
  font-size: 0.95rem; font-weight: 800; letter-spacing: 0.02em; font-family: var(--sans);
}
.scenario.is-selected .scenario-badge { background: linear-gradient(150deg, var(--green), var(--green-d)); }
.scenario-badge { font-size: 1.7rem; }   /* flag emoji fallback */
.scenario-badge.has-flag { padding: 0; background: none; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.scenario-badge svg, .continue-flag svg, .ach-flag svg { width: 100%; height: 100%; display: block; }
.continue-flag, .ach-flag { width: 2.3rem; height: 2.3rem; border-radius: 7px; overflow: hidden; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }

/* Non-UK "desk": no red box; the decision plate carries the turn. */
.redbox-stage.is-dossier .redbox-svg { display: none; }
.redbox-stage.is-dossier { margin: 0 0 0.4rem; }
.redbox-stage.is-dossier .redbox-caption {
  font-size: 0.78rem; color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 10px; padding: 0.5rem 0.9rem; display: inline-block;
}
.redbox-stage.is-dossier.is-opening .redbox-caption { animation: redbox-rise 0.5s cubic-bezier(.2,.7,.3,1) both; }
.scenario-body { display: flex; flex-direction: column; gap: 0.1rem; }
.scenario-pm { font-size: 1.22rem; font-weight: 700; }
.scenario-when { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.scenario-blurb { font-size: 0.96rem; color: var(--ink-soft); margin-top: 0.1rem; line-height: 1.35; }
.scenario-record { display: inline-block; font-family: var(--sans); font-size: 0.54rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-d); background: var(--green-bg); border-radius: 20px; padding: 0.1rem 0.45rem; margin-left: 0.4rem; vertical-align: middle; }

/* --- Home gallery / Continue / Achievements --------------------------- */
.paper.home { max-width: 1080px; }
.home-nav { display: flex; justify-content: center; gap: 0.6rem; margin: 1.2rem 0 0; }
.diff-row { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin: 0.7rem 0 0; }
.diff-label { font-family: var(--sans); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.diff-select { display: inline-flex; gap: 0.3rem; }
.diff-opt { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.7rem; border: 1px solid var(--rule); border-radius: 20px; background: var(--paper-card); color: var(--ink-soft); cursor: pointer; }
.diff-opt.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ach-route { display: block; font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.15rem; }
.home-h2 { font-family: var(--sans); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.95rem; }

.continue-section { margin: 1.7rem 0 0.5rem; text-align: left; }
.continue-list { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.continue-card { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 0.95rem; background: var(--paper-card); border: 1px solid var(--rule); border-left: 4px solid var(--green); border-radius: 12px; box-shadow: var(--shadow); }
.continue-flag { font-size: 1.7rem; flex: none; }
.continue-body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; flex: 1; }
.continue-name { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; }
.continue-sub { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.continue-acts { display: flex; flex-direction: column; gap: 0.3rem; align-items: stretch; flex: none; }
.continue-acts .btn-primary { width: auto; padding: 0.4rem 1rem; font-size: 0.8rem; }
.continue-del { font-size: 0.72rem; color: var(--ink-faint); text-align: center; }
.continue-del:hover { color: var(--red); }

#ach-content { text-align: left; }
.ach-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 1rem; }
.ach-card { background: var(--paper-card); border: 1px solid var(--rule); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.ach-milestones { border-top: 4px solid var(--gilt); margin-bottom: 1rem; }
.ach-card.is-started { border-top: 4px solid var(--green); }
.ach-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.65rem; }
.ach-flag { font-size: 1.45rem; flex: none; }
.ach-card-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ach-pm { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.ach-meta { font-family: var(--sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.ach-count { font-family: var(--sans); font-size: 0.85rem; font-weight: 800; color: var(--ink-soft); flex: none; }
.ach-ends { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.32rem; }
.ach-end { display: flex; gap: 0.55rem; align-items: baseline; font-size: 0.9rem; line-height: 1.3; }
.ach-tick { font-family: var(--sans); flex: none; width: 1rem; text-align: center; font-weight: 800; }
.ach-end.is-got .ach-tick { color: var(--green-d); }
.ach-end.is-got .ach-end-text { color: var(--ink); }
.ach-end.is-locked { opacity: 0.6; }
.ach-end.is-locked .ach-end-text { font-style: normal; color: var(--ink-faint); }
.ach-best { font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); margin: 0.75rem 0 0; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block; font-family: var(--sans); font-size: 0.84rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  padding: 0.8rem 1.5rem; border: none; border-radius: 10px;
  background: var(--paper-card); color: var(--ink); box-shadow: var(--shadow);
  transition: transform .1s, box-shadow .15s, background .15s, filter .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--accent); color: var(--btn-ink, #fff); width: 100%;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:disabled { background: #c3cad6; color: #fff; box-shadow: none; cursor: default; transform: none; }
.btn-ghost { background: var(--paper-card); color: var(--ink-soft); border: 1.5px solid var(--rule); box-shadow: none; }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); box-shadow: var(--shadow); }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.72rem; }
.fineprint { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-faint); text-align: center; margin: 1rem 0 0; }

/* ===================== GAME ===================== */
.statusbar {
  background: var(--statusbar-bg); color: var(--statusbar-ink);
  position: sticky; top: 0; z-index: 5; box-shadow: 0 2px 16px rgba(20,27,39,.25);
  border-bottom: 3px solid var(--accent);
}
.statusbar-inner { max-width: var(--max); margin: 0 auto; padding: 0.7rem 1.25rem; display: flex; align-items: center; justify-content: space-between; }
.no10 { display: flex; align-items: center; gap: 0.75rem; }
.door {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: #142;
  background: linear-gradient(160deg, #f3d27a, var(--gilt)); color: #2a1c00;
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 8px;
}
.addr { display: flex; flex-direction: column; line-height: 1.2; }
.addr strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--statusbar-ink); }
.addr small { font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.03em; color: var(--statusbar-sub); }
.statusbar .btn-ghost { background: rgba(255,255,255,.08); color: #cdd5e2; border-color: rgba(255,255,255,.18); }
.statusbar .btn-ghost:hover { border-color: var(--red); color: #fff; background: var(--red); }

.dash { max-width: var(--max); margin: 0 auto; padding: 1.4rem 1.25rem 2rem; }

.section-label {
  font-size: 0.74rem; font-weight: 800; color: var(--ink); margin: 0 0 0.7rem; padding-left: 0.6rem;
  border-left: 4px solid var(--accent); line-height: 1;
}

/* --- House of Commons seating ------------------------------------------- */
.commons { margin-bottom: 1.5rem; }
.commons { background: var(--paper-card); border: 1px solid var(--rule); border-radius: var(--r); padding: 1rem 1.1rem 0.9rem; box-shadow: var(--shadow); }
.commons .section-label { border-left: 0; padding-left: 0; }
.commons-svg { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.commons-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; justify-content: center; margin: 0.5rem 0 0; }
.leg { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 0.32rem; }
.leg-sw { width: 0.72rem; height: 0.72rem; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.leg b { color: var(--ink); font-weight: 800; }
.leg-gov { font-size: 0.5rem; font-weight: 800; letter-spacing: 0.05em; color: #fff; background: var(--accent); border-radius: 10px; padding: 0.06rem 0.32rem; margin-left: 0.2rem; }

/* --- Full-width dashboard grid ------------------------------------------ */
.dash-grid { display: grid; gap: 1.4rem; align-items: start; }
.dash-main, .dash-side { min-width: 0; }
@media (min-width: 920px) {
  /* Default two-column dashboard. Per-scenario scene stylesheets
     (static/css/scenes/<theme>.css) fully own their own layout from here. */
  .dash-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .dash-side { position: sticky; top: 4.5rem; }
}
.dash-side .cabinet-grid { grid-template-columns: 1fr; }
.dash-side .nation-grid { grid-template-columns: 1fr 1fr; }
/* Milestone 7: mobile collapses the dashboard to a single decision column. */
@media (max-width: 620px) {
  .dash-grid { grid-template-columns: 1fr !important; }
  .dash-side { position: static !important; order: 2 !important; }
  .scenario-grid { grid-template-columns: 1fr; }
  .continue-list, .ach-grid, .meters-grid { grid-template-columns: 1fr; }
  .dials { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 2.4rem; }
}
.seat-gov { fill: var(--green); }
.seat-opp { fill: var(--blue); }
.seat-oth { fill: #aab3c2; }
.commons-aisle { stroke: var(--rule); stroke-width: 1.5; stroke-dasharray: 3 5; }
.commons-tag { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.commons-tag.tag-gov { fill: var(--green-d); }
.commons-tag.tag-opp { fill: var(--blue); }
.commons-thr { font-family: var(--sans); font-size: 10px; font-weight: 600; fill: var(--ink-faint); letter-spacing: 0.03em; }
/* Survival mode: Exit / Resign actions and the read-only inner circle */
.statusbar-actions { display: flex; gap: 0.5rem; align-items: center; }
.minister.is-static { cursor: default; text-align: left; }
.minister.is-static:hover { transform: none; box-shadow: var(--shadow); }
.cabinet.is-readonly .cabinet-balance { display: none; }

/* Survival mode: the deterministic outcome card */
.survival-outcome { background: var(--paper-card); border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 1rem 1.2rem; box-shadow: var(--shadow); }
.out-choice { margin: 0 0 0.35rem; font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); }
.out-choice strong { color: var(--ink); }
.out-text { margin: 0 0 0.7rem; font-size: 1.08rem; color: var(--ink); line-height: 1.4; }
.out-deltas { margin: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.out-d { font-family: var(--sans); font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0.55rem; border-radius: 20px; }
.out-d.up { color: #16753f; background: #e6f4ec; }
.out-d.down { color: #c8102e; background: #fbe7ea; }

/* --- Per-sim signature systems --- */
/* Signature counter dial (refugees, hostages, strikers, days, republics…) */
.dial-counter { border-top: 3px solid var(--accent); }
.dial-counter .dial-value { color: var(--accent); }
/* Flashpoint / secession / unit meters */
.meters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.meter-cell { background: var(--paper-card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.6rem 0.75rem; box-shadow: var(--shadow); }
.meter-cell.mc-crit { border-color: var(--red); }
.mc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.mc-name { font-family: var(--sans); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); }
.mc-val { font-family: var(--sans); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.mc-bar { height: 7px; background: var(--rule-soft); border-radius: 5px; overflow: hidden; margin-top: 0.4rem; }
.mc-bar span { display: block; height: 100%; border-radius: 5px; transition: width 0.6s cubic-bezier(.2,.7,.3,1); }
/* Living cast: a roster whose allegiance shifts */
.cast-group-label { grid-column: 1 / -1; font-family: var(--sans); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0.5rem 0 0.15rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); }
.cast-group-label:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.cast-foe-label { color: var(--red-d); }
.cast-card { position: relative; }
.cast-card.cast-loyal    { border-left: 4px solid var(--green); }
.cast-card.cast-wavering { border-left: 4px solid var(--gilt); }
.cast-card.cast-hostile  { border-left: 4px solid var(--red); }
.cast-card.cast-neutral  { border-left: 4px solid var(--centre); }
.cast-card.cast-gone     { border-left: 4px solid var(--ink-faint); opacity: 0.55; }
.cast-stance { display: inline-block; margin-top: 0.25rem; font-family: var(--sans); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.cast-st-loyal { color: var(--green-d); }
.cast-st-wavering { color: var(--gilt); }
.cast-st-hostile { color: var(--red-d); }
.cast-st-neutral { color: var(--centre); }
.cast-st-gone { color: var(--ink-faint); }
.cast-note { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--ink-soft); }
/* Game-over epilogue (the real aftermath) + run record */
.go-epilogue { display: block; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-size: 0.98rem; color: var(--ink-soft); }
.go-epi-label { display: block; font-family: var(--sans); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.3rem; }
/* Two-perspective chooser (Partition: Nehru or Jinnah) */
.persp-options { display: grid; gap: 0.7rem; margin: 1rem 0 0.5rem; }
.persp-opt { display: flex; flex-direction: column; gap: 0.2rem; text-align: left; cursor: pointer; padding: 0.85rem 1rem; border: 1.5px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--paper-card); transition: border-color .12s, box-shadow .12s, transform .05s; }
.persp-opt:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.persp-opt:active { transform: translateY(1px); }
.persp-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.persp-opt .persp-sub { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); }
/* Record badge on the scenario cards */
.scenario-record { display: inline-block; margin-left: 0.5rem; font-family: var(--sans); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gilt); border: 1px solid var(--gilt); border-radius: 20px; padding: 0.05rem 0.45rem; vertical-align: middle; }

/* Westminster benches chamber */
.benches-floor { fill: #1f7a44; opacity: 0.10; }
.benches-table { fill: #b88a3e; opacity: 0.5; }
.benches-speaker { fill: #b88a3e; opacity: 0.8; }
.commons-caption { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-soft); text-align: center; margin: 0.55rem 0 0; }

/* --- Backbenches panel -------------------------------------------------- */
.backbench-panel { margin-bottom: 1.5rem; }
.bb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.bb-cell { background: var(--paper-card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.7rem 0.8rem; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.bb-k { font-family: var(--sans); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.bb-v { font-family: var(--sans); font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bb-v.bb-mood { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; }
.bb-v.bb-hot { color: var(--red); }
.bb-bar { height: 6px; background: var(--rule-soft); border-radius: 4px; overflow: hidden; margin-top: 0.4rem; }
.bb-bar span { display: block; height: 100%; transition: width 0.5s ease; }
.bb-bar .bb-green { background: var(--green); }
.bb-bar .bb-amber { background: var(--gilt); }
.bb-bar .bb-red { background: var(--red); }
.bb-line { font-size: 0.95rem; color: var(--ink-soft); margin: 0.6rem 0 0; }
.bb-line b { font-family: var(--sans); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.bb-warn { color: var(--red); }
.bb-warn b { color: var(--red); }

/* --- Specialised crisis gauges ------------------------------------------ */
.gauges-section { margin-bottom: 1.5rem; }
#gauges { display: grid; gap: 0.7rem; }
.gauge { background: var(--paper-card); border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 10px; padding: 0.75rem 0.9rem; box-shadow: var(--shadow); }
.gauge.ga-crit { border-color: var(--red); border-left-color: var(--red); box-shadow: 0 0 0 2px var(--red-bg), var(--shadow); }
.ga-head { display: flex; justify-content: space-between; align-items: baseline; }
.ga-label { font-family: var(--sans); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.ga-val { font-family: var(--sans); font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ga-delta { font-size: 0.74rem; font-weight: 800; }
.ga-delta.up { color: var(--green-d); }
.ga-delta.down { color: var(--red); }
.ga-bar { height: 9px; background: var(--rule-soft); border-radius: 6px; overflow: hidden; margin: 0.4rem 0 0.5rem; }
.ga-bar span { display: block; height: 100%; transition: width 0.6s cubic-bezier(.2,.7,.3,1); border-radius: 6px; }
.ga-desc { font-size: 0.86rem; color: var(--ink-soft); margin: 0; line-height: 1.35; }
.ga-tell { font-family: var(--serif); font-size: 0.88rem; color: var(--ink); margin: 0.35rem 0 0; line-height: 1.35; border-top: 1px dotted var(--rule); padding-top: 0.35rem; }
.agent-beat { background: var(--paper-card); border: 1px solid var(--rule); border-left: 4px solid var(--red); border-radius: 10px; padding: 0.75rem 0.95rem; margin: 0.7rem 0 0; box-shadow: var(--shadow); }
.agent-beat-kicker { font-family: var(--sans); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-d); margin: 0 0 0.25rem; }
.agent-beat-text { font-family: var(--serif); font-size: 0.98rem; color: var(--ink); margin: 0; line-height: 1.4; }
.ga-intel { color: var(--red-d); font-weight: 600; }
.intel-btn { display: block; margin-top: 0.45rem; opacity: 0.9; }

/* --- Defection card + campaign escape ----------------------------------- */
.cab-defection { border-left: 5px solid var(--blue) !important; }
.cab-defection .cab-event-kicker { color: var(--blue); }
.campaign-abandon { text-align: center; margin-top: 1.6rem; }

/* --- Situation banner --------------------------------------------------- */
.situation {
  border: 1px solid var(--rule); border-left: 5px solid var(--accent); border-radius: var(--r);
  background: linear-gradient(180deg, var(--paper-card), var(--paper-2)); padding: 1.1rem 1.2rem; margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
.situation-basis { font-family: var(--sans); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gilt); margin: 0 0 0.5rem; }
.situation-context { margin: 0 0 0.7rem; color: var(--ink-soft); }
.situation-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; margin: 0; font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); }
.situation-meta strong { color: var(--ink); font-weight: 800; }

/* --- Cabinet ------------------------------------------------------------ */
.cabinet { margin-bottom: 1.5rem; }
.cabinet-hint { text-transform: none; letter-spacing: 0; font-weight: 500; font-style: normal; color: var(--ink-faint); border: 0; }
.cabinet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
.minister {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0.1rem; cursor: pointer;
  padding: 0.6rem 0.75rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-card);
  font-family: var(--serif); box-shadow: var(--shadow); transition: border-color .15s, transform .1s, box-shadow .15s;
}
.minister:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.minister-role { font-family: var(--sans); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.minister-name { font-size: 1.05rem; font-weight: 700; }

.cabinet-balance { display: flex; gap: 3px; margin-bottom: 0.7rem; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.balance-seg { font-family: var(--sans); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; padding: 0.35rem 0.55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.balance-seg b { font-weight: 800; }
.seg-0 { background: var(--green); }
.seg-1 { background: var(--blue); }
.seg-2 { background: var(--gilt); }
.seg-3 { background: var(--centre); }

.minister-meta { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.35rem; flex-wrap: wrap; }
.minister-wing { font-family: var(--sans); font-size: 0.54rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); background: var(--rule-soft); padding: 0.1rem 0.4rem; border-radius: 20px; }
.minister-loy { font-family: var(--sans); font-size: 0.54rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.loy-ok { color: var(--green-d); }
.loy-low { color: var(--red); }
.minister.is-beast { border-left: 4px solid var(--gilt); }
.minister.is-vacant { opacity: 0.6; border-style: dashed; }
.minister.is-vacant .minister-name { font-style: normal; color: var(--ink-faint); }

/* --- Briefing / crisis -------------------------------------------------- */
.briefing-bar { margin-bottom: 1.5rem; }
.briefing-bar .btn { width: 100%; }
.crisis-zone { margin-bottom: 1rem; }
.crisis-card {
  border: 1px solid var(--red); border-top: 5px solid var(--red); border-radius: var(--r);
  background: linear-gradient(180deg, var(--paper-card), var(--crisis-tint)); padding: 1.15rem 1.3rem; box-shadow: var(--shadow-lg);
}
.crisis-kicker { font-family: var(--sans); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin: 0 0 0.4rem; }
.crisis-headline { font-size: 1.5rem; font-weight: 700; line-height: 1.18; margin: 0 0 0.5rem; }
.crisis-situation { margin: 0 0 0.9rem; color: var(--ink-soft); }
.crisis-card .btn-ghost { border-color: var(--red); color: var(--red); background: var(--paper-card); }

/* Decision options: the real forks of history, click one to load it as a draft */
.decision-options { margin: 0 0 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.decision-lead { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.15rem; }
.decision-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--serif); font-size: 1.02rem; color: var(--ink); background: var(--paper-card);
  border: 1.5px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 9px; padding: 0.7rem 0.9rem;
  transition: border-color .12s, box-shadow .12s, transform .05s;
}
.decision-opt:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.decision-opt.is-chosen { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; background: var(--paper-2); }
.decision-opt.is-chosen .decision-opt-go { opacity: 1; }
.decision-opt.is-chosen .decision-opt-go::after { content: " · drafted below"; }
.decision-opt:active { transform: translateY(1px); }
.decision-opt-label { font-weight: 600; line-height: 1.25; }
.decision-opt-go { flex: none; font-family: var(--sans); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); opacity: 0; transition: opacity .12s; }
.decision-opt:hover .decision-opt-go { opacity: 1; }

/* --- Reshuffle ---------------------------------------------------------- */
.cabinet-reshuffle { width: 100%; margin-top: 0.7rem; }
.reshuffle-card {
  background: var(--paper-card); border-radius: var(--r); border-top: 5px solid var(--gilt);
  padding: 1.6rem 1.7rem 1.4rem; max-width: 420px; width: calc(100% - 2.5rem); text-align: left; box-shadow: var(--shadow-lg);
}
.reshuffle-card h2 { font-size: 1.6rem; margin: 0.25rem 0 0.4rem; }
.rs-current { color: var(--ink-soft); margin: 0 0 1rem; font-style: normal; }
.rs-current strong { color: var(--ink); }
.rs-prompt { font-family: var(--sans); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.6rem; }
.rs-options { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.rs-opt {
  width: 100%; text-align: left; cursor: pointer; font-family: var(--serif); font-size: 1.08rem; font-weight: 600;
  padding: 0.65rem 0.9rem; border: 1.5px solid var(--rule); border-radius: 9px; background: var(--paper-card);
  transition: border-color .15s, background .15s, transform .1s;
}
.rs-opt:hover { border-color: var(--green); background: var(--green-bg); transform: translateY(-1px); }
.rs-opt.rs-sack { color: var(--red); font-style: normal; }
.rs-opt.rs-sack:hover { border-color: var(--red); background: var(--red-bg); }
.rs-none { font-size: 0.92rem; color: var(--ink-faint); font-style: normal; margin: 0 0 0.45rem; }
.reshuffle-card .rs-cancel { display: block; width: 100%; text-align: center; color: var(--ink-faint); }
.cab-reshuffle { border-left: 5px solid var(--gilt) !important; }
.cab-reshuffle .cab-event-kicker { color: var(--gilt); }

/* --- Cabinet events ----------------------------------------------------- */
.cab-event { margin-top: 1.3rem; padding: 1.1rem 1.25rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper-card); box-shadow: var(--shadow); }
.cab-resignation { border-color: var(--red); border-left: 5px solid var(--red); background: linear-gradient(180deg,#fff,var(--red-bg)); }
.cab-criticism { border-left: 5px solid var(--gilt); }
.cab-event-kicker { font-family: var(--sans); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.35rem; }
.cab-resignation .cab-event-kicker { color: var(--red); }
.cab-event-title { font-size: 1.22rem; font-weight: 700; margin: 0 0 0.3rem; }
.cab-event-body { margin: 0; color: var(--ink-soft); }

/* --- Dials (the big stat tiles) ----------------------------------------- */
.dials { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 0.6rem; margin-bottom: 1.5rem; }
.dial { background: var(--paper-card); padding: 0.95rem 1.05rem; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.dial-lg { grid-column: 1; grid-row: span 1; border-top: 4px solid var(--accent); }
.dial:nth-child(2) { border-top: 4px solid var(--blue); }
.dial:nth-child(3) { border-top: 4px solid var(--gilt); }
.dial:nth-child(4) { border-top: 4px solid var(--centre); }
.dial-econ { grid-column: 2 / 4; border-top: 4px solid var(--red); }
/* Survival sims hide the parliamentary dials, so the remaining ones must tile
   cleanly instead of leaving holes from the fixed parliamentary grid spans. */
body.is-survival .dials { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; }
body.is-survival .dial-lg, body.is-survival .dial-econ, body.is-survival .dial-counter { grid-column: auto; }
.dial-label { display: block; font-size: 0.64rem; font-weight: 800; color: var(--ink-faint); margin-bottom: 0.3rem; }
.dial-value { font-family: var(--sans); font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dial-value i { font-size: 1.2rem; font-weight: 700; font-style: normal; color: var(--ink-faint); }
.dial-sub { display: block; font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-faint); margin-top: 0.35rem; }
.dial-mood { font-family: var(--serif); font-size: clamp(0.95rem, 0.6rem + 1.1vw, 1.4rem); font-weight: 600; text-transform: none; letter-spacing: 0; }
.dial-value, .dial-mood { overflow-wrap: break-word; min-width: 0; max-width: 100%; }
.econ-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.econ-list li b { text-align: right; white-space: nowrap; }
.dial-delta { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; margin-top: 0.45rem; min-height: 1rem; }
.delta-up { color: var(--green-d); }
.delta-down { color: var(--red); }

.meter { height: 7px; background: var(--rule-soft); border-radius: 5px; margin-top: 0.6rem; overflow: hidden; }
.meter-fill { display: block; height: 100%; width: 0; background: var(--ink); transition: width 0.6s cubic-bezier(.2,.7,.3,1), background 0.4s ease; border-radius: 5px; }
.meter-green { background: linear-gradient(90deg, var(--green), #34c074); }
.meter-red { background: linear-gradient(90deg, var(--red), #f0594f); }

.econ-list { list-style: none; margin: 0; padding: 0; }
.econ-list li { display: flex; justify-content: space-between; font-size: 0.95rem; color: var(--ink-soft); padding: 0.24rem 0; border-bottom: 1px dotted var(--rule); }
.econ-list li:last-child { border-bottom: none; }
.econ-list b { font-family: var(--sans); font-weight: 800; font-variant-numeric: tabular-nums; }

/* --- Four nations ------------------------------------------------------- */
.nations { margin-bottom: 1.5rem; }
.nation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; }
.nation { background: var(--paper-card); border: 1px solid var(--rule); border-radius: 10px; padding: 0.7rem 0.6rem; text-align: center; box-shadow: var(--shadow); }
.nation-name { font-size: 0.6rem; font-weight: 800; color: var(--ink-faint); display: block; margin-bottom: 0.3rem; }
.nation-val { font-family: var(--sans); font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.nation-note { font-size: 0.78rem; color: var(--ink-soft); font-style: normal; margin: 0.25rem 0 0; line-height: 1.25; min-height: 2.1em; }
.nation-bar { height: 5px; background: var(--rule-soft); border-radius: 4px; margin-top: 0.45rem; overflow: hidden; }
.nation-bar span { display: block; height: 100%; background: var(--green); transition: width 0.6s ease; }

.indy-gauge { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
.indy-label { font-family: var(--sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.indy-track { flex: 1; height: 7px; background: var(--rule-soft); border-radius: 5px; overflow: hidden; }
.indy-fill { display: block; height: 100%; background: var(--blue); transition: width 0.6s ease, background 0.4s ease; }
.indy-fill.hot { background: var(--red); }
.indy-val { font-family: var(--sans); font-size: 0.66rem; font-weight: 800; color: var(--ink-soft); min-width: 2.2rem; text-align: right; }

/* --- The Red Box / despatch --------------------------------------------- */
.despatch {
  background: linear-gradient(180deg, var(--paper-card), var(--paper-2)); border: 1px solid var(--rule); border-left: 5px solid var(--accent);
  border-radius: var(--r); padding: 1.2rem 1.3rem 1.4rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-lg);
}
.despatch .section-label { border-left: 0; padding-left: 0; margin-bottom: 0.2rem; }
.redbox-stage { text-align: center; margin: 0.2rem 0 1rem; }
.redbox-svg { width: 138px; height: auto; overflow: visible; filter: drop-shadow(0 6px 14px rgba(178,42,35,.28)); }
.redbox-shadow { fill: rgba(20,27,39,.12); }
.redbox-body rect { fill: var(--red); }
.redbox-band { fill: var(--red-d); }
.redbox-cipher rect, .redbox-cipher circle { fill: #f3d27a; }
.redbox-cipher path { stroke: #f3d27a; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.redbox-stud { fill: #f0c95c; }
.redbox-papers rect { fill: #fffaf0; stroke: #ecd9b0; stroke-width: 1; }
.redbox-lid rect { fill: var(--red-d); }
.redbox-handle { stroke: #f3d27a; stroke-width: 3; }
.redbox-caption { font-family: var(--sans); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0.5rem 0 0; }
.redbox-lid { transform-box: fill-box; transform-origin: 22% 100%; transform: translateY(-10px) rotate(-5deg); }
.redbox-papers { transform-box: fill-box; transform-origin: 50% 100%; }
.redbox-stage.is-opening .redbox-svg { animation: redbox-rise 0.6s cubic-bezier(.2,.7,.3,1) both; }
.redbox-stage.is-opening .redbox-lid { animation: redbox-lid 0.7s cubic-bezier(.2,.7,.3,1) both; }
.redbox-stage.is-opening .redbox-papers { animation: redbox-papers 0.7s ease both; }
@keyframes redbox-rise { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes redbox-lid { 0% { transform: translateY(0) rotate(0); } 60% { transform: translateY(-13px) rotate(-7deg); } 100% { transform: translateY(-10px) rotate(-5deg); } }
@keyframes redbox-papers { 0% { opacity: 0; transform: translateY(8px); } 50% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .redbox-stage.is-opening * { animation: none !important; } }
.despatch-hint { color: var(--ink-soft); margin: 0 0 0.8rem; font-style: normal; }
.despatch textarea { resize: vertical; }
.despatch-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 0.8rem; gap: 1rem; }
.charcount { font-size: 0.66rem; font-weight: 600; color: var(--ink-faint); }
.despatch-actions .btn-primary { width: auto; min-width: 14rem; }
.despatch-error { color: var(--red); font-weight: 600; font-size: 0.95rem; margin: 0.7rem 0 0; }

/* --- Reaction ----------------------------------------------------------- */
.reaction { margin-bottom: 1.5rem; }
.reaction-card { background: var(--paper-card); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); }
.wire { padding: 1.2rem 1.35rem; border-bottom: 1px solid var(--rule); background: linear-gradient(180deg,#fff,#fafbfd); }
.wire-kicker { font-family: var(--sans); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin: 0 0 0.3rem; }
.wire-headline { font-size: 1.7rem; font-weight: 700; line-height: 1.16; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.wire-narrative { color: var(--ink-soft); margin: 0; }
.reaction-body { padding: 1.2rem 1.35rem; display: grid; gap: 1.3rem; }

.division { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.division-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.division-tag { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.22rem 0.6rem; border-radius: 20px; }
.tag-passed  { background: var(--green); color: #fff; }
.tag-amended { background: var(--gilt); color: #fff; }
.tag-blocked { background: var(--red); color: #fff; }
.division-note { font-size: 0.95rem; color: var(--ink-soft); font-style: normal; }
.division-bar { display: flex; height: 1.7rem; font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; }
.ayes { background: var(--green); color: #fff; display: grid; place-items: center; }
.noes { background: var(--blue); color: #fff; display: grid; place-items: center; }

.subhead { font-family: var(--sans); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.6rem; }
.press-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.press { border: 1px solid var(--rule); border-radius: 10px; padding: 0.75rem 0.85rem; border-top: 4px solid var(--centre); background: var(--paper-card); }
.press.left { border-top-color: var(--red); }
.press.right { border-top-color: var(--blue); }
.press-outlet { font-weight: 700; font-size: 0.98rem; }
.press-lean { font-size: 0.55rem; font-weight: 700; color: var(--ink-faint); margin-left: 0.35rem; }
.press-headline { margin: 0.35rem 0 0; font-style: normal; color: var(--ink-soft); line-height: 1.3; }

.voices { display: grid; gap: 0.7rem; }
.voice { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: baseline; }
.voice-persona { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.voice-quote { margin: 0; }
.voice-quote::before { content: "\201C"; }
.voice-quote::after { content: "\201D"; }

.consequence { border-left: 4px solid var(--gilt); padding: 0.5rem 0 0.5rem 0.9rem; color: var(--ink-soft); font-style: normal; background: var(--gilt-bg); border-radius: 0 8px 8px 0; }
.consequence b { font-family: var(--sans); font-style: normal; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gilt); display: block; margin-bottom: 0.2rem; }

/* --- Confidence motion -------------------------------------------------- */
.confidence { margin-top: 1.3rem; padding: 1.15rem 1.3rem; border: 1px solid var(--red); border-radius: var(--r); background: linear-gradient(180deg,#fff,var(--red-bg)); box-shadow: var(--shadow-lg); }
.confidence.survived { border-color: var(--gilt); background: linear-gradient(180deg,#fff,var(--gilt-bg)); }
.confidence-kicker { font-family: var(--sans); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin: 0 0 0.5rem; }
.confidence.survived .confidence-kicker { color: var(--gilt); }
.confidence-reason { margin: 0 0 0.8rem; font-style: normal; }
.confidence .division-bar { height: 1.8rem; border-radius: 6px; overflow: hidden; }
.confidence-result { margin: 0.8rem 0 0; font-weight: 700; }

/* --- Game over ---------------------------------------------------------- */
.portcullis.dimmed, .emblem.dimmed { color: var(--ink-faint); filter: none; }
#go-title { font-size: 2.6rem; }
.record { margin: 2rem 0; border-top: 1px solid var(--rule); }
.record > div { display: flex; justify-content: space-between; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--rule-soft); }
.record dt { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.record dd { margin: 0; font-family: var(--sans); font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.record-verdict { display: block !important; padding-top: 1rem; }
.record-verdict dd { font-family: var(--serif); font-weight: 400; font-style: normal; font-size: 1.15rem; color: var(--ink-soft); }
.record-crisis dd { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--accent); text-align: right; }

/* Game-over actions + share */
.go-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.go-actions .btn { flex: 1 1 auto; }
.go-share-hint { margin: 0.8rem 0 0; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--accent); text-align: center; }

/* Resume an in-progress game */
.resume-banner {
  display: flex; flex-wrap: wrap; gap: 0.9rem 1.2rem; align-items: center; justify-content: space-between;
  margin: 0 0 1.8rem; padding: 1rem 1.2rem; background: var(--paper-card);
  border: 1.5px solid var(--rule); border-left: 5px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow);
}
.resume-kicker { margin: 0 0 0.15rem; font-family: var(--sans); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.resume-line { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.resume-actions { display: flex; gap: 0.6rem; flex: 0 0 auto; }
.resume-actions .btn { white-space: nowrap; }

/* --- Hansard ------------------------------------------------------------ */
.hansard-list { list-style: none; margin: 0; padding: 0; }
.hansard-item { padding: 0.7rem 0; border-bottom: 1px solid var(--rule-soft); display: flex; gap: 0.85rem; }
.hansard-item:last-child { border-bottom: none; }
.hansard-no { font-family: var(--sans); font-size: 0.72rem; font-weight: 800; color: var(--ink-faint); min-width: 2.4rem; }
.hansard-policy { margin: 0; }
.hansard-policy b { font-weight: 700; }
.hansard-meta { font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-faint); margin-top: 0.2rem; }

.game-footer { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.game-footer p { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-faint); }
.game-footer a, .despatch-error a { color: var(--red); }

/* --- Campaign & election ------------------------------------------------ */
.linkbtn { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--accent); text-decoration: none; text-transform: none; }
.linkbtn:hover { text-decoration: underline; }
.choice-btn {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; cursor: pointer; gap: 0.2rem;
  padding: 0.95rem 1rem; margin-bottom: 0.55rem; border: 1.5px solid var(--rule); border-radius: 11px; background: var(--paper-card);
  font-family: var(--serif); box-shadow: var(--shadow); transition: border-color .15s, background .15s, transform .1s;
}
.choice-btn:hover { border-color: var(--green); background: var(--green-bg); transform: translateY(-2px); }
.choice-btn strong { font-size: 1.15rem; font-weight: 700; }
.choice-btn small { font-size: 0.92rem; color: var(--ink-soft); font-style: normal; }

.seatbars { margin: 1.5rem 0 1.8rem; }
.seatbar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.seatbar-l { flex: none; width: 7rem; text-align: right; font-family: var(--sans); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-soft); }
.seatbar-track { flex: 1; height: 1.6rem; background: var(--rule-soft); border-radius: 8px; overflow: hidden; }
.seatbar-fill { display: block; height: 100%; transition: width 0.9s cubic-bezier(.2,.7,.3,1); border-radius: 8px; }
.seatbar-fill.gov { background: var(--green); }
.seatbar-fill.opp { background: var(--blue); }
.seatbar-fill.oth { background: var(--centre); }
.seatbar-n { flex: none; width: 3rem; font-family: var(--sans); font-weight: 800; font-variant-numeric: tabular-nums; }
.seatbar-note { font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-faint); margin: 0.6rem 0 0; }

/* --- Overlay & modals --------------------------------------------------- */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(15,20,30,.6); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 1.25rem; }
.overlay-card { background: var(--paper-card); border-radius: var(--r); padding: 1.9rem 2.2rem; text-align: center; display: grid; gap: 0.7rem; justify-items: center; box-shadow: var(--shadow-lg); }
.overlay-card p { margin: 0; font-style: normal; color: var(--ink-soft); }
.spin { color: var(--green); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.upgrade-card { background: var(--paper-card); border-radius: var(--r); border-top: 5px solid var(--gilt); padding: 2rem 2.1rem 1.8rem; max-width: 460px; width: calc(100% - 2.5rem); text-align: left; box-shadow: var(--shadow-lg); }
.upgrade-card h2 { font-size: 1.8rem; margin: 0.3rem 0 0.5rem; }
.upgrade-sub { color: var(--ink-soft); margin: 0 0 1.1rem; font-style: normal; }
.upgrade-list { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.upgrade-list li { padding: 0.5rem 0 0.5rem 1.5rem; position: relative; color: var(--ink-soft); border-bottom: 1px solid var(--rule-soft); font-size: 1rem; }
.upgrade-list li::before { content: "✓"; position: absolute; left: 0; color: #fff; background: var(--green); width: 1.1rem; height: 1.1rem; border-radius: 50%; font-size: 0.7rem; display: grid; place-items: center; top: 0.55rem; }
.upgrade-list strong { color: var(--ink); }
.upgrade-price { font-family: var(--sans); font-size: 1.7rem; font-weight: 800; margin: 0 0 1rem; }
.dlc-or { text-align: center; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.02em; color: var(--ink-faint); margin: 0.8rem 0 0.4rem; }
.upgrade-card .btn-primary { width: 100%; margin-bottom: 0.6rem; }
.upgrade-close { display: block; width: 100%; text-align: center; color: var(--ink-faint); }
#upgrade-note { min-height: 1rem; color: var(--green-d); font-weight: 600; }

/* --- Accounts: account bar + auth/subscribe wall ---------------------- */
.account-bar { display: flex; justify-content: flex-end; align-items: center; gap: 0.7rem; margin: 0 0 0.4rem; min-height: 1.4rem; }
.account-state { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }

.auth-card { background: var(--paper-card); border-radius: var(--r); border-top: 5px solid var(--accent); padding: 2rem 2.1rem 1.8rem; max-width: 440px; width: calc(100% - 2.5rem); text-align: left; box-shadow: var(--shadow-lg); }
.auth-card h2 { font-size: 1.7rem; margin: 0.3rem 0 0.4rem; }
.auth-sub { color: var(--ink-soft); margin: 0 0 1.2rem; font-style: normal; font-size: 0.96rem; }
.auth-card .field { margin-bottom: 1rem; }
.auth-card input { width: 100%; box-sizing: border-box; font-family: var(--serif); font-size: 1.05rem; padding: 0.6rem 0.8rem; border: 1.5px solid var(--rule); border-radius: 9px; background: var(--paper-2); }
.auth-card .btn-primary { width: 100%; margin: 0.4rem 0 0.2rem; }
.auth-card .btn-ghost { width: 100%; margin: 0.2rem 0 0.6rem; }
.auth-links { display: flex; justify-content: space-between; gap: 0.8rem; margin-top: 0.7rem; }
.auth-acct-line { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 0.9rem; }
.auth-msg { min-height: 1rem; margin: 0.8rem 0 0; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.auth-msg.auth-err { color: var(--red); }
.auth-msg.auth-ok { color: var(--green-d); }
.auth-close { display: block; width: 100%; text-align: center; color: var(--ink-faint); margin-top: 0.8rem; }

.fade-in { animation: fade 0.4s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 620px) {
  h1 { font-size: 2.7rem; }
  .dials { grid-template-columns: 1fr 1fr; }
  .dial-lg { grid-column: 1 / 3; }
  .dial-econ { grid-column: 1 / 3; }
  .dial-value { font-size: 2.3rem; }
  .nation-grid { grid-template-columns: 1fr 1fr; }
  .cabinet-grid { grid-template-columns: 1fr; }
  .press-row { grid-template-columns: 1fr; }
  .despatch-actions { flex-direction: column; align-items: stretch; }
  .despatch-actions .btn-primary { width: 100%; min-width: 0; }
}

/* --- Error pages -------------------------------------------------------- */
.error-page { max-width: 560px; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; }
.error-page .code { font-family: var(--sans); font-size: 4rem; font-weight: 800; color: var(--ink-faint); margin: 0; }