:root{
  /* Базовый размер макета из Figma */
  --base-w: 393;      /* px */
  --base-h: 852.6;    /* px */

  /* Смещение всей сцены вверх (визуально ~120px) */
  --offset-y: 60px;

  /* Цвета */
  --bg:#38281E;
  --paper:#FFEECF;
  --ink:#3B2A1F;
  --white:#fff;
  --shadow:0 12px 40px rgba(0,0,0,.35);
}

/* ===== адаптивное «умещение в экран» (масштаб всей сцены) ===== */
@supports (width: 1svw) {
  :root { --vw: 100svw; --vh: 100svh; }
}
@supports not (width: 1svw) {
  :root { --vw: 100vw; --vh: 100vh; }
}
:root{
  --scale-x: calc(var(--vw) / (var(--base-w) * 1px));
  --scale-y: calc(var(--vh) / (var(--base-h) * 1px));
  --scale: min(var(--scale-x), var(--scale-y));
}

/* ===== базовые ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--white);
  background:#000;
  font:16px/1.35 system-ui, -apple-system, "SF Pro Text", Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  overflow:hidden;               /* макет всегда влезет */
  touch-action:manipulation;
}

/* Фоновое изображение */
.bg-image{
  position:fixed; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:-2; pointer-events:none; user-select:none;
}

/* ===== СЦЕНА МАКЕТА ===== */
.wrap{
  position:fixed;
  top:50%; left:50%;
  width:calc(var(--base-w) * 1px);
  height:calc(var(--base-h) * 1px);
  transform:translate(-50%, calc(-50% - var(--offset-y))) scale(var(--scale));
  transform-origin:center;
}

/* ===== элементы интерфейса ===== */

/* ЛОГО (аватар кружок 64×64) */
.logo{
  position:absolute;
  left:calc(50% - 64.04px/2);
  top:146.65px;
  width:64.04px; height:64.04px;
  border-radius:999px;
  border:2.91px solid #fff;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.logo img{ width:100%; height:100%; object-fit:cover }

/* БОЛЬШАЯ КАРТОЧКА «НАЧАТЬ ТЕСТ» (326.27×162.03) */
.card-cta{
  position:absolute;
  left:calc(50% - 326.27px/2 + 0.16px);
  top:calc(50% - 162.03px/2 - 11.3px);
  width:326.27px; height:162.03px;
  border:none; border-radius:16.375px;
  background:var(--paper); color:var(--ink);
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  text-transform:uppercase; letter-spacing:-0.08em;
  cursor:pointer;
}
.card-cta span{
  font-weight:800;
  font-size:63.856px;
  line-height:.95;
  text-align:center;
  display:block;
}

/* КНОПКА-ПЛАШКА (общий стиль 238.57×54.84) */
.pill-btn{
  position:absolute;
  left:calc(50% - 238.57px/2 + 0.36px);
  width:238.57px; height:54.84px;
  background:var(--paper); color:var(--ink);
  border:none; border-radius:14.01px;
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

/* Бейдж (кружок 46.95×46.95, наполовину «снаружи» сверху) */
.pill-btn .badge{
  position:absolute; top:0; left:50%;
  transform:translate(-50%, -50%);
  width:46.95px; height:46.95px;
  border-radius:50%;
  background:#3B2A1F;
  border:1.2px solid var(--paper);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.pill-btn .badge img{
  width:28px; height:28px; object-fit:contain;
}

/* Текст кнопок — В ЦЕНТРЕ по вертикали */
.pill-btn .label{
  font-weight:800;
  font-size:21.654px;
  line-height:1;                 /* ровная высота строки, без смещения */
  letter-spacing:-0.08em;
  text-align:center;
  transform: translateY(10px);   /* тонкая корректировка вверх */
}

/* Конкретные координаты кнопок (как в макете) */
#btnMy{     /* «Моя дата смерти» */
  top:calc(50% - 54.84px/2 + 183.84px);
}
#btnInvite{ /* «Пригласить друзей» */
  top:calc(50% - 54.84px/2 + 267.90px);
}

/* ЮЗЕРНЕЙМ-«ПИЛЮЛЯ» (рамка 137.91×30.2) */
.username-pill{
  position:absolute;
  left:calc(50% - 137.91px/2 + 0.18px);
  top:741.61px;
  width:137.91px; height:30.2px;
  border:1.092px solid rgba(255,255,255,1);
  border-radius:16.193px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:500;
  letter-spacing:-0.02em;
}


/* Toast */
.toast{
  position:fixed;
  left:50%; bottom:18px;
  transform:translateX(-50%) translateY(120%);
  background:#000; color:#fff;
  padding:10px 14px; border-radius:12px;
  box-shadow:var(--shadow);
  opacity:0; transition:transform .28s ease, opacity .28s ease;
  max-width:90vw; text-align:center; z-index:5;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }