/* ═══════════════════════════════════════
   ART V2 —— 对标头部儿童应用的视觉升级
   2.5D 厚底按钮 / 贴纸素材 / 海岛动效 / 彩带庆祝
   独立文件，加载顺序在 style.css 之后
   ═══════════════════════════════════════ */
:root {
  --bg: #FFF6E6;
  --ink: #46392F;
  --sub: #9A8A78;
  --teal: #17B8A6;
  --teal-deep: #0E8A7C;
  --orange: #FF8A3D;
  --orange-deep: #E86A1C;
  --purple: #8E6FE8;
  --purple-deep: #6F4FD4;
  --pink: #FF7E9E;
  --pink-deep: #E85C81;
  --gold: #FFC53D;
  --card: #FFFFFF;
  --line: #F0E4D0;
  --btn-shadow: 0 5px 0 rgba(70, 57, 47, .10), 0 10px 18px -8px rgba(70, 57, 47, .28);
}

/* ── 背景：奶油底 + 星点纹理 ── */
body {
  background:
    radial-gradient(circle 1.6px at 18% 12%, rgba(255, 197, 61, .5) 0 1.6px, transparent 2px),
    radial-gradient(circle 1.6px at 78% 8%, rgba(23, 184, 166, .35) 0 1.6px, transparent 2px),
    radial-gradient(circle 1.4px at 88% 62%, rgba(255, 138, 61, .4) 0 1.4px, transparent 2px),
    radial-gradient(circle 1.4px at 10% 78%, rgba(142, 111, 232, .3) 0 1.4px, transparent 2px),
    radial-gradient(circle 1.6px at 55% 90%, rgba(255, 197, 61, .35) 0 1.6px, transparent 2px),
    linear-gradient(180deg, #FFF9EC 0%, #FFF3DF 100%);
}

/* ── 通用按钮：2.5D 厚底按压 ── */
button { transition: transform .12s ease, box-shadow .12s ease; }
button:active { transform: translateY(3px) !important; }
.back-btn, .round-chip, .star-chip, .replay-btn, .game-card, .pack-card,
.option-card, .shop-item, .collect-cell, .letter-option, .train-tile, .memory-card,
.checkout-good, .home-tabs button, .sleep-options button, .skip-btn, .pc-setting, .keypad button {
  box-shadow: var(--btn-shadow) !important;
  border: 2px solid rgba(255, 255, 255, .85);
}
.back-btn:active, .game-card:active, .pack-card:active { box-shadow: 0 2px 0 rgba(70,57,47,.10) !important; }

/* ── 顶部品牌区 ── */
.map-top { padding-top: calc(14px + var(--safe-top)); }
.mascot-svg { width: 56px; height: 56px; filter: drop-shadow(0 4px 5px rgba(70, 57, 47, .22)); }
.map-brand h1 { font-size: 26px; letter-spacing: 3px; }
.star-chip {
  background: linear-gradient(180deg, #FFFDF4, #FFF3D0);
  border: 2px solid #FFE29A;
  box-shadow: 0 4px 0 rgba(180, 130, 30, .18), 0 8px 14px -6px rgba(180, 130, 30, .25) !important;
}

/* ── 任务条：金币贴纸风 ── */
.task-strip { padding: 2px 16px 8px; }
.task-chip {
  border: 2px solid rgba(255, 255, 255, .9);
  background: linear-gradient(180deg, #fff, #FBEFD9);
}
.task-chip.done { background: linear-gradient(180deg, #E7FBF1, #C9F0DD); border-color: #B2E7CD; }
.task-flame { border: 2px solid #FFE29A; background: linear-gradient(180deg, #FFFDF4, #FFEBBF); }

/* ── 冒险海岛：分层海浪 + 漂浮装饰 ── */
.map-island {
  border: 3px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25), 0 14px 30px -16px rgba(44, 100, 120, .45);
  background:
    radial-gradient(46% 22% at 50% 10%, #D9F3CD 0%, rgba(217, 243, 205, 0) 62%),
    radial-gradient(44% 20% at 46% 46%, #CDEFF5 0%, rgba(205, 239, 245, 0) 64%),
    radial-gradient(48% 22% at 54% 82%, #F7E9C4 0%, rgba(247, 233, 196, 0) 66%),
    linear-gradient(180deg, #8FD3EA 0%, #74C3DE 46%, #86CDC6 100%);
}
.map-island::before, .map-island::after {
  content: ""; position: absolute; left: -8%; width: 116%; height: 26px;
  border-radius: 50%; background: rgba(255, 255, 255, .30);
  pointer-events: none;
}
.map-island::before { top: 8px; animation: wave-drift 7s ease-in-out infinite alternate; }
.map-island::after { bottom: 10px; background: rgba(255, 255, 255, .22); animation: wave-drift 9s ease-in-out infinite alternate-reverse; }
@keyframes wave-drift { from { transform: translateX(-2%); } to { transform: translateX(3%); } }

.map-sun { position: absolute; font-size: 34px; animation: bob 6s ease-in-out infinite; filter: drop-shadow(0 3px 3px rgba(70,57,47,.18)); }
.map-cloud {
  position: absolute; font-size: 30px; opacity: .9;
  filter: drop-shadow(0 3px 3px rgba(70,57,47,.12));
  animation: cloud-drift 16s ease-in-out infinite alternate;
}
.map-cloud.c2 { animation-duration: 22s; animation-delay: -6s; }
@keyframes cloud-drift { from { transform: translateX(-10px); } to { transform: translateX(14px); } }

.map-deer { position: absolute; width: 64px; height: 64px; filter: drop-shadow(0 5px 5px rgba(70,57,47,.25)); animation: bob 2.4s ease-in-out infinite; }
.map-deer svg { width: 100%; height: 100%; }

/* ── 区域节点：漂浮小岛卡片 ── */
.region-node {
  width: 116px; padding: 12px 4px 10px;
  border: 3px solid #fff;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF2E0 100%);
  border-radius: 22px;
  box-shadow: 0 6px 0 rgba(44, 100, 120, .14), 0 16px 24px -12px rgba(44, 100, 120, .35);
}
.region-node:nth-child(odd) { transform: translate(-50%, -50%) rotate(-2deg); }
.region-node:nth-child(even) { transform: translate(-50%, -50%) rotate(2deg); }
.region-emoji { font-size: 44px; filter: drop-shadow(0 4px 3px rgba(70, 57, 47, .20)); }
.region-pct { background: #F3EAD8; border-radius: 999px; padding: 1px 8px; }
.region-node.lit {
  border-color: #FFE29A;
  box-shadow: 0 6px 0 rgba(180, 130, 30, .18), 0 16px 26px -12px rgba(200, 140, 40, .4), 0 0 0 5px rgba(255, 220, 130, .45), 0 0 26px 8px rgba(255, 197, 61, .5);
}
.region-node.lit::after {
  content: "✦"; position: absolute; top: -12px; right: -8px;
  color: var(--gold); font-size: 20px;
  animation: sparkle 1.6s ease-in-out infinite;
}
@keyframes sparkle { 0%, 100% { transform: scale(.8) rotate(0deg); opacity: .7; } 50% { transform: scale(1.25) rotate(20deg); opacity: 1; } }
.region-node.locked { filter: saturate(.2); }

/* ── 素材贴纸化：emoji 一律带投影与轻微浮起 ── */
.option-card, .checkout-good, .memory-card, .letter-tile, .bubble,
.shop-emoji, .region-emoji, .pack-icon, .game-icon, .tile-icon,
.speak-emoji, .ear-emoji, .cvc-emoji, .racer-emoji, .theater-star {
  filter: drop-shadow(0 4px 3px rgba(70, 57, 47, .22));
}
.option-card {
  background: linear-gradient(180deg, #FFFFFF, #FDF6E9);
  border: 3px solid #fff;
  box-shadow: 0 5px 0 rgba(70, 57, 47, .12), 0 12px 18px -10px rgba(70, 57, 47, .25);
}
.option-card.right { background: linear-gradient(180deg, #E9FBF2, #C9F0DD); border-color: #B2E7CD; }

/* ── 大表情：轻浮动动画 ── */
.speak-emoji, .ear-emoji, .cvc-emoji, .theater-star { animation: sway 3.2s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-6px); } }
.ear-emoji.bounce { animation: bounce .5s ease; }

/* ── 卡片/学习包贴纸化 ── */
.pack-card {
  border: 2.5px solid #fff;
  background: linear-gradient(180deg, #FFFFFF, #FBF3E2);
  border-radius: 22px;
}
.pack-icon { font-size: 54px; }

/* ── 游戏菜单 ── */
.game-card { border-radius: 24px; border: 3px solid #fff; background: linear-gradient(180deg, #FFFFFF, #FBF3E2); }

/* ── 游戏舞台：浅色背板 ── */
.game-stage { background: rgba(255, 255, 255, .5); border-radius: 26px; margin: 0 2px; padding: 14px 12px; }
.train-slot, .racer-track span { border-radius: 8px; }

/* ── 我的家 ── */
.home-room {
  border: 3px solid #fff;
  box-shadow: 0 8px 18px -10px rgba(70, 57, 47, .3), 0 4px 0 rgba(70, 57, 47, .08);
  background:
    radial-gradient(circle 3px at 20% 30%, rgba(255,255,255,.5) 0 3px, transparent 4px),
    radial-gradient(circle 2.4px at 70% 22%, rgba(255,255,255,.45) 0 2.4px, transparent 3.4px),
    radial-gradient(circle 2.8px at 45% 55%, rgba(255,255,255,.4) 0 2.8px, transparent 3.8px),
    linear-gradient(180deg, #FFEFD9 0%, #FFE3B8 62%, #E8C99A 63%, #D9B884 100%);
}
.room-deer { width: 64px; height: 64px; filter: drop-shadow(0 5px 4px rgba(70,57,47,.25)); }
.room-item, .room-item.floor { filter: drop-shadow(0 4px 3px rgba(70,57,47,.22)); }
.shop-item, .collect-cell { border: 2.5px solid #fff; border-radius: 18px; }

/* ── 家长/弹窗 ── */
.overlay-card { border: 3px solid #fff; border-radius: 30px; box-shadow: 0 10px 24px -10px rgba(70,57,47,.4); }
.parent-corner {
  background: #fff; border: 2.5px solid #F3E7D2;
  box-shadow: 0 4px 0 rgba(70,57,47,.10);
  font-size: 24px;
}

/* ── 庆祝彩带 ── */
.cheer-box { position: relative; }
.confetti {
  position: absolute; top: -14px; font-size: 26px;
  animation: confetti-fall 1.6s ease-in forwards;
  pointer-events: none;
}
@keyframes confetti-fall {
  0% { transform: translateY(-20px) rotate(0); opacity: 1; }
  100% { transform: translateY(220px) rotate(320deg); opacity: 0; }
}

/* ── 平板适配微调 ── */
@media (min-width: 700px) {
  .mascot-svg { width: 64px; height: 64px; }
  .region-node { width: 132px; }
}