/* base.css —— 变量 / reset / 通用组件（星罐、按钮、弹窗、toast） */

:root {
  /* 草地配色（批次F ②：深空星空→像素草地；--bg* 为草地绿兜底/渐变，
     实际页面底 = body 平铺 bg_grass.png 彩花瓦片） */
  --bg0: #8FCB6B;
  --bg1: #7BAF4E;
  --bg2: #6BA84F;
  --yellow: #FFC94D;
  --yellow-deep: #F5A623;
  --orange: #FF8A3D;
  --teal: #4DD8C0;
  --red: #FF5A5A;
  --green: #58C96B;
  /* 批次F ②：正文深暖棕（浅绿草地上的高对比）；--accent-ink = 浅底强调文字色
     （原 var(--yellow) 直排文字在浅底不可读，一律改走 --accent-ink；黄色仍用于
     按钮底/图标填充等非直排场景） */
  --ink: #4A3628;
  --ink-dim: rgba(74, 54, 40, .72);
  --accent-ink: #8A5A16;
  --card: rgba(255, 255, 255, .62);   /* ⚠️ 死变量：全前端零 var(--card) 消费者；主卡背景见 .card 硬编码渐变（V200-G 勘误）*/
  --card-line: rgba(122, 88, 44, .26);
  --card-bg: linear-gradient(170deg, rgba(255, 255, 255, .93), rgba(255, 251, 236, .82));  /* V200-G ①：sticker/ticket/shop 卡提亮（原 .78/.55）*/
  --r-lg: 32px;
  --r-md: 24px;
  --r-sm: 20px;
  --glow: 0 0 24px rgba(255, 201, 77, .35);
  --font: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  /* PWA 安全区（v1.0.3 §3 方案A）：viewport-fit=cover + black-translucent 下内容全幅延伸，
     顶/底元素经 var(--sat)/var(--sab) 避让状态栏与 home indicator；无 cover 时 env() 返回 0，无害 */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { height: 100%; }

body {
  min-height: 100%;
  font-family: var(--font);
  font-size: 20px; /* 🔴 全站最小字号红线：任何文字不得小于 20px */
  line-height: 1.5;
  color: var(--ink);
  /* 批次F ②：像素草地瓦片（256×256 无缝平铺，带彩色小花；#7BAF4E=瓦片实测均色兜底） */
  background: #7BAF4E url(../assets/pixel/bg_grass.png) repeat;
  background-size: 256px 256px;
  image-rendering: pixelated;
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button {
  font-family: inherit;
  min-height: 72px; /* 🔴 触摸区红线 */
  font-size: 24px;
  font-weight: 700;
  border: none;
  border-radius: 40px; /* v1.0.3 §2.3 游戏风胶囊 */
  cursor: pointer;
  touch-action: manipulation;
  color: #3a2800;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  /* v1.0.3 §2.3 3D 立体：顶部内高光 + 底部硬阴影底座 + 贴地投影 + 外发光 */
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .42),
    0 8px 0 #8F5E0F,
    0 16px 30px rgba(0, 0, 0, .32),
    var(--glow);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), filter .18s, box-shadow .18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 34px;
}

button:active { transform: translateY(4px) scale(.97); }
button:disabled { opacity: .45; pointer-events: none; }

button.ghost {
  background: rgba(255, 255, 255, .55); /* 批次F ②：浅底玻璃 */
  color: var(--ink);
  border: 2px solid var(--card-line);
  box-shadow: none;
}

button.teal {
  background: linear-gradient(180deg, #6FE7D2, var(--teal));
  color: #04382f;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .42),
    0 8px 0 #1E8577,
    0 16px 30px rgba(0, 0, 0, .3),
    0 0 24px rgba(77, 216, 192, .35);
}

button.danger {
  background: linear-gradient(180deg, #FF8A8A, var(--red));
  color: #4d0d0d;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .35),
    0 8px 0 #B03A3A,
    0 16px 30px rgba(0, 0, 0, .3),
    0 0 24px rgba(255, 90, 90, .3);
}

/* ---- v1.0.3 §2.3 呼吸灯（🔴 动画名 breathe；.pulse 仅限 .card 修饰，禁作动画名）---- */
.btn-breathe { position: relative; animation: breathe 2s ease-in-out infinite; }

.btn-breathe::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(closest-side, rgba(255, 222, 120, .5), rgba(255, 201, 77, 0) 78%);
  opacity: .3;
  pointer-events: none;
  animation: breatheGlow 2s ease-in-out infinite;
}

/* 按压瞬间停呼吸，让位给 :active 下沉反馈（后声明的 .star-add-btn.pulse 可再覆盖） */
.btn-breathe:active { animation: none; }
.btn-breathe:active::after { animation: none; opacity: .15; }
.btn-breathe:disabled { animation: none; }
.btn-breathe:disabled::after { display: none; }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes breatheGlow {
  0%, 100% { opacity: .28; }
  50% { opacity: .72; }
}

input, select {
  font-family: inherit;
  font-size: 22px;
  min-height: 64px;
  padding: 8px 18px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72); /* 批次F ②：浅底输入框 */
  border: 2px solid var(--card-line);
  border-radius: 16px;
  outline: none;
}

input:focus, select:focus { border-color: var(--teal); }

svg { display: block; }

/* ---- 星空背景 ----
   批次F ②：草地主题停用全部深空层（星点/星云/行星整体 display:none）。
   initSky() 的 JS 调用保留（kid 页内联脚本钩子不动），生成的星点/流星
   落在被隐藏的 #sky 内，天然不可见——不产生绘制开销外的任何影响。 */
#sky,
#sky-nebula,
#sky-planets {
  display: none;
}

#sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#sky .star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 3s ease-in-out infinite alternate;
}

/* v1.0.3 §2.1 近/中/远三层：大小与周期由 JS 生成，此处分管亮度与光晕 */
#sky .star-near { background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .85); }
#sky .star-mid { background: #E9EEFF; }
#sky .star-far { background: #B9C6F5; }

@keyframes twinkle {
  from { opacity: .12; transform: scale(.8); }
  to { opacity: .8; transform: scale(1.15); }
}

/* ---- v1.0.3 批次B §2.1 星云层（纯 radial-gradient 叠加，静止省电） ---- */
#sky-nebula {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 36% at 16% 20%, rgba(122, 92, 255, .16), transparent 70%),
    radial-gradient(40% 30% at 84% 10%, rgba(77, 216, 192, .12), transparent 70%),
    radial-gradient(50% 42% at 72% 84%, rgba(255, 90, 200, .10), transparent 72%);
}

/* ---- v1.0.3 批次B §2.1 远处行星（2 颗极慢视差 + 1 颗静止；只动 transform） ---- */
#sky-planets {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#sky-planets .pl { position: absolute; }
#sky-planets .pl-1 { top: 13%; right: 5%; width: 118px; height: 118px; opacity: .6; animation: plDrift1 84s ease-in-out infinite alternate; }
#sky-planets .pl-2 { bottom: 11%; left: 4%; width: 86px; height: 86px; opacity: .5; animation: plDrift2 108s ease-in-out infinite alternate; }
#sky-planets .pl-3 { bottom: 30%; right: 22%; width: 50px; height: 50px; opacity: .4; }

@keyframes plDrift1 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-26px, 12px, 0); }
}

@keyframes plDrift2 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(20px, -12px, 0); }
}

@media (max-width: 480px) {
  #sky-planets .pl-1 { width: 86px; height: 86px; }
  #sky-planets .pl-2 { width: 62px; height: 62px; }
  #sky-planets .pl-3 { width: 38px; height: 38px; }
}

/* ---- v1.0.3 批次B §2.1 流星（JS rAF 驱动，30fps 节流；每 25–45s 一颗） ---- */
#sky .meteor {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 244, 214, .8) 24%, rgba(255, 244, 214, 0) 100%);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9));
  pointer-events: none;
  will-change: transform;
}

#sky .meteor::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255, 244, 214, 0) 72%);
}

/* ---- 视图 ---- */
.view {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 18px 120px;
}

/* ---- PWA 状态栏避让（v1.0.3 批次A §3 P1-1）----
   🔴 console.css 本批次禁改，控制台顶栏 .console-header 的避让落在此共享文件：
   #view-console 特异性 (1,0,0) 压过 .view 及其窄屏媒体查询（kid.css ≤480px 整体覆盖 padding），
   且不会与 .kid-header 的避让叠加（孩子视图走 kid.css 自己的 padding-top）。 */
#view-console { padding-top: calc(18px + var(--sat)); }

/* ---- 特效层：#fx-layer + .fx-coin（金币飞行 / 粒子烟花）----
   🔴 v1.0.3 批次B 修复 P0-1：此前全项目缺 fx-coin/fx-layer 的 CSS ——
   spawnCoin() 只设 width/height/left/top（无 position/background）→ 金币透明不可见；
   spawnParticle() 的 position:absolute 因父层非定位 → 页面滚动后粒子整体错位。
   z-index 70：在内容(1)与 press-overlay(60) 之上、toast(99) 之下。 */
#fx-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.fx-coin {
  position: absolute;
  /* 🔴 星星银行 = 星星：飞行物为五角星（对齐罐内 .jar-star 与品牌），非金币圆片。
     历史遗留命名（class fx-coin / spawnCoin / flyCoins）系 v1.0.1 陈旧命名，
     类名为 JS 冻结钩子不改名；此层只负责视觉形状。
     clip-path 裁五星，光晕用 filter drop-shadow（box-shadow 会被裁掉）。 */
  background: radial-gradient(circle at 40% 34%, #FFF6C8, #FFC94D 58%, #E08A18);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 6px rgba(255, 201, 77, .8)) drop-shadow(0 1px 2px rgba(120, 70, 0, .5));
}

/* ---- 浮层通用 ---- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 24px;
  background: rgba(5, 8, 20, .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal-box {
  width: min(92vw, 560px);
  max-height: 84vh;
  overflow-y: auto;
  padding: 30px 28px;
  border-radius: var(--r-lg);
  border: 2px solid var(--card-line);
  background: linear-gradient(170deg, #FFFCF2, #FFEFD2); /* 批次F ②：暖奶油卡 */
  box-shadow: 0 0 40px rgba(0, 0, 0, .28), var(--glow);
  text-align: center;
  animation: popIn .34s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes popIn {
  from { transform: scale(.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-title { font-size: 30px; font-weight: 800; margin-bottom: 8px; }
.modal-sub { font-size: 21px; color: var(--ink-dim); margin-bottom: 18px; }
.modal-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* ---- toast ---- */
#toast {
  position: fixed;
  left: 50%;
  top: calc(26px + var(--sat)); /* PWA：整个 toast 下移避开状态栏（fixed 贴顶元素统一避让） */
  transform: translateX(-50%);
  z-index: 99;
  max-width: 88vw;
  padding: 16px 30px;
  font-size: 22px;
  font-weight: 700;
  color: #04382f;
  background: linear-gradient(180deg, #6FE7D2, var(--teal));
  border-radius: var(--r-md);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  animation: toastIn .32s cubic-bezier(.34, 1.56, .64, 1);
  text-align: center;
}

#toast.warn { background: linear-gradient(180deg, #FFB06B, var(--orange)); color: #4d2504; }

@keyframes toastIn {
  from { transform: translate(-50%, -30px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* ---- 通用抖动（答错 / 提前松手） ---- */
.shake { animation: shakeIt .4s ease; }

@keyframes shakeIt {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-12px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(6px); }
}

/* ---- 图标占位 ---- */
.h-icon svg, .b-icon svg { width: 1.35em; height: 1.35em; }
.h-icon, .b-icon { display: inline-flex; }
/* 批次F ①：标题像素蝴蝶结图（<img> 版图标位，尺寸对齐 .h-icon svg） */
.h-icon-img { display: inline-block; width: 1.4em; height: 1.4em; image-rendering: pixelated; }

/* ---- v1.0.3 批次B：系统减动效 → 本批新增 + 存量动画全部停止（C8） ---- */
@media (prefers-reduced-motion: reduce) {
  #sky .star,
  #sky-planets .pl,
  .btn-breathe,
  .btn-breathe::after,
  .track-fill,
  .modal-box,
  #toast,
  .shake { animation: none !important; }
  #sky .meteor { display: none; }
}