/* Map Master - map, Solo screens, and Battle integration */

.mm-app {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-7);
  padding-top: max(var(--space-4), env(safe-area-inset-top));
}

.mm-screen { animation: screen-in var(--dur-slow) var(--ease-out-expo); }
.mm-narrow { width: min(100%, 520px); margin-inline: auto; }

.mm-hero { text-align: center; padding: 14px 0 24px; }
.mm-hero-icon { font-size: 56px; line-height: 1; margin-bottom: 12px; }
.mm-hero h1 { font-family: var(--font-display); font-size: 30px; margin: 0 0 6px; }
.mm-hero p { color: var(--text-muted); margin: 0; }

.mm-mode-actions { display: grid; gap: 10px; }
.mm-continent-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-continent-list .fg-continent-btn { width: 100%; }

.mm-map-shell {
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, #191d3b, #10142e);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lifted);
}

.mm-map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 310px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(139, 123, 255, 0.12), transparent 58%),
    #11152e;
}

.mm-map-shell.is-dragging .mm-map-stage { cursor: grabbing; }
.mm-map-shell.is-locked .mm-map-stage { cursor: default; }

.mm-world-svg { display: block; width: 100%; height: 100%; }
.mm-country { cursor: pointer; }
.mm-country.is-hidden { display: none; }
/* An answered country is locked out of play, so it must not look clickable. */
.mm-country.is-correct,
.mm-country.is-wrong { cursor: default; }
.mm-country path,
.mm-country .mm-dot {
  fill: #343961;
  stroke: transparent;
  stroke-width: 0.55;
  stroke-linejoin: round;
  transition: fill 120ms ease, filter 120ms ease;
  pointer-events: visiblePainted;
}
/* Invisible, zoom-compensated click target for countries too small to hit at
   world zoom. pointer-events:all so it works with no fill. */
.mm-country .mm-hit { fill: none; stroke: none; pointer-events: all; }
/* Once such a country is answered, the same circle carries its result colour:
   a country whose islands are a fraction of a pixel wide (Nauru, Tuvalu,
   Kiribati's atolls) would otherwise turn green or red invisibly. It shrinks to
   the country's real outline as you zoom in. */
.mm-country.is-correct .mm-hit { fill: var(--mint); fill-opacity: 0.5; }
.mm-country.is-wrong .mm-hit { fill: var(--coral); fill-opacity: 0.5; }

/* Borders ON: outlines plus a hover highlight. */
.borders-on .mm-country path,
.borders-on .mm-country .mm-dot { stroke: #777da8; }
.mm-map-shell.borders-on:not(.is-locked) .mm-country:not(.is-correct):not(.is-wrong):hover path,
.mm-map-shell.borders-on:not(.is-locked) .mm-country:not(.is-correct):not(.is-wrong):hover .mm-dot {
  fill: #7469d9;
  filter: brightness(1.12);
}

/* Borders OFF: one continuous land surface at any zoom.
   The stroke is painted in the land colour rather than removed: neighbouring
   countries only share an edge approximately, so with no stroke the small gaps
   between them show the sea through and trace every border once you zoom in.
   Painting the outline in the fill colour - slightly wider than usual, since
   non-scaling strokes stay put while those gaps grow with zoom - closes the
   seams and reveals nothing. */
.borders-off .mm-country path,
.borders-off .mm-country .mm-dot { stroke: #343961; stroke-width: 1.6; }

.mm-country.is-wrong path,
.mm-country.is-wrong .mm-dot { fill: var(--coral); }
.mm-country.is-correct path,
.mm-country.is-correct .mm-dot { fill: var(--mint); }
/* Answered countries are already revealed, so they keep their own outline even
   when borders are off. */
.mm-country.is-wrong path,
.mm-country.is-wrong .mm-dot { stroke: #ffb1aa; }
.mm-country.is-correct path,
.mm-country.is-correct .mm-dot { stroke: #b8ffe7; }

/* Tooltip shown when hovering a country that has already been answered. */
.mm-map-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: max-content;
  max-width: min(240px, 72%);
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: rgba(15, 18, 38, 0.96);
  box-shadow: var(--shadow-lifted);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.mm-map-tip.is-visible { opacity: 1; visibility: visible; }
/* Tapped open on touch: it stays until dismissed, so it has to accept the taps
   its own close button needs. The hover card stays click-through. */
.mm-map-tip.is-pinned { pointer-events: auto; }
.mm-tip-head { display: flex; align-items: center; gap: 8px; }
.mm-tip-close {
  flex: none;
  width: 30px;
  height: 30px;
  margin: -6px -6px -6px 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mm-tip-close:hover { background: var(--bg-elevated); color: var(--text); }
.mm-tip-flag {
  width: 26px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--border-subtle);
  flex: none;
}
.mm-tip-flag-fallback { display: grid; place-items: center; font-size: 13px; }
.mm-tip-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}
.mm-tip-badge { margin-left: auto; font-size: 12px; font-weight: 700; }
.mm-tip-badge.correct { color: var(--mint); }
.mm-tip-badge.wrong { color: var(--coral-soft); }
.mm-tip-rows { margin: 8px 0 0; display: grid; gap: 3px; }
.mm-tip-rows > div { display: flex; justify-content: space-between; gap: 10px; }
.mm-tip-rows dt { color: var(--text-muted); font-size: 11px; }
.mm-tip-rows dd { margin: 0; font-size: 11px; font-weight: 600; color: var(--text); text-align: right; }

.mm-map-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mm-map-control {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.17);
  border-radius: 11px;
  background: rgba(15, 18, 38, 0.9);
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-subtle);
  backdrop-filter: blur(8px);
}
.mm-map-control:hover { background: var(--bg-card); border-color: var(--violet); }
.mm-map-reset { font-size: 12px; font-weight: 600; }

.mm-map-loading,
.mm-map-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: var(--text-muted);
  text-align: center;
}
.mm-map-error strong { color: var(--coral); font-family: var(--font-display); }
.mm-map-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--violet);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.mm-target-card {
  text-align: center;
  margin: 0 auto 14px;
  padding: 14px 18px;
  border: 1px solid rgba(139, 123, 255, 0.36);
  border-radius: var(--radius-lg);
  background: rgba(139, 123, 255, 0.09);
}
.mm-target-kicker {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mm-target-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}
.mm-target-flag {
  width: clamp(38px, 7vw, 54px);
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 5px;
  object-fit: cover;
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), var(--shadow-subtle);
  flex: none;
}
.mm-target-flag.hidden { display: none; }
.mm-target-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 700;
  color: var(--text);
}

.mm-game-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
}
.mm-toolbar-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.mm-border-inline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}
.mm-border-inline input { width: 18px; height: 18px; accent-color: var(--mint); }
.mm-map-hint { color: var(--text-dim); font-size: 12px; text-align: right; }

.mm-feedback {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  margin-top: 10px;
}
.mm-feedback.correct { color: var(--mint); }
.mm-feedback.wrong { color: var(--coral-soft); }
.mm-feedback.neutral { color: var(--text-muted); }
.mm-round-actions { display: flex; gap: 8px; justify-content: center; }

.mm-summary { text-align: center; width: min(100%, 620px); margin: 0 auto; }
.mm-summary-verdict { font: 700 34px var(--font-display); color: var(--mint); }
.mm-summary-score { font: 700 52px var(--font-display); margin: 4px 0 18px; }
.mm-summary-actions { display: flex; gap: 8px; margin-top: 16px; }
.mm-summary-actions > * { flex: 1; }

.mm-result-item .round-list-visual {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #2f345a;
  font-size: 20px;
}
.mm-result-card { align-items: center; gap: 12px; }
.mm-result-flag {
  width: 52px;
  height: 35px;
  border-radius: 5px;
  object-fit: cover;
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--border-subtle);
  flex: none;
}
.mm-result-item.skipped { border-left-color: var(--honey); background: rgba(255, 176, 32, 0.08); }
.mm-result-item.skipped .round-list-icon { color: var(--honey); }

.battle-map-options {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-bottom: var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.battle-map-options label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.battle-map-select {
  width: 100%;
  padding: 11px 12px;
  margin-top: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
}
.battle-map-options .mm-border-inline { padding: 4px 0; }
.mm-battle-content .mm-map-stage { min-height: 270px; }
.mm-battle-content .mm-target-card { margin-bottom: 10px; padding-block: 10px; }
.mm-battle-message { min-height: 36px; margin: 8px 0 0; text-align: center; font-size: 13px; font-weight: 600; }

@media (max-width: 640px) {
  .mm-app { padding-inline: 10px; }
  .mm-map-stage { min-height: 285px; aspect-ratio: 4 / 3; }
  .mm-battle-content .mm-map-stage { min-height: 250px; }
  .mm-game-toolbar { align-items: flex-start; }
  .mm-map-hint { max-width: 150px; }
}

@media (max-width: 420px) {
  .mm-continent-list { grid-template-columns: 1fr; }
  .mm-map-control { min-width: 40px; height: 40px; }
  .mm-map-controls { right: 8px; bottom: 8px; }
  .mm-summary-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-country path, .mm-country .mm-dot { transition: none; }
}