/* DW9 - LEVIATHAN Mobile + Perf Layer - 2026-07-02 Loaded LAST in by head_boost() so this cascade wins over each room's in-file breakpoints. Scope discipline: - Almost everything lives inside @media (max-width:767px). - Desktop gets only additive glow (no transforms, composes with existing hovers). - html.dw9-perf-mode / html.dw9-tab-hidden are set by leviathan-perf.js. Brand rules honored: #0b0c0e stays black, teal/cyan accents, G-14 chrome intact, ticker stays visible (throttled, never removed), vessel voice everywhere. */ /* ---------- 1. SMALL SCREENS: structural finish (375–767px) ---------- */ @media (max-width: 767px) { html, body { overflow-x: hidden; } /* Readability floor. Rooms set component px sizes; these are the shared text surfaces that were rendering below 14px at the old scaled viewport. */ body { -webkit-text-size-adjust: 100%; } p, li, .dd-summary, .dd-meta, .s-val, .step-text, .type-copy, .fl-hint { font-size: max(1em, 15px); line-height: 1.55; } h1, .dd-title { font-size: clamp(26px, 8vw, 40px); line-height: 1.12; overflow-wrap: anywhere; } h2 { font-size: clamp(20px, 6vw, 28px); line-height: 1.18; } h3, .head-label, .dd-kicker { font-size: clamp(15px, 4.4vw, 19px); letter-spacing: .08em; } /* Single-column collapse: only touches elements that ARE grids, so flex and canvas layers are untouched. Sidebars drop below main content. */ .dd-grid, [class*="grid"] { grid-template-columns: 1fr !important; } .dd-side, [class*="sidebar"] { order: 2; } .dd-main { order: 1; min-width: 0; } .dd-section { padding-left: 14px; padding-right: 14px; } /* Command rail: one-row horizontal scroll beats a cramped wrap. */ .lev-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; } .lev-nav::-webkit-scrollbar { display: none; } /* Status bar + live ticker: keep every readout visible, let them breathe. */ .status-bar { flex-wrap: wrap; row-gap: 6px; padding: 8px 12px; } .ticker { max-width: calc(100vw - 28px); padding: 8px 14px; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } /* 44px tap floor on everything interactive (WCAG 2.5.8 / Apple HIG). v1.8.1: [role="button"] must exclude .ship-stage — the hero stage carries role="button" for the hold-to-leap a11y, and inline-flex shrink-wrapped it to width:0 (its children are all absolute), erasing the Stargate on phones. */ a.lev-btn, button.lev-btn, .btn, .btn-c, .btn-ghost, .map-action, .wl-btn, .creator-link, .type-option, button, [role="button"]:not(.ship-stage), .lev-nav a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-top: 10px; padding-bottom: 10px; } .t-input, .input-shell input, .input-shell select, input[type="text"], input[type="email"], input[type="url"], select, textarea { font-size: 16px; /* kills iOS focus auto-zoom */ min-height: 44px; } .field-group { margin-bottom: 14px; } /* Ambient player: stay clear of the nav rail, never overflow the viewport. */ /* THE ABYSSAL VAULT CTA — the monetization press. Full-width, unmissable, classified-hatch drama in the house teal. */ .vault-access-chip, a.vault-access-chip { display: flex; width: 100%; min-height: 56px; justify-content: center; align-items: center; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--cyan, #00c8b4); background: linear-gradient(180deg, rgba(0, 200, 180, .16), rgba(0, 200, 180, .04)), rgba(4, 17, 28, .9); box-shadow: 0 0 0 1px rgba(0, 200, 180, .18), 0 0 22px rgba(0, 200, 180, .22); animation: dw9VaultBeacon 2.8s ease-in-out infinite; } .vault-access-chip:active { transform: scale(.985); } } @keyframes dw9VaultBeacon { 0%, 100% { box-shadow: 0 0 0 1px rgba(0,200,180,.18), 0 0 14px rgba(0,200,180,.18); } 50% { box-shadow: 0 0 0 1px rgba(0,200,180,.45), 0 0 30px rgba(0,200,180,.42); } } /* ---------- 2. PERF MODE (set by leviathan-perf.js on phones / weak CPUs) ---------- Brief rule 5: throttle atmosphere intensity on mobile, never on desktop, never remove it. Decorative full-screen layers dim; content is untouched. */ html.dw9-perf-mode #treeNetwork, html.dw9-perf-mode #gateParticlesDisabled, html.dw9-perf-mode .scan-vignette { opacity: .16 !important; } html.dw9-perf-mode .a-rain { animation-duration: 12s !important; } /* Glassmorphism costs the compositor a live blur of everything behind each panel on every scrolled frame — the main jank source on the Deep Dive Terminal and Submit rooms. On weak devices, trade blur for solid ink. */ html.dw9-perf-mode *, html.dw9-perf-mode *::before, html.dw9-perf-mode *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.dw9-perf-mode .dd-record, html.dw9-perf-mode .dd-side > *, html.dw9-perf-mode .hud-card, html.dw9-perf-mode .field-group, html.dw9-perf-mode .input-shell, html.dw9-perf-mode .lev-chip, html.dw9-perf-mode .status-bar, html.dw9-perf-mode [class*="glass"], html.dw9-perf-mode [class*="panel"] { background-color: rgba(8, 11, 15, .93) !important; } /* Static box-shadows repaint on scroll under some mobile compositors too. */ html.dw9-perf-mode .dd-record, html.dw9-perf-mode .hud-card { box-shadow: none !important; } /* Background tab: CSS animations pause (rAF loops already self-suspend). */ html.dw9-tab-hidden * { animation-play-state: paused !important; } /* ---------- 3. SCROLL-REVEAL + TERMINAL PULSE (driven by leviathan-perf.js) ---------- */ .dw9-will-reveal { opacity: 0; transform: translateY(16px); } .dw9-revealed { opacity: 1; transform: translateY(0); transition: opacity .55s ease-out, transform .55s ease-out; } .dw9-live-pulse { animation: dw9ActivePing 3.2s ease-in-out infinite; } @keyframes dw9ActivePing { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 180, 0); } 45% { box-shadow: 0 0 0 1px rgba(0, 200, 180, .28), 0 0 16px rgba(0, 200, 180, .2); } } /* ---------- 4. DESKTOP MICRO-POLISH (additive only) ---------- Glow-only hover so it composes with each room's existing transform hovers. */ @media (hover: hover) and (min-width: 768px) { .hud-card, .dd-record { transition: box-shadow .28s ease, border-color .28s ease; } .hud-card:hover, .dd-record:hover { box-shadow: 0 10px 34px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 200, 180, .16); border-color: rgba(0, 200, 180, .5); } } /* ---------- 5. REDUCED MOTION: complete coverage, no exceptions ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .dw9-will-reveal { opacity: 1; transform: none; } } /* ---------- 6. HOMEPAGE (v1.8.1): mobile hero + rail, rebuilt ---------- v28 hid the depth rail + hyper toggle and squashed .ship-stage; combined with the tap-floor rule above that erased the Stargate and locked Hold-to-Leap on every phone. The rail is now a compact instrument, the stage is a real block with a fully visible ring, and the toggle stays on deck. */ @media (max-width: 767px) { /* side depth rail: compact, pinned fully inside the viewport (Issue 2) */ .depth-nav { right: max(10px, env(safe-area-inset-right)) !important; gap: 18px !important; max-width: calc(100vw - 20px); } .depth-nav .dn-sub { display: none !important; } .depth-nav .dn-name { font-size: 12px !important; letter-spacing: 1.8px !important; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; } .depth-nav .dn-stop { gap: 9px !important; padding: 6px 0 6px 8px !important; } .depth-nav .dn-mark { width: 14px !important; height: 14px !important; flex: 0 0 14px !important; } .depth-nav::before { right: 7px !important; } /* hero stage: full-bleed block. v1.8.3 — DOUBLE stargate: ring box 120vw (visible ring = box * 1.3 inline svg scale ≈ 156vw, a commanding gate that bleeds past the screen edges like the desktop hero). Portal fallback uses the true ring math (box * 1.3 * 256/720 * 2 ≈ box * 0.924); the JS then locks the vortex to the measured ring center exactly. */ .ship-stage { display: block !important; width: 100% !important; height: min(max(130vw, 520px), 760px) !important; min-height: 520px !important; --dw9-ring-box: min(120vw, 620px); --dw9-portal-inner-d: calc(min(120vw, 620px) * 0.924); } .ship-stage .gate-ring { width: var(--dw9-ring-box) !important; height: var(--dw9-ring-box) !important; top: 50% !important; } .hero { padding-left: 14px !important; padding-right: 14px !important; } .hero h1, .hero .h-title { font-size: clamp(26px, 8.6vw, 38px) !important; letter-spacing: 2px !important; } /* .hyper-toggle stays VISIBLE — it unlocks Hold-to-Leap (Issue 6) */ .hyper-toggle { font-size: 10px !important; letter-spacing: 2px !important; padding: 12px 16px !important; } .dive-card .d-img { min-height: 120px !important; } #descent-corridor { height: 110vh !important; } /* shorten the dead-scroll stretch on phones */ .vault-lock-stage { height: 120vh !important; min-height: 120vh !important; } body > .site, main { overflow-x: clip !important; } } /* per the polish spec: rail labels drop to 11px at <=390px so they never clip */ @media (max-width: 390px) { .depth-nav .dn-name { font-size: 11px !important; } } /* ---------- 7. GLOBAL MOBILE HEADER + DRAWER (v1.8.3) ---------- The Submit room's header was the only one that worked on phones: tap the three lines, get a fullscreen room list. Every other room either had an unstyled drawer (index detached leviathan-core.css, so the drawer's ✕ floated raw over the hero) or a cramped side sheet. This layer ships the Submit drawer format to EVERY room, while each room keeps its own brand header (index keeps the green DARKWATERS9 + wave animation). Loaded last, so it wins the cascade. */ .lev-nav-drawer{ display:none !important; position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; width:auto !important; height:auto !important; transform:none !important; transition:none !important; background:rgba(1,4,12,0.97) !important; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); z-index:9200 !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:6px !important; padding:56px 20px 40px !important; overflow-y:auto !important; border:0 !important; box-shadow:none !important; } .lev-nav-drawer.open{ display:flex !important; } .lev-nav-drawer a{ font-family:'Orbitron',sans-serif !important; font-size:12px !important; letter-spacing:3px !important; text-transform:uppercase !important; color:rgba(200,232,240,0.6) !important; text-decoration:none !important; padding:14px 28px !important; border-radius:3px !important; width:100% !important; max-width:320px !important; text-align:center !important; border:1px solid rgba(0,200,255,0.08) !important; border-bottom:1px solid rgba(0,200,255,0.08) !important; margin:0 !important; } .lev-nav-drawer a:hover, .lev-nav-drawer a.nav-active, .lev-nav-drawer a.active{ color:#00c8ff !important; background:rgba(0,200,255,0.08) !important; border-color:rgba(0,200,255,0.25) !important; } .lev-nav-drawer a.drawer-cta{ color:#00c8ff !important; border-color:rgba(0,200,255,0.4) !important; margin-top:8px !important; } .lev-nav-drawer a.drawer-vault{ color:#ffb86b !important; border-color:rgba(255,170,80,0.35) !important; } .lev-nav-drawer .drawer-close{ position:absolute !important; top:14px !important; right:16px !important; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:transparent !important; border:0 !important; color:#00c8ff !important; font-size:26px !important; cursor:pointer; line-height:1; } body.dw9-drawer-open{ overflow:hidden !important; } /* nav.js burger (rooms whose nav it builds) — match the house chrome */ .lev-nav-burger{ flex-direction:column; gap:4px; align-items:center; justify-content:center; cursor:pointer; padding:9px 10px; border:1px solid rgba(0,255,140,.45); border-radius:7px; background:rgba(0,255,140,.06); box-shadow:0 0 12px rgba(0,255,140,.14); } .lev-nav-burger span{ display:block; width:16px; height:2px; background:#00ff8c; border-radius:2px; box-shadow:0 0 6px rgba(0,255,140,.6); } @media (max-width:900px){ /* the header row itself: brand left, controls right, nothing clipped */ .lev-nav{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; padding:12px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)) !important; max-width:100vw !important; overflow:visible !important; white-space:normal !important; } /* the fullscreen drawer replaces every in-header dropdown on phones */ .lev-nav .nav-links, .lev-nav .lev-nav-links{ display:none !important; } .nav-ham, .lev-nav-burger{ display:flex !important; } }