/* ===================================
   DG Craps Companion - Design System
   =================================== */

:root {
    /* Colors - Dark Theme (Default) */
    --bg-primary: #0f0f1e;
    --bg-secondary: #1a1a2e;
    --bg-tertiary: #252538;
    --bg-elevated: #2d2d44;

    --text-primary: #ffffff;
    --text-secondary: #b4b4c8;
    --text-tertiary: #8a8a9e;

    --accent-primary: #ff6b6b;
    --accent-secondary: #4ecdc4;
    --accent-tertiary: #ffe66d;

    --hot-color: #ff4757;
    --cold-color: #5f27cd;
    --choppy-color: #ffa502;

    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
    --info: #3498db;

    /* Chip Colors */
    --chip-white: #f8f9fa;
    --chip-red: #dc3545;
    --chip-green: #28a745;
    --chip-black: #212529;
    --chip-purple: #6f42c1;
    --chip-yellow: #ffc107;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-hot: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
    --gradient-cold: linear-gradient(135deg, #5f27cd 0%, #341f97 100%);
    --gradient-choppy: linear-gradient(135deg, #ffa502 0%, #ff6348 100%);
    --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(102, 126, 234, 0.4);

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-toast: 500;
}

/* Standardized Refresh & Retry Buttons */
.btn-refresh-standard {
    background: rgba(var(--accent-primary-rgb, 255, 107, 107), 0.1) !important;
    border: 2px solid var(--accent-primary) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md);
    padding: 6px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.btn-refresh-standard:hover {
    background: var(--accent-primary) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-refresh-standard:active {
    transform: translateY(0);
}

.retry-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.retry-action:hover {
    background: rgba(78, 205, 196, 0.1);
    border-color: var(--accent-secondary);
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e9ecef;
    --bg-elevated: #ffffff;

    --text-primary: #212529;
    --text-secondary: #495057;
    --text-tertiary: #6c757d;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Force body background repaint on mobile when theme changes */
[data-theme="light"] body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Fix sticky hover on mobile for icon buttons */
@media (hover: none) {
    .icon-btn:hover {
        background: var(--bg-tertiary);
        /* Reset to default */
        color: inherit;
        transform: none;
    }

    .icon-btn:active {
        background: var(--bg-elevated);
        transform: scale(0.95);
    }
}

/* ===================================
   Base Styles
   =================================== */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

#app {
    min-height: 100vh;
    position: relative;
}

.hidden {
    display: none !important;
}

/* Offline Indicator */
.offline-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--danger);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-right: var(--spacing-sm);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

/* Insights Grid */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.insight-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.3s ease;
}

.insight-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-primary);
    transform: translateY(-3px);
}

.insight-icon {
    font-size: 1.5rem;
}

.insight-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-tertiary);
    letter-spacing: 0.5px;
}

.insight-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.insight-meta {
    font-size: 0.7rem;
    color: var(--success);
    font-weight: 500;
}

/* ===================================
   Typography
   =================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-3xl);
}

h2 {
    font-size: var(--font-size-2xl);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
}

p {
    margin-bottom: var(--spacing-md);
}

/* ===================================
   Buttons
   =================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: 500;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width var(--transition-slow), height var(--transition-slow);
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

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

.btn-secondary:hover {
    background: var(--bg-elevated);
    transform: translateY(-2px);
}

.btn-test {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-test:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
}

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

.btn-danger:hover {
    background: #c0392b;
    transform: translateY(-2px);
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    transition: all var(--transition-base);
    position: relative;
    /* For badge positioning */
}

/* App Header Specific: Naked Large Emojis - UI 2.4 */
.app-header .icon-btn {
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 2rem !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure avatar image matches the optical size of the emoji icons */
.app-header .icon-btn img.avatar-img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    object-fit: cover;
}

/* Specific styling for refresh buttons - UI 2.2 */
.icon-btn-refresh {
    border: 2px solid var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    font-size: var(--font-size-lg) !important;
    box-shadow: var(--shadow-sm);
}

.icon-btn-refresh:hover {
    background: var(--accent-primary) !important;
    color: white !important;
}

.icon-btn:hover {
    transform: scale(1.1);
}

/* ===================================
   Forms
   =================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: all var(--transition-base);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
}

input::placeholder {
    color: var(--text-tertiary);
}

/* ===================================
   Cards
   =================================== */

.card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-base);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===================================
   Authentication Screens
   =================================== */

/* Auth screen should be visible by default until authentication completes */
#auth-screen {
    min-height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Only hide auth-screen when explicitly marked as hidden */
#auth-screen.hidden {
    display: none !important;
}

.auth-container {
    width: 100%;
    max-width: 400px;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-xl);
}

.auth-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.app-logo {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.auth-header h1 {
    margin-bottom: var(--spacing-sm);
}

.auth-header p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}

.auth-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    background: var(--bg-tertiary);
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
}

.auth-tab {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.auth-tab.active {
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.auth-form {
    display: none;
    flex-direction: column;
    gap: var(--spacing-md);
}

.auth-form.active {
    display: flex;
}

.auth-error {
    color: var(--error-color);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    text-align: center;
}

.forgot-password-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.forgot-password-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.auth-divider {
    text-align: center;
    margin: var(--spacing-lg) 0;
    position: relative;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--bg-tertiary);
}

.auth-divider span {
    background: var(--bg-secondary);
    padding: 0 var(--spacing-md);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    position: relative;
}

.guest-note {
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
}

#guest-btn,
#test-login-btn {
    width: 100%;
}

.disclaimer {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--warning);
    text-align: center;
    line-height: 1.4;
}

/* ===================================
   Main App Layout
   =================================== */

.app-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(26, 26, 46, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.header-title {
    font-size: var(--font-size-xl);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.header-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.content {
    padding: var(--spacing-lg);
    padding-bottom: calc(80px + var(--spacing-lg));
    height: auto;
}

/* ===================================
   Bottom Navigation
   =================================== */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    background: rgba(26, 26, 46, 0.75);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-around;
    padding: var(--spacing-sm) 0;
    box-shadow: 0 -8px 32px 0 rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
}

.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: width var(--transition-base);
}

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

.nav-item.active::before {
    width: 60%;
}

.nav-icon {
    font-size: var(--font-size-xl);
    transition: transform var(--transition-base);
}

.nav-item.active .nav-icon {
    transform: scale(1.2);
}

.nav-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* ===================================
   Modals
   =================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    padding-top: 70px;
    /* Space for header */
    animation: fadeIn var(--transition-base);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    background: rgba(30, 30, 50, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUp var(--transition-base);
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h2 {
    margin: 0;
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    border: none;
    font-size: var(--font-size-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-base);
}

.modal-close:hover {
    background: var(--bg-elevated);
    transform: rotate(90deg);
}

.modal-body {
    padding: var(--spacing-lg);
}

/* Quick Report Modal Styles */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--text-secondary);
}

/* Toggle Switch */
.toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"] {
    position: relative;
    width: 48px;
    height: 24px;
    appearance: none;
    background: var(--bg-tertiary);
    border-radius: 12px;
    outline: none;
    cursor: pointer;
    transition: background var(--transition-base);
    margin-right: var(--spacing-sm);
}

.toggle-label input[type="checkbox"]:checked {
    background: var(--accent-primary);
}

.toggle-label input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform var(--transition-base);
}

.toggle-label input[type="checkbox"]:checked::before {
    transform: translateX(24px);
}

.toggle-label span {
    font-weight: 500;
    color: var(--text-primary);
}

.form-input {
    position: relative;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-sm);
}

.casino-result-item {
    padding: var(--spacing-md);
    cursor: pointer;
    transition: background var(--transition-base);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.casino-result-item:last-child {
    border-bottom: none;
}

.casino-result-item:hover {
    background: var(--bg-elevated);
}

.casino-result-name {
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.casino-result-location {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.no-results {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--text-secondary);
}

.condition-selector-modal {
    display: flex;
    gap: var(--spacing-sm);
}

.condition-modal-btn {
    flex: 1;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.condition-modal-btn:hover {
    background: var(--bg-elevated);
}

.condition-modal-btn.active {
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.condition-modal-btn .condition-icon {
    font-size: var(--font-size-2xl);
}

.modal-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.modal-actions .btn {
    flex: 1;
}

/* ===================================
   Profile
   =================================== */

.profile-info {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto var(--spacing-md);
}

.profile-name {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.profile-email {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.guest-badge {
    display: inline-block;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--warning);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ===================================
   Utility Classes
   =================================== */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

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

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    /* Fix for stretched avatars */
    border: 3px solid var(--accent-primary);
    margin-bottom: var(--spacing-sm);
    background: var(--bg-tertiary);
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

/* ===================================
   Responsive Design
   =================================== */

@media (max-width: 768px) {
    .content {
        padding: var(--spacing-sm);
        padding-bottom: calc(70px + var(--spacing-sm));
        height: auto;
    }

    .app-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .modal-content {
        max-height: 85vh;
        margin: var(--spacing-sm);
    }

    .modal-body {
        padding: var(--spacing-md);
    }

    .modal-header {
        padding: var(--spacing-md);
    }

    h1 {
        font-size: var(--font-size-2xl);
    }

    h2 {
        font-size: var(--font-size-xl);
    }

    h3 {
        font-size: var(--font-size-lg);
    }

    .btn {
        padding: var(--spacing-sm) var(--spacing-lg);
        min-height: 44px;
    }

    .bottom-nav {
        padding: var(--spacing-xs) 0;
    }

    .nav-item {
        padding: var(--spacing-xs);
        min-height: 60px;
    }
}

/* ===================================
   Screen-Specific Styles
   =================================== */

/* Home Screen */
.condition-selector {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    justify-content: space-between;
}

@media (max-width: 600px) {
    .condition-selector {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xs);
    }

    .condition-btn {
        padding: var(--spacing-md) var(--spacing-xs);
        font-size: var(--font-size-xs);
    }

    .condition-icon {
        font-size: var(--font-size-lg);
        display: block;
        margin-bottom: 2px;
    }


}

.condition-btn {
    flex: 1;
    padding: var(--spacing-lg);
    border: 2px solid var(--bg-tertiary);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    font-weight: 600;
    font-size: var(--font-size-base);
    text-align: center;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.condition-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.condition-btn.active {
    border-color: var(--accent-primary);
    background: var(--gradient-primary);
    color: white;
    transform: scale(1.05);
}

.condition-icon {
    font-size: var(--font-size-2xl);
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.start-session-btn,
.quick-report-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.start-session-btn {
    background: var(--gradient-primary);
}

.quick-report-btn {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
}

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

.start-session-btn:hover::before,
.quick-report-btn:hover::before {
    left: 100%;
}

.start-session-btn:hover,
.quick-report-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.start-session-btn:active,
.quick-report-btn:active {
    transform: translateY(-1px);
}

.session-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.session-text {
    flex: 1;
    text-align: left;
}

.session-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.session-subtitle {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.session-arrow {
    font-size: var(--font-size-2xl);
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.start-session-btn:hover .session-arrow,
.quick-report-btn:hover .session-arrow {
    transform: translateX(5px);
}

.section-header {
    margin-bottom: var(--spacing-lg);
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.live-feed {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.feed-item {
    cursor: pointer;
}

.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
}

.feed-user {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.user-avatar,
.feed-avatar,
.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    overflow: hidden;
}

.user-avatar img,
.feed-avatar img,
.review-avatar img,
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

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

.user-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.feed-time {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
}

.condition-badge {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.condition-badge.hot {
    background: var(--gradient-hot);
    color: white;
}

.condition-badge.cold {
    background: var(--gradient-cold);
    color: white;
}

.condition-badge.choppy {
    background: var(--gradient-choppy);
    color: white;
}

.feed-casino {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.casino-icon {
    font-size: var(--font-size-lg);
}

.casino-name {
    font-weight: 600;
}

.casino-distance {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

.feed-comment {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}

.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

.empty-state h3,
.empty-state h4 {
    color: var(--text-primary);
    margin: var(--spacing-md) 0;
    font-weight: 600;
}

.empty-state p {
    margin: var(--spacing-sm) 0 var(--spacing-lg);
    line-height: 1.6;
}

.empty-state .btn {
    margin-top: var(--spacing-md);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.8;
}

/* Casinos Screen */
.search-filter-bar {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.casinos-header-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.full-width-search {
    width: 100%;
}

.actions-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
}

.action-icon-btn {
    width: 100% !important;
    /* Fill grid cell */
    justify-content: center;
    margin: 0 !important;
}

.state-filter-row {
    position: relative;
    width: 100%;
}

.filter-btn.full-width {
    width: 100%;
    justify-content: space-between;
    /* Space out label and arrow */
}

.search-container {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: var(--spacing-md);
    color: var(--text-tertiary);
    font-size: 1.2rem;
    pointer-events: none;
}

input.search-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) 55px;
    font-size: var(--font-size-base);
    background: var(--bg-secondary);
    border: 2px solid var(--bg-tertiary);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    transition: all var(--transition-base);
}

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

.clear-btn {
    position: absolute;
    right: var(--spacing-md);
    background: none;
    border: none;
    color: #ff4d4d;
    /* Red X */
    font-size: 1.1rem;
    cursor: pointer;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--transition-base);
}

.clear-btn:hover {
    background: rgba(255, 77, 77, 0.1);
}

.clear-btn.hidden {
    display: none;
}

.filter-container {
    position: relative;
    min-width: 180px;
}

.filter-btn {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border: 2px solid var(--bg-tertiary);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    font-weight: 500;
}

.filter-btn:hover {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

#filter-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-arrow {
    font-size: var(--font-size-sm);
    transition: transform var(--transition-base);
}

.filter-dropdown {
    position: absolute;
    top: calc(100% + var(--spacing-xs));
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 2px solid var(--bg-tertiary);
    border-radius: var(--radius-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
}

.filter-option {
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--bg-tertiary);
}

.filter-option:last-child {
    border-bottom: none;
}

.filter-option:hover {
    background: var(--bg-tertiary);
}

.filter-option.active {
    background: var(--gradient-primary);
    color: white;
}

.state-name {
    font-weight: 500;
}

.state-count {
    background: var(--bg-tertiary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.filter-option.active .state-count {
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .search-filter-bar {
        flex-direction: column;
    }

    .filter-container {
        min-width: 100%;
    }
}

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

.casino-card {
    cursor: pointer;
}

.casino-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.casino-info h3 {
    margin-bottom: var(--spacing-xs);
}

.casino-location {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}

.favorite-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    font-size: var(--font-size-xl);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-btn:hover {
    transform: scale(1.1);
    background: var(--bg-tertiary);
}

.favorite-btn.active {
    background: var(--gradient-primary);
    border-color: transparent;
}

.favorite-btn i {
    color: var(--text-secondary);
    transition: color var(--transition-base);
}

.favorite-btn.active i {
    color: #ff6b6b;
}

.casino-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.stat {
    text-align: center;
}

.stat-label {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-xs);
}

.stat-value {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.casino-condition {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.condition-time {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
}

/* Track Screen */
.session-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.session-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.timer-icon {
    font-size: var(--font-size-2xl);
}

/* Challenges Widget */
.challenges-widget {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.challenges-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 100px;
}

.challenge-section {
    margin-bottom: var(--spacing-md);
}

.challenge-section-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
}

.challenge-list-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.challenge-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: all 0.2s ease;
}

.challenge-item.completed:not(.claimed) {
    background: rgba(78, 205, 196, 0.1);
    border: 1px solid rgba(78, 205, 196, 0.3);
}

.challenge-item.claimed {
    opacity: 0.6;
}

.challenge-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.challenge-info {
    flex: 1;
}

.challenge-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
    margin-bottom: 2px;
}

.challenge-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.challenge-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.challenge-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-tertiary);
}

.challenge-action {
    min-width: 60px;
    text-align: center;
}

.btn-claim {
    background: var(--gradient-gold);
    border: none;
    color: var(--bg-primary);
    font-weight: bold;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    animation: pulse 1.5s infinite;
}

.claimed-check {
    color: var(--accent-primary);
    font-weight: bold;
}

.percent-text {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-secondary);
}

.new-badge {
    background: var(--accent-secondary);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    margin-left: 5px;
    vertical-align: middle;
}

/* Dedicated Challenges Screen */
.challenges-screen {
    padding-bottom: 80px;
    min-height: 100vh;
}

.challenges-tabs {
    display: flex;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 60px;
    z-index: 9;
    backdrop-filter: blur(10px);
}

.tab-btn {
    flex: 1;
    padding: var(--spacing-sm);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn.active {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
    font-weight: 600;
}

.challenges-content {
    padding: var(--spacing-md);
}

.challenge-section-full {
    margin-bottom: var(--spacing-lg);
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

.timer-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--accent-gold);
}

.challenge-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.challenge-card-full {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.challenge-card-full.weekly {
    border: 1px solid rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(20, 20, 20, 0.8) 100%);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.challenge-card-full .challenge-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.xp-badge {
    background: var(--accent-gold);
    color: black;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
}

.card-body .challenge-title {
    font-size: 1.1rem;
    margin-bottom: 4px;
    color: white;
}

.card-body .challenge-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.4;
}

.progress-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 2px;
    /* Inner padding for bar */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.progress-container .progress-bar {
    height: 8px;
    /* Thicker than widget */
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0;
}

.progress-container .fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.weekly .progress-container .fill {
    background: var(--accent-gold);
}

.progress-text {
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    padding: 4px 4px 0 0;
}

.card-footer {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: flex-end;
}

.btn-claim-large {
    background: var(--gradient-gold);
    border: none;
    color: black;
    font-weight: 800;
    padding: 10px 24px;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    animation: pulse 2s infinite;
    width: 100%;
}

.btn-claimed {
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    opacity: 0.7;
}

.status-text {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-style: italic;
}

/* History Items */
.history-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.history-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-primary);
}

.history-icon {
    font-size: 1.5rem;
}

.history-info {
    flex: 1;
}

.history-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.history-date {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.history-reward {
    font-weight: 700;
    color: var(--accent-gold);
}

.roll-interface {
    margin-bottom: var(--spacing-xl);
}

.tracking-details-bar {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1.8fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    align-items: flex-end;
}

@media (max-width: 600px) {
    .tracking-details-bar {
        grid-template-columns: max-content 1fr;
        gap: 0.5rem;
    }

    .shooter-group {
        width: 100%;
        min-width: 0;
    }

    .position-group {
        width: fit-content;
    }

    #position-select {
        width: auto !important;
        min-width: 0;
    }

    .session-pl-group,
    .tools-group,
    .diceset-group {
        grid-column: span 2;
        width: 100%;
    }

    .pl-updater {
        width: 100%;
    }

    .pl-input-wrapper {
        flex: 1;
    }
}

.shooter-select-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.shooter-select-wrapper .detail-select {
    flex: 1;
}

.edit-icon-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
    z-index: 10;
    position: relative;
    pointer-events: auto;
}

.edit-icon-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.detail-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-group label {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.detail-select {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C2.185 5.355 2.398 5 2.721 5h10.558c.323 0 .536.355.27.658l-4.796 5.482a.5.5 0 0 1-.748 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.detail-select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
    outline: none;
}

.shooter-name-input {
    background: var(--bg-tertiary);
    border: 2px solid var(--accent-primary) !important;
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    width: 100%;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
    animation: pulse-border 0.3s ease-out;
    background-image: none !important;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.5);
    }

    100% {
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
    }
}

.roll-header h3 {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.dice-selection-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    position: relative;
    /* Added for outcome flash overlay */
}

/* Outcome Flash Overlay */
.outcome-flash-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    pointer-events: none;
    animation: flash-overlay-in 3s ease-out forwards;
}

.outcome-flash-content {
    background: rgba(15, 15, 30, 0.85);
    backdrop-filter: blur(12px);
    border: 4px solid var(--primary-color);
    border-radius: 24px;
    padding: 30px 50px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(var(--primary-rgb), 0.2);
    transform: scale(0.8);
    opacity: 0;
    animation: flash-content-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.outcome-flash-emoji {
    font-size: 5rem;
    margin-bottom: 10px;
}

.outcome-flash-label {
    font-size: 2.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.outcome-flash-counts {
    display: flex;
    gap: 30px;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.outcome-flash-count-item {
    display: flex;
    flex-direction: column;
}

.outcome-flash-count-item .label {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-weight: 700;
}

.outcome-flash-count-item .value {
    font-size: 1.5rem;
    font-weight: 800;
}

@keyframes flash-overlay-in {
    0% {
        background: rgba(0, 0, 0, 0);
    }

    10% {
        background: rgba(0, 0, 0, 0.2);
    }

    80% {
        background: rgba(0, 0, 0, 0.2);
    }

    100% {
        background: rgba(0, 0, 0, 0);
    }
}

@keyframes flash-content-in {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.dice-row {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
}

.dice-face {
    width: 60px;
    height: 60px;
    background: #dc3545;
    /* Red dice */
    border-radius: 0;
    /* Sharp corners */
    padding: 8px;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 4px 0 #b02a37, 0 8px 15px rgba(0, 0, 0, 0.3);
    border: 2px solid transparent;
}

.dice-face:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #b02a37, 0 12px 20px rgba(0, 0, 0, 0.4);
}

.dice-face.selected {
    border-color: #fff;
    border-width: 3px;
    box-shadow: 0 0 20px #dc3545, 0 4px 0 #b02a37;
    transform: scale(1.15);
    z-index: 2;
}

.pips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
    gap: 2px;
}

.pip {
    width: 8px;
    height: 8px;
    background: transparent;
    border-radius: 50%;
    margin: auto;
}

.pip.active {
    background: #fff;
    /* White pips */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.roll-submit-container {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

.submit-roll-btn {
    background: #1a2a1a;
    border: 1px solid #2d4a2d;
    color: #fff;
    padding: 12px 40px;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.submit-roll-btn:not(:disabled):hover {
    background: #253a25;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 15px rgba(78, 205, 196, 0.2);
}

.submit-roll-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #111;
}

.submit-icon {
    font-size: 1.2rem;
}

.game-state-panel {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Roll History */
.roll-history {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.roll-history h3 {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.roll-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.shooter-group {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    border-left: 3px solid var(--accent-primary);
}

.shooter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 6px;
}

.shooter-info {
    font-size: 0.75rem;
    color: var(--accent-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hand-stats {
    display: flex;
    align-items: center;
    gap: 6px;
}

.roll-count {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.hand-active {
    font-size: 0.7rem;
    color: var(--accent-secondary);
    font-weight: 500;
}

.ats-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
}

.ats-badge.small {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #fff;
}

.ats-badge.tall {
    background: linear-gradient(135deg, #007bff, #00d4ff);
    color: #fff;
}

.ats-badge.all {
    background: linear-gradient(135deg, #ffc107, #ff8c00);
    color: #000;
}

.firebet-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.firebet-badge.fire-4 {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: #fff;
}

.firebet-badge.fire-5 {
    background: linear-gradient(135deg, #dc3545, #ff416c);
    color: #fff;
}

.firebet-badge.fire-6 {
    background: linear-gradient(135deg, #6f42c1, #e91e63);
    color: #fff;
    animation: fire-pulse 1s ease-in-out infinite alternate;
}

@keyframes fire-pulse {
    from {
        box-shadow: 0 0 4px rgba(111, 66, 193, 0.5);
    }

    to {
        box-shadow: 0 0 12px rgba(233, 30, 99, 0.8);
    }
}

.hand-roll-count {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 6px;
}

.shooter-rolls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.roll-chip {
    display: inline-flex;
    align-items: center;
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.roll-chip .roll-annotation {
    font-size: 0.65rem;
    margin-left: 2px;
    opacity: 0.7;
    vertical-align: super;
}

.roll-chip.seven-out {
    background: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
    color: #ff6b7a;
}

.roll-chip.point-hit {
    background: rgba(40, 167, 69, 0.2);
    border-color: #28a745;
    color: #5dd879;
}

.roll-chip.natural {
    background: rgba(78, 205, 196, 0.2);
    border-color: #4ecdc4;
    color: #7eeee6;
}

.roll-chip.craps {
    background: rgba(255, 193, 7, 0.2);
    border-color: #ffc107;
    color: #ffd454;
}

.game-phase {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.phase-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.phase-value {
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.phase-value.come-out {
    color: #10b981;
}

.phase-value.on-point {
    color: #f59e0b;
}

.ats-display {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ats-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.ats-label {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 50px;
}

.ats-progress {
    font-size: var(--font-size-lg);
    letter-spacing: 2px;
    color: var(--primary);
}

.bonus-trackers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

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

.bonus-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.bonus-value {
    font-size: var(--font-size-lg);
    color: #fbbf24;
}

@media (max-width: 768px) {
    .bonus-trackers {
        grid-template-columns: 1fr;
    }

    .hardways-grid {
        gap: var(--spacing-xs);
    }
}

/* Session Mode Selector */
.session-mode-selector {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.session-mode-selector h3 {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.mode-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.mode-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

.mode-option:hover {
    background: var(--bg-elevated);
    transform: translateY(-2px);
}

.mode-option.active {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2), var(--shadow-md);
    transform: scale(1.02);
}

.mode-option.active[data-mode="casino"] {
    border-color: #f59e0b;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.15) 100%);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2), var(--shadow-md);
}

.mode-icon {
    font-size: var(--font-size-2xl);
    flex-shrink: 0;
}

.mode-info {
    flex: 1;
}

.mode-title {
    font-weight: 600;
    font-size: var(--font-size-base);
    margin-bottom: 2px;
}

.mode-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.mode-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Casino Selection */
.casino-selection {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--bg-elevated);
}

/* Bankroll Inputs */
.buy-in-section,
.cash-out-section {
    margin-top: var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.buy-in-input,
.cash-out-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    color: white;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    margin-top: 5px;
}

.buy-in-input:focus,
.cash-out-input:focus {
    border-color: var(--accent-primary);
    outline: none;
    background: rgba(255, 255, 255, 0.15);
}

/* Level Up Overlay */
.level-up-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s ease;
    backdrop-filter: blur(5px);
}

.level-up-overlay.active {
    opacity: 1;
}

.level-up-content {
    text-align: center;
    transform: scale(0.8);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.level-up-overlay.active .level-up-content {
    transform: scale(1);
}

.level-up-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-gold);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    margin-bottom: var(--spacing-md);
    animation: glow 2s ease-in-out infinite alternate;
}

.level-badge-large {
    font-size: 4rem;
    margin: var(--spacing-lg) 0;
}

.casino-selection h4 {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
}

.casino-search-container {
    position: relative;
}

.casino-search-input {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--bg-elevated);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
}

.casino-search-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-elevated);
}

.casino-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--spacing-xs);
    background: var(--bg-elevated);
    border: 1px solid var(--bg-elevated);
    border-radius: var(--radius-md);
    max-height: 250px;
    overflow-y: auto;
    z-index: 10;
    display: none;
    box-shadow: var(--shadow-lg);
}

.casino-results.active {
    display: block;
}

.casino-result-item {
    padding: var(--spacing-md);
    cursor: pointer;
    transition: background var(--transition-base);
    border-bottom: 1px solid var(--bg-tertiary);
}

.casino-result-item:last-child {
    border-bottom: none;
}

.casino-result-item:hover {
    background: var(--bg-tertiary);
}

.casino-result-name {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.casino-result-location {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.no-results {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--text-secondary);
}

.selected-casino-display {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.selected-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.selected-casino-name {
    flex: 1;
    color: var(--primary);
    font-weight: 500;
}

.clear-casino-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: var(--font-size-lg);
    line-height: 1;
}

.clear-casino-btn:hover {
    background: var(--danger);
    color: white;
}

/* Session Type Badge */
.session-type-badge {
    margin-left: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.session-type-badge.practice {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.session-type-badge.casino {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* Roll Header with Toggle */
.roll-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.roll-header h3 {
    margin: 0;
}

.input-mode-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--bg-elevated);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: var(--font-size-sm);
}

.input-mode-toggle:hover {
    background: var(--bg-elevated);
    transform: translateY(-1px);
}

.toggle-icon {
    font-size: var(--font-size-lg);
}

/* Dice Combination Grid */
.dice-combination-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-sm);
}

.dice-combo-btn {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-xs);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.dice-combo-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dice-combo-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .mode-options {
        grid-template-columns: 1fr;
    }

    .dice-combination-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 4px;
    }

    .dice-combo-btn {
        padding: 2px;
    }

    .die {
        font-size: var(--font-size-base);
    }

    .combo-total {
        font-size: 10px;
    }

    /* Calculator Mobile Optimization */
    .number-selector-paired {
        flex-wrap: wrap;
        gap: 6px;
    }

    .number-btn-pair {
        flex: 1 1 calc(33.333% - 6px);
        min-width: 0;
        padding: 10px 6px;
        font-size: var(--font-size-base);
    }

    .number-top,
    .number-bottom {
        font-size: var(--font-size-base);
    }

    .chip-selector-row {
        gap: 6px;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .casino-chip {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .casino-chip .chip-value {
        font-size: var(--font-size-sm);
    }
}

.session-stats {
    margin-bottom: var(--spacing-xl);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100px;
}

.stats-visuals {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

@media (min-width: 768px) {
    .stats-visuals {
        grid-template-columns: 1fr 1fr;
    }
}

.roll-distribution,
.point-frequency {
    background: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.point-frequency h4 {
    margin-bottom: var(--spacing-md);
}

.freq-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.freq-label {
    width: 30px;
    font-weight: 700;
    font-size: var(--font-size-md);
    color: var(--primary-color);
}

.freq-bar-container {
    flex-grow: 1;
    background: var(--bg-tertiary);
    height: 32px;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.freq-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--radius-md);
    opacity: 0.8;
}

.freq-value {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.distribution-bar {
    display: grid;
    grid-template-columns: 30px 1fr 40px;
    gap: var(--spacing-sm);
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.bar-label {
    font-weight: 600;
}

.bar-container {
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    height: 24px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--gradient-primary);
    transition: width var(--transition-base);
}

.bar-count {
    text-align: right;
    font-weight: 600;
    color: var(--text-secondary);
}

.guest-prompt {
    text-align: center;
    padding: var(--spacing-2xl);
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
}

.prompt-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
}

/* Leaderboard Screen */
.leaderboard-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

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

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

.rank-badge {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    font-weight: 700;
    flex-shrink: 0;
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #C0C0C0 0%, #808080 100%);
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);
}

.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.player-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    overflow: hidden;
}



.player-info {
    flex: 1;
}

.player-name {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.player-stats-mini {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

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

.points-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.points-label {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
}

.player-details {
    margin-left: 100px;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.detail-stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.detail-icon {
    font-size: var(--font-size-lg);
}

.detail-value {
    margin-left: auto;
    font-weight: 600;
    color: var(--text-primary);
}

.leaderboard-info {
    text-align: center;
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
}

/* Calculator Screen */
.calculator-screen {
    padding-bottom: 120px;
    /* Extra space to ensure content is visible above bottom nav */
}

.calc-section {
    margin-bottom: var(--spacing-xl);
}

.bet-type-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.bet-type-btn {
    flex: 1;
    min-width: 100px;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border: 2px solid var(--bg-tertiary);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    font-weight: 500;
}

.bet-type-btn.active {
    border-color: var(--accent-primary);
    background: var(--gradient-primary);
    color: white;
}

/* Paired Number Selector */
.number-selector-paired {
    display: flex;
    gap: var(--spacing-sm);
}

.number-btn-pair {
    flex: 1;
    min-width: 80px;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border: 2px solid var(--bg-tertiary);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.number-btn-pair.active {
    border-color: var(--accent-primary);
    background: var(--gradient-primary);
    color: white;
    transform: scale(1.05);
}

.number-btn-pair:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.number-top,
.number-bottom {
    font-size: var(--font-size-xl);
}

.number-divider {
    font-size: var(--font-size-lg);
    opacity: 0.6;
    margin: 0 2px;
}

/* Casino Chips with Edge Stripes */
.chip-selector-row {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    overflow-x: auto;
    padding: var(--spacing-sm) 0;
}

.casino-chip {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.casino-chip:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.casino-chip:active {
    transform: translateY(-2px) scale(1.02);
}

/* Chip with edge stripes using conic gradient */
.casino-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 3px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.casino-chip .chip-value {
    font-size: var(--font-size-base);
    font-weight: 700;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* White chip ($1) - White center with red stripes */
.casino-chip.white-red {
    background: radial-gradient(circle at center,
            white 0%,
            white 55%,
            #dc3545 55%,
            #dc3545 60%,
            white 60%,
            white 65%,
            #dc3545 65%,
            #dc3545 70%,
            white 70%);
    color: #333;
}

.casino-chip.white-red::before {
    background: conic-gradient(from 0deg,
            #dc3545 0deg 45deg,
            white 45deg 90deg,
            #dc3545 90deg 135deg,
            white 135deg 180deg,
            #dc3545 180deg 225deg,
            white 225deg 270deg,
            #dc3545 270deg 315deg,
            white 315deg 360deg);
}

/* Red chip ($5) - Red center with white stripes */
.casino-chip.red-white {
    background: radial-gradient(circle at center,
            #dc3545 0%,
            #dc3545 55%,
            white 55%,
            white 60%,
            #dc3545 60%,
            #dc3545 65%,
            white 65%,
            white 70%,
            #dc3545 70%);
    color: white;
}

.casino-chip.red-white::before {
    background: conic-gradient(from 0deg,
            white 0deg 45deg,
            #dc3545 45deg 90deg,
            white 90deg 135deg,
            #dc3545 135deg 180deg,
            white 180deg 225deg,
            #dc3545 225deg 270deg,
            white 270deg 315deg,
            #dc3545 315deg 360deg);
}

/* Green chip ($25) - Green center with white stripes */
.casino-chip.green-white {
    background: radial-gradient(circle at center,
            #28a745 0%,
            #28a745 55%,
            white 55%,
            white 60%,
            #28a745 60%,
            #28a745 65%,
            white 65%,
            white 70%,
            #28a745 70%);
    color: white;
}

.casino-chip.green-white::before {
    background: conic-gradient(from 0deg,
            white 0deg 45deg,
            #28a745 45deg 90deg,
            white 90deg 135deg,
            #28a745 135deg 180deg,
            white 180deg 225deg,
            #28a745 225deg 270deg,
            white 270deg 315deg,
            #28a745 315deg 360deg);
}

/* Black chip ($100) - Black center with white stripes */
.casino-chip.black-white {
    background: radial-gradient(circle at center,
            #212529 0%,
            #212529 55%,
            white 55%,
            white 60%,
            #212529 60%,
            #212529 65%,
            white 65%,
            white 70%,
            #212529 70%);
    color: white;
}

.casino-chip.black-white::before {
    background: conic-gradient(from 0deg,
            white 0deg 45deg,
            #212529 45deg 90deg,
            white 90deg 135deg,
            #212529 135deg 180deg,
            white 180deg 225deg,
            #212529 225deg 270deg,
            white 270deg 315deg,
            #212529 315deg 360deg);
}

/* Purple chip ($500) - Purple center with white stripes */
.casino-chip.purple-white {
    background: radial-gradient(circle at center,
            #6f42c1 0%,
            #6f42c1 55%,
            white 55%,
            white 60%,
            #6f42c1 60%,
            #6f42c1 65%,
            white 65%,
            white 70%,
            #6f42c1 70%);
    color: white;
}

.casino-chip.purple-white::before {
    background: conic-gradient(from 0deg,
            white 0deg 45deg,
            #6f42c1 45deg 90deg,
            white 90deg 135deg,
            #6f42c1 135deg 180deg,
            white 180deg 225deg,
            #6f42c1 225deg 270deg,
            white 270deg 315deg,
            #6f42c1 315deg 360deg);
}

/* Yellow chip ($1000) - Yellow center with black stripes */
.casino-chip.yellow-black {
    background: radial-gradient(circle at center,
            #ffc107 0%,
            #ffc107 55%,
            #212529 55%,
            #212529 60%,
            #ffc107 60%,
            #ffc107 65%,
            #212529 65%,
            #212529 70%,
            #ffc107 70%);
    color: #333;
}

.casino-chip.yellow-black::before {
    background: conic-gradient(from 0deg,
            #212529 0deg 45deg,
            #ffc107 45deg 90deg,
            #212529 90deg 135deg,
            #ffc107 135deg 180deg,
            #212529 180deg 225deg,
            #ffc107 225deg 270deg,
            #212529 270deg 315deg,
            #ffc107 315deg 360deg);
}

.bet-input-group {
    display: flex;
    gap: var(--spacing-sm);
}

.bet-input-group input {
    flex: 1;
}

.calc-result {
    background: var(--bg-secondary);
    margin-bottom: var(--spacing-xl);
}

.result-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--bg-tertiary);
}

.result-row:last-child {
    border-bottom: none;
}

.result-row.highlight {
    font-weight: 600;
}

.result-label {
    color: var(--text-secondary);
}

.result-value {
    color: var(--text-primary);
    font-weight: 600;
}

.result-value.total {
    font-size: var(--font-size-xl);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.odds-reference {
    background: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
}

.odds-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.odds-item {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.odds-bet {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.odds-ratio {
    font-weight: 600;
    color: var(--accent-primary);
}

.odds-bet {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.odds-ratio {
    font-weight: 600;
    color: var(--accent-primary);
}

/* Odds Bets Section */
.odds-bets-section {
    margin-top: var(--spacing-xl);
}

.odds-bets-section h3 {
    margin-bottom: var(--spacing-md);
}

.odds-bets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    overflow-x: auto;
}

.odds-bet-btn {
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border: 2px solid var(--bg-tertiary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 120px;
}

.odds-bet-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-primary);
}

.odds-bet-btn.active {
    border-color: var(--accent-primary);
    background: var(--gradient-primary);
    color: white;
}

.odds-name {
    font-size: var(--font-size-sm);
    text-align: center;
    line-height: 1.4;
    color: var(--text-primary);
}

.odds-payout {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.odds-bet-btn.active .odds-payout {
    background: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 768px) {
    .odds-bets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================================
   Roll History Display
   =================================== */

.roll-history {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.roll-history h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.roll-history-list {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-height: 150px;
    overflow-y: auto;
}

.roll-history.hidden {
    display: none;
}

/* Session Type Dropdown */
.session-type-select {
    width: 100%;
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-bottom: var(--spacing-md);
}

.session-type-select:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-primary);
}

.session-type-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* Table Info Section */
.table-info-section {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.table-info-section h4 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.table-info-section .form-group {
    margin-bottom: var(--spacing-md);
}

.table-info-section .form-group:last-child {
    margin-bottom: 0;
}

.table-info-section label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

/* Table Number Input */
.table-number-input {
    width: 100%;
    padding: var(--spacing-sm);
    font-size: var(--font-size-base);
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: all var(--transition-base);
}

.table-number-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
}

/* Table Size Select */
.table-size-select {
    width: 100%;
    padding: var(--spacing-sm);
    font-size: var(--font-size-base);
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.table-size-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
}

/* Bounce Selector */
.bounce-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.bounce-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
}

.bounce-btn:hover {
    background: var(--bg-elevated);
    transform: translateY(-2px);
}

.bounce-btn.active {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.bounce-icon {
    font-size: var(--font-size-2xl);
}

.bounce-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
}

.bounce-btn.active .bounce-label {
    color: var(--text-primary);
}

/* Table Info Display (in session header) */
.table-info-display {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .bounce-selector {
        grid-template-columns: repeat(2, 1fr);
    }

    .table-info-display {
        display: block;
        margin-top: var(--spacing-xs);
    }
}

/* Casino Detail View Styles */
.casino-detail-screen {
    background: var(--bg-primary);
    min-height: 100%;
}

.detail-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.back-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) 0;
}

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

.back-arrow {
    font-size: var(--font-size-lg);
}

.detail-hero {
    background: var(--gradient-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.hero-title {
    font-size: var(--font-size-2xl);
    margin: 0 0 var(--spacing-xs) 0;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-location {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
}

.hero-stats {
    display: flex;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.stat-val {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.stat-lbl {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
}

.condition-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
}

.condition-banner.hot {
    background: rgba(255, 77, 77, 0.15);
    border: 1px solid rgba(255, 77, 77, 0.3);
}

.condition-banner.cold {
    background: rgba(77, 166, 255, 0.15);
    border: 1px solid rgba(77, 166, 255, 0.3);
}

.condition-banner.choppy {
    background: rgba(255, 179, 71, 0.15);
    border: 1px solid rgba(255, 179, 71, 0.3);
}

.condition-icon {
    font-size: 2rem;
}

.condition-text {
    display: flex;
    flex-direction: column;
}

.condition-status {
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.condition-desc {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.detail-section {
    margin-bottom: var(--spacing-xl);
}

.section-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    border-left: 4px solid var(--accent-primary);
    padding-left: var(--spacing-md);
}

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

.last-updated {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Electronic Games Grid */
.electronic-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-md);
}

.game-item {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    border: 1px solid var(--bg-tertiary);
    text-align: center;
}

.game-item.available {
    border-color: rgba(77, 255, 148, 0.3);
    background: linear-gradient(to bottom right, var(--bg-secondary), rgba(77, 255, 148, 0.05));
}

.game-item.unavailable {
    opacity: 0.6;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: var(--spacing-sm);
    flex-shrink: 0;
    overflow: hidden;
}

.review-user-info {
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.game-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-xs);
}

.game-name {
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.game-status {
    font-size: var(--font-size-md);
}

/* Tables Grid */
.tables-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.table-card {
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: transform var(--transition-base);
}

.table-card:hover {
    border-color: var(--accent-primary);
}

.table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--bg-tertiary);
}

.table-number {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--accent-primary);
}

.condition-badge.small {
    padding: 2px 8px;
    font-size: 0.7rem;
}

.table-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.table-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.detail-icon {
    font-size: 1.2rem;
}

.detail-value {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.detail-value.capitalize {
    text-transform: capitalize;
}

.empty-state.small {
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
    transition: all var(--transition-base);
}

.btn-secondary:hover {
    background: var(--bg-hover);
}

/* Floating Action Button */
.floating-action-btn-container {
    position: fixed;
    bottom: 80px;
    /* Above nav bar */
    right: 20px;
    z-index: 100;
}

.fab-btn {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-full);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: transform var(--transition-fast);
}

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

@media (min-width: 768px) {
    .tables-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Report Table Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: var(--spacing-md);
}

.report-table-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    font-size: var(--font-size-xl);
}

.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-subtitle {
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
    font-size: var(--font-size-sm);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.form-input,
.form-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border: 2px solid var(--bg-tertiary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: var(--spacing-xl);
}

.modal-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    justify-content: flex-end;
}

.modal-actions .btn {
    min-width: 100px;
}

@media (max-width: 768px) {
    .modal-overlay {
        padding: 0;
    }

    .report-table-modal {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

    .modal-actions .btn {
        width: 100%;
    }
}


/* Enhanced Table Information Styles */
.form-row {
    display: flex;
    gap: var(--spacing-md);
}

.form-group.half {
    flex: 1;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.checkbox-label:hover {
    background: var(--bg-tertiary);
}

.form-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.form-textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border: 2px solid var(--bg-tertiary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: all var(--transition-base);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

/* Table Card Enhancements */
.bet-limits {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.min-bet,
.max-bet {
    font-weight: 600;
    color: var(--text-primary);
}

.separator {
    color: var(--text-tertiary);
}

.bonus-bets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
}

.bonus-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--spacing-xs);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.table-location {
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-style: italic;
}

.table-description {
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }

    .form-group.half {
        flex: none;
    }
}


/* Table Card Click Interaction */
.table-card {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.table-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* Electronic Games Section Interaction */
#electronic-games-section:hover {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.edit-hint {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-style: italic;
}


/* Game Item Click Interaction */
.game-item {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.game-item:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


/* Electronic Games Icons on Casino Cards */
.casino-condition {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.casino-egames {
    display: flex;
    gap: var(--spacing-xs);
}

.egame-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-fast);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.egame-badge:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}




/* Casino Description Section */
.casino-description {
    margin: var(--spacing-lg) 0;
}

.description-section {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary-color);
}

.description-section:last-child {
    margin-bottom: 0;
}

.description-heading {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 var(--spacing-xs) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.description-text {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.gaming-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-sm);
}

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

.detail-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

.detail-value {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-weight: 600;
}



/* Casino detail header */
.casino-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.header-casino-name {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 var(--spacing-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive Header Fix */
@media (max-width: 768px) {
    .casino-detail-header {
        flex-wrap: wrap;
        gap: 12px;
        padding: 0.75rem 1rem;
    }

    .back-btn {
        order: 1;
        flex-shrink: 0;
    }

    .header-casino-name {
        order: 2;
        flex: 1;
        text-align: right;
        font-size: 1.25rem;
        padding: 0;
    }

    .header-actions {
        order: 3;
        width: 100%;
        display: flex;
        gap: 4px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        overflow: hidden;
    }

    .header-actions button {
        flex: 1;
        padding: 6px 2px;
        font-size: 0.7rem;
        white-space: nowrap;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-width: 0;
        line-height: 1;
    }

    .header-actions button i {
        font-size: 0.9rem;
        margin: 0 !important;
    }
}

/* Collapsible Section */
.collapsible-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.section-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.edit-description-btn,
.collapse-btn {
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: var(--spacing-xs);
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.edit-description-btn:hover,
.collapse-btn:hover {
    opacity: 1;
}

.section-content.collapsed {
    max-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.description-edit {
    width: 100%;
    min-height: 120px;
    padding: var(--spacing-sm);
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: 1.6;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    resize: vertical;
}

.edit-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.btn-save,
.btn-cancel {
    padding: var(--spacing-xs) var(--spacing-md);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

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

.btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-cancel:hover {
    background: var(--bg-tertiary);
}


/* Casino Address on Cards */
.casino-address {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: var(--spacing-xs) 0 0 0;
    line-height: 1.4;
}

/* Report Table Button */
.report-table-btn {
    background: var(--bg-secondary);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.report-table-btn:hover {
    background: var(--bg-elevated);
    transform: scale(1.1);
    border-color: var(--accent-primary);
}

.report-table-btn i {
    color: #4ecdc4;
    font-weight: bold;
}

/* Filter Container - ensures buttons appear on same row */
.filter-container {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* Favorites Filter Button */
.favorites-filter-btn {
    background: var(--bg-secondary);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.favorites-filter-btn:hover {
    background: var(--bg-elevated);
    transform: scale(1.05);
    border-color: var(--accent-primary);
}

.favorites-filter-btn i {
    color: #ff6b6b;
    transition: color 0.3s ease;
}

.favorites-filter-btn.active {
    background: rgba(231, 76, 60, 0.1);
    border-color: #e74c3c;
}

.favorites-filter-btn.active i {
    color: #e74c3c;
}

/* Quick Filters Bar */
.quick-filters-bar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 0;
    margin-bottom: 10px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.quick-filters-bar::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.filter-chip {
    flex: 0 0 auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.filter-chip:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.filter-chip.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

.filter-chip.custom {
    border-style: dashed;
}

.filter-chip .delete-preset {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.filter-chip .delete-preset:hover {
    opacity: 1;
    color: #ff4d4d;
}

/* Save Preset UI */
.save-preset-container {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.save-preset-form {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.save-preset-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    color: white;
    font-size: 0.9rem;
}

/* Pending Deletion Styles */
.table-card.pending-deletion {
    opacity: 0.6;
    border: 2px dashed #e74c3c !important;
    background: rgba(231, 76, 60, 0.05);
}

.pending-deletion-badge {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.delete-table-btn {
    background: transparent;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.delete-table-btn:hover {
    background: rgba(231, 76, 60, 0.1);
    transform: scale(1.1);
}

.table-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Cancel Deletion Button */
.cancel-deletion-btn {
    background: transparent;
    border: 1px solid #f39c12;
    color: #f39c12;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cancel-deletion-btn:hover {
    background: rgba(243, 156, 18, 0.1);
    transform: scale(1.05);
}

/* Delete Confirmation Modal */
.delete-confirm-modal {
    max-width: 500px;
}

.delete-confirm-modal .modal-note {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

.btn-danger {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-danger:hover {
    background: #c0392b;
    transform: translateY(-2px);
}

/* Profile Modal Styles */
.profile-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.profile-avatar {
    font-size: 3rem;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: 50%;
}

.profile-details {
    flex: 1;
}

.profile-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.profile-email {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.error-message {
    color: #e74c3c;
    font-size: 0.85rem;
    margin-top: 4px;
}

.success-message {
    color: #27ae60;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* ===================================
   Leaderboard Screen
   =================================== */

.leaderboard-screen {
    padding: 20px;
}

.leaderboard-header {
    text-align: center;
    margin-bottom: 30px;
}

.leaderboard-header h2 {
    font-size: 2rem;
    margin-bottom: 8px;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.leaderboard-card-container {
    background: var(--bg-secondary);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.leaderboard-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
}

.rank-badge {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.1rem;
    background: var(--bg-elevated);
}

.rank-1 {
    background: linear-gradient(135deg, #ffd700, #ffae00);
    color: #000;
    font-size: 1.5rem;
}

.rank-2 {
    background: linear-gradient(135deg, #c0c0c0, #909090);
    color: #000;
    font-size: 1.5rem;
}

.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #a0522d);
    color: #000;
    font-size: 1.5rem;
}

.player-avatar {
    font-size: 1.5rem;
}

.player-info {
    flex: 1;
}

.player-name {
    font-weight: 600;
    font-size: 1.1rem;
}

.player-stats-mini {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.player-longest-roll {
    text-align: center;
    padding-left: 16px;
    border-left: 1px solid var(--border-color);
}

.roll-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--accent-primary);
    line-height: 1;
}

.roll-label {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.player-details {
    background: rgba(0, 0, 0, 0.1);
    padding: 12px 16px 12px 72px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    border-top: 1px dashed var(--border-color);
}

.detail-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-icon {
    font-size: 1.1rem;
}

.detail-label {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.detail-value {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.leaderboard-info {
    margin-top: 40px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.9rem;
}

/* Tracked Rolls Section */
.tracked-rolls-section {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tracked-rolls-section h3 {
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-lg);
}

.tracked-rolls-section .subtitle {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.tracked-rolls-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.tracked-roll-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tracked-rank {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--accent-primary);
    min-width: 40px;
}

.tracked-info {
    flex: 1;
}

.tracked-shooter {
    font-weight: 600;
    font-size: var(--font-size-base);
    margin-bottom: 2px;
}

.tracked-details {
    display: flex;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.tracked-meta {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.tracked-count {
    text-align: center;
}

.tracked-count .roll-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--accent-secondary);
}

.tracked-count .roll-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Leaderboard Enhancements */
.tracked-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.casino-filter {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
}

.tracked-roll-card {
    cursor: pointer;
    transition: all var(--transition-base);
}

.tracked-roll-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

.tracked-roll-card.expanded {
    background: rgba(255, 255, 255, 0.03);
}

.tracked-roll-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.tracked-shooter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.expand-icon {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-left: 8px;
}

/* Achievement Badges */
.achievement-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.achievement-badge.hot {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: #fff;
}

.achievement-badge.great {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.achievement-badge.god {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    }
}

.achievement-badge.monster {
    background: linear-gradient(135deg, #ffc107, #ff8c00);
    color: #000;
}

.achievement-badge.legendary {
    background: linear-gradient(135deg, #6f42c1, #e91e63);
    color: #fff;
    animation: legendary-glow 1.5s ease-in-out infinite alternate;
}

@keyframes legendary-glow {
    from {
        box-shadow: 0 0 5px rgba(111, 66, 193, 0.5);
    }

    to {
        box-shadow: 0 0 15px rgba(233, 30, 99, 0.8);
    }
}

/* Expanded Details */
.expanded-details {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-row {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.stat-box {
    flex: 1;
    text-align: center;
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.stat-value {
    font-size: 0.9rem;
    font-weight: 600;
}

.roll-sequence {
    margin-top: var(--spacing-sm);
}

.sequence-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.sequence-rolls {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.roll-chip-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--bg-elevated);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.roll-chip-mini.seven-out {
    background: rgba(220, 53, 69, 0.3);
    border-color: #dc3545;
    color: #ff6b7a;
}

.roll-chip-mini.point-hit {
    background: rgba(40, 167, 69, 0.3);
    border-color: #28a745;
    color: #5dd879;
}

.roll-chip-mini.natural {
    background: rgba(78, 205, 196, 0.3);
    border-color: #4ecdc4;
    color: #7eeee6;
}

.roll-chip-mini.craps {
    background: rgba(255, 193, 7, 0.3);
    border-color: #ffc107;
    color: #ffd454;
}

/* Personal Stats Section */
.personal-stats-section {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(78, 205, 196, 0.1) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(78, 205, 196, 0.2);
}

.personal-stats-section h3 {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
}

.personal-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.stat-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-card.highlight {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.2) 0%, rgba(111, 66, 193, 0.2) 100%);
    border-color: rgba(78, 205, 196, 0.3);
}

.stat-icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card.highlight .stat-number {
    color: var(--accent-secondary);
}

.stat-title {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Community Feed Styles */
.community-event.milestone {
    border-left: 3px solid var(--accent-secondary);
}

.community-event.table {
    border-left: 3px solid var(--accent-primary);
}

.event-title {
    font-weight: 600;
    font-size: var(--font-size-base);
    margin-bottom: 4px;
}

.event-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.event-type-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.event-type-badge.table {
    background: rgba(78, 205, 196, 0.15);
    color: var(--accent-secondary);
}

.event-type-badge.milestone {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

/* Casino Ratings & Reviews */
.casino-rating-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 12px 16px;
}

.rating-stars {
    color: #ffc107;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.rating-val {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.rating-count {
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

.reviews-count {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-weight: 400;
}

.review-form-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.review-form-card h5 {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
    margin-bottom: var(--spacing-md);
}

.star-rating-input input {
    display: none;
}

.star-rating-input label {
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-tertiary);
    transition: color 0.2s;
}

.star-rating-input label:hover,
.star-rating-input label:hover~label,
.star-rating-input input:checked~label {
    color: #ffc107;
}

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

.review-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.review-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-avatar {
    font-size: 1.2rem;
}

.review-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.review-meta {
    text-align: right;
}

.review-rating {
    color: #ffc107;
    font-size: 0.75rem;
    margin-bottom: 2px;
}

.review-time {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    display: block;
}

.review-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.no-reviews {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-tertiary);
    font-style: italic;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

/* Ensure content is not hidden behind bottom nav */
.content {
    padding-bottom: 200px !important;
}

/* Help Modal Styles */
.help-modal-content {
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

#help-content-body {
    overflow-y: auto;
    padding-right: var(--spacing-sm);
}

.help-section {
    margin-bottom: var(--spacing-lg);
}

.help-section h3 {
    color: var(--accent-primary);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
}

.help-list {
    list-style: none;
    padding: 0;
}

.help-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.4;
}

.help-list li::before {
    content: '\2022';
    position: absolute;
    left: 4px;
    color: var(--accent-primary);
}

.help-tip {
    background: rgba(78, 205, 196, 0.1);
    border-left: 3px solid var(--accent-secondary);
    padding: var(--spacing-sm);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.9rem;
    margin-top: var(--spacing-md);
    color: var(--text-primary);
}

/* Casino Search Results */
.casino-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    z-index: 99999;
    /* Increased Z-Index */
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    /* Stronger shadow */
}

.casino-result-item {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s;
}

.casino-result-item:last-child {
    border-bottom: none;
}

.casino-result-item:hover {
    background: var(--bg-tertiary);
}

.casino-result-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.casino-result-location {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.no-results {
    padding: 12px;
    text-align: center;
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.9rem;
}

/* Achievement Legend */
.achievement-legend {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin: 20px 0;
    border: 1px solid var(--border-color);
}

.legend-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-requirement {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.achievement-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.achievement-badge.god {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: white;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    animation: pulse 2s ease-in-out infinite;
}

.achievement-badge.legendary {
    background: linear-gradient(135deg, #9333ea, #c026d3);
    color: white;
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3);
}

.achievement-badge.monster {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.achievement-badge.hot {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.achievement-badge.great {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.player-badge {
    margin-top: 4px;
}

.tracked-badge {
    font-size: 0.9rem;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .legend-items {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Avatar Images - Standardize across app */
.player-avatar img,
.user-avatar img,
.feed-avatar img,
.review-avatar img,
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Standard avatar size: 40px (all avatars except profile page) */
.player-avatar,
.user-avatar,
.feed-avatar,
.review-avatar,
.social-result-avatar,
.user-result-avatar,
.blocked-user-item .avatar,
.suggested-user-avatar,
.leaderboard-avatar,
.session-avatar,
.comment-avatar,
.notification-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
}

/* ===================================
   Location Banner
   =================================== */

.location-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 165, 2, 0.15) 100%);
    border: 1px solid rgba(255, 165, 2, 0.3);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.location-banner-icon {
    font-size: var(--font-size-lg);
}

.location-banner-text {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    min-width: 150px;
}

.location-retry-btn {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.location-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.location-retry-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* Manual Location Button */
.location-manual-btn,
.location-change-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--bg-elevated);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.location-manual-btn:hover,
.location-change-btn:hover {
    background: var(--bg-elevated);
    transform: translateY(-2px);
}

/* Success Location Banner */
.location-banner-success {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.15) 0%, rgba(39, 174, 96, 0.15) 100%);
    border: 1px solid rgba(46, 204, 113, 0.3);
}

/* Admin Controls for Leaderboard */
.admin-controls {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.admin-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 16px;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}

.admin-btn:hover {
    background: var(--bg-elevated);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.admin-btn.edit-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

.admin-btn.delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

.admin-btn.ban-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
}

/* Mobile Responsive for Leaderboard */
@media (max-width: 768px) {
    .leaderboard-card {
        flex-wrap: wrap;
        position: relative;
    }

    .admin-controls {
        width: 100%;
        margin-left: 0;
        margin-top: 12px;
        justify-content: flex-end;
        padding-top: 12px;
        border-top: 1px solid var(--bg-elevated);
    }

    .player-details {
        margin-left: 0;
    }

    .admin-btn {
        flex: 1;
        max-width: 80px;
    }
}

/* Trending Section */
.trending-section {
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.trending-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.trending-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.trending-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.trending-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
    /* Firefox */
}

.trending-list::-webkit-scrollbar {
    display: none;
    /* Safari/Chrome */
}

.trending-chip {
    flex: 0 0 auto;
    background: var(--bg-card);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.trending-chip:hover {
    border-color: var(--primary-color);
    background: rgba(255, 126, 95, 0.1);
    transform: translateY(-2px);
}

.trending-fire {
    font-size: 0.9rem;
}

.trending-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.trending-score {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.feed-distance {
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: 500;
    margin-left: 8px;
}

/* Feed Actions */
.feed-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: flex-end;
}

.follow-btn {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.follow-btn:hover {
    background: rgba(255, 126, 95, 0.1);
    transform: scale(1.05);
}

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

.follow-btn.following:hover {
    background: #ff5e3a;
    border-color: #ff5e3a;
}

/* Casino Detail Follow Button */
.casino-follow-btn {
    background: transparent;
    border: 2px solid rgba(255, 126, 95, 0.3);
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    margin-right: 12px;
}

.casino-follow-btn:hover {
    background: rgba(255, 126, 95, 0.1);
    transform: scale(1.05);
}

.casino-follow-btn.following {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.casino-follow-btn.following:hover {
    background: #ff5e3a;
    border-color: #ff5e3a;
}

/* Map View Styles */
.casinos-map-container {
    height: calc(100vh - 220px);
    width: 100%;
    margin-top: 15px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

#casinos-map {
    z-index: 10;
}

.map-popup {
    padding: 5px;
    font-family: inherit;
    color: var(--text-primary);
}

.map-popup strong {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.map-popup span {
    font-size: 0.9rem;
    display: block;
    margin-top: 3px;
}

/* Leaflet Overrides - Enhanced Readability */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background-color: #1a1a1a !important;
    /* Solid dark background */
    color: #ffffff !important;
    border: 2px solid var(--primary-color) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8) !important;
    opacity: 1 !important;
}

/* Light theme override */
[data-theme="light"] .leaflet-popup-content-wrapper,
[data-theme="light"] .leaflet-popup-tip {
    background-color: #ffffff !important;
    /* Solid white background */
    color: #1a1a1a !important;
}

.leaflet-popup-content-wrapper {
    border-radius: var(--radius-md) !important;
    padding: 4px !important;
}

.leaflet-popup-content {
    margin: 12px 16px !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    min-width: 200px !important;
}

.map-popup {
    padding: 8px 0;
    font-family: inherit;
    color: var(--text-primary);
}

.map-popup strong {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
    margin-bottom: 8px;
}

.map-popup span {
    font-size: 1rem;
    display: block;
    margin-top: 6px;
    color: var(--text-primary);
    line-height: 1.5;
}

.map-popup .btn {
    margin-top: 12px;
    width: 100%;
    font-size: 1rem;
    padding: 10px 16px;
}

.leaflet-popup-close-button {
    color: var(--text-primary) !important;
    font-size: 24px !important;
    padding: 4px 8px !important;
}

.leaflet-popup-close-button:hover {
    color: var(--primary-color) !important;
}

.leaflet-container {
    font-family: var(--font-family) !important;
}

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

/* View Toggle Button Pulsing */
#view-toggle-btn i {
    transition: transform 0.3s ease;
}

#view-toggle-btn:hover i {
    transform: scale(1.2);
}

/* Floor Heat Map Styles */
.floor-heat-map {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.heat-map-title {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.heat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.heat-square {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.heat-square:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-sm);
    filter: brightness(1.2);
}

.heat-square.hot {
    background: linear-gradient(135deg, #ff4d4d, #ff1a1a);
    color: white;
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.3);
}

.heat-square.cold {
    background: linear-gradient(135deg, #4da6ff, #1a8cff);
    color: white;
}

.heat-square.choppy {
    background: linear-gradient(135deg, #ffb347, #ff9900);
    color: white;
}

.heat-square.unknown {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

.heat-number {
    pointer-events: none;
}

/* History Screen Styles */
.history-screen {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.history-header h2 {
    margin: 0;
    color: var(--text-primary);
}

.view-mode-toggle {
    display: flex;
    gap: 8px;
    background: var(--bg-elevated);
    padding: 4px;
    border-radius: var(--radius-md);
}

.mode-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

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

.mode-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
}

/* Session List */
.session-list-container {
    width: 100%;
}

.compare-banner {
    background: linear-gradient(135deg, var(--primary-color), #ff9966);
    padding: 12px 20px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: white;
    font-weight: 500;
}

.compare-banner span {
    flex: 1;
}

.session-list {
    display: grid;
    gap: 16px;
}

.session-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.session-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.session-card.selected {
    border-color: var(--primary-color);
    background: rgba(255, 126, 95, 0.1);
}

.session-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.session-date {
    display: flex;
    flex-direction: column;
}

.date-day {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.date-time {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.session-casino {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.session-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.stat-item {
    text-align: center;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-value.gold {
    color: #ffd700;
}

.stat-value.green {
    color: #4ade80;
}

.select-session-btn {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

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

/* Comparison View */
.comparison-container {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.comparison-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    margin-bottom: 32px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
}

.comparison-session {
    text-align: center;
}

.comparison-session h4 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
}

.comparison-label {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.comparison-metrics {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comparison-metric {
    background: var(--bg-elevated);
    padding: 16px;
    border-radius: var(--radius-md);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.metric-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-values .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.metric-values .diff {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
}

.diff.positive {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

.diff.negative {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

.diff.neutral {
    color: var(--text-secondary);
}

/* Trends View */
.trends-container {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.trends-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.trends-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.date-range-selector {
    display: flex;
    gap: 8px;
}

.range-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

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

.range-btn:hover:not(.active) {
    border-color: var(--primary-color);
}

.chart-container {
    height: 300px;
    margin-bottom: 24px;
    position: relative;
}

.trend-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.trend-stat {
    text-align: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
}

.trend-stat .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.trend-stat .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.weekly-challenge {
    border: 1px solid rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.weekly-challenge .challenge-icon {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.weekly-challenge .progress-fill {
    background: var(--accent-gold, #ffd700);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .history-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .session-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .comparison-label {
        transform: rotate(90deg);
    }

    .trend-stats {
        grid-template-columns: 1fr;
    }
}

/* Responsive Grids */
.responsive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .responsive-grid {
        grid-template-columns: 1fr !important;
    }

    .chart-container {
        height: 250px;
    }
}

/* Personal Best Celebration Modal */
.personal-best-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.personal-best-content {
    background: linear-gradient(135deg, var(--card-bg), var(--bg-elevated));
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.5s ease;
    border: 2px solid var(--primary-color);
}

.celebration-header {
    text-align: center;
    margin-bottom: 24px;
}

.celebration-icon {
    font-size: 4rem;
    animation: bounce 1s infinite;
}

.celebration-header h2 {
    margin: 12px 0 0 0;
    color: var(--text-primary);
    font-size: 1.8rem;
}

.celebration-records {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.record-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 126, 95, 0.1);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 126, 95, 0.3);
}

.record-emoji {
    font-size: 2.5rem;
}

.record-details {
    flex: 1;
}

.record-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.record-values {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3rem;
    font-weight: 700;
}

.old-value {
    color: var(--text-secondary);
    text-decoration: line-through;
}

.arrow {
    color: var(--primary-color);
}

.new-value {
    color: #4ade80;
}

#close-celebration {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
}

/* Confetti Animation */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -10px;
    z-index: 10001;
    animation: confettiFall linear forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

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

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes confettiFall {
    to {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Review Card Styles - Fix Display Name and Stars Alignment */
.review-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
}

.review-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.review-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

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

.review-user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-user-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.review-rating {
    display: flex;
    gap: 4px;
    color: #ffc107;
    font-size: 1rem;
}

.review-rating i {
    font-size: 16px;
}

.review-time {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.review-text {
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.no-reviews {
    text-align: center;
    color: var(--text-secondary);
    padding: 32px;
    font-style: italic;
}

.admin-delete-btn.review-delete-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.admin-delete-btn.review-delete-btn:hover {
    opacity: 1;
}

/* Table Deletion Styles */
.table-card.pending-deletion {
    opacity: 0.7;
    background: rgba(40, 0, 0, 0.2);
    border: 1px dashed rgba(255, 0, 0, 0.3);
    pointer-events: none;
    /* Only buttons remain clickable via stopPropagation */
}

.table-card.pending-deletion button,
.table-card.pending-deletion .cancel-deletion-btn {
    pointer-events: auto;
}

.pending-deletion-badge {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    margin-right: 8px;
}

.cancel-deletion-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border: none;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cancel-deletion-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.section-title-with-action {
    display: flex;
    align-items: center;
    gap: 12px;
}

.add-table-inline-btn {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.add-table-inline-btn:hover {
    background: rgba(76, 175, 80, 0.2);
    transform: scale(1.05);
}

/* Admin Deletion Request Styles */
.report-type-badge.deletion {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
}

.btn-sm {
    padding: 4px 12px;
    font-size: 0.85rem;
}

/* Session Export Styles */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.session-card-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.copy-session-btn {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.2rem;
}

.copy-session-btn:hover {
    background: var(--bg-elevated);
    transform: scale(1.1);
    color: var(--accent-primary);
}

/* Achievement Notification Styles */
.achievement-notification {
    position: fixed;
    top: 80px;
    right: -400px;
    width: 350px;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%);
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: right 0.3s ease;
    z-index: 10000;
}

.achievement-notification.show {
    right: 20px;
}

.achievement-icon {
    font-size: 3rem;
    flex-shrink: 0;
}

.achievement-content {
    flex: 1;
}

.achievement-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-primary);
    font-weight: 700;
    margin-bottom: 4px;
}

.achievement-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.achievement-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .achievement-notification {
        width: calc(100% - 40px);
        right: -100%;
    }

    .achievement-notification.show {
        right: 20px;
    }
}


/* Avatar Image Styling for All Screens */
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Profile Screen Mobile Optimization */
@media (max-width: 768px) {
    .profile-screen {
        padding: var(--spacing-md);
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--spacing-lg);
    }

    .profile-avatar-container {
        margin: 0 auto var(--spacing-md);
    }

    .profile-info {
        width: 100%;
    }

    .profile-actions {
        width: 100%;
        flex-direction: row;
        gap: var(--spacing-sm);
    }

    .profile-actions button {
        flex: 1;
        font-size: 0.9rem;
        padding: var(--spacing-sm);
    }

    .profile-section {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        overflow-x: hidden;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .stat-card {
        padding: var(--spacing-md);
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .achievements-grid-compact {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }

    .achievement-badge-compact {
        font-size: 0.9rem;
    }

    .badge-icon {
        font-size: 2rem;
    }

    .profile-session-card {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--spacing-sm);
    }

    .session-date {
        min-width: auto;
        margin-bottom: 4px;
    }

    .section-title {
        font-size: 1.1rem;
    }
}

/* Profile Screen Styles */
.profile-screen {
    padding: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.profile-header {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.profile-avatar-large {
    font-size: 3rem;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    max-width: 120px;
    max-height: 120px;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    overflow: hidden;
}

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

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-sm);
    color: var(--text-primary);
}

.profile-location {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.profile-bio {
    color: var(--text-primary);
    margin: var(--spacing-md) 0;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.profile-joined {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.profile-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-direction: column;
}

.profile-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-lg);
    color: var(--text-primary);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
}

.stat-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card.full-width {
    grid-column: 1 / -1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Achievements Grid Compact */
.achievements-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.achievement-badge-compact {
    aspect-ratio: 1;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.achievement-badge-compact.unlocked {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(255, 126, 95, 0.1) 100%);
}

.achievement-badge-compact.locked {
    opacity: 0.4;
    filter: grayscale(100%);
}

.achievement-badge-compact:hover {
    transform: scale(1.05);
}

.badge-icon {
    font-size: 2.5rem;
}

.badge-lock {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 1rem;
}

/* Profile Sessions */
.profile-session-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.profile-session-card:hover {
    background: var(--bg-elevated);
    transform: translateX(4px);
}

.session-date {
    font-weight: 700;
    color: var(--accent-primary);
    min-width: 60px;
}

.session-info {
    flex: 1;
}

.session-casino {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.session-stats {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-avatar-large {
        margin: 0 auto;
    }

    .profile-actions {
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .achievements-grid-compact {
        grid-template-columns: repeat(4, 1fr);
    }

    .profile-name {
        font-size: 1.5rem;
    }
}

/* Profile Screen Styles */
.profile-screen {
    padding: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.profile-header {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.profile-avatar-large {
    font-size: 3rem;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    max-width: 120px;
    max-height: 120px;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    overflow: hidden;
}

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

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-sm);
    color: var(--text-primary);
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.meta-separator {
    color: var(--text-secondary);
    opacity: 0.5;
}

.profile-location {
    color: var(--text-secondary);
}

.profile-bio {
    color: var(--text-primary);
    margin: var(--spacing-md) 0;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.profile-joined {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.profile-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-direction: column;
}

.profile-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-lg);
    color: var(--text-primary);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
}

.stat-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card.full-width {
    grid-column: 1 / -1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Achievements Grid Compact */
.achievements-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.achievement-badge-compact {
    aspect-ratio: 1;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.achievement-badge-compact.unlocked {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(255, 126, 95, 0.1) 100%);
}

.achievement-badge-compact.locked {
    opacity: 0.4;
    filter: grayscale(100%);
}

.achievement-badge-compact:hover {
    transform: scale(1.05);
}

.badge-icon {
    font-size: 2.5rem;
}

.badge-lock {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 1rem;
}

/* Profile Sessions */
.profile-session-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.profile-session-card:hover {
    background: var(--bg-elevated);
    transform: translateX(4px);
}

.session-date {
    font-weight: 700;
    color: var(--accent-primary);
    min-width: 60px;
}

.session-info {
    flex: 1;
}

.session-casino {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.session-stats {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-avatar-large {
        margin: 0 auto;
    }

    .profile-actions {
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .achievements-grid-compact {
        grid-template-columns: repeat(4, 1fr);
    }

    .profile-name {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.1rem;
    }

    /* Profile Info Mobile Optimizations */
    .profile-info {
        padding: 0;
        width: 100%;
    }

    .profile-name {
        font-size: 1.5rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .profile-location,
    .profile-strategy {
        font-size: 0.9rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .profile-bio {
        font-size: 0.95rem;
        padding: 0;
        margin: var(--spacing-sm) 0;
    }

    .profile-joined {
        font-size: 0.85rem;
    }
}

/* Profile Screen Styles */
.profile-screen {
    padding: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.profile-header {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.profile-avatar-large {
    font-size: 3rem;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    max-width: 120px;
    max-height: 120px;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    overflow: hidden;
}

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

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-sm);
    color: var(--text-primary);
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.meta-separator {
    color: var(--text-secondary);
    opacity: 0.5;
}

.profile-location {
    color: var(--text-secondary);
}

.profile-bio {
    color: var(--text-primary);
    margin: var(--spacing-md) 0;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.profile-joined {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.profile-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-direction: column;
}

.profile-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-lg);
    color: var(--text-primary);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
}

.stat-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card.full-width {
    grid-column: 1 / -1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Achievements Grid Compact */
.achievements-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.achievement-badge-compact {
    aspect-ratio: 1;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.achievement-badge-compact.unlocked {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(255, 126, 95, 0.1) 100%);
}

.achievement-badge-compact.locked {
    opacity: 0.4;
    filter: grayscale(100%);
}

.achievement-badge-compact:hover {
    transform: scale(1.05);
}

.badge-icon {
    font-size: 2.5rem;
}

.badge-lock {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 1rem;
}

/* Profile Sessions */
.profile-session-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.profile-session-card:hover {
    background: var(--bg-elevated);
    transform: translateX(4px);
}

.session-date {
    font-weight: 700;
    color: var(--accent-primary);
    min-width: 60px;
}

.session-info {
    flex: 1;
}

.session-casino {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.session-stats {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Change Avatar Button */
.change-avatar-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: 3px solid white;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10;
    padding: 0;
}

.change-avatar-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
}

.change-avatar-btn:active {
    transform: scale(1.05);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-avatar-large {
        margin: 0 auto;
    }

    .profile-actions {
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .achievements-grid-compact {
        grid-template-columns: repeat(4, 1fr);
    }

    .profile-name {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.1rem;
    }

    /* Profile Info Mobile Optimizations */
    .profile-info {
        padding: 0;
        width: 100%;
    }

    .profile-name {
        font-size: 1.5rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .profile-location,
    .profile-strategy {
        font-size: 0.9rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .profile-bio {
        font-size: 0.95rem;
        padding: 0;
        margin: var(--spacing-sm) 0;
    }

    .profile-joined {
        font-size: 0.85rem;
    }
}

/* Profile Screen Styles */
.profile-screen {
    padding: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.profile-header {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.profile-avatar-large {
    font-size: 3rem;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    max-width: 120px;
    max-height: 120px;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    overflow: hidden;
}

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

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-sm);
    color: var(--text-primary);
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.meta-separator {
    color: var(--text-secondary);
    opacity: 0.5;
}

.profile-location {
    color: var(--text-secondary);
}

.profile-bio {
    display: block;
    width: 100%;
    color: var(--text-primary);
    margin: var(--spacing-md) 0;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    clear: both;
}

.profile-joined {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.profile-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-direction: column;
}

.profile-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-lg);
    color: var(--text-primary);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
}

.stat-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card.full-width {
    grid-column: 1 / -1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Achievements Grid Compact */
.achievements-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.achievement-badge-compact {
    aspect-ratio: 1;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.achievement-badge-compact.unlocked {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(255, 126, 95, 0.1) 100%);
}

.achievement-badge-compact.locked {
    opacity: 0.4;
    filter: grayscale(100%);
}

.achievement-badge-compact:hover {
    transform: scale(1.05);
}

.badge-icon {
    font-size: 2.5rem;
}

.badge-lock {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 1rem;
}

/* Profile Sessions */
.profile-session-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.profile-session-card:hover {
    background: var(--bg-elevated);
    transform: translateX(4px);
}

.session-date {
    font-weight: 700;
    color: var(--accent-primary);
    min-width: 60px;
}

.session-info {
    flex: 1;
}

.session-casino {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.session-stats {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* User Search Styles */
.user-search-results {
    margin-top: 10px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--bg-elevated);
}

.user-search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background var(--transition-base);
}

.user-search-result-item:last-child {
    border-bottom: none;
}

.user-search-result-item:hover {
    background: var(--bg-elevated);
}

.user-result-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    font-size: 1.5rem;
}

.user-result-info {
    flex: 1;
    cursor: pointer;
}

.user-result-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.user-result-location {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.user-result-bio {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#user-search-input {
    width: 100%;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 2px solid var(--bg-elevated);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all var(--transition-base);
}

#user-search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
}

/* Change Avatar Button */
.change-avatar-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: 3px solid white;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10;
    padding: 0;
}

.change-avatar-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
}

.change-avatar-btn:active {
    transform: scale(1.05);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-avatar-large {
        margin: 0 auto;
    }

    .profile-actions {
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .achievements-grid-compact {
        grid-template-columns: repeat(4, 1fr);
    }

    .profile-name {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.1rem;
    }

    /* Profile Info Mobile Optimizations */
    .profile-info {
        padding: 0;
        width: 100%;
    }

    .profile-name {
        font-size: 1.5rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .profile-location,
    .profile-strategy {
        font-size: 0.9rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .profile-bio {
        font-size: 0.95rem;
        padding: 0;
        margin: var(--spacing-sm) 0;
    }

    .profile-joined {
        font-size: 0.85rem;
    }
}

/* Profile Screen Styles */
.profile-screen {
    padding: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.profile-header {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.profile-avatar-large {
    font-size: 3rem;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    max-width: 120px;
    max-height: 120px;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 50%;
    overflow: hidden;
}

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

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-sm);
    color: var(--text-primary);
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.meta-separator {
    color: var(--text-secondary);
    opacity: 0.5;
}

.profile-location {
    color: var(--text-secondary);
}

.profile-bio {
    display: block;
    width: 100%;
    color: var(--text-primary);
    margin: var(--spacing-md) 0;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    clear: both;
}

.profile-joined {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.profile-bio-section {
    color: var(--text-primary);
    line-height: 1.6;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.profile-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-direction: column;
}

.profile-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-lg);
    color: var(--text-primary);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
}

.stat-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card.full-width {
    grid-column: 1 / -1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Achievements Grid Compact */
.achievements-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.achievement-badge-compact {
    aspect-ratio: 1;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.achievement-badge-compact.unlocked {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(255, 126, 95, 0.1) 100%);
}

.achievement-badge-compact.locked {
    opacity: 0.4;
    filter: grayscale(100%);
}

.achievement-badge-compact:hover {
    transform: scale(1.05);
}

.badge-icon {
    font-size: 2.5rem;
}

.badge-lock {
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 1rem;
}

/* Profile Sessions */
.profile-session-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.profile-session-card:hover {
    background: var(--bg-elevated);
    transform: translateX(4px);
}

.session-date {
    font-weight: 700;
    color: var(--accent-primary);
    min-width: 60px;
}

.session-info {
    flex: 1;
}

.session-casino {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.session-stats {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Change Avatar Button */
.change-avatar-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: 3px solid white;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10;
    padding: 0;
}

.change-avatar-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
}

.change-avatar-btn:active {
    transform: scale(1.05);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-avatar-large {
        margin: 0 auto;
    }

    .profile-actions {
        width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .achievements-grid-compact {
        grid-template-columns: repeat(4, 1fr);
    }

    .profile-name {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.1rem;
    }

    /* Profile Info Mobile Optimizations */
    .profile-info {
        padding: 0;
        width: 100%;
    }

    .profile-name {
        font-size: 1.5rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .profile-location,
    .profile-strategy {
        font-size: 0.9rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .profile-bio {
        font-size: 0.95rem;
        padding: 0;
        margin: var(--spacing-sm) 0;
    }

    .profile-joined {
        font-size: 0.85rem;
    }
}

/* Advanced Filters Styles */
.favorites-filter-btn.active {
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    background: var(--bg-secondary) !important;
}

.checkbox-group label {
    transition: all var(--transition-base);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    cursor: pointer;
}

.checkbox-group label:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-primary);
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

#advanced-filters-modal .modal-content {
    max-width: 500px;
}

#advanced-filters-modal .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===================================
   Admin Panel Styling
   =================================== */

.admin-screen {
    padding: var(--spacing-lg) var(--spacing-md);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.admin-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.admin-header h1 {
    font-size: 2rem;
    margin-bottom: var(--spacing-xs);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.admin-header p {
    color: var(--text-secondary);
}

/* Admin Tabs */
.admin-tabs {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.admin-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.admin-tab:hover {
    background: var(--bg-elevated);
    transform: translateY(-2px);
    color: var(--text-primary);
}

.admin-tab.active {
    background: var(--gradient-primary);
    color: white;
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.admin-panel {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: var(--spacing-lg);
    animation: fadeIn 0.3s ease;
}

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

.panel-header h2 {
    font-size: 1.4rem;
    color: var(--text-primary);
}

/* Admin Stats Dashboard */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--border-color);
    transition: transform var(--transition-base);
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-primary);
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 4px;
    line-height: 1;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Casino Management List */
.casino-list-admin {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.list-header {
    margin-bottom: var(--spacing-md);
}

.search-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color var(--transition-base);
}

.search-input:focus {
    border-color: var(--accent-primary);
    outline: none;
}

.casino-items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 600px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Custom scrollbar for casino list */
.casino-items::-webkit-scrollbar {
    width: 6px;
}

.casino-items::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.casino-item-admin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: background var(--transition-base);
}

.casino-item-admin:hover {
    background: var(--bg-elevated);
}

.casino-info {
    flex: 1;
}

.casino-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.casino-location {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.casino-meta {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.badge-custom {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.casino-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 1.1rem;
}

.btn-icon:hover {
    transform: scale(1.1);
    background: var(--bg-elevated);
}

.btn-tables:hover {
    border-color: #3498db;
    color: #3498db;
}

.btn-edit:hover {
    border-color: #f1c40f;
    color: #f1c40f;
}

.btn-delete:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

/* Submission & Report Cards */
.moderation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.submission-card,
.report-card,
.deletion-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-header {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-status {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.status-pending {
    background: rgba(243, 156, 18, 0.2);
    color: #f39c12;
}

.status-approved {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.status-rejected {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.card-content {
    padding: 16px;
    flex: 1;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.info-label {
    color: var(--text-tertiary);
}

.info-value {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}

.reason-box {
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: var(--radius-sm);
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-left: 3px solid var(--accent-primary);
}

.moderation-actions {
    padding: 12px 16px;
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--border-color);
}

.btn-approve,
.btn-reject {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-approve {
    background: #2ecc71;
    color: white;
}

.btn-reject {
    background: #e74c3c;
    color: white;
}

.btn-approve:hover,
.btn-reject:hover {
    opacity: 0.9;
}

.btn-dismiss {
    width: 100%;
    padding: 8px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

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

/* Modals for Admin */
#admin-add-casino-modal .modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

#table-management-modal .table-item {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

#table-management-modal .table-info {
    color: var(--text-primary);
}

#table-management-modal .table-meta {
    color: var(--text-secondary) !important;
}

@media (max-width: 768px) {
    .admin-stats {
        grid-template-columns: 1fr;
    }

    .casino-item-admin {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .casino-actions {
        width: 100%;
        justify-content: flex-end;
        border-top: 1px solid var(--border-color);
        padding-top: 12px;
    }

    .moderation-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Casino Check-In Styles
   ========================================== */

.check-in-container {
    margin: 10px 0 15px 0;
    width: 100%;
}

.check-in-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* State: Not Checked In (Default) */
.check-in-btn.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
}

/* State: Checked In (Active) */
.check-in-btn.active {
    background: var(--bg-card);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    box-shadow: none;
}

/* State: Checking In... (Loading) */
.check-in-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* "Who's Here" Section */
.whos-here-section {
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.whos-here-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.whos-here-count {
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.whos-here-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 5px;
    /* Space for scrollbar */
    scrollbar-width: thin;
    /* Firefox */
}

.whos-here-list::-webkit-scrollbar {
    height: 4px;
}

.whos-here-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.whos-here-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    cursor: pointer;
    text-align: center;
}

.whos-here-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 6px;
    border: 2px solid transparent;
    transition: all 0.2s;
    overflow: hidden;
}

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

.whos-here-item.me .whos-here-avatar {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3);
}

.whos-here-name {
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.whos-here-time {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.whos-here-empty {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 10px;
    width: 100%;
    font-style: italic;
}

/* ==========================================
   Quick Filter Presets
   ========================================== */

.quick-filters-bar {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 8px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

/* Scrollbar hiding removed as we now wrap */

.filter-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    color: var(--text-secondary);
}

.filter-chip:hover {
    background: var(--bg-elevated);
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

.filter-chip.active {
    background: rgba(118, 75, 162, 0.15);
    /* Primary tint */
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    font-weight: 500;
}

.filter-chip.custom {
    border-style: dashed;
}

.delete-preset {
    font-size: 0.8em;
    opacity: 0.6;
    margin-left: 4px;
    padding: 2px;
    border-radius: 50%;
    transition: all 0.2s;
}

.delete-preset:hover {
    opacity: 1;
    background: rgba(231, 76, 60, 0.2);
    color: var(--danger);
}

.save-preset-container {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.save-preset-container label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 5px;
    display: block;
}

.save-preset-form {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.save-preset-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.save-preset-input:focus {
    border-color: var(--accent-primary);
    outline: none;
}

/* ==========================================
   Admin Dashboard Styling
   ========================================== */

/* Admin Screen Layout */
.admin-screen {
    padding: 20px;
    padding-bottom: 80px;
    /* Space for bottom nav if visible */
    max-width: 1200px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease;
}

.admin-header {
    margin-bottom: 25px;
    text-align: center;
}

.admin-header h1 {
    font-size: 1.8rem;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.admin-header p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Tabs Navigation */
.admin-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
}

.admin-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    min-width: 100px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-tab span:first-child {
    font-size: 1.5rem;
}

.admin-tab span:last-child {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.admin-tab:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
}

.admin-tab.active {
    background: rgba(118, 75, 162, 0.15);
    /* Primary tint */
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dashboard Stats */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.stat-card {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Panels & Lists */
.admin-panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.panel-header h2 {
    font-size: 1.2rem;
    margin: 0;
}

/* Casino List Items */
.casino-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

.casino-item-admin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: transform 0.2s;
}

.casino-item-admin:hover {
    transform: translateX(4px);
    border-color: var(--text-tertiary);
}

.casino-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.casino-location {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.casino-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.badge-custom {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

/* Buttons in Lists */
.casino-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--bg-elevated);
    transform: scale(1.1);
}

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

.btn-edit:hover {
    border-color: #f1c40f;
    color: #f1c40f;
}

.btn-delete:hover {
    border-color: #e74c3c;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

/* Submission Cards */
.submission-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 15px;
    margin-bottom: 15px;
    border-left: 4px solid var(--primary-color);
}

.submission-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.submission-title {
    font-weight: 700;
    color: var(--text-primary);
}

.submission-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.submission-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 0.9rem;
    margin-bottom: 15px;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
}

.detail-label {
    color: var(--text-muted);
}

.detail-val {
    color: var(--text-primary);
    font-weight: 500;
}

.submission-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-approve {
    background: #2ecc71;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
}

.btn-reject {
    background: transparent;
    border: 1px solid #e74c3c;
    color: #e74c3c;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
}

.btn-approve:hover {
    background: #27ae60;
    transform: translateY(-2px);
}

.btn-reject:hover {
    background: rgba(231, 76, 60, 0.1);
}

/* Report Cards */
.report-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 15px;
    margin-bottom: 15px;
}

.report-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.report-badge {
    background: #e74c3c;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}

.report-item-name {
    font-weight: 600;
    color: var(--text-primary);
}

.report-reason {
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 2px solid var(--border-color);
}

/* Responsive */
@media (max-width: 600px) {
    .admin-stats {
        grid-template-columns: 1fr;
    }

    .casino-item-admin {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .casino-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .admin-tab {
        min-width: 80px;
        padding: 10px;
    }

    .admin-tab span:first-child {
        font-size: 1.2rem;
    }

    .admin-tab span:last-child {
        font-size: 0.75rem;
    }
}

/* Advanced Analytics Styles */
.analytics-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: 0.9rem;
}

.analytics-table th {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.analytics-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.analytics-table tr:last-child td {
    border-bottom: none;
}

.analytics-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.small-chart {
    height: 180px !important;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .analytics-row {
        grid-template-columns: 1fr !important;
    }
}

/* Bankroll Safety Alerts */
.pl-input.warning {
    color: #FFD933 !important;
    border-color: #FF8D33 !important;
    box-shadow: 0 0 10px rgba(255, 141, 51, 0.3);
}

.pl-input.critical {
    color: #FF6B6B !important;
    border-color: #FF4B4B !important;
    animation: pulse-danger 2s infinite !important;
}

@keyframes pulse-danger {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
    }
}

/* Live Shoutouts */
#shoutout-overlay-container {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    z-index: 9999;
    pointer-events: none;
}

.shoutout-toast {
    background: rgba(30, 30, 40, 0.95);
    border: 1px solid var(--accent-color, #7000ff);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 15px rgba(112, 0, 255, 0.2);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    animation: shoutout-slide-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    position: relative;
    pointer-events: auto;
}

@keyframes shoutout-slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }

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

.shoutout-toast.fade-out {
    animation: shoutout-fade-out 0.5s forwards;
}

@keyframes shoutout-fade-out {
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

.shoutout-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shoutout-sender {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.shoutout-avatar {
    font-size: 24px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent-color, #7000ff);
}

.shoutout-name {
    font-size: 10px;
    color: var(--text-muted, #aaa);
    margin-top: 4px;
    text-align: center;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shoutout-message {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    flex: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.shoutout-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent-color, #7000ff);
    width: 100%;
    animation: shoutout-timer 5s linear forwards;
}

@keyframes shoutout-timer {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* Home Feed Active Pulse */
.active-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #4cd964;
    border-radius: 50%;
    margin-left: 6px;
    box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7);
    animation: active-pulse 1.5s infinite;
}

@keyframes active-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(76, 217, 100, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(76, 217, 100, 0);
    }
}

/* Shoutout Button */
.shoutout-btn {
    background: rgba(112, 0, 255, 0.15) !important;
    border: 1px solid rgba(112, 0, 255, 0.3) !important;
    color: #b37dff !important;
    transition: all 0.2s ease;
}

.shoutout-btn:hover {
    background: rgba(112, 0, 255, 0.25) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(112, 0, 255, 0.2);
}

/* Shoutout Menu */
.shoutout-menu {
    padding: 8px;
}

.shoutout-menu-header {
    text-align: center;
    margin-bottom: 20px;
}

.shoutout-menu-header h3 {
    margin: 0;
    color: var(--accent-color, #7000ff);
}

.shoutout-menu-header p {
    margin: 4px 0 0;
    color: var(--text-muted, #aaa);
    font-size: 0.9rem;
}

.shoutout-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.shoutout-option {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.shoutout-option:hover {
    background: rgba(112, 0, 255, 0.1);
    border-color: var(--accent-color, #7000ff);
    transform: translateY(-2px);
}

.shoutout-option .opt-icon {
    font-size: 1.5rem;
}

.shoutout-option .opt-text {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

/* --- Live Now Indicator --- */
.active-pulse {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #4ade80;
    /* Vibrant Green */
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
    box-shadow: 0 0 0 rgba(74, 222, 128, 0.4);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

/* --- Premium Transitions --- */
.screen-fade-out {
    opacity: 0 !important;
    transform: translateY(10px);
    pointer-events: none;
}

.screen-fade-in {
    animation: screenFadeIn 0.3s ease forwards;
}

@keyframes screenFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

#main-app {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Advanced Tracking Features Style Enhancements */
.theoretical-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: transparent;
    border-left: 2px dashed var(--accent-tertiary);
    z-index: 2;
    opacity: 0.4;
}

.theoretical-marker:after {
    content: '';
    position: absolute;
    top: -4px;
    left: -2px;
    width: 6px;
    height: 6px;
    background: transparent;
    border-left: 2px dashed var(--accent-tertiary);
    border-radius: 50%;
}

.pl-sparkline-wrapper {
    width: 100%;
    height: 24px;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.next-roll-odds {
    margin-top: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-secondary);
}

.odds-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 8px;
    font-weight: 600;
}

.odds-bar-container {
    height: 16px;
    display: flex;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.odds-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: bold;
    color: white;
    transition: width var(--transition-base);
}

.odds-segment.hit {
    background: var(--accent-secondary);
}

.odds-segment.seven {
    background: var(--danger);
}

.odds-tip {
    font-size: 0.7rem;
    margin-top: 6px;
    color: var(--text-tertiary);
}

/* Detailed Analytics Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.detailed-analytics-modal {
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 90%;
    max-width: 500px;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

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

.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.analytics-header h2 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0;
}

.analytics-header button {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.metric-card.highlight {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(78, 205, 196, 0.02) 100%);
    border: 1px solid rgba(78, 205, 196, 0.2);
    padding: 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-card.highlight .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.metric-card.highlight .value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-primary);
}

.analytics-section h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-tertiary);
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.hardway-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.hardway-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hw-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.hw-bar-container {
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.hw-bar {
    height: 100%;
    background: var(--accent-secondary);
    border-radius: 3px;
}

.hw-value {
    font-size: 0.9rem;
    font-weight: 700;
    text-align: right;
    color: var(--text-primary);
}

.dist-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dist-label {
    width: 140px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.dist-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.dist-fill {
    height: 100%;
    border-radius: 4px;
}

.dist-fill.inside {
    background: #4ECDC4;
}

.dist-fill.outside {
    background: #FF6B6B;
}

.dist-fill.field {
    background: #FFD93D;
}

.dist-val {
    width: 40px;
    text-align: right;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Copyright Footer */
.copyright-footer {
    text-align: center;
    padding: var(--spacing-md);
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xl);
}

/* History Screen Controls */
.history-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 5px;
}

.history-controls .btn,
.history-controls .mode-btn {
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
}

.history-controls .mode-btn {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--bg-elevated);
}

.history-controls .mode-btn.active {
    background: var(--bg-elevated);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(78, 205, 196, 0.2);
}

/* Ensure icons in buttons are spaced */
.history-controls .mode-btn i,
.history-controls .btn i {
    margin-right: 5px;
}

/* Copyright Footer */
.copyright-footer {
    text-align: center;
    padding: var(--spacing-md);
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xl);
}

/* ==========================================
   HOT TABLE LIVE MAP OVERLAY
   ========================================== */

@keyframes hot-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
        transform: scale(1.1);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
        transform: scale(1);
    }
}

.hot-marker-icon {
    background: #ef4444;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: bold;
    animation: hot-pulse 2s infinite;
}

.playing-now-badge {
    background: linear-gradient(135deg, #ef4444, #f59e0b);
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.playing-now-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: live-blink 1.5s infinite;
}

@keyframes live-blink {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

.map-hot-popup .leaflet-popup-content-wrapper {
    border-left: 4px solid #ef4444;
}

.map-hot-popup strong {
    color: #ef4444;
}

/* ==========================================
   VISUAL DICE SET GUIDE
   ========================================== */

.dice-set-selector-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.guide-btn {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s;
}

.guide-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.dice-set-guide-modal {
    background: var(--bg-primary);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 20px 0;
}

.guide-item {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.guide-item:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
}

.guide-item.active {
    border-color: var(--accent-primary);
    background: rgba(78, 205, 196, 0.1);
}

.guide-name {
    font-weight: bold;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.guide-visual {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.dice-set-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.set-label {
    font-size: 0.6rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-weight: bold;
}

.set-faces {
    display: flex;
    gap: 4px;
}

.mini-die {
    width: 24px;
    height: 24px;
    background: #dc3545;
    border-radius: 3px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    padding: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.mini-pip {
    width: 4px;
    height: 4px;
    background: transparent;
    border-radius: 50%;
    margin: auto;
}


.mini-pip.active {
    background: white;
}

.guide-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 10px;
}

/* Dice Set Guide Modal Improvements */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dice-set-guide-modal {
    background: #1a1a2e;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.dice-set-guide-modal .modal-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
}

.dice-set-guide-modal .modal-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--accent-primary);
}

.dice-set-guide-modal .modal-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.dice-set-guide-modal .guide-grid {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
}

.guide-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.guide-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    border-color: var(--accent-primary);
}

.guide-item.active {
    background: rgba(78, 205, 196, 0.1);
    border-color: var(--accent-primary);
    box-shadow: 0 0 15px rgba(78, 205, 196, 0.2);
}

.guide-name {
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.guide-visual {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dice-set-view {
    display: flex;
    flex-direction: column;
    font-size: 0.6rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.set-faces {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 2px;
}

.mini-die {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
    gap: 1px;
    padding: 2px;
    background: white;
    border-radius: 2px;
}

.mini-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
}

.mini-pip.active {
    background: black;
}

.guide-hint-footer {
    padding: 15px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
}