:root {
  --brand:        #5856D6;
  --brand-mid:    #0A84FF;
  --green:        #34C759;
  --red:          #FF3B30;
  --orange:       #FF9500;
  --bg:           #F2F2F7;
  --bg2:          #FFFFFF;
  --label:        #000000;
  --label2:       rgba(60,60,67,0.60);
  --label3:       rgba(60,60,67,0.30);
  --fill:         rgba(120,120,128,0.12);
  --fill2:        rgba(120,120,128,0.08);
  --separator:    rgba(60,60,67,0.29);
  --r-sm:         10px;
  --r-md:         14px;
  --r-lg:         20px;
  --r-xl:         26px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--label);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── 畫面切換 ── */
.screen { display: none; }
.screen.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  animation: fadeUp 0.25s cubic-bezier(0.4,0,0.2,1);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hidden { display: none !important; }

/* ── 選擇畫面 ── */
.select-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 2rem 1.5rem;
  gap: 1.2rem;
}

.select-logo {
  font-size: 3rem;
  line-height: 1;
}

.select-container h1 {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.streak-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg2);
  border-radius: 20px;
  padding: 0.4rem 1rem;
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--orange);
}
.streak-badge span { color: var(--label2); font-weight: 400; font-size: 0.85rem; }

.level-group {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.btn-level {
  width: 100%;
  padding: 1.3rem 1.5rem;
  border: none;
  border-radius: var(--r-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-md);
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn-level:active { transform: scale(0.97); box-shadow: var(--shadow-sm); }
.btn-level[data-level="國中"] { background: linear-gradient(135deg, #5856D6, #3634A3); color: white; }
.btn-level[data-level="高中"] { background: linear-gradient(135deg, #0A84FF, #0055C8); color: white; }

.btn-weak {
  width: 100%;
  padding: 0.75rem 1.2rem;
  border: none;
  border-radius: var(--r-lg);
  background: var(--bg2);
  color: var(--orange);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s, opacity 0.2s;
  text-align: left;
}
.btn-weak:active { transform: scale(0.97); }
.btn-weak.empty { opacity: 0.35; pointer-events: none; }
.weak-num { font-size: 1rem; font-weight: 700; }

.level-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.level-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.level-title { font-size: 1.2rem; font-weight: 700; }
.level-desc { font-size: 0.85rem; opacity: 0.85; }

/* ── 答題畫面 ── */
.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem 0.4rem;
  padding-top: calc(0.9rem + env(safe-area-inset-top));
}

.btn-back {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--brand);
  cursor: pointer;
  font-weight: 500;
  padding: 0.2rem 0;
}

.progress-info { font-size: 0.9rem; color: var(--label2); font-weight: 500; }

.progress-bar {
  height: 5px;
  background: var(--fill);
  margin: 0.4rem 1.2rem 0.2rem;
  border-radius: 3px;
  overflow: hidden;
}
#progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-mid));
  border-radius: 3px;
  transition: width 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ── 卡面共用 ── */
.card-face {
  padding: 1rem 1.2rem 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 第一面 ── */
.card-hint {
  font-size: 0.82rem;
  color: var(--label2);
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sentence-box {
  background: var(--bg2);
  border-radius: var(--r-xl);
  padding: 1.4rem 1.2rem;
  font-size: 1.08rem;
  line-height: 1.75;
  text-align: center;
  box-shadow: var(--shadow-sm);
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blank {
  display: inline-block;
  min-width: 72px;
  border-bottom: 2.5px solid var(--brand);
  margin: 0 3px;
  vertical-align: bottom;
}

.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.choice-btn {
  background: var(--bg2);
  border: 1.5px solid var(--separator);
  border-radius: var(--r-lg);
  padding: 0.95rem 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.choice-btn:active { transform: scale(0.96); }
.choice-btn.correct {
  background: #D1FAE5;
  border-color: var(--green);
  color: #065F46;
  animation: correctPop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.choice-btn.wrong {
  background: #FEE2E2;
  border-color: var(--red);
  color: #991B1B;
  animation: wrongShake 0.35s ease;
}
.choice-btn.disabled { pointer-events: none; opacity: 0.45; }

@keyframes correctPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
@keyframes wrongShake {
  0%,100% { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
}

/* ── 第二面 ── */
.result-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.4rem;
  border-radius: var(--r-md);
  animation: fadeUp 0.2s ease;
}
.result-badge.correct { color: #065F46; background: #D1FAE5; }
.result-badge.wrong   { color: #991B1B; background: #FEE2E2; }

.word-card {
  background: var(--bg2);
  border-radius: var(--r-xl);
  padding: 1.3rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.word-main { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.word-main span:first-child { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.3px; }

#back-pos {
  font-size: 0.82rem;
  color: var(--brand);
  background: rgba(88,86,214,0.1);
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  font-weight: 600;
}

.word-phonetic {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--label2);
  font-size: 0.92rem;
}

.freq-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  margin-left: auto;
}
.freq-badge.high  { background: rgba(255,59,48,0.12);  color: #C0392B; }
.freq-badge.mid   { background: rgba(255,149,0,0.12);  color: #B7700A; }
.freq-badge.low   { background: rgba(120,120,128,0.1); color: var(--label2); }

.btn-speak {
  background: var(--fill2);
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  line-height: 1;
  transition: background 0.15s;
}
.btn-speak:active { background: var(--fill); }

.word-definition { font-size: 1rem; color: var(--label); font-weight: 400; }

.word-example {
  background: var(--fill2);
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.word-example p { font-size: 0.92rem; line-height: 1.6; }
.example-zh { color: var(--label2); }

/* ── 用法區塊 ── */
.btn-usage-toggle {
  background: none;
  border: none;
  font-size: 0.88rem;
  color: var(--brand);
  cursor: pointer;
  padding: 0;
  font-weight: 500;
}

.usage-list { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.45rem; }
.usage-item { display: flex; flex-direction: column; gap: 0.1rem; }
.usage-pattern { font-weight: 600; font-size: 0.88rem; color: var(--label); }
.usage-meaning { font-size: 0.82rem; color: var(--label2); }

/* ── 操作按鈕 ── */
.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: auto;
}

.btn-again, .btn-know {
  padding: 0.95rem;
  border: none;
  border-radius: var(--r-lg);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.1s;
}
.btn-again:active, .btn-know:active { transform: scale(0.97); }
.btn-again { background: var(--fill); color: var(--label); }
.btn-know  { background: linear-gradient(135deg, var(--brand), var(--brand-mid)); color: white; box-shadow: var(--shadow-sm); }

/* ── 模式標籤 ── */
.mode-tag {
  margin: 0 1.2rem 0.3rem;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-block;
  align-self: flex-start;
}
.mode-tag.all  { background: rgba(88,86,214,0.12); color: var(--brand); }
.mode-tag.weak { background: rgba(255,149,0,0.12); color: var(--orange); }

/* ── 結束畫面 ── */
.done-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 2rem;
  gap: 1.4rem;
  text-align: center;
}

.done-emoji { font-size: 4rem; animation: correctPop 0.5s 0.1s both; }
.done-container h2 { font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; }

.done-streak {
  background: var(--bg2);
  border-radius: var(--r-xl);
  padding: 1rem 2rem;
  box-shadow: var(--shadow-sm);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--orange);
}
.done-streak small { display: block; font-size: 0.85rem; color: var(--label2); font-weight: 400; margin-top: 0.2rem; }

.done-stats {
  display: flex;
  gap: 1rem;
}
.stat {
  background: var(--bg2);
  border-radius: var(--r-lg);
  padding: 0.8rem 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 90px;
}
.stat span { font-size: 2rem; font-weight: 700; color: var(--brand); }
.stat small { font-size: 0.82rem; color: var(--label2); }

.graduated-stat span { color: #16a34a !important; }

.done-weak-info {
  font-size: 0.88rem;
  color: var(--label2);
  min-height: 1.2rem;
}

.btn-restart {
  background: linear-gradient(135deg, var(--brand), var(--brand-mid));
  color: white;
  border: none;
  border-radius: var(--r-lg);
  padding: 1rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.btn-restart:active { transform: scale(0.97); }

/* ── 登入畫面 ── */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 2rem 1.5rem;
  gap: 1rem;
}

.login-subtitle {
  font-size: 0.95rem;
  color: var(--label2);
  text-align: center;
}

.login-form {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-input {
  width: 100%;
  padding: 0.95rem 1.2rem;
  border: 1.5px solid var(--separator);
  border-radius: var(--r-lg);
  font-size: 1.05rem;
  font-family: inherit;
  background: var(--bg2);
  color: var(--label);
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
.login-input:focus { border-color: var(--brand); }

.btn-login {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-mid));
  color: white;
  border: none;
  border-radius: var(--r-lg);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  margin-top: 0.25rem;
  transition: transform 0.1s;
}
.btn-login:active   { transform: scale(0.97); }
.btn-login:disabled { opacity: 0.6; pointer-events: none; }

.login-error {
  font-size: 0.88rem;
  color: var(--red);
  text-align: center;
  min-height: 1.1rem;
}

.login-hint {
  font-size: 0.82rem;
  color: var(--label2);
  text-align: center;
}

.btn-skip {
  background: none;
  border: none;
  color: var(--label2);
  font-size: 0.88rem;
  cursor: pointer;
  font-family: inherit;
  padding: 0.25rem;
}

/* ── 使用者徽章 ── */
.user-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--label2);
  font-weight: 500;
  background: var(--fill2);
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
}