/* ============ 全局 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  background: linear-gradient(160deg, #ffe9f0 0%, #e3f2ff 100%);
  touch-action: manipulation;
}
#app { width: 100vw; height: 100vh; position: relative; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; }
.screen.active { display: flex; animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* ============ 顶部条 ============ */
.topbar { position: absolute; top: 0; left: 0; right: 0; height: 12vh; min-height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 3vw; z-index: 50; }
.icon-btn { width: 11vh; height: 11vh; min-width: 56px; min-height: 56px; max-width: 84px; max-height: 84px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.12); font-size: 5vh; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .1s; }
.icon-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }

/* ============ 主界面 ============ */
#home { padding: max(72px, 12vh) 2vw 2vh; }
#home h1 { font-size: clamp(32px, 7vh, 76px); color: #ff6f91; text-shadow: 3px 3px 0 #fff; margin-bottom: 3vh; letter-spacing: 4px; }
/* 8 个游戏在宽屏排 4 列、窄屏排 3 列，避免旧版 2 列必须滚动；
   卡片高度随屏幕而不是宽度增长，横屏和短屏也能完整显示。保留滚动作为以后新增游戏的兜底。 */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); width: 92vw; max-width: 960px; max-height: 72vh; overflow-y: auto; padding: 1vh 4px 12px; align-content: start; }
.card { min-width: 0; height: clamp(80px, 17vh, 160px); border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 7px 0 rgba(0,0,0,.15); transition: transform .12s; color: #fff; }
.card:active { transform: translateY(4px) scale(.98); box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.card .emoji { font-size: clamp(36px, 6.5vh, 72px); line-height: 1.1; }
.card .label { font-size: clamp(14px, 2.4vh, 24px); line-height: 1.2; font-weight: bold; margin-top: .5vh; text-align: center; text-shadow: 2px 2px 0 rgba(0,0,0,.2); }
.empty-tip { grid-column: 1 / -1; text-align: center; font-size: 3vh; color: #999; line-height: 1.6; }
@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card { height: clamp(72px, 14vh, 130px); border-radius: 18px; }
  .card .emoji { font-size: clamp(30px, 5.5vh, 48px); }
  .card .label { font-size: clamp(12px, 2.2vh, 18px); }
}
@media (max-height: 500px) and (orientation: landscape) {
  #home { padding-top: max(64px, 12vh); padding-bottom: 1vh; }
  #home h1 { font-size: clamp(24px, 7vh, 40px); margin-bottom: 1vh; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .card { height: clamp(54px, 22vh, 86px); border-radius: 14px; }
  .card .emoji { font-size: clamp(24px, 8vh, 40px); }
  .card .label { font-size: clamp(12px, 3.5vh, 18px); }
}

/* ============ 游戏通用 ============ */
.game-title { position: absolute; top: 13vh; font-size: 4.5vh; color: #555; font-weight: bold; text-align: center; width: 100%; padding: 0 4vw; }
.stage { width: 92vw; max-width: 900px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* 颜色配对 */
.color-homes { display: flex; justify-content: center; gap: 4vw; margin-top: 2vh; }
.home-slot { width: 22vw; max-width: 160px; height: 22vw; max-height: 160px; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 8vh; border: 6px dashed rgba(255,255,255,.7); box-shadow: inset 0 0 0 4px rgba(0,0,0,.05); transition: transform .15s; }
.home-slot.over { transform: scale(1.12); }
.animal-tray { margin-top: 5vh; display: flex; justify-content: center; gap: 4vw; min-height: 20vh; align-items: center; }
.animal { width: 18vw; max-width: 130px; height: 18vw; max-height: 130px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8vh; cursor: grab; box-shadow: 0 6px 0 rgba(0,0,0,.15); touch-action: none; }
.animal.dragging { opacity: .6; z-index: 100; }

/* 找规律 */
.seq { display: flex; align-items: center; justify-content: center; gap: 3vw; margin-top: 3vh; flex-wrap: wrap; }
.seq-item { width: 15vw; max-width: 110px; height: 15vw; max-height: 110px; border-radius: 22px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 7vh; box-shadow: 0 6px 0 rgba(0,0,0,.1); }
.seq-q { background: #fff3c4; border: 5px dashed #f6a04d; }

/* 选项通用（找规律用） */
.options { display: flex; justify-content: center; gap: 4vw; margin-top: 6vh; flex-wrap: wrap; }
.opt { width: 20vw; max-width: 140px; height: 20vw; max-height: 140px; border-radius: 24px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 8vh; cursor: pointer; box-shadow: 0 8px 0 rgba(0,0,0,.12); transition: transform .1s; }
.opt:active { transform: translateY(5px); box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.opt.wrong { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

/* 找不同 */
.spot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5vw; padding: 2vw; background: #fff; border-radius: 24px; box-shadow: 0 8px 0 rgba(0,0,0,.1); margin-top: 2vh; }
.spot-cell { width: 12vw; max-width: 90px; height: 12vw; max-height: 90px; display: flex; align-items: center; justify-content: center; font-size: 6vh; cursor: pointer; border-radius: 14px; transition: transform .15s; }
.spot-cell.found { background: #b9f6ca; animation: pop .4s; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* 情绪认知 / 好习惯 */
.habit-scene { font-size: 22vh; margin: 2vh 0; transition: transform .3s; }
.habit-actions { display: flex; gap: 4vw; flex-wrap: wrap; justify-content: center; }
.habit-btn { padding: 3vh 5vw; border: none; border-radius: 28px; background: #fff; font-size: 8vh; cursor: pointer; box-shadow: 0 8px 0 rgba(0,0,0,.12); }
.habit-btn:active { transform: translateY(5px); box-shadow: 0 3px 0 rgba(0,0,0,.12); }

/* ============ 多关卡进度（api.rounds 生成） ============ */
.rounds { display: flex; flex-direction: column; align-items: center; width: 100%; }
.rounds-dots { display: flex; gap: 1.5vw; margin-bottom: 2.5vh; }
.rounds-dot { width: 2.6vh; min-width: 12px; height: 2.6vh; min-height: 12px; border-radius: 50%; background: #e0e0e8; transition: background .25s, transform .25s; }
.rounds-dot.done { background: #6bcB77; transform: scale(1.15); }
.rounds-host { display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 40vh; justify-content: center; }

/* 翻牌配对 */
.mm-grid { display: grid; gap: 2vw; padding: 2vw; background: #fff; border-radius: 28px; box-shadow: 0 8px 0 rgba(0,0,0,.08); }
.mm-card { width: 16vw; max-width: 110px; height: 16vw; max-height: 110px; perspective: 600px; cursor: pointer; }
.mm-inner { position: relative; width: 100%; height: 100%; transition: transform .4s; transform-style: preserve-3d; }
.mm-card.open .mm-inner, .mm-card.matched .mm-inner { transform: rotateY(180deg); }
.mm-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 7vh; border-radius: 18px; backface-visibility: hidden; box-shadow: 0 5px 0 rgba(0,0,0,.12); }
.mm-back { background: linear-gradient(135deg,#a1c4fd,#6a9dfd); }
.mm-front { background: #fff; transform: rotateY(180deg); }
.mm-card.matched .mm-front { background: #d3f9d8; box-shadow: 0 5px 0 #96e6a1; }

/* 影子配对 */
.sh-homes { display: flex; justify-content: center; gap: 3vw; flex-wrap: wrap; }
.sh-slot { width: 18vw; max-width: 130px; height: 18vw; max-height: 130px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ececf1; border: 5px dashed #c9c9d2; transition: transform .15s, background .2s; }
.sh-slot.over { transform: scale(1.12); border-color: #6a9dfd; }
.sh-slot.done { background: #d3f9d8; border-style: solid; border-color: #96e6a1; }
.sh-shadow { font-size: 8vh; filter: brightness(0) opacity(.75); }
.sh-shadow.lit { filter: none; }
.sh-tray { margin-top: 6vh; display: flex; justify-content: center; gap: 4vw; flex-wrap: wrap; min-height: 20vh; align-items: center; }
.sh-animal { width: 17vw; max-width: 120px; height: 17vw; max-height: 120px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 8vh; cursor: grab; box-shadow: 0 6px 0 rgba(0,0,0,.12); touch-action: none; }
.sh-animal.dragging { opacity: .6; z-index: 100; }

/* 听指令 */
.ld-cue { display: flex; align-items: center; justify-content: center; gap: 2vw; margin-bottom: 4vh; min-height: 12vh; flex-wrap: wrap; }
.ld-ear { font-size: 12vh; animation: ldPulse 1.2s ease-in-out infinite; }
@keyframes ldPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.ld-hint { font-size: 3.4vh; color: #999; }
.ld-chip { width: 11vw; max-width: 80px; height: 11vw; max-height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 0 rgba(0,0,0,.12); }
.ld-chip-e { font-size: 6vh; }
.ld-arrow { font-size: 4vh; color: #bbb; }
.ld-row { display: flex; justify-content: center; gap: 3vw; flex-wrap: wrap; }
.ld-item { width: 20vw; max-width: 150px; height: 20vw; max-height: 150px; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 0 rgba(0,0,0,.12); transition: transform .12s; }
.ld-item:active { transform: translateY(5px); box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.ld-item-e { font-size: 9vh; }
.ld-item-name { font-size: 2.6vh; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.25); }
.ld-item.done { box-shadow: 0 0 0 6px #6bcB77, 0 8px 0 #4fd68a; transform: scale(.94); }
.ld-item.wrong { animation: shake .4s; }
.ld-prog { display: flex; gap: 1.5vw; margin-top: 4vh; }
.ld-step { width: 3vh; min-width: 14px; height: 3vh; min-height: 14px; border-radius: 50%; background: #e0e0e8; transition: background .25s; }
.ld-step.done { background: #6bcB77; }

/* ============ 贴纸墙 ============ */
.wall-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2vw; margin: 2vh 0 3vh; }
.wall-cell { aspect-ratio: 1/1; border-radius: 18px; background: #f2f2f7; display: flex; align-items: center; justify-content: center; font-size: 5.5vh; opacity: .35; }
.wall-cell.got { background: #fff3c4; opacity: 1; box-shadow: 0 4px 0 rgba(0,0,0,.08); }

/* ============ 奖励 ============ */#reward { position: absolute; inset: 0; background: rgba(0,0,0,.4); display: none; align-items: center; justify-content: center; z-index: 200; }
#reward.show { display: flex; }
.reward-box { background: #fff; border-radius: 40px; padding: 6vh 8vw; text-align: center; animation: bounceIn .5s; }
@keyframes bounceIn { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.reward-box .star { font-size: 14vh; }
.reward-box .txt { font-size: 5vh; color: #ff6f91; font-weight: bold; margin-top: 2vh; }
.confetti { position: absolute; font-size: 4vh; pointer-events: none; z-index: 210; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); opacity: 0; } }

/* ============ 弹层通用 ============ */
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 300; }
.overlay.show { display: flex; }
.panel { background: #fff; border-radius: 28px; padding: 5vh 6vw; text-align: center; max-width: 92vw; width: 460px; max-height: 90vh; overflow-y: auto; }
.panel h2 { font-size: 4vh; color: #555; margin-bottom: 2vh; }
.panel p { font-size: 2.6vh; color: #888; margin-bottom: 1.5vh; line-height: 1.5; }
.math-q { font-size: 6vh; color: #333; margin: 2vh 0; font-weight: bold; }
.panel input[type=number] { font-size: 5vh; width: 60%; text-align: center; padding: 1vh; border: 3px solid #ddd; border-radius: 16px; }
.panel button.big { margin-top: 2vh; padding: 2vh 6vw; font-size: 3.5vh; border: none; border-radius: 20px; background: #6a9dfd; color: #fff; cursor: pointer; box-shadow: 0 5px 0 #4a7de0; }
.panel button.big:active { transform: translateY(3px); box-shadow: 0 2px 0 #4a7de0; }

/* 时长 / 年龄选择 */
.time-opts, .age-opts { display: flex; gap: 3vw; justify-content: center; flex-wrap: wrap; margin: 1.5vh 0; }
.time-opt, .age-opt { padding: 1.6vh 4vw; border: 3px solid #ddd; border-radius: 18px; font-size: 3vh; cursor: pointer; }
.time-opt.sel, .age-opt.sel { border-color: #6a9dfd; background: #e3f0ff; color: #4a7de0; font-weight: bold; }

/* 游戏开关列表 */
.toggle-list { text-align: left; margin: 1.5vh 0; max-height: 30vh; overflow-y: auto; border: 1px solid #eee; border-radius: 16px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 1.6vh 4vw; border-bottom: 1px solid #f0f0f0; }
.toggle-row:last-child { border-bottom: none; }
.toggle-row .name { font-size: 3vh; color: #555; display: flex; align-items: center; gap: 3vw; }
.toggle-row .ticon { font-size: 4vh; }
.switch { position: relative; width: 64px; height: 34px; flex-shrink: 0; }
.switch input { display: none; }
.slider { position: absolute; inset: 0; background: #ccc; border-radius: 34px; transition: .2s; cursor: pointer; }
.slider:before { content: ""; position: absolute; width: 26px; height: 26px; left: 4px; top: 4px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: #6bcB77; }
.switch input:checked + .slider:before { transform: translateX(30px); }
.row-inline { display: flex; align-items: center; justify-content: center; gap: 3vw; margin: 1.5vh 0; }

/* ============ 时间到锁定 ============ */
#timeup { position: absolute; inset: 0; background: rgba(20,20,40,.92); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 400; color: #fff; }
#timeup.show { display: flex; }
#timeup .moon { font-size: 20vh; animation: sway 3s ease-in-out infinite; cursor: pointer; }
@keyframes sway { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
#timeup .msg { font-size: 5vh; margin-top: 3vh; text-align: center; }
#timeup .sub { font-size: 3vh; margin-top: 2vh; opacity: .7; }