/* ============================================
   MARK ANTHONY WIPFLER'S CUBE TIMER - STYLES
   ============================================
   Separated from index.html for easier maintenance
   Copyright (C) 2025 Mark Anthony Wipfler. All Rights Reserved.
*/

        /* ============================================
           SECTION 1.1 - BODY & GLOBAL STYLES + PSYCHEDELIC FRACTAL SYSTEM
           ============================================
           [MODIFIED 2024-12-19: REMOVED TEXT GLOW - SHARP TEXT ONLY]
          
           Three overlapping color waves create fractal-like complexity:
           - --master-hue: Primary color wave (drives most elements)
           - --secondary-hue: Offset wave (+120° + oscillation)
           - --tertiary-hue: Third wave (+240° + oscillation)
          
           CONTRAST LOCKS (nothing ever disappears):
           - Background: 3% lightness (VERY DARK)
           - Text: 98% lightness (SUPER BRIGHT, NO GLOW)
           - Borders: 65% lightness (VIVID NEON with glow)
           - Button fills: 18% lightness (dark but visible)
           - Button text: 98% lightness (SHARP, NO GLOW)
           - ALL colors at 100% saturation (PURE NEON)
        */
        :root {
            --master-hue: 140; /* Primary wave (animated by JS) */
            --secondary-hue: 260; /* Secondary wave (animated by JS) */
            --tertiary-hue: 20; /* Tertiary wave (animated by JS) */
            
            /* Control bar spacing - dynamically updated by JS */
            --control-bar-height: 100px;
            --content-top-offset: 120px;
            
            /* SITE-WIDE BACKGROUND COLOR - Change this ONE value to change entire site */
            --site-background: #808080; /* 50% grey (absolute middle between black and white) */
        }
       
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            /* NEON: Background cycles but stays VERY DARK */
            background-color: var(--site-background) !important;
            /* NEON: Text uses secondary hue, SUPER BRIGHT */
            color: hsl(var(--secondary-hue), 100%, 98%);
            /* NO TEXT SHADOW - Sharp and readable! */
            margin: 20px;
            position: relative;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            /* Smooth transitions between color changes */
            transition: background-color 0.05s linear, color 0.05s linear;
            /* Prevent horizontal scrolling */
            overflow-x: clip;
            max-width: 100%;
            /* GLOBAL FONT SIZE - 20px for all text */
            font-size: 20px;
        }
        
        /* GLOBAL 20px FONT SIZE - Apply to most elements */
        p, span, div, label, button, input, select, textarea, td, th, li, a {
            font-size: 20px !important;
        }
        
        /* EXCEPTIONS - Keep these larger or different */
        #timerTop, #timerBottom {
            font-size: 8vw !important;
        }
        #miniTimer {
            font-size: 28px !important;
        }
        h1 {
            font-size: 36px !important;
        }
        h2 {
            font-size: 30px !important;
        }
        h3 {
            font-size: 26px !important;
        }
        
        /* Control bar - base 20px with exceptions */
        #miniTimerBar button, #miniTimerBar span {
            font-size: 20px !important;
        }
        /* BIGGER: Activity name and timer */
        #miniCurrentCubeName {
            font-size: 32px !important;
        }
        #miniTimer {
            font-size: 36px !important;
        }
        
        /* Copyright banner stays smaller */
        #copyrightBanner span {
            font-size: 12px !important;
        }
        
        /* Scramble display always 20px */
        #scrambleDisplay {
            font-size: 20px !important;
            color: #000000 !important;
            text-shadow: none !important;
            animation: none !important;
        }
       
        /* ============================================
           SECTION 1.2 - FLASH OVERLAY
           ============================================
           This is the green flash effect that appears when:
           - Inspection time runs out (triple beep)
           - Used for visual feedback along with sound
        */
        #flashOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #00FF00;
            opacity: 0;
            display: none;
            z-index: 100;
        }
       
        /* ============================================
           SECTION 1.3 - LANGUAGE SELECTOR SCREEN
           ============================================
           [MODIFIED 2024-12-19 21:30 UTC]
           FIXED: Scrolling issue - reduced sizes to fit all 12 languages on screen
          
           This is the FIRST thing users see when they load the page.
           It's a full-screen overlay that shows all 12 language options.
           - position: fixed makes it cover the entire viewport
           - z-index: 2000 puts it above everything else
           - display: none by default, shown with .show class
           - Flexbox centers everything vertically and horizontally
          
           Changes made to fix scrolling:
           - Added overflow-y: auto to allow scrolling if needed
           - Reduced padding to make container more compact
        */
        #languageSelectorScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--site-background);
            z-index: 2000;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 1;
            transition: opacity 2s ease-in-out; /* Professional fade */
            overflow-y: auto;
            padding: 20px 0;
        }
        #languageSelectorScreen.show {
            display: flex;
        }
        #languageSelectorScreen.hidden {
            opacity: 0;
            pointer-events: none;
            display: none !important; /* Actually hide it, not just make transparent */
        }
       
        /* ============================================
           SECTION 1.4 - LANGUAGE OPTION CARDS
           ============================================
           [MODIFIED 2024-12-19 21:30 UTC]
           FIXED: Reduced card sizes to fit all 12 languages on screen without scrolling
          
           These are the 12 clickable language buttons.
           - CSS Grid arranges them automatically
           - Each card has flag emoji + language name
           - Hover effects make them glow and lift up
          
           Changes made to fix scrolling:
           - Reduced minmax from 200px to 160px (cards are narrower)
           - Reduced gap from 20px to 15px (tighter spacing)
           - Reduced padding from 20px to 15px (container is more compact)
           - Reduced card padding from 25px to 15px (cards are smaller)
           - Reduced font size from 24px to 20px (text is smaller)
           - Reduced flag emoji from 48px to 40px (flags are smaller)
           - Added max-height to prevent overflow
        */
        .language-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); /* REDUCED 10% from 160px */
            gap: 14px; /* REDUCED 10% from 15px */
            max-width: 900px;
            padding: 14px; /* REDUCED 10% from 15px */
            max-height: 70vh; /* ADDED: Limit height to 70% of viewport */
            overflow-y: auto; /* ADDED: Allow scrolling within grid if needed */
        }
        .language-option {
            /* NEON: Gradient using master and tertiary waves, DARK base */
            background: linear-gradient(135deg,
                hsl(var(--master-hue), 100%, 8%),
                hsl(var(--tertiary-hue), 100%, 12%));
            /* NEON: Border BRIGHT and vivid */
            border: 3px solid hsl(var(--secondary-hue), 100%, 65%);
            border-radius: 15px;
            padding: 14px 9px;
            font-size: 18px;
            /* NEON: Text SUPER BRIGHT and SHARP */
            color: hsl(calc(var(--master-hue) + 180), 100%, 98%);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* EXTENDED: Smooth professional transition */
            box-shadow: 0 0 25px hsl(var(--secondary-hue), 100%, 50%),
                        inset 0 0 15px hsl(var(--tertiary-hue), 100%, 20%);
        }
        .language-option:hover {
            /* NEON: Brighter gradient on hover */
            background: linear-gradient(135deg,
                hsl(var(--master-hue), 100%, 15%),
                hsl(var(--tertiary-hue), 100%, 20%));
            /* NEON: Border even brighter on hover */
            border-color: hsl(var(--master-hue), 100%, 70%);
            transform: translateY(-5px) scale(1.26);
            /* NEON: INTENSE multi-color glow on hover (border glow only) */
            box-shadow: 0 0 40px hsl(var(--secondary-hue), 100%, 60%),
                        0 0 60px hsl(var(--master-hue), 100%, 55%),
                        inset 0 0 20px hsl(var(--tertiary-hue), 100%, 30%);
            /* NO TEXT GLOW - keeps text sharp */
        }
        .language-option .flag {
            display: none; /* HIDDEN 2024-12-19: Flag emojis rendering as white boxes */
        }
        .language-option .name {
            font-weight: bold;
            display: block;
        }
       
        /* ============================================
           SECTION 1.5 - MOBILE RESPONSIVE - LANGUAGE SELECTOR
           ============================================
           [MODIFIED 2024-12-19 21:30 UTC]
           FIXED: Adjusted mobile sizes to match desktop reductions
          
           These @media queries adjust the language selector for different screen sizes:
           - Tablets (768px): Smaller fonts, tighter spacing
           - Phones (480px): 2-column grid instead of auto-fit
          
           Changes made to fix scrolling on mobile:
           - Reduced title from 32px to 28px on tablets
           - Reduced minmax from 150px to 140px on tablets
           - Reduced gap and padding to match desktop reductions
           - Reduced card padding to 15px (from 20px)
           - Reduced card font-size to 16px (from 18px)
           - Reduced flag from 36px to 32px
        */
        @media (max-width: 768px) {
            .language-grid {
                grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); /* REDUCED 10% from 140px */
                gap: 11px; /* REDUCED 10% from 12px */
                padding: 11px; /* REDUCED 10% from 12px */
            }
            .language-option {
                padding: 14px 9px; /* REDUCED 10% from 15px 10px */
                font-size: 14px; /* REDUCED 10% from 16px */
            }
            .language-option .flag {
                display: none; /* HIDDEN: Flag emojis not rendering */
            }
        }
       
        @media (max-width: 480px) {
            .language-grid {
                grid-template-columns: repeat(2, 1fr); /* Force 2 columns on phones */
            }
        }
       
        /* ============================================
           SECTION 1.6 - MAIN CONTENT VISIBILITY CONTROL
           ============================================
           This controls when the main timer page is visible:
           - Starts completely hidden (opacity: 0)
           - pointer-events: none means you can't click anything
           - When .loaded class is added, it fades in over 0.5 seconds
           - This happens AFTER user dismisses the refresh banner
        */
        #content {
            position: relative;
            min-height: 100vh;
            z-index: 1;
            opacity: 0;
            transform: translateY(20px); /* ADDED: Slight upward slide effect */
            pointer-events: none;
            transition: opacity 2s ease-in-out, transform 2s ease-out; /* EXTENDED: 2s smooth professional fade with slide */
            padding-top: 0; /* Removed extra padding - spacer handles it */
            background-color: var(--site-background) !important;
        }
        #content.loaded {
            opacity: 1;
            transform: translateY(0); /* ADDED: Slides into final position */
            pointer-events: auto;
        }
       
        /* ============================================
           FLASH OVERLAY
           ============================================
           This is the green flash effect that appears when:
           - Inspection time runs out (triple beep)
           - Used for visual feedback along with sound
        */
        #flashOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #00FF00;
            opacity: 0;
            display: none;
            z-index: 100;
        }
       
        /* ============================================
           SECTION 1.7 - SUNE CONTAINER
           ============================================
           This is the collapsible section at the top of the timer that shows
           the 4 master algorithms for solving Rubik's cubes:
           1. Sune - The core algorithm (7 moves)
           2. Anti-Sune - Inverse of Sune (7 moves)
           3. Double Sune - Most important OLL algorithm (12 moves)
           4. Anti-Double-Sune - Inverse of Double Sune (12 moves)
          
           These algorithms are displayed as cards with:
           - Chunked move sequences for better memorization
           - Copy buttons to copy algorithms to clipboard
           - Move counts
           - Hover effects
        */
        #suneContainer {
            margin: 10px auto 15px auto;
            max-width: 1400px;
            border: 2px solid #00FF00;
            border-radius: 10px;
            background: rgba(0, 255, 0, 0.05);
            padding: 8px;
        }
       
        /* The toggle button that expands/collapses the Sune section */
        #suneToggleBtn {
            font-size: 18px;
            padding: 12px 24px;
            background: #111111;
            color: #00FF00;
            border: 2px solid #00FF00;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
            display: block;
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
        }
       
        #suneToggleBtn:hover {
            background: #222222;
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
        }
       
        /* The content that shows/hides when you click the toggle button */
        #suneContent {
            display: none; /* Hidden by default */
            margin-top: 20px;
            position: relative; /* For X button positioning */
        }
       
        #suneContent.show {
            display: block; /* Shown when .show class is added */
        }
       
        /* Introduction text explaining what the Sune algorithms are */
        .sune-intro {
            background: rgba(0, 255, 0, 0.1);
            border: 2px solid #00FF00;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            font-size: 18px;
            color: #00FF00;
        }
       
        /* Grid layout that holds the 4 algorithm cards */
        .sune-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive: auto-fits cards */
            gap: 20px;
            margin-bottom: 20px;
        }
       
        /* Individual algorithm card styling */
        .sune-card {
            background: #111111;
            border: 2px solid #00FF00;
            border-radius: 12px;
            padding: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
        }
       
        .sune-card:hover {
            transform: translateY(-5px); /* Lifts up on hover */
            box-shadow: 0 0 25px rgba(0, 255, 0, 0.5);
            border-color: #00FFFF; /* Border changes to cyan */
        }
       
        /* Card header contains the algorithm name and copy button */
        .sune-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
       
        /* Algorithm name (e.g., "Sune", "Double Sune") */
        .sune-name {
            font-size: 22px;
            font-weight: bold;
            color: #00FFFF;
        }
       
        /* Label showing type (Core or Master Algorithm) */
        .sune-type {
            font-size: 12px;
            color: #00FF00;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
       
        /* Copy button that copies algorithm to clipboard */
        .sune-copy-btn {
            background: rgba(0, 255, 0, 0.2);
            border: 1px solid #00FF00;
            color: #00FF00;
            padding: 8px 12px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            /* ADDED 2024-12-19: Smooth fade effect */
            transition: all 0.3s ease-in-out;
        }
       
        .sune-copy-btn:hover {
            background: rgba(0, 255, 0, 0.4);
            transform: scale(1.32);
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.6);
        }
       
        .sune-copy-btn:active {
            transform: scale(0.95);
        }
       
        /* Container for the move sequence (e.g., "U R U' R") */
        .sune-sequence {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            border: 1px solid rgba(0, 255, 0, 0.3);
        }
       
        /* Individual move chunk (4-move sequences for muscle memory) */
        .sune-chunk {
            font-family: monospace; /* Fixed-width font for alignment */
            font-size: 16px;
            font-weight: bold;
            color: #FFFFFF;
            background: linear-gradient(135deg, rgba(0, 255, 0, 0.2), rgba(0, 255, 255, 0.2));
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid #00FF00;
            transition: all 0.2s ease;
        }
       
        .sune-chunk:hover {
            background: linear-gradient(135deg, rgba(0, 255, 0, 0.4), rgba(0, 255, 255, 0.4));
            transform: translateY(-2px); /* Lifts slightly on hover */
            box-shadow: 0 4px 10px rgba(0, 255, 0, 0.3);
        }
       
        /* Footer shows move count and description */
        .sune-footer {
            display: flex;
            align-items: center;
            gap: 15px;
        }
       
        /* Box showing number of moves (e.g., "7 moves", "12 moves") */
        .sune-move-count {
            background: rgba(0, 255, 0, 0.2);
            padding: 10px 15px;
            border-radius: 8px;
            border: 1px solid #00FF00;
            text-align: center;
            min-width: 70px;
        }
       
        .sune-count-number {
            font-size: 24px;
            font-weight: bold;
            color: #00FF00;
            display: block;
        }
       
        .sune-count-label {
            font-size: 10px;
            color: #00FFFF;
            text-transform: uppercase;
        }
       
        /* Description text (e.g., "The core OLL algorithm") */
        .sune-description {
            flex: 1;
            color: #CCCCCC;
            font-size: 14px;
            text-align: left;
        }
       
        /* The "Anti" principle explanation box at the bottom */
        .sune-principle {
            background: rgba(0, 255, 255, 0.1);
            border: 2px solid #00FFFF;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
        }
       
        .sune-principle h3 {
            color: #00FFFF;
            font-size: 20px;
            margin-bottom: 15px;
        }
       
        .sune-principle ul {
            list-style: none;
            padding: 0;
            text-align: left;
            max-width: 800px;
            margin: 0 auto;
        }
       
        .sune-principle li {
            color: #CCCCCC;
            padding: 8px 0;
            padding-left: 25px;
            position: relative;
            font-size: 16px;
        }
       
        /* Arrow bullets for the principle list */
        .sune-principle li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: #00FF00;
            font-weight: bold;
            font-size: 18px;
        }
       
        /* Mobile responsive for Sune section */
        @media (max-width: 768px) {
            .sune-grid {
                grid-template-columns: 1fr; /* Single column on mobile */
            }
            #suneToggleBtn {
                font-size: 20px;
                padding: 12px 30px;
            }
            .sune-chunk {
                font-size: 14px;
                padding: 6px 10px;
            }
        }
       
        #puzzleMenuContainer {
            position: relative;
            z-index: 5;
        }
        /* OLD LANGUAGE DROPDOWN - NO LONGER USED - NOW USING MODAL */
        /*
        #languageMenu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.95);
            border: 2px solid #00BFFF;
            border-radius: 10px;
            padding: 10px;
            display: none;
            min-width: 200px;
            text-align: left;
            z-index: 10;
            box-shadow: 0 0 20px rgba(0, 191, 255, 0.5), 0 0 40px rgba(0, 191, 255, 0.3);
        }
        #languageMenu button {
            width: 100%;
            margin: 2px 0;
            text-align: left;
            background: none;
            border: none;
            color: #00FFFF;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
            transition: all 0.2s ease;
        }
        #languageMenu button:hover {
            background-color: rgba(0, 191, 255, 0.2);
            transform: translateX(5px);
        }
        */
        
        /* Language option buttons hover - bring to front when hovered */
        [id^="langOption_"]:hover {
            z-index: 100 !important;
        }
        
        /* OVERRIDE global button:hover scale - NO SCALING for language modal buttons */
        /* Scale transforms don't affect layout and cause clipping - glow is enough */
        #languageModal button:hover {
            transform: none !important;
        }
        
        /* OVERRIDE global button:hover scale for control bar buttons too */
        /* Prevents overlap issues when buttons wrap on smaller screens */
        #miniTimerBar button:hover {
            transform: none !important;
        }
        
        h1 { font-size: 48px; }
        h2 { font-size: 36px; }
        h3 { font-size: 28px; }
        p, label { font-size: 20px; }
        #timerTop, #timerBottom {
            font-size: 8vw;
            font-weight: bold;
            margin: 6px 0;
            z-index: 3;
            transition: color 0.2s ease-in-out;
        }
        #timerTop.ready, #timerBottom.ready { color: #00FF00 !important; }
        #timerTop.inspecting, #timerBottom.inspecting { color: #FFFF00 !important; }
        #scrambleDisplay { font-size: 14px; margin: 3px; font-family: monospace; padding: 10px; }
        
        /* 3D CUBE PREVIEW - ULTRA PREMIUM EDITION */
        .cube-preview-container {
            display: none; /* HIDDEN - 3D cube preview removed */
            perspective: 1500px;
            justify-content: center;
            align-items: center;
            min-height: 450px;
            margin: 40px auto;
            max-width: 500px;
            position: relative;
            background: radial-gradient(circle at center, rgba(0,255,0,0.03) 0%, transparent 70%);
            border-radius: 20px;
            padding: 30px;
        }
        .cube-preview-container::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(0,255,0,0.1) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(40px);
            opacity: 0.4;
        }
        .scene-3d {
            width: 380px;
            height: 380px;
            position: relative;
            z-index: 1;
        }
        .cube-3d {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-20deg) rotateY(40deg);
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: grab;
            filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
        }
        .cube-3d.dragging { 
            cursor: grabbing; 
            transition: none; 
            filter: drop-shadow(0 40px 80px rgba(0,255,0,0.4));
        }
        .face-3d {
            position: absolute;
            width: 380px;
            height: 380px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 10px;
            padding: 12px;
            background: #000;
            border: 3px solid rgba(0,255,0,0.3);
            box-shadow: 
                inset 0 0 40px rgba(0,0,0,0.9),
                0 0 20px rgba(0,255,0,0.2);
            backdrop-filter: blur(10px);
        }
        .sticker-3d {
            border: 3px solid rgba(0,0,0,0.5);
            border-radius: 12px;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 
                inset 0 0 20px rgba(255,255,255,0.3),
                inset 0 -10px 30px rgba(0,0,0,0.3),
                0 8px 16px rgba(0,0,0,0.5);
        }
        /* Multi-layer lighting effect */
        .sticker-3d::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 60%);
            pointer-events: none;
            opacity: 0.5;
        }
        .sticker-3d::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 60%;
            height: 60%;
            background: linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.3) 100%);
            pointer-events: none;
        }
        .sticker-3d:hover {
            transform: scale(1.344) translateZ(20px);
            box-shadow: 
                inset 0 0 30px rgba(255,255,255,0.5),
                0 0 40px rgba(0,255,255,0.8),
                0 0 60px rgba(0,255,255,0.6),
                0 12px 24px rgba(0,0,0,0.6);
            border-color: rgba(0,255,255,0.8);
            filter: brightness(1.3) saturate(1.2);
        }
        .sticker-3d.highlight {
            animation: pulse-sticker-ultra 1s ease-in-out;
            box-shadow: 
                inset 0 0 40px rgba(255,255,255,0.8),
                0 0 60px rgba(0,255,255,1),
                0 0 100px rgba(0,255,255,0.8),
                0 0 140px rgba(0,255,255,0.5);
            border-color: #0FF;
            z-index: 10;
        }
        @keyframes pulse-sticker-ultra {
            0%, 100% { 
                transform: scale(1);
                filter: brightness(1) saturate(1);
            }
            50% { 
                transform: scale(1.25) translateZ(30px);
                filter: brightness(1.8) saturate(1.5);
            }
        }
        /* Hyper-realistic cube colors with depth */
        .sticker-3d.white { 
            background: 
                linear-gradient(135deg, 
                    #FFFFFF 0%, 
                    #F5F5F5 30%, 
                    #E8E8E8 60%, 
                    #D0D0D0 100%);
        }
        .sticker-3d.yellow { 
            background: 
                linear-gradient(135deg, 
                    #FFE135 0%, 
                    #FFD700 30%, 
                    #FFC700 60%, 
                    #E5B000 100%);
        }
        .sticker-3d.red { 
            background: 
                linear-gradient(135deg, 
                    #FF4545 0%, 
                    #FF3030 30%, 
                    #E02020 60%, 
                    #B01010 100%);
        }
        .sticker-3d.orange { 
            background: 
                linear-gradient(135deg, 
                    #FFA040 0%, 
                    #FF8C00 30%, 
                    #FF7700 60%, 
                    #E06000 100%);
        }
        .sticker-3d.blue { 
            background: 
                linear-gradient(135deg, 
                    #5A7FFF 0%, 
                    #4169E1 30%, 
                    #2050D0 60%, 
                    #1040B0 100%);
        }
        .sticker-3d.green { 
            background: 
                linear-gradient(135deg, 
                    #00E000 0%, 
                    #00C000 30%, 
                    #00A000 60%, 
                    #008000 100%);
        }
        /* Face positioning with proper depth */
        .face-3d.front  { transform: translateZ(190px); }
        .face-3d.back   { transform: rotateY(180deg) translateZ(190px); }
        .face-3d.right  { transform: rotateY(90deg) translateZ(190px); }
        .face-3d.left   { transform: rotateY(-90deg) translateZ(190px); }
        .face-3d.top    { transform: rotateX(90deg) translateZ(190px); }
        .face-3d.bottom { transform: rotateX(-90deg) translateZ(190px); }
        
        /* Premium scramble move display */
        .scramble-move-clickable {
            display: inline-block;
            padding: 10px 16px;
            margin: 5px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
            border: 2px solid #444;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            font-weight: bold;
            font-size: 16px;
            color: #0FF;
            text-shadow: 0 0 10px rgba(0,255,255,0.5);
            box-shadow: 
                0 4px 8px rgba(0,0,0,0.4),
                inset 0 1px 0 rgba(255,255,255,0.1);
            position: relative;
            overflow: hidden;
        }
        .scramble-move-clickable::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0,255,255,0.3), transparent);
            transition: left 0.5s;
        }
        .scramble-move-clickable:hover::before {
            left: 100%;
        }
        .scramble-move-clickable:hover {
            background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%);
            border-color: #0FF;
            box-shadow: 
                0 0 30px rgba(0,255,255,0.8),
                0 0 50px rgba(0,255,255,0.4),
                0 8px 16px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(255,255,255,0.2);
            transform: translateY(-3px) scale(1.32);
            text-shadow: 0 0 20px rgba(0,255,255,1);
        }
        .scramble-move-clickable:active {
            transform: translateY(0) scale(1.05);
            box-shadow: 
                0 0 20px rgba(0,255,255,0.6),
                0 4px 8px rgba(0,0,0,0.4);
        }
        
        /* INSPECTION COUNTDOWN OVERLAY */
        .inspection-overlay-fullscreen {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 320px;
            height: 320px;
            background: rgba(0,0,0,0.95);
            border: 3px solid #00BFFF;
            border-radius: 20px;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            box-shadow: 0 0 30px rgba(0,191,255,0.5);
        }
        .inspection-overlay-fullscreen.active { display: flex; }
        .inspection-content-center {
            text-align: center;
        }
        .inspection-ring-container {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 0 auto 20px;
        }
        .inspection-canvas-element {
            width: 100%;
            height: 100%;
        }
        .inspection-time-number,
        #inspectionTimeDisplayElement {
            font-size: 250px !important;
            font-weight: bold;
            font-family: 'Courier New', monospace;
            color: #00FF00;
        }
        .go-text-big,
        #goTextElement {
            font-size: 200px !important;
            font-weight: bold;
            color: #0F0;
            display: none;
        }
        .go-text-big.show { display: block; }
        @keyframes explode-go {
            0% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1.3); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        /* START TIMER BUTTON - Visible during inspection */
        #startTimerBtn {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10001;
            font-size: 20px;
            padding: 15px 40px;
            background: #00FF00;
            color: #000;
            border: 3px solid #00FFFF;
            border-radius: 15px;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 0 25px #00FF00;
            display: none;
            animation: pulseStart 1s ease-in-out infinite;
        }
        #startTimerBtn.show { display: block; }
        @keyframes pulseStart {
            0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 25px #00FF00; }
            50% { transform: translateX(-50%) scale(1.05); box-shadow: 0 0 40px #00FF00; }
        }
        
        select, input[type="number"], input[type="range"], input[type="checkbox"] {
            font-size: 18px; padding: 5px; margin: 10px;
            background-color: #333333; color: #ffffff;
        }
        table {
            margin: 20px auto; border-collapse: collapse;
            width: 80%; max-width: 800px;
            /* NEON: Table border BRIGHT and glowing */
            border: 3px solid hsl(var(--master-hue), 100%, 65%);
            /* NEON: Table glow! */
            box-shadow: 0 0 20px hsl(var(--master-hue), 100%, 50%);
            transition: border-color 0.05s linear, box-shadow 0.05s linear;
        }
        th, td {
            /* NEON: Cell borders BRIGHT */
            border: 2px solid hsl(var(--secondary-hue), 100%, 60%);
            padding: 8px; text-align: center;
            /* NEON: Cell background VERY DARK for contrast */
            background-color: hsl(var(--tertiary-hue), 80%, 5%);
            /* NEON: Text inherits bright color from body (SHARP) */
            font-size: 18px;
            /* NEON: Cell subtle inner glow */
            box-shadow: inset 0 0 8px hsl(var(--tertiary-hue), 100%, 15%);
            transition: all 0.05s linear;
        }
        th {
            /* NEON: Header row brighter with stronger glow */
            background-color: hsl(var(--tertiary-hue), 90%, 12%);
            box-shadow: inset 0 0 12px hsl(var(--tertiary-hue), 100%, 25%);
            /* NEON: Header text extra bright and SHARP */
            color: hsl(var(--master-hue), 100%, 98%);
            /* NO TEXT SHADOW - Sharp text! */
        }
        button {
            padding: 5px 10px; font-size: 13px; margin: 3px;
            /* NEON: Button fill uses tertiary wave, DARK for contrast */
            background-color: hsl(var(--tertiary-hue), 100%, 18%);
            /* NEON: Button text SUPER BRIGHT and SHARP */
            color: hsl(var(--master-hue), 100%, 98%);
            /* NEON: Bright glowing border */
            border: 2px solid hsl(var(--secondary-hue), 100%, 65%);
            z-index: 3; cursor: pointer;
            border-radius: 10px;
            /* NO TEXT SHADOW - Sharp text! */
            /* FUZZ/FADE SHADOW - Multiple layers that soften as they extend */
            box-shadow: 
                /* Layer 1: Sharp close shadow */
                3px 3px 2px rgba(0, 0, 0, 0.9),
                /* Layer 2: Medium diffuse */
                6px 6px 8px rgba(0, 0, 0, 0.6),
                /* Layer 3: Soft far shadow */
                12px 12px 20px rgba(0, 0, 0, 0.4),
                /* Layer 4: Very soft ambient */
                20px 20px 40px rgba(0, 0, 0, 0.2),
                /* Layer 5: Ultra-soft fade */
                30px 30px 60px rgba(0, 0, 0, 0.1),
                /* Neon glow */
                0 0 15px hsl(var(--secondary-hue), 100%, 50%),
                /* Inset glow */
                inset 0 0 10px hsl(var(--tertiary-hue), 100%, 30%);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* EXTENDED: Smooth professional transition */
            opacity: 1;
        }
        button:hover {
            /* NEON: Hover brightens button fill slightly */
            background-color: hsl(var(--tertiary-hue), 100%, 28%);
            /* FUZZ/FADE SHADOW - Enhanced on hover */
            box-shadow: 
                /* Layer 1: Sharp close shadow */
                4px 4px 3px rgba(0, 0, 0, 0.9),
                /* Layer 2: Medium diffuse */
                8px 8px 12px rgba(0, 0, 0, 0.6),
                /* Layer 3: Soft far shadow */
                16px 16px 28px rgba(0, 0, 0, 0.4),
                /* Layer 4: Very soft ambient */
                28px 28px 50px rgba(0, 0, 0, 0.2),
                /* Layer 5: Ultra-soft fade */
                40px 40px 80px rgba(0, 0, 0, 0.1),
                /* Intense neon glow on hover */
                0 0 30px hsl(var(--secondary-hue), 100%, 60%),
                0 0 50px hsl(var(--master-hue), 100%, 50%),
                /* Inset glow */
                inset 0 0 15px hsl(var(--tertiary-hue), 100%, 40%);
            /* NO TEXT GLOW - keeps text sharp on hover */
            transform: scale(1.26);
        }
        button:active {
            /* Quick pulse on click */
            transform: scale(0.98);
            opacity: 0.85;
        }
        
        /* FUZZ/FADE SHADOW for select and input elements */
        select, input[type="number"], input[type="text"], input[type="date"] {
            /* FUZZ/FADE SHADOW - same as buttons */
            box-shadow: 
                /* Layer 1: Sharp close shadow */
                3px 3px 2px rgba(0, 0, 0, 0.9),
                /* Layer 2: Medium diffuse */
                6px 6px 8px rgba(0, 0, 0, 0.6),
                /* Layer 3: Soft far shadow */
                12px 12px 20px rgba(0, 0, 0, 0.4),
                /* Layer 4: Very soft ambient */
                20px 20px 40px rgba(0, 0, 0, 0.2),
                /* Layer 5: Ultra-soft fade */
                30px 30px 60px rgba(0, 0, 0, 0.1),
                /* Neon glow */
                0 0 15px hsl(var(--secondary-hue), 100%, 50%);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        select:hover, input[type="number"]:hover, input[type="text"]:hover, input[type="date"]:hover,
        select:focus, input[type="number"]:focus, input[type="text"]:focus, input[type="date"]:focus {
            box-shadow: 
                4px 4px 3px rgba(0, 0, 0, 0.9),
                8px 8px 12px rgba(0, 0, 0, 0.6),
                16px 16px 28px rgba(0, 0, 0, 0.4),
                28px 28px 50px rgba(0, 0, 0, 0.2),
                40px 40px 80px rgba(0, 0, 0, 0.1),
                0 0 30px hsl(var(--secondary-hue), 100%, 60%),
                0 0 50px hsl(var(--master-hue), 100%, 50%);
            transform: scale(1.05);
        }
        
        .delete-button { padding: 5px 10px; font-size: 16px; margin: 2px; }
        .paused-indicator { animation: pauseBlink 1s ease-in-out infinite; }
        #buttonLayoutContainer {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            margin: 10px auto 5px auto;
            max-width: 1200px;
            padding: 0 20px;
        }
        #topButtonsRow1 {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            width: 100%;
        }
        #topButtonsRow1 button {
            flex: 0 1 auto;
            min-width: 140px;
            white-space: nowrap;
        }
        #wcaButton { min-width: 180px; }
        #selectCubeBtn { min-width: 240px; position: relative; }
        #youtubeButton { min-width: 160px; }
        #topButtonsRow2 {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            width: 100%;
        }
        #topButtonsRow2 button {
            font-size: 16px;
            padding: 6px 16px;
            min-width: 160px;
            white-space: nowrap;
        }
        #settingsMenuContainer, #languageMenuContainer {
            position: relative;
            display: inline-block;
        }
        #topButtonsRow3 {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            width: 100%;
        }
        #donateButton {
            font-size: 16px;
            padding: 6px 16px;
            min-width: 160px;
        }
        #solveChartContainer {
            width: 80%;
            max-width: 800px;
            height: 420px;               /* FIXED HEIGHT - CRITICAL */
            max-height: 420px;
            margin: 20px auto 60px auto;
            background-color: #111111;
            padding: 16px 12px 18px 12px;
            border: 1px solid #FF0000;
            border-radius: 5px;
            overflow: hidden;            /* PREVENT REFLOW */
            transition: none;            /* BLOCK INHERITED TRANSITIONS */
            position: relative;
            z-index: 1;
        }
        #solveChart {
            width: 100% !important;
            height: 100% !important;
        }
        /* BLACK FLASH OVERLAY FOR INSTANT BLACK SCREEN */
        /* BLACK FLASH ANIMATION - REMOVED */
        
        
        .menu-dropdown {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.95);
            border: 2px solid #00BFFF;
            border-radius: 10px;
            padding: 10px;
            z-index: 1000;
            display: none;
            width: 300px;
            max-height: 400px;
            overflow-y: auto;
            overflow-x: hidden;
            box-shadow: 0 0 20px rgba(0, 191, 255, 0.5), 0 0 40px rgba(0, 191, 255, 0.3);
            /* ADDED 2024-12-19: Smooth fade-in for menus */
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .menu-dropdown[style*="display: block"] {
            opacity: 1;
        }
        .menu-dropdown button {
            display: block;
            width: 100%;
            margin: 5px 0;
            text-align: left;
            /* ADDED 2024-12-19: Smooth hover fade */
            transition: all 0.3s ease-in-out;
        }
        .menu-dropdown button:hover {
            transform: translateX(5px);
            box-shadow: 0 0 15px rgba(0, 191, 255, 0.7);
        }
        .menu-dropdown button.selected::after {
            content: '✓';
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 64px;
            color: #0FF;
            font-weight: bold;
            text-shadow: 0 0 30px #0FF, 0 0 60px #0FF;
            animation: checkmarkPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        @keyframes checkmarkPop {
            0% { 
                transform: translateY(-50%) scale(0) rotate(0deg);
                opacity: 0;
            }
            50% {
                transform: translateY(-50%) scale(1.5) rotate(180deg);
            }
            100% { 
                transform: translateY(-50%) scale(1) rotate(360deg);
                opacity: 1;
            }
        }
        
        #settingsMenu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.95);
            border: 2px solid #00BFFF;
            border-radius: 10px;
            padding: 15px;
            z-index: 10;
            display: none;
            width: 300px;
            margin-top: 5px;
            box-shadow: 0 0 20px rgba(0, 191, 255, 0.5), 0 0 40px rgba(0, 191, 255, 0.3);
        }
        #settingsMenu div { margin: 10px 0; }
        #settingsMenu label { 
            display: block; 
            margin-bottom: 5px; 
            font-size: 14px;
            color: #00FFFF;
            font-weight: bold;
        }
        #settingsMenu input { 
            width: 100%; 
            background: #222;
            color: #00FF00;
            border: 1px solid #00BFFF;
            border-radius: 5px;
            padding: 5px;
        }
        #settingsMenu select {
            width: 100%;
            background: #222;
            color: #00FF00;
            border: 1px solid #00BFFF;
            border-radius: 5px;
            padding: 5px;
        }
        #settingsMenu button { width: 100%; margin-top: 10px; }
        #categoryMenu {
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            width: 100% !important;
            max-height: 400px;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 1001;
            margin-top: 0 !important;
        }
        #puzzleSubMenu {
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            width: 100% !important;
            max-height: 400px;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 1001;
            margin-top: 0 !important;
        }
        .prime-time { animation: primeFlash 5.90954s ease-in-out infinite alternate; }
        [contenteditable] {
            border: 1px dashed #FF0000; padding: 5px; outline: none; cursor: text;
        }
        @keyframes enhancedNeon {
            0% { color: #FF0000; border-color: #FF0000; } 20% { color: #FF00FF; border-color: #FF00FF; }
            40% { color: #00FFFF; border-color: #00FFFF; } 60% { color: #FFFF00; border-color: #FFFF00; }
            80% { color: #00FF00; border-color: #00FF00; } 100% { color: #0000FF; border-color: #0000FF; }
        }
        .enhanced-neon-1 { animation: enhancedNeon 12s ease-in-out infinite; }
        .enhanced-neon-2 { animation: enhancedNeon 14s ease-in-out infinite 2s; }
        .enhanced-neon-3 { animation: enhancedNeon 16s ease-in-out infinite 4s; }
        .enhanced-neon-4 { animation: enhancedNeon 18s ease-in-out infinite 6s; }
        @keyframes flashGreen { 0% { opacity: 0; } 50% { opacity: 0.7; } 100% { opacity: 0; } }
        @keyframes primeFlash { 0% { opacity: 1; } 100% { opacity: 0.7; } }
        @keyframes pauseBlink {
            0% { background-color: #FF0000; color: #FFFFFF; border-color: #FF0000; }
            50% { background-color: #FFFFFF; color: #FF0000; border-color: #FF0000; }
            100% { background-color: #FF0000; color: #FFFFFF; border-color: #FF0000; }
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        
        /* SMOOTH GRADIENT SWEEP for pause info box - continuous wave left to right */
        @keyframes pauseSweep {
            0% { 
                background-position: 0% 50%;
            }
            100% { 
                background-position: 200% 50%;
            }
        }
        
        #pauseInfoMsg {
            background: linear-gradient(90deg, 
                rgba(255, 255, 0, 0.9) 0%, 
                rgba(255, 128, 0, 0.9) 25%,
                rgba(255, 0, 0, 0.9) 50%, 
                rgba(255, 128, 0, 0.9) 75%,
                rgba(255, 255, 0, 0.9) 100%
            );
            background-size: 200% 100%;
            animation: pauseSweep 4s linear infinite;
            color: #000000;
            text-shadow: 0 0 2px #FFFFFF, 0 0 4px #FFFFFF;
            border-color: #FF6600;
            /* FUZZ/FADE SHADOW - same as buttons */
            box-shadow: 
                3px 3px 2px rgba(0, 0, 0, 0.9),
                6px 6px 8px rgba(0, 0, 0, 0.6),
                12px 12px 20px rgba(0, 0, 0, 0.4),
                20px 20px 40px rgba(0, 0, 0, 0.2),
                30px 30px 60px rgba(0, 0, 0, 0.1),
                0 0 30px #FF6600,
                0 0 60px #FFAA00;
        }
        @keyframes colorFlash {
            0% { background-color: #993333; border-color: #993333; box-shadow: 0 0 10px #993333; }
            16.67% { background-color: #996633; border-color: #996633; box-shadow: 0 0 10px #996633; }
            33.33% { background-color: #999933; border-color: #999933; box-shadow: 0 0 10px #999933; }
            50% { background-color: #339933; border-color: #339933; box-shadow: 0 0 10px #339933; }
            66.67% { background-color: #336699; border-color: #336699; box-shadow: 0 0 10px #336699; }
            83.33% { background-color: #663399; border-color: #663399; box-shadow: 0 0 10px #663399; }
            100% { background-color: #993333; border-color: #993333; box-shadow: 0 0 10px #993333; }
        }
       
        /* PROFESSIONAL PULSE GLOW EFFECT FOR TITLE */
        @keyframes subtlePulseGlow {
            0%, 100% {
                text-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
                transform: scale(1);
            }
            50% {
                text-shadow: 0 0 40px currentColor, 0 0 80px currentColor, 0 0 120px currentColor;
                transform: scale(1.02);
            }
        }
       
        /* TODAY CELL BORDER BLINK ANIMATION */
        @keyframes todayBorderBlink {
            0%, 100% {
                border-color: #FFFF00;
                box-shadow: 0 0 20px #FFFF00;
            }
            50% {
                border-color: #00FF00;
                box-shadow: 0 0 5px #00FF00;
            }
        }
       
        /* SAVED NOTIFICATION FADE OUT */
        @keyframes savedFadeOut {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.9);
            }
        }
       
        /* SAVED NOTIFICATION CRAZY BLINK */
        @keyframes savedCrazyBlink {
            0%, 25%, 50%, 75% {
                opacity: 1;
            }
            12.5%, 37.5%, 62.5%, 87.5% {
                opacity: 0.3;
            }
        }
       
        /* BUTTON FLASH NEON GREEN */
        @keyframes buttonFlashGreen {
            0%, 100% {
                box-shadow: 0 0 5px rgba(0,255,0,0.3);
            }
            50% {
                background: #00FF00 !important;
                box-shadow: 0 0 40px #00FF00, 0 0 80px #00FF00;
                transform: scale(1.15);
            }
        }
       
        /* WORLD SPINS AROUND BUTTON */
        @keyframes spinTheWorld {
            0% { 
                transform: rotate(0deg) scale(1);
            }
            100% { 
                transform: rotate(720deg) scale(1);
            }
        }
       
        /* BUTTON COUNTER-ROTATION TO STAY STILL */
        @keyframes buttonStayStill {
            0% { 
                transform: rotate(0deg) scale(1);
            }
            100% { 
                transform: rotate(-720deg) scale(1);
            }
        }
       
        /* NOTIFICATION FADES DURING SPIN */
        @keyframes notificationFadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
       
        /* HELP SYSTEM ANIMATIONS */
        @keyframes helpPulse {
            0%, 100% {
                box-shadow: 0 0 15px #00BFFF, 0 0 30px #00BFFF, inset 0 0 10px rgba(0, 191, 255, 0.3);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 0 25px #00BFFF, 0 0 50px #00BFFF, 0 0 75px #00BFFF, inset 0 0 20px rgba(0, 191, 255, 0.5);
                transform: scale(1.05);
            }
        }
       
        @keyframes helpBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }
       
        /* HELP BUTTON STYLES */
        .help-btn {
            display: inline-block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: linear-gradient(135deg, #00BFFF, #0080FF);
            border: 2px solid #00FFFF;
            color: #000;
            font-weight: bold;
            font-size: 12px;
            line-height: 14px;
            text-align: center;
            cursor: pointer;
            animation: helpPulse 2s ease-in-out infinite;
            position: relative;
            vertical-align: middle;
            margin-left: 4px;
            transition: all 0.3s ease;
        }
       
        .help-btn:hover {
            animation: helpPulse 0.5s ease-in-out infinite, helpBounce 0.5s ease-in-out infinite;
            transform: scale(1.15);
        }
       
        .help-btn-large {
            width: 50px;
            height: 50px;
            font-size: 32px;
            line-height: 46px;
        }
       
        #startStopContainer {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin: 30px auto 35px auto;
            padding: 0 20px;
            flex-wrap: wrap;
        }
        #startStopBtn {
            font-size: 18px;
            padding: 14px 28px;
            background: #333;
            color: #FFFFFF;
            border: 2px solid #00FF00;
            border-radius: 12px;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 0 15px #00FF00;
            min-width: 400px;
            max-width: 95%;
            line-height: 1.4;
            min-height: 60px;
            white-space: normal;
            word-wrap: break-word;
            animation: colorFlash 3s ease-in-out infinite;
            /* ADDED 2024-12-19: Buttery smooth transitions */
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #pauseBtn {
            font-size: 18px;
            padding: 12px 28px;
            background: #333;
            color: #FFAA00;
            border: 2px solid #FFAA00;
            border-radius: 12px;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 0 10px #FFAA00;
            min-width: 240px;
            min-height: 55px;
            /* ADDED 2024-12-19: Smooth fade in/out */
            transition: all 0.4s ease-in-out, opacity 0.3s ease-in-out;
        }
        #pauseBtn:hover {
            opacity: 0.9;
            transform: translateY(-3px);
            box-shadow: 0 0 20px #FFAA00;
        }
        #resumeBtn {
            font-size: 18px;
            padding: 12px 28px;
            background: #222;
            color: #00FF00;
            border: 3px solid #00FF00;
            border-radius: 12px;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 0 15px #00FF00;
            min-width: 180px;
            min-height: 55px;
            margin: 0 5px;
            transition: all 0.3s ease;
        }
        #resumeBtn:hover {
            background: #003300;
            transform: translateY(-3px);
            box-shadow: 0 0 25px #00FF00;
        }
        #stopBtn {
            font-size: 18px;
            padding: 12px 28px;
            background: #222;
            color: #FF0000;
            border: 3px solid #FF0000;
            border-radius: 12px;
            cursor: pointer;
            font-weight: bold;
            box-shadow: 0 0 15px #FF0000;
            min-width: 180px;
            min-height: 55px;
            margin: 0 5px;
            transition: all 0.3s ease;
        }
        #stopBtn:hover {
            background: #330000;
            transform: translateY(-3px);
            box-shadow: 0 0 25px #FF0000;
        }
        #startStopBtn:hover {
            opacity: 0.9;
            transform: translateY(-3px) scale(1.02);
        }
        #startStopBtn.stop { background: #e74c3c; color: #fff; border-color: #e74c3c; box-shadow: 0 0 15px #e74c3c; }
        #startStopBtn.stop:hover { background: #c0392b; }
        #timerTop.stopped-display, #timerBottom.stopped-display {
            color: #FF0000 !important;
            transition: color 0.2s ease-out;
        }
        @media (max-width: 1200px) {
            #topButtonsRow1 button, #topButtonsRow2 button, #topButtonsRow3 button {
                min-width: 160px;
                font-size: 16px;
                padding: 8px 20px;
            }
            #selectCubeBtn { min-width: 260px; }
            #startStopBtn { font-size: 16px; padding: 18px 35px; min-width: auto; max-width: 90%; }
        }
        @media (max-width: 768px) {
            #topButtonsRow1 button, #topButtonsRow2 button, #topButtonsRow3 button {
                min-width: 140px;
                font-size: 14px;
                padding: 8px 15px;
            }
            #selectCubeBtn { min-width: 100%; max-width: 400px; }
            #startStopBtn { font-size: 14px; padding: 16px 25px; min-width: auto; max-width: 95%; }
            #solveChartContainer { height: 300px; max-height: 300px; }
        }
        @media (max-width: 480px) {
            #topButtonsRow1 button, #topButtonsRow2 button, #topButtonsRow3 button {
                min-width: 120px;
                font-size: 13px;
                padding: 7px 12px;
            }
            #startStopBtn { font-size: 12px; padding: 14px 20px; min-width: auto; max-width: 98%; }
            #solveChartContainer { height: 250px; max-height: 250px; }
        }
       
        /* REFRESH NOTICE STYLES */
        #refreshNotice {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #FF0000, #FF6600);
            color: #FFFFFF;
            padding: 15px 20px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            z-index: 1000;
            border-bottom: 3px solid #FFFF00;
            box-shadow: 0 4px 15px rgba(255, 0, 0, 0.5);
            display: none;
            /* ADDED 2024-12-19: Smooth fade-in effect */
            opacity: 0;
            transition: opacity 0.6s ease-in-out;
        }
       
        #refreshNotice.show {
            display: block;
            /* ADDED 2024-12-19: Fade in when shown */
            animation: fadeIn 0.6s ease-in-out forwards;
        }
       
        /* ADDED 2024-12-19: Fade-in animation */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
       
        #refreshNotice.hidden {
            display: none;
        }
       
        #refreshNotice .refresh-shortcut {
            background: #000000;
            color: #00FF00;
            padding: 5px 15px;
            border-radius: 8px;
            font-family: monospace;
            font-size: 20px;
            margin: 0 10px;
            border: 2px solid #00FF00;
            display: inline-block;
            cursor: pointer;
            transition: all 0.3s ease;
        }
       
        #refreshNotice .refresh-shortcut:hover {
            background: #00FF00;
            color: #FFFFFF;
            border-color: #00FF00;
            transform: scale(1.05);
            box-shadow: 0 0 15px #00FF00;
        }
       
        #refreshNotice .close-btn {
            background: #FFFFFF;
            color: #FF0000;
            border: 2px solid #FFFFFF;
            padding: 5px 15px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            margin-left: 20px;
            font-size: 16px;
        }
       
        #refreshNotice .close-btn:hover {
            background: #FFFF00;
            color: #FFFFFF;
            border-color: #FFFF00;
        }
       
        @media (max-width: 768px) {
            #refreshNotice {
                font-size: 14px;
                padding: 12px 15px;
            }
            #refreshNotice .refresh-shortcut {
                font-size: 16px;
                padding: 4px 10px;
                display: block;
                margin: 8px auto;
            }
            #refreshNotice .close-btn {
                display: block;
                margin: 10px auto 0 auto;
                width: 120px;
            }
        }
       
        /* MOBILE RESPONSIVE STYLES */
        @media (max-width: 768px) {
            body {
                margin: 5px;
                font-size: 14px;
            }
           
            /* Make content container fit mobile */
            #content {
                max-width: 100%;
                padding: 5px;
                overflow-x: hidden;
            }
           
            /* Responsive calendar table */
            table {
                font-size: 11px;
                width: 100%;
            }
           
            table th, table td {
                padding: 4px 2px;
                font-size: 10px;
            }
           
            /* Smaller buttons on mobile */
            button {
                font-size: 13px;
                padding: 8px 12px;
            }
           
            /* Responsive timer display */
            #timerDisplay {
                font-size: 48px !important;
            }
           
            /* Responsive modals */
            #calDayEditorModal > div,
            #calBirthdaysModal > div,
            #calSpendingModal > div,
            #calPaycheckModal > div {
                width: 95% !important;
                max-width: 95% !important;
                margin: 2% auto !important;
                padding: 15px !important;
            }
           
            /* Smaller input fields on mobile */
            input[type="text"],
            input[type="number"],
            textarea {
                font-size: 14px;
            }
           
            /* Copyright banner responsive */
            body > div:first-child {
                padding: 8px 10px;
            }
           
            body > div:first-child p:first-child {
                font-size: 12px;
            }
           
            body > div:first-child p:last-child {
                font-size: 10px;
            }
           
            /* Language button - shorter on mobile */
            #languageBtn {
                font-size: 9px;
                padding: 6px 8px;
                max-width: 70%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
       
        /* EXTRA SMALL MOBILE (iPhone SE, small Android) */
        @media (max-width: 400px) {
            body {
                margin: 2px;
                font-size: 12px;
            }
           
            table th, table td {
                padding: 3px 1px;
                font-size: 9px;
            }
           
            #timerDisplay {
                font-size: 36px !important;
            }
           
            button {
                font-size: 12px;
                padding: 6px 10px;
            }
           
            /* Language button - even smaller on tiny phones */
            #languageBtn {
                font-size: 8px;
                padding: 4px 6px;
                max-width: 67%;
            }
        }
        
        /* ============================================
           COMPREHENSIVE MOBILE RESPONSIVE STYLES
           ============================================
           Added for Mac/iOS and Android phone support
           These styles ensure the app works well on all mobile devices
           while keeping desktop experience unchanged.
        */
        
        /* TABLET LANDSCAPE (1024px and below) */
        @media (max-width: 1024px) {
            h1 { font-size: 36px; }
            h2 { font-size: 28px; }
            h3 { font-size: 22px; }
            
            #buttonLayoutContainer {
                padding: 0 10px;
            }
            
            #startStopContainer {
                margin: 20px auto 25px auto;
                gap: 10px;
            }
        }
        
        /* TABLET PORTRAIT / LARGE PHONES (768px and below) */
        @media (max-width: 768px) {
            /* Language selector title - smaller on mobile */
            #languageSelectorScreen h1 {
                font-size: 28px !important;
                margin: 20px 0 30px 0 !important;
                padding: 0 10px;
            }
            
            /* Timer display - responsive sizing */
            #timerTop, #timerBottom {
                font-size: 12vw !important;
                margin: 4px 0;
            }
            
            /* Scramble display - smaller and wrap */
            #scrambleDisplay {
                font-size: 11px !important;
                padding: 8px;
                word-break: break-word;
                line-height: 1.4;
            }
            
            /* Button rows - allow more wrapping */
            #topButtonsRow1, #topButtonsRow2, #topButtonsRow3 {
                gap: 6px;
            }
            
            /* Start/Stop button - full width on mobile */
            #startStopBtn {
                min-width: unset !important;
                width: 95%;
                font-size: 14px !important;
                padding: 14px 15px !important;
                min-height: 50px;
            }
            
            /* Pause and Resume buttons - smaller */
            #pauseBtn, #resumeBtn, #stopBtn {
                min-width: 100px !important;
                font-size: 14px !important;
                padding: 10px 15px !important;
                min-height: 45px;
            }
            
            /* Start/Stop container - vertical on mobile */
            #startStopContainer {
                flex-direction: column;
                gap: 10px;
                margin: 15px auto 20px auto;
            }
            
            /* Sune container - smaller padding */
            #suneContainer {
                margin: 8px auto 10px auto;
                padding: 6px;
            }
            
            #suneToggleBtn {
                font-size: 14px;
                padding: 10px 15px;
            }
            
            /* Chart container - smaller height */
            #solveChartContainer {
                width: 95%;
                height: 280px !important;
                max-height: 280px !important;
                margin: 15px auto 40px auto;
                padding: 10px 8px 12px 8px;
            }
            
            /* Statistics labels - smaller */
            p, label {
                font-size: 14px;
            }
            
            /* Copyright banner - compact */
            #content > div:first-child {
                padding: 6px 8px;
            }
            
            #content > div:first-child p {
                font-size: 10px !important;
                margin: 2px 0;
            }
            
            /* Live clock and timezone - smaller */
            #liveClock {
                font-size: 12px !important;
            }
            
            #timezoneSelector {
                font-size: 11px;
                padding: 3px;
            }
            
            /* Inspection overlay - smaller on mobile */
            .inspection-overlay-fullscreen {
                width: 280px;
                height: 280px;
            }
            
            .inspection-ring-container {
                width: 200px;
                height: 200px;
            }
            
            .inspection-time-number,
            #inspectionTimeDisplayElement {
                font-size: 150px !important;
            }
            
            .go-text-big,
            #goTextElement {
                font-size: 125px !important;
            }
            
            /* Menu dropdowns - better mobile positioning */
            .menu-dropdown {
                width: 90vw !important;
                max-width: 350px;
                left: 50% !important;
                transform: translateX(-50%);
            }
            
            #settingsMenu {
                width: 90vw !important;
                max-width: 350px;
            }
        }
        
        /* STANDARD PHONES (600px and below) */
        @media (max-width: 600px) {
            body {
                margin: 3px;
            }
            
            /* Language selector title */
            #languageSelectorScreen h1 {
                font-size: 22px !important;
                margin: 15px 0 20px 0 !important;
            }
            
            /* Timer - larger relative to screen */
            #timerTop, #timerBottom {
                font-size: 14vw !important;
            }
            
            /* Scramble - even smaller */
            #scrambleDisplay {
                font-size: 10px !important;
                padding: 6px;
            }
            
            /* All top buttons - stack nicely */
            #topButtonsRow1 button, 
            #topButtonsRow2 button, 
            #topButtonsRow3 button {
                min-width: 100px !important;
                font-size: 11px !important;
                padding: 6px 8px !important;
            }
            
            /* Select cube button - full width */
            #selectCubeBtn {
                min-width: 90% !important;
                max-width: 100% !important;
            }
            
            /* Start/Stop button */
            #startStopBtn {
                font-size: 13px !important;
                padding: 12px 10px !important;
            }
            
            /* Chart container */
            #solveChartContainer {
                height: 240px !important;
                max-height: 240px !important;
            }
            
            /* Sune grid - single column */
            .sune-grid {
                grid-template-columns: 1fr !important;
                gap: 12px;
            }
            
            .sune-card {
                padding: 12px;
            }
            
            .sune-name {
                font-size: 18px;
            }
            
            .sune-sequence {
                padding: 10px;
            }
            
            .sune-chunk {
                font-size: 13px;
                padding: 5px 8px;
            }
            
            /* Help buttons */
            .help-btn {
                width: 16px;
                height: 16px;
                font-size: 10px;
                line-height: 12px;
            }
            
            /* Statistics text - smaller */
            #personalBest, #sessionAverage, #ao5Display, #ao12Display {
                font-size: 13px !important;
            }
        }
        
        /* SMALL PHONES (480px and below) */
        @media (max-width: 480px) {
            /* Language selector */
            #languageSelectorScreen h1 {
                font-size: 18px !important;
                margin: 10px 0 15px 0 !important;
            }
            
            .language-grid {
                gap: 8px !important;
                padding: 8px !important;
            }
            
            .language-option {
                padding: 10px 6px !important;
                font-size: 13px !important;
            }
            
            /* Timer display */
            #timerTop, #timerBottom {
                font-size: 16vw !important;
            }
            
            /* Scramble */
            #scrambleDisplay {
                font-size: 9px !important;
            }
            
            /* Buttons even smaller */
            #topButtonsRow1 button, 
            #topButtonsRow2 button, 
            #topButtonsRow3 button {
                min-width: 80px !important;
                font-size: 10px !important;
                padding: 5px 6px !important;
            }
            
            /* Start/Stop */
            #startStopBtn {
                font-size: 12px !important;
                padding: 10px 8px !important;
                min-height: 45px;
            }
            
            #pauseBtn, #resumeBtn, #stopBtn {
                min-width: 80px !important;
                font-size: 12px !important;
                padding: 8px 10px !important;
            }
            
            /* Chart */
            #solveChartContainer {
                height: 200px !important;
                max-height: 200px !important;
            }
            
            /* Inspection overlay */
            .inspection-overlay-fullscreen {
                width: 240px;
                height: 240px;
            }
            
            .inspection-ring-container {
                width: 170px;
                height: 170px;
            }
            
            .inspection-time-number,
            #inspectionTimeDisplayElement {
                font-size: 100px !important;
            }
            
            .go-text-big,
            #goTextElement {
                font-size: 75px !important;
            }
            
            /* START TIMER button during inspection */
            #startTimerBtn {
                font-size: 16px;
                padding: 12px 25px;
                bottom: 20px;
            }
        }
        
        /* VERY SMALL PHONES (360px and below) */
        @media (max-width: 360px) {
            #languageSelectorScreen h1 {
                font-size: 16px !important;
            }
            
            .language-option {
                padding: 8px 4px !important;
                font-size: 11px !important;
            }
            
            #timerTop, #timerBottom {
                font-size: 18vw !important;
            }
            
            #scrambleDisplay {
                font-size: 8px !important;
            }
            
            #topButtonsRow1 button, 
            #topButtonsRow2 button, 
            #topButtonsRow3 button {
                min-width: 70px !important;
                font-size: 9px !important;
                padding: 4px 5px !important;
            }
            
            #startStopBtn {
                font-size: 11px !important;
            }
            
            #solveChartContainer {
                height: 180px !important;
                max-height: 180px !important;
            }
        }
        
        /* MODAL RESPONSIVE STYLES */
        @media (max-width: 768px) {
            /* All modals - full width on mobile */
            #alarmModal > div,
            #settingsModal > div,
            #languageModal > div,
            #algoTranslatorModal > div,
            #calendarModal > div,
            #calDayEditorModal > div,
            #calBirthdaysModal > div,
            #calSpendingModal > div,
            #calPaycheckModal > div,
            #customActivityModal > div {
                width: 95% !important;
                max-width: 95% !important;
                margin: 60px auto 20px auto !important;
                padding: 15px !important;
            }
            
            /* Modal headers */
            #alarmModal h2,
            #settingsModal h2,
            #calendarModal h2,
            #algoTranslatorModal h2 {
                font-size: 20px !important;
            }
            
            /* Calendar modal specific */
            #calendarModal > div {
                margin: 50px auto 10px auto !important;
            }
            
            /* Calendar header buttons */
            #calendarModal > div > div:nth-child(3) {
                flex-wrap: wrap;
                gap: 5px !important;
            }
            
            #calendarModal > div > div:nth-child(3) button,
            #calendarModal > div > div:nth-child(3) select,
            #calendarModal > div > div:nth-child(3) input {
                font-size: 11px !important;
                padding: 6px 8px !important;
            }
            
            /* Algorithm translator input */
            #algoInput {
                font-size: 12px !important;
            }
            
            /* Alarm modal inputs */
            #alarmModal input,
            #alarmModal select {
                font-size: 14px !important;
            }
        }
        
        /* LANDSCAPE MODE PHONES */
        @media (max-height: 500px) and (orientation: landscape) {
            #languageSelectorScreen h1 {
                font-size: 20px !important;
                margin: 10px 0 !important;
            }
            
            .language-grid {
                max-height: 60vh;
                overflow-y: auto;
            }
            
            #timerTop, #timerBottom {
                font-size: 15vh !important;
            }
            
            #startStopContainer {
                margin: 10px auto;
            }
            
            .inspection-overlay-fullscreen {
                width: 200px;
                height: 200px;
            }
            
            .inspection-time-number,
            #inspectionTimeDisplayElement {
                font-size: 75px !important;
            }
        }
        
        /* iOS SPECIFIC FIXES */
        @supports (-webkit-touch-callout: none) {
            /* Prevent iOS zoom on input focus */
            input, select, textarea {
                font-size: 16px !important;
            }
            
            /* Fix for iOS momentum scrolling */
            #calendarModal > div,
            #alarmModal > div,
            #algoTranslatorModal > div {
                -webkit-overflow-scrolling: touch;
            }
        }
        
        /* TOUCH DEVICE IMPROVEMENTS */
        @media (pointer: coarse) {
            /* Larger touch targets */
            button {
                min-height: 44px;
            }
            
            .language-option {
                min-height: 48px;
            }
            
            /* Remove hover effects that don't work on touch */
            button:hover {
                transform: none;
            }
            
            .language-option:hover {
                transform: none;
            }
            
            /* Make scrollbars visible on touch devices */
            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
            
            ::-webkit-scrollbar-thumb {
                background: #00FF00;
                border-radius: 3px;
            }
            
            ::-webkit-scrollbar-track {
                background: #222;
            }
        }
        
        /* ============================================
           MOBILE CONTROL BAR STYLES
           ============================================ */
        
        /* Tablet and below */
        @media (max-width: 768px) {
            #miniTimerBar {
                padding: 6px 5px !important;
                gap: 5px !important;
                min-height: 50px !important;
            }
            
            #miniTimerBar button {
                font-size: 10px !important;
                padding: 4px 6px !important;
                min-height: 32px !important;
            }
            
            #miniTimer {
                font-size: 18px !important;
                min-width: 60px !important;
            }
            
            #miniCurrentCubeName {
                font-size: 11px !important;
            }
            
            /* Hide some dividers on mobile */
            #miniTimerBar > span[style*="color: #444"] {
                display: none !important;
            }
            
            /* Copyright banner - stack on mobile */
            #copyrightBanner {
                flex-direction: column !important;
                gap: 3px !important;
                padding: 5px 10px !important;
            }
            
            #copyrightBanner > span[style*="color: #666"] {
                display: none !important;
            }
        }
        
        /* Small phones */
        @media (max-width: 480px) {
            #miniTimerBar {
                padding: 5px 3px !important;
                gap: 4px !important;
                min-height: 45px !important;
            }
            
            #miniTimerBar button {
                font-size: 9px !important;
                padding: 3px 5px !important;
                min-height: 28px !important;
            }
            
            #miniTimer {
                font-size: 16px !important;
                min-width: 50px !important;
            }
            
            #miniCurrentCubeName {
                font-size: 10px !important;
            }
            
            /* Hide BACK text, keep just arrow or abbreviate */
            #navBackBtn {
                padding: 3px 5px !important;
            }
            
            /* Abbreviate HOME */
            #miniTimerBar button[title="Go to Home Page"] {
                padding: 3px 5px !important;
            }
            
            #copyrightBanner span {
                font-size: 8px !important;
            }
        }
        
        /* Very small phones */
        @media (max-width: 360px) {
            #miniTimerBar button {
                font-size: 8px !important;
                padding: 2px 4px !important;
            }
            
            #miniTimer {
                font-size: 14px !important;
                min-width: 45px !important;
            }
            
            #miniCurrentCubeName {
                font-size: 9px !important;
            }
            
            #copyrightBanner span {
                font-size: 7px !important;
            }
        }
        
        /* ============================================
           MASTULATER - ALGORITHM TRANSLATOR STYLES
           ============================================ */
        .algo-trans-btn {
            padding: 10px 15px;
            font-size: 14px;
            background: #333;
            color: #00FF00;
            border: 2px solid #00FF00;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.6s ease-in-out;
        }
        .algo-trans-btn:hover {
            background: #555;
            box-shadow: 0 0 15px rgba(0,255,0,0.5);
        }
        .algo-trans-btn:disabled {
            background: #222;
            color: #555;
            border-color: #444;
            cursor: not-allowed;
            box-shadow: none;
            transition: all 0.6s ease-in-out;
        }
        .algo-trans-btn:disabled:hover {
            background: #222;
            box-shadow: none;
            transform: none;
        }
        .buttons-active-mt .algo-trans-btn:not(:disabled) {
            animation: buttonPulse_MT 3s ease-in-out infinite;
        }
        @keyframes buttonPulse_MT {
            0%, 100% { box-shadow: 0 0 15px rgba(0,255,0,0.5); }
            50% { box-shadow: 0 0 30px rgba(0,255,0,0.8), 0 0 50px rgba(0,255,0,0.4); }
        }
        @keyframes fadeIn_MT {
            from { 
                opacity: 0;
                transform: translateY(20px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes fadeOut_MT {
            from { 
                opacity: 1;
                transform: translateY(0);
            }
            to { 
                opacity: 0;
                transform: translateY(-20px);
            }
        }
        .algo-box-mt {
            animation: fadeIn_MT 5s ease-out;
        }
        .algo-box-mt.deleting {
            animation: fadeOut_MT 0.6s ease-out;
        }
        .algo-arrow-mt {
            animation: fadeIn_MT 5s ease-out;
        }
        .algo-arrow-mt.deleting {
            animation: fadeOut_MT 0.5s ease-out;
        }
        .output-textarea-mt {
            color: #FFFF00;
        }
        
        /* ============================================
           FULL-SCREEN MODAL SYSTEM - SITE WIDE
           ============================================ */
        
        .fullscreen-modal {
            position: fixed;
            top: 80px;
            left: 0;
            width: 100%;
            height: calc(100% - 80px);
            background: var(--site-background);
            z-index: 99000;
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            overflow: visible;
        }
        
        .fullscreen-modal.active {
            display: flex;
            flex-direction: column;
            opacity: 1;
            overflow-y: auto;
            overflow-x: visible;
        }
        
        /* ============================================
           PAGE SECTION SYSTEM - SITE REDESIGN
           Replaces modal-based navigation with full-page sections
           ============================================ */
        
        .page-section {
            display: none;
            min-height: calc(100vh - var(--content-top-offset, 100px));
            padding: 10px;
            padding-top: 10px; /* Reduced from var(--content-top-offset) - spacer handles positioning */
            background: var(--site-background) !important;
            width: 100%;
            box-sizing: border-box;
            overflow: visible; /* Allow shadows to extend beyond container */
        }
        
        /* Timer section already has spacer div, don't add extra padding */
        #timer-section {
            padding-top: 0;
            background-color: var(--site-background) !important;
        }
        
        .page-section.active {
            display: block;
        }
        
        /* Ensure smooth scrolling for page navigation */
        html {
            scroll-behavior: smooth;
            background-color: var(--site-background) !important;
        }
        
        /* ============================================
           FIXED MODAL OFFSET - CONTROL BAR FIX
           All fixed position modals must start below
           the control bar to prevent content overlap
           ============================================ */
        
        #calBirthdaysModal,
        #calSpendingModal,
        #calPaycheckModal,
        #calDayEditorModal,
        #spendingHelpModal,
        #timerHelpModal,
        #alarmHelpModal,
        #calendarHelpModal,
        #algotranslatorHelpModal,
        #scrambleHelpModal,
        #statisticsHelpModal,
        #suneHelpModal,
        #settingsHelpModal,
        #settingsModal,
        #languageModal,
        #customActivityModal,
        .fullscreen-modal {
            top: var(--content-top-offset, 120px) !important;
            height: calc(100% - var(--content-top-offset, 120px)) !important;
        }
        
        /* Dropdown menus must appear below control bar */
        #categoryMenu,
        #puzzleSubMenu {
            top: var(--content-top-offset, 120px) !important;
        }
        
        /* Navigation Bar */
        .modal-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background: linear-gradient(180deg, #000 0%, transparent 100%);
            border-bottom: 2px solid #00FF00;
        }
        
        .modal-back-btn, .modal-close-btn {
            background: #000;
            border: 2px solid #00FF00;
            color: #00FF00;
            font-size: 19px;
            font-weight: bold;
            padding: 10px 19px;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.3s ease;
            text-shadow: 0 0 10px #00FF00;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
        }
        
        .modal-close-btn {
            border-color: #FF0000;
            color: #FF0000;
            text-shadow: 0 0 10px #FF0000;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
        }
        
        .modal-back-btn:hover {
            background: #00FF00;
            color: #000;
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(0, 255, 0, 0.8);
        }
        
        .modal-close-btn:hover {
            background: #FF0000;
            color: #000;
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
        }
        
        /* Content Area */
        .modal-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: visible;
            padding: 15px;
            padding-top: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start; /* Start from top, not center */
        }
        
        .modal-title {
            font-size: 30px;
            color: #00FF00;
            text-shadow: 0 0 20px #00FF00, 0 0 40px #00FF00;
            margin-bottom: 16px;
            text-align: center;
            font-weight: bold;
            animation: titlePulse 3s ease-in-out infinite;
        }
        
        @keyframes titlePulse {
            0%, 100% { 
                text-shadow: 0 0 20px #00FF00, 0 0 40px #00FF00;
                transform: scale(1);
            }
            50% { 
                text-shadow: 0 0 30px #00FF00, 0 0 60px #00FF00, 0 0 80px #00FF00;
                transform: scale(1.05);
            }
        }
        
        /* Grid Layout for Options */
        .modal-grid {
            display: grid;
            gap: 16px;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .modal-grid.categories {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }
        
        .modal-grid.puzzles {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            padding: 30px;
            background: rgba(0, 0, 0, 0.5);
            border: 2px solid #00FFFF;
            border-radius: 10px;
            width: 90%;
            max-width: 1600px;
        }
        
        /* Option Buttons */
        .modal-option-btn {
            background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
            border: 3px solid #00FF00;
            color: #00FF00;
            font-size: 19px;
            font-weight: bold;
            padding: 24px 16px;
            cursor: pointer;
            border-radius: 12px;
            transition: all 0.3s ease;
            text-shadow: 0 0 10px #00FF00;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .modal-option-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.3), transparent);
            transition: left 0.5s ease;
        }
        
        .modal-option-btn:hover::before {
            left: 100%;
        }
        
        .modal-option-btn:hover {
            background: linear-gradient(135deg, #003300 0%, #004400 100%);
            border-color: #00FFFF;
            color: #00FFFF;
            transform: translateY(-5px) scale(1.26);
            box-shadow: 0 0 40px rgba(0, 255, 255, 0.6), 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        
        .modal-option-btn.selected {
            background: linear-gradient(135deg, #004400 0%, #006600 100%);
            border-color: #FFFF00;
            color: #FFFF00;
            box-shadow: 0 0 40px rgba(255, 255, 0, 0.8);
        }
        
        .modal-option-btn.selected::after {
            content: '✓';
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 26px;
            color: #FFFF00;
            text-shadow: 0 0 20px #FFFF00;
        }
        
        /* Small puzzle buttons */
        .modal-option-btn.small {
            font-size: 8px;
            padding: 6px 5px;
            min-height: 29px;
            min-width: 77px;
            flex: 0 0 auto;
        }
        
        /* Puzzle buttons with images - BIGGER */
        .modal-option-btn.with-image {
            font-size: 16px !important;
            padding: 12px 15px !important;
            min-height: 70px !important;
            min-width: 140px !important;
            flex: 0 0 auto;
        }
        
        /* Save Button */
        .modal-save-btn {
            background: linear-gradient(135deg, #004400 0%, #006600 100%);
            border: 4px solid #00FF00;
            color: #FFFF00;
            font-size: 23px;
            font-weight: bold;
            padding: 13px 38px;
            cursor: pointer;
            border-radius: 12px;
            margin-top: 16px;
            transition: all 0.3s ease;
            text-shadow: 0 0 20px #FFFF00;
            box-shadow: 0 0 40px rgba(0, 255, 0, 0.5);
            animation: savePulse 2s ease-in-out infinite;
        }
        
        @keyframes savePulse {
            0%, 100% { 
                box-shadow: 0 0 40px rgba(0, 255, 0, 0.5);
            }
            50% { 
                box-shadow: 0 0 60px rgba(0, 255, 0, 0.8), 0 0 80px rgba(255, 255, 0, 0.5);
            }
        }
        
        .modal-save-btn:hover {
            transform: scale(1.1);
            background: linear-gradient(135deg, #006600 0%, #008800 100%);
            border-color: #FFFF00;
            box-shadow: 0 0 60px rgba(255, 255, 0, 1), 0 0 80px rgba(0, 255, 0, 0.8);
        }
        
        .modal-save-btn:active {
            transform: scale(0.95);
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .modal-title {
                font-size: 26px;
            }
            
            .modal-option-btn {
                font-size: 14px;
                padding: 16px 12px;
            }
            
            .modal-save-btn {
                font-size: 19px;
                padding: 12px 32px;
            }
            
            .modal-grid.puzzles {
                /* Already using flexbox from main styles */
                gap: 10px;
            }
        }

/* Additional styles */
        @keyframes flashRedWhite {
            0%, 100% { background: rgba(255,0,0,0.98); }
            50% { background: rgba(255,255,255,0.98); }
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10% { transform: translateX(-20px); }
            20% { transform: translateX(20px); }
            30% { transform: translateX(-20px); }
            40% { transform: translateX(20px); }
            50% { transform: translateX(-20px); }
            60% { transform: translateX(20px); }
            70% { transform: translateX(-20px); }
            80% { transform: translateX(20px); }
            90% { transform: translateX(-20px); }
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }