/* Vaelora's quiet planning surface. Backing: docs/creative-direction.md and
   docs/art-direction/creative-atlas-v1/journey-storyboard.svg (stages 2–3).
   Client materials remain scoped to this dialog; match-mode controls elsewhere
   retain their existing HUD theme. */
#room-lobby {
  --lobby-pine: #102c27;
  --lobby-deep: #0b201c;
  --lobby-raised: #1b3730;
  --lobby-paper: #f3eddf;
  --lobby-sage: #bcc9bd;
  --lobby-brass: #d0b376;
  --lobby-line: #809387;
  --lobby-decoration: #52634d;
  --lobby-focus: #ceedd9;
  color-scheme: dark;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  box-sizing: border-box;
  overflow: auto;
  padding: 28px;
  color: var(--lobby-paper);
  background: var(--lobby-pine);
  border: 1px solid var(--lobby-brass);
  border-radius: 2px;
  box-shadow: 0 18px 50px #03110f99, inset 0 0 0 4px var(--lobby-deep), inset 0 0 0 5px #d0b37640;
  font: 14px/1.55 system-ui, sans-serif;
  overflow-wrap: anywhere;
}
#room-lobby::backdrop { background: rgb(8 25 21 / 78%); }
#room-lobby h2 { margin: 0; font: 400 30px/1.15 Georgia, 'Times New Roman', serif; }
#room-lobby .room-lobby-brand { margin: 0 0 10px; color: var(--lobby-brass); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
#room-lobby .room-lobby-summary { margin: 10px 0 18px; color: var(--lobby-sage); }
#room-lobby ul { padding: 0; list-style: none; }
#room-lobby .room-lobby-seat { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lobby-decoration); }
#room-lobby .room-lobby-seat::before { content: ''; width: 10px; height: 10px; flex: 0 0 10px; border: 1px solid currentColor; box-sizing: border-box; }
#room-lobby .room-lobby-seat[data-team="0"]::before { color: #5aa7d7; background: #5aa7d7; }
#room-lobby .room-lobby-seat[data-team="1"]::before { color: #e67a5e; background: #e67a5e; transform: rotate(45deg); }
#room-lobby label { display: block; margin: 16px 0; }
#room-lobby :is(select, input) { display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--lobby-line); border-radius: 2px; background: var(--lobby-deep); color: var(--lobby-paper); font: inherit; }
#room-lobby .room-lobby-help { color: var(--lobby-sage); font-size: 12px; }
#room-lobby .room-lobby-map-summary { margin: -6px 0 16px; }
#lobby-status { min-height: 44px; margin: 18px 0; padding: 10px 12px; border-left: 2px solid #a9ccde; background: var(--lobby-deep); color: var(--lobby-sage); }
#lobby-status[data-feedback="error"] { color: #ffd0c8; border-left-color: #ffd0c8; background: #542627; }
#lobby-status[data-feedback="pending"] { border-left-color: var(--lobby-brass); }
.room-lobby-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#room-lobby button { box-sizing: border-box; min-height: 44px; padding: 10px 14px; border: 1px solid var(--lobby-line); border-radius: 2px; background: var(--lobby-raised); color: var(--lobby-paper); font: inherit; cursor: pointer; transition: background-color 140ms, border-color 140ms; }
#room-lobby button:hover:not(:disabled) { background: #244237; border-color: var(--lobby-brass); }
#room-lobby button:active:not(:disabled) { background: var(--lobby-deep); }
#room-lobby #lobby-ready[data-ready="true"] { border-color: #a8d0bd; background: #244237; }
#room-lobby #lobby-launch:not(:disabled) { --lobby-button-wash: #e1c99733; color: var(--lobby-deep); background: linear-gradient(var(--lobby-button-wash), var(--lobby-button-wash)), url('/assets/ui/vaelora-brand-v1/brass-surface.webp') center / cover, var(--lobby-brass); border-color: var(--lobby-brass); box-shadow: inset 0 0 0 3px #d0b376, inset 0 0 0 4px #544328; }
#room-lobby #lobby-launch:hover:not(:disabled) { --lobby-button-wash: #fff0bd66; }
#room-lobby #lobby-launch:active:not(:disabled) { --lobby-button-wash: #8e713b44; }
#room-lobby :is(button, select, input):disabled { background: #3b4841; color: var(--lobby-sage); border-color: var(--lobby-line); box-shadow: none; cursor: default; opacity: 1; }
#room-lobby a { display: inline-flex; align-items: center; min-height: 44px; color: #a8d0bd; text-underline-offset: 4px; }
#room-lobby :is(a, button, select, input, summary):focus-visible { outline: 3px solid var(--lobby-focus); outline-offset: 4px; }
#room-lobby summary { padding: 10px 0; min-height: 44px; cursor: pointer; }
#room-lobby [hidden] { display: none; }
.room-lobby-chat { margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--lobby-decoration, #65715d); }
.room-lobby-chat h3 { margin-bottom: 8px; font: 400 22px/1.2 Georgia, 'Times New Roman', serif; }
#lobby-chat-log { max-height: 150px; overflow: auto; padding: 0; list-style: none; overflow-wrap: anywhere; }
#room-lobby .room-lobby-chat li { padding: 6px 0; border-bottom: 1px solid var(--lobby-decoration); }
.room-lobby-chat form { display: flex; gap: 8px; align-items: end; }
#room-lobby .room-lobby-chat label { flex: 1; min-width: 0; margin: 0; }
#lobby-chat-status { color: var(--lobby-sage, #b5c2ad); font-size: 12px; }
#room-lobby .match-mode-summary, #room-lobby .match-mode-controls details, #room-lobby .match-mode-controls [role="status"] { color: var(--lobby-sage); }

/* Shared mode controls are also used outside the pregame dialog. */
.match-mode-summary, .match-mode-controls details, .match-mode-controls [role="status"] { font-size: 12px; color: var(--muted, #b5c2ad); }
.match-mode-controls details p { margin: 8px 0; }
.match-mode-controls [role="status"]:empty { display: none; }
.match-mode-controls label { display: block; margin-top: 12px; }
.match-mode-controls select { display: block; box-sizing: border-box; width: 100%; min-height: 36px; margin-top: 4px; padding: 8px; border: 1px solid var(--line, #65715d); border-radius: 4px; background: var(--panel-soft, #19231c); color: var(--ink, #e5eadf); font: inherit; }
.match-mode-controls select:focus-visible { outline: 2px solid var(--lime, #d5ef78); outline-offset: 2px; }
@media (max-width: 480px) {
  #room-lobby { padding: 22px 18px; }
  #room-lobby .room-lobby-actions button { flex: 1 1 calc(50% - 8px); }
  #room-lobby .room-lobby-actions a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { #room-lobby button { transition: none; } }
@media (forced-colors: active) {
  #room-lobby { box-shadow: none; border-color: CanvasText; }
  #room-lobby .room-lobby-seat[data-team]::before { color: CanvasText; background: CanvasText; }
  #room-lobby :is(a, button, select, input, summary):focus-visible { outline-color: Highlight; }
  #room-lobby #lobby-ready[data-ready="true"] { outline: 1px solid ButtonText; outline-offset: -4px; }
  #room-lobby #lobby-launch:not(:disabled) { background: ButtonFace; color: ButtonText; box-shadow: none; }
}