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

body {
  overflow: hidden;
  background: #c4a265;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
}

canvas { display: block; }

/* ── Start Screen ── */
#start-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 100;
  background: radial-gradient(ellipse at 65% 35%, #e8c88a 0%, #c49a5a 40%, #8b6934 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s, transform 0.8s;
}

#start-screen.hidden {
  opacity: 0;
  transform: scale(1.1);
  pointer-events: none;
}

.crawl-container {
  text-align: center;
  animation: fadeInUp 1.5s ease-out;
}

.crawl-title {
  font-size: clamp(36px, 8vw, 72px);
  font-weight: 900;
  color: #FFE81F;
  letter-spacing: 12px;
  text-shadow: 0 0 30px #FFE81F66, 0 0 80px #FFE81F33;
  margin-bottom: 4px;
}

.crawl-subtitle {
  font-size: clamp(18px, 4vw, 36px);
  font-weight: 700;
  color: #FFE81F;
  letter-spacing: 8px;
  text-shadow: 0 0 20px #FFE81F44;
  margin-bottom: 24px;
}

.crawl-divider {
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FFE81F, transparent);
  margin: 0 auto 24px;
}

.crawl-text {
  max-width: 500px;
  color: #fff8e0;
  font-size: clamp(13px, 2vw, 16px);
  line-height: 1.7;
  padding: 0 20px;
  text-shadow: 1px 1px 4px #00000066;
}

.btn-row {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 20px;
}

#start-btn, #saber-btn, #quiz-btn, #counter-btn {
  padding: 16px 36px;
  font-size: clamp(14px, 2.5vw, 20px);
  font-weight: 800;
  letter-spacing: 3px;
  color: #000;
  background: #FFE81F;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  text-transform: uppercase;
  animation: pulse 2s ease-in-out infinite;
}

#saber-btn {
  background: linear-gradient(135deg, #44ff44, #00cc66);
  color: #000;
  animation-delay: 0.5s;
}

#quiz-btn {
  background: linear-gradient(135deg, #ff44ff, #cc00cc, #8844ff);
  background-size: 200% 200%;
  color: #fff;
  animation: pulse 2s ease-in-out infinite, quizGradient 3s ease-in-out infinite;
  animation-delay: 1s;
  position: relative;
}

.btn-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ffd700;
  color: #000;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 1px;
  animation: blink 1.5s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255,215,0,0.5);
}

@keyframes quizGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

#counter-btn {
  background: linear-gradient(135deg, #4d96ff, #6bcb77, #ffd93d, #ff6b6b);
  background-size: 300% 300%;
  color: #000;
  animation: pulse 2s ease-in-out infinite, quizGradient 4s ease-in-out infinite;
  animation-delay: 1.5s;
  position: relative;
}

#start-btn:hover, #saber-btn:hover, #quiz-btn:hover, #counter-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 40px #FFE81F66, 0 0 80px #FFE81F33;
}

#saber-btn:hover {
  box-shadow: 0 0 40px #44ff4466, 0 0 80px #00cc6633;
}

#quiz-btn:hover {
  box-shadow: 0 0 40px #ff44ff66, 0 0 80px #cc00cc33;
}

#counter-btn:hover {
  box-shadow: 0 0 40px #4d96ff66, 0 0 80px #6bcb7733;
}

#start-btn .btn-glow, #saber-btn .btn-glow, #quiz-btn .btn-glow, #counter-btn .btn-glow {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
  animation: btnGlow 3s ease-in-out infinite;
}

.start-hint {
  margin-top: 16px;
  color: #ffe8b0;
  font-size: 13px;
  letter-spacing: 2px;
  animation: blink 2s ease-in-out infinite;
}

/* ── Game UI ── */
#ui-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.5s;
}

#ui-overlay.visible { opacity: 1; }

#title {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(16px, 3.5vw, 32px);
  font-weight: 900;
  letter-spacing: 3px;
  color: #FFE81F;
  text-shadow: 0 0 15px #FFE81F66, 0 0 40px #FFE81F33, 2px 2px 4px #000, 0 0 2px #000;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

#score-box, #streak-box, #shots-box {
  position: absolute;
  background: rgba(0,0,0,0.75);
  border: 2px solid #FFE81F;
  border-radius: 10px;
  padding: 8px 18px;
  text-align: center;
  min-width: 80px;
}

#score-box {
  top: 14px; right: 20px;
}

#streak-box {
  top: 14px; right: 120px;
}

#shots-box {
  top: 14px; right: 220px;
}

.label {
  color: #FFE81F;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}

.value {
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  text-shadow: 0 0 10px #FFE81F44;
  line-height: 1.1;
}

#message {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(36px, 7vw, 64px);
  font-weight: 900;
  color: #FFE81F;
  text-shadow: 0 0 30px #FFE81F88, 0 0 80px #ff000044, 3px 3px 8px #000, 0 0 4px #000;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 1px #00000044;
}

#message.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

#force-message {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(14px, 2.5vw, 22px);
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 12px #00000066, 2px 2px 4px #00000088;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  text-align: center;
  letter-spacing: 2px;
}

#force-message.show { opacity: 1; }

#instructions {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: #FFE81F;
  font-size: clamp(12px, 2vw, 15px);
  letter-spacing: 1px;
  text-shadow: 0 0 8px #000, 1px 1px 3px #000;
  text-align: center;
  transition: opacity 0.3s;
}

#combo-display {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  font-weight: 900;
  color: #ff4400;
  text-shadow: 0 0 20px #ff440088;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

#combo-display.show {
  opacity: 1;
  transform: translateX(-50%) scale(1.2);
}

#arrow-canvas, #particle-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

#arrow-canvas { z-index: 5; }
#particle-canvas { z-index: 6; }

/* ── Animations ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 20px #FFE81F44; }
  50% { box-shadow: 0 0 40px #FFE81F88, 0 0 60px #FFE81F44; }
}

@keyframes btnGlow {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}

@keyframes blink {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 600px) {
  #streak-box, #shots-box {
    top: 75px;
  }
  #streak-box { right: 20px; }
  #shots-box { right: 120px; }
}