/* ==========================================================================
   components.css · 屏级组件（顶栏/地图/关卡/结算/成长/家长）
   ========================================================================== */

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  backdrop-filter: blur(12px);
}
.topbar__title { font-weight: 700; font-size: 17px; }
.topbar .spacer { flex: 1; }

.dailybar {
  height: 9px;
  border-radius: var(--r-pill);
  background: rgba(45, 52, 54, 0.1);
  overflow: hidden;
  min-width: 110px;
}
.dailybar__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-teal), var(--c-primary));
  transition: width var(--dur-slow) var(--ease);
}
.dailybar__fill.is-low { background: linear-gradient(90deg, #ffd07a, var(--c-warn)); }

/* ---------------- Tabs ---------------- */
.tabs { display: inline-flex; gap: 6px; padding: 5px; background: rgba(255, 255, 255, 0.7);
  border-radius: var(--r-pill); box-shadow: var(--sh-1); }
.tab {
  border: 0; cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--c-ink-2); background: transparent; padding: 8px 16px; border-radius: var(--r-pill);
  transition: all var(--dur) var(--ease);
}
.tab.is-active { color: #fff; background: linear-gradient(180deg, var(--c-purple-2), var(--c-purple)); }

/* ---------------- 地图：区域与关卡 ---------------- */
.region {
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 16px;
  background: var(--glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--sh-1);
}
.region__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.region__icon {
  width: 52px; height: 52px; display: grid; place-items: center; font-size: 28px;
  border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.region__name { font-weight: 700; font-size: 17px; }
.region__sub { font-size: 12.5px; color: var(--c-ink-2); }

.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 10px; }
.node {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px 10px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1.5px solid rgba(45, 52, 54, 0.07);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  text-align: center;
}
.node:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.node__icon { font-size: 26px; }
.node__name { font-size: 13px; font-weight: 600; color: var(--c-ink); }
.node__kp { font-size: 11px; color: var(--c-ink-3); line-height: 1.3; }
.node__stars { font-size: 12px; letter-spacing: 1px; color: var(--c-gold); }
.node--locked { opacity: 0.62; cursor: default; filter: grayscale(0.35); }
.node--locked:hover { transform: none; }
.node--next { border-color: var(--c-teal); box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.2), var(--sh-1); }
.node__lock { position: absolute; top: 8px; right: 10px; font-size: 14px; }
.node--next .node__icon { animation: breathe 2.6s var(--ease) infinite; }

/* ---------------- 关卡屏 ---------------- */
.levelwrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .levelwrap { grid-template-columns: 1fr; } }

/* position:relative 是"星星迸射"的定位父级 */
.qcard { padding: 18px; position: relative; overflow: visible; }

/* ---------------- 即时反馈：庆祝与连击 ---------------- */
.spark {
  position: absolute;
  left: 50%;
  top: 28%;
  font-size: 22px;
  pointer-events: none;
  z-index: 5;
  animation: spark-up 0.9s var(--ease) forwards;
}
@keyframes spark-up {
  0% { transform: translate(-50%, 0) scale(0.5); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx, 0px)), -78px) scale(1.2) rotate(var(--rot, 24deg));
    opacity: 0;
  }
}

.combo {
  position: fixed;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
  padding: 9px 22px;
  border-radius: var(--r-pill);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #ffb84d, var(--c-primary));
  box-shadow: 0 12px 28px rgba(255, 140, 66, 0.45);
  animation: pop 0.38s var(--ease) both;
}
.progress-text { font-size: 13px; color: var(--c-ink-2); white-space: nowrap; }
.qcard__kp { font-size: 12.5px; color: var(--c-ink-2); margin-bottom: 6px; }
.qtext { font-size: 26px; font-weight: 700; letter-spacing: 0.5px; }
.qtext--small { font-size: 19px; }
.qvisual { font-size: 30px; letter-spacing: 6px; margin: 10px 0; }

.progressdots { display: flex; gap: 6px; flex-wrap: wrap; }
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(45, 52, 54, 0.16);
  transition: all var(--dur) var(--ease);
}
.dot--done { background: var(--c-ok); }
.dot--now { background: var(--c-primary); transform: scale(1.35); }

.timerbar { height: 7px; border-radius: var(--r-pill); background: rgba(45, 52, 54, 0.1); overflow: hidden; }
.timerbar__fill { height: 100%; background: linear-gradient(90deg, var(--c-teal), var(--c-purple)); width: 100%;
  transition: width 1s linear; }

/* 备选答案按钮（输入题的选项串 / 无场景时的兜底） */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt {
  font-family: inherit; font-size: 20px; font-weight: 700; color: var(--c-ink);
  padding: 16px 12px; border-radius: var(--r-md); cursor: pointer;
  background: #fff; border: 2px solid rgba(45, 52, 54, 0.08); box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.opt:hover { transform: translateY(-2px); border-color: var(--c-teal); }
.opt.is-drop { opacity: 0.4; text-decoration: line-through; cursor: default; }
.opt.is-drop:hover { transform: none; border-color: rgba(45, 52, 54, 0.08); }
.opt.is-correct { border-color: var(--c-ok); background: #eafaf0; animation: lit 0.9s var(--ease) 1; }
.opt.is-picked { border-color: var(--c-primary); background: #fff2e8; }

/* 数字键盘（输入题） */
/* ⚠️ 必须显式指定 color：.world 的文字色是白色，而这里是白底，
   不写就会"白字白底"，孩子敲了数字却看不见，以为键盘坏了（真实事故）。 */
.keydisplay {
  font-size: 30px; font-weight: 700; text-align: center; letter-spacing: 2px;
  min-height: 48px; padding: 8px; border-radius: var(--r-md);
  background: #fff; border: 2px dashed rgba(45, 52, 54, 0.14);
  margin-bottom: 12px; color: var(--c-ink);
  transition: border-color var(--dur) var(--ease);
}
.keydisplay:not(.is-blank) { border-color: var(--c-primary); border-style: solid; }
.keydisplay.is-blank { color: #c3ccd6; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.key {
  font-family: inherit; font-size: 20px; font-weight: 700; color: var(--c-ink);
  padding: 13px 0; border-radius: var(--r-md); cursor: pointer;
  background: #fff; border: 1.5px solid rgba(45, 52, 54, 0.08); box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.key:hover { transform: translateY(-2px); background: #fffaf3; }
.key--ok { background: linear-gradient(180deg, #7ee2a8, var(--c-ok)); color: #fff; }
.key--del { background: #fff0f0; color: var(--c-warn); }

/* 提示 / 反馈 */
.hintbox {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md);
  background: linear-gradient(180deg, #fff8e6, #fff1cf);
  border-left: 5px solid var(--c-gold); font-size: 15px; color: #6b5300;
}
.hintbox__title { font-weight: 700; margin-bottom: 3px; }
.feedback {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); font-weight: 600;
  animation: pop var(--dur-slow) var(--ease) both;
}
.feedback--ok { background: #eafaf0; color: #147a45; border-left: 5px solid var(--c-ok); }
.feedback--hint { background: #f2f5ff; color: #3b3fa6; border-left: 5px solid var(--c-purple); }

/* ---------------- 结算屏 ---------------- */
.starbig { font-size: 52px; letter-spacing: 6px; color: var(--c-gold); }
.starbig .off { opacity: 0.22; }
.result-hero { text-align: center; padding: 8px 0 4px; }
.change-item, .ach-item, .diary-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md);
  background: #fff; box-shadow: var(--sh-1); margin-bottom: 8px;
}
.change-item .ico { font-size: 20px; }
.choose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
@media (max-width: 640px) { .choose-grid { grid-template-columns: 1fr; } }

.petgrow { display: flex; align-items: center; gap: 14px; }
.petgrow__egg { font-size: 40px; }
.petgrow__bar { flex: 1; height: 12px; border-radius: var(--r-pill); background: rgba(45,52,54,.1); overflow: hidden; }
.petgrow__bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-gold), var(--c-primary)); }

/* ---------------- 成长册 ---------------- */
.kpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.kpchip {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 9px 11px; border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-1); font-size: 13px;
}
.kpchip.is-lit { background: linear-gradient(180deg, #fff6dd, #ffeec2); }

/* ---------------- 单词卡收集册 ----------------
   已收集 = 彩色词卡（可点读）；未收集 = 灰色问号占位，形成"集齐"的期待感。 */
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
.wcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 62px; padding: 8px 6px;
  border: none; border-radius: var(--r-md);
  background: linear-gradient(180deg, #fff, #eef7ff);
  box-shadow: var(--sh-1); cursor: pointer;
  font-family: inherit; color: var(--c-ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wcard b { font-size: 16px; font-weight: 800; letter-spacing: 0.02em; }
.wcard:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.wcard--new { background: linear-gradient(180deg, #fff, #fff6dd); outline: 2px solid var(--c-gold); }
.wcard--blank {
  background: rgba(45, 52, 54, 0.05);
  color: var(--c-ink-3);
  font-size: 20px; font-weight: 800;
  cursor: default; box-shadow: none;
}
.wcard--blank:hover { transform: none; box-shadow: none; }
.big-num { font-size: 26px; font-weight: 800; color: var(--c-primary); }
.bar { height: 10px; border-radius: var(--r-pill); background: rgba(45, 52, 54, 0.1); overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-teal), var(--c-primary)); }
.achwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ach {
  text-align: center; padding: 14px 8px; border-radius: var(--r-md);
  background: #fff; box-shadow: var(--sh-1); opacity: 0.45; filter: grayscale(0.6);
}
.ach.is-got { opacity: 1; filter: none; background: linear-gradient(180deg, #fff, #fff3d9); }
.ach .ico { font-size: 30px; }
.ach .nm { font-size: 13px; font-weight: 600; }
.ach .dc { font-size: 11px; color: var(--c-ink-3); }

/* ---------------- 家长屏 ---------------- */
.reportgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat {
  padding: 16px; border-radius: var(--r-md); background: #fff; box-shadow: var(--sh-1); text-align: center;
}
.stat__num { font-size: 30px; font-weight: 700; color: var(--c-purple); }
.stat__label { font-size: 13px; color: var(--c-ink-2); }

/* 护眼浮层 */
.eyecare {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(20, 30, 40, 0.55); backdrop-filter: blur(4px);
}
.eyecare__box {
  background: #fff; border-radius: var(--r-xl); padding: 26px 30px; text-align: center; box-shadow: var(--sh-2);
  max-width: 380px; animation: pop var(--dur-slow) var(--ease) both;
}