/* Экран гостя: вертикальный, 1080×1920. Цвета временные — придёт брендбук,
   меняется здесь и в одном месте скрипта (палитра шарика). */
/* Шрифт и цвета форума: Onest и зелёный с логотипа «Здоровье будущего». */
@font-face { font-family: Onest; src: url('brand/Onest-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Onest; src: url('brand/Onest-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

/* цвета приходят из /theme.css — один источник на весь стенд */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* Видео-заставка ложится под весь экран; пока её нет — молочный фон. */
#bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none; z-index: 0;
}
#bg.on { display: block; }
#screen { position: relative; z-index: 1; }
body {
  background: radial-gradient(120% 80% at 50% 0%, var(--bg1), var(--bg2));
  color: var(--ink);
  font-family: Onest, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  /* Курсор не прячем: на стенде мыши не будет, а смотреть и настраивать
     экран с компьютера без курсора невозможно. */
  user-select: none;
  -webkit-user-select: none;
}
/* Четыре этажа: шапка, шарик, текст, низ с кнопкой. Шарик раньше стоял
   абсолютом поверх всего и длинный вопрос налезал прямо на него. */
#screen {
  position: relative; height: 100%;
  display: grid; grid-template-rows: 7vh 31vh 1fr 33vh;
  text-align: center;
}
#top { display: flex; align-items: center; justify-content: center; padding-top: 2vh; }
#brand { height: 6vh; width: auto; object-fit: contain; }

#orbrow { display: flex; align-items: center; justify-content: center; }
#orb { display: block; }

/* Под текстом — мягкая молочная вуаль: на подложке есть тёмные золотые
   волны, и без неё вопрос местами терял контраст. */
#center {
  display: flex; flex-direction: column; justify-content: center; gap: 1vh; padding: 2vh 7vw;
  background: radial-gradient(60% 50% at 50% 50%, rgba(255,253,248,.88) 0%, rgba(255,253,248,.55) 55%, rgba(255,253,248,0) 100%);
}
#bottom { background: radial-gradient(60% 60% at 50% 40%, rgba(255,253,248,.75) 0%, rgba(255,253,248,0) 100%); }
/* Этапы сменяются плавно: раньше по нажатию «Начать» экран переключался
   рывком. Всё содержимое гаснет и проявляется, а не исчезает мгновенно. */
#center, #bottom { transition: opacity .45s ease; }
body.swap #center, body.swap #bottom { opacity: 0; }
#greeting { font-size: 2.6vh; color: var(--muted); margin-bottom: 2vh; min-height: 3vh; transition: opacity .4s; }
#question {
  font-size: clamp(18px, 3.8vh, 46px); line-height: 1.25; font-weight: 600;
  opacity: 0; transform: translateY(2vh); transition: opacity .5s, transform .5s;
}
#question.on { opacity: 1; transform: none; }
#final {
  font-size: 5vh; line-height: 1.2; font-weight: 700; color: var(--accent);
  opacity: 0; transition: opacity .6s;
}
#final.on { opacity: 1; }

/* Нижний блок поднят: на вертикальной панели кнопка у самого низа неудобна
   для нажатия — рука тянется к краю экрана. */
#bottom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vh; padding: 0 7vw 16vh; }
#startBtn {
  display: none;
  font: inherit; font-size: 3.4vh; font-weight: 600; color: #fff;
  background: var(--accent); border: 0; border-radius: 10vh;
  padding: 2.6vh 9vw; box-shadow: 0 1.5vh 4vh rgba(75,122,90,.28);
}
#startBtn.on { display: block; animation: breathe 3s ease-in-out infinite; }

/* после записи: ещё один ответ или забрать видео */
#afterBox { display: none; flex-direction: column; gap: 1.6vh; width: 100%; align-items: center; }
#afterBox.on { display: flex; }
#afterBox { gap: 1.2vh; }
#afterBox button {
  font: inherit; font-size: 2.7vh; font-weight: 600; color: #fff; background: var(--accent);
  border: 0; border-radius: 10vh; padding: 1.9vh 8vw; min-width: 62vw;
  box-shadow: 0 1.2vh 3vh rgba(93,114,96,.25);
}
/* Кнопки после записи: белое на белом не читалось, поэтому вторая кнопка —
   светлая с тёмным текстом и плотной рамкой, третья — приглушённая, но тоже
   с контрастным текстом. */
#afterBox button.ghost {
  background: #ffffff; color: var(--accent-dark);
  border: 3px solid var(--accent); box-shadow: 0 .8vh 2vh rgba(0,0,0,.08);
}
#afterBox button#retakeBtn { background: rgba(255,255,255,.9); color: var(--ink); border-color: rgba(38,51,45,.35); }

/* подготовка видео: гость видит, что процесс идёт */
#progBox { display: none; flex-direction: column; align-items: center; gap: 1.6vh; width: 74%; margin: 0 auto; text-align: center; }
#progBox.on { display: flex; }
#progText { font-size: 2.6vh; color: var(--muted); }
#progBar { width: 100%; height: 1.2vh; border-radius: 1vh; background: rgba(93,114,96,.18); overflow: hidden; }
#progFill { display: block; height: 100%; width: 10%; border-radius: 1vh; background: var(--accent); transition: width .5s ease; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

#timer { display: none; align-items: baseline; justify-content: center; gap: 2vw; flex-wrap: wrap; width: 100%; }
#timer.on { display: flex; }
#timerNum { font-size: 7vh; font-weight: 700; color: var(--accent); }
#timerHint { font-size: 2.6vh; color: var(--muted); }

/* Код поднимаем к центру экрана: на вертикальной панели снимать его снизу
   неудобно, телефон упирается в стойку. Кнопка остаётся под кодом. */
#qrBox { display: none; flex-direction: column; align-items: center; gap: 1.4vh; margin-bottom: 10vh; }
#qrBox.on { display: flex; }
/* Место под код держим постоянным: раньше сначала появлялись подпись и
   кнопка, а приехавший код сдвигал их вниз. */
#qr { width: 26.4vh; height: 26.4vh; display: flex; align-items: center; justify-content: center;
      background: #fff; border-radius: 2vh; padding: 1.2vh; }
#qr svg { width: 100%; height: 100%; }
.qrwait { width: 40%; height: 40%; border-radius: 50%; border: .6vh solid rgba(0,0,0,.08);
          border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Код сняли. Оформление ровно как в галерее Divent: светло-зелёная подложка,
   зелёная рамка, внутри тот же svg с кругом и птичкой. */
#qr.done { background: rgba(68,208,123,0.12); border: 1px solid rgba(68,208,123,0.6); }
#qr.done svg { width: 100%; height: 100%; }
#qrText { font-size: 2.4vh; color: var(--muted); }
/* Кнопка под кодом: гость уходит сам, не дожидаясь, пока экран сбросится. */
#finishBtn {
  font: inherit; font-size: 2.6vh; font-weight: 600; color: var(--accent-dark);
  background: #ffffff; border: 3px solid var(--accent);
  border-radius: 10vh; padding: 1.6vh 7vw; margin-top: 1vh;
}
#note { font-size: 2.2vh; color: var(--muted); min-height: 3vh; }

/* Согласие действием: мелкая строка под кнопкой вместо галочки
   (решение владельца — галочка на стенде тормозит очередь). */
#consentNote {
  font-size: 1.7vh; line-height: 1.35; color: var(--muted); opacity: .85;
  max-width: 80%; margin-top: .5vh;
}

/* выбор дубля: показывается, только если по вопросу их несколько */
#variantBox { display: none; flex-direction: column; align-items: center; gap: 1vh; width: 100%; }
#variantBox.on { display: flex; }
#variantBox .vlabel { font-size: 2vh; color: var(--muted); }
#variantBox .vrow { display: flex; gap: 2vw; }
#variantBox button {
  font: inherit; font-size: 2.3vh; font-weight: 600; color: var(--accent-dark);
  background: rgba(255,255,255,.75); border: 2px solid rgba(93,114,96,.35);
  border-radius: 10vh; padding: 1.3vh 5vw;
}
#variantBox button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* курсор во время набора текста */
#question.typing::after {
  content: '';
  display: inline-block; width: .08em; height: 1em;
  margin-left: .06em; vertical-align: -.08em;
  background: var(--accent);
  animation: caret .7s steps(1) infinite;
}
@keyframes caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Выход из любой нештатной ситуации: гость не должен упираться в экран без
   кнопок. Появляется при ошибке и если сборка затянулась. */
#escapeBox { display: none; flex-direction: column; gap: 1.2vh; align-items: center; width: 100%; }
#escapeBox.on { display: flex; }
#escapeBox button {
  font: inherit; font-size: 2.7vh; font-weight: 600; color: #fff; background: var(--accent);
  border: 0; border-radius: 10vh; padding: 1.9vh 8vw; min-width: 62vw;
}
#escapeBox button.ghost { background: #ffffff; color: var(--accent-dark); border: 3px solid var(--accent); }

/* Невидимый аварийный жест для оператора: три касания в любом углу экрана
   возвращают стенд на заставку. Нужен, когда гость ушёл, а экран остался
   на середине сценария. */
.corner { position: absolute; width: 16vw; height: 10vh; z-index: 5; }
.corner[data-corner="tl"] { top: 0; left: 0; }
.corner[data-corner="tr"] { top: 0; right: 0; }
.corner[data-corner="bl"] { bottom: 0; left: 0; }
.corner[data-corner="br"] { bottom: 0; right: 0; }
#resetToast {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9);
  background: rgba(38,51,45,.85); color: #fff; font-size: 2.6vh; font-weight: 600;
  padding: 1.6vh 6vw; border-radius: 10vh; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; z-index: 9;
}
#resetToast.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* проценты под шкалой сборки */
#progPct { font-size: 3.2vh; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Пока команда идёт на сервер, кнопки не ловят повторные касания: гость на
   тач-панели жмёт дважды почти всегда. Полсекунды гашения хватает. */
body.busy #afterBox button, body.busy #startBtn, body.busy #escapeBox button, body.busy #qrBox button {
  opacity: .55;
  pointer-events: none;
}