/* ══════════════════════════════════════════════════════════════════════════ Frontend Style 2 — Lobby shell (header/nav) + Room Creator desktop/tablet composition + Room Preview ══════════════════════════════════════════════════════════════════════════ Activation: two independent attributes on , both set by the activation script at the top of lobby.html (docs/frontend-style-selector-design.md has the full contract): data-frontend-style="style-2" → header + Lobby nav (.site-header, .lobby-uline) restyle. Shell-wide, not tied to which Room Creator concept is active. data-rc-proto="futuristic-glass-room-creator" → the desktop/tablet two-column composition and #rc-fg-preview (Room Preview). Reuses the SAME attribute room-creator-prototype- futuristic.css already uses for the mobile card, so a QA ?prototype=futuristic- glass-room-creator link gets the matching preview panel even under Style 1 (see design doc, "?style= vs ?prototype="). Scope: .site-header / .lobby-uline rules are prefixed html[data-frontend-style="style-2"] … and touch NOTHING beyond those two shared components (no game logic, no other page). Everything else in this file is prefixed html[data-rc-proto="futuristic-glass-room-creator"] … and touches only .rc-fg-desktop-row / #rc-fg-preview (both new elements) plus one narrowly-targeted override of #screen-join's own max-width at ≥1024px (see that rule's own comment for why it's safe). room-creator-prototype-futuristic.css itself is NOT edited by this file — kept fully independent so either can be reviewed/reverted on its own, matching this project's existing one-file-per-concern convention for the three Room Creator prototypes. Tokens: a small SEPARATE --s2-* custom-property set, NOT the --fg-* tokens room-creator-prototype-futuristic.css declares scoped to #create-options — #rc-fg-preview/.site-header/.lobby-uline are siblings of #create-options, not descendants, so they cannot see those tokens (confirmed by reading that file first; it hits the exact same problem for #lobby-error and solves it the same way — see this file's own literal-value comment there). Declaring a second, independent token set here (rather than hardcoding every literal twice) keeps this file's own rules maintainable without touching the other file at all. Assets: no raster/photographic textures — CSS + inline SVG only (the map preview s a already inlined in lobby.html). Revert: delete the tag in lobby.html and this file. lobby.html's own #rc-fg-desktop-row wrapper / #rc-fg-preview markup and its sync script can stay in place inert (everything in them is only ever shown by this file's rules) or be removed together with it. Reference: Frontend_redesign/lobby/desktop-lobby-room-creator-concept.png (visual target for the ≥1024px composition only — not embedded as an image anywhere in the rendered page). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tokens (dark = default, matches the approved futuristic mobile card's own default-dark convention) ─────────────────────────────────────────── */ html[data-rc-proto="futuristic-glass-room-creator"] { --s2-bg-1: #0a1424; --s2-bg-2: #0d1c33; --s2-panel-top: rgba(20, 36, 62, .82); --s2-panel-bot: rgba(6, 11, 20, .92); --s2-header-bg: rgba(20, 36, 62, .94); --s2-cyan: #6fe0ff; --s2-cyan-bright: #bdf3ff; --s2-cyan-dim: rgba(111, 224, 255, .32); --s2-violet: #9d7bff; --s2-blue: #4f7fff; --s2-text: #eef8ff; --s2-text-dim: rgba(238, 248, 255, .72); --s2-text-faint: rgba(238, 248, 255, .52); --s2-border: rgba(111, 224, 255, .18); --s2-hairline: rgba(111, 224, 255, .14); --s2-shadow: 0 18px 44px rgba(2, 5, 12, .5), 0 0 26px rgba(90, 170, 255, .07); } /* Light mode — same attribute pairing lobby.css/room-creator-prototype- futuristic.css already key off (the app's own persisted/explicit theme choice, never prefers-color-scheme directly). Values matched to that file's own "Futuristic light mode" block (read directly from it, not invented) — that design is a VIBRANT saturated-blue light theme, not a white/pale one; #rc-fg-preview sits directly beside #create-options at every width ≥541px, so using different light tokens (an earlier draft used near-white) produced a visibly mismatched pair of surfaces — caught via a live screenshot at 1440×900, not assumed correct from the CSS alone. */ html[data-rc-proto="futuristic-glass-room-creator"][data-theme="light"] { --s2-bg-1: #142a4f; --s2-bg-2: #1c3a68; --s2-panel-top: rgba(52, 96, 168, .85); --s2-panel-bot: rgba(20, 42, 82, .94); --s2-header-bg: rgba(62, 99, 155, .95); --s2-cyan: #17a3e8; --s2-cyan-bright: #5fe0ff; --s2-cyan-dim: rgba(23, 163, 232, .42); --s2-violet: #9d4ff5; --s2-blue: #3159f0; --s2-text: #ffffff; --s2-text-dim: rgba(255, 255, 255, .88); --s2-text-faint: rgba(255, 255, 255, .68); --s2-border: rgba(255, 255, 255, .32); --s2-hairline: rgba(255, 255, 255, .28); --s2-shadow: 0 16px 38px rgba(15, 28, 52, .34), 0 0 26px rgba(90, 160, 230, .2); } /* ── Shared header restyle — Style 2, shell-wide ───────────────────────── .site-header keeps its exact existing layout (position:fixed, height, logo/title/right-zone structure) — only surface colors/typography change, so nothing about its box model or the fixed-chrome measurements the "Mobile top-offset" script (lobby.html) relies on shifts. */ html[data-frontend-style="style-2"] .site-header { background: var(--s2-header-bg, rgba(20, 36, 62, .94)); border-bottom: 1px solid var(--s2-border, rgba(111, 224, 255, .18)); } html[data-frontend-style="style-2"] .sh-title { color: var(--s2-cyan-bright, #bdf3ff); text-shadow: 0 0 14px rgba(111, 224, 255, .35); } html[data-frontend-style="style-2"] .sh-back-link { color: var(--s2-text-dim, rgba(238, 248, 255, .72)); border-color: var(--s2-border, rgba(111, 224, 255, .18)); background: rgba(111, 224, 255, .06); } /* ── Desktop Lobby nav restyle (.lobby-uline — existing, functional; see lobby.html's corrected comment above it) — segmented glass-pill tabs instead of the flat underline. Same markup, same [data-nav] behavior, same ≥541px visibility rule from lobby.css (untouched). ────────────── */ html[data-frontend-style="style-2"] .lobby-uline { background: var(--s2-panel-top, rgba(20, 36, 62, .82)); border: 1px solid var(--s2-border, rgba(111, 224, 255, .18)); border-radius: 12px; box-shadow: var(--s2-shadow); gap: 6px; padding: 6px; } html[data-frontend-style="style-2"] .uline-item { border-radius: 8px; border-bottom: none; color: var(--s2-text-dim, rgba(238, 248, 255, .72)); } html[data-frontend-style="style-2"] .uline-item:hover { color: var(--s2-text, #eef8ff); background: rgba(111, 224, 255, .08); } html[data-frontend-style="style-2"] .uline-item.is-active { color: var(--s2-cyan-bright, #bdf3ff); background: linear-gradient(180deg, rgba(111, 224, 255, .16), rgba(157, 123, 255, .12)); box-shadow: inset 0 0 0 1px var(--s2-cyan-dim, rgba(111, 224, 255, .32)); } /* ── Room Preview panel + desktop/tablet composition ───────────────────── Reuses html[data-rc-proto="futuristic-glass-room-creator"] — the same attribute the approved mobile card already activates on, so a ?prototype=futuristic-glass-room-creator QA link gets a matching preview even outside Style 2 (documented precedence in lobby.html's activation script). Hidden by default (mobile ≤540px, Style 1/other prototypes everywhere, AND whenever #create-options itself is closed — the preview is part of the Room CREATOR composition, not the picker screen, matching the reference concept and reusing the exact same ":has(#create-options:not([style*=\"none\"]))" open-state test the existing "outer-chrome takeover" rule above already uses for #screen-join). The base state below is the ≥541px tablet/desktop default while OPEN; the ≤540px block further down turns it back off regardless, matching Q16's mobile preservation requirement. */ html[data-rc-proto="futuristic-glass-room-creator"] #rc-fg-preview { display: none; } @media (min-width: 541px) { html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-desktop-row:has(#create-options:not([style*="none"])) #rc-fg-preview { display: block !important; /* overrides the base style="display:none" — same convention room-creator-prototype-futuristic.css already uses for .rc-fg-header etc. */ width: 100%; max-width: 420px; margin: 16px auto 0; box-sizing: border-box; padding: 18px 18px 20px; background: linear-gradient(165deg, var(--s2-panel-top), var(--s2-panel-bot)); border: 1px solid var(--s2-border); border-radius: 16px; box-shadow: var(--s2-shadow); color: var(--s2-text); font-family: inherit; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--s2-cyan-bright); } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-icon { width: 18px; height: 18px; flex: none; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-title { font-weight: 700; font-size: 1rem; letter-spacing: .3px; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-chips { display: flex; gap: 8px; margin-bottom: 14px; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-chip { font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(111, 224, 255, .1); border: 1px solid var(--s2-border); color: var(--s2-text-dim); } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-meta { margin: 0 0 16px; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-meta-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--s2-hairline); font-size: .84rem; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-meta-row:last-child { border-bottom: none; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-meta-row dt { color: var(--s2-text-faint); font-weight: 500; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-meta-row dd { margin: 0; color: var(--s2-text); font-weight: 600; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: rgba(255, 176, 96, .16); color: #ffb060; border: 1px solid rgba(255, 176, 96, .35); } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-status--ready { background: rgba(96, 230, 160, .16); color: #57e0a0; border-color: rgba(96, 230, 160, .38); } /* Player Slots */ html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-slots-label, html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-map-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--s2-text-faint); margin-bottom: 8px; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-slots { margin-bottom: 16px; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-slots-body { display: flex; flex-wrap: wrap; gap: 8px; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-slot svg { width: 30px; height: 30px; border-radius: 50%; padding: 4px; box-sizing: border-box; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-slot--you svg { color: var(--s2-bg-1); background: linear-gradient(160deg, var(--s2-cyan), var(--s2-violet)); box-shadow: 0 0 0 2px var(--s2-cyan-dim); } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-slot--empty svg { color: var(--s2-text-faint); background: rgba(111, 224, 255, .06); border: 1px dashed var(--s2-border); } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-slot-num { font-size: .68rem; color: var(--s2-text-faint); } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-slot-placeholder, html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-slot-any { font-size: .8rem; color: var(--s2-text-faint); font-style: italic; } /* Map Preview — decorative-only SVG hex art */ html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-preview-map-art { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--s2-bg-1); border: 1px solid var(--s2-hairline); } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-map-hex { stroke: var(--s2-hairline); stroke-width: 1; } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-map-hex--a { fill: rgba(111, 224, 255, .05); } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-map-hex--b { fill: rgba(111, 224, 255, .1); } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-map-hex--c { fill: rgba(157, 123, 255, .1); } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-map-gem--cyan { fill: var(--s2-cyan-bright); filter: drop-shadow(0 0 3px var(--s2-cyan)); } html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-map-gem--violet { fill: var(--s2-violet); filter: drop-shadow(0 0 3px var(--s2-violet)); } } /* ── Tablet (541–1023px): stacked, never the wide two-column composition — .rc-fg-desktop-row stays a plain block wrapper (its default, untouched here), so #screen-join and #rc-fg-preview simply stack in DOM order with the gap already set on #rc-fg-preview's own margin-top above. No rule is needed in this band beyond what the ≥541px block already provides. ───── */ /* ── Desktop (≥1024px): the reference's two-column composition ─────────── */ @media (min-width: 1024px) { html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-desktop-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: start; gap: 28px; width: 100%; max-width: 1180px; margin: 0 auto; } /* Higher specificity (attribute + 2 classes + id) than lobby.css's general `.lobby-card { max-width:420px }` (≥600px) rule, so this wins without !important and without touching that shared rule — confirmed by reading lobby.css first; #screen-join is the only element affected. */ html[data-rc-proto="futuristic-glass-room-creator"] .rc-fg-desktop-row #screen-join { max-width: none; width: 100%; } html[data-rc-proto="futuristic-glass-room-creator"] #rc-fg-preview { margin: 0; align-self: start; position: sticky; top: calc(var(--lobby-header-h, 70px) + 24px); } }