/* skins/plinko.css - CSS-модуль скина plinko (Gravity Gates, assets/plinko/v1/DESIGN.md).
   Хром общий с luckyway (skins/luckyway*.css под обоими скинами); здесь только поле:
   штырьки и ворота вместо кейсов. Ворота - те же кнопки .lw-cell, их кейс скрыт.
   Позиции клеток и штырьков - инлайн из plinkoMarkup.js (пиксели поля). */

:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-board { display: block; }

:root[data-skin="plinko"] .pk-pegs { position: absolute; inset: 0; pointer-events: none; }
/* Штырёк - бусина макета 2026-11 (GravityPegMaterial 'bead'): блик сверху слева, тень снизу, тонкий обод. */
:root[data-skin="plinko"] .pk-peg {
    position: absolute; width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle 10px at 35% 25%, var(--lw-pegLight) 0, var(--lw-pegAccent) 40%, var(--lw-pegDeep) 100%);
    box-shadow: 1px 4px 6px var(--lw-pegShadow), inset 0 0 0 .55px var(--lw-pegRim);
}
/* Удар: бусина отскакивает по нормали удара (--pk-nx/--pk-ny ставит PlinkoBall) и пульсирует. */
:root[data-skin="plinko"] .pk-peg.is-hit { animation: pk-peg-hit 380ms linear; }

/* Ворота: зона клика 76x44, плашка 84x14 макета по центру линии ворот (board.gateLift 34), K над плашкой. */
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell { position: absolute; width: 76px; height: 44px; border-radius: 7px; }
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-case-body,
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-case-cavity,
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-case-lid,
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-case-aura,
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-case-reject-body,
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-cell-selected { display: none; }
/* Ворота без коэффициента (K-table не даёт K): ни плашки, ни прочерка, клик невозможен. */
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell[data-no-k] { visibility: hidden; pointer-events: none; }
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-cell-face { position: absolute; inset: 0; background: none; box-shadow: none; }
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-cell-surface {
    position: absolute; left: -4px; right: -4px; top: 27px; height: 14px; border-radius: 7px;
    background: var(--lw-gateNeutralFill); box-shadow: var(--lw-gateNeutralGlow);
    transition: background var(--lw-gateHoverDuration), box-shadow var(--lw-gateHoverDuration);
}
/* Блик (specular): узкая светлая полоса проходит по плашке раз в период. Задержка от --pk-sx
   (позиция ворот на поле, plinkoMarkup): свет идёт по полю волной. Только transform - слой композитора. */
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-cell-surface { overflow: hidden; }
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-cell-surface::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; border-radius: 0;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.34) 50%, transparent);
    transform: translateX(-120%); animation: pk-gate-spec 6s calc(var(--pk-sx, 0) * 1.4s) ease-in-out infinite;
}
@keyframes pk-gate-spec { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(320%); } }
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-cell-surface::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--lw-gateGlint); box-shadow: none; opacity: 1;
}
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-coef { top: 12.5px; height: 18px; line-height: 18px; font-size: 18px; font-weight: 550; color: var(--lw-gateInk); text-shadow: none; }
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-cell-own { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); font-size: 14px; line-height: 1; color: var(--lw-gateAmountInk); white-space: nowrap; background: none; padding: 0; }
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-case-reject { position: absolute; left: 50%; top: 2px; width: 14px; height: 14px; transform: translateX(-50%); }

:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell.is-selected .lw-cell-surface { background: var(--lw-gatePinkFill); box-shadow: var(--lw-gatePinkGlow); }
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell.is-selected .lw-coef { color: var(--lw-gateSelectedInk); }
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell.is-hit .lw-cell-surface { background: var(--lw-gatePassedFill); box-shadow: var(--lw-gatePassedGlow); }
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell.is-hit .lw-coef { color: var(--lw-gatePassedInk); opacity: var(--lw-gatePassedOpacity); }
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell.is-hit-win .lw-cell-surface { background: var(--lw-gateGreenFill); box-shadow: var(--lw-gateGreenGlow); }
:root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell.is-hit-win .lw-coef { color: var(--lw-gateWinInk); opacity: 1; }

@media (hover: hover) and (pointer: fine) {
    :root[data-skin="plinko"] .luckyway-host.lw-v4:not(.lw-closed) .lw-cell .lw-cell-face { transition: scale var(--lw-gateHoverDuration) ease-out; }
    :root[data-skin="plinko"] .luckyway-host.lw-v4:not(.lw-closed) .lw-cell:hover:not(:disabled) .lw-cell-face { scale: var(--lw-gateHoverScale); }
}

/* Импульс отскока pulse(p) = sin(pi p)(1 - p): сдвиг 3.8px по нормали, рост 9%. */
@keyframes pk-peg-hit {
    0% { transform: none; }
    15% { transform: translate(calc(var(--pk-nx, 0) * 1.56px), calc(var(--pk-ny, 0) * 1.56px)) scale(1.037); }
    30% { transform: translate(calc(var(--pk-nx, 0) * 2.17px), calc(var(--pk-ny, 0) * 2.17px)) scale(1.051); }
    50% { transform: translate(calc(var(--pk-nx, 0) * 1.9px), calc(var(--pk-ny, 0) * 1.9px)) scale(1.045); }
    70% { transform: translate(calc(var(--pk-nx, 0) * .91px), calc(var(--pk-ny, 0) * .91px)) scale(1.022); }
    100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-skin="plinko"] .pk-peg.is-hit { animation: none; }
    :root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-cell-surface::before { animation: none; opacity: 0; }
    :root[data-skin="plinko"] .luckyway-host.lw-v4 .lw-cell .lw-cell-face { transition: none; }
}


/* Фон-туннель (plinkoTunnel.js): холст под полем, клики проходят насквозь. */
:root[data-skin="plinko"] .lw-stage > .pk-tunnel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* Таймер на высоте макета: широкий ПК 121px (controlsTop), узкий ПК 84px (timerTop). */
:root[data-skin="plinko"] .lw-v2:not(.lw-mobile) .lw-progress { top: 121px; }
:root[data-skin="plinko"] .lw-v2.lw-compact-desktop:not(.lw-mobile) .lw-progress { top: 84px; }
/* LIVE WINS: горизонт перспективы - центр поля макета (GravityGatesPanel: F.y + board.height/2 - controlsTop). */
:root[data-skin="plinko"] .lw-v2:not(.lw-compact-desktop) .lw-wins { --lw-wins-horizon: 352px; }
/* Логотип макета: 220x33, верх 27px (gravity-ball.css --gb-logo*). */
:root[data-skin="plinko"] .luckyway-host.lw-v4:not(.lw-mobile) :is(.lw-logo-area, .lw-logo) { width: 220px; height: 33px; }
:root[data-skin="plinko"] .luckyway-host.lw-v4:not(.lw-mobile) .lw-logo-area { top: 27px; }
/* Узкий ПК по макету (gravity-gates-winnings.css gg-compact-desktop): ставка под полем по центру,
   таймер 730px по центру сцены (round-head центрирован по сцене). */
:root[data-skin="plinko"] .lw-v2.lw-compact-desktop:not(.lw-mobile) .lw-progress { left: calc(50% - 365px); right: calc(50% - 365px); }
:root[data-skin="plinko"] .luckyway-host.lw-compact-desktop:not(.lw-mobile) .lw-controls { left: 50%; top: var(--lw-fixedControlsTop, 742px); width: var(--lw-v2-controlsWidth); height: 82px; transform: translateX(-50%); }
:root[data-skin="plinko"] .luckyway-host.lw-compact-desktop:not(.lw-mobile) .lw-control-stack { top: 4px; left: 4px; width: calc(100% - 8px); }
:root[data-skin="plinko"] .luckyway-host.lw-compact-desktop:not(.lw-mobile) .lw-stake-main { height: 38px; flex-basis: 38px; }
:root[data-skin="plinko"] .luckyway-host.lw-compact-desktop:not(.lw-mobile) :is(.lw-presets, .lw-presets button) { height: 32px; }
/* Мобильный таймер макета: верх 104px, по ширине полосы поля (--lw-fixedBar* из LuckywayView). */
:root[data-skin="plinko"] .lw-v2.lw-mobile .lw-progress { top: 104px; left: var(--lw-fixedBarLeft); right: auto; width: var(--lw-fixedBarWidth); }
/* Мобильный логотип 168x25.2 на 44px и коэффициент 22px - как в макете. */
:root[data-skin="plinko"] .luckyway-host.lw-v2.lw-mobile .lw-logo-area { left: calc(50% - 84px); top: 44px; width: 168px; height: 25.2px; }
:root[data-skin="plinko"] .luckyway-host.lw-v2.lw-mobile .lw-logo-mobile { width: 168px; height: 25.2px; }
:root[data-skin="plinko"] .luckyway-host.lw-v4.lw-mobile .lw-cell .lw-coef { font-size: 22px; }