:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --tile-border: #d3d6da;
  --tile-empty: #ffffff;
  --green: #6aaa64;
  --yellow: #c9b458;
  --grey: #787c7e;
  --map-fill: #e3e3e3;
  --map-stroke: #ffffff;
  --map-bg: #eef4fb;
  --key-bg: #d3d6da;
  --pin: #d93025;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121213;
    --fg: #e4e4e4;
    --tile-border: #3a3a3c;
    --tile-empty: #121213;
    --map-fill: #3a3a3c;
    --map-stroke: #121213;
    --map-bg: #1b2733;
    --key-bg: #818384;
  }
}

* {
  box-sizing: border-box;
}

.hidden {
  display: none;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 48px;
}

header {
  text-align: left;
  margin-bottom: 14px;
}

h1 {
  margin: 0;
  letter-spacing: 0.05em;
}

.subtitle {
  margin: 4px 0 0;
  color: var(--grey);
  font-size: 0.9rem;
}

/* Fills .board-head (already grid-width), so the tabs sit at the grid's left
   edge and Pass at its right edge. */
.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tabs {
  display: flex;
  gap: 8px;
}

.tab {
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: bold;
  border: 2px solid var(--tile-border);
  border-radius: 4px;
  background: var(--tile-empty);
  color: var(--fg);
  cursor: pointer;
}

.tab.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.settings-panel {
  width: 100%;
  max-width: 420px;
  margin: 0 auto 24px;
  padding: 20px;
  border: 2px solid var(--tile-border);
  border-radius: 8px;
}

.settings-panel h2 {
  margin: 0 0 16px;
  font-size: 1.1rem;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.setting-row label {
  font-size: 0.95rem;
}

#continent-select {
  padding: 6px 10px;
  font-size: 0.9rem;
  border: 2px solid var(--tile-border);
  border-radius: 4px;
  background: var(--tile-empty);
  color: var(--fg);
  cursor: pointer;
}

.apply-button {
  margin-top: 16px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
}

.apply-button:hover:not(:disabled) {
  opacity: 0.9;
}

.apply-button:disabled {
  background: var(--grey);
  opacity: 0.6;
  cursor: default;
}

.settings-note {
  margin: 12px 0 0;
  color: var(--grey);
  font-size: 0.85rem;
}

#settings-toast {
  color: var(--fg);
}

main {
  width: 100%;
  max-width: 1500px;
  display: grid;
  /* Row 1: title + tabs, above the board. Row 2: hints | grid+keyboard | map.
     Hints take only what they need; the slack goes to the map so it's tall
     enough to sit level with the six grid rows. (Trade-off: on very wide screens
     the board sits a little left of dead-centre.) */
  grid-template-columns: minmax(0, 300px) min(94vw, 500px) minmax(0, 760px);
  grid-template-rows: auto auto;
  column-gap: 28px;
  justify-content: center;
  align-items: start;
}

/* Title + tabs, aligned to the grid's edges (same width, centred in the column). */
.board-head {
  grid-column: 2;
  grid-row: 1;
  width: min(100%, calc(var(--word-cols, 5) * 64px));
  margin: 0 auto 12px;
}

/* Left column: trivia hints, hugging the grid. */
.hints-panel {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
  width: 100%;
  max-width: 300px;
}

/* Centre column, row 2: grid + on-screen keyboard (and the settings panel,
   which swaps in for the grid). Column is a fixed width so the keyboard fits. */
.center-col {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-panel.hidden {
  display: none;
}

/* Right column, row 2: level with the grid. Sized wide enough that its 2:1
   height lands close to the six grid rows' total height. */
.map-col {
  grid-column: 3;
  grid-row: 2;
  justify-self: start;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
}

.map-panel {
  width: 100%;
  background: var(--map-bg);
  border-radius: 10px;
  padding: 12px;
}

/* Desktop: hold the map frame level with the six grid rows (~380px). If the
   map's natural 2:1 height is shorter, it centres with map-bg above/below. */
@media (min-width: 961px) {
  .map-panel {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.map-col .hint {
  margin-top: 16px;
}

.map-col .hint:empty {
  margin-top: 0;
  min-height: 0;
}

/* Stack on narrow screens: title + tabs, then grid + keyboard, then hints, then map. */
@media (max-width: 960px) {
  main {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    justify-items: center;
  }

  .board-head,
  .hints-panel,
  .center-col,
  .map-col {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }

  .board-head {
    width: min(100%, 500px);
    margin-bottom: 4px;
  }

  header {
    text-align: center;
  }

  .hints-panel {
    order: 1;
    max-width: 340px;
  }

  .map-col {
    order: 2;
  }
}

.map-panel svg {
  width: 100%;
  height: auto;
  display: block;
}

/* The pan/zoom transform is driven by JS (instant for gestures, rAF-tweened for
   the game-over fly-to-pin) — a CSS transition on the SVG transform attribute is
   unreliable on iOS Safari. */

.map-panel svg {
  cursor: grab;
  /* One finger scrolls the page; two fingers pinch-zoom + pan the map. Mouse
     wheel/drag handle desktop (see game.js wireMapInteraction). */
  touch-action: pan-y;
}

.map-panel svg:active {
  cursor: grabbing;
}

.map-controls-note {
  margin: 6px 0 0;
  color: var(--grey);
  font-size: 0.78rem;
  text-align: center;
}

.country-label {
  fill: var(--fg);
  font-family: inherit;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: var(--map-bg);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke; /* halo stays 3px on screen at any zoom */
  pointer-events: none;
  user-select: none;
}

#map-countries:not(.interacting) .country-label {
  transition: font-size 0.7s ease-in-out;
}

.country {
  fill: var(--map-fill);
  stroke: var(--map-stroke);
  stroke-width: 0.5;
  pointer-events: none;
  transition: fill 0.3s;
}

.country.continent-hit {
  fill: var(--yellow);
}

.country.country-hit {
  fill: var(--green);
}

/* Pin dropped on the target city at game over. */
#map-pin {
  pointer-events: none;
}

.map-pin-body {
  fill: var(--pin);
  stroke: #fff;
  stroke-width: 4;
  paint-order: stroke;
}

.map-pin-dot {
  fill: #fff;
}

/* Outer <g> carries the position (JS); .map-pin-art does the entrance, so they
   don't fight. display:none -> "" restarts this each reveal. */
.map-pin-art {
  animation: pin-drop 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.3) both;
  transform-box: fill-box;
  transform-origin: bottom center;
}

@keyframes pin-drop {
  from { opacity: 0; transform: translateY(-12px) scale(0.5); }
  to   { opacity: 1; transform: none; }
}

#grid {
  display: grid;
  grid-template-rows: repeat(var(--rows, 6), 1fr);
  gap: 6px;
  /* Fill the panel, but don't let tiles balloon on short words. */
  width: min(100%, calc(var(--word-cols, 5) * 64px));
  margin: 0 auto;
}

.row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), 1fr);
  gap: 6px;
}

.tile {
  aspect-ratio: 1;
  border: 2px solid var(--tile-border);
  background: var(--tile-empty);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 6vw, 1.6rem);
  font-weight: bold;
  text-transform: uppercase;
  color: var(--fg);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.tile.filled {
  border-color: #878a8c;
}

.tile.green {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.tile.yellow {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #fff;
}

.tile.grey {
  background: var(--grey);
  border-color: var(--grey);
  color: #fff;
}

.row.shake {
  animation: shake 0.4s;
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* Lives in .topbar, right-aligned opposite the Game/Settings tabs. */
.pass-button {
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: bold;
  border: 2px solid transparent;
  border-radius: 4px;
  background: #d93025;
  color: #fff;
  cursor: pointer;
}

.pass-button:hover {
  opacity: 0.9;
}

/* .hidden — game over (game.js); .settings-hidden — Settings view (settings.js). */
.pass-button.hidden,
.pass-button.settings-hidden {
  display: none;
}

/* On-screen keyboard — the only way to type on a touch device. */
.keyboard {
  width: 100%;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
}

.kb-row {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.kb-key {
  flex: 1 1 0;
  min-width: 0;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: var(--key-bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.kb-key.kb-wide {
  flex: 1.5 1 0;
  font-size: 0.7rem;
}

.kb-key:active {
  opacity: 0.65;
}

.kb-key.green {
  background: var(--green);
  color: #fff;
}

.kb-key.yellow {
  background: var(--yellow);
  color: #fff;
}

.kb-key.grey {
  background: var(--grey);
  color: #fff;
}

/* Primary "commit your guess" action, right under the keyboard. Grey until the
   row is full, then solid green (game.js updateSubmitState) — the flip is the
   whole point. Same pattern as .apply-button. */
.submit-button {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

.submit-button:hover:not(:disabled) {
  opacity: 0.9;
}

.submit-button:disabled {
  background: var(--grey);
  opacity: 0.55;
  cursor: default;
}

.submit-button.hidden {
  display: none;
}

.hint {
  margin-top: 20px;
  min-height: 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 1.1rem;
  text-align: center;
}

.hint-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hint-flags {
  font-size: 0.9rem;
  gap: 16px;
}

.hint-flags .match {
  color: var(--green);
}

.hint-flags .no-match {
  color: var(--grey);
}

.hint .arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 1.4rem;
}

.city-hints {
  margin: 10px 0 0;
  padding-left: 1.5em;
  max-width: 340px;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg);
}

.city-hints:empty {
  display: none;
}

.city-hints li {
  margin: 7px 0;
  animation: hint-in 0.3s ease;
}

@keyframes hint-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

.toast {
  margin-top: 12px;
  min-height: 1.2rem;
  color: #d93025;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.toast.visible {
  opacity: 1;
}

.banner {
  margin-top: 24px;
  text-align: center;
}

.banner.hidden {
  display: none;
}

#banner-message {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

#play-again {
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
}

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

/* End-of-game "learn more" link in the banner. */
.wiki-link {
  display: block;
  margin-bottom: 12px;
  color: var(--green);
  font-weight: bold;
  text-decoration: none;
}

.wiki-link:hover {
  text-decoration: underline;
}

.wiki-link.hidden {
  display: none;
}

/* End-of-game city photo, below the map. Mirrors .map-panel's framing. */
.city-photo {
  margin: 16px 0 0;
  padding: 8px;
  background: var(--map-bg);
  border-radius: 8px;
}

.city-photo.hidden {
  display: none;
}

.city-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.city-photo figcaption {
  margin-top: 6px;
  color: var(--grey);
  font-size: 0.8rem;
  text-align: center;
}