/* ==========================================================================
   默書大亂鬥 — host.css（老師台：③ 登入／開台 ＋ ④ 開房／大廳控制台）
   規格：doc/ui-screens.md M18-T3（③）、M18-T4（④）、§0.5 決策 #5（老師機要投影前睇得清）

   深色高對比系 ＋ 大字；投影（≥1280px）再放大一級。
   ⚠️ ③④ 嘅配色未經用戶 confirm（見 §0.7）—— 用戶交圖之後只改呢個檔嘅 token。
   ========================================================================== */

body{
  --bg:#0f172a;
  --card:#1e293b;
  --card-2:#172033;
  --line:#334155;
  --text:#f8fafc;
  --muted:#94a3b8;
  --ok:#22c55e;
  --ok-dark:#15803d;
  --err:#f87171;
  --warn:#f59e0b;
  --red:#ef4444;
  --blue:#3b82f6;
  --input-bg:#1e293b;
  --input-border:#334155;
  --input-focus:#22c55e;
}

.wrap.center{ justify-content:center; }

h1{ letter-spacing:.02em; }

/* ③ 底部細字連結 */
.foot{
  margin-top:1.1rem;
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  font-size:.82em;
}
.foot a{ color:#7dd3fc; }

/* ── 房碼 ＋ QR ───────────────────────────────────────────── */
.codebox .cap{ margin-bottom:.2rem; }
.qr-error{
  width:min(320px,78vw);
  margin:.6rem auto;
  padding:1rem;
  border:2px dashed var(--line);
  border-radius:12px;
  font-size:.85em;
  color:var(--muted);
  text-align:center;
}
.copy-msg{ margin:.35rem 0 0; font-size:.8em; color:#86efac; min-height:1.2em; }

/* ── 統計 ─────────────────────────────────────────────────── */
.stats{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .9rem;
  font-size:.95em;
  color:var(--muted);
  font-weight:600;
}
.stats b{ color:var(--text); font-size:1.1em; }
@media (min-width:1280px){ .stats{ font-size:1.15em; } }

/* ── 兩隊名單 ─────────────────────────────────────────────── */
.teams{ display:grid; gap:.75rem; margin-top:.75rem; }
@media (min-width:900px){ .teams{ grid-template-columns:1fr 1fr; align-items:start; } }

.team{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.team.red{ border-top:4px solid var(--red); }
.team.blue{ border-top:4px solid var(--blue); }
.team-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.5rem .75rem;
  font-weight:800;
  background:var(--card-2);
}
.members{
  padding:.35rem;
  display:grid;
  gap:.15rem;
  max-height:44vh;
  overflow:auto;
}
@media (min-width:900px){ .members{ max-height:52vh; } }
@media (min-width:1280px){ .members{ max-height:56vh; } }

.memrow{
  display:flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem .5rem;
  border-radius:8px;
  font-size:.92em;
  font-weight:600;
}
.memrow.even{ background:#182238; }
.memrow.ready{ background:#0f2a1b; }
.memrow.off .nm{ color:#64748b; text-decoration:line-through; }
.memrow .seat{ flex:0 0 2.4em; color:var(--muted); font-variant-numeric:tabular-nums; }
.memrow .nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.memrow .cls{ font-size:.78em; color:var(--muted); }
.memrow .acts{ flex:0 0 auto; display:flex; gap:.25rem; }
.memrow.empty{ justify-content:center; color:var(--muted); font-weight:600; }
@media (min-width:1280px){ .memrow{ font-size:1.1em; padding:.45rem .6rem; } }

.badge{ font-size:.72em; padding:.05rem .4rem; border-radius:999px; background:#14532d; color:#bbf7d0; }
.badge.wait{ background:#3f3f46; color:#e4e4e7; }
.badge.off{ background:#334155; color:#cbd5e1; }

/* ── 底部掣（Start／關房）────────────────────────────────── */
.console-actions{ margin-top:.75rem; }
.console-actions .btn.danger{ margin-top:.8rem; }

/* ── 題庫：設題介面／管理頁（M19-T1／T2）────────────────── */
.view-head{ margin-bottom:.9rem; }
.view-head .btn{ margin-bottom:.5rem; }
.view-head h1{ margin-bottom:.1rem; }
.view-head .sub{ margin-bottom:0; }

textarea{
  width:100%;
  padding:.6rem .8rem;
  font:inherit;
  line-height:1.5;
  color:var(--text);
  background:var(--input-bg);
  border:2px solid var(--input-border);
  border-radius:var(--radius-box);
  resize:vertical;
}
textarea:focus{ outline:none; border-color:var(--input-focus); }

.field-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.field-actions{ display:flex; gap:.35rem; }
.field-actions .btn{ width:auto; min-height:0; }

.preview-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:.5rem;
}
.preview-bar .btn-row{ flex:0 0 auto; }
.preview-bar .btn{ width:auto; min-height:0; }

.qlist{ display:grid; gap:.25rem; max-height:46vh; overflow:auto; }
@media (min-width:1280px){ .qlist{ max-height:52vh; } }
.qrow{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .5rem;
  border-radius:8px;
  font-size:.92em;
  min-height:44px;              /* 手機觸控目標（M19-T1 Q-M19-14）*/
}
.qrow:nth-child(even){ background:#182238; }
.qrow input[type=checkbox]{ flex:0 0 auto; width:22px; height:22px; accent-color:var(--ok); }
.qrow .qt{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.qrow .qc{ flex:0 0 auto; font-size:.8em; color:var(--muted); font-variant-numeric:tabular-nums; }
.qrow .qd{ flex:0 0 auto; font-size:.8em; color:var(--warn); letter-spacing:.06em; }
.qrow.off .qt{ color:#64748b; text-decoration:line-through; }
.qrow.dup .qt{ color:#fbbf24; }
.qrow[aria-current="true"]{ outline:2px solid var(--ok); outline-offset:-2px; }
.qrow .btn{ flex:0 0 auto; }

.sticky-foot{
  position:sticky;
  bottom:0;
  z-index:5;
  margin-top:.75rem;
  padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.94) 45%);
}
.sticky-foot .msg{ margin:0 0 .35rem; }

.setlist{ display:grid; gap:.25rem; }
.setrow{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .5rem;
  border-radius:8px;
  font-size:.92em;
  font-weight:600;
  min-height:44px;
}
.setrow:nth-child(even){ background:#182238; }
.setrow.empty{ justify-content:center; color:var(--muted); padding:1rem; text-align:center; }
.setrow .sname{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.setrow .smeta{ flex:0 0 auto; font-size:.8em; color:var(--muted); font-weight:500; }
.setrow .acts{ flex:0 0 auto; display:flex; gap:.25rem; }
.setrow .rename-input{ flex:1 1 auto; height:auto; min-height:38px; font-size:.95em; }

/* 編輯模式提示（題庫正被房間用緊 —— M19-T3 Q-M19-25）*/
.warn-note{
  margin:.5rem 0 0;
  padding:.5rem .7rem;
  font-size:.85em;
  font-weight:600;
  color:#fde68a;
  background:#422006;
  border:2px solid var(--warn);
  border-radius:8px;
}