:root {
  --bg: #05070d;
  --panel: rgba(14, 20, 32, 0.82);
  --border: rgba(255, 255, 255, 0.1);
  --text: #e8ecf3;
  --muted: #8b95a7;
  --green: #3fb950;
  --red: #f85149;
  --amber: #e3b341;
  --accent: #58a6ff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none; /* no pull-to-refresh or rubber band */
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* No double-tap zoom on the panels: phones otherwise wait to see if a tap
   is the first of two, so buttons (pace, language...) react late. */
button, label, input, .card, #hud, #side, #facts, #hints, #next-bar, #toast, #paused, #overlay { touch-action: manipulation; }
#globe { position: fixed; inset: 0; overflow: hidden; touch-action: none; } /* overflow: labels near the edge must not widen the page */ /* pinch and drag belong to the globe, not the page */

#hud {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 20px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  max-width: calc(100vw - 32px);
}
/* !important: layout rules like #overlay.ended { display: block } must not bring them back */
#hud[hidden], #side[hidden], #overlay[hidden], #paused[hidden], #tooltip[hidden] { display: none !important; }

.hud-main { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* "FIND" on its own small line, the country name below it */
.prompt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.prompt .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
#target { font-size: 26px; font-weight: 700; line-height: 1.15; text-wrap: balance; }

.stats { display: flex; align-items: center; gap: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
#timer { color: var(--muted); font-size: 14px; font-weight: 400; min-width: 44px; text-align: right; opacity: 0.8; }

button {
  font: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
button:disabled { opacity: 0.5; cursor: default; }

/* Right column during a round: settings panel, then the answers list */
#side {
  position: fixed;
  right: 16px;
  top: 16px;
  width: 300px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#settings, #log {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}
#settings { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
#settings .option { margin: 0; font-size: 13px; }
#log { min-height: 0; overflow-y: auto; padding: 12px 16px; }
/* On wide screens the top panel stays clear of the right column */
@media (min-width: 1001px) { body.in-round #hud { right: 332px; } }
#log h2 { margin: 0 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
#results { margin: 0; padding-left: 20px; font-size: 14px; }
#results li { padding: 3px 0; }
#results .row { display: flex; justify-content: space-between; gap: 8px; }
#results .time { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
#results .ok .name { color: var(--green); }
#results .skipped .name { color: #9aa0a8; }
#results .misses { color: var(--red); font-size: 12px; }

#overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 13, 0.55);
  padding: 16px;
}
.card {
  position: relative;
  width: min(420px, 100%);
  padding: 28px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(10px);
}
.card h1 { margin: 0 0 8px; font-size: 28px; }
.card p { color: var(--muted); line-height: 1.5; }
#start { margin-top: 12px; padding: 10px 28px; font-size: 17px; background: var(--accent); border-color: transparent; color: #04101f; font-weight: 600; }
#start:hover:not(:disabled) { background: #79b8ff; }
#share[hidden] { display: none; }
#share { margin: 12px 0 0 8px; padding: 10px 20px; font-size: 17px; display: inline-flex; align-items: center; gap: 8px; vertical-align: top; }

#summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#summary:empty { display: none; }
#summary div { padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
#summary b { display: block; font-size: 20px; }
#summary span { font-size: 12px; color: var(--muted); }

.country-label {
  pointer-events: none;
  transform: translate(-50%, -50%);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  color: #fff;
  paint-order: stroke fill;
  -webkit-text-stroke: 4px #141414;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.01em;
}
.country-label.skipped { color: #eceae4; }

#tooltip {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 260px;
  padding: 8px 12px;
  background: #18263a;
  border: 1px solid #2e4a6e;
  border-radius: 6px;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
#tooltip b { font-weight: 600; font-size: 15px; }
#tooltip .name { color: #d6deea; }
#tooltip .notes { color: var(--muted); font-size: 12px; }

#paused {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: rgba(3, 5, 10, 0.45);
  padding: 16px;
}
#paused .card { width: min(300px, 100%); }
#paused p { margin: 6px 0 14px; }
#paused .hint { margin: 10px 0 0; font-size: 12px; }
#resume { padding: 10px 28px; font-size: 17px; background: var(--accent); border-color: transparent; color: #04101f; font-weight: 600; }
#resume:hover { background: #79b8ff; }
#pause { padding: 6px 9px; line-height: 0; }

#next-bar {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  max-width: calc(100vw - 32px);
}
#next-bar[hidden] { display: none; }
#next-msg { font-weight: 600; }
#next-msg.ok { color: var(--green); }
#next-msg.skipped { color: #b9bec6; }
#next { padding: 8px 26px; font-size: 16px; font-weight: 600; background: var(--accent); border-color: transparent; color: #04101f; }
#next:hover { background: #79b8ff; }
#next-bar kbd { font: 12px ui-monospace, monospace; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }

@media (max-width: 700px) {
  #hud { flex-direction: column; gap: 6px; padding: 10px 14px; }
  #target { font-size: 22px; }
  #side { top: auto; bottom: 16px; left: 16px; width: auto; max-height: 38vh; }
  /* Sits over the guesses list while it's shown */
  #next-bar { bottom: 16px; left: 16px; right: 16px; transform: none; max-width: none; z-index: 1; justify-content: space-between; }
  #next-bar kbd { display: none; }
}

#finish.armed { background: rgba(248, 81, 73, 0.25); border-color: var(--red); color: #ffd7d4; }

.option { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 4px; font-size: 14px; color: var(--muted); cursor: pointer; }
.option input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
#next-bar.auto #next, #next-bar.auto kbd { display: none; }

/* Keep "1 / 172", the timer and buttons on one line; a long country name may wrap instead. */
.stats > * { white-space: nowrap; flex-shrink: 0; }
.prompt { min-width: 0; }

/* Language switch: EN | RU */
.lang { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lang button { border: 0; border-radius: 0; padding: 3px 9px; font-size: 12px; background: transparent; color: var(--muted); }
.lang button.active { background: var(--accent); color: #04101f; font-weight: 600; }
.card-main .lang { position: absolute; top: 14px; right: 14px; }
.card-main h1 { margin-top: 10px; }
#overlay-text[hidden] { display: none; }

/* Final screen: results on the left, this round's countries on the right */
.card.wide { width: min(820px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.card.wide .card-main { position: static; }
#round-list[hidden] { display: none; }
#round-list { text-align: left; max-height: min(60vh, 520px); overflow-y: auto; padding-right: 4px; }
#round-list h3 { margin: 4px 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
#round-list ol { list-style: none; margin: 0 0 14px; padding: 0; font-size: 14px; }
#round-list li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
#round-list .found .name { color: var(--green); }
#round-list .skipped .name { color: #9aa0a8; }
#round-list .time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
#round-list .empty { margin: 4px 0; }

@media (max-width: 700px) {
  .hud-main { flex-direction: column; align-items: stretch; gap: 6px; }
  .prompt { align-items: center; text-align: center; }
  .card.wide { grid-template-columns: 1fr; }
  #round-list { max-height: 30vh; }
}
.card.wide #round-list { margin-top: 30px; } /* room for the EN | RU switch above it */
@media (max-width: 700px) { .card.wide #round-list { margin-top: 0; } }
@media (max-width: 700px) {
  .stats { flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
  .stats button { padding: 5px 11px; }
}

/* Start screen: mode and number of questions */
.choices { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 6px; }
.choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 6px 14px; font-size: 14px; background: transparent; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.active { background: rgba(88, 166, 255, 0.18); color: var(--text); font-weight: 600; }
.card.wide .choices { margin-top: 18px; }

/* Cities mode: the city's position after answering */
.country-label.city {
  transform: translate(-6px, -50%);
  font-size: 13px;
  font-weight: 700;
  color: #fff6d8;
  padding-left: 14px;
}
.country-label.city::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #ffd75e;
  box-shadow: 0 0 0 2px #141414;
}

/* Continent checkboxes */
.continents-choice { flex-direction: column; align-items: stretch; gap: 8px; }
.continents { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cont {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px;
  font-size: 13px; color: var(--text); cursor: pointer; text-align: left;
}
.cont:has(input:checked) { background: rgba(88, 166, 255, 0.12); border-color: rgba(88, 166, 255, 0.35); }
.cont input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.cont-name { flex: 1; }
.cont-count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }

/* Skip toast (No Next button mode) */
#toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 28px;
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100vw - 32px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 12px 14px 24px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
#toast[hidden] { display: none; }
#toast-msg { font-size: 18px; font-weight: 600; color: #d9dde4; }
#toast-close { padding: 2px 10px; font-size: 22px; line-height: 1.2; background: transparent; border-color: transparent; color: var(--muted); }
#toast-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); }
.toast-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); opacity: 0.7; transform-origin: left; }
#toast.run .toast-timer { animation: toast-countdown 7s linear forwards; } /* = TOAST_MS */
@keyframes toast-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 700px) { #toast { bottom: 16px; } #toast-msg { font-size: 16px; } }

/* Start screen keeps the same size in English and Russian: fixed width,
   no wrapping in the continent chips, fixed-width buttons. */
#overlay .card:not(.wide) { width: min(460px, 100%); }
.cont-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#count-choice button { min-width: 46px; }
#count-choice button[data-count="all"] { min-width: 92px; }
#start { min-width: 160px; }
#overlay-title { white-space: nowrap; }
/* Intro: always room for three lines, so switching language doesn't move the screen */
#overlay .card:not(.wide) #overlay-text { height: 4.5em; line-height: 1.5; margin: 6px 0 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* Results screen on desktop: a panel on the left, the globe stays live on
   the right so it can be turned and zoomed (game.js shifts it over).
   Phones keep the centred overlay for now. */
@media (min-width: 701px) {
  #overlay.ended {
    inset: 0 auto 0 0;
    width: min(540px, 46vw);
    padding: 16px;
    background: transparent;
    display: block;
    overflow-y: auto;
  }
  #overlay.ended .card.wide {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  }
  #overlay.ended .card.wide #round-list { margin-top: 0; max-height: none; overflow: visible; }
}

/* Phones: the fixed widths above don't fit 375px, let things shrink */
@media (max-width: 700px) {
  #overlay .card, #overlay .card:not(.wide) { width: 100%; padding: 20px 16px; }
  #count-choice button, #count-choice button[data-count="all"], #start { min-width: 0; }
  .seg button { padding: 6px 10px; font-size: 13px; }
  .cont { padding: 6px 8px; font-size: 12px; gap: 6px; }
  #overlay-title { white-space: normal; font-size: 22px; }
}
@media (max-width: 700px) {
  #overlay { grid-template-columns: minmax(0, 1fr); }
  .continents { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cont, .cont-name { min-width: 0; }
}

/* Fact card after each answer (pace "with pauses"): bottom left on desktop, with Next inside */
#facts {
  position: fixed;
  left: 16px;
  bottom: 24px;
  z-index: 3;
  width: min(400px, calc(100vw - 32px)); /* room for Центральноафриканская next to Next */
  padding: 14px 16px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
#facts[hidden] { display: none; }
.facts-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#facts-flag { font-size: 20px; line-height: 1; }
#facts-name { margin: 0; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; } /* never under the Next button */
.facts-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#facts-name.ok { color: var(--green); }
#facts-name.skipped { color: #b9bec6; }
#facts-next { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; font-weight: 600; background: var(--accent); border-color: transparent; color: #04101f; }
#facts-next:hover { background: #79b8ff; }
#facts-list { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 13px; }
#facts-list dt { color: var(--muted); }
#facts-list dd { margin: 0; }
.facts-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.facts-foot .option { margin: 0; font-size: 12px; }
.facts-src { margin: 8px 0 0; font-size: 10px; color: var(--muted); opacity: 0.8; }
@media (max-width: 700px) {
  #facts { bottom: 16px; }
  #facts-list { font-size: 12px; }
}

/* Settings panel: the two toggles stacked on the left, language on the right */
#settings { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
#settings .pace-seg button { padding: 5px 10px; font-size: 12px; }
#settings .lang { grid-column: 2; }

/* Pace switch: with pauses / non-stop, and a one-line hint under it on the start screen */
#pace-choice button { min-width: 116px; }
.pace-hint { margin: -4px 0 2px; min-height: 2.6em; font-size: 12px; line-height: 1.3; color: var(--muted); text-align: left; }
@media (max-width: 700px) { #pace-choice button { min-width: 0; } }

/* Hints: up to three lines under the question, each closer to the answer */
#hints[hidden] { display: none; }
#hints {
  position: fixed; left: 16px; right: 16px; bottom: 28px; z-index: 2;
  margin: 0 auto; width: fit-content; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 16px; list-style: none; font-size: 14px; color: var(--text);
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px; backdrop-filter: blur(8px);
}
#hints li { padding: 2px 0; }
#hints li::before { content: "💡 "; }
#hint { padding: 6px 10px; }
#results .hints { color: var(--muted); font-size: 12px; }


/* Icons and labels: desktop keeps the words, phones only the icons */
.icon { width: 16px; height: 16px; display: none; vertical-align: middle; }
.stats .meta { display: flex; align-items: center; gap: 14px; }
#dots, .hint-pips, .pause-settings, #settings-toggle, .cont-short, .facts-chevron { display: none; }

/* ---------- Phones ---------- */
@media (max-width: 700px) {
  /* Top panel: one row — the question on the left, icon buttons on the right,
     progress and timer small under the name, a progress strip below */
  #hud {
    top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px;
    width: auto; max-width: none; padding: 8px 8px 8px 14px; gap: 6px;
  }
  .prompt { grid-row: 1; grid-column: 1; align-items: flex-start; text-align: left; }
  .prompt .label { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #target { font-size: 20px; display: block; max-width: 100%; overflow: hidden; } /* game.js shrinks a word too long to fit */
  .stats { display: contents; }
  .stats .meta { grid-row: 2; grid-column: 1; gap: 10px; font-size: 12px; }
  #timer { min-width: 0; text-align: left; font-size: 12px; }
  .stats button { grid-row: 1 / span 2; }
  #hud .stats button { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; line-height: 1; }
  .hud-main { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 44px); align-items: center; gap: 0 4px; }
  #hint { grid-column: 2; } #skip { grid-column: 3; } #finish { grid-column: 4; } #pause { grid-column: 5; }
  /* hint: the bulb with three pips under it, one per hint left */
  #hint { gap: 4px; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; }
  #hint > span:first-child { font-size: 16px; line-height: 1; }
  #hint-left { display: none; }
  .hint-pips { display: flex; gap: 3px; }
  .hint-pips i { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
  #hint[data-left="2"] .hint-pips i:nth-child(3),
  #hint[data-left="1"] .hint-pips i:nth-child(n+2),
  #hint[data-left="0"] .hint-pips i { background: rgba(255, 255, 255, 0.18); }
  .icon { display: block; }
  .btn-label { display: none; }
  /* first tap arms it: the button turns red and a bubble asks to tap again */
  #finish { position: relative; }
  #finish.armed .btn-label {
    display: block; position: absolute; top: calc(100% + 8px); right: -4px;
    padding: 6px 10px; white-space: nowrap; font-size: 13px; line-height: 1.2;
    background: #3a1517; border: 1px solid var(--red); border-radius: 8px; color: #ffd7d4;
  }
  #dots { display: flex; gap: 2px; height: 3px; }
  #dots i { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
  #dots i.now { background: rgba(88, 166, 255, 0.7); }
  #dots i.ok { background: var(--green); }
  #dots i.skipped { background: #8b9099; }

  /* No right column during a round: answers are on the results screen,
     pace and language are in the pause menu */
  #side { display: none !important; }
  .pause-settings { display: flex; justify-content: center; gap: 10px; margin: 0 0 16px; }
  #paused .card { width: min(340px, 100%); }
  #paused .hint { display: none; } /* keyboard keys */
  .pause-settings .seg button { padding: 8px 10px; white-space: nowrap; font-size: 13px; }
  .pause-settings .lang button { padding: 8px 10px; font-size: 13px; }

  /* Bottom panels sit on the body, which is exactly the visible height
     (100dvh): mobile Chrome draws its bottom toolbar over the page, so a
     plain position: fixed; bottom: … ended up hidden behind it. The globe
     itself stays fixed and full-screen, under the toolbars. */
  body { position: relative; height: 100vh; height: 100dvh; }
  #hints, #facts, #next-bar, #toast { position: absolute; }

  /* Bottom: hints, then the answer sheet and Next — all within thumb reach */
  #hints { left: 8px; right: 8px; width: auto; max-width: none; bottom: calc(10px + env(safe-area-inset-bottom)); font-size: 13px; padding: 8px 12px; }
  #next-bar {
    left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 8px 8px 8px 14px; gap: 10px; justify-content: space-between;
  }
  #next-msg { font-size: 14px; min-width: 0; }
  #next { min-height: 44px; padding: 0 22px; flex-shrink: 0; }
  #toast { left: 8px; right: 8px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 10px 8px 10px 16px; }
  #toast-close { min-width: 44px; min-height: 44px; }

  /* Fact card as a sheet above Next: folded = flag and name, tap to open */
  #facts { left: 8px; right: 8px; width: auto; padding: 0 14px; }
  #facts { bottom: calc(8px + env(safe-area-inset-bottom)); }
  #facts-next { width: 48px; height: 44px; padding: 0; justify-content: center; }
  #facts-next .icon { width: 20px; height: 20px; }
  .facts-head { gap: 10px; padding: 6px 0; }
  .facts-head { margin: 0; min-height: 44px; cursor: pointer; }
  #facts-name { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; } /* long names wrap, never cut */
  .facts-chevron { display: block; width: 10px; height: 10px; border: solid var(--muted); border-width: 2px 2px 0 0; transform: rotate(-45deg); margin: 4px 4px 0; transition: transform 0.2s; }
  #facts.open .facts-chevron { transform: rotate(135deg); margin-top: -4px; }
  #facts:not(.open) #facts-list, #facts:not(.open) .facts-src { display: none; }
  #facts.open { padding-bottom: 10px; max-height: 55vh; overflow-y: auto; }

  /* Bigger touch targets in the overlays */
  .seg button { min-height: 40px; }
  #start, #resume { min-height: 48px; }

  /* Start screen: continents as chips in three columns, short names, no counts */
  .continents { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cont { position: relative; justify-content: center; padding: 10px 4px; min-height: 40px; }
  .cont input { position: absolute; opacity: 0; pointer-events: none; }
  .cont-name, .cont-count { display: none; }
  .cont-short { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
  .cont:has(input:checked) .cont-short { color: var(--text); font-weight: 600; }
  .pace-hint { display: none; }
  .choices { margin: 12px 0 4px; }
  #overlay .card:not(.wide) #overlay-text { margin: 4px 0; font-size: 14px; }
  #overlay { padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); overflow-y: auto; }

  /* Results: numbers and "Play again" first, the next round's settings folded */
  .card.wide .card-main { display: flex; flex-direction: column; }
  .card.wide .card-main > * { order: 0; }
  .card.wide #start { order: 1; align-self: center; margin-top: 16px; width: 100%; }
  .card.wide #share { order: 1; margin: 8px 0 0; width: 100%; justify-content: center; min-height: 44px; font-size: 16px; }
  .card.wide #settings-toggle { display: block; order: 2; margin: 12px auto 0; background: transparent; color: var(--muted); font-size: 13px; }
  .card.wide #settings-toggle::after { content: " ▾"; }
  .card.wide.show-settings #settings-toggle::after { content: " ▴"; }
  .card.wide .choices { order: 3; }
  .card.wide:not(.show-settings) .choices { display: none; }
  .card.wide #round-list { max-height: none; }
  .card.wide #overlay-title { margin-top: 44px; } /* clear of the fold icon and EN | RU */
  #overlay:has(.card.wide) { place-items: start center; }
}

/* ---------- Start screen controls ---------- */
/* Mode, questions and pace share one width, so the column lines up */
:root { --ctl-w: 236px; }
.choice .ctl { width: var(--ctl-w); flex-shrink: 0; }
.seg.ctl button { flex: 1; min-width: 0 !important; padding-left: 6px; padding-right: 6px; }
#count-choice.ctl button[data-count="all"] { flex: 2; }
#pace-choice.ctl button { white-space: nowrap; }
.select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 14px; color: var(--text); text-align: left;
  padding: 6px 30px 6px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b95a7' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  cursor: pointer;
}
select.select option { color: #000; }
.select:hover { background-color: rgba(255, 255, 255, 0.08); }

/* Continents: folded into one row ("All"); open to pick */
.continents-choice { display: block; }
.continents-choice > summary { list-style: none; cursor: pointer; }
.continents-choice > summary::-webkit-details-marker { display: none; }
.continents-choice[open] #cont-summary { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 5l4-4 4 4' fill='none' stroke='%238b95a7' stroke-width='1.6'/%3E%3C/svg%3E"); }
.continents-choice .continents { margin-top: 8px; }
#cont-summary { display: block; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { #cont-summary { line-height: 26px; } }

/* Loading: a spinner in the Start button */
#start .spinner {
  display: inline-block; width: 20px; height: 20px; vertical-align: middle;
  border: 2.5px solid rgba(4, 16, 31, 0.25); border-top-color: #04101f; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Results on phones: fold the card away to look at the globe */
#peek, #peek-back { display: none; }
#peek-back[hidden] { display: none !important; }
@media (max-width: 700px) {
  :root { --ctl-w: 196px; }
  .choice { gap: 8px; }
  .seg.ctl button { font-size: 13px; padding-left: 4px; padding-right: 4px; }
  .select { min-height: 40px; font-size: 13px; }
  /* top left of the results card (EN | RU is top right): fold it away */
  .card.wide #peek {
    display: grid; place-items: center; position: absolute; top: 10px; left: 10px;
    width: 40px; height: 40px; padding: 0; color: var(--muted); background: transparent;
  }
  #overlay.peek { background: transparent; pointer-events: none; }
  #overlay.peek .card { display: none; }
  #peek-back {
    display: block; position: absolute; z-index: 5; left: 50%; transform: translateX(-50%);
    bottom: calc(16px + env(safe-area-inset-bottom)); min-height: 44px; padding: 0 22px;
    font-weight: 600; background: var(--accent); border-color: transparent; color: #04101f;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  }
}