:root{
  --tube-black:#080815;
  --deep-blue:#121a62;
  --broadcast-blue:#153dd5;
  --electric-blue:#00a5ff;
  --blockbuster:#ffd231;
  --hollywood:#b44cff;
  --hot-pink:#ff3ca8;
  --newscast-red:#f52534;
  --cream:#fff2aa;
  --snow:#f8f4e0;
  --state-fill:#212a79;
  --state-stroke:#fff36b;
  --shadow:#03030a;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#03020c;color:var(--snow);overflow:hidden}
body{
  font-family:Impact, Haettenschweiler, "Arial Black", system-ui, sans-serif;
  image-rendering:pixelated;
  text-transform:uppercase;
}
a{color:var(--blockbuster)}
button{font:inherit;text-transform:uppercase}
#vhs-shell{
  position:relative;
  width:100vw;
  height:100dvh;
  min-height:360px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(28,53,184,.65), rgba(5,6,24,.98) 70%),
    linear-gradient(135deg, #0b0938, #260040 55%, #060611);
  filter:contrast(1.15) saturate(1.4);
}
#vhs-shell::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
  mix-blend-mode:screen;
  opacity:.36;
  z-index:400;
}
.crt-overlay{
  position:absolute; inset:-2%;
  border-radius:2.5rem;
  pointer-events:none;
  box-shadow:inset 0 0 8rem #000, inset 0 0 2rem #000, 0 0 0 9999px rgba(0,0,0,.08);
  z-index:399;
}
.tracking-lines{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:401;
  background:
    linear-gradient(transparent 0 22%, rgba(255,255,255,.18) 22.5%, transparent 23% 63%, rgba(0,255,255,.11) 64%, transparent 65%),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(255,255,255,.05) 10px, transparent 11px);
  animation:tracking 2.4s infinite steps(6);
  opacity:.55;
}
.warp{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:402;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent);
  height:18vh;
  top:-22vh;
  animation:warpscan 5.2s infinite linear;
  opacity:.55;
}
@keyframes tracking{
  0%,100%{transform:translateY(-2px);opacity:.38}
  23%{transform:translateY(8px);opacity:.72}
  49%{transform:translateY(-12px);opacity:.42}
  51%{transform:translateY(22px);opacity:.85}
  77%{transform:translateY(3px);opacity:.48}
}
@keyframes warpscan{to{top:110vh}}
.broadcast-header{
  position:absolute; inset:10px 10px auto 10px;
  height:clamp(72px,14vh,120px);
  display:grid;
  grid-template-columns:minmax(88px,13vw) 1fr minmax(80px,11vw);
  align-items:stretch;
  gap:10px;
  z-index:300;
  filter:drop-shadow(6px 6px 0 #000);
}
.bug,.clock,.headline-block{
  border:5px solid var(--cream);
  background:linear-gradient(180deg, var(--newscast-red), #7d0613);
  box-shadow:inset 0 0 0 4px #000, 6px 6px 0 #000;
}
.bug,.clock{
  display:grid;place-items:center;text-align:center;color:#fff;
  font-size:clamp(16px,2.6vw,32px);
  line-height:.88;
  letter-spacing:.03em;
}
.clock{background:linear-gradient(180deg, var(--blockbuster), #a86800); color:#150a36}
.headline-block{
  padding:8px 14px;
  background:linear-gradient(90deg, #142dde, #0c1594 45%, #eb128b);
  overflow:hidden;
}
h1{
  margin:0;
  font-size:clamp(26px,5.5vw,76px);
  letter-spacing:.02em;
  line-height:.82;
  text-shadow:5px 5px 0 #000, -2px 2px 0 var(--electric-blue);
}
.headline-block p{
  margin:.35em 0 0;
  font-family:"Arial Black", Impact, sans-serif;
  font-size:clamp(10px,1.55vw,22px);
  line-height:1;
  color:var(--cream);
  text-shadow:3px 3px 0 #000;
}
#stage{
  position:absolute; inset:0;
  padding-top:clamp(92px,17vh,142px);
}
#map{
  position:absolute;
  inset:clamp(92px,17vh,142px) 0 0 0;
  width:100%;
  height:calc(100% - clamp(92px,17vh,142px));
  z-index:10;
  cursor:default;
}
.states path{
  fill:var(--state-fill);
  stroke:var(--state-stroke);
  stroke-width:2.8;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(3px 3px 0 #03030a);
}
.states path.has-data{cursor:pointer}
.states path.has-data:hover{filter:drop-shadow(3px 3px 0 #03030a)}
.store-point{
  vector-effect:non-scaling-stroke;
  stroke:#070712;
  stroke-width:1.5px;
  cursor:pointer;
  filter:drop-shadow(2px 2px 0 #000);
  shape-rendering:crispEdges;
}
.store-point.blockbuster{fill:var(--blockbuster)}
.store-point.hollywood{fill:var(--hollywood)}
.loading{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  z-index:250;
  padding:18px 28px;
  border:5px solid var(--cream);
  background:#05050f;
  color:var(--blockbuster);
  box-shadow:8px 8px 0 #000;
  font-size:clamp(18px,3.4vw,42px);
}
.hidden{display:none!important}
.back-button{
  position:absolute; left:18px; top:calc(clamp(92px,17vh,142px) + 14px);
  z-index:260;
  min-width:150px;
  padding:12px 18px;
  border:5px solid #fff;
  background:linear-gradient(180deg,var(--blockbuster),#d77a00);
  color:#10104a;
  box-shadow:7px 7px 0 #000;
  cursor:pointer;
  font-size:clamp(22px,4vw,48px);
  line-height:.85;
}
.state-label{
  position:absolute; right:14px; top:calc(clamp(92px,17vh,142px) + 14px);
  z-index:220;
  max-width:48vw;
  padding:10px 14px;
  border:5px solid var(--cream);
  background:linear-gradient(90deg, #101065, #bc1174);
  color:#fff;
  font-size:clamp(18px,3.1vw,40px);
  box-shadow:6px 6px 0 #000;
  text-align:right;
}
.legend{
  position:absolute; right:16px; bottom:54px;
  z-index:240;
  width:min(330px,42vw);
  border:5px solid var(--cream);
  background:#050514;
  box-shadow:7px 7px 0 #000;
}
.legend button{
  width:100%;
  border:0;
  padding:8px 10px;
  background:linear-gradient(90deg,var(--newscast-red),var(--hot-pink));
  color:white;
  cursor:pointer;
  text-align:left;
  font-size:clamp(14px,1.8vw,24px);
}
.legend.collapsed .legend-body{display:none}
.legend-body{padding:12px 14px;font-size:clamp(13px,1.4vw,20px)}
.legend-row{display:flex;align-items:center;gap:10px;margin:7px 0}
.legend-row.tiny{font-size:.7em;color:var(--cream);line-height:1.05}
.dot{width:18px;height:18px;display:inline-block;border:3px solid #000;box-shadow:2px 2px 0 #000}
.dot.blockbuster{background:var(--blockbuster)}
.dot.hollywood{background:var(--hollywood)}
.gaudy-note{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%) rotate(-1deg);
  z-index:230;
  white-space:nowrap;
  padding:10px 18px;
  border:5px solid #fff;
  background:linear-gradient(90deg, var(--blockbuster), #fff04e, var(--blockbuster));
  color:#151056;
  box-shadow:7px 7px 0 #000;
  font-size:clamp(16px,2.7vw,38px);
  letter-spacing:.02em;
  animation:chop 1.8s infinite steps(2);
}
@keyframes chop{50%{transform:translateX(-50%) translateY(2px) rotate(1deg)}}
.sources-button{
  position:absolute; left:14px; bottom:14px;
  z-index:245;
  padding:7px 10px;
  border:4px solid #070712;
  background:#17171b;
  color:#5dff7f;
  box-shadow:4px 4px 0 #000;
  font-size:clamp(10px,1.3vw,16px);
  opacity:.55;
  cursor:pointer;
}
.sources-button:hover{opacity:1}
.popup{
  position:absolute;
  z-index:360;
  min-width:260px;
  max-width:min(390px,88vw);
  border:5px solid #fff;
  background:linear-gradient(180deg,#111177,#08081d);
  color:#fff;
  box-shadow:9px 9px 0 #000;
  padding:12px 14px 14px;
  font-family:"Arial Black", Impact, sans-serif;
  text-transform:none;
}
.popup h3{
  text-transform:uppercase;
  margin:0 34px 8px 0;
  color:var(--blockbuster);
  line-height:.95;
  font-size:26px;
}
.popup p{margin:5px 0;font-size:14px;line-height:1.2}
.popup .label{color:var(--cream);text-transform:uppercase}
#popupClose{
  position:absolute; right:6px; top:4px;
  border:0;background:var(--newscast-red);color:#fff;
  width:30px;height:30px;cursor:pointer;line-height:1;
}
.modal-backdrop{
  position:absolute; inset:0;
  z-index:500;
  background:rgba(0,0,0,.72);
  display:grid;
  place-items:center;
  padding:18px;
}
.modal-card{
  width:min(760px,94vw);
  max-height:86vh;
  overflow:auto;
  border:8px solid var(--cream);
  background:linear-gradient(135deg,#080839,#1515a0 45%,#8b0c63);
  box-shadow:12px 12px 0 #000;
  padding:24px;
  color:#fff;
  font-family:"Arial Black", Impact, sans-serif;
  text-transform:none;
}
.modal-card h2{
  margin:0 42px 16px 0;
  font-size:clamp(24px,4vw,52px);
  line-height:.9;
  text-transform:uppercase;
  color:var(--blockbuster);
  text-shadow:4px 4px 0 #000;
}
.modal-close{float:right;border:4px solid white;background:var(--newscast-red);color:white;font-size:26px;cursor:pointer}
.modal-card p{font-size:clamp(14px,1.7vw,20px);line-height:1.22}
.modal-fine{color:var(--cream)}
.attribution{
  position:absolute; right:12px; bottom:4px; z-index:210;
  font-family:monospace; font-size:10px; color:rgba(255,255,255,.55);
  text-transform:none;
}
@media (orientation:landscape) and (max-height:520px){
  .broadcast-header{height:70px;gap:6px}
  .headline-block{padding:6px 10px}
  h1{font-size:clamp(22px,5vw,44px)}
  .headline-block p{display:none}
  #stage{padding-top:80px}
  #map{inset:80px 0 0 0;height:calc(100% - 80px)}
  .legend{width:230px;bottom:34px}
  .legend-body{padding:8px 10px}
  .gaudy-note{font-size:16px;padding:6px 10px}
  .back-button{top:88px;font-size:24px;padding:8px 12px}
  .state-label{top:88px;font-size:20px}
}
@media (max-width:650px){
  .broadcast-header{grid-template-columns:74px 1fr 70px;inset:8px}
  .legend{width:230px;right:8px;bottom:44px}
  .state-label{max-width:58vw}
  .popup{max-width:92vw}
}