/* Экран на площадке. Свёрстан по макету Figma «киоск для голосования»:
   1080×1920, вертикальный монитор.

   Единица измерения — макетный пиксель: в макете экран 1080 широкий, и
   корневой размер шрифта равен ровно одному такому пикселю. Поэтому во всех
   правилах стоят те же числа, что и в макете, а подгонку под монитор делает
   одна строка в :root. */

/* Шрифты Lamoda, присланные заказчиком 23.09.2026. Раньше здесь стоял
   Druk Text Wide — другое начертание, оно на 6–9 процентов уже, и при кегле
   из макета строки вставали не туда. Имена семейств в правилах оставлены
   прежними, чтобы вся вёрстка не переписывалась.

   У CoFo Sans LaModa есть только Regular и Bold; где в правилах стоит
   вес 500, браузер сам возьмёт ближайший — Regular. */

@font-face { font-family: "CoFo Sans"; src: url("/static/fonts/CoFoSansLaModa-Regular.otf") format("opentype");
  font-weight: 400; font-display: block; }
@font-face { font-family: "CoFo Sans"; src: url("/static/fonts/CoFoSansLaModa-Bold.otf") format("opentype");
  font-weight: 700; font-display: block; }
@font-face { font-family: "CoFo Sans"; src: url("/static/fonts/CoFoSansLaModa-Italic.otf") format("opentype");
  font-style: italic; font-display: block; }
@font-face { font-family: "Druk Wide Cyr"; src: url("/static/fonts/DrukWideCyr-Heavy.otf") format("opentype");
  font-weight: 900; font-display: block; }

:root {
  font-size: min(calc(100vw / 1080), calc(100vh / 1920));
  --mint: #aaf4bf;
  --druk: 900 1rem/1 "Druk Wide Cyr", "Arial Black", sans-serif;
  --cofo: "CoFo Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; color: #fff; }

#screen { position: relative; width: 1080rem; height: 1920rem; overflow: hidden; background: #000; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dim { position: absolute; inset: 0; background: rgba(0,0,0,.72); }

.day { position: absolute; left: 58rem; top: 110rem; margin: 0; font: var(--druk);
  font-size: 120rem; line-height: 120rem; letter-spacing: -4.8rem; text-transform: uppercase;
  color: var(--mint); }
.hint { position: absolute; left: 62rem; top: 250rem; margin: 0; font-family: "CoFo Sans", sans-serif;
  font-weight: 500; font-size: 28rem; color: rgba(255,255,255,.75); }

/* Сетка образов: три в ряд, как в макете */
.grid { position: absolute; left: 65rem; top: 358rem; width: 950rem;
  display: grid; grid-template-columns: repeat(3, 303rem); gap: 54rem 20rem; }
.card { position: relative; }
/* Карточка — тот же печатный лист, что и на сайте: серый фон с росчерком,
   квадратом «la» и подписью, а с будки приходит только вырезка */
.shot { position: relative; width: 303rem; height: 426rem; overflow: hidden;
  background: url("/static/design/decor_squiggle.svg") right -18% top 4% / auto 92% no-repeat,
              linear-gradient(180deg, #8f8f8f 0%, #a4a4a4 45%, #c3c3c3 100%); }
.poster-la { position: absolute; right: 7%; top: 26%; width: 11%; height: auto; }
.poster-line { position: absolute; left: 7%; top: 32%; margin: 0; font-family: var(--cofo);
  font-size: 10rem; line-height: 13rem; color: #fff; white-space: nowrap; }
/* Отступ снизу считается от плашки голосов: в долях логотип налезал бы на неё */
.poster-logo { position: absolute; right: 7%; bottom: 72rem; font-family: var(--cofo);
  font-weight: 500; font-size: 13rem; line-height: 15rem; text-align: right; color: var(--mint); }
/* Участник приходит вырезанным, без фона: contain, чтобы не срезать ноги */
.shot .cut { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tally { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10rem;
  background: rgba(0,0,0,.3); color: var(--mint); font: var(--druk); text-transform: uppercase; }
.tally span { display: block; font-size: 12rem; line-height: 14rem; }
.tally b { font-size: 32rem; line-height: 34rem; }
.name { display: block; margin-top: 10rem; font: var(--druk); font-size: 20rem; line-height: 22rem;
  text-transform: uppercase; }
.place { position: absolute; left: 0; top: 0; padding: 8rem 14rem 10rem; background: var(--mint);
  color: #000; font: var(--druk); font-size: 46rem; line-height: 44rem; text-transform: uppercase; }
.place span { display: block; font-size: 14rem; }

.logo { position: absolute; left: 51rem; top: 1535rem; width: 724rem; }
.barcode { position: absolute; left: 972rem; top: 1548rem; width: 108rem; }
.mark { position: absolute; left: 971rem; top: 109rem; width: 109rem; height: 109rem; }

/* ------------------------------------------------- голосование с экрана

   Всё ниже появляется только когда экрана коснулись. Размеры — в тех же
   макетных пикселях: 1rem это один пиксель макета 1080×1920. */

.card { cursor: pointer; }

.viewer, .sheet, .modal { position: absolute; inset: 0; z-index: 30;
  background: rgba(0,0,0,.88); }
.sheet, .modal {
  /* Тот же серый росчерк, что в окне входа на телефоне */
  background: linear-gradient(180deg, #5e5e5e 0%, #7a7a7a 35%, #888888 70%, #9c9c9c 100%); }
.sheet::before, .modal::before { content: ""; position: absolute; inset: 0;
  background: url("/static/design/decor_squiggle.svg") right -60rem top / auto 110% no-repeat;
  opacity: .85; pointer-events: none; }
.sheet > *, .modal > * { position: relative; }

.close { position: absolute; right: 60rem; top: 60rem; width: 110rem; height: 110rem;
  border: 0; background: #000; cursor: pointer; z-index: 2; }
.close::before, .close::after { content: ""; position: absolute; left: 25rem; top: 53rem;
  width: 60rem; height: 5rem; background: #fff; }
.close::before { transform: rotate(45deg); }
.close::after { transform: rotate(-45deg); }

/* ---------------------------------------------------------- просмотр */

.viewer-photo { position: absolute; left: 90rem; top: 210rem; width: 900rem; height: 1200rem;
  object-fit: contain; }
.viewer-tally { position: absolute; left: 90rem; top: 1440rem; padding: 14rem 24rem;
  background: rgba(0,0,0,.88); color: var(--mint); font: var(--druk); text-transform: uppercase; }
.viewer-tally span { display: block; font-size: 20rem; line-height: 22rem; }
.viewer-tally b { font-size: 56rem; line-height: 58rem; }
.viewer-name { position: absolute; left: 90rem; top: 1590rem; margin: 0; font: var(--druk);
  font-size: 44rem; line-height: 46rem; text-transform: uppercase; color: #fff; }
.viewer-vote { left: 90rem; top: 1700rem; width: 900rem; height: 130rem; font-size: 46rem; }
.arrow { position: absolute; top: 700rem; width: 130rem; height: 200rem; border: 0;
  background: rgba(0,0,0,.5); color: #fff; font-size: 90rem; line-height: 1; cursor: pointer; }
.arrow.left { left: 0; }
.arrow.right { right: 0; }

/* ------------------------------------------------------------- вход */

.btn { border: 0; background: none; cursor: pointer; font: var(--druk);
  text-transform: uppercase; letter-spacing: 0; }
.btn-outline { border: 3rem solid #fff; color: #fff; }
.btn-mint { border: 3rem solid var(--mint); color: var(--mint); }
.btn:disabled { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.4); cursor: default; }
.sheet .btn, .modal .btn { position: absolute; }
.sheet-cancel { left: 90rem; top: 1560rem; width: 430rem; height: 130rem; font-size: 40rem; }
.sheet-next { left: 560rem; top: 1560rem; width: 430rem; height: 130rem; font-size: 40rem; }

.sheet-title { position: absolute; left: 90rem; top: 190rem; margin: 0; font: var(--druk);
  font-size: 100rem; line-height: 96rem; letter-spacing: -4rem; text-transform: uppercase;
  color: #fff; }
.sheet-note { position: absolute; left: 90rem; width: 820rem; margin: 0;
  font-family: var(--cofo); font-weight: 400; font-size: 32rem; line-height: 44rem; color: #fff; }
#step-code .sheet-note { top: 780rem; }
#step-code .sheet-note + .error + .sheet-note { top: 1060rem; }
#step-dial .sheet-note { top: 700rem; }
#step-welcome .sheet-note { top: 560rem; }
.error { position: absolute; left: 90rem; top: 950rem; width: 820rem; margin: 0;
  font-family: var(--cofo); font-weight: 500; font-size: 32rem; color: #fff; }

/* Поля и согласия — как в будке: гость уже видел их там */
.field { position: absolute; left: 90rem; width: 900rem; border-bottom: 3rem solid #fff; }
.field-surname { top: 300rem; height: 120rem; }
.field-name { top: 450rem; height: 120rem; }
.field-phone { top: 600rem; height: 120rem; }
.field:focus-within { border-bottom-color: var(--mint); }
.field-label { position: absolute; left: 0; top: 0; font-family: var(--cofo);
  font-size: 24rem; color: #fff; }
.field-value { position: absolute; left: 10rem; bottom: 14rem; width: 880rem; padding: 0;
  border: 0; background: none; outline: none; font-family: var(--cofo); font-size: 48rem;
  color: #fff; }
.field-value::placeholder { color: #fff; opacity: .7; }

.consent-row { position: absolute; left: 90rem; width: 900rem; }
.consent-pd { top: 790rem; }
.check { display: flex; gap: 24rem; width: 600rem; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer; }
.check-box { flex: none; width: 46rem; height: 46rem; border: 3rem solid #fff; padding: 6rem;
  background-clip: content-box; background-color: transparent; }
.check[aria-pressed="true"] .check-box { background-color: #fff; }
.check-text { font-family: var(--cofo); font-weight: 500; font-size: 22rem; line-height: 28rem;
  color: #fff; }
.btn-read { position: absolute; right: 0; top: 0; width: 250rem; height: 66rem; font-size: 24rem; }

/* Цифры из звонка */
.code-cells { position: absolute; left: 90rem; top: 560rem; display: flex; gap: 30rem;
  width: 560rem; }
.code-cells input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  border: 0; background: none; }
.cell { flex: 1; height: 140rem; border-bottom: 5rem solid #fff; font: var(--druk);
  font-size: 90rem; line-height: 140rem; text-align: center; color: #fff; }
.cell.on { border-bottom-color: var(--mint); }
.code-cells.wrong .cell { color: #ff5a1f; border-bottom-color: #ff5a1f; }

.dial { position: absolute; left: 90rem; top: 500rem; margin: 0; font: var(--druk);
  font-size: 84rem; line-height: 1.1; letter-spacing: -3rem; white-space: nowrap; color: #fff;
  border-bottom: 5rem solid #fff; padding-bottom: 16rem; }

.modal-text { position: absolute; left: 90rem; top: 340rem; width: 900rem; height: 1120rem;
  overflow-y: auto; font-family: var(--cofo); font-size: 28rem; line-height: 40rem; color: #fff; }
.modal-text p { margin: 0 0 24rem; }
.modal-text h4 { margin: 0 0 12rem; font-size: 32rem; }

.idle { background: rgba(0,0,0,.92); }
.idle .sheet-title { top: 700rem; }
.idle .sheet-note { top: 980rem; }
.idle .sheet-note b { color: var(--mint); }

.toast { position: absolute; left: 90rem; bottom: 60rem; z-index: 40; margin: 0;
  padding: 24rem 32rem; background: #000; color: #fff; font-family: var(--cofo);
  font-weight: 500; font-size: 30rem; }

/* Клавиатура перенесена из будки вместе со стилями: гость уже печатал на ней
   имя у фотозоны, и вторая непохожая клавиатура только сбивала бы */
.keyboard { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 1080rem; height: 650rem; padding: 60rem 0 0 55rem; z-index: 50;
  background: rgba(0,0,0,.6); }
.kb-row { display: flex; gap: 20rem; margin-bottom: 20rem; }
.keyboard[data-layout="phone"] .kb-row { justify-content: center; padding-right: 55rem; }
.kb-key { width: 90rem; height: 90rem; padding: 0; cursor: pointer;
  border: 3rem solid #fff; background: rgba(0,0,0,.02); color: #fff;
  font-family: var(--cofo); font-weight: 400; font-size: 40rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; }
.kb-key:active { background: rgba(255,255,255,.25); }
.kb-key.spacer { border: 0; background: none; pointer-events: none; }
.kb-shift, .kb-done { width: 200rem; }
.kb-space { width: 420rem; }
.kb-shift, .kb-space, .kb-done { height: 90rem; }
.kb-done { font-weight: 700; font-size: 24rem; letter-spacing: .06em; text-transform: uppercase; }