:root{
  --paper:#fff8e8;
  --ink:#292421;
  --muted:#6c6258;
  --line:#2e2a25;
  --card:#fffdf6;
  --shadow:0 14px 34px rgba(57,42,22,.16);
  --joy:#ffbd59;
  --joy-dark:#b4631a;
  --blue:#69a6d9;
  --blue-dark:#225a84;
  --cream:#f5ecd2;
  --missing:#e9e1cf;
  --focus:#222;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"Trebuchet MS","Comic Sans MS","Arial Rounded MT Bold",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(255,189,89,.25), transparent 22rem),
    radial-gradient(circle at 88% 18%, rgba(105,166,217,.22), transparent 25rem),
    linear-gradient(135deg,#fff8e8,#fbf0d2 74%,#f5dfb0);
}
.loading{
  position:fixed;inset:0;display:grid;place-items:center;gap:.75rem;
  z-index:9999;background:var(--paper);font-size:1.1rem;font-weight:800;
}
.spinner{width:42px;height:42px;border:5px solid #ead8ae;border-top-color:var(--joy-dark);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.app-shell{min-height:100%;padding:clamp(14px,2vw,28px);max-width:1500px;margin:0 auto}
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:end;margin-bottom:1rem}
.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--joy-dark);font-weight:900;margin:0 0 .25rem}
h1{font-size:clamp(2rem,5vw,4.7rem);line-height:.92;margin:.1rem 0;text-wrap:balance}
.intro{max-width:820px;color:var(--muted);font-size:clamp(.95rem,1.2vw,1.15rem);margin:.6rem 0 0}
.hero-card{display:flex;gap:.55rem;align-items:center;justify-content:flex-end;flex-wrap:wrap}
button,select{font:inherit}
.pill-button,.ghost-button{
  cursor:pointer;border:2px solid var(--line);border-radius:999px;padding:.75rem 1rem;
  box-shadow:4px 5px 0 rgba(46,42,37,.18);background:var(--joy);font-weight:900;color:var(--ink);
}
.ghost-button{background:var(--card)}
.pill-button:focus,.ghost-button:focus,select:focus{outline:3px solid rgba(34,90,132,.35);outline-offset:2px}
.scoreboard{display:grid;grid-template-columns:1fr 1fr minmax(250px,.9fr);gap:1rem;margin:1rem 0}
.scoreboard article,.map-card,.scatter-card{
  background:rgba(255,253,246,.9);
  border:2px solid var(--line);
  border-radius:26px;
  box-shadow:var(--shadow);
}
.scoreboard article{padding:1rem}
.scoreboard h2,.map-card h2,.scatter-card h2{font-size:1rem;margin:0 0 .25rem}
.rank-list{margin:.6rem 0 0;padding-left:1.4rem}
.rank-list li{padding:.2rem .25rem;border-radius:10px;cursor:pointer}
.rank-list li:hover,.rank-list li:focus{background:#ffe8b5}
.rank-list span{font-weight:900}
.caveat p{color:var(--muted);margin:.4rem 0 0;font-size:.92rem;line-height:1.35}
.map-window{display:grid;gap:1rem;min-height:56vh}
.map-window.split{grid-template-columns:1fr 1fr}
.map-window.single{grid-template-columns:1fr}
.map-window.single .map-card[data-panel="right"]{display:none}
.map-card{padding:1rem;position:relative;overflow:hidden}
.map-card:before,.scatter-card:before{
  content:"";position:absolute;inset:8px;border:1.5px dashed rgba(46,42,37,.18);border-radius:20px;pointer-events:none;
}
.map-title-row{display:flex;justify-content:space-between;gap:1rem;align-items:start;position:relative;z-index:2}
.map-title-row p{margin:.2rem 0 0;color:var(--muted);font-size:.88rem}
select{
  min-width:180px;border:2px solid var(--line);border-radius:16px;background:#fff8df;
  padding:.55rem .65rem;font-weight:800;color:var(--ink);
}
.map-svg{width:100%;height:clamp(330px,43vh,560px);display:block;position:relative;z-index:1}
.state{
  stroke:rgba(46,42,37,.82);stroke-width:.85px;vector-effect:non-scaling-stroke;
  transition:fill .18s ease, opacity .18s ease, stroke-width .18s ease, filter .18s ease;
}
.state:hover,.state.is-active{
  stroke:var(--focus);stroke-width:2.4px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.18));
}
.state.is-muted{opacity:.48}
.state-label{font-size:9px;font-weight:900;paint-order:stroke;stroke:#fff8e8;stroke-width:3px;fill:#2c2823;pointer-events:none}
.legend{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.15rem .25rem 0;color:var(--muted);font-size:.8rem;position:relative;z-index:2}
.legend-swatch{height:12px;width:120px;border:1.5px solid rgba(46,42,37,.55);border-radius:999px}
.legend button{
  border:1.5px solid var(--line);background:#fff8df;border-radius:999px;padding:.25rem .55rem;cursor:pointer;font-weight:800;
}
.legend .legend-body[hidden]{display:none}
.chart-row{margin-top:1rem}
.scatter-card{padding:1rem;position:relative}
.scatter-svg{width:100%;height:260px;display:block}
.dot{stroke:#292421;stroke-width:1.1px;opacity:.78;cursor:pointer}
.dot.is-active{stroke-width:3px;opacity:1}
.axis text{font-size:11px;fill:var(--muted)}
.axis path,.axis line{stroke:rgba(46,42,37,.28)}
.axis-label{font-size:12px;fill:var(--muted);font-weight:900}
.tooltip{
  position:fixed;z-index:1000;pointer-events:none;max-width:330px;
  background:#fffdf6;border:2px solid var(--line);border-radius:20px;
  box-shadow:8px 8px 0 rgba(46,42,37,.16);padding:.85rem .95rem;
  transform:translate(-50%, calc(-100% - 14px));display:none;
}
.tooltip h3{margin:0 0 .35rem;font-size:1.15rem}
.tooltip p{margin:.3rem 0;color:var(--muted)}
.tooltip .metric{display:flex;justify-content:space-between;gap:1rem;border-top:1px dashed #d8c49a;padding-top:.32rem;margin-top:.32rem}
.tooltip .metric strong{color:var(--ink)}
.tooltip .quip{font-style:italic;color:var(--joy-dark);font-weight:800}
footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.82rem;margin:1rem .25rem 0}
.modal-backdrop{position:fixed;inset:0;background:rgba(41,36,33,.35);display:none;place-items:center;z-index:5000;padding:1rem}
.modal-backdrop.is-open{display:grid}
.modal{
  max-width:720px;width:min(720px,100%);background:#fffdf6;border:2.5px solid var(--line);
  border-radius:28px;box-shadow:10px 10px 0 rgba(0,0,0,.18);padding:1.5rem;position:relative;
}
.modal h2{margin-top:0}
.modal p{line-height:1.4;color:var(--muted)}
.modal a{color:var(--blue-dark);font-weight:900}
.close-button{position:absolute;right:1rem;top:.8rem;border:2px solid var(--line);background:var(--joy);border-radius:50%;width:36px;height:36px;font-size:1.5rem;line-height:1;cursor:pointer}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero-card{justify-content:flex-start}
  .scoreboard{grid-template-columns:1fr}
  .map-window.split{grid-template-columns:1fr}
  .map-svg{height:420px}
}
@media (max-width:620px){
  .app-shell{padding:12px}
  .map-title-row{flex-direction:column}
  select{width:100%}
  h1{font-size:2.4rem}
  .map-svg{height:360px}
}