/* ============================================
   TABULEIRO CHAMPIONS - DESIGN SYSTEM v2.0
   Visual: Arena 3D Gamer (Azul Escuro + Dourado)
   ============================================ */

:root {
    /* Cores principais */
    --bg-deep: #060d1f;
    --bg-primary: #0a1628;
    --bg-secondary: #0f1f3d;
    --bg-tertiary: #152a4f;
    --bg-card: rgba(15, 31, 61, 0.9);
    --bg-card-hover: rgba(21, 42, 79, 0.95);
    
    /* Dourado (cor da marca) */
    --gold: #fbbf24;
    --gold-dark: #f59e0b;
    --gold-light: #fcd34d;
    --gold-glow: rgba(251, 191, 36, 0.3);
    
    /* Verde (botões Jogar, sucesso) */
    --green: #10b981;
    --green-dark: #059669;
    --green-light: #34d399;
    
    /* Vermelho */
    --red: #ef4444;
    --red-dark: #dc2626;
    
    /* Azul */
    --blue: #3b82f6;
    --blue-light: #60a5fa;
    
    /* Laranja */
    --orange: #f97316;
    
    /* Roxo */
    --purple: #8b5cf6;
    
    /* Texto */
    --text-primary: #ffffff;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-muted: #64748b;
    
    /* Bordas */
    --border: rgba(251, 191, 36, 0.15);
    --border-hover: rgba(251, 191, 36, 0.4);
    --border-gold: rgba(251, 191, 36, 0.3);
    
    /* Gradientes */
    --gradient-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-bg: linear-gradient(135deg, #0a1628 0%, #0f1f3d 100%);
    
    /* Espaçamento */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;
    
    /* Transições */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
}

/* ============================================
   RESET E BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-deep);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* Fundo com padrão sutil */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(251, 191, 36, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 50%),
        var(--bg-deep);
    z-index: -1;
}

a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; height: auto; }

/* ============================================
   TIPOGRAFIA
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

.text-gold { background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-green { color: var(--green); }

/* ============================================
   CONTAINER
   ============================================ */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ============================================
   HEADER / NAVBAR
   ============================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(6, 13, 31, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    gap: var(--space-lg);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.logo:hover { transform: scale(1.05); }

.logo-crown {
    font-size: 2.2rem;
    filter: drop-shadow(0 0 10px var(--gold-glow));
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-text .brand {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: 0.1em;
}

.logo-text .sub {
    font-size: 0.65rem;
    color: var(--gold);
    letter-spacing: 0.3em;
    font-weight: 700;
}

/* Menu Desktop */
.nav-main {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.nav-link {
    padding: 10px 16px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--gold);
    background: rgba(251, 191, 36, 0.1);
}

.nav-link.active {
    color: var(--gold);
    border-bottom: 2px solid var(--gold);
}

/* Search Bar */
.search-bar {
    flex: 1;
    max-width: 400px;
    position: relative;
}

.search-bar input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.search-bar input:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--bg-tertiary);
}

.search-bar::before {
    content: '🔍';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.header-icon-btn {
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    position: relative;
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
}

.header-icon-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--gold);
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.user-profile:hover { border-color: var(--gold); }

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #000;
    font-size: 0.9rem;
}

.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.user-name { font-weight: 700; font-size: 0.85rem; }
.user-level { font-size: 0.7rem; color: var(--text-tertiary); }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    cursor: pointer;
    z-index: 1001;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.hamburger span {
    width: 24px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
    transition: all var(--transition-base);
}

.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    display: none !important;
    position: fixed;
    inset: 0;
    background: rgba(6, 13, 31, 0.9);
    backdrop-filter: blur(10px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.mobile-menu-overlay.active {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
}

/* Mobile Menu Drawer */
.mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    z-index: 1000;
    transition: right var(--transition-base);
    overflow-y: auto;
    padding: 80px var(--space-lg) var(--space-lg);
}

.mobile-menu.active { right: 0; }

.mobile-menu-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(251, 191, 36, 0.1);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.mobile-menu-link {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    border: 1px solid transparent;
    text-decoration: none;
}

.mobile-menu-link:hover,
.mobile-menu-link.active {
    background: rgba(251, 191, 36, 0.1);
    color: var(--gold);
    border-color: var(--border-gold);
    transform: translateX(-4px);
}

.mobile-menu-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: var(--space-md) 0;
}

.mobile-menu-section {
    margin-bottom: var(--space-xl);
}

.mobile-menu-section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
    padding: 0 var(--space-md);
    font-weight: 700;
}

/* ============================================
   BOTÕES
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 700;
    transition: all var(--transition-fast);
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}

.btn-gold {
    background: var(--gradient-gold);
    color: #000;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.6);
    color: #000;
}

.btn-green {
    background: var(--gradient-green);
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.btn-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6);
    color: #fff;
}

.btn-outline-gold {
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
}

.btn-outline-gold:hover {
    background: var(--gold);
    color: #000;
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--gold);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.6);
    color: white;
}

.btn-sm { padding: 8px 16px; font-size: 0.8rem; }
.btn-lg { padding: 16px 32px; font-size: 1rem; }

/* ============================================
   BADGES
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.badge-green { background: rgba(16, 185, 129, 0.2); color: var(--green); border-color: rgba(16, 185, 129, 0.3); }
.badge-orange { background: rgba(249, 115, 22, 0.2); color: var(--orange); border-color: rgba(249, 115, 22, 0.3); }
.badge-gold { background: rgba(251, 191, 36, 0.2); color: var(--gold); border-color: rgba(251, 191, 36, 0.3); }
.badge-blue { background: rgba(59, 130, 246, 0.2); color: var(--blue); border-color: rgba(59, 130, 246, 0.3); }
.badge-red { background: rgba(239, 68, 68, 0.2); color: var(--red); border-color: rgba(239, 68, 68, 0.3); }
.badge-purple { background: rgba(139, 92, 246, 0.2); color: var(--purple); border-color: rgba(139, 92, 246, 0.3); }

/* ============================================
   HERO BANNER
   ============================================ */
.hero-banner {
    position: relative;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.95) 0%, rgba(15, 31, 61, 0.9) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl);
    margin-bottom: var(--space-2xl);
    overflow: hidden;
    border: 1px solid var(--border);
    min-height: 300px;
    display: flex;
    align-items: center;
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 70% 50%, rgba(251, 191, 36, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 30% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

.hero-content { position: relative; z-index: 1; max-width: 600px; }

.hero-subtitle {
    font-size: 0.9rem;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.hero-title .highlight {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    max-width: 500px;
}

.hero-visual {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15rem;
    opacity: 0.3;
    filter: drop-shadow(0 0 30px var(--gold-glow));
    pointer-events: none;
}

/* ============================================
   SEÇÕES
   ============================================ */
.section { margin-bottom: var(--space-2xl); }

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: 1.5rem;
    font-weight: 800;
}

.section-title-icon { font-size: 1.8rem; }

.section-link {
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-fast);
}

.section-link:hover {
    color: var(--gold-light);
    gap: 8px;
}

/* ============================================
   CARROSSEL CAMPEONATOS
   ============================================ */
.championships-scroll {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    padding-bottom: var(--space-md);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.championships-scroll::-webkit-scrollbar { height: 6px; }
.championships-scroll::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 3px; }
.championships-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

.championship-card {
    flex-shrink: 0;
    width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    scroll-snap-align: start;
    position: relative;
}

.championship-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.2);
}

.championship-image {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    position: relative;
    overflow: hidden;
}

.championship-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.8) 100%);
}

.championship-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

.championship-body { padding: var(--space-md); }

.championship-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.championship-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-md);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.championship-info div { display: flex; align-items: center; gap: 6px; }

/* ============================================
   GRID DE JOGOS
   ============================================ */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
}

.game-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    position: relative;
    text-decoration: none;
    color: inherit;
}

.game-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.2);
}

.game-image {
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    position: relative;
    overflow: hidden;
}

.game-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6) 100%);
}

.game-body {
    padding: var(--space-md);
    text-align: center;
}

.game-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.game-players {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* ============================================
   RANKING TABLE
   ============================================ */
.ranking-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ranking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border);
    background: rgba(251, 191, 36, 0.05);
}

.ranking-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.1rem;
    font-weight: 800;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}

.ranking-table td {
    padding: 12px 16px;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ranking-table tr:hover td { background: rgba(251, 191, 36, 0.05); }

.rank-cell { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.rank-medal { font-size: 1.2rem; }
.rank-1 { color: var(--gold); }
.rank-2 { color: #c0c0c0; }
.rank-3 { color: #cd7f32; }

.player-cell { display: flex; align-items: center; gap: 10px; }

.player-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid var(--border);
}

.level-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
}

.level-badge.gold { background: rgba(251, 191, 36, 0.2); color: var(--gold); border: 1px solid var(--gold); }
.level-badge.blue { background: rgba(59, 130, 246, 0.2); color: var(--blue); border: 1px solid var(--blue); }
.level-badge.red { background: rgba(239, 68, 68, 0.2); color: var(--red); border: 1px solid var(--red); }
.level-badge.purple { background: rgba(139, 92, 246, 0.2); color: var(--purple); border: 1px solid var(--purple); }

/* ============================================
   LAYOUT COM SIDEBAR
   ============================================ */
.page-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--space-xl);
    align-items: start;
}

.sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.next-championship {
    border-color: var(--border-gold);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, var(--bg-card) 100%);
}

.next-championship-label {
    font-size: 0.75rem;
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: 6px;
}

.next-championship-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: var(--space-sm);
}

.next-championship-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    padding: var(--space-2xl) 0 var(--space-lg);
    margin-top: var(--space-3xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.footer-brand p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: var(--space-md);
    max-width: 300px;
}

.footer-title {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
    color: var(--gold);
}

.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.footer-links a:hover {
    color: var(--gold);
    padding-left: 4px;
}

.footer-bottom {
    padding-top: var(--space-xl);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

.footer-social { display: flex; gap: var(--space-sm); }

.footer-social a {
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: 1.1rem;
}

.footer-social a:hover {
    background: var(--gold);
    border-color: var(--gold);
    transform: translateY(-3px);
}

/* ============================================
   BOTTOM NAVIGATION (MOBILE)
   ============================================ */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(6, 13, 31, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 8px 0;
    z-index: 999;
    height: 65px;
}

.bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    color: var(--text-tertiary);
    font-size: 0.65rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    flex: 1;
    text-decoration: none;
}

.bottom-nav-item.active { color: var(--gold); }
.bottom-nav-item .icon { font-size: 1.2rem; }

/* ============================================
   FLASH MESSAGES
   ============================================ */
.flash {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border: 1px solid;
}

.flash-error {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

.flash-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--green-light);
    border-color: rgba(16, 185, 129, 0.4);
}

/* ============================================
   FORMULÁRIOS
   ============================================ */
.form-group { margin-bottom: var(--space-md); }

.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 16px; /* Previne zoom no iOS */
    transition: all var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--bg-tertiary);
}

.form-input::placeholder { color: var(--text-muted); }

/* ============================================
   CARDS GERAIS
   ============================================ */
.card, .card-flat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all var(--transition-base);
}

.card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

/* ============================================
   SCROLLBAR CUSTOMIZADA
   ============================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* ============================================
   RESPONSIVIDADE COMPLETA - MOBILE
   ============================================ */

/* Tablets e telas médias */
@media (max-width: 1024px) {
    .nav-main, .search-bar { display: none; }
    .hamburger { display: flex; }
    .mobile-menu-overlay, .mobile-menu { display: block; }
    
    .page-layout {
        grid-template-columns: 1fr;
    }
    
    .sidebar {
        position: static;
    }
    
    .user-info { display: none; }
    
    .games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile - até 768px */
@media (max-width: 768px) {
    * { max-width: 100% !important; }
    
    .container { padding: 0 12px !important; }
    
    /* Header compacto */
    .header-inner {
        height: 60px !important;
        padding: 0 10px !important;
    }
    
    .logo-text .brand { font-size: 1rem !important; }
    .logo-text .sub { font-size: 0.5rem !important; }
    .logo-crown { font-size: 1.5rem !important; }
    
    .search-bar { display: none !important; }
    .user-info { display: none !important; }
    
    /* Banner Carousel Mobile */
    .banner-carousel {
        margin: 0 -12px 16px -12px !important;
        padding: 0 12px;
    }
    
    .banner-slide img {
        border-radius: 0 !important;
        height: auto;
        max-height: 200px;
        object-fit: cover;
    }
    
    .banner-prev, .banner-next {
        display: none !important;
    }
    
    /* Seções */
    .section {
        margin-bottom: 24px !important;
        padding: 0 !important;
    }
    
    .section-header {
        margin-bottom: 16px !important;
        padding: 0 !important;
    }
    
    .section-title { font-size: 1.2rem !important; }
    
    /* Carrossel de campeonatos */
    .championships-scroll {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 12px !important;
        padding: 0 0 16px 0 !important;
        margin: 0 -12px !important;
        padding-left: 12px !important;
    }
    
    .championships-scroll::-webkit-scrollbar { height: 4px !important; }
    
    .championship-card {
        flex: 0 0 260px !important;
        width: 260px !important;
        min-width: 260px !important;
        scroll-snap-align: start !important;
    }
    
    .championship-image {
        aspect-ratio: 16/9 !important;
        font-size: 2rem !important;
    }
    
    .championship-body { padding: 12px !important; }
    .championship-title { font-size: 0.9rem !important; margin-bottom: 8px !important; }
    .championship-info { font-size: 0.75rem !important; margin-bottom: 12px !important; }
    
    /* Grid de Jogos - 2 colunas */
    .games-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 0 -6px !important;
    }
    
    .game-card { min-width: 0 !important; margin: 0 !important; }
    .game-image { aspect-ratio: 1/1 !important; font-size: 2.5rem !important; }
    .game-body { padding: 10px !important; }
    .game-title { font-size: 0.85rem !important; margin-bottom: 4px !important; }
    .game-players { font-size: 0.7rem !important; margin-bottom: 8px !important; }
    .game-card .btn { font-size: 0.75rem !important; padding: 8px 12px !important; }
    
    /* Layout com Sidebar - Empilhar */
    .page-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    
    .main-content { width: 100% !important; order: 1 !important; }
    .sidebar {
        position: static !important;
        width: 100% !important;
        order: 2 !important;
        margin-top: 0 !important;
    }
    
    /* Cards da Sidebar */
    .sidebar-card {
        margin-bottom: 16px !important;
        padding: 16px !important;
    }
    
    .ranking-container { margin-bottom: 16px !important; }
    
    /* Tabela de Ranking - Scroll horizontal */
    .ranking-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        font-size: 0.75rem !important;
    }
    
    .ranking-table thead,
    .ranking-table tbody {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
    }
    
    .ranking-table th,
    .ranking-table td {
        padding: 8px 6px !important;
        font-size: 0.75rem !important;
    }
    
    .player-avatar-small {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }
    
    .level-badge { font-size: 0.65rem !important; padding: 2px 6px !important; }
    
    /* Carteira */
    .wallet-balance { font-size: 1.8rem !important; }
    .sidebar-card .btn { font-size: 0.75rem !important; padding: 8px 12px !important; }
    
    /* Próximo Campeonato */
    .next-championship-label { font-size: 0.7rem !important; }
    .next-championship-title { font-size: 1rem !important; }
    .next-championship-date { font-size: 0.75rem !important; }
    
    /* Bottom Navigation */
    .bottom-nav {
        display: block !important;
        padding: 8px 0 !important;
        height: 65px !important;
    }
    
    .bottom-nav-item {
        padding: 4px 8px !important;
        font-size: 0.65rem !important;
    }
    
    .bottom-nav-item .icon { font-size: 1.2rem !important; }
    
    /* Botões */
    .btn { font-size: 0.85rem !important; padding: 10px 16px !important; }
    .btn-sm { font-size: 0.75rem !important; padding: 6px 12px !important; }
    .btn-lg { font-size: 0.9rem !important; padding: 12px 24px !important; }
    
    /* Hero Banner Mobile */
    .hero-banner {
        padding: 20px 16px !important;
        min-height: auto !important;
        margin: 0 -12px 20px -12px !important;
        width: calc(100% + 24px) !important;
        max-width: none !important;
        border-radius: 0 !important;
    }
    
    .hero-content { max-width: 100% !important; }
    .hero-subtitle { font-size: 0.75rem !important; }
    .hero-title { font-size: 1.5rem !important; line-height: 1.2 !important; }
    .hero-description { font-size: 0.9rem !important; margin-bottom: 16px !important; }
    .hero-visual { display: none !important; }
    
    /* Formulários - previne zoom no iOS */
    .form-input { font-size: 16px !important; padding: 12px !important; }
    .form-label { font-size: 0.8rem !important; }
    
    /* Cards */
    .card, .card-flat {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    /* Flash messages */
    .flash {
        margin: 12px !important;
        padding: 12px !important;
        font-size: 0.85rem !important;
    }
    
    /* Footer */
    .footer {
        padding: 32px 0 80px 0 !important;
    }
    
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .footer-brand p { max-width: 100% !important; }
}

/* Telas muito pequenas */
@media (max-width: 480px) {
    .container { padding: 0 8px !important; }
    
    /* Grid de jogos - 1 coluna com layout horizontal */
    .games-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .game-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    
    .game-image {
        width: 60px !important;
        height: 60px !important;
        font-size: 2rem !important;
        flex-shrink: 0 !important;
    }
    
    .game-body {
        flex: 1 !important;
        text-align: left !important;
        padding: 12px !important;
    }
    
    .game-title { font-size: 0.9rem !important; }
    .game-players { font-size: 0.75rem !important; }
    
    /* Championship cards menores */
    .championship-card {
        flex: 0 0 240px !important;
        width: 240px !important;
        min-width: 240px !important;
    }
    
    /* Tabela mais compacta */
    .ranking-table { font-size: 0.7rem !important; }
    .ranking-table th, .ranking-table td { padding: 6px 4px !important; }
}

/* Desktop mantém layout original */
@media (min-width: 1025px) {
    .page-layout {
        grid-template-columns: 1fr 350px !important;
    }
    
    .sidebar {
        position: sticky !important;
        top: 90px !important;
    }
    
    .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    }
}

/* ============================================
   UTILITÁRIOS E PREVENÇÃO DE OVERFLOW
   ============================================ */

/* Prevenir quebra de layout em tabelas */
table {
    max-width: 100% !important;
    table-layout: auto !important;
}

/* Scroll suave */
html { scroll-behavior: smooth !important; }

/* Prevenir zoom em inputs no iOS */
@media screen and (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
}

/* Bloquear scroll quando menu está aberto */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}
/* ============================================
   GAME TABS - PARTIDAS RÁPIDAS POR JOGO
   ============================================ */

.game-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) var(--bg-secondary);
}

.game-tabs::-webkit-scrollbar {
    height: 4px;
}

.game-tabs::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 2px;
}

.game-tabs::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 2px;
}

.game-tab {
    flex: 0 0 auto;
    padding: 10px 16px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.game-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.game-tab:hover::before {
    left: 100%;
}

.game-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.game-tab.active {
    background: var(--gradient-gold);
    color: #000;
    border-color: var(--gold);
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

.game-rooms-container {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quick-match-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.quick-match-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-gold);
    opacity: 0;
    transition: opacity 0.3s;
}

.quick-match-card:hover {
    border-color: var(--gold);
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.15);
}

.quick-match-card:hover::before {
    opacity: 1;
}

/* Mobile adjustments for game tabs */
@media (max-width: 768px) {
    .game-tabs {
        gap: 6px;
        padding-bottom: 10px;
    }
    
    .game-tab {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    
    .game-tab span {
        font-size: 1rem;
    }
    
    .quick-match-card {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .quick-match-card > div:last-child {
        width: 100%;
    }
    
    .quick-match-card .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .game-tab {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
    
    .quick-match-card {
        padding: 10px;
    }
    
    .quick-match-card > div:first-child > div:first-child {
        font-size: 0.9rem;
    }
    
    .quick-match-card > div:first-child > div:last-child {
        font-size: 0.75rem;
    }
}
/* ==========================================================
   TABULEIRO CHAMPIONS — ARENA UI / GLOBAL SHELL v3
   O shell abaixo é aplicado somente às páginas públicas e
   autenticadas que usam as classes .arena-site.
   ========================================================== */
.arena-site {
    --arena-bg: #07090e;
    --arena-bg-2: #0b0e14;
    --arena-panel: #10141b;
    --arena-panel-2: #151a22;
    --arena-line: rgba(255,255,255,.075);
    --arena-line-gold: rgba(251,191,36,.24);
    --arena-muted: #89919f;
    --arena-gold: #f6c64d;
    --arena-gold-2: #ffd96d;
    --arena-green: #22c55e;
    background: var(--arena-bg);
    color: #f7f7f8;
}
.arena-site body { background: var(--arena-bg); }
.arena-site .container { max-width: 1280px; padding-left: 16px; padding-right: 16px; }
.arena-site .site-main { min-height: calc(100vh - 72px); padding-top: 18px; padding-bottom: 42px; }
.arena-site .header.arena-global-header {
    background: rgba(5,7,11,.94);
    border-bottom: 1px solid var(--arena-line);
    box-shadow: 0 8px 30px rgba(0,0,0,.22);
}
.arena-site .header-inner { height: 72px; gap: 14px; }
.arena-site .arena-logo { gap: 9px; }
.arena-site .arena-logo .logo-crown {
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 10px; font-size: 1rem; color: #15110a;
    background: linear-gradient(135deg,#ffe28a,#d99a1f);
    filter: none; box-shadow: 0 7px 22px rgba(246,198,77,.16);
}
.arena-site .arena-logo .brand { font-size: 1.08rem; letter-spacing: .08em; }
.arena-site .arena-logo .sub { font-size: .55rem; letter-spacing: .27em; }
.arena-site .nav-main { gap: 2px; flex: 0 1 auto; }
.arena-site .nav-link {
    padding: 9px 10px; border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; color: #aeb5c1; font-size: .78rem; gap: 5px;
}
.arena-site .nav-link:hover { background: transparent; color: #fff; }
.arena-site .nav-link.active { color: var(--arena-gold-2); border-bottom-color: var(--arena-gold); }
.arena-site .nav-link.quick-link { color: #c9ced7; }
.arena-site .arena-search { max-width: 330px; margin-left: auto; }
.arena-site .arena-search .search-icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: #78808d; font-size: 1rem; z-index: 2;
}
.arena-site .arena-search::before { display: none; }
.arena-site .arena-search input {
    height: 38px; padding-left: 35px; background: #11151c;
    border-color: rgba(255,255,255,.10); font-size: .74rem;
}
.arena-site .arena-search input:focus { border-color: rgba(246,198,77,.45); background: #141922; }
.arena-site .arena-header-actions { gap: 7px; }
.arena-site .header-balance {
    display: flex; align-items: center; gap: 7px; padding: 5px 9px;
    border: 1px solid var(--arena-line-gold); border-radius: 11px; background: rgba(246,198,77,.055);
}
.arena-site .balance-icon { font-size: .75rem; }
.arena-site .balance-copy { display:flex; flex-direction:column; line-height:1.05; }
.arena-site .balance-copy small { color:#7f8793; font-size:.48rem; text-transform:uppercase; letter-spacing:.1em; }
.arena-site .balance-copy strong { color:var(--arena-gold-2); font-size:.74rem; white-space:nowrap; }
.arena-site .header-deposit { min-height:38px; padding:0 12px; font-size:.72rem; }
.arena-site .header-icon-btn { width:38px; height:38px; background:#11151c; border-color:rgba(255,255,255,.08); font-size:.9rem; }
.arena-site .user-profile { padding:4px 9px 4px 4px; background:#11151c; border-color:rgba(255,255,255,.08); }
.arena-site .user-avatar { width:29px; height:29px; font-size:.78rem; }
.arena-site .user-name { font-size:.72rem; }
.arena-site .user-level { font-size:.57rem; }
.arena-site .hamburger { background:#11151c; border-color:rgba(255,255,255,.10); }
.arena-site .site-main > .flash { margin-bottom: 14px; }

/* Home */
.arena-home { width:100%; }
.home-banner-section { margin-bottom: 22px; }
.home-banner {
    position:relative; overflow:hidden; border:1px solid var(--arena-line);
    border-radius:18px; background:#0d1016; box-shadow:0 18px 45px rgba(0,0,0,.25);
}
.home-banner-slide { display:none; }
.home-banner-slide.active { display:block; animation:arenaBannerIn .35s ease; }
.home-banner-slide a { display:block; }
.home-banner-slide img { display:block; width:100%; aspect-ratio:3/1; object-fit:cover; }
.home-banner-empty {
    min-height:230px; display:grid; place-items:center; text-align:center; padding:30px;
    background:radial-gradient(circle at 50% 0%,rgba(246,198,77,.16),transparent 55%),#0e1218;
}
.home-banner-empty span { display:block; font-size:2rem; letter-spacing:.25em; color:var(--arena-gold); }
.home-banner-empty strong { display:block; font-size:clamp(1.4rem,3vw,2.2rem); margin-top:8px; }
.home-banner-empty p { margin:6px 0 0; color:var(--arena-muted); font-size:.78rem; }
.home-banner-dots { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:6px; }
.home-banner-dot { width:7px; height:7px; padding:0; border-radius:99px; background:rgba(255,255,255,.32); cursor:pointer; }
.home-banner-dot.active { width:22px; background:var(--arena-gold); }
@keyframes arenaBannerIn { from{opacity:.55} to{opacity:1} }
.home-section { margin-bottom:28px; scroll-margin-top:88px; }
.arena-site .section-header { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:13px; }
.arena-site .section-title { margin:0; font-size:1.08rem; display:flex; align-items:center; gap:8px; }
.arena-site .section-title-icon { font-size:1.05rem; }
.arena-site .eyebrow { color:#6f7785; font-size:.56rem; text-transform:uppercase; letter-spacing:.13em; font-weight:800; margin-bottom:3px; }
.arena-site .section-link { color:var(--arena-gold-2); font-size:.72rem; font-weight:800; white-space:nowrap; }
.arena-site .section-link:hover { color:#fff; }
.arena-tabs { display:flex; gap:7px; overflow-x:auto; padding:1px 1px 10px; scrollbar-width:none; }
.arena-tabs::-webkit-scrollbar { display:none; }
.arena-tab {
    flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:9px 13px;
    border:1px solid var(--arena-line); border-radius:999px; background:#11151c; color:#9da5b2;
    font-size:.73rem; font-weight:800; transition:.18s ease;
}
.arena-tab:hover { color:#fff; border-color:rgba(246,198,77,.22); }
.arena-tab.active { color:#111; background:linear-gradient(135deg,var(--arena-gold-2),#dfa92c); border-color:transparent; }
.arena-room-panel { animation:arenaFade .2s ease; }
@keyframes arenaFade { from{opacity:.7;transform:translateY(2px)} to{opacity:1;transform:none} }
.room-category { display:flex; align-items:center; gap:9px; color:#d6dae1; font-size:.64rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; margin:11px 0 8px; }
.room-category i { height:1px; flex:1; background:var(--arena-line); }
.quick-room-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.quick-room-card {
    min-width:0; display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:11px 12px; background:linear-gradient(145deg,#11151c,#0e1117);
    border:1px solid var(--arena-line); border-radius:13px; transition:.18s ease;
}
.quick-room-card:hover { transform:translateY(-1px); border-color:rgba(246,198,77,.24); }
.quick-room-info { min-width:0; }
.quick-room-info strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.77rem; }
.quick-room-info div { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; color:#737b88; font-size:.6rem; }
.room-bet { color:var(--arena-gold); font-weight:900; }
.quick-room-card form { margin:0; }
.arena-site .btn { border-radius:10px; font-weight:850; }
.arena-site .btn-green { background:linear-gradient(135deg,#2bd768,#15a94f); color:#04130a; }
.arena-site .btn-gold { background:linear-gradient(135deg,#ffdc73,#d99b22); color:#171107; }
.arena-site .btn-secondary { background:#171b23; border-color:rgba(255,255,255,.08); color:#fff; }
.arena-site .btn-sm { padding:7px 12px; font-size:.69rem; }
.home-games-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.home-game-card { overflow:hidden; background:#10141b; border:1px solid var(--arena-line); border-radius:15px; transition:.2s ease; }
.home-game-card:hover { transform:translateY(-3px); border-color:rgba(246,198,77,.25); box-shadow:0 14px 30px rgba(0,0,0,.2); }
.home-game-image { aspect-ratio:1.5/1; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 35%,rgba(246,198,77,.15),transparent 55%),#171b23; }
.home-game-image img { width:100%; height:100%; object-fit:cover; }
.home-game-image span { font-size:2.8rem; filter:drop-shadow(0 8px 18px rgba(0,0,0,.4)); }
.home-game-body { padding:10px; }
.home-game-body strong { display:block; font-size:.76rem; }
.home-game-body small { display:block; margin:4px 0 9px; color:#777f8d; font-size:.59rem; }
.home-game-body .btn { width:100%; text-align:center; }
.home-tournament-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.home-tournament-card { overflow:hidden; background:#10141b; border:1px solid var(--arena-line); border-radius:15px; }
.tournament-cover { min-height:120px; position:relative; display:grid; place-items:center; background:radial-gradient(circle at 50% 35%,rgba(246,198,77,.16),transparent 58%),#171b23; }
.tournament-cover > span { font-size:2.6rem; }
.tournament-cover b { position:absolute; top:8px; right:8px; padding:5px 8px; border-radius:999px; background:rgba(246,198,77,.13); border:1px solid rgba(246,198,77,.2); color:var(--arena-gold-2); font-size:.54rem; }
.tournament-body { padding:11px; }
.tournament-body > strong { display:block; font-size:.77rem; line-height:1.3; }
.tournament-meta { display:flex; justify-content:space-between; gap:8px; margin:7px 0 10px; color:#78808d; font-size:.6rem; }
.tournament-meta span:last-child { color:var(--arena-gold); font-weight:900; }
.home-ranking { overflow:hidden; background:#10141b; border:1px solid var(--arena-line); border-radius:15px; }
.home-ranking table { width:100%; border-collapse:collapse; min-width:580px; }
.home-ranking th { padding:10px 12px; color:#68717f; font-size:.57rem; text-transform:uppercase; letter-spacing:.07em; text-align:left; border-bottom:1px solid var(--arena-line); }
.home-ranking td { padding:10px 12px; font-size:.67rem; border-bottom:1px solid rgba(255,255,255,.045); }
.home-ranking tr:last-child td { border-bottom:0; }
.home-ranking tbody tr:hover td { background:rgba(246,198,77,.025); }
.rank-position { font-weight:900; width:45px; }
.rank-player { display:flex; align-items:center; gap:8px; }
.rank-avatar { width:27px; height:27px; border-radius:50%; display:grid; place-items:center; background:#252b35; font-size:.65rem; font-weight:900; }
.positive { color:#28d568; font-weight:800; }
.negative { color:#ef6666; font-weight:800; }
.points { color:var(--arena-gold); font-weight:900; }
.empty-state { padding:28px; color:#7e8693; text-align:center; border:1px dashed var(--arena-line); border-radius:13px; }
.empty-table { text-align:center; color:#7e8693; padding:25px !important; }
.arena-site .arena-global-footer { background:#080a0f; border-top:1px solid var(--arena-line); margin-top:10px; padding-top:34px; }
.arena-site .arena-global-footer .footer-grid { grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; }
.arena-site .arena-global-footer .footer-title { color:var(--arena-gold); font-size:.65rem; }
.arena-site .arena-global-footer .footer-links { gap:6px; }
.arena-site .arena-global-footer .footer-links a { color:#858d9a; font-size:.72rem; }
.arena-site .arena-global-footer .footer-links a:hover { color:#fff; }
.arena-site .arena-global-footer .footer-brand p { color:#777f8d; font-size:.72rem; max-width:330px; }
.arena-site .arena-global-footer .footer-social a { width:34px; height:34px; font-size:.8rem; }
.arena-site .mobile-menu-overlay { background:rgba(0,0,0,.72); }
.arena-site .mobile-menu { background:#0b0e14; border-left-color:var(--arena-line); }
.arena-site .mobile-menu-profile { background:#12161e; border-color:var(--arena-line); }
.mobile-avatar { flex:0 0 auto; }
.mobile-menu-profile small { display:block; color:#777f8c; font-size:.62rem; margin-top:2px; }
.mobile-balance { display:block; color:var(--arena-gold); font-size:.72rem; font-weight:800; margin-top:5px; }
.mobile-wallet-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.mobile-wallet-actions .btn { width:100%; text-align:center; }
.mobile-menu-link b { margin-left:auto; background:var(--red); color:#fff; font-size:.58rem; padding:2px 6px; border-radius:999px; }
.mobile-menu-link.admin-link { color:var(--arena-gold); }
.mobile-menu-link.logout-link { width:100%; color:#f06b6b; }
.mobile-menu-brand { display:flex; align-items:center; gap:9px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--arena-line); }
.public-mobile-menu .mobile-menu-nav { margin-bottom:18px; }
.mobile-auth-actions { display:grid; gap:8px; border-top:1px solid var(--arena-line); padding-top:18px; }
.mobile-auth-actions .btn { width:100%; text-align:center; }
.arena-site .bottom-nav { background:rgba(7,9,14,.98); border-top-color:var(--arena-line); }
.arena-site .bottom-nav-item { font-size:.6rem; color:#777f8d; }
.arena-site .bottom-nav-item.active { color:var(--arena-gold); }
.arena-site .bottom-nav-item .icon { font-size:1.05rem; }

@media (max-width:1100px) {
    .arena-site .nav-link { padding-left:7px; padding-right:7px; }
    .arena-site .nav-link span { display:none; }
    .arena-site .arena-search { max-width:260px; }
    .quick-room-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
    .arena-site .header-inner { height:62px; }
    .arena-site .nav-main, .arena-site .arena-search { display:none; }
    .arena-site .hamburger { display:flex; }
    .arena-site .header-balance { padding:4px 7px; }
    .arena-site .header-deposit { padding:0 9px; }
    .arena-site .user-profile { display:none; }
    .arena-site .header-icon-btn { display:none; }
    .arena-site .site-main { padding-top:10px; padding-bottom:80px; }
    .home-banner { border-radius:14px; }
    .home-banner-slide img { aspect-ratio:2.05/1; }
    .home-games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .home-tournament-grid { display:flex; overflow-x:auto; gap:9px; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:3px; }
    .home-tournament-grid::-webkit-scrollbar { display:none; }
    .home-tournament-card { min-width:255px; scroll-snap-align:start; }
    .arena-site .arena-global-footer { padding-bottom:78px; }
    .arena-site .arena-global-footer .footer-grid { grid-template-columns:1fr 1fr; gap:22px; }
}
@media (max-width:560px) {
    .arena-site .container { padding-left:10px; padding-right:10px; }
    .arena-site .logo-text .brand { font-size:.92rem; }
    .arena-site .logo-text .sub { font-size:.48rem; }
    .arena-site .arena-logo .logo-crown { width:32px; height:32px; }
    .arena-site .header-actions { gap:5px; }
    .arena-site .header-balance { max-width:105px; }
    .arena-site .balance-copy strong { font-size:.66rem; overflow:hidden; text-overflow:ellipsis; }
    .arena-site .header-deposit { font-size:.63rem; min-height:36px; }
    .arena-site .home-section { margin-bottom:23px; }
    .arena-site .section-title { font-size:.98rem; }
    .home-banner-empty { min-height:170px; }
    .quick-room-grid { grid-template-columns:1fr; }
    .quick-room-card { padding:10px; }
    .home-games-grid { gap:8px; }
    .home-game-image { aspect-ratio:1.25/1; }
    .home-game-image span { font-size:2.2rem; }
    .home-game-body { padding:9px; }
    .home-game-body strong { font-size:.7rem; }
    .home-game-body small { font-size:.56rem; }
    .home-ranking { overflow-x:auto; }
    .home-ranking table { min-width:560px; }
    .arena-site .arena-global-footer .footer-grid { grid-template-columns:1fr; gap:18px; }
    .arena-site .arena-global-footer .footer-bottom { align-items:flex-start; flex-direction:column; }
}


/* Auth pages use the same arena identity without inheriting the site shell. */
.arena-auth-page { background:#07090e; }
.arena-auth-page .auth-wrapper {
    min-height:100vh;
    padding:24px 14px;
    background:
        radial-gradient(circle at 50% 0%, rgba(246,198,77,.12), transparent 38%),
        radial-gradient(circle at 15% 85%, rgba(34,197,94,.035), transparent 35%),
        #07090e;
}
.arena-auth-page .auth-container { max-width:440px; }
.arena-auth-page .auth-back { color:#7f8794; }
.arena-auth-page .auth-back:hover { color:var(--gold); }
.arena-auth-page .auth-logo { margin-bottom:20px; }
.arena-auth-page .auth-logo .logo-crown {
    width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
    font-size:1.1rem; color:#15110a; background:linear-gradient(135deg,#ffe28a,#d99a1f);
}
.arena-auth-page .auth-logo .brand { font-size:1.2rem; }
.arena-auth-page .auth-logo .sub { font-size:.56rem; }
.arena-auth-page .auth-title { font-size:1.7rem; }
.arena-auth-page .auth-subtitle { color:#838b98; font-size:.82rem; }
.arena-auth-page .auth-card {
    background:#10141b; border:1px solid rgba(255,255,255,.075); border-radius:16px;
    box-shadow:0 24px 70px rgba(0,0,0,.42); padding:28px;
}
.arena-auth-page .auth-footer { color:#777f8c; font-size:.78rem; }
.arena-auth-page .auth-footer a { color:#ffd96d; }

.arena-site .public-main { max-width:1280px; margin:0 auto; padding:18px 16px 42px; }

@media (max-width:560px) {
    .arena-auth-page .auth-wrapper { padding:16px 10px; }
    .arena-auth-page .auth-card { padding:21px 17px; }
    .arena-auth-page .auth-title { font-size:1.45rem; }
    .arena-site .public-main { padding-left:10px; padding-right:10px; padding-bottom:80px; }
}

/* ==========================================================
   GAME LOBBY — alinhado ao Arena UI global
   ========================================================== */
.arena-site .game-lobby-page{width:100%;max-width:1180px;margin:0 auto;padding:4px 0 28px}
.game-lobby-breadcrumb{display:flex;align-items:center;gap:8px;margin:4px 0 14px;color:#68717f;font-size:.68rem}
.game-lobby-breadcrumb a{color:#aeb5c1;text-decoration:none}.game-lobby-breadcrumb a:hover{color:var(--arena-gold)}
.game-lobby-breadcrumb strong{color:#d9dde4;font-weight:800}
.game-lobby-hero{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px;border:1px solid var(--arena-line);border-radius:18px;background:radial-gradient(circle at 8% 20%,rgba(246,198,77,.10),transparent 34%),linear-gradient(145deg,#11151c,#0c0f15);box-shadow:0 16px 40px rgba(0,0,0,.18);margin-bottom:14px}
.game-lobby-hero-icon{width:68px;height:68px;display:grid;place-items:center;border-radius:16px;background:radial-gradient(circle at 35% 25%,#ffe28a,#d99b22);font-size:2.4rem;box-shadow:0 12px 28px rgba(246,198,77,.16)}
.game-lobby-hero-copy h1{margin:1px 0 5px;font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:900}.game-lobby-hero-copy p{margin:0;color:#7f8794;font-size:.72rem;max-width:650px;line-height:1.55}
.game-lobby-balance{min-width:150px;text-align:right;padding-left:14px;border-left:1px solid var(--arena-line)}.game-lobby-balance small{display:block;color:#68717f;font-size:.5rem;letter-spacing:.1em;font-weight:900}.game-lobby-balance strong{display:block;color:var(--arena-gold-2);font-size:.9rem;margin:3px 0 6px}.game-lobby-balance a{font-size:.63rem;color:var(--arena-gold);font-weight:800;text-decoration:none}
.game-mode-tabs{display:flex;gap:7px;overflow-x:auto;padding:1px 1px 11px;scrollbar-width:none}.game-mode-tabs::-webkit-scrollbar{display:none}
.game-mode-tab{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:9px 13px;border:1px solid var(--arena-line);border-radius:999px;background:#11151c;color:#9da5b2;text-decoration:none;font-size:.68rem;font-weight:850;transition:.18s ease}.game-mode-tab:hover{color:#fff;border-color:rgba(246,198,77,.24)}.game-mode-tab.active{color:#111;background:linear-gradient(135deg,var(--arena-gold-2),#dfa92c);border-color:transparent}.game-mode-tab.challenge.active{background:linear-gradient(135deg,#7db7ff,#3b82f6);color:#06111f}.game-mode-tab.tournament.active{background:linear-gradient(135deg,#d9b7ff,#9b5de5);color:#180c24}
.game-lobby-section{margin-top:8px}.lobby-section-heading{display:flex;align-items:center;justify-content:space-between;margin:10px 0 13px}.lobby-section-heading h2{margin:1px 0 0;font-size:1.02rem}.lobby-heading-icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--arena-line-gold);border-radius:11px;background:rgba(246,198,77,.055);font-size:1rem}
.standard-room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.standard-room-card{overflow:hidden;border:1px solid var(--arena-line);border-radius:15px;background:linear-gradient(145deg,#11151c,#0e1117);transition:.18s ease}.standard-room-card:hover{transform:translateY(-2px);border-color:rgba(246,198,77,.25);box-shadow:0 14px 30px rgba(0,0,0,.18)}.standard-room-top{height:84px;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(246,198,77,.15),transparent 58%),#171b23}.standard-room-icon{font-size:2.2rem;filter:drop-shadow(0 8px 15px rgba(0,0,0,.35))}.mode-pill{position:absolute;right:8px;top:8px;padding:5px 8px;border-radius:999px;font-size:.51rem;font-weight:900;background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.18)}.mode-pill.arena{color:var(--arena-gold);background:rgba(246,198,77,.10);border-color:rgba(246,198,77,.2)}
.standard-room-body{padding:12px}.standard-room-body h3{margin:0;font-size:.78rem}.standard-room-body p{min-height:31px;margin:5px 0 10px;color:#777f8d;font-size:.6rem;line-height:1.45}.standard-room-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}.standard-room-stats span{padding:7px;border:1px solid rgba(255,255,255,.05);border-radius:9px;background:#0d1016}.standard-room-stats small{display:block;color:#68717f;font-size:.49rem;text-transform:uppercase}.standard-room-stats b{display:block;color:var(--arena-gold);font-size:.65rem;margin-top:2px}.standard-room-body .btn{width:100%;text-align:center}.btn-outline-gold{background:transparent!important;color:var(--arena-gold)!important;border-color:rgba(246,198,77,.3)!important}
.arena-notice{display:flex;align-items:center;gap:10px;padding:11px 13px;margin-bottom:10px;border:1px solid rgba(246,198,77,.18);border-radius:12px;background:rgba(246,198,77,.045)}.arena-notice>span{font-size:1.5rem}.arena-notice strong{font-size:.72rem;color:var(--arena-gold)}.arena-notice p{margin:3px 0 0;color:#777f8d;font-size:.6rem}
.lobby-card{border:1px solid var(--arena-line);border-radius:16px;background:linear-gradient(145deg,#11151c,#0e1117);padding:16px}.challenge-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:10px}.challenge-create-card{background:radial-gradient(circle at 0 0,rgba(59,130,246,.08),transparent 38%),linear-gradient(145deg,#11151c,#0e1117)}.lobby-card-icon{font-size:1.7rem;margin-bottom:5px}.lobby-card h3{margin:0;font-size:.85rem}.lobby-card>p,.lobby-card p{color:#777f8d;font-size:.62rem;line-height:1.5}.lobby-form{margin-top:13px}.lobby-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.lobby-form label{display:block;color:#9da5b2;font-size:.59rem;font-weight:800}.lobby-form input{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:9px 10px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:#0b0e14;color:#fff;outline:none}.lobby-form input:focus{border-color:rgba(246,198,77,.35)}.lobby-form small{display:block;margin-top:5px;color:#68717f;font-size:.5rem;font-weight:500}.lobby-form>.btn{width:100%;margin-top:10px}
.lobby-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px}.lobby-card-top p{margin:3px 0 0}.challenge-friends-list{display:flex;flex-direction:column;gap:6px}.challenge-friend{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:7px;border:1px solid rgba(255,255,255,.05);border-radius:10px;background:#0d1016}.friend-avatar-sm{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#343d4c,#161c26);font-size:.65rem;font-weight:900}.challenge-friend strong{display:block;font-size:.66rem}.challenge-friend small{display:block;color:#68717f;font-size:.52rem;margin-top:2px}
.lobby-empty{padding:18px;text-align:center;border:1px dashed var(--arena-line);border-radius:12px}.lobby-empty.large{padding:35px 20px}.lobby-empty>span{display:block;font-size:2.5rem;margin-bottom:7px}.lobby-empty strong{display:block;font-size:.8rem}.lobby-empty p{margin:5px 0 12px;color:#737b88;font-size:.62rem}
.lobby-tournament-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.lobby-tournament-card{overflow:hidden;border:1px solid var(--arena-line);border-radius:14px;background:#10141b}.lobby-tournament-cover{height:100px;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(246,198,77,.15),transparent 60%),#171b23}.lobby-tournament-cover span{font-size:2.3rem}.lobby-tournament-cover b{position:absolute;right:8px;top:8px;padding:4px 7px;border-radius:999px;background:rgba(246,198,77,.12);color:var(--arena-gold);font-size:.48rem}.lobby-tournament-body{padding:10px}.lobby-tournament-body>strong{display:block;font-size:.7rem}.lobby-tournament-meta{display:flex;justify-content:space-between;gap:8px;margin:6px 0 8px;color:#717a88;font-size:.53rem}.lobby-tournament-meta span:last-child{color:var(--arena-gold);font-weight:900}.lobby-progress{height:4px;border-radius:99px;background:#191e27;overflow:hidden}.lobby-progress i{display:block;height:100%;background:linear-gradient(90deg,#d99b22,#ffe28a)}.lobby-tournament-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}.lobby-tournament-foot small{color:#68717f;font-size:.53rem}
@media(max-width:900px){.game-lobby-hero{grid-template-columns:auto 1fr}.game-lobby-balance{grid-column:1/-1;border-left:0;border-top:1px solid var(--arena-line);padding:10px 0 0;text-align:left}.standard-room-grid,.lobby-tournament-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.challenge-layout{grid-template-columns:1fr}}
@media(max-width:560px){.game-lobby-hero{gap:11px;padding:13px;border-radius:14px}.game-lobby-hero-icon{width:50px;height:50px;border-radius:13px;font-size:1.8rem}.game-lobby-hero-copy h1{font-size:1.05rem}.game-lobby-hero-copy p{font-size:.58rem}.game-lobby-balance{display:flex;align-items:center;gap:10px}.game-lobby-balance strong{margin:0}.game-lobby-balance a{margin-left:auto}.standard-room-grid,.lobby-tournament-grid{grid-template-columns:1fr}.lobby-form-grid{grid-template-columns:1fr}.lobby-card{padding:13px}.challenge-friend{grid-template-columns:32px 1fr auto}.game-mode-tab{padding:8px 10px;font-size:.62rem}}

/* ==========================================================
   AMIGOS / PERFIL — camada social do Arena UI
   ========================================================== */
.social-page{width:100%;max-width:1180px;margin:0 auto}.social-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px;padding:22px;border:1px solid var(--arena-line);border-radius:18px;background:radial-gradient(circle at 5% 10%,rgba(246,198,77,.10),transparent 35%),linear-gradient(145deg,#11151c,#0c0f15)}.social-hero h1{margin:2px 0 5px;font-size:1.7rem}.social-hero p{margin:0;color:#7f8794;font-size:.72rem}.social-hero-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:16px;background:rgba(246,198,77,.08);border:1px solid var(--arena-line-gold);font-size:2rem}.friends-search-card{padding:10px;margin-bottom:18px;background:#10141b;border-color:var(--arena-line)}.friends-search-form{display:flex;gap:8px}.friends-search-input{flex:1;position:relative;display:flex;align-items:center}.friends-search-input>span{position:absolute;left:12px;color:#68717f}.friends-search-input input{width:100%;box-sizing:border-box;height:40px;padding:0 12px 0 32px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0c1016;color:#fff;outline:none;font-size:.72rem}.friends-search-input input:focus{border-color:rgba(246,198,77,.35)}.friends-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.friend-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px;border:1px solid var(--arena-line);border-radius:13px;background:linear-gradient(145deg,#11151c,#0e1117);min-width:0}.friend-card:hover{border-color:rgba(246,198,77,.2)}.friend-main{display:flex;align-items:center;gap:9px;min-width:0;text-decoration:none;color:inherit}.friend-avatar{position:relative;width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#343d4c,#161c26);font-size:.8rem;font-weight:900}.friend-avatar img{width:100%;height:100%;object-fit:cover}.friend-copy{min-width:0}.friend-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem}.friend-copy small{display:block;margin-top:3px;color:#68717f;font-size:.55rem}.friend-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:0 0 auto}.friend-actions form{margin:0}.friend-actions.two{display:grid;grid-template-columns:1fr 1fr}.friend-status{display:inline-flex;align-items:center;padding:6px 8px;border-radius:8px;background:#171b23;color:#7f8794;font-size:.52rem;font-weight:800;white-space:nowrap}.friend-status.accepted{color:#49dd7d;background:rgba(34,197,94,.08)}.friend-status.pending{color:var(--arena-gold);background:rgba(246,198,77,.07)}.section-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:rgba(246,198,77,.10);color:var(--arena-gold);font-size:.55rem}.empty-state-icon{font-size:2rem;margin-bottom:5px}.empty-state strong,.empty-state span{display:block}.empty-state strong{color:#d9dde4;font-size:.76rem}.empty-state span{margin-top:4px;font-size:.62rem}
.profile-avatar-large img{display:block}.profile-social-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:720px){.friends-grid{grid-template-columns:1fr}.social-hero{padding:17px}.social-hero h1{font-size:1.35rem}.social-hero-icon{width:52px;height:52px;font-size:1.6rem}}
@media(max-width:480px){.friends-search-form{flex-direction:column}.friends-search-form .btn{width:100%}.friend-card{align-items:flex-start;flex-direction:column}.friend-actions{width:100%;justify-content:flex-start}.friend-actions .btn{flex:1;text-align:center}.friend-actions.two{width:100%}}

/* =========================================================
   SOCIAL DISCOVERY + CHALLENGE POPUP
   ========================================================= */
.users-page{padding-bottom:40px}
.users-hero{margin-bottom:20px}
.users-toolbar{padding:16px;margin-bottom:18px}
.users-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.users-summary div{display:flex;flex-direction:column}
.users-summary strong{font-size:1.5rem;color:var(--gold)}
.users-summary span{color:var(--text-tertiary);font-size:.85rem}
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.user-discovery-card{background:linear-gradient(145deg,rgba(15,31,61,.95),rgba(8,17,34,.96));border:1px solid var(--border);border-radius:16px;padding:16px;transition:transform .2s,border-color .2s,box-shadow .2s}
.user-discovery-card:hover{transform:translateY(-3px);border-color:var(--border-hover);box-shadow:0 14px 35px rgba(0,0,0,.25)}
.user-discovery-main{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.user-discovery-avatar{width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gradient-gold);color:#111;font-size:1.3rem;font-weight:900;border:2px solid rgba(251,191,36,.35);overflow:hidden}
.user-discovery-avatar img{width:100%;height:100%;object-fit:cover}
.user-discovery-main strong{display:block;font-size:1rem}
.user-discovery-main small{display:block;color:var(--text-tertiary);margin-top:3px}
.user-discovery-actions{display:flex;gap:8px}
.user-discovery-actions form{flex:1}
.user-discovery-actions .btn{width:100%}
.users-pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:24px}
.challenge-popup{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;z-index:5000}
.challenge-popup.active{display:flex}
.challenge-popup-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.78);backdrop-filter:blur(10px)}
.challenge-popup-card{position:relative;width:min(460px,100%);padding:28px;border:1px solid rgba(251,191,36,.55);border-radius:24px;background:linear-gradient(145deg,#101d38,#07101f);box-shadow:0 25px 90px rgba(0,0,0,.55),0 0 45px rgba(251,191,36,.16);text-align:center;animation:challengePop .25s ease}
@keyframes challengePop{from{opacity:0;transform:translateY(15px) scale(.97)}to{opacity:1;transform:none}}
.challenge-popup-close{position:absolute;right:12px;top:8px;color:var(--text-tertiary);font-size:1.8rem;width:36px;height:36px}
.challenge-popup-icon{font-size:3.5rem;margin-bottom:8px;filter:drop-shadow(0 0 16px var(--gold-glow))}
.challenge-popup-card h3{font-size:1.5rem;margin:5px 0 8px}
.challenge-popup-card p{color:var(--text-secondary);margin-bottom:12px}
.challenge-popup-meta{display:inline-flex;padding:8px 14px;border-radius:999px;background:rgba(251,191,36,.1);color:var(--gold);font-weight:700;margin-bottom:20px}
.challenge-popup-actions{display:flex;gap:10px;justify-content:center}
.challenge-popup-actions .btn{min-width:140px}
@media(max-width:600px){
 .users-summary{align-items:flex-start;flex-direction:column}
 .challenge-popup-card{padding:24px 18px}
 .challenge-popup-actions{flex-direction:column}
 .challenge-popup-actions .btn{width:100%}
}

/* =========================================================
   PAGE POLISH — GAMES / CHAMPIONSHIPS / RANKING
   ========================================================= */
.games-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.games-grid .game-card{position:relative;overflow:hidden;border:1px solid rgba(251,191,36,.14);border-radius:18px;background:linear-gradient(145deg,rgba(15,31,61,.98),rgba(8,16,31,.98));box-shadow:0 12px 35px rgba(0,0,0,.22)}
.games-grid .game-card:hover{transform:translateY(-5px);border-color:rgba(251,191,36,.5);box-shadow:0 20px 45px rgba(0,0,0,.35),0 0 25px rgba(251,191,36,.08)}
.games-grid .game-image{min-height:150px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 20%,rgba(251,191,36,.2),transparent 55%),linear-gradient(135deg,#14284a,#071020);font-size:4.5rem;border-bottom:1px solid rgba(255,255,255,.06)}
.games-grid .game-body{padding:18px}
.games-grid .game-title{font-size:1.15rem;font-weight:900;margin-bottom:6px}
.games-grid .game-players{color:var(--text-tertiary);margin-bottom:14px}
.championships-scroll{gap:18px}
.championship-card{border:1px solid rgba(251,191,36,.14);border-radius:18px;overflow:hidden;background:linear-gradient(145deg,rgba(15,31,61,.98),rgba(8,16,31,.98));box-shadow:0 12px 35px rgba(0,0,0,.22);transition:.25s}
.championship-card:hover{transform:translateY(-4px);border-color:rgba(251,191,36,.45)}
.championship-image{background:radial-gradient(circle at 50% 30%,rgba(251,191,36,.22),transparent 60%),linear-gradient(135deg,#172c52,#080f1e);display:flex;align-items:center;justify-content:center;position:relative}
.championship-image>img{width:100%;height:100%;object-fit:cover}
.championship-body{padding:18px}
.championship-title{font-size:1.08rem;font-weight:900}
.ranking-container{box-shadow:0 15px 45px rgba(0,0,0,.25)}
.ranking-table tbody tr{transition:background .18s,transform .18s}
.ranking-table tbody tr:hover{transform:translateX(2px)}
@media(max-width:768px){
 .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .games-grid .game-image{min-height:120px;font-size:3rem}
 .games-grid .game-body{padding:12px}
 .championship-card{border-radius:14px}
}
@media(max-width:480px){.games-grid{grid-template-columns:1fr}.games-grid .game-card{display:flex;flex-direction:row}.games-grid .game-image{width:92px;min-height:92px;flex:0 0 92px}.games-grid .game-body{padding:12px}.games-grid .game-title{font-size:1rem}}

/* Desafio 1v1 - seleção de jogo e usuários */
.lobby-section-subtitle{margin:.3rem 0 0;color:#77808f;font-size:.68rem}.challenge-game-picker,.users-challenge-card{margin-top:12px}.challenge-games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px}.challenge-game-choice{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:11px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:#0d1016;color:#fff;text-decoration:none;transition:.2s}.challenge-game-choice:hover{transform:translateY(-2px);border-color:rgba(246,198,77,.35);background:#111722}.challenge-game-choice-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#171e2a;font-size:1.5rem}.challenge-game-choice strong,.challenge-game-choice small{display:block}.challenge-game-choice strong{font-size:.72rem}.challenge-game-choice small{margin-top:3px;color:#68717f;font-size:.53rem;line-height:1.35}.challenge-game-choice b{font-size:.56rem;color:var(--gold);white-space:nowrap}.challenge-selected-game{display:flex;align-items:center;gap:9px;margin-bottom:12px;padding:8px 10px;border-radius:10px;background:rgba(246,198,77,.07);border:1px solid rgba(246,198,77,.12)}.challenge-selected-game span{font-size:.48rem;color:#8c94a2;font-weight:800}.challenge-selected-game strong{font-size:.7rem;color:#fff}.challenge-selected-game a{margin-left:auto;font-size:.52rem;color:var(--gold)}.challenge-user-search{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:10px}.challenge-user-search input{width:100%;box-sizing:border-box;padding:10px 11px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:#0b0e14;color:#fff;outline:none}.challenge-user-search input:focus{border-color:rgba(246,198,77,.4)}.challenge-user-list{display:flex;flex-direction:column;gap:6px}.selected-opponent{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid rgba(59,130,246,.25);border-radius:10px;background:rgba(59,130,246,.07)}.selected-opponent span{font-size:.5rem;color:#7f8a9a;font-weight:800}.selected-opponent strong{font-size:.65rem}.selected-opponent button{margin-left:auto;border:0;background:transparent;color:var(--gold);font-size:.55rem;cursor:pointer}.challenge-user-row{min-height:48px}.challenge-user-row .btn{white-space:nowrap}@media(max-width:560px){.challenge-games-grid{grid-template-columns:1fr}.challenge-user-search{grid-template-columns:1fr}.challenge-game-choice{grid-template-columns:38px 1fr}.challenge-game-choice b{display:none}.challenge-selected-game{flex-wrap:wrap}.challenge-selected-game a{margin-left:auto}}

/* =========================================================
   SOCIAL: MENSAGENS & COMUNIDADES
   ========================================================= */
.messaging-page,.communities-page,.community-detail-page{padding:28px 0 60px}
.messages-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;min-height:620px}
.messages-sidebar,.message-window{padding:0;overflow:hidden}
.messages-sidebar-head,.message-window-head{height:72px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px}
.messages-sidebar-head{justify-content:space-between}.messages-sidebar-head span,.card-heading>span{min-width:28px;padding:4px 9px;text-align:center;border-radius:999px;background:rgba(255,194,62,.12);color:#ffc23e;font-weight:800}
.messages-friend-list{padding:8px}.message-friend{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;color:inherit;text-decoration:none;margin-bottom:4px}.message-friend:hover,.message-friend.active{background:rgba(255,194,62,.10)}.message-friend strong,.message-friend small{display:block}.message-friend small,.message-window-head small{color:#8e98a8;margin-top:3px}
.message-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#272d3a,#10131a);border:1px solid rgba(255,194,62,.22);font-weight:900;color:#ffc23e}
.message-window{display:flex;flex-direction:column}.message-window-head{justify-content:flex-start}.message-list{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:10px;min-height:480px;max-height:560px;background:radial-gradient(circle at 80% 10%,rgba(255,194,62,.05),transparent 35%)}
.direct-bubble{align-self:flex-start;max-width:min(72%,520px);padding:10px 13px;border-radius:15px 15px 15px 4px;background:#171c26;border:1px solid rgba(255,255,255,.07);line-height:1.45}.direct-bubble.mine{align-self:flex-end;border-radius:15px 15px 4px 15px;background:rgba(255,194,62,.12);border-color:rgba(255,194,62,.2)}.direct-bubble small{display:block;margin-top:4px;color:#778294;font-size:11px}.messages-loading,.messages-empty{text-align:center;color:#7f8999;padding:40px 15px}
.direct-message-form{display:flex;gap:10px;padding:14px;border-top:1px solid rgba(255,255,255,.08)}.direct-message-form input,.community-search input,.community-create input,.community-create select,.community-create textarea{width:100%;box-sizing:border-box;background:#0c1017;border:1px solid rgba(255,255,255,.10);color:inherit;border-radius:10px;padding:12px 14px;outline:none}.direct-message-form input:focus,.community-create input:focus,.community-create select:focus,.community-create textarea:focus{border-color:rgba(255,194,62,.55)}
.messages-welcome{margin:auto;text-align:center;padding:40px}.messages-welcome>div{font-size:52px}.messages-welcome h2{margin:12px 0 6px}.messages-welcome p{color:#8791a1}
.community-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:30px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(120deg,rgba(255,194,62,.10),rgba(255,255,255,.025));box-shadow:0 18px 50px rgba(0,0,0,.18)}.community-hero h1{margin:5px 0}.community-hero p{color:#8c96a7;margin:0}.community-create{display:none;padding:22px;margin-bottom:16px}.community-create.active{display:block}.community-create h2{margin:0 0 5px}.community-create p{color:#8993a3}.community-create form{display:grid;gap:13px}.community-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.community-create label{display:grid;gap:7px;color:#b6bfcd;font-size:13px;font-weight:700}.community-create textarea{resize:vertical}.community-search{padding:12px;margin-bottom:18px}.community-search form{display:flex;gap:10px}.communities-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.community-card{overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg,#111620,#0b0f16);box-shadow:0 14px 35px rgba(0,0,0,.16);transition:transform .2s,border-color .2s}.community-card:hover{transform:translateY(-3px);border-color:rgba(255,194,62,.28)}.community-cover{height:120px;padding:18px;display:flex;align-items:flex-end;justify-content:space-between;background:radial-gradient(circle at 20% 20%,rgba(255,194,62,.25),transparent 38%),linear-gradient(135deg,#1a202d,#0d1118)}.community-cover span{font-size:44px}.community-cover b{font-size:11px;padding:6px 9px;border-radius:999px;background:rgba(0,0,0,.35);color:#cbd2dc}.community-body{padding:18px}.community-body h3{margin:0 0 7px}.community-body a{color:inherit;text-decoration:none}.community-body p{height:42px;overflow:hidden;color:#8d97a7;line-height:1.45;margin:0 0 15px}.community-meta{display:flex;justify-content:space-between;gap:8px;color:#9ca5b3;font-size:12px;margin-bottom:14px}.community-private-note{color:#737e8e;font-size:12px}.community-detail-hero{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:30px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:linear-gradient(120deg,rgba(255,194,62,.10),rgba(255,255,255,.025));margin:15px 0 18px}.community-big-icon{width:90px;height:90px;display:grid;place-items:center;border-radius:22px;background:rgba(255,194,62,.10);font-size:50px}.community-detail-hero h1{margin:5px 0}.community-detail-hero p{color:#8d97a7;max-width:700px}.community-detail-meta{color:#a5adba;font-size:13px}.community-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.community-members,.community-about{padding:20px}.card-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.card-heading h2{margin:0}.community-member{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}.community-member:last-child{border-bottom:0}.community-member strong,.community-member small{display:block}.community-member small{color:#818c9d;margin-top:3px}.community-rules{display:grid;gap:10px;margin-top:20px}.community-rules span{padding:12px;border-radius:10px;background:rgba(255,255,255,.035);color:#adb6c4}
@media(max-width:900px){.messages-layout,.community-detail-grid{grid-template-columns:1fr}.messages-sidebar{min-height:auto}.messages-friend-list{display:flex;overflow-x:auto}.message-friend{min-width:150px}.message-list{min-height:420px}.communities-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.messaging-page,.communities-page,.community-detail-page{padding:18px 0 45px}.community-hero,.community-detail-hero{padding:20px;display:flex;flex-direction:column;align-items:flex-start}.community-form-grid,.communities-grid{grid-template-columns:1fr}.community-search form,.direct-message-form{flex-direction:column}.direct-bubble{max-width:88%}.community-big-icon{width:70px;height:70px;font-size:38px}}

/* Desafio 1v1 — acabamento premium */
.game-lobby-page{padding-bottom:55px}.game-lobby-hero{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 22px 60px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.05)}.game-lobby-hero:after{content:"";position:absolute;right:-80px;top:-120px;width:300px;height:300px;border-radius:50%;background:rgba(255,194,62,.08);filter:blur(2px);pointer-events:none}.game-mode-tabs{box-shadow:0 12px 30px rgba(0,0,0,.16)}.challenge-game-picker,.users-challenge-card,.challenge-create-card{border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 18px 45px rgba(0,0,0,.16)}.challenge-games-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.challenge-game-choice{min-height:125px;padding:17px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;border-radius:15px;text-decoration:none;color:inherit;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.07);transition:.2s}.challenge-game-choice:hover{transform:translateY(-3px);border-color:rgba(255,194,62,.38);background:linear-gradient(145deg,rgba(255,194,62,.10),rgba(255,255,255,.025))}.challenge-game-choice-icon{font-size:34px}.challenge-game-choice strong,.challenge-game-choice small{display:block}.challenge-game-choice small{color:#8993a4;margin-top:4px;line-height:1.35}.challenge-game-choice b{font-size:12px;color:#ffc23e}.challenge-layout{margin-bottom:16px}.selected-opponent{margin:14px 0;padding:13px 15px;border-radius:12px;background:rgba(72,211,125,.08);border:1px solid rgba(72,211,125,.22)}.selected-opponent span{display:block;color:#7f8a9b;font-size:10px;font-weight:800;letter-spacing:.12em}.selected-opponent strong{display:inline-block;margin-top:5px}.selected-opponent button{float:right;background:none;border:0;color:#9ba5b4;cursor:pointer;padding:4px}.challenge-user-search{display:flex;gap:10px;margin-bottom:12px}.challenge-user-search input{flex:1;min-width:0}.challenge-user-row{transition:.18s}.challenge-user-row:hover{background:rgba(255,255,255,.035);transform:translateX(2px)}.lobby-section-heading{margin-top:8px}
@media(max-width:760px){.challenge-games-grid{grid-template-columns:1fr}.challenge-game-choice{min-height:100px}.challenge-user-search{flex-direction:column}}

.neo-winner-crown{display:inline-flex;align-items:center;gap:7px;margin:8px auto;padding:7px 13px;border-radius:999px;background:rgba(255,194,62,.12);border:1px solid rgba(255,194,62,.25);color:#ffc23e;font-size:11px;font-weight:900;letter-spacing:.12em}.neo-bubble-leaving{animation:neoBubbleLeave .45s ease forwards}@keyframes neoBubbleLeave{to{opacity:0;transform:translateY(-16px) scale(.94)}}