/* ============================================================
   restaurant-art.css - 猫猫食堂「美术层」动画与覆盖样式
   只影响视觉表现，不改任何逻辑。加载顺序在 restaurant.css 之后。
   ============================================================ */

/* ---------- 场景容器 / 背景 ---------- */
.rs-bg { image-rendering: auto; }
.rs-stage { background: #f4e2c4; box-shadow: inset 0 0 0 1px rgba(107,74,47,0.15), 0 6px 18px rgba(84,52,24,0.18); }
.rs-stage.night { filter: none; background: #423a4e; }   /* 夜景由场景 SVG 自带，不再整层压暗 */
.rs-stage.rain { background: #cfd8e4; }
.rs-stage.snow { background: #e6ecf3; }

/* ---------- 猫咪（角色感 + 景深阴影） ---------- */
.rs-npc { width: 17%; z-index: 3; }
.rs-npc svg, .rs-cat-svg { width: 100%; height: auto; display: block; overflow: visible; }
.rs-npc .rs-cat-svg { filter: drop-shadow(0 2px 1px rgba(84,52,24,0.20)); }
.rs-npc small {
  font-size: 0.62rem; color: #6b4a2f; background: rgba(255,250,238,0.88);
  border-radius: 9px; padding: 1px 6px; margin-top: -2px;
  box-shadow: 0 1px 2px rgba(84,52,24,0.18);
}
/* 尾巴摇 */
.rs-cat-svg .cat-tail { animation: ra-tail 1.6s ease-in-out infinite; }
.rs-npc.p .cat-tail { animation-duration: 0.7s; }
.rs-npc.r .cat-tail { animation-duration: 3s; }
/* 眨眼（睁/闭两组交叉淡入淡出） */
.rs-cat-svg .cat-eye-closed { opacity: 0; }
.rs-cat-svg .cat-eye-open { animation: ra-blinkOpen 5.6s infinite; }
.rs-cat-svg .cat-eye-closed { animation: ra-blinkClosed 5.6s infinite; }
.rs-cat-svg.cat-bianbian .cat-eye-open, .rs-cat-svg.cat-bianbian .cat-eye-closed { animation-delay: 1.3s; }
.rs-cat-svg.cat-xiaobei .cat-eye-open, .rs-cat-svg.cat-xiaobei .cat-eye-closed { animation-delay: 2.4s; }
/* 小美：和三只错开；警戒脸（尖眼）眨得慢一点、圆眼睛快一点 */
.rs-cat-svg.cat-xiaomei .cat-eye-open, .rs-cat-svg.cat-xiaomei .cat-eye-closed { animation-delay: 3.7s; }
.rs-cat-svg.cat-xiaomei.xm-round .cat-eye-open, .rs-cat-svg.cat-xiaomei.xm-round .cat-eye-closed { animation-duration: 4.2s; }
.rs-cat-svg.cat-xiaomei.xm-sharp .cat-eye-open, .rs-cat-svg.cat-xiaomei.xm-sharp .cat-eye-closed { animation-duration: 7.4s; }
.rs-cat-svg.st-RESTING .cat-eye-open, .rs-cat-svg.st-SLEEPING .cat-eye-open { animation: none; opacity: 0; }
.rs-cat-svg.st-RESTING .cat-eye-closed, .rs-cat-svg.st-SLEEPING .cat-eye-closed { animation: none; opacity: 1; }
/* 状态动作 */
.rs-npc .rs-cat-svg { animation: ra-breathe 3.2s ease-in-out infinite; }
.rs-npc.w .rs-cat-svg { animation: ra-work 1.15s ease-in-out infinite; }
.rs-npc.p .rs-cat-svg { animation: ra-play 0.72s ease-in-out infinite; }
.rs-npc.r .rs-cat-svg { animation: ra-rest 2.8s ease-in-out infinite; }
.rs-npc.r .rs-cat-svg.st-SLEEPING { animation: ra-sleep 3.8s ease-in-out infinite; }
/* 道具微动 */
.rs-cat-svg .cat-tray { animation: ra-tray 1.6s ease-in-out infinite; }
.rs-cat-svg .cat-ball { animation: ra-ballroll 1.4s ease-in-out infinite; }
.rs-cat-svg .cat-zzz { animation: ra-zzz 2.4s ease-in-out infinite; }
.rs-cat-svg .cat-zzz2 { animation: ra-zzz 2.4s ease-in-out infinite 0.6s; }
.rs-cat-svg .cat-pawtool { animation: ra-stir 0.9s ease-in-out infinite; }

/* ---------- 顾客（不再是色块） ---------- */
.rs-cust2 {
  background: transparent; border-radius: 0; width: 12%; height: auto; z-index: 2;
}
.rs-cust2 svg, .rs-cust-svg { width: 100%; height: auto; display: block; overflow: visible; }
.rs-cust2 .rs-cust-svg { filter: drop-shadow(0 2px 1px rgba(84,52,24,0.18)); }
.rs-cust2.enter { background: transparent; }
.rs-cust2.eat { background: transparent; }
.rs-cust2.enter .rs-cust-svg, .rs-cust2.leave .rs-cust-svg { animation: ra-walk 0.62s ease-in-out infinite; }
.rs-cust2.eat .rs-cust-svg { animation: ra-eat 1.5s ease-in-out infinite; }
.rs-cust2.leave { opacity: 0.6; }
/* 用餐热气 / 付款金币 */
.rs-cust2 .rs-steam { animation: ra-steam 1.8s ease-in-out infinite; }
.rs-food { display: none; }   /* 碗已画进顾客 SVG，隐藏旧 emoji */
.rs-pay {
  top: -1.4em; left: 50%; font-size: 0.72rem; font-style: normal; font-weight: bold; color: #8a6a2a;
  width: 1.15em; height: 1.15em; line-height: 1.15em; text-align: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #f2c14e 60%, #d9a03c);
  box-shadow: 0 1px 2px rgba(84,52,24,0.3); animation: rs-payfloat 1.4s ease forwards;
}

/* ---------- 烤炉上的鱼（覆盖层定位到场景烤炉） ---------- */
.rs-oven-dish { left: 6.5%; top: 22%; width: 18%; height: auto; font-size: 0; z-index: 3; animation: none; }
.rs-oven-dish svg, .rs-grillfish { width: 100%; height: auto; display: block; overflow: visible; }

/* ---------- 玩家（狗宝，不再是 emoji） ---------- */
.rs-player { font-size: 0; width: 14%; z-index: 4; }
.rs-player svg, .rs-player-svg { width: 100%; height: auto; display: block; overflow: visible; }
.rs-player .rs-player-svg { filter: drop-shadow(0 2px 1px rgba(84,52,24,0.20)); animation: ra-breathe 2.6s ease-in-out infinite; }
.rs-player .dog-tail { animation: ra-tail 0.9s ease-in-out infinite; }

/* ---------- 场景内特效 ---------- */
.rs-bg .rs-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: ra-flame 0.5s ease-in-out infinite; }
.rs-bg .rs-ember { animation: ra-ember 1.6s ease-in-out infinite; }
.rs-bg .rs-smoke { transform-box: fill-box; transform-origin: 50% 100%; animation: ra-smoke 2.6s ease-in-out infinite; }
.rs-bg .rs-steam { transform-box: fill-box; transform-origin: 50% 100%; animation: ra-steam 2.2s ease-in-out infinite; }
.rs-bg .rs-spark { animation: ra-spark 1.4s ease-in-out infinite; }
.rs-bg .rs-river { animation: ra-river 3s ease-in-out infinite; }
.rs-bg .rs-rain { animation: ra-rain 0.7s linear infinite; }
.rs-bg .rs-snowfall { animation: ra-snow 3.4s linear infinite; }
.rs-bg .rs-willow { transform-box: fill-box; transform-origin: 50% 100%; animation: ra-sway 4.5s ease-in-out infinite; }
.rs-bg .rs-lantern { transform-box: fill-box; transform-origin: 50% 0%; animation: ra-sway 3.6s ease-in-out infinite; }
.rs-bg .rs-sign { transform-box: fill-box; transform-origin: 50% 0%; animation: ra-sway 5s ease-in-out infinite; }
.rs-bg .rs-dryfish { transform-box: fill-box; transform-origin: 50% 0%; animation: ra-sway 4s ease-in-out infinite; }
.rs-bg .rs-maneki-paw { transform-box: fill-box; transform-origin: 0% 100%; animation: ra-wave 1.2s ease-in-out infinite; }
.rs-bg .rs-tankfish { animation: ra-swim 3.2s ease-in-out infinite; }
.rs-bg .rs-garland { transform-box: fill-box; transform-origin: 50% 0%; animation: ra-sway 6s ease-in-out infinite; }
.rs-bg .rs-plant { transform-box: fill-box; transform-origin: 50% 100%; animation: ra-sway 5.5s ease-in-out infinite; }

/* ============================================================
   关键帧
   ============================================================ */
@keyframes ra-tail { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }
@keyframes ra-breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.012); } }
@keyframes ra-work { 0%,100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-2px) rotate(-2deg); } 60% { transform: translateY(0) rotate(2deg); } }
@keyframes ra-play { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-6px) scale(1.04); } 70% { transform: translateY(0) scale(0.98); } }
@keyframes ra-rest { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(1.4px) scale(0.985); } }
@keyframes ra-sleep { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(1.8px) scale(0.975); } }
@keyframes ra-blinkOpen { 0%,94%,100% { opacity: 1; } 96%,98% { opacity: 0; } }
@keyframes ra-blinkClosed { 0%,94%,100% { opacity: 0; } 96%,98% { opacity: 1; } }
@keyframes ra-tray { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
@keyframes ra-ballroll { 0%,100% { transform: translateX(0) rotate(0deg); } 50% { transform: translateX(4px) rotate(40deg); } }
@keyframes ra-zzz { 0% { opacity: 0; transform: translateY(2px); } 40% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes ra-stir { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(14deg); } }
@keyframes ra-walk { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-2.4px) rotate(1.5deg); } }
@keyframes ra-eat { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(1px) scale(1.02); } }
@keyframes ra-flame { 0%,100% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.25) scaleX(0.92); } }
@keyframes ra-ember { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes ra-smoke { 0% { opacity: 0; transform: translateY(3px) scale(0.8); } 40% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(-7px) scale(1.25); } }
@keyframes ra-steam { 0% { opacity: 0; transform: translateY(2px) scale(0.85); } 45% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(-6px) scale(1.2); } }
@keyframes ra-spark { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes ra-river { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes ra-rain { 0% { transform: translateY(-3px); opacity: 0.4; } 50% { opacity: 0.9; } 100% { transform: translateY(6px); opacity: 0.4; } }
@keyframes ra-snow { 0% { transform: translateY(-3px); opacity: 0.5; } 50% { opacity: 0.95; } 100% { transform: translateY(9px); opacity: 0.5; } }
@keyframes ra-sway { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes ra-wave { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(16deg); } }
@keyframes ra-swim { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }