:root{
  --bg:#0f1226; --card:#1b2040; --card2:#232a54; --ink:#eef1ff; --muted:#9aa3d0;
  --accent:#6c8cff; --accent2:#8a6cff; --good:#28c76f; --bad:#ff5c7c; --gold:#ffc53d;
  --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* --tg-vh синкается из tg.viewportStableHeight в app.js (см. syncTgViewport) — голый 100%
   в полноэкранном режиме Telegram давал не ту высоту, что реальный видимый вьюпорт, и
   контент не помещался (жалоба 29.07.2026, "средний" размер вместо fullscreen работал ок
   именно потому что там innerHeight и viewportStableHeight почти совпадают). Вне Telegram
   --tg-vh не задан — 100% остаётся дефолтом как и раньше. */
html,body{margin:0;height:var(--tg-vh,100%)}
body{font-family:-apple-system,Segoe UI,Roboto,sans-serif;background:
  radial-gradient(1200px 600px at 50% -10%,#20264f 0,var(--bg) 60%);
  color:var(--ink);overflow-x:hidden}
#app{max-width:560px;margin:0 auto;min-height:var(--tg-vh,100%);padding:16px 16px calc(86px + env(safe-area-inset-bottom))}
.screen{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;gap:18px}
.logo{font-size:64px}
.spinner{width:34px;height:34px;border:3px solid #333a66;border-top-color:var(--accent);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.topbar-left{display:flex;align-items:center;gap:10px}
.hello{font-size:15px;color:var(--muted)}
.hello b{color:var(--ink);font-size:17px}
.stats{display:flex;gap:8px}
.chip{background:var(--card);border-radius:999px;padding:7px 12px;font-weight:700;font-size:14px;display:flex;gap:6px;align-items:center}
.chip.xp{color:var(--accent)} .chip.coin{color:var(--gold)}
.topbar-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;cursor:pointer;flex-shrink:0;display:block}
.topbar-avatar-ph{width:40px;height:40px;border-radius:50%;background:var(--card2);display:flex;
  align-items:center;justify-content:center;font-weight:800;cursor:pointer;flex-shrink:0}

/* Нижнее меню — фиксированное, как cab-nav у tuxt */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;display:flex;
  background:var(--card);border-top:1px solid rgba(255,255,255,.08);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:50}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);
  font-size:11px;cursor:pointer;padding:4px 0;border-radius:10px;transition:.12s}
.nav-item .ic{font-size:20px}
.nav-item.active{color:var(--accent)}
.nav-item:active{transform:scale(.95)}

/* Сегментированный переключатель (Вызвать/История внутри «Бои») */
.seg{display:flex;background:var(--card);border-radius:14px;padding:4px;margin-bottom:14px;gap:4px}
.seg-opt{flex:1;text-align:center;padding:9px;border-radius:10px;cursor:pointer;font-weight:700;font-size:14px;color:var(--muted)}
.seg-opt.sel{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}

/* Профиль + аватар */
.profile-card{background:linear-gradient(160deg,var(--card2),var(--card));border-radius:var(--radius);
  padding:24px 16px;text-align:center;margin-bottom:14px}
.avatar-wrap{position:relative;width:96px;height:96px;margin:0 auto 12px;cursor:pointer}
.avatar-img{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block}
.avatar-ph{width:96px;height:96px;border-radius:50%;background:var(--card2);display:flex;
  align-items:center;justify-content:center;font-size:36px;font-weight:800}
.avatar-edit{position:absolute;right:-2px;bottom:-2px;background:var(--accent);width:30px;height:30px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;
  border:3px solid var(--card)}
.pname{font-size:19px;font-weight:800;margin-top:2px}
.pstats{display:flex;gap:14px;justify-content:center;margin-top:8px;font-weight:700}
.pstats span:first-child{color:var(--accent)} .pstats span:last-child{color:var(--gold)}

/* Достижения — заработанные обычные, незаработанные блёклые (просьба юзера 28.07.2026) */
.ach-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.ach-badge{background:linear-gradient(160deg,var(--card2),var(--card));border-radius:14px;
  padding:14px 6px;text-align:center;cursor:pointer;transition:transform .1s}
.ach-badge:active{transform:scale(.96)}
.ach-badge.locked{opacity:.35;filter:grayscale(1)}
.ach-emo{font-size:30px}
.ach-name{font-size:11px;margin-top:6px;color:var(--muted);font-weight:600;line-height:1.25}
.ach-badge.earned .ach-name{color:var(--ink)}
.ach-progress{font-size:11px;margin-top:4px;font-weight:800;color:var(--accent)}
.ach-badge.earned .ach-progress{color:var(--good)}

.opp-row{display:flex;align-items:center;gap:10px}
.opp-row .mini-avatar{flex-shrink:0}

/* История боёв — каждая сторона: имя / результат / заработанное друг под другом */
.duel-side{padding:8px 0;border-top:1px solid rgba(255,255,255,.06)}
.duel-side-name{display:flex;align-items:center;gap:8px;font-weight:700}
.duel-side-stat{color:var(--muted);font-size:13px;margin-top:3px}
.duel-side-coins{color:var(--gold);font-weight:700;font-size:13px;margin-top:2px}
.duel-side.win .duel-side-name{color:var(--good)}
.duel-side.win .duel-side-coins{color:var(--good)}

h1{font-size:22px;margin:6px 0 14px}
.sub{color:var(--muted);font-size:14px;margin:-8px 0 16px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:16px;cursor:pointer;
  transition:transform .1s, box-shadow .1s}
.tile:active{transform:scale(.97)}
.tile .emo{font-size:30px}
.tile .name{font-weight:700;margin-top:8px}
.tile .cnt{color:var(--muted);font-size:13px;margin-top:2px}

.btn{display:block;width:100%;border:0;border-radius:14px;padding:15px;font-size:16px;font-weight:700;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));cursor:pointer;margin-top:10px}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--card);color:var(--ink)}
.btn.sm{padding:11px;font-size:14px}

.qcard{background:var(--card);border-radius:var(--radius);padding:18px;margin-top:8px}
.qmeta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:10px}
.qtext{font-size:19px;font-weight:700;line-height:1.35;margin:6px 0 14px}
.qimg{font-size:72px;text-align:center;margin:6px 0 14px}
.qphoto{margin:6px 0 14px;text-align:center}
.qphoto img{max-width:100%;max-height:280px;border-radius:12px;object-fit:cover}
.qmap{margin:6px 0 14px;background:#eef3fb;border-radius:12px;padding:10px;min-height:60px;display:flex;align-items:center;justify-content:center;cursor:zoom-in;position:relative}
.qmap::after{content:"🔍 Увеличить";position:absolute;right:10px;bottom:8px;font-size:11px;color:#7789a3;background:#fff;padding:2px 8px;border-radius:8px}
.qmap svg{width:100%;height:auto;display:block}
.qmap svg path{fill:#c7d2e0;stroke:#fff;stroke-width:.4}
/* .qmap svg path — 0-1-2 специфичность, простое .qmap-highlight (0-1-0) её не перебивало —
   страна на карте молча оставалась серой (найдено 28.07.2026). Даём такую же форму селектора. */
.qmap svg path.qmap-highlight{fill:#22a55e}

/* Полноэкранный зум карты (мелкие страны вроде Нидерландов иначе не разглядеть/не ткнуть) —
   пинч и пан двумя/одним пальцем через CSS transform (см. showMapZoomModal), закрытие —
   свайп вниз по картинке (отдельная кнопка «Закрыть» больше не нужна). touch-action:none —
   жестами внутри полностью распоряжается наш JS, браузеру нечего перехватывать самому. */
.mapzoom-bg{position:fixed;inset:0;background:rgba(10,14,26,.92);z-index:999}
.mapzoom-scroll{position:relative;width:100%;height:100%;overflow:hidden;touch-action:none}
.mapzoom-scroll svg{position:absolute;top:0;left:0;transform-origin:0 0;height:auto;will-change:transform}
.mapzoom-scroll svg path{fill:#c7d2e0;stroke:#fff;stroke-width:.4}
.mapzoom-scroll svg path.qmap-highlight{fill:#22a55e}
.opt{background:var(--card2);border:2px solid transparent;border-radius:14px;padding:14px;margin:9px 0;
  font-size:16px;cursor:pointer;transition:.12s}
.opt:active{transform:scale(.99)}
.opt.good{border-color:var(--good);background:rgba(40,199,111,.16)}
.opt.bad{border-color:var(--bad);background:rgba(255,92,124,.16)}
input.answer{width:100%;background:var(--card2);border:2px solid #33407a;border-radius:14px;
  padding:14px;color:var(--ink);font-size:16px}
input.answer:focus{outline:none;border-color:var(--accent)}
.hintn{color:var(--muted);font-size:13px;margin:8px 2px}

.feedback{margin-top:14px;border-radius:14px;padding:14px;font-size:15px;animation:fade .2s}
.feedback.good{background:rgba(40,199,111,.14);border:1px solid var(--good)}
.feedback.bad{background:rgba(255,92,124,.14);border:1px solid var(--bad)}
.feedback .ttl{font-weight:800;margin-bottom:4px}
.feedback .exp{color:var(--muted);margin-top:6px;font-size:14px;line-height:1.4}

.review-section{margin-top:20px}
.review-section h3{font-size:15px;margin:0 0 10px;color:var(--muted)}
.review-item{border-radius:12px;padding:10px 12px;margin-bottom:8px}
.review-item.good{background:rgba(40,199,111,.08);border:1px solid rgba(40,199,111,.3)}
.review-item.bad{background:rgba(255,92,124,.1);border:1px solid rgba(255,92,124,.4)}
.review-head{display:flex;gap:10px;align-items:center}
.review-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0}
.review-q{font-size:13px;color:var(--muted)}
.review-ans{font-size:15px;font-weight:700}
.review-exp{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45}

.progressbar{height:8px;background:var(--card);border-radius:99px;overflow:hidden;margin-bottom:14px}
.progressbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}

.result-emo{font-size:70px;text-align:center}
.big{font-size:40px;font-weight:800;text-align:center}
.rewards{display:flex;gap:12px;justify-content:center;margin:16px 0}
.reward{background:var(--card);border-radius:14px;padding:12px 16px;text-align:center;min-width:90px}
.reward .v{font-size:22px;font-weight:800}
.reward .l{color:var(--muted);font-size:12px}

.row{display:flex;justify-content:space-between;background:var(--card);border-radius:12px;padding:12px 14px;margin:8px 0}
.row .l{color:var(--muted);font-size:14px}
.row .v{font-weight:700}
.timer{font-weight:800;color:var(--gold)}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;
  justify-content:center;z-index:100;padding:20px;animation:fade .15s ease}
.modal-box{background:var(--card);border-radius:var(--radius);padding:26px 22px;max-width:340px;
  width:100%;text-align:center}
.modal-box h2{margin:0 0 6px;font-size:20px}
.modal-box .sub{margin:0}
.chip.coin{cursor:pointer}
.opt.sel{border-color:var(--accent);background:rgba(108,140,255,.16)}
.duel-banner{background:linear-gradient(135deg,var(--accent2),var(--accent));border-radius:var(--radius);
  padding:14px 16px;margin-bottom:12px;cursor:pointer}
.duel-banner .t{font-weight:700;padding-right:26px}
.duel-banner .s{color:rgba(255,255,255,.85);font-size:13px;margin-top:2px;padding-right:26px}
.duel-cancel{position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff;cursor:pointer}
.duel-cancel:active{transform:scale(.9)}