/* 設計 token、reset、共用元件（按鈕、卡片、吐司）。亮色單一主題。 */

:root {
  --bg: #f4f1ea;
  --surface: #fffdf7;
  --surface-2: #ebe6da;
  --ink: #2b3038;
  --ink-2: #5d6675;
  --ink-3: #8b94a3;
  --line: #d9d3c4;
  --accent: #1864ab;
  --accent-ink: #fff;
  --warn: #e8590c;
  --bad: #c92a2a;
  --ok: #2f9e44;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow: 0 1px 2px rgba(43, 48, 56, .08), 0 4px 12px rgba(43, 48, 56, .06);
  --shadow-lift: 0 6px 18px rgba(43, 48, 56, .22);

  --tile-w: 34px;
  --tile-h: 46px;
}

@media (min-width: 480px) {
  :root { --tile-w: 38px; --tile-h: 52px; }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* 拖曳期間鎖住頁面捲動（§8.5），避免手指拖牌時整頁跟著滑。 */
body.is-dragging {
  touch-action: none;
  user-select: none;
  overflow: hidden;
}

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1 { font-size: 1.5rem; margin: 0; letter-spacing: .02em; }

.lead { color: var(--ink-2); margin: 0; }

.card {
  margin: auto;
  width: 100%;
  max-width: 480px;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ui-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.16em; }

/* ── 按鈕 ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  min-height: 48px;              /* 手機觸控目標 */
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .06s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--lg { min-height: 56px; font-size: 1.05rem; }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn:focus-visible, .icon-btn:focus-visible, .tier:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 18px;
}
.icon-btn:active { background: var(--surface-2); }

/* ── 吐司（取代原生 alert：自製、可控、可樣式化） ────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  z-index: 200;
  max-width: calc(100vw - 32px);
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.toast--on { opacity: 1; transform: translate(-50%, 0); }

.seed {
  margin: 0;
  text-align: center;
  color: var(--ink-3);
  font-size: .8rem;
  letter-spacing: .08em;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}