/* 团团的小天地 —— 儿童端样式 v2：卡通、柔和、大触控、语音优先 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Comic Sans MS", sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  background: linear-gradient(180deg,#bfe9ff 0%, #d9f5e3 45%, #fff6dd 100%);
}
/* 快乐云朵背景 */
body::before, body::after {
  content:''; position:fixed; border-radius:50%; opacity:.5; pointer-events:none; z-index:0;
}
body::before { width:160px; height:54px; top:6%; left:-30px; background:#fff; box-shadow:40px 14px 0 8px #fff, 90px -6px 0 4px #fff; }
body::after { width:120px; height:42px; bottom:4%; right:-20px; background:#fff; box-shadow:-30px 10px 0 6px #fff; }

#app { height:100%; position:relative; z-index:1; }
.screen { display:none; position:absolute; inset:0; padding:5vmin; flex-direction:column; }
.screen.active { display:flex; animation: fadeIn .35s ease; }
@keyframes fadeIn { from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)} }

/* —— 主屏 —— */
.home-title {
  font-size: 8vmin; font-weight:900; color:#2b6aa0; text-align:center;
  padding: 6vmin 0 2vmin; letter-spacing:.5vmin; text-shadow:0 2px 0 rgba(255,255,255,.7);
}
.home-sub { text-align:center; font-size:4.5vmin; color:#6a9cc0; margin-bottom:2vmin; }
.home-grid {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4vmin;
  align-content: center; max-width: 84vmin; margin: 0 auto; width: 100%;
  padding: 0 2vmin;
}
.hov {
  border: none; border-radius: 7vmin; min-height: 32vmin; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 6vmin; font-weight: 900; color: #fff; cursor: pointer;
  background: var(--c,#ccc); padding: 2.5vmin 3vmin;
  box-shadow: 0 1.2vmin 0 rgba(0,0,0,.14), 0 2.5vmin 4vmin rgba(0,0,0,.13), inset 0 -1vmin 0 rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease;
  animation: popIn .5s ease backwards;
}
.hov:nth-child(1){ animation-delay:.05s } .hov:nth-child(2){ animation-delay:.15s }
.hov:nth-child(3){ animation-delay:.25s } .hov:nth-child(4){ animation-delay:.35s }
@keyframes popIn { from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1} }
.hov:active { transform:scale(.94); box-shadow:0 .5vmin 0 rgba(0,0,0,.12); }
.hov-emoji { font-size:12vmin; line-height:1; margin-bottom:2vmin; filter:drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.hov-label { font-size:6vmin; text-shadow:0 1px 2px rgba(0,0,0,.15); }
.block-banner {
  background:#ff6b6b; color:#fff; border-radius:3vmin; text-align:center;
  padding:3vmin; font-size:5vmin; font-weight:800; margin-top:2vmin;
  box-shadow:0 1vmin 2vmin rgba(255,107,107,.4);
}

/* —— 通用按钮 —— */
.pill { border:none; border-radius:6vmin; padding:2.8vmin 5vmin; font-size:5.5vmin; font-weight:900;
  cursor:pointer; background:#fff; color:#555; box-shadow:0 .8vmin 0 rgba(0,0,0,.12); transition:transform .1s; }
.pill.big { font-size:6vmin; padding:3.4vmin 6.5vmin; border-radius:7vmin; }
.pill.primary { background:#ffc74a; color:#7a4e00; box-shadow:0 1vmin 0 #e5a400; }
.pill.sky { background:#6ec6ff; color:#0a4a75; box-shadow:0 1vmin 0 #3aa0e8; }
.pill:active { transform:translateY(.7vmin); box-shadow:none; }
.btn-back {
  position:absolute; top:3.5vmin; left:3.5vmin; border:none; background:rgba(255,255,255,.9);
  color:#2b6aa0; font-size:4.2vmin; font-weight:800; border-radius:4vmin; padding:1.8vmin 3.2vmin; cursor:pointer;
  box-shadow:0 .5vmin 0 rgba(0,0,0,.08); z-index:5;
}

/* —— 认物 —— */
.rec-card { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2vmin; }
.rec-img {
  width:54vmin; height:54vmin; object-fit:contain;
  background:radial-gradient(circle at 50% 35%, #fff, #eef8ff 70%); border-radius:14vmin;
  box-shadow:0 2vmin 5vmin rgba(0,0,0,.13), inset 0 -1vmin 0 rgba(0,0,0,.04); padding:4vmin;
  animation: floaty 3.2s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.4vmin)} }
.rec-word { font-size:14vmin; font-weight:900; color:#2b6aa0; text-shadow:0 2px 0 #fff; }
.rec-desc { font-size:6.5vmin; color:#4a7fa8; text-align:center; max-width:85%; line-height:1.4; }
.rec-bar { display:flex; gap:4vmin; justify-content:center; padding:3vmin 0 5vmin; }

/* —— 故事 —— */
.story-card { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3vmin; }
.story-cover {
  width:30vmin; height:30vmin; border-radius:50%; font-size:15vmin; line-height:30vmin; text-align:center;
  background:linear-gradient(135deg,#ffe29a,#ffd0e8, #c1f0ff); box-shadow:0 2vmin 4vmin rgba(0,0,0,.12);
  animation:bob 3s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-1vmin) rotate(-4deg)} }
.story-text { font-size:6.6vmin; line-height:1.8; color:#33465e; max-width:90%; text-align:center;
  max-height:40vh; overflow:hidden; }
.story-virtue { font-size:4.5vmin; color:#e8862f; font-weight:800; background:#fff3; padding:1vmin 3vmin; border-radius:4vmin; }

/* —— 儿歌 —— */
.song-card { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3vmin; }
.song-title { font-size:9vmin; font-weight:900; color:#2b6aa0; }
.song-lyric { font-size:6vmin; color:#44586f; white-space:pre-line; text-align:center; line-height:1.9; max-width:90%;
  animation: popIn .3s ease; }

/* —— 问一问 —— */
.ask-box { flex:1; display:flex; align-items:center; justify-content:center; }
.ask-answer { font-size:8vmin; color:#2b6aa0; font-weight:800; text-align:center; max-width:90%; animation:fadeIn .4s; }
.ask-input { width:70%; font-size:5vmin; padding:2.8vmin; border-radius:3.5vmin; border:2px solid #bcd8ee; }

/* —— 结束页 —— */
.ending { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3vmin;
  background:linear-gradient(180deg,#2a4a6e,#18314d); border-radius:8vmin; margin:6vmin; color:#fff; }
.ending-emoji { font-size:20vmin; animation:twinkle 2s infinite; }
@keyframes twinkle { 0%,100%{opacity:1} 50%{opacity:.55} }
.ending-title { font-size:8vmin; font-weight:900; text-align:center; }
.ending-sub { font-size:5vmin; color:#cfe6ff; }
.ending .pill { background:#6ec6ff; color:#083f63; box-shadow:0 1vmin 0 #2f90d0; }

/* —— 家长热点（右下角连点） —— */
#parent-hotspot { position:fixed; right:0; bottom:0; width:12vmin; height:12vmin; z-index:99; }

/* —— 小熊老师说在话（语音指示气泡） —— */
#talk-indicator {
  position:fixed; left:50%; bottom:4vmin; transform:translateX(-50%);
  display:flex; gap:1.8vmin; align-items:center; z-index:98;
  background:rgba(255,255,255,.92); border-radius:4vmin; padding:2vmin 3.5vmin;
  box-shadow:0 1vmin 3vmin rgba(0,0,0,.12); pointer-events:none;
}
#talk-indicator[hidden]{ display:none; }
.bubble-dot {
  width:2.6vmin; height:2.6vmin; border-radius:50%; background:#2fb6ff;
  animation:bubbling 1.2s infinite ease-in-out;
}
.bubble-dot:nth-child(2){ animation-delay:.2s }
.bubble-dot:nth-child(3){ animation-delay:.4s }
@keyframes bubbling { 0%,100%{transform:translateY(0); opacity:.4} 50%{transform:translateY(-2vmin); opacity:1} }