/* ==========================================================================
   DropHub HiLo

   Тема сайта, как у апгрейда, «1 Клика» и рулетки: индиго-поверхности,
   лаймовый акцент, Oswald на заголовках и цифрах, Inter на тексте.

   ---------- УСТРОЙСТВО ЭКРАНА ----------

   Вся игра — одна индиго-карточка-«стол» (.hl-stage): лампа сверху, сетка
   и редкие искры, как у апгрейда. Шапка стола — полоса последних карт,
   ниже три колонки: слева сумма и «Выше/Ниже», в центре карта с отсчётом
   на фоновой картинке, справа побочные исходы.

   «Выше» — зелёная кнопка, «Ниже» — красная: это два исхода, между
   которыми выбирают чаще всего, и только у них шансы меняются от раунда к
   раунду. Остальные исходы — одинаковые стеклянные плитки с мини-картами:
   что должно выпасть, видно картами, а не словом.

   На каждой плитке И множитель, И настоящий шанс. Одного числа мало:
   множитель без шанса выглядит подарком, шанс без множителя — угрозой.

   Общие файлы (home.css, games.css, mobile.css) не правим: где mobile.css
   нужно перебить, вес поднят префиксом .hl-body (подписано).
   ========================================================================== */

/* фон страницы — как у «1 Клика» и рулетки (--ht-bg главной);
   камуфляж поверх — общий слой body::before из home.css */
.hl-body { background-color: #1A1430; }

/* Токены — на .hl-page: ближайший предок выигрывает у :root без
   !important, и шапка сайта над игрой остаётся своей. */
.hl-page {
  --hl-s1: #221B3E; --hl-s2: #2C2452; --hl-s3: #372E62; --hl-deep: #150F2B;
  --hl-glass: linear-gradient(180deg, #2C2452 0%, #241D45 100%);
  --hl-line: #3A3166; --hl-line2: #4C4182;
  --hl-hl: inset 0 1px 0 rgba(255, 255, 255, .07);
  --hl-lime: #D7FF00;
  /* «Выше» и «ниже». Насыщенные, но не кислотные; белый текст на средней
     точке градиента — не меньше 4.5:1 (зелёный ~5:1, красный ~5.5:1). */
  --hl-up: #1C9152;  --hl-up-2: #0E6A37; --hl-up-glow: rgba(59, 227, 138, .55);
  --hl-dn: #D22F45;  --hl-dn-2: #A01C31; --hl-dn-glow: rgba(255, 90, 110, .55);
  --hl-win: #9DF58C;

  --text: #F5F3FF; --text-dim: #BDB7DE; --text-mute: #A69FCF;
  --line: var(--hl-line); --panel-2: var(--hl-s2); --panel-3: var(--hl-deep);
  --accent: var(--hl-lime);

  max-width: 1480px; margin: 0 auto;
  padding: 12px var(--pad-x) 48px;
  display: flex; flex-direction: column; gap: 18px;
}

/* ── заголовок раздела ──
   На линиях, как у апгрейда. Полосу ставит drophub.gamebar.js перед <main>,
   поэтому перекраска здесь. Подпись под названием убрана: стол объясняет
   сам. */
.hl-body .kz-gbar { max-width: 1480px; padding: 10px var(--pad-x, 20px) 0; justify-content: center; gap: 12px; }
.hl-body .kz-gbar::before, .hl-body .kz-gbar::after { content: ''; flex: 1; height: 1px; min-width: 24px; }
.hl-body .kz-gbar::before { margin-right: 6px; background: linear-gradient(90deg, transparent, rgba(166, 120, 255, .35)); }
.hl-body .kz-gbar::after  { margin-left: 6px;  background: linear-gradient(270deg, transparent, rgba(166, 120, 255, .35)); }
.hl-body .kz-gbar .kz-gico { width: 30px; height: 30px; flex: none; }
.hl-body .kz-gbar__txt { display: block; flex: none; }
.hl-body .kz-gbar__txt b { font-size: 30px; font-weight: 600; letter-spacing: .06em; line-height: 1.1; color: #F5F3FF; text-shadow: 0 0 24px rgba(166, 44, 255, .45); }
.hl-body .kz-gbar__txt i { display: none; }

.hl-h2 {
  margin: 0 0 2px;
  font-family: var(--f-cond), sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
}

/* ═══════════════ СТОЛ-КАРТОЧКА ═══════════════ */

.hl-stage {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px 20px 20px;
  border: 1px solid var(--hl-line); border-radius: 28px;
  background:
    radial-gradient(40% 46% at 50% 0%, rgba(140, 90, 255, .30), transparent 72%),
    radial-gradient(60% 50% at 0% 100%, rgba(110, 80, 230, .14), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(110, 80, 230, .14), transparent 70%),
    linear-gradient(180deg, #261E4A 0%, #201941 58%, #1D163A 100%);
  box-shadow: 0 24px 60px rgba(8, 4, 24, .45), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 120px rgba(14, 8, 36, .35);
}
/* сетка 44 px, гаснет к краям — плоскость не выглядит пустой заливкой */
.hl-stage::before, .hl-stage::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
}
.hl-stage::before {
  background-image:
    linear-gradient(rgba(190, 170, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 170, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center -1px;
  -webkit-mask-image: radial-gradient(64% 70% at 50% 40%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
          mask-image: radial-gradient(64% 70% at 50% 40%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
}
/* редкие искры — один слой, мерцает только прозрачностью */
.hl-stage::after {
  background:
    radial-gradient(1.6px 1.6px at 7% 22%, rgba(215, 255, 0, .8), transparent),
    radial-gradient(1.2px 1.2px at 13% 58%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.8px 1.8px at 19% 86%, rgba(166, 120, 255, .8), transparent),
    radial-gradient(1.4px 1.4px at 76% 26%, rgba(166, 120, 255, .85), transparent),
    radial-gradient(1.2px 1.2px at 83% 62%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.7px 1.7px at 90% 16%, rgba(215, 255, 0, .7), transparent),
    radial-gradient(1.3px 1.3px at 95% 80%, rgba(166, 120, 255, .7), transparent),
    radial-gradient(1.1px 1.1px at 36% 94%, rgba(255, 255, 255, .35), transparent);
  animation: hl-twinkle 5s ease-in-out infinite alternate;
}
@keyframes hl-twinkle { from { opacity: .45; } to { opacity: 1; } }

/* ═══════════════ ПОЛОСА РАУНДОВ ═══════════════ */

/* Без линии под полосой — просили убрать; отделяет её отступ. */
.hl-histbar { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hl-histbar__t {
  flex: none;
  font-family: var(--f-cond), sans-serif;
  font-size: 11px; font-weight: 600; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute);
}
/* Отступ внутри ленты — место под кольцо свежей карты: overflow её
   обрезал бы. Край ленты гаснет — видно, что она листается. */
.hl-hist {
  flex: 1; min-width: 0;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  min-height: 56px; padding: 3px;
}
.hl-hist::-webkit-scrollbar { display: none; }
/* Карточки тянутся на всю строку: сервер держит 28 раундов, и на широком
   экране ячейки делят строку поровну; на телефоне не влезают и листаются
   вбок. max-width — страховка от растяжения в плиты. */
.hl-h {
  flex: 1 0 38px; min-width: 38px; max-width: 64px; height: 50px;
  display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center;
  border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #E8E4F6 100%); color: #1B1533;
  box-shadow: 0 6px 12px -6px rgba(6, 2, 20, .8), inset 0 0 0 1px rgba(27, 21, 51, .08);
  font-family: var(--f-cond), sans-serif;
  animation: hl-in .24s ease-out;
}
@keyframes hl-in {
  from { opacity: 0; transform: translateX(-14px) scale(.86); }
}
/* Свежая карта — первая слева — всегда в лаймовом кольце: полоса длинная,
   и без пометки непонятно, с какого конца она растёт. Первые секунды
   кольцо ещё и вспыхивает. */
.hl-hist .hl-h:first-child:not(.hl-h--empty) { box-shadow: 0 0 0 2px var(--hl-lime), 0 6px 14px -6px rgba(215, 255, 0, .5); }
.hl-h.is-new { animation: hl-in .3s ease-out, hl-fresh 2.4s ease-out; }
@keyframes hl-fresh {
  0%   { box-shadow: 0 0 0 2px var(--hl-lime), 0 0 18px rgba(215, 255, 0, .8); }
  100% { box-shadow: 0 0 0 2px var(--hl-lime), 0 0 0 rgba(215, 255, 0, 0); }
}
.hl-h.is-red { color: #D02A42; }
.hl-h.is-joker { background: linear-gradient(180deg, #4AA8FF 0%, #2F6FE0 100%); color: #fff; }
.hl-h b {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-size: 15px; font-weight: 700; padding-top: 3px;
}
.hl-h b s { text-decoration: none; font-family: Inter, sans-serif; font-size: 11px; font-weight: 400; }
/* Нижняя планка — сторона: зелёная «выше», красная «ниже», серая «та же».
   Серии видно цветом, не читая стрелок. */
.hl-h__d {
  display: block; width: 100%; padding: 2px 0 3px;
  font-size: 9px; font-style: normal; text-align: center; line-height: 1.2;
  background: #6A6198; color: #fff;
}
.hl-h__d--hi { background: var(--hl-up); }
.hl-h__d--lo { background: var(--hl-dn); }
.hl-h.is-joker .hl-h__d { background: rgba(10, 20, 60, .35); }
/* Пустые ячейки добивают полосу до 28, пока сервер не набрал историю.
   Высота — как у настоящей карточки, чтобы полоса не прыгала. */
.hl-h--empty {
  animation: none;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(166, 120, 255, .14);
}

/* ═══════════════ СТОЛ ═══════════════ */

.hl-table {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px;
  gap: 16px; align-items: stretch;
}

/* ---------- левая колонка ---------- */

.hl-left, .hl-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.hl-betbox { padding: 0; }
.hl-lab {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--text-mute); margin-bottom: 7px;
}
.hl-lab i { font-style: normal; font-size: 11px; }
.hl-lab b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Поле суммы — утопленный колодец, как ввод у «1 Клика». */
.hl-money {
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 12px;
  border: 1px solid var(--hl-line); border-radius: 12px; background: var(--hl-deep);
  box-shadow: inset 0 2px 8px rgba(6, 2, 20, .5);
  transition: border-color .14s, box-shadow .14s;
}
.hl-money:focus-within { border-color: var(--hl-line2); box-shadow: inset 0 2px 8px rgba(6, 2, 20, .5), 0 0 0 3px rgba(215, 255, 0, .12); }
.hl-money__coin { width: 18px; height: 18px; flex: none; }
.hl-money__coin svg, .hl-money__coin img { display: block; width: 100%; height: 100%; }
.hl-money input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: none; outline: none;
  font: inherit; font-family: var(--f-cond), sans-serif; font-size: 18px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hl-money__max {
  height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--hl-line2); background: var(--hl-s2);
  font-family: var(--f-cond), sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--hl-lime);
  transition: background-color .14s, border-color .14s;
}
.hl-money__max:hover { background: var(--hl-s3); border-color: rgba(215, 255, 0, .45); }
/* Быстрые суммы — чипы, как у рулетки. */
.hl-qbets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.hl-qbets button {
  height: 34px; border-radius: 10px;
  border: 1px solid var(--hl-line); background: var(--hl-glass); box-shadow: var(--hl-hl);
  font-family: var(--f-cond), sans-serif; font-size: 13px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums;
  transition: color .14s, border-color .14s, transform .12s;
}
.hl-qbets button:hover { color: var(--text); border-color: var(--hl-line2); }
.hl-qbets button:active { transform: scale(.96); }

/* ═══════════════ ИСХОДЫ ═══════════════ */

.hl-sides { display: grid; gap: 10px; }
.hl-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Общая плитка: индиго-стекло, своя ставка — лаймовая метка в углу. */
.hl-t {
  position: relative; display: grid; gap: 3px; align-content: start;
  padding: 12px 12px 12px; border-radius: 14px;
  border: 1px solid var(--hl-line);
  background: radial-gradient(90% 90% at 100% 0%, var(--tint, transparent), transparent 70%), var(--hl-glass);
  box-shadow: var(--hl-hl), 0 8px 18px -12px rgba(6, 2, 20, .8);
  color: var(--text); text-align: left;
  transition: transform .12s, border-color .14s, box-shadow .14s, opacity .14s, filter .14s;
}
.hl-t:hover:not([disabled]) {
  transform: translateY(-2px); border-color: var(--hl-line2);
  box-shadow: var(--hl-hl), 0 12px 24px -12px rgba(6, 2, 20, .9), 0 0 0 1px rgba(166, 120, 255, .25);
}
.hl-t:active:not([disabled]) { transform: translateY(0) scale(.985); }
.hl-t:focus-visible { outline: 2px solid var(--hl-lime); outline-offset: 2px; }
.hl-t.is-dead { opacity: .4; filter: grayscale(.6); cursor: not-allowed; }

/* оттенок угла — по исходу, плитки остаются одной семьёй */
.hl-t--red   { --tint: rgba(224, 71, 92, .22); }
.hl-t--black { --tint: rgba(140, 155, 196, .16); }
.hl-t--ace, .hl-t--jqka, .hl-t--ka, .hl-t--low { --tint: rgba(166, 120, 255, .18); }

.hl-t.is-mine { border-color: rgba(215, 255, 0, .7); box-shadow: var(--hl-hl), 0 0 0 1px rgba(215, 255, 0, .5), 0 8px 22px -10px rgba(215, 255, 0, .35); }
/* Короткий толчок в момент постановки: без него нажатие ощущается
   промахом. */
.hl-t.is-bump { animation: hl-bump .34s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes hl-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
/* Итог раунда прямо на плитках: выигравшая вспыхивает зелёным, как деньги
   по всему сайту, остальные гаснут. */
.hl-t.is-won {
  border-color: #43D97A;
  box-shadow: var(--hl-hl), 0 0 0 1px #43D97A;
  animation: hl-won .9s ease-out;
}
@keyframes hl-won {
  0%   { box-shadow: 0 0 0 0 rgba(67, 217, 122, .65); }
  100% { box-shadow: 0 0 0 14px rgba(67, 217, 122, 0); }
}
.hl-t.is-out { opacity: .4; }

.hl-t__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.hl-t__cap { font-size: 11px; font-weight: 600; color: var(--text-mute); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-t__pl {
  font-style: normal; font-size: 11px; color: var(--text-mute);
  padding-left: 14px; position: relative; font-variant-numeric: tabular-nums;
}
/* Значок игрока — силуэт маской из встроенного SVG, красится в
   currentColor: повторяется десять раз, и запросы ради него не нужны. */
.hl-t__pl::before {
  content: ''; position: absolute; left: 0; top: 50%; margin-top: -6px;
  width: 11px; height: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M3.5 21c.7-4.4 4-7 8.5-7s7.8 2.6 8.5 7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M3.5 21c.7-4.4 4-7 8.5-7s7.8 2.6 8.5 7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hl-t__m {
  font-family: var(--f-cond), sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.hl-t__p { font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
/* своя ставка — лаймовая метка на углу плитки */
.hl-t__mine {
  position: absolute; top: -8px; right: 10px; z-index: 1;
  padding: 2px 8px; border-radius: 999px;
  background: var(--hl-lime); color: #141A00;
  font-family: var(--f-cond), sans-serif; font-size: 12px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 10px -3px rgba(215, 255, 0, .55);
}

/* ---------- мини-карты исхода ----------
   Веер маленьких карт: «J Q K A» — четыре карты, «красная» — ♥♦.
   Слегка внахлёст и с наклоном, как карты в руке. */
.hl-chips { display: inline-flex; align-items: center; padding-left: 2px; }
.hl-chips i {
  display: grid; place-items: center; flex: none;
  width: 20px; height: 27px; border-radius: 4px;
  background: linear-gradient(180deg, #FFFFFF 0%, #E4E0F5 100%); color: #1B1533;
  font-family: var(--f-cond), sans-serif; font-size: 13px; font-weight: 700; font-style: normal; line-height: 1;
  box-shadow: 0 3px 6px -2px rgba(6, 2, 20, .7), inset 0 0 0 1px rgba(27, 21, 51, .1);
  transform: rotate(-5deg);
}
.hl-chips i:nth-child(even) { transform: rotate(4deg) translateY(-1px); }
.hl-chips i + i { margin-left: -5px; }
.hl-chips i.is-red { color: #D02A42; }
.hl-chips s { text-decoration: none; padding: 0 3px; font-family: var(--f-cond), sans-serif; font-size: 12px; font-weight: 600; color: var(--text-mute); }
.hl-chips--joker i { background: linear-gradient(180deg, #4AA8FF 0%, #2F6FE0 100%); color: #fff; }
.hl-mk { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- «Выше» и «Ниже» ----------
   Крупные залитые кнопки: стрелка в круге, слово, шанс, множитель.
   Весь текст белый, градиент тёмный ровно настолько, чтобы держать 4.5:1. */
.hl-t--hi, .hl-t--lo {
  --c1: var(--hl-up); --c2: var(--hl-up-2); --glow: var(--hl-up-glow);
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "a b m";
  align-items: center; align-content: center; gap: 12px;
  min-height: 94px; padding: 12px 14px 12px 12px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -2px 0 rgba(0, 0, 0, .22),
              0 14px 28px -14px var(--glow), 0 0 0 1px rgba(6, 2, 20, .25);
}
.hl-t--lo { --c1: var(--hl-dn); --c2: var(--hl-dn-2); --glow: var(--hl-dn-glow); }
.hl-t--hi:hover:not([disabled]), .hl-t--lo:hover:not([disabled]) {
  border-color: rgba(255, 255, 255, .32); filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .22),
              0 18px 34px -12px var(--glow), 0 0 0 1px rgba(6, 2, 20, .25);
}
.hl-t__arr {
  grid-area: a;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  /* без круглой подложки и обводки (владелец 2026-10-15) — просто стрелка */
  font-size: 30px; line-height: 1; text-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.hl-t--hi .hl-t__arr { padding-bottom: 2px; }
.hl-t__body { grid-area: b; display: grid; gap: 5px; min-width: 0; }
.hl-t__w {
  font-family: var(--f-cond), sans-serif;
  font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* пометка крайней карты под словом: «только та же A» (hilo.view.js) */
.hl-t__eq {
  margin-top: -2px;
  font-size: 11px; font-weight: 700; font-style: normal; line-height: 1.1; letter-spacing: .01em;
  color: #fff; opacity: .92; text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  /* на узком телефоне (320) переносится на вторую строку, а не режется */
  white-space: normal; overflow: hidden;
}
.hl-t--hi .hl-t__p, .hl-t--lo .hl-t__p {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; color: #fff;
}
.hl-t--hi .hl-t__pl, .hl-t--lo .hl-t__pl { color: #fff; font-size: 12px; }
.hl-t--hi .hl-t__m, .hl-t--lo .hl-t__m {
  grid-area: m;
  padding: 7px 10px; border-radius: 10px;
  background: rgba(6, 2, 20, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  font-size: 24px; line-height: 1; color: #fff; text-align: center;
}
.hl-t--hi.is-mine, .hl-t--lo.is-mine {
  border-color: var(--hl-lime);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 0 2px var(--hl-lime), 0 14px 28px -14px var(--glow);
}
/* выигрыш на залитой кнопке — белым кольцом: зелёное на зелёном не видно */
.hl-t--hi.is-won, .hl-t--lo.is-won { border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 14px 28px -14px var(--glow); }

/* ---------- на столе / отмена ---------- */
.hl-staked {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 12px; border-radius: 12px;
  border: 1px solid var(--hl-line); background: var(--hl-deep);
  font-size: 12px; color: var(--text-mute);
}
.hl-staked b { color: var(--text); font-family: var(--f-cond), sans-serif; font-size: 15px; font-variant-numeric: tabular-nums; }
.hl-clear {
  height: 30px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--hl-line); background: var(--hl-s1);
  font-size: 11px; font-weight: 600; color: var(--text-mute);
  transition: color .14s, border-color .14s, background-color .14s, opacity .14s;
}
/* Пока ставок нет — кнопка погашена; поставил хоть куда-то — горит
   красным: это отмена, и её видно сразу. */
.hl-clear:not([disabled]) { background: #C23149; border-color: #E05A71; color: #fff; }
.hl-clear:hover:not([disabled]) { background: #D33C55; }
.hl-clear[disabled] { opacity: .45; cursor: not-allowed; }

.hl-hint { margin: 0; min-height: 15px; font-size: 12px; color: #FF8A9A; }

/* ═══════════════ ЦЕНТР: КАРТА НА ФОНЕ ═══════════════

   Фоновая картинка остаётся, но уходит на второй план: индиго-тонировка,
   виньетка по краям и «лампа» над картой. Картинка — отдельный слой
   (.hl-bg::before) и стоит на месте — за курсором не ездит (владелец
   2026-11-02: «при наведении чтобы не двигался арт»); тонировка — слой
   над ней (.hl-bg::after).

   Слои: фон (z 0) → вспышка исхода (::after, z 1) → колода, подписи (z 2). */
.hl-centre {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; justify-items: center; align-content: center; gap: 14px;
  border: 1px solid var(--hl-line2); border-radius: 22px;
  background: #140E2A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -18px rgba(6, 2, 20, .9);
  padding: 58px 16px 22px;
  min-height: 470px;
}
.hl-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.hl-bg::before, .hl-bg::after { content: ''; position: absolute; }
.hl-bg::before {
  inset: -4%;
  background: url("assets/home_page_bg.webp") center / cover no-repeat;
  transform: scale(1.03);
}
.hl-bg::after {
  inset: 0;
  background:
    /* лампа над картой */
    radial-gradient(34% 40% at 50% 0%, rgba(190, 150, 255, .22), transparent 70%),
    /* виньетка: края в индиго стола */
    radial-gradient(78% 88% at 50% 48%, transparent 46%, rgba(20, 14, 42, .7) 86%, rgba(20, 14, 42, .92) 100%),
    /* фиолетовые бока и тёмный низ под подписью */
    linear-gradient(90deg, rgba(88, 40, 200, .26), transparent 30%, transparent 70%, rgba(88, 40, 200, .26)),
    linear-gradient(180deg, rgba(26, 20, 48, .38) 0%, rgba(26, 20, 48, .16) 45%, rgba(20, 14, 42, .82) 100%);
}

/* Вспышка исхода. Не «красиво», а функционально: между раундами четыре
   секунды, и человек должен понять итог, не читая цифру, — цветом. */
.hl-centre::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .5s;
  background: radial-gradient(70% 60% at 50% 50%, var(--flash, transparent), transparent 70%);
}
.hl-centre.is-flash::after { opacity: 1; transition: opacity .12s; }
.hl-centre.is-flash--win  { --flash: rgba(67, 217, 122, .28); }
.hl-centre.is-flash--lose { --flash: rgba(255, 92, 110, .24); }

/* ---------- состояние раунда ----------
   Видна подпись под текущую фазу (data-phase на #hl-root). */
.hl-phase {
  position: absolute; top: 14px; left: 50%; z-index: 2; transform: translateX(-50%);
  margin: 0; max-width: calc(100% - 24px);
  padding: 7px 14px; border-radius: 999px;
  background: rgba(21, 15, 43, .8); border: 1px solid rgba(166, 120, 255, .3);
  box-shadow: 0 6px 16px -6px rgba(6, 2, 20, .8);
  font-size: 12px; font-weight: 600; line-height: 1; color: var(--text-dim); white-space: nowrap;
}
.hl-phase > span { display: none; align-items: center; gap: 8px; }
.hl-phase em { font-style: normal; color: var(--text-mute); }
.hl-page[data-phase="bet"] .hl-phase__bet,
.hl-page[data-phase="reveal"] .hl-phase__reveal { display: inline-flex; }
.hl-phase__dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--hl-lime); box-shadow: 0 0 0 3px rgba(215, 255, 0, .18);
  animation: hl-pulse 1.6s ease-in-out infinite;
}
.hl-phase__reveal .hl-phase__dot { background: #FFB020; box-shadow: 0 0 0 3px rgba(255, 176, 32, .2); }
@keyframes hl-pulse { 50% { opacity: .35; } }

/* Ширина карты объявлена ЗДЕСЬ, а не на самой карте: от неё считаются
   стопка под ней, кольцо отсчёта и свечение. */
.hl-deck {
  position: relative; display: grid; place-items: center; z-index: 2;
  --cw: clamp(168px, 17vw, 236px);
}
/* Свечение за картой — лайм в фиолет, медленно дышит (6 с): неподвижный
   фон делает стол мёртвым на время отсчёта, быстрое движение отвлекло бы.
   Последние секунды — красное, вместе с кольцом. */
.hl-deck::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: calc(var(--cw, 200px) * 2.5); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(215, 255, 0, .2), rgba(140, 90, 255, .24) 45%, transparent 75%);
  transform: translate(-50%, -50%);
  animation: hl-breathe 6s ease-in-out infinite;
  transition: background .4s;
}
.hl-deck:has(.hl-clockwrap.is-low)::before { background: radial-gradient(closest-side, rgba(224, 49, 63, .3), rgba(140, 90, 255, .2) 45%, transparent 75%); }
@keyframes hl-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .7; }
  50%      { transform: translate(-50%, -50%) scale(1.04); opacity: 1; }
}
/* тень-«пол» под колодой: карта лежит на столе, а не висит в воздухе */
.hl-deck::after {
  content: ''; position: absolute; left: 50%; bottom: calc(var(--cw, 200px) * -.2); z-index: -1; pointer-events: none;
  width: calc(var(--cw, 200px) * 1.5); height: calc(var(--cw, 200px) * .24);
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(6, 2, 20, .8), rgba(6, 2, 20, 0));
}

/* ---------- колода под верхней картой ----------
   Три слоя РАЗМЕРОМ С КАРТУ, сдвинутые вниз и чуть уменьшенные: у колоды
   видно скруглённые углы и рубашку. Сдвиги — долями ширины карты. */
.hl-stack {
  position: absolute; left: 50%; top: 0; z-index: 0;
  width: var(--cw, 200px); aspect-ratio: 921 / 1331;
  margin-left: calc(var(--cw, 200px) / -2);
  pointer-events: none;
}
.hl-stack b {
  position: absolute; inset: 0; border-radius: 12px;
  background: url("assets/cards/card_back.webp") center / cover no-repeat, #1B5C88;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .95);
}
.hl-stack b:nth-child(1) { transform: translateY(calc(var(--cw, 200px) * .083)) scale(.962); }
.hl-stack b:nth-child(2) { transform: translateY(calc(var(--cw, 200px) * .052)) scale(.978); }
.hl-stack b:nth-child(3) { transform: translateY(calc(var(--cw, 200px) * .022)) scale(.993); }

.hl-cardbox {
  position: relative; z-index: 1;
  width: var(--cw);
  aspect-ratio: 921 / 1331;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(.4, .1, .2, 1);
}
.hl-cardbox.is-flipping { transform: rotateY(180deg); }

/* Покачивание — на ОБЁРТКЕ: переворот идёт по rotateY, покачивание по
   translateY, и на одном элементе вторая анимация перебила бы первую. */
.hl-float { position: relative; z-index: 1; transform-style: preserve-3d; }
.hl-page[data-phase="bet"] .hl-float { animation: hl-bob 4.6s ease-in-out infinite; }
@keyframes hl-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-.7deg); }
}
/* Приземление после вскрытия. Задержка равна длительности переворота. */
.hl-page[data-phase="reveal"] .hl-float { animation: hl-land .52s cubic-bezier(.2, 1.5, .4, 1) .62s both; }
@keyframes hl-land {
  0%   { transform: scale(1.07) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}

.hl-side {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF, #EAEEF3);
  box-shadow: 0 22px 44px -16px rgba(6, 2, 20, .95), 0 0 0 1px rgba(255, 255, 255, .35), 0 0 30px -6px rgba(166, 120, 255, .45);
  overflow: hidden;
}
.hl-side--next { transform: rotateY(180deg); }

.hl-face { position: absolute; inset: 0; display: grid; place-items: center; color: #16181C; }
.hl-face--img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-face.is-red { color: #D6202F; }
.hl-face.is-joker { color: #2F9BE0; }
.hl-face__pip { font-style: normal; font-size: clamp(48px, 6vw, 76px); line-height: 1; transition: opacity .3s; }
.hl-face__c {
  position: absolute; font-style: normal;
  font-family: var(--f-cond), sans-serif;
  font-size: clamp(17px, 1.8vw, 24px); font-weight: 700; line-height: 1;
  display: grid; justify-items: center; gap: 1px;
}
.hl-face__c b { font-size: .82em; font-weight: 400; }
.hl-face__c--tl { top: 9px; left: 10px; }
.hl-face__c--br { bottom: 9px; right: 10px; transform: rotate(180deg); }
.hl-page[data-phase="bet"] .hl-side--cur .hl-face__pip { opacity: .12; }

/* Кольцо и цифры лежат в ОДНОЙ ячейке сетки (grid-area 1/1), а не
   кольцо абсолютом поверх: абсолютного ребёнка сетки Safari на iPhone
   клал в левый верхний угол колоды. Там же — тёмный диск под цифрами:
   на картинке карты цифры иначе тонули в рисунке. */
.hl-clockwrap {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  pointer-events: none;
  transition: opacity .3s;
}
/* тёмный диск под цифрами убран (владелец 2026-10-15) — цифры тёмные на
   белой карте, в последние секунды красные */
.hl-clockwrap::before {
  display: none;
  content: ''; grid-area: 1 / 1;
  width: calc(var(--cw, 200px) * .6); height: calc(var(--cw, 200px) * .6); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(21, 15, 43, .9) 0%, rgba(21, 15, 43, .78) 78%, rgba(21, 15, 43, 0) 100%);
}
.hl-ringsvg, .hl-clockwrap b { grid-area: 1 / 1; }
.hl-page[data-phase="reveal"] .hl-clockwrap { opacity: 0; }
/* Поворот — атрибутом внутри SVG, а не CSS-трансформом: CSS-поворот и
   фильтры на самом SVG мобильный Safari рисовал с «призраком». */
.hl-ringsvg {
  display: block; overflow: visible;
  width: calc(var(--cw, 200px) * .66); height: calc(var(--cw, 200px) * .66);
}
.hl-ring-bg, .hl-ring, .hl-ring-glow { fill: none; stroke-width: 4; }
.hl-ring-bg { stroke: rgba(255, 255, 255, .12); }
.hl-ring, .hl-ring-glow {
  stroke: var(--ring, var(--accent)); stroke-linecap: round;
  transition: stroke-dashoffset .1s linear, stroke .4s;
}
/* Свечение кольца: на сенсорных — широкой полупрозрачной дугой, без
   CSS-фильтра (Safari рисовал его с «призраком»); с мышью — drop-shadow. */
.hl-ring-glow { stroke-width: 10; opacity: .22; }
@media (hover: hover) and (pointer: fine) {
  .hl-clockwrap { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ring, var(--accent)) 45%, transparent)); }
  .hl-ring-glow { display: none; }
}
.hl-clockwrap b {
  font-family: var(--f-cond), sans-serif;
  font-size: calc(var(--cw, 200px) * .17); font-weight: 700;
  color: #1E1640;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  transition: color .4s;
}
/* Три состояния отсчёта: лайм — спокойно, янтарь — пора решать, красный
   с пульсом — последние секунды. */
.hl-clockwrap { --ring: var(--hl-lime); }
.hl-clockwrap.is-mid { --ring: #FFB020; }
.hl-clockwrap.is-low { --ring: #FF4D5E; }
.hl-clockwrap.is-low b { color: #E0263F; animation: hl-tick 1s ease-in-out infinite; }
@keyframes hl-tick {
  0%, 100% { transform: scale(1); }
  18%      { transform: scale(1.14); }
  36%      { transform: scale(1); }
}

.hl-verdict {
  position: relative; z-index: 2;
  margin: 6px 0 0; min-height: 34px;
  display: grid; place-items: center;
  font-family: var(--f-cond), sans-serif;
  font-size: clamp(18px, 2vw, 24px); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim);
}
.hl-verdict:not(:empty) {
  padding: 4px 16px; border-radius: 12px;
  background: rgba(21, 15, 43, .78); border: 1px solid rgba(166, 120, 255, .25);
  animation: hl-verd .4s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes hl-verd { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.hl-verdict b { color: var(--hl-win); }
.hl-verdict .lose { color: #FF8A9A; }

/* Строка Provably fair под картой убрана — просили. */

/* ═══════════════ СТАВКИ РАУНДА ═══════════════ */

/* Заголовок стоит прямо на странице, плашками оформлены только строки.
   games.css красит .hl-betsblock через .gm-body — снимаем. */
.gm-body .hl-betsblock, .hl-betsblock { border: 0; background: none; box-shadow: none; overflow: visible; }
.hl-betsblock__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 10px; flex-wrap: wrap; }
.hl-betsblock__bar h2 {
  margin: 0; font-family: var(--f-cond), sans-serif;
  font-size: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.hl-count { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-mute); }
.hl-count__bank, .hl-count__n {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--hl-line); background: var(--hl-s1); box-shadow: var(--hl-hl);
}
.hl-count b { color: var(--text); font-family: var(--f-cond), sans-serif; font-size: 14px; font-variant-numeric: tabular-nums; }
.hl-count__bank b { color: var(--hl-win); }
.hl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hl-lime); box-shadow: 0 0 0 3px rgba(215, 255, 0, .16); }

/* Ставки — список плашек без шапки колонок и без прокрутки. Игрок слева,
   четыре колонки одинаковой ширины по центру. */
.hl-bets__head { display: none; }
.hl-bets { display: flex; flex-direction: column; gap: 6px; }
.hl-br {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 120px);
  align-items: center; gap: 8px; padding: 0 16px;
  height: 50px; border-radius: 12px;
  border: 1px solid rgba(58, 49, 102, .75);
  background: linear-gradient(180deg, rgba(44, 36, 82, .86) 0%, rgba(36, 29, 69, .86) 100%);
  box-shadow: var(--hl-hl);
  font-size: 13px; font-variant-numeric: tabular-nums;
  transition: background-color .2s;
  animation: hl-row .26s ease-out;
}
@keyframes hl-row { from { opacity: 0; transform: translateY(-6px); } }
.hl-br > span:not(:first-child) { text-align: center; }
/* своя строка — лаймовая кромка и лёгкий лаймовый отлив слева */
.hl-br.is-me {
  border-color: rgba(215, 255, 0, .35);
  background: linear-gradient(90deg, rgba(215, 255, 0, .12) 0%, rgba(44, 36, 82, .86) 38%, rgba(36, 29, 69, .86) 100%);
  box-shadow: inset 3px 0 0 var(--hl-lime), var(--hl-hl);
}
.hl-br.is-win {
  border-color: rgba(67, 217, 122, .45);
  background: linear-gradient(90deg, rgba(67, 217, 122, .2) 0%, rgba(44, 36, 82, .86) 45%);
  box-shadow: inset 3px 0 0 #43D97A; animation: hl-rowwin .8s ease-out;
}
@keyframes hl-rowwin { 0% { filter: brightness(1.4); } 100% { filter: none; } }
.hl-br.is-lose { opacity: .45; }
.hl-br.is-win .hl-br__win { color: var(--hl-win); }
.hl-br__who { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; }
.hl-br__who u { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-br__ava {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--hl-s2); border: 1px solid var(--hl-line);
  font-size: 11px; font-style: normal; color: var(--text-mute); text-transform: uppercase;
}
.hl-br__bet, .hl-br__k { color: var(--text); }
.hl-br__k { font-family: var(--f-cond), sans-serif; font-size: 14px; color: var(--text-dim); }
.hl-br__win { color: var(--gold); font-weight: 600; }
.hl-br__bet, .hl-br__win { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.hl-coin { display: block; width: 14px; height: 14px; flex: none; }
/* Прогноз — тем же языком, что на кнопках: зелёная стрелка «выше»,
   красная «ниже», остальное — мини-картами. */
.hl-br__cast { display: grid; place-items: center; }
.hl-br__arrow {
  display: grid; place-items: center;
  width: 28px; height: 24px; border-radius: 7px;
  font-size: 11px; font-style: normal; line-height: 1; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.hl-br__arrow--hi { background: linear-gradient(180deg, var(--hl-up), var(--hl-up-2)); }
.hl-br__arrow--lo { background: linear-gradient(180deg, var(--hl-dn), var(--hl-dn-2)); }
.hl-br__mk { display: inline-flex; }
.hl-br__mk .hl-chips i { width: 16px; height: 22px; font-size: 11px; border-radius: 3px; }
.hl-br__mk .hl-chips i + i { margin-left: -4px; }

.hl-empty { margin: 0; padding: 24px 14px; text-align: center; font-size: 13px; color: var(--text-mute); }
.hl-empty[hidden] { display: none; }

/* ═══════════════ УЗКИЕ ЭКРАНЫ ═══════════════ */

@media (max-width: 1180px) {
  .hl-table { grid-template-columns: 290px minmax(0, 1fr); }
  /* Побочные исходы уходят вниз на всю ширину: в третьей узкой колонке
     множители стали бы нечитаемой мелочью. Шесть исходов — по три в
     ряд, ровно два ряда. */
  .hl-right { grid-column: 1 / -1; }
  .hl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hl-histbar__t { display: none; }
}

@media (max-width: 820px) {
  .hl-table { grid-template-columns: minmax(0, 1fr); }
  /* Карта идёт первой: на телефоне сначала смотрят, что на столе. */
  .hl-centre { order: -1; }
}

@media (max-width: 760px) {
  /* заголовок, как у апгрейда и «1 Клика» на телефоне (mobile.css прячет
     .kz-gbar — перебиваем весом .hl-body) */
  .hl-body .kz-gbar { display: flex; padding: 6px 12px 0; gap: 10px; }
  .hl-body .kz-gbar .kz-gico { width: 26px; height: 26px; }
  .hl-body .kz-gbar__txt b { font-size: 24px; }

  .hl-body .hl-page { padding: 8px 12px 24px; gap: 14px; }
  .hl-stage { padding: 10px; gap: 10px; border-radius: 22px; box-shadow: 0 14px 30px rgba(8, 4, 24, .4), inset 0 1px 0 rgba(255, 255, 255, .07); }
  .hl-hist { min-height: 50px; gap: 5px; }
  .hl-h { height: 44px; flex-basis: 36px; min-width: 36px; }
  .hl-h b { font-size: 14px; }

  /* стол: карта крупнее, чем в mobile.css (104 px), место под подпись фазы */
  .hl-body .hl-centre { min-height: 0; padding: 44px 10px 10px; gap: 8px; border-radius: 18px; }
  .hl-body .hl-deck { --cw: min(124px, 34vw); }
  .hl-phase { top: 10px; padding: 6px 11px; font-size: 11px; }
  .hl-body .hl-verdict { min-height: 26px; margin-top: 4px; font-size: 16px; }

  /* «Выше» и «Ниже» рядом, крупные под палец: стрелка и слово сверху,
     множитель снизу во всю ширину кнопки. */
  .hl-body .hl-sides { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hl-body .hl-sides .hl-t--hi, .hl-body .hl-sides .hl-t--lo {
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "a b" "m m";
    gap: 8px; min-height: 104px; padding: 10px; border-radius: 14px;
    /* множитель — по низу кнопки: с пометкой «только та же A» одна кнопка
       выше по содержимому, а плашки множителей стоят на одной линии */
    grid-template-rows: minmax(0, 1fr) auto; align-content: stretch;
  }
  .hl-body .hl-sides .hl-t__arr { width: 36px; height: 36px; font-size: 22px; }
  .hl-body .hl-sides .hl-t__w { font-size: 20px; }
  .hl-body .hl-sides .hl-t__p { font-size: 11px; gap: 8px; }
  .hl-body .hl-sides .hl-t__m { font-size: 22px; padding: 7px 8px; }

  /* остальные исходы — по три в ряд (mobile.css ставит четыре под
     прежние семь с джокером — перекрываем); подписи уходят, карты остаются */
  .hl-body .hl-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hl-body .hl-tiles .hl-t { padding: 8px 7px 8px; gap: 2px; border-radius: 11px; }
  .hl-body .hl-tiles .hl-t__top { min-height: 20px; }
  .hl-body .hl-tiles .hl-t__m { font-size: 16px; }
  .hl-body .hl-tiles .hl-t__p { font-size: 10px; }
  .hl-body .hl-tiles .hl-t__mine { top: -7px; right: 4px; bottom: auto; padding: 1px 6px; font-size: 10px; }
  .hl-t__cap { display: none; }
  .hl-tiles .hl-chips i { width: 14px; height: 19px; font-size: 10px; border-radius: 3px; }
  .hl-tiles .hl-chips i + i { margin-left: -4px; }
  .hl-tiles .hl-chips s { padding: 0 1px; font-size: 10px; }

  .hl-betsblock__bar h2 { font-size: 16px; }
  .hl-br { padding: 0 10px; height: 46px; }
}

@media (max-width: 560px) {
  .hl-bets__head, .hl-br { grid-template-columns: minmax(0, 1fr) 76px 84px; }
  /* Из пяти колонок остаются три: ставка и коэффициент уходят, выгода и
     прогноз важнее — по ним видно, кто и на чём выиграл. */
  .hl-bets__head span:nth-child(2), .hl-br__bet,
  .hl-bets__head span:nth-child(4), .hl-br__k { display: none; }
  .hl-count__bank { display: none; }
}

@media (max-width: 420px) {
  .hl-phase em { display: none; }
}

@media (max-width: 360px) {
  .hl-body .hl-sides .hl-t__pl { display: none; }
  .hl-body .hl-sides .hl-t__w { font-size: 18px; }
  .hl-body .hl-tiles .hl-t { padding: 7px 5px; }
  .hl-tiles .hl-chips i { width: 13px; height: 18px; }
}

/* Меньше движения — по просьбе системы: без покачивания карты, дыхания
   света, искр, пульса цифр, параллакса и въезда карточек истории.
   Переворот карты остаётся: это не украшение, а сам ход раунда. */
@media (prefers-reduced-motion: reduce) {
  .hl-h, .hl-h.is-new, .hl-br,
  .hl-page[data-phase="bet"] .hl-float,
  .hl-deck::before, .hl-stage::after, .hl-phase__dot,
  .hl-clockwrap.is-low b { animation: none; }
  .hl-t:hover:not([disabled]) { transform: none; }
}