:root {
  /* "Infected" theme: night fog, blood-red safe room steel, bone-white type, survivor HUD colours */
  --bg: #0f110f;              /* night, with a little green fog in it */
  --bg2: #151714;
  --panel: #181a17;
  --panel2: #22251f;
  --line: #31352d;
  --text: #ebe5d5;            /* bone */
  --muted: #9a9b8e;           /* ash */
  --accent: #b3161e;          /* blood: buttons, active marks */
  --accent-rgb: 179, 22, 30;
  --accent2: #f07a62;         /* blood lit up: links and red text on dark */
  --rust: #d9452f;            /* loss, bans, errors, live */
  --rust-rgb: 217, 69, 47;
  --ink: #fff4ee;             /* text on blood */
  --green: #5fb84a;           /* HUD health green */
  --caution: #e8c33a;         /* HUD health yellow */
  --survivor: #4a8bd0;        /* versus scoreboard: survivors */
  --infected: #c8382c;        /* versus scoreboard: infected */
  --gold: #e2b93b;
  --steam: #1b2838;
  --discord: #5865f2;
  --radius: 10px;
  --head: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --scrawl: 'Permanent Marker', 'Comic Sans MS', cursive;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(900px 420px at 15% -120px, rgba(var(--accent-rgb), .07), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"), var(--bg);
  color: var(--text); font: 15px/1.55 var(--body); min-height: 100vh;
}
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #0d0f12; border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: .02em; line-height: 1.15; margin: 0 0 .6em; }
h2 { font-size: 20px; text-transform: uppercase; }
h3 { font-size: 16px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.pos { color: #51cf66; } .neg { color: #ff6b6b; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(11, 12, 14, .88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: center; gap: 20px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 20px var(--head); color: var(--text); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--accent); color: var(--ink); font-size: 18px; transform: skew(-8deg); }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { color: var(--muted); padding: 8px 12px; border-radius: 6px; font-weight: 500; }
.nav a:hover, .nav a.on { color: var(--text); background: var(--panel2); text-decoration: none; }
.nav a.on { box-shadow: inset 0 -2px 0 var(--accent); }
.nav .discord-link { color: #aab3ff; }
.me { display: flex; align-items: center; gap: 10px; }
.me form { margin: 0; }
.me-link { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; max-width: 180px; }
.me-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbtn { display: none; font-size: 22px; cursor: pointer; color: var(--text); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 9px 16px;
  font: 600 14px var(--body); cursor: pointer; color: #fff; background: var(--panel2); text-decoration: none !important; transition: filter .15s, transform .05s; }
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-danger { background: #8e3220; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-steam { background: linear-gradient(#2a475e, var(--steam)); border-color: #3d6c8d; }
.btn-discord { background: var(--discord); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-lg { padding: 13px 24px; font-size: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* layout */
main.wrap { padding-top: 24px; padding-bottom: 40px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.col-main, .col-side { display: grid; gap: 20px; min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; }
.grid .card { margin-bottom: 0; }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.page-title { font-size: 30px; text-transform: uppercase; margin-bottom: 12px; }
.foot { color: var(--muted); font-size: 12px; padding: 24px 16px 40px; border-top: 1px solid var(--line); }

/* flash */
.flash { border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; border: 1px solid; }
.flash-success { background: rgba(47, 158, 68, .12); border-color: rgba(47, 158, 68, .4); }
.flash-error { background: rgba(var(--rust-rgb), .12); border-color: rgba(var(--rust-rgb), .45); }

/* hero */
.hero { padding: 36px 32px; border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.18), transparent 55%), repeating-linear-gradient(-45deg, rgba(255,255,255,.015) 0 10px, transparent 10px 20px), var(--panel); }
.eyebrow { color: var(--accent2); text-transform: uppercase; letter-spacing: .15em; font: 600 12px var(--body); margin: 0 0 10px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); text-transform: uppercase; }
.lead { color: #c9c6c1; max-width: 620px; font-size: 16px; margin: 0 0 22px; }
.how { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 26px 0 0; color: var(--muted); }
.how b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel2); color: var(--text); margin-right: 6px; font-size: 12px; }

/* onboarding */
.steps { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 16px; }
.step { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
.step h3 { margin-bottom: 4px; }
.step p { margin: 0 0 8px; }
.step-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--panel2); font: 600 16px var(--head); }
.step.done .step-n { background: var(--green); }
.card-ban { border-color: rgba(var(--rust-rgb),.6); background: linear-gradient(rgba(var(--rust-rgb),.1), transparent), var(--panel); }

/* forms */
.form { display: grid; gap: 12px; }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.form-grid .span2 { grid-column: 1 / -1; }
label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 500; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 400; }
input, select, textarea { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font: 14px var(--body); width: 100%; }
input[type=checkbox] { width: auto; accent-color: var(--accent); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(var(--accent-rgb),.5); border-color: var(--accent); }
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; flex-wrap: wrap; }
.inline-form input, .inline-form select { width: auto; padding: 5px 8px; font-size: 13px; }
.inline-form label { display: inline-flex; align-items: center; gap: 6px; }
.toolbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input { flex: 1; min-width: 200px; } .toolbar select { width: auto; }

/* play panel */
.play { position: relative; overflow: hidden; min-height: 220px; }
.play-loading { color: var(--muted); }
.play h2 { font-size: 26px; }
.play-idle { display: grid; gap: 14px; justify-items: start; }
.find-btn { font: 700 22px var(--head); text-transform: uppercase; letter-spacing: .06em; padding: 18px 44px; border-radius: 10px; background: var(--accent);
  box-shadow: 0 8px 30px rgba(var(--accent-rgb),.35); }
.queue-live { display: grid; gap: 14px; }
.queue-timer { font: 700 48px var(--head); letter-spacing: .04em; }
.pulse { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--rust); margin-right: 8px; animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,79,.7); } 100% { box-shadow: 0 0 0 14px rgba(255,77,79,0); } }
.ready-pop { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 10px 0; }
.ready-pop h2 { font-size: 34px; color: #fff; }
.ready-btn { font: 700 26px var(--head); letter-spacing: .08em; padding: 18px 60px; background: var(--green); border-radius: 10px; box-shadow: 0 8px 30px rgba(47,158,68,.35); }
.ready-bar { width: 100%; max-width: 420px; height: 8px; border-radius: 4px; background: var(--bg2); overflow: hidden; }
.ready-bar > i { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
.ready-dots { display: flex; gap: 6px; }
.ready-dots i { width: 22px; height: 22px; border-radius: 4px; background: var(--panel2); border: 1px solid var(--line); }
.ready-dots i.on { background: var(--green); border-color: var(--green); }
.play.popping { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 40px rgba(47,158,68,.25); }
.match-live .connect { margin: 0; }
.connect { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--bg2); }
.connect code { font-size: 14px; padding: 8px 12px; word-break: break-all; }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.team { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.team.you { border-color: var(--accent); }
.team.team-won { border-color: var(--green); }
.team-h { display: flex; gap: 10px; align-items: baseline; }
.team-h h3 { margin: 0; text-transform: uppercase; }
.team-score { margin-left: auto; font: 700 26px var(--head); }
.team ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.team li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team li .num { margin-left: auto; }

/* misc components */
.av { border-radius: 6px; object-fit: cover; flex: none; background: var(--panel2); }
.av-fallback { display: inline-grid; place-items: center; font-weight: 700; color: var(--muted); }
.plink { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; min-width: 0; }
.plink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.rank { display: inline-block; padding: 2px 8px; border-radius: 4px; font: 600 12px var(--body); text-transform: uppercase; letter-spacing: .05em;
  color: var(--rc); border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); background: color-mix(in srgb, var(--rc) 12%, transparent); }
.rank-unranked { --rc: #8d939d; }
.rank-champion { color: #1a1406; border-color: #ffd43b; background: linear-gradient(135deg, #fff1a8, #ffd43b 55%, #f59f00); box-shadow: 0 0 12px rgba(255, 212, 59, .45); }
.penalty { color: var(--muted); font: 600 12px var(--body); font-variant-numeric: tabular-nums; }
.balance { display: inline-flex; gap: 6px; align-items: center; }
.balance.low { color: #f1d27a; }
.chapters td, .chapters th { text-align: center; }
.chapters td.w { color: #69db7c; font-weight: 600; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--panel2); border: 1px solid var(--line); }
.pill-live { background: rgba(var(--rust-rgb),.15); border-color: rgba(var(--rust-rgb),.5); color: #ef8a6f; }
.pill-win { background: rgba(47,158,68,.15); border-color: rgba(47,158,68,.5); color: #69db7c; }
.pill-loss { background: rgba(var(--rust-rgb),.12); border-color: rgba(var(--rust-rgb),.4); color: #ef8a6f; }
.pill-ban { background: #2e1510; border-color: #8e3220; color: #ef8a6f; }
.pill-muted { color: var(--muted); }
.count { background: var(--accent); color: var(--ink); border-radius: 999px; padding: 0 7px; font-size: 11px; margin-left: 4px; }

.stats-card { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.stat b { display: block; font: 700 26px var(--head); }
.stat span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.me-card { display: grid; gap: 8px; }
.me-head { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.kv { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 8px; }
.kv span { color: var(--muted); }
.toplist { margin: 0; padding: 0 0 0 22px; display: grid; gap: 8px; }
.toplist li { padding-left: 4px; } .toplist li::marker { color: var(--muted); font-size: 13px; }
.toplist li { display: list-item; }
.toplist .plink { vertical-align: middle; } .toplist .mmr { float: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.mlist { display: grid; }
.mrow { display: grid; grid-template-columns: 60px 1fr auto 80px; gap: 12px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--line); color: var(--text); }
.mrow:first-child { border-top: 0; }
.mrow:hover { background: var(--panel2); text-decoration: none; }
.mid { color: var(--muted); font-variant-numeric: tabular-nums; }
.score { font: 600 16px var(--head); }
.mago { color: var(--muted); font-size: 13px; text-align: right; }

.table-wrap { overflow-x: auto; }
.card.table-wrap { padding: 6px 8px; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.pager { display: flex; gap: 16px; justify-content: center; }

.profile { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.profile h1 { font-size: 32px; margin-bottom: 6px; }
.profile-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.profile-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; text-align: center; border-top: 1px solid var(--line); padding-top: 16px; }
.subnav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.subnav a { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a.on { color: var(--text); border-bottom-color: var(--accent); }
.subnav a:hover { text-decoration: none; color: var(--text); }
.app-row { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.app-row:first-child { border-top: 0; }
.app-who { display: flex; gap: 12px; min-width: 0; flex: 1; }
.app-note { background: var(--bg2); border-left: 3px solid var(--accent); padding: 8px 12px; margin: 8px 0 0; white-space: pre-wrap; border-radius: 0 6px 6px 0; }
.app-actions { display: grid; gap: 8px; justify-items: end; }
.key { word-break: break-all; }
.plain { list-style: none; padding: 0; display: grid; gap: 6px; }
.prose ol { padding-left: 20px; display: grid; gap: 6px; }
.prose details { border-top: 1px solid var(--line); padding: 12px 0; }
.prose details:first-child { border-top: 0; }
.prose summary { cursor: pointer; font-weight: 600; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .navbtn { display: block; margin-left: auto; }
  .nav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 16px; }
  #navtoggle:checked ~ .nav { display: flex; }
  .me-link span { display: none; }
  .profile-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .brand { font-size: 16px; }
  .me .btn-steam { padding: 6px 10px; font-size: 12px; }
  .teams { grid-template-columns: 1fr; }
  .hero { padding: 24px 18px; }
  .mrow { grid-template-columns: 48px 1fr auto; } .mago { display: none; }
  .find-btn { width: 100%; }
}
.card > .btn-row, .card > form.inline-form { margin: 8px 0 14px; }
.card h3 { margin-top: 6px; }

/* streams */
.nav-live { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--rust); color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.sec-title { font-size: 18px; margin: 8px 0 12px; }
.plat { display: inline-block; padding: 1px 7px; border-radius: 4px; font: 700 11px var(--body); text-transform: uppercase; letter-spacing: .05em; }
.plat-twitch { background: #9146ff; color: #fff; }
.plat-kick { background: #53fc18; color: #0b0c0e; }
.btn-twitch { background: #9146ff; }
.btn-kick { background: #53fc18; color: #0b0c0e; }
.live-dot { position: absolute; top: 10px; left: 10px; background: #e5484d; color: #fff; font: 700 11px var(--body); letter-spacing: .08em; padding: 2px 7px; border-radius: 4px; }
.live-dot.live-inline { position: static; display: inline-block; font-size: 10px; padding: 1px 6px; vertical-align: middle; text-decoration: none; }
.featured { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 24px; }
.player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); max-width: 100%; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.featured-info { display: grid; gap: 10px; align-content: start; justify-items: start; }
.featured-info h2 { margin: 0; font-size: 24px; }
.featured-info p { margin: 0; color: #cbc8c3; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.scard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; }
.sthumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #07080a; }
.sthumb img, .sthumb-empty { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viewers { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,.75); color: #fff; font-size: 12px; padding: 1px 7px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.sbody { padding: 12px 14px; display: grid; gap: 6px; min-width: 0; }
.srow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.sname { color: var(--text); font-weight: 600; }
.stitle { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mychans { display: grid; gap: 8px; }
.mychan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
.mychan .spacer { flex: 1; }
.chanlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.chan { display: flex; gap: 10px; align-items: center; min-width: 0; }
.chan-main { min-width: 0; display: grid; gap: 2px; }
.chan .inline-form { margin-left: auto; }
.livelist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.livelist li { display: grid; gap: 2px; }
.livelist a { color: var(--text); }
@media (max-width: 800px) { .featured { grid-template-columns: 1fr; } }
.me .btn { white-space: nowrap; }

/* custom maps */
.cmaps { display: grid; gap: 10px; }
.cmap { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.cmap[hidden] { display: none; }
.cmap-main { display: grid; gap: 4px; min-width: 0; flex: 1 1 300px; }
.cmap h3 { margin: 0; font-size: 18px; text-transform: uppercase; }
.cmap-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 13px; align-items: center; }
.cmap-meta code { font-size: 12px; }
.cmap-desc { margin: 2px 0 0; color: #cbc8c3; }
.cmap details summary { cursor: pointer; color: var(--muted); }
.cmap-actions { display: grid; gap: 6px; justify-items: end; }
.steps-plain { padding-left: 20px; margin: 0 0 10px; display: grid; gap: 8px; }
.steps-plain code { word-break: break-all; }
pre.small { white-space: pre-wrap; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 10px; max-height: 320px; overflow: auto; }
@media (max-width: 600px) { .cmap-actions { justify-items: stretch; width: 100%; } .cmap-actions .btn { width: 100%; } }

.nav a { padding: 8px 7px; white-space: nowrap; font-size: 14px; } .topbar-in { gap: 14px; } .me-reports { white-space: nowrap; }
@media (max-width: 1340px) and (min-width: 901px) { .navbtn { display: block; margin-left: auto; } .nav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 16px; z-index: 30; } #navtoggle:checked ~ .nav { display: flex; } .nav a { font-size: 15px; padding: 8px 10px; } }

/* ===== PUG pages (match page, replays, live, leaderboard, reports) ===== */
.me-reports { color: var(--muted); }
.match-title { font-size: clamp(30px, 5vw, 48px); margin-top: 0; }
.match-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 18px; }
.match-tops .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.match-tops .stat b { display: block; font: 700 22px var(--head); }
.match-tops .stat span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.match-tops .stat i { font-style: normal; text-transform: none; letter-spacing: 0; }
.scoreline { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; background: linear-gradient(90deg, rgba(90,169,255,.08), transparent 40%, transparent 60%, rgba(255,95,95,.08)), var(--panel); }
.scoreline ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.scoreline li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sl-team.right { text-align: right; } .sl-team.right li { justify-content: flex-end; }
.sl-score { display: flex; gap: 10px; align-items: baseline; font: 700 56px var(--head); }
.sl-score span { color: var(--muted); font-size: 32px; } .sl-score b.won { color: var(--gold); }
@media (max-width: 700px) { .scoreline { grid-template-columns: 1fr; text-align: center; } .sl-team.right { text-align: center; } .scoreline li, .sl-team.right li { justify-content: center; } .sl-score { justify-content: center; font-size: 44px; } }
.stat-wrap { max-width: 100%; }
.stat-table { font-size: 13px; }
.stat-table th, .stat-table td { padding: 6px 8px; white-space: nowrap; }
.stat-table th a { color: var(--muted); } .stat-table th a.on { color: var(--text); }
.stat-table tr.grp th { background: var(--bg2); color: var(--text); font: 600 12px var(--body); text-transform: uppercase; letter-spacing: .06em; }
.stat-table tr.tot td { color: var(--muted); font-weight: 600; }
.stat-table td:first-child, .stat-table th:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; }
.stat-table tr.provisional td { opacity: .7; }
.winchart { width: 100%; height: auto; display: block; margin: 8px 0; }
.wc-a { fill: rgba(90,169,255,.07); } .wc-b { fill: rgba(255,95,95,.07); }
.wc-mid { stroke: var(--line); stroke-dasharray: 4 4; } .wc-l { fill: var(--muted); font: 11px var(--body); }
.wc-line { fill: none; stroke: #e9e7e3; stroke-width: 2; } .wc-dot { fill: #e9e7e3; } .wc-swing { fill: var(--gold); }
.map-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.map-chip { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; display: grid; }
.map-chip span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .map-chip b { font: 600 18px var(--head); }
.map-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 10px 0; }
.map-row details { flex-basis: 100%; }
.chip { background: var(--bg2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 4px 10px; font: 500 12px var(--body); cursor: pointer; }
.chip.on { color: #fff; border-color: var(--accent); background: rgba(var(--accent-rgb),.15); }
.chip small { color: var(--muted); }
/* replay viewer */
.replay { display: grid; gap: 10px; margin: 6px 0 16px; }
.rp-halves, .rp-types, .rp-follow, .rp-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rp-filters { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.rp-main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 10px; }
.rp-stage { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #0d0f12; touch-action: none; }
.rp-stage canvas { display: block; cursor: grab; }
.rp-hud { position: absolute; top: 8px; left: 10px; right: 10px; display: flex; justify-content: space-between; font: 600 12px var(--body); letter-spacing: .04em; color: #cfd3da; pointer-events: none; text-shadow: 0 1px 2px #000; }
.rp-side { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--bg2); max-height: 560px; overflow: auto; }
.rp-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.rp-side h4 { margin: 8px 0 4px; font: 600 11px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.rp-list li { display: grid; grid-template-columns: 1fr auto; } .rp-list li small { grid-column: 1 / -1; color: var(--muted); } .rp-list li.dead { opacity: .5; }
.rp-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.rp-feed li { cursor: pointer; } .rp-feed li span { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.rp-key { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13px; }
.rp-key i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: middle; font-style: normal; }
.rp-key i.ring { border: 2px solid #5aa9ff; } .rp-key i.halo { border: 2px solid #fff; background: #5aa9ff; } .rp-key i.x { color: #5aa9ff; width: auto; height: auto; }
.rp-timeline { position: relative; padding-top: 14px; }
.rp-timeline input { width: 100%; accent-color: var(--accent); }
.rp-marks { position: absolute; top: 0; left: 8px; right: 8px; height: 12px; }
.mk { position: absolute; top: 0; width: 3px; height: 12px; border-radius: 2px; background: #888; cursor: pointer; transform: translateX(-1px); }
.mk-skeet, .mk-deadstop, .mk-level { background: #8ce99a; } .mk-clear, .mk-revive { background: #74c0fc; } .mk-incap, .mk-death { background: #ff6b6b; }
.mk-pin, .mk-pounce { background: #ffa94d; } .mk-boom { background: #a9e34b; } .mk-ff { background: #e599f7; } .mk-tank, .mk-rock { background: #ffd43b; }
.rp-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rp-clock { font: 600 14px var(--body); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .rp-main { grid-template-columns: 1fr; } .rp-side { max-height: 320px; } .rp-filters { grid-template-columns: 1fr; } }
/* live */
/* leaderboard */
.leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.leader { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: grid; gap: 2px; }
.leader b { font: 700 18px var(--head); text-transform: uppercase; } .leader em { font: 700 22px var(--head); font-style: normal; color: var(--gold); } .leader small { color: var(--muted); }
/* play: vote */
.vote-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; width: 100%; }
.vote-opt { display: grid; gap: 2px; padding: 14px; background: var(--bg2); border: 1px solid var(--line); text-align: center; }
.vote-opt b { font: 600 17px var(--head); text-transform: uppercase; } .vote-opt span { color: var(--muted); font-size: 12px; }
.vote-opt.on { border-color: var(--accent); background: rgba(var(--accent-rgb),.15); }
/* reports */
.thread { display: grid; gap: 8px; margin-bottom: 10px; }
.msg { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; } .msg.staff { border-color: rgba(var(--accent-rgb),.45); }
.msg p { margin: 4px 0 0; white-space: pre-wrap; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; } .toc a { color: var(--muted); }

/* branding */
.brand-img { width: 34px; height: 34px; border-radius: 50%; }
.hero-banner { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin-bottom: 18px; border: 1px solid var(--line); }

/* ---------- rank legend ---------- */
.rank-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rank-legend li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border-radius: 8px; }
.rank-legend li.is-you { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); }
.rank-legend li div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rank-legend li b { font: 700 14px var(--body); text-transform: uppercase; letter-spacing: .05em; }
.rank-legend li span:not(.you-tag) { font-size: 13px; color: var(--muted); }
.rank-legend .you-tag { display: inline-block; width: max-content; font: 700 10px var(--body); text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: var(--ink); border-radius: 3px; padding: 1px 5px; margin: 2px 0; }
.rank-legend p { margin: 10px 0 0; }
.rank-icon { flex: none; overflow: visible; }
.rank-icon-tank { filter: drop-shadow(0 0 6px rgba(255, 212, 59, .45)); }
.rank-icon-legend { filter: drop-shadow(0 0 6px rgba(111, 211, 245, .5)); }
.rank-icon-grandmaster { filter: drop-shadow(0 0 5px rgba(255, 122, 26, .4)); }
@media (prefers-reduced-motion: no-preference) {
  .rank-icon .ri-spin { animation: ri-spin 18s linear infinite; }
  .rank-icon .ri-flicker { transform-origin: 32px 31px; animation: ri-flicker 1.6s ease-in-out infinite alternate; }
  .rank-icon .ri-twinkle { animation: ri-twinkle 2.4s ease-in-out infinite; }
  .rank-icon .ri-d2 { animation-delay: 1.2s; }
  .rank-icon .ri-spin-rev { animation: ri-spin 24s linear infinite reverse; }
  .rank-icon .ri-orbit { animation: ri-spin 9s linear infinite; }
  .rank-icon .ri-shine { animation: ri-shine 3.6s ease-in-out infinite; }
  .rank-icon-legend { animation: ri-glow-legend 3.2s ease-in-out infinite; }
  .rank-icon-tank { animation: ri-glow 2.8s ease-in-out infinite; }
}
@keyframes ri-spin { to { transform: rotate(360deg); } }
@keyframes ri-shine { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(110px); } }
@keyframes ri-glow-legend { 0%, 100% { filter: drop-shadow(0 0 4px rgba(111, 211, 245, .5)); } 50% { filter: drop-shadow(0 0 10px rgba(255, 230, 128, .7)); } }
@keyframes ri-flicker { from { transform: scaleY(.92); opacity: .85; } to { transform: scaleY(1.06); opacity: 1; } }
@keyframes ri-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes ri-glow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 241, 168, .5)); } 50% { filter: drop-shadow(0 0 11px rgba(255, 212, 59, .9)); } }


/* ---------- Supporter: name styles + page ---------- */
.pname-c { color: var(--nc1); }
.pname-g { background: linear-gradient(90deg, var(--nc1), var(--nc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf-oswald { font-family: 'Oswald', sans-serif; }
.nf-bebas { font-family: 'Bebas Neue', sans-serif; }
.nf-blackops { font-family: 'Black Ops One', system-ui; }
.nf-creepster { font-family: 'Creepster', system-ui; }
.nf-specialelite { font-family: 'Special Elite', monospace; }
.nf-marker { font-family: 'Permanent Marker', cursive; }
.nf-bangers { font-family: 'Bangers', system-ui; }
.nf-orbitron { font-family: 'Orbitron', sans-serif; }
.nf-audiowide { font-family: 'Audiowide', system-ui; }
.nf-russo { font-family: 'Russo One', sans-serif; }
.nf-bebas, .nf-creepster, .nf-bangers { letter-spacing: .03em; font-size: 1.12em; }
.pill-supporter { background: rgba(244,127,255,.12); border-color: rgba(244,127,255,.45); color: #f6a8ff; text-decoration: none; }
.premium-hero { max-width: 760px; }
.premium-hero h1 { margin: 4px 0 6px; }
.perks { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 14px; }
.perks li { display: flex; gap: 14px; align-items: flex-start; }
.perks li div { display: flex; flex-direction: column; gap: 2px; }
.perks li span:not(.perk-ico) { color: var(--muted); font-size: 14px; }
.perk-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--line); font-size: 18px; }
.premium-status form { margin: 8px 0; }
.name-style { display: grid; gap: 14px; max-width: 560px; }
.name-style fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.ns-preview { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; }
.ns-sample { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; }
.ns-sample-sm { font-size: 14px; font-weight: 400; color: var(--muted); }
.ns-colors { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ns-colors input[type=color] { width: 46px; height: 34px; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; }
.check { display: inline-flex; align-items: center; gap: 6px; }
.vote-weight { color: #f6a8ff; font-weight: 600; margin: -4px 0 10px; }
.rank-legend li > svg.rank-icon[width="40"] { margin: 0 6px; }

/* =====================================================================
   SAFE ROOM look: concrete walls, hazard paint, tape and marker.
   (Kept as one layer at the end so the theme is easy to tweak.)
   ===================================================================== */
:root { --radius: 4px; --hazard: repeating-linear-gradient(-45deg, var(--accent) 0 10px, #15130f 10px 20px); }
body { font-size: 15.5px; }
h1, h2, h3, .page-title, .brand { font-family: var(--head); font-weight: 700; letter-spacing: .04em; }
h2 { font-size: 21px; }
.page-title { position: relative; display: inline-block; font-size: 38px; padding-bottom: 10px; margin-bottom: 18px; }
/* hand-drawn marker underline under page titles */
.page-title::after { content: ''; position: absolute; left: -4px; right: -10px; bottom: 0; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 30 2, 60 9, 95 5 S 160 2, 198 6' fill='none' stroke='%23f2c230' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.eyebrow { font-family: var(--scrawl); font-weight: 400; text-transform: none; letter-spacing: .02em; font-size: 16px; color: var(--accent); transform: rotate(-2deg); display: inline-block; }

/* top bar: dark steel with a hazard stripe along the bottom */
.topbar { background: rgba(18, 17, 16, .94); border-bottom: 0; box-shadow: 0 4px 0 -0px transparent; }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--hazard); opacity: .9; }
.brand { font-size: 22px; letter-spacing: .06em; }
.nav a { font: 600 13.5px var(--body); text-transform: uppercase; letter-spacing: .08em; border-radius: 2px; }
.nav a.on { background: rgba(var(--accent-rgb), .1); box-shadow: inset 0 -3px 0 var(--accent); }

/* buttons: painted metal */
.btn { border-radius: 3px; font-weight: 700; letter-spacing: .03em; }
.btn-primary { background: var(--accent); color: var(--ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.btn-primary:hover { filter: none; background: var(--hazard); background-size: 28px 28px; color: var(--ink); text-shadow: 0 0 6px var(--accent), 0 0 2px var(--accent); }
.btn-ghost { border-color: #4a453c; }
.find-btn { background: var(--accent); color: var(--ink); border-radius: 3px; font-family: var(--head); letter-spacing: .1em;
  border: 4px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 4px #15130f, 0 0 0 8px var(--accent), 0 10px 40px rgba(var(--accent-rgb), .25); }
.find-btn:hover { filter: brightness(1.06); }

/* cards: poured concrete slabs */
.card { border-radius: var(--radius); border-color: var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--panel);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 6px 18px rgba(0, 0, 0, .25); }
.card h2 { color: var(--text); }
/* taped notes: a strip of tape on the corner of a few side cards */
.me-card, .rank-legend, .premium-hero, .stats-card { position: relative; }
.me-card::before, .rank-legend::before, .premium-hero::before { content: ''; position: absolute; top: -9px; left: 22px; width: 74px; height: 20px;
  background: rgba(236, 222, 180, .22); border-left: 1px dashed rgba(255, 255, 255, .12); border-right: 1px dashed rgba(255, 255, 255, .12); transform: rotate(-4deg); }
.rank-legend::before { left: auto; right: 26px; transform: rotate(5deg); }
.stats-card .stat b { font-family: var(--head); font-size: 34px; color: var(--accent); }

/* tables: stencilled column heads */
.table th { font: 700 12px var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.table tbody tr:hover { background: rgba(var(--accent-rgb), .04); }

/* inputs */
input, select, textarea { border-radius: 3px; }

/* rank pill keeps its own colour but squarer */
.rank { border-radius: 2px; }

/* footer */
.foot { font-family: var(--body); border-top: 1px dashed var(--line); }
.foot::before { content: 'Stay together. Don\2019t leave anyone behind.'; display: block; font-family: var(--scrawl); font-size: 16px; color: var(--accent); margin-bottom: 6px; transform: rotate(-1deg); }

/* the hero on the signed-out home page */
.hero h1 { font-size: 46px; line-height: 1.05; }
.hero .lead { font-size: 17px; }
.how li b { background: var(--accent); color: var(--ink); border-radius: 2px; }
@media (max-width: 600px) {
  .brand { font-size: 17px; letter-spacing: .03em; gap: 8px; }
  .brand-img { width: 28px; height: 28px; }
  .topbar-in { gap: 10px; }
  .me-reports { display: none; }
  .me-link { max-width: 110px; }
  .page-title { font-size: 30px; }
  .hero h1 { font-size: 32px; }
}

/* ---------- header: Play button + "More" menu ---------- */
.nav a { letter-spacing: .05em; padding: 8px 9px; }
.nav-more { position: relative; }
.nav-more > summary { list-style: none; cursor: pointer; color: var(--muted); padding: 8px 9px; font: 600 13.5px var(--body); text-transform: uppercase; letter-spacing: .05em; border-radius: 2px; white-space: nowrap; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: ' ▾'; font-size: 11px; }
.nav-more > summary:hover, .nav-more[open] > summary, .nav-more.on > summary { color: var(--text); background: var(--panel2); }
.nav-more.on > summary { box-shadow: inset 0 -3px 0 var(--accent); }
.nav-more-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px; display: grid; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); z-index: 40; }
.nav-more-menu a { padding: 9px 10px; }
.nav-out { display: none; }
.me-out { margin: 0; }
.play-top { flex: none; background: var(--accent); color: var(--ink); font: 700 15px var(--head); letter-spacing: .1em; text-transform: uppercase; padding: 8px 16px; border-radius: 3px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px rgba(var(--accent-rgb), .25); }
.play-top:hover { filter: none; background: var(--hazard); color: var(--ink); text-shadow: 0 0 6px var(--accent), 0 0 2px var(--accent); }
.play-top .play-ico { font-size: 12px; }
.play-top.st-queue { background: var(--panel2); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.play-top.st-ready { background: var(--rust); color: #fff; animation: play-pulse 1s ease-in-out infinite; }
.play-top.st-match { background: #2f9e44; color: #fff; }
@keyframes play-pulse { 50% { box-shadow: 0 0 0 6px rgba(var(--rust-rgb), .35); } }
@media (max-width: 1340px) {
  .nav-more { position: static; }
  .nav-more > summary { display: none; }
  .nav-more-menu { position: static; display: contents; }
  .nav-out { display: block; margin-top: 6px; }
  .play-top { order: 2; }
  .navbtn { order: 3; margin-left: 0 !important; }
  .me { order: 4; }
  .topbar-in { justify-content: space-between; }
  .brand { margin-right: auto; }
}
@media (max-width: 600px) {
  .me-out { display: none; }
  .me-link span { display: none; }
  .play-top { padding: 7px 12px; font-size: 14px; }
}
.topbar-in { gap: 12px; }
.nav { gap: 2px; }
.nav a, .nav-more > summary { padding: 8px 8px; }
.navbtn { align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; line-height: 1; }
.navbtn-txt { font: 600 12px var(--body); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 1340px) { .navbtn { display: inline-flex !important; } }
@media (min-width: 1341px) { .navbtn { display: none !important; } }
@media (max-width: 420px) { .navbtn-txt { display: none; } }


/* =====================================================================
   INFECTED look (overrides the Safe Room layer above).
   Night fog, blood-red steel, bone type, survivor graffiti, HUD colours.
   ===================================================================== */
:root { --radius: 3px;
  --rough: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 0 0 0 7.3'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23f)'/%3E%3C/svg%3E");
  --drip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='64' viewBox='0 0 900 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234a0306'/%3E%3Cstop offset='.25' stop-color='%237d0a10'/%3E%3Cstop offset='1' stop-color='%23a3121a'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8a8a' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%23ff9c9c' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23ffd0d0' stop-opacity='.55'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-5%25' y='-20%25' width='110%25' height='150%25'%3E%3CfeDropShadow dx='0' dy='1.2' stdDeviation='.8' flood-color='%23000' flood-opacity='.55'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23s)'%3E%3Cpath d='M0 0H900V6.20L894.0 5.63L888.0 5.71L882.0 6.79C882.2 7.74 879.2 9.74 879.2 12.24C879.0 17.34 877.0 22.54 877.0 28.22C879.1 31.03 879.1 38.05 875.0 38.25C871.0 38.05 871.0 31.03 873.1 28.22C873.1 22.54 873.0 17.34 872.8 12.24C872.8 9.74 869.8 7.74 867.8 9.30L861.8 9.29L855.8 9.41L849.8 10.11C845.9 10.65 842.9 12.65 842.9 15.15C842.8 13.25 842.5 14.45 842.5 12.57C843.1 14.71 843.1 20.06 840.0 20.21C836.9 20.06 836.9 14.71 837.5 12.57C837.5 14.45 837.2 13.25 837.1 15.15C837.1 12.65 834.1 10.65 832.1 10.22L826.1 8.92C822.4 7.52 819.4 9.52 819.4 12.02C819.2 10.12 818.9 11.32 818.9 8.65C819.6 11.15 819.6 17.42 816.0 17.60C812.4 17.42 812.4 11.15 813.1 8.65C813.1 11.32 812.8 10.12 812.6 12.02C812.6 9.52 809.6 7.52 807.6 8.11L801.6 7.56L795.6 6.60L789.6 6.06L783.6 6.47L777.6 7.43L771.6 8.00L765.6 7.71L759.6 7.03L753.6 6.74L747.6 7.01L741.6 7.16L735.6 6.48C732.7 4.18 729.7 6.18 729.7 8.68C729.6 6.78 729.5 7.98 729.5 7.99C729.8 9.25 729.8 12.39 728.0 12.48C726.2 12.39 726.2 9.25 726.5 7.99C726.5 7.98 726.4 6.78 726.3 8.68C726.3 6.18 723.3 4.18 721.3 3.57L715.3 3.56L709.3 3.99L703.3 4.06L697.3 3.67L691.3 3.50C690.8 4.01 687.8 6.01 687.8 8.51C687.6 10.11 685.3 13.31 685.3 13.46C687.6 16.75 687.6 24.97 682.9 25.21C678.2 24.97 678.2 16.75 680.6 13.46C680.6 13.31 680.4 10.11 680.2 8.51C680.2 6.01 677.2 4.01 675.2 6.63L669.2 7.33L663.2 7.23L657.2 7.04C653.7 7.30 650.7 9.30 650.7 11.80C650.6 12.00 650.3 14.40 650.3 14.70C651.4 17.08 651.4 23.03 648.0 23.20C644.6 23.03 644.6 17.08 645.7 14.70C645.7 14.40 645.4 12.00 645.3 11.80C645.3 9.30 642.3 7.30 640.3 8.43L634.3 7.97L628.3 6.99C625.1 5.94 622.1 7.94 622.1 10.44C622.0 12.04 621.7 15.24 621.7 18.58C623.0 20.38 623.0 24.89 620.4 25.02C617.8 24.89 617.8 20.38 619.1 18.58C619.1 15.24 618.0 12.04 617.9 10.44C617.9 7.94 614.9 5.94 612.9 7.26L606.9 8.05L600.9 8.24C599.1 7.56 596.1 9.56 596.1 12.06C595.9 22.06 593.9 30.06 593.9 40.38C596.5 43.96 596.5 52.93 591.4 53.19C586.2 52.93 586.2 43.96 588.8 40.38C588.8 30.06 588.1 22.06 587.9 12.06C587.9 9.56 584.9 7.56 582.9 9.29L576.9 10.53C574.3 10.43 571.3 12.43 571.3 14.93C571.1 16.53 571.0 19.73 571.0 20.82C573.0 23.67 573.0 30.80 568.9 31.01C564.9 30.80 564.9 23.67 566.9 20.82C566.9 19.73 564.9 16.53 564.7 14.93C564.7 12.43 561.7 10.43 559.7 9.80L553.7 9.23L547.7 9.21C547.0 8.44 544.0 10.44 544.0 12.94C543.8 11.04 543.4 12.24 543.4 8.62C544.2 11.57 544.2 18.94 540.0 19.15C535.8 18.94 535.8 11.57 536.6 8.62C536.6 12.24 536.2 11.04 536.0 12.94C536.0 10.44 533.0 8.44 531.0 7.07L525.0 5.73L519.0 5.26L513.0 5.66C509.8 5.62 506.8 7.62 506.8 10.12C506.7 7.52 506.4 8.32 506.4 5.65C507.0 7.74 507.0 12.96 504.0 13.10C501.0 12.96 501.0 7.74 501.6 5.65C501.6 8.32 501.3 7.52 501.2 10.12C501.2 7.62 498.2 5.62 496.2 5.55L490.2 5.30L484.2 5.83C483.4 6.51 480.4 8.51 480.4 11.01C480.1 12.61 477.7 15.81 477.7 14.84C480.5 18.65 480.5 28.19 475.0 28.46C469.6 28.19 469.6 18.65 472.3 14.84C472.3 15.81 471.9 12.61 471.6 11.01C471.6 8.51 468.6 6.51 466.6 6.66L460.6 5.61L454.6 4.91L448.6 4.92L442.6 5.11L436.6 4.76L430.6 3.86C430.6 2.69 427.6 4.69 427.6 7.19C427.4 7.39 427.1 9.79 427.1 8.41C428.5 11.57 428.5 19.49 424.0 19.72C419.5 19.49 419.5 11.57 420.9 8.41C420.9 9.79 420.6 7.39 420.4 7.19C420.4 4.69 417.4 2.69 415.4 4.15L409.4 5.46L403.4 6.31L397.4 6.52L391.4 6.74L385.4 7.61L379.4 8.91L373.4 9.77L367.4 9.60L361.4 8.77L355.4 8.17L349.4 8.29L343.4 8.68L337.4 8.57C334.6 6.91 331.6 8.91 331.6 11.41C331.4 11.61 331.1 14.01 331.1 12.63C332.5 15.79 332.5 23.71 328.0 23.94C323.5 23.71 323.5 15.79 324.9 12.63C324.9 14.01 324.6 11.61 324.4 11.41C324.4 8.91 321.4 6.91 319.4 7.44L313.4 8.47L307.4 9.46L301.4 9.66L295.4 9.26L289.4 9.02L283.4 9.36L277.4 9.82L271.4 9.54L265.4 8.28L259.4 6.73L253.4 5.80L247.4 5.63L241.4 5.58L235.4 4.99L229.4 4.05L223.4 3.59L217.4 4.14C214.4 5.29 211.4 7.29 211.4 9.79C211.2 16.99 209.8 23.39 209.8 31.38C212.0 34.37 212.0 41.85 207.7 42.07C203.5 41.85 203.5 34.37 205.6 31.38C205.6 23.39 204.8 16.99 204.6 9.79C204.6 7.29 201.6 5.29 199.6 5.98L193.6 5.56L187.6 5.56L181.6 6.14L175.6 6.64L169.6 6.33C169.6 4.88 166.6 6.88 166.6 9.38C166.5 16.58 166.1 22.98 166.1 32.47C167.7 34.76 167.7 40.49 164.5 40.65C161.2 40.49 161.2 34.76 162.8 32.47C162.8 22.98 161.5 16.58 161.4 9.38C161.4 6.88 158.4 4.88 156.4 4.33L150.4 4.52L144.4 5.27L138.4 5.78L132.4 5.73L126.4 5.68L120.4 6.40C118.6 8.04 115.6 10.04 115.6 12.54C115.4 25.34 114.0 34.94 114.0 49.83C116.3 52.96 116.3 60.80 111.8 61.02C107.3 60.80 107.3 52.96 109.6 49.83C109.6 34.94 108.6 25.34 108.4 12.54C108.4 10.04 105.4 8.04 103.4 9.92L97.4 9.80L91.4 9.48L85.4 9.67L79.4 10.19L73.4 10.27L67.4 9.44C64.9 7.39 61.9 9.39 61.9 11.89C61.8 12.09 61.6 14.49 61.6 16.29C62.4 17.97 62.4 22.17 60.0 22.29C57.6 22.17 57.6 17.97 58.4 16.29C58.4 14.49 58.2 12.09 58.1 11.89C58.1 9.39 55.1 7.39 53.1 7.32L47.1 7.72L41.1 8.18C36.6 7.26 33.6 9.26 33.6 11.76C33.6 9.16 33.4 9.96 33.4 9.18C33.7 10.39 33.7 13.40 32.0 13.48C30.3 13.40 30.3 10.39 30.6 9.18C30.6 9.96 30.4 9.16 30.4 11.76C30.4 9.26 27.4 7.26 25.4 7.31L19.4 7.66L13.4 8.59L7.4 9.22L1.4 8.87L0 8.66Z' fill='url(%23g)'/%3E%3Cellipse cx='424.0' cy='30.2' rx='2.88' ry='3.84' fill='url(%23g)'/%3E%3Cellipse cx='504.0' cy='23.7' rx='2.43' ry='3.24' fill='url(%23g)'/%3E%3C/g%3E%3Cpath d='M874.7 12.2Q874.2 23.8 873.6 36.2' fill='none' stroke='url(%23h)' stroke-width='1.16' stroke-linecap='round'/%3E%3Cpath d='M682.5 8.5Q682.0 14.1 681.3 22.8' fill='none' stroke='url(%23h)' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M646.9 11.8Q646.9 15.0 646.8 21.4' fill='none' stroke='url(%23h)' stroke-width='0.98' stroke-linecap='round'/%3E%3Cpath d='M619.2 10.4Q619.4 16.0 619.5 23.7' fill='none' stroke='url(%23h)' stroke-width='0.80' stroke-linecap='round'/%3E%3Cpath d='M590.4 12.1Q590.0 32.1 589.6 50.5' fill='none' stroke='url(%23h)' stroke-width='1.48' stroke-linecap='round'/%3E%3Cpath d='M566.7 14.9Q567.2 20.5 567.5 28.9' fill='none' stroke='url(%23h)' stroke-width='1.17' stroke-linecap='round'/%3E%3Cpath d='M474.3 11.0Q473.8 16.6 473.1 25.6' fill='none' stroke='url(%23h)' stroke-width='1.57' stroke-linecap='round'/%3E%3Cpath d='M422.6 7.2Q422.6 10.4 422.4 17.4' fill='none' stroke='url(%23h)' stroke-width='1.30' stroke-linecap='round'/%3E%3Cpath d='M326.6 11.4Q326.6 14.6 326.4 21.6' fill='none' stroke='url(%23h)' stroke-width='1.30' stroke-linecap='round'/%3E%3Cpath d='M206.6 9.8Q206.5 25.0 206.2 39.8' fill='none' stroke='url(%23h)' stroke-width='1.23' stroke-linecap='round'/%3E%3Cpath d='M163.0 9.4Q163.2 24.6 163.3 38.9' fill='none' stroke='url(%23h)' stroke-width='0.94' stroke-linecap='round'/%3E%3Cpath d='M110.6 12.5Q110.5 37.3 110.2 58.7' fill='none' stroke='url(%23h)' stroke-width='1.29' stroke-linecap='round'/%3E%3Cpath d='M59.2 11.9Q59.2 15.1 59.2 21.0' fill='none' stroke='url(%23h)' stroke-width='0.80' stroke-linecap='round'/%3E%3Cpath d='M0 1.2H900' stroke='%23c41a22' stroke-opacity='.35' stroke-width='.8'/%3E%3C/svg%3E");
}
body {
  background:
    radial-gradient(1100px 520px at 50% -220px, rgba(150, 170, 140, .10), transparent 70%),
    radial-gradient(900px 600px at 100% 110%, rgba(var(--accent-rgb), .08), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--bg);
  background-attachment: fixed, fixed, scroll, scroll;
}
a { color: var(--accent2); }
h1, h2, h3, .page-title, .brand { font-family: var(--head); font-weight: 600; letter-spacing: .02em; }
h2 { font-size: 22px; letter-spacing: .03em; }
.page-title { font-size: 44px; text-transform: uppercase; line-height: 1; padding-bottom: 12px;
  -webkit-mask-image: var(--rough); mask-image: var(--rough); }
.page-title::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 30 2, 60 9, 95 5 S 160 2, 198 6' fill='none' stroke='%23b3161e' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.eyebrow { color: var(--accent2); }

/* top bar: blood runs off the bottom edge */
.topbar { background: rgba(13, 14, 12, .95); }
.topbar::after { bottom: -63px; height: 64px; background: var(--drip) repeat-x 0 0 / 900px 64px; opacity: 1; pointer-events: none; z-index: -1; }
.brand { font-size: 23px; letter-spacing: .04em; font-weight: 700; }
.nav a, .nav-more > summary { font: 500 15px var(--head); letter-spacing: .06em; }
.nav a.on, .nav-more.on > summary { background: rgba(var(--accent-rgb), .14); box-shadow: inset 0 -3px 0 var(--accent); }

/* buttons: painted steel, like the safe room door */
.btn-primary, .find-btn, .play-top, .how li b {
  background: linear-gradient(180deg, #c81d25, #95121a); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -3px 0 rgba(0, 0, 0, .35); text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.btn-primary:hover, .play-top:hover { background: linear-gradient(180deg, #dc2a31, #a8141d); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.find-btn { box-shadow: 0 0 0 4px #120d0c, 0 0 0 7px #95121a, 0 12px 40px rgba(var(--accent-rgb), .35), inset 0 -4px 0 rgba(0, 0, 0, .35); font-weight: 700; }
.play-top { font: 600 16px var(--head); letter-spacing: .12em; border: 1px solid #5e0b0f; }
.play-top.st-queue { background: var(--panel2); color: var(--caution); box-shadow: inset 0 0 0 2px var(--caution); text-shadow: none; }
.play-top.st-ready { background: var(--rust); color: #fff; }
.play-top.st-match { background: linear-gradient(180deg, #67c451, #3f8f30); color: #fff; }
.btn:focus-visible, .play-top:focus-visible, .nav a:focus-visible { outline: 2px solid var(--caution); outline-offset: 2px; }

/* cards: dark plates; no tape this time */
.me-card::before, .rank-legend::before, .premium-hero::before { content: none; }
.card { background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 30%), var(--panel); border-color: var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .35); }
.card h2 { font-weight: 600; }
.stats-card .stat b { color: var(--text); font-weight: 600; font-size: 38px; }
.stats-card .stat:first-child b { color: var(--caution); }
.stats-card .stat:nth-child(2) b { color: var(--green); }
.table tbody tr:hover { background: rgba(var(--accent-rgb), .06); }

/* signed-out hero: a campaign poster */
.hero { position: relative; overflow: hidden; padding: 0 0 30px; border: 1px solid #2a2d27;
  background: radial-gradient(700px 300px at 0% 100%, rgba(var(--accent-rgb), .22), transparent 70%), linear-gradient(180deg, #121411, #0d0e0c); }
.hero > :not(.hero-banner) { margin-left: 32px; margin-right: 32px; }
.hero-banner { border-radius: 0; border: 0; border-bottom: 1px solid #2a2d27; margin-bottom: 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.hero h1 { font-size: clamp(38px, 6.4vw, 70px); font-weight: 700; line-height: .95; letter-spacing: .01em; margin-bottom: 18px;
  -webkit-mask-image: var(--rough); mask-image: var(--rough); text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.hero .eyebrow { font-size: 19px; margin-bottom: 8px; }
.hero .lead { color: #c7c3b6; }
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.spray { display: inline-flex; align-items: center; gap: 6px; color: #d23a30; font: 22px var(--scrawl); transform: rotate(-4deg); }
.spray svg { width: 64px; height: 30px; }
.how li b { width: 24px; height: 24px; border-radius: 2px; font-family: var(--head); }

/* survivor HUD: rating bar on your card */
.hud { display: grid; gap: 5px; }
.hud-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.hud-top b { font: 600 15px var(--head); color: var(--text); letter-spacing: .03em; }
.hud-bar { height: 10px; background: #0b0c0a; border: 1px solid #3a3e35; border-radius: 1px; padding: 1px; }
.hud-bar i { display: block; height: 100%; background: linear-gradient(180deg, #78d35f, #4a9a38); box-shadow: 0 0 8px rgba(95, 184, 74, .45); }
.hud-bar.mid i { background: linear-gradient(180deg, #f1d24e, #c9a227); box-shadow: 0 0 8px rgba(232, 195, 58, .4); }
.hud-bar.low i { background: linear-gradient(180deg, #e2553f, #a8261c); box-shadow: 0 0 8px rgba(217, 69, 47, .45); }

/* teams: the versus scoreboard colours */
.teams > .team:first-child { border-top: 3px solid var(--survivor); }
.teams > .team:nth-child(2) { border-top: 3px solid var(--infected); }
.teams > .team.you { border-color: var(--line); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.teams > .team.you:first-child { border-top-color: var(--survivor); }
.teams > .team.you:nth-child(2) { border-top-color: var(--infected); }
.team-h h3 { font-weight: 600; letter-spacing: .05em; }

/* footer graffiti */
.foot { border-top: 1px solid var(--line); }
.foot::before { color: #c9382e; }

@media (max-width: 600px) {
  .hero > :not(.hero-banner) { margin-left: 18px; margin-right: 18px; }
  .page-title { font-size: 34px; }
  .spray { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .play-top.st-ready { animation: none; } }

@media (max-width: 600px) { .hide-sm { display: none; } .me .btn-steam { padding: 7px 10px; } }
@media (max-width: 440px) { .brand-txt { display: none; } }
.eyebrow { display: table; }

/* ---------- scrims ---------- */
.pill-scrim { background: rgba(74, 139, 208, .16); color: #9cc3ef; border: 1px solid rgba(74, 139, 208, .45); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; }
.scrim-start { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.scrim-start .card { margin: 0; }
.scrim-form { display: grid; gap: 12px; }
.scrim-form label { display: grid; gap: 6px; font-weight: 600; font-size: 13px; color: var(--muted); }
.scrim-form .btn { justify-self: start; }
.code-input { text-transform: uppercase; letter-spacing: .3em; font: 600 20px var(--head); }
.invite { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; background: var(--bg2); border: 1px dashed #4a4e43; border-radius: var(--radius); }
.invite > div:first-child { display: grid; gap: 2px; }
.invite .code { font: 700 30px var(--head); letter-spacing: .28em; color: var(--text); background: none; border: 0; padding: 0; }
.slots { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--line); border-top: 3px solid var(--survivor); border-radius: var(--radius); min-height: 66px; }
.slot > div { flex: 1; min-width: 0; display: grid; gap: 3px; }
.slot-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.slot-name a { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-name .pill { flex: none; font-size: 11px; padding: 1px 7px; }
.slot form { margin: 0; }
.slot-open { justify-content: center; color: var(--muted); border-style: dashed; border-top: 1px dashed var(--line); font-family: var(--scrawl); font-size: 15px; }
.scrim-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px; border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--line); }
.scrim-status form { margin: 0; }
.scrim-status.searching { border-color: rgba(232, 195, 58, .5); }
.scrim-status.searching b { color: var(--caution); }
.scrim-status.ready { border-color: var(--rust); box-shadow: 0 0 0 1px var(--rust); }
.scrim-status.on { border-color: rgba(95, 184, 74, .55); }
.scrim-status .find-btn { font-size: 20px; padding: 12px 28px; }
.scrim-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.scrim-foot form { margin: 0; }
.scrim-foot .inline-form input { width: 190px; }
@media (max-width: 700px) { .scrim-start, .slots { grid-template-columns: 1fr; } }

/* ---------- ranked party (play card) ---------- */
.party { width: 100%; max-width: 620px; text-align: left; margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); display: grid; gap: 12px; }
.party-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.party-h h3 { margin: 0; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.party-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.party-join { display: flex; gap: 6px; margin: 0; }
.party-join input { width: 150px; text-transform: uppercase; letter-spacing: .2em; font: 600 15px var(--head); }
.party-join input::placeholder { letter-spacing: .02em; text-transform: none; font-family: var(--body); font-weight: 400; }
.party-code { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; background: var(--bg2); border: 1px dashed #4a4e43; border-radius: var(--radius); }
.party-code code { font: 700 24px var(--head); letter-spacing: .26em; background: none; border: 0; padding: 0; color: var(--text); }
.party-code .btn { margin-left: auto; }
.party-members { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.party-members li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--survivor); border-radius: var(--radius); }
.party-members li .btn { margin-left: auto; }
.party-members li.open { color: var(--muted); border-style: dashed; border-left: 1px dashed var(--line); font-size: 13.5px; }
.party > .btn { justify-self: start; }
.party-q { margin: 0 0 6px; }

/* ---------- play card: Solo / With friends / Scrim side by side ---------- */
.play-idle { justify-items: stretch; }
.play-head h2 { margin-bottom: 4px; }
.play-head p { margin: 0; }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.mode { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; padding: 16px; background: var(--bg2); border: 1px solid var(--line); border-top: 3px solid #3a3e35; border-radius: var(--radius); min-width: 0; }
.mode h3 { margin: 0; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; }
.mode h3 .small { font-family: var(--body); text-transform: none; letter-spacing: 0; white-space: nowrap; flex: none; }
.mode-sub { margin: 0; color: var(--muted); font-size: 13.5px; min-height: 2.8em; }
.mode-solo { border-top-color: var(--accent); }
.mode-friends { border-top-color: var(--survivor); }
.mode-scrim { border-top-color: var(--caution); }
.mode.on { background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 50%), var(--bg2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.mode .find-btn { width: 100%; font-size: 20px; padding: 14px 10px; }
.mode .btn-primary { width: 100%; }
.mode > .btn-ghost.btn-sm { justify-self: start; }
.mode-or { margin: 2px 0 -4px; font-size: 12.5px; color: var(--muted); }
.mode-note { margin: 0; font-size: 13px; color: var(--muted); padding: 10px; border: 1px dashed var(--line); border-radius: var(--radius); }
.mode-status { margin: 0; font-weight: 600; }
.mode-status.searching { color: var(--caution); display: flex; align-items: center; gap: 8px; }
.mode-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mode .party-join { width: 100%; }
.mode .party-join input { flex: 1; min-width: 0; width: auto; }
.mode .party-code { gap: 4px 10px; }
.mode .party-code code { font-size: 20px; letter-spacing: .18em; }
.mode .party-code .btn { margin-left: 0; width: 100%; }
.mode .party-members li { padding: 6px 8px; font-size: 13.5px; gap: 6px; }
.mode .party-members li .mname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mode .party-members li .rank { font-size: 10px; }
.mode .party-members li .btn { margin-left: auto; padding: 3px 8px; font-size: 12px; }
@media (max-width: 1100px) and (min-width: 901px) { .modes { grid-template-columns: 1fr 1fr; } .mode-scrim { grid-column: 1 / -1; } }
@media (max-width: 760px) { .modes { grid-template-columns: 1fr; } .mode-sub { min-height: 0; } }

/* ---------- /verify ---------- */
.verify-status { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg2); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.verify-status.wait b { color: var(--caution); }
.verify-status.ok { border-color: rgba(95, 184, 74, .55); }
.verify-status.ok b { color: var(--green); }
.verify-status.review { border-color: rgba(232, 195, 58, .5); }
.verify-status.no { border-color: var(--rust); }
.verify-servers { display: grid; gap: 8px; margin-top: 10px; }
.vs { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.vs > div { display: grid; gap: 4px; min-width: 0; }
.vs code { overflow-wrap: anywhere; }
.perf { font: 600 11px var(--body); margin-left: 3px; opacity: .85; }

/* ---------- help center (/help) ---------- */
.hx-search { display: flex; align-items: center; gap: 12px; padding: 12px 14px; position: sticky; top: 64px; z-index: 5; }
.hx-search input { flex: 1; min-width: 0; background: #0d0f12; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: 500 16px var(--body); padding: 11px 14px; }
.hx-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.hx-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.hx-index { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow: auto; padding: 14px 16px; }
.hx-index-h { font: 600 13px var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; cursor: pointer; }
@media (min-width: 901px) { .hx-index-h { pointer-events: none; list-style: none; } .hx-index-h::-webkit-details-marker { display: none; } }
.hx-index:not([open]) .hx-index-h { margin: 0; }
.hx-sec { border-top: 1px solid var(--line); padding: 8px 0; }
.hx-sec:first-of-type { border-top: 0; }
.hx-sec-h { display: flex; align-items: center; gap: 8px; color: var(--text); font: 600 15px var(--head); letter-spacing: .03em; text-transform: uppercase; }
.hx-sec-h .muted { margin-left: auto; font-family: var(--body); }
.hx-idx { margin: 6px 0 2px; padding-left: 30px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.hx-idx li { margin: 2px 0; }
.hx-idx li::marker { color: var(--accent2); font-variant-numeric: tabular-nums; }
.hx-idx a { color: var(--muted); }
.hx-idx a:hover { color: var(--text); }
.hx-ico { width: 22px; text-align: center; flex: none; }
.hx-group { margin-bottom: 26px; scroll-margin-top: 140px; }
.hx-group-h { display: flex; align-items: center; gap: 10px; font: 700 22px var(--head); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); }
.hx-q { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; scroll-margin-top: 140px; }
.hx-q[open] { border-color: #4a4f43; }
.hx-q.hx-hit { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2); }
.hx-q summary { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.hx-q summary::-webkit-details-marker { display: none; }
.hx-q summary:hover .hx-qt { color: #fff; }
.hx-n { flex: none; min-width: 34px; font: 700 14px var(--head); color: var(--accent2); font-variant-numeric: tabular-nums; }
.hx-n::before { content: '#'; opacity: .6; }
.hx-qt { flex: 1; font-weight: 600; font-size: 16px; }
.hx-link { color: var(--muted); font-size: 13px; padding: 0 4px; opacity: .55; }
.hx-q:hover .hx-link { opacity: 1; }
.hx-a { padding: 0 16px 12px 60px; color: #d8d2c2; }
.hx-a p { margin: 0 0 10px; }
.hx-a ul, .hx-a ol { margin: 0 0 10px; padding-left: 20px; }
@media (max-width: 900px) {
  .hx-layout { grid-template-columns: minmax(0, 1fr); }
  .hx-index { position: static; max-height: none; }
  .hx-search { top: 56px; }
  .hx-a { padding-left: 16px; }
}

/* ---------- post-match awards ---------- */
.award-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.award { display: flex; gap: 12px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.award.mvp { border-color: var(--caution); box-shadow: inset 0 0 0 1px rgba(232,195,58,.25); }
.award .aw-ico { font-size: 26px; line-height: 1; flex: none; }
.award div { display: flex; flex-direction: column; min-width: 0; }
.award b { font: 600 12px var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--accent2); }
.award.mvp b { color: var(--caution); }
.award a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.season-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.sbadge { display: inline-flex; align-items: center; gap: 5px; font: 600 12px var(--body); padding: 2px 8px 2px 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); white-space: nowrap; }
.sbadge img { width: 18px; height: 18px; }
.sbadge-mini { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.sbadge-mini img { width: 16px; height: 16px; }
.ladder-t tr.sep td { background: transparent; padding-top: 16px; }
.funnel { display: grid; gap: 8px; }
.fn-row { display: grid; grid-template-columns: 210px minmax(0, 1fr) 120px; gap: 12px; align-items: center; }
.fn-bar { height: 22px; background: var(--panel2); border-radius: 4px; overflow: hidden; }
.fn-bar i { display: block; height: 100%; background: var(--accent); }
.fn-row .num b { color: var(--text); }
@media (max-width: 700px) { .fn-row { grid-template-columns: minmax(0, 1fr) 90px; } .fn-row .fn-bar { grid-column: 1 / -1; grid-row: 2; } }

/* provisional rating (placements) */
.prov { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.prov i { font: 500 11px var(--body); font-style: normal; color: var(--muted); }

/* ---------- Help button in the top bar + home-page search ---------- */
.help-top { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font: 600 14px var(--body); text-decoration: none !important; margin-right: 8px; }
.help-top .help-q { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--accent); color: var(--accent2); font: 700 14px var(--head); }
.help-top:hover, .help-top.here { border-color: var(--accent); background: rgba(179, 22, 30, .12); }
@media (max-width: 600px) { .help-top { padding: 0 6px; margin-right: 4px; } .help-top .help-label { display: none; } }
.help-search-mini { display: flex; gap: 8px; margin: 4px 0 8px; }
.help-search-mini input { flex: 1; min-width: 0; background: #0d0f12; border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: 500 14px var(--body); padding: 8px 10px; }

/* reliability */
.rel { font-variant-numeric: tabular-nums; }
.rel-2 { color: var(--green); } .rel-1 { color: var(--caution); } .rel-0 { color: #ef8a6f; }

/* campaign bans in the vote */
.vote-cell { display: flex; flex-direction: column; gap: 4px; }
.vote-cell.out .vote-opt { opacity: .45; text-decoration: line-through; }
.vote-ban { background: transparent; border: 1px dashed var(--line); color: var(--muted); border-radius: 6px; font: 600 12px var(--body); padding: 4px 8px; cursor: pointer; }
.vote-ban:hover { border-color: var(--accent); color: var(--text); }
.vote-ban.on { border-style: solid; border-color: var(--accent); color: #fff; background: rgba(179,22,30,.25); }

.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stats-row .stat { background: var(--panel2); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; }
.stats-row .stat b { font: 700 22px var(--head); }
.stats-row .stat span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* newcomers, mentors, best teammates */
.pill-new { background: rgba(95,184,74,.12); border-color: rgba(95,184,74,.45); color: #9bd88a; }
.pill-mentor { background: rgba(111,195,223,.12); border-color: rgba(111,195,223,.45); color: #9fd9ec; }
.mates { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mates li { display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px; gap: 12px; align-items: center; }
.mate-bar { height: 8px; background: var(--panel2); border-radius: 4px; overflow: hidden; }
.mate-bar i { display: block; height: 100%; background: var(--green); }
@media (max-width: 600px) { .mates li { grid-template-columns: minmax(0, 1fr) 110px; } .mate-bar { display: none; } }

/* staff chat log */
.chatlog { max-height: 460px; overflow: auto; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #0d0f12; border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin: 8px 0; }
.cl { display: grid; grid-template-columns: 90px minmax(90px, 200px) minmax(0, 1fr); gap: 8px; padding: 2px 4px; border-radius: 3px; }
.cl.hl { background: rgba(232,195,58,.12); }
.chatlog.only .cl:not(.hl) { display: none; }
.cl-t { color: var(--muted); }
.cl.team .cl-who { font-style: italic; }
.cl-surv { color: var(--survivor); } .cl-inf { color: var(--infected); } .cl-spec { color: var(--muted); }
.cl-text { word-break: break-word; }
.staff-chat summary { cursor: pointer; }
@media (max-width: 600px) { .cl { grid-template-columns: 1fr; gap: 0; } }

/* appeals */
.appeal { border-top: 1px solid var(--line); padding: 12px 0; } .appeal:first-of-type { border-top: 0; }
.appeal-body { white-space: pre-wrap; }
.appeal-reply { background: var(--panel2); border-left: 3px solid var(--accent2); padding: 8px 12px; border-radius: 4px; }

/* server fund */
.fund { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 12px 0; }
.fund.compact { padding: 10px 12px; margin: 0; }
.fund-top { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.fund-top b { color: var(--caution); }
.fund-bar { height: 12px; background: #0d0f12; border-radius: 6px; overflow: hidden; margin: 8px 0 6px; border: 1px solid var(--line); }
.fund-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--caution)); }
.fund p { margin: 0; }

/* status page */
.status-head { display: flex; gap: 14px; align-items: center; }
.status-head h2 { margin: 0; }
.status-dot { font-size: 34px; line-height: 1; }
.status-ok { border-color: rgba(95,184,74,.5); } .status-issue { border-color: rgba(232,195,58,.6); } .status-down { border-color: rgba(200,56,44,.7); }
.status-notice { border-left: 4px solid var(--caution); }
.status-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.status-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-r { margin-left: auto; color: var(--muted); font-size: 14px; }
.sdot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.sdot.on { background: var(--green); box-shadow: 0 0 6px var(--green); } .sdot.off { background: var(--infected); }
.card .fund.compact { background: none; border: 0; padding: 0; }

/* rematch, auto re-queue, wait estimate, busy hours */
.rematch { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(95,184,74,.1); border: 1px solid rgba(95,184,74,.45); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.auto-rq { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: var(--muted); cursor: pointer; }
.q-est { color: var(--caution); font-weight: 600; margin: 4px 0; }
.heat { display: grid; gap: 2px; font-size: 11px; color: var(--muted); }
.heat-row { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.heat-row b { height: 12px; border-radius: 2px; background: var(--accent2); }
.heat-hd i { font-style: normal; grid-row: 1; white-space: nowrap; }

/* comms ratings */
.comms { display: grid; gap: 8px; }
.comms-row { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto auto auto; gap: 8px 10px; align-items: center; margin: 0; }
@media (max-width: 640px) { .comms-row { grid-template-columns: 1fr auto; } .comms-row b { grid-column: 1 / -1; } }

/* rating history, percentiles, head to head, season wrap */
.rchart { width: 100%; height: auto; display: block; }
.rc-grid { stroke: var(--line); stroke-width: 1; } .rc-season { stroke: var(--caution); stroke-dasharray: 4 4; opacity: .6; }
.rc-ax { fill: var(--muted); font: 11px var(--body); } .rc-peak { fill: var(--caution); font-weight: 600; }
.rc-line { fill: none; stroke: var(--text); stroke-width: 2; opacity: .85; }
.rc-dot.w { fill: var(--green); } .rc-dot.l { fill: var(--infected); } .rc-dot.d { fill: var(--muted); }
.pct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.pct { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; }
.pct b { font: 700 18px var(--head); } .pct span { font-size: 13px; } .pct i { font-style: normal; color: var(--muted); font-size: 12px; }
.pct.top { border-color: var(--caution); } .pct.top b { color: var(--caution); } .pct.good b { color: var(--green); }
.h2h-head { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 10px 0 20px; flex-wrap: wrap; }
.h2h-p { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); text-decoration: none; }
.h2h-vs { font: 700 28px var(--head); color: var(--accent2); }
.h2h-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.h2h-box { text-align: center; } .h2h-big { font: 700 44px var(--head); }
.wrap-card { max-width: 720px; margin: 10px auto 16px; background: linear-gradient(160deg, #241112, var(--panel) 55%); border: 1px solid #5c1a20; border-radius: 14px; padding: 26px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.wrap-top { display: flex; gap: 20px; align-items: center; } .wrap-top h1 { margin: 0; font: 700 34px var(--head); text-transform: uppercase; }
.wrap-rank { font: 600 18px var(--head); color: var(--caution); margin: 2px 0; text-transform: uppercase; letter-spacing: .05em; }
.wrap-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 14px; }
.wrap-tiles div { background: rgba(0,0,0,.25); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; }
.wrap-tiles b { font: 700 20px var(--head); } .wrap-tiles span { color: var(--muted); font-size: 12px; }
.wrap-awards { display: flex; flex-wrap: wrap; gap: 8px; } .wrap-awards span { background: var(--panel2); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.wrap-foot p { margin: 8px 0 0; } .wrap-brand { color: var(--muted); font-size: 12px; text-align: right; }
.center { text-align: center; }
@media (max-width: 640px) { .wrap-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wrap-top { flex-direction: column; text-align: center; } }

/* play of the week, review board */
.potw-list { display: grid; gap: 8px; }
.potw-c { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.potw-c.mine { border-color: var(--accent2); } .potw-c.win { border-color: var(--caution); }
.potw-label { font: 600 15px var(--head); color: var(--caution); }
.potw-past { margin-bottom: 10px; } .appeal.helpful { border-left: 3px solid var(--green); padding-left: 10px; }

/* signed-out front page */
.front-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; text-align: center; }
.front-nums b { display: block; font: 700 30px var(--head); color: var(--caution); } .front-nums span { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.steps-anim { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: s; }
.steps-anim li { position: relative; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; opacity: 0; animation: sa-in .6s ease-out forwards, sa-glow 4.8s ease-in-out infinite; animation-delay: var(--d), calc(var(--d) + 1s); }
.steps-anim li b { font: 700 17px var(--head); text-transform: uppercase; } .steps-anim li span:last-child { color: var(--muted); font-size: 14px; }
.sa-ico { font-size: 26px; }
.steps-anim li:not(:last-child)::after { content: '→'; position: absolute; right: -11px; top: 40%; color: var(--accent2); font-weight: 700; }
@keyframes sa-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sa-glow { 0%, 70%, 100% { border-color: var(--line); } 15% { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } }
@media (prefers-reduced-motion: reduce) { .steps-anim li { animation: none; opacity: 1; } }
.why { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.front-top { margin: 0; padding-left: 22px; display: grid; gap: 6px; } .front-top .num { color: var(--caution); margin-left: 6px; }
@media (max-width: 760px) { .front-nums, .steps-anim { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps-anim li::after { display: none; } .why { grid-template-columns: 1fr; } }

.stats-row .stat.warn b { color: #ef8a6f; }
.hx-new ul{margin:.25rem 0 0;padding-left:1.1rem}.hx-new li{margin:.25rem 0}
.demo-steps{margin-top:1rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.demo-steps h3{margin:0 0 .5rem}.demo-steps ol{margin:.25rem 0 .5rem;padding-left:1.2rem}.demo-steps li{margin:.5rem 0}
.demo-lines{display:grid;gap:.4rem;margin:.5rem 0}.demo-lines .connect{display:flex;gap:.5rem;align-items:center;justify-content:space-between;padding:.4rem .6rem;margin:0}
.demo-lines code{overflow-wrap:anywhere}
.demo-steps kbd{font:600 .8em var(--mono,monospace);padding:.05em .4em;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.06)}

/* ---------- player banners ---------- */
.pbanner { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who rank" "items items"; gap: 10px 14px; align-items: center;
  padding: 16px 18px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.08); overflow: hidden; isolation: isolate; color: var(--text); }
.pbanner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pb-bg); }
.pbanner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.28) 32%, rgba(0,0,0,.04) 55%, rgba(0,0,0,.1) 70%, rgba(0,0,0,.55)); }
/* keep names, titles and ranks readable on bright backgrounds (flags, gold, blossom) */
.pbanner .pb-name b, .pbanner .pb-name em, .pbanner .pb-rank span { text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.55); }
.pbanner .pb-item { background-color: rgba(10,10,12,.62); backdrop-filter: blur(2px); }
/* still frame on phones / Data Saver until tapped (public/app.js) */
.pbanner.pb-lite { cursor: pointer; }
.pbanner:not(.pb-lite) .pb-play { display: none; }
.pbanner .pb-play { position: absolute !important; inset: auto 10px 8px auto; pointer-events: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); z-index: 3; }
.pb-who { grid-area: who; display: flex; gap: 12px; align-items: center; color: var(--text); min-width: 0; }
.pb-who img { border-radius: 8px; flex: none; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.pb-name { display: flex; flex-direction: column; min-width: 0; }
.pb-name b { font: 600 22px/1.1 var(--head); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-name em { font-style: normal; color: rgba(255,255,255,.75); font-size: 13px; }
.pb-name .pill { align-self: flex-start; margin-top: 3px; }
.pb-rank { grid-area: rank; display: flex; align-items: center; gap: 8px; font: 600 13px var(--head); letter-spacing: .04em; text-transform: uppercase; text-align: right; }
.pb-rank img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.pb-items { grid-area: items; display: flex; flex-wrap: wrap; gap: 8px; }
.pb-item { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border-radius: 999px; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.12); }
.pb-item i { font-style: normal; font-size: 18px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); }
.pb-item img { width: 26px; height: 26px; object-fit: contain; }
.pb-item span { display: flex; flex-direction: column; line-height: 1.15; }
.pb-item b { font-size: 13px; } .pb-item small { font-size: 11px; color: rgba(255,255,255,.7); }
.pb-item.t1 { border-color: #e2b93b; } .pb-item.t1 i { background: radial-gradient(circle at 35% 30%, #fff3b0, #e2b93b 55%, #8a6a12); }
.pb-item.t2 { border-color: #c9ced6; } .pb-item.t2 i { background: radial-gradient(circle at 35% 30%, #fff, #c9ced6 55%, #6c727c); }
.pb-item.t3 { border-color: #c8803f; } .pb-item.t3 i { background: radial-gradient(circle at 35% 30%, #ffd9b0, #c8803f 55%, #6b3d14); }
.pb-item.live { border-style: dashed; }
.pb-edit { position: absolute; top: 10px; right: 10px; z-index: 1; }
.pb-edit ~ .pb-rank, .pbanner:has(.pb-edit) .pb-rank { margin-top: 28px; }
.pb-sm { padding: 10px 12px; gap: 6px 10px; animation: pb-in .45s both; animation-delay: calc(var(--i, 0) * 90ms); }
.pb-sm .pb-name b { font-size: 16px; } .pb-sm .pb-rank img { width: 30px; height: 30px; } .pb-sm .pb-rank { font-size: 11px; }
.pb-sm .pb-items { gap: 5px; } .pb-sm .pb-item { padding: 3px; } .pb-sm .pb-item i, .pb-sm .pb-item img { width: 22px; height: 22px; font-size: 14px; }
.pb-you { outline: 2px solid var(--accent2); outline-offset: 2px; }
@keyframes pb-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .pb-sm { animation: none; } }
.profile-banner { margin-bottom: 16px; }
@media (max-width: 560px) { .pbanner { grid-template-columns: 1fr; grid-template-areas: "who" "rank" "items"; } .pb-rank { text-align: left; } .pb-name b { font-size: 18px; } }

/* backgrounds: original scenes in public/banners/*.svg (made by a script, no game art) */
.bg-blood { --pb-bg: url(/static/banners/blood.jpg?v=6a16bf4a44) center / cover no-repeat, #2a0709; }
.bg-night { --pb-bg: url(/static/banners/night-fx.svg?v=319c1eb107) center / cover no-repeat, url(/static/banners/night.jpg?v=8cc15d4161) center / cover no-repeat, #3a1208; }
.bg-saferoom { --pb-bg: url(/static/banners/saferoom-fx.svg?v=1fb0207620) center / cover no-repeat, url(/static/banners/saferoom.jpg?v=35227fb393) center 45% / cover no-repeat, #0c1424; }
.bg-storm { --pb-bg: url(/static/banners/storm.jpg?v=f561b539e3) center / cover no-repeat, #0d141b; }
.bg-void { --pb-bg: url(/static/banners/void.jpg?v=8a4bc6bdd7) center / cover no-repeat, #0a0418; }
.bg-flag { --pb-bg: url(/static/banners/flag.jpg?v=c35f721ec6) center / cover no-repeat, #1a0f12; }
.bg-canada { --pb-bg: url(/static/banners/canada.jpg?v=3e2e15f2d4) center / cover no-repeat, #2a0a0a; }
.bg-batch { --pb-bg: url(/static/banners/batch-fx.svg?v=735880136e) center / cover no-repeat, url(/static/banners/batch.jpg?v=33163d6103) center / cover no-repeat, #3e4044; }
.bg-canada.pbanner .pb-vid { object-position: 50% 50%; }
.bg-flag.pbanner .pb-vid { object-position: 20% 50%; }
.bg-veteran { --pb-bg: url(/static/banners/veteran-tags.svg?v=0124423240) center / cover no-repeat, url(/static/banners/veteran-fx.svg?v=c15a104539) center / cover no-repeat, url(/static/banners/veteran.svg?v=3c45924dbc) center / cover no-repeat, url(/static/banners/veteran-camo.jpg?v=67506906ee) center / cover no-repeat, #3a3d2a; }
.bg-gold { --pb-bg: url(/static/banners/gold-fx.svg?v=aa5d1c450d) center / cover no-repeat, url(/static/banners/gold.svg?v=33e9fcd4a0) center / cover no-repeat, #6b5010; }
.bg-champion { --pb-bg: url(/static/banners/champion-stamp.svg?v=1dbe031241) center / cover no-repeat, url(/static/banners/champion-fx.svg?v=527a737551) center / cover no-repeat, url(/static/banners/champion.svg?v=a541ee6fa6) center / cover no-repeat, #4a0a0d; }
.bg-supporter { --pb-bg: url(/static/banners/supporter.jpg?v=16e311e0fd) center 50% / cover no-repeat, #2a6fb0; }
.bg-supporter.pbanner .pb-vid { object-position: 50% 50%; }
.pbanner::before, .bn-bg::before { background-color: #111; }

/* editor */
.bn-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 1rem; }
.bn-bg { position: relative; display: flex; align-items: flex-end; min-height: 70px; padding: 8px 10px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; isolation: isolate; overflow: hidden; }
.bn-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pb-bg); }
.bn-bg input { position: absolute; opacity: 0; }
.bn-bg span { font: 600 13px var(--head); text-transform: uppercase; letter-spacing: .04em; display: flex; flex-direction: column; text-shadow: 0 1px 3px #000; }
.bn-bg small { font: 400 11px var(--body); text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.8); }
.bn-bg:has(input:checked) { border-color: var(--accent2); }
.bn-bg:has(input:focus-visible) { outline: 2px solid var(--accent2); outline-offset: 2px; }
.bn-bg.locked { cursor: not-allowed; filter: grayscale(.6) brightness(.7); }
.bn-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bn-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); cursor: pointer; }
.bn-item i { font-style: normal; font-size: 20px; } .bn-item img { width: 26px; height: 26px; object-fit: contain; }
.bn-item span { display: flex; flex-direction: column; line-height: 1.2; } .bn-item small { color: var(--muted); font-size: 12px; }
.bn-item:has(input:checked) { border-color: var(--accent2); background: rgba(var(--accent-rgb), .12); }
.bn-item:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.bn-item.t1 i { filter: drop-shadow(0 0 4px #e2b93b); }

/* medals */
.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 12px 0 20px; }
.medal-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.medal-card h3 { font-size: 16px; margin-bottom: 6px; }
.medal-list { list-style: none; margin: 0; padding: 0; }
.medal-list li { display: grid; grid-template-columns: 26px 1fr auto; gap: 6px; align-items: center; padding: 3px 0; }
.medal-list li.me a { color: var(--gold); font-weight: 600; }
.medal-shelf { display: flex; flex-wrap: wrap; gap: 10px; }
.medal-pin { display: grid; grid-template-columns: 40px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); }
.medal-pin i { grid-row: span 2; font-style: normal; font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; }
.medal-pin.t1 i { background: radial-gradient(circle at 35% 30%, #fff3b0, #e2b93b 55%, #8a6a12); }
.medal-pin.t2 i { background: radial-gradient(circle at 35% 30%, #fff, #c9ced6 55%, #6c727c); }
.medal-pin.t3 i { background: radial-gradient(circle at 35% 30%, #ffd9b0, #c8803f 55%, #6b3d14); }
.medal-pin small { color: var(--muted); font-size: 12px; }

/* matchup panel */
.matchup .mu-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.matchup .mu-head b { font: 600 18px var(--head); }
.mu-odds { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font: 600 14px var(--head); margin-bottom: 12px; }
.mu-bar { height: 8px; border-radius: 999px; background: var(--infected); overflow: hidden; }
.mu-bar i { display: block; height: 100%; background: var(--survivor); }
.mu-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: start; }
.mu-team { display: grid; gap: 8px; min-width: 0; }
.mu-th { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--head); text-transform: uppercase; letter-spacing: .04em; }
.mu-a .mu-th b { color: var(--survivor); } .mu-b .mu-th b { color: var(--infected); }
.mu-vs { align-self: center; font: 700 28px var(--head); color: var(--accent2); text-shadow: 0 0 18px rgba(var(--accent-rgb), .6); }
@media (max-width: 860px) { .mu-grid { grid-template-columns: minmax(0, 1fr); } .mu-vs { justify-self: center; } }
.play .mu-grid { grid-template-columns: minmax(0, 1fr); } .play .mu-vs { justify-self: center; font-size: 22px; }
@media (min-width: 1100px) { .play .mu-grid { grid-template-columns: 1fr auto 1fr; } .play .mu-vs { justify-self: auto; } }
/* banner inventory */
.bn-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
.bn-slot { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--accent2); background: rgba(var(--accent-rgb), .12); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.bn-slot.empty { border: 1px dashed var(--line); background: transparent; color: var(--muted); justify-content: center; cursor: default; }
.bn-slot .bn-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .bn-slot small { color: var(--muted); font-size: 12px; }
.bn-slot .bn-x { margin-left: auto; color: var(--muted); } .bn-slot:not(.empty):hover .bn-x { color: var(--rust); }
.bn-ico i { font-style: normal; font-size: 20px; } .bn-ico img { width: 26px; height: 26px; object-fit: contain; }
.bn-item { position: relative; } .bn-item .bn-txt { display: flex; flex-direction: column; line-height: 1.2; } .bn-item .bn-txt small { color: var(--muted); font-size: 12px; }
.bn-item input { position: absolute; opacity: 0; pointer-events: none; }
.bn-item:has(input:focus-visible) { outline: 2px solid var(--accent2); outline-offset: 2px; }
.bn-item em { font-style: normal; font: 600 10px var(--head); letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; margin-left: auto; }
.bn-item .bn-new { background: var(--gold); color: #1a1203; }
.bn-item .bn-on { display: none; background: var(--accent); color: var(--ink); }
.bn-item:has(input:checked) .bn-on { display: inline; } .bn-item:has(input:checked) .bn-new { display: none; }
.bn-item.fresh { box-shadow: 0 0 0 1px var(--gold) inset; }
.bn-newcount { color: var(--gold); }
@media (max-width: 640px) { .bn-slots { grid-template-columns: 1fr; } }
/* Scorched: real fire video behind the banner content, under the ember layer */
.pbanner .pb-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; z-index: -1; pointer-events: none; }
.bg-blood.pbanner .pb-vid { object-position: 55% 22%; }   /* keep the horde's heads and eyes in frame */
.bg-deadwood.pbanner .pb-vid, .bg-summit.pbanner .pb-vid, .bg-jungle.pbanner .pb-vid, .bg-blizzard.pbanner .pb-vid { object-position: 50% 50%; }
.pbanner:has(.pb-vid)::before { background: none; z-index: 0; }
.bg-saferoom.pbanner:has(.pb-vid)::before { background: url(/static/banners/saferoom-fx.svg?v=1fb0207620) center / cover no-repeat; }
.bg-night.pbanner:has(.pb-vid)::before { background: url(/static/banners/night-fx.svg?v=319c1eb107) center / cover no-repeat; }
.pbanner:has(.pb-vid) > :not(.pb-vid):not(.pb-edit) { position: relative; z-index: 1; }
.pbanner:has(.pb-vid) .pb-edit { z-index: 2; }
.pbanner:has(.pb-vid)::after { z-index: 0; }
@media (prefers-reduced-motion: reduce) { .pbanner .pb-vid { display: none; } .pbanner:has(.pb-vid)::before { background: var(--pb-bg); z-index: -1; } }
.pb-item[hidden], .pbanner [data-pv-title][hidden] { display: none; }

/* desktop alert settings on the Play page (public/app.js) */
.alerts-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 4px; padding: 8px 12px; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 10px; background: rgba(255,255,255,.03); }
.alerts-box .ok { color: #7ddc8a; } .alerts-box .bad { color: #ff8a7a; }
.alerts-snd { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ping-box { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 6px 0 10px; }
.ping-cell b { margin-left: 4px; } .ping-good { color: #7ddc8a; } .ping-ok { color: #e8c35a; } .ping-bad { color: #ff8a7a; }

/* phones: banners and the matchup panel (mobile pass) */
.pbanner { min-width: 0; max-width: 100%; }
@media (max-width: 560px) {
  .pbanner.pb-sm { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who rank" "items items"; padding: 8px 10px; gap: 6px 8px; }
  .pb-sm .pb-who { gap: 8px; } .pb-sm .pb-who img { width: 36px; height: 36px; }
  .pb-sm .pb-rank { text-align: right; gap: 5px; } .pb-sm .pb-rank img { width: 24px; height: 24px; } .pb-sm .pb-rank span { font-size: 10px; max-width: 92px; }
  .pb-sm .pb-name b { font-size: 15px; } .pb-sm .pb-name em, .pb-sm .pb-name .pill { font-size: 11px; }
  .matchup .mu-head { flex-wrap: wrap; } .mu-th { padding: 0 2px; font-size: 13px; } .mu-vs { font-size: 20px; }
  .pbanner.pb-lg .pb-items { gap: 6px; } .pbanner.pb-lg .pb-item { padding: 4px 8px 4px 5px; } .pbanner.pb-lg .pb-item small { display: none; }
  .bn-bgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* background picker: hover a video background to preview it (routes/banners.js) */
.bn-bg { position: relative; overflow: hidden; }
.bn-bg .bn-bg-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 0; }
.bn-bg.hov .bn-bg-vid { opacity: 1; }
.bn-bg > span { position: relative; z-index: 1; }
.bn-req-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.pill-ok { background: rgba(125,220,138,.15); color: #7ddc8a; }
.pill-premium { background: rgba(255,196,80,.15); color: #ffc450; font-size: 11px; vertical-align: middle; }

.leaver { margin: 12px 0 0; } .leave-rate { font-weight: 600; } .leave-rate.ok { color: #7ddc8a; } .leave-rate.warn { color: #e8c35a; } .leave-rate.bad { color: #ff8a7a; }

/* ---------- season pass: banner backgrounds (lib/pass.js) ---------- */
.bg-aurora { --pb-bg: url(/static/banners/aurora.jpg?v=3c5e6ff133) center / cover no-repeat, #04101c; }
.bg-midnight { --pb-bg: url(/static/banners/midnight.jpg?v=817b433d7c) center / cover no-repeat, #030406; }
.bg-deadwood { --pb-bg: url(/static/banners/deadwood.jpg?v=36a724917d) center / cover no-repeat, #0b1418; }
.bg-summit { --pb-bg: url(/static/banners/summit.jpg?v=b47860b0a5) center / cover no-repeat, #1c1620; }
.bg-jungle { --pb-bg: url(/static/banners/jungle.jpg?v=bad45402f1) center / cover no-repeat, #0b1a0c; }
.bg-pyramids { --pb-bg: url(/static/banners/pyramids.jpg?v=dd18533d93) center 85% / cover no-repeat, #1a1430; }
.bg-pyramids.pbanner .pb-vid { object-position: 50% 85%; }   /* keep the pyramids and the horizon in frame */
.bg-blizzard { --pb-bg: url(/static/banners/blizzard.jpg?v=3372f91254) center / cover no-repeat, #0a1220; }

/* ---------- season pass: avatar frames (.pf on the banner's avatar link) ---------- */
.pf .av { transition: box-shadow .3s; }
.pf-bronze .av { box-shadow: 0 0 0 2px #1a0f06, 0 0 0 4px #b8793e, 0 0 10px rgba(184,121,62,.5); }
.pf-silver .av { box-shadow: 0 0 0 2px #14171b, 0 0 0 4px #d5dbe3, 0 0 12px rgba(213,219,227,.5); }
.pf-gold .av { box-shadow: 0 0 0 2px #2a1d05, 0 0 0 4px #f0c24e, 0 0 0 6px #7a5512, 0 0 16px rgba(240,194,78,.65); }
.pf-crimson .av { box-shadow: 0 0 0 2px #1a0306, 0 0 0 4px #d01c3a, 0 0 0 6px #4a0610, 0 0 16px rgba(208,28,58,.6); }
.pf-hazard .av { outline: 3px dashed #f5c400; outline-offset: 2px; box-shadow: 0 0 0 5px #111, 0 0 16px rgba(245,196,0,.55); animation: pf-hazard 1.6s ease-in-out infinite alternate; }
@keyframes pf-hazard { to { box-shadow: 0 0 0 5px #111, 0 0 26px rgba(245,196,0,.9); } }
.pf-neon .av { animation: pf-neon 3s linear infinite; }
@keyframes pf-neon { 0%, 100% { box-shadow: 0 0 0 2px #05050a, 0 0 0 4px #22e1ff, 0 0 18px #22e1ff; } 50% { box-shadow: 0 0 0 2px #05050a, 0 0 0 4px #ff2bd6, 0 0 18px #ff2bd6; } }
.pf-toxic .av { animation: pf-toxic 2.2s ease-in-out infinite; }
@keyframes pf-toxic { 0%, 100% { box-shadow: 0 0 0 2px #041004, 0 0 0 4px #5dff3a, 0 0 10px rgba(93,255,58,.5); } 50% { box-shadow: 0 0 0 2px #041004, 0 0 0 4px #a4ff7a, 0 0 24px rgba(93,255,58,.95); } }
.pf-prism .av { animation: pf-prism 4s linear infinite; }
@keyframes pf-prism { 0% { box-shadow: 0 0 0 2px #000, 0 0 0 4px #ff4d4d, 0 0 18px #ff4d4d; } 20% { box-shadow: 0 0 0 2px #000, 0 0 0 4px #ffc84d, 0 0 18px #ffc84d; } 40% { box-shadow: 0 0 0 2px #000, 0 0 0 4px #5dff7a, 0 0 18px #5dff7a; }
  60% { box-shadow: 0 0 0 2px #000, 0 0 0 4px #4dc8ff, 0 0 18px #4dc8ff; } 80% { box-shadow: 0 0 0 2px #000, 0 0 0 4px #b84dff, 0 0 18px #b84dff; } 100% { box-shadow: 0 0 0 2px #000, 0 0 0 4px #ff4d4d, 0 0 18px #ff4d4d; } }
@media (prefers-reduced-motion: reduce) { .pf .av { animation: none !important; } }
/* frame picker on /me/banner */
.bn-frames { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.bn-frame { display: grid; justify-items: center; gap: 6px; padding: 10px 12px; min-width: 84px; border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 10px; cursor: pointer; text-align: center; }
.bn-frame input { position: absolute; opacity: 0; pointer-events: none; }
.bn-frame:has(input:checked) { border-color: var(--accent2, #e0453a); background: rgba(255,255,255,.04); }
.bn-frame .av { width: 38px; height: 38px; display: grid; place-items: center; font-style: normal; border-radius: 8px; }
.bn-frame b { font-size: 12px; } .bn-frame small { font-size: 10px; color: var(--muted); }

/* ---------- /pass ---------- */
.pass-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.pass-level { display: grid; justify-items: center; min-width: 74px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line, rgba(255,255,255,.1)); }
.pass-level b { font: 700 38px/1 var(--head); color: var(--accent2, #e0453a); } .pass-level span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pass-prog { flex: 1 1 260px; } .pass-prog p { margin: 6px 0 0; }
.pass-bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; } .pass-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9b1220, #e0453a, #ffb35a); }
.pass-track-wrap { overflow-x: auto; padding-bottom: 6px; }
.pass-track { display: grid; grid-template-columns: 92px repeat(var(--n), 96px); grid-auto-rows: auto; gap: 6px; min-width: max-content; }
.pass-lbl { font: 600 12px var(--head); text-transform: uppercase; letter-spacing: .06em; align-self: center; color: var(--muted); position: sticky; left: 0; background: var(--bg2, #151515); z-index: 1; padding-right: 6px; }
.pass-num { text-align: center; font: 600 13px var(--head); color: var(--muted); padding: 2px 0; border-bottom: 2px solid rgba(255,255,255,.08); } .pass-num.reached { color: #fff; border-color: var(--accent2, #e0453a); }
.pass-cell { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 104px; padding: 8px 6px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); text-align: center; }
.pass-cell b { font-size: 11px; line-height: 1.2; } .pass-cell.empty { border-style: dashed; opacity: .35; }
.pass-cell.locked { opacity: .5; filter: grayscale(.6); } .pass-cell.plus-locked { opacity: .65; } .pass-cell.got { border-color: rgba(125,220,138,.5); background: rgba(125,220,138,.06); }
.pass-cell .av { width: 34px; height: 34px; display: grid; place-items: center; font-style: normal; border-radius: 8px; }
.pass-cell .pass-bg { width: 70px; min-height: 36px; padding: 0; border-radius: 6px; } .pass-emoji { font-size: 26px; line-height: 1; }
.pass-tick { position: absolute; top: 4px; right: 6px; font-style: normal; color: #7ddc8a; font-size: 13px; } .pass-lock { position: absolute; top: 4px; right: 6px; font-style: normal; color: #ffc450; font-size: 12px; }
.pass-xp li { padding: 4px 0; }
/* season pass widget on the Play page and profile */
.pass-mini { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; font-size: 13px; color: inherit; text-decoration: none; }
.pass-mini .pass-bar { flex: 0 1 160px; height: 8px; } .pass-mini b { font-family: var(--head); }

/* ---------- scrim team page: team banner, head to head (routes/scrims.js) ---------- */
.pbanner.tbanner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main side" "form form"; margin: 0 0 18px; min-height: 120px; }
.tbanner .tb-main { grid-area: main; display: grid; gap: 4px; } .tb-name { font: 700 30px/1.05 var(--head); letter-spacing: .02em; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
.tbanner .tb-main em { font-style: normal; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px #000; }
.tbanner .tb-side { grid-area: side; display: grid; justify-items: end; text-shadow: 0 1px 3px #000; } .tbanner .tb-side b { font: 700 26px var(--head); } .tbanner .tb-side span { font-size: 12px; }
.tbanner .tb-form { grid-area: form; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .tbanner .tb-form .pill { min-width: 24px; text-align: center; }
.tbanner .tb-form span.small { margin-left: 6px; text-shadow: 0 1px 3px #000; }
.tb-chip { display: inline-block; vertical-align: middle; width: 30px; min-height: 18px !important; height: 18px; padding: 0 !important; margin-right: 8px; border-radius: 4px !important; border: 0 !important; }
.tmaps li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.pos { color: #7ddc8a; } .neg { color: #ff8a7a; }
@media (max-width: 560px) { .pbanner.tbanner { grid-template-columns: 1fr; grid-template-areas: "main" "side" "form"; } .tbanner .tb-side { justify-items: start; } .tb-name { font-size: 24px; } }

/* share a replay moment (public/replay.js, routes/pug.js /m/:code) */
.rp-share { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 10px; background: rgba(255,255,255,.03); }
.share-row { display: flex; gap: 8px; } .share-row input { flex: 1; min-width: 0; } .share-post { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.share-out { margin-top: 10px; } .share-out .connect { display: flex; gap: 8px; align-items: center; } .share-out code { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.moments { margin-top: 14px; } .moment-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.moment { display: grid; gap: 2px; padding: 9px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); color: inherit; text-decoration: none; }
.moment:hover { border-color: var(--accent2, #e0453a); }

/* coach mode (/coaching, replay notes) */
.rp-marks .mk-coach { background: #c08cff; width: 4px; height: 14px; top: -3px; box-shadow: 0 0 6px #c08cff; z-index: 2; }
.coach-add { display: grid; gap: 6px; margin: 8px 0 10px; } .coach-add textarea { width: 100%; }
.coach-notes li b { color: #c08cff; } .linkish { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; text-decoration: underline; }
.coach-list li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); } .coach-list form { margin-top: 4px; }

/* ---------- challenges (lib/challenges.js) ---------- */
.ch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 24px; }
.ch-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.ch-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.ch-list li.done { border-color: rgba(125,220,138,.45); background: rgba(125,220,138,.06); }
.ch-list li div { display: grid; gap: 6px; } .ch-val { font: 600 13px var(--head); } .ch-xp { font-size: 12px; color: #ffc450; } .ch-list li.done .ch-val { color: #7ddc8a; }
.ch-bar { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; } .ch-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9b1220, #e0453a); }
.done .ch-bar i { background: #5fb84a; }
.ch-mini { margin: 4px 0 10px; font-size: 13px; } .ch-mini summary { cursor: pointer; }
.ch-mini ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.ch-mini li { display: grid; grid-template-columns: 74px 1fr 90px auto auto; gap: 10px; align-items: center; } .ch-mini li.done span:nth-child(2) { text-decoration: line-through; opacity: .7; }
.ch-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
@media (max-width: 560px) { .ch-mini li { grid-template-columns: 1fr auto auto; } .ch-mini .ch-kind, .ch-mini .ch-bar { display: none; } }

/* ---------- stat trend charts (/player/:steam/trends) ---------- */
.tcharts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px 24px; }
.tchart { margin: 0; } .tchart figcaption { font: 600 13px var(--head); letter-spacing: .03em; margin-bottom: 4px; }
.tchart-wrap { position: relative; } .tchart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.tc-grid { stroke: rgba(255,255,255,.07); stroke-width: 1; } .tc-ax { fill: rgba(233,231,227,.55); font-size: 11px; font-family: var(--body, sans-serif); }
.tc-line { fill: none; stroke: #e0453a; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tc-end { fill: #e0453a; stroke: #151515; stroke-width: 2; } .tc-dot { fill: rgba(224,69,58,.35); }
.tc-ref { stroke: rgba(233,231,227,.55); stroke-width: 1.5; stroke-dasharray: 5 4; } .tc-reflbl { fill: rgba(233,231,227,.75); font-size: 11px; }
.tc-cross { stroke: rgba(233,231,227,.4); stroke-width: 1; } .tc-hov { fill: #e0453a; stroke: #fff; stroke-width: 2; }
.tc-tip { position: absolute; transform: translate(-50%, -100%); pointer-events: none; background: #0e0f11; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 4px 8px; font-size: 12px; white-space: nowrap; z-index: 3; }

/* map rotation (/map-stats#rotation, campaign vote) */
.rot-bar { min-width: 90px; } .rot-bar i { display: block; height: 8px; border-radius: 0 4px 4px 0; background: #e0453a; min-width: 2px; }
.vote-fresh { display: block; font-style: normal; font-size: 11px; color: #ffc450; margin: 2px 0; }

/* referrals (/invite) */
.pf-squad .av { box-shadow: 0 0 0 2px #10130a, 0 0 0 4px #8a9a3c, 0 0 0 6px #2f3614, 0 0 0 7px #c9b56a, 0 0 12px rgba(201,181,106,.45); }
.ref-rewards li { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .ref-rewards .av { width: 26px; height: 26px; display: grid; place-items: center; font-style: normal; border-radius: 6px; }
.ref-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); }

/* medal artwork (public/medals, scripts/gen-medals.js) */
.medal-card h3 { display: flex; align-items: center; gap: 10px; } .medal-ico { flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.medal-pin i:has(img) { background: none !important; box-shadow: none !important; } .medal-pin i img { width: 40px; height: 40px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.pb-item img[src*="/medals/"], .bn-ico img[src*="/medals/"] { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.pb-item:has(img[src*="/medals/"]) > img { width: 28px; height: 28px; } .pb-sm .pb-item:has(img[src*="/medals/"]) > img { width: 24px; height: 24px; }
.credit { font-size: 11px; color: var(--muted); }

/* Supporter name styles on banners: gradient names can't take a text-shadow, so they get a drop shadow instead */
.pbanner .pb-name .pname-g { text-shadow: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 0 8px rgba(0,0,0,.5)); }
.pbanner .pb-name .pname { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* background request votes (/me/banner) */
.bn-vote-h { margin-top: 18px; }
.bn-vote-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.bn-vote-list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.bn-thumb { display: inline-flex; align-items: center; gap: 6px; min-width: 64px; justify-content: center; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: inherit; cursor: pointer; font: inherit; }
.bn-thumb:hover:not(:disabled) { border-color: var(--accent2, #e0453a); } .bn-thumb.on { background: rgba(224,69,58,.18); border-color: var(--accent2, #e0453a); } .bn-thumb:disabled { opacity: .55; cursor: default; }

/* "Banner" tab in the top bar: new inventory items */
.nav-new { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 4px; border-radius: 999px; background: var(--accent, #c0392b); color: #fff; font: 700 10px/1 var(--body, sans-serif); vertical-align: 2px; }
.banner-top { margin-right: 6px; position: relative; } .banner-top .banner-ico { font-size: 13px; }
.banner-top .nav-new { position: absolute; top: -5px; right: -5px; margin: 0; }
@media (max-width: 600px) { .banner-top { margin-right: 2px; } }

/* Top bar never overflows: the brand keeps its size, and with the full nav showing (wide screens) the header gets more
   room, the Banner/Help pills (both already in the nav) are hidden and your name shows as just your avatar. */
.brand { flex-shrink: 0; }
.nav { min-width: 0; }
.topbar-in > * { flex-shrink: 0; }
.topbar-in > .nav { flex-shrink: 1; }
@media (min-width: 1341px) {
  .topbar .wrap { max-width: 1440px; }
  .topbar .help-top { display: none; }
  .topbar .me-link > span:not(.av) { display: none; }
}
@media (min-width: 1700px) { .topbar .me-link > span:not(.av) { display: inline; } }
@media (max-width: 900px) { .me-out { display: none; } }   /* Sign out stays in the menu */
@media (max-width: 720px) { .topbar .help-label { display: none; } }
.renew-terms { border: 1px solid var(--accent); border-radius: 4px; padding: 10px 12px; margin: 8px 0; font-size: 14px; background: rgba(0,0,0,.25); }

/* legal pages */
.legal .lead { font-size: 16px; }
.legal-toc { border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; margin: 10px 0 18px; font-size: 14px; }
.legal-toc ol { margin: 6px 0 0; columns: 2; }
@media (max-width: 600px) { .legal-toc ol { columns: 1; } }
.legal .caps { font-size: 13px; letter-spacing: .01em; }
.legal table.tbl { width: 100%; font-size: 14px; }
/* Ladder: players away 21+ days (lib/activity.js) */
.ladder-idle { margin-top: 14px; }
.ladder-idle > summary { cursor: pointer; padding: 4px 0; list-style-position: inside; }
.ladder-idle > summary .muted { margin-left: 6px; }
.ladder-idle .table-wrap { margin-top: 10px; }
.ladder-idle th.num, .ladder-idle td.num { text-align: right; }
/* Hall of Fame (/hall-of-fame, lib/halloffame.js) */
.hof-side { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }
.hof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.hof-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel2); min-width: 0; }
.hof-tile.me { border-color: var(--gold); }
.hof-tile.empty { opacity: .55; }
.hof-tile > b { font: 600 15px var(--head); letter-spacing: .04em; text-transform: uppercase; }
.hof-tile .hof-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-emo { font-size: 26px; line-height: 1; }
.hof-champ { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--gold); border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(226, 185, 59, .14), transparent 70%); }
.hof-champ .av { border-radius: 10px; }
.hof-champ > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hof-champ b { font: 600 26px var(--head); letter-spacing: .02em; }
.hof-champ .eyebrow { margin: 0; color: var(--gold); }
.hof-champ img { vertical-align: -4px; }
.hof-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; margin: 0; padding-left: 28px; }
.hof-top li { padding: 4px 0; } .hof-top li.me { color: var(--gold); }
.hof-top li .muted { margin-left: 8px; }
.hof-golds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; }
.hof-golds li { display: flex; align-items: center; gap: 10px; min-width: 0; } .hof-golds li > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hof-honours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hof-honours li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel2); }
.hof-honours li > div { display: flex; flex-direction: column; }
.hof-live { border-style: dashed; }
@media (max-width: 600px) { .hof-grid { grid-template-columns: 1fr 1fr; } .hof-tile { padding: 10px; } .hof-champ b { font-size: 22px; } }
.hof-ico { width: 58px; height: 58px; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); } .hof-honours .hof-ico { width: 40px; height: 40px; } .hof-tile.empty .hof-ico { filter: grayscale(1); }
/* Help search: best answer box (routes/help.js) */
.hx-best { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2) inset; margin-bottom: 14px; }
.hx-best-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hx-best-h .eyebrow { margin: 0; }
.hx-best-q { margin: 6px 0 10px; font-size: 22px; }
.hx-best .prose p:last-child { margin-bottom: 0; }
.hx-best-more { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.7; }

/* Wordmark: "L4D2 Rebirth" in Rubik Dirt (Google Fonts, SIL OFL), a distressed stencil-style face */
.brand .brand-txt { font-family: 'Rubik Dirt', var(--head); font-weight: 400; letter-spacing: .02em; font-size: .92em; }
@media (max-width: 700px) { .brand .brand-txt { font-size: .8em; letter-spacing: 0; } }
@media (max-width: 660px) { .brand .brand-txt { display: none; } }
/* Main nav links (Ladder, Match log, Banner, Custom maps, Field guide, Supporter) in the wordmark's Rubik Dirt */
.nav > a { font-family: 'Rubik Dirt', var(--head); font-weight: 400; letter-spacing: .02em; }
/* Main menu links in Rubik Dirt, to match the wordmark */
.topbar .nav > a, .topbar .nav-more > summary { font-family: 'Rubik Dirt', var(--head); font-weight: 400; letter-spacing: .03em; }
/* Every heading in Rubik Dirt (page titles, section and card headings, the help center's section titles, Hall of Fame
   award names). Rubik Dirt has a single weight, so headings are set to 400 to avoid a smeared fake bold. */
h1, h2, h3, .page-title, .hx-group-h, .hx-sec-h, .hof-tile > b { font-family: 'Rubik Dirt', var(--head) !important; font-weight: 400 !important; letter-spacing: .02em; }
h1 .small, h2 .small, h3 .small, h2 .pill, h3 .pill, h1 .pill, .card-h h2 .muted, .mode h3 .small { font-family: var(--body) !important; }
/* The More menu's links, in Rubik Dirt like the rest of the menu */
.topbar .nav-more-menu a { font-family: 'Rubik Dirt', var(--head) !important; font-weight: 400 !important; letter-spacing: .03em; }
/* In the ☰ menu (narrow screens) the More links are listed one per row under the main links */
@media (max-width: 1340px) { .nav-more-menu a { display: block; } }
/* Distressed red frames on every box, to match Rubik Dirt's worn texture: a red border drawn on ::after and eaten away by
   a noise mask (so it's speckled and faded, not a clean line). Scrolling boxes (wide tables, the help index) get a plain
   faded red border instead, since an overlay would scroll with their content. */
:root { --grunge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 0 0 0 4.6'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); }
:where(.card, .leader, .match-tops .stat, .hof-tile, .medal-card, .medal-pin, .hx-q, .pct, .hof-honours li, .hof-champ, .cmap) { border-color: transparent !important; }
:where(.card, .leader, .match-tops .stat, .hof-tile, .medal-card, .medal-pin, .hx-q, .pct, .hof-honours li, .hof-champ, .cmap):not(.hx-search):not(.hx-index):not(.table-wrap) { position: relative; }
:where(.card, .leader, .match-tops .stat, .hof-tile, .medal-card, .medal-pin, .hx-q, .pct, .hof-honours li, .hof-champ, .cmap):not(.table-wrap):not(.hx-index)::after {
  content: ""; position: absolute; inset: -1px; border: 2px solid rgba(196, 30, 38, .78); border-radius: inherit; pointer-events: none;
  -webkit-mask-image: var(--grunge); mask-image: var(--grunge); -webkit-mask-size: 180px; mask-size: 180px; }
.card.table-wrap, .hx-index.card { border: 1px solid rgba(196, 30, 38, .5) !important; }

/* ---------- Season pass: "new reward unlocked" pop-up (lib/pass.js popHtml) ---------- */
.pass-pop { position: fixed; right: 18px; bottom: 18px; z-index: 80; width: min(340px, calc(100vw - 32px)); padding: 14px 16px 14px; background: var(--panel2); border: 1px solid rgba(var(--accent-rgb), .7); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); transform: translateY(20px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.pass-pop.in { transform: none; opacity: 1; }
.pass-pop-h { margin: 0 26px 10px 0; font-family: 'Rubik Dirt', var(--display, sans-serif); font-size: 17px; line-height: 1.2; color: #fff; }
.pass-pop ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.pass-pop li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.pass-pop li > :first-child { justify-self: center; }
.pass-pop li b { display: block; font-size: 14px; line-height: 1.2; } .pass-pop li span:not(.pf):not(.pass-bg):not(.pass-emoji) { font-size: 12px; color: var(--muted); }
.pass-pop .av { width: 32px; height: 32px; display: grid; place-items: center; font-style: normal; border-radius: 8px; }
.pass-pop .pass-bg { display: block; width: 44px; height: 28px; min-height: 0; padding: 0; border-radius: 5px; }
.pass-pop .pass-emoji { font-size: 26px; line-height: 1; }
.pass-pop-more { margin: -4px 0 10px 54px; font-size: 12px; color: var(--muted); }
.pass-pop-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pass-pop-x { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 6px; }
.pass-pop-x:hover { color: #fff; background: rgba(255,255,255,.06); }
@media (max-width: 520px) { .pass-pop { right: 16px; left: 16px; bottom: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .pass-pop { transition: none; } }
/* On the pass page: rewards unlocked since the last visit. */
.pass-cell.fresh { border-color: rgba(var(--accent-rgb), .9); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5), 0 0 16px rgba(var(--accent-rgb), .35); }
.pass-newtag { position: absolute; top: 4px; left: 5px; font-style: normal; font: 700 9px/1 var(--body, sans-serif); text-transform: uppercase; letter-spacing: .04em; background: var(--accent); color: #fff; padding: 3px 5px; border-radius: 4px; }

/* Home page: Live now, full width under the Play box (same size as Recent matches). */
.live-home .card-h h2 { display: flex; align-items: center; gap: 10px; }
.live-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 560px) { .live-home-grid { grid-template-columns: 1fr; } }

/* ---------- Endorsements: round emblems (public/endorse/<kind>.svg) ---------- */
.e-vibes { --ec: #5fd27e; --ec-rgb: 95,210,126; } .e-caller { --ec: #5aa9f0; --ec-rgb: 90,169,240; } .e-clutch { --ec: #f59a3b; --ec-rgb: 245,154,59; }
.e-emb { display: inline-block; vertical-align: middle; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.endorse-badge { display: inline-flex; margin-left: 6px; vertical-align: -3px; line-height: 0; border-radius: 50%; cursor: help; }
.endorse-badge:hover .e-emb { transform: scale(1.18); } .e-emb { transition: transform .15s; }
/* Match page picker */
.endorse-card .card-h { margin-bottom: 4px; }
.ep-left { font-family: 'Rubik Dirt', var(--display); font-size: 15px; color: var(--accent2); }
.ep-h { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ep-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.015); transition: border-color .15s, background .15s, opacity .15s; }
.ep-row.picked { border-color: rgba(var(--accent-rgb), .7); background: rgba(var(--accent-rgb), .07); }
.ep-row.full { opacity: .45; }
.ep-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .ep-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.ep-opt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--muted); background: var(--bg2); transition: border-color .15s, color .15s, background .15s; user-select: none; }
.ep-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ep-opt .e-emb { filter: grayscale(.55) brightness(.85); transition: filter .15s, transform .15s; }
.ep-opt:hover { color: var(--text); border-color: rgba(var(--ec-rgb), .6); } .ep-opt:hover .e-emb { filter: none; }
.ep-opt:has(input:checked) { color: #fff; border-color: var(--ec); background: rgba(var(--ec-rgb), .16); box-shadow: 0 0 12px rgba(var(--ec-rgb), .3); }
.ep-opt:has(input:checked) .e-emb { filter: none; transform: scale(1.08); }
.ep-opt:focus-within { outline: 2px solid rgba(var(--ec-rgb), .8); outline-offset: 2px; }
.ep-form .btn-row { margin-top: 14px; }
.ep-legend { display: none; margin: 12px 0 0; } .ep-legend .e-emb { vertical-align: -4px; }
@media (max-width: 560px) { .ep-opt span { display: none; } .ep-opt { padding: 4px; } .ep-legend { display: block; } }
/* Leaderboard → Endorsements */
.e-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 18px 0; }
.e-top { border-top: 3px solid var(--ec) !important; }
.e-top-h { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.e-top-h h2 { margin: 0; color: var(--ec); } .e-top-h p { margin: 2px 0 0; }
.e-top-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.e-top-list li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.e-top-list li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.e-place { width: 20px; text-align: center; font-family: 'Rubik Dirt', var(--display); color: var(--muted); }
.e-top-list li:first-child .e-place { color: var(--ec); }
.e-n { margin-left: auto; font-size: 18px; color: var(--ec); }
.e-th .e-emb { margin-right: 6px; } .e-th span { vertical-align: middle; }
.e-who { display: inline-flex; align-items: center; gap: 8px; }

/* Play page: who's locked in right now */
.q-list { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
.q-list-h { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.q-list-h b { color: var(--text); margin-left: 4px; }
.q-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; }
.q-list li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.q-list li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--text); }
.q-list .av { border-radius: 4px; flex: none; }
.q-list .rank { flex: none; }