/* zoom.css — RUNIVERSE-DARPA-ZOOM-1. One-handed zoom control: [+] [slider] [-] at the right edge (thumb reach), 44 px targets, visible when touched / zoomed / at start, then a thin handle. */
.rz-root { position: fixed; right: max(4px, env(safe-area-inset-right)); bottom: 168px; width: 44px; height: clamp(136px, calc(100vh - 168px - 56px), 232px); z-index: 240; display: flex; flex-direction: column; align-items: stretch; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; font-family:var(--rf-ui); }
@supports (height: 100dvh) { .rz-root { height: clamp(136px, calc(100dvh - 168px - 56px), 232px); } }
.rz-btn { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 2px solid rgba(14,175,155,0.75); background: rgba(9,7,27,0.82); color: #c7dcd0; font:var(--rf-fs-ui2)/30px var(--rf-ui); display: grid; place-items: center; cursor: pointer; pointer-events: auto; touch-action: manipulation; transition: opacity .18s ease, transform .18s ease; }
.rz-btn:active { background: rgba(14,175,155,0.35); }
.rz-track { position: relative; flex: 1 1 auto; min-height: 44px; width: 44px; pointer-events: auto; touch-action: none; cursor: ns-resize; outline: none; }
.rz-rail { position: absolute; left: 50%; top: 14px; bottom: 14px; width: 8px; margin-left: -4px; border-radius: 4px; background: rgba(9,7,27,0.82); border: 1.5px solid rgba(14,175,155,0.75); transition: width .18s ease, margin-left .18s ease, opacity .18s ease; }
.rz-thumb { position: absolute; left: 50%; width: 28px; height: 28px; margin-left: -14px; top: calc((1 - var(--rz-t, 0.5)) * (100% - 28px)); border-radius: 50%; background: #0eaf9b; border: 2px solid #c7dcd0; box-shadow: 0 0 0 2px rgba(9,7,27,0.82), 0 2px 8px rgba(0,0,0,0.5); transition: width .18s ease, height .18s ease, margin-left .18s ease, border-radius .18s ease, opacity .18s ease; }
.rz-track:focus-visible .rz-thumb { box-shadow: 0 0 0 3px #ffe68c, 0 2px 8px rgba(0,0,0,0.5); }
/* idle: buttons gone, thin rail + small notch only (the strip still catches a touch and wakes up) */
.rz-idle .rz-btn { opacity: 0; pointer-events: none; transform: scale(0.85); }
.rz-idle .rz-rail { width: 3px; margin-left: -1.5px; opacity: 0.55; border-width: 1px; }
.rz-idle .rz-thumb { width: 8px; height: 22px; margin-left: -4px; border-radius: 4px; opacity: 0.7; border-width: 1px; }
@media (hover: hover) and (pointer: fine) { .rz-root { right: 14px; } }
@media (prefers-reduced-motion: reduce) { .rz-btn, .rz-rail, .rz-thumb { transition: none; } }