/**
 * «Выпей или сделай»: стол.
 *
 * МОБИЛЬНЫЙ ЭКРАН ОДИН В ОДИН С ПРИЛОЖЕНИЕМ (владелец 04.09.2026), и «один в
 * один» это в первую очередь ГЕОМЕТРИЯ, а не похожие блоки. Все числа здесь
 * взяты из `lib/games/drinkdare/drinkdare_game.dart`:
 *
 *   отступ шапки            12 (space3)
 *   между шапкой и головами 12 (space3)
 *   карточка                доля 4, отступ по бокам 16 (space4)
 *   пустое место под ней    доля 5, сквозь него видны счётчики
 *   полоса кнопок           16 сверху ... 12 ... 16 ... 16, зазор 8 (space2)
 *
 * ДОЛИ 4 И 5 ЭТО НЕ УКРАШЕНИЕ. Они решают, где на экране окажется карточка: не
 * посередине, а выше середины, ровно над стеной счётчиков, чей якорь стоит на
 * 0.645 высоты. Сдвинешь доли, и карточка сядет на числа.
 *
 * ПАРТИЯ ЗАБИРАЕТ ЭКРАН ЦЕЛИКОМ, как у колеса, напёрстков и шашек: полосу и
 * пилюлю снимает nav.js по спискам СТРАНИЦЫ и БЕЗ_ВЕРХА, а высоту забирает
 * `inset: 0`. Иначе стене некуда встать: она рисуется от края до края.
 *
 * ЦВЕТА И РАДИУСЫ ТОКЕНАМИ. Своих чисел тут ровно столько, сколько пришло из
 * приложения геометрией; всё остальное живёт в tokens.css.
 */

.dd {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  background: var(--c-bg);
}

/* Стена лежит под всем и занимает экран целиком: счётчики это фон. */
.dd__stena {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dd > :not(.dd__stena) { position: relative; z-index: 1; }

/* ---------- шапка ---------- */

.dd__verkh {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px;
}

/* Строку уровня кричит ЭКРАН, а не таблица: заглавные ставит код, потому что
   турецкое «i» теряет точку, если это сделать в CSS. */
.dd__stupenj {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--c-dim);
}

/* ---------- головы ---------- */

/* По голове на сторону, каждая над своими счётчиками: тогда на стене не нужно
   писать имена. */
.dd__golovyi {
  display: flex;
  margin-top: 12px;
}

.dd__golova {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: opacity .2s ease;
}

/* Спящая сторона приглушена до 0.32, как в приложении. */
.dd__golova--spit { opacity: .32; }

.dd__litso {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
}

.dd__imya {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Бейдж, а не подпись: чей ход это единственное, что на этом экране ищут с
   другого края дивана. */
.dd__beydzh {
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* ---------- карточка ---------- */

.dd__karta {
  flex: 4 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  min-height: 0;
}

.dd__tekst {
  margin: 0;
  text-align: center;
  font-size: 21px;
  line-height: 1.3;
  color: var(--c-text);
  text-wrap: balance;
}

/* Ниже карточки нет ничего, кроме просвечивающих счётчиков. Доля 5 из
   приложения: без неё карточка съезжает на числа. */
.dd__pusto { flex: 5 1 0; min-height: 0; }

/* ---------- кнопки ---------- */

.dd__niz {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
}

.dd__knopka { flex: 1 1 0; }

/*
 * Вторая кнопка: контур и приподнятая поверхность, а не пустое место.
 *
 * ЗДЕСЬ БЫЛА ДВОЙНАЯ ОШИБКА, и обе видел владелец, а не я. Первая: рамка
 * задавалась через `var(--c-line)`, а такого токена нет вовсе, и объявление
 * молча становилось «none», то есть кнопка теряла даже ту рамку, которую ей
 * давал общий `.btn`. Вторая: общая рамка `--c-border-strong` это 18% серого на
 * тёмном, и на телефоне в светлой комнате её попросту не видно.
 *
 * Поэтому у «пью» теперь своя поверхность и своя кромка. Разница с золотой
 * остаётся и она не декоративная: выпить это законный ответ, но не тот, к
 * которому зовут. Однако «не зовут» не значит «спрячем»: пара обязана видеть
 * оба ответа с первого взгляда.
 *
 * ЗНАЧКА НА НЕЙ НЕТ. В приложении рядом с подписью стоит бокал
 * (Icons.local_bar_outlined); сюда он не перенесён и не переносится.
 */
.dd__knopka--prizrak {
  background: var(--c-surface-high);
  border: 1px solid color-mix(in srgb, var(--c-muted) 55%, transparent);
  color: var(--c-text);
}

.dd__knopka--prizrak:hover {
  border-color: color-mix(in srgb, var(--c-muted) 80%, transparent);
}

/* ==========================================================================
   ДЕСКТОП
   ========================================================================== */

/*
 * ДЕСКТОП ЭТО НЕ «ШИРЕ», а то же самое в разумной колонке. Стена от края до
 * края на мониторе развела бы счётчики на полтора метра друг от друга, и пара,
 * сидящая перед ноутбуком, читала бы их поворотом головы.
 *
 * Поэтому на широком экране всё содержимое встаёт в колонку по центру, а стена
 * рисуется в её же ширине: холст сужается вместе с колонкой, и его собственная
 * геометрия (половины, якорь 0.645) продолжает работать как на телефоне.
 */
@media (min-width: 860px) {
  /* Содержимое встаёт колонкой по центру. Стену сужать стилями НЕ НАДО: она
     сама рисует доску в полосе шириной 560, где бы ни лежал холст. */
  .dd { padding-inline: max(0px, calc((100vw - 560px) / 2)); }

  .dd__tekst { font-size: 24px; }

  /* Кнопки не растягиваются в полосу через весь монитор: до них надо доставать
     рукой, а не мышью через полэкрана. */
  .dd__niz { padding-bottom: 24px; }
}