/* ==================================================================
   JUSTPIXEL SOFTWARE LIBRARY
   HIGHER OR LOWER
   ================================================================== */

.jp-higher-lower {
  width: min(100%, 700px);

  margin: 0 auto;
}

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

.jp-higher-lower-stats {
  display: grid;

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

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

  margin-bottom: var(--jp-space-4);
}

.jp-higher-lower-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;

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

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

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

  background: var(--jp-surface);

  box-shadow: var(--jp-shadow-xs);
}

.jp-higher-lower-stats span {
  color: var(--jp-text-muted);
}

.jp-higher-lower-stats strong {
  color: var(--jp-primary);

  font-size: 1.4rem;
}

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

.jp-higher-lower-game {
  display: flex;
  flex-direction: column;
  align-items: center;

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

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

  text-align: center;

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

  background: linear-gradient(
    135deg,
    var(--jp-surface-accent),
    var(--jp-surface)
  );

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

/* ==================================================================
   NUMBER
   ================================================================== */

.jp-higher-lower-label {
  color: var(--jp-primary);

  font-size: var(--jp-text-xs);
  font-weight: var(--jp-weight-bold);

  text-transform: uppercase;

  letter-spacing: 0.08em;
}

.jp-higher-lower-number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 150px;
  height: 150px;

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

  background: var(--jp-surface);

  color: var(--jp-text);

  font-size: 3.5rem;
  font-weight: var(--jp-weight-heavy);

  line-height: 1;

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

/* ==================================================================
   MESSAGE
   ================================================================== */

.jp-higher-lower-message {
  min-height: 1.5rem;

  margin: 0;

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

/* ==================================================================
   BUTTONS
   ================================================================== */

.jp-higher-lower-buttons {
  display: grid;

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

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

  width: min(100%, 480px);
}

.jp-higher-lower-button {
  padding: 1rem 1.25rem;
}

/* ==================================================================
   MOBILE
   ================================================================== */

@media (max-width: 550px) {
  .jp-higher-lower-stats {
    grid-template-columns: 1fr;
  }

  .jp-higher-lower-game {
    padding: var(--jp-space-8) var(--jp-space-4);
  }

  .jp-higher-lower-number {
    width: 140px;
    height: 140px;

    font-size: 3rem;
  }

  .jp-higher-lower-buttons {
    grid-template-columns: 1fr;
  }
}