/* ===== ZUG — cachorro realista + avatar ===== */
:root {
  --fur-highlight: #e8d4b8;
  --fur-light: #c9a66b;
  --fur-mid: #9a7344;
  --fur-dark: #6b4a28;
  --fur-shadow: #4a3218;
  --snout-light: #dbc4a8;
  --snout-mid: #b8956e;
  --nose: #1a120e;
  --eye-brown: #5c4020;
}

/* --- Avatar no painel (só cabeça) --- */
.dog-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(145deg, #2a3a32, #1a2420);
  border: 2px solid rgba(120, 180, 140, 0.35);
  box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  position: relative;
  --dog-age-brightness: 1;
  --dog-age-saturate: 1;
  --dog-age-contrast: 1;
  --dog-age-sepia: 0;
}
.dog-avatar-inner {
  position: absolute;
  inset: 0;
  transform: scale(1.15);
  transform-origin: center 60%;
  filter:
    sepia(var(--dog-age-sepia, 0))
    brightness(var(--dog-age-brightness, 1))
    saturate(var(--dog-age-saturate, 1))
    contrast(var(--dog-age-contrast, 1));
  transition: filter 0.45s ease, transform 0.45s ease;
}
.dog-avatar .av-head { position: relative; width: 100%; height: 100%; }
.dog-avatar .av-ear {
  position: absolute;
  top: 2px;
  width: 11px;
  height: 18px;
  border-radius: 50% 50% 40% 60%;
  background: linear-gradient(135deg, var(--fur-mid), var(--fur-dark));
  z-index: 1;
}
.dog-avatar .av-ear-l { left: 2px; transform: rotate(-18deg); }
.dog-avatar .av-ear-r { right: 2px; transform: rotate(18deg) scaleX(-1); }
.dog-avatar .av-ear::after {
  content: '';
  position: absolute;
  inset: 3px 2px 6px;
  background: #c48878;
  border-radius: 50%;
  opacity: .55;
}
.dog-avatar .av-skull {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 28px;
  border-radius: 45% 45% 42% 42%;
  background: radial-gradient(ellipse 80% 70% at 50% 35%, var(--fur-highlight), var(--fur-light) 55%, var(--fur-mid));
  box-shadow: inset -2px -3px 4px rgba(0,0,0,.12);
  z-index: 2;
}
.dog-avatar .av-brow {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 4px;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent, rgba(74,50,28,.25));
}
.dog-avatar .av-eye {
  position: absolute;
  top: 12px;
  width: 8px;
  height: 9px;
  border-radius: 50% 50% 45% 45%;
  background: #f8f6f0;
  overflow: hidden;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}
.dog-avatar .av-eye-l { left: 5px; }
.dog-avatar .av-eye-r { right: 5px; }
.dog-avatar .av-iris {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a6848, var(--eye-brown) 60%, #2a1810);
}
.dog-avatar .av-shine {
  position: absolute;
  top: 1px;
  left: 2px;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  opacity: .9;
}
.dog-avatar .av-snout {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 14px;
  border-radius: 50% 50% 48% 48%;
  background: linear-gradient(180deg, var(--snout-light), var(--snout-mid));
}
.dog-avatar .av-nose {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 7px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(ellipse at 40% 30%, #3a2820, var(--nose));
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.dog-avatar .av-nose::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 2px;
  width: 3px;
  height: 2px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
}
.dog-avatar .av-mouth {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 3px;
  border-bottom: 2px solid rgba(60,40,30,.5);
  border-radius: 0 0 50% 50%;
}
.dog-avatar .av-collar {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 4px;
  background: linear-gradient(180deg, #d04040, #902020);
  border-radius: 2px;
  z-index: 3;
}
.dog-avatar.mood-happy { border-color: rgba(74, 222, 128, 0.55); box-shadow: 0 0 12px rgba(74,222,128,.25); }
.dog-avatar.mood-hungry { border-color: rgba(248, 113, 113, 0.5); }
.dog-avatar.mood-okay { border-color: rgba(250, 204, 21, 0.45); }
.dog-avatar.mood-sleep .av-eye { height: 2px; top: 14px; background: var(--fur-mid); }
.dog-avatar.mood-sleep .av-iris, .dog-avatar.mood-sleep .av-shine { opacity: 0; }

/* --- Cachorro na cena --- */
.dog-wrap {
  position: relative;
  z-index: 2;
  width: 110px;
  height: 96px;
  --dog-age-brightness: 1;
  --dog-age-saturate: 1;
  --dog-age-contrast: 1;
  --dog-age-sepia: 0;
  transform-origin: bottom center;
  animation: dog-breathe 3.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
  transition: filter 0.35s;
}
.dog-wrap.happy { filter: drop-shadow(0 6px 18px rgba(255,200,100,.3)); }
.dog-wrap.eating { animation: dog-eat 0.35s ease 3; }
.dog-wrap.petting { animation: dog-wiggle 0.22s ease-in-out infinite; }

@keyframes dog-breathe {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.015) translateY(-1px); }
}
@keyframes dog-eat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes dog-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-2.5deg); }
  75% { transform: rotate(2.5deg); }
}

.dog-hit {
  position: absolute;
  inset: -22px;
  z-index: 100;
  cursor: grab;
  pointer-events: auto;
  background: transparent;
}
.dog-wrap.is-dragging .dog-hit {
  cursor: grabbing;
}

.dog {
  position: relative;
  width: 110px;
  height: 96px;
}

.dog-shadow {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 85px;
  height: 14px;
  background: radial-gradient(ellipse, rgba(0,0,0,.4) 0%, transparent 72%);
  border-radius: 50%;
  z-index: 0;
}

.dog-body {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 46px;
  border-radius: 48% 48% 42% 42% / 52% 52% 48% 48%;
  background:
    radial-gradient(ellipse 90% 60% at 50% 25%, var(--fur-highlight), transparent 55%),
    radial-gradient(ellipse at 50% 60%, var(--fur-light), var(--fur-mid) 65%, var(--fur-dark));
  box-shadow:
    inset 0 -5px 8px rgba(0,0,0,.15),
    inset 2px 0 6px rgba(255,255,255,.06);
  z-index: 2;
}

.dog-belly {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #e8dcc8, #d4c4a8 70%, transparent);
  opacity: .85;
}

.dog-chest {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #f0e4d4, #d8c8a8);
  opacity: .75;
}

.dog-neck {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 22px;
  border-radius: 40%;
  background: linear-gradient(180deg, var(--fur-light), var(--fur-mid));
  z-index: 3;
}

.dog-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 58px;
  z-index: 5;
}

.dog-forehead {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 28px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(ellipse 90% 80% at 50% 30%, var(--fur-highlight), var(--fur-light) 70%, var(--fur-mid));
  box-shadow: inset -3px -4px 6px rgba(0,0,0,.08);
}

.dog-ear {
  position: absolute;
  top: 6px;
  width: 26px;
  height: 38px;
  border-radius: 55% 45% 40% 50%;
  background: linear-gradient(160deg, var(--fur-light) 0%, var(--fur-mid) 45%, var(--fur-dark) 100%);
  box-shadow: inset -3px 0 6px rgba(0,0,0,.12);
  z-index: 1;
  overflow: hidden;
}
.dog-ear-l { left: -2px; transform: rotate(-22deg); }
.dog-ear-r { right: -2px; transform: rotate(22deg) scaleX(-1); }
.dog-ear .ear-inner {
  position: absolute;
  top: 8px;
  left: 6px;
  width: 14px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d4a090, #a87068);
  opacity: .7;
}

.dog-wrap.happy .dog-ear-l { animation: ear-flop-l 0.55s ease-in-out infinite alternate; }
.dog-wrap.happy .dog-ear-r { animation: ear-flop-r 0.55s ease-in-out infinite alternate; }
@keyframes ear-flop-l { to { transform: rotate(-30deg); } }
@keyframes ear-flop-r { to { transform: rotate(30deg) scaleX(-1); } }

.dog-eye {
  position: absolute;
  top: 20px;
  width: 17px;
  height: 19px;
  border-radius: 48% 48% 44% 44%;
  z-index: 6;
  overflow: hidden;
}
.dog-eye-l { left: 10px; }
.dog-eye-r { right: 10px; }

.eye-white {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #faf9f6, #e8e4dc);
  border-radius: inherit;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.04);
}

.iris-wrap {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease-out;
  z-index: 2;
}
.iris {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #a08050, var(--eye-brown) 55%, #2a1810 95%);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.3);
}
.pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 6px;
  transform: translate(-50%, -50%);
  background: #0a0604;
  border-radius: 50%;
}
.dog-wrap.happy .pupil {
  width: 7px;
  height: 4px;
  border-radius: 40%;
}

.eye-shine {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  box-shadow: 6px 4px 0 -2px rgba(255,255,255,.5);
}

.blink {
  position: absolute;
  inset: 0;
  background: var(--fur-mid);
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.12s ease;
  z-index: 10;
}
.dog-eye.blinking .blink { transform: scaleY(1); }

.dog-snout {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 32px;
  z-index: 7;
}

.snout-bridge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--fur-light), var(--snout-light));
}

.dog-nose {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 16px;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(ellipse 60% 50% at 35% 28%, rgba(255,255,255,.15), transparent),
    radial-gradient(ellipse at 50% 60%, #2a1c14, var(--nose));
  box-shadow: 0 2px 5px rgba(0,0,0,.35);
  z-index: 9;
}

.dog-mouth {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 18px;
  z-index: 8;
}

.dog-lip {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 8px;
  border: 2px solid transparent;
  border-bottom: 2px solid rgba(80,50,40,.45);
  border-radius: 0 0 50% 50%;
}

.dog-tongue {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 20px;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg, #e8707a, #c04858);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: inset -1px 0 2px rgba(0,0,0,.1);
}
.dog-wrap.happy .dog-tongue,
.dog-wrap.petting .dog-tongue {
  opacity: 1;
  animation: pant 0.45s ease-in-out infinite alternate;
}
@keyframes pant {
  to { transform: translateX(-50%) translateY(2px) scaleY(1.06); }
}
.dog-wrap.eating .dog-tongue { opacity: 1; transform: translateX(-50%) scaleY(0.3); animation: none; }
.dog-wrap.hungry .dog-lip { border-bottom-color: rgba(80,50,40,.7); }

.dog-tail {
  position: absolute;
  bottom: 32px;
  right: -4px;
  width: 16px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--fur-light), var(--fur-mid) 50%, var(--fur-dark));
  transform-origin: bottom center;
  animation: tail-wag 0.35s ease-in-out infinite alternate;
  z-index: 1;
  box-shadow: inset -2px 0 4px rgba(0,0,0,.1);
}
.dog-wrap.happy .dog-tail { animation: tail-wag-fast 0.18s ease-in-out infinite alternate; }
@keyframes tail-wag { from { transform: rotate(18deg); } to { transform: rotate(-12deg); } }
@keyframes tail-wag-fast { from { transform: rotate(32deg); } to { transform: rotate(-24deg); } }

.dog-front-leg,
.dog-back-leg {
  position: absolute;
  width: 14px;
  height: 22px;
  border-radius: 40% 40% 35% 35%;
  background: linear-gradient(180deg, var(--fur-mid), var(--fur-dark));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.05);
  z-index: 1;
}
.dog-leg-fl { bottom: 2px; left: 22px; }
.dog-leg-fr { bottom: 2px; right: 22px; }
.dog-leg-l { bottom: 18px; left: 18px; height: 18px; opacity: .85; }
.dog-leg-r { bottom: 18px; right: 18px; height: 18px; opacity: .85; }

.collar {
  position: absolute;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 9px;
  background: linear-gradient(180deg, #e04848, #a02828);
  border-radius: 4px;
  z-index: 8;
  box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
}
.collar-tag {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  background: radial-gradient(circle at 35% 30%, #f0e878, #c8a830);
  border-radius: 50%;
  z-index: 9;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.blush {
  position: absolute;
  top: 34px;
  width: 11px;
  height: 5px;
  background: rgba(230,120,120,.35);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}
.blush-l { left: 4px; }
.blush-r { right: 4px; }
.dog-wrap.happy .blush, .dog-wrap.petting .blush { opacity: 1; }

/* Baba só quando dormindo (na casinha) */
.drool-wrap {
  display: none;
}
.scene.is-sleeping .forest-hub .dh-opening::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, rgba(180,220,240,.85), transparent);
  border-radius: 2px;
  animation: drool-drip 1.5s ease-in-out infinite;
}
@keyframes drool-drip {
  0%, 100% { height: 16px; opacity: 0.7; }
  50% { height: 24px; opacity: 1; }
}


.excite {
  position: absolute;
  font-size: 11px;
  opacity: 0;
  color: #9ad4ff;
  text-shadow: 0 0 6px rgba(150,200,255,.6);
}
.dog-wrap.happy .excite { animation: sparkle 1.1s ease-in-out infinite; }
@keyframes sparkle {
  0%, 70%, 100% { opacity: 0; transform: translateY(0) scale(0.8); }
  80% { opacity: 1; transform: translateY(-6px) scale(1); }
}
.ex1 { top: -2px; right: -6px; }
.ex2 { top: 6px; right: -12px; animation-delay: 0.35s; }

/* Cachorro SVG pixel art (modo principal do jogo) */
.dog-svg-mode .dog-sprite-box,
.dog-sprite-mode .dog-sprite-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.dog-sprite-sheet {
  display: none;
  position: relative;
  overflow: hidden;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
}

.dog-sprite-sheet-track {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: none;
  max-height: none;
  pointer-events: none;
  user-select: none;
}

.dog-wrap.dog-sprite-mode .dog-sprite-sheet {
  display: block;
  opacity: 1;
  visibility: visible;
}

.dog-wrap.use-modern-dog-art .dog-sprite-img,
.dog-wrap.use-modern-dog-art .dog-sprite-sheet {
  image-rendering: auto;
}

.dog-sprite-sheet.face-left {
  transform: scaleX(-1);
}

.dog-sprite-sheet.face-right {
  transform: none;
}

.dog-wrap.dog-sprite-mode .dog-sprite-img {
  opacity: 0 !important;
  visibility: hidden !important;
}

.dog-wrap.dog-css-mode .dog-sprite-img,
.dog-wrap.dog-css-mode .dog-sprite-sheet {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
}

.dog-wrap.dog-svg-mode .dog-sprite-sheet {
  display: none;
}

.dog-css-fallback {
  --dog-base: #b27a4d;
  --dog-shadow: #77472a;
  --dog-light: #dfb58b;
  --dog-eye: #22150d;
  position: relative;
  width: 58px;
  height: 38px;
  transform: translateY(2px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: none;
  filter: drop-shadow(0 4px 8px rgba(30, 22, 16, 0.34));
}

.dog-wrap.dog-css-mode .dog-css-fallback {
  display: block;
}

.dog-css-fallback .dog-css-ear,
.dog-css-fallback .dog-css-body,
.dog-css-fallback .dog-css-eye,
.dog-css-fallback .dog-css-nose,
.dog-css-fallback .dog-css-tail {
  position: absolute;
  display: block;
  pointer-events: none;
}

.dog-css-fallback .dog-css-ear {
  top: 3px;
  width: 10px;
  height: 10px;
  background: var(--dog-shadow);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.dog-css-fallback .dog-css-ear--l { left: 10px; }
.dog-css-fallback .dog-css-ear--r { right: 10px; }

.dog-css-fallback .dog-css-body {
  left: 8px;
  top: 10px;
  width: 42px;
  height: 24px;
  border-radius: 10px 10px 11px 11px;
  background:
    linear-gradient(180deg, var(--dog-light) 0 28%, var(--dog-base) 28% 72%, var(--dog-shadow) 72% 100%);
  box-shadow:
    inset -6px -4px 0 rgba(0, 0, 0, 0.12),
    inset 6px 3px 0 rgba(255, 255, 255, 0.08);
}

.dog-css-fallback .dog-css-eye {
  top: 16px;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--dog-eye);
}

.dog-css-fallback .dog-css-eye--l { left: 19px; }
.dog-css-fallback .dog-css-eye--r { right: 19px; }

.dog-css-fallback .dog-css-nose {
  left: 50%;
  top: 20px;
  width: 6px;
  height: 4px;
  margin-left: -3px;
  border-radius: 2px;
  background: #2b1a11;
}

.dog-css-fallback .dog-css-tail {
  right: -3px;
  top: 17px;
  width: 10px;
  height: 5px;
  border-radius: 999px;
  background: var(--dog-shadow);
  transform-origin: left center;
}

.dog-wrap.facing-left .dog-css-fallback { transform: translateY(2px) scaleX(-1); }
.dog-wrap.facing-back .dog-css-fallback .dog-css-eye,
.dog-wrap.facing-back .dog-css-fallback .dog-css-nose { display: none; }
.dog-wrap.facing-back .dog-css-fallback .dog-css-tail { left: -3px; right: auto; }

.dog-wrap.dog-css-mode.anim-walk .dog-css-fallback {
  animation: css-dog-walk 0.42s steps(2, end) infinite;
}

.dog-wrap.dog-css-mode.anim-sleep .dog-css-fallback {
  animation: css-dog-sleep 2.2s ease-in-out infinite;
  opacity: 0.92;
}

.dog-wrap.dog-css-mode.anim-eat .dog-css-fallback {
  animation: css-dog-eat 0.26s ease-in-out infinite;
}

.dog-wrap.dog-css-mode.anim-happy .dog-css-fallback,
.dog-wrap.dog-css-mode.petting .dog-css-fallback {
  animation: css-dog-happy 0.26s ease-in-out infinite alternate;
}

.dog-wrap.dog-css-mode.anim-sad .dog-css-fallback,
.dog-wrap.dog-css-mode.hungry .dog-css-fallback {
  filter: grayscale(0.15) brightness(0.88) drop-shadow(0 2px 5px rgba(30, 22, 16, 0.28));
}

.dog-wrap.breed-vira_lata .dog-css-fallback { --dog-base: #b27a4d; --dog-light: #dfb58b; --dog-shadow: #77472a; }
.dog-wrap.breed-bulldog .dog-css-fallback { --dog-base: #a17c63; --dog-light: #d3b59f; --dog-shadow: #6f4f3d; }
.dog-wrap.breed-golden .dog-css-fallback { --dog-base: #c88a3e; --dog-light: #efc278; --dog-shadow: #8f5a24; }
.dog-wrap.breed-poodle .dog-css-fallback { --dog-base: #b6b9c8; --dog-light: #e8ecf8; --dog-shadow: #7c8194; }
.dog-wrap.breed-beagle .dog-css-fallback { --dog-base: #ae6f42; --dog-light: #dfb188; --dog-shadow: #744725; }
.dog-wrap.breed-husky .dog-css-fallback { --dog-base: #7f93a8; --dog-light: #cfdae7; --dog-shadow: #4c6174; }
.dog-wrap.breed-chihuahua .dog-css-fallback { --dog-base: #c19775; --dog-light: #e2c2a6; --dog-shadow: #7c5d43; }
.dog-wrap.breed-shiba .dog-css-fallback { --dog-base: #c17842; --dog-light: #e7b07f; --dog-shadow: #8b4f2c; }

@keyframes css-dog-walk {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-1px); }
}

@keyframes css-dog-sleep {
  0%, 100% { transform: translateY(2px) scaleY(1); }
  50% { transform: translateY(3px) scaleY(0.95); }
}

@keyframes css-dog-eat {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(4px); }
}

@keyframes css-dog-happy {
  from { transform: translateY(1px) rotate(-2deg); }
  to { transform: translateY(1px) rotate(2deg); }
}

.dog-svg-mode .dog-sprite-img,
.dog-sprite-mode .dog-sprite-img {
  width: min(128px, 30vw);
  height: min(128px, 30vw);
  max-width: 100%;
  max-height: min(128px, 28vh);
  object-fit: contain;
  object-position: bottom center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 8px rgba(30, 22, 16, 0.35));
  pointer-events: none;
  user-select: none;
  display: block;
}

.dog-svg-mode .dog,
.dog-svg-mode .drool-wrap,
.dog-svg-mode .dog-head,
.dog-svg-mode .dog-body,
.dog-svg-mode .dog-tail,
.dog-svg-mode .dog-leg-l,
.dog-svg-mode .dog-leg-r,
.dog-svg-mode .dog-leg-fl,
.dog-svg-mode .dog-leg-fr,
.dog-sprite-mode .dog,
.dog-sprite-mode .drool-wrap,
.dog-sprite-mode .dog-head,
.dog-sprite-mode .dog-body,
.dog-sprite-mode .dog-tail,
.dog-sprite-mode .dog-leg-l,
.dog-sprite-mode .dog-leg-r,
.dog-sprite-mode .dog-leg-fl,
.dog-sprite-mode .dog-leg-fr {
  display: none !important;
}

/* Animações por estado (classes em #dogWrap) */
.dog-svg-mode.anim-idle .dog-sprite-img {
  animation: svg-idle-breathe 1.6s ease-in-out infinite;
}

.dog-sprite-mode.anim-idle .dog-sprite-sheet {
  animation: svg-idle-breathe 1.8s ease-in-out infinite;
}

.dog-svg-mode.anim-walk .dog-sprite-img,
.dog-wrap.dog-svg-mode.is-playing .dog-sprite-img {
  animation: svg-walk-bob 0.34s ease-in-out infinite;
}

.dog-sprite-mode.anim-walk .dog-sprite-sheet,
.dog-wrap.dog-sprite-mode.is-playing .dog-sprite-sheet {
  animation: svg-walk-bob 0.34s ease-in-out infinite;
}

.dog-svg-mode.anim-walk .dog-sprite-box,
.dog-wrap.dog-svg-mode.is-playing .dog-sprite-box {
  animation: svg-walk-shift 0.34s ease-in-out infinite;
}

.dog-svg-mode.anim-sleep .dog-sprite-img {
  animation: svg-sleep-breathe 2.4s ease-in-out infinite;
  opacity: 0.92;
}

.dog-sprite-mode.anim-sleep .dog-sprite-sheet {
  animation: svg-sleep-breathe 2.4s ease-in-out infinite;
  opacity: 0.94;
}

.dog-svg-mode.anim-eat .dog-sprite-img,
.dog-wrap.dog-svg-mode.eating .dog-sprite-img {
  animation: svg-eat-bob 0.2s ease-in-out infinite;
}

.dog-sprite-mode.anim-eat .dog-sprite-sheet,
.dog-wrap.dog-sprite-mode.eating .dog-sprite-sheet {
  animation: svg-eat-bob 0.22s ease-in-out infinite;
}

.dog-svg-mode.anim-happy .dog-sprite-img,
.dog-wrap.dog-svg-mode.happy .dog-sprite-img,
.dog-wrap.dog-svg-mode.petting .dog-sprite-img {
  animation: svg-wag 0.22s ease-in-out infinite alternate;
}

.dog-sprite-mode.anim-happy .dog-sprite-sheet,
.dog-wrap.dog-sprite-mode.happy .dog-sprite-sheet,
.dog-wrap.dog-sprite-mode.petting .dog-sprite-sheet {
  animation: svg-wag 0.22s ease-in-out infinite alternate;
}

.dog-svg-mode.anim-happy .dog-sprite-box,
.dog-wrap.dog-svg-mode.happy .dog-sprite-box,
.dog-wrap.dog-svg-mode.petting .dog-sprite-box {
  animation: svg-happy-hop 0.42s ease-in-out infinite;
}

.dog-sprite-mode.anim-happy .dog-sprite-box,
.dog-wrap.dog-sprite-mode.happy .dog-sprite-box,
.dog-wrap.dog-sprite-mode.petting .dog-sprite-box {
  animation: svg-happy-hop 0.42s ease-in-out infinite;
}

.dog-svg-mode.anim-sad .dog-sprite-img,
.dog-wrap.dog-svg-mode.hungry .dog-sprite-img {
  filter: drop-shadow(0 2px 5px rgba(40, 28, 20, 0.28)) saturate(0.75) brightness(0.92);
  transform: translateY(2px);
}

.dog-sprite-mode.anim-sad .dog-sprite-sheet,
.dog-wrap.dog-sprite-mode.hungry .dog-sprite-sheet {
  filter: drop-shadow(0 2px 5px rgba(40, 28, 20, 0.28)) saturate(0.84) brightness(0.94);
  transform: translateY(2px);
}

.dog-wrap.dog-svg-mode.petting .dog-sprite-img {
  animation: svg-wiggle 0.2s ease-in-out infinite;
}

@keyframes svg-walk-bob {
  0%, 100% { transform: translateY(0) rotate(-0.8deg); }
  50% { transform: translateY(-5px) rotate(0.8deg); }
}

@keyframes svg-walk-shift {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
}

@keyframes svg-idle-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(1px) scale(0.98, 1.02); }
}

@keyframes svg-sleep-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(1px) scaleY(0.96); }
}

@keyframes svg-eat-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(-1deg); }
}

@keyframes svg-wag {
  from { transform: rotate(-5deg) translateY(0); }
  to { transform: rotate(5deg) translateY(-1px); }
}

@keyframes svg-happy-hop {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-3px); }
  65% { transform: translateY(1px); }
}

@keyframes svg-wiggle {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

.sidewalk-dog-zone .dog-sprite-box {
  transform: scale(var(--dog-scale, 1));
  transform-origin: bottom center;
  transition: transform 0.5s ease;
}
.dog-wrap.stage-puppy { --dog-scale: 0.68; }
.dog-wrap.stage-young { --dog-scale: 0.84; }
.dog-wrap.stage-adult { --dog-scale: 0.98; }
.dog-wrap.stage-elder { --dog-scale: 1.06; }
.dog-wrap.stage-sage { --dog-scale: 1.1; }
.dog-wrap .dog-css-fallback {
  filter:
    drop-shadow(0 4px 8px rgba(30, 22, 16, 0.34))
    sepia(var(--dog-age-sepia, 0))
    brightness(var(--dog-age-brightness, 1))
    saturate(var(--dog-age-saturate, 1))
    contrast(var(--dog-age-contrast, 1));
  transition: filter 0.45s ease;
}
.dog-wrap.is-sick .dog-sprite-img {
  filter: sepia(0.35) saturate(0.7) hue-rotate(-20deg);
}
.dog-sleep-spot .dog-sleep-img {
  width: min(96px, 22vw);
  height: min(96px, 22vw);
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: scale(var(--dog-scale, 0.52));
  transform-origin: bottom center;
  transition: transform 0.5s ease;
}

.sidewalk-dog-zone .dog-wrap {
  width: min(115px, 22vw);
  height: min(100px, 20vw);
}

/* Pelo do cachorro — cresce a cada 10 dias de jogo */
.dog-sprite-box {
  position: relative;
}

.dog-hair {
  display: none;
  position: absolute;
  left: 50%;
  top: -6%;
  width: 115%;
  height: 52%;
  transform: translateX(-50%);
  transform-origin: bottom center;
  pointer-events: none;
  z-index: 3;
  border-radius: 48% 48% 38% 38%;
  background: radial-gradient(ellipse at 50% 85%, #6b4f32 0%, #8b6344 35%, transparent 72%);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.dog-wrap[class*='hair-lvl-'] .dog-hair {
  display: block;
}

.dog-wrap.hair-lvl-1 .dog-hair { opacity: 0.32; transform: translateX(-50%) scale(1.04); }
.dog-wrap.hair-lvl-2 .dog-hair { opacity: 0.4; transform: translateX(-50%) scale(1.08); }
.dog-wrap.hair-lvl-3 .dog-hair { opacity: 0.48; transform: translateX(-50%) scale(1.1); }
.dog-wrap.hair-lvl-4 .dog-hair { opacity: 0.55; transform: translateX(-50%) scale(1.12) translateY(-2%); }
.dog-wrap.hair-lvl-5 .dog-hair { opacity: 0.62; transform: translateX(-50%) scale(1.15) translateY(-3%); }
.dog-wrap.hair-lvl-6 .dog-hair { opacity: 0.7; transform: translateX(-50%) scale(1.18) translateY(-4%); }
.dog-wrap.hair-lvl-7 .dog-hair { opacity: 0.78; transform: translateX(-50%) scale(1.22) translateY(-5%); }
.dog-wrap.hair-lvl-8 .dog-hair { opacity: 0.85; transform: translateX(-50%) scale(1.26) translateY(-6%); }
.dog-wrap.hair-lvl-9 .dog-hair { opacity: 0.92; transform: translateX(-50%) scale(1.3) translateY(-7%); }
.dog-wrap.hair-lvl-10 .dog-hair {
  opacity: 1;
  transform: translateX(-50%) scale(1.34) translateY(-8%);
  filter: blur(0.3px);
}

.puddle {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 75px;
  height: 11px;
  z-index: 0;
}
.puddle-main {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse, rgba(140,190,210,.45), transparent 70%);
  border-radius: 50%;
}