:root {
  --ink: #1c1917;
  --gold: #c9a24a;
  --gold-soft: #f4e9d0;
}

html {
  height: 100%;
  margin: 0;
  background: var(--ink);
}

body {
  min-height: 100vh;
  min-height: 100dvh; /* 行動裝置動態網址列比較準確的視窗高度 */
  margin: 0;
  /* 與後台登入頁（led-win 的 login.module.css .backdrop）同一套背景效果：
     金色圓點網格 + 數個金色光暈 + 深色漸層底，兩邊改動時請保持同步 */
  background:
    radial-gradient(rgba(201, 162, 74, 0.16) 1px, transparent 1.6px) 0 0 / 42px 42px,
    radial-gradient(circle at 50% 8%, rgba(201, 162, 74, 0.3) 0, transparent 32%),
    radial-gradient(circle at 15% 32%, rgba(201, 162, 74, 0.18) 0, transparent 38%),
    radial-gradient(circle at 85% 22%, rgba(201, 162, 74, 0.14) 0, transparent 34%),
    radial-gradient(circle at 50% 92%, rgba(201, 162, 74, 0.12) 0, transparent 42%),
    linear-gradient(160deg, #14110f 0%, #262019 55%, #1c1712 100%);
  font-family: "Noto Sans TC", system-ui, -apple-system, sans-serif;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.card {
  width: 100%;
  max-width: 420px;
  border: none;
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  background: #fff;
}

.card-brand {
  text-align: center;
  margin-bottom: 1.25rem;
}

.brand-icon {
  font-size: 2.5rem;
  display: block;
}

.card-brand h1 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.25rem;
}

/* 區域/群組名稱是香客確認「掃對地方了」的關鍵資訊，放大加重、用金棕色突顯 */
.group-name {
  font-size: 1.7rem;
  font-weight: 700;
  color: #8a6d2f;
  min-height: 1.5em;
}

.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 600;
}

.btn-gold:hover,
.btn-gold:focus {
  background: #b6913e;
  border-color: #b6913e;
  color: var(--ink);
}

footer a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

footer a:hover {
  color: var(--gold);
}

/* ── 尋燈結果卡片 ─────────────────────────────────────── */

.result-card {
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 0.75rem;
  padding: 1.25rem 1rem;
  margin-top: 1rem;
  text-align: center;
}

/* 錯誤情境換紅系配色，其他排版不變 */
.result-card.is-error {
  background: #f8ecec;
  border-color: #c96a5a;
}

.result-icon {
  font-size: 2.25rem;
  line-height: 1.2;
}

.result-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0.25rem 0 0.5rem;
}

/* 「XXX 您好！」問候行：置中粗體、獨立一行 */
.result-greeting {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.result-lead {
  margin: 0 0 0.25rem;
  color: var(--ink);
}

/* 燈位位置：整張卡的視覺重點，香客靠這行去現場找燈 */
.result-location {
  font-size: 1.45rem;
  font-weight: 700;
  color: #8a6d2f;
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.result-location .location-serial {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #a08a5a;
}

.result-status {
  margin: 0;
  color: var(--ink);
}

/* 點亮中的呼吸光暈 */
.result-status.is-lighting {
  color: #8a6d2f;
  font-weight: 600;
  animation: glow 1.6s ease-in-out infinite;
}

@keyframes glow {
  0%,
  100% {
    opacity: 1;
    text-shadow: 0 0 6px rgba(201, 162, 74, 0.55);
  }
  50% {
    opacity: 0.65;
    text-shadow: 0 0 14px rgba(201, 162, 74, 0.9);
  }
}

/* 多燈選擇按鈕：跟 btn-gold 同色系，兩行排版（群組名 + 排/號） */
.choice-btn {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.65rem 1rem;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 0.5rem;
  color: var(--ink);
  font-weight: 600;
  text-align: center;
}

.choice-btn:hover,
.choice-btn:focus {
  background: #b6913e;
  border-color: #b6913e;
  color: var(--ink);
}

.choice-btn .choice-sub {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.85;
}