*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --fur-light: #d4b896;
  --fur-mid: #a08050;
  --fur-dark: #6b5030;
  --street-h: 36vh;
  --sims-green: #4ade80;
  --sims-red: #f87171;
  --sims-yellow: #facc15;
  --bar-hunger: #fb923c;
  --bar-fun: #f472b6;
}

html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  cursor: default;
  user-select: none;
  background: #0a1628;
}

body::after {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0,0,0,.22) 0%, transparent 55%);
  pointer-events: none;
  z-index: 4;
}

/* ===== UI ===== */
.sims-panel:not(.pet-status-float) {
  position: fixed; top: 16px; left: 16px; z-index: 80;
  width: 240px; padding: 16px 18px;
  background: rgba(15, 25, 20, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(120, 180, 140, 0.25);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

.pet-status-float.sims-panel {
  width: auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.sims-panel--compact {
  width: 188px;
  padding: 10px 12px;
  border-radius: 12px;
}
.sims-panel--compact .sims-header {
  margin-bottom: 8px;
  padding-bottom: 6px;
}
.sims-panel--compact .sims-name { font-size: 13px; }
.sims-panel--compact .dog-avatar { width: 36px; height: 36px; }
.sims-header { align-items: center; }
.sims-panel--compact .need-block { margin-bottom: 7px; }
.sims-panel--compact .need-label { font-size: 10px; margin-bottom: 4px; }
.sims-panel--compact .need-pct { font-size: 11px; }
.sims-panel--compact .need-icon { width: 22px; height: 22px; font-size: 12px; }
.sims-panel--compact .bar-track { height: 7px; }
.sims-panel--compact .need-timer {
  font-size: 9px;
  color: #7aa898;
  margin-top: 3px;
  letter-spacing: 0.2px;
}
.sims-panel--compact .poop-timer,
.sims-panel--compact .sleep-timer {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 9px;
  border-radius: 6px;
}

.sims-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.plumbob {
  width: 22px; height: 30px;
  background: var(--sims-green);
  clip-path: polygon(50% 0%, 100% 38%, 50% 100%, 0% 38%);
  filter: drop-shadow(0 0 8px var(--sims-green));
  animation: plumbob-float 3s ease-in-out infinite;
}
.plumbob.hungry { background: var(--sims-red); filter: drop-shadow(0 0 8px var(--sims-red)); }
.plumbob.okay { background: var(--sims-yellow); filter: drop-shadow(0 0 8px var(--sims-yellow)); }

@keyframes plumbob-float {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg) scale(1.05); }
}

.sims-name { color: #c8e8d0; font-size: 15px; font-weight: 700; letter-spacing: 1px; }

.need-block { margin-bottom: 12px; }
.need-label {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #8ab8a0; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 6px;
}
.need-pct { color: #e8f8f0; font-weight: 700; font-size: 13px; }

.need-row { display: flex; align-items: center; gap: 10px; }

.need-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

.bar-track {
  flex: 1; height: 10px; background: rgba(0,0,0,.35);
  border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}

.bar-fill {
  height: 100%; border-radius: 6px;
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.bar-fill.hunger { background: linear-gradient(90deg, #c2410c, #fb923c, #fdba74); }
.bar-fill.fun { background: linear-gradient(90deg, #9d174d, #f472b6, #fbcfe8); }
.bar-fill.energy { background: linear-gradient(90deg, #1d4ed8, #60a5fa, #93c5fd); }
.bar-fill.low { animation: bar-pulse 1s ease-in-out infinite; }

@keyframes bar-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

.feed-timer {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(0,0,0,.2); border-radius: 8px;
  font-size: 11px; color: #90b8a8; line-height: 1.5;
  border: 1px solid rgba(255,255,255,.06);
}
.feed-timer .timer-big {
  display: block; font-size: 18px; font-weight: 700;
  color: #d8f0e0; margin-top: 4px;
}
.feed-timer.urgent { color: #fca5a5; border-color: rgba(248,113,113,.3); }
.feed-timer.urgent .timer-big { color: #fecaca; }
.feed-timer.satisfied { color: #86efac; }
.feed-timer.satisfied .timer-big { color: #bbf7d0; }

.side-stack {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-45%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100px;
}
.btn-log-stack {
  width: 100%;
  padding: 10px 8px;
  border: 1px solid rgba(120, 180, 140, 0.25);
  border-radius: 12px;
  background: rgba(15, 25, 22, 0.92);
  backdrop-filter: blur(10px);
  color: #b8e8d0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.btn-log-stack:hover { background: rgba(25, 40, 32, 0.95); }

.food-shelf {
  position: static;
  transform: none;
  width: 100%;
  padding: 14px;
  background: rgba(40, 35, 30, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}

.life-block {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.life-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.life-stage {
  font-size: 11px;
  font-weight: 700;
  color: #fde68a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.life-days { font-size: 10px; color: #8ab8a0; }
.life-immortal { font-size: 10px; color: #a78bfa; }
.bar-fill.life { background: linear-gradient(90deg, #5b21b6, #a78bfa, #c4b5fd); }
.bar-fill.strength { background: linear-gradient(90deg, #b45309, #f59e0b, #fcd34d); }
.bar-fill.wellness { background: linear-gradient(90deg, #047857, #34d399, #a7f3d0); }
.bar-fill.wellness.low { background: linear-gradient(90deg, #991b1b, #f87171, #fecaca); }
.life-status {
  font-size: 10px;
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.2);
  color: #86efac;
}
.life-status.sick { color: #fca5a5; background: rgba(120, 30, 30, 0.35); }
.hygiene-timer { font-size: 9px; color: #7aa898; margin-top: 4px; }
.hygiene-timer.dirty { color: #fca5a5; }
.btn-bath {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(56, 189, 248, 0.3);
  color: #bae6fd;
}

.shelf-label {
  font-size: 10px; color: #b8a898; text-align: center;
  letter-spacing: 2px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08);
}

.food-slot {
  width: 72px; height: 72px; margin: 8px auto;
  background: rgba(0,0,0,.25); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s;
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.food-slot::after {
  content: attr(data-label);
  position: absolute; bottom: 6px;
  font-size: 9px; color: #888; letter-spacing: 0.5px;
}
.food-slot:hover {
  transform: scale(1.05);
  background: rgba(255,255,255,.08);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.food-shelf .food-slot.empty-stock {
  opacity: 0.92;
  pointer-events: auto;
}
.food-shelf .food-slot.empty-stock .btn-buy-food {
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
  z-index: 5;
}
.food-slot.respawn { animation: pop-in .35s cubic-bezier(.34,1.56,.64,1); }

@keyframes pop-in {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.food-icon { font-size: 28px; margin-bottom: 14px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }

.held-food {
  position: fixed; pointer-events: none; z-index: 190;
  transform: translate(-50%, -50%); display: none;
  font-size: 36px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.held-food.visible { display: block; }

.hint.is-hidden,
.hint[hidden] { display: none !important; }

.btn-open-shop {
  position: fixed;
  top: 52px;
  left: 16px;
  z-index: 83;
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  background: rgba(60, 45, 20, 0.9);
  color: #fde68a;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.btn-energy-points,
.btn-use-medicine {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.btn-energy-points { background: rgba(37, 99, 235, 0.35); color: #bfdbfe; }
.btn-use-medicine { background: rgba(34, 120, 80, 0.35); color: #bbf7d0; }

.guide-modal,
.shop-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.guide-modal.is-open,
.shop-modal.is-open { display: flex; }
.guide-backdrop,
.shop-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); cursor: default; }
.guide-dialog,
.shop-dialog {
  position: relative;
  width: min(400px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  background: rgba(18, 28, 24, 0.96);
  border: 1px solid rgba(120, 180, 140, 0.3);
  border-radius: 16px;
  padding: 20px;
  color: #d8f0e0;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #ffe8f2;
  color: #d946a0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(255, 143, 190, 0.35);
}
.modal-close:hover {
  background: #ffb8d9;
  color: #fff;
}
.modal-close:active {
  transform: translateY(1px);
}
.zug-scroll {
  scrollbar-width: thin;
  scrollbar-color: #ff9ec9 rgba(255, 232, 244, 0.9);
}
.zug-scroll::-webkit-scrollbar {
  width: 10px;
}
.zug-scroll::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(255, 247, 251, 0.96) 0%, rgba(245, 240, 255, 0.96) 100%);
  border-radius: 999px;
}
.zug-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffb8d9 0%, #a98cff 100%);
  border-radius: 999px;
  border: 2px solid rgba(255, 247, 251, 0.95);
}
.zug-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff8fc4 0%, #8e77ff 100%);
}
.guide-dialog h2 { font-size: 18px; margin-bottom: 12px; }
.guide-copy { font-size: 14px; line-height: 1.55; margin-bottom: 12px; color: #effcf2; }
.guide-list { font-size: 13px; line-height: 1.55; margin: 0 0 16px 18px; }
.guide-actions { display: grid; gap: 10px; }
.btn-guide-ok {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #4ade80;
  color: #0a2010;
  font-weight: 700;
  cursor: pointer;
}
.btn-guide-skip {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(216, 240, 224, 0.25);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #d8f0e0;
  font-weight: 700;
  cursor: pointer;
}

.driver-popover.zug-driver-popover {
  background: rgba(255, 248, 234, 0.98);
  color: #5c3311;
  border: 3px solid #ffe6a7;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.driver-popover.zug-driver-popover .driver-popover-title {
  color: #9a3412;
  font-family: var(--font-ui);
  font-weight: 900;
}

.driver-popover.zug-driver-popover .driver-popover-description {
  color: #6b3f14;
  line-height: 1.5;
}

.driver-popover.zug-driver-popover .driver-popover-progress-text {
  color: #8b5b2f;
  font-weight: 700;
}

.driver-popover.zug-driver-popover .driver-popover-next-btn,
.driver-popover.zug-driver-popover .driver-popover-prev-btn,
.driver-popover.zug-driver-popover .driver-popover-close-btn {
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

.driver-popover.zug-driver-popover .driver-popover-next-btn {
  background: linear-gradient(180deg, #ffdb7d, #ffb347);
  color: #5c3311;
  text-shadow: none;
}

.driver-popover.zug-driver-popover .driver-popover-prev-btn {
  background: rgba(92, 51, 17, 0.08);
  color: #7c4a1a;
  text-shadow: none;
}

.driver-popover.zug-driver-popover .driver-popover-close-btn {
  color: #7c4a1a;
  text-shadow: none;
}
.shop-header { margin-bottom: 14px; padding-right: 36px; position: relative; }
.shop-close {
  position: absolute; top: 0; right: 0;
  width: 32px; height: 32px; border: none; border-radius: 8px;
  background: rgba(255,255,255,.1); color: #fff; font-size: 22px; cursor: pointer;
}
.coin-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.coin-pack-btn {
  padding: 12px; border: 1px solid rgba(253, 230, 138, 0.35);
  border-radius: 10px; background: rgba(80, 60, 20, 0.4);
  color: #fde68a; font-size: 11px; cursor: pointer; text-align: center;
}
.shop-items { display: flex; flex-direction: column; gap: 8px; }
.shop-item-btn {
  display: flex; justify-content: space-between; padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
  background: rgba(0,0,0,.25); color: #e8f8f0; font-size: 12px; cursor: pointer;
}

.dog-sleep-spot {
  display: none;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  z-index: 6;
}
.scene.is-sleeping .dog-sleep-spot { display: block; }
.dog-sleep-img { width: 100%; height: auto; }

.hint {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: rgba(180, 200, 190, 0.85); font-size: 12px; z-index: 80;
  text-align: center; pointer-events: none;
  background: rgba(0,0,0,.35); padding: 8px 16px; border-radius: 20px;
  backdrop-filter: blur(6px);
}

.title {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  color: rgba(140, 180, 160, 0.7); font-size: 13px;
  letter-spacing: 8px; z-index: 50; font-weight: 300;
}

.toast {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(20, 40, 30, 0.95);
  backdrop-filter: blur(8px);
  color: #b8e8c8; padding: 14px 24px;
  border-radius: 12px; font-size: 14px; z-index: 90;
  border: 1px solid rgba(120, 200, 140, 0.3);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.toast.show { transform: translate(-50%, -50%) scale(1); }

.particles { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.particle {
  position: absolute; pointer-events: none;
  animation: float-up 1.2s ease-out forwards;
}
@keyframes float-up {
  to { opacity: 0; transform: translateY(-60px) scale(0.5); }
}
.heart-p { font-size: 18px; }
.crumb-p { width: 8px; height: 8px; background: #c8a060; border-radius: 50%; }

.cursor-dot {
  position: fixed; pointer-events: none; z-index: 200;
  transform: translate(-50%, -50%); display: none;
  font-size: 22px; transition: transform .1s;
}
.cursor-dot.active { display: block; }

/* ===== CENA ===== */
.scene { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.scene > * { pointer-events: auto; }

.sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #0c1830 0%, #1a3050 35%, #2a4560 55%, #3a5568 75%, #4a6068 100%);
  z-index: 0;
}

.star {
  position: absolute; background: #fff; border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite;
}
.star-1 { top: 12%; left: 20%; width: 2px; height: 2px; }
.star-2 { top: 8%; left: 45%; width: 3px; height: 3px; animation-delay: .8s; }
.star-3 { top: 18%; left: 70%; width: 2px; height: 2px; animation-delay: 1.5s; }
@keyframes twinkle { 0%,100%{opacity:.2} 50%{opacity:1} }

/* cidade + casinha */
.cityscape {
  position: absolute; bottom: var(--street-h); left: 0; right: 0;
  height: 54vh; z-index: 2; overflow: hidden;
}

.building {
  position: absolute; bottom: 0;
  border-radius: 4px 4px 0 0;
  box-shadow: 4px 0 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}

.bld-windows {
  position: absolute; inset: 12px 10px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(180deg,
      transparent 0, transparent 18px,
      rgba(255, 220, 140, 0.12) 18px, rgba(255, 220, 140, 0.2) 22px,
      transparent 22px, transparent 40px),
    repeating-linear-gradient(90deg,
      transparent 0, transparent 14px,
      rgba(255, 220, 140, 0.1) 14px, rgba(255, 220, 140, 0.16) 18px);
}

.bld-1 {
  left: 2%; width: 11%; height: 72%;
  background: linear-gradient(180deg, #4a4860 0%, #323040 100%);
}
.bld-2 {
  left: 14%; width: 9%; height: 52%;
  background: linear-gradient(180deg, #3a4868 0%, #2a3858 100%);
}
.bld-3 {
  left: 26%; width: 8%; height: 82%;
  background: linear-gradient(180deg, #505060 0%, #383848 100%);
}
.bld-4 {
  right: 26%; width: 10%; height: 58%;
  background: linear-gradient(180deg, #404858 0%, #2e3448 100%);
}
.bld-5 {
  right: 14%; width: 9%; height: 88%;
  background: linear-gradient(180deg, #4a4a58 0%, #323038 100%);
}
.bld-5::after {
  content: ''; position: absolute;
  top: -24px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 24px; background: #666;
  border-radius: 2px;
  box-shadow: 0 0 8px #ff4444;
  animation: blink-red 2s ease-in-out infinite;
}
@keyframes blink-red { 0%,100%{opacity:1} 50%{opacity:.3} }

.bld-6 {
  right: 3%; width: 7%; height: 45%;
  background: linear-gradient(180deg, #383840 0%, #282830 100%);
}

/* CASINHA ao lado dos prédios */
.dog-lot {
  position: absolute;
  left: 4%;
  bottom: 0;
  width: 220px;
  height: 165px;
  z-index: 15;
  pointer-events: none;
}
/* casinha só decoração — cachorro fica no centro */

.dog-house {
  position: absolute;
  left: 0; bottom: 0;
  width: 200px; height: 130px;
}

.dh-roof {
  position: absolute;
  top: 0; left: -8px; right: -8px;
  height: 52px;
  background: linear-gradient(135deg, #5a4030 0%, #3d2818 50%, #4a3525 100%);
  clip-path: polygon(5% 100%, 50% 0%, 95% 100%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
  z-index: 3;
}
.dh-roof::before {
  content: '';
  position: absolute;
  top: 12px; right: 28px;
  width: 36px; height: 14px;
  background: rgba(0,0,0,.25);
  border-radius: 2px;
  transform: rotate(-8deg);
}

.dh-body {
  position: absolute;
  bottom: 0; left: 12px;
  width: 176px; height: 88px;
  background: linear-gradient(180deg, #7a6555 0%, #5a4838 40%, #4a3828 100%);
  border-radius: 4px 4px 0 0;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.1),
    4px 0 16px rgba(0,0,0,.35);
  z-index: 2;
  overflow: hidden;
}

.dh-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0, transparent 28px,
    rgba(0,0,0,.06) 28px, rgba(0,0,0,.06) 30px
  );
}

.dh-moss {
  position: absolute;
  bottom: 4px; left: 4px;
  width: 50px; height: 18px;
  background: radial-gradient(ellipse, #3a6848 0%, transparent 70%);
  border-radius: 50%;
  opacity: .7;
}

.dh-opening {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 72px;
  background: radial-gradient(ellipse at 50% 80%, #1a1410 0%, #0a0806 100%);
  border-radius: 45px 45px 0 0;
  box-shadow: inset 0 8px 24px rgba(0,0,0,.7);
  z-index: 4;
}

.dh-chain {
  position: absolute;
  bottom: 20px; right: 8px;
  width: 48px; height: 6px;
  background: repeating-linear-gradient(90deg, #6a6a70, #6a6a70 6px, #4a4a50 6px, #4a4a50 12px);
  border-radius: 3px;
  transform: rotate(12deg);
  opacity: .35;
}

.dh-bowl {
  position: absolute;
  bottom: 2px; left: -12px;
  width: 32px; height: 10px;
  background: linear-gradient(180deg, #6a5040, #4a3828);
  border-radius: 0 0 50% 50%;
  border: 2px solid #3a2818;
  opacity: .6;
}

.dh-sign {
  position: absolute;
  top: 38px; right: 14px;
  font-size: 11px; color: rgba(200,180,140,.4);
  letter-spacing: 3px; font-weight: 600;
  transform: rotate(-6deg);
}

.dog-zone {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 120px; height: 100px;
}

.dog-shadow {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 12px;
  background: radial-gradient(ellipse, rgba(0,0,0,.45) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

/* floresta */
.forest {
  position: absolute; bottom: var(--street-h); left: 0; right: 0;
  height: 50vh; z-index: 4; overflow: hidden; pointer-events: none;
}

.forest-mist {
  position: absolute; bottom: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(0deg, rgba(20,45,35,.75) 0%, transparent 100%);
  z-index: 10;
}

.tree { position: absolute; bottom: 0; }
.tree-trunk {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 18px; border-radius: 4px;
  background: linear-gradient(90deg, #3a2818, #5a4030, #3a2818);
  box-shadow: 2px 0 6px rgba(0,0,0,.3);
}
.tree-crown {
  position: absolute; left: 50%; transform: translateX(-50%);
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(ellipse at 40% 30%, #3a7850, #1a4828 60%, #0e3018);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.tree-1 { left: 38%; width: 90px; height: 55%; }
.tree-1 .tree-trunk { height: 32%; width: 20px; }
.tree-1 .tree-crown { bottom: 28%; width: 90px; height: 75px; }

.tree-2 { right: 8%; width: 110px; height: 65%; }
.tree-2 .tree-trunk { height: 30%; width: 24px; }
.tree-2 .tree-crown { bottom: 26%; width: 110px; height: 90px; }

.tree-3 { left: 55%; width: 70px; height: 42%; opacity: .7; }
.tree-3 .tree-trunk { height: 35%; width: 14px; }
.tree-3 .tree-crown { bottom: 30%; width: 70px; height: 55px; }

.bush {
  position: absolute; bottom: 0;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(ellipse at 50% 40%, #2a6040, #1a4028);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.bush-1 { left: 48%; width: 80px; height: 36px; }
.bush-2 { right: 22%; width: 60px; height: 28px; opacity: .85; }

/* rua */
.street {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: var(--street-h); z-index: 8;
}

.sidewalk {
  position: absolute; top: 0; left: 0; right: 0; height: 28%;
  background: linear-gradient(180deg, #6a6860, #5a5850);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  overflow: hidden;
}

.curb {
  position: absolute; top: calc(28% - 2px); left: 0; right: 0; height: 6px;
  background: linear-gradient(180deg, #7a7870, #4a4840);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
  z-index: 9;
}

.road {
  position: absolute; top: 28%; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #2e2e34, #242428);
  box-shadow: inset 0 6px 20px rgba(0,0,0,.4);
}

.road-line {
  position: absolute; top: 50%; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg,
    rgba(200,170,50,.5) 0, rgba(200,170,50,.5) 24px,
    transparent 24px, transparent 48px);
  transform: translateY(-50%);
}

.ambient-lights {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(255,200,100,.1) 0%, transparent 30%),
    radial-gradient(ellipse at 35% 15%, rgba(255,200,100,.08) 0%, transparent 28%),
    radial-gradient(ellipse at 65% 18%, rgba(255,200,100,.09) 0%, transparent 30%),
    radial-gradient(ellipse at 90% 22%, rgba(255,200,100,.1) 0%, transparent 32%);
}

/* postes legado — substituído por street-lamps.css */
.lamp-post:not(.street-lamp) {
  display: none !important;
}
.lamp-post {
  position: absolute; bottom: 0; width: 8px; height: 92%;
  z-index: 14; pointer-events: none;
}
.lamp-glow { display: none !important; }
.lamp-pole {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 6px; height: 100%;
  background: linear-gradient(90deg, #3a3a42, #5a5a62, #4a4a52);
  border-radius: 3px;
}
.lamp-arm {
  position: absolute; top: 4%; left: 50%;
  width: 44px; height: 6px; margin-left: -4px;
  background: #4a4a52; border-radius: 3px;
}
.lamp-head {
  position: absolute; top: 0; left: calc(50% + 28px);
  width: 28px; height: 22px;
  background: #3a3a40; border-radius: 4px 4px 8px 8px;
}
.lamp-bulb {
  position: absolute; bottom: 2px; left: 6px;
  width: 16px; height: 14px;
  background: #ffe8a0;
  border-radius: 50% 50% 40% 40%;
  box-shadow: 0 0 20px #ffcc66, 0 0 50px rgba(255,200,80,.4);
  animation: lamp-glow 5s ease-in-out infinite;
}
.lamp-glow {
  position: absolute; top: -20px; left: calc(50% + 10px);
  width: 200px; height: 160px;
  background: radial-gradient(ellipse, rgba(255,210,100,.2) 0%, transparent 65%);
  pointer-events: none;
}
.lamp-1 { left: 6%; }
.lamp-2 { left: 24%; }
.lamp-3 { left: 48%; }
.lamp-4 { right: 42%; }
.lamp-5 { right: 22%; }
.lamp-6 { right: 5%; }

@keyframes lamp-glow {
  0%, 94%, 100% { opacity: 1; }
  96% { opacity: .85; }
}

/* pedestres calçada */
.pedestrians {
  position: absolute; inset: 0; overflow: hidden;
  z-index: 11; pointer-events: none;
}

.walker {
  position: absolute; bottom: 12%;
  display: flex; flex-direction: column; align-items: center;
  animation: walk-sw linear infinite;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.walker.flip { animation-name: walk-sw-rev; }

@keyframes walk-sw {
  0% { transform: translateX(-12vw); }
  100% { transform: translateX(112vw); }
}
@keyframes walk-sw-rev {
  0% { transform: translateX(112vw) scaleX(-1); }
  100% { transform: translateX(-12vw) scaleX(-1); }
}

.w-head {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--skin, #d4a888);
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.1);
  position: relative;
}
.w-hair {
  position: absolute; top: -4px; left: -3px; right: -3px;
  height: 10px; border-radius: 8px 8px 0 0;
  background: var(--hair, #2a1810);
}
.w-body {
  width: 26px; height: 32px; margin-top: -2px;
  border-radius: 8px 8px 4px 4px;
  background: var(--shirt, #5588cc);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.15);
}
.w-legs { display: flex; gap: 6px; margin-top: -2px; }
.w-leg {
  width: 10px; height: 28px; border-radius: 4px;
  background: var(--pants, #333348);
  animation: step .4s ease-in-out infinite;
}
.w-leg:nth-child(2) { animation-delay: .2s; }
@keyframes step {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.walker-1 { --skin:#c89878; --hair:#1a1008; --shirt:#5588cc; --pants:#2a3048; animation-duration: 26s; }
.walker-2 { --skin:#e8b898; --hair:#4a2818; --shirt:#cc5566; --pants:#3a2830; animation-duration: 22s; animation-delay: -7s; }
.walker-3.flip { --skin:#a87858; --shirt:#44aa66; --pants:#282830; animation-duration: 28s; animation-delay: -14s; bottom: 18%; }
.walker-4.flip { --skin:#d0a080; --shirt:#aa8830; --pants:#403828; animation-duration: 24s; animation-delay: -3s; }

/* carros */
.traffic {
  position: absolute; inset: 0; overflow: hidden;
  z-index: 10; pointer-events: none;
}

.car {
  position: absolute;
  animation: drive linear infinite;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
}
.car.flip { animation-name: drive-rev; }

@keyframes drive {
  0% { transform: translateX(-18vw); }
  100% { transform: translateX(118vw); }
}
@keyframes drive-rev {
  0% { transform: translateX(118vw) scaleX(-1); }
  100% { transform: translateX(-18vw) scaleX(-1); }
}

.car-body {
  width: 88px; height: 32px;
  border-radius: 8px 12px 6px 6px;
  background: var(--car, #4466aa);
  position: relative;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.12);
}

.car-cabin {
  position: absolute; top: -22px; left: 18px;
  width: 52px; height: 26px;
  border-radius: 10px 10px 4px 4px;
  background: var(--cabin, #5577bb);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.1);
}

.car-glass {
  position: absolute; top: 4px; left: 6px; right: 6px; height: 14px;
  background: linear-gradient(180deg, rgba(180,220,255,.45), rgba(100,150,200,.25));
  border-radius: 6px;
}

.car-wheels {
  display: flex; justify-content: space-between;
  width: 72px; margin: -6px auto 0; padding: 0 4px;
}
.car-wheel {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #3a3a48, #1a1a22);
  border: 3px solid #2a2a32;
}

.car-light-f { position: absolute; right: 2px; top: 10px; width: 8px; height: 6px; background: #ffffcc; border-radius: 2px; box-shadow: 8px 0 20px rgba(255,255,200,.3); }
.car-light-r { position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; background: #ff4444; border-radius: 2px; box-shadow: 0 0 10px rgba(255,60,60,.5); }

.car-1 { --car:#c44; --cabin:#a33; bottom: 58%; animation-duration: 13s; }
.car-2 { --car:#38c; --cabin:#26a; bottom: 32%; animation-duration: 10s; animation-delay: -3s; }
.car-3.flip { --car:#eb2; --cabin:#ca0; bottom: 50%; animation-duration: 15s; animation-delay: -8s; }
.car-4.flip { --car:#4a8; --cabin:#386; bottom: 24%; animation-duration: 12s; animation-delay: -1s; }

/* Cachorro: ver assets/css/dog.css */

/* ===== Casinha entre árvores + cachorro na calçada ===== */
.forest-hub {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  z-index: 12;
  width: min(200px, 38vw);
  height: min(130px, 24vw);
  pointer-events: none;
}
.forest-hub .dog-house {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.sidewalk-dog-zone {
  position: absolute;
  left: 0;
  right: 0;
  top: 8%;
  bottom: 8%;
  height: auto;
  z-index: 13;
  pointer-events: auto;
  transition: opacity 0.45s ease;
}
.sidewalk-dog-zone .puddle,
.sidewalk-dog-zone .bark-bubble {
  pointer-events: none;
}
.sidewalk-dog-zone .dog-wrap {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: min(100px, 20vw);
  height: min(88px, 18vw);
  transform: translateX(-50%);
  pointer-events: auto;
  cursor: grab;
  animation: dog-walk-patrol 16s ease-in-out infinite;
}
.sidewalk-dog-zone .dog-wrap.is-user-placed {
  animation: none !important;
  left: var(--dog-left, 50%);
  bottom: var(--dog-bottom, 4px);
  transform: translateX(-50%);
}
.sidewalk-dog-zone .dog-wrap.is-dragging {
  cursor: grabbing;
  z-index: 30;
  filter: drop-shadow(0 8px 16px rgba(255, 150, 200, 0.45));
  transition: none;
}
.sidewalk-dog-zone .dog-wrap.is-user-placed .dog-sprite-img {
  animation: none !important;
}
.sidewalk-dog-zone .dog-hit {
  pointer-events: auto;
}
.sidewalk-dog-zone .dog { width: 100%; height: 100%; }
.sidewalk-dog-zone .puddle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 10px;
}

@keyframes dog-walk-patrol {
  0%, 100% { transform: translateX(calc(-50% - 28vw)) scaleX(1); }
  50% { transform: translateX(calc(-50% + 28vw)) scaleX(1); }
}

.sidewalk-dog-zone.is-playing .dog-wrap {
  animation: dog-walk-play 16s ease-in-out infinite;
}
@keyframes dog-walk-play {
  0%, 100% { transform: translateX(calc(-50% - 22vw)) translateY(0); }
  25% { transform: translateX(calc(-50% - 8vw)) translateY(-10px); }
  50% { transform: translateX(calc(-50% + 22vw)) translateY(0); }
  75% { transform: translateX(calc(-50% + 8vw)) translateY(-8px); }
}

.bark-bubble {
  position: absolute;
  top: -8px;
  right: -4px;
  background: #fff;
  color: #333;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 10px;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.bark-bubble::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 10px;
  border: 5px solid transparent;
  border-top-color: #fff;
}
.dog-wrap.is-barking .bark-bubble,
.sidewalk-dog-zone.is-barking .bark-bubble {
  opacity: 1;
  transform: scale(1);
  animation: bark-pop 0.5s ease;
}
@keyframes bark-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.scene.is-sleeping .dog-play-layer .dog-wrap {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  animation: none !important;
}
.scene.is-sleeping .sidewalk-dog-zone {
  pointer-events: none;
}
.scene.is-sleeping .forest-hub .sleep-zzz {
  opacity: 1;
}
.scene.is-sleeping .forest-hub .dh-opening {
  box-shadow: inset 0 8px 24px rgba(0,0,0,.7), 0 0 18px rgba(255, 220, 150, 0.3);
}
.scene.is-sleeping .forest-hub--art .dog-house-art {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)) brightness(0.92);
}
.sleep-zzz {
  position: absolute;
  top: -8px;
  right: 20%;
  display: flex;
  gap: 2px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(200, 220, 255, 0.9);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  animation: zzz-float 2s ease-in-out infinite;
}
.sleep-zzz span:nth-child(2) { animation-delay: 0.3s; font-size: 12px; }
.sleep-zzz span:nth-child(3) { animation-delay: 0.6s; font-size: 10px; }
@keyframes zzz-float {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-6px); opacity: 1; }
}

/* Ciclo dia/noite compacto (sol/lua + anel) */
.day-cycle-widget {
  position: fixed;
  top: 52px;
  right: 16px;
  z-index: 84;
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.day-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.day-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 3;
}
.day-ring-progress {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100.53;
  stroke-dashoffset: 100.53;
  transition: stroke-dashoffset 0.6s ease, stroke 0.4s;
}
.scene.phase-night ~ .day-cycle-widget .day-ring-progress,
body:has(.scene.phase-night) .day-ring-progress { stroke: #a8c8f0; }
.day-celestial-icon {
  font-size: 20px;
  line-height: 1;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.day-cycle-label {
  position: absolute;
  bottom: -14px;
  font-size: 8px;
  color: rgba(200, 232, 208, 0.85);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Painel status — sanfona no mobile */
.sims-panel-toggle {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.sims-panel-chevron {
  margin-left: auto;
  font-size: 10px;
  color: #7aa898;
  transition: transform 0.25s ease;
}
.sims-panel.is-open .sims-panel-chevron { transform: rotate(180deg); }
.sims-panel-summary {
  display: none;
  font-size: 10px;
  color: #7aa898;
  margin-top: 4px;
  letter-spacing: 0.2px;
}
.sims-panel-body {
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}
.mini-timers {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.poop-timer {
  padding: 8px 10px;
  background: rgba(0,0,0,.2);
  border-radius: 8px;
  font-size: 11px;
  color: #c4a882;
  border: 1px solid rgba(255,255,255,.06);
}
.poop-timer.urgent { color: #fca5a5; }
.sleep-timer {
  padding: 8px 10px;
  background: rgba(30, 40, 80, 0.35);
  border-radius: 8px;
  font-size: 11px;
  color: #a8c8f0;
  border: 1px solid rgba(120, 160, 255, 0.2);
}
.sleep-timer.hidden { display: none; }

/* ciclo dia/noite no cenário → scene-v2.css */

.poop-count {
  font-size: 9px;
  color: #a08060;
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(0,0,0,.15);
  border-radius: 6px;
}
.poop-count.full { color: #fca5a5; font-weight: 600; }
.points-display {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #fde68a;
  padding: 6px 8px;
  background: rgba(80,60,20,.25);
  border-radius: 8px;
  text-align: center;
}

.poop-layer {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
}

.poop-pile {
  position: absolute;
  width: 48px;
  height: 42px;
  min-width: 48px;
  min-height: 42px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transform: translate(-50%, 50%);
  transition: transform 0.15s, opacity 0.25s, filter 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.85));
  animation: poop-glow 1.6s ease-in-out infinite;
}
@keyframes poop-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.7)); }
  50% { filter: drop-shadow(0 0 16px rgba(253, 224, 71, 0.95)); }
}
.poop-pile:hover { transform: translate(-50%, 50%) scale(1.08); }
.poop-pile.cleaning { opacity: 0; transform: translate(-50%, 50%) scale(0.3); }

.poop-shape {
  display: block;
  position: relative;
  width: 28px;
  height: 20px;
  margin: 0 auto;
}
.poop-shape::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2px;
  width: 22px;
  height: 14px;
  background: radial-gradient(ellipse at 40% 30%, #7a5c38, #5a4028 55%, #3d2818);
  border-radius: 50% 50% 45% 55%;
  box-shadow:
    2px 2px 0 #4a3220,
    inset -2px -3px 4px rgba(0,0,0,.25);
}
.poop-shape::after {
  content: '';
  position: absolute;
  top: 0;
  right: 4px;
  width: 10px;
  height: 9px;
  background: radial-gradient(ellipse at 35% 35%, #6a5038, #4a3020);
  border-radius: 50%;
  box-shadow: 1px 1px 0 #3a2810;
}

.poop-smell {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(180, 160, 120, 0.85);
  letter-spacing: 2px;
  animation: smell-wave 2s ease-in-out infinite;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(200,180,100,.4);
}
@keyframes smell-wave {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(-4px); }
}

.poop-pile.zone-road { opacity: 0.9; transform: translate(-50%, 50%) scale(0.92); }

/* Inventário comida */
.food-shelf .food-slot {
  position: relative;
}
.food-stock {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  color: #e8f8f0;
  background: rgba(30,50,40,.9);
  border-radius: 9px;
  line-height: 18px;
  text-align: center;
}
.food-stock.empty { background: rgba(120,40,40,.85); }
.btn-buy-food {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: rgba(74, 222, 128, 0.25);
  color: #b8f0c8;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.btn-buy-food:hover { background: rgba(74, 222, 128, 0.45); }

.user-bar {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 85;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(15, 25, 22, 0.88);
  border-radius: 12px;
  border: 1px solid rgba(120, 180, 140, 0.2);
  font-size: 12px;
  color: #88b8a0;
  backdrop-filter: blur(10px);
}
.user-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255,255,255,.08);
  border-radius: 6px;
  color: #b8d8c8;
}
.btn-rename, .btn-logout {
  background: rgba(255,255,255,.08);
  border: none;
  color: #b8e8d0;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
}
.btn-rename { padding: 6px 8px; }

/* ===== Registro harmonizado ===== */
.log-panel {
  position: fixed;
  right: 12px;
  top: 56px;
  width: 200px;
  max-height: 32vh;
  z-index: 75;
  background: rgba(15, 25, 22, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(120, 180, 140, 0.22);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.log-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0,0,0,.2);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.log-panel-icon { font-size: 14px; opacity: .85; }
.log-title {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #a8d0b8;
  margin: 0;
  text-transform: uppercase;
  font-weight: 600;
}
.log-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  padding: 8px 12px 12px;
  margin: 0;
  font-size: 11px;
  color: #b0d4c0;
  line-height: 1.5;
  -webkit-overflow-scrolling: touch;
}
.log-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.log-list li:last-child { border-bottom: none; }
.log-list li time {
  display: block;
  font-size: 9px;
  color: #6a8a78;
  margin-top: 3px;
}
.log-list .type-poop { color: #d4a574; }
.log-list .type-clean { color: #86efac; }
.log-list .type-feed { color: #fdba74; }
.log-list .type-pet { color: #f9a8d4; }
.log-list .type-sleep { color: #93c5fd; }
.log-list .type-wake { color: #fde68a; }
.log-list .type-login { color: #a8c8e0; }
.log-list .log-empty {
  color: #6a8a78;
  font-style: italic;
  border: none;
}

.btn-open-log {
  display: none;
  position: fixed;
  top: 52px;
  right: 12px;
  z-index: 84;
  padding: 8px 14px;
  border: 1px solid rgba(120, 180, 140, 0.3);
  border-radius: 10px;
  background: rgba(15, 25, 22, 0.92);
  backdrop-filter: blur(10px);
  color: #b8e8d0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

.log-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
}
.log-modal.is-open {
  display: flex;
}
.log-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 12, 10, 0.82);
  backdrop-filter: blur(6px);
}
.log-modal-dialog {
  position: relative;
  width: 100%;
  max-height: 55vh;
  background: rgba(15, 25, 22, 0.97);
  border: 1px solid rgba(120, 180, 140, 0.25);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
  animation: log-slide-up 0.28s ease-out;
}
@keyframes log-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.log-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.log-modal-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #c8e8d0;
  margin: 0;
  letter-spacing: 0.5px;
}
.log-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #b8e8d0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.log-list--modal {
  max-height: 45vh;
  padding: 12px 16px 20px;
}

.held-food.visible { display: block; }

@media (min-width: 769px) {
  .log-modal {
    align-items: center;
    justify-content: flex-end;
    padding: 24px;
  }
  .log-modal-dialog {
    width: min(320px, 92vw);
    max-height: min(340px, 52vh);
    border-radius: 14px;
    animation: log-pop-in 0.22s ease-out;
  }
  @keyframes log-pop-in {
    from { transform: translateY(12px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
  }
  .log-list--modal {
    max-height: min(260px, 40vh);
    padding: 10px 14px 14px;
  }
  .log-modal-header {
    padding: 10px 12px;
  }
  .log-modal-title {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  :root { --street-h: 42vh; }
  .day-cycle-widget {
    top: calc(var(--userbar-h, 32px) + 10px);
    right: 12px;
    width: 48px;
    height: 48px;
  }
  .day-celestial-icon { font-size: 18px; }
  .sims-panel:not(.game-header) {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: none;
    overflow: visible;
    padding: 10px 14px 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .sims-panel:not(.game-header) .sims-panel-summary { display: block; }
  .sims-panel:not(.game-header) .sims-panel-body {
    max-height: 0;
    opacity: 0;
  }
  .sims-panel:not(.game-header).is-open .sims-panel-body {
    max-height: 52vh;
    opacity: 1;
    overflow-y: auto;
    padding-bottom: 12px;
  }
  .sims-panel:not(.game-header).is-open {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .side-stack {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: auto;
    max-width: none;
  }
  .food-shelf {
    width: 100%;
    padding: 8px 10px;
  }
  .btn-log-stack {
    font-size: 10px;
    padding: 8px 6px;
  }
  .food-slot {
    width: 56px;
    height: 56px;
    margin: 6px auto;
  }
  .food-icon { font-size: 22px; margin-bottom: 10px; }
  .user-bar {
    display: none !important;
  }
  .hint {
    bottom: calc(72px + 8px);
    font-size: 11px;
    max-width: 92%;
    padding: 6px 12px;
  }
  .title { display: none; }
  .forest-hub { width: min(160px, 42vw); }
  .sidewalk-dog-zone .dog-wrap { width: min(90px, 24vw); height: min(78px, 20vw); }
  .poop-pile { width: 40px; height: 32px; }
  .poop-shape { width: 32px; height: 24px; }
}

@media (min-width: 769px) {
  .sims-panel:not(.game-header) .sims-panel-body {
    max-height: none !important;
    opacity: 1 !important;
  }
  .sims-panel:not(.game-header) .sims-panel-toggle { cursor: default; pointer-events: none; }
  .sims-panel:not(.game-header) .sims-panel-chevron,
  .sims-panel:not(.game-header) .sims-panel-summary { display: none; }
}

@media (max-width: 480px) {
  .side-stack { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .sims-panel:not(.game-header).is-open .sims-panel-body { max-height: 48vh; }
}

.referral-invite-note { margin: 0 0 10px; padding: 9px 11px; border-radius: 12px; background: #eef8ee; border: 1px solid #a9d9ad; color: #286438; font-size: 12px; font-weight: 700; }