:root {
  --bg: #f7f6f2;
  --land: #e8e4d8;
  --land-stroke: #2d2a26;
  --land-hover: #d6d0bd;
  --correct: #6fa56b;
  --correct-stroke: #3f6e3c;
  --wrong: #d06b62;
  --water: #c8dde8;
  --water-stroke: #8fb5c4;
  --text: #2d2a26;
  --muted: #76726a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(45, 42, 38, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  /* Respect notch / Home Indicator on iOS standalone mode */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* Disable the rubber-band overscroll glow when launched as a PWA */
  overscroll-behavior-y: contain;
  /* Prevent iOS double-tap-to-zoom on the map */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- header / hero ---------- */
header {
  position: relative;
  /* Match the about-snippet column width so the corner buttons sit near the
     centred content on wide viewports instead of pinning to the screen edges.
     width:100% needed because auto-margins on a flex item would otherwise
     collapse the header to its content width. */
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
  padding: 0.85rem 4rem 0.4rem;   /* horizontal room for the corner buttons */
  text-align: center;
}

/* Corner icon-only buttons. Pinned absolutely so the centred hero text never
   has to share the row with them — no wrapping, no off-balance layout. */
.topbar-btn {
  position: absolute;
  top: 0.6rem;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(45, 42, 38, 0.06);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, color 120ms ease, transform 80ms ease;
}
.topbar-btn:hover  { background: rgba(45, 42, 38, 0.12); color: var(--text); }
.topbar-btn:active { transform: scale(0.94); }
.topbar-btn--left  { left: 0.75rem; }
.topbar-btn--right { right: 0.75rem; }
.topbar-btn .icon  { width: 1.15rem; height: 1.15rem; }

/* The corner restart button doubles as the play button. Icon swaps based on
   game state: ▶ in idle, ↻ while playing. */
#restart .icon-play  { display: none; }
#restart .icon-reset { display: inline-block; }
body.pre-start #restart .icon-play  { display: inline-block; }
body.pre-start #restart .icon-reset { display: none; }

/* In idle, give the play button a stronger treatment + a soft pulse so it
   reads as the primary call-to-action. */
body.pre-start #restart {
  background: var(--text);
  color: var(--bg);
  animation: idle-pulse 1.6s ease-in-out infinite;
}
body.pre-start #restart:hover { background: var(--text); color: var(--bg); opacity: 0.92; }
@keyframes idle-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(45, 42, 38, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(45, 42, 38, 0); }
}

/* Hero — the prompt area */
.hero-label {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-name {
  margin: 0.15rem 0 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  min-height: 2.2rem; /* reserve space so the row doesn't shift */
  /* Subtle micro-bounce when the prompt changes */
  animation: prompt-pop 240ms ease;
}
@keyframes prompt-pop {
  0%   { transform: scale(0.96); opacity: 0; }
  60%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); }
}

/* Tiny hint shown only in idle, telling new visitors what to do. */
.hero-idle-hint {
  display: none;
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.hero-idle-hint .kbd {
  display: inline-block;
  padding: 0 0.4em;
  margin: 0 0.1em;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.75em;
  vertical-align: 1px;
}

body.pre-start .hero-label,
body.pre-start .hero-name,
body.finished  .hero-label,
body.finished  .hero-name { display: none; }
body.pre-start .hero-idle-hint { display: block; }

/* Stats — fixed 3-column grid so numbers can't push siblings around */
.stats {
  margin: 0.55rem auto 0;
  max-width: 22rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: baseline;
  font-size: 0.95rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stats .stat { text-align: center; }
.stats b { color: var(--text); font-weight: 600; }
.stats small { color: var(--muted); margin-left: 0.15em; font-size: 0.85em; }

#time { font-variant-numeric: tabular-nums; }

#wrong-feedback {
  /* Reserves vertical space so the layout doesn't shift when the message appears. */
  margin-top: 0.4rem;
  min-height: 1.4em;
  font-size: 0.9rem;
  color: var(--wrong);
  opacity: 0;
  transition: opacity 200ms ease;
}
#wrong-feedback.show { opacity: 1; }
#wrong-feedback.info { color: var(--muted); }
#wrong-feedback strong { font-weight: 600; }

/* Idle state: gray out and disable the map */
body.pre-start #map-container svg {
  filter: grayscale(0.85) opacity(0.55);
  pointer-events: none;
  transition: filter 200ms ease, opacity 200ms ease;
}

#map-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem 0.5rem;
  min-height: 0;
}

#map-container svg {
  width: 100%;
  height: 100%;
  /* Cap on phones is the viewport; on larger screens stop growing past ~720px
     so the map doesn't get cartoonishly huge on a desktop monitor. */
  max-width: min(100%, 720px);
  max-height: 100%;
  display: block;
  /* Sweden's bounding box fits inside the SVG viewBox preserving aspect — this
     guarantees the longest dimension (height for Sweden) determines fit so we
     never clip top or bottom. */
  object-fit: contain;
}

path.landskap {
  fill: var(--land);
  stroke: var(--land-stroke);
  stroke-width: 0.8;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 120ms ease;
}

path.landskap:hover,
path.landskap:focus {
  fill: var(--land-hover);
  outline: none;
}

path.landskap.correct {
  fill: var(--correct);
  stroke: var(--correct-stroke);
  cursor: default;
  /* clicks still register so we can show the name as a reminder */
}

path.landskap.wrong {
  fill: var(--wrong);
}

path.lake {
  fill: var(--water);
  stroke: var(--water-stroke);
  stroke-width: 0.6;
  stroke-linejoin: round;
  pointer-events: none;
}

#end-dialog {
  border: none;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  background: var(--bg);
  color: var(--text);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  min-width: 280px;
  max-width: 360px;
  width: calc(100vw - 2rem);
}

#end-dialog::backdrop {
  background: rgba(45,42,38,0.45);
}

#end-dialog h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

#end-dialog p {
  margin: 0.25rem 0;
}

#end-dialog .end-stats {
  color: var(--muted);
  margin-bottom: 1rem;
}

#play-again {
  margin-top: 1rem;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  border: 1px solid var(--land-stroke);
  background: var(--text);
  color: var(--bg);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

#play-again:hover { opacity: 0.9; }

#submit-form {
  margin: 0.25rem 0 1.25rem;
  text-align: left;
}

#submit-form label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.submit-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

#initials {
  flex: 0 0 auto;
  width: 5.5rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--land-stroke);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
}

#submit-score {
  flex: 1;
  min-width: 0;
}

#initials:focus {
  outline: 2px solid var(--correct);
  outline-offset: 2px;
}

#submit-score {
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  border: 1px solid var(--land-stroke);
  background: var(--text);
  color: var(--bg);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

#submit-score:hover { opacity: 0.9; }
#submit-score:disabled { opacity: 0.5; cursor: default; }

.submit-error {
  margin: 0.5rem 0 0;
  color: var(--wrong);
  font-size: 0.85rem;
}

#leaderboard {
  margin: 0 0 1rem;
  text-align: left;
}

#leaderboard h3 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.board-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  max-height: 320px;
  overflow-y: auto;
}

.board-list li {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
}

.board-list li .rank { color: var(--muted); }
.board-list li .score { color: var(--muted); }

.board-list li.you {
  background: rgba(111, 165, 107, 0.18);
}

.board-list li.you .rank,
.board-list li.you .score {
  color: var(--text);
  font-weight: 600;
}

#board-dialog {
  border: none;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  background: var(--bg);
  color: var(--text);
  text-align: left;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  min-width: 280px;
  max-width: 360px;
  width: calc(100vw - 2rem);
}

#board-dialog::backdrop {
  background: rgba(45,42,38,0.45);
}

#board-dialog h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  text-align: center;
}

#board-dialog .dialog-buttons {
  margin-top: 1rem;
}

.muted { color: var(--muted); font-size: 0.9rem; margin: 0.5rem 0 0; }

#confirm-dialog {
  border: none;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  background: var(--bg);
  color: var(--text);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  min-width: 260px;
}

#confirm-dialog::backdrop {
  background: rgba(45,42,38,0.45);
}

#confirm-dialog h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

#confirm-dialog p {
  margin: 0 0 1.25rem;
  color: var(--muted);
}

.dialog-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.dialog-buttons button {
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--land-stroke);
  background: var(--text);
  color: var(--bg);
}

.dialog-buttons button.ghost {
  background: transparent;
  color: var(--text);
}

.dialog-buttons button:hover { opacity: 0.9; }

@media (max-width: 480px) {
  .hero-name { font-size: 1.7rem; }
  header { padding-top: 0.7rem; }
  .topbar-btn { width: 2.2rem; height: 2.2rem; }
}

.site-footer {
  text-align: center;
  padding: 0.25rem 1rem 0.5rem;
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  align-items: center;
}
.site-footer a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: rgba(118, 114, 106, 0.4);
  text-underline-offset: 3px;
}
.site-footer .dot { color: var(--muted); opacity: 0.5; }
.site-footer a:hover { color: var(--text); }

/* "Sveriges 25 landskap" copy below the map. Visible on the idle/start state
   so first-time visitors and crawlers (which see the static HTML where the
   <body> already has class="pre-start") get a real description. Hidden once
   the player taps Starta so the map fills the viewport. */
.about-snippet { display: none; }
body.pre-start .about-snippet { display: block; }
.about-snippet {
  max-width: 38rem;
  margin: 0.25rem auto 0.5rem;
  padding: 0 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}
.about-snippet h1 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.about-snippet p { margin: 0.4rem 0; }
.about-snippet a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(118, 114, 106, 0.4);
  text-underline-offset: 3px;
}

/* --- Om sidan / about page --- */
.page-about {
  display: block; /* override the flex layout used by the game page */
}

.about {
  max-width: 38rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  line-height: 1.55;
}

.about h1 {
  font-size: 1.75rem;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

.about h2 {
  margin-top: 2rem;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
}

.about h3 {
  margin-top: 1.25rem;
  font-size: 1rem;
}

.about p, .about ul {
  margin: 0.6rem 0;
}

.about ul {
  padding-left: 1.25rem;
}

.about code {
  background: rgba(45, 42, 38, 0.06);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  font-size: 0.92em;
}

.about a {
  color: var(--text);
  text-underline-offset: 3px;
}

.back-link {
  color: var(--muted) !important;
  text-decoration: none;
  font-size: 0.9rem;
}
.back-link:hover { color: var(--text) !important; }

.small { font-size: 0.85rem; }