@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;
  --btn: linear-gradient(135deg, #8fd0a0, #b8e8c8);
}

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: 440px; }

/* 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="gameover"] .screen-gameover { display: flex; }

h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
.tagline, .win-msg { opacity: 0.8; }
.best-line { font-weight: 700; }

.big-btn {
  font-family: inherit; font-size: 1.3rem; font-weight: 700; color: #234032; 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; }

/* Medal badge (vector/CSS, no emoji) */
.medal { display: inline-block; font-weight: 700; padding: 0.35rem 1rem; border-radius: 50px; border: 2px solid #d8c9b0; background: #fff; }
.medal.none   { color: #9a8d7a; }
.medal.bronze { color: #fff;     background: #cd7f32; border-color: #a9692a; }
.medal.silver { color: #4a3728;  background: #d7dde2; border-color: #b3bcc4; }
.medal.gold   { color: #5a4a16;  background: #f4cf52; border-color: #cda82f; }

/* Welcome hero cat */
.welcome-cat { width: 120px; height: auto; animation: float-cat 3.2s ease-in-out infinite; }
@keyframes float-cat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Stage + portrait canvas */
.stage { width: 100%; max-width: 400px; }
#game-canvas {
  width: 100%; height: auto; aspect-ratio: 400 / 600; display: block;
  background: #bfe9f7; border-radius: 16px; touch-action: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

@media (prefers-reduced-motion: reduce) {
  .big-btn { transition: none; }
  .welcome-cat { animation: none; }
}