HaBit/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --app-topbar-height: 3.5rem;
    --app-viewport-bottom-offset: 0px;
    --app-nav-offset: 6rem;
    --bottom-nav-height: 6rem;
    --background: 252 38% 10%;
    --foreground: 52 100% 88%;
    --card: 252 32% 14%;
    --card-foreground: 52 100% 88%;
    --popover: 252 32% 14%;
    --popover-foreground: 52 100% 88%;
    --primary: 318 100% 62%;
    --primary-foreground: 252 38% 10%;
    --secondary: 198 100% 45%;
    --secondary-foreground: 252 38% 10%;
    --muted: 252 24% 20%;
    --muted-foreground: 52 35% 74%;
    --accent: 142 70% 45%;
    --accent-foreground: 252 38% 10%;
    --destructive: 0 84% 58%;
    --destructive-foreground: 52 100% 96%;
    --border: 280 45% 38%;
    --input: 280 35% 28%;
    --ring: 318 100% 62%;
    --chart-1: 318 100% 62%;
    --chart-2: 198 100% 45%;
    --chart-3: 142 70% 45%;
    --chart-4: 48 100% 55%;
    --chart-5: 280 70% 55%;
    --radius: 0px;
    --retro-shadow: 4px 4px 0 0 hsl(280 45% 28%);
    --retro-shadow-sm: 2px 2px 0 0 hsl(280 45% 28%);
    --lcd-bg: 142 35% 22%;
    --lcd-border: 142 45% 35%;
  }

  .dark {
    --background: 252 38% 10%;
    --foreground: 52 100% 88%;
    --card: 252 32% 14%;
    --card-foreground: 52 100% 88%;
    --popover: 252 32% 14%;
    --popover-foreground: 52 100% 88%;
    --primary: 318 100% 62%;
    --primary-foreground: 252 38% 10%;
    --secondary: 198 100% 45%;
    --secondary-foreground: 252 38% 10%;
    --muted: 252 24% 20%;
    --muted-foreground: 52 35% 74%;
    --accent: 142 70% 45%;
    --accent-foreground: 252 38% 10%;
    --destructive: 0 84% 58%;
    --destructive-foreground: 52 100% 96%;
    --border: 280 45% 38%;
    --input: 280 35% 28%;
    --ring: 318 100% 62%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    overflow-x: clip;
    scroll-padding-bottom: var(--app-nav-offset, var(--bottom-nav-height));
  }

  body {
    @apply overflow-x-hidden bg-background text-foreground text-sm leading-relaxed;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-pixel leading-snug;
  }
}

@layer components {
  .pixel-border {
    border: 2px solid hsl(var(--border));
    box-shadow: var(--retro-shadow);
  }

  .pixel-border-sm {
    border: 2px solid hsl(var(--border));
    box-shadow: var(--retro-shadow-sm);
  }

  .pixel-inset {
    box-shadow: inset 0 0 0 2px hsl(var(--border) / 0.5),
      inset 3px 3px 0 0 hsl(var(--background));
  }

  .tamagotchi-shell {
    @apply pixel-border bg-card;
    background-image: linear-gradient(
      180deg,
      hsl(var(--card)) 0%,
      hsl(var(--muted)) 100%
    );
  }

  .tamagotchi-lcd {
    @apply pixel-inset relative overflow-hidden;
    background: hsl(var(--lcd-bg));
    border: 3px solid hsl(var(--lcd-border));
  }

  /* Matches pet-tab LCD: max-w-lg main minus px-5 and shell p-4 */
  .tamagotchi-lcd-pet-match {
    @apply aspect-[4/3] w-full shrink-0;
    max-width: calc(32rem - 2.5rem - 2rem);
  }

  /* Landing hero preview: cap LCD height on narrow viewports */
  .tamagotchi-lcd-landing {
    @apply aspect-[4/3] w-full shrink-0;
    max-height: clamp(120px, 36vw, 240px);
  }

  .tamagotchi-lcd-landing > div.absolute svg {
    width: 1rem;
    height: 1rem;
  }

  .pet-viewport-stage {
    @apply flex min-h-0 w-full flex-1 flex-col items-center justify-center;
  }

  .tamagotchi-shell-fill {
    @apply flex min-h-0 w-full max-w-4xl flex-1 flex-col;
  }

  .tamagotchi-lcd-pet-fill {
    @apply relative min-h-0 w-full flex-1;
    min-height: 16rem;
    max-width: none;
    aspect-ratio: auto;
  }

  .customize-body {
    min-height: 26rem;
  }

  @media (min-width: 1024px) {
    .customize-body {
      min-height: 30rem;
    }
  }

  .retro-btn {
    @apply inline-flex items-center justify-center border-2 border-border bg-primary text-primary-foreground;
    box-shadow: var(--retro-shadow-sm);
    transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
  }

  .retro-btn:hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 0 hsl(280 45% 28%);
  }

  .retro-btn:active:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: none;
  }

  .retro-card {
    @apply border-2 border-border bg-card text-card-foreground;
    box-shadow: var(--retro-shadow);
  }

  .bottom-nav {
    container-type: inline-size;
    container-name: bottom-nav;
  }

  @container bottom-nav (max-width: 32rem) {
    .bottom-nav-item-label {
      display: none;
    }

    .bottom-nav-item {
      gap: 0;
      padding-top: 0.625rem;
      padding-bottom: 0.625rem;
    }

    .bottom-nav-item-icon {
      height: 1.75rem;
      width: 1.75rem;
    }
  }
}

@layer utilities {
  .pb-nav {
    padding-bottom: var(--app-nav-offset, var(--bottom-nav-height));
  }

  .pb-nav-safe {
    padding-bottom: calc(
      var(--app-nav-offset, var(--bottom-nav-height)) +
        var(--app-viewport-bottom-offset, 0px)
    );
  }

  .pt-topbar {
    padding-top: calc(var(--app-topbar-height) + env(safe-area-inset-top, 0px));
  }

  .image-pixelated {
    image-rendering: pixelated;
  }

  .field-locked {
    @apply cursor-not-allowed border-border/60 bg-muted/70 text-muted-foreground opacity-75;
  }

  .form-section-locked {
    @apply border-border/50 bg-muted/35;
  }

  .form-section-locked .field-locked,
  .form-section-locked input:disabled,
  .form-section-locked textarea:disabled {
    @apply cursor-not-allowed opacity-75;
  }

  .form-section-locked input[type="range"]:disabled {
    @apply opacity-50 grayscale;
  }

  .form-section-locked label {
    @apply text-muted-foreground;
  }
}

@keyframes pet-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes parallax-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(6px, -4px, 0);
  }
}

@keyframes star-twinkle {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.animate-pet-breathe {
  animation: pet-breathe 2.4s ease-in-out infinite;
}

.animate-parallax-drift {
  animation: parallax-drift 8s ease-in-out infinite;
}

.animate-star-twinkle {
  animation: star-twinkle 3s steps(2, end) infinite;
}