/* ═══════════════════════════════════════════════════════════ HEXLAND Online — Lobby Styles Phase 5.4 ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Accessibility: honour "reduce motion" globally ─────────── Near-zero (not 0) durations so JS that waits on transitionend/animationend (e.g. mg-tab-pulse, badge-shake, the .*-pop menus) still fires its callbacks, while ambient/looping motion effectively stops for users who ask for calm. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ── Theme variables ──────────────────────────────────────── */ :root { --ink-rgb: 255, 255, 255; --inset-rgb: 0, 0, 0; /* Heights of the fixed lobby header + announcement ticker. Used to butt the ticker against the header and to offset sticky panel headers below them. Header grows to 86px on mobile (overridden in the ≤540px media query). */ --lobby-header-h: 70px; --lobby-ticker-h: 30px; --page-grad-1: rgba(77, 196, 245, .18); --page-grad-2: rgba(120, 80, 220, .18); --page-base: #12101e; --body-bg: #1a1228; --lobby-hex: url('Lobby/bg/lobby-hex-dark-desktop.svg'); --text-strong: #fff; --text-cream: #f5e8c0; --text-input: #f0eada; --text-cool: #e8edf4; --text-cool-2: #d7deea; --modal-backdrop: rgba(8, 6, 16, .62); --modal-bg: rgba(22, 18, 36, .98); --msg-backdrop: rgba(0, 0, 0, .55); --msg-bg: #1c2530; --gc-backdrop: rgba(0, 0, 0, .65); --gc-bg: #1e1830; --option-bg: #2a2722; --gc-option-bg: #1e1830; --text-amber: #f0a060; --text-red: #ff7070; --text-red-2: #ff9090; --text-tan-link: #c8a96e; --text-muted-grey: #cdd6e0; --text-grey: #ccc; --avatar-ring: #888; --text-mode-tideport: #7ec8f0; --text-mode-space: #c09cf0; --text-header-rgb: 245, 232, 192; /* ── Motion system (Lobby Vision §4) ─────────────────────── ONE easing + three speeds for the whole lobby. "Everything settles, nothing snaps": a gentle ease-out with no overshoot (calm, not bouncy). micro — taps, presses, toggles (tactile confirmation) standard — panels, cards entering, hover elevation ambient — breathing background / looping atmosphere (subconscious) */ --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-micro: 120ms; --dur-standard: 240ms; --dur-ambient: 6s; --elev-shadow: 0 6px 20px rgba(0, 0, 0, .28); --focus-ring: #f0a030; /* amber — matches the existing .rooms-cdd-trigger focus */ /* ── Ambient background system (Step 5) ──────────────────── Token-driven so any future theme (Classic / Tideport / Space / seasonal) restyles the living backdrop by overriding these — no structural change. Colours reuse the (previously unused) theme page-accents, so light/dark and future themes inherit automatically. Breathing is deliberately slow enough to stay subconscious. */ --ambient-glow-1: var(--page-grad-1); --ambient-glow-2: var(--page-grad-2); --ambient-breath-dur: 14s; --ambient-opacity-min: .55; --ambient-opacity-max: .9; --ambient-layer: radial-gradient(60% 50% at 22% 18%, var(--ambient-glow-1), transparent 70%), radial-gradient(55% 45% at 82% 86%, var(--ambient-glow-2), transparent 72%); } /* Light theme: the amber focus ring is low-contrast on the pale background, so deepen it there (same token, light-only override — no global colour change). */ :root[data-theme="light"] { --focus-ring: #b5560a; } /* Per-world ambient tint (B2) — overrides only the ambient glow colours; the layer composition/animation is unchanged. Classic keeps the default accents. Driven by data-lobby-world on (set from the player's recent game). */ :root[data-lobby-world="tideport"] { --ambient-glow-1: rgba(38, 152, 160, .16); --ambient-glow-2: rgba(20, 90, 140, .14); } :root[data-lobby-world="space"] { --ambient-glow-1: rgba(120, 90, 220, .16); --ambient-glow-2: rgba(70, 60, 150, .14); } /* New-player "start here" hint (A1) — calm, dismissible, uses the shared entrance and token styling; the ✕ inherits Step 2 press/focus as a