/* Найдите себя на курорте «Мрия». Один файл стилей: токены брендбука,
   базовые элементы, экраны и игры. Дизайн «Доработка · яркий»: Kudry Sans
   Headline — заголовки, имена, таблички и цифры; Euclid Circular B — текст;
   срез угла вместо скругления; у каждой локации свой цвет (--zc, --zs, --zi,
   их ставит zoneVars в js/ui.js).
   Целевые браузеры Chrome 64 и Safari 14: без flex-gap и inset (только
   grid-gap у grid), env() только после запасного значения (Chrome до 69
   выбрасывает объявление целиком), mask всегда с -webkit-, :hover и
   :focus-visible отдельными правилами — браузер без :focus-visible
   выбрасывает список селекторов целиком. @keyframes только на transform и
   opacity; переходы состояний — ещё цвет и тень (кнопки), width у шкалы
   садовника, stroke-dashoffset у кольца таймера; filter не анимируется. */

@font-face { font-family: KS; src: url(../fonts/kudry-sans-headline.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: EU; src: url(../fonts/euclid-circular-b-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: EU; src: url(../fonts/euclid-circular-b-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: EU; src: url(../fonts/euclid-circular-b-600.woff2) format('woff2'); font-weight: 600 800; font-display: swap; }

:root {
  --night: #122820; --milk: #F4F0ED; --fog: #C1CCCE; --slate: #73797E; --graphite: #3D3D3D;
  --coral: #EC6C42; --red: #CA331C; --ok: #255C43;
  --shadow: 0 14px 30px rgba(18, 40, 32, .22);
  --font: EU, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --head: KS, Georgia, 'Times New Roman', serif;
  --zc: #EC6C42; --zs: #C8532D; --zi: #122820;
  --cut: 12px;        /* размер среза угла */
  --app-h: 100vh;     /* высота окна без адресной строки, ставит main.js */
  /* картина курорта 64×36 с лёгким размытием (~0,7 КБ): видна сразу, пока
     грузится настоящая; та же рамка, что у картины */
  --lqip: url(data:image/webp;base64,UklGRiADAABXRUJQVlA4IBQDAABwDgCdASpAACQAPvlkoFAqpaKitUFQHwlsAMAfaBDqDSCnbkc+Z56t9Ez5RmgcBsz7UZYuk7Zy/vAZsPQ1ddYu1a8ei7OkMMV69wiqTpuGruU4x2KywYOjgwrjUI+OBlOgwLGJA98v9H4p9ejgBnCD5EAw43ZmdiLblUawAM4VhJNfa+12BiaPBz2DHinKrZbzCyLxVwuD8XcksoDDnjLg8VzYYlKDllYHZceZGPh656w0fC/KIg3bI4Cz3vG4xiclrH13ldmUiZkpANosaMy6ke9+8ONg3fhnoF6P7uR/ccPEGN6DZzACaIQWoPq0yL1DBLSHxkJLINmOrP/pN/BK100sdfnKkePnBPzut5fQ6f2pQ9ZKyu3mHqayHYUQ3pi1MfSQ7Yz5bCYZuWhWUCn7zgvSNu6fukasg7xM9eaYSne1sQSCZULOOeR4pB3CO0VXfTA177e9icQ3M/qM14U3F6mQbO/txEBWRku3XXfXKGPeinYMz5fl4oidCGGl03SRDXMPi1PqXziiDM3iMwk+XK6Oat9PKbX+MOLFzsIuIyLty9g78jBgzuAUuvXp2ta5/9i/dRKJRlHZ2x8XowyHkifZjbeKvd8CeO5eUQFUljN43wIvyK/RiUuq1BmbOxr83ACrENE6wef9bOvwTRM5NT7ss8frEvbORvewSZ/lxn12yXy4NBuAFwLZd7qm/ujli75iASd0g450VB1AxFMgb3D3V0Fx/bUoJHIrPRpGJcS3KeP/fSVuzN1LgdBSWCz35kRGJ3y+TXXxSJoD7Z+Xh7INEzFAEGwMq2qIDDbmI7mrxK4XXlbj0fC/F1KEs6XCP/32+qBKaJ4thJB2p/3MvSi3IocsGqtK5tUvc+5AeeOr/NifLjdaoUJxMAGpc/CbSvtpb7gS7oe9t6alVK4KPSgtiOMC9Sc1yyvG8LrQiAv7j6ODj1wXtD9NcQqeSBdCi/wQOAwa40pI6SL45oQqjHJjBWMOHA8DJadBAMq4lA53q9JbhB0czAozHgFSaehNaqN/moevpHwNzQMFW/WquiAwAA==);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--milk); color: var(--graphite);
  font: 400 16px/1.5 var(--font);
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
  overflow: hidden; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
a { color: inherit; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* атрибут hidden сильнее display у кнопок: иначе .btn[hidden] остаётся видимой */
[hidden] { display: none !important; }

/* Рамка фокуса — только с клавиатуры. Браузер без :focus-visible выбросит
   второе правило и покажет рамку на любой фокус: лучше, чем никакой. */
:focus { outline: 3px solid var(--coral); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
/* программный фокус (заголовок экрана, маркер после задания) — без рамки и там,
   где :focus-visible не знают */
[tabindex="-1"]:focus, .pin:focus { outline: none; }

/* срез угла: верхний левый и нижний правый */
.btn, .icon-btn, .panel, .box-panel, .input, .fact, .photo, .rule, .say, .toast, .done-card, .back-btn, .steps li, .perks li,
.recipe, .ing, .food, .garden-wrap, .dance-pad, .sheet-title, .timer, .logo-plate, .pin-plate, .form-err,
.done-res, .done-tags li, .res-pop-in {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ---------- каркас экранов ---------- */
#app { position: fixed; top: 0; left: 0; right: 0; height: var(--app-h); overflow: hidden; }
.screen {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  visibility: hidden; opacity: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.screen.is-active { visibility: visible; opacity: 1; transition: opacity .35s ease, visibility 0s; }
.screen:not(.map-screen) { background: #fff; }
.page {
  position: relative; z-index: 1;
  min-height: 100%;
  max-width: 560px; margin: 0 auto;
  padding: 20px 20px 28px;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
}
/* карта под листом задания или под другим экраном: её бесконечные анимации не крутятся впустую */
#app.is-covered .map-screen *, .map-screen:not(.is-active) * { animation-play-state: paused !important; }

/* ---------- типографика ---------- */
.h1 { font-family: var(--head); font-weight: 400; font-size: 34px; line-height: 1.05; letter-spacing: -.01em; color: var(--night); }
.h2 { font-family: var(--head); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -.005em; color: var(--night); }
.eyebrow { font-family: var(--head); font-weight: 400; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.kicker { font-family: var(--head); font-size: 22px; line-height: 1.2; color: var(--slate); }
.lead { font-size: 15px; line-height: 1.5; color: var(--graphite); }
.muted { color: var(--slate); }
.small { font-size: 13px; line-height: 1.45; }
.dream { font-family: var(--head); }
@media (min-width: 900px) { .h1 { font-size: 46px; } }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 22px; border: 0;
  background: var(--night); color: #fff;
  font: 600 16.5px/1.2 var(--font); text-align: center; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn:hover { background: #20372D; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--coral); }
.btn[disabled] { background: #fff; color: var(--fog); box-shadow: inset 0 0 0 1.5px var(--fog); cursor: default; transform: none; }
/* .btn--accent — главная кнопка экрана; выглядит как .btn, класс остаётся крючком для дизайна */
.btn--ghost { background: var(--fog); color: var(--night); }
.btn--ghost:hover { background: #B2BEC0; }
.btn--light { background: #fff; color: var(--night); }
.btn--light:hover { background: var(--milk); }
.btn--block { display: flex; width: 100%; }
.btn--go { justify-content: space-between; text-align: left; }
.btn--go .ico-go { width: 20px; height: 20px; flex: none; margin-left: 14px; }
.btn .ico { width: 20px; height: 20px; margin-right: 10px; flex: none; }
.link-btn { display: inline-flex; align-items: center; padding: 4px 0; border: 0; background: none; color: inherit; font-size: 14px; font-weight: 500; text-decoration: none; opacity: .8; cursor: pointer; }
.link-btn:hover { opacity: 1; text-decoration: underline; }
.link-btn svg { width: 18px; height: 18px; margin-right: 6px; }
.icon-btn {
  --cut: 8px; width: 44px; height: 44px; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--night); cursor: pointer;
}
.icon-btn svg { width: 22px; height: 22px; }
/* у элементов со срезом угла внешнюю рамку фокуса срезает clip-path — кольцо
   внутри; у предметов игр оно ночью, чтобы не путать с коралловым «выбран» */
.icon-btn:focus-visible, .back-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--coral); }
.ing:focus-visible, .food:focus-visible, .dance-pad:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--night); }

/* ---------- плашка cookie, тост ---------- */
.cookie {
  position: fixed; left: 12px; right: 12px; bottom: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60;
  max-width: 520px; margin: 0 auto; padding: 14px 16px;
  background: #fff; box-shadow: var(--shadow);
  font-size: 14px; line-height: 1.45;
}
.cookie-row { display: flex; flex-wrap: wrap; align-items: center; margin: 10px -4px 0; }
.cookie-row .btn { margin: 4px; }
.toast {
  --cut: 10px; position: fixed; left: 50%; top: 76px; top: calc(76px + env(safe-area-inset-top)); z-index: 70;
  width: calc(100% - 32px); max-width: 440px; transform: translate(-50%, -12px); opacity: 0;
  padding: 14px 16px; background: var(--night); color: #fff;
  font-size: 15px; line-height: 1.45;
  transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---------- логотип: горизонтальная версия, лотос слева ---------- */
.logo-plate {
  --cut: 9px; position: absolute; z-index: 6; top: 16px; top: calc(16px + env(safe-area-inset-top)); left: 16px;
  display: flex; align-items: center; height: 48px; padding: 0 14px; background: #fff; color: var(--night);
}
.logo-plate svg { width: 96px; height: auto; }
a.logo-plate { text-decoration: none; }

/* ---------- стикер, счётчик и ряд полароидов «Ваша команда» ---------- */
.board { position: relative; }
.board-head { display: flex; align-items: center; }
.sticker {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 6px;
  background: var(--coral); color: var(--night); font-family: var(--head); font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; transform: rotate(-4deg); box-shadow: 0 6px 14px rgba(18, 40, 32, .25);
  animation: stickerPop 5s ease-in-out .3s infinite;
}
.board-n {
  display: inline-flex; align-items: center; height: 30px; margin-left: 10px; padding: 0 10px; border-radius: 6px; background: #fff;
  font-family: var(--head); font-size: 15px; color: var(--night); white-space: nowrap; box-shadow: 0 6px 14px rgba(18, 40, 32, .2);
}
.board-row { position: relative; display: flex; align-items: flex-start; margin-top: 8px; padding: 4px 2px; }

/* снимок: пустой — картинка; цветной — кнопка на результат игры */
.pola { position: relative; display: block; flex: none; margin: 0 -6px 0 0; transform: rotate(var(--rot)); }
button.pola { border: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .15s ease; }
button.pola:hover { transform: rotate(var(--rot)) translateY(-3px); }
button.pola:focus-visible { outline: none; }
button.pola:focus-visible .pola-in { box-shadow: 0 0 0 3px var(--coral), 0 10px 18px rgba(18, 40, 32, .28); }
.pola-in { position: relative; display: block; width: 64px; height: 80px; border-radius: 3px; background: #fff; box-shadow: 0 10px 18px rgba(18, 40, 32, .28); }
.pola-pic { position: absolute; left: 5px; top: 5px; width: 54px; height: 54px; overflow: hidden; border-radius: 2px; background: var(--milk); display: flex; align-items: center; justify-content: center; color: var(--slate); }
.pola.is-on .pola-pic { background: var(--zc); color: var(--zi); }
.pola-ic { width: 25px; height: 25px; }
.pola-face { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pola-face .face-ic { width: 26px; height: 26px; }
/* подпись — имя (ui.js): на телефоне одного кегля на пустом и собранном
   снимке, чуть левее середины — правый край снимка закрывает следующий, а
   «Константин» длинный; собранный отличается цветом */
.pola-cap { position: absolute; left: 0; right: 0; bottom: 2px; padding-right: 6px; font-family: var(--head); font-size: 11px; letter-spacing: -.02em; line-height: 21px; text-align: center; color: #3D3D3D; white-space: nowrap; overflow: hidden; }
.pola.is-on .pola-cap { color: var(--night); }
.pola-tape { position: absolute; left: 50%; top: -6px; width: 26px; height: 11px; margin-left: -13px; background: rgba(244, 240, 237, .85); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
/* снимок ниже 50 % — «стажёр» */
.pola-tag {
  position: absolute; left: 50%; top: -7px; z-index: 1; padding: 1px 6px; transform: translateX(-50%) rotate(-4deg);
  background: var(--ok); color: #fff; font-family: var(--head); font-size: 9px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.pola.is-fresh .pola-in { animation: polaDrop .9s cubic-bezier(.3, 1.4, .5, 1) var(--d, .3s) both; }
.pass {
  position: relative; flex: none; margin-left: 10px; width: 60px; height: 80px; padding: 6px; transform: rotate(5deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer;
  border-radius: 6px; background: #fff; border: 2px dashed var(--coral); color: var(--coral);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 6px, #000 6.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 6px, #000 6.5px) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 6px, #000 6.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 6px, #000 6.5px) 100% 0 / 51% 100% no-repeat;
}
.pass svg { width: 20px; height: 20px; }
.pass span { margin-top: 4px; font-family: var(--head); font-size: 10px; line-height: 1.15; letter-spacing: .06em; text-transform: uppercase; color: var(--night); }
.pass.is-open { background: var(--coral); border-color: var(--coral); color: var(--night); animation: mbob 1.6s ease-in-out infinite; }
.pass:focus-visible { outline: 3px solid var(--night); }
/* узкий телефон: ряд снимков с билетом должен поместиться в экран, иначе
   билет розыгрыша за краем и не нажимается (375 и 360 px — срезан, 320 — не
   виден). Снимки и билет меньше, наложение то же — подписи не закрываются */
@media (max-width: 389px) {
  .pola-in { width: 58px; height: 74px; }
  .pola-pic { width: 48px; height: 48px; }
  .pola-ic { width: 23px; height: 23px; }
  .pola-cap, .pola.is-on .pola-cap { padding-right: 6px; font-size: 10px; letter-spacing: -.03em; }
  .pass { width: 56px; height: 74px; margin-left: 8px; padding: 6px 4px; }
}
@media (max-width: 339px) {
  .pola-in { width: 52px; height: 68px; }
  .pola-pic { left: 4px; top: 4px; width: 44px; height: 44px; }
  .pola-ic { width: 21px; height: 21px; }
  .pola-cap, .pola.is-on .pola-cap { font-size: 9px; letter-spacing: -.04em; line-height: 19px; }
  .pass { width: 50px; height: 68px; margin-left: 6px; }
  .pass span { font-size: 9px; }
}
@media (min-width: 900px) {
  .board-row { padding: 6px 4px 4px; }
  .pola { margin-right: 10px; }
  .pola-in { width: 80px; height: 97px; }
  .pola-pic { left: 7px; top: 7px; width: 66px; height: 66px; }
  .pola-cap { padding-right: 0; font-size: 13px; letter-spacing: -.01em; line-height: 24px; }
  .pola.is-on .pola-cap { font-size: 15px; }
  .pola-ic { width: 30px; height: 30px; }
  .pola-tag { font-size: 10px; line-height: 16px; }
  .pass { width: 92px; height: 98px; margin-left: 6px; }
  .pass svg { width: 26px; height: 26px; }
  .pass span { font-size: 11px; }
}

/* конфетти: частицы со своими --dx, --dy, --rr (confetti в ui.js) */
.confetti { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; z-index: 3; }
/* backwards, а не both: после разлёта частица возвращается в центр (она уже
   невидима) — иначе осталась бы на краю и раздувала прокрутку окна */
.confetti i { position: absolute; left: 0; top: 0; margin: -4px 0 0 -4px; opacity: 0; animation: confetti 1.5s cubic-bezier(.2, .7, .3, 1) backwards; }

/* ---------- ситуативная кнопка голосования: билет с вырезами, плашка срока ---------- */
.vote-cta {
  position: relative; display: block; margin-top: 14px; color: #492A47; text-decoration: none;
  transform: rotate(-1.5deg); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
  filter: drop-shadow(0 14px 24px rgba(4, 70, 120, .35));
}
.vote-cta:hover { transform: rotate(1deg) translateY(-4px) scale(1.04); }
/* шаг голосования: у каждой кнопки та же тень и наклон, и на наведение
   отзывается только она (обёртка — тень срезанной кнопки обрезал бы её clip-path) */
.vote-actions { margin-top: 14px; }
.vote-act {
  display: block; transform: rotate(-1.5deg); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
  filter: drop-shadow(0 14px 24px rgba(4, 70, 120, .35));
}
.vote-act + .vote-act { margin-top: 12px; }
.vote-act:hover { transform: rotate(1deg) translateY(-4px) scale(1.02); }
.vote-cta:focus-visible { outline: none; }
.vote-cta:focus-visible .vote-body { box-shadow: inset 0 0 0 3px var(--coral); }
.vote-tag {
  position: absolute; left: 22px; top: -13px; z-index: 2; display: flex; align-items: center; height: 26px; padding: 0 10px 0 9px;
  background: var(--coral); color: var(--night); font-family: var(--head); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.vote-tag i { width: 8px; height: 8px; margin-right: 7px; background: var(--night); transform: rotate(45deg); }
.vote-body {
  display: flex; align-items: center; height: 74px; padding: 6px 14px 0 24px; background: #fff;
  clip-path: polygon(14px 0, 100% 0, 100% 36%, calc(100% - 10px) 50%, 100% 64%, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 64%, 10px 50%, 0 36%, 0 14px);
}
.vote-cup { flex: none; width: 30px; height: 30px; margin-right: 14px; }
.vote-text { flex: 1; font-family: var(--head); font-size: 16px; line-height: 1.1; }
.vote-go { flex: none; width: 44px; height: 44px; margin-left: 12px; display: flex; align-items: center; justify-content: center; background: #492A47; color: #fff; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.vote-go svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .vote-body { height: 86px; } .vote-text { font-size: 21px; } }

/* ---------- карта ---------- */
/* фон — море нижнего края картины: виден, пока она грузится, и под полосой
   моря (map.js), в которую уходит отражённый низ картины */
.map-screen { overflow: hidden; background: #0582DB; background-image: linear-gradient(90deg, #0251C0, #0582DB 50%, #079FED); }
.map-viewport {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
  overflow: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y;
}
.map-viewport::-webkit-scrollbar { display: none; }
.map-viewport.is-drag { cursor: grabbing; }
.map-viewport.is-fit { cursor: default; }
/* десктоп: кадр неподвижен всегда (map.js), карта не тянется и не
   прокручивается колесом — и до первого расчёта кадра тоже */
.map-viewport.is-fixed { overflow: hidden; cursor: default; }
@media (min-width: 900px) { .map-viewport { overflow: hidden; cursor: default; } }
.map-canvas { position: relative; margin: 0 auto; background: var(--lqip) 0 0 / 100% 100% no-repeat; }
.map-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; }
.map-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* полосы вокруг картины (размеры и фон ставит map.js): край картины,
   отражённый наружу и растворённый в фоне экрана — шва на стыке нет.
   Снизу и сверху отражение короткое, 48 px: дальше были бы видны
   перевёрнутые скалы правого угла и яхта; по бокам — холмы, их можно
   растворять дольше */
.map-sea, .map-side, .map-top { position: absolute; height: 0; pointer-events: none; background-repeat: no-repeat; }
.map-top {
  left: 0; bottom: 100%; width: 100%; background-position: 0 0; transform: scaleY(-1);
  -webkit-mask: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0) 48px);
  mask: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0) 48px);
}
.map-sea {
  left: 0; top: 100%; width: 100%; background-position: 0 100%; transform: scaleY(-1);
  -webkit-mask: linear-gradient(to top, #000, rgba(0, 0, 0, 0) 48px);
  mask: linear-gradient(to top, #000, rgba(0, 0, 0, 0) 48px);
}
.map-side { top: 0; width: 0; height: 100%; transform: scaleX(-1); }
.map-side.is-l {
  right: 100%; background-position: 0 0;
  -webkit-mask: linear-gradient(to right, #000, rgba(0, 0, 0, 0));
  mask: linear-gradient(to right, #000, rgba(0, 0, 0, 0));
}
.map-side.is-r {
  left: 100%; background-position: 100% 0;
  -webkit-mask: linear-gradient(to left, #000, rgba(0, 0, 0, 0));
  mask: linear-gradient(to left, #000, rgba(0, 0, 0, 0));
}
.map-logo { position: absolute; }
.map-help { position: absolute; top: 14px; right: 14px; z-index: 6; }

/* маркер сотрудника: ромб-основание и пульс, табличка с именем, лепесток с портретом */
.pin { position: absolute; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.pin-pulse, .pin-base { position: absolute; display: block; }
/* пульс раздувается до ×2,3 и накрыл бы соседнюю точку интереса — нажатия не ловит */
.pin-pulse { left: -40px; top: -20px; width: 80px; height: 40px; animation: mpulse 2s ease-out infinite; pointer-events: none; }
.pin-pulse svg, .pin-base svg { width: 100%; height: 100%; overflow: visible; }
.pin-pulse path { fill: var(--zc); opacity: .85; }
.pin-base { left: -16px; top: -8px; width: 32px; height: 16px; }
.pin-base path { fill: var(--zc); stroke: #fff; stroke-width: 4; }
/* колонка шире таблички: нажатия ловят только табличка и лепесток, иначе
   прозрачные поля колонки закрывали бы точки интереса рядом */
.pin-col {
  position: absolute; left: -90px; bottom: 4px; width: 180px; display: flex; flex-direction: column; align-items: center; pointer-events: none;
  animation: mbob 2.4s ease-in-out infinite; filter: drop-shadow(0 10px 16px rgba(18, 40, 32, .45));
}
.pin-plate { --cut: 6px; display: block; margin-bottom: 8px; padding: 5px 10px 6px; background: #fff; text-align: center; white-space: nowrap; pointer-events: auto; }
.pin .petal { pointer-events: auto; }
.pin-plate b { display: block; font-family: var(--head); font-weight: 400; font-size: 13px; line-height: 1.2; color: var(--night); }
.pin-plate small { display: block; font-size: 11px; font-weight: 500; color: var(--graphite); }
.pin .petal { transition: transform .2s ease; transform-origin: 50% 100%; }
.pin:hover .petal { transform: scale(1.18); }
.pin:hover .pin-plate { background: var(--night); }
.pin:hover .pin-plate b { color: #fff; }
.pin:hover .pin-plate small { color: var(--fog); }
.pin:focus-visible { outline: none; }
.pin:focus-visible .petal { transform: scale(1.18); }
.pin:focus-visible .pin-plate { background: var(--night); }
.pin:focus-visible .pin-plate b { color: #fff; }
.pin:focus-visible .pin-plate small { color: var(--fog); }
.pin.is-done .pin-pulse { display: none; }
.pin.is-done .pin-col { animation-duration: 3.4s; }
.pin.is-done .petal-ck { display: flex; }
.petal { position: relative; display: block; flex: none; }
.petal-out, .petal-in, .petal-sh, .petal-art { position: absolute; display: block; }
.petal-out { left: 0; top: 0; width: 100%; height: 100%; background: #fff; clip-path: polygon(50% 0, 100% 37%, 72% 77%, 50% 100%, 28% 77%, 0 37%); }
.petal-in { background: var(--zc); overflow: hidden; clip-path: polygon(50% 0, 100% 37%, 72% 77%, 50% 100%, 28% 77%, 0 37%); }
.petal-sh { left: 0; top: 0; width: 100%; height: 100%; background: var(--zs); clip-path: polygon(50% 0, 100% 37%, 72% 77%, 50% 100%); }
.petal-art { left: 0; top: 0; width: 100%; height: 100%; }
.petal-ic { position: absolute; left: 50%; top: 42%; width: 46%; height: auto; transform: translate(-50%, -50%); color: var(--zi); }
.petal-ck {
  position: absolute; right: -4px; top: 16%; width: 17px; height: 17px; display: none; align-items: center; justify-content: center;
  background: var(--zs); color: #fff; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.petal-ck svg { width: 70%; height: 70%; }

.map-dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none;
  padding: 0 14px 14px; padding: 0 14px calc(14px + env(safe-area-inset-bottom));
}
/* нажатия ловят только ряд снимков и кнопки: прозрачные поля панели (правее
   стикера и билета, над билетом голосования) пропускают их к маркерам под
   ними; ряд шириной по снимкам, а не во всю панель */
.map-dock .board-row, .map-dock .js-all > *, .map-dock .js-vote > * { pointer-events: auto; }
.map-dock .board-row { width: max-content; }
.dock-side { margin-top: 4px; }
.dock-next { margin-top: 12px; width: 100%; }
/* телефон лёжа: панель в одну строку, как на десктопе, — иначе она
   занимает почти весь экран и над ней не помещается ни один маркер */
@media (max-width: 899px) and (max-height: 500px) and (min-width: 560px) {
  .map-dock { display: flex; align-items: flex-end; }
  .dock-side { flex: 1 1 auto; min-width: 0; margin: 0 0 0 12px; }
  .map-dock .vote-text { font-size: 14px; }
}
@media (min-width: 900px) {
  .map-dock { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 32px 24px; padding: 0 32px calc(24px + env(safe-area-inset-bottom)); }
  .dock-side { width: 470px; margin: 0 0 0 24px; }
  .logo-plate { top: 24px; left: 32px; }
  .map-help { top: 24px; right: 32px; }
}

/* ---------- точки интереса на карте ---------- */
/* объёмный рисунок 34 px (js/poi-art.js) стоит на изометрической тени. Классом
   is-live (расписание в facts.js) на 2,6 с оживает рисунок и его детали и
   возвращается в ту же позу: каждый кадр начинается и кончается в покое, а
   длительность × повторы + задержка — не дольше 2,6 с (проверяет
   tools/bench.py). Все слои — HTML на холсте рисунка, опоры движения — в
   процентах холста. Найденный — коралловое кольцо вокруг тени и галочка */
.poi { position: absolute; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer; }
.poi-art { position: absolute; left: 5px; top: 3px; width: 34px; height: 34px; transform-origin: 50% 94%; transition: transform .3s ease; pointer-events: none; }
@media (hover: hover) { .poi:hover .poi-art { transform: scale(1.1); } }
/* белый кант внутри (внешнюю тень срезал бы clip-path) — плашка читается и
   на пёстрой картине, и поверх рисунка */
.poi-ck {
  position: absolute; z-index: 1; right: -1px; top: -1px; width: 16px; height: 16px; display: none; align-items: center; justify-content: center;
  background: var(--coral); color: var(--night); box-shadow: inset 0 0 0 1.5px #fff; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.poi-ck svg { width: 10px; height: 10px; }
.poi.is-found .poi-ck { display: flex; }
.poi:focus-visible { outline: none; }
.poi:focus-visible::after { content: ""; position: absolute; left: 1px; top: 1px; right: 1px; bottom: 1px; border: 3px solid var(--coral); border-radius: 50%; }
/* слои: тень на земле, рисунок с деталями (pa-o), накладки */
.pa, .pa-o, .pa-b, .pa-p, .pa-gl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.pa-b, .pa-p { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.pa-o { transform-origin: 50% 94%; }
.pa-sh { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 28, 10, .45), rgba(40, 28, 10, .2) 60%, rgba(40, 28, 10, 0)); }
.poi.is-found .pa-sh::after { content: ""; position: absolute; left: -16%; top: -30%; right: -16%; bottom: -30%; border: 2px solid var(--coral); border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.pa-fx { position: absolute; display: block; opacity: 0; }
.pa-fx svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* блик пробегает по рисунку: полоса под маской самого рисунка */
.pa-gl { overflow: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.pa-gl b { position: absolute; left: -50%; top: -20%; width: 34%; height: 140%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .65), rgba(255, 255, 255, 0)); opacity: 0; transform: rotate(20deg); }
.poi.is-live .pa-gl b { animation: paGlint 1.2s ease-in-out .4s both; }
@keyframes paGlint { 0% { opacity: 0; transform: translateX(0) rotate(20deg); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(480%) rotate(20deg); } }
/* искры-звёздочки */
.pa-st1, .pa-st2 { filter: drop-shadow(0 0 1.5px rgba(255, 190, 70, .95)); }
.pa--stones .pa-st1 { left: 66%; top: 8%; width: 24%; height: 24%; }
.pa--stones .pa-st2 { left: 14%; top: 24%; width: 17%; height: 17%; }
.pa--kurimiya .pa-st1 { left: 72%; top: -6%; width: 24%; height: 24%; }
.poi.is-live .pa-st1 { animation: paStar 1.4s ease-in-out .3s both; }
.poi.is-live .pa-st2 { animation: paStar 1.4s ease-in-out .9s both; }
@keyframes paStar { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: .8; transform: scale(.7) rotate(80deg); } 100% { opacity: 0; transform: scale(.2) rotate(90deg); } }
/* тории — лёгкий поклон и блик */
.poi.is-live .pa--six_senses .pa-o { animation: paBow 1.6s ease-in-out both; }
@keyframes paBow { 0% { transform: none; } 35% { transform: scale(1.02, .96); } 70%, 100% { transform: none; } }
/* камень покачивается, на нём вспыхивают искры */
.poi.is-live .pa--stones .pa-o { animation: paWobble 1.8s ease-in-out both; }
@keyframes paWobble { 0% { transform: none; } 20% { transform: rotate(-4deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } 100% { transform: none; } }
/* деревья, роза, дерево желаний — качаются от ветра от основания */
.poi.is-live .pa--niwaki .pa-o, .poi.is-live .pa--kurimiya .pa-o, .poi.is-live .pa--rosarium .pa-o { animation: paSway 2.4s ease-in-out both; }
.pa--kurimiya .pa-o { transform-origin: 40% 95%; }
.pa--rosarium .pa-o { transform-origin: 56% 94%; }
@keyframes paSway { 0% { transform: none; } 26% { transform: rotate(-4deg) skewX(2deg); } 54% { transform: rotate(3deg) skewX(-1.5deg); } 80% { transform: rotate(-1deg); } 100% { transform: none; } }
/* сосна: опускается трос, сосна поднимается, качнувшись, и встаёт на место; тень сжимается */
.pa--pine .pa-o { transform-origin: 50% 10%; }
.pa-cable { left: 49%; top: -36%; width: 1.5px; height: 46%; background: #5B6670; transform-origin: 50% 0; }
.poi.is-live .pa--pine .pa-o { animation: paLift 2.6s ease-in-out both; }
.poi.is-live .pa--pine .pa-cable { animation: paCable 2.6s ease-in-out both; }
.poi.is-live .pa--pine .pa-sh { animation: paShLift 2.6s ease-in-out both; }
@keyframes paLift { 0%, 30% { transform: none; } 50% { transform: translateY(-9%) rotate(-3deg); } 64% { transform: translateY(-9%) rotate(2.5deg); } 80% { transform: rotate(-.5deg); } 100% { transform: none; } }
@keyframes paCable { 0% { opacity: 0; transform: scaleY(0); } 3% { opacity: 1; } 20%, 30% { transform: none; } 50%, 64% { transform: scaleY(.8); } 80% { transform: none; } 96% { opacity: 1; transform: scaleY(0); } 100% { opacity: 0; transform: scaleY(0); } }
@keyframes paShLift { 0%, 30% { transform: none; } 50%, 64% { transform: scale(.7); opacity: .55; } 80%, 100% { transform: none; opacity: 1; } }
/* божья коровка переваливается с лапки на лапку */
.poi.is-live .pa--forestino .pa-o { animation: paWaddle 2.2s ease-in-out both; }
@keyframes paWaddle { 0% { transform: none; } 12% { transform: translateX(-3%) rotate(-7deg); } 24% { transform: translateX(1%) rotate(6deg); } 36% { transform: translateX(4%) rotate(-5deg); } 48% { transform: translateX(3%) rotate(4deg); } 62% { transform: rotate(-2deg); } 76%, 100% { transform: none; } }
/* гроздь качается маятником на черенке */
.pa--wine_tower .pa-o { transform-origin: 55% 12%; }
.poi.is-live .pa--wine_tower .pa-o { animation: paSwing 2.4s ease-in-out both; }
@keyframes paSwing { 0% { transform: none; } 22% { transform: rotate(6deg); } 46% { transform: rotate(-4.5deg); } 66% { transform: rotate(3deg); } 84% { transform: rotate(-1deg); } 100% { transform: none; } }
/* маска покачивается на воде, из трубки поднимаются пузырьки */
.poi.is-live .pa--diving .pa-o { animation: paBob 2.4s ease-in-out both; }
.poi.is-live .pa--diving .pa-sh { animation: paShBob 2.4s ease-in-out both; }
@keyframes paBob { 0% { transform: none; } 30% { transform: translateY(-6%) rotate(-3deg); } 60% { transform: translateY(-2%) rotate(2deg); } 100% { transform: none; } }
@keyframes paShBob { 0% { transform: none; } 30% { transform: scale(.85); opacity: .7; } 60% { transform: scale(.95); } 100% { transform: none; opacity: 1; } }
.pa-bb1, .pa-bb2, .pa-bb3 { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0, #fff 22%, rgba(190, 232, 250, .85) 30%, rgba(110, 190, 232, .7) 68%, rgba(110, 190, 232, 0) 72%); }
.pa-bb1 { left: 82%; top: 4%; width: 13%; height: 13%; }
.pa-bb2 { left: 70%; top: 14%; width: 10%; height: 10%; }
.pa-bb3 { left: 90%; top: 22%; width: 8%; height: 8%; }
.poi.is-live .pa-bb1 { animation: paBubble 1.8s ease-out .1s both; }
.poi.is-live .pa-bb2 { animation: paBubble 1.8s ease-out .45s both; }
.poi.is-live .pa-bb3 { animation: paBubble 1.8s ease-out .8s both; }
@keyframes paBubble { 0% { opacity: 0; transform: none; } 12% { opacity: 1; } 80% { opacity: .9; transform: translateY(-260%); } 100% { opacity: 0; transform: translateY(-320%); } }
/* хлопушка хлопает */
.pa-clap { transform-origin: 13% 37%; }
.poi.is-live .pa-clap { animation: paClap 1.8s ease-in-out both; }
.poi.is-live .pa--amphibian .pa-b { animation: paJolt 1.8s ease-in-out both; }
@keyframes paClap { 0% { transform: none; } 14% { transform: rotate(13deg); } 19% { transform: rotate(10deg); } 24%, 34% { transform: rotate(13deg); } 64%, 100% { transform: none; } }
@keyframes paJolt { 0%, 12% { transform: none; } 15% { transform: translateY(2%); } 22%, 100% { transform: none; } }
/* ракета дрожит, разгорается пламя, клубится дым */
.poi.is-live .pa--iss_flag .pa-o { animation: paRocket 2.6s ease-in-out both; }
@keyframes paRocket { 0% { transform: none; } 10% { transform: translate(-.6%, .6%); } 16% { transform: translate(.6%, -.6%); } 22% { transform: translateX(-.6%); } 28% { transform: translate(1%, -1.5%); } 50%, 70% { transform: translate(4%, -5%); } 100% { transform: none; } }
.pa-fire { left: 0; top: 66%; width: 34%; height: 34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 150, .95), rgba(255, 160, 60, .7) 50%, rgba(255, 120, 40, 0)); }
.poi.is-live .pa-fire { animation: paFire 2.6s ease-in-out both; }
@keyframes paFire { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: 1; transform: none; } 30% { transform: scale(.85); } 40% { transform: scale(1.1); } 50% { transform: scale(.9); } 70% { opacity: .9; transform: none; } 100% { opacity: 0; transform: scale(.6); } }
.pa-puff1, .pa-puff2 { border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 240, 233, .95), rgba(244, 240, 233, .6) 60%, rgba(244, 240, 233, 0)); }
.pa-puff1 { left: -6%; top: 72%; width: 26%; height: 26%; }
.pa-puff2 { left: 14%; top: 84%; width: 20%; height: 20%; }
.poi.is-live .pa-puff1 { animation: paPuff 1.6s ease-out .2s both; }
.poi.is-live .pa-puff2 { animation: paPuff 1.6s ease-out .45s both; }
@keyframes paPuff { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: .95; } 100% { opacity: 0; transform: translate(-15%, 10%) scale(1.6); } }
/* Булочка дышит и машет хвостом из-за спины */
.poi.is-live .pa--bulochka .pa-o { animation: paBreathe 2.4s ease-in-out both; }
.pa-tail { transform-origin: 67% 48%; }
.poi.is-live .pa-tail { animation: paTail 2.4s ease-in-out both; }
@keyframes paBreathe { 0% { transform: none; } 30% { transform: scale(1.02, .97); } 60% { transform: scale(.99, 1.02); } 100% { transform: none; } }
@keyframes paTail { 0% { transform: none; } 18% { transform: rotate(-12deg); } 38% { transform: rotate(8deg); } 58% { transform: rotate(-9deg); } 78% { transform: rotate(4deg); } 100% { transform: none; } }
/* ноутбук: экран подпрыгивает, по нему пробегает блик; отель — блик */
.poi.is-live .pa--office .pa-o { animation: paBow 1.6s ease-in-out both; }
/* салат подпрыгивает с оттяжкой, тень сжимается */
.poi.is-live .pa--eureka .pa-o { animation: paHop 2s ease-in-out both; }
.poi.is-live .pa--eureka .pa-sh { animation: paShHop 2s ease-in-out both; }
@keyframes paHop { 0% { transform: none; } 18% { transform: translateY(1%) scale(1.05, .93); } 40% { transform: translateY(-10%) scale(.97, 1.04); } 60% { transform: scale(1.06, .92); } 74% { transform: translateY(-2%) scale(.99, 1.02); } 86%, 100% { transform: none; } }
@keyframes paShHop { 0%, 18% { transform: none; } 40% { transform: scale(.7); opacity: .6; } 60% { transform: none; opacity: 1; } 100% { transform: none; } }
/* кофе: поднимается пар, чашка вздрагивает */
.pa-cu1, .pa-cu2 { width: 13%; height: 30%; filter: drop-shadow(0 0 1px rgba(60, 40, 20, .4)); }
.pa-cu1 { left: 28%; top: -16%; }
.pa-cu2 { left: 46%; top: -20%; }
.pa--aster .pa-o { transform-origin: 46% 94%; }
.poi.is-live .pa--aster .pa-o { animation: paJiggle 2.4s ease-in-out both; }
.poi.is-live .pa-cu1 { animation: paSteam 2s ease-out both; }
.poi.is-live .pa-cu2 { animation: paSteam 2s ease-out .35s both; }
@keyframes paSteam { 0% { opacity: 0; transform: translateY(20%); } 25% { opacity: .95; } 70% { opacity: .6; transform: translateY(-30%); } 100% { opacity: 0; transform: translateY(-50%); } }
@keyframes paJiggle { 0%, 62% { transform: none; } 68% { transform: rotate(-3deg); } 74% { transform: rotate(2deg); } 80%, 100% { transform: none; } }
/* диван: проседает, будто сели, лампа загорается */
.poi.is-live .pa--relax .pa-o { animation: paSit 2.2s ease-in-out both; }
@keyframes paSit { 0% { transform: none; } 30% { transform: scale(1.03, .95); } 50% { transform: scale(.99, 1.02); } 70%, 100% { transform: none; } }
.pa-lamp { left: 54%; top: 10%; width: 30%; height: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 226, 140, .95), rgba(255, 214, 110, .45) 55%, rgba(255, 214, 110, 0)); }
.poi.is-live .pa-lamp { animation: paLamp 2.4s ease-in-out both; }
@keyframes paLamp { 0% { opacity: 0; } 22% { opacity: .9; } 30% { opacity: .45; } 40%, 72% { opacity: .95; } 100% { opacity: 0; } }
/* пинг-понг: мяч дважды отскакивает от ракетки */
.poi.is-live .pa-ball { animation: paBall 2.4s ease-in-out both; }
.poi.is-live .pa--sport .pa-b { animation: paPaddle 2.4s ease-in-out both; }
.pa--sport .pa-b { transform-origin: 19% 84%; }
@keyframes paBall { 0% { transform: none; } 20% { transform: translate(8%, 26%) scale(.9); } 40% { transform: translate(-2%, -6%); } 50% { transform: none; } 70% { transform: translate(8%, 26%) scale(.9); } 88% { transform: translate(-1%, -3%); } 100% { transform: none; } }
@keyframes paPaddle { 0%, 14% { transform: none; } 20% { transform: rotate(-4deg); } 32%, 64% { transform: none; } 70% { transform: rotate(-4deg); } 82%, 100% { transform: none; } }
/* попкорн: ведёрко подпрыгивает, зёрна выскакивают */
.poi.is-live .pa--library .pa-o { animation: paPop 2.2s ease-in-out both; }
@keyframes paPop { 0% { transform: none; } 12% { transform: scale(1.04, .95); } 24% { transform: none; } 40% { transform: scale(1.03, .96); } 52%, 100% { transform: none; } }
.pa-k1, .pa-k2, .pa-k3 { width: 15%; height: 15%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFBEF, #F6E3B4 60%, #E8C77E); box-shadow: 0 0 0 .5px rgba(150, 110, 40, .5); }
.pa-k1 { left: 36%; top: 14%; }
.pa-k2 { left: 52%; top: 12%; }
.pa-k3 { left: 44%; top: 10%; }
.poi.is-live .pa-k1 { animation: paKernelL 1.4s ease-out .1s both; }
.poi.is-live .pa-k2 { animation: paKernelR 1.4s ease-out .5s both; }
.poi.is-live .pa-k3 { animation: paKernelL 1.4s ease-out .9s both; }
@keyframes paKernelL { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; } 45% { transform: translate(-60%, -230%); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-110%, -40%) rotate(-60deg); } }
@keyframes paKernelR { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; } 45% { transform: translate(60%, -230%); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(110%, -40%) rotate(60deg); } }
/* дом с садом: из кустов вылетают листья */
.pa-lf1 { left: 4%; top: 52%; width: 18%; height: 18%; }
.pa-lf2 { left: 78%; top: 50%; width: 15%; height: 15%; }
.poi.is-live .pa-lf1 { animation: paLeafL 2s ease-out .2s both; }
.poi.is-live .pa-lf2 { animation: paLeafR 2s ease-out .6s both; }
@keyframes paLeafL { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-60%, -220%) rotate(-40deg); } }
@keyframes paLeafR { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(60%, -220%) rotate(40deg); } }
.poi.is-live .pa--green .pa-o, .poi.is-live .pa--dorm .pa-o { animation: paBow 1.6s ease-in-out both; }

/* ---------- паспорт курорта: книжка в углу карты ---------- */
/* вся плашка — обложка паспорта цвета ночи с крупным лотосом; новый штамп —
   обложка откидывается, под ней страница с ромбиками */
.passport-btn { position: absolute; top: 14px; right: 66px; z-index: 6; background: var(--night); perspective: 320px; }
.pp-book { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; }
.pp-page {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 6px 5px; background: var(--milk);
  display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 2px 1px; align-content: center;
}
/* ромбик на каждый факт: 20 — сетка 5 × 4 */
.pp-page i { display: block; width: 5px; height: 5px; margin: auto; border: 1.2px solid var(--slate); transform: rotate(45deg) scale(.85); }
.pp-page i.is-on { border-color: var(--coral); background: var(--coral); }
.pp-page i.is-new { animation: stampIn .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.pp-cover {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--night); transform-origin: left center; transition: transform .55s ease;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.icon-btn .pp-cover svg { width: 32px; height: auto; }
.pp-book.is-open .pp-cover { transform: rotateY(-160deg); }
.passport-btn.is-full, .passport-btn.is-full .pp-cover { background: var(--coral); }
/* кольцо фокуса поверх обложки: своё у кнопки она закрывает */
.passport-btn::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
.passport-btn:focus-visible::after { box-shadow: inset 0 0 0 3px var(--coral); }
.passport-btn.is-full:focus-visible::after { box-shadow: inset 0 0 0 3px var(--night); }
@keyframes stampIn { 0% { transform: rotate(45deg) scale(2.8); opacity: 0; } 55% { transform: rotate(45deg) scale(.65); opacity: 1; } 100% { transform: rotate(45deg) scale(.8); } }
@media (min-width: 900px) { .passport-btn { top: 24px; right: 84px; } }

/* паспорт целиком (окно): раскрытая книжка цвета ночи. Окно прозрачное:
   каждая половина — своя часть обложки (ночная рамка) со страницей, чтобы
   закрытая книжка была одной половиной. Слева лотос и подпись, справа штампы,
   между ними сгиб; на телефоне половины одна под другой, сгиб горизонтальный.
   Срезы окна: верхний левый — у левой половины, нижний правый — у правой */
/* телефон: срезы — у самого окна (как у других окон): иначе в срезе
   прилипшей полосы просвечивала бы прокрученная страница */
.modal.modal--passport { max-width: 960px; padding: 0; background: none; clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
.passport { position: relative; perspective: 2000px; perspective-origin: 0 0; }
.pp-half { position: relative; display: flex; flex-direction: column; padding: 0 12px; background: var(--night); }
.pp-half.is-l { clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); }
.pp-half.is-r { padding-bottom: 12px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%); }
/* верх обложки: логотип тиснением — приглушённым белым; на телефоне полоса
   только у верхней половины, справа на ней крестик */
.pp-strip { flex: none; display: flex; align-items: center; height: 56px; padding: 0 60px 0 2px; color: rgba(255, 255, 255, .5); }
.pp-strip svg { width: 74px; height: auto; }
.pp-half.is-r .pp-strip { display: none; }
/* телефон: верх обложки с логотипом — своя полоса над половинами; она и
   крестик прилипают к верху окна, пока листают штампы. Полоса в левой
   половине (нужна десктопной книжке) здесь не видна */
.pp-top {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 4; display: flex; align-items: center; height: 56px; padding: 0 60px 0 14px;
  background: var(--night); color: rgba(255, 255, 255, .5);
}
.pp-top svg { width: 74px; height: auto; }
.passport > .pp-half.is-l { clip-path: none; }
.passport > .pp-half.is-l .pp-strip { display: none; }
/* крестик — в потоке перед паспортом и прилипает; отрицательный низ
   убирает его место, полоса встаёт под него, как раньше */
.modal--passport .modal-close { position: -webkit-sticky; position: sticky; top: 6px; z-index: 5; display: flex; margin: 6px 12px -50px auto; }
.pp-left, .pp-right { position: relative; flex: 1 0 auto; padding: 24px 16px; background: #fff; }
.pp-left { text-align: center; }
.pp-lotus { width: 110px; margin: 0 auto 12px; }
.pp-lotus svg { width: 100%; height: auto; overflow: visible; }
.modal .pp-left .h1 { padding-right: 0; }
.pp-name { margin: 10px 0 0; font-family: var(--head); font-size: 20px; color: var(--night); }
/* открывающий факт и узор волн — только на десктопе (ниже): на телефоне
   страницы идут одна под другой и пустого места нет */
.pp-intro, .pp-sea { display: none; }
/* нижний правый угол страницы штампов срезан фоном параллельно срезу
   половины (24 px): ночная рамка вдоль среза той же ширины, что по краям
   (12 px; на десктопе 16). Стоп градиента — 24/√2 − p(√2 − 1) */
.pp-right {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 14px; align-content: center;
  background: linear-gradient(315deg, transparent 12px, #fff 12.5px);
}
/* телефон: штампам больше места, надпись мельче на узких экранах — иначе
   длинное слово («РЕСТОРАНОВ», «ЯПОНСКИЙ») обрезается краем штампа */
@media (max-width: 899px) { .pp-right { grid-gap: 10px; padding-left: 10px; padding-right: 10px; } }
/* сгиб разворота: тень к корешку, по половине на каждой странице */
.pp-left::after, .pp-right::before { content: ""; position: absolute; left: 0; right: 0; height: 14px; pointer-events: none; }
.pp-left::after { bottom: 0; background: linear-gradient(180deg, rgba(18, 40, 32, 0), rgba(18, 40, 32, .07) 84%, rgba(18, 40, 32, .2)); }
.pp-right::before { top: 0; background: linear-gradient(0deg, rgba(18, 40, 32, 0), rgba(18, 40, 32, .07) 84%, rgba(18, 40, 32, .2)); }
/* конфетти поздравления — над всем разворотом (facts.js: party) */
.passport > .confetti { z-index: 5; }

/* Открытие (facts.js: openPassport, у окна is-opening ~1,5 с). Обложка —
   лист с двумя сторонами: лицевая — ночь с лотосом и логотипом, оборот —
   копия левой половины. Телефон: обложка лежит поверх всей книжки и
   открывается влево, как дверца, до ребра — дальше её не видно. Десктоп
   (ниже): закрытая книжка — правая половина по центру окна; обложка
   переворачивается через корешок и ложится слева, книжка сдвигается на место.
   Тени: лицевая темнеет, отворачиваясь, оборот светлеет, ложась, со
   страниц под обложкой уходит её тень */
.pp-leaf { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; transform-origin: 0 0; transform-style: preserve-3d; }
.pp-leaf .pp-leaf-front, .pp-leaf .pp-leaf-back { position: absolute; left: 0; top: 0; right: 0; bottom: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pp-leaf-front {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 96px;
  background: linear-gradient(100deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 45%), var(--night);
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.pp-emblem { display: flex; flex-direction: column; align-items: center; }
.pp-emblem svg { width: 120px; height: auto; }
.pp-emblem b { margin-top: 16px; font-family: var(--head); font-weight: 400; font-size: 20px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.pp-leaf-logo { margin-top: 22px; color: rgba(255, 255, 255, .45); }
.pp-leaf-logo svg { width: 84px; height: auto; }
/* корешок на лицевой: вдавленная линия у сгиба */
.pp-leaf-front::after { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 3px; background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .07)); }
.pp-leaf-front::before, .pp-leaf .pp-leaf-back::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 6; background: #000; opacity: 0; pointer-events: none; }
.pp-leaf .pp-leaf-back { display: none; }
.modal--passport.is-opening { animation: ppIn .3s ease both; }
.modal--passport.is-opening .pp-leaf { animation: ppDoor 1s cubic-bezier(.55, .05, .3, 1) .25s both; }
.modal--passport.is-opening .pp-leaf-front::before { animation: ppDim .7s ease-in .25s both; }
.modal--passport.is-opening .passport > .pp-half::after {
  content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 40, 32, .55), rgba(18, 40, 32, 0) 75%);
  animation: ppShade .8s ease .45s both;
}
/* штампы ставятся, когда страницу уже видно */
.modal--passport.is-opening .stamp.is-on { animation-delay: .7s; }
@keyframes ppIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ppDoor { from { transform: rotateY(0); } to { transform: rotateY(-100deg); } }
@keyframes ppTurn { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes ppCenter { 0% { opacity: 0; transform: translateX(-25%) scale(.94); } 20% { opacity: 1; transform: translateX(-25%); } 100% { opacity: 1; transform: none; } }
@keyframes ppDim { from { opacity: 0; } to { opacity: .5; } }
@keyframes ppLight { from { opacity: .4; } to { opacity: 0; } }
@keyframes ppShade { from { opacity: 1; } to { opacity: 0; } }
.stamp { position: relative; width: 100%; padding: 0; border: 2px dashed var(--fog); border-radius: 50%; background: none; color: var(--slate); font-family: var(--head); cursor: default; }
.stamp::before { content: ""; display: block; padding-top: 100%; }
.stamp.is-on { border: 2.5px solid var(--sc); color: var(--sc); transform: rotate(var(--rot)); cursor: pointer; animation: stampDown .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.stamp-in { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; display: flex; align-items: center; justify-content: center; padding: 3px; border: 1.5px solid currentColor; border-radius: 50%; text-align: center; font-size: 11px; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; overflow: hidden; }
@media (max-width: 374px) { .stamp-in { font-size: 10px; } }
@media (max-width: 339px) { .stamp-in { font-size: 8.5px; } }
.stamp-in b { font-weight: 400; }
/* оформления (LOOK в facts.js): перфорация — обод точками; пунктир внутри;
   двойной обод; бусины — третье кольцо точками между ободом и внутренним;
   заливка — внутренний круг чуть тронут цветом штампа */
.stamp.stamp--perf { border-style: dotted; border-width: 2.5px; }
.stamp--dash .stamp-in { border-style: dashed; }
.stamp.stamp--double { border-style: double; border-width: 5px; }
.stamp--double .stamp-in { left: 8%; top: 8%; width: 84%; height: 84%; border-width: 1px; }
.stamp--beads .stamp-in { left: 13%; top: 13%; width: 74%; height: 74%; }
.stamp--beads::after { content: ""; position: absolute; left: 5%; top: 5%; width: 90%; height: 90%; border: 2px dotted currentColor; border-radius: 50%; }
.stamp--wash .stamp-in::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: currentColor; opacity: .1; }
.stamp-q { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
@keyframes stampDown { 0% { transform: rotate(var(--rot)) scale(2.2); opacity: 0; } 60% { transform: rotate(var(--rot)) scale(.92); opacity: 1; } 100% { transform: rotate(var(--rot)) scale(1); } }
/* все собраны: лотос расцветает по лепесткам */
.passport.is-party .pp-lotus path { transform-box: fill-box; transform-origin: 50% 100%; animation: bloom 1.1s cubic-bezier(.2, 1.3, .4, 1) both; }
.passport.is-party .pp-lotus path:nth-child(3), .passport.is-party .pp-lotus path:nth-child(4) { animation-delay: .15s; }
.passport.is-party .pp-lotus path:nth-child(5), .passport.is-party .pp-lotus path:nth-child(6) { animation-delay: .3s; }
.passport.is-party .pp-lotus path:nth-child(7), .passport.is-party .pp-lotus path:nth-child(8) { animation-delay: .45s; }
.passport.is-party .pp-lotus path:nth-child(9), .passport.is-party .pp-lotus path:nth-child(10) { animation-delay: .6s; }
@keyframes bloom { 0% { transform: scale(.15); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
.passport.is-full .pp-lotus { width: 140px; }
@media (min-width: 900px) {
  .passport { display: grid; grid-template-columns: 1fr 1fr; perspective: 2400px; perspective-origin: 50% 50%; }
  .pp-half { padding: 0 0 16px; }
  .pp-half.is-l { padding-left: 16px; }
  .pp-half.is-r { padding-right: 16px; padding-bottom: 16px; }
  .pp-strip { height: 60px; padding: 0 0 0 4px; }
  .pp-strip svg { width: 84px; }
  .pp-half.is-r .pp-strip { display: flex; }
  /* десктоп: срезы у половин, полосы в половинах, крестик на правой, как раньше */
  .modal.modal--passport { clip-path: none; }
  .pp-top { display: none; }
  .passport > .pp-half.is-l { clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); }
  .passport > .pp-half.is-l .pp-strip { display: flex; }
  .modal--passport .modal-close { position: absolute; top: 8px; right: 16px; margin: 0; }
  .pp-left, .pp-right { padding: 32px 28px; }
  /* левая страница: лотос крупнее; внизу открывающий факт о Мрии на лёгком
     узоре волн (море с карты, синий на 14 %), узор тает кверху */
  .pp-left { display: flex; flex-direction: column; }
  .pp-left .lead { margin-bottom: 24px; }
  .pp-lotus { width: 150px; margin-bottom: 16px; }
  .passport.is-full .pp-lotus { width: 176px; }
  .pp-sea {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 7q7-5 14 0t14 0 14 0 14 0M-7 21q7-5 14 0t14 0 14 0 14 0 14 0' fill='none' stroke='%230A97DD' stroke-opacity='.14' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 56px 28px repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%); mask-image: linear-gradient(180deg, transparent, #000 55%);
  }
  .pp-intro { --cut: 12px; display: block; position: relative; margin-top: auto; padding: 16px 20px 16px; background: var(--milk); text-align: left;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
  .pp-intro-k { font-family: var(--head); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); }
  .pp-intro-t { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--night); }
  .pp-intro-n { position: relative; margin-top: 10px; padding-left: 16px; font-size: 13px; line-height: 1.35; color: var(--slate); }
  .pp-intro-n::before { content: ""; position: absolute; left: 1px; top: 4px; width: 7px; height: 7px; background: var(--coral); transform: rotate(45deg); }
  .pp-right { grid-template-columns: repeat(4, 1fr); grid-gap: 18px; background: linear-gradient(315deg, transparent 10.3px, #fff 10.8px); }
  .pp-left::after, .pp-right::before { top: 0; bottom: 0; width: 16px; height: auto; }
  .pp-left::after { left: auto; right: 0; background: linear-gradient(90deg, rgba(18, 40, 32, 0), rgba(18, 40, 32, .07) 84%, rgba(18, 40, 32, .2)); }
  .pp-right::before { right: auto; left: 0; background: linear-gradient(270deg, rgba(18, 40, 32, 0), rgba(18, 40, 32, .07) 84%, rgba(18, 40, 32, .2)); }
  /* 20 штампов в четыре колонки, пять рядов — кружки меньше, надпись мельче */
  .stamp-in { padding: 4px; font-size: 11.5px; letter-spacing: 0; }
  /* обложка на правой половине, петля — корешок; оборот — левая половина */
  .pp-leaf { left: 50%; transform-origin: 0 50%; }
  .pp-leaf-front { justify-content: center; padding-top: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%); }
  .pp-leaf-front::after { left: 0; width: 4px; }
  .pp-leaf .pp-leaf-back { display: flex; transform: rotateY(180deg); }
  .modal--passport.is-opening { overflow: visible; animation: ppCenter 1.35s cubic-bezier(.5, .1, .3, 1) both; }
  .modal--passport.is-opening .pp-leaf { animation: ppTurn 1.1s cubic-bezier(.5, .05, .3, 1) .25s both; }
  .modal--passport.is-opening .pp-leaf-front::before { animation: ppDim .55s ease-in .25s both; }
  .modal--passport.is-opening .pp-leaf-back::before { animation: ppLight .55s ease-out .8s both; }
  /* левая половина под оборотом: видна, когда он лёг (класс снимается) */
  .modal--passport.is-opening .passport > .pp-half.is-l { opacity: 0; }
  .modal--passport.is-opening .passport > .pp-half.is-l::after { content: none; }
  .modal--passport.is-opening .passport > .pp-half.is-r::after { background: linear-gradient(90deg, rgba(18, 40, 32, .6), rgba(18, 40, 32, 0) 60%); }
}
/* узкое окно десктопа: страницы разворота уже — штампы те же четыре колонки,
   промежутки меньше (20 штампов в три колонки — семь рядов) */
@media (min-width: 900px) and (max-width: 1023px) {
  .pp-right { grid-gap: 12px; }
}
/* ---------- старт, команда, финал: картина сверху, белый лист снизу ---------- */
.hero-screen { overflow-x: hidden; }
/* картина прописана здесь, а не из JS; качается, когда экран нарисован (не
   отнимает полосу у стилей и модулей), до того — размытая --lqip; выбор
   файла по ширине — как MAP_SRC в scene.js */
.hero-map {
  position: relative; height: 440px; background-color: #0A97DD; background-image: url(../img/map.webp), var(--lqip); background-repeat: no-repeat;
  background-size: auto 520px; background-position: 56% 0;
}
.hero-map--team { background-position: 56% 0; }
.hero-map--final { height: 470px; background-position: 56% 0; }
.hero-col { position: relative; z-index: 2; margin-top: -170px; padding: 0 14px; }
.hero-screen .js-board { padding: 0 2px 18px; }
.panel {
  --cut: 28px; position: relative; margin: 0 -14px; padding: 26px 20px 36px; padding: 26px 20px calc(36px + env(safe-area-inset-bottom)); background: #fff;
  clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%, 0 28px);
}
.panel .h1 { margin-top: 10px; }
.panel .kicker + .h1 { margin-top: 4px; }
.panel .lead { margin-top: 12px; }
.panel-cta { margin-top: 26px; }
.lead--raffle { margin-top: 10px; }
.hh-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fog); }
.hh-note p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: var(--graphite); }
.panel-links { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--slate); }
.panel-links a { color: inherit; }
.final .hero-col { margin-top: -28px; }
.final-ticket { position: absolute; left: 50%; top: 22px; z-index: 1; width: 300px; margin-left: -150px; }
.perks { margin: 18px 0 0; padding: 0; list-style: none; }
.perks li { --cut: 8px; position: relative; padding: 10px 12px 10px 36px; margin-top: 8px; background: var(--milk); font-size: 14px; color: var(--graphite); }
.perks li::before { content: ''; position: absolute; left: 14px; top: 16px; width: 9px; height: 9px; transform: rotate(45deg); background: var(--coral); }
/* напоминание на «Команда собрана»: промокод после анкеты */
.promo-note {
  margin-top: 18px; padding: 12px 14px; background: var(--coral); color: var(--night); font-size: 15px; line-height: 1.4; font-weight: 600;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
/* промокод на финале — коралловый: не сливается с ночными кнопками вакансий */
.promo-box {
  margin-top: 18px; padding: 18px 16px; background: var(--coral); color: var(--night);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.promo-box h3 { margin: 0; font-family: var(--head); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--night); }
.promo-code { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 8px 8px 8px 16px; background: #fff; color: var(--night); }
.promo-code b { font-family: var(--head); font-size: 24px; letter-spacing: .06em; word-break: break-all; }
.promo-code .btn { flex: none; margin-left: 10px; min-height: 40px; padding: 0 14px; font-size: 14px; }
.promo-box p { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--night); }
@media (min-width: 900px) {
  .hero-screen { position: absolute; }
  .hero-map { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(../img/map-2x.webp), var(--lqip); background-size: cover; background-position: 50% 40%; }
  .hero-col { position: absolute; left: 48px; bottom: 40px; width: 540px; margin: 0; padding: 0; max-height: calc(100% - 100px); overflow-y: auto; }
  .panel { margin: 0; padding: 30px 32px 32px; clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px); box-shadow: none; }
  .hero-screen .js-board { padding: 0 4px 22px; }
  .final .hero-col { bottom: 40px; top: 40px; max-height: none; }
  /* колонка текста занимает 48 + 540 px, билет — по центру остального */
  .final-ticket { left: calc(588px + (100% - 588px) / 2); right: auto; top: 50%; width: 380px; margin: 0 0 0 -190px; transform: translateY(-50%); transform-origin: 50% 50%; }
  /* старт: колонка на весь экран прокручивается целиком; auto-отступы сверху у ряда
     снимков и снизу у листа центрируют их, пока хватает высоты, а на низком
     окне обнуляются, и ничего не обрезается (ни стикер, ни билет) */
  .start .hero-col {
    left: 0; top: 0; bottom: 0; width: 100%; max-height: none;
    display: flex; flex-direction: column; align-items: center;
    padding: 84px 24px 40px; overflow-x: hidden;
  }
  .start .hero-col .js-board { width: 600px; margin-top: auto; }
  .start .hero-col .panel { width: 600px; margin-bottom: auto; }
  /* «Команда собрана»: так же, только колонка слева и прижата к низу. В 540 px
     ряд снимков с билетом не помещался — билет срезался справа, а сверху
     стикер уходил под логотип */
  .team .hero-col {
    top: 0; bottom: 0; width: 600px; max-height: none;
    display: flex; flex-direction: column;
    padding: 84px 0 40px; overflow-x: hidden;
  }
  .team .hero-col .js-board { margin-top: auto; }
}
@media (min-width: 1200px) { .final-ticket { transform: translateY(-50%) scale(1.35); } }
@media (min-width: 1500px) { .final-ticket { transform: translateY(-50%) scale(1.55); } }

/* ---------- билет розыгрыша ---------- */
.ticket {
  position: relative; padding: 20px 22px 18px; background: #fff; color: var(--night); transform: rotate(2deg);
  -webkit-mask: radial-gradient(circle at 0 calc(100% - 74px), transparent 11px, #000 11.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% calc(100% - 74px), transparent 11px, #000 11.5px) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 calc(100% - 74px), transparent 11px, #000 11.5px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% calc(100% - 74px), transparent 11px, #000 11.5px) 100% 0 / 51% 100% no-repeat;
  animation: ticketIn .8s cubic-bezier(.3, 1.4, .5, 1) both;
}
.ticket-top { display: flex; align-items: flex-start; justify-content: space-between; }
.ticket-logo { width: 62px; color: var(--night); }
.ticket-logo svg { width: 100%; height: auto; }
.ticket-no { margin-top: 2px; font-family: var(--head); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.ticket-lotus { width: 92px; margin: 12px auto 0; }
.ticket-lotus svg { width: 100%; height: auto; }
.ticket-stamp {
  position: absolute; right: 18px; top: 58px; padding: 4px 8px; border: 1.5px solid #492A47; color: #492A47; transform: rotate(8deg);
  font-family: var(--head); font-size: 9.5px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; text-align: center;
}
.ticket-title { margin-top: 10px; font-family: var(--head); font-size: 25px; line-height: 1.1; text-align: center; }
.ticket-rows { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px 14px; margin: 16px 0 0; }
.ticket-rows dt, .ticket-foot small { display: block; font-family: var(--head); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.ticket-rows dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.ticket-cut { margin: 16px -8px 0; border-top: 2px dashed var(--fog); }
.ticket-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 14px; }
.ticket-foot a { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--night); text-decoration: underline; text-underline-offset: 3px; }
/* штрихкод: каждая точка градиента записана отдельно — двойные позиции «цвет 0 2px» Chrome до 71 не понимает */
.ticket-bars { width: 96px; height: 38px; background: repeating-linear-gradient(90deg, var(--night) 0, var(--night) 2px, transparent 2px, transparent 4px, var(--night) 4px, var(--night) 5px, transparent 5px, transparent 8px, var(--night) 8px, var(--night) 11px, transparent 11px, transparent 13px); }

/* ---------- окна: «?», розыгрыш, факт, паспорт ---------- */
.modal-back {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(18, 40, 32, .66);
}
.modal {
  --cut: 24px; position: relative; width: 100%; max-width: 560px; max-height: calc(100% - 32px); overflow-y: auto;
  padding: 28px 24px 24px; background: #fff;
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.modal .h1 { margin: 0; padding-right: 48px; font-size: 30px; }
/* окно факта: надзаголовок над заголовком */
.fact-kicker { font-family: var(--head); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); }
.fact-kicker + .h1 { margin-top: 6px; }
.modal .lead { margin-top: 12px; }
.modal .lead--raffle { margin-top: 14px; }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.modal .panel-cta { margin-top: 22px; }
html.modal-open, html.modal-open body { overflow: hidden; }
.modal-photo { margin: -28px -24px 20px; height: 190px; background: var(--fog); }
.modal-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ПОКА РЫБА: вместо фото — картинка-рамка и подпись, где снять */
.modal-photo.is-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; background: var(--milk); color: var(--slate); text-align: center; }
.modal-photo.is-soon svg { width: 48px; height: 40px; margin-bottom: 10px; }
.modal-photo.is-soon span { font-size: 14px; line-height: 1.35; }
.prizes { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: prize; }
.prizes li {
  position: relative; margin-top: 8px; padding: 10px 12px 10px 46px; background: var(--milk); color: var(--night); font-size: 15px; line-height: 1.4;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.prizes li::before {
  counter-increment: prize; content: counter(prize); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; line-height: 24px;
  text-align: center; font-family: var(--head); font-size: 15px; color: var(--night); background: var(--coral);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
@media (min-width: 900px) {
  .modal { padding: 32px 32px 28px; }
  .modal .h1 { font-size: 34px; }
  .modal-photo { margin: -32px -32px 22px; height: 230px; }
}

/* ---------- лист задания: шапка в цвете локации, таймер, деления ---------- */
.sheet {
  position: fixed; top: 0; left: 0; right: 0; height: var(--app-h); z-index: 40;
  background: #fff; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  animation: sheet-in .35s ease;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.sheet-head {
  position: sticky; top: 0; z-index: 3;
  padding: 10px 14px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: var(--zc);
}
.sheet-head-in { display: flex; align-items: center; max-width: 860px; margin: 0 auto; }
.sheet-title {
  --cut: 8px; flex: 1; min-width: 0; margin: 0 10px; padding: 7px 12px 7px 10px; display: flex; align-items: center;
  background: #fff; color: var(--night); line-height: 1.2;
}
.st-ic { flex: none; width: 24px; height: 24px; margin-right: 10px; color: var(--zc); }
.sheet-title span { display: block; min-width: 0; font-size: 13px; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-title b { display: block; font-family: var(--head); font-weight: 400; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-title small { display: block; font-size: 12px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* таймер: число в белом кольце, дуга убывает с секундами; последние 5 с — красное и дёргается */
.timer { --cut: 0; position: relative; width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; background: none; color: #fff; clip-path: none; }
.timer .ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.timer .ring-bg { fill: rgba(18, 40, 32, .35); stroke: rgba(255, 255, 255, .35); stroke-width: 5; }
.timer .ring-fg { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: butt; stroke-dasharray: 150.8; stroke-dashoffset: 0; transition: stroke-dashoffset .9s linear; }
.timer b { position: relative; font-family: var(--head); font-weight: 400; font-size: 26px; line-height: 1; }
.sheet.is-hurry .timer .ring-bg { fill: var(--red); }
.sheet.is-hurry .timer .ring-fg { stroke: #fff; }
.sheet.is-hurry .timer { animation: tick .45s ease-out; }
@keyframes tick { from { transform: scale(1.45); } to { transform: none; } }
.segs { display: flex; max-width: 860px; margin: 10px auto 0; }
.segs i { flex: 1; height: 6px; margin-right: 3px; background: rgba(255, 255, 255, .22); }
.segs i:last-child { margin-right: 0; }
.segs i.on { background: #fff; }
.sheet.is-hurry .segs i.on { background: var(--red); }
.sheet.is-result .timer, .sheet.is-result .segs { display: none; }
.sheet-body { max-width: 560px; margin: 0 auto; padding: 0 16px 28px; padding: 0 16px calc(28px + env(safe-area-inset-bottom)); }
.sheet.is-result { background: var(--zc); color: var(--zi); }
.sheet.is-result .sheet-body { padding-top: 6px; }

/* знакомство: сцена сотрудника (он в своей локации, с фоном; --scene ставит
   task.js), реплика поверх, правило, «Начали». Без сцены — фигура на цвете
   локации */
.intro-wrap { margin: 0 -16px; }
.intro-hero { position: relative; display: flex; align-items: flex-end; min-height: 230px; padding: 10px 16px 0; background: var(--zc); }
/* место сцене над репликой даёт отступ сверху, а не min-height: иначе
   длинная реплика наезжала бы на лицо */
.intro-hero.has-scene {
  min-height: 0; padding: 200px 12px 12px;
  background-image: var(--scene); background-size: cover; background-position: 50% 6%; background-repeat: no-repeat;
}
.intro-art { position: relative; flex: none; width: 150px; height: 190px; }
.intro-face { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--zi); }
.intro-face .face-ic { width: 96px; height: 96px; opacity: .9; }
.say { --cut: 10px; position: relative; flex: 1; align-self: center; margin: 0 0 0 4px; padding: 12px 14px 14px; background: #fff; color: var(--night); }
.intro-hero.has-scene .say { align-self: auto; margin: 0; }
.say p { font-size: 15px; line-height: 1.45; }
.intro-body { padding: 18px 16px 0; }
.rule { --cut: 10px; padding: 14px 16px; background: var(--milk); font-size: 15px; color: var(--graphite); }
.rule b { color: var(--night); font-weight: 600; }
.time-note { margin-top: 12px; text-align: center; font-size: 14px; font-weight: 500; color: var(--slate); }
.intro-cta { margin-top: 14px; }
/* экран знакомства целиком на маленьком телефоне: «Начали» видно без
   прокрутки; сначала только сцена ниже (375×667, 390×664), потом всё мельче */
@media (max-height: 700px) {
  .intro-hero.has-scene { padding-top: 150px; }
}
@media (max-width: 360px), (max-height: 620px) {
  .intro-hero { min-height: 170px; }
  .intro-hero.has-scene { padding-top: 150px; }
  .intro-art { width: 104px; height: 140px; }
  .say p { font-size: 14px; }
  .time-note { margin-top: 8px; font-size: 13px; }
  .intro-cta { margin-top: 10px; }
}
/* низкий экран: сцены над репликой ещё меньше, кадр выше по лицу; до 580 px
   (iPhone SE в Safari 375×553, 320×568) ещё и правило плотнее */
@media (max-height: 620px) {
  .intro-hero.has-scene { padding-top: 100px; background-position: 50% 12%; }
}
@media (max-height: 580px) {
  .intro-hero.has-scene { padding-top: 84px; background-position: 50% 17%; }
  .intro-body { padding-top: 12px; }
  .rule { padding: 10px 12px; font-size: 14px; }
  .time-note { margin-top: 6px; }
  .intro-cta { margin-top: 8px; }
}

/* игра: правило сверху, сообщение под полем */
.play { margin-top: 4px; padding-top: 14px; }
.play-rule { font-size: 14px; color: var(--slate); text-align: center; margin: 4px 0 10px; }
.play-msg { min-height: 24px; margin-top: 10px; text-align: center; font-weight: 700; font-size: 15px; }
.play-msg.is-bad { color: var(--red); }
.play-msg.is-good { color: var(--ok); }
.play-face { display: none; }
.shake { animation: shake .35s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- садовник ---------- */
.garden-wrap { --cut: 16px; position: relative; width: 100%; max-width: 420px; margin: 0 auto; overflow: hidden; background: #F3EEE3; touch-action: none; }
.garden-wrap canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.garden-meter { height: 8px; margin: 12px auto 0; max-width: 420px; background: var(--milk); overflow: hidden; }
.garden-meter i { display: block; height: 100%; width: 0; background: var(--zc); transition: width .15s linear; }

/* ---------- бармен ---------- */
.bar-top { display: grid; grid-template-columns: 1fr 112px; grid-gap: 12px; align-items: center; }
.recipe { --cut: 10px; padding: 12px 14px; background: var(--milk); text-align: left; }
.recipe-title { font-family: var(--head); font-weight: 400; font-size: 17px; color: var(--night); }
.recipe ul { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; line-height: 1.4; }
.recipe li { position: relative; padding-left: 22px; margin-top: 4px; }
.recipe li::before { content: ''; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--fog); }
.recipe li.is-done { color: var(--slate); text-decoration: line-through; }
.recipe li.is-done::before { border-color: var(--zc); background: var(--zc); }
.shaker { display: block; width: 112px; height: auto; overflow: visible; }
/* только что налитый слой и его примета (лимон, лаванда, пузырьки, лёд) */
.shaker .is-new { animation: part-in .35s cubic-bezier(.2, .9, .3, 1.3); }
.shaker.is-shaking { animation: shaker .14s linear 8; }
@keyframes shaker { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg) translateY(-6px); } }
.ingredients { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 8px; margin-top: 14px; }
.ing {
  --cut: 10px; border: 0; padding: 8px 4px 10px; background: var(--milk); color: var(--night); cursor: pointer;
  font-size: 12px; font-weight: 600; line-height: 1.2; transition: transform .12s ease, opacity .2s ease;
}
.ing img { display: block; width: 48px; height: 48px; margin: 0 auto 6px; pointer-events: none; -webkit-user-select: none; user-select: none; }
.ing:active { transform: scale(.95); }
.ing.is-used { opacity: .35; pointer-events: none; }
.ing.is-wrong, .food.is-wrong { animation: shake .35s ease; background: #fff; box-shadow: inset 0 0 0 2px var(--red); color: var(--red); }
.shake-cta { margin-top: 14px; }
/* бармен на низком или узком экране: стакан уже, рецепт и ингредиенты плотнее */
@media (max-height: 620px), (max-width: 360px) {
  .bar-top { grid-template-columns: 1fr 76px; grid-gap: 8px; }
  .shaker { width: 76px; }
  .recipe { padding: 8px 10px; }
  .recipe ul { margin-top: 2px; font-size: 13px; line-height: 1.3; }
  .recipe li { margin-top: 3px; }
  .recipe li::before { top: 1px; }
  .ing { padding: 5px 2px 7px; font-size: 11px; }
  .ing img { width: 34px; height: 34px; margin-bottom: 3px; }
}
/* десктоп: стакан крупнее (правило после низкого экрана — перекрывает его) */
@media (min-width: 900px) {
  .bar-top { grid-template-columns: 1fr 140px; grid-gap: 24px; }
  .shaker { width: 140px; }
}

/* ---------- горничная: комната сверху, кровать — цель для вещей, образец в углу ---------- */
.room-wrap { position: relative; width: 100%; max-width: 460px; margin: 8px auto 0; touch-action: none; }
@media (max-height: 760px) { .room-wrap { max-width: calc((var(--app-h) - 320px) * 1.44); min-width: 260px; } }
.room-wrap svg.room { width: 100%; height: auto; }
.bed-drop {
  position: absolute; z-index: 1; left: 18.3%; top: 14.4%; width: 50%; height: 84%; padding: 0;
  border: 2px dashed transparent; border-radius: 6% / 8%; background: transparent; cursor: pointer;
}
/* пять вещей в лотке: в ряд, а на узком экране — 3 + 2 по центру */
/* grid-gap у .tray — синоним gap, и новые браузеры применили бы его и к flex: обнуляем, отступы — полями */
.tray.tray--5 { display: flex; flex-wrap: wrap; justify-content: center; grid-gap: 0; margin-left: -3px; margin-right: -3px; }
.tray--5 .food { width: calc(20% - 6px); margin: 3px; padding: 6px 2px 8px; font-size: 11px; }
.tray--5 .food svg { width: 46px; height: 46px; }
@media (max-width: 380px) { .tray--5 .food { width: calc(33.333% - 6px); } }
@media (max-height: 620px) { .tray--5 .food svg { width: 38px; height: 38px; } }

/* ---------- повар: подача по эталону, раскладка свободная ---------- */
.dish-name { font-family: var(--head); font-weight: 400; font-size: 18px; line-height: 1.3; text-align: center; color: var(--night); }
/* тарелка и лоток должны помещаться на экран вместе — иначе не перетащить;
   у повара лоток в два ряда (восемь продуктов) */
.plate-wrap { position: relative; width: 100%; max-width: 420px; min-width: 220px; margin: 8px auto 0; touch-action: none; }
@media (max-height: 760px) { .plate-wrap { max-width: calc(var(--app-h) - 392px); } }
.plate-wrap svg.plate { display: block; width: 100%; height: auto; }
.bed-part { opacity: 0; }
.bed.is-all .bed-part, .bed-part.is-on { opacity: 1; }
.bed-part.is-on { animation: part-in .35s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes part-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
/* продукты на тарелке: центр в точке, поворот --r; тень — как от предмета на фарфоре */
.plate-food { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.plated {
  position: absolute; height: auto; transform: translate(-50%, -50%) rotate(var(--r)); cursor: grab;
  -webkit-filter: drop-shadow(0 3px 3px rgba(18, 40, 32, .2)); filter: drop-shadow(0 3px 3px rgba(18, 40, 32, .2));
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.plated.is-new { animation: plateIn .3s cubic-bezier(.2, .9, .3, 1.3) both; }
.plated.is-drag { z-index: 3; cursor: grabbing; -webkit-filter: drop-shadow(0 10px 10px rgba(18, 40, 32, .25)); filter: drop-shadow(0 10px 10px rgba(18, 40, 32, .25)); }
.plated.is-out { opacity: .4; }
@keyframes plateIn { from { opacity: 0; transform: translate(-50%, -80%) rotate(var(--r)) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)); } }
/* эталон (повар) и образец (горничная) — карточка-тикет в углу поля
   (games/ref.js). На телефоне мелкая, с лупой: нажатие раскрывает её
   крупно поверх поля, любое касание сворачивает; в начале игры она
   крупная сама. На десктопе крупная и стоит рядом с полем (ниже) */
.ref {
  position: absolute; z-index: 4; top: 0; right: -3%; width: 27%; padding: 5px 5px 4px;
  background: #fff; box-shadow: 0 8px 18px rgba(18, 40, 32, .18); transform: rotate(3deg); transform-origin: 100% 0;
  text-align: center; font-size: 11px; font-weight: 800; line-height: 1.15; cursor: zoom-in;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ref-room { display: block; width: 100%; height: auto; }
.ref span { display: block; margin-top: 1px; font-family: var(--head); font-weight: 400; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.ref-plate { position: relative; width: 100%; padding-top: 100%; border-radius: 50%; background: #FDFBF9; box-shadow: inset 0 0 0 2px #EDE7E1; }
.ref-food { position: absolute; height: auto; transform: translate(-50%, -50%) rotate(var(--r)); }
.ref-zoom { position: absolute; left: -9px; top: -9px; width: 26px; height: 26px; border-radius: 50%; background: var(--night); color: #fff; box-shadow: 0 3px 8px rgba(18, 40, 32, .25); }
.ref-zoom svg { display: block; width: 16px; height: 16px; margin: 5px; }
.ref.ref--room { right: -3%; width: 33%; }
.ref.is-back { animation: refBack .26s ease-out; }
.ref.is-big { z-index: 6; top: 2%; right: 4%; width: 86%; padding: 10px 10px 8px; transform: none; cursor: zoom-out; box-shadow: 0 18px 44px rgba(18, 40, 32, .3); animation: refBig .3s cubic-bezier(.2, .9, .3, 1.1); }
.ref.ref--room.is-big { top: 2%; right: 6%; width: 80%; }
.ref.is-big span { margin-top: 5px; font-size: 13px; }
.ref.is-big .ref-zoom { display: none; }
@keyframes refBig { from { transform: scale(.34); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes refBack { from { transform: scale(2.8); } to { transform: rotate(3deg); } }
/* десктоп: эталон вдвое крупнее и рядом с полем, а поле сдвинуто влево —
   пара стоит по центру колонки. Пара шире поля (у повара в 1,6 раза, у
   горничной в 1,22), поэтому в узкой колонке поле уже: width в % колонки */
@media (min-width: 900px) {
  .plate-wrap { width: 62%; transform: translateX(-30%); }
  .ref { top: 0; right: auto; left: 104%; width: 56%; cursor: default; pointer-events: none; }
  .room-wrap { width: 80%; transform: translateX(-11%); }
  .ref.ref--room { top: 3%; right: auto; left: 72%; width: 50%; }
  .ref-zoom { display: none; }
}
.tray { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 8px; margin-top: 12px; }
.food {
  --cut: 10px; position: relative; border: 0; padding: 6px 4px 8px; background: var(--milk); color: var(--night); cursor: grab;
  font-size: 12px; font-weight: 600; touch-action: none; transition: transform .12s ease, opacity .2s ease;
}
.food svg { width: 54px; height: 54px; margin: 0 auto 2px; pointer-events: none; }
.food img { display: block; width: 44px; height: 44px; margin: 0 auto 2px; pointer-events: none; -webkit-user-select: none; user-select: none; }
.food.is-picked { box-shadow: inset 0 0 0 3px var(--coral); }
.food.is-placed { opacity: .3; pointer-events: none; }
/* сколько уже на тарелке; этого продукта как на эталоне — рамка ночью */
.food-n { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--graphite); }
.food.is-done { box-shadow: inset 0 0 0 2px var(--night); }
.tray--8 { grid-gap: 6px; margin-top: 10px; }
.tray--8 .food { padding: 5px 2px 6px; font-size: 11px; }
.drag-ghost { position: fixed; z-index: 80; left: 0; top: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px; pointer-events: none; will-change: transform; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .2)); }
.drag-ghost svg, .drag-ghost img { display: block; width: 100%; height: 100%; }
@media (max-height: 620px) {
  .play-rule { font-size: 13px; margin-bottom: 6px; }
  .food svg { width: 42px; height: 42px; }
  .food img { width: 36px; height: 36px; }
  .tray, .ingredients { margin-top: 8px; }
  .plate-wrap { min-width: 190px; max-width: calc(var(--app-h) - 362px); }
}

/* ---------- аниматор: «Повторяй за Еленой» ---------- */
.dance { max-width: 420px; margin: 0 auto; }
.dance-top { display: flex; align-items: flex-end; height: 104px; padding: 0 4px; }
.dance-ani { flex: none; width: 58px; transform-origin: 50% 100%; transition: transform .14s ease-out; }
.dance-ani.pose-left { transform: translateX(-5px) rotate(-9deg); }
.dance-ani.pose-right { transform: translateX(5px) rotate(9deg); }
.dance-ani.pose-up { transform: translateY(-12px); }
.dance-ani.pose-down { transform: scaleY(.86); }
.dance-face { display: block; position: relative; width: 58px; height: 58px; background: var(--zc); overflow: hidden; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.dance-face .face { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.dance-call { flex: 1; min-width: 0; margin: 0 0 14px 10px; padding: 8px 12px; background: var(--milk); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.dance-call b { display: block; font-family: var(--head); font-weight: 400; font-size: 17px; color: var(--night); }
.dance-call span { display: block; min-height: 17px; font-size: 13px; font-weight: 700; color: var(--coral); }
/* ромбы связки над ковриком: заливаются, пока Елена показывает и пока игрок
   повторяет; место под них занято заранее — коврик не прыгает */
.dance-seq { display: flex; justify-content: center; align-items: center; height: 30px; margin-top: 2px; }
.dance-seq i { display: block; width: 20px; height: 20px; margin: 0 5px; background: #E4DCE6; transition: background-color .15s ease, transform .15s ease; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.dance-seq i.is-on { background: var(--c); }
.dance-seq i.is-now { transform: scale(1.3); }
/* танцевальный коврик под наклоном: молочный, сиреневая кромка, видна
   толщина переднего края, тень на полу. Пады — кнопки своих цветов с
   тёмным нижним бортиком. --mw — ширина коврика, --mh — высота его места
   (наклонённый коврик ниже своей ширины) */
.dance-mat { --mw: 290px; --mh: 262px; position: relative; height: var(--mh); -webkit-perspective: 760px; perspective: 760px; -webkit-perspective-origin: 50% -30%; perspective-origin: 50% -30%; }
.dance-mat::after { content: ""; position: absolute; left: 50%; bottom: 0; width: calc(var(--mw) * 1.05); height: 30px; margin-left: calc(var(--mw) * -.525); border-radius: 50%; background: radial-gradient(ellipse, rgba(18, 40, 32, .16), transparent 70%); }
.mat { position: absolute; left: 50%; bottom: 16px; width: var(--mw); margin-left: calc(var(--mw) / -2); transform: rotateX(46deg); transform-origin: 50% 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.mat-top {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; padding: 10px; background: var(--milk); box-shadow: inset 0 0 0 3px #E4DCE6;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.mat-edge { position: absolute; left: 0; right: 18px; top: 100%; height: 9px; background: #DCD2E0; transform-origin: 50% 0; transform: rotateX(-90deg); }
.mat-cell { position: relative; padding-top: 100%; }
.mat-cell.is-plain::before { content: ""; position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; background: #E8E0EA; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* свечение показанного пада — под ним (z-index внутри коврика) */
.mat-glow { position: absolute; z-index: -1; left: -26%; top: -26%; width: 152%; height: 152%; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 64%); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.dance-pad.is-show ~ .mat-glow { opacity: .5; }
.dance-pad {
  --cut: 12px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 0; padding: 0; background: var(--c); color: var(--ink); cursor: pointer; touch-action: manipulation;
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, .16), inset 0 3px 0 rgba(255, 255, 255, .18);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: opacity .15s ease, transform .1s ease, box-shadow .1s ease;
}
.dance-pad svg { width: 40%; height: 40%; }
.dance-pad b { margin-top: 2px; font-size: 13px; font-weight: 700; line-height: 1; }
/* нажатие — пад проседает: бортик тоньше */
.dance-pad.is-down { transform: scale(.95); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), inset 0 2px 0 rgba(0, 0, 0, .08); }
/* показ — белая рамка внутри (внешнюю срезал бы clip-path) и свечение */
.dance-pad.is-show { box-shadow: inset 0 0 0 4px #fff, inset 0 -7px 0 rgba(0, 0, 0, .12); }
.dance-pad.is-wrong { animation: shake .35s ease; box-shadow: inset 0 0 0 4px var(--red), inset 0 -7px 0 rgba(0, 0, 0, .16); }
.dance[data-phase="show"] .dance-pad, .dance[data-phase="wait"] .dance-pad { cursor: default; }
/* пока Елена показывает, пады приглушены и заблокированы; горит показанный */
.dance-pad[disabled] { opacity: .45; cursor: default; }
.dance-pad[disabled].is-show, .dance-pad[disabled].is-wrong { opacity: 1; }
/* низкий экран: коврик меньше */
@media (max-height: 620px) {
  .dance-mat { --mw: 236px; --mh: 214px; }
  .dance-pad b { font-size: 11px; }
}
.dance-keys { margin-top: 6px; font-size: 12px; text-align: center; color: var(--graphite); }
@media (pointer: coarse) { .dance-keys { display: none; } }
@media (min-width: 900px) {
  .dance { max-width: 640px; }
  .dance-top { height: 124px; }
  .dance-ani, .dance-face { width: 72px; }
  .dance-face { height: 72px; }
  .dance-call b { font-size: 22px; }
  .dance-call span { font-size: 15px; min-height: 20px; }
  .dance-seq { height: 40px; margin-top: 4px; }
  .dance-seq i { width: 26px; height: 26px; margin: 0 6px; }
  .dance-mat { --mw: 400px; --mh: 352px; }
  .dance-pad b { font-size: 16px; }
}
/* невысокий ноутбук: коврик меньше, чтобы целиком помещался на экран */
@media (min-width: 900px) and (max-height: 700px) {
  .dance-mat { --mw: 320px; --mh: 284px; }
  .dance-pad b { font-size: 14px; }
  .dance-keys { font-size: 13px; margin-top: 10px; }
}

/* ---------- результат: итог, карточка сотрудника, цвет локации фоном ---------- */
/* шапки с именем и таймером нет — только крестик справа сверху */
.sheet.is-result .sheet-title { display: none; }
.sheet.is-result .sheet-head-in { justify-content: flex-end; }
.done { max-width: 460px; margin: 0 auto; text-align: center; }
/* итог: процент, уровень, строка, «Попробовать ещё раз» */
.done-res { --cut: 14px; padding: 14px 16px 10px; background: #fff; color: var(--night); text-align: left; }
.res-row { display: flex; align-items: center; }
.res-pct { flex: none; margin-right: 14px; font-family: var(--head); font-weight: 400; font-size: 46px; line-height: 1; }
.res-txt { display: block; min-width: 0; }
.res-lv {
  display: inline-block; padding: 3px 9px; background: var(--coral); color: var(--night); font-family: var(--head); font-weight: 400;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-2deg);
}
.res-line { display: block; margin-top: 5px; font-size: 14px; line-height: 1.35; color: var(--graphite); }
.done-best { margin: 8px 0 0; font-size: 13px; color: var(--slate); }
.done-trainee { margin: 10px 0 0; padding: 10px 12px; background: var(--milk); color: var(--night); font-size: 14px; line-height: 1.45; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.done-res .link-btn { margin-top: 4px; color: var(--graphite); }
/* карточка сотрудника: белый лист со срезанными углами — отдельным слоем,
   чтобы звезда «+1» и конфетти выходили за край */
.done-box { position: relative; margin-top: 12px; padding: 22px 20px 22px; color: var(--night); }
.done-box::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; background: #fff;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.done-box > * { position: relative; z-index: 1; }
.done-card { --cut: 22px; position: relative; width: 250px; height: 205px; margin: 0 auto; background: var(--zs); overflow: visible; clip-path: none; }
.done-face { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--zi);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
/* сцена сотрудника с фоном; кадр по лицу */
.done-face.has-scene { background-image: var(--scene); background-size: cover; background-position: 50% 8%; background-repeat: no-repeat; }
.done-face .face-ic { width: 110px; height: 110px; }
.done-card.is-new { animation: card-in .7s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes card-in { from { transform: rotateY(90deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.done-badge {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 5px 10px; white-space: nowrap;
  background: var(--coral); color: var(--night); font-family: var(--head); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.star {
  position: absolute; right: -26px; top: -22px; z-index: 2; width: 92px; height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--coral); color: var(--night); font-family: var(--head); font-size: 11px; line-height: 1.1; text-transform: uppercase; letter-spacing: .06em;
  clip-path: polygon(50% 0, 61% 18%, 81% 9%, 79% 31%, 100% 38%, 84% 53%, 96% 72%, 74% 74%, 69% 96%, 50% 84%, 31% 96%, 26% 74%, 4% 72%, 16% 53%, 0 38%, 21% 31%, 19% 9%, 39% 18%);
  animation: burstPop .9s cubic-bezier(.3, 1.4, .5, 1) .5s both;
}
.star b { font-family: var(--head); font-weight: 400; font-size: 24px; letter-spacing: 0; }
.done-card .confetti { top: 50%; }
.done-title { margin-top: 16px; font-family: var(--head); font-weight: 400; font-size: 32px; line-height: 1.1; }
.done-sub { margin-top: 6px; font-size: 14px; color: var(--slate); }
/* черты сотрудника плашками */
.done-tags { margin: 10px -3px 0; padding: 0; list-style: none; }
.done-tags li {
  --cut: 6px; display: inline-block; margin: 4px 3px 0; padding: 5px 10px; background: var(--milk); color: var(--night);
  font-size: 13px; font-weight: 600; line-height: 1.3; vertical-align: top;
}
.result-cta { margin-top: 18px; }
.done-main { margin-top: 22px; }
.done-board { text-align: left; }
.facts { margin-top: 24px; text-align: left; }
.fact { --cut: 10px; padding: 12px 14px; background: #fff; color: var(--night); font-size: 15px; line-height: 1.45; }
.fact + .fact { margin-top: 10px; }
.fact b { display: block; margin-bottom: 2px; font-family: var(--head); font-weight: 400; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.photo { --cut: 10px; margin: 10px 0 0; overflow: hidden; background: #E6DFDA; }
.photo img { width: 100%; height: auto; }
.photo figcaption { padding: 8px 12px; font-size: 12px; color: var(--slate); background: #fff; }
/* карусель фото места (gallery.js): кадр 3:2, лента сдвигается целиком;
   жест по горизонтали листает, по вертикали — прокрутка листа */
.gal-view { position: relative; overflow: hidden; padding-top: 66.6667%; touch-action: pan-y; }
.gal-track { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.gal-track.is-drag { transition: none; }
.photo .gal-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; -webkit-user-select: none; user-select: none; }
.gal-btn {
  position: absolute; top: 50%; z-index: 1; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 0;
  display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .88); color: var(--night); cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.gal-btn svg { width: 18px; height: 18px; }
.gal-btn.is-prev { left: 8px; }
.gal-btn.is-prev svg { transform: rotate(180deg); }
.gal-btn.is-next { right: 8px; }
.gal-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--coral); }
.gal-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 1; display: flex; justify-content: center; pointer-events: none; }
.gal-dots i { display: block; width: 7px; height: 7px; margin: 0 4px; background: rgba(255, 255, 255, .65); transform: rotate(45deg); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: background .2s; }
.gal-dots i.is-on { background: var(--coral); }
/* итог крупно после игры (task.js, popResult): плашка посередине поверх
   затемнения, процент набегает; потом уезжает на место блока итога,
   уменьшаясь, и тает, а блок проявляется. Пока она видна, анимации
   карточки и ряда команды стоят */
.res-dim { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; background: rgba(18, 40, 32, .55); animation: resDim .3s ease both; transition: opacity .5s ease; }
.res-dim.is-out { opacity: 0; }
@keyframes resDim { from { opacity: 0; } to { opacity: 1; } }
.res-pop { position: fixed; left: 0; top: 0; z-index: 11; width: 300px; transform-origin: 50% 50%; cursor: pointer; }
.res-pop.is-fly { opacity: 0; transition: transform .6s cubic-bezier(.5, 0, .25, 1), opacity .2s ease .45s; }
.res-pop-in {
  --cut: 22px; display: block; padding: 26px 22px 24px; background: #fff; color: var(--night); text-align: center;
  animation: resIn .6s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes resIn { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: none; opacity: 1; } }
.res-pop .res-lv { font-size: 18px; padding: 5px 12px; }
.res-pop-pct { display: block; margin-top: 8px; font-family: var(--head); font-weight: 400; font-size: 104px; line-height: 1; }
.res-pop-line { display: block; margin-top: 10px; font-size: 16px; line-height: 1.4; color: var(--graphite); }
.done-res.is-hidden { visibility: hidden; }
.done-res.is-land { animation: resLand .35s ease .4s both; }
@keyframes resLand { 0% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; transform: none; } }
.done.is-wait .done-card, .done.is-wait .star, .done.is-wait .confetti i, .done.is-wait .pola-in { animation-play-state: paused; }

/* ---------- задание на десктопе: две колонки ---------- */
@media (min-width: 900px) {
  .sheet-body { max-width: 860px; }
  .sheet.is-play .sheet-body, .sheet.is-result .sheet-body { max-width: 1100px; }
  /* знакомство: сцена слева, задание справа */
  .intro-wrap { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 40px; align-items: center; max-width: 1000px; margin: 24px auto 0; }
  .intro-hero { flex-direction: column; align-items: center; justify-content: flex-end; min-height: 440px; padding: 28px 28px 24px;
    clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
  /* коробка портрета держит пропорцию 1,25, под неё посчитан фон в yaFace */
  .intro-art { width: 240px; height: 300px; }
  /* есть сцена (сотрудник в своей локации) — колонка выше, картина 2:3
     обрезается снизу, лицо вверху остаётся; фигуру без фона task.js тогда
     не рисует */
  .intro-hero.has-scene { min-height: 520px; padding: 28px 28px 24px; background-position: 50% 0; }
  .intro-hero.has-scene .say { flex: 0 0 auto; }
  .say { align-self: stretch; margin: 16px 0 0; }
  .intro-body { padding: 0; }
  .rule { font-size: 16px; }
  /* игра: слева лицо, подсказка и сообщение, справа поле */
  .play { max-width: 560px; margin-left: auto; margin-right: auto; }
  .play.is-wide { display: grid; grid-template-columns: 300px minmax(0, 680px); grid-gap: 36px; justify-content: center; align-items: start; max-width: none; padding-top: 20px; }
  .play-side { position: sticky; top: 96px; }
  .play.is-wide .play-face { display: block; position: relative; height: 280px; background: var(--zc);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
  /* сцена сотрудника вертикальным кадром по лицу */
  .play.is-wide .play-face.has-scene { height: 340px; background-image: var(--scene); background-size: cover; background-position: 50% 12%; background-repeat: no-repeat; }
  .play-side .play-rule { --cut: 10px; margin: 16px 0 0; padding: 14px 16px; background: var(--milk); color: var(--graphite); font-size: 15px; line-height: 1.45; text-align: left;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
  .play-side .play-msg { margin-top: 14px; min-height: 28px; font-size: 18px; text-align: left; }
  .play-main { min-width: 0; }
  /* у Ники большое лицо уже в боковой колонке, маленькое над сценой лишнее */
  .play.is-wide .dance-ani { display: none; }
  .play.is-wide .dance-call { margin-left: 0; }
  /* результат: слева итог и карточка, справа команда, факты и фото; низ
     карточки вровень с низом колонки (фото растягивается до него) */
  .done { max-width: none; }
  .done-cols { display: grid; grid-template-columns: 380px minmax(0, 1fr); grid-gap: 32px; align-items: stretch; max-width: 1040px; margin: 0 auto; }
  .done-side { display: flex; flex-direction: column; }
  .done-box { flex: 1 1 auto; display: flex; flex-direction: column; padding: 24px 24px 26px; }
  /* карточка квадратная: 380 − 2 × 24 */
  .done-box .done-card { flex: none; width: 100%; height: 332px; }
  .done-title { font-size: 34px; }
  .done-box .result-cta { margin-top: auto; padding-top: 18px; }
  .done-main { display: flex; flex-direction: column; margin-top: 0; text-align: left; }
  .done-main .facts { flex: 1 1 auto; display: flex; flex-direction: column; }
  .done-main .photo { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 200px; }
  .done-main .gal-view { flex: 1 1 0; min-height: 0; padding-top: 0; }
  .done-res .res-pct { font-size: 52px; }
  .res-pop { width: 420px; }
  .res-pop-pct { font-size: 132px; }
  /* шапка результата — только крестик над правым краем колонок; места в
     потоке не занимает, итог стоит сразу сверху */
  .sheet.is-result .sheet-head { position: absolute; left: 0; right: 0; top: 0; padding: 16px 24px 0; background: none; pointer-events: none; }
  .sheet.is-result .sheet-head-in { max-width: 1040px; }
  .sheet.is-result .sheet-head .icon-btn { pointer-events: auto; }
  .sheet.is-result .sheet-body { padding-top: 16px; }
  .done-res { padding-right: 60px; }
}
/* низкий ноутбук (1366×768, 1280×720): квадрат меньше, иначе «Забрать в
   команду» уходит за первый экран; ещё ниже (1366×657, 1280×590 — окно
   браузера) — ещё меньше, и фото справа ниже */
@media (min-width: 900px) and (max-height: 820px) {
  .done-box .done-card { width: 250px; height: 250px; margin: 0 auto; }
}
@media (min-width: 900px) and (max-height: 740px) {
  .done-box { padding-top: 18px; }
  .done-box .done-card { width: 140px; height: 140px; }
  .done-box .done-badge { bottom: 8px; padding: 4px 7px; font-size: 10px; letter-spacing: .06em; }
  .done-box .done-title { margin-top: 10px; font-size: 26px; }
  .done-box .done-tags li { padding: 4px 9px; font-size: 12px; }
  .done-main .photo { min-height: 150px; }
  .done-res { padding-top: 12px; padding-bottom: 6px; }
  .done-res .res-pct { font-size: 42px; }
  .done-box .result-cta { padding-top: 12px; }
  .done-trainee { margin-top: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
}
/* низкий телефон (375×667, 390×664): сцена ниже — «Забрать в команду» в
   первом экране */
@media (max-width: 899px) and (max-height: 700px) {
  .done-card { width: 220px; height: 150px; }
  .done-title { margin-top: 12px; font-size: 28px; }
  .done-box { padding-top: 18px; padding-bottom: 18px; }
  .done-res { padding-top: 12px; padding-bottom: 6px; }
  .res-pct { font-size: 40px; }
  .done-trainee { margin-top: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
  .result-cta { margin-top: 12px; }
}

/* ---------- анкета, голосование, финал ---------- */
.back-btn {
  --cut: 8px; display: inline-flex; align-items: center; margin: 0 0 14px -4px; padding: 7px 14px 7px 9px; border: 0;
  background: var(--milk); color: var(--night); font-size: 15px; font-weight: 600; cursor: pointer;
}
.back-btn:hover { background: #fff; }
.back-btn .ico { width: 18px; height: 18px; margin-right: 6px; flex: none; }
.form { margin-top: 18px; }
.field { display: block; margin-top: 14px; }
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--graphite); margin-bottom: 6px; }
.input {
  --cut: 10px; display: block; width: 100%; min-height: 54px; padding: 12px 16px; border: 0;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--night); font-size: 16px; color: var(--night);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--slate); }
.input:focus { box-shadow: inset 0 0 0 3px var(--night); }
.field.is-bad .input { box-shadow: inset 0 0 0 2px var(--red); }
.field-err { display: none; margin-top: 6px; font-size: 13px; color: var(--red); font-weight: 500; }
.field.is-bad .field-err { display: block; }
.hint { margin-top: 8px; font-size: 13px; color: var(--slate); }
.check { position: relative; display: flex; align-items: flex-start; margin-top: 14px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; }
.check .box { flex: none; width: 26px; height: 26px; margin-right: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--night); display: flex; align-items: center; justify-content: center; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.check .box svg { width: 16px; height: 16px; opacity: 0; }
.check input:checked + .box { background: var(--night); box-shadow: none; }
.check input:checked + .box svg { opacity: 1; }
/* внешний outline срезал бы тот же clip-path — кольцо внутри, как у полей */
.check input:focus-visible + .box { box-shadow: inset 0 0 0 3px var(--coral); }
.check a { color: var(--night); font-weight: 600; }
.check.is-bad .box { box-shadow: inset 0 0 0 2px var(--red); }
.check-err { display: none; margin: 4px 0 0 38px; font-size: 13px; color: var(--red); font-weight: 500; }
.check.is-bad + .check-err { display: block; }
.form-err { --cut: 8px; margin-top: 12px; padding: 10px 12px; background: #FBE7E3; color: var(--red); font-size: 14px; font-weight: 600; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-cta { margin-top: 22px; }
.tag-opt { font-weight: 400; color: var(--graphite); }

.vote-art { width: 72px; height: 72px; margin: 6px auto 0; display: flex; align-items: center; justify-content: center; background: #492A47; color: #fff; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.vote-art svg { width: 38px; height: 38px; }
.steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { --cut: 8px; position: relative; padding: 10px 12px 10px 48px; margin-top: 8px; background: var(--milk); font-size: 15px; counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 12px; top: 10px; width: 26px; height: 26px; transform: rotate(45deg) scale(.82); background: var(--coral); color: var(--night); font-weight: 800; font-size: 14px; line-height: 26px; text-align: center; }

.box-panel { --cut: 14px; margin-top: 18px; padding: 18px 16px; background: var(--milk); }
.box-panel h3 { font-family: var(--head); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--night); }
.box-panel .career-row { margin-top: 12px; }
.box-panel .btn--light { background: #fff; }
.box-panel .btn--light:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--night); }
.share-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; margin-top: 12px; }
.share-row .btn { min-height: 48px; padding: 0 12px; font-size: 14.5px; }
.share-row .btn .ico { width: 18px; height: 18px; margin-right: 8px; }
.share-row .btn--wide { grid-column: 1 / 3; }
.career-row > * + * { margin-top: 10px; }

/* ---------- отладка: кнопка сброса прогресса (debug в конфиге или ?debug=1) ---------- */
.debug-reset {
  position: fixed; z-index: 95; left: 0; top: 58%;
  display: flex; align-items: center; padding: 8px 5px; border: 0; border-radius: 0 12px 12px 0;
  background: rgba(18, 40, 32, .78); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; opacity: .55;
}
.debug-reset .ico { width: 18px; height: 18px; flex: none; }
.debug-reset span { display: none; margin: 0 5px 0 6px; white-space: nowrap; }
.debug-reset:hover, .debug-reset.is-armed { opacity: 1; }
.debug-reset:hover span, .debug-reset.is-armed span { display: inline; }
.debug-reset:focus-visible { opacity: 1; }
.debug-reset:focus-visible span { display: inline; }
.debug-reset.is-armed { background: var(--red); }

/* ---------- движение ---------- */
@keyframes mpulse { 0% { transform: scale(.55); opacity: .95; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes mbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes stickerPop { 0%, 100% { transform: rotate(-4deg) scale(1); } 8% { transform: rotate(3deg) scale(1.12); } 14% { transform: rotate(-4deg) scale(1); } }
@keyframes polaDrop { 0% { transform: translateY(-70px) rotate(-28deg) scale(.5); opacity: 0; } 55% { transform: translateY(8px) rotate(6deg) scale(1.08); opacity: 1; } 78% { transform: translateY(-4px) rotate(-2deg) scale(.98); } 100% { transform: none; opacity: 1; } }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0) scale(.4); opacity: 0; } 6% { opacity: 1; } 70% { transform: translate(var(--dx), var(--dy)) rotate(var(--rr)) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 24px)) rotate(var(--rr)); opacity: 0; } }
@keyframes burstPop { 0% { transform: scale(0) rotate(-40deg); } 60% { transform: scale(1.25) rotate(8deg); } 80% { transform: scale(.95) rotate(-4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ticketIn { from { transform: translateY(-40px) rotate(-8deg); opacity: 0; } to { transform: rotate(2deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .pin-pulse, .confetti { display: none !important; }
  .pin-col, .sticker, .pola-in, .pass, .pa *, .pp-page i.is-new, .stamp.is-on, .passport.is-party .pp-lotus path { animation: none !important; }
}