/* ==========================================================================
   worlds.css · 世界场景与可点物体
   通用渲染器把 SCENES 的 objs emoji + 候选答案渲染成"点正确物体"的玩法；
   开宝箱 treasure 是独立的互动挑战模式。
   ========================================================================== */
.world {
  position: relative;
  border-radius: var(--r-lg);
  padding: 18px 16px 20px;
  min-height: 260px;
  overflow: hidden;
  color: #fff;
  box-shadow: var(--sh-2);
  transition: background var(--dur-slow) var(--ease);
}
.world__deco {
  position: absolute; top: 10px; left: 14px; font-size: 20px; letter-spacing: 6px; opacity: 0.75;
}
.world__name { text-align: center; font-weight: 700; font-size: 16px; opacity: 0.95; margin-bottom: 2px; }
.world__pick { text-align: center; font-size: 13px; opacity: 0.82; margin-bottom: 14px; }

/* 场景底色 */
.scene-castle { background: linear-gradient(165deg, #55627a, var(--scene-castle)); }
.scene-forest { background: linear-gradient(165deg, #618a67, var(--scene-forest)); }
.scene-funfair { background: linear-gradient(165deg, #8a618a, var(--scene-funfair)); }
.scene-compass { background: linear-gradient(165deg, #4f7291, var(--scene-compass)); }
.scene-mine { background: linear-gradient(165deg, #6a5a44, var(--scene-mine)); }
.scene-cake { background: linear-gradient(165deg, #8a676b, var(--scene-cake)); }
.scene-shape { background: linear-gradient(165deg, #5a6890, var(--scene-shape)); }
.scene-snow { background: linear-gradient(165deg, #6f8aa4, var(--scene-snow)); }
.scene-town { background: linear-gradient(165deg, #7d7057, var(--scene-town)); }
.scene-shop { background: linear-gradient(165deg, #7a6540, var(--scene-shop)); }
.scene-treasure { background: linear-gradient(165deg, #7a5a2e, #4a3b22); }

/* 可点物体 */
.objs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: stretch; }
.obj {
  min-width: 92px;
  padding: 12px 10px 10px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-ink);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.obj:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24); }
.obj__emoji { font-size: 32px; line-height: 1; }
.obj__label { font-size: 17px; font-weight: 700; }
.obj__label--small { font-size: 13px; font-weight: 600; }

/* 物体状态 */
.obj.is-wrong { opacity: 0.5; }
.obj.is-wrong .obj__emoji { animation: shake-soft 0.5s var(--ease) 1; }
.obj.is-wrong::after { content: "已开过"; font-size: 11px; color: var(--c-ink-3); }
.obj.is-picked { box-shadow: 0 0 0 4px rgba(255, 140, 66, 0.6), 0 12px 26px rgba(0,0,0,.24); }
.obj.is-correct { background: linear-gradient(180deg, #d6ffe8, #aef0cb); box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.55); }
.obj.is-correct .obj__emoji { animation: pop var(--dur-slow) var(--ease) both; }
.obj.is-drop { opacity: 0.32; text-decoration: line-through; cursor: default; }
.obj.is-drop:hover { transform: none; }

/* 开宝箱专属 */
.treasure { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }
.chest {
  padding: 14px 10px; border-radius: var(--r-md);
  background: linear-gradient(180deg, #fff4d6, #ffe3a8);
  color: #6b4e12; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.chest:hover { transform: translateY(-4px); }
.chest__emoji { font-size: 34px; }
.chest__label { font-size: 17px; font-weight: 700; }
.chest.is-open { background: linear-gradient(180deg, #d6ffe8, #aef0cb); color: #16543a; }
.chest.is-open .chest__emoji { animation: pop var(--dur-slow) var(--ease) both; }
.chest.is-empty { background: #e9e6df; color: #9aa0a6; opacity: 0.85; }
.chest.is-empty .chest__emoji { animation: shake-soft 0.5s var(--ease) 1; }
.chest.is-empty::after { content: "空空如也"; font-size: 11px; }
.chest.is-nudge .chest__emoji { animation: shake-soft 0.5s var(--ease) 1; }

/* ==========================================================================
   新增玩法：排序（语文句序 / 英语语序 / 科学实验步骤）
   ========================================================================== */
/* 已排好的句子区：白底 + 深色字（.world 的文字色是白色，这里必须显式覆盖） */
.orderbuild {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 54px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: var(--r-md);
  background: #fff;
  color: var(--c-ink);
  border: 2px dashed rgba(45, 52, 54, 0.14);
}
.orderbuild:not(:empty) { border-style: solid; }
.orderstep { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.orderstep i {
  font-style: normal; font-size: 11px; line-height: 1;
  width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #2ecc71; color: #fff;
}
.ordergap { color: #c3ccd6; font-weight: 700; }
.orderpool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ordertoken {
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-ink);
  background: #fff;
  border: none;
  border-radius: var(--r-sm, 10px);
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.ordertoken:hover { transform: translateY(-2px); }
.ordertoken.is-picked { opacity: 0.35; box-shadow: none; transform: none; }
.ordertoken.is-correct { outline: 3px solid #2ecc71; }

/* 多选：选中态用勾选框表示，不依赖颜色 */
.obj.is-picked { transform: translateY(-2px); box-shadow: var(--sh-2); }
.obj.is-correct { outline: 3px solid #2ecc71; }

/* 特别奖励明细（结果页）：金色描边 + 轻入场，强调"这是额外赚到的" */
.bonusbox {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #fff8e1, #fff3cd);
  border: 2px solid #f0c060;
  animation: bonus-in 0.35s var(--ease) 1 both;
}
.bonusbox__t { font-weight: 800; color: #b8860b; margin-bottom: 4px; }
.bonusbox__r { font-size: 13px; color: var(--c-ink); line-height: 1.7; }
@keyframes bonus-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* 金题（宝箱）在题面上的金色提示 */
.world__gold {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; margin-bottom: 8px;
  border-radius: 999px; font-weight: 800; font-size: 13px;
  color: #8a6d00; background: linear-gradient(135deg, #fff3c4, #ffe082);
  box-shadow: 0 2px 0 #e0b84a;
}

/* 新玩法的"确定"按钮（不依赖数字键盘的网格样式） */
.world__cta {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 13px 16px;
  border: none;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #5fd08a, #2ecc71);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.world__cta:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.world__cta:active { transform: translateY(1px); }

/* 题目朗读按钮（语文短文/古诗、英语单词与问句）——用浏览器自带 TTS，无音频素材 */
.speakbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  padding: 8px 15px;
  border: 2px solid #2ecc71;
  border-radius: 999px;
  background: #fff;
  color: var(--c-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.speakbtn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.speakbtn:active { transform: translateY(1px); }

/* 听音选词：靠耳朵做的题，喇叭做大 + 一次"点我"脉冲
   （浏览器可能拦下自动朗读，脉冲就是提醒孩子手动点一下） */
.speakbtn--big {
  padding: 12px 26px;
  font-size: 18px;
  border-width: 3px;
  background: linear-gradient(180deg, #ffffff, #e8fff2);
}
/* 只脉冲 3 次就停：一是别一直晃着分散注意，二是持续动画会让按钮"点不准" */
.speakbtn.is-pulse { animation: speakpulse 1.4s var(--ease) 3; }
@keyframes speakpulse {
  0%, 100% { transform: scale(1); box-shadow: var(--sh-1); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(46, 204, 113, 0.16); }
}

/* ==========================================================================
   英语专属玩法：配对（大小写 / 字母与例词）
   ========================================================================== */
.matchwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.matchcol { display: grid; gap: 8px; align-content: start; }
.mcard {
  position: relative;
  min-height: 48px;
  padding: 10px 12px;
  border: none;
  border-radius: var(--r-md);
  background: #fff;
  color: var(--c-ink);
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* 字母卡用等宽大字，避免 l / I 这类看混 */
.mcard--left { background: linear-gradient(180deg, #ffffff, #eaf6ff); }
.mcard--right { background: linear-gradient(180deg, #ffffff, #fff6e8); }
.mcard:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.mcard.is-sel { outline: 3px solid #5ac8c8; transform: translateY(-2px); }
.mcard.is-linked { outline: 3px solid #2ecc71; }
.mcard.is-correct { outline: 3px solid #2ecc71; background: #eafff2; }
.mcard__tag {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  font-style: normal; font-size: 11px; font-weight: 800;
  color: #fff; background: #2ecc71;
  display: none; align-items: center; justify-content: center;
}
.mcard.is-linked .mcard__tag { display: inline-flex; }

/* ==========================================================================
   英语专属玩法：字母块拼单词
   ========================================================================== */
.spellslot { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.spellpool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.stile {
  width: 44px; height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm, 10px);
  background: #fff; color: var(--c-ink);
  font-family: inherit; font-size: 22px; font-weight: 800; text-transform: lowercase;
  cursor: pointer; box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.stile:hover { transform: translateY(-2px); }
.stile.is-picked { opacity: 0.35; box-shadow: none; }
.stile--empty {
  background: rgba(255, 255, 255, 0.25);
  border: 2px dashed rgba(255, 255, 255, 0.6);
  box-shadow: none; cursor: default;
}
.stile--used { background: #fff; outline: 3px solid #5ac8c8; cursor: default; }
.stile.is-correct { outline: 3px solid #2ecc71; background: #eafff2; }
.world__row { display: flex; gap: 10px; }
.world__row .world__cta { flex: 1; margin-top: 10px; }
.world__cta--ghost { background: rgba(255, 255, 255, 0.22); }

/* ==========================================================================
   英语专属玩法：儿歌接龙（韵律）
   ========================================================================== */
.chantcard {
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.14);
  border: 2px dashed rgba(255, 255, 255, 0.35);
}
.chantline {
  color: #fff; font-size: 17px; font-weight: 700; line-height: 1.5;
  margin-bottom: 4px;
}
.chantline--blank { opacity: 0.55; letter-spacing: 0.22em; margin-bottom: 0; }
.rhymecue {
  font-style: normal;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(240, 192, 96, 0.45);
  box-shadow: inset 0 -2px 0 rgba(240, 192, 96, 0.9);
}

/* 手机上：配对改上下两行（上行大写、下行小写），字母块与卡片加大可点区域 */
@media (max-width: 640px) {
  .matchwrap { grid-template-columns: 1fr; }
  .matchcol { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .mcard { min-height: 52px; font-size: 20px; }
  .stile { width: 42px; height: 48px; }
  .chantline { font-size: 16px; }
}

/* ==========================================================================
   时间规则：强制休息锁定界面 + 地图锁定提示
   ========================================================================== */
/* 全屏锁定：休息期间只看到倒计时，没有题目、没有关卡入口 */
.restlock {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 28%, #2c3e50, #16222e 72%);
}
.restlock__card { max-width: 460px; width: 100%; }
.restlock__eye { font-size: 54px; line-height: 1.1; }
.restlock__clock {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #5fd08a;
  margin: 6px 0 12px;
  font-variant-numeric: tabular-nums;
}
.restlock__bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(45, 52, 54, 0.10);
  overflow: hidden;
}
.restlock__bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5fd08a, #2ecc71);
  transition: width 1s linear;
}
.restlock__actions { margin-top: 14px; display: flex; justify-content: center; }

/* 地图上的锁定说明条（每日用完 / 不在可用时段） */
.lockbanner {
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 5px solid #f0b429;
  background: #fffaf0;
}
.lockbanner__ico { font-size: 26px; }

/* 剩余时间不多时的暖色提醒（不吓人，只是提示） */
.pill.is-low { background: #fff2e0; color: #b26a00; }

.world__msg {
  margin-top: 14px; text-align: center; font-weight: 600; min-height: 22px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}