/* ══════════════════════════════════════════════════════════════════════════
TEMPORARY PROTOTYPE — Room Creator "Royal Tactile Light" visual concept
══════════════════════════════════════════════════════════════════════════
Activation: opt-in only, via the URL query param `?prototype=royal-tactile`.
The synchronous script in lobby.html reads that param and sets
`` — this file never applies on
its own, and no query param means neither prototype is active.
Mutually exclusive with `?prototype=steampunk-room-creator`.
Scope: every rule below is prefixed with
`html[data-rc-proto="royal-tactile"] #screen-join #create-options`
(or a descendant of it). It touches NOTHING outside the Room Creator's
"create-options" panel — no other screen, modal, or shared component
is targeted, styled, or overridden by this file.
Status: presentation-only prototype for design review. No JavaScript in this
project reads any class or selector introduced here. Every control
keeps its original id, name, value, and event binding from lobby.html
/ lobby.js — this file only repaints them.
Revert: delete the
tag in lobby.html, remove the `royal-tactile` branch from the
activation script, remove the inert "Game Mode" row markup, and
delete this file. Nothing else references it.
Reference: Frontend_redesign/room-creator/Gpt-output/
concept-1-royal-tactile-light-cascade-menus.png
Companion doc: Frontend_redesign/02-room-creator-prototype.md
═══════════════════════════════════════════════════════════════════════════ */
html[data-rc-proto="royal-tactile"] #screen-join #create-options {
/* Local palette — scoped custom properties, never written to :root, so
nothing outside this panel can see or inherit them. */
--rc-navy: #16233f;
--rc-navy-soft: #223454;
--rc-gold: #caa04a;
--rc-gold-light: #ecd48a;
--rc-gold-deep: #9c7328;
--rc-ivory: #f6efe0;
--rc-ivory-deep: #ece2c8;
--rc-input-bg: #fbf7ec;
--rc-ink: #1c2740;
--rc-ink-soft: rgba(28, 39, 64, .64);
--rc-ink-faint: rgba(28, 39, 64, .38);
--rc-error: #a3271a;
--rc-focus: #16233f;
/* Chamfered ("cut-corner") shapes shared by the card and its inner rows. */
--rc-clip-card: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
--rc-clip-chip: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%,
0 100%, 0 10px);
background: var(--rc-ivory);
border: 3px solid var(--rc-navy);
border-radius: 0;
box-shadow:
inset 0 0 0 2px var(--rc-gold),
0 14px 30px rgba(20, 16, 8, .28);
clip-path: var(--rc-clip-card);
padding: 22px 20px 24px;
gap: 16px;
color: var(--rc-ink);
}
/* ── Explainer paragraph — kept (not shown in the reference crop) so the
short "what is this panel" copy isn't silently dropped; recoloured to sit
on the ivory ground. ─────────────────────────────────────────────────── */
html[data-rc-proto="royal-tactile"] #screen-join #create-options .panel-explain {
color: var(--rc-ink-soft);
}
/* ── Field labels — reference uses plain-case navy labels, not the app's
uppercase/letter-spaced default. Quicksand is already loaded by this page
(used elsewhere for headline text), reused here rather than adding a font. */
html[data-rc-proto="royal-tactile"] #screen-join #create-options .field-label {
display: block;
color: var(--rc-ink);
font-family: 'Quicksand', 'Segoe UI', sans-serif;
font-size: .95rem;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
}
/* "Required" caption under Number of Players — reference shows it as a small
blue caption on its own line, not an inline amber pill. */
html[data-rc-proto="royal-tactile"] #screen-join #create-options .field-group:has(#create-np-btns) .field-label {
color: var(--rc-ink);
}
html[data-rc-proto="royal-tactile"] #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: none;
color: #2b5aa3;
}
/* ── Prototype-only "Game Mode" row ───────────────────────────────────────
Purely decorative: no