/* ==========================================================================
   ArrowsGo Race Mode
   --------------------------------------------------------------------------
   The overlay sits on top of the board. It has to cover the board while the
   player is looking for an opponent or waiting for the countdown, but it
   must never swallow clicks while the race is running - the board has to
   stay playable at all times.
   ========================================================================== */

.race-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 11, 22, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: race-overlay-in 0.22s ease-out;
}

@keyframes race-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* While the race runs the overlay is hidden entirely, so the board gets
   every click. The result view brings it back. */
.race-overlay[hidden] {
  display: none;
}

.race-card {
  width: min(420px, 100%);
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 24px;
  border-radius: 20px;
  background: var(--panel-strong, rgba(14, 20, 37, 0.96));
  border: 1px solid var(--line, rgba(106, 141, 255, 0.18));
  box-shadow: var(--shadow, 0 24px 90px rgba(0, 0, 0, 0.35));
  text-align: center;
}

.race-title {
  margin: 0;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text, #f3f7ff);
}

.race-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted, rgba(232, 239, 255, 0.72));
}

.race-queue-position {
  margin: 0;
  font-size: 0.85rem;
  color: var(--soft, rgba(232, 239, 255, 0.48));
}

/* --- countdown ----------------------------------------------------------- */

.race-countdown {
  margin: 0;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand, #3dc5de);
  text-shadow: 0 0 32px rgba(61, 197, 222, 0.55);
  animation: race-countdown-pulse 1s ease-in-out infinite;
}

.race-countdown[hidden] {
  display: none;
}

@keyframes race-countdown-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.12); opacity: 0.78; }
}

/* --- spinner ------------------------------------------------------------- */

.race-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(61, 197, 222, 0.2);
  border-top-color: var(--brand, #3dc5de);
  animation: race-spin 0.9s linear infinite;
}

.race-spinner[hidden] {
  display: none;
}

@keyframes race-spin {
  to { transform: rotate(360deg); }
}

/* While the race runs the overlay becomes a slim strip at the top of the
   board. It must never cover the board - the player has to be able to
   click arrows the whole time - and it must not swallow clicks either. */
.race-overlay[data-view='racing'] {
  align-items: flex-start;
  padding: 10px 10px 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  animation: none;
}

.race-overlay[data-view='racing'] .race-card {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: auto;
  max-width: 100%;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
}

.race-overlay[data-view='racing'] .race-title,
.race-overlay[data-view='racing'] .race-desc {
  display: none;
}

.race-overlay[data-view='racing'] .race-progress {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0;
  background: none;
  border: none;
}

.race-overlay[data-view='racing'] .race-progress-row {
  flex: 0 0 auto;
  gap: 8px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.race-overlay[data-view='racing'] .race-progress-row--time {
  padding-top: 0;
  padding-left: 16px;
  border-top: none;
  border-left: 1px solid var(--line, rgba(106, 141, 255, 0.18));
}

.race-overlay[data-view='racing'] .race-progress-value {
  white-space: nowrap;
}

.race-overlay[data-view='racing'] .race-progress-value strong {
  font-size: 1rem;
}

/* --- live progress ------------------------------------------------------- */

.race-progress {
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(106, 141, 255, 0.08);
  border: 1px solid var(--line, rgba(106, 141, 255, 0.18));
}

.race-progress[hidden] {
  display: none;
}

.race-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  min-width: 0;
}

.race-progress-label {
  color: var(--soft, rgba(232, 239, 255, 0.48));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  white-space: nowrap;
}

.race-progress-value {
  color: var(--muted, rgba(232, 239, 255, 0.72));
  text-align: right;
  white-space: nowrap;
}

.race-progress-value strong {
  color: var(--text, #f3f7ff);
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
}

.race-progress-row--time {
  padding-top: 8px;
  border-top: 1px solid var(--line, rgba(106, 141, 255, 0.18));
}

/* --- actions ------------------------------------------------------------- */

.race-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

.race-btn {
  min-height: 44px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 0.95rem;
  border-radius: 999px;
  cursor: pointer;
}

.race-btn[hidden] {
  display: none;
}

/* --- HUD chip ------------------------------------------------------------ */

.race-chip {
  border-color: rgba(61, 197, 222, 0.4) !important;
  background: rgba(61, 197, 222, 0.12) !important;
  color: var(--brand, #3dc5de);
}

.race-chip strong {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.race-chip[hidden] {
  display: none !important;
}

/* --- small screens ------------------------------------------------------- */

@media (max-width: 640px) {
  .race-overlay {
    padding: 12px;
  }

  .race-card {
    padding: 20px 16px;
    gap: 10px;
  }

  .race-title {
    font-size: 1.3rem;
  }

  .race-desc {
    font-size: 0.88rem;
  }

  .race-countdown {
    font-size: 3.4rem;
  }

  .race-progress {
    padding: 10px 12px;
  }

  .race-progress-row {
    font-size: 0.85rem;
  }

  .race-btn {
    min-height: 44px;
    padding: 11px 18px;
    font-size: 0.9rem;
  }
}

/* Landscape phones: keep the card compact so the board stays visible. */
@media (max-height: 520px) {
  .race-card {
    padding: 14px 16px;
    gap: 8px;
  }

  .race-countdown {
    font-size: 2.6rem;
  }

  .race-progress {
    padding: 8px 12px;
  }
}