/* Таймер Hoff — «Заполните гардероб».
   Референсная канва — 1194×834 (iPad Pro 11", горизонтальная ориентация).
   Все размеры — min(Xvh, Yvw): ограничитель по vh держит вертикальную
   компоновку, по vw — не даёт разъезжаться на широких экранах. */

:root {
  /* Design tokens (Figma «Hoff 13_08_26») */
  --red: #DA0916;
  --white: #FFFFFF;
  --white-muted: rgba(255, 255, 255, 0.85);
  --overlay: rgba(190, 6, 18, 0.55);
  --seam: rgba(0, 0, 0, 0.16);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.10);
  --shadow-btn: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-flap-top: 0 6px 14px rgba(0, 0, 0, 0.12);
  --shadow-flap-bottom: 0 -6px 14px rgba(0, 0, 0, 0.12);

  /* Табло */
  --cell-w: min(20vh, 13.6vw);
  --cell-h: min(29vh, 20vw);
  --cell-r: min(2.4vh, 1.8vw);
  --digit-fs: min(20vh, 14vw);

  /* Тайминги */
  --flip-dur: 170ms;
  --pop-dur: 260ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--red);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Экран ---------- */

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: min(4vh, 3vw) 4vw min(4.5vh, 3.4vw);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Красный круг-градиент. Пропорции из Figma:
   left 18.186, top −340.207, 1157.628×866.604 при канве 1194×834. */
.bg-decor {
  position: absolute;
  left: 1.52vw;
  top: -40.8vh;
  width: 96.95vw;
  height: 103.9vh;
  background: url(assets/bg.png) center / cover no-repeat;
  pointer-events: none;
}

/* ---------- Шапка ---------- */

.header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1.6vh, 1.2vw);
  text-align: center;
}

.logo {
  width: min(9vw, 104px);
  height: auto;
  display: block;
}

.title,
.subtitle {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
}

.title {
  font-size: min(4.4vh, 3.2vw);
  color: var(--white);
}

.subtitle {
  font-size: min(3.4vh, 2.5vw);
  color: var(--white-muted);
}

/* ---------- Табло ---------- */

.clock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1.6vh, 1.1vw);
}

.clock__colon {
  font-weight: 700;
  font-size: min(13vh, 9vw);
  line-height: 1;
  color: var(--white);
  padding: 0 min(0.6vh, 0.5vw);
  transform: translateY(-0.5vh);
}

.cell {
  position: relative;
  width: var(--cell-w);
  height: var(--cell-h);
  border-radius: var(--cell-r);
  background: var(--white);
  overflow: hidden;
  perspective: 1200px;
  box-shadow: var(--shadow-card);
}

/* Половина карточки: рендерит цифру полной высоты и обрезает её.
   Нижняя — тот же контейнер со сдвигом на половину высоты вверх. */
.cell__half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: var(--white);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  justify-content: center;
}

.cell__half--top {
  top: 0;
  border-radius: var(--cell-r) var(--cell-r) 0 0;
}

.cell__half--bottom {
  top: 50%;
  border-radius: 0 0 var(--cell-r) var(--cell-r);
}

.cell__glyph {
  height: var(--cell-h);
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: var(--digit-fs);
  line-height: 1;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

.cell__half--bottom .cell__glyph {
  margin-top: calc(var(--cell-h) / -2);
}

/* Створки: падающая верхняя со старой цифрой, прилетающая нижняя с новой. */
.cell__flap {
  z-index: 3;
}

.cell__flap--top {
  transform-origin: center bottom;
  animation: hoffFlipTop var(--flip-dur) ease-in both;
  box-shadow: var(--shadow-flap-top);
}

.cell__flap--bottom {
  transform-origin: center top;
  animation: hoffFlipBottom var(--flip-dur) var(--flip-dur) ease-out both;
  box-shadow: var(--shadow-flap-bottom);
}

.cell__shade {
  position: absolute;
  inset: 0;
  background: #000;
  border-radius: var(--cell-r);
  z-index: 4;
  pointer-events: none;
  animation: hoffFlipShade calc(var(--flip-dur) * 2) linear both;
}

.cell__seam {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1px);
  height: 2px;
  background: var(--seam);
  z-index: 5;
}

/* Вариант «плоские цифры» (флаг в app.js / ?digits=flat) */
.cell--flat {
  width: var(--cell-w);
  height: var(--cell-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--digit-fs);
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

/* ---------- Блок управления ---------- */

.controls {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(3vh, 2.2vw);
}

.preset-panel {
  display: flex;
  align-items: center;
  gap: min(4vh, 3vw);
  border: 2px solid var(--white);
  border-radius: 23px;
  padding: min(2vh, 1.5vw) min(3vh, 2.2vw);
}

.preset-panel[hidden] { display: none; }

.preset-panel__label {
  font-weight: 700;
  font-size: min(3.2vh, 2.3vw);
  color: var(--white);
  white-space: nowrap;
}

.preset-panel__pills {
  display: flex;
  gap: min(2vh, 1.5vw);
}

.actions {
  display: flex;
  gap: min(3vh, 2.2vw);
}

/* Интерфейс тач-онли: hover-состояний нет, только :active. */
.pill,
.btn {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  border-radius: 60px;
}

.pill:active,
.btn:active {
  transform: scale(0.97);
}

.pill {
  min-width: min(22vh, 15vw);
  height: min(9vh, 6.6vw);
  font-size: min(3.2vh, 2.3vw);
  border: 3px solid var(--white);
  background: transparent;
  color: var(--white);
}

.pill.is-active {
  background: var(--white);
  color: var(--red);
}

.btn {
  min-width: min(30vh, 21vw);
  height: min(11vh, 8vw);
  font-size: min(3.4vh, 2.4vw);
}

.btn--primary {
  border: 0;
  background: var(--white);
  color: var(--red);
  box-shadow: var(--shadow-btn);
}

.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 3px solid var(--white);
}

.btn--filled {
  border: 0;
  background: var(--red);
  color: var(--white);
}

/* ---------- Попап «Время вышло» ---------- */

.popup {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}

.popup[hidden] { display: none; }

/* Размеры 1044×684 и радиус 61 — из Figma-фрейма «Pop-up». */
.popup__card {
  width: min(88vw, 1044px);
  height: min(82vh, 684px);
  background: var(--white);
  border-radius: 61px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(3vh, 2.2vw);
  animation: hoffPop var(--pop-dur) ease-out both;
}

.popup__logo {
  width: min(9vw, 102px);
  height: auto;
  display: block;
}

.popup__line {
  font-weight: 700;
  color: var(--red);
  text-align: center;
}

.popup__line--sm {
  font-size: min(15vh, 11vw);
  line-height: 0.92;
}

.popup__line--lg {
  font-size: min(22vh, 16vw);
  line-height: 0.88;
  margin-top: -2vh;
}

.popup .btn--filled {
  min-width: min(34vh, 24vw);
  margin-top: min(2vh, 1.5vw);
}

/* ---------- Keyframes ---------- */

@keyframes hoffFlipTop {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(-90deg); }
}

@keyframes hoffFlipBottom {
  from { transform: rotateX(90deg); }
  to   { transform: rotateX(0deg); }
}

@keyframes hoffFlipShade {
  0%   { opacity: 0; }
  50%  { opacity: 0.22; }
  100% { opacity: 0; }
}

@keyframes hoffPop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}