/* 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 (variable 400-900, latin subset): THE display face for every game - wordmark, team labels, CTAs. Self-hosted like the rest; the file is the same one web/astroball-home ships. */ @font-face { font-family: "Unbounded"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("unbounded-latin.woff2") format("woff2"); } /* 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). */ --lobby-accent: #a34bff; --lobby-danger: #ff6b6b; --lobby-text: #f4f6ff; --lobby-text-dim: #9aa3c7; --lobby-radius: 16px; --lobby-display: "Unbounded", "Arial Black", -apple-system, sans-serif; /* 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); /* One source of truth for the title size: .lobby-title derives its fixed height from it, so the two can never drift apart at a breakpoint. */ --lobby-title-size: clamp(32px, 6vw, 48px); /* ---- 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; --lobby-card-radius: 14px; --lobby-card-h: clamp(50px, 7vh, 60px); /* 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: #06070c; /* 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: #ff2e3e; --lobby-cta-grad-b: #784bff; /* 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) clamp(20px, 4vw, 56px) 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; } /* 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. */ } /* 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: the wordmark centred on the shell, the HOME pill pinned to its left. The pill is taken out of flow only once there is room beside the title for it; below that it sits above the title in normal flow, so it can never overlap the wordmark. */ .lobby-topbar { position: relative; display: flex; flex-direction: column; align-items: center; } .lobby-home { align-self: flex-start; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--lobby-panel-border); background: rgba(255, 255, 255, 0.05); color: var(--lobby-text); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; } .lobby-home:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); } .lobby-home svg { width: 14px; height: 14px; flex: 0 0 auto; } .lobby-head { text-align: center; max-width: 100%; min-width: 0; } /* 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