/* ==================================================================
   JUSTPIXEL SOFTWARE LIBRARY
   DARTS GAME
   ================================================================== */

.jp-darts-game {
  display: grid;

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

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

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

  flex-wrap: wrap;

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

/* ==================================================================
   MAIN LAYOUT
   ================================================================== */

.jp-darts-main-panel {
  padding: var(--jp-space-5);
}

.jp-darts-layout {
  display: grid;

  grid-template-columns:
    minmax(280px, 520px)
    minmax(240px, 1fr);

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

  align-items: start;
}

/* ==================================================================
   BOARD
   ================================================================== */

.jp-darts-board-column {
  display: grid;

  justify-items: center;

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

  min-width: 0;
}

.jp-darts-board-wrap {
  width: min(100%, 500px);

  aspect-ratio: 1;

  touch-action: manipulation;
}

.jp-darts-board {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 50%;

  background: #09111f;

  cursor: crosshair;

  user-select: none;

  -webkit-tap-highlight-color: transparent;
}

/* ==================================================================
   BOARD COLOURS
   ================================================================== */

.jp-darts-board-background {
  fill: #09111f;
}

.jp-darts-single-a {
  fill: #edf2f7;
}

.jp-darts-single-b {
  fill: #172236;
}

.jp-darts-accent-a {
  fill: #155eef;
}

.jp-darts-accent-b {
  fill: #0f766e;
}

.jp-darts-outer-bull {
  fill: #155eef;
}

.jp-darts-bull {
  fill: #0f766e;
}

.jp-darts-board-outline {
  fill: none;

  stroke: rgba(255, 255, 255, 0.32);

  stroke-width: 2;

  pointer-events: none;
}

.jp-darts-number {
  fill: #ffffff;

  font-size: 15px;
  font-weight: 700;

  pointer-events: none;
}

.jp-darts-marker {
  fill: #ffffff;

  stroke: #09111f;

  stroke-width: 3;

  pointer-events: none;
}

.jp-darts-marker-label {
  fill: #ffffff;

  font-size: 13px;
  font-weight: 800;

  paint-order: stroke;

  stroke: #09111f;
  stroke-width: 4px;

  pointer-events: none;
}

.jp-darts-board-help {
  margin: 0;

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

  font-size: var(--jp-text-sm);

  text-align: center;
}

/* ==================================================================
   SCORE PANEL
   ================================================================== */

.jp-darts-score-panel {
  display: grid;

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

  min-width: 0;
}

.jp-darts-score-primary {
  display: grid;

  justify-items: center;

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

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

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

  background: var(--jp-surface-soft);

  text-align: center;
}

.jp-darts-score-label {
  color: var(--jp-text-soft);

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

  text-transform: uppercase;

  letter-spacing: 0.05em;
}

.jp-darts-main-score {
  color: var(--jp-text);

  font-family: var(--jp-font-mono);

  font-size: clamp(2.8rem, 7vw, 5rem);

  line-height: 1;
}

/* ==================================================================
   TURN SUMMARY
   ================================================================== */

.jp-darts-turn-summary {
  display: grid;

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

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

.jp-darts-summary-item {
  display: grid;

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

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

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

  background: var(--jp-surface-soft);
}

.jp-darts-summary-item span {
  color: var(--jp-text-soft);

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

.jp-darts-summary-item strong {
  color: var(--jp-text);

  font-family: var(--jp-font-mono);

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

/* ==================================================================
   INDIVIDUAL DARTS
   ================================================================== */

.jp-darts-darts-row {
  display: grid;

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

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

.jp-darts-dart-result {
  display: grid;

  justify-items: center;

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

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

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

  background: var(--jp-surface);
}

.jp-darts-dart-result span {
  color: var(--jp-text-soft);

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

.jp-darts-dart-result strong {
  color: var(--jp-text);

  font-family: var(--jp-font-mono);

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

/* ==================================================================
   STATUS
   ================================================================== */

.jp-darts-status {
  min-height: 3.2rem;

  display: flex;

  align-items: center;

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

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

  background: var(--jp-surface-soft);

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

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

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

.jp-darts-actions {
  display: grid;

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

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

/* ==================================================================
   AIM POINT
   ================================================================== */

.jp-darts-aim-marker {
  fill: none;

  stroke: rgba(255, 255, 255, 0.8);

  stroke-width: 2;

  stroke-dasharray: 4 4;

  pointer-events: none;

  animation: jp-darts-aim-pulse 0.28s ease-out forwards;
}

@keyframes jp-darts-aim-pulse {
  from {
    r: 5;

    opacity: 1;
  }

  to {
    r: 14;

    opacity: 0;
  }
}

/* ==================================================================
   TABLET
   ================================================================== */

@media (max-width: 900px) {
  .jp-darts-layout {
    grid-template-columns: 1fr;

    max-width: 620px;

    margin-inline: auto;
  }

  .jp-darts-board-wrap {
    width: min(100%, 430px);
  }

  .jp-darts-score-panel {
    width: 100%;
  }
}

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

@media (max-width: 600px) {
  .jp-darts-main-panel {
    padding: var(--jp-space-3);
  }

  .jp-darts-layout {
    gap: var(--jp-space-4);
  }

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

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

  .jp-darts-mode-selector #dartsModeThree {
    grid-column: 1 / -1;
  }

  .jp-darts-board-wrap {
    width: min(100%, 360px);
  }

  .jp-darts-score-primary {
    padding: var(--jp-space-3);
  }

  .jp-darts-main-score {
    font-size: clamp(2.4rem, 15vw, 4rem);
  }

  .jp-darts-turn-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

@media (max-width: 400px) {
  .jp-darts-board-wrap {
    width: min(100%, 320px);
  }

  .jp-darts-darts-row {
    gap: var(--jp-space-1);
  }

  .jp-darts-dart-result {
    padding: var(--jp-space-2) var(--jp-space-1);
  }

  .jp-darts-actions {
    grid-template-columns: 1fr;
  }
}