/* 七亞天堂・王武抽獎器
   單一深色主題（直播舞台用，OBS 擷取；不做淺色模式，整頁不翻轉）
   色票對齊現有 LINE flex 卡片：#2f0a11 暗紅底 / #f4e2b0 金字 / #c8983a 金銅 */

:root {
  --bg: #120609;
  --panel: #2f0a11;
  --panel-soft: #240810;
  --line: rgba(200, 152, 58, 0.28);
  --gold: #f4e2b0;
  --bronze: #c8983a;
  --muted: #a99b86;
  --ok: #6fae87;
  --warn: #c9704f;
  --radius: 14px; /* 單一圓角尺度：面板 14px、互動元件 999px（pill），不混用 */
  --sans: "PingFang TC", "Noto Sans TC", "Hiragino Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* 全高單屏：整頁不出捲軸，內容用 flex 分配，名單多的時候只有名單自己捲 */
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(200, 152, 58, 0.16), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(47, 10, 17, 0.9), transparent 65%),
    var(--bg);
  background-repeat: no-repeat;
  color: var(--gold);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1080px;
  height: 100dvh;
  margin: 0 auto;
  padding: clamp(14px, 3vh, 34px) 20px clamp(12px, 2vh, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 18px);
}

.head { flex: 0 0 auto; }

.limited {
  display: block;
  white-space: nowrap;
  margin: 6px 0 0;
  color: var(--bronze);
  font-size: clamp(11px, 1.7vh, 14px);
  letter-spacing: 0.16em;
}

.eyebrow {
  font-size: clamp(10px, 1.4vh, 12px);
  letter-spacing: 0.28em;
  color: var(--bronze);
  text-transform: uppercase;
}

h1 {
  margin: 4px 0 0;
  white-space: nowrap;
  font-size: clamp(21px, 3.6vh, 38px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.sub { margin: 5px 0 0; color: var(--muted); font-size: clamp(12px, 1.8vh, 15px); line-height: 1.6; }

.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); margin: 28px 0; }

/* 頂部雙欄：左邊標題、右邊時程，桌機手機都一樣。
   這樣頂部高度砍半，空間留給滾筒 */
.topbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(10px, 2vw, 24px);
  align-items: center;
}

/* ---------- 時程大字提示 ---------- */

.schedule {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(4px, 0.8vh, 8px);
  margin-top: 0;
  padding: clamp(6px, 1.1vh, 10px) clamp(12px, 2vw, 18px);
  border: 1px solid rgba(200, 152, 58, 0.55);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(58, 17, 25, 0.9), rgba(30, 9, 15, 0.9));
  box-shadow: inset 0 1px 0 rgba(244, 226, 176, 0.16);
}

.sched-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.sched-k { font-size: clamp(10px, 1.3vh, 12px); letter-spacing: 0.2em; color: var(--bronze); }

.sched-v {
  font-family: var(--mono);
  white-space: nowrap;
  font-size: clamp(13px, 2vh, 23px);
  white-space: nowrap;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.sched-item.hot .sched-v { text-shadow: 0 0 26px rgba(244, 226, 176, 0.45); }

.sched-sep { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* 截止之後，截止那一塊淡掉，視線移到開獎 */
.schedule.closed .sched-item:not(.hot) { opacity: 0.42; }

@media (max-width: 430px) {
  .sched-k { letter-spacing: 0.06em; font-size: 10px; }
  .topbar { gap: 8px; }
  /* 手機左欄空間有限：副標拿掉，「泰姬瑪哈伺服器限定」已經講完同一件事 */
  .sub { display: none; }
  .schedule { padding: 8px 10px; }
}

/* ---------- 舞台顯示窗 ---------- */

.stage {
  /* 全高模式下舞台吃掉剩餘空間，滾筒才會跟著螢幕大小長 */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  position: relative;
  margin-top: 0;
  padding: clamp(6px, 1.2vh, 16px) 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
  box-shadow: inset 0 1px 0 rgba(244, 226, 176, 0.14), 0 24px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
  overflow: hidden;
}

.stage-label { font-size: 13px; letter-spacing: 0.2em; color: var(--bronze); }

/* 機台外殼：參考市面線上抽獎機的結構（標題面板／人數牌／滾筒視窗），配色換成七亞暗金 */
.cabinet {
  width: 100%;
  max-width: 620px;
  /* 高度依內容，由舞台的 align-items:center 垂直置中：
     滾筒有上限，硬撐滿會在下方留一塊單邊空白 */
  max-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 1.4vh, 14px) 16px clamp(6px, 1vh, 10px);
  border-radius: 20px;
  background: linear-gradient(180deg, #3a1119, #24080f);
  border: 1px solid rgba(200, 152, 58, 0.5);
  box-shadow:
    inset 0 2px 0 rgba(244, 226, 176, 0.22),
    inset 0 -10px 24px rgba(0, 0, 0, 0.5),
    0 18px 40px rgba(0, 0, 0, 0.45);
}

.cab-title {
  flex: 0 0 auto;
  align-self: center;
  display: inline-block;
  padding: clamp(5px, 1vh, 8px) 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, #150609, #2a0a12);
  border: 1px solid rgba(200, 152, 58, 0.55);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.75);
  color: var(--gold);
  font-size: clamp(14px, 2vh, 18px);
  font-weight: 700;
  letter-spacing: 0.16em;
}

.cab-count {
  flex: 0 0 auto;
  margin: clamp(6px, 1.2vh, 12px) auto 0;
  width: fit-content;
  padding: 5px 18px;
  border-radius: 999px;
  border: 1px solid rgba(200, 152, 58, 0.4);
  background: rgba(20, 7, 11, 0.6);
  color: var(--bronze);
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* 滾筒視窗：柱面靠上下暗角＋中央高光做出來。
   高度不寫死，吃掉機台內剩下的空間，螢幕越高滾筒越大 */
.reel-window {
  flex: 1 1 auto;
  min-height: 150px;
  max-height: 260px;
  width: 100%;
  touch-action: pan-y;
  position: relative;
  margin: clamp(8px, 1.6vh, 16px) auto 0;
  max-width: 520px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #0d0407, #1d070d 50%, #0d0407);
  border: 1px solid rgba(200, 152, 58, 0.45);
  box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.8);
}

.reel { will-change: transform; }

.reel-item {
  height: var(--item-h, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 26px;
  color: rgba(244, 226, 176, 0.42);
  white-space: nowrap;
}

.reel-item .no { font-size: 15px; color: rgba(200, 152, 58, 0.55); }

.reel-item.mid { color: var(--gold); font-size: 32px; font-weight: 700; }


.reel-item.mid .no { color: var(--bronze); }

/* 中央選取框：對齊視窗第二行 */
.reel-marker {
  position: absolute;
  left: 8px; right: 8px;
  top: calc(50% - var(--item-h, 64px) / 2);
  height: var(--item-h, 64px);
  border-top: 1px solid rgba(200, 152, 58, 0.55);
  border-bottom: 1px solid rgba(200, 152, 58, 0.55);
  background: linear-gradient(90deg, transparent, rgba(200, 152, 58, 0.1), transparent);
  pointer-events: none;
}

/* 玻璃：上下暗角做出圓柱感，加一道斜向反光 */
.reel-glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 3, 5, 0.92) 0%, rgba(8, 3, 5, 0.1) 26%,
                            rgba(8, 3, 5, 0.1) 74%, rgba(8, 3, 5, 0.92) 100%),
    linear-gradient(104deg, transparent 42%, rgba(255, 245, 220, 0.07) 50%, transparent 58%);
}

.stage.spinning .reel-window { border-color: rgba(244, 226, 176, 0.8); }

.stage.spinning .reel-item { filter: blur(0.6px); }

/* 名單還沒有人時的佔位：字小一點、不搶戲，也不顯示編號 */
.stage.idle-empty .reel-item { font-size: 17px; color: rgba(169, 155, 134, 0.5); }

.stage.idle-empty .reel-item.mid { font-size: 19px; font-weight: 600; color: rgba(200, 152, 58, 0.85); }

.stage.idle-empty .reel-item .no { display: none; }

.stage.reveal .reel-marker {
  border-color: var(--gold);
  background: linear-gradient(90deg, transparent, rgba(244, 226, 176, 0.22), transparent);
  box-shadow: 0 0 26px rgba(244, 226, 176, 0.35);
}

@media (prefers-reduced-motion: reduce) { .reel { transition: none !important; } }

.h2 { font-size: 17px; letter-spacing: 0.1em; margin: 0 0 10px; }

.display {
  flex: 0 0 auto;
  margin: clamp(4px, 1vh, 10px) 0 2px;
  min-height: 1.2em;
  font-family: var(--mono);
  font-size: clamp(26px, 5.4vh, 52px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  word-break: break-all;
}

.display.rolling { color: var(--bronze); opacity: 0.9; }

.display.settled { color: var(--gold); text-shadow: 0 0 34px rgba(244, 226, 176, 0.4); }

.display.placeholder { color: rgba(169, 155, 134, 0.62); font-size: clamp(20px, 4vw, 32px); }

.stage-foot { flex: 0 0 auto; color: var(--muted); font-size: clamp(11px, 1.5vh, 14px); min-height: 1.3em; }

/* 倒數是開獎前的舞台主角，用金色，不套 placeholder 的灰。
   跟搖獎機同框，字級收斂一點才不會兩個主角打架 */
.display.countdown { color: var(--gold); font-size: clamp(19px, 3.2vh, 30px); letter-spacing: 0.06em; }

/* 中獎揭曉：一次性光暈，不是無限迴圈 */
@media (prefers-reduced-motion: no-preference) {
  .stage.reveal::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 50% at 50% 50%, rgba(244, 226, 176, 0.3), transparent 70%);
    animation: flare 1.6s ease-out forwards;
  }
  @keyframes flare {
    0% { opacity: 0; transform: scale(0.9); }
    22% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.15); }
  }
}

/* ---------- 資訊列 ---------- */

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 26px; }

.fact { background: var(--panel-soft); padding: 16px 18px; }

.fact dt { font-size: 12px; letter-spacing: 0.16em; color: var(--bronze); margin: 0 0 6px; }

.fact dd { margin: 0; font-family: var(--mono); font-size: 15px; color: var(--gold); word-break: break-all; }

@media (max-width: 720px) { .facts { grid-template-columns: 1fr; } }

/* 全高單屏：整頁不捲，名單自己捲，所以手機也要保留這個捲動區 */

/* 名單常駐展開：公信力靠的就是「隨時看得到全名單」，不該藏在開關後面 */
.pool-box {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(36, 8, 16, 0.6);
}

.pool-head { flex: 0 0 auto; margin: 0; padding: clamp(8px, 1.4vh, 14px) 18px 6px; font-size: 14px; font-weight: 600; letter-spacing: 0.1em; color: var(--bronze); }

.pool-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 16px;
  padding: 4px 18px 18px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pool-list li { list-style: none; }

.pool-list li.hit { color: var(--gold); font-weight: 700; }

.pool-list { margin: 0; }

.note { color: var(--muted); font-size: 13px; line-height: 1.8; }

.mono { font-family: var(--mono); word-break: break-all; }

/* ---------- 元件 ---------- */

.btn {
  appearance: none;
  border: 1px solid var(--bronze);
  border-radius: 999px;
  background: linear-gradient(180deg, #d8ab4c, #b3821f);
  color: #22120a;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 13px 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), filter 0.16s;
}

.btn:hover { filter: brightness(1.07); }

.btn:active { transform: translateY(1px) scale(0.99); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); }

.btn.ghost { background: transparent; color: var(--gold); border-color: var(--line); }

.btn.danger { background: transparent; color: var(--warn); border-color: rgba(201, 112, 79, 0.6); }

.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--muted); margin-right: 7px; vertical-align: middle; }

.status-dot.live { background: var(--ok); }

.status-dot.down { background: var(--warn); }

.banner { margin-top: 18px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid rgba(201, 112, 79, 0.5); background: rgba(201, 112, 79, 0.12); color: #f0c3ae; font-size: 14px; }

.banner[hidden] { display: none; }

/* 骨架載入：形狀對齊最終版面，不用轉圈圈 */
.skeleton { display: inline-block; width: min(60vw, 420px); height: 0.9em; border-radius: 6px; background: linear-gradient(90deg, rgba(244, 226, 176, 0.08), rgba(244, 226, 176, 0.2), rgba(244, 226, 176, 0.08)); background-size: 200% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: shimmer 1.4s linear infinite; }
  @keyframes shimmer { to { background-position: -200% 0; } }
}