/* 開機載入畫面：index.html 靜態即存在（先於任何 JS/目錄載入即可見＝首載期間不再是死骨架），
   目錄載入成功後由 main.js 隱藏；失敗時就地顯示錯誤與重試鈕。z 高於大廳全螢幕層（40） */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  background: var(--c-page);
  color: var(--c-mut);
}

.boot-screen[hidden] {
  display: none;
}

.boot-screen-text {
  font-size: 1rem;
}

.boot-screen-error {
  font-size: 0.85rem;
  color: var(--c-danger-ink);
  max-width: var(--main-col-w);
  padding: 0 1rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.screen-root {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: var(--app-inset-top) var(--app-inset-right) var(--app-inset-bottom) var(--app-inset-left);
  background: var(--c-page);
}

.screen-root[hidden] {
  display: none;
}

.lobby-panel {
  position: relative;
  width: min(90vw, var(--main-col-w));
  max-height: 92vh;
  overflow: auto;
  overflow-x: hidden;
  background: var(--c-surface);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius-l);
  padding: 1.2rem;
  display: grid;
  gap: 0.8rem;
}

/* 面板第一列控制列（音效開關＋語言切換）：獨立高度、靠右，與標題／內容互不重疊 */
.lobby-corner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

/* 等待室頂部：加入連結 QR（左）＋牌局代碼資訊（右） */
.lobby-code-head {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.lobby-qr {
  flex: 0 0 auto;
  width: 6.5rem;
  height: 6.5rem;
  padding: 0.35rem;
  background: #fff;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius-m);
  display: grid;
  place-items: center;
}

.lobby-qr svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lobby-code-info {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.4rem;
  justify-items: center;
}

.lobby-title {
  margin: 0;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.35em;
  color: var(--c-accent-ink);
  letter-spacing: 0.15rem;
}

/* 遊戲名稱雙色：Knife/刀＝潛伏紅、Life/被刀＝軍情藍（沿用情報語意色） */
.lobby-title-knife {
  color: var(--c-intel-red);
}

.lobby-title-life {
  color: var(--c-intel-blue);
}

.lobby-sub {
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--c-mut);
}

.lobby-field {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.lobby-label {
  font-size: 0.7rem;
  color: var(--c-mut);
}

.lobby-input {
  width: 100%;
  min-width: 0;
  background: var(--c-surface-3);
  border: var(--bw) solid var(--c-border);
  border-radius: 0.5rem;
  color: var(--c-ink);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
}

.lobby-input:focus {
  outline: var(--bw) solid var(--c-accent);
}

/* 首頁必填名稱區：與下方選項卡拉開明顯間隔 */
.lobby-field--name {
  margin-bottom: 0.9rem;
}

/* 雙選項卡（建立／加入）：等寬並列、外觀對等；動作鈕貼齊卡底使兩鈕水平對齊 */
.lobby-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.6rem;
  border-top: var(--bw) solid var(--c-border);
  padding-top: 0.9rem;
}

.lobby-choice {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border: var(--bw) solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-surface-2);
  padding: 0.7rem;
}

/* 代碼已預填（掃碼／連結進入）時點亮加入卡 */
.lobby-choice--suggested {
  border-color: var(--c-accent);
}

.lobby-choice-desc {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--c-mut);
  text-align: center;
}

.lobby-choice-action {
  margin-top: auto;
}

/* 極窄視窗：選項卡退化為單欄 */
@media (max-width: 22rem) {
  .lobby-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lobby-status {
  min-height: 1.1rem;
  font-size: 0.72rem;
  color: var(--c-danger-ink);
  text-align: center;
}

/* 面板底部通知插槽：踢除等暫時性通知顯示於此（重繪後由 mountNoticeSlot 移掛回存續中通知） */
.lobby-notice-slot {
  min-height: 2.2rem;
  display: grid;
  justify-items: center;
  align-items: center;
}

.code-big {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.5rem;
  color: var(--c-accent-ink);
}

.player-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
}

.player-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--c-surface-2);
  border: var(--bw) solid var(--c-border);
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
}

.player-row--you {
  border-color: var(--c-accent);
}

.player-seat {
  color: var(--c-mut);
  font-size: 0.7rem;
  min-width: 2.4rem;
}

.player-flag {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--c-accent-ink);
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
}

.settings-grid .lobby-field--wide {
  grid-column: 1 / -1;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--c-surface-3);
  border: var(--bw) solid var(--c-border);
  border-radius: 0.5rem;
  padding: 0.15rem;
}

.step-btn {
  width: 1.9rem;
  height: 1.9rem;
  border: none;
  background: var(--c-surface-2);
  color: var(--c-accent-ink);
  border-radius: 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.step-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.step-value {
  flex: 1;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
}

.seg-row {
  display: flex;
  gap: 0.3rem;
}

.seg-btn {
  flex: 1;
  padding: 0.42rem 0.2rem;
  border-radius: 0.5rem;
  border: var(--bw) solid var(--c-border);
  background: var(--c-surface-3);
  font-size: 0.78rem;
  cursor: pointer;
}

.seg-btn--active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 700;
}

/* 主色亮階鈕：與 btn--primary 同色系（金），深淺配對表達對等選項（建立＝深、加入＝淺）；沿用既有 token */
.btn--primary-light {
  background: var(--c-accent-ink);
  border-color: var(--c-accent-ink);
  color: var(--c-on-accent);
  font-weight: 700;
}

.lobby-note {
  font-size: 0.68rem;
  color: var(--c-mut);
  text-align: center;
}

/* 等待室「移除玩家」鈕（僅房主視角的非房主列）：靠右、危險色系 */
.kick-btn {
  margin-left: auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  border: var(--bw) solid var(--c-danger);
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.draft-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* 選角卡＝按鈕容器，內容為完整角色卡面（charFace 'draft' 尺寸）；容器透明、僅承載選取框 */
.draft-card {
  border: var(--bw) solid transparent;
  border-radius: 0.6rem;
  background: none;
  padding: 0.25rem;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.draft-card--selected {
  box-shadow: 0 0 0 var(--bw-bold) var(--c-accent), var(--shadow-pop);
}

/* 選角確認鈕未選態：灰底提示（禁止游標由 .btn:disabled 供應）；壓過 disabled 預設透明度以維持可讀 */
.draft-confirm--waiting:disabled {
  opacity: 0.8;
  color: var(--c-ink);
  font-weight: 700;
}


/* 動作等待轉圈（與席位「思考中」同款：淡藍、順時針）：置於按鈕文字右側 */
.btn-spinner {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  border: 0.16rem solid var(--c-border);
  border-top-color: var(--c-wait-spin);
  animation: seat-spin 1s linear infinite;
  vertical-align: middle;
}

/* 語意區分：disabled＝禁止（人數不足等）；btn--pending＝動作等待中（唯一允許轉圈游標的情境） */
.btn:disabled {
  cursor: not-allowed;
}

.btn--pending:disabled {
  cursor: wait;
}

/* 歷史紀錄筆數：整數格＋「無上限」切換 */
.history-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.history-input {
  width: 6rem;
  text-align: center;
}

.history-input:disabled {
  filter: brightness(0.55);
  cursor: not-allowed;
}

.history-unlimited-btn {
  flex: 0 0 auto;
  padding: 0.42rem 1rem;
}