/* ==========================================================================
   默書大亂鬥 — base.css（四個 screen 共用骨架）
   規格：doc/ui-screens.md §0.2／§0.3／§0.4

   - 呢度只放「結構 ＋ 中性色」；各頁嘅配色由 lobby.css（學生）／host.css（老師）覆蓋。
   - 學生 shell 用 `body[data-view]` 切兩套色（join = 暖木牌、lobby = 星空木框）。
   - ❌ 唔准喺呢度寫死某一個 screen 專用嘅顏色。
   ========================================================================== */

:root{
  --fs-base:16px;
  --btn-h:56px;
  --radius:12px;
  --radius-box:10px;
  --radius-card:20px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC",
          "PingFang TC", "Microsoft JhengHei", sans-serif;

  /* 中性預設（會被各頁 stylesheet 覆蓋） */
  --bg:#2b261f;
  --text:#f5eedc;
  --text-dark:#3a2e2b;
  --muted:#8c7b70;
  --card:#1e293b;
  --card-2:#172033;
  --line:#334155;
  --ok:#22c55e;
  --ok-dark:#15803d;
  --ok-disabled:#7a9a85;
  --err:#f87171;
  --warn:#f59e0b;
  --red:#ef4444;
  --blue:#3b82f6;
  --input-bg:#ffffff;
  --input-border:#c8b293;
  --input-focus:#e28743;
}

/* 三檔尺寸（§0.4）：手機 <640 · 電腦 640–1279 · 投影 ≥1280 */
@media (min-width:640px){
  :root{ --fs-base:17px; }
}
@media (min-width:1280px){
  :root{ --fs-base:20px; --btn-h:72px; }
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
[hidden]{ display:none !important; }

body{
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.5;
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
a{ color:inherit; }
code{ background:rgba(0,0,0,.22); padding:.08em .32em; border-radius:4px; font-size:.9em; }

/* ── 離線條（伺服器連唔到／輪詢連續失敗）───────────────────────── */
.conn-bar{
  display:none;
  position:sticky;
  top:0;
  z-index:40;
  padding:.5rem .75rem;
  padding-top:calc(.5rem + env(safe-area-inset-top));
  text-align:center;
  font-weight:700;
  font-size:.92em;
  background:#7f1d1d;
  color:#fee2e2;
  border-bottom:2px solid rgba(0,0,0,.5);
}
body.is-offline .conn-bar{ display:block; }

/* ── 版面 ─────────────────────────────────────────────────── */
.view{ flex:1; display:flex; }
.screen{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:1rem;
  gap:.75rem;
  flex-direction:column;
}
.wrap{
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:1.1rem;
  display:flex;
  flex-direction:column;
}
.wrap.wide{ max-width:760px; }
@media (min-width:1280px){
  .wrap{ max-width:680px; }
  .wrap.wide{ max-width:1180px; }
}

/* ── 文字 ─────────────────────────────────────────────────── */
h1{ font-size:2rem; margin:0 0 .25rem; text-align:center; letter-spacing:.02em; }
@media (min-width:1280px){ h1{ font-size:3.2rem; } }
h2{ font-size:1.15rem; margin:0 0 .5rem; }
h3{ font-size:1.05rem; margin:0 0 .4rem; }
p{ margin:0 0 .6rem; }
.sub{ text-align:center; color:var(--muted); margin:0 0 1.2rem; }
.muted{ color:var(--muted); }
.small{ font-size:.85em; }
.tiny{ font-size:.78em; }
.center-text{ text-align:center; }

/* ── 卡／面板 ─────────────────────────────────────────────── */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.85rem 1rem;
}
.card + .card{ margin-top:.75rem; }

/* ── 表單 ─────────────────────────────────────────────────── */
.field{ margin-bottom:1rem; }
.cap{ display:block; font-size:.85em; color:var(--muted); margin-bottom:.35rem; font-weight:700; }
input[type=text], input[type=password], select{
  width:100%;
  height:var(--btn-h);
  padding:0 .9rem;
  font:inherit;
  color:inherit;
  background:var(--input-bg);
  border:2px solid var(--input-border);
  border-radius:var(--radius-box);
}
input:focus, select:focus{ outline:none; border-color:var(--input-focus); }
select{ appearance:none; }

/* 一格一格嘅輸入（房碼／PIN）；顏色由各頁覆蓋 */
.otp{ display:flex; gap:.5rem; justify-content:center; }
.otp input{
  width:48px;
  height:56px;
  padding:0;
  text-align:center;
  font-size:1.5em;
  font-weight:800;
  color:inherit;
  background:var(--input-bg);
  border:2px solid var(--input-border);
  border-radius:var(--radius-box);
  outline:none;
}
.otp input:focus{ border-color:var(--input-focus); }
.otp.bad input{ border-color:var(--err); }
@media (min-width:1280px){ .otp input{ width:64px; height:72px; } }
.pin-row{ display:flex; align-items:center; gap:.5rem; }
.pin-row .otp{ flex:1; }
.eye{
  flex:0 0 auto;
  width:var(--btn-h);
  height:var(--btn-h);
  font-size:1.1em;
  cursor:pointer;
  color:inherit;
  background:var(--input-bg);
  border:2px solid var(--input-border);
  border-radius:var(--radius-box);
}
.eye[aria-pressed="true"]{ border-color:var(--input-focus); }

.radio-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.radio-row label{
  flex:1 1 auto;
  min-width:44%;
  display:flex;
  align-items:center;
  gap:.5rem;
  cursor:pointer;
  background:var(--card-2);
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:.6rem .8rem;
}
.radio-row input{ accent-color:var(--ok); }
.radio-row label:has(input:checked){ border-color:var(--ok); }

/* ── 按鈕 ─────────────────────────────────────────────────── */
button{ font:inherit; }
.btn{
  width:100%;
  min-height:var(--btn-h);
  font-size:1.05em;
  font-weight:800;
  border:0;
  border-radius:var(--radius);
  cursor:pointer;
}
.btn.ok{ background:linear-gradient(180deg, #37d67a, var(--ok-dark)); color:#fff; }
.btn.danger{ background:var(--red); color:#450a0a; }
.btn.ghost{ background:var(--card-2); color:inherit; border:2px solid var(--line); }
.btn:disabled{ background:#334155; color:#94a3b8; cursor:not-allowed; }
.btn.small{ width:auto; min-height:0; font-size:.8em; font-weight:700; padding:.3rem .6rem; border-radius:8px; }
.btn-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.btn-row .btn{ flex:1; }

/* ── 訊息／提示 ───────────────────────────────────────────── */
.msg{ min-height:1.5em; margin:.2rem 0 .6rem; font-size:.92em; font-weight:700; color:var(--err); text-align:center; }
.msg.ok{ color:var(--ok); }
.msg strong{ color:inherit; }
.hint{ margin:.4rem 0 0; font-size:.8em; color:var(--muted); text-align:center; }

/* ── 全屏提示（被踢／房關咗）───────────────────────────────── */
.modal{
  position:fixed;
  inset:0;
  z-index:9;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  background:rgba(2,6,23,.78);
}
.modal.show{ display:flex; }
.modal .panel{
  width:min(420px,100%);
  background:var(--card);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1rem;
}
.modal .panel h3{ margin-top:0; }
.modal .btn-row{ margin-top:.9rem; }

/* ── toast ────────────────────────────────────────────────── */
.toast-host{
  position:fixed;
  top:calc(.75rem + env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  pointer-events:none;
}
.toast{
  padding:.5rem .9rem;
  border-radius:999px;
  font-size:.9em;
  font-weight:700;
  background:rgba(15,23,42,.92);
  color:#f8fafc;
  border:2px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.toast.ok{ background:#14532d; border-color:#22c55e; color:#dcfce7; }

/* ── 老師台：房碼／QR ─────────────────────────────────────── */
.codebox{ text-align:center; }
.bigcode{
  margin:0;
  font-size:clamp(56px, 11vw, 150px);
  font-weight:900;
  letter-spacing:.08em;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.qr{ width:min(320px,78vw); aspect-ratio:1; margin:.6rem auto; }
.qr svg{ width:100%; height:100%; display:block; border-radius:10px; }
.linkbox{ display:flex; gap:.5rem; align-items:center; }
.linkbox input{ flex:1; font-size:.85em; }