@font-face {
  font-family: 'Comic Neue';
  src: url('../../paws-and-ladders/fonts/ComicNeue-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Comic Neue';
  src: url('../../paws-and-ladders/fonts/ComicNeue-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

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

:root {
  --cream: #fdf6ec;
  --text: #4a3728;
  --ocean-top: #bfe6f5;
  --ocean-bot: #3f8fc4;
  --btn: linear-gradient(135deg, #73bce8, #b8d8f8);
}

body {
  min-height: 100vh;
  font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif;
  background: var(--cream);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.app-shell { width: 100%; max-width: 700px; }

/* Screen routing */
.screen { display: none; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; }
body[data-screen="welcome"] .screen-welcome { display: flex; }
body[data-screen="play"] .screen-play { display: flex; }
body[data-screen="win"] .screen-win { display: flex; }
body[data-screen="gameover"] .screen-gameover { display: flex; }

h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
.tagline, .how-to, .win-msg { opacity: 0.8; max-width: 24rem; }
.how-to { font-size: 0.95rem; }
.best-line { font-weight: 700; }

.big-btn {
  font-family: inherit; font-size: 1.3rem; font-weight: 700;
  color: white; border: none; cursor: pointer;
  padding: 0.8rem 2.2rem; border-radius: 50px; background: var(--btn);
  transition: transform 0.2s;
}
.big-btn:hover { transform: scale(1.06); }
.small-btn {
  font-family: inherit; font-size: 1rem; font-weight: 700;
  color: var(--text); text-decoration: none; cursor: pointer;
  padding: 0.5rem 1.3rem; border-radius: 50px; border: 2px solid var(--text);
  background: transparent;
}
.actions { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }

/* HUD */
.hud {
  width: 100%; max-width: 640px; display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.5rem; font-weight: 700;
}
.hud-title { min-width: 6.5rem; text-align: left; font-size: 0.95rem; }
.hud-hunger { flex: 1; height: 14px; background: rgba(0,0,0,0.12); border-radius: 8px; overflow: hidden; }
.hud-hunger-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #ffd166, #ff8c42); transition: width 0.15s; }
.hud-lives { font-size: 1.1rem; letter-spacing: 1px; color: #e2495a; }
.hud-score { min-width: 3.5rem; text-align: right; }

/* Stage */
.stage { position: relative; width: 100%; max-width: 640px; }
#game-canvas {
  width: 100%; height: auto; aspect-ratio: 640 / 480; display: block;
  background: var(--ocean-top); border-radius: 16px; touch-action: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.levelup-pop {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%) scale(1);
  font-size: 2rem; font-weight: 700; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  pointer-events: none; animation: pop 0.8s ease-out;
}
@keyframes pop {
  0% { transform: translate(-50%,-50%) scale(0.4); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%,-80%) scale(1.2); opacity: 0; }
}
.crown { font-size: 3.5rem; }

/* Welcome hero cat */
.welcome-cat { width: 150px; height: auto; margin-bottom: 0.1rem; animation: float-cat 3.5s ease-in-out infinite; }
@keyframes float-cat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Win celebration confetti */
.screen-win { position: relative; }
.confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; }
.confetti span { position: absolute; bottom: -10%; font-size: 1.8rem; animation: confetti-rise 3s ease-in forwards; }
@keyframes confetti-rise {
  0%   { transform: translateY(0) rotate(0deg) scale(0.6); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(-112vh) rotate(55deg) scale(1.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .big-btn, .hud-hunger-fill { transition: none; }
  .levelup-pop { animation: none; }
  .welcome-cat { animation: none; }
  .confetti { display: none; }
}