/* =============================================
   LARPSINO - Premium Casino Theme v3
   Refined dark luxury with glass accents
   ============================================= */
:root {
    --bg-darkest: #060810;
    --bg-primary: #0a0d15;
    --bg-secondary: #0e1219;
    --bg-card: #131720;
    --bg-card-hover: #191e2a;
    --bg-input: #0c0f16;
    --bg-elevated: #1a1f2c;
    --bg-glass: rgba(16, 20, 30, 0.82);

    --accent: #00d4ff;
    --accent-rgb: 0, 212, 255;
    --accent-dim: #0098b8;
    --accent-glow: rgba(0, 212, 255, 0.12);
    --accent-glow-strong: rgba(0, 212, 255, 0.25);
    --accent2: #7c3aed;
    --accent2-rgb: 124, 58, 237;
    --accent3: #f0b90b;
    --accent3-rgb: 240, 185, 11;

    --text-primary: #d8dce6;
    --text-secondary: #6b7590;
    --text-muted: #3d4559;
    --text-bright: #f0f2f8;

    --success: #00e676;
    --success-rgb: 0, 230, 118;
    --danger: #ff3d57;
    --danger-rgb: 255, 61, 87;
    --warning: #ffab00;

    --border-color: rgba(255, 255, 255, 0.05);
    --border-light: rgba(255, 255, 255, 0.08);
    --border-accent: rgba(0, 212, 255, 0.12);

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --sidebar-width: 230px;
    --sidebar-collapsed: 64px;
    --topbar-height: 54px;
    --chat-width: 280px;

    --font-display: 'Orbitron', sans-serif;
    --font-ui: 'Rajdhani', sans-serif;
    --font-body: 'DM Sans', sans-serif;

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.55);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);
    --shadow-accent: 0 0 20px rgba(var(--accent-rgb), 0.18), 0 0 60px rgba(var(--accent-rgb), 0.06);
    --shadow-glow: 0 0 24px rgba(var(--accent-rgb), 0.1), 0 0 64px rgba(var(--accent-rgb), 0.04);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

    --transition-fast: 100ms ease;
    --transition: 200ms ease;
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-ui); background: var(--bg-darkest); color: var(--text-primary); overflow: hidden; height: 100vh; width: 100vw; font-weight: 500; letter-spacing: 0.2px; }
::selection { background: rgba(var(--accent-rgb), 0.22); color: var(--text-bright); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-ui); cursor: pointer; border: none; background: none; color: inherit; font-size: inherit; font-weight: 500; }
input, select, textarea { font-family: var(--font-ui); color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 0.92rem; font-weight: 500; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
input:focus, select:focus { border-color: rgba(var(--accent-rgb), 0.4); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08); }
select { appearance: none; cursor: pointer; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7590' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }

/* --- LAYOUT --- */
#app { display: flex; height: 100vh; width: 100vw; overflow: hidden; background: var(--bg-darkest); position: relative; z-index: 1; }
.main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.content-row { flex: 1; display: flex; overflow: hidden; min-height: 0; }

/* --- SIDEBAR --- */
.sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); height: 100vh; background: var(--bg-primary); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; transition: width var(--transition), min-width var(--transition); z-index: 100; overflow: hidden; }
.sidebar.collapsed { width: var(--sidebar-collapsed); min-width: var(--sidebar-collapsed); }
.sidebar.collapsed .logo-text, .sidebar.collapsed .nav-link span, .sidebar.collapsed .nav-section-label, .sidebar.collapsed .sidebar-search, .sidebar.collapsed .online-text { opacity: 0; pointer-events: none; width: 0; overflow: hidden; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0 10px; }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
.sidebar.collapsed .nav-link { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .sidebar-footer { justify-content: center; }

.sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; flex-shrink: 0; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-text { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--accent); letter-spacing: 3px; white-space: nowrap; transition: opacity var(--transition); text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3); }
.sidebar-collapse-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--text-secondary); transition: all var(--transition-fast); }
.sidebar-collapse-btn:hover { background: var(--bg-card); color: var(--text-primary); }
.sidebar-collapse-btn svg { transition: transform var(--transition); }

.sidebar-search { padding: 0 10px 10px; display: flex; align-items: center; gap: 8px; transition: opacity var(--transition); }
.sidebar-search input { flex: 1; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 7px 10px; font-size: 0.82rem; }
.sidebar-search svg { color: var(--text-muted); flex-shrink: 0; }

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 6px; }
.nav-section-label { font-size: 0.6rem; font-weight: 700; color: var(--text-muted); letter-spacing: 2px; padding: 10px 12px 4px; white-space: nowrap; transition: opacity var(--transition); }
.nav-divider { height: 1px; background: var(--border-color); margin: 6px 12px; }
.nav-link { display: flex; align-items: center; gap: 11px; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.88rem; font-weight: 600; transition: all var(--transition-fast); white-space: nowrap; position: relative; }
.nav-link:hover { background: rgba(255,255,255,0.03); color: var(--text-primary); }
.nav-link.active { background: rgba(var(--accent-rgb), 0.06); color: var(--accent); }
.nav-link.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; background: var(--accent); border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4); }
.nav-link svg { flex-shrink: 0; }
.nav-link span { transition: opacity var(--transition); }

.sidebar-footer { padding: 10px 14px; border-top: 1px solid var(--border-color); flex-shrink: 0; }
.online-indicator { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--text-secondary); }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(var(--success-rgb),0.35)} 50%{box-shadow:0 0 0 5px rgba(var(--success-rgb),0)} }
.online-text { white-space: nowrap; transition: opacity var(--transition); }

/* --- TOPBAR --- */
.topbar { height: var(--topbar-height); min-height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(10,13,21,0.95) 100%); border-bottom: 1px solid var(--border-color); gap: 12px; z-index: 50; backdrop-filter: blur(12px); }
.topbar-left { display: flex; align-items: center; }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wallet-bar { display: flex; align-items: center; background: rgba(255,255,255,0.02); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; backdrop-filter: blur(4px); }
.currency-pill select { background: rgba(0,0,0,0.3); border: none; border-right: 1px solid var(--border-color); border-radius: 0; padding: 7px 28px 7px 10px; font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.balance-display { padding: 0 14px; font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--text-bright); min-width: 90px; text-align: right; font-family: var(--font-display); letter-spacing: 0.5px; }
.topbar-actions { display: flex; align-items: center; gap: 2px; }
.icon-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--text-secondary); transition: all var(--transition-fast); position: relative; }
.icon-btn:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.notif-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; background: var(--danger); border-radius: 50%; border: 2px solid var(--bg-primary); }
.user-avatar { background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); }
.mobile-only { display: none; }

/* --- BUTTONS --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.88rem; transition: all var(--transition-fast); white-space: nowrap; letter-spacing: 0.5px; }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; border-radius: var(--radius-sm); }
.btn-lg { padding: 13px 26px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-accent { background: linear-gradient(135deg, var(--accent) 0%, #0098d4 100%); color: #040608; font-weight: 800; box-shadow: var(--shadow-inset); position: relative; overflow: hidden; }
.btn-accent::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%); pointer-events: none; }
.btn-accent:hover { box-shadow: var(--shadow-accent), var(--shadow-inset); filter: brightness(1.08); transform: translateY(-1px); }
.btn-accent:active { transform: translateY(0) scale(0.98); }
.btn-accent:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.btn-secondary { background: rgba(255,255,255,0.04); border: 1px solid var(--border-light); color: var(--text-primary); }
.btn-secondary:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); }
.btn-danger { background: linear-gradient(135deg, var(--danger), #cc2040); color: white; }
.btn-danger:hover { filter: brightness(1.1); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.btn-outline { background: transparent; border: 1px solid rgba(var(--accent-rgb), 0.3); color: var(--accent); }
.btn-outline:hover { background: rgba(var(--accent-rgb), 0.06); border-color: rgba(var(--accent-rgb), 0.5); }

/* --- CONTENT AREA --- */
.content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; background: var(--bg-darkest); }

/* --- CHAT PANEL --- */
.chat-panel { width: var(--chat-width); min-width: var(--chat-width); background: var(--bg-primary); border-left: 1px solid var(--border-color); display: flex; flex-direction: column; transition: width var(--transition), min-width var(--transition), opacity var(--transition); }
.chat-panel.hidden { width: 0; min-width: 0; opacity: 0; overflow: hidden; border: none; }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.chat-header-left { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }
.chat-online-badge { font-size: 0.62rem; background: rgba(var(--success-rgb), 0.12); color: var(--success); padding: 1px 6px; border-radius: 10px; font-weight: 700; }
.chat-messages { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.chat-msg { padding: 5px 8px; border-radius: var(--radius-sm); font-size: 0.78rem; line-height: 1.45; animation: chatIn 0.2s ease; word-break: break-word; }
@keyframes chatIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg .chat-user { font-weight: 700; margin-right: 5px; }
.chat-msg .chat-user.u-mod { color: var(--accent); }
.chat-msg .chat-user.u-vip { color: var(--accent3); }
.chat-msg .chat-user.u-normal { color: var(--accent2); }
.chat-msg .chat-user.u-self { color: var(--success); }
.chat-msg .chat-text { color: var(--text-secondary); font-family: var(--font-body); }
.chat-msg.system-msg { background: rgba(var(--accent-rgb), 0.04); border: 1px solid rgba(var(--accent-rgb), 0.08); }
.chat-msg.system-msg .chat-text { color: var(--accent); font-size: 0.72rem; }
.chat-input-area { display: flex; padding: 8px; gap: 6px; border-top: 1px solid var(--border-color); flex-shrink: 0; }
.chat-input-area input { flex: 1; padding: 7px 10px; font-size: 0.82rem; border-radius: var(--radius); background: var(--bg-secondary); }
.chat-send-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius); background: var(--accent); color: var(--bg-darkest); transition: all var(--transition-fast); flex-shrink: 0; }
.chat-send-btn:hover { filter: brightness(1.15); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3); }

/* --- HOME PAGE --- */
.home-hero { background: linear-gradient(160deg, var(--bg-card) 0%, rgba(var(--accent-rgb), 0.04) 40%, rgba(var(--accent2-rgb), 0.04) 70%, var(--bg-card) 100%); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: 36px 40px; margin-bottom: 28px; position: relative; overflow: hidden; }
.home-hero::before { content: ''; position: absolute; top: -80%; right: -15%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.04) 0%, transparent 60%); pointer-events: none; }
.home-hero::after { content: ''; position: absolute; bottom: -60%; left: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(var(--accent2-rgb), 0.03) 0%, transparent 60%); pointer-events: none; }
.home-hero h1 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--text-bright); margin-bottom: 8px; letter-spacing: 2px; text-transform: uppercase; }
.home-hero p { color: var(--text-secondary); font-size: 0.92rem; font-family: var(--font-body); line-height: 1.5; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; letter-spacing: 0.5px; }
.section-title svg { color: var(--accent); }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 28px; }
.game-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.game-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), 0.2); box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 20px rgba(var(--accent-rgb), 0.06); }
.game-card-img { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.game-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%); pointer-events: none; }
.game-card-info { padding: 10px 12px; }
.game-card-info h4 { font-size: 0.9rem; font-weight: 700; margin-bottom: 2px; }
.game-card-info .game-edge { font-size: 0.7rem; color: var(--text-muted); }
.game-card-tag { position: absolute; top: 8px; right: 8px; background: linear-gradient(135deg, var(--accent), #0098d4); color: var(--bg-darkest); font-size: 0.6rem; font-weight: 800; padding: 2px 8px; border-radius: 20px; letter-spacing: 0.8px; z-index: 2; text-transform: uppercase; }
.gc-dice { background: linear-gradient(135deg, #181840, #2a1860); }
.gc-mines { background: linear-gradient(135deg, #0f2820, #0a4030); }
.gc-plinko { background: linear-gradient(135deg, #302010, #482808); }
.gc-roulette { background: linear-gradient(135deg, #101828, #0a2840); }
.gc-blackjack { background: linear-gradient(135deg, #201030, #301048); }
.gc-slots { background: linear-gradient(135deg, #301020, #481038); }

/* --- GAME PAGE LAYOUT --- */
.game-page { max-width: 1100px; margin: 0 auto; }
.game-page-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.game-page-header h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text-bright); letter-spacing: 2px; text-transform: uppercase; }
.game-page-header .back-btn { display: flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 0.82rem; padding: 5px 8px; border-radius: var(--radius-sm); transition: all var(--transition-fast); }
.game-page-header .back-btn:hover { background: rgba(255,255,255,0.04); color: var(--accent); }
.game-container { display: grid; grid-template-columns: 280px 1fr; gap: 16px; margin-bottom: 20px; }

/* --- BET PANEL --- */
.bet-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.bet-panel .panel-tabs { display: flex; background: var(--bg-input); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.bet-panel .panel-tab { flex: 1; padding: 7px; text-align: center; border-radius: var(--radius-xs); font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); transition: all var(--transition-fast); }
.bet-panel .panel-tab.active { background: rgba(255,255,255,0.06); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.8px; }
.form-label .label-value { color: var(--text-primary); text-transform: none; font-variant-numeric: tabular-nums; }
.input-group { display: flex; align-items: stretch; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.input-group:focus-within { border-color: rgba(var(--accent-rgb), 0.35); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.06); }
.input-group input { flex: 1; border: none; background: transparent; padding: 9px 11px; font-variant-numeric: tabular-nums; }
.input-group input:focus { box-shadow: none; }
.input-group .input-addon { display: flex; align-items: center; padding: 0 10px; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); background: rgba(0,0,0,0.3); border-left: 1px solid var(--border-color); letter-spacing: 0.5px; }
.input-group .input-btn { display: flex; align-items: center; justify-content: center; padding: 0 9px; color: var(--text-secondary); transition: all var(--transition-fast); border-left: 1px solid var(--border-color); font-size: 0.75rem; font-weight: 700; }
.input-group .input-btn:hover { background: rgba(255,255,255,0.04); color: var(--accent); }
.quick-amounts { display: flex; gap: 4px; }
.quick-amount-btn { flex: 1; padding: 5px 3px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-color); border-radius: var(--radius-xs); font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); transition: all var(--transition-fast); }
.quick-amount-btn:hover { border-color: rgba(var(--accent-rgb), 0.35); color: var(--accent); background: rgba(var(--accent-rgb), 0.04); }
.bet-button { padding: 12px; font-size: 0.95rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; border-radius: var(--radius-sm); transition: all var(--transition-fast); margin-top: auto; }
.bet-info-row { display: flex; justify-content: space-between; font-size: 0.82rem; }
.bet-info-row .info-label { color: var(--text-muted); }
.bet-info-row .info-value { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- GAME DISPLAY --- */
.game-display { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; min-height: 380px; }
.game-display-inner { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; padding: 16px; }
.game-display canvas { max-width: 100%; border-radius: var(--radius-sm); }

/* --- GAME HISTORY --- */
.game-history-bar { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px; }
.game-history-bar h4 { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.history-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.history-pill { padding: 3px 9px; border-radius: 20px; font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.history-pill.win { background: rgba(var(--success-rgb), 0.1); color: var(--success); }
.history-pill.loss { background: rgba(var(--danger-rgb), 0.1); color: var(--danger); }

/* --- DICE --- */
.dice-display { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px 16px; }
.dice-result { font-family: var(--font-display); font-size: 3.5rem; font-weight: 800; color: var(--text-bright); text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.25); transition: all 0.3s ease; min-height: 70px; display: flex; align-items: center; }
.dice-result.win { color: var(--success); text-shadow: 0 0 40px rgba(var(--success-rgb), 0.35); }
.dice-result.loss { color: var(--danger); text-shadow: 0 0 40px rgba(var(--danger-rgb), 0.35); }
.dice-slider-container { width: 100%; max-width: 560px; position: relative; padding: 16px 0; }
.dice-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; outline: none; }
.dice-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); transition: transform 0.15s; }
.dice-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.dice-markers { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.7rem; color: var(--text-muted); }

/* --- MINES --- */
.mines-grid-container { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px; }
.mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 380px; width: 100%; }
.mine-cell { aspect-ratio: 1; background: var(--bg-elevated); border: 2px solid var(--border-light); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); font-size: 1.4rem; }
.mine-cell:hover:not(.revealed) { border-color: rgba(var(--accent-rgb), 0.4); background: var(--bg-card-hover); transform: scale(1.05); }
.mine-cell.revealed.gem { background: rgba(var(--success-rgb), 0.1); border-color: var(--success); animation: cellReveal 0.3s ease; }
.mine-cell.revealed.mine { background: rgba(var(--danger-rgb), 0.1); border-color: var(--danger); animation: cellReveal 0.3s ease; }
@keyframes cellReveal { 0%{transform:scale(0.8);opacity:0.5} 50%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }

/* --- CRASH --- */
.crash-display { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.crash-canvas-wrapper { width: 100%; flex: 1; position: relative; }
.crash-multiplier-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--text-bright); text-shadow: 0 0 40px rgba(var(--accent-rgb), 0.25); z-index: 5; pointer-events: none; text-align: center; }
.crash-multiplier-overlay.crashed { color: var(--danger); text-shadow: 0 0 40px rgba(var(--danger-rgb), 0.35); }

/* --- PLINKO --- */
.plinko-display { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* --- ROULETTE --- */
.roulette-display { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
.roulette-spinner-wrap { width: 100%; max-width: 580px; position: relative; height: 70px; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border-light); background: var(--bg-darkest); }
.roulette-pointer { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; width: 2px; height: 100%; background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5); }
.roulette-pointer::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--accent); }
.roulette-strip { display: flex; position: absolute; top: 0; left: 0; height: 100%; transition: none; will-change: transform; }
.strip-num { width: 56px; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.03); }
.strip-num.s-red { background: #b91c1c; color: white; }
.strip-num.s-black { background: #1a2030; color: #cbd5e1; }
.strip-num.s-green { background: #15803d; color: white; }
.roulette-result-display { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; min-height: 40px; text-align: center; }
.roulette-board { display: grid; grid-template-columns: 40px repeat(12,1fr); grid-template-rows: repeat(5, auto); gap: 3px; max-width: 620px; width: 100%; }
.roulette-cell { padding: 7px 3px; text-align: center; border-radius: var(--radius-xs); font-size: 0.76rem; font-weight: 700; cursor: pointer; transition: all var(--transition-fast); border: 2px solid transparent; }
.roulette-cell:hover { border-color: var(--accent); transform: scale(1.05); z-index: 2; }
.roulette-cell.selected { border-color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2); }
.roulette-cell.r-red { background: #b91c1c; color: white; }
.roulette-cell.r-black { background: #1a2030; color: #e2e8f0; }
.roulette-cell.r-green { background: #15803d; color: white; }
.roulette-cell.r-wide { grid-column: span 4; background: var(--bg-elevated); color: var(--text-secondary); }
.roulette-cell.r-half { grid-column: span 2; background: var(--bg-elevated); color: var(--text-secondary); font-size: 0.68rem; }

/* --- BLACKJACK --- */
.blackjack-display { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 16px; }
.bj-hand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bj-hand-label { font-size: 0.78rem; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
.bj-hand-value { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.bj-cards { display: flex; }
.bj-card { width: 65px; height: 95px; background: white; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,0.35); margin-left: -14px; animation: dealCard 0.3s ease; position: relative; }
.bj-card:first-child { margin-left: 0; }
.bj-card.red { color: #c0392b; }
.bj-card.black { color: #2c3e50; }
.bj-card.face-down { background: linear-gradient(135deg, var(--accent2), #3a0e78); color: transparent; }
.bj-card.face-down::after { content: '?'; color: rgba(255,255,255,0.2); font-size: 1.8rem; }
.bj-card .card-suit { font-size: 0.75rem; }
.bj-card .card-rank { font-size: 1.1rem; }
@keyframes dealCard { 0%{transform:translateY(-40px)rotate(-8deg);opacity:0} 100%{transform:translateY(0)rotate(0);opacity:1} }
.bj-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bj-status { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; padding: 8px 18px; border-radius: var(--radius); min-height: 36px; }
.bj-status.win { background: rgba(var(--success-rgb), 0.1); color: var(--success); }
.bj-status.loss { background: rgba(var(--danger-rgb), 0.1); color: var(--danger); }
.bj-status.push { background: rgba(var(--accent3-rgb), 0.1); color: var(--warning); }

/* --- SLOTS --- */
.slots-display { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
.slots-machine { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: 16px; position: relative; }
.slots-reels { display: flex; gap: 5px; overflow: hidden; border-radius: var(--radius); background: var(--bg-darkest); padding: 3px; }
.slot-reel { width: 76px; height: 228px; overflow: hidden; position: relative; background: var(--bg-input); border-radius: var(--radius-sm); }
.slot-reel-inner { display: flex; flex-direction: column; transition: transform 0.5s cubic-bezier(0.17, 0.67, 0.12, 0.99); }
.slot-symbol { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; }
.slots-payline { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 76px; border: 2px solid rgba(var(--accent-rgb), 0.2); border-radius: var(--radius-sm); pointer-events: none; z-index: 5; }
.slots-result { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; min-height: 36px; }
.slots-result.win { color: var(--success); }
.slots-result.loss { color: var(--danger); }
.slots-paytable { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; max-width: 480px; }
.paytable-item { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg-secondary); border-radius: var(--radius-sm); font-size: 0.82rem; }
.paytable-item .pt-symbol { font-size: 1.1rem; }
.paytable-item .pt-mult { color: var(--accent); font-weight: 700; margin-left: auto; }

/* --- LIVE FEED --- */
.live-feed { background: var(--bg-primary); border-top: 1px solid var(--border-color); flex-shrink: 0; transition: height var(--transition); overflow: hidden; }
.live-feed.collapsed .feed-body { display: none; }
.live-feed.collapsed .feed-toggle-btn svg { transform: rotate(180deg); }
.feed-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--border-color); background: rgba(0,0,0,0.15); }
.feed-tabs { display: flex; gap: 3px; }
.feed-tab { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 700; color: var(--text-muted); transition: all var(--transition-fast); }
.feed-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.02); }
.feed-tab.active { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.feed-toggle-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--text-secondary); transition: all var(--transition-fast); }
.feed-toggle-btn:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.feed-toggle-btn svg { transition: transform var(--transition); }
.feed-body { height: 160px; overflow-y: auto; }
.feed-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.feed-table thead th { padding: 8px 16px; text-align: left; font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; position: sticky; top: 0; background: var(--bg-primary); z-index: 2; border-bottom: 1px solid var(--border-color); }
.feed-table tbody tr { border-top: 1px solid rgba(255,255,255,0.02); transition: background var(--transition-fast); }
.feed-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.008); }
.feed-table tbody tr:hover { background: rgba(var(--accent-rgb), 0.02); }
.feed-table tbody td { padding: 7px 16px; font-variant-numeric: tabular-nums; }
.feed-player { color: var(--accent); font-weight: 700; letter-spacing: 0.2px; }
.feed-game { color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.feed-game-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; opacity: 0.65; }
.feed-game-icon svg { width: 100%; height: 100%; }
.feed-payout.win { color: var(--success); font-weight: 700; text-shadow: 0 0 6px rgba(var(--success-rgb), 0.15); }
.feed-payout.loss { color: var(--danger); font-weight: 600; }
.feed-row-you { background: rgba(var(--accent-rgb), 0.04) !important; border-left: 2px solid var(--accent); }
.feed-row-you .feed-player { color: var(--success); font-weight: 700; }
.feed-row-you td:first-child { padding-left: 14px; }
@keyframes feedSlideIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* --- MODALS --- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); z-index: 1000; display: flex; align-items: center; justify-content: center; animation: modalFadeIn 0.2s ease; }
@keyframes modalFadeIn { from{opacity:0} to{opacity:1} }
.modal { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-xl); width: 90%; max-width: 480px; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0,0,0,0.65), 0 0 1px rgba(255,255,255,0.05) inset; animation: modalSlideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.modal-sm { max-width: 360px; }
.modal-checkout { max-width: 520px; }
@keyframes modalSlideUp { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.modal-header h3 { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 2px; color: var(--text-bright); text-transform: uppercase; }
.modal-close-btn { width: 30px; height: 30px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--text-secondary); transition: all var(--transition-fast); }
.modal-close-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.modal-tabs { display: flex; padding: 0 20px; gap: 0; border-bottom: 1px solid var(--border-color); }
.modal-tab { padding: 10px 18px; font-size: 0.86rem; font-weight: 700; color: var(--text-secondary); border-bottom: 2px solid transparent; transition: all var(--transition-fast); }
.modal-tab:hover { color: var(--text-primary); }
.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }

/* --- CHECKOUT --- */
.checkout-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.checkout-method { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-fast); }
.checkout-method:hover { border-color: rgba(var(--accent-rgb), 0.3); }
.checkout-method.selected { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.04); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.08); }
.checkout-method .method-icon { font-size: 1.8rem; }
.checkout-method .method-label { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.checkout-method .method-sub { font-size: 0.68rem; color: var(--text-muted); }
.checkout-crypto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.crypto-option { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius); cursor: pointer; transition: all var(--transition-fast); }
.crypto-option:hover { border-color: rgba(var(--accent-rgb), 0.3); }
.crypto-option.selected { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.04); }
.crypto-option .coin-icon { font-size: 1.4rem; }
.crypto-option .coin-label { font-size: 0.72rem; font-weight: 700; }
.checkout-address { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 12px; margin: 10px 0; }
.checkout-address .addr-label { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.checkout-address .addr-value { font-family: monospace; font-size: 0.78rem; word-break: break-all; color: var(--accent); }
.checkout-qr { width: 120px; height: 120px; background: white; border-radius: var(--radius); margin: 12px auto; display: flex; align-items: center; justify-content: center; }
.checkout-qr svg { width: 100px; height: 100px; }
.checkout-card-form { display: flex; flex-direction: column; gap: 12px; }
.checkout-card-form .card-row { display: flex; gap: 10px; }
.checkout-card-form .card-row > * { flex: 1; }
.checkout-processing { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 0; }
.checkout-spinner { width: 48px; height: 48px; border: 3px solid var(--border-color); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.checkout-success { text-align: center; padding: 20px 0; }
.checkout-success .success-check { width: 56px; height: 56px; border-radius: 50%; background: rgba(var(--success-rgb), 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.pay-brand-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.pay-brand { padding: 6px 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all var(--transition-fast); }
.pay-brand:hover, .pay-brand.selected { border-color: rgba(var(--accent-rgb), 0.4); color: var(--accent); }

/* --- WITHDRAW FLOW --- */
.wd-flow { display: flex; flex-direction: column; gap: 0; }
.wd-method-select { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.wd-method-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; }
.wd-method-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 50%); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
.wd-method-card:hover { border-color: rgba(var(--accent-rgb), 0.25); }
.wd-method-card:hover::before { opacity: 1; }
.wd-method-card.active { border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.04); box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.06); }
.wd-method-card.active::before { opacity: 1; }
.wd-method-card.active::after { content: ''; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5); }
.wd-method-icon { color: var(--text-secondary); transition: color 0.2s ease; }
.wd-method-card.active .wd-method-icon { color: var(--accent); }
.wd-method-label { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }
.wd-method-sub { font-size: 0.68rem; color: var(--text-muted); }
.wd-form-section { margin-bottom: 12px; }
.wd-summary { display: flex; flex-direction: column; gap: 0; padding: 10px 0; border-top: 1px solid var(--border-color); margin-top: 8px; }
.wd-summary-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.82rem; color: var(--text-muted); }
.wd-summary-row .wd-val-bright { color: var(--text-bright); font-weight: 700; }
.wd-submit-btn { margin-top: 12px; padding: 13px; font-size: 0.92rem; }
.wd-processing { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; gap: 16px; }
.wd-proc-text { font-size: 1rem; font-weight: 700; color: var(--text-bright); }
.wd-proc-sub { font-size: 0.82rem; color: var(--text-muted); }
.wd-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 20px 0; }
.wd-success-icon { margin-bottom: 4px; }
.wd-success-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-bright); letter-spacing: 1px; }
.wd-success-amount { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--success); text-shadow: 0 0 20px rgba(var(--success-rgb), 0.2); }
.wd-success-dest { font-size: 0.82rem; color: var(--text-muted); }
.wd-success-meta { width: 100%; max-width: 320px; margin-top: 12px; padding: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); }
.wd-meta-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.78rem; color: var(--text-secondary); }
.wd-meta-row .mono { font-family: monospace; font-size: 0.72rem; color: var(--text-muted); }

/* --- HISTORY PAGE --- */
.history-page { max-width: 860px; margin: 0 auto; }
.history-table-wrap { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.history-table { width: 100%; border-collapse: collapse; }
.history-table th { padding: 10px 14px; text-align: left; font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--border-color); }
.history-table td { padding: 9px 14px; font-size: 0.86rem; border-bottom: 1px solid rgba(255,255,255,0.02); font-variant-numeric: tabular-nums; }
.history-table .profit-positive { color: var(--success); font-weight: 700; }
.history-table .profit-negative { color: var(--danger); font-weight: 700; }

/* --- FAIRNESS PAGE --- */
.fairness-page { max-width: 660px; margin: 0 auto; }
.fairness-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; }
.fairness-card h3 { font-size: 0.92rem; font-weight: 700; margin-bottom: 10px; color: var(--text-bright); }
.fairness-card p { font-family: var(--font-body); color: var(--text-secondary); line-height: 1.6; font-size: 0.88rem; }
.seed-display { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px; font-family: monospace; font-size: 0.78rem; word-break: break-all; color: var(--accent); margin-top: 6px; }

/* --- STATS --- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 14px; text-align: center; position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 50%); pointer-events: none; }
.stat-card .stat-value { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text-bright); margin-bottom: 3px; }
.stat-card .stat-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 16px; gap: 10px; color: var(--text-muted); text-align: center; }
.empty-state p { font-size: 0.86rem; }

/* --- UTILITIES --- */
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-muted { color: var(--text-muted); }
.font-display { font-family: var(--font-display); }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }

/* --- ANIMATIONS --- */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes slideInRight { from{transform:translateX(20px);opacity:0} to{transform:translateX(0);opacity:1} }
.anim-fade-in { animation: fadeIn 0.25s ease; }
.anim-slide-up { animation: slideUp 0.35s ease; }

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .game-container { grid-template-columns: 240px 1fr; }
    .chat-panel { display: none; }
}
@media (max-width: 768px) {
    .sidebar { position: fixed; left: -260px; z-index: 200; transition: left var(--transition); }
    .sidebar.mobile-open { left: 0; }
    .mobile-only { display: flex; }
    .game-container { grid-template-columns: 1fr; }
    .bet-panel { order: -1; }
    .game-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .topbar { padding: 0 10px; }
    .content { padding: 14px; }
    .home-hero { padding: 20px; }
    .home-hero h1 { font-size: 1.2rem; }
    .chat-panel { display: none; }
}

/* --- NEW GAME CARD GRADIENTS --- */
.gc-crossyroad { background: linear-gradient(135deg, #0f2810, #1a4a18); }
.gc-towers { background: linear-gradient(135deg, #0a1828, #0a2840); }
.gc-airplane { background: linear-gradient(135deg, #08102a, #101848); }
.gc-coinflip { background: linear-gradient(135deg, #282008, #3a3008); }
.gc-limbo { background: linear-gradient(135deg, #1a0830, #2a1048); }

/* --- CROSSY ROAD --- */
.crossy-display { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; }
.crossy-road { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.crossy-finish { text-align: center; padding: 8px; background: rgba(var(--success-rgb), 0.1); border: 1px solid var(--success); border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 700; color: var(--success); letter-spacing: 2px; }
.crossy-lane { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-sm); min-height: 44px; transition: all 0.3s ease; }
.crossy-lane.crossed { background: rgba(var(--success-rgb), 0.06); border-color: rgba(var(--success-rgb), 0.3); }
.crossy-lane.busted { background: rgba(var(--danger-rgb), 0.08); border-color: rgba(var(--danger-rgb), 0.3); }
.crossy-lane-label { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); min-width: 50px; }
.crossy-lane.crossed .crossy-lane-label { color: var(--success); }
.crossy-lane.busted .crossy-lane-label { color: var(--danger); }
.crossy-obstacle { flex: 1; height: 4px; background: var(--border-color); border-radius: 2px; position: relative; overflow: hidden; }
.crossy-lane.crossed .crossy-obstacle { background: var(--success); opacity: 0.25; }
.crossy-lane.busted .crossy-obstacle { background: var(--danger); opacity: 0.4; }
.crossy-start { display: flex; justify-content: center; padding: 8px; background: var(--bg-secondary); border-radius: var(--radius-sm); position: relative; min-height: 48px; }
.crossy-player { position: absolute; bottom: 0; transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 5; }
.crossy-result { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; min-height: 36px; text-align: center; }
.crossy-result.win { color: var(--success); }
.crossy-result.loss { color: var(--danger); }

/* --- TOWERS --- */
.towers-display { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; }
.towers-grid { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 4px; }
.towers-floor { display: flex; align-items: center; gap: 6px; padding: 4px 0; opacity: 0.5; transition: opacity 0.3s ease; }
.towers-floor.active-floor { opacity: 1; }
.towers-floor.active-floor .towers-cell { border-color: rgba(var(--accent-rgb), 0.4); cursor: pointer; }
.towers-floor-mult { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); min-width: 50px; text-align: right; font-variant-numeric: tabular-nums; }
.towers-cell { flex: 1; aspect-ratio: 2/1; min-height: 36px; background: var(--bg-elevated); border: 2px solid var(--border-color); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
.towers-cell:hover { transform: scale(1.02); }
.towers-floor.active-floor .towers-cell:hover { background: var(--bg-card-hover); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.1); }
.towers-cell.safe { background: rgba(var(--success-rgb), 0.1); border-color: var(--success); }
.towers-cell.trap { background: rgba(var(--danger-rgb), 0.1); border-color: var(--danger); }
.towers-result { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; min-height: 36px; text-align: center; }
.towers-result.win { color: var(--success); }
.towers-result.loss { color: var(--danger); }

/* --- AIRPLANE --- */
.airplane-display { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.airplane-canvas-wrapper { width: 100%; flex: 1; position: relative; }

/* --- COINFLIP --- */
.coinflip-display { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px; }
.coin-container { perspective: 600px; width: 120px; height: 120px; }
.coin { width: 120px; height: 120px; position: relative; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
.coin.flipping { }
.coin-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.coin-heads { }
.coin-tails { transform: rotateX(180deg); }
.coinflip-result { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; min-height: 36px; text-align: center; }
.coinflip-result.win { color: var(--success); }
.coinflip-result.loss { color: var(--danger); }

/* --- LIMBO --- */
.limbo-display { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; }
.limbo-result-big { font-family: var(--font-display); font-size: 3.8rem; font-weight: 800; color: var(--text-bright); text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.25); transition: all 0.3s ease; min-height: 80px; display: flex; align-items: center; }
.limbo-result-big.win { color: var(--success); text-shadow: 0 0 40px rgba(var(--success-rgb), 0.35); }
.limbo-result-big.loss { color: var(--danger); text-shadow: 0 0 40px rgba(var(--danger-rgb), 0.35); }
.limbo-target-line { font-size: 0.88rem; color: var(--text-muted); padding: 8px 16px; background: var(--bg-elevated); border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.limbo-target-line span { color: var(--accent); font-weight: 700; }
.limbo-result-text { font-family: var(--font-display); font-size: 1rem; font-weight: 700; min-height: 30px; }
.limbo-result-text.win { color: var(--success); }
.limbo-result-text.loss { color: var(--danger); }

/* --- CHAT ROLES --- */
.chat-role { font-size: 0.58rem; font-weight: 700; padding: 1px 4px; border-radius: 3px; margin-right: 4px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.3px; }
.chat-role-mod { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.chat-role-vip { background: rgba(var(--accent3-rgb), 0.15); color: var(--accent3); }

/* --- BACKGROUND --- */
body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 15% 50%, rgba(var(--accent-rgb), 0.015) 0%, transparent 50%), radial-gradient(ellipse at 85% 20%, rgba(var(--accent2-rgb), 0.015) 0%, transparent 50%); pointer-events: none; z-index: 0; }

/* --- NEW GAME CARD GRADIENTS (added) --- */
.gc-keno   { background: linear-gradient(135deg, #052e1f, #0a4032); }
.gc-hilo   { background: linear-gradient(135deg, #1a0e30, #320a3e); }
.gc-wheel  { background: linear-gradient(135deg, #2c0d3a, #5a154a); }

/* --- HOME PAGE POLISH --- */
.home-hero h1 {
    background: linear-gradient(90deg, var(--text-bright) 0%, var(--accent) 50%, var(--accent2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.home-hero .hero-cta { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.home-hero .hero-stat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(var(--accent-rgb), 0.06); border: 1px solid rgba(var(--accent-rgb), 0.15); border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }
.home-hero .hero-stat .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px rgba(var(--success-rgb), 0.6); animation: pulseDot 1.6s infinite; }
@keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } }

.game-card { isolation: isolate; }
.game-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), 0.18), transparent 60%);
    transition: opacity 0.3s ease;
    z-index: 1;
}
.game-card:hover::after { opacity: 1; }
.game-card .game-card-img > span { transition: transform 0.4s cubic-bezier(0.2, 1.1, 0.3, 1); }
.game-card:hover .game-card-img > span { transform: scale(1.08) translateY(-2px); }
.game-card-tag { animation: tagShimmer 3.5s infinite; box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.35); }
.game-card-tag:not(:empty) {}
@keyframes tagShimmer {
    0%, 100% { box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.35); }
    50%      { box-shadow: 0 2px 18px rgba(var(--accent-rgb), 0.6); }
}

.section-title { position: relative; }
.section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.25), transparent); margin-left: 12px; }

/* Make tag styling per category nicer */
.game-card-tag.tag-new { background: linear-gradient(135deg, #10b981, #059669); }
.game-card-tag.tag-hot { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.game-card-tag.tag-popular { background: linear-gradient(135deg, #f59e0b, #d97706); }
.game-card-tag.tag-best { background: linear-gradient(135deg, #a855f7, #6d28d9); }

/* --- KENO --- */
.keno-display { padding: 20px; }
.keno-board { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; max-width: 600px; margin: 0 auto 20px; }
.keno-cell {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    background: var(--bg-elevated); border: 1.5px solid var(--border-color); border-radius: var(--radius-sm);
    font-size: 0.92rem; font-weight: 700; color: var(--text-secondary); cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-variant-numeric: tabular-nums;
}
.keno-cell:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb), 0.4); color: var(--text-bright); }
.keno-cell.picked { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.06)); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.25) inset; }
.keno-cell.drawn  { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); color: var(--text-muted); }
.keno-cell.hit    { background: linear-gradient(135deg, #10b981, #059669); border-color: #34d399; color: #fff; transform: scale(1.05); box-shadow: 0 0 18px rgba(16, 185, 129, 0.45); }
.keno-cell.miss   { background: rgba(var(--danger-rgb), 0.1); border-color: rgba(var(--danger-rgb), 0.45); color: var(--danger); opacity: 0.85; }
.keno-actions { display: flex; gap: 6px; }
.keno-actions .btn { flex: 1; padding: 7px; font-size: 0.75rem; }
.keno-payout-row { display: flex; flex-wrap: wrap; gap: 6px; max-width: 600px; margin: 0 auto; padding: 4px 0; justify-content: center; }
.keno-payout-pill { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 999px; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.keno-payout-pill.zero { opacity: 0.4; }
.keno-payout-pill.positive { border-color: rgba(var(--success-rgb), 0.35); }
.keno-payout-pill .kpp-hit { color: var(--text-muted); font-weight: 700; }
.keno-payout-pill .kpp-mult { color: var(--text-bright); font-weight: 700; }
.keno-payout-pill.positive .kpp-mult { color: var(--success); }
.keno-result-text { font-family: var(--font-display); font-size: 1rem; font-weight: 700; min-height: 30px; text-align: center; margin-top: 14px; }
.keno-result-text.win { color: var(--success); }
.keno-result-text.loss { color: var(--danger); }

/* --- HI-LO --- */
.hilo-display { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 20px; }
.hilo-card {
    width: 160px; height: 220px;
    background: linear-gradient(160deg, #f8f8f0 0%, #ece5d6 100%);
    border: 2px solid #1a1a2e; border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    box-shadow: 0 18px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset;
    position: relative;
}
.hilo-card::before {
    content: ''; position: absolute; inset: 6px; border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; pointer-events: none;
}
.hilo-card-rank { font-size: 4.2rem; font-weight: 800; color: #111; font-family: 'Georgia', serif; line-height: 1; }
.hilo-card-suit { font-size: 2.4rem; line-height: 1; }
.hilo-card.flip { animation: cardFlip 0.45s ease; }
@keyframes cardFlip {
    0%   { transform: rotateY(0deg); }
    50%  { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}
.hilo-buttons { display: flex; gap: 10px; width: 100%; max-width: 340px; }
.hilo-buttons .hilo-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 12px 8px; font-size: 0.82rem; font-weight: 700; min-height: 76px;
}
.hilo-mult-label { font-size: 0.72rem; opacity: 0.85; font-variant-numeric: tabular-nums; }
.hilo-result-text { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; min-height: 26px; text-align: center; }
.hilo-result-text.win { color: var(--success); }
.hilo-result-text.loss { color: var(--danger); }
.btn.btn-success { background: linear-gradient(135deg, #10b981, #047857); color: #fff; }
.btn.btn-success:hover:not(:disabled) { filter: brightness(1.08); }
.btn.btn-danger  { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; }
.btn.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }

/* --- WHEEL --- */
.wheel-display { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 16px; position: relative; }
.wheel-wrap { width: 320px; height: 320px; max-width: 100%; position: relative; }
.wheel-wrap svg { width: 100%; height: 100%; transform-origin: 50% 50%; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.55)); }
.wheel-pointer {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;
    border-top: 22px solid var(--accent2);
    z-index: 5; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.wheel-result { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--text-bright); min-height: 50px; }
.wheel-result.win { color: var(--success); text-shadow: 0 0 30px rgba(var(--success-rgb), 0.45); }
.wheel-result.loss { color: var(--text-muted); }
.wheel-result-text { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; min-height: 24px; }
.wheel-result-text.win { color: var(--success); }
.wheel-result-text.loss { color: var(--danger); }

/* Scrollbar polish (cosmetic) */
.content::-webkit-scrollbar, .chat-messages::-webkit-scrollbar { width: 8px; height: 8px; }
.content::-webkit-scrollbar-thumb, .chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }
.content::-webkit-scrollbar-thumb:hover, .chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.3); }

@media (max-width: 700px) {
    .keno-board { grid-template-columns: repeat(5, 1fr); }
    .keno-cell { font-size: 0.82rem; }
    .wheel-wrap { width: 260px; height: 260px; }
    .hilo-card { width: 130px; height: 180px; }
    .hilo-card-rank { font-size: 3.2rem; }
}

/* =============================================
   CASES, BATTLES, INVENTORY, MARKETPLACE
   ============================================= */
.gc-cases       { background: linear-gradient(135deg, #2a0e1a, #4d1822); }
.gc-battles     { background: linear-gradient(135deg, #1a0830, #3a1830); }
.gc-marketplace { background: linear-gradient(135deg, #082a20, #0d3a30); }
.gc-inventory   { background: linear-gradient(135deg, #1a1238, #2a1850); }

/* --- Item Card (universal) --- */
.item-card {
    --rarity-color: #94a3b8;
    --rarity-glow: rgba(148, 163, 184, 0.4);
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.25) 100%);
    border: 1.5px solid var(--rarity-color);
    border-radius: var(--radius-sm);
    padding: 12px 8px 10px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: relative; overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: inset 0 -28px 32px -20px var(--rarity-glow), 0 4px 12px rgba(0,0,0,0.3);
}
.item-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--rarity-color);
    box-shadow: 0 0 12px var(--rarity-glow);
}
.item-card:hover { transform: translateY(-2px); box-shadow: inset 0 -28px 36px -18px var(--rarity-glow), 0 0 24px var(--rarity-glow), 0 6px 16px rgba(0,0,0,0.45); }
.item-card.item-card-compact { padding: 8px 6px 6px; gap: 4px; }
.item-glyph {
    width: 64px; height: 64px;
    color: var(--rarity-color);
    filter: drop-shadow(0 0 12px var(--rarity-glow));
    display: flex; align-items: center; justify-content: center;
}
.item-card-compact .item-glyph { width: 48px; height: 48px; }
.item-glyph svg { width: 100%; height: 100%; }
.item-name {
    font-size: 0.78rem; font-weight: 700; color: var(--text-bright); text-align: center;
    line-height: 1.1; min-height: 1.6em;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    width: 100%; padding: 0 4px;
}
.item-card-compact .item-name { font-size: 0.7rem; }
.item-meta {
    display: flex; justify-content: space-between; width: 100%;
    font-size: 0.66rem; gap: 6px; padding: 0 2px;
}
.item-rarity { color: var(--rarity-color); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.item-value  { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 700; }
.item-actions { display: flex; gap: 4px; width: 100%; margin-top: 4px; }
.item-action-btn {
    flex: 1; padding: 5px 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px;
    border-radius: var(--radius-xs); transition: all 0.15s ease;
    background: rgba(255,255,255,0.06); color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.item-action-btn.sell:hover { background: rgba(var(--success-rgb), 0.15); color: var(--success); border-color: rgba(var(--success-rgb), 0.4); }
.item-action-btn.buy { background: linear-gradient(135deg, var(--accent), #0098d4); color: var(--bg-darkest); border: none; font-weight: 800; }
.item-action-btn.buy:hover { filter: brightness(1.12); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); }

/* --- Cases page --- */
.case-tabs { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.case-tab { padding: 8px 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-secondary); font-size: 0.8rem; font-weight: 700; }
.case-tab.active { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); }
.case-tab-link { padding: 8px 16px; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; }
.case-tab-link:hover { color: var(--accent); }

.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.case-card {
    --case-color: #94a3b8;
    --case-accent: #475569;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    overflow: hidden; transition: all 0.2s ease; position: relative;
}
.case-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--case-color); box-shadow: 0 0 14px var(--case-color); opacity: 0.7; }
.case-card:hover { transform: translateY(-3px); border-color: var(--case-color); box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 22px color-mix(in srgb, var(--case-color) 22%, transparent); }
.case-card-img { aspect-ratio: 1; padding: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, color-mix(in srgb, var(--case-color) 12%, var(--bg-elevated)) 0%, var(--bg-elevated) 70%); }
.case-box { width: 100%; height: 100%; max-width: 130px; max-height: 130px; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); }
.case-card-body { padding: 10px 12px 12px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.case-card-body h4 { font-size: 0.92rem; font-weight: 700; color: var(--text-bright); }
.case-card-price { font-size: 0.86rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* --- Case Opener --- */
.case-opener-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; }
.case-opener-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.case-opener-header h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-bright); letter-spacing: 1.5px; text-transform: uppercase; }
.case-price-inline { color: var(--accent); font-size: 0.82rem; font-weight: 700; margin-left: 6px; }
.case-opener-controls { display: flex; gap: 8px; align-items: center; }
.case-qty-label { font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.case-qty-label select { padding: 6px 10px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-bright); font-weight: 700; }

.case-opener-strips { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.opener-strip {
    position: relative; background: var(--bg-darkest); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); height: 170px; overflow: hidden;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
}
.opener-strip-pointer {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 3px; height: 100%; background: linear-gradient(180deg, var(--accent), var(--accent2));
    box-shadow: 0 0 14px var(--accent), 0 0 28px var(--accent);
    z-index: 5;
}
.opener-strip-pointer::before, .opener-strip-pointer::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    border-left: 8px solid transparent; border-right: 8px solid transparent;
}
.opener-strip-pointer::before { top: 0; border-top: 10px solid var(--accent); }
.opener-strip-pointer::after  { bottom: 0; border-bottom: 10px solid var(--accent); }
.opener-strip-track { display: flex; gap: 8px; padding: 12px; height: 100%; align-items: center; will-change: transform; }
.opener-strip-item { flex: 0 0 130px; height: 140px; }
.opener-strip-item .item-card { height: 100%; }
.opener-strip::before, .opener-strip::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 60px; pointer-events: none; z-index: 4;
}
.opener-strip::before { left: 0; background: linear-gradient(90deg, var(--bg-darkest) 0%, transparent 100%); }
.opener-strip::after  { right: 0; background: linear-gradient(270deg, var(--bg-darkest) 0%, transparent 100%); }

.opener-results-title { font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; color: var(--text-secondary); margin: 14px 0 8px; letter-spacing: 1px; }
.opener-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.opener-profit { margin-top: 12px; font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--bg-elevated); }
.opener-profit.win { color: var(--success); border: 1px solid rgba(var(--success-rgb), 0.3); }
.opener-profit.loss { color: var(--danger); border: 1px solid rgba(var(--danger-rgb), 0.3); }

.case-contents { margin-top: 20px; }
.case-contents h4 { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.case-contents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }

/* --- Battle Lobby --- */
.battle-lobby { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; }
.battle-create h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-bright); margin-bottom: 14px; }
.battle-create-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.battle-create-row .form-group { flex: 1; min-width: 200px; }
.battle-case-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.battle-case-pick {
    --case-color: #94a3b8;
    padding: 10px; background: var(--bg-elevated); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 4px;
    cursor: pointer; transition: all 0.15s ease; position: relative;
}
.battle-case-pick::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--case-color); }
.battle-case-pick:hover { transform: translateY(-2px); border-color: var(--case-color); }
.bcp-name { font-size: 0.78rem; font-weight: 700; color: var(--text-bright); }
.bcp-price { font-size: 0.74rem; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

.battle-selected-summary { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; min-height: 36px; }
.battle-selected-pill {
    --case-color: var(--accent);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; background: color-mix(in srgb, var(--case-color) 18%, transparent);
    border: 1px solid var(--case-color); border-radius: 999px;
    font-size: 0.74rem; font-weight: 700; color: var(--text-bright); cursor: pointer;
}
.battle-selected-pill .rm { opacity: 0.7; font-weight: 800; }
.battle-selected-pill:hover { background: color-mix(in srgb, var(--case-color) 30%, transparent); }
.battle-cost { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: var(--bg-elevated); border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.battle-cost .info-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; }
.battle-cost .info-value { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.battle-fillopts { padding-top: 16px; border-top: 1px solid var(--border-color); margin-top: 8px; }
.battle-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; }

/* --- Battle Arena --- */
.battle-arena { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; position: relative; overflow: hidden; }
.battle-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.battle-header-info { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.84rem; }
.battle-header-info h3 { font-family: var(--font-display); font-size: 1rem; letter-spacing: 1px; color: var(--text-bright); }
.battle-cases-track { display: flex; gap: 6px; padding: 8px 0; margin-bottom: 14px; overflow-x: auto; }
.battle-case-marker {
    --case-color: #94a3b8;
    padding: 6px 12px; background: var(--bg-elevated); border: 1px solid var(--border-color);
    border-radius: 999px; font-size: 0.74rem; font-weight: 700; color: var(--text-muted);
    white-space: nowrap; opacity: 0.6;
}
.battle-case-marker.active { background: var(--case-color); color: #0a0e1a; opacity: 1; box-shadow: 0 0 14px var(--case-color); }
.battle-case-marker.done   { opacity: 0.85; border-color: var(--case-color); color: var(--text-bright); }

.battle-players-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) {
    .battle-players-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .battle-players-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .battle-players-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.battle-player {
    background: var(--bg-elevated); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 8px;
    transition: all 0.3s ease;
}
.battle-player.winner { border-color: var(--success); box-shadow: 0 0 18px rgba(var(--success-rgb), 0.4); background: rgba(var(--success-rgb), 0.06); }
.battle-player.loser  { opacity: 0.55; }
.battle-player-header { display: flex; justify-content: space-between; align-items: center; }
.battle-player-name { font-size: 0.82rem; font-weight: 700; color: var(--text-bright); }
.battle-player-name.you { color: var(--accent); }
.battle-player-total { font-family: var(--font-display); font-size: 0.92rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.battle-player-spin {
    position: relative; height: 110px; background: var(--bg-darkest);
    border: 1px solid var(--border-color); border-radius: var(--radius-xs); overflow: hidden;
}
.battle-spin-pointer {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 2px; height: 100%; background: var(--accent); z-index: 5;
    box-shadow: 0 0 10px var(--accent);
}
.battle-spin-track { display: flex; gap: 6px; padding: 8px; height: 100%; align-items: center; will-change: transform; }
.battle-spin-item { flex: 0 0 96px; height: 92px; }
.battle-spin-item .item-card { height: 100%; padding: 6px 4px 4px; }
.battle-spin-item .item-glyph { width: 36px; height: 36px; }
.battle-spin-item .item-name { font-size: 0.62rem; min-height: 1.4em; -webkit-line-clamp: 1; }
.battle-spin-item .item-meta { display: none; }

.battle-player-items { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.battle-player-items .item-card { width: 70px; padding: 4px 2px 3px; }
.battle-player-items .item-glyph { width: 30px; height: 30px; }
.battle-player-items .item-name { font-size: 0.58rem; min-height: 1em; -webkit-line-clamp: 1; }
.battle-player-items .item-meta { font-size: 0.55rem; }
.battle-player-items .item-rarity { display: none; }

.battle-result-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 70%);
    backdrop-filter: blur(2px); z-index: 10;
    animation: fadeInOverlay 0.4s ease;
    text-align: center; padding: 20px; gap: 8px;
}
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
.battle-result-title { font-family: var(--font-display); font-size: 2.4rem; font-weight: 900; letter-spacing: 5px; }
.battle-result-title.win { color: var(--success); text-shadow: 0 0 30px rgba(var(--success-rgb), 0.7); }
.battle-result-title.loss { color: var(--danger); text-shadow: 0 0 30px rgba(var(--danger-rgb), 0.5); }

/* --- Inventory --- */
.inv-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.inv-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-filter {
    --rarity-color: var(--text-muted);
    padding: 5px 12px; font-size: 0.74rem; font-weight: 700; border-radius: 999px;
    background: var(--bg-elevated); border: 1px solid var(--border-color); color: var(--text-secondary);
}
.inv-filter.active { background: color-mix(in srgb, var(--rarity-color) 18%, transparent); color: var(--rarity-color); border-color: var(--rarity-color); }
.inv-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inv-stat { font-size: 0.78rem; color: var(--text-muted); }
.inv-stat strong { color: var(--text-bright); font-variant-numeric: tabular-nums; margin-left: 4px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }

/* --- Trade-Up Modal --- */
.tradeup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: flex-start; justify-content: center; z-index: 200; padding: 20px; overflow-y: auto; }
.tradeup-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); width: 100%; max-width: 900px; margin: auto; padding: 0; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.tradeup-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.tradeup-header h3 { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 1.5px; }
.tradeup-body { padding: 18px 20px; overflow-y: auto; }
.tradeup-explain { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 14px; line-height: 1.5; }
.tradeup-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.tradeup-slot { aspect-ratio: 4/5; min-height: 130px; }
.tradeup-slot.empty { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--border-color); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 1.6rem; font-weight: 700; }
.tradeup-slot.filled { cursor: pointer; }
.tradeup-slot.filled:hover .item-card { transform: translateY(-2px) scale(0.98); border-color: var(--danger); }

.tradeup-arrow { text-align: center; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--accent); padding: 12px 0; letter-spacing: 1px; }
.tradeup-outcomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-bottom: 14px; padding: 10px; background: var(--bg-elevated); border-radius: var(--radius-sm); }
.tradeup-outcome {
    --rarity-color: #94a3b8;
    padding: 6px; background: var(--bg-card); border: 1px solid var(--rarity-color);
    border-radius: var(--radius-xs); display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-align: center;
}
.tradeup-outcome-glyph { width: 32px; height: 32px; color: var(--rarity-color); }
.tradeup-outcome-glyph svg { width: 100%; height: 100%; }
.tradeup-outcome-name { font-size: 0.66rem; color: var(--text-bright); font-weight: 700; line-height: 1.1; min-height: 1.4em; }
.tradeup-outcome-pct { font-size: 0.7rem; color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }

.tradeup-hint { text-align: center; padding: 14px; background: var(--bg-elevated); border-radius: var(--radius-sm); font-size: 0.82rem; color: var(--text-muted); margin-bottom: 14px; }

.tradeup-pool-title { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin: 14px 0 8px; }
.tradeup-pool { display: flex; flex-direction: column; gap: 12px; }
.tradeup-pool-section.locked { opacity: 0.35; pointer-events: none; }
.tradeup-pool-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.tradeup-pool-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.tradeup-pool-item { cursor: pointer; transition: transform 0.12s ease; }
.tradeup-pool-item:hover { transform: translateY(-2px); }
.tradeup-pool-item.selected .item-card { box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(var(--accent-rgb), 0.5); }

.tradeup-result { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 0; }
.tradeup-result-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--accent); letter-spacing: 2px; }
.tradeup-result .item-card { width: 220px; }
.tradeup-result-meta { color: var(--text-muted); font-size: 0.8rem; }

/* --- Marketplace --- */
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.market-row { display: flex; justify-content: space-between; align-items: center; gap: 4px; width: 100%; margin-top: 4px; }
.market-seller { font-size: 0.66rem; color: var(--text-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.market-price.high { color: var(--danger); }
.market-price.low  { color: var(--success); }

@media (max-width: 700px) {
    .opener-strip-item { flex: 0 0 100px; height: 120px; }
    .opener-strip { height: 140px; }
    .battle-spin-item { flex: 0 0 78px; height: 80px; }
    .battle-player-spin { height: 96px; }
    .tradeup-slots { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .tradeup-slot { min-height: 100px; }
}

/* =============================================
   MONOCHROME THEME + LOW-SPEC PERFORMANCE OVERRIDES
   Override above rules at the end so we don't touch existing structure
   ============================================= */
:root {
    /* Greyscale palette */
    --bg-darkest: #000000;
    --bg-primary: #050505;
    --bg-secondary: #0a0a0a;
    --bg-card: #111111;
    --bg-card-hover: #181818;
    --bg-input: #080808;
    --bg-elevated: #1a1a1a;
    --bg-glass: rgba(15, 15, 15, 0.92);

    --accent: #ffffff;
    --accent-rgb: 255, 255, 255;
    --accent-dim: #b8b8b8;
    --accent-glow: rgba(255, 255, 255, 0.08);
    --accent-glow-strong: rgba(255, 255, 255, 0.18);
    --accent2: #cccccc;
    --accent2-rgb: 204, 204, 204;
    --accent3: #999999;
    --accent3-rgb: 153, 153, 153;

    --text-primary: #e0e0e0;
    --text-secondary: #888888;
    --text-muted: #555555;
    --text-bright: #ffffff;

    --success: #f5f5f5;
    --success-rgb: 245, 245, 245;
    --danger:  #6a6a6a;
    --danger-rgb: 106, 106, 106;
    --warning: #b8b8b8;

    --border-color: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.12);
    --border-accent: rgba(255, 255, 255, 0.2);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.6);
    --shadow-md: 0 2px 10px rgba(0,0,0,0.7);
    --shadow-lg: 0 4px 18px rgba(0,0,0,0.75);
    --shadow-accent: 0 0 0 1px rgba(255,255,255,0.1);
    --shadow-glow: none;
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Kill expensive blurs everywhere — biggest perf killer on low-end GPUs */
*, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Replace expensive drop-shadow filters with cheaper box-shadow or nothing */
.wheel-wrap svg,
.wheel-pointer,
.case-box,
.item-glyph { filter: none !important; }

/* Kill infinite-running animations */
.hero-stat .live-dot { animation: none !important; background: var(--text-bright); box-shadow: none; }
.game-card-tag { animation: none !important; box-shadow: none !important; }
.pulse-dot { animation: none !important; }

/* Flatten the full-viewport radial gradient (was repainting on every scroll) */
body::before { display: none; }

/* Flatten home hero radial halos */
.home-hero { background: var(--bg-card); }
.home-hero::before, .home-hero::after { display: none; }
.home-hero h1 {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--text-bright);
}

/* Drop the radial-gradient hover glow on game cards (caused full-viewport repaints on hover) */
.game-card::after { display: none !important; }
.game-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.18); box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.game-card .game-card-img > span { transition: none; }
.game-card:hover .game-card-img > span { transform: none; }

/* Monochrome game card gradients */
.gc-dice       { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); }
.gc-mines      { background: linear-gradient(135deg, #161616, #262626); }
.gc-plinko     { background: linear-gradient(135deg, #1c1c1c, #2c2c2c); }
.gc-roulette   { background: linear-gradient(135deg, #131313, #232323); }
.gc-blackjack  { background: linear-gradient(135deg, #181818, #282828); }
.gc-slots      { background: linear-gradient(135deg, #1d1d1d, #2d2d2d); }
.gc-crossyroad { background: linear-gradient(135deg, #141414, #242424); }
.gc-towers     { background: linear-gradient(135deg, #171717, #272727); }
.gc-airplane   { background: linear-gradient(135deg, #121212, #222222); }
.gc-coinflip   { background: linear-gradient(135deg, #1e1e1e, #2e2e2e); }
.gc-limbo      { background: linear-gradient(135deg, #161616, #262626); }
.gc-keno       { background: linear-gradient(135deg, #181818, #282828); }
.gc-hilo       { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); }
.gc-wheel      { background: linear-gradient(135deg, #1c1c1c, #2c2c2c); }
.gc-cases      { background: linear-gradient(135deg, #1f1f1f, #2f2f2f); }
.gc-battles    { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); }
.gc-marketplace { background: linear-gradient(135deg, #181818, #282828); }
.gc-inventory  { background: linear-gradient(135deg, #1c1c1c, #2c2c2c); }

/* Tag colors — all greyscale shades, NEW = brightest */
.game-card-tag           { background: #444 !important; color: #fff !important; }
.game-card-tag.tag-new   { background: #fff !important; color: #000 !important; }
.game-card-tag.tag-hot   { background: #d0d0d0 !important; color: #000 !important; }
.game-card-tag.tag-popular { background: #888 !important; color: #fff !important; }
.game-card-tag.tag-best  { background: #b0b0b0 !important; color: #000 !important; }

/* Buttons go pure black/white */
.btn-accent { background: #ffffff !important; color: #000000 !important; }
.btn-accent:hover { background: #e0e0e0 !important; color: #000 !important; box-shadow: 0 2px 8px rgba(255,255,255,0.15) !important; transform: translateY(-1px); filter: none !important; }
.btn-accent:disabled { background: #333 !important; color: #888 !important; opacity: 0.6; }
.btn-secondary { background: #1f1f1f !important; color: #e0e0e0 !important; border: 1px solid rgba(255,255,255,0.1) !important; }
.btn-secondary:hover { background: #2a2a2a !important; }
.btn.btn-success { background: #ffffff !important; color: #000 !important; }
.btn.btn-danger  { background: #2a2a2a !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.15) !important; }

/* Wins/losses — keep distinguishable through brightness, not color */
.text-success, .profit-positive, .feed-payout.win,
.coinflip-result.win, .crossy-result.win, .towers-result.win,
.limbo-result-text.win, .keno-result-text.win, .hilo-result-text.win,
.wheel-result.win, .wheel-result-text.win, .opener-profit.win {
    color: #ffffff !important;
}
.text-danger, .profit-negative, .feed-payout.loss,
.coinflip-result.loss, .crossy-result.loss, .towers-result.loss,
.limbo-result-text.loss, .keno-result-text.loss, .hilo-result-text.loss,
.wheel-result.loss, .wheel-result-text.loss, .opener-profit.loss {
    color: #6a6a6a !important;
}
.limbo-result-big.win  { color: #fff !important; text-shadow: 0 0 24px rgba(255,255,255,0.25) !important; }
.limbo-result-big.loss { color: #5a5a5a !important; text-shadow: none !important; }
.battle-player.winner  { border-color: #fff !important; box-shadow: 0 0 14px rgba(255,255,255,0.25) !important; background: rgba(255,255,255,0.04) !important; }
.battle-result-title.win  { color: #fff !important; text-shadow: 0 0 18px rgba(255,255,255,0.4) !important; }
.battle-result-title.loss { color: #6a6a6a !important; text-shadow: none !important; }

/* Rarity ramp: darker → brighter as rarity increases */
.item-card.rarity-common    { --rarity-color: #5a5a5a; --rarity-glow: rgba(90,90,90,0.3); }
.item-card.rarity-uncommon  { --rarity-color: #888888; --rarity-glow: rgba(136,136,136,0.35); }
.item-card.rarity-rare      { --rarity-color: #b0b0b0; --rarity-glow: rgba(176,176,176,0.4); }
.item-card.rarity-epic      { --rarity-color: #d8d8d8; --rarity-glow: rgba(216,216,216,0.45); }
.item-card.rarity-legendary { --rarity-color: #ffffff; --rarity-glow: rgba(255,255,255,0.55); }
.tradeup-outcome.rarity-common    { --rarity-color: #5a5a5a; }
.tradeup-outcome.rarity-uncommon  { --rarity-color: #888; }
.tradeup-outcome.rarity-rare      { --rarity-color: #b0b0b0; }
.tradeup-outcome.rarity-epic      { --rarity-color: #d8d8d8; }
.tradeup-outcome.rarity-legendary { --rarity-color: #ffffff; }

/* Item-card glow shadows reduced for cheap rendering */
.item-card { box-shadow: inset 0 -16px 18px -16px var(--rarity-glow), 0 1px 4px rgba(0,0,0,0.5); transition: transform 0.15s ease, border-color 0.15s ease; }
.item-card:hover { box-shadow: inset 0 -16px 22px -14px var(--rarity-glow), 0 2px 6px rgba(0,0,0,0.6); }

/* Case card hover — flatten color-mix expense */
.case-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.case-card-img { background: var(--bg-elevated); }
.case-card { --case-color: #ffffff; --case-accent: #888888; }

/* Online dot in sidebar */
.online-indicator .pulse-dot { background: #fff; box-shadow: none; }

/* Dim the live-feed default rendering to reduce constant repaint */
.live-feed { will-change: auto; }
.feed-row-you { background: rgba(255,255,255,0.04) !important; }

/* Modal overlays — kill backdrop-filter blur */
.modal-overlay, .battle-result-overlay, .tradeup-overlay { background: rgba(0,0,0,0.85) !important; }

/* Minor: chat role pills */
.chat-role-mod { background: rgba(255,255,255,0.18); color: #fff; }
.chat-role-vip { background: rgba(255,255,255,0.10); color: #d0d0d0; }

/* Kill currency pill colored gradients */
.currency-pill, .balance-display { background: var(--bg-card) !important; }

/* Reduce paint by simplifying section title gradient */
.section-title::after { background: rgba(255,255,255,0.1) !important; }

/* Disable smooth-scroll-into-view on opener which can stutter on potatoes */
.case-opener-section { scroll-margin-top: 60px; }

/* Honour the user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition-duration: 0.01ms !important; }
}

/* =============================================
   CASE BATTLES — vertical CSGORoll-style spinners,
   one column per player, locked side-by-side
   ============================================= */
.battle-players-grid {
    /* grid-template-columns is set inline based on player count */
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: auto;
}
@media (min-width: 700px) {
    .battle-players-grid { /* still inline-set */ overflow-x: visible; }
}

.battle-player {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    display: flex; flex-direction: column; gap: 8px;
    min-width: 0;
}

.battle-player-header {
    display: flex; justify-content: space-between; align-items: center; gap: 4px;
    padding: 0 2px;
}
.battle-player-name {
    font-size: 0.84rem; font-weight: 700; color: var(--text-bright);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.battle-player-name.you { color: #fff; }
.battle-player-rank {
    font-size: 0.68rem; font-weight: 700; padding: 2px 6px; border-radius: 4px;
    background: rgba(255,255,255,0.08); color: var(--text-muted);
    flex-shrink: 0;
}
.battle-player-rank.leader { background: #fff; color: #000; }

.battle-player-total-wrap {
    display: flex; flex-direction: column; align-items: center; padding: 6px 0;
    background: var(--bg-darkest); border-radius: var(--radius-xs);
    border: 1px solid var(--border-color);
}
.battle-player-total-label {
    font-size: 0.58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.battle-player-total {
    font-family: var(--font-display);
    font-size: 1.1rem; font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-top: 2px;
}

/* The spinner — VERTICAL, individual per player */
.battle-player-spin {
    position: relative;
    width: 100%; height: 360px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    overflow: hidden;
    /* Soft mask so items at top/bottom fade into the frame */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.battle-spin-pointer {
    position: absolute; left: 0; right: 0; top: 50%;
    width: 100%; height: 2px;
    transform: translateY(-50%);
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
    z-index: 5;
    pointer-events: none;
}
.battle-spin-pointer::before, .battle-spin-pointer::after {
    content: '';
    position: absolute; top: 50%; transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.battle-spin-pointer::before { left: 0; border-left: 8px solid #fff; }
.battle-spin-pointer::after  { right: 0; border-right: 8px solid #fff; }

.battle-spin-track {
    display: flex; flex-direction: column;
    gap: 6px;
    padding: 6px;
    height: auto;
    align-items: stretch;
    will-change: transform;
}
.battle-spin-item {
    flex: 0 0 110px;
    width: 100%;
    height: 110px;
}
.battle-spin-item .item-card {
    height: 100%; padding: 6px 4px; gap: 2px;
}
.battle-spin-item .item-glyph { width: 40px; height: 40px; }
.battle-spin-item .item-name { font-size: 0.66rem; min-height: 1.2em; -webkit-line-clamp: 1; }
.battle-spin-item .item-meta { font-size: 0.58rem; }

/* Items pile shown UNDER the spinner — most recent first */
.battle-player-items-wrap {
    display: flex; flex-direction: column; gap: 4px;
    border-top: 1px solid var(--border-color); padding-top: 6px;
}
.battle-player-items-label {
    font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
    display: flex; justify-content: space-between;
}
.battle-player-items-label span { color: var(--text-primary); }
.battle-player-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
}
.battle-player-items .item-card { padding: 3px 2px; gap: 1px; }
.battle-player-items .item-glyph { width: 26px; height: 26px; }
.battle-player-items .item-name { font-size: 0.55rem; min-height: 1em; -webkit-line-clamp: 1; }
.battle-player-items .item-rarity { display: none; }
.battle-player-items .item-meta { font-size: 0.52rem; justify-content: center; }

/* Make winner column glow white */
.battle-player.winner { border-color: #fff !important; box-shadow: 0 0 0 2px #fff inset, 0 0 16px rgba(255,255,255,0.3); }
.battle-player.winner .battle-player-total { color: #fff; }
.battle-player.loser { opacity: 0.5; }

@media (max-width: 600px) {
    .battle-player-spin { height: 280px; }
    .battle-spin-item { flex-basis: 90px; height: 90px; }
    .battle-player-total { font-size: 0.95rem; }
    .battle-player-name { font-size: 0.74rem; }
}

/* =============================================
   SPIN ANIMATION RENDERING
   No GPU/contain optimizations — rendering correctness comes first.
   Items in the spinner use the SAME rendering as anywhere else, so the
   user clearly sees what's flying past during the roll.
   Only 'will-change: transform' on the track itself for smooth scroll.
   ============================================= */
.opener-strip-track,
.battle-spin-track {
    will-change: transform;
}

/* The mask-image on the battle spinner triggers an extra GPU buffer
   pass per frame. Replace it with cheap gradient overlays (regular
   pseudo-elements, no compositing pass). */
.battle-player-spin {
    -webkit-mask-image: none !important;
            mask-image: none !important;
}
.battle-player-spin::before,
.battle-player-spin::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 50px;
    pointer-events: none;
    z-index: 4;
}
.battle-player-spin::before {
    top: 0;
    background: linear-gradient(180deg, var(--bg-darkest) 0%, transparent 100%);
}
.battle-player-spin::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--bg-darkest) 0%, transparent 100%);
}

/* =============================================
   OWNED CASE STACKS, QTY STEPPER, OPENER RESULT,
   BATTLE OPPONENT VISUALIZATION
   ============================================= */

.empty-state-thin {
    padding: 14px 16px; background: var(--bg-card); border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.84rem;
    text-align: center;
}

/* Owned case stacks (your inventory of unopened cases) */
.owned-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.owned-case-card {
    --case-color: #fff;
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-align: center;
    transition: border-color 0.15s ease;
    color: inherit;
}
.owned-case-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--case-color);
}
.owned-case-card:hover {
    border-color: var(--case-color);
}
.owned-open-btn {
    margin-top: 6px;
    width: 100%;
    font-size: 0.78rem;
    padding: 8px 10px;
    letter-spacing: 1.5px;
}
.owned-count-badge {
    position: absolute;
    top: -8px; right: -8px;
    background: #fff; color: #000;
    font-family: var(--font-display);
    font-size: 0.78rem; font-weight: 800;
    padding: 3px 9px; border-radius: 999px;
    border: 2px solid var(--bg-card);
    z-index: 5;
    min-width: 32px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    font-variant-numeric: tabular-nums;
}
.owned-case-img { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 6px; }
.owned-case-img .case-box { width: 100%; height: 100%; max-width: 90px; }
.owned-case-name { font-size: 0.76rem; font-weight: 700; color: var(--text-bright); line-height: 1.1; }
.owned-case-price { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Quantity stepper for buying cases */
.case-buy-row {
    display: flex; gap: 6px; align-items: stretch;
    margin-top: 4px;
}
.qty-stepper {
    display: flex; align-items: stretch;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    overflow: hidden;
    flex-shrink: 0;
}
.qty-btn {
    width: 24px;
    color: var(--text-secondary);
    font-size: 1rem; font-weight: 700;
    transition: background 0.1s ease, color 0.1s ease;
    user-select: none;
}
.qty-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.qty-input {
    width: 48px;
    border: none !important;
    background: transparent !important;
    text-align: center;
    padding: 4px 2px !important;
    font-size: 0.84rem !important;
    font-weight: 700;
    -moz-appearance: textfield;
    font-variant-numeric: tabular-nums;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.case-buy-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-size: 0.74rem;
    white-space: nowrap;
}
.case-buy-btn [data-buy-cost] {
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
    font-size: 0.7rem;
}

/* Opener single-result hero (replaces results grid) */
.opener-result-hero {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px;
    padding: 24px 16px;
}
.opener-result-card-wrap .item-card {
    width: 240px;
    transform: scale(1);
    animation: openerLand 0.5s ease;
}
@keyframes openerLand {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.opener-result-summary {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 8px 14px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}
.opener-result-summary.win { color: #fff; border-color: rgba(255,255,255,0.2); }
.opener-result-summary.loss { color: #888; }
.opener-result-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Battle lobby — clear "You vs N opponents" visualization */
.battle-vs-row {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin: 10px 0 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.vs-summary {
    text-align: center;
    font-size: 0.84rem;
    color: var(--text-secondary);
}
.vs-summary-text strong {
    font-family: var(--font-display);
    font-size: 1rem;
    color: #fff;
    margin: 0 4px;
}
.vs-slots {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap;
}
.vs-slot {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-width: 60px;
}
.vs-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border: 2px solid;
}
.vs-avatar.you {
    background: #fff; color: #000;
    border-color: #fff;
}
.vs-avatar.opp {
    background: var(--bg-card); color: var(--text-secondary);
    border-color: var(--border-color);
}
.vs-label {
    font-size: 0.66rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
}
.vs-slot.you .vs-label { color: #fff; }
.vs-and {
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 1px;
    padding: 0 4px;
}

/* Battle case picker — wider grid for new cases */
.battle-case-picker {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
}
.battle-selected-summary {
    border-top: 1px dashed var(--border-color);
    padding-top: 8px;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .vs-avatar { width: 40px; height: 40px; font-size: 0.62rem; }
    .vs-slot { min-width: 50px; }
    .opener-result-card-wrap .item-card { width: 200px; }
    .case-buy-row { flex-wrap: wrap; }
    .qty-stepper { width: 100%; justify-content: center; }
    .case-buy-btn { width: 100%; }
}