/* ═════════════════════════════════════════════════════════════════════════════ THE OPENING FLOW — landing → configure → queue — and the moving star field. ⭐ THIS FILE AND newlobby.js ARE THE WHOLE CHANGE. app.js, style.css, tilt.css and tilt.js are untouched, so the board, the rail, the hand tray, the log and every other in-game behaviour are the same code they were. The only thing that reaches past the opening screens is `#cof-bg`, the star field, which is a deliberate addition. HOW IT WORKS. The original lobby markup stays in the DOM and stays wired to app.js; it is only hidden. Every control here drives the REAL control by calling `.click()` on it, which fires handlers regardless of visibility. One implementation of "start a game", and it is app.js's. Delete these two files and the old lobby is back. WHAT IT TAKES FROM WHERE [user, 2026-08-25] · the LOOK — from mockups/archive/2026-08-25-config-page-comp.html: the hero deck cards, their double chamfered frames, the faction medallions, the flat ground. · the FLOW — from mockups/archive/2026-08-25-opening-flow.html: landing first, one question per screen, Advanced Options collapsed, one Play Now, and a queue that finds a human or falls back to a random AI deck. ⚠️ EVERY CLASS IS PREFIXED `cfg-` and every rule inside the screens is qualified with an id. `.deck` alone appears 19 times in style.css as a mat zone, and style.css also styles bare `button`, `h1`, `input` and `select` plus `.lobby h1` — a `.cfg-*` class is (0,1,0) and loses to `.lobby h1` (0,1,1). CLAUDE.md §6.1 #5 records what a reused class name costs here. ⚠️ EVERY TOKEN IS SCOPED, never `:root`. The client's --cyan/--panel/--edge drive the board; redefining them globally would restyle the game from a file that claims not to. ══════════════════════════════════════════════════════════════════════════ */ @property --cfg-glow { syntax:''; inherits:true; initial-value:#6fe6f1; } /* ── the star field ───────────────────────────────────────────────────────── `z-index:-1` on a direct child of paints ABOVE the canvas (which carries body's own background) and BELOW every piece of in-flow content — so it needs no z-index anywhere else and can never get in front of the board. ⚠️ Never give a transform/filter/perspective: that would re-anchor this fixed element to it and break it (CLAUDE.md §6.1). */ #cof-bg{position:fixed; inset:0; z-index:-1; overflow:hidden; background:#05070f; pointer-events:none} #cof-bg video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72} #cof-bg::after{ content:''; position:absolute; inset:0; background: radial-gradient(26% 14% at 95% 0%, rgba(224,85,47,.16) 0%, transparent 72%), radial-gradient(30% 16% at 12% 0%, rgba(24,58,96,.20) 0%, transparent 72%), /* ⭐ TURNED WAY DOWN [user, 2026-08-25]. This wash used to run .18 -> .55 -> .72 down the page and the video sat at .34 behind it, which is why the field read as a hint. It is now .06 -> .16 -> .22 with the video at .72. */ linear-gradient(180deg, rgba(5,7,15,.06) 0%, rgba(5,7,15,.16) 40%, rgba(5,7,15,.22) 100%); } /* ⭐ THE STAR FIELD IS THE BOARD'S BACKGROUND TOO [user, 2026-08-25]. It was already reaching the board — nothing in the table paints an opaque ground: `#table`, `.scene3d`, `#board3d` and `.mat-wrap` are all transparent, `.surface3d` is a translucent gradient and `.mat` is `rgba(10,18,34,.72)`. It was simply too faint to see: measured 0.009 mean frame-to-frame change inside the board area against 0.030 in the page margin, i.e. present and invisible. ⚠️ .90 IS CHOSEN, NOT ASSUMED, and it is the second time this was set by rendering candidates rather than by taste. Four levels were compared on a real board; .60 still read as texture and this is where the field reads as the room the board sits in. ⚠️ THE READABILITY COST WAS MEASURED, NOT WAVED THROUGH. The faintest text on these screens is `--dm` (#8095ab). Against the typical background it holds 6.6:1 at every level tested — stars cover under 1% of the frame, so the usual case does not move. The worst case is a bright star landing directly behind a glyph, and that goes 4.0:1 -> 3.9:1 between the old setting and this one. Going brighter still (video 1.0, almost no wash) took it to 3.6:1 for very little extra, which is why this is not that. */ body.in-game #cof-bg video{opacity:.90} body.in-game #cof-bg::after{ background: radial-gradient(120% 85% at 50% 45%, rgba(5,7,15,.02) 0%, rgba(5,7,15,.16) 100%), linear-gradient(180deg, rgba(5,7,15,.05) 0%, rgba(5,7,15,.05) 100%); } #cof-bg-pause{ position:fixed; right:.6rem; bottom:.6rem; z-index:35; width:1.8rem; height:1.8rem; border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:.6rem; line-height:1; color:#7d93ab; border:1px solid rgba(8,245,255,.22); background:rgba(4,8,16,.55); opacity:.35; transition:opacity .18s, color .18s; } #cof-bg-pause:hover,#cof-bg-pause:focus-visible{opacity:1; color:#dbe8f5} /* ── the original lobby: hidden, alive ────────────────────────────────────── `display:none`, and that is safe precisely because `.click()` still reaches a display:none button. The elements keep their handlers, their state and their IDs. ⭐⭐ KEYED ON `html.cof-skin`, NOT ON A BODY CLASS SET BY newlobby.js — THAT IS THE WHOLE POINT. These rules used to wait for the skin to mount, and the skin waits for app.js's `/api/starters` round trip, so the ORIGINAL lobby painted and sat there for about half a second on every load: measured visible from t=104ms to t=652ms, with the skin arriving at t=717ms. `cof-skin` is set by a three-line inline script in index.html's , which runs before the body is parsed — and this stylesheet is a in too, so it is applied before first paint. The old lobby never renders. ⚠️ That inline script also arms a failsafe which REMOVES the class if the skin never mounts, so a broken newlobby.js still leaves a usable page rather than a blank one. */ /* * ⚠️ THIS LIST LEAKS BY DEFAULT, AND IT HAS. [reported 2026-09-03] * `.spectate-cta` was added to #lobby when spectator mode landed and nobody added it here, so the * old "Spectate a game" button rendered in the top-left corner of the configure screen for weeks — * beside, and then redundant with, the new gold pill. A NEW CHILD OF #lobby IS VISIBLE UNLESS * SOMEONE REMEMBERS THIS BLOCK, which is the wrong default and is why the leak went unnoticed. * `tools/check-lobby-leak.ts` now fails on any unexpected visible child, so the next one is caught * by a test rather than by a person noticing a stray button. * * ⚠️ display:none, NEVER removed: `#cfg-spectate` delegates its click to `#btn-spectate`, which is * inside `.spectate-cta`. A `.click()` still reaches a display:none button — that is the whole * mechanism this skin is built on — but a REMOVED one takes the feature with it. */ html.cof-skin #lobby > .activity, html.cof-skin #lobby > .spectate-cta, html.cof-skin #lobby > h1, html.cof-skin #lobby > .sub, html.cof-skin #lobby > .lobby-actions, html.cof-skin #lobby > .note{display:none !important} html.cof-skin #waitboard{display:none} /* The queue is skinned onto `#waiting` for the same reason the configure screen is skinned onto `#lobby`: app.js already owns when each is shown. Its original children are hidden, not removed — `#big-code` and `#btn-back` are still driven from here. */ html.cof-skin #waiting > h1, html.cof-skin #waiting > .sub, html.cof-skin #waiting > .bigcode, html.cof-skin #waiting > .waiting, html.cof-skin #waiting > .activity, html.cof-skin #waiting > .startrow{display:none !important} html.cof-skin #waiting{max-width:none; margin:0; padding:0; text-align:left} /* ⚠️ `.lobby` IS A 640px CENTRED COLUMN with `text-align:center` and 1.5rem of padding. Left in place it squeezed the layout into a third of the width and wrapped every label. Released only while the skin is mounted. */ html.cof-skin #lobby{max-width:none; margin:0; padding:0 clamp(1rem,2.3vw,2rem) 3rem; text-align:left} /* The client's own top bar draws the SAME wordmark these screens do, so both showed at once. Hidden on the opening screens only; it is already absent in a game, so this is a no-op there and cannot reach the board. The build stamp is unaffected — app.js writes it into `#topmeta` as well, which is the ⓘ pin. */ html.cof-skin body:not(.in-game) .topbar{display:none} /* ⭐⭐ THE OPENING SCREENS MUST BE ABLE TO SCROLL, AND BY DEFAULT THEY COULD NOT. `tilt.css` sets `body.tilt3d{overflow:hidden}` — correct for the board, which must never scroll — and tilt.js adds `tilt3d` ON LOAD at desktop widths, lobby included. When is `overflow:visible` the viewport takes its overflow from BODY, so that one rule silently disabled wheel and touch scrolling everywhere, while `scrollTo()` still worked and `scrollHeight > clientHeight` still reported true — which is why the "▾ MORE BELOW" cue appeared, bouncing, over a page that would not move. ⚠️ A LATENT BUG THIS DESIGN ONLY EXPOSED: the old lobby fitted one screen on a desktop, so nothing ever ran past the fold to reveal it. Scoped to the opening screens — `.in-game` mirrors app.js's own `#lobby.hidden`, so the board keeps `overflow:hidden` exactly as before. */ html.cof-skin body.tilt3d:not(.in-game){overflow:auto} /* ══════════════════════════════════════════════════════════ the screens ═══ Landing → configure → queue. All three live inside #lobby, so all three inherit app.js's own hide when a seat is taken — there is no "close it when the game starts" code to forget. The same structural trick the changelog panel relies on. */ #cof-landing,#cof-cfg,#cof-queue{ display:none; --cy:#6fe6f1; --cy-dim:#3ba9c4; --gd:#f5c451; --ed:rgba(111,230,241,.18); --ed2:rgba(140,170,200,.14); --tx:#dbe8f5; --dm:#8095ab; --vi:#a855f7; --em:#e0552f; /* The comp's four faction colours. Two match the site-wide theme module; Church of Zero and Astrixids do not, because cyan is reserved for selection here and a faction that IS cyan would look permanently pre-selected. */ --f-spawn:#c041e4; --f-nova7:#e7ca04; --f-zero:#7d46a4; --f-astrixids:#64d341; font-family:'Azeret Mono',ui-monospace,monospace; color:var(--tx); } #cof-landing *,#cof-cfg *,#cof-queue *{box-sizing:border-box} #cof-cfg.on{display:block} /* The queue's visibility belongs to app.js — it lives inside `#waiting`, which app.js shows and hides — so it is permanently `.on` and simply inherits that. */ #cof-queue.on{display:flex} #cof-landing.on,#cof-queue.on{ display:flex; flex-direction:column; /* `safe` centring: a plain `center` pushes overflow out of BOTH ends and the top of a scroll container cannot be reached, so a tall screen loses its own header. */ align-items:safe center; justify-content:safe center; /* Leave room for `.lobby-foot` (Update History) so the landing is not one button taller than the viewport for no reason. It still scrolls if it needs to — that is what the body.tilt3d override above is for. */ min-height:calc(100dvh - 8rem); padding:1.5rem 1rem; text-align:center; } /* Reset the client's global element rules inside these screens only. style.css gives every bare