* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #0e0d12; overflow: hidden;
  font-family: "Noto Serif SC", "Songti SC", "PingFang SC", serif; color: #f5efe1; }
#stage { position: relative; width: 100vw; height: 100vh; overflow: hidden; }

/* ===== 镜头容器与电影转场 ===== */
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.scene.active { opacity: 1; }

#transition-overlay { position: absolute; inset: 0; background: #0e0d12; z-index: 6; opacity: 0; pointer-events: none; transition: opacity 0.8s ease; }
#transition-overlay.active { opacity: 1; }

/* ===== 场景元素 ===== */
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, #2c2452 0%, #6b4d8a 40%, #d49b6a 100%); }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(180deg, #5a3a1f 0%, #2e1a0a 100%); }
.ground::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 16px; background: repeating-linear-gradient(90deg, #3a2310 0 20px, #2e1a0a 20px 40px); }
.sky.night { background: linear-gradient(180deg, #0a0a1a 0%, #1a1a3a 50%, #2a1a4a 100%); }
.moon { position: absolute; top: 8%; right: 12%; width: 80px; height: 80px; background: #f5efe1; border-radius: 50%; box-shadow: 0 0 40px rgba(245,239,225,0.4); }
.moon::after { content: ""; position: absolute; top: 12px; right: 14px; width: 24px; height: 24px; background: #d4d4d4; border-radius: 50%; }

/* ===== 王宫 ===== */
.palace { position: absolute; bottom: 28%; left: 50%; transform: translateX(-50%); width: 60%; height: 42%; }
.palace-roof { position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 70%; height: 30%; background: #2a1a0a; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.palace-body { position: absolute; left: 10%; right: 10%; top: 25%; bottom: 0; background: #c6a06a; border: 3px solid #2a1a0a; }
.palace-door { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 12%; height: 50%; background: #4d2c10; border: 2px solid #2a1a0a; border-radius: 60% 60% 0 0; }
.palace-window { position: absolute; width: 8%; height: 14%; background: #ffd66b; border: 2px solid #2a1a0a; border-radius: 4px; }
.palace-window.w1 { left: 18%; top: 18%; } .palace-window.w2 { left: 74%; top: 18%; }
.pillar { position: absolute; bottom: 0; width: 5%; background: #2a1a0a; }
.pillar.p1 { left: 14%; height: 65%; } .pillar.p2 { left: 81%; height: 65%; }

/* ===== 工坊 ===== */
.workshop { position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%); width: 60%; height: 50%; background: #8a6a4a; border: 4px solid #2a1a0a; border-radius: 4px; }
.workshop-roof { position: absolute; top: -30px; left: 0; right: 0; height: 30px; background: #5a3a1f; border: 4px solid #2a1a0a; clip-path: polygon(0 100%, 5% 0, 95% 0, 100% 100%); }
.workshop::before { content: "工坊"; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: #2a1a0a; font-size: 32px; font-weight: 900; letter-spacing: 8px; }
.plastic-flower { position: absolute; width: 60px; height: 80px; }
.plastic-flower .stem { position: absolute; left: 50%; bottom: 0; width: 4px; height: 50px; background: #6b4a2a; transform: translateX(-50%); }
.plastic-flower .petals { position: absolute; left: 50%; top: 0; width: 50px; height: 50px; transform: translateX(-50%); }
.plastic-flower .petal { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #2a1a0a; }
.plastic-flower .petal.p1 { left: 0; top: 14px; background: #ff6b6b; }
.plastic-flower .petal.p2 { right: 0; top: 14px; background: #ff6b6b; }
.plastic-flower .petal.p3 { left: 8px; top: 0; background: #ff8a8a; }
.plastic-flower .petal.p4 { right: 8px; top: 0; background: #ff8a8a; }
.plastic-flower .center { position: absolute; left: 50%; top: 14px; width: 16px; height: 16px; background: #ffd66b; border: 2px solid #2a1a0a; border-radius: 50%; transform: translateX(-50%); }

/* ===== 偏远花园 ===== */
.far-garden { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); width: 70%; height: 30%; }
.far-garden .dead { position: absolute; bottom: 0; width: 30px; height: 24px; background: #6b4a2a; border: 2px solid #2a1a0a; border-radius: 50% 50% 0 0; }
.far-garden .real { position: absolute; bottom: 0; width: 40px; height: 60px; }
.far-garden .real .stem { position: absolute; left: 50%; bottom: 0; width: 4px; height: 40px; background: #2e5e1c; transform: translateX(-50%); }
.far-garden .real .head { position: absolute; left: 50%; top: 0; width: 24px; height: 24px; background: #e85c8a; border: 2px solid #2a1a0a; border-radius: 50%; transform: translateX(-50%); }

/* ============================================================
   通用 actor：name-tag + bubble + 动作动画
   ============================================================ */
.actor { position: absolute; bottom: 18%; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.actor.visible { opacity: 1; transform: translateY(0); }
.actor .body-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.actor .name-tag {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  padding: 4px 14px; border-radius: 12px; font-size: 14px; font-weight: 700;
  color: #fff; background: #2a1a0a; border: 2px solid #fff;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.6); z-index: 4; letter-spacing: 2px;
}
.actor .bubble {
  position: absolute; bottom: 78%; left: 110%; min-width: 160px; max-width: 280px;
  padding: 10px 14px; background: #fffdf3; color: #2a1a0a; border: 3px solid #2a1a0a;
  border-radius: 14px; font-size: 14px; line-height: 1.5;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
  opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 5;
}
.actor .bubble::after { content: ""; position: absolute; bottom: 16px; left: -14px; border-style: solid; border-width: 8px 14px 8px 0; border-color: transparent #2a1a0a transparent transparent; }
.actor .bubble::before { content: ""; position: absolute; bottom: 18px; left: -10px; border-style: solid; border-width: 6px 11px 6px 0; border-color: transparent #fffdf3 transparent transparent; z-index: 1; }
.actor .bubble.show { opacity: 1; }
.actor.chancellor .bubble, .actor.right .bubble { left: auto; right: 110%; }
.actor.chancellor .bubble::after, .actor.right .bubble::after { left: auto; right: -14px; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #2a1a0a; }
.actor.chancellor .bubble::before, .actor.right .bubble::before { left: auto; right: -10px; border-width: 6px 0 6px 11px; border-color: transparent transparent transparent #fffdf3; }
.actor.left .bubble { left: 110%; right: auto; }
.actor.left .bubble::after { left: -14px; right: auto; border-width: 8px 14px 8px 0; border-color: transparent #2a1a0a transparent transparent; }
.actor.left .bubble::before { left: -10px; right: auto; border-width: 6px 11px 6px 0; border-color: transparent #fffdf3 transparent transparent; }

/* --- 人物通用动作 --- */
.eye { animation: blink 4s infinite; }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }

.actor .body-wrap { animation: breathe 3s ease-in-out infinite; transform-origin: bottom center; }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.02); } }

/* ============================================================
   新国王
   ============================================================ */
.actor.king { left: 50%; transform: translateX(-50%) translateY(20px); bottom: 24%; }
.actor.king.visible { transform: translateX(-50%) translateY(0); }
.actor.king .head { position: relative; width: 64px; height: 64px; background: #f5d3a4; border: 3px solid #2a1a0a; border-radius: 50% 50% 45% 45%; z-index: 3; }
.actor.king .face { position: absolute; inset: 18px 0 0 0; }
.actor.king .face .eye { position: absolute; top: 6px; width: 6px; height: 6px; background: #2a1a0a; border-radius: 50%; }
.actor.king .face .eye.l { left: 16px; } .actor.king .face .eye.r { right: 16px; }
.actor.king .face .brow { position: absolute; top: 0; width: 10px; height: 3px; background: #2a1a0a; border-radius: 4px; transition: transform 0.3s; }
.actor.king .face .brow.l { left: 14px; } .actor.king .face .brow.r { right: 14px; }
.actor.king .face .mouth { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 18px; height: 4px; background: #2a1a0a; border-radius: 0 0 10px 10px; transition: width 0.3s, height 0.3s; }
.actor.king .crown { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 60px; height: 28px; background: #ffd66b; border: 3px solid #2a1a0a; clip-path: polygon(0 100%, 8% 30%, 20% 100%, 35% 0, 50% 80%, 65% 0, 80% 100%, 92% 30%, 100% 100%); z-index: 4; }
.actor.king .body { width: 80px; height: 130px; background: linear-gradient(180deg, #b22b2b 0%, #6c1818 100%); border: 3px solid #2a1a0a; border-radius: 14px 14px 6px 6px; margin: -6px 0 0; position: relative; box-shadow: inset -8px 0 0 rgba(0,0,0,0.18); }
.actor.king .body::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 10px; background: #ffd66b; border-top: 2px solid #2a1a0a; border-bottom: 2px solid #2a1a0a; }
.actor.king .body::after { content: "龍"; position: absolute; left: 50%; top: 26%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: #ffd66b; color: #6c1818; font-size: 18px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid #2a1a0a; }
.actor.king .scepter { position: absolute; right: -28px; top: 30px; width: 8px; height: 90px; background: linear-gradient(180deg, #ffd66b 0%, #b8860b 100%); border: 2px solid #2a1a0a; transform: rotate(8deg); border-radius: 4px; transform-origin: top center; }
.actor.king .scepter::after { content: ""; position: absolute; top: -10px; left: -8px; width: 24px; height: 24px; background: #b22b2b; border: 2px solid #2a1a0a; border-radius: 50%; }
.actor.king .name-tag { background: #6c1818; border-color: #ffd66b; color: #ffd66b; }

/* 国王动作类 */
.actor.king.angry .body-wrap { animation: stomp 0.4s ease-in-out 3; }
@keyframes stomp { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-5px) rotate(-2deg); } 75% { transform: translateY(0) rotate(2deg); } }
.actor.king.angry .face .brow { transform: rotate(-20deg); }
.actor.king.angry .face .brow.r { transform: rotate(20deg); }
.actor.king.angry .face .mouth { width: 24px; height: 8px; border-radius: 50%; }

.actor.king.wave-scepter .scepter { animation: waveScepter 0.8s ease-in-out 2; }
@keyframes waveScepter { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-15deg); } }

.actor.king.nod .head { animation: nod 0.6s ease-in-out 2; transform-origin: bottom center; }
@keyframes nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg); } }

.actor.king.pace { animation: pacing 2s ease-in-out infinite; }
@keyframes pacing { 0%, 100% { margin-left: 0; } 50% { margin-left: 40px; } }

/* ============================================================
   宰相
   ============================================================ */
.actor.chancellor { left: 72%; bottom: 22%; transform: scale(0.9) translateY(20px); }
.actor.chancellor.visible { transform: scale(0.9) translateY(0); }
.actor.chancellor .head { position: relative; width: 58px; height: 58px; background: #f5d3a4; border: 3px solid #2a1a0a; border-radius: 50%; z-index: 3; }
.actor.chancellor .face { position: absolute; inset: 16px 0 0 0; }
.actor.chancellor .face .eye { position: absolute; top: 4px; width: 5px; height: 5px; background: #2a1a0a; border-radius: 50%; }
.actor.chancellor .face .eye.l { left: 14px; } .actor.chancellor .face .eye.r { right: 14px; }
.actor.chancellor .face .brow { position: absolute; top: 0; width: 10px; height: 2px; background: #2a1a0a; border-radius: 2px; transform: rotate(-12deg); }
.actor.chancellor .face .brow.l { left: 11px; } .actor.chancellor .face .brow.r { right: 11px; }
.actor.chancellor .face .beard { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 36px; height: 28px; background: #2a1a0a; border-radius: 0 0 50% 50%; }
.actor.chancellor .face .mouth { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 8px; height: 2px; background: #2a1a0a; border-radius: 0 0 8px 8px; z-index: 2; }
.actor.chancellor .hat { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 56px; height: 22px; background: #1a1a1a; border: 3px solid #2a1a0a; border-radius: 6px 6px 4px 4px; z-index: 4; }
.actor.chancellor .hat::before, .actor.chancellor .hat::after { content: ""; position: absolute; top: 2px; width: 36px; height: 8px; background: #1a1a1a; border: 2px solid #2a1a0a; }
.actor.chancellor .hat::before { left: -34px; transform: rotate(-12deg); }
.actor.chancellor .hat::after { right: -34px; transform: rotate(12deg); }
.actor.chancellor .body { width: 70px; height: 120px; background: linear-gradient(180deg, #5c2a8a 0%, #2a1a4a 100%); border: 3px solid #2a1a0a; border-radius: 12px 12px 6px 6px; margin: -4px 0 0; position: relative; box-shadow: inset -6px 0 0 rgba(0,0,0,0.18); }
.actor.chancellor .body::before { content: ""; position: absolute; left: 0; right: 0; top: 45%; height: 8px; background: #ffd66b; border-top: 2px solid #2a1a0a; border-bottom: 2px solid #2a1a0a; }
.actor.chancellor .hu { position: absolute; left: -16px; top: 30px; width: 8px; height: 70px; background: #f5efe1; border: 2px solid #2a1a0a; border-radius: 3px; transform: rotate(-6deg); transform-origin: top center; }
.actor.chancellor .name-tag { background: #2a1a4a; border-color: #ffd66b; color: #ffd66b; }

/* 宰相动作类 */
.actor.chancellor.bow .body-wrap { animation: bow 1.5s ease-in-out; transform-origin: bottom center; }
@keyframes bow { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(15deg); } }
.actor.chancellor.present-hu .hu { animation: presentHu 1s ease-in-out; }
@keyframes presentHu { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-30deg) translateX(-10px); } }

/* ============================================================
   老园丁
   ============================================================ */
.actor.gardener { left: 28%; bottom: 20%; transform: scale(0.92) translateY(20px); }
.actor.gardener.visible { transform: scale(0.92) translateY(0); }
.actor.gardener .head { position: relative; width: 56px; height: 56px; background: #f5d3a4; border: 3px solid #2a1a0a; border-radius: 50%; z-index: 3; }
.actor.gardener .face { position: absolute; inset: 14px 0 0 0; }
.actor.gardener .face .eye { position: absolute; top: 2px; width: 5px; height: 5px; background: #2a1a0a; border-radius: 50%; }
.actor.gardener .face .eye.l { left: 12px; } .actor.gardener .face .eye.r { right: 12px; }
.actor.gardener .face .brow { position: absolute; top: -2px; width: 10px; height: 3px; background: #2a1a0a; border-radius: 2px; }
.actor.gardener .face .brow.l { left: 9px; transform: rotate(8deg); }
.actor.gardener .face .brow.r { right: 9px; transform: rotate(-8deg); }
.actor.gardener .face .beard { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 42px; height: 32px; background: #f0f0f0; border: 2px solid #2a1a0a; border-radius: 0 0 50% 50%; z-index: 2; }
.actor.gardener .face .mouth { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 10px; height: 2px; background: #2a1a0a; border-radius: 0 0 8px 8px; z-index: 3; }
.actor.gardener .hat { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 78px; height: 18px; background: #c9a14a; border: 3px solid #2a1a0a; border-radius: 50% 50% 30% 30%; z-index: 4; }
.actor.gardener .hat::after { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 22px; height: 4px; background: #2a1a0a; border-radius: 2px; }
.actor.gardener .body { width: 76px; height: 120px; background: linear-gradient(180deg, #6b4a2a 0%, #3a2a1a 100%); border: 3px solid #2a1a0a; border-radius: 10px 10px 6px 6px; margin: -4px 0 0; position: relative; box-shadow: inset -6px 0 0 rgba(0,0,0,0.18); }
.actor.gardener .body::before { content: ""; position: absolute; left: 6px; right: 6px; top: 30%; bottom: 8px; background: #5a3a1f; border: 2px solid #2a1a0a; border-radius: 4px; }
.actor.gardener .body::after { content: ""; position: absolute; top: 30%; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: #2a1a0a; }
.actor.gardener .hoe { position: absolute; right: -34px; top: 50px; width: 6px; height: 80px; background: #6b4a2a; border: 2px solid #2a1a0a; transform: rotate(20deg); border-radius: 2px; transform-origin: top center; }
.actor.gardener .hoe::after { content: ""; position: absolute; top: -10px; left: -12px; width: 30px; height: 18px; background: #8a8a8a; border: 2px solid #2a1a0a; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.actor.gardener .name-tag { background: #3a2a1a; border-color: #c9a14a; color: #ffd66b; }

/* 老园丁动作类 */
.actor.gardener.lean-hoe .hoe { animation: leanHoe 2s ease-in-out; }
@keyframes leanHoe { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(40deg); } }
.actor.gardener.wipe-sweat .arm { animation: wipeSweat 1s ease-in-out; }
@keyframes wipeSweat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px) rotate(-30deg); } }
.actor.gardener.look-down .body-wrap { animation: lookDown 2s ease-in-out; transform-origin: top center; }
@keyframes lookDown { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(15deg); } }
.actor.gardener.sigh .head { animation: sigh 2s ease-in-out; transform-origin: bottom center; }
@keyframes sigh { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }

/* ============================================================
   年轻园丁
   ============================================================ */
.actor.young { bottom: 20%; transform: translateY(20px); }
.actor.young.visible { transform: translateY(0); }
.actor.young.left { left: 32%; }
.actor.young.right { right: 32%; }
.actor.young .head { position: relative; width: 50px; height: 50px; background: #f5d3a4; border: 3px solid #2a1a0a; border-radius: 50%; z-index: 3; }
.actor.young .face { position: absolute; inset: 14px 0 0 0; }
.actor.young .face .eye { position: absolute; top: 2px; width: 4px; height: 4px; background: #2a1a0a; border-radius: 50%; }
.actor.young .face .eye.l { left: 12px; } .actor.young .face .eye.r { right: 12px; }
.actor.young .face .mouth { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 8px; height: 2px; background: #2a1a0a; border-radius: 0 0 6px 6px; transition: width 0.3s; }
.actor.young .bandana { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 52px; height: 14px; background: #b22b2b; border: 3px solid #2a1a0a; border-radius: 6px; z-index: 4; }
.actor.young .body { width: 64px; height: 110px; background: linear-gradient(180deg, #3a6b32 0%, #1a3a1a 100%); border: 3px solid #2a1a0a; border-radius: 10px 10px 6px 6px; margin: -4px 0 0; position: relative; }
.actor.young .name-tag { background: #1a3a1a; border-color: #b22b2b; color: #ffd66b; }

/* 年轻园丁动作类 */
.actor.young.scratch-head .arm { animation: scratch 1s ease-in-out; }
@keyframes scratch { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-30px) rotate(-40deg); } }
.actor.young.point-away .arm { animation: point 1s ease-in-out; }
@keyframes point { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-45deg) translateX(10px); } }
.actor.young.cheer .body-wrap { animation: cheer 0.5s ease-in-out 3; }
@keyframes cheer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.actor.young.cheer .face .mouth { width: 12px; height: 6px; border-radius: 50%; }
.actor.young.shake-head .head { animation: shakeHead 0.6s ease-in-out 2; transform-origin: bottom center; }
@keyframes shakeHead { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

/* ===== KPI 牌 ===== */
.kpi { position: absolute; bottom: 30%; left: 8%; width: 220px; padding: 16px; background: #f5efe1; color: #2a1a0a; border: 4px solid #2a1a0a; border-radius: 8px; font-family: "Courier New", monospace; box-shadow: 6px 6px 0 #2a1a0a; transform: rotate(-3deg); }
.kpi h3 { font-size: 18px; border-bottom: 2px dashed #2a1a0a; padding-bottom: 6px; margin-bottom: 8px; }
.kpi .row { display: flex; justify-content: space-between; font-size: 14px; margin: 4px 0; }
.kpi .row strong { color: #b22b2b; }

/* ===== 花园与微风吹拂 ===== */
.garden { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14%; }
.flower { position: relative; width: 80px; height: 120px; margin: 0 18px; }
.flower .stem { position: absolute; left: 50%; bottom: 0; width: 6px; height: 80px; background: #2e5e1c; transform: translateX(-50%); transform-origin: bottom center; }
.flower .petals { position: absolute; left: 50%; top: 0; width: 60px; height: 60px; transform: translateX(-50%); }
.flower .petal { position: absolute; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #2a1a0a; }
.flower .petal.p1 { left: 0; top: 16px; background: #e85c8a; } .flower .petal.p2 { right: 0; top: 16px; background: #e85c8a; }
.flower .petal.p3 { left: 8px; top: 0; background: #e85c8a; } .flower .petal.p4 { right: 8px; top: 0; background: #e85c8a; }
.flower .petal.p5 { left: 16px; top: 24px; background: #ff9ec2; }
.flower .center { position: absolute; left: 50%; top: 14px; width: 22px; height: 22px; background: #ffd66b; border: 2px solid #2a1a0a; border-radius: 50%; transform: translateX(-50%); z-index: 2; }
.flower.bloom .petals { animation: bloom 1.2s ease forwards; }
@keyframes bloom { 0% { transform: translateX(-50%) scale(0); } 100% { transform: translateX(-50%) scale(1); } }

.flower.sway .stem { animation: sway 3s ease-in-out infinite; }
.flower.sway:nth-child(2) .stem { animation-delay: 0.5s; }
.flower.sway:nth-child(3) .stem { animation-delay: 1s; }
@keyframes sway { 0%, 100% { transform: translateX(-50%) rotate(0); } 50% { transform: translateX(-50%) rotate(3deg); } }

/* ===== 全国地图 ===== */
.map { position: absolute; inset: 14% 10% 24% 10%; background: #2e5e1c; border: 4px solid #2a1a0a; border-radius: 8px; }
.city { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: #ffd66b; border: 3px solid #2a1a0a; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all .8s ease; }
.city.on { background: #ff6b6b; box-shadow: 0 0 18px #ff6b6b; }

/* ===== 思考问题 ===== */
.question { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.88); opacity: 0; transition: opacity 1.2s ease; z-index: 8; pointer-events: none; }
.question.active { opacity: 1; }
.question p { font-size: 30px; color: #ffd66b; text-align: center; line-height: 1.7; max-width: 80%; }

/* ===== 进度条 ===== */
#progress { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(255,255,255,0.15); z-index: 20; }
#progress-bar { width: 0; height: 100%; background: #ffd66b; transition: width 0.2s linear; }

/* ===== 控件 ===== */
#controls { position: absolute; right: 16px; top: 16px; display: flex; gap: 8px; z-index: 50; }
#controls button { background: rgba(0,0,0,0.75); color: #ffd66b; border: 2px solid #ffd66b; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 18px; font-weight: 700; box-shadow: 0 2px 12px rgba(0,0,0,0.5); }
#controls button:hover { background: rgba(255, 214, 107, 0.85); color: #2a1a0a; }

/* ===== 中央播放覆盖层 ===== */
#start-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(14,13,18,0.88); z-index: 40; transition: opacity .6s ease; }
#start-overlay.hidden { opacity: 0; pointer-events: none; }
#start-overlay .big-btn { background: #ffd66b; color: #2a1a0a; border: none; padding: 22px 56px; font-size: 28px; font-weight: 700; border-radius: 12px; cursor: pointer; box-shadow: 0 6px 24px rgba(255,214,107,0.4); }
#start-overlay .big-btn:hover { background: #fff0b0; }
#start-overlay .hint { margin-top: 18px; color: #d49b6a; font-size: 16px; letter-spacing: 4px; }

/* ====== 冬天 / 枯枝 / 花瓶 ====== */
.sky.winter { background: linear-gradient(180deg, #4a5a6a 0%, #8a9aaa 50%, #d4d4d4 100%); }
.ground.snow { background: linear-gradient(180deg, #e0e0e0 0%, #a0a0a0 100%); }
.snow { position: absolute; inset: 0; background-image:
    radial-gradient(2px 2px at 20% 30%, #fff 50%, transparent 50%),
    radial-gradient(2px 2px at 60% 70%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 80% 20%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 30% 80%, #fff 50%, transparent 50%),
    radial-gradient(2px 2px at 50% 50%, #fff 50%, transparent 50%);
  background-size: 200px 200px; opacity: 0.8; pointer-events: none; animation: snowFall 2s linear infinite; }
@keyframes snowFall { 0% { background-position: 0 0; } 100% { background-position: 0 200px; } }
.withered { position: absolute; bottom: 4%; width: 30px; height: 50px; background: #3a2a1a; clip-path: polygon(50% 0, 60% 100%, 40% 100%); }
.withered::after { content: ""; position: absolute; top: 8px; left: -8px; width: 46px; height: 3px; background: #3a2a1a; transform: rotate(-20deg); }
.withered::before { content: ""; position: absolute; top: 18px; right: -8px; width: 46px; height: 3px; background: #3a2a1a; transform: rotate(20deg); }
.vase { position: absolute; bottom: 4%; width: 40px; height: 50px; background: #c9a14a; border: 3px solid #2a1a0a; border-radius: 6px 6px 14px 14px; }
.vase::after { content: ""; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 30px; height: 24px; background: #ff6b6b; border: 2px solid #2a1a0a; border-radius: 50%; }

/* ====== 巡查：道路 / 王旗 / 马 ====== */
.sky.morning { background: linear-gradient(180deg, #d49b6a 0%, #f5d3a4 60%, #fff0b0 100%); }
.road { position: absolute; left: 0; right: 0; bottom: 16%; height: 24%; background: linear-gradient(180deg, #8a6a4a 0%, #4a3a1a 100%); }
.road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, #ffd66b 0 30px, transparent 30px 60px); }
.royal-flag { position: absolute; width: 40px; height: 80px; background: #b22b2b; border: 3px solid #2a1a0a; clip-path: polygon(0 0, 100% 25%, 0 50%); }
.royal-flag::after { content: "龍"; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); color: #ffd66b; font-size: 16px; font-weight: 900; }
.horse { position: absolute; bottom: 6%; width: 90px; height: 60px; }
.horse .body { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: #4a2a1a; border: 3px solid #2a1a0a; border-radius: 50% 40% 30% 30%; }
.horse .head { position: absolute; left: 0; top: -10px; width: 28px; height: 32px; background: #4a2a1a; border: 3px solid #2a1a0a; border-radius: 40% 60% 30% 30%; }
.horse .head::after { content: ""; position: absolute; top: 6px; right: -2px; width: 14px; height: 4px; background: #2a1a0a; transform: rotate(-10deg); }
.horse .leg { position: absolute; bottom: 0; width: 6px; height: 22px; background: #4a2a1a; border: 2px solid #2a1a0a; border-radius: 0 0 4px 4px; transform-origin: top center; animation: horseWalk 0.6s ease-in-out infinite alternate; }
.horse .leg.l1 { left: 12px; animation-delay: 0s; } .horse .leg.l2 { left: 32px; animation-delay: 0.3s; } .horse .leg.l3 { right: 32px; animation-delay: 0.1s; } .horse .leg.l4 { right: 12px; animation-delay: 0.4s; }
@keyframes horseWalk { 0% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } }
.horse .tail { position: absolute; right: -6px; top: 6px; width: 18px; height: 22px; background: #2a1a0a; border-radius: 0 50% 50% 0; animation: tailSwing 1s ease-in-out infinite alternate; transform-origin: left center; }
@keyframes tailSwing { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } }

/* ====== 四把尺子展示板 ====== */
.ruler-board { position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); width: 76%; display: flex; gap: 16px; justify-content: center; }
.ruler { flex: 1; max-width: 180px; padding: 18px 10px 14px; background: #f5efe1; color: #2a1a0a; border: 4px solid #2a1a0a; border-radius: 8px; text-align: center; box-shadow: 5px 5px 0 #2a1a0a; transform: rotate(-1deg); position: relative; }
.ruler:nth-child(2) { transform: rotate(1deg); } .ruler:nth-child(3) { transform: rotate(-1deg); } .ruler:nth-child(4) { transform: rotate(1deg); }
.ruler .ico { font-size: 36px; margin-bottom: 6px; }
.ruler .name { font-size: 18px; font-weight: 800; margin-bottom: 4px; letter-spacing: 2px; }
.ruler .desc { font-size: 12px; color: #6b4a2a; line-height: 1.4; }
.ruler.survival { background: #ffe2e2; } .ruler.labor { background: #fff0c8; } .ruler.incentive { background: #e2f0d4; } .ruler.meaning { background: #e2d4f0; }

/* ====== 春天 / 樱花 ====== */
.sky.spring { background: linear-gradient(180deg, #ffc8d8 0%, #ffeae0 60%, #fff5e0 100%); }
.ground.spring { background: linear-gradient(180deg, #7a9a5a 0%, #3a5a2a 100%); }
.cherry { position: absolute; inset: 0; background-image:
    radial-gradient(8px 8px at 20% 30%, #ffb8c8 50%, transparent 50%),
    radial-gradient(6px 6px at 60% 70%, #ff9eb8 50%, transparent 50%),
    radial-gradient(10px 10px at 80% 20%, #ffc8d4 50%, transparent 50%),
    radial-gradient(7px 7px at 30% 80%, #ffaabb 50%, transparent 50%),
    radial-gradient(9px 9px at 50% 50%, #ffc0d0 50%, transparent 50%);
  background-size: 300px 300px; opacity: 0.7; pointer-events: none; animation: cherryFall 3s linear infinite; }
@keyframes cherryFall { 0% { background-position: 0 0; } 100% { background-position: 0 300px; } }
.flower.bloom-spring .petals { animation: bloom 1.5s ease forwards; }