/* 公共样式（集成人维护）。页面样式放 css/screens/<页面>.css。 */
/* 楷体字体见 fonts/kai.css（tools/font/subset.py 生成，霞鹜文楷 GB 子集）；缺字时回退到系统楷体 */
:root {
  --bg: #fff7ec; --ink: #3d2c1e; --muted: #8a7a6a; --card: #ffffff; --line: #ead9c4;
  --accent: #ff8a3d; --good: #2bb673; --warn: #f2a541; --bad: #e5484d; --blue: #3b82f6;
  --radius: 22px; --tap: 64px;
  --font-ui: -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-kai: 'ShiziKai', 'Kaiti SC', 'STKaiti', 'KaiTi', 'BiauKai', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-ui); -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; }
#bg, #fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#bg { z-index: 0; } #fx { z-index: 50; }
#bg-fallback { position: fixed; inset: 0; z-index: 0; display: none; }
#app { position: relative; z-index: 1; min-height: 100%; padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }

/* 孩子看到的汉字一律用楷体 */
.kai { font-family: var(--font-kai); font-weight: normal; }

.screen { max-width: 980px; margin: 0 auto; }
.topbar { display: flex; align-items: center; gap: 12px; min-height: var(--tap); }
.topbar h1 { font-size: 26px; margin: 0; }
.btn { min-height: var(--tap); min-width: var(--tap); padding: 0 24px; border: 3px solid var(--ink); border-radius: var(--radius);
  background: var(--card); color: var(--ink); font: 600 22px var(--font-ui); cursor: pointer; touch-action: manipulation; }
.btn:active { transform: translateY(2px); }
.btn.primary { background: var(--accent); color: #fff; }
.btn[disabled] { opacity: .45; }
.back { font-size: 28px; padding: 0 16px; }

.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-top: 24px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 180px;
  border: 3px solid var(--ink); border-radius: 28px; background: var(--card); font: 700 26px var(--font-ui); color: var(--ink);
  text-decoration: none; cursor: pointer; }
.tile.big { grid-column: 1 / -1; min-height: 220px; background: var(--accent); color: #fff; font-size: 34px; }
.tile .icon { font-size: 54px; line-height: 1; }
.mascot { width: 96px; height: 96px; }

.banner { margin: 12px 0; padding: 14px 18px; border-radius: 16px; border: 2px solid var(--ink); background: #fff3c4; font-size: 18px; }
.banner.bad { background: #ffe1e1; }
.banner .btn { min-height: 48px; font-size: 18px; margin-left: 8px; }
.wip { margin-top: 40px; text-align: center; color: var(--muted); font-size: 22px; }
.fatal { max-width: 640px; margin: 10vh auto; text-align: center; }

#toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 60; padding: 12px 22px;
  border-radius: 999px; background: var(--ink); color: #fff; font-size: 18px; opacity: 0; transition: opacity .2s; pointer-events: none; }
#toast.show { opacity: .92; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }