/* ============ BASE ============ */
        html {
            scroll-behavior: smooth;
            scroll-padding-top: 90px;
        }

        body {
            background: #060607;
        }

        ::selection {
            background: #F5C51D;
            color: #060607;
        }

        ::-webkit-scrollbar {
            width: 9px;
        }

        ::-webkit-scrollbar-track {
            background: #060607;
        }

        ::-webkit-scrollbar-thumb {
            background: #22242a;
            border: 2px solid #060607;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #3a3d45;
        }

        :focus-visible {
            outline: 1px dashed #F5C51D;
            outline-offset: 3px;
        }

        /* custom cursor (fine pointers only) */
        html.has-cursor,
        html.has-cursor * {
            cursor: none !important;
        }

        /* film grain */
        .grain {
            position: fixed;
            inset: -50%;
            z-index: 80;
            pointer-events: none;
            opacity: .055;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            animation: grain 7s steps(6) infinite;
        }

        @keyframes grain {

            0%,
            100% {
                transform: translate(0, 0)
            }

            20% {
                transform: translate(-4%, 3%)
            }

            40% {
                transform: translate(3%, -5%)
            }

            60% {
                transform: translate(-5%, -2%)
            }

            80% {
                transform: translate(4%, 4%)
            }
        }

        /* hollow display text */
        .hollow {
            color: transparent;
            -webkit-text-stroke: 1.5px rgba(245, 197, 29, .6);
        }

        /* corner brackets on panels */
        .frame {
            position: relative;
        }

        .frame::before,
        .frame::after {
            content: "";
            position: absolute;
            width: 14px;
            height: 14px;
            pointer-events: none;
        }

        .frame::before {
            top: -1px;
            left: -1px;
            border-top: 1px solid rgba(245, 197, 29, .55);
            border-left: 1px solid rgba(245, 197, 29, .55);
        }

        .frame::after {
            bottom: -1px;
            right: -1px;
            border-bottom: 1px solid rgba(245, 197, 29, .55);
            border-right: 1px solid rgba(245, 197, 29, .55);
        }

        /* reveal on scroll */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
            transition-delay: var(--d, 0s);
        }

        .reveal-l {
            transform: translateX(-36px);
        }

        .reveal-r {
            transform: translateX(36px);
        }

        .reveal.in {
            opacity: 1;
            transform: none;
        }

        /* hero letter rise */
        .word {
            display: inline-block;
            overflow: hidden;
            vertical-align: top;
        }

        .word i {
            display: inline-block;
            font-style: normal;
            transform: translateY(115%);
            animation: rise 1s cubic-bezier(.16, 1, .3, 1) forwards;
            animation-delay: calc(var(--i)*.05s + .15s);
        }

        @keyframes rise {
            to {
                transform: translateY(0);
            }
        }

        .wipe {
            clip-path: inset(0 100% 0 0);
            animation: wipe 1.1s cubic-bezier(.7, 0, .2, 1) forwards;
            animation-delay: .65s;
        }

        @keyframes wipe {
            to {
                clip-path: inset(0 0 0 0);
            }
        }

        /* caret */
        .caret {
            display: inline-block;
            width: 9px;
            height: 1.05em;
            background: #F5C51D;
            margin-left: 4px;
            vertical-align: text-bottom;
            animation: blink 1s steps(1) infinite;
        }

        @keyframes blink {
            50% {
                opacity: 0;
            }
        }

        /* signal beams (hero) */
        .beam {
            position: absolute;
            top: 0;
            left: 50%;
            width: 110px;
            height: 160vh;
            transform-origin: top center;
            pointer-events: none;
            background: linear-gradient(to bottom, rgba(255, 242, 190, .17), rgba(255, 242, 190, .02) 70%, transparent);
            animation: sway 7s ease-in-out infinite alternate;
        }

        .beam.b1 {
            transform: translateX(-50%) rotate(163deg);
        }

        .beam.b2 {
            transform: translateX(-50%) rotate(197deg);
            animation-delay: -3.5s;
        }

        @keyframes sway {
            from {
                margin-left: -14px;
            }

            to {
                margin-left: 14px;
            }
        }

        .sig-glow {
            animation: pulse 4.5s ease-in-out infinite;
        }

        @keyframes pulse {

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

            50% {
                opacity: 1;
                transform: scale(1.06);
            }
        }

        /* skyline */
        .sky-fill,
        .wins rect {
            transition: fill .35s, opacity .35s;
        }

        .strike .sky-fill {
            fill: #262a33 !important;
        }

        .strike .wins rect {
            opacity: .95 !important;
        }

        .flick {
            animation: flick 4s steps(1) infinite;
        }

        /* hero skyline — FULL HERO as Gotham city, not a bottom strip */
        #skylineWrap { background: #060607; height: 100%; }
        #realSkylineImg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 52%; filter: brightness(0.38) contrast(1.14) saturate(0.55) hue-rotate(0deg); transition: filter .12s ease, transform .6s ease; }
        #skylineWrap:hover #realSkylineImg { filter: brightness(0.44) contrast(1.12) saturate(0.62); }
        #realSkylineImg.strike { filter: brightness(1.28) contrast(1.0) saturate(0.92) !important; transform: scale(1.01); }
        #skylineWrap.strike { filter: brightness(1.08); }
        #skylineParallax { will-change: transform; height: 100%; }
        #lightningBolt { stroke: #eef6ff; stroke-width: 1.8; fill: none; filter: drop-shadow(0 0 8px rgba(173,216,255,.95)) drop-shadow(0 0 18px rgba(120,180,255,.7)); opacity: 0; stroke-linecap: round; stroke-linejoin: round; }
        #lightningBolt.on { opacity: 1; }
        .thunder-rumble { animation: rumble 0.22s ease-in-out 2; }
        @keyframes rumble { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-1px)} 75%{transform:translateX(1px)} }
        #skylineFog { background: linear-gradient(to top, rgba(6,6,7,.88) 0%, rgba(6,6,7,.44) 38%, transparent 74%); }
        #skylineTip { transition: opacity .2s; pointer-events: none; }
        .crane-light { animation: craneBlink 1.2s steps(1) infinite; }
        @keyframes craneBlink { 50%{opacity:.2} }
        #lightningBoltGlobal.on { opacity: 1 !important; }
        #flash.strike { opacity: 1 !important; }
        body.strike-bg { background: #0e1320 !important; }
        body.strike-bg #realSkylineImg { filter: brightness(1.12) contrast(1.02) saturate(0.9) !important; }
        #skylineCredit { font-size: 9px; letter-spacing:.14em; }

        @keyframes flick {

            0%,
            100% {
                opacity: .35;
            }

            42% {
                opacity: .35;
            }

            43% {
                opacity: .05;
            }

            45% {
                opacity: .4;
            }

            70% {
                opacity: .4;
            }

            71% {
                opacity: .1;
            }

            73% {
                opacity: .35;
            }
        }

        /* marquee */
        .marquee-track {
            display: flex;
            width: max-content;
            animation: marquee 32s linear infinite;
        }

        .marquee:hover .marquee-track {
            animation-play-state: paused;
        }

        @keyframes marquee {
            to {
                transform: translateX(-50%);
            }
        }

        /* level fills */
        .lvl-fill {
            width: 0;
            transition: width 1.3s cubic-bezier(.2, .7, .2, 1);
            transition-delay: var(--d, 0s);
        }

        .reveal.in .lvl-fill {
            width: var(--v);
        }

        /* mission rows */
        .mission .ghost {
            -webkit-text-stroke: 1px rgba(255, 255, 255, .16);
            color: transparent;
            transition: .4s;
        }

        .mission:hover .ghost {
            -webkit-text-stroke: 1px rgba(245, 197, 29, .65);
            transform: translateX(6px);
        }

        .mission .arr {
            transition: .35s cubic-bezier(.2, .7, .2, 1);
            opacity: .35;
        }

        .mission:hover .arr {
            opacity: 1;
            transform: translate(4px, -4px);
            color: #F5C51D;
        }

        /* stamps */
        .stamp {
            border: 1px solid currentColor;
            padding: 2px 8px;
            font-size: 10px;
            letter-spacing: .2em;
            transform: rotate(-2deg);
            display: inline-block;
        }

        /* timeline */
        .tl-node {
            transform: rotate(45deg);
        }

        /* modal / overlays */
        .ov {
            transition: opacity .35s;
        }

        .ov-panel {
            transition: transform .4s cubic-bezier(.2, .7, .2, 1), opacity .35s;
        }

        /* signal activation overlay */
        #signalFx .sig-beam {
            opacity: 0;
            transition: opacity .5s;
        }

        #signalFx.on .sig-beam {
            opacity: 1;
        }

        #signalFx .sig-bat {
            opacity: 0;
            transform: scale(.4);
        }

        #signalFx.on .sig-bat {
            animation: sigpop 2.4s cubic-bezier(.2, .7, .2, 1) forwards;
        }

        @keyframes sigpop {
            0% {
                opacity: 0;
                transform: scale(.4);
            }

            18% {
                opacity: 1;
                transform: scale(1.12);
            }

            30% {
                transform: scale(1);
            }

            85% {
                opacity: 1;
            }

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

        /* toasts */
        .toast {
            transform: translateY(14px);
            opacity: 0;
            transition: .4s cubic-bezier(.2, .7, .2, 1);
        }

        .toast.show {
            transform: none;
            opacity: 1;
        }

        .toast.hide {
            transform: translateX(20px);
            opacity: 0;
        }

        /* shake invalid field */
        .shake {
            animation: shake .4s;
        }

        @keyframes shake {

            0%,
            100% {
                transform: none;
            }

            25% {
                transform: translateX(-6px);
            }

            50% {
                transform: translateX(5px);
            }

            75% {
                transform: translateX(-3px);
            }
        }

        /* scroll cue */
        .scroll-cue::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 0;
            width: 1px;
            height: 100%;
            background: #F5C51D;
            animation: cue 1.8s ease-in-out infinite;
            transform-origin: top;
        }

        @keyframes cue {
            0% {
                transform: scaleY(0);
            }

            45% {
                transform: scaleY(1);
            }

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

        /* mobile menu links */
        .mlink {
            opacity: 0;
            transform: translateY(24px);
            transition: .5s cubic-bezier(.2, .7, .2, 1);
        }

        #mobileMenu.open .mlink {
            opacity: 1;
            transform: none;
        }

        /* ============ INTERACTIVE UPGRADE ============ */
        #spotlight {
            position: fixed;
            inset: 0;
            z-index: 9;
            pointer-events: none;
            background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 197, 29, .08), transparent 60%);
            opacity: 0;
            transition: opacity .6s;
        }

        html.has-spot #spotlight {
            opacity: 1;
        }

        #vignette {
            position: fixed;
            inset: 0;
            z-index: 8;
            pointer-events: none;
            background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
        }

        /* magnetic */
        .mag {
            transition: transform .18s cubic-bezier(.2, .7, .2, 1);
            will-change: transform;
        }

        /* tilt */
        .tilt {
            transform-style: preserve-3d;
            transition: transform .35s cubic-bezier(.2, .7, .2, 1);
        }

        .tilt:hover {
            transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
        }

        .tilt .tilt-pop {
            transform: translateZ(34px);
        }

        /* mission filters */
        .chip {
            border: 1px solid rgba(255, 255, 255, .14);
            color: rgba(255, 255, 255, .55);
            padding: 6px 12px;
            font-size: 10px;
            letter-spacing: .18em;
            transition: .25s;
            cursor: pointer;
            white-space: nowrap;
        }

        .chip:hover {
            border-color: rgba(245, 197, 29, .45);
            color: #F5C51D;
        }

        .chip.on {
            background: #F5C51D;
            color: #060607;
            border-color: #F5C51D;
            font-weight: 700;
        }

        .mission.hide-card {
            display: none;
        }

        /* expertise cards */
        .xcard {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, .08);
            background: rgba(18, 19, 23, .75);
            backdrop-filter: blur(8px);
            transition: border-color .3s, transform .35s cubic-bezier(.2, .7, .2, 1);
        }

        .xcard:hover {
            border-color: rgba(245, 197, 29, .35);
            transform: translateY(-4px);
        }

        .xcard::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(400px circle at var(--lx, 50%) var(--ly, 50%), rgba(245, 197, 29, .12), transparent 60%);
            opacity: 0;
            transition: .35s;
            pointer-events: none;
        }

        .xcard:hover::after {
            opacity: 1;
        }

        /* scan line on portrait */
        .scan {
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #F5C51D, transparent);
            opacity: .7;
            animation: scan 3s linear infinite;
        }

        @keyframes scan {
            0% {
                top: 0
            }

            100% {
                top: 100%
            }
        }

        /* command palette */
        #cmdPalette {
            transition: opacity .25s, transform .25s cubic-bezier(.2, .7, .2, 1);
        }

        #cmdPalette.hidden {
            opacity: 0;
            pointer-events: none;
            transform: scale(.96);
        }

        #cmdPalette:not(.hidden) {
            opacity: 1;
            transform: scale(1);
        }

        /* kbd */
        kbd {
            border: 1px solid rgba(255, 255, 255, .18);
            border-bottom-width: 2px;
            padding: 2px 6px;
            font-size: 10px;
            letter-spacing: .12em;
            background: rgba(255, 255, 255, .06);
        }

        /* hero clock */
        #liveClock {
            font-variant-numeric: tabular-nums;
        }

        /* audio gate */
        #audioGate {
            transition: opacity .45s, transform .45s cubic-bezier(.2, .7, .2, 1);
        }

        #audioGate.hidden {
            opacity: 0;
            pointer-events: none;
            transform: scale(.98);
        }

        #audioGate:not(.hidden) {
            opacity: 1;
            transform: scale(1);
        }

        /* batcomputer mobile hardening — phone-first */
        #term { overflow: hidden; }
        #termOut { scrollbar-width: thin; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; word-break: break-word; overflow-wrap: anywhere; }
        #termOut pre { white-space: pre-wrap; word-break: break-word; }
        @media (pointer: coarse){
            .tilt:hover { transform: none !important; }
            .mag { transition: none; }
            html.has-cursor, html.has-cursor * { cursor: auto !important; }
            #cursorDot, #cursorRing { display: none !important; }
        }
        @media (max-width: 640px){
            #arsenal { padding-top: 3.25rem; padding-bottom: 5.5rem; }
            body { padding-bottom: 54px; }
            #doseCtrl { left: 0; right: 0; bottom: 0; justify-content: space-between; padding: 8px 10px; border-left: 0; border-right: 0; border-bottom: 0; gap: 6px; }
            #doseCtrl input[type="range"]{ flex: 1; min-width: 0; max-width: 92px; }
            #doseCtrl #soundToggle, #doseCtrl #muteFx, #doseCtrl #openPalette { padding: 6px 8px; font-size: 9px; }
            #termOut { max-height: 56vh; }
            #radar { max-width: 100% !important; }
            #signal .frame { padding: 14px; }
            /* missions: phone — stars/ghost pinned TOP, tech chips pinned BOTTOM */
            .mission > div.flex { flex-direction: column !important; gap: 0.75rem !important; }
            .mission .ghost { font-size: 0.82rem !important; width: auto !important; line-height: 1 !important; letter-spacing: .18em; opacity: .85; text-align: left; -webkit-text-stroke: 0 !important; color: rgba(245,197,29,.9) !important; font-family: "JetBrains Mono", monospace; }
            .mission .ghost::before { content: "FILE #"; font-size: 0.62em; letter-spacing: .22em; opacity: .6; margin-right: 4px; vertical-align: middle; }
            .mission h3 { font-size: 1.55rem !important; line-height: 1.05; }
            .mission p.mt-2 { font-size: 13px; line-height: 1.55; }
            .mission .stamp { font-size: 8px !important; padding: 2px 6px !important; }
            .mission .mt-4.flex { margin-top: 0.85rem; gap: 6px !important; }
            .mission .mt-4.flex span { font-size: 9px !important; padding: 4px 8px !important; }
            .mission .arr { display: block !important; position: absolute; right: 10px; top: 12px; width: 18px; height: 18px; }
            #missions article { position: relative; padding-top: 2.25rem !important; padding-bottom: 1.15rem !important; }
        }

        @media (prefers-reduced-motion: reduce) {

            .marquee-track,
            .grain,
            .beam,
            .sig-glow,
            .caret,
            .scroll-cue::after {
                animation: none !important;
            }

            .word i {
                animation-duration: .01s;
            }

            .wipe {
                animation-duration: .01s;
                animation-delay: 0s;
            }
        }