/* FOXYGAMING — оформление новой версии сайта.
 *
 * Основа тёмная и холодная: клуб работает круглосуточно, и вечер — его главное
 * время. Оранжевый берём фирменный, лисий, и тратим скупо: он отмечает то, что
 * нажимают, и ничего больше. Холодный голубой — свет мониторов, он отвечает за
 * атмосферу и живые данные.
 *
 * Шрифты свои, лежат рядом: Oswald узкий для заголовков и цифр, Exo 2 для
 * текста. Никаких внешних служб — страница обязана открываться и без сети.
 */

/* ─────────────────────── шрифты ─────────────────────── */
@font-face{font-family:Oswald;src:url(../font/Oswald-600-cyr.woff2) format('woff2');
  font-weight:600;font-display:swap;unicode-range:U+0400-04FF,U+2116}
@font-face{font-family:Oswald;src:url(../font/Oswald-600-lat.woff2) format('woff2');
  font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Oswald;src:url(../font/Oswald-500-cyr.woff2) format('woff2');
  font-weight:500;font-display:swap;unicode-range:U+0400-04FF,U+2116}
@font-face{font-family:Oswald;src:url(../font/Oswald-500-lat.woff2) format('woff2');
  font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'Exo 2';src:url(../font/Exo2-400-cyr.woff2) format('woff2');
  font-weight:400;font-display:swap;unicode-range:U+0400-04FF,U+2116}
@font-face{font-family:'Exo 2';src:url(../font/Exo2-400-lat.woff2) format('woff2');
  font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'Exo 2';src:url(../font/Exo2-600-cyr.woff2) format('woff2');
  font-weight:600;font-display:swap;unicode-range:U+0400-04FF,U+2116}
@font-face{font-family:'Exo 2';src:url(../font/Exo2-600-lat.woff2) format('woff2');
  font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}

/* ─────────────────────── основа ─────────────────────── */
:root{
  --fon:      #060A12;
  --fon-2:    #0B1220;
  --fon-3:    #111C2E;
  --tekst:    #E9F0FB;
  --tekst-2:  #93A5C2;
  --tekst-3:  #5E708E;
  --oran:     #FF6A18;
  --oran-svet:#FF8B4D;
  --golub:    #3BC8FF;
  --svobodno: #38D68A;
  --zanyato:  #E5484D;
  --linia:    rgba(147,165,194,.15);
  --linia-2:  rgba(147,165,194,.08);
  --plavno:   .35s cubic-bezier(.4,0,.2,1);
  --shirina:  1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fon);color:var(--tekst);
  font:400 17px/1.6 'Exo 2',system-ui,-apple-system,'Segoe UI',sans-serif;
  overflow-x:hidden;                    /* поперечной прокрутки быть не должно */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:Oswald,'Exo 2',sans-serif;font-weight:600;
  letter-spacing:.005em;line-height:1.08;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}

:focus-visible{outline:2px solid var(--golub);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-999px;top:0;z-index:100;padding:.7rem 1.1rem;
  background:var(--oran);color:#fff;border-radius:0 0 8px 0}
.skip:focus{left:0}

.melko{font-size:.83rem;color:var(--tekst-3);line-height:1.5}

/* ─────────────────────── шапка ─────────────────────── */
.shapka{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1.5rem;
  padding:.7rem clamp(1rem,4vw,2.4rem);
  background:rgba(6,10,18,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linia-2);
}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex-shrink:0}
.logo img{width:34px;height:34px}
.logo span{font-family:Oswald;font-weight:500;font-size:1.02rem;letter-spacing:.09em}
.logo b{font-weight:600;color:var(--oran)}

.navig{display:flex;gap:1.6rem;margin-left:auto;font-size:.94rem}
.navig a{color:var(--tekst-2);text-decoration:none;transition:color var(--plavno);
  padding:.3rem 0;position:relative}
.navig a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--oran);transition:right var(--plavno)}
.navig a:hover{color:var(--tekst)}
.navig a:hover::after{right:0}

/* ─────────────────────── кнопки ─────────────────────── */
.knopka{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.5rem;border-radius:10px;text-decoration:none;
  font-family:Oswald;font-weight:500;font-size:1rem;letter-spacing:.03em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,background var(--plavno),border-color var(--plavno);
}
.knopka:active{transform:scale(.97)}
.knopka.glavnaya{background:var(--oran);color:#fff;
  box-shadow:0 8px 30px -12px rgba(255,106,24,.75);position:relative;overflow:hidden}
.knopka.glavnaya:hover{background:var(--oran-svet);
  box-shadow:0 12px 40px -12px rgba(255,106,24,.95);transform:translateY(-1px)}
/* Свет пробегает по кнопке при наведении — один раз, быстро. */
.knopka.glavnaya::after{content:"";position:absolute;top:0;bottom:0;width:45%;
  left:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transition:left .55s cubic-bezier(.22,.61,.36,1)}
.knopka.glavnaya:hover::after{left:120%}
.knopka.vtoraya{border-color:var(--linia);color:var(--tekst);background:rgba(255,255,255,.03)}
.knopka.vtoraya:hover{border-color:var(--golub);background:rgba(59,200,255,.07)}
.knopka.mini{padding:.5rem 1rem;font-size:.9rem;border-color:var(--linia);
  background:rgba(255,255,255,.03);flex-shrink:0}
.knopka.mini:hover{border-color:var(--oran)}

/* ─────────────────────── первый экран ─────────────────────── */
.pervyy{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(2.6rem,7vw,5.5rem) clamp(1rem,4vw,2.4rem) clamp(2rem,4vw,3rem)}
.pervyy-fon{position:absolute;inset:0;z-index:-2}
/* Снимок зала виден, а не угадывается: по заданию фотографии — главное
   доказательство качества. Затемняем ровно настолько, чтобы текст читался. */
.pervyy-fon img{width:100%;height:100%;object-fit:cover;opacity:.62;
  will-change:transform}
.pervyy-fon::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,10,18,.42) 0%,rgba(6,10,18,.66) 52%,var(--fon) 100%),
    linear-gradient(90deg,rgba(6,10,18,.78) 0%,rgba(6,10,18,.24) 62%,transparent 100%)}

/* Дыхание света: зал живой, в нём горят экраны.
   Только transform и opacity — браузер не пересчитывает разметку.
   Сдвиг за указателем приходит из кода переменными --mysh-x/--mysh-y. */
.pervyy-svet{position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(36% 36% at 24% 28%,rgba(255,106,24,.30),transparent 68%),
    radial-gradient(40% 40% at 76% 62%,rgba(59,200,255,.26),transparent 70%),
    radial-gradient(30% 30% at 52% 90%,rgba(120,80,255,.14),transparent 72%);
  transform:translate3d(calc(var(--mysh-x,0) * 18px),calc(var(--mysh-y,0) * 14px),0);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
  animation:dyhanie 20s ease-in-out infinite alternate}
@keyframes dyhanie{
  from{opacity:.78}
  to  {opacity:1}
}

/* Ближний слой: перспективная сетка пола. Даёт глубину, ради которой и
   держим три слоя вместо одного. */
.pervyy-setka{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  background-image:
    linear-gradient(rgba(59,200,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,200,255,.10) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,transparent 8%,#000 45%,transparent 92%);
  -webkit-mask-image:linear-gradient(180deg,transparent 8%,#000 45%,transparent 92%);
  transform:perspective(560px) rotateX(58deg) translate3d(calc(var(--mysh-x,0) * -10px),
            calc(28% + var(--mysh-y,0) * -8px),0) scale(1.8);
  transform-origin:50% 100%;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}

.pervyy-tekst{max-width:var(--shirina);margin:0 auto}
.nadzagolovok{font-family:Oswald;font-weight:500;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--golub);margin-bottom:1rem}
/* Заголовок первого экрана поясняет, а не соревнуется с числом свободных
   мест. Главное на экране — одно; если крупного два, главного нет. */
h1{font-size:clamp(2.1rem,6.4vw,4.3rem);margin-bottom:1rem}
.pervyy h1{font-size:clamp(1.45rem,3.4vw,2.35rem);line-height:1.18;
  font-weight:500;margin:0 0 1.4rem;max-width:34ch;color:var(--tekst-2)}
.pervyy h1 .vydel{color:var(--tekst)}
.vydel{color:var(--oran)}
.lid{font-size:clamp(1rem,2.2vw,1.2rem);color:var(--tekst-2);max-width:52ch;
  margin-bottom:1.8rem}

.knopki{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2.2rem}

.fakty{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:1px;margin:0;background:var(--linia-2);
  border:1px solid var(--linia-2);border-radius:12px;overflow:hidden}
.fakty>div{background:rgba(11,18,32,.72);padding:1rem 1.1rem}
.fakty dt{font-family:Oswald;font-weight:600;font-size:clamp(1.45rem,3.4vw,2rem);
  line-height:1;color:var(--tekst)}
.fakty dd{margin:.35rem 0 0;font-size:.85rem;color:var(--tekst-3);line-height:1.35}

/* ───────── живое ядро первого экрана ─────────
   Место под него занято сразу и не меняется, когда приходят данные, —
   поэтому вёрстка не прыгает. До ответа стоит прочерк, а не ноль. */
.pulse{display:grid;grid-template-columns:auto 1fr;grid-template-areas:
  "koltso glavnoe" "zony zony";
  gap:1.1rem 1.4rem;align-items:center;
  margin:.9rem 0 1.3rem;padding:1.3rem 1.5rem;border-radius:18px;
  background:linear-gradient(135deg,rgba(11,18,32,.82),rgba(11,18,32,.55));
  border:1px solid var(--linia);backdrop-filter:blur(10px);
  box-shadow:0 20px 60px -30px rgba(0,0,0,.9);
  max-width:640px}

.pulse-koltso{grid-area:koltso;position:relative;width:112px;height:112px;flex-shrink:0}
.pulse-koltso svg{width:100%;height:100%;transform:rotate(-90deg)}
.koltso-fon{fill:none;stroke:rgba(147,165,194,.16);stroke-width:7}
.koltso-linia{fill:none;stroke:var(--svobodno);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:327;stroke-dashoffset:327;
  filter:drop-shadow(0 0 7px rgba(56,214,138,.75));
  transition:stroke-dashoffset .75s cubic-bezier(.22,.61,.36,1),stroke .5s ease}
.koltso-dolya{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font:600 1.02rem/1 Oswald,sans-serif;color:var(--tekst-2);
  font-variant-numeric:tabular-nums}

.pulse-glavnoe{grid-area:glavnoe;min-width:0}
.pulse-chislo{font-family:Oswald;font-weight:600;line-height:.92;
  font-size:clamp(3.2rem,9vw,5.2rem);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--svobodno);
  text-shadow:0 0 32px rgba(56,214,138,.5);
  min-height:1ch}
.pulse-podpis{font-size:1rem;color:var(--tekst);margin-top:.15rem;line-height:1.25}
.pulse-vsego{font-size:.86rem;color:var(--tekst-3);margin-top:.2rem}

.pulse-zony{grid-area:zony;list-style:none;margin:0;padding:.9rem 0 0;
  border-top:1px solid var(--linia-2);
  display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.pulse-zony li{display:grid;grid-template-columns:auto auto;gap:0 .4rem;
  align-items:baseline;min-width:0}
.pz-imya{grid-column:1/-1;font:500 .7rem/1 Oswald,sans-serif;letter-spacing:.14em;
  color:var(--tekst-3);margin-bottom:.25rem}
.pz-chislo{font:600 1.35rem/1 Oswald,sans-serif;color:var(--tekst);
  font-variant-numeric:tabular-nums}
.pz-iz{font-size:.76rem;color:var(--tekst-3)}
.pz-polosa{grid-column:1/-1;height:4px;border-radius:2px;margin-top:.4rem;
  background:rgba(147,165,194,.14);overflow:hidden}
.pz-polosa i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--svobodno),#7BE8B8);
  box-shadow:0 0 10px rgba(56,214,138,.6);
  transition:width .7s cubic-bezier(.22,.61,.36,1)}

/* Появление: быстрый набор масштаба со вспышкой свечения.
   Число появляется сразу верным — набега с нуля нет. */
.pulse.prishlo .pulse-chislo{animation:vspyshka .5s cubic-bezier(.22,.61,.36,1)}
@keyframes vspyshka{
  0%  {opacity:0;transform:scale(.82);text-shadow:0 0 0 rgba(56,214,138,0)}
  55% {opacity:1;transform:scale(1.04);text-shadow:0 0 54px rgba(56,214,138,.9)}
  100%{opacity:1;transform:scale(1);text-shadow:0 0 32px rgba(56,214,138,.5)}
}
.pulse.prishlo .pulse-zony li{animation:vyezd .45s cubic-bezier(.22,.61,.36,1) backwards}
.pulse.prishlo .pulse-zony li:nth-child(1){animation-delay:.12s}
.pulse.prishlo .pulse-zony li:nth-child(2){animation-delay:.20s}
.pulse.prishlo .pulse-zony li:nth-child(3){animation-delay:.28s}
@keyframes vyezd{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* Ошибка: спокойный вид, без ложных нулей. */
.pulse.beda .pulse-chislo{color:var(--tekst-3);text-shadow:none;font-size:clamp(1.5rem,4vw,2rem)}
.pulse.beda .koltso-linia{stroke:var(--tekst-3);filter:none}

/* Зал заполняется — кольцо и число теплеют. */
.pulse.tesno .pulse-chislo{color:var(--oran-svet);text-shadow:0 0 32px rgba(255,106,24,.5)}
.pulse.tesno .koltso-linia{stroke:var(--oran);filter:drop-shadow(0 0 7px rgba(255,106,24,.75))}
.pulse.tesno .pz-polosa i{background:linear-gradient(90deg,var(--oran),var(--oran-svet));
  box-shadow:0 0 10px rgba(255,106,24,.6)}

/* ─────────────────────── разделы ─────────────────────── */
.razdel{max-width:var(--shirina);margin:0 auto;
  padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.4rem)}
.razdel-shapka{margin-bottom:2rem;max-width:62ch}
.razdel h2{font-size:clamp(1.7rem,4.2vw,2.7rem);margin-bottom:.7rem}
.podzagolovok{color:var(--tekst-2);font-size:1.03rem}

/* появление при прокрутке */
/* Появление разделов: сдвиг вместе с лёгким увеличением. Заметнее прежнего
   простого сдвига, но укладывается в полсекунды и не мешает читать. */
.poyavlenie{opacity:0;transform:translate3d(0,26px,0) scale(.985);
  transition:opacity .5s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.poyavlenie.vidno{opacity:1;transform:none}
.razdel.poyavlenie>.razdel-shapka>h2{position:relative}
.razdel.poyavlenie>.razdel-shapka>h2::after{content:"";position:absolute;
  left:0;bottom:-.35rem;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--oran),transparent);
  transition:width .7s cubic-bezier(.22,.61,.36,1) .15s}
.razdel.poyavlenie.vidno>.razdel-shapka>h2::after{width:82px}

/* ─────────────────────── переключатель цен ─────────────────────── */
.pereklyuchatel{display:inline-flex;gap:2px;padding:3px;margin-bottom:1.6rem;
  background:var(--fon-2);border:1px solid var(--linia);border-radius:11px}
.pereklyuchatel button{
  appearance:none;border:0;background:transparent;color:var(--tekst-2);
  font:500 .95rem/1 Oswald,sans-serif;letter-spacing:.04em;
  padding:.62rem 1.15rem;border-radius:8px;cursor:pointer;
  transition:background var(--plavno),color var(--plavno)}
.pereklyuchatel button:hover{color:var(--tekst)}
.pereklyuchatel button[aria-pressed="true"]{background:var(--oran);color:#fff}

/* ─────────────────────── карточки зон ─────────────────────── */
.zony{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1.1rem}
.zona{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--fon-2);border:1px solid var(--linia);border-radius:16px;
  padding:1.5rem;display:flex;flex-direction:column;
  transition:border-color var(--plavno),transform var(--plavno)}
.zona.vydelena{border-color:rgba(255,106,24,.35)}

/* Свет за указателем. Позиция приходит из JS переменными --mx/--my;
   на телефоне слой не показывается вовсе. */
.zona::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             rgba(59,200,255,.13),transparent 65%);
  transition:opacity var(--plavno)}
@media (hover:hover) and (pointer:fine){
  .zona:hover{border-color:rgba(59,200,255,.4);transform:translateY(-3px)}
  .zona:hover::before{opacity:1}
}

.zona-verh{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:.7rem}
.zona h3{font-size:1.5rem;letter-spacing:.06em}
.zona.vydelena h3{color:var(--oran)}
.zona-mest{font-size:.88rem;color:var(--tekst-3);white-space:nowrap}
.zona-mest b{color:var(--tekst-2);font-weight:600}
.zona-dlya{font-size:.95rem;color:var(--tekst-2);margin-bottom:1.2rem}

.zona-cena{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
  padding-bottom:1rem;border-bottom:1px solid var(--linia-2);margin-bottom:1rem}
.zona-cena b{font-family:Oswald;font-weight:600;font-size:2.15rem;line-height:1;
  color:var(--tekst);font-variant-numeric:tabular-nums}
.zona-cena span{font-size:.85rem;color:var(--tekst-3)}

.zona-sovet{font-size:.86rem;line-height:1.45;padding:.6rem .75rem;border-radius:8px;
  margin-bottom:1rem}
.zona-sovet.horosho{background:rgba(56,214,138,.1);color:#8FE7BC}
.zona-sovet.ostorozhno{background:rgba(229,72,77,.1);color:#FF9EA1}

.zona-zhelezo{list-style:none;margin:0 0 1.3rem;padding:0;
  display:flex;flex-direction:column;gap:.5rem;font-size:.88rem}
.zona-zhelezo li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.zona-zhelezo span{color:var(--tekst-3);flex-shrink:0}
.zona-zhelezo b{font-weight:400;color:var(--tekst-2);text-align:right}
.zona-zhelezo em{font-style:normal;color:var(--golub)}

.zona-ssylka{margin-top:auto;font-size:.92rem;color:var(--golub);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem}
.zona-ssylka::after{content:"→";transition:transform var(--plavno)}
.zona-ssylka:hover::after{transform:translateX(4px)}

/* ─────────────────────── честное сравнение ─────────────────────── */
.chestno{margin-top:1.6rem;padding:1.5rem;border-radius:16px;
  background:var(--fon-2);border:1px solid var(--linia)}
.chestno h3{font-size:1.25rem;margin-bottom:.6rem}
.chestno>p{color:var(--tekst-2);font-size:.97rem;margin-bottom:1.2rem}
.sravnenie{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:.7rem;margin-bottom:1rem}
.sravn-karta{background:var(--fon-3);border-radius:11px;padding:1rem;
  border-left:3px solid var(--tekst-3)}
.sravn-karta.vygodno{border-left-color:var(--svobodno)}
.sravn-karta.nevygodno{border-left-color:var(--zanyato)}
.sravn-karta h4{margin:0 0 .5rem;font:600 .95rem/1.2 Oswald,sans-serif;letter-spacing:.04em}
.sravn-stroka{display:flex;justify-content:space-between;gap:.8rem;font-size:.87rem;
  padding:.22rem 0;color:var(--tekst-2)}
.sravn-stroka b{font-variant-numeric:tabular-nums;color:var(--tekst);font-weight:600}
.sravn-itog{margin-top:.55rem;padding-top:.5rem;border-top:1px solid var(--linia-2);
  font-size:.87rem;font-weight:600}
.sravn-karta.vygodno .sravn-itog{color:var(--svobodno)}
.sravn-karta.nevygodno .sravn-itog{color:#FF9EA1}

/* ─────────────────────── подбор зоны ─────────────────────── */
.podbor{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;
  margin-bottom:1.6rem}
.podbor fieldset{border:0;margin:0;padding:0}
.podbor legend{font-family:Oswald;font-weight:500;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tekst-3);margin-bottom:.7rem;padding:0}
.vybor{display:flex;flex-direction:column;gap:.4rem}
.vybor label{display:block;cursor:pointer}
.vybor input{position:absolute;opacity:0;width:0;height:0}
.vybor span{display:block;padding:.65rem .9rem;border-radius:9px;font-size:.93rem;
  background:var(--fon-2);border:1px solid var(--linia);color:var(--tekst-2);
  transition:border-color var(--plavno),color var(--plavno),background var(--plavno)}
.vybor label:hover span{color:var(--tekst)}
.vybor input:checked+span{border-color:var(--oran);color:var(--tekst);
  background:rgba(255,106,24,.09)}
.vybor input:focus-visible+span{outline:2px solid var(--golub);outline-offset:2px}

.otvet{display:block;background:var(--fon-2);border:1px solid rgba(255,106,24,.3);
  border-radius:16px;padding:1.5rem}
.otvet-zona{font-family:Oswald;font-weight:600;font-size:2rem;color:var(--oran);
  letter-spacing:.05em;line-height:1;margin-bottom:.6rem}
.otvet-pochemu{color:var(--tekst-2);margin-bottom:1.2rem;max-width:56ch}

/* ─────────────────────── схема зала ─────────────────────── */
.filtry{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.3rem}
.filtry button{appearance:none;cursor:pointer;
  padding:.5rem 1rem;border-radius:9px;font:500 .9rem/1 Oswald,sans-serif;letter-spacing:.04em;
  background:var(--fon-2);border:1px solid var(--linia);color:var(--tekst-2);
  transition:border-color var(--plavno),color var(--plavno),background var(--plavno)}
.filtry button:hover{color:var(--tekst)}
.filtry button[aria-pressed="true"]{border-color:var(--oran);color:var(--tekst);
  background:rgba(255,106,24,.1)}

.svodka{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.7rem;margin-bottom:1.4rem}
.svodka-karta{background:var(--fon-2);border:1px solid var(--linia);border-radius:12px;
  padding:1rem 1.1rem}
.svodka-karta h4{margin:0 0 .45rem;font:500 .8rem/1 Oswald,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tekst-3)}
.svodka-chislo{font-family:Oswald;font-weight:600;font-size:1.9rem;line-height:1;
  font-variant-numeric:tabular-nums}
.svodka-chislo.est{color:var(--svobodno)}
.svodka-chislo.net{color:var(--zanyato)}
.svodka-iz{font-size:.83rem;color:var(--tekst-3);margin-top:.3rem}

.karta-obertka{background:var(--fon-2);border:1px solid var(--linia);border-radius:14px;
  overflow:hidden}
.karta-obertka summary{cursor:pointer;padding:1rem 1.2rem;font-family:Oswald;
  font-weight:500;letter-spacing:.03em;list-style:none;display:flex;
  align-items:center;justify-content:space-between}
.karta-obertka summary::-webkit-details-marker{display:none}
.karta-obertka summary::after{content:"▾";color:var(--tekst-3);transition:transform var(--plavno)}
.karta-obertka[open] summary::after{transform:rotate(180deg)}
.karta-obertka[open] summary span::before{content:"Свернуть "}
.karta-obertka[open] summary span{font-size:0}
.karta-obertka[open] summary span::before{font-size:1rem}

/* Схема зала. Места стоят по настоящим координатам из iCafeCloud, поэтому
   проходы и острова сохраняются сами. На узком экране схему не сплющиваем —
   даём прокрутить вбок: сплющенная схема перестаёт быть схемой.

   Размер клетки объявлен переменной: код ставит места так, чтобы крайние не
   вылезали за поле даже наполовину. Раньше верхний ряд обрезался — место
   стояло на самом краю и сдвигалось вверх на половину своей высоты. */
.karta{--kletka:30px;
  padding:0 1.2rem 1rem;overflow-x:auto;overflow-y:visible;
  -webkit-overflow-scrolling:touch}
.karta-pole{position:relative;min-width:520px;margin:.6rem 8px 1.4rem}
.karta-pusto{color:var(--tekst-3);font-size:.9rem;padding:1rem 0}
.mesto{position:absolute;transform:translate(-50%,-50%);
  width:var(--kletka);height:var(--kletka);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-family:Oswald;font-weight:500;
  border:1px solid var(--linia);color:var(--tekst-3);
  transition:transform .15s ease,border-color var(--plavno)}

/* Включение схемы: места зажигаются волной, как будто по очереди включают
   мониторы. Задержка приходит из кода переменной --zaderzhka. */
.karta-obertka[open] .mesto{animation:vklyuchenie .42s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay:var(--zaderzhka,0ms)}
@keyframes vklyuchenie{
  from{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* Свободные места дышат — очень медленно, чтобы не отвлекать от чтения.
   Селектор повторяет обёртку намеренно: иначе правило включения выше
   оказывается весомее и свечение не появляется вовсе. */
.karta-obertka[open] .mesto.svobodno{
  animation:vklyuchenie .42s cubic-bezier(.22,.61,.36,1) backwards,
            puls 4.5s ease-in-out infinite;
  animation-delay:var(--zaderzhka,0ms),calc(var(--zaderzhka,0ms) + .42s)}
@keyframes puls{
  0%,100%{box-shadow:0 0 0 rgba(56,214,138,0)}
  50%    {box-shadow:0 0 12px rgba(56,214,138,.45)}
}
.mesto.svobodno{background:rgba(56,214,138,.15);border-color:rgba(56,214,138,.4);
  color:#9BEBC5}
.mesto.zanyato{background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.3);
  color:#FFA7A9}
.mesto.vyklyuchen{opacity:.35}
.mesto.spryatan{display:none}

/* Место, ведущее в приложение, — ссылка. Значит его берёт и палец, и мышь,
   и клавиша Tab. Подчёркивание убираем: номер и так внутри рамки. */
a.mesto{text-decoration:none;cursor:pointer}
a.mesto:hover{transform:translate(-50%,-50%) scale(1.18);border-color:var(--svobodno)}
a.mesto:focus-visible{outline:2px solid var(--oran);outline-offset:3px;
  transform:translate(-50%,-50%) scale(1.18);z-index:2}
/* Обводку рисуем поверх соседей, иначе её срежет следующее место. */
a.mesto:focus-visible,a.mesto:hover{position:absolute;z-index:2}
@media (hover:hover){.mesto:hover{transform:translate(-50%,-50%) scale(1.2);z-index:2}}

.legenda{display:flex;gap:1.2rem;flex-wrap:wrap;padding:0 1.2rem 1.2rem;
  font-size:.83rem;color:var(--tekst-3)}
.tochka{display:inline-block;width:10px;height:10px;border-radius:3px;
  margin-right:.35rem;vertical-align:-1px}
.tochka.svobodna{background:rgba(56,214,138,.5)}
.tochka.zanyata{background:rgba(229,72,77,.45)}
.tochka.vykl{background:var(--tekst-3);opacity:.4}

/* ─────────────────────── галерея ─────────────────────── */
.galereya{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem}
.snimok{appearance:none;padding:0;border:1px solid var(--linia);border-radius:13px;
  overflow:hidden;background:var(--fon-2);cursor:pointer;
  transition:transform var(--plavno),border-color var(--plavno)}
.snimok img{width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .5s cubic-bezier(.4,0,.2,1)}
@media (hover:hover){
  .snimok:hover{border-color:var(--golub)}
  .snimok:hover img{transform:scale(1.05)}
}
.snimok:active{transform:scale(.985)}

.prosmotr{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;
  width:100%;height:100%}
.prosmotr::backdrop{background:rgba(4,7,13,.94)}
.prosmotr img{max-width:94vw;max-height:88vh;margin:auto;object-fit:contain;
  border-radius:10px}
.prosmotr[open]{display:flex;align-items:center;justify-content:center}
.prosmotr-zakryt,.prosmotr-strelka{position:fixed;appearance:none;cursor:pointer;
  background:rgba(11,18,32,.85);border:1px solid var(--linia);color:var(--tekst);
  border-radius:50%;width:46px;height:46px;font-size:1.4rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--plavno),background var(--plavno)}
.prosmotr-zakryt:hover,.prosmotr-strelka:hover{border-color:var(--oran)}
.prosmotr-zakryt{top:1rem;right:1rem}
.prosmotr-strelka.nazad{left:1rem;top:50%;transform:translateY(-50%)}
.prosmotr-strelka.vpered{right:1rem;top:50%;transform:translateY(-50%)}

/* ─────────────────────── приложение ─────────────────────── */
.prilozhenie{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:center;
  background:var(--fon-2);border:1px solid var(--linia);border-radius:18px;
  padding:clamp(1.5rem,4vw,2.8rem)}
.prilozhenie h2{font-size:clamp(1.6rem,3.6vw,2.3rem);margin-bottom:.8rem}
.prilozhenie p{color:var(--tekst-2);max-width:52ch}
.galki{list-style:none;margin:1.2rem 0 1.6rem;padding:0;
  display:flex;flex-direction:column;gap:.5rem;font-size:.95rem;color:var(--tekst-2)}
.galki li{padding-left:1.5rem;position:relative}
.galki li::before{content:"✓";position:absolute;left:0;color:var(--svobodno);font-weight:600}
.prilozhenie .melko{margin-top:.9rem}
.prilozhenie-kartinka img{width:clamp(120px,18vw,200px);border-radius:26%;
  box-shadow:0 20px 60px -24px rgba(255,106,24,.5)}

/* ─────────────────────── контакты ─────────────────────── */
.kontakty{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:.8rem}
.kontakt{display:flex;align-items:center;gap:.9rem;text-decoration:none;
  background:var(--fon-2);border:1px solid var(--linia);border-radius:13px;
  padding:1.1rem 1.2rem;transition:border-color var(--plavno),transform var(--plavno)}
.kontakt:hover{border-color:var(--oran);transform:translateY(-2px)}
.kontakt:active{transform:scale(.985)}
.kontakt-znak{width:38px;height:38px;flex-shrink:0;border-radius:10px;
  background:rgba(255,106,24,.12);color:var(--oran);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.kontakt span:last-child{display:flex;flex-direction:column;font-size:.88rem;
  color:var(--tekst-3);line-height:1.35}
.kontakt b{font-weight:600;font-size:1rem;color:var(--tekst)}

/* ─────────────────────── подвал ─────────────────────── */
.podval{max-width:var(--shirina);margin:0 auto;
  padding:2.5rem clamp(1rem,4vw,2.4rem) 6rem;
  border-top:1px solid var(--linia-2);color:var(--tekst-3);font-size:.88rem}
.podval p+p{margin-top:.5rem}

/* ─────────────────────── нижняя кнопка на телефоне ─────────────────────── */
.nizhnyaya-knopka{display:none}
@media (max-width:760px){
  .nizhnyaya-knopka{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:.8rem;right:.8rem;bottom:.8rem;z-index:45;
    padding:.95rem;border-radius:12px;text-decoration:none;
    background:var(--oran);color:#fff;font:500 1.02rem/1 Oswald,sans-serif;
    letter-spacing:.04em;box-shadow:0 12px 34px -10px rgba(255,106,24,.7);
    transition:transform .12s ease}
  .nizhnyaya-knopka:active{transform:scale(.97)}
  .podval{padding-bottom:6.5rem}
}

/* ─────────────────────── телефон ─────────────────────── */
@media (max-width:760px){
  body{font-size:16px}
  .navig{display:none}

  /* Облегчённый вариант: без сетки, без пульса мест, без света за указателем —
     всего, что требует постоянного пересчёта или указателя, которого нет. */
  .pervyy-setka{display:none}
  .karta-obertka[open] .mesto.svobodno{
    animation:vklyuchenie .42s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay:var(--zaderzhka,0ms)}
  .knopka.glavnaya::after{display:none}

  /* Живое ядро на телефоне должно помещаться без прокрутки. */
  .pulse{grid-template-columns:auto 1fr;padding:1rem 1.1rem;gap:.8rem 1rem;
    margin-bottom:1.1rem}
  .pulse-koltso{width:84px;height:84px}
  .pulse-chislo{font-size:clamp(2.8rem,15vw,3.6rem)}
  .pulse-podpis{font-size:.92rem}
  .pulse-zony{gap:.6rem;padding-top:.7rem}
  .pz-chislo{font-size:1.1rem}
  /* Первый экран короче: по заданию тарифы и свободные места должны
     попадаться раньше, а не после долгой прокрутки. */
  .pervyy{padding-bottom:1.4rem}
  .razdel{padding-top:2.4rem}
  .lid{margin-bottom:1.4rem}
  .knopki{margin-bottom:1.5rem}
  .shapka{gap:.8rem}
  .knopki .knopka{flex:1 1 0;min-width:140px}
  .prilozhenie{grid-template-columns:1fr;gap:1.5rem}
  .prilozhenie-kartinka{order:-1}
  .prilozhenie-kartinka img{width:104px}
  .zagruzka{display:flex}
}
@media (max-width:400px){
  .fakty{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  /* На телефоне клетка мельче, а схема прокручивается вбок. Размер объявлен
     переменной, потому что по ней код считает безопасный отступ. */
  .karta{--kletka:26px}
  .mesto{font-size:.56rem}
  .karta-pole{min-width:480px}
}

/* ─────────────────────── меньше движения ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Движение выключаем полностью, а не ускоряем. Прежние .01ms и .12s
     оставляли живыми поворот стрелки у схемы и рост подписи — движение
     оставалось, просто быстрое, а обещали мы его убрать.

     Плавную смену цвета оставляем: она ничего не двигает, а подсказывает,
     что кнопка отзывается. Убрано всё, что меняет положение и размер. */
  *,*::before,*::after{
    animation:none !important;
    transition-property:color,background-color,border-color,box-shadow,
                        fill,stroke !important}
  .pervyy-svet{animation:none;transform:none !important}
  .pervyy-setka{transform:perspective(560px) rotateX(58deg) translateY(28%) scale(1.8) !important}
  .pulse.prishlo .pulse-chislo,.pulse.prishlo .pulse-zony li{animation:none}
  .mesto,.karta-obertka[open] .mesto,
  .karta-obertka[open] .mesto.svobodno{animation:none !important}
  .koltso-linia,.pz-polosa i{transition:none}
  .razdel.poyavlenie.vidno>.razdel-shapka>h2::after{transition:none;width:82px}
  .knopka.glavnaya::after{display:none}
  .poyavlenie{opacity:1;transform:none;transition:none}
  .snimok:hover img,.zona:hover,.kontakt:hover{transform:none}
  .knopka:active,.kontakt:active,.snimok:active,.nizhnyaya-knopka:active{transform:none}
  .pervyy-fon img{transform:none !important}
}