/* Кофейня «Вайб и Кнопка» — оформление текста поверх объёмной сцены */
:root {
  --ink: #14203f;
  --krem: #f4ead7;
  --krem-svetlyj: #fbf4e6;
  --oranzh: #e8792b;
  --ryzhij: #f08a34;
  --biruza: #2fc4b2;
  --biruza-temn: #23998b;
  --tekst: var(--ink);
  --tekst-myagkij: rgba(20, 32, 63, 0.72);
  --steklo: rgba(255, 251, 244, 0.68);
  --steklo-kraj: rgba(255, 255, 255, 0.78);
  --ten: 0 14px 40px rgba(20, 32, 63, 0.14), 0 2px 6px rgba(20, 32, 63, 0.06);
  --noch: 0;
  --sverhu: max(env(safe-area-inset-top), 0px);
  /* верхняя полоса */
  --shapka-fon: rgba(251, 244, 230, 0.72);
  --shapka-menyu: rgba(251, 244, 230, 0.94);
  --shapka-kraj: rgba(255, 255, 255, 0.6);
  --shapka-tekst: var(--ink);
  --shapka-navedenie: rgba(20, 32, 63, 0.06);
  --shapka-aktiv: rgba(47, 196, 178, 0.2);
  /* обычные разделы сайта */
  --r-fon: #f4ead7;
  --r-tekst: #14203f;
  --r-tekst2: rgba(20, 32, 63, 0.72);
  --r-nadpis: #d8661d;
  --r-karta: #fffaf2;
  --r-karta-kraj: rgba(20, 32, 63, 0.07);
  --r-ten: 0 12px 30px rgba(20, 32, 63, 0.08), 0 1px 3px rgba(20, 32, 63, 0.06);
  --snizu: max(env(safe-area-inset-bottom), 0px);
  color-scheme: light;
}
html.noch .zagolovok, html.noch .zagolovok-final, html.noch .podzagolovok, html.noch .podval-sajta, html.noch .final-tekst .nadpis {
  text-shadow: 0 2px 14px rgba(8, 14, 40, 0.75), 0 0 2px rgba(8, 14, 40, 0.5);
}
html.noch {
  --shapka-fon: rgba(16, 25, 54, 0.7);
  --shapka-menyu: rgba(20, 30, 62, 0.95);
  --shapka-kraj: rgba(255, 255, 255, 0.1);
  --shapka-tekst: #f6ead8;
  --shapka-navedenie: rgba(255, 255, 255, 0.08);
  --shapka-aktiv: rgba(47, 196, 178, 0.3);
  --r-fon: #111a37;
  --r-tekst: #f6ead8;
  --r-tekst2: rgba(246, 234, 216, 0.76);
  --r-nadpis: #ffb35c;
  --r-karta: #fcefdb;
  --r-karta-kraj: rgba(255, 196, 130, 0.45);
  --r-ten: 0 14px 34px rgba(0, 0, 0, 0.32), 0 0 28px rgba(255, 170, 90, 0.1);
  --tekst: #fbf1df;
  --tekst-myagkij: rgba(251, 241, 223, 0.8);
  --steklo: rgba(255, 249, 238, 0.74);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--krem);
  color: var(--ink);
  font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: 'Unbounded', 'Golos Text', sans-serif; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }

/* ------------ Небо ------------ */
.nebo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nebo__den, .nebo__noch { position: absolute; inset: 0; }
.nebo__den {
  background:
    radial-gradient(120% 70% at 80% 6%, rgba(255, 236, 196, 0.95) 0%, rgba(255, 236, 196, 0) 55%),
    linear-gradient(180deg, #a9dbe6 0%, #cdeaea 38%, #f7ead2 78%, #f4e2c6 100%);
}
.solnce {
  position: absolute; top: 7%; right: 12%; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, #fff6dc 0%, #ffe3a6 45%, rgba(255, 216, 150, 0) 72%);
}
.nebo__noch {
  opacity: var(--noch);
  background:
    radial-gradient(90% 50% at 50% 100%, rgba(120, 90, 160, 0.45) 0%, rgba(120, 90, 160, 0) 70%),
    linear-gradient(180deg, #0b1533 0%, #16244f 45%, #2b3770 80%, #43407a 100%);
}
.zvezdy {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 28% 8%, #fff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 46% 22%, #fff7d6 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 63% 12%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 82% 28%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 92% 9%, #dff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 7% 42%, #fff 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 37% 38%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 72% 46%, #fff7d6 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 55% 58%, #fff 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 18% 66%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 88% 70%, #fff 50%, transparent 52%);
  background-size: 100% 100%;
  animation: mercanie 4s ease-in-out infinite alternate;
}
@keyframes mercanie { from { opacity: 0.65; } to { opacity: 1; } }
.luna {
  position: absolute; top: 30%; left: 6%; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fffaf0 0%, #fbeec9 60%, #f1dca8 100%);
  box-shadow: 0 0 60px 18px rgba(255, 236, 190, 0.25);
}

/* ------------ Сцена и запасная картинка ------------ */
#scena { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; display: block; touch-action: pan-y; }
.zapas { display: none; position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.zapas img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center 55%;
  transition: opacity 1.4s ease;
}
.zapas__noch { opacity: var(--noch); }
html.static #scena { display: none; }
html.static .zapas { display: block; }
#konfetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }

/* ------------ Загрузка ------------ */
.zagruzka {
  position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--krem); color: var(--ink); font-weight: 500; transition: opacity 0.8s ease, visibility 0.8s;
}
html.gotovo .zagruzka, html.static .zagruzka { opacity: 0; visibility: hidden; pointer-events: none; }
.chashka { position: relative; width: 64px; height: 50px; border-radius: 0 0 26px 26px; background: var(--ryzhij); margin-top: 36px; }
.chashka::after { content: ''; position: absolute; right: -16px; top: 8px; width: 18px; height: 22px; border: 6px solid var(--ryzhij); border-left: 0; border-radius: 0 14px 14px 0; }
.chashka span { position: absolute; bottom: 58px; width: 7px; height: 22px; border-radius: 6px; background: rgba(20, 32, 63, 0.25); animation: par 1.4s ease-in-out infinite; }
.chashka span:nth-child(1) { left: 12px; }
.chashka span:nth-child(2) { left: 28px; animation-delay: 0.25s; }
.chashka span:nth-child(3) { left: 44px; animation-delay: 0.5s; }
@keyframes par { 0% { transform: translateY(8px) scaleY(0.6); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-14px) scaleY(1); opacity: 0; } }

/* ------------ Верхняя полоса ------------ */
.shapka {
  position: fixed; z-index: 45; top: 0; left: 0; right: 0;
  height: calc(58px + var(--sverhu)); padding: var(--sverhu) 12px 0 14px;
  display: flex; align-items: center; gap: 14px;
  background: var(--shapka-fon); border-bottom: 1px solid var(--shapka-kraj);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  transition: background-color 1.2s ease, border-color 1.2s ease, box-shadow 0.3s ease;
}
.shapka--prokrucheno { box-shadow: 0 6px 24px rgba(20, 32, 63, 0.09); }
.logo {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: -0.01em;
  color: var(--shapka-tekst); text-decoration: none; white-space: nowrap; transition: color 1.2s;
}
.logo__znak { width: 34px; height: 34px; flex: none; }
.shapka__nav { display: none; }
.shapka__nav a, .mob-menyu a:not(.knopka) {
  color: var(--shapka-tekst); text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 9px 14px; border-radius: 99px; transition: background-color 0.25s, color 1.2s;
}
@media (hover: hover) { .shapka__nav a:hover { background: var(--shapka-navedenie); } }
.shapka__nav a.aktivno, .mob-menyu a.aktivno { background: var(--shapka-aktiv); }
.shapka__pravo { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.shapka .shapka__bron { display: none; }
.knopka--malaya { padding: 11px 18px; font-size: 13px; box-shadow: 0 6px 16px rgba(232, 121, 43, 0.35), inset 0 -2px 0 rgba(150, 60, 10, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.3); }

/* переключатель день / ночь — теперь в полосе */
.den-noch {
  position: relative; flex: none; width: 72px; height: 40px; border-radius: 99px; cursor: pointer;
  background: var(--steklo); border: 1px solid var(--steklo-kraj);
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
}
.den-noch svg { position: relative; z-index: 1; width: 18px; height: 18px; transition: fill 0.6s, stroke 0.6s, transform 0.6s; }
.den-noch__solnce { fill: #fff6d8; stroke: #fff6d8; }
.den-noch__luna { fill: var(--ink); opacity: 0.55; }
.den-noch__polzunok {
  position: absolute; top: 3px; left: 3px; width: 32px; height: 32px; border-radius: 99px;
  background: linear-gradient(160deg, #ffb35c, #e8792b); box-shadow: 0 4px 10px rgba(232, 121, 43, 0.45);
  transition: transform 0.7s cubic-bezier(0.6, -0.3, 0.3, 1.4), background 0.7s;
}
html.noch .den-noch__polzunok { transform: translateX(32px); background: linear-gradient(160deg, #3d4f8f, #14203f); box-shadow: 0 4px 12px rgba(20, 32, 63, 0.5); }
html.noch .den-noch__solnce { fill: var(--ink); stroke: var(--ink); opacity: 0.55; }
html.noch .den-noch__luna { fill: #ffe3a6; opacity: 1; transform: rotate(-20deg); }
.den-noch:focus-visible, .knopka:focus-visible, .burger:focus-visible, .vkladka:focus-visible,
.shapka a:focus-visible, .niz a:focus-visible, .ssylka:focus-visible { outline: 3px solid var(--biruza); outline-offset: 3px; }

/* «три полоски» */
.burger {
  flex: none; width: 44px; height: 44px; border-radius: 14px; cursor: pointer; padding: 0;
  background: var(--steklo); border: 1px solid var(--steklo-kraj);
  display: grid; place-content: center; gap: 5px;
}
.burger span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform 0.3s ease, opacity 0.2s; }
.shapka--otkryto .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.shapka--otkryto .burger span:nth-child(2) { opacity: 0; }
.shapka--otkryto .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.mob-menyu {
  position: absolute; top: calc(100% + 8px); left: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 2px; padding: 10px;
  border-radius: 24px; background: var(--shapka-menyu); border: 1px solid var(--shapka-kraj); box-shadow: 0 24px 60px rgba(20, 32, 63, 0.22);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  opacity: 0; transform: translateY(-10px) scale(0.98); transform-origin: top right; transition: opacity 0.25s ease, transform 0.25s ease;
}
.mob-menyu[hidden] { display: none; }
.shapka--otkryto .mob-menyu { opacity: 1; transform: none; }
.mob-menyu a:not(.knopka) { font-size: 18px; padding: 14px 16px; border-radius: 16px; }
.mob-menyu .knopka { margin-top: 8px; }

.vklyuchit-anim {
  display: none; position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); top: calc(66px + var(--sverhu));
  padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
  background: var(--steklo); border: 1px solid var(--steklo-kraj); box-shadow: var(--ten);
}
html.static.webgl-ok .vklyuchit-anim { display: block; }
html.static.webgl-ok .etazh--krysha .lipkij { padding-top: calc(118px + var(--sverhu)); }

/* ------------ Этажи ------------ */
/* разделы прозрачны для нажатий — так можно трогать героев на сцене под текстом */
.etazhi { position: relative; z-index: 2; pointer-events: none; }
.etazh { position: relative; pointer-events: none; }
.etazh--krysha { height: 170vh; }
.etazh--zal { height: 330vh; }
.etazh--kuhnya { height: 240vh; }
.etazh--podval { height: 220vh; }
.etazh--final { height: 230vh; }
.lipkij {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(72px + var(--sverhu)) 16px calc(18px + var(--snizu));
  pointer-events: none;
}
.blok { pointer-events: none; }
.knopka, .kartochka, .pravilo, .schetchik, .okno, .menyu { pointer-events: auto; }

.nadpis {
  font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--oranzh); margin-bottom: 6px;
}
.plashka {
  align-self: flex-start; max-width: 520px;
  padding: 14px 18px 16px; border-radius: 22px;
  background: var(--steklo); border: 1px solid var(--steklo-kraj); box-shadow: var(--ten);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.plashka h2 { font-size: clamp(22px, 6.4vw, 40px); line-height: 1.08; font-weight: 800; color: var(--ink); }
.melko { font-size: 14px; color: rgba(20, 32, 63, 0.72); margin-top: 6px; }

/* Крыша — главный экран */
.geroj { text-align: center; padding-top: 4px; }
.geroj .nadpis { color: var(--oranzh); }
.zagolovok {
  font-weight: 800; font-size: clamp(46px, 14.5vw, 128px); line-height: 0.95; color: var(--tekst);
  transition: color 1.2s ease; text-wrap: balance;
}
.slovo { display: inline-block; }
.slovo--i { color: var(--biruza); font-weight: 500; font-size: 0.7em; vertical-align: 0.1em; }
.podzagolovok {
  font-size: clamp(16px, 4.3vw, 21px); color: var(--tekst-myagkij); margin: 14px auto 0; max-width: 30ch; font-weight: 500;
  transition: color 1.2s ease;
}
.geroj-knopka { display: grid; justify-items: center; gap: 12px; }
.info-stroka {
  display: inline-block; max-width: 100%; margin-bottom: 12px; padding: 7px 14px; border-radius: 16px;
  font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); text-wrap: balance;
  background: var(--steklo); border: 1px solid var(--steklo-kraj);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.geroj-knopki { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.knopka--vtoraya {
  color: var(--ink); background: var(--steklo); border: 1px solid var(--steklo-kraj);
  box-shadow: var(--ten); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ssylka { color: var(--biruza-temn); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ssylka--vse { pointer-events: auto; white-space: nowrap; }
.listaj {
  font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; border-radius: 99px; background: var(--steklo); border: 1px solid var(--steklo-kraj);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.listaj__mysh { width: 16px; height: 24px; border: 2px solid currentColor; border-radius: 10px; position: relative; }
.listaj__mysh::after { content: ''; position: absolute; left: 50%; top: 4px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: koleso 1.6s ease-in-out infinite; }
@keyframes koleso { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { opacity: 0; } }

/* Кнопки */
.knopka {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center;
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.01em;
  color: #fff; border: 0; cursor: pointer; border-radius: 99px; padding: 17px 30px;
  background: linear-gradient(180deg, #f59a4a 0%, #e8792b 100%);
  box-shadow: 0 10px 24px rgba(232, 121, 43, 0.42), inset 0 -3px 0 rgba(150, 60, 10, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
  .knopka:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(232, 121, 43, 0.5), inset 0 -3px 0 rgba(150, 60, 10, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
  }
.knopka:active { transform: translateY(1px) scale(0.98); }
.knopka--bolshaya { font-size: 18px; padding: 20px 38px; animation: dyshit 2.4s ease-in-out infinite; }
@keyframes dyshit { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* Меню — карточки из матового стекла */
.menyu { margin: 0 -16px; overflow: hidden; padding: 6px 0 4px; }
.menyu__lenta { display: flex; gap: 12px; width: max-content; padding: 0 16px; will-change: transform; }
.kartochka {
  width: min(76vw, 320px); display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 22px; position: relative;
  background: var(--steklo); border: 1px solid var(--steklo-kraj); box-shadow: var(--ten);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.kartochka__ikonka { width: 52px; height: 52px; grid-row: span 2; }
.kartochka h3 { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.kartochka p { font-size: 14px; color: rgba(20, 32, 63, 0.75); margin-top: 3px; }
.cena {
  grid-column: 2; justify-self: start; margin-top: 8px;
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 13px; color: #fff;
  background: var(--biruza-temn); padding: 4px 10px; border-radius: 99px;
}

/* Правила дома */
.pravila { display: grid; gap: 10px; max-width: 520px; }
.pravilo {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 20px;
  background: var(--steklo); border: 1px solid var(--steklo-kraj); box-shadow: var(--ten);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  font-weight: 500; font-size: 15px; line-height: 1.3;
}
.pravilo__nomer {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 14px; color: #fff; background: var(--ryzhij);
}

/* Счётчики */
.schetchiki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 560px; }
.schetchik {
  padding: 12px 10px; border-radius: 20px; text-align: center;
  background: var(--steklo); border: 1px solid var(--steklo-kraj); box-shadow: var(--ten);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.schetchik b { display: block; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: clamp(22px, 6.6vw, 40px); color: var(--biruza-temn); font-variant-numeric: tabular-nums; line-height: 1.1; }
.schetchik span { display: block; font-size: 12px; line-height: 1.25; margin-top: 4px; color: rgba(20, 32, 63, 0.8); font-weight: 500; }

/* Финал */
.final-tekst { text-align: center; }
.final-tekst .nadpis { color: #ffb35c; }
html:not(.noch) .final-tekst .nadpis { color: var(--oranzh); }
.zagolovok-final { font-weight: 800; font-size: clamp(32px, 9.5vw, 76px); line-height: 1.02; color: var(--tekst); transition: color 1.2s; text-wrap: balance; }
.final-knopka { display: grid; justify-items: center; gap: 12px; }
.podval-sajta { font-size: 13px; color: var(--tekst-myagkij); transition: color 1.2s; }

/* «Мрр» над котом */
.murr {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink);
  padding: 8px 14px; border-radius: 99px; background: var(--steklo); border: 1px solid var(--steklo-kraj); box-shadow: var(--ten);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: translate(-50%, -100%) scale(0.6); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.murr.vidno { opacity: 1; transform: translate(-50%, -100%) scale(1); }

/* Окно «Все столики заняты» */
.okno { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 20px; }
.okno[hidden] { display: none; }
.okno__fon { position: absolute; inset: 0; background: rgba(20, 32, 63, 0.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: poyav 0.35s ease; }
.okno__karta {
  position: relative; width: min(420px, 100%); text-align: center; padding: 26px 24px 24px; border-radius: 30px;
  background: rgba(255, 250, 240, 0.92); border: 1px solid #fff; box-shadow: 0 30px 80px rgba(20, 32, 63, 0.35);
  animation: vyskok 0.55s cubic-bezier(0.25, 1.5, 0.45, 1);
}
.okno__kot { width: 180px; height: auto; margin: -6px auto 8px; display: block; }
.okno__karta h2 { font-size: 22px; line-height: 1.15; font-weight: 800; color: var(--ink); }
.okno__karta p { margin: 10px 0 20px; font-size: 17px; color: rgba(20, 32, 63, 0.8); }
@keyframes poyav { from { opacity: 0; } }
@keyframes vyskok { from { opacity: 0; transform: translateY(30px) scale(0.85); } }

/* ------------ Ноутбук и широкие экраны: дом сбоку, текст рядом ------------ */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .lipkij { justify-content: center; align-items: flex-end; gap: 22px; padding: 90px 5vw 40px 0; }
  .blok { width: min(500px, 40vw); }
  .geroj { text-align: left; }
  .zagolovok { font-size: clamp(56px, 6.6vw, 112px); }
  .podzagolovok { margin-left: 0; }
  .geroj-knopka { justify-items: start; }
  .plashka { align-self: auto; }
  .menyu { margin: 0; overflow: visible; }
  .menyu__lenta { flex-direction: column; width: auto; padding: 0; gap: 10px; }
  .kartochka { width: 100%; grid-template-columns: 48px 1fr auto; grid-template-rows: auto; padding: 12px 16px; }
  .kartochka__ikonka { width: 48px; height: 48px; grid-row: auto; }
  .cena { grid-column: 3; margin-top: 0; justify-self: end; }
  .final-tekst { text-align: left; }
  .final-knopka { justify-items: start; }
  .murr { font-size: 16px; }
  .geroj-knopki { justify-content: flex-start; }
  .shapka { height: calc(64px + var(--sverhu)); padding: var(--sverhu) 22px 0 26px; gap: 20px; }
  .logo { font-size: 17px; }
  .logo__znak { width: 38px; height: 38px; }
  .shapka__nav { display: flex; gap: 2px; margin-left: auto; }
  .shapka__pravo { margin-left: 8px; gap: 12px; }
  .shapka .shapka__bron { display: inline-flex; }
  .burger, .mob-menyu { display: none !important; }
}

/* Невысокий экран телефона — компактнее */
@media (max-height: 700px) and (max-width: 899px) {
  .lipkij { padding-top: calc(64px + var(--sverhu)); }
  .plashka { padding: 10px 14px 12px; }
  .plashka .melko { display: none; }
  .pravilo { padding: 9px 12px; font-size: 14px; }
  .kartochka { padding: 10px 12px; }
}

/* ------------ Неподвижная версия ------------ */
/* режим съёмки картинок для неё: только сцена на прозрачном фоне */
html.snimok body { background: transparent; }
html.snimok .nebo, html.snimok .etazhi, html.snimok .shapka, html.snimok .razdely, html.snimok .zagruzka, html.snimok .murr, html.snimok .vklyuchit-anim { display: none !important; }
html.static .menyu { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
html.static .kartochka { scroll-snap-align: center; }
html.static .etazh--krysha, html.static .etazh--zal, html.static .etazh--kuhnya, html.static .etazh--podval, html.static .etazh--final { height: auto; }
html.static .lipkij { position: relative; min-height: 100vh; min-height: 100svh; height: auto; gap: 24px; }
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  /* на телефоне домик стоит между заголовком и кнопками */
  .zapas img { top: auto; bottom: 13vh; height: 48vh; object-position: center bottom; }
  html.webgl-ok .zapas img { height: 44vh; }
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  html.static .zapas img { width: 58%; }
}
@media (prefers-reduced-motion: reduce) {
  .knopka--bolshaya, .zvezdy, .listaj__mysh::after, .k-marshrut, .k-pulsar, .k-flag, .panel--vhod .poziciya { animation: none !important; }
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .luna { top: calc(96px + var(--sverhu)); left: 47%; width: 52px; height: 52px; }
}

/* =====================================================================
   Обычные разделы сайта (после путешествия по домику)
   ===================================================================== */
.razdely {
  position: relative; z-index: 3; overflow: hidden;
  background: var(--r-fon); color: var(--r-tekst);
  border-radius: 32px 32px 0 0; box-shadow: 0 -24px 60px rgba(20, 32, 63, 0.12);
  transition: background-color 1.2s ease, color 1.2s ease;
}
.razdel { max-width: 1160px; margin: 0 auto; padding: 64px 16px; scroll-margin-top: 66px; }
.razdel + .razdel { padding-top: 24px; }
.razdel__shapka { max-width: 660px; margin-bottom: 28px; }
.razdel .nadpis, .bron .nadpis { color: var(--r-nadpis); transition: color 1.2s; }
.razdel__zag { font-size: clamp(30px, 8.2vw, 52px); font-weight: 800; line-height: 1.06; color: var(--r-tekst); transition: color 1.2s; text-wrap: balance; }
.razdel__zag:focus { outline: none; }
.razdel__lid { font-size: 17px; line-height: 1.55; color: var(--r-tekst2); margin-top: 12px; transition: color 1.2s; }
.karta-obshaya, .poziciya, .portret, .otzyv, .info-karta, .karta-rajona, .forma, .vkladki {
  background: var(--r-karta); border: 1px solid var(--r-karta-kraj); box-shadow: var(--r-ten); color: var(--ink);
  transition: background-color 1.2s ease, border-color 1.2s ease, box-shadow 1.2s ease;
}

/* ---- Меню с вкладками ---- */
.vkladki { position: relative; display: inline-flex; max-width: 100%; padding: 5px; border-radius: 99px; margin-bottom: 20px; }
.vkladka {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; cursor: pointer; border-radius: 99px; padding: 11px 14px;
  font: 600 15px 'Golos Text', sans-serif; color: var(--ink); white-space: nowrap; transition: color 0.35s;
}
.vkladka[aria-selected='true'] { color: #fff; }
.vkladka__chislo { font-size: 12px; line-height: 1; padding: 4px 7px; border-radius: 99px; background: rgba(20, 32, 63, 0.08); transition: background-color 0.35s; }
.vkladka[aria-selected='true'] .vkladka__chislo { background: rgba(255, 255, 255, 0.26); }
.vkladki__begunok {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 99px;
  background: linear-gradient(180deg, #f59a4a 0%, #e8792b 100%); box-shadow: 0 6px 16px rgba(232, 121, 43, 0.35);
  transition: transform 0.45s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.45s cubic-bezier(0.3, 1.25, 0.5, 1);
}
.panel:focus-visible { outline: 3px solid var(--biruza); outline-offset: 6px; border-radius: 18px; }
.pozicii { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.poziciya { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; }
.poziciya__ikonka { width: 56px; height: 56px; padding: 4px; border-radius: 16px; background: #f6ead6; }
.poziciya h3 { font-size: 16px; font-weight: 700; line-height: 1.22; }
.poziciya p { font-size: 14px; line-height: 1.4; color: rgba(20, 32, 63, 0.72); margin-top: 3px; }
.poziciya__cena { font: 700 14px 'Unbounded', sans-serif; color: #fff; background: var(--biruza-temn); padding: 6px 11px; border-radius: 99px; white-space: nowrap; }
.panel--vhod .poziciya { animation: vhod 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes vhod { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

/* ---- О нас ---- */
.portrety { display: grid; gap: 18px; grid-template-columns: 1fr; }
.portret { border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; }
.portret__foto { aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; }
.portret--vajb .portret__foto { background: radial-gradient(circle at 50% 58%, #ffe7c8 0%, #ffd2a1 45%, #f7b97e 100%); }
.portret--knopka .portret__foto { background: radial-gradient(circle at 50% 58%, #e3faf5 0%, #b9ece2 45%, #8ad8c9 100%); }
.portret__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.portret__tekst { padding: 18px 22px 22px; }
.portret h3 { font-size: 24px; font-weight: 800; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.portret__rol {
  font: 600 12px 'Golos Text', sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--ryzhij); padding: 5px 10px; border-radius: 99px;
}
.portret--knopka .portret__rol { background: var(--biruza-temn); }
.portret p { font-size: 17px; line-height: 1.5; margin-top: 8px; color: rgba(20, 32, 63, 0.82); }

/* ---- Отзывы ---- */
.otzyvy { display: grid; gap: 16px; grid-template-columns: 1fr; }
.otzyv { position: relative; margin: 0; padding: 22px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; }
.otzyv::before {
  content: '“'; position: absolute; right: 18px; top: -4px; font: 800 86px/1 'Unbounded', sans-serif; color: rgba(240, 138, 52, 0.2); pointer-events: none;
}
.otzyv__zvezdy { display: flex; gap: 3px; }
.otzyv__zvezdy svg { width: 20px; height: 20px; fill: #f5a623; }
.otzyv blockquote { margin: 0; flex: 1; font-size: 17px; line-height: 1.5; font-weight: 500; }
.otzyv figcaption { display: flex; align-items: center; gap: 12px; }
.otzyv figcaption b { display: block; font-size: 15px; }
.otzyv figcaption small { display: block; font-size: 13px; color: rgba(20, 32, 63, 0.62); }
.otzyv__avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 800 17px 'Unbounded', sans-serif; color: #fff;
}
.otzyv__avatar--oranzh { background: var(--ryzhij); }
.otzyv__avatar--biruza { background: var(--biruza-temn); }
.otzyv__avatar--ink { background: var(--ink); }

/* ---- Как найти ---- */
.najti { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.najti__info { display: grid; gap: 12px; }
.info-karta { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 22px; }
.info-karta__znak { width: 38px; height: 38px; flex: none; }
.info-karta h3 { font: 600 13px 'Golos Text', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(20, 32, 63, 0.58); }
.info-karta p { font-size: 18px; font-weight: 600; margin-top: 2px; }
.info-karta .info-karta__melko { font-size: 14px; font-weight: 400; line-height: 1.45; color: rgba(20, 32, 63, 0.7); margin-top: 5px; }
.karta-rajona { margin: 0; padding: 10px; border-radius: 26px; min-width: 0; }
.karta-rajona figcaption { font-size: 13px; color: rgba(20, 32, 63, 0.62); text-align: center; padding: 10px 8px 4px; }
.karta { display: block; width: 100%; height: auto; border-radius: 18px; }
/* цвета карты: днём и ночью */
.karta {
  --k-zemlya: #f3e6cc; --k-kvartal: #e6d3b1; --k-park: #bcdca6; --k-park-podpis: #3f6b3e; --k-derevo: #8cc084; --k-dorozhka: #f3e6cc;
  --k-reka: #9fd6e0; --k-ulica: #fffaf0; --k-ulica-kraj: #dcc9a6; --k-podpis: #6b5a45; --k-marshrut: #e8792b; --k-okno: #cfe7ee;
}
html.noch .karta {
  --k-zemlya: #1b2750; --k-kvartal: #253362; --k-park: #21443d; --k-park-podpis: #a9d8b0; --k-derevo: #2e5c4b; --k-dorozhka: #1b2750;
  --k-reka: #2b5583; --k-ulica: #3a4878; --k-ulica-kraj: #2a3665; --k-podpis: #c9d0ea; --k-marshrut: #ffb35c; --k-okno: #ffc677;
}
.karta * { transition: fill 1.2s ease, stroke 1.2s ease; }
.k-zemlya { fill: var(--k-zemlya); }
.k-kvartal rect { fill: var(--k-kvartal); }
.k-park { fill: var(--k-park); }
.k-dorozhka { fill: none; stroke: var(--k-dorozhka); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 11; }
.k-derevo circle { fill: var(--k-derevo); }
.k-reka { fill: var(--k-reka); }
.k-reka--lenta { fill: none; stroke: var(--k-reka); stroke-width: 46; stroke-linecap: round; }
.k-reka-blik { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 14; }
.k-ulica-kraj path { fill: none; stroke: var(--k-ulica-kraj); stroke-width: 30; }
.k-ulica path { fill: none; stroke: var(--k-ulica); stroke-width: 24; }
.k-most { fill: var(--k-ulica); stroke: var(--k-ulica-kraj); stroke-width: 3; }
.k-most-perila { stroke: var(--k-podpis); stroke-width: 2; opacity: 0.5; }
.k-podpis { font: 600 12px 'Golos Text', sans-serif; fill: var(--k-podpis); }
.k-podpis--park { font-size: 14px; font-weight: 700; fill: var(--k-park-podpis); }
.k-podpis--reka { font-size: 13px; font-style: italic; fill: #fff; }
.k-podpis--put { fill: var(--k-marshrut); font-weight: 700; }
.k-podpis--metro { font-weight: 700; }
.k-marshrut { fill: none; stroke: var(--k-marshrut); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 9; animation: marshrut 1.2s linear infinite; }
@keyframes marshrut { to { stroke-dashoffset: -22; } }
.k-metro circle { fill: #e0352b; }
.k-metro text { fill: #fff; font: 800 14px 'Unbounded', sans-serif; }
.k-pulsar { fill: none; stroke: var(--k-marshrut); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: pulsar 2.2s ease-out infinite; }
@keyframes pulsar { from { transform: scale(0.45); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
.k-krysha { fill: #e8792b; }
.k-steny { fill: #fff6e6; stroke: #14203f; stroke-width: 2; }
.k-okno { fill: var(--k-okno); }
.k-dver { fill: #2fc4b2; }
.k-flagshtok { stroke: #14203f; stroke-width: 2.5; stroke-linecap: round; }
html.noch .k-flagshtok { stroke: #c9d0ea; }
.k-flag { fill: #2fc4b2; transform-box: fill-box; transform-origin: left center; animation: flazhok 1.6s ease-in-out infinite alternate; }
@keyframes flazhok { to { transform: skewY(-7deg) scaleX(0.9); } }
.k-metka rect { fill: #14203f; }
html.noch .k-metka rect { fill: #e8792b; }
.k-metka text { fill: #fff; font: 700 13px 'Unbounded', sans-serif; }
.k-kompas circle { fill: var(--k-ulica); stroke: var(--k-ulica-kraj); stroke-width: 2; }
.k-kompas path { fill: #e0352b; }
.k-kompas text { font: 800 11px 'Unbounded', sans-serif; fill: var(--k-podpis); }

/* ---- Бронирование ---- */
.bron { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.bron__primechanie {
  display: inline-block; margin-top: 16px; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4;
  background: rgba(47, 196, 178, 0.14); color: var(--r-tekst); transition: color 1.2s;
}
.forma { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); padding: 22px; border-radius: 28px; }
.pole { display: grid; gap: 6px; min-width: 0; }
.pole label { font-weight: 600; font-size: 14px; color: rgba(20, 32, 63, 0.75); }
.pole input, .pole select {
  width: 100%; min-width: 0; min-height: 50px; margin: 0; padding: 12px 14px; border-radius: 14px;
  font: 500 16px 'Golos Text', sans-serif; color: var(--ink); background-color: #fff;
  border: 1.5px solid rgba(20, 32, 63, 0.15); -webkit-appearance: none; appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pole select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%2314203f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.pole input::placeholder { color: rgba(20, 32, 63, 0.4); }
.pole input:focus, .pole select:focus { outline: none; border-color: var(--biruza); box-shadow: 0 0 0 4px rgba(47, 196, 178, 0.22); }
.pole input[type='date'] { display: block; }
.pole input[type='date']::-webkit-date-and-time-value { text-align: left; }
.pole--knopka { align-self: end; }
.forma__knopka { width: 100%; min-height: 54px; }

/* ---- Подвал сайта ---- */
.niz { background: #14203f; color: #f4ead7; padding: 52px 16px calc(26px + var(--snizu)); transition: background-color 1.2s; }
html.noch .niz { background: #0a1128; }
.niz__verh { max-width: 1160px; margin: 0 auto; display: grid; gap: 28px 20px; grid-template-columns: 1fr 1fr; }
.niz__brend { grid-column: 1 / -1; }
.logo--niz { color: #f4ead7; font-size: 18px; }
.niz__brend p { margin-top: 12px; max-width: 34ch; color: rgba(244, 234, 215, 0.75); font-size: 15px; line-height: 1.5; }
.niz__kolonka h3 { font: 600 13px 'Golos Text', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #ffb35c; margin-bottom: 10px; }
.niz__kolonka p { font-size: 15px; color: rgba(244, 234, 215, 0.88); margin-bottom: 6px; }
.niz__kolonka .ssylka { color: #7dffe6; }
.niz__melko { font-size: 13px !important; color: rgba(244, 234, 215, 0.6) !important; }
nav.niz__kolonka a { display: block; width: fit-content; color: rgba(244, 234, 215, 0.88); text-decoration: none; font-size: 15px; padding: 3px 0; }
nav.niz__kolonka a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.niz__niz {
  max-width: 1160px; margin: 34px auto 0; padding-top: 18px; border-top: 1px solid rgba(244, 234, 215, 0.15);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 14px; color: rgba(244, 234, 215, 0.62);
}

/* ---- Плавное появление при прокрутке ---- */
html.poyavlenie .razdel__shapka, html.poyavlenie .portret, html.poyavlenie .otzyv, html.poyavlenie .info-karta,
html.poyavlenie .karta-rajona, html.poyavlenie .forma, html.poyavlenie .pozicii {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 1.2s ease, border-color 1.2s ease, box-shadow 1.2s ease;
}
html.poyavlenie .otzyv { transition-delay: calc(var(--i, 0) * 110ms); }
html.poyavlenie .vidno { opacity: 1; transform: none; }

/* ---- Раскладка новых разделов на широких экранах ---- */
@media (min-width: 760px) {
  .razdel { padding: 88px 28px; }
  .razdel + .razdel { padding-top: 32px; }
  .pozicii { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .portrety { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .portret__foto { aspect-ratio: 5 / 4; }
  .otzyvy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .forma { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px; }
  .pole--shiroko { grid-column: 1 / -1; }
  .niz__verh { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .niz__brend { grid-column: auto; }
}
@media (min-width: 1000px) {
  .najti { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; gap: 20px; }
  .bron { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 48px; }
  .bron .razdel__shapka { margin-bottom: 0; }
}
@media (max-width: 600px) {
  /* на узком экране карта показывает только нужную часть, подписи крупнее */
  .k-podpis { font-size: 15px; }
  .k-podpis--park { font-size: 16px; }
  .k-podpis--reka { font-size: 15px; }
}
@media (max-width: 380px) {
  .vkladka { padding: 10px 11px; font-size: 14px; }
  .vkladka__chislo { display: none; }
}