/* ==================================================================
   JUSTPIXEL SOFTWARE LIBRARY
   REACTION TIME TEST
   ================================================================== */

.jp-reaction-game {
  display: grid;

  gap: var(--jp-space-5);
}

/* ==================================================================
   MODE SELECTOR
   ================================================================== */

.jp-reaction-mode-selector {
  display: flex;

  flex-wrap: wrap;

  gap: var(--jp-space-2);
}

/* ==================================================================
   GAME AREA
   ================================================================== */

.jp-reaction-area {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: var(--jp-space-2);

  width: 100%;

  min-height: 320px;

  height: clamp(320px, 46vh, 430px);

  overflow: hidden;

  padding: var(--jp-space-8);

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-lg);

  background: var(--jp-surface);

  color: var(--jp-text);

  font: inherit;

  box-shadow: var(--jp-shadow-sm);

  cursor: pointer;

  transition:
    background-color var(--jp-transition-fast),
    border-color var(--jp-transition-fast),
    transform var(--jp-transition-fast),
    box-shadow var(--jp-transition-fast);
}

.jp-reaction-area:active {
  transform: scale(0.997);
}

/* ==================================================================
   STATES
   ================================================================== */

.jp-reaction-area.is-idle {
  background: var(--jp-surface-accent);
}

.jp-reaction-area.is-waiting {
  background: var(--jp-danger-soft);

  border-color: var(--jp-danger-border);
}

.jp-reaction-area.is-ready {
  background: var(--jp-success-soft);

  border-color: var(--jp-success-border);
}

.jp-reaction-area.is-result {
  background: var(--jp-info-soft);

  border-color: var(--jp-info-border);
}

.jp-reaction-area.is-early {
  background: var(--jp-warning-soft);

  border-color: var(--jp-warning-border);
}

/* ==================================================================
   TEXT
   ================================================================== */

.jp-reaction-main-text {
  position: relative;

  z-index: 2;

  font-size: clamp(2rem, 6vw, 4.5rem);

  font-weight: var(--jp-weight-heavy);

  line-height: 1;
}

.jp-reaction-sub-text {
  position: relative;

  z-index: 2;

  color: var(--jp-text-muted);

  font-size: var(--jp-text-base);
}

/* ==================================================================
   TARGET
   ================================================================== */

.jp-reaction-target {
  position: absolute;

  display: none;

  width: clamp(68px, 9vw, 92px);
  height: clamp(68px, 9vw, 92px);

  border: 8px solid var(--jp-primary);
  border-radius: 50%;

  background: radial-gradient(
    circle,
    var(--jp-primary) 0 18%,
    var(--jp-surface) 19% 42%,
    var(--jp-primary) 43% 62%,
    var(--jp-surface) 63%
  );

  box-shadow: var(--jp-shadow-sm);

  cursor: crosshair;

  z-index: 3;
}

.jp-reaction-target.is-visible {
  display: block;
}

/* ==================================================================
   STATS
   ================================================================== */

.jp-reaction-stats {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: var(--jp-space-4);
}

.jp-reaction-stat-card {
  display: flex;
  flex-direction: column;

  gap: var(--jp-space-2);
}

.jp-reaction-accuracy-stats {
  padding-top: var(--jp-space-1);
}

/* ==================================================================
   ACTIONS
   ================================================================== */

.jp-reaction-actions {
  display: flex;

  justify-content: flex-end;
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

@media (max-width: 800px) {
  .jp-reaction-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 550px) {
  .jp-reaction-area {
    min-height: 300px;

    height: 340px;

    padding: var(--jp-space-5);
  }

  .jp-reaction-mode-selector {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jp-reaction-stats {
    grid-template-columns: 1fr;
  }

  .jp-reaction-actions {
    display: grid;
  }
}

@media (max-width: 400px) {
  .jp-reaction-mode-selector {
    grid-template-columns: 1fr;
  }
}