/* ============================================================ Lobby — "show off" talent circle (bottom-left corner). The page's main attraction: the visible, only trigger for the local cursor's skin signature move (it replaced the hidden Q keybind). Hover teases it (GSAP + DrawSVG, see talent-circle.js); a click fires the move. All --ink so it flips with the lights, matching lobby-tips.css. GSAP owns transform/opacity at runtime. CSS here is the static look + layout + a no-GSAP / reduced-motion resting state. ============================================================ */ .talent { position: fixed; left: clamp(var(--space-4), 3vw, var(--space-6)); bottom: clamp(var(--space-4), 4vh, var(--space-6)); width: clamp(96px, 9vw, 124px); height: clamp(96px, 9vw, 124px); display: grid; place-items: center; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; color: var(--ink); z-index: 5; /* above the tips background layer (z 1) */ -webkit-tap-highlight-color: transparent; transition: color var(--duration-base) var(--ease-out-expo); } .talent:focus { outline: none; } .talent:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 50%; } /* Hand-drawn ring — DrawSVG redraws it on hover. overflow visible so the sparkle and any scale flourish aren't clipped. */ .talent__ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .talent__ring { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; transition: stroke var(--duration-base) var(--ease-out-expo); } /* Little 4-point sparkle pinned to the top of the ring — JS pops it in on hover and bursts it on a successful click. Hidden at rest. */ .talent__spark { fill: var(--ink); opacity: 0; transition: fill var(--duration-base) var(--ease-out-expo); } /* Centre doodle text. Overrides .doodle's muted colour + tilt (this file loads after design-system.css, so single-class specificity is enough). */ .talent__label { position: relative; color: var(--ink); font-size: clamp(18px, 1.7vw, 23px); line-height: 1; text-align: center; transform: rotate(-6deg); pointer-events: none; transition: color var(--duration-base) var(--ease-out-expo); } /* ============================================================ Networked show-off burst — the ring + sparkle effect mirrored on a remote player's dot when they hit their circle (talent-circle.js burstAt + net/event_handler.js). Mounts on at the dot's viewport point; JS sets color to the room's current --ink. ============================================================ */ .showoff-burst { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 60; /* above the dots, below the real cursor */ } .showoff-burst__svg { position: absolute; left: 0; top: 0; width: 120px; height: 120px; overflow: visible; } .showoff-burst__ring { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; } .showoff-burst__spark { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; /* centre the 7px box on the dot point */ background: currentColor; border-radius: 1px; } /* ---- Resting / fallback state ---------------------------------------------- When GSAP can't run (not loaded) or the user prefers reduced motion, the teaser never boots — so give the ring a plain visible rest + a CSS-only hover lift so the control still reads and reacts. */ @media (prefers-reduced-motion: reduce) { .talent { transition: color var(--duration-base) var(--ease-out-expo); } .talent:hover .talent__label { color: var(--ink); } }