/* ═══════════════════════════════════════════════════════════
   🎨 Nut Sort Master v7.0 - CSS الحديث المتطور
   ═══════════════════════════════════════════════════════════
   ✨ CSS Custom Properties الديناميكية
   ✨ Container Queries
   ✨ :has() و :is() و :where()
   ✨ CSS Nesting
   ✨ Logical Properties
   ✨ clamp() للتجاوب الذكي
   ✨ @layer للتنظيم
   ✨ color-mix() للألوان الذكية
   ✨ View Transitions API
   ✨ @property للحركات المتقدمة
   ✨ Scroll-driven Animations
   ✨ Backdrop Filter المتطور
   ✨ Container Queries
   ✨ Subgrid
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ Layer System ═══════════ */
@layer reset, tokens, base, themes, background, components, screens, modals, animations, utilities, responsive;

/* ═══════════ @property للحركات المتقدمة ═══════════ */
@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --glow-opacity {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

@property --rotation {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --progress-value {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

/* ═══════════ Layer: Reset ═══════════ */
@layer reset {
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    * {
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        hanging-punctuation: first last;
    }

    body {
        min-block-size: 100dvh;
        overflow: hidden;
        text-rendering: optimizeSpeed;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    img, picture, svg, video, canvas {
        display: block;
        max-inline-size: 100%;
        max-block-size: 100%;
    }

    input, button, textarea, select {
        font: inherit;
        color: inherit;
    }

    button {
        background: none;
        border: none;
        cursor: pointer;
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* ═══════════ Layer: Design Tokens ═══════════ */
@layer tokens {
    :root {
        /* Colors - Base */
        --color-black: #000;
        --color-white: #fff;
        
        /* Surfaces */
        --surface-primary: #05050d;
        --surface-secondary: #0a0a18;
        --surface-card: color-mix(in oklab, white 4%, transparent);
        --surface-glass: color-mix(in oklab, white 6%, transparent);
        --surface-elevated: color-mix(in oklab, white 8%, transparent);
        --surface-hover: color-mix(in oklab, white 10%, transparent);
        
        /* Borders */
        --border-subtle: color-mix(in oklab, white 8%, transparent);
        --border-medium: color-mix(in oklab, white 12%, transparent);
        --border-strong: color-mix(in oklab, white 20%, transparent);
        --border-glow: color-mix(in oklab, white 25%, transparent);
        
        /* Text */
        --text-primary: #ffffff;
        --text-secondary: color-mix(in oklab, white 60%, transparent);
        --text-tertiary: color-mix(in oklab, white 40%, transparent);
        --text-disabled: color-mix(in oklab, white 25%, transparent);
        
        /* Accents */
        --accent-gold: #f1c40f;
        --accent-gold-light: #f39c12;
        --accent-green: #2ecc71;
        --accent-green-dark: #27ae60;
        --accent-blue: #3498db;
        --accent-blue-dark: #2980b9;
        --accent-purple: #9b59b6;
        --accent-purple-dark: #8e44ad;
        --accent-red: #e74c3c;
        --accent-red-dark: #c0392b;
        --accent-cyan: #00cec9;
        --accent-pink: #e84393;
        --accent-orange: #e67e22;
        
        /* Nut Colors - Realistic Gradients */
        --nut-red: linear-gradient(180deg, #ff8a8a, #d63031 45%, #8b1a1a);
        --nut-blue: linear-gradient(180deg, #7bc0ff, #2d7fc1 45%, #1a4a6e);
        --nut-green: linear-gradient(180deg, #7befc4, #00b894 45%, #007a5e);
        --nut-yellow: linear-gradient(180deg, #fff0b0, #fdcb6e 45%, #c49a2e);
        --nut-purple: linear-gradient(180deg, #c5bfff, #6c5ce7 45%, #3d2e9e);
        --nut-orange: linear-gradient(180deg, #ffd0a0, #e17055 45%, #a04030);
        --nut-pink: linear-gradient(180deg, #ffb0d0, #e84393 45%, #a02060);
        --nut-cyan: linear-gradient(180deg, #b0f5f5, #00cec9 45%, #008a80);
        --nut-lime: linear-gradient(180deg, #d4fc79, #96e6a1 45%, #5a9e64);
        --nut-indigo: linear-gradient(180deg, #a29bfe, #6c5ce7 45%, #3d2e9e);
        --nut-coral: linear-gradient(180deg, #fab1a0, #e17055 45%, #a04030);
        --nut-teal: linear-gradient(180deg, #81ecec, #00b894 45%, #007a5e);
        
        /* Spacing Scale */
        --space-2xs: 0.25rem;
        --space-xs: 0.5rem;
        --space-sm: 0.75rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 2rem;
        --space-2xl: 3rem;
        --space-3xl: 4rem;
        
        /* Radius Scale */
        --radius-xs: 6px;
        --radius-sm: 10px;
        --radius-md: 14px;
        --radius-lg: 18px;
        --radius-xl: 22px;
        --radius-2xl: 26px;
        --radius-full: 9999px;
        
        /* Typography */
        --font-display: 'Cairo', system-ui, sans-serif;
        --font-mono: 'Orbitron', 'Courier New', monospace;
        
        --text-xs: clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem);
        --text-sm: clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem);
        --text-base: clamp(0.9rem, 0.85rem + 0.35vw, 1rem);
        --text-lg: clamp(1rem, 0.95rem + 0.5vw, 1.15rem);
        --text-xl: clamp(1.2rem, 1.1rem + 0.7vw, 1.4rem);
        --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
        --text-3xl: clamp(1.8rem, 1.5rem + 1.5vw, 2.5rem);
        
        --leading-tight: 1.15;
        --leading-normal: 1.5;
        --leading-relaxed: 1.7;
        
        /* Shadows */
        --shadow-xs: 0 1px 2px color-mix(in oklab, black 20%, transparent);
        --shadow-sm: 0 2px 8px color-mix(in oklab, black 30%, transparent);
        --shadow-md: 0 6px 20px color-mix(in oklab, black 40%, transparent);
        --shadow-lg: 0 10px 30px color-mix(in oklab, black 50%, transparent);
        --shadow-xl: 0 20px 60px color-mix(in oklab, black 60%, transparent);
        --shadow-2xl: 0 25px 70px color-mix(in oklab, black 90%, transparent);
        
        --shadow-glow-gold: 0 0 40px color-mix(in oklab, var(--accent-gold) 40%, transparent);
        --shadow-glow-green: 0 0 40px color-mix(in oklab, var(--accent-green) 40%, transparent);
        --shadow-glow-blue: 0 0 40px color-mix(in oklab, var(--accent-blue) 40%, transparent);
        
        /* Transitions */
        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
        --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
        --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
        
        --duration-instant: 100ms;
        --duration-fast: 200ms;
        --duration-normal: 300ms;
        --duration-slow: 500ms;
        --duration-slower: 800ms;
        
        /* Z-Index Scale */
        --z-base: 1;
        --z-elevated: 10;
        --z-dropdown: 100;
        --z-sticky: 200;
        --z-modal-backdrop: 5000;
        --z-modal: 5001;
        --z-toast: 9999;
        --z-tooltip: 10000;
        
        /* Container Sizes */
        --container-sm: 480px;
        --container-md: 640px;
        --container-lg: 900px;
        
        /* Blur Values */
        --blur-sm: 8px;
        --blur-md: 15px;
        --blur-lg: 20px;
        --blur-xl: 30px;
        --blur-2xl: 60px;
    }
}

/* ═══════════ Layer: Base ═══════════ */
@layer base {
    body {
        font-family: var(--font-display);
        font-weight: 400;
        background: var(--surface-primary);
        color: var(--text-primary);
        min-block-size: 100dvh;
        overflow: hidden;
        position: relative;
        line-height: var(--leading-normal);
        transition: background-color var(--duration-slow) var(--ease-out-quart);
    }

    /* اختيار النص */
    ::selection {
        background: color-mix(in oklab, var(--accent-gold) 40%, transparent);
        color: var(--color-white);
    }

    /* Focus Visible للوصولية */
    :focus-visible {
        outline: 2px solid var(--accent-gold);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
        inline-size: 6px;
        block-size: 6px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: color-mix(in oklab, white 15%, transparent);
        border-radius: var(--radius-full);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: color-mix(in oklab, white 25%, transparent);
    }

    /* Firefox */
    @supports (scrollbar-width: thin) {
        * {
            scrollbar-width: thin;
            scrollbar-color: color-mix(in oklab, white 20%, transparent) transparent;
        }
    }
}

/* ═══════════ Layer: Themes (متقدم مع color-mix) ═══════════ */
@layer themes {
    body {
        transition: 
            background-color var(--duration-slow) var(--ease-out-quart),
            --accent-primary var(--duration-slow) var(--ease-out-quart);
        
        --accent-primary: var(--accent-gold);
    }

    body.theme-default {
        --surface-primary: #05050d;
        --surface-secondary: #0a0a18;
        --accent-primary: #f1c40f;
        --orb-1-color: rgba(52, 152, 219, 0.35);
        --orb-2-color: rgba(155, 89, 182, 0.3);
        --orb-3-color: rgba(46, 204, 113, 0.25);
    }

    body.theme-ocean {
        --surface-primary: #020d18;
        --surface-secondary: #041a2e;
        --accent-primary: #00d4ff;
        --accent-blue: #0ea5e9;
        --accent-cyan: #22d3ee;
        --orb-1-color: rgba(0, 212, 255, 0.4);
        --orb-2-color: rgba(14, 165, 233, 0.35);
        --orb-3-color: rgba(34, 211, 238, 0.3);
    }

    body.theme-gold {
        --surface-primary: #100a02;
        --surface-secondary: #1a1004;
        --accent-primary: #ffb800;
        --accent-gold: #fbbf24;
        --accent-orange: #f97316;
        --orb-1-color: rgba(251, 191, 36, 0.4);
        --orb-2-color: rgba(249, 115, 22, 0.35);
        --orb-3-color: rgba(245, 158, 11, 0.3);
    }

    body.theme-forest {
        --surface-primary: #02120a;
        --surface-secondary: #051f12;
        --accent-primary: #22c55e;
        --accent-green: #10b981;
        --accent-lime: #84cc16;
        --orb-1-color: rgba(34, 197, 94, 0.4);
        --orb-2-color: rgba(16, 185, 129, 0.35);
        --orb-3-color: rgba(132, 204, 22, 0.3);
    }

    body.theme-sunset {
        --surface-primary: #1a0a14;
        --surface-secondary: #2d1024;
        --accent-primary: #ff6b9d;
        --accent-pink: #f06292;
        --accent-orange: #ff8a65;
        --orb-1-color: rgba(255, 107, 157, 0.4);
        --orb-2-color: rgba(240, 98, 146, 0.35);
        --orb-3-color: rgba(255, 138, 101, 0.3);
    }

    body.theme-galaxy {
        --surface-primary: #0a0014;
        --surface-secondary: #1a0033;
        --accent-primary: #e040fb;
        --accent-purple: #ab47bc;
        --accent-cyan: #00e5ff;
        --orb-1-color: rgba(224, 64, 251, 0.4);
        --orb-2-color: rgba(171, 71, 188, 0.35);
        --orb-3-color: rgba(0, 229, 255, 0.3);
    }
}

/* ═══════════ Layer: Background ═══════════ */
@layer background {
    /* الخلفية المتحركة الرئيسية */
    .animated-bg {
        position: fixed;
        inset: 0;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
        contain: strict;
    }

    /* Orbs ديناميكية */
    .bg-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
        opacity: 0.4;
        animation: orbFloat 20s infinite ease-in-out;
        transition: background var(--duration-slow) var(--ease-out-quart);
        will-change: transform;
        contain: layout style paint;
        
        &:nth-child(1) {
            inline-size: 400px;
            block-size: 400px;
            background: radial-gradient(circle, var(--orb-1-color, rgba(52, 152, 219, 0.35)), transparent 70%);
            inset-block-start: -100px;
            inset-inline-start: -100px;
        }

        &:nth-child(2) {
            inline-size: 500px;
            block-size: 500px;
            background: radial-gradient(circle, var(--orb-2-color, rgba(155, 89, 182, 0.3)), transparent 70%);
            inset-block-end: -150px;
            inset-inline-end: -150px;
            animation-delay: -7s;
        }

        &:nth-child(3) {
            inline-size: 350px;
            block-size: 350px;
            background: radial-gradient(circle, var(--orb-3-color, rgba(46, 204, 113, 0.25)), transparent 70%);
            inset-block-start: 50%;
            inset-inline-start: 50%;
            translate: -50% -50%;
            animation-delay: -14s;
        }
    }

    @keyframes orbFloat {
        0%, 100% { translate: 0 0; scale: 1; }
        25% { translate: 50px -50px; scale: 1.1; }
        50% { translate: -30px 30px; scale: 0.95; }
        75% { translate: 40px 40px; scale: 1.05; }
    }

    /* Grid Overlay */
    .bg-grid {
        position: absolute;
        inset: 0;
        background-image: 
            linear-gradient(color-mix(in oklab, white 2%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in oklab, white 2%, transparent) 1px, transparent 1px);
        background-size: 50px 50px;
        mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
        -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
    }

    /* Ambient Overlay */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background: 
            radial-gradient(circle at 20% 20%, color-mix(in oklab, var(--accent-blue) 10%, transparent), transparent 50%),
            radial-gradient(circle at 80% 80%, color-mix(in oklab, var(--accent-purple) 10%, transparent), transparent 50%),
            radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent-green) 6%, transparent), transparent 60%);
        pointer-events: none;
        z-index: 1;
    }

    /* Floating Nuts Background */
    .lobby-bg {
        position: fixed;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 1;
        contain: strict;
    }

    .floating-nut {
        position: absolute;
        inline-size: 50px;
        block-size: 34px;
        border-radius: var(--radius-xs);
        opacity: 0.12;
        animation: floatNut 18s infinite ease-in-out;
        box-shadow: 0 10px 30px color-mix(in oklab, black 30%, transparent);
        will-change: transform;
        
        &::after {
            content: '';
            position: absolute;
            inset-block-start: 50%;
            inset-inline-start: 50%;
            translate: -50% -50%;
            inline-size: 14px;
            block-size: 14px;
            background: radial-gradient(circle at 40% 40%, #2a2a3e, #0a0a15);
            border-radius: 50%;
            box-shadow: 
                inset 0 3px 6px color-mix(in oklab, black 95%, transparent),
                0 1px 2px color-mix(in oklab, white 25%, transparent);
        }
        
        &:nth-child(1) { background: var(--nut-red); inset-block-start: 8%; inset-inline-start: 8%; animation-delay: 0s; }
        &:nth-child(2) { background: var(--nut-blue); inset-block-start: 15%; inset-inline-end: 12%; animation-delay: -3s; }
        &:nth-child(3) { background: var(--nut-green); inset-block-end: 12%; inset-inline-start: 15%; animation-delay: -6s; }
        &:nth-child(4) { background: var(--nut-yellow); inset-block-end: 20%; inset-inline-end: 8%; animation-delay: -9s; }
        &:nth-child(5) { background: var(--nut-purple); inset-block-start: 45%; inset-inline-start: 5%; animation-delay: -12s; }
        &:nth-child(6) { background: var(--nut-pink); inset-block-start: 60%; inset-inline-end: 5%; animation-delay: -15s; }
        &:nth-child(7) { background: var(--nut-cyan); inset-block-start: 25%; inset-inline-start: 70%; animation-delay: -8s; }
        &:nth-child(8) { background: var(--nut-lime); inset-block-end: 35%; inset-inline-end: 25%; animation-delay: -11s; }
    }

    @keyframes floatNut {
        0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
        25% { transform: translate(40px, -50px) rotate(20deg) scale(1.1); }
        50% { transform: translate(-30px, -90px) rotate(-15deg) scale(0.9); }
        75% { transform: translate(50px, -40px) rotate(10deg) scale(1.05); }
    }
}

/* ═══════════ Layer: Components ═══════════ */
@layer components {
    /* ═══ Screens ═══ */
    .screen {
        display: none;
        inline-size: 100%;
        min-block-size: 100dvh;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-block: var(--space-md);
        position: relative;
        z-index: 2;
        
        &.active {
            display: flex;
            animation: screenFadeIn var(--duration-slow) var(--ease-out-quart);
        }
    }

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

    /* ═══ Logo Section ═══ */
    .logo-container {
        margin-block-end: 2.2rem;
        position: relative;
    }

    .logo-ring {
        inline-size: 110px;
        block-size: 110px;
        margin: 0 auto var(--space-md);
        border-radius: 50%;
        background: linear-gradient(135deg, 
            color-mix(in oklab, var(--accent-gold) 15%, transparent), 
            color-mix(in oklab, var(--accent-orange) 15%, transparent));
        border: 2px solid color-mix(in oklab, var(--accent-gold) 30%, transparent);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        animation: ringPulse 3s infinite ease-in-out;
        box-shadow: 0 0 50px color-mix(in oklab, var(--accent-gold) 25%, transparent);
        
        &::before {
            content: '';
            position: absolute;
            inset: -10px;
            border-radius: 50%;
            border: 1px dashed color-mix(in oklab, var(--accent-gold) 15%, transparent);
            animation: ringRotate 12s linear infinite;
        }
    }

    .logo-ring-inner {
        position: absolute;
        inset: 8px;
        border-radius: 50%;
        border: 1px solid color-mix(in oklab, var(--accent-gold) 20%, transparent);
        animation: ringRotate 15s linear infinite reverse;
    }

    .logo-pulse {
        position: absolute;
        inset: -5px;
        border-radius: 50%;
        border: 1px solid color-mix(in oklab, var(--accent-gold) 30%, transparent);
        animation: pulseRing 2s infinite ease-out;
    }

    @keyframes pulseRing {
        0% { transform: scale(1); opacity: 1; }
        100% { transform: scale(1.3); opacity: 0; }
    }

    @keyframes ringPulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 0 50px color-mix(in oklab, var(--accent-gold) 25%, transparent);
        }
        50% {
            transform: scale(1.05);
            box-shadow: 0 0 70px color-mix(in oklab, var(--accent-gold) 40%, transparent);
        }
    }

    @keyframes ringRotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .logo-icon {
        font-size: 3.5rem;
        display: inline-block;
        animation: logoBounce 3s infinite ease-in-out;
        filter: drop-shadow(0 0 25px color-mix(in oklab, var(--accent-gold) 60%, transparent));
        z-index: 2;
    }

    @keyframes logoBounce {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-10px) scale(1.1); }
    }

    .game-title {
        font-size: var(--text-3xl);
        font-weight: 900;
        background: linear-gradient(135deg, 
            var(--accent-gold), 
            var(--accent-orange), 
            var(--accent-gold), 
            var(--accent-orange));
        background-size: 300% 300%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-block-end: var(--space-2xs);
        animation: gradientShift 4s ease infinite;
        font-family: var(--font-display);
    }

    @keyframes gradientShift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    .game-subtitle {
        font-size: var(--text-xs);
        color: var(--text-secondary);
        letter-spacing: 6px;
        font-weight: 600;
        font-family: var(--font-mono);
        text-transform: uppercase;
    }

    .version-badge {
        position: absolute;
        inset-block-start: -8px;
        inset-inline-start: 50%;
        translate: -50% 0;
        background: linear-gradient(135deg, 
            var(--accent-blue), 
            var(--accent-blue-dark), 
            var(--accent-purple));
        background-size: 200% 200%;
        color: var(--color-white);
        font-size: 0.6rem;
        font-weight: 900;
        padding: 4px 14px;
        border-radius: var(--radius-full);
        letter-spacing: 1px;
        animation: gradientShift 3s ease infinite;
        box-shadow: 0 4px 15px color-mix(in oklab, var(--accent-blue) 40%, transparent);
    }

    /* ═══ Stats Boxes ═══ */
    .lobby-stats {
        display: flex;
        justify-content: center;
        gap: var(--space-xs);
        margin-block-end: 2rem;
        flex-wrap: wrap;
    }

    .stat-box {
        background: var(--surface-glass);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        padding: var(--space-sm) var(--space-md);
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        backdrop-filter: blur(var(--blur-lg));
        -webkit-backdrop-filter: blur(var(--blur-lg));
        flex: 1;
        min-inline-size: 100px;
        max-inline-size: 140px;
        transition: all var(--duration-normal) var(--ease-out-quart);
        
        &:hover {
            border-color: var(--border-glow);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }
    }

    .stat-icon-wrapper {
        inline-size: 38px;
        block-size: 38px;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
        
        &.coins {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-gold) 20%, transparent), 
                color-mix(in oklab, var(--accent-orange) 20%, transparent));
            border: 1px solid color-mix(in oklab, var(--accent-gold) 30%, transparent);
            box-shadow: 0 0 20px color-mix(in oklab, var(--accent-gold) 15%, transparent);
        }
        
        &.level {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-blue) 20%, transparent), 
                color-mix(in oklab, var(--accent-blue-dark) 20%, transparent));
            border: 1px solid color-mix(in oklab, var(--accent-blue) 30%, transparent);
            box-shadow: 0 0 20px color-mix(in oklab, var(--accent-blue) 15%, transparent);
        }
        
        &.stars {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-purple) 20%, transparent), 
                color-mix(in oklab, var(--accent-purple-dark) 20%, transparent));
            border: 1px solid color-mix(in oklab, var(--accent-purple) 30%, transparent);
            box-shadow: 0 0 20px color-mix(in oklab, var(--accent-purple) 15%, transparent);
        }
    }

    .stat-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-inline-size: 0;
    }

    .stat-label {
        font-size: var(--text-xs);
        color: var(--text-secondary);
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .stat-value {
        font-size: var(--text-lg);
        font-weight: 900;
        line-height: 1;
        font-family: var(--font-mono);
    }

    /* ═══ Lobby Buttons ═══ */
    .lobby-buttons {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        inline-size: 100%;
    }

    .lobby-row {
        display: flex;
        gap: var(--space-xs);
        
        & .btn-lobby {
            flex: 1;
        }
    }

    .btn-lobby {
        font-family: var(--font-display);
        border: none;
        border-radius: var(--radius-lg);
        padding: var(--space-md) var(--space-lg);
        font-size: var(--text-base);
        font-weight: 700;
        color: var(--color-white);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-out-back);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-md);
        isolation: isolate;
        
        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent, color-mix(in oklab, white 20%, transparent), transparent);
            transform: translateX(-100%);
            transition: transform var(--duration-slower) var(--ease-out-quart);
            pointer-events: none;
        }
        
        &:hover::after {
            transform: translateX(100%);
        }
        
        &:active {
            transform: scale(0.96);
        }
        
        &.play {
            background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
            font-size: var(--text-xl);
            padding-block: var(--space-lg);
            box-shadow: 0 10px 40px color-mix(in oklab, var(--accent-green) 40%, transparent);
            
            &::before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, transparent, color-mix(in oklab, white 25%, transparent), transparent);
                transform: translateX(-100%);
                animation: shine 3s infinite;
            }
        }
        
        &.levels {
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-dark));
            box-shadow: 0 8px 30px color-mix(in oklab, var(--accent-blue) 35%, transparent);
        }
        
        &.daily {
            background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
            box-shadow: 0 8px 30px color-mix(in oklab, var(--accent-red) 35%, transparent);
        }
        
        &.achievements {
            background: linear-gradient(135deg, var(--accent-gold-light), var(--accent-orange));
            box-shadow: 0 8px 30px color-mix(in oklab, var(--accent-gold-light) 35%, transparent);
        }
        
        &.shop {
            background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-dark));
            box-shadow: 0 8px 30px color-mix(in oklab, var(--accent-purple) 35%, transparent);
        }
        
        &.stats {
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green-dark));
            box-shadow: 0 8px 30px color-mix(in oklab, var(--accent-cyan) 35%, transparent);
        }
        
        &.settings {
            background: linear-gradient(135deg, #636e72, #2d3436);
            box-shadow: 0 8px 30px color-mix(in oklab, #636e72 35%, transparent);
        }
    }

    @keyframes shine {
        0% { transform: translateX(-100%); }
        50%, 100% { transform: translateX(100%); }
    }

    .btn-icon {
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: 28px;
        block-size: 28px;
        background: color-mix(in oklab, white 20%, transparent);
        border-radius: var(--radius-sm);
        backdrop-filter: blur(var(--blur-sm));
        -webkit-backdrop-filter: blur(var(--blur-sm));
        flex-shrink: 0;
    }

    .btn-text {
        flex: 1;
        text-align: center;
    }

    .lobby-footer {
        margin-block-start: var(--space-lg);
        color: var(--text-secondary);
        font-size: var(--text-sm);
        font-weight: 600;
    }

    /* ═══ Levels Screen ═══ */
    #levels-screen {
        padding: var(--space-md);
        justify-content: flex-start;
    }

    .levels-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        inline-size: 100%;
        max-inline-size: var(--container-md);
        padding-block: var(--space-sm) var(--space-md);
        gap: var(--space-md);
        
        & h2 {
            font-size: var(--text-xl);
            font-weight: 900;
            flex: 1;
            text-align: center;
        }
    }

    .btn-back {
        background: var(--surface-glass);
        border: 1px solid var(--border-subtle);
        color: var(--color-white);
        border-radius: var(--radius-md);
        inline-size: 44px;
        block-size: 44px;
        font-size: 1.1rem;
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out-quart);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(var(--blur-sm));
        -webkit-backdrop-filter: blur(var(--blur-sm));
        flex-shrink: 0;
        
        &:hover {
            border-color: var(--border-glow);
            background: var(--surface-hover);
        }
        
        &:active {
            transform: scale(0.92);
        }
    }

    .coin-display {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        background: var(--surface-glass);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        padding: var(--space-sm) var(--space-md);
        font-weight: 700;
        font-size: var(--text-sm);
        backdrop-filter: blur(var(--blur-sm));
        -webkit-backdrop-filter: blur(var(--blur-sm));
        min-inline-size: 85px;
        justify-content: center;
        font-family: var(--font-mono);
    }

    .levels-filter {
        display: flex;
        gap: var(--space-xs);
        margin-block-end: var(--space-md);
        inline-size: 100%;
        max-inline-size: var(--container-md);
        padding-inline: var(--space-xs);
        flex-wrap: wrap;
    }

    .filter-btn {
        flex: 1;
        min-inline-size: 70px;
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-subtle);
        background: var(--surface-glass);
        color: var(--text-secondary);
        font-family: var(--font-display);
        font-weight: 600;
        font-size: var(--text-xs);
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out-quart);
        backdrop-filter: blur(var(--blur-sm));
        -webkit-backdrop-filter: blur(var(--blur-sm));
        
        &.active {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-blue) 30%, transparent), 
                color-mix(in oklab, var(--accent-blue-dark) 30%, transparent));
            border-color: color-mix(in oklab, var(--accent-blue) 50%, transparent);
            color: var(--color-white);
        }
        
        &:active {
            transform: scale(0.96);
        }
    }

    .levels-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: var(--space-xs);
        inline-size: 100%;
        max-inline-size: var(--container-md);
        max-block-size: 65dvh;
        overflow-y: auto;
        padding: var(--space-xs);
        scrollbar-width: thin;
        scrollbar-color: color-mix(in oklab, white 20%, transparent) transparent;
        overscroll-behavior: contain;
    }

    .level-btn {
        aspect-ratio: 1;
        border-radius: var(--radius-lg);
        border: 2px solid var(--border-subtle);
        background: var(--surface-glass);
        color: var(--color-white);
        font-family: var(--font-mono);
        font-weight: 900;
        font-size: var(--text-base);
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-out-back);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        position: relative;
        backdrop-filter: blur(var(--blur-sm));
        -webkit-backdrop-filter: blur(var(--blur-sm));
        overflow: hidden;
        
        &:hover {
            border-color: var(--border-glow);
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }
        
        &:active {
            transform: scale(0.9);
        }
        
        &.completed {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-green) 25%, transparent), 
                color-mix(in oklab, var(--accent-green-dark) 25%, transparent));
            border-color: color-mix(in oklab, var(--accent-green) 60%, transparent);
            box-shadow: 0 0 20px color-mix(in oklab, var(--accent-green) 20%, transparent);
            
            &::before {
                content: '✓';
                position: absolute;
                inset-block-start: 4px;
                inset-inline-end: 6px;
                font-size: 0.65rem;
                color: var(--accent-green);
                font-weight: 900;
            }
        }
        
        &.current {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-gold-light) 30%, transparent), 
                color-mix(in oklab, var(--accent-orange) 30%, transparent));
            border-color: var(--accent-gold-light);
            box-shadow: 0 0 30px color-mix(in oklab, var(--accent-gold-light) 40%, transparent);
            animation: pulseCurrent 2s infinite;
        }
        
        &.locked {
            background: color-mix(in oklab, white 2%, transparent);
            border-color: color-mix(in oklab, white 4%, transparent);
            color: var(--text-disabled);
            cursor: not-allowed;
        }
        
        &.hard {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-red) 25%, transparent), 
                color-mix(in oklab, var(--accent-red-dark) 25%, transparent));
            border-color: color-mix(in oklab, var(--accent-red) 60%, transparent);
            
            &::after {
                content: '🔥';
                position: absolute;
                inset-block-start: 2px;
                inset-inline-start: 4px;
                font-size: 0.7rem;
            }
        }
        
        & .lock-icon {
            font-size: 0.85rem;
            opacity: 0.5;
        }
        
        & .star-icon {
            font-size: 0.6rem;
            letter-spacing: -1px;
        }
    }

    @keyframes pulseCurrent {
        0%, 100% {
            box-shadow: 0 0 30px color-mix(in oklab, var(--accent-gold-light) 40%, transparent);
        }
        50% {
            box-shadow: 0 0 50px color-mix(in oklab, var(--accent-gold-light) 70%, transparent);
        }
    }

    /* ═══ Game Screen ═══ */
    #game-screen {
        justify-content: space-between;
        padding-block: var(--space-2xs);
    }

    .top-bar {
        inline-size: 94%;
        max-inline-size: 560px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-xs) var(--space-sm);
        background: var(--surface-glass);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-subtle);
        backdrop-filter: blur(var(--blur-lg));
        -webkit-backdrop-filter: blur(var(--blur-lg));
        font-weight: 700;
        font-size: var(--text-sm);
        gap: var(--space-xs);
    }

    .btn-icon-top {
        background: var(--surface-elevated);
        border: 1px solid var(--border-subtle);
        color: var(--color-white);
        border-radius: var(--radius-sm);
        inline-size: 40px;
        block-size: 40px;
        font-size: 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--duration-fast) var(--ease-out-quart);
        flex-shrink: 0;
        
        &:hover {
            border-color: var(--border-glow);
            background: var(--surface-hover);
        }
        
        &:active {
            transform: scale(0.9);
        }
        
        &#btn-exit-game {
            color: var(--accent-red);
        }
    }

    .top-stats {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        flex: 1;
        justify-content: center;
    }

    .info-box {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        font-size: var(--text-sm);
        font-family: var(--font-mono);
    }

    .icon {
        font-size: 0.95rem;
    }

    .divider {
        inline-size: 1px;
        block-size: 16px;
        background: var(--border-subtle);
    }

    .moves-box {
        color: var(--accent-cyan);
    }

    /* Pattern Indicator */
    .pattern-indicator {
        display: flex;
        justify-content: center;
        gap: var(--space-xs);
        margin: var(--space-xs) auto 0;
        flex-wrap: wrap;
        min-block-size: 24px;
    }

    .pattern-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2xs);
        padding: 4px 12px;
        border-radius: var(--radius-full);
        font-size: var(--text-xs);
        font-weight: 700;
        font-family: var(--font-display);
        animation: patternFadeIn var(--duration-slow) var(--ease-out-quart);
        
        &.hidden {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-purple) 30%, transparent), 
                color-mix(in oklab, var(--accent-purple-dark) 30%, transparent));
            border: 1px solid color-mix(in oklab, var(--accent-purple) 50%, transparent);
            color: #c5bfff;
        }
        
        &.locked {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-red) 30%, transparent), 
                color-mix(in oklab, var(--accent-red-dark) 30%, transparent));
            border: 1px solid color-mix(in oklab, var(--accent-red) 50%, transparent);
            color: #ff8a8a;
        }
        
        &.frozen {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-cyan) 30%, transparent), 
                color-mix(in oklab, var(--accent-green-dark) 30%, transparent));
            border: 1px solid color-mix(in oklab, var(--accent-cyan) 50%, transparent);
            color: #b0f5f5;
        }
        
        &.mystery {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-blue) 30%, transparent), 
                color-mix(in oklab, var(--accent-blue-dark) 30%, transparent));
            border: 1px solid color-mix(in oklab, var(--accent-blue) 50%, transparent);
            color: #7bc0ff;
        }
        
        &.chaos {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-orange) 30%, transparent), 
                color-mix(in oklab, #d35400 30%, transparent));
            border: 1px solid color-mix(in oklab, var(--accent-orange) 50%, transparent);
            color: #ffd0a0;
        }
    }

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

    /* Progress Bar */
    .progress-bar-container {
        inline-size: 90%;
        max-inline-size: 500px;
        block-size: 8px;
        background: color-mix(in oklab, white 6%, transparent);
        border-radius: var(--radius-full);
        margin: var(--space-xs) auto;
        position: relative;
        overflow: hidden;
        border: 1px solid color-mix(in oklab, white 8%, transparent);
    }

    .progress-bar {
        block-size: 100%;
        background: linear-gradient(90deg, var(--accent-green), var(--accent-gold));
        border-radius: var(--radius-full);
        transition: inline-size var(--duration-slow) var(--ease-out-quart);
        inline-size: 0%;
        position: relative;
        
        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, color-mix(in oklab, white 40%, transparent), transparent);
            animation: progressShine 2s infinite;
        }
    }

    @keyframes progressShine {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

    .progress-text {
        position: absolute;
        inset-inline-end: 5px;
        inset-block-start: 50%;
        translate: 0 -50%;
        font-size: 0.55rem;
        font-weight: 900;
        color: var(--color-white);
        text-shadow: 0 1px 3px color-mix(in oklab, black 80%, transparent);
        font-family: var(--font-mono);
    }

    /* ═══ Game Board ═══ */
    .game-board {
        flex: 1;
        inline-size: 100%;
        max-inline-size: var(--container-lg);
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: var(--space-md);
        padding: var(--space-md) var(--space-sm);
        flex-wrap: wrap;
        min-block-size: 300px;
        container-type: inline-size;
        container-name: board;
    }

    /* ═══ Bolt (Realistic) ═══ */
    .bolt {
        position: relative;
        inline-size: 60px;
        block-size: 230px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        transition: transform var(--duration-fast) var(--ease-out-quart);
        container-type: size;
        
        &:active {
            transform: scale(0.97);
        }
        
        &.locked {
            pointer-events: none;
            opacity: 0.6;
            
            &::after {
                content: '🔒';
                position: absolute;
                inset-block-start: -25px;
                inset-inline-start: 50%;
                translate: -50% 0;
                font-size: 1.2rem;
                animation: lockPulse 2s infinite;
            }
        }
    }

    @keyframes lockPulse {
        0%, 100% {
            opacity: 0.6;
            transform: translateX(-50%) scale(1);
        }
        50% {
            opacity: 1;
            transform: translateX(-50%) scale(1.1);
        }
    }

    .bolt-pole {
        position: absolute;
        inset-block-end: 18px;
        inline-size: 13px;
        block-size: 200px;
        background: linear-gradient(90deg,
            #3a3a3a, #888 25%, #d0d0d0 45%, #f0f0f0 50%, #d0d0d0 55%, #888 75%, #3a3a3a);
        border-radius: var(--radius-xs);
        z-index: 1;
        box-shadow: 
            inset 0 0 8px color-mix(in oklab, black 60%, transparent),
            2px 0 4px color-mix(in oklab, black 40%, transparent);
    }

    .bolt-base {
        position: absolute;
        inset-block-end: 0;
        inline-size: 64px;
        block-size: 19px;
        background: linear-gradient(180deg, #e0e0e0, #a0a0a0 30%, #606060 70%, #404040);
        border-radius: 10px 10px 6px 6px;
        box-shadow: 
            0 8px 20px color-mix(in oklab, black 80%, transparent),
            inset 0 2px 4px color-mix(in oklab, white 50%, transparent),
            inset 0 -3px 6px color-mix(in oklab, black 60%, transparent);
        z-index: 10;
        transition: box-shadow var(--duration-normal) ease;
    }

    /* ═══ Nut (Realistic) ═══ */
    .nut {
        inline-size: 50px;
        block-size: 36px;
        border-radius: var(--radius-sm);
        position: absolute;
        bottom: 22px;
        z-index: 5;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 
            inset 0 8px 12px color-mix(in oklab, white 45%, transparent),
            inset 0 -8px 12px color-mix(in oklab, black 40%, transparent),
            0 6px 14px color-mix(in oklab, black 60%, transparent);
        transition: 
            transform var(--duration-normal) var(--ease-out-quart),
            filter var(--duration-normal) ease,
            box-shadow var(--duration-normal) ease;
        transform: translateY(var(--stack-offset, 0px));
        border: 1.5px solid color-mix(in oklab, black 25%, transparent);
        border-block-start-color: color-mix(in oklab, white 20%, transparent);
        will-change: transform;
        
        &::after {
            content: '';
            inline-size: 14px;
            block-size: 14px;
            background: radial-gradient(circle at 40% 40%, #2a2a3e, #0a0a15);
            border-radius: 50%;
            box-shadow: 
                inset 0 3px 6px color-mix(in oklab, black 95%, transparent),
                0 1px 2px color-mix(in oklab, white 25%, transparent);
        }
        
        /* Nut color classes */
        &.color-red { background: var(--nut-red); }
        &.color-blue { background: var(--nut-blue); }
        &.color-green { background: var(--nut-green); }
        &.color-yellow { background: var(--nut-yellow); }
        &.color-purple { background: var(--nut-purple); }
        &.color-orange { background: var(--nut-orange); }
        &.color-pink { background: var(--nut-pink); }
        &.color-cyan { background: var(--nut-cyan); }
        &.color-lime { background: var(--nut-lime); }
        &.color-indigo { background: var(--nut-indigo); }
        &.color-coral { background: var(--nut-coral); }
        &.color-teal { background: var(--nut-teal); }
        
        /* Hidden nut */
        &.hidden-nut {
            background: linear-gradient(180deg, #2a2a3e, #1a1a2e) !important;
            border-color: color-mix(in oklab, white 10%, transparent);
            position: relative;
            
            &::before {
                content: '?';
                position: absolute;
                font-size: 1.2rem;
                font-weight: 900;
                color: color-mix(in oklab, white 40%, transparent);
                z-index: 2;
                font-family: var(--font-mono);
            }
            
            &::after {
                display: none;
            }
        }
        
        /* Frozen nut */
        &.frozen-nut {
            filter: brightness(0.7) saturate(0.5);
            position: relative;
            
            &::before {
                content: '❄️';
                position: absolute;
                font-size: 0.8rem;
                z-index: 3;
                inset-block-start: -5px;
                inset-inline-end: -5px;
                filter: drop-shadow(0 0 5px var(--accent-cyan));
            }
        }
        
        /* Mystery nut */
        &.mystery-nut {
            background: linear-gradient(180deg, #2a2a3e, #1a1a2e) !important;
            position: relative;
            
            &::before {
                content: '❓';
                position: absolute;
                font-size: 1rem;
                z-index: 2;
            }
            
            &::after {
                display: none;
            }
        }
        
        /* Selected state */
        &.selected {
            transform: translateY(calc(var(--stack-offset, 0px) - 260px)) scale(1.15);
            z-index: 999;
            filter: brightness(1.3);
            box-shadow: 
                0 0 35px color-mix(in oklab, white 60%, transparent),
                0 0 60px color-mix(in oklab, var(--accent-gold) 40%, transparent),
                inset 0 8px 12px color-mix(in oklab, white 45%, transparent),
                inset 0 -8px 12px color-mix(in oklab, black 40%, transparent);
        }
        
        /* Hint glow */
        &.hint-glow {
            animation: hintPulse 1.2s ease infinite;
        }
    }

    @keyframes hintPulse {
        0%, 100% {
            filter: brightness(1.5) drop-shadow(0 0 15px var(--accent-gold));
            scale: 1;
        }
        50% {
            filter: brightness(2) drop-shadow(0 0 25px var(--accent-gold));
            scale: 1.08;
        }
    }

    .optimal-moves {
        font-size: var(--text-xs);
        color: var(--text-secondary);
        font-weight: 600;
        margin-block-end: var(--space-2xs);
        font-family: var(--font-mono);
    }

    /* ═══ Controls ═══ */
    .controls {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xs);
        padding: var(--space-xs) var(--space-sm) var(--space-lg);
        padding-inline-end: calc(46px + var(--space-sm) + var(--space-xs));
        inline-size: 96%;
        max-inline-size: 560px;
        margin: 0 auto;
    }

    .btn-control {
        font-family: var(--font-display);
        border: none;
        border-radius: var(--radius-lg);
        padding: var(--space-xs) var(--space-2xs);
        font-weight: 700;
        font-size: var(--text-xs);
        color: var(--color-white);
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out-quart);
        box-shadow: var(--shadow-md);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-2xs);
        min-block-size: 70px;
        position: relative;
        overflow: hidden;
        inline-size: 100%;
        isolation: isolate;
        
        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent, color-mix(in oklab, white 15%, transparent), transparent);
            transform: translateX(-100%);
            transition: transform var(--duration-slow) ease;
            pointer-events: none;
        }
        
        &:hover::before {
            transform: translateX(100%);
        }
        
        &:active {
            transform: scale(0.93);
        }
        
        &:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            filter: grayscale(0.5);
            
            &:active {
                transform: none;
            }
        }
        
        &.hint { background: linear-gradient(135deg, var(--accent-gold-light), var(--accent-orange)); }
        &.undo { background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-dark)); }
        &.bolt-action { background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-dark)); }
        &.restart { background: linear-gradient(135deg, #7f8c8d, #57606f); }
    }

    .ctrl-icon {
        font-size: 1.3rem;
        line-height: 1;
        display: block;
    }

    .ctrl-text {
        font-size: var(--text-xs);
        font-weight: 700;
        line-height: 1;
        display: block;
        white-space: nowrap;
    }

    .ctrl-cost {
        font-size: 0.6rem;
        background: color-mix(in oklab, black 35%, transparent);
        padding: 2px 8px;
        border-radius: var(--radius-xs);
        font-weight: 900;
        font-family: var(--font-mono);
        line-height: 1;
        margin-block-start: 2px;
    }
}

/* ═══════════ Layer: Modals ═══════════ */
@layer modals {
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: color-mix(in oklab, black 85%, transparent);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: var(--z-modal-backdrop);
        backdrop-filter: blur(var(--blur-md));
        -webkit-backdrop-filter: blur(var(--blur-md));
        padding: var(--space-lg);
        
        &.active {
            display: flex;
            animation: fadeIn var(--duration-normal) ease;
        }
    }

    .modal {
        background: linear-gradient(145deg, 
            color-mix(in oklab, #16162e 95%, transparent), 
            color-mix(in oklab, #1e1e3f 95%, transparent));
        padding: var(--space-xl) var(--space-lg);
        border-radius: var(--radius-2xl);
        text-align: center;
        border: 1px solid var(--border-medium);
        box-shadow: 
            var(--shadow-2xl),
            inset 0 1px 0 color-mix(in oklab, white 10%, transparent),
            0 0 60px color-mix(in oklab, var(--accent-gold) 10%, transparent);
        animation: popIn var(--duration-slow) var(--ease-out-back);
        max-inline-size: 380px;
        inline-size: 100%;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(var(--blur-xl));
        -webkit-backdrop-filter: blur(var(--blur-xl));
        max-block-size: 90dvh;
        overflow-y: auto;
        
        & h2 {
            font-size: var(--text-xl);
            margin-block-end: var(--space-2xs);
            font-weight: 900;
        }
        
        & p {
            margin-block-end: var(--space-md);
            opacity: 0.8;
            font-size: var(--text-sm);
        }
    }

    .modal-glow {
        position: absolute;
        inset-block-start: -50%;
        inset-inline-start: -50%;
        inline-size: 200%;
        block-size: 200%;
        background: radial-gradient(circle, 
            color-mix(in oklab, var(--accent-gold) 8%, transparent), 
            transparent 60%);
        pointer-events: none;
        animation: glowRotate 8s linear infinite;
    }

    @keyframes glowRotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .modal-icon {
        font-size: 3.2rem;
        margin-block-end: var(--space-xs);
        display: block;
        animation: iconBounce 2s infinite ease-in-out;
    }

    @keyframes iconBounce {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-8px) scale(1.1); }
    }

    /* Stars */
    .stars-container {
        display: flex;
        justify-content: center;
        gap: var(--space-xs);
        margin: var(--space-sm) 0;
    }

    .star {
        font-size: 2rem;
        opacity: 0.2;
        transition: all var(--duration-slow) var(--ease-out-back);
        filter: grayscale(1);
        
        &.active {
            opacity: 1;
            filter: grayscale(0) drop-shadow(0 0 15px var(--accent-gold));
            animation: starPop var(--duration-slower) var(--ease-out-back);
        }
    }

    @keyframes starPop {
        0% { transform: scale(0) rotate(-180deg); }
        70% { transform: scale(1.3) rotate(10deg); }
        100% { transform: scale(1) rotate(0deg); }
    }

    .reward-box {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        background: color-mix(in oklab, var(--accent-gold) 12%, transparent);
        border: 1px solid color-mix(in oklab, var(--accent-gold) 30%, transparent);
        border-radius: var(--radius-md);
        padding: var(--space-sm) var(--space-md);
        margin-block-end: var(--space-md);
    }

    .reward-icon {
        font-size: 1.3rem;
    }

    .reward-value {
        font-size: var(--text-xl);
        color: var(--accent-gold);
        font-weight: 900;
        font-family: var(--font-mono);
    }

    .best-moves-display {
        font-size: var(--text-xs);
        color: var(--text-secondary);
        margin-block-end: var(--space-md);
        font-family: var(--font-mono);
    }

    .modal-buttons {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .btn-modal {
        font-family: var(--font-display);
        border: none;
        border-radius: var(--radius-lg);
        padding: var(--space-sm) var(--space-md);
        font-weight: 700;
        font-size: var(--text-sm);
        color: var(--color-white);
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out-quart);
        box-shadow: var(--shadow-md);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        position: relative;
        overflow: hidden;
        
        &:active {
            transform: scale(0.95);
        }
        
        &.primary {
            background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
            box-shadow: 0 8px 30px color-mix(in oklab, var(--accent-green) 40%, transparent);
            font-size: var(--text-base);
        }
        
        &.secondary {
            background: color-mix(in oklab, white 8%, transparent);
            border: 1px solid var(--border-medium);
        }
        
        &.danger {
            background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
            box-shadow: 0 8px 30px color-mix(in oklab, var(--accent-red) 40%, transparent);
        }
    }

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

    @keyframes popIn {
        from {
            transform: scale(0.5) translateY(30px);
            opacity: 0;
        }
        to {
            transform: scale(1) translateY(0);
            opacity: 1;
        }
    }

    /* ═══ Achievements ═══ */
    .achievements-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        max-block-size: 300px;
        overflow-y: auto;
        margin-block-end: var(--space-md);
        padding: var(--space-2xs);
        overscroll-behavior: contain;
    }

    .achievement-item {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        background: var(--surface-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        text-align: start;
        transition: all var(--duration-normal) ease;
        
        &.unlocked {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-gold) 15%, transparent), 
                color-mix(in oklab, var(--accent-orange) 15%, transparent));
            border-color: color-mix(in oklab, var(--accent-gold) 40%, transparent);
            
            & .achievement-icon {
                background: color-mix(in oklab, var(--accent-gold) 20%, transparent);
            }
        }
    }

    .achievement-icon {
        font-size: 1.5rem;
        inline-size: 40px;
        block-size: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-elevated);
        border-radius: var(--radius-sm);
        flex-shrink: 0;
    }

    .achievement-info {
        flex: 1;
        text-align: start;
        min-inline-size: 0;
    }

    .achievement-title {
        font-weight: 700;
        font-size: var(--text-sm);
        margin-block-end: 2px;
    }

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

    .achievement-reward {
        font-size: 0.65rem;
        color: var(--accent-gold);
        margin-block-start: 2px;
        font-family: var(--font-mono);
    }

    /* ═══ Daily Rewards ═══ */
    .daily-rewards {
        display: flex;
        justify-content: center;
        gap: var(--space-xs);
        margin-block-end: var(--space-md);
        flex-wrap: wrap;
    }

    .daily-day {
        inline-size: 55px;
        block-size: 70px;
        border-radius: var(--radius-md);
        background: var(--surface-card);
        border: 1px solid var(--border-subtle);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-2xs);
        font-size: var(--text-xs);
        font-weight: 700;
        transition: all var(--duration-normal) ease;
        position: relative;
        
        &.claimed {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-green) 20%, transparent), 
                color-mix(in oklab, var(--accent-green-dark) 20%, transparent));
            border-color: color-mix(in oklab, var(--accent-green) 50%, transparent);
        }
        
        &.today {
            background: linear-gradient(135deg, 
                color-mix(in oklab, var(--accent-gold) 20%, transparent), 
                color-mix(in oklab, var(--accent-orange) 20%, transparent));
            border-color: color-mix(in oklab, var(--accent-gold) 50%, transparent);
            animation: pulseCurrent 2s infinite;
        }
        
        & .day-icon { font-size: 1.2rem; }
        & .day-reward { 
            font-size: 0.6rem; 
            color: var(--accent-gold); 
            font-family: var(--font-mono); 
        }
    }

    /* ═══ Stats ═══ */
    .stats-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
        margin-block-end: var(--space-md);
    }

    .stat-item {
        padding: var(--space-sm) var(--space-xs);
        background: var(--surface-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2xs);
        text-align: center;
    }

    .stat-item-icon {
        font-size: 1.6rem;
    }

    .stat-item-value {
        font-size: var(--text-xl);
        font-weight: 900;
        font-family: var(--font-mono);
        color: var(--accent-gold);
    }

    .stat-item-label {
        font-size: var(--text-xs);
        color: var(--text-secondary);
        font-weight: 600;
    }

    /* ═══ Settings ═══ */
    .settings-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        margin-block-end: var(--space-md);
    }

    .setting-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-sm) var(--space-md);
        background: var(--surface-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        gap: var(--space-xs);
    }

    .setting-label {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        font-weight: 700;
        font-size: var(--text-sm);
    }

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

    .toggle-btn {
        inline-size: 50px;
        block-size: 28px;
        border-radius: var(--radius-full);
        background: var(--surface-hover);
        border: 1px solid var(--border-medium);
        position: relative;
        cursor: pointer;
        transition: all var(--duration-normal) var(--ease-out-quart);
        padding: 0;
        flex-shrink: 0;
        
        &[data-on="true"] {
            background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
            border-color: var(--accent-green-dark);
            
            & .toggle-slider {
                inset-inline-end: calc(100% - 24px);
            }
        }
    }

    .toggle-slider {
        position: absolute;
        inset-block-start: 2px;
        inset-inline-end: 2px;
        inline-size: 22px;
        block-size: 22px;
        border-radius: 50%;
        background: var(--color-white);
        transition: all var(--duration-normal) var(--ease-out-back);
        box-shadow: 0 2px 6px color-mix(in oklab, black 30%, transparent);
    }

    .theme-selector {
        display: flex;
        gap: var(--space-2xs);
        flex-wrap: wrap;
    }

    .theme-btn {
        inline-size: 36px;
        block-size: 36px;
        border-radius: var(--radius-sm);
        background: var(--surface-elevated);
        border: 2px solid color-mix(in oklab, white 10%, transparent);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        transition: all var(--duration-fast) ease;
        padding: 0;
        
        &.active {
            border-color: var(--accent-gold);
            background: color-mix(in oklab, var(--accent-gold) 20%, transparent);
            transform: scale(1.1);
        }
        
        &:active {
            transform: scale(0.95);
        }
    }

    .danger-btn {
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--radius-sm);
        background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
        border: none;
        color: var(--color-white);
        font-family: var(--font-display);
        font-weight: 700;
        font-size: var(--text-xs);
        cursor: pointer;
        transition: all var(--duration-fast) ease;
        
        &:active {
            transform: scale(0.95);
        }
    }

    /* ═══ Shop ═══ */
    .shop-coins-display {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        background: color-mix(in oklab, var(--accent-gold) 12%, transparent);
        border: 1px solid color-mix(in oklab, var(--accent-gold) 30%, transparent);
        border-radius: var(--radius-md);
        padding: var(--space-xs) var(--space-md);
        margin-block-end: var(--space-md);
        font-weight: 900;
        font-size: var(--text-lg);
        font-family: var(--font-mono);
        color: var(--accent-gold);
    }

    .shop-items {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        margin-block-end: var(--space-md);
        max-block-size: 400px;
        overflow-y: auto;
        padding: var(--space-2xs);
        overscroll-behavior: contain;
    }

    .shop-item {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm);
        background: var(--surface-card);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        transition: all var(--duration-normal) ease;
        text-align: start;
        position: relative;
        
        &:hover {
            border-color: var(--border-glow);
            background: var(--surface-glass);
        }
    }

    .item-badge {
        position: absolute;
        inset-block-start: -6px;
        inset-inline-end: 8px;
        background: linear-gradient(135deg, var(--accent-red), var(--accent-orange));
        color: var(--color-white);
        font-size: 0.6rem;
        font-weight: 900;
        padding: 2px 8px;
        border-radius: var(--radius-full);
        font-family: var(--font-display);
        box-shadow: var(--shadow-sm);
    }

    .shop-item-icon {
        font-size: 1.8rem;
        inline-size: 50px;
        block-size: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-elevated);
        border-radius: var(--radius-md);
        flex-shrink: 0;
    }

    .shop-item-info {
        flex: 1;
        text-align: start;
        min-inline-size: 0;
    }

    .shop-item-title {
        font-weight: 700;
        font-size: var(--text-sm);
        margin-block-end: 2px;
    }

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

    .shop-item-price {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        padding: var(--space-2xs) var(--space-sm);
        background: color-mix(in oklab, var(--accent-gold) 15%, transparent);
        border: 1px solid color-mix(in oklab, var(--accent-gold) 30%, transparent);
        border-radius: var(--radius-sm);
        font-weight: 900;
        font-size: var(--text-sm);
        font-family: var(--font-mono);
        color: var(--accent-gold);
        cursor: pointer;
        transition: all var(--duration-fast) ease;
        flex-shrink: 0;
        
        &:hover:not(:disabled) {
            background: color-mix(in oklab, var(--accent-gold) 25%, transparent);
        }
        
        &:active:not(:disabled) {
            transform: scale(0.95);
        }
        
        &:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        &.insufficient {
            opacity: 0.55;
            cursor: pointer;
        }
        
        &.owned {
            background: color-mix(in oklab, var(--accent-green) 15%, transparent);
            border-color: color-mix(in oklab, var(--accent-green) 30%, transparent);
            color: var(--accent-green);
            cursor: default;
        }
    }
}

/* ═══════════ Layer: Animations ═══════════ */
@layer animations {
    /* Confetti */
    .confetti-container {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .confetti {
        position: absolute;
        inline-size: 10px;
        block-size: 10px;
        background: var(--accent-gold);
        animation: confettiFall 3s linear forwards;
    }

    @keyframes confettiFall {
        0% {
            transform: translateY(-100px) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateY(400px) rotate(720deg);
            opacity: 0;
        }
    }

    /* Shake */
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }

    .shake {
        animation: shake 0.3s ease-in-out;
    }

    /* Glow */
    @keyframes glow {
        0%, 100% { box-shadow: 0 0 10px color-mix(in oklab, var(--accent-gold) 30%, transparent); }
        50% { box-shadow: 0 0 30px color-mix(in oklab, var(--accent-gold) 60%, transparent); }
    }

    .glow {
        animation: glow 1.5s infinite;
    }

    /* Success Pulse */
    @keyframes successPulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-green) 70%, transparent);
        }
        70% {
            transform: scale(1.05);
            box-shadow: 0 0 0 20px color-mix(in oklab, var(--accent-green) 0%, transparent);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-green) 0%, transparent);
        }
    }

    .success-pulse {
        animation: successPulse 0.6s ease-out;
    }

    /* Error Shake */
    @keyframes errorShake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
        20%, 40%, 60%, 80% { transform: translateX(8px); }
    }

    .error-shake {
        animation: errorShake 0.5s ease-in-out;
    }
}

/* ═══════════ Layer: Utilities ═══════════ */
@layer utilities {
    /* Toast Container */
    #toast-container {
        position: fixed;
        inset-block-end: 100px;
        inset-inline-start: 50%;
        translate: -50% 0;
        z-index: var(--z-toast);
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        align-items: center;
        pointer-events: none;
        inline-size: max-content;
        max-inline-size: 90vw;
    }

    .toast {
        background: color-mix(in oklab, #1e1e3f 95%, transparent);
        border: 1px solid var(--border-medium);
        color: var(--color-white);
        padding: var(--space-sm) var(--space-lg);
        border-radius: var(--radius-lg);
        font-family: var(--font-display);
        font-weight: 700;
        font-size: var(--text-sm);
        backdrop-filter: blur(var(--blur-md));
        -webkit-backdrop-filter: blur(var(--blur-md));
        box-shadow: var(--shadow-xl);
        animation: toastIn var(--duration-normal) var(--ease-out-back);
        white-space: nowrap;
        max-inline-size: 90vw;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        
        &.hiding {
            animation: toastOut var(--duration-normal) ease forwards;
        }
    }

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

    @keyframes toastOut {
        to {
            opacity: 0;
            transform: translateY(-10px) scale(0.9);
        }
    }

    /* FAB Container */
    .fab-container {
        position: fixed;
        inset-block-end: 20px;
        inset-inline-end: 20px;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        z-index: var(--z-dropdown);
    }

    .fab-btn {
        inline-size: 46px;
        block-size: 46px;
        border-radius: 50%;
        background: var(--surface-glass);
        border: 1px solid var(--border-subtle);
        color: var(--color-white);
        font-size: 1.1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(var(--blur-md));
        -webkit-backdrop-filter: blur(var(--blur-md));
        transition: all var(--duration-fast) var(--ease-out-quart);
        box-shadow: var(--shadow-lg);
        
        &:hover {
            border-color: var(--border-glow);
            background: var(--surface-hover);
            transform: translateY(-2px);
        }
        
        &:active {
            transform: scale(0.9);
        }
    }

    /* Screen Reader Only */
    .sr-only {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    /* Hidden */
    .hidden {
        display: none !important;
    }

    /* No pointer events */
    .no-pointer {
        pointer-events: none;
    }

    /* Text gradient */
    .text-gradient {
        background: linear-gradient(135deg, var(--accent-gold), var(--accent-orange));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* ═══════════ Layer: Responsive ═══════════ */
@layer responsive {
    /* Small Phones */
    @media (max-width: 480px) {
        :root {
            --space-md: 0.875rem;
            --space-lg: 1.25rem;
        }
        
        .game-title { font-size: 1.8rem; }
        .logo-icon { font-size: 3rem; }
        .logo-ring { inline-size: 95px; block-size: 95px; }
        .stat-box { padding: var(--space-xs) var(--space-sm); min-inline-size: 85px; }
        .stat-value { font-size: var(--text-base); }
        .stat-icon-wrapper { inline-size: 34px; block-size: 34px; font-size: 1rem; }
        
        .bolt { inline-size: 54px; block-size: 210px; }
        .bolt-pole { inline-size: 11px; block-size: 182px; }
        .bolt-base { inline-size: 58px; block-size: 17px; }
        .nut { inline-size: 44px; block-size: 32px; }
        .nut::after { inline-size: 12px; block-size: 12px; }
        
        .game-board { gap: var(--space-xs); padding: var(--space-sm) var(--space-xs); }
        
        .controls {
            gap: var(--space-2xs);
            padding: var(--space-xs) var(--space-xs) var(--space-md);
            padding-inline-end: calc(40px + var(--space-xs) + var(--space-2xs));
        }
        
        .btn-control {
            min-block-size: 64px;
            padding: var(--space-xs) var(--space-2xs);
            border-radius: var(--radius-md);
        }
        
        .ctrl-icon { font-size: 1.1rem; }
        .ctrl-text { font-size: var(--text-xs); }
        .ctrl-cost { font-size: 0.55rem; padding: 1px 6px; }
        
        .top-bar { padding: var(--space-xs) var(--space-sm); }
        .btn-icon-top { inline-size: 36px; block-size: 36px; font-size: 0.9rem; }
        .info-box { font-size: var(--text-xs); }
        
        .fab-btn { inline-size: 40px; block-size: 40px; }
        
        .levels-grid {
            grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
            gap: var(--space-xs);
        }
        
        .stats-list { grid-template-columns: 1fr; }
    }

    /* Landscape Mode */
    @media (max-height: 700px) {
        .bolt { block-size: 190px; }
        .bolt-pole { block-size: 162px; }
        .game-board { min-block-size: 240px; padding: var(--space-xs); }
        .logo-container { margin-block-end: var(--space-md); }
        .lobby-stats { margin-block-end: var(--space-md); }
        .logo-ring { inline-size: 85px; block-size: 85px; }
        .logo-icon { font-size: 2.8rem; }
        .progress-bar-container { block-size: 6px; margin: var(--space-2xs) auto; }
    }

    /* Container Query للوحة */
    @container board (max-width: 400px) {
        .bolt {
            inline-size: 48px;
            block-size: 190px;
        }
        
        .bolt-pole {
            inline-size: 10px;
            block-size: 162px;
        }
        
        .bolt-base {
            inline-size: 52px;
            block-size: 16px;
        }
        
        .nut {
            inline-size: 40px;
            block-size: 30px;
        }
        
        .nut::after {
            inline-size: 11px;
            block-size: 11px;
        }
        
        .game-board {
            gap: 8px;
            padding: 10px 6px;
        }
    }

    @container board (min-width: 600px) {
        .game-board {
            gap: 18px;
        }
    }

    /* Dark mode preference */
    @media (prefers-color-scheme: light) {
        /* اللعبة مصممة للوضع الداكن، لكن يمكن إضافة تعديلات */
    }

    /* High contrast */
    @media (prefers-contrast: high) {
        :root {
            --border-subtle: color-mix(in oklab, white 30%, transparent);
            --border-medium: color-mix(in oklab, white 50%, transparent);
            --border-strong: color-mix(in oklab, white 70%, transparent);
        }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
        
        .bg-orb {
            animation: none;
        }
        
        .floating-nut {
            animation: none;
        }
    }

    /* Print */
    @media print {
        .animated-bg,
        .fab-container,
        #toast-container,
        .modal-overlay {
            display: none !important;
        }
    }
}

/* ═══════════ Forge 3D Presentation ═══════════ */
#forge-scene {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0.82;
    filter: saturate(1.25) contrast(1.08);
    pointer-events: none;
}

#forge-scene.scene-fallback {
    background:
        radial-gradient(ellipse at 50% 45%, rgba(24, 111, 132, 0.22), transparent 55%),
        radial-gradient(ellipse at 15% 80%, rgba(194, 121, 43, 0.12), transparent 42%);
}

.animated-bg .bg-orb {
    opacity: 0.2;
}

#game-screen.active {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 50% 48%, rgba(13, 41, 57, 0.12), transparent 62%),
        linear-gradient(180deg, rgba(4, 10, 18, 0.24), rgba(4, 8, 14, 0.58));
}

#game-screen > * {
    z-index: 1;
}

#game-screen .top-bar {
    background: linear-gradient(135deg, rgba(17, 31, 42, 0.88), rgba(13, 18, 26, 0.76));
    border-color: rgba(137, 224, 235, 0.22);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.26), inset 0 1px rgba(255, 255, 255, 0.12);
}

#game-screen .info-box {
    color: #e6f7f5;
    text-shadow: 0 0 14px rgba(73, 224, 232, 0.16);
}

#game-screen .progress-bar-container {
    block-size: 10px;
    background: rgba(2, 12, 19, 0.78);
    border-color: rgba(135, 226, 233, 0.22);
    box-shadow: 0 0 22px rgba(37, 208, 219, 0.12), inset 0 2px 5px rgba(0, 0, 0, 0.78);
}

#game-screen .progress-bar {
    background: linear-gradient(90deg, #24c7c9, #9be16b 58%, #ffd16f);
    box-shadow: 0 0 14px rgba(58, 227, 218, 0.55);
}

.game-board {
    position: relative;
    isolation: isolate;
    perspective: 1100px;
    transform-style: preserve-3d;
    max-block-size: 56dvh;
}

.game-board::before {
    content: '';
    position: absolute;
    inset: 7% 2% 4%;
    z-index: -1;
    border: 1px solid rgba(137, 225, 231, 0.34);
    border-radius: 8px;
    background:
        repeating-linear-gradient(110deg, rgba(199, 246, 238, 0.018) 0 1px, transparent 1px 34px),
        linear-gradient(180deg, rgba(94, 219, 213, 0.07), transparent 28%, rgba(245, 184, 94, 0.06)),
        linear-gradient(145deg, rgba(31, 69, 77, 0.42), rgba(8, 17, 25, 0.62) 48%, rgba(68, 49, 29, 0.24));
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px rgba(219, 255, 248, 0.12),
        inset 0 -22px 38px rgba(0, 0, 0, 0.24),
        0 0 42px rgba(37, 190, 201, 0.16);
    transform: rotateX(4deg) translateZ(-12px);
    pointer-events: none;
}

.bolt {
    z-index: 1;
    transform-style: preserve-3d;
    filter: drop-shadow(0 12px 11px rgba(0, 0, 0, 0.26));
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), filter 240ms ease;
}

.bolt:hover {
    transform: translateY(-5px) rotateX(3deg);
    filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.38));
}

.bolt-pole {
    inline-size: 15px;
    background:
        linear-gradient(90deg, #252b30 0%, #64747a 16%, #d6e5df 34%, #fff8df 47%, #a4b8b8 56%, #45535a 82%, #1d2429 100%);
    box-shadow:
        inset 1px 0 2px rgba(255, 255, 255, 0.85),
        inset -2px 0 4px rgba(0, 0, 0, 0.72),
        0 0 14px rgba(106, 224, 224, 0.12),
        3px 0 6px rgba(0, 0, 0, 0.5);
}

.bolt-pole::before {
    content: '';
    position: absolute;
    inset: 5px 1px;
    border-radius: 4px;
    background: repeating-linear-gradient(180deg, transparent 0 8px, rgba(21, 31, 35, 0.34) 8px 10px);
    box-shadow: inset 1px 0 rgba(255, 255, 255, 0.2);
}

.bolt-base {
    inline-size: 66px;
    block-size: 21px;
    border: 1px solid rgba(255, 244, 207, 0.5);
    background: linear-gradient(180deg, #f8e8bd 0%, #b5b8a8 16%, #69767a 42%, #333d43 78%, #171e23 100%);
    box-shadow:
        0 11px 20px rgba(0, 0, 0, 0.56),
        inset 0 2px 4px rgba(255, 255, 255, 0.66),
        inset 0 -4px 7px rgba(0, 0, 0, 0.72),
        0 0 15px rgba(64, 209, 214, 0.13);
}

.bolt-base::after {
    content: '';
    position: absolute;
    inset: 5px 12px 4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 226, 159, 0.52);
    box-shadow: 0 0 8px rgba(255, 189, 94, 0.32), inset 0 1px rgba(255, 255, 255, 0.55);
}

.nut {
    inline-size: 52px;
    block-size: 37px;
    clip-path: polygon(23% 2%, 77% 2%, 100% 50%, 77% 98%, 23% 98%, 0 50%);
    border: 0;
    box-shadow:
        inset 0 5px 7px rgba(255, 255, 255, 0.54),
        inset 0 -7px 9px rgba(0, 0, 0, 0.5),
        0 7px 12px rgba(0, 0, 0, 0.46);
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25));
}

.nut::before {
    content: '';
    position: absolute;
    inset: 1px 8px auto;
    block-size: 5px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
    opacity: 0.72;
    pointer-events: none;
}

.nut::after {
    inline-size: 15px;
    block-size: 15px;
    background: radial-gradient(circle at 38% 35%, #394952 0%, #10191e 52%, #05090d 72%);
    border: 1px solid rgba(234, 255, 250, 0.38);
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.95),
        0 1px 3px rgba(255, 255, 255, 0.4),
        0 0 7px rgba(6, 12, 16, 0.6);
}

.nut.selected {
    filter: brightness(1.28) drop-shadow(0 0 16px rgba(113, 242, 224, 0.8));
}

.controls {
    gap: 10px;
}

.btn-control {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
}

.btn-control.hint { background: linear-gradient(145deg, #f4c65c, #a85c2c); }
.btn-control.undo { background: linear-gradient(145deg, #47b8c5, #205b7c); }
.btn-control.bolt-action { background: linear-gradient(145deg, #e67b51, #8c382e); }
.btn-control.restart { background: linear-gradient(145deg, #96a6a3, #45545a); }

@media (max-width: 600px) {
    #forge-scene { opacity: 0.56; }
    .game-board {
        max-block-size: 54dvh;
        gap: 4px;
        padding-inline: 2px;
    }

    #game-screen.active {
        background: linear-gradient(180deg, rgba(4, 10, 18, 0.32), rgba(4, 8, 14, 0.7));
    }

    .game-board::before {
        inset-inline: 1%;
        opacity: 0.76;
        transform: rotateX(2deg) translateZ(-8px);
    }

    .bolt { inline-size: 44px; }
    .bolt-pole { inline-size: 10px; }
    .bolt-base { inline-size: 46px; }
    .nut { inline-size: 42px; }
    .nut::after { inline-size: 13px; block-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    #forge-scene { opacity: 0.28; }
    .bolt:hover { transform: none; }
}