/* ==========================================================================
   play.css — экран телефона. Mobile-first, одна колонка, удобно на 360 px.
   Здесь ТОЛЬКО var(--…) из theme.css: цифрами — лишь 0, 1px границ, проценты
   и безразмерные числа (z-index, flex).

   Дизайн: телефон гостя — как маленькая открытка-приглашение из конверта.
   Бумага, тонкие чёрные рамки, кусочки розового скотча, кружево по кромке,
   рукописные подписи. Кнопки — печатные ярлыки, а не веб-кнопки.
   ========================================================================== */

/* --- Каркас страницы ---------------------------------------------------- */

.stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--phone-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4);
  /* Место под фиксированную панель действий (до двух рядов кнопок) и вырез снизу. */
  padding-bottom: calc(var(--sp-6) + var(--btn-height) + var(--btn-height) + var(--safe-bottom));
}

/* Чёрная роза-гравюра выглядывает из-за нижнего края экрана — как на конверте. */
body::before {
  content: "";
  position: fixed;
  right: calc(var(--sp-8) * -1);
  bottom: calc(var(--sp-8) * -1.2);
  z-index: 0;
  width: calc(var(--sp-8) * 4);
  height: calc(var(--sp-8) * 5.2);
  background: var(--orn-rose) center / contain no-repeat;
  opacity: 0.16;
  transform: rotate(-18deg);
  pointer-events: none;
}

.screen {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}

.screen__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-normal);
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Рукописная подпись над заголовком: «приглашение», «для Оли» — в HTML. */
.kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-pink-deep);
  transform: rotate(var(--tilt-3));
  transform-origin: left bottom;
}

.kicker--small { font-size: var(--fs-xs); }

/* Росчерк-разделитель под заголовком. */
.flourish {
  height: var(--sp-5);
  margin: 0;
  background: var(--orn-flourish) center / contain no-repeat;
  opacity: 0.9;
}

/* --- Верхняя полоса ----------------------------------------------------- */

/* Лента с именем: бумажная полоска, снизу кружевная кромка. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: var(--phone-max);
  margin: 0 auto;
  min-height: var(--topbar-height);
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--sp-3);
  background: var(--orn-lace) left top / auto 100% repeat-x;
  opacity: 0.85;
  pointer-events: none;
}

/* Длинное имя не ломает полосу: ужимается многоточием. */
.topbar__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
}

/* Очки — как почтовая марка: рамка, внутри пунктирная линия перфорации. */
.topbar__score {
  flex: none;
  font-variant-numeric: lining-nums tabular-nums;
  min-width: var(--touch-min);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-border);
  outline: 1px dashed var(--c-border);
  outline-offset: -4px;
  background: var(--c-surface-2);
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-align: center;
  transform: rotate(var(--tilt-2));
}

/* --- Плашка «нет связи» ------------------------------------------------- */

/* z-index выше предпросмотра: иначе связь падает при открытом предпросмотре,
   плашку не видно, и человек тыкает в мёртвую кнопку «Отправить». */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-warn);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  text-align: center;
}

/* Пока связи нет — ничего не нажимается. Приглушаем, чтобы это было видно:
   иначе кнопки выглядят живыми, а тап не даёт вообще никакого отклика. */
.is-offline .stage,
.is-offline .actionbar {
  pointer-events: none;
  opacity: 0.45;
}

/* У предпросмотра гасим содержимое, а не его самого: полупрозрачный фон
   пропустил бы сквозь себя руку, и получилась бы каша из двух экранов. */
.is-offline .preview { pointer-events: none; }

.is-offline .preview__body,
.is-offline .preview__actions { opacity: 0.45; }

/* --- Кнопки: печатные ярлыки -------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-height);
  min-width: var(--touch-min);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border);
  /* вторая, внутренняя линия — как у типографской этикетки */
  outline: 1px solid var(--c-border);
  outline-offset: -4px;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-align: center;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn:active { background: var(--c-surface-2); }

.btn:focus-visible { box-shadow: var(--focus-ring); }

.btn:disabled {
  background: var(--c-bg-soft);
  border-color: var(--c-text-faint);
  outline-color: var(--c-text-faint);
  color: var(--c-text-faint);
  cursor: default;
}

.btn--block { width: 100%; }

/* Главная кнопка — чёрный ярлык, чуть наклеен криво, с розовым сдвигом. */
.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  outline-color: var(--c-accent-text);
  color: var(--c-accent-text);
  box-shadow: var(--sh-lg);
  transform: rotate(var(--tilt-1));
}

.btn--primary:active {
  background: var(--c-accent-hover);
  box-shadow: none;
  transform: rotate(var(--tilt-1)) translate(2px, 2px);
}

.btn--primary:disabled {
  background: var(--c-bg-soft);
  border-color: var(--c-text-faint);
  outline-color: var(--c-text-faint);
  color: var(--c-text-faint);
  box-shadow: none;
  transform: none;
}

/* Второстепенная — на прозрачной бумаге, пунктирная внутренняя линия. */
.btn--ghost {
  background: transparent;
  border-color: var(--c-border);
  outline-style: dashed;
  color: var(--c-text);
}

.btn--ghost:active { background: var(--c-surface-2); }

.btn--danger {
  background: transparent;
  border-color: var(--c-danger);
  outline-color: var(--c-danger);
  color: var(--c-danger);
}

.btn--danger:active { background: var(--c-surface-2); }

/* Кнопка-символ: всё равно не меньше пальца по обеим сторонам. */
.btn--icon {
  width: var(--touch-min);
  min-width: var(--touch-min);
  height: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0;
  font-size: var(--fs-md);
  letter-spacing: 0;
}

/* --- Поля ввода: строчка на бланке -------------------------------------- */

.input {
  display: block;
  width: 100%;
  min-height: var(--input-height);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: 0;
  background: var(--c-surface);
  color: var(--c-text);
  /* Не меньше 16 px, иначе iOS Safari зумит страницу при фокусе. */
  font-size: var(--fs-base);
  font-family: var(--font-ui);
  box-shadow: var(--sh-sm);
}

.input::placeholder {
  color: var(--c-text-faint);
  font-style: italic;
}

.input:focus-visible { box-shadow: var(--sh-sm), var(--focus-ring); }

/* Высоту под текст ставит play.js (autoGrow) — здесь только рамки допустимого. */
.input--area {
  min-height: calc(var(--input-height) + var(--sp-5));
  max-height: var(--input-area-max, 40vh);
  resize: vertical;
  overflow-wrap: anywhere;
  /* линованный бланк */
  background-image: repeating-linear-gradient(transparent, transparent calc(1.35em - 1px), var(--c-beige) calc(1.35em - 1px), var(--c-beige) 1.35em);
  background-attachment: local;
  line-height: 1.35;
}

.login,
.claim,
.composer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.composer__row {
  display: flex;
  gap: var(--sp-3);
}

.composer__row > .btn { flex: 1; }

/* Две кнопки в ряд на 360 px: ярлыки теснее, чтобы слово не рвалось
   посреди («СОХРАНИТ / Ь»). */
.composer__row > .btn,
.cardlist__row > .btn,
.actionbar__row > .btn,
.preview__actions > .btn {
  padding-inline: var(--sp-2);
  letter-spacing: 0.04em;
  overflow-wrap: normal;
}

/* --- Вкладки: две бумажные закладки ------------------------------------- */

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  padding: 0 0 var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  background: transparent;
}

.tab {
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-text-faint);
  background: transparent;
  color: var(--c-text-dim);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.tab--active {
  border-color: var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-text);
  box-shadow: var(--sh-sm);
  transform: rotate(var(--tilt-1));
}

.tab:nth-child(2).tab--active { transform: rotate(var(--tilt-2)); }

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* --- Карты -------------------------------------------------------------- */

/* Заход — чёрная карта, отпечатанная трафаретом: растр точек и розовый
   росчерк в углу. */
.card-prompt {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
  border: 1px solid var(--c-prompt-border);
  outline: 1px solid var(--c-prompt-text);
  outline-offset: -5px;
  background-color: var(--c-prompt-bg);
  background-image: var(--tex-halftone);
  background-size: var(--tex-halftone-size);
  color: var(--c-prompt-text);
  font-family: var(--font-card);
  font-size: var(--fs-lg);
  font-weight: var(--fw-normal);
  line-height: 1.2;
  overflow-wrap: anywhere;
  box-shadow: var(--sh-lg);
}

.card-prompt::after {
  content: "";
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-2);
  width: calc(var(--sp-8) + var(--sp-6));
  height: var(--sp-4);
  background-color: var(--c-pink-dusty);
  -webkit-mask: var(--orn-flourish) center / contain no-repeat;
  mask: var(--orn-flourish) center / contain no-repeat;
  pointer-events: none;
}

.card-prompt--big { font-size: var(--fs-xl); line-height: 1.15; }

/* Цифры в тексте карт ровные, а не «прыгающие» старостильные. */
.card-prompt,
.card-answer,
.cardlist__text,
.status { font-variant-numeric: lining-nums; }

/* Ответ — бумажная карточка с тонкой рамкой. */
.card-answer {
  position: relative;
  padding: var(--sp-4);
  border: 1px solid var(--c-answer-border);
  background: var(--c-answer-bg);
  color: var(--c-answer-text);
  font-family: var(--font-card);
  font-size: var(--fs-md);
  line-height: 1.25;
  overflow-wrap: anywhere;
  box-shadow: var(--sh-sm);
}

/* Отметка выбранного варианта не должна менять размер карточки: рамка и
   контур места не занимают, а значок внутри сдвигал бы весь список. */
.card-answer--picked {
  border-color: var(--c-picked-border);
  outline: 1px solid var(--c-picked-border);
  outline-offset: -5px;
  background: var(--c-surface-2);
  box-shadow: var(--sh-md);
}

.card-answer--picked::before {
  content: "";
  position: absolute;
  top: calc(var(--sp-2) * -1);
  right: var(--sp-3);
  width: var(--sp-4);
  height: var(--sp-4);
  background-color: var(--c-picked-border);
  -webkit-mask: var(--orn-heart) center / contain no-repeat;
  mask: var(--orn-heart) center / contain no-repeat;
}

/* Ответ, подставленный в вопрос, на светлой карте — тем же акцентом. */
.card-answer .filled { background: var(--c-filled-bg); }

/* --- Рука: веер карточек, каждая наклеена чуть криво --------------------- */

.hand,
.scoreboard,
.cardlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hand { padding: var(--sp-1) 0; }

.hand-card {
  display: block;
  width: 100%;
  min-height: var(--touch-min);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: rotate(var(--tilt-2));
}

.hand > :nth-child(2n) .hand-card,
.hand > :nth-child(2n).hand-card { transform: rotate(var(--tilt-1)); }

.hand > :nth-child(3n) .hand-card,
.hand > :nth-child(3n).hand-card { transform: rotate(var(--tilt-3)); }

.hand-card:active {
  background: var(--c-surface-2);
  transform: none;
}

/* --- Список своих карт: бумажки, приклеенные скотчем -------------------- */

.cardlist__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}

.cardlist__item::before {
  content: "";
  position: absolute;
  top: calc(var(--sp-3) * -1);
  left: var(--sp-5);
  width: var(--sp-8);
  height: var(--sp-4);
  background: var(--tape);
  border: 1px solid var(--c-pink-dusty);
  transform: rotate(-5deg);
  pointer-events: none;
}

.cardlist__item:nth-child(2n)::before {
  left: auto;
  right: var(--sp-6);
  transform: rotate(4deg);
}

.cardlist__text {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  overflow-wrap: anywhere;
}

.cardlist__actions {
  display: flex;
  gap: var(--sp-2);
}

.cardlist__panel {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cardlist__row {
  display: flex;
  gap: var(--sp-2);
}

.cardlist__row > .btn { flex: 1; }

/* --- Список игроков: список гостей в книге ------------------------------ */

.scoreboard { gap: 0; }

.scoreboard-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-1);
  border: 0;
  border-bottom: 1px dotted var(--c-border);
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--fs-md);
}

.scoreboard-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.scoreboard-row__value {
  flex: none;
  color: var(--c-text-dim);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
}

.scoreboard-row--host { background: var(--c-surface-2); padding-inline: var(--sp-2); }

.scoreboard-row--offline { color: var(--c-offline); }

.scoreboard-row--offline .scoreboard-row__value { color: var(--c-offline); }

/* --- Мелочи: штампы, подписи, заметки ----------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  transform: rotate(var(--tilt-1));
}

.badge--host {
  background: var(--c-surface-2);
  color: var(--c-text);
}

.badge--ok {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-text);
}

.hint {
  margin: 0;
  color: var(--c-text-dim);
  font-style: italic;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.counter {
  margin: 0;
  color: var(--c-text-faint);
  font-family: var(--font-type);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.empty {
  margin: 0;
  color: var(--c-text-faint);
  font-style: italic;
  font-size: var(--fs-sm);
}

.status {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.status--ok { color: var(--c-ok); }

.host-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-normal);
  line-height: 1;
}

.round-line {
  margin: 0;
  color: var(--c-pink-deep);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.1;
}

.host-step,
.handbox,
.submitted {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* --- Панель главного действия (зона большого пальца) -------------------- */

.actionbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: var(--phone-max);
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-3) + var(--safe-bottom));
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
}

/* Кружево по верхней кромке панели. */
.actionbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--sp-3);
  background: var(--orn-lace) left bottom / auto 100% repeat-x;
  transform: scaleY(-1);
  opacity: 0.85;
  pointer-events: none;
}

/* Пока человек печатает карту, экранная клавиатура забирает пол-экрана и эта
   полоса садится ровно на кнопку «Добавить». На время ввода она перестаёт быть
   прилипшей и уходит в конец страницы: «Добавить» свободна, а «Я готов»
   никуда не делась — она просто ниже по прокрутке. */
.is-typing #screenPrep .actionbar {
  position: static;
  transform: none;
  margin-top: var(--sp-4);
}

.actionbar__row {
  display: flex;
  gap: var(--sp-3);
}

.actionbar__row > .btn { flex: 1; }

/* --- Предпросмотр ответа: открытка крупным планом ----------------------- */

.preview {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  padding-bottom: calc(var(--sp-4) + var(--safe-bottom));
  background: var(--c-bg);
  background-image: var(--tex-folds);
}

.preview::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-5) * -1);
  top: calc(var(--sp-5) * -1);
  width: calc(var(--sp-8) * 2.4);
  height: calc(var(--sp-8) * 2.4);
  background: var(--orn-corner) center / contain no-repeat;
  transform: scaleX(-1) scaleY(-1);
  opacity: 0.55;
  pointer-events: none;
}

/* Текст листается, кнопки всегда на месте — «Отправить» видно без прокрутки. */
.preview__body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--sp-6);
}

.preview__actions {
  flex: none;
  display: flex;
  gap: var(--sp-3);
}

.preview__actions > .btn { flex: 1; }

/* --- Тосты: записки, приклеенные скотчем -------------------------------- */

.toasts {
  position: fixed;
  left: 0;
  right: 0;
  /* Выше панели главного действия (до двух рядов кнопок), чтобы её не перекрывать. */
  bottom: calc(var(--safe-bottom) + var(--btn-height) + var(--btn-height) + var(--sp-7));
  /* Выше предпросмотра: ошибка «Отправить» не должна пропадать под ним. */
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  pointer-events: none;
}

.toast {
  position: relative;
  max-width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--sh-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  overflow-wrap: anywhere;
  transform: rotate(var(--tilt-2));
}

.toast::before {
  content: "";
  position: absolute;
  top: calc(var(--sp-2) * -1);
  left: 50%;
  width: var(--sp-7);
  height: var(--sp-3);
  background: var(--tape);
  border: 1px solid var(--c-pink-dusty);
  transform: translateX(-50%) rotate(-3deg);
}

.toast--error {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--c-accent-text);
}

/* ------------------------------------------------------------------
   Панель «Прочитал». Экран переключается, когда прочли все живые
   игроки, а не по таймеру. Держим внизу и всегда на виду: гость
   читает карту и сразу тянется большим пальцем сюда.
   ------------------------------------------------------------------ */
.readbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  padding: var(--sp-3, 12px);
  margin-top: var(--sp-3, 12px);
  background: var(--c-bg-soft);
  border-top: 1px solid var(--c-border);
}

.readbar__count {
  margin: 0;
  text-align: center;
  font-size: var(--fs-sm, 0.9rem);
  color: var(--c-text-dim);
}