/* kid.css —— 儿童页共用设计系统：大圆角、大按钮、柔和配色、手机优先 */
:root{
  --bg1:#fff9ef; --bg2:#eaf6ff; --ink:#3d3141; --ink-soft:#7a6b7d;
  --card:#ffffff;
  --pink:#ff93a8; --blue:#7cc4ff; --green:#8fd694; --yellow:#ffd166;
  --purple:#c3a6ff; --orange:#ffb066; --mint:#8ee6d0;
  --radius:30px; --radius-sm:20px;
  --shadow:0 12px 28px rgba(122,107,125,.16);
  --shadow-press:0 4px 10px rgba(122,107,125,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 4%, #ffe6ee 0, transparent 42%),
    radial-gradient(circle at 92% 8%, #e2f3ff 0, transparent 40%),
    radial-gradient(circle at 50% 100%, #e9fff4 0, transparent 45%),
    linear-gradient(165deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
  min-height:100vh; min-height:100dvh;
  padding:12px 12px calc(20px + env(safe-area-inset-bottom));
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
  overscroll-behavior-y:contain;
}

/* ---------- 顶栏 ---------- */
.kbar{
  display:flex;align-items:center;gap:10px;
  margin:2px 2px 14px;
}
.kbar .back{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;flex:0 0 52px;
  border-radius:50%;background:#fff;box-shadow:var(--shadow);
  font-size:24px;text-decoration:none;color:var(--ink);
  transition:transform .12s ease;
}
.kbar .back:active{transform:scale(.92)}
.kbar h1{
  margin:0;font-size:clamp(20px,5.4vw,28px);letter-spacing:.5px;
}
.kbar .sub{font-size:13px;color:var(--ink-soft);margin-top:2px}
.kbar .tools{margin-left:auto;display:flex;gap:8px}
.kbtn{
  border:0;border-radius:22px;background:#fff;box-shadow:var(--shadow);
  padding:12px 16px;font-size:15px;font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
  font-family:inherit;
}
.kbtn:active{transform:scale(.94);box-shadow:var(--shadow-press)}
.kbtn.on{background:linear-gradient(150deg,#ffe9a8,#ffd166)}

/* ---------- 卡片网格 ---------- */
.kgrid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
.kcard{
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);border:0;
  padding:16px 12px;min-height:132px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;font-family:inherit;color:var(--ink);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .14s;
  position:relative;overflow:hidden;
}
.kcard:active{transform:scale(.94);box-shadow:var(--shadow-press)}
.kcard .emoji{font-size:clamp(38px,11vw,56px);line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.08))}
.kcard .label{font-size:16px;font-weight:700}
.kcard .hint{font-size:12px;color:var(--ink-soft);font-weight:500}
.kcard.tap-anim .emoji{animation:pop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{
  0%{transform:scale(1) rotate(0)}
  40%{transform:scale(1.28) rotate(-7deg)}
  70%{transform:scale(.94) rotate(4deg)}
  100%{transform:scale(1) rotate(0)}
}

/* ---------- 通用面板 ---------- */
.kpanel{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;
}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------- 浮动反馈 ---------- */
.floaty{
  position:fixed;pointer-events:none;z-index:9999;
  font-weight:800;font-size:clamp(18px,5vw,26px);
  animation:floatUp 1.1s ease-out forwards;
  text-shadow:0 3px 8px rgba(0,0,0,.14);
}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,0) scale(.6)}
  25%{opacity:1;transform:translate(-50%,-18px) scale(1.12)}
  100%{opacity:0;transform:translate(-50%,-92px) scale(1)}
}
.spark{
  position:fixed;pointer-events:none;z-index:9998;font-size:22px;
  animation:sparkOut .75s ease-out forwards;
}
@keyframes sparkOut{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15)}
}

/* 隐藏滚动条扰动 */
::-webkit-scrollbar{width:0;height:0}