:root { --dem:#2f70b7; --tossup:#f1cf48; --rep:#c92f32; --neutral:#3a3b42; --bg:#202124; --card:#26282e; --fg:#e8e9ed; --muted:#a9abb3; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:system-ui,sans-serif; }
header, footer { padding:1rem 1.5rem; }
header h1 { margin:0; }
header p { margin:.25rem 0 .75rem; color:var(--muted); }
footer { color:var(--muted); font-size:.85rem; }
a { color:#8ab4f8; }
.legend { display:flex; flex-wrap:wrap; gap:.65rem 1.2rem; color:var(--muted); font-size:.85rem; }
.swatch { display:inline-block; width:12px; height:12px; margin-right:.4rem; border-radius:3px; vertical-align:-1px; }
.swatch.dem { background:var(--dem); } .swatch.tossup { background:var(--tossup); } .swatch.rep { background:var(--rep); }
main { display:flex; flex-wrap:wrap; gap:1rem; padding:0 1.5rem; align-items:flex-start; }
#map-wrap { flex:1 1 640px; min-width:0; max-width:820px; margin-inline:auto; }
#map { width:100%; height:auto; }
.hex { fill:var(--neutral); stroke:var(--bg); stroke-width:3; cursor:pointer; transition:transform .15s, fill .2s; transform-box:fill-box; transform-origin:center; }
.hex.dem { fill:var(--dem); } .hex.tossup { fill:var(--tossup); } .hex.rep { fill:var(--rep); }
.hex:hover, .hex:focus { transform:scale(1.08); outline:none; }
.hex.selected { stroke:#fff; stroke-width:4; transform:scale(1.1); }
.label { fill:#fff; font-weight:500; font-size:16px; text-anchor:middle; pointer-events:none; }
.hex.tossup + .label { fill:#252525; }
#panel { flex:0 1 420px; background:var(--card); border:1px solid #383a42; border-radius:12px; padding:1rem 1.25rem; position:relative; max-height:80vh; overflow:auto; animation:in .25s; }
#panel[hidden] { display:none; }
@keyframes in { from { opacity:0; transform:translateX(20px); } }
#close { position:absolute; top:.5rem; right:.75rem; background:none; border:0; color:var(--fg); font-size:1.6rem; cursor:pointer; }
#panel h2 { margin-top:0; }
#panel h3 { margin:1.2rem 0 .4rem; border-bottom:1px solid #444; padding-bottom:.25rem; }
.leader { display:flex; justify-content:space-between; gap:.5rem; padding:.35rem 0; font-size:.95rem; }
.leader small { color:var(--muted); display:block; }
.badge { align-self:center; font-size:.75rem; padding:.1rem .5rem; border-radius:99px; color:#fff; white-space:nowrap; background:var(--neutral); }
.badge.Democrat { background:var(--dem); } .badge.Republican { background:var(--rep); }
.badge.Independent { background:#71643a; }
.empty { color:var(--muted); font-style:italic; }