/* Beat The Machines — Design System v1 */

.bs-beat-v1 {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
}

.bs-beat-v1 header {
  height: auto;
  min-height: 96px;
  padding: var(--space-3) clamp(20px, 4vw, 54px);
  align-items: center;
  border-bottom: 1px solid var(--line-strong);
}

.bs-beat-v1 .wordmark {
  font-size: 16px;
  line-height: .94;
  letter-spacing: .01em;
}

.bs-beat-v1 main {
  max-width: var(--content-wide);
  padding: clamp(48px, 8vw, 112px) clamp(20px, 5vw, 64px);
}

.bs-beat-v1 .hero {
  min-height: 62vh;
  justify-content: center;
  border-left: 5px solid var(--gold);
  padding-left: clamp(24px, 4vw, 56px);
}

.bs-beat-v1 .eyebrow,
.bs-beat-v1 .label {
  color: var(--blue);
  font-size: 11px;
  letter-spacing: .16em;
}

.bs-beat-v1 .hero h1,
.bs-beat-v1 .screen h1,
.bs-beat-v1 .judge h1,
.bs-beat-v1 .daily-game > h1 {
  max-width: 12ch;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(3.75rem, 9vw, 8.5rem);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.055em;
}

.bs-beat-v1 .support,
.bs-beat-v1 .review-row p,
.bs-beat-v1 .brief p,
.bs-beat-v1 .entry pre,
.bs-beat-v1 .daily-prompt,
.bs-beat-v1 .daily-label input,
.bs-beat-v1 .daily-label textarea,
.bs-beat-v1 #twentyGame h3 {
  font-family: var(--font-serif);
}

.bs-beat-v1 .primary,
.bs-beat-v1 .secondary,
.bs-beat-v1 .choice,
.bs-beat-v1 .option,
.bs-beat-v1 .daily-choices button,
.bs-beat-v1 .calendar button,
.bs-beat-v1 .calendar a {
  border-radius: var(--radius);
}

.bs-beat-v1 .primary {
  border-color: var(--gold-dark);
  color: var(--ink);
  background: var(--gold);
}

.bs-beat-v1 .primary:hover,
.bs-beat-v1 .primary:focus-visible {
  border-color: var(--gold-dark);
  color: var(--ink);
  background: var(--gold-dark);
}

.bs-beat-v1 .secondary,
.bs-beat-v1 .choice {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--paper-raised);
}

.bs-beat-v1 .secondary:hover,
.bs-beat-v1 .choice:hover,
.bs-beat-v1 .secondary:focus-visible,
.bs-beat-v1 .choice:focus-visible {
  border-color: var(--blue-dark);
  color: white;
  background: var(--blue);
}

.bs-beat-v1 .screen textarea,
.bs-beat-v1 .daily-label input,
.bs-beat-v1 .daily-label textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background: white;
}

.bs-beat-v1 .screen textarea:focus,
.bs-beat-v1 .daily-label input:focus,
.bs-beat-v1 .daily-label textarea:focus {
  outline: 3px solid var(--blue-soft);
  border-color: var(--blue);
}

.bs-beat-v1 .options,
.bs-beat-v1 .daily-choices,
.bs-beat-v1 .specimen-grid {
  gap: var(--space-2);
}

.bs-beat-v1 .option,
.bs-beat-v1 .daily-choices button {
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
}

.bs-beat-v1 .option:nth-child(odd),
.bs-beat-v1 .daily-choices button:first-child {
  border-top: 4px solid var(--gold);
}

.bs-beat-v1 .option:nth-child(even),
.bs-beat-v1 .daily-choices button:nth-child(2) {
  border-top: 4px solid var(--blue);
}

.bs-beat-v1 .option:nth-child(odd):hover,
.bs-beat-v1 .option:nth-child(odd).selected,
.bs-beat-v1 .daily-choices button:first-child:hover {
  border-color: var(--gold-dark);
  color: var(--ink);
  background: var(--gold-soft);
}

.bs-beat-v1 .option:nth-child(even):hover,
.bs-beat-v1 .option:nth-child(even).selected,
.bs-beat-v1 .daily-choices button:nth-child(2):hover {
  border-color: var(--blue);
  color: var(--blue-dark);
  background: var(--blue-soft);
}

.bs-beat-v1 .review,
.bs-beat-v1 .brief,
.bs-beat-v1 .daily-result,
.bs-beat-v1 .daily-source,
.bs-beat-v1 .skill-map,
.bs-beat-v1 .calendar,
.bs-beat-v1 #twentyGame {
  border-color: var(--line-strong);
}

.bs-beat-v1 .entries,
.bs-beat-v1 .reveal-grid,
.bs-beat-v1 .notice,
.bs-beat-v1 .judge-call {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
}

.bs-beat-v1 .entry + .entry,
.bs-beat-v1 .reveal-card + .reveal-card {
  border-color: var(--line-strong);
}

.bs-beat-v1 .daily-game {
  max-width: var(--content-wide);
}

.bs-beat-v1 .daily-record {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
}

.bs-beat-v1 .daily-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  box-shadow: 8px 8px 0 var(--gold);
}

.bs-beat-v1 .specimen-grid button {
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
}

.bs-beat-v1 .specimen-grid button:nth-child(odd):hover,
.bs-beat-v1 .specimen-grid button:nth-child(odd):focus-visible {
  border-color: var(--gold-dark);
}

.bs-beat-v1 .specimen-grid button:nth-child(even):hover,
.bs-beat-v1 .specimen-grid button:nth-child(even):focus-visible {
  border-color: var(--blue);
}

.bs-beat-v1 .specimen-grid span {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
}

.bs-beat-v1 footer {
  border-top: 1px solid var(--line-strong);
  color: var(--paper);
  background: var(--ink);
}

@media (max-width: 700px) {
  .bs-beat-v1 header {
    min-height: 80px;
  }

  .bs-beat-v1 main {
    padding: var(--space-5) 18px;
  }

  .bs-beat-v1 .hero {
    min-height: 64vh;
    padding-left: var(--space-3);
  }

  .bs-beat-v1 .hero h1 {
    font-size: clamp(3.5rem, 17vw, 5rem);
  }

  .bs-beat-v1 .daily-card {
    box-shadow: 5px 5px 0 var(--gold);
  }
}