/* =========================================================
 * 一年级数学互动游戏 · 样式表
 * 明快彩虹配色 / 大圆角 / 大字体 / 手机·平板·电脑三端适配
 * ========================================================= */
:root {
  --pink: #ff6b9d;
  --orange: #ff9f43;
  --yellow: #ffd93d;
  --green: #6bcB77;
  --blue: #4d96ff;
  --purple: #a66bff;
  --bg1: #fff7fb;
  --bg2: #eafff3;
  --ink: #3a3a4a;
  --card: #ffffff;
  --shadow: 0 6px 18px rgba(80, 80, 120, .15);
  --radius: 22px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "微软雅黑", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
  min-height: 100vh;
  font-size: 20px;
  line-height: 1.5;
}

/* ---------- 通用按钮 ---------- */
.big-btn {
  border: none; cursor: pointer; font-weight: 800;
  font-size: 24px; padding: 16px 28px; border-radius: 999px;
  background: var(--yellow); color: #5a4a00;
  box-shadow: 0 4px 0 #e0b800; transition: transform .08s, box-shadow .08s;
  user-select: none;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #e0b800; }
.big-btn.primary { background: var(--green); color: #fff; box-shadow: 0 4px 0 #4a9e57; }
.big-btn.ghost { background: #fff; color: var(--blue); box-shadow: 0 4px 0 #cfe0ff; font-size: 20px; padding: 12px 22px; }
.big-btn.mini { font-size: 22px; padding: 10px 18px; }

/* ---------- 首页 ---------- */
.home { max-width: 1080px; margin: 0 auto; padding: 20px 16px 60px; }
.home-top-bar { display: flex; align-items: center; padding: 0 4px 10px; }
.back-to-portal { white-space: nowrap; }
.home-header { text-align: center; padding: 10px 10px 6px; }
.home-header h1 { font-size: 40px; margin: 0; color: var(--pink); text-shadow: 2px 2px 0 #fff; }
.home-header p { color: #888; font-size: 18px; margin: 6px 0 0; }
.home-tools { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.toggle-btn {
  border: 2px solid #ddd; background: #fff; border-radius: 999px; padding: 8px 18px;
  font-size: 18px; cursor: pointer; font-weight: 700; color: #666;
}
.toggle-btn.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.home-stats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 6px 0 18px; }
.stat-pill {
  background: #fff; border-radius: 18px; padding: 12px 22px; box-shadow: var(--shadow);
  text-align: center; min-width: 120px;
}
.stat-pill .num { font-size: 30px; font-weight: 900; color: var(--orange); }
.stat-pill .lbl { font-size: 15px; color: #999; }

.module-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.module-card {
  background: var(--card); border-radius: var(--radius); padding: 22px 18px;
  box-shadow: var(--shadow); cursor: pointer; text-align: center;
  border: 4px solid transparent; transition: transform .12s, border-color .12s;
  position: relative; overflow: hidden;
}
.module-card:hover { transform: translateY(-4px); }
.module-card .mc-icon { width: 84px; height: 84px; margin: 4px auto 10px; }
.module-card .mc-title { font-size: 22px; font-weight: 900; color: var(--ink); }
.module-card .mc-tip { font-size: 15px; color: #999; margin-top: 6px; min-height: 40px; }
.module-card .mc-stars { font-size: 20px; margin-top: 8px; letter-spacing: 2px; }
.module-card .mc-badge {
  position: absolute; top: 10px; right: 10px; font-size: 22px;
  background: var(--yellow); border-radius: 50%; width: 38px; height: 38px; line-height: 38px;
}
.module-card .mc-play { margin-top: 12px; }

/* 徽章墙 */
.badge-wall { margin-top: 36px; background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.badge-wall h2 { margin: 0 0 12px; color: var(--purple); font-size: 26px; }
.badge-row { display: flex; gap: 14px; flex-wrap: wrap; }
.badge-chip-lg {
  display: flex; align-items: center; gap: 8px; background: #fff7e6; border: 2px solid #ffe08a;
  border-radius: 16px; padding: 10px 16px; font-size: 18px; font-weight: 700;
}
.badge-chip-lg.locked { background: #f3f3f3; border-color: #ddd; color: #bbb; }

/* ---------- 游戏舞台 ---------- */
.game-top { max-width: 880px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.game-progress { margin-left: auto; display: flex; align-items: center; gap: 12px; font-weight: 800; }
.gp-text { font-size: 18px; color: #777; }
.gp-stars { font-size: 20px; }
.game-stage { max-width: 880px; margin: 0 auto; padding: 8px 16px 110px; }

/* 底部上一题/下一题导航 */
.game-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  box-shadow: 0 -4px 16px rgba(80,80,120,.12); justify-content: center;
}
.game-nav .big-btn { flex: 1; max-width: 320px; }

/* 结果回看（已做过的题） */
.result-view {
  background: #fff; border-radius: var(--radius); padding: 24px 20px; box-shadow: var(--shadow);
  text-align: center; width: 100%; max-width: 560px; border: 4px solid #eee;
}
.result-view.ok { border-color: var(--green); }
.result-view.no { border-color: #ff6b6b; }
.rv-badge { font-size: 30px; font-weight: 900; }
.result-view.ok .rv-badge { color: var(--green); }
.result-view.no .rv-badge { color: #e63946; }
.rv-line { font-size: 24px; font-weight: 800; margin-top: 10px; }
.rv-line:first-of-type { margin-top: 16px; }

/* 轻提示 */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px);
  background: rgba(40,40,60,.9); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-size: 18px; font-weight: 700; opacity: 0; transition: opacity .25s, transform .25s; z-index: 999;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 首页续做标签 */
.module-card .mc-resume {
  display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 800; color: #fff;
  background: var(--orange); border-radius: 999px; padding: 4px 12px;
}

.prompt-bar {
  background: #fff; border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.prompt-text { font-size: 26px; font-weight: 800; flex: 1; line-height: 1.4; }
.speak-btn {
  border: none; background: var(--blue); color: #fff; border-radius: 50%;
  width: 58px; height: 58px; font-size: 26px; cursor: pointer; flex: none;
  box-shadow: 0 4px 0 #2f6fd6;
}
.speak-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #2f6fd6; }

.q-area { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* 选项网格 */
.opt-grid { display: grid; gap: 16px; width: 100%; }
.opt-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.opt-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.opt-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.opt-card {
  background: #fff; border: 4px solid #eee; border-radius: 20px; padding: 22px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  transition: transform .1s, border-color .1s; min-height: 110px; justify-content: center;
}
.opt-card:active { transform: scale(.96); }
.opt-card.correct { border-color: var(--green); background: #eafff1; }
.opt-card.wrong { border-color: #ff6b6b; background: #fff0f0; animation: shake .4s; }
.opt-label { font-size: 30px; font-weight: 900; }
.opt-label.big { font-size: 38px; }

/* 数数 */
.count-field { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 560px; }
.count-dot { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
.count-shape { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.count-shape svg { width: 100%; height: 100%; }
.count-q { font-size: 22px; font-weight: 800; }

/* 数字键盘 */
.pad-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.pad-display {
  width: 220px; height: 76px; background: #fff; border: 4px solid var(--blue); border-radius: 18px;
  font-size: 46px; font-weight: 900; color: var(--ink); display: flex; align-items: center; justify-content: center;
}
.pad-grid { display: grid; grid-template-columns: repeat(3, 84px); gap: 12px; }
.pad-key {
  height: 72px; border: none; border-radius: 16px; background: #fff; font-size: 32px; font-weight: 900;
  cursor: pointer; box-shadow: 0 4px 0 #d9d9e3; color: var(--ink);
}
.pad-key:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9d9e3; }
.pad-key.pad-del { background: #ffe3e3; color: #e63946; }
.pad-key.pad-ok { background: var(--green); color: #fff; box-shadow: 0 4px 0 #4a9e57; }
.pad-unit { font-size: 18px; color: #999; }

/* 图形认识 */
.shape-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; width: 100%; max-width: 560px; }
.shape-card {
  background: #fff; border: 4px solid #eee; border-radius: 20px; padding: 18px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .1s, border-color .1s;
}
.shape-card:active { transform: scale(.96); }
.shape-card.correct { border-color: var(--green); background: #eafff1; }
.shape-card.wrong { border-color: #ff6b6b; background: #fff0f0; animation: shake .4s; }

/* 场景点选 */
.scene-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.scene-col { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.scene-card {
  background: #fff; border: 4px solid #eee; border-radius: 20px; padding: 14px 20px; min-width: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: transform .1s, border-color .1s;
}
.scene-card:active { transform: scale(.96); }
.scene-card.correct { border-color: var(--green); background: #eafff1; }
.scene-card.wrong { border-color: #ff6b6b; background: #fff0f0; animation: shake .4s; }
.scene-label { font-size: 20px; font-weight: 800; }

/* 钟表 */
.clock-box { background: #fff; border-radius: 50%; padding: 10px; box-shadow: var(--shadow); }
.clock-svg { line-height: 0; }
.clock-ctrls { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.step-group { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.step-label { font-size: 16px; color: #888; font-weight: 700; }
.step-btns { display: flex; align-items: center; gap: 14px; }
.step-val { font-size: 26px; font-weight: 900; min-width: 90px; text-align: center; }

/* 分类 / 排序 拖拽 */
.bins-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.bin {
  border: 4px dashed #bbb; border-radius: 18px; min-width: 150px; min-height: 170px;
  background: #fafaff; padding: 8px; display: flex; flex-direction: column; align-items: center;
}
.bin.over { border-color: #ffb300; background: #fff7d6; }
.bin.flash-ok { background: #e6ffe9; border-color: #4caf50; }
.bin.flash-no { background: #ffeaea; border-color: #ef5350; }
.bin-label { width: 100%; text-align: center; color: #fff; border-radius: 12px; padding: 6px; font-weight: 800; font-size: 18px; }
.bin-items { flex: 1; width: 100%; display: flex; gap: 8px; flex-wrap: wrap; align-content: flex-start; justify-content: center; padding-top: 8px; }
.tray { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 16px; background: #fff; border-radius: 18px; box-shadow: var(--shadow); min-height: 90px; }
.tray-tip { font-size: 18px; font-weight: 800; color: var(--purple); }
.drag-item {
  background: #fff7e6; border: 3px solid #ffd97a; border-radius: 16px; padding: 10px 14px;
  display: flex; flex-direction: column; align-items: center; cursor: grab; touch-action: none; user-select: none;
}
.drag-item.dragging { opacity: .85; }
.drag-item.in-correct { border-color: #4caf50; background: #e9fbe9; }
.drag-item.misplaced { border-color: #ef5350; background: #ffeaea; }
.drag-label { font-size: 16px; font-weight: 800; }
.sort-list { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; padding: 16px; background: #fff; border-radius: 18px; box-shadow: var(--shadow); }
.sort-item {
  width: 76px; height: 76px; background: var(--blue); color: #fff; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 900;
  cursor: grab; touch-action: none; user-select: none; box-shadow: 0 4px 0 #2f6fd6;
}

/* 图标 */
.icon-svg { display: inline-block; line-height: 0; }
.icon-svg svg { width: 100%; height: 100%; display: block; }

/* 完成页 */
.finish-card {
  background: #fff; border-radius: var(--radius); padding: 30px 24px; box-shadow: var(--shadow);
  text-align: center; max-width: 560px; margin: 20px auto;
}
.finish-emoji { font-size: 46px; }
.finish-card h2 { font-size: 32px; color: var(--pink); margin: 6px 0; }
.finish-score { font-size: 22px; font-weight: 800; }
.finish-stars { font-size: 44px; margin: 10px 0; letter-spacing: 4px; }
.finish-stars .on { filter: none; }
.finish-stars span:not(.on) { filter: grayscale(1) opacity(.35); }
.finish-badge-title { font-size: 18px; color: #999; margin-top: 10px; }
.finish-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0 16px; }
.badge-chip { background: #fff7e6; border: 2px solid #ffe08a; border-radius: 14px; padding: 8px 14px; font-weight: 800; font-size: 16px; }
.finish-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

/* 反馈浮层 */
.feedback {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 999;
}
.feedback.show { opacity: 1; }
.fb-face { font-size: 110px; animation: pop .4s; }
.fb-msg { font-size: 40px; font-weight: 900; color: #fff; text-shadow: 0 3px 6px rgba(0,0,0,.3); }
.fb-detail { font-size: 24px; color: #fff; margin-top: 8px; background: rgba(0,0,0,.25); padding: 6px 16px; border-radius: 12px; }

/* 撒花 */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 998; overflow: hidden; }
.confetti-piece {
  position: absolute; top: -20px; width: 12px; height: 12px; border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(105vh) rotate(540deg); } }
@keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* 后台管理 */
.admin { max-width: 1000px; margin: 0 auto; padding: 20px 16px 60px; }
.admin h1 { color: var(--purple); font-size: 34px; text-align: center; }
.admin-note { text-align: center; color: #999; font-size: 16px; margin-bottom: 18px; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.admin-table th, .admin-table td { padding: 14px 12px; text-align: center; border-bottom: 1px solid #f0f0f5; font-size: 18px; }
.admin-table th { background: #f6f3ff; color: var(--purple); }
.bar { height: 16px; background: var(--green); border-radius: 8px; }
.bar-wrap { background: #eee; border-radius: 8px; width: 160px; overflow: hidden; display: inline-block; vertical-align: middle; }
.back-link { display: inline-block; margin: 10px 0; }

/* 随机挑战：难度选择器 */
.challenge-pick { display: flex; justify-content: center; padding: 20px 16px 60px; }
.level-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; max-width: 560px; }
.level-card {
  border: none; cursor: pointer; border-radius: var(--radius); padding: 22px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff;
  box-shadow: 0 6px 0 rgba(0,0,0,.12); transition: transform .1s; font-family: inherit;
}
.level-card:active { transform: translateY(3px); }
.lv-stars { font-size: 30px; }
.lv-name { font-size: 26px; font-weight: 900; }
.lv-desc { font-size: 15px; opacity: .92; }
.lvl-1 { background: var(--green); box-shadow: 0 6px 0 #4a9e57; }
.lvl-2 { background: var(--orange); box-shadow: 0 6px 0 #d98a1f; }
.lvl-3 { background: var(--pink); box-shadow: 0 6px 0 #d64f7c; }
.lvl-0 { background: var(--blue); box-shadow: 0 6px 0 #2f6fd6; }

/* 首页随机挑战卡片 */
.challenge-card { border-color: var(--pink) !important; background: linear-gradient(160deg, #fff, #fff0f6); }
.challenge-card:hover { transform: translateY(-4px); }

/* 响应式 */
@media (max-width: 760px) {
  body { font-size: 18px; }
  .home-header h1 { font-size: 32px; }
  .prompt-text { font-size: 22px; }
  .opt-label { font-size: 26px; }
  .opt-label.big { font-size: 32px; }
  .pad-grid { grid-template-columns: repeat(3, 72px); }
  .pad-display { width: 200px; height: 68px; font-size: 40px; }
  .shape-grid { grid-template-columns: repeat(2, 1fr); }
  .finish-card h2 { font-size: 28px; }
  .game-top .big-btn.ghost { font-size: 16px; padding: 9px 13px; }
  .game-nav .big-btn { font-size: 18px; padding: 13px 12px; }
}
@media (max-width: 420px) {
  .module-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .module-card .mc-icon { width: 64px; height: 64px; }
  .module-card .mc-title { font-size: 18px; }
  .module-card .mc-tip { font-size: 13px; min-height: 34px; }
  .big-btn { font-size: 20px; padding: 14px 22px; }
  .pad-grid { grid-template-columns: repeat(3, 64px); gap: 10px; }
  .pad-key { height: 62px; font-size: 28px; }
}