/* Последний слой адаптации: масштабирование страницы остаётся доступным. */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

@media (pointer: coarse) {
  /* Текст уведомления не перехватывает касания игры. Его кнопки остаются доступными. */
  .snackbar, .snackbar-surface { pointer-events: none; }
  .snackbar button { pointer-events: auto; }
  /* Маленькая иконка исключения не означает маленькую область нажатия. */
  .players li button { min-width: 44px; width: 44px; min-height: 44px; flex-shrink: 0; }
  .round-order-actions button, .celebration-toggle { min-height: 44px; min-width: 44px; }
  .sound-settings input[type="range"] { min-height: 44px; touch-action: pan-y; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select {
    font-size: max(16px, 1em);
  }
}

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  body {
    --mobile-left: max(14px, env(safe-area-inset-left));
    --mobile-right: max(14px, env(safe-area-inset-right));
    --corner-width: calc((100vw - var(--mobile-left) - var(--mobile-right) - 12px) / 2);
    /* Два ряда постоянных кнопок плюс запас для объёмной тени. */
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
  }
  .connection-widget { left: var(--mobile-left); max-width: var(--corner-width); }
  .sound-widget { right: var(--mobile-right); max-width: var(--corner-width); }
  .connection-widget > summary, .sound-widget > summary {
    display: flex;
    gap: 6px;
    min-width: 0;
    min-height: 48px;
    padding: 10px;
    font-size: 12px;
  }
  #sound-button-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #sound-button-icon, .connection-dot { flex-shrink: 0; }
  .sound-settings, .connection-panel {
    width: min(320px, calc(100vw - var(--mobile-left) - var(--mobile-right)));
    max-height: calc(100vh - 98px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 98px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .celebration-toggle { right: var(--mobile-right); bottom: calc(78px + env(safe-area-inset-bottom)); }
  .guess-controls { bottom: calc(140px + env(safe-area-inset-bottom)); }
  .snackbar {
    --snackbar-bottom: calc(140px + env(safe-area-inset-bottom));
  }
  .card-pager { flex-wrap: wrap; }
  .card-pager button { min-width: 44px; }
  .room-header .actions, .round-order-actions { flex-wrap: wrap; }
  .round-editor, .guess-guide, .answers-confirmed, .choice-picture figcaption { overflow-wrap: anywhere; }
  .choice-picture details[open] img {
    inset: auto;
    top: calc(72px + env(safe-area-inset-top));
    left: var(--mobile-left);
    width: calc(100vw - var(--mobile-left) - var(--mobile-right));
    height: calc(100vh - 212px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height: calc(100dvh - 212px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .choice-picture details[open] summary {
    top: calc(12px + env(safe-area-inset-top));
    right: var(--mobile-right);
    min-height: 44px;
  }
}

@media (max-width: 520px) {
  /* Одна строка на человека сохраняет место имени и кнопке ведущего. */
  .players { grid-template-columns: minmax(0, 1fr); }
  .guess-author-slot { gap: 10px; padding: 10px 38px 10px 10px; }
}

@media (max-height: 500px) and (pointer: coarse) {
  /* В альбомной ориентации закреплённая форма занимала бы почти весь экран. */
  .guess-controls { position: static; }
}