/* ===========================================================
   Hold The Seats — "Election Night" skin
   Dark broadcast results-desk: deep blues, bright numbers, ticker.
   =========================================================== */
:root{
  --bg:#070d18; --bg2:#0b1424; --panel:#0e1a2e; --panel2:#122139;
  --line:#22304a; --line2:#2c3d5c;
  --ink:#eef4ff; --muted:#93a4c2; --dim:#66789a;
  --gold:#ffd66b; --accent:#38b6ff; --accent2:#1f7fd6;
  --good:#39d98a; --bad:#ff5d6c; --warn:#ffb547;
  --lab:#E4003B; --con:#0087DC; --ld:#FAA61A; --ref:#12B6CF;
  --green:#02A95B; --snp:#FDF38E; --pc:#005B54; --oth:#8a97ad;
  --radius:12px; --shadow:0 10px 40px rgba(0,0,0,.5);
  --mono:"SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, #10213b 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #12132b 0%, transparent 55%),
    var(--bg);
  color:var(--ink); font-family:var(--sans); overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.sc{height:100%;display:flex;flex-direction:column}
.screen{display:none;height:100%;flex-direction:column;min-height:0}
.screen.active{display:flex}
/* Joe: "the black text (used in some button headings) is difficult for an oldie like me to read".
   Real bug: a plain <button> never inherits the page's own text colour — the browser's own default
   button styling sets it explicitly (buttontext, black), so anything relying on inheritance rather
   than its own color rule (.party-card .pname on the setup screen, .action .t on every governing/
   campaign action button) rendered as literal black on this page's dark navy backgrounds. One
   root-cause fix on the reset: .btn.primary's own color:#04121f (deliberately dark, for its bright
   accent-coloured background) is a more specific selector and still wins over this. */
button{font-family:inherit;cursor:pointer;color:var(--ink)}
.muted{color:var(--muted)} .dim{color:var(--dim)}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--line2); background:var(--panel2); color:var(--ink);
  padding:10px 16px; border-radius:10px; font-size:14px; font-weight:600;
  transition:.14s; line-height:1.1;
}
.btn:hover:not(:disabled){border-color:var(--accent);background:#16233c}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent2));border-color:var(--accent);color:#04121f}
.btn.primary:hover:not(:disabled){filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px;font-size:12.5px;border-radius:8px}
.btn.danger{border-color:#5a2530;color:#ffb3bb}
.btn.danger:hover:not(:disabled){border-color:var(--bad);background:#2a1620}
.btn.good{border-color:#1f5c43;color:#a9f0cf}

/* ===========================================================
   SETUP
   =========================================================== */
.menu-version{position:fixed;right:14px;bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--dim);opacity:.7;pointer-events:none;z-index:5}
.setup{align-items:center;overflow:auto}
.setup-inner{max-width:860px;width:100%;margin:auto;padding:38px 20px 60px}
.brand{text-align:center;margin-bottom:26px}
.brand-logo{width:132px;height:132px;border-radius:22px;box-shadow:var(--shadow);margin-bottom:18px}
.eyebrow{letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;color:var(--accent);margin:0 0 10px;font-weight:700}
.title{font-size:clamp(46px,9vw,86px);margin:0;font-weight:800;letter-spacing:-.02em;line-height:.9}
.title .craft{color:var(--gold)}
.tagline{color:var(--muted);max-width:560px;margin:16px auto 0;font-size:15.5px;line-height:1.5}
.setup-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.setup-card h2{margin:0 0 4px;font-size:20px}
.party-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:18px 0}
.party-card{border:1.5px solid var(--line2);border-radius:11px;padding:14px;background:var(--panel2);transition:.14s;text-align:left;position:relative;overflow:hidden}
.party-card:hover{border-color:var(--accent)}
.party-card.sel{border-color:var(--pcol);box-shadow:0 0 0 1px var(--pcol) inset,0 8px 24px rgba(0,0,0,.35)}
.party-card .swatch{width:100%;height:5px;border-radius:3px;background:var(--pcol);margin-bottom:10px}
.party-card .pname{font-weight:700;font-size:15px}
.party-card .pseats{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--pcol);margin-top:6px}
.party-card .pdesc{color:var(--muted);font-size:12px;margin-top:4px;line-height:1.35}
.setup-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:6px}
.diff-row{color:var(--muted);font-size:13.5px;display:flex;align-items:center;gap:8px}
.diff-row select{background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:8px;padding:7px 9px;font-size:13.5px}
.foot-note{color:var(--dim);font-size:11.5px;text-align:center;margin-top:22px;line-height:1.5}

/* ===========================================================
   GAME LAYOUT
   =========================================================== */
.game{background:linear-gradient(180deg,#081120,#060b16)}
.topbar{
  display:flex;align-items:center;gap:14px;padding:9px 16px;flex-wrap:wrap;
  background:linear-gradient(180deg,#0d1a30,#0a1526);border-bottom:1px solid var(--line);
  box-shadow:0 2px 14px rgba(0,0,0,.4);z-index:5
}
.tb-brand{font-weight:800;letter-spacing:-.01em;font-size:16px;display:flex;align-items:center;gap:8px}
.tb-logo{width:28px;height:28px;border-radius:7px;flex-shrink:0}
.tb-brand .craft{color:var(--gold)}
.tb-you{display:flex;align-items:center;gap:9px;padding-left:6px;border-left:1px solid var(--line2)}
.tb-you .flag{width:16px;height:12px;border-radius:2px;background:var(--pcol)}
.tb-stats{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap;align-items:center}
.tb-stat{display:flex;flex-direction:column;line-height:1.05;min-width:52px}
.tb-stat .k{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.tb-stat .v{font-family:var(--mono);font-size:16px;font-weight:700}
.tb-stat .v.mon{color:var(--gold)} .tb-stat .v.time{color:var(--accent)}
.tb-phase{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 9px;border-radius:20px;border:1px solid var(--line2)}
.tb-phase.gov{color:var(--accent);border-color:#284a72;background:#0d2038}
.tb-phase.camp{color:var(--gold);border-color:#5a4a1e;background:#241d0b}

.stage-wrap{flex:1;display:flex;min-height:0}
.map-col{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.map-stage{flex:1;min-height:0;position:relative;overflow:hidden;background:radial-gradient(900px 700px at 40% 30%,#0c1830,#070d18);touch-action:none;cursor:grab}
.map-stage.sat{background:radial-gradient(1000px 800px at 45% 25%,#0a2d3a 0%,#07202b 45%,#04121a 100%)}
.map-stage.sat #map-svg path.seat{stroke:#0c1a12;stroke-width:.28}
.map-stage.sat #map-svg path.seat:hover{stroke:#fff;stroke-width:1.1}
.map-stage.sat #map-svg .inset-box{stroke:#3d6a72}
.map-stage:active{cursor:grabbing}
#map-svg{width:100%;height:100%;display:block}
#map-svg path.seat{stroke:#0a1220;stroke-width:.35;transition:fill .25s,stroke .1s}
#map-svg path.seat:hover{stroke:#fff;stroke-width:1.1}
#map-svg path.seat.held{stroke:var(--gold);stroke-width:.9}
#map-svg .inset-box{fill:none;stroke:var(--line2);stroke-width:1;stroke-dasharray:3 3}
#map-svg .inset-label{fill:var(--dim);font:600 11px var(--sans)}

.map-tools{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:12px;pointer-events:none}
.map-legend{display:flex;flex-wrap:wrap;gap:5px 12px;max-width:70%;background:rgba(8,15,28,.72);border:1px solid var(--line);border-radius:9px;padding:8px 11px;pointer-events:auto;backdrop-filter:blur(4px)}
.leg-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.leg-item .dot{width:11px;height:11px;border-radius:3px}
.leg-item b{color:var(--ink);font-family:var(--mono)}
.map-zoom{display:flex;flex-direction:column;gap:5px;pointer-events:auto}
.map-zoom button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line2);background:rgba(14,26,46,.85);color:var(--ink);font-size:17px;line-height:1;font-weight:700}
.map-zoom button:hover{border-color:var(--accent)}

/* ---------- side panel ---------- */
.panel{width:380px;max-width:44vw;flex-shrink:0;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.panel-scroll{overflow:auto;padding:16px;flex:1}
.panel h2{margin:0 0 3px;font-size:17px}
.panel h3{margin:16px 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:700}
.sub{color:var(--muted);font-size:13px;line-height:1.45;margin:0 0 6px}

/* poll bar / seat readout */
.pollbar{display:flex;height:26px;border-radius:6px;overflow:hidden;border:1px solid var(--line2);margin:6px 0}
.pollbar span{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#05101d;min-width:0;overflow:hidden}
.majline{position:relative;height:0}
.majmark{position:absolute;top:-30px;bottom:0;width:2px;background:var(--gold);opacity:.8}
.readout{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.stat-chip{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:8px 11px;flex:1;min-width:96px}
.stat-chip .k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim)}
.stat-chip .v{font-family:var(--mono);font-size:19px;font-weight:700}
.stat-chip .bar{height:4px;border-radius:2px;background:var(--line2);margin-top:6px;overflow:hidden}
.stat-chip .bar i{display:block;height:100%;border-radius:2px}

/* action list */
.actions{display:flex;flex-direction:column;gap:9px}
.action{
  display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;
  border:1px solid var(--line2);background:var(--panel2);border-radius:11px;padding:11px 12px;transition:.13s
}
.action:hover:not(:disabled){border-color:var(--accent);background:#15243d}
.action:disabled{opacity:.45}
.action .ico{font-size:19px;line-height:1;margin-top:1px}
.action .body{flex:1;min-width:0}
.action .t{font-weight:700;font-size:14px}
.action .d{color:var(--muted);font-size:12px;line-height:1.35;margin-top:2px}
.action .cost{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.pill{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;border:1px solid var(--line2);color:var(--muted)}
.pill.mon{color:var(--gold);border-color:#5a4a1e}
.pill.time{color:var(--accent);border-color:#284a72}
.pill.cap{color:#c9a6ff;border-color:#3d2c5c}

.panel-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;background:var(--panel2)}
.panel-foot .btn{flex:1}
.wk{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}

/* stakeholder rows */
.stake{display:flex;align-items:center;gap:9px;padding:5px 0}
.stake .nm{flex:1;font-size:13px}
.stake .mtr{width:96px;height:7px;border-radius:4px;background:var(--line2);overflow:hidden}
.stake .mtr i{display:block;height:100%}
.stake .pc{font-family:var(--mono);font-size:12px;width:34px;text-align:right;color:var(--muted)}

/* issues */
.issue{border:1px solid var(--line2);border-radius:10px;padding:10px 11px;margin-bottom:9px;background:var(--panel2)}
.issue .top{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600}
.issue .scale{position:relative;height:6px;border-radius:3px;background:linear-gradient(90deg,#2a3c5c,#2a3c5c);margin:9px 0 4px}
.issue .scale .me{position:absolute;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--pcol);border:2px solid #04101e;transform:translateX(-50%);transition:left .2s}
.issue .ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim)}

/* ---------- ticker ---------- */
.ticker{height:30px;background:linear-gradient(180deg,#0a1830,#081120);border-top:1px solid var(--line);overflow:hidden;position:relative;flex-shrink:0}
.ticker::before{content:"LIVE";position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;padding:0 12px;background:var(--bad);color:#fff;font-weight:800;font-size:12px;letter-spacing:.08em;z-index:2}
.ticker-track{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;white-space:nowrap;will-change:transform;padding-left:64px}
.ticker-track span{padding:0 26px;font-size:12.5px;color:var(--muted);border-right:1px solid var(--line2)}
.ticker-track span b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none!important}}

/* ===========================================================
   MODAL / CARDS
   =========================================================== */
.modal-host{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,7,14,.7);backdrop-filter:blur(3px)}
.modal-host[hidden]{display:none!important}
.card{background:var(--panel);border:1px solid var(--line2);border-radius:16px;max-width:560px;width:100%;box-shadow:var(--shadow);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:pop .25s ease}
@keyframes pop{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.card-hd{padding:18px 22px 6px}
.card-hd .kick{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:700}
.card-hd h2{margin:6px 0 0;font-size:22px}
.card-bd{padding:8px 22px 4px;overflow:auto;color:var(--muted);line-height:1.55;font-size:14.5px}
.card-bd p{margin:8px 0}
.card-ft{padding:14px 22px 20px;display:flex;flex-direction:column;gap:9px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;border:1px solid var(--line2);background:var(--panel2);border-radius:11px;padding:12px 14px;transition:.13s;width:100%}
.opt:hover:not(:disabled){border-color:var(--accent);background:#15243d}
.opt:disabled{opacity:.45}
.opt .oi{font-size:20px}
.opt .ot{font-weight:700;color:var(--ink);font-size:14.5px}
.opt .od{color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.4}
.card-ft .row{display:flex;gap:10px}
.card-ft .row .btn{flex:1}

/* ===========================================================
   ELECTION NIGHT
   =========================================================== */
.enight{position:fixed;inset:0;z-index:50;background:radial-gradient(1000px 700px at 50% -10%,#12233f,#060b16);display:flex;flex-direction:column;color:var(--ink)}
.en-hd{text-align:center;padding:18px 16px 6px}
.en-hd .kick{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:12px;font-weight:800}
.en-hd h1{margin:4px 0 0;font-size:clamp(24px,4vw,38px)}
.en-body{flex:1;display:flex;min-height:0;gap:12px;padding:8px 16px 12px}
.en-map{flex:1;min-width:0;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#070d18}
.en-map svg{width:100%;height:100%}
.en-map svg path{stroke:#0a1220;stroke-width:.3}
.en-side{width:340px;max-width:42vw;display:flex;flex-direction:column;gap:10px;overflow:auto}
.en-counter{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:14px}
.en-counter .big{font-family:var(--mono);font-size:34px;font-weight:800;text-align:center;line-height:1}
.en-counter .sub{text-align:center;color:var(--muted);font-size:12px;margin-top:4px}
.en-hemi{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px}
.en-hemi svg{width:100%;height:auto;display:block}
.en-rows{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.en-row{display:flex;align-items:center;gap:8px}
.en-row .dot{width:12px;height:12px;border-radius:3px}
.en-row .nm{flex:1;font-size:13px}
.en-row .sc{font-family:var(--mono);font-weight:700;font-size:15px}
.en-row .dl{font-family:var(--mono);font-size:11px;width:34px;text-align:right}
.en-row .dl.up{color:var(--good)} .en-row .dl.down{color:var(--bad)}
.en-ft{text-align:center;padding:10px 16px 16px}
.en-declare{position:absolute;left:12px;bottom:12px;background:rgba(8,15,28,.9);border:1px solid var(--line2);border-radius:9px;padding:8px 12px;font-size:13px;max-width:70%;animation:pop .3s}
.en-declare b{color:var(--gold)}

/* toast */
.toast-wrap{position:fixed;left:50%;bottom:46px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:9px 15px;font-size:13.5px;box-shadow:var(--shadow);animation:tin .3s;max-width:82vw}
.toast.good{border-color:#1f5c43}.toast.bad{border-color:#5a2530}
@keyframes tin{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ===========================================================
   WHAT'S NEW  (changelog card, .card-bd already scrolls — see .card in the modal block above)
   =========================================================== */
.changelog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.changelog li{position:relative;padding-left:23px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.changelog li::before{content:'●';position:absolute;left:1px;top:1px;color:var(--accent);font-size:10px}
.changelog li b{color:var(--ink)}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:820px){
  .stage-wrap{flex-direction:column;overflow:hidden}
  .map-col{min-height:0;height:38vh;flex:none}
  .panel{width:100%;max-width:none;flex:1;min-height:0;border-left:none;border-top:1px solid var(--line)}
  .tb-stats{width:100%;order:3;margin-left:0;justify-content:space-between;gap:10px}
  .map-legend{max-width:100%;font-size:10.5px}
  .topbar{padding:7px 12px;gap:9px}
  .tb-brand{font-size:15px}
  .tb-logo{width:22px;height:22px;border-radius:6px}
  .brand-logo{width:96px;height:96px;border-radius:18px}
  .en-body{flex-direction:column}
  .en-side{width:100%;max-width:none;flex-direction:row;flex-wrap:wrap}
  .en-side>*{flex:1;min-width:150px}
}