/* =============================================
   MATH GAMES V2 - Full Screen 1v1 Premium
   © Situ Ghosh – All Rights Reserved
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --game-bg: #0a0a1a;
    --game-surface: #12122a;
    --game-card: #1a1a3e;
    --game-accent: #f59e0b;
    --game-success: #10b981;
    --game-danger: #ef4444;
    --game-info: #3b82f6;
    --game-purple: #8b5cf6;
    --game-pink: #ec4899;
    --game-cyan: #06b6d4;
    --neon-glow: 0 0 20px rgba(245, 158, 11, 0.4);
    --glass: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
}

* {
    box-sizing: border-box;
}

/* ========== HUB PAGE ========== */
.games-hub {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
}

.games-hub .page-title {
    text-align: center;
    padding: 30px 0 10px;
}

.games-hub .page-title h1 {
    font-size: 2.4rem;
    font-weight: 800;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: 'Poppins', sans-serif;
}

.games-hub .page-title h1 i {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.games-hub .page-title p {
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
    font-size: 1rem;
}

/* Class Selection */
.class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.class-card {
    background: var(--game-card);
    border: 2px solid var(--glass-border);
    border-radius: 18px;
    padding: 25px 18px;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.class-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(245, 158, 11, 0.08));
    opacity: 0;
    transition: opacity 0.3s;
}

.class-card:hover::before {
    opacity: 1;
}

.class-card:hover {
    transform: translateY(-6px);
    border-color: var(--game-accent);
    box-shadow: var(--neon-glow);
}

.class-card .class-num {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Orbitron', sans-serif;
}

.class-card .class-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-top: 5px;
}

.class-card.active {
    border-color: var(--game-accent);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(249, 115, 22, 0.1));
    box-shadow: var(--neon-glow);
}

/* Chapter Selection */
.chapter-section {
    display: none;
    margin: 20px 0;
    animation: fadeSlide 0.4s ease;
}

.chapter-section.active {
    display: block;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

.chapter-section h2 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.chapter-card {
    background: var(--game-surface);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 15px 18px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.chapter-card:hover {
    background: var(--game-card);
    border-color: var(--game-accent);
    color: white;
    transform: translateX(5px);
}

.chapter-card .ch-num {
    background: rgba(245, 158, 11, 0.15);
    color: var(--game-accent);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Game Type Selection */
.game-type-section {
    display: none;
    margin: 30px 0;
    animation: fadeSlide 0.4s ease;
}

.game-type-section.active {
    display: block;
}

.game-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.game-type-card {
    background: var(--game-surface);
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.game-type-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.2);
}

.game-type-card .game-emoji {
    font-size: 3rem;
    margin-bottom: 10px;
    display: block;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

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

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

.game-type-card .game-name {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.game-type-card .game-desc {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    line-height: 1.4;
}

/* Unique border colors per game */
.game-type-card[data-game="tugofwar"] {
    border-bottom: 3px solid #ef4444;
}

.game-type-card[data-game="tugofwar"]:hover {
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.2);
}

.game-type-card[data-game="poleclimbing"] {
    border-bottom: 3px solid #10b981;
}

.game-type-card[data-game="poleclimbing"]:hover {
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
}

.game-type-card[data-game="sackrace"] {
    border-bottom: 3px solid #f59e0b;
}

.game-type-card[data-game="sackrace"]:hover {
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2);
}

.game-type-card[data-game="redlightgreenlight"] {
    border-bottom: 3px solid #22c55e;
}

.game-type-card[data-game="redlightgreenlight"]:hover {
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.2);
}

.game-type-card[data-game="glassbridge"] {
    border-bottom: 3px solid #06b6d4;
}

.game-type-card[data-game="glassbridge"]:hover {
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.2);
}

.game-type-card[data-game="mountainclimber"] {
    border-bottom: 3px solid #8b5cf6;
}

.game-type-card[data-game="mountainclimber"]:hover {
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
}

.game-type-card[data-game="speedrace"] {
    border-bottom: 3px solid #ec4899;
}

.game-type-card[data-game="speedrace"]:hover {
    box-shadow: 0 10px 30px rgba(236, 72, 153, 0.2);
}

.game-type-card[data-game="targetpractice"] {
    border-bottom: 3px solid #f97316;
}

.game-type-card[data-game="targetpractice"]:hover {
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.2);
}

.game-type-card[data-game="fruitninja"] {
    border-bottom: 3px solid #84cc16;
}

.game-type-card[data-game="fruitninja"]:hover {
    box-shadow: 0 10px 30px rgba(132, 204, 22, 0.2);
}

.game-type-card[data-game="championship"] {
    border-bottom: 3px solid #eab308;
}

.game-type-card[data-game="championship"]:hover {
    box-shadow: 0 10px 30px rgba(234, 179, 8, 0.2);
}

/* Breadcrumb */
.game-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.breadcrumb-item {
    background: var(--glass);
    padding: 6px 14px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.breadcrumb-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.breadcrumb-item.active {
    background: rgba(245, 158, 11, 0.15);
    color: var(--game-accent);
    border-color: rgba(245, 158, 11, 0.3);
}

.breadcrumb-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.7rem;
}

/* ========== FULL SCREEN GAME ARENA ========== */
.game-arena {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: linear-gradient(180deg, #0a0a1a 0%, #0f0f2d 40%, #1a0a2e 100%);
    overflow-y: auto;
    overflow-x: hidden;
}

.game-arena.active {
    display: flex;
    flex-direction: column;
}

/* Animated BG */
.game-arena::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.game-arena>* {
    position: relative;
    z-index: 1;
}

/* Top Bar */
.game-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.game-topbar .game-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.game-topbar .game-title {
    color: white;
    font-weight: 700;
    font-size: 1.05rem;
    font-family: 'Poppins', sans-serif;
}

.game-topbar .game-score {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(249, 115, 22, 0.15));
    color: var(--game-accent);
    padding: 5px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.game-topbar .game-timer {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    padding: 5px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.game-lives {
    display: flex;
    gap: 4px;
    align-items: center;
}

.game-lives .heart {
    font-size: 1.1rem;
    transition: all 0.3s;
}

.game-lives .heart.lost {
    filter: grayscale(1);
    opacity: 0.3;
    transform: scale(0.8);
}

.game-exit-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    font-size: 0.8rem;
}

.game-exit-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: white;
}

/* ========== 1v1 VERSUS BAR ========== */
.versus-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 15px 20px;
    flex-shrink: 0;
}

.versus-player {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    padding: 8px 18px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    min-width: 150px;
}

.versus-player .player-avatar {
    font-size: 2rem;
    animation: breathe 2s ease-in-out infinite;
}

@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

.versus-player .player-info {
    display: flex;
    flex-direction: column;
}

.versus-player .player-name {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}

.versus-player .player-score-val {
    color: var(--game-accent);
    font-weight: 700;
    font-size: 1.1rem;
    font-family: 'Orbitron', sans-serif;
}

.versus-player.opponent {
    flex-direction: row-reverse;
    text-align: right;
}

.versus-player.opponent .player-avatar {
    animation: breatheOpp 2.5s ease-in-out infinite;
}

@keyframes breatheOpp {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.05) rotate(-2deg);
    }

    75% {
        transform: scale(0.98) rotate(2deg);
    }
}

.versus-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    animation: pulseVS 2s ease-in-out infinite;
}

@keyframes pulseVS {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* ========== GAME VISUAL AREA ========== */
.game-canvas {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    min-height: 0;
    position: relative;
}

.game-visual {
    width: 100%;
    max-width: 700px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    overflow: hidden;
    position: relative;
}

/* ========== QUESTION PANEL ========== */
.question-panel {
    width: 100%;
    max-width: 700px;
    padding: 12px 0;
}

.question-text {
    text-align: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}

.question-sub {
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
    margin-bottom: 12px;
}

.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.game-option-btn {
    padding: 14px 18px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: white;
    font-size: 1.05rem;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    backdrop-filter: blur(4px);
    position: relative;
    overflow: hidden;
}

.game-option-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.02));
    transition: opacity 0.2s;
    opacity: 0;
}

.game-option-btn:hover::before {
    opacity: 1;
}

.game-option-btn:hover {
    border-color: var(--game-accent);
    transform: scale(1.03);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
}

.game-option-btn .opt-label {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.game-option-btn.correct {
    border-color: var(--game-success) !important;
    background: rgba(16, 185, 129, 0.2) !important;
    animation: correctPulse 0.5s ease;
}

.game-option-btn.correct .opt-label {
    background: var(--game-success);
}

.game-option-btn.wrong {
    border-color: var(--game-danger) !important;
    background: rgba(239, 68, 68, 0.2) !important;
    animation: shake 0.4s ease;
}

.game-option-btn.wrong .opt-label {
    background: var(--game-danger);
}

.game-option-btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}

@keyframes correctPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes shake {

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

    25% {
        transform: translateX(-8px);
    }

    75% {
        transform: translateX(8px);
    }
}

/* ========== COUNTDOWN OVERLAY ========== */
.countdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
}

.countdown-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 8rem;
    font-weight: 900;
    color: white;
    animation: countPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-shadow: 0 0 60px rgba(245, 158, 11, 0.5), 0 0 120px rgba(245, 158, 11, 0.2);
}

.countdown-num.go {
    background: linear-gradient(135deg, #10b981, #22c55e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 6rem;
    text-shadow: none;
    filter: drop-shadow(0 0 40px rgba(16, 185, 129, 0.5));
}

@keyframes countPop {
    0% {
        transform: scale(3);
        opacity: 0;
    }

    60% {
        transform: scale(0.9);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========== TUG OF WAR ========== */
.tow-visual {
    padding: 30px 20px;
    height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tow-ground {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.tow-characters {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.tow-char {
    font-size: 3.5rem;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.tow-char.pulling {
    animation: pullAnim 0.4s ease;
}

@keyframes pullAnim {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

.tow-char.left.pulling {
    animation: pullAnimLeft 0.4s ease;
}

@keyframes pullAnimLeft {
    0% {
        transform: translateX(0) scaleX(-1);
    }

    50% {
        transform: translateX(-10px) scaleX(-1);
    }

    100% {
        transform: translateX(0) scaleX(-1);
    }
}

.tow-rope-container {
    width: 100%;
    position: relative;
    height: 16px;
}

.tow-rope-bg {
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg, #8b4513, #d2691e, #8b4513);
    border-radius: 5px;
    position: absolute;
    top: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tow-flag {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.tow-center-mark {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 3px;
    height: 24px;
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-50%);
    border-radius: 2px;
}

.tow-meter {
    width: 100%;
    height: 14px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tow-meter-fill {
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg, #ef4444, #f59e0b 50%, #10b981);
    border-radius: 7px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.tow-meter-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.tow-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 0.75rem;
}

.tow-labels span:first-child {
    color: var(--game-danger);
}

.tow-labels span:last-child {
    color: var(--game-success);
}

/* ========== POLE CLIMBING ========== */
.pole-visual {
    height: 320px;
    padding: 15px 30px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 60px;
    position: relative;
}

.pole-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}

.pole-column-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.pole-shaft {
    width: 24px;
    height: 250px;
    background: linear-gradient(180deg, #6d4c2a, #8B4513, #A0522D, #D2691E);
    border-radius: 12px;
    position: relative;
    box-shadow: inset -4px 0 8px rgba(0, 0, 0, 0.3), 2px 0 8px rgba(0, 0, 0, 0.2);
}

.pole-char {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.2rem;
    transition: bottom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.4));
}

.pole-top-flag {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem;
    animation: flagWave 1.2s ease-in-out infinite;
}

@keyframes flagWave {

    0%,
    100% {
        transform: translateX(-50%) rotate(-8deg);
    }

    50% {
        transform: translateX(-50%) rotate(8deg);
    }
}

.pole-progress-dots {
    position: absolute;
    inset: 10px 0;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.pole-dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.3s;
}

.pole-dot.reached {
    background: var(--game-accent);
    box-shadow: 0 0 8px var(--game-accent);
    width: 8px;
    height: 8px;
}

/* ========== SACK RACE ========== */
.sack-visual {
    height: 220px;
    padding: 20px;
    position: relative;
}

.sack-tracks {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
}

.sack-track-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sack-track-label {
    width: 60px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
}

.sack-track-lane {
    flex: 1;
    height: 56px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 30px, rgba(255, 255, 255, 0.05) 30px, rgba(255, 255, 255, 0.05) 60px);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.sack-runner-char {
    position: absolute;
    left: 3%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.sack-runner-char.bounce {
    animation: jumpBounce 0.4s ease;
}

@keyframes jumpBounce {
    0% {
        transform: translateY(-50%);
    }

    40% {
        transform: translateY(-90%);
    }

    100% {
        transform: translateY(-50%);
    }
}

.sack-finish-line {
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
}

.sack-progress-bar {
    margin-top: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}

/* ========== RED LIGHT GREEN LIGHT ========== */
.rlgl-visual {
    height: 300px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.rlgl-doll-area {
    text-align: center;
    margin-bottom: 15px;
}

.rlgl-doll-char {
    font-size: 4rem;
    transition: transform 0.5s;
    display: inline-block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.rlgl-doll-char.turned {
    transform: rotate(180deg);
}

.rlgl-light-indicator {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 8px auto;
    transition: all 0.3s;
}

.rlgl-light-indicator.green {
    background: radial-gradient(circle, #22c55e, #16a34a);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.6), 0 0 60px rgba(34, 197, 94, 0.3);
}

.rlgl-light-indicator.red {
    background: radial-gradient(circle, #ef4444, #dc2626);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.6), 0 0 60px rgba(239, 68, 68, 0.3);
}

.rlgl-status-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 6px 0 15px;
    letter-spacing: 2px;
}

.rlgl-status-text.green {
    color: #22c55e;
}

.rlgl-status-text.red {
    color: #ef4444;
    animation: blinkRed 0.5s ease infinite;
}

@keyframes blinkRed {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.rlgl-field {
    width: 100%;
    height: 100px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    position: relative;
}

.rlgl-player-char {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    transition: left 0.4s ease;
    z-index: 2;
}

.rlgl-finish-line {
    position: absolute;
    right: 3%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: repeating-linear-gradient(180deg, #22c55e 0 5px, transparent 5px 10px);
    border-radius: 2px;
}

/* ========== GLASS BRIDGE ========== */
.glass-visual {
    min-height: 260px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(6, 182, 212, 0.05), transparent);
}

.glass-bridge-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 15px;
}

.glass-tile {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    border: 2px solid rgba(6, 182, 212, 0.25);
    background: rgba(6, 182, 212, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    transition: all 0.3s;
    position: relative;
}

.glass-tile.current {
    border-color: var(--game-cyan);
    background: rgba(6, 182, 212, 0.18);
    color: white;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
    animation: glassGlow 1.5s ease-in-out infinite;
}

@keyframes glassGlow {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
    }

    50% {
        box-shadow: 0 0 30px rgba(6, 182, 212, 0.5);
    }
}

.glass-tile.safe {
    background: rgba(16, 185, 129, 0.25);
    border-color: var(--game-success);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.glass-tile.broken {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--game-danger);
    animation: crackGlass 0.5s ease forwards;
}

@keyframes crackGlass {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.1) rotate(5deg);
    }

    100% {
        transform: scale(0.85);
        opacity: 0.4;
    }
}

.glass-player-indicator {
    font-size: 2rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.4));
}

/* ========== MOUNTAIN CLIMBER ========== */
.mountain-visual {
    height: 320px;
    padding: 15px;
    position: relative;
    background: linear-gradient(180deg, #1a1a3e, #2a1850, #3a2a40);
    border-radius: 20px;
    overflow: hidden;
}

.mountain-visual::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.1));
}

.mtn-path {
    position: absolute;
    inset: 10px;
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;
}

.mtn-step {
    border-radius: 6px;
    height: 22px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.15);
    transition: all 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 0.7rem;
}

.mtn-step.reached {
    background: rgba(139, 92, 246, 0.35);
    border-color: var(--game-purple);
    color: rgba(255, 255, 255, 0.6);
}

.mtn-step.current {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.3), rgba(139, 92, 246, 0.3));
    border-color: var(--game-accent);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
    color: white;
}

.mtn-summit-marker {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    z-index: 2;
}

.mtn-climber-pos {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: 1.8rem;
    transition: bottom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 3;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}

/* ========== SPEED RACE ========== */
.race-visual {
    height: 240px;
    padding: 20px;
    position: relative;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
}

.race-tracks-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.race-lane {
    display: flex;
    align-items: center;
    gap: 10px;
}

.race-lane-label {
    width: 70px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.race-lane-label .lane-avatar {
    font-size: 1.3rem;
}

.race-lane-label .lane-name {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 600;
}

.race-lane-track {
    flex: 1;
    height: 60px;
    background: #222;
    border-radius: 8px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.race-lane-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 12px, transparent 12px 24px);
    transform: translateY(-1px);
}

.race-car-char {
    position: absolute;
    left: 3%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    transition: left 0.4s ease-out;
    z-index: 2;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.race-car-char.speed-boost {
    animation: speedLines 0.3s ease;
}

@keyframes speedLines {
    0% {
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    }

    50% {
        filter: drop-shadow(-15px 0 8px rgba(245, 158, 11, 0.4)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    }

    100% {
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    }
}

.race-finish-flag {
    position: absolute;
    right: 2%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: repeating-linear-gradient(180deg, white 0 4px, #333 4px 8px);
    border-radius: 2px;
}

.race-countdown-bar {
    margin-top: 12px;
    text-align: center;
}

/* ========== TARGET PRACTICE ========== */
.target-visual {
    height: 300px;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    background: radial-gradient(ellipse at center, rgba(249, 115, 22, 0.05), transparent);
}

.target-question-display {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 20px;
    border-radius: 10px;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    z-index: 5;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.target-bubble {
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: white;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.2s;
    animation: bobFloat 3s ease-in-out infinite;
    backdrop-filter: blur(4px);
}

.target-bubble:hover {
    transform: scale(1.2) !important;
}

.target-bubble:nth-child(2) {
    animation-delay: -0.7s;
}

.target-bubble:nth-child(3) {
    animation-delay: -1.4s;
}

.target-bubble:nth-child(4) {
    animation-delay: -2.1s;
}

@keyframes bobFloat {

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

    25% {
        transform: translateY(-12px) rotate(3deg);
    }

    75% {
        transform: translateY(8px) rotate(-3deg);
    }
}

.target-bubble.pop {
    animation: popBubble 0.4s ease forwards !important;
}

@keyframes popBubble {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* ========== FRUIT NINJA ========== */
.ninja-visual {
    height: 320px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0a0a1a, #1a0a2e);
    border-radius: 20px;
}

.ninja-question-bar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 24px;
    border-radius: 12px;
    color: var(--game-accent);
    font-weight: 700;
    font-size: 1.1rem;
    z-index: 5;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 158, 11, 0.2);
    white-space: nowrap;
}

.ninja-fruit {
    position: absolute;
    font-size: 3rem;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.15s;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.ninja-fruit:hover {
    transform: scale(1.3) !important;
}

.ninja-fruit-label {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

.ninja-fruit.sliced {
    animation: sliceFruit 0.5s ease forwards !important;
}

@keyframes sliceFruit {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    40% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0.6;
    }

    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

.ninja-slash-trail {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 6px white, 0 0 12px rgba(245, 158, 11, 0.5);
    animation: slashFade 0.3s ease forwards;
}

@keyframes slashFade {
    to {
        opacity: 0;
        transform: scale(0);
    }
}

/* ========== CHAMPIONSHIP ========== */
.champ-visual {
    padding: 25px;
    text-align: center;
}

.champ-stars-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 15px;
}

.champ-star-icon {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.1);
    transition: all 0.4s;
}

.champ-star-icon.earned {
    color: #eab308;
    text-shadow: 0 0 15px rgba(234, 179, 8, 0.5);
    animation: starPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes starPop {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

.champ-streak-display {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.champ-streak-count {
    color: var(--game-accent);
}

.champ-streak-fire {
    color: #ef4444;
    animation: fireFlicker 0.5s ease-in-out infinite;
}

@keyframes fireFlicker {

    0%,
    100% {
        transform: scale(1) rotate(-5deg);
    }

    50% {
        transform: scale(1.15) rotate(5deg);
    }
}

.champ-progress {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    overflow: hidden;
    margin: 15px 0 8px;
}

.champ-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--game-accent), #f97316, #ef4444);
    border-radius: 5px;
    transition: width 0.4s ease;
    position: relative;
}

.champ-progress-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: -2px;
    bottom: -2px;
    width: 14px;
    background: white;
    border-radius: 7px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.champ-q-counter {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

/* ========== SCREEN SHAKE ========== */
.screen-shake {
    animation: screenShake 0.3s ease;
}

@keyframes screenShake {

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

    20% {
        transform: translateX(-5px) rotate(-0.5deg);
    }

    40% {
        transform: translateX(5px) rotate(0.5deg);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

/* Flash overlays */
.flash-correct {
    animation: flashGreen 0.3s ease;
}

@keyframes flashGreen {
    0% {
        box-shadow: inset 0 0 0 0 rgba(16, 185, 129, 0);
    }

    50% {
        box-shadow: inset 0 0 80px 20px rgba(16, 185, 129, 0.15);
    }

    100% {
        box-shadow: inset 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.flash-wrong {
    animation: flashRed 0.3s ease;
}

@keyframes flashRed {
    0% {
        box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0);
    }

    50% {
        box-shadow: inset 0 0 80px 20px rgba(239, 68, 68, 0.15);
    }

    100% {
        box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* ========== RESULT OVERLAY ========== */
.game-result-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.game-result-overlay.active {
    display: flex;
}

.game-result-card {
    background: linear-gradient(180deg, var(--game-surface), #0f0f28);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    max-width: 440px;
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: resultPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resultPop {
    from {
        transform: scale(0.5) rotate(-5deg);
        opacity: 0;
    }

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

.result-emoji {
    font-size: 4.5rem;
    margin-bottom: 12px;
    display: block;
}

.result-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 6px;
    font-family: 'Orbitron', sans-serif;
}

.result-title.win {
    color: var(--game-success);
}

.result-title.lose {
    color: var(--game-danger);
}

.result-stats {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 20px 0;
}

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

.result-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    font-family: 'Orbitron', sans-serif;
}

.result-stat-label {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    margin-top: 2px;
}

.result-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.result-btn {
    padding: 11px 22px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.result-btn.primary {
    background: linear-gradient(135deg, var(--game-accent), #f97316);
    border: none;
    color: white;
}

.result-btn.secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
}

.result-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ========== PARTICLES ========== */
.particle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    animation: particleFly 0.8s ease-out forwards;
}

@keyframes particleFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--px), var(--py)) scale(0);
    }
}

.confetti {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    animation: confettiFall 2.5s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(1080deg) scale(0.5);
    }
}

/* ========== FLOATING SCORE POPUP ========== */
.score-popup {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    animation: scoreFloat 1s ease-out forwards;
}

.score-popup.positive {
    color: var(--game-success);
}

.score-popup.negative {
    color: var(--game-danger);
}

@keyframes scoreFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.7);
    }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .class-grid {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 10px;
    }

    .class-card {
        padding: 18px 10px;
    }

    .class-card .class-num {
        font-size: 1.8rem;
    }

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

    .game-type-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }

    .game-type-card {
        padding: 18px;
    }

    .game-type-card .game-emoji {
        font-size: 2rem;
    }

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

    .question-text {
        font-size: 1.1rem;
    }

    .versus-bar {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .versus-player {
        min-width: 120px;
        padding: 6px 12px;
    }

    .versus-text {
        font-size: 1rem;
    }

    .tow-char {
        font-size: 2.5rem;
    }

    .pole-visual {
        gap: 30px;
    }

    .countdown-num {
        font-size: 5rem;
    }

    .games-hub .page-title h1 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .class-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .game-type-grid {
        grid-template-columns: 1fr 1fr;
    }

    .game-option-btn {
        padding: 12px 14px;
        font-size: 0.9rem;
    }

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

    .versus-player {
        min-width: auto;
    }
}

/* ========== MODE SELECTION OVERLAY ========== */
.mode-select-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    animation: fadeSlide 0.3s ease;
}

.mode-select-card {
    text-align: center;
    max-width: 500px;
    width: 90%;
}

.mode-select-card h2 {
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.mode-select-card p {
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 25px;
    font-size: 0.9rem;
}

.mode-options {
    display: flex;
    gap: 18px;
    justify-content: center;
}

.mode-btn {
    flex: 1;
    max-width: 200px;
    background: var(--game-card);
    border: 2px solid var(--glass-border);
    border-radius: 18px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    color: white;
    font-family: 'Poppins', sans-serif;
}

.mode-btn:hover {
    transform: translateY(-5px);
    border-color: var(--game-accent);
    box-shadow: var(--neon-glow);
}

.mode-btn .mode-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
}

.mode-btn .mode-label {
    font-size: 1.1rem;
    font-weight: 700;
}

.mode-btn .mode-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 5px;
}

.mode-back-btn {
    margin-top: 20px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.mode-back-btn:hover {
    color: white;
    border-color: white;
}

/* ========== NAME ENTRY MODAL ========== */
.name-entry-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    animation: fadeSlide 0.3s ease;
}

.name-entry-card {
    background: var(--game-surface);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 35px;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.name-entry-card h2 {
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.name-input-group {
    margin-bottom: 15px;
    text-align: left;
}

.name-input-group label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.name-input-group input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.name-input-group input:focus {
    border-color: var(--game-accent);
}

.name-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.name-start-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--game-accent), #f97316);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    margin-top: 10px;
    transition: all 0.2s;
}

.name-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
}

/* ========== PASS DEVICE SCREEN ========== */
.pass-device-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    animation: fadeSlide 0.3s ease;
}

.pass-device-overlay .pass-emoji {
    font-size: 5rem;
    margin-bottom: 15px;
    animation: float 2s ease-in-out infinite;
}

.pass-device-overlay .pass-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.pass-device-overlay .pass-sub {
    color: var(--game-accent);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 25px;
}

.pass-ready-btn {
    padding: 14px 40px;
    background: linear-gradient(135deg, var(--game-accent), #f97316);
    border: none;
    border-radius: 14px;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    animation: pulseVS 2s ease-in-out infinite;
    transition: all 0.2s;
}

.pass-ready-btn:hover {
    transform: scale(1.05);
}

/* ========== TURN INDICATOR ========== */
.turn-indicator {
    text-align: center;
    padding: 6px 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.turn-indicator.p1 {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-bottom: 2px solid rgba(59, 130, 246, 0.3);
}

.turn-indicator.p2 {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
    border-bottom: 2px solid rgba(236, 72, 153, 0.3);
}

/* ========== H2H RESULT ========== */
.h2h-result-card {
    display: flex;
    gap: 15px;
    margin: 15px 0;
    justify-content: center;
}

.h2h-player-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 15px 20px;
    text-align: center;
    min-width: 130px;
}

.h2h-player-box.winner {
    border-color: var(--game-accent);
    background: rgba(245, 158, 11, 0.08);
}

.h2h-player-box .h2h-name {
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.h2h-player-box .h2h-score {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--game-accent);
}

.h2h-player-box .h2h-detail {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    margin-top: 4px;
}

/* ========== AI LOADING OVERLAY ========== */
.ai-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    gap: 15px;
}

.ai-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(245, 158, 11, 0.2);
    border-top-color: var(--game-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.ai-loading-overlay .ai-text {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}

.ai-loading-overlay .ai-sub {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}

/* ==========================================================
   PREMIUM VISUAL ENHANCEMENTS (Glows, Gradients, Floating)
   ========================================================== */

/* Animated Gradient Background for Game Cards */
.game-type-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.game-type-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(245, 158, 11, 0.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.game-type-card:hover::after {
    opacity: 1;
}

/* Enhanced Neon Glow for Active Elements */
.game-option-btn.correct,
.glass-tile.safe {
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.5), inset 0 0 10px rgba(16, 185, 129, 0.3);
    border-color: #34d399 !important;
}

.game-option-btn.wrong,
.glass-tile.broken {
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.5), inset 0 0 10px rgba(239, 68, 68, 0.3);
    border-color: #f87171 !important;
}

/* Floating Animation for Game Container */
.game-visual {
    animation: gentleFloat 6s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@keyframes gentleFloat {

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

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

/* ==========================================================
   CYBER PRO THEME (Sleek, Professional)
   ========================================================== */

/* 1. Refined Progress Bars (Cyan/Blue - No Rainbows) */
.tow-meter-fill,
.champ-progress-fill,
.timer-bar-fill {
    background: linear-gradient(90deg, #06b6d4, #3b82f6) !important;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.timer-bar-container {
    background: rgba(15, 23, 42, 0.6) !important;
    height: 4px !important;
}

/* 2. Deep Glassmorphism (High-End HUD Look) */
.game-result-card,
.question-panel,
.versus-bar {
    backdrop-filter: blur(24px) !important;
    background: rgba(15, 23, 42, 0.85) !important;
    /* Deep Navy */
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    border-radius: 20px !important;
}

/* 3. Typography Polish */
.game-type-card h3,
.game-title,
.result-title {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.result-title {
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

/* 4. Game Visual Frame */
.game-visual {
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.8) 100%);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
    border-radius: 16px;
}

/* 5. Button Refinement */
.game-option-btn {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.game-option-btn:hover {
    background: rgba(51, 65, 85, 0.8) !important;
    border-color: #38bdf8 !important;
    /* Sky Blue */
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.15) !important;
}

/* ==========================================================
   EFFECTS & ANIMATIONS (Particles, Confetti, Popups, Shake)
   ========================================================== */

/* ========== PARTICLES ========== */
.particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: particleBurst 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes particleBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(var(--px, 50px), var(--py, -50px)) scale(0);
    }
}

/* ========== CONFETTI ========== */
.confetti {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    animation: confettiFall 3s cubic-bezier(0.15, 0.6, 0.35, 1) forwards;
    box-shadow: 0 0 6px currentColor;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }

    25% {
        opacity: 1;
        transform: translateY(25vh) rotate(180deg) translateX(-30px) scale(1.1);
    }

    50% {
        opacity: 0.9;
        transform: translateY(50vh) rotate(360deg) translateX(20px) scale(0.9);
    }

    75% {
        opacity: 0.6;
        transform: translateY(75vh) rotate(540deg) translateX(-15px) scale(0.7);
    }

    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) translateX(10px) scale(0.3);
    }
}

/* ========== SCORE POPUP ========== */
.score-popup {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    animation: scoreFloat 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.score-popup.positive {
    color: #22c55e;
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.6), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.score-popup.negative {
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.6), 0 2px 10px rgba(0, 0, 0, 0.5);
}

@keyframes scoreFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translateY(-15px) scale(1.3);
    }

    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.8);
    }
}

/* ========== SCREEN SHAKE ========== */
.screen-shake {
    animation: screenShakeAnim 0.3s ease !important;
}

@keyframes screenShakeAnim {

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

    10% {
        transform: translateX(-6px) translateY(-3px);
    }

    20% {
        transform: translateX(6px) translateY(2px);
    }

    30% {
        transform: translateX(-5px) translateY(-2px);
    }

    40% {
        transform: translateX(5px) translateY(3px);
    }

    50% {
        transform: translateX(-4px) translateY(-1px);
    }

    60% {
        transform: translateX(4px) translateY(1px);
    }

    70% {
        transform: translateX(-3px) translateY(-2px);
    }

    80% {
        transform: translateX(3px) translateY(1px);
    }

    90% {
        transform: translateX(-2px) translateY(-1px);
    }
}

/* ========== SCREEN FLASH ========== */
.game-visual.flash-correct {
    animation: flashGreen 0.4s ease;
}

.game-visual.flash-wrong {
    animation: flashRed 0.4s ease;
}

@keyframes flashGreen {
    0% {
        box-shadow: inset 0 0 0 rgba(16, 185, 129, 0);
    }

    30% {
        box-shadow: inset 0 0 80px rgba(16, 185, 129, 0.35), 0 0 40px rgba(16, 185, 129, 0.2);
    }

    100% {
        box-shadow: inset 0 0 0 rgba(16, 185, 129, 0);
    }
}

@keyframes flashRed {
    0% {
        box-shadow: inset 0 0 0 rgba(239, 68, 68, 0);
    }

    30% {
        box-shadow: inset 0 0 80px rgba(239, 68, 68, 0.35), 0 0 40px rgba(239, 68, 68, 0.2);
    }

    100% {
        box-shadow: inset 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* ========== SPEED BOOST (Race Car) ========== */
.speed-boost {
    animation: speedBoostAnim 0.3s ease !important;
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.8)) !important;
}

@keyframes speedBoostAnim {
    0% {
        transform: translateY(-50%) scale(1);
    }

    40% {
        transform: translateY(-50%) scale(1.4) rotate(-3deg);
    }

    100% {
        transform: translateY(-50%) scale(1);
    }
}

/* ========== HEART LOST ========== */
.heart.lost {
    filter: grayscale(1) opacity(0.3);
    animation: heartBreak 0.5s ease forwards;
}

@keyframes heartBreak {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(0.6);
    }

    100% {
        transform: scale(0.8);
        filter: grayscale(1) opacity(0.3);
    }
}

/* ========== CHARACTER IDLE ANIMATIONS ========== */

/* Pole Climbing — idle sway for both climbers */
.pole-char {
    animation: climbIdle 2s ease-in-out infinite;
}

@keyframes climbIdle {

    0%,
    100% {
        transform: translateX(-50%) rotate(0deg);
    }

    25% {
        transform: translateX(-50%) rotate(-3deg) translateY(-2px);
    }

    75% {
        transform: translateX(-50%) rotate(3deg) translateY(-2px);
    }
}

/* Sack Race — idle hop for runners */
.sack-runner-char {
    animation: runnerIdle 1.2s ease-in-out infinite;
}

@keyframes runnerIdle {

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

    50% {
        transform: translateY(-56%);
    }
}

/* Race Car — idle engine rumble */
.race-car-char {
    animation: carIdle 0.3s ease-in-out infinite alternate;
}

@keyframes carIdle {
    0% {
        transform: translateY(-50%) translateX(0);
    }

    100% {
        transform: translateY(-50%) translateX(1px) rotate(0.5deg);
    }
}

/* RLGL Player — idle breathing */
.rlgl-player-char {
    animation: rlglIdle 2s ease-in-out infinite;
}

@keyframes rlglIdle {

    0%,
    100% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-55%) scale(1.05);
    }
}

/* Mountain Climber — idle sway */
.mtn-climber-pos {
    animation: mtnIdle 2.5s ease-in-out infinite;
}

@keyframes mtnIdle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(-2deg) translateY(-3px);
    }

    70% {
        transform: rotate(2deg) translateY(-3px);
    }
}

/* Championship — star earned animation */
.champ-star-icon.earned {
    color: #f59e0b !important;
    animation: starEarn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.6));
}

@keyframes starEarn {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.4) rotate(15deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Championship — fire icon pulse */
.champ-streak-fire {
    animation: firePulse 0.8s ease-in-out infinite;
}

@keyframes firePulse {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.2);
        filter: brightness(1.3);
    }
}

/* Championship — progress fill glow */
.champ-progress-fill {
    background: linear-gradient(90deg, var(--game-accent), #ef4444, var(--game-pink)) !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== TARGET PRACTICE BUBBLES ========== */
.target-bubble {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    animation: bubbleFloat 3s ease-in-out infinite;
    text-align: center;
    padding: 5px;
    word-break: break-word;
    line-height: 1.2;
}

.target-bubble:hover {
    transform: scale(1.15);
    border-color: white;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
}

.target-bubble.pop {
    animation: bubblePop 0.4s ease forwards !important;
    pointer-events: none;
}

@keyframes bubbleFloat {

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

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

@keyframes bubblePop {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    40% {
        transform: scale(1.3);
        opacity: 0.8;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* ========== FRUIT NINJA FRUITS ========== */
.ninja-fruit {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    animation: fruitBob 2s ease-in-out infinite;
}

.ninja-fruit:hover {
    transform: scale(1.2) !important;
    filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.6));
}

.ninja-fruit-label {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
}

.ninja-fruit.sliced {
    animation: fruitSlice 0.5s ease forwards !important;
    pointer-events: none;
}

@keyframes fruitBob {

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

    25% {
        transform: translateY(-6px) rotate(-3deg);
    }

    75% {
        transform: translateY(-6px) rotate(3deg);
    }
}

@keyframes fruitSlice {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    40% {
        transform: scale(1.2) rotate(20deg);
        opacity: 0.8;
    }

    100% {
        transform: scale(0) rotate(90deg) translateY(40px);
        opacity: 0;
    }
}

/* ========== ENHANCED RACE VISUALS ========== */
.race-car-char,
#raceOppCar {
    transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Trail effect behind moving car */
.race-lane-track {
    position: relative;
    overflow: hidden;
}

.race-lane-track::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: repeating-linear-gradient(90deg,
            transparent 0px, transparent 40px,
            rgba(255, 255, 255, 0.03) 40px, rgba(255, 255, 255, 0.03) 42px);
    animation: trackScroll 2s linear infinite;
}

@keyframes trackScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-42px);
    }
}

/* ========== TUG OF WAR ENHANCED ========== */
.tow-char {
    animation: towIdle 1.5s ease-in-out infinite;
}

@keyframes towIdle {

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

    50% {
        transform: translateX(-3px);
    }
}

.tow-char.left {
    animation: towIdleLeft 1.5s ease-in-out infinite;
}

@keyframes towIdleLeft {

    0%,
    100% {
        transform: scaleX(-1) translateX(0);
    }

    50% {
        transform: scaleX(-1) translateX(3px);
    }
}

/* Rope tension glow */
.tow-rope-bg {
    animation: ropeGlow 2s ease-in-out infinite;
}

@keyframes ropeGlow {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    50% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(245, 158, 11, 0.2);
    }
}

/* ========== NEON GLOW FOR GAME ARENA ========== */
.game-arena.active {
    background: radial-gradient(ellipse at 50% 30%, rgba(139, 92, 246, 0.08), transparent 60%),
        linear-gradient(135deg, #0a0a1a 0%, #12122a 50%, #0a0a1a 100%);
}

/* ========== RESULT OVERLAY ENHANCED ========== */
.game-result-overlay.active .game-result-card {
    animation: resultSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resultSlideIn {
    0% {
        transform: translateY(80px) scale(0.8);
        opacity: 0;
    }

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

.result-emoji {
    animation: emojiPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
}

@keyframes emojiPop {
    0% {
        transform: scale(0) rotate(-30deg);
    }

    60% {
        transform: scale(1.2) rotate(10deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.result-title.win {
    background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 2s ease-in-out infinite;
}

@keyframes goldShimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ========== GLASS BRIDGE PLAYER STEP ANIMATION ========== */
.glass-tile.safe::after {
    content: '✓';
    position: absolute;
    color: #22c55e;
    font-size: 1.2rem;
    font-weight: 900;
    animation: checkAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkAppear {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

.glass-tile.broken::after {
    content: '✕';
    position: absolute;
    color: #ef4444;
    font-size: 1.2rem;
    font-weight: 900;
    animation: xAppear 0.4s ease;
}

@keyframes xAppear {
    0% {
        transform: scale(0) rotate(-90deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ========== RLGL DOLL ENHANCED ========== */
.rlgl-doll-char.turned {
    transform: scaleX(-1);
    filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.5));
}

/* ========== MOUNTAIN STEP REACH ANIMATION ========== */
.mtn-step.reached {
    animation: stepReach 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes stepReach {
    0% {
        transform: scaleX(0.8);
        opacity: 0.5;
    }

    60% {
        transform: scaleX(1.05);
    }

    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* ==========================================================
   CLASS ACTIVITY ENGAGEMENT (Timer Bar, Juicy Buttons)
   ========================================================== */

/* Global Game Progress Bar */
.timer-bar-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.timer-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #ec4899, #8b5cf6, #3b82f6);
    background-size: 200% 100%;
    animation: rainbowFlow 2s linear infinite;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

/* Juicy Button Interaction */
.game-option-btn:active {
    transform: scale(0.96) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.game-option-btn {
    position: relative;
    overflow: hidden;
}

/* Ripple Effect */
.game-option-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    pointer-events: none;
}

.game-option-btn:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: 0s;
}

/* ==========================================================
   ULTRA-PREMIUM ENTRANCE ANIMATIONS
   ========================================================== */

#bgParticles {
    filter: blur(1px);
}

.question-panel {
    animation: slideInUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

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

/* Neon Timer Bar */
.timer-bar-fill {
    box-shadow: 0 0 15px currentColor, 0 0 30px currentColor;
}

/* Button Entrance */
.options-grid button {
    opacity: 0;
    animation: fadeInScale 0.4s ease forwards;
}

.options-grid button:nth-child(1) {
    animation-delay: 0.1s;
}

.options-grid button:nth-child(2) {
    animation-delay: 0.15s;
}

.options-grid button:nth-child(3) {
    animation-delay: 0.2s;
}

.options-grid button:nth-child(4) {
    animation-delay: 0.25s;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}