/*
Theme Name: JrTimer
Description: Professional Rubik's Cube Timer with Premium Visuals
Version: 2.0.2
*/

/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
    --cube-white: #ffffff;
    --cube-yellow: #ffd500;
    --cube-red: #c41e3a;
    --cube-orange: #ff5800;
    --cube-blue: #0051ba;
    --cube-green: #009e60;
    --primary: #137fec;
}

/* Cube Visualization Sticker Colors */
.c-w {
    background-color: #ffffff !important;
}

.c-y {
    background-color: #fbbf24 !important;
}

.c-g {
    background-color: #22c55e !important;
}

.c-b {
    background-color: #3b82f6 !important;
}

.c-r {
    background-color: #ef4444 !important;
}

.c-o {
    background-color: #f97316 !important;
}

/* Cube Face Grid for Visualization */
.cube-face-viz {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    background-color: #1e293b;
    border: 1px solid #1e293b;
}

.cube-sticker-viz {
    width: 100%;
    height: 100%;
}

/* ===== 3D RUBIK'S CUBE ANIMATION ===== */
.rubiks-cube {
    width: 100%;
    height: 100%;
    perspective: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cube-3d {
    position: relative;
    width: 30px;
    height: 30px;
    transform-style: preserve-3d;
    animation: rotateCube 8s infinite linear;
}

@media (min-width: 640px) {
    .cube-3d {
        width: 40px;
        height: 40px;
    }
}

.cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.cube-sticker {
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.cube-face.front .cube-sticker {
    background: linear-gradient(135deg, #1dd67a 0%, var(--cube-green) 100%) !important;
}

.cube-face.back .cube-sticker {
    background: linear-gradient(135deg, #2a79ff 0%, var(--cube-blue) 100%) !important;
}

.cube-face.right .cube-sticker {
    background: linear-gradient(135deg, #e23a4f 0%, var(--cube-red) 100%) !important;
}

.cube-face.left .cube-sticker {
    background: linear-gradient(135deg, #ff7a2a 0%, var(--cube-orange) 100%) !important;
}

.cube-face.top .cube-sticker {
    background: linear-gradient(135deg, #ffffff 0%, #eaeaea 100%) !important;
}

.cube-face.bottom .cube-sticker {
    background: linear-gradient(135deg, #ffe76b 0%, var(--cube-yellow) 100%) !important;
}

.cube-face.front {
    transform: rotateY(0deg) translateZ(15px);
}

.cube-face.back {
    transform: rotateY(180deg) translateZ(15px);
}

.cube-face.right {
    transform: rotateY(90deg) translateZ(15px);
}

.cube-face.left {
    transform: rotateY(-90deg) translateZ(15px);
}

.cube-face.top {
    transform: rotateX(90deg) translateZ(15px);
}

.cube-face.bottom {
    transform: rotateX(-90deg) translateZ(15px);
}

@media (min-width: 640px) {
    .cube-face.front {
        transform: rotateY(0deg) translateZ(20px);
    }

    .cube-face.back {
        transform: rotateY(180deg) translateZ(20px);
    }

    .cube-face.right {
        transform: rotateY(90deg) translateZ(20px);
    }

    .cube-face.left {
        transform: rotateY(-90deg) translateZ(20px);
    }

    .cube-face.top {
        transform: rotateX(90deg) translateZ(20px);
    }

    .cube-face.bottom {
        transform: rotateX(-90deg) translateZ(20px);
    }
}

@keyframes rotateCube {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    25% {
        transform: rotateX(90deg) rotateY(90deg);
    }

    50% {
        transform: rotateX(180deg) rotateY(180deg);
    }

    75% {
        transform: rotateX(270deg) rotateY(270deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* ===== ULTRA BREATHING GRADIENT ANIMATION ===== */
/* Theme Styles - Ultra Beautiful Gradient Breathing Light Themes */
.theme-sakura {
    background: linear-gradient(135deg,
            #ff9a9e 0%, #fecfef 8%, #fad0c4 16%, #ffd1ff 24%,
            #ffb7d5 32%, #c2e9fb 40%, #a8edea 48%, #ff758c 56%,
            #ff7eb3 64%, #fa709a 72%, #fee140 80%, #ff6b9d 88%,
            #c44569 96%, #ff9a9e 100%);
    background-size: 600% 600%;
    animation: ultraBreathingGradient 80s ease-in-out infinite;
    animation-play-state: running !important;
    animation-fill-mode: both !important;
    will-change: background-position, filter, transform !important;
}

.theme-ocean {
    background: linear-gradient(135deg,
            #667eea 0%, #764ba2 7%, #89f7fe 14%, #66a6ff 21%,
            #4facfe 28%, #00f2fe 35%, #43e97b 42%, #38f9d7 49%,
            #7bed9f 56%, #70a1ff 63%, #5352ed 70%, #2ebf91 77%,
            #1abc9c 84%, #3498db 91%, #667eea 100%);
    background-size: 600% 600%;
    animation: ultraBreathingGradient 90s ease-in-out infinite;
    animation-play-state: running !important;
    animation-fill-mode: both !important;
    will-change: background-position, filter, transform !important;
}

.theme-sunset {
    background: linear-gradient(135deg,
            #ff9472 0%, #f2709c 8%, #ff8a80 16%, #ff7043 24%,
            #ffb74d 32%, #ff8a65 40%, #ee5a24 48%, #fd79a8 56%,
            #fdcb6e 64%, #e17055 72%, #ff6b6b 80%, #4ecdc4 88%,
            #45b7d1 96%, #ff9472 100%);
    background-size: 600% 600%;
    animation: ultraBreathingGradient 75s ease-in-out infinite;
    animation-play-state: running !important;
    animation-fill-mode: both !important;
    will-change: background-position, filter, transform !important;
}

.theme-lavender {
    background: linear-gradient(135deg,
            #a8edea 0%, #fed6e3 8%, #d299c2 16%, #fef9d7 24%,
            #dda0dd 32%, #e6e6fa 40%, #b19cd9 48%, #c7ecee 56%,
            #dda0dd 64%, #f093fb 72%, #f5576c 80%, #4facfe 88%,
            #00f2fe 96%, #a8edea 100%);
    background-size: 600% 600%;
    animation: ultraBreathingGradient 95s ease-in-out infinite;
    animation-play-state: running !important;
    animation-fill-mode: both !important;
    will-change: background-position, filter, transform !important;
}

.theme-mint {
    background: linear-gradient(135deg,
            #96fbc4 0%, #f9f047 8%, #43e97b 16%, #38f9d7 24%,
            #7bed9f 32%, #70a1ff 40%, #5352ed 48%, #2ebf91 56%,
            #1abc9c 64%, #16a085 72%, #27ae60 80%, #2ecc71 88%,
            #55efc4 96%, #96fbc4 100%);
    background-size: 600% 600%;
    animation: ultraBreathingGradient 70s ease-in-out infinite;
    animation-play-state: running !important;
    animation-fill-mode: both !important;
    will-change: background-position, filter, transform !important;
}

.theme-fire {
    background: linear-gradient(135deg,
            #ff6b6b 0%, #ee5a24 7%, #ff9ff3 14%, #ff6348 21%,
            #ff4757 28%, #ff3838 35%, #ff5722 42%, #e74c3c 49%,
            #c0392b 56%, #a0522d 63%, #d63031 70%, #e17055 77%,
            #fd79a8 84%, #fdcb6e 91%, #ff6b6b 100%);
    background-size: 700% 700%;
    animation: ultraBreathingGradient 60s ease-in-out infinite;
    animation-play-state: running !important;
    animation-fill-mode: both !important;
    will-change: background-position, filter, transform !important;
}

.theme-ice {
    background: linear-gradient(135deg,
            #74b9ff 0%, #0984e3 8%, #00cec9 16%, #81ecec 24%,
            #a8e6cf 32%, #88d8c0 40%, #7fcdcd 48%, #6c5ce7 56%,
            #a29bfe 64%, #6c5ce7 72%, #74b9ff 80%, #0984e3 88%,
            #00cec9 96%, #74b9ff 100%);
    background-size: 600% 600%;
    animation: ultraBreathingGradient 85s ease-in-out infinite;
    animation-play-state: running !important;
    animation-fill-mode: both !important;
    will-change: background-position, filter, transform !important;
}

.theme-midnight {
    background: linear-gradient(135deg,
            #0c0c0c 0%, #1a1a2e 5%, #16213e 10%, #0f3460 15%,
            #533483 20%, #7209b7 25%, #2d1b69 30%, #11998e 35%,
            #38ef7d 40%, #667eea 45%, #764ba2 50%, #f093fb 55%,
            #f5576c 60%, #4facfe 65%, #00f2fe 70%, #43e97b 75%,
            #38f9d7 80%, #7bed9f 85%, #70a1ff 90%, #5352ed 95%,
            #0c0c0c 100%);
    background-size: 1200% 1200%;
    animation: ultraBreathingGradient 180s ease-in-out infinite;
    animation-play-state: running !important;
    animation-fill-mode: both !important;
    will-change: background-position, filter, transform !important;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.theme-midnight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(3px 3px at 15px 25px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 45px 65px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 85px 35px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 125px 75px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 155px 25px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 185px 55px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 25px 85px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 65px 15px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 105px 95px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 145px 45px, rgba(255, 255, 255, 0.9), transparent);
    background-repeat: repeat;
    background-size: 200px 120px;
    animation: twinkle 12s ease-in-out infinite;
    animation-play-state: running !important;
    will-change: opacity, transform, filter !important;
    pointer-events: none;
}

.theme-midnight::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(123, 97, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 107, 107, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 20%, rgba(67, 233, 123, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 80%, rgba(116, 185, 255, 0.13) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 40%, rgba(240, 147, 251, 0.11) 0%, transparent 50%);
    animation: nebula 25s ease-in-out infinite;
    animation-play-state: running !important;
    will-change: opacity, transform, filter !important;
    pointer-events: none;
}

@keyframes twinkle {
    0% {
        opacity: 0.3;
        transform: scale(0.8) rotate(0deg);
        filter: brightness(0.8);
    }

    12.5% {
        opacity: 0.6;
        transform: scale(1.1) rotate(45deg);
        filter: brightness(1.1);
    }

    25% {
        opacity: 0.9;
        transform: scale(1.3) rotate(90deg);
        filter: brightness(1.3);
    }

    37.5% {
        opacity: 0.7;
        transform: scale(1.0) rotate(135deg);
        filter: brightness(1.0);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.9) rotate(180deg);
        filter: brightness(0.9);
    }

    62.5% {
        opacity: 0.8;
        transform: scale(1.2) rotate(225deg);
        filter: brightness(1.2);
    }

    75% {
        opacity: 1.0;
        transform: scale(1.4) rotate(270deg);
        filter: brightness(1.4);
    }

    87.5% {
        opacity: 0.6;
        transform: scale(1.0) rotate(315deg);
        filter: brightness(1.0);
    }

    100% {
        opacity: 0.3;
        transform: scale(0.8) rotate(360deg);
        filter: brightness(0.8);
    }
}

@keyframes nebula {
    0% {
        opacity: 0.2;
        transform: scale(0.9) rotate(0deg);
        filter: hue-rotate(0deg) brightness(0.9);
    }

    16.67% {
        opacity: 0.4;
        transform: scale(1.05) rotate(60deg);
        filter: hue-rotate(60deg) brightness(1.1);
    }

    33.33% {
        opacity: 0.7;
        transform: scale(1.2) rotate(120deg);
        filter: hue-rotate(120deg) brightness(1.3);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.1) rotate(180deg);
        filter: hue-rotate(180deg) brightness(1.0);
    }

    66.67% {
        opacity: 0.8;
        transform: scale(1.3) rotate(240deg);
        filter: hue-rotate(240deg) brightness(1.4);
    }

    83.33% {
        opacity: 0.4;
        transform: scale(1.0) rotate(300deg);
        filter: hue-rotate(300deg) brightness(1.1);
    }

    100% {
        opacity: 0.2;
        transform: scale(0.9) rotate(360deg);
        filter: hue-rotate(360deg) brightness(0.9);
    }
}

.theme-neon {
    background: linear-gradient(135deg,
            #ff006e 0%, #8338ec 7%, #3a86ff 14%, #06ffa5 21%,
            #ffbe0b 28%, #fb5607 35%, #ff006e 42%, #8338ec 49%,
            #3a86ff 56%, #06ffa5 63%, #ffbe0b 70%, #fb5607 77%,
            #ff006e 84%, #8338ec 91%, #ff006e 100%);
    background-size: 800% 800%;
    animation: ultraBreathingGradient 50s ease-in-out infinite;
    animation-play-state: running !important;
    animation-fill-mode: both !important;
    will-change: background-position, filter, transform !important;
}

@keyframes ultraBreathingGradient {
    0% {
        background-position: 0% 50%;
        filter: brightness(0.98) saturate(0.98);
        transform: scale(1);
    }

    25% {
        background-position: 50% 25%;
        filter: brightness(1.01) saturate(1.01);
        transform: scale(1.001);
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1.02) saturate(1.02);
        transform: scale(1.002);
    }

    75% {
        background-position: 50% 75%;
        filter: brightness(1.01) saturate(1.01);
        transform: scale(1.001);
    }

    100% {
        background-position: 0% 50%;
        filter: brightness(0.98) saturate(0.98);
        transform: scale(1);
    }
}

/* Default body background when no theme is selected */
body {
    background-color: #f0f4f8;
}

.dark body,
body.dark {
    background-color: #101922;
}

/* ===== PREMIUM DESIGN PORT FROM SOURCE ===== */

/* 1. Timer Display - Exact Replica */
.timer-display {
    font-family: 'JetBrains Mono', monospace;
    color: #000000 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 20%, #f1f5f9 40%, #e2e8f0 60%, #cbd5e1 80%, #94a3b8 100%);
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    padding: 20px 40px;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.05);
    font-weight: 900;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    /* Ensure it behaves well in flex container */
    display: inline-block;
}

.timer-display::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 50%, rgba(241, 245, 249, 0.9) 100%);
    border-radius: 24px;
    z-index: -1;
    filter: blur(1px);
}

/* 2. Glassmorphism Panels */
.glass-morphism {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(30px) saturate(200%);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.dark .glass-morphism,
.glass-morphism-dark {
    background: rgba(30, 41, 59, 0.7);
    /* Darker for dark mode readability */
    backdrop-filter: blur(30px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* 3. Text Enhancements for Glassmorphism */
.glass-morphism .text-slate-900,
.glass-morphism .text-slate-700,
.glass-morphism .text-slate-600,
.glass-morphism .text-slate-500,
.glass-morphism h1,
.glass-morphism h2,
.glass-morphism h3,
.glass-morphism span {
    text-shadow:
        0 1px 3px rgba(255, 255, 255, 0.95),
        0 2px 6px rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.7));
}

.dark .glass-morphism .text-white,
.dark .glass-morphism .text-slate-200,
.dark .glass-morphism .text-slate-300,
.dark .glass-morphism .text-slate-400 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    filter: none;
    /* Reset filter for dark mode */
}

/* 4. Advanced Buttons */
.advanced-button {
    transition: all 0.3s ease;
    border: none !important;
    /* Override default borders if needed */
}

.advanced-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* 5. Timer States - csTimer Style Overrides */
.timer-holding {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 50%, #fca5a5 100%) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #b91c1c !important;
    box-shadow:
        0 8px 32px rgba(239, 68, 68, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(239, 68, 68, 0.1) !important;
}

.timer-ready {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 50%, #86efac 100%) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #166534 !important;
    box-shadow:
        0 8px 32px rgba(34, 197, 94, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(34, 197, 94, 0.1) !important;
}

.timer-running {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #1e40af !important;
    box-shadow:
        0 8px 32px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(59, 130, 246, 0.1) !important;
}

.timer-inspection {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #92400e !important;
    box-shadow:
        0 8px 32px rgba(245, 158, 11, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(245, 158, 11, 0.1) !important;
}

/* Theme Preview Cards (Settings Page) */
.theme-sakura.h-20,
.theme-ocean.h-20,
.theme-sunset.h-20,
.theme-lavender.h-20,
.theme-mint.h-20,
.theme-fire.h-20,
.theme-ice.h-20,
.theme-midnight.h-20,
.theme-neon.h-20 {
    min-height: auto !important;
}

/* Prevent scroll issues */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* =========================================
   3D CUBE & SCRAMBLE VISUALIZATION STYLES
   ========================================= */

/* Shared Styles */
.cube-face {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 1px;
    padding: 2px;
    background: #1e293b;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.cube-sticker {
    width: 100%;
    height: 100%;
    border-radius: 1px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    min-height: 2px;
    /* Ensure visibility even if empty */
}

/* Color Classes for Scramble Viz */
.c-w {
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%) !important;
}

.c-y {
    background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%) !important;
}

.c-g {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
}

.c-b {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
}

.c-r {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
}

.c-o {
    background: linear-gradient(135deg, #f97316 0%, #c2410c 100%) !important;
}

/* 3D Header Cube Only */
.rubiks-cube {
    width: 100%;
    height: 100%;
    perspective: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cube-3d {
    position: relative;
    width: 30px !important;
    /* Force size logic */
    height: 30px !important;
    transform-style: preserve-3d;
    animation: rotateCube 12s infinite linear;
}

@media (min-width: 640px) {
    .cube-3d {
        width: 40px !important;
        height: 40px !important;
    }
}

.cube-3d .cube-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    background: #000;
    gap: 1px;
    padding: 1px;
}

/* 3D Face Transforms & Colors */
.cube-face.front {
    transform: rotateY(0deg) translateZ(15px);
}

.cube-face.back {
    transform: rotateY(180deg) translateZ(15px);
}

.cube-face.right {
    transform: rotateY(90deg) translateZ(15px);
}

.cube-face.left {
    transform: rotateY(-90deg) translateZ(15px);
}

.cube-face.top {
    transform: rotateX(90deg) translateZ(15px);
}

.cube-face.bottom {
    transform: rotateX(-90deg) translateZ(15px);
}

@media (min-width: 640px) {
    .cube-face.front {
        transform: rotateY(0deg) translateZ(20px);
    }

    .cube-face.back {
        transform: rotateY(180deg) translateZ(20px);
    }

    .cube-face.right {
        transform: rotateY(90deg) translateZ(20px);
    }

    .cube-face.left {
        transform: rotateY(-90deg) translateZ(20px);
    }

    .cube-face.top {
        transform: rotateX(90deg) translateZ(20px);
    }

    .cube-face.bottom {
        transform: rotateX(-90deg) translateZ(20px);
    }
}

.cube-face.front .cube-sticker {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}

.cube-face.back .cube-sticker {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.cube-face.right .cube-sticker {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

.cube-face.left .cube-sticker {
    background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
}

.cube-face.top .cube-sticker {
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
}

.cube-face.bottom .cube-sticker {
    background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%);
}

@keyframes rotateCube {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    25% {
        transform: rotateX(90deg) rotateY(90deg);
    }

    50% {
        transform: rotateX(180deg) rotateY(180deg);
    }

    75% {
        transform: rotateX(270deg) rotateY(270deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* ========================================
   Scramble Visualization (2D Net)
   ======================================== */

/* Container for cube visualization */
#cube-visualization {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Changed from center to allow margin-left offset */
}

/* Individual face grid */
#cube-visualization .cube-face {
    display: grid;
    gap: 1px;
    padding: 0;
    background: transparent;
    flex-shrink: 0;
    /* Prevent faces from shrinking */
}

/* Individual sticker */
#cube-visualization .cube-sticker {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Sticker Color Classes */
.c-w {
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%) !important;
}

.c-y {
    background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%) !important;
}

.c-g {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
}

.c-b {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
}

.c-r {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
}

.c-o {
    background: linear-gradient(135deg, #f97316 0%, #c2410c 100%) !important;
}

/* Timer Solving State (Smaller Font) */
.timer-display .timer-solving {
    font-size: 15vw !important;
}

@media (min-width: 640px) {
    .timer-display .timer-solving {
        font-size: 80px !important;
    }
}

@media (min-width: 1024px) {
    .timer-display .timer-solving {
        font-size: 100px !important;
    }
}

/* ===== SOURCE PROTECTION: DISABLE SELECTION ===== */
body {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
input, textarea, [contenteditable="true"] {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
}