/* Quiz na mapie (moduł quiz). Kolory z currentColor i zmiennych – działa w motywie jasnym i ciemnym; projekt może
   nadpisać: --quiz-accent, --quiz-ok, --quiz-bad, --quiz-part, --quiz-target, --quiz-surface (tło przycisków), --quiz-radius. */
.quiz {
  --quiz-accent: var(--accent, #2563eb);
  --quiz-ok: var(--ok, #16a06d);
  --quiz-bad: var(--danger, #d63a47);
  --quiz-part: #d99a00;
  --quiz-radius: 10px;
  --quiz-surface: var(--surface, var(--paper, var(--bg, Canvas)));
  --quiz-line: color-mix(in srgb, currentColor 18%, transparent);
  --quiz-soft: color-mix(in srgb, var(--quiz-accent) 9%, transparent);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 10px; padding: 12px 16px; border-radius: var(--quiz-radius);
  background: var(--quiz-soft); border: 1px solid color-mix(in srgb, var(--quiz-accent) 30%, transparent);
}
.quiz[hidden] { display: none; }
.quiz > * { flex-basis: 100%; }
.quiz-q { margin: 0; font-size: .85rem; opacity: .8; }
.quiz-ask { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.quiz-ask:focus, .quiz-ask:focus-visible { outline: none; }
.quiz-hint { font-weight: 400; opacity: .75; }
.quiz-tip { margin: 0; font-size: .88rem; opacity: .8; }
.quiz-feedback { margin: 0; font-weight: 600; min-height: 1.3em; }
.quiz-feedback:empty { display: none; }
.quiz-good { color: var(--quiz-ok); }
.quiz-part { color: var(--quiz-part); }
.quiz-wrong { color: var(--quiz-bad); }
.quiz-feedback a { font-weight: 400; }

.quiz-actions, .quiz-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-btn {
  font: inherit; font-size: .9rem; line-height: 1.2; padding: 8px 14px; border-radius: 8px; cursor: pointer;
  color: inherit; background: var(--quiz-surface); border: 1px solid var(--quiz-line);
}
.quiz-btn:hover { border-color: var(--quiz-accent); }
.quiz-btn:focus-visible, .quiz-option:focus-visible { outline: 2px solid var(--quiz-accent); outline-offset: 2px; }
.quiz-primary { background: var(--quiz-accent); border-color: var(--quiz-accent); color: var(--quiz-accent-ink, #fff); font-weight: 600; }
.quiz-primary:hover { filter: brightness(1.08); }
.quiz-ghost { background: transparent; }
.quiz-link { background: transparent; border-style: dashed; }

.quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quiz-option {
  display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; background: var(--quiz-surface); border: 1px solid var(--quiz-line);
  min-height: 44px;
}
.quiz-option b {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: .78rem; background: var(--quiz-soft); border: 1px solid var(--quiz-line);
}
.quiz-option span { flex: 1; }
.quiz-option small { margin-left: auto; font-weight: 600; opacity: .85; white-space: nowrap; }
.quiz-option:hover:not(:disabled) { border-color: var(--quiz-accent); }
.quiz-option:disabled { cursor: default; }
.quiz-option.is-right { border-color: var(--quiz-ok); background: color-mix(in srgb, var(--quiz-ok) 16%, var(--quiz-surface)); }
.quiz-option.is-right b { background: var(--quiz-ok); border-color: var(--quiz-ok); color: #fff; }
.quiz-option.is-wrong { border-color: var(--quiz-bad); background: color-mix(in srgb, var(--quiz-bad) 13%, var(--quiz-surface)); }
.quiz-option.is-wrong b { background: var(--quiz-bad); border-color: var(--quiz-bad); color: #fff; }
@media (max-width: 560px) { .quiz-options:not(.quiz-two) { grid-template-columns: 1fr; } .quiz { padding: 10px 12px; } }

.quiz-photo { margin: 0; display: grid; gap: 4px; justify-items: start; }
.quiz-photo img { display: block; max-width: min(100%, 420px); max-height: 260px; width: auto; height: auto; border-radius: 8px; object-fit: cover; background: var(--quiz-line); }
.quiz-photo figcaption { font-size: .75rem; opacity: .75; }

.quiz-score { font-size: 1.35rem; }
.quiz-emoji { margin: 0; font-size: 1.5rem; letter-spacing: 2px; line-height: 1.2; }
.quiz-extra:empty { display: none; }

.quiz-daily { display: grid; gap: 10px; }
.quiz-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.quiz-stats div { display: grid; text-align: center; padding: 8px 4px; border-radius: 8px; background: var(--quiz-surface); border: 1px solid var(--quiz-line); }
.quiz-stats b { font-size: 1.3rem; }
.quiz-stats span { font-size: .75rem; opacity: .8; }
@media (max-width: 400px) { .quiz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mapa: zaznaczony obiekt pytania, dobra i zła odpowiedź, punkty pytań o miejsce */
.wm-country.quiz-target, .rm-region.quiz-target, .wm-dot.quiz-target, .rm-dot.quiz-target {
  fill: var(--quiz-target, #f4a261) !important; fill-opacity: 1 !important; stroke: currentColor; stroke-width: 1.2px;
}
.wm-country.quiz-ok, .rm-region.quiz-ok, .wm-dot.quiz-ok, .rm-dot.quiz-ok, .tm-tile.quiz-ok rect { fill: var(--quiz-ok-fill, #1baf7a) !important; fill-opacity: 1 !important; }
.wm-country.quiz-bad, .rm-region.quiz-bad, .wm-dot.quiz-bad, .rm-dot.quiz-bad, .tm-tile.quiz-bad rect { fill: var(--quiz-bad-fill, #e63946) !important; fill-opacity: 1 !important; }
.wm-marker.quiz-answer circle, .rm-marker.quiz-answer circle { fill: var(--quiz-ok-fill, #1baf7a); stroke: #fff; }
.wm-marker.quiz-guess circle, .rm-marker.quiz-guess circle { fill: var(--quiz-guess, #2563eb); stroke: #fff; }
.quiz-line { stroke: var(--quiz-guess, #2563eb); stroke-width: 2px; stroke-dasharray: 6 4; fill: none; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .wm-country.quiz-ok, .wm-country.quiz-bad, .rm-region.quiz-ok, .rm-region.quiz-bad { transition: fill .2s; }
}
/* Podczas gry dymki mapy schowane – pokazywałyby nazwę albo wartość */
.quiz-playing .wm-tooltip, .quiz-playing .rm-tooltip, .quiz-playing .tm-tooltip, .quiz-playing .map-tip { display: none !important; }