:root{
  --bg:#0f1115; --fg:#eef1f4; --muted:#a7abb1;
  --card:#171a21; --ring:#2a2f3a;
  --primary:#3b82f6; --primary-ink:#fff;
  --danger:#ef4444; --danger-ink:#fff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--fg);
  font:18px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
.wrap{max-width:960px;margin:0 auto;padding:20px}

.hero{padding:28px 0 16px}
.hero h1{margin:0 0 8px;font-size:32px}
.sub{margin:0;color:var(--muted)}

.head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.head.slim{padding:6px 0}
.grow{flex:1}
.tiny{font-size:12px}
.muted{color:var(--muted)}

.center{display:flex; justify-content:center; padding:30px 0}

.big{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:14px 12px; border:0; border-radius:14px; background:#232835; color:var(--fg);
  outline:1px solid var(--ring); cursor:pointer; min-height:92px; font-weight:600; text-align:center
}
.big.primary{background:var(--primary); color:var(--primary-ink)}
.big.danger{background:var(--danger); color:var(--danger-ink)}
.emoji{font-size:28px}
.label{font-size:16px}

.btn{
  border:0; padding:10px 14px; border-radius:10px; background:#232835; color:var(--fg);
  cursor:pointer; outline:1px solid var(--ring);
}
.ghost{
  background:transparent; color:var(--fg); border:0; cursor:pointer; padding:8px 10px;
  border-radius:10px; outline:1px solid var(--ring)
}

.stage{
  position:relative; background:#000; border-radius:16px; overflow:hidden; outline:1px solid var(--ring);
}
#remoteVideo{
  display:block; width:100%; height:56vh; min-height:300px; background:#000; object-fit:cover;
}
#localVideo{
  position:absolute; right:12px; bottom:12px; width:160px; height:120px; object-fit:cover;
  border-radius:12px; outline:2px solid var(--ring)
}
@media (max-width:520px){
  #localVideo{width:124px;height:92px}
}

.overlay{
  display:flex; align-items:center; justify-content:center;
  position:absolute; inset:0; background:rgba(15,17,21,.6); backdrop-filter:saturate(120%) blur(2px);
}
.overlay__box{
  background:var(--card); border:1px solid var(--ring); border-radius:14px; padding:16px; text-align:center; max-width:420px
}
.overlay__emoji{font-size:36px; margin-bottom:6px}
.overlay__title{font-size:18px; font-weight:700; margin-bottom:6px}
.overlay__hint{color:var(--muted); margin-bottom:10px}

.status{margin:12px 0 0; padding:10px 12px; border-radius:12px; background:var(--card);
  outline:1px solid var(--ring)}

.controls{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin:10px 0}

/* ====== Full-bleed сцена ====== */
body.is-room{margin:0}
.stage--full{
  position:relative; width:100%; height:100svh; /* мобильный безопасный вьюпорт */
  background:#000; overflow:hidden; outline:1px solid var(--ring);
}
.stage--full #remoteVideo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000;
}
.stage--full #localVideo{
  position:absolute; right:12px; bottom:12px; width:128px; height:96px;
  object-fit:cover; border-radius:10px; outline:2px solid rgba(255,255,255,.2); z-index:3;
}
@media (min-width:720px){
  .stage--full #localVideo{ width:160px; height:120px }
}

/* ====== HUD поверх видео (auto-hide) ====== */
.hud{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; gap:10px; padding:8px; border-radius:16px; z-index:4;
  background:rgba(20,22,28,.45); backdrop-filter:saturate(120%) blur(8px);
  outline:1px solid rgba(255,255,255,.12);
  transition:opacity .18s ease, transform .18s ease;
}
.hud.hidden{ opacity:0; pointer-events:none; transform:translate(-50%, 8px); }
.hud__btn{
  appearance:none; border:0; cursor:pointer;
  width:44px; height:44px; border-radius:12px;
  font-size:20px; line-height:1; color:#fff; background:rgba(255,255,255,.08);
  outline:1px solid rgba(255,255,255,.18);
}
.hud__btn--danger{ background:rgba(239,68,68,.9); outline:1px solid rgba(0,0,0,.2) }

/* ====== Оверлеи ====== */
.overlay{ position:absolute; inset:0; display:none; z-index:5; }
.overlay--center{ display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
  backdrop-filter:saturate(120%) blur(2px);
}
.overlay.hidden{ display:none !important; }
.overlay__box{
  background:rgba(23,26,33,.92); border:1px solid var(--ring);
  border-radius:14px; padding:16px; text-align:center; max-width:420px; color:#fff;
}
.overlay__emoji{font-size:36px; margin-bottom:6px}
.overlay__title{font-size:18px; font-weight:700; margin-bottom:6px}
.overlay__hint{color:var(--muted)}

/* ====== Плавающий статус ====== */
.status--float{
  position:absolute; left:50%; top:12px; transform:translateX(-50%);
  z-index:4; padding:6px 10px; border-radius:12px;
  background:rgba(23,26,33,.7); backdrop-filter: blur(6px);
  outline:1px solid rgba(255,255,255,.12);
  font-size:14px;
}

/* ====== Anti-scroll & viewport ====== */
html, body { height:100%; }
body.is-room{ margin:0; overflow:hidden; overscroll-behavior:none; touch-action:manipulation; }

/* CSS-переменная для точной высоты экрана под адресную строку */
:root{ --app-vh: 1vh; }

/* ====== Full-bleed сцена ====== */
.stage--full{
  position:relative; width:100%;
  height:calc(var(--app-vh, 1vh) ); /* динамическая высота */
  background:#000; overflow:hidden;
}
.stage--full #remoteVideo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000;
}
.stage--full #localVideo{
  position:absolute; right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom));
  width:128px; height:96px; object-fit:cover; border-radius:10px;
  outline:2px solid rgba(255,255,255,.2); z-index:3;
}
@media (min-width:720px){ .stage--full #localVideo{ width:160px; height:120px } }

/* ====== Topbar overlay ====== */
.topbar{
  position:absolute; left:0; right:0; top:0; z-index:6;
  display:flex; align-items:center; gap:10px; padding: max(10px, env(safe-area-inset-top)) 12px 8px;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.0));
}
.ghost--top{ background:rgba(255,255,255,.08); outline:1px solid rgba(255,255,255,.18); color:#fff }

/* ====== HUD поверх видео (auto-hide) ====== */
.hud{
  position:absolute; left:50%; bottom:max(12px, env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:flex; gap:10px; padding:8px; border-radius:16px; z-index:5;
  background:rgba(20,22,28,.45); backdrop-filter:saturate(120%) blur(8px);
  outline:1px solid rgba(255,255,255,.12);
  transition:opacity .18s ease, transform .18s ease;
}
.hud.hidden{ opacity:0; pointer-events:none; transform:translate(-50%, 8px); }
.hud__btn{
  appearance:none; border:0; cursor:pointer;
  width:44px; height:44px; border-radius:12px;
  font-size:20px; line-height:1; color:#fff; background:rgba(255,255,255,.08);
  outline:1px solid rgba(255,255,255,.18);
}
.hud__btn--danger{ background:rgba(239,68,68,.9); outline:1px solid rgba(0,0,0,.2) }

/* ====== Оверлеи ====== */
.overlay{ position:absolute; inset:0; display:none; z-index:4; }
.overlay--center{ display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
  backdrop-filter:saturate(120%) blur(2px);
}
.overlay.hidden{ display:none !important; }
.overlay__box{
  background:rgba(23,26,33,.92); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:16px; text-align:center; max-width:420px; color:#fff;
}
.overlay__emoji{font-size:36px; margin-bottom:6px}
.overlay__title{font-size:18px; font-weight:700; margin-bottom:6px}
.overlay__hint{color:#a7abb1}

/* ====== Плавающий статус ====== */
.status--float{
  position:absolute; left:50%; top:max(10px, env(safe-area-inset-top)); transform:translateX(-50%);
  z-index:6; padding:6px 10px; border-radius:12px;
  background:rgba(23,26,33,.7); backdrop-filter: blur(6px);
  outline:1px solid rgba(255,255,255,.12); font-size:14px; color:#fff;
}

/* ===== Landing (главная заставка) ===== */
:root{ --landing-bg: none; --scrim: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
body.landing{
  margin:0; min-height:100dvh; height:100dvh; overflow:hidden;
  background: var(--scrim), var(--landing-bg) center center / cover no-repeat fixed;
  /* на iOS избегаем fixed из-за перерисовок: */
  background-attachment: scroll, scroll;
  color:#fff; font:18px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
.landing__scrim{
  position:fixed; inset:0;
  background: var(--scrim);
  pointer-events:none;
}
.landing__top{
  position:fixed; left:0; right:0; top:0; z-index:2;
  padding: max(16px, env(safe-area-inset-top)) 18px 10px;
  text-align:center;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.landing__title{
  margin:0; font-size:clamp(24px, 3.6vw, 40px); font-weight:800; letter-spacing:.2px; text-shadow:0 2px 16px rgba(0,0,0,.35);
}
.landing__bottom{
  position:fixed; left:0; right:0; bottom:0; z-index:2;
  display:flex; justify-content:center; padding: 18px max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.cta{
  -webkit-tap-highlight-color: transparent;
  appearance:none; border:0; cursor:pointer;
  padding:16px 28px; border-radius:14px;
  font-weight:800; font-size:18px; letter-spacing:.3px;
  color:#fff; background:#3b82f6; /* тот же primary, что в теме */
  outline:2px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 28px rgba(59,130,246,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .08s ease, filter .15s ease;
}
.cta:active{ transform:translateY(1px); filter: brightness(.95); }
@media (hover:hover){
  .cta:hover{ filter: brightness(1.05); }
}

/* фикс, чтобы основная сетка комнат не конфликтовала по отступам */
body.landing .wrap, body.landing main, body.landing section{ all: unset; }