/* Phase-one online room lobby. It does not style or control the domino board. */
.online-lobby-backdrop {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(3, 19, 16, .78);
  backdrop-filter: blur(7px);
}
.online-lobby-backdrop[hidden] { display: none; }
.online-lobby-dialog {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 26px;
  border: 1px solid #d7ddce;
  border-radius: 24px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 90px rgba(0, 0, 0, .38);
  direction: rtl;
}
.online-lobby-dialog .dialog-close { z-index: 2; }
.online-lobby-header { padding-inline-end: 42px; }
.online-lobby-header .section-kicker { color: #78978a; }
.online-lobby-header h2 { margin: 5px 0 7px; color: var(--ink); font-size: clamp(22px, 4vw, 30px); line-height: 1.2; }
.online-lobby-header p { margin: 0; color: #6b7e73; font-size: 11px; line-height: 1.8; }
.online-lobby-create-grid { display: grid; gap: 8px; margin-top: 22px; }
.online-lobby-create-grid button { width: 100%; margin: 0; }
.online-lobby-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: #91a097; font-size: 10px; font-weight: 800; }
.online-lobby-divider::before, .online-lobby-divider::after { content: ''; height: 1px; flex: 1; background: #dfe6d9; }
.online-lobby-join-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.online-lobby-join-form label { display: grid; gap: 5px; min-width: 0; color: #557066; font-size: 10px; font-weight: 800; }
.online-lobby-join-form input { width: 100%; box-sizing: border-box; min-height: 44px; margin: 0; padding: 9px 11px; border: 1px solid #cbd9c8; border-radius: 10px; color: #294b3b; background: #fffefa; font: inherit; font-size: 16px; font-weight: 900; letter-spacing: .12em; text-align: center; text-transform: uppercase; direction: ltr; }
.online-lobby-join-form input:focus { border-color: var(--felt); outline: 3px solid rgba(15, 90, 71, .14); }
.online-lobby-join-form button { min-height: 44px; width: auto; margin: 0; white-space: nowrap; }
.online-lobby-notice { margin: 14px 0 0; padding: 9px 11px; border-radius: 10px; color: #6f551d; background: #fff4cf; font-size: 10px; font-weight: 800; line-height: 1.7; }
.online-lobby-notice.is-error { color: #7b332a; background: #fde4dc; }
.online-lobby-notice.is-success { color: #2f6340; background: #e5f2d8; }
.online-lobby-loading { display: grid; place-items: center; min-height: 110px; color: #60786b; font-size: 12px; font-weight: 800; }
.online-lobby-resume-card { display: grid; gap: 7px; margin: 14px 0; padding: 13px; border: 1px solid #c8d89d; border-radius: 14px; color: #31563f; background: #f0f7d9; text-align: center; }
.online-lobby-resume-card strong { font-size: 13px; }
.online-lobby-resume-card span { color: #557066; font-size: 10px; line-height: 1.6; }
.online-lobby-resume-card button { width: 100%; margin: 0; }
.online-room-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-inline-end: 42px; }
.online-room-heading h2 { margin: 2px 0 0; color: var(--ink); font-size: clamp(20px, 4vw, 28px); line-height: 1.25; }
.online-room-code { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; padding: 5px 9px; border: 1px solid #c9d9bd; border-radius: 999px; color: #55713d; background: #edf6dc; font-size: 13px; font-weight: 900; letter-spacing: .14em; direction: ltr; }
.online-room-status { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: #426a3d; background: #e5f1d6; font-size: 9px; font-weight: 900; white-space: nowrap; }
.online-room-status.is-closed { color: #7b3c31; background: #f8e2d9; }
.online-room-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; padding: 10px 12px; border: 1px solid #dce6d5; border-radius: 12px; background: #f6f9ef; }
.online-room-summary strong { color: #365a45; font-size: 13px; }
.online-room-summary span { color: #789086; font-size: 9px; }
.online-seat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.online-seat-card { min-width: 0; min-height: 82px; display: grid; align-content: center; gap: 4px; padding: 10px; border: 1px solid #dce5d6; border-radius: 12px; background: #fffef8; }
.online-seat-card.is-occupied { border-color: #bdd49b; background: #f3f8e8; }
.online-seat-card.is-current { box-shadow: inset 3px 0 0 var(--lime-dark); }
.online-seat-card.is-empty { color: #9aa9a0; background: #fafbf6; }
.online-seat-label { color: #8a9a91; font-size: 9px; font-weight: 800; }
.online-seat-player { min-width: 0; display: flex; align-items: center; gap: 6px; color: #355546; font-size: 11px; font-weight: 900; }
.online-seat-player strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-seat-player small { flex: 0 0 auto; color: #6b813b; font-size: 8px; font-weight: 900; }
.online-seat-meta { color: #7c9085; font-size: 8px; line-height: 1.5; }
.online-kick-button { justify-self: start; margin: 2px 0 0; padding: 5px 8px; border-color: #e2b5a8; color: #7c3e32; background: #fff0eb; font-size: 9px; }
.online-seat-avatar { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: #fffef5; background: var(--felt); font-size: 10px; font-weight: 900; }
.online-seat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.online-room-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.online-room-actions button { flex: 1 1 150px; width: auto; margin: 0; }
.online-room-actions .online-copy-button { color: #4e6931; border-color: #c8d89d; background: #f0f7d9; }
.online-room-actions .online-leave-button { color: #7c3e32; border-color: #e2b5a8; background: #fff0eb; }
.online-connection-status { margin-top: 10px; color: #819389; font-size: 9px; text-align: center; }
.online-connection-status.is-lost { color: #a4463a; font-weight: 900; }
.online-required-players { display: grid; gap: 7px; margin: 18px 0 0; padding: 0; border: 0; }
.online-required-players legend { margin-bottom: 2px; color: #557066; font-size: 10px; font-weight: 900; }
.online-required-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.online-required-option { min-height: 38px; margin: 0; padding: 7px 10px; border: 1px solid #cbd9c8; border-radius: 10px; color: #557066; background: #fffefa; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.online-required-option.is-selected { border-color: #8eae64; color: #31563f; background: #eaf4d7; box-shadow: inset 0 0 0 1px #adc986; }
.online-required-option:disabled { opacity: .72; cursor: default; }
.online-seat-picker { display: grid; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px solid #dce6d5; border-radius: 12px; background: #f6f9ef; }
.online-seat-picker strong { color: #557066; font-size: 10px; }
.online-seat-picker-options { display: flex; flex-wrap: wrap; gap: 7px; }
.online-seat-picker-options button { width: auto; margin: 0; padding: 8px 11px; }
.online-start-button { flex: 1 1 100%; width: 100%; margin: 0; }
.online-change-seat-button { color: #426a3d; border-color: #c8d89d; background: #f0f7d9; }

@media (max-width: 680px) {
  .online-lobby-backdrop { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .online-lobby-dialog { max-height: calc(100dvh - 16px); padding: 20px 15px calc(16px + env(safe-area-inset-bottom)); border-radius: 18px; }
  .online-lobby-header h2 { font-size: 22px; }
  .online-lobby-join-form { grid-template-columns: 1fr; }
  .online-lobby-join-form button { width: 100%; }
  .online-room-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .online-room-heading h2 { font-size: 21px; }
  .online-room-code { font-size: 12px; }
  .online-seat-card { min-height: 76px; padding: 8px; }
  .online-seat-player { font-size: 10px; }
}