/* ==========================================================================
   СТОЛ «РАДУГИ» — соперники по верху, колода и куча в середине, веер своих
   карт внизу. Своё сукно (тёмно-зелёное, как на макете), чтобы его никогда
   не спутали с покерным; всё остальное — та же комната.

   Главное в этом файле — две вещи, которые видны боковым зрением:
   поднятые карты (их можно положить) и приглушённая ровная рука (сейчас не
   ваш ход). Цвет нигде не остаётся единственным признаком: у каждого цвета
   есть своя фигура, и она стоит рядом везде, где назван цвет.

   ==== ФАЗА 6 РЕДИЗАЙНА: UNOQ НА КИТЕ ====

   Экран переехал на токены последним — и поэтому здесь видно всё сразу: он
   был единственным, где ещё жили градиентное сукно, золото, свечение и
   кислотный #2EE08C.

   ЧТО СОХРАНЕНО НАМЕРЕННО. Четыре цвета карт (--cl-R/Y/G/B) и их фигуры —
   это СОДЕРЖАНИЕ игры, а не оформление: по ним принимают решение, и без
   фигур игра недоступна дальтоникам (docs/redesign.md §4.1). Их не трогаем
   даже ради палитры.

   ЧТО ИЗ ЭТОГО СЛЕДУЕТ. Цвет карты — не цвет интерфейса, и порогов кита он
   не держит: синий #2D6FD8 как ТЕКСТ даёт 3.42 на поверхности, то есть
   мелким им писать нельзя. Поэтому слово цвета пишется светлым, а цвет
   уходит на ФИГУРУ рядом с ним — ей, как неТексту, хватает 3:1. Так цвет
   остаётся виден, а слово остаётся читаемым.
   ========================================================================== */

:root {
  /*
   * Сукно UNOQ — плоское и то же, что на значке игры в хабе: одна игра —
   * один цвет. Было три зелёных в радиальном градиенте, из-за которых
   * UNOQ путали с покером.
   */
  --cl-1: var(--felt-colors);
  --cl-2: var(--felt-colors);
  --cl-3: var(--felt-colors);
  /* Игровой арт — четыре цвета карт. Не токены интерфейса и не палитра. */
  --cl-R: #E04A3F;
  --cl-Y: #F2B22E;
  --cl-G: #2FA355;
  --cl-B: #2D6FD8;
  /* Ширина карты в руке. Под неё считается и перекрытие веера. */
  --cw: clamp(54px, 17vw, 74px);
}

.cl-felt {
  position: relative;
  flex: 1;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  background: var(--cl-1);
  border-radius: 0 0 var(--k-r-lg) var(--k-r-lg);
  overflow: hidden;
}

/* ---------------------------------------------------------------- места */

.cl-seats {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 8px 0;
  flex-wrap: wrap;
  z-index: 3;
}

.cl-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 0 1 76px;
  transition: opacity 0.25s;
}
.cl-seat.away { opacity: 0.4; }

.cl-seat .pod { position: relative; }
.cl-seat .av {
  width: 48px;
  height: 48px;
  font-size: var(--k-fs-section);
  transition: box-shadow 0.25s, transform 0.25s var(--ease);
}
/*
 * ЧЕЙ ХОД — ПОВЕРХ СУКНА. Зелёное кольцо к сукну UNOQ даёт 2.64, красное
 * 3.54: зелёного на сукне не видно, и одним кольцом тут не обойтись.
 * Поэтому кольцо двойное — цветное внутри, светлое снаружи (13.14).
 * Сияния нет, увеличение места осталось: оно показывает очередь формой.
 */
.cl-seat.turn .av {
  box-shadow: 0 0 0 2px var(--color-success), 0 0 0 3px var(--on-felt-accent-line);
  transform: scale(1.06);
}
/* Осталась одна карта — красное кольцо. Промолчал — оно мигает: вот окно. */
.cl-seat.alone .av { box-shadow: 0 0 0 2px var(--color-danger), 0 0 0 3px var(--on-felt-accent-line); }
/* И одна карта, и его ход: оба кольца, снаружи светлое. */
.cl-seat.alone.turn .av {
  box-shadow:
    0 0 0 2px var(--color-danger),
    0 0 0 4px var(--color-success),
    0 0 0 5px var(--on-felt-accent-line);
}
.cl-seat.quiet .av { animation: cl-blink 0.7s steps(1, end) infinite; }
/* Мигание осталось — это окно, в которое надо успеть, а не украшение.
   Свечение из него убрано: мигает плоское кольцо. */
@keyframes cl-blink {
  50% { box-shadow: 0 0 0 4px var(--text-primary); }
}
.cl-seat.last .av { filter: saturate(0.5); }

.cl-count {
  position: absolute;
  right: -4px;
  bottom: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: var(--k-r-pill);
  /* Поверх сукна: сплошная поверхность и контур, который на сукне виден (7.21). */
  background: var(--bg-surface);
  border: 1px solid var(--on-felt-line);
  color: var(--text);
  font-size: var(--k-fs-caption);
  font-weight: 800;
  display: grid;
  place-items: center;
}

.cl-plate {
  max-width: 76px;
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--on-felt-line);
  border-radius: var(--k-r-md);
  padding: 2px 6px;
}
.cl-plate .nm {
  font-size: var(--k-fs-caption);
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-plate .sub2 { font-size: var(--k-fs-caption); color: var(--muted); }

.cl-one {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* Метка «одна карта» — это предупреждение интерфейса, а не цвет карты:
     поэтому красный из палитры, а не --cl-R. Светлая надпись даёт 4.78. */
  background: var(--color-danger);
  color: var(--text-primary);
  font-size: var(--k-fs-caption);
  font-weight: 800;
  display: grid;
  place-items: center;
}
.cl-one.ok { background: transparent; font-size: var(--k-fs-secondary); }

/* ------------------------------------------------------------- середина */

.cl-mid {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 150px;
}

/* Круг направления. «Разворот» коротко прокручивает его в обратную сторону. */
.cl-dir {
  position: absolute;
  width: min(74vw, 260px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.4;
}
.cl-dir svg { width: 100%; height: 100%; fill: none; stroke: var(--text-secondary); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.cl-dir[data-dir='ccw'] svg { transform: scaleX(-1); }

.cl-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 2;
}

.cl-deck, .cl-pile { position: relative; width: calc(var(--cw) * 1.22); aspect-ratio: 5 / 7; }
.cl-deck { cursor: pointer; }
.cl-stack { position: absolute; inset: 0; }
.cl-stack img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--k-r-md); }
.cl-stack img.b1 { transform: translate(-2px, -2px); }
.cl-stack img.b2 { transform: translate(-4px, -4px); }

/*
 * Нечего положить — колода подрастает: бей по ней. Ноль раздумий.
 * Золотое свечение из этого убрано — осталось движение, которое и говорит
 * «сюда». Это функциональная подсказка, а не пульсация ради пульсации, и
 * она выключается вместе с остальными по prefers-reduced-motion.
 */
.cl-deck.pulse { animation: cl-pulse 1.1s var(--ease) infinite; }
@keyframes cl-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
.cl-deck.empty .cl-deck-empty {
  position: absolute;
  inset: 0;
  border: 1px dashed var(--on-felt-line);
  border-radius: var(--k-r-md);
  display: grid;
  place-items: center;
  font-size: var(--k-fs-caption);
  color: var(--text-2);
}
.cl-deck-n, .cl-discard-n {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  font-size: var(--k-fs-caption);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.cl-pile img.cl-top { width: 100%; height: 100%; border-radius: var(--k-r-md); }
/* Названный цвет виден на самой куче: после «смены цвета» верхняя карта
   про цвет уже ничего не говорит. */
.cl-chosen {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Светлый кант отделяет названный цвет и от кучи, и от сукна: синий к
     сукну UNOQ даёт 2.96, то есть сам по себе теряется. */
  border: 2px solid var(--on-felt-accent-line);
}
.cl-chosen.cR { background: var(--cl-R); }
.cl-chosen.cY { background: var(--cl-Y); }
.cl-chosen.cG { background: var(--cl-G); }
.cl-chosen.cB { background: var(--cl-B); }

/* Накопление видно на куче: сколько прилетит следующему. */
.cl-pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--k-fs-title);
  font-weight: 900;
  color: var(--text-primary);
  /* Накопление читается на затемнении, а не на обводке из теней. */
  background: var(--scrim);
  border-radius: var(--k-r-md);
}

/* Лента: три последних события, затухают. Без неё быстрый ход соперника
   остаётся незамеченным. */
.cl-events {
  position: relative;
  z-index: 3;
  padding: 2px 12px 8px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1px;
  min-height: 34px;
}
.cl-ev {
  font-size: var(--k-fs-caption);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Три последних события затухают прозрачностью, а не кеглем: кеглей в ките
   семь, и «чуть мельче предыдущего» среди них нет. */
.cl-ev.a0 { opacity: 1; color: var(--text); }
.cl-ev.a1 { opacity: 0.55; }
.cl-ev.a2 { opacity: 0.3; }

/* ------------------------------------------------------------------ рука */

.hero.cl-hero {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px 0 8px;
  min-height: 0;
  position: relative;
}
.cl-role-row { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.cl-role {
  flex: 1;
  min-width: 0;
  font-size: var(--k-fs-caption);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
 * «Ваш ход», «последняя карта», «вы вышли» — светлым. Цветной надписью в 12
 * пикселей это было 3.50 у зелёного и 4.08 у красного: мелкому тексту нужно
 * 4.5. Состояние несёт не цвет этих букв, а зелёная рамка руки (.hero.turn)
 * и слово.
 */
.cl-role.go, .cl-role.last, .cl-role.won { color: var(--text); }
.cl-role.watch { color: var(--muted); }

.cl-fits {
  flex: none;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--k-r-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: var(--k-fs-caption);
  font-weight: 800;
}

/* Одна строка с горизонтальной прокруткой. Две строки не делаем: веер
   превращается в кашу. */
.cl-hand {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 24px 12px 2px;
  margin-top: -6px;
}
.cl-hand::-webkit-scrollbar { display: none; }
.cl-hand.none {
  text-align: center;
  color: var(--muted);
  font-size: var(--k-fs-secondary);
  padding: 18px 12px;
}

.cl-fan {
  display: flex;
  justify-content: center;
  min-width: min-content;
  margin: 0 auto;
  padding-right: calc(var(--cw) * 0.1);
}
/* Перекрытие: до десяти карт веер влезает целиком, дальше сжимается — но не
   теснее трети карты, иначе по ней не попасть пальцем. */
.cl-card + .cl-card { margin-left: calc(var(--cw) * -0.42); }
.cl-hand[data-n='11'] .cl-card + .cl-card,
.cl-hand[data-n='12'] .cl-card + .cl-card { margin-left: calc(var(--cw) * -0.55); }
.cl-fan .cl-card:nth-child(n + 13) { margin-left: calc(var(--cw) * -0.67); }

.cl-card {
  flex: none;
  width: var(--cw);
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  transition: transform 0.18s var(--ease), filter 0.18s;
  transform-origin: 50% 100%;
}
.cl-card img {
  width: 100%;
  display: block;
  border-radius: var(--k-r-md);
  pointer-events: none;
}
/* Подходящие подняты и полностью яркие; остальные опущены и приглушены —
   БЕЗ серого фильтра: цвет должен остаться читаемым. */
.cl-card.up { transform: translateY(-18px); z-index: 2; }
/* Подходящую карту обводит зелёный: у карты свой светлый кант, и зелёное
   кольцо отделено им и от карты, и от руки (3.04 к поверхности). */
.cl-card.up img { box-shadow: 0 0 0 2px var(--color-success); }
.cl-card img.no { opacity: 0.55; }
/* Не ваш ход — не поднята ни одна, и вся рука чуть приглушена. Это главный
   признак «сейчас не ты». */
.cl-hero:not(.turn) .cl-fan { opacity: 0.78; }

/* Палец закрывает карту целиком: держишь — она над пальцем и крупнее. */
.cl-card.held { transform: translateY(-74px) scale(1.5); z-index: 9; }
.cl-card.held img { box-shadow: 0 0 0 3px var(--text-primary); }

/* Правило объясняется действием, а не экраном справки. */
.cl-hint {
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  /* Подсказка-правило — приподнятая поверхность с контуром: золота нет, а
     объявление и не должно кричать громче карт. */
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border-color);
  font-size: var(--k-fs-caption);
  font-weight: 800;
  padding: 5px 12px;
  border-radius: var(--k-r-lg);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}

/* --------------------------------------------------------------- панель */

.cl-panel { flex-wrap: wrap; }
/*
 * «UNOQ!» и «Поймал!» — обычная главная кнопка: заливка действия и светлая
 * надпись (4.98). Радуга из четырёх цветов была единственным градиентом,
 * оставшимся в приложении, и она же путала игровой цвет с цветом
 * интерфейса: на кнопке четыре цвета ничего не значат, а на карте значат.
 */
.btn.shout {
  background: var(--color-success);
  color: var(--text-on-success);
  border: 0;
  font-weight: 900;
}
/* Пульсации нет: сколько осталось, говорит отсчёт на самой кнопке. */
.cl-wait { flex: 1; text-align: center; color: var(--muted); font-size: var(--k-fs-secondary); font-weight: 600; }

/* ------------------------------------------------------------- шторка цвета */

.cl-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 12px;
}
/*
 * ВЫБОР ЦВЕТА. Надпись ТЁМНАЯ на всех четырёх, и это посчитано, а не на
 * глаз: светлая на жёлтом даёт 1.73, на зелёном 2.99 — нечитаемо. Тёмная
 * даёт 4.70 / 10.07 / 5.84 / 3.94.
 *
 * Синий из этой четвёрки единственный не дотягивает до 4.5 ни со светлой
 * надписью (4.43), ни с тёмной (3.94): так устроен сам цвет карты, а менять
 * его нельзя. Поэтому надпись КРУПНАЯ — 20 пикселей полужирным, а крупному
 * тексту по WCAG довольно 3:1. Кнопка высотой 84 пикселя это и позволяет.
 */
.cl-pick-btn {
  height: 84px;
  border: 0;
  border-radius: var(--k-r-lg);
  color: var(--bg-main);
  font-size: var(--k-fs-section);
  font-weight: var(--k-w-semibold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cl-pick-btn:active { transform: scale(0.96); }
.cl-pick-btn.cR { background: var(--cl-R); }
.cl-pick-btn.cY { background: var(--cl-Y); }
.cl-pick-btn.cG { background: var(--cl-G); }
.cl-pick-btn.cB { background: var(--cl-B); }

/* Фигура цвета — на кнопках шторки те же, что на картах. */
.cl-shape { display: inline-grid; place-items: center; width: 14px; height: 14px; vertical-align: -2px; }
.cl-shape svg { width: 100%; height: 100%; fill: currentColor; }
.cl-shape.big { width: 30px; height: 30px; }

/*
 * СЛОВО ЦВЕТА — светлое, цвет уходит на фигуру рядом.
 *
 * Синий как текст даёт 3.42 на поверхности, красный 4.08 — мелким текстом
 * ими писать нельзя. А фигуре, как неТексту, довольно 3:1, и там все четыре
 * проходят. Цвет остаётся виден, слово остаётся читаемым, и правило «у
 * каждого цвета есть фигура» наконец работает на контраст, а не только на
 * дальтонизм.
 */
.cl-colorword { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.cl-colorword.cR .cl-shape { color: var(--cl-R); }
.cl-colorword.cY .cl-shape { color: var(--cl-Y); }
.cl-colorword.cG .cl-shape { color: var(--cl-G); }
.cl-colorword.cB .cl-shape { color: var(--cl-B); }

.cl-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-swatch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--k-fs-caption);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--k-r-lg);
  /* Прозрачная подложка, а не приподнятая: синяя фигура на приподнятой даёт
     2.96, а на поверхности шторки — 3.42. */
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text);
}
.cl-swatch.cR .cl-shape { color: var(--cl-R); }
.cl-swatch.cY .cl-shape { color: var(--cl-Y); }
.cl-swatch.cG .cl-shape { color: var(--cl-G); }
.cl-swatch.cB .cl-shape { color: var(--cl-B); }

/* ------------------------------------------------------------------ итоги */

.seats-grid.eight { grid-template-columns: repeat(4, 1fr); }

.cl-score { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.cl-sc { display: flex; justify-content: space-between; font-size: var(--k-fs-secondary); color: var(--text-2); }
.cl-sc.me { color: var(--text); font-weight: 700; }
.cl-sc-cap { font-size: var(--k-fs-caption); color: var(--muted); margin-top: 2px; }

.cl-res {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.cl-res:last-child { border-bottom: 0; }
/* Своя строка — весом, а не золотом. */
.cl-res.me { color: var(--text); font-weight: 700; }
.cl-res .pl {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: grid;
  place-items: center;
  font-size: var(--k-fs-caption);
  font-weight: 800;
  flex: none;
}
.cl-res .who { flex: 1; min-width: 0; }
.cl-res .nm { max-width: none; font-weight: 700; font-size: var(--k-fs-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-res .sub2 { font-size: var(--k-fs-caption); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .cl-deck.pulse, .cl-seat.quiet .av { animation: none; }
}

/* --------------------------------------------------------------- тост */

/*
 * Общий тост прибит к верху экрана — там, где в покере и дураке шапка, а
 * здесь ряд соперников. Накрывать имена и подсветку чьего хода он не должен,
 * поэтому на этом экране опускается ниже их — в пустую середину сукна.
 */
body[data-screen='colors'] #toast { top: var(--cl-toast-top, calc(150px + var(--sat))); }

/* Форма настроек: подпись, выбор и пояснение читаются сверху вниз на 320 px. */
body[data-screen='colors'] .sheet .field {
  flex-direction: column;
  align-items: stretch;
  gap: var(--k-s8);
}