* { margin: 0; padding: 0; box-sizing: border-box; }
    
    html, body {
        overflow: hidden;
        height: 100vh;
        width: 100vw;
    }
    
    #container {
        display: flex;
        width: 100vw;
        max-width: 1400px;
        position: relative;
        height: 100vh;
        margin: 0 auto;
    }
    
    #overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    #overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    
    .panel {
        position: absolute;
        overflow: visible;
        z-index: 999;
        opacity: 0.65;
        transition: transform 0.6s ease, width 0.6s ease, height 0.6s ease,
                    top 0.6s ease, left 0.6s ease, right 0.6s ease,
                    opacity 0.6s ease;
    }
    
    #leftPanel > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: top;
    }

    /* ---- right panel: rebuilt from slices ----
       #rightPanel is a size container so the art box can do the same job
       object-fit:contain used to do (fit the 860x2000 art inside whatever
       box the panel currently is, centered horizontally, top-aligned). */
    #rightPanel { container-type: size; }
    .panel-art {
        position: absolute; top: 0; left: 50%;
        translate: -50% 0;
        width: min(100cqw, calc(100cqh * 0.43));   /* 0.43 = 860 / 2000 */
        aspect-ratio: 860 / 2000;
    }
    .panel-art img { display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
    .rp-top { position: absolute; }
    .rp-btn { position: absolute; }
    .rp-btn img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
    /* opacity of the "on" image is driven by the fading-rollover script below */
    .rp-on { opacity: 0; }
    .rp-hit {
        position: absolute; z-index: 2;
        border-radius: 999px;              /* hit area is the pill, not the whole slice */
        pointer-events: none;              /* while docked, clicks fall through so the panel opens first */
        cursor: pointer;
    }
    #rightPanel.active .rp-hit { pointer-events: auto; }
    .rp-hit:focus-visible { outline: 2px solid #ffcf6b; outline-offset: 3px; }
    
    .panel.active {
        cursor: default !important;
        opacity: 1;
    }
    /* whichever panel is open (or still animating closed) sits in front of the other one */
    .panel.front { z-index: 1000; }

    /* The nav is laid out ONCE, at a fixed design size: the panel art's native
       "screen" area (425 x 1521 px of the 1253 x 1800 image) with a fixed font
       size. site.js then scales the whole thing with a transform to whatever
       size the art currently is. Because the layout never changes, text wraps
       identically and the scrollbar keeps the same proportions at every panel
       size, docked or open (resizing font-size instead made wrapping and the
       scrollbar differ between the two states). */
    #leftPanelContent {
        position: absolute;
        left: 0; top: 0;
        width: 425px; height: 1521px;
        transform-origin: 0 0;
        z-index: 2;
        color: #39ff8a;
        font-family: 'Rajdhani', 'Segoe UI', sans-serif;
        font-size: 22.95pt;
        line-height: 1.6; text-align: left;
        padding: .6em;
        overflow-y: auto; overflow-x: hidden;
        pointer-events: none;
        transition: transform 0.6s ease;
    }
    #leftPanel.active #leftPanelContent { pointer-events: auto; }

    #leftPanelContent::-webkit-scrollbar { width: 22px; }
    #leftPanelContent::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 20px #000;
        background-color: #005500;
        border-radius: 11px;
    }
    #leftPanelContent::-webkit-scrollbar-thumb {
        border-radius: 11px;
        background: #005500;
        -webkit-box-shadow: inset 0 0 5px #000;
    }
    #leftPanelContent::-webkit-scrollbar-thumb:hover { background: #007700; }
    
    /* Left panel text: the nav styling (accordion headings, green/yellow
       colours, Rajdhani) - but every size is in em, relative to
       #leftPanelContent's own font-size, so the JS that scales that font-size
       with the panel art scales all of this along with it. 1em here = 1.05rem
       in the redesign. */
    #leftPanelContent button { font: inherit; }
    #leftPanelContent .nav-group { margin: 0 0 .15em; }
    #leftPanelContent .nav-group-head { display: flex; align-items: stretch; border-radius: .5em; }
    #leftPanelContent .nav-group-link {
        flex: 1 1 auto; padding: .48em;
        font-family: inherit; font-weight: 600; letter-spacing: .02em;
        text-decoration: none;
    }
    #leftPanelContent .nav-group-link:link,
    #leftPanelContent .nav-group-link:visited { color: #3fe07f; }
    #leftPanelContent .nav-group-link:hover,
    #leftPanelContent .nav-group-link:focus-visible,
    #leftPanelContent .nav-group-link:active {
        background: rgba(57, 255, 138, .12);
        color: #9dffc6;
        text-shadow: 0 0 .6em rgba(57, 255, 138, .45);
    }
    #leftPanelContent .nav-group.current .nav-group-link { text-shadow: 0 0 .6em rgba(57, 255, 138, .35); }
    #leftPanelContent .nav-group-toggle {
        flex: none; display: grid; place-items: center; width: 2em;
        border: none; background: none; color: inherit; cursor: pointer; border-radius: .5em;
    }
    #leftPanelContent .nav-group-toggle { color: #3fe07f; }
    #leftPanelContent .nav-group-toggle:hover { background: rgba(57, 255, 138, .12); color: #9dffc6; }
    #leftPanelContent .nav-group-toggle svg { width: .6em; height: .6em; transform: rotate(0deg); transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
    #leftPanelContent .nav-group-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

    #leftPanelContent .nav-links {
        list-style: none; margin: .1em 0 .55em; padding: 0 0 0 1.05em;
        border-left: 1px solid rgba(57, 255, 138, .18);
    }
    #leftPanelContent .nav-links a {
        display: block; padding: .35em .65em; padding-left: calc(.65em + var(--indent, 0) * 1.1em);
        border-radius: .4em; font-family: inherit; font-size: .88em;
        text-decoration: none;
    }
    /* sub-page links: green, and a darker green once visited */
    #leftPanelContent .nav-links a:link { color: #3fe07f; }
    #leftPanelContent .nav-links a:visited { color: #23924f; }
    #leftPanelContent .nav-links a:hover,
    #leftPanelContent .nav-links a:focus-visible,
    #leftPanelContent .nav-links a:active {
        background: rgba(57, 255, 138, .12);
        color: #9dffc6;
        text-shadow: 0 0 .5em rgba(57, 255, 138, .45);
        transform: translateX(.2em);
    }
    /* the page you're on */
    #leftPanelContent .nav-links a.active:link,
    #leftPanelContent .nav-links a.active:visited { color: #b8ffd6; background: rgba(57, 255, 138, .2); box-shadow: inset 2px 0 0 #39ff8a; }
    #leftPanelContent .nav-links a.active:hover,
    #leftPanelContent .nav-links a.active:focus-visible { color: #e6fff0; background: rgba(57, 255, 138, .28); }
    /* headings and entries whose page hasn't been built yet: shown, not linked */
    #leftPanelContent .nav-group-label {
        flex: 1 1 auto; padding: .48em;
        font-weight: 600; letter-spacing: .02em;
        color: rgba(223, 233, 243, .6); cursor: default;
    }
    #leftPanelContent .nav-links .soon {
        display: block; padding: .35em .65em; padding-left: calc(.65em + var(--indent, 0) * 1.1em);
        font-size: .88em; color: #7f9388; cursor: default; opacity: .55;
    }
    #leftPanelContent .nav-links .soon::after {
        content: "soon"; float: right;
        font-size: .68em; letter-spacing: .08em;
        border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: .05em .4em;
    }

    /* "Auto-Collapse" switch, pinned to the bottom of the link list */
    #leftPanelContent .nav-options {
        position: sticky; bottom: 0; z-index: 2; margin-top: .6em; padding: .9em .5em .4em;
        background: linear-gradient(180deg, rgba(2, 10, 6, 0), rgba(2, 10, 6, .92) 45%);
    }
    #leftPanelContent .nav-switch { display: flex; align-items: center; gap: .6em; cursor: pointer; font-size: .82em; color: #3fe07f; user-select: none; }
    #leftPanelContent .nav-switch:hover { color: #9dffc6; }
    #leftPanelContent .nav-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
    #leftPanelContent .nav-switch-track {
        position: relative; flex: none; width: 2.3em; height: 1.2em; border-radius: 1em;
        background: #06170d; border: 1px solid rgba(57, 255, 138, .45); transition: background .2s, box-shadow .2s;
    }
    #leftPanelContent .nav-switch-track::after {
        content: ""; position: absolute; top: .12em; left: .14em; width: .84em; height: .84em; border-radius: 50%;
        background: #3fe07f; opacity: .55; transition: transform .2s, opacity .2s;
    }
    #leftPanelContent .nav-switch input:checked + .nav-switch-track { background: rgba(57, 255, 138, .2); box-shadow: 0 0 .6em rgba(57, 255, 138, .4); }
    #leftPanelContent .nav-switch input:checked + .nav-switch-track::after { transform: translateX(1.08em); opacity: 1; }
    #leftPanelContent .nav-switch input:focus-visible + .nav-switch-track { outline: 2px solid #9dffc6; outline-offset: 2px; }

    .tab-area {
        position: fixed;
        cursor: pointer;
        z-index: 1001;
        border-radius: 50%;
        background: transparent;
        border: 2px solid transparent;
    }
    
    @media (min-width: 901px) {
        #leftPanel {
            left: 0; top: 0;
            width: 300px; height: auto;
            transform: translateY(150px);
            cursor: pointer;
        }
        #leftPanel img { height: auto; }
        #leftTab { display: none; }
        
        #rightPanel {
            right: 0; top: 0;
            width: 225px; height: auto;
            aspect-ratio: 860 / 2000;
            transform: translateY(89px);
            cursor: pointer;
        }
        #rightTab { display: none; }
        
        #mainContent {
            left: calc(250px + max(0px, 50px - max(0px, 100vw - 1400px) / 2));
            right: calc(150px + max(0px, 75px - max(0px, 100vw - 1400px) / 2));
            width: auto;
        }

        #leftPanel.active img  { object-fit: contain; object-position: left center; }
    }
    
    @media (max-width: 900px) {
        .panel { position: fixed; }
        
        #leftPanel {
            left: 0; top: 0;
            width: 240px; height: 345px;
            transform: translateX(calc(-100% + 80px));
        }
        #leftTab {
            top: 0; left: -10px;
            width: 100px; height: 100px;
        }
        
        #rightPanel {
            right: 0; top: -70px;
            width: 206px; height: 479px;
            transform: translateX(calc(100% - 80px));
        }
        #rightTab {
            top: 0; right: 0;
            width: 100px; height: 100px;
        }
        
        #mainContent {
            left: 0; right: 0;
        }
        
        .panel.active {
            width: 100vw !important;
            height: 100vh !important;
            transform: translateX(0) !important;
            top: 0 !important;
            opacity: 1;
        }
    }
    
    /* title bar - glass bar, rounded gold-bordered
       title graphic, off/on cross-fade */
    .site-header {
        position: sticky; top: 0; z-index: 40;
        display: flex; align-items: center; justify-content: center;
        padding: .6rem .75rem;
        background: rgba(7, 10, 16, .94);
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
        box-shadow: 0 0 40px rgba(0, 0, 0, .5);
    }
    .brand {
        position: relative; display: block;
        flex: 1 1 auto; min-width: 0; max-width: 640px;
        aspect-ratio: 700 / 103;
        border-radius: 12px; overflow: hidden;
        border: 1px solid #7a5f22;
        box-shadow: 0 0 22px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .4);
        background-image: url('../img/buttons/top_off.gif');
        background-size: cover; background-position: center;
    }
    .brand .bright {
        position: absolute; inset: 0;
        background-image: url('../img/buttons/top_on.gif');
        background-size: cover; background-position: center;
        opacity: 0;   /* driven by the fading-rollover script */
    }
    @media (max-width: 900px) {
        /* the two round tabs sit over each end of the bar on narrow screens,
           so keep the title graphic between them instead of underneath */
        .site-header { min-height: 88px; padding-left: 88px; padding-right: 88px; }
    }

    /* a dark void behind, with the artwork texture carried by the
       content panels themselves (see .glass-panel in styles.css) */
    #mainContent {
        position: absolute;
        top: 0; bottom: 0;
        padding: 0;
        z-index: 1;
        overflow-y: auto; overflow-x: hidden;
        background-color: #03050a;
        /* the original site's artwork at its own size (not stretched), fixed in place while the panels scroll over it;
           bg-seamless.jpg is bg.jpg made to tile smoothly top to bottom */
        background-image: url('../img/bg/bg-seamless.jpg');
        background-repeat: repeat;
        background-size: auto;
        background-position: left top;
        background-attachment: fixed;
    }

/* ==========================================================================
   Ambient effects (js/fx.js and the right-panel glows)
   ========================================================================== */
/* digital rain inside the left panel's screen (the art's own green code sits underneath it) */
#matrixRain {
    position: absolute; left: 15.8%; top: 7%; width: 35.5%; height: 85.6%;
    pointer-events: none; opacity: .8; border-radius: 3%;
}
#leftPanelContent { z-index: 1; }
/* the round phone tab: code falls inside the ring (positions are fractions of the 1253 x 1800 art) */
#matrixTab { position: absolute; left: 65.4%; top: 3.06%; width: 31.8%; height: 25%; pointer-events: none; opacity: .9; border-radius: 50%; mix-blend-mode: screen; }

/* right panel: glowing monitors, blinking lights, the Zion sign's pulse. Positions are percentages of the 860 x 2000 art. */
.rp-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.rp-fx i { position: absolute; display: block; mix-blend-mode: screen; }
.fx-zion {
    background: radial-gradient(ellipse at 47% 52%, rgba(90, 255, 255, .55) 0%, rgba(60, 220, 255, .3) 38%, rgba(40, 180, 255, 0) 68%);
    animation: fx-zion 4.6s ease-in-out infinite;
}
.fx-spark {
    background: radial-gradient(circle, rgba(220, 255, 255, .95) 0%, rgba(80, 210, 255, .45) 35%, rgba(60, 200, 255, 0) 65%);
    opacity: 0; animation: fx-spark 6.3s linear infinite;
}
.fx-mon { overflow: hidden; }
.fx-glow { border-radius: 50%; filter: blur(9px); }
.glow-orange { background: radial-gradient(ellipse at 50% 50%, rgba(255, 150, 50, .5), rgba(255, 130, 30, 0) 70%); animation: fx-flicker-o 5.2s steps(1) infinite; }
.glow-blue { background: radial-gradient(ellipse at 50% 50%, rgba(80, 150, 255, .5), rgba(60, 130, 255, 0) 70%); animation: fx-flicker-b 6.1s steps(1) infinite; }
.fx-mon b { position: absolute; left: 0; right: 0; height: 22%; top: -25%; }
.fx-orange { background: rgba(255, 150, 40, .16); clip-path: polygon(3.3% 2.4%, 95.7% 28.7%, 92.4% 98.2%, 3.3% 88.6%); animation: fx-flicker-o 5.2s steps(1) infinite; }
.fx-orange b { transform-origin: 0 0; background: linear-gradient(180deg, rgba(255, 220, 150, 0), rgba(255, 230, 170, .6), rgba(255, 220, 150, 0)); animation: fx-scan-o 3.4s linear infinite; }
.fx-blue { background: rgba(70, 150, 255, .16); border-radius: 6px; animation: fx-flicker-b 6.1s steps(1) infinite; }
.fx-blue b { transform-origin: 0 0; background: linear-gradient(180deg, rgba(170, 215, 255, 0), rgba(190, 225, 255, .6), rgba(170, 215, 255, 0)); animation: fx-scan-b 4.1s linear infinite; }
.fx-led { border-radius: 50%; }
.led-green  { background: radial-gradient(circle, rgba(110, 255, 140, .95) 0%, rgba(60, 255, 110, .5) 40%, rgba(60, 255, 110, 0) 70%); animation: fx-blink 3.2s ease-in-out infinite; }
.led-orange { background: radial-gradient(circle, rgba(255, 190, 90, .95) 0%, rgba(255, 140, 40, .5) 40%, rgba(255, 140, 40, 0) 70%); animation: fx-blink 1.7s ease-in-out infinite .4s; }
.led-yellow { background: radial-gradient(circle, rgba(255, 245, 120, .95) 0%, rgba(255, 220, 60, .5) 40%, rgba(255, 220, 60, 0) 70%); animation: fx-blink 2.3s ease-in-out infinite 1.1s; }
@keyframes fx-zion    { 0%, 100% { opacity: .4; } 50% { opacity: 1; } 62% { opacity: .75; } 66% { opacity: .95; } }
@keyframes fx-spark   { 0%, 84%, 100% { opacity: 0; } 86% { opacity: 1; } 88% { opacity: .2; } 90% { opacity: .9; } 93% { opacity: 0; } }
@keyframes fx-scan-o  { from { top: -25%; transform: skewY(27deg); } to { top: 100%; transform: skewY(11deg); } }   /* the orange screen is slanted (about 27deg at the top, 11deg at the bottom) */
@keyframes fx-scan-b  { from { top: -25%; transform: skewY(-1.4deg); } to { top: 100%; transform: skewY(-1deg); } }
@keyframes fx-flicker-o { 0%, 100% { opacity: 1; } 41% { opacity: .55; } 43% { opacity: 1; } 78% { opacity: .75; } 80% { opacity: 1; } }
@keyframes fx-flicker-b { 0%, 100% { opacity: 1; } 27% { opacity: .6; } 29% { opacity: 1; } 65% { opacity: .8; } 67% { opacity: 1; } }
@keyframes fx-blink   { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* lightning around the Zion sign: short jagged arcs that flash at different moments */
.rp-fx .fx-bolts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-bolts .bolt { fill: none; stroke: #e6ffff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 5px #4fd8ff) drop-shadow(0 0 12px #2aa8ff); }
.bolt.b1 { animation: fx-bolt 5.4s linear infinite; }
.bolt.b2 { animation: fx-bolt 7.1s linear infinite 1.3s; }
.bolt.b3 { animation: fx-bolt 6.3s linear infinite 2.6s; }
.bolt.b4 { animation: fx-bolt 4.7s linear infinite .8s; }
.bolt.b5 { animation: fx-bolt 8.2s linear infinite 3.4s; stroke-width: 2.6; }
.bolt.b6 { animation: fx-bolt 5.9s linear infinite 4.1s; }
.bolt.b7 { animation: fx-bolt 9.3s linear infinite 5.2s; }
@keyframes fx-bolt { 0%, 86%, 100% { opacity: 0; } 87% { opacity: 1; } 88.5% { opacity: .15; } 90% { opacity: .95; } 92% { opacity: 0; } 95% { opacity: .6; } 96% { opacity: 0; } }
.fx-spark.s2 { animation-duration: 7.7s; animation-delay: 2.1s; }
.fx-spark.s3 { animation-duration: 5.1s; animation-delay: 3.3s; }

/* the hovercraft layer: fixed and behind everything (z-index -1). The content column hides the craft, and it shows through the
   transparent pixels of the side panels. */
#hovercraftLayer { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#hovercraft svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); animation: hc-bob 2.4s ease-in-out infinite; }
#hovercraft .hc-rings { animation: hc-pulse 1.3s ease-in-out infinite; }
#hovercraft .hc-thrust { animation: hc-pulse 0.7s ease-in-out infinite; }
@keyframes hc-bob   { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes hc-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@media (max-width: 900px) { #hovercraftLayer { display: none; } }
@media (prefers-reduced-motion: reduce) { .rp-fx i, .rp-fx b { animation: none !important; } .fx-zion { opacity: .6; } .fx-spark { opacity: 0; } .led-green, .led-orange, .led-yellow { opacity: .8; } }

/* hovercraft scenes (js/hovercraft.js) */
.hc-sprite { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
.hc-sprite svg { display: block; width: 100%; height: auto; overflow: visible; }
.hc-craft .hc-inner { animation: hc-bob 2.6s ease-in-out infinite; }
.hc-craft .hc-rings { transition: opacity .3s; animation: hc-pulse 1.3s ease-in-out infinite; }
.hc-craft .hc-thrust { animation: hc-pulse .7s ease-in-out infinite; }
.hc-off .hc-rings { opacity: .05 !important; animation: none; }
.hc-off .hc-thrust, .hc-off .hc-nose, .hc-off .hc-arc { opacity: 0 !important; animation: none; }
@keyframes hc-bob   { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes hc-pulse { 0%, 100% { opacity: .68; } 50% { opacity: 1; } }
/* lightning that flashes around the ring lights ("pads") */
.hc-arc { fill: none; stroke: #eaffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 2px #59d4ff); }
.hc-arc.a1 { animation: hc-zap 2.7s linear infinite; }
.hc-arc.a2 { animation: hc-zap 3.4s linear infinite .9s; }
.hc-arc.a3 { animation: hc-zap 4.1s linear infinite 1.7s; }
@keyframes hc-zap { 0%, 84%, 100% { opacity: 0; } 85% { opacity: 1; } 87% { opacity: .15; } 89% { opacity: 1; } 92% { opacity: 0; } }
/* sentinels (a rendered 3D model with a few overlays) */
.sn-wrap { position: relative; }
.hc-sprite .sn-img { display: block; width: 100%; height: auto; transform-origin: 78% 50%; animation: sn-sway 1.7s ease-in-out infinite alternate; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.hc-sprite .sn-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
@keyframes sn-sway { from { transform: rotate(-1.4deg) skewY(-1.2deg); } to { transform: rotate(1.4deg) skewY(1.2deg); } }
.hc-sentinel .sn-eyes circle { fill: #ff3030; filter: drop-shadow(0 0 6px #ff2020); animation: hc-pulse .9s ease-in-out infinite; }
.hc-sentinel .sn-radar { opacity: 0; transform-box: view-box; transform-origin: 548px 176px; transform: scaleX(0); transition: transform .5s ease-out, opacity .3s; }
.hc-sentinel.radar-on .sn-radar { opacity: 1; transform: scaleX(1); }
.sn-sweep { transform-box: view-box; transform-origin: 590px 176px; animation: sn-sweep .9s ease-in-out infinite alternate; }
@keyframes sn-sweep { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
/* bullets, sparks, explosions, the bomb */
.hc-fx { position: absolute; pointer-events: none; }
.hc-bullet { width: 18px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 220, 140, 0), #ffe9a8, #fff); box-shadow: 0 0 6px 1px #ffd27a; }
.hc-spark { border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffd27a 35%, rgba(255, 140, 40, 0) 70%); }
.hc-boom { border-radius: 50%; background: radial-gradient(circle, #fff 0%, #ffd27a 22%, #ff7a2a 48%, rgba(255, 60, 20, 0) 72%); }
.hc-debris { width: 4px; height: 4px; border-radius: 50%; background: #ffb060; box-shadow: 0 0 5px #ff7a2a; }
.hc-bomb { left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8794a1, #161d25); box-shadow: 0 0 10px 3px rgba(255, 60, 60, .75); }
.hc-ping { border-radius: 50%; border: 2px solid rgba(255, 70, 70, .9); box-shadow: 0 0 12px rgba(255, 60, 60, .6); }
/* the EMP pulse: rings over the whole window */
.hc-emp { position: fixed; inset: 0; z-index: 6000; pointer-events: none; overflow: hidden; }
.hc-emp-ring { position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 4px solid rgba(150, 220, 255, .9);
    box-shadow: 0 0 30px 6px rgba(80, 170, 255, .6), inset 0 0 30px 4px rgba(80, 170, 255, .4); }

/* the EMP switches the website off: dark, inert, and every animation paused (js/hovercraft.js) */
#container.mr-off { filter: brightness(.3) saturate(.7); pointer-events: none; }
#container.mr-off *, #container.mr-off *::before, #container.mr-off *::after { animation-play-state: paused !important; }