:root{
  --bg:#080b16;
  --bg-2:#0d1222;
  --panel:rgba(20,26,44,.72);
  --stroke:rgba(255,255,255,.09);
  --stroke-2:rgba(255,255,255,.16);
  --txt:#e8ecf6;
  --muted:#8b95ad;
  --accent:#5eead4;
  --accent-2:#3b82f6;
  --land:#252e47;
  --land-hi:#33405f;
  --ok:#22c55e;
  --warn:#fbbf24;
  --ok3:#f97316;
  --bad:#f43f5e;
  --region:#f43f5e;
  --r:16px;
  --font:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--txt);font-family:var(--font);
  -webkit-font-smoothing:antialiased;overflow:hidden;
  display:flex;flex-direction:column;
}

/* ---------- фон ---------- */
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(94,234,212,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(94,234,212,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 100%);
}
.bg-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 15% -10%,rgba(59,130,246,.20),transparent 60%),
    radial-gradient(50rem 34rem at 95% 105%,rgba(94,234,212,.14),transparent 60%);
}

/* ---------- шапка ---------- */
.topbar{
  position:relative;z-index:3;flex:0 0 auto;
  display:flex;align-items:center;gap:18px;
  padding:14px 22px;
  border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(10,14,26,.9),rgba(10,14,26,.5));
  backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-mark{width:38px;height:38px;filter:drop-shadow(0 0 14px rgba(94,234,212,.35))}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text b{font-size:19px;letter-spacing:.22em;font-weight:800}
.brand-text i{font-size:11px;font-style:normal;color:var(--muted);letter-spacing:.04em}

.modes{display:flex;gap:4px;margin-left:auto;background:rgba(255,255,255,.045);
  border:1px solid var(--stroke);border-radius:12px;padding:4px}
.mode-btn{
  border:0;background:transparent;color:var(--muted);font:600 13px/1 var(--font);
  padding:9px 16px;border-radius:9px;cursor:pointer;transition:.18s;
}
.mode-btn:hover{color:var(--txt)}
.mode-btn.is-active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#05121a;box-shadow:0 4px 16px rgba(59,130,246,.3)}

.top-actions{display:flex;gap:8px}
.icon-btn{
  width:38px;height:38px;border-radius:11px;cursor:pointer;
  border:1px solid var(--stroke);background:rgba(255,255,255,.045);
  color:var(--txt);font-size:15px;transition:.18s;
}
.icon-btn:hover{background:rgba(255,255,255,.1);border-color:var(--stroke-2);transform:translateY(-1px)}

/* ---------- раскладка ---------- */
.layout{
  position:relative;z-index:2;flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:1fr 372px;gap:18px;padding:18px 22px;
}

/* ---------- карта ---------- */
.map-wrap{
  position:relative;border:1px solid var(--stroke);border-radius:var(--r);
  background:radial-gradient(120% 100% at 50% 0%,#101728,#0a0e1a 70%);
  overflow:hidden;
}
#map{width:100%;height:100%;display:block;cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#map.dragging{cursor:grabbing}

.country{
  fill:var(--land);stroke:#5c6a8c;stroke-width:calc(var(--sw,1) * 1.1);
  shape-rendering:geometricPrecision;
  transition:fill .25s ease;
}
.free .country{cursor:pointer}
.free .country:hover{fill:var(--land-hi)}
.country.target{fill:#556694;stroke:var(--accent);stroke-width:calc(var(--sw,1) * 1.2);
  filter:drop-shadow(0 0 7px rgba(94,234,212,.6))}
.country.solved{fill:var(--ok);stroke:#8ef0b4;stroke-width:calc(var(--sw,1) * 1.4)}      /* с 1-й попытки */
.country.ok2{fill:var(--warn);stroke:#ffe08a;stroke-width:calc(var(--sw,1) * 1.4)}       /* со 2-й */
.country.ok3{fill:var(--ok3);stroke:#ffc08a;stroke-width:calc(var(--sw,1) * 1.4)}        /* с 3-й */
.country.wrong{fill:var(--warn);stroke:#ffe08a;stroke-width:calc(var(--sw,1) * 2.4)}
.country.failed{fill:var(--bad);stroke:#ff9fb2;stroke-width:calc(var(--sw,1) * 1.4)}     /* не угадал */
.country.picked{fill:#556694;stroke:var(--accent);stroke-width:calc(var(--sw,1) * 1.2);
  filter:drop-shadow(0 0 7px rgba(94,234,212,.6))}

/* контур выбранного материка */
/* подсветка выбранного материка — только обводка, БЕЗ заливки.
   Заливка (fill) через fill-rule на составном пути из многих стран ненадёжна:
   у стран со сложной геометрией (много островов/озёр — Россия, Канада, Австралия,
   Китай, США, Бразилия) правило чётности/ненулевой обмотки может обнулять площадь
   там, где кольца отдельных частей не совпадают по направлению обхода — такие
   страны просто не подсвечивались. Обводка (stroke) от этой проблемы не зависит:
   она рисуется по каждому кольцу независимо, поэтому не пропадает никогда.
   Побочный эффект — тонкие линии по внутренним границам соседних стран региона,
   это приемлемая цена за то, что подсветка больше не исчезает.
   Толщина всех обводок карты (--sw) считается вручную в JS (applyView), а не
   через vector-effect:non-scaling-stroke — на мобильном Safari это свойство
   давало на сложных многоостровных контурах (Бразилия/США/Россия/Канада)
   заметно другую толщину линии, чем на десктопе. */
#region-outline{
  fill:none;
  stroke:var(--region);stroke-width:calc(var(--sw,1) * 1.3);stroke-linejoin:round;stroke-opacity:.85;
  pointer-events:none;shape-rendering:geometricPrecision;
  filter:drop-shadow(0 0 3px rgba(244,63,94,.9)) drop-shadow(0 0 7px rgba(244,63,94,.5));
  animation:region-in .5s ease;
}
@keyframes region-in{from{opacity:0}}

@keyframes pulse-ring{0%{stroke-width:calc(var(--sw,1) * .8);opacity:1}50%{stroke-width:calc(var(--sw,1) * 1.8);opacity:.7}100%{stroke-width:calc(var(--sw,1) * .8);opacity:1}}
.country.target,.country.picked{animation:pulse-ring 2.2s ease-in-out infinite}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}

.map-toolbar{position:absolute;top:12px;right:12px;z-index:4;display:flex;flex-direction:column;gap:6px}
.tool{
  width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:15px;
  border:1px solid var(--stroke);background:rgba(14,20,36,.85);color:var(--txt);
  backdrop-filter:blur(8px);transition:.15s;
}
.tool:hover{background:rgba(94,234,212,.16);border-color:var(--accent)}

.region-chips{position:absolute;top:12px;left:12px;z-index:4;display:flex;flex-wrap:wrap;gap:6px;max-width:70%}
.chip{
  border:1px solid var(--stroke);background:rgba(14,20,36,.8);color:var(--muted);
  font:600 11.5px/1 var(--font);padding:8px 12px;border-radius:20px;cursor:pointer;
  backdrop-filter:blur(8px);transition:.15s;
}
.chip:hover{color:var(--txt);border-color:var(--stroke-2)}
.chip.on{background:rgba(94,234,212,.15);border-color:var(--accent);color:var(--accent)}

.map-tip{
  position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-140%);
  background:rgba(8,12,22,.94);border:1px solid var(--stroke-2);border-radius:9px;
  padding:6px 11px;font-size:12.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}

/* ---------- панель ---------- */
.panel{display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto;padding-right:2px}
.panel::-webkit-scrollbar{width:6px}
.panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

.score-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px}
.stat{
  border:1px solid var(--stroke);border-radius:14px;padding:12px 14px;
  background:var(--panel);backdrop-filter:blur(12px);
}
.stat-label{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stat-value{display:block;font-size:26px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums}
.stat-score .stat-value{background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat.bump{animation:bump .4s ease}
@keyframes bump{50%{transform:scale(1.07)}}

.progress{padding:0 2px}
.progress-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.progress-bar i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s ease}
.progress-meta{display:flex;justify-content:space-between;margin-top:7px;font-size:11.5px;color:var(--muted)}

.quiz-card{
  border:1px solid var(--stroke);border-radius:var(--r);padding:18px;
  background:var(--panel);backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.quiz-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.quiz-kicker{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.attempts{display:flex;gap:5px}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);transition:.2s}
.dot.used{background:var(--warn);box-shadow:0 0 8px rgba(251,191,36,.6)}
.dot.gone{background:rgba(255,255,255,.07)}

.quiz-question{font-size:17px;font-weight:600;margin-bottom:14px;line-height:1.4}
.quiz-question small{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:3px}

.input-wrap{position:relative;display:flex;gap:8px}
#guess{
  flex:1;min-width:0;border-radius:12px;padding:13px 15px;font:500 15px var(--font);
  border:1px solid var(--stroke-2);background:rgba(8,12,22,.7);color:var(--txt);outline:0;transition:.18s;
}
#guess::placeholder{color:#5c6580}
#guess:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(94,234,212,.14)}
#guess:disabled{opacity:.5}
.submit{
  flex:0 0 48px;border:0;border-radius:12px;cursor:pointer;font-size:19px;color:#05121a;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));transition:.18s;
}
.submit:hover{filter:brightness(1.1);transform:translateY(-1px)}
.submit:disabled{opacity:.4;cursor:not-allowed;transform:none}

.suggestions{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:9;max-height:190px;overflow-y:auto;
  border:1px solid var(--stroke-2);border-radius:12px;background:#0d1322;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.sug{padding:10px 14px;font-size:13.5px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05)}
.sug:last-child{border:0}
.sug:hover,.sug.on{background:rgba(94,234,212,.13);color:var(--accent)}

.feedback{min-height:22px;margin-top:11px;font-size:13.5px;font-weight:600}
.feedback.ok{color:var(--ok)}
.feedback.warn{color:var(--warn)}
.feedback.bad{color:var(--bad)}
.feedback .pts{
  display:inline-block;margin-left:6px;padding:2px 8px;border-radius:20px;font-size:11.5px;
  background:rgba(34,197,94,.16);color:var(--ok);
}

.quiz-actions{display:flex;gap:8px;margin-top:14px}
.ghost{
  flex:1;border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--muted);
  border-radius:11px;padding:11px;font:600 12.5px var(--font);cursor:pointer;transition:.16s;
}
.ghost:hover{color:var(--txt);border-color:var(--stroke-2);background:rgba(255,255,255,.08)}
.ghost .cost{color:var(--bad);font-size:11px}
.ghost.wide{width:100%;flex:none;margin-top:10px}

.log-card{
  border:1px solid var(--stroke);border-radius:var(--r);background:var(--panel);
  backdrop-filter:blur(12px);padding:14px 16px;
}
.log-title{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.log{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:168px;overflow-y:auto}
.log li{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 0}
.log li .ic{width:17px;text-align:center;flex:0 0 auto}
.log li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log li .pt{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.log-empty{color:var(--muted);font-size:12.5px}

.finish{
  width:100%;margin-top:10px;border-radius:11px;padding:11px;cursor:pointer;
  font:700 12.5px var(--font);color:#2a1206;
  border:0;background:linear-gradient(135deg,#fbbf24,#f97316);transition:.16s;
}
.finish:hover{filter:brightness(1.08);transform:translateY(-1px)}
.finish:disabled{opacity:.4;cursor:not-allowed;transform:none}

.restart{
  border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--muted);
  border-radius:12px;padding:12px;font:600 13px var(--font);cursor:pointer;transition:.16s;
}
.restart:hover{color:var(--bad);border-color:rgba(244,63,94,.5)}

/* ---------- модалки ---------- */
.modal{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;
  background:rgba(4,7,14,.7);backdrop-filter:blur(6px);animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}}
.modal[hidden]{display:none}
.modal-card{
  position:relative;width:min(460px,100%);max-height:86vh;overflow-y:auto;
  border:1px solid var(--stroke-2);border-radius:20px;padding:26px;
  background:linear-gradient(180deg,#131a2c,#0c1120);
  box-shadow:0 30px 90px rgba(0,0,0,.6);animation:pop .25s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes pop{from{transform:scale(.94) translateY(10px);opacity:0}}
.modal-card h2{font-size:21px;margin-bottom:16px}
.modal-x{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:9px;cursor:pointer;
  border:1px solid var(--stroke);background:transparent;color:var(--muted);font-size:13px}
.modal-x:hover{color:var(--txt);background:rgba(255,255,255,.07)}
.rules{padding-left:20px;display:flex;flex-direction:column;gap:11px;font-size:13.5px;line-height:1.55;color:#c3cbdd}
.rules b{color:var(--txt)}

/* стартовый экран правил — короткий, карточками */
.modal-card-help{width:min(440px,100%);text-align:center}
.help-hero{margin-bottom:20px}
.help-logo{
  width:64px;height:64px;margin:0 auto 12px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;font-size:32px;
  background:linear-gradient(135deg,rgba(94,234,212,.22),rgba(45,212,191,.10));
  border:1px solid rgba(94,234,212,.35);
  box-shadow:0 8px 28px rgba(94,234,212,.18);
}
.modal-card-help h2{font-size:22px;margin-bottom:6px}
.help-sub{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.help-grid{display:flex;flex-direction:column;gap:9px;text-align:left;margin-bottom:16px}
.help-item{
  display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
  border:1px solid var(--stroke);border-radius:13px;background:rgba(255,255,255,.03);
}
.help-ic{font-size:19px;line-height:1.2;flex:0 0 auto}
.help-item b{display:block;font-size:13.5px;margin-bottom:2px;color:var(--txt)}
.help-item small{display:block;font-size:12px;color:var(--muted);line-height:1.45}
.help-foot{
  font-size:11.5px;color:var(--muted);line-height:1.5;text-align:left;
  padding:11px 13px;border-radius:11px;background:rgba(255,255,255,.025);
  border:1px dashed var(--stroke);margin:0;
}
.primary{
  width:100%;margin-top:20px;border:0;border-radius:12px;padding:13px;cursor:pointer;
  font:700 14px var(--font);color:#05121a;background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.primary:hover{filter:brightness(1.08)}

.board-caption{font-size:13px;color:var(--accent);font-weight:700;letter-spacing:.02em}
.board-hint{font-size:10.5px;color:var(--muted);white-space:nowrap}

/* модалка рейтинга — чуть шире, разбита на явные блоки-карточки */
.modal-card-board{width:min(500px,100%)}

.board-section{
  border:1px solid var(--stroke);border-radius:14px;background:rgba(255,255,255,.025);
  padding:14px 16px;margin-bottom:12px;
}
.board-section-label{
  font:700 10.5px var(--font);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}

/* вкладки рейтинга: режим + регион */
.board-tabs{display:flex;flex-wrap:wrap;gap:7px}
.board-tabs button{
  border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--muted);
  font:600 12.5px var(--font);padding:9px 15px;border-radius:10px;cursor:pointer;transition:.15s;
}
.board-tabs button:hover{color:var(--txt);border-color:var(--stroke-2);background:rgba(255,255,255,.07)}
.board-tabs .bt-mode.on{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#05121a;border-color:transparent;
  box-shadow:0 4px 14px rgba(94,234,212,.25);
}
.board-tabs-reg button{font-size:11.5px;padding:8px 13px;border-radius:20px}
.board-tabs .bt-reg.on{
  background:linear-gradient(135deg,rgba(94,234,212,.28),rgba(45,212,191,.2));
  border-color:var(--accent);color:#d8fff7;font-weight:700;
}

/* блок результатов — своя карточка, ярче остальных */
.board-section-results{
  background:linear-gradient(180deg,rgba(94,234,212,.05),rgba(255,255,255,.015));
  border-color:var(--stroke-2);padding-top:14px;
}
.board-results-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--stroke);
}
.board-note{font-size:11.5px;color:var(--warn);margin:0 0 10px;line-height:1.4}

/* блок итогов */
.end-region{color:var(--accent);font-weight:600}
.end-note{display:inline-block;margin-top:8px;color:#c3cbdd;font-size:13px;line-height:1.5}
.end-stats{display:inline-block;margin-top:10px;font-size:12px;color:#9aa4bd}
#btn-hint2:disabled{opacity:.4;cursor:not-allowed}
#btn-hint:disabled{opacity:.4;cursor:not-allowed}
.board{list-style:none;display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow-y:auto;padding-right:2px}
.board li{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.035);font-size:13.5px;
  transition:transform .12s ease,border-color .12s ease;
}
.board li:hover{border-color:var(--stroke-2);transform:translateX(2px)}
.board li .rk{
  width:26px;height:26px;flex:0 0 26px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-weight:800;color:var(--muted);background:rgba(255,255,255,.05);font-size:12.5px;
}
/* топ-3 — золото/серебро/бронза с акцентной подложкой */
.board li:nth-child(1){border-color:rgba(251,191,36,.45);background:linear-gradient(90deg,rgba(251,191,36,.12),rgba(255,255,255,.02))}
.board li:nth-child(1) .rk{background:linear-gradient(135deg,#fbbf24,#d97706);color:#2a1a02}
.board li:nth-child(2){border-color:rgba(203,213,225,.35);background:linear-gradient(90deg,rgba(203,213,225,.09),rgba(255,255,255,.02))}
.board li:nth-child(2) .rk{background:linear-gradient(135deg,#e2e8f0,#94a3b8);color:#1a2130}
.board li:nth-child(3){border-color:rgba(217,119,6,.4);background:linear-gradient(90deg,rgba(217,119,6,.12),rgba(255,255,255,.02))}
.board li:nth-child(3) .rk{background:linear-gradient(135deg,#d97706,#92400e);color:#2a1502}
.board li .who{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.board li .stat-line{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.board li .sc{font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent);font-size:15px}
.board li .dt{font-size:10.5px;color:var(--muted)}
.board-empty{color:var(--muted);font-size:13px;text-align:center;padding:26px 0}

.end-score{font-size:52px;font-weight:800;text-align:center;margin:6px 0 2px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.end-sub{text-align:center;color:var(--txt);font-size:14px;margin-bottom:18px;line-height:1.5}
.end-name{display:flex;gap:8px}
.end-name input{flex:1;min-width:0;border-radius:12px;padding:12px 14px;font:500 14px var(--font);
  border:1px solid var(--stroke-2);background:rgba(8,12,22,.7);color:var(--txt);outline:0}
.end-name input:focus{border-color:var(--accent)}
.end-name .primary{width:auto;margin:0;padding:12px 20px}

.foot{position:relative;z-index:2;flex:0 0 auto;padding:9px 22px;font-size:11px;color:#4d5670;
  border-top:1px solid var(--stroke);text-align:center}

/* ---------- адаптив ---------- */
@media (max-width:1080px){
  /* высота по контенту: при фиксированных 100% футер наезжал на форму ответа */
  html,body{height:auto;min-height:100%}
  body{overflow-x:hidden;overflow-y:auto}
  .layout{grid-template-columns:1fr;padding:14px;min-height:0}
  .map-wrap{height:52vh;min-height:340px;flex:0 0 auto}
  .panel{overflow:visible;min-height:0;display:flex;flex-direction:column}
  .foot{margin-top:8px}
  /* Карточка вопроса и поле ввода — сразу под картой, без прокрутки.
     Статистика и история уходят ниже: их не нужно видеть, чтобы ответить. */
  .quiz-card{order:-1;margin-bottom:14px}
  /* на тач-экранах карта — полноценная зона панорамирования пальцем:
     touch-action:none отдаёт весь жест нашему pointer-обработчику,
     а не браузерному скроллу страницы */
  #map{touch-action:none;cursor:default}
}
@media (max-width:620px){
  .topbar{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .modes{order:3;width:100%;margin-left:0}
  .mode-btn{flex:1}
  .brand-text i{display:none}
  .layout{padding:12px;gap:12px}
  .map-wrap{height:44vh;min-height:280px}
  .region-chips{max-width:calc(100% - 60px)}
  .chip{padding:7px 10px;font-size:11px}
  .score-row{grid-template-columns:1fr 1fr 1fr}
  .stat-value{font-size:21px}
  .quiz-actions{flex-wrap:wrap}
  .quiz-actions .ghost{flex:1 1 calc(50% - 4px);min-width:0}
  #guess{font-size:16px}          /* меньше 16px — iOS зумит страницу при фокусе */
  .foot{padding:10px 14px;font-size:10.5px}
  .board-section{padding:12px 13px}
  .board-results-head{flex-wrap:wrap}
  .board-hint{white-space:normal}
}