/* =============================================
   CLEAN DARK PROFESSIONAL THEME
   ============================================= */

/* CSS Variables for consistent theming */
:root {
    /* Background colors - refined dark palette */
    --bg-primary: #0f0f12;
    --bg-secondary: #16161a;
    --bg-tertiary: #1e1e24;
    --bg-card: #1a1a20;
    --bg-hover: #252530;
    --bg-elevated: #1c1c22;

    /* Borders - softer, more subtle */
    --border-color: #2a2a35;
    --border-light: #3a3a48;
    --border-subtle: #222230;

    /* Text - improved hierarchy */
    --text-primary: #f4f4f5;
    --text-secondary: #94949f;
    --text-muted: #5c5c6a;

    /* Accent colors - refined palette */
    --accent-primary: #6366f1;
    --accent-hover: #4f46e5;
    --accent-glow: rgba(99, 102, 241, 0.15);
    --accent-success: #10b981;
    --accent-success-glow: rgba(16, 185, 129, 0.15);
    --accent-warning: #f59e0b;
    --accent-warning-glow: rgba(245, 158, 11, 0.15);
    --accent-danger: #ef4444;
    --accent-danger-glow: rgba(239, 68, 68, 0.15);

    /* Shadows - layered depth */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.35), 0 5px 10px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.4), 0 10px 20px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 20px var(--accent-glow);

    /* Border radius - consistent rounding */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Glassmorphism */
    --glass-bg: rgba(22, 22, 26, 0.8);
    --glass-border: rgba(255, 255, 255, 0.05);
}

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

html {
    height: auto;
    overflow-y: auto;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--bg-primary);
    min-height: 100vh;
    color: var(--text-primary);
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 1.6;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Prevent text overflow in all containers */
h1, h2, h3, h4, h5, h6, p, span, label, button {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Custom Scrollbar - Sleek dark theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 4px;
    transition: background var(--transition-base);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-primary);
}

/* Selection styling */
::selection {
    background: var(--accent-primary);
    color: white;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(12px, 4vw, 24px);
    width: 100%;
    box-sizing: border-box;
}

/* Focus states for accessibility */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Header */
header {
    text-align: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 24px;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

header h1 {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
    letter-spacing: 0.15em;
}

header h1.logo-link {
    cursor: pointer;
    transition: color 0.2s;
}

header h1.logo-link:hover {
    color: var(--accent-primary);
}

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

.header-btn {
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    border: none;
}

.header-btn.signin-btn {
    background: var(--accent-primary);
    color: white;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.header-btn.signin-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.header-btn.signout-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.header-btn.signout-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 8px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.subtitle .current-system-name {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Error Toast */
.error-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: #dc3545;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-width: 90%;
    text-align: center;
}

.error-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Screen Management */
.screen {
    display: none;
}

.screen.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
    85% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

/* Menu */
.menu-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.menu-card h2 {
    text-align: left;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-buttons {
    display: grid;
    gap: 12px;
}

/* Main menu grid */
.main-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 2vw, 12px);
}

.main-menu-grid .menu-btn {
    text-align: center;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: clamp(14px, 3vw, 20px);
}

.main-menu-grid .menu-btn .icon {
    font-size: clamp(1.5rem, 5vw, 2rem);
    grid-row: 1;
    margin-bottom: 6px;
}

.main-menu-grid .menu-btn .label {
    font-size: clamp(0.8rem, 2.5vw, 0.95rem);
    grid-row: 2;
}

.main-menu-grid .menu-btn .desc {
    font-size: clamp(0.6rem, 1.8vw, 0.7rem);
    grid-row: 3;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .main-menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 360px) {
    .main-menu-grid {
        grid-template-columns: 1fr;
    }
}

.menu-btn {
    display: grid;
    grid-template-columns: clamp(36px, 8vw, 44px) 1fr;
    grid-template-rows: auto auto;
    gap: clamp(2px, 0.5vw, 4px) clamp(8px, 2vw, 14px);
    align-items: center;
    padding: clamp(12px, 3vw, 16px) clamp(12px, 3vw, 18px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: left;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}


.menu-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

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

.menu-btn .icon {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    grid-row: span 2;
    opacity: 0.85;
    transition: transform var(--transition-base);
}

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

.menu-btn .label {
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.menu-btn .desc {
    font-size: clamp(0.7rem, 2vw, 0.8rem);
    color: var(--text-muted);
    line-height: 1.4;
}

/* Remove colorful backgrounds - use consistent dark background */
.tutorial-btn, .practice-btn, .running-btn, .speed-btn, .flash-btn, .versus-btn,
.bankroll-btn, .settings-btn, .friends-btn, .stats-btn, .ev-calc-btn, .ror-calc-btn,
.deviation-btn, .calc-btn {
    background: var(--bg-secondary);
}

/* Sub-menu screens */
.sub-menu {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

.sub-menu h2 {
    text-align: center;
    margin-bottom: 24px;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.sub-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sub-menu-buttons .menu-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.sub-menu-buttons .menu-btn:hover {
    background: var(--bg-hover);
}

/* Settings Screen */
.settings-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setting-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.setting-group label {
    font-size: 1rem;
    color: var(--text-primary);
}

.toggle-btn {
    padding: 8px 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.settings-link-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.settings-link-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.setting-group select {
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
}

/* Quick Reference */
.quick-ref {
    margin-top: 20px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--border-color);
}

.quick-ref h3 {
    text-align: left;
    margin-bottom: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ref-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.ref-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.ref-item .cards {
    font-size: 0.95rem;
    letter-spacing: 2px;
    margin-bottom: 6px;
    color: var(--text-secondary);
}

.ref-item .value {
    font-size: 1.25rem;
    font-weight: 600;
}

.ref-item.positive .value { color: var(--accent-success); }
.ref-item.neutral .value { color: var(--accent-warning); }
.ref-item.negative .value { color: var(--accent-danger); }

/* Blackjack Table - Classic Green Felt Style */
.blackjack-table {
    background: #1a5c32;
    border: clamp(6px, 1.5vw, 12px) solid #3d2314;
    border-radius: clamp(80px, 25vw, 200px) clamp(80px, 25vw, 200px) clamp(10px, 2.5vw, 20px) clamp(10px, 2.5vw, 20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    padding: clamp(80px, 20vw, 160px) clamp(12px, 3vw, 28px) clamp(12px, 3vw, 28px);
    position: relative;
    margin: clamp(12px, 3vw, 24px) 0;
    min-height: clamp(200px, 45vw, 320px);
    overflow: hidden;
}


.table-label {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 215, 0, 0.7);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Deck Visual */
.deck-container {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 10;
}

.card-deck {
    position: relative;
    width: clamp(55px, 12vw, 90px);
    height: clamp(77px, 16.8vw, 126px);
    cursor: pointer;
    transition: transform 0.2s;
}

.card-deck:hover {
    transform: scale(1.05);
}

.deck-card {
    position: absolute;
    width: clamp(55px, 12vw, 90px);
    height: clamp(77px, 16.8vw, 126px);
    background: #c41e3a;
    border-radius: clamp(4px, 1vw, 8px);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    border: 2px solid #fff;
}

.deck-card::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 4px;
}

.deck-card::after {
    content: '♠♥♦♣';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2px;
}

.deck-card:nth-child(1) { transform: translate(0, 0); }
.deck-card:nth-child(2) { transform: translate(-2px, -2px); }
.deck-card:nth-child(3) { transform: translate(-4px, -4px); }
.deck-card:nth-child(4) { transform: translate(-6px, -6px); }
.deck-card:nth-child(5) { transform: translate(-8px, -8px); }

.deck-count {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
}

/* Game Header Stats */
.game-header {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 2vw, 12px);
    margin-bottom: clamp(12px, 4vw, 24px);
    flex-wrap: wrap;
}

.stat {
    background: var(--bg-card);
    padding: clamp(8px, 2vw, 14px) clamp(10px, 2.5vw, 20px);
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--border-subtle);
    min-width: clamp(60px, 15vw, 85px);
    max-width: clamp(100px, 25vw, 150px);
    transition: all var(--transition-base);
    overflow: hidden;
}

.stat:hover {
    border-color: var(--border-color);
}

.stat-label {
    color: var(--text-muted);
    font-size: clamp(0.55rem, 1.5vw, 0.7rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: clamp(3px, 1vw, 6px);
    font-weight: 500;
}

.stat.highlight {
    background: var(--bg-tertiary);
    border: 1px solid var(--accent-primary);
}

.stat.timer {
    background: var(--bg-tertiary);
    border-color: var(--accent-warning);
}

.stat.timer.urgent {
    animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { box-shadow: 0 0 15px var(--accent-danger-glow); }
    50% { box-shadow: 0 0 25px var(--accent-danger-glow); }
}

.stat span:not(.stat-label) {
    font-size: clamp(1rem, 3.5vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Card Area */
.card-area {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 220px;
    position: relative;
    z-index: 5;
}

.card-area.multi {
    min-height: 180px;
}

.cards-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    perspective: 1000px;
}

/* Playing Cards */
.playing-card {
    width: clamp(85px, 18vw, 140px);
    height: clamp(119px, 25.2vw, 196px);
    background: #ffffff;
    border-radius: clamp(8px, 2vw, 12px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(6px, 1.5vw, 10px);
    font-family: 'Georgia', serif;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.playing-card:hover {
    transform: translateY(-5px) scale(1.02);
}

.playing-card.red {
    color: #dc2626;
}

.playing-card.black {
    color: #1f2937;
}

.card-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.card-corner.bottom {
    align-self: flex-end;
    transform: rotate(180deg);
}

.card-rank {
    font-size: clamp(1rem, 3.5vw, 1.8rem);
    font-weight: bold;
}

.card-suit-small {
    font-size: clamp(0.7rem, 2.5vw, 1.2rem);
}

.card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(2rem, 8vw, 4rem);
}

/* Card Dealing Animation - Simple fade/scale in */
.playing-card.dealing {
    animation: dealCard 0.25s ease-out forwards;
}

@keyframes dealCard {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Multi-card staggered dealing */
.playing-card.dealing-0 { animation-delay: 0ms; }
.playing-card.dealing-1 { animation-delay: 100ms; }
.playing-card.dealing-2 { animation-delay: 200ms; }
.playing-card.dealing-3 { animation-delay: 300ms; }
.playing-card.dealing-4 { animation-delay: 400ms; }
.playing-card.dealing-5 { animation-delay: 500ms; }

/* Card flip animation */
.playing-card.flipping {
    animation: flipCard 0.6s ease-in-out;
}

@keyframes flipCard {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg) scale(1.1); }
    100% { transform: rotateY(0deg); }
}

/* Card exit animation */
.playing-card.exiting {
    animation: exitCard 0.4s ease-in forwards;
}

@keyframes exitCard {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-150px) translateY(50px) rotate(-15deg);
        opacity: 0;
    }
}

/* Card correct/wrong feedback animation */
.playing-card.correct-answer {
    animation: correctCard 0.5s ease;
    box-shadow:
        0 0 30px rgba(74, 222, 128, 0.8),
        0 10px 30px rgba(0,0,0,0.4);
}

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

.playing-card.wrong-answer {
    animation: wrongCard 0.5s ease;
    box-shadow:
        0 0 30px rgba(248, 113, 113, 0.8),
        0 10px 30px rgba(0,0,0,0.4);
}

@keyframes wrongCard {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.playing-card.small {
    width: clamp(60px, 14vw, 100px);
    height: clamp(84px, 19.6vw, 140px);
    padding: clamp(4px, 1vw, 8px);
}

.playing-card.small .card-rank {
    font-size: clamp(0.8rem, 2.5vw, 1.2rem);
}

.playing-card.small .card-suit-small {
    font-size: clamp(0.6rem, 2vw, 0.9rem);
}

.playing-card.small .card-center {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

/* Discard pile */
.discard-pile {
    position: absolute;
    top: clamp(10px, 2vw, 20px);
    left: clamp(15px, 3vw, 30px);
    width: clamp(45px, 10vw, 70px);
    height: clamp(63px, 14vw, 98px);
    background: rgba(0,0,0,0.2);
    border-radius: clamp(4px, 1vw, 8px);
    border: 2px dashed rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.discard-pile::after {
    content: 'DISCARD';
    font-size: 0.6rem;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.discard-pile .mini-card {
    position: absolute;
    width: 60px;
    height: 84px;
    background: #fff;
    border-radius: 6px;
    opacity: 0.5;
}

/* Answer Buttons */
.answer-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(10px, 3vw, 20px);
    margin: clamp(15px, 4vw, 30px) 0;
}

.answer-btn {
    width: clamp(60px, 15vw, 100px);
    height: clamp(60px, 15vw, 100px);
    border: none;
    border-radius: 50%;
    font-size: clamp(1.2rem, 4vw, 2rem);
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
    min-width: 44px;
    min-height: 44px;
}


.answer-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

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

.answer-btn.positive {
    background: var(--bg-tertiary);
    color: var(--accent-success);
    border: 1px solid var(--accent-success);
}

.answer-btn.positive:hover {
    background: rgba(34, 197, 94, 0.1);
}

.answer-btn.neutral {
    background: var(--bg-tertiary);
    color: var(--accent-warning);
    border: 1px solid var(--accent-warning);
}

.answer-btn.neutral:hover {
    background: rgba(245, 158, 11, 0.1);
}

.answer-btn.negative {
    background: var(--bg-tertiary);
    color: var(--accent-danger);
    border: 1px solid var(--accent-danger);
}

.answer-btn.negative:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Keyboard hint */
.keyboard-hint {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 10px;
    opacity: 0.6;
    font-size: 0.85rem;
}

.keyboard-hint kbd {
    background: rgba(255,255,255,0.2);
    padding: 3px 8px;
    border-radius: 4px;
    font-family: monospace;
}

/* Feedback */
.feedback {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.feedback.correct {
    color: var(--accent-success);
    background: var(--accent-success-glow);
    border: 1px solid rgba(16, 185, 129, 0.3);
    animation: feedbackPop 0.4s ease-out;
}

.feedback.wrong,
.feedback.incorrect {
    color: var(--accent-danger);
    background: var(--accent-danger-glow);
    border: 1px solid rgba(239, 68, 68, 0.3);
    animation: shake 0.4s ease-out;
}

@keyframes feedbackPop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.08); }
    70% { transform: scale(0.98); }
    100% { transform: scale(1); opacity: 1; }
}

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

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Streak Celebration */
.streak-celebration {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 150, 50, 0.8);
    z-index: 9999;
    pointer-events: none;
    animation: streakPop 1.5s ease-out forwards;
}

@keyframes streakPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    40% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -60%) scale(1.1); opacity: 0; }
}

/* Card correct/wrong flash */
.playing-card.correct-flash {
    animation: cardCorrect 0.3s ease-out;
}

.playing-card.wrong-flash {
    animation: cardWrong 0.3s ease-out;
}

@keyframes cardCorrect {
    0% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }
    50% { box-shadow: 0 0 30px rgba(34, 197, 94, 0.7); }
    100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }
}

@keyframes cardWrong {
    0% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }
    50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.7); }
    100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }
}

/* Action Buttons */
.action-btn {
    background: var(--accent-primary);
    color: #fff;
    border: none;
    padding: clamp(10px, 2.5vw, 14px) clamp(18px, 4vw, 28px);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px var(--accent-glow);
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
    min-height: 44px;
}


.action-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--accent-glow);
}

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

.action-btn:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.action-btn.secondary {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    box-shadow: none;
}

.action-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.action-btn.primary {
    background: var(--accent-primary);
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 24px 0;
}

/* Back Button */
.back-btn {
    display: block;
    margin: 28px auto 0;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 0.9rem;
    font-weight: 500;
}

.back-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* Input */
.count-input {
    width: 110px;
    padding: 12px;
    font-size: 1.25rem;
    text-align: center;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transition: all var(--transition-base);
    font-weight: 600;
}

.count-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--bg-secondary);
}

.count-input.large {
    width: 160px;
    font-size: 2rem;
    padding: 16px;
}

/* Settings Bar */
.settings-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.settings-bar label {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Tutorial */
.tutorial-content {
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 20px;
}

.tutorial-slide {
    display: none;
    animation: fadeIn 0.3s;
}

.tutorial-slide.active {
    display: block;
}

.tutorial-slide h2 {
    margin-bottom: 20px;
    color: var(--text-primary);
}

.tutorial-slide p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.tutorial-slide .example-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.tutorial-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.nav-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.nav-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.3);
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Overlays */
.start-overlay, .results-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.start-overlay h2, .results-overlay h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.start-overlay p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.8;
}

.start-btn {
    background: var(--accent-primary);
    border: none;
    padding: 16px 48px;
    font-size: 1.25rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    transition: transform 0.2s;
}

.start-btn:hover {
    background: var(--accent-hover);
}

.results-stats {
    display: flex;
    gap: 40px;
    margin: 30px 0;
}

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

.result-value {
    display: block;
    font-size: 3rem;
    font-weight: bold;
    color: var(--text-primary);
}

.result-label {
    font-size: 0.9rem;
    opacity: 0.8;
}

.result-rank {
    font-size: 1.5rem;
    margin: 20px 0 30px;
    padding: 15px 30px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}

/* Answer Input Area */
.answer-input {
    text-align: center;
    margin: 20px 0;
}

.answer-input p {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.answer-input .action-btn {
    margin-left: 15px;
}

/* Running count display */
.running-count-display {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.running-count-display .count-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
}

/* Streak fire animation */
.streak-fire {
    display: inline-block;
    animation: fireGlow 0.5s ease infinite alternate;
}

@keyframes fireGlow {
    from { filter: drop-shadow(0 0 2px #ff6b00); }
    to { filter: drop-shadow(0 0 8px #ff6b00); }
}

/* Timer urgency */
.stat.timer.urgent {
    animation: timerPulse 0.5s ease infinite;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); background: #ff4444; }
}

/* Level System */
.level-stat {
    background: var(--bg-tertiary) !important;
    border-color: var(--accent-primary) !important;
}

.level-progress-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.level-progress-bar {
    width: 200px;
    height: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    overflow: hidden;
}

.level-progress-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 4px;
    transition: width 0.5s ease;
    width: 0%;
}

.level-progress-text {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Level up animation */
@keyframes levelUp {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.level-up-animation {
    animation: levelUp 0.8s ease;
}

.level-up-flash {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.9);
    padding: 30px 60px;
    border-radius: 20px;
    z-index: 200;
    text-align: center;
    animation: levelUpFlash 1.5s ease forwards;
}

.level-up-flash h2 {
    color: var(--text-primary);
    font-size: 2rem;
    margin-bottom: 10px;
}

.level-up-flash p {
    color: #fff;
    opacity: 0.8;
}

@keyframes levelUpFlash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* Blackjack Simulation Table */
.sim-table {
    min-height: 450px;
    padding-top: 160px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
}

.dealer-area {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    padding-top: 10px;
    border-bottom: 2px dashed rgba(212, 175, 55, 0.3);
}

.dealer-label {
    color: rgba(212, 175, 55, 0.8);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.hand-cards {
    display: flex;
    justify-content: center;
    gap: 8px;
    min-height: 100px;
    flex-wrap: wrap;
}

.hand-total {
    margin-top: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    min-height: 24px;
}

.players-area {
    display: flex;
    justify-content: center;
    gap: clamp(8px, 2vw, 15px);
    flex-wrap: wrap;
    margin-top: clamp(10px, 3vw, 20px);
}

.player-spot {
    background: rgba(0,0,0,0.2);
    border-radius: clamp(8px, 2vw, 15px);
    padding: clamp(8px, 2vw, 15px) clamp(6px, 1.5vw, 10px);
    min-width: clamp(70px, 18vw, 120px);
    text-align: center;
    border: 2px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.player-spot.empty {
    opacity: 0.4;
    border-style: dashed;
}

.player-spot.you {
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(212, 175, 55, 0.1);
}

.player-spot.active {
    border-color: rgba(74, 222, 128, 0.6);
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.player-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
}

.player-spot.you .player-label {
    color: rgba(212, 175, 55, 0.9);
    font-weight: bold;
}

.player-spot .hand-cards {
    min-height: clamp(50px, 12vw, 75px);
    gap: clamp(2px, 0.5vw, 4px);
}

.player-spot .hand-total {
    font-size: clamp(0.7rem, 2vw, 0.9rem);
}

/* Smaller cards for player spots */
.player-spot .playing-card {
    width: clamp(35px, 8vw, 50px);
    height: clamp(49px, 11.2vw, 70px);
    padding: clamp(2px, 0.5vw, 4px);
}

.player-spot .playing-card .card-rank {
    font-size: clamp(0.6rem, 1.8vw, 0.9rem);
}

.player-spot .playing-card .card-suit-small {
    font-size: clamp(0.5rem, 1.4vw, 0.7rem);
}

.player-spot .playing-card .card-center {
    font-size: clamp(0.9rem, 2.8vw, 1.4rem);
}

.player-spot .playing-card .card-corner.bottom {
    display: none;
}

/* Face down card */
.playing-card.face-down {
    background: #c41e3a;
    color: transparent;
}

.playing-card.face-down::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 6px;
}

.playing-card.face-down::after {
    content: '♠♥♦♣';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 1px;
}

.playing-card.face-down .card-corner,
.playing-card.face-down .card-center {
    visibility: hidden;
}

/* Game status */
.game-status {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.95rem;
    color: var(--text-primary);
    min-width: 200px;
    text-align: center;
}

/* Count check area */
.count-check-area {
    text-align: center;
    padding: 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
    margin: 20px 0;
}

.count-check-area p {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.count-check-area .count-input {
    margin-right: 15px;
}

/* Sim info */
.sim-info {
    text-align: center;
    margin-top: 15px;
    opacity: 0.6;
    font-size: 0.85rem;
}

/* Speed control */
.speed-control {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.speed-control label {
    opacity: 0.7;
}

.speed-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 6px 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.speed-btn:hover {
    background: rgba(255,255,255,0.2);
}

.speed-btn.active {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
}

/* Menu button version of speed-btn should use dark theme */
.menu-btn.speed-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

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

/* Auto play button */
.action-btn.auto-btn {
    background: var(--accent-primary);
}

.action-btn.stop-btn {
    background: var(--accent-danger);
}

/* Auto mode indicator */
.auto-mode-active {
    position: relative;
}

.auto-mode-active::after {
    content: 'AUTO';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(74, 222, 128, 0.9);
    color: #000;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
    animation: autoPulse 1.5s ease infinite;
}

@keyframes autoPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Hand result badges */
.hand-result {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 5px;
    display: inline-block;
}

.hand-result.win {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-success);
}

.hand-result.lose {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
}

.hand-result.push {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.hand-result.blackjack {
    background: rgba(212, 175, 55, 0.4);
    color: #d4af37;
}

.hand-result.bust {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
}

/* =============================================
   VERSUS MODE STYLES
   ============================================= */

/* Lobby */
.lobby-container {
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.lobby-container h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.lobby-subtitle {
    opacity: 0.7;
    margin-bottom: 30px;
}

.lobby-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lobby-option {
    background: rgba(0,0,0,0.2);
    padding: 25px;
    border-radius: 15px;
}

.lobby-option h3 {
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.name-input, .code-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    background: rgba(0,0,0,0.3);
    color: #fff;
    font-size: 1rem;
    text-align: center;
}

.code-input {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-family: monospace;
    font-size: 1.3rem;
}

.name-input:focus, .code-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.lobby-divider {
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
}

.game-mode-selector {
    margin-bottom: 15px;
}

.game-mode-selector label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.mode-select {
    width: 100%;
    padding: 12px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
}

.mode-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.lobby-error {
    color: var(--accent-danger);
    margin-top: 15px;
    min-height: 24px;
}

.action-btn.create-btn {
    background: var(--accent-primary);
}

.action-btn.join-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

/* Waiting Room */
.waiting-container {
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.waiting-container h2 {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.waiting-container h2 span {
    font-family: monospace;
    background: rgba(0,0,0,0.3);
    padding: 5px 15px;
    border-radius: 8px;
    letter-spacing: 3px;
}

.game-mode-badge {
    display: inline-block;
    background: var(--accent-primary);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 10px 0 15px;
}

.game-mode-badge.blackjack {
    background: var(--accent-success);
}

.waiting-subtitle {
    opacity: 0.7;
    margin-bottom: 25px;
}

.players-list {
    background: rgba(0,0,0,0.2);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
}

.players-list h3 {
    margin-bottom: 15px;
    font-size: 1rem;
    opacity: 0.8;
}

.players-list ul {
    list-style: none;
    padding: 0;
}

.players-list li {
    padding: 10px 15px;
    margin: 5px 0;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.players-list li.host::after {
    content: 'HOST';
    font-size: 0.7rem;
    background: var(--accent-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
}

.players-list li.you {
    border: 2px solid var(--accent-primary);
}

.host-controls, .guest-waiting {
    margin-top: 20px;
}

.host-controls p, .guest-waiting p {
    opacity: 0.7;
    margin-bottom: 15px;
}

#start-game-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Versus Game Screen */
.versus-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 15px;
}

.versus-round {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 10px 25px;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
}

.versus-scoreboard {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.scoreboard-player {
    background: rgba(0,0,0,0.3);
    padding: 8px 15px;
    border-radius: 8px;
    text-align: center;
    min-width: 80px;
}

.scoreboard-player.leading {
    background: rgba(59, 130, 246, 0.2);
    border: 2px solid var(--accent-primary);
}

.scoreboard-player .player-name {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: 3px;
}

.scoreboard-player .player-score {
    font-size: 1.2rem;
    font-weight: bold;
}

.versus-table {
    min-height: 450px;
}

/* Answer Area */
.versus-answer-area {
    background: rgba(0,0,0,0.5);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    margin: 20px 0;
    animation: slideUp 0.3s ease;
}

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

.answer-prompt {
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.answer-timer {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    margin-bottom: 15px;
    overflow: hidden;
}

.timer-bar {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width 0.1s linear;
    width: 100%;
}

.timer-bar.warning {
    background: var(--accent-warning);
}

.timer-bar.danger {
    background: var(--accent-danger);
}

.versus-answer-area .count-input {
    margin: 0 15px;
}

.time-remaining {
    margin-top: 15px;
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Results */
.versus-results {
    background: rgba(0,0,0,0.8);
    border-radius: 15px;
    padding: 25px;
    margin: 20px 0;
    text-align: center;
}

.versus-results h3 {
    margin-bottom: 20px;
    color: var(--text-primary);
}

.round-results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
}

.result-row.correct {
    border-left: 4px solid var(--accent-success);
}

.result-row.wrong {
    border-left: 4px solid #ef4444;
}

.result-row .result-name {
    font-weight: bold;
}

.result-row .result-time {
    color: var(--text-secondary);
    font-family: monospace;
}

.result-row .result-points {
    background: var(--accent-primary);
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: bold;
}

.result-row.wrong .result-points {
    background: #ef4444;
    color: #fff;
}

/* Blackjack Mode */
.bj-controls {
    text-align: center;
}

.my-hand {
    margin-bottom: 20px;
}

.my-hand h4 {
    margin-bottom: 10px;
    color: var(--text-primary);
}

#my-bj-hand {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bj-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.bj-buttons .action-btn {
    min-width: 100px;
}

.bj-results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.bj-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
}

.bj-result.win {
    border-left: 4px solid var(--accent-success);
}

.bj-result.lose, .bj-result.bust {
    border-left: 4px solid var(--accent-danger);
}

.bj-result.push {
    border-left: 4px solid var(--text-secondary);
}

.bj-result .outcome {
    font-weight: bold;
}

.bj-result .points.positive {
    color: var(--accent-success);
}

.bj-result .points.negative {
    color: var(--accent-danger);
}

.bj-result.blackjack {
    border-left: 4px solid #ffd700;
}

.bj-result .bet-info {
    color: var(--text-secondary);
    font-size: 0.9em;
}

/* Betting Controls */
.betting-controls {
    text-align: center;
    padding: 20px;
}

.bet-display {
    margin-bottom: 20px;
}

.bet-label {
    color: var(--text-secondary);
    margin-right: 10px;
}

.bet-amount {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--accent-success);
}

.bet-chips {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.chip-btn {
    padding: 10px 15px;
    border: 2px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

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

.quick-bets {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.quick-bet-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-bet-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.bankroll-display {
    margin-bottom: 20px;
    color: var(--text-secondary);
}

.place-bet-btn {
    min-width: 200px;
}

.current-bet-display {
    margin-bottom: 15px;
    font-size: 1.2rem;
    color: var(--accent-success);
}

.score-item.bankrupt {
    opacity: 0.5;
}

.score-item.bankrupt .score {
    color: var(--accent-danger);
}

.correct-count {
    font-size: 1.2rem;
    color: var(--text-primary);
}

/* Final Results */
.versus-final-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.versus-final-overlay h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: var(--text-primary);
}

.final-standings {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 30px;
    min-width: 300px;
    margin-bottom: 30px;
}

.final-standing-row {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 10px 0;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
}

.final-standing-row:first-child {
    background: rgba(59, 130, 246, 0.2);
    border: 2px solid var(--accent-primary);
}

.final-standing-row .position {
    font-size: 1.5rem;
    font-weight: bold;
    width: 40px;
}

.final-standing-row:first-child .position {
    color: var(--accent-primary);
}

.final-standing-row .name {
    flex: 1;
    font-size: 1.1rem;
}

.final-standing-row .final-score {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-primary);
}

/* =============================================
   SYSTEM SELECTOR
   ============================================= */

.system-selector {
    background: rgba(0,0,0,0.3);
    padding: 15px 25px;
    border-radius: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.system-selector label {
    font-size: 0.95rem;
    opacity: 0.9;
}

.system-selector select {
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.4);
    color: #fff;
    cursor: pointer;
    min-width: 200px;
}

.system-selector select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.system-selector select option {
    background: var(--bg-secondary);
    color: #fff;
}

/* Strategy section separator */
.strategy-section {
    margin-top: 20px;
    background: var(--bg-card);
}

.strategy-section h2 {
    color: var(--text-primary);
}

/* Button colors - using theme */
.truecount-btn, .bs-btn, .betting-btn {
    background: var(--bg-secondary);
}
.deviation-btn { background: var(--bg-secondary); }

/* =============================================
   BASIC STRATEGY TRAINER
   ============================================= */

.bs-table {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.player-area-center {
    text-align: center;
    margin-top: 40px;
}

.player-area-center .player-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.player-area-center .hand-cards {
    justify-content: center;
}

.bs-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 25px 0;
    flex-wrap: wrap;
}

.bs-btn-action {
    padding: 18px 35px;
    font-size: 1.2rem;
    font-weight: bold;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    min-width: 100px;
}

.bs-btn-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

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

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

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

.bs-btn-action.split {
    background: var(--accent-primary);
    color: #fff;
}

/* =============================================
   EDUCATIONAL SLIDES (Betting & Deviation)
   ============================================= */

.edu-container {
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.edu-slide {
    animation: fadeIn 0.3s ease;
}

.edu-slide h2 {
    color: var(--text-primary);
    margin-bottom: 20px;
    font-size: 1.6rem;
    text-align: center;
}

.edu-slide p {
    line-height: 1.7;
    margin-bottom: 15px;
}

.edu-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

/* Strategy boxes */
.strategy-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.strategy-item {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}

.strategy-item.positive {
    background: rgba(59, 130, 246, 0.15);
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.strategy-item.negative {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
}

.strategy-item .count-range {
    font-weight: bold;
    margin-bottom: 5px;
}

.strategy-item .action {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-primary);
}

.strategy-item .reason {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Formula box */
.formula-box {
    background: var(--bg-tertiary);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 20px 0;
    border: 2px solid var(--border-color);
}

/* Example lists */
.example-list {
    background: rgba(0,0,0,0.2);
    padding: 15px 15px 15px 35px;
    border-radius: 10px;
    margin: 15px 0;
}

.example-list li {
    margin: 8px 0;
}

/* Spread table */
.spread-table {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
}

.spread-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.spread-row.header {
    background: var(--bg-tertiary);
    font-weight: bold;
}

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

/* Advantage chart */
.advantage-chart {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 15px;
    margin: 20px 0;
}

.adv-row {
    display: grid;
    grid-template-columns: 60px 60px 1fr;
    padding: 8px;
    gap: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

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

.adv-row .positive {
    color: var(--accent-success);
    font-weight: bold;
}

.adv-row .neutral {
    color: var(--text-primary);
}

/* Tips list */
.tips-list {
    list-style: none;
    padding: 0;
}

.tips-list li {
    padding: 10px 15px;
    margin: 10px 0;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border-left: 3px solid var(--accent-primary);
}

.warning {
    background: rgba(239, 68, 68, 0.15);
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid var(--accent-danger);
    margin-top: 15px;
}

/* Deviation table */
.deviation-table {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    overflow: hidden;
    margin: 15px 0;
    font-size: 0.9rem;
}

.dev-row {
    display: grid;
    grid-template-columns: 1fr 80px 60px 80px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.dev-row.header {
    background: var(--bg-tertiary);
    font-weight: bold;
}

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

/* Index explanation */
.index-explanation {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.index-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}

.index-num {
    background: var(--accent-primary);
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1rem;
}

.index-desc {
    flex: 1;
}

/* Highlight box */
.highlight-box {
    background: rgba(59, 130, 246, 0.15);
    border: 2px solid rgba(59, 130, 246, 0.3);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    margin: 20px 0;
}

.highlight-box h3 {
    color: var(--text-primary);
    margin-bottom: 10px;
}

/* Comparison box */
.comparison-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 20px 0;
}

.comparison-item {
    padding: 15px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
}

.comparison-item h4 {
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 0.95rem;
}

/* Example box */
.example-box {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    padding: 15px;
    border-radius: 10px;
    margin: 15px 0;
}

/* Priority list */
.priority-list {
    padding-left: 25px;
}

.priority-list li {
    margin: 12px 0;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}

.tip {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid var(--border-light);
    margin-top: 15px;
}

.note {
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0.9;
}

/* =============================================
   VERSUS MODE ENHANCEMENTS
   ============================================= */

.score-item {
    background: rgba(0,0,0,0.3);
    padding: 8px 15px;
    border-radius: 8px;
    text-align: center;
    min-width: 80px;
}

.score-item.you {
    border: 2px solid var(--accent-primary);
}

.score-item .rank {
    font-size: 0.75rem;
    opacity: 0.7;
}

.score-item .name {
    font-size: 0.85rem;
    display: block;
}

.score-item .score {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-primary);
}

.result-row.you {
    background: rgba(59, 130, 246, 0.15);
}

.result-row .result-rank {
    font-weight: bold;
    width: 40px;
}

.standing-row {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 8px 0;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
}

.standing-row.you {
    border: 2px solid var(--accent-primary);
}

.standing-row .standing-rank {
    font-size: 1.5rem;
    font-weight: bold;
    width: 50px;
}

.standing-row .standing-name {
    flex: 1;
    font-size: 1.1rem;
}

.standing-row .standing-score {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-primary);
}

/* Player list badges */
.player-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-number {
    background: rgba(255,255,255,0.2);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.player-name {
    flex: 1;
}

.host-badge {
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: bold;
}

.you-badge {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: bold;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    header h1 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .menu-btn {
        grid-template-columns: 40px 1fr;
    }

    .menu-btn .icon {
        font-size: 1.5rem;
    }

    .ref-grid {
        grid-template-columns: 1fr 1fr;
    }

    .results-stats {
        flex-wrap: wrap;
        gap: 15px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .weak-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
    header h1 {
        font-size: clamp(1.3rem, 6vw, 1.8rem);
    }

    .ref-grid {
        grid-template-columns: 1fr;
    }

    .results-stats {
        flex-direction: column;
        gap: 20px;
    }

    .deck-container {
        top: 10px;
        right: 10px;
    }

    .discard-pile {
        display: none;
    }

    .keyboard-hint {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .weak-grid {
        grid-template-columns: 1fr;
    }

    .data-actions {
        flex-direction: column;
    }

    .bankroll-header {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Chip betting mobile styles */
    .chip-betting-area {
        padding: 10px;
        gap: 8px;
    }

    .chip {
        width: 42px;
        height: 42px;
        font-size: 0.75rem;
    }

    .bet-chip {
        width: 35px;
        height: 35px;
        font-size: 0.65rem;
        margin-left: -12px;
    }

    .chip-bet-amount {
        font-size: 1.2rem;
    }

    .chip-selector {
        gap: 6px;
    }

    .chip-deal-btn, .chip-rebet-btn {
        padding: 10px 20px;
        font-size: 0.95rem;
    }

    .chip-clear-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .suggested-bet-info {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

/* =============================================
   STATS DASHBOARD
   ============================================= */

.stats-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.stats-header-bar h2 {
    margin: 0;
}

.stats-period-selector {
    display: flex;
    gap: 10px;
}

.period-btn {
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.period-btn:hover {
    background: rgba(255,255,255,0.2);
}

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

.stats-summary {
    display: flex;
    justify-content: space-around;
    padding: 25px;
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

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

.summary-value {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-primary);
}

.summary-label {
    font-size: 0.9rem;
    opacity: 0.7;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 20px;
    backdrop-filter: blur(10px);
}

.stat-card h3 {
    margin: 0 0 15px 0;
    font-size: 1rem;
    opacity: 0.9;
}

/* Weak Points Section */
.weak-points-section {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 2px solid rgba(255,255,255,0.1);
}

.weak-points-section h3 {
    margin-bottom: 20px;
}

.weak-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.weak-card {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 20px;
}

.weak-card h4 {
    margin: 0 0 15px 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

.problem-list {
    max-height: 200px;
    overflow-y: auto;
}

.problem-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 5px 0;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 3px solid var(--border-light);
}

.problem-item .cards {
    font-family: monospace;
}

.problem-item .error-rate {
    color: var(--text-secondary);
    font-weight: bold;
}

.no-data {
    opacity: 0.5;
    font-style: italic;
}

.recommendations ul,
#recommendations-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recommendations li,
#recommendations-list li {
    padding: 10px;
    margin: 8px 0;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 3px solid var(--border-light);
}

/* Data Actions */
.data-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 25px 0;
    flex-wrap: wrap;
}

.export-btn {
    background: var(--accent-primary);
}

.import-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.clear-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

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

/* Modal Styles - Enhanced */
.modal,
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    animation: fadeIn 0.2s ease-out;
    overflow: hidden;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-content {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: clamp(16px, 4vw, 28px);
    max-width: min(500px, 95vw);
    width: 90%;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xl);
    animation: modalSlideIn 0.25s ease-out;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content h3 {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.modal-subtitle {
    color: var(--text-muted);
    margin-bottom: 20px;
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.modal-content textarea {
    width: 100%;
    height: 200px;
    margin: 16px 0;
    padding: 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.9rem;
    resize: vertical;
    transition: all var(--transition-base);
}

.modal-content textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* =============================================
   BANKROLL SIMULATION
   ============================================= */

.bankroll-header {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.bankroll-stat {
    background: var(--accent-primary) !important;
}

.bankroll-chart-container {
    height: 100px;
    margin: 15px 0;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 10px;
}

/* Suggested bet info bar */
.suggested-bet-info {
    text-align: center;
    padding: 8px 16px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.suggested-amount {
    font-weight: bold;
    color: var(--accent-primary);
    font-size: 1.1rem;
}

/* Chip Betting Area */
.chip-betting-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 15px;
    margin-top: 10px;
}

.bet-chips-display {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 50px;
    gap: 4px;
}

.bet-chip {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.7rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.2);
    border: 3px dashed rgba(255,255,255,0.3);
    margin-left: -15px;
    position: relative;
}

.bet-chip:first-child {
    margin-left: 0;
}

.bet-chip.chip-1 { background: #eeeeee; color: #333; }
.bet-chip.chip-5 { background: #e53935; }
.bet-chip.chip-25 { background: #43a047; }
.bet-chip.chip-100 { background: #1e1e1e; }
.bet-chip.chip-500 { background: #7b1fa2; }

.chip-bet-amount {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
}

.chip-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chip {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    color: #fff;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.2);
    border: 3px dashed rgba(255,255,255,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}

.chip:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.2);
}

.chip:active {
    transform: translateY(0) scale(0.95);
}

.chip-1 { background: #eeeeee; color: #333; border-color: rgba(0,0,0,0.3); }
.chip-5 { background: #e53935; }
.chip-25 { background: #43a047; }
.chip-100 { background: #1e1e1e; border-color: rgba(255,255,255,0.5); }
.chip-500 { background: #7b1fa2; }

.chip-clear-btn {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.chip-clear-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.chip-actions {
    display: flex;
    gap: 12px;
    margin-top: 5px;
}

.chip-deal-btn {
    background: var(--accent-success);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.chip-deal-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.chip-deal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.chip-rebet-btn {
    background: var(--accent-primary);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.chip-rebet-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.bankroll-table {
    min-height: 420px;
}

.player-area-center {
    text-align: center;
    margin: 30px 0 20px 0;
}

.player-area-center .player-label {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 10px;
}

.player-area-center .hand-cards {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.player-area-center .hand-total {
    font-size: 1.2rem;
    font-weight: bold;
}

.bankroll-settings {
    margin-top: 20px;
    text-align: center;
}

.settings-toggle {
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-toggle:hover {
    background: rgba(255,255,255,0.2);
}

.settings-panel {
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
    padding: 20px;
    margin-top: 15px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

.setting-row input,
.setting-row select {
    background: rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    width: 120px;
}

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

/* =============================================
   ACE SIDE COUNT
   ============================================= */

.ace-stat {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color);
    position: relative;
}

.ace-indicator {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 0.9rem;
    font-weight: bold;
}

.ace-indicator.rich {
    color: var(--accent-success);
}

.ace-indicator.poor {
    color: var(--accent-danger);
}

.ace-indicator.neutral {
    color: var(--text-primary);
}

.ace-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    cursor: pointer;
    margin: 10px 0;
    justify-content: center;
}

.ace-toggle input {
    width: 18px;
    height: 18px;
}

/* Tools Section */
.tools-section {
    margin-top: 20px;
}

.tools-section h2 {
    margin-bottom: 15px;
}

/* =============================================
   SESSION TIMER WIDGET
   ============================================= */
.session-timer-widget {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.75);
    padding: 10px 18px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    z-index: 1000;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.session-timer-widget .timer-icon {
    font-size: 1.2rem;
}

.session-timer-widget #session-time {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    min-width: 50px;
}

/* =============================================
   INSURANCE AREA
   ============================================= */
.insurance-area {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 15px;
    padding: 20px;
    margin: 15px 0;
    text-align: center;
}

.insurance-area p {
    margin: 8px 0;
}

.insurance-area .insurance-cost {
    color: var(--text-primary);
    font-weight: bold;
}

.insurance-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 15px 0;
}

.insurance-yes {
    background: var(--accent-primary);
}

.insurance-no {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.insurance-hint {
    font-size: 0.9rem;
    padding: 8px 15px;
    border-radius: 8px;
    display: inline-block;
}

.insurance-hint.good {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
}

.insurance-hint.bad {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* =============================================
   SURRENDER BUTTON
   ============================================= */
.bs-btn-action.surrender {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.bs-btn-action.surrender:hover {
    background: var(--bg-hover);
    transform: translateY(-2px);
}

/* =============================================
   KEYBOARD SHORTCUTS OVERLAY
   ============================================= */
.keyboard-help-content {
    background: var(--bg-secondary);
    border-radius: 20px;
    padding: 30px;
    max-width: 700px;
    width: 90%;
    position: relative;
    border: 1px solid var(--border-color);
}

.keyboard-help-content h2 {
    text-align: center;
    margin-bottom: 25px;
    color: var(--text-primary);
}

.keyboard-help-content .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.keyboard-help-content .close-btn:hover {
    opacity: 1;
}

.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
}

.shortcut-section h3 {
    color: var(--text-primary);
    margin-bottom: 12px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.shortcut-row {
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

kbd {
    background: #374151;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    border: 1px solid #4b5563;
    min-width: 24px;
    text-align: center;
}

.keyboard-help-content .hint {
    text-align: center;
    margin-top: 25px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* =============================================
   CASINO INFO PANEL
   ============================================= */
.casino-info-panel {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.casino-info-panel > div {
    margin: 8px 0;
}

.casino-rules-summary {
    color: #a0aec0;
}

.casino-house-edge {
    color: var(--text-primary);
}

.casino-locations {
    color: var(--text-secondary);
}

.casino-tip {
    color: var(--text-secondary);
    font-style: italic;
}

.counter-friendly-rating {
    color: var(--text-secondary);
}

.counter-friendly-rating .stars {
    color: var(--text-primary);
    letter-spacing: 2px;
}

/* =============================================
   SPEED DRILL
   ============================================= */
.speed-drill-progress {
    text-align: center;
    margin: 15px 0;
}

.speed-drill-progress .progress-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.speed-drill-progress .progress-bar-container {
    background: rgba(0, 0, 0, 0.3);
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    max-width: 300px;
    margin: 0 auto;
}

.speed-drill-progress .progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-primary);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.speed-drill-progress .progress-bar-fill.achieved {
    background: var(--accent-success);
}

.speed-drill-card-area {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 220px;
    margin: 20px 0;
}

.speed-drill-card {
    width: 140px;
    height: 200px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    position: relative;
    color: #1a1a2e;
    font-weight: bold;
}

.speed-drill-card.red {
    color: #dc2626;
}

.speed-drill-card .card-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.speed-drill-card .card-corner.top-left {
    align-self: flex-start;
}

.speed-drill-card .card-corner.bottom-right {
    align-self: flex-end;
    transform: rotate(180deg);
}

.speed-drill-card .card-rank {
    font-size: 1.5rem;
}

.speed-drill-card .card-suit {
    font-size: 1.2rem;
}

.speed-drill-card .card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.5rem;
}

.speed-drill-card .card-placeholder {
    text-align: center;
    color: #666;
    font-size: 0.9rem;
    margin: auto;
}

.speed-drill-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

.speed-drill-buttons .answer-btn {
    font-size: 1.4rem;
    padding: 18px 35px;
    min-width: 80px;
}

.speed-drill-feedback {
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    min-height: 40px;
    margin: 15px 0;
    transition: color 0.2s;
}

.speed-drill-feedback.excellent {
    color: var(--accent-success);
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.speed-drill-feedback.good {
    color: var(--accent-success);
}

.speed-drill-feedback.ok {
    color: var(--text-primary);
}

.speed-drill-feedback.slow {
    color: #f97316;
}

.speed-drill-feedback.wrong {
    color: #ef4444;
}

/* Menu button for speed drill */
.menu-btn.speed-drill-btn {
    background: var(--bg-secondary);
}

.menu-btn.speed-drill-btn:hover {
    background: var(--bg-hover);
}

/* =============================================
   EV CALCULATOR
   ============================================= */
.ev-calculator-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.ev-calculator-container h2 {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.ev-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
}

.ev-inputs {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.ev-input-group {
    margin-bottom: 15px;
}

.ev-input-group:last-child {
    margin-bottom: 0;
}

.ev-input-group label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
}

.ev-input-group input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    -webkit-appearance: none;
}

.ev-input-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
}

.ev-input-group input[type="number"],
.ev-input-group select {
    width: 100%;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 1rem;
}

.ev-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.ev-result-item {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
}

.ev-result-item.primary {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.ev-label {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 5px;
}

.ev-value {
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
}

.ev-value.positive {
    color: var(--accent-success);
}

.ev-value.negative {
    color: var(--accent-danger);
}

.ev-recommendation {
    padding: 15px 20px;
    border-radius: 12px;
    text-align: center;
    font-size: 1rem;
    margin-bottom: 20px;
}

.ev-recommendation .rec-icon {
    margin-right: 8px;
}

.ev-recommendation.excellent {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
}

.ev-recommendation.good {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--text-primary);
}

.ev-recommendation.neutral {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.ev-recommendation.caution {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.ev-recommendation.danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-danger);
}

.ev-chart-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.ev-chart-container h3 {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    font-size: 1rem;
}

.ev-chart-container canvas {
    height: 200px !important;
}

.ev-info {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.ev-info h4 {
    color: var(--text-primary);
    margin-bottom: 12px;
}

.ev-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ev-info li {
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
    color: rgba(255, 255, 255, 0.8);
}

.ev-info li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent-primary);
}

/* Menu button for EV Calculator */
.menu-btn.ev-btn {
    background: var(--bg-secondary);
}

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

/* =============================================
   RISK OF RUIN CALCULATOR
   ============================================= */
.ror-calculator-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.ror-calculator-container h2 {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.ror-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
}

.ror-inputs {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.ror-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.ror-input-row:last-child {
    margin-bottom: 0;
}

.ror-input-group label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.ror-input-group input,
.ror-input-group select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 1rem;
}

.ror-results {
    margin-bottom: 20px;
}

.ror-result-primary {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 15px;
}

.ror-result-primary .ror-label {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.ror-result-primary span:not(.ror-label) {
    font-size: 2.5rem;
    font-weight: bold;
}

.ror-excellent {
    color: var(--accent-success);
}

.ror-good {
    color: var(--accent-success);
}

.ror-caution {
    color: var(--text-primary);
}

.ror-danger {
    color: var(--accent-danger);
}

.ror-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 15px;
}

.ror-result-item {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

.ror-result-item .ror-label {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 5px;
}

.ror-result-item > span:nth-child(2) {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
}

.ror-result-item .sub-value {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 3px;
}

.ror-result-item .positive {
    color: var(--accent-success);
}

.ror-result-item .negative {
    color: var(--accent-danger);
}

.ror-session-info {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.9rem;
}

.ror-session-info .ror-label {
    color: rgba(255, 255, 255, 0.7);
}

.ror-recommendations {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.ror-recommendations h4 {
    color: var(--text-primary);
    margin-bottom: 12px;
}

.ror-recommendations ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ror-recommendations li {
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ror-recommendations li:last-child {
    border-bottom: none;
}

.ror-recommendations li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent-primary);
}

.ror-info {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.ror-info h4 {
    color: var(--text-primary);
    margin-bottom: 12px;
}

.ror-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ror-info li {
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.ror-info li strong {
    color: var(--text-primary);
}

/* Menu button for RoR Calculator */
.menu-btn.ror-btn {
    background: var(--bg-secondary);
}

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

/* =============================================
   DEVIATION TRAINING
   ============================================= */
.dt-settings {
    text-align: center;
    margin: 15px 0;
}

.dt-settings select {
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 1rem;
    margin-left: 10px;
}

.dt-tc-stat {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 10px 20px !important;
}

.dt-tc-value {
    font-size: 1.8rem !important;
    font-weight: bold;
}

.dt-tc-value.positive {
    color: var(--accent-success);
}

.dt-tc-value.negative {
    color: var(--accent-danger);
}

.dt-table-area {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 25px;
    margin: 20px auto;
    max-width: 500px;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dt-dealer-section,
.dt-player-section {
    text-align: center;
    margin: 15px 0;
}

.dt-section-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dt-card-display {
    display: flex;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    align-items: center;
}

.dt-card {
    width: 80px;
    height: 115px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px;
    position: relative;
    color: #1a1a2e;
    font-weight: bold;
}

.dt-card.red {
    color: #dc2626;
}

.dt-card .card-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.dt-card .card-corner.top-left {
    align-self: flex-start;
}

.dt-card .card-corner.bottom-right {
    align-self: flex-end;
    transform: rotate(180deg);
}

.dt-card .card-rank {
    font-size: 1rem;
}

.dt-card .card-suit {
    font-size: 0.8rem;
}

.dt-card .card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
}

.dt-hand-label {
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    font-size: 1.1rem;
}

.dt-feedback {
    text-align: center;
    font-size: 1.1rem;
    min-height: 50px;
    padding: 12px 20px;
    margin: 15px auto;
    max-width: 500px;
    border-radius: 10px;
}

.dt-feedback.correct {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
}

.dt-feedback.wrong {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
}

.dt-feedback .correct-icon,
.dt-feedback .wrong-icon {
    font-weight: bold;
    margin-right: 8px;
}

.dt-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.dt-action-btn {
    padding: 14px 28px;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 100px;
}

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

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

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

.dt-action-btn.split {
    background: var(--accent-primary);
    color: white;
}

.dt-action-btn.insurance-yes {
    background: var(--accent-primary);
    color: white;
}

.dt-action-btn.insurance-no {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.dt-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dt-info {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-top: 15px;
}

/* Menu button for Deviation Training */
.menu-btn.dt-btn {
    background: var(--bg-secondary);
}

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

/* =============================================
   SPLIT HANDS (BANKROLL MODE)
   ============================================= */
.split-hands-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 15px 0;
    flex-wrap: wrap;
}

.split-hand {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 15px;
    min-width: 140px;
    text-align: center;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.split-hand.active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.split-hand.stood {
    opacity: 0.7;
}

.split-hand-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}

.split-cards {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
}

.split-cards .playing-card {
    transform: scale(0.85);
}

.split-total {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-primary);
}

/* Split button styling */
.bs-btn-action.split {
    background: var(--accent-primary);
}

.bs-btn-action.split:hover {
    background: var(--accent-hover);
}

/* =============================================
   DISTRACTIONS MODE
   ============================================= */
.distraction-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    pointer-events: none;
    animation: distractionFadeIn 0.3s ease;
}

@keyframes distractionFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.distraction-content {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    padding: 30px 50px;
    text-align: center;
    animation: distractionPulse 0.5s ease;
}

@keyframes distractionPulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.distraction-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 15px;
}

.distraction-text {
    font-size: 1.3rem;
    color: white;
    font-weight: bold;
}

.distractions-toggle-container {
    text-align: center;
    margin: 20px 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.distractions-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: white;
    font-size: 1rem;
}

.distractions-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.distractions-info {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
}

/* =============================================
   RESPONSIVE ADJUSTMENTS
   ============================================= */
@media (max-width: 600px) {
    .session-timer-widget {
        top: 10px;
        right: 10px;
        padding: 8px 12px;
        font-size: 0.95rem;
    }

    .shortcuts-grid {
        grid-template-columns: 1fr;
    }

    .keyboard-help-content {
        padding: 20px;
    }

    .insurance-area {
        padding: 15px;
    }

    /* EV Calculator Mobile */
    .ev-results {
        grid-template-columns: 1fr;
    }

    .ev-chart-container canvas {
        height: 150px !important;
    }

    /* RoR Calculator Mobile */
    .ror-input-row {
        grid-template-columns: 1fr;
    }

    .ror-results-grid {
        grid-template-columns: 1fr;
    }

    .ror-session-info {
        flex-direction: column;
        gap: 8px;
    }

    /* Deviation Training Mobile */
    .dt-table-area {
        padding: 15px;
    }

    .dt-card {
        width: 65px;
        height: 95px;
    }

    .dt-actions {
        gap: 8px;
    }

    .dt-action-btn {
        padding: 10px 18px;
        font-size: 0.95rem;
        min-width: 80px;
    }

    /* Split Hands Mobile */
    .split-hands-container {
        gap: 10px;
    }

    .split-hand {
        min-width: 120px;
        padding: 10px;
    }

    /* Speed Drill Mobile */
    .speed-drill-card {
        width: 120px;
        height: 170px;
    }

    .speed-drill-buttons .answer-btn {
        padding: 15px 25px;
        font-size: 1.2rem;
    }
}

/* =============================================
   LANDING PAGE STYLES
   ============================================= */

.landing-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.landing-hero {
    margin-bottom: 3rem;
}

.landing-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

.landing-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.landing-tagline {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin: 0;
}

.landing-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: left;
    transition: transform 0.2s, border-color 0.2s;
}

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

.feature-icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.75rem;
}

.feature-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.feature-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.landing-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.landing-btn {
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

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

.landing-btn.primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

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

.landing-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

.landing-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* Landing page mobile */
@media (max-width: 600px) {
    .landing-container {
        padding: 30px 16px;
    }

    .landing-icon {
        font-size: 3rem;
    }

    .landing-hero h1 {
        font-size: 1.8rem;
    }

    .landing-tagline {
        font-size: 1rem;
    }

    .landing-features {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .feature-card {
        padding: 1.25rem;
    }

    .landing-cta {
        flex-direction: column;
    }

    .landing-btn {
        width: 100%;
    }
}

/* =============================================
   AUTHENTICATION STYLES
   ============================================= */

/* Auth Screen */
.auth-container {
    max-width: 380px;
    margin: 40px auto;
    padding: 32px;
    text-align: center;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.auth-logo {
    margin-bottom: 1.5rem;
}

.auth-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.75rem;
}

.auth-logo h1 {
    font-size: 1.5rem;
    color: var(--text-primary);
    font-weight: 600;
    margin: 0;
}

.auth-subtitle {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.auth-buttons {
    margin-bottom: 1.5rem;
}

.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.auth-btn.google-btn {
    background: white;
    color: #333;
    border: 1px solid #ddd;
}

.auth-btn.google-btn:hover {
    background: #f5f5f5;
}

.google-icon {
    flex-shrink: 0;
}

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

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

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

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

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--text-muted);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-divider span {
    padding: 0 1rem;
    font-size: 0.85rem;
}

.email-auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.email-auth-form input {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.email-auth-form input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.email-auth-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.email-auth-form input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.auth-form-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.auth-form-buttons .auth-btn {
    flex: 1;
}

.auth-error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: left;
}

.auth-success {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

.forgot-password-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    text-decoration: underline;
}

.forgot-password-link:hover {
    color: rgba(255, 255, 255, 0.9);
}

.guest-link {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.5rem;
    transition: color 0.2s;
}

.guest-link:hover {
    color: var(--text-primary);
}

.guest-note {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

/* Sign Up Modal */
.auth-modal {
    max-width: 400px;
}

.auth-modal h3 {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.auth-modal form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-modal input {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 1rem;
}

.auth-modal input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.auth-modal input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.terms-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.terms-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.terms-checkbox a {
    color: var(--accent-primary);
    text-decoration: none;
}

.terms-checkbox a:hover {
    text-decoration: underline;
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-close-btn:hover {
    color: white;
}

/* Header User Profile */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.user-profile:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-hover);
}

#user-name {
    color: var(--text-primary);
    font-size: 0.875rem;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 0.25rem;
}

.profile-menu-btn:hover {
    color: white;
}

/* Profile Dropdown */
.profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    z-index: 1001;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.profile-dropdown .profile-info {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.profile-dropdown .profile-info span {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.profile-dropdown button {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.9rem;
}

.profile-dropdown button:hover {
    background: var(--bg-hover);
}

.profile-dropdown .logout-btn {
    color: var(--accent-danger);
    border-top: 1px solid var(--border-color);
}

.profile-dropdown .logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Stipend button */
.profile-dropdown .stipend-btn {
    background: var(--accent-success);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
    margin: 8px;
    width: calc(100% - 16px);
}

.profile-dropdown .stipend-btn:hover {
    background: #1ea54d;
}

/* User balance display */
.user-balance {
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    margin-right: 8px;
}

.user-balance .balance-label {
    color: var(--accent-success);
    font-weight: 600;
    margin-right: 2px;
}

#balance-amount {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Login Required Notice (Versus Mode) */
.login-required-notice {
    text-align: center;
    padding: 2rem;
}

.login-required-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.login-required-notice h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.login-required-notice p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
}

.login-reason {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.9rem;
    margin-bottom: 1.5rem !important;
}

.login-required-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.login-required-buttons .action-btn {
    min-width: 150px;
}

/* Sync Status Indicator */
.sync-status {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.85);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.sync-icon {
    font-size: 1.2rem;
    animation: spin 1s linear infinite;
}

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

.sync-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
}

.sync-status.success {
    background: rgba(59, 130, 246, 0.9);
}

.sync-status.success .sync-icon {
    animation: none;
}

.sync-status.error {
    background: rgba(239, 68, 68, 0.85);
}

.sync-status.error .sync-icon {
    animation: none;
}

/* Network Status Indicator */
.network-status {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.85);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1000;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.network-status.online {
    background: rgba(34, 139, 34, 0.9);
}

.network-status.offline {
    background: rgba(220, 53, 69, 0.9);
}

.network-icon {
    font-size: 0.9rem;
}

.network-text {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

.pending-badge {
    background: var(--accent-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
}

/* Guest Mode Indicator */
.guest-mode-indicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    z-index: 1000;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.guest-mode-indicator .guest-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.guest-signin-btn {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    white-space: nowrap;
}

.guest-signin-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.guest-signin-btn:active {
    transform: translateY(0);
}

/* Desktop: smaller indicator on left */
@media (min-width: 769px) {
    .guest-mode-indicator {
        right: auto;
        max-width: 280px;
    }
}

/* Auth Screen Mobile */
@media (max-width: 480px) {
    .auth-container {
        padding: 1rem;
    }

    .auth-icon {
        font-size: 3rem;
    }

    .auth-logo h1 {
        font-size: 1.5rem;
    }

    .auth-form-buttons {
        flex-direction: column;
    }

    .header-top {
        flex-direction: column;
        gap: 0.5rem;
    }

    .user-profile {
        align-self: flex-end;
    }

    .profile-dropdown {
        right: 0;
        left: auto;
        top: 100%;
        bottom: auto;
        min-width: 180px;
    }

    .login-required-buttons {
        flex-direction: column;
    }

    .login-required-buttons .action-btn {
        width: 100%;
    }

    /* Header mobile improvements */
    .header-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .header-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

    /* User balance mobile */
    .user-balance {
        padding: 0.3rem 0.6rem;
        font-size: 0.85rem;
    }

    /* Modal mobile improvements */
    .modal-content {
        margin: 10px;
        max-height: calc(100vh - 20px);
        width: calc(100% - 20px);
    }

    .security-modal {
        padding: 1rem;
    }

    .security-modal h3 {
        font-size: 1.2rem;
    }

    .security-section {
        padding: 1rem;
    }

    .security-section h4 {
        font-size: 0.95rem;
    }

    .section-actions {
        flex-direction: column;
    }

    .section-actions button {
        width: 100%;
    }

    /* Form inputs on mobile */
    .form-group input {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Account stats mobile */
    .stat-row {
        padding: 0.6rem 0.8rem;
    }

    .stat-label, .stat-value {
        font-size: 0.85rem;
    }

    /* Guest indicator mobile - bottom bar style */
    .guest-mode-indicator {
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
        padding: 0.6rem 1rem;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
}

/* =============================================
   FRIENDS SYSTEM STYLES
   ============================================= */

/* Friends Screen */
.friends-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.friends-container h2 {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 20px;
}

/* Friends Tabs */
.friends-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px;
    border-radius: 12px;
}

.friends-tab {
    flex: 1;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
    position: relative;
}

.friends-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.friends-tab.active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.tab-badge {
    background: var(--accent-primary);
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
}

.friends-tab-content {
    display: none;
}

.friends-tab-content.active {
    display: block;
}

/* Friends List */
.friends-list {
    max-height: 400px;
    overflow-y: auto;
}

.friend-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.friend-card:hover {
    background: rgba(0, 0, 0, 0.4);
}

.friend-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.friend-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.friend-info {
    flex: 1;
    min-width: 0;
}

.friend-name {
    font-weight: 600;
    color: white;
    display: block;
}

.friend-username {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.friend-status {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.friend-status.online {
    color: var(--accent-success);
}

.friend-actions {
    display: flex;
    gap: 8px;
}

.friend-action-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.friend-action-btn.challenge {
    background: var(--accent-primary);
    color: white;
}

.friend-action-btn.challenge:hover {
    background: var(--accent-hover);
}

.friend-action-btn.remove {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.friend-action-btn.remove:hover {
    background: var(--bg-hover);
}

.friend-action-btn.accept {
    background: var(--accent-primary);
    color: white;
}

.friend-action-btn.decline {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 15px;
    opacity: 0.5;
}

.empty-hint {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 10px;
}

/* Add Friend Form */
.add-friend-form {
    text-align: center;
    padding: 20px;
}

.add-friend-form p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
}

.search-input-group {
    display: flex;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.search-input-group input {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 1rem;
}

.search-input-group input:focus {
    outline: none;
    border-color: var(--text-primary);
}

.search-result {
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.search-result.success {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
}

.search-result.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
}

/* Username Setup Modal */
.username-modal {
    max-width: 400px;
    text-align: center;
}

.username-modal h3 {
    color: var(--text-primary);
    margin-bottom: 10px;
}

.modal-subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 25px;
}

.username-input-group {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0 15px;
    margin-bottom: 10px;
}

.username-prefix {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
}

.username-input-group input {
    flex: 1;
    padding: 15px 10px;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.1rem;
}

.username-input-group input:focus {
    outline: none;
}

.username-status {
    min-height: 24px;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.username-status.available {
    color: var(--accent-success);
}

.username-status.taken {
    color: var(--accent-danger);
}

.username-status.checking {
    color: rgba(255, 255, 255, 0.5);
}

.username-rules {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
}

/* Challenge Notification */
.challenge-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 2px solid var(--accent-primary);
    border-radius: 16px;
    padding: 20px;
    z-index: 2000;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
    animation: slideDown 0.3s ease-out;
    min-width: 300px;
    max-width: 90%;
}

@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.challenge-content {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.challenge-icon {
    font-size: 2.5rem;
    animation: pulse 1s infinite;
}

.challenge-text {
    flex: 1;
}

.challenge-title {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-primary);
}

.challenge-from {
    display: block;
    font-size: 1.1rem;
    color: white;
    margin: 3px 0;
}

.challenge-subtitle {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.challenge-timer {
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.challenge-actions {
    display: flex;
    gap: 10px;
}

.challenge-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

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

.challenge-btn.accept:hover {
    background: var(--accent-hover);
}

.challenge-btn.decline {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.challenge-btn.decline:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Menu Badge */
.menu-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--accent-primary);
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.menu-btn {
    position: relative;
}

/* Friends Button Style */
.menu-btn.friends-btn {
    background: var(--bg-secondary);
}

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

/* Friends Mobile Styles */
@media (max-width: 480px) {
    .friends-tabs {
        flex-direction: column;
    }

    .friends-tab {
        width: 100%;
    }

    .friend-card {
        flex-wrap: wrap;
    }

    .friend-actions {
        width: 100%;
        margin-top: 10px;
    }

    .friend-action-btn {
        flex: 1;
    }

    .search-input-group {
        flex-direction: column;
    }

    .challenge-notification {
        top: 10px;
        left: 10px;
        right: 10px;
        transform: none;
        min-width: auto;
    }

    @keyframes slideDown {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* =============================================
   WEAKNESS ANALYSIS STYLES
   ============================================= */

/* Weakness Modal */
.weakness-modal {
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-subtitle {
    color: rgba(255, 255, 255, 0.7);
    margin-top: -10px;
    margin-bottom: 20px;
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px 10px;
    line-height: 1;
}

.modal-close-btn:hover {
    color: #fff;
}

/* Loading state */
.weakness-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: rgba(255, 255, 255, 0.8);
}

.loading-spinner {
    font-size: 2rem;
    animation: spin 1s linear infinite;
}

/* Trend indicator */
.weakness-trend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.1);
}

.weakness-trend.improving {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
}

.weakness-trend.declining {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
}

.weakness-trend.stable {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.weakness-trend.insufficient {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

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

.trend-text {
    font-weight: 500;
}

/* Analysis sections */
.analysis-section {
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
}

.analysis-section h3 {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    color: #fff;
}

/* Card Heatmap */
.card-heatmap {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.heatmap-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 5px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.2s;
}

.heatmap-card:hover {
    transform: scale(1.05);
}

.heatmap-rank {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
}

.heatmap-errors {
    font-size: 0.65rem;
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.9);
}

.heatmap-value {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
}

.heatmap-card.positive .heatmap-value {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-primary);
}

.heatmap-card.negative .heatmap-value {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.heatmap-card.neutral .heatmap-value {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Chart container */
.chart-container-small {
    height: 200px;
}

/* Focus Areas */
.focus-areas {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.focus-area-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    border-left: 4px solid var(--border-light);
}

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

.focus-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.focus-title {
    font-weight: bold;
    font-size: 1.1rem;
    color: #fff;
}

.focus-desc {
    opacity: 0.8;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.focus-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Practice Recommendation */
.recommendations-section {
    background: rgba(59, 130, 246, 0.1);
    border: 2px solid rgba(59, 130, 246, 0.2);
}

.practice-recommendation {
    margin-bottom: 15px;
}

.focus-cards-preview {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.focus-card {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1rem;
    color: #fff;
}

/* No data message */
.no-data {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    text-align: center;
    padding: 10px;
}

.error-text {
    color: var(--accent-danger);
}

/* Focus Practice Indicator in Speed Drill */
.focus-practice-indicator {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
    padding: 10px 20px;
    border-radius: 25px;
    text-align: center;
    margin: 10px auto;
    max-width: 90%;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Mobile responsiveness for weakness analysis */
@media (max-width: 600px) {
    .weakness-modal {
        width: 95%;
        padding: 15px;
        max-height: 95vh;
    }

    .card-heatmap {
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
    }

    .heatmap-card {
        padding: 8px 3px;
    }

    .heatmap-rank {
        font-size: 1rem;
    }

    .heatmap-errors {
        font-size: 0.55rem;
    }

    .analysis-section {
        padding: 15px;
    }

    .focus-area-item {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

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

/* =============================================
   FOOTER STYLES
============================================= */

.app-footer {
    margin-top: 40px;
    padding: 20px;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.footer-link {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px 8px;
    transition: color 0.2s;
}

.footer-link:hover {
    color: var(--text-secondary);
}

.footer-divider {
    color: var(--text-muted);
}

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

/* =============================================
   LEGAL MODAL STYLES
============================================= */

.legal-modal {
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.legal-modal h2 {
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.legal-content {
    text-align: left;
    line-height: 1.6;
    color: var(--text-secondary);
}

.legal-content h3 {
    color: var(--text-primary);
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.legal-content p {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.legal-content ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.legal-content li {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.85);
}

.legal-content strong {
    color: #fff;
}

/* =============================================
   LOADING STATES
============================================= */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(24, 24, 27, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loading-text {
    margin-top: 20px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Button loading state */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Skeleton loading for content */
.skeleton {
    background: rgba(255, 255, 255, 0.1);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

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

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-text:last-child {
    width: 70%;
}

.skeleton-card {
    height: 80px;
    margin-bottom: 10px;
}

/* =============================================
   ACCESSIBILITY
============================================= */

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent-primary);
    color: #fff;
    padding: 10px 15px;
    z-index: 10001;
    transition: top 0.3s;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible styles for keyboard navigation */
*:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 2px;
}

button:focus-visible,
.menu-btn:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .menu-btn,
    .auth-btn,
    button {
        border: 2px solid currentColor;
    }

    .card {
        border: 2px solid white;
    }
}

/* =============================================
   ONBOARDING TUTORIAL
============================================= */

.onboarding-modal {
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    padding: 32px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xl);
    animation: modalSlideIn 0.25s ease-out;
}

.onboarding-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
}

.onboarding-modal h2 {
    color: var(--text-primary);
    margin-bottom: 15px;
}

.onboarding-modal p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    line-height: 1.6;
}

.onboarding-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 25px 0;
}

.onboarding-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.onboarding-feature .feature-icon {
    font-size: 2rem;
}

.count-values-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 25px 0;
}

.count-value {
    padding: 15px 25px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.count-value.positive {
    background: rgba(59, 130, 246, 0.15);
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.count-value.neutral {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
}

.count-value.negative {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
}

.count-value .cards {
    font-size: 1.1rem;
    font-weight: bold;
}

.count-value .value {
    font-size: 1.5rem;
    font-weight: bold;
}

.shortcut-preview {
    text-align: left;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}

.shortcut-item {
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.shortcut-item kbd {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: monospace;
    min-width: 40px;
    text-align: center;
}

.onboarding-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.onboarding-nav button {
    background: var(--accent-primary);
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.onboarding-nav button:hover {
    background: var(--accent-hover);
}

.onboarding-dots {
    display: flex;
    gap: 8px;
}

.onboarding-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.2s;
}

.onboarding-dots .dot.active {
    background: var(--accent-primary);
}

.onboarding-skip {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    margin-top: 15px;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.onboarding-skip:hover {
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 480px) {
    .onboarding-features {
        flex-direction: column;
        gap: 15px;
    }

    .count-values-grid {
        flex-direction: column;
        gap: 10px;
    }

    .count-value {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* =============================================
   FEEDBACK FORM
============================================= */

.feedback-modal {
    max-width: 500px;
}

.feedback-modal h2 {
    color: var(--text-primary);
    margin-bottom: 5px;
}

.feedback-subtitle {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
}

.feedback-modal .form-group {
    margin-bottom: 20px;
}

.feedback-modal label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.feedback-modal select,
.feedback-modal input,
.feedback-modal textarea {
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.feedback-modal select:focus,
.feedback-modal input:focus,
.feedback-modal textarea:focus {
    border-color: var(--accent-primary);
    outline: none;
}

.feedback-modal textarea {
    resize: vertical;
    min-height: 100px;
}

.feedback-status {
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
}

.feedback-status.success {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
}

.feedback-status.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-danger);
}

.feedback-submit-btn {
    width: 100%;
    padding: 14px;
    background: var(--accent-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.feedback-submit-btn:hover {
    background: var(--accent-hover);
}

.feedback-submit-btn:disabled {
    background: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

/* =============================================
   KEYBOARD NUMERIC INPUT DISPLAY
   ============================================= */

.keyboard-input-display {
    position: fixed;
    top: 80px;
    right: 20px;
    display: none;
    align-items: center;
    gap: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: 14px 22px;
    box-shadow: var(--shadow-lg), 0 0 30px var(--accent-glow);
    z-index: 1000;
    animation: slideInKbd 0.25s ease-out;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@keyframes slideInKbd {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.keyboard-input-display .kbd-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.keyboard-input-display .kbd-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 55px;
    text-align: center;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    letter-spacing: -0.02em;
}

.keyboard-input-display .kbd-value.negative {
    color: var(--accent-danger);
}

.keyboard-input-display .kbd-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    border-left: 1px solid var(--border-color);
    padding-left: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Weakness Analysis Button in Stats Dashboard */
.weakness-analysis-btn {
    margin-top: 20px;
    width: 100%;
    max-width: 300px;
}

/* =============================================
   CUT CARD INDICATOR
   ============================================= */

.cut-card-indicator {
    margin: 12px auto;
    max-width: 420px;
    padding: 10px 18px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-base);
}

.cut-card-indicator.warning {
    border-color: var(--accent-warning);
    background: var(--accent-warning-glow);
    box-shadow: 0 0 20px var(--accent-warning-glow);
}

.cut-card-indicator.critical {
    border-color: var(--accent-danger);
    background: var(--accent-danger-glow);
    box-shadow: 0 0 25px var(--accent-danger-glow);
    animation: criticalPulse 1.5s ease-in-out infinite;
}

@keyframes criticalPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px var(--accent-danger-glow);
    }
    50% {
        opacity: 0.85;
        box-shadow: 0 0 35px var(--accent-danger-glow);
    }
}

.cut-card-progress {
    position: relative;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: visible;
    margin-bottom: 8px;
}

.cut-card-bar {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width var(--transition-slow);
    width: 0%;
}

.cut-card-marker {
    position: absolute;
    top: -5px;
    right: 20%;
    width: 2px;
    height: 16px;
    background: var(--accent-danger);
    border-radius: 1px;
    box-shadow: 0 0 8px var(--accent-danger);
}

.cut-card-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    display: block;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.cut-card-indicator.warning .cut-card-text {
    color: var(--accent-warning);
    font-weight: 600;
}

.cut-card-indicator.critical .cut-card-text {
    color: var(--accent-danger);
    font-weight: 700;
}

/* Settings hint text */
.setting-hint {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 6px;
    font-style: italic;
}

/* =============================================
   SESSION HISTORY & REPLAY
   ============================================= */

.sessions-section {
    margin-top: 30px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.sessions-section h3 {
    margin: 0 0 15px 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.sessions-list {
    max-height: 400px;
    overflow-y: auto;
}

.session-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.session-row:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
}

.session-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.session-mode {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

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

.session-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.session-accuracy {
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
}

.session-accuracy.good {
    background: rgba(34, 197, 94, 0.2);
    color: var(--accent-success);
}

.session-accuracy.ok {
    background: rgba(245, 158, 11, 0.2);
    color: var(--accent-warning);
}

.session-accuracy.poor {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-danger);
}

.session-mistakes {
    font-size: 0.8rem;
    color: var(--accent-danger);
}

/* Session Detail Modal */
.session-modal {
    max-width: 450px;
}

.session-modal-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 20px 0;
}

.modal-stat {
    text-align: center;
    padding: 15px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.modal-stat .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.modal-stat .stat-value.good {
    color: var(--accent-success);
}

.modal-stat .stat-value.ok {
    color: var(--accent-warning);
}

.modal-stat .stat-value.poor {
    color: var(--accent-danger);
}

.modal-stat .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Mistake Replay Modal */
.replay-modal {
    max-width: 500px;
    text-align: center;
}

.mistake-counter {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.mistake-cards {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.replay-card {
    width: 70px;
    height: 100px;
    background: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.replay-card .replay-rank {
    font-size: 1.8rem;
    font-weight: bold;
    color: #000;
}

.replay-card .replay-value {
    font-size: 0.9rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
}

.replay-card.positive .replay-value {
    background: rgba(34, 197, 94, 0.2);
    color: #16a34a;
}

.replay-card.negative .replay-value {
    background: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

.replay-card.neutral .replay-value {
    background: rgba(100, 100, 100, 0.2);
    color: #666;
}

.mistake-answers {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 20px 0;
}

.answer-box {
    padding: 15px 25px;
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.answer-box .answer-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.answer-box .answer-value {
    font-size: 1.5rem;
    font-weight: bold;
}

.answer-box .answer-value.correct {
    color: var(--accent-success);
}

.answer-box .answer-value.incorrect {
    color: var(--accent-danger);
}

.replay-navigation {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.replay-navigation .nav-btn {
    padding: 10px 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.replay-navigation .nav-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.replay-navigation .nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.close-replay-btn {
    margin-top: 10px;
}

/* =============================================
   BETTING DRILL PRACTICE MODE
   ============================================= */

.betting-drill-main {
    max-width: 520px;
    margin: 0 auto;
    padding: 24px;
    text-align: center;
}

.spread-selector {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.spread-selector label {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9rem;
}

.spread-selector select {
    padding: 10px 18px;
    font-size: 0.95rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.spread-selector select:hover {
    border-color: var(--border-light);
}

.spread-selector select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
    outline: none;
}

.tc-prompt {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-weight: 500;
}

.tc-display-large {
    font-size: 6rem;
    font-weight: 800;
    margin: 16px 0 24px;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.04em;
    line-height: 1;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.tc-display-large.positive {
    color: var(--accent-success);
    text-shadow: 0 4px 30px var(--accent-success-glow);
}

.tc-display-large.negative {
    color: var(--accent-danger);
    text-shadow: 0 4px 30px var(--accent-danger-glow);
}

.tc-display-large.neutral {
    color: var(--text-secondary);
}

.cover-indicator {
    background: var(--accent-warning-glow);
    border: 1px solid var(--accent-warning);
    color: var(--accent-warning);
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
    font-weight: 600;
    font-size: 0.95rem;
    animation: coverPulse 2s ease-in-out infinite;
    box-shadow: 0 0 20px var(--accent-warning-glow);
}

@keyframes coverPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.01); }
}

.bet-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 28px 0;
}

.bet-btn {
    width: 64px;
    height: 64px;
    font-size: 1.15rem;
    font-weight: 700;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.bet-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: translateY(-3px);
}

.bet-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px var(--accent-glow);
}

.betting-reference {
    margin-top: 32px;
    padding: 18px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.betting-reference h4 {
    margin: 0 0 12px 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bet-reference {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.bet-reference th,
.bet-reference td {
    padding: 8px 14px;
    text-align: center;
    border-bottom: 1px solid var(--border-subtle);
}

.bet-reference th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bet-reference td {
    color: var(--text-primary);
    font-weight: 600;
}

.bet-reference tr:last-child td {
    border-bottom: none;
}

.betting-drill-start-btn {
    margin-top: 24px;
}

/* =============================================
   SECURITY FEATURES STYLES
   ============================================= */

/* Two-Factor Authentication Input */
.totp-input-group {
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.totp-input-group.show {
    display: flex;
}

.totp-input-group label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.totp-input-group input {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 1.1rem;
    font-family: monospace;
    letter-spacing: 4px;
    text-align: center;
}

.totp-input-group input::placeholder {
    letter-spacing: normal;
}

/* Password Requirements List */
.password-requirements {
    margin-top: 8px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.password-requirements p {
    margin: 0 0 8px 0;
    color: var(--text-secondary);
    font-weight: 500;
}

.password-requirements ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text-muted);
}

.password-requirements li {
    margin: 4px 0;
}

.password-requirements li.met {
    color: var(--accent-success);
}

.password-requirements li.met::marker {
    content: "✓ ";
}

/* Email Verification Banner */
.verification-banner {
    display: none;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 20px;
    align-items: center;
    gap: 16px;
}

.verification-banner.show {
    display: flex;
}

.verification-banner-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.verification-banner-content {
    flex: 1;
}

.verification-banner-content p {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.verification-banner-content p:first-child {
    font-weight: 600;
    margin-bottom: 4px;
}

.verification-banner-content p:last-child {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.verification-banner button {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}

.verification-banner button:hover {
    background: rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 0.6);
}

/* Security Settings Modal */
.security-modal {
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.security-modal h3 {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.security-section {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

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

.security-section h4 {
    margin: 0 0 16px 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.security-section h4 .icon {
    font-size: 1.1rem;
}

.security-section p {
    margin: 0 0 12px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 2FA Status Indicator */
.twofa-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.twofa-status.enabled {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.twofa-status.disabled {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.twofa-status-icon {
    font-size: 1.5rem;
}

.twofa-status-text {
    flex: 1;
}

.twofa-status-text strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.twofa-status-text span {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* QR Code Container */
.qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: var(--radius-md);
    margin: 16px 0;
}

.qr-container img {
    max-width: 200px;
    height: auto;
}

.qr-container .manual-key {
    margin-top: 16px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    text-align: center;
    width: 100%;
}

.qr-container .manual-key label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.qr-container .manual-key code {
    color: var(--text-primary);
    font-family: monospace;
    font-size: 0.9rem;
    letter-spacing: 2px;
    word-break: break-all;
}

/* 2FA Setup Form */
.twofa-setup-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.twofa-setup-form input {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 1.1rem;
    font-family: monospace;
    letter-spacing: 4px;
    text-align: center;
}

.twofa-setup-form .btn-row {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.twofa-setup-form .btn-row button {
    flex: 1;
}

/* Backup Codes Display */
.backup-codes {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    margin: 16px 0;
}

.backup-codes h5 {
    margin: 0 0 12px 0;
    color: var(--accent-warning);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.backup-codes p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.backup-codes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.backup-codes-grid code {
    background: var(--bg-tertiary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 0.9rem;
    text-align: center;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.backup-codes-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.backup-codes-actions button {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.85rem;
}

/* Active Sessions List */
.sessions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.session-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.session-item.current {
    border-color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.1);
}

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

.session-details {
    flex: 1;
    min-width: 0;
}

.session-details strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-details span {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.session-details .session-current-badge {
    display: inline-block;
    background: var(--accent-primary);
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 600;
}

.session-revoke-btn {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-danger);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.session-revoke-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

.session-revoke-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.revoke-all-btn {
    margin-top: 12px;
    width: 100%;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-danger);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.revoke-all-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Change Password Form */
.change-password-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.change-password-form input {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.95rem;
}

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

.change-password-form button {
    margin-top: 8px;
}

/* Audit Log */
.audit-log {
    max-height: 300px;
    overflow-y: auto;
}

.audit-log-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.audit-log-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.audit-log-item:last-child {
    border-bottom: none;
}

.audit-log-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.audit-log-icon.success {
    color: var(--accent-success);
}

.audit-log-icon.warning {
    color: var(--accent-warning);
}

.audit-log-icon.danger {
    color: var(--accent-danger);
}

.audit-log-icon.info {
    color: var(--accent-primary);
}

.audit-log-content {
    flex: 1;
    min-width: 0;
}

.audit-log-content strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.audit-log-content span {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.audit-log-time {
    color: var(--text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Security Buttons */
.security-btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

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

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

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

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

.security-btn-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-danger);
}

.security-btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Loading State */
.security-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.security-loading::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    margin-right: 12px;
    animation: spin 0.8s linear infinite;
}

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

/* Forgot Password Modal */
.forgot-password-modal {
    max-width: 400px;
}

.forgot-password-modal h3 {
    margin-bottom: 0.5rem;
}

.forgot-password-modal p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.forgot-password-modal form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.forgot-password-modal input {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 1rem;
}

/* Reset Password Modal */
.reset-password-modal {
    max-width: 400px;
}

.reset-password-modal h3 {
    margin-bottom: 0.5rem;
}

.reset-password-modal p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* Security Settings Link in Settings */
.settings-security-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 20px;
}

.settings-security-link:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.settings-security-link-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-security-link-content .icon {
    font-size: 1.5rem;
}

.settings-security-link-content .text strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.settings-security-link-content .text span {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.settings-security-link .arrow {
    color: var(--text-muted);
    font-size: 1.2rem;
}

/* Disable 2FA Form */
.disable-2fa-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.disable-2fa-form input {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.disable-2fa-form .btn-row {
    display: flex;
    gap: 12px;
}

/* Status Indicators */
.status-indicator {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-indicator.enabled {
    background: rgba(34, 197, 94, 0.2);
    color: var(--accent-success);
}

.status-indicator.disabled {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-danger);
}

/* Security Modal Specifics */
.security-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.section-desc.warning {
    color: var(--accent-warning);
}

.section-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.section-actions button {
    flex: 1;
}

/* Account Settings Form */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.form-group input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.input-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Account Stats */
.account-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

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

.stat-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Danger Zone */
.danger-zone {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.danger-zone h4 {
    color: #ef4444;
}

/* Setup Steps */
.setup-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setup-steps p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.manual-entry {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.manual-entry code {
    background: var(--bg-card);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--text-primary);
    word-break: break-all;
}

/* TOTP hint text */
.totp-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Settings Link Button */
.settings-link-btn {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-link-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Modal Actions (for security modals) */
.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.modal-actions button {
    flex: 1;
}

/* Loading text */
.loading-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 20px;
}

/* Banner styles */
.banner-icon {
    font-size: 1.5rem;
}

.banner-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.banner-btn {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.banner-btn:hover {
    background: rgba(245, 158, 11, 0.3);
}

.banner-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
}

.banner-close:hover {
    color: var(--text-primary);
}

/* =============================================
   LEADERBOARDS
   ============================================= */

.leaderboard-container {
    max-width: 600px;
    margin: 0 auto;
}

.leaderboard-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
}

.lb-tab {
    padding: 8px 20px;
    border: 1px solid var(--border-color, #333);
    background: var(--bg-secondary, #1a1a2e);
    color: var(--text-secondary, #aaa);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.lb-tab.active {
    background: var(--accent-primary, #6366f1);
    color: white;
    border-color: var(--accent-primary, #6366f1);
}

.lb-tab:hover:not(.active) {
    background: var(--bg-tertiary, #252540);
}

.leaderboard-filter {
    text-align: center;
    margin-bottom: 16px;
}

.lb-friends-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #aaa);
    cursor: pointer;
    font-size: 0.9rem;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.lb-entry {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary, #1a1a2e);
    border-radius: 8px;
    gap: 12px;
    transition: background 0.2s;
}

.lb-entry:hover {
    background: var(--bg-tertiary, #252540);
}

.lb-entry.rank-1 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), var(--bg-secondary, #1a1a2e));
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.lb-entry.rank-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), var(--bg-secondary, #1a1a2e));
    border: 1px solid rgba(192, 192, 192, 0.2);
}

.lb-entry.rank-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), var(--bg-secondary, #1a1a2e));
    border: 1px solid rgba(205, 127, 50, 0.2);
}

.lb-rank {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 36px;
    text-align: center;
    color: var(--text-secondary, #aaa);
}

.lb-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary, #fff);
}

.lb-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.lb-value {
    font-weight: 600;
    color: var(--accent-primary, #6366f1);
    font-size: 0.95rem;
}

.lb-sub {
    font-size: 0.75rem;
    color: var(--text-muted, #666);
}

.lb-user-rank {
    text-align: center;
    padding: 12px;
    background: var(--bg-secondary, #1a1a2e);
    border-radius: 8px;
    margin-bottom: 16px;
    color: var(--text-secondary, #aaa);
    font-size: 0.95rem;
}

/* =============================================
   EXPORT DROPDOWN
   ============================================= */

.export-dropdown {
    position: relative;
    display: inline-block;
}

.export-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 4px;
    min-width: 120px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.export-menu button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--text-primary, #fff);
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9rem;
}

.export-menu button:hover {
    background: var(--bg-tertiary, #252540);
}

/* =============================================
   PROGRESSIVE DIFFICULTY
   ============================================= */

.difficulty-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-secondary, #1a1a2e);
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.difficulty-label {
    color: var(--text-secondary, #aaa);
}

.difficulty-level {
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.difficulty-level.easy { color: #60a5fa; background: rgba(96, 165, 250, 0.15); }
.difficulty-level.normal { color: #4ade80; background: rgba(74, 222, 128, 0.15); }
.difficulty-level.hard { color: #fbbf24; background: rgba(251, 191, 36, 0.15); }
.difficulty-level.expert { color: #f87171; background: rgba(248, 113, 113, 0.15); }

.difficulty-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary, #252540);
    border-radius: 3px;
    overflow: hidden;
}

.difficulty-fill {
    height: 100%;
    background: var(--accent-primary, #6366f1);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* =============================================
   ENHANCED WEAKNESS ANALYSIS
   ============================================= */

.rt-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
}

.rt-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: 6px;
    transition: transform 0.2s;
}

.rt-card:hover { transform: scale(1.05); }

.rt-rank {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary, #fff);
}

.rt-time {
    font-size: 0.7rem;
    color: var(--text-secondary, #aaa);
    margin-top: 2px;
}

.system-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.sys-compare-card {
    background: var(--bg-secondary, #1a1a2e);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.sys-name {
    font-weight: 600;
    color: var(--text-primary, #fff);
    font-size: 0.9rem;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.sys-acc {
    font-size: 1.4rem;
    font-weight: 700;
}

.sys-meta {
    font-size: 0.75rem;
    color: var(--text-muted, #666);
    margin-top: 4px;
}

.practice-plan-detail {
    background: var(--bg-secondary, #1a1a2e);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.plan-cards {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0;
}

.plan-meta {
    font-size: 0.8rem;
    color: var(--text-muted, #666);
}

/* =============================================
   REPLAY VIEWER
   ============================================= */
.replay-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.replay-entry:hover {
    background: var(--bg-hover);
}

.replay-entry-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.replay-type {
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}

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

.replay-entry-stats {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.9rem;
}

.profit-positive {
    color: #22c55e;
    font-weight: 600;
}

.profit-negative {
    color: #ef4444;
    font-weight: 600;
}

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

.replay-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.replay-info-bar span {
    font-size: 0.9rem;
}

.replay-result {
    font-weight: 700;
    font-size: 1.1rem;
    padding: 4px 12px;
    border-radius: 6px;
}

.replay-result.win {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.replay-result.loss {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.replay-result.push {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.replay-card-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 8px 0;
    min-height: 40px;
    flex-wrap: wrap;
}

.replay-card-row label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-right: 8px;
    align-self: center;
}

.replay-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 50px;
    background: white;
    color: #1a1a2e;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.replay-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
}

.replay-controls button {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.replay-controls button:hover {
    background: var(--bg-hover);
}

.replay-speed-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.replay-speed-control input[type="range"] {
    width: 120px;
}

.replay-bankroll-chart {
    margin-top: 16px;
    max-height: 150px;
}

/* =============================================
   TOURNAMENT MODE
   ============================================= */
.tournament-entry {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.tournament-entry:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}

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

.t-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.t-status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
}

.t-status.status-open {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.t-status.status-live {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.t-status.status-done {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.t-entry-meta {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.t-participant {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.tournament-create-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

.tournament-create-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.tournament-create-form input,
.tournament-create-form select {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
}

/* Bracket */
.bracket-rounds {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 16px 0;
    align-items: flex-start;
}

.bracket-round {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 160px;
}

.bracket-round h4 {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.match-box {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 10px 14px;
    border-left: 3px solid var(--border-color);
    text-align: center;
}

.match-box.done {
    border-left-color: #22c55e;
}

.match-box.live {
    border-left-color: #3b82f6;
    animation: pulse-border 2s infinite;
}

.match-box.bye {
    border-left-color: #6b7280;
    opacity: 0.6;
}

@keyframes pulse-border {
    0%, 100% { border-left-color: #3b82f6; }
    50% { border-left-color: #60a5fa; }
}

.match-player {
    font-size: 0.9rem;
    padding: 3px 0;
    color: var(--text-primary);
}

.match-player.match-winner {
    font-weight: 700;
    color: #22c55e;
}

.match-vs {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.tournament-btn {
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
    color: white !important;
}

.tournament-btn:hover {
    background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
}

/* =============================================
   SPECTATOR MODE
   ============================================= */
.active-games-section {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.active-games-section h3 {
    margin-bottom: 8px;
    font-size: 1rem;
}

.active-games-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.active-game-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.active-game-entry:hover {
    background: var(--bg-hover);
}

.game-host {
    font-weight: 600;
    color: var(--text-primary);
}

.game-mode {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: capitalize;
}

.game-watch {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
}

.spectator-banner {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    text-align: center;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
}

/* =============================================
   OFFLINE MULTIPLAYER
   ============================================= */
.offline-section {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.offline-section h3 {
    margin-bottom: 8px;
    font-size: 1rem;
}

.offline-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.offline-actions input {
    flex: 1;
    min-width: 160px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.offline-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.offline-btn.host {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.offline-btn.host:hover {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

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

.offline-btn.join:hover {
    background: var(--accent-hover);
}

/* =============================================
   ACHIEVEMENTS / BADGES
   ============================================= */
.achievements-summary {
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-size: 14px;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 0 4px;
}

.achievement-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.achievement-card.unlocked {
    border: 2px solid #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.achievement-card.locked {
    opacity: 0.5;
    filter: grayscale(0.6);
}

.achievement-card.unlocked:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.achievement-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

.achievement-name {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.achievement-desc {
    font-size: 11px;
    color: var(--text-secondary);
}

.achievement-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    animation: achievementSlideIn 0.4s ease-out;
}

.achievement-toast-icon {
    font-size: 28px;
}

.achievement-toast-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.achievement-toast-text strong {
    font-size: 14px;
    color: #f59e0b;
}

.achievement-toast-text span {
    font-size: 12px;
    color: var(--text-secondary);
}

@keyframes achievementSlideIn {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* =============================================
   DAILY CHALLENGE WIDGET
   ============================================= */
.daily-challenge-widget {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.daily-challenge-widget.completed {
    border-color: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}

.dc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.dc-title {
    font-weight: 700;
    font-size: 14px;
}

.dc-streak {
    font-size: 12px;
    color: #f59e0b;
    font-weight: 600;
}

.dc-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.dc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dc-reward {
    font-size: 12px;
    color: var(--accent-primary);
    font-weight: 600;
}

.daily-challenge-widget.completed .dc-reward {
    color: #22c55e;
}

.dc-status {
    font-size: 18px;
    color: #22c55e;
    font-weight: 700;
}

.dc-progress {
    position: relative;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

.dc-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), #8b5cf6);
    border-radius: 10px;
    transition: width 0.3s ease;
}

.dc-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* =============================================
   WEEKLY CHALLENGE WIDGET
   ============================================= */
.weekly-challenge-widget {
    background: var(--bg-secondary);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
}

.weekly-challenge-widget.completed {
    border-color: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}

.wc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.wc-title {
    font-weight: 700;
    font-size: 14px;
    color: #3b82f6;
}

.wc-days-left {
    font-size: 12px;
    color: var(--text-secondary);
}

.wc-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.wc-progress {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.wc-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.3s;
}

.wc-progress-text {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: right;
    margin-bottom: 8px;
}

.wc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wc-reward {
    font-size: 12px;
    color: #3b82f6;
    font-weight: 600;
}

.weekly-challenge-widget.completed .wc-reward {
    color: #22c55e;
}

.wc-status {
    font-size: 18px;
    color: #22c55e;
    font-weight: 700;
}

/* =============================================
   SKILL LEVEL DISPLAY
   ============================================= */
.skill-level-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--bg-secondary);
    border-radius: 20px;
}

.skill-badge {
    font-size: 1.1rem;
}

.skill-progress {
    width: 50px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.skill-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    transition: width 0.3s;
    width: 0%;
}

.skill-xp {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* =============================================
   PREMIUM BADGE
   ============================================= */
.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #1f2937;
}

body.premium-user .locked-premium {
    display: none;
}

/* =============================================
   XP TOAST
   ============================================= */
.xp-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    animation: slideInRight 0.3s ease-out, fadeOut 0.3s 2.7s forwards;
    z-index: 9999;
    pointer-events: none;
}

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

@keyframes fadeOut {
    to { opacity: 0; }
}

/* =============================================
   LEVEL UP MODAL
   ============================================= */
.level-up-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-secondary);
    border: 3px solid #fbbf24;
    border-radius: 20px;
    padding: 30px 40px;
    text-align: center;
    z-index: 10001;
    animation: levelUpPop 0.5s ease-out;
}

@keyframes levelUpPop {
    0% { transform: translate(-50%, -50%) scale(0); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.level-up-badge {
    font-size: 4rem;
    margin-bottom: 10px;
}

.level-up-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fbbf24;
    margin-bottom: 5px;
}

.level-up-name {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* =============================================
   CARD BACK SELECTOR
   ============================================= */
.card-back-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}

.card-back-option {
    width: 50px;
    height: 70px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
}

.card-back-option:hover {
    transform: scale(1.05);
}

.card-back-option.selected {
    border-color: #3b82f6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.card-back-option.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.card-back-option .lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    z-index: 1;
}

.card-back-option.locked .card-back-pattern {
    opacity: 0.3;
}

.card-back-pattern {
    font-size: 1.5rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Dynamic Card Back CSS Variables */
.playing-card.face-down {
    background: var(--card-back-bg, #c41e3a);
}

.playing-card.face-down::before {
    border-color: var(--card-back-border, rgba(255,255,255,0.3));
}

.playing-card.face-down::after {
    content: var(--card-back-pattern, '♠♥♦♣');
    color: var(--card-back-pattern-color, rgba(255,255,255,0.4));
}

/* =============================================
   RECOMMENDATIONS PANEL
   ============================================= */
.recommendations-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
}

.recommendations-panel h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.recommendation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.recommendation-item:hover {
    background: var(--bg-hover);
}

.recommendation-priority {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.recommendation-priority.high { background: #ef4444; }
.recommendation-priority.medium { background: #f59e0b; }
.recommendation-priority.low { background: #10b981; }

.recommendation-text {
    flex: 1;
    min-width: 0;
}

.recommendation-reason {
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recommendation-action {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.recommendation-arrow {
    color: #3b82f6;
    font-size: 1.1rem;
}

/* =============================================
   AI OPPONENT
   ============================================= */
.ai-option {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.ai-difficulty-select {
    margin-bottom: 10px;
}

.ai-difficulty-select label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.ai-btn {
    background: linear-gradient(135deg, var(--accent-primary), #8b5cf6) !important;
    color: white;
    font-weight: 600;
}

.ai-btn:hover {
    background: linear-gradient(135deg, var(--accent-hover), #7c3aed) !important;
}

.ai-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent-primary), #8b5cf6);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
}

/* =============================================
   CUSTOM RULES PANEL
   ============================================= */

.custom-rules-panel {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.custom-rules-panel label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

.custom-rules-panel input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
}

.custom-rule-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.custom-rule-row label {
    min-width: 80px;
    font-size: 14px;
    color: var(--text-secondary);
}

.custom-rule-row select {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
}

/* =============================================
   VOLUME SLIDER
   ============================================= */

input[type="range"]#sound-volume-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
    margin: 8px 0;
}

input[type="range"]#sound-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition-fast);
}

input[type="range"]#sound-volume-slider::-webkit-slider-thumb:hover {
    background: var(--accent-hover);
}

input[type="range"]#sound-volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* =============================================
   CARD ACCURACY HEATMAP
   ============================================= */

.heatmap-card {
    margin-top: 20px;
}

.heatmap-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 4px;
}

.heatmap-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    min-height: 50px;
    transition: transform var(--transition-fast);
}

.heatmap-cell:hover {
    transform: scale(1.05);
}

.heatmap-cell .card-label {
    font-size: 16px;
    font-weight: 700;
}

.heatmap-cell .error-rate {
    font-size: 10px;
    opacity: 0.9;
    margin-top: 2px;
}

/* Heatmap color gradient - green (good) to red (bad) */
.heatmap-cell.level-0 { background: #10b981; }
.heatmap-cell.level-1 { background: #22c55e; }
.heatmap-cell.level-2 { background: #84cc16; }
.heatmap-cell.level-3 { background: #eab308; }
.heatmap-cell.level-4 { background: #f97316; }
.heatmap-cell.level-5 { background: #ef4444; }

/* Time Played Card */
.time-played-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px !important;
}

.stat-value-large {
    font-size: 48px;
    font-weight: 700;
    color: var(--accent-primary);
    margin-top: 10px;
}

/* =============================================
   REFERRAL MODAL
   ============================================= */

.referral-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.referral-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 30px;
    max-width: 450px;
    width: 100%;
    text-align: center;
}

.referral-modal h2 {
    margin-bottom: 10px;
    color: var(--text-primary);
}

.referral-modal p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-size: 14px;
}

.referral-code-box {
    background: var(--bg-secondary);
    border: 2px dashed var(--accent-primary);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
}

.referral-code {
    font-size: 32px;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 4px;
    font-family: monospace;
}

.referral-link {
    font-size: 12px;
    color: var(--text-muted);
    word-break: break-all;
    margin-top: 10px;
}

.referral-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 20px 0;
    padding: 15px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

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

.referral-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-success);
}

.referral-stat-label {
    font-size: 12px;
    color: var(--text-muted);
}

.referral-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.referral-actions button {
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--transition-fast);
}

.referral-actions .share-btn {
    background: var(--accent-primary);
    color: white;
}

.referral-actions .share-btn:hover {
    background: var(--accent-hover);
}

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

.referral-actions .copy-btn:hover {
    background: var(--bg-hover);
}

.referral-actions .close-btn {
    background: transparent;
    color: var(--text-secondary);
}

.referral-bonus-info {
    background: var(--accent-success-glow);
    border: 1px solid var(--accent-success);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-top: 15px;
    font-size: 13px;
    color: var(--accent-success);
}

/* Referral Modal Additional Styles */
.referral-code-box {
    background: var(--bg-secondary);
    border: 2px dashed var(--accent-primary);
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 16px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.referral-code {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 4px;
    font-family: monospace;
}

.referral-code-box .copy-btn {
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    transition: all var(--transition-fast);
}

.referral-code-box .copy-btn:hover {
    background: var(--bg-hover);
}

.referral-share-btns {
    display: flex;
    justify-content: center;
}

.referral-stats h3 {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 14px;
}

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

.stat-row span {
    color: var(--text-secondary);
}

.stat-row strong {
    color: var(--accent-success);
}

/* =============================================
   HIDE PREMIUM ELEMENTS (Safety Net)
   ============================================= */

body:not(.premium-user) .premium-only,
body:not(.premium-user) .premium-upsell {
    display: none !important;
}

/* Mobile responsive for heatmap */
@media (max-width: 600px) {
    .heatmap-grid {
        grid-template-columns: repeat(7, 1fr);
    }

    .heatmap-cell {
        min-height: 40px;
        font-size: 12px;
    }

    .heatmap-cell .card-label {
        font-size: 14px;
    }

    .heatmap-cell .error-rate {
        font-size: 9px;
    }

    .stat-value-large {
        font-size: 36px;
    }

    .referral-code {
        font-size: 24px;
        letter-spacing: 2px;
    }

    .referral-stats {
        flex-direction: column;
        gap: 15px;
    }
}