/* =========================================================
   快乐英语乐园 · Happy Study  —  单复数模块原型
   面向 6 岁小朋友：大按钮、鲜艳配色、圆润卡通、丰富动画
   ========================================================= */

:root {
  --sky-1: #bde0fe;
  --sky-2: #e0f7ff;
  --cream: #fff9ec;
  --ink: #3a3a55;
  --blue: #4aa3ff;
  --blue-d: #2f7fe0;
  --green: #57cc99;
  --green-d: #38a373;
  --yellow: #ffd43b;
  --orange: #ff9f43;
  --pink: #ff7eb3;
  --red: #ff6b6b;
  --gray: #c7cede;
  --card: #ffffff;
  --shadow: 0 10px 0 rgba(0, 0, 0, 0.06), 0 14px 30px rgba(80, 100, 160, 0.18);
  --radius: 26px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: "Baloo 2", "Comic Sans MS", "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 45%, var(--cream) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  user-select: none;
}

/* ---------- 顶部条 ---------- */
#top-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(80, 100, 160, 0.12);
}

.brand { display: flex; align-items: center; gap: 8px; }
.brand-emoji { font-size: 28px; animation: float 3s ease-in-out infinite; }
.brand-text { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--blue-d); }

#star-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #fff6cf, #ffe58a);
  border: 3px solid #ffcf3f;
  border-radius: 999px;
  padding: 4px 16px 4px 10px;
  font-size: 22px;
  font-weight: 900;
  color: #a56a00;
  box-shadow: 0 4px 0 #e0a92e;
}
.star-icon { font-size: 24px; }
#star-count.bump { animation: bump 0.5s ease; }

/* ---------- 屏幕切换 ---------- */
#app { max-width: 960px; margin: 0 auto; padding: 16px 16px 60px; }
.screen { display: none; animation: fade-up 0.4s ease; }
.screen.active { display: block; }

/* ---------- 首页 ---------- */
.home-hero { text-align: center; padding: 10px 0 6px; }
.mascot {
  width: 150px; height: 150px; object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(80,100,160,.25));
  animation: wiggle 3.2s ease-in-out infinite;
}
.home-title { font-size: 30px; margin: 6px 0 4px; color: var(--blue-d); font-weight: 900; }
.home-sub { font-size: 17px; color: #6a7190; margin: 0 0 14px; font-weight: 600; }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.tile {
  border: none;
  border-radius: var(--radius);
  padding: 26px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #fff;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  font-family: inherit;
}
.tile:active { transform: translateY(6px) scale(0.98); box-shadow: 0 4px 0 rgba(0,0,0,.06); }
.tile:hover { transform: translateY(-4px); }
.tile-emoji { font-size: 54px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.15)); }
.tile-name { font-size: 24px; font-weight: 900; }
.tile-desc { font-size: 15px; opacity: 0.92; font-weight: 600; }
.tile-blue { background: linear-gradient(180deg, #6cb6ff, var(--blue-d)); }
.tile-green { background: linear-gradient(180deg, #79e0b2, var(--green-d)); }
.tile-pink { background: linear-gradient(180deg, #ff9ebd, #e0507e); }
.tile-gray { background: linear-gradient(180deg, #d7dce8, #b3bccd); cursor: not-allowed; }
.tile-gray:hover { transform: none; }
.tile[disabled] { opacity: 0.85; }

.home-tip {
  text-align: center; margin-top: 26px; font-size: 15px; font-weight: 700;
  color: #6a7190; background: rgba(255,255,255,.6);
  display: inline-block; padding: 10px 16px; border-radius: 999px;
  width: 100%;
}

/* ---------- 通用小标题栏 ---------- */
.screen-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.screen-title { font-size: 26px; margin: 0; color: var(--blue-d); font-weight: 900; }
.back-btn {
  border: none; cursor: pointer; font-family: inherit;
  background: #fff; color: var(--ink); font-weight: 800; font-size: 16px;
  padding: 10px 16px; border-radius: 999px; box-shadow: 0 4px 0 #d9deea;
  transition: transform .1s ease;
}
.back-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9deea; }
.back-btn.ghost { background: #eaf3ff; color: var(--blue-d); box-shadow: 0 4px 0 #cfe2fb; }
.game-progress { font-weight: 800; color: #6a7190; background:#fff; padding:8px 14px; border-radius:999px; box-shadow:0 4px 0 #d9deea; }

/* ---------- 规则图例 ---------- */
.rule-legend {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: 18px;
}
.legend-item {
  background: #fff; border-radius: 999px; padding: 8px 16px;
  font-size: 15px; font-weight: 700; color: #6a7190;
  box-shadow: 0 4px 12px rgba(80,100,160,.1);
}
.legend-item .s { color: var(--red); font-size: 17px; }

/* ---------- 学习卡片 ---------- */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.word-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  position: relative;
  overflow: hidden;
  animation: pop-in .45s ease both;
}
.word-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 8px;
  background: var(--accent, var(--blue));
}
.card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.rule-chip {
  font-size: 14px; font-weight: 900; color: #fff;
  background: var(--accent, var(--blue));
  padding: 4px 12px; border-radius: 999px;
}
.card-flag { font-size: 13px; font-weight: 700; color: #9aa0b5; }

.pair {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 6px;
}
.side { text-align: center; }
.side-label {
  font-size: 13px; font-weight: 800; color: #fff;
  padding: 3px 10px; border-radius: 999px; display: inline-block; margin-bottom: 6px;
}
.side.singular .side-label { background: var(--blue); }
.side.plural .side-label { background: var(--green); }

.pic-stage {
  min-height: 96px; display: flex; align-items: center; justify-content: center;
  gap: 2px; flex-wrap: wrap; padding: 4px;
}
.pic-stage img {
  width: 78px; height: 78px; object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(80,100,160,.2));
}
.side.plural .pic-stage img { width: 52px; height: 52px; animation: bob 1.6s ease-in-out infinite; }
.side.plural .pic-stage img:nth-child(2) { animation-delay: .15s; }
.side.plural .pic-stage img:nth-child(3) { animation-delay: .3s; }
.side.plural .pic-stage img:nth-child(4) { animation-delay: .45s; }
.side.singular .pic-stage img { animation: breathe 2.6s ease-in-out infinite; }

.arrow { font-size: 30px; color: var(--orange); font-weight: 900; animation: nudge 1.4s ease-in-out infinite; }

.word-text { font-size: 26px; font-weight: 900; margin-top: 4px; letter-spacing: .5px; }
.word-text .tail { color: var(--red); }

/* 喇叭按钮 */
.speak-btn {
  border: none; cursor: pointer; font-family: inherit;
  margin-top: 8px;
  background: linear-gradient(180deg, #fff0b3, #ffd43b);
  color: #8a5b00; font-size: 15px; font-weight: 900;
  padding: 8px 16px; border-radius: 999px;
  box-shadow: 0 4px 0 #e0a92e;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform .1s ease;
}
.speak-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #e0a92e; }
.speak-btn.playing { animation: pulse-ring .9s ease infinite; }
.speak-btn .horn { font-size: 18px; }

/* ---------- 游戏区 ---------- */
#game-area { text-align: center; }
.game-card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 18px; margin: 0 auto;
  max-width: 620px; animation: pop-in .4s ease both;
}
.game-q { font-size: 22px; font-weight: 900; color: var(--blue-d); margin: 0 0 6px; }
.game-hint { font-size: 15px; font-weight: 700; color: #8a90a8; margin: 0 0 14px; }

.count-stage {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; min-height: 130px; padding: 10px;
  background: linear-gradient(180deg,#f3f9ff,#eaf6ff);
  border-radius: 20px; margin-bottom: 18px;
}
.count-stage img {
  width: 96px; height: 96px; object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(80,100,160,.22));
  animation: drop-in .5s ease both;
}
.count-stage img:nth-child(2){ animation-delay:.08s } .count-stage img:nth-child(3){ animation-delay:.16s }
.count-stage img:nth-child(4){ animation-delay:.24s } .count-stage img:nth-child(5){ animation-delay:.32s }

.answer-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.answer-btn {
  border: none; cursor: pointer; font-family: inherit;
  min-width: 150px; padding: 18px 20px; border-radius: 20px;
  font-size: 26px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #6cb6ff, var(--blue-d));
  box-shadow: 0 6px 0 #2a6fc4;
  transition: transform .1s ease, box-shadow .1s ease;
}
.answer-btn.alt { background: linear-gradient(180deg, #79e0b2, var(--green-d)); box-shadow: 0 6px 0 #2f8f66; }
.answer-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #2a6fc4; }
.answer-btn.correct { animation: cheer .6s ease; background: linear-gradient(180deg,#ffe066,#ffb703); color:#7a4b00; box-shadow:0 6px 0 #d99400; }
.answer-btn.wrong { animation: shake .45s ease; background: linear-gradient(180deg,#ffb3b3,#ff8787); box-shadow:0 6px 0 #d9534f; }
.answer-btn[disabled] { cursor: default; }

.listen-row { margin-top: 16px; }

.game-feedback { min-height: 34px; font-size: 22px; font-weight: 900; margin-top: 14px; }
.game-feedback.good { color: var(--green-d); }
.game-feedback.try { color: var(--orange); }

.next-btn {
  border: none; cursor: pointer; font-family: inherit; margin-top: 10px;
  background: linear-gradient(180deg,#ffd066,var(--orange)); color:#7a3b00;
  font-size: 20px; font-weight: 900; padding: 14px 30px; border-radius: 999px;
  box-shadow: 0 6px 0 #d9822b; animation: pop-in .3s ease both;
}
.next-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #d9822b; }

/* ---------- 弹窗 ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(40,50,90,.45); backdrop-filter: blur(3px); animation: fade-up .3s ease; }
.modal.hidden { display: none; }
.modal-card { background: #fff; border-radius: 30px; padding: 30px 26px; text-align: center;
  width: min(90vw, 380px); box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: pop-in .45s cubic-bezier(.2,1.4,.4,1) both; }
.modal-emoji { font-size: 70px; animation: wiggle 1.6s ease-in-out infinite; }
.modal-card h3 { font-size: 30px; margin: 8px 0 4px; color: var(--orange); font-weight: 900; }
.modal-card p { font-size: 17px; color: #6a7190; font-weight: 700; margin: 0 0 20px; }
.big-btn { border: none; cursor: pointer; font-family: inherit; width: 100%;
  background: linear-gradient(180deg,#79e0b2,var(--green-d)); color:#fff;
  font-size: 20px; font-weight: 900; padding: 15px; border-radius: 999px;
  box-shadow: 0 6px 0 #2f8f66; margin-bottom: 12px; }
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #2f8f66; }
.big-btn.alt { background: linear-gradient(180deg,#e7ecf6,#cdd5e6); color:#5a6280; box-shadow:0 6px 0 #b3bccd; }

/* ---------- 语音提示 toast ---------- */
.voice-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 120; background: rgba(58,58,85,.94); color: #fff; font-weight: 700; font-size: 15px;
  padding: 12px 20px; border-radius: 999px; max-width: 88vw; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: fade-up .3s ease; }
.voice-toast.hidden { display: none; }

/* ---------- 撒花 ---------- */
#confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti {
  position: absolute; top: -20px; width: 12px; height: 12px; border-radius: 3px;
  animation: confetti-fall linear forwards;
}

/* ---------- 动画关键帧 ---------- */
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(.82); } 100% { opacity: 1; transform: scale(1); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wiggle { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes drop-in { 0% { opacity:0; transform: translateY(-30px) scale(.6); } 100% { opacity:1; transform:none; } }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.5) rotate(12deg)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(9px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
@keyframes cheer { 0%{transform:scale(1)} 30%{transform:scale(1.15) rotate(-3deg)} 60%{transform:scale(1.08) rotate(3deg)} 100%{transform:scale(1)} }
@keyframes pulse-ring { 0%{box-shadow:0 4px 0 #e0a92e, 0 0 0 0 rgba(255,200,60,.6)} 100%{box-shadow:0 4px 0 #e0a92e, 0 0 0 16px rgba(255,200,60,0)} }
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: .9; }
}

/* ---------- 句型小屋 · 场景 ---------- */
.scene-name {
  font-weight: 800; color: #6a7190; background: #fff;
  padding: 8px 14px; border-radius: 999px; box-shadow: 0 4px 0 #d9deea; font-size: 15px;
}
.scene-tip {
  text-align: center; font-size: 15px; font-weight: 700; color: #6a7190;
  background: rgba(255,255,255,.6); border-radius: 999px; padding: 10px 16px; margin: 0 0 14px;
}
.scene-wrap { display: flex; justify-content: center; }
.scene-stage {
  position: relative; width: 100%; max-width: 900px;
  border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow); background: #eaf6ff;
}
.scene-bg { width: 100%; display: block; }

/* 可点击物品热点：做成贴在场景里的白色圆角图卡，避免混合模式怪影 */
.scene-item {
  position: absolute; padding: 4px; border: 2px solid #fff;
  background: rgba(255,255,255,.92);
  cursor: pointer; line-height: 0; border-radius: 16px;
  box-shadow: 0 4px 12px rgba(80,100,160,.22);
  transition: transform .15s ease;
}
.scene-item img {
  width: 100%; display: block; border-radius: 10px;
  transition: transform .15s ease;
  pointer-events: none;
}
.scene-item:hover img { transform: scale(1.08); }
.scene-item:active img { transform: scale(0.96); }
.scene-item.selected {
  outline: 4px dashed var(--yellow);
  outline-offset: 2px;
  animation: cheer .6s ease;
}
.scene-item .item-label {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  background: rgba(255,255,255,.92); color: var(--ink); font-size: 12px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px; opacity: 0; transition: opacity .2s ease;
  pointer-events: none; white-space: nowrap; line-height: 1.4;
}
.scene-item:hover .item-label, .scene-item.selected .item-label { opacity: 1; }

/* 布局编辑工具栏 */
.scene-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 12px auto 0; max-width: 900px; }
.scene-tools .hidden { display: none; }
.tool-btn { border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 800; cursor: pointer; background: #fff; color: var(--ink); box-shadow: var(--shadow); font-size: 14px; transition: transform .12s ease; }
.tool-btn:hover { transform: translateY(-1px); }
.tool-hint { font-size: 12px; color: #6b7a90; font-weight: 700; }
/* 编辑模式：可拖拽、显示所有标签 */
.scene-stage.editing { outline: 3px dashed var(--yellow); outline-offset: -3px; }
.scene-stage.editing .scene-item { cursor: move; touch-action: none; }
.scene-stage.editing .item-label { opacity: 1; }

/* 场景对话框 */
.scene-dialog {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border-radius: 24px; box-shadow: var(--shadow);
  padding: 16px 18px; margin: 16px auto 0; max-width: 900px;
  animation: pop-in .35s ease both;
}
.scene-dialog.hidden { display: none; }
.dialog-img {
  width: 92px; height: 92px; object-fit: contain; flex: 0 0 auto;
  background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(80,100,160,.15);
}
.dialog-body { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; }
.dialog-line { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 900; }
.dialog-line .tag {
  flex: 0 0 auto; font-size: 13px; font-weight: 900; color: #fff;
  width: 24px; height: 24px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center;
}
.tag-q { background: var(--blue); }
.tag-a { background: var(--green); }
.tag-cn { background: var(--orange); }
.dialog-line.q { color: var(--blue-d); }
.dialog-line.a { color: var(--green-d); }
.dialog-line.cn { color: #b3541e; }
.dialog-btns { display: flex; flex-direction: column; gap: 8px; }
.dlg-btn {
  border: none; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 900;
  padding: 12px 18px; border-radius: 999px; color: #fff; min-width: 150px;
  transition: transform .1s ease;
}
.dlg-btn:active { transform: translateY(3px); }
.dlg-btn.q { background: linear-gradient(180deg,#6cb6ff,var(--blue-d)); box-shadow: 0 4px 0 #2a6fc4; }
.dlg-btn.a { background: linear-gradient(180deg,#79e0b2,var(--green-d)); box-shadow: 0 4px 0 #2f8f66; }
.dlg-btn.cn { background: linear-gradient(180deg,#ffb26b,var(--orange)); box-shadow: 0 4px 0 #d9822b; }

@media (max-width: 560px) {
  .scene-dialog { flex-direction: column; align-items: stretch; text-align: center; }
  .dialog-img { margin: 0 auto; }
  .dialog-btns { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .dlg-btn { min-width: 0; flex: 1 1 auto; }
}

/* ---------- 手机小屏适配 ---------- */
@media (max-width: 520px) {
  .home-title { font-size: 24px; }
  .mascot { width: 118px; height: 118px; }
  .pair { grid-template-columns: 1fr; gap: 4px; }
  .arrow { transform: rotate(90deg); }
  .word-text { font-size: 22px; }
  .side.plural .pic-stage img { width: 46px; height: 46px; }
  .answer-btn { min-width: 130px; font-size: 22px; }
  .count-stage img { width: 74px; height: 74px; }
}