@import url("tokens.css"); /* Shared DOM lobby styles. Source of truth: web/lobby/lobby.css - the copy inside a game's WebGL template is written by tools/sync-lobby.sh. Per-game colours arrive as --lobby-* custom properties set on from LOBBY_CONFIG.palette (see lobby.js applyPalette). Self-hosted on purpose: no CDN, so the page still renders off Cloudflare static assets (or a warm cache) with no third-party request. Display faces only - body copy stays on the system stack, so nothing load-bearing waits on a font that may still be swapping in. (Press Start 2P was the wordmark face 2026-08-18 -> 2026-08-23; Unbounded replaced it for every game per user direction.) */ /* Unbounded, the astroball.io homepage's display face and THE display face for every game - wordmark, team labels, CTAs. Its @font-face now lives in the tokens.css imported above, one declaration for every surface on the origin; the woff2 still ships beside this file. */ /* The results screen's two faces, self-hosted for the same reason (latin subset, from Google Fonts' own woff2). Inter is the variable roll, so one file covers 500 -> 900; Montserrat is the static 900 italic and nothing else, because the display face is only ever used for the team names and the score numerals. Both are scoped to .lobby-results below - the rest of the lobby keeps the system stack, so no other phase waits on a font. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("Inter-latin.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: italic; font-weight: 900; font-display: swap; src: url("Montserrat-Italic900-latin.woff2") format("woff2"); } :root { --lobby-bg: #04060d; --lobby-panel: rgba(18, 19, 30, 0.72); --lobby-panel-border: rgba(255, 255, 255, 0.08); /* ONE house theme for every game (user direction 2026-08-23): the lobby always wears the astroball.io colours - accent, button gradient, backdrop. Games no longer set palette colour overrides (the mechanism still works; the 4v4 mock preset exercises it). The values below that every surface on the origin shares now come from tokens.css; the ones that stay literal here (--lobby-bg, the panel skins, the two dim inks) are the lobby's own and deliberately differ from the flat pages'. */ --lobby-accent: var(--ig-accent); --lobby-danger: var(--ig-danger); --lobby-text: #f4f6ff; --lobby-text-dim: #9aa3c7; --lobby-radius: var(--ig-radius); /* The overlay's left/right gutter. A token rather than a literal because voice.css has to add the voice rail's width to the LEFT one and still land on the same gap as the right - two copies of this clamp would drift the moment either is touched. */ --lobby-pad-x: clamp(20px, 4vw, 56px); --lobby-display: var(--ig-display); /* The results screen's own pair (S1 "Nebula Halves"): a heavy italic display face for the team names and the score numerals, Inter for everything else on that screen. */ --lobby-results-display: "Montserrat", "Inter", -apple-system, Helvetica, Arial, sans-serif; --lobby-results-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* The plain terminal panel's message slot (contract addendum v1.4, kept in v1.5). It is a MIN height: without an `endgame` the panel has only this line and the Play again button, so nothing below it can move when a longer message arrives. */ --lobby-ended-headline-h: 92px; /* Width of the results screen's centre column - the score tiles, the team totals and the award cards all live in it, and the two team halves take exactly half the rest each. */ --lobby-results-centre-w: clamp(232px, 23vw, 420px); /* ---- the two-column pre-game shell (A1) ---- The shell is one width for every pre-game phase, the same way the old 520px panel was: the header and the two columns never move between boot, idle, connecting and lobby. The right column alone is the old panel's job, so --lobby-main-w is what a single-column layout (a game with nothing to say in the left column) falls back to. */ --lobby-shell-w: 1180px; --lobby-main-w: 520px; --lobby-col-gap: clamp(24px, 3vw, 44px); /* A team column's own geometry, shared by the panel, its slots and the drag states. */ --lobby-team-radius: 22px; /* Compact cards (Jordan 2026-08-26, "option B"): the card unit shrinks ~54 -> ~42px so a 5-row column, the bench, the invite row and Start all clear the fold. Still a clamp, for the reason the old one was: a short window gets a shorter card rather than a scrollbar. */ --lobby-card-radius: 11px; --lobby-card-h: clamp(38px, 5.5vh, 44px); /* Primary action (.lobby-cta): the homepage's .play pill, and its scaled-up variant. */ --lobby-cta-h: 52px; --lobby-cta-big-h: clamp(58px, 9vh, 72px); --lobby-cta-ink: var(--ig-cta-ink); /* The astroball.io homepage button component: thick face + a gradient pair. A game that wants a single-colour pill just leaves the pair at its accent default. */ --lobby-cta-font: var(--lobby-display); /* The astroball.io homepage's PLAY NOW gradient (red -> violet) - the one button look, every game, every screen. */ --lobby-cta-grad-a: var(--ig-cta-grad-a); --lobby-cta-grad-b: var(--ig-cta-grad-b); /* Weight for --lobby-display text (title, team labels). Unbounded is a variable face, so the thick homepage weight is the default; a single-weight face overrides via palette. */ --lobby-display-weight: 900; /* Whole overlay backdrop as one overridable value: near-black base with the astroball.io red/blue glows - the house atmosphere, same on every game, light text well clear of AA. Static - nothing here animates, so there is nothing for prefers-reduced-motion to turn off. Overridable via LOBBY_CONFIG.palette ({ backdrop: "..." }) like every token, though no shipped game does. */ --lobby-backdrop: radial-gradient(58% 42% at 15% 12%, rgba(229, 26, 26, 0.2), transparent 70%), radial-gradient(56% 42% at 85% 14%, rgba(0, 102, 255, 0.22), transparent 70%), radial-gradient(70% 50% at 50% 88%, rgba(0, 102, 255, 0.1), transparent 74%), var(--lobby-bg); } /* `align-items: flex-start` IS the composition: the shell is top-anchored in every phase (see .lobby-panel), and a shell taller than the viewport starts at the top and scrolls. */ #lobby-overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: center; /* Header breathing room trimmed by a third top and bottom (user direction 2026-08-23) - the saved height goes to the content below. */ padding: clamp(13px, 3vh, 27px) var(--lobby-pad-x) 40px; box-sizing: border-box; overflow-y: auto; background: var(--lobby-backdrop); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--lobby-text); } #lobby-overlay * { box-sizing: border-box; } #lobby-overlay.lobby-hidden { display: none; } /* ---------- page transitions (T1, T2, T3, T5) ---------- Every "page" the lobby has now arrives instead of appearing: the first paint, each pre-game phase change, the departure into the match, and the way back from a results screen. Opacity and a 6px rise, nothing else - every element is already in its final box when the animation starts (the same rule the results entrance follows), so a transition here can never move anything. T3, lobby -> playing: the overlay fades OUT. `.lobby-hidden` is added in the same frame the fade starts - it is the contract for "the overlay is out of the way" and the match gates read it with no slack after Start - so `.lobby-leaving` is what holds the box on screen for the length of the fade, and it has to out-specify the display: none above. pointer-events go at the FIRST frame: a fade may never delay the canvas becoming clickable. lobby.js wipes the panel and drops `.lobby-leaving` when the fade lands. */ #lobby-overlay { transition: opacity 220ms ease; } #lobby-overlay.lobby-leaving { opacity: 0; pointer-events: none; } #lobby-overlay.lobby-hidden.lobby-leaving { display: flex; } /* T1/T2/T5, the pre-game panel arriving. lobby.js decides who wears the class: the whole panel when the overlay ENTERS panel mode (first paint, and the way back from a results screen), the right column alone when only the phase changed inside it - the left aside is identical in every pre-game phase, so re-fading it would read as flicker. `both` on purpose: a re-render that re-adds the class mid-animation restarts the fade rather than flashing the element in. */ @keyframes lobby-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } #lobby-overlay .lobby-page-enter { animation: lobby-page-in 260ms ease-out both; } /* ---------- T6/T7, the two page fades inside the overlay (CONVEX MODE ONLY) ---------- lobby.js adds both of these only when the convex lobby is driving the page - with the flag off the overlay's markup has to stay byte-identical to the pre-convex lobby, so neither the class nor the copy below ever exists there. T6: the overlay coming BACK from a match. It was display: none, so there is nothing to cross-fade with and no "from" style a transition could start at - an animation is what carries opacity from 0 without the element having been rendered a frame earlier. Content mounts at once; only opacity moves, so the results screen is readable from the first frame it is asked for and its own staggered entrance plays inside this one. T7: one page replaced by a different one while the overlay stays up (lobby -> connecting on Start, results -> lobby on the way back). renderPanel destroys the outgoing page in the frame it builds the new one, so what fades is a still copy pinned over the box the original had: fixed (the overlay scrolls and re-lays-out underneath it), inert, and out of flow, so it can move nothing. It fades out over the incoming page's own entrance - one cross-fade, not two animations on the same content. */ #lobby-overlay.lobby-arriving { animation: lobby-overlay-in 600ms ease both; } @keyframes lobby-overlay-in { from { opacity: 0; } to { opacity: 1; } } #lobby-overlay .lobby-ghost { position: fixed; z-index: 3; pointer-events: none; animation: lobby-page-out 520ms ease-out both; } @keyframes lobby-page-out { from { opacity: 1; } to { opacity: 0; } } /* Minimal veil mode: host-unavailable banner during "playing", game stays visible */ #lobby-overlay.lobby-veil-mode { background: transparent; padding-top: 24px; pointer-events: none; } .lobby-veil-banner { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: rgba(5, 6, 11, 0.9); border: 1px solid var(--lobby-panel-border); border-radius: 999px; padding: 10px 20px; /* No backdrop-filter here: blurring over the live WebGL canvas forces a per-frame compositor readback of the game's output. Opaque-ish background instead. */ } /* ...but never while the overlay is on its way out (T3). The veil -> playing exit keeps the banner in the DOM for the length of the fade, and the pill's own pointer-events: auto out-specifies the inertness `.lobby-leaving` puts on the overlay - which would leave a click-swallowing pill hanging over the canvas for the whole fade. */ #lobby-overlay.lobby-leaving .lobby-veil-banner { pointer-events: none; } /* One width for every phase, so the shell's edges never jump either. Top-anchored ALWAYS (user direction 2026-08-23, superseding the brief centred period): the overlay's own align-items: flex-start + padding-top clamp place the shell, so every phase starts from the same line and content that arrives later extends downward - no vertical re-composition between screens, same rule the original 520px panel shipped with. */ .lobby-panel { width: 100%; max-width: var(--lobby-shell-w); display: flex; flex-direction: column; gap: clamp(15px, 3vh, 32px); } /* Header band: REMOVED in contract addendum v1.16 (plans/GLOBAL_HEADER_PLAN.md). The panel used to open on a `.lobby-topbar` — the wordmark centred on the shell with the HOME pill, the Leaderboard pill, the account chip and the CLAIM HOST pill pinned around it. All five are page chrome, and the site has one header for every page now (web/shell/src/SiteHeader.tsx); the only one of them that was lobby STATE rather than furniture, claim-host, reaches that header through the `ig:lobby-chrome` seam instead (src/lobby-port/lobby/pageChrome.ts). The panel opens on its columns, and `.lobby-topbar`, `.lobby-topbar-left`, `.lobby-topbar-right`, `.lobby-home`, `.lobby-claim-host`, `.lobby-auth-pill`, `.lobby-leaderboard-link`, `.lobby-head` and `.lobby-title` went with the markup that wore them. */ /* The two columns. Left = what the game is (video + how to play), right = what you do next. `.lobby-columns-single` is the fallback for a page that supplied neither a video nor any HOW TO PLAY copy: the right column alone, centred at the old panel width. */ /* Centred, not top-aligned: the two columns are independent of each other's length - the left one is the same height in every phase, the right one is two fields on the entry screen and a full roster in the lobby - so anchoring both to the top stranded a quadrant of empty space beside whichever was shorter. Centring reads as one composition at every roster size. */ .lobby-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--lobby-col-gap); /* Top-aligned on purpose (2026-08-23): the two columns read from the same start line in every phase, and the shell itself is top-anchored in the viewport (see .lobby-panel). */ align-items: start; } .lobby-columns-single { grid-template-columns: minmax(0, var(--lobby-main-w)); justify-content: center; } .lobby-aside { display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 26px); min-width: 0; } /* The left column's 16:9 anchor: LOBBY_CONFIG.gameplayVideo as a