:root {
  --red: #E53935;
  --red-d: #C62828;
  --blue: #1E88E5;
  --blue-d: #1565C0;
  --green: #43A047;
  --yellow: #FDD835;
  --orange: #FB8C00;
  --purple: #8E24AA;
  --bg: #F4FAFF;
  --card: #FFFFFF;
  --text: #263238;
  --muted: #6C7A89;
  --line: #E3EAF3;
  --ok: #43A047;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background-color: #EAF6FF;
  background-image:
    url("bg-pattern.svg"),
    linear-gradient(180deg, #EAF6FF 0%, #FFF8F0 100%);
  background-repeat: repeat, no-repeat;
  background-size: 220px 220px, 100% 100%;
  background-attachment: fixed, fixed;
  color: var(--text);
  min-height: 100vh;
}
.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 22px 16px 44px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 屏幕切换 */
.screen { display: none; flex: 1; flex-direction: column; }
.screen.active { display: flex; animation: popIn .35s cubic-bezier(.18,.89,.32,1.12); }
@keyframes popIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* 品牌区 */
.brand { text-align: center; margin: 8px 0 18px; }
.logo-img { max-width: 260px; width: 78%; height: auto; display: inline-block; filter: drop-shadow(0 10px 24px rgba(30,136,229,.18)); }
.brand-sub { margin: 8px 0 0; color: var(--muted); font-size: 15px; font-weight: 600; letter-spacing: .5px; }

/* 卡片 */
.card {
  background: var(--card);
  border-radius: 24px;
  padding: 20px 18px;
  box-shadow: 0 12px 34px rgba(30,136,229,.10);
  border: 1px solid rgba(255,255,255,.8);
}
.field-label { display: block; font-size: 16px; font-weight: 800; margin: 18px 0 12px; color: #455A64; }
.field-label:first-child { margin-top: 0; }

/* 年级选择 */
.grade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grade-btn {
  border: 2px solid var(--line);
  background: #fff;
  border-radius: 18px;
  padding: 14px 0 12px;
  font-size: 18px;
  font-weight: 800;
  color: #455A64;
  cursor: pointer;
  transition: .15s;
  box-shadow: 0 4px 0 #E3EAF3;
  position: relative;
}
.grade-btn small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.grade-btn .g-num { font-size: 24px; font-weight: 900; }
/* 每个年级一个专属活泼色 */
.grade-grid .grade-btn:nth-child(1) .g-num { color: #E53935; }
.grade-grid .grade-btn:nth-child(2) .g-num { color: #FB8C00; }
.grade-grid .grade-btn:nth-child(3) .g-num { color: #43A047; }
.grade-grid .grade-btn:nth-child(4) .g-num { color: #1E88E5; }
.grade-grid .grade-btn:nth-child(5) .g-num { color: #8E24AA; }
.grade-grid .grade-btn:nth-child(6) .g-num { color: #EC407A; }
.grade-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #E3EAF3; }
/* 选中：用各自年级色高亮 */
.grade-btn.selected:nth-child(1) { border-color: #E53935; background: linear-gradient(180deg,#FFEBEE,#FFCDD2); color: #C62828; box-shadow: 0 4px 0 #EF9A9A; }
.grade-btn.selected:nth-child(2) { border-color: #FB8C00; background: linear-gradient(180deg,#FFF3E0,#FFE0B2); color: #EF6C00; box-shadow: 0 4px 0 #FFCC80; }
.grade-btn.selected:nth-child(3) { border-color: #43A047; background: linear-gradient(180deg,#E8F5E9,#C8E6C9); color: #2E7D32; box-shadow: 0 4px 0 #A5D6A7; }
.grade-btn.selected:nth-child(4) { border-color: #1E88E5; background: linear-gradient(180deg,#E3F2FD,#BBDEFB); color: #1565C0; box-shadow: 0 4px 0 #90CAF9; }
.grade-btn.selected:nth-child(5) { border-color: #8E24AA; background: linear-gradient(180deg,#F3E5F5,#E1BEE7); color: #6A1B9A; box-shadow: 0 4px 0 #CE93D8; }
.grade-btn.selected:nth-child(6) { border-color: #EC407A; background: linear-gradient(180deg,#FCE4EC,#F8BBD0); color: #AD1457; box-shadow: 0 4px 0 #F48FB1; }

/* 输入 */
.name-input, .answer-input {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 17px;
  outline: none;
  background: #fff;
  transition: .15s;
}
.name-input:focus, .answer-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30,136,229,.12); }
.answer-input { font-size: 34px; text-align: center; font-weight: 800; letter-spacing: 1px; color: var(--blue-d); }

/* 按钮 */
.btn {
  border: none; border-radius: 16px; padding: 15px 18px;
  font-size: 18px; font-weight: 800; cursor: pointer; width: 100%;
  transition: .15s; margin-top: 16px;
}
.btn-primary {
  background: linear-gradient(90deg, var(--red), #FF6F61);
  color: #fff;
  box-shadow: 0 6px 0 var(--red-d), 0 12px 24px rgba(229,57,53,.28);
}
.btn-primary:disabled { opacity: .5; box-shadow: 0 6px 0 #BDBDBD, none; cursor: not-allowed; background: #BDBDBD; }
.btn-ghost { background: #fff; color: var(--blue); border: 2px solid var(--line); box-shadow: none; font-weight: 700; }
.btn-primary:active { transform: translateY(6px); box-shadow: 0 0 0 var(--red-d), 0 4px 12px rgba(229,57,53,.22); }
.btn-ghost:active { background: #F4FAFF; }
.hint { text-align: center; color: var(--muted); font-size: 13px; margin: 14px 0 0; }

/* 答题页 */
.quiz-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.quiz-meta { display: flex; gap: 8px; }
.pill {
  background: linear-gradient(90deg, var(--blue), var(--blue-d));
  color: #fff; font-size: 13px; font-weight: 800;
  padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(30,136,229,.18);
}
.pill-ghost { background: #fff; color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.timer {
  font-size: 22px; font-weight: 900; color: var(--red);
  font-variant-numeric: tabular-nums; background: #fff;
  padding: 8px 16px; border-radius: 14px;
  box-shadow: 0 4px 12px rgba(229,57,53,.12);
  border: 2px solid #FFCDD2;
}

.quiz-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.question-card {
  background: #fff; border-radius: 28px; padding: 38px 18px;
  box-shadow: 0 14px 38px rgba(30,136,229,.12);
  text-align: center; position: relative; overflow: hidden;
}
.question-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--purple));
}
.question-text { font-size: 42px; font-weight: 900; line-height: 1.3; color: #2E3B45; }
.quiz-actions { display: flex; gap: 12px; }
.quiz-actions .btn { margin-top: 0; }

.dots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); transition: .15s; }
.dot.done { background: var(--green); transform: scale(1.1); }
.dot.current { background: var(--red); transform: scale(1.35); box-shadow: 0 0 0 4px rgba(229,57,53,.18); }

/* 结果页 */
.result-card {
  background: linear-gradient(135deg, #FFF, #FFF3E0);
  border-radius: 28px; padding: 26px 20px; text-align: center; margin-bottom: 18px;
  box-shadow: 0 14px 40px rgba(229,57,53,.16);
  position: relative; overflow: hidden;
}
.result-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue));
}
.result-score { margin-bottom: 16px; position: relative; z-index: 1; }
.score-num { font-size: 72px; font-weight: 900; line-height: 1; color: var(--red);
  animation: scorePop .5s cubic-bezier(.18,.89,.32,1.12); }
@keyframes scorePop {
  from { transform: scale(.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.score-label { color: var(--muted); font-size: 15px; margin-top: 6px; font-weight: 700; }
.result-rows { display: flex; justify-content: space-around; position: relative; z-index: 1; }
.result-row { display: flex; flex-direction: column; gap: 4px; }
.result-row span { font-size: 12px; color: var(--muted); font-weight: 700; }
.result-row b { font-size: 20px; color: var(--text); }

.board-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; color: var(--text); }
.leaderboard { display: flex; flex-direction: column; gap: 9px; max-height: 330px; overflow-y: auto; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.lb-rank { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px; background: #ECEFF1; color: #546E7A; flex-shrink: 0; }
.lb-rank.r1 { background: linear-gradient(135deg,#FFD24A,#FF9F1C); color:#fff; box-shadow: 0 4px 10px rgba(255,159,28,.35); }
.lb-rank.r2 { background: linear-gradient(135deg,#CFD8E3,#9FB3C8); color:#fff; }
.lb-rank.r3 { background: linear-gradient(135deg,#F0A87C,#D98E5B); color:#fff; }
.lb-name { flex: 1; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name.me { color: var(--red); }
.lb-score { font-weight: 900; color: var(--red); font-size: 16px; }
.lb-time { font-size: 12px; color: var(--muted); width: 56px; text-align: right; font-weight: 700; }

/* Confetti */
.confetti-wrap { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.confetti {
  position: absolute; width: 10px; height: 10px; top: -12px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: .2; }
}

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%) translateY(20px);
  background: rgba(38,50,56,.95); color: #fff; padding: 11px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: .2s; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 开始页底部：声音开关 + 周报入口 */
.start-extra { display: flex; gap: 10px; margin-top: 16px; }
.btn-toggle {
  flex: 1; border: 2px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 14px; padding: 11px 10px; font-size: 14px; font-weight: 800; cursor: pointer;
  transition: .15s;
}
.btn-toggle.on { border-color: var(--green); color: var(--green); background: #E8F5E9; }
.btn-link {
  flex: 1; border: none; background: transparent; color: var(--blue);
  font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}

/* 结果页连续打卡徽章 */
.streak-badges { display: flex; gap: 12px; margin-bottom: 18px; }
.badge {
  flex: 1; background: #fff; border-radius: 18px; padding: 14px 8px; text-align: center;
  box-shadow: 0 8px 22px rgba(30,136,229,.10); border: 1px solid rgba(255,255,255,.8);
  display: flex; flex-direction: column; gap: 3px;
}
.badge-num { font-size: 28px; font-weight: 900; color: var(--red); line-height: 1; }
.badge-num.green { color: var(--green); }
.badge-label { font-size: 12px; color: var(--muted); font-weight: 700; }

/* 次按钮（查看周总结） */
.btn-secondary {
  background: linear-gradient(90deg, var(--blue), var(--blue-d));
  color: #fff; box-shadow: 0 6px 0 #1565C0, 0 12px 24px rgba(30,136,229,.26);
}
.btn-secondary:active { transform: translateY(6px); box-shadow: 0 0 0 #1565C0, 0 4px 12px rgba(30,136,229,.22); }

/* 周总结页 */
.sum-header { text-align: center; margin: 4px 0 16px; }
.sum-header h2 { margin: 0; font-size: 24px; font-weight: 900; color: var(--text); }
.sum-name { margin: 6px 0 0; color: var(--muted); font-size: 14px; font-weight: 700; }
.sum-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.sum-stat { background: #fff; border-radius: 16px; padding: 12px 4px; text-align: center;
  box-shadow: 0 6px 18px rgba(30,136,229,.10); }
.sum-stat b { display: block; font-size: 22px; font-weight: 900; color: var(--blue); }
.sum-stat span { font-size: 11px; color: var(--muted); font-weight: 700; }
.sum-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 22px; }
.sum-day { background: #fff; border-radius: 14px; padding: 10px 4px; text-align: center;
  border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.sum-day .d-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); margin: 0 auto; }
.sum-day.done { background: linear-gradient(180deg,#E8F5E9,#C8E6C9); border-color: #A5D6A7; }
.sum-day.done .d-dot { background: var(--green); }
.sum-day .d-score { font-size: 17px; font-weight: 900; color: var(--green); }
.sum-day .d-label { font-size: 10px; color: var(--muted); font-weight: 700; }
.sum-day .d-week { font-size: 10px; color: var(--muted); font-weight: 700; }
.sum-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 30px 0; }

/* ---------------- 成就勋章弹层 ---------------- */
.achievement-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(18,28,38,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
  padding: 24px;
}
.achievement-overlay.show { opacity: 1; pointer-events: auto; }
.achievement-card {
  background: #fff; border-radius: 28px; padding: 30px 26px 24px;
  text-align: center; max-width: 340px; width: 100%;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  transform: scale(.85); transition: transform .3s cubic-bezier(.18,.89,.32,1.12);
}
.achievement-overlay.show .achievement-card { transform: scale(1); }
.achievement-new {
  display: inline-block; background: linear-gradient(90deg, var(--red), #FF6F61);
  color: #fff; font-size: 13px; font-weight: 900; padding: 5px 14px; border-radius: 999px;
  margin-bottom: 4px; box-shadow: 0 4px 12px rgba(229,57,53,.3);
}
.achievement-title { font-size: 15px; color: var(--muted); font-weight: 800; margin-top: 10px; }
.achievement-name { font-size: 26px; font-weight: 900; margin: 4px 0 2px; }
.achievement-desc { font-size: 14px; color: var(--muted); font-weight: 700; }

/* ---------------- 勋章本体（弹层 + 勋章墙共用） ---------------- */
.medal { position: relative; width: 150px; height: 196px; margin: 0 auto; }
.medal .ribbon { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); width: 60px; height: 110px; z-index: 1; }
.medal .ribbon::before, .medal .ribbon::after { content: ''; position: absolute; top: 0; width: 30px; height: 110px; }
.medal .ribbon::before { left: 0; clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%); background: linear-gradient(180deg, var(--red), #B71C1C); }
.medal .ribbon::after  { left: 30px; clip-path: polygon(0 0, 100% 0, 100% 100%, 45% 100%); background: linear-gradient(180deg, var(--blue), #0D47A1); }
.medal .disc {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 148px; height: 148px; border-radius: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #FFF6C2, #FFD23F 48%, #FF9F1C 100%);
  box-shadow: 0 0 0 7px rgba(255,255,255,.55), 0 12px 28px rgba(0,0,0,.25), inset 0 0 0 7px #FFB300;
  animation: medalPop .7s cubic-bezier(.18,.89,.32,1.12);
}
.medal .disc-inner {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #FFE9A8, #FFC83D 70%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.45);
  display: flex; align-items: center; justify-content: center;
}
.medal .disc-inner .star { font-size: 48px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.18); line-height: 1; }
.medal .disc::after {
  content: ''; position: absolute; top: -10%; left: -70%; width: 45%; height: 120%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.85), transparent);
  transform: rotate(18deg); animation: medalShine 1.8s ease-in-out .8s infinite; pointer-events: none;
}
@keyframes medalPop {
  0%   { transform: translateX(-50%) scale(0) rotate(-35deg); opacity: 0; }
  55%  { transform: translateX(-50%) scale(1.22) rotate(8deg); opacity: 1; }
  100% { transform: translateX(-50%) scale(1) rotate(0); }
}
@keyframes medalShine { 0% { left: -70%; } 55% { left: 130%; } 100% { left: 130%; } }

/* 各等级配色 */
.medal.tier-bronze  .disc { background: radial-gradient(circle at 35% 30%, #F0C9A0, #CD7F32 55%, #8D5524 100%); box-shadow: 0 0 0 7px rgba(255,255,255,.55), 0 12px 28px rgba(0,0,0,.25), inset 0 0 0 7px #A9682F; }
.medal.tier-bronze  .disc-inner { background: radial-gradient(circle at 50% 40%, #E8B98C, #C87F3E 70%); }
.medal.tier-silver  .disc { background: radial-gradient(circle at 35% 30%, #FFFFFF, #D6D8DA 50%, #9E9E9E 100%); box-shadow: 0 0 0 7px rgba(255,255,255,.55), 0 12px 28px rgba(0,0,0,.25), inset 0 0 0 7px #B5B7B9; }
.medal.tier-silver  .disc-inner { background: radial-gradient(circle at 50% 40%, #F2F4F5, #C9CCCE 70%); }
.medal.tier-gold    .disc { background: radial-gradient(circle at 35% 30%, #FFF6C2, #FFD23F 48%, #FF9F1C 100%); box-shadow: 0 0 0 7px rgba(255,255,255,.55), 0 12px 28px rgba(0,0,0,.25), inset 0 0 0 7px #FFB300; }
.medal.tier-gold    .disc-inner { background: radial-gradient(circle at 50% 40%, #FFE9A8, #FFC83D 70%); }
.medal.tier-diamond .disc { background: radial-gradient(circle at 35% 30%, #E7FBFF, #5BD6E8 50%, #0097A7 100%); box-shadow: 0 0 0 7px rgba(255,255,255,.55), 0 12px 28px rgba(0,0,0,.25), inset 0 0 0 7px #00ACC1; }
.medal.tier-diamond .disc-inner { background: radial-gradient(circle at 50% 40%, #C6F4FB, #54CADC 70%); }
.medal.tier-king    .disc { background: radial-gradient(circle at 35% 30%, #F3E1F7, #BA68C8 50%, #7B1FA2 100%); box-shadow: 0 0 0 7px rgba(255,255,255,.55), 0 12px 28px rgba(0,0,0,.25), inset 0 0 0 7px #8E24AA; }
.medal.tier-king    .disc-inner { background: radial-gradient(circle at 50% 40%, #E7C9F0, #B062C9 70%); }

/* ---------------- 勋章墙 ---------------- */
.medal-wall-section { margin-bottom: 22px; }
.medal-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mw-item { text-align: center; }
.mw-medal { transform: scale(.52); transform-origin: top center; }
.mw-item.earned .mw-name { color: var(--text); }
.mw-name { font-size: 11px; font-weight: 800; margin-top: -18px; color: var(--muted); }
.mw-req { font-size: 10px; color: var(--muted); font-weight: 700; }
.mw-medal.locked .disc { filter: grayscale(1) brightness(.92); opacity: .55; }
.mw-medal.locked .ribbon::before, .mw-medal.locked .ribbon::after { filter: grayscale(1); opacity: .55; }
.mw-item.earned .mw-medal .disc { animation: medalPulse 2.2s ease-in-out infinite; }
@keyframes medalPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.06); }
}

/* ---------------- 通用弹层卡片（今日已完成 / 分享） ---------------- */
.overlay-card {
  background: #fff; border-radius: 28px; padding: 28px 24px 22px;
  text-align: center; max-width: 350px; width: 100%;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  transform: scale(.85); transition: transform .3s cubic-bezier(.18,.89,.32,1.12);
}
.achievement-overlay.show .overlay-card { transform: scale(1); }
.dt-emoji { font-size: 56px; line-height: 1; margin-bottom: 4px; }
.dt-title { font-size: 26px; font-weight: 900; color: var(--text); margin: 0 0 6px; }
.dt-grade { font-size: 15px; color: var(--muted); font-weight: 700; margin: 0 0 14px; }
.dt-stats { display: flex; justify-content: space-around; margin: 6px 0 14px; }
.dt-stats > div { display: flex; flex-direction: column; gap: 2px; }
.dt-stats b { font-size: 28px; font-weight: 900; color: var(--red); }
.dt-stats span { font-size: 12px; color: var(--muted); font-weight: 700; }
.dt-tip { font-size: 13px; color: var(--blue); font-weight: 700; margin: 4px 0 16px; }

/* ---------------- 分享卡片 ---------------- */
.btn-share {
  background: linear-gradient(90deg, #FF7A45, #FF5E3A);
  color: #fff; border: none; box-shadow: 0 6px 16px rgba(255,94,58,.35);
}
.btn-share:active { transform: translateY(2px); box-shadow: 0 3px 8px rgba(255,94,58,.35); }
.share-card-box { max-width: 360px; }
.share-img {
  width: 100%; max-width: 320px; border-radius: 18px; margin: 8px auto 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,.2); display: block;
}
.share-tip { font-size: 13px; color: var(--muted); font-weight: 700; margin: 6px 0 16px; line-height: 1.5; }