/* ═══════════════════════════════════════════════════════════════════════════
   THEME SYSTEM — Dark Only
   Paleta escura única. Tema claro removido.
   3 níveis de fundo claramente distintos para hierarquia visual limpa.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
   NÍVEIS DE FUNDO:
   A  #0e1523  →  corpo de painéis / modais  (base)
   B  #152030  →  cards flutuantes           (intermediário)
   C  #1c2a3d  →  abas + inputs interativos  (mais elevado)
   H  #0a1020  →  headers (mais escuro que A)
*/
:root,
[data-theme],
[data-theme="dark"],
[data-theme="light"] {

    /* ── Fundos ─────────────────────────────────────────────────────── */
    --bg-page:           #080c14;   /* página / canvas bg              */
    --bg-primary:        #0e1523;   /* A — corpo de painéis e modais   */
    --bg-secondary:      #1c2a3d;   /* C — abas, interativos           */
    --bg-tertiary:       #233248;   /* separadores de grupo            */
    --bg-card:           #152030;   /* B — cards flutuantes            */
    --bg-card-hover:     #1c2a3d;   /* hover de card (= C)             */
    --bg-input:          #1c2a3d;   /* inputs = C (unificado)          */
    --bg-overlay:        rgba(14,21,35,0.98);
    --bg-modal-backdrop: rgba(0,2,10,0.82);
    --bg-glass:          rgba(14,21,35,0.92);

    /* ── Bordas ─────────────────────────────────────────────────────── */
    --border-primary:    #1e2e42;   /* divisor sutil (visível em A e B)*/
    --border-secondary:  #273d56;   /* separador forte                 */
    --border-accent:     rgba(88,166,255,0.28);
    --border-input:      #1e2e42;
    --border-input-focus:#58a6ff;

    /* ── Textos (todos passam WCAG AA sobre #0e1523) ─────────────────── */
    --text-primary:   #e6edf5;      /* 14:1  — leitura principal       */
    --text-secondary: #a8b3c8;      /*  9:1  — leitura secundária      */
    --text-tertiary:  #7a8999;      /*  5.7:1 — labels / dicas         */
    --text-muted:     #697686;      /*  4.2:1 — placeholders           */
    --text-inverse:   #0e1523;

    /* ── Accent — azul elétrico gaming ─────────────────────────────── */
    --accent:       #58a6ff;
    --accent-hover: #79b8ff;
    --accent-light: rgba(88,166,255,0.10);
    --accent-glow:  rgba(88,166,255,0.25);

    /* ── Semânticas ─────────────────────────────────────────────────── */
    --success:       #3fb950;
    --success-light: rgba(63,185,80,0.12);
    --danger:        #f85149;
    --danger-light:  rgba(248,81,73,0.12);
    --warning:       #e3b341;
    --warning-light: rgba(227,179,65,0.12);
    --purple:        #a78bfa;
    --purple-light:  rgba(167,139,250,0.12);

    /* ── Sombras ─────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.65);
    --shadow-md: 0 4px 18px rgba(0,0,0,0.60);
    --shadow-lg: 0 10px 36px rgba(0,0,0,0.70);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.80), 0 8px 24px rgba(0,0,0,0.45);

    /* ── Raios ───────────────────────────────────────────────────────── */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;

    /* ── Fonte ───────────────────────────────────────────────────────── */
    --font-main: 'Ubuntu', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Header — mais escuro que bg-primary (zona visual distinta) ─── */
    --header-bg: linear-gradient(135deg, #0a1020, #121e30);

    /* ── Tabs ────────────────────────────────────────────────────────── */
    --tab-active-bg:     rgba(88,166,255,0.12);
    --tab-active-border: #58a6ff;
    --tab-text:          #7a8999;
    --tab-active-text:   #58a6ff;

    /* ── Botões ──────────────────────────────────────────────────────── */
    --btn-play-bg:           linear-gradient(135deg, #1f6feb, #1158d4);
    --btn-play-shadow:       0 4px 18px rgba(31,111,235,0.50);
    --btn-play-hover-shadow: 0 6px 26px rgba(31,111,235,0.70);
    --btn-secondary-bg:      #1c2a3d;
    --btn-secondary-border:  #1e2e42;
    --btn-secondary-text:    #a8b3c8;

    /* ── Ranking ─────────────────────────────────────────────────────── */
    --ranking-gold:      #e3b341;
    --ranking-silver:    #a8a8b3;
    --ranking-bronze:    #cd853f;
    --ranking-bg:        linear-gradient(180deg, #080c14, #0e1523);
    --ranking-header-bg: linear-gradient(135deg, #1c1400, #2a1f00);
    --ranking-border:    rgba(227,179,65,0.20);

    /* ── Discord ─────────────────────────────────────────────────────── */
    --discord-bg:           linear-gradient(135deg, #5865F2, #4752C4);
    --discord-shadow:       0 4px 14px rgba(88,101,242,0.45);
    --discord-hover-shadow: 0 6px 22px rgba(88,101,242,0.65);

    /* ── Social panel vars (override social_v1.css defaults) ─────────── */
    --sp-bg:      #0e1523;
    --sp-surface: #152030;
    --sp-surface2:#1c2a3d;
    --sp-border:  #1e2e42;
    --sp-text:    #e6edf5;
    --sp-muted:   #7a8999;
    --sp-offline: #4d5b6e;
    --sp-accent:  #a78bfa;
    --sp-accent2: #c4b5fd;
    --sp-green:   #3fb950;
    --sp-yellow:  #e3b341;
    --sp-red:     #f85149;
    --sp-cyan:    #58a6ff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HTML / BODY — fundo escuro + fonte
   ═══════════════════════════════════════════════════════════════════════════ */
html, body {
    background-color: var(--bg-page) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-main) !important;
}
button, .btn, input, select, textarea {
    font-family: var(--font-main) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSIÇÕES GLOBAIS
   ═══════════════════════════════════════════════════════════════════════════ */
* {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.18s;
    transition-timing-function: ease;
}
*[class*="animate"], *[class*="pulse"], *[class*="blink"], canvas, video {
    transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENU PRINCIPAL (#helloDialog)
   ═══════════════════════════════════════════════════════════════════════════ */
#helloDialog {
    background: var(--bg-primary) !important;
    border: 1.5px solid var(--border-primary) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    color: var(--text-primary) !important;
    padding: 24px 22px !important;
    width: 480px !important;
    max-width: 94vw !important;
    font-family: var(--font-main) !important;
}
#helloDialog h2 {
    color: var(--text-primary) !important;
    font-size: 1.15rem !important;
    font-family: var(--font-main) !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    margin-bottom: 10px !important;
}
#helloDialog input,
#helloDialog select {
    background: var(--bg-input) !important;
    border: 1.5px solid var(--border-input) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 11px 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    font-family: var(--font-main) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
}
#helloDialog input:focus,
#helloDialog select:focus {
    border-color: var(--border-input-focus) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none !important;
}
#helloDialog input::placeholder {
    color: var(--text-muted) !important;
}
#helloDialog select option {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
#helloDialog select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a8999'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
    cursor: pointer !important;
}
#nick-select { width: 100% !important; box-sizing: border-box !important; }
#helloDialog .form-group { margin-bottom: 8px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOTÃO JOGAR
   ═══════════════════════════════════════════════════════════════════════════ */
#play-btn {
    background: var(--btn-play-bg) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 14px 20px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    box-shadow: var(--btn-play-shadow) !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
}
#play-btn:hover {
    filter: brightness(1.10) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--btn-play-hover-shadow) !important;
}
#play-btn:active { transform: translateY(0) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOTÕES COLORIDOS DO MENU — identidade visual permanente
   ═══════════════════════════════════════════════════════════════════════════ */

/* Linha de dois botões */
.menu-btn-row {
    display: flex !important;
    gap: 6px !important;
    margin-top: 6px !important;
    width: 100% !important;
}
.menu-btn-row > * {
    flex: 1 !important;
    margin-top: 0 !important;
}

/* Base comum — dimensões e layout */
#spectate-btn, #gallery-btn, #open-overlay-btn, #create-btn, #nick-btn {
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
    transition: all 0.18s ease !important;
    width: 100% !important;
    margin-top: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}
#spectate-btn:active, #gallery-btn:active,
#open-overlay-btn:active, #create-btn:active, #nick-btn:active {
    transform: translateY(0) !important;
}

/* Espectar — ciano */
#spectate-btn {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    box-shadow: 0 3px 14px rgba(8,145,178,0.42) !important;
    font-family: var(--font-main) !important;
    letter-spacing: 0 !important;
}
#spectate-btn:hover {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    box-shadow: 0 5px 20px rgba(6,182,212,0.58) !important;
    transform: translateY(-2px) !important;
}
#spectate-btn::before {
    content: '👁  Espectar';
    font-family: var(--font-main);
    font-style: normal;
}

/* Galeria — laranja âmbar */
#gallery-btn {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    box-shadow: 0 3px 14px rgba(217,119,6,0.42) !important;
}
#gallery-btn:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 5px 20px rgba(245,158,11,0.58) !important;
    transform: translateY(-2px) !important;
}
#gallery-btn::before { content: ''; }

/* Configurações — índigo */
#open-overlay-btn {
    background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
    box-shadow: 0 3px 14px rgba(79,70,229,0.42) !important;
}
#open-overlay-btn:hover {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    box-shadow: 0 5px 20px rgba(99,102,241,0.58) !important;
    transform: translateY(-2px) !important;
}
#open-overlay-btn::before { content: ''; }

/* Criar Skins — rosa */
#create-btn {
    background: linear-gradient(135deg, #db2777, #be185d) !important;
    box-shadow: 0 3px 14px rgba(219,39,119,0.42) !important;
}
#create-btn:hover {
    background: linear-gradient(135deg, #ec4899, #db2777) !important;
    box-shadow: 0 5px 20px rgba(236,72,153,0.58) !important;
    transform: translateY(-2px) !important;
}
#create-btn::before { content: ''; }

/* Discord — branding permanente */
#nick-btn {
    background: linear-gradient(135deg, #5865F2, #4752C4) !important;
    box-shadow: 0 3px 14px rgba(88,101,242,0.42) !important;
    text-decoration: none !important;
}
#nick-btn:hover {
    background: linear-gradient(135deg, #7289da, #5865F2) !important;
    box-shadow: 0 5px 20px rgba(88,101,242,0.60) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTÕES AUTH (Login / Cadastro / Sair / Conta)
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-buttons {
    display: flex !important;
    gap: 8px !important;
    margin: 12px 0 8px !important;
    width: 100% !important;
}
.auth-buttons .btn {
    flex: 1;
    display: flex;
    border-radius: var(--radius-sm) !important;
    font-size: 12px !important;
    padding: 11px 12px !important;
    border: none !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer !important;
    color: #fff !important;
}
.auth-buttons .btn:hover { transform: translateY(-2px) !important; filter: brightness(1.08) !important; }
.auth-buttons .btn:active { transform: translateY(0) !important; }
.auth-hidden { display: none !important; }

.btn-register, #register-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    box-shadow: 0 3px 12px rgba(16,185,129,0.35) !important;
    font-size: 12px !important; padding: 11px 14px !important; color: #fff !important;
    border: none !important; border-radius: var(--radius-sm) !important;
    font-weight: 700 !important; cursor: pointer !important;
}
.btn-login, #login-btn {
    background: var(--btn-play-bg) !important;
    box-shadow: 0 3px 12px rgba(31,111,235,0.35) !important;
    font-size: 12px !important; padding: 11px 14px !important; color: #fff !important;
    border: none !important; border-radius: var(--radius-sm) !important;
    font-weight: 700 !important; cursor: pointer !important;
}
.btn-logout, #logout-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 3px 12px rgba(239,68,68,0.30) !important;
    font-size: 12px !important; padding: 10px 12px !important; color: #fff !important;
    border: none !important; border-radius: var(--radius-sm) !important;
    font-weight: 700 !important; cursor: pointer !important;
}
.btn-account, #account-btn {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    box-shadow: 0 3px 12px rgba(139,92,246,0.35) !important;
    font-size: 12px !important; padding: 10px 12px !important; color: #fff !important;
    border: none !important; border-radius: var(--radius-sm) !important;
    font-weight: 700 !important; cursor: pointer !important;
}
.btn-register:hover, #register-btn:hover { box-shadow: 0 5px 18px rgba(16,185,129,0.50) !important; }
.btn-login:hover,    #login-btn:hover    { box-shadow: 0 5px 18px rgba(31,111,235,0.50) !important; }
.btn-logout:hover,   #logout-btn:hover   { box-shadow: 0 5px 18px rgba(239,68,68,0.45) !important; }
.btn-account:hover,  #account-btn:hover  { box-shadow: 0 5px 18px rgba(139,92,246,0.50) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   DISCORD OAUTH BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-discord-oauth {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px 20px !important;
    background: var(--discord-bg) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-main) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: var(--discord-shadow) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
}
.btn-discord-oauth:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--discord-hover-shadow) !important;
    filter: brightness(1.08) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.btn-discord-oauth:active { transform: translateY(0) !important; }
.btn-discord-oauth svg { flex-shrink: 0 !important; width: 20px !important; height: 20px !important; }

.sc-oauth-divider {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 14px 0 10px !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: var(--font-main) !important;
}
.sc-oauth-divider::before,
.sc-oauth-divider::after { content: '' !important; flex: 1 !important; height: 1px !important; background: var(--border-primary) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODAIS (Login, Registro)
   ═══════════════════════════════════════════════════════════════════════════ */
.modal { background: var(--bg-modal-backdrop) !important; }
.modal-content {
    background: var(--bg-primary) !important;
    border: 1.5px solid var(--border-primary) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    color: var(--text-primary) !important;
    padding: 28px 24px !important;
}
#login-modal .modal-content,
#register-modal .modal-content { max-width: 420px !important; }
.modal h2 {
    color: var(--text-primary) !important;
    font-family: var(--font-main) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}
.modal h3 {
    color: var(--text-primary) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin-bottom: 14px !important;
}
.modal label {
    color: var(--text-tertiary) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: block !important;
}
.modal input {
    background: var(--bg-input) !important;
    border: 1.5px solid var(--border-input) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--font-main) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.modal input:focus {
    border-color: var(--border-input-focus) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none !important;
}
.modal input::placeholder { color: var(--text-muted) !important; }
.modal button { font-family: var(--font-main) !important; }
.modal .btn-group { display: flex !important; gap: 10px !important; margin-top: 16px !important; }
.modal .btn-submit {
    flex: 1 !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: var(--font-main) !important;
    cursor: pointer !important;
    box-shadow: 0 3px 12px rgba(16,185,129,0.30) !important;
    transition: all 0.2s ease !important;
}
.modal .btn-submit:hover { transform: translateY(-1px) !important; box-shadow: 0 5px 18px rgba(16,185,129,0.45) !important; }
.modal .btn-close {
    flex: 1 !important;
    background: var(--bg-input) !important;
    color: var(--text-secondary) !important;
    border: 1.5px solid var(--border-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--font-main) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.modal .btn-close:hover { background: var(--danger-light) !important; border-color: var(--danger) !important; color: var(--danger) !important; }
.recaptcha-notice { color: var(--text-muted) !important; font-size: 10px !important; margin-top: 10px !important; text-align: center !important; line-height: 1.4 !important; }
.recaptcha-notice a { color: var(--accent) !important; opacity: 0.8 !important; }
#login-pwd-toggle { color: var(--text-muted) !important; }
#login-pwd-toggle:hover { color: var(--text-primary) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
#settings-overlay-panel {
    background: var(--bg-primary) !important;
    border: 1.5px solid var(--border-primary) !important;
    border-top: 3px solid var(--accent) !important;
    box-shadow: var(--shadow-xl) !important;
}
#settings-overlay-header {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}
#settings-overlay-title { color: var(--text-primary) !important; }
.sov-header-sub { color: var(--text-tertiary) !important; }
#settings-overlay-close {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-tertiary) !important;
}
#settings-overlay-close:hover { background: var(--danger-light) !important; border-color: var(--danger) !important; color: var(--danger) !important; }
#settings-overlay-tabs { background: var(--bg-secondary) !important; border-bottom: 1px solid var(--border-primary) !important; }
.sov-tab { color: var(--tab-text) !important; }
.sov-tab:hover { color: var(--text-primary) !important; background: var(--accent-light) !important; }
.sov-tab.active { color: var(--tab-active-text) !important; border-bottom-color: var(--tab-active-border) !important; }
#settings-overlay-body { background: var(--bg-primary) !important; }
.sov-group-title { color: var(--text-tertiary) !important; border-bottom-color: var(--border-secondary) !important; }
.sov-checkbox-item { background: var(--bg-card) !important; border: 1px solid var(--border-primary) !important; }
.sov-checkbox-item:hover { background: var(--accent-light) !important; border-color: var(--border-accent) !important; }
.sov-checkbox-label { color: var(--text-secondary) !important; }
.sov-checkbox-desc { font-size: 0.68rem !important; color: var(--text-muted) !important; line-height: 1.3 !important; margin-top: 2px !important; display: block !important; }
.sov-slider-row { background: var(--bg-card) !important; border: 1px solid var(--border-primary) !important; }
.sov-slider-label { color: var(--text-secondary) !important; }
.sov-slider-val { color: var(--accent) !important; }
.sov-info-box { background: var(--bg-card) !important; border: 1px solid var(--border-primary) !important; color: var(--text-tertiary) !important; }
.sov-info-box strong { color: var(--text-primary) !important; }
.sov-info-box code { background: var(--bg-secondary) !important; border: 1px solid var(--border-secondary) !important; color: var(--accent) !important; border-radius: 4px !important; padding: 1px 6px !important; }
.sov-card-row { background: var(--bg-card) !important; border: 1px solid var(--border-primary) !important; }
.sov-card-text h4 { color: var(--text-primary) !important; }
.sov-card-text p { color: var(--text-tertiary) !important; }
.sov-split-option { border-color: var(--border-secondary) !important; background: var(--bg-card) !important; }
.sov-split-option:hover { border-color: var(--border-accent) !important; background: var(--accent-light) !important; }
.sov-split-option.selected,
.sov-split-option:has(input:checked) { border-color: var(--accent) !important; background: var(--accent-light) !important; }
.sov-split-name { color: var(--text-secondary) !important; }
.sov-split-desc { color: var(--text-tertiary) !important; }
.sov-keybind-row { background: var(--bg-card) !important; border: 1px solid var(--border-primary) !important; }
.sov-keybind-action { color: var(--text-secondary) !important; }
.sov-keybind-btn { background: var(--bg-secondary) !important; border-color: var(--border-primary) !important; color: var(--accent) !important; }
.sov-keybind-btn:hover, .sov-keybind-btn:focus { background: var(--accent-light) !important; border-color: var(--accent) !important; }
.sov-macro-card { background: var(--bg-card) !important; border: 1px solid var(--border-primary) !important; }
.sov-macro-name { color: var(--text-primary) !important; }
.sov-macro-desc { color: var(--text-tertiary) !important; }
.sov-macro-key-btn { background: var(--bg-secondary) !important; border: 1.5px solid var(--border-primary) !important; color: var(--accent) !important; }
.sov-macro-key-btn:hover { background: var(--accent-light) !important; border-color: var(--accent) !important; }
.sov-toggle-slider-mini { background: var(--border-secondary) !important; border-color: var(--border-primary) !important; }
.sov-toggle-slider-mini:before { background: var(--text-muted) !important; }
.sov-toggle-switch-mini input:checked + .sov-toggle-slider-mini { background: var(--accent) !important; border-color: var(--accent) !important; }
.sov-toggle-switch-mini input:checked + .sov-toggle-slider-mini:before { background: #fff !important; }
.sov-toggle-btn { background: var(--bg-input) !important; border: 1.5px solid var(--border-secondary) !important; color: var(--text-tertiary) !important; }
.sov-toggle-btn.on { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.sov-toggle-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-light) !important; }
#quality-level-name { color: var(--accent) !important; }
.sov-quality-labels span { color: var(--text-muted) !important; }
.sov-quality-labels span.active-ql { color: var(--accent) !important; }

/* Toggle de tema — oculto (dark-only) */
.sov-theme-toggle { display: none !important; }
.sov-theme-btn    { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MINHA CONTA MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
#account-modal { background: var(--bg-modal-backdrop) !important; }
#account-modal .modal-content {
    background: var(--bg-primary) !important;
    border: 1.5px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-xl) !important;
    max-width: 1000px !important;
    width: 96% !important;
    padding: 0 !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden !important;
}
#account-modal .account-section { background: var(--bg-card) !important; border-color: var(--border-primary) !important; }
#account-modal .account-section h3 { color: var(--accent) !important; border-bottom-color: var(--border-secondary) !important; }
#account-modal label { color: var(--text-tertiary) !important; }
#account-modal input { background: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-primary) !important; }
#account-modal input:focus { border-color: var(--border-input-focus) !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; }
.ac-header { background: var(--header-bg) !important; border-bottom-color: var(--border-primary) !important; }
.ac-header-nick { color: var(--text-primary) !important; }
.ac-header-meta { color: var(--text-tertiary) !important; }
.ac-rank-card { background: var(--bg-card) !important; border-color: var(--border-primary) !important; }
.ac-rank-name  { color: var(--text-primary) !important; }
.ac-rank-pts   { color: var(--text-tertiary) !important; }
.ac-close-btn  { background: var(--bg-input) !important; border-color: var(--border-primary) !important; color: var(--text-tertiary) !important; }
.ac-close-btn:hover { background: var(--danger-light) !important; border-color: var(--danger) !important; color: var(--danger) !important; }
.ac-tabs { background: var(--bg-secondary) !important; border-bottom-color: var(--border-primary) !important; }
.ac-tab { color: var(--tab-text) !important; }
.ac-tab:hover { color: var(--text-primary) !important; background: var(--accent-light) !important; }
.ac-tab.active { color: var(--tab-active-text) !important; border-bottom-color: var(--tab-active-border) !important; background: var(--tab-active-bg) !important; }
.ac-panel { background: var(--bg-primary) !important; color: var(--text-primary) !important; }
.ac-stat { background: var(--bg-card) !important; border-color: var(--border-primary) !important; }
.ac-stat:hover { border-color: var(--border-accent) !important; box-shadow: var(--shadow-md) !important; transform: translateY(-2px) !important; }
.ac-stat-val { color: var(--text-primary) !important; }
.ac-stat-lbl { color: var(--text-tertiary) !important; }
.ac-rank-progress { background: var(--bg-card) !important; border-color: var(--border-primary) !important; }
.ac-rank-progress-label { color: var(--text-primary) !important; }
.ac-rank-progress-pts   { color: var(--text-tertiary) !important; }
.ac-form-group label    { color: var(--text-tertiary) !important; }
.ac-form-group input    { background: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-primary) !important; }
.ac-form-group input:focus { border-color: var(--border-input-focus) !important; }
.ac-nick-item  { background: var(--bg-card) !important; border-color: var(--border-primary) !important; color: var(--text-primary) !important; }
.ac-nick-item:hover { border-color: var(--border-accent) !important; }
.ac-skin-card  { background: var(--bg-card) !important; border-color: var(--border-primary) !important; }
.ac-skin-card:hover { border-color: var(--border-accent) !important; }
.ac-skin-name  { color: var(--text-primary) !important; }
.ac-empty      { background: var(--bg-card) !important; border-color: var(--border-primary) !important; color: var(--text-tertiary) !important; }
.ac-section-title { color: var(--text-tertiary) !important; }
.rank-badge-toggle-card { background: var(--bg-input) !important; border-color: var(--border-primary) !important; }
.rank-badge-toggle-title { color: var(--text-primary) !important; }
.rank-badge-toggle-desc { color: var(--text-tertiary) !important; }

/* Botões fechar — tamanho consistente */
.modal-close-btn, .ac-close-btn, #settings-overlay-close, #social-panel-close {
    width: 36px !important; height: 36px !important;
    border-radius: var(--radius-sm) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 1rem !important; cursor: pointer !important;
    transition: all 0.18s !important; flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELITE DA ARENA (Ranking)
   ═══════════════════════════════════════════════════════════════════════════ */
#top20-ranking {
    background: var(--ranking-bg) !important;
    border: 1px solid var(--ranking-border) !important;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--ranking-border) !important;
}
.rk-header  { background: var(--ranking-header-bg) !important; border-bottom-color: var(--ranking-border) !important; }
.rk-title   { color: var(--ranking-gold) !important; text-shadow: 0 0 12px rgba(227,179,65,0.35) !important; }
.rk-subtitle{ color: rgba(227,179,65,0.65) !important; }
.rk-entry   { border-bottom-color: rgba(30,46,66,0.6) !important; }
.rk-entry:hover { background: var(--accent-light) !important; }
.rk-nick    { color: #c8d2ea !important; }
.rk-nick:hover,
.rk-pod-nick:hover { color: var(--accent) !important; }
.rk-pts     { color: #a0abc4 !important; }
.rk-pos-num { color: #7a8999 !important; }
.rk-pod-nick{ color: #c8d2ea !important; }
.rk-pod-1 .rk-pod-nick { color: var(--text-primary) !important; }
.rk-top1 .rk-nick { color: var(--text-primary) !important; }
.rk-entry.expanded { background: var(--accent-light) !important; }
.rk-top1  { background: rgba(227,179,65,0.09) !important; }
.rk-top2  { background: rgba(168,168,179,0.05) !important; }
.rk-top3  { background: rgba(205,133,63,0.05) !important; }
.rk-top1:hover { background: rgba(227,179,65,0.15) !important; }
.rk-si    { background: var(--bg-tertiary) !important; color: var(--text-tertiary) !important; }
.rk-stats { background: var(--bg-card) !important; border-bottom-color: var(--border-primary) !important; }
.rk-divider { background: linear-gradient(90deg, transparent, var(--ranking-border), transparent) !important; }
.rk-loading, .rk-empty { color: var(--text-muted) !important; }
#rk-ctx-menu { background: var(--bg-primary) !important; border-color: var(--border-primary) !important; box-shadow: var(--shadow-xl) !important; }
.rk-ctx-title { color: var(--text-muted) !important; border-bottom-color: var(--border-primary) !important; }
.rk-ctx-btn { color: #c8d2ea !important; }
.rk-ctx-btn:hover { background: var(--accent-light) !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   GALERIA & CRIAR SKINS
   ═══════════════════════════════════════════════════════════════════════════ */
#gallery-content, #create-content {
    background: var(--bg-primary) !important;
    border: 1.5px solid var(--border-primary) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-xl) !important;
}
#gallery-header, #create-header {
    background: var(--header-bg) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    padding: 16px 20px !important;
    font-family: var(--font-main) !important;
}
#skinsUL { background: var(--bg-primary) !important; scrollbar-color: var(--border-primary) var(--bg-primary) !important; }
.skinName { color: var(--text-secondary) !important; font-family: var(--font-main) !important; font-size: 0.78rem !important; }
.gallery-tab {
    background: var(--btn-secondary-bg) !important;
    border: 1.5px solid var(--btn-secondary-border) !important;
    color: var(--btn-secondary-text) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.18s !important;
    font-family: var(--font-main) !important;
    margin: 0 4px !important;
}
.gallery-tab.active { background: var(--accent-light) !important; border-color: var(--accent) !important; color: var(--accent) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONNECTING SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */
#connecting { background: var(--bg-modal-backdrop) !important; }
#connecting-content {
    background: var(--bg-primary) !important;
    border: 1.5px solid var(--border-primary) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text-primary) !important;
}
#connecting-content h2 { color: var(--accent) !important; }
#connecting-content p  { color: var(--text-tertiary) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SERVER MENU
   ═══════════════════════════════════════════════════════════════════════════ */
#server-menu {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1.5px solid var(--border-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}
#server-menu h3 { color: var(--accent) !important; text-shadow: none !important; }
#server-menu li { background: var(--bg-input) !important; color: var(--text-secondary) !important; box-shadow: none !important; }
#server-menu li:hover { background: var(--accent) !important; color: #fff !important; box-shadow: 0 0 12px var(--accent-glow) !important; }
.srv-name { color: inherit !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   DISCORD CARD (sidebar)
   ═══════════════════════════════════════════════════════════════════════════ */
.discord-card { background: var(--bg-card) !important; border: 1px solid var(--border-primary) !important; border-radius: var(--radius-md) !important; }
.discord-card__name { color: var(--text-primary) !important; }
.discord-card__id   { color: var(--text-tertiary) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA DE AVISOS
   ═══════════════════════════════════════════════════════════════════════════ */
#notices-panel { background: var(--bg-card) !important; border-color: var(--border-primary) !important; box-shadow: var(--shadow-lg) !important; color: var(--text-primary) !important; }
#notices-panel-header { background: var(--header-bg) !important; border-bottom-color: var(--border-primary) !important; color: #58a6ff !important; }
#notices-list { scrollbar-color: var(--border-primary) transparent !important; }
.notice-item { border-bottom-color: var(--border-secondary) !important; }
.notice-item:hover { background: var(--accent-light) !important; }
.notice-item-title   { color: #e6edf5 !important; }
.notice-item-preview { color: #a8b3c8 !important; }
.notice-item-date    { color: var(--text-muted) !important; }
.notices-loading, .notices-empty { color: var(--text-muted) !important; }
#notice-modal-content { background: var(--bg-primary) !important; border-color: var(--border-primary) !important; box-shadow: var(--shadow-xl) !important; }
#notice-modal-close   { background: var(--bg-input) !important; border-color: var(--border-primary) !important; color: var(--text-tertiary) !important; }
#notice-modal-title   { color: var(--text-primary) !important; }
#notice-modal-body    { color: #a8b3c8 !important; background: rgba(255,255,255,0.03) !important; border-color: var(--border-primary) !important; }
#notice-modal-author  { color: var(--text-muted) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTA PENDENTE
   ═══════════════════════════════════════════════════════════════════════════ */
#pending-account-content {
    background: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
    box-shadow: var(--shadow-xl) !important;
    scrollbar-color: var(--border-primary) transparent !important;
}
#pending-account-close  { background: var(--bg-input) !important; border-color: var(--border-primary) !important; color: var(--text-tertiary) !important; }
#pending-account-title  { color: var(--text-primary) !important; }
.pam-card      { background: var(--bg-card) !important; border-color: var(--border-primary) !important; }
.pam-card-text { color: #a8b3c8 !important; }
.pam-card-text strong { color: var(--text-primary) !important; }
.pam-nick-example  { background: var(--accent-light) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.pam-section-title { color: var(--text-muted) !important; }
.pam-step      { background: var(--bg-input) !important; border-color: var(--border-primary) !important; }
.pam-step-text { color: var(--text-secondary) !important; }
.pam-step-text strong { color: var(--text-primary) !important; }
#pending-account-play-btn { border-color: var(--border-primary) !important; color: var(--text-tertiary) !important; }
#pending-account-play-btn:hover { border-color: var(--border-secondary) !important; color: var(--text-secondary) !important; background: var(--bg-input) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONNECTION GRACE BOX
   ═══════════════════════════════════════════════════════════════════════════ */
#connection-grace-box { background: var(--bg-secondary) !important; border-color: var(--border-primary) !important; box-shadow: var(--shadow-lg) !important; }
#connection-grace-title { color: var(--text-primary) !important; }
#connection-grace-bar-bg { background: var(--bg-tertiary) !important; }
#connection-grace-msg { color: var(--text-secondary) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   INTERNAL ALERT
   ═══════════════════════════════════════════════════════════════════════════ */
#internal-alert { background-color: var(--accent) !important; box-shadow: 0 4px 12px var(--accent-glow) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT TEXTBOX
   ═══════════════════════════════════════════════════════════════════════════ */
#chat_textbox {
    background: rgba(0,0,0,0.45) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-family: var(--font-main) !important;
}
#chat_textbox:focus {
    background: rgba(0,0,0,0.65) !important;
    border-color: rgba(255,255,255,0.35) !important;
    outline: 2px solid rgba(88,166,255,0.5) !important;
    outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSOLE INGAME (#igc-console) — mantém visual terminal
   ═══════════════════════════════════════════════════════════════════════════ */
/* Estilos do console permanecem nas classes definidas pelo index.php/inline */

/* ═══════════════════════════════════════════════════════════════════════════
   NICK FEEDBACK
   ═══════════════════════════════════════════════════════════════════════════ */
#nick-feedback {
    background: var(--danger-light) !important;
    border: 1px solid rgba(248,81,73,0.28) !important;
    color: var(--danger) !important;
    border-radius: var(--radius-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTRUCOES + FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
#instructions { color: var(--text-tertiary) !important; font-size: 12px !important; line-height: 1.6 !important; }
#instructions b { color: var(--accent) !important; font-weight: 700 !important; }
#instructions hr { border-color: var(--border-primary) !important; margin: 10px 0 !important; }
#footer { color: var(--text-muted) !important; font-size: 12px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   ZOOM / SKIN PREVIEW
   ═══════════════════════════════════════════════════════════════════════════ */
.zoom-effect img { border-radius: var(--radius-md) !important; box-shadow: var(--shadow-md) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   DISCORD + WHATSAPP — animação discreta (só no hover)
   ═══════════════════════════════════════════════════════════════════════════ */
#discord-button a.discord-btn  { animation: none !important; }
#whatsapp-button a.whatsapp-btn{ animation: none !important; }
#discord-button a.discord-btn:hover  { animation: pulseDiscordOnce 0.4s ease !important; }
#whatsapp-button a.whatsapp-btn:hover{ animation: pulseWhatsOnce 0.4s ease !important; }
@keyframes pulseDiscordOnce {
    0%   { box-shadow: 0 0 0 0 rgba(88,101,242,0.7); }
    100% { box-shadow: 0 0 0 10px rgba(88,101,242,0); }
}
@keyframes pulseWhatsOnce {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.7); }
    100% { box-shadow: 0 0 0 10px rgba(37,211,102,0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOCO VISÍVEL — acessibilidade
   ═══════════════════════════════════════════════════════════════════════════ */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBARS ESTILIZADAS
   ═══════════════════════════════════════════════════════════════════════════ */
* { scrollbar-width: thin; scrollbar-color: var(--border-secondary) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO HALO — luz branca natural atrás da logomarca no menu principal.
   Escopado em #helloDialog para NÃO afetar previews de skin ou outros
   usos do .zoom-effect no resto da página.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Permitir que o brilho ultrapasse as bordas do container da logo */
#helloDialog .zoom-effect {
    position: relative;
    overflow: visible;
    padding-bottom: 2px;
    margin-bottom: 4px;
}

/* 2. Bola branca removida — apenas drop-shadow na imagem */
#helloDialog .zoom-effect::before {
    display: none;
}

#helloDialog .zoom-effect:hover::before {
    display: none;
}

/* 3. Linha divisória luminosa abaixo da logo */
#helloDialog .zoom-effect::after {
    content: '';
    display: block;
    margin: 10px auto 0;
    width: 52%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.12) 12%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(255, 255, 255, 0.12) 88%,
        transparent
    );
    pointer-events: none;
}

/* 4. Logo — brilho via drop-shadow (respeita transparência da imagem PNG) */
#helloDialog .zoom-effect img {
    position: relative !important;
    z-index: 1;
    /* Remove box-shadow do tema (não respeita cantos transparentes do PNG) */
    box-shadow: none !important;
    filter:
        drop-shadow(0 0  5px rgba(255, 255, 255, 0.90))
        drop-shadow(0 0 16px rgba(255, 255, 255, 0.60))
        drop-shadow(0 0 34px rgba(255, 255, 255, 0.30)) !important;
    /* Mantém a transição de transform:scale(1.2) do hover original */
    transition: filter 0.40s ease, transform 0.50s ease !important;
}

/* 5. Hover — brilho mais intenso */
#helloDialog .zoom-effect:hover img {
    filter:
        drop-shadow(0 0  8px rgba(255, 255, 255, 1.00))
        drop-shadow(0 0 26px rgba(255, 255, 255, 0.80))
        drop-shadow(0 0 52px rgba(255, 255, 255, 0.50)) !important;
}