/* Club de exploradores: game surfaces keep their existing layout and controls. */
.game-heading h1,
.flags-mode-card h2,
.speedrun-target [data-speedrun-target],
.language-target strong,
.comparison-question-panel h2,
.comparison-feedback h3,
.speedrun-results h2,
.language-results h2,
.results h2,
.bonus-head h2,
.bonus-box h3,
.modal-head h2 {
  font-family: var(--font-heading, 'Archivo Black', Arial, sans-serif);
  font-weight: 400;
  letter-spacing: -.025em;
}

.game-heading h1 { line-height: 1.17; }
.speedrun-hud small,
.speedrun-hud .speedrun-label,
.language-hud small { font-size: 10px; letter-spacing: .05em; }
.game-heading p,
.back-link,
.game-note,
.input-hint,
.flags-picker-intro,
.flags-input-hint,
.flags-legacy-note,
.speedrun-intro p,
.speedrun-board-note,
.speedrun-results > p,
.speedrun-skip-count,
.speedrun-progress-detail,
.speedrun-hud small,
.speedrun-hud .speedrun-label,
.comparison-topline small,
.comparison-streak > span,
.comparison-question-meta span + span,
.comparison-choice > small,
.comparison-feedback-heading p,
.comparison-answer,
.comparison-rank-position,
.comparison-observation-note,
.comparison-source,
.comparison-definition,
.comparison-restart-link,
.language-option-number,
#modal-content { color: var(--muted); }

.panel,
.flags-mode-card,
.speedrun-hud,
.language-hud,
.speedrun-results,
.comparison-topline,
.comparison-question-panel,
.comparison-feedback,
.speedrun-personal-best,
.stat,
dialog {
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 3px 3px 0 var(--ink);
}

.flags-mode-card:hover {
  border-color: var(--orange);
  box-shadow: 4px 4px 0 var(--orange);
  transform: translateY(-2px);
}

.flags-mode-icon {
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--soft-orange);
  color: var(--orange);
  box-shadow: 2px 2px 0 var(--ink);
}
.flags-mode-hard .flags-mode-icon {
  background: var(--soft-green);
  color: var(--green);
}

.flags-difficulty,
.flags-session,
.flags-input-tabs {
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #e9ede9;
}
.flags-difficulty a,
.flags-input-tabs button,
.flags-session button { border-radius: 6px; }
.flags-difficulty a.active,
.flags-input-tabs button.active {
  background: var(--surface);
  box-shadow: 1px 1px 0 #44251e35;
}
.flags-session button.active { background: var(--ink); color: #fff; }

.flag-stage {
  border: 1px solid #d3d8d1;
  border-radius: 9px;
  background: #f1f3f1;
}
.silhouette-stage {
  border: 1px solid #cbd5c7;
  border-radius: 9px;
  background: var(--soft-green);
}
.silhouette-stage .eyebrow { color: #4f6548; }
.silhouette-stage img { filter: brightness(0) saturate(100%) invert(21%) sepia(18%) saturate(1013%) hue-rotate(89deg) brightness(92%) contrast(89%); }

.flags-field input,
.flags-field select,
.guess-form input,
.settings-input {
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--surface);
}
.flags-field input::placeholder,
.guess-form input::placeholder { color: var(--muted); opacity: 1; }

.answer-option,
.comparison-choice,
.speedrun-flag,
.language-option {
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: none;
}
.answer-option:hover:not(:disabled),
.comparison-choice:hover:not(:disabled),
.speedrun-flag:hover:not(:disabled):not(.is-matched),
.language-option:hover:not(:disabled) {
  border-color: var(--orange);
  background: #f7efeb;
  box-shadow: 2px 2px 0 var(--orange);
}
.answer-option span:first-child,
.comparison-choice-number {
  border: 1px solid #bca69e;
  border-radius: 4px;
  background: #f1eeed;
  color: var(--muted);
}
.answer-option.correct,
.comparison-choice.is-correct,
.speedrun-flag.is-matched,
.language-option.is-matched {
  border-color: var(--green);
  background: var(--soft-green);
  box-shadow: inset 3px 0 var(--green);
}
.answer-option.wrong,
.comparison-choice.is-wrong,
.speedrun-flag.is-wrong,
.language-option.is-wrong {
  border-color: var(--orange);
  background: var(--soft-orange);
  box-shadow: inset 3px 0 var(--orange);
}
.speedrun-flag.is-matched { box-shadow: none; }
.speedrun-game .speedrun-flag.is-wrong:hover:not(:disabled),
.language-game .language-option.is-wrong:hover:not(:disabled) {
  border-color: var(--orange);
  background: var(--soft-orange);
  box-shadow: inset 3px 0 var(--orange);
}
.speedrun-flag.is-skipped {
  border-color: #8a7268;
  background: #eee8e4;
  box-shadow: none;
}
.speedrun-flag.is-skipped .speedrun-check { background: #725247; }
.speedrun-check,
.comparison-choice-mark { border-color: #fff; background: var(--green); }
.comparison-choice.is-wrong .comparison-choice-mark { background: var(--orange); }
.comparison-choice.is-correct .comparison-choice-number {
  border-color: #8aa37b;
  background: #d5e2ce;
  color: #3f5e36;
}
.comparison-choice.is-wrong .comparison-choice-number {
  border-color: #c9917e;
  background: #efd1c5;
  color: #843821;
}

.language-option-text {
  font-family: var(--font-body, 'Nunito Sans'), 'Segoe UI', 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans Devanagari', Arial, sans-serif;
  font-weight: 600;
}
.language-option.is-matched .language-option-text,
.language-match,
.language-status,
.speedrun-status,
.speedrun-best { color: #45613d; }
.language-status.is-wrong,
.speedrun-status.is-wrong,
.speedrun-penalty [data-speedrun-mistakes],
.language-mistakes strong,
.flags-error,
.error-text,
.danger { color: #a13720; }
.speedrun-skip-count b { color: var(--muted); }

.feedback,
.flags-submitted,
.speedrun-restart-confirm,
.language-restart-confirm,
.comparison-restart-confirm,
.speedrun-load-status,
.speedrun-load-error {
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--surface);
}
.feedback,
.comparison-feedback { background: var(--soft-green); }
.feedback.wrong,
.comparison-feedback.is-ended,
.speedrun-load-error,
.speedrun-restart-confirm,
.language-restart-confirm,
.comparison-restart-confirm { background: var(--soft-orange); }
.comparison-feedback.is-ended { border-color: var(--ink); }
.comparison-feedback-icon { background: #d0ddc9; color: #45613d; }
.is-ended .comparison-feedback-icon { background: #edc6b7; color: #943e26; }
.comparison-ranking,
.is-ended .comparison-ranking { border-color: #b8c5b0; }
.comparison-ranking-row.is-winner,
.is-ended .comparison-ranking-row.is-winner { background: #d4e0cd; }
.flags-submitted-status.wrong,
.flags-result-grid > span.wrong { color: #943e26; }

.comparison-topline,
.speedrun-personal-best { background: var(--soft-green); }
.comparison-best { border-color: #829477; }
.speedrun-personal-best > a { border: 2px solid var(--ink); background: var(--surface); }
.speedrun-personal-best > a:hover { border-color: var(--orange); background: #f7efeb; }
.speedrun-actions .speedrun-skip { border-color: var(--ink); background: #eee8e4; color: var(--ink); }
.speedrun-actions .speedrun-skip:hover:not(:disabled) { border-color: var(--orange); background: var(--soft-orange); }

.speedrun-result-time,
.language-result-time,
.speedrun-personal-best > strong,
.comparison-streak strong,
.comparison-best strong,
.results .score,
.stat b {
  font-family: var(--font-heading, 'Archivo Black', Arial, sans-serif);
  font-weight: 400;
  letter-spacing: -.025em;
}
.speedrun-breakdown > div,
.language-breakdown > div,
.fact { border: 1px solid #bca69e; border-radius: 7px; }
.speedrun-breakdown dt { color: var(--muted); }
.guess-row,
.history-item { border: 2px solid var(--ink); border-radius: 8px; background: var(--surface); }
.guess-row.correct { border-color: var(--green); background: var(--soft-green); }
.guess-row .pct { background: var(--soft-green); color: #45613d; }
.bonus-progress span { border-color: #bca69e; background: var(--surface); }
.bonus-progress span.active { border-color: var(--orange); color: var(--orange); }
.empty-state { border: 2px dashed var(--ink); border-radius: 10px; background: var(--surface); }
.progress-track,
.flags-progress > span,
.language-progress-track { background: #dee4dd; }
.flags-progress > span.current { background: #a1b397; }
.flags-progress > span.correct { background: var(--green); }
.flags-progress > span.wrong { background: var(--orange); }
.attempt-slots i { background: #c8b8b1; }
.attempt-slots i.used { background: var(--orange); }

dialog::backdrop { background: #44251e70; backdrop-filter: blur(2px); }
#modal-content h3 { font-family: var(--font-body, 'Nunito Sans', Arial, sans-serif); font-weight: 800; }
.reset-row { border-top: 1px solid #bca69e; }
#toast { border: 2px solid var(--ink); border-radius: 8px; background: var(--ink); color: #fff; box-shadow: 3px 3px 0 #b74229; }

@media (max-width: 600px) {
  .speedrun-hud,
  .language-hud { border-radius: 9px; box-shadow: 2px 2px 0 var(--ink); }
  .speedrun-target [data-speedrun-target],
  .language-target strong { font-size: 25px; line-height: 1.2; }
  .stat { box-shadow: 2px 2px 0 var(--ink); }
  .stat b { font-size: 34px; }
}

@media (max-width: 360px) {
  .speedrun-target [data-speedrun-target],
  .language-target strong { font-size: 23px; }
  .comparison-question-panel h2 { font-size: 20px; }
}

@media (max-width: 480px) {
  .language-hud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .language-target { grid-column: 1 / -1; }
  .language-clock { grid-column: 1; }
  .language-progress { grid-column: 2; }
  .language-mistakes { grid-column: 3; }
  .language-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .language-clock time { font-size: 17px; }
}