/* ── 設計權杖 ───────────────────────────────────────────
   顏色一律走 token，暗色模式只覆寫 token 值。
   調色盤取自台灣彩券官網（taiwanlottery.com）：
     主色 #007979 深綠松、亮色 #1cd6c3、輔色 #ff8550 橘、
     強調 #efdd00 黃、淺底 #e5f2f2 / #fff9db、
     文字 #2e2e2e / #797979、框線 #dadada、頁底 #f5f5f5。

   有兩個地方刻意不照抄：官網把 #42dd93、#ff8550 當色塊底色用，
   我們拿來當文字色時對比度不足（白底約 2.6:1 與 3.0:1），
   所以文字用同色系加深的版本，色塊底才用原色。 */
:root {
  color-scheme: light;
  --surface-0:      #f5f5f5;   /* 頁面底 */
  --surface-1:      #ffffff;   /* 卡片、圖表底 */
  --surface-2:      #e5f2f2;   /* 輸入框、次要區塊（官網的淺綠松底） */
  --border:         #dadada;
  --border-strong:  #aaaaaa;
  --text-primary:   #2e2e2e;
  --text-secondary: #5a5a5a;
  --text-muted:     #6e6e6e;   /* 官網是 #797979（4.35:1），小字略低於 AA，收深一階 */
  --series-1:       #007979;   /* 圖表主色＝官網主色 */
  --series-1-soft:  #cfe6e6;
  --on-series:      #ffffff;   /* 填在主色色塊上的文字（白字對 #007979 是 5.24:1） */

  /* 彩種色：index.php 依 Game::$color 覆寫這四個，整頁就換一個顏色。
     這裡的預設值是台彩主色，任何沒帶彩種的頁面用得到。 */
  --game-fill:      #007979;   /* 球、按鈕、選取狀態的填色（上面放 --on-fill） */
  --on-fill:        #ffffff;
  --game-tint:      #e8f2f2;   /* 頁首與彩種列的淡底 */

  /* 型態分布四個區塊的類別色。固定順序、不循環使用。
     用 dataviz 驗證器跑過 all-pairs：CVD ΔE 9.1、一般視覺 ΔE 16.6（皆過標準）。 */
  --cat-1:          #009688;
  --cat-2:          #2a78d6;
  --cat-3:          #d63b3a;
  --cat-4:          #c98500;

  /* 冷熱是「偏離期望值的方向」，屬於發散型：暖 / 冷兩極 + 中性灰。
     只用在文字標籤上，長條本身仍是單一序列色（用顏色再編碼一次長度是反模式）。 */
  --heat-hot:       #c2410c;
  --heat-cold:      #2a78d6;
  --heat-flat:      #6e6e6e;
  --accent:         #00625f;
  --good:           #0a7d5a;   /* 官網 #42dd93 的深色版，白底可讀 */
  --warning:        #c2410c;   /* 官網 #ff8550 的深色版，白底可讀 */
  --special:        #ffc24d;   /* 第二區／特別號的球：直接用官網的琥珀色塊 */
  --critical:       #d92b2b;
  --grid:           #e8e8e8;
  --shadow:         0 1px 2px rgba(46,46,46,.06), 0 8px 24px rgba(46,46,46,.05);
  --radius:         12px;
}

/* 暗色：底色帶一點綠松，跟主色同一個色相；
   #42dd93 / #ff8550 / #f56c6c 在深底上對比夠，直接用官網原色。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0:      #0f1414;
    --surface-1:      #18201f;
    --surface-2:      #222b2a;
    --border:         #33403e;
    --border-strong:  #4c5a58;
    --text-primary:   #ffffff;
    --text-secondary: #c9d4d2;
    --text-muted:     #93a09e;
    --series-1:       #2fbfae;
    --series-1-soft:  #124b46;
    /* 暗色的主色是亮綠松，白字只有 2.29:1，色塊上的字改用深色（10.5:1） */
    --on-series:      #062421;
    --game-fill:      #2fbfae;
    --on-fill:        #062421;
    --game-tint:      #172a28;
    --cat-1:          #009688;
    --cat-2:          #3780d8;
    --cat-3:          #d84746;
    --cat-4:          #c98500;
    --heat-hot:       #ff8550;
    --heat-cold:      #3780d8;
    --heat-flat:      #93a09e;
    --accent:         #4fd6c4;
    --good:           #42dd93;
    --warning:        #ff8550;
    --special:        #ffc24d;
    --critical:       #f56c6c;
    --grid:           #2a3634;
    --shadow:         0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0:      #0f1414;
  --surface-1:      #18201f;
  --surface-2:      #222b2a;
  --border:         #33403e;
  --border-strong:  #4c5a58;
  --text-primary:   #ffffff;
  --text-secondary: #c9d4d2;
  --text-muted:     #93a09e;
  --series-1:       #2fbfae;
  --series-1-soft:  #124b46;
  --on-series:      #062421;
  --game-fill:    #2fbfae;
  --on-fill:    #062421;
  --game-tint:    #172a28;
  --cat-1:      #009688;
  --cat-2:      #3780d8;
  --cat-3:      #d84746;
  --cat-4:      #c98500;
  --heat-hot:     #ff8550;
  --heat-cold:    #3780d8;
  --heat-flat:    #93a09e;
  --accent:         #4fd6c4;
  --good:           #42dd93;
  --warning:        #ff8550;
  --special:        #ffc24d;
  --critical:       #f56c6c;
  --grid:           #2a3634;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", -apple-system,
               BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ── 頁首 ─────────────────────────────────────────── */
.site-header {
  background: var(--game-tint);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border-radius: 14px;
  background: var(--game-fill); color: var(--on-fill);
  font-weight: 700; font-size: 19px; letter-spacing: .5px;
}
.brand-icon { display: block; width: 28px; height: 28px; }
.brand h1 { margin: 0; font-size: 19px; letter-spacing: .2px; }
.brand-sub { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }

/* 頁首右欄：線上人數在上，最新一期在下 */
.header-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.online {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 3px 11px 3px 9px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1);
  font-size: 13px; color: var(--text-secondary);
  white-space: nowrap;
}
.online strong {
  display: inline-block;            /* 讓 is-updated 的 scale 動得起來 */
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.online-dot {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%; background: var(--good);
  /* 呼吸一下，讓人知道這是即時的數字而不是靜態文案 */
  animation: online-pulse 2.6s ease-out infinite;
}
@keyframes online-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
  70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
/* 數字跳動時輕輕帶一下，眼睛才跟得上 */
.online.is-updated strong { animation: online-bump .45s ease-out; }
@keyframes online-bump {
  0%   { transform: scale(1);    color: var(--good); }
  40%  { transform: scale(1.18); color: var(--good); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .online-dot { animation: none; }
  .online.is-updated strong { animation: none; }
}

.latest { text-align: right; }
.latest-meta { font-size: 13px; color: var(--text-secondary); }
.latest-meta strong { color: var(--text-primary); font-size: 15px; }
.latest-meta span { margin-left: 8px; color: var(--text-muted); }
.balls { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }

.ball {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--game-fill); color: var(--on-fill);
  font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.ball-sm { width: 30px; height: 30px; font-size: 13px; }
.ball-outline {
  background: var(--surface-2); color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
/* 第二區／特別號：跟第一區換個顏色，一眼看得出是另一次抽出 */
.ball-special { background: var(--special); color: #3d2c00; }
.ball-sep {
  align-self: center;
  color: var(--text-muted); font-size: 13px;
}

/* 數字型彩種（三星彩、四星彩）：位數有順序、可重複，
   畫成圓角方塊比圓球更像大家熟悉的「開獎號」排版。 */
/* 容器上有 .balls-digit（PHP 輸出）或球本身有 .ball-digit（JS 輸出），兩種都要吃到 */
.ball-digit,
.balls-digit .ball { border-radius: 9px; }
.balls-digit { gap: 4px; }

/* ── 彩種切換 ─────────────────────────────────────── */
.games {
  background: var(--game-tint);
  border-bottom: 1px solid var(--border);
}
.games-inner { display: flex; gap: 8px; overflow-x: auto; }
.game-link {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.game-link:hover { color: var(--text-primary); background: var(--surface-1); }
.game-link.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--series-1);
  background: var(--surface-1);
}
/* 圖示：未選取時是低調的色塊，選到的彩種整塊填主色，一眼看得出在哪一頁 */
.game-icon-wrap {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.game-link:hover .game-icon-wrap { color: var(--series-1); border-color: var(--series-1); }
.game-link.is-active .game-icon-wrap {
  background: var(--game-fill); border-color: var(--game-fill); color: var(--on-fill);
}
.game-icon { display: block; width: 21px; height: 21px; }
.game-text { display: block; }
.game-name { display: block; font-size: 15px; font-weight: 600; }
.game-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }

/* ── 分頁籤 ───────────────────────────────────────── */
.tabs { display: flex; gap: 6px; margin: 22px auto 0; }
.tab {
  appearance: none; cursor: pointer;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit; font-size: 14px;
}
.tab:hover { color: var(--text-primary); background: var(--surface-2); }
.tab.is-active {
  background: var(--surface-1);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--series-1);
}

.panel { display: none; padding: 20px 0 48px; }
.panel.is-active { display: block; }

/* ── 卡片 ─────────────────────────────────────────── */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.card-head { margin-bottom: 16px; }
.card-head.row {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: flex-end; justify-content: space-between;
}
.card-head h2 { margin: 0; font-size: 16px; letter-spacing: .2px; }
.card-head .muted { margin: 4px 0 0; }
.muted { color: var(--text-muted); font-size: 13px; }

.alert {
  margin: 16px 0; padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--critical);
  color: var(--critical);
  background: var(--surface-1);
}

/* ── 表單 ─────────────────────────────────────────── */
.filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 16px;
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field-inline { flex-direction: row; align-items: center; gap: 10px; }
.field label { font-size: 13px; color: var(--text-secondary); }
.field label .muted { font-size: 12px; margin-left: 4px; }

/* 建議表單的稱呼／信箱也走這一套，不然會是瀏覽器預設外觀，
   跟旁邊的 textarea 對不起來 */
input[type="date"], input[type="number"], input[type="text"], input[type="email"], select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit; font-size: 14px;
}
.field-inline select { width: auto; min-width: 150px; }
input:focus-visible, select:focus-visible, .btn:focus-visible, .tab:focus-visible, .num:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}

.field-actions {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 10px;
  padding-top: 4px;
}
.btn {
  appearance: none; cursor: pointer;
  padding: 9px 20px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit; font-size: 14px;
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn:hover { background: var(--surface-2); }
.btn-primary {
  background: var(--game-fill); border-color: var(--game-fill); color: var(--on-fill);
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-ghost { border-style: dashed; color: var(--text-secondary); }

/* 號碼選擇格 */
.number-grid {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 6px;
}
/* 數字型只有 0–9，攤成 13 欄會變成很扁的一排 */
.number-grid-digit {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  max-width: 480px;
}
.num {
  appearance: none; cursor: pointer;
  aspect-ratio: 1 / 1;
  min-width: 0; padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.num:hover { border-color: var(--series-1); }
.num.is-on {
  background: var(--game-fill); border-color: var(--game-fill);
  color: var(--on-fill); font-weight: 600;
}

/* ── 統計數字磚 ───────────────────────────────────── */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.tile {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
}
.tile-label { font-size: 12px; color: var(--text-muted); }
.tile-value {
  margin-top: 4px;
  font-size: 26px; font-weight: 600; line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.tile-note { margin-top: 2px; font-size: 12px; color: var(--text-secondary); }

.disclaimer {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--warning);
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.disclaimer strong { color: var(--text-primary); }

/* ── 圖表 ─────────────────────────────────────────── */
.chart { margin: 0; overflow-x: auto; }
.chart svg { display: block; }
.chart-caption {
  margin-top: 10px;
  font-size: 12px; color: var(--text-muted);
}
.tooltip {
  position: fixed; z-index: 50;
  display: none;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: var(--shadow);
  font-size: 12.5px; line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
}
.tooltip b { font-variant-numeric: tabular-nums; }

/* ── 選號參考 ─────────────────────────────────────── */
.picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.pick {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.pick h3 { margin: 0 0 2px; font-size: 14px; }
.pick .muted { display: block; margin-bottom: 12px; }
.pick .balls { justify-content: flex-start; flex-wrap: wrap; }
/* 數字型的參考組合本身就是一組獎號，連寫出來比較好對 */
.pick-combo {
  margin: 10px 0 0;
  font-size: 22px; font-weight: 700; letter-spacing: 5px;
  color: var(--series-1);
  font-variant-numeric: tabular-nums;
}

/* ── 各位數字分布（數字型） ───────────────────────── */
#positions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.dist-position {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.dist-position h3 { margin-bottom: 4px; }

/* ── 型態分布 ─────────────────────────────────────── */
.dist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.dist h3 { margin: 0 0 10px; font-size: 14px; }
.dist-row {
  display: grid;
  grid-template-columns: 84px 1fr 76px;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.dist-label { color: var(--text-secondary); }
.dist-bar { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.dist-bar > span {
  display: block; height: 100%;
  background: var(--bar-color, var(--series-1));
  border-radius: 0 6px 6px 0;
}
/* 型態分布的四個區塊各自一個類別色；順序固定，不循環 */
.dist-cat-1 { --bar-color: var(--cat-1); }
.dist-cat-2 { --bar-color: var(--cat-2); }
.dist-cat-3 { --bar-color: var(--cat-3); }
.dist-cat-4 { --bar-color: var(--cat-4); }
/* 區塊標題前面一個小色點，讓標題跟長條的顏色對得起來 */
.dist h3::before {
  content: ""; display: inline-block;
  width: 9px; height: 9px; margin-right: 7px;
  border-radius: 3px;
  background: var(--bar-color, var(--series-1));
  vertical-align: baseline;
}
.dist-value {
  text-align: right; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* 檢定結果 */
.verdict {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--surface-2);
}
.verdict-item { font-size: 13px; color: var(--text-secondary); }
.verdict-item strong {
  display: block;
  font-size: 20px; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.verdict-note { margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  border: 1px solid currentColor;
}
.badge-good { color: var(--good); }
.badge-warn { color: var(--warning); }
.badge-bad { color: var(--critical); }

/* ── 頁尾連結 ─────────────────────────────────────── */
.footer-links {
  margin: 6px 0; font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
}
.footer-links a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.footer-links a:hover { border-bottom-color: currentColor; }
.footer-sep { color: var(--text-muted); }

/* ── DataTables 調整 ──────────────────────────────── */
.table-scroll { overflow-x: auto; }
table.dataTable { border-collapse: collapse !important; font-size: 13.5px; }
table.dataTable thead th {
  border-bottom: 1px solid var(--border-strong) !important;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}
table.dataTable tbody td {
  border-top: 1px solid var(--grid) !important;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
table.dataTable tbody tr { background: transparent !important; }
table.dataTable tbody tr:hover td { background: var(--surface-2) !important; }
table.dataTable .col-balls, table.dataTable td.cell-balls { white-space: nowrap; }
td.cell-balls .ball { display: inline-grid; vertical-align: middle; margin-right: 4px; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_processing {
  color: var(--text-secondary) !important;
  font-size: 13px;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  padding: 4px 8px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-secondary) !important;
  border-radius: 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--game-fill) !important;
  border-color: var(--game-fill) !important;
  color: var(--on-fill) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
.dataTables_wrapper .dataTables_processing {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.heat-hot  { color: var(--heat-hot); font-weight: 600; }
.heat-cold { color: var(--heat-cold); font-weight: 600; }

/* ── 頁尾 ─────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  padding: 20px 0 32px;
}
.site-footer p { margin: 0 0 4px; font-size: 13px; color: var(--text-secondary); }

/* 頁尾的「網站建議」：語意上是按鈕（會開對話框），外觀跟旁邊的連結一致 */
.link-btn {
  appearance: none; padding: 0; border: 0; background: none;
  font: inherit; color: var(--series-1);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.link-btn:hover { color: var(--accent); }
.link-btn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; border-radius: 3px; }

/* 「尚無資料」卡片裡的匯入指令 */
.code {
  margin: 12px 0;
  padding: 12px 14px;
  overflow-x: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text-primary);
}

/* ── 響應式 ───────────────────────────────────────── */
@media (max-width: 900px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .number-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .header-inner { flex-direction: column; align-items: flex-start; }
  .header-side { align-items: flex-start; }
  .latest { text-align: left; }
  .balls { justify-content: flex-start; }
  .filters { grid-template-columns: 1fr; }
  .number-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .number-grid-digit { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dist-row { grid-template-columns: 72px 1fr 66px; }
}
.heat-flat { color: var(--heat-flat); }

/* ── 對話框 ───────────────────────────────────────
   用原生 <dialog>：焦點鎖定、Esc 關閉、top-layer 疊在最上面
   都是瀏覽器給的，不必自己拿 JS 重做一遍。 */
.modal {
  width: min(640px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  max-height: 88vh; overflow-y: auto;
}
.modal::backdrop { background: rgba(20, 28, 28, .5); }

.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--game-tint);
  border-radius: var(--radius) var(--radius) 0 0;
}
.modal-title { margin: 0; font-size: 16px; }
.modal-close {
  appearance: none; cursor: pointer;
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--text-secondary);
}
.modal-close:hover { background: var(--surface-1); color: var(--text-primary); }
.modal-close:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
.modal > form { padding: 18px 20px 20px; }

/* 開場動畫：淡入＋往上一點點。關閉走原生的立即移除，不做退場。 */
.modal[open] { animation: modal-in .18s ease-out; }
.modal[open]::backdrop { animation: modal-fade .18s ease-out; }
@keyframes modal-in   { from { opacity: 0; transform: translateY(8px); } }
@keyframes modal-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .modal[open], .modal[open]::backdrop { animation: none; }
}

/* 手機：貼齊底部，拇指構得到，也不會被虛擬鍵盤推出畫面 */
@media (max-width: 620px) {
  .modal {
    width: 100%; max-width: 100%;
    margin: auto auto 0;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 0;
  }
  .modal-head { border-radius: var(--radius) var(--radius) 0 0; }
}

/* ── 網站建議表單 ─────────────────────────────────── */
/* 表單長在對話框裡，外框與內距由 .modal 提供，這裡只管欄位排版 */
.suggest { margin: 0; text-align: left; }
.suggest-intro { margin: 0 0 14px; font-size: 13px; }
.suggest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.suggest .field { margin-bottom: 12px; }
.suggest textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit; font-size: 14px; line-height: 1.6;
  /* 高度由 rows="10" 決定；min-height 只是不讓人把它拉到看不見 */
  resize: vertical; min-height: 120px;
}
.suggest textarea:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
.suggest-count { display: block; margin-top: 4px; font-size: 12px; text-align: right; }
.suggest-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.suggest-status { font-size: 13px; color: var(--text-secondary); }
.suggest-status.is-good { color: var(--good); font-weight: 600; }
.suggest-status.is-bad  { color: var(--critical); font-weight: 600; }

/* 驗證碼：輸入框、圖、換一張擠在同一列。
   輸入框不用撐滿——只要打 4 個字，跟圖一樣寬就夠，
   剩下的空間留給圖，兩個元素在視線上才靠得近。 */
.captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.captcha-row input[type="text"] {
  width: 120px; flex: none;
  font-size: 18px; letter-spacing: .18em; text-align: center;
  text-transform: uppercase;
}
/* 圖是 PNG，跟不了深色模式，所以永遠是淺底。
   給它外框與白底，深色模式下就像一張貼上去的紙，不像沒載完的圖。 */
.captcha-img {
  display: block;
  width: 150px; height: 52px; flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #f0f5f5;
  /* 圖上的字是要用眼睛認的，放大時不要被平滑成一團 */
  image-rendering: -webkit-optimize-contrast;
  user-select: none; -webkit-user-drag: none;
}
.captcha-reload {
  appearance: none; cursor: pointer;
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--text-secondary);
}
.captcha-reload:hover { background: var(--surface-2); color: var(--text-primary); }
.captcha-reload:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; }
/* 換圖時轉一圈，讓人知道真的換了新的一張（新舊圖都是 4 個字，
   不轉的話乍看很像沒反應） */
.captcha-reload.is-spinning svg { animation: captcha-spin .5s ease-in-out; }
@keyframes captcha-spin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .captcha-reload.is-spinning svg { animation: none; }
}

/* 蜜罐欄位：真人看不到、tab 不到、螢幕閱讀器也不會念到，
   但機器人會照著 name 填。用 position 移走而不是 display:none——
   有些機器人會跳過 display:none 的欄位。 */
.hp {
  position: absolute;
  left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}