/* ============ 开心识一识 · 儿童益智游戏 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --cream: #fff8e1;
  --blue: #3f97f5;
  --green: #58c322;
  --purple: #9b59e0;
  --red: #f2453d;
  --wood: #a5672a;
  --wood-dark: #7c4a1c;
  --text: #5b3a1e;
}

html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Arial Rounded MT Bold", "Microsoft YaHei", sans-serif;
  color: var(--text);
  user-select: none;
}

#bg { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; pointer-events: none; }

#app { position: relative; z-index: 2; width: 100%; height: 100%; }
.screen { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 10px 18px; }
.hidden { display: none !important; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- 通用圆按钮 ---------- */
.btn-round {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(180deg, #ffd54d, #ffb300);
  border: 3px solid #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.15);
  font-size: 21px; line-height: 1;
  transition: transform .12s;
}
.btn-round:active { transform: scale(.92); }
.btn-round.off { filter: grayscale(1) brightness(.9); }

/* ---------- 顶栏 ---------- */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.player-chip {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #59b7f7, #2f8fe0);
  border: 3px solid #fff; border-radius: 999px;
  padding: 4px 14px 4px 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; font-size: 24px;
  border: 3px solid #ffd54d;
}
.player-meta { display: flex; flex-direction: column; color: #fff; font-weight: 700; }
.player-name { font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.player-stars { font-size: 13px; }
.player-stars b { color: #ffe066; }

.title-sign { text-align: center; }
.title-sign h1 {
  display: inline-block;
  background: linear-gradient(180deg, #b97a3d, #8a5423);
  border: 4px solid #6f3f16;
  border-radius: 18px;
  padding: 3px 26px 7px;
  box-shadow: 0 5px 0 #5d3413, 0 8px 14px rgba(0,0,0,.25);
  font-size: 38px; letter-spacing: 4px;
}
.title-sign h1 span {
  display: inline-block;
  color: #fff;
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff,
               2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
               0 4px 6px rgba(0,0,0,.3);
  transform: rotate(-2deg);
}
.title-sign h1 span:nth-child(2n) { transform: rotate(2deg) translateY(2px); }
.c1 { color: #ff8a3d !important; } .c2 { color: #4fa3f7 !important; }
.c3 { color: #7ed321 !important; } .c4 { color: #f44336 !important; }
.c5 { color: #b57bf5 !important; }
.subtitle {
  display: inline-block; margin-top: 6px;
  background: rgba(255,255,255,.92);
  border-radius: 999px; padding: 3px 18px;
  font-size: 14px; font-weight: 700; color: #e07b1f;
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}

.top-actions { display: flex; gap: 10px; }

/* ---------- 章节卡片网格 ---------- */
.home-main {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 2px 0; min-height: 0; overflow-y: auto;
}
.chapter-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: min(12px, 1.6vh) 20px; width: min(1000px, 96vw); align-content: center;
  margin: auto;
}
.mode-card {
  background: var(--cream);
  border: 4px solid #e8d9a8; border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  display: flex; flex-direction: column; align-items: center;
  padding: 0 12px 10px;
  position: relative;
}
.mode-card.small { padding-top: 0; }
.mode-head {
  padding: 4px 22px; border-radius: 999px;
  color: #fff; font-size: clamp(14px, 2.2vh, 18px); font-weight: 800;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  transform: translateY(-14px);
  white-space: nowrap;
}
.head-blue { background: linear-gradient(180deg, #57a9f7, #2f8fe0); }
.head-green { background: linear-gradient(180deg, #6fd32e, #4caf18); }
.head-pink { background: linear-gradient(180deg, #f48fb1, #e91e63); }
.head-orange { background: linear-gradient(180deg, #ffb74d, #f57c00); }
.head-red { background: linear-gradient(180deg, #ff6659, #d32f2f); }
.head-purple { background: linear-gradient(180deg, #ba68c8, #8e24aa); }
.mode-body { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: -6px; }
.prev-num { font-size: min(44px, 6vh); font-weight: 900; color: var(--purple); text-shadow: 0 3px 0 #d9b3f7; line-height: 1.05; }
.prev-emoji { font-size: min(42px, 5.6vh); line-height: 1.1; }
.prev-mini { font-size: min(16px, 2.2vh); font-weight: 900; font-style: normal; letter-spacing: 3px; }
.prev-mini i { font-style: normal; }
.prev-mini.dots { display: flex; gap: 7px; letter-spacing: 0; }
.prev-mini.dots span { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.lv-badge {
  margin-top: 3px; font-size: min(12px, 1.8vh); font-weight: 800; color: #8d6e63;
  background: #fff3cd; border-radius: 999px; padding: 1px 10px;
}

.btn-start {
  margin-top: 6px; width: 100%;
  padding: min(7px, 1.2vh) 0; border-radius: 999px;
  color: #fff; font-size: clamp(13px, 2.4vh, 17px); font-weight: 800; letter-spacing: 4px;
  border: 3px solid #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 6px 12px rgba(0,0,0,.18);
  transition: transform .12s;
}
.btn-start:active { transform: scale(.95); }
.btn-blue { background: linear-gradient(180deg, #57a9f7, #2f8fe0); }
.btn-green { background: linear-gradient(180deg, #6fd32e, #4caf18); }
.btn-pink { background: linear-gradient(180deg, #f48fb1, #e91e63); }
.btn-orange { background: linear-gradient(180deg, #ffb74d, #f57c00); }
.btn-red { background: linear-gradient(180deg, #ff6659, #d32f2f); }
.btn-purple { background: linear-gradient(180deg, #ba68c8, #8e24aa); }

/* ---------- 底部：引导猴 / 进度 / 宝箱 / 成就 ---------- */
.home-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 2px; }
.guide { display: flex; align-items: flex-end; gap: 6px; max-width: 250px; }
.guide-emoji { font-size: 52px; line-height: .9; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.guide-emoji.small { font-size: 52px; }
.bubble {
  position: relative; background: #fff; border: 3px solid #ffd54d;
  border-radius: 14px; padding: 8px 10px; font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 10px rgba(0,0,0,.15); margin-bottom: 10px;
}
.bubble::before {
  content: ""; position: absolute; left: -12px; bottom: 14px;
  border: 8px solid transparent; border-right-color: #ffd54d;
}
.bubble.small { font-size: 14px; margin-bottom: 6px; }

.game-guide { display: flex; align-items: flex-end; gap: 8px; }
.game-guide .bubble { max-width: 300px; }

.progress-wrap { flex: 1; max-width: 600px; text-align: center; }
.progress-track { position: relative; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.progress-track::before {
  content: ""; position: absolute; left: 40px; right: 40px; top: 30px;
  height: 7px; border-radius: 4px; background: rgba(255,255,255,.75);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}
.p-col { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.p-pips { display: flex; gap: 3px; margin-top: 1px; }
.pip { width: 7px; height: 7px; border-radius: 50%; background: rgba(93,64,55,.22); border: 1px solid rgba(255,255,255,.8); }
.pip.on { background: #58c322; border-color: #2e7d32; }
.p-node {
  width: 44px; height: 44px; border-radius: 50%;
  background: #e3e8ef; border: 3px solid #fff;
  display: grid; place-items: center; font-size: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.p-node.done { background: linear-gradient(180deg, #ffd54d, #ffb300); }
.p-node.done::after {
  content: "✓"; position: absolute; right: -4px; bottom: -4px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #58c322; color: #fff; font-size: 12px; font-weight: 900;
  display: grid; place-items: center; border: 2px solid #fff;
}
.p-node.current { background: linear-gradient(180deg, #ff8a80, #ff5252); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
.p-label { font-size: 14px; line-height: 1.1; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.progress-label { margin-top: 1px; font-size: 12px; font-weight: 700; color: #33691e; text-shadow: 0 1px 0 rgba(255,255,255,.6); }

.footer-right { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.btn-chip {
  padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #ba68c8, #8e24aa);
  border: 3px solid #fff; color: #fff; font-size: 15px; font-weight: 800;
  box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 6px 14px rgba(0,0,0,.18);
  white-space: nowrap;
}
.btn-chip b { color: #ffe066; }
.btn-chip:active { transform: scale(.95); }
.btn-ach {
  padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #7e57c2, #512da8);
  border: 3px solid #fff; color: #fff; font-size: 15px; font-weight: 800;
  box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 6px 14px rgba(0,0,0,.18);
  white-space: nowrap;
}
.btn-ach:active { transform: scale(.95); }

/* ---------- 游戏界面 ---------- */
.game-top { display: flex; align-items: center; justify-content: space-between; }
.game-title {
  background: linear-gradient(180deg, #b97a3d, #8a5423);
  border: 3px solid #6f3f16; border-radius: 16px;
  color: #fff; font-size: 24px; font-weight: 900; letter-spacing: 3px;
  padding: 6px 28px; box-shadow: 0 4px 0 #5d3413;
  text-shadow: 0 2px 3px rgba(0,0,0,.3);
}
.game-stars { font-size: 26px; font-weight: 900; color: #fff; background: rgba(0,0,0,.22); padding: 8px 18px; border-radius: 999px; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.game-stars b { color: #ffe066; }

.level-dots { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }
.ldot {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.8); border: 3px solid #fff;
  display: grid; place-items: center; font-size: 17px; font-weight: 900; color: #90a4ae;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.ldot.now { background: #ffd54d; color: #6d4c00; transform: scale(1.15); }
.ldot.ok { background: #7ed321; color: #fff; }

.q-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; }
.q-prompt-row { display: flex; align-items: center; gap: 14px; }
.q-prompt {
  background: rgba(255,255,255,.95); border: 3px solid #ffd54d; border-radius: 999px;
  padding: 10px 30px; font-size: 26px; font-weight: 900; color: #e07b1f;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.q-big { font-size: 120px; line-height: 1; filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.q-big.speaking { animation: speak .5s ease infinite alternate; }
@keyframes speak { from { transform: scale(1); } to { transform: scale(1.15) rotate(4deg); } }
.q-animals { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: 640px; font-size: 64px; }
.q-animals span { filter: drop-shadow(0 5px 6px rgba(0,0,0,.22)); animation: popin .3s ease backwards; }
@keyframes popin { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- 选项 ---------- */
.options { display: flex; justify-content: center; gap: 26px; padding: 10px 0 18px; min-height: 150px; }
.option {
  width: 130px; height: 130px; border-radius: 24px;
  background: var(--cream); border: 5px solid #e8d9a8;
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 72px; font-weight: 900; line-height: 1;
  transition: transform .12s, box-shadow .12s, opacity .2s;
}
.option .opt-name { font-size: 18px; font-weight: 800; color: #7a5b34; }
.option .opt-emoji { font-size: 68px; line-height: 1.1; }
.opt-swatch { width: 74px; height: 74px; border-radius: 16px; border: 3px solid rgba(0,0,0,.08); box-shadow: inset 0 -6px 10px rgba(0,0,0,.12); }
.opt-shape { width: 78px; height: 78px; position: relative; }
.opt-shape::before { content: ""; position: absolute; inset: 0; background: #f2453d; filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)); }
.shape-circle::before { border-radius: 50%; }
.shape-square::before { border-radius: 10px; }
.shape-triangle::before { clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.shape-star::before { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.shape-diamond::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.shape-pentagon::before { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.math-exp {
  font-size: 76px; font-weight: 900; color: #5b3a1e; letter-spacing: 4px;
  background: #fff; border: 4px solid #ffd54d; border-radius: 24px;
  padding: 6px 34px; box-shadow: 0 8px 18px rgba(0,0,0,.18);
  display: inline-block;
}
.option:active { transform: scale(.94); }
.option.sel { border-color: #ffd54d; box-shadow: 0 0 0 5px rgba(255,213,77,.65), 0 8px 18px rgba(0,0,0,.2); transform: translateY(-6px); }
.option.correct { border-color: #58c322; background: #e6f7d9; animation: bounce .5s ease; }
.option.wrong { opacity: .35; filter: grayscale(.9); animation: shake .4s ease; }
.option.disabled { pointer-events: none; }
@keyframes bounce { 0%,100%{transform:scale(1)} 40%{transform:scale(1.18)} 70%{transform:scale(.95)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-9px)} 50%{transform:translateX(9px)} 75%{transform:translateX(-6px)} }

/* ---------- 成就 ---------- */
.ach-grid {
  flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px;
  align-content: center; justify-items: center; padding: 10px 4vw;
}
.ach-card {
  width: 100%; max-width: 210px; background: var(--cream); border: 4px solid #e8d9a8; border-radius: 22px;
  padding: 14px 10px; text-align: center; box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.ach-card .ach-icon { font-size: 64px; line-height: 1; }
.ach-card.locked .ach-icon { filter: grayscale(1); opacity: .45; }
.ach-card .ach-name { font-size: 21px; font-weight: 900; margin-top: 6px; color: #6d4c00; }
.ach-card .ach-desc { font-size: 14px; font-weight: 600; color: #a1887f; margin-top: 4px; }
.ach-card.locked { opacity: .75; }

/* ---------- 弹窗 ---------- */
.popup {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 40, 10, .45);
  display: grid; place-items: center;
}
.popup-card {
  background: var(--cream); border: 5px solid #ffd54d; border-radius: 30px;
  padding: 34px 46px; text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  animation: popin .35s cubic-bezier(.34,1.56,.64,1);
  max-width: min(560px, 88vw);
}
.popup-card .pop-emoji { font-size: 96px; line-height: 1.1; animation: wobble 1s ease infinite; }
.pop-gift { font-size: 92px; line-height: 1.15; cursor: default; filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.pop-gift.opened { animation: giftOpen .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes giftOpen {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(.82) rotate(-12deg); }
  55% { transform: scale(1.35) rotate(8deg); opacity: .4; }
  100% { transform: scale(.5) rotate(0); opacity: .25; }
}
.pop-hint { font-size: 17px; font-weight: 700; color: #b08d57; animation: pulse 1.2s infinite; }
.pop-reveal { font-size: 92px; line-height: 1.15; animation: popin .45s cubic-bezier(.34,1.56,.64,1); filter: drop-shadow(0 0 20px rgba(255,213,79,.95)) drop-shadow(0 8px 10px rgba(0,0,0,.2)); }
.pop-reward-name { font-size: 26px; font-weight: 900; color: #6d4c00; margin-top: 2px; }
.pop-reward-name small { font-size: 16px; color: #e07b1f; font-weight: 800; }
.rarity-tag {
  display: inline-block; padding: 3px 18px; border-radius: 999px;
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 4px;
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.22);
}
.tier-common { background: linear-gradient(180deg, #90a4ae, #607d8b); }
.tier-rare { background: linear-gradient(180deg, #64b5f6, #1e88e5); }
.tier-legendary { background: linear-gradient(90deg, #f59e0b, #ef4444); }

.coll-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.coll-item { background: #fff; border: 3px solid #ffd54d; border-radius: 16px; padding: 10px 4px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,.12); position: relative; }
.coll-item.locked { opacity: .45; filter: grayscale(1); border-color: #e0d5b8; }
.coll-item .ci-icon { font-size: 40px; line-height: 1.2; }
.coll-item .ci-name { font-size: 14px; font-weight: 900; color: #6d4c00; }
.coll-item .ci-count { font-size: 12px; font-weight: 700; color: #58c322; }
.coll-item.locked .ci-count { color: #a1887f; }
.popup-card h2 { font-size: 34px; font-weight: 900; color: #e07b1f; margin: 8px 0 4px; }
.popup-card .pop-stars { font-size: 40px; font-weight: 900; color: #f2453d; margin: 6px 0 14px; }
.popup-card .pop-stars b { color: #ffb300; }
.pop-btns { display: flex; gap: 16px; justify-content: center; }
.pop-btn {
  padding: 12px 30px; border-radius: 999px; color: #fff; font-size: 21px; font-weight: 800;
  border: 3px solid #fff; box-shadow: 0 5px 0 rgba(0,0,0,.22);
}
.pop-btn:active { transform: scale(.95); }
.pop-btn.green { background: linear-gradient(180deg, #6fd32e, #4caf18); }
.pop-btn.blue { background: linear-gradient(180deg, #57a9f7, #2f8fe0); }

/* ---------- 飘星 / 彩带 / 提示 ---------- */
#fx-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.fly-star { position: fixed; font-size: 40px; z-index: 61; transition: all .8s cubic-bezier(.5,-0.3,.7,1); pointer-events: none; }
.confetti { position: fixed; top: -20px; width: 12px; height: 18px; z-index: 59; opacity: .95; animation: fall linear forwards; pointer-events: none; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

.toast {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%);
  z-index: 70; background: rgba(0,0,0,.78); color: #fff;
  font-size: 22px; font-weight: 800; padding: 14px 30px; border-radius: 999px;
  border: 3px solid #ffd54d; animation: popin .3s ease;
}

/* ---------- 小屏 / 矮屏适配 ---------- */
@media (max-width: 700px) {
  .title-sign h1 { font-size: 30px; }
  .chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(560px, 96vw); }
  .option { width: 96px; height: 96px; font-size: 52px; }
  .option .opt-emoji { font-size: 48px; }
  .ach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coll-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-height: 700px) {
  .screen { padding: 6px 14px; }
  .player-chip { padding: 3px 10px 3px 5px; }
  .avatar { width: 32px; height: 32px; font-size: 20px; }
  .btn-round { width: 40px; height: 40px; font-size: 18px; }
  .title-sign h1 { font-size: 32px; padding: 2px 20px 6px; }
  .subtitle { font-size: 12px; margin-top: 4px; }
  .guide-emoji { font-size: 40px; }
  .bubble { font-size: 12px; padding: 6px 8px; margin-bottom: 8px; }
  .p-node { width: 38px; height: 38px; font-size: 17px; border-width: 3px; }
  .p-label { font-size: 12px; }
  .progress-track { height: 56px; }
  .progress-track::before { top: 26px; }
  .btn-chip, .btn-ach { font-size: 13px; padding: 6px 12px; }
  .level-dots { margin-top: 6px; gap: 10px; }
  .ldot { width: 28px; height: 28px; font-size: 14px; }
  .q-prompt { font-size: 20px; padding: 7px 22px; }
  .q-big { font-size: 84px; }
  .math-exp { font-size: 56px; padding: 4px 24px; }
  .q-animals { font-size: 48px; max-height: 24vh; overflow: hidden; }
  .options { min-height: 0; padding: 4px 0 10px; }
  .option { width: 104px; height: 104px; font-size: 54px; }
  .option .opt-emoji { font-size: 52px; }
  .opt-swatch { width: 56px; height: 56px; }
  .opt-shape { width: 58px; height: 58px; }
  .opt-name { font-size: 15px !important; }
  .game-guide .bubble { max-width: 240px; }
  .guide-emoji.small { font-size: 40px; }
}