/* THE ROYALE ORGANIZATION - COMPLETE SHARED STYLESHEET */
:root {
  --gold: #D4AF37;
  --gold-light: #E6C65B;
  --gold-bright: #FFD700;
  --bg: #090B12;
  --panel: #10131C;
  --card-a: #171A24;
  --card-b: #0B0D14;
  --text: #FFFFFF;
  --muted: #B9BECA;
  --line: rgba(212, 175, 55, 0.35);
  --accent: var(--gold);
  --accent-soft: rgba(212, 175, 55, 0.4);
  --hero-tint: #2A210D;
  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", Arial, Helvetica, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; margin: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--gold); color: #10131C; padding: 10px 16px; border-radius: 6px; z-index: 10; }
.skip-link:focus { left: 8px; }
/* HEADER */
.site-header { background: var(--panel); }
.brand { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 20px 12px; gap: 2px; }
.brand-crown { color: var(--gold); font-size: 36px; line-height: 1; }
.brand-name { font-family: var(--font-display); color: var(--gold); font-size: 26px; font-weight: 700; letter-spacing: 3px; }
.brand-tagline { color: #AAB0BF; font-size: 12px; letter-spacing: 3px; }
.site-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; padding: 14px 18px; background: #15151C; border-bottom: 1px solid var(--gold); }
.site-nav a { color: var(--gold); font-weight: 600; padding: 4px 2px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.site-nav a:hover { color: #FFFFFF; }
.site-nav a[aria-current="page"] { color: #FFFFFF; border-bottom-color: var(--gold); }
/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 30px; border: 1px solid transparent; border-radius: 8px; font-weight: 700; text-align: center; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.btn-primary { background: var(--accent); color: #10131C; box-shadow: 0 0 20px var(--accent-soft); }
.btn-primary:hover { background: var(--gold-light); box-shadow: 0 0 30px var(--accent-soft); }
.btn-outline { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: #10131C; }
.btn-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.btn-discord { background: #5865F2; color: #FFFFFF; }
.btn-discord:hover { background: #6F7BF7; }
.btn-sm { padding: 8px 16px; font-size: .9rem; }
.btn.is-disabled, .btn:disabled { opacity: .45; pointer-events: none; }
/* HERO */
.hero, .page-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 90px 20px; background: radial-gradient(ellipse at center, var(--hero-tint) 0%, var(--bg) 75%); }
.hero { min-height: 75vh; }
.page-hero { min-height: 55vh; }
.hero-inner { max-width: 900px; }
.hero h1, .page-hero h1 { font-size: clamp(2.8rem, 8vw, 5.5rem); font-weight: 800; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; margin: 18px 0; text-shadow: 0 0 28px var(--accent-soft); animation: rise 1s ease-out both; }
.hero p, .page-hero p { color: #E3E5EA; font-size: 1.2rem; max-width: 650px; margin: 8px auto; }
.hero .eyebrow, .page-hero .eyebrow { color: var(--accent); font-weight: 600; letter-spacing: 2px; }
.page-hero-icon { font-size: 4.5rem; line-height: 1; margin: 10px 0; color: var(--accent); filter: drop-shadow(0 0 22px var(--accent-soft)); }
.float { animation: float 4s ease-in-out infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.theme-mojo { --accent: #E53935; --accent-soft: rgba(229, 57, 53, .45); --hero-tint: #351518; }
.theme-mojo .btn-primary { color: #FFFFFF; }
.theme-mk { --accent: #B266FF; --accent-soft: rgba(178, 102, 255, .45); --hero-tint: #30144D; }
.theme-mk .btn-primary { color: #FFFFFF; background: #7B2CBF; }
.theme-mk .btn-primary:hover { background: #9D4EDD; }
/* SECTIONS */
.section { padding: 90px 20px; text-align: center; }
.section-dark { background: var(--panel); }
.section h2, .cta-section h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 12px 0 8px; }
.label { color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.lead { max-width: 720px; margin: 18px auto; color: var(--muted); font-size: 1.1rem; line-height: 1.8; }
.text-link { display: inline-block; margin-top: 20px; color: var(--gold); font-weight: 700; }
.text-link:hover { color: #FFFFFF; }
.note { color: #8E94A3; font-size: .9rem; max-width: 560px; margin: 24px auto 0; }
.cta-section { text-align: center; padding: 100px 20px; background: radial-gradient(ellipse at center, #28220F 0%, var(--bg) 75%); }
.cta-section p { max-width: 650px; margin: 16px auto 28px; color: #C5C8D0; font-size: 1.1rem; }
/* GRIDS AND CARDS */
.grid { display: grid; gap: 24px; max-width: 1100px; margin: 44px auto 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: linear-gradient(145deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); border-radius: 16px; padding: 34px 28px; text-align: left; transition: border-color .25s, box-shadow .25s; }
.card:hover { border-color: var(--gold); box-shadow: 0 0 30px rgba(212, 175, 55, .18); }
.card h3 { color: var(--gold); font-size: 1.7rem; margin-bottom: 10px; }
.card p { color: var(--muted); margin: 0 0 14px; }
.card-icon { display: block; font-size: 2.6rem; color: var(--gold); margin-bottom: 14px; }
.card-center { text-align: center; align-items: center; }
.card-link { display: flex; flex-direction: column; }
.card-link .btn { margin-top: auto; align-self: flex-start; }
.card-center.card-link .btn { align-self: center; }
.step-number { display: block; font-family: var(--font-display); font-size: 2.8rem; font-weight: 800; color: var(--gold); }
.panel-wide { max-width: 820px; margin: 44px auto 0; text-align: center; padding: 50px 30px; }
.panel-wide p { max-width: 560px; margin-left: auto; margin-right: auto; }
.details { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(212, 175, 55, .2); }
.details p { margin-bottom: 8px; }
.details strong { color: var(--gold); }


/* ===== RESPONSIVE SITE SHELL (2026 MOBILE OVERHAUL) ===== */
body { overflow-x: hidden; }
.site-header { position: sticky; top: 0; z-index: 1000; box-shadow: 0 8px 28px rgba(0,0,0,.28); }
.site-nav { position: relative; padding: 10px 18px; gap: 0; }
.nav-toggle { display: none; min-width: 48px; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; background: #15151C; color: var(--gold); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.nav-menu { display: flex; align-items: center; justify-content: center; gap: 8px 26px; width: 100%; }
.nav-home, .nav-group-toggle { min-height: 44px; display: inline-flex; align-items: center; color: var(--gold); font-weight: 700; }
.nav-home { padding: 8px 4px; border-bottom: 2px solid transparent; }
.nav-home:hover, .nav-home[aria-current="page"] { color: #fff; border-bottom-color: var(--gold); }
.nav-group { position: relative; }
.nav-group-toggle { gap: 7px; padding: 8px 4px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; }
.nav-group-toggle::after { content: "▾"; font-size: .8rem; transition: transform .2s ease; }
.nav-group-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.nav-group.is-current > .nav-group-toggle { color: #fff; border-bottom-color: var(--gold); }
.nav-dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 210px; padding: 8px; background: #15151C; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 36px rgba(0,0,0,.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.nav-group:hover .nav-dropdown, .nav-group:focus-within .nav-dropdown, .nav-group.open .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown a { display: block; padding: 11px 12px; border: 0; border-radius: 8px; color: var(--gold); }
.nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] { background: rgba(212,175,55,.12); color: #fff; }
.nav-discord { white-space: nowrap; }

.site-footer { text-align: center; padding: 48px 20px; border-top: 1px solid var(--line); background: #080A10; }
.site-footer > * { max-width: 900px; margin-left: auto; margin-right: auto; }
.site-footer .footer-brand { color: var(--gold); font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: 2px; }
.site-footer .copyright, .site-footer .disclaimer { color: #8E94A3; }
.site-footer .disclaimer { font-size: .85rem; line-height: 1.6; }

.back-to-top { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 900; width: 48px; height: 48px; border: 1px solid var(--gold); border-radius: 50%; background: rgba(16,19,28,.94); color: var(--gold); font-size: 1.35rem; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s, visibility .2s, transform .2s, background .2s; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--gold); color: #10131C; }

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 72px 24px; }
  .hero, .page-hero { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 768px) {
  .site-header { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; background: rgba(16,19,28,.98); }
  .brand { align-items: flex-start; text-align: left; padding: 10px 14px; min-width: 0; }
  .brand-crown { display: none; }
  .brand-name { font-size: clamp(1rem,4.5vw,1.3rem); letter-spacing: 1.5px; white-space: nowrap; }
  .brand-tagline { font-size: .62rem; letter-spacing: 1.5px; }
  .site-nav { position: static; padding: 8px 12px 8px 4px; background: transparent; border-bottom: 0; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-menu { position: absolute; top: 100%; left: 0; right: 0; display: none; max-height: calc(100vh - 72px); overflow-y: auto; padding: 12px 14px calc(18px + env(safe-area-inset-bottom)); background: #10131C; border-top: 1px solid rgba(212,175,55,.2); border-bottom: 1px solid var(--gold); box-shadow: 0 18px 30px rgba(0,0,0,.45); }
  .site-nav.menu-open .nav-menu { display: block; }
  .nav-home, .nav-group-toggle, .nav-discord { width: 100%; min-height: 48px; justify-content: space-between; }
  .nav-home { padding: 11px 12px; border-radius: 8px; border-bottom: 0; }
  .nav-home[aria-current="page"] { background: rgba(212,175,55,.12); }
  .nav-group { width: 100%; margin-top: 4px; }
  .nav-group-toggle { padding: 11px 12px; border-bottom: 0; border-radius: 8px; }
  .nav-group.is-current > .nav-group-toggle { background: rgba(212,175,55,.08); }
  .nav-dropdown { position: static; transform: none; display: none; min-width: 0; margin: 0 0 6px 12px; padding: 2px 0 2px 10px; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; background: transparent; }
  .nav-group:hover .nav-dropdown, .nav-group:focus-within .nav-dropdown { display: none; transform: none; }
  .nav-group.open .nav-dropdown { display: block; transform: none; }
  .nav-dropdown a { min-height: 44px; display: flex; align-items: center; }
  .nav-discord { margin-top: 10px; }
  .hero { min-height: auto; padding: 64px 18px 58px; }
  .page-hero { min-height: auto; padding: 58px 18px; }
  .hero h1, .page-hero h1 { font-size: clamp(2.25rem,12vw,3.8rem); margin: 12px 0; }
  .hero p, .page-hero p { font-size: 1rem; }
  .page-hero-icon { font-size: 3.2rem; }
  .btn-row { gap: 10px; margin-top: 24px; }
  .btn-row .btn { width: 100%; max-width: 420px; }
  .section { padding: 58px 18px; }
  .cta-section { padding: 64px 18px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid { gap: 16px; margin-top: 28px; }
  .card { padding: 26px 20px; }
  .panel-wide { padding: 32px 20px; margin-top: 28px; }
  .lead { font-size: 1rem; line-height: 1.7; }
  .site-footer { padding: 38px 18px calc(38px + env(safe-area-inset-bottom)); }
}
@media (max-width: 430px) {
  .brand-tagline { display: none; }
  .brand { padding-top: 12px; padding-bottom: 12px; }
  .hero h1, .page-hero h1 { letter-spacing: 1px; }
  .section h2, .cta-section h2 { font-size: 2rem; }
  .card h3 { font-size: 1.5rem; }
}


/* ===== LIVE BALANCE CHANGES ===== */
.balance-hero { min-height: 48vh; }
.balance-live-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 8px 13px;
  border: 1px solid rgba(212,175,55,.32);
  border-radius: 999px;
  background: rgba(9,11,18,.72);
  color: #d8dbe3;
  font-size: .88rem;
}
.balance-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #49d17d;
  box-shadow: 0 0 12px rgba(73,209,125,.8);
}
.balance-source-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto 22px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, #171a24, #0b0d14);
  text-align: left;
}
.balance-source-card h2 { margin: 5px 0 4px; font-size: 2rem; }
.balance-source-card p { margin: 0; color: var(--muted); }
.balance-alert {
  max-width: 1100px;
  margin: 0 auto 28px;
  padding: 16px 18px;
  border: 1px solid #e6c65b;
  border-radius: 12px;
  background: rgba(212,175,55,.1);
  color: #f2e6b7;
  text-align: left;
}
.balance-alert strong { display: block; color: var(--gold-light); }
.balance-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1100px;
  margin: 54px auto 0;
  text-align: left;
}
.balance-heading-row .lead { margin: 12px 0 0; }
.balance-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.balance-filter {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #11141d;
  color: #d9dce4;
  cursor: pointer;
  font-weight: 700;
}
.balance-filter:hover,
.balance-filter.active {
  border-color: var(--gold);
  background: rgba(212,175,55,.13);
  color: var(--gold-light);
}
.balance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 26px auto 0;
}
.balance-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, #171a24, #0b0d14);
  text-align: left;
}
.balance-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--gold);
}
.balance-nerf::before { background: #ef5a5a; }
.balance-buff::before { background: #49d17d; }
.balance-rework::before { background: #5ea7ff; }
.balance-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.balance-card-top img,
.balance-art-placeholder {
  width: 78px;
  height: 96px;
  flex: 0 0 auto;
  object-fit: contain;
}
.balance-art-placeholder {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--gold);
  font-size: 2rem;
}
.balance-card h3 {
  margin-top: 5px;
  color: #fff;
  font-size: 1.55rem;
}
.balance-type {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.balance-nerf .balance-type { color: #ff7b7b; }
.balance-buff .balance-type { color: #6be49a; }
.balance-rework .balance-type { color: #7eb8ff; }
.balance-stats {
  margin: 18px 0 12px;
  padding: 13px 14px 13px 30px;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: #fff;
}
.balance-card p { margin: 0; color: var(--muted); }
.balance-timeline {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  max-width: 900px;
  margin: 34px auto 0;
}
.balance-date {
  display: block;
  margin-bottom: 9px;
  color: var(--gold-light);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.balance-state {
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.balance-state.live {
  background: rgba(73,209,125,.12);
  color: #6be49a;
  border: 1px solid rgba(73,209,125,.35);
}
.home-balance-card {
  max-width: 900px;
  margin: 38px auto 0;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg,#171a24,#0b0d14);
}
.home-balance-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.home-balance-badge {
  padding: 5px 9px;
  border: 1px solid rgba(73,209,125,.4);
  border-radius: 999px;
  background: rgba(73,209,125,.1);
  color: #6be49a;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 1px;
}
.home-balance-badge.new {
  border-color: rgba(212,175,55,.5);
  background: rgba(212,175,55,.1);
  color: var(--gold-light);
}

@media (max-width: 900px) {
  .balance-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .balance-heading-row { align-items: flex-start; flex-direction: column; }
  .balance-filters { justify-content: flex-start; }
}

@media (max-width: 650px) {
  .balance-source-card { align-items: stretch; flex-direction: column; padding: 20px 18px; }
  .balance-source-card .btn { width: 100%; }
  .balance-grid,
  .balance-timeline { grid-template-columns: 1fr; }
  .balance-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .balance-filter { width: 100%; }
  .balance-card { padding: 18px; }
  .balance-card-top img,
  .balance-art-placeholder { width: 66px; height: 82px; }
  .home-balance-card { padding: 26px 18px; }
}


/* ===== PRO DECKS OVERHAUL ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.pro-decks-hero { min-height: 50vh; }
.pro-deck-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1180px;
  margin: 38px auto 0;
}
.pro-deck-search {
  flex: 1 1 290px;
  max-width: 380px;
}
.pro-deck-search input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #11141d;
  color: #fff;
}
.pro-deck-search input::placeholder { color: #858b99; }
.pro-deck-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.pro-deck-filter {
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #11141d;
  color: #d9dce4;
  cursor: pointer;
  font-weight: 700;
}
.pro-deck-filter:hover,
.pro-deck-filter.active {
  border-color: var(--gold);
  background: rgba(212,175,55,.13);
  color: var(--gold-light);
}
.pro-deck-results {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  max-width: 1180px;
  margin: 18px auto 0;
  color: #9298a6;
  font-size: .88rem;
}
#deckCount { color: var(--gold-light); font-weight: 700; }
.pro-deck-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px;
  max-width: 1180px;
  margin: 24px auto 0;
}
.pro-deck-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
  text-align: left;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pro-deck-panel:hover {
  border-color: var(--gold);
  box-shadow: 0 0 30px rgba(212,175,55,.14);
  transform: translateY(-2px);
}
.pro-deck-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.pro-deck-panel h3 {
  margin-top: 5px;
  color: #fff;
  font-size: 2rem;
}
.pro-deck-cost {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 8px 10px;
  border: 1px solid rgba(212,175,55,.3);
  border-radius: 10px;
  background: rgba(212,175,55,.07);
  text-align: center;
}
.pro-deck-cost strong {
  display: block;
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}
.pro-deck-cost span {
  display: block;
  margin-top: 4px;
  color: #aeb3c0;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.pro-deck-description {
  min-height: 52px;
  margin: 13px 0 18px;
  color: var(--muted);
}
.pro-deck-cards {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pro-deck-card {
  min-width: 0;
  text-align: center;
}
.pro-deck-card-art {
  position: relative;
  min-height: 108px;
}
.pro-deck-card img {
  display: block;
  width: 100%;
  height: 108px;
  object-fit: contain;
}
.pro-deck-card > span {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #e7e9ee;
  font-size: .72rem;
  line-height: 1.15;
  text-overflow: ellipsis;
}
.pro-deck-elixir {
  position: absolute;
  right: 1px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: #9c3bd4;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.pro-deck-card-placeholder {
  display: grid;
  place-items: center;
  height: 108px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--gold);
  font-size: 1.5rem;
}
.pro-deck-strategy {
  margin-top: 20px;
  padding: 14px 15px;
  border-left: 3px solid var(--gold);
  border-radius: 0 9px 9px 0;
  background: rgba(212,175,55,.055);
}
.pro-deck-strategy strong {
  color: var(--gold-light);
  font-size: .78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pro-deck-strategy p {
  margin: 4px 0 0;
  color: #c2c6d0;
  font-size: .9rem;
  line-height: 1.5;
}
.pro-deck-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
}
.pro-deck-actions .btn {
  min-width: 0;
  padding-left: 9px;
  padding-right: 9px;
}
.pro-deck-empty {
  max-width: 600px;
  margin: 36px auto 0;
  color: var(--muted);
}
.deck-toast {
  position: fixed;
  left: 50%;
  bottom: max(24px,env(safe-area-inset-bottom));
  z-index: 1100;
  max-width: calc(100vw - 36px);
  padding: 11px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(16,19,28,.97);
  color: var(--gold-light);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%,12px);
  transition: opacity .2s,visibility .2s,transform .2s;
}
.deck-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%,0);
}

@media (max-width: 950px) {
  .pro-deck-toolbar { align-items: stretch; flex-direction: column; }
  .pro-deck-search { max-width: none; flex-basis: auto; }
  .pro-deck-filters { justify-content: flex-start; }
  .pro-deck-grid { grid-template-columns: 1fr; max-width: 720px; }
}

@media (max-width: 650px) {
  .pro-deck-search input { font-size: 16px; }
  .pro-deck-filters {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .pro-deck-filter { width: 100%; min-height: 46px; padding: 8px 6px; }
  .pro-deck-results { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pro-deck-panel { padding: 18px 14px; }
  .pro-deck-panel h3 { font-size: 1.65rem; }
  .pro-deck-description { min-height: 0; }
  .pro-deck-cards { gap: 6px; }
  .pro-deck-card-art { min-height: 82px; }
  .pro-deck-card img,
  .pro-deck-card-placeholder { height: 82px; }
  .pro-deck-card > span { font-size: .64rem; }
  .pro-deck-elixir { width: 21px; height: 21px; font-size: .65rem; }
  .pro-deck-actions { grid-template-columns: 1fr; }
  .pro-deck-actions .btn { width: 100%; min-height: 46px; }
}


/* ===== CLANS OVERHAUL ===== */
.clans-hero { min-height: 52vh; }
.clans-live-status {
  max-width: 1180px;
  margin: 24px auto 0;
  color: #9298a6;
  font-size: .9rem;
}
.clan-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
  max-width: 1180px;
  margin: 26px auto 0;
}
.clan-showcase {
  --clan-accent: var(--gold);
  --clan-soft: rgba(212,175,55,.12);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background:
    radial-gradient(circle at 12% 0%,var(--clan-soft),transparent 34%),
    linear-gradient(145deg,var(--card-a),var(--card-b));
  text-align: left;
  transition: transform .2s,border-color .2s,box-shadow .2s;
}
.clan-showcase:hover {
  transform: translateY(-3px);
  border-color: var(--clan-accent);
  box-shadow: 0 0 30px var(--clan-soft);
}
.clan-showcase.clan-mojo {
  --clan-accent: #E53935;
  --clan-soft: rgba(229,57,53,.13);
}
.clan-showcase.clan-mk {
  --clan-accent: #B266FF;
  --clan-soft: rgba(178,102,255,.13);
}
.clan-showcase-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.clan-emblem {
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border: 1px solid var(--clan-accent);
  border-radius: 15px;
  background: var(--clan-soft);
  color: var(--clan-accent);
  font-size: 2rem;
}
.clan-showcase .label { color: var(--clan-accent); }
.clan-showcase h3 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 1.9rem;
}
.clan-showcase > p {
  min-height: 76px;
  margin: 18px 0;
  color: var(--muted);
  line-height: 1.55;
}
.clan-tag {
  min-height: 0 !important;
  margin: 2px 0 0 !important;
  color: #8f95a3 !important;
  font-size: .82rem;
  letter-spacing: .7px;
}
.clan-mini-stats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}
.clan-mini-stats > div {
  min-width: 0;
  padding: 11px 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(0,0,0,.15);
}
.clan-mini-stats strong,
.clan-mini-stats span {
  display: block;
}
.clan-mini-stats strong {
  color: var(--clan-accent);
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.clan-mini-stats span {
  margin-top: 2px;
  color: #9197a5;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.clan-status-line,
.clan-leader-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #9ba1ae;
  font-size: .88rem;
}
.clan-status-line { margin-top: 12px; }
.clan-status-line strong,
.clan-leader-line strong {
  color: #f0f1f4;
  text-align: right;
}
.clan-showcase-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
}
.clan-showcase-actions .btn { width: 100%; min-width: 0; }
.clan-showcase.live-ready .clan-status-line strong { color: var(--clan-accent); }

.clan-profile-hero { min-height: 54vh; }
.clan-profile-tag {
  display: inline-block;
  margin: 16px auto 2px;
  padding: 7px 12px;
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(0,0,0,.18);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.clan-profile-meta {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  max-width: 900px;
  margin: 34px auto 0;
}
.clan-profile-meta > div {
  padding: 15px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
}
.clan-profile-meta span,
.clan-profile-meta strong {
  display: block;
}
.clan-profile-meta span {
  color: #8f95a3;
  font-size: .72rem;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.clan-profile-meta strong {
  margin-top: 5px;
  color: #f1f2f5;
}
.clan-stats-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  max-width: 980px;
  margin: 34px auto 0;
}
.stat-card {
  padding: 23px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
}
.stat-value,
.stat-label { display: block; }
.stat-value {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.6rem,3vw,2.35rem);
  font-weight: 800;
}
.stat-label {
  margin-top: 5px;
  color: #9197a5;
  font-size: .72rem;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.live-ok { color: #b8d8ba; }

.clan-leader-card {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 620px;
  margin: 38px auto 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
  text-align: left;
}
.clan-leader-icon {
  display: grid;
  place-items: center;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 2.7rem;
}
.clan-leader-card h3 {
  margin: 0;
  color: var(--accent);
  font-size: 1.9rem;
}
.clan-leader-card p {
  margin: 4px 0 12px;
  color: var(--muted);
}
.clan-leader-card .links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.clan-roster {
  max-width: 980px;
  margin: 34px auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #10131b;
  text-align: left;
}
.roster-header,
.roster-row {
  display: grid;
  grid-template-columns: minmax(0,1.8fr) minmax(100px,.8fr) minmax(90px,.7fr) minmax(70px,.55fr);
  align-items: center;
  gap: 10px;
}
.roster-header {
  padding: 12px 16px;
  background: rgba(212,175,55,.09);
  color: var(--gold-light);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.roster-row {
  min-height: 58px;
  padding: 9px 16px;
  border-top: 1px solid rgba(255,255,255,.065);
  color: #d8dbe2;
}
.roster-row:hover { background: rgba(255,255,255,.025); }
.roster-player {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}
.roster-player small {
  flex: 0 0 30px;
  color: #777e8e;
  font-size: .7rem;
}
.roster-player strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roster-role { color: #b8bdc8; }
.roster-trophies {
  color: var(--gold-light);
  font-weight: 700;
}
.roster-profile-link {
  color: var(--gold);
  font-weight: 700;
}
.roster-profile-link:hover { color: #fff; }
.roster-empty {
  padding: 28px 16px;
  color: #8f95a3;
  text-align: center;
}

@media (max-width: 950px) {
  .clan-showcase-grid { grid-template-columns: 1fr; max-width: 720px; }
  .clan-showcase > p { min-height: 0; }
  .clan-profile-meta,
  .clan-stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 650px) {
  .clan-showcase { padding: 20px 15px; }
  .clan-showcase h3 { font-size: 1.65rem; }
  .clan-profile-meta,
  .clan-stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .clan-profile-meta > div,
  .stat-card { padding: 14px 8px; }
  .clan-leader-card {
    align-items: center;
    flex-direction: column;
    padding: 22px 16px;
    text-align: center;
  }
  .clan-leader-card .links { justify-content: center; }
  .clan-roster {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .roster-header,
  .roster-row {
    min-width: 610px;
  }
}


/* ===== TOURNAMENTS OVERHAUL ===== */
.tournament-hero {
  min-height: 56vh;
  background:
    radial-gradient(circle at 50% 18%, rgba(212,175,55,.17), transparent 31%),
    linear-gradient(180deg, #11141d 0%, var(--bg) 100%);
}
.tournament-feature {
  display: grid;
  grid-template-columns: minmax(0,1.7fr) minmax(260px,.8fr);
  gap: 18px;
  max-width: 1050px;
  margin: 38px auto 0;
  text-align: left;
}
.tournament-feature-main,
.tournament-facts {
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
}
.tournament-feature-main {
  padding: 32px;
  background:
    radial-gradient(circle at 8% 0%,rgba(212,175,55,.12),transparent 35%),
    linear-gradient(145deg,var(--card-a),var(--card-b));
}
.tournament-feature-main h3 {
  margin: 18px 0 8px;
  color: #fff;
  font-size: clamp(2rem,4vw,3rem);
}
.tournament-feature-main > p {
  max-width: 650px;
  color: var(--muted);
  line-height: 1.6;
}
.tournament-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(212,175,55,.3);
  border-radius: 999px;
  color: var(--gold-light);
  background: rgba(212,175,55,.07);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .7px;
}
.tournament-badge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(212,175,55,.7);
}
.tournament-facts {
  display: grid;
  align-content: stretch;
  overflow: hidden;
}
.tournament-facts > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92px;
  padding: 17px 20px;
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.tournament-facts > div:last-child { border-bottom: 0; }
.tournament-facts span {
  color: #888f9e;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.tournament-facts strong {
  margin-top: 5px;
  color: #f0f1f4;
  font-size: 1.05rem;
}
.tournament-countdown {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin: 25px 0 4px;
}
.tournament-countdown > div {
  padding: 15px 8px;
  border: 1px solid rgba(212,175,55,.18);
  border-radius: 11px;
  background: rgba(0,0,0,.18);
  text-align: center;
}
.tournament-countdown strong,
.tournament-countdown span { display: block; }
.tournament-countdown strong {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 1.8rem;
}
.tournament-countdown span {
  margin-top: 2px;
  color: #8d94a3;
  font-size: .68rem;
  text-transform: uppercase;
}
.tournament-countdown .countdown-tba {
  grid-column: 1 / -1;
  padding: 18px 14px;
}
.tournament-countdown .countdown-tba strong { font-size: 1.25rem; }
.tournament-countdown .countdown-tba span {
  margin-top: 6px;
  font-size: .78rem;
  line-height: 1.5;
  text-transform: none;
}
.btn.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.tournament-hub-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
  max-width: 1150px;
  margin: 38px auto 0;
}
.tournament-hub-card {
  position: relative;
  min-width: 0;
  padding: 25px 15px 21px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
  color: inherit;
  text-align: left;
  transition: transform .2s,border-color .2s;
}
.tournament-hub-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}
.hub-number {
  position: absolute;
  top: 10px;
  right: 12px;
  color: rgba(212,175,55,.45);
  font-family: var(--font-display);
  font-weight: 800;
}
.hub-icon { display: block; font-size: 1.7rem; }
.tournament-hub-card h3 {
  margin: 13px 0 6px;
  color: var(--gold-light);
  font-size: 1.25rem;
}
.tournament-hub-card p {
  margin: 0;
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.5;
}
.tournament-steps {
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin: 38px auto 0;
  text-align: left;
}
.tournament-steps article {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 17px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
}
.tournament-steps article > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(212,175,55,.4);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
}
.tournament-steps h3 {
  margin: 0 0 3px;
  color: #fff;
}
.tournament-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.tournament-rule-grid .card-icon { font-size: 2rem; }
.tournament-empty-state {
  max-width: 700px;
  margin: 38px auto 0;
  padding: 42px 25px;
  border: 1px dashed rgba(212,175,55,.3);
  border-radius: 16px;
  background: rgba(212,175,55,.035);
}
.empty-state-icon { font-size: 2.8rem; }
.tournament-empty-state h3 {
  margin: 12px 0 6px;
  color: var(--gold-light);
  font-size: 1.7rem;
}
.tournament-empty-state p {
  max-width: 540px;
  margin: auto;
  color: var(--muted);
  line-height: 1.6;
}
.bracket-preview {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 15px;
  align-items: center;
  max-width: 980px;
  margin: 38px auto 0;
  text-align: left;
}
.bracket-round {
  display: grid;
  gap: 9px;
}
.bracket-round > span {
  color: var(--gold);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.bracket-round > div {
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #151923;
  color: #9ca2af;
}
.bracket-final > div {
  border-color: rgba(212,175,55,.4);
  color: var(--gold-light);
  background: rgba(212,175,55,.07);
}
.bracket-arrow {
  color: var(--gold);
  font-size: 2.4rem;
}
.champion-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: 45px auto 0;
}
.podium-place {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  min-height: 145px;
  padding: 20px 12px;
  border: 1px solid var(--line);
  border-radius: 13px 13px 5px 5px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
}
.podium-place.first {
  min-height: 195px;
  border-color: rgba(212,175,55,.45);
  background:
    radial-gradient(circle at 50% 0%,rgba(212,175,55,.15),transparent 50%),
    linear-gradient(145deg,var(--card-a),var(--card-b));
}
.podium-place span {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
}
.podium-place strong {
  color: #f0f1f4;
  font-size: 1.05rem;
}
.podium-place small {
  margin-top: 5px;
  color: #858c9b;
}

@media (max-width: 950px) {
  .tournament-feature { grid-template-columns: 1fr; max-width: 760px; }
  .tournament-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tournament-facts > div { border-right: 1px solid rgba(255,255,255,.065); }
  .tournament-hub-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 650px) {
  .tournament-feature-main { padding: 22px 15px; }
  .tournament-facts { grid-template-columns: 1fr; }
  .tournament-facts > div { min-height: 78px; border-right: 0; }
  .tournament-countdown { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tournament-hub-grid { grid-template-columns: 1fr; }
  .tournament-steps article { grid-template-columns: 44px 1fr; padding: 16px 12px; gap: 12px; }
  .tournament-steps article > span { width: 40px; height: 40px; }
  .bracket-preview {
    grid-template-columns: 1fr;
    max-width: 430px;
  }
  .bracket-arrow { transform: rotate(90deg); text-align: center; }
  .champion-podium { gap: 5px; }
  .podium-place { min-height: 125px; padding: 15px 5px; }
  .podium-place.first { min-height: 165px; }
  .podium-place strong { font-size: .86rem; }
  .podium-place small { font-size: .68rem; }
}


/* ===== STREAMS + TEAM OVERHAUL ===== */
.streams-hero,
.team-hero {
  min-height: 54vh;
}
.creator-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 900px;
  margin: 30px auto 0;
}
.creator-filter {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #11141d;
  color: #d7dae1;
  cursor: pointer;
  font-weight: 700;
}
.creator-filter:hover,
.creator-filter.active {
  border-color: var(--gold);
  background: rgba(212,175,55,.12);
  color: var(--gold-light);
}
.creator-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
  max-width: 1180px;
  margin: 26px auto 0;
}
.creator-card {
  --creator-accent: var(--gold);
  --creator-soft: rgba(212,175,55,.11);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background:
    radial-gradient(circle at 10% 0%,var(--creator-soft),transparent 35%),
    linear-gradient(145deg,var(--card-a),var(--card-b));
  text-align: left;
  transition: transform .2s,border-color .2s,box-shadow .2s;
}
.creator-card[hidden] { display: none; }
.creator-card:hover {
  transform: translateY(-3px);
  border-color: var(--creator-accent);
  box-shadow: 0 0 30px var(--creator-soft);
}
.creator-featured {
  border-color: rgba(212,175,55,.35);
}
.creator-card-head {
  display: flex;
  align-items: center;
  gap: 13px;
}
.creator-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border: 1px solid var(--creator-accent);
  border-radius: 50%;
  background: var(--creator-soft);
  color: var(--creator-accent);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
}
.creator-avatar-mojo {
  --creator-accent: #E53935;
  border-color: #E53935;
  background: rgba(229,57,53,.11);
  color: #ff716e;
}
.creator-avatar-mk {
  --creator-accent: #B266FF;
  border-color: #B266FF;
  background: rgba(178,102,255,.11);
  color: #ca95ff;
}
.creator-kicker {
  display: block;
  color: var(--gold);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.creator-card h3 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 1.75rem;
}
.creator-card-head p {
  margin: 1px 0 0;
  color: #9399a7;
  font-size: .88rem;
}
.creator-bio {
  min-height: 78px;
  margin: 18px 0;
  color: var(--muted);
  line-height: 1.55;
}
.creator-status-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 13px;
}
.creator-status-row > div {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(0,0,0,.15);
}
.creator-status-row span,
.creator-status-row strong { display: block; }
.creator-status-row span {
  color: #858c9b;
  font-size: .65rem;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.creator-status-row strong {
  margin-top: 3px;
  color: #e5e7ec;
  font-size: .82rem;
}
.creator-platforms {
  display: grid;
  gap: 7px;
}
.creator-platform {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: #d8dbe2;
}
.creator-platform:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}
.creator-platform strong {
  color: var(--gold);
  font-size: .8rem;
}
.creator-actions {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
}
.creator-actions .btn {
  width: 100%;
  min-width: 0;
}
.creator-empty {
  margin: 30px auto 0;
  color: var(--muted);
}
.stream-schedule {
  display: grid;
  gap: 9px;
  max-width: 900px;
  margin: 34px auto 0;
  text-align: left;
}
.stream-schedule > div {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
}
.stream-schedule span {
  color: #fff;
  font-weight: 700;
}
.stream-schedule strong {
  color: #9096a4;
  font-size: .88rem;
  font-weight: 600;
}
.stream-schedule a {
  color: var(--gold);
  font-size: .85rem;
  font-weight: 700;
}

/* Team */
.founder-profile {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  align-items: center;
  gap: 28px;
  max-width: 880px;
  margin: 38px auto 0;
  padding: 32px;
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%,rgba(212,175,55,.14),transparent 38%),
    linear-gradient(145deg,var(--card-a),var(--card-b));
  text-align: left;
}
.founder-mark {
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(212,175,55,.08);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  box-shadow: 0 0 35px rgba(212,175,55,.12);
}
.team-role-badge {
  display: inline-block;
  color: var(--gold);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.founder-profile h3 {
  margin: 5px 0 8px;
  color: #fff;
  font-size: clamp(2rem,4vw,3rem);
}
.founder-profile-copy > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
.team-profile-links,
.leader-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.leadership-connector {
  display: flex;
  justify-content: center;
  height: 70px;
}
.leadership-connector span {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(var(--gold),rgba(212,175,55,.08));
}
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  max-width: 1050px;
  margin: 34px auto 0;
}
.leader-profile {
  --leader-accent: var(--gold);
  --leader-soft: rgba(212,175,55,.1);
  padding: 25px 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 0%,var(--leader-soft),transparent 40%),
    linear-gradient(145deg,var(--card-a),var(--card-b));
}
.leader-profile:hover { border-color: var(--leader-accent); }
.leader-mojo {
  --leader-accent: #E53935;
  --leader-soft: rgba(229,57,53,.11);
}
.leader-mk {
  --leader-accent: #B266FF;
  --leader-soft: rgba(178,102,255,.11);
}
.leader-emblem {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 13px;
  border: 1px solid var(--leader-accent);
  border-radius: 50%;
  background: var(--leader-soft);
  color: var(--leader-accent);
  font-size: 2rem;
}
.leader-profile .team-role-badge { color: var(--leader-accent); }
.leader-profile h3 {
  margin: 5px 0 2px;
  color: #fff;
  font-size: 1.65rem;
}
.leader-profile > p {
  margin: 0;
  color: #9399a7;
}
.leader-profile-actions { justify-content: center; }

.org-chart {
  max-width: 1050px;
  margin: 40px auto 0;
}
.org-chart-tier {
  display: grid;
  gap: 12px;
}
.org-chart-founder {
  grid-template-columns: minmax(260px,420px);
  justify-content: center;
}
.org-chart-clans,
.org-chart-departments {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.org-chart-line {
  width: 1px;
  height: 48px;
  margin: auto;
  background: linear-gradient(rgba(212,175,55,.7),rgba(212,175,55,.12));
}
.org-node {
  padding: 17px 14px;
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 12px;
  background: #141821;
}
.org-node span,
.org-node strong,
.org-node small { display: block; }
.org-node span {
  color: var(--gold);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.org-node strong {
  margin-top: 4px;
  color: #f0f1f4;
  font-size: 1.05rem;
}
.org-node small {
  margin-top: 3px;
  color: #858c9b;
}
.org-node-open {
  border-style: dashed;
  border-color: rgba(255,255,255,.14);
}
.org-node-open span { color: #aeb3be; }

.team-department-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  max-width: 1000px;
  margin: 36px auto 0;
}
.team-department-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 15px;
  align-items: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
  text-align: left;
}
.team-department-card .card-icon {
  margin: 0;
  font-size: 2rem;
}
.department-status {
  color: var(--gold);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.team-department-card h3 {
  margin: 4px 0 5px;
  color: #fff;
  font-size: 1.35rem;
}
.team-department-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 950px) {
  .creator-grid {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
  .creator-bio { min-height: 0; }
  .leadership-grid { grid-template-columns: 1fr; max-width: 650px; }
  .org-chart-clans,
  .org-chart-departments { grid-template-columns: 1fr; max-width: 650px; margin: auto; }
}

@media (max-width: 650px) {
  .creator-toolbar {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .creator-filter {
    width: 100%;
    min-height: 46px;
    padding-left: 7px;
    padding-right: 7px;
  }
  .creator-card { padding: 20px 14px; }
  .creator-status-row { grid-template-columns: 1fr; }
  .creator-actions { grid-template-columns: 1fr; }
  .stream-schedule > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .founder-profile {
    grid-template-columns: 1fr;
    padding: 24px 16px;
    text-align: center;
  }
  .founder-mark { margin: auto; }
  .team-profile-links { justify-content: center; }
  .team-department-grid { grid-template-columns: 1fr; }
  .team-department-card {
    grid-template-columns: 44px 1fr;
    padding: 18px 14px;
  }
}


/* ===== JOIN OVERHAUL ===== */
.join-hero { min-height: 56vh; }
.join-path-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  max-width: 1120px;
  margin: 38px auto 0;
}
.join-path-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 22px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
  text-align: left;
}
.join-path-featured {
  border-color: rgba(212,175,55,.42);
  background:
    radial-gradient(circle at 10% 0%,rgba(212,175,55,.13),transparent 38%),
    linear-gradient(145deg,var(--card-a),var(--card-b));
}
.join-path-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 14px;
  background: rgba(212,175,55,.08);
  color: var(--gold);
  font-size: 1.8rem;
}
.join-status {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .65px;
  text-transform: uppercase;
}
.join-status-open {
  border: 1px solid rgba(95,194,113,.3);
  background: rgba(95,194,113,.09);
  color: #9bddaa;
}
.join-status-review {
  border: 1px solid rgba(212,175,55,.3);
  background: rgba(212,175,55,.08);
  color: var(--gold-light);
}
.join-path-card h3 {
  margin: 11px 0 7px;
  color: #fff;
  font-size: 1.8rem;
}
.join-path-card > p {
  color: var(--muted);
  line-height: 1.55;
}
.join-checks {
  display: grid;
  gap: 8px;
  margin: 15px 0 23px;
  padding: 0;
  list-style: none;
}
.join-checks li {
  position: relative;
  padding-left: 21px;
  color: #b8bdc8;
  font-size: .88rem;
}
.join-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 800;
}
.join-path-card > .btn {
  width: 100%;
  margin-top: auto;
}

.join-clan-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  max-width: 1120px;
  margin: 36px auto 0;
}
.join-clan-card {
  --join-clan-accent: var(--gold);
  --join-clan-soft: rgba(212,175,55,.1);
  display: flex;
  flex-direction: column;
  padding: 23px 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background:
    radial-gradient(circle at 0% 0%,var(--join-clan-soft),transparent 37%),
    linear-gradient(145deg,var(--card-a),var(--card-b));
  text-align: left;
}
.join-clan-mojo {
  --join-clan-accent: #E53935;
  --join-clan-soft: rgba(229,57,53,.1);
}
.join-clan-mk {
  --join-clan-accent: #B266FF;
  --join-clan-soft: rgba(178,102,255,.1);
}
.join-clan-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.join-clan-heading > span {
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border: 1px solid var(--join-clan-accent);
  border-radius: 12px;
  color: var(--join-clan-accent);
  background: var(--join-clan-soft);
  font-size: 1.55rem;
}
.join-clan-heading h3 {
  margin: 0;
  color: #fff;
  font-size: 1.45rem;
}
.join-clan-heading p {
  margin: 2px 0 0;
  color: #8f96a4;
  font-size: .78rem;
}
.join-clan-card > p {
  min-height: 70px;
  color: var(--muted);
  line-height: 1.55;
}
.join-clan-actions {
  display: grid;
  gap: 7px;
  margin-top: auto;
}
.join-clan-actions .btn { width: 100%; min-width: 0; }
.join-player-note {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 17px 20px;
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 12px;
  background: rgba(212,175,55,.05);
}
.join-player-note strong { color: var(--gold-light); }
.join-player-note p {
  margin: 5px 0 7px;
  color: var(--muted);
}

.join-process {
  display: grid;
  gap: 10px;
  max-width: 900px;
  margin: 38px auto 0;
  text-align: left;
}
.join-process article {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 18px;
  padding: 19px 21px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
}
.join-process-number {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
}
.join-process h3 {
  margin: 0 0 4px;
  color: #fff;
}
.join-process p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.application-shell {
  max-width: 1000px;
  margin: 35px auto 0;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,.28);
  border-radius: 16px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
}
.application-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 24px;
  text-align: left;
}
.application-heading h3 {
  margin: 9px 0 4px;
  color: #fff;
  font-size: 1.5rem;
}
.application-heading p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.application-shell .form-embed {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

@media (max-width: 950px) {
  .join-path-grid,
  .join-clan-grid {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
  .join-clan-card > p { min-height: 0; }
}

@media (max-width: 650px) {
  .join-path-card { padding: 22px 15px; }
  .join-process article {
    grid-template-columns: 48px 1fr;
    gap: 10px;
    padding: 16px 12px;
  }
  .join-process-number { font-size: 1.45rem; }
  .application-heading {
    flex-direction: column;
    align-items: stretch;
    padding: 19px 14px;
  }
  .application-heading .btn { width: 100%; }
  .application-shell .form-embed iframe { min-height: 760px; }
}


/* ===== HOMEPAGE OVERHAUL ===== */
.home-hero {
  position: relative;
  min-height: 62vh;
  padding-top: 72px;
  padding-bottom: 58px;
  overflow: hidden;
  isolation: isolate;
}
.home-hero-glow {
  position: absolute;
  z-index: -1;
  width: min(720px,90vw);
  height: min(720px,90vw);
  border-radius: 50%;
  background: radial-gradient(circle,rgba(212,175,55,.16),rgba(212,175,55,.035) 42%,transparent 70%);
  filter: blur(3px);
}
.home-hero .hero-inner { max-width: 1000px; }
.home-hero-crown {
  display: block;
  margin: 12px 0 -6px;
  color: var(--gold);
  font-size: 3.2rem;
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(212,175,55,.28));
}
.home-hero h1 {
  margin: 12px 0;
  font-size: clamp(2.75rem,7vw,5.2rem);
}
.home-hero .home-hero-lead {
  max-width: 760px;
  color: #d9dce4;
  font-size: clamp(1rem,2.2vw,1.25rem);
  line-height: 1.6;
}
.home-quick-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 18px;
  margin-top: 24px;
}
.home-quick-links a {
  padding: 5px 2px;
  color: #9da3af;
  font-size: .82rem;
  font-weight: 700;
}
.home-quick-links a:hover { color: var(--gold-light); }

.home-stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  max-width: 1120px;
  margin: -24px auto 0;
  position: relative;
  z-index: 3;
  border: 1px solid rgba(212,175,55,.2);
  border-radius: 15px;
  background: rgba(15,17,24,.96);
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  overflow: hidden;
}
.home-stats > div {
  padding: 20px 16px;
  text-align: center;
}
.home-stats > div + div { border-left: 1px solid var(--line); }
.home-stats strong,
.home-stats span { display: block; }
.home-stats strong {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 1.7rem;
}
.home-stats span {
  margin-top: 3px;
  color: #8f96a4;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.home-intro { padding-top: 78px; }
.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  max-width: 1180px;
  margin: 38px auto 0;
}
.home-feature-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
  color: inherit;
  text-align: left;
  transition: transform .2s,border-color .2s,box-shadow .2s;
}
.home-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212,175,55,.6);
  box-shadow: 0 12px 32px rgba(0,0,0,.24);
}
.home-feature-primary {
  border-color: rgba(212,175,55,.38);
  background:
    radial-gradient(circle at 0 0,rgba(212,175,55,.13),transparent 42%),
    linear-gradient(145deg,var(--card-a),var(--card-b));
}
.home-feature-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 15px;
  border: 1px solid rgba(212,175,55,.3);
  border-radius: 12px;
  background: rgba(212,175,55,.07);
  color: var(--gold);
  font-size: 1.45rem;
}
.home-feature-kicker,
.home-mini-label {
  color: var(--gold);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .75px;
  text-transform: uppercase;
}
.home-feature-card h3 {
  margin: 5px 0 8px;
  color: #fff;
  font-size: 1.55rem;
}
.home-feature-card p {
  flex: 1;
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.55;
}
.home-feature-card > strong {
  color: var(--gold);
  font-size: .85rem;
}

.home-clan-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  max-width: 1120px;
  margin: 38px auto 0;
}
.home-clan-card {
  --home-clan-accent: var(--gold);
  --home-clan-soft: rgba(212,175,55,.1);
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0 0,var(--home-clan-soft),transparent 40%),
    linear-gradient(145deg,var(--card-a),var(--card-b));
  text-align: left;
}
.home-clan-card:hover { border-color: var(--home-clan-accent); }
.home-clan-mojo {
  --home-clan-accent: #E53935;
  --home-clan-soft: rgba(229,57,53,.1);
}
.home-clan-mk {
  --home-clan-accent: #B266FF;
  --home-clan-soft: rgba(178,102,255,.1);
}
.home-clan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.home-clan-emblem {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--home-clan-accent);
  border-radius: 12px;
  background: var(--home-clan-soft);
  color: var(--home-clan-accent);
  font-size: 1.55rem;
}
.home-clan-badge {
  color: var(--home-clan-accent);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.home-clan-card h3 {
  margin: 16px 0 2px;
  color: #fff;
  font-size: 1.7rem;
}
.home-clan-card > p {
  margin: 0;
  color: #8e95a3;
}
.home-clan-stats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin: 18px 0;
}
.home-clan-stats > div {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(0,0,0,.15);
}
.home-clan-stats span,
.home-clan-stats strong { display: block; }
.home-clan-stats span {
  color: #7f8795;
  font-size: .62rem;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.home-clan-stats strong {
  margin-top: 2px;
  color: #e8e9ed;
  font-size: .92rem;
}
.home-clan-card > .btn { width: 100%; }

.home-split {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr);
  gap: 28px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg,var(--card-a),var(--card-b));
  text-align: left;
}
.home-split-copy h2 {
  margin: 10px 0;
  font-size: clamp(2rem,4.5vw,3.1rem);
}
.home-split-copy > p {
  max-width: 650px;
  color: var(--muted);
  line-height: 1.65;
}
.home-status-pill {
  display: inline-flex;
  margin-left: 10px;
  padding: 5px 9px;
  border: 1px solid rgba(212,175,55,.3);
  border-radius: 999px;
  background: rgba(212,175,55,.08);
  color: var(--gold-light);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.home-left-buttons {
  justify-content: flex-start;
  margin-top: 22px;
}
.home-event-facts {
  display: grid;
  gap: 9px;
}
.home-event-facts > div {
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(0,0,0,.17);
}
.home-event-facts span,
.home-event-facts strong { display: block; }
.home-event-facts span {
  color: #7f8795;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .65px;
  text-transform: uppercase;
}
.home-event-facts strong {
  margin-top: 3px;
  color: #eef0f3;
}
.home-meta-panel {
  background:
    radial-gradient(circle at 100% 50%,rgba(212,175,55,.1),transparent 38%),
    linear-gradient(145deg,var(--card-a),var(--card-b));
}
.home-balance-left {
  justify-content: flex-start;
  margin: 12px 0 0;
}
.home-meta-visual {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.home-meta-visual span {
  display: grid;
  place-items: center;
  min-height: 74px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 2px;
}
.home-meta-visual span:nth-child(1) { color: #6be49a; border-color: rgba(73,209,125,.25); }
.home-meta-visual span:nth-child(2) { color: #ff7777; border-color: rgba(255,100,100,.25); }
.home-meta-visual span:nth-child(3) { color: var(--gold-light); border-color: rgba(212,175,55,.25); }

.home-creator-feature {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  gap: 28px;
  align-items: center;
  max-width: 900px;
  margin: 38px auto 0;
  padding: 30px;
  border: 1px solid rgba(212,175,55,.32);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0,rgba(212,175,55,.13),transparent 40%),
    linear-gradient(145deg,var(--card-a),var(--card-b));
  text-align: left;
}
.home-creator-avatar {
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(212,175,55,.08);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
}
.home-creator-copy > span {
  color: var(--gold);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .75px;
  text-transform: uppercase;
}
.home-creator-copy h3 {
  margin: 4px 0 7px;
  color: #fff;
  font-size: 2.2rem;
}
.home-creator-copy > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.home-creator-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
}
.home-creator-platforms a {
  color: var(--gold-light);
  font-size: .84rem;
  font-weight: 700;
}
.home-mission { padding-top: 72px; padding-bottom: 72px; }
.home-final-cta { padding-top: 86px; padding-bottom: 86px; }

@media (max-width: 1000px) {
  .home-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-clan-grid { grid-template-columns: 1fr; max-width: 720px; }
}

@media (max-width: 760px) {
  .home-hero {
    min-height: auto;
    padding: 54px 16px 62px;
  }
  .home-hero-crown { font-size: 2.55rem; }
  .home-hero .btn-row {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%,420px);
    margin-left: auto;
    margin-right: auto;
  }
  .home-hero .btn { width: 100%; }
  .home-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin: -28px 14px 0;
  }
  .home-stats > div + div { border-left: 0; }
  .home-stats > div:nth-child(even) { border-left: 1px solid var(--line); }
  .home-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .home-feature-grid { grid-template-columns: 1fr; }
  .home-split {
    grid-template-columns: 1fr;
    padding: 24px 17px;
  }
  .home-status-pill {
    display: flex;
    width: fit-content;
    margin: 9px 0 0;
  }
  .home-meta-visual { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-meta-visual span {
    min-height: 58px;
    font-size: .8rem;
    letter-spacing: .8px;
  }
  .home-creator-feature {
    grid-template-columns: 1fr;
    padding: 24px 17px;
    text-align: center;
  }
  .home-creator-avatar { margin: auto; }
  .home-creator-platforms,
  .home-creator-feature .home-left-buttons { justify-content: center; }
}

@media (max-width: 420px) {
  .home-quick-links { gap: 5px 12px; }
  .home-stats strong { font-size: 1.45rem; }
  .home-stats > div { padding: 16px 8px; }
  .home-clan-stats { grid-template-columns: 1fr; }
  .home-meta-visual { grid-template-columns: 1fr; }
}


/* ===== FINAL BRANDING + SITE-WIDE POLISH ===== */
::selection { background: rgba(212,175,55,.9); color: #090b10; }
.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 0 12px rgba(212,175,55,.22));
}
.site-header {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn {
  min-height: 46px;
  transition: transform .18s ease, background .2s, color .2s, box-shadow .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.card,
.home-feature-card,
.home-clan-card,
.creator-card,
.leader-profile,
.join-path-card,
.join-clan-card,
.tournament-hub-card {
  will-change: transform;
}
.card:focus-visible,
.home-feature-card:focus-visible,
.home-clan-card:focus-within,
.creator-card:focus-within,
.leader-profile:focus-within,
.join-path-card:focus-within,
.join-clan-card:focus-within,
.tournament-hub-card:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,175,55,.16), 0 14px 34px rgba(0,0,0,.24);
}
.site-footer {
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -120px;
  width: 520px;
  height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse,rgba(212,175,55,.08),transparent 68%);
  pointer-events: none;
}
.site-footer > * { position: relative; }
.footer-brand { text-shadow: 0 0 20px rgba(212,175,55,.18); }

.reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal-item.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: .06s; }
.reveal-delay-2 { transition-delay: .12s; }
.reveal-delay-3 { transition-delay: .18s; }

@media (max-width: 768px) {
  .brand { padding-top: 12px; padding-bottom: 9px; }
  .brand-logo { width: 36px; height: 36px; }
  .brand-name { font-size: 21px; letter-spacing: 2.2px; }
  .brand-tagline { font-size: 10px; letter-spacing: 2.2px; }
  .section { padding-top: 72px; padding-bottom: 72px; }
  .cta-section { padding-top: 78px; padding-bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-item { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}