/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  --brand:#32a7eb; --brand-dim:#1d7ab8;
  --brand-glow:rgba(50,167,235,.2); --brand-glow2:rgba(50,167,235,.08);
  --bg:#0b0f14; --bg2:#0d1219; --bg3:#0f1520;
  --glass:rgba(255,255,255,.04); --glass-hover:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.07); --border-brand:rgba(50,167,235,.25);
  --fg:#e8eaf0; --fg2:#b0b8c8; --muted:#7a8499;
  --green:#34d399; --purple:#a78bfa; --red:#e05260; --gold:#f2a900;
  --radius:14px; --radius-sm:8px; --radius-xs:5px;
  --highlight:#32a7eb; --highlight-border:rgba(50,167,235,.35); --highlight-bg:rgba(50,167,235,.07);

  /* ── HUD palette ──────────────────────────────────────────────────────────
     The tactical-HUD surfaces (hero readout, telemetry, kill feed, minimap) run
     on a brighter, cooler set than the page brand. These were previously loose
     hex literals repeated across index.php; they are declared here because they
     are a real second layer of the system, not drift.
     --hud-cyan is the HUD's own accent: brighter than --brand so it stays legible
     over hero photography. Use --brand for ordinary UI; use --hud-cyan only on
     HUD/telemetry surfaces. */
  --hud-cyan:#1CE5FF; --hud-green:#2DD482;
  --hud-fg:#B6C7DC; --hud-fg-bright:#EAF2FF; --hud-muted:#7C90A8;
}

/* ── SKILL GRADE ─────────────────────────────────────────────────────────────
   Per-grade colour tokens, shared by the stats-page hero badge/explainer
   (stats.css) and the .sg-chip shown beside player names site-wide.
   Not ".wg-chip": that name already belongs to the Wolf Reports filter pills
   (stats.css / reports.php), and sharing it broke both. */
.hg-S{--g-accent:#c07bff;--g-bg:rgba(160,80,235,.16);--g-glow:rgba(160,80,235,.55)}
.hg-A{--g-accent:#4fb8ff;--g-bg:rgba(50,167,235,.14);--g-glow:rgba(50,167,235,.5)}
.hg-B{--g-accent:#3ed6c0;--g-bg:rgba(60,200,180,.14);--g-glow:rgba(60,200,180,.45)}
.hg-C{--g-accent:#e6c34a;--g-bg:rgba(210,170,40,.16);--g-glow:rgba(210,170,40,.4)}
.hg-D{--g-accent:#b8bcc6;--g-bg:rgba(160,160,170,.13);--g-glow:rgba(160,160,170,.35)}
.hg-F{--g-accent:#e08a5a;--g-bg:rgba(180,100,40,.18);--g-glow:rgba(180,100,40,.4)}
.sg-chip{display:inline-grid;place-items:center;flex-shrink:0;width:22px;height:22px;border-radius:6px;
  font-size:.72rem;font-weight:900;line-height:1;vertical-align:middle;
  color:var(--g-accent);background:var(--g-bg);border:1px solid var(--g-accent)}
.sg-chip--sm{width:18px;height:18px;border-radius:5px;font-size:.62rem}
/* Early grade (5–9 matches in the mode): dashed outline, no fill, until it settles at 10. */
.sg-chip--early{border-style:dashed;border-width:1.5px;background:transparent}
/* Member-grade histogram (skill-grade.js → wgGradeHistHtml) */
.wg-hist{display:flex;flex-direction:column;gap:8px;background:var(--glass);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;max-width:520px}
/* Histogram + "Season stats" snapshot as one row (wgGradeRowHtml). Inside the row
   both cards fill their column, so the max-width above only applies when the
   histogram stands alone. */
.wg-grade-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.wg-grade-row .wg-hist{max-width:none;margin-bottom:0}
.wg-snap-slot:empty{display:none}
.wg-grade-row:has(.wg-snap-slot:empty){grid-template-columns:minmax(0,520px)}
.wg-snap{display:flex;flex-direction:column;gap:10px;height:100%;background:var(--glass);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px}
.wg-snap-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.wg-snap-tile{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  display:flex;flex-direction:column;justify-content:center}
.wg-snap-tile .l{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.wg-snap-tile .v{font-size:1.3rem;font-weight:850;line-height:1.2;font-variant-numeric:tabular-nums}
.wg-snap-tile .s{font-size:.72rem;color:var(--muted)}
@media (max-width:720px){.wg-grade-row{grid-template-columns:1fr}}
.wg-hist-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.wg-hist-t{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.wg-hist-typ{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--fg2)}
.wg-hist-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end;height:96px}
.wg-hist-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;
  font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}
.wg-hist-col b{display:block;width:100%;border-radius:5px 5px 2px 2px;background:var(--g-accent);opacity:.85}
.wg-hist-col b[data-empty]{opacity:.18}
.wg-hist-l{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;text-align:center;font-size:.74rem;font-weight:800}
.wg-hist-l span{color:var(--g-accent)}
.wg-hist-foot{font-size:.72rem;color:var(--muted)}
.wg-hist-foot a{color:var(--brand)}

/* ── THEME HELPERS ───────────────────────────────────────────────────────── */
/* compact mode */
.theme-compact .stat-pill .val{font-size:1.1rem}
.theme-compact .stat-pill{padding:10px 14px}
.theme-compact .match-card{padding:10px 12px;gap:6px}
.theme-compact .quick-stat{padding:10px 14px}
/* avatar border styles */
.avatar-border-none   #player-avatar{border-color:transparent!important;box-shadow:none!important}
.avatar-border-subtle #player-avatar{border:2px solid rgba(255,255,255,.25)!important;box-shadow:none!important}
.avatar-border-glow   #player-avatar{border:2px solid var(--brand)!important;box-shadow:0 0 14px var(--brand-glow),0 0 30px var(--brand-glow2)!important}
.avatar-border-pulse  #player-avatar{border:2px solid var(--brand)!important;animation:avatar-pulse 2.4s ease-in-out infinite!important}
@keyframes avatar-pulse{0%,100%{box-shadow:0 0 8px var(--brand-glow)}50%{box-shadow:0 0 22px var(--brand-glow),0 0 40px var(--brand-glow2)}}
/* glass opacity levels */
.glass-low  .glass,.glass-low  .profile-card,.glass-low  .match-card,.glass-low  .wg-frame{background-color:rgba(255,255,255,.02)!important}
.glass-high .glass,.glass-high .profile-card,.glass-high .match-card,.glass-high .wg-frame{background-color:rgba(255,255,255,.09)!important}

/* ── RESET + BASE ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Gated: an unconditional scroll-behavior:smooth overrides the OS "reduce motion"
   setting for every in-page jump on the site (nav anchors, the form PRG redirects
   back to #newsletter/#contact). no-preference is the only state that opts in. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6}
/* Backstop, not a fix: the nav overflow that caused sideways scrolling on phones
   is fixed at its source in the nav rules below. This stops the NEXT one from
   silently shipping. clip, not hidden — `overflow:hidden` on body makes the
   element a scroll container, which breaks position:sticky descendants
   (#site-header) and hijacks anchor scrolling; `clip` does neither. Paired with
   overflow-y:visible so vertical page scrolling is untouched. */
html{overflow-x:clip}
body{overflow-x:clip;overflow-y:visible}
a{color:var(--brand);text-decoration:none}
img,svg{display:block}
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit}

/* ── SHARED COMPONENTS ───────────────────────────────────────────────────── */
/* The max() pair keeps the gutter on a notched iPhone in landscape, where
   viewport-fit=cover lets content sit under the rounded corner / camera housing.
   The plain padding stays first so a browser without env() keeps a gutter at all
   (an unsupported env() drops only the declaration that names it). */
.container{max-width:1120px;margin:0 auto;padding:0 28px}
.container{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
.glass{background-color:var(--glass);border:1px solid var(--border);border-radius:var(--radius)}
/* Content frame: the page body under the header. One glass frame (.wg-frame) holding
   section panels (.wg-panel), each opened by a small-caps heading row (.wg-panel-h)
   whose right side takes a link or a count. .wg-panel-t gives a heading that look
   on its own, for a header row laid out some other way. The same look as a player
   page's tab frame. See DESIGN.md "Content Frame". [hidden] needs restating because
   display here beats the browser's own [hidden] rule, and a hidden empty frame
   still shows its border. */
.wg-frame{display:flex;flex-direction:column;gap:14px;padding:22px;background-color:var(--glass);
  border:1px solid var(--border);border-radius:var(--radius)}
.wg-panel{min-width:0;padding:18px 20px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:12px}
.wg-frame[hidden],.wg-panel[hidden]{display:none}
.wg-panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.wg-panel-h h2,.wg-panel-t{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.68rem;font-weight:800;
  letter-spacing:.1em;line-height:1.4;text-transform:uppercase;color:var(--fg2)}
@media (max-width:640px){.wg-frame{padding:14px}.wg-panel{padding:12px}}
/* live-bar.js drives this strip by writing scrollLeft every frame. scroll-behavior
   isn't inherited, so html{scroll-behavior:smooth} above doesn't reach it today —
   this pins that down so a future smooth-scroll rule can't start easing against
   the animation and stall it. Per-page copies of .live-bar-inner don't set it. */
.live-bar-inner{scroll-behavior:auto}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.75rem 1.4rem;border-radius:var(--radius-sm);
     font-weight:700;font-size:.9rem;border:none;text-decoration:none;white-space:nowrap;cursor:pointer;
     transition:filter .15s,transform .15s,box-shadow .15s}
.btn:active{transform:translateY(0)!important}
/* --brand-dim, not --brand: white text on the raw --brand blue (#32a7eb) is
   ~2.7:1 contrast, below WCAG AA's 4.5:1 for normal text. --brand-dim is
   already the pre-darkened variant (and already re-themed alongside --brand
   on player/clan accent pages), so reusing it here fixes contrast without
   a separate token or breaking per-page theming. */
.btn-primary{background:var(--brand-dim);color:#fff;box-shadow:0 4px 20px var(--brand-glow)}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 32px var(--brand-glow)}
.btn-discord{background:#5865f2;color:#fff;box-shadow:0 4px 20px rgba(88,101,242,.3)}
.btn-discord:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn-steam{background:#1b2838;color:#c6d4df;border:1px solid #4a90d9;box-shadow:0 4px 20px rgba(74,144,217,.2)}
.btn-steam:hover{background:#2a475e;border-color:#6bb3f0;filter:brightness(1.08);transform:translateY(-2px)}
.btn-ghost{background:var(--glass);color:var(--fg2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--glass-hover);color:var(--fg)}
.btn-sm{padding:.5rem 1rem;font-size:.84rem}
/* ── TIER BADGE ───────────────────────────────────────────────────────────
   Every tier is something a member pays for, so every tier gets the same
   treatment: a solid metallic gradient with a live glow in its own colour.
   Rank still reads at a glance through colour and glow strength (gold →
   purple → blue → green), not by demoting the lower tiers to flat outlines.
   Colours match _TIER_STYLE in lib/entitlements.py so a tier looks the same
   in Discord as it does here — change both together. */
@keyframes hero-badge-in{from{opacity:0;transform:translateY(-8px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hero-badge-pulse-alpha{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 10px 2px rgba(255,200,0,.35),0 0 24px 4px rgba(255,160,0,.2),0 2px 8px rgba(0,0,0,.5)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 18px 5px rgba(255,210,0,.55),0 0 36px 8px rgba(255,170,0,.3),0 2px 8px rgba(0,0,0,.5)}}
@keyframes hero-badge-pulse-packleader{0%,100%{box-shadow:0 0 10px 2px rgba(139,92,246,.4),0 0 24px 4px rgba(109,40,217,.2),0 2px 8px rgba(0,0,0,.5)}50%{box-shadow:0 0 18px 5px rgba(167,139,250,.6),0 0 36px 8px rgba(139,92,246,.3),0 2px 8px rgba(0,0,0,.5)}}
@keyframes hero-badge-pulse-packmate{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 9px 2px rgba(50,167,235,.35),0 0 22px 4px rgba(20,120,180,.18),0 2px 8px rgba(0,0,0,.5)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 16px 4px rgba(96,190,245,.5),0 0 32px 7px rgba(50,167,235,.26),0 2px 8px rgba(0,0,0,.5)}}
@keyframes hero-badge-pulse-recruit{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 8px 2px rgba(52,211,153,.3),0 0 20px 4px rgba(5,150,105,.16),0 2px 8px rgba(0,0,0,.5)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 15px 4px rgba(110,231,183,.45),0 0 30px 6px rgba(52,211,153,.22),0 2px 8px rgba(0,0,0,.5)}}
.hero-badge{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:.4rem 1rem;border-radius:999px;white-space:nowrap;animation:hero-badge-in .35s cubic-bezier(.34,1.56,.64,1) both;cursor:default}
.hero-badge__icon{font-size:1rem;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 4px currentColor)}
.hero-badge__label{line-height:1}
/* The static box-shadow on each tier is what shows when the pulse is switched
   off below — without it, reduced-motion viewers get a badge with no glow. */
.hero-badge--alpha{background:linear-gradient(135deg,#c8820a,#f5c518 45%,#e6a800);border:1px solid rgba(255,220,80,.7);color:#1a1000;text-shadow:0 1px 0 rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 14px 3px rgba(255,205,0,.45),0 0 30px 6px rgba(255,165,0,.25),0 2px 8px rgba(0,0,0,.5);animation:hero-badge-in .35s cubic-bezier(.34,1.56,.64,1) both,hero-badge-pulse-alpha 2.8s ease-in-out .4s infinite}
.hero-badge--packleader{background:linear-gradient(135deg,#5b21b6,#8b5cf6 45%,#7c3aed);border:1px solid rgba(196,181,253,.5);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);box-shadow:0 0 14px 3px rgba(139,92,246,.5),0 0 30px 6px rgba(109,40,217,.25),0 2px 8px rgba(0,0,0,.5);animation:hero-badge-in .35s cubic-bezier(.34,1.56,.64,1) both,hero-badge-pulse-packleader 2.8s ease-in-out .4s infinite}
.hero-badge--packmate{background:linear-gradient(135deg,#0e6ea8,#32a7eb 45%,#1d8fd1);border:1px solid rgba(147,214,255,.55);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 12px 3px rgba(50,167,235,.42),0 0 26px 5px rgba(20,120,180,.22),0 2px 8px rgba(0,0,0,.5);animation:hero-badge-in .35s cubic-bezier(.34,1.56,.64,1) both,hero-badge-pulse-packmate 2.8s ease-in-out .4s infinite}
.hero-badge--recruit{background:linear-gradient(135deg,#047857,#34d399 45%,#10b981);border:1px solid rgba(167,243,208,.5);color:#04241a;text-shadow:0 1px 0 rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 11px 3px rgba(52,211,153,.38),0 0 24px 5px rgba(5,150,105,.2),0 2px 8px rgba(0,0,0,.5);animation:hero-badge-in .35s cubic-bezier(.34,1.56,.64,1) both,hero-badge-pulse-recruit 2.8s ease-in-out .4s infinite}
@media (prefers-reduced-motion:reduce){.hero-badge{animation:none}}

/* ── FEATURED ROW ─────────────────────────────────────────────────────────
   The "most recent" or "#1" entry at the top of a list — reports.php events,
   stats.php/feeds.php chicken dinners, roster leaderboards. Reused wherever
   a list's first row earns more weight than the rows below it. */
.featured-row{display:flex;gap:16px;align-items:stretch;background:var(--glass);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;margin-bottom:14px;cursor:pointer;text-decoration:none;color:inherit;
  transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.featured-row:hover{background:var(--glass-hover);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.featured-row:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.featured-row--win{border-color:rgba(242,169,0,.35)}
.featured-row--win:hover{border-color:rgba(242,169,0,.55)}

.featured-row__thumb{position:relative;flex-shrink:0;width:128px;border-radius:var(--radius-sm);overflow:hidden;
  display:flex;align-items:flex-end;background:#0a1120}
.featured-row__thumb::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.6) 100%)}
.featured-row__thumb-label{position:relative;z-index:1;padding:8px;font-size:.62rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.featured-row__thumb-play{position:absolute;top:8px;right:8px;z-index:1;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.6rem}

.featured-row__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px}
.featured-row__eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.featured-row--win .featured-row__eyebrow{color:var(--gold)}
.featured-row__title{font-size:1.2rem;font-weight:800;letter-spacing:-.01em;color:var(--fg);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.featured-row__meta{font-size:.82rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;line-height:1.5}
.featured-row__meta strong{color:var(--fg2);font-weight:600}

.featured-row__cta{flex-shrink:0;align-self:center;font-size:.78rem;font-weight:700;color:var(--brand);
  display:flex;align-items:center;gap:4px;white-space:nowrap}
.featured-row--win .featured-row__cta{color:var(--gold)}

/* Dual POV (a kill, or a death where both sides were live): Dual POV on top, each single stream under it */
.featured-row__cta--stack{flex-direction:column;align-items:flex-end;gap:6px}
.wg-pov-links{display:flex;gap:12px}
.wg-pov{background:none;border:0;padding:0;font:inherit;font-size:.72rem;font-weight:600;color:var(--fg2);cursor:pointer}
.wg-pov:hover,.wg-pov:focus-visible{color:var(--brand)}
/* The victim wasn't live, so this side of the Dual POV is their teammate's stream */
.wg-tm{font-size:.66rem;font-weight:500;color:var(--muted);margin-left:2px}
.wg-both-live{display:inline-flex;align-items:center;gap:5px;margin-left:8px;vertical-align:1px;
  font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;
  color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);padding:1px 7px;border-radius:999px}
.wg-both-live::before{content:'';width:6px;height:6px;border-radius:50%;background:#ef4444}

@media (max-width:560px){
  .featured-row{flex-direction:column}
  .featured-row__thumb{width:100%;height:96px}
  .featured-row__cta{align-self:flex-start}
  .featured-row__cta--stack{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px}
}

/* Map art — real official top-down map art (sourced from PUBG's own public
   developer asset repo, github.com/pubg/api-assets, per their Terms of Use /
   Player-created Content policy — the same terms this site already operates
   under as a PUBG API consumer), cropped square and compressed for web use.
   The radial-gradient fallback lives on the base rule so it covers ANY map
   code without a downloaded image — including ones a page's name table hasn't
   learned yet. Listing the fallbacks by name instead left unknown codes with
   no background at all (a bare panel), which is how Chimera_Main/Paramo
   rendered blank on feeds.php. Each named rule below overrides it on
   specificity; an inline background-image (stats.js VOD preview) beats both. */
.map-art{position:relative;background-size:cover;background-position:center;overflow:hidden;
  background-color:#0a0e16;
  background-image:radial-gradient(circle at 28% 20%,#1c2740,#0a0e16 72%)}
.map-art::before{content:'';position:absolute;inset:-20%;opacity:.1;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.6) 0 1px,transparent 1px 22px);
  transform:rotate(-6deg)}
.map-art[data-map="Erangel"]{background-image:url(imgs/maps/erangel.jpg)}
.map-art[data-map="Miramar"]{background-image:url(imgs/maps/miramar.jpg)}
.map-art[data-map="Sanhok"]{background-image:url(imgs/maps/sanhok.jpg)}
.map-art[data-map="Vikendi"]{background-image:url(imgs/maps/vikendi.jpg)}
.map-art[data-map="Karakin"]{background-image:url(imgs/maps/karakin.jpg)}
.map-art[data-map="Paramo"]{background-image:url(imgs/maps/paramo.jpg)}
.map-art[data-map="Haven"]{background-image:url(imgs/maps/haven.jpg)}
.map-art[data-map="Taego"]{background-image:url(imgs/maps/taego.jpg)}
.map-art[data-map="Deston"]{background-image:url(imgs/maps/deston.jpg)}
.map-art[data-map="Rondo"]{background-image:url(imgs/maps/rondo.jpg)}
/* Camp Jackal, Training, Unknown and any unrecognised code intentionally have
   no rule here — they inherit the base gradient above. */

/* Rank-#1 hero row on leaderboards (community.php, clan.php, clans.php, guild.php).
   The wash sits on the <tr>, not the cells: painted per <td>, every cell
   restarts the gradient and the row reads as vertical stripes. */
.rank-hero-row{background:linear-gradient(90deg,rgba(242,169,0,.16),rgba(242,169,0,.05) 45%,transparent 80%)!important}
.rank-hero-row:hover{background:linear-gradient(90deg,rgba(242,169,0,.2),rgba(242,169,0,.07) 45%,transparent 80%)!important}
.rank-hero-row td{background:transparent!important;
  border-top:1px solid rgba(242,169,0,.35)!important;border-bottom:1px solid rgba(242,169,0,.35)!important;
  padding-top:16px!important;padding-bottom:16px!important}
.rank-hero-row td.num{color:var(--fg)}
.rank-hero-row .rank-hero-name{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;color:#fff}
.rank-hero-row .rank-hero-val{font-size:1.4rem;font-weight:800;color:var(--gold)}
.rank-hero-tag{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#f2c14e}
.rank-hero-tag svg{flex-shrink:0}
/* Numbered rank pips (replace the medal emoji) */
.rank-pip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;box-sizing:border-box;font-size:.85rem;font-weight:800;font-variant-numeric:tabular-nums}
.rank-pip--1{background:var(--gold);color:#1a1200}
.rank-pip--2{border:1.5px solid #8f9bb0;color:#c9d1de}
.rank-pip--3{border:1.5px solid #b87333;color:#e0a36c}

/* ── NAV ──────────────────────────────────────────────────────────────── */
#site-header{position:sticky;top:0;z-index:300;background:rgba(11,15,20,.82);backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--border);transition:background .2s}
#site-header.scrolled{background:rgba(11,15,20,.96)}
.nav-inner{display:flex;align-items:center;gap:8px;padding:10px 28px;max-width:1120px;margin:0 auto}
.nav-inner{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
/* min-width:0 + a shrinkable wordmark, NOT flex-shrink:0. Every child of .nav-inner
   used to refuse to shrink with no min-width:0 anywhere and no overflow-x guard on
   the page, so on a phone the row was simply wider than the viewport (~345px of
   content in 304px at 360px, worse with a long username) and the WHOLE PAGE gained
   a horizontal scroll. The logo mark keeps its size; only the word gives. */
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:.96rem;color:var(--fg);flex-shrink:1;min-width:0;margin-right:8px;text-decoration:none}
.nav-logo img{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);object-fit:contain;background:#111827;flex-shrink:0}
.nav-logo span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:2px;flex:1}
.nav-link{color:var(--muted);padding:.32rem .6rem;border-radius:var(--radius-xs);font-size:.82rem;font-weight:600;white-space:nowrap;transition:color .15s,background .15s;text-decoration:none}
.nav-link:hover,.nav-link.active{color:var(--fg);background:var(--glass)}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
.nav-install{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;color:var(--brand);padding:.3rem .7rem;border-radius:var(--radius-xs);border:1px solid var(--border-brand);background:rgba(50,167,235,.07);transition:background .15s,color .15s;text-decoration:none}
.nav-install:hover{background:rgba(50,167,235,.15);color:var(--brand)}
.nav-install-mobile{display:none;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;color:var(--brand);padding:.3rem .7rem;border-radius:var(--radius-xs);border:1px solid var(--border-brand);background:rgba(50,167,235,.07);transition:background .15s,color .15s;text-decoration:none;margin-top:6px}
.nav-install-mobile:hover{background:rgba(50,167,235,.15);color:var(--brand)}
/* 44px box, not 34x28. The bars stay 22px; the button grows around them, which is
   the target a thumb actually gets. */
.hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;padding:0;width:44px;height:44px;flex-shrink:0}
.hamburger span{display:block;width:22px;height:2px;background:var(--fg);border-radius:2px}
@media(max-width:720px){
  .hamburger{display:flex}
  .nav-links{display:none;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;background:rgba(9,13,19,.97);backdrop-filter:blur(20px);padding:8px 24px 16px;border-bottom:1px solid var(--border);z-index:300}
  .nav-links.open{display:flex}
  /* Dropdown rows were ~26px tall stacked 2px apart — a column of near-misses. */
  .nav-links .nav-link{display:flex;align-items:center;min-height:44px;padding:.32rem .6rem;font-size:.9rem}
  .nav-install-mobile{min-height:44px;justify-content:center;margin-top:10px}
  #site-header{position:relative}
  .nav-inner{padding:8px 18px}
  .nav-inner{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .container{padding:0 18px}
  .container{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .nav-right .nav-install{display:none}
  .nav-install-mobile{display:inline-flex}
  /* Nav option B: signed in, the row is the avatar alone. A username is allowed
     130px by .nav-user-btn .username, which is the single widest thing in the bar
     and the reason a logged-in phone overflowed worst. Guests keep "Get Started"
     — hiding that label would cost the only call to action in the header.
     Budget at 390px with this on: 36 gutters + 150 logo + 44 burger + 119 guest
     button + 16 gaps = 365, inside 390. The caret goes for everyone: it is
     decoration next to a control that is obviously a menu on touch. */
  .nav-right:not(.guest-nav) .nav-user-btn .username{display:none}
  .nav-right:not(.guest-nav) .nav-user-btn{width:44px;height:44px;padding:0;justify-content:center}
  .nav-user-btn .caret{display:none}
  .nav-user-btn{min-height:44px}
  .nav-logo{gap:8px;margin-right:0}
  /* Reserving 90px for a 44px control just pushed the row wider. */
  .login-bar{min-width:0}
  .footer-links a{display:flex;align-items:center;min-height:44px}
  .social-btn{width:44px;height:44px}
}
/* Genuinely tiny phones only (iPhone SE 1st gen and narrower). Above this the
   wordmark fits — it is NOT dropped at 390px, where an iPhone 14/15 sits. */
@media(max-width:340px){
  .nav-logo span{display:none}
}

/* ── FOOTER ───────────────────────────────────────────────────────────── */
/* The bottom padding reserves the iOS "Add to Home Screen" banner's own height.
   pwa_head.php publishes --wg-install-banner-h and fixes that banner over the
   bottom of the viewport on every non-standalone iPhone visit, but only stats.css
   ever read the variable — so on every other page (index.php included) the banner
   sat on top of the last ~90px of the footer: the copyright row and the social
   buttons were unreachable. Doing it on footer rather than body keeps the footer's
   own background filling the reserved strip instead of exposing a band of --bg. */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:56px 0 32px;color:var(--muted);font-size:.87rem}
footer{padding-bottom:calc(32px + var(--wg-install-banner-h,0px) + env(safe-area-inset-bottom,0px))}
.footer-grid{display:grid;gap:40px;margin-bottom:40px}
@media(min-width:700px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-brand-name{font-size:1rem;font-weight:800;color:var(--fg);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.footer-brand-name img{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:#111827}
.footer-tagline{font-size:.86rem;color:var(--muted);line-height:1.55}
.footer-col-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--fg2);margin-bottom:14px}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{color:var(--muted);font-size:.87rem;transition:color .15s}
.footer-links a:hover{color:var(--fg)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--border)}
.footer-social{display:flex;gap:8px}
.social-btn{width:34px;height:34px;border-radius:var(--radius-xs);background:var(--glass);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;transition:color .15s,background .15s}
.social-btn:hover{color:var(--fg);background:var(--glass-hover)}

/* ── LOADING OVERLAY (loader.php) ─────────────────────────────────────────
   Lives here, not in loader.php, so it is cached with the rest of shared.css.
   It has to be in <head>: the overlay markup is in the page from the first
   paint and would flash unstyled if its CSS arrived later. */
/* ── overlay ── */
#wg-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(7, 11, 17, 0.92);
  backdrop-filter: blur(6px) saturate(1.2);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#wg-loader.wgl-visible { display: flex; }

.wgl-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.wgl-logo-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wgl-logo {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

.wgl-msg {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #b0b8c8;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  min-height: 1.4em;
  text-align: center;
  opacity: .9;
}

/* ── STYLE 1 — Arc Ring ─────────────────────────────────────────────── */
#wg-loader[data-style="1"] .wgl-fx {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 3px solid rgba(50, 167, 235, .12);
  animation: wgl-arc-spin 1s linear infinite;
  z-index: 1;
}
#wg-loader[data-style="1"] .wgl-fx::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #32a7eb;
  border-right-color: rgba(50, 167, 235, .4);
}
#wg-loader[data-style="1"] .wgl-logo {
  filter: drop-shadow(0 0 14px rgba(50, 167, 235, .5));
  animation: wgl-logo-breathe 2s ease-in-out infinite;
}
@keyframes wgl-arc-spin  { to { transform: rotate(360deg); } }
@keyframes wgl-logo-breathe {
  0%,100% { filter: drop-shadow(0 0 10px rgba(50,167,235,.4)); }
  50%      { filter: drop-shadow(0 0 22px rgba(50,167,235,.85)); }
}

/* ── STYLE 2 — Pulse Rings ──────────────────────────────────────────── */
#wg-loader[data-style="2"] .wgl-logo-wrap { overflow: visible; }
#wg-loader[data-style="2"] .wgl-fx {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: transparent;
  z-index: 0;
}
#wg-loader[data-style="2"] .wgl-fx::before,
#wg-loader[data-style="2"] .wgl-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(50, 167, 235, .6);
  animation: wgl-pulse-ring 2s ease-out infinite;
}
#wg-loader[data-style="2"] .wgl-fx::after { animation-delay: 1s; }
#wg-loader[data-style="2"] .wgl-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -48px;
  border-radius: 50%;
  border: 1.5px solid rgba(50, 167, 235, .25);
  animation: wgl-pulse-ring 2s ease-out infinite;
  animation-delay: .5s;
}
#wg-loader[data-style="2"] .wgl-logo {
  animation: wgl-logo-breathe 2s ease-in-out infinite;
}
@keyframes wgl-pulse-ring {
  0%   { transform: scale(.8);  opacity: .8; }
  100% { transform: scale(1.9); opacity: 0;  }
}

/* ── STYLE 3 — Radar Sweep ──────────────────────────────────────────── */
#wg-loader[data-style="3"] .wgl-fx {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(50, 167, 235, .2);
  overflow: hidden;
  z-index: 1;
  animation: wgl-arc-spin 2s linear infinite;
}
#wg-loader[data-style="3"] .wgl-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(50, 167, 235, 0)    0deg,
    rgba(50, 167, 235, 0)   200deg,
    rgba(50, 167, 235, .55) 270deg,
    rgba(50, 167, 235, .9)  360deg
  );
}
#wg-loader[data-style="3"] .wgl-fx::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(7, 11, 17, .88);
}
#wg-loader[data-style="3"] .wgl-logo { position: relative; z-index: 2; }

/* ── STYLE 4 — Particle Orbit ───────────────────────────────────────── */
#wg-loader[data-style="4"] .wgl-fx {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  animation: wgl-arc-spin 1.6s linear infinite;
  z-index: 1;
}
#wg-loader[data-style="4"] .wgl-fx::before,
#wg-loader[data-style="4"] .wgl-fx::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #32a7eb;
  box-shadow: 0 0 8px #32a7eb, 0 0 18px rgba(50,167,235,.6);
  top: 50%; left: 0;
  transform: translateY(-50%);
}
#wg-loader[data-style="4"] .wgl-fx::after {
  left: auto; right: 0;
  width: 6px; height: 6px;
  background: rgba(50, 167, 235, .5);
  box-shadow: 0 0 6px rgba(50,167,235,.5);
  animation: none;
}
#wg-loader[data-style="4"] .wgl-logo-wrap::before {
  content: '';
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(50, 167, 235, .8);
  box-shadow: 0 0 8px #32a7eb;
  top: 0; left: 50%;
  transform: translate(-50%, -12px);
  animation: wgl-arc-spin 2.4s linear infinite reverse;
}
#wg-loader[data-style="4"] .wgl-logo {
  animation: wgl-logo-breathe 2s ease-in-out infinite;
}

/* ── STYLE 5 — Glitch Flicker ───────────────────────────────────────── */
#wg-loader[data-style="5"] .wgl-fx {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(50, 167, 235, .03) 3px,
    rgba(50, 167, 235, .03) 4px
  );
  animation: wgl-scanline 6s linear infinite;
}
#wg-loader[data-style="5"] .wgl-logo {
  animation: wgl-glitch 3.5s steps(1) infinite;
}
#wg-loader[data-style="5"] .wgl-logo-wrap::before,
#wg-loader[data-style="5"] .wgl-logo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/imgs/wolf-grounds-320.webp') center/80px no-repeat;
  border-radius: 18px;
  opacity: 0;
  mix-blend-mode: screen;
}
#wg-loader[data-style="5"] .wgl-logo-wrap::before {
  animation: wgl-glitch-r 3.5s steps(1) infinite;
  filter: hue-rotate(-40deg) saturate(3);
}
#wg-loader[data-style="5"] .wgl-logo-wrap::after {
  animation: wgl-glitch-b 3.5s steps(1) infinite;
  filter: hue-rotate(120deg) saturate(3);
}
@keyframes wgl-scanline {
  0%   { background-position: 0 0; }
  100% { background-position: 0 80px; }
}
@keyframes wgl-glitch {
  0%,90%,100%    { transform: translate(0,0)    skewX(0deg); }
  91%            { transform: translate(-3px,0)  skewX(-4deg); opacity: .85; }
  92%            { transform: translate(3px,0)   skewX(4deg);  }
  93%            { transform: translate(-2px,1px) skewX(-2deg); }
  94%,99%        { transform: translate(0,0)    skewX(0deg); }
  95%            { transform: translate(4px,-1px) skewX(3deg); opacity: .6; }
}
@keyframes wgl-glitch-r {
  0%,90%,100% { opacity: 0; transform: translate(0,0); }
  91%         { opacity: .45; transform: translate(-4px, 1px); }
  92%         { opacity: 0; }
  95%         { opacity: .3; transform: translate(3px, -1px); }
  96%         { opacity: 0; }
}
@keyframes wgl-glitch-b {
  0%,90%,100% { opacity: 0; transform: translate(0,0); }
  92%         { opacity: .4; transform: translate(4px, -1px); }
  93%         { opacity: 0; }
  96%         { opacity: .35; transform: translate(-3px, 1px); }
  97%         { opacity: 0; }
}

/* ── Style 5 spinner wheel ──────────────────────────────────────────── */
#wg-loader[data-style="5"] .wgl-spinner {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 2.5px solid rgba(50, 167, 235, .12);
  z-index: 1;
  animation: wgl-arc-spin .9s linear infinite;
}
#wg-loader[data-style="5"] .wgl-spinner::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: #32a7eb;
  border-right-color: rgba(50, 167, 235, .35);
}
#wg-loader[data-style="5"] .wgl-spinner::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-bottom-color: rgba(50, 167, 235, .25);
  animation: wgl-arc-spin 1.6s linear infinite reverse;
}

/* Live bar + Twitch popup, shared by every page that shows #live-bar. index.php,
   stats.php, feeds.php and community.php layer their own tweaks on top. */
/* ─── LIVE BUBBLE BAR ─────────────────────────────────────────────────────── */
@keyframes live-bar-slide-down{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
#live-bar{background:rgba(50,167,235,.06);border-bottom:1px solid rgba(50,167,235,.15);padding:10px 0;overflow:visible;position:relative;z-index:200;display:none}
#live-bar.live-bar--visible{display:block;animation:live-bar-slide-down .35s ease both}
.live-bar-inner{display:flex;align-items:center;gap:14px;max-width:1120px;margin:0 auto;padding:4px 28px;overflow-x:auto;overflow-y:visible;scrollbar-width:none}
.live-bar-inner::-webkit-scrollbar{display:none}
.live-bar-label{display:flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--brand);white-space:nowrap;flex-shrink:0}
/* This dot marks "streamers are live right now" — an ongoing true state, not an
   event, so it keeps a loop. 3.4s and shallow: at 2s scaling to .8 it read as a
   blink competing with the hero. This is the single definition for every page;
   index.css used to carry a second, divergent copy of this whole live-bar block. */
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 6px var(--brand);animation:live-pulse 3.4s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.62;transform:scale(.9)}}
.live-sep{width:1px;height:18px;background:rgba(50,167,235,.2);flex-shrink:0}
.live-bubbles{display:flex;gap:8px;align-items:center}
.live-bubble{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;background:rgba(50,167,235,.1);border:1px solid rgba(50,167,235,.2);border-radius:999px;color:var(--fg);font-size:.78rem;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s;flex-shrink:0;cursor:pointer;font-family:inherit}
.live-bubble:hover{background:rgba(50,167,235,.22);border-color:rgba(50,167,235,.5);transform:translateY(-1px)}
.live-avatar-wrap{position:relative;flex-shrink:0}
.live-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block;border:1.5px solid rgba(50,167,235,.5)}
.live-indicator{position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--brand);border:1.5px solid var(--bg);box-shadow:0 0 5px var(--brand)}
.live-viewers{font-size:.68rem;font-weight:700;color:var(--muted);margin-left:2px}
/* live-now.js shows the first 12 streamers and folds the rest behind "+N more". */
.live-bubble--hidden{display:none}
.live-more-btn{display:inline-flex;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:99px;padding:3px 10px;font-size:.75rem;font-weight:700;color:var(--muted);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s;font-family:inherit}
.live-more-btn:hover{background:rgba(255,255,255,.13);color:var(--fg)}
#live-modal{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.88);align-items:center;justify-content:center;padding:20px}
#live-modal.open{display:flex}
#live-modal-inner{display:flex;flex-direction:column;width:min(1200px,96vw);height:min(720px,88vh);background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.7)}
#live-modal-top{display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgba(11,15,20,.92);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
#live-modal-name{font-size:.88rem;font-weight:700;color:#fff}
#live-modal-badge{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);background:rgba(50,167,235,.15);border:1px solid rgba(50,167,235,.3);border-radius:.3rem;padding:.15rem .45rem}
#live-modal-close{margin-left:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:.8rem;font-weight:700;cursor:pointer;padding:.3rem .7rem;border-radius:.4rem;font-family:inherit;transition:background .15s}
#live-modal-close:hover{background:rgba(255,255,255,.16)}
#live-modal-open{margin-left:auto;color:#fff;font-size:.8rem;font-weight:700;text-decoration:none;padding:.3rem .7rem;border-radius:.4rem;background:#9146ff;border:1px solid #9146ff;transition:background .15s}
#live-modal-open:hover{background:#772ce8}
#live-modal-open + #live-modal-close{margin-left:0}
#live-modal-frame{flex:1;width:100%;border:none;min-height:0}
/* Portrait phone: height:min(720px,88vh) gave a ~374x743 box for a 16:9 player,
   so most of the modal was letterbox. Size the frame to the video instead and let
   the dialog be as tall as it needs; the sheet then sits centred with real black
   around it rather than inside it. */
@media(max-width:720px){
  #live-modal{padding:12px;align-items:flex-start;padding-top:12vh}
  #live-modal-inner{width:100%;height:auto;max-height:86vh}
  #live-modal-frame{flex:none;aspect-ratio:16/9;height:auto}
  #live-modal-close{min-height:44px;min-width:44px;padding:.3rem .8rem}
  #live-modal-top{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}#live-bar.live-bar--visible{animation:none}}

/* ── PAGE HEADER (glass card) ─────────────────────────────────────────────── */
/* The one header every section page opens with; page_header.php writes the
   markup. Option C of the 2026-10-01 page-header mockup: the brand glass card
   Discords and Clans already had (.ls-hero), now on every section page. It
   replaced six one-off openers (.page-hero, .ask-head, two different .page-titles,
   .ls-hero, .reports-hero) that had five title sizes between them.
   Desktop: text and counters left, the page's search/buttons/status right.
   Phones: one centred column, counters as 2x2 tiles. Spacing below rows is margin,
   not grid gap, so a page without a slot or counters gets no empty gap. */
.pagehead{max-width:1120px;margin:0 auto;padding:28px 28px 0}
.pagehead{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
/* Terms and Privacy: same width as their 760px text column. */
.pagehead--narrow{max-width:816px}
.pagehead-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"main slot" "ro slot";
  align-items:center;column-gap:28px;padding:28px;border:1px solid var(--border-brand);border-radius:16px;
  background:linear-gradient(120deg,rgba(50,167,235,.12),rgba(50,167,235,.02) 60%)}
.pagehead--solo .pagehead-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "ro"}
.pagehead-main{grid-area:main;min-width:0}
.pagehead-label{margin:0 0 8px;font-size:.7rem;font-weight:700;letter-spacing:.07em;line-height:1;text-transform:uppercase;color:var(--brand)}
.pagehead-title{margin:0 0 6px;font-size:clamp(1.7rem,3.4vw,2.2rem);font-weight:800;line-height:1.1;
  letter-spacing:-.025em;color:var(--fg);text-wrap:balance}
.pagehead-sub{margin:0;max-width:62ch;font-size:.95rem;line-height:1.7;color:var(--muted)}
/* The slot: whatever a page prints between wg_pagehead_open() and wg_pagehead_close(). */
.pagehead-slot{grid-area:slot;display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0}
.pagehead-slot--wide{align-items:stretch}
.pagehead-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pagehead-link{font-size:.82rem;font-weight:600}
.pagehead-link:hover{text-decoration:underline}
/* A search box in the header looks the same on every page: brand hairline, 8px corners. */
.pagehead .search-input{border-color:rgba(50,167,235,.35)}
/* The player search (stats.php's header and the homepage hero, both of which go to
   stats.php): a platform picker and the name input in one bordered box (.search-field),
   then the Look up button. Option B of the 2026-10-02 console mockup. */
.search-box{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.search-input-wrap{position:relative;flex:1;min-width:200px}
.search-input{width:100%;padding:.8rem 1rem;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1);
  background:rgba(10,17,32,.85);color:var(--fg);font-size:1rem;font-family:inherit;outline:none;transition:border-color .15s;box-sizing:border-box}
.search-input:focus{border-color:rgba(50,167,235,.5)}
.search-field{flex:1;min-width:200px;display:flex;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1);
  background:rgba(10,17,32,.85);transition:border-color .15s}
.search-field:focus-within{border-color:rgba(50,167,235,.5)}
.pagehead .search-field{border-color:rgba(50,167,235,.35)}
.search-field .search-input-wrap{min-width:0}
.search-field .search-input{border:0;background:transparent;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.search-platform{flex:none;margin:0;padding:0 .55rem 0 .85rem;border:0;border-right:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);background:rgba(50,167,235,.1);color:var(--fg);
  font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
.search-platform:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.search-platform option{background:#0d1520;color:var(--fg)}
.search-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 16px: iOS Safari zooms the page in on focusing anything smaller. */
@media (max-width:640px){.search-platform{padding:0 .35rem 0 .65rem;font-size:16px}}
.pagehead .ls-search label{border-radius:var(--radius-sm);box-shadow:none}
/* Counters, filled by the page's script via each <dd id>. Value above label
   (DESIGN.md's Value-Label Pair Rule); the <dt> stays first for screen readers. */
.pagehead-readouts{grid-area:ro;display:flex;flex-wrap:wrap;gap:6px 0;margin:16px 0 0}
.pagehead-ro{display:flex;flex-direction:column-reverse;gap:4px;padding:0 18px;border-left:1px solid var(--border)}
.pagehead-ro:first-child{padding-left:0;border-left:0}
.pagehead-ro dt{font-size:.7rem;font-weight:700;letter-spacing:.07em;line-height:1;text-transform:uppercase;color:var(--muted)}
.pagehead-ro dd{display:flex;align-items:center;gap:6px;min-height:1.9rem;margin:0;font-size:1.3rem;font-weight:800;
  line-height:1;font-variant-numeric:tabular-nums}
.pagehead-ro .gdot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green)}
.pagehead-skel{display:inline-block;width:40px;height:1rem;border-radius:.3rem;background:rgba(255,255,255,.07)}
@media(max-width:720px){
  .pagehead{padding:18px 18px 0}
  .pagehead{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .pagehead-in,.pagehead--solo .pagehead-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "slot" "ro";
    padding:22px 16px;text-align:center}
  .pagehead-sub{margin-inline:auto}
  .pagehead-slot{align-items:stretch;margin-top:16px;text-align:left}
  .pagehead-actions{justify-content:center}
  .pagehead-actions .btn{flex:1 1 auto;justify-content:center}
  .pagehead-readouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pagehead-ro,.pagehead-ro:first-child{align-items:center;padding:8px;border:0;border-radius:10px;background:var(--glass)}
  .pagehead-ro dd{justify-content:center}
}