/* O desafio extra (X02) e o desafio mais curto (X03): convite, pergunta a mais e a faixa «Está difícil?». */
.extra-card,
.shorter-strip {
  margin: 16px 0;
  padding: 16px 20px;
  border: 3px solid var(--app-border);
  border-radius: 22px;
  background: var(--app-scene, #e4ecd8);
}
.extra-card h3,
.extra-card h4,
.shorter-strip h3 {
  margin: 0 0 8px;
}
.extra-card p,
.shorter-strip p {
  margin: 0 0 12px;
  font-size: 19px;
}
.extra-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.extra-tags li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--app-card);
  font-size: 18px;
  font-weight: 700;
}
.shorter-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
:is(#app, dialog) .shorter-ways button,
:is(#app, dialog) .extra-card .actions button,
:is(#app, dialog) .side-options button {
  min-height: 64px;
  font-size: 20px;
}
.side-options button small {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 700;
}
.side-options button.correct {
  border-color: #246c55;
}
.side-options button.wrong {
  border-color: #b3261e;
}
.side-options button:disabled {
  opacity: 1;
  color: inherit;
}