body.player { overflow: hidden; }
.muted { color: var(--muted); margin: 0; }

.login-card input.pin {
  font: 600 32px/1 ui-monospace, monospace; letter-spacing: .25em; text-align: center; padding: 14px 8px;
}

/* --- Игра --- */
.game { position: fixed; inset: 0; background: #000; }

.feed { position: absolute; background: #000; overflow: hidden; display: grid; place-items: center; }
.feed video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.feed .nosignal { color: var(--muted); font-size: 14px; text-align: center; padding: 8px; }
.feed.live .nosignal { display: none; }

/* Фон: очки ведущего на весь экран */
.feed.host { inset: 0; }

/* Окошки поверх */
.pip {
  --pip-w: clamp(110px, 20vw, 300px);
  top: max(12px, env(safe-area-inset-top)); width: var(--pip-w);
  border: 2px solid rgba(255, 255, 255, .22); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); z-index: 2;
}
.pip::after {
  content: attr(data-label); position: absolute; left: 6px; bottom: 6px; z-index: 1;
  font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff;
}
.pip-avatar { left: 12px; aspect-ratio: 9 / 16; }
.pip-top { right: 12px; aspect-ratio: 4 / 3; }
/* Пропорции окошка подстраиваются под реальное видео */
.pip.portrait { aspect-ratio: 9 / 16; }
.pip.landscape { aspect-ratio: 16 / 9; }

/* Стол: 5 заготовок под карточки */
.table {
  position: absolute; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 2;
  background: rgba(21, 25, 32, .82); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
}
.table-title { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.cards { display: flex; gap: 8px; }
.card {
  width: clamp(36px, 6vw, 64px); aspect-ratio: 1;
  border: 2px dashed #3a4352; border-radius: 8px; background: rgba(255, 255, 255, .03);
}

.hud {
  position: absolute; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 3;
  display: flex; gap: 8px; align-items: center;
}
.chip {
  font-size: 13px; padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .6); color: #fff; white-space: nowrap;
}
.chip.warn { background: #854d0e; color: #fde68a; }
.btn.round { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); }

/* Узкий экран (телефон): окошки и стол компактнее, чипы прячем */
@media (max-width: 600px) {
  .pip { --pip-w: 28vw; }
  .card { width: 9vw; }
  #room-chip { display: none; }
}