/* ════════════════════════════════════════════════════════════════════════
   AHLY07 TV — mobile CRT presentation (approved V2 direction)

   Loaded only when "MobileCrtLayoutEnabled" is true (_TvLayout.cshtml), after
   tv-scene.css. Every visible rule is scoped to body.tv-crt inside the site's
   existing mobile breakpoint (max-width: 820px), so desktop never matches.

   Presentation only. Page bodies are not restyled; only the chrome around them.
   The real controls are reused: the bottom panel IS the existing .tv__side
   (channel rocker, volume dial, playlist stepper, ad insert, power button),
   so tv-scene.js remains the only owner of their state.

   Scrolling: the legacy mobile layout scrolled inside an 80vh .tv__screen.
   Here the document scrolls and the screen grows with its content. The top
   cabinet is ordinary flow content and scrolls away; the control panel stays
   fixed at the bottom of the screen. The page end is padded by the panel's
   height (--crt-panel, measured by js/crt-panel.js) and scroll-padding keeps
   scripted scrolls above it, so no content stays underneath the panel.
   ════════════════════════════════════════════════════════════════════════ */

/* Cabinet markup from _MobileCrt.cshtml stays hidden unless shown below. */
.crt-cab,
.crt-foot { display: none; }

@media (max-width: 820px) {

    .tv-crt {
        --crt-side: 12px;          /* cabinet casing visible on each side */
        --crt-rim: 5px;            /* moulded surround between casing and tube */
        --crt-top: 52px;           /* top cabinet */
        --crt-panel: 96px;         /* bottom panel; crt-panel.js writes the measured height */
        --crt-bronze: #6a5033;
        --crt-cab-1: #15120f;
        --crt-cab-2: #1f1b17;
        --crt-cab-3: #2c2621;
        --crt-red: #e3262b;
        --crt-mono: ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;
    }

    /* ── Page: the document scrolls, not the screen ─────────────────────── */
    /* Scripted scrolls (scrollIntoView, anchors, focus) stop above the fixed panel.
       A literal: the measured --crt-panel lives on body, which html cannot read. */
    html:has(> body.tv-crt) { scroll-padding-bottom: 100px; }
    body.tv-crt.tv-body {
        height: auto;
        min-height: 100%;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    .tv-crt .scene {
        position: static;
        inset: auto;
        overflow: visible;
    }
    .tv-crt .scene-bg,
    .tv-crt .prop,
    .tv-crt .badge-corner,
    .tv-crt .tv__halo,
    .tv-crt .tv__chrome,
    .tv-crt .tv__brand,
    .tv-crt .tv__led,
    .tv-crt .tv__legs { display: none; }

    /* ── The cabinet: casing runs down both sides of the whole page ─────── */
    .tv-crt .tv {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        aspect-ratio: auto;
        margin: 0;
        padding: 0 var(--crt-side);
        border-radius: 26px 26px 0 0;
        background:
            linear-gradient(90deg,
                #000 0, #4a4038 1.5px, #2e2823 4px, var(--crt-cab-2) calc(var(--crt-side) - 3px),
                rgba(155,122,82,.55) calc(var(--crt-side) - 2px), #060505 calc(var(--crt-side) - 1px), #000 var(--crt-side),
                transparent var(--crt-side), transparent calc(100% - var(--crt-side)),
                #000 calc(100% - var(--crt-side)), #060505 calc(100% - var(--crt-side) + 1px), rgba(155,122,82,.55) calc(100% - var(--crt-side) + 2px),
                var(--crt-cab-2) calc(100% - var(--crt-side) + 3px), #2e2823 calc(100% - 4px), #4a4038 calc(100% - 1.5px), #000 100%),
            var(--crt-cab-1);
        box-shadow: 0 0 0 1px #000;
    }
    .tv-crt .tv__bezel {
        width: auto;
        height: auto;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .tv-crt .tv__bezel::before,
    .tv-crt .tv__bezel::after { content: none; }

    /* ── Top cabinet: badge, vents, channel window, pilot lamp ──────────── */
    .tv-crt .crt-cab {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        direction: ltr;
        height: var(--crt-top);
        margin: 0 calc(var(--crt-side) * -1);
        padding: 0 calc(var(--crt-side) + 6px);
        border-radius: 26px 26px 0 0;
        background:
            linear-gradient(180deg, rgba(255,236,214,.09), transparent 3px),
            repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
            linear-gradient(180deg, var(--crt-cab-3), var(--crt-cab-2) 45%, var(--crt-cab-1));
        border-bottom: 1px solid #000;
        box-shadow: inset 0 -1px 0 rgba(255,236,214,.05);
    }
    .tv-crt .crt-cab::after {
        content: "";
        position: absolute;
        left: calc(var(--crt-side) + 14px);
        right: calc(var(--crt-side) + 14px);
        bottom: 5px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(155,122,82,.55), transparent);
    }
    .tv-crt .crt-badge {
        position: relative;
        display: inline-flex;
        align-items: center;
        height: 32px;
        padding: 0 17px;
        border-radius: 5px;
        background:
            repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
            linear-gradient(180deg, #3a3330 0%, #1b1716 52%, #110e0d 53%, #2a2420 100%);
        border: 1px solid var(--crt-bronze);
        box-shadow: inset 0 1px 0 rgba(255,230,200,.25), inset 0 -1px 0 rgba(0,0,0,.7), 0 0 0 1px #000, 0 2px 4px rgba(0,0,0,.7);
    }
    .tv-crt .crt-badge__mark {
        display: inline-flex;
        align-items: baseline;
        gap: 5px;
        font-family: 'Cairo', system-ui, sans-serif;
        line-height: 1;
    }
    .tv-crt .crt-badge__mark b,
    .tv-crt .crt-badge__mark em {
        font-weight: 900;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow(0 1px 0 rgba(0,0,0,.9));
    }
    .tv-crt .crt-badge__mark b {
        font-size: 18px;
        letter-spacing: .01em;
        background-image: linear-gradient(180deg, #ff6b5f 0%, var(--crt-red) 45%, #8e0c12 100%);
    }
    .tv-crt .crt-badge__mark em {
        font-style: italic;
        font-size: 14px;
        background-image: linear-gradient(180deg, #fff 0%, #d8d4cf 40%, #6b6560 60%, #e9e5e0 100%);
    }
    .tv-crt .crt-rivet {
        position: absolute;
        top: 50%;
        width: 5px;
        height: 5px;
        margin-top: -2.5px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #e6c79c, var(--crt-bronze) 55%, #2a1d10);
        box-shadow: 0 0 0 .5px #000;
    }
    .tv-crt .crt-rivet--l { left: 6px; }
    .tv-crt .crt-rivet--r { right: 6px; }
    .tv-crt .crt-vents {
        flex: 1;
        display: flex;
        justify-content: center;
        gap: 5px;
        min-width: 0;
    }
    .tv-crt .crt-vents i {
        width: 3px;
        height: 16px;
        border-radius: 2px;
        background: linear-gradient(180deg, #000, #0d0b0a);
        box-shadow: 0 1px 0 rgba(255,236,214,.07);
    }
    .tv-crt .crt-chan {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-left: auto;
    }
    .tv-crt .crt-chan__window {
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        height: 28px;
        min-width: 58px;
        padding: 0 8px;
        border-radius: 4px;
        font-family: var(--crt-mono);
        line-height: 28px;
        background: linear-gradient(180deg, #030202, #120c0b);
        border: 1px solid #2e2216;
        box-shadow: inset 0 2px 5px rgba(0,0,0,.95), 0 0 0 1px #000, 0 1px 0 rgba(255,236,214,.06);
    }
    .tv-crt .crt-chan__window small {
        font-size: 9px;
        letter-spacing: .1em;
        color: #7a2a24;
    }
    .tv-crt .crt-chan__window span {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .06em;
        color: #ff5847;
        text-shadow: 0 0 6px rgba(255,88,71,.75), 0 0 1px #ffb3a8;
    }
    .tv-crt .crt-pilot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, #ffc0b8, var(--crt-red) 45%, #5a070c);
        box-shadow: 0 0 9px rgba(227,38,43,.55), 0 0 0 2px #0b0807, 0 0 0 3px rgba(155,122,82,.35);
    }
    /* The lamp follows the existing power button state. */
    .tv-crt:has(.side-power--off) .crt-pilot {
        background: radial-gradient(circle at 35% 35%, #6b3b37, #2b0d0f 60%);
        box-shadow: 0 0 0 2px #0b0807, 0 0 0 3px rgba(155,122,82,.35);
    }

    /* ── Surround and picture tube (the existing screen) ────────────────── */
    .tv-crt .tv__body {
        display: block;
        width: auto;
        height: auto;
        gap: 0;
        overflow: visible;
        padding: 6px var(--crt-rim) var(--crt-rim);
        border-radius: 30px 30px 24px 24px;
        background: linear-gradient(180deg, #2a241f 0, #120f0d 140px, #0a0807 100%);
        box-shadow: inset 0 2px 1px rgba(255,236,214,.10), 0 0 0 1px #000;
    }
    .tv-crt .tv__screen {
        display: block;
        flex: none;
        height: auto;
        min-height: calc(100vh - var(--crt-top) - 6px);
        min-height: calc(100svh - var(--crt-top) - 6px);
        overflow: hidden;              /* fallback for browsers without overflow: clip */
        overflow: clip;                /* rounded tube without becoming a scroll container */
        scroll-behavior: auto;
        border-radius: 24px 24px 20px 20px;
        box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(255,236,214,.05);
    }
    /* Glass highlight, vignette and scanlines on the first screenful only. */
    .tv-crt .tv__glare,
    .tv-crt .tv__scanlines {
        bottom: auto;
        height: 100vh;
        height: 100svh;
        border-radius: 24px 24px 0 0;
    }
    .tv-crt .tv__glare {
        background:
            radial-gradient(90% 38% at 28% -6%, rgba(255,255,255,.12), rgba(255,255,255,.03) 55%, transparent 70%),
            linear-gradient(162deg, transparent 0 8%, rgba(255,255,255,.03) 12%, transparent 22%),
            linear-gradient(90deg, rgba(0,0,0,.45), transparent 14px, transparent calc(100% - 14px), rgba(0,0,0,.45));
    }
    .tv-crt .tv__scanlines {
        mix-blend-mode: normal;
        opacity: 1;
        background: repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px);
    }

    /* Navigation: same element, same links, on the glass. Still sticky. */
    .tv-crt .tv-topnav {
        padding: 8px 12px;
        background: linear-gradient(180deg, rgba(9,8,9,.95), rgba(9,8,9,.86));
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    /* ── Existing standby screen, inside the tube ───────────────────────── */
    .tv-crt .tv-standby {
        top: 6px;
        right: var(--crt-rim);
        bottom: var(--crt-rim);
        left: var(--crt-rim);
        border-radius: 24px 24px 20px 20px;
    }
    /* Switched off: the tube is one screenful tall, so the whole set shows. */
    .tv-crt .tv__screen.tv__screen--off {
        height: calc(100vh - var(--crt-top) - 6px - var(--crt-rim) - var(--crt-panel));
        height: calc(100svh - var(--crt-top) - 6px - var(--crt-rim) - var(--crt-panel));
        min-height: 240px;
    }
    .tv-crt:has(.tv__screen--off) .crt-foot { display: none; }

    /* Existing on-screen display (volume / channel / power): pinned to the glass. */
    .tv-crt .tv-osd {
        position: fixed;
        top: 14px;
        bottom: auto;
        left: calc(var(--crt-side) + var(--crt-rim) + 10px);
    }

    /* ── Bottom panel: the existing control strip, restyled ─────────────── */
    .tv-crt .tv__side {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        flex: none;
        width: auto;
        min-width: 0;
        max-width: none;
        height: auto;
        min-height: 88px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        direction: ltr;                /* hardware order, as in V2: speaker · power · channel · volume */
        padding: 12px calc(var(--crt-side) + 12px);
        border-radius: 0;
        background: linear-gradient(180deg, var(--crt-cab-2), var(--crt-cab-1) 55%, #0d0b09);
        box-shadow: 0 -1px 0 #000;
    }
    /* Brushed-metal plate set into the cabinet. */
    .tv-crt .tv__side::before {
        content: "";
        position: absolute;
        top: 5px;
        right: calc(var(--crt-side) + 3px);
        bottom: 6px;
        left: calc(var(--crt-side) + 3px);
        border-radius: 12px;
        pointer-events: none;
        background:
            repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 2px),
            linear-gradient(180deg, #2f2923 0%, #1f1a16 50%, #16120f 100%);
        box-shadow: inset 0 1px 0 rgba(255,236,214,.14), inset 0 -2px 3px rgba(0,0,0,.7), 0 0 0 1px #000;
    }
    /* Lower corners of the tube, just above the panel. */
    .tv-crt .tv__side::after {
        content: "";
        position: absolute;
        right: calc(var(--crt-side) + var(--crt-rim));
        bottom: 100%;
        left: calc(var(--crt-side) + var(--crt-rim));
        height: 20px;
        pointer-events: none;
        background:
            radial-gradient(circle at 100% 0, transparent 19.5px, #0a0807 20px) 0 100% / 20px 20px no-repeat,
            radial-gradient(circle at 0 0, transparent 19.5px, #0a0807 20px) 100% 100% / 20px 20px no-repeat;
    }
    .tv-crt .tv__side > * {
        position: relative;
        z-index: 1;
    }

    /* Speaker grille — the ad insert sits in it. */
    .tv-crt .tv-side-ad {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        min-height: 62px;
        align-self: stretch;
        direction: rtl;
        padding: 4px;
        border-radius: 9px;
        background:
            radial-gradient(circle, #030202 1.35px, transparent 1.7px) 3px 3px / 6px 6px,
            linear-gradient(180deg, #2a231d, #17120e);
        box-shadow: inset 0 2px 5px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.8), 0 1px 0 rgba(255,236,214,.08);
    }
    .tv-crt .tv-side-ad .ad-unit--demo { min-height: 0; }
    /* No Display size fits the grille in the bottom strip: a rectangle reserved 250px
       and pushed the fixed panel up over half the screen. Hidden here, the unit stays
       0px wide and site.js never pushes it, so no ad is requested on this layout. */
    .tv-crt .tv-side-ad .ad-unit--adsense { display: none; }
    .tv-crt .side-grille { display: none; }

    /* Power: red dome in a bronze ring. */
    .tv-crt .side-power,
    .tv-crt .side-power:hover {
        order: 2;
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        margin: 0 7px;
        color: rgba(255,236,230,.85);
        background: radial-gradient(circle at 38% 32%, #ffb2a8 0%, var(--crt-red) 36%, #7d0a10 72%, #3a0406 100%);
        box-shadow: 0 0 12px rgba(227,38,43,.55), 0 0 0 3px #0c0807, 0 0 0 5px var(--crt-bronze), 0 0 0 6px #000;
    }
    .tv-crt .side-power.side-power--off {
        color: rgba(255,255,255,.3);
        background: radial-gradient(circle at 38% 32%, #6a3a36, #3a1214 60%, #1c0708);
        box-shadow: 0 0 0 3px #0c0807, 0 0 0 5px var(--crt-bronze), 0 0 0 6px #000;
    }
    .tv-crt .side-power svg { width: 12px; height: 12px; }
    .tv-crt .side-power::after {           /* a finger-sized target around the small dome */
        content: "";
        position: absolute;
        inset: -9px;
        border-radius: 50%;
    }

    /* Channel selector and volume dial. */
    .tv-crt .tuner {
        order: 3;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .tv-crt .ch-selector { width: auto; }
    .tv-crt .ch-selector__row { gap: 5px; }
    .tv-crt .ch-screen {
        direction: rtl;
        min-width: 60px;
        max-width: 92px;
        padding: 5px 8px;
        border-radius: 4px;
        background: linear-gradient(180deg, #030202, #120c0b);
        box-shadow: inset 0 2px 5px rgba(0,0,0,.95), 0 0 0 1px #000, 0 0 0 2px #2e2216;
    }
    .tv-crt .ch-screen__num {
        font-family: var(--crt-mono);
        font-size: 9px;
        font-weight: 700;
        color: #ff5847;
        text-shadow: 0 0 6px rgba(255,88,71,.75);
    }
    .tv-crt .ch-screen__name { font-size: 11px; max-width: 76px; }
    .tv-crt .ch-rocker {
        border-radius: 6px;
        box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(155,122,82,.45);
    }
    .tv-crt .ch-rocker__btn {
        width: 28px;
        padding: 5px 0;
        color: #d8c7a8;
        background: linear-gradient(180deg, #3a332e, #1b1716);
    }
    .tv-crt .knob-wrap { gap: 0; }
    .tv-crt .knob {
        --num-r: 24px;
        width: 58px;
    }
    .tv-crt .knob::before {                /* metal skirt under the cap */
        inset: 12px;
        background: conic-gradient(from 200deg, #8f8a84, #3b3733, #b9b3ac, #45403b, #8f8a84);
        box-shadow: 0 3px 6px rgba(0,0,0,.85), 0 0 0 1px #000;
    }
    .tv-crt .knob__num {
        display: grid;
        font: 700 6.5px/1 var(--crt-mono);
        color: #b9a98f;
        text-shadow: 0 1px 0 #000;
    }
    .tv-crt .knob__cap {
        width: 46%;
        height: 46%;
        background:
            repeating-conic-gradient(from 0deg, rgba(255,255,255,.07) 0 5deg, rgba(0,0,0,.28) 5deg 10deg),
            radial-gradient(circle at 40% 30%, #4a4440 0%, #1e1b19 60%, #0d0b0a 100%);
        box-shadow: inset 0 1px 1px rgba(255,255,255,.18), inset 0 -2px 3px rgba(0,0,0,.8);
    }
    .tv-crt .knob__cap::after { content: none; }
    .tv-crt .knob__pointer {
        top: 2px;
        height: 42%;
        background: linear-gradient(180deg, #ff7a6b, var(--crt-red));
        box-shadow: 0 0 4px rgba(227,38,43,.7);
    }
    .tv-crt .knob-pnav {
        padding: 3px 4px;
        gap: 3px;
        border-radius: 7px;
        background: linear-gradient(180deg, #120e0c, #080606);
        box-shadow: inset 0 0 0 1px rgba(155,122,82,.45), 0 0 0 1px #000;
    }
    .tv-crt .pnav-btn {
        width: 26px;
        height: 24px;
        color: #d8c7a8;
        background: linear-gradient(180deg, #3a332e, #1b1716);
    }

    /* ── Cabinet base and stand, after the footer ───────────────────────── */
    .tv-crt .crt-foot {
        display: block;
        margin: 8px calc(var(--crt-side) * -1) 0;
        padding-bottom: calc(var(--crt-panel) + 12px);   /* base and stand end above the fixed panel */
        background: #000;
    }
    .tv-crt .crt-foot__base {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        border-radius: 0 0 20px 20px;
        background:
            linear-gradient(180deg, rgba(0,0,0,.6), transparent 4px),
            linear-gradient(180deg, var(--crt-cab-2), var(--crt-cab-1) 70%, #0d0b09);
        box-shadow: 0 0 0 1px #000, inset 0 -1px 0 rgba(255,236,214,.06);
    }
    .tv-crt .crt-foot__plate {
        padding: 2px 8px;
        border: 1px solid rgba(155,122,82,.35);
        border-radius: 2px;
        font: 7.5px/1.4 var(--crt-mono);
        letter-spacing: .2em;
        color: #9e8b72;
    }
    .tv-crt .crt-foot__stand {
        display: flex;
        justify-content: space-between;
        height: 30px;
        padding: 0 22%;
    }
    .tv-crt .crt-foot__stand i {
        width: 14px;
        height: 30px;
        border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg, #0c0a08, #3a322b 45%, #0c0a08);
        transform-origin: top;
    }
    .tv-crt .crt-foot__stand i:first-child { transform: skewX(12deg); }
    .tv-crt .crt-foot__stand i:last-child { transform: skewX(-12deg); }

    /* ── Power transition overlay (created by js/crt-power.js) ──────────── */
    .crt-fx {
        position: fixed;
        z-index: 58;                   /* over the tube and standby screen, under the panel */
        overflow: hidden;
        pointer-events: none;
        border-radius: 22px;
    }
    .crt-fx i {
        position: absolute;
        right: 0;
        left: 0;
        display: block;
    }
    .crt-fx__flash {
        top: 0;
        bottom: 0;
        background: #e9efff;
        opacity: 0;
    }
    .crt-fx__top,
    .crt-fx__bottom {
        height: 50.5%;
        background: #000;
        transform: scaleY(0);
    }
    .crt-fx__top { top: 0; transform-origin: 50% 0; }
    .crt-fx__bottom { bottom: 0; transform-origin: 50% 100%; }
    .crt-fx__line {
        top: 50%;
        height: 3px;
        margin-top: -1.5px;
        background: #fff;
        box-shadow: 0 0 12px 3px rgba(255,255,255,.75), 0 0 34px 8px rgba(185,215,255,.35);
        opacity: 0;
    }

    /* Switching off: brighten, close to a line, shrink to a dot, fade. */
    .crt-fx--off .crt-fx__flash { animation: crt-off-flash .26s ease-out forwards; }
    .crt-fx--off .crt-fx__top,
    .crt-fx--off .crt-fx__bottom { animation: crt-close .24s cubic-bezier(.55,0,.9,.4) .04s forwards; }
    .crt-fx--off .crt-fx__line { animation: crt-off-line .34s ease-in .2s forwards; }
    .crt-fx--fade {
        opacity: 0;
        transition: opacity .26s ease;
    }

    /* Switching on: a dot opens to a line, then the picture opens. */
    .crt-fx--on .crt-fx__top,
    .crt-fx--on .crt-fx__bottom {
        transform: scaleY(1);
        animation: crt-open .3s cubic-bezier(.1,.6,.45,1) .16s forwards;
    }
    .crt-fx--on .crt-fx__line { animation: crt-on-line .3s ease-out forwards; }
    .crt-fx--on .crt-fx__flash { animation: crt-on-flash .36s ease-out .14s forwards; }

    @keyframes crt-off-flash { 35% { opacity: .38; } 100% { opacity: 0; } }
    @keyframes crt-close { to { transform: scaleY(1); } }
    @keyframes crt-off-line {
        0%   { opacity: 1; transform: scaleX(1); }
        60%  { opacity: 1; transform: scaleX(.02); }
        100% { opacity: 0; transform: scaleX(.02) scaleY(.6); }
    }
    @keyframes crt-open { to { transform: scaleY(0); } }
    @keyframes crt-on-line {
        0%   { opacity: 1; transform: scaleX(.02); }
        55%  { opacity: 1; transform: scaleX(1); }
        100% { opacity: 0; transform: scaleX(1); }
    }
    @keyframes crt-on-flash { 0% { opacity: .3; } 100% { opacity: 0; } }

    /* ── Sizes ──────────────────────────────────────────────────────────── */
    @media (max-width: 374px) {
        .tv-crt { --crt-side: 10px; --crt-rim: 4px; }
        .tv-crt .crt-vents { display: none; }
        .tv-crt .tv__side { gap: 6px; padding-right: calc(var(--crt-side) + 9px); padding-left: calc(var(--crt-side) + 9px); }
        .tv-crt .knob { --num-r: 21px; width: 50px; }
        .tv-crt .knob__num { display: none; }
        .tv-crt .side-power { margin: 0 5px; }
    }
    @media (min-width: 420px) {
        .tv-crt { --crt-side: 14px; }
        .tv-crt .crt-badge__mark b { font-size: 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .crt-fx { display: none; }
    }
}