:root {
            /* Deep navy gradient — three brand-defined tones, darkest to lightest */
            --navy-1:      #040e60;
            --navy-2:      #030e69;
            --navy-3:      #0e3162;
            --dark-blue:   #0e3162; /* retained alias; still used by inline SVG fills elsewhere */
            --accent-gold: #e6b413;
            --white:       #ffffff;
            --light-gray:  #cccccc;
            --yt-red:      #FF0000;
            --fb-blue:     #1877F2;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            font-family: 'Manrope', sans-serif;
            background-color: transparent;
            color: var(--white);
            overflow: hidden;
        }

        /*
         * Design baseline is 1920x1080. #overlayWrapper's transform combines
         * two scale factors: --canvas-scale (JS-computed, normalises whatever
         * resolution the browser source actually is back to the 1920x1080
         * design) and --card-scale (the operator's manual 50-200% control).
         * At a standard 1920x1080 source, --canvas-scale is exactly 1, so
         * behaviour there is identical to the original fixed-canvas build.
         */
        :root { --canvas-scale: 1; --card-scale: 1; --panel-scale-factor: 1; }
        @property --hidden-mult {
            syntax: '<number>';
            inherits: false;
            initial-value: 1;
        }

        /*
         * ===================== SCALE WRAPPER =====================
         *
         * Owns the fixed position and scale transform.
         * transform-origin: bottom left anchors the card to its corner
         * so it grows/shrinks toward the broadcast edge rather than
         * drifting across the canvas.
         *
         * The card inside handles only its slide-in/out animation,
         * keeping the two concerns cleanly separated.
         */
        #overlayWrapper {
            position: fixed;
            bottom: 60px;
            right: 60px;
            transform-origin: bottom right;
            transform: scale(calc(var(--canvas-scale) * var(--card-scale)));
            /* Scale transitions are intentionally short — they happen on
               keypress and should feel immediate, not sluggish. */
            transition: transform 0.15s ease, opacity 0.15s ease;
        }

        /* V key / Show-Hide button — a pure visual cut. The loop's timers
           keep running underneath; this only hides what's already rendered,
           so showing again picks up mid-sequence rather than restarting.
           Applied at the body level since #animCursor and #scaleIndicator
           are separate top-level elements, not children of the wrapper. */
        body.manually-hidden #overlayWrapper,
        body.manually-hidden #animCursor,
        body.manually-hidden #scaleIndicator {
            opacity: 0;
            pointer-events: none;
        }

        /* ===================== SOLEMN MODE =====================
         * Togglable desaturation state, applied at body scope so it
         * reaches the overlay card without touching the control panel.
         * Never auto-checked; always reverts to full colour on load. */
        body.solemn #overlayCard,
        body.solemn .channel-name {
            color: #EAEAEA;
        }
        body.solemn .channel-handle {
            color: #A2B5C1;
        }
        body.solemn .cta-text {
            color: #CCCCCC;
        }
        body.solemn .card-accent-bar {
            background: #85A5B6;
            animation: none;
        }
        body.solemn #ytSubscribeBtn {
            background: #85A5B6;
        }
        body.solemn #fbFollowBtn,
        body.solemn #fbLikeBtn.liked {
            background: #85A5B6;
        }

        /* ===================== OVERLAY CARD ===================== */
        #overlayCard {
            width: 560px;
            /* Radial rather than the guide's default diagonal sweep: this is a
               contained, centre-revealing card (logo bounces in, then text,
               then buttons), so a centred glow reinforces that focal point
               instead of cutting across it with an edge-to-edge diagonal. */
            background: radial-gradient(ellipse at center, var(--navy-3) 0%, var(--navy-2) 50%, var(--navy-1) 100%);
            border-radius: 16px;
            border: 2px solid rgba(238,179,11,0.35);
            border-top: 0; /* removes the top gap so the accent bar is the exact top edge */
            box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(238,179,11,0.1);
            overflow: hidden;
            /* Hidden state: translated below the wrapper's bottom edge */
            transform: translateY(calc(100% + 80px));
            opacity: 0;
            transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
            pointer-events: none;
        }
        #overlayCard.visible {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        #overlayCard.slide-out {
            transform: translateY(calc(100% + 80px));
            opacity: 0;
        }

        /* Gold shimmer accent bar */
        .card-accent-bar {
            height: 0.75px;
            background: linear-gradient(90deg, var(--accent-gold), #f5d06e, var(--accent-gold));
            background-size: 200% 100%;
            animation: shimmer 3.5s linear infinite;
        }
        @keyframes shimmer {
            0%   { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .card-body {
            padding: 22px 24px 24px;
            position: relative;
            min-height: 170px;
        }

        /* ===================== PLATFORM PANELS ===================== */
        .platform-panel {
            display: none;
            flex-direction: column;
            gap: 0;
        }
        .platform-panel.active { display: flex; }

        /* Header row: logo + channel info */
        .platform-header {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 16px;
        }

        .platform-logo {
            width: 52px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .platform-logo.bounce {
            animation: logoBounce 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
        }
        @keyframes logoBounce {
            0%   { transform: scale(0.4) rotate(-10deg); opacity: 0; }
            60%  { transform: scale(1.18) rotate(3deg);  opacity: 1; }
            80%  { transform: scale(0.93) rotate(-1deg); }
            100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
        }

        .platform-logo svg { display: block; }

        .channel-info {
            opacity: 0;
            transform: translateX(-12px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .channel-info.show {
            opacity: 1;
            transform: translateX(0);
        }
        .channel-name {
            font-family: 'Manrope', sans-serif;
            font-weight: 800;
            font-size: 20px;
            color: var(--white);
            line-height: 1.2;
        }
        .channel-handle {
            font-size: 13px;
            color: var(--light-gray);
            margin-top: 1px;
        }
        .cta-text {
            font-size: 13px;
            color: var(--accent-gold);
            font-weight: 500;
            margin-top: 2px;
        }

        /* Action row: buttons + indicators */
        .action-row {
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 0.45s ease, transform 0.45s ease;
        }
        .action-row.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* ================== YOUTUBE CONTROLS ================== */
        #ytSubscribeBtn {
            background: var(--yt-red);
            color: white;
            border: none;
            border-radius: 22px;
            padding: 10px 24px;
            font-size: 15px;
            font-weight: 700;
            font-family: 'Manrope', sans-serif;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: background 0.4s ease, color 0.4s ease, transform 0.15s ease;
            letter-spacing: 0.3px;
            white-space: nowrap;
        }
        #ytSubscribeBtn.subscribed {
            background: #3a3a3a;
            color: var(--light-gray);
        }
        #ytSubscribeBtn .btn-ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.4);
            transform: scale(0);
            pointer-events: none;
            animation: ripple 0.55s linear;
        }
        @keyframes ripple {
            to { transform: scale(4); opacity: 0; }
        }
        #ytSubscribeBtn.click-flash { transform: scale(0.94); }

        /* Bell icon */
        #bellIcon {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
            border: 1.5px solid rgba(255,255,255,0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transform: scale(0.5);
            transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            flex-shrink: 0;
        }
        #bellIcon.show {
            opacity: 1;
            transform: scale(1);
        }
        #bellIcon.ringing { animation: bellRing 0.5s ease; }
        /* CSS handles the gold fill — no JS setAttribute needed */
        #bellIcon.filled svg path { fill: var(--accent-gold); }
        @keyframes bellRing {
            0%   { transform: scale(1)    rotate(0deg);   }
            20%  { transform: scale(1.1)  rotate(-15deg); }
            40%  { transform: scale(1.1)  rotate(15deg);  }
            60%  { transform: scale(1.05) rotate(-8deg);  }
            80%  { transform: scale(1.05) rotate(8deg);   }
            100% { transform: scale(1)    rotate(0deg);   }
        }

        /* Subscribed badge */
        #subscribedBadge {
            font-size: 12px;
            color: #aaa;
            opacity: 0;
            transition: opacity 0.4s ease;
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }
        #subscribedBadge.show { opacity: 1; }
        #subscribedBadge svg  { flex-shrink: 0; }

        /* ================= FACEBOOK CONTROLS ================== */
        #fbFollowBtn {
            background: var(--fb-blue);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 22px;
            font-size: 15px;
            font-weight: 700;
            font-family: 'Manrope', sans-serif;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: background 0.4s ease, transform 0.15s ease;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        #fbFollowBtn.following {
            background: #3a3a3a;
            color: var(--light-gray);
        }
        #fbFollowBtn .btn-ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.4);
            transform: scale(0);
            pointer-events: none;
            animation: ripple 0.55s linear;
        }
        #fbFollowBtn.click-flash { transform: scale(0.94); }

        /* Like button */
        #fbLikeBtn {
            background: rgba(255,255,255,0.08);
            border: 1.5px solid rgba(255,255,255,0.18);
            color: var(--light-gray);
            border-radius: 6px;
            padding: 10px 16px;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Manrope', sans-serif;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                        background 0.3s ease, color 0.3s ease;
            white-space: nowrap;
        }
        #fbLikeBtn.show  { opacity: 1; transform: scale(1); }
        #fbLikeBtn.liked {
            background: rgba(24, 119, 242, 0.2);
            color: var(--fb-blue);
            border-color: var(--fb-blue);
        }

        /* Following badge */
        #followingBadge {
            font-size: 12px;
            color: #aaa;
            opacity: 0;
            transition: opacity 0.4s ease;
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }
        #followingBadge.show { opacity: 1; }

        /* =================== PROGRESS BAR =================== */
        .progress-bar-track {
            height: 1px;
            background: rgba(255,255,255,0.08);
            border-radius: 0 0 16px 16px;
            overflow: hidden;
        }
        .progress-bar-fill {
            height: 100%;
            background: var(--accent-gold);
            width: 100%;
            transform-origin: left;
            transform: scaleX(0);
            /*
             * Transitions are applied via inline style in JS to support
             * dynamic durations at runtime. The .done class overrides for
             * the quick-fill snap used in isolated mode only.
             */
            transition: none;
        }
        /* Quick-fill snap — isolated mode only */
        .progress-bar-fill.done {
            animation: progressFill 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }
        @keyframes progressFill {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }

        /* ================== DISMISS BUTTON =================== */
        #dismissBtn {
            position: absolute;
            top: 10px;
            right: 12px;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
            border: none;
            color: var(--light-gray);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease, background 0.2s, color 0.2s;
        }
        #dismissBtn.show {
            opacity: 1;
            pointer-events: auto;
        }
        #dismissBtn:hover {
            background: rgba(255,255,255,0.18);
            color: white;
        }

        /* ================== SCALE INDICATOR ================== */
        /*
         * A brief non-intrusive badge that appears near the overlay wrapper
         * when the operator attempts to scale beyond the configured bounds.
         * Positioned fixed at the wrapper's base coordinates so it stays
         * readable regardless of the current card scale.
         */
        #scaleIndicator {
            position: fixed;
            bottom: 60px;
            right: 60px;
            background: rgba(238, 179, 11, 0.92);
            color: var(--dark-blue);
            font-family: 'Manrope', sans-serif;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 4px;
            letter-spacing: 0.3px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
            z-index: 200;
        }
        #scaleIndicator.show { opacity: 1; }

        /* ================== ANIMATED CURSOR ================== */
        #animCursor {
            position: fixed;
            width: 24px;
            height: 24px;
            pointer-events: none;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.25s ease;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
        }
        #animCursor.visible { opacity: 1; }
        .cursor-dot {
            position: absolute;
            width: 8px;
            height: 8px;
            background: rgba(255,255,255,0.85);
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transform: scale(0);
            transition: transform 0.1s ease;
        }
        #animCursor.clicking .cursor-dot {
            animation: cursorClick 0.22s ease;
        }
        @keyframes cursorClick {
            0%   { transform: scale(0);   opacity: 1;   }
            50%  { transform: scale(1.4); opacity: 0.7; }
            100% { transform: scale(0);   opacity: 0;   }
        }

        /* ================== CONTROL PANEL ===================== */
        #controlPanel {
            position: fixed;
            /* Fixed top-left placement — no drag. --panel-scale-factor
               (0.8–3.0, driven by the Panel Size slider) is the single
               number that drives every scalable property below via
               calc() — width, fonts, padding, gaps, touch targets — per
               the family-wide panel scale convention. Width never drops
               below the 340px floor regardless of factor. */
            top: 20px;
            left: 20px;
            width: max(340px, calc(440px * var(--panel-scale-factor)));
            min-height: 320px;
            transform-origin: top left;
            --hidden-mult: 1;
            opacity: var(--hidden-mult);
            /* Same three navy tones as the overlay card, for visual coherence
               across the two surfaces. Fully opaque — no backdrop-filter, since
               there's no translucency left for a blur to act on. */
            background: linear-gradient(135deg, var(--navy-1) 0%, var(--navy-2) 50%, var(--navy-3) 100%);
            padding: 0 calc(28px * var(--panel-scale-factor)) calc(22px * var(--panel-scale-factor));
            border-radius: 16px;
            border: 2px solid var(--accent-gold);
            box-shadow: 0 10px 36px rgba(0,0,0,0.55);
            transition: opacity 0.3s, width 0.15s ease, box-shadow 0.2s;
            z-index: 10000;
            /* Content can still exceed the box at larger scale/viewport
               combinations — scrolling handles that overflow rather than
               ever letting the panel run off-screen. */
            max-height: calc(100vh - 40px);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            font-size: calc(1em * var(--panel-scale-factor));
        }
        #controlPanel.hidden {
            --hidden-mult: 0;
            pointer-events: none;
        }

        /* Sticky header — stays visible while panel content scrolls beneath it */
        #cpPanelHeader {
            position: sticky;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: calc(8px * var(--panel-scale-factor));
            margin: 0 calc(-28px * var(--panel-scale-factor)) calc(14px * var(--panel-scale-factor));
            padding: calc(14px * var(--panel-scale-factor)) calc(28px * var(--panel-scale-factor)) calc(10px * var(--panel-scale-factor));
            background: var(--navy-2);
            border-bottom: 1px solid rgba(238,179,11,0.2);
            border-radius: 16px 16px 0 0;
            z-index: 1;
        }

        #controlPanel h2 {
            text-align: center;
            color: var(--accent-gold);
            font-family: 'Manrope', sans-serif;
            font-size: calc(20px * var(--panel-scale-factor));
            letter-spacing: 0.5px;
            flex: 1;
        }

        /* Close button — deliberately red, the one destructive-feeling action
           that's always reachable regardless of scroll position */
        #cpHeaderClose {
            flex: 0 0 auto;
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 50%;
            background: #c0392b;
            color: var(--white);
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.15s;
        }
        #cpHeaderClose:hover { background: #e74c3c; }

        /* Playback row — touch-equivalent buttons for the keyboard shortcuts */
        .cp-playback-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: calc(8px * var(--panel-scale-factor));
            margin-bottom: calc(10px * var(--panel-scale-factor));
        }
        .cp-playback-grid button {
            padding: calc(12px * var(--panel-scale-factor)) calc(8px * var(--panel-scale-factor));
            font-size: calc(12px * var(--panel-scale-factor));
            border-radius: 7px;
            border: 1px solid rgba(238,179,11,0.3);
            background: rgba(238,179,11,0.08);
            color: var(--accent-gold);
            font-weight: 700;
            cursor: pointer;
            transition: background 0.15s, transform 0.1s;
            /* Comfortable minimum touch target per platform guidance — floor
               stays fixed even as the factor shrinks the panel */
            min-height: max(44px, calc(44px * var(--panel-scale-factor)));
        }
        .cp-playback-grid button:active { transform: scale(0.96); background: rgba(238,179,11,0.18); }

        .cp-section-title {
            font-size: calc(11px * var(--panel-scale-factor));
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: var(--accent-gold);
            margin: calc(14px * var(--panel-scale-factor)) 0 calc(8px * var(--panel-scale-factor));
            opacity: 0.8;
        }

        .cp-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: calc(10px * var(--panel-scale-factor)) calc(16px * var(--panel-scale-factor));
        }

        .cp-group {
            display: flex;
            flex-direction: column;
            gap: calc(4px * var(--panel-scale-factor));
        }
        .cp-group.full-width { grid-column: 1 / -1; }

        /* Scale row: label + input + live readout in one line */
        .cp-scale-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .cp-scale-row input[type="range"] { flex: 1; }
        .cp-scale-row input[type="number"] { flex: 0 0 64px; width: 64px; }

        .cp-scale-row input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            height: 4px;
            border-radius: 2px;
            background: rgba(255,255,255,0.15);
            outline: none;
        }
        .cp-scale-row input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--accent-gold);
            border: 2px solid var(--dark-blue);
            cursor: pointer;
        }
        .cp-scale-row input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--accent-gold);
            border: 2px solid var(--dark-blue);
            cursor: pointer;
        }
        #cpScaleReadout {
            font-size: 13px;
            font-weight: 700;
            color: var(--accent-gold);
            white-space: nowrap;
            min-width: 40px;
            text-align: right;
        }

        #controlPanel label {
            font-size: calc(12px * var(--panel-scale-factor));
            font-weight: 500;
            color: var(--light-gray);
        }

        /* Explanatory text beneath timing inputs */
        .cp-hint {
            font-size: calc(10px * var(--panel-scale-factor));
            color: #666;
            line-height: 1.45;
            margin-top: 1px;
        }

        #controlPanel input[type="text"],
        #controlPanel input[type="number"] {
            width: 100%;
            padding: calc(8px * var(--panel-scale-factor)) calc(10px * var(--panel-scale-factor));
            font-size: calc(13px * var(--panel-scale-factor));
            border-radius: 6px;
            border: 1px solid #3a3a5a;
            background: #1a1b2e;
            color: white;
            outline: none;
            transition: border-color 0.2s;
            /* Comfortable minimum touch target, held even as the factor shrinks */
            min-height: max(36px, calc(36px * var(--panel-scale-factor)));
        }
        #controlPanel input:focus { border-color: var(--accent-gold); }

        .shortcut-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: calc(6px * var(--panel-scale-factor));
            margin-bottom: calc(10px * var(--panel-scale-factor));
        }
        .shortcut-item {
            background: rgba(255,255,255,0.05);
            border-radius: 6px;
            padding: calc(6px * var(--panel-scale-factor)) calc(8px * var(--panel-scale-factor));
            font-size: calc(11px * var(--panel-scale-factor));
            text-align: center;
            color: var(--light-gray);
        }
        .shortcut-item kbd {
            display: inline-block;
            background: var(--accent-gold);
            color: var(--dark-blue);
            border-radius: 3px;
            padding: 1px 5px;
            font-size: calc(11px * var(--panel-scale-factor));
            font-weight: 700;
            font-family: monospace;
            margin-right: 3px;
        }

        .cp-btn-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: calc(8px * var(--panel-scale-factor));
            margin-top: calc(14px * var(--panel-scale-factor));
        }
        .cp-solemn-row { grid-template-columns: 1fr; }
        #controlPanel button {
            padding: calc(10px * var(--panel-scale-factor));
            font-size: calc(12px * var(--panel-scale-factor));
            border: none;
            border-radius: 7px;
            font-weight: 700;
            cursor: pointer;
            transition: filter 0.2s, transform 0.1s;
            letter-spacing: 0.3px;
            min-height: max(38px, calc(38px * var(--panel-scale-factor)));
        }
        #controlPanel button:disabled {
            cursor: default;
            filter: brightness(0.75);
        }
        #controlPanel button:not(:disabled):active { transform: scale(0.97); }
        #controlPanel button:not(:disabled):hover  { filter: brightness(1.12); }

        #cpSaveBtn          { background: #27ae60; color: white; }
        #cpLoadBtn          { background: #f39c12; color: white; }
        #cpResetBtn         { background: #c0392b; color: white; }
        /* Solemn toggle sits in its own row, visually apart from the
           Save/Load pair — an outline treatment rather than a filled
           button, so it doesn't read as part of the saved-state group. */
        #cpSolemnToggle {
            background: transparent;
            color: var(--light-gray);
            border: 1px solid rgba(255,255,255,0.25);
        }
        #cpSolemnToggle[aria-pressed="true"] {
            background: rgba(162,181,193,0.15);
            color: #A2B5C1;
            border-color: #A2B5C1;
        }
        #cpTogglePanelClose {
            background: rgba(255,255,255,0.1);
            color: var(--light-gray);
            border: 1px solid rgba(255,255,255,0.15);
        }