/* ============================================================
   PIXEL PET — design system (retro Tamagotchi)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
  /* ink + paper */
  --ink:        #2b2233;   /* outlines + text */
  --ink-soft:   #6b5e7a;
  --paper:      #f4f1e8;   /* screen / light surfaces */

  /* device shell */
  --shell:      #ffcb2b;   /* sunny tamagotchi yellow */
  --shell-dk:   #e6a700;   /* shell shadow */
  --shell-lt:   #ffe07a;   /* shell highlight */

  /* lcd screen */
  --screen:     #dcefd0;   /* pale pistachio lcd */
  --screen-dk:  #b9d7a6;
  --scan:       rgba(43,34,51,0.05);

  /* stat accents */
  --hunger:     #ff8a3d;   /* orange */
  --energy:     #4fc3f7;   /* sky blue */
  --happy:      #ff6fb5;   /* pink */
  --clean:      #3dd9b8;   /* teal */

  /* night */
  --night:      #2b2a4a;
  --night-lt:   #46437a;

  --font-pixel: 'Press Start 2P', monospace;
  --font-read:  'VT323', monospace;
}

* { box-sizing: border-box; }

/* crisp pixel images */
.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---- chunky pixel button ---- */
.pbtn {
  font-family: var(--font-pixel);
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .04s, box-shadow .04s;
  user-select: none;
  image-rendering: pixelated;
}
.pbtn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--ink);
}
.pbtn:disabled { opacity: .5; cursor: default; box-shadow: 0 4px 0 var(--ink); transform: none; }

/* segmented pixel stat bar */
.statbar {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  height: 14px;
  padding: 2px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.statbar .seg { background: var(--screen-dk); opacity: .35; }
.statbar .seg.on { opacity: 1; }

/* lcd scanlines overlay */
.scanlines {
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 2px, var(--scan) 2px 4px);
}

/* blink + bob animations */
@keyframes bob   { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
@keyframes bob-s { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-3px); } }
@keyframes wob   { 0%,100%{ transform: rotate(-3deg); } 50%{ transform: rotate(3deg); } }
@keyframes pop   { 0%{ transform: scale(.6); opacity:0; } 60%{ transform: scale(1.15);} 100%{ transform: scale(1); opacity:1; } }
@keyframes zzz   { 0%{ transform: translateY(0) scale(.8); opacity:0; }
                   30%{ opacity:1; } 100%{ transform: translateY(-26px) scale(1.1); opacity:0; } }
@keyframes patpop{ 0%{ transform: translate(-50%,0) scale(.4); opacity:0;}
                   50%{ opacity:1;} 100%{ transform: translate(-50%,-34px) scale(1.2); opacity:0;} }

/* ---- micro-interaction keyframes ---- */
/* RPG-style collectible: float up ~30px while fading out */
@keyframes heart-rise {
  0%   { transform: translate(-50%, 0)    scale(.6); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(-50%, -32px) scale(1.15); opacity: 0; }
}
/* squash-and-stretch on drop */
@keyframes squash {
  0%   { transform: scale(1, 1); }
  28%  { transform: scale(1.28, .74); }   /* flatten on impact */
  52%  { transform: scale(.86, 1.16); }   /* rebound tall */
  74%  { transform: scale(1.08, .94); }
  100% { transform: scale(1, 1); }
}
/* quick micro-bounce that links click -> heart -> pet */
@keyframes patbounce {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { scrollbar-width: none; }