/* Geography only: the question bar under the map (the country or capital to find, or the answer buttons) and the map
   credit. Everything else comes from ../shared/game.css. Calm atlas colours: parchment ink on the dark game panel. */
#screen{touch-action:manipulation;user-select:none;-webkit-user-select:none}
canvas#world{cursor:crosshair}
canvas#world:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.progress-fill{background:linear-gradient(90deg,#8fc4d8,#a6d4a0,#f0cf8a);transition:width .25s ease-out}

.ask{display:grid;gap:6px;padding:8px 10px 10px;background:#141a26;border:1px solid #2a3348;border-radius:14px;
  transition:border-color .2s,background .2s}
.ask.right{border-color:#6fc98a;background:#152a22}
.ask.wrong{border-color:#e2786c;background:#2a1a1c}
.ask-kind{font:700 12px/1.3 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#c9b98f;text-align:center}
.ask-body{display:grid;min-height:52px}
.ask-body > *{grid-area:1/1}
.ask-name{display:grid;place-items:center;font:800 clamp(24px,4.4vw,34px)/1.05 "Bricolage Grotesque",system-ui,sans-serif;color:#f6efdc;
  text-align:center;overflow-wrap:anywhere}
.ask.right .ask-name{color:#bff0cc}
.ask.wrong .ask-name{color:#ffd0c8}
.ask.choosing .ask-name{visibility:hidden}
.ask:not(.choosing) .answers{visibility:hidden}

.answers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.answers.six{grid-template-columns:repeat(6,1fr)}
.answer{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 10px;text-align:left;cursor:pointer;
  font:700 15px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;color:#f1ead8;background:#1c2434;
  border:2px solid #313c55;border-radius:12px;touch-action:manipulation;transition:transform .08s ease,border-color .12s,background .12s}
.answer[hidden]{display:none}
.answer .num{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#ffffff12;
  font:11px ui-monospace,Menlo,monospace;color:#a9b2c6}
.answer .label{min-width:0;overflow-wrap:anywhere}
.answer:hover{border-color:#c9b98f}
.answer:active{transform:scale(.97)}
.answer:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.answer.right{border-color:#6fc98a;background:#6fc98a2e;color:#dff7e5}
.answer.right .num{background:#6fc98a;color:#10201a}
.answer.wrong{border-color:#e2786c;background:#e2786c2e;color:#ffe0da}
.answer.wrong .num{background:#e2786c;color:#2a1010}
.answer.dim{opacity:.45}

.credit{margin:-4px 0 0;text-align:center;font:600 11px "Plus Jakarta Sans",system-ui,sans-serif;color:var(--muted)}
.zone-banner{top:auto;bottom:6%}
@media (max-width:760px){
  .answers,.answers.six{grid-template-columns:repeat(2,1fr)}
  .answers.six{grid-template-columns:repeat(3,1fr)}
  .answer{min-height:44px;font-size:13px;padding:5px 8px;gap:6px}
  .answer .num{width:18px;height:18px;font-size:10px}
  .ask-body{min-height:96px}
  .ask{padding:6px 8px 8px;gap:4px}
  .ask-kind{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.answer,.ask{transition:none}.answer:active{transform:none}}