@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, #f6c78a, #fad6e0);
}

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

.screen { display: none; flex-direction: column; align-items: center; gap: 0.8rem; 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.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: #5a3f22; 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; }

.welcome-art { width: 116px; height: auto; animation: float-art 3.2s ease-in-out infinite; }
@keyframes float-art { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* HUD */
.hud { width: 100%; max-width: 460px; display: flex; align-items: center; gap: 0.6rem; }
.hud-stat { display: flex; flex-direction: column; background: #efe3cf; border-radius: 12px; padding: 0.3rem 0.9rem; font-weight: 700; }
.hud-stat span.hud-label { font-size: 0.7rem; opacity: 0.7; font-weight: 700; }
.hud-goal { align-items: center; padding-top: 0.15rem; padding-bottom: 0.15rem; }
.hud-goal-icon { display: block; }
.hud-btn { margin-left: auto; font-family: inherit; font-weight: 700; cursor: pointer; border: none; border-radius: 12px; padding: 0.5rem 0.9rem; background: #e7c3ef; color: #4a3728; }
.hud-btn + .hud-btn { margin-left: 0.4rem; }
.hud-btn:disabled { opacity: 0.4; cursor: default; }

/* Board */
.stage { width: 100%; max-width: 460px; }
#game-canvas { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; border-radius: 18px; touch-action: none; }

/* D-pad */
.dpad { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.dpad-row { display: flex; gap: 0.3rem; }
.dir { font-family: inherit; font-size: 1.3rem; cursor: pointer; border: none; border-radius: 12px; width: 3rem; height: 3rem; background: #efe3cf; color: #4a3728; }
.dir:active { background: #e0d0b6; }

/* Win confetti */
.screen-win { position: relative; }
.confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; }
.confetti span { position: absolute; bottom: -8%; width: 14px; height: 14px; border-radius: 4px; background: #f4cf52; animation: confetti-rise 3s ease-in forwards; }
.confetti span:nth-child(2n) { background: #fad6e0; }
.confetti span:nth-child(3n) { background: #bcd4f2; }
@keyframes confetti-rise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(-112vh) rotate(60deg); opacity: 0; } }

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