/**
 * 官網賽事頁共用樣式（/live 與 /bracket）
 *
 * 只放兩頁都會用到的東西：頁面外殼、賽事卡片、分頁按鈕、賽程表。
 * 各頁專屬的樣式（例如 /live 的 Twitch 播放器與比分看板）留在該頁自己的 <style>。
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

body {
  min-height: 100vh;
  background-color: #090c1a;
  background-image: url('/bg.jpg.png');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  padding: 28px 16px 48px;
  color: #fff;
  position: relative;
}
body::before { content: ''; position: fixed; inset: 0; background: rgba(6, 8, 20, 0.68); z-index: 0; }

.wrap { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }

/* ── 頁首 ── */
header { text-align: center; margin-bottom: 24px; }
.brand {
  font-size: 30px; font-weight: 900; letter-spacing: 5px; text-transform: uppercase; color: #F9CB42;
  text-shadow: 0 0 20px rgba(249, 203, 66, 0.45), 0 2px 8px rgba(0, 0, 0, 0.6);
}
.page-title { margin-top: 8px; font-size: 15px; color: #cfd2e6; letter-spacing: 1px; }
.nav-links { margin-top: 14px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.home-link {
  font-size: 13px; color: #9aa0c0; text-decoration: none;
  border-bottom: 1px solid rgba(154,160,192,.35); padding-bottom: 1px;
}
.home-link:hover { color: #F9CB42; border-color: rgba(249,203,66,.5); }

/* ── 卡片 ── */
.card {
  background: rgba(12, 14, 32, 0.62);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px; padding: 20px; margin-bottom: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
}
.status-msg { text-align: center; color: #9aa0c0; font-size: 15px; padding: 26px 8px; line-height: 1.7; }

.t-name { font-size: 19px; font-weight: 800; color: #fff; }
.t-meta { margin-top: 5px; font-size: 13px; color: #9aa0c0; }
.t-stage { margin-top: 8px; font-size: 12px; color: #F9CB42; letter-spacing: .5px; }
.live-badge {
  display: inline-block; margin-bottom: 10px;
  background: #E24B4A; color: #fff; font-size: 11px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .5px;
}

/* ── 賽事清單（多場同時進行時的入口）── */
.list-hint { text-align: center; color: #9aa0c0; font-size: 13px; margin-bottom: 16px; }
.tcard { display: block; }
.tcard-head { display: flex; align-items: flex-start; gap: 10px; }
.tcard-head .t-name { flex: 1; min-width: 0; }
.tcard-live {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(226,75,74,.14); border: 1px solid rgba(226,75,74,.5);
  color: #f08a89; font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
}
.tcard-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #E24B4A;
  animation: tcardPulse 1.8s infinite;
}
@keyframes tcardPulse {
  0%   { box-shadow: 0 0 0 0 rgba(226, 75, 74, 0.65); }
  70%  { box-shadow: 0 0 0 7px rgba(226, 75, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 75, 74, 0); }
}
.tcard-now {
  margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
  font-size: 13px; color: #cfd2e6; line-height: 1.6;
}
.tcard-now .vs { color: #6a6f8d; margin: 0 6px; font-weight: 700; }
.tcard-now .sc { color: #F9CB42; font-weight: 800; }

/* 兩個入口按鈕：與 App 的金色主色一致，觸控高度 48px */
.tcard-actions { display: flex; gap: 10px; margin-top: 14px; }
.tcard-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 48px; padding: 0 14px; border-radius: 14px;
  font-size: 14px; font-weight: 800; text-decoration: none; letter-spacing: .3px;
  transition: transform .12s, background .15s, border-color .15s;
}
.tcard-btn:active { transform: scale(.97); }
.tcard-btn-live {
  background: rgba(226,75,74,.16); border: 1.5px solid rgba(226,75,74,.6); color: #ff9b9a;
}
.tcard-btn-live:hover { background: rgba(226,75,74,.26); border-color: rgba(226,75,74,.85); }
.tcard-btn-bracket {
  background: rgba(249,203,66,.12); border: 1.5px solid rgba(249,203,66,.55); color: #F9CB42;
}
.tcard-btn-bracket:hover { background: rgba(249,203,66,.2); border-color: rgba(249,203,66,.85); }

/* ── 分頁按鈕（階段 / 勝敗部）── */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.tab {
  appearance: none; cursor: pointer; font: inherit;
  background: rgba(255,255,255,.04); color: #9aa0c0;
  border: 1px solid rgba(255,255,255,.10); border-radius: 999px;
  /* min-height 44px：手機觸控目標下限，padding 撐不到就靠它補 */
  padding: 8px 18px; min-height: 44px; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; transition: all .15s;
}
.tab:hover { color: #fff; border-color: rgba(255,255,255,.25); }
.tab.on { background: rgba(249,203,66,.14); color: #F9CB42; border-color: rgba(249,203,66,.55); }
.tab.on-w { background: rgba(76,175,136,.14); color: #6fd3a8; border-color: rgba(76,175,136,.55); }
.tab.on-l { background: rgba(226,75,74,.14); color: #f08a89; border-color: rgba(226,75,74,.55); }

/* ── 賽程表：依輪次分欄、橫向捲動 ── */
.bscroll {
  display: flex; align-items: stretch; gap: 12px;
  overflow-x: auto; padding: 14px 0 10px; -webkit-overflow-scrolling: touch;
  /* 內容比容器窄時置中，寬時靠左並可捲動。
     ⚠️ 必須是 `safe center` 而不是 `center` —— 純 center 在內容溢出時
     會把開頭那一段推到捲動範圍之外，永遠捲不回去（第一輪直接消失）。*/
  justify-content: safe center;
}
.bfit { display: flex; align-items: stretch; gap: 12px; transform-origin: top center; }

/* 全覽：先把卡片精簡到只剩「誰 vs 誰、幾比幾」，再整體縮放。
   ⚠️ 順序很重要 —— 純靠 scale 的話 64 人要縮到 0.33，選手名字只剩 4px 完全讀不到；
   先砍掉去向／編號／種子這些輔助資訊，高度少一半，縮放就只需要 0.6 上下，字還看得見。 */
.bfit.compact .bmatch { padding: 6px 8px; border-radius: 9px; }
.bfit.compact .bdest,
.bfit.compact .bcode,
.bfit.compact .bseed,
.bfit.compact .bqual { display: none; }
.bfit.compact .brow { padding: 2px 0; }
.bfit.compact .bnick { font-size: 11px; }
.bfit.compact .bscore { font-size: 11px; min-width: 20px; padding: 1px 0; }
.bfit.compact .cell { padding: 2px 0; }
.bfit.compact .qbox { padding: 10px 8px; }
.bfit.compact .qbox-list { display: none; }
.bcol { flex: 0 0 auto; min-width: 158px; display: flex; flex-direction: column; gap: 8px; }

/* ── 樹狀版面與肘形連接線 ────────────────────────────────
 *
 * 作法：每一輪都是等高的 flex 欄，欄內每張卡片各佔一個等分格子。
 * 下一輪的格子高度剛好是上一輪的兩倍，卡片在格子內垂直置中 ——
 * 於是它自動落在兩張來源卡的正中間，連接線才對得齊。
 * 線本身用偽元素畫在欄與欄之間的溝槽（--gut）裡，不需要量座標，
 * 資料每次 onSnapshot 重繪也不會跑掉。
 */
.tree { --gut: 26px; --line: rgba(249,203,66,.28); display: flex; gap: var(--gut); flex: 0 0 auto; }
.round { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 172px; }
.round-body { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.rgroup { flex: 1; display: flex; flex-direction: column; justify-content: space-around; position: relative; }
.cell { flex: 1; display: flex; align-items: center; position: relative; padding: 4px 0; }
.cell > .bmatch { width: 100%; }

/* 每張卡片往溝槽中線拉一段水平線 */
.round.j-pair .cell::after,
.round.j-line .cell::after {
  content: ''; position: absolute; top: 50%;
  right: calc(var(--gut) * -0.5); width: calc(var(--gut) * 0.5);
  border-top: 2px solid var(--line);
}
/* 一對一：直接一路連到下一欄 */
.round.j-line .cell::after { right: calc(var(--gut) * -1); width: var(--gut); }
/* 兩場併一場：溝槽中線上的垂直段（連接同一組的兩張卡片中心）*/
.round.j-pair .rgroup::before {
  content: ''; position: absolute; right: calc(var(--gut) * -0.5);
  top: 25%; bottom: 25%; border-right: 2px solid var(--line);
}
/* 垂直段中點往下一欄的水平段 */
.round.j-pair .rgroup::after {
  content: ''; position: absolute; top: 50%;
  right: calc(var(--gut) * -1); width: calc(var(--gut) * 0.5);
  border-top: 2px solid var(--line);
}
/* 落單的那一組（該輪場次為奇數）沒有垂直段，直接一路接過去 */
.round.j-pair .rgroup-solo::before { display: none; }
.round.j-pair .rgroup-solo::after { display: none; }
.round.j-pair .rgroup-solo .cell::after { right: calc(var(--gut) * -1); width: var(--gut); }

/* 鏡射：中央晉級名單右側那一半，線往左邊延伸 */
.tree.mirror .round.j-pair .cell::after,
.tree.mirror .round.j-line .cell::after {
  right: auto; left: calc(var(--gut) * -0.5);
}
.tree.mirror .round.j-line .cell::after { left: calc(var(--gut) * -1); width: var(--gut); }
.tree.mirror .round.j-pair .rgroup::before {
  right: auto; left: calc(var(--gut) * -0.5);
  border-right: 0; border-left: 2px solid var(--line);
}
.tree.mirror .round.j-pair .rgroup::after { right: auto; left: calc(var(--gut) * -1); }
.tree.mirror .round.j-pair .rgroup-solo .cell::after { left: calc(var(--gut) * -1); width: var(--gut); }
.bcol-head { font-size: 11px; color: #F9CB42; text-align: center; letter-spacing: 1px; font-weight: 700; margin-bottom: 2px; }
.bmatch {
  position: relative; background: rgba(30,34,60,.55);
  border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 14px 10px 8px;
}
/* 進行中：紅框 + 光暈；已完成：稍微沉下去，讓未打的場次比較跳 */
.bmatch.blive {
  border-color: rgba(226,75,74,.75); background: rgba(226,75,74,.10);
  box-shadow: 0 0 14px rgba(226,75,74,.35);
}
.bmatch.bdone { background: rgba(20,23,42,.5); border-color: rgba(255,255,255,.07); }
.btag { position: absolute; top: -8px; right: 8px; background: #E24B4A; color: #fff; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 999px; }
.brow { display: flex; align-items: center; gap: 7px; padding: 5px 0; }
.brow + .brow { border-top: 1px solid rgba(255,255,255,.06); }
/* 種子號碼：對應實體賽事的選手號碼牌 */
.bseed { flex: 0 0 18px; font-size: 10px; color: #6f7594; text-align: right; font-variant-numeric: tabular-nums; }
.bnick { flex: 1; min-width: 0; font-size: 12px; color: #cfd2e6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bscore {
  flex: 0 0 auto; min-width: 24px; text-align: center;
  font-size: 12px; font-weight: 800; color: #8b90ad;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px; padding: 2px 0;
}
.bwin .bnick { color: #F9CB42; font-weight: 700; }
.bwin .bscore { color: #111; background: #F9CB42; border-color: #F9CB42; }
.bqual { margin-top: 5px; font-size: 10px; font-weight: 800; color: #6fd3a8; text-align: center; letter-spacing: .5px; }

/* 場次編號（W01 / L17）：對齊實體賽程表的叫號慣例 */
.bcode {
  position: absolute; top: -9px; left: 10px;
  background: #2a2f4a; color: #c8cee8;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
}
/* 尚未產生的選手：顯示來源（W01 勝者）而非「待定」，字級略小以示區別 */
.bnick.bpend { color: #7f85a3; font-style: italic; font-size: 11px; }
/* 卡片下緣的去向：勝者→W33　敗者→L01 */
.bdest {
  margin-top: 6px; padding-top: 5px; border-top: 1px dashed rgba(255,255,255,.07);
  font-size: 9px; color: #6f7594; text-align: center; letter-spacing: .3px;
}
.bmatch { padding-top: 12px; }

/* 中央的晉級名單 */
/* 中央晉級名單：整欄等高、內容垂直置中，名單直接攤開 —— 不要內部捲軸。
   ⚠️ 之前用 max-height + overflow-y，16 個名字就長出一條內部捲軸，
   在一張本來就很高的賽程表中間擺一個要另外滑動的小框，是最糟的組合。 */
.bcol-mid { min-width: 168px; justify-content: center; }
.qbox {
  background: rgba(76,175,136,.08); border: 1px solid rgba(76,175,136,.45);
  border-radius: 14px; padding: 16px 12px; text-align: center;
}
.qbox-count { font-size: 34px; font-weight: 900; color: #6fd3a8; line-height: 1.1; }
.qbox-total { font-size: 15px; font-weight: 700; color: #4b7f68; }
.qbox-sub { font-size: 11px; color: #8fbfa8; margin-top: 2px; letter-spacing: .5px; }
.qbox-list {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(76,175,136,.3);
  display: grid; gap: 2px 10px;
}
/* 名單超過 12 人就分兩欄，避免一直往下長高過整張賽程表 */
.qbox-list.two-col { grid-template-columns: 1fr 1fr; }
.qname {
  font-size: 11.5px; color: #cfe8dc; padding: 2px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qbox-empty { margin-top: 10px; font-size: 11px; color: #6f7594; font-style: italic; }
.empty-stage { text-align: center; color: #9aa0c0; font-size: 13px; padding: 22px 8px; }

footer { text-align: center; margin-top: 26px; font-size: 12px; color: #7a7f9c; line-height: 1.8; }

/* ── 現場大螢幕 / 投影 ── */
@media (min-width: 1024px) {
  body { padding: 32px 28px 56px; }
  .wrap { max-width: 1600px; }
  .brand { font-size: 38px; }
  .card { padding: 26px; border-radius: 26px; }
  .bcol { min-width: 186px; }
  .bnick { font-size: 14px; }
  .bscore { font-size: 15px; }
  .t-name { font-size: 24px; }
}
@media (min-width: 1800px) {
  .wrap { max-width: 1900px; }
  .bcol { min-width: 210px; }
  .bnick { font-size: 16px; }
  .t-name { font-size: 28px; }
}