/* Shared zoo palette and motion rules. World coordinates remain in styles.css. */
:root {
  --zoo-ink: #284b3f;
  --zoo-muted: #6c8071;
  --zoo-cream: #fff8e9;
  --zoo-border: #d9d8b9;
  --zoo-green: #48875c;
  --zoo-panel-shadow: 0 12px 32px #17362a38, inset 0 2px 0 #ffffffb3;
}
body { background: #183e33; font-family: "Trebuchet MS", Arial, sans-serif; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #ffdc72; outline-offset: 4px; }
.game-shell { box-shadow: 0 0 90px #061e2466; }
.top-menu-button {
  background: linear-gradient(#fffef2, #f3e8ce);
  border: 2px solid #d5d5b6;
  border-radius: 20px;
  box-shadow: 0 4px 0 #809379, 0 6px 14px #163d3033, inset 0 2px 0 #fff;
  color: var(--zoo-ink);
  font-size: 20px;
  padding: 14px 20px;
  top: 14px;
}
.top-menu-button:hover, .top-menu-button:focus-visible { background: #fffdf1; }
.resource-hud { gap: 8px; }
.resource-pill {
  background: linear-gradient(#fffdf0, #f3e9d2);
  border: 2px solid var(--zoo-border);
  border-radius: 22px;
  box-shadow: 0 4px 0 #a7ad8c, 0 7px 15px #153c2e26, inset 0 2px 0 #fff;
  color: var(--zoo-ink);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  height: 50px;
  min-width: 104px;
  padding: 5px 14px 6px 10px;
}
.resource-pill img { height: 34px; width: 34px; filter: drop-shadow(0 2px 1px #123c2222); }
.focus-action-button {
  background: linear-gradient(#70c183, #43885b);
  border-color: #fff9db;
  box-shadow: inset 0 3px 0 #ffffff55, 0 4px 0 #285b3b, 0 7px 15px #183f3533;
}
.action-button { filter: drop-shadow(0 4px 3px #1e432936); }
.action-price {
  border: 2px solid #d1d4b7;
  border-radius: 12px;
  background: linear-gradient(#fffdf0,#f3e9d2);
  color: var(--zoo-ink);
  box-shadow: 0 3px 0 #9da789, 0 4px 9px #153b3029;
  font-variant-numeric: tabular-nums;
}
.room-menu {
  background: linear-gradient(#214c3670,#143e30b8), url("images/rooms/room1-repair/room1_room_bg.png") center / cover;
  padding: 38px;
}
.room-menu-panel {
  background: var(--zoo-cream);
  border: 3px solid #e2d9ba;
  border-radius: 30px;
  box-shadow: 0 8px 0 #3b6b4f, 0 25px 65px #12302655, inset 0 3px 0 #fff;
  color: var(--zoo-ink);
  gap: 16px;
  padding: 30px;
}
.menu-heading-copy { display: grid; gap: 8px; }
.menu-eyebrow { color: var(--zoo-green); font-size: 15px; font-weight: 700; letter-spacing: .4px; }
.menu-heading h1 { color: var(--zoo-ink); font-size: 34px; line-height: 1.15; }
.menu-intro { color: var(--zoo-muted); font-size: 19px; line-height: 1.45; margin: 0 0 4px; max-width: 410px; }
.menu-tabs { background: #e7eddc; border-radius: 15px; }
.menu-tab { border-radius: 12px; color: var(--zoo-green); font-size: 15px; }
.menu-tab.selected { background: #4f8a62; color: #fff; box-shadow: 0 2px 3px #285b3b25; }
.room-button {
  align-items: center;
  background: #eef2de;
  border: 2px solid #cbd6b9;
  border-radius: 20px;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 #c2ceac;
  color: var(--zoo-ink);
  display: flex;
  gap: 18px;
  min-height: 140px;
  overflow: hidden;
  padding: 12px;
  text-align: left;
  text-shadow: none;
  transition: background 150ms, transform 150ms;
}
.room-button:hover { background: #e0eccb; transform: translateY(-2px); }
.room-button-thumbnail { border: 2px solid #fff9e9; border-radius: 14px; height: 110px; object-fit: cover; width: 110px; }
.room-button-copy { display: grid; gap: 9px; flex: 1; }
.room-button-copy strong { font-size: 23px; line-height: 1.15; }
.room-button-copy > span { color: var(--zoo-muted); font-size: 15px; font-weight: 600; }
.room-button-arrow { align-items: center; background: #538f61; border-radius: 50%; box-shadow: 0 3px 0 #3b6e49; color: #fff; display: flex; font-size: 38px; height: 42px; justify-content: center; padding-bottom: 3px; width: 42px; }
.dialog-box {
  background: var(--zoo-cream);
  border: 3px solid var(--zoo-border);
  border-radius: 24px;
  box-shadow: var(--zoo-panel-shadow);
  color: var(--zoo-ink);
  padding-right: 26px;
}
.dialog-speaker { color: var(--zoo-green); }
.dialog-text { line-height: 1.4; }
.variant-options { gap: 16px; bottom: 22px; }
.variant-option {
  background: linear-gradient(#fffbed,#f2f2dd);
  border: 3px solid #d2dabb;
  border-radius: 22px;
  box-shadow: inset 0 2px 0 #fff, 0 5px 0 #a1b494, 0 8px 20px #17392d33;
}
.variant-option.selected {
  border-color: #edc562;
  box-shadow: inset 0 2px 0 #fff, 0 0 0 3px #fff4ba, 0 5px 0 #599365, 0 9px 22px #17392d3d;
}
.variant-option.selected::after {
  background: #518d5f;
  border: 2px solid #fff8d9;
  border-radius: 50%;
  color: #fff;
  content: "✓";
  font-size: 17px;
  font-weight: 900;
  height: 25px;
  line-height: 25px;
  position: absolute;
  right: -9px;
  text-align: center;
  top: -9px;
  width: 25px;
  z-index: 4;
}
.variant-buy {
  background: linear-gradient(#75ba7c,#448b5b);
  border: 2px solid #d9efbc;
  border-radius: 14px;
  box-shadow: inset 0 2px 0 #ffffff55, 0 3px 0 #2f6945;
  height: 45px;
  min-width: 105px;
  padding: 0 9px 3px 29px;
  text-shadow: 0 1px 1px #244c3980;
}
.variant-buy::before { background: url("images/minigame-ui/lobby/coin_icon.png") center / contain no-repeat; content: ""; height: 24px; left: 5px; position: absolute; top: 8px; width: 24px; }
.variant-skill-value { color: var(--zoo-ink); }
.variant-map-skills { background: #fff8e9f5; border: 2px solid var(--zoo-border); border-radius: 16px; box-shadow: var(--zoo-panel-shadow); color: var(--zoo-ink); }
.variant-map-skills .variant-skill-value { background: #e7edda; color: var(--zoo-ink); text-shadow: none; }
.variant-close, .minigame-result-close, .minigame-settings-close, .minigame-hint-close {
  background: linear-gradient(#fffdf0,#f0e6cc);
  border: 2px solid var(--zoo-border);
  border-radius: 50%;
  box-shadow: 0 3px 0 #a6ac8d, inset 0 2px 0 #fff;
  color: var(--zoo-ink);
  text-shadow: none;
}
.minigame-result-panel, .minigame-settings-panel, .all-levels-card, .minigame-hint-panel {
  background: var(--zoo-cream);
  border: 3px solid var(--zoo-border);
  border-radius: 26px;
  box-shadow: var(--zoo-panel-shadow);
  color: var(--zoo-ink);
}
.minigame-settings-zoo, .all-levels-card button {
  background: linear-gradient(#75ba7c,#448b5b);
  border: 2px solid #d9efbc;
  border-radius: 16px;
  box-shadow: 0 4px 0 #2f6945, inset 0 2px 0 #ffffff66;
  color: #fff;
}
.minigame-top-panel {
  background: linear-gradient(#fffdf1,#f2e8d1);
  border: 2px solid var(--zoo-border);
  border-radius: 22px;
  box-shadow: 0 4px 0 #a5b294, inset 0 2px 0 #fff;
}
.minigame-level-label { color: var(--zoo-ink); }
.minigame-booster {
  background: linear-gradient(#fffbed,#f1ead4);
  border: 2px solid var(--zoo-border);
  border-radius: 20px;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 #a5b294, 0 7px 13px #21483226;
}
.minigame-booster.selected { border-color: #60986b; box-shadow: inset 0 2px 0 #fff, 0 0 0 3px #d5e6b8, 0 4px 0 #51835c; }
.booster-count { background: linear-gradient(#79bd83,#478e5e); border-color: #e0efc6; color: #fff; }
.cleanup-progress {
  background: #fff9e9f5;
  border: 2px solid #d7ddbb;
  border-radius: 18px;
  box-shadow: var(--zoo-panel-shadow);
  color: var(--zoo-ink);
  font-size: 18px;
  font-weight: 700;
  left: 50%;
  min-width: 180px;
  padding: 13px 20px 18px;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: 88px;
  transform: translateX(-50%);
  z-index: 225;
}
.cleanup-progress::after { background: #57976a; border-radius: 3px; bottom: 7px; content: ""; height: 4px; left: 13px; position: absolute; width: calc((100% - 26px) * var(--cleanup-ratio,0)); transition: width 200ms ease; }

/* Ground and contact shadows remain static; all living parts share breathing. */
.animal-motion-group { animation: none; will-change: auto; }
.animal-motion-group.is-sleeping, .animal-motion-group.animal-click-wiggle, .animal-motion-group.animal-wake-nudge { animation: none; }
.animal-living-parts { animation: zoo-breathe var(--breath-duration,5s) ease-in-out var(--breath-delay,0s) infinite; inset: 0; position: absolute; transform-origin: var(--animal-breath-origin,50% 96%); }
.animal-motion-group[data-profile="water"] .animal-living-parts { animation-name: zoo-water-idle; }
.animal-motion-group[data-profile="bird"] .animal-living-parts { animation-name: zoo-bird-idle; }
.animal-motion-group.is-sleeping .animal-living-parts { animation-duration: 7.8s; }
.animal-click-wiggle .animal-living-parts { animation: animal-click-wiggle 460ms ease-in-out; }
.animal-wake-nudge .animal-living-parts { animation: animal-wake-nudge 520ms ease-out; }
.sprite.animal-wing { animation: zoo-wing-fold 11.8s ease-in-out infinite; }
.sprite.animal-ear.motion-earSmall,
.sprite.animal-ear.motion-earTwitch,
.sprite.animal-ear.motion-wideSharp { animation-name: zoo-ear-twitch; }
.sprite.animal-tail.motion-slowAndSmall,
.sprite.animal-tail.motion-wideSharp { animation-name: zoo-tail-swish; }
.sprite.animal-appendage { animation-delay: var(--motion-delay,0s); }
.sprite.animal-static-part { pointer-events: none; }
.sprite.animal-closed-eyes { transition: none; pointer-events: none; }
.animal-motion-group.is-sleeping .animal-appendage { animation-play-state: paused; }
.hidden .animal-living-parts, .hidden .animal-appendage,
.is-paused .animal-living-parts, .is-paused .animal-appendage,
.is-offscreen .animal-living-parts, .is-offscreen .animal-appendage { animation-play-state: paused; }
.animal-motion-group.is-transitioning .animal-living-parts { animation-play-state: paused; }
@keyframes zoo-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.009,1.006); } }
@keyframes zoo-water-idle { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.7px) rotate(.35deg); } }
@keyframes zoo-bird-idle { 0%,100% { transform: rotate(0) scale(1); } 50% { transform: rotate(.4deg) scale(1.006,1.008); } }
@keyframes zoo-wing-fold { 0%,68%,100% { transform: rotate(0); } 74% { transform: rotate(-1.8deg); } 82% { transform: rotate(1.1deg); } 90% { transform: rotate(-.4deg); } }
@keyframes zoo-ear-twitch { 0%,70%,100% { transform: rotate(0); } 77% { transform: rotate(-4deg); } 82% { transform: rotate(3deg); } 88% { transform: rotate(-1.5deg); } }
@keyframes zoo-tail-swish { 0%,65%,100% { transform: rotate(0); } 74% { transform: rotate(-3deg); } 84% { transform: rotate(2.8deg); } 92% { transform: rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) {
  .animal-motion-group, .animal-living-parts, .sprite.animal-appendage { animation: none !important; }
  .animal-float-icon { display: none; }
}
@media (max-width: 640px) {
  .resource-hud { left: 10px; right: 10px; gap: 7px; top: calc(env(safe-area-inset-top,0px) + 10px); }
  .resource-pill { flex: 1; min-width: 0; height: 42px; gap: 5px; font-size: 15px; padding: 4px 8px; border-radius: 17px; }
  .resource-pill:nth-child(2) { flex: 1.55; }
  .resource-pill img { height: 27px; width: 27px; }
  .top-menu-button { top: calc(env(safe-area-inset-top,0px) + 66px); right: 12px; font-size: 16px; border-radius: 15px; padding: 10px 16px; }
  .focus-action-button { top: calc(env(safe-area-inset-top,0px) + 123px); right: 15px; }
  .room-menu { padding: 18px; }
  .room-menu-panel { padding: 23px 18px; border-radius: 25px; gap: 12px; }
  .menu-heading { gap: 10px; }
  .menu-heading h1 { font-size: 25px; }
  .menu-eyebrow { font-size: 12px; letter-spacing: 0; }
  .menu-tab { min-height: 33px; padding: 0 9px; font-size: 12px; }
  .menu-intro { font-size: 16px; line-height: 1.4; }
  .room-button { min-height: 116px; gap: 10px; padding: 9px; border-radius: 17px; }
  .room-button-thumbnail { height: 85px; width: 78px; }
  .room-button-copy strong { font-size: 18px; }
  .room-button-copy > span { font-size: 12px; line-height: 1.4; }
  .room-button-arrow { width: 28px; height: 28px; font-size: 28px; flex-shrink: 0; }
  .variant-options { left: 32px; right: 32px; gap: 10px; bottom: 18px; }
  .variant-option { border-radius: 17px; min-width: 0; }
  .variant-buy { min-width: 0; height: 40px; font-size: 15px; width: calc(100% - 12px); padding-right: 5px; }
  .variant-buy::before { height: 22px; width: 22px; top: 7px; }
  .dialog-box { border-radius: 20px; padding: 16px 20px; }
  .dialog-text { font-size: 18px; }
  .cleanup-progress { top: 71px; font-size: 15px; min-width: 136px; }
}
@media (max-width: 380px) {
  .resource-pill { font-size: 12px; padding: 4px 5px; gap: 3px; }
  .resource-pill img { height: 23px; width: 23px; }
  .menu-heading h1 { font-size: 23px; }
  .room-button-thumbnail { width: 62px; }
  .room-button-copy strong { font-size: 16px; }
  .variant-options { left: 20px; right: 20px; gap: 8px; }
}

/* ImageGen UI skin v2. Raster rims carry the volume; labels stay editable. */
:root { --zoo-ink:#66451f; --zoo-muted:#88734e; --zoo-green:#2d9327; }
body { font-family:"Trebuchet MS",Arial,sans-serif; }
.room-menu { background:linear-gradient(#17461b18,#123d2544),url("images/rooms/room1-repair/room1_room_bg.png") center/cover; }
.room-menu-panel,.dialog-box,.variant-map-skills,.minigame-result-panel,
.minigame-settings-panel,.minigame-hint-panel,.all-levels-card {
  background:none;
  border:26px solid transparent;
  border-image: url("images/ui-v2/panel.webp") 24% 18% fill / 26px / 0 stretch;
  border-radius:0;
  box-shadow:none;
  color:var(--zoo-ink);
}
.room-menu-panel { max-width:610px; gap:18px; padding:16px 18px 24px; filter:drop-shadow(0 16px 15px #15392050); }
.menu-heading { justify-content:center; position:relative; }
.menu-heading-copy { width:100%; text-align:center; align-items:center; }
.menu-eyebrow { color:#987233; font-size:16px; font-weight:800; }
.menu-heading h1 {
  background:url("images/ui-v2/ribbon.webp") center/100% 100% no-repeat;
  color:#754914;
  font-size:36px;
  min-height:83px;
  margin:0 -28px;
  padding:21px 43px 25px;
  text-align:center;
  text-shadow:0 2px 0 #fff7b4;
  width:calc(100% + 56px);
}
.menu-tabs { display:none; }
.menu-intro { color:#896a3f; font-size:18px; text-align:center; margin:0 auto 6px; max-width:380px; }
.room-button {
  background:url("images/ui-v2/panel.webp") center/100% 100% no-repeat;
  border:0; border-radius:22px; box-shadow:none; color:#714e28;
  min-height:150px; padding:18px 20px; gap:16px;
}
.room-button:hover { background:url("images/ui-v2/panel.webp") center/100% 100% no-repeat; filter:brightness(1.04); }
.room-button-thumbnail { border:3px solid #ffeaa3; border-radius:18px; height:112px; width:112px; box-shadow:0 3px 0 #c28d42; }
.room-button-copy strong { font-size:24px; color:#785127; }
.room-button-copy > span { color:#99805b; font-size:14px; }
.room-button-arrow { background:url("images/ui-v2/tile-green.webp") center/100% 100% no-repeat; border:0; box-shadow:none; color:white; text-shadow:0 2px 1px #19691c; height:52px; width:52px; padding-bottom:7px; }
.top-menu-button,.dialog-next,.minigame-result-button,.minigame-settings-zoo,.all-levels-card button,
.menu-tab,.editor-command,.variant-buy {
  background:url("images/ui-v2/button-blue.webp") center/100% 100% no-repeat;
  border:0; border-radius:0; box-shadow:none;
  color:#fffdf2;
  font-weight:900;
  text-shadow:0 2px 1px #07546d;
}
.top-menu-button { font-size:19px; width:108px; height:55px; padding:0 12px 4px; }
.top-menu-button:hover,.top-menu-button:focus-visible { background:url("images/ui-v2/button-blue.webp") center/100% 100% no-repeat; filter:brightness(1.08); }
.variant-buy:hover,.variant-buy:focus-visible { background:url("images/ui-v2/button-green.webp") center/100% 100% no-repeat; filter:brightness(1.08); }
.dialog-next,.variant-buy,.minigame-result-button.primary,.minigame-result-button.danger,
.minigame-settings-zoo,.all-levels-card button,.editor-command.primary {
  background:url("images/ui-v2/button-green.webp") center/100% 100% no-repeat;
  border:0; box-shadow:none; color:white; text-shadow:0 2px 1px #246d12;
}
.dialog-next { min-width:132px; min-height:49px; padding:8px 18px 12px; }
.resource-pill,.action-price,.cleanup-progress,.minigame-result-reward-pill {
  background:url("images/ui-v2/hud.webp") center/100% 100% no-repeat;
  border:0; border-radius:0; box-shadow:none;
  color:#754d20; font-weight:900; text-shadow:0 1px 0 #fff4c9;
}
.resource-pill { height:54px; padding:7px 17px 11px 9px; }
.resource-pill img { width:38px; height:38px; }
.resource-hud { gap:8px; }
.action-price { padding:5px 12px 8px; min-height:31px; }
.action-button.repair-action { background-image:url("images/ui-v2/action-clean.webp"); }
.action-button.decor-action,.action-button.decor-action.is-unaffordable { background-image:url("images/ui-v2/tile-green.webp"); }
.action-button.decor-action::before { content:"+"; color:#fffceb; font-size:48px; font-weight:900; line-height:1; position:absolute; inset:9px 0 0; text-align:center; text-shadow:0 3px 1px #286b18; }
.action-button.decor-action.is-unaffordable { filter:grayscale(.75); }
.cashier-income-bubble { background:url("images/ui-v2/hud.webp") center/100% 100% no-repeat; border:0; border-radius:0; box-shadow:none; color:#805421; }
.cashier-income-bubble::after { display:none; }
.room-complete-title { color:#805322; text-shadow:0 2px 0 #fff4b1; }
.focus-action-button,.minigame-map-button {
  background:url("images/ui-v2/tile-green.webp") center/100% 100% no-repeat;
  border:0; border-radius:0; box-shadow:none; color:#fff8d4; text-shadow:0 3px 1px #246718;
}
.focus-action-button:hover,.focus-action-button:focus-visible,.minigame-map-button:hover,.minigame-map-button:focus-visible { background:url("images/ui-v2/tile-green.webp") center/100% 100% no-repeat; filter:brightness(1.07); }
.minigame-map-button { width:100px; height:102px; padding:0 0 7px; }
.minigame-map-button::before { display:none; }
.minigame-map-button strong { font-size:43px; }
.variant-option { background:none; border:14px solid transparent; border-image:url("images/ui-v2/panel.webp") 24% 18% fill /14px /0 stretch; border-radius:0; box-shadow:none; }
.variant-option.selected { border-color:transparent; filter:drop-shadow(0 0 5px #ffdc53); box-shadow:none; }
.variant-option.selected::after { background:url("images/ui-v2/tile-green.webp") center/100% 100% no-repeat; border:0; border-radius:0; box-shadow:none; width:32px; height:33px; line-height:28px; }
.variant-buy { height:47px; min-width:100px; padding:0 12px 6px 33px; }
.variant-skill-value { color:#725125; }
.variant-option.has-skills .variant-skills { background:url("images/ui-v2/panel.webp") center/100% 100% no-repeat; border:0; box-shadow:none; border-radius:0; padding:7px 3px 10px; display:flex; flex-direction:row; gap:3px; }
.variant-option.has-skills .variant-skill-row { flex:1; flex-direction:column; gap:2px; height:42px; }
.variant-option.has-skills .variant-skill-icon { flex-basis:18px; width:18px; height:18px; }
.variant-option.has-skills .variant-skill-value { flex-basis:auto; min-width:18px; font-size:14px; line-height:17px; }
.variant-option.has-skills .variant-art { top:65px; }
.variant-close { bottom:286px; right:16px; }
.variant-map-skills { border-width:12px; border-image-width:12px; padding:4px 8px; flex-direction:row; gap:7px; }
.variant-map-skills .variant-skill-row { flex-direction:column; justify-content:center; height:44px; gap:2px; }
.variant-map-skills .variant-skill-value { min-width:27px; font-size:16px; line-height:20px; }
.variant-map-skills .variant-skill-value { background:#fff3bc; color:#795225; }
.dialog-speaker { color:#40932a; }
.dialog-box { padding:10px 14px 13px; }
.variant-close,.minigame-result-close,.minigame-settings-close,.minigame-hint-close {
  background:url("images/ui-v2/button-close.webp") center/100% 100% no-repeat;
  border:0; border-radius:0; box-shadow:none; color:transparent; text-shadow:none;
  height:46px; width:46px; font-size:0;
}
.minigame-top-panel { background:url("images/ui-v2/hud.webp") center/100% 100% no-repeat; border:0; border-radius:0; box-shadow:none; padding:13px 21px 17px; }
.minigame-level-label { color:#735020; font-weight:900; }
.minigame-close,.minigame-booster,.audio-toggle,.editor-icon-button,.level-step {
  background:url("images/ui-v2/tile-blue.webp") center/100% 100% no-repeat;
  border:0; border-radius:0; box-shadow:none; color:#fffdf0; text-shadow:0 2px 0 #00697c;
}
.minigame-close { width:48px; height:49px; padding:9px 10px 13px; }
.minigame-booster { width:76px; height:80px; padding:13px 14px 20px; }
.minigame-booster img { width:49px; height:49px; }
.minigame-booster.selected { border:0; box-shadow:none; filter:drop-shadow(0 0 6px #ffe97c); transform:translateY(-4px); }
.booster-count { background:url("images/ui-v2/tile-green.webp") center/100% 100% no-repeat; border:0; border-radius:0; box-shadow:none; color:white; padding-bottom:3px; }
.minigame-result-panel,.minigame-settings-panel { padding:15px 21px 24px; }
.minigame-result-panel h2,.minigame-settings-panel h2,.all-levels-card h2 { color:#8e571d; text-shadow:0 2px 0 #fff8d3; }
.minigame-result-button { min-height:58px; padding:9px 25px 15px; }
.minigame-result[data-result="win"] .minigame-result-button:not(.primary) { background:url("images/ui-v2/button-blue.webp") center/100% 100% no-repeat; border:0; color:white; }
.minigame-result[data-result="fail"] .minigame-result-panel { background:none; }
.cleanup-progress { padding:13px 22px 19px; top:92px; }
.cleanup-progress::after { background:#64c63b; height:4px; bottom:11px; border-radius:10px; }
.sprite.cleanup-fly.animating { transition-duration:280ms; }
.audio-controls { display:flex; gap:6px; position:absolute; left:14px; top:78px; z-index:270; pointer-events:auto; }
.audio-toggle { width:44px; height:46px; padding:0 0 6px; font-size:26px; font-weight:900; cursor:pointer; }
.audio-toggle.is-muted { filter:saturate(.35) brightness(.86); }
.settings-audio { display:flex; flex-direction:column; gap:8px; margin:0 0 18px; }
.settings-audio-button { background:url("images/ui-v2/button-blue.webp") center/100% 100% no-repeat; border:0; height:52px; min-width:180px; padding:0 20px 6px; color:#fffdf2; font-size:18px; font-weight:900; text-shadow:0 2px 1px #07546d; cursor:pointer; }
.settings-audio-button.is-muted { filter:saturate(.45); }
.audio-toggle.is-muted::after { content:""; position:absolute; width:29px; height:3px; background:#fff7dd; transform:translate(-28px,22px) rotate(-45deg); box-shadow:0 1px 1px #4e798b; }
@media(max-width:640px) {
  .room-menu-panel { border-width:20px; border-image-width:20px; padding:9px 4px 13px; gap:13px; }
  .menu-heading h1 { font-size:29px; min-height:69px; padding:19px 28px 23px; margin:0 -12px; width:calc(100% + 24px); }
  .menu-eyebrow { font-size:13px; }
  .menu-intro { font-size:15px; max-width:260px; }
  .room-button { padding:17px 16px; gap:10px; min-height:128px; }
  .room-button-thumbnail { width:73px; height:89px; border-width:2px; }
  .room-button-copy strong { font-size:19px; }
  .room-button-copy > span { font-size:12px; }
  .room-button-arrow { width:31px; height:33px; font-size:26px; padding-bottom:5px; }
  .resource-pill { height:44px; font-size:15px; padding:5px 10px 9px 8px; }
  .resource-pill img { width:28px; height:28px; }
  .top-menu-button { width:96px; height:48px; font-size:17px; padding:0 8px 5px; }
  .variant-options { left:18px; right:18px; gap:8px; justify-content:center; overflow:visible; padding:0; }
  .variant-option { border-width:9px; border-image-width:9px; flex:1 1 0; width:auto; height:244px; min-width:0; }
  .variant-buy { min-width:0; height:43px; width:calc(100% - 5px); padding:0 5px 5px 27px; }
  .variant-buy::before { top:8px; left:5px; }
  .dialog-box { border-width:20px; border-image-width:20px; padding:6px 8px 10px; }
  .cleanup-progress { top:72px; font-size:15px; }
  .minigame-top-panel { padding:12px 18px 16px; }
  .minigame-booster { width:66px; height:70px; padding:12px 11px 18px; }
  .minigame-booster img { width:43px; height:43px; }
  .audio-controls { left:11px; top:66px; }
}

/* Larger, anatomically grouped poses. Feet, perch and rock remain grounded. */
.animal-head-motion,.animal-torso-motion { position:absolute; inset:0; pointer-events:none; }
.animal-head-motion { animation:zoo-head-look var(--pose-duration,7.3s) ease-in-out var(--pose-delay,0s) infinite; }
.animal-torso-motion { animation:zoo-torso-turn var(--torso-duration,3.6s) ease-in-out var(--pose-delay,0s) infinite; }
.animal-living-parts { animation-name:zoo-grounded-breathe; animation-duration:3.7s; }
.animal-motion-group[data-profile="bird"] .animal-head-motion { animation-name:zoo-bird-look; }
.animal-motion-group[data-profile="water"] .animal-head-motion { animation-name:zoo-head-look; }
.animal-motion-group[data-group*="mandarin_ducks"] .animal-head-motion,
.animal-motion-group[data-group*="capybara"] .animal-head-motion { animation-name:zoo-family-look; }
.sprite.animal-wing { animation:zoo-wing-active 6.7s ease-in-out var(--motion-delay,0s) infinite; }
.sprite.animal-ear.motion-earSmall,.sprite.animal-ear.motion-earTwitch,.sprite.animal-ear.motion-wideSharp { animation-name:zoo-ear-active; animation-duration:5.8s; }
.sprite.animal-tail.motion-slowAndSmall,.sprite.animal-tail.motion-wideSharp { animation-name:zoo-tail-active; animation-duration:6.1s; }
.is-paused .animal-head-motion,.is-paused .animal-torso-motion,
.is-offscreen .animal-head-motion,.is-offscreen .animal-torso-motion,
.hidden .animal-head-motion,.hidden .animal-torso-motion,
.is-transitioning .animal-head-motion,.is-transitioning .animal-torso-motion,
.is-sleeping .animal-head-motion { animation-play-state:paused; }
.is-sleeping .animal-torso-motion { animation-duration:5.2s; }
@keyframes zoo-grounded-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.005,1.004); } }
@keyframes zoo-torso-turn { 0%,100% { transform:rotate(-.65deg) scale(1); } 46% { transform:rotate(1.25deg) scale(1.032,1.021); } 74% { transform:rotate(.25deg) scale(1.016,1.008); } }
@keyframes zoo-head-look {
  0%,12%,100% { transform:rotate(0) scaleX(1); }
  27%,38% { transform:rotate(-5.5deg) scaleX(.955); }
  54% { transform:rotate(1.5deg) scaleX(1.015); }
  70%,81% { transform:rotate(4deg) scaleX(.975); }
}
@keyframes zoo-bird-look {
  0%,10%,100% { transform:rotate(0); }
  25%,37% { transform:rotate(-7deg) scaleX(.955); }
  53% { transform:rotate(1.5deg); }
  68%,80% { transform:rotate(6deg) scaleX(.98); }
}
@keyframes zoo-family-look { 0%,12%,100% { transform:rotate(0); } 28%,39% { transform:rotate(-3.4deg) scaleX(.97); } 56% { transform:rotate(.8deg); } 72%,82% { transform:rotate(2.8deg) scaleX(.985); } }
@keyframes zoo-ear-active { 0%,42%,100% { transform:rotate(0); } 49% { transform:rotate(-7deg); } 56% { transform:rotate(6deg); } 63% { transform:rotate(-3deg); } 70% { transform:rotate(1deg); } }
@keyframes zoo-tail-active { 0%,18%,100% { transform:rotate(0); } 36% { transform:rotate(-6deg); } 58% { transform:rotate(6deg); } 76% { transform:rotate(-3.5deg); } }
@keyframes zoo-wing-active { 0%,38%,100% { transform:rotate(0); } 48% { transform:rotate(-4deg); } 60% { transform:rotate(3.5deg); } 75% { transform:rotate(-2deg); } }
@media(prefers-reduced-motion:reduce) { .animal-head-motion,.animal-torso-motion { animation:none!important; } }