/* =====================================================================
   共用樣式 token。
   色彩與字體取自 brandthinking-school.com（那些外商教我的事）的既有 VI，
   讓計分站看起來就是這個品牌的一部分，而不是另一個系統。

     深藍 #2B5278   主色：標題、主要按鈕、連結
     淺藍 #7DAAD9   輔色：強調、進度、圖表
     淺藍底 #EAF5FC 區塊底色
     頁面底 #F5F9FB
     黃 #FFCB2C     CTA／第一名／分數強調
     內文灰 #565656、標題深灰 #2E2E2E

   ⚠ 字體不載 Google Fonts 的 Noto Sans TC webfont：中文字檔即使做過子集化
      仍有數 MB，現場 26 人同時開頁面會拖很久，網路不穩還會整個卡住。
      改用系統字堆 —— iOS/macOS 的 PingFang TC、Android 的 Noto Sans CJK、
      Windows 的微軟正黑體，實際顯示跟官網幾乎一樣。
   ===================================================================== */
:root {
  --ink:        #2E2E2E;
  --ink-2:      #565656;
  --muted:      #8A9AA8;
  --line:       #DDE7EF;
  --bg:         #F5F9FB;
  --surface:    #FFFFFF;

  --accent:     #2B5278;   /* 主色深藍 */
  --accent-2:   #7DAAD9;   /* 輔色淺藍 */
  --accent-soft:#EAF5FC;   /* 淺藍底 */

  --gold:       #B07D00;   /* 分數／名次的文字色：由品牌黃壓深，確保白底可讀 */
  --gold-bright:#FFCB2C;   /* 品牌黃：只用於填色與邊框，不用於小字 */
  --gold-soft:  #FFE494;

  --ok:         #1E6B3C;
  --warn:       #B8600A;
  --danger:     #B3382C;

  --radius:     12px;
  --shadow:     0 1px 2px rgba(43, 82, 120, .06), 0 8px 24px rgba(43, 82, 120, .07);
  --font: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
          "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }     /* clip 不是 hidden：hidden 會建立捲動容器 */
img, svg, video { max-width: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }   /* 桌機只是置中，不另做一套 */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid var(--accent); border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 700;
}
.btn:hover { background: #22425F; border-color: #22425F; }   /* 主色壓深一階 */
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent-2); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-block { width: 100%; }

/* 危險操作：用紅框白底，跟主色系明確區隔，不會手滑當成一般按鈕 */
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 18px; font-weight: 700;
  border: 1px solid var(--danger); border-radius: 9px;
  background: #fff; color: var(--danger);
}
.btn-danger:hover { background: #FDF2F0; }
.dangerzone { border: 1px solid #EDC9C4; background: #FDF7F6; border-radius: var(--radius); padding: 16px 18px; }

.muted { color: var(--muted); }
.err {
  background: #FDEEEC; border: 1px solid #F3C9C3; color: var(--danger);
  border-radius: 10px; padding: 11px 13px; font-size: 14px;
}

/* 讀取中：三點呼吸，不用任何圖檔 */
.loading { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }
.loading::before {
  content: ""; width: 34px; height: 8px; flex: 0 0 auto;
  background:
    radial-gradient(circle 4px at 4px 4px, currentColor 96%, transparent) 0 0/13px 8px repeat-x;
  animation: loadingdots .9s linear infinite;
}
@keyframes loadingdots { 0% { opacity: .25 } 50% { opacity: 1 } 100% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .loading::before { animation: none } }

.center-msg { padding: 64px 16px; text-align: center; color: var(--muted); }