body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #000; overflow: hidden; font-family: 'Press Start 2P', monospace; user-select: none; cursor: none !important; touch-action: none; }
        #glcanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; cursor: none !important; display: block; }
        #uicanvas { display: none; }
        #controls { display: none; position: absolute; top: 20px; right: 20px; width: 90%; max-width: 320px; max-height: min(calc(100vh - 40px), calc(100dvh - 40px)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: rgba(17, 10, 26, 0.92); border: 2px solid #ff3366; color: #fff; z-index: 10; padding: 15px; font-size: 10px; box-shadow: 0 0 15px rgba(255, 51, 102, 0.3); backdrop-filter: blur(4px); cursor: default; pointer-events: auto; }
        #controls * { cursor: default; }
        #controls input, #controls select { cursor: pointer; }
        #controls-close {
            display: none; width: 100%; margin: 0 0 12px 0; padding: 12px 10px; border: 2px solid #00e5ff; background: #0a0512;
            color: #00e5ff; font-family: 'Press Start 2P', monospace; font-size: 9px; touch-action: manipulation;
        }
        #controls-close:active { background: #00e5ff; color: #0a0512; }
        @media (max-width: 999px) {
            #controls {
                left: 10px; right: 10px; top: max(10px, env(safe-area-inset-top, 0px)); width: auto; max-width: none;
                max-height: min(calc(100vh - 20px), 720px);
                max-height: min(calc(100dvh - 20px), 720px);
                overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
                z-index: 40; padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)) 12px; font-size: 11px;
            }
            #controls-close { display: block; }
            #controls .control-group label { flex-wrap: wrap; row-gap: 6px; }
            #controls select { font-size: 9px !important; padding: 10px 8px !important; min-height: 44px; line-height: 1.4; }
            #controls .control-group input[type="range"] { min-height: 36px; }
        }
        .control-group { margin-bottom: 12px; }
        .control-group label { display: flex; justify-content: space-between; margin-bottom: 5px; color: #00e5ff; }
        
        /* Retro Range Sliders */
        .control-group input[type="range"] { -webkit-appearance: none; width: 100%; background: transparent; margin: 8px 0; }
        .control-group input[type="range"]:focus { outline: none; }
        .control-group input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: #007788; border: 1px solid #111; }
        .control-group input[type="range"]::-webkit-slider-thumb { height: 18px; width: 12px; border-radius: 0; background: #ff3366; cursor: pointer; -webkit-appearance: none; margin-top: -7px; border: 2px solid #fff; }
        
        /* Checkbox Override */
        .control-group input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 2px solid #ff3366; background: #0a0512; position: relative; margin: 0; }
        .control-group input[type="checkbox"]:checked { background: #ff3366; }
        .control-group input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 3px; top: 3px; width: 4px; height: 4px; background: #fff; }

        .header { text-align: center; border-bottom: 1px dashed #ff3366; padding-bottom: 10px; margin-bottom: 15px; color: #fff; line-height: 1.4; }
        #controls::before { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%; pointer-events: none; z-index: -1; }

        #mobile-controls { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
        #mobile-controls.visible { display: block; }
        #mobile-controls .mc-pad { pointer-events: auto; display: flex; flex-direction: column; gap: 8px; align-items: stretch; max-width: min(100%, 400px); margin: 0 auto; }
        #mobile-controls .mc-row { display: flex; gap: 8px; justify-content: center; align-items: stretch; width: 100%; }
        #mobile-controls .mc-row.mc-row-slots .mc-btn { flex: 1; min-width: 0; }
        #mobile-controls .mc-btn {
            touch-action: manipulation; -webkit-user-select: none; user-select: none;
            min-height: 56px; padding: 8px 6px; border: 2px solid #ff3366; background: rgba(17, 10, 26, 0.94);
            color: #00e5ff; font-family: 'Press Start 2P', monospace; font-size: 10px; line-height: 1.25; box-shadow: 0 0 12px rgba(255, 51, 102, 0.3);
        }
        #mobile-controls .mc-btn:active { background: #ff3366; color: #fff; }
        #mobile-controls .mc-btn.mc-wide { width: 100%; min-height: 58px; font-size: 11px; }
        #mobile-controls .mc-row-main { display: flex; flex-direction: row; gap: 8px; width: 100%; align-items: stretch; }
        #mobile-controls #mc-space { flex: 1; min-width: 0; width: auto; }
        #mobile-controls #mc-backtick { flex: 0 0 56px; min-width: 56px; font-size: 14px; padding-left: 4px; padding-right: 4px; }
        #mobile-controls #mc-backtick.mc-dev-solo { flex: 1; min-width: 0; width: 100%; font-size: 11px; }
        #mobile-controls .mc-row-main.mc-row-main--dev-right #mc-backtick { margin-left: auto; }

        /* MENU footer is drawn flush to the bottom of the canvas; lift touch controls so they sit above that strip (not on top of it). */
        @media (max-width: 999px) {
            #mobile-controls.visible {
                /* ~2 lines of footer (9px Press Start) + gap; keeps pads above the MENU footer strip */
                bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
            }
        }

        /* Micro-DOM source tree: visually hidden so getComputedStyle + @media resolve --ui-* */
        #ui-dom.ui-dom-source {
            position: fixed; left: 0; top: 0; width: 100%; height: 100%;
            opacity: 0; pointer-events: none; z-index: -1; overflow: hidden;
        }

        /* Flex containers: real flexbox so getComputedStyle(flex-direction, gap, justify-content, align-items) matches the canvas engine */
        #ui-dom ui-page,
        #ui-dom ui-frame,
        #ui-dom ui-box {
            display: flex;
            box-sizing: border-box;
        }
        #ui-dom ui-text,
        #ui-dom ui-button,
        #ui-dom ui-typewriter,
        #ui-dom ui-game-card,
        #ui-dom ui-game-player,
        #ui-dom ui-sun {
            display: block;
            box-sizing: border-box;
        }

        /* Do not inherit width/height tokens to descendants (fixes menu header overlap + missing subtitle) */
        @property --ui-width {
            syntax: "*";
            inherits: false;
            initial-value: auto;
        }
        @property --ui-height {
            syntax: "*";
            inherits: false;
            initial-value: auto;
        }
        @property --ui-flex-direction {
            syntax: "*";
            inherits: false;
            initial-value: row;
        }
        /* Page/frame set --ui-padding on themselves only; must NOT inherit to ui-text (was +80px phantom line height per logo row). */
        @property --ui-padding {
            syntax: "*";
            inherits: false;
            initial-value: 0;
        }
        /* Text line box: em multiple of --ui-size (layout + draw). Baseline: top | middle for canvas. */
        @property --ui-leading {
            syntax: "<number>";
            inherits: false;
            initial-value: 1.5;
        }
        @property --ui-text-baseline {
            syntax: "*";
            inherits: false;
            initial-value: middle;
        }

        /* Map HTML flex-direction= to tokens + native flex-direction (computed style fallback) */
        #ui-dom ui-page[flex-direction="column"] { --ui-flex-direction: column; flex-direction: column; }
        #ui-dom ui-box[flex-direction="column"],
        #ui-dom ui-frame[flex-direction="column"] { --ui-flex-direction: column; flex-direction: column; }
        #ui-dom ui-box[flex-direction="row"],
        #ui-dom ui-frame[flex-direction="row"] { --ui-flex-direction: row; flex-direction: row; }

        /* HTML justify= / align= → native flex (so getComputedStyle can replace attrs when you migrate to classes) */
        #ui-dom ui-page[justify="start"], #ui-dom ui-frame[justify="start"], #ui-dom ui-box[justify="start"] { justify-content: flex-start; }
        #ui-dom ui-page[justify="center"], #ui-dom ui-frame[justify="center"], #ui-dom ui-box[justify="center"] { justify-content: center; }
        #ui-dom ui-page[justify="end"], #ui-dom ui-frame[justify="end"], #ui-dom ui-box[justify="end"] { justify-content: flex-end; }
        #ui-dom ui-page[justify="space-between"], #ui-dom ui-frame[justify="space-between"], #ui-dom ui-box[justify="space-between"] { justify-content: space-between; }
        #ui-dom ui-page[align="start"], #ui-dom ui-frame[align="start"], #ui-dom ui-box[align="start"] { align-items: flex-start; }
        #ui-dom ui-page[align="center"], #ui-dom ui-frame[align="center"], #ui-dom ui-box[align="center"] { align-items: center; }
        #ui-dom ui-page[align="end"], #ui-dom ui-frame[align="end"], #ui-dom ui-box[align="end"] { align-items: flex-end; }

        /* --- Layout tokens (--ui-*) resolved by getLayoutProp; @media matches JS isMobile --- */
        #ui-dom ui-page#MENU {
            --ui-padding: 40;
            --ui-width: 100%; --ui-height: 100%;
            --ui-flex-direction: column; --ui-justify: start; --ui-align: center;
            width: 100%; height: 100%;
            flex-direction: column; justify-content: flex-start; align-items: center;
        }
        #ui-dom ui-page.ui-page-game {
            --ui-padding: 80;
            --ui-width: 100%; --ui-height: auto; --ui-justify: start; --ui-align: center;
            --ui-flex-direction: column;
            width: 100%; min-height: 100%; height: auto;
            justify-content: flex-start; align-items: center;
        }
        /* Game detail: intrinsic column height so maxScrollY & wheel/touch match MENU / ABOUT */
        #ui-dom ui-page.ui-page-game ui-frame.ui-frame-game {
            --ui-flex-direction: column;
            --ui-height: auto; --ui-justify: start; --ui-gap: 40;
            min-height: 100%; height: auto;
            justify-content: flex-start;
            gap: 40px;
        }
        #ui-dom ui-page.ui-page-doc {
            --ui-padding: 100;
            --ui-width: 100%; --ui-height: auto; --ui-justify: start; --ui-align: center;
            --ui-flex-direction: column;
            width: 100%; min-height: 100%; height: auto;
            justify-content: flex-start; align-items: center;
        }
        /* External redirect stubs: solid black (no menu chrome behind transition). */
        #ui-dom ui-page#PAGE_GITHUB,
        #ui-dom ui-page#PAGE_TWITTER {
            --ui-padding: 0;
            --ui-flex-direction: column;
            flex-direction: column;
            width: 100%;
            min-height: 100vh;
            height: 100vh;
            background-color: #000;
            color: #000;
            justify-content: center;
            align-items: center;
        }

        #ui-dom ui-frame.ui-frame-game {
            --ui-padding: 60; --ui-align: start;
            --ui-flex-direction: column; --ui-justify: space-between; --ui-width: 100%; --ui-height: 100%;
            flex-direction: column; justify-content: space-between; align-items: flex-start;
            width: 100%; height: 100%;
        }
        #ui-dom ui-page.ui-page-doc ui-frame { --ui-padding: 60; --ui-align: start; align-items: flex-start; }
        /* Doc pages: grow past viewport so wheel + scrollbar work */
        #ui-dom ui-page.ui-page-doc ui-frame.ui-frame-game {
            --ui-flex-direction: column;
            --ui-height: auto; --ui-justify: start; --ui-gap: 40;
            min-height: 100%; height: auto;
            justify-content: flex-start;
            gap: 40px;
        }
        /* scroll-shell: body `ui-frame` is a direct child of `ui-page` (footer is a sibling); drop space-between when the frame is the sole scroll column. */
        #ui-dom ui-page[scroll-shell] ui-frame.ui-frame-game {
            --ui-justify: start;
            justify-content: flex-start;
        }

        #ui-dom ui-box.menu-hero {
            --ui-flex-direction: row; flex-direction: row; --ui-width: 1600; --ui-margin: 0 0 40 0;
            --ui-justify: space-between; --ui-align: center;
            justify-content: space-between; align-items: center;
        }
        #ui-dom ui-button.menu-icon-btn {
            --ui-width: 52;
            /* DOM fallback flex uses real px; --ui-* alone is for the canvas measurer. */
            width: 52px;
            min-width: 52px;
            min-height: 0;
            flex-shrink: 0;
            box-sizing: border-box;
            background-color: rgba(10, 5, 18, 0.35);
            background-repeat: no-repeat;
            background-position: center;
        }
        #ui-dom ui-button.menu-icon-x {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e7e9ea' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
            background-size: 72%;
        }
        #ui-dom ui-button.menu-icon-github {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7e9ea' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-5 0C8.27.65 7.09 1 7.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'/%3E%3C/svg%3E");
            background-size: 68%;
        }
        #ui-dom ui-box.menu-brand {
            --ui-flex-direction: row; flex-direction: row; --ui-align: center; --ui-gap: 20; --ui-margin: 0;
            align-items: center; gap: 20px;
        }
        #ui-dom ui-box.menu-logo-stack { --ui-flex-direction: column; flex-direction: column; --ui-align: start; --ui-gap: 0; align-items: flex-start; gap: 0; }
        #ui-dom ui-box.menu-nav {
            --ui-flex-direction: row; flex-direction: row; --ui-gap: 10; gap: 10px;
            flex-wrap: wrap;
            --ui-justify: center; justify-content: center;
            --ui-align: center; align-items: center;
        }
        /* Stretch cross-axis so empty icon tiles match doc-link band height (DOM fallback + flex). */
        #ui-dom ui-page#MENU ui-box.menu-nav {
            align-items: stretch;
        }
        #ui-dom ui-page#MENU ui-box.menu-nav ui-button.menu-doc-link {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #ui-dom ui-text.menu-featured {
            --ui-size: 24; --ui-margin: 20 0 30 0;
            color: #00e5ff; margin: 20px 0 30px 0; text-align: center;
        }
        #ui-dom ui-box.menu-portfolio {
            --ui-flex-direction: column; flex-direction: column; --ui-gap: 0; --ui-margin: 0 0 40 0;
            gap: 0; margin: 0 0 40px 0;
        }
        /* Single flex child of .menu-portfolio: 3×3 wrap on wide screens (canvas layout matches flex-wrap). */
        #ui-dom ui-box.menu-portfolio-stack {
            --ui-flex-direction: row;
            --ui-flex-wrap: wrap;
            --ui-width: 1600;
            --ui-gap: 40;
            --ui-justify: center;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1600px;
            max-width: 100%;
            gap: 40px;
            justify-content: center;
            box-sizing: border-box;
        }
        #ui-dom ui-box.menu-footer {
            --ui-flex-direction: row;
            flex-direction: row;
            flex-wrap: nowrap;
            --ui-gap: 16;
            gap: 16px;
            --ui-width: 1600;
            --ui-margin: auto 0 0 0;
            --ui-justify: space-between;
            --ui-align: center;
            justify-content: space-between;
            align-items: center;
            margin: auto 0 0 0;
            max-width: 100%;
            box-sizing: border-box;
        }
        /* scroll-shell pins footer in layout; drop flex “push to bottom” margin */
        #ui-dom ui-page#MENU[scroll-shell] ui-box.menu-footer {
            --ui-margin: 0 0 0 0;
            margin: 0;
        }
        #ui-dom ui-text.menu-footer-copy {
            --ui-size: 11;
            --ui-width: auto;
            --ui-align: right;
            color: #666666;
            text-align: right;
            white-space: nowrap;
            flex: 0 0 auto;
            max-width: 48%;
        }
        #ui-dom ui-text.menu-footer-hint {
            --ui-size: 11;
            --ui-width: auto;
            --ui-align: left;
            color: #888888;
            text-align: left;
            white-space: nowrap;
            flex: 1 1 auto;
            min-width: 0;
            max-width: none;
        }

        #ui-dom ui-page#MENU ui-sun { --ui-radius: 40; }
        #ui-dom ui-text.logo-title {
            --ui-size: 36; --ui-width: 100%; --ui-align: left; --ui-leading: 1.08; --ui-text-baseline: top;
            color: #ffffff; width: 100%; text-align: left;
        }
        #ui-dom ui-text.logo-sub {
            --ui-size: 14; --ui-width: 100%; --ui-align: left; --ui-leading: 1.08; --ui-text-baseline: top; --ui-padding: 13 0 0 0;
            color: #ff3366; width: 100%; text-align: left;
        }
        /* Doc routes: wide screens = bracket text; icon tiles only in @media (max-width: 999px) (matches JS isMobile) */
        #ui-dom ui-button.menu-doc-link {
            --ui-size: 26;
            --ui-leading: 1.72;
            --ui-padding: 10 14 10 14;
            font-size: 26px;
            line-height: 1.72;
            background-color: transparent;
            background-image: none;
        }
        /* Inset glyphs so CRT borders do not clip; keep in sync with canvas MENU_HDR_SOCIAL_* tuning. */
        #ui-dom ui-page#MENU ui-box.menu-nav ui-button.menu-icon-x,
        #ui-dom ui-page#MENU ui-box.menu-nav ui-button.menu-icon-github {
            padding: 4px;
            background-origin: content-box;
            box-sizing: border-box;
        }
        #ui-dom ui-page#MENU ui-box.menu-nav ui-button.menu-icon-x {
            background-size: 62%;
        }
        #ui-dom ui-page#MENU ui-box.menu-nav ui-button.menu-icon-github {
            background-size: 58%;
        }
        #ui-dom ui-game-card { --ui-width: 380; --ui-height: 480; width: 380px; height: 480px; box-sizing: border-box; }

        /* Portfolio cards: --card-icon / --card-title (canvas). Raster art optional: set --card-src / --card-hover-src to url(...) if assets exist. */
        #ui-dom ui-game-card#game1 {
            --card-icon: cyber;
            --card-title: CYBER_RUN;
        }
        #ui-dom ui-game-card#game2 {
            --card-icon: void;
            --card-title: VOID_STAR;
        }
        #ui-dom ui-game-card#game3 {
            --card-icon: neon;
            --card-title: NEON_DRIFT;
        }
        #ui-dom ui-game-card#game4 {
            --card-icon: rpg;
            --card-title: CRYPTO_QUEST;
        }
        #ui-dom ui-game-card#game5 {
            --card-icon: mech;
            --card-title: MECHA_STRIKE;
        }
        #ui-dom ui-game-card#game6 {
            --card-icon: terminal;
            --card-title: SYS_BREACH;
        }
        #ui-dom ui-game-card#game7 {
            --card-icon: asteroid;
            --card-title: ASTRO_MINER;
        }
        #ui-dom ui-game-card#game8 {
            --card-icon: skull;
            --card-title: NIGHT_TERROR;
        }
        #ui-dom ui-game-card#game9 {
            --card-icon: wave;
            --card-title: SYNTH_BEAT;
        }

        #ui-dom ui-game-player { --ui-width: 800; --ui-height: 450; width: 800px; height: 450px; box-sizing: border-box; }

        #ui-dom ui-page#PAGE_GAME_CYBER ui-game-player { --player-icon: cyber; }
        #ui-dom ui-page#PAGE_GAME_VOID ui-game-player { --player-icon: void; }
        #ui-dom ui-page#PAGE_GAME_NEON ui-game-player { --player-icon: neon; }
        #ui-dom ui-page#PAGE_GAME_CRYPTO ui-game-player { --player-icon: rpg; }
        #ui-dom ui-page#PAGE_GAME_MECHA ui-game-player { --player-icon: mech; }
        #ui-dom ui-page#PAGE_GAME_BREACH ui-game-player { --player-icon: terminal; }
        #ui-dom ui-page#PAGE_GAME_ASTRO ui-game-player { --player-icon: asteroid; }
        #ui-dom ui-page#PAGE_GAME_TERROR ui-game-player { --player-icon: skull; }
        #ui-dom ui-page#PAGE_GAME_SYNTH ui-game-player { --player-icon: wave; }
        #ui-dom ui-box.ui-hero-split { --ui-flex-direction: row; flex-direction: row; --ui-gap: 60; --ui-align: start; gap: 60px; align-items: flex-start; }
        #ui-dom ui-box.ui-game-copy { --ui-flex-direction: column; flex-direction: column; --ui-gap: 40; --ui-align: start; gap: 40px; align-items: flex-start; }
        #ui-dom ui-text.ui-game-h1 { --ui-size: 60; --ui-align: left; color: #00e5ff; text-align: left; }
        #ui-dom ui-text.ui-game-sub { --ui-size: 20; --ui-align: left; color: #ff3366; text-align: left; }
        #ui-dom ui-typewriter.ui-type-game {
            --ui-size: 18; --ui-spacing: 35; --ui-width: 600; --ui-align: left;
            color: #ffffff; text-align: left;
        }
        #ui-dom ui-button.ui-hint-btn { --ui-width: 400; --ui-height: 80; --ui-margin: 40 0 0 0; margin: 40px 0 0 0; }
        #ui-dom ui-box.ui-game-nav-row {
            --ui-flex-direction: row; flex-direction: row; --ui-justify: start; --ui-width: 100%;
            justify-content: flex-start; width: 100%;
        }
        #ui-dom ui-button.ui-back-btn { --ui-width: 300; --ui-height: 60; }

        #ui-dom ui-box.ui-doc-stack { --ui-flex-direction: column; flex-direction: column; --ui-gap: 80; --ui-align: start; gap: 80px; align-items: flex-start; }
        /* About: CRT-style type-in (slower header + boot pause; faster body after header) */
        #ui-dom ui-page.ui-page-doc ui-typewriter.ui-about-head {
            --ui-size: 48; --ui-spacing: 56; --ui-align: left;
            color: #00e5ff; text-align: left;
        }
        #ui-dom ui-page.ui-page-doc ui-typewriter.ui-about-body {
            --ui-size: 22; --ui-spacing: 44; --ui-align: left;
            color: #ffffff; text-align: left;
        }

        @media (max-width: 999px) {
            #ui-dom ui-page#MENU {
                --ui-padding: 28;
                --ui-width: 100%; --ui-height: 100%;
                --ui-flex-direction: column; --ui-justify: start; --ui-align: center;
                width: 100%; height: 100%;
                flex-direction: column; justify-content: flex-start; align-items: center;
            }
            #ui-dom ui-page.ui-page-game {
                --ui-padding: 20;
                --ui-width: 100%; --ui-height: auto; --ui-justify: start; --ui-align: center;
                --ui-flex-direction: column;
                width: 100%; min-height: 100%; height: auto;
                justify-content: flex-start; align-items: center;
            }
            #ui-dom ui-page.ui-page-game ui-frame.ui-frame-game {
                --ui-flex-direction: column;
                --ui-height: auto; --ui-justify: start; --ui-gap: 28;
                min-height: 100%; height: auto;
                justify-content: flex-start;
                gap: 28px;
            }
            #ui-dom ui-page.ui-page-doc {
                --ui-padding: 20;
                --ui-width: 100%; --ui-height: auto; --ui-justify: start; --ui-align: center;
                --ui-flex-direction: column;
                width: 100%; min-height: 100%; height: auto;
                justify-content: flex-start; align-items: center;
            }
            #ui-dom ui-page#PAGE_GITHUB,
            #ui-dom ui-page#PAGE_TWITTER {
                --ui-padding: 0;
                --ui-flex-direction: column;
                flex-direction: column;
                width: 100%;
                min-height: 100vh;
                height: 100vh;
                background-color: #000;
                color: #000;
                justify-content: center;
                align-items: center;
            }

            #ui-dom ui-frame.ui-frame-game {
                --ui-padding: 20; --ui-align: center;
                --ui-flex-direction: column; --ui-justify: space-between; --ui-width: 100%; --ui-height: 100%;
                flex-direction: column; justify-content: space-between; align-items: center;
                width: 100%; height: 100%;
            }
            #ui-dom ui-page.ui-page-doc ui-frame { --ui-padding: 20; --ui-align: center; align-items: center; }
            #ui-dom ui-page.ui-page-doc ui-frame.ui-frame-game {
                --ui-flex-direction: column;
                --ui-height: auto; --ui-justify: start; --ui-gap: 28;
                min-height: 100%; height: auto;
                justify-content: flex-start;
                gap: 28px;
            }
            #ui-dom ui-page[scroll-shell] ui-frame.ui-frame-game {
                --ui-justify: start;
                justify-content: flex-start;
            }

            /* MENU header: column stack; center like portfolio strip (no left stick). */
            #ui-dom ui-page#MENU ui-box.menu-hero {
                --ui-flex-direction: column; flex-direction: column;
                --ui-width: 100%; --ui-margin: 4 0 36 0;
                --ui-padding: 12 8 14 8;
                --ui-justify: start; justify-content: flex-start;
                --ui-align: center; align-items: center;
                flex-wrap: nowrap;
                row-gap: 18px;
                column-gap: 0;
                box-sizing: border-box;
            }
            /* Column: sun → title → sub so optical center matches centered nav row (row layout skewed right). */
            #ui-dom ui-page#MENU ui-box.menu-brand {
                --ui-margin: 0;
                --ui-gap: 16;
                gap: 16px;
                flex: 0 0 auto;
                width: auto;
                max-width: 100%;
                min-width: 0;
                --ui-flex-direction: column; flex-direction: column;
                --ui-justify: center; justify-content: center;
                --ui-align: center;
                align-items: center;
                align-self: center;
            }
            #ui-dom ui-page#MENU ui-box.menu-logo-stack {
                --ui-flex-direction: column;
                flex-direction: column;
                --ui-align: center;
                align-items: center;
                --ui-gap: 8;
                gap: 8px;
                --ui-padding: 0;
                width: auto;
                max-width: 100%;
            }
            #ui-dom ui-page#MENU ui-box.menu-nav {
                --ui-flex-direction: row; flex-direction: row;
                flex-wrap: wrap;
                --ui-gap: 6; gap: 6px;
                --ui-align: center; align-items: center;
                --ui-justify: center; justify-content: center;
                flex: 0 0 auto;
                width: auto;
                max-width: 100%;
                min-width: 0;
                box-sizing: border-box;
                align-self: center;
            }
            #ui-dom ui-text.menu-footer-copy,
            #ui-dom ui-text.menu-footer-hint {
                --ui-size: 9;
                --ui-width: 100%;
                text-align: center;
                --ui-align: center;
                max-width: 100%;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                flex: none;
            }
            #ui-dom ui-text.menu-footer-hint {
                /* Row 1: shortcuts only */
                white-space: normal;
            }
            #ui-dom ui-text.menu-footer-copy {
                /* Row 2: copyright; allow a single wrap between phrases */
                white-space: normal;
            }
            #ui-dom ui-text.menu-featured {
                --ui-size: 16;
                --ui-margin: 32 10 44 10;
                color: #00e5ff;
                margin: 32px 10px 44px 10px;
                text-align: center;
            }
            /* Stronger selector than base .menu-portfolio-stack so row/wrap + 1600px never wins on small viewports. */
            #ui-dom ui-page#MENU ui-box.menu-portfolio {
                --ui-gap: 0;
                gap: 0;
                width: 100%;
                max-width: 100%;
                --ui-width: 100%;
            }
            /* Cross-axis center so fixed-width cards sit in the column middle (stretch was pinning them left). */
            #ui-dom ui-page#MENU ui-box.menu-portfolio-stack {
                --ui-flex-direction: column;
                --ui-flex-wrap: nowrap;
                --ui-width: 100%;
                --ui-gap: 14;
                --ui-justify: start;
                --ui-align: center;
                flex-direction: column;
                flex-wrap: nowrap;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                box-sizing: border-box;
                gap: 14px;
                justify-content: flex-start;
                align-items: center;
            }
            #ui-dom ui-box.menu-footer {
                --ui-flex-direction: column;
                flex-direction: column;
                flex-wrap: nowrap;
                --ui-gap: 10;
                gap: 10px;
                --ui-width: 100%;
                --ui-justify: center;
                justify-content: center;
                --ui-align: stretch;
                align-items: stretch;
                padding-bottom: 4px;
            }
            #ui-dom ui-page#MENU[scroll-shell] ui-box.menu-footer {
                --ui-margin: 0 0 0 0;
                margin: 0;
            }

            #ui-dom ui-page#MENU ui-sun { --ui-radius: 34; }
            #ui-dom ui-page#MENU ui-text.logo-title {
                --ui-size: 28;
                --ui-width: auto;
                --ui-align: center;
                --ui-leading: 1.12;
                --ui-text-baseline: top;
                color: #ffffff;
                text-align: center;
                width: auto;
                max-width: 100%;
            }
            #ui-dom ui-page#MENU ui-text.logo-sub {
                --ui-size: 11;
                --ui-width: auto;
                --ui-align: center;
                --ui-leading: 1.45;
                --ui-text-baseline: top;
                --ui-padding: 0;
                color: #ff3366;
                text-align: center;
                width: auto;
                max-width: 100%;
            }
            /* MENU header: doc + icon tiles share one flex row (same box size for hit targets). */
            #ui-dom ui-page#MENU ui-box.menu-nav ui-button.menu-doc-link,
            #ui-dom ui-page#MENU ui-box.menu-nav ui-button.menu-icon-btn {
                --ui-width: 52;
                --ui-height: 52;
                --ui-padding: 0;
                width: 52px;
                height: 52px;
                min-width: 52px;
                min-height: 52px;
                max-width: 52px;
                max-height: 52px;
                flex: 0 0 52px;
                box-sizing: border-box;
                padding: 0;
                overflow: hidden;
            }
            #ui-dom ui-button.menu-doc-link {
                --ui-size: 1;
                color: transparent;
                overflow: hidden;
                background-color: rgba(10, 5, 18, 0.35);
                background-repeat: no-repeat;
                background-position: center;
            }
            #ui-dom ui-button.menu-doc-link[icon="labs"] {
                background-size: 60%;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7e9ea' stroke-width='1.35' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 5L8 15h8z'/%3E%3Cpath d='M9 17.5L8.5 20h7l-.5-2.5'/%3E%3C/svg%3E");
            }
            #ui-dom ui-button.menu-doc-link[icon="synths"] {
                background-size: 60%;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='12' width='3.2' height='7' fill='%23e7e9ea'/%3E%3Crect x='10.4' y='9' width='3.2' height='10' fill='%23e7e9ea'/%3E%3Crect x='15.3' y='11' width='3.2' height='8' fill='%23e7e9ea'/%3E%3C/svg%3E");
            }
            #ui-dom ui-button.menu-doc-link[icon="command"] {
                background-size: 60%;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7e9ea' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l4 3-4 3M12 16h6'/%3E%3C/svg%3E");
            }
            #ui-dom ui-page#MENU ui-button.menu-icon-x {
                background-size: 60%;
            }
            #ui-dom ui-page#MENU ui-button.menu-icon-github {
                background-size: 60%;
            }

            /* Portfolio cards: landscape strip (art left, copy right in canvas) */
            #ui-dom ui-page#MENU ui-game-card {
                --ui-width: 428;
                --ui-height: 180;
                width: min(428px, calc(100vw - 16px));
                height: 180px;
                max-width: 100%;
                box-sizing: border-box;
            }

            #ui-dom ui-game-player { --ui-width: 100%; --ui-height: 300; }
            #ui-dom ui-box.ui-hero-split { --ui-flex-direction: column; flex-direction: column; --ui-gap: 20; --ui-align: center; gap: 20px; align-items: center; }
            #ui-dom ui-box.ui-game-copy { --ui-gap: 20; gap: 20px; --ui-align: center; align-items: center; }
            #ui-dom ui-text.ui-game-h1 { --ui-size: 28; --ui-align: center; color: #00e5ff; text-align: center; }
            #ui-dom ui-text.ui-game-sub { --ui-size: 12; --ui-align: center; color: #ff3366; text-align: center; }
            #ui-dom ui-typewriter.ui-type-game {
                --ui-size: 12; --ui-spacing: 25; --ui-width: 100%; --ui-align: center;
                color: #ffffff; text-align: center;
            }
            #ui-dom ui-button.ui-hint-btn { --ui-width: 260; --ui-height: 60; --ui-margin: 20 0 0 0; margin: 20px 0 0 0; }
            #ui-dom ui-box.ui-game-nav-row { --ui-justify: center; justify-content: center; width: 100%; --ui-width: 100%; }
            #ui-dom ui-button.ui-back-btn { --ui-width: 200; --ui-height: 50; }

            #ui-dom ui-box.ui-doc-stack { --ui-gap: 40; gap: 40px; --ui-align: center; align-items: center; }
            #ui-dom ui-page.ui-page-doc ui-typewriter.ui-about-head {
                --ui-size: 24; --ui-spacing: 34; --ui-align: center;
                color: #00e5ff; text-align: center;
            }
            #ui-dom ui-page.ui-page-doc ui-typewriter.ui-about-body {
                --ui-size: 12; --ui-spacing: 30; --ui-align: center;
                color: #ffffff; text-align: center;
            }
        }

/* --- DOM fallback (no WebGL / no canvas path): visible micro-DOM, normal scrolling --- */
body.schlop-dom-fallback {
    overflow: auto;
    cursor: auto;
    user-select: text;
    touch-action: manipulation;
}
body.schlop-dom-fallback #root {
    display: none;
}
#ui-dom.ui-dom-fallback-visible {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 100vh;
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
    overflow: visible;
}
#ui-dom.ui-dom-fallback-visible ui-page {
    display: none;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
}
#ui-dom.ui-dom-fallback-visible ui-page.schlop-dom-active {
    display: flex;
}
.schlop-snark-banner {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 24px 0;
    padding: 16px 20px;
    border: 2px dashed #ff3366;
    background: rgba(255, 51, 102, 0.08);
    color: #00e5ff;
    font-size: 10px;
    line-height: 1.5;
    text-align: left;
}