/* Rated Eleet — "night-arena HUD": dark textured ground, neon edges, angled HUD panels. */
:root {
  --bg: #080b12;
  --bg-2: #0d1220;
  --panel: rgba(19, 26, 40, .82);
  --panel-solid: #131a28;
  --panel-2: #1b2438;
  --line: #27324a;
  --line-hi: #3a4867;
  --text: #e9eef8;
  --muted: #8d99b0;
  --accent: #39ff9f;      /* eleet green */
  --accent-2: #2be0ff;    /* cyan */
  --accent-ink: #03140b;
  --hot: #ff4fd8;         /* magenta highlight, used sparingly */
  --gold: #ffcf4a;
  --bad: #ff5d73;
  --warn: #ffab3d;
  --radius: 14px;
  --cut: 12px;            /* size of the angled HUD corner */
  --display: "Chakra Petch", "Rajdhani", system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; color: var(--text); font: 15px/1.55 var(--body); }
body {
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(43, 224, 255, .13), transparent 60%),
    radial-gradient(800px 500px at -10% 10%, rgba(57, 255, 159, .10), transparent 60%),
    radial-gradient(700px 600px at 50% 120%, rgba(255, 79, 216, .08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
/* faint arena grid */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(140, 170, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 170, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 80%);
}
.topbar, main, .foot { position: relative; z-index: 1; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, .brand { font-family: var(--display); letter-spacing: .02em; text-wrap: balance; }
h1 { font-size: clamp(30px, 6vw, 56px); line-height: 1.02; margin: 0 0 14px; text-transform: uppercase; }
h2 { font-size: 20px; margin: 0 0 14px; text-transform: uppercase; letter-spacing: .06em; }
h3 { font-size: 16px; margin: 0 0 6px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.grad { background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--hot)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(8, 11, 18, .85); backdrop-filter: blur(10px); z-index: 5; flex-wrap: wrap; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent); opacity: .55; }
.brand { font-size: 24px; font-weight: 700; color: var(--text); text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.brand::before { content: "E"; display: grid; place-items: center; width: 30px; height: 30px; font-size: 18px; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-2)); clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.brand span { color: var(--accent); text-shadow: 0 0 18px rgba(57, 255, 159, .55); }
#nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
main { max-width: 1040px; margin: 0 auto; padding: 28px 16px 70px; }
.foot { text-align: center; color: var(--muted); font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 26px 16px; border-top: 1px solid var(--line); }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border: 1px solid var(--line-hi); background: var(--panel-2); color: var(--text); font: 600 14px var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: background .15s, color .15s, box-shadow .15s; }
.btn:hover { background: #24304a; color: var(--accent); }
.btn.primary { background: linear-gradient(135deg, var(--accent), #2fe6c4); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.1); color: var(--accent-ink); box-shadow: 0 0 24px rgba(57, 255, 159, .45); }
.btn.small { padding: 7px 13px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- hero ---------- */
.hero { padding: 26px 0 8px; display: grid; gap: 22px; }
.hero p { max-width: 600px; color: var(--muted); font-size: 17px; margin: 0; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.statbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--panel); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); max-width: 600px; }
.stat { padding: 12px 16px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font: 700 26px var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.stat span { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stat:nth-child(3) b { color: var(--accent); text-shadow: 0 0 16px rgba(57, 255, 159, .45); }

/* ---------- panels & forms ---------- */
.panel { position: relative; background: var(--panel); border: 1px solid var(--line); padding: 20px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); backdrop-filter: blur(6px); }
.panel > h2::before { content: "// "; color: var(--accent-2); }
.stack { display: grid; gap: 18px; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 10px; margin: 26px 0 18px; padding: 14px; background: var(--panel); border: 1px solid var(--line); }
input, select, textarea { width: 100%; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: #5d6a84; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57, 255, 159, .15); }
textarea { min-height: 84px; resize: vertical; }
label.field { display: block; }
label.field > span, .lbl { display: block; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.section-title h2 { margin: 0; }

/* ---------- chips & tags ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 13px; border-radius: 6px; border: 1px solid var(--line-hi); background: var(--bg-2); color: var(--text); font-size: 13px; cursor: pointer; user-select: none; transition: all .12s; }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; box-shadow: 0 0 14px rgba(57, 255, 159, .35); }
.chip.bad:hover { border-color: var(--bad); }
.chip.bad[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: #1a0306; box-shadow: 0 0 14px rgba(255, 93, 115, .35); }
.tag { display: inline-block; padding: 3px 9px; border-radius: 5px; font: 500 12px var(--body); background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); }
.tag.good { color: var(--accent); border-color: rgba(57, 255, 159, .35); background: rgba(57, 255, 159, .06); }
.tag.bad { color: var(--bad); border-color: rgba(255, 93, 115, .35); background: rgba(255, 93, 115, .06); }

/* ---------- player cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 16px; }
.card { position: relative; display: grid; gap: 12px; color: inherit; background: var(--panel); border: 1px solid var(--line); padding: 16px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); transition: border-color .15s, transform .15s, background .15s; }
.card:hover { border-color: var(--h, var(--accent)); transform: translateY(-3px); background: rgba(27, 36, 56, .9); }
.card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(90deg, var(--h, var(--accent)), transparent); opacity: .0; transition: opacity .15s; }
.card:hover::after { opacity: 1; }
.card .row { display: flex; gap: 12px; align-items: center; }
.card .who { flex: 1; min-width: 0; }
.card h3 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.handle { color: var(--muted); font: 13px var(--mono); }
.meta { color: var(--muted); font-size: 13px; }
.card .score { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.mini-meter { flex: 1; height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; max-width: 120px; }
.mini-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 3px; }

/* avatar: per-player hue via --h */
.avatar { --h: var(--accent); width: 46px; height: 46px; display: grid; place-items: center; font: 700 20px var(--display); color: #fff; flex: none; background: linear-gradient(135deg, var(--h), color-mix(in srgb, var(--h) 35%, #0b0f17)); clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.avatar.lg { width: 96px; height: 96px; font-size: 42px; }

/* ---------- stars, tiers ---------- */
.stars { color: var(--gold); letter-spacing: 1px; white-space: nowrap; }
.stars .off { color: #343f55; }
.tier { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font: 700 11px var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.tier.eleet { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 0 18px rgba(57, 255, 159, .4); }
.tier.trusted { background: rgba(43, 224, 255, .15); color: var(--accent-2); }
.tier.rising { background: rgba(255, 207, 74, .14); color: var(--gold); }
.tier.risky { background: rgba(255, 93, 115, .15); color: var(--bad); }
.tier.new { background: var(--panel-2); color: var(--muted); }

/* ---------- profile ---------- */
.profile-hero { position: relative; padding: 0; overflow: hidden; }
.profile-banner { height: 110px; background:
    linear-gradient(120deg, color-mix(in srgb, var(--h) 55%, transparent), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px),
    var(--bg-2); border-bottom: 1px solid var(--line); }
.profile-body { padding: 0 20px 20px; display: grid; gap: 16px; }
.profile-head { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; margin-top: -48px; }
.profile-head .who { flex: 1; min-width: 200px; display: grid; gap: 4px; }
.profile-head h1 { font-size: clamp(28px, 5vw, 40px); margin: 0; }
.bio { font-size: 16px; max-width: 640px; margin: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.fact { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.fact b { display: block; font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }

.rep { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 24px; align-items: center; }
.bigscore { text-align: center; padding: 10px; }
.bigscore b { display: block; font: 700 64px/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.bigscore .of { font: 600 14px var(--mono); color: var(--muted); }
.dist { display: grid; gap: 6px; }
.dist-row { display: grid; grid-template-columns: 28px 1fr 28px; gap: 10px; align-items: center; font: 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.dist-bar { height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.dist-bar i { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
.vibe { margin-top: 14px; }
.vibe-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bg-2); margin: 6px 0; }
.vibe-bar .g { background: var(--accent); }
.vibe-bar .b { background: var(--bad); }

.review { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.review:first-of-type { border-top: 0; padding-top: 0; }
.review .avatar { width: 36px; height: 36px; font-size: 15px; }
.review p { margin: 6px 0 0; }

.star-pick { display: flex; gap: 6px; }
.star-pick button { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; width: 48px; height: 48px; font-size: 26px; color: #343f55; cursor: pointer; transition: all .12s; }
.star-pick button:hover { border-color: var(--gold); }
.star-pick button.on { color: var(--gold); border-color: rgba(255, 207, 74, .5); background: rgba(255, 207, 74, .08); text-shadow: 0 0 12px rgba(255, 207, 74, .5); }

/* ---------- misc ---------- */
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--panel-solid); border: 1px solid var(--accent); padding: 11px 20px; z-index: 10; max-width: calc(100% - 32px); font-weight: 600; box-shadow: 0 0 30px rgba(57, 255, 159, .25); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.toast.err { border-color: var(--bad); box-shadow: 0 0 30px rgba(255, 93, 115, .25); }
.auth { max-width: 440px; margin: 30px auto; }
.auth h1 { font-size: 32px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.empty { text-align: center; padding: 36px 20px; }

a:focus-visible, .btn:focus-visible, .chip:focus-visible, .card:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes rise { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cards .card { animation: rise .35s both; }
.cards .card:nth-child(2) { animation-delay: .04s; } .cards .card:nth-child(3) { animation-delay: .08s; }
.cards .card:nth-child(4) { animation-delay: .12s; } .cards .card:nth-child(n+5) { animation-delay: .16s; }
@media (max-width: 560px) {
  .rep { grid-template-columns: 1fr; }
  .statbar .stat { padding: 10px 12px; }
  .stat b { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:hover { transform: none; }
}

/* gamertags */
.gamertags { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.gt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 8px 8px 12px; min-width: 0; }
.gt-plat { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.gt-id { font: 500 14px var(--mono); overflow-wrap: anywhere; min-width: 0; user-select: all; }

/* ================= social ================= */
.navlink { position: relative; font: 600 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; }
.navlink:hover, .navlink.on { color: var(--text); }
.navlink.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; border-radius: 9px; background: var(--hot); color: #fff; font: 700 11px var(--body); vertical-align: 1px; }
.nav-me { display: inline-flex; margin-left: 4px; }
.avatar.sm { width: 34px; height: 34px; font-size: 14px; }
.avatar.xs { width: 26px; height: 26px; font-size: 11px; }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.danger-btn { color: var(--bad); border-color: rgba(255, 93, 115, .45); }
.pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.pill.lfg-pill { background: rgba(43, 224, 255, .15); color: var(--accent-2); }
.pill.grown { background: rgba(255, 207, 74, .14); color: var(--gold); }
.back { font: 600 13px var(--mono); letter-spacing: .06em; }
.narrow { max-width: 720px; margin: 0 auto; }

.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.follow-counts { display: flex; gap: 16px; font-size: 14px; }
.follow-counts a { color: var(--muted); }
.follow-counts b { color: var(--text); font-variant-numeric: tabular-nums; }

/* feed */
.feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; margin-top: 8px; }
.feed-side { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); }
@media (max-width: 860px) { .feed-layout { grid-template-columns: 1fr; } .feed-side { position: static; } }
.feed { display: grid; gap: 14px; }
.feed-tabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.ftab { font: 600 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 7px 12px; border: 1px solid transparent; }
.ftab.on { color: var(--accent); border-color: rgba(57, 255, 159, .35); background: rgba(57, 255, 159, .07); }
.feed-tabs input { flex: 1; min-width: 160px; width: auto; }
.side-list { display: grid; gap: 4px; }
.side-player { display: flex; align-items: center; gap: 10px; color: var(--text); padding: 6px; border-radius: 8px; }
.side-player:hover { background: var(--panel-2); }
.side-player .who { flex: 1; min-width: 0; display: grid; }
.side-player .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more { display: inline-block; margin-top: 10px; font-size: 13px; }
.cta-panel { display: grid; gap: 8px; justify-items: start; }
.cta-panel p { margin: 0; }

/* post card */
.post { position: relative; background: var(--panel); border: 1px solid var(--line); padding: 16px; display: grid; gap: 12px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.post.lfg { border-color: rgba(43, 224, 255, .3); }
.post-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.post-head .who { flex: 1; min-width: 140px; }
.post-name { color: var(--text); font-weight: 600; }
.post-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.post-game { font-size: 13px; color: var(--muted); }
.post-game b { color: var(--text); }
.lfg-box { background: linear-gradient(120deg, color-mix(in srgb, var(--h) 16%, transparent), transparent 70%), var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 10px; }
.lfg-game { font: 700 22px var(--display); text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
.lfg-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.lfg-meta span { font: 600 12px var(--mono); color: var(--accent-2); background: rgba(43, 224, 255, .08); border: 1px solid rgba(43, 224, 255, .25); padding: 3px 8px; border-radius: 4px; }
.slots { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.slot-row { display: flex; gap: 6px; flex-wrap: wrap; }
.slot-empty { width: 26px; height: 26px; border: 1px dashed var(--line-hi); clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); background: rgba(255,255,255,.02); }
.post-actions { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 10px; }
.act { background: transparent; border: 1px solid transparent; color: var(--muted); font: 600 13px var(--body); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.act:hover { color: var(--text); background: var(--panel-2); }
.act b { color: var(--text); margin-left: 2px; }
.act.on { color: var(--accent); }
.act.join { color: var(--accent-ink); background: var(--accent); }
.act.join.on { background: transparent; color: var(--accent); border-color: rgba(57, 255, 159, .4); }
.act.join:disabled { background: var(--panel-2); color: var(--muted); cursor: default; }
.act.danger:hover { color: var(--bad); }

/* composer */
.composer { display: grid; gap: 14px; }
.composer .tabs { grid-template-columns: auto auto; justify-content: start; margin: 0; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; align-self: end; padding-bottom: 10px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* comments, reply, chat */
.comments { display: grid; gap: 12px; margin-bottom: 14px; }
.comment { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.comment p { margin: 4px 0 0; overflow-wrap: anywhere; }
.reply { display: flex; gap: 8px; }
.reply input { flex: 1; }
.thread-row { display: flex; align-items: center; gap: 12px; color: var(--text); padding: 12px 6px; border-top: 1px solid var(--line); }
.thread-row:first-child { border-top: 0; }
.thread-row:hover { background: var(--panel-2); }
.thread-row .who { flex: 1; min-width: 0; }
.thread-row .preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.thread-row.unread .preview { color: var(--text); font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 8px var(--hot); flex: none; }
.chat { display: grid; gap: 12px; }
.chat-log { display: flex; flex-direction: column; gap: 8px; min-height: 260px; max-height: 55vh; overflow-y: auto; padding: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.bubble { align-self: flex-start; max-width: 80%; background: var(--panel-2); border: 1px solid var(--line); padding: 8px 12px; border-radius: 12px 12px 12px 3px; display: grid; gap: 2px; }
.bubble span { overflow-wrap: anywhere; white-space: pre-wrap; }
.bubble time { font: 11px var(--mono); color: var(--muted); }
.bubble.mine { align-self: flex-end; background: rgba(57, 255, 159, .12); border-color: rgba(57, 255, 159, .3); border-radius: 12px 12px 3px 12px; }
.note { display: flex; align-items: center; gap: 12px; color: var(--text); padding: 12px 6px; border-top: 1px solid var(--line); }
.note:first-child { border-top: 0; }
.note.unread { background: rgba(255, 79, 216, .06); }
.note:hover { background: var(--panel-2); }

/* modal */
.modal-wrap { position: fixed; inset: 0; z-index: 20; background: rgba(4, 6, 10, .7); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.modal { width: min(420px, 100%); background: var(--panel-solid); }

/* game picker */
.gp { display: grid; gap: 10px; }
.gp-chosen:empty::before { content: "No games yet. Search or tap a popular one below."; color: var(--muted); font-size: 13px; }
.on-chip { background: rgba(57, 255, 159, .1); border-color: rgba(57, 255, 159, .4); cursor: default; display: inline-flex; align-items: center; gap: 6px; }
.on-chip .x { background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.on-chip .x:hover { color: var(--bad); }
.gp-add { display: flex; gap: 8px; }
.gp-add input { flex: 1; }
.gp-popular { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.gp-quick { cursor: pointer; font: 500 12px var(--body); }
.gp-quick:hover { color: var(--accent); border-color: rgba(57, 255, 159, .4); }

/* Steam */
.badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.profile-head .badges { justify-content: flex-start; }
.tier.steam { background: rgba(102, 192, 244, .15); color: #66c0f4; }
.steam-box { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px; margin-bottom: 14px; border: 1px solid rgba(102, 192, 244, .35); background: linear-gradient(120deg, rgba(102, 192, 244, .1), transparent 70%), var(--bg-2); border-radius: 10px; }
.steam-box > div:first-child { flex: 1; min-width: 220px; }
.steam-box p { margin: 4px 0 0; font-size: 13px; }
.steam-btn { background: linear-gradient(135deg, #1b2838, #2a475e); border-color: #66c0f4; color: #c7d5e0; }
.steam-btn:hover { color: #fff; box-shadow: 0 0 20px rgba(102, 192, 244, .35); }
.steam-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--bg-2); }
.steam-stats .stat:last-child { border-right: 0; }
@media (max-width: 560px) { .steam-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steam-stats .stat:nth-child(2) { border-right: 0; } .steam-stats .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
.topgames { display: grid; gap: 8px; }
.tg { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.tg-name { min-width: 0; overflow-wrap: anywhere; }
.tg-bar { height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.tg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #66c0f4, var(--accent-2)); border-radius: 4px; }
.tg-hrs { font: 600 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }
.small { font-size: 12px; margin: 12px 0 0; }

/* ================= v3: profiles, match, presence, crews, events ================= */
.av-wrap { position: relative; display: inline-flex; flex: none; }
.av-wrap.is-on::after, .av-wrap.is-live::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg); background: var(--accent); }
.av-wrap.is-live::after { background: var(--bad); box-shadow: 0 0 10px var(--bad); animation: pulse 1.6s infinite; }
.av-wrap.big.is-on::after, .av-wrap.big.is-live::after { width: 20px; height: 20px; border-width: 3px; right: -4px; bottom: -4px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 93, 115, 0); } }
.presence { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.presence b { color: var(--text); }
.presence.live { color: var(--text); }
.live-dot, .on-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 8px var(--bad); flex: none; }
.on-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.live-text { color: var(--bad); }
.match { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid; }
.match b { font: 700 13px var(--display); }
.match.hi { color: var(--accent); border-color: rgba(57,255,159,.4); background: rgba(57,255,159,.08); }
.match.mid { color: var(--accent-2); border-color: rgba(43,224,255,.35); background: rgba(43,224,255,.06); }
.match.lo { color: var(--muted); border-color: var(--line); }
.match-line .match { white-space: normal; }
.tier.streamer { background: rgba(145, 70, 255, .18); color: #b98cff; }
.tag.trait { color: #ffcf4a; border-color: rgba(255,207,74,.3); background: rgba(255,207,74,.05); }
.tag.lf { color: var(--accent-2); border-color: rgba(43,224,255,.3); background: rgba(43,224,255,.05); }
.tag.game:hover { color: var(--accent); border-color: rgba(57,255,159,.4); }
.tag.grown-tag { color: var(--gold); }
.pill.streamer-pill { background: rgba(145, 70, 255, .18); color: #b98cff; }
.pill.bad-pill { background: rgba(255, 93, 115, .15); color: var(--bad); }

/* profile restyle */
.profile .profile-banner { height: 150px; position: relative; }
.banner-live { position: absolute; top: 12px; right: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: rgba(8, 11, 18, .75); border: 1px solid rgba(255, 93, 115, .5); font: 700 12px var(--mono); letter-spacing: .1em; color: #fff; }
.profile .profile-head { margin-top: -58px; align-items: flex-end; }
.profile .avatar.lg { width: 112px; height: 112px; font-size: 48px; box-shadow: 0 0 0 4px var(--panel-solid), 0 10px 30px rgba(0,0,0,.4); }
.profile .profile-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.statstrip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--bg-2); }
.statstrip > * { padding: 12px 14px; border-right: 1px solid var(--line); color: var(--text); display: grid; gap: 2px; min-width: 0; }
.statstrip > *:last-child { border-right: 0; }
.statstrip a:hover { background: var(--panel-2); }
.statstrip b { font: 700 22px var(--display); font-variant-numeric: tabular-nums; }
.statstrip span { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .statstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .statstrip > :nth-child(3) { border-right: 0; } .statstrip > :nth-child(-n+3) { border-bottom: 1px solid var(--line); } }
.match-card { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.ring { --pct: 50; width: 110px; height: 110px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, var(--panel-solid) 78%, transparent 80%), conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--bg-2) 0); }
.ring b { font: 700 28px/1 var(--display); color: var(--accent); }
.ring span { font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.reasons { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
.reasons li::before { content: "✓ "; color: var(--accent); font-weight: 700; }
@media (max-width: 520px) { .match-card { grid-template-columns: 1fr; justify-items: start; } }
.ptabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ptab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: 600 14px var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; cursor: pointer; white-space: nowrap; }
.ptab.on { color: var(--text); border-bottom-color: var(--accent); }
.ptab:hover { color: var(--text); }
.two-col { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

/* schedule heatmap */
.heat { display: grid; gap: 4px; font: 600 11px var(--mono); color: var(--muted); max-width: 520px; }
.heat-row { display: grid; grid-template-columns: 70px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; }
.heat-head span, .heat-head button { text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.heat .cell { height: 26px; border-radius: 4px; background: var(--bg-2); border: 1px solid var(--line); }
.heat .cell.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 0 10px rgba(57,255,159,.25); }
.heat.edit .cell { height: 36px; cursor: pointer; }
.heat.edit .cell:hover { border-color: var(--accent); }
.heat.edit button.col-toggle, .heat.edit button.row-toggle { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 4px 0; text-align: left; }
.heat.edit button.col-toggle { text-align: center; }
.heat.edit button:hover { color: var(--accent); }

/* streams, clips */
.streamer-panel { border-color: rgba(145, 70, 255, .35); }
.stream-twitch { border-color: #9146ff; color: #c8a8ff; }
.stream-kick { border-color: #53fc18; color: #9bff70; }
.stream-youtube { border-color: #ff3d3d; color: #ff8a8a; }
.stream-tiktok { border-color: #25f4ee; color: #8ff9f5; }
.player-frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; margin-top: 14px; border: 1px solid var(--line); background: #000; }
.player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-ph { margin-top: 14px; aspect-ratio: 16 / 9; max-width: 100%; display: grid; place-content: center; text-align: center; gap: 6px; border: 1px dashed rgba(145, 70, 255, .5); background: repeating-linear-gradient(135deg, rgba(145,70,255,.06) 0 10px, transparent 10px 20px); }
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.clip { display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); min-width: 0; }
.clip:hover { border-color: var(--accent); }
.clip > span:last-child { display: grid; min-width: 0; }
.clip .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-play { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); flex: none; font-size: 13px; }

/* integrity, ratings */
.integrity.is-flagged { border-color: rgba(255, 93, 115, .5); }
.clean { color: var(--accent); margin: 0; font-weight: 600; }
.integ-list { display: grid; gap: 8px; }
.integ { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.integ span:first-of-type { color: var(--muted); font-size: 13px; }
.integ.confirmed { border-color: rgba(255, 93, 115, .45); background: rgba(255, 93, 115, .06); }
.flag-box { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg-2); }
.flag-box summary { cursor: pointer; color: var(--bad); font-weight: 600; font-size: 14px; }
.review.disputed { opacity: .7; }
.reply-box { margin-top: 8px; padding: 8px 12px; border-left: 2px solid var(--accent-2); background: rgba(43, 224, 255, .05); font-size: 14px; }
.rev-actions { display: flex; gap: 4px; margin-top: 6px; }
.review .pill { margin-left: 4px; }

/* edit form */
.edit-form .panel > h2 { margin: 0; }
.banner-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr)); gap: 8px; }
.bp { height: 52px; border: 2px solid var(--line); border-radius: 8px; color: var(--text); font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; display: flex; align-items: flex-end; padding: 6px 8px; }
.bp.on { border-color: var(--accent); box-shadow: 0 0 14px rgba(57,255,159,.3); }
.save-bar { position: sticky; bottom: env(safe-area-inset-bottom, 0px); display: flex; gap: 10px; flex-wrap: wrap; padding: 12px; background: rgba(8, 11, 18, .9); backdrop-filter: blur(8px); border: 1px solid var(--line); z-index: 4; }
.radio { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.radio input { width: 18px; height: 18px; accent-color: var(--accent); }
.checks { display: grid; gap: 4px; align-self: end; }
.check.inline { padding-bottom: 0; align-self: center; }
.grid2.tight { gap: 8px; grid-template-columns: 1fr 1fr; }

/* nav menu */
.menu-wrap { position: relative; }
.nav-me { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; color: var(--muted); padding: 2px; }
.caret { font-size: 11px; }
.menu { position: absolute; right: 0; top: calc(100% + 10px); width: 240px; background: var(--panel-solid); border: 1px solid var(--line-hi); box-shadow: 0 20px 50px rgba(0,0,0,.5); display: grid; padding: 6px; z-index: 30; }
.menu a, .menu button { display: block; text-align: left; padding: 9px 12px; color: var(--text); background: none; border: 0; font: 500 14px var(--body); cursor: pointer; border-radius: 6px; }
.menu a:hover, .menu button:hover { background: var(--panel-2); color: var(--accent); }
.menu-head { display: flex; gap: 10px; align-items: center; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head > span { display: grid; }

/* home extras */
.hero.slim { padding-bottom: 0; }
.hero.slim h1 { font-size: clamp(28px, 5vw, 44px); }
.feature-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; }
.feature-row > div { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 2px; }
.feature-row b { font: 700 14px var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.feature-row span { font-size: 13px; color: var(--muted); }
.status-panel.live { border-color: rgba(255, 93, 115, .5); }
.side-event { display: grid; gap: 1px; padding: 8px; border-radius: 8px; color: var(--text); font-size: 14px; }
.side-event:hover { background: var(--panel-2); }
.side-event .muted { font-size: 12px; }

/* crews */
.crew-badge { --h: var(--accent); min-width: 52px; height: 52px; padding: 0 8px; display: grid; place-items: center; font: 700 15px var(--display); letter-spacing: .06em; color: #fff; background: linear-gradient(135deg, var(--h), color-mix(in srgb, var(--h) 30%, #0b0f17)); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); flex: none; }
.crew-badge.lg { min-width: 100px; height: 100px; font-size: 26px; box-shadow: 0 0 0 4px var(--panel-solid); }
.crew-badge.sm { min-width: 38px; height: 34px; font-size: 11px; }
.crew-chip { font: 700 13px var(--mono); color: var(--accent-2); letter-spacing: .04em; }
.crew-chip:hover { color: var(--accent); }

/* events */
.event-card { display: grid; grid-template-columns: 72px 1fr; gap: 14px; color: var(--text); background: var(--panel); border: 1px solid var(--line); padding: 14px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.event-card:hover { border-color: var(--accent-2); }
.event-card.live { border-color: rgba(255, 93, 115, .5); }
.ev-date { display: grid; align-content: center; justify-items: center; background: var(--bg-2); border: 1px solid var(--line); padding: 8px 4px; font: 600 11px var(--mono); text-transform: uppercase; color: var(--muted); letter-spacing: .1em; }
.ev-date b { font: 700 30px/1 var(--display); color: var(--text); }
.ev-body { min-width: 0; display: grid; gap: 4px; }
.ev-body h3 { margin: 0; font-size: 18px; }
.ev-kind { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.ev-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; margin-top: 4px; }
.event-hero { display: grid; gap: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--h) 18%, transparent), transparent 70%), var(--panel); }
.event-hero h1 { margin: 0; font-size: clamp(28px, 5vw, 42px); }
.event-hero.live { border-color: rgba(255, 93, 115, .5); }
.ev-when { display: grid; gap: 2px; }
.ev-when b { font: 700 18px var(--display); }
.ev-when span { color: var(--muted); font-size: 14px; }
.host-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.host-row a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.att { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 6px; }
.att-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; color: var(--text); min-width: 0; }
.att-row:hover { background: var(--panel-2); }
.soon-ico { width: 34px; height: 34px; display: grid; place-items: center; flex: none; }

/* leaderboards */
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lb li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; }
.rank { font: 700 16px var(--display); color: var(--muted); text-align: center; }
.rank.r1 { color: var(--gold); } .rank.r2 { color: #c9d3e6; } .rank.r3 { color: #e0965a; }
.lb-row { display: flex; align-items: center; gap: 10px; color: var(--text); padding: 6px; border-radius: 8px; min-width: 0; }
.lb-row:hover { background: var(--panel-2); }
.lb-row .who { flex: 1; min-width: 0; display: grid; }
.lb-val { font: 700 13px var(--mono); color: var(--accent); white-space: nowrap; }
@media (max-width: 400px) { .lb-grid { grid-template-columns: 1fr; } }

/* ================= v4: interactivity, chat, moderation, recap, badges ================= */
.count.bump { animation: bump .4s ease; }
@keyframes bump { 40% { transform: scale(1.35); } }
.act.pop { animation: pop .35s ease; }
@keyframes pop { 40% { transform: scale(1.25); color: var(--accent); } }
.room-log { min-height: 200px; max-height: 360px; }
.bubble-name { font: 600 11px var(--mono); color: var(--accent-2); letter-spacing: .04em; }
.att-mark { display: grid; gap: 8px; }
.att-mark-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.att-mark-row .who { flex: 1; min-width: 140px; display: grid; }
.btn.danger-btn.on { background: rgba(255, 93, 115, .15); }
.cap-bar { height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; max-width: 420px; }
.cap-bar.big { height: 10px; max-width: none; border-radius: 5px; }
.cap-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; transition: width .6s ease; }
.member-row { display: grid; gap: 2px; }
.member-tools { display: flex; gap: 4px; padding-left: 50px; }
.member-tools .act { padding: 3px 8px; font-size: 12px; }
.steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.notif-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.notif-row > div { flex: 1; min-width: 200px; }
.modal.wide { width: min(620px, 100%); max-height: 85vh; overflow-y: auto; }

/* bracket */
.bracket { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 6px; }
.b-round { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; min-width: 200px; }
.b-title { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.b-match { border: 1px solid var(--line); background: var(--bg-2); display: grid; }
.b-slot { display: flex; align-items: center; gap: 8px; padding: 7px 10px; min-height: 40px; font-size: 14px; }
.b-slot + .b-slot { border-top: 1px solid var(--line); }
.b-slot span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-slot.won { background: rgba(57, 255, 159, .1); font-weight: 700; }
.b-slot.won span::after { content: " ✓"; color: var(--accent); }
.b-slot.lost { opacity: .45; }
.b-slot .btn { padding: 3px 9px; font-size: 11px; }

/* moderation */
.statbar.wide { max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); clip-path: none; }
.statbar.wide .stat:first-child b { color: var(--bad); text-shadow: none; }
.statbar.wide .stat:nth-child(3) b { color: var(--text); text-shadow: none; }
.ban-form { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ban-form input { width: auto; min-width: 140px; flex: 1; padding: 7px 10px; }
.report { display: grid; gap: 10px; }
.report.open { border-color: rgba(255, 93, 115, .35); }
.report-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.report-body { display: grid; gap: 6px; font-size: 14px; }
.quote { margin: 0; padding: 8px 12px; border-left: 2px solid var(--line-hi); background: var(--bg-2); overflow-wrap: anywhere; }
.suspended { border-color: rgba(255, 93, 115, .5); color: var(--bad); font-weight: 600; text-align: center; }
.mod-link { color: var(--bad) !important; }

/* recap */
.recap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.recap-tile { background: var(--panel); border: 1px solid var(--line); padding: 16px; display: grid; gap: 4px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.recap-tile b { font: 700 36px/1 var(--display); font-variant-numeric: tabular-nums; }
.recap-tile span { color: var(--muted); font-size: 13px; }
.recap-tile em { font-style: normal; font-weight: 700; }
.recap-tile em.up { color: var(--accent); } .recap-tile em.down { color: var(--bad); }
.recap-link { display: grid; gap: 4px; color: var(--text); border-color: rgba(43, 224, 255, .35); }
.recap-link:hover { border-color: var(--accent-2); }

/* badges */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; }
.ach { display: grid; gap: 2px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; opacity: .45; }
.ach.got { opacity: 1; border-color: rgba(255, 207, 74, .45); background: linear-gradient(135deg, rgba(255, 207, 74, .1), transparent 70%), var(--bg-2); }
.ach-ico { color: var(--gold); font-size: 18px; line-height: 1; }
.ach b { font: 700 13px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.ach span:last-child { font-size: 12px; color: var(--muted); }
.good-num { color: var(--accent); } .bad-num { color: var(--bad); }

/* queue */
.queue-panel { border-color: rgba(145, 70, 255, .35); }

/* quick match, completion, live row */
.quick-match { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; cursor: pointer; color: var(--text); font: inherit; border: 1px solid rgba(57, 255, 159, .4); background: linear-gradient(120deg, rgba(57, 255, 159, .14), rgba(43, 224, 255, .08) 60%, transparent), var(--panel); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); transition: box-shadow .2s, transform .2s; }
.quick-match:hover { box-shadow: 0 0 28px rgba(57, 255, 159, .25); transform: translateY(-1px); }
.quick-match > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.quick-match b { font: 700 16px var(--display); text-transform: uppercase; letter-spacing: .05em; }
.quick-match span span { color: var(--muted); font-size: 13px; }
.qm-ico { font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); border-radius: 50%; flex: none; }
kbd { font: 600 11px var(--mono); padding: 2px 6px; border: 1px solid var(--line-hi); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); background: var(--bg-2); }
.menu kbd { float: right; }
.kbd-list { display: grid; gap: 8px; }
.kbd-list div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.completion .pct { font: 700 20px var(--display); color: var(--accent); }
.todo { display: grid; gap: 4px; }
.todo a { font-size: 14px; padding: 4px 0; }
.live-row { border-color: rgba(255, 93, 115, .35); }
.live-row h2 { display: flex; align-items: center; gap: 8px; }
.live-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.live-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; color: var(--text); flex: none; max-width: 280px; }
.live-card:hover { border-color: var(--bad); }
.live-card .who { display: grid; min-width: 0; }
.live-card .handle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.new-pill { position: sticky; top: calc(70px + env(safe-area-inset-top, 0px)); z-index: 3; justify-self: center; align-self: center; margin: 0 auto; padding: 8px 18px; border: 0; border-radius: 999px; cursor: pointer; background: var(--accent); color: var(--accent-ink); font: 700 13px var(--display); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 24px rgba(57, 255, 159, .35); animation: rise .3s both; }

/* rank & role */
.gd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.gd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; }
.gd b { flex-basis: 100%; font-size: 14px; }
.gd-edit { display: grid; gap: 8px; }
.gd-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 1fr; gap: 8px; align-items: center; }
.gd-row b { font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .gd-row { grid-template-columns: 1fr 1fr; } .gd-row b { grid-column: 1 / -1; } }


/* ================= no sideways scrolling anywhere ================= */
html, body { max-width: 100%; overflow-x: hidden; }
main, .feed-main, .feed-side, .stack > *, .panel, .card, .post, .event-card { min-width: 0; }
.topbar { flex-wrap: wrap; }
#nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; min-width: 0; }
@media (max-width: 760px) {
  .topbar { justify-content: center; }
  #nav { justify-content: center; width: 100%; }
  .navlink { padding: 6px 8px; font-size: 12px; }
}
/* rows that used to scroll sideways now wrap */
.live-strip { flex-wrap: wrap; overflow-x: visible; }
.live-card { max-width: 100%; }
.ptabs { flex-wrap: wrap; overflow-x: visible; }
.ptab { padding: 8px 10px; }
.bracket { flex-wrap: wrap; overflow-x: visible; }
.b-round { flex: 1 1 200px; min-width: 0; }
@media (max-width: 640px) { .bracket { flex-direction: column; } .b-round { flex-basis: auto; } }
.feed-tabs input, .ban-form input { min-width: 0; }
.statbar { max-width: 100%; }
.statstrip > *, .stat { min-width: 0; }
.statstrip b, .stat b { overflow-wrap: anywhere; }
.handle, .meta, .who b, .post-name, h1, h2, h3, .bio, .fact, .tag, .chip, .gt-id, .lfg-game { overflow-wrap: anywhere; }
.chips { min-width: 0; }
.profile-head .who { min-width: 0; }
.profile-actions { min-width: 0; }
.heat { width: 100%; }
@media (max-width: 420px) { .heat-row { grid-template-columns: 52px repeat(7, minmax(0, 1fr)); gap: 3px; } .heat { font-size: 10px; } }
.menu { max-width: calc(100vw - 32px); }
.modal { max-width: 100%; }
.save-bar { max-width: 100%; }
img, iframe, video { max-width: 100%; }
.profile-head > * { min-width: 0; max-width: 100%; }
.profile-head .who { flex: 1 1 180px; min-width: 0; }
.badges { min-width: 0; max-width: 100%; }
.tier { white-space: normal; max-width: 100%; }

/* ================= formatting fixes from the screenshot review ================= */
/* Hidden things must stay hidden even when a layout class sets display (menus, inactive tabs, form sections). */
[hidden] { display: none !important; }
/* Same "//" heading marker on every panel heading */
.panel .section-title h2::before { content: "// "; color: var(--accent-2); }
.statbar.wide .stat b::before, .modal h2::before { content: none; }
/* Stat strip fits any number of tiles */
.statstrip { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); }
.statstrip > * { border-bottom: 1px solid var(--line); margin-bottom: -1px; }
@media (max-width: 700px) { .statstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .statstrip > * { border-right: 1px solid var(--line); } }
/* Composer type buttons on one row */
.composer .tabs { display: flex; flex-wrap: wrap; gap: 8px; }
/* Roomier, tidier sidebar rows */
.feed-layout { grid-template-columns: minmax(0, 1fr) 320px; }
.feed-side .panel { padding: 16px; }
.side-player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.side-player .handle { font: 12px/1.35 var(--body); color: var(--muted); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-player > .match, .side-player > .tier { justify-self: end; white-space: nowrap; }
.side-player > .btn { justify-self: end; }
.status-panel .grid2.tight { grid-template-columns: 1fr 1fr; }
.status-panel select, .status-panel input { min-width: 0; font-size: 14px; padding: 9px 10px; }
.completion h2, .status-panel h2 { font-size: 17px; }
@media (max-width: 860px) { .feed-layout { grid-template-columns: 1fr; } }
/* Stream buttons: plain rounded so the colored border isn't cut by the angled corner */
[class*="stream-"].btn { clip-path: none; border-radius: 6px; }

/* ================= bigger grouped menu + phone tab bar ================= */
.menu { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 90px); overflow-y: auto; }
.menu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
@media (max-width: 520px) { .menu-cols { grid-template-columns: 1fr; } }
.menu-group { display: grid; align-content: start; padding: 6px 0; }
.menu-label { font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); padding: 4px 12px 6px; }
.menu-group a, .menu-group button { padding: 7px 12px; }
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    background: rgba(8, 11, 18, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  .tabbar a { position: relative; display: grid; justify-items: center; gap: 2px; color: var(--muted); font: 600 10px var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 4px 0; }
  .tabbar a.on { color: var(--accent); }
  .tb-ico { font-size: 17px; line-height: 1; }
  .tabbar .count { position: absolute; top: -2px; left: 55%; margin: 0; }
  .tb-main { justify-self: center; width: 52px; height: 52px; margin-top: -22px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font-size: 22px; cursor: pointer; box-shadow: 0 6px 20px rgba(57, 255, 159, .35); }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  #nav .navlink { display: none; }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .save-bar { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ================= player card fixes ================= */
.card { align-content: start; }
.card .row { flex-wrap: wrap; row-gap: 8px; }
.card .who { flex: 1 1 120px; min-width: 0; }
.card .who h3, .card .handle { overflow-wrap: normal; word-break: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .row > .badges { order: 3; flex: 1 1 100%; justify-content: flex-start; }
.chips { align-items: flex-start; align-content: flex-start; }
.tag, .chip, .pill, .tier { align-self: flex-start; height: auto; }
.crew-card .row > .pill { margin-left: auto; }
/* names and handles in lists: one line with … instead of breaking mid-word */
.lb-row .who b, .lb-row .handle, .side-player .who b, .att-row span, .thread-row .who b, .member-row .handle, .menu-head .handle, .live-card .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.lb-row .who { overflow: hidden; }
.att-row span { min-width: 0; }
@media (max-width: 760px) {
  .topbar { justify-content: space-between; flex-wrap: nowrap; }
  #nav { width: auto; justify-content: flex-end; }
  .brand { font-size: 20px; }
}

/* ================= v5: payouts, clans, wars, chaos, rich messages ================= */
.test-banner { padding: 10px 14px; border: 1px dashed rgba(255, 207, 74, .5); background: rgba(255, 207, 74, .07); color: var(--gold); font-size: 13px; border-radius: 8px; }
.test-banner b { color: var(--gold); }
.price { display: inline-flex; align-items: baseline; gap: 2px; }
.price b { font: 700 22px var(--display); color: var(--accent); }
.price span { color: var(--muted); font-size: 12px; }
.coach-card .row .price { margin-left: auto; }
.coach-panel, .prize-panel { border-color: rgba(57, 255, 159, .35); }
.prize-total { font: 700 28px var(--display); color: var(--gold); }
.ledger { display: grid; gap: 6px; }
.ledger-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ledger-row:first-child { border-top: 0; }
.ledger-row b { font: 700 15px var(--display); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .ledger-row { grid-template-columns: auto minmax(0, 1fr) auto; } .ledger-row > :last-child { grid-column: 2 / -1; } }

.clan-tag { font: 700 13px var(--mono); color: var(--accent-2); letter-spacing: .04em; white-space: nowrap; }
h1 .clan-tag { font-size: 18px; }
.verified-dot, .verified { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 3px; border-radius: 50%; background: var(--accent-2); color: var(--accent-ink); font: 700 10px var(--body); vertical-align: 2px; }
.clan-record { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; color: var(--muted); }
.clan-record b { color: var(--text); font-variant-numeric: tabular-nums; }
.small-b { font-size: 14px !important; }
.type-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 8px; }
.tp { display: grid; gap: 4px; text-align: left; padding: 12px; background: var(--bg-2); border: 2px solid var(--line); border-radius: 10px; color: var(--text); cursor: pointer; font: inherit; }
.tp b { font: 700 16px var(--display); text-transform: uppercase; letter-spacing: .05em; }
.tp span { font-size: 13px; color: var(--muted); }
.tp.on { border-color: var(--accent); box-shadow: 0 0 14px rgba(57, 255, 159, .25); }
.wars { display: grid; gap: 8px; }
.war { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; }
.war-sides { display: flex; align-items: center; gap: 8px; }
.vs { font: 700 13px var(--display); color: var(--bad); }
.war-info { flex: 1 1 180px; display: grid; min-width: 0; }
.war-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ip-list { margin-top: 10px; max-height: 50vh; overflow-y: auto; }

/* chaos */
.tier.chaos, .pill.chaos-pill { background: rgba(255, 93, 115, .16); color: #ff8fa0; }
.post.chaos-post { border-color: rgba(255, 93, 115, .45); background: repeating-linear-gradient(135deg, rgba(255, 93, 115, .035) 0 12px, transparent 12px 24px), var(--panel); }
.chaos-banner { display: grid; gap: 4px; border-color: rgba(255, 93, 115, .45); }
.chaos-banner b { font: 700 16px var(--display); color: #ff8fa0; text-transform: uppercase; letter-spacing: .05em; }
.chaos-banner span { font-size: 14px; color: var(--muted); }
.chaos-check { align-items: flex-start; padding: 12px; border: 1px dashed rgba(255, 93, 115, .45); border-radius: 8px; }
.chaos-check span { font-size: 14px; }
.tag.fun, .chip.fun { color: #c9a6ff; border-color: rgba(145, 70, 255, .4); }
.chip.fun[aria-pressed="true"] { background: #9146ff; border-color: #9146ff; color: #fff; box-shadow: 0 0 14px rgba(145, 70, 255, .35); }
.troll-board { border-color: rgba(255, 93, 115, .35); }

/* rich messages */
.bubble { position: relative; }
.bubble.deleted { opacity: .55; font-style: italic; }
.msg-card { display: grid; gap: 4px; margin-top: 6px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line-hi); border-radius: 10px; color: var(--text); min-width: min(240px, 100%); }
.msg-card.play { border-color: rgba(57, 255, 159, .4); }
.mc-kind { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.msg-card .hero-ctas { margin-top: 4px; }
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.react { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.react.mine { border-color: var(--accent); }
.msg-tools { position: absolute; top: -12px; right: 6px; display: none; gap: 2px; }
.bubble:hover .msg-tools, .bubble:focus-within .msg-tools { display: flex; }
@media (hover: none) { .msg-tools { display: flex; position: static; justify-content: flex-end; } }
.mt { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 12px; padding: 2px 7px; cursor: pointer; }
.mt:hover { color: var(--text); }
.react-pick { position: absolute; z-index: 5; top: -40px; right: 0; display: flex; gap: 2px; padding: 4px; background: var(--panel-solid); border: 1px solid var(--line-hi); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.bubble.mine .react-pick { right: auto; left: 0; }
.react-pick button { background: none; border: 0; font-size: 16px; padding: 2px 6px; cursor: pointer; border-radius: 999px; color: var(--text); }
.react-pick button:hover { background: var(--panel-2); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick .qr { cursor: pointer; }
.quick .qr:hover { color: var(--accent); border-color: rgba(57, 255, 159, .4); }
.attach-btn { font-size: 18px; padding: 6px 12px; }
.att-row-form { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.att-row-form b { font-size: 14px; }
@media (max-width: 480px) { .att-row-form { grid-template-columns: 1fr auto; } .att-row-form b { grid-column: 1 / -1; } }

/* ===================== v6: boards, times, rep cards, rules, about, GTA VI ===================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hint { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; overflow-wrap: anywhere; }
.field em { font-style: normal; font-size: 11px; text-transform: none; letter-spacing: 0; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.linkish { background: none; border: 0; padding: 4px 0; color: var(--muted); font: 600 13px var(--body); cursor: pointer; }
.linkish:hover { color: var(--accent); }
.linkish.danger:hover { color: var(--bad); }
.tier.flagged { background: rgba(255, 93, 115, .16); color: var(--bad); }

/* Squad Up time box: every player's own clock */
.when-box { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0 2px; font-size: 13px; min-width: 0; }
.when-mine { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: rgba(57, 255, 159, .1); border: 1px solid rgba(57, 255, 159, .3); color: var(--text); flex-wrap: wrap; }
.when-mine b { color: var(--accent); font-family: var(--mono); font-weight: 600; }
.when-ico { color: var(--accent); }
.when-other { padding: 4px 10px; border-radius: 6px; background: var(--panel-2); color: var(--text); font-size: 12.5px; overflow-wrap: anywhere; }

/* Boards */
.boards-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 18px; }
.boards-side { position: sticky; top: 78px; }
.board-list { display: grid; gap: 2px; max-height: 62vh; overflow-y: auto; }
.board-list a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--text); font-size: 14px; min-width: 0; }
.board-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list a b { font: 600 11px var(--mono); color: var(--muted); align-self: center; }
.board-list a:hover { background: var(--panel-2); }
.board-list a.on { background: rgba(57, 255, 159, .12); color: var(--accent); }
.board-select { display: none; }
.board-head h1 { font-size: clamp(24px, 4.5vw, 34px); margin: 2px 0 4px; text-wrap: balance; }
.board-head p { margin: 0; }
.board-filters { margin: 0; grid-template-columns: auto minmax(0, 1fr) minmax(0, 180px); align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg-b { background: transparent; border: 0; color: var(--muted); padding: 8px 14px; font: 700 12px var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.seg-b.on { background: var(--accent); color: var(--accent-ink); }
.bthread-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.bthread-row:hover { border-color: var(--line-hi); }
.bthread-row.pinned { border-color: rgba(57, 255, 159, .35); }
.votes { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vote { width: 32px; height: 26px; border-radius: 6px; border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.vote:hover { background: var(--panel-2); color: var(--text); }
.vote.up.on { color: var(--accent); background: rgba(57, 255, 159, .12); }
.vote.down.on { color: var(--bad); background: rgba(255, 93, 115, .12); }
.vscore { font: 600 13px var(--mono); }
.tr-body, .tm-body, .reply-body { min-width: 0; }
.tr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.tr-title { display: block; font: 600 16px/1.35 var(--body); color: var(--text); overflow-wrap: anywhere; }
.tr-title:hover { color: var(--accent); }
.tr-link { display: block; font: 500 12px var(--mono); color: var(--accent-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.tr-link.big { font-size: 13px; margin: 8px 0; white-space: normal; overflow-wrap: anywhere; }
.tr-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.tr-meta a { color: var(--muted); }
.tr-meta a:hover { color: var(--text); }
.flair { display: inline-flex; padding: 2px 8px; border-radius: 4px; font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--panel-2); color: var(--text); }
.flair-lfg, .flair-recruiting { background: rgba(57, 255, 159, .14); color: var(--accent); }
.flair-question, .flair-guide { background: rgba(43, 224, 255, .14); color: var(--accent-2); }
.flair-clip, .flair-meme { background: rgba(255, 79, 216, .14); color: var(--hot); }
.flair-news, .flair-event { background: rgba(255, 207, 74, .14); color: var(--gold); }
.pin-pill { background: rgba(57, 255, 159, .14); color: var(--accent); }
.op-pill { background: rgba(43, 224, 255, .14); color: var(--accent-2); }
.thread-page { max-width: 860px; margin: 18px auto 0; }
.thread-main { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.thread-main h1 { font-size: clamp(22px, 4vw, 30px); margin: 4px 0 2px; text-wrap: balance; overflow-wrap: anywhere; }
.thread-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 4px; line-height: 1.65; }
.reply-acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.breply { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.breply.nested { margin-left: 34px; border-left: 3px solid var(--line-hi); }
.breply p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Rep card + embed */
.repcard-wrap { margin: 4px 0 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.repcard-wrap img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; }
.embed-details summary { cursor: pointer; color: var(--accent-2); font-weight: 600; margin-bottom: 8px; }
.embed-details .gt { margin-top: 8px; }
.embed-details .gt-id { overflow-wrap: anywhere; font-size: 11.5px; }
body.embed-mode { background: transparent; }
body.embed-mode::after, body.embed-mode .topbar, body.embed-mode .foot, body.embed-mode .tabbar { display: none !important; }
body.embed-mode main { padding: 0; margin: 0; max-width: none; }
.embed-badge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av who score" "brand brand brand"; gap: 6px 12px; align-items: center; padding: 14px 16px 10px; max-width: 380px; background: linear-gradient(135deg, #0d1220, #141c2e); border: 1px solid var(--line); border-top: 3px solid var(--h, var(--accent)); border-radius: 14px; color: var(--text); text-decoration: none; }
.embed-badge > .avatar { grid-area: av; }
.eb-who { grid-area: who; display: grid; min-width: 0; }
.eb-who b { font: 700 16px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.eb-score { grid-area: score; display: grid; justify-items: end; }
.eb-score b { font: 700 28px var(--display); color: var(--gold); line-height: 1; }
.eb-score .muted { font-size: 11px; }
.eb-brand { grid-area: brand; justify-self: end; font: 700 11px var(--display); letter-spacing: .08em; color: var(--muted); }
.eb-brand span { color: var(--accent); }

/* Age check */
.age-check { border-color: rgba(43, 224, 255, .35); }
.age-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.age-stop { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(255, 93, 115, .14); color: #ffb3bf; }

/* Prose pages: rules, about */
.prose-page { max-width: 820px; margin: 0 auto; }
.hero.slim { padding-bottom: 0; }
.hero.slim h1, .gta-hero h1 { text-wrap: balance; }
.rules { display: grid; gap: 10px; }
.rule { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.rule-n { font: 700 26px var(--display); color: var(--accent); line-height: 1.1; }
.rule h2 { margin: 0 0 4px; font-size: 18px; }
.rule p { margin: 0; color: #c3cbe0; max-width: 65ch; }
.story p { font-size: 16.5px; line-height: 1.75; max-width: 65ch; margin: 0 0 14px; color: #d5dcec; }
.story .sig { color: var(--muted); font-style: italic; margin: 6px 0 0; }
.story h2 { margin-top: 0; }
.about-grid { margin-top: 4px; }
.center-ctas { justify-content: center; }
.story-link { display: block; max-width: 640px; padding: 10px 14px; border-left: 3px solid var(--accent); background: rgba(57, 255, 159, .06); color: #c3cbe0; font-size: 14px; }
.story-link b { color: var(--accent); white-space: nowrap; }

/* GTA VI hub */
.gta-hero { padding-top: 30px; }
.countdown-big { display: flex; flex-wrap: wrap; gap: 10px; }
.countdown-big div { display: grid; justify-items: center; min-width: 88px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--hot); }
.countdown-big b { font: 700 38px var(--display); line-height: 1; }
.countdown-big span { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 860px) {
  .boards-layout { grid-template-columns: minmax(0, 1fr); }
  .boards-side { position: static; }
  .board-list { display: none; }
  .board-select { display: grid; }
  .boards-side .recap-link { display: none; }
}
@media (max-width: 560px) {
  .board-filters { grid-template-columns: minmax(0, 1fr); }
  .seg { justify-self: start; }
  .bthread-row, .thread-main { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .breply { grid-template-columns: 32px minmax(0, 1fr); gap: 6px; padding: 10px; }
  .breply.nested { margin-left: 14px; }
  .vote { width: 28px; }
  .countdown-big div { min-width: 72px; }
  .countdown-big b { font-size: 30px; }
}
.foot { display: grid; gap: 8px; justify-items: center; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.foot-links a { color: var(--muted); font-size: 13px; }
.foot-links a:hover { color: var(--accent); }
.boards-side .board-select { display: none; }
.thread-main h1 { font: 700 clamp(20px, 3.6vw, 27px)/1.3 var(--body); text-transform: none; letter-spacing: 0; }
@media (max-width: 860px) { .boards-side .board-select { display: grid; } }

/* ===================== Homepage (activity hub) ===================== */
.page-head { padding: 22px 0 4px; }
.page-h1 { font-size: clamp(26px, 5vw, 38px); margin: 0; }
.hub-welcome { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 18px; }
.hw-who { display: flex; gap: 14px; align-items: center; min-width: 0; }
.hw-who > div { min-width: 0; }
.hw-h1 { font-size: clamp(22px, 4vw, 32px); margin: 2px 0 0; overflow-wrap: anywhere; }
.hw-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-stats { margin: 16px 0 6px; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); }
.hub-title { margin-top: 2px; }
.act-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.act-filters .ftab { background: var(--panel); border: 1px solid var(--line); color: var(--muted); cursor: pointer; font: inherit; }
.activity { display: grid; gap: 10px; }
.act-day { font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin: 8px 0 -2px; }
.act-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.act-item:hover { border-color: var(--line-hi); }
.act-av { position: relative; width: 42px; height: 42px; }
.act-ico { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 2px solid var(--panel-solid); background: var(--panel-2); color: var(--text); }
.i-squad { background: var(--accent); color: var(--accent-ink); }
.i-thread { background: var(--accent-2); color: #021216; }
.i-rating { background: var(--gold); color: #1d1500; }
.i-event { background: var(--hot); color: #23001d; }
.i-clan, .i-war { background: #9b7bff; color: #12002b; }
.i-joined { background: #e9eef8; color: #0b0f17; }
.war-av { display: grid; place-items: center; background: var(--panel-2); color: var(--gold); font-size: 20px; }
.act-body { min-width: 0; display: grid; gap: 6px; }
.act-head { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.act-head .stars { font-size: 14px; }
.act-head .tier { font-size: 10px; vertical-align: middle; }
.act-name { color: var(--text); font-weight: 700; }
.act-name:hover, .act-strong:hover { color: var(--accent); }
.act-strong { color: var(--accent); font-weight: 600; }
.act-time { white-space: nowrap; }
.act-title { font: 600 16px/1.35 var(--body); color: var(--text); overflow-wrap: anywhere; }
.act-title:hover { color: var(--accent); }
.act-text { margin: 0; color: #c3cbe0; overflow-wrap: anywhere; }
.act-said { font-style: italic; }
.act-quote { display: block; color: #d5dcec; padding: 8px 12px; border-left: 3px solid var(--line-hi); background: rgba(255, 255, 255, .02); overflow-wrap: anywhere; }
.act-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.act-foot .btn { margin-left: 0; }
.gta-card { display: grid; gap: 4px; border-top: 3px solid var(--hot); color: var(--text); }
.gta-card b { font: 700 20px var(--display); }
.clan-row b { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.rank-n { font: 700 12px var(--mono); color: var(--gold); }
@media (max-width: 560px) {
  .act-item { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .act-av, .act-av .avatar { width: 36px; height: 36px; }
  .hw-actions .btn { flex: 1 1 auto; }
}
.act-filters .ftab { padding: 6px 12px; font-size: 12px; }
.act-filters .ftab.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ===================== v7: XP, levels, seasons, challenges, signals ===================== */
.xp-float { position: fixed; z-index: 60; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: var(--gold); color: #1d1500; font: 700 15px var(--display); letter-spacing: .06em; box-shadow: 0 8px 30px rgba(255, 207, 74, .4); animation: xpUp 1.6s ease-out both; pointer-events: none; }
@keyframes xpUp { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.9); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 70% { opacity: 1; transform: translate(-50%, -14px); } 100% { opacity: 0; transform: translate(-50%, -40px); } }
@media (prefers-reduced-motion: reduce) { .xp-float { animation: none; } }
.tier.lvl, .lvl-pill { background: rgba(255, 207, 74, .14); color: var(--gold); }
.menu-lvl { margin-left: 6px; font: 700 10px var(--mono); color: var(--gold); }
.xp-bar { height: 10px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.xp-bar.thin { height: 6px; }
.xp-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--accent)); transition: width .6s ease; }
.xp-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 6px; font: 600 11.5px var(--mono); color: var(--muted); }
.hw-xp { display: block; margin-top: 8px; max-width: 360px; color: inherit; }
.prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 14px; align-items: start; }
.level-card { display: grid; gap: 14px; border-top: 3px solid var(--gold); }
.lc-top { display: flex; gap: 14px; align-items: center; }
.lc-level { font: 700 34px var(--display); line-height: 1; }
.lc-title { color: var(--gold); font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.lc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: 8px; }
.lc-stats div { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: var(--panel-2); }
.lc-stats b { font: 700 22px var(--display); }
.lc-stats span { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ch-list { display: grid; gap: 10px; }
.ch-row { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.ch-row.done:not(.claimed) { border-color: rgba(255, 207, 74, .5); box-shadow: 0 0 0 1px rgba(255, 207, 74, .2) inset; }
.ch-row.claimed { opacity: .7; }
.ch-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ch-top b { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.ch-reward { font: 700 12px var(--mono); color: var(--gold); white-space: nowrap; }
.ch-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 28px; }
.rate-squad { border-color: rgba(57, 255, 159, .35); }
.rs-row { flex-wrap: wrap; }
.rs-acts { display: flex; gap: 6px; margin-left: auto; }
.season-lb li.me-row { background: rgba(57, 255, 159, .08); border-radius: 10px; }
.xp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.xp-table th { text-align: left; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 6px 4px; border-bottom: 1px solid var(--line); }
.xp-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.xp-table td:nth-child(2) { color: var(--gold); font-family: var(--mono); white-space: nowrap; }
.xp-table td:nth-child(3) { color: var(--muted); font-family: var(--mono); }
.xp-log { display: grid; gap: 2px; }
.xp-log div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.xp-log b { color: var(--gold); font-family: var(--mono); }
.signal { border-left: 4px solid var(--line-hi); }
.signal.sev-high { border-left-color: var(--bad); }
.signal.sev-medium { border-left-color: var(--gold); }
.signal.sev-high .sev { background: rgba(255, 93, 115, .16); color: var(--bad); }
.signal.sev-medium .sev { background: rgba(255, 207, 74, .14); color: var(--gold); }
.sig-players { font-size: 13.5px; margin-bottom: 8px; }
.sig-reviews { display: grid; gap: 6px; }
.sig-rev { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--panel-2); font: 500 12.5px var(--mono); overflow-wrap: anywhere; }
@media (min-width: 560px) { .lc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===================== v8: site structure (sections + tabs) ===================== */
.nav-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.nav-ico { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; color: var(--muted); font: 600 13px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.nav-ico:hover, .nav-ico.on { color: var(--text); background: var(--panel-2); }
.nav-ico .count { position: absolute; top: 0; right: -2px; margin: 0; }
.subnav { position: sticky; top: calc(var(--topbar-h, 64px) + env(safe-area-inset-top, 0px)); z-index: 6; background: rgba(8, 11, 18, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.subnav-in { display: flex; align-items: center; gap: 4px; max-width: 1200px; margin: 0 auto; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); overflow-x: auto; scrollbar-width: none; }
.subnav-in::-webkit-scrollbar { display: none; }
.subnav-label { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); margin-right: 8px; white-space: nowrap; }
.subnav a { flex: none; padding: 7px 12px; border-radius: 8px; color: var(--muted); font: 600 13.5px var(--body); white-space: nowrap; }
.subnav a:hover { color: var(--text); background: var(--panel-2); }
.subnav a.on { color: var(--accent-ink); background: var(--accent); }
.page-sub { margin: 4px 0 0; }
.menu-head { color: var(--text); }
.menu-head:hover { background: var(--panel-2); }
@media (max-width: 760px) {
  .nav-ico-l { display: none; }
  .nav-sep { display: none; }
  .nav-ico { padding: 8px; font-size: 16px; }
  .subnav-label { display: none; }
}
/* socials + share */
.social-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.soc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: 600 12.5px var(--body); }
.soc:hover { border-color: var(--line-hi); color: var(--accent); }
.soc-twitch span { color: #a970ff; } .soc-kick span { color: #53fc18; } .soc-youtube span { color: #ff4e45; } .soc-tiktok span { color: #25f4ee; }
.soc-instagram span { color: #e1306c; } .soc-reddit span { color: #ff4500; } .soc-medal span { color: var(--gold); } .soc-discord { border-color: rgba(88, 101, 242, .6); } .soc-discord span { color: #8891f2; }
.share-title { margin: -4px 0 12px; overflow-wrap: anywhere; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 8px; margin-bottom: 12px; }
.share-b { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: 600 14px var(--body); cursor: pointer; text-align: left; }
.share-b:hover { border-color: var(--accent); }
.share-b span { width: 22px; text-align: center; font-size: 16px; }
.share-url { margin-bottom: 12px; }
.share-url .gt-id { overflow-wrap: anywhere; font-size: 12px; }
.subnav { position: static; }
/* mobile polish */
@media (max-width: 560px) {
  .post-actions { gap: 4px; }
  .post-actions .act { padding: 8px 10px; }
  .profile-actions .btn, .hero-ctas .btn { min-height: 40px; }
  .hub-stats .stat b { font-size: 22px; }
  .modal { max-height: calc(100dvh - 24px); overflow-y: auto; }
}
/* game stats */
.gs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.gs-card { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); border-top: 3px solid var(--accent-2); min-width: 0; }
.gs-lol { border-top-color: #c89b3c; } .gs-fortnite { border-top-color: #9d4dff; } .gs-apex { border-top-color: #da292a; } .gs-faceit { border-top-color: #ff5500; }
.gs-dota { border-top-color: #a72714; } .gs-chess { border-top-color: #81b64c; } .gs-xbox { border-top-color: #107c10; } .gs-youtube { border-top-color: #ff0000; }
.gs-top { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.gs-label { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gs-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-head { font: 700 18px var(--display); overflow-wrap: anywhere; }
.gs-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 600 13px var(--mono); }
.gs-stats em { font-style: normal; color: var(--muted); margin-right: 4px; font-weight: 500; }

/* ===================== v9: messaging + phone/tablet polish ===================== */
#chatForm { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
#chatForm input { min-width: 0; height: 42px; }
#chatForm .btn { height: 42px; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.bubble .msg-card { max-width: 100%; }
@media (hover: none) {
  .msg-tools { position: absolute; top: -10px; right: 6px; }
  .mt { padding: 3px 8px; font-size: 13px; }
}
@media (max-width: 760px) {
  /* A messaging app: header, scrolling log, composer always in reach above the tab bar. */
  .narrow:has(> .chat) { gap: 6px; }
  .chat { height: calc(100dvh - 210px - env(safe-area-inset-bottom, 0px)); min-height: 380px; padding: 12px; }
  .chat .chat-log { flex: 1; max-height: none; min-height: 0; padding: 10px 8px; }
  .bubble { max-width: 88%; }
  .preview-bar { font-size: 12px; padding-block: 6px; gap: 6px; }
  .preview-bar > span { display: none; }
  .preview-bar::before { content: "Preview · sample data"; }
  .toast { left: 16px; right: 16px; transform: none; max-width: none; }
}
@media (max-width: 1100px) {
  .nav-ico-l { display: none; }
  .nav-ico { font-size: 16px; padding: 8px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .topbar { flex-wrap: nowrap; }
  .navlink { padding: 8px 8px; font-size: 12.5px; }
}
@media (max-width: 760px) {
  .chat .quick { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; padding-bottom: 2px; }
  .chat .quick::-webkit-scrollbar { display: none; }
  .chat .quick .qr { flex: none; }
}
@media (max-width: 760px) {
  body.in-chat .tabbar { display: none; }
  body.in-chat main { padding-bottom: 8px; }
  body.in-chat .foot { display: none; }
  body.in-chat .chat { height: calc(100dvh - 150px - env(safe-area-inset-bottom, 0px)); }
  .preview-bar { flex-wrap: nowrap; justify-content: space-between; }
}
/* Presence: online = green (pulses while playing), offline = red */
.av-wrap.is-on::after, .av-wrap.is-live::after, .av-wrap.is-off::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg); }
.av-wrap.is-on::after, .av-wrap.is-live::after { background: #22e07a; box-shadow: 0 0 8px rgba(34, 224, 122, .7); }
.av-wrap.is-live::after { animation: pulse 1.6s infinite; }
.av-wrap.is-off::after { background: #ff3b4f; box-shadow: none; }
.av-wrap.big.is-off::after { width: 20px; height: 20px; border-width: 3px; right: -4px; bottom: -4px; }
.on-dot { background: #22e07a; box-shadow: 0 0 8px rgba(34, 224, 122, .7); }
@media (max-width: 760px) { body:has(.preview-bar).in-chat .chat { height: calc(100dvh - 200px - env(safe-area-inset-bottom, 0px)); } }
.danger-zone { margin-top: 18px; border-color: rgba(255, 93, 115, .4); }
.del-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
@media (max-width: 560px) { .del-form { grid-template-columns: minmax(0, 1fr); } }
/* v10: feed + squad layout, reactions, mentions */
.page-head-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; }
.page-head-row > div { min-width: 0; }
.squad-filters { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.squad-filters input:not([type=checkbox]), .squad-filters select { min-width: 0; }
.mention { color: var(--accent-2); font-weight: 600; }
.react-wrap { position: relative; display: inline-flex; }
.react-more { padding-left: 6px !important; padding-right: 6px !important; }
.post-pick { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 9; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--panel-solid); border: 1px solid var(--line-hi); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.post-pick button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font: 600 16px var(--body); color: var(--text); cursor: pointer; }
.post-pick button:hover { background: var(--panel-2); transform: scale(1.15); }
.react-sum { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 -2px; }
.rs { padding: 2px 8px; border-radius: 999px; background: var(--panel-2); font-size: 12.5px; }
.rs.mine { background: rgba(57, 255, 159, .14); color: var(--accent); }
.linkish.on { color: var(--accent); }
@media (max-width: 760px) {
  .squad-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-head-row .btn { width: 100%; }
  .post-actions { display: flex; flex-wrap: wrap; }
}
.search-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.search-box input { height: 46px; font-size: 16px; }
@media (max-width: 760px) {
  .topbar { flex-wrap: nowrap; justify-content: space-between; gap: 6px; }
  #nav { flex-wrap: nowrap; width: auto; gap: 2px; }
  .nav-ico { padding: 6px; }
  .feed-tabs { flex-wrap: wrap; }
  .feed-tabs input { flex: 1 1 100%; width: 100%; min-width: 0; }
}
@media (max-width: 360px) { .brand-name, .logo-text { font-size: 18px; } }
@media (max-width: 420px) { .brand { font-size: 19px; gap: 6px; } .brand::before { width: 26px; height: 26px; font-size: 15px; } }
/* v11: interactive stats + quick toggles */
a.stat, .statstrip a { color: inherit; cursor: pointer; transition: background .15s, transform .15s; }
a.stat:hover, .statstrip a:hover { background: rgba(57, 255, 159, .07); }
a.stat:hover b, .statstrip a:hover b { color: var(--accent); }
a.stat:active { transform: scale(.98); }
.mini-stats { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: min(360px, 100%); }
.qtoggles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.qchip { position: relative; cursor: pointer; }
.qchip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qchip span { display: inline-flex; align-items: center; gap: 4px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font: 600 13px var(--body); transition: all .15s; }
.qchip:hover span { color: var(--text); border-color: var(--line-hi); }
.qchip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.qchip input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }
@media (max-width: 760px) {
  .qtoggles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .qtoggles::-webkit-scrollbar { display: none; }
  .qchip { flex: none; }
  .mini-stats { width: 100%; }
}
/* auto-mod */
.am-log { display: grid; gap: 6px; }
.am-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.am-row.undone { opacity: .55; }
.am-what { min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; }
.hidden-note { margin: 6px 0; padding: 8px 12px; border-radius: 8px; background: rgba(255, 93, 115, .12); color: #ffb3bf; font-size: 13px; }
@media (max-width: 560px) { .am-row { grid-template-columns: auto minmax(0, 1fr); } .am-row .muted.small, .am-row .btn { grid-column: 2; justify-self: start; } }
/* legal pop-ups */
.modal.legal-modal { width: min(760px, 100%); max-height: min(85vh, 900px); overflow-y: auto; }
.legal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: -20px; background: var(--panel-solid); padding-top: 4px; z-index: 1; }
.legal-head h2 { margin: 0; }
.legal-body { line-height: 1.65; color: #d5dcec; }
.legal-body h3 { margin: 18px 0 6px; font-size: 16px; color: var(--text); }
.legal-body p, .legal-body li { max-width: 68ch; }
.legal-body ul { padding-left: 20px; display: grid; gap: 6px; }
.legal-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: flex-end; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.foot-links button, .foot-links a[data-legal] { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; }