/* Tyre Master - 2x2 compound grid + sequence readout */
.tyre-arena { gap: 20px; }

.tyre-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 165px));
  gap: clamp(10px, 3vw, 18px);
  justify-content: center;
}

.tyre {
  min-height: 92px;
  border-radius: 16px;
  border: 3px solid #08080c;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(0.85rem, 3.4vw, 1.05rem);
  letter-spacing: 1px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0.72;
  transition: transform 0.08s ease, opacity 0.1s ease, box-shadow 0.12s ease;
}

.tyre span { font-size: 1.5rem; }

.t-soft { background: linear-gradient(160deg, #ff5f4a, #b3231a); color: #fff; }
.t-med  { background: linear-gradient(160deg, #ffe066, #c9a400); color: #2a2200; }
.t-hard { background: linear-gradient(160deg, #f2f2f7, #a8a8b8); color: #17171f; }
.t-wet  { background: linear-gradient(160deg, #6ec1ff, #1466b8); color: #fff; }

.tyre.lit {
  opacity: 1;
  transform: scale(1.06);
  box-shadow: 0 0 34px currentColor, inset 0 3px 10px rgba(255, 255, 255, 0.4);
}

.tyre:active { transform: scale(0.97); }

.tyre.wrong {
  animation: tyre-shake 0.3s ease;
  outline: 4px solid var(--f1-red);
  outline-offset: -4px;
}

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

.tyre-seq {
  margin: 0;
  min-height: 1.4em;
  font-family: "VT323", monospace;
  font-size: 1.3rem;
  color: var(--f1-yellow);
  letter-spacing: 4px;
}