/*
 * Оформление «Домино во дворе».
 *
 * Направление - вечерний краснодарский двор: тёплое небо, клён под окнами,
 * круглый стол на четыре стороны и костяшки на нём. Всё нарисовано кодом:
 * растровых картинок нет, ни одного запроса за изображением.
 *
 * Палитра живёт локально в .dm-yard и намеренно не совпадает с кремовым
 * фоном сайта: игра выглядит как кусок двора, вставленный в журнал. Общие
 * токены сайта используются только в кнопках и подвале.
 */

.dm-yard {
  --dm-sky-top: #35304a;
  --dm-sky-bottom: #6b5364;
  --dm-sun: #e8a05c;
  --dm-bricks: #2e2833;
  --dm-maple-dark: #2f4436;
  --dm-maple-mid: #46604a;
  --dm-maple-light: #5d7a58;
  --dm-wood-dark: #4a3122;
  --dm-table-top: #9c7047;
  --dm-table-mid: #7d5535;
  --dm-table-bottom: #5f3f28;
  --dm-ivory: #f7f1e1;
  --dm-ivory-shade: #ded5c0;
  --dm-pip: #2b2723;
  --dm-text: #f2ebdd;
  --dm-text-muted: #c0b2a4;

  position: relative;
  overflow: hidden;
  padding: var(--space-2xl) 0;
  background: linear-gradient(180deg, var(--dm-sky-top) 0%, var(--dm-sky-bottom) 62%, #4a3a3a 100%);
  color: var(--dm-text);
}

/* Небо и панельки на горизонте */

.dm-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dm-sky__town {
  position: absolute;
  left: 0;
  right: 0;
  top: 8%;
  width: 100%;
  height: 34%;
}

.dm-sky__blocks {
  fill: var(--dm-bricks);
  opacity: 0.55;
}

.dm-sky__sun {
  position: absolute;
  right: 8%;
  top: 4%;
  width: 96px;
  height: 96px;
}

.dm-sky__sun circle {
  fill: var(--dm-sun);
  opacity: 0.55;
  filter: blur(1px);
}

/* Клён слева: ствол и две шапки кроны */

/*
 * Клён растёт от верха сцены, а не от низа секции: секция высокая, и
 * bottom прижимал бы дерево к самому подвалу, где его закрывает стол.
 */
.dm-maple {
  position: absolute;
  left: -50px;
  top: 180px;
  width: 330px;
  height: 640px;
  pointer-events: none;
  opacity: 0.95;
}

.dm-maple svg {
  width: 100%;
  height: 100%;
}

.dm-maple__trunk {
  fill: var(--dm-wood-dark);
}

.dm-maple__crown {
  fill: var(--dm-maple-dark);
}

.dm-maple__crown--light {
  fill: var(--dm-maple-mid);
  opacity: 0.75;
}

/* Заголовок и табличка */

.dm-hero {
  position: relative;
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.dm-plate {
  position: relative;
  display: inline-block;
  padding: var(--space-xs) var(--space-lg);
  margin-bottom: var(--space-md);
  background: linear-gradient(180deg, #f2f4f6, #d8dcdf);
  color: #2c3138;
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transform: rotate(-2deg);
}

.dm-plate__street,
.dm-plate__city {
  display: block;
  font-family: var(--font-body);
  line-height: 1.2;
}

.dm-plate__street {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.dm-plate__city {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.7;
}

.dm-plate__bolt {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8b9299, #454b52);
}

.dm-plate__bolt--a { left: 6px; top: 6px; }
.dm-plate__bolt--b { right: 6px; bottom: 6px; }

.dm-title {
  font-family: "Russo One", var(--font-heading);
  font-weight: 400;
  line-height: 0.95;
  margin: 0 0 var(--space-md);
  text-transform: none;
}

.dm-title__main {
  display: block;
  font-size: clamp(2.4rem, 9vw, 4rem);
  letter-spacing: 0.02em;
}

.dm-title__sub {
  display: block;
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  color: var(--dm-sun);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dm-lead {
  max-width: 46ch;
  margin: 0 auto;
  font-size: var(--font-size-base);
  color: var(--dm-text-muted);
}

/* Сетка игры: стол на всю ширину, правила - под ним */

/*
 * Стол занимает всю ширину десктопа, а не узкую колонку рядом с подсказками:
 * в домино цепочка растёт вбок, и лишние 300 пикселей справа под подсказки
 * отнимали у неё ровно то место, где она и нужна. Правила переехали вниз,
 * под кнопки, и разложены в две колонки - читать их там удобнее, чем в
 * тесной боковой панели.
 */
.dm-yard .container {
  max-width: 1720px;
}

.dm-play {
  position: relative;
  display: block;
}

.dm-table-shell {
  min-width: 0;
}

/* Круглый стол: старая столешница из дерева, во дворе такие стоят годами */

/*
 * Высота растёт вместе с шириной: на широком экране низкая столешница
 * читается как доска, а не как стол. clamp держит пропорцию, но не даёт
 * столу занять весь экран на большом мониторе.
 */
.dm-table {
  position: relative;
  padding: var(--space-lg);
  border-radius: 50% / 18%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 240, 210, 0.16), transparent 55%),
    linear-gradient(180deg, #8a5f3b, #6b4527 42%, #4a2f1c);
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.45),
    inset 0 0 0 2px rgba(0, 0, 0, 0.3);
  border: 6px solid #3a2619;
  min-height: clamp(360px, 32vw, 500px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  isolation: isolate;
}

/*
 * Поверхность столешницы.
 *
 * Одни прямые полосы читаются как рейки, поэтому волокна собраны в двух
 * масштабах: широкие тёмные полосы задают рисунок доски, а редкие тонкие
 * прожилки дают шероховатость. Изгиб волокон добавляет SVG-фильтр в
 * разметке, поэтому здесь только цвет и шаг.
 */
.dm-table::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50% / 18%;
  background:
    repeating-linear-gradient(89deg,
      rgba(40, 22, 9, 0.26) 0px,
      rgba(40, 22, 9, 0.26) 3px,
      transparent 3px,
      transparent 34px,
      rgba(255, 231, 190, 0.13) 34px,
      rgba(255, 231, 190, 0.13) 36px,
      transparent 36px,
      transparent 78px,
      rgba(34, 18, 6, 0.16) 78px,
      rgba(34, 18, 6, 0.16) 80px,
      transparent 80px,
      transparent 131px),
    repeating-linear-gradient(90deg,
      rgba(255, 236, 202, 0.07) 0px,
      rgba(255, 236, 202, 0.07) 120px,
      transparent 120px,
      transparent 260px),
    radial-gradient(ellipse at 50% 12%, rgba(255, 236, 202, 0.22), transparent 64%),
    radial-gradient(ellipse at 22% 80%, rgba(46, 24, 9, 0.24), transparent 50%),
    linear-gradient(178deg, var(--dm-table-top), var(--dm-table-mid) 48%, var(--dm-table-bottom));
  box-shadow:
    inset 0 0 40px rgba(42, 22, 9, 0.4),
    inset 0 2px 0 rgba(255, 232, 196, 0.18),
    inset 0 -3px 0 rgba(30, 16, 6, 0.3);
  pointer-events: none;
}

/*
 * Надписи, вырезанные перочинным ножиком.
 *
 * Светлая линия поверх тёмной тени: нож снимает верхний слой и обнажает
 * светлую древесину, а по нижней кромке остаётся тень от канавки. Так
 * резьба читается на тёмной столешнице, не выглядя наклейкой. Прозрачность
 * невысокая: стол широкий, и цепочка костяшек должна оставаться главным
 * на нём, а не спорить с надписями.
 */
.dm-carving {
  position: absolute;
  inset: 10px;
  border-radius: 50% / 18%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.42;
}

.dm-carving svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dm-carving__deep {
  fill: none;
  stroke: #f6e2bd;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.dm-carving__small {
  font-size: 22px;
  letter-spacing: 0.08em;
  stroke-width: 1.5;
}

/* Тень под резом: та же надпись тёмным, чуть ниже и правее */
.dm-carving g {
  filter: drop-shadow(0.8px 1.4px 0 rgba(38, 20, 8, 0.85));
}

/* Следы ножа: длинные царапины и зарубки */
.dm-carving__cut {
  fill: none;
  stroke: #f0dcb8;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.85;
}

/* Волокна дерева: изогнутые линии, нарисованные внутри той же сцены */
.dm-grain path {
  fill: none;
  stroke: rgba(38, 20, 8, 0.32);
  stroke-width: 3;
}

.dm-table > :not(.dm-carving):not(.dm-over) {
  position: relative;
  z-index: 1;
}

.dm-status {
  margin: 0;
  text-align: center;
  font-family: "Russo One", var(--font-heading);
  font-size: var(--font-size-sm);
  letter-spacing: 0.03em;
  color: var(--dm-text);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  min-height: 1.4em;
}

/* Цепочка костяшек на столе */

/*
 * Цепочка костяшек на столе - одна непрерывная линия.
 *
 * Перенос строк здесь недопустим: разорванная цепь читается так, будто
 * кость выпала из игры. Поэтому nowrap, а чтобы длинная цепь влезла,
 * кости уменьшаются ступенями (data-size выставляет интерфейс).
 * Горизонтальная прокрутка - последняя страховка на узком экране.
 */
.dm-chain {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: safe center;
  gap: 5px;
  padding: var(--space-sm) 0;
  min-height: 120px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

/* Ступени размера: чем длиннее цепь, тем мельче костяшки */

.dm-chain[data-size="mid"] .dm-tile__half {
  width: 24px;
  height: 24px;
}

.dm-chain[data-size="small"] .dm-tile__half {
  width: 20px;
  height: 20px;
}

/* Самая мелкая ступень остаётся читаемой: точки должны считаться */
.dm-chain[data-size="tiny"] .dm-tile__half {
  width: 15px;
  height: 15px;
}

.dm-chain[data-size="mid"] .dm-tile {
  padding: 4px;
  gap: 2px;
}

.dm-chain[data-size="small"] .dm-tile {
  padding: 3px;
  gap: 2px;
}

.dm-chain[data-size="tiny"] .dm-tile {
  padding: 2px;
  gap: 1px;
}

.dm-chain[data-size="small"] {
  gap: 4px;
}

.dm-chain[data-size="tiny"] {
  gap: 3px;
}

.dm-chain[data-size="mid"] .dm-pip,
.dm-chain[data-size="small"] .dm-pip,
.dm-chain[data-size="tiny"] .dm-pip {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
}

.dm-chain[data-size="tiny"] .dm-pip {
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
}

.dm-chain__empty {
  margin: 0;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: rgba(242, 235, 221, 0.55);
}

/* Сама костяшка: белая пластинка с точками */

.dm-tile {
  display: inline-flex;
  gap: 3px;
  padding: 5px;
  background: linear-gradient(160deg, var(--dm-ivory), var(--dm-ivory-shade));
  border-radius: 6px;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.dm-tile--vert {
  flex-direction: column;
}

.dm-tile__half {
  position: relative;
  width: 30px;
  height: 30px;
  background: #fffdf7;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Точки: каждая на своём месте, как на настоящей костяшке */

.dm-pip {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--dm-pip);
}

.dm-tile--double .dm-tile__half {
  background: #fffdf7;
}

/* Базар: стопка закрытых костяшек, она же кнопка взятия */

/*
 * Базар - это кнопка. Отдельная кнопка «Взять из базара» внизу дублировала
 * действие и заставляла искать его вдали от стопки. Теперь брать можно там,
 * где лежит базар: подсказка «возьмите из базара» ведёт прямо к нему.
 * Выглядит базар по-прежнему стопкой, а не кнопкой, но подсвечивается,
 * когда брать действительно можно.
 */
.dm-boneyard {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.28);
  color: var(--dm-text-muted);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: default;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.dm-boneyard:disabled {
  opacity: 0.72;
}

.dm-boneyard.is-available {
  cursor: pointer;
  border-color: var(--dm-sun);
  color: var(--dm-text);
  background: rgba(232, 160, 92, 0.2);
  box-shadow: 0 0 0 3px rgba(232, 160, 92, 0.14);
}

.dm-boneyard.is-available:hover,
.dm-boneyard.is-available:focus-visible {
  background: rgba(232, 160, 92, 0.34);
  transform: translateY(-1px);
}

.dm-boneyard:focus-visible {
  outline: 2px solid var(--dm-sun);
  outline-offset: 2px;
}

.dm-boneyard__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--dm-ivory);
  color: var(--dm-pip);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Итог раунда и партии: карточка поверх стола */

/*
 * Итог показывается карточкой, а не строкой подсказки: раньше раунд
 * переезжал в следующий сам через пару секунд, и прочитать, кто выиграл,
 * было некогда. Продолжение - осознанный клик.
 */
.dm-over {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  border-radius: 50% / 18%;
  background: rgba(24, 14, 8, 0.58);
  backdrop-filter: blur(2px);
}

/* display: flex перебил бы hidden, поэтому прячем явно */
.dm-over[hidden] {
  display: none;
}

.dm-over__card {
  max-width: 34rem;
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #f7f1e1, #e3d8c2);
  color: #2b2016;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.dm-over__kicker {
  margin: 0 0 var(--space-xs);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a6b4a;
}

.dm-over__title {
  margin: 0 0 var(--space-sm);
  font-family: "Russo One", var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 400;
  line-height: 1.15;
}

.dm-over__text {
  margin: 0 0 var(--space-md);
  font-size: 0.92rem;
  line-height: 1.55;
  color: #574734;
}

.dm-over__next {
  width: 100%;
  color: #2b2016;
}

/* Места соперников вокруг стола */

.dm-seats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.dm-seat {
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dm-seat.is-turn {
  border-color: var(--dm-sun);
  box-shadow: 0 0 0 1px var(--dm-sun);
}

.dm-seat__figure {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dm-maple-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--dm-text);
  flex-shrink: 0;
}

.dm-seat__info {
  min-width: 0;
  flex: 1;
}

.dm-seat__name {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-seat__meta {
  display: block;
  font-size: 0.75rem;
  color: var(--dm-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Рука игрока */

.dm-hand-panel {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dm-hand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.dm-hand-title {
  font-family: "Russo One", var(--font-heading);
  font-size: var(--font-size-sm);
  letter-spacing: 0.03em;
}

.dm-peek {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--dm-text);
  font-size: 0.78rem;
  cursor: pointer;
}

.dm-peek:hover,
.dm-peek:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.dm-hand {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* В руке костяшки держат стоймя, поэтому половины всегда друг над другом. */
.dm-hand .dm-tile {
  flex-direction: column;
  border: 0;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dm-hand .dm-tile:hover,
.dm-hand .dm-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.dm-hand .dm-tile:focus-visible {
  outline: 2px solid var(--dm-sun);
  outline-offset: 2px;
}

.dm-hand .dm-tile:disabled {
  cursor: default;
  opacity: 0.45;
  transform: none;
}

.dm-tile.is-selected {
  outline: 2px solid var(--dm-sun);
  outline-offset: 2px;
}

.dm-tile.is-playable {
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 0 2px rgba(232, 160, 92, 0.65);
}

/* Кнопки выбора конца */

.dm-sides {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.dm-side {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--dm-sun);
  background: rgba(232, 160, 92, 0.16);
  color: var(--dm-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.dm-side:hover,
.dm-side:focus-visible {
  background: rgba(232, 160, 92, 0.3);
}

.dm-hint {
  min-height: 1.4em;
  margin: var(--space-sm) 0 0;
  font-size: 0.82rem;
  color: var(--dm-text-muted);
}

/* Управление */

.dm-controls {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.dm-modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.dm-mode {
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: var(--dm-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.dm-mode:hover,
.dm-mode:focus-visible {
  color: var(--dm-text);
  border-color: rgba(255, 255, 255, 0.45);
}

.dm-mode.is-active {
  background: var(--dm-sun);
  border-color: var(--dm-sun);
  color: #2b2016;
  font-weight: 700;
}

.dm-controls__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.dm-btn {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--dm-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.dm-btn:hover,
.dm-btn:focus-visible {
  background: rgba(255, 255, 255, 0.13);
}

.dm-btn--primary {
  background: var(--dm-sun);
  border-color: var(--dm-sun);
  color: #2b2016;
  font-weight: 700;
}

.dm-btn--primary:hover,
.dm-btn--primary:focus-visible {
  background: #f2b071;
}

.dm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
  color: var(--dm-text-muted);
}

.dm-btn--primary:disabled {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}

.dm-reset {
  margin-left: auto;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--dm-text-muted);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.dm-reset:hover,
.dm-reset:focus-visible {
  color: var(--dm-text);
}

/* Счёт */

.dm-score {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.dm-score__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.32);
  font-size: var(--font-size-sm);
}

.dm-score__item b {
  font-family: "Russo One", var(--font-heading);
  font-variant-numeric: tabular-nums;
  color: var(--dm-sun);
  font-size: 1rem;
  margin-left: 2px;
  min-width: 1ch;
}

/* Подсказки под столом, в две колонки */

.dm-note {
  position: relative;
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.08);
  column-count: 2;
  column-gap: var(--space-xl);
}

.dm-note__title {
  margin: 0 0 var(--space-sm);
  font-family: "Russo One", var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 400;
  column-span: all;
}

.dm-note p {
  margin: 0 0 var(--space-sm);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--dm-text-muted);
  break-inside: avoid;
}

.dm-note__hint {
  padding-left: var(--space-sm);
  border-left: 2px solid var(--dm-sun);
}

.dm-back {
  column-span: all;
}

.dm-back a {
  color: var(--dm-sun);
}

/* Объявление о конце раунда */

.dm-table.is-over .dm-chain {
  opacity: 0.75;
}

/* Телефон: стол и панели в одну колонку */

@media (max-width: 860px) {
  .dm-note {
    column-count: 1;
    padding: var(--space-md);
  }

  .dm-over__card {
    padding: var(--space-md) var(--space-lg);
  }

  .dm-maple {
    width: 170px;
    height: 340px;
    left: -50px;
  }

  .dm-sky__sun {
    width: 64px;
    height: 64px;
  }

  .dm-table {
    border-width: 4px;
    padding: var(--space-md);
    border-radius: 24px;
  }

  .dm-table::before {
    border-radius: 18px;
  }
}

@media (max-width: 520px) {
  .dm-yard {
    padding: var(--space-lg) 0;
  }

  .dm-tile__half {
    width: 26px;
    height: 26px;
  }

  .dm-chain {
    gap: 4px;
  }

  .dm-seats {
    gap: var(--space-xs);
  }

  .dm-seat {
    flex: 1 1 130px;
    padding: 6px 8px;
  }

  .dm-controls__row .dm-btn {
    flex: 1 1 calc(50% - var(--space-xs));
  }

  .dm-reset {
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
  }
}

/* Меньше движения */

@media (prefers-reduced-motion: reduce) {
  .dm-hand .dm-tile {
    transition: none;
  }

  .dm-hand .dm-tile:hover,
  .dm-hand .dm-tile:focus-visible {
    transform: none;
  }
}