/* ============================================
   PROPHECY ESPORTS — DESIGN SYSTEM
   Fonts: Orbitron (heads) · Rajdhani (UI) · Inter (body)
   Accent: #FFF300 yellow — used sparingly
   Motif: top-right blade clip on cards/buttons
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ── Variables ─────────────────────────────── */
:root {
  --bg:        #080808;
  --bg2:       #0e0e0e;
  --bg3:       #141414;
  --bg4:       #1c1c1c;
  --bg5:       #242424;
  --accent:    #FFF300;
  --acc10:     rgba(255,243,0,.10);
  --acc15:     rgba(255,243,0,.15);
  --acc25:     rgba(255,243,0,.25);
  --text:      #f0f0f0;
  --text2:     #8a8a8a;
  --text3:     #444;
  --border:    rgba(255,255,255,.07);
  --borderl:   rgba(255,255,255,.12);
  --font-h:    'Orbitron',  sans-serif;
  --font-ui:   'Rajdhani',  sans-serif;
  --font-body: 'Inter',     sans-serif;

  /* Blade clip-paths — top-right corner cut */
  --blade-xs:  polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);
  --blade-sm:  polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  --blade-md:  polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
  --blade-lg:  polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);
  --blade-xl:  polygon(0 0,calc(100% - 50px) 0,100% 50px,100% 100%,0 100%);

  /* Easing */
  --ease:      cubic-bezier(.32,.72,0,1);
  --ease-out:  cubic-bezier(0,.55,.45,1);
  --spring:    cubic-bezier(.34,1.56,.64,1);
}

/* ── Reset ──────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  min-height:100dvh;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
img,video { max-width:100%; display:block; }
button { background:none; border:none; cursor:pointer; font:inherit; color:inherit; }
input,textarea,select { font:inherit; color:inherit; background:none; border:none; outline:none; }

/* ── Grain overlay ──────────────────────────── */
body::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ── Layout ─────────────────────────────────── */
.container { width:100%; max-width:1200px; margin-inline:auto; padding-inline:clamp(16px,4vw,48px); }
.section  { padding-block:clamp(64px,10vw,120px); }
.section--sm { padding-block:clamp(40px,6vw,72px); }

/* ── Typography ─────────────────────────────── */
.display {
  font-family:var(--font-h);
  font-size:clamp(2.8rem,8vw,7.5rem);
  font-weight:900;
  line-height:.95;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
h1,h2,h3,h4 { font-family:var(--font-h); text-transform:uppercase; letter-spacing:.02em; line-height:1.1; }
h1 { font-size:clamp(2rem,5vw,4rem); font-weight:700; }
h2 { font-size:clamp(1.5rem,3vw,2.4rem); font-weight:700; }
h3 { font-size:clamp(1rem,2vw,1.4rem); font-weight:600; }
h4 { font-size:.9rem; font-weight:600; }
.label {
  font-family:var(--font-ui);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text2);
}
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-ui);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--acc10);
  border:1px solid var(--acc15);
  padding:5px 12px;
  clip-path:var(--blade-xs);
}
.eyebrow::before { content:''; display:block; width:6px; height:6px; background:var(--accent); border-radius:50%; }

/* ── Navigation ─────────────────────────────── */
.nav {
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  width:calc(100% - 40px);
  max-width:1100px;
}
.nav-container {
  display:flex;
  align-items:center;
  gap:16px;
  background:rgba(8,8,8,.88);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border);
  border-radius:100px;
  padding:10px 18px;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav.scrolled .nav-container {
  background:rgba(6,6,6,.96);
  border-color:var(--borderl);
}
.nav-logo {
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.nav-logo-icon { width:26px; height:22px; object-fit:contain; }
.footer-logo-icon { width:22px; height:19px; object-fit:contain; }
.nav-logo-text {
  font-family:var(--font-h);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--text);
}
.nav-logo-region {
  font-family:var(--font-ui);
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.15em;
  color:var(--accent);
  background:var(--acc10);
  padding:2px 6px;
  border-radius:2px;
}
.nav-links {
  display:flex;
  align-items:center;
  gap:2px;
  margin-inline:auto;
}
.nav-link {
  font-family:var(--font-ui);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--text2);
  padding:6px 12px;
  border-radius:100px;
  transition:color .2s var(--ease), background .2s var(--ease);
  white-space:nowrap;
}
.nav-link:hover { color:var(--text); background:rgba(255,255,255,.05); }
.nav-link.active { color:var(--accent); }
.nav-link--soon {
  color:var(--text3);
  cursor:default;
  display:flex;
  align-items:center;
  gap:5px;
}
.soon-pill {
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.12em;
  background:var(--bg4);
  color:var(--text3);
  padding:2px 6px;
  border-radius:100px;
}
.nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-cart {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  color:var(--text2);
  border-radius:50%;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-cart:hover { color:var(--text); background:rgba(255,255,255,.06); }
.cart-badge {
  position:absolute;
  top:-2px;
  right:-2px;
  min-width:16px;
  height:16px;
  background:var(--accent);
  color:#000;
  font-family:var(--font-ui);
  font-size:.55rem;
  font-weight:700;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 3px;
}
.nav-auth-wrap { display:flex; align-items:center; gap:8px; }
.nav-auth-wrap .btn {
  padding: 5px 12px;
  clip-path: none;
  border-radius: 100px;
}
.nav-username {
  font-family:var(--font-ui);
  font-size:.8rem;
  font-weight:600;
  color:var(--text2);
  max-width:90px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .15s;
  cursor:pointer;
}
a.nav-username:hover { color:var(--accent); }
/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:36px;
  height:36px;
  gap:5px;
  position:relative;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  color:inherit;
  flex-shrink:0;
}
.ham-bar {
  display:block;
  width:18px;
  height:1.5px;
  background:var(--text);
  border-radius:2px;
  transition:transform .35s var(--ease), opacity .2s;
  transform-origin:center;
}
.hamburger.open .ham-bar:first-child { transform:translateY(3.25px) rotate(45deg); }
.hamburger.open .ham-bar:last-child  { transform:translateY(-3.25px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position:fixed;
  inset:0;
  z-index:99;
  background:rgba(5,5,5,.97);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  overflow-y:auto;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
.mobile-menu.open { opacity:1; pointer-events:all; }

.mobile-menu-inner {
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  padding:84px 36px 48px;
}
.mobile-menu-inner nav {
  display:flex;
  flex-direction:column;
  flex:1;
}

/* Primary links */
.mobile-nav-link {
  display:block;
  font-family:var(--font-h);
  font-size:clamp(1.65rem,7.5vw,2.4rem);
  font-weight:900;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--text2);
  padding:5px 0;
  text-decoration:none;
  opacity:0;
  transform:translateX(-28px);
  transition:color .2s var(--ease);
}
.mobile-menu.open .mobile-nav-link {
  opacity:1;
  transform:translateX(0);
  transition:
    opacity .4s var(--ease) calc(var(--idx,0) * 40ms + 60ms),
    transform .4s var(--ease) calc(var(--idx,0) * 40ms + 60ms),
    color .15s var(--ease);
}
.mobile-nav-link:hover { color:var(--accent); }

/* Section dividers */
.mobile-nav-divider {
  display:block;
  font-family:var(--font-ui);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  padding:18px 0 5px;
  margin-top:4px;
  border-top:1px solid var(--border);
  opacity:0;
  transform:translateX(-28px);
}
.mobile-menu.open .mobile-nav-divider {
  opacity:1;
  transform:translateX(0);
  transition:
    opacity .4s var(--ease) calc(var(--idx,0) * 40ms + 60ms),
    transform .4s var(--ease) calc(var(--idx,0) * 40ms + 60ms);
}

/* Child / sub links */
.mobile-nav-link--child {
  font-size:clamp(1rem,5vw,1.3rem);
  font-weight:600;
  color:var(--text3);
  padding:3px 0 3px 14px;
}
.mobile-nav-link--child:hover { color:var(--accent); }

/* Admin link */
.mobile-nav-link--admin {
  font-size:clamp(.9rem,4vw,1.1rem);
  font-weight:600;
  color:var(--text3);
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

.mobile-menu-auth {
  margin-top:28px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s var(--ease) 520ms, transform .4s var(--ease) 520ms;
}
.mobile-menu.open .mobile-menu-auth { opacity:1; transform:translateY(0); }

/* ── Buttons ────────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-ui);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:13px 24px;
  clip-path:var(--blade-sm);
  cursor:pointer;
  transition:
    transform .25s var(--spring),
    background .2s var(--ease),
    color .2s var(--ease),
    box-shadow .2s var(--ease);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn:active { transform:scale(.97); }
.btn--primary {
  background:var(--accent);
  color:#000;
}
.btn--primary:hover {
  background:#ffe800;
  box-shadow:0 0 30px rgba(255,243,0,.25);
}
.btn--outline {
  background:rgba(255,255,255,.05);
  color:var(--text);
  outline:1px solid var(--border);
  outline-offset:-1px;
}
.btn--outline:hover {
  background:rgba(255,255,255,.09);
  outline-color:var(--borderl);
}
.btn--ghost {
  background:transparent;
  color:var(--text2);
  padding:8px 16px;
  clip-path:none;
}
.btn--ghost:hover { color:var(--text); }
.btn--discord {
  background:#5865F2;
  color:#fff;
  display:flex;
  align-items:center;
  gap:7px;
}
.btn--discord:hover { background:#4752c4; box-shadow:0 0 24px rgba(88,101,242,.35); }

/* Discord home strip */
.discord-home-strip {
  display:flex;
  align-items:center;
  gap:18px;
  background:rgba(88,101,242,.07);
  border:1px solid rgba(88,101,242,.22);
  border-radius:12px;
  padding:16px 22px;
  text-decoration:none;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.discord-home-strip:hover {
  background:rgba(88,101,242,.12);
  border-color:rgba(88,101,242,.4);
  transform:translateY(-1px);
}
.discord-home-strip-icon {
  width:44px;
  height:44px;
  border-radius:10px;
  background:rgba(88,101,242,.18);
  border:1px solid rgba(88,101,242,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7289da;
  flex-shrink:0;
}
.discord-home-strip-text {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.discord-home-strip-title {
  font-family:var(--font-h);
  font-size:.9rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:.03em;
}
.discord-home-strip-sub {
  font-family:var(--font-ui);
  font-size:.72rem;
  color:var(--text3);
  line-height:1.5;
}
.discord-home-strip-cta {
  font-family:var(--font-ui);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#7289da;
  white-space:nowrap;
  flex-shrink:0;
}
@media(max-width:600px) {
  .discord-home-strip { flex-wrap:wrap; gap:12px; }
  .discord-home-strip-cta { width:100%; text-align:right; }
  .btn--discord span { display:none; }
}
.btn--sm {
  font-size:.75rem;
  padding:8px 16px;
  clip-path:var(--blade-xs);
}
.btn--danger { background:rgba(220,50,50,.15); color:#f87171; outline:1px solid rgba(220,50,50,.2); outline-offset:-1px; }
.btn--danger:hover { background:rgba(220,50,50,.25); }
/* Arrow icon in a circle (button-in-button) */
.btn-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(0,0,0,.15);
  flex-shrink:0;
  transition:transform .25s var(--spring);
}
.btn:hover .btn-arrow { transform:translate(2px,-2px) scale(1.05); }

/* ── Cards ──────────────────────────────────── */
/* Wrapper creates the blade-border effect */
.card-wrap {
  background:linear-gradient(135deg, var(--acc15) 0%, rgba(255,255,255,.04) 50%, transparent 100%);
  clip-path:var(--blade-md);
  padding:1px;
  transition:background .3s var(--ease);
}
.card-wrap:hover { background:linear-gradient(135deg, var(--acc25) 0%, rgba(255,255,255,.07) 50%, transparent 100%); }
.card {
  background:var(--bg3);
  clip-path:var(--blade-md);
  padding:28px;
  position:relative;
  height:100%;
  transition:background .3s var(--ease);
}
.card:hover { background:var(--bg4); }
/* Yellow left accent bar */
.card::before {
  content:'';
  position:absolute;
  top:20px;
  left:0;
  width:3px;
  height:44px;
  background:var(--accent);
  border-radius:0 2px 2px 0;
}
/* Blade corner stroke */
.card::after {
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:1px;
  height:30px;
  background:var(--acc25);
  transform:rotate(-45deg);
  transform-origin:top right;
}
.card--flat { background:var(--bg2); }
.card--flat:hover { background:var(--bg3); }

/* ── Page header ────────────────────────────── */
.page-header { padding-block:clamp(80px,14vw,140px) clamp(40px,6vw,64px); }
.page-header h1 { margin-top:14px; }

/* ── Hero ───────────────────────────────────── */
.hero {
  position:relative;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom:clamp(48px,8vw,96px);
  overflow:hidden;
}
/* Ambient yellow glow */
.hero::after {
  content:'';
  position:absolute;
  bottom:-80px;
  left:-60px;
  width:500px;
  height:400px;
  background:radial-gradient(ellipse at center, rgba(255,243,0,.06) 0%, transparent 70%);
  pointer-events:none;
}
.hero-blade {
  position:absolute;
  top:-100px;
  right:-120px;
  width:55vw;
  max-width:720px;
  height:130%;
  background:linear-gradient(135deg, rgba(255,243,0,.03) 0%, transparent 60%);
  clip-path:polygon(20% 0%,100% 0%,100% 100%,0% 100%);
  pointer-events:none;
}
.hero-content { position:relative; z-index:1; }
.hero-tag { margin-bottom:24px; }
.hero-display { margin-bottom:32px; }
.hero-display .accent { color:var(--accent); }
.hero-sub {
  font-size:clamp(.85rem,1.5vw,1.05rem);
  color:var(--text2);
  max-width:480px;
  margin-bottom:40px;
  line-height:1.7;
}
.hero-ctas { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px; }
.hero-stats {
  display:flex;
  gap:clamp(20px,4vw,48px);
  flex-wrap:wrap;
}
.hero-stat-val {
  font-family:var(--font-h);
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:700;
  color:var(--text);
  line-height:1;
}
.hero-stat-label { font-family:var(--font-ui); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text2); margin-top:4px; }

/* ── Values grid ────────────────────────────── */
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.value-icon {
  width:44px;
  height:44px;
  background:var(--acc10);
  border:1px solid var(--acc15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  clip-path:var(--blade-xs);
  margin-bottom:20px;
}
.value-title { font-size:1rem; margin-bottom:10px; color:var(--text); }
.value-body { font-size:.875rem; color:var(--text2); line-height:1.7; }

/* ── Timeline ───────────────────────────────── */
.timeline { position:relative; }
.timeline::before {
  content:'';
  position:absolute;
  left:0;
  top:8px;
  bottom:0;
  width:1px;
  background:linear-gradient(to bottom, var(--accent), transparent);
}
.timeline-item { padding-left:28px; padding-bottom:40px; position:relative; }
.timeline-item::before {
  content:'';
  position:absolute;
  left:-4px;
  top:8px;
  width:9px;
  height:9px;
  background:var(--accent);
  clip-path:var(--blade-xs);
}
.timeline-quarter {
  font-family:var(--font-ui);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:6px;
}
.timeline-event { font-size:.875rem; font-weight:500; color:var(--text); margin-bottom:4px; }
.timeline-desc { font-size:.8rem; color:var(--text2); }

/* ── Roster strip ───────────────────────────── */
.roster-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* ── Player cards ───────────────────────────── */
.player-card { cursor:pointer; }
.player-avatar {
  width:100%;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-h);
  font-size:2rem;
  font-weight:900;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:16px;
  transition:transform .35s var(--spring);
  color:var(--accent);
}
.player-card:hover .player-avatar { transform:scale(1.02); }
.player-ign { font-size:1rem; color:var(--text); margin-bottom:2px; }
.player-name { font-size:.8rem; color:var(--text2); margin-bottom:10px; }
.player-tags { display:flex; gap:6px; flex-wrap:wrap; }
.player-tag {
  font-family:var(--font-ui);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:2px;
  background:var(--bg5);
  color:var(--text2);
}
.player-tag--role { background:var(--acc10); color:var(--accent); }
.player-tag--game { background:var(--bg5); }

/* ── Match cards ─────────────────────────────── */
.match-card {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
}
.match-badge {
  font-family:var(--font-ui);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 10px;
  clip-path:var(--blade-xs);
  flex-shrink:0;
  min-width:42px;
  text-align:center;
}
.match-badge--W { background:rgba(74,222,128,.15); color:#4ade80; }
.match-badge--L { background:rgba(248,113,113,.15); color:#f87171; }
.match-badge--upcoming { background:var(--acc10); color:var(--accent); }
.match-game {
  font-family:var(--font-ui);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:4px;
}
.match-opponent { font-weight:500; font-size:.95rem; }
.match-meta { font-size:.78rem; color:var(--text2); }
.match-score {
  font-family:var(--font-h);
  font-size:1.1rem;
  font-weight:700;
  text-align:right;
}
.match-score--W { color:#4ade80; }
.match-score--L { color:#f87171; }
.match-vod {
  font-family:var(--font-ui);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text3);
  margin-top:2px;
  display:block;
  text-align:right;
  transition:color .2s;
}
.match-vod:hover { color:var(--text2); }

/* ── Tabs ───────────────────────────────────── */
.tab-bar {
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--border);
  margin-bottom:32px;
}
.tab-btn {
  font-family:var(--font-ui);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text2);
  padding:10px 20px;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.tab-btn.active { color:var(--accent); border-color:var(--accent); }
.tab-btn:hover:not(.active) { color:var(--text); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── Filter bar ─────────────────────────────── */
.filter-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.filter-btn {
  font-family:var(--font-ui);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text2);
  background:var(--bg3);
  padding:7px 16px;
  clip-path:var(--blade-xs);
  transition:background .2s var(--ease), color .2s var(--ease);
  border:1px solid var(--border);
}
.filter-btn:hover { color:var(--text); background:var(--bg4); }
.filter-btn.active { background:var(--acc10); color:var(--accent); border-color:var(--acc15); }
.filter-group-label {
  font-family:var(--font-ui);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text3);
  align-self:center;
  padding-right:4px;
}
.filter-divider { width:1px; background:var(--border); align-self:stretch; margin:4px 4px; }

/* ── Modal ──────────────────────────────────── */
.modal-overlay {
  position:fixed;
  inset:0;
  z-index:150;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg3);
  clip-path:var(--blade-lg);
  width:100%;
  max-width:580px;
  max-height:90dvh;
  overflow-y:auto;
  padding:40px;
  position:relative;
  transform:translateY(30px) scale(.97);
  transition:transform .35s var(--spring);
}
.modal-overlay.open .modal { transform:translateY(0) scale(1); }
.modal-close {
  position:absolute;
  top:20px;
  right:20px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text2);
  font-size:1.2rem;
  transition:color .2s;
}
.modal-close:hover { color:var(--text); }

/* ── Product modal ──────────────────────────── */
.product-modal { width:min(560px, 92vw); }
.product-modal-hero {
  position:relative;
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-h);
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.1em;
  opacity:.7;
  text-align:center;
  padding:16px;
}
.product-modal-body {
  padding:24px 28px 28px;
}
.product-modal-name {
  font-family:var(--font-h);
  font-size:1.2rem;
  font-weight:900;
  color:var(--text);
  margin:0 0 8px;
  line-height:1.2;
}
.product-modal-price {
  display:inline-block;
  font-family:var(--font-h);
  font-size:1.5rem;
  font-weight:700;
  color:var(--accent);
  margin-bottom:14px;
}
.product-modal-desc {
  font-size:.85rem;
  color:var(--text2);
  line-height:1.75;
  margin-bottom:18px;
}
.pm-sizes {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:4px;
}
.pm-size-btn {
  padding:6px 13px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg3);
  color:var(--text3);
  font-family:var(--font-ui);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .12s, color .12s, background .12s;
}
.pm-size-btn:hover { border-color:var(--text3); color:var(--text); }
.pm-size-btn.selected { border-color:var(--accent); color:var(--accent); background:rgba(255,243,0,.07); }
.pm-phone-select {
  width:100%;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 13px;
  color:var(--text2);
  font-family:var(--font-ui);
  font-size:.82rem;
  cursor:pointer;
  transition:border-color .12s;
}
.pm-phone-select:focus { border-color:var(--accent); outline:none; }
.pm-variant-label {
  font-family:var(--font-ui);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text3);
  margin-bottom:8px;
  display:block;
}
.pm-sizes.variant-required { animation:variant-shake .25s ease 2; outline:1px solid rgba(255,80,80,.5); border-radius:5px; }
.pm-phone-select.variant-required { animation:variant-shake .25s ease 2; border-color:rgba(255,80,80,.6); }
@media(max-width:500px) {
  .product-modal-hero { height:150px; }
  .product-modal-body { padding:18px 20px 24px; }
}

/* ── Player modal ───────────────────────────── */
.player-modal-avatar {
  width:100%;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-h);
  font-size:4rem;
  font-weight:900;
  clip-path:var(--blade-md);
  margin-bottom:24px;
  color:var(--accent);
}
.player-modal-ign { margin-bottom:4px; }
.player-modal-name { color:var(--text2); margin-bottom:16px; font-size:.9rem; }
.player-modal-bio { font-size:.875rem; color:var(--text2); line-height:1.75; margin-bottom:28px; }
.player-modal-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat-box { text-align:center; }
.stat-val { font-family:var(--font-h); font-size:1.2rem; font-weight:700; color:var(--accent); }
.stat-lbl { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); margin-top:2px; }

/* ── Forms ──────────────────────────────────── */
.form-group { margin-bottom:20px; }
.form-label {
  display:block;
  font-family:var(--font-ui);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text2);
  margin-bottom:8px;
}
.form-input {
  width:100%;
  background:var(--bg4);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 16px;
  clip-path:var(--blade-xs);
  font-size:.9rem;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.form-input:focus { border-color:var(--acc25); background:var(--bg5); }
.form-input.error { border-color:rgba(248,113,113,.4); }
.form-error {
  font-family:var(--font-ui);
  font-size:.65rem;
  font-weight:600;
  color:#f87171;
  margin-top:5px;
  letter-spacing:.05em;
}
.form-input::placeholder { color:var(--text3); }
textarea.form-input { min-height:120px; resize:vertical; clip-path:none; }
select.form-input { appearance:none; cursor:pointer; }
.form-select-wrap { position:relative; }
.form-select-wrap::after {
  content:'▾';
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text2);
  pointer-events:none;
  font-size:.8rem;
}

/* ── Record badge ─────────────────────────────── */
.record-strip {
  display:flex;
  gap:24px;
  align-items:center;
  background:var(--bg2);
  padding:18px 24px;
  clip-path:var(--blade-sm);
  border:1px solid var(--border);
  margin-bottom:32px;
  flex-wrap:wrap;
}
.record-item { display:flex; flex-direction:column; align-items:center; }
.record-val { font-family:var(--font-h); font-size:1.5rem; font-weight:700; }
.record-val--w { color:#4ade80; }
.record-val--l { color:#f87171; }
.record-lbl { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); }

/* ── Forum ──────────────────────────────────── */
.forum-categories { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.forum-cat {
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  transition:background .2s var(--ease);
}
.cat-icon {
  width:44px;
  height:44px;
  background:var(--bg4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
  clip-path:var(--blade-xs);
  transition:background .2s var(--ease);
}
.forum-cat:hover .cat-icon { background:var(--acc10); }
.cat-name { font-family:var(--font-h); font-size:.75rem; font-weight:600; letter-spacing:.05em; margin-bottom:3px; }
.cat-desc { font-size:.78rem; color:var(--text2); }
.forum-breadcrumb {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:28px;
  font-family:var(--font-ui);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--text2);
}
.forum-breadcrumb .bc-sep { color:var(--text3); }
.forum-breadcrumb .bc-current { color:var(--text); }
.thread-list { display:flex; flex-direction:column; gap:8px; }
.thread-item {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:16px;
  cursor:pointer;
  padding:18px 24px;
  background:var(--bg3);
  clip-path:var(--blade-sm);
  border-left:3px solid transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.thread-item:hover { background:var(--bg4); border-color:var(--acc25); }
.thread-item.pinned { border-color:var(--acc15); }
.thread-title { font-size:.9rem; font-weight:500; margin-bottom:4px; }
.thread-meta { font-size:.75rem; color:var(--text2); }
.thread-pin {
  font-family:var(--font-ui);
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--acc10);
  padding:2px 7px;
  border-radius:2px;
  margin-right:6px;
}
.thread-replies {
  font-family:var(--font-h);
  font-size:.7rem;
  font-weight:700;
  color:var(--text2);
  text-align:right;
}
.thread-replies span { display:block; font-size:.55rem; font-family:var(--font-ui); letter-spacing:.1em; text-transform:uppercase; margin-top:2px; }
/* Thread detail */
.post { padding:20px 0; border-bottom:1px solid var(--border); }
.post:last-child { border-bottom:none; }
.post-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.post-author { font-family:var(--font-ui); font-size:.75rem; font-weight:700; letter-spacing:.06em; color:var(--accent); }
.post-date { font-size:.72rem; color:var(--text3); }
.post-body { font-size:.875rem; color:var(--text2); line-height:1.75; white-space:pre-wrap; }

/* ── Store ──────────────────────────────────── */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.product-card { cursor:pointer; }
.product-img {
  width:100%;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  clip-path:var(--blade-md);
  margin-bottom:16px;
  overflow:hidden;
  transition:transform .35s var(--spring);
}
.product-card:hover .product-img { transform:scale(1.02); }
.product-badge {
  font-family:var(--font-ui);
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--accent);
  color:#000;
  padding:3px 8px;
  clip-path:var(--blade-xs);
  margin-bottom:8px;
  display:inline-block;
}
.product-name { font-size:.9rem; font-weight:500; margin-bottom:4px; }
.product-cat { font-family:var(--font-ui); font-size:.65rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text2); margin-bottom:12px; }
.product-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.product-price { font-family:var(--font-h); font-size:1.1rem; font-weight:700; color:var(--accent); }
.btn-add-cart {
  font-family:var(--font-ui);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--bg5);
  color:var(--text);
  padding:7px 14px;
  clip-path:var(--blade-xs);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.btn-add-cart:hover { background:var(--acc10); color:var(--accent); }
.btn-add-cart.added { background:var(--acc10); color:var(--accent); }

/* Product variant selectors */
.product-sizes { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 8px; }
.size-btn {
  padding:4px 9px;
  border:1px solid var(--border);
  border-radius:5px;
  background:var(--bg3);
  color:var(--text3);
  font-family:var(--font-ui);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .12s, color .12s, background .12s;
}
.size-btn:hover { border-color:var(--text3); color:var(--text); }
.size-btn.selected { border-color:var(--accent); color:var(--accent); background:rgba(255,243,0,.07); }
.product-phone-select {
  width:100%;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:7px;
  padding:7px 10px;
  color:var(--text2);
  font-family:var(--font-ui);
  font-size:.75rem;
  margin:8px 0;
  cursor:pointer;
  transition:border-color .12s;
}
.product-phone-select:focus { border-color:var(--accent); outline:none; }
@keyframes variant-shake {
  0%,100% { transform:translateX(0); }
  25%      { transform:translateX(-4px); }
  75%      { transform:translateX(4px); }
}
.product-sizes.variant-required { animation:variant-shake .25s ease 2; outline:1px solid rgba(255,80,80,.5); border-radius:5px; }
.product-phone-select.variant-required { animation:variant-shake .25s ease 2; border-color:rgba(255,80,80,.6); }
.cart-item-variant {
  font-family:var(--font-ui);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
  margin:1px 0 4px;
}

/* Cart panel */
.cart-panel {
  position:fixed;
  top:0;
  right:0;
  width:min(400px,100vw);
  height:100dvh;
  background:var(--bg2);
  border-left:1px solid var(--border);
  z-index:130;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .4s var(--ease);
}
.cart-panel.open { transform:translateX(0); }
.cart-backdrop {
  position:fixed;
  inset:0;
  z-index:129;
  background:rgba(0,0,0,.6);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
.cart-backdrop.open { opacity:1; pointer-events:all; }
.cart-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px;
  border-bottom:1px solid var(--border);
}
.cart-title { font-family:var(--font-h); font-size:.85rem; font-weight:700; letter-spacing:.06em; }
.cart-body { flex:1; overflow-y:auto; padding:20px 24px; }
.cart-empty { text-align:center; color:var(--text2); padding:48px 0; font-size:.875rem; }
.cart-item { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--border); }
.cart-item-swatch {
  width:52px;
  height:52px;
  clip-path:var(--blade-xs);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-h);
  font-size:.55rem;
  font-weight:700;
  flex-shrink:0;
}
.cart-item-name { font-size:.82rem; font-weight:500; margin-bottom:4px; }
.cart-item-price { font-family:var(--font-ui); font-size:.75rem; color:var(--text2); }
.cart-qty {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
}
.cart-qty-btn {
  width:22px;
  height:22px;
  background:var(--bg5);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  clip-path:var(--blade-xs);
  transition:background .2s;
}
.cart-qty-btn:hover { background:var(--acc10); color:var(--accent); }
.cart-qty-val { font-family:var(--font-h); font-size:.8rem; min-width:16px; text-align:center; }
.cart-item-total { font-family:var(--font-h); font-size:.9rem; font-weight:700; text-align:right; }
.cart-item-remove { display:block; font-size:.65rem; color:var(--text3); text-align:right; margin-top:4px; cursor:pointer; transition:color .2s; }
.cart-item-remove:hover { color:#f87171; }
.cart-footer { padding:20px 24px; border-top:1px solid var(--border); }
.cart-total-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.cart-total-label { font-family:var(--font-ui); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text2); }
.cart-total-val { font-family:var(--font-h); font-size:1.3rem; font-weight:700; color:var(--accent); }

/* ── Login / Auth ────────────────────────────── */
.auth-wrap {
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:100px 20px 60px;
}
.auth-card { width:100%; max-width:420px; }
.auth-toggle { display:flex; gap:0; margin-bottom:32px; }
.auth-tab {
  flex:1;
  font-family:var(--font-ui);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text2);
  padding:10px;
  background:var(--bg3);
  border-bottom:2px solid transparent;
  text-align:center;
  cursor:pointer;
  transition:color .2s, border-color .2s;
}
.auth-tab:first-child { clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%); }
.auth-tab.active { color:var(--accent); border-color:var(--accent); }
.auth-form { display:none; }
.auth-form.active { display:block; }
.auth-alt { font-size:.8rem; color:var(--text2); text-align:center; margin-top:20px; }
.auth-alt a { color:var(--accent); text-decoration:underline; cursor:pointer; }

/* ── CTA Band ────────────────────────────────── */
.cta-band {
  background:linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
  border:1px solid var(--border);
  clip-path:var(--blade-xl);
  padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.cta-band::before {
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:300px;
  height:300px;
  background:radial-gradient(ellipse at top right, var(--acc10), transparent 70%);
  pointer-events:none;
}

/* ── About page ─────────────────────────────── */
.pathway-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.pathway-card { cursor:pointer; }
.pathway-icon {
  font-family:var(--font-h);
  font-size:1.5rem;
  color:var(--accent);
  margin-bottom:16px;
}

/* ── Contact page ──────────────────────────── */
.contact-grid { display:grid; grid-template-columns:3fr 2fr; gap:40px; align-items:start; }
.contact-info-item { display:flex; gap:14px; margin-bottom:24px; align-items:flex-start; }
.contact-icon {
  width:38px;
  height:38px;
  background:var(--acc10);
  display:flex;
  align-items:center;
  justify-content:center;
  clip-path:var(--blade-xs);
  flex-shrink:0;
  font-size:.9rem;
}
.contact-info-label { font-family:var(--font-ui); font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); margin-bottom:3px; }
.contact-info-val { font-size:.875rem; color:var(--text2); }
.form-success {
  background:rgba(74,222,128,.08);
  border:1px solid rgba(74,222,128,.2);
  clip-path:var(--blade-sm);
  padding:28px 24px;
  display:none;
  text-align:center;
}
.form-success.show { display:block; }
.form-success h3 { color:#4ade80; margin-bottom:8px; }
.form-success p { font-size:.875rem; color:var(--text2); }

/* ── Footer ─────────────────────────────────── */
.footer {
  border-top:1px solid var(--border);
  padding-block:clamp(40px,6vw,72px) clamp(24px,4vw,40px);
  margin-top:clamp(64px,10vw,120px);
}
.footer-grid { display:grid; grid-template-columns:1fr auto; gap:40px; margin-bottom:40px; align-items:start; }
.footer-logo { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.footer-logo-text { font-family:var(--font-h); font-size:.8rem; font-weight:900; letter-spacing:.1em; }
.footer-tagline { font-size:.875rem; color:var(--text2); margin-bottom:4px; }
.footer-region { font-family:var(--font-ui); font-size:.65rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); }
.footer-nav-grid { display:flex; gap:48px; }
.footer-col { display:flex; flex-direction:column; gap:10px; }
.footer-col-head { font-family:var(--font-ui); font-size:.65rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--text3); margin-bottom:4px; }
.footer-col a { font-size:.85rem; color:var(--text2); transition:color .2s; }
.footer-col a:hover { color:var(--text); }
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:20px;
  border-top:1px solid var(--border);
  gap:16px;
  flex-wrap:wrap;
}
.footer-copy { font-size:.78rem; color:var(--text3); }

/* ── Scroll reveal ──────────────────────────── */
[data-reveal] {
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
}
[data-reveal].visible {
  opacity:1;
  transform:translateY(0);
}
[data-reveal][data-delay="1"] { transition-delay:.1s; }
[data-reveal][data-delay="2"] { transition-delay:.2s; }
[data-reveal][data-delay="3"] { transition-delay:.3s; }
[data-reveal][data-delay="4"] { transition-delay:.4s; }

/* ── Utility ────────────────────────────────── */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.text-accent { color:var(--accent); }
.text-muted { color:var(--text2); }
.mt-auto { margin-top:auto; }
.gap-grid { display:grid; gap:16px; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.hidden { display:none !important; }
.spinner {
  width:20px; height:20px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
  display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Responsive ─────────────────────────────── */
@media (max-width:900px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-auth-wrap { display:none; }
  .nav-messages-btn { display:none; }
  .values-grid,
  .roster-strip,
  .pathway-grid { grid-template-columns:1fr 1fr; }
  .forum-categories { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-nav-grid { flex-wrap:wrap; gap:32px; }
  .match-card { grid-template-columns:auto 1fr; grid-template-rows:auto auto; }
  .match-score { grid-column:2; text-align:left; }
}
@media (max-width:600px) {
  .values-grid,
  .roster-strip,
  .pathway-grid { grid-template-columns:1fr; }
  .cta-band { flex-direction:column; text-align:center; }
  .hero-ctas { flex-direction:column; }
  .hero-ctas .btn { width:100%; justify-content:center; }
  .player-modal-stats { grid-template-columns:repeat(2,1fr); }
  .product-grid { grid-template-columns:1fr 1fr; }
  .auth-toggle { flex-direction:column; }
  .nav { width:calc(100% - 24px); top:12px; }
}

/* ═══════════════════════════════════════════════════════════
   EXTENDED STYLES — Forum v2, Particles, Admin, Events
   ═══════════════════════════════════════════════════════════ */

/* ── Particles / background ──────────────────────────────── */
#particles-bg { position:fixed; inset:0; pointer-events:none; }
.bg-orb {
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  filter:blur(130px);
}
.bg-orb-1 { width:700px; height:700px; background:radial-gradient(circle, rgba(255,243,0,.055) 0%, transparent 65%); bottom:-250px; left:-150px; }
.bg-orb-2 { width:500px; height:500px; background:radial-gradient(circle, rgba(255,243,0,.03) 0%, transparent 65%); top:15%; right:-120px; }

/* Ensure page content renders above fixed canvas/orbs */
.nav          { z-index:100; }
.mobile-menu  { z-index:99; }
.modal-overlay{ z-index:150; }
.cart-panel   { z-index:130; }
.cart-backdrop{ z-index:129; }
.page-header, .hero, .section, .section--sm, footer,
.auth-wrap { position:relative; z-index:1; }

/* ── Admin nav button ────────────────────────────────────── */
.nav-admin-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  background:var(--acc10);
  border:1px solid var(--acc15);
  border-radius:4px;
  color:var(--accent);
  font-size:.85rem;
  transition:background .2s var(--ease);
  flex-shrink:0;
}
.nav-admin-btn:hover { background:var(--acc15); }

/* ── Messages nav button ─────────────────────────────────── */
.nav-messages-btn {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  background:transparent;
  border-radius:50%;
  color:var(--text2);
  font-size:.9rem;
  transition:color .2s var(--ease), background .2s var(--ease);
  flex-shrink:0;
  text-decoration:none;
}
.nav-messages-btn:hover { color:var(--text); background:rgba(255,255,255,.06); }
.msg-badge {
  position:absolute;
  top:-2px;
  right:-2px;
  background:var(--accent);
  color:#000;
  font-family:var(--font-ui);
  font-size:.55rem;
  font-weight:700;
  min-width:16px;
  height:16px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 3px;
  pointer-events:none;
}

/* ── Discord login button ─────────────────────────────────── */
.btn--discord {
  background:#5865F2;
  color:#fff;
  clip-path:var(--blade-sm);
  gap:10px;
}
.btn--discord:hover { background:#4752C4; }
.discord-divider {
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0;
  color:var(--text3);
  font-size:.75rem;
  font-family:var(--font-ui);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.discord-divider::before,.discord-divider::after {
  content:'';
  flex:1;
  height:1px;
  background:var(--border);
}
#discordUsernameRow { display:none; margin-top:12px; }
#discordUsernameRow.show { display:flex; gap:8px; }
#discordUsernameRow input { flex:1; }

/* ── Forum v2 — bbPress/Enjin layout ────────────────────── */

/* Group header (section dividers) */
.forum-group { margin-bottom:8px; }
.forum-group + .forum-group { margin-top:28px; }
.forum-group-label {
  font-family:var(--font-ui);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text3);
  padding:0 0 10px;
  border-bottom:1px solid var(--border);
  margin-bottom:6px;
  display:block;
}

/* Category row — horizontal bbPress style */
.forum-cat-row {
  display:grid;
  grid-template-columns:52px 1fr auto;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-left:3px solid transparent;
  cursor:pointer;
  margin-bottom:3px;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.forum-cat-row:hover { background:var(--bg3); border-left-color:var(--acc25); }
.cat-icon-lg {
  width:44px;
  height:44px;
  background:var(--bg4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  clip-path:var(--blade-xs);
  flex-shrink:0;
  transition:background .2s;
}
.forum-cat-row:hover .cat-icon-lg { background:var(--acc10); }
.cat-row-info { min-width:0; }
.cat-row-name { font-family:var(--font-h); font-size:.78rem; font-weight:600; letter-spacing:.04em; margin-bottom:3px; }
.cat-row-desc { font-size:.77rem; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-row-stats { text-align:right; flex-shrink:0; }
.cat-row-stat-val { font-family:var(--font-h); font-size:.9rem; font-weight:700; }
.cat-row-stat-lbl { font-family:var(--font-ui); font-size:.55rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text3); }
.cat-last-post { font-size:.7rem; color:var(--text3); margin-top:2px; white-space:nowrap; }
.cat-last-post strong { color:var(--text2); }

/* Thread row — bbPress style */
.thread-row {
  display:grid;
  grid-template-columns:1fr 130px;
  gap:16px;
  align-items:center;
  padding:13px 18px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-left:3px solid transparent;
  cursor:pointer;
  margin-bottom:3px;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.thread-row:hover { background:var(--bg3); border-left-color:var(--acc25); }
.thread-row.is-pinned { border-left-color:var(--acc15); }
.thread-row-left { min-width:0; }
.thread-row-title {
  font-size:.88rem;
  font-weight:500;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.thread-row-meta { font-size:.73rem; color:var(--text2); }
.thread-row-right { text-align:right; }
.thread-row-counts { display:flex; justify-content:flex-end; gap:12px; margin-bottom:4px; }
.thread-count-item { display:flex; flex-direction:column; align-items:flex-end; }
.thread-count-val { font-family:var(--font-h); font-size:.78rem; font-weight:700; }
.thread-count-lbl { font-family:var(--font-ui); font-size:.52rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); }
.thread-last { font-size:.68rem; color:var(--text3); }

/* Thread tags */
.thread-tag {
  font-family:var(--font-ui);
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:2px;
  flex-shrink:0;
  white-space:nowrap;
}
.tag--announcement { background:rgba(255,243,0,.14); color:var(--accent); }
.tag--discussion   { background:rgba(100,149,237,.12); color:#7eb3ff; }
.tag--question     { background:rgba(50,205,50,.1);  color:#5edb5e; }
.tag--guide        { background:rgba(255,165,0,.1);  color:#ffa040; }
.tag--clip         { background:rgba(180,0,220,.1);  color:#c860ff; }
.tag--humor        { background:rgba(255,100,100,.1);color:#ff8080; }
.tag--lfg          { background:rgba(0,200,200,.1);  color:#40d4d4; }
.tag--pinned       { background:rgba(255,243,0,.14); color:var(--accent); }

/* Post layout — user card + content (bbPress two-column) */
.post-row {
  display:grid;
  grid-template-columns:172px 1fr;
  gap:0;
  border:1px solid var(--border);
  background:var(--bg2);
  margin-bottom:6px;
  overflow:hidden;
}
.post-user-card {
  background:var(--bg3);
  padding:20px 14px;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
}
.post-avatar {
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-h);
  font-size:.95rem;
  font-weight:900;
  flex-shrink:0;
  margin-bottom:4px;
}
.post-username { font-family:var(--font-h); font-size:.7rem; font-weight:700; letter-spacing:.05em; color:var(--text); word-break:break-word; }
.post-rank {
  font-family:var(--font-ui);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:100px;
}
.rank--owner {
  background: linear-gradient(90deg,#3a2600,#7a5800,#c8a100,#f5d060,#c8a100,#7a5800,#3a2600);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border: 1px solid rgba(200,161,0,.5);
  box-shadow: 0 0 10px rgba(200,161,0,.25), inset 0 0 4px rgba(245,208,96,.1);
  animation: owner-gold 4s linear infinite;
  padding: 2px 12px;
}
@keyframes owner-gold { to { background-position: 300% center; } }
.rank--admin    { background:rgba(255,243,0,.15); color:var(--accent); }
.rank--legend   { background:rgba(220,100,20,.15); color:#ff8c40; }
.rank--champion { background:rgba(180,0,220,.12); color:#c860ff; }
.rank--veteran  { background:rgba(100,149,237,.12); color:#7eb3ff; }
.rank--member   { background:rgba(255,255,255,.07); color:var(--text2); }
.rank--recruit  { background:rgba(255,255,255,.04); color:var(--text3); }
.post-stat-line { font-family:var(--font-ui); font-size:.6rem; font-weight:600; letter-spacing:.07em; color:var(--text3); }
.post-stat-line strong { color:var(--text2); }
/* Discord badge in user card */
.post-discord-badge {
  font-size:.55rem;
  font-family:var(--font-ui);
  font-weight:700;
  letter-spacing:.08em;
  color:#5865F2;
  background:rgba(88,101,242,.12);
  padding:2px 7px;
  border-radius:100px;
}

.post-content-area {
  padding:18px 22px;
  display:flex;
  flex-direction:column;
  min-height:120px;
}
.post-content-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
  gap:8px;
  flex-wrap:wrap;
}
.post-date-num { font-family:var(--font-ui); font-size:.65rem; font-weight:600; letter-spacing:.08em; color:var(--text3); }
.post-edited-label { font-size:.62rem; color:var(--text3); font-style:italic; }
.post-text { font-size:.875rem; color:var(--text2); line-height:1.8; flex:1; word-break:break-word; }

/* ── Post edit / delete actions ─────────────────────────────────────────── */
.post-actions-wrap { position:relative; margin-left:auto; }
.post-actions-btn {
  background:none; border:none; cursor:pointer;
  color:var(--text3); font-size:1rem; font-weight:700; letter-spacing:.1em;
  padding:2px 7px; border-radius:5px; line-height:1;
  transition:color .12s, background .12s;
}
.post-actions-btn:hover { color:var(--text); background:rgba(255,255,255,.07); }
.post-actions-menu {
  position:absolute; right:0; top:calc(100% + 4px);
  background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; padding:4px; z-index:20;
  min-width:130px; box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.post-action-item {
  display:block; width:100%;
  background:none; border:none; cursor:pointer;
  color:var(--text2); font-size:.8rem;
  padding:7px 10px; text-align:left; border-radius:5px;
  transition:background .1s, color .1s;
}
.post-action-item:hover { background:rgba(255,255,255,.07); color:var(--text); }
.post-action-delete:hover { background:rgba(220,50,50,.15); color:#ff6b6b; }
.post-action-mod:hover { background:rgba(255,140,0,.12); color:#ff8c40; }
.post-edit-actions { margin-top:10px; display:flex; gap:8px; }
.post-signature {
  margin-top:14px;
  padding-top:10px;
  border-top:1px dashed var(--border);
  font-size:.75rem;
  font-style:italic;
  color:var(--text3);
  line-height:1.5;
}
.post-signature-label {
  display:block;
  font-style:normal;
  font-family:var(--font-ui);
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text3);
  margin-bottom:3px;
}

/* Forum stats bar (at bottom of category view) */
.forum-stats-bar {
  display:flex;
  gap:28px;
  padding:14px 20px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-top:none;
  flex-wrap:wrap;
  align-items:center;
  margin-top:28px;
}
.forum-stats-bar .label { color:var(--text3); }
.forum-stats-bar .stat-num { font-family:var(--font-h); font-size:.85rem; font-weight:700; color:var(--text); }
.forum-newest { margin-left:auto; font-size:.75rem; color:var(--text2); }
.forum-newest strong { color:var(--accent); }

/* Thread header stats */
.thread-view-header { margin-bottom:20px; }
.thread-view-meta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.thread-view-stat { font-family:var(--font-ui); font-size:.65rem; font-weight:700; letter-spacing:.08em; color:var(--text3); }
.thread-view-stat strong { color:var(--text2); }

/* Reply area */
.reply-area {
  background:var(--bg2);
  border:1px solid var(--border);
  padding:24px;
  margin-top:24px;
}
.reply-area h4 { margin-bottom:14px; }
.reply-area textarea.form-input { clip-path:none; min-height:100px; }

/* Responsive for post layout */
@media(max-width:720px) {
  .post-row { grid-template-columns:1fr; }
  .post-user-card {
    flex-direction:row;
    text-align:left;
    padding:12px 16px;
    border-right:none;
    border-bottom:1px solid var(--border);
    gap:12px;
    flex-wrap:wrap;
  }
  .post-avatar { width:38px; height:38px; font-size:.75rem; margin-bottom:0; }
  .forum-cat-row { grid-template-columns:44px 1fr; }
  .cat-row-stats { display:none; }
  .thread-row { grid-template-columns:1fr; }
  .thread-row-right { display:none; }
}

/* ── Events / News / Calendar ────────────────────────────── */
.events-layout { display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start; }
.calendar-wrap {
  background:var(--bg2);
  border:1px solid var(--border);
  clip-path:var(--blade-lg);
  overflow:hidden;
}
.calendar-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.calendar-month { font-family:var(--font-h); font-size:.85rem; font-weight:700; letter-spacing:.06em; }
.calendar-nav-btn {
  width:30px; height:30px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg4);
  border-radius:4px;
  font-size:.75rem;
  transition:background .2s;
}
.calendar-nav-btn:hover { background:var(--acc10); color:var(--accent); }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-day-name {
  font-family:var(--font-ui);
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text3);
  text-align:center;
  padding:10px 4px;
  border-bottom:1px solid var(--border);
}
.cal-day {
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:var(--font-ui);
  font-size:.78rem;
  font-weight:600;
  color:var(--text2);
  border:1px solid transparent;
  cursor:default;
  position:relative;
  gap:3px;
  transition:background .15s;
}
.cal-day.other-month { color:var(--text3); }
.cal-day.today { color:var(--accent); font-weight:700; }
.cal-day.has-event { cursor:pointer; color:var(--text); }
.cal-day.has-event:hover { background:var(--bg3); }
.cal-day.selected { background:var(--acc10); border-color:var(--acc15); color:var(--accent); }
.event-dot { width:5px; height:5px; background:var(--accent); border-radius:50%; }
.event-dot.type-match     { background:#4ade80; }
.event-dot.type-stream    { background:#c860ff; }
.event-dot.type-community  { background:#7eb3ff; }
.event-dot.type-news       { background:var(--text3); }
.event-dot.type-giveaway   { background:#f59e0b; }
.event-dot.type-custom     { background:#22d3ee; }
.event-dot.type-tournament { background:#7eb3ff; }

/* Event cards */
.event-card {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:start;
  padding:16px 20px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-left:3px solid transparent;
  margin-bottom:6px;
  transition:background .2s, border-color .2s;
}
.event-card--match      { border-left-color:#4ade80; }
.event-card--stream     { border-left-color:#c860ff; }
.event-card--community  { border-left-color:#7eb3ff; }
.event-card--news       { border-left-color:var(--text3); }
.event-card--giveaway   { border-left-color:#f59e0b; }
.event-card--custom     { border-left-color:#22d3ee; }
.event-card--tournament { border-left-color:#7eb3ff; }
.event-card:hover { background:var(--bg3); }
.event-date-block { text-align:center; min-width:44px; }
.event-day  { font-family:var(--font-h); font-size:1.4rem; font-weight:700; line-height:1; }
.event-mon  { font-family:var(--font-ui); font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text2); margin-top:2px; }
.event-type-badge {
  font-family:var(--font-ui);
  font-size:.52rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:2px;
  margin-bottom:5px;
  display:inline-block;
}
.badge-match      { background:rgba(74,222,128,.1);   color:#4ade80; }
.badge-stream     { background:rgba(180,0,220,.1);    color:#c860ff; }
.badge-community  { background:rgba(100,149,237,.12); color:#7eb3ff; }
.badge-news       { background:rgba(255,255,255,.06); color:var(--text2); }
.badge-giveaway   { background:rgba(245,158,11,.12);  color:#f59e0b; }
.badge-custom     { background:rgba(34,211,238,.1);   color:#22d3ee; }
.badge-tournament { background:rgba(126,179,255,.1);  color:#7eb3ff; }
.event-title { font-size:.88rem; font-weight:500; margin-bottom:3px; }
.event-desc  { font-size:.78rem; color:var(--text2); line-height:1.6; }
.event-time  { font-family:var(--font-ui); font-size:.65rem; font-weight:600; letter-spacing:.08em; color:var(--accent); margin-top:4px; }

@media(max-width:900px) { .events-layout { grid-template-columns:1fr; } }

/* ── Admin page ──────────────────────────────────────────── */
.admin-layout { display:grid; grid-template-columns:220px 1fr; gap:0; min-height:100dvh; padding-top:80px; }
.admin-sidebar {
  background:var(--bg2);
  border-right:1px solid var(--border);
  padding:24px 0;
  position:sticky;
  top:80px;
  align-self:start;
  height:calc(100dvh - 80px);
  overflow-y:auto;
}
.admin-sidebar-head {
  font-family:var(--font-ui);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text3);
  padding:0 20px 12px;
  border-bottom:1px solid var(--border);
  margin-bottom:8px;
}
.admin-nav-item {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 20px;
  font-family:var(--font-ui);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text2);
  cursor:pointer;
  transition:background .15s, color .15s;
  border-left:3px solid transparent;
}
.admin-nav-item:hover { background:var(--bg3); color:var(--text); }
.admin-nav-item.active { color:var(--accent); border-left-color:var(--accent); background:var(--acc10); }
.admin-nav-icon { width:18px; text-align:center; font-size:.9rem; }
.admin-main { padding:32px clamp(16px,3vw,40px); }
.admin-section { display:none; }
.admin-section.active { display:block; }
.admin-stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:32px; }
.admin-stat-card {
  background:var(--bg3);
  clip-path:var(--blade-sm);
  padding:20px 18px;
  border-left:3px solid var(--acc15);
}
.admin-stat-val { font-family:var(--font-h); font-size:1.8rem; font-weight:700; color:var(--accent); line-height:1; margin-bottom:4px; }
.admin-stat-lbl { font-family:var(--font-ui); font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text2); }
.admin-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.admin-table th {
  font-family:var(--font-ui);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text3);
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
}
.admin-table td { padding:10px 12px; border-bottom:1px solid var(--border); color:var(--text2); vertical-align:top; }
.admin-table tr:hover td { background:var(--bg3); }
.admin-table td:first-child { color:var(--text); font-weight:500; }
.admin-actions { display:flex; gap:6px; flex-wrap:wrap; }
.admin-btn {
  font-family:var(--font-ui);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 10px;
  clip-path:var(--blade-xs);
  cursor:pointer;
  transition:background .15s;
}
.admin-btn--pin    { background:rgba(255,243,0,.1);  color:var(--accent); }
.admin-btn--pin:hover { background:rgba(255,243,0,.2); }
.admin-btn--del    { background:rgba(248,113,113,.1); color:#f87171; }
.admin-btn--del:hover { background:rgba(248,113,113,.2); }
.admin-empty { padding:40px; text-align:center; color:var(--text3); font-size:.875rem; }

/* ── Members table ─────────────────────────────────────────────────────────── */
.member-cell { display:flex; align-items:center; gap:10px; }
.member-avatar-sm {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:rgba(255,243,0,.12); color:var(--accent);
  font-family:var(--font-h); font-size:.75rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.member-socials { display:flex; gap:5px; margin-top:4px; flex-wrap:wrap; }
.member-social-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; color:var(--text3);
  transition:color .15s;
}
.member-social-icon:hover { color:var(--accent); }
.member-social-icon svg { width:14px; height:14px; }
/* Status badges — appearance now driven by tag defs (inline style) */
.member-status-badge {
  display:inline-block;
  font-family:var(--font-ui); font-size:.58rem; font-weight:700;
  letter-spacing:.1em; padding:3px 8px; border-radius:100px;
}
.member-active-badge {
  display:inline-block;
  background:rgba(74,222,128,.08); color:#4ade80;
  font-family:var(--font-ui); font-size:.58rem; font-weight:700;
  letter-spacing:.1em; padding:3px 8px; border-radius:100px;
}
.admin-rank-select {
  appearance:none; -webkit-appearance:none;
  background:transparent; border:none; cursor:pointer;
  font-family:var(--font-ui); font-size:.62rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:4px 8px; border-radius:100px;
}
.admin-rank-select:focus { outline:none; }

/* ── Member tags ─────────────────────────────────────────────────────────────── */
.member-tag-row { display:flex; gap:4px; margin-top:5px; flex-wrap:wrap; align-items:center; }
.member-tag {
  display:inline-flex; align-items:center;
  font-family:var(--font-ui); font-size:.58rem; font-weight:600; letter-spacing:.06em;
  padding:2px 7px; border-radius:100px; cursor:pointer;
  transition:opacity .15s;
}
.member-tag:hover { opacity: .75; }

/* Tag badges shown on forum post cards and profiles */
.member-tag-badge {
  display:inline-block;
  font-family:var(--font-ui); font-size:.56rem; font-weight:700;
  letter-spacing:.07em; padding:2px 7px; border-radius:100px;
  white-space:nowrap;
}
.post-member-tags { display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; }

/* Tag assignment dropdown */
.member-tag-add-sel {
  appearance:none; -webkit-appearance:none;
  background:rgba(255,255,255,.04); border:1px dashed var(--border); border-radius:100px;
  color:var(--text3); font-family:var(--font-ui); font-size:.58rem; font-weight:600;
  padding:2px 8px; cursor:pointer; letter-spacing:.04em;
  transition:border-color .15s, color .15s;
}
.member-tag-add-sel:hover, .member-tag-add-sel:focus { border-color:var(--accent); color:var(--accent); outline:none; }

/* Tag editor layout */
.tag-def-row {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px 10px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg2);
}

/* ── Members sub-tabs ────────────────────────────────────────────────────────── */
.members-tabs {
  display:flex; gap:4px; flex-wrap:wrap;
  padding:0 0 16px; margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.mtab {
  background:transparent; border:1px solid var(--border);
  color:var(--text2); font-family:var(--font-ui); font-size:.68rem;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 16px; border-radius:100px; cursor:pointer;
  transition:all .15s;
}
.mtab:hover { border-color:var(--accent); color:var(--accent); }
.mtab.active { background:var(--accent); border-color:var(--accent); color:#000; }
.mtab-panel { padding-top:16px; }

/* ── Ban/Mute modal ──────────────────────────────────────────────────────────── */
.bm-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.75); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.bm-modal {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:16px; padding:28px 32px; width:100%; max-width:440px;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
}

/* ── Role editor ─────────────────────────────────────────────────────────────── */
.re-layout {
  display:grid; grid-template-columns:220px 1fr; gap:0;
  border:1px solid var(--border); border-radius:12px;
  overflow:hidden; margin-bottom:20px; min-height:320px;
}
.re-role-list {
  border-right:1px solid var(--border);
  background:var(--bg2); padding:8px;
  display:flex; flex-direction:column; gap:2px;
  overflow-y:auto;
}
.re-role-btn {
  display:flex; align-items:center; gap:8px;
  background:transparent; border:none; cursor:pointer;
  padding:9px 10px; border-radius:8px;
  transition:background .12s; width:100%;
}
.re-role-btn:hover { background:rgba(255,255,255,.05); }
.re-role-btn.active { background:rgba(255,255,255,.08); }
.re-role-dot {
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  background:var(--rc, var(--text3));
}
.re-role-name {
  font-family:var(--font-ui); font-size:.75rem; font-weight:700;
  color:var(--rc, var(--text)); letter-spacing:.04em;
}
.re-role-count {
  font-family:var(--font-ui); font-size:.62rem; color:var(--text3); margin-top:1px;
}
.re-role-del {
  background:transparent; border:none; cursor:pointer;
  color:var(--text3); font-size:.9rem; padding:2px 4px; border-radius:4px;
  line-height:1; transition:color .12s;
}
.re-role-del:hover { color:#f87171; }
.re-editor { padding:20px; overflow-y:auto; background:var(--bg); }
.re-editor-inner { display:flex; flex-direction:column; gap:16px; }
.re-editor-header { padding-bottom:14px; border-bottom:1px solid var(--border); }
.re-perm-groups { display:flex; flex-direction:column; gap:12px; }
.re-perm-group { display:flex; flex-direction:column; gap:6px; }
.re-perm-group-label {
  font-family:var(--font-ui); font-size:.6rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text3);
  padding-bottom:4px; border-bottom:1px solid var(--border);
}
.perm-toggle-row {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:3px 0;
}
.perm-toggle {
  position:relative; display:inline-block; width:34px; height:18px; flex-shrink:0;
}
.perm-toggle input { opacity:0; width:0; height:0; position:absolute; }
.perm-slider {
  position:absolute; inset:0; border-radius:100px;
  background:rgba(255,255,255,.1); transition:background .2s;
  cursor:pointer;
}
.perm-slider::before {
  content:''; position:absolute;
  width:12px; height:12px; border-radius:50%;
  top:3px; left:3px;
  background:var(--text3); transition:transform .2s, background .2s;
}
.perm-toggle input:checked + .perm-slider { background:rgba(255,243,0,.2); }
.perm-toggle input:checked + .perm-slider::before {
  transform:translateX(16px); background:var(--accent);
}
.perm-label { font-family:var(--font-ui); font-size:.75rem; color:var(--text2); }
.perm-row--locked { opacity:.55; cursor:not-allowed; }
.perm-row--locked .perm-slider { cursor:not-allowed; }
.perm-lock { font-size:.7rem; vertical-align:middle; margin-left:3px; }
.re-create-form {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:16px 20px;
}
.re-drag-handle {
  cursor:grab; color:var(--text3); font-size:.9rem;
  padding:0 4px; flex-shrink:0; user-select:none;
}
.re-role-btn.re-role-locked { opacity:.5; cursor:not-allowed; }
.re-role-btn.re-role-dragging { opacity:.4; }
.re-role-btn.re-role-drag-over { background:rgba(255,243,0,.08); outline:1px solid rgba(255,243,0,.3); }
@media(max-width:700px) {
  .re-layout { grid-template-columns:1fr; }
  .re-role-list { border-right:none; border-bottom:1px solid var(--border); max-height:180px; }
}

@media(max-width:800px) {
  .admin-layout { grid-template-columns:1fr; }
  .admin-sidebar { position:static; height:auto; display:flex; gap:4px; flex-wrap:wrap; padding:12px; }
  .admin-nav-item { padding:8px 12px; border-left:none; border-bottom:3px solid transparent; }
  .admin-nav-item.active { border-left:none; border-bottom-color:var(--accent); }
}

/* ═══════════════════════════════════════════════════════════════
   NAV DROPDOWN
   ═══════════════════════════════════════════════════════════════ */
.nav-dropdown { position:relative; }
.nav-dropdown-menu {
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background:var(--bg2);
  border:1px solid var(--borderl);
  clip-path:var(--blade-sm);
  list-style:none;
  min-width:160px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
  transform-origin:top center;
  padding:6px 0;
  z-index:200;
}
.nav-dropdown-menu::before {
  content:'';
  position:absolute;
  top:-12px;
  left:0;
  right:0;
  height:12px;
}
.nav-dropdown.open .nav-dropdown-menu { opacity:1; pointer-events:all; }
.nav-dropdown-link {
  display:block;
  padding:9px 20px;
  font-size:.72rem;
  font-family:var(--font-ui);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text2);
  transition:color .15s, background .15s;
  white-space:nowrap;
}
.nav-dropdown-link:hover { color:var(--accent); background:var(--bg3); }

/* ═══════════════════════════════════════════════════════════════
   TOURNAMENT BRACKET
   ═══════════════════════════════════════════════════════════════ */
.bracket-scroll-wrap { overflow-x:auto; padding-bottom:16px; }

.b-match {
  position:absolute;
  width:200px;
  background:var(--bg3);
  border:1px solid var(--border);
  clip-path:var(--blade-xs);
  overflow:hidden;
  transition:border-color .2s;
}
.b-match:hover { border-color:var(--borderl); }
.b-match--final { border-color:var(--acc25); }
.b-match--final:hover { border-color:var(--acc25); }
.b-match--done { border-color:var(--borderl); }

.b-match-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 10px;
  background:var(--bg4);
  border-bottom:1px solid var(--border);
}
.b-round-badge {
  font-family:var(--font-ui);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text3);
}
.b-match--final .b-round-badge { color:var(--accent); }
.b-match-score {
  font-family:var(--font-h);
  font-size:.65rem;
  color:var(--text2);
}

.b-team {
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  font-size:.78rem;
  border-bottom:1px solid var(--border);
  position:relative;
  min-height:38px;
}
.b-team:last-child { border-bottom:none; }
.b-team--winner { background:rgba(255,243,0,.04); }
.b-team--winner .b-team-name { color:var(--accent); font-weight:600; }
.b-team--loser { opacity:.45; }
.b-team--tbd .b-team-name { color:var(--text3); font-style:italic; }

.b-team-tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-h);
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:2px 5px;
  clip-path:var(--blade-xs);
  flex-shrink:0;
  min-width:28px;
}
.b-team-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.b-winner-icon { font-size:.6rem; color:var(--accent); flex-shrink:0; }

.b-col-label {
  position:absolute;
  text-align:center;
  font-family:var(--font-ui);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text3);
  top:0;
}

/* Round robin */
.rr-layout { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:start; }
.rr-matrix { border-collapse:collapse; font-size:.78rem; }
.rr-matrix th, .rr-matrix td { border:1px solid var(--border); padding:8px 10px; text-align:center; }
.rr-matrix thead { background:var(--bg3); }
.rr-matrix .rr-team-name { text-align:left; white-space:nowrap; min-width:130px; }
.rr-self { background:var(--bg4); color:var(--text3); }
.rr-win { color:#4ade80; font-weight:600; }
.rr-loss { color:#f87171; }
.rr-pending { color:var(--text3); }
.rr-standings { border-collapse:collapse; font-size:.8rem; min-width:300px; }
.rr-standings th, .rr-standings td { border:1px solid var(--border); padding:8px 12px; }
.rr-standings thead { background:var(--bg3); }
.b-section-title {
  font-family:var(--font-ui);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text3);
  margin-bottom:12px;
}
@media(max-width:700px) { .rr-layout { grid-template-columns:1fr; } }

/* Registration grid */
.b-registration-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-top:16px; }
.b-reg-team {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:var(--bg3);
  border:1px solid var(--border);
  clip-path:var(--blade-xs);
  font-size:.78rem;
}
.b-reg-team--empty { color:var(--text3); border-style:dashed; background:transparent; }
.b-reg-paid { font-family:var(--font-ui); font-size:.65rem; font-weight:700; color:#4ade80; margin-left:auto; }

/* Bracket placeholder */
.bracket-placeholder {
  padding:48px;
  text-align:center;
  color:var(--text2);
  font-size:.875rem;
  line-height:1.7;
  background:var(--bg3);
  border:1px solid var(--border);
  clip-path:var(--blade-md);
}

/* ═══════════════════════════════════════════════════════════════
   TOURNAMENT CARDS
   ═══════════════════════════════════════════════════════════════ */
.tournament-list { display:flex; flex-direction:column; gap:14px; }
.tourn-card {
  background:var(--bg2);
  border:1px solid var(--border);
  clip-path:var(--blade-md);
  padding:20px 24px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
}
.tourn-card:hover { border-color:var(--borderl); background:var(--bg3); }
.tourn-card-left { display:flex; flex-direction:column; gap:6px; }
.tourn-name { font-family:var(--font-h); font-size:.9rem; font-weight:700; }
.tourn-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tourn-meta-item { font-family:var(--font-ui); font-size:.7rem; color:var(--text2); }
.tourn-status {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--font-ui);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:100px;
}
.tourn-status--registration { background:rgba(99,199,255,.12); color:#63c7ff; }
.tourn-status--in_progress  { background:rgba(255,243,0,.12); color:var(--accent); }
.tourn-status--completed    { background:rgba(74,222,128,.1); color:#4ade80; }
.tourn-prize {
  font-family:var(--font-h);
  font-size:.75rem;
  color:var(--accent);
  text-align:right;
}
.tourn-arrow { font-size:.9rem; color:var(--text3); }

/* ═══════════════════════════════════════════════════════════════
   TEAMS PAGE
   ═══════════════════════════════════════════════════════════════ */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.team-card {
  background:var(--bg2);
  border:1px solid var(--border);
  clip-path:var(--blade-md);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:border-color .2s;
}
.team-card:hover { border-color:var(--borderl); }
.team-card--mine { border-color:var(--acc25); }
.team-card-top { display:flex; align-items:center; gap:12px; }
.team-card-swatch {
  width:44px;
  height:44px;
  clip-path:var(--blade-xs);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-h);
  font-size:.6rem;
  font-weight:700;
  flex-shrink:0;
}
.team-card-name { font-family:var(--font-h); font-size:.85rem; font-weight:700; }
.team-card-game { font-size:.72rem; color:var(--text2); }
.team-card-stats { display:flex; gap:16px; }
.team-card-stat-val { font-family:var(--font-h); font-size:.9rem; font-weight:700; }
.team-card-stat-lbl { font-family:var(--font-ui); font-size:.62rem; color:var(--text3); text-transform:uppercase; letter-spacing:.08em; }
.team-card-leader { font-size:.7rem; color:var(--text3); }
.team-card-leader span { color:var(--text2); }

/* My team banner */
.my-team-banner {
  background:rgba(255,243,0,.04);
  border:1px solid var(--acc25);
  clip-path:var(--blade-lg);
  padding:20px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* ═══════════════════════════════════════════════════════════════
   LEADERBOARDS
   ═══════════════════════════════════════════════════════════════ */
.lb-podium {
  display:grid;
  grid-template-columns:1fr 1.1fr 1fr;
  gap:12px;
  margin-bottom:24px;
  align-items:end;
}
.lb-podium-card {
  background:var(--bg2);
  border:1px solid var(--border);
  clip-path:var(--blade-md);
  padding:16px 20px;
  text-align:center;
  position:relative;
}
.lb-podium-card--1 { border-color:rgba(255,215,0,.3); background:rgba(255,215,0,.04); }
.lb-podium-card--2 { border-color:rgba(200,200,200,.2); }
.lb-podium-card--3 { border-color:rgba(180,100,0,.2); }
.lb-rank-crown { font-size:1.4rem; display:block; margin-bottom:8px; }
.lb-rank-num {
  font-family:var(--font-h);
  font-size:1.8rem;
  font-weight:900;
  display:block;
  line-height:1;
}
.lb-rank-num--1 { color:gold; }
.lb-rank-num--2 { color:#c0c0c0; }
.lb-rank-num--3 { color:#cd7f32; }
.lb-podium-name { font-family:var(--font-h); font-size:.8rem; font-weight:700; margin-top:8px; }
.lb-podium-wins { font-size:.7rem; color:var(--text2); margin-top:4px; }
.lb-podium-tag { display:inline-block; margin-bottom:8px; }

.lb-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.lb-table thead { background:var(--bg3); }
.lb-table th {
  padding:12px 16px;
  text-align:left;
  font-family:var(--font-ui);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text3);
  border-bottom:1px solid var(--border);
}
.lb-table td { padding:12px 16px; border-bottom:1px solid var(--border); }
.lb-table tbody tr:hover { background:var(--bg3); }
.lb-table tbody tr:last-child td { border-bottom:none; }
.lb-rank-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  font-family:var(--font-h);
  font-size:.7rem;
  font-weight:700;
}
.lb-rank-badge--1 { background:rgba(255,215,0,.15); color:gold; }
.lb-rank-badge--2 { background:rgba(192,192,192,.12); color:#c0c0c0; }
.lb-rank-badge--3 { background:rgba(205,127,50,.12); color:#cd7f32; }
.lb-wins-cell { font-family:var(--font-h); font-weight:700; color:var(--accent); }
.lb-wr-cell { font-family:var(--font-ui); font-weight:700; }
@media(max-width:600px) {
  .lb-podium { grid-template-columns:1fr; }
  .lb-table th:nth-child(n+5), .lb-table td:nth-child(n+5) { display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCRIMS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Scrim result card (board view) */
.scrim-result-card {
  background:var(--bg2);
  border:1px solid var(--borderl);
  clip-path:var(--blade-sm);
  padding:18px 20px;
  margin-bottom:10px;
  transition:border-color .15s var(--ease);
}
.scrim-result-card:hover { border-color:var(--accent20); }
.scrim-result-teams {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.scrim-result-side { display:flex; align-items:center; gap:8px; flex:1; }
.scrim-result-side--right { flex-direction:row-reverse; }
.scrim-score-block { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.scrim-score { font-family:var(--font-ui); font-size:1.1rem; font-weight:700; color:var(--accent); }
.scrim-score--loss { color:var(--text3); }
.scrim-score-sep { color:var(--border); font-size:.9rem; }
.scrim-team-name { font-size:.82rem; font-weight:600; color:var(--text); }
.scrim-result-meta {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.7rem;
  color:var(--text3);
  font-family:var(--font-ui);
  letter-spacing:.04em;
  flex-wrap:wrap;
}
.scrim-proof-badge {
  background:var(--bg3);
  border:1px solid var(--borderl);
  padding:2px 8px;
  border-radius:4px;
  font-size:.68rem;
  color:var(--text2);
}
.scrim-games-row {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px;
}
.scrim-game-chip {
  font-family:var(--font-ui);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:2px 8px;
  border-radius:3px;
}
.scrim-game-chip--w { background:rgba(74,222,128,.1); color:#4ade80; }
.scrim-game-chip--l { background:rgba(248,113,113,.08); color:#f87171; }

/* My Scrims sections */
.scrim-section { margin-bottom:32px; }
.scrim-section-head {
  font-family:var(--font-ui);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text3);
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.scrim-count {
  background:var(--accent);
  color:#000;
  font-size:.6rem;
  font-weight:700;
  padding:1px 6px;
  border-radius:100px;
  font-family:var(--font-ui);
}

/* Scrim card (list item) */
.scrim-card {
  background:var(--bg2);
  border:1px solid var(--borderl);
  clip-path:var(--blade-xs);
  padding:14px 16px;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.scrim-card-info { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.scrim-card-title { font-size:.8rem; color:var(--text); }
.scrim-card-note { font-size:.72rem; color:var(--text3); margin-top:2px; font-style:italic; }
.scrim-card-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; }
.scrim-note-text { font-size:.7rem; color:var(--text3); }

/* Status badges */
.scrim-status-badge {
  font-family:var(--font-ui);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:3px;
  white-space:nowrap;
}
.scrim-status--pending { background:rgba(255,200,50,.1);  color:#ffc832; }
.scrim-status--active  { background:rgba(99,199,255,.1);  color:#63c7ff; }
.scrim-status--review  { background:rgba(255,165,0,.1);   color:orange;  }
.scrim-status--win     { background:rgba(74,222,128,.1);  color:#4ade80; }
.scrim-status--loss    { background:rgba(248,113,113,.08);color:#f87171; }

/* Game inputs in result modal */
.scrim-game-input-row {
  display:flex;
  align-items:center;
  gap:16px;
  font-size:.78rem;
  color:var(--text2);
  padding:6px 0;
  border-bottom:1px solid var(--borderl);
}
.scrim-game-input-row:last-child { border-bottom:none; }
.scrim-game-num { min-width:52px; color:var(--text3); font-family:var(--font-ui); font-size:.7rem; }
.scrim-game-input-row label { display:flex; align-items:center; gap:6px; cursor:pointer; }

/* Proof upload */
.scrim-proof-upload { display:flex; align-items:center; flex-wrap:wrap; gap:0; }

/* Admin scrim review */
.scrim-review-card {
  background:var(--bg2);
  border:1px solid var(--borderl);
  clip-path:var(--blade-sm);
  padding:16px 18px;
  margin-bottom:10px;
}
.scrim-review-card--done { opacity:.6; }
.scrim-review-header {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.scrim-review-result {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:.78rem;
  padding:8px 0;
  border-top:1px solid var(--borderl);
}

.scrim-mode-badge {
  background:rgba(255,243,0,.1);
  color:var(--accent);
  border:1px solid rgba(255,243,0,.2);
  padding:1px 7px;
  border-radius:3px;
  font-size:.65rem;
  font-family:var(--font-ui);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Map pick order (active scrims) */
.scrim-card--active { flex-direction: column; align-items: stretch; gap: 0; }
.scrim-card-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.scrim-pick-order {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--borderl);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.scrim-pick-order-head {
  font-family: var(--font-ui);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 4px;
}
.scrim-pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  color: var(--text2);
}
.scrim-pick-mode {
  font-family: var(--font-ui);
  font-size: .65rem;
  font-weight: 700;
  color: var(--text);
  min-width: 32px;
}
.scrim-pick-arrow { color: var(--border); font-size: .7rem; }
.scrim-pick-label { color: var(--text2); font-size: .75rem; }
.scrim-pick-label--mine { color: var(--accent); font-weight: 600; }
.scrim-game-chip--neutral { background: var(--bg3); color: var(--text3); }

/* Game mode row in request modal */
.scrim-gm-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Org role badges ─────────────────────────── */
.player-org-badge {
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:4px;
  font-family:var(--font-ui);font-size:.62rem;font-weight:700;letter-spacing:.1em;
}
.player-org-badge--owner { background:rgba(255,200,0,.15);color:#ffd700;border:1px solid rgba(255,200,0,.3); }
.player-org-badge--staff { background:rgba(180,100,255,.15);color:#c880ff;border:1px solid rgba(180,100,255,.3); }
.player-org-badge--player { background:rgba(255,255,255,.06);color:var(--text2);border:1px solid var(--border); }
.player-org-badge--team { background:rgba(255,255,255,.06);color:var(--text2);border:1px solid var(--border); }

/* ── Player modal redesign ───────────────────── */
.player-modal-banner {
  width:calc(100% + 48px);
  margin:-24px -24px 0;
  height:130px;
  background:var(--bg3);
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.player-modal-banner img { width:100%;height:100%;object-fit:cover;display:block; }
.player-modal-banner::after {
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 40%,var(--bg) 100%);
}
.player-modal-photo-row {
  display:flex;align-items:flex-end;gap:14px;
  margin-top:-44px;margin-bottom:12px;position:relative;z-index:1;
}
.player-modal-photo {
  width:80px;height:80px;border-radius:50%;overflow:hidden;flex-shrink:0;
  border:3px solid var(--bg);
  background:var(--bg3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-h);font-weight:900;font-size:1.4rem;color:var(--accent);
}
.player-modal-photo img { width:100%;height:100%;object-fit:cover; }
.player-modal-ign-block { padding-bottom:4px; }
.social-links { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px; }
.social-link {
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:6px;
  background:var(--bg3);border:1px solid var(--border);
  font-size:.73rem;color:var(--text2);
  transition:border-color .2s,color .2s;
}
.social-link:hover { border-color:var(--accent);color:var(--accent); }
.social-link svg { width:13px;height:13px;flex-shrink:0; }

/* ── Profile edit modal ──────────────────────── */
.profile-upload-row {
  display:flex;align-items:center;gap:10px;margin-bottom:6px;
}
.profile-upload-btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:8px;
  background:var(--bg3);border:1px dashed var(--borderl);
  cursor:pointer;font-size:.78rem;color:var(--text2);
  transition:border-color .2s,color .2s;
}
.profile-upload-btn:hover { border-color:var(--accent);color:var(--accent); }
.profile-photo-preview {
  width:48px;height:48px;border-radius:50%;object-fit:cover;
  display:none;border:2px solid var(--border);
}
.profile-banner-preview {
  width:100%;height:52px;border-radius:6px;object-fit:cover;
  display:none;margin-top:6px;
}
.social-inputs-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}

/* ── Team logo / banner ──────────────────────── */
.team-logo-img {
  width:48px;height:48px;border-radius:8px;
  object-fit:contain;background:var(--bg3);
}
.team-banner-img {
  width:100%;height:72px;border-radius:8px;
  object-fit:cover;margin-bottom:12px;
  display:block;
}
.team-manage-banner-wrap { margin-bottom:16px; }
.team-logo-upload,.team-banner-upload {
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:6px;
  background:var(--bg3);border:1px dashed var(--borderl);
  cursor:pointer;font-size:.73rem;color:var(--text2);
  transition:border-color .2s;
}
.team-logo-upload:hover,.team-banner-upload:hover { border-color:var(--accent); }

/* ── Discord integration page ────────────────── */
.discord-hero { padding:72px 0 48px;text-align:center; }
.discord-add-btn {
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 32px;border-radius:12px;
  background:#5865F2;color:#fff;
  font-family:var(--font-ui);font-size:1rem;font-weight:700;
  transition:transform .2s var(--ease),box-shadow .2s;
}
.discord-add-btn:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(88,101,242,.45); }
.discord-feature-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;
  margin:48px 0;
}
.discord-feature-card { padding:28px; }
.discord-feature-icon { font-size:1.8rem;margin-bottom:14px; }
.discord-section-head {
  font-family:var(--font-h);font-size:.7rem;letter-spacing:.12em;
  color:var(--accent);margin:32px 0 14px;text-transform:uppercase;
}
.discord-config-card { padding:24px;margin-bottom:16px; }
.discord-toggle-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 0;border-bottom:1px solid var(--border);
}
.discord-toggle-row:last-child { border-bottom:none; }
.discord-toggle-info { flex:1; }
.discord-toggle-label { font-family:var(--font-ui);font-size:.88rem;font-weight:600; }
.discord-toggle-sub { font-size:.7rem;color:var(--text3);margin-top:2px; }
.discord-toggle-actions { display:flex;align-items:center;gap:10px; }
.discord-toggle { position:relative;width:38px;height:21px;flex-shrink:0; }
.discord-toggle input { opacity:0;width:0;height:0;position:absolute; }
.discord-slider {
  position:absolute;inset:0;border-radius:11px;
  background:var(--bg4);border:1px solid var(--border);
  cursor:pointer;transition:background .2s,border-color .2s;
}
.discord-toggle input:checked ~ .discord-slider { background:var(--accent);border-color:var(--accent); }
.discord-slider::before {
  content:'';position:absolute;width:15px;height:15px;
  left:2px;top:2px;background:#fff;border-radius:50%;
  transition:transform .2s var(--spring);
}
.discord-toggle input:checked ~ .discord-slider::before { transform:translateX(17px);background:var(--bg); }
.remind-select {
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text2);border-radius:6px;padding:4px 8px;
  font-size:.75rem;cursor:pointer;
}
.remind-select:focus { outline:none;border-color:var(--accent); }
.discord-embed-preview {
  background:#2f3136;border-radius:8px;padding:16px;
  border-left:4px solid #FFF300;max-width:420px;margin:0 auto;
}
.discord-embed-author {
  font-size:.72rem;color:#dcddde;margin-bottom:6px;
  display:flex;align-items:center;gap:6px;
}
.discord-embed-author-icon {
  width:16px;height:16px;border-radius:50%;
  background:#FFF300;display:inline-block;flex-shrink:0;
}
.discord-embed-title { font-size:.92rem;font-weight:700;color:#fff;margin-bottom:6px; }
.discord-embed-desc { font-size:.78rem;color:#dcddde;line-height:1.5; }
.discord-embed-fields { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px; }
.discord-embed-field-name { font-size:.7rem;font-weight:700;color:#dcddde;margin-bottom:2px; }
.discord-embed-field-val { font-size:.76rem;color:#b9bbbe; }
.discord-embed-footer {
  font-size:.65rem;color:#72767d;margin-top:12px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.08);
}
.discord-channel-input-wrap { display:flex;gap:8px;align-items:center;margin-bottom:6px; }
.discord-channel-input {
  flex:1;background:var(--bg3);border:1px solid var(--border);
  border-radius:8px;padding:10px 14px;
  font-size:.85rem;color:var(--text);
}
.discord-channel-input:focus { outline:none;border-color:var(--accent); }
.discord-saved-badge {
  font-size:.7rem;color:#4ade80;
  display:none;align-items:center;gap:4px;
}
.discord-saved-badge.visible { display:flex; }

/* ── Scrollbar ───────────────────────────────── */
* { scrollbar-width:thin; scrollbar-color:#FFF300 #141414; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:#141414; }
::-webkit-scrollbar-thumb { background:#FFF300; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#e6db00; }

/* ── Home lineup carousel ────────────────────── */
.featured-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  opacity:1;
  transition:opacity .35s var(--ease);
}
.featured-strip.fading { opacity:0; }
.lineup-dots {
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:24px;
}
.lineup-dot {
  width:6px;height:6px;border-radius:50%;
  background:var(--bg5);border:1px solid var(--border);
  cursor:pointer;transition:background .2s,transform .2s var(--spring);
}
.lineup-dot.active { background:var(--accent);transform:scale(1.3); }
@media(max-width:600px){
  .featured-strip { grid-template-columns:1fr; }
}

/* ── Forum team badge ────────────────────────── */
.post-team-badge {
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:3px;
  font-family:var(--font-ui);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--team-color, #fff);
  background:color-mix(in srgb, var(--team-color, #fff) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--team-color, #fff) 35%, transparent);
  white-space:nowrap;
}

/* ── Live page ───────────────────────────────────────────────── */
.live-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:24px;
}
.live-card {
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--bg2);
  display:flex;
  flex-direction:column;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.live-card--live {
  border-color:rgba(200,96,255,.35);
  box-shadow:0 0 0 1px rgba(200,96,255,.1);
}
.live-card--live:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(200,96,255,.12); }
.live-card--offline:hover { transform:translateY(-2px); }
.live-card-embed {
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.live-card-embed iframe {
  width:100%;
  height:100%;
  border:none;
  display:block;
}
.live-card-body { padding:16px; }
.live-card-identity {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.live-card-avatar {
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-h);
  font-size:.75rem;
  font-weight:700;
  flex-shrink:0;
  background-size:cover;
  background-position:center;
}
.live-card-name {
  font-family:var(--font-h);
  font-size:.9rem;
  font-weight:700;
  color:var(--text);
}
.live-card-game {
  font-family:var(--font-ui);
  font-size:.65rem;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:2px;
}
.live-badge {
  margin-left:auto;
  font-family:var(--font-ui);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.08em;
  background:rgba(200,96,255,.15);
  color:#c860ff;
  border:1px solid rgba(200,96,255,.3);
  border-radius:20px;
  padding:3px 9px;
  white-space:nowrap;
  animation:pulse-live 2s infinite;
}
@keyframes pulse-live {
  0%,100% { opacity:1; }
  50%      { opacity:.65; }
}
.offline-badge {
  margin-left:auto;
  font-family:var(--font-ui);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.1em;
  background:rgba(255,255,255,.05);
  color:var(--text3);
  border:1px solid var(--border);
  border-radius:20px;
  padding:3px 9px;
  white-space:nowrap;
}
.live-offline-msg {
  font-size:.78rem;
  color:var(--text3);
  line-height:1.6;
  margin-bottom:4px;
}
@media(max-width:600px) {
  .live-grid { grid-template-columns:1fr; }
}

/* ── XP / Level badges & bars ────────────────────────────────── */
.xp-level-badge {
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:4px;
  font-family:var(--font-h);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.08em;
  background:linear-gradient(135deg,var(--accent),#f59e0b);
  color:#000;
  white-space:nowrap;
}
.xp-bar-track {
  width:100%;
  height:6px;
  background:rgba(255,255,255,.07);
  border-radius:100px;
  overflow:hidden;
}
.xp-bar-fill {
  height:100%;
  background:linear-gradient(90deg,var(--accent),#f59e0b);
  border-radius:100px;
  transition:width .4s var(--ease);
  min-width:4px;
}
.ts-level-card {
  background:rgba(255,243,0,.04);
  border:1px solid rgba(255,243,0,.14);
  border-radius:12px;
  padding:16px;
  margin-bottom:20px;
}

/* ── Team Settings page ──────────────────────────────────────── */
.ts-topbar {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:60px;
  background:rgba(8,8,8,.97);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,3vw,32px);
  backdrop-filter:blur(16px);
  gap:12px;
}
.ts-topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.ts-topbar-brand { display:flex; align-items:center; gap:8px; text-decoration:none; flex-shrink:0; }
.ts-topbar-brand img { width:28px; height:28px; object-fit:contain; }
.ts-topbar-name { font-family:var(--font-h); font-size:.82rem; font-weight:900; color:var(--text); letter-spacing:.1em; }
.ts-topbar-sep { color:var(--bg5); font-size:1.3rem; font-weight:200; line-height:1; flex-shrink:0; }
.ts-team-name {
  font-family:var(--font-h); font-size:.78rem; font-weight:700;
  letter-spacing:.06em; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ts-back-btn {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-ui); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text2); background:var(--bg2); border:1px solid var(--border);
  border-radius:6px; padding:7px 14px; text-decoration:none;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.ts-back-btn:hover { color:var(--text); border-color:var(--text3); background:var(--bg3); }

.ts-layout {
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:calc(100dvh - 60px);
  margin-top:60px;
}
.ts-sidebar {
  background:var(--bg1);
  border-right:1px solid var(--border);
  padding:16px 0;
  position:sticky;
  top:60px;
  align-self:start;
  height:calc(100dvh - 60px);
  overflow-y:auto;
}
.ts-sidebar-label {
  font-family:var(--font-ui); font-size:.55rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text3); padding:12px 20px 5px;
}
.ts-nav-item {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 20px;
  font-family:var(--font-ui); font-size:.78rem; font-weight:600; letter-spacing:.02em;
  color:var(--text2); background:none; border:none; cursor:pointer; text-align:left;
  transition:color .15s, background .15s;
}
.ts-nav-item:hover { color:var(--text); background:var(--bg2); }
.ts-nav-item.active { color:var(--text); background:var(--bg2); }
.ts-nav-item.active::before {
  content:''; position:absolute; left:0; width:3px; height:28px;
  background:var(--accent); border-radius:0 2px 2px 0;
}
.ts-nav-item { position:relative; }

.ts-main { background:var(--bg1); padding:clamp(16px,3vw,40px); overflow-y:auto; }
.ts-section { display:none; }
.ts-section-header { margin-bottom:24px; }
.ts-section-header h2 { font-size:1.05rem; margin-bottom:4px; }
.ts-section-header p { font-size:.8rem; color:var(--text3); }

.ts-member-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg2); margin-bottom:6px;
}
.ts-member-row:hover { border-color:var(--border-hover); }

/* ── Level Config grid (admin panel) ─────────────────────────── */
.lc-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
  margin-bottom:24px;
}
.lc-field { display:flex; flex-direction:column; gap:4px; }
.lc-field label { font-family:var(--font-ui); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); }

/* ── Leaderboard Members tab ─────────────────────────────────── */
.lb-tabs {
  display:flex;
  gap:4px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:4px;
  margin-bottom:24px;
  width:fit-content;
}
.lb-tab-btn {
  padding:8px 20px;
  border-radius:7px;
  border:none;
  background:none;
  color:var(--text2);
  font-family:var(--font-ui);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .15s, background .15s;
}
.lb-tab-btn:hover { color:var(--text); }
.lb-tab-btn.active { background:var(--bg4); color:var(--text); }
.lbt-panel { display:none; }
.lbt-panel.active { display:block; }

.lb-members-podium { display:flex; justify-content:center; align-items:flex-end; gap:16px; margin-bottom:32px; }
.lb-members-podium-item {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 20px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg2); min-width:100px; text-align:center;
}
.lb-members-podium-item--1 {
  border-color:rgba(255,243,0,.3);
  background:rgba(255,243,0,.04);
  padding-top:24px;
}
.lb-members-podium-item--2,
.lb-members-podium-item--3 { opacity:.85; }
.lb-members-rank-badge {
  font-family:var(--font-h); font-size:.65rem; font-weight:900;
  color:#000; background:linear-gradient(135deg,var(--accent),#f59e0b);
  border-radius:4px; padding:2px 7px;
}
.lb-members-rank-badge--2 { background:linear-gradient(135deg,#9ca3af,#6b7280); }
.lb-members-rank-badge--3 { background:linear-gradient(135deg,#c87941,#a0522d); }
.lb-members-name { font-family:var(--font-h); font-size:.8rem; font-weight:700; color:var(--text); }
.lb-members-xp-bar { width:80px; margin-top:4px; }

@media(max-width:768px) {
  .ts-layout { grid-template-columns:1fr; }
  .ts-sidebar { position:static; height:auto; border-right:none; border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; padding:8px; gap:4px; }
  .ts-nav-item { width:auto; padding:7px 14px; border-radius:6px; font-size:.7rem; }
  .ts-nav-item.active::before { display:none; }
  .lb-members-podium { flex-wrap:wrap; }
}

/* ── Member search bar ───────────────────────────────────────── */
.member-search-bar {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  padding:12px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px 10px 0 0;
  border-bottom:none;
}
.member-search-input-wrap {
  display:flex;
  align-items:center;
  gap:7px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:7px;
  padding:7px 10px;
  flex:1;
  min-width:180px;
}
.member-search-input-wrap svg { flex-shrink:0; color:var(--text3); }
.member-search-input {
  background:none;
  border:none;
  outline:none;
  color:var(--text);
  font-family:var(--font-ui);
  font-size:.78rem;
  width:100%;
}
.member-search-input::placeholder { color:var(--text3); }
.member-search-bar select {
  appearance:none;
  -webkit-appearance:none;
  background-color:var(--bg3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:7px;
  padding:6px 28px 6px 10px;
  font-family:var(--font-ui);
  font-size:.72rem;
  font-weight:600;
  cursor:pointer;
  outline:none;
  transition:border-color .15s;
  white-space:nowrap;
}
.member-search-bar select:hover  { border-color:var(--accent); }
.member-search-bar select:focus  { border-color:var(--accent); }
.member-search-bar select option { background:var(--bg2); color:var(--text); }
.member-count-badge {
  font-family:var(--font-ui);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text3);
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:20px;
  padding:4px 10px;
  white-space:nowrap;
  flex-shrink:0;
}
.member-customer-badge {
  display:inline-flex;
  align-items:center;
  padding:1px 6px;
  border-radius:3px;
  font-family:var(--font-ui);
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#4ade80;
  background:rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.25);
  white-space:nowrap;
}

/* ── Multi-role chips (admin member table) ───────────────────── */
.role-chips-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 120px;
}
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 8px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rc, var(--text2));
  background: var(--rb, rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}
.role-chip-x {
  background: none;
  border: none;
  padding: 0 0 0 2px;
  margin: 0;
  cursor: pointer;
  color: inherit;
  opacity: .55;
  font-size: .75rem;
  line-height: 1;
  transition: opacity .15s;
}
.role-chip-x:hover { opacity: 1; }
.role-add-sel {
  font-size: .65rem !important;
  padding: 2px 20px 2px 6px !important;
  height: auto !important;
  min-width: 64px;
}

/* ── Creator stream setup ────────────────────────────────────── */
.csk-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
  margin-bottom:16px;
}
.csk-section {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
}
.csk-section--full { grid-column:1/-1; }
.csk-section-head {
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-ui);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text3);
  margin-bottom:14px;
}
.csk-platform-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.csk-sensitive {
  font-family:var(--font-ui);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#f59e0b;
  background:rgba(245,158,11,.1);
  border-radius:3px;
  padding:1px 5px;
}
.csk-key-wrap {
  display:flex;
  gap:6px;
}
.csk-key-wrap .form-input { flex:1; font-family:monospace; font-size:.78rem; }
.csk-reveal-btn {
  flex-shrink:0;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:7px;
  color:var(--text2);
  font-family:var(--font-ui);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:0 12px;
  cursor:pointer;
  transition:color .15s, border-color .15s;
}
.csk-reveal-btn:hover { color:var(--text); border-color:var(--text3); }
.csk-readonly-url {
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:7px;
  padding:8px 12px;
}
.csk-readonly-url span {
  flex:1;
  font-family:monospace;
  font-size:.72rem;
  color:var(--text2);
  word-break:break-all;
  line-height:1.5;
}
.csk-copy-btn {
  flex-shrink:0;
  background:var(--bg4);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--text2);
  font-family:var(--font-ui);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:4px 10px;
  cursor:pointer;
  transition:color .15s, background .15s;
}
.csk-copy-btn:hover { color:var(--accent); background:var(--acc10); }

/* ── Creator analytics bar chart ─────────────────────────────── */
.cana-bars {
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:100px;
}
.cana-bar-col {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  flex:1;
}
.cana-bar-wrap {
  width:100%;
  flex:1;
  display:flex;
  align-items:flex-end;
  background:rgba(255,255,255,.04);
  border-radius:4px 4px 0 0;
  overflow:hidden;
}
.cana-bar-fill {
  width:100%;
  border-radius:4px 4px 0 0;
  transition:height .5s var(--ease);
  min-height:4px;
}
.cana-bar-label {
  font-family:var(--font-ui);
  font-size:.55rem;
  color:var(--text3);
  text-align:center;
}

@media(max-width:600px) {
  .member-search-bar { gap:6px; }
  .member-search-input-wrap { min-width:100%; }
  .csk-grid { grid-template-columns:1fr; }
}

/* ── Clickable author/username link styles ──────────────────────────────── */
.forum-author-link,
.post-username-link,
.lb-username-link {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.forum-author-link:hover,
.post-username-link:hover,
.lb-username-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Friends panel in profile ───────────────────────────────────────────── */
#ppFriendsPanel .ts-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  margin-bottom: 4px;
  transition: background .12s;
}
#ppFriendsPanel .ts-member-row:hover { background: var(--bg3); }

/* ── Profile privacy settings ───────────────────────────────────────────── */
.pp-privacy-section-label {
  font-family: var(--font-ui);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 8px;
}
.pp-privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.pp-privacy-row:last-of-type { border-bottom: none; }
.pp-privacy-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-privacy-label {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
}
.pp-privacy-hint {
  font-size: .66rem;
  color: var(--text3);
  line-height: 1.4;
}
.pp-priv-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 28px 5px 10px;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  transition: border-color .15s;
}
.pp-priv-select:hover,
.pp-priv-select:focus { border-color: var(--accent); }
.pp-priv-select option { background: var(--bg2); color: var(--text); }

/* ── Bot management role tags ───────────────────────────────────────────── */
.bot-role-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(88,101,242,.12);
  border: 1px solid rgba(88,101,242,.3);
  color: #a5b4fc;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px 3px 12px;
}
.bot-role-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: .6;
  font-size: .85rem;
  line-height: 1;
  padding: 0;
  transition: opacity .15s;
}
.bot-role-remove:hover { opacity: 1; }

/* ── Per-notification config rows ───────────────────────────────────────── */
.dn-row {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.dn-row:last-of-type { border-bottom: none; }
.dn-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dn-row-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.dn-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.dn-label {
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
}
.dn-sub {
  font-size: .68rem;
  color: var(--text3);
  margin-top: 2px;
  line-height: 1.4;
}
.dn-row-config {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity .2s;
}
.dn-row-config--hidden {
  display: none;
}
.dn-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dn-field-label {
  font-family: var(--font-ui);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
  width: 50px;
  flex-shrink: 0;
}
.dn-channel-input {
  flex: 1;
  min-width: 160px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--font-ui);
  font-size: .75rem;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.dn-channel-input:focus { border-color: var(--accent); }
.dn-channel-input::placeholder { color: var(--text3); }
.dn-remind-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dn-custom-wrap {
  display: none;
  align-items: center;
  gap: 6px;
}
.dn-custom-wrap--visible { display: flex; }
.dn-custom-input {
  width: 72px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: var(--font-ui);
  font-size: .75rem;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
  -moz-appearance: textfield;
}
.dn-custom-input::-webkit-inner-spin-button,
.dn-custom-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dn-custom-input:focus { border-color: var(--accent); }
.dn-custom-unit {
  font-family: var(--font-ui);
  font-size: .68rem;
  color: var(--text3);
  white-space: nowrap;
}

/* ── Team Discord link on team cards ────────────────────────────────────── */
.team-discord-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 700;
  color: #7289da;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(114,137,218,.3);
  border-radius: 20px;
  background: rgba(114,137,218,.08);
  transition: background .15s, border-color .15s;
}
.team-discord-link:hover {
  background: rgba(114,137,218,.18);
  border-color: rgba(114,137,218,.55);
}

/* ── Team game tags (team cards) ─────────────────────────────────────────── */
.team-card-games {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.team-game-tag {
  font-size: .58rem;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,.07);
  color: var(--text2);
  border: 1px solid var(--border);
}

/* ── Team settings — games grid ──────────────────────────────────────────── */
.ts-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
}
.ts-game-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  color: var(--text2);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.ts-game-check:hover { background: rgba(255,255,255,.04); border-color: var(--border); }
.ts-game-check input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; }
.ts-game-check input[type="checkbox"]:checked + span { color: var(--text); }

/* ── Profile — games I play ──────────────────────────────────────────────── */
.pp-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
}
.pp-game-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  color: var(--text2);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.pp-game-check:hover { background: rgba(255,255,255,.04); border-color: var(--border); }
.pp-game-check input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; }
.pp-game-check input[type="checkbox"]:checked + span { color: var(--text); }

/* ── Public profile — game tags ──────────────────────────────────────────── */
.pp-game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}
.pp-game-tag {
  font-size: .62rem;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(var(--accent-rgb, 153,102,255),.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb, 153,102,255),.25);
}

/* ── Forum post user card — game tags ────────────────────────────────────── */
.post-game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 3px 0;
}
.post-game-tag {
  font-size: .57rem;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.06);
  color: var(--text3);
  border: 1px solid var(--border);
}

/* ── Role badge effects ───────────────────────────────────────────────────── */
.role-fx--glow {
  box-shadow: 0 0 6px var(--rc, currentColor), 0 0 14px color-mix(in srgb, var(--rc, currentColor) 50%, transparent);
  text-shadow: 0 0 6px var(--rc, currentColor);
}
.role-fx--shimmer {
  position: relative; overflow: hidden;
}
.role-fx--shimmer::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  background-size: 200% auto;
  animation: role-shimmer 2s linear infinite;
  pointer-events: none;
}
@keyframes role-shimmer { from { background-position: -200% center; } to { background-position: 200% center; } }

.role-fx--rainbow {
  animation: role-rainbow 3s linear infinite;
}
@keyframes role-rainbow {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.role-fx--pulse {
  animation: role-pulse 1.8s ease-in-out infinite;
}
@keyframes role-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .7; transform: scale(1.07); }
}

.role-fx--flicker {
  animation: role-flicker 2.5s steps(1) infinite;
}
@keyframes role-flicker {
  0%,89%,91%,94%,100% { opacity: 1; }
  90%,93%              { opacity: .3; }
}

.role-fx--gold {
  background: linear-gradient(90deg,#3a2600,#c8a100,#f5d060,#c8a100,#3a2600);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-color: rgba(200,161,0,.4) !important;
  animation: owner-gold 3s linear infinite;
}

/* ── Extended role effects ────────────────────────────────────────────────── */
.role-fx--neon { animation: fx-neon 1.6s ease-in-out infinite; }
@keyframes fx-neon {
  0%,100% { text-shadow: 0 0 4px var(--rc), 0 0 12px var(--rc), 0 0 24px var(--rc); opacity: 1; }
  50%      { text-shadow: 0 0 2px var(--rc), 0 0 5px var(--rc); opacity: 0.7; }
}

.role-fx--fire {
  background: linear-gradient(180deg,#fffde7 0%,#ffeb3b 20%,#ff9800 50%,#f44336 80%,#8b0000 100%);
  background-size: 100% 400%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: fx-fire 0.9s linear infinite; text-shadow: none !important;
}
@keyframes fx-fire { 0% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } }

.role-fx--ice {
  background: linear-gradient(180deg,#ffffff 0%,#b3e5fc 25%,#29b6f6 55%,#0277bd 80%,#01234e 100%);
  background-size: 100% 400%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: fx-ice 2s linear infinite; text-shadow: none !important;
}
@keyframes fx-ice { 0% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } }

.role-fx--cosmic {
  background: linear-gradient(135deg,#ff006e,#8338ec,#3a86ff,#06ffd3,#ffbe0b,#ff006e);
  background-size: 400% 400%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: fx-cosmic 4s linear infinite; text-shadow: none !important;
}
@keyframes fx-cosmic {
  0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
}

.role-fx--matrix { animation: fx-matrix 1s ease-in-out infinite; }
@keyframes fx-matrix {
  0%,100% { text-shadow: 0 0 6px #00ff41, 0 0 14px #00ff41; color: #00ff41 !important; -webkit-text-fill-color: #00ff41 !important; }
  50%      { text-shadow: 0 0 3px #009921; color: #009921 !important; -webkit-text-fill-color: #009921 !important; }
}

.role-fx--hologram { display: inline-block; animation: fx-hologram 3s ease-in-out infinite; color: #0ff !important; }
@keyframes fx-hologram {
  0%,100% { text-shadow: 0 0 6px #0ff, 0 0 18px #0ff, 0 0 30px rgba(0,255,255,.4); opacity: 1; transform: scaleY(1); }
  20%      { opacity: 0.8; transform: scaleY(0.98); text-shadow: 0 0 3px #0ff; }
  50%      { text-shadow: 0 0 10px #0ff, 0 0 26px rgba(0,255,255,.6); opacity: 1; }
  75%      { opacity: 0.85; transform: scaleY(1.01); }
}

.role-fx--bounce { display: inline-block; animation: fx-bounce 0.9s ease-in-out infinite; }
@keyframes fx-bounce {
  0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); }
}

.role-fx--float { display: inline-block; animation: fx-float 2.5s ease-in-out infinite; }
@keyframes fx-float {
  0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.04); }
}

.role-fx--wave { display: inline-block; animation: fx-wave 2s ease-in-out infinite; }
@keyframes fx-wave {
  0%,100% { transform: skewX(0deg) translateY(0); }
  25%  { transform: skewX(7deg) translateY(-3px); }
  75%  { transform: skewX(-7deg) translateY(3px); }
}

.role-fx--shake { display: inline-block; animation: fx-shake 0.55s ease-in-out infinite; }
@keyframes fx-shake {
  0%,100% { transform: translateX(0); }
  15% { transform: translateX(-3px); } 45% { transform: translateX(3px); }
  65% { transform: translateX(-2px); } 85% { transform: translateX(2px); }
}

.role-fx--spin { display: inline-block; animation: fx-spin 3s linear infinite; }
@keyframes fx-spin {
  0% { transform: perspective(200px) rotateY(0deg); }
  100% { transform: perspective(200px) rotateY(360deg); }
}

.role-fx--glitch { display: inline-block; animation: fx-glitch 3.5s steps(1) infinite; }
@keyframes fx-glitch {
  0%,78%,100% { text-shadow: none; transform: none; }
  80%  { text-shadow: -3px 0 #ff00c1, 2px 0 #00fff9; transform: translateX(-2px) skewX(-3deg); }
  82%  { text-shadow: 3px 0 #00fff9, -2px 0 #ff0000; transform: translateX(2px) skewX(3deg); }
  84%  { text-shadow: none; transform: none; }
  87%  { text-shadow: -2px 0 #ffff00, 1px 0 #0000ff; transform: translateX(1px); }
  89%  { text-shadow: none; transform: none; }
}

/* ── Rich HTML content (post display + WYSIWYG editor) ───────────────────── */
.post-text h2, .post-text h3, .post-text h4,
.forum-rich-editor h2, .forum-rich-editor h3, .forum-rich-editor h4 {
  font-family: var(--font-h); margin: 10px 0 4px; color: var(--text);
}
.post-text h2, .forum-rich-editor h2 { font-size: 1.05rem; }
.post-text h3, .forum-rich-editor h3 { font-size: .9rem; }
.post-text h4, .forum-rich-editor h4 { font-size: .8rem; color: var(--text2); }

.post-text ul, .post-text ol,
.forum-rich-editor ul, .forum-rich-editor ol {
  padding-left: 1.5em; margin: 6px 0;
}
.post-text li, .forum-rich-editor li { margin: 2px 0; line-height: 1.6; }

.post-text blockquote, .forum-rich-editor blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 10px; margin: 6px 0;
  background: rgba(99,102,241,.06);
  border-radius: 0 4px 4px 0;
  color: var(--text2); font-style: italic;
}
.post-text code, .forum-rich-editor code {
  font-family: 'Courier New', monospace; font-size: .82em;
  background: rgba(255,255,255,.08); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 5px; color: #7eb3ff;
}
.post-text a, .forum-rich-editor a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.post-text strong, .forum-rich-editor strong { color: var(--text); font-weight: 700; }
.post-text em,     .forum-rich-editor em     { font-style: italic; color: var(--text2); }
.post-text del, .post-text s,
.forum-rich-editor del, .forum-rich-editor s { opacity: .55; text-decoration: line-through; }

/* ── Forum editor toolbar ─────────────────────────────────────────────────── */
.forum-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.forum-editor-toolbar + .form-input,
.forum-editor-toolbar + textarea,
.forum-editor-toolbar + .forum-rich-editor {
  border-radius: 0 0 8px 8px !important;
  border-top: none !important;
}
.forum-editor-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text2);
  cursor: pointer;
  font-size: .78rem;
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 3px 8px;
  line-height: 1.4;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.forum-editor-btn:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--border);
  color: var(--text);
}
.fet-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 4px;
  align-self: center;
}
.forum-editor-preview {
  font-size: .7rem;
  color: var(--text3);
  font-family: var(--font-ui);
  padding: 2px 6px;
  margin-left: auto;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  transition: background .12s;
}
.forum-editor-preview:hover { background: rgba(255,255,255,.05); border-color: var(--border); color: var(--text2); }

/* Colour-picker button inside toolbar */
.forum-editor-color-wrap { cursor: pointer; user-select: none; }
.forum-editor-color-input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* ── WYSIWYG contenteditable editor area ────────────────────────────────── */
.forum-rich-editor {
  cursor: text;
  line-height: 1.7;
  overflow-y: auto;
  word-break: break-word;
  outline: none;
}
.forum-rich-editor:focus { border-color: var(--accent) !important; }
.forum-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text3);
  pointer-events: none;
  display: block;
}

/* ─── Membership badges ────────────────────────────────────────────────────── */
.membership-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid currentColor;
  opacity: .92;
}
.membership-badge::before {
  content: '◆';
  font-size: .5rem;
}
.membership-badge--bronze { background: #1a0f00; box-shadow: 0 0 8px rgba(205,127,50,.2); }
.membership-badge--silver { background: #0e1316; box-shadow: 0 0 8px rgba(184,196,204,.15); }
.membership-badge--gold   { background: #1a1000; box-shadow: 0 0 10px rgba(245,208,96,.25); }

/* ─── Memberships page ─────────────────────────────────────────────────────── */
.mbr-hero {
  text-align: center;
  padding: 80px 0 40px;
}
.mbr-hero-sub {
  max-width: 520px;
  margin: 12px auto 0;
  font-size: .95rem;
}
.mbr-status-bar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 32px;
}
.mbr-status-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mbr-status-text {
  font-size: .82rem;
  color: var(--text2);
}
.mbr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 0 0 64px;
}
.mbr-card {
  background: var(--mbr-bg, var(--bg2));
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  transition: box-shadow .3s cubic-bezier(.32,.72,0,1), transform .3s cubic-bezier(.32,.72,0,1);
}
.mbr-card:hover {
  box-shadow: 0 0 32px var(--mbr-glow, rgba(255,255,255,.05));
  transform: translateY(-3px);
}
.mbr-card--popular {
  border-color: var(--mbr-color);
  box-shadow: 0 0 24px var(--mbr-glow, rgba(255,255,255,.08));
}
.mbr-card--active {
  border-color: var(--mbr-color);
  box-shadow: 0 0 20px var(--mbr-glow);
}
.mbr-popular-badge, .mbr-active-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 100px;
  background: var(--mbr-color);
  color: #000;
  white-space: nowrap;
}
.mbr-active-badge {
  background: transparent;
  border: 1px solid var(--mbr-color);
  color: var(--mbr-color);
}
.mbr-card-header {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 20px;
}
.mbr-tier-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 12px;
  border: 2px solid var(--mbr-color);
  box-shadow: 0 0 16px var(--mbr-glow);
  position: relative;
}
.mbr-tier-icon::after {
  content: '◆';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--mbr-color);
  line-height: 48px;
  text-align: center;
}
.mbr-tier-name {
  font-family: var(--font-h);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.mbr-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.mbr-price-amount {
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-h);
  color: var(--text);
}
.mbr-price-period {
  font-size: .8rem;
  color: var(--text3);
}
.mbr-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.mbr-perk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .82rem;
  color: var(--text2);
  line-height: 1.4;
}
.mbr-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--mbr-color);
}
.mbr-period-sel {
  margin-bottom: 16px;
}
.mbr-period-label {
  font-family: var(--font-ui);
  font-size: .66rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: block;
  margin-bottom: 8px;
}
.mbr-period-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mbr-period-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 6px 8px;
  font-family: var(--font-ui);
  font-size: .68rem;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all .2s;
}
.mbr-period-btn.active, .mbr-period-btn:hover {
  background: rgba(255,255,255,.09);
  border-color: var(--mbr-color);
  color: var(--text);
}
.mbr-period-price {
  font-weight: 700;
  font-size: .72rem;
  color: var(--text);
}
.mbr-discount {
  font-size: .58rem;
  color: #4ade80;
  font-weight: 700;
}
.mbr-subscribe-btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}
.mbr-faq {
  padding: 48px 0 64px;
  border-top: 1px solid var(--border);
}
.mbr-faq-title {
  font-family: var(--font-h);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 24px;
  text-align: center;
}
.mbr-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.mbr-faq-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}
.mbr-faq-item h4 {
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.mbr-faq-item p {
  font-size: .78rem;
  color: var(--text2);
  line-height: 1.6;
  margin: 0;
}

/* ── Forum Reactions ─────────────────────────────────────────────────────── */
.post-reaction-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  position: relative;
}
.react-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--text2);
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.react-vote-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.react-vote-btn.react-mine { background: var(--accent); color: #fff; border-color: var(--accent); }
.react-down-btn:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.react-down-btn.react-mine { background: #c0392b; color: #fff; border-color: #c0392b; }
.react-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 2px;
}
.react-emoji-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}
.react-emoji-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card2);
  font-size: .88rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.react-emoji-btn:hover { background: var(--accent20,rgba(255,204,0,.15)); border-color: var(--accent); }
.react-emoji-btn.react-mine { background: var(--accent20,rgba(255,204,0,.18)); border-color: var(--accent); }
.react-count {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text2);
  min-width: 12px;
  text-align: center;
}
.react-add-btn {
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text3);
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.react-add-btn:hover { background: var(--card2); color: var(--text); }
.react-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.react-picker-btn {
  font-size: 1.2rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  transition: background .12s;
}
.react-picker-btn:hover { background: var(--card2); border-color: var(--border); }