.rooms-ui {
  min-width: 0;
  color: var(--text, #e6e7d8);
  font-size: 13px;
  line-height: 1.6;
}
.rooms-ui *,
.rooms-ui *::before,
.rooms-ui *::after { box-sizing: border-box; }
.rooms-ui [hidden] { display: none !important; }
.rooms-ui .rooms-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rooms-ui .rooms-card {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--line, #46513b);
  background: linear-gradient(135deg, #80704414, transparent 75%), var(--panel, #1c261e);
}
.rooms-ui .rooms-setup { grid-row: span 2; }
.rooms-ui h2 { margin: 0 0 16px; color: var(--gold, #d4b875); font: 23px/1.3 Georgia, serif; overflow-wrap: anywhere; }
.rooms-ui h3 { margin: 0; font-size: 12px; font-weight: normal; color: var(--muted, #b1baa3); }
.rooms-ui .rooms-fields { min-width: 0; padding: 0; margin: 0; border: 0; }
.rooms-ui .rooms-grid,
.rooms-ui .rooms-seat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rooms-ui .rooms-seat-grid { margin-top: 16px; }
.rooms-ui .rooms-field { display: flex; flex-direction: column; min-width: 0; gap: 5px; margin-bottom: 10px; }
.rooms-ui .rooms-field > span { color: var(--muted, #b1baa3); font-size: 11px; }
.rooms-ui input:not([type="checkbox"]),
.rooms-ui select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line, #46513b);
  border-radius: 2px;
  color: var(--text, #e6e7d8);
  background: var(--bg, #101912);
  font: inherit;
}
.rooms-ui input[type="checkbox"] { width: 22px; height: 22px; margin: 4px 0; accent-color: var(--gold, #d4b875); }
.rooms-ui input[readonly] { font-family: ui-monospace, monospace; }
.rooms-ui .rooms-seat-settings { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line, #46513b); }
.rooms-ui legend { max-width: 100%; padding: 0 5px; color: var(--gold, #d4b875); font-size: 11px; }
.rooms-ui .rooms-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rooms-ui .rooms-button { min-height: 42px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.rooms-ui .rooms-setup > .rooms-button,
.rooms-ui .rooms-join > .rooms-button { width: 100%; margin-top: 12px; }
.rooms-ui .rooms-button:disabled { cursor: not-allowed; opacity: .55; }
.rooms-ui :is(button, select, input):focus-visible { outline: 2px solid var(--gold, #d4b875); outline-offset: 3px; }
.rooms-ui .rooms-current { margin-top: 18px; }
.rooms-ui .rooms-state { color: var(--gold, #d4b875); font-weight: bold; }
.rooms-ui .rooms-summary { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 14px; }
.rooms-ui .rooms-summary p { margin: 0; overflow-wrap: anywhere; }
.rooms-ui .rooms-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 16px 0; list-style: none; }
.rooms-ui .rooms-player { min-width: 0; padding: 14px; border: 1px solid var(--line, #46513b); }
.rooms-ui .rooms-player-label { display: block; margin: 3px 0; font-weight: 500; overflow-wrap: anywhere; }
.rooms-ui .rooms-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.rooms-ui .rooms-badge { padding: 1px 7px; border: 1px solid var(--line, #46513b); color: var(--gold, #d4b875); font-size: 10px; }
.rooms-ui .rooms-note { margin: 8px 0; color: var(--muted, #b1baa3); overflow-wrap: anywhere; }
.rooms-ui .rooms-status { min-height: 24px; margin: 14px 0 0; overflow-wrap: anywhere; }
.rooms-ui .rooms-status[data-tone="error"] { color: #f1bca4; }
.rooms-ui .rooms-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .rooms-ui .rooms-panels { grid-template-columns: minmax(0, 1fr); }
  .rooms-ui .rooms-setup { grid-row: auto; }
}
@media (max-width: 420px) {
  .rooms-ui .rooms-card { padding: 14px; }
  .rooms-ui .rooms-grid,
  .rooms-ui .rooms-seat-grid,
  .rooms-ui .rooms-roster { grid-template-columns: minmax(0, 1fr); }
  .rooms-ui .rooms-actions > .rooms-button { flex: 1 1 100%; }
}
@media (forced-colors: active) {
  .rooms-ui .rooms-card,
  .rooms-ui .rooms-player,
  .rooms-ui .rooms-seat-settings,
  .rooms-ui .rooms-badge { border-color: CanvasText; }
  .rooms-ui :is(button, select, input):focus-visible { outline-color: Highlight; }
  .rooms-ui .rooms-button:disabled { color: GrayText; opacity: 1; }
}