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

:root {
  --game: #D0685A;        /* Geo: Flagga (Svår) signature color — red, vs the easy game's orange */
  --game-ink: #1a1817;
}

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

/* The flag window: a fixed 3:2 frame the flag is cropped inside. */
.fl-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-hover);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.fl-flag {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* transform-origin (focal point) + scale are set from JS. The crop is
     applied with no transition; the .zooming class is added after first paint
     so the reveal zoom-out to the full flag animates. */
  will-change: transform;
}
.fl-flag.zooming {
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}


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