/* ============================================================
   КОНСТРУКТОР СТОЛА UNO
   Меняй ТОЛЬКО цифры в блоке :root ниже. Каждая переменная
   подписана. После правок скажи Клоду «залей uno-layout» —
   файл уедет на сервер; обнови страницу и увидишь результат.

   Система координат: экран телефона (макет 360px шириной).
   Верх экрана = 0. Больше top — ниже. Больше left — правее.
   Отрицательный left — объект уходит за левый край.
   В Telegram-fullscreen отступ под статус-бар добавляется
   автоматически — на него закладываться не нужно.
   ============================================================ */

:root {
  /* ---------- ДЕКА (рубашка UNO слева) ---------- */
  --t-deck-top: 336px;         /* от верха экрана до верха деки */
  --t-deck-left: -18px;        /* минус — уходит за левый край */
  --t-deck-width: 88px;        /* ширина рубашки */
  --t-deck-height: 138px;      /* высота рубашки */
  --t-deck-rotate: -16deg;     /* наклон (минус — против часовой) */

  /* ---------- СБРОС (карта в центре) ---------- */
  --t-discard-top: 300px;      /* от верха экрана до верха сброса */
  --t-discard-x: 0px;          /* сдвиг от центра: минус — левее, плюс — правее */
  --t-discard-width: 96px;     /* ширина карты сброса */
  --t-discard-height: 154px;   /* высота карты сброса */

  /* ---------- БЕЙДЖ цвета/таймера (справа) ---------- */
  --t-badge-top: 262px;        /* от верха экрана */
  --t-badge-right: 16px;       /* отступ от правого края макета */

  /* ---------- СТРЕЛКИ-декор ---------- */
  --t-arrow-top-top: 224px;    /* верхняя стрелка: от верха экрана */
  --t-arrow-top-right: 20px;   /* верхняя стрелка: от правого края */
  --t-arrow-bottom-top: 430px; /* нижняя стрелка: от верха экрана */
  --t-arrow-bottom-left: 20px; /* нижняя стрелка: от левого края */

  /* ---------- РУКА ИГРОКА (веер снизу) ---------- */
  --t-hand-bottom: 70px;       /* от низа экрана до низа веера */
  --t-hand-width: 328px;       /* ширина зоны веера */
  --t-card-width: 88px;        /* ширина карты в руке */
  --t-card-height: 137px;      /* высота карты в руке */

  /* ---------- КАПСУЛА ВЫБОРА ЦВЕТА (при Wild) ---------- */
  --t-picker-bottom: 228px;    /* от низа экрана */

  /* ---------- КНОПКИ «Пас» / «Взять карту» ---------- */
  --t-buttons-bottom: 0px;     /* от низа экрана */
  --t-buttons-height: 44px;    /* высота кнопок */

  /* Служебное: автоотступ под статус-бар в Telegram-fullscreen */
  --t-top-inset: calc(max(var(--tg-safe-top, 0px), env(safe-area-inset-top, 0px)) + var(--tg-content-safe-top, 0px));
  --t-bottom-inset: max(var(--tg-safe-bottom, 0px), env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   Ниже — механика, применяющая цифры. Сюда лезть не надо.
   ============================================================ */

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-deck.uno-deck {
  position: fixed !important;
  top: calc(var(--t-top-inset) + var(--t-deck-top)) !important;
  left: calc(50% - 180px + var(--t-deck-left)) !important;
  width: var(--t-deck-width) !important;
  height: var(--t-deck-height) !important;
  margin: 0 !important;
  transform: rotate(var(--t-deck-rotate)) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno #uno-discard.uno-card {
  position: fixed !important;
  top: calc(var(--t-top-inset) + var(--t-discard-top)) !important;
  left: calc(50% - (var(--t-discard-width) / 2) + var(--t-discard-x)) !important;
  width: var(--t-discard-width) !important;
  height: var(--t-discard-height) !important;
  margin: 0 !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno #uno-discard > .uno-discard-card-layer {
  width: var(--t-discard-width) !important;
  height: var(--t-discard-height) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-current.uno-current {
  position: fixed !important;
  top: calc(var(--t-top-inset) + var(--t-badge-top)) !important;
  right: calc(50% - 180px + var(--t-badge-right)) !important;
  margin: 0 !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-center::before {
  position: fixed !important;
  top: calc(var(--t-top-inset) + var(--t-arrow-top-top)) !important;
  right: calc(50% - 180px + var(--t-arrow-top-right)) !important;
  transform: rotate(180deg) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-center::after {
  position: fixed !important;
  top: calc(var(--t-top-inset) + var(--t-arrow-bottom-top)) !important;
  bottom: auto !important;
  left: calc(50% - 180px + var(--t-arrow-bottom-left)) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-hand.uno-hand {
  bottom: calc(var(--t-bottom-inset) + var(--t-hand-bottom)) !important;
  width: var(--t-hand-width) !important;
  margin-left: calc(var(--t-hand-width) / -2) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-hand .uno-card {
  width: var(--t-card-width) !important;
  height: var(--t-card-height) !important;
  min-width: var(--t-card-width) !important;
  flex: 0 0 var(--t-card-width) !important;
}

html body[data-view="uno"][data-uno-state="playing"] #view-uno .uno-color-choice.uno-color-choice {
  bottom: calc(var(--t-bottom-inset) + var(--t-picker-bottom)) !important;
}

html body[data-view="uno"]:is([data-uno-state="playing"], [data-uno-state="settled"]) #view-uno .uno-actions.uno-actions {
  bottom: calc(var(--t-bottom-inset) + var(--t-buttons-bottom)) !important;
  height: var(--t-buttons-height) !important;
}