/* El Zulo Casino - Stake-inspired Professional Design */

:root {
    /* Stake-inspired Colors */
    --bg-primary: #0F212E;
    --bg-secondary: #1A2C38;
    --bg-tertiary: #213743;
    --bg-card: #1A2C38;
    --bg-card-hover: #1E3040;
    --bg-input: #0F212E;
    --bg-elevated: #213743;

    /* Accent Colors */
    --accent-primary: #00E701;
    --accent-secondary: #3BC117;
    --accent-tertiary: #FF6B35;
    --accent-success: #1FFF20;
    --accent-warning: #FFB800;
    --accent-danger: #ED1C24;
    --accent-blue: #1475E1;
    --accent-purple: #9B59B6;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #00E701 0%, #1FFF20 100%);
    --gradient-secondary: linear-gradient(135deg, #1475E1 0%, #00E701 100%);
    --gradient-gold: linear-gradient(135deg, #FFB800 0%, #FF6B35 100%);
    --gradient-success: linear-gradient(135deg, #1FFF20 0%, #00E701 100%);
    --gradient-danger: linear-gradient(135deg, #ED1C24 0%, #FF6B35 100%);
    --gradient-card: linear-gradient(145deg, #1A2C38 0%, #213743 100%);

    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #B1BAD3;
    --text-muted: #557086;

    /* Borders */
    --border-color: #2F4553;
    --border-light: #3A5565;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(0, 231, 1, 0.2);
    --shadow-glow-purple: 0 0 20px rgba(155, 89, 182, 0.2);

    /* Dimensions */
    --sidebar-width: 240px;
    --sidebar-collapsed: 60px;
    --topbar-height: 60px;
    --border-radius: 8px;
    --border-radius-sm: 6px;
    --border-radius-lg: 12px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* Z-indexes */
    --z-sidebar: 100;
    --z-topbar: 90;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-preloader: 9999;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
}

a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; }
input, select, textarea { font-family: inherit; border: none; outline: none; color: var(--text-primary); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ============================================ */
/* PRELOADER */
/* ============================================ */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-primary);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: var(--z-preloader);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#preloader.hidden { opacity: 0; visibility: hidden; }

.loader-container { position: relative; width: 100px; height: 100px; }
.loader-ring {
    position: absolute; width: 100%; height: 100%; border-radius: 50%;
    border: 3px solid transparent; animation: loaderSpin 1.2s linear infinite;
}
.loader-ring:nth-child(1) { border-top-color: var(--accent-primary); }
.loader-ring:nth-child(2) {
    width: 75%; height: 75%; top: 12.5%; left: 12.5%;
    border-right-color: var(--accent-blue); animation-delay: 0.1s; animation-direction: reverse;
}
.loader-ring:nth-child(3) {
    width: 50%; height: 50%; top: 25%; left: 25%;
    border-bottom-color: var(--accent-tertiary); animation-delay: 0.2s;
}
.loader-logo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 20px; font-weight: 800; color: var(--accent-primary);
}
.loader-text { margin-top: 24px; color: var(--text-muted); font-size: 13px; letter-spacing: 0.5px; }

@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* ============================================ */
/* LOGIN SCREEN */
/* ============================================ */
.login-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-primary);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
}
.login-container {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg); padding: 40px;
    width: 100%; max-width: 420px; margin: 16px;
}
.login-logo {
    text-align: center; margin-bottom: 32px;
}
.login-logo .logo-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.login-logo h1 {
    font-size: 24px; font-weight: 700; color: var(--text-primary);
    letter-spacing: -0.5px;
}
.login-tabs {
    display: flex; gap: 4px; margin-bottom: 24px;
    background: var(--bg-primary); border-radius: var(--border-radius-sm); padding: 4px;
}
.login-tab {
    flex: 1; padding: 10px; border-radius: 4px; font-size: 14px; font-weight: 600;
    color: var(--text-muted); transition: var(--transition-fast); text-align: center;
}
.login-tab.active { background: var(--bg-tertiary); color: var(--text-primary); }
.login-tab:hover:not(.active) { color: var(--text-secondary); }

.login-form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.form-group input {
    padding: 12px 16px; background: var(--bg-primary); border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm); font-size: 14px; color: var(--text-primary);
    transition: var(--transition-fast);
}
.form-group input:focus { border-color: var(--accent-primary); }
.form-group input::placeholder { color: var(--text-muted); }

.login-btn {
    padding: 12px; background: var(--accent-primary); color: #000; font-weight: 700;
    font-size: 14px; border-radius: var(--border-radius-sm); transition: var(--transition-fast);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.login-btn:hover { background: var(--accent-secondary); transform: translateY(-1px); }
.login-error { color: var(--accent-danger); font-size: 13px; text-align: center; min-height: 20px; margin-top: 4px; }

/* ============================================ */
/* APP LAYOUT */
/* ============================================ */
.app-container { display: flex; min-height: 100vh; }

/* ============================================ */
/* SIDEBAR */
/* ============================================ */
.sidebar {
    width: var(--sidebar-width); background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex; flex-direction: column; position: fixed;
    top: 0; left: 0; height: 100vh; z-index: var(--z-sidebar);
    transition: var(--transition-normal);
}
.sidebar.collapsed { width: var(--sidebar-collapsed); }
.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .online-users span:not(.online-dot) { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 12px; }
.sidebar.collapsed .nav-item i { margin-right: 0; font-size: 18px; }

.sidebar-header {
    padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--border-color); min-height: 60px;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon { font-size: 28px; }
.logo-text { font-size: 18px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; }

.sidebar-toggle {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--border-radius-sm); color: var(--text-muted);
    transition: var(--transition-fast);
}
.sidebar-toggle:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.nav-section { margin-bottom: 8px; }
.nav-section-title {
    padding: 8px 20px 4px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);
}
.nav-item {
    display: flex; align-items: center; padding: 10px 20px; font-size: 14px;
    color: var(--text-secondary); transition: var(--transition-fast); gap: 12px;
    border-left: 3px solid transparent; font-weight: 500;
}
.nav-item:hover { background: rgba(255,255,255,0.03); color: var(--text-primary); }
.nav-item.active {
    color: var(--text-primary); background: rgba(0, 231, 1, 0.05);
    border-left-color: var(--accent-primary);
}
.nav-item i { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; }
.nav-badge {
    font-size: 10px; font-weight: 700; padding: 2px 6px;
    border-radius: 4px; text-transform: uppercase; margin-left: auto;
}
.nav-badge.hot { background: rgba(237, 28, 36, 0.15); color: #ED1C24; }
.nav-badge.new { background: rgba(0, 231, 1, 0.15); color: #00E701; }
.nav-badge.live { background: rgba(20, 117, 225, 0.15); color: #1475E1; }
.nav-badge.free { background: rgba(155, 89, 182, 0.15); color: #9B59B6; }

.sidebar-footer {
    padding: 16px 20px; border-top: 1px solid var(--border-color);
}
.online-users {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-muted);
}
.online-dot {
    width: 8px; height: 8px; background: var(--accent-primary);
    border-radius: 50%; animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================ */
/* MAIN CONTENT */
/* ============================================ */
.main-content {
    flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column;
    min-height: 100vh; transition: var(--transition-normal);
}
.sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-collapsed); }

/* ============================================ */
/* TOP BAR */
/* ============================================ */
.top-bar {
    height: var(--topbar-height); background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; position: sticky; top: 0; z-index: var(--z-topbar);
}
.top-bar-left { display: flex; align-items: center; gap: 16px; }
.top-bar-right { display: flex; align-items: center; gap: 16px; }

.mobile-menu-toggle { display: none; color: var(--text-secondary); font-size: 18px; }

.search-box {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 8px 14px;
}
.search-box i { color: var(--text-muted); font-size: 13px; }
.search-box input {
    background: none; font-size: 13px; color: var(--text-primary); width: 200px;
}
.search-box input::placeholder { color: var(--text-muted); }

/* Balance */
.balance-container { display: flex; align-items: center; }
.balance-box {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 8px 16px;
}
.balance-icon { color: var(--accent-warning); font-size: 16px; }
.balance-info { display: flex; flex-direction: column; }
.balance-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.balance-amount { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.balance-amount.balance-win { color: var(--accent-success); animation: balancePulse 0.5s; }

@keyframes balancePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* User Menu */
.user-menu { position: relative; }
.user-avatar {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    cursor: pointer; border: 2px solid var(--border-color); transition: var(--transition-fast);
}
.user-avatar:hover { border-color: var(--accent-primary); }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.user-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius); min-width: 200px;
    display: none; overflow: hidden; box-shadow: var(--shadow-lg);
}
.user-dropdown.active { display: block; }

.dropdown-header {
    padding: 14px 16px; border-bottom: 1px solid var(--border-color);
}
.user-name { font-size: 14px; font-weight: 600; }
.dropdown-items { padding: 6px; }
.dropdown-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: var(--border-radius-sm); font-size: 13px;
    color: var(--text-secondary); transition: var(--transition-fast);
}
.dropdown-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.dropdown-item i { width: 18px; text-align: center; }
.dropdown-divider { border: none; border-top: 1px solid var(--border-color); margin: 4px 0; }

/* ============================================ */
/* CONTENT AREA */
/* ============================================ */
.content-area {
    flex: 1; padding: 24px; overflow-y: auto;
    max-width: 1400px; width: 100%; margin: 0 auto;
}

/* ============================================ */
/* LOBBY */
/* ============================================ */
.lobby-container { }

.lobby-hero {
    background: linear-gradient(135deg, #1A2C38 0%, #0F212E 50%, #1A3D2E 100%);
    border-radius: var(--border-radius-lg); padding: 32px;
    margin-bottom: 24px; border: 1px solid var(--border-color);
    position: relative; overflow: hidden;
}
.lobby-hero::before {
    content: ''; position: absolute; top: -50%; right: -20%; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(0,231,1,0.08) 0%, transparent 70%);
    border-radius: 50%;
}
.lobby-hero-content {
    display: flex; align-items: center; justify-content: space-between;
    position: relative; z-index: 1;
}
.lobby-welcome h1 { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.lobby-welcome p { color: var(--text-muted); font-size: 15px; }

.lobby-balance-card {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius); padding: 20px 32px; text-align: center;
}
.lobby-balance-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.lobby-balance-amount { font-size: 32px; font-weight: 800; color: var(--accent-success); margin: 4px 0; }
.lobby-balance-currency { font-size: 12px; color: var(--text-muted); }

/* Stats */
.lobby-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px;
}
.lobby-stat-card {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius); padding: 16px 20px;
    display: flex; align-items: center; gap: 14px;
}
.lobby-stat-icon {
    width: 40px; height: 40px; border-radius: var(--border-radius-sm);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.lobby-stat-icon.users { background: rgba(20,117,225,0.15); color: #1475E1; }
.lobby-stat-icon.wins { background: rgba(0,231,1,0.15); color: #00E701; }
.lobby-stat-icon.jackpot { background: rgba(255,184,0,0.15); color: #FFB800; }
.lobby-stat-info h4 { font-size: 18px; font-weight: 700; }
.lobby-stat-info p { font-size: 12px; color: var(--text-muted); }

/* Game Sections */
.lobby-section { margin-bottom: 28px; }
.lobby-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.lobby-section-title {
    font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px;
}
.lobby-section-title i { color: var(--accent-tertiary); font-size: 16px; }
.lobby-section-badge {
    font-size: 11px; font-weight: 600; padding: 4px 10px;
    background: rgba(20,117,225,0.15); color: #1475E1;
    border-radius: 20px;
}

/* Game Cards Grid */
.lobby-games-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
}
.lobby-games-grid.featured {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.lobby-game-card {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius); overflow: hidden;
    cursor: pointer; transition: var(--transition-normal);
}
.lobby-game-card:hover {
    transform: translateY(-4px); border-color: var(--accent-primary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.lobby-game-card.featured { }

.lobby-game-image {
    position: relative; height: 140px;
    background: var(--bg-tertiary);
    display: flex; align-items: center; justify-content: center;
}
.lobby-game-card.featured .lobby-game-image { height: 180px; }
.lobby-game-icon { font-size: 48px; transition: var(--transition-normal); }
.lobby-game-card:hover .lobby-game-icon { transform: scale(1.15); }

.lobby-game-badge {
    position: absolute; top: 8px; right: 8px;
    font-size: 10px; font-weight: 700; padding: 3px 8px;
    border-radius: 4px; text-transform: uppercase;
}
.lobby-game-badge.hot { background: rgba(237,28,36,0.9); color: #fff; }
.lobby-game-badge.new { background: rgba(0,231,1,0.9); color: #000; }
.lobby-game-badge.live { background: rgba(20,117,225,0.9); color: #fff; }
.lobby-game-badge.free { background: rgba(155,89,182,0.9); color: #fff; }

.lobby-game-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: var(--transition-normal);
}
.lobby-game-card:hover .lobby-game-overlay { opacity: 1; }
.lobby-play-btn {
    background: var(--accent-primary); color: #000; font-weight: 700;
    padding: 10px 28px; border-radius: var(--border-radius-sm);
    font-size: 13px; letter-spacing: 0.5px;
    transform: translateY(8px); transition: var(--transition-normal);
}
.lobby-game-card:hover .lobby-play-btn { transform: translateY(0); }

.lobby-game-info { padding: 12px 14px; }
.lobby-game-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.lobby-game-provider { font-size: 12px; color: var(--text-muted); }

/* ============================================ */
/* GAME CARDS & CONTAINERS */
/* ============================================ */
.game-container { max-width: 900px; margin: 0 auto; }

.game-card {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg); overflow: hidden; margin: 0 auto;
}
.game-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border-color);
}
.game-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.game-title-icon { font-size: 22px; }

/* ============================================ */
/* BET CONTROLS (Stake-style) */
/* ============================================ */
.bet-controls { padding: 20px; }

.bet-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.bet-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; margin-right: 12px; }

.bet-input-wrapper {
    display: flex; align-items: center; gap: 4px;
    background: var(--bg-primary); border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 2px; flex: 1;
}
.bet-input-wrapper:focus-within { border-color: var(--accent-primary); }

.bet-input {
    flex: 1; background: none; padding: 10px 12px; font-size: 14px; font-weight: 600;
    color: var(--text-primary); min-width: 0;
    -moz-appearance: textfield;
}
.bet-input::-webkit-inner-spin-button,
.bet-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.bet-btn {
    padding: 8px 12px; font-size: 13px; font-weight: 700;
    color: var(--text-secondary); border-radius: 4px;
    transition: var(--transition-fast); min-width: 36px; text-align: center;
}
.bet-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.bet-btn.allin {
    background: var(--bg-tertiary); color: var(--accent-primary);
    padding: 8px 14px;
}
.bet-btn.allin:hover { background: rgba(0,231,1,0.15); }

.bet-presets { display: flex; gap: 6px; flex: 1; }
.bet-preset {
    flex: 1; padding: 8px; font-size: 12px; font-weight: 700;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 4px; color: var(--text-secondary);
    transition: var(--transition-fast);
}
.bet-preset:hover { border-color: var(--accent-primary); color: var(--text-primary); }

/* Action Buttons */
.action-btn {
    width: 100%; padding: 14px; font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--accent-primary); color: #000;
    border-radius: var(--border-radius-sm); transition: var(--transition-fast);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.action-btn:hover { background: var(--accent-secondary); transform: translateY(-1px); }
.action-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.action-btn.success { background: var(--accent-success); }
.action-btn.danger { background: var(--accent-danger); color: #fff; }
.action-btn.danger:hover { background: #ff3040; }

/* ============================================ */
/* CRASH GAME */
/* ============================================ */
.crash-container { display: flex; gap: 0; }
.crash-main { flex: 1; }
.crash-controls { width: 280px; border-left: 1px solid var(--border-color); }

.crash-history {
    display: flex; gap: 6px; padding: 12px 16px; overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
}
.crash-history-item {
    padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700;
    white-space: nowrap;
}
.crash-history-item.high { background: rgba(0,231,1,0.15); color: var(--accent-success); }
.crash-history-item.low { background: rgba(237,28,36,0.15); color: var(--accent-danger); }

.crash-graph-container {
    position: relative; height: 300px;
    background: var(--bg-primary); display: flex;
    align-items: center; justify-content: center;
}
.crash-multiplier {
    font-size: 56px; font-weight: 800; color: var(--text-primary);
    z-index: 2; position: relative;
}
.crash-multiplier.crashed { color: var(--accent-danger); }
.crash-status {
    position: absolute; top: 16px; left: 16px;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    padding: 4px 10px; border-radius: 4px;
}
.crash-status.waiting { background: rgba(255,184,0,0.15); color: var(--accent-warning); }
.crash-status.running { background: rgba(0,231,1,0.15); color: var(--accent-success); }
.crash-status.crashed { background: rgba(237,28,36,0.15); color: var(--accent-danger); }

.crash-bets-panel {
    padding: 12px 16px; border-top: 1px solid var(--border-color);
}
.crash-bets-panel h4 { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }

#crashBetsList .crash-bet-entry {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; font-size: 13px;
}

/* ============================================ */
/* ROULETTE */
/* ============================================ */
.roulette-container { padding: 0; }
.roulette-top-section {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border-color);
}
.roulette-timer-box {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 8px 16px;
    font-size: 18px; font-weight: 700;
}
.roulette-last-result { display: flex; align-items: center; gap: 8px; }
.result-label { font-size: 13px; color: var(--text-muted); }
.roulette-result {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}

.roulette-spin-area {
    position: relative; overflow: hidden; height: 80px;
    background: var(--bg-primary); border-bottom: 1px solid var(--border-color);
}
.roulette-rail {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; overflow: hidden;
}
.roulette-strip {
    display: flex; gap: 4px; transition: transform 5s cubic-bezier(0.25, 0.1, 0.25, 1);
    padding: 0 4px;
}
.roulette-strip .roulette-num {
    width: 60px; height: 60px; border-radius: var(--border-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.roulette-num.red { background: #c0392b; }
.roulette-num.black { background: #2c3e50; }
.roulette-num.green { background: #27ae60; }
.roulette-selector {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 3px; height: 100%; background: var(--accent-warning); z-index: 5;
}
.roulette-selector::after {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    border-left: 8px solid transparent; border-right: 8px solid transparent;
    border-top: 10px solid var(--accent-warning);
}

.roulette-history {
    display: flex; gap: 4px; padding: 10px 16px; overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
}
.roulette-history-item {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}

.roulette-bet-amount {
    padding: 12px 16px; border-bottom: 1px solid var(--border-color);
}

/* Roulette betting table */
.roulette-table {
    padding: 16px; display: grid;
    grid-template-columns: repeat(14, 1fr); gap: 3px;
}
.roulette-table-cell {
    padding: 10px 4px; text-align: center; border-radius: 4px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    transition: var(--transition-fast); border: 1px solid transparent;
}
.roulette-table-cell:hover { border-color: var(--accent-primary); transform: scale(1.05); }
.roulette-table-cell.red { background: #c0392b; }
.roulette-table-cell.black { background: #2c3e50; }
.roulette-table-cell.green { background: #27ae60; }
.roulette-table-cell.action { background: var(--bg-tertiary); color: var(--text-secondary); }
.roulette-table-cell.selected { border-color: var(--accent-warning); box-shadow: 0 0 8px rgba(255,184,0,0.3); }

.roulette-bet-actions {
    padding: 12px 16px; display: flex; gap: 6px; flex-wrap: wrap;
    border-top: 1px solid var(--border-color);
}

.roulette-bet-players {
    padding: 12px 16px; border-top: 1px solid var(--border-color);
}

/* ============================================ */
/* BLACKJACK */
/* ============================================ */
.blackjack-table {
    background: #0d4a1e; border-radius: var(--border-radius-lg);
    padding: 30px; min-height: 300px; margin: 16px;
    position: relative; text-align: center;
    border: 3px solid #0a3015;
}
.bj-dealer, .bj-player {
    display: flex; gap: 8px; justify-content: center; margin: 12px 0;
    min-height: 100px; align-items: center; flex-wrap: wrap;
}
.bj-card {
    width: 70px; height: 100px; background: #fff; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.bj-card.red { color: #c0392b; }
.bj-card.hidden { background: linear-gradient(135deg, #1a3e8e, #2c5fb5); color: #fff; font-size: 24px; }
.bj-value {
    font-size: 16px; font-weight: 700; padding: 4px 12px;
    background: rgba(0,0,0,0.5); border-radius: 20px;
    display: inline-block; margin: 8px 0;
}
.bj-label {
    font-size: 12px; color: rgba(255,255,255,0.6); text-transform: uppercase;
    letter-spacing: 1px; margin: 4px 0;
}
.bj-result {
    font-size: 20px; font-weight: 800; padding: 12px;
    border-radius: var(--border-radius); margin: 8px 0;
    text-transform: uppercase;
}
.bj-result.win { background: rgba(0,231,1,0.2); color: var(--accent-success); }
.bj-result.lose { background: rgba(237,28,36,0.2); color: var(--accent-danger); }
.bj-result.push { background: rgba(255,184,0,0.2); color: var(--accent-warning); }

.bj-actions {
    display: flex; gap: 8px; justify-content: center; padding: 0 16px 16px; flex-wrap: wrap;
}
.bj-actions button {
    padding: 10px 20px; font-size: 13px; font-weight: 700;
    border-radius: var(--border-radius-sm); text-transform: uppercase;
    transition: var(--transition-fast);
}

/* ============================================ */
/* DICE */
/* ============================================ */
.dice-container { padding: 20px; }
.dice-slider-container {
    position: relative; margin: 30px 0; padding: 20px 0;
}
.dice-slider {
    width: 100%; -webkit-appearance: none; height: 8px;
    border-radius: 4px; outline: none;
    background: linear-gradient(to right, var(--accent-danger), var(--accent-success));
}
.dice-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px;
    background: var(--text-primary); border-radius: 50%;
    cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.dice-result-display {
    text-align: center; margin: 20px 0;
}
.dice-result-number {
    font-size: 48px; font-weight: 800; color: var(--text-primary);
}
.dice-info {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0;
}
.dice-info-item {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 12px; text-align: center;
}
.dice-info-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.dice-info-value { font-size: 18px; font-weight: 700; margin-top: 4px; }

/* ============================================ */
/* MINES */
/* ============================================ */
.mines-container {
    display: flex; gap: 0;
}
.mines-grid {
    flex: 1; display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 6px; padding: 16px; background: var(--bg-primary);
}
.mine-cell {
    aspect-ratio: 1; border-radius: var(--border-radius-sm);
    background: var(--bg-tertiary); border: 2px solid var(--border-color);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 24px; transition: var(--transition-fast);
}
.mine-cell:hover:not(.revealed) { border-color: var(--accent-primary); transform: scale(1.05); }
.mine-cell.revealed.safe { background: rgba(0,231,1,0.15); border-color: var(--accent-success); }
.mine-cell.revealed.mine { background: rgba(237,28,36,0.15); border-color: var(--accent-danger); }

.mines-controls {
    width: 280px; padding: 16px; border-left: 1px solid var(--border-color);
}
.mines-count-selector { margin: 16px 0; }
.mines-count-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.mines-count-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.mines-count-grid button {
    width: 36px; height: 36px; border-radius: 4px;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    color: var(--text-secondary); font-size: 12px; font-weight: 600;
    transition: var(--transition-fast);
}
.mines-count-grid button:hover,
.mines-count-grid button.active {
    border-color: var(--accent-primary); color: var(--accent-primary);
}

.mines-multiplier { text-align: center; margin: 16px 0; }
.mines-multiplier-label { font-size: 12px; color: var(--text-muted); }
.mines-multiplier-value { font-size: 28px; font-weight: 800; color: var(--accent-primary); }
.mines-profit { font-size: 14px; color: var(--text-secondary); }

/* ============================================ */
/* PLINKO */
/* ============================================ */
.plinko-container { display: flex; gap: 0; }
.plinko-canvas-wrapper {
    flex: 1; background: var(--bg-primary); display: flex;
    align-items: center; justify-content: center; min-height: 400px;
}
.plinko-controls {
    width: 280px; padding: 16px; border-left: 1px solid var(--border-color);
}
.plinko-risk-selector,
.plinko-rows-selector { margin: 12px 0; }
.plinko-multipliers {
    display: flex; gap: 2px; justify-content: center;
    padding: 8px 16px; border-top: 1px solid var(--border-color);
}
.plinko-mult-bucket {
    padding: 4px 6px; font-size: 10px; font-weight: 700;
    border-radius: 3px; text-align: center;
}

/* ============================================ */
/* SLOTS */
/* ============================================ */
.slot-machine { padding: 20px; }
.slot-frame {
    background: var(--bg-primary); border: 2px solid var(--border-color);
    border-radius: var(--border-radius); padding: 16px;
    position: relative; overflow: hidden;
}
.slot-reels { display: flex; gap: 8px; justify-content: center; }
.slot-reel {
    width: 80px; height: 240px; overflow: hidden;
    background: var(--bg-tertiary); border-radius: var(--border-radius-sm);
    position: relative;
}
.slot-symbol {
    height: 80px; display: flex; align-items: center; justify-content: center;
    font-size: 36px;
}
.slot-payline-indicator {
    position: absolute; top: 50%; width: 20px; height: 3px;
    background: var(--accent-warning); transform: translateY(-50%);
}
.slot-payline-indicator.left { left: 0; }
.slot-payline-indicator.right { right: 0; }

.slot-info-bar {
    display: flex; justify-content: space-around; padding: 12px;
    border-top: 1px solid var(--border-color);
}
.slot-info-item { text-align: center; }
.slot-info-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.slot-info-value { font-size: 20px; font-weight: 700; }
.slot-info-value.win { color: var(--accent-success); }

.slot-card-badge {
    position: absolute; top: 8px; right: 8px;
    font-size: 10px; font-weight: 700; padding: 3px 8px;
    border-radius: 4px; text-transform: uppercase;
}
.slot-card-badge.hot { background: #ED1C24; color: #fff; }
.slot-card-badge.new { background: #00E701; color: #000; }

/* ============================================ */
/* LIMBO */
/* ============================================ */
.limbo-display {
    text-align: center; padding: 40px;
    background: var(--bg-primary); min-height: 200px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.limbo-result { font-size: 64px; font-weight: 800; }
.limbo-target { font-size: 14px; color: var(--text-muted); margin-top: 8px; }

/* ============================================ */
/* WHEEL */
/* ============================================ */
.wheel-container { text-align: center; padding: 20px; }
.wheel-canvas-wrapper {
    position: relative; display: inline-block;
    margin: 20px auto;
}

/* ============================================ */
/* CHICKEN / WINGZ */
/* ============================================ */
.chicken-road {
    display: grid; gap: 4px; padding: 16px;
    background: var(--bg-primary);
}
.chicken-lane {
    padding: 12px; border-radius: var(--border-radius-sm);
    background: var(--bg-tertiary); border: 2px solid var(--border-color);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 24px; transition: var(--transition-fast); min-height: 50px;
}
.chicken-lane:hover:not(.revealed) { border-color: var(--accent-primary); }
.chicken-lane.safe { background: rgba(0,231,1,0.15); border-color: var(--accent-success); }
.chicken-lane.danger { background: rgba(237,28,36,0.15); border-color: var(--accent-danger); }

/* ============================================ */
/* TOWER */
/* ============================================ */
.tower-container { display: flex; gap: 0; }
.tower-grid { flex: 1; padding: 16px; background: var(--bg-primary); }
.tower-level {
    display: flex; gap: 6px; margin-bottom: 6px; justify-content: center;
}
.tower-tile {
    flex: 1; max-width: 100px; aspect-ratio: 1; border-radius: var(--border-radius-sm);
    background: var(--bg-tertiary); border: 2px solid var(--border-color);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 20px; transition: var(--transition-fast);
}
.tower-tile:hover:not(.revealed) { border-color: var(--accent-primary); }
.tower-tile.revealed.egg { background: rgba(0,231,1,0.15); border-color: var(--accent-success); }
.tower-tile.revealed.skull { background: rgba(237,28,36,0.15); border-color: var(--accent-danger); }

.tower-controls {
    width: 280px; padding: 16px; border-left: 1px solid var(--border-color);
}
.tower-multiplier-display {
    text-align: center; margin: 16px 0;
    font-size: 28px; font-weight: 800; color: var(--accent-primary);
}

/* bet-mult-btn class used in tower */
.bet-mult-btn {
    padding: 6px 12px; font-size: 12px; font-weight: 700;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 4px; color: var(--text-secondary);
    transition: var(--transition-fast);
}
.bet-mult-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.bet-mult-btn.allin { color: var(--accent-primary); }

/* ============================================ */
/* ARCADE GAMES */
/* ============================================ */
.arcade-game {
    max-width: 600px; margin: 0 auto; padding: 20px;
}
.game-subtitle {
    font-size: 13px; color: var(--text-muted); margin-bottom: 16px;
}

/* ---- Solitaire ---- */
.sol-controls {
    display: flex; gap: 12px; align-items: center; margin-bottom: 16px;
    padding: 0 16px;
}
.sol-controls span { font-size: 13px; color: var(--text-secondary); }

.sol-board { padding: 16px; }

.sol-top-row {
    display: flex; justify-content: space-between; margin-bottom: 24px; gap: 16px;
}
.sol-stock-waste { display: flex; gap: 12px; }
.sol-foundations { display: flex; gap: 12px; }

.sol-pile {
    width: 75px; min-height: 108px;
    background: rgba(255,255,255,0.03);
    border: 2px dashed var(--border-color);
    border-radius: 8px; position: relative;
    cursor: pointer; transition: var(--transition-fast);
    flex-shrink: 0;
}
.sol-pile:hover { border-color: var(--accent-primary); }
.sol-pile.sol-stock { cursor: pointer; }
.sol-pile.sol-foundation {
    border-color: rgba(0,231,1,0.2);
}

.sol-tableau {
    display: flex; gap: 12px; justify-content: center;
}
.sol-tableau-pile {
    min-height: 300px; border: none; background: none;
    border-style: solid; border-color: transparent;
}

.sol-card {
    width: 71px; height: 104px;
    border-radius: 6px; position: absolute; left: 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    user-select: none;
}
.sol-card:hover { box-shadow: 0 2px 8px rgba(0,231,1,0.3); z-index: 10; }
.sol-card.back {
    background: linear-gradient(135deg, #1a3e8e, #2c5fb5);
    border: 1px solid #3566c0;
}
.sol-card.red {
    background: #fff; color: #c0392b;
    border: 1px solid #ddd;
}
.sol-card.black {
    background: #fff; color: #2c3e50;
    border: 1px solid #ddd;
}
.sol-rank { font-size: 16px; font-weight: 800; line-height: 1; }
.sol-suit { font-size: 20px; line-height: 1; margin-top: 2px; }
.sol-status {
    text-align: center; padding: 12px; font-size: 16px; font-weight: 700;
    color: var(--accent-success);
}

/* ---- Minesweeper ---- */
.ms-controls {
    display: flex; gap: 8px; margin-bottom: 12px; align-items: center;
    padding: 0 16px;
}
.ms-controls select {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 4px; padding: 8px 12px; color: var(--text-primary);
    font-size: 13px;
}
.ms-info {
    display: flex; gap: 16px; justify-content: center;
    margin-bottom: 12px; font-size: 14px;
}
.ms-board, .ms-grid {
    display: grid; gap: 2px; justify-content: center;
    margin: 0 auto; padding: 0 16px 16px;
}
.ms-cell {
    width: 32px; height: 32px; background: var(--bg-tertiary);
    border: 1px solid var(--border-color); border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; font-weight: 700;
    transition: var(--transition-fast);
}
.ms-cell:hover { background: var(--bg-card-hover); }
.ms-cell.revealed { background: var(--bg-primary); cursor: default; }
.ms-cell.mine { background: rgba(237,28,36,0.2); }
.ms-cell.flagged { background: rgba(255,184,0,0.1); }
.ms-cell[data-count="1"] { color: #3498db; }
.ms-cell[data-count="2"] { color: #27ae60; }
.ms-cell[data-count="3"] { color: #e74c3c; }
.ms-cell[data-count="4"] { color: #8e44ad; }
.ms-cell[data-count="5"] { color: #e67e22; }
.ms-cell[data-count="6"] { color: #1abc9c; }
.ms-cell[data-count="7"] { color: #2c3e50; }
.ms-cell[data-count="8"] { color: #95a5a6; }
.ms-status {
    text-align: center; padding: 12px; font-size: 16px; font-weight: 700;
}

/* ============================================ */
/* POKER */
/* ============================================ */
.poker-container { max-width: 900px; margin: 0 auto; }
.poker-table-felt {
    background: #0d4a1e; border-radius: 120px;
    min-height: 300px; margin: 16px; padding: 32px;
    position: relative; border: 4px solid #0a3015;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.poker-community-cards {
    display: flex; gap: 8px; justify-content: center; margin: 16px 0;
}
.poker-card {
    width: 60px; height: 85px; background: #fff; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: #000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.poker-card.red { color: #c0392b; }
.poker-card.hidden { background: linear-gradient(135deg, #1a3e8e, #2c5fb5); }
.poker-players {
    display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
}
.poker-player-seat {
    text-align: center; padding: 8px;
}
.poker-player-name { font-size: 12px; font-weight: 600; margin-top: 4px; }
.poker-player-chips { font-size: 11px; color: var(--accent-warning); }
.poker-actions {
    display: flex; gap: 8px; padding: 16px; justify-content: center; flex-wrap: wrap;
}
.poker-btn {
    padding: 10px 20px; font-size: 13px; font-weight: 700;
    border-radius: var(--border-radius-sm); text-transform: uppercase;
    transition: var(--transition-fast);
}
.poker-btn:hover { transform: translateY(-1px); }
.poker-btn.fold { background: var(--accent-danger); color: #fff; }
.poker-btn.check { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); }
.poker-btn.call { background: var(--accent-blue); color: #fff; }
.poker-btn.raise { background: var(--accent-warning); color: #000; }
.poker-btn.allin { background: var(--accent-primary); color: #000; }

.poker-pot {
    text-align: center; margin: 8px 0; font-size: 14px;
}

/* ============================================ */
/* KART */
/* ============================================ */
.kart-container { max-width: 900px; margin: 0 auto; }
.kart-track-wrapper {
    background: var(--bg-primary); border-radius: var(--border-radius);
    overflow: hidden;
}
.kart-lobby {
    padding: 20px; text-align: center;
}
.kart-room-list {
    display: grid; gap: 8px; margin: 16px 0;
}
.kart-room-card {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; transition: var(--transition-fast);
}
.kart-room-card:hover { border-color: var(--accent-primary); }

/* ============================================ */
/* MINECRAFT */
/* ============================================ */
.minecraft-container {
    display: flex; flex-direction: column; gap: 16px;
}
.mc-rooms-panel {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius); padding: 20px;
}
.mc-rooms-list { display: grid; gap: 8px; margin-top: 12px; }
.mc-room-card {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 14px 16px;
    display: flex; justify-content: space-between; align-items: center;
    transition: var(--transition-fast);
}
.mc-room-card:hover { border-color: var(--accent-primary); }
.mc-game-frame {
    border-radius: var(--border-radius); overflow: hidden;
    border: 1px solid var(--border-color);
}
.mc-chat {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius); padding: 16px;
}
.minecraft-lobby { padding: 20px; }
.minecraft-toolbar {
    display: flex; gap: 8px; padding: 8px;
    background: var(--bg-secondary); border-bottom: 1px solid var(--border-color);
}
.minecraft-toolbar .action-btn { width: auto; padding: 8px 16px; }

/* ============================================ */
/* WALLET / MONEY TRANSFER */
/* ============================================ */
.wallet-container { max-width: 700px; margin: 0 auto; }
.wallet-tabs {
    display: flex; gap: 4px; margin-bottom: 20px;
    background: var(--bg-primary); border-radius: var(--border-radius-sm); padding: 4px;
}
.wallet-tab {
    flex: 1; padding: 10px; border-radius: 4px; font-size: 13px;
    font-weight: 600; color: var(--text-muted); text-align: center;
    transition: var(--transition-fast);
}
.wallet-tab.active { background: var(--bg-tertiary); color: var(--text-primary); }
.wallet-tab:hover:not(.active) { color: var(--text-secondary); }

.money-form {
    display: flex; flex-direction: column; gap: 14px; margin-top: 16px;
}
.money-form input, .money-form select, .money-form textarea {
    padding: 12px 16px; background: var(--bg-primary); border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm); font-size: 14px;
    transition: var(--transition-fast);
}
.money-form input:focus, .money-form textarea:focus { border-color: var(--accent-primary); }

.request-card {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 14px;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.request-actions { display: flex; gap: 6px; }
.request-actions button {
    padding: 6px 14px; border-radius: 4px; font-size: 12px; font-weight: 700;
    transition: var(--transition-fast);
}

/* ============================================ */
/* INVITATION CODES */
/* ============================================ */
.invite-section { margin-top: 24px; }
.invite-code-card {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; font-family: monospace;
}
.invite-code-card .code { font-size: 15px; font-weight: 700; color: var(--accent-primary); letter-spacing: 1px; }
.invite-code-card .status { font-size: 12px; }
.invite-code-card .status.used { color: var(--text-muted); }
.invite-code-card .status.available { color: var(--accent-success); }

/* ============================================ */
/* DONKEY KONG */
/* ============================================ */
.dk-container {
    text-align: center; padding: 16px;
}
.dk-canvas-wrapper {
    display: inline-block; position: relative;
    border-radius: var(--border-radius); overflow: hidden;
    border: 2px solid var(--border-color);
}
.dk-controls {
    display: flex; gap: 8px; justify-content: center; margin-top: 12px;
}
.dk-score-display {
    display: flex; gap: 24px; justify-content: center; margin: 12px 0;
    font-size: 14px;
}
.dk-score-item { display: flex; align-items: center; gap: 6px; }
.dk-score-label { color: var(--text-muted); }
.dk-score-value { font-weight: 700; color: var(--accent-warning); }

/* ============================================ */
/* WINS CHAT */
/* ============================================ */
.wins-chat {
    width: 280px; background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; height: 100vh;
    transform: translateX(100%); transition: var(--transition-normal);
    z-index: 80;
}
.wins-chat.open { transform: translateX(0); }

.wins-chat-header {
    padding: 16px 20px; border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 700; color: var(--accent-warning);
}
.wins-chat-messages {
    flex: 1; overflow-y: auto; padding: 12px;
}
.win-chat-entry {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: var(--border-radius-sm);
    margin-bottom: 4px; font-size: 12px;
    background: rgba(255,255,255,0.02);
}
.win-chat-entry .win-user { font-weight: 600; color: var(--text-primary); }
.win-chat-entry .win-game { color: var(--text-muted); }
.win-chat-entry .win-amount { margin-left: auto; font-weight: 700; color: var(--accent-success); }

/* ============================================ */
/* MODAL */
/* ============================================ */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7);
    display: none; align-items: center; justify-content: center;
    z-index: var(--z-modal); backdrop-filter: blur(4px);
}
.modal-overlay.active { display: flex; }

.modal {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg); width: 90%; max-width: 500px;
    max-height: 90vh; overflow-y: auto;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border-color);
}
.modal-title { font-size: 16px; font-weight: 700; }
.modal-close {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--border-radius-sm); font-size: 20px; color: var(--text-muted);
    transition: var(--transition-fast);
}
.modal-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.modal-content { padding: 20px; }

/* ============================================ */
/* WIN NOTIFICATIONS */
/* ============================================ */
.win-notification {
    position: fixed; inset: 0; background: rgba(0,0,0,0.8);
    display: none; align-items: center; justify-content: center;
    z-index: 2000; backdrop-filter: blur(8px);
}
.win-notification.active { display: flex; }
.win-content { text-align: center; animation: winPop 0.5s ease; }
.win-title {
    font-size: 18px; font-weight: 700; color: var(--accent-warning);
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px;
}
.win-amount { font-size: 56px; font-weight: 800; color: var(--accent-success); }
.win-multiplier { font-size: 24px; color: var(--accent-warning); font-weight: 700; }

@keyframes winPop {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* Small Win Popup */
.small-win-popup {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px);
    background: var(--bg-secondary); border: 1px solid var(--accent-success);
    border-radius: var(--border-radius); padding: 12px 20px;
    display: flex; align-items: center; gap: 12px; z-index: 1500;
    transition: transform 0.3s ease; box-shadow: 0 4px 20px rgba(0,231,1,0.15);
}
.small-win-popup.active { transform: translateX(-50%) translateY(0); }
.small-win-icon { font-size: 24px; }
.small-win-info { display: flex; flex-direction: column; }
.small-win-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.small-win-amount { font-size: 18px; font-weight: 800; color: var(--accent-success); }
.small-win-mult { font-size: 13px; color: var(--accent-warning); font-weight: 600; }

/* ============================================ */
/* TOAST */
/* ============================================ */
.toast-container {
    position: fixed; top: 16px; right: 16px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: var(--z-toast);
}
.toast {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    min-width: 280px; max-width: 400px;
    animation: toastSlide 0.3s ease;
    box-shadow: var(--shadow-lg);
}
.toast.success { border-left: 3px solid var(--accent-success); }
.toast.error { border-left: 3px solid var(--accent-danger); }
.toast.warning { border-left: 3px solid var(--accent-warning); }
.toast.info { border-left: 3px solid var(--accent-blue); }

.toast-icon { font-size: 16px; }
.toast.success .toast-icon { color: var(--accent-success); }
.toast.error .toast-icon { color: var(--accent-danger); }
.toast.warning .toast-icon { color: var(--accent-warning); }
.toast.info .toast-icon { color: var(--accent-blue); }

.toast-message { flex: 1; font-size: 13px; color: var(--text-secondary); }
.toast-close {
    font-size: 18px; color: var(--text-muted); transition: var(--transition-fast);
    line-height: 1;
}
.toast-close:hover { color: var(--text-primary); }

@keyframes toastSlide {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ============================================ */
/* SHOP & BOXES */
/* ============================================ */
.shop-container { max-width: 900px; margin: 0 auto; }
.shop-section { margin-bottom: 20px; }
.shop-description {
    font-size: 13px; color: var(--text-muted); margin: 0 20px 8px;
}
.shop-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px; padding: 0 20px 20px;
}
.shop-item {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius); padding: 16px; text-align: center;
    transition: var(--transition-fast); cursor: pointer;
}
.shop-item:hover { border-color: var(--accent-primary); transform: translateY(-2px); }
.shop-item.owned { border-color: var(--accent-success); opacity: 0.85; }
.shop-item-card {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius); padding: 16px; text-align: center;
    transition: var(--transition-fast);
}
.shop-item-card:hover { border-color: var(--accent-primary); }

.color-preview {
    width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 10px;
    border: 2px solid rgba(255,255,255,0.1);
}
.avatar-preview {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px;
    overflow: hidden; border: 2px solid var(--border-color);
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

.shop-item-info { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.shop-item-name { font-size: 14px; font-weight: 600; }
.shop-item-price { font-size: 12px; color: var(--accent-warning); }
.shop-buy-btn {
    padding: 8px 16px; background: var(--accent-primary); color: #000;
    font-size: 12px; font-weight: 700; border-radius: 4px;
    transition: var(--transition-fast); text-transform: uppercase;
}
.shop-buy-btn:hover { background: var(--accent-secondary); }
.shop-balance {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    font-size: 24px; font-weight: 800; color: var(--accent-success);
    padding: 16px 20px;
}
.shop-balance i { color: var(--accent-warning); }

.box-card {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius); padding: 20px; text-align: center;
    cursor: pointer; transition: var(--transition-fast);
}
.box-card:hover { border-color: var(--accent-warning); transform: translateY(-2px); }
.box-icon { font-size: 48px; margin-bottom: 8px; }
.box-name { font-size: 16px; font-weight: 700; }
.box-price { font-size: 14px; color: var(--accent-warning); margin-top: 4px; }

/* Box opening animation */
.box-opening-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
}
.box-reward {
    text-align: center; animation: boxReveal 0.8s ease;
}
.box-reward-amount { font-size: 48px; font-weight: 800; color: var(--accent-success); }
.box-reward-label { font-size: 14px; color: var(--text-muted); margin-top: 8px; }

@keyframes boxReveal {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    60% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ============================================ */
/* RANKING / PROFILE */
/* ============================================ */
.ranking-card { max-width: 800px; margin: 0 auto; }
.ranking-header-row {
    display: flex; align-items: center; padding: 10px 20px;
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}
.ranking-col-pos { width: 60px; text-align: center; }
.ranking-col-player { flex: 1; }
.ranking-col-balance { width: 140px; text-align: right; }

.ranking-list { padding: 4px 0; }
.ranking-item {
    display: flex; align-items: center; padding: 10px 20px;
    transition: var(--transition-fast);
    border-bottom: 1px solid rgba(47,69,83,0.3);
}
.ranking-item:hover { background: rgba(255,255,255,0.02); }
.ranking-item.me { background: rgba(0,231,1,0.05); }
.ranking-item.top-three .ranking-position { font-size: 20px; }

.ranking-position {
    width: 60px; text-align: center; font-weight: 700; font-size: 15px;
    color: var(--text-secondary);
}
.ranking-player {
    flex: 1; display: flex; align-items: center; gap: 12px;
}
.ranking-avatar {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    border: 2px solid var(--border-color); flex-shrink: 0;
}
.ranking-item.top-three:nth-child(1) .ranking-avatar { border-color: #ffd700; }
.ranking-item.top-three:nth-child(2) .ranking-avatar { border-color: #c0c0c0; }
.ranking-item.top-three:nth-child(3) .ranking-avatar { border-color: #cd7f32; }
.ranking-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ranking-name { font-size: 14px; font-weight: 600; }
.ranking-balance {
    width: 140px; text-align: right; display: flex; align-items: center;
    justify-content: flex-end; gap: 6px; font-size: 14px; font-weight: 700;
    color: var(--accent-success);
}
.ranking-balance i { color: var(--accent-warning); font-size: 12px; }

/* Old table-based ranking (compat) */
.ranking-container { max-width: 800px; margin: 0 auto; }
.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th, .ranking-table td {
    padding: 12px 16px; text-align: left; font-size: 13px;
    border-bottom: 1px solid var(--border-color);
}
.ranking-table th {
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.ranking-table tr:hover { background: rgba(255,255,255,0.02); }
.ranking-user {
    display: flex; align-items: center; gap: 10px;
}

.profile-container { max-width: 600px; margin: 0 auto; }
.profile-header {
    display: flex; align-items: center; gap: 20px; margin-bottom: 24px;
    padding: 24px; background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
}
.profile-avatar {
    width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
    border: 3px solid var(--accent-primary);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 24px; font-weight: 700; }
.profile-balance { font-size: 16px; color: var(--accent-success); font-weight: 600; }
.profile-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.profile-stat {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm); padding: 16px; text-align: center;
}
.profile-stat-label { font-size: 12px; color: var(--text-muted); }
.profile-stat-value { font-size: 20px; font-weight: 700; margin-top: 4px; }

.profile-section {
    text-align: center; padding: 24px;
}
.profile-section h2 { font-size: 22px; font-weight: 700; margin-top: 12px; }
.profile-section p { font-size: 15px; color: var(--text-secondary); margin-top: 6px; }
.profile-section strong { color: var(--accent-success); }

.watch-ad-section {
    padding: 20px; border-top: 1px solid var(--border-color);
    text-align: center;
}
.watch-ad-section h3 {
    font-size: 16px; font-weight: 700; margin-bottom: 6px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.watch-ad-section h3 i { color: var(--accent-warning); }
.watch-ad-section p { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.watch-ad-btn { max-width: 300px; margin: 0 auto; }

.profile-pic-upload {
    padding: 20px; border-top: 1px solid var(--border-color);
    text-align: center;
}
.profile-pic-upload h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.profile-pic-upload p { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.profile-pic-upload input[type="file"] {
    display: block; margin: 12px auto; font-size: 13px; color: var(--text-secondary);
}
.profile-pic-upload .action-btn { max-width: 300px; margin: 8px auto 0; }

.ad-modal {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.8); align-items: center; justify-content: center;
}
.ad-modal.active { display: flex; }
.ad-modal-content {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg); padding: 24px; max-width: 500px;
    width: 90%; text-align: center;
}
.ad-modal-header { margin-bottom: 16px; }
.ad-modal-header h3 { font-size: 16px; font-weight: 700; }
.ad-timer {
    display: inline-block; font-size: 32px; font-weight: 800;
    color: var(--accent-warning); margin-top: 8px;
}
.ad-container { margin: 16px 0; min-height: 100px; }
.ad-modal-footer { margin-top: 16px; }
.ad-modal-footer p { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.close-ad-btn {
    padding: 8px 20px; font-size: 13px; color: var(--text-muted);
    margin-top: 8px; transition: var(--transition-fast);
}
.close-ad-btn:hover { color: var(--text-primary); }

/* ============================================ */
/* GAME CATEGORY TABS */
/* ============================================ */
.lobby-categories {
    display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto;
    padding-bottom: 4px;
}
.lobby-category {
    padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    color: var(--text-muted); white-space: nowrap;
    transition: var(--transition-fast);
}
.lobby-category:hover { color: var(--text-primary); border-color: var(--border-light); }
.lobby-category.active {
    background: var(--accent-primary); color: #000; border-color: var(--accent-primary);
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */
@media (max-width: 1200px) {
    .wins-chat { display: none; }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        position: fixed; z-index: 200;
    }
    .sidebar.mobile-open { transform: translateX(0); }

    .main-content { margin-left: 0; }
    .mobile-menu-toggle { display: flex; }

    .content-area { padding: 16px; }

    .lobby-hero-content { flex-direction: column; text-align: center; gap: 16px; }
    .lobby-stats { grid-template-columns: 1fr; }
    .lobby-games-grid { grid-template-columns: repeat(2, 1fr); }
    .lobby-games-grid.featured { grid-template-columns: repeat(2, 1fr); }

    .crash-container, .mines-container, .plinko-container, .tower-container {
        flex-direction: column;
    }
    .crash-controls, .mines-controls, .plinko-controls, .tower-controls {
        width: 100%; border-left: none; border-top: 1px solid var(--border-color);
    }

    .search-box { display: none; }
    .top-bar { padding: 0 12px; }

    .bj-card { width: 55px; height: 80px; font-size: 16px; }

    .lobby-balance-card { padding: 14px 20px; }
    .lobby-balance-amount { font-size: 24px; }
}

@media (max-width: 480px) {
    .lobby-games-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .lobby-game-image { height: 100px; }
    .lobby-game-icon { font-size: 36px; }
    .balance-box { padding: 6px 10px; }
    .balance-amount { font-size: 13px; }
}

/* ============================================ */
/* UTILITY CLASSES */
/* ============================================ */
.text-success { color: var(--accent-success) !important; }
.text-danger { color: var(--accent-danger) !important; }
.text-warning { color: var(--accent-warning) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-center { text-align: center !important; }
.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important; }
.p-2 { padding: 16px !important; }
.p-3 { padding: 24px !important; }
.gap-1 { gap: 8px !important; }
.gap-2 { gap: 16px !important; }
.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.items-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.grid { display: grid !important; }
.w-full { width: 100% !important; }
.hidden { display: none !important; }