/* === base === */
*{box-sizing:border-box;line-height:1.2}
@font-face{
  font-family:"Inter Bold";
  src:url("../fonts/6808f299811c1703a1cacc77ced26c5d.eot");
  src:url("../fonts/6808f299811c1703a1cacc77ced26c5d.eot?#iefix") format("embedded-opentype"),
      url("../fonts/6808f299811c1703a1cacc77ced26c5d.woff2") format("woff2"),
      url("../fonts/6808f299811c1703a1cacc77ced26c5d.woff") format("woff"),
      url("../fonts/6808f299811c1703a1cacc77ced26c5d.ttf") format("truetype"),
      url("../fonts/6808f299811c1703a1cacc77ced26c5d.svg#Inter Bold") format("svg");
}
html,body{width:100vw;height:100vh;font-family:"Inter Bold",Arial;overflow: hidden;touch-action: manipulation;user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}

/* palette */
:root{
  --region-base:#CCCCCC;     /* фон карты */
  --region-has:#DCB95A;      /* регионы с данными */
  --region-hover:#9E8450;    /* жёлтый для hover/active */
  --ink:#030404;             /* замена тёмно-зелёного текста */
  --muted:#030404;           /* замена подписей */
  --card-bg:#ffffff;
  --card-shadow:0 24px 80px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.12);
}

/* === layout === */
.map{
  width:100vw;height:100vh;position:relative;overflow:hidden;
  background:url("../img/bg.jpg") center/cover no-repeat; cursor: grab;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.map__logo,.map__title,.map__zoom,.map__qr,.map__russia,.map__bottom{z-index:2}

.map__logo{height:75px;position: fixed;bottom:61px;left:49px;transition:.3s all;}
.map__logo img{height:100%}
.map.is-sleeping .map__logo {opacity: 0;visibility: hidden;}

.map__title,
.map__title-sleeping {
  color:#030404;text-align:center;font-size:80px;letter-spacing:-.64px;
  position:fixed;left:50%;;top:48px;transform: translateX(-50%);
	transition: .3s all;
}
.map__title-sleeping {
	color: #DCB95A;
	text-align: center;
	font-size: 120px;
	font-style: normal;
	font-weight: 700;
	line-height: 72%;
	letter-spacing: -3.6px;
	max-width: 1400px;
    min-width: 1400px;
    padding-bottom: 30px;
    padding-left: 50px;
	padding-top: 10px;
	background:url("../img/z.png") no-repeat;
}
.map.is-sleeping .map__title{opacity: 0;visibility: hidden;}
.map:not(.is-sleeping) .map__title-sleeping{opacity: 0;visibility: hidden;}

.map__qr{width:99px;position: fixed;right:44px;bottom:37px;transition:.3s all}
.map__qr img{width:100%}
.map.is-sleeping .map__qr{opacity: 0;visibility: hidden;}

.map__russia{position:fixed;left:50%;transform:translateX(-50%);bottom:49px;z-index:3}
.map__russia span{
  padding:32px;background:#3D7AAE;color:#fff;font-size:28px;letter-spacing:-.42px;display:block;transition: .3s all;
}
.map__russia:active span{
	background:#295275;
}

/* базово — всегда слева */
.map__zoom{
  position: fixed;
  top: 50%;
  left: 53px;
  right: auto;                 /* важно */
  transform: translateY(-50%);
  display: inline-flex;
  flex-direction: column;
  gap: 22px;
  width: auto;
  align-items: flex-start;      /* чтобы кнопки не растягивали ширину */
}

.map__zoom-item{
  min-height:72px;max-height:72px;width:72px;background:#030404;
  display:flex;align-items:center;justify-content:center;cursor:pointer
}
.map__zoom-item svg{width:40%;height:40%;display:block}
.map__zoom-item:active {
	background: var(--region-has); 
}

/* === карта === */
.map__init{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action: manipulation;}
.map.is-sleeping .map__init {background: url("../img/mapPreload.png") center no-repeat;background-size:70%;}
.map.is-sleeping .sevastopol-point {display: none;}
.rf-map{position:relative;min-width:85vw;margin:auto;transform-origin:0 0;touch-action: manipulation;}
.rf-map svg{width:100%;height:100%;touch-action: manipulation;}
.rf-map path{stroke:#fff;stroke-width:1;stroke-linejoin:round;touch-action: manipulation;}
.rf-map .region-point{stroke:#fff;stroke-width:1;fill:#fff;cursor:pointer;transition:fill 0.2s ease, stroke 0.2s ease, transform 0.2s ease;transform-origin:center;}
.rf-map .region-point:hover{fill:#ff6b6b;stroke:#ff6b6b;transform:scale(1.15);}

/* Восстановление тач-событий после пробуждения */
.map:not(.is-sleeping) .rf-map,
.map:not(.is-sleeping) .rf-map svg,
.map:not(.is-sleeping) .rf-map path {
  touch-action: manipulation;
  pointer-events: auto;
}

/* заливки */
.rf-map [data-code]{fill:var(--region-base);transition:fill .15s ease,opacity .15s ease}
.rf-map [data-code].has-data{fill:var(--region-has);cursor:pointer}
.rf-map [data-code].has-data:hover{fill:var(--region-hover)}
.rf-map [data-code].active{fill:var(--region-hover)!important}

/* подсказка с названием региона (левый верх угла карты) */
.map__hover-name{
  position:fixed;left:38px;top:112px;z-index:3;
  padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.9);
  color:var(--ink);font-size:24px;letter-spacing:-.3px;box-shadow:0 6px 18px rgba(0,0,0,.08);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:.15s ease;
}
.map__hover-name.is-visible{opacity:1;transform:translateY(0)}

/* === Модалка региона (карточка в HTML) === */
.region-modal{
  position:absolute; z-index:4;
  width:720px; max-width:calc(100% - 48px);
  background:var(--card-bg); box-shadow:var(--card-shadow); padding:26px;

  display:block;
  opacity:0;
  transform:translateY(10px) scale(.97);
  pointer-events:none;
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(.2,.7,0,1);
  will-change: opacity, transform;
}
.region-modal.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.region-modal.dock-left{left:24px;right:auto}
.region-modal.dock-right{right:24px;left:auto}

/* заголовок и иконка */
.region-modal__top{display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
gap: 37px;}
.region-modal__icon{width:47px;height:47px;flex:0 0 47px}
.region-modal__icon img{width: 100%;}
.region-modal__title{margin:0;font-size:54px;line-height:1.05;color:var(--ink);letter-spacing:-.8px;margin-bottom:66px}

/* крестик внутри карточки */
.region-modal__close{
  position:absolute;right:27px;top:27px;width:47px;height:47px;border:0;display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
  background:#030404;cursor:pointer
}
.region-modal__close:hover{filter:brightness(.95)}

/* строки */
.district-row{display:flex;width: 100%;justify-content:space-between;gap:16px;margin:12px 0;font-size: 21px;}
.district-row__label{color:var(--ink)}
.district-row__value{color:#DCB95A;font-weight:800;text-align: right;}
.district-row__value .unit{margin-left:8px;color:#030404;font-weight:700}
.district-sep{border:0;border-top:1px solid rgba(0,0,0,.08);margin:14px 0}
.region-modal__group-title{color:var(--ink);opacity:.7;margin:10px 0 4px}

/* акцентные цвета процентов (как в макете) */
.found-row.p3 .found-row__value{color:#DCB95A}
.found-row.p4 .found-row__value{color:#DCB95A}
.found-row.p5 .found-row__value{color:#DCB95A}

.district-found{
  display:grid;
  grid-template-columns:auto 1fr; /* слева "Выявлено:", справа список */
  gap:24px;
  align-items:start;
	font-size: 21px;
}
.district-found__left{
  font-weight:700;
  padding-top:2px; /* выровнять с первой строкой справа */
}
.district-found__right{
  display:grid;
  row-gap:18px;
  justify-items:end;   /* всё вправо */
  text-align:right;
}
.found-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-end;
}
.found-row__label{ font-weight:700; }
.found-row__value{ font-weight:700; }


/* Вариант для «Данные по России», карточка открывается над кнопкой */
.region-modal--russia{bottom:calc(37px + 56px);left:50%;transform:translateX(-50%)} /* 56px ~ высота кнопки */
@media (max-width:680px){
  .region-modal{left:50%!important;right:auto!important;transform:translateX(-50%)}
}

/* ===== Idle-modal (из html, без изменений логики) ===== */
:root{
  --idle-bg:#ffffff;--idle-text:#000;--idle-track:#e8efe9;--idle-accent:#DCB95A;--idle-btn:#B8AA96;--idle-btn-text:#8a7a68;
}
.idle-modal{
  position:fixed; inset:0; z-index:9999;

  /* вместо display:none — анимируем прозрачность и клики */
  display:block;
  opacity:0;
  pointer-events:none;
  transition: opacity 240ms ease;
}
.idle-modal.is-open{
  opacity:1;
  pointer-events:auto;
}
.idle-modal__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.35);
  opacity:0; transition:opacity 240ms ease;
}
.idle-modal.is-open .idle-modal__backdrop{ opacity:1; }
.idle-modal__card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateY(8px) scale(.97);
  width:670px; background:var(--idle-bg); padding:89px 0 69px;
  box-shadow:0 10px 36px rgba(0,0,0,.25); text-align:center;
  opacity:0;
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(.2,.7,0,1);
}
.idle-modal.is-open .idle-modal__card{
  opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1);
}
.idle-modal__title{color: #030404;
font-size: 43px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.64px;margin-bottom:47px;}
.idle-modal__ring{
  position:relative;
  width:171px; height:171px;
  margin:0 auto 64px;
}
/* Слои кольца */
.idle-ring__track,
.idle-ring__progress{
  position:absolute; inset:0; border-radius:50%;
  /* Маска-«пончик»: показываем только 60..64px радиусы */
  -webkit-mask: radial-gradient(circle 85px at 50% 50%,
                                transparent 60px,
                                #fff 80px 85px,
                                transparent 64px);
          mask: radial-gradient(circle 64px at 50% 50%,
                                transparent 80px,
                                #fff 80px 85px,
                                transparent 85px);
}

.idle-ring__track{
  background: conic-gradient(from 90deg, var(--idle-track) 0 360deg);
}

.idle-ring__progress{
  background: conic-gradient(from 90deg,
                             var(--idle-accent) 0 var(--p,0deg),
                             transparent        var(--p,0deg) 360deg);
}

.idle-modal__ring-number{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
color: #000;
text-align: center;
font-size: 43px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.64px;
}
.idle-modal__btn{
  display:inline-block;margin-top:6px;padding:21px 0;border:2px solid var(--idle-btn);
  background:transparent;color: #B8AA96;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.36px;transition:.2s ease;
	min-width: 293px;text-align: center;cursor: pointer;
}
.idle-modal__btn:hover{background:var(--idle-btn);color:#fff}

/* --- SLEEP TRANSITIONS --- */

/* Плавность у слоёв карты (контуры + границы) */
.rf-map svg #regions,
.rf-map svg .regions,
.rf-map svg [data-layer="regions"],
.rf-map svg #borders,
.rf-map svg .borders,
.rf-map svg [data-layer="borders"]{
  transition: transform 420ms ease, opacity 420ms ease;
  transform-origin: 50% 50%;
}

/* Фото сна (image в SVG) */
.rf-map svg [data-sleep-photo]{
  opacity: 0;
  transition: opacity 420ms ease;
}

/* Состояние сна: карта слегка увеличивается и растворяется,
   фото внутри контуров проявляется */
.map.is-sleeping .rf-map svg #regions,
.map.is-sleeping .rf-map svg .regions,
.map.is-sleeping .rf-map svg [data-layer="regions"],
.map.is-sleeping .rf-map svg #borders,
.map.is-sleeping .rf-map svg .borders,
.map.is-sleeping .rf-map svg [data-layer="borders"]{
  transform: scale(1.04);
  opacity: 0;
}

.map.is-sleeping .rf-map svg [data-sleep-photo]{
  opacity: 1;
}

/* мягко прячем/показываем кнопки при сне */
.map .map__zoom, .map .map__russia{ transition: opacity 240ms ease; }

/* Плавный zoom/fade карты в режиме сна */
.rf-map{transition:transform .35s ease,opacity .35s ease;}
.map.is-sleeping {cursor: default;}
.map.is-sleeping .rf-map{transform:scale(1.03);opacity:.92;}

/* Проявление фото сна управляем КЛАССОМ, а не inline-стилем */
#sleepImageClipped{
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none; /* клики ловит прямоугольник сверху */
}
.map.is-sleeping #sleepImageClipped{opacity:1 !important;} /* перебивает случайный inline */

/* Плавный scale+fade контейнера карты */
.map__init{
  will-change: transform, opacity;
  transition: transform 420ms cubic-bezier(.22,.61,.36,1),
              opacity  420ms cubic-bezier(.22,.61,.36,1);
}
.map.is-sleeping .map__init{
  transform: scale(1.06);  /* было 1.03 */
  opacity: .90;            /* было .92 */
}

/* Плавное прячем/показываем UI */
.map__zoom, .map__russia, .map__search {
  transition: opacity 320ms cubic-bezier(.22,.61,.36,1),
              transform 320ms cubic-bezier(.22,.61,.36,1);
}
.map.is-sleeping .map__zoom,
.map.is-sleeping .map__russia,
.map.is-sleeping .map__search {
  opacity: 0;
  transform: translateY(8px); /* было 6px */
  pointer-events: none;
}

.map.is-sleeping .virtual-keyboard {
  display: none !important;
}

.map__search {
	position: fixed;
	top: 40px;
	right: 40px;
	z-index: 1;
}

.map__search-form {
	position: relative;
	border: 1px solid #CCC;
	background: #FFF;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
	-ms-align-items: center;
	align-items: center;
	gap: 10px;
	height: 72px;
	padding: 0 32px;
	position: relative;
}

.map__search-form__button {
	width: 43px;
	height: 43px;
	border: none;
	background: none;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
	-ms-align-items: center;
	align-items: center;
	justify-content: center;
}

.map__search-form__input {
	color: #030404;
	font-size: 33px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.32px;
	border: none;
	background: none;
	padding-right: 40px;
}

.map__search-form__input:focus {
	outline: none;
}

.map__search-form__clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:0; background:transparent; cursor:pointer;
  display:none; align-items:center; justify-content:center; border-radius:50%;
}
.map__search-form__clear:hover { background: rgba(0,0,0,.06); }
.map__search-form__clear.is-visible { display:flex; }

.map__search-results{
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  margin-top: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
  border-radius: 10px;
  max-height: 300px;
  overflow: auto;
  display: none;
}
.map__search-results.is-open{ display: block; }
.map__search-results .map__search-empty{
  padding: 10px 0;
  color: #667085;
  font-size: 22px;
	text-align: center;
}

.map__search-item{
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: #030404;
	font-size: 22px;
}
.map__search-item:hover,
.map__search-item.is-active{
  background: #FFF7E1;
}

.map__search-item mark{
  background: transparent;
  color: #9E8450;           /* золотой акцент */
  font-weight: 700;
}

/* ===== Стили клавиатуры ===== */
.virtual-keyboard {
    position: fixed;
    top: 25%;
    right: 40px;
    width: 600px;
    background: #f9f9f9;
    border: 2px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    padding: 12px;
    display: none;
    font-family: "Arial", sans-serif;
    user-select: none;
}

.virtual-keyboard .vk-row {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.virtual-keyboard .vk-key {
  flex: 1 0 10%;
  margin: 3px;
  padding: 16px 0;
  text-align: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  font-size: 28px;
  transition: background 0.15s;
}

.virtual-keyboard .vk-key:active {
  background: #e0e0e0;
}

.virtual-keyboard .vk-key.wide {
  flex: 2 0 20%;
  font-size: 24px;
}

.virtual-keyboard .vk-close {
  background: #ff5c5c;
  color: #fff;
  font-weight: bold;
}

.virtual-keyboard .vk-close:active {
  background: #e04c4c;
}

.history {
	position: fixed;
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 1158px;
	min-width: 1158px;
	opacity: 0;
	visibility: hidden;
	transition: .3s all;
}

.history img {
	max-width: 100%;
	min-width: 100%;
}

.map.is-sleeping .history {
	opacity: 1;
	visibility: visible;
}

/* Дополнительная защита от масштабирования и выделения */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Разрешаем выделение текста только для интерактивных элементов */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Предотвращение масштабирования на мобильных устройствах */
@media screen and (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  
  body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
}