/* Pit Stop Tap - 2x2 wheel grid */
.pit-arena { gap: 20px; }

.pit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 150px));
  gap: clamp(10px, 3vw, 20px);
  justify-content: center;
}

.wheel {
  aspect-ratio: 1;
  min-width: 96px;
  min-height: 96px;
  border-radius: 50%;
  border: 4px solid #08080c;
  background:
    radial-gradient(circle at 32% 28%, #3c3c4a, #17171f 68%),
    #101017;
  color: var(--f1-muted);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, 4vw, 1.3rem);
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.65), 0 8px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.wheel span {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 0.7rem;
  color: #565666;
  font-family: "VT323", monospace;
}

.wheel.hot {
  background: radial-gradient(circle at 35% 30%, #ffdf5e, var(--f1-yellow) 55%, #d98a00);
  color: #2a1a00;
  border-color: #4a2c00;
  box-shadow: 0 0 30px rgba(255, 212, 0, 0.75), inset 0 3px 8px rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.wheel.hot span { color: #6b4200; }

.wheel.done {
  background: radial-gradient(circle at 35% 30%, #2fe08a, #0a7a44);
  color: #04240f;
  border-color: #04391d;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.4);
}

.wheel.missed {
  animation: pit-shake 0.25s ease;
  border-color: var(--f1-red);
}

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

@media (max-width: 420px) {
  .pit-grid { grid-template-columns: repeat(2, minmax(88px, 1fr)); }
  .wheel { min-width: 88px; min-height: 88px; }
}