/* 聖經搶答 PK 秀——投影優先:深色底亮字、超大題目(教室後排可讀)、高對比。零相依。 */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  background: radial-gradient(ellipse at 50% 0%, #232c52 0%, #141a33 60%, #0e1226 100%);
  color: #f4ecd2;
  display: flex; align-items: center; justify-content: center;
}
#app { width: min(97vw, 1100px); padding: 10px; }
.card {
  background: rgba(20, 24, 48, 0.88);
  border: 3px solid #c8a35a; border-radius: 20px;
  padding: 26px 30px; text-align: center;
}
h1 { margin: 2px 0 4px; font-size: clamp(28px, 5.5vw, 46px); color: #ffd873; }
.sub { color: #b9ab8c; margin: 0 0 16px; font-size: clamp(14px, 2.4vw, 19px); }
.body { font-size: clamp(16px, 2.8vw, 22px); max-width: 60ch; margin: 10px auto; line-height: 1.6; }
.verse { color: #e8cf9a; font-size: clamp(15px, 2.6vw, 20px); margin: 12px auto; }
.hint { color: #9a8f74; font-size: clamp(13px, 2vw, 16px); margin: 6px auto; max-width: 68ch; }
.err { color: #ff9a8a; font-weight: 700; }
.setup-row { margin: 12px 0; font-size: clamp(16px, 2.6vw, 20px); }
select { font-size: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid #c8a35a; background: #fffdf6; color: #3a2a14; margin-left: 8px; }
textarea { width: 100%; min-height: 100px; font-family: Consolas, monospace; font-size: 14px; border-radius: 8px; border: 1px solid #c8a35a; padding: 8px; margin: 8px 0; }
button.big {
  font-size: clamp(19px, 3.2vw, 26px); font-weight: 900;
  padding: 12px 40px; margin: 12px 8px 0;
  border: 0; border-radius: 14px; cursor: pointer;
  background: #f0b23e; color: #4a3208;
  box-shadow: 0 4px 0 #a97b1e;
}
button.big:active { transform: translateY(3px); box-shadow: none; }
/* ── 比賽舞台 ── */
.stage { text-align: center; }
.scores { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.score {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 253, 246, 0.08);
  border: 3px solid var(--c); border-radius: 14px;
  padding: 6px 16px; font-size: clamp(16px, 2.6vw, 22px); font-weight: 700;
  transition: transform 0.15s, box-shadow 0.15s;
}
.score b { font-size: clamp(24px, 4vw, 36px); color: #ffd873; min-width: 1.6em; }
.score .emoji { font-size: clamp(22px, 3.6vw, 32px); }
.score .keycap {
  font-size: 13px; background: #fffdf6; color: #3a2a14;
  border-radius: 5px; padding: 1px 7px; border-bottom: 2px solid #b9ab8c;
}
.score.buzzed { transform: scale(1.1); box-shadow: 0 0 26px var(--c); background: rgba(255, 253, 246, 0.16); }
.score.locked { opacity: 0.35; filter: grayscale(0.7); }
.score.lead .tname::after { content: ' 👑'; }
.qmeta { color: #b9ab8c; font-size: clamp(14px, 2.2vw, 18px); margin: 6px 0; }
.question {
  font-size: clamp(26px, 5vw, 48px); font-weight: 900; line-height: 1.4;
  margin: 10px auto 16px; max-width: 26ch; min-height: 2.6em;
  display: flex; align-items: center; justify-content: center;
}
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 860px; margin: 0 auto 14px; }
.opt {
  background: rgba(255, 253, 246, 0.07);
  border: 2px solid rgba(200, 163, 90, 0.5); border-radius: 12px;
  padding: 12px 16px; font-size: clamp(17px, 3vw, 26px); font-weight: 700; text-align: left;
  display: flex; align-items: center; gap: 12px;
}
.opt .optn {
  background: #c8a35a; color: #2a1e08; border-radius: 8px;
  min-width: 1.6em; text-align: center; font-size: 0.85em;
}
.opt.ans { background: rgba(90, 160, 90, 0.35); border-color: #7ac97a; box-shadow: 0 0 18px rgba(120, 220, 120, 0.4); }
.banner {
  font-size: clamp(18px, 3.2vw, 28px); font-weight: 900;
  padding: 12px; border-radius: 14px; max-width: 900px; margin: 0 auto;
}
.banner.open { background: rgba(240, 178, 62, 0.18); color: #ffd873; animation: pulse 1.1s infinite; }
.banner.buzzed { background: rgba(90, 140, 220, 0.22); color: #bcd8ff; }
.banner.judged { background: rgba(90, 160, 90, 0.18); color: #b8e8b8; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
/* ── 頒獎 ── */
.podium { max-width: 560px; margin: 8px auto; }
.podium-row {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(20px, 3.6vw, 30px); font-weight: 800;
  padding: 8px 18px; border-radius: 12px; margin: 6px 0;
  background: rgba(255, 253, 246, 0.06);
}
.podium-row.rank1 { background: rgba(240, 178, 62, 0.22); font-size: clamp(24px, 4.4vw, 38px); }
.podium-row b { margin-left: auto; color: #ffd873; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }