/* Plus ou moins: ten duels, two players side by side, the figure of a season, the first one's shown,
   the second's to guess. The board, the boxes, the progress strip and the buttons are shared
   (assets/styles.css, DESIGN.md). */

/* The ten duels, the strip of Le Quiz, lower: ten boxes have to fit a phone. */
.hl-steps {
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 18px;
}

.hl-steps .slot {
  height: 40px;
  font-size: 16px;
}

.hl-steps .slot em {
  font-size: 16px;
}

/* The question, in a night blue band: which duel, which figure, which competition and season. */
.hl-question {
  display: grid;
  gap: 4px;
  justify-items: center;
  margin-bottom: 18px;
  padding: 12px 14px 14px;
  text-align: center;
  background: var(--cover);
  color: var(--paper);
  border-bottom: 3px solid var(--gold);
}

.hl-step {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sand);
}

.hl-question strong {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hl-context {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 18px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold);
}

/* The two players, side by side, « vs » between them: the first one's figure shown, the second's box
   dashed (still to guess, as the empty boxes of the other games), « Plus » and « Moins » under it. The
   two boxes share a row of the grid: a name on two lines makes both as tall, figures at the bottom. */
.hl-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px 12px;
}

.hl-duel > .hl-pick,
.hl-duel > .hl-or {
  grid-row: 1;
}

.hl-duel > .hl-choices {
  grid-column: 3;
}

.hl-pick {
  font: inherit;
  color: inherit;
  text-align: center;
  grid-template-columns: minmax(0, 1fr);
}

.hl-pick.is-open {
  border-style: dashed;
}

.hl-pick .stk-foil {
  align-content: start;
  padding: 14px 8px 6px;
  gap: 6px;
}

.hl-pick .stk-name {
  font-size: 22px;
  overflow-wrap: normal;
}

/* The club, readable at a glance (it is often what decides): a small night blue label, as the
   criteria of La Grille. */
.hl-pick .stk-sub {
  justify-self: center;
  max-width: 100%;
  padding: 3px 8px;
  font-size: 14px;
  font-weight: 600;
  background: var(--cover);
  color: var(--paper);
}

/* The figure, in big on night blue: the number in gold, its word under it. */
.hl-figure {
  display: grid;
  justify-items: center;
  margin: 8px 12px 12px;
  padding: 8px 6px 6px;
  background: var(--cover);
  color: var(--gold);
}

.hl-figure strong {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
}

.hl-figure small {
  font-size: 13px;
  font-weight: 600;
  color: var(--sand);
}

/* « Plus » and « Moins », one above the other under the player to guess, in the colours of the
   game's drawing on the home page: a gold « + » on pale gold, a light « − » on night blue. */
.hl-choices {
  display: grid;
  gap: 8px;
}

.hl-choices [data-pick='more'] {
  background: var(--gold-soft);
}

.hl-choices [data-pick='more'] span {
  color: var(--ink);
}

.hl-choices [data-pick='less'] span {
  color: var(--gold);
}

.hl-choices [data-pick='less'] {
  background: var(--cover);
  color: var(--paper);
}

.hl-choices button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hl-choices span {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 0;
}

/* After the answer: the second player's figure in green with ✓ when it was right, in red with ✘ when
   it was wrong (DESIGN.md, « Indices et erreurs »). */
.hl-pick.is-good {
  border-color: var(--green);
  box-shadow: inset 0 0 0 2px var(--green);
}

.hl-figure.is-good {
  background: var(--green);
}

.hl-figure.is-bad {
  background: var(--red-strong);
}

.hl-figure.is-good strong,
.hl-figure.is-bad strong,
.hl-figure.is-good small,
.hl-figure.is-bad small {
  color: var(--card);
}

.hl-pick.is-good .stk-name::after {
  content: ' ✓';
  color: var(--green);
}

.hl-pick.is-bad {
  border-color: var(--red-strong);
  box-shadow: inset 0 0 0 2px var(--red-strong);
}

.hl-pick.is-bad .stk-name::after {
  content: ' ✘';
  color: var(--red-strong);
}

.hl-or {
  align-self: center;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hl-feedback {
  min-height: 20px;
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.hl-feedback.is-good {
  color: var(--green);
}

.hl-feedback.is-bad {
  color: var(--red-strong);
}

/* The verdict after a pick: the ✓ / ✘ square of Le Quiz (.feedback, .verdict-mark, assets/styles.css). */
.hl-verdict {
  margin: 16px 0 0;
  font-size: 16px;
}

.hl-verdict b {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-right: 4px;
}

.hl-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* After the game: the duels played, one line each, with their figures. */
.hl-list-title {
  margin: 22px 0 10px;
}

.hl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.hl-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  background: var(--card);
}

.hl-line-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 15px;
  background: var(--cover);
  color: var(--gold);
}

.is-good > .hl-line-mark {
  background: var(--green);
  color: var(--card);
}

.is-bad > .hl-line-mark {
  background: var(--red-strong);
  color: var(--card);
}

.hl-line-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hl-line-body small {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.hl-line-players {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 15px;
}

.hl-line-player b {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  margin-left: 2px;
}

.hl-line-player.is-top b {
  color: var(--green);
}

.hl-line-or {
  font-size: 12px;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .hl-steps {
    gap: 4px;
  }

  .hl-steps .slot {
    height: 34px;
    padding: 2px 0;
  }

  .hl-steps .slot,
  .hl-steps .slot em {
    font-size: 14px;
  }

  .hl-question strong {
    font-size: 20px;
  }

  .hl-context {
    font-size: 16px;
  }

  .hl-duel {
    gap: 8px;
  }

  .hl-figure {
    margin: 6px 8px 10px;
  }

  .hl-figure strong {
    font-size: 38px;
  }

  .hl-pick .stk-name {
    font-size: 18px;
  }

  .hl-pick .stk-sub {
    padding: 3px 6px;
    font-size: 13px;
  }

  .hl-or {
    font-size: 14px;
  }

  .hl-actions .primary {
    width: 100%;
  }

  .hl-choices span {
    font-size: 20px;
  }
}