/* ============================================================ GLOBAL PAGE TRANSITIONS — Block Gemini Cinematic, Hollywood-grade routing overlay. ============================================================ */ html, body { background: #04060f; color-scheme: dark; } /* ---------- Pre-paint placeholder ---------- Renders BEFORE transitions.js builds the overlay DOM, so an arriving page never flashes empty body before the cinematic overlay reappears. The class is added in by transitions.js synchronously. */ html.pt-incoming { background: #04060f; } html.pt-incoming body > *:not(.pt-overlay) { visibility: hidden; } html.pt-incoming .pt-overlay { visibility: visible; } html.pt-incoming::before { content: ""; position: fixed; inset: 0; z-index: 99998; background: radial-gradient(ellipse 80% 60% at 50% 50%, #061226 0%, #04060f 60%, #02030a 100%); pointer-events: none; } html.pt-incoming::after { content: ""; position: fixed; inset: 0; z-index: 99998; background-image: linear-gradient(rgba(79,200,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,200,255,0.07) 1px, transparent 1px); background-size: 56px 56px; mask: radial-gradient(ellipse 75% 65% at 50% 50%, #000 25%, transparent 80%); -webkit-mask: radial-gradient(ellipse 75% 65% at 50% 50%, #000 25%, transparent 80%); pointer-events: none; } /* ---------- Container ---------- */ .pt-overlay { position: fixed; inset: 0; z-index: 99999; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 50%, #061226 0%, #04060f 60%, #02030a 100%); color: #cfd6e8; font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; transform: translate3d(0, -101%, 0); will-change: transform, clip-path, opacity; overflow: hidden; contain: strict; } .pt-overlay.pt-entering { pointer-events: auto; animation: pt-in 620ms cubic-bezier(0.83, 0, 0.17, 1) forwards; } .pt-overlay.pt-holding { pointer-events: auto; transform: translate3d(0, 0, 0); } .pt-overlay.pt-exiting { pointer-events: auto; transform: translate3d(0, 0, 0); animation: pt-out 720ms cubic-bezier(0.83, 0, 0.17, 1) forwards; } @keyframes pt-in { 0% { transform: translate3d(0, 100%, 0) } 100% { transform: translate3d(0,0,0) } } @keyframes pt-out { 0% { clip-path: inset(0 0 0 0); transform: translate3d(0,0,0) } 100% { clip-path: inset(50% 0 50% 0); transform: translate3d(0, -100%, 0); } } /* ---------- Cinematic letterbox bars ---------- */ .pt-bar { position: absolute; left: 0; right: 0; height: 6vh; background: #000; z-index: 5; } .pt-bar.top { top: 0; transform: translateY(-100%); animation: pt-bar-in 540ms 60ms cubic-bezier(0.83, 0, 0.17, 1) forwards; } .pt-bar.bottom { bottom: 0; transform: translateY(100%); animation: pt-bar-in 540ms 60ms cubic-bezier(0.83, 0, 0.17, 1) forwards; } .pt-bar::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(79,200,255,0.5) 20%, rgba(79,200,255,0.9) 50%, rgba(79,200,255,0.5) 80%, transparent); box-shadow: 0 0 14px rgba(79,200,255,0.55); } .pt-bar.top::after { bottom: 0; } .pt-bar.bottom::after { top: 0; } @keyframes pt-bar-in { to { transform: translateY(0); } } /* ---------- Decorative grid (perspective) ---------- */ .pt-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(79,200,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,200,255,0.07) 1px, transparent 1px); background-size: 56px 56px; mask: radial-gradient(ellipse 75% 65% at 50% 50%, #000 25%, transparent 80%); -webkit-mask: radial-gradient(ellipse 75% 65% at 50% 50%, #000 25%, transparent 80%); opacity: 0; animation: pt-fade 500ms 100ms forwards, pt-grid-drift 8s linear infinite; } @keyframes pt-grid-drift { to { background-position: 56px 56px, 56px 56px; } } /* Secondary fine grid */ .pt-grid-fine { position: absolute; inset: 0; background-image: linear-gradient(rgba(94,255,164,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(94,255,164,0.04) 1px, transparent 1px); background-size: 14px 14px; mask: radial-gradient(ellipse 50% 40% at 50% 50%, #000 0%, transparent 70%); -webkit-mask: radial-gradient(ellipse 50% 40% at 50% 50%, #000 0%, transparent 70%); opacity: 0; animation: pt-fade 600ms 160ms forwards; } /* Radial glow + vignette */ .pt-glow { position: absolute; inset: 0; background: radial-gradient(38% 38% at 50% 50%, rgba(0,85,255,0.30) 0%, transparent 70%), radial-gradient(70% 50% at 50% 100%, rgba(94,255,164,0.10) 0%, transparent 60%), radial-gradient(70% 50% at 50% 0%, rgba(79,200,255,0.10) 0%, transparent 60%); opacity: 0; animation: pt-fade 600ms 80ms forwards, pt-glow-pulse 3.2s 600ms ease-in-out infinite; } @keyframes pt-glow-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } } /* Scanlines overlay */ .pt-scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.0) 0, rgba(255,255,255,0.0) 2px, rgba(0,0,0,0.20) 3px, rgba(0,0,0,0.0) 4px ); opacity: 0; animation: pt-fade 400ms 80ms forwards; mix-blend-mode: multiply; } /* CRT noise (animated dither via SVG filter background) */ .pt-noise { position: absolute; inset: 0; pointer-events: none; opacity: 0; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: screen; animation: pt-fade 700ms 160ms forwards, pt-noise-shift 0.7s steps(6) infinite; } @keyframes pt-noise-shift { 0% { transform: translate(0,0) } 20% { transform: translate(-3px, 2px) } 40% { transform: translate(2px, -1px) } 60% { transform: translate(-1px, 3px) } 80% { transform: translate(3px, 1px) } 100% { transform: translate(0,0) } } /* Sweeping horizontal scan (bright beam moving top→bottom) */ .pt-scan-h { position: absolute; left: -10%; right: -10%; height: 2px; background: linear-gradient(90deg, transparent, #4FC8FF 35%, #ffffff 50%, #4FC8FF 65%, transparent); box-shadow: 0 0 22px rgba(79,200,255,0.85), 0 0 4px #ffffff; top: 0; opacity: 0; will-change: transform, opacity; transform: translate3d(0, -2vh, 0); backface-visibility: hidden; animation: pt-scan-v 1.6s 100ms linear infinite, pt-fade 240ms 80ms forwards; } @keyframes pt-scan-v { 0% { transform: translate3d(0, -2vh, 0); } 100% { transform: translate3d(0, 102vh, 0); } } /* Sweeping vertical scan (beam moving left→right) */ .pt-scan-w { position: absolute; top: -10%; bottom: -10%; width: 1px; background: linear-gradient(180deg, transparent, rgba(94,255,164,0.85) 50%, transparent); box-shadow: 0 0 14px rgba(94,255,164,0.7); left: 0; opacity: 0; will-change: transform, opacity; transform: translate3d(-2vw, 0, 0); backface-visibility: hidden; animation: pt-scan-h 2.4s 200ms linear infinite, pt-fade 240ms 80ms forwards; } @keyframes pt-scan-h { 0% { transform: translate3d(-2vw, 0, 0); } 100% { transform: translate3d(102vw, 0, 0); } } /* ---------- Stage (centered HUD) ---------- */ .pt-stage { position: absolute; inset: 0; display: grid; place-items: center; z-index: 10; } /* Core wireframe sphere — pure SVG */ .pt-core { position: relative; width: min(440px, 56vw); aspect-ratio: 1; display: grid; place-items: center; filter: drop-shadow(0 0 28px rgba(79,200,255,0.35)); } .pt-core svg { width: 100%; height: 100%; overflow: visible; } .pt-core .pt-orbit { transform-origin: 50% 50%; transform-box: fill-box; animation: pt-rotate 8s linear infinite; } .pt-core .pt-orbit-2 { animation: pt-rotate 12s linear infinite reverse; } .pt-core .pt-orbit-3 { animation: pt-rotate 5s linear infinite; } .pt-core .pt-meridian { animation: pt-spin-y 4.5s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; } @keyframes pt-rotate { to { transform: rotate(360deg); } } @keyframes pt-spin-y { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } /* Radar sweep — conic gradient inside an absolutely-positioned wedge */ .pt-radar { position: absolute; inset: 18%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(79,200,255,0.0) 280deg, rgba(79,200,255,0.55) 358deg, transparent 360deg); mask: radial-gradient(circle at 50% 50%, transparent 30%, #000 31%, #000 100%); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 30%, #000 31%, #000 100%); animation: pt-rotate 2.4s linear infinite; opacity: 0.85; pointer-events: none; } /* Center lock-on target */ .pt-target { position: absolute; width: 22%; aspect-ratio: 1; display: grid; place-items: center; z-index: 3; } .pt-target-frame { position: absolute; inset: 0; border: 1px solid rgba(79,200,255,0.55); background: linear-gradient(135deg, rgba(79,200,255,0.10), rgba(94,255,164,0.05)); box-shadow: inset 0 0 22px rgba(79,200,255,0.18), 0 0 32px rgba(0,85,255,0.35); animation: pt-target-pulse 1.6s ease-in-out infinite; } .pt-target-frame::before, .pt-target-frame::after { content: ""; position: absolute; background: #4FC8FF; box-shadow: 0 0 8px rgba(79,200,255,0.9); } .pt-target-frame::before { left: -22%; right: -22%; height: 1px; top: 50%; } .pt-target-frame::after { top: -22%; bottom: -22%; width: 1px; left: 50%; } @keyframes pt-target-pulse { 0%, 100% { box-shadow: inset 0 0 22px rgba(79,200,255,0.18), 0 0 32px rgba(0,85,255,0.35); } 50% { box-shadow: inset 0 0 28px rgba(79,200,255,0.40), 0 0 56px rgba(0,85,255,0.65); } } .pt-target .pt-mark { position: relative; z-index: 2; width: 56%; aspect-ratio: 1; display: grid; place-items: center; filter: drop-shadow(0 0 14px rgba(79,200,255,0.85)); animation: pt-mark-pulse 2.4s ease-in-out infinite; } .pt-target .pt-mark svg { width: 100%; height: 100%; } @keyframes pt-mark-pulse { 0%, 100% { filter: drop-shadow(0 0 14px rgba(79,200,255,0.85)); } 50% { filter: drop-shadow(0 0 26px rgba(79,200,255,1.0)); } } /* Brand wordmark — top-left of overlay */ .pt-brand { position: absolute; top: calc(6vh + 32px); left: 38px; display: flex; align-items: center; gap: 18px; z-index: 13; opacity: 0; animation: pt-brand-in 540ms 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .pt-brand svg { height: 44px; width: auto; filter: drop-shadow(0 0 16px rgba(79,200,255,0.55)); } .pt-brand-tag { display: inline-block; padding: 6px 12px; font-size: 10px; letter-spacing: 0.28em; color: #4FC8FF; text-transform: uppercase; border: 1px solid rgba(79,200,255,0.35); background: rgba(79,200,255,0.06); font-variant-numeric: tabular-nums; white-space: nowrap; } @keyframes pt-brand-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } /* Brand watermark in bottom-right corner */ .pt-watermark { position: absolute; bottom: calc(6vh + 32px); right: 38px; display: flex; align-items: center; gap: 16px; z-index: 13; opacity: 0; animation: pt-brand-in 540ms 280ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .pt-watermark svg { height: 52px; width: 52px; filter: drop-shadow(0 0 14px rgba(79,200,255,0.65)); } .pt-watermark-text { display: grid; gap: 4px; font-size: 10px; letter-spacing: 0.24em; color: rgba(207,214,232,0.65); text-transform: uppercase; text-align: right; white-space: nowrap; } .pt-watermark-text b { color: #fff; font-weight: 500; letter-spacing: 0.20em; font-size: 14px; } /* Corner ticks on target */ .pt-tick { position: absolute; width: 14px; height: 14px; border: 1px solid #4FC8FF; box-shadow: 0 0 8px rgba(79,200,255,0.6); } .pt-tick.tl { top: -8px; left: -8px; border-right: 0; border-bottom: 0; } .pt-tick.tr { top: -8px; right: -8px; border-left: 0; border-bottom: 0; } .pt-tick.bl { bottom: -8px; left: -8px; border-right: 0; border-top: 0; } .pt-tick.br { bottom: -8px; right: -8px; border-left: 0; border-top: 0; } /* Equalizer column under center */ .pt-eq { position: absolute; left: 50%; transform: translateX(-50%); bottom: 22%; display: flex; gap: 4px; align-items: flex-end; height: 36px; } .pt-eq span { display: block; width: 3px; background: #4FC8FF; box-shadow: 0 0 6px rgba(79,200,255,0.7); animation: pt-eq 1.0s ease-in-out infinite alternate; } .pt-eq span:nth-child(1) { animation-delay: 0.00s; } .pt-eq span:nth-child(2) { animation-delay: 0.10s; } .pt-eq span:nth-child(3) { animation-delay: 0.20s; } .pt-eq span:nth-child(4) { animation-delay: 0.05s; } .pt-eq span:nth-child(5) { animation-delay: 0.30s; } .pt-eq span:nth-child(6) { animation-delay: 0.15s; } .pt-eq span:nth-child(7) { animation-delay: 0.25s; } .pt-eq span:nth-child(8) { animation-delay: 0.08s; } .pt-eq span:nth-child(9) { animation-delay: 0.18s; } @keyframes pt-eq { from { height: 6px; opacity: 0.4; background: #4FC8FF; } to { height: 32px; opacity: 1; background: #5EFFA4; } } /* ---------- Status text ---------- */ .pt-status { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; z-index: 11; } .pt-status-line { font-size: 11px; letter-spacing: 0.34em; color: rgba(207,214,232,0.95); text-transform: uppercase; display: inline-flex; align-items: center; gap: 14px; } .pt-status-line::before, .pt-status-line::after { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, rgba(79,200,255,0.7), transparent); } .pt-status-target { font-size: 14px; letter-spacing: 0.22em; color: #4FC8FF; margin-top: 14px; text-transform: uppercase; font-weight: 500; text-shadow: 0 0 14px rgba(79,200,255,0.6); font-variant-numeric: tabular-nums; } .pt-status-target::before { content: "→ "; color: rgba(79,200,255,0.6); } /* ---------- Top + bottom HUD chrome ---------- */ .pt-hud { position: absolute; padding: 32px 38px; display: flex; align-items: flex-start; font-size: 10px; letter-spacing: 0.24em; color: rgba(207,214,232,0.75); text-transform: uppercase; gap: 36px; z-index: 12; } /* Top HUD: shifted right of brand wordmark */ .pt-hud.top { top: 6vh; right: 0; left: auto; padding-right: 38px; padding-left: 0; justify-content: flex-end; } /* Bottom HUD: shifted left of watermark */ .pt-hud.bot { bottom: 6vh; left: 0; right: auto; align-items: flex-end; padding-left: 38px; padding-right: 0; } .pt-hud-block { display: grid; gap: 4px; min-width: 0; } .pt-hud-block .lbl { color: rgba(207,214,232,0.45); font-size: 9px; letter-spacing: 0.28em; } .pt-hud-block .val { color: #fff; font-size: 12px; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; } .pt-hud-block .val .accent { color: #4FC8FF; } .pt-hud-block .val .mint { color: #5EFFA4; } .pt-hud-block.live .val::before { content: ""; display: inline-block; width: 7px; height: 7px; background: #5EFFA4; border-radius: 50%; margin-right: 9px; box-shadow: 0 0 10px #5EFFA4; animation: pt-pulse 1.2s ease-in-out infinite; vertical-align: middle; } @keyframes pt-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.30 } } /* Side rails — scrolling hex columns */ .pt-rail { position: absolute; top: 8vh; bottom: 8vh; width: 110px; font-size: 9px; line-height: 14px; letter-spacing: 0.08em; color: rgba(79,200,255,0.45); white-space: pre; overflow: hidden; z-index: 6; pointer-events: none; mask: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); -webkit-mask: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); } .pt-rail.l { left: 28px; text-align: left; } .pt-rail.r { right: 28px; text-align: right; } .pt-rail-track { animation: pt-rail-scroll 9s linear infinite; will-change: transform; } .pt-rail.r .pt-rail-track { animation-direction: reverse; animation-duration: 11s; } @keyframes pt-rail-scroll { from { transform: translateY(0%); } to { transform: translateY(-50%); } } /* Corner brackets */ .pt-bracket { position: absolute; width: 36px; height: 36px; border: 1px solid rgba(79,200,255,0.65); z-index: 11; } .pt-bracket::after { content: ""; position: absolute; width: 6px; height: 6px; background: #4FC8FF; box-shadow: 0 0 10px rgba(79,200,255,0.8); } .pt-bracket.tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; } .pt-bracket.tr { top: 18px; right: 18px; border-left: 0; border-bottom: 0; } .pt-bracket.bl { bottom: 18px; left: 18px; border-right: 0; border-top: 0; } .pt-bracket.br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; } .pt-bracket.tl::after { top: -3px; left: -3px; } .pt-bracket.tr::after { top: -3px; right: -3px; } .pt-bracket.bl::after { bottom: -3px; left: -3px; } .pt-bracket.br::after { bottom: -3px; right: -3px; } /* ---------- Bottom progress bars (3-track) ---------- */ .pt-progress { position: absolute; left: 8vw; right: 8vw; bottom: calc(6vh + 18px); z-index: 12; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; font-size: 9px; letter-spacing: 0.24em; color: rgba(207,214,232,0.5); text-transform: uppercase; } .pt-progress-row .lab { display: flex; justify-content: space-between; margin-bottom: 6px; } .pt-progress-row .lab .v { color: #fff; font-variant-numeric: tabular-nums; } .pt-progress-row .bar { height: 2px; background: rgba(79,200,255,0.10); position: relative; overflow: hidden; } .pt-progress-row .bar > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #4FC8FF, #5EFFA4); box-shadow: 0 0 12px rgba(79,200,255,0.6); transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- Top thin progress bar ---------- */ .pt-topbar { position: absolute; left: 0; right: 0; top: 6vh; height: 1px; background: rgba(79,200,255,0.08); z-index: 7; } .pt-topbar > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #4FC8FF, #ffffff, #5EFFA4); box-shadow: 0 0 14px rgba(79,200,255,0.7); transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- Particle stream toward center ---------- */ .pt-particles { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; animation: pt-fade 600ms 200ms forwards; } .pt-particles span { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #4FC8FF; box-shadow: 0 0 6px rgba(79,200,255,0.85); opacity: 0; animation: pt-particle 2.6s linear infinite; } @keyframes pt-particle { 0% { opacity: 0; transform: translate3d(var(--sx), var(--sy), 0) scale(0.4); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); } } /* ---------- Bridge state ---------- Applied just before navigation AND for the first ~300ms after arrival. Hides moving decorations and pauses orbital animations so the source page's exit snapshot matches the destination's entry snapshot — no visible "refresh" of scan beams, particles, sphere rotation, etc. */ .pt-overlay.pt-bridge .pt-scan-h, .pt-overlay.pt-bridge .pt-scan-w, .pt-overlay.pt-bridge .pt-particles, .pt-overlay.pt-bridge .pt-radar, .pt-overlay.pt-bridge .pt-noise, .pt-overlay.pt-bridge .pt-eq { opacity: 0 !important; transition: opacity 220ms ease-out; } .pt-overlay.pt-bridge .pt-orbit, .pt-overlay.pt-bridge .pt-orbit-2, .pt-overlay.pt-bridge .pt-orbit-3, .pt-overlay.pt-bridge .pt-meridian, .pt-overlay.pt-bridge .pt-target-frame, .pt-overlay.pt-bridge .pt-mark { animation-play-state: paused !important; } /* ---------- Page-arrival reveal ---------- */ .pt-page-enter { animation: pt-page-in 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes pt-page-in { from { opacity: 0; transform: translateY(10px) scale(0.998); filter: blur(6px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .pt-overlay.pt-entering, .pt-overlay.pt-exiting { animation-duration: 220ms; } .pt-scan-h, .pt-scan-w, .pt-orbit, .pt-orbit-2, .pt-orbit-3, .pt-radar, .pt-particles span, .pt-eq span, .pt-rail-track, .pt-noise, .pt-target-frame { animation: none !important; } .pt-page-enter { animation-duration: 220ms; } } /* Helper: fade-in keyframe */ @keyframes pt-fade { to { opacity: 1; } } /* ============================================================ MOBILE / NARROW VIEWPORT Repacks the HUD so it doesn't compress into illegible chrome on phones (iPhone 14 Pro Max ≈ 430px wide is the design target). ============================================================ */ @media (max-width: 820px) { /* Letterbox a bit thinner so the stage breathes */ .pt-bar { height: 4vh; } /* Side rails: pure decoration — kill them, reclaim ~220px */ .pt-rail { display: none; } /* Brand wordmark — shrink, drop the tag pill */ .pt-brand { top: calc(4vh + 14px); left: 16px; gap: 10px; } .pt-brand svg { height: 28px; } .pt-brand-tag { display: none; } /* Watermark — pure decoration, hide on mobile so it doesn't collide with the bottom progress bars (which run edge-to-edge here) */ .pt-watermark { display: none; } /* Top HUD: move below the wordmark so they don't collide. Two compact columns; drop the long session hash + latency block. */ .pt-hud { padding: 14px 16px; gap: 18px; font-size: 9px; letter-spacing: 0.18em; } .pt-hud.top { top: calc(4vh + 52px); right: 16px; left: auto; padding: 0; justify-content: flex-end; gap: 14px; } .pt-hud.top .pt-hud-block:nth-child(2), .pt-hud.top .pt-hud-block:nth-child(4) { display: none; } .pt-hud-block .lbl { font-size: 8px; letter-spacing: 0.20em; } .pt-hud-block .val { font-size: 10px; letter-spacing: 0.10em; } .pt-hud-block.live .val::before { width: 6px; height: 6px; margin-right: 6px; } /* Bottom HUD: move above the watermark; keep only Hops + Throughput */ .pt-hud.bot { bottom: calc(4vh + 56px); left: 16px; right: auto; padding: 0; gap: 14px; align-items: flex-end; } .pt-hud.bot .pt-hud-block:nth-child(1), .pt-hud.bot .pt-hud-block:nth-child(4) { display: none; } /* Corner brackets — pull in tight, shrink */ .pt-bracket { width: 22px; height: 22px; } .pt-bracket.tl, .pt-bracket.tr { top: 10px; } .pt-bracket.bl, .pt-bracket.br { bottom: 10px; } .pt-bracket.tl, .pt-bracket.bl { left: 10px; } .pt-bracket.tr, .pt-bracket.br { right: 10px; } /* Core sphere — give it more room since rails are gone */ .pt-core { width: min(360px, 78vw); } /* Equalizer — sit closer to sphere */ .pt-eq { bottom: 30%; height: 24px; } .pt-eq span { width: 2px; } /* Status — pull up so it doesn't collide with progress */ .pt-status { bottom: 22%; } .pt-status-line { font-size: 9px; letter-spacing: 0.22em; gap: 8px; } .pt-status-line::before, .pt-status-line::after { width: 18px; } .pt-status-target { font-size: 12px; letter-spacing: 0.16em; margin-top: 10px; } /* Progress bars — tighter, smaller text, less inset */ .pt-progress { left: 16px; right: 16px; bottom: calc(4vh + 14px); gap: 10px; font-size: 8px; letter-spacing: 0.16em; } .pt-progress-row .lab { margin-bottom: 4px; } /* Top thin progress bar */ .pt-topbar { top: 4vh; } } /* Phones (≤ 480px) — iPhone 14 Pro Max territory: tighten further */ @media (max-width: 480px) { .pt-brand svg { height: 24px; } /* Single HUD block on each end keeps it readable */ .pt-hud.top { gap: 10px; } .pt-hud.top .pt-hud-block:nth-child(3) { display: none; } .pt-hud.bot .pt-hud-block:nth-child(3) { display: none; } .pt-core { width: min(320px, 82vw); } /* Progress: drop to 2 tracks on the tiniest screens — Render is least useful */ .pt-progress { grid-template-columns: 1fr 1fr; } .pt-progress-row:nth-child(3) { display: none; } .pt-status { bottom: 26%; } } /* Short viewports (landscape phones) — keep stage centered, kill extras */ @media (max-height: 520px) { .pt-status { bottom: 18%; } .pt-eq { display: none; } .pt-core { width: min(280px, 38vh); } }