/* =====================================================
   Classic Arena — Tema Neon
   Paleta cyan/magenta sobre fundo escuro profundo.
   Compatível com tema claro (data-theme="light").
   ===================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}

/* ---- Tema escuro (padrão) ---- */
:root{
  --bg:#0a0a1c;
  --bg-deep:#06061a;
  --surface:#11132a;
  --surface-2:#171a35;
  --surface-3:#1f2444;
  --border:rgba(120,140,255,0.10);
  --border-bright:rgba(120,140,255,0.18);
  --divider:rgba(255,255,255,0.05);
  --text:#e8eaf6;
  --text-muted:#8b91b3;
  --text-faint:#4a4f6e;

  --cx:#00d4ff;
  --cx-bright:#5cdcff;
  --cx-glow:rgba(0,212,255,.45);
  --cx-dim:rgba(0,212,255,.12);
  --co:#ff2d92;
  --co-bright:#ff5fb0;
  --co-glow:rgba(255,45,146,.45);
  --co-dim:rgba(255,45,146,.12);
  --win:#ffe04b;
  --danger:#ff4d4d;
  --ok:#22e07c;
  --warn:#ffae42;

  --hero-grad-top:rgba(0,212,255,0.06);
  --hero-grad-bot:rgba(255,45,146,0.04);
  --body-glow:rgba(0,212,255,0.06);

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
  --tr:200ms cubic-bezier(.16,1,.3,1);
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---- Tema claro ---- */
:root[data-theme="light"]{
  --bg:#f4f6fb;
  --bg-deep:#e9edf6;
  --surface:#ffffff;
  --surface-2:#eef2f8;
  --surface-3:#dfe6ef;
  --border:rgba(15,23,42,0.10);
  --border-bright:rgba(15,23,42,0.18);
  --divider:rgba(15,23,42,0.06);
  --text:#0f172a;
  --text-muted:#475569;
  --text-faint:#94a3b8;

  --cx:#0284c7;
  --cx-bright:#0ea5e9;
  --cx-glow:rgba(2,132,199,0.25);
  --cx-dim:rgba(2,132,199,0.10);
  --co:#db2777;
  --co-bright:#ec4899;
  --co-glow:rgba(219,39,119,0.25);
  --co-dim:rgba(219,39,119,0.10);

  --hero-grad-top:rgba(2,132,199,0.10);
  --hero-grad-bot:rgba(219,39,119,0.06);
  --body-glow:rgba(2,132,199,0.06);
}

body{
  font-family:var(--font-body);
  background:
    radial-gradient(1200px 600px at 50% -100px, var(--body-glow), transparent 60%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex; flex-direction:column;
  transition:background-color var(--tr), color var(--tr);
  font-weight:400;
  letter-spacing:0.005em;
}

a{color:var(--cx); text-decoration:none}
a:hover{text-decoration:underline}
a.disabled, a[aria-disabled="true"]{
  pointer-events:none; cursor:default; opacity:0.4; text-decoration:none;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,28,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1280px; margin:0 auto; padding:18px 28px;
  display:flex; align-items:center; gap:32px;
}

/* ── Logo X/O + texto "Classic Arena" ── */
.brand{
  display:flex; align-items:center; gap:12px;
  color:var(--text);
  text-decoration:none;
  flex-shrink:0;
}
.brand:hover{text-decoration:none}
.brand-mark{
  display:grid; grid-template-columns:1fr 1fr; gap:3px;
  width:44px; height:44px;
}
.brand-mark span{
  display:grid; place-items:center;
  font-size:13px; font-weight:900; font-family:var(--font-body);
  line-height:1;
}
.brand-mark .bm-x1, .brand-mark .bm-x2{color:var(--cx); text-shadow:0 0 8px var(--cx-glow)}
.brand-mark .bm-o1, .brand-mark .bm-o2{color:var(--co); text-shadow:0 0 8px var(--co-glow)}
.brand-mark .bm-x1::before{content:"X"}
.brand-mark .bm-o1::before{content:"O"}
.brand-mark .bm-o2::before{content:"O"}
.brand-mark .bm-x2::before{content:"X"}
.brand-text{
  display:flex; flex-direction:column; line-height:1;
  font-weight:800; font-size:18px; letter-spacing:0.02em;
}
.brand-text .bt-1{color:var(--text)}
.brand-text .bt-2{color:var(--text); margin-top:2px}

/* ── Nav central ── */
.header-nav{
  display:flex; gap:30px; flex:1; justify-content:center;
}
.header-nav a{
  color:var(--text-muted); font-weight:500; font-size:14px;
  letter-spacing:0.06em; text-transform:uppercase;
  position:relative; padding:6px 2px;
  transition:color var(--tr);
}
.header-nav a:hover{color:var(--text); text-decoration:none}
.header-nav a.active{color:var(--text)}
.header-nav a.active::after{
  content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px;
  background:var(--co); box-shadow:0 0 8px var(--co-glow);
  border-radius:1px;
}

/* ── Ações à direita ── */
.header-actions{
  display:flex; gap:12px; align-items:center; flex-shrink:0;
}

/* ── Menu de usuário (quando logado) ── */
.user-menu{position:relative}
.user-menu-btn{
  background:var(--surface-2); border:1px solid var(--border-bright);
  border-radius:var(--r-md); padding:6px 14px 6px 6px;
  display:flex; align-items:center; gap:10px;
  color:var(--text); cursor:pointer; font:inherit; font-weight:500;
  transition:border-color var(--tr);
}
.user-menu-btn:hover{border-color:var(--cx)}
/* (#4) Botão de menu como engrenagem em círculo, amarelo neon. */
.user-menu-btn.gear-btn{
  padding:0; width:40px; height:40px; border-radius:var(--r-md);
  justify-content:center; gap:0;
  color:#ffd60a;
}
.gear-btn .gear-icon{
  width:26px; height:26px;
  filter:drop-shadow(0 0 5px rgba(255,214,10,.75));
  transition:transform var(--tr), filter var(--tr);
}
@media (hover: hover) and (pointer: fine){
  .gear-btn:hover{ border-color:#ffd60a; }
  .gear-btn:hover .gear-icon{ transform:rotate(40deg);
    filter:drop-shadow(0 0 9px rgba(255,214,10,.95)); }
}
.user-avatar{
  width:36px; height:36px; border-radius:8px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--cx), var(--co));
  color:#0a0a1c; font-weight:800; font-size:14px;
  overflow:hidden;
}
.user-avatar img{width:100%; height:100%; object-fit:cover}
.user-info{display:flex; flex-direction:column; align-items:flex-start; line-height:1.1}
.user-name{font-weight:600; font-size:14px}
.user-level{font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px}
.user-caret{color:var(--text-muted); font-size:10px; margin-left:4px}

.user-menu-dropdown{
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--surface-2); border:1px solid var(--border-bright);
  border-radius:var(--r-md); min-width:220px;
  padding:6px; display:flex; flex-direction:column;
  box-shadow:0 16px 40px rgba(0,0,0,0.6);
}
.user-menu-dropdown[hidden]{ display:none !important; }
.user-menu-dropdown a, .user-menu-dropdown button{
  display:block; padding:10px 14px; border-radius:6px;
  color:var(--text); background:none; border:none;
  text-align:left; font:inherit; cursor:pointer; width:100%;
  font-size:14px;
}
.user-menu-dropdown a:hover, .user-menu-dropdown button:hover{
  background:var(--surface-3); text-decoration:none;
}
.menu-divider{height:1px; background:var(--divider); margin:4px 0}
.menu-logout{margin:0}

/* ============================================================
   BOTÕES
   - .btn-neon → magenta filled (CTA primário do design)
   - .btn-ghost → cyan outlined (CTA secundário do design)
   ============================================================ */
.btn-neon, .btn-neon-sm{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg, var(--co) 0%, #d31d7c 100%);
  color:#ffffff; font-weight:700; font-family:var(--font-body);
  border:none; cursor:pointer;
  padding:14px 28px; border-radius:var(--r-md);
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  box-shadow:0 0 20px var(--co-glow), inset 0 1px 0 rgba(255,255,255,0.15);
  transition:transform var(--tr), box-shadow var(--tr), filter var(--tr);
  text-decoration:none;
}
.btn-neon-sm{padding:10px 18px; font-size:12px}
.btn-neon:hover{
  transform:translateY(-1px); text-decoration:none;
  box-shadow:0 0 32px var(--co-glow), inset 0 1px 0 rgba(255,255,255,0.2);
  filter:brightness(1.05);
}
.btn-neon:active{transform:translateY(0)}
.btn-neon.block{display:flex; width:100%}

.btn-ghost, .btn-ghost-sm{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:transparent; color:var(--cx);
  border:1.5px solid var(--cx); cursor:pointer;
  padding:12px 26px; border-radius:var(--r-md);
  font:inherit; font-weight:700; font-size:13px;
  letter-spacing:0.08em; text-transform:uppercase;
  text-decoration:none;
  transition:background var(--tr), color var(--tr), box-shadow var(--tr);
}
.btn-ghost-sm{padding:9px 16px; font-size:12px}
.btn-ghost:hover{
  background:var(--cx-dim); text-decoration:none;
  box-shadow:0 0 16px var(--cx-glow);
}
.btn-ghost.block{display:flex; width:100%}

.btn-danger, .btn-danger-sm{
  background:linear-gradient(135deg, var(--danger), #c62b2b);
  color:#fff; border:none; cursor:pointer;
  padding:10px 20px; border-radius:var(--r-md); font-weight:700;
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
}
.btn-danger-sm{padding:6px 12px; font-size:12px}

/* Toggle tema */
.theme-toggle{
  background:var(--surface-2); border:1px solid var(--border-bright);
  color:var(--text);
  width:40px; height:40px; border-radius:var(--r-md);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; line-height:1;
  transition:transform var(--tr), border-color var(--tr);
}
/* (#5) A rotação no hover só vale em dispositivos com mouse real. No mobile o
   "hover" fica grudado após o toque, deixando o botão inclinado — evitamos
   isso restringindo a regra a (hover:hover) e garantindo 0deg no toque. */
@media (hover: hover) and (pointer: fine){
  .theme-toggle:hover{ border-color:var(--cx); transform:rotate(15deg); }
}
.theme-toggle{ transform:rotate(0deg); }
.theme-toggle:active{ transform:rotate(0deg); }
.theme-toggle .icon-light{display:none}
.theme-toggle .icon-dark{display:inline}
:root[data-theme="light"] .theme-toggle .icon-light{display:inline}
:root[data-theme="light"] .theme-toggle .icon-dark{display:none}

/* ============================================================
   LAYOUT MAIN
   ============================================================ */
.site-main{
  flex:1;
  max-width:1280px; width:100%; margin:0 auto; padding:0 28px 56px;
}
.section{margin:64px 0}
.section-title{
  font-family:var(--font-body); font-weight:700;
  font-size:18px; margin-bottom:28px;
  text-align:center; letter-spacing:0.12em; text-transform:uppercase;
  position:relative;
  color:var(--text);
}
.section-title::after{
  content:''; display:block; width:60px; height:2px;
  background:var(--co); box-shadow:0 0 8px var(--co-glow);
  margin:10px auto 0; border-radius:1px;
}

/* ============================================================
   HERO (página inicial)
   ============================================================ */
.hero{
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  align-items:center;
  padding:64px 0 48px;
  min-height:500px;
}
.hero-content{padding-right:20px}
.hero-title{
  font-family:var(--font-body);
  font-weight:800; font-size:clamp(36px, 4.5vw, 56px);
  line-height:1.05; letter-spacing:-0.01em;
  margin-bottom:24px;
}
.hero-title .ht-blue{
  color:var(--cx); display:block;
  text-shadow:0 0 24px var(--cx-glow);
}
.hero-title .ht-pink{
  color:var(--co); display:block;
  text-shadow:0 0 24px var(--co-glow);
}
.hero-title .ht-word-pink{color:var(--co); text-shadow:0 0 24px var(--co-glow)}
.hero-sub{
  color:var(--text-muted); font-size:16px; line-height:1.7;
  max-width:480px; margin-bottom:36px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}

/* Imagem do hero (X e O grandes sobre podium/cidade) */
.hero-visual{
  position:relative;
  height:480px;
  display:flex; align-items:center; justify-content:center;
}
.hero-visual-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 70%, rgba(120,40,180,0.35), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(60,30,120,0.18) 60%, transparent 100%);
  border-radius:var(--r-xl);
}
.hero-xo{
  position:relative;
  display:flex; gap:0; align-items:center; justify-content:center;
  z-index:1;
  filter:drop-shadow(0 0 40px var(--cx-glow));
}
.hero-xo-x, .hero-xo-o{
  font-family:var(--font-body);
  font-size:clamp(120px, 18vw, 220px);
  font-weight:900; line-height:1;
}
.hero-xo-x{
  color:var(--cx);
  text-shadow:
    0 0 20px var(--cx-glow),
    0 0 40px var(--cx-glow),
    0 0 80px var(--cx-glow);
  margin-right:-0.05em;
}
.hero-xo-o{
  color:var(--co);
  text-shadow:
    0 0 20px var(--co-glow),
    0 0 40px var(--co-glow),
    0 0 80px var(--co-glow);
}
/* Podium ring effect under XO */
.hero-podium{
  position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  width:340px; height:30px;
  border-radius:50%;
  background:
    radial-gradient(ellipse 100% 100% at center, var(--co-dim) 0%, transparent 70%);
  box-shadow:
    0 0 40px var(--co-glow),
    inset 0 0 20px var(--cx-glow);
  border:2px solid var(--co);
  opacity:0.6;
}

/* ============================================================
   GRID DE JOGOS (Escolha seu jogo)
   ============================================================ */
.games-section{margin-top:40px}
.games-grid-row{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
  margin-bottom:32px;
}
.game-card-v2{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border-bright);
  border-radius:var(--r-lg);
  padding:24px 16px 20px;
  text-decoration:none;
  color:var(--text);
  transition:transform var(--tr), border-color var(--tr), box-shadow var(--tr);
  overflow:hidden;
}
.game-card-v2::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center top, var(--cx-dim) 0%, transparent 50%);
  opacity:0.5;
  pointer-events:none;
  transition:opacity var(--tr);
}
.game-card-v2:hover{
  transform:translateY(-4px);
  border-color:var(--co);
  box-shadow:0 0 24px var(--co-dim);
  text-decoration:none;
}
.game-card-v2:hover::before{opacity:0.9}
.game-card-v2.disabled{
  opacity:0.55; cursor:not-allowed; pointer-events:none;
}
.game-card-v2-icon{
  height:120px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  position:relative; z-index:1;
}
.game-card-v2-icon svg{width:90px; height:90px}
.game-card-v2-title{
  font-weight:700; font-size:15px; letter-spacing:0.08em;
  text-transform:uppercase; text-align:center;
  margin-bottom:6px;
  color:var(--text);
  position:relative; z-index:1;
}
.game-card-v2-desc{
  font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; text-align:center;
  color:var(--text-muted);
  position:relative; z-index:1;
}

.see-all-row{display:flex; justify-content:center; margin-top:8px}

/* ============================================================
   FEATURES (Por que jogar aqui?)
   ============================================================ */
.features-section{margin-top:72px}
.features-grid-v2{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:32px;
  margin-top:8px;
}
.feature-v2{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:0 8px;
}
.feature-v2-icon{
  width:80px; height:80px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface);
  border:1.5px solid var(--cx);
  box-shadow:0 0 24px var(--cx-dim), inset 0 0 12px var(--cx-dim);
  margin-bottom:18px;
}
.feature-v2-icon svg{width:34px; height:34px; color:var(--cx)}
.feature-v2:nth-child(2) .feature-v2-icon{
  border-color:var(--co); box-shadow:0 0 24px var(--co-dim), inset 0 0 12px var(--co-dim);
}
.feature-v2:nth-child(2) .feature-v2-icon svg{color:var(--co)}
.feature-v2-title{
  font-weight:700; font-size:15px; letter-spacing:0.08em;
  text-transform:uppercase; margin-bottom:10px;
  color:var(--text);
}
.feature-v2-desc{
  font-size:13px; line-height:1.6;
  color:var(--text-muted);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--border);
  margin-top:auto;
  background:var(--bg-deep);
}
.footer-inner{
  max-width:1280px; margin:0 auto; padding:40px 28px 24px;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px;
}
.footer-brand-col .brand{margin-bottom:14px}
.footer-tagline{
  font-size:13px; line-height:1.6; color:var(--text-muted);
  max-width:260px;
}
.footer-col-title{
  font-weight:700; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text);
  margin-bottom:16px;
}
.footer-nav{display:flex; flex-direction:column; gap:10px}
.footer-nav a{
  color:var(--text-muted); font-size:13px;
  transition:color var(--tr);
}
.footer-nav a:hover{color:var(--cx); text-decoration:none}
.footer-social{display:flex; gap:14px; align-items:center}
.footer-social a{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface);
  border:1px solid var(--border-bright);
  color:var(--text-muted);
  transition:color var(--tr), border-color var(--tr), background var(--tr);
}
.footer-social a:hover{
  color:var(--cx); border-color:var(--cx);
  background:var(--cx-dim); text-decoration:none;
}
.footer-social a svg{width:18px; height:18px}
.footer-bottom{
  max-width:1280px; margin:0 auto; padding:16px 28px 24px;
  border-top:1px solid var(--divider);
  text-align:right;
  color:var(--text-faint); font-size:12px;
}
.footer-version{
  display:inline-block; margin-left:10px;
  padding:2px 8px; border-radius:999px;
  background:rgba(0,212,255,.10); color:var(--cx);
  font-weight:600; letter-spacing:.04em;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1024px){
  .hero{grid-template-columns:1fr; padding:48px 0 32px; min-height:auto}
  .hero-content{padding-right:0; text-align:center}
  .hero-sub{margin-left:auto; margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-visual{height:360px}
  .games-grid-row{grid-template-columns:repeat(3, 1fr)}
  .games-grid-row .game-card-v2:nth-child(4),
  .games-grid-row .game-card-v2:nth-child(5){grid-column:span 1}
  .features-grid-v2{grid-template-columns:repeat(3, 1fr)}
  .footer-inner{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width: 720px){
  .header-inner{padding:14px 20px; gap:16px}
  .header-nav{display:none}
  .site-main{padding:0 20px 40px}
  .hero-title{font-size:clamp(28px, 8vw, 40px)}
  .games-grid-row{grid-template-columns:repeat(2, 1fr)}
  .features-grid-v2{grid-template-columns:repeat(2, 1fr); gap:24px}
  .footer-inner{grid-template-columns:1fr; gap:24px}
  .footer-bottom{text-align:center}
  .brand-text{font-size:15px}
  .brand-mark{width:36px; height:36px}
}

/* ============================================================
   ESTILOS LEGADOS (preservados para outras páginas funcionarem)
   Auth, dashboard, leaderboard, friends, DMs, admin, etc.
   ============================================================ */

/* ─── neon-title genérico (usado em outras telas) ─── */
.neon-title{
  font-family:var(--font-body); font-weight:800;
  font-size:clamp(28px, 5vw, 48px); letter-spacing:0.02em;
  background:linear-gradient(135deg, var(--cx) 30%, var(--co) 70%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 30px var(--cx-glow);
}

/* ─── auth ─── */
.auth-card{
  max-width:440px; margin:48px auto;
  background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-lg); padding:36px;
  box-shadow:0 0 40px rgba(0,212,255,0.05);
}
.auth-title{
  font-family:var(--font-body); font-weight:800;
  font-size:24px; margin-bottom:24px; letter-spacing:-0.01em;
}
.auth-form{display:flex; flex-direction:column; gap:16px}
.auth-form label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-muted); font-weight:500}
.auth-form input[type=text], .auth-form input[type=email], .auth-form input[type=password], .auth-form textarea, .auth-form select{
  background:var(--surface-2); border:1px solid var(--border-bright);
  color:var(--text); padding:12px 14px; border-radius:var(--r-md);
  font:inherit; outline:none;
}
.auth-form input:focus, .auth-form textarea:focus, .auth-form select:focus{
  border-color:var(--cx); box-shadow:0 0 0 3px var(--cx-dim);
}
.auth-form .checkbox{flex-direction:row; align-items:center; gap:8px; color:var(--text); font-size:13px}
.auth-links{margin-top:20px; text-align:center; color:var(--text-muted); font-size:13px}
.auth-links a{margin:0 4px}

.alert{padding:14px 16px; border-radius:var(--r-md); font-size:13px; margin-bottom:16px; line-height:1.5}
.alert.info{background:var(--cx-dim); color:var(--cx-bright); border:1px solid var(--cx-dim)}
.alert.error{background:rgba(255,77,77,0.15); color:#ff8a8a; border:1px solid rgba(255,77,77,0.25)}

/* ─── tabelas ─── */
table{width:100%; border-collapse:collapse}
th, td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--divider); font-size:14px}
th{font-weight:700; color:var(--text-muted); font-size:12px; letter-spacing:0.05em; text-transform:uppercase}

.matches-table tr.result-win td{color:var(--ok)}
.matches-table tr.result-loss td{color:var(--danger)}
.matches-table tr.result-draw td{color:var(--text-muted)}

.leaderboard-table .rank-pill{
  display:inline-block; padding:3px 12px; border-radius:var(--r-full);
  font-size:11px; font-weight:700; letter-spacing:0.05em;
}
.rank-bronze{background:rgba(205,127,50,0.15); color:#d4a472}
.rank-silver{background:rgba(192,192,192,0.15); color:#cfcfcf}
.rank-gold{background:rgba(255,215,0,0.15); color:#ffd866}
.rank-platinum{background:rgba(0,212,255,0.15); color:var(--cx-bright)}
.rank-diamond{background:rgba(255,45,146,0.15); color:var(--co-bright)}

/* ─── profile / dashboard ─── */
.dash-hero h1{font-family:var(--font-body); font-weight:800; font-size:30px; margin-bottom:6px; letter-spacing:-0.01em}
.hl-cx{color:var(--cx)}
.hl-orange{color:#ffae42}
.muted{color:var(--text-muted)}

.stats-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin:20px 0}
.stat-card{
  background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-lg); padding:18px;
}
.stat-game{font-size:11px; color:var(--text-muted); letter-spacing:0.08em; text-transform:uppercase; font-weight:600}
.stat-elo{font-size:24px; margin:8px 0; font-weight:700}
.stat-elo strong{color:var(--cx-bright)}
.stat-rank{font-size:13px; color:var(--text-muted)}
.stat-line{font-size:12px; color:var(--text-faint); margin-top:6px}

.profile-hero{
  display:flex; gap:24px; align-items:center;
  background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-lg); padding:28px;
}
.profile-avatar{
  width:80px; height:80px; border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--cx), var(--co));
  color:#0a0a1c; display:grid; place-items:center;
  font-weight:900; font-size:32px;
}
.profile-meta h1{font-family:var(--font-body); font-weight:800; margin-bottom:4px; letter-spacing:-0.01em}
.profile-actions{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}

.badge{display:inline-block; padding:4px 12px; border-radius:var(--r-full); font-size:12px; background:var(--surface-3); color:var(--text-muted); font-weight:500}
.badge.ok{background:rgba(34,224,124,0.15); color:var(--ok)}
.badge.warn{background:rgba(255,174,66,0.15); color:var(--warn)}
.badge.danger{background:rgba(255,77,77,0.15); color:var(--danger)}

.card{
  background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-lg); padding:24px; margin:16px 0;
}
.card h2{font-family:var(--font-body); font-weight:700; font-size:17px; margin-bottom:14px; letter-spacing:0.02em}
.card.danger{border-color:rgba(255,77,77,0.3)}

/* ─── tabs ─── */
.tabs{display:flex; gap:8px; margin:12px 0 24px; flex-wrap:wrap}
.tab{
  padding:8px 16px; border-radius:var(--r-full);
  background:var(--surface-2); border:1px solid var(--border-bright);
  color:var(--text-muted); font-size:13px; font-weight:500;
  text-decoration:none;
}
.tab.active{color:var(--cx-bright); border-color:var(--cx); background:var(--cx-dim)}

/* ─── friends ─── */
.friend-list{list-style:none; padding:0; display:flex; flex-direction:column; gap:8px}
.friend-list li{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:var(--surface-2);
  border:1px solid var(--border-bright); border-radius:var(--r-md);
}
.presence-dot{
  width:10px; height:10px; border-radius:50%; background:var(--text-faint);
}
.presence-dot.on{background:var(--ok); box-shadow:0 0 8px var(--ok)}
.inline-form{display:inline-flex; gap:8px; align-items:center; margin:0}
.inline-form input[type=text]{
  background:var(--surface-3); border:1px solid var(--border-bright);
  color:var(--text); padding:7px 12px; border-radius:var(--r-md);
}

/* ─── DMs ─── */
.messages-layout{display:grid; grid-template-columns:260px 1fr; gap:16px; min-height:60vh}
.messages-list{
  background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-lg); padding:10px; overflow-y:auto;
}
.thread{
  display:block; padding:10px 14px; border-radius:var(--r-md);
  margin-bottom:4px; text-decoration:none; color:var(--text);
  position:relative;
}
.thread:hover{background:var(--surface-2); text-decoration:none}
.thread.active{background:var(--cx-dim)}
.thread-name{font-weight:600}
.thread-preview{color:var(--text-muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.thread-unread{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:var(--co); color:#fff; border-radius:var(--r-full);
  padding:1px 9px; font-size:11px; font-weight:700;
}
.messages-pane{
  background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-lg); display:flex; flex-direction:column;
}
.pane-header{padding:16px 20px; border-bottom:1px solid var(--divider)}
.pane-title{font-weight:700; color:var(--text)}
.messages-feed{flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:8px}
.msg{max-width:70%; padding:9px 14px; border-radius:var(--r-md); font-size:14px}
.msg.mine{align-self:flex-end; background:var(--cx-dim); color:var(--text)}
.msg.theirs{align-self:flex-start; background:var(--surface-2); color:var(--text)}
.msg-time{font-size:10px; color:var(--text-faint); margin-top:2px}
.dm-form{display:flex; gap:8px; padding:14px; border-top:1px solid var(--divider)}
.dm-form input{
  flex:1; background:var(--surface-2); border:1px solid var(--border-bright);
  color:var(--text); padding:10px 14px; border-radius:var(--r-md);
  font:inherit; outline:none;
}
.pane-empty{padding:48px; text-align:center; color:var(--text-muted)}

/* ─── admin ─── */
.admin-shell{
  display:grid; grid-template-columns:220px 1fr; gap:18px;
  min-height:60vh;
}
.admin-nav{
  background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-lg); padding:14px;
  display:flex; flex-direction:column; gap:4px; height:max-content;
}
.admin-nav h2{font-size:11px; color:var(--text-muted); padding:6px 8px; text-transform:uppercase; letter-spacing:0.12em; font-weight:700}
.admin-nav a{padding:9px 12px; color:var(--text); border-radius:var(--r-md); font-size:14px}
.admin-nav a:hover{background:var(--surface-2); text-decoration:none}
.admin-nav a.on{background:var(--cx-dim); color:var(--cx-bright)}

.admin-content{
  background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-lg); padding:24px;
}
.admin-content h1{font-family:var(--font-body); font-weight:800; margin-bottom:18px; letter-spacing:-0.01em}
.admin-content h2{font-family:var(--font-body); font-weight:700; margin:20px 0 12px; font-size:17px}

.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:12px; margin-bottom:24px}
.kpi{background:var(--surface-2); border:1px solid var(--border-bright); border-radius:var(--r-md); padding:14px}
.kpi-label{color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600}
.kpi-value{font-size:26px; color:var(--cx-bright); font-weight:700; margin-top:4px}
.kpi-value.warn{color:var(--warn)}

.admin-search{display:flex; gap:8px; margin-bottom:14px}
.admin-search input{
  flex:1; background:var(--surface-2); border:1px solid var(--border-bright);
  color:var(--text); padding:9px 14px; border-radius:var(--r-md);
}

.admin-table tbody tr:hover{background:var(--surface-2)}
.role-pill{display:inline-block; padding:3px 10px; border-radius:var(--r-full); font-size:11px; font-weight:600}
.role-player{background:var(--surface-3); color:var(--text-muted)}
.role-moderator{background:rgba(255,174,66,0.15); color:var(--warn)}
.role-admin{background:rgba(255,45,146,0.15); color:var(--co-bright)}

.admin-actions-cell details summary{cursor:pointer; color:var(--cx-bright)}
.admin-actions{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.admin-actions form{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.admin-actions form input[type=text]{background:var(--surface-3); border:1px solid var(--border-bright); color:var(--text); padding:5px 10px; border-radius:var(--r-md)}
.admin-actions form select{background:var(--surface-3); border:1px solid var(--border-bright); color:var(--text); padding:5px 10px; border-radius:var(--r-md)}

.report-body{max-width:280px; white-space:pre-wrap}

/* ─── static pages ─── */
.static-page{max-width:780px; margin:0 auto; line-height:1.75}
.static-page h1{font-family:var(--font-body); font-weight:800; margin-bottom:18px; letter-spacing:-0.01em}
.static-page h2{font-family:var(--font-body); font-weight:700; margin:28px 0 12px; font-size:20px}
.static-page p{margin-bottom:14px; color:var(--text)}
.static-page ul{margin:8px 0 18px 24px}
.static-page li{margin-bottom:8px}

.error-page{max-width:520px; margin:80px auto; text-align:center}
.error-page h1{font-family:var(--font-body); font-weight:800; margin-bottom:14px}
.error-page p{color:var(--text-muted); margin-bottom:24px}

/* ─── v10.1.0: Avatar do perfil + seletor ─── */
.profile-avatar.profile-avatar-img{
  width:120px; height:120px; border-radius:50%;
  background:linear-gradient(135deg, var(--cx), var(--co));
  padding:3px; overflow:hidden;
  display:grid; place-items:center;
  box-shadow:0 0 20px rgba(0,212,255,0.25);
  flex-shrink:0;
}
.profile-avatar.profile-avatar-img img{
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; display:block;
  background:var(--surface);
}

.avatar-section{margin-top:18px}
.avatar-help{margin-top:-6px; margin-bottom:14px; font-size:13px}
.avatar-group-title{
  font-family:var(--font-body); font-weight:700;
  font-size:14px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted); margin:18px 0 10px;
}
.avatar-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(86px, 1fr));
  gap:12px;
}
.avatar-card{
  position:relative;
  width:100%; aspect-ratio:1/1;
  border-radius:50%;
  border:2px solid var(--border-bright);
  background:var(--surface-2);
  padding:0; cursor:pointer; overflow:hidden;
  transition:transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.avatar-card img{
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; display:block;
}
.avatar-card:hover{
  transform:translateY(-2px) scale(1.04);
  border-color:var(--cx);
  box-shadow:0 0 16px var(--cx-glow);
}
.avatar-card.selected{
  border-color:var(--co);
  box-shadow:0 0 18px var(--co-glow);
}
.avatar-card.selected::after{
  content:"✓"; position:absolute; right:4px; bottom:4px;
  width:22px; height:22px; border-radius:50%;
  background:var(--co); color:#0a0a1c;
  display:grid; place-items:center;
  font-weight:900; font-size:13px;
  box-shadow:0 0 8px var(--co-glow);
}