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

html, body {
  width: 100%;
  min-height: 100%;
  background: #2D263A;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

::selection {
  background: rgba(184, 162, 248, 0.4);
}

button {
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid rgba(184, 162, 248, 0.6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect users who prefer less motion — everything still works, just calmer */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

#root {
  width: 100%;
  min-height: 100dvh;
}

@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes bounceIn {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes urgentPulse {
  0%   { opacity: 1; }
  100% { opacity: 0.5; }
}

@keyframes zzz1 {
  0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.7; }
  50%       { transform: translateY(-8px) translateX(4px); opacity: 0.3; }
}

@keyframes zzz2 {
  0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.5; }
  50%       { transform: translateY(-6px) translateX(3px); opacity: 0.15; }
}

@keyframes zzz3 {
  0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.3; }
  50%       { transform: translateY(-4px) translateX(2px); opacity: 0.08; }
}

@keyframes cardSlideUp {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes xpGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(251,191,36,0.0); }
  50%       { text-shadow: 0 0 14px rgba(251,191,36,0.55), 0 0 4px rgba(251,191,36,0.3); }
}

@keyframes acceptPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 4px 20px rgba(184,162,248,0.4); }
  50%       { transform: scale(1.02); box-shadow: 0 6px 28px rgba(184,162,248,0.6); }
}

@keyframes sparkleRotate {
  0%, 100% { transform: rotate(0deg)  scale(1);   }
  25%       { transform: rotate(15deg) scale(1.15); }
  75%       { transform: rotate(-10deg) scale(1.08); }
}

@keyframes barDotPulse {
  0%, 100% { opacity: 1;   transform: translateY(-50%) scale(1);   }
  50%       { opacity: 0.4; transform: translateY(-50%) scale(0.7); }
}

@keyframes urgentBarPulse {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.6; }
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes mossBreath {
  0%, 100% { transform: scale(1) translateY(0px); }
  40%       { transform: scale(1.025) translateY(-4px); }
  60%       { transform: scale(1.015) translateY(-2px); }
}

@keyframes fadeInScreen {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastSlideUp {
  from { transform: translateX(-50%) translateY(100%) scale(0.95); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0) scale(1);       opacity: 1; }
}

@keyframes badgeSlideDown {
  from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}

@keyframes toastFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(8px); }
}

@keyframes loadingPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.97); }
  50%       { opacity: 1;   transform: scale(1.03); }
}

@keyframes floatUp {
  0%   { transform: translateX(-50%) translateY(0px); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-60px); opacity: 0; }
}

@keyframes treeTap {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50%       { opacity: 0.9;  transform: scale(1.15); }
}

/* Den: new furniture pops into place */
@keyframes popIn {
  0%   { transform: scale(0);   opacity: 0; }
  70%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

/* Den: sparkle burst around a newly placed item */
@keyframes sparkleFade {
  0%   { transform: scale(0);   opacity: 0; }
  30%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.4) translateY(-10px); opacity: 0; }
}

/* Den: transform-safe breath + bob (applied to an inner div, so they never
   collide with the positioning translateX on the wrapper) */
@keyframes mossBreathe {
  0%, 100% { transform: scale(1) translateY(0px); }
  40%       { transform: scale(1.025) translateY(-4px); }
  60%       { transform: scale(1.015) translateY(-2px); }
}

@keyframes mossBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-7px) scale(1.03, 0.97); }
}

@keyframes petBounce {
  0%   { transform: translateX(-50%) scale(1); }
  30%  { transform: translateX(-50%) scale(0.94) translateY(3px); }
  60%  { transform: translateX(-50%) scale(1.04) translateY(-2px); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Active press state for tap feel */
button:active {
  transform: scale(0.96);
  transition: transform 0.08s ease;
}