:root{
  --bg:#0d0e12; --panel:#15171e; --panel2:#1b1e27; --border:#282b36;
  --text:#e9ebf0; --muted:#8a8f9c; --faint:#5a5f6b;
  --green:#4ade80; --amber:#fbbf24; --red:#f87171; --cyan:#22d3ee;
  --green-bg:#0f1c14; --amber-bg:#1c180e; --red-bg:#1a1010;
  /* Standard vertical rhythm between sections (keep these consistent) */
  --section-gap:18px;   /* default space between stacked sections */
  --how-gap:30px;       /* extra space below the "How it works?" card */
  --navbar-h:52px;      /* height reserved for the fixed top nav */
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;line-height:1.45}
.wrap{max-width:760px;margin:0 auto;padding:calc(var(--navbar-h) + 16px) 14px 40px}
.muted{color:var(--muted);font-weight:400}

/* Fixed top navigation bar: brand pinned to the page's top-left, tabs + status inline */
.topnav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--navbar-h);
  background:rgba(13,14,18,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border)}
/* Nav links sit in a 760px centered track (same centering as .wrap) so they line
   up exactly with the page content. The logo is pinned far-left and the
   status/refresh far-right, both out of flow so they don't shift the nav. */
.topnav-inner{max-width:760px;height:100%;margin:0 auto;padding:0 14px;
  display:flex;align-items:center}
.brand{position:absolute;left:20px;top:0;height:100%;display:flex;align-items:center;
  font-size:17px;font-weight:600;letter-spacing:.3px;white-space:nowrap}
.brand-dash{color:#3d9bff;
  text-shadow:0 0 6px rgba(61,155,255,.9),0 0 13px rgba(61,155,255,.6),0 0 22px rgba(61,155,255,.4)}
.logo{color:var(--cyan);margin-right:4px}
.brand-sub{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:1px;margin-left:6px}
.topnav-right{position:absolute;right:20px;top:0;height:100%;display:flex;align-items:center;gap:10px}
/* Below ~1220px the side margin is too small to align the nav with the content
   without colliding with the fixed logo, so fall back to a nav that sits after it. */
@media(max-width:1220px){
  .topnav-inner{max-width:none;margin:0;padding:0 14px 0 248px}
}
.status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.dot.stale{background:var(--amber)}
.dot.warn{background:var(--amber)}
.dot.verified{background:var(--green);box-shadow:0 0 0 3px rgba(46,204,113,.18)}
.status[title]{cursor:help}
.btn{background:var(--panel);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:5px 10px;cursor:pointer;font-size:14px}
.btn:hover{background:var(--panel2)}

/* Top nav: two sub-apps as inline tabs; active = neon underline flush with the bar's bottom border */
.nav{display:flex;gap:22px;height:100%;margin:0}
.nav-link{position:relative;display:flex;align-items:center;height:100%;
  font-size:13.5px;color:var(--muted);text-decoration:none;
  font-weight:600;letter-spacing:.2px;white-space:nowrap;
  transition:color .12s,text-shadow .12s}
.nav-link:hover{color:var(--text)}
.nav-link.active{color:var(--cyan);text-shadow:0 0 10px rgba(34,211,238,.55)}
.nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  border-radius:2px 2px 0 0;background:var(--cyan);
  box-shadow:0 0 6px var(--cyan),0 0 12px rgba(34,211,238,.8),0 0 20px rgba(34,211,238,.5)}

/* Per-page header + sub-header — subtitle spans the full content width */
.page-head{margin:0 0 var(--section-gap)}
.page-head h1{font-size:19px;font-weight:700;margin:0 0 3px;letter-spacing:.2px}
.page-sub{font-size:12.5px;color:var(--muted);margin:0;max-width:none;line-height:1.45}

/* "How it works?" — a subtle inline link that opens a modal */
.how-link{display:inline-flex;align-items:center;gap:7px;margin:0 0 var(--how-gap);
  padding:0;background:none;border:none;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--cyan);
  transition:text-shadow .12s}
.how-link:hover{text-shadow:0 0 9px rgba(34,211,238,.55)}
.how-link .how-q{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border:1px solid var(--cyan);border-radius:50%;
  font-size:11px;font-weight:700;line-height:1}

/* Filters — a stacked panel in the right half of the top zone, beside the globe.
   (hero-layout vertically centers it against the globe.) Drives the whole radar. */
.filterbar{display:flex;flex-direction:column;gap:12px;padding:14px;
  background:var(--panel);border:1px solid var(--border);border-radius:12px}
.filterbar .selector{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.filterbar .sel-cap{text-transform:uppercase;letter-spacing:.6px;color:var(--faint);
  font-weight:600;font-size:10px}
.filterbar select{width:100%;background:var(--panel2);border:1px solid var(--border);
  color:var(--text);border-radius:8px;padding:8px 9px;margin:0;font-size:13px;cursor:pointer}
.filterbar select:focus{outline:none;border-color:var(--cyan)}
/* Active (non-"all") filter: cyan border + glow so a narrow/sparse view reads as
   "you've filtered," not "broken." Toggled via .is-active in app.js. */
.filterbar select.is-active{border-color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan),0 0 8px rgba(34,211,238,.35)}

/* Section headers — clearly separate "your region" from "compare every region". */
.section-head{margin:4px 0 10px}
.section-head h2{font-size:16px;font-weight:700;margin:0 0 2px;letter-spacing:.2px}
.section-head .sh-sub{font-size:12px;color:var(--muted);margin:0;line-height:1.4}
/* Divider under the region-detail group (by-map + best-time cards) and above "Compare
   every region" — drawn ONLY when at least one detail card is visible, via :has(), so it
   composes with either card being hidden independently (no stray line on load). The gap
   ABOVE the line comes from the last visible card's own .block margin-bottom; the wrapper
   adds the line + the gap below it. */
#region-detail:has(> section:not([hidden])){
  border-bottom:1px solid var(--border);
  margin-bottom:var(--section-gap);
}
/* "Best bet right now" line under the full-width region hero band. */
.best-bet{font-size:12.5px;color:var(--muted);margin:8px 2px var(--section-gap)}
.best-bet b{color:var(--green);font-weight:700}
.best-bet[hidden]{display:none}
/* Static FAQ (readers + SEO/GEO) */
.faq h2{font-size:16px;font-weight:700;margin:0 0 8px}
.faq .faq-intro{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.5;max-width:640px}
.faq details{border-top:1px solid var(--border);padding:9px 0}
.faq details summary{cursor:pointer;font-size:13px;font-weight:600;list-style:none}
.faq details summary::-webkit-details-marker{display:none}
.faq details summary::before{content:"+ ";color:var(--cyan)}
.faq details[open] summary::before{content:"– "}
.faq details p{font-size:12.5px;color:var(--muted);margin:8px 0 2px;line-height:1.5}
/* Active-filter chip shown next to the top section header (e.g. "Squad · FPP"). */
.sh-chip{display:inline-block;margin-left:8px;font-size:10px;font-weight:700;
  color:var(--cyan);border:1px solid var(--cyan);border-radius:5px;padding:1px 6px;
  text-transform:uppercase;letter-spacing:.4px;vertical-align:middle}

/* How-it-works modal: steps as a thin-line box grid, one icon per box */
.how-modal{width:min(560px,calc(100vw - 32px));padding:0;border:1px solid var(--border);
  border-radius:14px;background:var(--panel);color:var(--text)}
.how-modal::backdrop{background:rgba(6,7,10,.66);backdrop-filter:blur(3px)}
.how-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border)}
.how-modal-head h3{margin:0;font-size:15px;font-weight:600}
.how-close{background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:14px;line-height:1;padding:4px;border-radius:6px}
.how-close:hover{color:var(--text);background:var(--panel2)}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:11px;padding:16px}
.how-box{display:flex;flex-direction:column;gap:9px;
  border:1px solid var(--border);border-radius:10px;padding:13px;background:var(--panel2)}
.how-ico{display:inline-flex;color:var(--cyan)}
.how-ico svg{width:22px;height:22px}
.how-box p{margin:0;font-size:12px;color:var(--muted);line-height:1.5}

.searchbar{display:flex;gap:8px;margin:0 0 var(--section-gap)}
.searchbar input{flex:1;background:var(--panel);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:9px 12px;font-size:14px}
.searchbar input:focus{outline:none;border-color:var(--cyan)}

/* Prominent mode switch (segmented control) — makes Player Lookup easy to find. */
.modeswitch{display:flex;gap:3px;background:var(--panel);border:1px solid var(--border);
  border-radius:10px;padding:3px;margin:0 0 var(--section-gap)}
.modeswitch a{flex:1;text-align:center;padding:9px;border-radius:7px;font-size:13.5px;
  font-weight:600;color:var(--muted);text-decoration:none;transition:background .12s,color .12s}
.modeswitch a:hover{color:var(--text)}
.modeswitch a.active{background:var(--cyan);color:#06222a}

/* Inline player search on the radar (discovery entry point → jumps to lookup). */
/* Secondary actions row under the hero: how-it-works + inline player search on one line. */
.radar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 var(--section-gap)}
.radar-actions .how-link{margin:0;flex-shrink:0}
.radar-actions .radar-search{flex:1;min-width:230px;margin:0}
.radar-search{display:flex;align-items:center;gap:8px;margin:0 0 var(--section-gap);
  background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.radar-search .rs-cap{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.radar-search input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--border);
  color:var(--text);border-radius:8px;padding:8px 10px;font-size:13px}
.radar-search input:focus{outline:none;border-color:var(--cyan)}
#player{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px}
#player .pname{font-size:16px;font-weight:600;margin-bottom:8px}
#player .psum{font-size:12px;color:var(--muted);margin-bottom:10px}
#player .psum b{color:var(--text)}
#player .pm{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #1a1d25;font-size:12px}
#player .pm .pmap{width:90px;flex-shrink:0}
#player .pm .pbar{flex:1;height:12px;min-width:50px;border-radius:3px}
#player .pm .pbot{width:70px;text-align:right;color:var(--red);font-weight:600}
#player .pm .pres{width:150px;text-align:right;color:var(--muted)}
#player .pm .pkb{color:var(--red);font-weight:600}
#player .pm .pkb-zero{color:var(--faint);font-weight:400}

/* Bot-farming headline in player search */
.botkill{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 10px;padding:9px 11px;border-radius:9px;
  border:1px solid var(--border);background:var(--panel2)}
.botkill .bk-pct{font-size:14px;font-weight:700}
.botkill .bk-detail{font-size:11px;color:var(--muted)}
.botkill.bk-high{border-color:#3a1d1d;background:var(--red-bg)}
.botkill.bk-high .bk-pct{color:var(--red)}
.botkill.bk-mid{border-color:#3a330e;background:var(--amber-bg)}
.botkill.bk-mid .bk-pct{color:var(--amber)}
.botkill.bk-low{border-color:#1d3a24;background:var(--green-bg)}
.botkill.bk-low .bk-pct{color:var(--green)}
/* Player-search progress: indeterminate bar + ticking elapsed so the ~5–20s telemetry
   read never reads as hung. */
.psearching{padding:4px 0}
.ps-head{font-size:14px;font-weight:600;margin-bottom:9px}
.ps-bar{position:relative;height:4px;border-radius:3px;background:var(--panel2);overflow:hidden;margin:0 0 8px}
.ps-bar span{position:absolute;top:0;bottom:0;width:40%;border-radius:3px;background:var(--cyan);
  animation:ps-slide 1.15s ease-in-out infinite}
@keyframes ps-slide{0%{left:-40%}100%{left:100%}}
.ps-note{font-size:11.5px}
.ps-note #ps-elapsed{color:var(--faint);font-variant-numeric:tabular-nums}
.pretry{margin-top:10px}
.retry-btn{font-size:12px;padding:5px 12px}

/* "Your region" callout — compact, gradient severity gauge, aligned with the globe panel */
.hero{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:11px 14px;margin-bottom:var(--section-gap)}
.hero.good{border-color:#1d3a24} .hero.mixed{border-color:#3a330e} .hero.bad{border-color:#3a1d1d}
.hero-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.hero-region{font-size:12px;color:var(--muted);font-weight:600}
.hero-verdict{font-size:14px;font-weight:700;letter-spacing:.3px}
/* Answer-first lead sentence (Variant A) — the plain-language headline. Inherits the
   verdict color from .hero.good/.mixed/.bad on the parent; the % is emphasized. */
.hero-lead{font-size:15px;font-weight:600;line-height:1.4;margin-bottom:10px;color:var(--text)}
.hero-lead b{font-weight:700}
.hero.good .hero-pct{color:var(--green)} .hero.mixed .hero-pct{color:var(--amber)}
.hero.bad .hero-pct{color:var(--red)}
.hero-lead-warming{color:var(--muted);font-weight:500;margin-bottom:0}
.hv-ico{width:13px;height:13px;vertical-align:-2px}
.hv-tag{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--border);
  border-radius:4px;padding:0 5px;margin-right:7px;vertical-align:1px}
.v-good{color:var(--green)} .v-mixed{color:var(--amber)} .v-bad{color:var(--red)} .v-warming{color:var(--muted)}

.hero-gauge{position:relative;height:9px;border-radius:5px;overflow:hidden;
  background:var(--panel2);margin:0 0 9px}
/* Gradient set inline per value (zoneGrad) — 2-color local zone gradient. */
.hg-scale{position:absolute;inset:0}
.hg-dim{position:absolute;top:0;bottom:0;right:0;background:rgba(13,14,18,.66);
  border-left:1px solid rgba(255,255,255,.45)}
.hero-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:11px;color:var(--muted);flex-wrap:wrap}
.hero-foot .h{color:var(--green);font-weight:700} .hero-foot .b{color:var(--red);font-weight:700}
.hero-best{color:var(--faint)}
.hero-foot .rstale{color:var(--amber)}
.hero-low{color:var(--amber)}

.block{margin-bottom:var(--section-gap)}
.block-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.block-head h2{font-size:15px;font-weight:600;margin:0}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.selector{font-size:12px;color:var(--muted)}
.selector select{background:var(--panel);border:1px solid var(--border);color:var(--text);
  border-radius:7px;padding:4px 8px;margin-left:6px;font-size:12px}

.regions{display:flex;flex-direction:column;gap:1px}
.row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid #1a1d25}
.row .rname{width:96px;font-size:13px;flex-shrink:0}
.row .you{font-size:9px;color:var(--cyan);border:1px solid var(--cyan);border-radius:4px;padding:0 4px;margin-left:4px}
.minibar{flex:1;display:flex;height:14px;border-radius:4px;overflow:hidden;background:var(--panel2);min-width:60px}
.minibar .h{background:var(--green)} .minibar .b{background:var(--red)}
.row .rcounts{width:120px;text-align:right;font-size:11px;color:var(--muted)}
.row .rcounts .h{color:var(--green)} .row .rcounts .b{color:var(--red);font-weight:600}
.row .rpct{width:42px;text-align:right;font-size:13px;font-weight:600}
.row .warming{color:var(--faint);font-size:11px;font-style:italic}
.row .rstale{color:var(--amber);font-size:10px;margin-left:3px}
.regions-note{font-size:11px;color:var(--faint);padding:11px 4px 2px;margin-top:6px;
  border-top:1px dashed var(--border)}
.hero-meta .delayed{color:var(--amber);font-weight:600}

/* ---- Region hero: interactive globe (left) + the region gauge (right) ---- */
.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;align-items:center;margin-bottom:var(--section-gap)}
/* The hero card sits flush in its column (the layout provides the section gap). */
.hero-layout .hero{margin-bottom:0}
/* Trim the globe in the hero so it balances the short gauge beside it. */
.hero-layout .globe{height:300px}

/* ---- Spinning globe + continent panel (legacy grid kept for reference) ---- */
.globe-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:18px;align-items:center}
.globe-col{display:flex;flex-direction:column;align-items:center;gap:10px}
.globe{width:100%;height:360px;display:block;cursor:grab;touch-action:none}
/* Globe collapse wrapper. On desktop it's always open and the summary is hidden — the
   globe shows exactly as before. The collapse only engages on phones (JS closes it +
   shows the summary in the mobile block below). */
.globe-details{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.globe-summary{display:none}
/* Gradient legend under the globe */
.globe-scale{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--faint);
  text-transform:uppercase;letter-spacing:.5px;width:100%;max-width:300px}
.globe-scale .gs-bar{flex:1;height:6px;border-radius:3px;
  background:linear-gradient(90deg,#ff3b3b 0%,#ff8c2b 45%,#ffd23f 60%,#2fe07a 75%)} /* stops match ZONES in app.js */

.region-panel{display:flex;flex-direction:column;gap:2px}
/* "Compare every region" = HEAT-ROWS: each row's own background IS the bar (a
   translucent zone fill to the human %, set inline in JS), so it reads unlike the
   smooth by-map gauge. Single flex line; hover/selected use border+shadow (NOT a
   background) so they never paint over the data fill. */
.rpanel-row{display:flex;align-items:center;gap:9px;padding:9px 10px;
  border-radius:7px;border:1px solid transparent;cursor:pointer;
  transition:border-color .12s,box-shadow .12s}
/* Reusable gradient gauge — the full red→amber→green spectrum (the hero/legend
   look) with the bot share (right of the human %) left unlit; the lit length and
   its edge colour move with the split. Shared by the region, map and player bars
   so the whole site reads with one consistent gauge. */
.gbar{position:relative;border-radius:3px;overflow:hidden;background:var(--panel2)}
.gbar .g-scale{position:absolute;inset:0}
.gbar .g-dim{position:absolute;top:0;bottom:0;right:0;background:rgba(13,14,18,.66);
  border-left:1px solid rgba(255,255,255,.5)}
/* Lightened container so the per-row heat fills are what read (not a strong tint). */
#regions{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:6px}
.rpanel-row:hover,.rpanel-row.active{border-color:#2c3440}
/* The currently selected "your region" stays subtly ringed, with a check next to it */
.rpanel-row.selected{border-color:#234047;box-shadow:0 0 0 1px rgba(34,211,238,.25)}
.rp-check{color:var(--cyan);font-weight:700}
.rp-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 6px currentColor}
.rp-namecol{display:flex;flex-direction:column;gap:2px;width:152px;flex-shrink:0;min-width:0}
.rp-name{font-size:13px;font-weight:600}
.rp-best{font-size:10px;color:var(--muted);white-space:nowrap;line-height:1.15;overflow:hidden;text-overflow:ellipsis}
.rp-best b{font-weight:700}
.rp-bestn{color:var(--faint);font-weight:400}
.rp-counts{flex:1;font-size:11px;color:var(--muted);text-align:right;white-space:nowrap}
.rp-counts .h{color:var(--green)} .rp-counts .b{color:var(--red)}
/* ONE freshness chip — the single recency/confidence/fallback marker used across the
   hero, region rows and by-map rows (replaces .rp-rough, .mm-stale, ⚠ delayed, recencyCue
   text). Dot color = state; one word; detail in the title tooltip. */
.fresh{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;
  letter-spacing:.02em;color:var(--muted);white-space:nowrap;vertical-align:middle}
.fresh-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0}
.fresh-live{color:var(--green)} .fresh-live .fresh-dot{background:var(--green);
  box-shadow:0 0 0 3px rgba(74,222,128,.16)}
.fresh-recent{color:var(--muted)} .fresh-recent .fresh-dot{background:var(--cyan)}
.fresh-older{color:var(--amber)} .fresh-older .fresh-dot{background:var(--amber)}
.fresh-warming{color:var(--faint)} .fresh-warming .fresh-dot{background:var(--faint)}
/* Typical = a wider-window baseline (no recent games for this filter): muted + hollow dot so
   it never reads as a live/fresh signal, just an honest "usually runs ~X%". */
.fresh-typical{color:var(--faint)}
.fresh-typical .fresh-dot{background:transparent;border:1.5px solid var(--muted);box-shadow:none}
/* Low confidence tints the dot hollow rather than adding a second word. */
.fresh-low .fresh-dot{background:transparent;box-shadow:none;border:1.5px solid currentColor}
/* Freshest-game age, one step muted from the state word so it reads as secondary detail. */
.fresh-age{font-weight:400;color:var(--faint)}
/* Starved-filter nudge on the by-map card: this filter has only hours-old games, widen it. */
.mm-nudge{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 8px;padding:8px 11px;
  background:rgba(251,191,36,.08);border:.5px solid var(--amber);border-radius:8px;
  font-size:12px;line-height:1.4;color:var(--muted)}
.mm-nudge b{color:var(--text);font-weight:600}
.mm-nudge-btn{margin-left:auto;padding:4px 11px;border:.5px solid var(--amber);background:transparent;
  color:var(--amber);border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.mm-nudge-btn:hover{background:rgba(251,191,36,.14)}
.scope-note{font-size:10.5px;margin-top:4px}
.rp-pct{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;
  width:62px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.rp-ico{width:12px;height:12px;flex-shrink:0}
.rpanel-row.nodata{cursor:default}
.rpanel-row.nodata .rp-name{color:var(--muted)}
/* Panel-wide trust stamp on the section sub-header (freshness + total sample size). */
.regions-stamp{color:var(--faint)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px}
.card-label{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.bignum{font-family:ui-monospace,Consolas,monospace;font-size:24px;font-weight:600}
.poprow{font-size:12px;color:var(--muted);margin:3px 0}

/* Per-map bot breakdown for the selected region (mirrors the player split-bar). */
#region-maps .mm-help{font-size:11px;color:var(--faint);margin:0 0 8px}
#region-maps .mm-list{display:flex;flex-direction:column;gap:1px}
#region-maps .mm{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid #1a1d25;font-size:12.5px}
#region-maps .mm:last-child{border-bottom:none}
#region-maps .mmap{width:96px;flex-shrink:0;font-weight:600}
#region-maps .mbar{flex:1;height:12px;min-width:50px;border-radius:3px}
#region-maps .mpct{width:150px;text-align:right;color:var(--muted);flex-shrink:0}
#region-maps .mpct .h{color:var(--green);font-weight:700}
#region-maps .mm.nodata .mmap{color:var(--muted);font-weight:400}
#region-maps .mwarm{flex:1;text-align:right;color:var(--faint)}
/* Per-map real-human % sparkline (trend, played-time) + a glanceable ▲/▼ delta. */
#region-maps .mspark{display:flex;align-items:center;gap:5px;width:92px;flex-shrink:0}
#region-maps .spark{width:58px;height:18px;flex-shrink:0}
#region-maps .spark-base{stroke:var(--faint);stroke-width:1;stroke-dasharray:2 2;opacity:.6}
#region-maps .spark-delta{font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
#region-maps .spark-delta.up{color:var(--green)} #region-maps .spark-delta.down{color:var(--red)}
#region-maps .spark-delta.flat{color:var(--faint)}

/* Best time to play: 24 thin bars = real-human % per region-LOCAL hour (the chart x-axis
   is that region's own clock). Heights/colors are set inline per bar; gaps are faint ticks
   so the 24-slot axis stays aligned. */
#region-hours .hours-head{font-size:12.5px;color:var(--muted);margin:2px 0 0;line-height:1.4}
#region-hours .hours-head b{color:var(--green);font-weight:700}
#region-hours .hours-head .muted{color:var(--faint)}
#region-hours .hourchart{display:flex;align-items:flex-end;gap:2px;height:72px;margin:11px 0 5px}
#region-hours .hbar{flex:1 1 0;min-width:0;min-height:2px;border-radius:2px 2px 0 0;background:var(--panel2)}
#region-hours .hbar.gap{background:#171a22}
#region-hours .hbar.best{outline:1.5px solid var(--cyan);outline-offset:1px}
#region-hours .hours-axis{display:flex;justify-content:space-between;font-size:10px;
  color:var(--faint);font-variant-numeric:tabular-nums}
/* Placeholder when a region has no by-hour data yet (instead of hiding the whole card). */
#region-hours .hours-empty{font-size:12.5px;color:var(--muted);padding:13px 2px 5px;line-height:1.4}

/* Cold-start shimmer skeletons — shown until the first data arrives (a polished loading
   state in place of empty panels / a bare "warming up"). */
@keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel{background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 50%,var(--panel) 75%);
  background-size:200% 100%;animation:skel-shimmer 1.4s ease-in-out infinite;border-radius:8px}
.skel-hero{height:118px}
.skel-rows{display:flex;flex-direction:column;gap:7px}
.skel-row{height:44px}

/* Live cue: the by-map bars gently fade in on each 30s refresh, and the freshness tag
   ticks ("updated Xs ago"), so a subtle change reads as live rather than silent. */
.mm-fresh{animation:mm-fresh .35s ease}
@keyframes mm-fresh{from{opacity:.72}to{opacity:1}}
.mm-fresh-tag{color:var(--faint)}
@media(prefers-reduced-motion:reduce){.skel,.mm-fresh{animation:none}
  .ps-bar span{animation:none;width:100%;opacity:.5}}

.foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:12px}
/* Stats row: legend keys on the left, visitor counter right-justified */
.foot-keys{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.legend .chip{font-size:11px;margin-right:10px}
.chip.human{color:var(--green)} .chip.bot{color:var(--red)}
/* Gradient key — matches the bars' red→amber→green gauge (replaces the old dots). */
.legend{display:inline-flex;align-items:center;gap:7px}
.legend .lg-bar{width:70px;height:6px;border-radius:3px;
  background:linear-gradient(90deg,#ff3b3b 0%,#ff8c2b 45%,#ffd23f 60%,#2fe07a 75%)} /* stops match ZONES in app.js */
.legend .lg-cap{font-size:10px;text-transform:uppercase;letter-spacing:.4px}
.legend .lg-cap.b{color:var(--red)} .legend .lg-cap.h{color:var(--green)}
.credit{font-size:11px;color:var(--faint);text-align:right}
.tm{font-size:10px;color:#3a3d45}

/* Visitor counter — right-justified on the legend/keys row, light blue.
   tabular-nums keeps the width stable as the count increments (no shift on update). */
.vis-chip{font-size:11px;color:#8fcbff;white-space:nowrap}
.vis-chip[hidden]{display:none}
.vis-count{font-variant-numeric:tabular-nums}

@media(max-width:560px){
  .grid2{grid-template-columns:1fr}
  /* Top zone stacks: globe over the filters panel (hero-layout → 1 col). */
  .hero-layout{margin-bottom:var(--section-gap)}
  #region-maps .mspark{display:none}   /* drop the sparkline on phones; bar + % lead */
  #region-hours .hourchart{gap:1px;height:60px}  /* tighter bars fit 24 across a phone */
  .radar-search .rs-cap{display:none}  /* free up width for the input on phones */
  .row .rcounts{display:none}
  .hero-verdict{font-size:18px}
  /* Keep the fixed top bar on one tidy line on phones (tagline hidden, smaller logo) */
  .topnav-inner{padding:0 12px 0 120px}
  .brand{font-size:15px}
  .brand-sub{display:none}            /* drop the "live bot radar" tagline on phones */
  .nav{gap:14px}
  .nav-link{font-size:12.5px}
  .topnav-right{gap:8px}
  #status-text{display:none}          /* keep just the status dot on phones */
  .how-grid{grid-template-columns:1fr} /* stack the step boxes on phones */
  .globe-layout{grid-template-columns:1fr;gap:14px} /* stack globe over the panel */
  .hero-layout{grid-template-columns:1fr;gap:14px}  /* stack globe over the gauge */
  .globe{height:240px}
  .hero-layout .globe{height:220px}  /* smaller globe so the data sits higher up */
  .rp-lob{display:none}              /* drop the lobby count on phones; %/counts lead */
  .rp-name{width:92px}
  /* ANSWER-FIRST MOBILE ORDER: lead with the verdict + region list (the fast, tappable
     switcher); the globe + filters drop below and the globe collapses (JS closes it).
     :not([hidden]) so this never overrides the hidden state when Player Lookup is active. */
  #view-status:not([hidden]){display:flex;flex-direction:column}
  #view-status > .section-head{order:1}
  #view-status > #hero{order:2}
  #view-status > .radar-actions{order:3}
  #view-status > #region-detail{order:4}
  #view-status > #compare-block{order:5}
  #view-status > .hero-layout{order:6}
  #view-status > .grid2{order:7}
  #view-status > .faq{order:8}
  /* Globe = a tap-to-expand card on phones. */
  .globe-summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
    padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--panel);
    font-size:13px;font-weight:600;color:var(--cyan);width:100%}
  .globe-summary::-webkit-details-marker{display:none}
  .globe-summary::after{content:"⌄";margin-left:auto;font-size:16px;color:var(--muted);line-height:1}
  .globe-details[open] .globe-summary{margin-bottom:10px}
  .gsum-ico{color:var(--cyan)}
}