/* Konturen-specific styles. shared/styles.css carries tokens + base + the
   geo-guess / autocomplete components and the shared round-quiz UI (.quiz-*). */

:root {
  --game: #84BEB6;        /* Geo: Karta signature color */
  --game-ink: #1a1817;
}

main {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The outline window. The silhouette is filled with the ink colour and
   centred via the SVG's preserveAspectRatio. */
.ko-stage {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-hover);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.ko-map {
  width: 100%;
  height: 100%;
}
.ko-map #outline {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 0.6;
  stroke-linejoin: round;
  transition: fill 200ms ease, stroke 200ms ease;
}
.ko-stage.correct .ko-map #outline { fill: var(--positive); stroke: var(--positive); }
.ko-stage.wrong .ko-map #outline { fill: var(--ink-faint); stroke: var(--ink-faint); }

@media (max-width: 480px) {
  main { padding: 16px 14px 28px; }
}