/* Layout: sticky slim header, wide hero with live panel, alternating full-width bands; sub-pages share one page-head pattern. */
:root{
  --bg:#ecebe6; --bg2:#e3e1da; --surface:#f8f7f3; --line:#d3d0c7; --text:#141414; --muted:#57544e; --faint:#68645c;
  --accent:#b3261e; --accent-btn:#b3261e; --accent-ink:#fff; --accent-soft:color-mix(in srgb,var(--accent) 10%,var(--surface));
  --ok:#2c7a49; --warn:#a86a12; --steel:#5d6670;
  --hp:#3d7a2a; --shock:#6b43b8; --armor:#2b6cb0;
  --head:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --r:8px; --shadow:0 1px 0 rgba(0,0,0,.03),0 12px 32px -20px rgba(0,0,0,.35);
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e0e0f;--bg2:#141416;--surface:#19191b;--line:#2c2c2f;--text:#ece9e2;--muted:#a3a09a;--faint:#8e8a83;--accent:#e85a52;--accent-btn:#c4382f;--accent-ink:#fff;--ok:#5fc489;--warn:#e0a74a;--steel:#9aa5b1;--hp:#9ccc5a;--shock:#a98bf0;--armor:#6fb0f0;--shadow:0 1px 0 rgba(255,255,255,.02),0 16px 36px -22px rgba(0,0,0,.9);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e0e0f;--bg2:#141416;--surface:#19191b;--line:#2c2c2f;--text:#ece9e2;--muted:#a3a09a;--faint:#8e8a83;--accent:#e85a52;--accent-btn:#c4382f;--accent-ink:#fff;--ok:#5fc489;--warn:#e0a74a;--steel:#9aa5b1;--hp:#9ccc5a;--shock:#a98bf0;--armor:#6fb0f0;--shadow:0 1px 0 rgba(255,255,255,.02),0 16px 36px -22px rgba(0,0,0,.9);color-scheme:dark}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
p a,li a,.link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
button{font:inherit;cursor:pointer;color:inherit}
h1,h2,h3{text-wrap:balance}
.wrap{max-width:1140px;margin:0 auto;padding-inline:24px}
.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* Header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav.main{display:flex;align-items:center;gap:6px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font:900 1.45rem var(--head);letter-spacing:.05em;text-decoration:none;margin-right:auto;white-space:nowrap}
.mark{display:inline-block;flex:none;width:40px;height:40px;border-radius:6px;background:#000 var(--logo) center/cover no-repeat;box-shadow:0 0 0 1px var(--line)}
.mark.sm{width:28px;height:28px;border-radius:4px}
nav.main a.l{font-size:.92rem;color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:6px;position:relative}
nav.main a.l:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
nav.main a.l[aria-current="page"]{color:var(--text)}
nav.main a.l[aria-current="page"]::after{content:'';position:absolute;left:10px;right:10px;bottom:-13px;height:2px;background:var(--accent)}
nav.main a.l{white-space:nowrap}
@media (min-width:901px) and (max-width:1020px){nav.main{gap:2px}nav.main a.l,nav.main .ndrop>button.l{padding:8px 7px}nav.main a.l[aria-current="page"]::after{left:7px;right:7px}}
.iconbtn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:6px;border:1px solid var(--line);background:none;color:var(--muted);margin:0 6px 0 8px}
.iconbtn:hover{color:var(--text);border-color:var(--muted)}
.iconbtn .moon{display:none}
:root[data-theme="dark"] .iconbtn .sun{display:none}
:root[data-theme="dark"] .iconbtn .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .iconbtn .sun{display:none}:root:not([data-theme="light"]) .iconbtn .moon{display:block}}
/* Tools menu: opens on hover or keyboard focus, no JS. Tapping "Tools" itself goes to /tools/. */
.ndrop{position:relative;display:flex;align-items:center}
nav.main .ndrop>a.l{display:inline-flex;align-items:center;gap:5px}
nav.main .ndrop>button.l{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:.92rem;color:var(--muted);padding:8px 10px;border-radius:6px;position:relative;white-space:nowrap}
nav.main .ndrop>button.l:hover,nav.main .ndrop.open>button.l{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
nav.main .ndrop>button.l:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
nav.main .ndrop.cur>button.l{color:var(--text)}nav.main .ndrop.cur>button.l::after{content:'';position:absolute;left:10px;right:10px;bottom:-13px;height:2px;background:var(--accent)}
.ndrop.open .ndrop-m{opacity:1;visibility:visible;transform:none}.ndrop.open .chev{transform:rotate(180deg)}
.chev{width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.ndrop:hover .chev,.ndrop:focus-within .chev{transform:rotate(180deg)}
.ndrop-m{position:absolute;top:calc(100% + 8px);left:-10px;width:300px;padding:6px;display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:30}
.ndrop-m::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}
.ndrop:hover .ndrop-m,.ndrop:focus-within .ndrop-m{opacity:1;visibility:visible;transform:none}
.ndrop-m a{display:block;padding:9px 12px;border-radius:7px;text-decoration:none;color:var(--text)}
.ndrop-m a b{display:block;font-size:.94rem;font-weight:600}
.ndrop-m a small{display:block;margin-top:1px;color:var(--muted);font-size:.82rem;line-height:1.35}
.ndrop-m a:hover,.ndrop-m a:focus-visible{background:color-mix(in srgb,var(--text) 6%,transparent)}
.ndrop-m a[aria-current="page"] b{color:var(--accent)}
.ndrop-m a.all{margin-top:4px;padding-top:10px;border-top:1px solid var(--line);border-radius:0 0 7px 7px;color:var(--accent);font-size:.88rem;font-weight:600}
.mnav{display:none}
@media (max-width:900px){
  nav.main a.l,.ndrop{display:none}
  .mnav{display:flex;gap:4px;overflow-x:auto;white-space:nowrap;padding-bottom:10px;scrollbar-width:none}
  .mnav::-webkit-scrollbar{display:none}
  .mnav a{color:var(--muted);text-decoration:none;font-size:.92rem;padding:6px 12px;border-radius:999px;border:1px solid transparent}
  .mnav a[aria-current="page"]{color:var(--text);border-color:var(--line);background:var(--surface)}
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 120px)}
}

/* Buttons and chips */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent-btn,var(--accent));color:var(--accent-ink);font-weight:600;text-decoration:none;padding:12px 20px;border-radius:6px;border:1px solid var(--accent-btn,var(--accent));white-space:nowrap;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:none;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--text);filter:none}
.btn.sm{padding:9px 14px;font-size:.9rem}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.02em;border:1px solid var(--line);color:var(--muted);background:var(--surface);white-space:nowrap}
.chip.hot{background:var(--accent-btn,var(--accent));border-color:var(--accent-btn,var(--accent));color:var(--accent-ink)}
.chip.pvp{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.chip.pve{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.copy{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 12px;font:500 .86rem var(--mono);white-space:nowrap;transition:border-color .15s}
.copy:hover{border-color:var(--accent)}
.copy.done{border-color:var(--ok);color:var(--ok)}
.copy .ic{width:14px;height:14px;opacity:.7}.copy:hover .ic{opacity:1}
.panel-h .tap{display:none}@media (hover:none){.panel-h .hov{display:none}.panel-h .tap{display:inline}}
.ndrop-m .live{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:1px 7px;border-radius:99px;background:var(--accent-soft,color-mix(in srgb,var(--accent) 14%,transparent));color:var(--accent);font:700 .66rem var(--body);letter-spacing:.06em;text-transform:uppercase;vertical-align:2px}.ndrop-m .live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:livep 1.6s ease-in-out infinite}@keyframes livep{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.ndrop-m .live::before{animation:none}}
/* server pages: the join bar under the title */
/* Community event chip at the top of the homepage hero (the hero is dark in both themes) */
.evchip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;max-width:100%;margin:0 0 22px;padding:8px 14px 8px 10px;border-radius:14px;border:1px solid rgba(232,90,82,.55);background:rgba(232,90,82,.14);color:#ece9e2;text-decoration:none;font-size:.92rem;line-height:1.35;transition:background .15s,border-color .15s}
/* Phones: the notice bar and the progress band already carry the event, so the chip gives the first screen back to the pitch */
@media (max-width:700px){.evchip{display:none}}
.evchip:hover,.evchip:focus-visible{background:rgba(232,90,82,.26);border-color:#e85a52}
.evchip .tg{display:inline-flex;align-items:center;gap:6px;font:600 .7rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#c4382f;padding:3px 9px;border-radius:999px}
.evchip .tg i{width:6px;height:6px;border-radius:50%;background:#fff}
.evchip .tg i.on{animation:evchip 1.6s infinite}
@keyframes evchip{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.evchip .tg i.on{animation:none}}
.evchip b{font-weight:700;color:#fff}
.evchip .ar{color:#f2a19b;font-weight:600;white-space:nowrap}
/* Community event banner (homepage and leaderboard), filled from /api/event while an event is on */
.evband-w{margin-top:28px}
.evband{display:grid;grid-template-columns:auto 1fr auto;gap:8px 22px;align-items:center;padding:14px 18px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:12px;background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface) 60%);color:var(--text);text-decoration:none;box-shadow:var(--shadow)}
.evband:hover{border-color:var(--accent)}
.evband .en{display:flex;flex-direction:column;gap:2px}
.evband .en small{font:600 .7rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:6px}
.evband .en small i{width:7px;height:7px;border-radius:50%;background:currentColor}
.evband .en b{font:900 1.7rem/1 var(--head);letter-spacing:.02em;text-transform:uppercase}
.evband .eb{min-width:0}
.evband .eb>span{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;color:var(--muted);flex-wrap:wrap}
.evband .eb b{color:var(--text);font:800 1.15rem var(--head);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.evband .eb s{display:block;height:8px;margin-top:6px;border-radius:999px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;text-decoration:none}
.evband .eb s i{display:block;height:100%;background:var(--accent);border-radius:999px}
.evband .go{font-weight:600;font-size:.92rem;color:var(--accent);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
@media (max-width:700px){.evband{grid-template-columns:1fr}.evband .go{justify-self:start}}
.sjoin{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:20px 0 0;padding:10px 12px 10px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;max-width:max-content}
.sjoin .sj-st{display:inline-flex;align-items:center;gap:8px;font-weight:600;padding-right:4px}.sjoin .pc{color:var(--muted);font-weight:500}
.sjoin .copy{font-size:.9rem}.sjoin .copy svg{width:14px;height:14px}
@media (max-width:600px){.sjoin{max-width:none}.sjoin .btn{flex:1 1 100%;justify-content:center}.sjoin .copy{flex:1 1 auto;justify-content:center}}
kbd{display:inline-block;min-width:1.9em;text-align:center;padding:2px 7px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--surface);font:500 .82rem var(--mono);color:var(--text)}

/* Type */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 .78rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.eyebrow::before{content:'';width:18px;height:2px;background:currentColor}
h2.t{font:800 clamp(2.1rem,4.4vw,3.1rem)/1 var(--head);letter-spacing:.01em;margin:0 0 12px}
.lede{color:var(--muted);max-width:62ch;margin:0;font-size:1.06rem;text-wrap:pretty}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.shead>div{min-width:0}
section{padding-block:84px}
section.alt{background:var(--bg2);border-block:1px solid var(--line)}

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(800px 420px at 8% -10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),radial-gradient(700px 400px at 100% 0%,color-mix(in srgb,var(--steel) 16%,transparent),transparent 70%);pointer-events:none}
#snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55;z-index:1}
/* The headline rises in once on load */
.hero-t{animation:herot .7s cubic-bezier(.2,.7,.2,1) both}.hero-t em{display:inline-block;animation:herot .7s cubic-bezier(.2,.7,.2,1) .18s both}
@keyframes herot{from{opacity:0;transform:translateY(16px)}}
.hgrid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-block:56px 64px}
.hgrid>div{min-width:0}
.hero-h1{margin:0}.hero-h1 .eyebrow{display:flex}.hero-t{display:block;font:900 clamp(3rem,7.4vw,5.6rem)/.92 var(--head);letter-spacing:.005em;margin:0 0 22px}
.hero-t em{font-style:normal;color:var(--accent)}
.hero p.sub{font-size:1.14rem;color:var(--muted);max-width:46ch;margin:0 0 30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin:26px 0 0;padding:0;list-style:none;color:var(--muted);font-size:.92rem}
.trust li{display:flex;align-items:center;gap:7px}
.trust .ic{color:var(--ok)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.panel-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.panel-h b{font:800 1.15rem var(--head);letter-spacing:.06em;text-transform:uppercase}
.panel-h small{color:var(--muted);font-size:.82rem}
.row{display:grid;grid-template-columns:12px 1fr auto auto;gap:14px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);transition:background .15s}
.row:hover{background:var(--accent-soft)}
.row b{display:block;font-weight:600}
.row small{color:var(--muted);font-size:.85rem}
.row>div{min-width:0}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent)}
.dot.unk,.dot.soon{background:var(--faint);box-shadow:none;opacity:.7}
.dot.off{background:var(--accent);box-shadow:none}
.dot:not(.unk):not(.soon):not(.off){animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ok) 0%,transparent)}}
.pc{font:500 .9rem var(--mono);min-width:3.6em;text-align:right}
.pc:empty{display:none}
.panel-f{padding:12px 20px;font-size:.85rem;color:var(--muted);background:var(--bg)}.panel-f b{color:var(--text);font-weight:600}
.rst-row{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--line);font-size:.9rem}
.rst-row .ic{color:var(--accent)}
.rst-row small{margin-left:auto;color:var(--muted);font-size:.82rem}
.rst-note{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;color:var(--muted);font-size:.95rem}
.rst-note .ic{color:var(--accent);margin-top:3px}
.rst-note b{color:var(--text)}

/* Key art */
/* The hero is a dark "scene" in both themes: the key art melts into it on every side, and the headline sits on the art's foreground. */
.hero{--bg:#0e0e0f;--bg2:#141416;--surface:#19191b;--line:#2c2c2f;--text:#ece9e2;--muted:#a3a09a;--faint:#8e8a83;--accent:#e85a52;--accent-btn:#c4382f;--ok:#5fc489;--accent-soft:color-mix(in srgb,var(--accent) 10%,var(--surface));--shadow:0 16px 36px -22px rgba(0,0,0,.9);color-scheme:dark;background:var(--bg);color:var(--text)}
.keyart{position:relative;z-index:0;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);height:41vh;min-height:280px;max-height:640px;overflow:hidden}
/* The fade into the page is a gradient laid over the picture (not a mask), so the slow drift below is a cheap, GPU-only move */
.keyart::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,transparent 60%,#0e0e0f 100%);pointer-events:none}
.keyart img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;animation:keydrift 40s ease-in-out infinite alternate;will-change:transform}
@keyframes keydrift{from{transform:scale(1)}to{transform:scale(1.06)}}
.keyart+.hgrid{margin-top:-7vh;padding-top:0}
.hero .panel{background:rgba(20,20,22,.92)}
@media (max-width:900px){.keyart{height:34vh;min-height:220px}.keyart+.hgrid{margin-top:-20px;padding-top:0}}

/* Gallery */
.vband{position:relative;margin:0 0 12px;border-radius:var(--r);overflow:hidden;aspect-ratio:21/8;background:#111 url('/img/gs-highlights.webp') center/cover;border:1px solid var(--line)}
.vband video{display:block;width:100%;height:100%;object-fit:cover}
.vband figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));color:#eee9df;display:grid;gap:2px;font-size:.92rem}
.vband figcaption span{font-size:.8rem;opacity:.8}
@media (max-width:820px){.vband{aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){.vband video{display:none}}
.facts .wday{color:var(--muted)}
.phist-sub{margin:0 0 14px;color:var(--muted);font-size:.9rem}
.phist-bars{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;height:140px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.phist-bars span{position:relative;height:100%;display:flex;align-items:flex-end}
.phist-bars i{display:block;width:100%;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--accent) 75%,var(--surface))}
.phist-bars span:hover i{background:var(--accent)}
.phist-bars b{position:absolute;left:0;right:0;height:2px;background:var(--text);opacity:.35}
.phist-axis{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;padding:6px 10px 0;font-size:.74rem;color:var(--muted);white-space:nowrap}
.ftile h3 a{color:inherit;text-decoration:none}.ftile h3 a:hover,.ftile h3 a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;gap:12px;list-style:none;margin:0;padding:0}
.gallery li{min-width:0}
.gallery li:first-child{grid-row:span 2}
.gallery li.extra{display:none}
.shot{position:relative;display:block;width:100%;height:100%;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#111;cursor:zoom-in}
.shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.shot:hover img,.shot:focus-visible img{transform:scale(1.05)}
.shot span{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 10px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));color:#eee9df;font-size:.88rem;text-align:left}
.shot span.more{inset:0;display:grid;place-items:center;padding:0;background:rgba(10,10,11,.62);font:800 1.5rem var(--head);letter-spacing:.03em;text-align:center;transition:background .2s}
.shot:hover span.more{background:rgba(10,10,11,.5)}
.shot span.more+span{display:none}
@media (max-width:820px){.gallery{grid-template-columns:1fr 1fr;grid-template-rows:200px 130px 130px}.gallery li:first-child{grid-column:span 2;grid-row:auto}.shot span.more{font-size:1.1rem}#gallery .shead .cta .btn{padding:9px 14px;font-size:.9rem}}
dialog.lb{padding:0;border:0;background:transparent;max-width:min(1400px,94vw);max-height:92vh;overflow:visible}
dialog.lb::backdrop{background:rgba(0,0,0,.88)}
.lb figure{margin:0;display:flex;flex-direction:column;gap:10px}
.lb img{display:block;max-width:94vw;max-height:80vh;width:auto;height:auto;border-radius:8px;margin:0 auto}
.lb figcaption{color:#eee9df;text-align:center;font-size:.95rem}
.lb .lbtn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.55);color:#fff;font-size:1.4rem;line-height:1}
.lb .prev{left:8px}.lb .next{right:8px}
.lb .close{position:absolute;top:-48px;right:0;background:none;border:0;color:#fff;font-size:.95rem;padding:8px}
@media (max-width:640px){.lb .close{top:auto;bottom:-44px}}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);position:relative}
.stat{padding:26px 24px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font:900 2.6rem/1 var(--head);letter-spacing:.01em}
.stat b span{color:var(--accent)}
a.stat{color:inherit;text-decoration:none;transition:background-color .15s}
a.stat:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
a.stat:hover .si{background:color-mix(in srgb,var(--accent) 22%,transparent)}
a.stat:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.stat b{display:flex;align-items:flex-end;gap:14px}
.stat b em{font-style:normal;color:inherit;font-variant-numeric:tabular-nums}
/* 7-day mini chart next to the survivors number: same height as the digits, so the tile lines up with the others */
.spark{display:inline-flex;align-items:flex-end;gap:3px;height:.72em;margin-bottom:.06em}
.spark i{display:block;width:5px;min-height:2px;border-radius:1.5px;background:color-mix(in srgb,var(--accent) 45%,transparent)}
.spark i:last-child{background:var(--accent)}
.spark i.z{background:var(--line)}
.spark[hidden]{display:none}
.stat b{white-space:nowrap}
@media (max-width:440px){.stat b{font-size:1.75rem}}
.stat small{color:var(--muted);font-size:.92rem}
.stat{display:grid;grid-template-columns:auto 1fr;align-items:center;align-content:start;column-gap:14px}
.stat>div{display:contents}
.stat small{grid-column:1/-1;margin-top:10px;text-wrap:balance}
.stat .si{display:grid;place-items:center;flex:none;width:40px;height:40px;margin-top:1px;border-radius:10px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line))}
.stat .si .ic{width:20px;height:20px;color:var(--accent)}
@media (max-width:1150px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:560px){.stat{grid-template-columns:1fr;row-gap:10px}.stat small{margin-top:-4px}.stat .si{width:34px;height:34px;margin:0}.stat .si .ic{width:18px;height:18px}}

/* Server cards */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.scard{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s}
a.scard:hover,.scard.lift:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.scard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.scard h3{font:900 2.2rem/1 var(--head);margin:0;letter-spacing:.01em}
.scard .chips{display:flex;gap:6px;flex-wrap:wrap}
.scard p{margin:0;color:var(--muted)}
.meter{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted)}
.meter i{display:flex;gap:4px}
.meter i span{width:22px;height:6px;border-radius:2px;background:var(--line)}
.meter i span.on{background:var(--accent)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:.92rem;padding-top:14px;border-top:1px dashed var(--line)}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
.scard .trailer{display:inline-flex;align-items:center;gap:6px;font-size:.92rem;font-weight:600;text-decoration:none}
.scard .trailer:hover{text-decoration:underline}
.scard .more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:.92rem}
.scard .actions{margin-top:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.status{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
.status .pc{min-width:0;text-align:left}
@media (max-width:980px){.sgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.sgrid{grid-template-columns:1fr}}

/* Path */
.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;counter-reset:p}
.path::before{content:'';position:absolute;left:28px;right:28px;top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.path li{position:relative;padding-right:18px;counter-increment:p}
.path .node{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--accent);margin-bottom:16px;box-shadow:var(--shadow);transition:transform .2s,background .2s,color .2s}
.path .node .ic{width:24px;height:24px}
.path li:hover .node{transform:scale(1.08);background:var(--accent);color:var(--accent-ink)}
.path .node::after{content:counter(p);position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--text);color:var(--bg);font:700 .75rem/22px var(--body);text-align:center}
.path b{display:block;font:800 1.35rem/1.1 var(--head);letter-spacing:.02em;margin-bottom:4px}
.path span{color:var(--muted);font-size:.92rem;display:block}
@media (max-width:980px){
  .path{grid-template-columns:1fr;gap:18px}
  .path::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line) 0 8px,transparent 8px 14px)}
  .path li{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:center;padding:0}
  .path .node{margin:0}
}

.pathnote{display:flex;gap:14px;align-items:flex-start;margin-top:40px;padding:18px 22px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r)}
.pathnote .ic{width:22px;height:22px;color:var(--accent);margin-top:2px}
.pathnote p{margin:0;color:var(--muted)}
.fguides{margin-top:14px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.fguides p{margin:0 0 8px;color:var(--muted)}.fguides ul{margin:0;padding-left:20px}.fguides li{margin:4px 0}
.fguides a{color:var(--text);font-weight:600}
.pathnote b{color:var(--text);font-weight:600}
/* Earned */
.earned{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.earned>div{min-width:0}
.sources{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;list-style:none}
.sources li{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-weight:500}
.sources .ic{color:var(--accent);width:22px;height:22px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.vs div{padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);font-size:.92rem;color:var(--muted)}
.vs b{display:block;color:var(--text);font-weight:600;margin-bottom:2px}
.vs .yes{border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.vs .no{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
@media (max-width:900px){.earned{grid-template-columns:1fr;gap:32px}}
@media (max-width:480px){.vs{grid-template-columns:1fr}.sources li{padding:12px;font-size:.92rem;gap:8px}}

/* Feature tiles */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sbanner{margin:0;aspect-ratio:1600/520;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#141416}
.sbanner img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.sbanner{aspect-ratio:16/9}}
.sstrip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.sstrip li{aspect-ratio:16/9;min-width:0}
.scover{margin:-26px -26px 0;aspect-ratio:16/7;overflow:hidden;border-radius:var(--r) var(--r) 0 0;background:#141416}
.scover img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;transition:transform .5s ease}
a.scard:hover .scover img{transform:scale(1.04)}
.ftile.ph{padding-top:0}
.ftile .fimg{display:block;width:calc(100% + 52px);max-width:none;height:auto;margin:0 -26px 6px;aspect-ratio:16/8;object-fit:cover}
.ftile.ph .fi{margin-top:-28px;position:relative;background:var(--surface)}
.two.three{grid-template-columns:repeat(3,1fr);gap:20px 36px}
@media (max-width:900px){.two.three{grid-template-columns:1fr}}
.ftile{background:var(--surface);padding:26px;display:flex;flex-direction:column;gap:8px;transition:background .2s}
.ftile:hover{background:var(--accent-soft)}
.ftile .fi{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--accent-soft);color:var(--accent);margin-bottom:6px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line))}
.ftile .fi .ic{width:22px;height:22px}
.ftile h3{font:800 1.45rem/1.1 var(--head);letter-spacing:.02em;margin:0}
.ftile p{margin:0;color:var(--muted);font-size:.95rem}
.ftile small{margin-top:auto;padding-top:6px;color:var(--faint);font-size:.8rem}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tags li{border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:.88rem;background:var(--surface);color:var(--muted)}
.also{display:flex;gap:16px 24px;align-items:baseline;flex-wrap:wrap;margin-top:28px}
.also b{font:800 1.15rem var(--head);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* Video */
.video{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:center;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;box-shadow:var(--shadow);transition:border-color .2s}
.video:hover{border-color:var(--accent)}
.thumb{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:6px;background:#000 url('/img/t-keyart.webp') center/cover no-repeat;overflow:hidden}
.thumb::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45);transition:background .2s}
.thumb::after{content:'';position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='white'/%3E%3C/svg%3E") center/26px no-repeat;transition:transform .2s}
.video:hover .thumb::after,.vcard:hover .thumb::after{transform:scale(1.1)}
.video h3{font:900 2rem/1.05 var(--head);margin:6px 0 8px}
.video p{margin:0;color:var(--muted)}
@media (max-width:720px){.video{grid-template-columns:1fr;gap:18px}}

/* Community */
.band{position:relative;margin:0;aspect-ratio:4.57/1;max-width:100%;border-radius:var(--r);border:1px solid var(--line);background:#111;overflow:hidden}
.band img{display:block;width:100%;height:100%;object-fit:cover}
.band::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.7))}
.band figcaption{position:absolute;left:20px;bottom:14px;z-index:1;color:#eee9df;font-size:.9rem}
@media (max-width:720px){.band{aspect-ratio:2.2/1}}
.duo{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-top:20px}
.cardx{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:32px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.cardx h2{font:900 2.2rem/1 var(--head);margin:0}
.cardx p{margin:0;color:var(--muted);max-width:50ch}
.cardx .btn{margin-top:auto}
.cardx.red{background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent) 16%,var(--surface)));border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
@media (max-width:820px){.duo{grid-template-columns:1fr}}

.cardx.cine{position:relative;overflow:hidden;isolation:isolate;min-height:260px;border-color:#2c2c2f;background:#0e0e0f;color:#ece9e2}
.cardx.cine .cine-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%;z-index:-2}
.cardx.cine::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,11,.95) 0%,rgba(10,10,11,.88) 55%,rgba(10,10,11,.4) 100%)}
.cardx.cine p{color:#cfcac0}
@media (prefers-reduced-motion:reduce){.cardx.cine .cine-bg{display:none}.cardx.cine{background:#0e0e0f url('/img/keyart-loop-poster.jpg') 70% 40%/cover no-repeat}}

/* Sub-pages */
.phead{padding-block:64px 40px;border-bottom:1px solid var(--line);margin-bottom:48px;background:radial-gradient(700px 300px at 0% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
.phead h1{font:900 clamp(2.6rem,6.4vw,4.4rem)/.95 var(--head);margin:0 0 14px}
.pbody{padding-bottom:84px}
.pbody>*+*{margin-top:56px}
h2.s{font:800 clamp(1.7rem,3.4vw,2.3rem)/1.05 var(--head);margin:0 0 8px}
.note{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:var(--r);color:var(--muted)}
.note .ic{color:var(--warn);margin-top:3px}
.note b{color:var(--text);font-weight:600}

/* Compare table */
.scroll{overflow-x:auto;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:middle}
tr:last-child td{border-bottom:0}
thead th{font-weight:600;color:var(--text);background:var(--bg2);font-size:.88rem}
.cmp{min-width:640px}@media (max-width:640px){.cmp{min-width:0;font-size:.82rem}.cmp th,.cmp td{padding:9px 6px}.cmp td:first-child{width:28%}.cmp .ic{width:14px;height:14px}}
.cmp td:first-child{color:var(--muted);width:30%}
.y{color:var(--ok);font-weight:600}.n{color:var(--faint)}
.y .ic,.n .ic{margin-right:4px}

/* Steps */
ol.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:s}
ol.steps li{counter-increment:s;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
ol.steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:800 1.1rem var(--head);margin-bottom:12px}
ol.steps b{display:block;margin-bottom:4px}
ol.steps span{color:var(--muted);font-size:.95rem}
@media (max-width:820px){ol.steps{grid-template-columns:1fr}}

/* Rules */
.ess{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ess div{display:flex;gap:14px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.ess .ic{width:24px;height:24px;color:var(--accent);margin-top:2px}
.ess b{display:block;margin-bottom:2px}
.ess p{margin:0;color:var(--muted);font-size:.93rem}
@media (max-width:900px){.ess{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ess{grid-template-columns:1fr}}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.nums div{background:var(--surface);padding:18px 20px}
.nums b{display:block;font:900 2.1rem/1 var(--head);color:var(--accent)}
.nums small{color:var(--muted);font-size:.88rem;line-height:1.35;display:block;margin-top:4px}
@media (max-width:820px){.nums{grid-template-columns:1fr 1fr}}

/* Accordions */
.acc-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.search{position:relative;flex:1 1 260px;min-width:0}
.search .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search input{width:100%;padding:11px 14px 11px 40px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:6px;font:inherit}
.search input:focus{border-color:var(--accent);outline:none}
.fchips{display:flex;gap:8px;flex-wrap:wrap}
.fchip{background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 14px;font-size:.88rem}
.fchip:hover{border-color:var(--muted);color:var(--text)}
.fchip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.textbtn{background:none;border:0;color:var(--accent);font-weight:600;font-size:.9rem;padding:6px 0}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;transition:border-color .2s}
details[open]{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
summary{cursor:pointer;padding:16px 20px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;font:800 1.3rem var(--head);letter-spacing:.02em}
summary::-webkit-details-marker{display:none}
summary::after{content:'';flex:none;width:10px;height:10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
summary:hover{color:var(--accent)}
summary>div{min-width:0;flex:1}
summary small{display:block;margin-top:2px;font:400 .93rem/1.4 var(--body);letter-spacing:0;color:var(--muted)}
summary .gcat{margin-left:auto;font:600 .72rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
details>ul,.abody{padding:0 20px 18px}
details>ul{margin:0;padding-left:40px;color:var(--muted)}
details li{margin-bottom:7px}
details li b{color:var(--text);font-weight:600}
.abody p{margin:0 0 14px;color:var(--muted);max-width:70ch}
.abody ol,.abody ul{padding:0 0 4px 22px;margin:0 0 14px;color:var(--muted)}
.abody li{margin-bottom:6px}
.abody>p>b{color:var(--text)}
.gscroll{margin:0 0 16px}
.gtable{min-width:520px}
.gtable th,.gtable td{padding:10px 12px;font-size:.9rem;color:var(--text)}
.gtable td{color:var(--muted)}
.gtable td:first-child{color:var(--text);font-weight:500}
.gtable .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.gimg{display:block;width:100%;max-width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
.gfig{margin:0 0 18px;max-width:100%}
.gfig figcaption{margin-top:8px;font-size:.86rem;color:var(--muted)}
/* leaderboard guide: medals, ranks and ribbons drawn from the live badge art */
.lbart{display:grid;gap:10px;margin:0 0 20px}
.lbart b{display:block;font-weight:600;color:var(--text);line-height:1.25}.lbart small{display:block;color:var(--muted);font-size:.86rem;line-height:1.35;margin-top:2px}
.lbart img{display:block;flex:none}
.lbm-fam h3{font:700 .78rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:6px 0 6px}
.lbm-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.lbm-c,.lbrb-c,.lbr-c,.lbh-c{background:var(--surface);border:1px solid var(--line);border-radius:10px}
.lbm-c{display:flex;gap:10px;align-items:center;padding:8px 10px}.lbm-c>div{min-width:0;overflow-wrap:break-word;hyphens:auto}
@media (max-width:480px){.lbm-row{grid-template-columns:1fr 1fr;gap:6px}.lbm-c{gap:8px;padding:8px}.lbm-c img{width:40px;height:40px}.lbm-c b{font-size:.9rem}}
.lbt{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lbt.bronze{color:#b86f33}.lbt.silver{color:#7d8794}.lbt.gold{color:#b8860b}.lbt.diamond{color:#1f8fb3}
.lbr{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
.lbr-c{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 6px 10px;gap:6px}.lbr-c b{font-size:.88rem}
.lbrb,.lbst{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.lbrb-c{display:flex;gap:14px;align-items:center;padding:10px 14px}.lbrb-c .art{display:flex;flex-direction:column;gap:4px;flex:none}
.lbh{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.lbh-c{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 10px;gap:6px;border-color:color-mix(in srgb,#8b5cf6 35%,var(--line))}
.lbh-c i{font-style:normal;color:#8b5cf6;font-size:.88rem}
.gsheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,250px));gap:12px;margin:0 0 18px}
.gsheet{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.gsheet:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));transform:translateY(-2px)}
.gsheet img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;background:#0e0e0f}
.gsheet span{display:block;padding:10px 14px 12px;font-size:.84rem;line-height:1.35;color:var(--muted)}
.gsheet b{display:block;color:var(--text);font-weight:600;font-size:.92rem}
@media (max-width:480px){.gsheets{grid-template-columns:1fr 1fr}}
.abody kbd{font-size:.78rem}
@media (max-width:600px){summary .gcat{display:none}}
.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.keys li{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:.93rem;color:var(--muted)}
.keys kbd{flex:none}

/* Support */
.showcase{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:24px}
.showcase figure{margin:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0}
.showcase img{display:block;width:100%;height:300px;object-fit:cover;background:#111}
.showcase figure:last-child img{object-position:50% 0%}
.showcase figcaption{padding:12px 16px;font-size:.9rem;color:var(--muted)}
.showcase figcaption b{display:block;color:var(--text);font-weight:600}
@media (max-width:700px){.showcase{grid-template-columns:1fr}.showcase img{height:220px}}
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.perks li{display:flex;gap:12px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--muted);font-size:.93rem}
.perks .ic{width:22px;height:22px;color:var(--accent);margin-top:1px}
.perks b{display:block;color:var(--text);font-weight:600}.ptier-cta{display:flex;gap:12px 18px;align-items:center;flex-wrap:wrap;margin-top:18px}.ptier-cta p{margin:0;color:var(--muted)}
.money{max-width:72ch;border-left:3px solid var(--accent);padding:2px 0 2px 20px}.money p{margin:0;color:var(--muted)}.money h2.s{margin-top:0}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.way{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s,transform .15s}
.way:hover,.way:focus-visible{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));transform:translateY(-2px)}
.way b{font:800 1.15rem var(--head);letter-spacing:.02em}.way p{margin:0;color:var(--muted);font-size:.95rem;flex:1}
.way .go{margin-top:6px;color:var(--accent);font-weight:600;font-size:.92rem}.way .go::after{content:" →"}
@media (max-width:560px){.way{padding:14px 16px}.way p{font-size:.9rem}}
.comm-req{flex-basis:100%;font-weight:600;margin:0}
.supwall{}.supnames{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.supnames a{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:600;font-size:.9rem;text-decoration:none}.supnames a:hover{border-color:var(--accent);color:var(--accent)}.supmore{margin:12px 0 0;color:var(--muted);font-size:.9rem}
.ptiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.ptier{display:flex;flex-direction:column;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}.ptier.top{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}.ptier-h{display:flex;flex-direction:column;gap:2px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}.ptier-h b{font:800 1.3rem var(--head);text-transform:uppercase;letter-spacing:.02em}.ptier-h span{color:var(--muted);font-size:.9rem}.ptier-h strong{color:var(--text);font:800 1.7rem var(--head)}.ptier-inc{margin:0 0 8px;color:var(--muted);font-size:.88rem}.ptier ul{margin:0;padding-left:18px;color:var(--text);font-size:.92rem;line-height:1.45}.ptier li{margin:0 0 6px}@media (max-width:960px){.ptiers{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:540px){.ptiers{grid-template-columns:minmax(0,1fr)}}@media (max-width:860px){.perks{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:520px){.perks{grid-template-columns:minmax(0,1fr)}}

/* About / team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.tgroup{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.tgroup h3{font:800 1.4rem/1.1 var(--head);letter-spacing:.02em;margin:0 0 4px}
.tgroup>p{margin:0 0 14px;color:var(--muted);font-size:.93rem}
.tgroup ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tgroup li{display:flex;align-items:center;gap:12px;min-width:0}
.tgroup li b{font-weight:600}
.tgroup li small{display:block;color:var(--muted);font-size:.85rem;line-height:1.35}
.tav{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,var(--bg));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));color:var(--accent);font:800 1.2rem var(--head)}
.tav img{width:100%;height:100%;object-fit:cover;display:block}
.lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.fcard{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.fcard h3{font:800 1.4rem/1.1 var(--head);letter-spacing:.02em;margin:0 0 4px}
.fcard .by{font-size:.86rem;color:var(--accent);margin:0 0 8px;font-weight:500}
.fcard p{margin:0;color:var(--muted);font-size:.95rem}
.quote{font:800 clamp(1.8rem,3.6vw,2.6rem)/1.1 var(--head);letter-spacing:.01em;max-width:26ch;margin:0;padding-left:20px;border-left:4px solid var(--accent)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px}
.two h3{font:800 1.5rem var(--head);margin:0 0 6px}
.two p{margin:0 0 12px;color:var(--muted)}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.closed{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font:600 .8rem var(--body);vertical-align:middle;margin-left:8px;letter-spacing:0}

/* Videos */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.shorts-h{font:800 1.4rem var(--head);letter-spacing:.02em;margin:32px 0 14px}
.sgrid-v{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;max-width:760px}
.sgrid-v .thumb{aspect-ratio:9/16}
#hvgrid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.vcard{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s,transform .2s}
.vcard:hover{border-color:var(--accent);transform:translateY(-3px)}
.vcard .thumb{border-radius:0}
.vbody{padding:16px 18px 20px}
.vbody h3{font:800 1.5rem/1.1 var(--head);margin:0 0 4px}
.vbody p{margin:0;color:var(--muted);font-size:.95rem}

/* Ammo */
.ascroll{max-height:70vh;overflow:auto}
.atable{min-width:560px}
.atable .aempty{text-align:center;color:var(--muted);padding:28px 16px}
/* Phones: the source chips already filter by source, so the column goes and all four damage numbers fit */
@media (max-width:600px){.atable{min-width:0}.atable th:nth-child(2),.atable td.src{display:none}.atable th,.atable td{padding-inline:6px}.atable th{font-size:.76rem}.atable td:first-child{overflow-wrap:anywhere}}
.atable th{position:sticky;top:0;z-index:1;cursor:pointer;user-select:none;white-space:nowrap}
.atable th[aria-sort="ascending"]::after{content:' \2191'}
.atable th[aria-sort="descending"]::after{content:' \2193'}
.atable .num{text-align:right;font:500 .9rem var(--mono)}
.atable td.src{color:var(--muted)}
.hp{color:var(--hp)}.sh{color:var(--shock)}.bl{color:var(--accent)}.ar{color:var(--armor)}
.atable th.hp,.atable th.sh,.atable th.bl,.atable th.ar{color:inherit}
.atable td.dash{color:var(--faint)}
.dmg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.dmg .fcard{border-top:3px solid currentColor}
.dmg .fcard p{color:var(--muted)}

/* Socials */
.socials,.fcols ul.socials{display:flex;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.socials a{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--line);color:var(--muted);transition:color .15s,border-color .15s,transform .15s}
.socials a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.socials .ic{width:18px;height:18px}
.follow{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:.88rem;color:#a3a09a}
.follow a{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.18);color:#ece9e2;transition:border-color .15s,color .15s}
.follow a:hover{border-color:#e85a52;color:#e85a52}
.follow .ic{width:17px;height:17px}
.subrow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.subrow .lede{min-width:0}

/* Footer */
footer{border-top:1px solid var(--line);background:var(--bg2);padding-block:56px 32px;color:var(--muted);font-size:.92rem}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px}
.fcols b{display:block;color:var(--text);font:800 1.05rem var(--head);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fcols a{text-decoration:none}
.fcols a:hover{color:var(--accent)}
.fbrand p{margin:12px 0 0;max-width:34ch}
.flogo{display:block;width:120px;height:auto}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .flogo{filter:drop-shadow(0 0 1px rgba(255,255,255,.45))}}
:root[data-theme="dark"] .flogo{filter:drop-shadow(0 0 1px rgba(255,255,255,.45))}
.fbase{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.84rem}
@media (max-width:820px){.fcols{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}

@media (max-width:900px){
  .hgrid{grid-template-columns:1fr;gap:40px;padding-block:56px 48px}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  section{padding-block:64px}
}
@media (max-width:480px){
  .wrap{padding-inline:16px}
  nav.main .btn{padding:9px 12px;font-size:.88rem}
  .iconbtn{margin:0 4px}
  .stat{padding:20px 16px}
  .stat b{font-size:2.1rem}
  .cardx{padding:24px}
}
/* Hero fits the first screen on laptops: the painted scene takes 41% of the window height and the headline scales with it */
@media (min-width:901px){
  .hero-t{font-size:clamp(2.8rem,min(6.4vw,8vh),4.8rem)}
  .hero p.sub{margin-bottom:24px}
}
.trust .liveon{color:var(--text);font-weight:600}
.trust{gap:0;flex-wrap:nowrap}
.trust li{white-space:nowrap}
.trust li:not([hidden])~li{border-left:1px solid var(--line);margin-left:11px;padding-left:11px}
@media (min-width:641px){.trust{font-size:.86rem}.trust li{gap:6px}}
@media (prefers-reduced-motion:no-preference){.trust .liveon .dot{animation:livepulse 2.4s ease-in-out infinite}}
@keyframes livepulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--ok) 8%,transparent)}}
@media (max-width:640px){.trust{display:grid;grid-template-columns:auto auto;justify-content:start;gap:10px 22px}.trust li:not([hidden])~li{border:0;margin:0;padding:0}}
.trust.stack{display:grid;grid-template-columns:auto auto;justify-content:start;gap:10px 22px}.trust.stack li:not([hidden])~li{border:0;margin:0;padding:0}
.trust .liveon .dot{width:8px;height:8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
/* Season leaders on the homepage */
.leaders{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.lnote{margin:14px 0 0;color:var(--faint);font-size:.85rem}
.lcard li:nth-child(-n+3) em{color:var(--text)}
.lcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.lcard h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:16px 20px;border-bottom:1px solid var(--line);font:800 1.25rem var(--head);letter-spacing:.05em;text-transform:uppercase}
.lcard h3 small{font:400 .82rem var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.lcard ol{list-style:none;margin:0;padding:0}
.lcard li{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line)}
.lcard li:last-child{border-bottom:0}
.lcard li b a{color:inherit;text-decoration:underline dotted color-mix(in srgb,var(--muted) 60%,transparent);text-underline-offset:4px}.lcard li b a:hover{color:var(--accent);text-decoration-color:currentColor}
.lcard li em{font:800 1.2rem var(--head);font-style:normal;color:var(--muted)}
.lcard li:first-child em{color:var(--accent)}
.lcard li b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcard li span{font:500 .95rem var(--mono);white-space:nowrap}
.lcard li .tg{display:inline-block;margin-left:8px;font:500 .7rem var(--mono);letter-spacing:.04em;padding:1px 6px;border-radius:4px;border:1px solid var(--line);color:var(--muted);vertical-align:2px}
@media (max-width:620px){.leaders{grid-template-columns:1fr}}
/* Discord member count */
.dcount{display:flex;align-items:center;gap:8px;font-size:.88rem;color:#cfcac0}
.dcount .dot{width:8px;height:8px}
/* Perk preview on the homepage support card */
.minitags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.minitags li{font-size:.82rem;padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:var(--bg)}
/* Best time to play */
.besttime{display:none}
.besttime.on{display:contents}
/* Play on Is Dead box (guides, ammo) */
.playbox{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:28px 32px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent) 12%,var(--surface)));box-shadow:var(--shadow)}
.playbox h2{font:900 2rem/1 var(--head);margin:0 0 8px}
.playbox p{margin:0;color:var(--muted)}
.playbox ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.playbox li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.playbox li b{font-weight:600}
.playbox li small{display:block;color:var(--muted);font-size:.82rem}
.playbox li a{color:var(--accent);font-weight:600;font-size:.9rem;text-decoration:none;white-space:nowrap;padding:8px 0}
.playbox .cta{margin-top:18px}
@media (max-width:820px){.playbox{grid-template-columns:1fr;padding:24px}}
/* Guide pages and the guide hub (multi-page site) */
.gcard{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;margin-bottom:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.gtool{display:flex;align-items:center;gap:14px;margin:22px 0;padding:14px 18px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-left:4px solid var(--accent);border-radius:var(--r);background:linear-gradient(90deg,var(--accent-soft),var(--surface) 75%);text-decoration:none;color:inherit}
.gtool:hover{border-color:var(--accent)}
.gtool b{display:block;font:800 1.15rem var(--head);letter-spacing:.02em;color:var(--text)}
.gtool small{display:block;color:var(--muted);font-size:.92rem;line-height:1.4;margin-top:2px}
.gtool-i{flex:none;width:38px;height:38px;border-radius:8px;background:var(--surface);border:1px solid var(--line);position:relative}
.gtool-i svg{position:absolute;inset:8px;width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gtool-i.sick::before{display:none}
/* Tool tiles: compact links to the four tools (guides page strip, homepage row) */
.toolstrip{margin:34px 0 8px}
.illall{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.illall a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);text-decoration:none;font-size:.9rem}
.illall a:hover{border-color:var(--accent);color:var(--accent)}
.creators{margin:18px 0 0;color:var(--muted);font-size:.95rem;line-height:1.6}
.creators span{font-weight:600;color:var(--text)}
.creators a{color:var(--accent)}
.creators .more{margin-left:6px;font-weight:600;white-space:nowrap}
.toolstrip .shead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.toolstrip .shead .ggroup{margin:0}
.tooltiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tooltiles a{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.tooltiles a:hover,.tooltiles a:focus-visible{border-color:var(--accent);transform:translateY(-1px)}
.tooltiles b{display:block;font:800 1.08rem var(--head);letter-spacing:.02em;color:var(--text)}
.tooltiles small{display:block;color:var(--muted);font-size:.86rem;line-height:1.4;margin-top:2px}
.tt-i{flex:none;width:36px;height:36px;border-radius:8px;background:var(--accent-soft);display:grid;place-items:center}
.tt-i svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.tooltiles{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tooltiles{gap:8px}.tooltiles a{flex-direction:column;gap:8px;padding:12px}.tooltiles small{font-size:.82rem}}
@media (max-width:340px){.tooltiles{grid-template-columns:1fr}}
/* Homepage: tighter sections, and the three server cards swipe on phones instead of stacking */
#home > section,#home .below > section{padding-block:68px}
@media (max-width:640px){
  #home > section,#home .below > section{padding-block:48px}
  #maps .sgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:0 16px 8px;scrollbar-width:none}
  #maps .sgrid::-webkit-scrollbar{display:none}
  #maps .scard{flex:0 0 84%;scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.tooltiles a{transition:none}.tooltiles a:hover{transform:none}}
.gtool-i::before{content:'';position:absolute;inset:9px;border:2px solid var(--accent);border-radius:2px;background:linear-gradient(var(--accent),var(--accent)) center/2px 100% no-repeat,linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat}
.gcard:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));transform:translateY(-1px)}
.gcard[hidden]{display:none}
.gcard>div{min-width:0;flex:1}
.gcard b{display:block;font:800 1.3rem var(--head);letter-spacing:.02em}
.gcard small{display:block;margin-top:2px;color:var(--muted);font-size:.93rem;line-height:1.4}
.gcard .gcat{margin-left:auto;font:600 .72rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.gcard::after{content:'';flex:none;width:9px;height:9px;border-right:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg)}
@media (max-width:600px){.gcard .gcat{display:none}}
.crumbs{margin:0 0 14px;font-size:.9rem;color:var(--muted)}
.crumbs a{color:var(--accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 6px;color:var(--faint)}
article.guide{max-width:780px}
article.guide>p,article.guide li{color:var(--muted)}
article.guide>p{margin:0 0 16px}
article.guide h2{font:800 1.6rem/1.1 var(--head);letter-spacing:.02em;color:var(--text);margin:36px 0 12px}
article.guide>h2:first-child{margin-top:0}
article.guide ul,article.guide ol{padding-left:22px;margin:0 0 16px}
article.guide li{margin-bottom:8px}
article.guide li b,article.guide p b{color:var(--text);font-weight:600}
article.guide .gscroll{margin:0 0 20px}
article.guide ol.path,article.guide ul.keys{padding-left:0;margin:0 0 20px}
article.guide ol.path{grid-template-columns:1fr;gap:14px}
article.guide .path li{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:center;padding:0;margin:0}
article.guide .path .node{margin:0}
article.guide .path::before{display:none}
article.guide .keys li{margin:0}
article.guide .pathnote{margin:0 0 20px}
article.guide .pathnote p{margin:0}
.tiers{list-style:none;padding:0;margin:0 0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.tiers{grid-template-columns:1fr 1fr}}
.tiers li{margin:0;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--tc);border-radius:var(--r)}
.tiers b{display:flex;align-items:center;gap:8px;font:800 1.15rem var(--head);letter-spacing:.03em;color:var(--text)}
.tiers b::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--tc);flex:none}
.tiers span{display:block;margin-top:4px;font-size:.88rem;color:var(--muted);line-height:1.4}
.t-common{--tc:#9a968f}.t-uncommon{--tc:#22c55e}.t-rare{--tc:#eab308}.t-epic{--tc:#a855f7}.t-legendary{--tc:#f59e0b}.t-mythic{--tc:#ec4899}
article.guide ol.tiers{padding-left:0}
.newtag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;font:700 .62rem/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;vertical-align:4px;color:var(--accent-ink);background:var(--accent-btn)}
[hidden]{display:none!important}
.ggroup{font:800 1.5rem/1.1 var(--head);letter-spacing:.02em;margin:32px 0 14px}
.gcard.gfeat{padding:24px 26px;margin-bottom:8px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-left:4px solid var(--accent);background:linear-gradient(90deg,var(--accent-soft),var(--surface) 70%)}
.gcard.gfeat b{font-size:1.7rem}
.gcard.gfeat::after,.gcard.gfeat .gcat{display:none}
.gcard.gfeat:hover .garrow{text-decoration:underline}
.gcard.gfeat .gtag{display:inline-block;margin-bottom:8px;font:700 .72rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.gcard.gfeat .garrow{flex:none;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--accent);white-space:nowrap}
@media (max-width:620px){.gcard.gfeat{flex-direction:column;align-items:flex-start}}
.gnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:780px}
.gnav a{display:block;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit;transition:border-color .2s}
.gnav a:hover{border-color:var(--accent)}
.gnav small{display:block;color:var(--muted);font-size:.82rem}
.gnav b{font:800 1.15rem var(--head);letter-spacing:.02em}
.gnav .next{text-align:right;grid-column:2}
@media (max-width:600px){.gnav{grid-template-columns:1fr}.gnav .next{grid-column:auto}}
.srv2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:820px){.srv2{grid-template-columns:1fr}}
.scard .more{color:var(--accent);text-decoration:none}
.scard .more:hover{text-decoration:underline}
/* Phone layout */
@media (max-width:900px){.mnav{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:32px}}
@media (max-width:560px){
  .fgrid{grid-template-columns:1fr 1fr}
  .ftile{padding:16px 14px;gap:6px}
  .ftile .fi{width:36px;height:36px;margin-bottom:2px}
  .ftile h3{font-size:1.15rem}
  .ftile p{font-size:.86rem}
  .ftile small{font-size:.74rem}
}
@media (max-width:640px){
  #hvgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:0 16px 8px;scrollbar-width:none}
  #hvgrid::-webkit-scrollbar{display:none}
  #hvgrid .vcard{flex:0 0 78%;scroll-snap-align:start}
}
@media (max-width:820px){.fcols ul{gap:0}.fcols ul a{display:block;padding:9px 0}}
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
/* Online dots breathe; offline and unknown stay still */
@media (prefers-reduced-motion:no-preference){.dot:not(.unk):not(.soon):not(.off){animation:livepulse 2.4s ease-in-out infinite}}
/* Linked cards: a soft shadow on hover to go with the lift they already have, and arrows nudge forward */
.scard.lift,.gsheet,.vcard,.gcard,.way,.tooltiles a,.vt-pick{transition:border-color .2s,transform .2s,box-shadow .2s,background-color .2s}
.scard.lift:hover,.gsheet:hover,.vcard:hover,.gcard:hover,.way:hover,.tooltiles a:hover{box-shadow:0 14px 30px -18px rgba(0,0,0,.55)}
.way .go::after{display:inline-block;transition:transform .2s}.way:hover .go::after{transform:translateX(3px)}
.evchip .ar{display:inline-block;transition:transform .2s}.evchip:hover .ar{transform:translateX(3px)}
/* Copy buttons: check mark pop */
.copy.done .ic{animation:cpop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes cpop{0%{transform:scale(.4)}100%{transform:none}}
.toast{position:fixed;left:50%;bottom:22px;z-index:60;display:grid;gap:2px;max-width:min(440px,calc(100vw - 32px));padding:12px 16px;border-radius:10px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-left:3px solid var(--ok);box-shadow:0 16px 40px -14px rgba(0,0,0,.5);font-size:.9rem;transform:translate(-50%,16px);opacity:0;visibility:hidden;transition:opacity .2s,transform .25s,visibility .25s;pointer-events:none}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast b{font-weight:600}.toast span{color:var(--muted)}
/* Restart countdown: amber in the last 10 minutes, accent at zero */
.rst-row.soon b,.rst-note.soon b{color:var(--warn)}.rst-row.soon .ic,.rst-note.soon .ic{color:var(--warn)}
.rst-row.now b,.rst-note.now b{color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.rst-row.soon .ic,.rst-note.soon .ic,.rst-row.now .ic,.rst-note.now .ic{animation:tick 1s steps(2) infinite}}
@keyframes tick{50%{opacity:.35}}
/* Texture (2026-11-04): film grain over the whole page, topographic map lines in the side space of some home
   sections (fading out before the text), and a faint red glow behind section headings. Decoration only. */
:root{--topo-ink:rgba(0,0,0,.075);--grain-o:.05;--glow:color-mix(in srgb,var(--accent) 9%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--topo-ink:rgba(255,255,255,.06);--grain-o:.06}}
:root[data-theme="dark"]{--topo-ink:rgba(255,255,255,.06);--grain-o:.06}
html::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:var(--grain-o);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px}
/* Below the hero the sections read as one canvas: no hard dividers, the alternate shade fades in and out, and the
   heading glow only marks three sections (maps, tools, community) so it stays atmosphere rather than a pattern. */
#home .below>section.alt{border-block:0;background:none} /* one flat canvas below the hero: the map lines, glow and spacing separate the sections (Bennis: the lighter bands felt jarring) */
/* Heading glow on three sections. It lives on its own layer with a vertical fade, so it can never end in a hard edge at
   the top or bottom of a section, whatever the section's height. */
#maps,#tools-row,#community{position:relative}
#maps::after,#tools-row::after,#community::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse min(600px,48vw) 340px at calc(50% - min(520px,30vw)) 170px,var(--glow),transparent);
  -webkit-mask:linear-gradient(180deg,transparent,#000 110px,#000 calc(100% - 140px),transparent);mask:linear-gradient(180deg,transparent,#000 110px,#000 calc(100% - 140px),transparent)}
/* Homepage tool row: icon on top, title and one short line, so five cards sit evenly */
.tt-home a{flex-direction:column;gap:12px;padding:18px}
.tt-home a{min-width:0}
@media (min-width:1000px){.tt-home b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.tt-home small{margin-top:4px}
.tt-home a>span:last-child{min-width:0;width:100%}
/* One continuous layer of map lines behind every section below the hero, so they run across the section edges instead
   of starting and stopping. It sits above the section backgrounds and below the content, and fades in under the hero. */
.below{position:relative}
.below>section>.wrap{position:relative;z-index:2}
.below::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--topo-ink);
  -webkit-mask:url('/img/topo.webp') 0 0/1000px 1000px repeat,linear-gradient(90deg,#000 0,#000 6%,transparent 30%,transparent 70%,#000 94%,#000),linear-gradient(180deg,transparent 0,#000 260px,#000 calc(100% - 200px),transparent);-webkit-mask-composite:source-in,source-in;
  mask:url('/img/topo.webp') 0 0/1000px 1000px repeat,linear-gradient(90deg,#000 0,#000 6%,transparent 30%,transparent 70%,#000 94%,#000),linear-gradient(180deg,transparent 0,#000 260px,#000 calc(100% - 200px),transparent);mask-composite:intersect,intersect}
@media (max-width:1100px){.below::before{display:none}}
@media print{html::after{display:none}}
/* Other pages (2026-11-04): the same map lines in the side space of every page's main area, under the content.
   Skipped on the homepage (it has its own layer), the full-screen tools (map, planner), the 404 and staff. */
main{position:relative;isolation:isolate}
main::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--topo-ink);
  -webkit-mask:url('/img/topo.webp') 0 0/1000px 1000px repeat,linear-gradient(90deg,#000 0,#000 6%,transparent 30%,transparent 70%,#000 94%,#000),linear-gradient(180deg,transparent 0,#000 240px,#000 calc(100% - 260px),transparent);-webkit-mask-composite:source-in,source-in;mask:url('/img/topo.webp') 0 0/1000px 1000px repeat,linear-gradient(90deg,#000 0,#000 6%,transparent 30%,transparent 70%,#000 94%,#000),linear-gradient(180deg,transparent 0,#000 240px,#000 calc(100% - 260px),transparent);mask-composite:intersect,intersect}
main:has(#home)::before,main:has(#map-view)::before,main:has(#planner-view)::before,main:has(#nf-view)::before,main:has(.st-wrap)::before{display:none}
/* Pages without the lines also drop the isolation: it traps fixed overlays (staff drawer, map full screen) under the sticky header */
main:has(#home),main:has(#map-view),main:has(#planner-view),main:has(#nf-view),main:has(.st-wrap){isolation:auto}
@media (max-width:1100px){main::before{display:none}}
/* Page headers: the divider fades out at both ends instead of running edge to edge */
.phead{border-bottom:0;background-image:radial-gradient(700px 300px at 0% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);background-size:auto,100% 1px;background-position:0 0,0 100%;background-repeat:no-repeat}
/* Shop: views fade in when you switch, card photos ease in on hover, the old bundle price gets struck through */
.sh-view:not([hidden]){animation:shview .35s ease-out}
@keyframes shview{from{opacity:0;transform:translateY(8px)}}
.sh-card .sh-img{overflow:hidden}.sh-card .sh-img>img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}.sh-card:hover .sh-img>img{transform:scale(1.045)}
.sh-card:hover{box-shadow:0 16px 34px -18px rgba(0,0,0,.6)}
.sh-was{position:relative;text-decoration:none}.sh-was::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:currentColor;transform-origin:left;animation:strike .45s .6s cubic-bezier(.3,.7,.3,1) both}
@keyframes strike{from{transform:scaleX(0)}}
.sh-prev{transition:color .6s ease}
#v-done:not([hidden]) .sh-order{animation:ordpop .7s .15s cubic-bezier(.3,1.4,.5,1) both}
@keyframes ordpop{from{opacity:0;transform:scale(.94)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}#snow{display:none}}
/* polish pass 2 */
@media (min-width:901px) and (max-width:1080px){nav.main{gap:2px}nav.main a.l,nav.main .ndrop>button.l{padding:8px 7px;font-size:.86rem}nav.main a.l[aria-current="page"]::after{left:7px;right:7px}.iconbtn{margin:0 4px}nav.main .btn{padding:10px 14px}}
@media (max-width:560px){.ftile.ph{grid-column:1/-1}.ftile .fimg{width:calc(100% + 28px);margin:0 -14px 6px}.fgrid>.ftile:last-child:nth-child(even){grid-column:1/-1}}
.scard.lift .facts{margin-top:auto}.scard.lift .more,.scard.lift .actions{margin-top:0}
@media (min-width:1000px){.team .tgroup:last-child{grid-column:span 2}.team .tgroup:last-child ul{grid-template-columns:1fr 1fr}}
.notice{font-size:.9rem;border-bottom:1px solid var(--line);background:var(--surface);color:var(--text)}
.notice .wrap{display:flex;align-items:center;gap:10px;padding-block:9px}
.notice p{margin:0;flex:1;min-width:0}
.notice a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.notice .ic{flex:none}
.notice.info .ic{color:var(--accent)}
.notice.warn{background:#f6e7c8;color:#4a3410;border-color:#e0c690}.notice.warn .ic{color:#a86a12}
.notice.down{background:#b3261e;color:#fff;border-color:#8f1d17}
.notice .nx{flex:none;background:none;border:0;color:inherit;opacity:.7;font-size:1.3rem;line-height:1;padding:2px 6px;border-radius:4px}
.notice .nx:hover{opacity:1}
.gupd{margin:10px 0 0;font-size:.85rem;color:var(--muted)}
.notice.quiet{background:var(--surface);color:var(--muted)}.notice.quiet .ic{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#faq-list>.ggroup:first-child{margin-top:4px}
.gwrap{display:grid;grid-template-columns:minmax(0,780px) 230px;gap:56px;align-items:start}
.gtoc{position:sticky;top:96px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:.88rem}
.gtoc b{display:block;font:700 .72rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.gtoc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.gtoc a{display:block;padding:5px 8px;margin:0 -8px;border-radius:6px;color:var(--muted);text-decoration:none;line-height:1.35}
.gtoc a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.gtoc a.on{color:var(--accent);background:var(--accent-soft)}
@media (max-width:1000px){.gwrap{grid-template-columns:minmax(0,1fr)}.gtoc{position:static;order:-1;padding:12px 14px}.gtoc ol{grid-template-columns:1fr 1fr;gap:0 12px}.gtoc a.on{color:var(--muted);background:none}main:has(.vt-btns) .gtoc{display:none}}

/* Screenshots sit a touch darker and calmer so they belong to the page, and return to full colour when you point at them */
.scover img,.shot img{filter:saturate(.82) contrast(1.05) brightness(.93);transition:transform .5s ease,filter .35s ease}
a.scard:hover .scover img,.scover:hover img,.shot:hover img,.shot:focus-visible img{filter:none}
@media (prefers-reduced-motion:reduce){.scover img,.shot img{transition:none}}
/* Touch screens: copy buttons are a comfortable tap */
@media (hover:none){.copy{min-height:40px}}

/* Server pages: the server's own cover is the page header, with its own accent colour. Dark in both themes, like the home hero. */
.phead[data-srv]{position:relative;overflow:hidden;padding-block:84px 56px;margin-bottom:48px;border-bottom:0;background:#0e0e0f;background-image:none;color-scheme:dark;
  --bg:#0e0e0f;--bg2:#141416;--surface:rgba(25,25,27,.8);--line:#2c2c2f;--text:#ece9e2;--muted:#cfcbc3;--faint:#8e8a83;--accent:#e85a52;--accent-btn:#c4382f;--ok:#5fc489;color:var(--text)}
.phead[data-srv]::before{content:'';position:absolute;inset:0;background:var(--cover) var(--pos,70% 50%)/var(--size,cover) no-repeat;filter:var(--flt,saturate(.8) contrast(1.05) brightness(.8));
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.45) 38%,#000 78%);mask-image:linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.45) 38%,#000 78%);z-index:0}
.phead[data-srv]::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,15,.35),transparent 40%,#0e0e0f 100%);z-index:0}
.phead[data-srv] .wrap{position:relative;z-index:2}
.phead[data-srv] h1{text-shadow:0 2px 18px rgba(0,0,0,.6)}
.phead[data-srv] h1::after{content:'';display:block;width:72px;height:4px;border-radius:2px;background:var(--srv);margin-top:16px}
.phead[data-srv] .lede{text-shadow:0 1px 10px rgba(0,0,0,.7)}
.phead[data-srv] .crumbs a{color:#f08a83}
.phead[data-srv] canvas.wx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.7}
.phead[data-srv="chernarus"]{--cover:url('/img/srv-chernarus-wide.webp');--srv:#7fb46a}
.phead[data-srv="livonia"]{--cover:url('/img/srv-livonia-meadow-wide.webp');--srv:#d9a441;--pos:60% 52%}
.phead[data-srv="sakhal"]{--cover:url('/img/srv-sakhal-dusk-wide.webp');--srv:#8fd0f0;--pos:0% 64%;--size:135% auto;--flt:saturate(.95) contrast(1.05) brightness(1.05)}
.phead[data-srv]~.pbody .sbanner{display:none}
.phead[data-srv="chernarus"]~.pbody .meter i span.on{background:#7fb46a}.phead[data-srv="livonia"]~.pbody .meter i span.on{background:#d9a441}.phead[data-srv="sakhal"]~.pbody .meter i span.on{background:#8fd0f0}
@media (max-width:700px){.phead[data-srv]{padding-block:56px 36px;--size:cover;--pos:50% 60%}.phead[data-srv="sakhal"]{--size:cover;--pos:50% 60%}.phead[data-srv]::before{-webkit-mask-image:none;mask-image:none;opacity:.5}}
@media (prefers-reduced-motion:reduce){.phead[data-srv] canvas.wx{display:none}.keyart img{animation:none}}

/* Presses answer straight away: buttons, chips and cards dip slightly under the finger or cursor, and taps skip the old double-tap wait */
a,button,summary,label,input,select,[role="button"],[tabindex]{touch-action:manipulation}
.btn,.copy,.fchip,.iconbtn,.textbtn,.vt-pick,.vt-b,.lb-who{-webkit-tap-highlight-color:transparent}
.btn:active,.copy:active,.fchip:active,.iconbtn:active,.vt-b:active{transform:scale(.97);transition-duration:.05s}
a.scard:active,a.gcard:active,a.way:active,.tooltiles a:active,.sh-card:active{transform:scale(.99);transition-duration:.05s}
@media (prefers-reduced-motion:reduce){.btn:active,.copy:active,.fchip:active,.iconbtn:active,.vt-b:active,a.scard:active,a.gcard:active,a.way:active,.tooltiles a:active,.sh-card:active{transform:none}}

/* Server pages: the left column stacks the server card and the 24-hour chart, so it keeps pace with the long table on the right */
.srvleft{display:grid;gap:32px;min-width:0}
.srvleft .phist h2{font-size:1.5rem}
.phead[data-srv="chernarus"]~.pbody .phist-bars i{background:color-mix(in srgb,#7fb46a 75%,var(--surface))}.phead[data-srv="chernarus"]~.pbody .phist-bars span:hover i{background:#7fb46a}
.phead[data-srv="livonia"]~.pbody .phist-bars i{background:color-mix(in srgb,#d9a441 75%,var(--surface))}.phead[data-srv="livonia"]~.pbody .phist-bars span:hover i{background:#d9a441}
.phead[data-srv="sakhal"]~.pbody .phist-bars i{background:color-mix(in srgb,#8fd0f0 75%,var(--surface))}.phead[data-srv="sakhal"]~.pbody .phist-bars span:hover i{background:#8fd0f0}
/* Very wide monitors: the key art stays at a size where it's sharp, centred, and fades out at both sides */
@media (min-width:2601px){.hero::before{background:none}.keyart{width:2600px;max-width:2600px;margin-left:calc(50% - 1300px);max-height:640px}
  .keyart::after{background:linear-gradient(90deg,#0e0e0f 0,transparent 16%,transparent 84%,#0e0e0f 100%),linear-gradient(180deg,transparent 0,transparent 60%,#0e0e0f 100%)}}

/* Server pages: this season's top three on that server */
.srvtop h2{font-size:1.5rem;margin:0 0 12px}
.srvtop ol{list-style:none;margin:0 0 12px;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.srvtop li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--line)}.srvtop li:first-child{border-top:0}
.srvtop li i{font:900 1.3rem var(--head);font-style:normal;width:26px;color:var(--muted)}
.srvtop li:nth-child(1) i{color:#c8961c}.srvtop li:nth-child(2) i{color:#8a929c}.srvtop li:nth-child(3) i{color:#a8693a}
.srvtop li a{font-weight:600;color:var(--text);text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--text) 35%,transparent);overflow-wrap:anywhere}.srvtop li a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.srvtop li span{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.srvtop li span b{color:var(--text);font:800 1.15rem var(--head);margin-right:4px}
/* Chernarus: today's live PvP zones on a small map */
.pvpt{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:center;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.pvpt-map{position:relative;display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#141416;border:1px solid var(--line)}
.pvpt-map img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.6);transition:filter .3s}
.pvpt-map:hover img{filter:saturate(.7) brightness(.72)}
.pvpt-map svg{position:absolute;inset:0;width:100%;height:100%}
.pvpt-map polygon{fill:none;stroke:rgba(236,233,226,.4);stroke-width:36;stroke-dasharray:110 90;vector-effect:none}
.pvpt-map polygon.on{fill:rgba(232,90,82,.5);stroke:#ff8a80;stroke-width:60;stroke-dasharray:none;animation:pvptp 2.6s ease-in-out infinite}
.pvpt-map circle.on{fill:none;stroke:#ff8a80;stroke-width:44;opacity:.75;animation:pvptp 2.6s ease-in-out infinite}
@keyframes pvptp{50%{opacity:.45}}
.pvpt-t h2{margin:0 0 8px}.pvpt-s{margin:0 0 14px;color:var(--muted)}.pvpt-s b{color:var(--text)}.pvpt-s .now{color:var(--accent);font-weight:600}
.pvpt-l{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-height:34px}
.pvpt-l li{font-size:.84rem;padding:4px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--text)}
.pvpt-f{margin:0;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
@media (max-width:760px){.pvpt{grid-template-columns:1fr;padding:16px}.pvpt-map{max-width:420px}}