:root {
  --background: 42 100% 94%;
  --foreground: 238 28% 18%;
  --primary: 338 86% 56%;
  --secondary: 190 82% 40%;
  --muted: 37 68% 88%;
  --destructive: 0 78% 54%;
  --border: 31 42% 78%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px hsl(238 28% 18% / 0.08);
  --shadow-md: 0 14px 38px hsl(238 28% 18% / 0.14);
  --shadow-lg: 0 24px 70px hsl(338 86% 38% / 0.22);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
}

.dark {
  --background: 238 34% 11%;
  --foreground: 38 88% 94%;
  --primary: 333 90% 66%;
  --secondary: 184 78% 56%;
  --muted: 238 26% 20%;
  --destructive: 3 82% 66%;
  --border: 238 22% 30%;
  --card: 238 30% 16%;
  --shadow-sm: 0 6px 18px hsl(0 0% 0% / 0.2);
  --shadow-md: 0 14px 38px hsl(0 0% 0% / 0.28);
  --shadow-lg: 0 24px 70px hsl(333 90% 20% / 0.36);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: hsl(var(--background));
}

body {
  margin: 0;
  min-height: 100%;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, select {
  font: inherit;
}

select {
  font-size: max(16px, 1rem);
}

button:not(:disabled) {
  cursor: pointer;
}

.app-shell {
  background:
    radial-gradient(circle at 10% 5%, hsl(var(--primary) / 0.2), transparent 28rem),
    radial-gradient(circle at 92% 16%, hsl(var(--secondary) / 0.18), transparent 24rem),
    linear-gradient(145deg, hsl(var(--background)), hsl(var(--muted) / 0.72));
}

.header-glass {
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}

.panel-card {
  background: hsl(var(--card) / 0.86);
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}

.transition-smooth {
  transition: transform var(--transition-smooth), background var(--transition-smooth), border-color var(--transition-smooth), opacity var(--transition-fast), box-shadow var(--transition-smooth);
}

.transition-smooth:not(:disabled):active,
.activity-card:not(:disabled):active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .transition-smooth:not(:disabled):hover,
  .activity-card:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
}

.dog-world {
  min-height: 440px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 78%, hsl(98 56% 58% / 0.5), transparent 10rem),
    radial-gradient(circle at 20% 22%, hsl(var(--secondary) / 0.22), transparent 11rem),
    linear-gradient(180deg, hsl(199 92% 84% / 0.72), hsl(43 95% 86% / 0.72));
}

.dark .dog-world {
  background:
    radial-gradient(circle at 50% 78%, hsl(142 42% 36% / 0.42), transparent 10rem),
    radial-gradient(circle at 20% 22%, hsl(var(--secondary) / 0.16), transparent 11rem),
    linear-gradient(180deg, hsl(238 36% 24% / 0.9), hsl(260 28% 18% / 0.92));
}

.dog-world::before,
.dog-world::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: hsl(var(--card) / 0.72);
  filter: blur(1px);
}

.dog-world::before {
  width: 96px;
  height: 34px;
  left: 26px;
  top: 36px;
}

.dog-world::after {
  width: 128px;
  height: 42px;
  right: 18px;
  top: 82px;
}

.dog-button {
  position: relative;
  z-index: 2;
  width: 250px;
  height: 310px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: end center;
  touch-action: manipulation;
}

.dog {
  position: relative;
  width: 210px;
  height: 280px;
  transform-origin: 50% 100%;
}

.jump-animation {
  animation: dog-idle 2.8s ease-in-out infinite;
}

.dog-button:active .dog,
.jump-animation {
  animation: dog-jump 520ms ease, dog-idle 2.8s ease-in-out 560ms infinite;
}

.dog-head {
  position: absolute;
  left: 45px;
  top: 26px;
  width: 120px;
  height: 112px;
  border-radius: 48% 48% 45% 45%;
  background: linear-gradient(145deg, hsl(29 86% 69%), hsl(24 72% 58%));
  box-shadow: inset -14px -10px 0 hsl(20 62% 46% / 0.18), var(--shadow-sm);
  z-index: 3;
}

.dog-ear {
  position: absolute;
  top: 38px;
  width: 48px;
  height: 92px;
  background: linear-gradient(160deg, hsl(22 70% 48%), hsl(18 62% 34%));
  border-radius: 60% 35% 70% 45%;
  z-index: 1;
}

.dog-ear-left {
  left: 26px;
  transform: rotate(20deg);
}

.dog-ear-right {
  right: 26px;
  transform: rotate(-20deg) scaleX(-1);
}

.dog-eye {
  position: absolute;
  top: 43px;
  width: 16px;
  height: 20px;
  border-radius: 999px;
  background: hsl(238 28% 13%);
  box-shadow: inset 4px 3px 0 hsl(0 0% 100% / 0.85);
}

.dog-eye.left {
  left: 32px;
}

.dog-eye.right {
  right: 32px;
}

.dog-snout {
  position: absolute;
  left: 35px;
  bottom: 18px;
  width: 50px;
  height: 38px;
  border-radius: 50% 50% 46% 46%;
  background: hsl(39 90% 86%);
}

.dog-snout span {
  position: absolute;
  left: 18px;
  top: 8px;
  width: 14px;
  height: 10px;
  border-radius: 999px;
  background: hsl(238 28% 13%);
}

.dog-body {
  position: absolute;
  left: 42px;
  top: 130px;
  width: 126px;
  height: 112px;
  border-radius: 38% 38% 48% 48%;
  background: hsl(var(--primary));
  box-shadow: inset -18px -12px 0 hsl(0 0% 0% / 0.1), var(--shadow-sm);
  z-index: 2;
}

.dog-body.hoodie {
  background: linear-gradient(135deg, hsl(338 86% 56%), hsl(45 96% 58%), hsl(190 82% 46%));
}

.dog-body.royal {
  background: linear-gradient(145deg, hsl(268 72% 48%), hsl(338 86% 56%));
}

.dog-body.sport {
  background: repeating-linear-gradient(90deg, hsl(190 82% 40%) 0 18px, hsl(0 0% 100%) 18px 30px);
}

.dog-body.space {
  background: radial-gradient(circle at 25% 25%, hsl(0 0% 100%), transparent 5px), linear-gradient(145deg, hsl(229 42% 28%), hsl(238 28% 12%));
}

.dog-badge {
  position: absolute;
  left: 44px;
  top: 34px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: hsl(48 98% 62%);
  color: hsl(238 28% 18%);
  font-weight: 900;
}

.dog-paw {
  position: absolute;
  top: 226px;
  width: 42px;
  height: 34px;
  border-radius: 40% 40% 55% 55%;
  background: hsl(29 86% 69%);
  z-index: 4;
}

.paw-left {
  left: 48px;
}

.paw-right {
  right: 48px;
}

.dog-tail {
  position: absolute;
  right: 17px;
  top: 142px;
  width: 76px;
  height: 24px;
  border-radius: 999px;
  background: hsl(24 72% 58%);
  transform-origin: 10% 50%;
  animation: wag 520ms ease-in-out infinite alternate;
  z-index: 1;
}

.speech-bubble {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  z-index: 5;
  max-width: 520px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  background: hsl(var(--card) / 0.9);
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  text-align: center;
  font-weight: 850;
}

.loading-card {
  display: grid;
  gap: 10px;
  background: hsl(var(--muted) / 0.52);
  border: 1px solid hsl(var(--border));
}

.loading-card div {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(var(--card) / 0.25), hsl(var(--card) / 0.78), hsl(var(--card) / 0.25));
  background-size: 220% 100%;
  animation: shimmer 1.1s linear infinite;
}

.loading-card div:nth-child(2) {
  width: 82%;
}

.loading-card div:nth-child(3) {
  width: 58%;
}

.bottom-nav {
  background: linear-gradient(180deg, transparent, hsl(var(--background) / 0.85) 26%, hsl(var(--background)));
}

genmb-audio {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
}

@keyframes dog-idle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}

@keyframes dog-jump {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-54px) scale(1.04); }
  72% { transform: translateY(4px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes wag {
  from { transform: rotate(12deg); }
  to { transform: rotate(-18deg); }
}

@keyframes shimmer {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}

@media (max-width: 420px) {
  .dog-world {
    min-height: 410px;
  }

  .dog-button {
    transform: scale(0.9);
  }
}