/* D26HM1 — /welten/fussball interest world (words + 60-s mission). Not homepage. */

main.doc:has([data-testid='welten-fussball-words']) {
  max-width: min(640px, 100%);
}

.wf-section-title {
  margin: 0;
  font: italic 800 1.35rem / 1.15 var(--display, Georgia, 'Times New Roman', serif);
  letter-spacing: 0.01em;
}

.wf-words,
.wf-mission {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  animation: wf-rise 0.55s ease-out both;
}

.wf-mission {
  animation-delay: 0.12s;
}

.wf-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 720px) {
  .wf-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.wf-card {
  margin: 0;
}

.wf-card__btn {
  width: 100%;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 16px;
  border: 1px solid rgba(120, 190, 220, 0.28);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(70, 160, 90, 0.28), transparent 55%),
    linear-gradient(165deg, rgba(18, 48, 72, 0.7), rgba(12, 16, 34, 0.92));
  color: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.wf-card__btn:hover,
.wf-card__btn:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(160, 220, 180, 0.55);
  outline: none;
}

.wf-card.is-heard .wf-card__btn {
  border-color: rgba(120, 220, 150, 0.65);
  box-shadow: inset 0 0 0 1px rgba(120, 220, 150, 0.25);
}

.wf-card__emoji {
  font-size: 1.85rem;
  line-height: 1;
}

.wf-card__en {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.1;
}

.wf-card__de {
  color: var(--text-dim, rgba(210, 230, 240, 0.8));
  font-size: 0.9rem;
}

.wf-card__meta {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(200, 230, 245, 0.65);
}

.wf-progress,
.wf-mission__said {
  margin: 0;
  color: var(--text-dim, rgba(210, 230, 240, 0.85));
  font-weight: 700;
}

.wf-mission__actions,
.wf-mission__taps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wf-mission__tap[hidden] {
  display: none !important;
}

.wf-mission__tap.is-done {
  opacity: 0.55;
}

.mission-timer {
  margin: 0;
  font: 800 1.5rem / 1.1 var(--display, Georgia, 'Times New Roman', serif);
  letter-spacing: 0.02em;
}

.mission-done {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
}

@keyframes wf-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wf-words,
  .wf-mission,
  .wf-card__btn {
    animation: none !important;
    transition: none !important;
  }
}