/* ═══════════════════════════════════════════════════════════════
   喝水冠軍・像素風樣式設定表
   每個部件的外觀都由下面的變數控制，改這裡就能調整整個 App。
   分區編號對應說明文件「樣式設定表.md」。
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── 01 全域：字體與天空背景 ───────────────────────────── */
  --font-main: 'Cubic 11', 'DotGothic16', 'Noto Sans TC', monospace;
  --sky-top: #A6D9F7;        /* 天空上方 */
  --sky-bottom: #C7EAF8;     /* 天空下方 */
  --ink: #1D4A66;            /* 主要文字（深藍） */
  --ink-soft: #4A7A96;       /* 次要文字 */

  /* ── 02 像素邊框（所有卡片、按鈕共用的線條感） ─────────── */
  --px-border: 3px;          /* 邊框粗細 */
  --px-line: #1E4666;        /* 邊框顏色（深藍） */
  --px-radius: 10px;         /* 圓角大小（0 = 直角更像素） */

  /* ── 03 頂部標題區 ─────────────────────────────────────── */
  --mascot-size: 44px;       /* 左上角吉祥物大小 */
  --title-size: 26px;        /* 名稱字級 */
  --badge-bg: #FFF6DC;       /* 台北時間徽章底色 */

  /* ── 04 資訊列（倒數＋目前群組） ───────────────────────── */
  --infobar-bg: #FFF9E8;
  --count-color: #175E8E;    /* 倒數數字顏色 */

  /* ── 05 卡片 ───────────────────────────────────────────── */
  --card-bg: #FDF4DC;        /* 米黃色卡片底 */
  --card-inner: #FFFCF2;     /* 卡片內層亮邊 */
  --card-shadow: #7FB6D9;    /* 卡片下方陰影色 */

  /* ── 06 草地裝飾（卡片底部的綠色像素草） ───────────────── */
  --grass-show: block;       /* block=顯示 / none=隱藏 */
  --grass-h: 8px;
  --grass-1: #7BC96F;
  --grass-2: #5BA855;

  /* ── 07 按鈕 ───────────────────────────────────────────── */
  --btn-bg: #4D9FE0;         /* 主按鈕底色 */
  --btn-shade: #2C6EA8;      /* 主按鈕立體陰影 */
  --btn-ghost-bg: #EAF5FC;   /* 次要按鈕底色 */
  --btn-press: 3px;          /* 按下時下沉的距離 */

  /* ── 08 輸入框與下拉選單 ───────────────────────────────── */
  --input-bg: #FFFEF8;

  /* ── 09 水杯（喝水頁的大杯子） ─────────────────────────── */
  --cup-w: 170px;
  --cup-h: 200px;
  --water-1: #7CC8F7;        /* 水色（亮） */
  --water-2: #3E9BE0;        /* 水色（深） */

  /* ── 10 進度條 ─────────────────────────────────────────── */
  --bar-h: 16px;
  --bar-track: #EDF6FB;

  /* ── 11 名次徽章 ───────────────────────────────────────── */
  --m1-bg: #FFE28A; --m1-tx: #8A5A00;   /* 第1名（金） */
  --m2-bg: #E5EBF2; --m2-tx: #5A6B7C;   /* 第2名（銀） */
  --m3-bg: #F0C9A0; --m3-tx: #7A4A1E;   /* 第3名（銅） */

  /* ── 12 底部工具列 ─────────────────────────────────────── */
  --tab-bg: #EAF6FF;
  --tab-active: #FFF6DC;     /* 選中分頁的底色 */
  --tab-icon: 84px;          /* 底部分頁圖案高度；改這裡即可一起縮放 */
  --tab-icon-offset-y: 20px;  /* 圖片垂直位置；正數往下、負數往上 */
  --tab-frame-padding-y: 4px; /* 外框上下留白；數字越小，外框越矮 */

  /* ── 13 通知吐司與彈窗 ─────────────────────────────────── */
  --toast-bg: #1D4A66;
  --toast-tx: #FFFFFF;
}

/* ═══ 以下是套用上面設定的實作，一般不需要修改 ═══ */
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-main); color: var(--ink);
  background:
    radial-gradient(circle at 15% 12%, #FFFFFF 0 14px, transparent 15px),
    radial-gradient(circle at 22% 10%, #FFFFFF 0 18px, transparent 19px),
    radial-gradient(circle at 82% 6%, #FFFFFF 0 12px, transparent 13px),
    radial-gradient(circle at 88% 9%, #FFFFFF 0 16px, transparent 17px),
    linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  background-attachment: fixed;
  min-height: 100vh;
  image-rendering: pixelated;
}
main { max-width: 520px; margin: 0 auto; padding: 14px 10px 108px; }

/* 03 頂部標題區 */
.header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.header .mascot { width: var(--mascot-size); height: var(--mascot-size); image-rendering: pixelated; }
.header h1 { font-size: var(--title-size); font-weight: 900; margin: 0; flex: 1; letter-spacing: 2px; }
.date-badge {
  background: var(--badge-bg); border: var(--px-border) solid var(--px-line);
  border-radius: var(--px-radius); padding: 5px 10px;
  font-size: 12px; font-weight: 700; text-align: center; line-height: 1.5;
  box-shadow: 0 3px 0 var(--card-shadow);
}

/* 04 資訊列 */
.info-bar {
  background: var(--infobar-bg); border: var(--px-border) solid var(--px-line);
  border-radius: var(--px-radius); box-shadow: 0 3px 0 var(--card-shadow);
  padding: 8px 12px; margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; flex-wrap: wrap;
}
.count { font-variant-numeric: tabular-nums; font-weight: 900; color: var(--count-color); font-size: 16px; }

/* 05 卡片 */
.card {
  position: relative;
  background: var(--card-bg);
  border: var(--px-border) solid var(--px-line);
  border-radius: var(--px-radius);
  box-shadow: inset 0 0 0 3px var(--card-inner), 0 4px 0 var(--card-shadow);
  padding: 16px 16px calc(16px + var(--grass-h));
  margin-bottom: 16px;
  overflow: hidden;
}
/* 06 草地 */
.card::after {
  content: ""; display: var(--grass-show);
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--grass-h);
  background: repeating-linear-gradient(90deg,
    var(--grass-1) 0 6px, var(--grass-2) 6px 12px);
}
.center { text-align: center; }
.title { font-size: 16px; font-weight: 900; margin: 0 0 8px; }
.sub { color: var(--ink-soft); font-size: 13px; margin: 2px 0 12px; }
.note { font-size: 12px; color: var(--ink-soft); line-height: 1.7; }
.err { color: #C0392B; font-size: 13px; font-weight: 700; min-height: 18px; margin-top: 8px; }
.ok-msg { color: #175E8E; font-size: 13px; font-weight: 700; min-height: 18px; margin-top: 8px; }

/* 07 按鈕 */
button.btn {
  border: var(--px-border) solid var(--px-line);
  border-radius: var(--px-radius);
  background: var(--btn-bg); color: #fff;
  font-weight: 900; font-size: 15px; padding: 10px 16px; cursor: pointer;
  font-family: inherit;
  box-shadow: 0 var(--btn-press) 0 var(--btn-shade);
  transition: transform .05s, box-shadow .05s;
}
button.btn:active { transform: translateY(var(--btn-press)); box-shadow: 0 0 0 var(--btn-shade); }
button.btn.ghost { background: var(--btn-ghost-bg); color: var(--ink); box-shadow: 0 var(--btn-press) 0 var(--card-shadow); }
button.btn.small { padding: 6px 10px; font-size: 13px; }
.coin-line {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 18px; font-weight: 900;
}
.coin-help {
  width: 26px; height: 26px; padding: 0;
  border: 2px solid var(--px-line); border-radius: 50%;
  background: #FFF0C8; color: #8A5A00;
  font: 900 16px/1 var(--font-main); cursor: pointer;
}
.coin-rules {
  margin-top: 10px; padding: 10px 12px; text-align: left;
  border: 2px solid var(--px-line); border-radius: 10px;
  background: var(--card-inner); font-size: 13px; line-height: 1.8;
}

/* 08 輸入框 */
input.in, select.in {
  width: 100%; border: var(--px-border) solid var(--px-line);
  border-radius: var(--px-radius); padding: 10px 12px;
  font-size: 15px; font-family: inherit; color: var(--ink);
  background: var(--input-bg); outline: none;
}
input.in:focus, select.in:focus { background: #FFFFFF; }

/* 09 水杯 */
.cup {
  position: relative; width: var(--cup-w); height: var(--cup-h);
  margin: 6px auto 14px;
  border: 4px solid var(--px-line); border-top-width: 6px;
  border-radius: 4px 4px 14px 14px;
  overflow: hidden; background: #F2FAFD;
}
.water {
  position: absolute; left: 0; right: 0; bottom: 0;
  background:
    linear-gradient(180deg, #B9E4FF 0 5px, transparent 5px),
    repeating-linear-gradient(90deg, var(--water-1) 0 10px, var(--water-2) 10px 20px);
  transition: height .8s cubic-bezier(.34,1.4,.5,1);
}
.wave {
  position: absolute; top: -8px; left: -50%; width: 200%; height: 12px;
  background: radial-gradient(circle at 8px 12px, var(--water-1) 7px, transparent 8px);
  background-size: 18px 12px;
  animation: w 3.2s linear infinite;
}
@keyframes w { from { transform: translateX(0) } to { transform: translateX(18px) } }
@media (prefers-reduced-motion: reduce) { .wave { animation: none } }
.cupnum {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 2;
}
.big { font-size: 38px; font-weight: 900; line-height: 1;
  color: #fff; text-shadow: 2px 2px 0 var(--px-line), -2px 2px 0 var(--px-line), 2px -2px 0 var(--px-line), -2px -2px 0 var(--px-line); }

/* 布條標題（競賽頁等） */
.banner {
  display: block; width: fit-content; margin: 0 auto 12px;
  background: #BFE3F7; color: var(--ink);
  border: var(--px-border) solid var(--px-line); border-radius: 8px;
  padding: 6px 18px; font-weight: 900; font-size: 15px;
  box-shadow: 4px 4px 0 var(--card-shadow);
}
/* 前三名的外框列 */
.row.rk {
  border: 3px solid; border-radius: var(--px-radius);
  background: #FFFBEF; padding: 10px 8px; margin: 8px 0;
}
.row.rk.r1 { border-color: #C9A24B; }
.row.rk.r2 { border-color: #8FA3B5; }
.row.rk.r3 { border-color: #B0713A; }

/* 版面小工具 */
.quick { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 2px dashed #E0CFA8; }
.row:last-child { border-bottom: none; }
.gap8 { display: flex; gap: 8px; }
.mt { margin-top: 12px; }

/* 10 進度條 */
.bar {
  flex: 1; height: var(--bar-h); background: var(--bar-track);
  border: 2px solid var(--px-line); border-radius: 8px; overflow: hidden;
}
.bar i {
  display: block; height: 100%;
  background:
    linear-gradient(180deg, #B9E4FF 0 3px, transparent 3px),
    repeating-linear-gradient(90deg, var(--water-1) 0 8px, var(--water-2) 8px 16px);
  transition: width .6s;
}

/* 11 名次徽章 */
.medal {
  min-width: 46px; text-align: center; font-size: 12px; font-weight: 900;
  border-radius: 8px; padding: 3px 4px; color: transparent;
}
.medal.m1, .medal.m2, .medal.m3 {
  color: transparent; border: none; padding: 0;
  min-width: 36px; width: 36px; height: 46px;
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
.medal.m1 { background-image: url('assets/medal-1.png'); }
.medal.m2 { background-image: url('assets/medal-2.png'); }
.medal.m3 { background-image: url('assets/medal-3.png'); }
.chip { background: #FFF0C8; color: #8A5A00; border: 2px solid #C9A24B; border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 900; }

/* 12 底部工具列 */
#tabs {
  position: fixed; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: min(520px, calc(100% - 16px));
  background: var(--tab-bg);
  border: var(--px-border) solid var(--px-line);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--card-shadow);
  display: flex; justify-content: space-around;
  padding: var(--tab-frame-padding-y) 4px
    calc(var(--tab-frame-padding-y) + env(safe-area-inset-bottom));
  z-index: 20;
}
#tabs button {
  background: none; border: none; font-family: inherit;
  cursor: pointer; padding: 2px; display: flex; align-items: flex-end; justify-content: center;
  flex: 1; min-width: 0; border-radius: 10px;
  height: calc(var(--tab-icon) - 20px); /* 選中後框的大小 */
  transition: background-color .12s, box-shadow .12s;
}
#tabs button img {
  width: var(--tab-icon); height: var(--tab-icon);
  object-fit: contain; object-position: center bottom;
  display: block;
  transform: translateY(var(--tab-icon-offset-y));
  image-rendering: pixelated;
}
#tabs button.on {
  background: var(--tab-active);
  box-shadow: inset 0 0 0 2px var(--px-line);
}

/* 13 吐司與彈窗 */
#toasts {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 50; display: flex; flex-direction: column; gap: 8px; width: min(420px, 92vw);
}
.toast {
  background: var(--toast-bg); color: var(--toast-tx);
  border: var(--px-border) solid #0E2B3F; border-radius: var(--px-radius);
  padding: 10px 14px; font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 0 rgba(0,0,0,.25); animation: tin .2s steps(3);
}
@keyframes tin { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } }
.modal {
  position: fixed; inset: 0; background: rgba(14,43,63,.5); z-index: 40;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal > div {
  background: var(--card-bg); border: var(--px-border) solid var(--px-line);
  border-radius: var(--px-radius); box-shadow: inset 0 0 0 3px var(--card-inner);
  padding: 20px; max-width: 440px; width: 100%; max-height: 80vh; overflow: auto;
}