/* ===== ZUG RPG — camadas, parallax, spritesheet, movimento ===== */

.scene.rpg-scene {
  --parallax-x: 0;
  --parallax-y: 0;
  --rpg-glow: rgba(255, 200, 120, 0.12);
}

.scene-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.scene-layer--background { z-index: 0; }
.scene-layer--midground { z-index: 5; }
.scene-layer--foreground { z-index: 15; pointer-events: none; }
.scene-layer--overlay {
  z-index: 40;
  pointer-events: none;
}

.scene-layer--background .sky-layer,
.scene-layer--background .horizon-glow,
.scene-layer--background .city-layer {
  pointer-events: none;
}

.scene-layer--midground {
  position: absolute;
  inset: 0;
}

.scene-layer--midground .suburb-layer,
.scene-layer--midground .forest-layer,
.scene-layer--midground .street-layer {
  position: absolute;
  left: 0;
  right: 0;
}

.scene-layer--midground > * {
  pointer-events: auto;
}

.scene-layer--foreground {
  position: absolute;
  inset: 0;
}

.scene-layer--foreground .dog-play-layer,
.scene-layer--foreground .poop-layer {
  pointer-events: none;
}

.scene-layer--foreground .dog-play-layer .dog-wrap,
.scene-layer--foreground .dog-play-layer .dog-hit,
.scene-layer--foreground .poop-layer .poop-pile {
  pointer-events: auto;
}

.pet-path-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.pet-path-layer.is-visible {
  opacity: 1;
}

.pet-path-trail {
  fill: none;
  stroke: rgba(255, 247, 251, 0.95);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1.8 2.4;
  filter: drop-shadow(0 0 4px rgba(255, 158, 201, 0.36));
}

.pet-path-target {
  fill: #fff1a8;
  stroke: #ff9ec9;
  stroke-width: 0.45;
  filter: drop-shadow(0 0 4px rgba(255, 184, 217, 0.42));
}

.scene-layer--background {
  position: absolute;
  inset: 0;
}

/* Parallax leve só no céu (não desloca rua/floresta) */
.scene.rpg-scene .scene-layer--background .sky-layer {
  transform: translate3d(
    calc(var(--parallax-x) * -4px),
    calc(var(--parallax-y) * -1px),
    0
  );
  transition: transform 0.2s ease-out;
}

.scene.rpg-scene .clouds-layer .cloud-art,
.scene.rpg-scene .clouds-layer .cloud {
  animation-duration: 38s, 52s, 44s;
}

/* Noite: leve escurecimento sem blur (evita cenário “borrado”) */
.scene.rpg-scene.phase-night .scene-layer--background .sky-gradient,
.scene.rpg-scene.phase-dusk .scene-layer--background .sky-gradient {
  filter: saturate(0.95);
}

/* Glow noturno + luzes urbanas */
.rpg-ambient-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 100%, var(--rpg-glow), transparent 70%),
    radial-gradient(ellipse 30% 20% at 20% 85%, rgba(255, 180, 80, 0.08), transparent),
    radial-gradient(ellipse 30% 20% at 80% 85%, rgba(100, 180, 255, 0.06), transparent);
  mix-blend-mode: screen;
  opacity: 0.9;
  transition: opacity 1s ease;
}

.scene.phase-night .rpg-ambient-glow {
  --rpg-glow: rgba(100, 140, 255, 0.14);
  opacity: 1;
}

.scene.phase-day .rpg-ambient-glow {
  --rpg-glow: rgba(255, 220, 140, 0.18);
}

.scene.phase-dawn .rpg-ambient-glow,
.scene.phase-dusk .rpg-ambient-glow {
  --rpg-glow: rgba(255, 160, 100, 0.2);
}

.rpg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 95% 85% at 50% 45%, transparent 62%, rgba(0, 0, 0, 0.2) 100%);
  opacity: 0.35;
  pointer-events: none;
}

.scene.phase-day .rpg-vignette { opacity: 0.12; }

.rpg-particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rpg-map-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--street-h, 22vh) + 12px);
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(20, 30, 50, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0;
  animation: rpg-hint-pulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.rpg-map-hint.is-hidden { display: none; }

@keyframes rpg-hint-pulse {
  0%, 100% { opacity: 0; transform: translateX(-50%) translateY(4px); }
  15%, 55% { opacity: 0.85; transform: translateX(-50%) translateY(0); }
}

/* Pet SVG na cena RPG */
.dog-wrap.rpg-ready {
  width: auto !important;
  min-width: 72px;
  height: auto !important;
  min-height: 72px;
  overflow: visible;
}

.dog-wrap.rpg-ready .dog-sprite-box {
  width: auto;
  height: auto;
  min-height: 56px;
  overflow: visible;
  align-items: flex-end;
  justify-content: center;
  transform: scale(var(--dog-scale, 1));
  transform-origin: bottom center;
}

.dog-play-layer .dog-wrap.rpg-ready .dog-sprite-box {
  transform: scale(var(--dog-scale, 1));
  transform-origin: bottom center;
}

.dog-wrap.rpg-ready .dog-sprite-img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

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

.dog-wrap.rpg-ready.dog-sprite-mode .dog-sprite-sheet {
  display: block;
}

/* Cocôs: menos brilho amarelo na rua */
.scene.rpg-scene .poop-pile {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
  animation: none;
}

.scene.rpg-scene .poop-pile:hover {
  filter: drop-shadow(0 0 8px rgba(250, 200, 80, 0.55));
  animation: poop-glow 2s ease-in-out infinite;
}

.scene.rpg-scene .poop-smell {
  opacity: 0.5;
  font-size: 8px;
}

.dog-wrap.is-rpg-moving {
  animation: none !important;
  transition: filter 0.2s ease;
}

.dog-wrap.is-rpg-moving .dog-shadow-rpg {
  animation: rpg-shadow-walk 0.35s ease-in-out infinite alternate;
}

@keyframes rpg-shadow-walk {
  from { transform: translateX(-50%) scaleX(0.92); }
  to { transform: translateX(-50%) scaleX(1.05); }
}

/* Cursor fofo na área do jogo */
.scene.rpg-scene,
.scene.rpg-scene .map-click-layer,
.scene.rpg-scene .scene-layer--midground,
.scene.rpg-scene .dog-play-layer {
  cursor: url('../cursors/paw.png') 10 6, url('../cursors/paw.svg') 10 6, pointer;
}

.scene.rpg-scene .dog-wrap,
.scene.rpg-scene .dog-hit,
.scene.rpg-scene .forest-hub.rpg-hotspot,
.scene.rpg-scene .poop-pile {
  cursor: url('../cursors/paw.png') 10 6, grab;
}

.scene.rpg-scene .dog-wrap.is-dragging,
.scene.rpg-scene .dog-wrap.is-dragging .dog-hit {
  cursor: url('../cursors/paw.png') 10 6, grabbing;
}

.map-click-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72vh;
  z-index: 14;
  pointer-events: auto;
  touch-action: manipulation;
}

.map-tap-ripple {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 220, 160, 0.75);
  background: rgba(255, 240, 200, 0.25);
  pointer-events: none;
  z-index: 30;
  animation: map-tap-pop 0.6s ease-out forwards;
}

@keyframes map-tap-pop {
  0% { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.dog-play-layer.rpg-grid-active {
  cursor: url('../cursors/paw.png') 10 6, pointer;
}

.dog-play-layer.rpg-grid-active .dog-wrap:not(.is-user-placed):not(.is-dragging) {
  animation: none !important;
}

.dog-play-layer.rpg-grid-active .dog-shadow {
  animation: none !important;
}

.dog-shadow-rpg {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: min(72px, 16vw);
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 72%);
  filter: blur(3px);
  pointer-events: none;
  z-index: 1;
  transition: left 0.05s linear, bottom 0.05s linear;
}

.scene.is-sleeping .dog-shadow-rpg {
  opacity: 0;
}

.scene.is-sleeping .dog-play-layer .dog-wrap:not(.is-sleeping-in-house) {
  opacity: 0 !important;
  pointer-events: none !important;
}

.dog-play-layer .dog-wrap.is-sleeping-in-house {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 18;
  transform: translateX(-50%) scale(0.74);
  transform-origin: bottom center;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.28));
}

.dog-play-layer .dog-wrap.is-sleeping-in-house .dog-sprite-img {
  transform: rotate(2deg);
  transform-origin: bottom center;
}

/* Hotspot casinha */
.rpg-hotspot {
  cursor: pointer;
  transition: filter 0.25s ease;
}

.rpg-hotspot:hover,
.rpg-hotspot:focus-within {
  filter: drop-shadow(0 0 12px rgba(255, 220, 140, 0.45));
}

.forest-hub--art.rpg-hotspot::after {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 12px;
  border: 2px dashed transparent;
  transition: border-color 0.2s ease;
  pointer-events: none;
}

.scene:not(.is-sleeping) .forest-hub--art.rpg-hotspot:hover::after {
  border-color: rgba(255, 220, 140, 0.35);
}

/* Profundidade: overlay de ciclo dia/noite na cena */
.scene.rpg-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 38;
  pointer-events: none;
  background: transparent;
  transition: background 1.2s ease;
}

.scene.rpg-scene.phase-night::after {
  background: rgba(8, 12, 32, 0.12);
}

.scene.rpg-scene.phase-dawn::after {
  background: rgba(255, 180, 120, 0.06);
}

.scene.rpg-scene.phase-dusk::after {
  background: rgba(80, 40, 60, 0.12);
}

.scene.rpg-scene.weather-rain .scene-layer--overlay .rpg-ambient-glow {
  opacity: 0.6;
}

/* Luzes urbanas reforçadas à noite */
.scene.rpg-scene.phase-night .ambient-lights,
.scene.rpg-scene.phase-dusk .ambient-lights {
  opacity: 1;
  filter: blur(0.5px) brightness(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .scene.rpg-scene .scene-layer--background,
  .scene.rpg-scene .scene-layer--midground .suburb-layer,
  .scene.rpg-scene .scene-layer--midground .forest-layer--art {
    transform: none;
    transition: none;
  }
  .rpg-map-hint { animation: none; opacity: 0.7; }
}

@media (max-width: 600px) {
  .rpg-map-hint { font-size: 10px; padding: 5px 10px; }
}