/**
 * @file room-code-panel.css
 * @project KAINYNE Website
 * @description [REQ-739] / RFE-298 — unified "Your Room Code" host-panel
 *   component, shared across every multiplayer-capable game lobby (war,
 *   president, crew, coup, compile; gin_rummy lands with RFE-295).
 *   Surfaces the 4-letter room code (REQ-021), the 4-word phrase, and
 *   the speak-aloud hint in the same shape on every game so voice-join
 *   workflows don't relearn the layout per surface.
 *
 *   Per-game palette identity is preserved via the `--room-code-accent`
 *   custom property — each game sets it inline on the panel
 *   (`style="--room-code-accent: #00e5ff;"` for war, etc.). The fallback
 *   in this file is the KAINYNE electric-yellow accent (REQ-005).
 *
 *   BEM-style children (`__label`, `__code`, `__phrase`, `__hint`) keep
 *   the HTML uncluttered while each lobby's existing per-game element
 *   IDs (`#room-code-display`, `#lobby-room-code`, `#crew-room-code`,
 *   `#coup-room-code`, `#cmp-room-code`) stay on the same nodes so
 *   `lobby.js`'s `getElementById(…).textContent` writes keep working
 *   without a JS refactor.
 * @module UI/SiteShell
 * @requirements REQ-005, REQ-021, REQ-739
 * @hazards CSS-only — no JS runtime impact. The `color-mix()` border
 *   call is gated by a `@supports` fallback so older browsers without
 *   relative-color support still get a visible border (just at the
 *   accent's full opacity instead of the 22%-mix highlight).
 * @notes Loaded by each game's `index.html` via
 *   `<link rel="stylesheet" href="/src/room-code-panel.css">`. Mirrors
 *   the `src/button-press.css` precedent (RFE-299) — shared CSS
 *   component, no JS dependency, one `<link>` per page.
 */

.room-code-panel {
  --room-code-accent: #ffe000;
  background: #0a0a0a;
  border: 1px solid var(--room-code-accent);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
  margin: 0.4rem 0;
}

@supports (border-color: color-mix(in srgb, red 50%, transparent)) {
  .room-code-panel {
    border-color: color-mix(in srgb, var(--room-code-accent) 35%, transparent);
  }
}

.room-code-panel__label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 0.3rem;
}

.room-code-panel__code {
  font-family: monospace;
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: var(--room-code-accent);
  line-height: 1.15;
}

.room-code-panel__phrase {
  font-size: 0.85rem;
  color: #aaa;
  font-style: italic;
  letter-spacing: 0.03em;
  min-height: 1.1em;
  margin-top: 0.25rem;
}

.room-code-panel__hint {
  font-size: 0.7rem;
  color: #888;
  line-height: 1.5;
  margin-top: 0.5rem;
}