/* ==========================================================================
   DropHub Plinko

   Продолжение home.css: те же токены, чёрная база, лаймовый акцент.

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

   Слева панель, справа доска. Слева всё, что задаётся ДО броска и потом не
   трогается; справа всё, что происходит само. Панель не перестраивается ни
   при одном исходе — иначе кнопка «Играть» уезжала бы из-под пальца ровно
   в момент, когда её жмут десятый раз подряд.

   ---------- ЦВЕТ ЯЧЕЕК ----------

   Цвет считается из МНОЖИТЕЛЯ, а не из позиции: доля 0..1 приходит в
   переменной --heat из plinko.view.js, а тон берётся из неё одной формулой.
   Поэтому «красный» на любой доске и при любом риске значит одно и то же —
   «платит меньше ставки», — и шкалу не приходится учить заново, переключив
   риск.
   ========================================================================== */

/* Свой фон странице больше не нужен: он общий и живёт в home.css.
   Плоская заливка здесь перекрывала общий градиент — он оставался
   только на главной. */

.pl-page {
  max-width: var(--shell); margin: 0 auto;
  padding: 18px var(--pad-x) 56px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}
/* Общий фон страницы (assets/plinko_page_bg.webp) за всеми блоками:
   фиксированный полупрозрачный слой, к низу растворяется — как на
   главной, рулетке и апгрейде. Фон самой доски внутри блока остаётся. */
.pl-page::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/plinko_page_bg.webp") center top / cover no-repeat;
  opacity: .45;
  -webkit-mask: linear-gradient(180deg, #000 45%, transparent 100%); mask: linear-gradient(180deg, #000 45%, transparent 100%);
}

/* Вся панель одним полупрозрачным блоком: внутри секции без своих
   подложек, разделены отступами. */
.pl-panel {
  display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px;
  padding: 14px 14px 16px; border-radius: 16px;
  background: rgba(8, 10, 16, .6);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pl-main  { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Без подложки: секции панели разделены только отступами. */
.pl-card { padding: 4px 2px; }

.pl-lab {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.pl-lab--gap { margin-top: 16px; }
.pl-lab b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }

/* ═══════════════ СТАВКА ═══════════════ */

/* ─────────── ставка деньгами ───────────
   Поле с монетой и MAX, под ним быстрые суммы — тот же вид, что в минере. */
.pl-money {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-3);
}
.pl-money__coin { width: 18px; height: 18px; flex: none; }
.pl-money__coin svg, .pl-money__coin img { display: block; width: 100%; height: 100%; }
.pl-money input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: none; outline: none;
  font: inherit; font-family: var(--f-cond); font-size: 16px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pl-money__max {
  height: 30px; padding: 0 10px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel-2);
  font-family: var(--f-cond); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text-mute);
  transition: color .14s, border-color .14s;
}
.pl-money__max:hover { color: var(--text); border-color: var(--text-mute); }
.pl-qbets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.pl-qbets button {
  height: 34px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel-3);
  font-family: var(--f-cond); font-size: 13px; font-weight: 700; color: var(--text-mute); font-variant-numeric: tabular-nums;
  transition: color .14s, border-color .14s;
}
.pl-qbets button:hover { color: var(--text); border-color: var(--text-mute); }

/* ═══════════════ РИСК ═══════════════ */

.pl-risks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pl-risk {
  height: 38px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel-3);
  font-size: 12px; font-weight: 600; color: var(--text-mute);
  transition: color .14s, border-color .14s, background-color .14s;
}
.pl-risk:hover { color: var(--text); }
.pl-risk.is-on {
  color: #0E1102; border-color: transparent;
  background: linear-gradient(180deg, var(--accent), #A9C400);
}

.pl-note { margin: 10px 0 0; font-size: 12px; color: var(--text-mute); }
.pl-note b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ═══════════════ ПОЛЗУНКИ ═══════════════

   Свои, потому что системный ползунок в тёмной теме приходит светлой
   полосой поперёк панели.

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

.pl-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg,
    var(--accent) 0 var(--fill, 50%), var(--panel-3) var(--fill, 50%) 100%);
  border: 1px solid var(--line);
  outline: none;
}
.pl-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--panel);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}
.pl-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--panel);
  cursor: pointer;
}
.pl-range::-moz-range-progress { height: 6px; border-radius: 3px; background: rgba(215, 255, 0, .45); }

/* ═══════════════ ИТОГИ И КНОПКА ═══════════════ */

.pl-sums {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 6px 2px;
}
.pl-sums span { display: grid; gap: 2px; }
.pl-sums i {
  font-style: normal; font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-mute);
}
.pl-sums b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pl-sums span:last-child { text-align: right; }

.pl-play {
  height: 52px; border-radius: 12px; border: 0;
  background: linear-gradient(180deg, var(--accent), #A9C400);
  color: #0E1102;
  font-family: var(--f-cond), sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px -16px var(--accent);
  transition: transform .12s, filter .14s, opacity .14s;
}
.pl-play:hover:not([disabled]) { transform: translateY(-2px); filter: brightness(1.06); }
.pl-play:active:not([disabled]) { transform: translateY(0); }
.pl-play[disabled] { opacity: .45; cursor: not-allowed; }

.pl-hint { margin: 0; min-height: 16px; font-size: 12px; color: #FF7A7A; }

/* ═══════════════ ДОСКА ═══════════════ */

.pl-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) 60px;
  gap: 12px; align-items: start;
}

.pl-board {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 10px 12px;
  /* Задник — нарисованная сцена (assets/plinko_bg.webp): тёмная арена
     с механикой по бокам и пустым центром, куда ложится пирамида.
     Поверх — прежний свет сверху и лёгкое затемнение к краям, чтобы
     колышки и шарик читались на любом участке картинки. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(215, 255, 0, .05), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 30%, transparent 70%, rgba(0,0,0,.28)),
    url("assets/plinko_bg.webp") center / cover no-repeat,
    var(--panel);
  overflow: hidden;
}
#pl-canvas { display: block; width: 100%; }

/* ---------- ячейки ----------

   Шаг ячеек обязан совпадать с шагом колышков, иначе шарик приходит мимо
   подписи. Поэтому ширина берётся из переменной --u, которую выставляет
   скрипт при перекладке доски, а зазор между ячейками сделан прозрачной
   рамкой ВНУТРИ ширины: настоящий gap увеличил бы шаг и сдвинул бы все
   ячейки, кроме центральной. */
.pl-cells {
  position: relative;
  display: flex; justify-content: center;
  margin-top: 4px;
}
.pl-cell {
  box-sizing: border-box;
  flex: 0 0 var(--u, 40px); width: var(--u, 40px);
  border: 0 solid transparent; border-left-width: 2px; border-right-width: 2px;
  background-clip: padding-box;
  height: calc(var(--u, 40px) * .62);
  min-height: 20px;
  border-radius: 7px;
  font-family: var(--f-cond), sans-serif;
  font-size: clamp(8px, calc(var(--u, 40px) * .3), 15px);
  font-weight: 700;
  color: #0D0F04;
  background-color: hsl(calc(var(--heat, .5) * 132deg) 86% 54%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .1s;
}
.pl-cell.is-hit { animation: pl-hit .34s ease-out; }
@keyframes pl-hit {
  0%   { transform: translateY(0); filter: brightness(1); }
  22%  { transform: translateY(7px); filter: brightness(2); }
  100% { transform: translateY(0); filter: brightness(1); }
}

/* Выплата всплывает НАД ячейкой, а не в ней: цифра в ячейке — множитель, и
   подменять её деньгами нельзя, следующий шарик летит уже туда же. */
.pl-pop {
  position: absolute; bottom: 100%; transform: translate(-50%, 0);
  font-family: var(--f-cond), sans-serif;
  font-size: 15px; font-weight: 700; white-space: nowrap;
  color: #FF7A7A; text-shadow: 0 2px 8px rgba(0,0,0,.8);
  pointer-events: none;
  animation: pl-pop 1.1s ease-out forwards;
}
.pl-pop.is-win { color: var(--accent); }
@keyframes pl-pop {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  18%  { opacity: 1; transform: translate(-50%, -6px); }
  100% { opacity: 0; transform: translate(-50%, -44px); }
}

/* ---------- история ---------- */

.pl-hist { display: flex; flex-direction: column; gap: 5px; }
.pl-hist__i {
  display: grid; place-items: center;
  height: 30px; border-radius: 7px;
  font-family: var(--f-cond), sans-serif; font-size: 12px; font-weight: 700;
  color: #0D0F04;
  background: hsl(calc(var(--heat, .5) * 132deg) 86% 54%);
  animation: pl-slide .28s ease-out;
}
@keyframes pl-slide { from { opacity: 0; transform: translateY(-8px); } }

/* ═══════════════ ЛЕНТА ═══════════════ */

.pl-feed {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.pl-feed__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
}
.pl-feed__bar h2 {
  margin: 0; font-family: var(--f-cond), sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.pl-fchips { display: flex; gap: 6px; }
.pl-fchip {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-3);
  font-size: 12px; font-weight: 600; color: var(--text-mute);
  transition: color .14s, border-color .14s;
}
.pl-fchip:hover { color: var(--text); }
.pl-fchip.is-on { color: var(--accent); border-color: var(--accent); }
.pl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.pl-feed__head, .pl-fr {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px 76px 108px;
  align-items: center; gap: 8px;
  padding: 0 14px;
}
.pl-feed__head {
  height: 30px;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute);
  border-block: 1px solid var(--line);
}
.pl-feed__head span:not(:first-child), .pl-fr > span:not(:first-child) { text-align: right; }

.pl-feed__list { max-height: 300px; overflow-y: auto; }
.pl-fr {
  height: 42px;
  font-size: 13px; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line);
  animation: pl-slide .3s ease-out;
}
.pl-fr.is-me { background: rgba(215, 255, 0, .05); }
.pl-fr__who { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.pl-fr__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-fr__ava {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--panel-3); border: 1px solid var(--line);
  font-size: 10px; font-style: normal; color: var(--text-mute);
  text-transform: uppercase;
}
.pl-fr__bet { color: var(--text-mute); }
.pl-fr__mult {
  justify-self: end;
  padding: 3px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700; color: #0D0F04;
  background: hsl(calc(var(--heat, .5) * 132deg) 86% 54%);
}
.pl-fr__win { color: var(--text-mute); }
.pl-fr__win.is-win { color: var(--accent); font-weight: 600; }
.pl-feed__empty { margin: 0; padding: 26px 14px; text-align: center; font-size: 13px; color: var(--text-mute); }

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

@media (max-width: 1080px) {
  /* Панель уходит наверх целиком. Разрезать её на «часть сверху, часть
     сбоку» нельзя: порядок полей и есть порядок решений. */
  .pl-page { grid-template-columns: minmax(0, 1fr); }
  .pl-panel { position: static; }
}

@media (max-width: 900px) {
  /* История ложится строкой над доской: столбик шириной в 60 пикселей
     отъедает у доски заметную долю ширины, а вместе с ней и шаг колышков. */
  .pl-stage { grid-template-columns: minmax(0, 1fr); }
  .pl-hist {
    flex-direction: row; overflow-x: auto;
    scrollbar-width: none; order: -1;
  }
  .pl-hist::-webkit-scrollbar { display: none; }
  .pl-hist__i { flex: none; padding: 0 10px; }
}

@media (max-width: 760px) {
  /* ---------- ячейки на телефоне ----------
     Пирамида здесь во всю ширину доски (plinko.main.js, layout: шаг по
     горизонтали свой), и ячейка — 19–40px вместо прежних 18. Зазор между
     ячейками — 2px (по пикселю рамки), а не 4: на семнадцати ячейках
     лишние два пикселя с каждой — это ещё одна ячейка ширины.

     Размер шрифта и длину подписи подбирает скрипт (fitCells) и кладёт в
     --fs: не мельче 11px, сокращая подпись («0.67», «.67»), если полная
     не лезет. Без переменной (скрипт не успел) — 11px. Крайней подписи,
     что не влезает и так («920» в 19px), скрипт не мельчит шрифт, а
     поджимает её по ширине — в .pl-cell__t (scaleX и поля в его же
     style), высота цифр остаётся 11px.

     Кнопка — со своими полями из браузера (у iOS и Chrome они разные), и
     в ячейку шириной 20px они съедали бы всю подпись: обнуляем. */
  .pl-cells .pl-cell {
    padding: 0;
    border-left-width: 1px; border-right-width: 1px;
    height: clamp(22px, calc(var(--u, 40px) * .6), 26px); min-height: 0;
    border-radius: 6px;
    font-size: var(--fs, 11px); line-height: 1;
    white-space: nowrap; overflow: hidden;
  }
  .pl-cells .pl-cell__t { display: inline-block; transform-origin: 50% 50%; }

  /* ---------- история на телефоне ----------
     Строкой над доской она появлялась после первого же шарика и
     сдвигала вниз и доску, и «Играть» на 42px — ровно то, чего эта
     страница обещает не делать (см. шапку). Теперь это столбик из пяти
     последних исходов в левом верхнем углу самой доски: там пусто при
     любом числе рядов — пирамида начинается точкой посередине и к
     пятому плитке столбика ещё не доходит до левого края. Места по
     высоте история больше не занимает вовсе. */
  .pl-stage { position: relative; gap: 0; }
  /* И сверху поуже: на айфоне (390×664 видимой области) с прежними 18px
     край «Играть» уходил под нижнюю панель вкладок. */
  .pl-page { padding-top: 10px; }
  /* Доска — во всю ширину страницы, всегда. mobile.css делает страницу
     колонкой, а align-items: start (отсюда же, для сетки на десктопе)
     ужимал колонку по содержимому. Ширину холста layout() берёт у самого
     холста, и она тянулась от прошлой раскладки: телефон повернули
     боком — доска осталась в 336px рядом с панелью в 700. */
  .pl-page > .pl-main, .pl-page > .pl-panel { align-self: stretch; }
  .pl-hist {
    position: absolute; z-index: 2; top: 8px; left: 8px;
    flex-direction: column; gap: 4px;
    width: 40px; max-height: 126px; overflow: hidden;
    pointer-events: none;
  }
  .pl-hist__i { height: 22px; padding: 0; border-radius: 6px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-hist__i, .pl-cell.is-hit { animation: none; }
}

@media (max-width: 560px) {
  .pl-feed__head, .pl-fr { grid-template-columns: minmax(0, 1fr) 66px 92px; }
  /* Из четырёх колонок остаются три: ставка уезжает первой — она у своей
     строки и так известна, а у чужой ничего не решает. */
  .pl-feed__head span:nth-child(2), .pl-fr__bet { display: none; }
}

/* ≤760: итоги стоят в левой половине рядом с «Играть» (mobile.css) —
   одна колонка строк «подпись … сумма», а не две колонки: в две не
   влезала «Всего» и наезжала на кнопку (360px, крупные ставки и на 390).

   Сумма не выходит за свою колонку ни при какой длине. Ставку в поле
   можно вписать любую (потолок проверяет только play()), а «Всего» —
   это ставка × до десяти шариков, так что длина ничем не ограничена:
   — подпись и сумма — строка с переносом: не влезла сумма рядом с
     подписью — уходит под неё целиком, к правому краю. Блок тогда
     выше, но «Играть» не сдвигается: она в той же строке сетки и
     стоит от её верха;
   — сумма длиннее всей колонки (такую ставку play() всё равно не
     примет) обрезается многоточием, но за колонку не выходит;
   — поля, зазор и разрядка подписей поуже: 500,000 / 5,000,000 стоят
     одной строкой и на 360px.
   Селекторы через .pl-panel >: mobile.css грузится позже и задаёт
   .pl-sums тем же весом, а его height: 50px не дал бы блоку вырасти. */
@media (max-width: 760px) {
  .pl-panel > .pl-sums {
    grid-template-columns: minmax(0, 1fr); min-width: 0;
    height: auto; min-height: 50px; padding: 4px 2px 4px 6px;
    overflow: hidden;
  }
  .pl-panel > .pl-sums > span { flex-wrap: wrap; column-gap: 6px; row-gap: 0; min-width: 0; }
  .pl-panel > .pl-sums > span > i { flex: none; letter-spacing: .04em; }
  .pl-panel > .pl-sums b {
    margin-left: auto; min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px;
  }
}

/* ≤400: поле ставки. mobile.css ставит в одну строку поле (монета,
   сумма, MAX) и три быстрые суммы, и на узком экране самой сумме почти
   не оставалось места: на 360px поле было 42px, и максимальная ставка
   500000 читалась как «50000», а на 320px — 2px, ставки не видно вовсе.
   Строку не переносим (лишние 44px по высоте увели бы «Играть» под
   панель вкладок), а ужимаем то, что вокруг суммы: поля и зазоры,
   монету, MAX и кнопки быстрых сумм (по ширине своей подписи, а не по
   самой широкой). Сумма в поле — 102px на 360, 132 на 390: влезают
   и 500000, и 499999.99, и 499,999.99. Шрифт поля не трогаем: меньше
   16px — iOS увеличивает страницу при фокусе.
   Селекторы с .gm-body .pl-panel >: mobile.css грузится позже. */
@media (max-width: 400px) {
  .gm-body .pl-panel > .pl-card:has(.pl-money) { column-gap: 6px; }
  .gm-body .pl-panel > .pl-card:has(.pl-money) .pl-money { gap: 6px; padding: 0 4px 0 8px; }
  .gm-body .pl-panel > .pl-card:has(.pl-money) .pl-money__coin { width: 16px; height: 16px; }
  .gm-body .pl-panel > .pl-card:has(.pl-money) .pl-money__max { padding: 0 6px; }
  .gm-body .pl-panel > .pl-card:has(.pl-money) .pl-qbets { grid-template-columns: repeat(3, auto); gap: 3px; }
  .gm-body .pl-panel > .pl-card:has(.pl-money) .pl-qbets button { min-width: 36px; padding: 0 4px; }
}
/* ≤340 (320px): и этого мало — монету в поле прячем, сумме 84px. */
@media (max-width: 340px) {
  .gm-body .pl-panel > .pl-card:has(.pl-money) .pl-money__coin { display: none; }
}

/* ═══════════════ ТЕМА САЙТА ═══════════════
   Как у апгрейда, HiLo, «1 Клика» и рулетки: индиго-стол с «лампой»
   сверху, сеткой и редкими искрами, заголовок по центру на линиях,
   лаймовая главная кнопка, Oswald на цифрах, Inter на тексте.

   Стол — сама .pl-page. Панель лежит прямо на столе, без своей подложки
   (карточка в карточке только дробила бы его), доска — в утопленном
   «колодце»: там своя спокойная подсветка над вершиной пирамиды.

   Всё выше — раскладка и телефонные подгонки, они остаются как были;
   здесь только вид. Общие файлы не правим: где mobile.css (он грузится
   позже) надо перебить, вес поднят префиксом .gm-body.pl-body. */

.pl-body { background-color: #1A1430; }

/* Токены — на .pl-page: ближайший предок выигрывает у :root без
   !important, и шапка сайта над игрой остаётся своей. */
.pl-page {
  --pl-s2: #2C2452; --pl-s3: #372E62; --pl-deep: #150F2B;
  --pl-glass: linear-gradient(180deg, #2C2452 0%, #241D45 100%);
  --pl-well:  linear-gradient(180deg, #150F2B 0%, #1B1436 100%);
  --pl-line: #3A3166; --pl-line2: #4C4182;
  --pl-hl: inset 0 1px 0 rgba(255, 255, 255, .07);
  --pl-lime: #D7FF00;
  --text: #F5F3FF; --text-dim: #BDB7DE; --text-mute: #A69FCF;
  --line: var(--pl-line); --panel: #231C44; --panel-2: var(--pl-s2); --panel-3: var(--pl-deep);
  --accent: var(--pl-lime);

  position: relative; isolation: isolate;
  max-width: none;
  /* стол не шире 1440 и не ближе --pad-x к краю экрана */
  margin: 12px max(var(--pad-x, 20px), calc((100% - 1440px) / 2)) 48px;
  padding: 22px;
  gap: 22px;
  border: 1px solid var(--pl-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);
}
/* Прежний фон страницы (plinko_page_bg.webp) снят, как у апгрейда:
   картинка по краям спорила со столом. Слой занят сеткой 44 px, она
   гаснет к краям — плоскость не выглядит пустой заливкой. */
.pl-page::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: 1;
  background:
    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: radial-gradient(64% 70% at 50% 40%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
          mask: radial-gradient(64% 70% at 50% 40%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
}
/* редкие искры — один слой, мерцает только прозрачностью */
.pl-page::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(1.6px 1.6px at 6% 20%, rgba(215, 255, 0, .8), transparent),
    radial-gradient(1.2px 1.2px at 12% 62%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1.8px 1.8px at 18% 90%, rgba(166, 120, 255, .8), transparent),
    radial-gradient(1.4px 1.4px at 40% 3%, rgba(166, 120, 255, .85), transparent),
    radial-gradient(1.2px 1.2px at 78% 98%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.7px 1.7px at 96% 12%, rgba(215, 255, 0, .7), transparent),
    radial-gradient(1.3px 1.3px at 99% 70%, rgba(166, 120, 255, .7), transparent);
  animation: pl-twinkle 5s ease-in-out infinite alternate;
}
@keyframes pl-twinkle { from { opacity: .45; } to { opacity: 1; } }

/* ── заголовок раздела ──
   На линиях, как у апгрейда и HiLo. Полосу ставит drophub.gamebar.js перед
   <main>, поэтому перекраска здесь. Подпись «Шарик по пирамиде» убрана:
   под заголовком сразу стол, и он объясняет сам. */
.pl-body .kz-gbar { max-width: 1480px; padding: 10px var(--pad-x, 20px) 0; justify-content: center; gap: 12px; }
.pl-body .kz-gbar::before, .pl-body .kz-gbar::after { content: ''; flex: 1; height: 1px; min-width: 24px; }
.pl-body .kz-gbar::before { margin-right: 6px; background: linear-gradient(90deg, transparent, rgba(166, 120, 255, .35)); }
.pl-body .kz-gbar::after  { margin-left: 6px;  background: linear-gradient(270deg, transparent, rgba(166, 120, 255, .35)); }
.pl-body .kz-gbar .kz-gico { width: 30px; height: 30px; flex: none; }
.pl-body .kz-gbar__txt { display: block; flex: none; }
.pl-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); }
.pl-body .kz-gbar__txt i { display: none; }

/* ── панель ── прямо на столе, без подложки и размытия */
.gm-body.pl-body .pl-panel {
  gap: 16px; padding: 0;
  background: none; box-shadow: none; border: 0; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.pl-body .pl-card { padding: 0; }
.pl-body .pl-lab {
  font-family: var(--f-cond), sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em;
  color: var(--text-dim); margin-bottom: 8px;
}
.pl-body .pl-lab b { font-family: var(--f-cond), sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .02em; color: var(--text); }
.pl-body .pl-lab--gap { margin-top: 16px; }

/* поле суммы — утопленный «колодец», как ввод у HiLo и «1 Клика» */
.pl-body .pl-money {
  height: 46px; border-radius: 12px;
  border: 1px solid var(--pl-line); background: var(--pl-deep);
  box-shadow: inset 0 2px 8px rgba(6, 2, 20, .5);
  transition: border-color .14s, box-shadow .14s;
}
.pl-body .pl-money:focus-within { border-color: var(--pl-line2); box-shadow: inset 0 2px 8px rgba(6, 2, 20, .5), 0 0 0 3px rgba(215, 255, 0, .12); }
.pl-body .pl-money input { font-size: 18px; }
.pl-body .pl-money__max {
  height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--pl-line2); background: var(--pl-s2);
  font-size: 12px; color: var(--pl-lime);
  transition: background-color .14s, border-color .14s;
}
/* быстрые суммы — стеклянные чипы */
.pl-body .pl-qbets button {
  border-radius: 10px;
  border: 1px solid var(--pl-line); background: var(--pl-glass); box-shadow: var(--pl-hl);
  font-weight: 600; color: var(--text-dim);
  transition: color .14s, border-color .14s, transform .12s;
}
.pl-body .pl-qbets button:active { transform: scale(.96); }

/* риск — три стеклянные кнопки; включённая — индиго-заливка с чистой
   лаймовой рамкой, как активная сумма в рулетке и апгрейде */
.pl-body .pl-risk {
  height: 40px; border-radius: 10px;
  border: 1px solid var(--pl-line); background: var(--pl-glass); box-shadow: var(--pl-hl);
  font-size: 13px; font-weight: 600; color: var(--text-dim);
}
.pl-body .pl-risk.is-on {
  color: var(--pl-lime); border-color: rgba(215, 255, 0, .7);
  background: linear-gradient(180deg, #2E2658 0%, #241D45 100%);
}
.pl-body .pl-note { margin-top: 9px; color: var(--text-mute); }
.pl-body .pl-note b { font-family: var(--f-cond), sans-serif; font-size: 13px; font-weight: 600; }

@media (hover: hover) {
  .pl-body .pl-money__max:hover { background: var(--pl-s3); border-color: rgba(215, 255, 0, .45); color: var(--pl-lime); }
  .pl-body .pl-qbets button:hover, .pl-body .pl-risk:not(.is-on):hover { color: var(--text); border-color: var(--pl-line2); }
}

/* ползунки: дорожка — тёмный жёлоб, пройденная часть лаймом. Сам элемент
   выше дорожки (22 px против 6): по прозрачной рамке сверху и снизу
   палец попадает в ползунок, а не мимо. Скругление рамки 11/11 даёт
   жёлобу скруглённые концы и после обрезки фона по рамке. */
.pl-body .pl-range {
  height: 22px; box-sizing: border-box;
  border: solid transparent; border-width: 8px 0; border-radius: 11px;
  background: linear-gradient(90deg, var(--pl-lime) 0 var(--fill, 50%), #120D26 var(--fill, 50%) 100%) padding-box;
}
.pl-body .pl-range::-webkit-slider-thumb {
  width: 20px; height: 20px;
  border: 4px solid #2A2250; box-shadow: 0 0 0 1px rgba(215, 255, 0, .9), 0 2px 6px rgba(6, 2, 20, .5);
}
.pl-body .pl-range::-moz-range-thumb { width: 12px; height: 12px; border: 4px solid #2A2250; }
.pl-body .pl-range::-moz-range-progress { background: var(--pl-lime); }
.pl-body .pl-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--pl-lime), 0 0 0 4px rgba(215, 255, 0, .25); }

/* итоги — «колодец», как сумма ставки в «1 Клике» */
.gm-body.pl-body .pl-panel > .pl-sums {
  padding: 10px 14px; border-radius: 14px;
  background: var(--pl-well);
  box-shadow: inset 0 2px 6px rgba(6, 2, 20, .45), 0 1px 0 rgba(255, 255, 255, .05);
}
.pl-body .pl-sums i { font-family: var(--f-cond), sans-serif; font-weight: 600; letter-spacing: .12em; color: var(--text-mute); }
.pl-body .pl-sums b { font-family: var(--f-cond), sans-serif; font-size: 19px; font-weight: 700; color: var(--text); }

/* главная кнопка — лаймовая, как «Открыть» в «1 Клике»; гостю вместо
   неё — вход тем же видом */
.pl-body .pl-play, .pl-body .pl-login {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; border: 0; border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, #EEFF7A 0%, var(--pl-lime) 46%, #B4E200 100%); color: #10150A;
  box-shadow: 0 14px 32px -10px rgba(215, 255, 0, .45), 0 0 0 1px rgba(215, 255, 0, .55),
              inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(70, 100, 0, .3);
  font-family: var(--f-cond), sans-serif; font-size: 19px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  transition: filter .14s, transform .14s;
}
.pl-body .pl-play:hover:not([disabled]), .pl-body .pl-login:hover { transform: none; filter: brightness(1.05); }
.pl-body .pl-play:active:not([disabled]), .pl-body .pl-login:active { transform: translateY(1px) scale(.995); }
.pl-body .pl-play:focus-visible, .pl-body .pl-login:focus-visible { outline: 2px solid var(--pl-lime); outline-offset: 3px; }
.pl-body .pl-play[disabled] { opacity: 1; cursor: not-allowed; filter: saturate(.45) brightness(.7); box-shadow: none; }
.pl-body .pl-login i { font-style: normal; }
.pl-body .pl-login svg { flex: none; }

/* гость: «Играть» нет, есть вход и строка о нём. Класс dh-user ставит
   drophub.auth.js по ответу сервера. */
.pl-body .pl-panel > .pl-login, .pl-body .pl-panel > .pl-guest { display: none; }
html:not(.dh-user) .pl-body .pl-panel > .pl-play { display: none; }
html:not(.dh-user) .pl-body .pl-panel > .pl-login { display: flex; }
html:not(.dh-user) .pl-body .pl-panel > .pl-guest { display: block; }
.pl-guest { margin: -6px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-mute); text-align: center; }

.pl-body .pl-hint { color: #FF8FA3; }
.pl-body .pl-hint:empty { display: none; }
/* хеш длинный (64 знака) — обрезаем многоточием в своей строке, иначе
   строка вылезала за панель */

/* ── доска ──
   Утопленный колодец вместо нарисованной арены: тёмное индиго, свет над
   вершиной пирамиды и слабый отсвет под корзинами — фон не плоский, но
   колышки и шарик читаются на любом его участке. */
.pl-body .pl-board {
  padding: 14px 14px 16px;
  border: 1px solid var(--pl-line); border-radius: 22px;
  /* фото арены возвращено по просьбе владельца («ну фотку то в плинко
     оставь»): под индиго-вуалью и светом сверху, чтобы колышки и шарик
     читались. Фото вписано по ширине доски, а не cover: картинка 2:1,
     доска ~3:2, и cover срезал персонажей по бокам пополам. Под фото —
     тот же снимок, продлённый вниз тёмным полом (plinko_bg_v2.webp, 4:3),
     и цвет пола: на любой высоте доски шва нет. */
  background:
    radial-gradient(42% 36% at 50% 0%, rgba(150, 100, 255, .22), transparent 75%),
    linear-gradient(180deg, rgba(23, 17, 47, .5) 0%, rgba(26, 20, 54, .28) 45%, rgba(21, 15, 43, .62) 100%),
    url("assets/plinko_bg_v2.webp") center top / 100% auto no-repeat,
    #08060C;
  box-shadow: inset 0 2px 14px rgba(6, 2, 20, .55), 0 1px 0 rgba(255, 255, 255, .05);
}

/* Корзины. Цвет — по-прежнему из множителя (--heat из plinko.view.js), но
   шкала теперь — разряды скинов CS2: синий → фиолет → розовый → красный →
   золото. Меньше ставки — холодные и приглушённые, ставка ×1 — малиновый,
   дальше теплее и ярче, край доски — золото. Тёмный текст — только на
   золоте, где белый не читается. */
.pl-body .pl-cell, .pl-body .pl-hist__i {
  background-color: hsl(calc(222deg + var(--heat, .5) * 183deg) calc(36% + var(--heat, .5) * 56%) calc(42% + var(--heat, .5) * 14%));
  color: hsl(250 40% clamp(8%, calc((.9 - var(--heat, .5)) * 10000%), 98%));
}
.pl-body .pl-cell {
  border-radius: 8px; cursor: default;
  box-shadow: inset 0 -3px 0 rgba(10, 4, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.pl-body .pl-pop { color: #FF8FA3; text-shadow: 0 2px 8px rgba(10, 4, 30, .9); }
.pl-body .pl-pop.is-win { color: var(--pl-lime); }

/* ── история ──
   Столбиком в правом верхнем углу доски: пирамида начинается точкой
   посередине, и угол пуст при любом числе рядов. Столбик больше не
   отнимает у доски 72 px ширины. Видно восемь последних, старшие
   приглушены; пока бросков не было — три пустых гнезда. На телефоне
   столбик слева (правило ≤760 выше), здесь его не трогаем. */
@media (min-width: 761px) {
  .pl-body .pl-stage { display: block; position: relative; }
  .pl-body .pl-hist {
    position: absolute; z-index: 2; top: 14px; right: 14px; order: 0;
    flex-direction: column; gap: 5px; width: 64px; max-height: 300px;
    overflow: hidden; pointer-events: none;
  }
  .pl-body .pl-hist::before {
    content: 'Исходы'; margin-bottom: 2px; text-align: center;
    font-family: var(--f-cond), sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-mute);
  }
  .pl-body .pl-hist:empty::after {
    content: ''; height: 94px;
    background:
      linear-gradient(rgba(166, 120, 255, .10), rgba(166, 120, 255, .10)) 0 0 / 100% 28px no-repeat,
      linear-gradient(rgba(166, 120, 255, .07), rgba(166, 120, 255, .07)) 0 33px / 100% 28px no-repeat,
      linear-gradient(rgba(166, 120, 255, .04), rgba(166, 120, 255, .04)) 0 66px / 100% 28px no-repeat;
    border-radius: 8px;
  }
  .pl-body .pl-hist__i {
    flex: none; height: 28px; padding: 0; border-radius: 8px; font-size: 13px;
    box-shadow: inset 0 -2px 0 rgba(10, 4, 30, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
  }
  .pl-body .pl-hist__i:nth-child(n+5) { opacity: .7; }
}

/* ── телефон ──
   Стол остаётся, но тоньше: поля 6 px, скругление 20 — каждый пиксель
   ширины здесь — шаг колышков, а каждый пиксель высоты отодвигает
   «Играть» к панели вкладок. Панель — сетка из mobile.css (риск,
   ползунки, ставка, потом итоги и «Играть» в одной строке). */
@media (max-width: 760px) {
  .pl-body .pl-page { margin: 6px var(--pad-x, 12px) 28px; padding: 6px; border-radius: 20px; }
  .pl-body .pl-board { padding: 6px 6px 8px; border-radius: 16px; }
  .gm-body.pl-body .pl-panel { padding: 0 6px 6px; }
  .gm-body.pl-body .pl-panel > .pl-card { border-bottom-color: rgba(166, 120, 255, .14); }
  .pl-body .pl-card { padding: 10px 0; }
  .pl-body .pl-lab { margin-bottom: 6px; font-size: 11px; }
  .pl-body .pl-card:has(.pl-risks) .pl-lab, .pl-body .pl-card:has(.pl-range) .pl-lab, .pl-body .pl-card:has(.pl-money) .pl-lab { margin: 0; }
  .pl-body .pl-lab b { font-size: 15px; }
  .pl-body .pl-money { height: 40px; }
  .pl-body .pl-money input { font-size: 16px; }
  .pl-body .pl-money__max { height: 30px; }
  .pl-body .pl-qbets button { height: 40px; }
  .pl-body .pl-risk { height: 38px; font-size: 12px; }
  .pl-body .pl-range::-webkit-slider-thumb { width: 22px; height: 22px; }
  .gm-body.pl-body .pl-panel > .pl-sums { padding: 4px 8px; border-radius: 12px; }
  .pl-body .pl-sums b { font-size: 13px; }
  .pl-body .pl-play, .pl-body .pl-login { height: 50px; font-size: 17px; letter-spacing: .1em; border-radius: 14px; }
  .pl-panel > .pl-login { order: 5; margin-top: 10px; gap: 8px; }
  .pl-panel > .pl-guest { order: 6; grid-column: 1 / -1; margin: 8px 0 0; }
  .pl-body .pl-login i { display: none; }
  .pl-body .pl-hist__i { box-shadow: inset 0 -2px 0 rgba(10, 4, 30, .3); }
  .pl-body .kz-gbar__txt b { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-page::after { animation: none; }
  .pl-body .pl-play, .pl-body .pl-login, .pl-body .pl-qbets button { transition: none; }
}

/* ═══ ВЫБРАННОЕ И ВКЛЮЧЁННОЕ — ГРАДИЕНТ ЛОГОТИПА ═══
   Статичный градиент кислотный → розовый через светлый тон (напрямую
   смесь рыжеет), как ⚡/🛒 в «1 Клике» (oneclick.css). Стоит в конце
   файла: те же селекторы выше рисовали лаймовую рамку. */
.pl-risk.is-on, .pl-body .pl-risk.is-on {
  color: #F4FFD6;
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, #2A2158 0%, #1C1540 100%) padding-box, linear-gradient(135deg, #D7FF00 0%, #F0FFC8 45%, #FFD6F7 55%, #F535F0 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), -4px -4px 14px rgba(215, 255, 0, .16), 4px 4px 14px rgba(245, 53, 240, .2);
}