/* ============================================================================
   kinetic.css — Impulse Wars "kinetic impact" theme.
   ----------------------------------------------------------------------------
   Page-specific styling for /impulse-wars (html/impulse-wars-content.php).
   Loaded globally via html/structure/head.php (after style-extn-min.css so
   these rules win), but every selector is namespaced to markup that only
   exists on the Impulse Wars page — the .iw-* / .ik-* classes and the
   #impulse-wars-intro id — so nothing here affects other pages.

   Palette: gold = outgoing force (--theme-color2), cyan = reverse force
   (--theme-color). Theme CSS variables come from the global theme stylesheet.
============================================================================ */

    /* ========================================================================
       INTRO OVERRIDES — gen_mode_intro() block (this page only).
       ------------------------------------------------------------------------
       The intro markup (.iw-share / .gs-intro / .gs-jumpnav inside
       #impulse-wars-intro) is produced by the SHARED helper
       html/structure/parts/gen_mode_intro.php, and its BASE styles live in
       assets/css/style.css (~line 19847+). Those are used by every game-mode
       page, so we DO NOT touch them here.

       Instead, everything below is scoped under #impulse-wars-intro — an id
       unique to this page — so these kinetic-themed overrides apply ONLY to
       Impulse Wars and never bleed onto the other mode pages. If this look is
       later approved for all modes, generalise these rules (and drop the #id
       scope). Source-order wins: kinetic.css is linked after the theme bundle
       in head.php, and the #id adds specificity over the base .class selectors.

       Goal: a prominent, glassy "classified briefing" panel — semi-transparent
       reflective glass (backdrop-filter), a faint grid "form paper", a
       targeting crosshair watermark, corner brackets, and a CONFIDENTIAL stamp
       — all in the page's gold(energy)/cyan(force) kinetic theme.
    ======================================================================== */
    #impulse-wars-intro {
        --ik-energy: var(--theme-color2);   /* gold */
        --ik-cool:   var(--theme-color);    /* cyan */
        --ik-stamp:  #ff5a5a;               /* muted "classified" red */
    }

    /* The .container becomes a glassy, semi-transparent classified-dossier
       panel: blurred reflective glass + a faint grid "form paper" + a top
       gold→cyan accent edge. Crosshair watermark and corner brackets are added
       via the ::before / ::after layers below. */
    #impulse-wars-intro .container {
        position: relative;
        padding: 50px 44px 42px;
        border: 1px solid color-mix(in srgb, var(--ik-energy) 12%, transparent);
        border-radius: 12px;
        overflow: hidden;
        /* Reflective glass — blur and saturate whatever sits behind the panel. */
        -webkit-backdrop-filter: blur(13px) saturate(135%);
        backdrop-filter: blur(13px) saturate(135%);
        background:
            /* gold→cyan accent strip along the very top edge (softened) */
            linear-gradient(90deg,
                color-mix(in srgb, var(--ik-energy) 55%, transparent),
                color-mix(in srgb, var(--ik-cool) 55%, transparent)) top / 100% 2px no-repeat,
            /* glassy top sheen (reflection highlight) */
            linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 24%),
            /* faint "graph paper" grid — vertical, then horizontal */
            repeating-linear-gradient(90deg, transparent 0 31px,
                color-mix(in srgb, var(--ik-cool) 2%, transparent) 31px 32px),
            repeating-linear-gradient(0deg, transparent 0 31px,
                color-mix(in srgb, var(--ik-cool) 2%, transparent) 31px 32px),
            /* faint dual-force tint */
            linear-gradient(135deg,
                color-mix(in srgb, var(--ik-energy) 3%, transparent),
                color-mix(in srgb, var(--ik-cool) 2%, transparent) 72%),
            /* low-alpha base so the glass reads as transparent */
            rgba(11, 16, 22, .03);
        /* Inner highlights to sell the glass surface + soft drop shadow. */
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .06),
            inset 0 0 70px -34px rgba(255, 255, 255, .12),
            0 18px 50px -32px rgba(0, 0, 0, .7);
    }

    /* Targeting crosshair / reticle watermark, off to the right, behind text.
       Built from background layers: a vertical tick, a horizontal tick, a ring,
       and a centre dot — all positioned on the same point (--x, --y). */
    #impulse-wars-intro .container::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        --x: 85%; --y: 50%;
        --ik-cross: color-mix(in srgb, var(--ik-energy) 12%, transparent);
        background-repeat: no-repeat;
        background-image:
            linear-gradient(var(--ik-cross) 0 0),                                /* vertical tick   */
            linear-gradient(var(--ik-cross) 0 0),                                /* horizontal tick */
            radial-gradient(circle, transparent 56px,
                var(--ik-cross) 57px 58.5px, transparent 60px),                  /* ring            */
            radial-gradient(circle,
                color-mix(in srgb, var(--ik-energy) 16%, transparent) 0 2px,
                transparent 3px);                                                /* centre dot      */
        background-size: 1.5px 168px, 168px 1.5px, 168px 168px, 168px 168px;
        background-position: var(--x) var(--y);
    }

    /* Classified corner brackets — an inset frame masked down to its 4 corners. */
    #impulse-wars-intro .container::after {
        content: "";
        position: absolute;
        inset: 13px;
        z-index: 0;
        pointer-events: none;
        border: 1.5px solid color-mix(in srgb, var(--ik-energy) 22%, transparent);
        border-radius: 4px;
        -webkit-mask:
            linear-gradient(#000 0 0) top    left  / 26px 26px no-repeat,
            linear-gradient(#000 0 0) top    right / 26px 26px no-repeat,
            linear-gradient(#000 0 0) bottom left  / 26px 26px no-repeat,
            linear-gradient(#000 0 0) bottom right / 26px 26px no-repeat;
                mask:
            linear-gradient(#000 0 0) top    left  / 26px 26px no-repeat,
            linear-gradient(#000 0 0) top    right / 26px 26px no-repeat,
            linear-gradient(#000 0 0) bottom left  / 26px 26px no-repeat,
            linear-gradient(#000 0 0) bottom right / 26px 26px no-repeat;
    }

    /* Keep real content above the watermark / frame layers. */
    #impulse-wars-intro .container > * { position: relative; z-index: 1; }

    /* Monospace classified header line above the briefing copy. */
    #impulse-wars-intro .gs-intro::before {
        content: "// MODE BRIEFING — EYES ON TARGET";
        display: block;
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .7rem;
        font-weight: 400;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--ik-energy) 75%, transparent);
        margin-bottom: 18px;
    }
    /* Briefing copy — monospace (matches the page's kicker/tag type) for a
       typed-dossier feel; brighter & legible over glass; mode name glows. */
    #impulse-wars-intro .gs-intro {
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: clamp(.98rem, 1.55vw, 1.18rem);
        font-weight: 400;
        line-height: 1.85;
        letter-spacing: 0;
        color: color-mix(in srgb, var(--body-color) 45%, white);
        max-width: 760px;
        margin: 0 auto;
        padding: 0;
        text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
    }
    #impulse-wars-intro .gs-intro strong {
        color: var(--ik-energy);
        font-weight: 700;
        text-shadow: 0 0 22px color-mix(in srgb, var(--ik-energy) 28%, transparent);
    }

    /* Rotated "CONFIDENTIAL" stamp, anchored to the left of the jump-nav row
       (a classic bottom-of-the-document stamp position). */
    #impulse-wars-intro .gs-jumpnav::before {
        content: "CONFIDENTIAL";
        position: absolute;
        left: 0; top: 50%;
        transform: translateY(-50%) rotate(-12deg);
        font-family: var(--title-font);
        font-weight: 700;
        font-size: .8rem;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--ik-stamp) 50%, transparent);
        border: 2px solid color-mix(in srgb, var(--ik-stamp) 34%, transparent);
        border-radius: 3px;
        padding: 3px 9px;
        opacity: .42;
        pointer-events: none;
    }

    /* Jump-nav → kinetic, techy pills (square-ish, monospace). */
    #impulse-wars-intro .gs-jumpnav {
        margin-top: 28px;
        gap: 10px;
    }
    #impulse-wars-intro .gs-jumpnav span {
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .7rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--ik-cool) 70%, white);
        margin-right: 4px;
    }
    #impulse-wars-intro .gs-jumpnav a {
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .72rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--ik-cool) 85%, transparent);
        border: 1px solid color-mix(in srgb, var(--ik-cool) 20%, transparent);
        background: color-mix(in srgb, var(--ik-cool) 4%, transparent);
        border-radius: 6px;
        padding: 7px 15px;
        transition: color .25s ease, border-color .25s ease, background .25s ease,
                    box-shadow .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
    }
    #impulse-wars-intro .gs-jumpnav a:hover {
        color: var(--ik-energy);
        border-color: color-mix(in srgb, var(--ik-energy) 45%, transparent);
        background: color-mix(in srgb, var(--ik-energy) 8%, transparent);
        box-shadow: 0 0 18px -8px var(--ik-energy);
        transform: translateY(-2px);
    }

    /* Share button → pinned top-right of the panel, kinetic gold pill. */
    #impulse-wars-intro .iw-share {
        position: absolute;
        top: 14px; right: 16px;
        margin: 0;
        z-index: 2;
    }
    #impulse-wars-intro .iw-share__btn {
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .66rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--ik-energy) 85%, transparent);
        border: 1px solid color-mix(in srgb, var(--ik-energy) 20%, transparent);
        background: color-mix(in srgb, var(--ik-energy) 5%, transparent);
        border-radius: 6px;
        padding: 6px 13px;
        line-height: 1.5;
    }
    #impulse-wars-intro .iw-share__btn:hover {
        color: var(--ik-energy);
        border-color: color-mix(in srgb, var(--ik-energy) 45%, transparent);
        background: color-mix(in srgb, var(--ik-energy) 10%, transparent);
        box-shadow: 0 0 18px -8px var(--ik-energy);
    }
    /* On narrow screens: unpin the share button so it can't collide with the
       centered header, hide the rotated stamp (no room beside the pills), and
       recenter the crosshair behind the copy. */
    @media (max-width: 600px) {
        #impulse-wars-intro .container { padding: 38px 22px 32px; }
        #impulse-wars-intro .iw-share {
            position: static;
            justify-content: center;
            margin-bottom: 18px;
        }
        #impulse-wars-intro .gs-jumpnav::before { display: none; }
        #impulse-wars-intro .container::before { --x: 50%; }
    }

    /* ========================================================================
       Impulse Wars — "kinetic impact" treatment (main content only).
       Scoped under .iw-kinetic. Theme: force / push-pull / trajectory.
       Warm gold energy accent (--ik-energy) with cyan as the opposing force.
    ======================================================================== */
    .iw-kinetic {
        --ik-energy: var(--theme-color2);   /* gold — outgoing force */
        --ik-cool:   var(--theme-color);    /* cyan — reverse force  */
        position: relative;
        font-family: var(--body-font);
    }

    /* Diagonal motion streaks for kinetic atmosphere. */
    .iw-kinetic::before {
        content: "";
        position: absolute;
        inset: -40px 0 0;
        z-index: 0;
        pointer-events: none;
        background: repeating-linear-gradient(115deg,
            transparent 0 38px,
            color-mix(in srgb, var(--ik-energy) 5%, transparent) 38px 40px);
        -webkit-mask-image: radial-gradient(ellipse 85% 60% at 50% 0%, #000 22%, transparent 80%);
        mask-image: radial-gradient(ellipse 85% 60% at 50% 0%, #000 22%, transparent 80%);
    }
    .iw-kinetic > * { position: relative; z-index: 1; }

    /* --- Hero / About ---------------------------------------------------- */
    .ik-kicker {
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .72rem;
        letter-spacing: .34em;
        text-transform: uppercase;
        color: var(--ik-energy);
    }
    .ik-title {
        font-family: var(--title-font);
        font-weight: 700;
        text-transform: uppercase;
        font-size: clamp(2.2rem, 5.2vw, 3.4rem);
        letter-spacing: .02em;
        line-height: 1;
        margin: .35em 0 .55em;
        color: var(--white-color);
    }
    .ik-title em {
        display: inline-block;
        font-style: italic;
        color: var(--ik-energy);
        transform: skewX(-9deg);
        margin-right: .25em;
        text-shadow: 0 0 32px color-mix(in srgb, var(--ik-energy) 45%, transparent);
    }
    .ik-lede p { color: var(--body-color); line-height: 1.8; max-width: none; }
    .ik-lede strong { color: var(--white-color); }

    /* --- Section headings with a skewed "motion bar" --------------------- */
    .ik-h {
        font-family: var(--title-font);
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--white-color);
        font-size: clamp(1.6rem, 3vw, 2.1rem);
        margin: 64px 0 6px;
        padding-left: 20px;
        position: relative;
        scroll-margin-top: 110px;
    }
    .ik-h::before {
        content: "";
        position: absolute;
        left: 0; top: .12em; bottom: .12em;
        width: 5px;
        background: var(--ik-energy);
        box-shadow: 0 0 16px var(--ik-energy);
        transform: skewX(-12deg);
    }
    .ik-sub { color: var(--body-color); margin: 0 0 24px; }

    /* --- Missile force-duality cards ------------------------------------- */
    .ik-forces {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin: 10px 0 26px;
    }
    .ik-force {
        --c: var(--ik-energy);
        position: relative;
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 24px 26px;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--c) 13%, transparent),
            rgba(15, 28, 35, .55) 65%);
        border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
        border-radius: 6px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%);  /* angled bottom-left */
        transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
    }
    .ik-force--push { --c: var(--ik-energy); }
    .ik-force--pull {
        --c: var(--ik-cool);
        flex-direction: row-reverse;
        text-align: right;
        clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); /* angled bottom-right */
    }
    .ik-force:hover {
        border-color: var(--c);
        box-shadow: 0 0 36px -14px var(--c);
    }
    .ik-force--push:hover { transform: translateX(6px); }
    .ik-force--pull:hover { transform: translateX(-6px); }

    .ik-force__dir {
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .66rem;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--c);
    }
    .ik-force__name {
        font-family: var(--title-font);
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--c);
        margin: 5px 0 9px;
        font-size: 1.4rem;
    }
    .ik-force p { color: var(--body-color); margin: 0; font-size: .95rem; line-height: 1.65; }

    /* Animated directional chevrons (the force vector). */
    .ik-force__vector { flex: none; display: flex; gap: 4px; }
    .ik-force__vector span {
        width: 13px; height: 13px;
        border-top: 3px solid var(--c);
        border-right: 3px solid var(--c);
        transform: rotate(45deg);                 /* points right → push out */
        animation: ikPush 1.2s ease-in-out infinite;
    }
    .ik-force__vector span:nth-child(2) { animation-delay: .14s; }
    .ik-force__vector span:nth-child(3) { animation-delay: .28s; }
    .ik-force__vector--rev span {
        transform: rotate(-135deg);               /* points left ← reverse pull */
        animation-name: ikPull;
    }
    @keyframes ikPush {
        0%, 100% { opacity: .3; }
        50%      { opacity: 1; }
    }
    @keyframes ikPull {
        0%, 100% { opacity: .3; }
        50%      { opacity: 1; }
    }
    @media (prefers-reduced-motion: no-preference) {
        .ik-force__vector span      { animation: ikPushMove 1.2s ease-in-out infinite; }
        .ik-force__vector--rev span { animation: ikPullMove 1.2s ease-in-out infinite; }
    }
    @keyframes ikPushMove {
        0%, 100% { opacity: .3; transform: translateX(0) rotate(45deg); }
        50%      { opacity: 1;  transform: translateX(5px) rotate(45deg); }
    }
    @keyframes ikPullMove {
        0%, 100% { opacity: .3; transform: translateX(0) rotate(-135deg); }
        50%      { opacity: 1;  transform: translateX(-5px) rotate(-135deg); }
    }

    /* --- Split text + figure layout -------------------------------------- */
    .ik-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: start;
        margin: 10px 0;
    }
    .ik-split--rev .ik-split__media { order: -1; }

    .ik-h4 {
        font-family: var(--title-font);
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--ik-cool);
        font-size: 1.25rem;
        margin: 30px 0 8px;
    }
    .ik-body p { color: var(--body-color); line-height: 1.8; }
    .ik-body strong { color: var(--white-color); }
    .ik-body ul { color: var(--body-color); }

    .ik-figure { margin: 14px 0 22px; }
    .ik-figure img {
        display: block;
        width: 100%;
        max-width: 576px;
        height: auto;
        border: 1px solid color-mix(in srgb, var(--ik-cool) 22%, transparent);
        border-radius: 6px;
    }
    .ik-figure figcaption {
        color: var(--body-color);
        font-style: italic;
        font-size: .86rem;
        margin-top: 10px;
        max-width: 576px;
    }

    /* --- Bound "demonstration" panel (text + media as one module) -------- */
    /* Toned purple to read as its own zone, separate from the gold/cyan
       push-pull cards above. The top accent strip stays gold → cyan. */
    .ik-demo {
        --ik-demo-accent: var(--theme-color3);   /* purple */
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        margin: 18px 0 26px;
        background:
            linear-gradient(135deg,
                color-mix(in srgb, var(--ik-demo-accent) 9%, transparent),
                color-mix(in srgb, var(--ik-demo-accent) 3%, transparent)),
            rgba(11, 9, 18, .42);
        border: 1px solid color-mix(in srgb, var(--ik-demo-accent) 22%, transparent);
        border-radius: 8px;
        overflow: hidden;
    }
    /* Dual-force accent edge: gold (push) → cyan (pull). */
    .ik-demo::before {
        content: "";
        position: absolute;
        left: 0; right: 0; top: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--ik-energy), var(--ik-cool));
    }
    .ik-demo__text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 30px 32px;
    }
    .ik-demo__text p { color: var(--body-color); font-size: 1.08rem; line-height: 1.78; margin: 0 0 14px; }
    .ik-demo__text p:last-child { margin: 0; }
    .ik-demo__text strong { color: color-mix(in srgb, var(--ik-demo-accent) 55%, white); }

    .ik-demo__media {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 22px 24px;
        background: color-mix(in srgb, var(--ik-demo-accent) 6%, transparent);
        border-left: 1px solid color-mix(in srgb, var(--ik-demo-accent) 16%, transparent);
    }
    /* Diamond node on the seam — visually links the two halves. */
    .ik-demo__media::before {
        content: "";
        position: absolute;
        left: -7px; top: 50%;
        width: 12px; height: 12px;
        transform: translateY(-50%) rotate(45deg);
        background: var(--ik-demo-accent);
        box-shadow: 0 0 0 4px rgba(13, 12, 24, .85), 0 0 14px var(--ik-demo-accent);
    }
    .ik-demo__tag {
        align-self: flex-start;
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .6rem;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--ik-demo-accent) 60%, white);
        margin-bottom: 12px;
    }
    .ik-demo__media img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 6px;
        border: 1px solid color-mix(in srgb, var(--ik-demo-accent) 30%, transparent);
    }
    .ik-demo__cap {
        color: color-mix(in srgb, var(--ik-demo-accent) 60%, white);
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-style: normal;
        font-size: .68rem;
        letter-spacing: .28em;
        text-transform: uppercase;
        margin: 14px 0 0;
        text-align: center;
    }
    @media (max-width: 767px) {
        .ik-demo { grid-template-columns: 1fr; }
        .ik-demo__media {
            border-left: none;
            border-top: 1px solid color-mix(in srgb, var(--ik-demo-accent) 30%, transparent);
        }
        .ik-demo__media::before {
            left: 50%; top: -7px;
            transform: translateX(-50%) rotate(45deg);
        }
    }

    /* --- Strategy cards (themed, visually separated) --------------------- */
    .ik-strat {
        --c: var(--ik-cool);
        position: relative;
        margin: 24px 0;
        padding: 28px 30px 30px;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--c) 9%, transparent),
            rgba(12, 15, 21, .5) 70%);
        border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
        border-radius: 8px;
        overflow: hidden;
        transition: border-color .3s ease, box-shadow .3s ease;
    }
    .ik-strat:hover {
        border-color: color-mix(in srgb, var(--c) 45%, transparent);
        box-shadow: 0 0 42px -18px var(--c);
    }
    /* Top accent strip in the card's theme color. */
    .ik-strat::before {
        content: "";
        position: absolute;
        left: 0; right: 0; top: 0;
        height: 2px;
        background: var(--c);
        box-shadow: 0 0 14px var(--c);
    }
    /* Oversized faded thematic emblem in the corner. */
    .ik-strat__emblem {
        position: absolute;
        right: -6px; top: -28px;
        font-size: 9.5rem;
        line-height: 1;
        color: color-mix(in srgb, var(--c) 9%, transparent);
        pointer-events: none;
        z-index: 0;
    }
    .ik-strat > *:not(.ik-strat__emblem) { position: relative; z-index: 1; }

    .ik-strat__head {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 22px;
    }
    .ik-strat__icon {
        flex: none;
        width: 54px; height: 54px;
        display: grid; place-items: center;
        font-size: 1.5rem;
        color: var(--c);
        border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
        border-radius: 12px;
        background: color-mix(in srgb, var(--c) 10%, transparent);
        box-shadow: inset 0 0 18px color-mix(in srgb, var(--c) 16%, transparent);
    }
    .ik-strat__tag {
        display: block;
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .6rem;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--c) 72%, white);
        margin-bottom: 4px;
    }
    .ik-strat__title {
        font-family: var(--title-font);
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--c);
        font-size: 1.5rem;
        margin: 0;
    }
    /* Inline emphasis picks up the card's accent colour. */
    .ik-strat .ik-body strong { color: color-mix(in srgb, var(--c) 85%, white); }
    .ik-strat__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: start;
    }
    .ik-strat--rev .ik-strat__media { order: -1; }
    .ik-strat__media { margin: 0; }
    /* Align the figure's image top with the first line of the text column. */
    .ik-strat__grid .ik-body > :first-child { margin-top: 0; }
    .ik-strat__media img { margin-top: 5px; border-color: color-mix(in srgb, var(--c) 28%, transparent); }
    /* Caption matches the purple block's treatment, tinted to the card's color. */
    .ik-strat__media figcaption {
        color: color-mix(in srgb, var(--c) 80%, white);
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-style: normal;
        font-size: .68rem;
        letter-spacing: .28em;
        text-transform: uppercase;
        text-align: center;
        max-width: none;
        margin: 14px 0 0;
    }

    /* Per-theme accents */
    .ik-strat--layout { --c: var(--ik-cool); }    /* structure → cyan */
    .ik-strat--health { --c: #ff5fa2; }           /* health    → pink */
    .ik-strat--moon   { --c: var(--ik-energy); }  /* moonshot  → gold */

    @media (max-width: 767px) {
        .ik-strat__grid { grid-template-columns: 1fr; }
        .ik-strat--rev .ik-strat__media { order: 0; }
        .ik-strat__emblem { font-size: 7rem; }
    }

    /* --- Skill-depth force gauges ---------------------------------------- */
    .ik-depth { margin-top: 8px; }
    .ik-depth__headline {
        display: flex;
        align-items: baseline;
        gap: 14px;
        margin: 4px 0 22px;
    }
    .ik-depth__num {
        font-family: var(--title-font);
        font-weight: 700;
        font-size: clamp(2.6rem, 7vw, 4rem);
        line-height: .9;
        color: var(--ik-energy);
        text-shadow: 0 0 30px color-mix(in srgb, var(--ik-energy) 40%, transparent);
    }
    .ik-depth__num small { font-size: .4em; color: var(--body-color); }
    .ik-depth__lbl {
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .72rem;
        letter-spacing: .26em;
        text-transform: uppercase;
        color: var(--body-color);
    }
    .ik-gauge { max-width: none; margin-bottom: 18px; }
    .ik-gauge__top {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 8px;
    }
    .ik-gauge__label {
        font-family: var(--title-font);
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--white-color);
        font-size: 1.05rem;
    }
    .ik-gauge__val {
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        color: var(--ik-energy);
        font-size: .82rem;
        letter-spacing: .12em;
    }
    .ik-gauge__track {
        height: 9px;
        border-radius: 6px;
        background: rgba(255, 255, 255, .06);
        overflow: hidden;
    }
    .ik-gauge__fill {
        height: 100%;
        border-radius: 6px;
        background: linear-gradient(90deg, var(--ik-cool), var(--ik-energy));
        box-shadow: 0 0 14px color-mix(in srgb, var(--ik-energy) 50%, transparent);
        transform-origin: left;
    }
    @media (prefers-reduced-motion: no-preference) {
        .ik-gauge__fill { transform: scaleX(0); animation: ikFill 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
        .ik-gauge:nth-child(2) .ik-gauge__fill { animation-delay: .12s; }
        .ik-gauge:nth-child(3) .ik-gauge__fill { animation-delay: .24s; }
    }
    @keyframes ikFill { to { transform: scaleX(1); } }

    .ik-depth__notes { margin-top: 40px; }
    .ik-depth__notes p { color: var(--body-color); line-height: 1.8; max-width: none; }
    .ik-depth__notes strong { color: var(--white-color); }

    /* --- Responsive ------------------------------------------------------ */
    @media (max-width: 767px) {
        .ik-forces { grid-template-columns: 1fr; }
        .ik-split  { grid-template-columns: 1fr; }
        .ik-split--rev .ik-split__media { order: 0; }
    }

    /* ========================================================================
       Shared section head — kicker + skewed-em title. Used by the full-width
       sections (FAQ, Media reel, Videos) so their headers match the page.
    ======================================================================== */
    .iw-shead { text-align: center; margin-bottom: 38px; }
    .iw-shead__kicker {
        display: block;
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .72rem;
        letter-spacing: .34em;
        text-transform: uppercase;
        color: var(--theme-color2);
        margin-bottom: 12px;
    }
    .iw-shead__title {
        font-family: var(--title-font);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .02em;
        font-size: clamp(1.7rem, 3.4vw, 2.3rem);
        line-height: 1.05;
        color: var(--white-color);
        margin: 0;
    }
    .iw-shead__title em {
        font-style: italic;
        color: var(--theme-color2);
        display: inline-block;
        transform: skewX(-9deg);
        text-shadow: 0 0 28px color-mix(in srgb, var(--theme-color2) 42%, transparent);
    }

    /* ========================================================================
       FAQ — kinetic accordion. Native <details>/<summary>, no JS.
       Closed items read as cool/cyan; the active (open) item charges up gold.
    ======================================================================== */
    .iw-faq {
        --ik-energy: var(--theme-color2);   /* gold */
        --ik-cool:   var(--theme-color);    /* cyan */
        font-family: var(--body-font);
        max-width: 940px;
        margin: 0 auto;
    }
    .iw-faq__list { display: grid; gap: 14px; }

    .iw-faq__item {
        --c: var(--ik-cool);
        position: relative;
        border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
        border-radius: 8px;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--c) 7%, transparent),
            rgba(12, 15, 21, .5) 72%);
        overflow: hidden;
        transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
    }
    /* Left accent strip — skewed motion bar, charges from cyan to gold on open. */
    .iw-faq__item::before {
        content: "";
        position: absolute;
        left: 0; top: 10px; bottom: 10px;
        width: 4px;
        background: var(--c);
        box-shadow: 0 0 12px var(--c);
        transform: skewX(-12deg);
        opacity: .55;
        transition: opacity .3s ease, background .3s ease, box-shadow .3s ease;
    }
    .iw-faq__item:hover { border-color: color-mix(in srgb, var(--c) 42%, transparent); }
    .iw-faq__item:hover::before { opacity: 1; }
    .iw-faq__item[open] {
        --c: var(--ik-energy);
        border-color: color-mix(in srgb, var(--c) 48%, transparent);
        box-shadow: 0 0 42px -18px var(--c);
    }
    .iw-faq__item[open]::before { opacity: 1; }

    /* Question row (clickable) */
    .iw-faq__q {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 19px 24px 19px 26px;
        outline: none;
    }
    .iw-faq__q::-webkit-details-marker { display: none; }
    .iw-faq__q:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 60%, transparent); }

    .iw-faq__num {
        flex: none;
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .7rem;
        letter-spacing: .14em;
        color: color-mix(in srgb, var(--c) 78%, white);
        min-width: 2.4em;
    }
    .iw-faq__qtext {
        flex: 1;
        margin: 0;
        font-family: var(--title-font);
        text-transform: uppercase;
        letter-spacing: .02em;
        font-size: 1.08rem;
        line-height: 1.35;
        color: var(--white-color);
        transition: color .3s ease;
    }
    .iw-faq__item[open] .iw-faq__qtext { color: color-mix(in srgb, var(--c) 70%, white); }

    /* Plus → rotates to an X when open */
    .iw-faq__toggle {
        flex: none;
        width: 30px; height: 30px;
        display: grid; place-items: center;
        position: relative;
        color: var(--c);
        transition: transform .3s cubic-bezier(.2,.7,.2,1), color .3s ease;
    }
    .iw-faq__toggle::before,
    .iw-faq__toggle::after {
        content: "";
        position: absolute;
        background: currentColor;
        border-radius: 2px;
    }
    .iw-faq__toggle::before { width: 15px; height: 2.5px; }   /* horizontal */
    .iw-faq__toggle::after  { width: 2.5px; height: 15px; }   /* vertical   */
    .iw-faq__item[open] .iw-faq__toggle { transform: rotate(135deg); }

    /* Answer */
    .iw-faq__a {
        padding: 0 26px 22px calc(26px + 2.4em + 16px);
        color: var(--body-color);
        line-height: 1.75;
        font-size: .97rem;
    }
    .iw-faq__a p { margin: 0; color: inherit; }
    .iw-faq__a strong { color: var(--white-color); }
    /* Slide + fade the answer in when the item opens. */
    @media (prefers-reduced-motion: no-preference) {
        .iw-faq__item[open] .iw-faq__a {
            animation: ikFaqReveal .34s cubic-bezier(.2,.7,.2,1) both;
        }
    }
    @keyframes ikFaqReveal {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 575px) {
        .iw-faq__qtext { font-size: .98rem; }
        .iw-faq__a { padding-left: 26px; }
    }

    /* ========================================================================
       Media — kinetic video grid. Themed to match the page; 3-col row/col
       layout preserved. Scoped under .iw-media so external CSS is untouched.
    ======================================================================== */
    .iw-media {
        --ik-energy: var(--theme-color2);   /* gold */
        --ik-cool:   var(--theme-color);    /* cyan */
        font-family: var(--body-font);
    }
    /* 3-col grid (kept from the original layout) */
    .iw-media__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 26px;
    }

    .iw-media__card {
        --c: var(--ik-cool);
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    .iw-media__thumb {
        position: relative;
        aspect-ratio: 16 / 9;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
        background: rgba(12, 15, 21, .5);
        box-shadow: 0 0 8px color-mix(in srgb, var(--c) 22%, transparent);
        transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
    }
    .iw-media__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
    }
    /* Dark scrim + diagonal motion streaks over the thumb. */
    .iw-media__thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            repeating-linear-gradient(115deg,
                transparent 0 38px,
                color-mix(in srgb, var(--ik-energy) 7%, transparent) 38px 40px),
            linear-gradient(to top, rgba(8, 11, 16, .55), transparent 55%);
        opacity: 0;
        transition: opacity .3s ease;
        pointer-events: none;
    }
    .iw-media__card:hover .iw-media__thumb {
        --c: var(--ik-energy);
        transform: translateY(-5px);
        border-color: color-mix(in srgb, var(--c) 55%, transparent);
        box-shadow: 0 14px 38px -18px var(--c), 0 0 22px -8px var(--c);
    }
    .iw-media__card:hover .iw-media__thumb img { transform: scale(1.05); }
    .iw-media__card:hover .iw-media__thumb::after { opacity: 1; }

    /* Play button — gold energy ring */
    .iw-media__play {
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 64px; height: 64px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: var(--white-color);
        background: color-mix(in srgb, var(--ik-energy) 22%, rgba(10, 13, 19, .6));
        border: 1.5px solid color-mix(in srgb, var(--ik-energy) 70%, transparent);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ik-energy) 45%, transparent);
        transition: background .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
    }
    .iw-media__play i {
        font-size: 1.25rem;
        margin-left: 3px;                 /* optical centering of the triangle */
        filter: drop-shadow(0 0 6px rgba(0, 0, 0, .5));
    }
    .iw-media__card:hover .iw-media__play {
        background: var(--ik-energy);
        color: #0b0e13;
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow: 0 0 26px -2px color-mix(in srgb, var(--ik-energy) 65%, transparent);
    }
    @media (prefers-reduced-motion: no-preference) {
        .iw-media__card:hover .iw-media__play { animation: ikMediaPulse 1.6s ease-out infinite; }
    }
    @keyframes ikMediaPulse {
        0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ik-energy) 50%, transparent); }
        70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--ik-energy) 0%, transparent); }
        100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ik-energy) 0%, transparent); }
    }

    /* Date badge — monospace tag, top-left */
    .iw-media__badge {
        position: absolute;
        left: 12px; top: 12px;
        z-index: 2;
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .6rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--white-color);
        padding: 4px 9px;
        border-radius: 4px;
        background: rgba(8, 11, 16, .62);
        border: 1px solid color-mix(in srgb, var(--ik-energy) 35%, transparent);
        backdrop-filter: blur(3px);
    }

    /* Caption block below the thumb */
    .iw-media__cap {
        margin-top: 14px;
        padding-left: 14px;
        position: relative;
    }
    .iw-media__cap::before {
        content: "";
        position: absolute;
        left: 0; top: 3px; bottom: 3px;
        width: 3px;
        background: var(--ik-energy);
        box-shadow: 0 0 10px var(--ik-energy);
        transform: skewX(-12deg);
    }
    .iw-media__cap-title {
        display: block;
        font-family: var(--title-font);
        text-transform: uppercase;
        letter-spacing: .03em;
        font-size: 1rem;
        line-height: 1.3;
        color: var(--white-color);
    }
    .iw-media__cap-arena {
        display: block;
        margin-top: 4px;
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .7rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--ik-cool) 75%, white);
    }

    @media (max-width: 767px) {
        .iw-media__grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 575px) {
        .iw-media__grid { grid-template-columns: 1fr; gap: 18px; }
    }

    /* ========================================================================
       YouTube reel — kinetic treatment matching the trailer grid above.
       Scoped overrides under .iw-reel; the shared .yt-reel CSS is left intact.
    ======================================================================== */
    .iw-reel {
        --ik-energy: var(--theme-color2);   /* gold */
        --ik-cool:   var(--theme-color);    /* cyan */
    }
    /* The "Media" jump-nav link targets #yt-reel, which (unlike the other
       anchors) has no scroll offset in style.css — add one so it clears the
       sticky header when scrolled to. */
    #yt-reel { scroll-margin-top: 100px; }

    /* "Latest from MOROSE" subheading */
    .iw-reel__sub {
        text-align: center;
        font-family: var(--title-font);
        text-transform: uppercase;
        letter-spacing: .14em;
        font-size: 1rem;
        color: var(--body-color);
        margin: -20px 0 30px;
    }
    .iw-reel__sub i { color: #ff0000; margin-right: 9px; }
    .iw-reel__sub a {
        color: var(--ik-energy);
        text-decoration: none;
        transition: opacity .2s ease, text-shadow .2s ease;
    }
    .iw-reel__sub a:hover {
        opacity: .85;
        text-shadow: 0 0 16px color-mix(in srgb, var(--ik-energy) 55%, transparent);
    }

    .iw-reel .yt-reel { gap: 26px; }

    /* Thumb — cyan border charging to gold on hover, lift + glow + zoom */
    .iw-reel .yt-reel__thumb {
        --c: var(--ik-cool);
        border-radius: 8px;
        border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, var(--c) 22%, transparent);
        transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
    }
    .iw-reel .yt-reel__thumb img {
        transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
    }
    /* Motion streaks + scrim on hover (matches the trailer thumbs) */
    .iw-reel .yt-reel__thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
            repeating-linear-gradient(115deg,
                transparent 0 38px,
                color-mix(in srgb, var(--ik-energy) 7%, transparent) 38px 40px),
            linear-gradient(to top, rgba(8, 11, 16, .55), transparent 55%);
        opacity: 0;
        transition: opacity .3s ease;
        pointer-events: none;
    }
    .iw-reel .yt-reel__item:hover .yt-reel__thumb {
        --c: var(--ik-energy);
        border-color: color-mix(in srgb, var(--c) 55%, transparent);
        box-shadow: 0 14px 38px -18px var(--c), 0 0 22px -8px var(--c);
    }
    .iw-reel .yt-reel__item:hover .yt-reel__thumb img { transform: scale(1.05); opacity: 1; }
    .iw-reel .yt-reel__item:hover .yt-reel__thumb::after { opacity: 1; }

    /* Play button → gold energy ring, always visible like the trailers */
    .iw-reel .yt-reel__play {
        inset: auto;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 58px; height: 58px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--ik-energy) 22%, rgba(10, 13, 19, .6));
        border: 1.5px solid color-mix(in srgb, var(--ik-energy) 70%, transparent);
        opacity: 1;
        transition: background .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
    }
    .iw-reel .yt-reel__play i {
        font-size: 1.15rem;
        margin-left: 3px;
        color: var(--white-color);
        filter: drop-shadow(0 0 6px rgba(0, 0, 0, .5));
        transition: color .3s ease;
    }
    .iw-reel .yt-reel__item:hover .yt-reel__play {
        background: var(--ik-energy);
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow: 0 0 26px -2px color-mix(in srgb, var(--ik-energy) 65%, transparent);
    }
    .iw-reel .yt-reel__item:hover .yt-reel__play i { color: #0b0e13; }
    @media (prefers-reduced-motion: no-preference) {
        .iw-reel .yt-reel__item:hover .yt-reel__play { animation: ikMediaPulse 1.6s ease-out infinite; }
    }

    /* Title + date — skewed gold accent like the trailer captions */
    .iw-reel .yt-reel__title {
        position: relative;
        margin: 14px 0 4px;
        padding-left: 14px;
        font-family: var(--title-font);
        text-transform: uppercase;
        letter-spacing: .02em;
        font-size: .92rem;
        color: var(--white-color);
    }
    .iw-reel .yt-reel__title::before {
        content: "";
        position: absolute;
        left: 0; top: 2px; bottom: 2px;
        width: 3px;
        background: var(--ik-energy);
        box-shadow: 0 0 10px var(--ik-energy);
        transform: skewX(-12deg);
    }
    .iw-reel .yt-reel__date {
        padding-left: 14px;
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .7rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--ik-cool) 75%, white);
    }

    /* Channel link → kinetic pill */
    .iw-reel .yt-reel__channel-link { margin-top: 28px; }
    .iw-reel .yt-reel__channel-link a {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: .72rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--ik-energy);
        padding: 10px 20px;
        border: 1px solid color-mix(in srgb, var(--ik-energy) 35%, transparent);
        border-radius: 6px;
        background: color-mix(in srgb, var(--ik-energy) 8%, transparent);
        transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
    }
    .iw-reel .yt-reel__channel-link a:hover {
        opacity: 1;
        border-color: color-mix(in srgb, var(--ik-energy) 60%, transparent);
        background: color-mix(in srgb, var(--ik-energy) 16%, transparent);
        box-shadow: 0 0 22px -6px var(--ik-energy);
    }
    .iw-reel .yt-reel__channel-link i { margin: 0; }

    /* ========================================================================
       "See also" footer — a subtle kinetic final touch. Overrides the base
       .iw-see-also styles (assets/css/mode-guide.css). Scoped under .iw-media
       (a class unique to this page) rather than the shared #media id, so that
       even though kinetic.css loads globally it can't restyle the "See also"
       rows on the other mode pages. Intentionally quiet: muted cyan links,
       faint gold icons, a delicate centered hairline — a gentle closer, not
       another loud block. Gold only warms in on hover.
    ======================================================================== */
    .iw-media .iw-see-also {
        position: relative;
        justify-content: center;
        gap: 8px 26px;
        margin-top: 44px;
        padding-top: 20px;
        border-top: none;          /* replace the solid cyan rule below */
        font-size: .85em;
    }
    /* Faint, center-fading hairline (gold→cyan core) in place of the border. */
    .iw-media .iw-see-also::before {
        content: "";
        position: absolute;
        top: 0; left: 50%;
        transform: translateX(-50%);
        width: min(420px, 80%);
        height: 1px;
        background: linear-gradient(90deg,
            transparent,
            color-mix(in srgb, var(--theme-color2) 28%, transparent) 35%,
            color-mix(in srgb, var(--theme-color)  28%, transparent) 65%,
            transparent);
    }
    .iw-media .iw-see-also__label {
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-style: normal;
        font-size: .82em;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--body-color) 65%, transparent);
    }
    .iw-media .iw-see-also a {
        color: color-mix(in srgb, var(--theme-color) 78%, white);   /* muted cyan */
        letter-spacing: .02em;
        transition: color .25s ease, text-shadow .25s ease;
    }
    .iw-media .iw-see-also a i {
        color: color-mix(in srgb, var(--theme-color2) 55%, transparent);  /* faint gold */
        transition: color .25s ease;
    }
    .iw-media .iw-see-also a:hover {
        opacity: 1;                /* override the base 0.75 fade */
        color: var(--theme-color2);
        text-shadow: 0 0 14px color-mix(in srgb, var(--theme-color2) 32%, transparent);
    }
    .iw-media .iw-see-also a:hover i { color: var(--theme-color2); }