/* Вопрос игроку — своё окно вместо системного confirm.
   Системные окна во встроенных браузерах не показываются, и действие молча
   пропадало; это окно рисуется прямо на странице и держит стиль игры.

   Окно накрывает страницу целиком и стоит по центру видимого места. Раньше это
   был обычный блок в самом верху страницы: нажимаешь «продать» внизу магазина —
   и подтверждать надо где-то выше, за краем экрана. Теперь вопрос всегда там,
   где глаз. Окончательный вид задаёт слой dtf-theme.css, здесь — основа. */

.ask {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(16, 24, 40, .45);
}

.ask-box {
  width: min(420px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 16px;
  text-align: center;
  background: var(--wood);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .22);
}

.ask-text {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.ask-note {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}

.ask-buttons {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Пока вопрос открыт, страница под ним не ездит: иначе палец промахивается
   мимо кнопки и прокручивает то, что и так подождёт. */
html.has-ask,
html.has-ask body { overflow: hidden; }

/* Появление объясняет одно: вопрос встал поверх страницы и ждёт ответа.
   Коротко и сухо, без парения (см. .claude/skills/arena-motion). */
@media (prefers-reduced-motion: no-preference) {
  .ask { animation: ask-veil 120ms ease-out; }
  .ask-box { animation: ask-rise 140ms ease-out; }
}

@keyframes ask-veil {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ask-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .ask { padding: 12px; align-items: flex-end; }
  .ask-box { width: 100%; }
  .ask-text { font-size: 15px; }
  .ask-buttons .btn { flex: 1 1 100%; }
}