* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  font-family: -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  background: linear-gradient(135deg, #dff2ff 0%, #f1e6ff 52%, #ffe6f2 100%);
  color: #1f2d42;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}

.screen {
  display: none;
  position: absolute;
  inset: 0;
  padding: max(14px, env(safe-area-inset-top)) 24px max(16px, env(safe-area-inset-bottom));
}
.screen.active { display: flex; }

.big {
  font: inherit; font-size: 24px; font-weight: 800;
  padding: 13px 36px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #ff6fa8, #9b72ff);
  color: #fff; box-shadow: 0 5px 0 #7a4dd6;
  cursor: pointer; transition: transform .08s;
}
.big:active { transform: translateY(3px); box-shadow: 0 2px 0 #7a4dd6; }
.big:disabled { opacity: .5; cursor: default; }

.link {
  font: inherit; font-size: 18px; font-weight: 700;
  background: none; border: 0; color: #5b48a8;
  text-decoration: underline; cursor: pointer; padding: 6px 10px;
}
.link.dark { color: #5b48a8; }

#mute {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 16px; z-index: 6;
  font-size: 24px;
  background: rgba(255, 244, 252, 0.92);
  border: 2px solid #e3c8ff;
  border-radius: 50%; width: 48px; height: 48px;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(120, 80, 180, 0.16);
}

/* ---------- Home ---------- */
#home { padding: 0; background: #1e2d45; }
.homebg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.homepanel {
  position: absolute;
  right: 3%; bottom: 4.5%;
  width: min(340px, 34vw);
  background: linear-gradient(145deg, rgba(235, 247, 255, 0.93), rgba(246, 236, 255, 0.93) 55%, rgba(255, 232, 243, 0.93));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 18px 20px;
  box-shadow: 0 12px 32px rgba(50, 30, 90, 0.25);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.home-badge {
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(90deg, #ffd6ea, #ead6ff);
  color: #7b2d7a;
  padding: 4px 12px; border-radius: 999px;
}
.homepanel h1 {
  margin: 0; font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.25; color: #2b295e;
}
.scope {
  margin: 0; font-size: 14px; line-height: 1.45;
  color: #4b4f78; font-weight: 600;
}
.homebtns {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; margin-top: 2px;
}
.homebtns .big { width: 100%; font-size: 22px; padding: 12px 20px; }

/* ---------- Quiz (keyboard-safe top-half prompt) ---------- */
#quiz { flex-direction: column; gap: 12px; }
header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 20px; font-weight: 800; padding-right: 64px;
  flex-shrink: 0;
}
.h-left { display: flex; align-items: center; gap: 10px; }
#qno {
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid #cbe6ff;
  color: #244a7c;
  padding: 4px 14px; border-radius: 999px;
}
.theme-pill {
  font-size: 15px; font-weight: 800;
  background: #ffd9ec; border: 2px solid #ffb5d8; color: #9c2562;
  padding: 4px 14px; border-radius: 999px;
}
#streak { color: #d6336c; min-height: 1em; }
#score {
  background: rgba(255, 255, 255, 0.76);
  border: 2px solid #dfc8ff;
  color: #53308f;
  padding: 4px 14px; border-radius: 999px;
}

.quiz-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  gap: 12px;
  max-width: 900px; width: 100%; margin: 0 auto;
  overflow-y: auto; padding-bottom: 8px;
}

/* 題目區塊：粉藍底 */
.prompt-card {
  background: linear-gradient(180deg, #f3faff, #e4f3ff);
  border: 2.5px solid #b5ddff;
  border-radius: 24px;
  padding: 16px 24px 18px;
  box-shadow: 0 8px 24px rgba(55, 110, 175, 0.12);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.prompt-top {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.prompt-top h2 {
  margin: 0; font-size: clamp(28px, 3.6vw, 40px);
  color: #193b68; line-height: 1.2;
}
.pos-pill {
  font-size: 14px; font-weight: 800;
  background: #eadbff; color: #5b319c;
  border: 1.5px solid #d2b6ff;
  padding: 4px 12px; border-radius: 999px;
}

.blanks {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px 22px;
  min-height: 36px;
}
.wgrp {
  display: inline-flex; gap: 6px; align-items: baseline;
}
.wgrp .ch {
  display: inline-block; min-width: 18px; text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 800; color: #2b5d9e;
  line-height: 1;
}
.wgrp .sep {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 24px; font-weight: 700; color: #6c87ad;
}

.ans-form {
  display: flex; gap: 10px; width: 100%; max-width: 620px;
}
#ans {
  flex: 1; min-width: 0;
  font: inherit; font-size: 24px; font-weight: 700;
  padding: 11px 18px;
  border: 3px solid #9fd0ff; border-radius: 16px;
  background: #ffffff; color: #1f2d42;
  outline: none; text-align: center;
  user-select: text; -webkit-user-select: text;
}
#ans:focus { border-color: #ff6fa8; box-shadow: 0 0 0 4px rgba(255, 111, 168, 0.18); }
#ans:disabled { background: #eef6ff; color: #4c6280; border-color: #c4e0fb; }
.btn-submit {
  font: inherit; font-size: 21px; font-weight: 800;
  padding: 11px 28px; border: 0; border-radius: 16px;
  background: linear-gradient(180deg, #5ea8ff, #3b82f6);
  color: #fff;
  box-shadow: 0 4px 0 #245ec4; cursor: pointer;
}
.btn-submit:active { transform: translateY(2px); box-shadow: 0 2px 0 #245ec4; }
.btn-submit:disabled { opacity: .45; cursor: default; transform: none; }

/* ---------- Feedback / Flashcard (粉紫 + 粉紅區塊) ---------- */
.feedback {
  display: flex; flex-direction: column; gap: 10px;
  animation: fadeUp .22s ease-out;
}
.feedback[hidden] { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.verdict {
  padding: 10px 18px; border-radius: 16px;
  font-size: 19px; font-weight: 800; text-align: center;
}
.verdict.right { background: #d6f7e2; color: #146c35; border: 2px solid #86e3ab; }
.verdict.wrong { background: #ffe0ec; color: #a61e4d; border: 2px solid #ffa3c7; }

/* 單字卡區塊：粉紫底 */
.flashcard {
  background: linear-gradient(180deg, #faf5ff, #f1e6ff);
  border: 2.5px solid #d9bfff;
  border-radius: 22px;
  padding: 16px 22px;
  box-shadow: 0 8px 24px rgba(105, 65, 175, 0.12);
  display: flex; flex-direction: column; gap: 10px;
}
.fc-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.fc-word-wrap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fc-word { font-size: clamp(26px, 3vw, 34px); font-weight: 900; color: #362163; }
.fc-kk { font-size: 18px; color: #5c4c80; font-family: "Lucida Sans Unicode", sans-serif; }
.fc-hint {
  font-size: 15px; font-weight: 700;
  background: #ffe0f0; color: #9c2562;
  border: 1.5px solid #ffb5d8;
  padding: 3px 11px; border-radius: 999px;
}
.fc-meaning { display: flex; align-items: center; gap: 8px; }
.fc-zh { font-size: 20px; font-weight: 800; color: #3a2b5c; }

/* 例句區塊：粉紅底 */
.fc-ex-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #fff0f7, #ffe4f1);
  border: 2px solid #ffc2df;
  border-radius: 16px; padding: 12px 16px;
}
.fc-ex-text { flex: 1; min-width: 0; }
.fc-en { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: #4a1c40; line-height: 1.35; }
.fc-zh-ex { margin: 0; font-size: 16px; color: #7a3b64; line-height: 1.35; }

.btn-speak {
  font: inherit; font-size: 16px; font-weight: 800;
  padding: 9px 16px; border-radius: 999px;
  border: 2px solid #9fd0ff; background: #e8f4ff; color: #1d5494;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.fc-ex-row .btn-speak {
  border-color: #f7a8cf; background: #ffffff; color: #a62666;
}
.btn-speak:active { transform: scale(0.97); }

.next-row { display: flex; justify-content: center; padding-top: 2px; }

.shake { animation: shake .42s; }
@keyframes shake { 20%,60% { transform: translateX(-10px); } 40%,80% { transform: translateX(10px); } }
.pop { animation: pop .42s; }
@keyframes pop { 50% { transform: scale(1.03); } }

/* ---------- Result & Missed Review ---------- */
#result {
  flex-direction: column; gap: 14px;
  max-width: 960px; margin: 0 auto; width: 100%;
}
.result-top {
  background: linear-gradient(135deg, #edf7ff, #f5ebff 52%, #ffe8f3);
  border: 2.5px solid #d8c7ff;
  border-radius: 24px;
  padding: 16px 24px;
  box-shadow: 0 8px 24px rgba(85, 60, 150, 0.12);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; flex-shrink: 0;
}
.result-medal { font-size: 72px; line-height: 1; animation: bounce 1.3s infinite; }
@keyframes bounce { 50% { transform: translateY(-8px); } }
.result-meta { flex: 1; min-width: 220px; }
.result-meta h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); color: #2b295e; }
.subtitle { margin: 2px 0 6px; font-size: 15px; font-weight: 700; color: #6c5b99; }
.final { margin: 0; font-size: 24px; font-weight: 800; color: #3a2b5c; }
.final span { font-size: 48px; font-weight: 900; color: #e83e8c; }
.detail { margin: 2px 0 0; font-size: 16px; color: #4d4770; font-weight: 600; }
.result-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.review-box {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.review-box h3 { margin: 0; font-size: 20px; color: #2b295e; flex-shrink: 0; }
.review-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  align-content: start; align-items: start;
  gap: 12px; padding-bottom: 10px;
}
.review-item {
  background: linear-gradient(180deg, #ffffff, #f8f2ff);
  border: 2px solid #dec9ff;
  border-left: 7px solid #ff74b1;
  border-radius: 18px; padding: 14px 18px;
  box-shadow: 0 4px 14px rgba(85, 60, 150, 0.08);
  display: flex; flex-direction: column; gap: 6px;
}
.review-item:nth-child(3n+2) {
  background: linear-gradient(180deg, #ffffff, #edf6ff);
  border-color: #bfe0ff;
  border-left-color: #7c6bff;
}
.review-item:nth-child(3n+3) {
  background: linear-gradient(180deg, #ffffff, #fff0f7);
  border-color: #ffc6e2;
  border-left-color: #54a6ff;
}
.rv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.rv-word { font-size: 22px; font-weight: 900; color: #2b295e; }
.rv-kk { font-size: 15px; color: #5c4c80; margin-left: 6px; }
.rv-zh { font-size: 17px; font-weight: 700; color: #362e59; }
.rv-typed { font-size: 14px; color: #c92a6a; font-weight: 700; }
.rv-ex { font-size: 15px; color: #364a66; line-height: 1.35; }
.rv-ex-zh { font-size: 14px; color: #5c6f8a; }
.rv-btns { display: flex; gap: 8px; margin-top: 2px; }
.rv-btns .btn-speak { font-size: 14px; padding: 6px 12px; }

#fx { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

@media (max-aspect-ratio: 5/4) {
  .homebg { object-fit: contain; }
  .homepanel { width: min(360px, 88vw); right: 50%; transform: translateX(50%); bottom: 3%; }
  .review-list { grid-template-columns: 1fr; }
}