.overflow-hidden {
    overflow: hidden !important;
}

:root {
    /* Color Palette - Dark Blue Theme */
    --bg-app: #0f172a;
    /* Slate 900 - Main Background */
    --bg-card: #1e293b;
    /* Slate 800 - Card Background */
    --bg-card-hover: #334155;
    /* Slate 700 - Hover State */

    --primary: #3b82f6;
    /* Blue 500 - Primary Action / Accent */
    --primary-hover: #2563eb;
    /* Blue 600 */

    --text-main: #f8fafc;
    /* Slate 50 - Primary Text */
    --text-muted: #94a3b8;
    /* Slate 400 - Secondary Text */

    --success: #10b981;
    /* Green 500 */
    --danger: #ef4444;
    /* Red 500 */
    --warning: #f59e0b;
    /* Amber 500 */

    /* Spacing & Layout */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    --header-height-desktop: 80px;
    --nav-height-mobile: 70px;

    /* Typography */
    --font-family: 'Lexend', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-app);
    color: var(--text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* --- Layout Shell --- */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header (Desktop) */
.app-header {
    height: var(--header-height-desktop);
    background-color: var(--bg-app);
    /* Transparent/match bg */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-xl);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-main);
    text-decoration: none;
}

.logo i {
    color: var(--primary);
    font-size: 1.5rem;
}

.desktop-nav {
    display: flex;
    gap: var(--spacing-lg);
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    transition: color 0.2s;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-main);
}

.nav-link.active {
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Mobile Bottom Nav */
.mobile-nav {
    display: none;
    /* Hidden on desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-height-mobile);
    background-color: var(--bg-card);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.75rem;
    padding: var(--spacing-sm);
    flex: 1;
}

.mobile-nav-item i {
    font-size: 1.25rem;
    margin-bottom: 2px;
}

.mobile-nav-item.active {
    color: var(--primary);
}

/* FAB for Mobile New Match */
.fab-add {
    position: fixed;
    bottom: calc(var(--nav-height-mobile) + 16px);
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    border: none;
    cursor: pointer;
    z-index: 60;
    transition: transform 0.2s;
}

.fab-add:active {
    transform: scale(0.95);
}

/* Content Area */
.main-content {
    flex: 1;
    padding: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding-bottom: calc(var(--nav-height-mobile) + var(--spacing-xl));
    /* Space for mobile nav */
}

/* --- Components --- */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

.btn-icon-only {
    padding: 0.6rem;
    border-radius: 50%;
    background-color: var(--bg-card-hover);
    color: var(--text-main);
}

/* Avatars */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-card-hover);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-weight: 600;
    border: 2px solid transparent;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar.lg {
    width: 64px;
    height: 64px;
}

.avatar.xl {
    width: 96px;
    height: 96px;
}

/* Cards */
.card {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

/* Profile Card (Home) */
.current-elo-card {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
}

.current-elo-value {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    margin: var(--spacing-sm) 0;
}

.current-elo-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    font-weight: 600;
}

.elo-stats-row {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.elo-stat {
    display: flex;
    flex-direction: column;
}

.elo-stat-val {
    font-weight: 700;
    font-size: 1.1rem;
}

.elo-stat-lbl {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Match History List */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
}

.link-all {
    color: var(--primary);
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;
}

.match-card {
    background-color: var(--text-main);
    /* Fallback? No, logic error. Should be bg-card */
    background-color: var(--bg-card);
    /* Fixed */
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.match-card-teams {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
}

.match-team-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
}

.match-team-row img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.match-score {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.match-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Leaderboard */
.leaderboard-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    padding-top: var(--spacing-lg);
}

.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.podium-place.first {
    transform: scale(1.15);
    z-index: 2;
}

.podium-avatar-wrapper {
    position: relative;
    margin-bottom: var(--spacing-sm);
}

.podium-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    /* Default */
    object-fit: cover;
}

.podium-place.first .podium-avatar {
    border-color: #fbbf24;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}

.podium-place.second .podium-avatar {
    border-color: #94a3b8;
}

.podium-place.third .podium-avatar {
    border-color: #b45309;
}

.rank-badge {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: #fbbf24;
    color: #0f172a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    border: 2px solid var(--bg-app);
}

.podium-place.second .rank-badge {
    background: #94a3b8;
}

.podium-place.third .rank-badge {
    background: #b45309;
    color: white;
}

.podium-name {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.podium-elo {
    color: var(--primary);
    font-weight: 800;
    font-size: 0.85rem;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.leaderboard-row {
    background-color: var(--bg-card);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.rank-number {
    font-weight: 700;
    color: var(--text-muted);
    width: 24px;
    text-align: center;
}

.player-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.player-name {
    font-weight: 600;
    color: var(--text-main);
}

.player-stats {
    text-align: right;
}

.player-winrate {
    font-size: 0.75rem;
    color: var(--success);
    display: block;
}

.player-elo {
    font-weight: 700;
    color: var(--text-main);
}

/* Responsive Utilities */
@media (min-width: 769px) {
    .mobile-nav {
        display: none;
    }

    .desktop-nav {
        display: flex;
    }

    .app-header {
        display: flex;
    }

    .fab-add {
        display: none;
    }

    /* Use header button instead */

    .podium-place.first {
        transform: scale(1.3);
    }

    .main-content {
        padding-bottom: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }

    .app-header {
        display: none;
    }

    /* Or simplified */
    .mobile-nav {
        display: flex;
    }

    .nav-btn.active {
        color: var(--primary);
    }

    /* Adjust grid columns if needed */
}

/* Activity Heatmap */
.heatmap-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.dark .heatmap-section {
    border-top-color: rgba(255, 255, 255, 0.05);
}

.heatmap-container {
    width: 100%;
    overflow-x: auto;
    padding: 5px 0;
}

.heatmap-grid {
    display: grid;
    grid-template-rows: repeat(7, 10px);
    grid-auto-flow: column;
    grid-auto-columns: 10px;
    gap: 3px;
    min-width: max-content;
    margin-left: auto;
    /* Allinea a destra su schermi grandi */
}

.heatmap-cell {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: #ebedf0;
    transition: transform 0.2s;
}

.dark .heatmap-cell {
    background-color: #161b22;
}

.heatmap-cell:hover {
    transform: scale(1.3);
    z-index: 10;
}

/* Activity Levels */
.hv-0 {
    background-color: #ebedf0;
}

.hv-1 {
    background-color: #9be9a8;
}

.hv-2 {
    background-color: #40c463;
}

.hv-3 {
    background-color: #30a14e;
}

.hv-4 {
    background-color: #216e39;
}

.dark .hv-0 {
    background-color: #161b22;
}

.dark .hv-1 {
    background-color: #0e4429;
}

.dark .hv-2 {
    background-color: #006d32;
}

.dark .hv-3 {
    background-color: #26a641;
}

.dark .hv-4 {
    background-color: #39d353;
}

.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 8px;
    font-size: 10px;
    color: #57606a;
}

.dark .heatmap-legend {
    color: #8b949e;
}

.heatmap-legend-box {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* --- Aesthetic Customizations --- */

/* ═══════════════════════════════════════════════════════════════
   AURA SYSTEM — Realistic Animated Overlays (v3)
   Each aura = div (absolute behind avatar) + ::before + ::after.
   Techniques: conic-gradient, clip-path, organic border-radius.
   ═══════════════════════════════════════════════════════════════ */

/* ── FLARE (Solar Corona — Spinning Light Rays) ─────────────── */
.aura-flare {
    background: conic-gradient(
        from 0deg,
        rgba(255, 210, 60, 0.95) 0deg, rgba(251, 191, 36, 0.1) 18deg,
        rgba(255, 220, 80, 0.9)  36deg, rgba(251, 191, 36, 0.08) 54deg,
        rgba(255, 200, 50, 0.92) 72deg, rgba(251, 191, 36, 0.1) 90deg,
        rgba(255, 215, 70, 0.85) 108deg, rgba(251, 191, 36, 0.06) 126deg,
        rgba(255, 210, 60, 0.9)  144deg, rgba(251, 191, 36, 0.1) 162deg,
        rgba(255, 220, 80, 0.88) 180deg, rgba(251, 191, 36, 0.08) 198deg,
        rgba(255, 200, 50, 0.92) 216deg, rgba(251, 191, 36, 0.1) 234deg,
        rgba(255, 215, 70, 0.85) 252deg, rgba(251, 191, 36, 0.06) 270deg,
        rgba(255, 210, 60, 0.9)  288deg, rgba(251, 191, 36, 0.1) 306deg,
        rgba(255, 220, 80, 0.88) 324deg, rgba(251, 191, 36, 0.08) 342deg,
        rgba(255, 210, 60, 0.95) 360deg
    ) !important;
    filter: blur(3px) !important;
    animation: flare-spin 12s linear infinite !important;
    border-radius: 50% !important;
    mix-blend-mode: normal !important;
    overflow: visible !important;
}

.aura-flare::before {
    content: '' !important;
    position: absolute !important;
    inset: 12% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle,
        rgba(255, 245, 170, 0.95) 0%,
        rgba(251, 191, 36, 0.6) 40%,
        rgba(245, 158, 11, 0.2) 70%,
        transparent 100%) !important;
    filter: blur(2px) !important;
    animation: flare-core-pulse 4s ease-in-out infinite alternate !important;
}

.aura-flare::after {
    content: '' !important;
    position: absolute !important;
    inset: -4px !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow:
        0 0 15px 6px rgba(251, 191, 36, 0.4),
        0 0 35px 12px rgba(251, 191, 36, 0.2),
        0 0 55px 20px rgba(251, 191, 36, 0.05) !important;
    animation: flare-halo-pulse 5s ease-in-out infinite alternate !important;
}

@keyframes flare-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes flare-core-pulse {
    0%   { opacity: 0.6; transform: scale(0.93); }
    100% { opacity: 1;   transform: scale(1.06); }
}
@keyframes flare-halo-pulse {
    0%   { opacity: 0.35; transform: scale(0.97); }
    100% { opacity: 0.75; transform: scale(1.04); }
}


/* ── FIRE (Inferno — Organic Flame Tongues + Sparks) ────────── */
.aura-fire {
    background: radial-gradient(ellipse 100% 140% at 50% 70%,
        rgba(255, 255, 80, 0.95) 0%,
        rgba(255, 180, 0, 0.85) 15%,
        rgba(255, 80, 0, 0.7)  35%,
        rgba(200, 20, 0, 0.45) 55%,
        rgba(100, 0, 0, 0.15)  75%,
        transparent 90%) !important;
    filter: brightness(1.2) !important;
    animation: fire-morph 3s ease-in-out infinite alternate !important;
    border-radius: 42% 58% 45% 55% / 38% 42% 58% 62% !important;
    mix-blend-mode: normal !important;
    overflow: visible !important;
    box-shadow:
        0 -6px 12px rgba(255, 180, 0, 0.5),
        0 0 20px 6px rgba(255, 80, 0, 0.4),
        0 0 40px 12px rgba(200, 0, 0, 0.2) !important;
}

.aura-fire::before {
    content: '' !important;
    position: absolute !important;
    inset: 5% 10% 15% 8% !important;
    border-radius: 55% 45% 50% 50% / 40% 50% 50% 60% !important;
    background: radial-gradient(ellipse 120% 150% at 45% 65%,
        rgba(255, 255, 120, 0.9) 0%,
        rgba(255, 140, 0, 0.7) 25%,
        rgba(255, 60, 0, 0.4) 50%,
        transparent 75%) !important;
    filter: blur(1px) !important;
    animation: fire-morph-alt 2s ease-in-out infinite alternate 0.4s !important;
}

/* Sparks are now handled by canvas particle engine in JS for better performance and realism */
.aura-fire::after {
    display: none !important;
}

@keyframes fire-morph {
    0%   { border-radius: 42% 58% 45% 55% / 38% 42% 58% 62%; transform: scaleX(0.96) scaleY(0.92); }
    33%  { border-radius: 55% 45% 52% 48% / 50% 38% 62% 50%; transform: scaleX(1.04) scaleY(1.08); }
    66%  { border-radius: 48% 52% 40% 60% / 44% 55% 45% 56%; transform: scaleX(0.98) scaleY(1.02); }
    100% { border-radius: 52% 48% 58% 42% / 55% 45% 55% 45%; transform: scaleX(1.02) scaleY(0.94); }
}

@keyframes fire-morph-alt {
    0%   { border-radius: 55% 45% 50% 50% / 40% 50% 50% 60%; transform: scaleX(0.92) scaleY(0.88); opacity: 0.7; }
    50%  { border-radius: 45% 55% 55% 45% / 48% 42% 58% 52%; transform: scaleX(1.06) scaleY(1.08); opacity: 0.95; }
    100% { border-radius: 50% 50% 42% 58% / 55% 45% 55% 45%; transform: scaleX(0.97) scaleY(1.02); opacity: 0.8; }
}


/* ── VOID (Dark Singularity — Spinning Vortex) ──────────────── */
.aura-void {
    background: conic-gradient(
        from 0deg,
        rgba(88, 28, 135, 0.9)  0deg,   rgba(30, 0, 60, 0.4) 25deg,
        rgba(139, 92, 246, 0.8) 50deg,   rgba(30, 0, 60, 0.4) 75deg,
        rgba(88, 28, 135, 0.9)  100deg,  rgba(30, 0, 60, 0.4) 125deg,
        rgba(168, 85, 247, 0.7) 150deg,  rgba(30, 0, 60, 0.4) 175deg,
        rgba(88, 28, 135, 0.9) 200deg,  rgba(30, 0, 60, 0.4) 225deg,
        rgba(139, 92, 246, 0.8) 250deg,  rgba(30, 0, 60, 0.4) 275deg,
        rgba(88, 28, 135, 0.9)  300deg,  rgba(30, 0, 60, 0.4) 325deg,
        rgba(168, 85, 247, 0.7) 350deg, rgba(88, 28, 135, 0.9) 360deg
    ) !important;
    filter: blur(2px) !important;
    animation: void-rotate 12s linear infinite reverse !important;
    border-radius: 50% !important;
    mix-blend-mode: normal !important;
    overflow: visible !important;
    box-shadow:
        0 0 30px 10px rgba(88, 28, 135, 0.5),
        0 0 60px 20px rgba(30, 0, 60, 0.3) !important;
}

.aura-void::before {
    content: '' !important;
    position: absolute !important;
    inset: 15% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle,
        rgba(0, 0, 0, 0.98) 0%,
        rgba(15, 0, 30, 0.9) 35%,
        rgba(40, 0, 70, 0.6) 65%,
        transparent 100%) !important;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.95) !important;
    animation: void-core-pulse 4s ease-in-out infinite alternate !important;
}

.aura-void::after {
    content: '' !important;
    position: absolute !important;
    inset: -8px !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow:
        inset 0 0 15px 5px rgba(139, 92, 246, 0.45),
        0 0 20px 8px rgba(88, 28, 135, 0.5),
        0 0 45px 15px rgba(30, 0, 60, 0.3) !important;
    animation: void-horizon-pulse 6s ease-in-out infinite alternate !important;
}

@keyframes void-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes void-core-pulse {
    0%   { transform: scale(0.92); opacity: 0.8; box-shadow: inset 0 0 20px rgba(0,0,0,0.9); }
    100% { transform: scale(1.08); opacity: 1;   box-shadow: inset 0 0 30px rgba(0,0,0,0.98); }
}
@keyframes void-horizon-pulse {
    0% {
        box-shadow:
            inset 0 0 12px 4px rgba(139, 92, 246, 0.35),
            0 0 18px 6px rgba(88, 28, 135, 0.4),
            0 0 35px 12px rgba(30, 0, 60, 0.25);
    }
    100% {
        box-shadow:
            inset 0 0 18px 7px rgba(168, 85, 247, 0.55),
            0 0 28px 12px rgba(139, 92, 246, 0.55),
            0 0 55px 22px rgba(88, 28, 135, 0.35);
    }
}


/* ── STORM (Lightning — Thunder Flash) ──────── */
.aura-storm {
    background: radial-gradient(circle,
        rgba(200, 240, 255, 0.8) 0%,
        rgba(34, 211, 238, 0.7) 25%,
        rgba(14, 165, 233, 0.5) 50%,
        rgba(37, 99, 235, 0.25) 75%,
        transparent 95%) !important;
    filter: blur(1px) brightness(1.2) !important;
    animation: storm-pulsate 1.5s ease-in-out infinite alternate !important;
    border-radius: 50% !important;
    mix-blend-mode: normal !important;
    overflow: visible !important;
    box-shadow:
        0 0 12px 4px rgba(34, 211, 238, 0.6),
        0 0 30px 10px rgba(14, 165, 233, 0.4) !important;
}

/* Storm Arcs are completely handled through the canvas JS particle system for ultimate fidelity */
.aura-storm::before,
.aura-storm::after {
    display: none !important;
}

@keyframes storm-pulsate {
    0% {
        box-shadow: 0 0 10px 3px rgba(34, 211, 238, 0.5), 0 0 25px 8px rgba(14, 165, 233, 0.3);
        transform: scale(0.98);
        opacity: 0.8;
    }
    100% {
        box-shadow: 0 0 20px 8px rgba(165, 243, 252, 0.8), 0 0 45px 15px rgba(34, 211, 238, 0.5), 0 0 70px 25px rgba(14, 165, 233, 0.3);
        transform: scale(1.04);
        opacity: 1;
    }
}

/* Titles */
.player-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0ea5e9;
    /* Sky 500 */
}

.podium-place .player-title {
    margin-top: 2px;
}

/* Character Color / Text Effects */
[data-color="gold"] {
    background: linear-gradient(
        90deg, 
        #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c
    ) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    animation: gold-shine 2s linear infinite, gold-pulse 1s ease-in-out infinite alternate !important;
    text-shadow: 0 0 2px rgba(191, 149, 63, 0.4) !important;
}

@keyframes gold-shine {
    from { background-position: 0% center; }
    to { background-position: 200% center; }
}

@keyframes gold-pulse {
    from { 
        text-shadow: 0 0 1px rgba(191, 149, 63, 0.4); 
        transform: scale(1);
    }
    to { 
        text-shadow: 0 0 5px rgba(251, 245, 183, 0.8); 
        transform: scale(1.02);
    }
}

[data-color="neon"] {
    color: #fff !important;
    text-shadow: 
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #ff00ff,
        0 0 42px #ff00ff,
        0 0 82px #ff00ff,
        0 0 92px #ff00ff,
        0 0 102px #ff00ff !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    animation: neon-flicker 2s infinite alternate, neon-pulse 1.5s infinite alternate !important;
}

@keyframes neon-pulse {
    from {
        text-shadow: 
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #ff00ff,
            0 0 42px #ff00ff;
        opacity: 0.9;
    }
    to {
        text-shadow: 
            0 0 10px #fff, 
            0 0 20px #fff, 
            0 0 60px #ff00ff, 
            0 0 100px #ff00ff;
        filter: brightness(1.5) contrast(1.2);
        opacity: 1;
    }
}

[data-color="rainbow"] {
    display: inline-block !important;
    background: linear-gradient(90deg,
            #ef4444, #f59e0b, #10b981, #3b82f6, #6366f1, #8b5cf6, #ef4444) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
    animation: rainbow-shimmer 2.5s linear infinite !important;
}

@keyframes rainbow-shimmer {
    from { background-position: 0% center; }
    to { background-position: 200% center; }
}

[data-color="lime"] {
    color: #84cc16 !important;
    text-shadow: 0 0 8px rgba(132, 204, 22, 0.4) !important;
    font-weight: 800 !important;
}

[data-color="red"] {
    color: #ef4444 !important;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important;
    font-weight: 800 !important;
}

[data-color="orange"] {
    color: #f97316 !important;
    text-shadow: 0 0 8px rgba(249, 115, 22, 0.4) !important;
    font-weight: 800 !important;
}

[data-color="plasma"] {
    color: #fff !important;
    text-shadow:
        0 0 4px #fff,
        0 0 8px #22d3ee,
        0 0 16px #22d3ee,
        0 0 32px #22d3ee !important;
    font-weight: 900 !important;
    animation: plasma-pulse 1.5s ease-in-out infinite alternate !important;
}

@keyframes plasma-pulse {
    from {
        filter: brightness(1) drop-shadow(0 0 2px #22d3ee);
    }

    to {
        filter: brightness(1.5) drop-shadow(0 0 8px #22d3ee);
    }
}

[data-color="emerald"] {
    background: linear-gradient(
        135deg,
        #064e3b 0%,
        #059669 25%,
        #34d399 50%,
        #6ee7b7 60%,
        #34d399 70%,
        #059669 85%,
        #064e3b 100%
    ) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    animation: emerald-shimmer 3s linear infinite, emerald-float 3s ease-in-out infinite alternate !important;
    text-shadow: 0 0 2px rgba(5, 150, 105, 0.4) !important;
}

@keyframes emerald-float {
    from { 
        transform: translateY(0) scale(1); 
        text-shadow: 0 0 2px rgba(5, 150, 105, 0.4); 
    }
    to { 
        transform: translateY(-2px) scale(1.05); 
        text-shadow: 0 0 8px rgba(52, 211, 153, 0.8); 
    }
}

@keyframes emerald-shimmer {
    from { background-position: 0% center; }
    to { background-position: 200% center; }
}

[data-style="pixel"] {
    font-family: 'Press Start 2P', cursive !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: -1px !important;
    -webkit-font-smoothing: none !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: pixelated;
    image-rendering: pixelated;
    display: inline-block;
}

#shopDetailPreviewContent [data-style="pixel"] {
    font-size: 24px !important;
    letter-spacing: 0px !important;
}

/* Even smaller for match history cards */
.match-card-history [data-style="pixel"] {
    font-size: 9px !important;
    letter-spacing: -0.5px !important;
}

[data-style="chinese"], [data-style="name_chinese"], .name-chinese {
    font-family: 'Noto Sans SC', sans-serif !important;
    font-weight: 700 !important;
    color: #e60000 !important;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.2) !important;
}

[data-style="russian"], [data-style="name_russian"], .name-russian {
    font-family: 'Ruslan Display', cursive !important;
    color: #0039a6 !important;
    text-shadow: 1px 1px 0px #fff !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}


[data-style="arabic"] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: bold !important;
    direction: rtl !important;
    unicode-bidi: bidi-override !important;
}

[data-style="glitch"] {
    display: inline-block !important;
    position: relative !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #000 !important;
    text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
        0.025em 0.04em 0 #fffc00 !important;
    animation: glitch 725ms infinite, glitch-wobble 2s infinite !important;
}

@keyframes glitch-wobble {
    0% { transform: translate(0); }
    10% { transform: translate(-1px, 1px); }
    20% { transform: translate(0); }
    30% { transform: translate(1px, -1px); }
    40% { transform: translate(0); }
}

@keyframes glitch {
    0% {
        text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00;
        clip-path: inset(50% 0 30% 0);
    }
    15% {
        text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00;
        clip-path: inset(10% 0 80% 0);
    }
    30% {
        text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00;
        clip-path: inset(80% 0 5% 0);
    }
    45% {
        text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff, -0.04em -0.025em 0 #fffc00;
        clip-path: inset(30% 0 60% 0);
    }
    60% {
        text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00;
        clip-path: inset(0% 0 0% 0);
    }
    100% {
        text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff, -0.04em -0.025em 0 #fffc00;
        clip-path: inset(0% 0 0% 0);
    }
}

@keyframes neon-flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        text-shadow:
            0 0 2px #fff,
            0 0 5px #ff00ff,
            0 0 10px #ff00ff,
            0 0 20px #ff00ff,
            1px 1px 2px rgba(0, 0, 0, 0.3);
    }

    20%,
    24%,
    55% {
        text-shadow: none;
        opacity: 0.8;
    }
}

.podium-title-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #0ea5e9;
    color: white;
    font-size: 8px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 9999px;
    white-space: nowrap;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    text-transform: uppercase;
    z-index: 20;
    border: 2px solid white;
}

.dark .podium-title-badge {
    border-color: #1f2937;
}

/* Reset background-clip ONLY on podium badges (which display as colored boxes, not clipped text) */
.podium-title-badge[data-color] {
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
    -webkit-text-fill-color: initial !important;
}


[data-color="gold"].podium-title-badge {
    background: linear-gradient(45deg, #a67c00, #ffbf00, #a67c00) !important;
    background-size: 200% auto !important;
    animation: gold-shimmer 3s linear infinite !important;
    color: #422006 !important;
}

[data-color="neon"].podium-title-badge {
    background: #ff00ff !important;
    color: #fff !important;
    box-shadow: 0 0 10px #ff00ff !important;
}

[data-color="rainbow"].podium-title-badge {
    background: linear-gradient(to right, #ef4444, #f59e0b, #10b981, #3b82f6, #6366f1, #8b5cf6, #ef4444) !important;
    background-size: 200% auto !important;
    animation: rainbow-shimmer 3s linear infinite !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

[data-color="lime"].podium-title-badge {
    background: #84cc16 !important;
    color: #fff !important;
}

[data-color="red"].podium-title-badge {
    background: #ef4444 !important;
    color: #fff !important;
}

[data-color="orange"].podium-title-badge {
    background: #f97316 !important;
    color: #fff !important;
}

/* Ensure TU indicator is immune to parent text-fill/shadow effects */
.leaderboard-tu-indicator {
    -webkit-text-fill-color: white !important;
    text-shadow: none !important;
    background-color: #2563eb !important;
    /* Standard blue */
    color: white !important;
    filter: none !important;
    animation: none !important;
}

/* Auras were already defined above in the premium section */

/* --- NEW SHOP REDESIGN --- */

.shop-tab-btn {
    position: relative;
    padding: 1rem 1.5rem;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #94a3b8;
    flex: 1;
    text-align: center;
}

.shop-tab-btn.active {
    color: #f59e0b;
    /* yellow-500 */
    background: rgba(245, 158, 11, 0.05);
}

.dark .shop-tab-btn.active {
    background: rgba(245, 158, 11, 0.1);
}

.shop-tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #f97316);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 99px;
}

.shop-tab-btn.active::after {
    width: 80%;
}

.shop-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    border: 1px solid #e2e8f0;
    /* slate-200 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    height: 80px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.dark .shop-card {
    background: #1e293b;
    /* mixed with gray-800 */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

.shop-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.dark .shop-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: #25334a;
}

.shop-card.bonus:hover {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.2);
}

.shop-card.aesthetic:hover {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.2);
}

.shop-item-price {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dark .shop-item-price {
    background: linear-gradient(135deg, #451a03, #78350f);
    color: #fef3c7;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

@keyframes shop-item-appear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.shop-item-animate {
    animation: shop-item-appear 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Custom scrollbar for shop */
.shop-scroll::-webkit-scrollbar {
    width: 5px;
}

.shop-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.shop-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.dark .shop-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05);
}

/* --- Navigation & Tabs Active States --- */

/* Desktop Sidebar */
.nav-item-desktop.active {
    background-color: rgba(6, 127, 249, 0.1) !important;
}

.light .nav-item-desktop.active {
    background-color: #eff6ff !important;
}

.nav-item-desktop.active span {
    color: #067ff9 !important;
}

.dark .nav-item-desktop.active span {
    color: #60a5fa !important;
}

/* Mobile Bottom Nav */
.nav-item.active,
nav .nav-item.active,
nav .nav-item.text-blue-500 {
    color: #067ff9 !important;
}

.nav-item.active span,
nav .nav-item.active span,
nav .nav-item.text-blue-500 span {
    color: #067ff9 !important;
}

/* Override Tailwind gray-400 when active */
.nav-item.active.text-gray-400 {
    color: #067ff9 !important;
}

/* Leaderboard Tabs */
.leaderboard-tab.active {
    background-color: #067ff9 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(6, 127, 249, 0.3) !important;
}
.premium-glow-indigo {
    animation: indigo-glow 2s infinite ease-in-out;
}

@keyframes indigo-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.2); border-color: rgba(99, 102, 241, 0.2); }
    50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.6); border-color: rgba(99, 102, 241, 0.6); }
}

/* ============================================
   LIVE BETTING PAGE — Rich Light Theme
   ============================================ */
.betting-fullpage {
    position: fixed; inset: 0; z-index: 80;
    background: #f3f4f6;
    display: flex; flex-direction: column;
    overflow: hidden;
    font-family: var(--font-family);

    /* Animation: Slide up from bottom */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
}
.betting-fullpage.active {
    transform: translateY(0);
    opacity: 1;
}
.betting-fullpage *:not(.material-symbols-outlined) {
    font-family: inherit;
}
.betting-fullpage.hidden { display: none !important; }

/* ── Top Bar ── */
.betting-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; height: 56px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0; z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.betting-topbar-left { display: flex; align-items: center; gap: 14px; }
.betting-back-btn {
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid #e5e7eb; background: #f9fafb; color: #374151;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.betting-back-btn:hover { background: #f3f4f6; border-color: #d1d5db; transform: scale(1.05); }
.betting-topbar-center { display: flex; align-items: center; gap: 10px; }
.betting-topbar-center h2 {
    font-size: 0.95rem; font-weight: 700; color: #111827; letter-spacing: -0.02em;
}
.betting-live-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff; font-size: 9px; font-weight: 700;
    padding: 4px 10px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.06em;
    box-shadow: 0 2px 8px rgba(59,130,246,0.3);
    animation: badge-glow 2s ease-in-out infinite;
}
@keyframes badge-glow {
    0%,100% { box-shadow: 0 2px 8px rgba(59,130,246,0.3); }
    50% { box-shadow: 0 2px 16px rgba(59,130,246,0.5); }
}
.betting-live-dot {
    width: 6px; height: 6px;
    background: #ffffff; border-radius: 50%;
    animation: bet-blink 1.4s infinite;
}
@keyframes bet-blink {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:0.3; transform:scale(0.7); }
}
.betting-credits-pill {
    display: flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #fde68a;
    padding: 6px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 700; color: #92400e;
    box-shadow: 0 1px 4px rgba(251,191,36,0.15);
}
.betting-credits-pill .material-symbols-outlined { font-size: 15px; color: #f59e0b; }

/* ── Scoreboard — Premium Redesign ── */
.betting-scoreboard-card {
    position: relative; overflow: hidden;
    margin: 0; padding: 20px 16px 0;
    background: linear-gradient(145deg, #0c1929 0%, #0f2847 35%, #132e52 60%, #183660 100%);
    flex-shrink: 0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
.betting-sb-orb {
    position: absolute; border-radius: 50%;
    pointer-events: none;
}
.betting-sb-orb-1 {
    width: 260px; height: 260px;
    top: -100px; right: -60px;
    background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
    animation: orb-float 10s ease-in-out infinite;
}
.betting-sb-orb-2 {
    width: 180px; height: 180px;
    bottom: -80px; left: -40px;
    background: radial-gradient(circle, rgba(239,68,68,0.08) 0%, transparent 70%);
    animation: orb-float 7s ease-in-out infinite reverse;
}
.betting-sb-orb-3 {
    width: 120px; height: 120px;
    top: 20%; left: 40%;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
    animation: orb-float 12s ease-in-out infinite;
}
@keyframes orb-float {
    0%,100% { transform: translate(0,0); }
    50% { transform: translate(-10px, 10px); }
}

/* Main Score Row */
.sb-main-row {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 0;
}

/* Team Blocks */
.sb-team-block {
    flex: 1; display: flex; align-items: center; gap: 10px;
    min-width: 0;
}
.sb-team-block.right {
    flex-direction: row-reverse; text-align: right;
}
.sb-crest {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}
.sb-crest:hover { transform: scale(1.08); }
.sb-crest.blue {
    background: linear-gradient(145deg, rgba(59,130,246,0.35) 0%, rgba(37,99,235,0.2) 100%);
    color: #93c5fd;
    box-shadow: 0 0 16px rgba(59,130,246,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
}
.sb-crest.red {
    background: linear-gradient(145deg, rgba(239,68,68,0.35) 0%, rgba(220,38,38,0.2) 100%);
    color: #fca5a5;
    box-shadow: 0 0 16px rgba(239,68,68,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
}
.sb-crest .material-symbols-outlined { font-size: 22px; }

.sb-team-info { min-width: 0; flex: 1; }
.sb-team-name {
    display: block;
    font-size: 10px; font-weight: 800; color: rgba(255,255,255,0.5);
    text-transform: uppercase; letter-spacing: 0.1em;
    line-height: 1; margin-bottom: 5px;
}

/* Player list inside team */
.sb-players-list {
    display: flex; flex-direction: column; gap: 3px;
}
.sb-players-list.right { align-items: flex-end; }
.sb-players-list .sb-player-chip {
    display: inline-flex; align-items: center; gap: 5px;
    max-width: 100%;
}
.sb-players-list.right .sb-player-chip {
    flex-direction: row-reverse;
}
.sb-players-list .sb-player-avatar {
    width: 20px; height: 20px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
}
.sb-players-list .sb-player-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.sb-players-list .sb-player-name {
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 70px;
    line-height: 1.2;
}
.sb-players-list .sb-player-empty {
    font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.2);
    font-style: italic;
}

/* Score Center */
.sb-score-center {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 0 14px;
    position: relative; z-index: 2;
}
.sb-score-box {
    display: flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 6px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.sb-score-digit {
    font-size: 2.6rem; font-weight: 900; color: #ffffff;
    line-height: 1; letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 12px rgba(0,0,0,0.25);
    min-width: 32px; text-align: center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sb-score-digit.bump {
    transform: scale(1.2);
}
.sb-score-sep {
    font-size: 1.8rem; font-weight: 300; color: rgba(255,255,255,0.25);
    line-height: 1;
    animation: sep-pulse 2s ease-in-out infinite;
}
@keyframes sep-pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Live Indicator */
.sb-live-indicator {
    display: flex; align-items: center; gap: 4px;
    margin-top: 6px;
    font-size: 8px; font-weight: 800; color: rgba(255,255,255,0.5);
    text-transform: uppercase; letter-spacing: 0.18em;
}
.sb-live-dot {
    width: 5px; height: 5px;
    background: #22c55e; border-radius: 50%;
    box-shadow: 0 0 6px rgba(34,197,94,0.6);
    animation: sb-live-blink 1.4s infinite;
}
@keyframes sb-live-blink {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.65); }
}

/* Goal Timeline Bar */
.sb-goal-bar {
    position: relative; z-index: 1;
    display: flex;
    height: 3px;
    margin-top: 16px;
    margin-left: -16px; margin-right: -16px;
    border-radius: 0;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.sb-goal-bar-fill {
    height: 100%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.sb-goal-bar-fill.blue {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.sb-goal-bar-fill.red {
    background: linear-gradient(90deg, #f87171, #ef4444);
}

/* Restructured My Active Bets */
.active-bets-banner {
    margin: 15px 12px 20px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.03);
}
.active-bets-list {
    display: flex; flex-direction: column;
}
.active-bet-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    background: #ffffff;
    transition: background 0.2s;
}
.active-bet-row:last-child { border-bottom: none; }
.active-bet-row:hover { background: #fafafa; }
.active-bet-main-info { display: flex; flex-direction: column; gap: 3px; }
.active-bet-market {
    font-size: 11px; font-weight: 800; color: #111827;
    text-transform: uppercase; letter-spacing: 0.02em;
}
.active-bet-details {
    font-size: 10px; font-weight: 600; color: #6b7280;
}
.active-bet-details strong { color: #3b82f6; }
.active-bet-payout {
    text-align: right; display: flex; flex-direction: column; align-items: flex-end;
}
.active-bet-payout-label {
    font-size: 9px; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;
}
.active-bet-payout-value {
    font-size: 14px; font-weight: 900; color: #b45309;
    letter-spacing: -0.02em;
}
.active-bet-payout-value::after {
    content: ' credits'; font-size: 9px; font-weight: 700; color: #d97706; margin-left: 2px;
}

@keyframes active-bet-pop {
    0% { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
/* Locked Odds State - Premium Glassmorphic Overlay */
.bet-card.locked, .bet-card-mini.locked, .bet-card-compact.locked,
button[id^="btn-"].locked {
    pointer-events: none !important;
    position: relative;
    overflow: hidden;
    border-color: rgba(0,0,0,0.05) !important;
}
.bet-card.locked::before, .bet-card-mini.locked::before, .bet-card-compact.locked::before,
button[id^="btn-"].locked::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.05));
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    z-index: 5;
}
.bet-card.locked::after, .bet-card-mini.locked::after, .bet-card-compact.locked::after,
button[id^="btn-"].locked::after {
    content: 'lock';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #94a3b8;
    z-index: 10;
    background: rgba(255,255,255,0.9);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}
.dark .bet-card.locked::after, .dark .bet-card-mini.locked::after, .dark .bet-card-compact.locked::after,
.dark button[id^="btn-"].locked::after {
    background: rgba(30,41,59,0.9);
    color: #64748b;
}

.bet-card.locked .bet-odd, .bet-card.locked .bet-label,
.locked .bet-odd, .locked .bet-label {
    opacity: 0.2;
    filter: blur(1px);
}

/* ── Category Tabs ── */
.betting-nav-container {
    background: #ffffff; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.betting-nav-scroll {
    display: flex; overflow-x: auto; scrollbar-width: none;
    padding: 8px 12px 8px;
    gap: 4px;
}
.betting-nav-scroll::-webkit-scrollbar { display: none; }
.betting-nav-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 14px; font-size: 11px; font-weight: 600;
    color: #6b7280; background: none; border: none;
    cursor: pointer; white-space: nowrap;
    transition: all 0.2s; border-radius: 8px;
    border-bottom: none;
}
.betting-nav-btn .material-symbols-outlined { font-size: 16px; }
.betting-nav-btn:hover { color: #374151; background: #f3f4f6; }
.betting-nav-btn.active {
    color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 1px 3px rgba(37,99,235,0.1);
}

/* ── Content ── */
.betting-content-area {
    flex: 1; overflow-y: auto;
    padding: 12px 0 110px; background: #f3f4f6;
}
.betting-content-area::-webkit-scrollbar { width: 0; }

/* ── Market Group ── */
.betting-market-group {
    background: #ffffff;
    margin: 0 12px 10px; border-radius: 14px;
    border: 1px solid #e5e7eb; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.02);
    transition: box-shadow 0.2s;
}
.betting-mkt-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px 10px;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
    border-bottom: 1px solid #f3f4f6;
}
.betting-mkt-bar { width: 3px; height: 16px; border-radius: 2px; flex-shrink: 0; }
.betting-mkt-header h3 {
    font-size: 12px; font-weight: 700; color: #111827;
    letter-spacing: -0.01em; margin: 0;
}

/* ── Odds Grid ── */
.betting-odds-grid { display: grid; gap: 0; }
.betting-odds-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.betting-odds-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.betting-odds-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* ── Odds Button ── */
.bet-card, .bet-card-mini, .bet-card-compact {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 14px 6px; background: #ffffff;
    border: none; border-radius: 0;
    cursor: pointer; transition: all 0.15s;
    min-height: 56px; gap: 4px;
    border-right: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
    position: relative;
}
.bet-card:last-child, .bet-card-mini:last-child { border-right: none; }
.bet-card:hover, .bet-card-mini:hover, .bet-card-compact:hover {
    background: #eff6ff;
}
.bet-card.selected, .bet-card-mini.selected, .bet-card-compact.selected {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15),
                0 2px 8px rgba(37,99,235,0.25);
}
.bet-card.selected .bet-label,
.bet-card-mini.selected .bet-label,
.bet-card-compact.selected .bet-label,
.bet-card.selected span[class*="font-black"],
.bet-card-mini.selected span[class*="font-black"] {
    color: rgba(255,255,255,0.75) !important;
}
.bet-card.selected .bet-odd,
.bet-card-mini.selected .bet-odd,
.bet-card-compact.selected .bet-odd {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.bet-card:disabled, .bet-card-mini:disabled, .bet-card-compact:disabled {
    opacity: 0.25; cursor: not-allowed;
}
.bet-label {
    font-size: 10px; font-weight: 500; color: #6b7280;
    text-transform: none; letter-spacing: 0;
    text-align: center; line-height: 1.3;
}
.bet-odd {
    font-size: 1.15rem; font-weight: 800; color: #2563eb;
    line-height: 1; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ── Line Separator ── */
.betting-line-sep {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px 4px; background: #ffffff;
}
.betting-line-sep span {
    font-size: 10px; font-weight: 600; color: #9ca3af;
    white-space: nowrap;
}
.betting-line-sep::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, #e5e7eb, transparent);
}

/* ── Column Headers ── */
.betting-col-hdr {
    text-align: center; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 10px 8px;
    background: linear-gradient(180deg, #f9fafb, #ffffff);
    border-bottom: 1px solid #f3f4f6; color: #6b7280;
}
.betting-col-hdr.blue { color: #3b82f6; }
.betting-col-hdr.red { color: #ef4444; }

/* ── Bet Slip Trigger ── */
#bet-slip-trigger {
    position: fixed; bottom: 20px; left: 16px; right: 16px;
    z-index: 85;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
#bet-slip-trigger.translate-y-32,
#bet-slip-trigger.betting-slip-hidden {
    transform: translateY(120px); pointer-events: none;
}
.betting-slip-trigger-inner {
    width: 100%; max-width: 520px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, #3b82f6, #2563eb, #1d4ed8);
    color: #fff;
    padding: 14px 20px; border-radius: 16px;
    border: none; cursor: pointer;
    box-shadow: 0 4px 15px rgba(59,130,246,0.35), 0 10px 30px rgba(59,130,246,0.15);
    transition: all 0.2s;
}
.betting-slip-trigger-inner:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59,130,246,0.45), 0 15px 40px rgba(59,130,246,0.2);
}
.betting-slip-trigger-inner:active { transform: scale(0.97); }

/* ── Bet Slip Drawer ── */
#bet-slip-drawer {
    position: fixed; inset: 0; z-index: 90;
    pointer-events: none; overflow: hidden;
}
#bet-slip-drawer.betting-slip-open { pointer-events: auto; }
#slip-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.3); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0; transition: opacity 0.3s;
}
#bet-slip-drawer.betting-slip-open #slip-overlay { opacity: 1; }
#slip-panel {
    position: absolute; bottom: 0; left: 0; right: 0;
    max-width: 520px; margin: 0 auto;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.1), 0 -1px 0 rgba(0,0,0,0.05);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    max-height: 82vh; overflow-y: auto;
}
#bet-slip-drawer.betting-slip-open #slip-panel { transform: translateY(0); }

/* ── Slip Inner ── */
.slip-handle {
    width: 36px; height: 4px; background: #d1d5db;
    border-radius: 4px; margin: 12px auto 8px;
}
.slip-body { padding: 16px 24px 32px; }
.slip-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
}
.slip-header h3 {
    font-size: 1.1rem; font-weight: 800; color: #111827; letter-spacing: -0.02em;
}
.slip-header p {
    font-size: 10px; color: #9ca3af; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px;
}
.slip-close-btn {
    width: 34px; height: 34px; border-radius: 10px;
    background: #f3f4f6; border: none; color: #6b7280;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
}
.slip-close-btn:hover { background: #e5e7eb; transform: scale(1.05); }
.slip-selection-card {
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    border: 1px solid #e5e7eb;
    border-radius: 14px; padding: 16px 18px; margin-bottom: 20px;
    display: flex; justify-content: space-between; align-items: center;
    position: relative; overflow: hidden;
}
.slip-selection-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: linear-gradient(180deg, #3b82f6, #2563eb);
    border-radius: 0 2px 2px 0;
}
.slip-selection-card .slip-market-label {
    font-size: 9px; font-weight: 700; color: #3b82f6;
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;
}
.slip-selection-card .slip-selection-name {
    font-size: 0.95rem; font-weight: 800; color: #111827; letter-spacing: -0.01em;
}
.slip-selection-card .slip-odd-box {
    font-size: 1.2rem; font-weight: 800; color: #2563eb;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    padding: 8px 16px; border-radius: 10px;
    box-shadow: 0 1px 3px rgba(37,99,235,0.1);
}
.slip-amount-section { margin-bottom: 18px; }
.slip-amount-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; padding: 0 2px;
}
.slip-amount-label {
    font-size: 10px; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.slip-credits-badge {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; color: #111827;
    background: #fef3c7; padding: 3px 10px; border-radius: 20px;
}
.slip-credits-badge .material-symbols-outlined { font-size: 13px; color: #f59e0b; }
.slip-amount-input-wrap { position: relative; }
.slip-amount-input {
    width: 100%; background: #f9fafb;
    border: 2px solid #e5e7eb; border-radius: 12px;
    padding: 16px 120px 16px 18px;
    font-size: 1.4rem; font-weight: 800; color: #111827;
    outline: none; transition: all 0.2s;
    -moz-appearance: textfield; appearance: textfield;
    font-variant-numeric: tabular-nums;
}
.slip-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; }
.slip-amount-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.slip-amount-btns {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    display: flex; gap: 4px;
}
.slip-amount-btns button {
    padding: 8px 12px; border-radius: 8px;
    background: #ffffff; border: 1px solid #e5e7eb;
    font-size: 11px; font-weight: 800; color: #374151; cursor: pointer;
    transition: all 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.slip-amount-btns button:hover {
    background: #f3f4f6; transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.slip-win-card {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 14px; padding: 16px 20px; margin-bottom: 20px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 2px 8px rgba(59,130,246,0.08);
}
.slip-win-label {
    font-size: 12px; font-weight: 700; color: #3b82f6;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.slip-win-value {
    font-size: 1.5rem; font-weight: 900; color: #1d4ed8;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.slip-win-unit {
    font-size: 9px; font-weight: 600; color: #60a5fa;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.slip-place-btn {
    width: 100%; padding: 16px;
    background: linear-gradient(135deg, #3b82f6, #2563eb, #1d4ed8);
    color: #fff; border: none; border-radius: 14px;
    font-size: 14px; font-weight: 800; letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 15px rgba(37,99,235,0.3);
    position: relative; overflow: hidden;
}
.slip-place-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
}
.slip-place-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37,99,235,0.4);
}
.slip-place-btn:active { transform: scale(0.98); }
.slip-place-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Desktop ── */
@media (min-width: 768px) {
    .betting-topbar { padding: 0 28px; height: 60px; }
    .betting-scoreboard-card { padding: 24px 32px 0; }
    .sb-score-digit { font-size: 3.2rem; }
    .sb-crest { width: 48px; height: 48px; border-radius: 14px; }
    .sb-crest .material-symbols-outlined { font-size: 26px; }
    .sb-players-list .sb-player-name { max-width: 100px; font-size: 12px; }
    .sb-players-list .sb-player-avatar { width: 24px; height: 24px; }
    .sb-score-box { padding: 8px 22px; border-radius: 16px; }
    .sb-goal-bar { margin-left: -32px; margin-right: -32px; }
    .betting-content-area { max-width: 700px; margin: 0 auto; padding-top: 16px; }
    .betting-nav-scroll { justify-content: center; padding: 10px 16px; }
    .betting-market-group { margin: 0 16px 12px; border-radius: 16px; }
    .betting-mkt-header { padding: 16px 20px 12px; }
    .betting-line-sep { padding: 12px 20px 4px; }
    .bet-card, .bet-card-mini, .bet-card-compact { min-height: 62px; }
}