/* Фирменная палитра АО «ЭР-Телеком Холдинг» (гайдбук 2025):
   #1979E7 синий, #003288 тёмно-синий, #0F1053 ночной, #FBAC00 жёлтый,
   #FFFFFF, #F7F7F7, #D8D6DC. Других цветов в интерфейсе нет.
   Фирменный шрифт CoFo Sans (платный) → веб-аналог Golos Text. */
:root{
  --blue:#1979e7; --deep:#003288; --night:#0f1053; --gold:#fbac00;
  --paper:#f7f7f7; --grey:#d8d6dc;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-user-drag:none}
img{-webkit-user-drag:none; user-select:none; pointer-events:none}
html,body{height:100%}
body{
  margin:0; background:var(--night); color:#fff; overflow:hidden; touch-action:manipulation;
  font-family:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer}
[hidden]{display:none !important}

/* фон: только фирменные синие */
.bg{position:fixed; inset:0; z-index:0; overflow:hidden;
  background:linear-gradient(180deg,#0f1053 0%,#0b1a63 52%,#003288 100%)}
.bg span{position:absolute; border-radius:50%; filter:blur(110px); opacity:.5}
.bg .g1{width:60vmax; height:60vmax; left:-18vmax; top:-22vmax; background:#1979e7; opacity:.34}
.bg .g2{width:52vmax; height:52vmax; right:-16vmax; bottom:-20vmax; background:#003288; opacity:.6}

/* экраны */
.screen{position:fixed; inset:0; z-index:1; display:flex; flex-direction:column;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; transform:scale(.99);
  transition:opacity .55s var(--ease), transform .55s var(--ease), visibility .55s}
body.s-intro .intro, body.s-map .map{opacity:1; visibility:visible; transform:none}
body.s-map .intro{transform:scale(1.04)}
body.s-intro .map{transform:scale(.97)}

/* заставка */
.intro{align-items:center; justify-content:center; text-align:center}
.intro-in{display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.7vh,20px); max-width:900px}
.intro-in>*{animation:rise .7s var(--ease) both}
.intro-in>*:nth-child(2){animation-delay:.07s}
.intro-in>*:nth-child(3){animation-delay:.14s}
.intro-in>*:nth-child(4){animation-delay:.2s}
.intro-in>*:nth-child(5){animation-delay:.26s}
.intro-in>*:nth-child(6){animation-delay:.34s}
.intro-in>*:nth-child(7){animation-delay:.42s}
@keyframes rise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
/* охранное поле логотипа — не меньше высоты знака по кругу */
.brand{height:clamp(26px,3.6vh,42px); padding:0; margin-bottom:clamp(8px,2.4vh,24px)}
.fest{margin:0; font-size:clamp(11px,1.5vh,15px); letter-spacing:.22em; text-transform:uppercase; color:#a9c4f2; font-weight:600}
.ttl{margin:0; font-weight:800; line-height:1; letter-spacing:-.01em; text-transform:uppercase;
  font-size:clamp(28px,min(8.2vh,8.6vw),82px)}
.rule{display:block; width:clamp(60px,9vh,110px); height:5px; border-radius:3px; background:var(--gold)}
.sub{margin:0; max-width:34ch; color:#cfdcf7; font-size:clamp(14px,2vh,19px); line-height:1.4}
.langbig{display:flex; gap:12px; margin-top:clamp(4px,1.4vh,14px)}
.langbig button{display:flex; flex-direction:column; align-items:center; gap:1px; min-width:106px;
  padding:12px 20px; border-radius:14px; border:1.5px solid rgba(255,255,255,.28); background:transparent;
  color:#fff; transition:.25s var(--ease)}
.langbig button b{font-size:19px; font-weight:700; letter-spacing:.04em}
.langbig button span{font-size:11.5px; color:#adc2ea}
.langbig button.on{background:var(--blue); border-color:var(--blue)}
.langbig button.on span{color:#dbe8ff}
.cta{display:inline-flex; align-items:center; gap:12px; margin-top:clamp(6px,2vh,20px);
  padding:16px 32px; border:0; border-radius:14px; color:var(--night); font-size:clamp(15px,2vh,19px); font-weight:700;
  background:#fff; transition:.25s var(--ease)}
.cta svg{width:22px; height:22px; transition:transform .3s var(--ease)}
.cta:hover{background:var(--gold)}
.cta:hover svg{transform:translateX(4px)}
.cta:active{transform:scale(.98)}

/* карта */
.map{gap:10px}
.bar{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.bar-t{flex:1; min-width:0; text-align:center; line-height:1.2}
.bar-t b{display:block; font-size:clamp(14px,2.1vh,19px); font-weight:700; text-transform:uppercase; letter-spacing:.03em}
.bar-t span{font-size:clamp(11px,1.5vh,13px); color:#9fb5e2}
.bar-r{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.ghost{width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px;
  border:1.5px solid rgba(255,255,255,.26); background:transparent; color:#fff; transition:.2s}
.ghost svg{width:21px; height:21px}
.ghost:hover{background:rgba(255,255,255,.12)}
.ghost:active{transform:scale(.95)}
.lang{display:flex; gap:2px; background:rgba(255,255,255,.1); border-radius:12px; padding:3px}
.lang button{border:0; background:transparent; color:#fff; font-size:13px; font-weight:600; padding:9px 13px; border-radius:9px; transition:.2s}
.lang button.on{background:var(--blue)}

.boardwrap{flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center}
.board{position:relative; display:flex; max-height:100%; max-width:100%;
  border-radius:14px; overflow:hidden; background:#0b1140;
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12);
  animation:boardin .8s var(--ease) both}
@keyframes boardin{from{opacity:0; transform:translateY(18px) scale(.985)}to{opacity:1; transform:none}}
.boardimg{display:block; width:auto; height:auto; max-width:100%; max-height:100%; opacity:0; transition:opacity .7s var(--ease)}
.boardimg.ready{opacity:1}

/* подписи служебных зон поверх карты */
.zonelabel{position:absolute; z-index:2; padding:4px 9px; border-radius:7px; background:rgba(15,16,83,.5);
  border:1px solid rgba(255,255,255,.16); font-size:clamp(8.5px,1.2vh,11px); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:#e6edff; white-space:nowrap; backdrop-filter:blur(4px)}
.zonelabel.entry{left:50%; bottom:2.5%; transform:translateX(-50%); background:rgba(251,172,0,.85); color:var(--night); border-color:transparent}

/* кнопки зон — компактные и полупрозрачные, чтобы не закрывать стенд */
.pins{position:absolute; inset:0; z-index:3}
.pin{position:absolute; transform:translate(-50%,-50%); display:block; line-height:0;
  border:0; background:transparent; padding:0; animation:pinin .5s var(--ease) both}
@keyframes pinin{from{opacity:0; transform:translate(-50%,-42%) scale(.85)}to{opacity:1; transform:translate(-50%,-50%) scale(1)}}
.pin .dot{position:relative; width:clamp(52px,8.8vh,76px); height:clamp(52px,8.8vh,76px); border-radius:50%;
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:clamp(23px,3.7vh,31px);
  background:rgba(25,121,231,.55); border:1.5px solid rgba(255,255,255,.75); backdrop-filter:blur(3px);
  box-shadow:0 4px 14px rgba(6,10,50,.4);
  transition:background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease)}
.pin .dot::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5);
  animation:ripple 3.2s ease-out infinite}
.pin .cap{position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%);
  font-size:clamp(10px,1.45vh,13px); font-weight:500; color:rgba(255,255,255,.92); white-space:normal;
  width:max-content; max-width:none; text-align:center; line-height:1.22; padding:4px 9px; border-radius:6px; background:rgba(15,16,83,.5); backdrop-filter:blur(3px);
  transition:background .25s var(--ease)}
.pin.up .cap{top:auto; bottom:calc(100% + 7px)}
.pin .cap .ln{display:block; white-space:nowrap}
.pin:hover .dot,.pin.hit .dot{background:var(--gold); border-color:#fff; color:var(--night); transform:scale(1.12)}
.pin:hover .cap,.pin.hit .cap{background:rgba(15,16,83,.85)}
@keyframes ripple{0%{transform:scale(1); opacity:.55}70%{transform:scale(1.45); opacity:0}100%{opacity:0}}
.tip{flex:0 0 auto; margin:0; text-align:center; font-size:clamp(11px,1.5vh,13.5px); color:#9fb5e2}

/* карточка зоны */
.zone{position:fixed; inset:0; z-index:20; display:grid; place-items:end center;
  background:rgba(6,10,50,.6); backdrop-filter:blur(8px); animation:fadein .35s var(--ease) both}
@media(min-height:640px) and (min-width:700px){.zone{place-items:center}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.zone-card{position:relative; width:min(700px,100%); max-height:94svh; overflow:auto; overscroll-behavior:contain;
  background:linear-gradient(180deg,#12206e,#0f1053); border:1px solid rgba(255,255,255,.16);
  border-radius:20px 20px 0 0; box-shadow:0 -20px 70px rgba(0,0,0,.55); animation:cardup .5s var(--ease) both}
@media(min-height:640px) and (min-width:700px){.zone-card{border-radius:20px; animation-name:cardin}}
@keyframes cardup{from{opacity:0; transform:translateY(60px)}to{opacity:1; transform:none}}
@keyframes cardin{from{opacity:0; transform:translateY(24px) scale(.96)}to{opacity:1; transform:none}}
.zone-media{position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:19px 19px 0 0; background:#0b1140}
.zone-media::before{content:""; position:absolute; inset:0; background:linear-gradient(110deg,#0f1053,#12206e);
  opacity:1; transition:opacity .5s var(--ease)}
.zone-media.ready::before{opacity:0}
.zone-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,#0f1053 99%)}
.zone-media img{width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.05);
  transition:opacity .8s var(--ease), transform 1.2s var(--ease)}
.zone-media.ready img{opacity:1; transform:scale(1)}
.close{position:absolute; top:12px; right:12px; width:42px; height:42px; border-radius:50%; border:0; z-index:3;
  background:rgba(15,16,83,.7); color:#fff; display:grid; place-items:center; backdrop-filter:blur(6px)}
.close svg{width:19px; height:19px}
.zone-body{padding:16px 20px 20px; margin-top:-34px; position:relative; z-index:2}
.zhead{display:flex; align-items:center; gap:10px; margin-bottom:10px; animation:rise .45s .08s var(--ease) both}
.znum{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; font-weight:800; font-size:19px;
  color:var(--night); background:var(--gold)}
.zkicker{font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#a9c4f2}
.zone-body h2{margin:0 0 8px; font-size:clamp(20px,3.1vh,29px); font-weight:700; line-height:1.12; letter-spacing:-.01em;
  animation:rise .45s .14s var(--ease) both}
.zone-body p{margin:0 0 14px; font-size:clamp(14px,1.95vh,16.5px); line-height:1.5; color:#cfdcf7;
  animation:rise .45s .2s var(--ease) both}
.zact{display:block; padding:13px 15px; border-radius:14px; background:rgba(25,121,231,.16);
  border:1px solid rgba(25,121,231,.55); font-size:clamp(13.5px,1.85vh,15.5px); line-height:1.45; color:#fff;
  animation:rise .45s .26s var(--ease) both}
.zact b{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:5px}
.zone-nav{display:flex; gap:10px; margin-top:16px; animation:rise .45s .32s var(--ease) both}
.ghost.wide{width:auto; flex:1; padding:0 16px; font-size:14.5px; font-weight:600}
.prim{flex:1.4; border:0; border-radius:12px; padding:14px 16px; font-size:14.5px; font-weight:700; color:var(--night);
  background:#fff; transition:.25s var(--ease)}
.prim:hover{background:var(--gold)}
.prim:active,.ghost.wide:active{transform:scale(.98)}

/* широкий экран: карточка панелью справа, карта остаётся видна */
@media (min-width:1000px) and (orientation:landscape){
  .zone{place-items:center end; background:linear-gradient(90deg,transparent 34%,rgba(6,10,50,.72)); backdrop-filter:none}
  .zone-card{width:min(440px,40vw); margin-right:clamp(16px,4vw,64px); max-height:92svh}
  body.zoneopen .boardwrap{transform:translateX(-15%) scale(.94)}
}
.boardwrap{transition:transform .55s var(--ease)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important}}