/* ========== BASE STYLES ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Arial Rounded MT Bold', cursive, sans-serif;
  overflow: hidden;
  user-select: none;
  background: #87CEEB;
}

.screen {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

.hidden {
  display: none !important;
}

/* ========== CLOUDS ========== */
.clouds-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.cloud {
  position: absolute;
  font-size: 60px;
  opacity: 0.6;
  animation: float-cloud linear infinite;
}

.cloud1 { top: 5%; left: -10%; animation-duration: 25s; font-size: 70px; }
.cloud2 { top: 15%; left: -10%; animation-duration: 35s; animation-delay: 8s; font-size: 50px; }
.cloud3 { top: 8%; left: -10%; animation-duration: 30s; animation-delay: 15s; font-size: 80px; }

@keyframes float-cloud {
  0% { transform: translateX(-100px); }
  100% { transform: translateX(calc(100vw + 100px)); }
}

/* ========== START SCREEN ========== */
#start-screen {
  background: linear-gradient(180deg, #87CEEB 0%, #B0E0FF 50%, #90EE90 85%, #228B22 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.start-content {
  text-align: center;
  z-index: 1;
  animation: bounce-in 0.8s ease-out;
}

@keyframes bounce-in {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.game-title {
  font-size: clamp(28px, 5vw, 56px);
  color: #FF69B4;
  text-shadow: 3px 3px 0 #fff, -1px -1px 0 #FF1493;
  margin-bottom: 10px;
  line-height: 1.2;
}

.start-van-preview {
  font-size: 100px;
  margin: 15px 0;
  animation: van-wobble 2s ease-in-out infinite;
}

@keyframes van-wobble {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.start-subtitle {
  font-size: clamp(16px, 2.5vw, 24px);
  color: #4A4A4A;
  margin-bottom: 25px;
}

.start-hint {
  font-size: clamp(12px, 1.8vw, 16px);
  color: #888;
  margin-top: 15px;
}

.big-btn {
  font-family: inherit;
  font-size: clamp(24px, 4vw, 40px);
  padding: 15px 50px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(180deg, #FFD700, #FFA500);
  color: white;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  cursor: pointer;
  box-shadow: 0 6px 0 #CC8400, 0 8px 15px rgba(0,0,0,0.2);
  transition: transform 0.1s, box-shadow 0.1s;
}

.big-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #CC8400, 0 10px 20px rgba(0,0,0,0.25);
}

.big-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #CC8400, 0 3px 5px rgba(0,0,0,0.2);
}

/* ========== HUD ========== */
#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  border-bottom: 3px solid #FFD700;
  font-size: clamp(16px, 2.5vw, 22px);
}

#score-display {
  color: #FF69B4;
  font-weight: bold;
}

#lives-display {
  font-size: clamp(18px, 3vw, 26px);
}

#mute-btn {
  font-size: 24px;
  background: none;
  border: 2px solid #FFD700;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#mystery-btn {
  font-size: 16px;
  background: #FFF0F5;
  border: 2px solid #FFD700;
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  color: #4A4A4A;
  transition: background 0.2s;
}

#mystery-btn:hover {
  background: #FFE4E1;
}

#hint-btn {
  display: block;
  margin: 8px auto;
  font-size: 18px;
  background: #FFF8DC;
  border: 2px solid #FFD700;
  border-radius: 20px;
  padding: 6px 18px;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  color: #4A4A4A;
  animation: hint-wiggle 1s ease-in-out infinite;
}

@keyframes hint-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

#hint-btn:hover {
  background: #FFEFD5;
}

#hint-text {
  text-align: center;
  font-size: 18px;
  color: #FF69B4;
  font-weight: bold;
  margin: 6px 0;
  animation: bubble-pop 0.3s ease-out;
}

/* ========== GAME WORLD ========== */
#game-world {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #87CEEB 0%, #90EE90 60%, #7CCD7C 100%);
  overflow: hidden;
}

.game-clouds .cloud {
  font-size: 40px;
  opacity: 0.4;
}

/* ========== ROADS - neighbourhood grid ========== */
.road {
  position: absolute;
  background: #777;
  z-index: 1;
}

/* White dashed centre line */
.road::after {
  content: '';
  position: absolute;
  background: repeating-linear-gradient(
    90deg,
    white 0px, white 12px,
    transparent 12px, transparent 24px
  );
}

.road-h {
  left: 0;
  right: 0;
  height: 50px;
}

.road-h::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  transform: translateY(-50%);
}

.road-v {
  top: 0;
  bottom: 0;
  width: 50px;
}

.road-v::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    180deg,
    white 0px, white 12px,
    transparent 12px, transparent 24px
  );
}

/* Position roads at 33% and 66% to create a 3x3 grid */
#road-h1 { top: 33%; transform: translateY(-50%); }
#road-h2 { top: 66%; transform: translateY(-50%); }
#road-v1 { left: 33%; transform: translateX(-50%); }
#road-v2 { left: 66%; transform: translateX(-50%); }

/* ========== STREET SIGNS ========== */
.street-sign {
  position: absolute;
  background: white;
  color: #333;
  font-size: 8px;
  font-weight: bold;
  padding: 2px 8px;
  border: 1.5px solid #555;
  border-radius: 2px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  pointer-events: none;
  font-family: 'Arial', sans-serif;
  letter-spacing: 0.5px;
}

/* Sign post effect */
.street-sign::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 8px;
  background: #666;
  border-radius: 0 0 1px 1px;
}

/* ========== COUNTDOWN TIMER ========== */
#countdown-display {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: #FF69B4;
  font-size: clamp(12px, 2vw, 16px);
  font-weight: bold;
  padding: 6px 16px;
  border-radius: 20px;
  border: 2px solid #FFD700;
  z-index: 90;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  animation: pulse-countdown 1s ease-in-out infinite;
}

@keyframes pulse-countdown {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
}

/* ========== HOUSES ========== */
.house {
  position: absolute;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  z-index: 2;
}

/* Small garden patches */
.garden-patch {
  position: absolute;
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
}

/* ========== VAN ========== */
#van {
  position: absolute;
  width: 130px;
  height: 90px;
  z-index: 50;
  transition: none;
}

/* Driving bounce */
#van.van-driving {
  animation: van-bounce 0.35s ease-in-out infinite;
}

@keyframes van-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Soft shadow under van */
.van-shadow {
  position: absolute;
  bottom: -4px;
  left: 10px;
  right: 10px;
  height: 10px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.25) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
}

.van-body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 15px 15px 6px 6px;
  border: 3px solid #ccc;
  overflow: visible;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Roof sign */
.van-roof-sign {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #FF69B4, #FF1493);
  color: white;
  font-size: 9px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 8px 8px 2px 2px;
  white-space: nowrap;
  letter-spacing: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  border: 2px solid #FF69B4;
}

/* Blinking lights */
.van-blinker {
  position: absolute;
  font-size: 10px;
  z-index: 5;
  animation: blink-light 1.2s ease-in-out infinite;
}

.van-blinker-left {
  top: -2px;
  left: 2px;
}

.van-blinker-right {
  top: -2px;
  right: 2px;
}

@keyframes blink-light {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* Rainbow stripe - bigger and brighter */
.van-rainbow-stripe {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(90deg,
    #FF0000, #FF8C00, #FFD700, #32CD32, #1E90FF, #9932CC
  );
  border-radius: 0 0 4px 4px;
}

/* Bigger serving window */
.van-window {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 34px;
  height: 28px;
  background: linear-gradient(180deg, #B0E0FF, #87CEEB);
  border: 2px solid #888;
  border-radius: 4px 10px 4px 4px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* Bigger rainbow logo */
.van-logo {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(90deg, #FF0000, #FF8C00, #FFD700, #32CD32, #1E90FF, #9932CC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.1));
}

/* Smiling headlights */
.van-headlights {
  position: absolute;
  top: 12px;
  left: -6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.headlight {
  font-size: 12px;
}

/* UK-style number plates */
.van-plate {
  position: absolute;
  font-size: 8px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1.5px solid #333;
  white-space: nowrap;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  z-index: 5;
}

/* White front plate */
.van-plate-front {
  left: -3px;
  bottom: 22px;
  background: #FFFFFF;
  color: #222;
}

/* Yellow rear plate */
.van-plate-rear {
  right: -3px;
  bottom: 22px;
  background: #FFD700;
  color: #222;
}

/* Bigger wheels */
.van-wheels {
  position: absolute;
  bottom: -8px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
}

.wheel {
  font-size: 18px;
  animation: spin-wheel 0.4s linear infinite paused;
}

.van-moving .wheel {
  animation-play-state: running;
}

@keyframes spin-wheel {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Floating musical notes */
.van-notes {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  height: 40px;
  pointer-events: none;
  overflow: visible;
}

.music-note {
  position: absolute;
  font-size: 16px;
  pointer-events: none;
  animation: note-float 2s ease-out forwards;
}

@keyframes note-float {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  50% { opacity: 0.8; transform: translate(var(--nx), -25px) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--nx2), -50px) scale(0.6); }
}

/* Van facing directions */
#van.facing-right .van-body { transform: scaleX(1); }
#van.facing-left .van-body { transform: scaleX(-1); }
#van.facing-left .van-logo,
#van.facing-left .van-plate,
#van.facing-left .van-window,
#van.facing-left .van-roof-sign {
  transform: scaleX(-1);
}

/* ========== CUSTOMERS ========== */
.customer {
  position: absolute;
  font-size: 40px;
  z-index: 40;
  cursor: pointer;
  transition: transform 0.3s;
}

.customer:hover {
  transform: scale(1.15);
}

.customer.happy {
  animation: happy-bounce 0.5s ease 3;
}

.customer.sad {
  animation: sad-shake 0.4s ease 2;
}

@keyframes happy-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.2); }
}

@keyframes sad-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* Speech bubble */
.speech-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 2px solid #FFD700;
  border-radius: 15px;
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 60;
  animation: bubble-pop 0.3s ease-out;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: white;
}

@keyframes bubble-pop {
  0% { transform: translateX(-50%) scale(0); }
  100% { transform: translateX(-50%) scale(1); }
}

/* ========== FLAVOUR PANEL ========== */
#flavour-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  border-top: 4px solid #FFD700;
  padding: 12px 15px;
  z-index: 200;
  animation: slide-up 0.3s ease-out;
}

@keyframes slide-up {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

#customer-request {
  text-align: center;
  font-size: clamp(16px, 2.5vw, 22px);
  color: #4A4A4A;
  margin-bottom: 10px;
}

#flavour-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.flavour-btn {
  font-family: inherit;
  font-size: clamp(14px, 2vw, 20px);
  padding: 10px 18px;
  border: 3px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
  min-width: 100px;
}

.flavour-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 5px 0 rgba(0,0,0,0.15);
}

.flavour-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

.flavour-btn.correct {
  animation: correct-flash 0.5s ease;
}

.flavour-btn.wrong {
  animation: wrong-flash 0.5s ease;
}

@keyframes correct-flash {
  0%, 100% { background: inherit; }
  50% { background: #90EE90; border-color: #228B22; }
}

@keyframes wrong-flash {
  0%, 100% { background: inherit; }
  50% { background: #FFB0B0; border-color: #FF0000; }
}

/* Flavour button colours */
.flavour-chocolate  { background: #D2691E; color: white; border-color: #8B4513; }
.flavour-strawberry { background: #FFB6C1; color: #8B0000; border-color: #FF69B4; }
.flavour-vanilla    { background: #FFFACD; color: #8B8000; border-color: #FFD700; }
.flavour-mint       { background: #98FB98; color: #006400; border-color: #00FA9A; }
.flavour-rainbow    { background: linear-gradient(90deg, #FFB6C1, #FFFACD, #98FB98, #B0E0FF, #DDA0DD); color: #4A4A4A; border-color: #FF69B4; }
.flavour-orange     { background: #FFA500; color: white; border-color: #FF8C00; }
.flavour-red-lolly  { background: #FF0000; color: white; border-color: #8B0000; }

/* ========== FLOATING EFFECTS ========== */
.float-text {
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  z-index: 300;
  pointer-events: none;
  animation: float-up 1.5s ease-out forwards;
}

.float-text.points {
  color: #FFD700;
  text-shadow: 1px 1px 0 #333;
}

.float-text.oops {
  color: #FF0000;
  text-shadow: 1px 1px 0 #333;
}

.float-text.yummy {
  color: #FF69B4;
  text-shadow: 1px 1px 0 #333;
}

@keyframes float-up {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(1.3); }
}

/* Sparkle effect */
.sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 250;
  font-size: 20px;
  animation: sparkle-burst 0.8s ease-out forwards;
}

@keyframes sparkle-burst {
  0% { opacity: 1; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.5) rotate(180deg); }
  100% { opacity: 0; transform: scale(0) rotate(360deg); }
}

/* ========== GAME OVER SCREEN ========== */
#gameover-screen {
  background: linear-gradient(180deg, #FFB6C1 0%, #FFE4E1 50%, #FFF0F5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gameover-content {
  text-align: center;
  z-index: 1;
  animation: bounce-in 0.8s ease-out;
}

.gameover-content h1 {
  font-size: clamp(28px, 5vw, 48px);
  color: #FF69B4;
  text-shadow: 2px 2px 0 white;
  margin-bottom: 15px;
}

.gameover-content p {
  font-size: clamp(18px, 3vw, 28px);
  color: #4A4A4A;
  margin-bottom: 10px;
}

#final-message {
  font-size: clamp(16px, 2.5vw, 22px) !important;
  color: #888 !important;
  margin-bottom: 25px !important;
}

/* ========== MOBILE CONTROLS ========== */
#mobile-controls {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 150;
  gap: 5px;
}

.mobile-arrow {
  width: 50px;
  height: 50px;
  font-size: 24px;
  background: rgba(255,255,255,0.7);
  border: 2px solid #FFD700;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 600px) {
  #mobile-controls { display: grid; grid-template-columns: 50px 50px 50px; grid-template-rows: 50px 50px; }
}

/* ========== CELEBRATION ========== */
.confetti {
  position: fixed;
  font-size: 24px;
  z-index: 999;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}