/* ============================================================
 * 萱萱的乐园 · 梦幻糖果风样式
 * ============================================================ */

:root {
  --pink: #ff8fc0;
  --pink-deep: #f0619e;
  --pink-soft: #ffe3f1;
  --purple: #a78bfa;
  --purple-deep: #8b5cf6;
  --purple-soft: #ede9fe;
  --mint: #6ee7b7;
  --mint-deep: #34d399;
  --mint-soft: #d7f9ec;
  --sky: #7dd3fc;
  --sky-deep: #38bdf8;
  --sun: #fbbf24;
  --sun-soft: #fef3c7;
  --cream: #fff8f0;
  --ink: #5b4a63;
  --ink-soft: #8a7a92;
  --card-bg: #ffffff;
  --shadow: 0 8px 24px rgba(233, 150, 200, .18);
  --shadow-lg: 0 14px 36px rgba(180, 120, 170, .25);
  --radius: 22px;
  /* emoji 字体回退：Windows/macOS/iOS/Android 都用各自的原生彩色 emoji 字体 */
  --emoji-font: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                 "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color",
                 "Android Emoji", emoji, sans-serif;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", var(--emoji-font), sans-serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(160deg, #ffe9f5 0%, #f3e8ff 45%, #dff4ff 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* 漂浮云朵与星星背景 */
.bg-deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-deco .cloud {
  position: absolute; font-size: 64px; opacity: .45; animation: drift 26s linear infinite; font-family: var(--emoji-font);
}
.bg-deco .star {
  position: absolute; font-size: 18px; opacity: .5; animation: twinkle 3.2s ease-in-out infinite; font-family: var(--emoji-font);
}
@keyframes drift {
  0% { transform: translateX(-12vw); }
  100% { transform: translateX(112vw); }
}
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.85) rotate(0deg); }
  50% { opacity: .8; transform: scale(1.15) rotate(12deg); }
}

#app { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 14px 40px; }

/* ---------- 顶部导航 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 8px 10px; flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800;
  color: var(--pink-deep); letter-spacing: 1px;
}
.brand .logo {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd6e8, #c4b5fd);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  box-shadow: var(--shadow); font-family: var(--emoji-font);
}
.brand small { font-size: 12px; color: var(--ink-soft); font-weight: 600; display: block; letter-spacing: 0; }

.nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav button {
  border: none; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,.85); color: var(--ink);
  padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 700;
  box-shadow: 0 3px 10px rgba(0,0,0,.05); transition: all .18s ease;
  display: flex; align-items: center; gap: 5px;
}
.nav button:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.nav button.active {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
}
.nav button .badge-dot {
  background: #f43f5e; color: #fff; font-size: 11px; min-width: 18px; height: 18px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin-bottom: 16px;
}
.card-title { font-size: 18px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card-title .tag {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #fff;
  background: linear-gradient(135deg, var(--mint-deep), var(--sky-deep));
}

.btn {
  border: none; cursor: pointer; font-family: inherit; font-weight: 700;
  padding: 10px 18px; border-radius: 999px; font-size: 14px;
  transition: all .18s ease; color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  box-shadow: 0 5px 14px rgba(240, 97, 158, .35);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-lg); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.ghost {
  background: #fff; color: var(--pink-deep); box-shadow: 0 3px 10px rgba(0,0,0,.06);
  border: 2px solid #ffd0e4;
}
.btn.ghost:hover { border-color: var(--pink); }
.btn.mint { background: linear-gradient(135deg, var(--mint-deep), var(--sky-deep)); box-shadow: 0 5px 14px rgba(52,211,153,.35); }
.btn.sun { background: linear-gradient(135deg, #fbbf24, #fb923c); box-shadow: 0 5px 14px rgba(251,191,36,.35); }
.btn.danger { background: linear-gradient(135deg, #fb7185, #f43f5e); box-shadow: 0 5px 14px rgba(244,63,94,.35); }
.btn.sm { padding: 6px 13px; font-size: 12.5px; }

/* ---------- 欢迎横幅 ---------- */
.hero {
  background: linear-gradient(135deg, #ffd6e8 0%, #e9d5ff 55%, #c7f2e0 100%);
  border-radius: 28px; padding: 26px 24px; margin-bottom: 18px;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.hero::after {
  content: '🌷'; position: absolute; right: 18px; bottom: 10px; font-size: 72px; opacity: .5; transform: rotate(-12deg);
}
.hero h1 { font-size: 26px; font-weight: 900; color: var(--pink-deep); margin-bottom: 6px; }
.hero p { color: var(--ink); font-size: 14.5px; max-width: 70%; line-height: 1.7; }
.hero .stats { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.stat-chip {
  background: rgba(255,255,255,.8); border-radius: 999px; padding: 8px 16px;
  font-size: 13.5px; font-weight: 800; display: flex; align-items: center; gap: 6px;
  box-shadow: 0 3px 8px rgba(0,0,0,.05);
}

/* ---------- 王国画布 ---------- */
.kingdom-wrap { position: relative; }
.kingdom {
  position: relative; width: 100%; height: 520px; border-radius: var(--radius);
  overflow: hidden; background: #bfe9ff; box-shadow: var(--shadow-lg);
  cursor: grab; user-select: none; touch-action: none;
}
.kingdom.dragging { cursor: grabbing; }
.kingdom .sky { position: absolute; inset: 0; background: linear-gradient(180deg, #b9e6ff 0%, #e3f7ff 62%, #aef0d0 62%, #8ae6b4 100%); }
.kingdom .sun-deco { position: absolute; top: 14px; right: 20px; font-size: 46px; animation: spin-slow 40s linear infinite; font-family: var(--emoji-font); }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.kingdom .hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.85); padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--ink-soft); z-index: 2; text-align: center; line-height: 1.6;
  box-shadow: var(--shadow);
}
.kingdom .cloud-puff { position: absolute; font-size: 42px; opacity: .8; animation: puff 9s ease-in-out infinite; font-family: var(--emoji-font); }
@keyframes puff { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.kitem {
  position: absolute; transform: translate(-50%, -100%); cursor: grab; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: filter .15s; touch-action: none;
}
.kitem:hover { filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); }
.kitem .kemoji { font-size: 46px; line-height: 1; animation: sway 3.4s ease-in-out infinite; transform-origin: bottom center; font-family: var(--emoji-font); }
@keyframes sway { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
.kitem .kname {
  background: rgba(255,255,255,.92); font-size: 11px; font-weight: 800; color: var(--ink);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.kitem .klevel { font-size: 10px; color: var(--pink-deep); font-weight: 800; }
.kitem.selected { outline: 3px dashed var(--sun); outline-offset: 4px; border-radius: 14px; }
.kitem.ghost-drag { opacity: .35; }

.kingdom-tools {
  display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center;
}
.deco-bar {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 10px;
  background: rgba(255,255,255,.75); border-radius: 16px; align-items: center;
}
.deco-bar .deco-btn {
  font-size: 30px; cursor: pointer; border: none; background: #fff; border-radius: 12px;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.07); transition: all .15s; font-family: var(--emoji-font);
}
.deco-bar .deco-btn:hover { transform: translateY(-3px) scale(1.1); box-shadow: var(--shadow); }
.deco-bar .label { font-size: 13px; font-weight: 800; color: var(--ink-soft); }

/* ---------- 标签页/分段 ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab {
  border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13.5px;
  padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.04); transition: all .15s;
}
.tab:hover { transform: translateY(-2px); }
.tab.active { background: linear-gradient(135deg, var(--mint-deep), var(--sky-deep)); color: #fff; }

/* ---------- 卡片网格 ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }

.tile {
  background: #fff; border-radius: 18px; padding: 14px; text-align: center;
  box-shadow: var(--shadow); transition: all .18s; position: relative; border: 2px solid transparent;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tile .emoji { font-size: 44px; line-height: 1.3; font-family: var(--emoji-font); }
.tile .tname { font-weight: 800; font-size: 13.5px; margin-top: 6px; }
.tile .tsub { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.tile.locked { opacity: .55; filter: grayscale(.9); }
.tile.locked .emoji { filter: grayscale(1); }
.tile .qty {
  position: absolute; top: 8px; right: 10px; background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff; font-size: 11.5px; font-weight: 800; min-width: 22px; height: 22px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 6px;
}
.tile.selected { border-color: var(--pink); box-shadow: 0 0 0 3px #ffd6e8; }
.tile .pick { margin-top: 8px; }
.tile small.new-badge { position: absolute; top: 8px; left: 10px; background: var(--sun); color: #7c4a03; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }

/* ---------- 任务卡片 ---------- */
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.task-card {
  background: #fff; border-radius: 20px; padding: 18px; box-shadow: var(--shadow);
  border-top: 6px solid; transition: all .18s; display: flex; flex-direction: column; gap: 10px;
}
.task-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.task-card .t-head { display: flex; align-items: center; gap: 10px; }
.task-card .t-emoji { font-size: 38px; font-family: var(--emoji-font); }
.task-card .t-title { font-weight: 900; font-size: 16px; }
.task-card .t-reward { font-size: 12.5px; color: var(--pink-deep); font-weight: 700; background: var(--pink-soft); padding: 3px 10px; border-radius: 999px; align-self: flex-start; }
.task-card .t-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.task-card .chip-row { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 2px solid #f1e4f5; background: #fdf7fb; color: var(--ink); transition: all .15s;
  font-family: inherit;
}
.chip:hover { border-color: var(--pink); }
.chip.on { background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; border-color: transparent; }

/* ---------- 动物卡片 ---------- */
.animal-card { text-align: center; padding: 16px 12px; }
.animal-card .a-emoji { font-size: 56px; display: inline-block; transition: transform .2s; cursor: pointer; font-family: var(--emoji-font); }
.animal-card .a-emoji:hover { transform: scale(1.15) rotate(-6deg); }
.animal-card .a-emoji.bounce { animation: bounce .6s; }
@keyframes bounce { 0%,100%{transform:translateY(0) scale(1)} 40%{transform:translateY(-14px) scale(1.1)} }
.animal-card .a-name { font-weight: 900; font-size: 15px; margin-top: 4px; }
.animal-card .a-level {
  display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 800;
  color: #fff; padding: 3px 10px; border-radius: 999px;
}
.lv1 { background: #94a3b8; } .lv2 { background: #60a5fa; } .lv3 { background: #34d399; }
.lv4 { background: #f59e0b; } .lv5 { background: linear-gradient(135deg,#f472b6,#a78bfa); }
.xp-bar { margin-top: 10px; height: 10px; border-radius: 999px; background: #f1e4f5; overflow: hidden; position: relative; }
.xp-bar .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mint), var(--sky)); transition: width .5s ease; }
.xp-bar .xp-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* ---------- 书架 ---------- */
.book-list { display: flex; flex-direction: column; gap: 10px; }
.book-row {
  display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px;
  padding: 12px 14px; box-shadow: var(--shadow); transition: all .15s; border: 2px solid transparent;
}
.book-row:hover { transform: translateX(3px); box-shadow: var(--shadow-lg); }
.book-row.read { background: var(--mint-soft); }
.book-row.selected { border-color: var(--pink); }
.book-cover {
  width: 40px; height: 54px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff; flex-shrink: 0; box-shadow: 0 3px 8px rgba(0,0,0,.12);
}
.cat-语文 { background: linear-gradient(135deg,#fb7185,#f472b6); }
.cat-数学 { background: linear-gradient(135deg,#38bdf8,#6366f1); }
.cat-英语 { background: linear-gradient(135deg,#34d399,#14b8a6); }
.book-info { flex: 1; min-width: 0; }
.book-info .b-title { font-weight: 800; font-size: 14.5px; }
.book-info .b-meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.book-info .b-meta .src { color: var(--purple-deep); font-weight: 700; }
.book-row .b-done { font-size: 22px; }

/* ---------- 审批列表 ---------- */
.req-card {
  background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px; border-left: 6px solid var(--sun);
}
.req-card .r-emoji { font-size: 34px; font-family: var(--emoji-font); }
.req-card .r-info { flex: 1; min-width: 0; }
.req-card .r-title { font-weight: 800; font-size: 14.5px; }
.req-card .r-desc { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.5; }
.req-card .r-time { font-size: 11px; color: var(--ink-soft); }
.req-card .r-actions { display: flex; gap: 6px; }

/* ---------- 日志时间线 ---------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--pink), var(--purple), var(--mint)); }
.tl-item { position: relative; margin-bottom: 12px; }
.tl-item::before {
  content: ''; position: absolute; left: -21px; top: 5px; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 3px solid var(--pink); box-shadow: var(--shadow);
}
.tl-item .tl-time { font-size: 11px; color: var(--ink-soft); }
.tl-item .tl-text { font-size: 13.5px; font-weight: 600; margin-top: 2px; line-height: 1.6; }

/* ---------- 家长模式 ---------- */
.parent-hero {
  background: linear-gradient(135deg, #c7d2fe, #ddd6fe); border-radius: 28px; padding: 22px 24px;
  margin-bottom: 18px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 14px;
}
.parent-hero .lock-emoji { font-size: 44px; font-family: var(--emoji-font); }
.parent-hero h2 { font-size: 20px; font-weight: 900; color: #4338ca; }
.parent-hero p { font-size: 13px; color: #514e78; margin-top: 4px; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(90, 60, 100, .45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--cream); border-radius: 26px; padding: 22px; max-width: 520px; width: 100%;
  max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: pop .25s ease;
}
@keyframes pop { from { transform: scale(.9) translateY(14px); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal h3 { font-size: 18px; font-weight: 900; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.modal .m-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 12px; }
.modal .m-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.modal .m-actions .spacer { flex: 1; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 5px; }
.input, .select, textarea.input {
  width: 100%; border: 2px solid #f0e3f2; border-radius: 14px; padding: 10px 13px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ink); outline: none;
  transition: border-color .15s;
}
.input:focus, .select:focus, textarea.input:focus { border-color: var(--pink); }
textarea.input { resize: vertical; min-height: 66px; }

/* ---------- PIN 输入 ---------- */
.pin-box { display: flex; gap: 10px; justify-content: center; margin: 14px 0; }
.pin-dot {
  width: 52px; height: 60px; border-radius: 14px; background: #fff; border: 2.5px solid #f0e3f2;
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 900;
  color: var(--pink-deep); box-shadow: var(--shadow); transition: all .15s;
}
.pin-dot.filled { border-color: var(--pink); transform: scale(1.06); }
.pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.pin-key { font-size: 22px; font-weight: 800; padding: 14px; border-radius: 16px; border: none; cursor: pointer;
  background: #fff; color: var(--ink); box-shadow: 0 3px 8px rgba(0,0,0,.06); transition: all .12s; font-family: inherit; }
.pin-key:hover { background: var(--pink-soft); transform: translateY(-2px); }
.pin-key:active { transform: scale(.94); }

/* ---------- Toast ---------- */
#toast-wrap { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: rgba(70, 50, 80, .92); color: #fff; padding: 11px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; box-shadow: var(--shadow-lg); animation: toastIn .25s ease;
  max-width: 86vw; text-align: center;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.toast.good { background: linear-gradient(135deg, var(--mint-deep), var(--sky-deep)); }

/* ---------- 庆祝动画 ---------- */
.confetti { position: fixed; font-size: 22px; z-index: 300; pointer-events: none; animation: confettiFall 1.6s ease-in forwards; font-family: var(--emoji-font); }
@keyframes confettiFall {
  0% { transform: translateY(-30px) rotate(0); opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

/* ---------- 其他 ---------- */
.empty-hint { text-align: center; padding: 26px 10px; color: var(--ink-soft); font-size: 14px; line-height: 2; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, #f0d9ea, transparent); margin: 14px 0; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.muted { color: var(--ink-soft); }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.notice {
  background: var(--sun-soft); border: 2px dashed #fbbf24; border-radius: 14px; padding: 10px 14px;
  font-size: 13px; line-height: 1.7; color: #7c4a03; margin-bottom: 12px;
}
.notice.purple { background: var(--purple-soft); border-color: #c4b5fd; color: #5b21b6; }
.section-title { font-size: 17px; font-weight: 900; margin: 20px 0 10px; display: flex; align-items: center; gap: 8px; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.help-item { background: #fff; border-radius: 16px; padding: 14px; box-shadow: var(--shadow); }
.help-item .h-title { font-weight: 800; font-size: 14px; margin-bottom: 5px; }
.help-item .h-body { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }

@media (max-width: 640px) {
  .hero h1 { font-size: 21px; }
  .hero p { max-width: 100%; }
  .kingdom { height: 440px; }
  .kitem .kemoji { font-size: 38px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}