/* ===========================================================================
   RIOPESTO — stark brutalist system
   Tokens first. One easing, one duration, one rule weight, an 8px rhythm.
   ===========================================================================*/
:root {
  /* palette: monochrome + two functional signal colors only */
  --bg:        #000000;
  --ink:       #f2f2f2;
  --ink-dim:   #6f6f6f;
  --land:      #2e2e2e;
  --land-hi:   #555555; /* hover: lighter gray, not white */
  --rule:      #383838;
  --rule-soft: #2a2a2a;
  --close:     #ff3b30; /* signal: near */
  --far:       #2f6bff; /* signal: distant */
  --win:       #29d06b; /* signal: correct */

  /* rhythm */
  --u: 8px;
  --pad: clamp(20px, 4vw, 40px);

  /* type */
  --display: "Space Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", "Menlo", monospace;

  /* one unified micro-interaction */
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden; /* fit to one screen, never scroll */
}

/* --- the frame: full-bleed, hairline section dividers, no outer border ---- */
.frame {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.row { padding: var(--pad); }
.row + .row { border-top: 1px solid var(--rule); }

/* --- prompt --------------------------------------------------------------- */
.row--prompt {
  text-align: center;
  padding-top: calc(var(--u) * 2.5);
  padding-bottom: calc(var(--u) * 2.5);
}
.eyebrow {
  margin: 0 0 var(--u);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.dish {
  margin: 0;
  font-size: clamp(34px, 7vw, 60px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.01em;
}
.sub {
  margin: var(--u) 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

/* --- map: dominates the screen, pannable + zoomable ----------------------- */
.row--map {
  flex: 1;
  min-height: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}
#map {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none; /* let the zoom gesture own touch */
  cursor: grab;
}
#map:active { cursor: grabbing; }

/* zoom controls */
.zoom-ctrl {
  position: absolute;
  top: var(--u);
  right: var(--u);
  display: flex;
  flex-direction: column;
  gap: -1px;
}
.zbtn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0;
  margin-bottom: -1px; /* collapse shared edge */
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.zbtn:hover { background: var(--ink); color: var(--bg); }

.country {
  fill: var(--land);
  stroke: #000000;
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur) var(--ease);
  cursor: crosshair;
}
.country.hovering { fill: var(--land-hi); }
.country.guessed { cursor: default; }
.country.correct {
  fill: var(--win) !important;
  stroke: var(--win);
}

#markers { pointer-events: none; }
.marker {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: pop var(--dur) var(--ease) forwards;
}
.marker.win { stroke: var(--win); }
@keyframes pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- hud ------------------------------------------------------------------ */
.row--hud {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}
.hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u);
}

/* guesses: hard squares, fill as they're spent */
.ticks { display: flex; gap: var(--u); }
.tick {
  width: 14px;
  height: 14px;
  border: 1px solid var(--rule);
  background: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tick.used { background: var(--ink); border-color: var(--ink); }

.legend {
  display: flex;
  gap: calc(var(--u) * 2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.legend-item { display: inline-flex; align-items: center; gap: var(--u); }
.sw { width: 10px; height: 10px; display: inline-block; }
.sw--close { background: var(--close); }
.sw--far { background: var(--far); }

.message {
  margin: 0;
  min-height: 1.3em;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* brutalist button: square, hairline, inverts on hover */
.btn {
  align-self: flex-start;
  appearance: none;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 2.5);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* --- overlay -------------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  z-index: 10;
}
.overlay.hidden { display: none; }
.overlay-card {
  width: min(440px, 100%);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: var(--pad);
  text-align: left;
}
.overlay-result {
  margin: 0 0 var(--pad);
  font-size: clamp(26px, 6vw, 36px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.overlay-result.win { color: var(--win); }
.overlay-result.lose { color: var(--ink-dim); }

.overlay-list { margin: 0; }
.overlay-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.5) 0;
  border-top: 1px solid var(--rule-soft);
}
.overlay-row dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.overlay-row dd {
  margin: 0;
  font-size: 16px;
  text-align: right;
}
.overlay-next {
  margin: var(--pad) 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}