/* ===== 英文複習樂園 · 共用樣式 ===== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&family=Baloo+2:wght@700;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Nunito','Microsoft JhengHei',sans-serif;
  min-height:100vh;
  background:linear-gradient(180deg,#fdf4ff,#f5d0fe);
  color:#1f2937;
  padding:20px 16px;
}
.wrap{max-width:960px;margin:0 auto}

/* 頁首 */
.page-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;flex-wrap:wrap;gap:8px;
}
.page-hd h1{font-family:'Baloo 2',cursive;font-size:1.8em;color:#a21caf;display:flex;align-items:center;gap:8px}
.page-hd .back{
  background:#fff;border:2px solid #e9d5ff;border-radius:14px;
  padding:8px 14px;color:#7e22ce;font-weight:700;text-decoration:none;font-size:.9em;
}
.page-hd .back:hover{background:#f3e8ff}
.page-sub{color:#7e22ce;font-size:.95em;opacity:.85;margin-bottom:20px}

/* 卡片 */
.card{
  background:white;border-radius:24px;padding:24px;margin-bottom:20px;
  box-shadow:0 6px 24px rgba(162,28,175,.1);
}
.card h2{
  font-family:'Baloo 2',cursive;font-size:1.3em;color:#7e22ce;
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.card h3{
  font-family:'Baloo 2',cursive;font-size:1.05em;color:#a21caf;
  margin-bottom:10px;
}

/* 按鈕 */
.btn{
  background:#a855f7;color:white;border:none;border-radius:14px;
  padding:10px 20px;font-weight:800;cursor:pointer;font-family:inherit;
  font-size:1em;transition:transform .15s,background .15s;
}
.btn:hover{background:#9333ea;transform:translateY(-1px)}
.btn:disabled{background:#d4d4d8;cursor:not-allowed;transform:none}
.btn-outline{
  background:white;color:#7e22ce;border:2px solid #e9d5ff;
  border-radius:14px;padding:8px 16px;font-weight:700;cursor:pointer;
  font-family:inherit;font-size:.9em;
}
.btn-outline:hover{background:#f3e8ff}
.btn-ghost{
  background:transparent;color:#6b7280;border:none;padding:6px 12px;
  cursor:pointer;font-family:inherit;font-size:.9em;
}
.btn-ghost:hover{color:#7e22ce}
.btn-sm{padding:6px 12px;font-size:.85em}
.btn-lg{padding:14px 28px;font-size:1.1em}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* 範圍選擇 */
.term-section{
  border:2px solid #e9d5ff;border-radius:18px;padding:16px;margin-bottom:14px;
  background:#faf5ff;
}
.term-section-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.term-badge{
  background:#a855f7;color:white;padding:4px 12px;border-radius:999px;
  font-size:.85em;font-weight:800;
}
.term-badge.t2{background:#ec4899}
.week-grid{display:flex;flex-wrap:wrap;gap:8px}
.week-chip{
  background:white;border:2px solid transparent;border-radius:10px;
  padding:6px 14px;cursor:pointer;color:#6b7280;font-weight:700;font-size:.9em;
  box-shadow:0 1px 3px rgba(0,0,0,.08);transition:all .15s;
  font-family:inherit;
}
.week-chip.on{border-color:#a855f7;color:#7e22ce;background:#faf5ff;box-shadow:0 2px 8px rgba(168,85,247,.2)}
.week-chip:hover{background:#f3e8ff}

/* 內容型選擇（phonics/vocab） */
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
@media(max-width:480px){.type-grid{grid-template-columns:1fr}}
.type-card{
  background:white;border:2px solid #e9d5ff;border-radius:18px;padding:18px;
  cursor:pointer;text-align:center;transition:all .15s;font-family:inherit;
}
.type-card:hover{border-color:#a855f7;transform:translateY(-2px);box-shadow:0 6px 18px rgba(168,85,247,.15)}
.type-card.on{background:#faf5ff;border-color:#a855f7;box-shadow:0 6px 18px rgba(168,85,247,.2)}
.type-card .emoji{font-size:2.2em;margin-bottom:6px}
.type-card .nm{font-family:'Baloo 2',cursive;font-size:1.1em;color:#7e22ce}
.type-card .ds{font-size:.8em;color:#6b7280;margin-top:2px}

/* 題目/回答 */
.question-box{
  background:#fef3c7;border:2px solid #fbbf24;border-radius:18px;
  padding:20px;margin-bottom:16px;text-align:center;
}
.question-box .qhint{color:#92400e;font-size:.9em;margin-bottom:8px;font-weight:700}
.question-box .qmain{font-family:'Baloo 2',cursive;font-size:1.4em;color:#78350f}
.question-box .qword{
  font-family:'Baloo 2',cursive;font-size:1.8em;color:#a21caf;margin:12px 0 4px;
}

.input-wrap{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
input[type=text]{
  padding:12px 14px;border:2px solid #e9d5ff;border-radius:12px;
  font-size:1.1em;font-family:inherit;font-weight:700;color:#1f2937;min-width:220px;
  outline:none;text-align:center;
}
input[type=text]:focus{border-color:#a855f7;box-shadow:0 0 0 4px #e9d5ff}
input.correct{border-color:#16a34a;background:#dcfce7;color:#15803d}
input.wrong{border-color:#dc2626;background:#fee2e2;color:#b91c1c}

/* 進度條 */
.progress{background:#e5e7eb;border-radius:999px;height:10px;overflow:hidden;margin-bottom:6px}
.progress .bar{background:linear-gradient(90deg,#a855f7,#ec4899);height:100%;transition:width .3s;border-radius:999px}
.prog-meta{display:flex;justify-content:space-between;font-size:.85em;color:#7e22ce;margin-bottom:12px}

/* 統計 */
.score-pill{
  display:inline-block;background:#dcfce7;color:#15803d;
  padding:4px 14px;border-radius:999px;font-weight:800;font-size:.9em;
}
.score-pill.red{background:#fee2e2;color:#b91c1c}
.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.stat-box{
  background:#faf5ff;border:2px dashed #d8b4fe;border-radius:14px;
  padding:12px 16px;flex:1;min-width:110px;text-align:center;
}
.stat-box .n{font-family:'Baloo 2',cursive;font-size:1.6em;color:#a21caf}
.stat-box .l{font-size:.8em;color:#6b7280;margin-top:2px}

/* 反饋訊息 */
.feedback{
  padding:12px 16px;border-radius:12px;margin:10px 0;font-weight:700;
  text-align:center;
}
.feedback.ok{background:#dcfce7;color:#15803d}
.feedback.ng{background:#fee2e2;color:#b91c1c}
.feedback.info{background:#dbeafe;color:#1e40af}

/* 定義提示 */
.def-hint{
  background:#faf5ff;border-left:4px solid #a855f7;
  border-radius:10px;padding:10px 14px;margin:10px 0;color:#6b21a8;
  font-size:.95em;line-height:1.6;
}

/* 隱藏 */
.hidden{display:none !important}

/* 工具 */
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-8{gap:8px}
.gap-12{gap:12px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-20{margin-top:20px}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.text-center{text-align:center}
.small{font-size:.85em;color:#6b7280}