/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: #1a1a1a;
  background: #f7f5f0;
  overflow-x: hidden;
}

header, main, footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

header h1 {
  font-size: 1.5rem;
  margin: 0.5rem 0;
}

footer {
  color: #555;
  font-size: 0.85rem;
  padding-bottom: 2rem;
}

h2 {
  font-size: 1.25rem;
  outline: none; /* it's a programmatic focus target, not a visible focus ring on click */
}
h2:focus-visible {
  outline: 2px solid #1a5fb4;
  outline-offset: 2px;
}

/* Buttons: minimum comfortable touch target, visible focus state, no
   reliance on color alone (also uses text/icons throughout). */
button {
  font: inherit;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #eee; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

#clue-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

input[type="text"] {
  font: inherit;
  min-height: 44px;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #666;
  border-radius: 6px;
}
input[type="text"]:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 1px;
}
input[type="text"]:disabled {
  background: #eee;
  color: #666; /* 4.95:1 on #eee — WCAG AA doesn't require disabled controls to meet contrast, but no reason not to */
}

#city-search-results {
  list-style: none;
  margin: 0.25rem 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
#city-search-results li { margin: 0; }
#city-search-results button {
  width: 100%;
  text-align: left;
  border-radius: 0;
  border-color: #ccc;
}

figure {
  margin: 1rem 0;
}
figure img, #round-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
#image-loading-note {
  font-size: 0.9rem;
  color: #555;
}

.attribution {
  font-size: 0.85rem;
  color: #555;
}

#reveal-map {
  margin: 1rem 0;
}
#reveal-map svg {
  width: 100%;
  height: auto;
  max-width: 500px;
  display: block;
  background: #eef3f7;
  border-radius: 8px;
}
.graticule { stroke: #c3d2dd; stroke-width: 1; }
.graticule--equator, .graticule--prime-meridian { stroke: #8fa8b8; stroke-width: 1.5; }
.connector { stroke: #1a1a1a; stroke-width: 1.5; stroke-dasharray: 4 3; }
.pin { stroke: #fff; stroke-width: 2; }
.pin--answer { fill: #1a7f37; }
.pin--guess { fill: #b35900; }

#results-breakdown {
  padding-left: 1.25rem;
}

/* Visually hidden but still available to assistive tech — used for the
   timer's threshold announcements, which are separate from the visible
   (aria-hidden) ticking countdown. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 480px) {
  header h1 { font-size: 1.25rem; }
  h2 { font-size: 1.1rem; }
}