/* ══════════════════════════════════════════════════════════════════════════
   TEMPORARY PROTOTYPE — Room Creator "Refined Steampunk Explorer" concept
   ══════════════════════════════════════════════════════════════════════════
   Activation: opt-in only, via the URL query param `?prototype=steampunk-room-creator`.
           The synchronous <head> script in lobby.html reads that param and sets
           `<html data-rc-proto="steampunk-room-creator">` — this file never
           applies on its own, and no query param means neither prototype is
           active. Mutually exclusive with `?prototype=royal-tactile`.

   Scope:  every rule below is prefixed with
           `html[data-rc-proto="steampunk-room-creator"] #screen-join …`
           (or a descendant of it). It touches NOTHING outside the Room
           Creator's "create-options" panel and the small amount of shared
           chrome above it (.rooms-hd, #name-field-wrap, #primary-actions)
           that this prototype explicitly de-emphasizes while the form is
           open — see the chrome-management script at the end of lobby.html.

   Status: presentation-only prototype for design review. No production
           JavaScript reads any class or selector introduced here. Every real
           control keeps its original id, name, value, and event binding from
           lobby.html / lobby.js — this file only repaints them. The one piece
           of prototype-only JS (chrome de-emphasis) is additive and disclosed
           in lobby.html; it never touches CREATE_GAME's payload or validation.

   Assets: no raster/photographic textures are used — this pass is CSS + inline
           SVG only (compass, gear, back-chevron), because no image-generation
           tool was available while building it. Wood grain, cream enamel, and
           brass are approximated with layered gradients and shadows rather
           than photographic texture. See the implementation report for the
           fidelity gap this leaves versus the reference PNG.

   Revert: delete the <link rel="stylesheet" href="room-creator-prototype-steampunk.css">
           tag, the `steampunk-room-creator` branch of the activation script,
           the chrome-management <script> block, the .rc-sp-header /
           .rc-proto-icon markup, and delete this file.

   Reference: Frontend_redesign/room-creator/Gpt-output/
              concept-5-refined-steampunk-explorer.png
   Brief:     Frontend_redesign/room-creator/steampunk-prototype-brief.md
   Companion doc: Frontend_redesign/02-room-creator-prototype.md
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-rc-proto="steampunk-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. Starting values from
     the brief's §9 approximate palette, sampled against the reference. */
  --sp-walnut-deep:   #21140d;
  --sp-walnut-mid:    #3a2416;
  --sp-bronze-near-black: #17110d;
  --sp-brass-dark:    #6f4316;
  --sp-brass:         #b87824;
  --sp-brass-light:   #e1ae52;
  /* Gate 4: component-specific token for the two interactive faces whose
     darkest gradient stop measured 2.05:1 with ink text (selected player
     segment, Create Room) — needs ≥3:1. Structural uses of --sp-brass-dark
     (borders, rivets, rails) are UNCHANGED; only these two gradients' own
     darkest stop is swapped to this lighter antique-brass tone, computed to
     ~3.6:1 with var(--sp-ink) (verified in tools/room-creator-a11y-check.js). */
  --sp-brass-interactive-dark: #966a28;
  --sp-cream:         #ead5a8;
  --sp-cream-light:   #f4e4bf;
  --sp-ink:           #2a1609;
  --sp-amber:         #f2a52b;
  --sp-error-border:  #7a2318;      /* dark oxblood — used only against the CREAM input face (border/outline) */
  --sp-error-text:    #ff8a72;      /* light coral — .field-error paragraphs sit on the DARK card ground, not cream;
                                        measured 1.60:1 with the dark oxblood there (a11y check caught this) */
  --sp-focus:         #f4e4bf;
  --sp-clip-card: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px),
                           calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  --sp-clip-chip: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%,
                           0 100%, 0 8px);

  display: flex;
  flex-direction: column;
  /* Gate 1 correction: the reference's vertical rhythm is NOT uniform — a
     tight base gap here, with the specific rows that need more room getting
     an explicit margin-top addition below (semantic per-region rules, not
     a pile of unrelated pixel nudges). Measured by eye against the reference
     image region by region; see the per-region comments below for the
     reasoning behind each addition. */
  gap: clamp(8px, 1.4vh, 12px);
  /* Gate 3: the diagonal repeating-linear-gradient "wood" (the correction
     plan's specific complaint — reads as stripes, not wood) is replaced by
     the reusable walnut-grain.svg tile. Corner rivets moved to real image
     elements (.rc-corner, in lobby.html) using the brass-corner.svg module,
     rotated per corner via CSS transform — one asset, four placements,
     rather than four separate radial-gradient approximations. Graceful
     fallback: if the SVG fails to load, the gradient layers beneath it still
     render a plausible (if flatter) walnut surface — no layer here depends
     on the asset loading to remain readable. */
  background:
    url('assets/ui/room-creator/steampunk/walnut-grain.svg'),
    radial-gradient(ellipse 140% 90% at 50% -10%, rgba(184, 120, 36, .16), transparent 60%),
    linear-gradient(160deg, var(--sp-walnut-mid), var(--sp-walnut-deep) 55%, var(--sp-bronze-near-black));
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 128px 128px, auto, auto;
  border: 3px solid var(--sp-brass-dark);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 2px var(--sp-brass),
    inset 0 0 0 5px rgba(0, 0, 0, .35),
    inset 0 2px 4px rgba(0, 0, 0, .5),
    0 16px 32px rgba(10, 6, 3, .55);
  clip-path: var(--sp-clip-card);
  /* Gate 1 correction: control rows measured x≈0.069/w≈0.862 against the
     reference's x≈0.10/w≈0.81 — visibly too wide, not inset enough from the
     case's own rails. Increasing horizontal padding from 18px to 32px moves
     every ordinary row (which stretches to the padded content width by
     default) to the measured target inset; the CTA gets an additional,
     larger inset of its own below since the reference makes it distinctly
     narrower than the other rows, not just contained by the same padding. */
  padding: 20px 32px 22px;
  color: var(--sp-cream);

  /* ── Gate 1: full-viewport prototype shell ──────────────────────────────
     The reference is a near-edge-to-edge instrument case, not a card sitting
     below the ordinary site header. `position: fixed` takes the panel out of
     #screen-join's normal flow and pins it directly to the viewport, so its
     own opaque background paints over the site header/hex-pattern chrome
     instead of requiring this file to know and hide those selectors — safer
     and stays inside "prototype-scoped layout rules." Harmless while closed:
     these properties have no visible effect on a display:none element.
     Overridden back to the original contained/centered treatment at ≥640px
     (Gate 5's desktop concern, not this one) below. */
  position: fixed;
  /* Gate 5: respect device safe-area insets (notches, rounded corners, home
     indicator) where the browser reports them, without depending on this
     page adopting `viewport-fit=cover` (out of prototype scope — a global
     lobby.html meta tag). Without that meta, env() safe-area values are 0
     per spec, so this is a no-op today and simply starts working if that
     meta is ever added app-wide; it never reduces the inset below 6px. */
  inset: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right))
         max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  margin: 0;
  max-width: none;
  width: auto;
  height: auto;
  max-height: none;
  overflow-y: auto;  /* safe scrolling at short viewports instead of clipping */
  z-index: 500;       /* above header.css's .site-header (z-index: 100) */
}

/* Gate 3: one brass-corner.svg module, four placements. #create-options is
   already position:fixed (its own containing block), so each image element
   just needs a corner offset + the correct rotation for that corner's orientation
   (the asset is drawn top-left-facing). Decorative only — aria-hidden,
   pointer-events:none so they can never intercept clicks on real controls
   beneath/near them. */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-corner {
  display: block !important;   /* overrides the base style="display:none" */
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 1;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-corner-tl { top: 4px; left: 4px; }
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-corner-tr { top: 4px; right: 4px; transform: rotate(90deg); }
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-corner-bl { bottom: 4px; left: 4px; transform: rotate(-90deg); }
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-corner-br { bottom: 4px; right: 4px; transform: rotate(180deg); }

/* Solid dark backdrop directly behind the fixed panel. Without it, the
   panel's own clip-path/border-radius corners (and the small inset margin
   around it) reveal whatever sits behind in the page — previously the pale
   hex-pattern lobby background, visible as pale corner triangles the
   correction plan named explicitly. A backdrop the same tone as the panel
   makes any such reveal read as intentional dark space, not a leak. */
html[data-rc-proto="steampunk-room-creator"] #screen-join.rc-form-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #17110d;
  z-index: 499;
}

/* ── Gate 1 correction: nonuniform vertical rhythm ────────────────────────
   The reference's row-to-row spacing is not uniform — measured by eye,
   region by region, against the reference image (not exact pixel
   measurement; the 390×844 capture/overlay loop is what validates these).
   The container's base `gap` (~15px) is intentionally tight; each rule below
   is the ADDITIONAL margin-top a specific row needs on top of that base gap,
   named by the semantic region it addresses rather than a magic offset:

     region              target gap   base gap   added margin-top
     header → Game Mode  ~70px        ~15px      +55px
     Pace                ~14px        ~15px      (none — base already fits)
     Number of Players   ~33px        ~15px      +18px
     Room Name           ~55px        ~15px      +40px
     Game Setup          ~65px        ~15px      +50px
     Create Room         ~3px         ~15px      -12px (flush against Game Setup)
     Back                ~34px        ~15px      +19px
*/
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-gamemode-group {
  margin-top: 55px;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .field-group:has(#create-np-btns) {
  margin-top: 18px;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .field-group:has(#inp-room-name) {
  /* Gate 2 correction: trimmed 40→32px (with Game Setup and Back below) to
     close the ~25px overflow that clipped Back below the visible viewport —
     confirmed by measurement: previous bottom edge 1.010 (normalized) vs the
     outer frame's own 0.986. Distributed across three gaps rather than taken
     from Back alone, which would have collided it with Create Room instead. */
  margin-top: 32px;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .game-setup-summary {
  margin-top: 40px;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-create-confirm {
  margin-top: -12px;
  /* The reference makes Create Room distinctly narrower and centered rather
     than the same width as the rows above it (measured x≈0.13/w≈0.74 versus
     the other rows' x≈0.10/w≈0.81) — equal side margins narrow it and center
     it within the flex column, no extra wrapper needed. `width:auto` is
     required: lobby.css's base .btn-create-confirm sets an explicit
     `width:100%`, which doesn't shrink for margins on its own — it just
     overflows/offsets — confirmed by measurement (x moved but width stayed
     identical to the wider rows above it) before this override was added. */
  width: auto;
  margin-left: 13px;
  margin-right: 13px;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-back {
  margin-top: -1px;
}

/* ── Chrome de-emphasis while the form is open (see the chrome-management
   script). Never touches the real behaviour: #name-field-wrap re-appears the
   instant .rc-name-visible is set, synchronously before lobby.js focuses it
   on an invalid name. ─────────────────────────────────────────────────── */
html[data-rc-proto="steampunk-room-creator"] #screen-join.rc-form-open .rooms-hd,
html[data-rc-proto="steampunk-room-creator"] #screen-join.rc-form-open #primary-actions {
  display: none;
}
/* #screen-join carries the shared .lobby-card class, which sets
   backdrop-filter: blur(12px) (lobby.css:633). backdrop-filter establishes a
   new containing block for position:fixed descendants per spec — #create-options
   below was fixing itself relative to #screen-join's own small box instead of
   the viewport, landing at the wrong position with a squashed height (measured:
   a 344×48 box near y=143, instead of a near-full-viewport panel). Clearing it
   only in this state — the fixed panel already covers #screen-join visually,
   so its own blur is moot here — restores the viewport as the containing block. */
html[data-rc-proto="steampunk-room-creator"] #screen-join.rc-form-open {
  backdrop-filter: none;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join.rc-form-open #name-field-wrap {
  display: none;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join.rc-form-open.rc-name-visible #name-field-wrap {
  /* #create-options is now position:fixed (Gate 1), out of #screen-join's
     normal flow — a revealed #name-field-wrap left in normal flow would
     render wherever #screen-join itself sits in the page (behind the fixed
     panel, likely off-screen relative to it), silently breaking the
     "focus moves into the invalid field" behavior room-create-setup.test.js
     asserts. Pin it above the fixed panel instead so it stays genuinely
     visible and focusable, not just present in the DOM. */
  display: flex;
  position: fixed;
  top: 6px;
  left: 6px;
  right: 6px;
  z-index: 600;
  margin: 0;
  padding: 12px 14px;
  background: #17110d;
  border: 2px solid #6f4316;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join.rc-form-open.rc-name-visible #name-field-wrap .field-label {
  color: #e1ae52;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join.rc-form-open.rc-name-visible #name-field-wrap .field-input {
  background: linear-gradient(180deg, #f4e4bf, #ead5a8);
  color: #2a1609;
  border: 1.5px solid #6f4316;
  border-radius: 6px;
}

/* ── Hero header: compass + title, standing in for the de-emphasized
   .rooms-hd label above (which stays in the DOM and accessible, just
   visually hidden while the form is open — see de-emphasis rules above). ── */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-header {
  /* !important: the element ships `style="display:none"` inline (invisible
     with no prototype active); a class-selector rule cannot outrank an
     inline style without it, no matter how specific the selector. */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* Gate 1 correction: measured against the reference, the plaque is inset
     from the case's own rails (roughly x≈0.08), not a full-width pale slab
     flush to the edges. -20px still cancels the (now 32px) top padding for
     the "flush to top" look; -10px only partly cancels the new 32px side
     padding, leaving a net ~22px inset beyond the panel's own edge. */
  margin: -20px -10px 4px;
  padding: 16px 22px 16px;
  border-radius: 11px 11px 0 0;
  /* Twin corner "gauges" (flat CSS dials, echoing the reference's side
     instruments) as extra background layers, plus the cream plaque fill. */
  background:
    radial-gradient(circle 9px at 26px 24px, var(--sp-cream-light) 0 55%, var(--sp-brass-dark) 65% 78%, transparent 82%),
    radial-gradient(circle 1.5px at 26px 24px, var(--sp-ink) 0 100%, transparent 101%),
    linear-gradient(35deg, transparent 47%, var(--sp-ink) 48% 52%, transparent 53%) 12px 12px / 28px 28px no-repeat,
    radial-gradient(circle 9px at calc(100% - 26px) 24px, var(--sp-cream-light) 0 55%, var(--sp-brass-dark) 65% 78%, transparent 82%),
    radial-gradient(circle 5px at calc(100% - 26px) 24px, var(--sp-walnut-deep) 0 70%, var(--sp-brass) 78% 100%, transparent 101%),
    /* Gate 4: rivet radius normalized to 2.5px, matching every other rivet in
       this file (was 3px here only — an unintentional inconsistency). */
    radial-gradient(circle 2.5px at 16px 16px, var(--sp-brass-light) 0 40%, var(--sp-brass-dark) 60% 100%, transparent 101%),
    radial-gradient(circle 2.5px at calc(100% - 16px) 16px, var(--sp-brass-light) 0 40%, var(--sp-brass-dark) 60% 100%, transparent 101%),
    linear-gradient(180deg, var(--sp-cream-light), var(--sp-cream) 85%);
  border-bottom: 3px solid var(--sp-brass-dark);
  box-shadow: inset 0 -2px 0 var(--sp-brass), inset 0 0 0 2px rgba(111, 67, 22, .3), 0 6px 14px rgba(0, 0, 0, .4);
  position: relative;
  /* Deliberately NOT clipped by the card's --sp-clip-card chamfer: this
     header sits flush with the top edge instead of "breaking out" of it — a
     negative-margin compass overflowing the card's own clip-path rendered
     completely outside Playwright's element-bounding-box screenshot in the
     first capture pass, so the compass stays inside the header's own box. */
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-compass {
  width: 54px;
  height: 54px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-compass-ring-outer {
  fill: var(--sp-cream-light);
  stroke: var(--sp-brass-dark);
  stroke-width: 3;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-compass-ring-inner {
  fill: none;
  stroke: var(--sp-brass);
  stroke-width: 1.5;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-compass-ticks line {
  stroke: var(--sp-brass-dark);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* ── Gate 2 correction: side instrument housings ──────────────────────────
   A left analog gauge (dial + needle) and a right lens/porthole, each with a
   strut connecting it down into the header rail and two fastener dots — real
   visible subparts, not the small background dots this replaces. Positioned
   absolutely within the header (already position:relative since Gate 1). */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-side-gauge {
  position: absolute;
  top: 6px;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-side-gauge-left {
  left: 10px;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-side-gauge-right {
  right: 10px;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-gauge-strut {
  stroke: var(--sp-brass-dark);
  stroke-width: 2.5;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-gauge-face {
  fill: var(--sp-cream-light);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-gauge-ring {
  fill: none;
  stroke: var(--sp-brass-dark);
  stroke-width: 2.2;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-gauge-dial {
  fill: none;
  stroke: var(--sp-brass);
  stroke-width: 1;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-gauge-needle {
  stroke: var(--sp-ink);
  stroke-width: 1.4;
  stroke-linecap: round;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-gauge-hub,
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-gauge-fastener {
  fill: var(--sp-ink);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-lens-inner {
  fill: var(--sp-walnut-deep);
  stroke: var(--sp-brass);
  stroke-width: 1;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-lens-glint {
  fill: rgba(244, 228, 191, .55);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-compass-star path {
  fill: var(--sp-brass);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-compass-hub {
  fill: var(--sp-ink);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-compass-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 8px;
  font-weight: 700;
  fill: var(--sp-ink);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-title {
  margin: 2px 0 0;
  /* Gate 4 correction: Cinzel's lowercase glyphs are unicase forms shaped
     like small capitals (a documented characteristic of the typeface, not a
     rendering bug), so "Room Creator" visibly read as ROOM CREATOR even
     though the DOM text and text-transform were already correct. Georgia is
     already the family used for every other role in this file and has
     genuine lowercase letterforms, so it's used here at its real bold
     weight (700 — Georgia has no true black/900 face, and synthesizing one
     is unreliable across platforms) with a touch more size and
     letter-spacing to keep the title visually dominant over field labels,
     which also use Georgia 700 at 16px. */
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: .015em;
  color: var(--sp-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-divider {
  width: 72px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sp-brass-dark), transparent);
  position: relative;
}
/* Engraved-divider flourish: a small diamond at the center, echoing the
   reference's centered ornament rather than a bare line. */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--sp-brass-dark);
  transform: translate(-50%, -50%) rotate(45deg);
}
/* Structural rail fastener locations along the header's own side edges,
   between the corner rivets already on #create-options and the ones on the
   header — reads as one continuous riveted rail rather than two separate
   floating rivet sets. */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 2.5px at 8px 50%, var(--sp-brass-dark) 0 55%, transparent 65%),
    radial-gradient(circle 2.5px at calc(100% - 8px) 50%, var(--sp-brass-dark) 0 55%, transparent 65%);
}

/* ── Explainer paragraph ──────────────────────────────────────────────── */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .panel-explain {
  color: var(--sp-cream);
  opacity: .85;
  font-family: Georgia, 'Times New Roman', serif;
}

/* ── Field labels — warm brass caps, restrained (not tiny/engraved). ─────── */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .field-label {
  display: block;
  color: var(--sp-brass-light);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .field-group:has(#create-np-btns) .field-label::after {
  content: "Required";
  display: block;
  margin: 2px 0 0;
  padding: 0;
  background: none;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--sp-amber);
}

/* ── Shared "cream enamel instrument face" used by Game Mode, Pace,
   Room Name, and Game Setup — one mixin-like rule set reused via the same
   declarations rather than a shared class, so the real markup stays
   untouched. ─────────────────────────────────────────────────────────── */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-fake-select,
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .mode-toggle-group,
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .np-pref-btns,
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .field-input,
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .game-setup-summary {
  /* Gate 3: cream-parchment.svg added as a low-opacity tiled layer between
     the rivet dots and the base gradient — reads as lightly aged material
     rather than flat beige, without affecting text contrast (verified by
     tools/room-creator-a11y-check.js — same ratios as before this asset). */
  background:
    radial-gradient(circle 2.5px at 9px 9px, var(--sp-brass-light) 0 40%, var(--sp-brass-dark) 60% 100%, transparent 101%),
    radial-gradient(circle 2.5px at calc(100% - 9px) 9px, var(--sp-brass-light) 0 40%, var(--sp-brass-dark) 60% 100%, transparent 101%),
    radial-gradient(circle 2.5px at 9px calc(100% - 9px), var(--sp-brass-light) 0 40%, var(--sp-brass-dark) 60% 100%, transparent 101%),
    radial-gradient(circle 2.5px at calc(100% - 9px) calc(100% - 9px), var(--sp-brass-light) 0 40%, var(--sp-brass-dark) 60% 100%, transparent 101%),
    url('assets/ui/room-creator/steampunk/cream-parchment.svg'),
    linear-gradient(180deg, var(--sp-cream-light), var(--sp-cream));
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  background-size: auto, auto, auto, auto, 96px 96px, auto;
  border: 2px solid var(--sp-brass-dark);
  border-radius: 8px;
  clip-path: var(--sp-clip-chip);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -3px 4px rgba(0, 0, 0, .22),
    inset 0 0 0 4px rgba(184, 120, 36, .12);
}

/* ── Prototype-only "Game Mode" row ───────────────────────────────────────
   Purely decorative: no <select>, no name/value, not read by any script, not
   part of _validateCreateRoom() or the CREATE_GAME payload. */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-gamemode-group {
  display: flex !important;   /* overrides the base style="display:none" */
  flex-direction: column;
  gap: 6px;
  margin-bottom: 2px;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-fake-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  color: var(--sp-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: .98rem;
  cursor: default;
  /* Gate 2: layered mechanical frame — a second inset ring beyond the shared
     cream-face mixin's single band, so this reads as a multi-layer enamel
     face bolted into a frame rather than a flat bordered rectangle. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -3px 4px rgba(0, 0, 0, .22),
    inset 0 0 0 4px rgba(184, 120, 36, .12),
    inset 0 0 0 6px rgba(42, 22, 9, .06);
  /* Inert: no pointer affordance, no focus ring — this row cannot be
     activated (see markup: role="presentation", aria-hidden, tabindex="-1"). */
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-fake-select-chevron {
  color: var(--sp-brass-dark);
  font-size: 1.1rem;
  line-height: 1;
  padding-left: 10px;
  border-left: 1.5px solid rgba(42, 22, 9, .25);
}

/* ── Pace — the real radio pair, restyled as a connected brass-framed row.
   Behaviour is untouched: two radio inputs named "create-mode", each still
   toggles the same underlying state via the unchanged lobby.js listener.

   Gate 2: the reference shows Pace as ONE collapsed row with a clock and
   chevron. #rc-pace-trigger (lobby.html) is a prototype-only button that
   shows/hides the panel below and mirrors its checked state as text; the two
   real radios stay the single source of truth for value, validation, and the
   CREATE_GAME payload — this file only repositions their existing wrapper
   into a popup and never touches lobby.js. Open/close/keyboard/focus-return
   behavior lives in the small additive script at the end of lobby.html. */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .field-group:has(#mode-toggle-group) {
  position: relative;
}
html[data-rc-proto="steampunk-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: 12px 16px;
  background: linear-gradient(180deg, var(--sp-cream-light), var(--sp-cream));
  border: 2px solid var(--sp-brass-dark);
  border-radius: 8px;
  clip-path: var(--sp-clip-chip);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 4px rgba(0, 0, 0, .22);
  color: var(--sp-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-pace-trigger-icon svg {
  width: 18px;
  height: 18px;
  color: var(--sp-brass-dark);
  display: block;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options #rc-pace-trigger-text {
  flex: 1 1 auto;
  text-align: left;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-pace-trigger-chevron {
  color: var(--sp-brass-dark);
  transition: transform .15s ease;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-pace-trigger[aria-expanded="true"] .rc-pace-trigger-chevron {
  transform: rotate(180deg);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-pace-trigger:focus-visible {
  outline: 2px solid var(--sp-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--sp-ink);
}

/* The real radio panel: a floating popup, collapsed unless .rc-pace-open. */
html[data-rc-proto="steampunk-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(--sp-cream-light), var(--sp-cream));
  border: 2px solid var(--sp-brass-dark);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
  overflow: hidden;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .mode-toggle-group.rc-pace-open {
  display: flex;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .mode-toggle-opt {
  flex: 1 1 0;
  gap: 2px;
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid rgba(42, 22, 9, .18);
  border-radius: 0;
  background: transparent;
  color: var(--sp-ink);
  opacity: .8;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .mode-toggle-opt:last-child {
  border-bottom: none;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .mode-toggle-opt:has(input:checked) {
  background: linear-gradient(180deg, var(--sp-brass-light), var(--sp-brass) 70%, var(--sp-brass-dark) 100%);
  color: var(--sp-ink);
  opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 4px rgba(0, 0, 0, .28);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .mode-toggle-opt span {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: .92rem;
  color: inherit;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .mode-toggle-opt:has(#create-mode-realtime) span::before {
  content: "◔ ";
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .mode-toggle-opt:has(#create-mode-async) span::before {
  content: "⧗ ";
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .mode-info-btn {
  border-color: rgba(42, 22, 9, .3);
  color: var(--sp-ink);
  background: transparent;
  opacity: .7;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .mode-info-btn:hover {
  border-color: var(--sp-ink);
  opacity: 1;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .mode-toggle-opt:has(input:focus-visible) {
  outline: 2px solid var(--sp-focus);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px var(--sp-ink);
}
/* Gate 2: when the trigger is opened by a MOUSE click, this JS moves focus
   into the checked radio programmatically — Chromium's :focus-visible
   heuristic ties to input modality and does not show a ring for a
   click-initiated chain even though the radio is genuinely focused (caught
   by tools/room-creator-a11y-check.js checking the radio directly, not just
   its wrapper). A plain :focus rule on the input itself guarantees a visible
   indicator regardless of that heuristic — the "expanded state focus is
   clear" requirement should not depend on how the panel was opened. */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .mode-toggle-opt input:focus {
  outline: 2px solid var(--sp-ink);
  outline-offset: 2px;
}

/* ── Number of Players — connected riveted segment bar ───────────────────
   Same 4 buttons, same ids/data-np/click handlers; only the visual treatment
   changes. */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .np-pref-btns {
  gap: 0;
  position: relative;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-np-pref {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  border: none;
  border-right: 1px solid rgba(42, 22, 9, .25);
  border-radius: 0;
  background: transparent;
  color: var(--sp-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 13px 8px;
}
/* Gate 2: canonical visible label is "2 / 3 / 4 / Any" on one line — the
   accessible name ("2 Players" etc.) is preserved via the new aria-label on
   each button in lobby.html; this only hides the extra visible word. */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-np-word {
  display: none;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-np-pref:last-child {
  border-right: none;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-np-pref:hover {
  background: rgba(42, 22, 9, .1);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-np-pref.np-pref-active {
  /* Gate 4: darkest stop lightened to --sp-brass-interactive-dark (was
     --sp-brass-dark, measured 2.05:1) to close the required contrast gap. */
  background: linear-gradient(180deg, var(--sp-brass-light), var(--sp-brass) 60%, var(--sp-brass-interactive-dark) 100%);
  color: var(--sp-ink);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 5px rgba(0, 0, 0, .3);
}
/* Selected-state checkmark badge — decorative ::after, kept inside the
   button's own box so it can never be clipped by the bar's chamfer. Distinct
   from color alone: also bolder weight + inset shadow above. */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-np-pref.np-pref-active::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sp-ink);
  color: var(--sp-brass-light);
  font-size: .6rem;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-np-pref:focus-visible {
  outline: 2px solid var(--sp-focus);
  outline-offset: -3px;
  box-shadow: 0 0 0 3px var(--sp-ink);
}

/* ── Room Name — cream enamel input with a dark/brass mechanical end-cap.
   dir="auto" is untouched: RTL/Persian typing keeps working; no text-align
   override, so the browser's own bidi handling is left alone. ──────────── */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .field-input {
  padding: 11px 40px 11px 14px;
  color: var(--sp-ink);
  font-family: Georgia, 'Times New Roman', serif;
  position: relative;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options div:has(> .field-input) {
  position: relative;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .field-group:has(#inp-room-name) {
  position: relative;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options #inp-room-name {
  /* Gate 2: deeper frame + a distinct mechanical end assembly, still a
     background-only treatment on the real input (no wrapper) so it stays
     safe under both LTR and RTL — the cap tracks the input's own box, not
     logical text direction. The rivet dot sits inside the 30px cap width,
     well clear of the 40px right padding text never reaches. */
  padding-top: 13px;
  padding-bottom: 13px;
  /* Gate 4: lobby.html loads no Arabic-script webfont (Vazirmatn is scoped to
     index.html only, and Gate 4 forbids adding a new external font request)
     — Georgia alone has no Persian/Arabic glyphs, so the browser was falling
     through to a generic 'serif' resolution with no guarantee of decent
     Arabic coverage. Tahoma and Segoe UI are both well-established
     Arabic-capable system fonts; per-character font fallback means Latin
     text still renders in Georgia (full coverage) while Persian characters
     fall through to whichever of these the OS actually has. Slightly larger
     size for legibility, per the Gate 4 brief. */
  font-family: Georgia, Tahoma, 'Segoe UI', Arial, 'Times New Roman', serif;
  font-size: 1.05rem;
  background:
    /* Gate 4: rivet radius normalized to 2.5px (was 2px here only). */
    radial-gradient(circle 2.5px at calc(100% - 15px) 50%, var(--sp-brass-light) 0 45%, var(--sp-brass-dark) 60% 100%, transparent 101%),
    linear-gradient(90deg, transparent calc(100% - 30px), var(--sp-brass-dark) calc(100% - 30px), var(--sp-ink) 100%),
    linear-gradient(180deg, var(--sp-cream-light), var(--sp-cream));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -3px 5px rgba(0, 0, 0, .25),
    inset 0 0 0 4px rgba(184, 120, 36, .1);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .field-input::placeholder {
  color: rgba(42, 22, 9, .55);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .field-input:focus {
  outline: 2px solid var(--sp-ink);
  outline-offset: 1px;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options [aria-invalid="true"].field-input {
  border-color: var(--sp-error-border);
  outline: 2px solid var(--sp-error-border);
}

/* ── Game Setup summary row ───────────────────────────────────────────── */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .game-setup-summary {
  padding: 10px 14px 10px 10px;
  gap: 12px;
  /* Gate 2: layered outer frame to match the reference's depth (a second
     inset ring beyond the shared mixin's single band). */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -3px 4px rgba(0, 0, 0, .22),
    inset 0 0 0 4px rgba(184, 120, 36, .12),
    inset 0 0 0 6px rgba(42, 22, 9, .06);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .game-setup-summary:hover {
  background: linear-gradient(180deg, var(--sp-cream-light), var(--sp-cream-light));
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .game-setup-summary:focus-visible {
  outline: 2px solid var(--sp-focus);
  outline-offset: -3px;
  box-shadow: 0 0 0 3px var(--sp-ink);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .gss-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background: linear-gradient(160deg, var(--sp-walnut-mid), var(--sp-bronze-near-black));
  border: 1.5px solid var(--sp-brass-dark);
  border-radius: 5px;
  color: var(--sp-brass-light);
  /* Gate 2: dark square "gear bay" — recessed depth, not a flat chip. */
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, .6),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    0 1px 0 rgba(255, 255, 255, .15);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .gss-icon-glyph {
  display: none;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .gss-icon-svg.rc-proto-icon {
  display: block !important;
  width: 18px;
  height: 18px;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .gss-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  /* Gate 2 correction: this row's face is the shared cream mixin — cream
     text on a cream face measured 1.00:1 (plan-flagged, independently
     confirmed). Dark ink matches every other cream-face label in this file
     (Game Mode, Number of Players, Room Name) and measures 11.98:1. */
  color: var(--sp-ink);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .gss-digest {
  /* Gate 4: had no font-family of its own, inheriting nothing useful and
     resolving to the browser's plain default (Arial) — inconsistent with
     every other role in the file. Same serif family as the title/value
     roles, one step lighter (400 vs 700) to read as metadata, not a value. */
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  /* ink at reduced opacity: stays a secondary/lighter weight than the title
     (preserving hierarchy) while still clearing 4.5:1 on the cream face —
     computed ≈6.2:1, verified by tools/room-creator-a11y-check.js. */
  color: rgba(42, 22, 9, .78);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .gss-arrow {
  color: var(--sp-brass);
  font-size: 1.3rem;
  font-weight: 700;
}

/* ── Field validation messages — these <p> elements render on the card's
   dark ground (below each field, not layered on its cream face), so they use
   the light coral text color; never the only signal — the associated control
   also gets a bold border + outline via [aria-invalid] above (dark oxblood,
   correct there since that border sits ON the cream input). ─────────────── */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .field-error {
  color: var(--sp-error-text);
  font-weight: 700;
}

/* ── Create Room — the strongest visual action, brass plate with a
   restrained, non-flickering amber lamp glow at each end. ───────────────── */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-create-confirm {
  position: relative;
  /* Gate 2: heavy mechanical plate — multi-band bevel (three inset rings)
     plus corner fastener dots and a subtle vertical divider near each end
     (the "shaped end section" boundary), not just a single flat gradient. */
  background:
    radial-gradient(circle 2.5px at 10px 8px, var(--sp-ink) 0 55%, transparent 65%),
    radial-gradient(circle 2.5px at calc(100% - 10px) 8px, var(--sp-ink) 0 55%, transparent 65%),
    radial-gradient(circle 2.5px at 10px calc(100% - 8px), var(--sp-ink) 0 55%, transparent 65%),
    radial-gradient(circle 2.5px at calc(100% - 10px) calc(100% - 8px), var(--sp-ink) 0 55%, transparent 65%),
    linear-gradient(90deg, transparent 34px, rgba(42, 22, 9, .3) 34px 35px, transparent 35px),
    linear-gradient(90deg, transparent calc(100% - 35px), rgba(42, 22, 9, .3) calc(100% - 35px) calc(100% - 34px), transparent calc(100% - 34px)),
    /* Gate 4: darkest stop lightened to --sp-brass-interactive-dark (was
       --sp-brass-dark, measured 2.05:1) to close the required contrast gap. */
    linear-gradient(180deg, var(--sp-brass-light) 0%, var(--sp-brass) 55%, var(--sp-brass-interactive-dark) 100%);
  border: 2px solid var(--sp-ink);
  clip-path: var(--sp-clip-chip);
  color: var(--sp-ink);
  /* Gate 4 correction: same Cinzel-unicase issue as .rc-sp-title — "Create
     Room" was reading as CREATE ROOM. Switched to Georgia's real bold face;
     the brass plate, corner fasteners, and lamp glow (not raw font weight)
     already carry this button's "strongest action" visual weight, so a text
     treatment matching the rest of the file's Georgia-bold vocabulary is
     enough to keep it legible as an action label without competing with the
     title. */
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 5px rgba(0, 0, 0, .25),
    inset 0 0 0 5px rgba(42, 22, 9, .12),
    inset 0 0 0 7px rgba(255, 255, 255, .08);
}
/* Gate 3: lamp housing uses the reusable lamp-housing.svg module (the ring)
   as one background layer, an amber-dot radial-gradient as a second layer
   (the "bulb"), and keeps the glow entirely as box-shadow — a THIRD, purely
   CSS-controlled layer that hover/disabled/reduced-motion can restyle
   independently without ever touching the asset. Fallback: if the SVG fails
   to load, the amber dot + glow alone still read as a lamp, just without the
   housing ring — never unreadable. */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-create-confirm::before,
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-create-confirm::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  background:
    radial-gradient(circle 4px at 50% 50%, var(--sp-amber) 0 60%, transparent 100%),
    url('assets/ui/room-creator/steampunk/lamp-housing.svg') no-repeat center / contain;
  box-shadow: 0 0 7px 2px rgba(242, 165, 43, .7);
  transform: translateY(-50%);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-create-confirm::before { left: 18px; }
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-create-confirm::after  { right: 18px; }
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-create-confirm:hover:not(:disabled) {
  filter: brightness(1.05);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-create-confirm:focus-visible {
  outline: 2px solid var(--sp-focus);
  outline-offset: 2px;
}

/* ── Back — compact dark mechanical plate, integrated with the bottom rail
   rather than a floating text link. ──────────────────────────────────────── */
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--sp-cream);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  align-self: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 18px;
  background: linear-gradient(180deg, var(--sp-walnut-mid), var(--sp-bronze-near-black));
  border: 1.5px solid var(--sp-brass-dark);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 -2px 3px rgba(0, 0, 0, .5),
    0 2px 4px rgba(0, 0, 0, .3);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-back-glyph {
  display: none;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-back-svg.rc-proto-icon {
  display: inline-block !important;
  width: 16px;
  height: 16px;
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-back:hover {
  color: var(--sp-brass-light);
}
html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-back:focus-visible {
  outline: 2px solid var(--sp-focus);
  outline-offset: 2px;
}

/* ── Reduced motion: this file introduces no animation (the lamp glow is a
   static box-shadow, not a keyframe), so there is nothing to disable — this
   rule exists to document that check was made explicitly, not skipped. ──── */
@media (prefers-reduced-motion: reduce) {
  html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options * {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Small-viewport safety ────────────────────────────────────────────── */
@media (max-width: 380px) {
  html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options {
    padding: 16px 12px 18px;
  }
  /* Gate 5 correction: at this breakpoint #create-options can genuinely
     overflow internally (content taller than the short viewport), so
     scrollTop can legitimately be > 0 whenever a below-the-fold control is
     interacted with (e.g. focusing Room Name auto-scrolls it into view).
     The base rule's NEGATIVE margin-top (-20px, cancelling the wider 32px
     padding to sit "flush" with the panel's outer edge) pulls the header
     above #create-options's own padding-box top edge — harmless at rest
     (scrollTop 0 still shows it in full), but it means the header's
     rendered box starts genuinely above the scrollable content's own (0,0)
     origin. Reproduced independently: after an auto-scroll, the header
     measured y=-18 (18px above the visible fixed-shell top) with no way to
     scroll further up than scrollTop:0 to fully cancel that offset in a
     single frame of reference — evidence pointed at exactly this margin.
     Removing the negative pull at this narrow breakpoint only (a small,
     narrow-width-only reduction in decorative "flush to the edge" polish,
     per the plan's explicit preference for less ornament over broken
     content) makes the header render entirely inside the container's own
     padding box at every scroll position — structurally, not just at
     scrollTop:0 — so it can never render above the scrollable origin. */
  html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-header {
    margin: 0 0 4px;
    padding: 20px 12px 14px;
  }
  html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .rc-sp-title {
    font-size: 1.4rem;
  }
}

/* Player-count labels at phone widths: same wrapping fix as the Royal
   prototype (lobby.css ~4990-5002 already shrinks these at ≤540px, but this
   file's higher specificity was also overriding font-size/white-space). */
@media (max-width: 540px) {
  html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options .btn-np-pref {
    white-space: normal;
    font-size: .8rem;
    line-height: 1.15;
    padding: 10px 3px;
  }
}

/* ── Wider viewports: preserve a deliberate instrument-panel width rather
   than stretching controls across the entire lobby (brief §16), and restore
   the ORIGINAL in-flow/contained treatment — Gate 1's edge-to-edge fixed
   shell targets the 390×844 canonical mobile composition specifically;
   desktop's deliberate-width treatment is Gate 5's concern, left unchanged
   here rather than reworked into a full-bleed backdrop it never asked for. */
@media (min-width: 640px) {
  html[data-rc-proto="steampunk-room-creator"] #screen-join #create-options {
    position: static;
    inset: auto;
    z-index: auto;
    overflow-y: visible;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  html[data-rc-proto="steampunk-room-creator"] #screen-join.rc-form-open::before {
    content: none;
  }
  html[data-rc-proto="steampunk-room-creator"] #screen-join.rc-form-open.rc-name-visible #name-field-wrap {
    position: static;
    box-shadow: none;
  }
}
