:root{
  --teal:#0b5563; --teal2:#14707f; --ink:#14313a; --bg:#eef3f4; --accent:#d97a25;
  /* Высоты фиксированных полос. Экраны считают по ним свои отступы, поэтому
     достаточно поменять здесь — контент нигде не заедет под полосу. */
  --bar-top:80px; --bar-bottom:100px;
  --gap-v:2.5vh;   /* вертикальный ритм: на низких экранах сжимается */
}
/* Ноутбуки и iPad в ландшафте: по высоте места мало, полосы ужимаем */
@media (max-height:900px){
  :root{ --bar-top:64px; --bar-bottom:84px; --gap-v:1.6vh; }
}
@media (max-height:760px){
  :root{ --bar-top:56px; --bar-bottom:70px; --gap-v:1vh; }
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; color:var(--ink);
  background:radial-gradient(circle at 50% -10%, #123c47 0%, #0b2831 60%, #071d24 100%);
  overflow:hidden;
  user-select:none; -webkit-user-select:none;
  -webkit-text-size-adjust:100%;   /* Safari иначе сам раздувает текст */
  touch-action:manipulation;       /* без задержки и зума по двойному тапу */
}
#app{position:fixed; inset:0;}
.screen{
  position:absolute; inset:0; display:none; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--bar-top) + var(--gap-v))
          max(5vw, env(safe-area-inset-left))
          calc(var(--bar-bottom) + var(--gap-v))
          max(5vw, env(safe-area-inset-right));
  animation:fade .45s ease; z-index:2;
  /* Если контент всё же выше экрана — даём прокрутить, а не срезаем кнопки.
     С обычным center верх уезжает за край и становится недоступен, поэтому
     safe center: он прижимает к началу вместо обрезки. */
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
@supports (justify-content:safe center){
  .screen{ justify-content:safe center; }
}
.screen.active{display:flex;}

/* Зацикленное видео-фон */
.site-bg-video{position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:blur(4px) brightness(.9) saturate(.9); transform:scale(1.04);}
.site-bg-overlay{position:fixed; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(7,29,36,.55) 0%, rgba(7,29,36,.4) 45%, rgba(7,29,36,.78) 100%);}
@keyframes fade{from{opacity:0; transform:translateY(12px);}to{opacity:1; transform:none;}}

/* Заголовки считаем и от ширины, и от высоты — на низком экране крупный кегль
   съедал место, которого не хватало кнопкам. */
h1{font-size:min(11vw,9vh,84px); margin:.1em 0; color:#fff; letter-spacing:-1px;}
h1 span{color:#5fd0df;}
h2{font-size:min(6vw,4.6vh,40px); color:#fff; margin:.2em 0;}
.eyebrow{color:#5fd0df; letter-spacing:3px; text-transform:uppercase;
  font-size:clamp(11px,1.4vh,14px); font-weight:700;}
.lead{color:#cfe1e4; font-size:min(3.2vw,2.5vh,22px); line-height:1.5;
  margin:var(--gap-v) 0 calc(var(--gap-v) * 2);}
.sub{color:#a9c4c9; font-size:min(3vw,2.3vh,20px);
  margin:.2em 0 calc(var(--gap-v) + 4px);}

/* ═══════════════════════════════════════
   ГЛОБАЛЬНЫЙ ТОПБАР
═══════════════════════════════════════ */
.global-topbar{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center;
  padding:0 max(24px, env(safe-area-inset-left)); height:calc(var(--bar-top) - 16px);
  transition:background .35s ease;
  pointer-events:none;
}

/* Режим приветственного экрана — прозрачный, только заголовок слева */
.global-topbar-title{
  color:#fff; font-size:13px; font-weight:800;
  letter-spacing:2.5px; text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.7);
  white-space:nowrap;
}

/* Режим внутренних экранов — тёмный фон как нижняя полоса + логотипы справа */
.global-topbar.inner{
  background:rgba(6,18,38,0.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 2px 20px rgba(0,0,0,.5);
  height:var(--bar-top);
  pointer-events:auto;
}
.global-topbar.inner .global-topbar-title{
  font-size:clamp(11px,1.1vw,14px); font-weight:900;
  letter-spacing:clamp(1.5px,.25vw,3px); text-shadow:none;
}

/* Логотипы в топбаре (правая часть, только на внутренних экранах) */
.topbar-logos{
  display:none;
  align-items:center;
  margin-left:auto;
  height:100%;
}
.global-topbar.inner .topbar-logos{
  display:flex;
}
.topbar-logos img{
  height:clamp(22px,calc(var(--bar-top) - 30px),52px); width:auto;
  max-width:clamp(70px,12vw,180px);
  object-fit:contain; opacity:.95;
  padding:0 clamp(10px,2vw,28px); flex:0 1 auto; min-width:0;
}
.topbar-logos img + img{
  border-left:1px solid rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════
   ГЛОБАЛЬНАЯ НИЖНЯЯ ПОЛОСА ПАРТНЁРОВ
═══════════════════════════════════════ */
.global-partners{
  position:fixed; bottom:0; left:0; right:0; z-index:20;
  background:rgba(6,18,38,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.1);
  padding:8px max(20px, env(safe-area-inset-left))
          calc(10px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-height:var(--bar-bottom);
  justify-content:center;
}
.global-partners-label{
  color:rgba(255,255,255,.38); font-size:clamp(8px,.75vw,9px); font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
}
.global-partners-logos{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap; width:100%;
}
.global-partners-logos img{
  height:clamp(26px,calc(var(--bar-bottom) - 44px),62px); width:auto;
  max-width:clamp(80px,17%,200px);
  object-fit:contain; opacity:.95;
  padding:0 clamp(10px,2.4vw,36px); flex:0 1 auto; min-width:0;
}
.global-partners-logos img + img{
  border-left:1px solid rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════
   КНОПКИ
═══════════════════════════════════════ */
/* Кнопки не мельче 44px по высоте — минимум для пальца на планшете. */
.btn-primary{
  background:linear-gradient(135deg,#14707f,#0b5563); color:#fff; border:none;
  border-radius:16px; padding:clamp(13px,1.8vh,18px) clamp(22px,3vw,34px);
  font-size:clamp(16px,2vh,20px); font-weight:700; cursor:pointer; min-height:44px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .1s;
}
.btn-primary:active{transform:scale(.96);}
.btn-primary.big{font-size:min(4vw,2.6vh,26px);
  padding:clamp(15px,2.2vh,22px) clamp(28px,4vw,44px); border-radius:20px;}
/* Фиолетовый вариант основной кнопки — «Загрузить с телефона» на экране съёмки.
   Текст длиннее, чем у «Снять», поэтому кегль и отступы чуть меньше — иначе
   кнопка выходила заметно крупнее соседней и перетягивала внимание. */
.btn-primary.btn-violet{
  background:linear-gradient(135deg,#7c3aed,#5b21b6);
  font-size:min(3.1vw,2vh,20px);
  padding:clamp(13px,1.9vh,19px) clamp(20px,2.4vw,28px);
}
.btn-ghost{
  background:transparent; color:#a9c4c9; border:1.5px solid #3a616b; border-radius:14px;
  padding:clamp(11px,1.5vh,14px) clamp(18px,2.5vw,26px);
  font-size:clamp(15px,1.9vh,18px); cursor:pointer; min-height:44px;
  margin-top:var(--gap-v);
}
.btn-ghost:active{background:rgba(255,255,255,.06);}
.row{display:flex; gap:clamp(10px,1.6vw,18px); align-items:center;
  margin-top:10px; flex-wrap:wrap; justify-content:center;}
.upload{display:inline-flex; align-items:center;}

/* ═══════════════════════════════════════
   ЛОКАЦИИ
═══════════════════════════════════════ */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(clamp(190px,22vw,230px),1fr));
  gap:clamp(12px,1.8vh,20px); width:100%; max-width:1000px;}
.loc{
  background:rgba(255,255,255,.07); border:1.5px solid #2c5560; border-radius:20px;
  padding:clamp(16px,2.4vh,26px) clamp(16px,1.8vw,22px);
  cursor:pointer; text-align:left; transition:transform .12s, border-color .12s;
}
.loc:active{transform:scale(.97);}
.loc.on{border-color:#5fd0df;}
.loc.off{opacity:.4; pointer-events:none;}
.loc h3{margin:0 0 8px; color:#fff; font-size:clamp(17px,2.3vh,22px);}
.loc-slogan{margin:0; color:#5fd0df; font-size:clamp(12px,1.6vh,14px); font-style:italic; line-height:1.4;}
.loc.off .loc-slogan{color:#7fa0a7;}
.loc .soon{color:var(--accent); font-size:12px; font-weight:700; margin-top:10px;}

/* ═══════════════════════════════════════
   ОБРАЗ
═══════════════════════════════════════ */
.outfit-grid{display:flex; gap:clamp(14px,2.4vw,24px); flex-wrap:wrap;
  justify-content:center; max-width:760px; width:100%;}
.outfit{background:rgba(255,255,255,.07); border:1.5px solid #2c5560; border-radius:22px;
  padding:clamp(18px,3vh,30px) clamp(18px,2.4vw,28px);
  width:min(300px,44%); min-width:220px; cursor:pointer;
  transition:transform .12s, border-color .12s;}
.outfit:active{transform:scale(.97);}
/* hover только там, где есть мышь: на планшете подсветка залипает после тапа */
@media (hover:hover){ .outfit:hover{border-color:#5fd0df;} }
.outfit .emoji{font-size:clamp(34px,5vh,52px); margin-bottom:8px;}
.outfit h3{margin:0 0 8px; color:#fff; font-size:clamp(19px,2.7vh,26px);}
.outfit p{margin:0; color:#a9c4c9; font-size:clamp(14px,1.9vh,16px);}

/* ═══════════════════════════════════════
   КАМЕРА
═══════════════════════════════════════ */
/* Овал крупнее и опущен ниже: при 52%/42% подбородок и губы оказывались на самой
   границе, гость подавался назад — и в кадр попадало мелкое лицо. Теперь нижний
   край овала на 78% высоты кадра, рот заведомо внутри. */
.face-guide{position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  width:66%; aspect-ratio:3/4; border:3px dashed rgba(255,255,255,.85); border-radius:50%;
  box-shadow:0 0 0 1000px rgba(7,29,36,.35); pointer-events:none; z-index:2;}
/* Размер задаём по ВЫСОТЕ: раньше кадр считался от ширины (min(70vw,540px)) и в
   ландшафте iPad вырастал до 720px — экран съёмки не помещался, кнопка «Снять»
   уезжала за край и была недоступна. Третий член min() страхует по ширине,
   чтобы на узких экранах пропорция 3:4 не ломалась. */
/* margin-inline:auto обязателен: блок считает ширину из aspect-ratio и без него
   прижимается к левому краю. Раньше это не бросалось в глаза — кадр был самым
   широким элементом, и колонка ужималась по нему; теперь он уже кнопок. */
.camera-wrap{position:relative; height:min(56vh, 600px, 117vw); width:auto; aspect-ratio:3/4;
  border-radius:24px; overflow:hidden;
  background:#000; box-shadow:0 12px 40px rgba(0,0,0,.5);
  margin:var(--gap-v) auto calc(var(--gap-v) + 8px);}
/* Порог 1100px закрывает iPad 12.9 в ландшафте (1366×1024), Full HD и ноутбуки:
   там кадру нужно уступить место заголовку и кнопкам, иначе экран съёмки уходит
   в прокрутку. В портрете (высота 1366) правило не срабатывает — кадр крупный. */
@media (max-height:1100px){
  .camera-wrap{height:min(50vh, 600px, 117vw);}
}
/* Ноутбуки 768px: там даже поджатых отступов не хватает */
@media (max-height:800px){
  .camera-wrap{height:min(48vh, 600px, 117vw);}
}
/* Экран съёмки самый плотный. Чтобы кадр остался крупным (гость подходит ближе —
   лицо в кадре крупнее — распознавание точнее), место отыгрываем на отступах,
   а не на размере кадра. */
#camera-mode .sub{margin-bottom:4px;}
#camera-mode .camera-wrap{margin-top:6px;}
#camera-mode .row{margin-top:4px;}
#video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1);}
.cam-error{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; padding:20px; background:rgba(0,0,0,.6);}

/* ═══════════════════════════════════════
   ЭКРАН ЗАГРУЗКИ (редизайн)
═══════════════════════════════════════ */
.loading-inner{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  width:100%; max-width:900px;   /* хватает, чтобы пять логотипов встали в строку */
}
.loading-eyebrow{
  color:rgba(95,208,223,.9); font-size:11px; font-weight:800;
  letter-spacing:3px; text-transform:uppercase; margin:0;
}
.loading-title{
  color:#fff; font-size:min(6.5vw,44px); margin:0; font-weight:700;
}
.loading-bar{
  width:100%; max-width:480px; height:4px;
  background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden;
}
.loading-bar-fill{
  height:100%; width:0%; border-radius:2px;
  background:linear-gradient(90deg, #0f2d8a 0%, #00c2c8 100%);
  transition:width .6s ease;
}

/* Секция партнёров на загрузке */
.loading-sponsors{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  margin-top:16px; padding:24px clamp(14px,3vw,36px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:rgba(6,18,38,.65);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  width:100%;
}
.loading-sponsors-label{
  color:rgba(255,255,255,.42); font-size:10px; font-weight:800;
  letter-spacing:3px; text-transform:uppercase; margin:0;
}
/* Пятый логотип раньше срывался на вторую строку: nowrap + гибкие отступы
   держат всех в одну линию и на узких экранах киоска тоже. */
.loading-sponsors-logos{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap; width:100%;
}
.loading-sponsors-logos img{
  height:clamp(26px,6vh,52px); width:auto; max-width:clamp(80px,19%,200px);
  object-fit:contain; opacity:.9;
  padding:0 clamp(8px,1.8vw,24px);
  flex:0 1 auto; min-width:0;
}
.loading-sponsors-logos img + img{
  border-left:1px solid rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════
   ВАРИАНТЫ, КАРТОЧКА, ФИНАЛ
═══════════════════════════════════════ */
.spinner{width:80px; height:80px; border:7px solid rgba(255,255,255,.15); border-top-color:#5fd0df;
  border-radius:50%; animation:spin 1s linear infinite; margin-bottom:24px;}
@keyframes spin{to{transform:rotate(360deg);}}

.variants{display:flex; gap:clamp(12px,2vw,22px); flex-wrap:wrap; justify-content:center;}
/* тоже по высоте — иначе на низких экранах кадры вылезают за пределы */
.variants img{height:min(52vh,420px,60vw); width:auto; aspect-ratio:3/4; object-fit:cover; border-radius:18px;
  border:4px solid transparent; cursor:pointer; box-shadow:0 8px 26px rgba(0,0,0,.4); transition:transform .12s, border-color .12s;}
.variants img:active{transform:scale(.97);}
.variants img.sel{border-color:#5fd0df;}

/* flex-start, а не center: колонка с QR короче карточки и при центрировании
   всплывала выше её верхнего края — на iPad на 48px. Теперь обе начинаются
   от одной линии на любом экране. */
.card-view{display:flex; gap:clamp(18px,3vw,40px); align-items:flex-start;
  flex-wrap:wrap; justify-content:center; width:100%;}
#card-img{height:min(62vh,540px); width:auto; max-width:min(42vw,380px);
  object-fit:contain; border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,.5); background:#fff;}
.card-side{display:flex; flex-direction:column; align-items:center; gap:8px;
  width:min(100%,340px);}
/* QR опущен вниз, а подпись под ним прижата к кнопке печати: раньше между
   подписью и кнопкой зияла дыра, а сам QR висел выше верхнего края карточки. */
.qr{width:clamp(96px,14vh,150px); height:clamp(96px,14vh,150px);
  background:#fff; border-radius:12px; padding:8px;
  margin-top:clamp(4px,1.6vh,16px);}
.card-side .sub{margin-bottom:0;}

/* ═══════════════════════════════════════
   QR-ЗАГРУЗКА ФОТО С ТЕЛЕФОНА
═══════════════════════════════════════ */
.qr-upload-img{
  width:min(50vw,280px); height:min(50vw,280px);
  background:#fff; border-radius:16px; padding:10px;
  margin:16px 0;
}
.qr-waiting{
  color:#5fd0df; font-size:16px; font-weight:600;
  letter-spacing:1px; animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ═══════════════════════════════════════
   EMAIL-БЛОК НА ЭКРАНЕ КАРТОЧКИ
═══════════════════════════════════════ */
.email-block{
  width:100%; margin-top:14px;
  padding:16px 20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  text-align:left;
}
.email-label{
  color:rgba(255,255,255,.5); font-size:12px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; margin:0 0 10px;
}
.email-row{display:flex; gap:8px;}
.email-input{
  flex:1; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.2);
  border-radius:12px; padding:12px 16px; color:#fff; font-size:16px;
  outline:none; transition:border-color .2s;
}
.email-input::placeholder{color:rgba(255,255,255,.35);}
.email-input:focus{border-color:#5fd0df;}
.btn-email{
  background:linear-gradient(135deg,#14707f,#0b5563); color:#fff; border:none;
  border-radius:12px; padding:12px 20px; font-size:15px; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:transform .1s, opacity .2s;
}
.btn-email:active{transform:scale(.96);}
.btn-email:disabled{opacity:.4; cursor:default;}
.email-status{
  margin:10px 0 0; font-size:13px; min-height:18px;
  color:#5fd0df;
}
.email-status.error{color:#f87171;}

/* На совсем низких окнах (ноутбук с открытыми панелями) правая колонка карточки
   не помещалась — поджимаем блок почты, он там самый объёмный. */
@media (max-height:760px){
  .card-side{gap:5px;}
  .email-block{margin-top:8px; padding:10px 14px;}
  .email-label{margin-bottom:6px; font-size:11px;}
  .email-status{margin-top:6px; min-height:14px; font-size:12px;}
  .email-input{padding:10px 14px;}
}

.check{width:clamp(72px,11vh,110px); height:clamp(72px,11vh,110px); border-radius:50%;
  background:#1f9d63; color:#fff; font-size:clamp(42px,6.4vh,64px);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  flex-shrink:0; box-shadow:0 10px 30px rgba(0,0,0,.4);}
.countdown{color:#7fa0a7; margin-top:20px;}
.hidden{display:none;}