:root{
  --bg:#ffffff; --panel:#f8fafc; --text:#0f172a; --muted:#475569; --border:#e2e8f0;
  --shadow:0 12px 36px rgba(2,6,23,.10);
  --glow:0 8px 24px rgba(37,99,235,.20);
  --state:#2563eb; --private:#10b981; --mixed:#a855f7;
  --accent:#0f172a;
  --radius:16px; --radius-sm:12px; --radius-lg:22px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans";
  line-height:1.5;
  display:grid;
  grid-template-rows:auto 1fr;
  grid-template-columns: minmax(0,1fr) 420px;
  column-gap:16px;
}

header{
  grid-column:1 / -1;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
  background:#fff; position:sticky; top:0; z-index:10;
}
.logo {
  width: 40px;
  height: 40px;
  background: none;
}
.logo svg {
  width: 40px;
  height: 40px;
}

.title{font-weight:800}
.subtitle{color:#64748b}
.lang-dropdown {
  position: relative;
  display: inline-block;
}

#lang-toggle {
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 16px;
}

.lang-options {
  position: absolute;
  right: 0;
  margin-top: 4px;
  top: 100%;
  min-width: 140px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 12px 36px rgba(2,6,23,.1);
  z-index: 999;
  display: flex;
  flex-direction: column;
}

.lang-options > div {
  padding: 8px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  border-radius: 0px;
}

.lang-options > div:hover {
  background: #f1f5f9;
}
.lang-options.hidden {
  display: none !important;
}

.pill{
  border:1px solid var(--border); background:#fff; color:#0f172a;
  padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:600;
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .2s var(--ease);
}
.pill:hover{ transform:translateY(-1px); box-shadow:var(--shadow); background:#fff; }
.pill.active{ background:#0f172a; color:#fff; border-color:#0f172a; }
.add-btn {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.add-btn:hover {
  background: #1e40af;
  border-color: #1e40af;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* По умолчанию иконка скрыта */
.add-btn-icon {
  display: none;
}



main{
  display:grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  gap:12px;
  padding:12px 16px 24px;
}

#stat{
  font-weight:700; background:#fff; border:1px solid var(--border);
  border-radius: var(--radius-sm); padding:8px 12px; box-shadow:var(--shadow); width:max-content;
}

/* MAP WRAPPER */
#map-wrap{
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 420px;
  height: clamp(420px, 72vh, 840px);
  -webkit-user-select: none;
  /* ИЗМЕНЕНО: разрешаем только наши custom touch handlers */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* STAGE & SVG */
#map-stage, #map-stage svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
#map-stage svg{ background:#f2f6fb; overflow:visible; }
#map-stage svg #zoom-group{
  transition: transform .15s var(--ease);
  /* transform-origin: 50% 50%; */
}

/* Контролы зума — новый стиль */
.controls{
  position:absolute; right:12px; top:12px;
  display:flex; flex-direction:column; gap:8px; z-index:3;
  user-select:none;
}
.btn{
  width:42px; height:42px; border-radius:14px; border:1px solid var(--border); background:#fff;
  display:grid; place-items:center; cursor:pointer; font-size:18px; font-weight:700; line-height:1;
  box-shadow:var(--shadow);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease);
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--glow); background:#ffffff; }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px; }

/* Легенда */
.legend{
  position:absolute; left:12px; bottom:12px; z-index:3;
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  box-shadow:var(--shadow); display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}
.legend .item{display:flex; gap:6px; align-items:center; font-size:14px}
.legend .dot{width:10px; height:10px; border-radius:999px; box-shadow:0 0 0 2px #fff inset}
.legend .dot.state{ background: var(--state); }
.legend .dot.mixed{ background: var(--mixed); }
.legend .dot.private{ background: var(--private); }

#map-stage svg [id]{
  transition: opacity .12s var(--ease), stroke-width .12s var(--ease), fill-opacity .12s var(--ease);
  stroke-width: .1;
  vector-effect: non-scaling-stroke;
  outline:none;
  box-shadow:none;
  cursor:pointer !important;
}

#map-stage svg [id].has-data.state:is(path,polygon,rect,circle,ellipse),
#map-stage svg [id].has-data.state :is(path,polygon,rect,circle,ellipse){
  fill:#dbeafe !important; fill-opacity:1 !important;
}

#map-stage svg [id].has-data.mixed:is(path,polygon,rect,circle,ellipse),
#map-stage svg [id].has-data.mixed :is(path,polygon,rect,circle,ellipse){
  fill:#f3e8ff !important; fill-opacity:1 !important;
}

#map-stage svg [id].has-data.private:is(path,polygon,rect,circle,ellipse),
#map-stage svg [id].has-data.private :is(path,polygon,rect,circle,ellipse){
  fill:#dcfce7 !important; fill-opacity:1 !important;
}

#map-stage svg [id].active-stroke{stroke-width: 0.5; outline:none; box-shadow:none; }
#map-stage svg [id].hovered{ stroke-width: 0.3; outline:none; box-shadow:none;  filter:none !important; }

#map-stage svg [id$="_label"] { pointer-events: none !important; }
#map-stage svg [id$="_label"] text { pointer-events: none !important; }

/* Тултип с автоклампом */
.tooltip{
  position:fixed; z-index:9999; pointer-events:none;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:8px 10px; box-shadow:var(--shadow); min-width:160px; max-width:280px;
  font-size:13px; color:#0f172a; transform: translate3d(0,0,0);
  opacity:0; transition: opacity .12s var(--ease);
}
.tooltip.show{ opacity:1; }
.tooltip .t-country{ font-weight:800; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tooltip .t-row{ display:flex; align-items:center; gap:6px; color:#475569; }
.badge{
  display:inline-block; padding:5px 10px; border-radius:999px; border:1px solid var(--border);
  font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:#0f172a; background:#fff;
}
.badge.state{ border-color:#bfdbfe; background:#eff6ff; }
.badge.mixed{ border-color:#e9d5ff; background:#f5f3ff; }
.badge.private{ border-color:#bbf7d0; background:#ecfdf5; }

/* Сайдбар / шит */
aside{
  grid-column:2; grid-row: 2;
  position:relative; background:#fff; border-left:1px solid var(--border);
  box-shadow: inset 1px 0 0 rgba(0,0,0,.02);
  display:block;
}
aside .sheet-handle{ display:none; }
aside .sheet-close{ display:none; }
#card{
  position:relative;
  height:100%;
  overflow:auto; -webkit-overflow-scrolling: touch;
  padding:16px;
}

/* Карточка — строгая структура */
.card{ display:flex; flex-direction:column; gap:14px; }
.country-name {
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
}
.hint{ color:#64748b; }

.apps-overview{ display:flex; flex-wrap:wrap; gap:6px; }
.app-chip{ padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; font-weight:600; font-size:12px; }

.entry{
  border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:var(--shadow);
  padding:10px 12px; display:flex; flex-direction:column; gap:8px;
}
.entry-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.entry-title{ font-weight:800; }
.entry-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.entry .section{ display:grid; grid-template-columns: 96px 1fr; column-gap:10px; row-gap:6px; }
.entry .section .label{ color:#64748b; font-size:12px; }
.entry .section .value{ color:#0f172a; font-size:14px; }
.entry .facts{ padding-left:16px; margin:0; }
.entry .facts li{ margin:4px 0; }
.entry .facts a{ color:#2563eb; text-decoration:none; }
.entry .facts a:hover{ text-decoration:underline; }

.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.hr{ height:1px; background:var(--border); margin:6px 0; }
.small{ font-size:12px; color:#475569; }

.status-row{ display:flex; align-items:center; gap:8px; }
.status-dot{ width:8px; height:8px; border-radius:50%; }
.status-allowed{ background:#10b981; }
.status-restricted{ background:#f59e0b; }
.status-banned{ background:#ef4444; }
.status-unknown{ background:#94a3b8; }

.footer-note{
  color:#475569; border:1px dashed var(--border); background:#fff; padding:10px 12px;
  border-radius:12px; box-shadow:var(--shadow);
}



/* Дополнительно */
.dim{ opacity:.35; }


/* Геймификация - счетчики стран */
#stat {
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  box-shadow: var(--shadow);
  width: max-content;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.total-countries {
  color: #0f172a;
}

.opened-countries {
  color: #059669;
}

.remaining-countries {
  color: #dc2626;
}

/* Анимация при открытии страны */
.country-opened {
  filter: drop-shadow(0 0 8px #10b981) brightness(1.2);
  transition: filter 0.5s ease;
}




/* Мобайл: правый сайдбар = нижний шит */
@media (max-width: 960px){
  body{
      display: block;              /* убираем grid, чтобы aside не тянул ширину */
      max-width: 100%;             /* не даём body быть шире вьюпорта */
      overflow-x: hidden;          /* режем горизонтальный скролл */
        -webkit-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        touch-action: manipulation;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
        /* Для iOS Safari */
        -webkit-overflow-scrolling: auto;
      }
  .add-btn-text {
    display: none;
  }
  .add-btn-icon {
    display: inline;
  }
  #map-stage {
     touch-action: none;
      /* touch-action: pan-x pan-y pinch-zoom; */
  }
  #map-stage svg {
     touch-action: none;
    /* touch-action: pan-x pan-y pinch-zoom; */
    /* pointer-events: none; */
  }
  #map-stage svg #zoom-group{
    transition: transform .15s var(--ease);
    touch-action: none;
    pointer-events: all;
    /* transform-origin: 50% 50%; */
  }
  #map-wrap {
    min-height: 300px;
    height: 50vh; /* карта занимает половину экрана */
  }
  aside {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 65dvh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    box-shadow: 0 -16px 40px rgba(2,6,23,.16), 0 -4px 16px rgba(2,6,23,.08);
    transform: translateY(105%);
    transition: transform .24s var(--ease);
    background: #fff;
    z-index: 9;
  }
  aside.open { transform: translateY(0); }

  aside .sheet-handle {
    display: block;
    width: 56px;
    height: 6px;
    border-radius: 999px;
    background: #cbd5e1;
    margin: 8px auto 12px auto;
    cursor: grab;
  }

  aside .sheet-close {
    width: 42px; height: 42px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fff;
    display: grid; place-items: center;
    font-size: 18px; font-weight: 700; line-height: 1;
    position: absolute; top: 8px; right: 10px;
    padding: 4px 8px;
    cursor: pointer;
    box-shadow: var(--shadow);
  }

  #card { padding: 12px 14px 18px; overflow-x: hidden; }

    .legend, .controls {
      max-width: 100%; /* не вылезают за край */
      overflow: hidden;
    }

    .legend { left: 10px; bottom: 10px; }
    .controls { right: 10px; top: 10px; }

    #stat {
      align-items: center;
      font-size: 12px;
    }
}


@media (max-width: 480px){
  .entry .section{ grid-template-columns: 1fr;
  }
  #map-wrap {
    min-height: 240px;
    height: 48vh;
  }
}

/* подписи стран, которые мы дорисовываем сами */
.map-label{
  font: 700 8px/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  fill:#6b7280;
  letter-spacing:.6px;
  text-transform:uppercase;
  paint-order: stroke;
  stroke:#fff; stroke-width:2; stroke-linejoin:round;
}
@media (min-width: 1200px){
  .map-label{ font-size:10px; }
}