/* ==========================================================================
   Game Center — Плинко: доска с колышками, шарик, лунки-множители.
   Редизайн 2026-08-14: доска раньше была плоской панелью с точками-колышками
   и прямоугольными карманами — теперь колышки читаются как металлические
   заклёпки с собственной тенью на тёмном лакированном дереве корпуса,
   карманы — как вырезанные в корпусе лунки с внутренней тенью, а шарик при
   быстром движении оставляет короткий смазанный след (см. spawnBallGhost()
   в plinko.js) и высекает искры при попадании в «горячий» карман.
   ========================================================================== */

.plinko-board {
  position: relative;
  width: min(92vw, 400px);
  height: 260px;
  margin: 4px auto 0;
  border-radius: var(--radius);
  /* Тёмный лакированный корпус: тёплый акцентный отсвет сверху + едва
     заметная диагональная штриховка (текстура дерева/шпона) поверх
     глубокого почти-чёрного градиента, вместо плоской заливки var(--panel). */
  background:
    radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 8px),
    linear-gradient(165deg, #1c1424 0%, #100a1a 48%, #08050f 100%);
  border: 1px solid var(--stroke);
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.05),
    inset 0 -20px 30px -22px rgba(0, 0, 0, 0.75),
    0 18px 36px -20px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.pk-pegs,
.pk-buckets {
  position: absolute;
  inset: 0;
}

.pk-ball {
  position: absolute;
  top: 0;
  left: 0;
}

/* Колышек — металлическая заклёпка с бликом сверху-слева и тёмным ободом,
   плюс мягкая тень-эллипс под ней (::after), будто колышек физически
   выступает из доски и отбрасывает тень на дерево за собой. */
.pk-peg {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, #dfe0ea 24%, #93939f 58%, #302c3a 100%);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.6),
    0 2.5px 3px rgba(0, 0, 0, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
}
.pk-peg::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 74%;
  width: 8px;
  height: 2.5px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  filter: blur(1.4px);
  transform: translate(-50%, 0);
}

/* Вспышка удара — colышек, о который только что стукнулся шарик, коротко
   вспыхивает фирменным цветом и «подпрыгивает» — единственная в игре
   мгновенная физическая реакция доски на шарик (раньше колышки были
   абсолютно инертны). Класс навешивается/снимается точечно в plinko.js
   (flashPeg()), чисто декоративно — путь шарика уже определён сервером
   заранее, эта анимация ничего не меняет в исходе. */
.pk-peg--hit {
  animation: pk-peg-hit 0.34s var(--ease-out);
}
@keyframes pk-peg-hit {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  30% {
    transform: translate(-50%, -50%) scale(1.55);
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--accent-2) 45%, var(--accent) 100%);
    box-shadow:
      0 0 12px 3px color-mix(in srgb, var(--accent-2) 65%, transparent),
      0 1px 0 rgba(0, 0, 0, 0.6);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Смазанный «призрак» шарика — короткий след быстрого движения, спавнится
   в plinko.js на каждом прыжке ПЕРЕД тем, как шарик уедет на новую позицию
   (spawnBallGhost()), сам себя убирает через forwards-анимацию + таймер. */
.pk-ball-ghost {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent-2) 55%, var(--accent) 100%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  /* filter:blur СТАТИЧЕН (не в keyframes) — размытие считается ОДИН раз при
     появлении призрака, а не на каждый кадр анимации. Раньше blur менялся
     0px→2.5px прямо в @keyframes — анимированный filter не композитится, а
     ПЕРЕРИСОВЫВАЕТСЯ браузером каждый кадр (пересчёт гаусс-блюра), и с
     новым призраком на каждом ударе о колышек (до ~15 раз за дроп, живут
     0.32с — обычно 1-2 одновременно) это была главная причина жалобы
     "Plinko 1 fps" (2026-08-14, осталась даже после фикса marquee-frame/
     fx-canvas/flashPeg). Анимируются только opacity/transform —
     compositor-friendly, дёшево независимо от количества призраков.
     Визуально почти неотличимо от прежнего (тот же полупрозрачный
     размытый след), просто степень размытия больше не "уезжает" по ходу
     анимации. */
  filter: blur(1.4px);
  animation: pk-ball-ghost-fade 0.32s ease-out forwards;
}
@keyframes pk-ball-ghost-fade {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }
}

.pk-bucket {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 26px;
  padding: 4px 3px;
  border-radius: 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  /* Карман читается как вырезанная в корпусе лунка — тёмная внутренняя
     тень сверху, лёгкий тёплый рант снизу, вместо плоской заливки. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.22));
  box-shadow:
    inset 0 3px 4px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke-soft);
  transition: transform 0.2s var(--ease-back), background 0.2s, color 0.2s, box-shadow 0.2s;
}
.pk-bucket--hot {
  color: #ffe6a8;
  background: linear-gradient(160deg, rgba(255, 61, 129, 0.42), rgba(255, 209, 102, 0.26));
  border-color: rgba(255, 209, 102, 0.45);
  box-shadow:
    inset 0 3px 4px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 230, 168, 0.2),
    0 0 10px -4px rgba(255, 209, 102, 0.7);
}
.pk-bucket--cold {
  color: var(--dim);
  opacity: 0.75;
}
.pk-bucket--landed {
  transform: translate(-50%, -50%) scale(1.28);
  color: #fff;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 0 18px -4px var(--accent);
  z-index: 2;
  animation: pk-bucket-landed-pulse 0.5s ease-in-out 2;
}
@keyframes pk-bucket-landed-pulse {
  0%,
  100% {
    box-shadow: 0 0 18px -4px var(--accent);
  }
  50% {
    box-shadow: 0 0 30px 3px var(--accent);
  }
}

.pk-ball {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent-2) 55%, var(--accent) 100%);
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.55), 0 0 10px -2px var(--accent-2), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: translate(-50%, -50%);
  z-index: 3;
}
.pk-ball--win {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), 0 0 18px 2px var(--gold), 0 0 0 1px rgba(255, 255, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .pk-peg--hit {
    animation: none;
  }
  .pk-ball-ghost {
    display: none;
  }
  .pk-bucket--landed {
    animation: none;
  }
}

/* Переключатель уровня риска использует общий .segmented (styles.css) —
   тот настроен под горизонтальный скролл с "естественной" шириной пунктов
   (нужно для 6+ вкладок профиля/наград) — с 3 пунктами это сжимало кнопки
   в левый угол вместо ровного деления ширины (жалоба 2026-08-14, тот же
   баг, что был у #dc-direction в Дайсе). Переопределяем ТОЛЬКО для
   #pk-risk, не трогая styles.css. */
#pk-risk {
  justify-content: center;
}
#pk-risk .segmented__item {
  flex: 1 1 0;
  text-align: center;
}