/* ══════════════════════════════════════════════════════════════════════════
   Room Creator "Modern Futuristic Glass" — the SHIPPED DEFAULT Room Creator
   design
   ══════════════════════════════════════════════════════════════════════════
   Activation: DEFAULT. The synchronous <head> script in lobby.html always
           sets `<html data-rc-proto="…">`, defaulting to
           `data-rc-proto="futuristic-glass-room-creator"` when no
           `?prototype=…` query param is present (or when the param IS
           `futuristic-glass-room-creator`, for explicit/backward-compatible
           links). `?prototype=royal-tactile` or
           `?prototype=steampunk-room-creator` switch to those two concepts
           instead, kept available for side-by-side comparison — mutually
           exclusive, exactly one active at a time.

   Scope:  every rule below is prefixed with
           `html[data-rc-proto="futuristic-glass-room-creator"] #screen-join
           #create-options` (or a descendant of it), EXCEPT the small
           "outer-chrome takeover" block immediately below, which targets
           `#screen-join` itself (see its own comment for why that is still a
           narrowly-scoped, presentation-only change). Nothing in this file
           touches any other screen, modal, or shared component.

   Status: presentation-only prototype for design review, with real
           additions: Game Mode is a genuine cascade/disclosure popover over
           three REAL radios (#rc-game-mode-competitive/-tournament/-tutorial,
           markup in lobby.html) — not the inert decorative row the other two
           prototypes use, and not a native <select> either (styled/behaves
           identically to the Pace popover instead — see lobby.html, "Game
           Mode disclosure"). Tournament/Tutorial are native-`disabled`
           placeholder options; none of the three carry any name/value read
           by lobby.js, and none are part of _validateCreateRoom() or the
           CREATE_GAME payload. Every OTHER control keeps its original id,
           name, value, and event binding from lobby.html / lobby.js — this
           file only repaints them. Pace's accessible disclosure (open/close/
           Escape/outside-click/keyboard/focus-return) reuses the SAME script
           already shipped for the steampunk prototype (see lobby.html, "Pace
           disclosure") — extended to also activate for this prototype, since
           the interaction is identical and prototype-agnostic; the two real
           radios (#create-mode-realtime / #create-mode-async) remain the
           single source of truth.

   Assets: no raster/photographic textures — CSS + inline SVG (chevrons, gear,
           back-arrow, hex-pattern tile) only, per this prototype's "recreate
           with maintainable HTML/CSS/SVG" brief. No image-generation tool was
           used or needed.

   Revert: delete the <link rel="stylesheet" href="room-creator-prototype-futuristic.css">
           tag in lobby.html, the `futuristic-glass-room-creator` branch of the
           activation script, this prototype's own branch condition inside the
           Pace-disclosure <script> (revert it to steampunk-only), the
           `.rc-fg-header` / `.rc-fg-gamemode-group` markup, and delete this file.

   Reference: Frontend_redesign/room-creator/Gpt-output/
              concept-2-modern-futuristic-glass.png
   Companion doc: Frontend_redesign/03-room-creator-futuristic-glass-prototype.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Outer-chrome takeover while the Create Room form is open ────────────
   #screen-join is a shared `.lobby-card` (its own background/border/shadow),
   normally containing: the "🎲 Room Creator" header (.rooms-hd), the shared
   Your-Name field (#name-field-wrap — relocated INSIDE #create-options by
   the additive script at the end of this file's companion <script> in
   lobby.html, see "Name field relocation"), the primary action buttons
   (#primary-actions), and #create-options as one sibling among others. With
   the glass panel the shipped default, showing all of that AROUND it as well
   produced a "card inside a card" — #create-options must be the only visible
   surface once the form is open, not nested inside another one.

   Scoped with :has(#create-options:not([style*="none"])) — the same
   already-used pattern in lobby.css's own ≤540px #primary-actions rule — so
   the picker view (before "Create Room" is clicked) is completely
   unaffected: #screen-join keeps its normal card chrome, header, and
   buttons right up until #create-options actually opens. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join:has(#create-options:not([style*="none"])) {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join:has(#create-options:not([style*="none"])) > .rooms-hd,
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join:has(#create-options:not([style*="none"])) > #primary-actions,
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join:has(#create-options:not([style*="none"])) > #start-hint {
  display: none;
}
/* #lobby-error sits AFTER #create-options as a sibling (top-level "create
   failed" messages, e.g. a server rejection) — kept visible and functional,
   just recolored so it reads correctly against the now-transparent
   #screen-join instead of the old light card ground. (It is a SIBLING of
   #create-options, not a descendant, so it cannot see that panel's own
   --fg-* custom properties — the color is written literally here.) */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join:has(#create-options:not([style*="none"])) > #lobby-error {
  color: #ff8686;
}

html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options {
  /* Local palette — scoped custom properties, never written to :root, so
     nothing outside this panel can see or inherit them. This is the DARK
     theme (the original, still-default palette). A LIGHT theme override
     block redefining every one of these tokens lives further down this file
     ("Futuristic light mode"), scoped to
     html[data-rc-proto="futuristic-glass-room-creator"][data-theme="light"]
     — the same [data-theme="light"] attribute the app's own existing theme
     mechanism already sets on <html> (see lobby.html's synchronous <head>
     theme script, and lobby.css's own `:root[data-theme="light"]` rules —
     confirmed by reading both before writing this, not assumed). Neither
     theme is scoped by media query — this pinned-regardless-of-system-theme
     behavior matches the royal-tactile/steampunk prototypes' own precedent;
     only the app's OWN persisted/explicit theme choice (not
     prefers-color-scheme directly) switches it, exactly like every other
     themed part of this app. Every value below is written as a whole-value
     token (full gradient stop list, full box-shadow list, etc.) rather than
     decomposed into individual channels, specifically so the light-mode
     block can redefine "the exceptional component rules that genuinely need
     separate treatment" (softer shadows, reduced glow) by overriding ONE
     token each, without duplicating whole rule blocks. */
  --fg-bg-1:        #0a1424;
  --fg-bg-2:         #0d1c33;
  --fg-bg-3:         #050a14;
  --fg-panel-top:    rgba(20, 36, 62, .74);
  --fg-panel-bot:    rgba(6, 11, 20, .88);
  /* CORRECTION (sticky header background match): the sticky header's own
     backing previously used the flat --fg-bg-3 (#050a14) fill, but the
     panel's OWN background at the header's fixed position (its top ~10-15%,
     where the panel's radial cyan glow + 165deg linear gradient haven't yet
     progressed far from --fg-panel-top) renders much closer to
     --fg-panel-top itself — rendered-pixel sampling measured the panel's
     real color immediately below the header at rgb(19,33,57), while the old
     flat #050a14 header measured rgb(5,10,20): a clearly visible seam.
     --fg-header-bg reuses --fg-panel-top's exact hue at a raised, near-
     opaque alpha (enough to still hide scrolled-past text/controls, which
     --fg-panel-top's own .74 is too translucent to reliably do) instead of
     an unrelated color — one shared source for "what the top of this panel
     looks like," consumed by both the panel's own gradient (via
     --fg-panel-top) and the header's backing (via this token), rather than
     the header independently picking a different token. See
     tools/room-creator-futuristic-sticky-bg-check.js for the rendered
     verification. */
  --fg-header-bg:    rgba(20, 36, 62, .94);
  --fg-cyan:         #6fe0ff;
  --fg-cyan-bright:  #bdf3ff;
  --fg-cyan-dim:     rgba(111, 224, 255, .32);
  --fg-blue:         #4f7fff;
  --fg-violet:       #9d7bff;
  --fg-text:         #eef8ff;
  --fg-text-dim:     rgba(238, 248, 255, .7);
  --fg-text-faint:   rgba(238, 248, 255, .5);
  --fg-label:        #7fd6ff;
  --fg-error:        #ff8686;
  --fg-error-border: #ff5f5f;
  --fg-focus:         #c9f6ff;
  --fg-hairline:      rgba(111, 224, 255, .14);
  /* Control face (Game Mode/Pace triggers, Room Name, Number of Players,
     Game Setup) and popup face (the two dropdown panels) — previously
     hardcoded literals shared via repeated declarations; now tokens so
     light mode can swap them without duplicating the whole selector list. */
  --fg-control-top: rgba(28, 48, 78, .62);
  --fg-control-bot: rgba(10, 18, 32, .68);
  /* CORRECTION (dark popup separation): the popup face was a near-match for
     the CLOSED control face once composited (popup #17263f / #0b1524 vs.
     control rgba(28,48,78,.62)/rgba(10,18,32,.68) blended over the same
     panel background land within a few RGB values of each other — measured
     via tools/room-creator-futuristic-dark-popup-check.js). Popups are now
     deliberately MORE opaque (.95/.97 vs. the control's .62/.68) AND more
     saturated/brighter than either the panel or the controls, so the
     elevated surface reads as its own layer rather than a continuation of
     what's behind it. --fg-popup-border/-row-hover/-divider are new — the
     popup previously had NO border of its own (relying on box-shadow
     alone) and its rows had no hover state and a barely-visible divider
     (var(--fg-hairline), .14 alpha, shared with other unrelated hairlines). */
  --fg-popup-top:    rgba(35, 74, 124, .95);
  --fg-popup-bot:    rgba(20, 41, 74, .97);
  --fg-popup-border: rgba(111, 224, 255, .55);
  --fg-popup-row-hover: rgba(111, 224, 255, .14);
  --fg-popup-divider: rgba(180, 225, 255, .22);
  --fg-cta-1: #6a4ff0;
  --fg-cta-2: #4f7fff;
  --fg-cta-3: #3fd0ff;
  --fg-particle-opacity: .7;
  --fg-hex-opacity: .12;
  --fg-panel-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 1px 0 rgba(190, 235, 255, .18),
    inset 0 0 40px rgba(80, 140, 255, .05),
    0 0 0 1px rgba(111, 224, 255, .12),
    0 18px 48px rgba(2, 5, 12, .55),
    0 0 32px rgba(90, 170, 255, .08);
  --fg-control-shadow:
    inset 0 1px 0 rgba(190, 235, 255, .14),
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    inset 0 -8px 16px rgba(0, 0, 0, .22);
  /* Stronger elevation than the panel's own shadow: a deeper drop shadow
     (so the popup visibly casts a shadow onto what's beneath it, unlike a
     flush-mounted control), a restrained outer cyan bloom (distinguishes an
     ELEVATED surface from a flat one without turning into a glow that
     fuzzies the text), and a brighter inset top highlight (a glass-edge
     reflection, stronger than the .14-alpha one shared by controls). */
  --fg-popup-shadow:
    0 20px 44px rgba(2, 5, 12, .72),
    0 0 30px rgba(90, 170, 255, .24),
    inset 0 1px 0 rgba(210, 240, 255, .3);
  --fg-cta-shadow-a:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 0 0 1px rgba(111, 224, 255, .25),
    0 8px 22px rgba(60, 90, 220, .38),
    0 0 26px rgba(111, 170, 255, .28);
  --fg-cta-shadow-b:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 0 0 1px rgba(111, 224, 255, .4),
    0 8px 26px rgba(60, 90, 220, .46),
    0 0 38px rgba(111, 170, 255, .42);
  --fg-title-shadow: 0 0 18px rgba(111, 224, 255, .55), 0 0 4px rgba(255, 255, 255, .4);
  --fg-clip-card: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px),
                           calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  --fg-clip-chip: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px),
                           calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  --fg-clip-pill: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px),
                           calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);

  position: relative;
  isolation: isolate;   /* keeps the decorative ::before/::after particle layers (z-index) local */
  display: flex;
  flex-direction: column;
  gap: 14px;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(111, 224, 255, .10), transparent 60%),
    linear-gradient(165deg, var(--fg-panel-top), var(--fg-panel-bot) 65%, var(--fg-bg-3));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--fg-cyan-dim);
  border-radius: 20px;
  clip-path: var(--fg-clip-card);
  box-shadow: var(--fg-panel-shadow);
  padding: 26px 20px 22px;
  color: var(--fg-text);
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  /* Desktop containment (§11): a deliberate portrait-like panel, not fields
     stretched across the whole lobby column. */
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Per-item tooltip tokens — scoped to `html[data-rc-proto="…"]` itself,
   NOT nested under #create-options like every other token in this file.
   #rc-fg-tooltip lives as a direct child of <body> (see lobby.html for
   why: #create-options's own backdrop-filter makes it a new containing
   block for position:fixed descendants, which would break the tooltip's
   viewport-relative positioning), so it is not a DESCENDANT of
   #create-options and cannot see custom properties scoped there — CSS
   custom properties only inherit down the DOM tree. This block gives the
   tooltip its own small set, reachable because `html` is a real ancestor
   of a body-level node. A deliberately VIOLET-leaning surface (not the
   popup's own blue, not the panel's blue) — same family the Create Room
   CTA already uses elsewhere in this file — so the tooltip reads as its
   own distinct "informational overlay" layer rather than a variant of the
   popup or control surfaces it floats above. Rendered-pixel separation
   confirmed via tools/room-creator-futuristic-tooltip-check.js. */
html[data-rc-proto="futuristic-glass-room-creator"] {
  --fg-tooltip-top:    rgba(92, 68, 168, .97);
  --fg-tooltip-bot:    rgba(46, 32, 88, .98);
  --fg-tooltip-border: rgba(196, 224, 255, .45);
  --fg-tooltip-text:   #f5f0ff;
}
html[data-rc-proto="futuristic-glass-room-creator"][data-theme="light"] {
  --fg-tooltip-top:    rgba(140, 84, 226, .97);
  --fg-tooltip-bot:    rgba(84, 44, 172, .98);
  --fg-tooltip-border: rgba(255, 255, 255, .6);
  --fg-tooltip-text:   #ffffff;
}

/* ── Decorative particle field: faint stars + a very subtle hex-grid tile.
   Both layers live on pseudo-elements of the panel itself — never separate
   DOM nodes, so they are automatically excluded from the accessibility tree,
   never receive focus, and (pointer-events: none) can never intercept a
   click intended for a real control. ─────────────────────────────────────── */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--fg-particle-opacity);
  background-image:
    radial-gradient(1.6px 1.6px at 10% 9%, #d8f6ff 0%, transparent 60%),
    radial-gradient(1.1px 1.1px at 78% 6%, #9fd8ff 0%, transparent 60%),
    radial-gradient(1.3px 1.3px at 92% 22%, #d8f6ff 0%, transparent 60%),
    radial-gradient(1px 1px at 6% 34%, #bdeaff 0%, transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 46%, #d8f6ff 0%, transparent 60%),
    radial-gradient(1px 1px at 15% 58%, #9fd8ff 0%, transparent 60%),
    radial-gradient(1.2px 1.2px at 95% 66%, #bdeaff 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 4% 78%, #d8f6ff 0%, transparent 60%),
    radial-gradient(1px 1px at 70% 88%, #9fd8ff 0%, transparent 60%),
    radial-gradient(1.3px 1.3px at 40% 96%, #bdeaff 0%, transparent 60%),
    radial-gradient(1px 1px at 55% 14%, #9fd8ff 0%, transparent 60%),
    radial-gradient(1.1px 1.1px at 30% 70%, #d8f6ff 0%, transparent 60%);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--fg-hex-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath d='M14 0 L28 8.17 L28 24.5 L14 32.67 L0 24.5 L0 8.17 Z' fill='none' stroke='%236fe0ff' stroke-width='0.6'/%3E%3C/svg%3E");
  background-size: 56px 98px;
}
/* Both particle layers use z-index: -1 (rather than promoting every real
   child to a positive z-index) — the standard way to paint a decorative
   pseudo-element behind normal-flow content without disturbing any other
   element's own stacking context. #create-options's `isolation: isolate`
   keeps that negative z-index scoped to this panel only. An earlier version
   of this file instead forced every direct child to `z-index: 1`, which
   promoted BOTH .field-group siblings into their own stacking contexts and
   made the later one (Number of Players) paint over the Pace popover — found
   via tools/room-creator-futuristic-pace-disclosure-check.js, fixed here. */

html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .panel-explain {
  color: var(--fg-text-dim);
  font-size: .84rem;
}

/* ── Header: top tab + "Room Creator" title + glowing-diamond divider ────
   Presentational restatement of the real, accessible "🎲 Room Creator" label
   in .rooms-hd above (aria-hidden here so it is never announced twice). The
   tab is drawn INSET at the very top of the panel (not protruding above its
   outer edge): #create-options carries its own clip-path, and a child
   positioned outside that box's geometry would be clipped by it — the same
   constraint the royal-tactile prototype already documented for its own
   ornament and deliberately avoided.

   CORRECTION (sticky header): the whole group (top tab + title + divider)
   is now `position: sticky` so it stays visible while the form scrolls
   beneath it, instead of scrolling away with everything else. `sticky`
   (not `fixed`) is deliberate: it keeps the header IN normal flow, so it
   already reserves its own box space — no compensating spacer/margin is
   needed on the next element and no content jump occurs when it engages.

   The `top` offset reuses `--rc-fg-mobile-top` — the CSS custom property
   the existing "Mobile top-offset" script (lobby.html, end of <body>)
   already keeps continuously in sync with the REAL rendered bottom edge of
   the fixed site header/ticker, via a ResizeObserver/MutationObserver that
   was already running regardless of viewport width (only its CSS consumer
   was previously mobile-only — see the ≤540px block below, which was the
   only reader before this correction). It is set as an inline custom
   property on #create-options itself and inherits down to this descendant,
   so no JS changes, no new listener, no duplicate measurement was needed to
   extend it here. Two different reference frames apply, handled by the
   ≤540px override further down this file:
     - Desktop/tablet: #create-options sits in normal page flow and the
       PAGE itself scrolls (no ancestor between it and the viewport sets a
       non-visible overflow — confirmed by reading lobby.css), so sticky's
       containing scroll box IS the viewport — `top` must equal the real
       fixed header's height so this header docks just beneath it, never
       under or over it.
     - Mobile (≤540px): #create-options is ITSELF `position: fixed` at
       `top: var(--rc-fg-mobile-top)` and is its own internally-scrolling
       container (see "Mobile: full-page content surface" below) — sticky
       here resolves against THAT box's own padding edge, which already
       starts below the global chrome, so `top: 0` is correct there instead
       (see the ≤540px override).

   z-index: 40 — below the two dropdown popovers (z-index: 50, see below) so
   an open popup always wins if their footprints ever overlap during
   scroll, and far below the Game Setup modal backdrop (z-index: 800). See
   Frontend_redesign/03-room-creator-futuristic-glass-prototype.md,
   "Correction 4" for the full documented stacking order. ────────────────── */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-header {
  display: flex !important;   /* overrides the base style="display:none" */
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: -10px 0 2px;
  position: sticky;
  top: var(--rc-fg-mobile-top, 100px);
  z-index: 40;
  /* position:sticky + a non-auto z-index already establishes this element's
     own stacking context (no separate `isolation: isolate` needed) — the
     ::before below can use a LOCAL negative z-index to sit behind the
     title/ornaments without affecting anything outside this header. */
  padding-top: 4px;
  padding-bottom: 10px;
}
/* CORRECTION (side fade): the backing color (matched to the panel's own
   background at this position — see --fg-header-bg's definition above) was
   previously painted directly on .rc-fg-header itself, spanning its FULL
   width uniformly. Since the header is a flex item stretched to the
   panel's full content width, that produced a crisp, visible rectangle —
   correct color, wrong shape: real panel content (hex pattern, ambient
   glow) is continuous across that width, so a flat-edged block reads as an
   extra layer even when its center color matches perfectly.

   Moved onto its own ::before, masked with a horizontal gradient (mask-
   image, with a -webkit- fallback for Safari) so the SAME color that used
   to have hard left/right edges now fades to fully transparent at both
   sides — CSS mask multiplies the element's own rendered alpha (background
   colour AND backdrop-filter blur both included) by the mask's alpha at
   each point, so both fade out together, not just the color. z-index: -1
   keeps it behind the header's real children (title, top tab, divider —
   see the parent rule's own comment on why that's scoped locally, not
   globally); pointer-events: none, so it can never intercept a click
   intended for whatever's beneath the header once scrolled (it has none of
   its own to receive anyway, purely decorative, matching the existing
   particle pseudo-elements' own precedent). Percentage-based mask stops
   (not fixed pixels) so the fade scales with the header's own width at
   every viewport rather than a flat number that would be too wide on
   mobile or too narrow on desktop. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--fg-header-bg) 0%, var(--fg-header-bg) 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-toptab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 16px;
  background: linear-gradient(180deg, rgba(111, 224, 255, .22), rgba(111, 224, 255, .04));
  border: 1px solid var(--fg-cyan-dim);
  border-top: none;
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-diamond {
  width: 7px;
  height: 7px;
  background: var(--fg-cyan-bright);
  box-shadow: 0 0 6px 1px var(--fg-cyan);
  transform: rotate(45deg);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-title {
  margin: 0;
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: .01em;
  color: var(--fg-cyan-bright);
  text-shadow: var(--fg-title-shadow);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fg-cyan-dim) 20%, var(--fg-cyan-dim) 80%, transparent);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-divider .rc-fg-diamond {
  width: 6px;
  height: 6px;
}

/* ── Scroll margin so the sticky header never hides a focused or
   validation-invalid control. The browser's native scrollIntoView (used by
   both a field receiving keyboard/click focus and by _validateCreateRoom's
   own first-error focus in lobby.js, which calls it with block:'center')
   has no way to know part of the scrollport's top is visually occupied by
   sticky content — scroll-margin-top tells it to treat that much of the
   top as reserved, the standard CSS-only fix for exactly this. Sized as
   the live header offset plus a fixed allowance comfortably larger than
   the header's own rendered height (title + both ornaments) at every
   viewport this file supports, so it only ever over-reserves slightly
   rather than under-reserve and re-introduce the problem. Applied to every
   direct field group plus the two controls that aren't wrapped in one. ── */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options > .field-group,
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options > #game-setup-summary,
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options > #btn-create {
  /* Desktop/tablet frame: the PAGE scrolls (same frame the sticky header's
     own `top` uses above), so this needs the same --rc-fg-mobile-top
     component plus the header's own height allowance. Overridden below for
     ≤540px, where #create-options is its own internal scroll frame that
     already starts at 0 right where the fixed panel begins — see that
     block's comment. */
  scroll-margin-top: calc(var(--rc-fg-mobile-top, 100px) + 110px);
}

/* ── Field labels — bright cyan-blue, small caps-free ─────────────────── */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .field-label {
  display: block;
  color: var(--fg-label);
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .02em;
}

/* ── Shared "glass control" face used by Game Mode, Pace, Room Name, and
   Game Setup — one repeated declaration set (not a shared class) so the real
   markup stays untouched. ─────────────────────────────────────────────────*/
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fake-select,
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-trigger,
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-pace-trigger,
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-toggle-group,
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .np-pref-btns,
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .field-input,
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .game-setup-summary {
  background: linear-gradient(180deg, var(--fg-control-top), var(--fg-control-bot));
  border: 1.5px solid var(--fg-cyan-dim);
  border-radius: 12px;
  clip-path: var(--fg-clip-chip);
  box-shadow: var(--fg-control-shadow);
}

/* ── Game Mode — a cascade/disclosure popover over three REAL radios
   (#rc-game-mode-competitive/-tournament/-tutorial, markup in lobby.html),
   deliberately styled identically to the Pace trigger/panel immediately
   below (same face, height, padding, border, chevron, and open-state
   treatment) — same component family, not a look-alike approximation.
   "Competitive Game" is the product's only supported value today; no
   CREATE_GAME field, no validation. The inert .rc-gamemode-group above stays
   hidden (base style="display:none", not overridden here). ────────────────*/
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-gamemode-group {
  display: flex !important;   /* overrides the base style="display:none" */
  flex-direction: column;
  gap: 6px;
  position: relative;
}
/* CORRECTION: this block previously reserved margin-bottom while open so the
   popup could never visually overlap the row beneath it. That was WRONG per
   an explicit later requirement: these are genuine overlay popovers and MUST
   overlap following controls without moving them — reserving space defeated
   the entire point of position:absolute. .rc-gamemode-radios (below) is
   already absolutely positioned with z-index — removing the flow-affecting
   margin is the fix; the popup now overlays #rc-pace-trigger etc. instead of
   pushing them down. See Frontend_redesign/03-room-creator-futuristic-glass-
   prototype.md, "Correction 3" for the before/after measurements. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  color: var(--fg-text);
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: .96rem;
  cursor: pointer;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options #rc-gamemode-trigger-text {
  flex: 1 1 auto;
  text-align: left;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-trigger-chevron {
  color: var(--fg-cyan);
  font-size: 1rem;
  transition: transform .15s ease;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-trigger[aria-expanded="true"] .rc-gamemode-trigger-chevron {
  transform: rotate(180deg);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-trigger:hover {
  border-color: var(--fg-cyan);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-trigger:focus-visible {
  outline: 2px solid var(--fg-focus);
  outline-offset: 2px;
}

/* The real radio panel: a floating glass popup, collapsed unless .rc-gamemode-open. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-radios {
  display: none;
  flex-direction: column;
  gap: 0;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: linear-gradient(180deg, var(--fg-popup-top), var(--fg-popup-bot));
  /* CORRECTION (dark popup separation): a real perimeter border — the popup
     previously had none, relying only on its box-shadow, which reads as
     "elevated" but not "a distinctly bordered surface" against a similarly
     dark control right beneath it. backdrop-filter softens whatever's
     faintly visible through the popup's own near-opaque (not fully solid)
     fill, reinforcing the glass-elevated read the brief asks for. */
  border: 1.5px solid var(--fg-popup-border);
  border-radius: 12px;
  box-shadow: var(--fg-popup-shadow);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  overflow: hidden;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-radios.rc-gamemode-open {
  display: flex;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  /* --fg-popup-divider (new, .22 alpha, cyan-tinted) replaces --fg-hairline
     (.14 alpha, a generic value shared with unrelated hairlines elsewhere
     in this file) — rows need a visibly distinct divider of their own, not
     the faintest one in the file. */
  border-bottom: 1px solid var(--fg-popup-divider);
  background: transparent;
  color: var(--fg-text-dim);
  cursor: pointer;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt:last-child {
  border-bottom: none;
}
/* Hover — previously absent entirely on popup rows (only the closed
   trigger buttons had a :hover rule), so a mouse user got no feedback
   distinguishing "the row under my cursor" from the rest of the popup. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt:not(.rc-gamemode-opt-disabled):hover {
  background: var(--fg-popup-row-hover);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt:has(input:checked) {
  background: linear-gradient(90deg, rgba(79, 127, 255, .34), rgba(157, 123, 255, .24));
  color: var(--fg-text);
}
/* Selected state must win over plain hover when both apply (resting the
   pointer on the already-checked row) — needed explicitly because the
   hover rule above's extra :not() clause gives it slightly HIGHER
   selector specificity than the plain :has(input:checked) rule, which
   would otherwise let a hover flatten the selected look back to the
   unselected hover tint. Kept subtly brighter than the resting selected
   state so hovering the selected row still gives SOME feedback. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt:has(input:checked):hover {
  background: linear-gradient(90deg, rgba(79, 127, 255, .4), rgba(157, 123, 255, .3));
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt span:first-of-type {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: inherit;
}
/* Visually hide the native radio (still real, still focusable/keyboard-
   operable — only its default browser-drawn circle is removed) — the SAME
   technique lobby.css already uses for .mode-toggle-opt input (Pace's own
   radios), reused verbatim rather than reusing that class name itself, so
   Game Mode's CSS stays fully self-contained. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt:has(input:focus-visible) {
  outline: 2px solid var(--fg-focus);
  outline-offset: -2px;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt input:focus {
  outline: 2px solid var(--fg-focus);
  outline-offset: 2px;
}
/* Disabled options (Tournament, Tutorial) — visibly distinct (dimmed text,
   no-pointer cursor, muted "Coming Soon" badge) but still readable; never
   relies on opacity alone (font-style + explicit muted color + the badge
   text carry the "unavailable" signal too), never focusable/clickable
   (native `disabled` on the radio itself, not aria-disabled + JS blocking). */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt-disabled {
  cursor: not-allowed;
  color: var(--fg-text-faint);
  /* Label + "Coming Soon" badge together are wider than some narrow-viewport
     rows can hold on one line — wrap rather than truncate the label or clip
     the badge, so both stay fully readable at any width. */
  flex-wrap: wrap;
  row-gap: 2px;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt-disabled span:first-of-type {
  flex-basis: auto;
  text-overflow: clip;
  white-space: normal;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt-disabled span:first-of-type {
  font-style: italic;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-soon {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--fg-cyan-dim);
  border-radius: 999px;
  background: rgba(111, 224, 255, .08);
  color: var(--fg-cyan);
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Per-item info/tooltip triggers (.rc-fg-info-btn) — Game Mode's three
   rows are an ordinary flex ROW (.rc-gamemode-opt, above), so the trigger
   is placed as a normal trailing flex item (after the label text and, on
   Tournament/Tutorial, the Coming Soon badge) rather than absolutely
   positioned — that keeps the text span's own existing ellipsis/min-width:0
   truncation correctly aware of the space it needs to share, with no
   separate reserved-space math required. 28px is a full WCAG-comfortable
   touch target even though the visible glyph is smaller. A real button
   (not a styled <span>), so it is independently focusable — Tab reaches it
   right after its row's radio, before the next row — with its own
   focus-visible ring, entirely independent of the (possibly disabled)
   radio beside it. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-info-btn {
  flex: 0 0 auto;
  display: inline-flex !important;   /* overrides the base style="display:none" added in the frontend-style-selector pass — see lobby.html's comment beside the Real-Time/Turn-Based buttons */
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--fg-cyan-dim);
  border-radius: 50%;
  background: transparent;
  color: var(--fg-cyan);
  cursor: pointer;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-info-btn:hover {
  border-color: var(--fg-cyan);
  color: var(--fg-cyan-bright);
  background: var(--fg-popup-row-hover);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-info-btn:focus-visible {
  outline: 2px solid var(--fg-focus);
  outline-offset: 2px;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-info-btn[aria-expanded="true"] {
  border-color: var(--fg-cyan-bright);
  color: var(--fg-cyan-bright);
  background: var(--fg-popup-row-hover);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-info-icon {
  width: 13px;
  height: 13px;
}
/* Pace's own rows (.mode-toggle-opt) are flex-direction:COLUMN (lobby.css
   base rule, shared with steampunk) — a trailing flex item there would
   stack BELOW the label instead of beside it. Absolutely positioned at the
   row's own top-right instead, matching the exact spot the shared
   .mode-info-btn already safely occupied there before it was hidden for
   this scope (see that rule below) — proven not to collide with the radio
   (visually hidden, 1x1px) or the row's own edges. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-toggle-opt .rc-fg-info-btn {
  position: absolute;
  top: 8px;
  right: 10px;
}
/* The shared .mode-info-btn (steampunk's own toast-based info control,
   lobby.css/lobby.js — untouched, still fully functional there) is hidden
   ONLY under futuristic scope, replaced by .rc-fg-info-btn above. Same
   "hide additively, don't delete shared markup" pattern already used for
   the Game Setup icon (Correction 5) — steampunk still renders and uses
   its own copy exactly as before. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-info-btn {
  display: none;
}

/* ── Shared per-item tooltip bubble (#rc-fg-tooltip) — ONE reusable node,
   repositioned/retexted by the script in lobby.html on each open rather
   than five separate ones (trivially guarantees only one is ever visible).
   position:fixed and viewport-relative by design: never nested inside
   either popup (both overflow:hidden), so it is immune to their clipping
   without needing any DOM re-parenting; the script sets top/left directly
   from the open trigger's own getBoundingClientRect(). z-index: 55 — above
   both popups (50) so it always reads as sitting ON the popup content, at
   or below .lobby-tabbar's persistent 60 per this correction's own
   documented layer order, and far below the Game Setup modal's 800. ────── */
html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-tooltip {
  position: fixed;
  z-index: 55;
  max-width: 240px;
  padding: 9px 12px;
  border: 1.5px solid var(--fg-tooltip-border);
  border-radius: 10px;
  background: linear-gradient(160deg, var(--fg-tooltip-top), var(--fg-tooltip-bot));
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow: 0 10px 26px rgba(2, 5, 12, .5), 0 0 18px rgba(90, 170, 255, .18);
  color: var(--fg-tooltip-text);
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-size: .82rem;
  line-height: 1.35;
  cursor: pointer;
}
html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-tooltip[hidden] {
  display: none;
}

/* ── Pace — the real radio pair, restyled as a collapsed glass cascade row.
   Behavior is untouched: two radio inputs named "create-mode", each still
   toggles the same underlying state via the unchanged lobby.js listener.
   Open/close/Escape/outside-click/keyboard/focus-return is the SAME script
   already shipped for the steampunk prototype (lobby.html, "Pace
   disclosure"), now also gated to activate for this prototype. ──────────── */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .field-group:has(#mode-toggle-group) {
  position: relative;
}
/* CORRECTION: this block previously reserved margin-bottom while open, for
   the same (now-reversed) reason documented above the Game Mode trigger
   rule — genuine overlay popovers must overlap Number of Players, not push
   it down. .mode-toggle-group (below) is already absolutely positioned with
   z-index; removing the flow-affecting margin is the fix. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-pace-trigger {
  display: flex !important;   /* overrides the base style="display:none" */
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  color: var(--fg-text);
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: .96rem;
  cursor: pointer;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-pace-trigger-icon svg {
  width: 19px;
  height: 19px;
  color: var(--fg-cyan);
  display: block;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options #rc-pace-trigger-text {
  flex: 1 1 auto;
  text-align: left;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-pace-trigger-chevron {
  color: var(--fg-cyan);
  font-size: 1rem;
  transition: transform .15s ease;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-pace-trigger[aria-expanded="true"] .rc-pace-trigger-chevron {
  transform: rotate(180deg);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-pace-trigger:hover {
  border-color: var(--fg-cyan);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-pace-trigger:focus-visible {
  outline: 2px solid var(--fg-focus);
  outline-offset: 2px;
}

/* The real radio panel: a floating glass popup, collapsed unless .rc-pace-open. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-toggle-group {
  display: none;
  flex-direction: column;
  gap: 0;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: linear-gradient(180deg, var(--fg-popup-top), var(--fg-popup-bot));
  /* See the matching Game Mode popup rule above for why border/backdrop-
     filter were added — same correction, same reasoning, applied here too
     since both popups share one visual language. */
  border: 1.5px solid var(--fg-popup-border);
  border-radius: 12px;
  box-shadow: var(--fg-popup-shadow);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  overflow: hidden;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-toggle-group.rc-pace-open {
  display: flex;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-toggle-opt {
  flex: 1 1 0;
  gap: 2px;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid var(--fg-popup-divider);
  border-radius: 0;
  background: transparent;
  color: var(--fg-text-dim);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-toggle-opt:last-child {
  border-bottom: none;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-toggle-opt:hover {
  background: var(--fg-popup-row-hover);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-toggle-opt:has(input:checked) {
  background: linear-gradient(90deg, rgba(79, 127, 255, .34), rgba(157, 123, 255, .24));
  color: var(--fg-text);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-toggle-opt span {
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: inherit;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-info-btn {
  border-color: var(--fg-cyan-dim);
  color: var(--fg-text-dim);
  background: transparent;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-info-btn:hover {
  border-color: var(--fg-cyan);
  color: var(--fg-cyan-bright);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-toggle-opt:has(input:focus-visible) {
  outline: 2px solid var(--fg-focus);
  outline-offset: -2px;
}
/* A plain :focus rule on the radio itself guarantees a visible indicator
   even for a click-initiated programmatic focus (Chromium's :focus-visible
   heuristic does not always show a ring in that case) — same reasoning
   already applied by the steampunk prototype for this identical control. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-toggle-opt input:focus {
  outline: 2px solid var(--fg-focus);
  outline-offset: 2px;
}

/* ── Number of Players — connected glass segmented bar, NO tick/checkmark.
   Same 4 buttons, same ids/data-np/click handlers/aria-pressed; only the
   visual treatment changes. Selection is shown ONLY via fill + border + glow
   + elevation, per the brief's exact requirement. ─────────────────────────*/
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .field-group:has(#create-np-btns) .field-label {
  color: var(--fg-label);
}
/* "(Required)" appended inline, in one label, via generated content — no
   second line, no separate pill. Modern browsers include ::after generated
   content in the label's accessible name, so this is announced too.

   CORRECTION: lobby.css's own shared `.field-group:has(#create-np-btns)
   .field-label::after` rule (the SAME selector every OTHER Room Creator
   prototype/screen uses for this badge) sets `content: "Required"` as an
   orange PILL — background, padding, border-radius, margin-left, font-size,
   vertical-align. This rule below only ever overrode `content`/`color`/
   `font-weight` — CSS cascades per PROPERTY, not per rule, so every
   property it left untouched (background, padding, border-radius, …) still
   fell through from that lower-specificity shared rule despite this one
   winning overall. Every one of those is now explicitly reset here so
   "(Required)" reads as plain inline text, not a badge — this is the
   complete list of properties the shared rule sets. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .field-group:has(#create-np-btns) .field-label::after {
  content: " (Required)";
  color: var(--fg-cyan);
  font-weight: 700;
  background: transparent;
  background-image: none;
  padding: 0;
  margin-left: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: baseline;
  display: inline;
  transform: none;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .np-pref-btns {
  gap: 0;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-np-pref {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  border: none;
  border-right: 1px solid rgba(111, 224, 255, .16);
  border-radius: 0;
  background: transparent;
  color: var(--fg-text-dim);
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 13px 6px;
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
/* Canonical visible label is "2 / 3 / 4 / Any" only — the accessible name
   ("2 Players" etc.) is preserved via the existing aria-label on each button
   (WCAG 2.5.3: the visible "2" is contained in the accessible "2 Players"). */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-np-word {
  display: none;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-np-pref:last-child {
  border-right: none;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-np-pref:hover {
  background: rgba(111, 224, 255, .1);
  color: var(--fg-text);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-np-pref.np-pref-active {
  background: linear-gradient(160deg, var(--fg-blue), var(--fg-violet));
  color: #fff;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 0 0 1px rgba(157, 123, 255, .5),
    0 0 16px 2px rgba(111, 150, 255, .55),
    0 4px 10px rgba(20, 20, 60, .4);
  transform: translateY(-1px);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-np-pref:focus-visible {
  outline: 2px solid var(--fg-focus);
  outline-offset: -3px;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .np-pref-btns[aria-invalid="true"] {
  border-color: var(--fg-error-border);
  box-shadow: 0 0 0 1px var(--fg-error-border);
}

/* ── Room Name — long glass text input. dir="auto" untouched: RTL/Persian
   typing keeps working; no text-align override, so the browser's own bidi
   handling for dir="auto" is left alone. ─────────────────────────────────── */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .field-input {
  padding: 13px 16px;
  color: var(--fg-text);
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-size: .98rem;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .field-input::placeholder {
  color: var(--fg-text-faint);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .field-input:focus {
  outline: 2px solid var(--fg-focus);
  outline-offset: 1px;
  border-color: var(--fg-cyan-bright);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options [aria-invalid="true"].field-input {
  border-color: var(--fg-error-border);
  box-shadow: 0 0 0 1px var(--fg-error-border);
}

/* ── Game Setup summary row ───────────────────────────────────────────── */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .game-setup-summary {
  /* Leading inset raised from 10px to 16px, matching the OTHER triggers'
     (Game Mode/Pace/Room Name) own `padding: 13px 16px` leading inset —
     10px was chosen when the icon box sat flush against it; with the icon
     gone (see .gss-icon below), .gss-body now starts flush against the
     row's own edge and should align with the controls above it, not sit
     closer in than they do. */
  padding: 10px 14px 10px 16px;
  gap: 12px;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .game-setup-summary:hover {
  border-color: var(--fg-cyan);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .game-setup-summary:focus-visible {
  outline: 2px solid var(--fg-focus);
  outline-offset: -3px;
}
/* CORRECTION: the leading gear icon/emoji/SVG is removed from the
   futuristic Room Creator's visual design. `.gss-icon` markup is SHARED
   with royal-tactile and steampunk (both still style it — see their own
   CSS files), so it is NOT safe to delete from lobby.html; hidden here,
   scoped to futuristic only, the smallest correction that doesn't touch
   either other prototype. `display: none` removes it from layout entirely
   (no reserved slot, no gap contribution — flexbox `gap` only applies
   between actual rendered items) and from the accessibility tree (it was
   already `aria-hidden="true"` in the markup, purely decorative). Nothing
   inside it (.gss-icon-glyph, .gss-icon-svg) needs its own rule anymore
   once the container itself is hidden. `.gss-body`'s existing `flex: 1 1
   auto` (lobby.css) automatically expands to fill the freed space with no
   extra rule needed; `.gss-arrow`'s existing `flex: 0 0 auto` keeps it a
   fixed size at the trailing edge, unaffected. */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .gss-icon {
  display: none;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .gss-title {
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-weight: 700;
  color: var(--fg-text);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .gss-digest {
  color: var(--fg-text-dim);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .gss-arrow {
  color: var(--fg-cyan);
  font-size: 1.15rem;
  text-shadow: 0 0 6px rgba(111, 224, 255, .6);
}

/* ── Field validation messages ────────────────────────────────────────── */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .field-error {
  color: var(--fg-error);
  font-weight: 600;
}

/* ── Create Room — the prominent violet-to-blue glass CTA ─────────────── */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-create-confirm {
  position: relative;
  background: linear-gradient(100deg, var(--fg-cta-1) 0%, var(--fg-cta-2) 55%, var(--fg-cta-3) 100%);
  border: 1px solid rgba(190, 235, 255, .5);
  clip-path: var(--fg-clip-pill);
  color: #fff;
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 1.02rem;
  padding: 14px;
  box-shadow: var(--fg-cta-shadow-a);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-create-confirm:hover:not(:disabled) {
  filter: brightness(1.08);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-create-confirm:active:not(:disabled) {
  filter: brightness(.96);
  transform: translateY(1px);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-create-confirm:focus-visible {
  outline: 2px solid var(--fg-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-create-confirm {
    animation: rc-fg-cta-glow 3.6s ease-in-out infinite;
  }
  @keyframes rc-fg-cta-glow {
    0%, 100% { box-shadow: var(--fg-cta-shadow-a); }
    50%      { box-shadow: var(--fg-cta-shadow-b); }
  }
}

/* ── Back — quieter glass pill, below the CTA ─────────────────────────── */
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--fg-text-dim);
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-weight: 700;
  align-self: center;
  min-width: 44px;
  min-height: 40px;
  padding: 6px 18px;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-back-glyph {
  display: none;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-back-svg.rc-proto-icon {
  display: inline-block !important;
  width: 16px;
  height: 16px;
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-back:hover {
  color: var(--fg-cyan-bright);
}
html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-back:focus-visible {
  outline: 2px solid var(--fg-focus);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Futuristic light mode
   ══════════════════════════════════════════════════════════════════════════
   Activation: the app's OWN existing theme mechanism — verified, not
           assumed. lobby.html's synchronous <head> script resolves the
           user's stored `hexland_theme` preference (localStorage, default
           'light') and, when the resolved theme is light, sets
           `document.documentElement.dataset.theme = 'light'` (i.e.
           `<html data-theme="light">`); lobby.css's own pre-existing rules
           already key off this exact same `:root[data-theme="light"]`
           selector elsewhere in the app. No new JavaScript theme state was
           added — this block only adds a second CSS selector branch reading
           the SAME attribute. `html` and `:root` are the same element with
           identical specificity, so `html[data-rc-proto="…"]
           [data-theme="light"]` below is written to sit naturally alongside
           this file's own existing `html[data-rc-proto="…"]` scoping prefix,
           not as a different mechanism.

   Scope: EVERY rule below carries BOTH `[data-rc-proto="futuristic-glass-
          room-creator"]` AND `[data-theme="light"]` on the same `html`
          compound selector — royal-tactile, steampunk-room-creator, and
          every other lobby screen are completely unaffected regardless of
          theme, because none of them carry the `data-rc-proto` value this
          block requires.

   Approach: per the brief's own preference, this is almost entirely a
          custom-property override — every `--fg-*` token defined in the
          dark (base) block above is redefined here with a brighter,
          "moderately brighter than dark, still restrained futuristic blue/
          slate" palette (translucent medium-dark slate-blue glass, pale
          cool-white text, cyan accents with reduced neon intensity,
          restrained violet, softer/less-black shadows, reduced glow) — never
          white, near-white, pastel, or generic light gray. Every component
          rule elsewhere in this file already consumes these tokens (that
          refactor is what the dark-mode block above's whole-value shadow/
          gradient tokens are for), so no rule block is duplicated. The only
          "exceptional component rules" needed beyond token overrides are the
          two noted inline below (the Number-of-Players border-right hairline
          and the "Coming Soon" badge fill, neither of which was already
          tokenized because each is a single, narrowly local use). ────────── */
/* CORRECTION (light-mode vibrancy): the first version of this block used
   values close enough to each other — panel rgba(70,98,140,.68) /
   rgba(34,52,84,.84) over bg-3 #1c2d4a, controls rgba(112,142,184,.55) /
   rgba(70,96,134,.66) — that background, panel, and closed controls all
   composited to nearly the same muted slate-blue, reported as "faded and
   lifeless" and confirmed by rendered pixel sampling
   (tools/room-creator-futuristic-vibrancy-check.js). Redesigned around
   three DELIBERATELY separated, increasingly saturated/opaque layers
   (background → panel → closed control → popup, each one more vivid than
   the last) instead of one palette with small alpha tweaks between
   layers — "moderately brighter" was replaced by "moderately brighter AND
   clearly separated," which was the part actually missing. Every value
   stays inside the cyan/cobalt/violet family; none is white, pastel, or
   desaturated gray. --fg-popup-border/-row-hover/-divider (new tokens,
   introduced for the matching dark-mode popup-separation correction) get
   their own light-mode values here too — without an override here they
   would silently keep the dark (cyan-on-near-black-tuned) values, which
   would under-perform against this brighter background. */
html[data-rc-proto="futuristic-glass-room-creator"][data-theme="light"] #screen-join #create-options {
  --fg-bg-3:         #142a4f;
  --fg-panel-top:    rgba(52, 96, 168, .85);
  --fg-panel-bot:    rgba(20, 42, 82, .94);
  /* Near-opaque backing for the sticky header. A first pass reused
     --fg-panel-top's exact hue at .93 alpha (rgba(52,96,168,.93), matching
     dark mode's approach) — rendered-pixel sampling showed that composited
     to rgb(51,95,167), while the panel's own real color immediately below
     the header measured rgb(62,99,155): a modest but visible drift (the
     panel's gradient has already blended slightly toward --fg-panel-bot by
     that position, shifting its hue, not just its lightness, versus pure
     --fg-panel-top). Tuned directly to the measured target instead of the
     raw token for a closer match. */
  --fg-header-bg:    rgba(62, 99, 155, .95);
  --fg-cyan:         #17a3e8;
  --fg-cyan-bright:  #5fe0ff;
  --fg-cyan-dim:     rgba(23, 163, 232, .42);
  --fg-blue:         #3159f0;
  --fg-violet:       #9d4ff5;
  --fg-text:         #ffffff;
  --fg-text-dim:     rgba(255, 255, 255, .88);
  --fg-text-faint:   rgba(255, 255, 255, .68);
  --fg-label:        #bdeeff;
  --fg-error:        #ffb0a8;
  --fg-error-border: #ff8a80;
  --fg-focus:        #eafcff;
  --fg-hairline:     rgba(255, 255, 255, .32);
  --fg-control-top: rgba(94, 156, 226, .62);
  --fg-control-bot: rgba(46, 92, 158, .72);
  --fg-popup-top:    rgba(70, 150, 230, .97);
  --fg-popup-bot:    rgba(32, 88, 158, .98);
  --fg-popup-border: rgba(255, 255, 255, .6);
  --fg-popup-row-hover: rgba(255, 255, 255, .18);
  --fg-popup-divider: rgba(255, 255, 255, .38);
  --fg-cta-1: #7a3ff5;
  --fg-cta-2: #2f6dff;
  --fg-cta-3: #17d4ff;
  --fg-particle-opacity: .5;
  --fg-hex-opacity: .18;
  --fg-panel-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 0 0 34px rgba(255, 255, 255, .08),
    0 0 0 1px rgba(90, 150, 220, .4),
    0 16px 38px rgba(15, 28, 52, .34),
    0 0 26px rgba(90, 160, 230, .2);
  --fg-control-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    inset 0 -6px 14px rgba(15, 25, 45, .18);
  --fg-popup-shadow:
    0 18px 38px rgba(10, 20, 40, .4),
    0 0 26px rgba(80, 170, 255, .28),
    inset 0 1px 0 rgba(255, 255, 255, .4);
  --fg-cta-shadow-a:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 0 1px rgba(255, 255, 255, .35),
    0 8px 20px rgba(50, 70, 180, .34),
    0 0 22px rgba(100, 140, 230, .24);
  --fg-cta-shadow-b:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 0 0 1px rgba(255, 255, 255, .45),
    0 8px 24px rgba(50, 70, 180, .4),
    0 0 30px rgba(100, 140, 230, .32);
  --fg-title-shadow: 0 0 14px rgba(60, 160, 220, .5), 0 0 4px rgba(255, 255, 255, .6);
}
/* Exceptional rule 1/2: Number of Players' segment divider was never
   tokenized (a single local use) — a plain override here is simpler than
   adding a one-use token. Raised to match the brighter --fg-hairline. */
html[data-rc-proto="futuristic-glass-room-creator"][data-theme="light"] #screen-join #create-options .btn-np-pref {
  border-right-color: rgba(255, 255, 255, .38);
}
/* Exceptional rule 2/2: the "Coming Soon" badge. Dark mode uses pale-cyan
   text on a faint cyan wash, tuned against a near-black popup face — ported
   as-is against the lighter light-mode popup face, that pairing measured
   only 2.51:1 (rendered-pixel check, tools/room-creator-futuristic-
   lightmode-check.js), short of the ≥3:1 target. Inverted for light mode
   instead: a near-white fill with dark-navy text — the same "badge" visual
   language, now rendered-pixel-verified at ≥3:1. */
html[data-rc-proto="futuristic-glass-room-creator"][data-theme="light"] #screen-join #create-options .rc-gamemode-soon {
  background: rgba(255, 255, 255, .55);
  border-color: rgba(255, 255, 255, .5);
  color: #16314f;
}
/* Exceptional rule 3/3: the SELECTED popup row (Competitive Game / Real-
   Time). The shared dark-mode gradient — rgba(79,127,255,.34) to
   rgba(157,123,255,.24) — is tuned to lift a row above a DARK popup face;
   composited over light mode's own brighter, already-saturated popup
   background it does the opposite of what "selected" needs: rendered-pixel
   checks (tools/room-creator-futuristic-vibrancy-check.js) measured the
   selected row only 1.08:1 from the popup container itself (well under
   the "meaningfully separated" bar used throughout this correction) and
   its white selected-state text only 3.80-4.00:1 (under the 4.5:1 text
   bar) — both because a light, already-blue overlay on an already-blue
   background barely moves the composite. Light mode's selected row is
   instead DARKENED and more saturated (the opposite direction from dark
   mode's lightening one) — still clearly a cobalt-violet gradient, not a
   generic dark box, but dark enough that white selected-state text and
   the row-vs-container edge both clear their bars with margin. */
html[data-rc-proto="futuristic-glass-room-creator"][data-theme="light"] #screen-join #create-options .rc-gamemode-opt:has(input:checked),
html[data-rc-proto="futuristic-glass-room-creator"][data-theme="light"] #screen-join #create-options .mode-toggle-opt:has(input:checked) {
  background: linear-gradient(90deg, rgba(36, 56, 158, .68), rgba(98, 38, 176, .58));
}
html[data-rc-proto="futuristic-glass-room-creator"][data-theme="light"] #screen-join #create-options .rc-gamemode-opt:has(input:checked):hover {
  background: linear-gradient(90deg, rgba(36, 56, 158, .76), rgba(98, 38, 176, .66));
}

/* ── Reduced motion: the only animation this file introduces is the CTA's
   glow pulse above, already gated by its own `no-preference` media query —
   this rule additionally strips any transition it might pick up incidentally
   (e.g. the hover/active states) so the panel never relies on motion to
   register a state change. ────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options * {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Small-viewport safety (down to 320px) ────────────────────────────── */
@media (max-width: 380px) {
  html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options {
    padding: 20px 14px 18px;
    border-radius: 16px;
  }
  html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-title {
    font-size: 1.3rem;
  }
}
/* Player-count segments: same wrapping/shrink fix already required by the
   royal-tactile and steampunk prototypes for this identical control — this
   file's higher (double-ID) specificity would otherwise also override
   lobby.css's own ≤540px font-size/white-space rule and cause overlap. */
@media (max-width: 540px) {
  html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .btn-np-pref {
    white-space: normal;
    font-size: .92rem;
    line-height: 1.1;
    padding: 11px 2px;
    min-height: 44px;
  }
}

/* ── Mobile: full-page content surface, not a framed/inset card ──────────
   Required composition: fixed site header/ticker chrome — full-width Room
   Creator content (scrollable when necessary) — fixed bottom tab bar
   (.lobby-tabbar, lobby.css, z-index:60, ≤540px only). #create-options
   becomes a fixed, full-viewport-width, internally-scrollable band between
   those two, instead of an inset bordered/chamfered/max-width card.

   `top: 100px` matches .lobby-bg's own existing top-padding constant
   ("Clear the fixed header (70px) AND the fixed ticker … = 100px",
   lobby.css) — reused, not reinvented. The bottom padding's `84px` matches
   .lobby-wrap's own existing bottom-padding constant for clearing
   .lobby-tabbar at this same ≤540px breakpoint — same reasoning: don't
   invent a new magic number for a problem this file already solved once.

   `top` uses --rc-fg-mobile-top, a custom property computed and kept live by
   the small "Mobile top-offset" script at the end of lobby.html — the ticker
   banner is conditionally shown/hidden and the header's own rendered height
   varies (wrapped auth-bar content etc.), so a flat constant here measured
   16px short in testing whenever the ticker was visible. That script reuses
   the SAME "ticker bottom if visible, else header bottom" computation this
   file's own #btn-create-toggle handler (lobby.js) already does for scroll
   positioning — not a new measurement technique. 100px is only the
   pre-JS-run fallback (matches .lobby-bg's own static constant).

   position:fixed's containing block is the viewport, not any ancestor, so
   this alone already escapes .lobby-bg's 16px side padding and .lobby-wrap's
   420px max-width — no change to either shared ancestor rule is needed, and
   neither is touched by this block. Targets #create-options's OWN inline
   style (open vs. closed), not an ancestor — the closed (picker) state and
   every other screen are completely unaffected. Desktop (>540px) is
   unaffected by this block existing at all (media-gated). ───────────────── */
@media (max-width: 540px) {
  html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options:not([style*="none"]) {
    position: fixed;
    top: var(--rc-fg-mobile-top, 100px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;   /* above ordinary lobby content, below .lobby-tabbar's 60 */
    max-width: none;
    width: 100%;
    height: auto;
    margin: 0;
    border: none;
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Top padding MOVED to .rc-fg-header's own padding-top below (0 here,
       was 18px) — see that rule's comment for why. Left/right/bottom are
       exactly as before. */
    padding: 0 16px calc(84px + env(safe-area-inset-bottom, 0px));
  }
  /* The header's own -10px pull (sized for sitting flush against the desktop
     card's rounded top edge) is no longer needed once there is no card edge
     to sit flush against — replaced with straightforward top spacing under
     the real fixed site header above. `top: 0` here (not --rc-fg-mobile-top)
     because #create-options ITSELF is already position:fixed at that same
     offset and is its own scrolling container — this header only needs to
     stick to the TOP OF THAT BOX, not re-apply the same offset a second
     time.

     The container's OWN 18px top padding was REMOVED just above and MOVED
     onto this rule's own padding-top (18px, plus the 4px already used for
     the backing-gradient fade elsewhere = 22px) instead of adding a NEW
     18-22px on top of the padding that was already there. An earlier
     version of this fix left the container's 18px padding in place AND
     added the header's own 22px alongside it — 40px of combined top
     spacing where ~18-22px existed before, measurably taller than the
     pre-correction layout, which pushed Back below the tab-bar-safe zone
     at some viewport heights (360x800, 390x844) and made it unreachable by
     a real click without scrolling first — found via
     tools/room-creator-futuristic-sticky-header-check.js and confirmed
     with a direct elementFromPoint repro (Back's own click point resolved
     to .lobby-tabbar, not the button). Moving the padding rather than
     duplicating it keeps the total flow height within ~4px of the
     pre-correction layout (only the deliberate fade allowance), while
     still eliminating the scroll-clip gutter described below.

     Sticky's `top` is measured from the scroll container's PADDING edge;
     since that padding is now 0, the padding edge IS the border/clip edge,
     so `top: 0` alone now coincides exactly with where overflow clipping
     happens — no gutter where a scrolled-past control could still render
     above the stuck header (this file's earlier version needed `top:-18px`
     specifically to compensate for a padding value that no longer exists
     here). */
  html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-fg-header {
    margin: 0 0 12px;
    top: 0;
    padding-top: 22px;
  }
  /* Mirrors the header's own top:0 override just above: #create-options is
     its OWN internal scroll frame here (position:fixed, overflow-y:auto),
     starting at 0 right where the panel begins — no --rc-fg-mobile-top
     component needed a second time, just the header's rendered height. */
  html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options > .field-group,
  html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options > #game-setup-summary,
  html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options > #btn-create {
    scroll-margin-top: 110px;
  }
}

/* ── Wider viewports: the shared .rc-fake-select/.rc-gamemode-trigger/…
   mixin above already caps the panel at 440px and centers it, so no extra
   rule is needed here beyond keeping the Pace/Game-Mode popups comfortably
   readable. ───────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .rc-gamemode-opt,
  html[data-rc-proto="futuristic-glass-room-creator"] #screen-join #create-options .mode-toggle-opt {
    padding: 13px 18px;
  }
}
