/* ============ 奇妙闯关乐园 · 样式 ============ */
:root{
  --ink:#4a3b6b; --ink-soft:#7a6ca0;
  --card:#ffffff; --card-soft:#fdf7ff;
  --a1:#ff7ba9; --a2:#ffb84d; --a3:#59c2ff; --a4:#7ddc9e; --a5:#b48cff;
  --shadow: 0 10px 24px rgba(90,70,160,.16);
  --r-lg: 26px; --r-md: 20px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  margin:0; overflow-x:hidden;
  font-family: ui-rounded, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 12% -8%, #ffe6f1 0%, transparent 55%),
    radial-gradient(110% 80% at 88% -10%, #e2f3ff 0%, transparent 55%),
    linear-gradient(180deg, #cfeaff 0%, #eaf6ff 45%, #fff6e8 100%);
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}

/* ---------- HUD ---------- */
.hud{ position:fixed; top:10px; right:12px; z-index:50; display:flex; gap:8px; align-items:center; }
.stars{ background:#fff; border-radius:999px; padding:8px 16px; font-size:20px; font-weight:800; box-shadow:var(--shadow); color:#b8860b; }
.stars.bump{ animation:bump .5s; }
@keyframes bump{ 40%{ transform:scale(1.35) rotate(-6deg); } }
.hu-btn{ background:#fff; border:0; border-radius:999px; width:44px; height:44px; font-size:20px; cursor:pointer; box-shadow:var(--shadow); }
.hu-btn:active{ transform:scale(.92); }

/* ---------- 舞台 ---------- */
.stage{ min-height:100dvh; padding:78px 14px 128px; max-width:1000px; margin:0 auto; }
.stage > *{ animation:sceneIn .35s ease-out both; }
@keyframes sceneIn{ from{ opacity:0; transform:translateY(16px); } }

/* ---------- 底部语音气泡 ---------- */
.prompt{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:60; max-width:min(92vw, 720px);
  background:#fff; border-radius:22px; padding:14px 22px;
  font-size:clamp(17px, 2.4vw, 22px); font-weight:700; text-align:center;
  box-shadow:var(--shadow); border:2px solid #ffe3f0;
}
.prompt::before{
  content:'🐼'; position:absolute; left:-14px; top:-30px; font-size:44px;
  transform:rotate(-8deg); filter:drop-shadow(0 4px 6px rgba(0,0,0,.12));
}
.prompt.pop{ animation:promptPop .35s; }
@keyframes promptPop{ 40%{ transform:translateX(-50%) scale(1.06); } }

/* ---------- 首页 ---------- */
.home-hero{ text-align:center; margin:6px 0 18px; }
.home-hero .panda{ font-size:76px; display:inline-block; animation:floaty 3s ease-in-out infinite; filter:drop-shadow(0 6px 8px rgba(0,0,0,.08)); }
@keyframes floaty{ 50%{ transform:translateY(-10px) rotate(-4deg); } }
.home-hero h1{ margin:6px 0 4px; font-size:clamp(26px, 4.5vw, 38px); letter-spacing:1px; }
.home-hero p{ margin:0; color:var(--ink-soft); font-size:clamp(14px,2vw,17px); font-weight:600; }

.level-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; }
.level-card{
  position:relative; border:0; cursor:pointer; text-align:center;
  background:linear-gradient(180deg, #ffffff, var(--card-soft));
  border-radius:var(--r-lg); padding:18px 10px 14px; box-shadow:var(--shadow);
  transition:transform .18s; font-family:inherit;
}
.level-card:hover{ transform:translateY(-4px) rotate(-1deg); }
.level-card:active{ transform:scale(.95); }
.level-card .icon{ font-size:46px; display:block; margin-bottom:6px; }
.level-card .name{ font-size:17px; font-weight:800; }
.level-card .desc{ font-size:12px; color:var(--ink-soft); margin-top:3px; font-weight:600; }
.level-card .done{ position:absolute; top:8px; right:10px; font-size:18px; }
.level-card.c1{ background:linear-gradient(180deg,#fff,#ffeaf1); } .level-card.c2{ background:linear-gradient(180deg,#fff,#fff3dd); }
.level-card.c3{ background:linear-gradient(180deg,#fff,#e5f3ff); } .level-card.c4{ background:linear-gradient(180deg,#fff,#eaffe9); }
.level-card.c5{ background:linear-gradient(180deg,#fff,#f1e9ff); } .level-card.c6{ background:linear-gradient(180deg,#fff,#e9f8ff); }
.home-crown{ text-align:center; font-size:30px; font-weight:900; margin-top:16px; color:#c9962b; }

/* ---------- 游戏页头部 ---------- */
.gamehead{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.back{ width:52px; height:52px; border-radius:50%; border:0; background:#fff; font-size:24px; cursor:pointer; box-shadow:var(--shadow); flex:0 0 auto; }
.back:active{ transform:scale(.9); }
.gtitle{ flex:1; font-size:clamp(18px, 3vw, 24px); font-weight:900; }
.rounds{ display:flex; gap:6px; }
.rounds i{ width:14px; height:14px; border-radius:50%; background:#e4dbf5; display:block; transition:.3s; }
.rounds i.on{ background:linear-gradient(135deg, var(--a1), var(--a5)); transform:scale(1.15); }

/* ---------- 通用棋盘/按钮 ---------- */
.board{ display:flex; flex-direction:column; align-items:center; gap:18px; min-height:52dvh; justify-content:center; }
.opt{
  border:3px solid transparent; border-radius:var(--r-md); background:#fff; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .15s, border-color .15s; font-family:inherit; color:inherit;
}
.opt:active{ transform:scale(.93); }
.opt.sel{ border-color:var(--a5); transform:translateY(-6px) scale(1.04); }
.opt .emoji{ font-size:56px; line-height:1; display:block; }

.row{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.shake{ animation:shake .4s; }
@keyframes shake{ 20%,60%{ transform:translateX(-7px);} 40%,80%{ transform:translateX(7px);} }
.popin{ animation:popin .35s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes popin{ from{ transform:scale(.3); opacity:0; } }
.bounce{ animation:bounceA .5s; }
@keyframes bounceA{ 40%{ transform:translateY(-16px) scale(1.1);} }
.cheer{ animation:cheer .5s; }
@keyframes cheer{ 30%{ transform:rotate(-12deg) scale(1.15);} 70%{ transform:rotate(10deg) scale(1.15);} }
.gone{ transition:.4s; opacity:0; transform:scale(.4); }

/* ---------- 形状 ---------- */
.shapebox{ width:92px; height:92px; display:grid; place-items:center; padding:12px; }
.shapebox svg{ width:100%; height:100%; }
.hole svg{ fill:none; stroke:#9b8cf0; stroke-width:8; stroke-dasharray:12 10; stroke-linecap:round; }
.ball svg{ fill:url(#none); }
.ball.circle{ color:#ff7ba9; } .ball.square{ color:#59c2ff; } .ball.triangle{ color:#ffb84d; } .ball.star{ color:#b48cff; }
.shapebox.filled svg{ fill:currentColor; stroke:none; stroke-dasharray:none; animation:popin .4s; }

/* ---------- 颜色 ---------- */
.flower{ width:110px; height:110px; display:grid; place-items:center; padding:10px; }
.flower svg{ width:100%; height:100%; }

/* ---------- 数一数 ---------- */
.grass{ position:relative; width:min(92vw,560px); height:300px; background:linear-gradient(180deg,#dff3ff, #d8f5e3); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; }
.grass::after{ content:''; position:absolute; inset:auto 0 0 0; height:64px; background:radial-gradient(60% 100% at 50% 100%, #a4e3b8 0%, transparent 120%); }
.apple{ position:absolute; font-size:52px; cursor:pointer; filter:drop-shadow(0 4px 4px rgba(0,0,0,.15)); transition:transform .2s; z-index:2; }
.apple:active{ transform:scale(1.2); }
.apple.counted{ opacity:.35; }
.apple.counted::after{ content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:#2f9e5c; font-size:30px; font-weight:900; }
.numbers{ display:flex; gap:18px; }
.num-btn{ width:84px; height:84px; font-size:44px; font-weight:900; display:grid; place-items:center; color:var(--ink); }

/* ---------- 记得我还 (Simon) ---------- */
.pets{ display:flex; gap:18px; }
.pet{ width:118px; height:118px; font-size:64px; display:grid; place-items:center; border-radius:28px; }
.pet.hot{ animation:bounceA .45s; box-shadow:0 0 0 6px #ffe08a inset; }
.pet.wrong{ background:#ffe5e5; }

/* ---------- 找影子 ---------- */
.qcard{ width:120px; height:120px; display:grid; place-items:center; font-size:66px; background:#fff; border-radius:24px; box-shadow:var(--shadow); }
.shadow-card{ filter:brightness(0.06) opacity(.82); }
.answer-card{ font-size:62px; width:96px; height:96px; padding:6px; }

/* ---------- 拼图 ---------- */
.puzzle{ position:relative; width:min(88vw, 420px); aspect-ratio:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:8px; }
.tile{ overflow:hidden; border-radius:14px; box-shadow:var(--shadow); cursor:pointer; background:#fff; position:relative; border:0; padding:0; }
.tile.sel{ outline:5px solid var(--a5); z-index:2; }
.scene{ position:absolute; width:300%; height:300%; }

/* ---------- 彩带画布 ---------- */
#fx{ position:fixed; inset:0; pointer-events:none; z-index:100; }

@media (max-width:520px){
  .stage{ padding:70px 10px 120px; }
  .pet{ width:96px; height:96px; font-size:50px; }
  .flower{ width:92px; height:92px; }
  .qcard{ width:96px; height:96px; font-size:52px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01s !important; }
}

/* ---------- 声音测试按钮 ---------- */
.soundtest{
  display:block; margin:18px auto 0; border:0; cursor:pointer;
  background:linear-gradient(135deg,#fff,#f2ecff); color:var(--ink);
  border-radius:999px; padding:12px 26px; font-size:16px; font-weight:800;
  box-shadow:var(--shadow); font-family:inherit;
}
.soundtest:active{ transform:scale(.94); }

/* ---------- 迷宫 ---------- */
.maze{
  display:grid; gap:3px; padding:10px;
  background:linear-gradient(180deg,#fff,#fff7ea);
  border-radius:20px; box-shadow:var(--shadow);
}
.mwall{ background:linear-gradient(180deg,#c9bfe8,#b3a5dd); border-radius:26%; box-shadow:inset 0 -3px 0 rgba(0,0,0,.08); }
.mcell{ background:#f3efff; border-radius:26%; border:0; display:grid; place-items:center; padding:0; cursor:default; }
.mcell.lit{ background:linear-gradient(180deg,#ffe9a8,#ffd76e); cursor:pointer; animation:pulseLit 1.2s infinite; box-shadow:0 3px 8px rgba(255,170,60,.35); }
.mcell.lit:active{ transform:scale(.9); }
.mcell .cellmoji{ line-height:1; }
@keyframes pulseLit{ 50%{ filter:brightness(1.12); } }
.numbers .num-btn.cheer{ transform:scale(1.12); }