:root {
  --c-red: #e63946;
  --c-yellow: #f4c430;
  --c-green: #4caf50;
  --c-blue: #2196f3;
  --c-pink: #f06292;
  --c-orange: #ff9800;
  --bg: #c8e6a0;
  --track: #f5f0dc;
}

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

body {
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

[hidden] { display: none !important; }

h1 { font-size: clamp(2rem, 6vw, 3.5rem); color: #3b5e1f; margin-bottom: 1.5rem; text-align: center; }

.big-btn {
  font-family: inherit;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  padding: 0.8em 1.4em;
  border: none;
  border-radius: 999px;
  background: #ff7043;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 0 #c75b38;
  transition: transform 0.1s;
}
.big-btn:active { transform: translateY(3px); box-shadow: none; }
.big-btn:disabled { background: #aaa; box-shadow: 0 4px 0 #888; cursor: default; }

#start-screen { text-align: center; padding: 1rem; }
.mode-buttons { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }

#claim-area { margin-top: 2rem; }
#claim-area p { font-size: 1.3rem; color: #3b5e1f; margin-bottom: 1rem; }
#claim-snails { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.claim-snail {
  width: 90px; height: 70px;
  border: 4px solid transparent;
  border-radius: 16px;
  background: var(--track);
  cursor: pointer;
  padding: 4px;
}
.claim-snail.claimed { border-color: #3b5e1f; background: #fff; }

#game-screen { width: 100%; max-width: 1000px; padding: 1rem; }

#board { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; }
.track {
  display: grid;
  grid-template-columns: repeat(9, 1fr) 14px;
  align-items: center;
  background: var(--track);
  border-radius: 12px;
  height: clamp(44px, 8vh, 64px);
  position: relative;
  overflow: hidden;
}
.step { border-right: 2px dashed #d8d0b0; height: 100%; }
.finish {
  background: repeating-linear-gradient(45deg, #333 0 6px, #fff 6px 12px);
  height: 100%;
}
.snail {
  position: absolute;
  left: 0;
  width: clamp(40px, 7vh, 56px);
  transition: left 0.6s ease-in-out;
  z-index: 1;
}
.snail.wiggle { animation: wiggle 0.6s ease-in-out; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

#controls { display: flex; align-items: center; justify-content: center; gap: 2rem; }
#dice-area { display: flex; gap: 1rem; }
.die {
  width: clamp(48px, 9vw, 72px);
  height: clamp(48px, 9vw, 72px);
  border-radius: 14px;
  background: #fff;
  border: 3px solid #00000022;
}
.die.rolling { animation: tumble 0.15s linear infinite; }
@keyframes tumble {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(0.85); }
  100% { transform: rotate(360deg) scale(1); }
}

#win-overlay {
  position: fixed; inset: 0;
  background: #00000088;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
#win-card {
  background: #fff;
  border-radius: 24px;
  padding: 2.5rem 3rem;
  text-align: center;
  z-index: 12;
}
#win-snail { width: 120px; margin: 0 auto 1rem; }
#win-text { font-size: clamp(1.5rem, 5vw, 2.2rem); color: #3b5e1f; margin-bottom: 1.5rem; }

#confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 11; }
.confetti-bit {
  position: absolute;
  top: -20px;
  width: 12px; height: 12px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); }
}