@import url('top-controls.css');

/* HEX MIDI DESIGN SYSTEM */

        * {
            box-sizing: border-box;
        }

        /* GLOBAL SCROLLBAR STYLING */
        canvas {
            touch-action: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        /* Loading Overlay */
        #loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            z-index: 2000;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            font-family: 'Roboto', sans-serif;
            transition: opacity 0.5s;
        }

        #loading-overlay.hidden-overlay {
            opacity: 0;
            pointer-events: none;
            z-index: -1;
        }

        /* BACKGROUND BLOBS FOR GLASSMORPHISM */
        .glass-blobs {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
            pointer-events: none;
            background: var(--bg-color);
        }

        .blob {
            position: absolute;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(60px);
            animation: move 20s infinite alternate;
        }

        .blob-1 {
            top: -100px;
            right: -100px;
            background: radial-gradient(circle, rgba(255, 59, 48, 0.12) 0%, rgba(255, 59, 48, 0) 70%);
        }

        .blob-2 {
            bottom: -150px;
            left: -100px;
            background: radial-gradient(circle, rgba(0, 122, 255, 0.1) 0%, rgba(0, 122, 255, 0) 70%);
            animation-duration: 25s;
        }

        .blob-3 {
            top: 40%;
            left: 50%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(175, 82, 222, 0.08) 0%, rgba(175, 82, 222, 0) 70%);
            animation-duration: 30s;
        }

        @keyframes move {
            from { transform: translate(0, 0) scale(1); }
            to { transform: translate(100px, 100px) scale(1.2); }
        }

        /* ROBUST MODAL HIDING (Fixes Ghost Sliders) */
        .modal-overlay {
            position: fixed;
            top: var(--modal-top-offset);
            bottom: var(--modal-bottom-offset);
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0); /* 100% Transparent for Absolute Parity */
            z-index: 5000; /* High priority z-index */
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;

            /* Hidden State Default - Optimized for instant blur */
            display: none;
            opacity: 1; 
            
            /* REMOVED backdrop-filter (Option A) for perfect parity with popups */
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .modal-panel {
            color: #fff;
            text-align: center;
            max-width: 900px;
            width: 90%;
            max-height: 100%;
            overflow-y: auto;
            position: relative;
            animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .modal-overlay.visible {
            display: flex;
            pointer-events: none; /* Allow clicks to pass through to elements behind */
        }

        .modal-panel {
            pointer-events: auto; /* Ensure modal content itself remains interactive */
        }


        :root {
            --bg-color: #1e1e1e;
            --panel-bg: rgba(25, 25, 25, 0.65);
            --glass-bg-light: rgba(255, 255, 255, 0.12);
            --glass-bg-dark: rgba(20, 20, 20, 0.8);
            --glass-border: 1px solid rgba(255, 255, 255, 0.15);
            --glass-blur: blur(16px);
            --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
            --accent: #1565C0; /* Theme Blue as default (matches CONFIG.colors.active) */
            --text-muted: #aaa;
            --ad-height-desktop: 90px;
            --ad-height-mobile: 60px;

            /* TYPOGRAPHY SYSTEM (Strict Categories) */
            /* HEADING: Modal titles, major section headers */
            --font-display: 20px;
            /* Main modal titles (h2) */
            --font-heading: 14px;
            /* Section headers (h3) */
            /* BODY: Paragraph text, descriptions */
            --font-body: 12px;
            /* Standard paragraphs */
            --font-small: 10px;
            /* Captions, footnotes */
            /* CONTROLS: Interactive elements */
            --font-label: 10px;
            /* Input labels */
            --font-input: 11px;
            /* Input/Select text */
            --font-button: 12px;
            /* Button text */

            /* MODAL SYSTEM (Dynamic Offset) */
            --modal-top-offset: 144px; /* Calculated: 88px Banner + 56px Minimap */
            --modal-bottom-offset: 70px; /* Safe Zone for Ad */

            /* DYNAMIC SCALING (HUD) */
            --hud-btn-size: 44px;
        }

        /* 📈 RESPONSIVE GLOBAL SCALING (TABLET & DESKTOP) */
        @media (min-width: 1024px) {
            :root {
                /* Scale Typography (+30-40%) */
                --font-display: 32px;
                --font-heading: 18px;
                --font-body: 16px;
                --font-label: 14px;
                --font-input: 15px;
                --font-button: 16px;

                /* Scale Layout & Targets */
                --hud-btn-size: 64px;
                --modal-top-offset: 160px;
                --modal-bottom-offset: 90px;
            }

            /* Global Modal Expansion */
            .modal-panel {
                padding: 40px !important;
                border-radius: 32px !important;
                max-width: 950px !important; /* Cap width for extreme monitors */
            }

            /* Responsive Buttons & Selects */
            .btn-action, select {
                padding: 16px 20px !important;
                border-radius: 16px !important;
            }

            /* Scale HUD icons */
            .minimap-btn svg, .minimap-btn img {
                width: 32px !important;
                height: 32px !important;
            }
            #hud-btn-icon {
                width: 32px !important;
                height: 32px !important;
            }
        }

        /* GLOBAL GLASSMORPHISM CLASSES */
        /* LOW PERFORMANCE OVERRIDES (For old/slow devices) */
        body.low-perf * {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }
        body.low-perf .blob {
            display: none !important;
        }

        .glass-pane {
            background: var(--glass-bg-dark);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: var(--glass-border);
            box-shadow: var(--glass-shadow);
            border-radius: 20px;
            padding: 24px;
        }

        .glass-interactive {
            background: var(--glass-bg-light);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: var(--glass-border);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .glass-interactive:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-1px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }

        .glass-interactive:active {
            transform: scale(0.98);
        }

        /* HUD POPUP (Now uses unified .glass-pane) */

        body {
            margin: 0;
            background-color: #000000; /* Pitch black behind safe areas (notch/nav bar) */
            overflow: hidden;
            font-family: 'Roboto', sans-serif;
            touch-action: none;
            height: 100vh;
            height: 100dvh;
            color: white;
            display: flex;
            flex-direction: column;
            
            /* TRUE Fullscreen by default (0 paddings) */
            padding: 0 !important;
            transition: padding-top 0.3s ease;
        }

        body.has-status-bar {
            /* Standard mode: Restore safe area to avoid status bar overlap */
            padding-top: max(env(safe-area-inset-top, 0px), 24px) !important;
        }

        /* Enforce font consistency on inputs/buttons */
        input,
        button,
        select,
        textarea {
            font-family: 'Roboto', sans-serif;
        }

        #app-container {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            width: 100%;
            background-color: var(--bg-color); /* Restores theme color to app body */
        }

        @media (min-width: 1025px) {
            #app-container {
                padding-bottom: 0;
                /* No reserved space on desktop */
            }
        }

        @media (max-width: 1024px) {
            .desktop-only {
                display: none !important;
            }
        }

        canvas {
            background-color: #0d0d0d;
            box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
            display: block;
            width: 100%;
            height: 100%;
        }

        /* ADS */
        /* Legacy Ad Styles Removed - Handled by Unified Ad System */





        /* SETTINGS MODAL SPECIAL STYLES */
        /* SETTINGS MODAL SPECIAL STYLES */
        #settings-modal.slider-dragging {
            opacity: 0.5;
        }

        #settings-modal.slider-dragging #rows-slider,
        #settings-modal.slider-dragging .label:has(#rows-val) {
            opacity: 2;
        }

        #settings-modal .modal-panel {
            display: flex;
            flex-direction: column;
            padding: 24px;
            text-align: left;
            max-width: 580px;
            border-radius: 20px;
            position: relative;
        }

        /* [RESPONSIVE] Scale settings modal for big screens */
        @media (min-width: 1024px) {
            #settings-modal .modal-panel {
                max-width: 780px !important;
                padding: 40px !important;
            }
            #settings-modal .settings-columns {
                gap: 40px !important;
            }
        }

        #settings-modal .settings-columns {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            align-items: start;
        }

        /* Portrait mode: single column */
        @media (orientation: portrait) {
            #settings-modal .settings-columns {
                grid-template-columns: 1fr;
            }
        }

        /* Adjust columns inside the modal */


        /* CLOSE BUTTON */
        .btn-close-minimal {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            color: rgba(255, 255, 255, 0.6) !important;
            font-size: 20px !important;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            z-index: 1000;
            padding: 0;
            margin: 0;
            outline: none;
            border-radius: 0 !important;
        }

        .btn-close-minimal:hover {
            color: #fff !important;
            opacity: 1;
            transform: scale(1.1);
        }

        /* TOGGLE SWITCH */
        .switch-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 22px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.1);
            transition: .3s;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: #ccc;
            transition: .3s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: var(--accent);
            border-color: var(--accent);
        }

        input:checked+.slider:before {
            transform: translateX(18px);
            background-color: white;
        }

        .switch-label {
            font-size: 13px;
            color: #eee;
        }

        .close-settings-internal:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
        }

        /* RESPONSIVE LAYOUTS - SETTINGS MODAL */
        /* STANDARD: Mobile Portrait (Excludes Tablet & Desktop) */
        @media (max-width: 600px) and (orientation: portrait) {

            #settings-modal .modal-panel {
                max-height: 80vh;
                overflow-y: auto;
            }

            #settings-modal .settings-columns {
                grid-template-columns: 1fr;
                /* Single column on mobile portrait */
            }
        }

        /* INPUTS */
        .label {
            font-size: var(--font-label);
            font-weight: 700;
            letter-spacing: 0.5px;
            color: var(--text-muted);
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
        }

        select {
            width: 100%;
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 12px;
            font-size: var(--font-input);
            font-weight: 500;
            outline: none;
            cursor: pointer;
        }

        select option {
            background: #222;
            color: #fff;
        }

        input[type=range] {
            appearance: none;
            -webkit-appearance: none;
            width: 100%;
            background: transparent;
            margin-bottom: 5px;
            display: block;
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 20px;
            width: 10px;
            border-radius: 2px;
            background: var(--accent);
            border: 1px solid rgba(255, 255, 255, 0.8);
            margin-top: -8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            transition: background 0.2s;
            cursor: ew-resize;
        }

        input[type=range]:disabled::-webkit-slider-thumb {
            background: #555;
            border-color: #444;
            cursor: not-allowed;
        }

        input[type=range]:disabled::-webkit-slider-runnable-track {
            background: rgba(255, 255, 255, 0.1);
        }

        .icon-row .btn-label {
            max-width: 44px;
        }
        .btn-icon {
            flex: 1;
            padding: 8px 0;
            height: 44px; /* Slightly taller */
            border-radius: 12px;
            color: #eee;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-icon.active {
            background: var(--accent);
            color: #000;
            box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
            border-color: transparent;
        }

        #btn-settings-toggle svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        #btn-sustain-toggle svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        .btn-action {
            width: 100%;
            padding: 12px;
            border-radius: 12px;
            color: #eee;
            font-size: var(--font-button);
            font-weight: 600;
            cursor: pointer;
            letter-spacing: 0.5px;
            margin-top: 5px;
            margin-bottom: 12px;
        }

        .btn-action.active {
            background: var(--accent);
            color: #000;
            border-color: transparent;
        }

        .dev-badge {
            background: #FF375F;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 9px;
            margin-left: 5px;
        }
        
        /* PREMIUM ACTIONS (Horizontal for space-saving) */
        #premium-actions {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 12px;
            width: 100%;
            align-items: center;
            justify-content: center;
        }

        .btn-premium {
            flex: 1 1 80px;
            padding: 4px 2px !important;
            border-radius: 12px !important;
            color: #eee;
            font-size: 9px !important;
            font-weight: 600;
            cursor: pointer;
            letter-spacing: 0.1px;
            background: var(--glass-bg-light);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: var(--glass-border);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 26px !important;
            height: 26px !important;
            transition: all 0.2s ease;
            box-sizing: border-box;
            overflow: hidden;
            white-space: nowrap;
            min-width: 80px;
        }

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

        .btn-premium:active {
            transform: scale(0.98);
        }

        /* MODALS */
        /* UNIFIED MODALS */

        /* PREMIUM MODAL SPECIFIC */
        #premium-modal .modal-panel {
            max-width: 380px;
            padding: 40px 30px;
            border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
        }
        
        #premium-modal h2 {
            font-size: 24px;
            margin-top: 10px;
        }

        .premium-options {
            width: 100%;
        }


        .modal-overlay.visible {
            display: flex;
            z-index: 5000;
            pointer-events: none;
        }

        /* Mobile landscape: modals at 2% from top */
        /* Mobile landscape: modals at 2% from top (Expanded for modern phones up to 932px wide) */
        /* STANDARD INFO CARD STYLE (Base) */
        .modal-panel {
            color: #fff;
            text-align: center;
            max-width: 900px;
            width: 90%;
            max-height: 95vh;
            overflow-y: auto;
            position: relative;
            animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* Mobile landscape: modals at 2% from top */
        /* STANDARD: Mobile Landscape */
        @media (max-width: 932px) and (orientation: landscape) {
            .modal-overlay {
                align-items: center;
                padding-top: 20px;
                /* Very minimal top padding */
                padding-bottom: 70px;
            }

            .modal-panel {
                max-height: 95vh;
                /* Allow almost full height */
                padding: 20px;
                /* max-width: 480px; */
                width: 80%
                    /* Less vertical padding */
            }
        }

        /* STANDARD: Mobile Portrait */
        @media (max-width: 600px) and (orientation: portrait) {
            .modal-overlay {
                padding-bottom: 70px;
                /* Space for ad banner */
            }
        }

        /* STANDARD: Mobile Portrait (Consolidated) */
        @media (max-width: 600px) and (orientation: portrait) {
            .modal-panel {
                max-height: calc(95vh - 60px);
                /* Subtract Ad Space */
                width: 90%;
                max-width: 80%;
                /* Maximize width but keep card look */
            }

            /* Compact headers for mobile */
            .modal-panel h2 {
                margin-bottom: 5px;
                font-size: 18px;
                /* Slightly smaller */
            }

            .modal-panel h3 {
                margin: 10px 0 5px;
                /* tighter spacing */
                font-size: 13px;
            }

            .modal-panel p {
                margin-bottom: 10px;
                font-size: 11px;
            }

            .quick-setup-grid {
                gap: 10px;
                /* Tighter grid */
            }
        }

        .modal-panel h2 {
            margin-top: 0;
            color: var(--accent);
            margin-bottom: 8px;
            font-size: var(--font-display);
            text-align: center;
            letter-spacing: 0.5px;
            font-weight: 700;
        }

        /* COMPACT MODE FOR SHORT LANDSCAPE VIEWPORTS */
        @media (max-height: 450px) and (orientation: landscape) {
            .modal-panel {
                padding: 12px 20px !important;
                border-radius: 12px !important;
            }

            .modal-panel h2 {
                font-size: 16px !important;
                margin-bottom: 4px !important;
            }

            .modal-panel p {
                font-size: 10px !important;
                margin-bottom: 8px !important;
            }

            .inst-grid {
                gap: 4px !important;
                padding: 4px !important;
            }

            .instrument-btn {
                min-height: 40px !important;
                padding: 4px !important;
                gap: 2px !important;
                border-radius: 12px !important;
            }

            .inst-icon {
                max-width: 24px !important;
            }

            .inst-name {
                font-size: 9px !important;
            }

            /* Settings Modal Specific */
            .settings-columns {
                gap: 8px !important;
            }

            .panel-section {
                padding: 0 !important;
            }

            .label {
                margin-bottom: 4px !important;
            }

            select {
                padding: 6px !important;
                font-size: 10px !important;
            }

            .btn-action {
                padding: 6px !important;
                font-size: 10px !important;
                margin-bottom: 4px !important;
            }

            #settings-hint-container {
                margin-top: 4px !important;
                padding: 6px !important;
                font-size: 9px !important;
            }
        }

        .modal-panel p {
            font-size: var(--font-body);
            line-height: 1.6;
            color: #ccc;
            margin-bottom: 15px;
        }

        .modal-panel h3 {
            font-size: var(--font-heading);
            color: #fff;
            margin: 15px 0 8px;
            letter-spacing: 0.5px;
            font-weight: 600;
        }

        .modal-panel small {
            display: block;
            font-size: var(--font-small);
            color: #777;
            margin-top: 10px;
            text-align: center;
        }

        .btn-close {
            display: block;
            margin: 10px auto 0;
            padding: 15px 50px;
            background: var(--accent);
            border: none;
            border-radius: 30px;
            color: #000;
            font-weight: 700;
            cursor: pointer;
            font-size: 16px;
            min-width: 160px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transition: transform 0.1s, box-shadow 0.1s;
        }




        /* METRONOME BUTTON STYLES */
        #metronome-btn {
            transition: background 0.2s, transform 0.1s;
        }

        #metronome-btn.active,
        #metronome-btn:active {
            transform: scale(0.95);
        }

        #metronome-slider-popup {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* QUICK SETUP STYLES */
        .quick-setup-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 10px;
        }

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

        /* TIME SIGNATURE EDITOR (SELECT-BASED) */
        .time-sig-editor {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin-top: 10px;
            padding: 2px 0;
        }

        .ts-select {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            text-align: center;
            font-family: 'Roboto', monospace;
            padding: 0;
            margin: 0;
            width: auto;
            min-width: 25px;
        }

        .ts-select:hover {
            color: var(--accent);
        }

        .ts-divider {
            color: rgba(255, 255, 255, 0.2);
            font-size: 14px;
            font-weight: 300;
            margin: 0 6px;
        }

        .ts-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: var(--accent);
        }

        .ts-btn:active {
            transform: scale(0.9);
            background: var(--accent);
            color: #000;
        }

        .time-sig-preset {
            color: #ccc;
            border-radius: 6px;
            padding: 8px 0;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }

        .time-sig-preset:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .time-sig-preset.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #000;
            box-shadow: 0 0 10px rgba(255, 159, 10, 0.3);
        }



        .setup-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .setup-section h3 {
            margin-top: 0;
            border-bottom: none;
            font-size: var(--font-heading);
            letter-spacing: 0.5px;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 0;
        }

        .setup-desc {
            font-size: var(--font-body);
            color: #bbb;
            margin-bottom: 5px;
            line-height: 1.4;
        }

        .row-btn-group {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            justify-content: center;
        }

        .row-btn-group .btn-label {
            max-width: 44px;
        }

        .btn-group {
            display: flex;
            gap: 8px;
            width: 100%;
            justify-content: center;
        }

        .btn-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        .btn-label {
            display: block;
            width: 100%;
            font-size: 10px;
            color: #888;
            font-weight: bold;
            text-align: center;
            line-height: 1.1;
            white-space: normal;
        }

        .btn-square {
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: 14px;
            color: #eee;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            white-space: nowrap;
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.15);
        }

        .btn-square:hover {
            transform: translateY(-2px);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .btn-square.active {
            background: var(--accent);
            color: #000;
            border-color: transparent;
            box-shadow: 0 0 20px rgba(255, 159, 10, 0.4);
        }

        .btn-square svg {
            width: 34px;
            height: 34px;
            fill: currentColor;
            opacity: 0.9;
        }

        .btn-square.num-btn {
            font-size: 32px;
            font-weight: 800;
            padding: 0;
            gap: 0;
        }

        .btn-option {
            flex: 1;
            padding: 12px;
            border-radius: 10px;
            color: #eee;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
        }

        .btn-option:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        .btn-option.active {
            background: var(--accent);
            color: #000;
            border-color: transparent;
        }

        .chord-preview-box {
            border-radius: 8px;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 50px;
            margin-bottom: 8px;
        }

        .chord-preview-label {
            font-size: 10px;
            color: #666;
            margin-right: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* PATTERNS */
        .pattern-container {
            display: grid;
            /* STRICT CONSTRAINT: 2 Cols default, 4 Cols wide. No 3 Cols. */
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            /* gap: clamp(4px, 1vw, 10px); */
            justify-content: center;
            margin: 0 auto;
            /* Centered */
            width: 100%;
            max-width: 850px;
            /* Expanded to allow wider, nicer columns */
            padding: 0 10px;
            box-sizing: border-box;
            overflow-x: auto;
        }

        /* Desktop/Wide: Force 4 columns (skipping 3) */
        @media (min-width: 932px),
        (orientation: landscape) {
            .pattern-container {
                grid-template-columns: repeat(4, 1fr);
            }
        }





        .pattern-box {
            text-align: center;
            padding: 8px;
            border-radius: 8px;
        }



        .pattern-label {
            font-size: 10px;
            margin-bottom: 5px;
            color: #fff;
            font-weight: bold;
        }



        .patterns-row {
            display: flex;
            gap: 4px;
            justify-content: center;
        }



        .mini-grid {
            display: grid;
            grid-template-rows: 1fr 1fr;
            gap: 1px;
        }

        .mini-row {
            display: flex;
            gap: 1px;
            justify-content: center;
        }

        .mini-row.shift {
            margin-left: 11px;
        }

        @media (max-width: 932px) {
            .mini-row.shift {
                margin-left: 7px;
            }
        }

        .mini-key {
            width: clamp(2px, 0.8vw, 9px);
            height: clamp(3px, 1.2vw, 13px);
            background: #333;
            border-radius: clamp(0px, 0.15vw, 2px);
            border: 1px solid #444;
        }

        /* Bigger mini-keys in portrait/vertical orientation */
        @media (orientation: portrait) {
            .mini-key {
                width: clamp(2px, 1.5vw, 12px);
                height: clamp(3px, 2.25vw, 16px);
                /* border-radius: clamp(1px, 0.4vw, 3px); */
            }
        }

        .mini-key.root {
            background: var(--accent);
            border-color: #fff;
        }

        .mini-key.chord {
            background: #00E5FF;
            border-color: #fff;
        }

        /* SHAPE PREVIEWS - PRECISE GEOMETRY (Pitch 10px) */

        /* CIRCLE: W=10, M=0 -> Pitch 10. Offset Default (5px) */
        .preview-shape-circle .mini-key {
            width: 10px;
            /* Pitch 10 */
            height: 10px;
            border-radius: 50%;
            margin: 0;
        }

        .preview-shape-circle .mini-row {
            gap: 0;
        }

        .preview-shape-circle .mini-row.shift {
            margin-left: 11px;
        }

        /* SQUARE: W=9, Gap=1 -> Pitch 10. Offset Default (5px) */
        .preview-shape-square .mini-key {
            width: 9px;
            /* Pitch 10 (9+1) */
            height: 9px;
            /* Square 1:1 */
            border-radius: 1px;
            margin: 0;
            /* Use gap:1 from default */
        }

        /* Default .mini-row has gap:1, so no override needed for Square */

        .preview-shape-square .mini-row.shift {
            margin-left: 11px;
        }

        /* HEXAGON: W=10, M=0 -> Pitch 10. Offset Default (5px) */
        .preview-shape-hexagon .mini-key {
            width: 10px;
            /* Pitch 10 */
            height: 12px;
            /* Aspect 1.15 approx */
            border-radius: 0;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            margin: 0;
        }

        .preview-shape-hexagon .mini-row {
            gap: 0;
            margin-bottom: -3px;
        }

        /* Vertical overlap */
        .preview-shape-hexagon .mini-row.shift {
            margin-left: 11px;
        }

        /* ORIGINAL: Default W=9, H=13, Gap=1 -> Pitch 10. Offset 5 */

        /* SUSTAIN GLOW */
        body.sustain-active #app-container canvas {
            box-shadow: 0 0 60px var(--accent), inset 0 0 20px var(--accent);
            border-color: var(--accent);
        }

        body.sustain-active #minimap-bar {
            border-top: 1px solid var(--accent);
        }

        #toast {
            position: absolute;
            bottom: 120px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            padding: 10px 24px;
            border-radius: 20px;
            font-size: 13px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            z-index: 10000;
            max-width: 90%;
            text-align: center;
        }

        #toast.visible {
            opacity: 1;
        }

        /* PREMIUM BUTTON STYLES */
        .btn-premium {
            width: 100%;
            padding: 12px;
            margin-top: 10px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: transform 0.1s;
        }

        .btn-premium:active {
            transform: scale(0.97);
        }

        #btn-remove-ads {
            background: linear-gradient(135deg, #FF9F0A 0%, #FF375F 100%);
            border: none;
            color: white;
            box-shadow: 0 4px 15px rgba(255, 55, 95, 0.4);
        }

        #btn-restore {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #aaa;
            margin-top: 5px;
        }

        #premium-badge {
            background: rgba(48, 209, 88, 0.15);
            color: #30D158;
            border: 1px solid rgba(48, 209, 88, 0.3);
            padding: 10px;
            border-radius: 8px;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            display: none;
            margin-top: 15px;
        }

        /* MINIMAP */
        /* MINIMAP BAR */
        #minimap-bar {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 40;
            padding: 0;
            margin: 0;
            gap: 0;
            box-sizing: border-box;
        }

        .minimap-slot {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            /* Ensure clicks work */
        }

        .minimap-btn {
            background: transparent;
            border: none;
            color: #eee;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            /* Square with slight radius */
            transition: transform 0.1s;
            flex-shrink: 0;
        }

        /* Subtle glass hover for minimap buttons */
        .minimap-btn {
            border-radius: 8px;
            transition: all 0.2s;
        }

        .minimap-btn:active {
            transform: scale(0.9);
        }

        #minimap-container {
            flex: 1;
            height: 40px;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #minimap-canvas {
            width: 100%;
            height: 100%;
            display: block;
            opacity: 1.0;
            /* Clear, no shading */
        }

        #minimap-thumb {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            border: 2px solid var(--accent);
            background: transparent;
            box-sizing: border-box;
            border-radius: 4px;
            pointer-events: none;
            /* Let clicks pass to container */
            transition: none;
            transform: translateX(0px);
            will-change: transform, width;
            /* box-shadow removed here, applied when sustain active */
        }

        .sustain-active #minimap-thumb {
            box-shadow: 0 0 15px 5px var(--accent);
            /* Glow only when Sustain Active */
        }

        /* Portrait Mobile: Move minimap to second row (Excludes Tablet) */
        @media (orientation: portrait) and (max-width: 600px) {
            #minimap-bar {
                height: auto;
                flex-wrap: wrap;
            }

            #minimap-slot-left,
            #minimap-slot-right {
                order: 1;
            }

            #minimap-slot-right {
                justify-content: flex-end;
            }

            #minimap-container {
                width: 100%;
                flex: none;
                order: 2;
                margin-top: 4px;
            }
        }

        /* Playback Time Display */
        #playback-time-display {
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            z-index: 50;
            pointer-events: none;
            padding: 0 15px;
        }

        #playback-time-display>div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: 'Roboto', monospace;
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
        }

        #playback-current-time,
        #playback-total-time {
            padding: 4px 8px;
            border-radius: 4px;
            min-width: 45px;
            text-align: center;
        }

        /* INSTRUMENT GRID MODAL */
        #instrument-modal {
            z-index: 2000;
        }

        .inst-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            width: 100%;
            padding: 10px;
        }

        @media (orientation: portrait) and (max-width: 932px) {
            .inst-grid {
                /* 4x5 Grid for Portrait */
                grid-template-columns: repeat(4, 1fr);
            }
        }

        #instrument-modal .modal-panel {
            /* Constrain width to fit grid tightly */
            width: 90%;
            padding: 20px;
            max-width: 480px;
            margin: 20px;
        }

        /* 📈 RESPONSIVE OVERRIDES (TABLET & DESKTOP) */
        @media (min-width: 1024px) {
            #instrument-modal .modal-panel {
                max-width: 820px !important;
                width: 85% !important;
                padding: 30px !important;
            }
            .inst-grid {
                grid-template-columns: repeat(5, 1fr) !important;
                gap: 16px !important;
                padding: 15px !important;
            }
            .instrument-btn {
                min-height: 100px !important;
                padding: 15px !important;
                max-width: none !important;
                margin: 0 !important;
            }
            .inst-icon {
                max-width: 44px !important;
                margin-bottom: 8px !important;
            }
            .inst-name {
                font-size: 13px !important;
                font-weight: 600 !important;
            }
        }

        /* STANDARD: Mobile Landscape */
        @media (max-width: 932px) and (orientation: landscape) {
            /* COMPACT 5x3 SQUARED GRID STRATEGY: 
               Strictly compact to fit height without scrolling.
            */

            #instrument-modal .modal-panel {
                /* Force narrow width to shrink squares */
                max-width: 420px;
                width: 60% !important;
            }

            .inst-grid {
                grid-template-columns: repeat(5, 1fr);
                gap: 5px;
                padding: 5px;
                overflow-y: hidden;
                /* Try to fit without scroll */
            }

            .instrument-btn {
                /* MOBILE LANDSCAPE: COMPACT */
                padding: 2px;
            }

            .inst-icon {
                /* Tiny for tight fit */
                width: 45%;
                max-width: 20px;
                height: auto;
                aspect-ratio: 1;
                margin-bottom: 2px;
            }

            .inst-name {
                font-size: 8px;
                line-height: 1;
            }

            /* INFO MODAL FIXES */
            .modal-overlay {
                padding-bottom: 70px;
                /* Ad Banner Clearance */
                box-sizing: border-box;
                align-items: center;

                /* Ensure centering respects padding */
            }

            .pattern-container {
                /* USER REQ: Keep 4 Columns (reduces rows to 2) */
                grid-template-columns: repeat(4, 1fr) !important;
                gap: 5px;
                width: 98%;
                max-width: 800px;
                /* Allow it to spread wide */
            }

            .pattern-box {
                padding: 4px;
                /* Compact */
            }

            /* INFO MODAL TEXT SHRINK */
            #info-modal p {
                font-size: 11px;
                line-height: 1.25;
                margin-bottom: 8px;
            }


            .pattern-label {
                font-size: 10px;
                margin-bottom: 2px;
            }

            /* QUICK SETTINGS & BUTTONS SHRINK */
            #quick-settings-modal h2,
            #info-modal h2 {
                font-size: 14px;
                margin: 5px 0;
            }





            .btn-close {
                padding: 6px 15px !important;
                font-size: 11px !important;
                margin-top: 5px !important;
                min-height: auto !important;
            }

            /* AGGRESSIVE SHRINK for Quick Settings Buttons */
            .qs-square-btn,
            .qs-card-btn {
                width: 50px !important;
                height: 50px !important;
                min-height: 0 !important;
                padding: 0 !important;
                display: inline-flex !important;
                justify-content: center !important;
                align-items: center !important;
            }

            .qs-square-btn svg,
            .qs-card-btn svg {
                width: 24px !important;
                height: 24px !important;
            }

            .qs-label-external {
                font-size: 9px !important;
                line-height: 1 !important;
                margin-top: 2px !important;
            }

            .qs-btn-group {
                gap: 5px !important;
            }
        }

        /* CONSTRAINT: Mobile Portrait (Force 2 Cols for Quick Settings) */
        @media (orientation: portrait) {
            .qs-cols {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            /* Smaller buttons for portrait mode */
            .btn-close {
                padding: 8px 20px !important;
                font-size: 14px !important;
                margin-top: 10px !important;
                width: auto !important;
            }
        }

        /* PORTRAIT INSTRUMENT STYLES REMOVED - TO BE REDONE LATER */

        .instrument-btn {
            /* RESET BUTTON STYLES */
            appearance: none;
            -webkit-appearance: none;
            font-family: inherit;
            color: inherit;
            margin: 0;
            width: 100%;
            max-width: 100px;
            /* Fill grid cell but limit max size */

            /* APPLE-STYLE SQUIRCLE DESIGN */
            background: rgba(255, 255, 255, 0.05); /* Very subtle highlight */
            border: var(--glass-border);
            border-radius: 22%;
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.15),
                inset 0 1px 1px rgba(255, 255, 255, 0.1);

            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            /* Prevent content overflow */
            aspect-ratio: 1;
            /* Squared */
            min-height: 50px;
            box-sizing: border-box;
            z-index: 1;
        }

        /* ... skipped ... */

        #quick-settings-modal h2,
        #info-modal h2 {
            text-align: center;
            font-size: 20px;
            color: var(--accent);
            margin-bottom: 12px;
            letter-spacing: 1px;
        }

        .instrument-btn:hover {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.4);
            z-index: 50;
        }

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

        .instrument-btn.active {
            box-shadow: 0 0 0 2px var(--accent), 0 8px 24px rgba(0, 0, 0, 0.4);
            border-color: var(--accent);
            background: rgba(255, 255, 255, 0.1);
        }

        .instrument-btn.selected {
            box-shadow: 0 0 0 3px #fff, 0 8px 24px rgba(0, 0, 0, 0.4);
            border-color: #fff;
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.05);
            z-index: 50;
        }

        .instrument-btn.active.selected {
            box-shadow: 0 0 0 2px #fff, 0 8px 24px rgba(0, 0, 0, 0.4);
            border-color: #fff;
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.02);
            z-index: 50;
        }

        .inst-icon-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
        }

        .inst-icon {
            width: 50%;
            height: auto;
            max-width: 32px;
            aspect-ratio: 1;
            margin-bottom: 4px;
            background-color: currentColor;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            mask-position: center;
        }

        .inst-icon img {
            display: none; /* We use mask-image on the parent now */
        }



        .inst-name {
            font-size: 11px;
            color: #ccc;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
            text-align: center;
            font-weight: 500;
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        .instrument-btn.active .inst-name {
            color: var(--accent);
            font-weight: bold;
        }


        #btn-current-inst {
            width: 40px;
            height: 40px;
            padding: 5px;
            border-radius: 8px;
            background: var(--glass-bg-light);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: var(--glass-border);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #btn-current-inst svg {
            width: 24px;
            height: 24px;
            fill: var(--accent);
        }

        /* QUICK SETUP STYLES (Restored Old Design) */
        #quick-settings-modal {
            display: none;
            z-index: 2200;
            justify-content: center;
            align-items: center;
            padding-bottom: 10vh;
            box-sizing: border-box;
        }

        /* Mobile landscape: quick setup centered */
        /* Mobile landscape: quick setup centered (Expanded for modern phones) */
        /* STANDARD: Mobile Landscape */
        @media (max-width: 932px) and (orientation: landscape) {
            #quick-settings-modal {
                align-items: center;
                padding-bottom: 70px;
            }
        }

        /* Mobile portrait: quick setup space for ad banner */
        @media (max-width: 932px) and (orientation: portrait) {
            #quick-settings-modal {
                padding-bottom: 70px;
                /* Space for ad banner */
            }

            #quick-settings-modal .modal-panel {
                max-height: calc(90vh - 70px);
                /* Account for ad banner */
            }
        }

        #quick-settings-modal.visible {
            display: flex;
        }

        #quick-settings-modal .modal-panel {
            /* width: 70%; */
            padding: 20px;
            text-align: left;
            max-height: 85vh;
            overflow-y: auto;
        }

        @media (min-width: 1024px) {
            #quick-settings-modal .modal-panel {
                max-width: 1100px !important;
                padding: 40px !important;
            }
            .qs-cols {
                gap: 30px !important;
            }
            .qs-square-btn {
                width: 72px !important;
                height: 72px !important;
            }
            .qs-square-btn svg {
                width: 38px !important;
                height: 38px !important;
            }
        }

        #quick-settings-modal h2,
        #info-modal h2 {
            text-align: center;
            font-size: 20px;
            color: var(--accent);
            margin-bottom: 12px;
            letter-spacing: 1px;
        }

        .qs-cols {
            display: flex;
            flex-wrap: nowrap;
            gap: 10px;
            margin-bottom: 10px;
            align-items: stretch;
        }

        /* 2x2 Grid for screens 932px and below */
        /* MODERN CONSTRAINT: Auto-fit columns based on min-width of 100px */
        .qs-cols {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 10px;
            margin-bottom: 20px;
            align-items: stretch;
            flex-direction: column;
        }


        /* Removed rigid media queries for qs-cols - handled by auto-fit */
        .qs-chord-preview {
            height: clamp(25px, 4vh, 40px) !important;
            margin-bottom: clamp(5px, 1vh, 10px) !important;
        }

        .qs-chord-btn {
            padding: clamp(0px, 0.4vh, 8px) 0 !important;
            font-size: clamp(9px, 1.5vh, 11px) !important;
            border-radius: clamp(1px, 0.4vh, 8px) !important;
        }

        .qs-chord-grid {
            gap: clamp(1px, 0.4vh, 2px);
        }

        #quick-setup-modal h2 {
            font-size: clamp(8px, 5vh, 20px);
            margin-bottom: clamp(1px, 0.6vh, 12px);
        }

        #quick-setup-modal .modal-panel {
            padding: clamp(10px, 2vh, 15px) !important;
            max-height: calc(100vh - 40px);
            height: fit-content;
            overflow-y: auto;
        }

        .btn-close {
            padding: 12px 25px;
            font-size: 16px;
            margin-top: 15px;
            margin-bottom: 10px;
            border-radius: 50px;

            /* Prevent stretching & overrides */
            width: fit-content;
            min-width: 0 !important;
            /* Fix for user reported 160px limit */
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        /* Generic Landscape Override */
        @media (orientation: landscape) {
            .btn-close {
                padding: 8px 20px !important;
                font-size: 12px !important;
                margin-top: 8px !important;
            }
        }


        .qs-col {
            flex: 1;
            border: var(--glass-border);
            border-radius: 12px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }



        .qs-header {
            color: var(--accent);
            font-size: var(--font-heading);
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        /* STANDARD: Mobile Portrait & Landscape (Small Tablets) */
        @media (max-width: 932px) {
            .qs-header {
                font-size: 12px;
                margin-bottom: 5px;
            }
        }



        .qs-desc-text {
            color: #ccc;
            font-size: var(--font-body);
            line-height: 1.4;
            margin-bottom: 15px;
            min-height: 10px;
        }

        /* STANDARD: Mobile Portrait */
        @media (max-width: 932px) and (orientation: portrait) {
            .qs-desc-text {
                font-size: 11px;
                min-height: 10px;
                margin-bottom: 10px;
                line-height: 1.3;
            }
        }

        /* STANDARD: Mobile Portrait (Small) - Handled by clamp() or fluid type mostly, but keeping for safety */
        @media (max-width: 932px) and (orientation: portrait) {
            .qs-desc-text {
                font-size: 10px;
                min-height: 10px;
            }
        }

        /* BTN CARD (Layout Style) */
        /* BTN CARD (Layout Style) */
        .qs-btn-group {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        .qs-item-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            text-align: center;
            width: 65px;
            flex-shrink: 0;
        }

        /* STANDARD: Mobile Portrait (Consolidated) */
        @media (max-width: 932px) and (orientation: portrait) {
            .qs-item-wrapper {
                width: 38px;
                gap: 4px;
            }
        }

        .qs-item-wrapper {
            width: 40px;
            gap: 4px;
        }


        /* Mobile Landscape Adjustment */
        @media (orientation: landscape) and (max-height: 600px) {
            .qs-item-wrapper {
                width: 36px;
                gap: 2px;
            }

            .qs-card-btn svg {
                width: 18px;
                height: 18px;
            }
        }

        .qs-card-btn {
            width: 100%;
            background: rgba(255, 255, 255, 0.05);
            border: var(--glass-border);
            border-radius: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            aspect-ratio: 1;
            color: #888;
        }

        .qs-card-btn svg {
            width: 28px;
            /* Restored to 28px */
            height: 28px;
            fill: currentColor;
        }

        .qs-card-btn:hover {
            background: #333;
            color: #fff;
        }

        .qs-card-btn.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #000;
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .qs-label-external {
            font-size: 11px;
            font-weight: normal;
            color: #ccc;
            line-height: 1.2;
            text-align: center;
            width: 100%;
        }

        /* STANDARD: Mobile Portrait & Landscape */
        @media (max-width: 932px) {
            .qs-label-external {
                font-size: 9px;
                line-height: 1.1;
            }
        }

        /* STANDARD: Mobile Portrait (Consolidated) */
        @media (max-width: 932px) and (orientation: portrait) {
            .qs-label-external span {
                font-size: 7px;
            }
        }

        .qs-card-btn.active+.qs-label-external {
            color: var(--accent);
            font-weight: bold;
        }

        .qs-card-btn.active+.qs-label-external span {
            color: var(--accent);
            opacity: 0.8;
            font-weight: bold;
        }

        /* SQUARE BTNS (Grid Size) */
        .qs-square-btn {
            background: rgba(255, 255, 255, 0.05);
            border: var(--glass-border);
            border-radius: 12px;
            width: 65px;
            flex-shrink: 0;
            aspect-ratio: 1;
            font-size: 11px;
            font-weight: 600;
            color: #888;
            cursor: pointer;
            transition: all 0.2s;
        }

        /* STANDARD: Mobile Portrait (Consolidated) */
        @media (max-width: 932px) and (orientation: portrait) {
            .qs-square-btn {
                width: 38px;
                font-size: 11px;
            }
        }

        /* Mobile Landscape Adjustment */
        @media (orientation: landscape) and (max-height: 600px) {
            .qs-square-btn {
                width: 36px;
                font-size: 11px;
                border-radius: 6px;
            }
        }

        /* Grid size buttons - larger font */
        .qs-square-btn[id^="btn-qs-r"] {
            font-size: 18px;
            font-weight: 700;
        }

        /* Mobile portrait - keep grid numbers big */
        @media (max-width: 932px) and (orientation: portrait) {
            .qs-square-btn[id^="btn-qs-r"] {
                font-size: 16px;
            }
        }

        /* Mobile landscape */
        @media (orientation: landscape) and (max-height: 600px) {
            .qs-square-btn[id^="btn-qs-r"] {
                font-size: 15px;
            }
        }

        .qs-square-btn:hover {
            background: #333;
            color: #fff;
        }

        .qs-square-btn.active {
            background: var(--accent);
            color: #000;
            border-color: var(--accent);
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        /* CHORD GRID */
        .qs-chord-preview {
            border: var(--glass-border);
            border-radius: 8px;
            height: 30px;
            width: 90%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
        }

        /* Bigger mini keys inside chord preview */
        .qs-chord-preview .mini-key {
            width: 12px;
            height: 16px;
        }

        .qs-chord-preview .mini-row.shift {
            margin-left: 14px;
        }

        /* STANDARD: Mobile Portrait */
        @media (max-width: 932px) and (orientation: portrait) {
            .qs-chord-preview {
                height: 30px;
                margin-bottom: 10px;
            }

            .qs-chord-preview .mini-key {
                width: 9px;
                height: 12px;
            }

            .qs-chord-preview .mini-row.shift {
                margin-left: 10px;
            }
        }

        .qs-chord-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
            width: 100%;
        }

        /* STANDARD: Mobile Portrait */
        @media (max-width: 932px) and (orientation: portrait) {
            .qs-chord-grid {
                gap: 2px;
            }
        }

        .qs-chord-btn {
            border: none;
            border-radius: 8px;
            padding: 8px 0;
            color: #aaa;
            font-size: 11px;
            font-weight: bold;
            cursor: pointer;
            text-transform: capitalize;
        }

        /* STANDARD: Mobile Portrait (Consolidated) */
        @media (max-width: 932px) and (orientation: portrait) {
            .qs-chord-btn {
                padding: 4px 0;
                font-size: 8px;
            }
        }

        .qs-chord-btn:hover {
            background: #333;
            color: #fff;
        }

        .qs-chord-btn.active {
            background: var(--accent);
            color: #000;
        }

        .btn-start-play {
            background: var(--accent);
            color: #000;
            border: none;
            padding: 10px 40px;
            font-size: 14px;
            font-weight: bold;
            border-radius: 30px;
            cursor: pointer;
            display: block;
            margin: 0 auto;
            transition: transform 0.2s;
        }

        /* STANDARD: Mobile Portrait */
        @media (max-width: 932px) and (orientation: portrait) {
            .btn-start-play {
                padding: 8px 25px;
                font-size: 12px;
            }
        }

        /* STANDARD: Mobile Landscape */
        @media (max-width: 932px) and (orientation: landscape) {
            .btn-start-play {
                padding: 6px 20px;
                font-size: 11px;
            }
        }

        button#btn-sustain-toggle {
            transition: all 0.5s ease;
            position: relative;
            z-index: 5000;
            /* Ensure on top */
        }

        /* Recording button - default red circle */
        #hud-record-btn svg circle {
            fill: #FF3B30;
        }

        /* Recording state - show square (stop icon) with pulse */
        #hud-record-btn.recording svg {
            animation: recordPulse 1.5s ease-in-out infinite;
        }

        @keyframes recordPulse {

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

            50% {
                opacity: 0.7;
                transform: scale(1.05);
            }
        }

        #hud-record-btn.recording {
            box-shadow: 0 0 12px rgba(255, 59, 48, 0.6);
        }

        /* Brighten all icon buttons in settings */
        .btn-icon,
        .minimap-btn {
            color: #fff !important;
            fill: #fff !important;
            filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
        }

        .btn-icon svg,
        .minimap-btn svg {
            fill: #fff !important;
        }

        /* Sustain Active Glow Animation */


        #sustain-effect {
            position: absolute;
            /* Changed from fixed to absolute */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: 9999;
            pointer-events: none;
            box-shadow: inset 0 0 0 0 var(--accent);
            /* Fast shrink on release */
            transition: box-shadow 0.5s ease-out;
        }

        .sustain-active #sustain-effect {
            /* Slow grow on press */
            transition: box-shadow 5s linear;
            /* Inset Glow (Border Effect) - 20px requested */
            box-shadow: inset 0 0 20px 10px var(--accent);
        }

        /* Button stays static */
        /* .sustain-active #btn-sustain-toggle { } */



        .btn-start-play:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.4);
        }


        #quick-setup-modal .modal-panel {
            max-height: 90vh;
            overflow-y: auto;
        }


        /* Focus Styles for Accessibility/Keyboard Nav */
        #settings-panel select:focus,
        #settings-panel button:focus,
        #settings-panel input:focus,
        .qs-btn-group button:focus {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            box-shadow: 0 0 8px var(--accent);
        }

        /* MIDI Status Indicators */
        #midi-input-indicator.active,
        #midi-output-indicator.active {
            background: rgba(76, 175, 80, 0.8) !important;
        }

        /* Custom Layout Editor Collision Feedback */
        .pe-cell.active-note.collision-warning {
            border: 2px solid #FF3B30 !important;
            box-shadow: 0 0 15px #FF3B30, inset 0 0 10px #FF3B30 !important;
            animation: pulse-collision 1s infinite alternate;
            z-index: 100 !important;
        }

        @keyframes pulse-collision {
            from {
                opacity: 1;
                transform: scale(1);
            }

            to {
                opacity: 0.7;
                transform: scale(1.05);
            }
        }

/* Secondary Style Block: Icon Row */
                                .icon-row .btn-icon svg {
                                    width: 18px;
                                    height: 18px;
                                }

                                .icon-row .btn-icon img {
                                    width: auto;
                                    height: 26px;
                                    /* Specific for tall sustain icon */
                                }

                                /* Ensure clickability */
                                .icon-row .btn-icon {
                                    position: relative;
                                    z-index: 10000;
                                    width: 44px;
                                    height: 44px;
                                    flex: 0 0 44px;
                                    padding: 0;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                }

/* Third Style Block: Pattern Editor & Quick Settings Fixes */
        .pattern-editor-controls {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 20px;
            padding: 15px;
        }

        /* Responsive controls grid & vertical grid size overlay in portrait */
        @media (max-width: 932px) and (orientation: portrait) {
            .pattern-editor-controls {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .pattern-editor-controls>.pe-section:first-child {
                grid-column: span 2;
            }

            .pe-grid-size-controls {
                flex-direction: column !important;
                padding: 6px 4px !important;
                gap: 2px !important;
                border-radius: 12px !important;
                min-width: 40px;
            }

            .pe-grid-size-label {
                display: none !important;
            }

            .pe-grid-size-controls input {
                width: 28px !important;
                font-size: 13px !important;
                padding: 0 !important;
            }
        }

        .pe-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 12px;
        }

        .pe-section-title {
            font-size: 9px;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-weight: 800;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding-bottom: 5px;
            margin-bottom: 5px;
        }

        .pe-control-row {
            display: flex;
            gap: 12px;
            align-items: flex-end;
        }

        .pe-note-badge {
            font-size: 10px;
            background: var(--glass-bg-light);
            padding: 2px 6px;
            border-radius: 4px;
            color: var(--accent);
            font-weight: bold;
            min-width: 28px;
            text-align: center;
        }

        .pe-control-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .pe-control-group label {
            font-size: 10px;
            color: var(--accent);
            text-transform: uppercase;
            font-weight: bold;
        }

        .pe-control-group input[type="number"],
        .pe-control-group input[type="text"],
        .pe-control-group select {
            background: #1a1a1a;
            border: 1px solid #333;
            color: #fff;
            padding: 6px 8px;
            border-radius: 6px;
            font-size: 11px;
            outline: none;
            transition: border-color 0.2s;
        }

        .pe-control-group input:focus,
        .pe-control-group select:focus {
            border-color: var(--accent);
        }

        .pattern-grid {
            display: grid;
            gap: 1px 0;
            /* Row gap 1px, Col gap 0 */
            margin: 0 auto 20px;
            background: #111;
            padding: 10px;
            border-radius: 4px;
            overflow: auto;
            max-height: 50vh;
            justify-content: center;
        }

        .pattern-grid.honeycomb .pe-cell.shifted {
            transform: translateX(25px);
        }

        .pattern-grid.honeycomb {
            padding-right: 35px;
        }

        .pe-cell {
            background: #222;
            border: 1px solid #333;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            color: #666;
            transition: all 0.1s;
            user-select: none;
            border-radius: 4px;
        }

        /* Shape Support */
        .pe-cell.hexagon {
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            border-radius: 0;
            border: none;
            /* Borders don't work well with clip-path, using background instead */
        }

        .pe-cell.circle {
            border-radius: 50%;
        }

        .pe-cell.diamond {
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            border-radius: 0;
            border: none;
        }

        .pe-cell.square,
        .pe-cell.original {
            border-radius: 6px;
        }

        .pe-cell:not(.original):not(.square) {
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .pe-cell:hover {
            background: #333;
            border-color: #555;
        }

        .pe-cell.active-note {
            background: #444;
            color: #fff;
            box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
        }

        .pe-cell.sharp {
            color: var(--accent);
        }

        .pe-cell.root {
            background: var(--accent) !important;
            color: #000 !important;
        }

        .pe-grid-overlay {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 100;
            pointer-events: auto;
        }

        .pe-grid-wrapper {
            overflow: hidden;
        }

        .pattern-editor-footer {
            display: flex;
            gap: 12px;
            margin-top: 20px;
            justify-content: center;
        }

        .pe-btn-save {
            background: var(--accent);
            color: #000;
            border: none;
            padding: 15px 30px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            flex: 1;
            max-width: 250px;
            transition: all 0.2s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .pe-btn-save:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.5);
        }

        .pe-btn-cancel {
            background: #2A2A2A;
            color: #fff;
            border: none;
            padding: 15px 30px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            flex: 1;
            max-width: 250px;
            transition: all 0.2s;
        }

        .pe-btn-cancel:hover {
            background: #333;
            transform: scale(1.05);
        }

        @media (max-width: 600px) {
            .pe-cell {
                width: 40px;
                height: 40px;
                font-size: 12px;
            }

            .pattern-editor-controls {
                gap: 10px;
                padding: 10px;
            }
        }

        .note-popup {
            position: absolute;
            z-index: 9000;
            background: #111;
            border: 1px solid #444;
            padding: 8px;
            border-radius: 6px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
            pointer-events: auto;
        }

        .piano-popup-container {
            display: flex;
            background: #000;
            padding: 2px;
            border-radius: 4px;
            position: relative;
            height: 100px;
        }

        .piano-popup-key {
            width: 32px;
            height: 100%;
            background: #eee;
            border: 1px solid #999;
            cursor: pointer;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 8px;
            font-size: 11px;
            font-weight: bold;
            color: #333;
            border-radius: 0 0 3px 3px;
            position: relative;
            z-index: 1;
        }

        .piano-popup-key.black {
            width: 20px;
            height: 60%;
            background: #222;
            color: #ccc;
            border-color: #000;
            position: absolute;
            margin-left: -10px;
            z-index: 2;
            border-radius: 0 0 2px 2px;
        }

        .piano-popup-key:hover {
            filter: brightness(1.2);
            border-color: var(--accent);
        }

        .pe-empty-btn {
            display: block;
            width: 100%;
            margin-top: 8px;
            padding: 5px;
            background: #222;
            border: 1px solid #333;
            color: #888;
            font-size: 10px;
            cursor: pointer;
            border-radius: 4px;
        }

        .pe-empty-btn:hover {
            background: #333;
            color: #fff;
        }

        /* Custom Layout Editor Specifics */
        .tb-handle {
            transition: transform 0.1s;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .tb-handle:hover {
            transform: scale(1.1);
            z-index: 25 !important;
        }

        .tb-handle:active {
            transform: scale(0.95);
            cursor: grabbing;
        }

        /* Panning World */
        #tb-world {
            will-change: transform;
            /* Optimize for panning */
        }

        #tile-builder-viewport:active {
            cursor: grabbing;
        }

        /* CUSTOM LAYOUT EDITOR FIXES END */

        /* QUICK SETTINGS BUTTON ALIGNMENT FIX */
        .qs-btn-group {
            display: flex;
            gap: 8px;
            justify-content: center;
            flex-wrap: wrap;
            /* Safety wrap */
        }

        .qs-square-btn {
            border-radius: 12px;
            width: 44px;
            height: 44px;
            padding: 0;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #eee;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .qs-square-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Consistent Active State */
        .qs-square-btn.active {
            background: var(--accent);
            color: #000;
            border-color: transparent;
        }

        /* Enforce consistent icon scaling inside buttons */
        .qs-square-btn svg {
            width: 24px;
            height: 24px;
            /* Ensure strokes scale cleanly */
            vector-effect: non-scaling-stroke;
        }



        .qs-btn-group .btn-label {
            max-width: 44px;
        }
  
/* FINAL CONSOLIDATED LAYOUT FIXES */  
.icon-row, .row-btn-group, .qs-btn-group { display: flex !important; gap: 12px !important; margin-bottom: 20px !important; justify-content: center !important; flex-wrap: wrap !important; }  
.icon-row .btn-label, .row-btn-group .btn-label, .qs-btn-group .btn-label { max-width: 44px !important; } 
  
/* RESET BUTTON WRAPPER FLEX */  
.btn-wrapper, .qs-btn-group .btn-wrapper { flex: none !important; } 


#startup-promo-banner {
    animation: slideUpFade 0.5s ease-out forwards;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}



/* Corrected animation for full-width banner */
@keyframes slideUpEnter {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#startup-promo-banner.entering {
    animation: slideUpEnter 0.5s ease-out forwards;
}



/* PROMO BANNER CAROUSEL & ENGAGEMENT */
@keyframes slideUpEnter {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseIcon {
    0% { transform: scale(1); filter: drop-shadow(0 0 2px var(--accent)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 8px var(--accent)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--accent)); }
}

@keyframes promoSlide {
    0%, 30% { transform: translateY(0); }
    33%, 63% { transform: translateY(-14px); }
    66%, 96% { transform: translateY(-28px); }
    100% { transform: translateY(0); }
}

#startup-promo-banner {
    display: none;
    animation: slideUpEnter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.promo-benefit-slide {
    height: 14px;
    animation: promoSlide 9s linear infinite;
}

.pulse-promo-icon {
    animation: pulseIcon 2s ease-in-out infinite;
}



/* PROFESSIONAL 30S NARRATIVE PROMO */
@keyframes promoProgress {
    from { width: 100%; }
    to { width: 0%; }
}

@keyframes narrativePhase {
    0%, 45% { opacity: 1; visibility: visible; }
    50%, 95% { opacity: 0; visibility: hidden; }
    100% { opacity: 1; visibility: visible; }
}

@keyframes narrativePhaseAlt {
    0%, 45% { opacity: 0; visibility: hidden; }
    50%, 95% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

.promo-timer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    z-index: 10001;
}

#startup-promo-banner .narrative-stage {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    transition: opacity 0.5s ease;
}

.stage-1 { animation: narrativePhase 14s infinite; }
.stage-2 { animation: narrativePhaseAlt 14s infinite; }

.btn-promo-premium {
    background: linear-gradient(135deg, #FF9F0A 0%, #FF375F 100%) !important;
    box-shadow: 0 0 15px rgba(255, 55, 95, 0.4) !important;
}

.btn-promo-ad {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}



/* PROFESSIONAL PROMO BANNER (RESPONSIVE) */
.promo-top {
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 2px solid rgba(255, 159, 10, 0.4);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.promo-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 2px solid rgba(255, 159, 10, 0.4);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.3);
}

.promo-benefit-slide {
    height: 14px;
    line-height: 14px;
    animation: promoSlide 9s linear infinite;
}

.btn-promo-primary {
    background: linear-gradient(135deg, #FF9F0A 0%, #FF375F 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 55, 95, 0.3);
    border: none;
    font-weight: 900 !important;
}

.btn-promo-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.pulse-promo-icon {
    animation: pulseIcon 2s ease-in-out infinite;
}

@keyframes pulseIcon {
    0% { transform: scale(1); filter: drop-shadow(0 0 2px var(--accent)); opacity: 0.8; }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 10px var(--accent)); opacity: 1; }
    100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--accent)); opacity: 0.8; }
}

@keyframes promoSlide {
    0%, 30% { transform: translateY(0); }
    33%, 63% { transform: translateY(-14px); }
    66%, 96% { transform: translateY(-28px); }
    100% { transform: translateY(0); }
}

/* UNIFIED AD & PROMO CONTAINERS */
#ad-desktop-top, #ad-mobile-bottom {
    position: fixed;
    left: 0 !important;
    width: 100vw !important;
    box-sizing: border-box;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none; /* JS controlled */
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#ad-desktop-top {
    top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#ad-mobile-bottom {
    bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#startup-promo-banner {
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    background: linear-gradient(90deg, rgba(255,159,10,0.1) 0%, rgba(0,0,0,0.4) 50%, rgba(255,159,10,0.1) 100%);
    box-sizing: border-box;
    animation: slideUpEnter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

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

@keyframes pulseIcon {
    0% { transform: scale(1); filter: drop-shadow(0 0 2px var(--accent)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 10px var(--accent)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--accent)); }
}

@keyframes benefitSlide {
    0%, 30% { transform: translateY(0); }
    33%, 63% { transform: translateY(-14px); }
    66%, 96% { transform: translateY(-28px); }
    100% { transform: translateY(0); }
}

.promo-benefit-slide {
    height: 14px;
    line-height: 14px;
    animation: benefitSlide 9s linear infinite;
}

.pulse-promo-icon {
    animation: pulseIcon 2s ease-in-out infinite;
}

.btn-promo-primary, .btn-promo-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
    border: none;
}

.btn-promo-primary {
    background: linear-gradient(135deg, #FF9F0A 0%, #FF375F 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 55, 95, 0.3);
}

.btn-promo-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff;
}

.btn-promo-primary:hover, .btn-promo-secondary:hover {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.1);
}

.btn-promo-primary:active, .btn-promo-secondary:active {
    transform: scale(0.98);
}

/* RESPONSIVE PROMO BANNER */
@media (orientation: portrait) and (max-width: 600px) {
    .promo-brand, .promo-close {
        display: none !important;
    }
    #startup-promo-banner {
        padding: 0 8px;
        justify-content: center; /* Center-align text/buttons when things are hidden */
    }
}

.qs-square-btn.layout-btn {
    width: auto !important;
    min-width: 44px;
    padding: 0 12px !important;
}

/* AD REWARD ANIMATIONS */
@keyframes smoke-puff {
    0% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
    50% { transform: scale(1.05) translateY(-10px); opacity: 0.6; filter: blur(4px); }
    100% { transform: scale(1.1) translateY(-30px); opacity: 0; filter: blur(20px); }
}

.banner-dust-out {
    animation: smoke-puff 2.25s cubic-bezier(0.1, 0.7, 1, 0.1) forwards !important;
    pointer-events: none;
    z-index: 9999;
}