/* ═══════════════════════════════════════════════════════════
   «Падающая кирка»: пейзаж, вертикальный барабан, шахта снизу.
   Кубы и кирки — классы из minecraft.css.
   ═══════════════════════════════════════════════════════════ */

.px {
  --cell: 44px;
  --gap: 80px;
  --slot: 52px;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(#3A96DC 0%, #7EC8F4 40%, #C8E8C0 58%, #5AA344 100%);
  color: #fff;
}
.px-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  pointer-events: none;
}
.px-clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.px-clouds i {
  position: absolute;
  display: block;
  background: #fff;
  border-radius: 40px;
  opacity: .78;
  filter: blur(1.2px);
  animation: px-drift linear infinite;
}
.px-clouds i::before,
.px-clouds i::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.px-clouds i:nth-child(1) {
  width: 86px; height: 28px; top: 8%; left: -20%;
  animation-duration: 48s;
}
.px-clouds i:nth-child(1)::before { width: 36px; height: 36px; left: 14px; top: -16px; }
.px-clouds i:nth-child(1)::after { width: 48px; height: 42px; left: 40px; top: -20px; }
.px-clouds i:nth-child(2) {
  width: 110px; height: 32px; top: 16%; left: -30%;
  animation-duration: 64s; animation-delay: -18s; opacity: .62;
}
.px-clouds i:nth-child(2)::before { width: 44px; height: 40px; left: 18px; top: -18px; }
.px-clouds i:nth-child(2)::after { width: 56px; height: 46px; left: 50px; top: -22px; }
.px-clouds i:nth-child(3) {
  width: 70px; height: 22px; top: 11%; left: -15%;
  animation-duration: 38s; animation-delay: -8s; opacity: .7;
}
.px-clouds i:nth-child(3)::before { width: 28px; height: 28px; left: 10px; top: -12px; }
.px-clouds i:nth-child(3)::after { width: 36px; height: 32px; left: 30px; top: -16px; }
.px-clouds i:nth-child(4) {
  width: 94px; height: 26px; top: 22%; left: -25%;
  animation-duration: 56s; animation-delay: -30s; opacity: .55;
}
.px-clouds i:nth-child(4)::before { width: 34px; height: 30px; left: 16px; top: -14px; }
.px-clouds i:nth-child(4)::after { width: 42px; height: 36px; left: 44px; top: -18px; }
@keyframes px-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(150vw); }
}
.px .mc-cube, .px .mc-tool {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.px-top {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-top, 0px) + var(--ui-top-gap, 0px) + 8px) 12px 4px;
  flex: none;
}
.px-top button {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 10px;
  border: 0; border-radius: 16px;
  background: rgba(8, 16, 28, .48);
  color: #fff; font-weight: 700; font-size: 13px;
}
.px-top svg { width: 16px; height: 16px; }

.px-stage {
  position: relative;
  /* Без overflow: шахта в раунде уезжает вверх под кнопку «Назад»,
     а её вытянутый низ закрывает панель ставки (z-index выше). */
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ── Вертикальный барабан: предметы падают сверху вниз ───── */

.px-reel {
  position: relative;
  z-index: 4;
  flex: none;
  width: min(70vw, 210px);
  height: calc(var(--slot) * 3 + 18px);
  margin: 2px auto 0;
}
.px-reel__frame {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    linear-gradient(90deg, #5A3810, #C9A24A 12%, #E8D090 50%, #C9A24A 88%, #5A3810);
  box-shadow:
    0 10px 18px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,240,180,.5);
  padding: 8px 10px;
}
.px-reel__window {
  position: relative;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), transparent 18%, transparent 82%, rgba(0,0,0,.55)),
    radial-gradient(ellipse at 50% 50%, #2A1C10, #0E0A08);
  box-shadow: inset 0 0 0 2px #3A2810, inset 0 8px 12px rgba(0,0,0,.45);
}
.px-reel__window::before,
.px-reel__window::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 28%;
  z-index: 3;
  pointer-events: none;
}
.px-reel__window::before {
  top: 0;
  background: linear-gradient(#0E0A08, transparent);
}
.px-reel__window::after {
  bottom: 0;
  background: linear-gradient(transparent, #0E0A08);
}
.px-reel__strip {
  will-change: transform;
}
.px-reel__slot {
  height: var(--slot);
  display: grid;
  place-items: center;
  position: relative;
}
.px-reel__slot .px-pick,
.px-reel__slot .px-miss {
  width: 42px;
  height: 42px;
}
.px-reel__ptr {
  position: absolute;
  right: -2px;
  top: 50%;
  z-index: 5;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 16px solid #F0C850;
  filter: drop-shadow(-1px 2px 2px rgba(0,0,0,.6));
}
.px-reel__ptr::after {
  content: '';
  position: absolute;
  right: -16px; top: -7px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 11px solid #C45A14;
}

.px-miss {
  display: grid; place-items: center;
  font-size: 22px; font-weight: 900; color: #FF4A4A;
  text-shadow: 0 1px 0 #000;
}

/* Прочность как в Minecraft: чёрная дорожка, цветная полоска, числа */
.px-pick {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.px-pick .mc-tool {
  width: 100%;
  height: 100%;
}
.px-pick__spin {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}
.px-flat {
  display: block;
  width: 100%;
  height: 100%;
}
.px-flat svg,
.px-flat img,
.px-flat .mc-tex {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.px-hp {
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  pointer-events: none;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  text-shadow:
    1px 0 0 #000, -1px 0 0 #000,
    0 1px 0 #000, 0 -1px 0 #000,
    0 2px 4px #000;
}
/* Временное увеличение: полоска над ♥, убывает к концу действия. */
.px-boost {
  position: absolute;
  left: 50%;
  top: -46px;
  width: 64px;
  height: 8px;
  transform: translateX(-50%) scaleY(0);
  border-radius: 5px;
  background: rgba(10, 14, 30, .75);
  box-shadow: 0 0 0 1.5px #000, inset 0 1px 0 rgba(255,255,255,.12);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s, transform .2s;
}
.px-boost.is-on { opacity: 1; transform: translateX(-50%) scaleY(1); }
.px-boost i {
  position: absolute;
  inset: 1px auto 1px 1px;
  width: calc((100% - 2px) * var(--p, 1));
  border-radius: 4px;
  background: linear-gradient(90deg, #3FD8FF, #7CFFB2 60%, #FFE66B);
  box-shadow: 0 0 6px rgba(124, 255, 178, .8);
}
.px-boost i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: px-boost-shine 1.1s linear infinite;
}
.px-boost.is-low i { animation: px-boost-blink .35s steps(2) infinite; }
@keyframes px-boost-shine { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes px-boost-blink { 50% { opacity: .45; } }
.px-hp i {
  /* Сердце фоном, с жёсткими размерами: inline-SVG в iOS иногда
     схлопывался в тонкую полоску или пропадал. */
  display: inline-block;
  width: 18px; min-width: 18px; height: 16px;
  flex: 0 0 18px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%209%208%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M1%200h3v1h1V0h3v1h1v4H8v1H7v1H6v1H3V7H2V6H1V5H0V1h1z%22/%3E%3Cpath%20fill%3D%22%23E2232E%22%20d%3D%22M1%201h2v1h1v1h1V2h1V1h2v4H7v1H6v1H3V6H2V5H1z%22/%3E%3Cpath%20fill%3D%22%23FF6B6B%22%20d%3D%22M2%202h1v1H2z%22/%3E%3Cpath%20fill%3D%22%23A0101A%22%20d%3D%22M6%205h1v1H6zM5%206h1v1H5z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
.px-dur {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
}
.px-dur__track {
  display: block;
  width: 100%;
  height: 4px;
  background: #111;
  box-shadow: 0 0 0 1px #000;
}
.px-dur__track i {
  display: block;
  height: 100%;
  width: calc(var(--p, 1) * 100%);
  background: hsl(var(--h, 120), 85%, 42%);
}
.px-dur b {
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow:
    1px 0 0 #000, -1px 0 0 #000,
    0 1px 0 #000, 0 -1px 0 #000;
}

.px-hud[hidden] { display: none !important; }
.px-hud {
  position: absolute;
  top: 6px; left: 10px; right: 10px;
  z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: 12px; font-weight: 800;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.px-hud b { color: #FFE08A; }
.px-hud__hp { display: none; }

/* ── Шахта: крупный план, камера едет за киркой ── */

.px-shaft {
  position: relative;
  z-index: 3;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-bottom: -2px;
}
.px-cam {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--cell) * var(--cols, 10));
  min-height: 100%;
  will-change: transform;
}
.px-world {
  position: absolute;
  left: 0;
  top: var(--gap, 80px);
  width: calc(var(--cell) * var(--cols, 10));
  height: auto;
  overflow: visible;
  /* Свой слой ниже кирки: на iPhone отдельные блоки всплывали поверх
     кирки и резали сердечко прочности. */
  z-index: 1;
  isolation: isolate;
  transform: translateZ(0);
}
.px-fx {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  overflow: visible;
  z-index: 8;
  pointer-events: none;
}
.px-lift {
  display: none;
}
/* Стены шахты: по неразрушимому блоку с каждого края, вне 10 колонок поля. */
.px-wall {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--cell);
  background: url('../assets/mc/wall.png?v=2') 0 0 / var(--cell) var(--cell) repeat;
  image-rendering: pixelated;
  z-index: 2;
}
.px-wall--l { right: 100%; background-position: right top; }
.px-wall--r { left: 100%; }
.px-mine {
  display: block;
  width: calc(var(--cell) * var(--cols, 10));
  background: transparent;
}
/* Кусок шахты: та же сетка, что была у всей шахты, но своя для каждой
   порции рядов — дорисовка не трогает уже стоящие куски. */
.px-chunk {
  display: grid;
  grid-template-columns: repeat(var(--cols, 10), var(--cell));
  grid-auto-rows: var(--cell);
  width: calc(var(--cell) * var(--cols, 10));
  gap: 0;
  contain: layout style;
}
.px .mc-block.is-gone {
  opacity: 0 !important;
  transform: none !important;
  visibility: hidden;
}
/* Верхняя грань куба торчала в дыру и кирка садилась на блок. */
.px .mc-block.is-top,
.px .px-cell.is-top {
  overflow: hidden;
  z-index: 1;
}
.px .mc-cube__top { display: none; }
.px .mc-block.px-cell,
.px-cell {
  width: calc(var(--cell) + 2px);
  height: calc(var(--cell) + 2px);
  max-width: none;
  aspect-ratio: auto;
  position: relative;
  overflow: hidden;
  /* Клетка фиксированного размера и сама себя обрезает: изоляция
     раскладки — добавление рядов не пересчитывает уже стоящие. */
  contain: layout paint style;
}
/* Вспышка в точке столкновения: на скорости иначе не видно, куда пришлось */
.px-spark {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  z-index: 7;
  pointer-events: none;
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 252, 235, .95) 0%,
      rgba(255, 226, 150, .55) 38%,
      rgba(255, 200, 90, 0) 70%);
  animation: px-spark .22s ease-out forwards;
}
@keyframes px-spark {
  from { opacity: 1;  transform: scale(.6); }
  to   { opacity: 0;  transform: scale(1.35); }
}
.px-cell.is-punched {
  filter: brightness(1.55);
  animation: px-punched .18s ease-out forwards;
}
@keyframes px-punched {
  from { filter: brightness(1.7); }
  to   { filter: brightness(1); }
}
.px-cell.is-top { overflow: hidden; z-index: 1; }
.px-cell .mc-cube { inset: 0; }
.px-drop {
  display: grid; place-items: center;
  width: 100%; height: 100%;
}
.px-drop .mc-tex, .px-drop .mc-tool { width: 78%; height: 78%; }

.px-tool[hidden] { display: none !important; }
.px-tool {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--cell) * var(--sz, 1));
  height: calc(var(--cell) * var(--sz, 1));
  z-index: 10;
  overflow: visible;
  transform: translate3d(var(--tx, 0), var(--ty, 0), 1px);
  pointer-events: none;
  will-change: transform;
}
/* Тень — на самой картинке, а не на рамке: Safari на iPhone обрезает
   фильтрованный слой по его рамке, и наклонённая палка и сердечко над
   киркой срезались. */
.px-tool .px-sprite,
.px-tool .mc-tool {
  filter: drop-shadow(0 3px 0 #000) drop-shadow(0 6px 8px rgba(0,0,0,.45));
}
.px-tool .px-pick,
.px-tool .mc-tool,
.px-tool .px-flat { width: 100%; height: 100%; }
.px-tool .px-pick__spin {
  transform: rotate(var(--rot, 0deg));
  transform-origin: 50% 50%;
}

.px-chip {
  position: absolute;
  width: 7px; height: 7px;
  z-index: 7;
  pointer-events: none;
  border-radius: 0;
  animation: px-chip .36s ease-out forwards;
  image-rendering: pixelated;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .38), inset 1px 1px 0 rgba(255, 255, 255, .18);
}
/* Холст крошки: в слое камеры над блоками и под киркой, как была крошка. */
.px-chipcv {
  position: absolute;
  left: 0; top: 0;
  z-index: 7;
  pointer-events: none;
  will-change: transform;
}
@keyframes px-chip {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); }
}

.px-dock {
  position: relative;
  z-index: 6;
  flex: none;
  background: none;
  border-top: 0;
}
.px-buys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 10px 0;
  /* Подложка того же тёмного камня, что и панель ставки; у выигрыша её нет. */
  /* Цвет фона приложения, как у нижней навигации. */
  background: var(--bg);
  border-top: 1px solid var(--stroke-1, rgba(255,255,255,.06));
}
.px-buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 4px 2px 5px;
  border: 0;
  border-radius: 10px;
  background: #2A1A0C;
  color: #FFE08A;
  font-size: 10px;
  font-weight: 800;
}
.px-buy .mc-tool {
  width: 28px;
  height: 28px;
}
.px-buy span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.px-buy span svg { width: 10px; height: 10px; color: var(--gold, #F5C84C); }
.px-buy:disabled { opacity: .4; }

.px-bar {
  position: relative; z-index: 6;
  display: grid;
  grid-template-columns: 1fr auto auto auto auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 8px 10px calc(var(--safe-bottom, 0px) + 8px);
  /* Панель из тёмного камня, как интерфейс майнкрафта. */
  /* Цвет фона приложения, как у нижней навигации. */
  background: var(--bg);
  border-top: 0;
  flex: none;
}
.px-stat {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #E8D9A8;
}
.px-stat span {
  font-size: 13px; color: #FFE08A;
  display: inline-flex; align-items: center; gap: 3px;
}
.px-stat span svg { width: 12px; height: 12px; color: var(--gold, #F5C84C); }
.px-stat--bet { text-align: right; align-items: flex-end; }
.px-skip {
  width: 38px; height: 38px;
  border: 0; border-radius: 50%;
  background: rgba(20, 22, 34, .85); color: #fff;
  font-size: 16px; font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.px-skip.is-on { background: #F07800; color: #1A1008; }
/* −/+ в тёмных плашках по бокам от круглой кнопки, как в ролике */
.px-adj {
  width: 40px; height: 36px;
  border: 0;
  background: rgba(20, 22, 34, .88); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.px-adj[data-bet="-"] { border-radius: 10px 4px 4px 10px; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%); }
.px-adj[data-bet="+"] { border-radius: 4px 10px 10px 4px; clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%); }
.px-adj svg { width: 18px; height: 18px; }
.px-go {
  width: 70px; height: 70px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #2A2C3A, #121320);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .55);
}
.px-go svg { width: 40px; height: 40px; }
.px-go:disabled { opacity: .45; }

/* ── Взрыв, тряска, подписи ────────────────────────────────── */

.px-boom {
  position: absolute;
  z-index: 8;
  /* Сразу полный размер, растёт масштабом: анимация width/height
     перерисовывала размытую тень на каждом кадре — пролаг при взрыве. */
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  pointer-events: none;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255, 236, 150, .95),
    0 0 24px 10px rgba(255, 150, 40, .55);
  background: radial-gradient(circle, #FFF6D0 0%, #FFC24A 38%, rgba(226, 88, 24, .55) 70%, transparent 72%);
  transform: translate(-50%, -50%) scale(0);
  will-change: transform, opacity;
  animation: px-boom .5s ease-out forwards;
}
@keyframes px-boom {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0); }
  70%  { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* Тряска пласта от взрыва: короткая, чтобы блоки не «плавали» */
.px-mine.is-quake { animation: px-quake .4s ease-out; }
@keyframes px-quake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  15%  { transform: translate3d(-3px, 2px, 0); }
  35%  { transform: translate3d(3px, -2px, 0); }
  55%  { transform: translate3d(-2px, -1px, 0); }
  78%  { transform: translate3d(2px, 1px, 0); }
}

.px-tag {
  position: absolute;
  z-index: 9;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  color: #1A1008;
  background: linear-gradient(#FFE9A6, #F0B429);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .45);
  transform: translate(-50%, -100%);
  pointer-events: none;
  animation: px-tag 1.1s ease-out forwards;
}
.px-tag--boost { background: linear-gradient(#B8FFF6, #35D6C2); }
.px-tag--craft { background: linear-gradient(#FFD9A0, #D98A2B); color: #2A1608; }
.px-tag--pay { background: rgba(20, 16, 10, .55); color: #FFE08A; font-size: 11px; }
@keyframes px-tag {
  0%   { opacity: 0; transform: translate(-50%, -70%) scale(.8); }
  18%  { opacity: 1; transform: translate(-50%, -110%) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}

/* ── Окна: покупка бонуса и итог раунда ───────────────────── */

.px-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 0 18px;
  background: rgba(4, 6, 12, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: px-modal-in .24s var(--ease-out, ease-out) both;
}
.px-modal.is-out { animation: px-modal-out .2s ease both; }
@keyframes px-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes px-modal-out { to { opacity: 0; } }

/* Лучи за карточкой — тот самый «слотовый» блеск */
.px-modal__glow {
  position: absolute;
  width: 150vmax; height: 150vmax;
  background: conic-gradient(
    from 0deg,
    rgba(255, 214, 110, .22) 0 8deg, transparent 8deg 30deg,
    rgba(255, 214, 110, .18) 30deg 38deg, transparent 38deg 60deg,
    rgba(255, 214, 110, .22) 60deg 68deg, transparent 68deg 90deg);
  animation: px-rays 18s linear infinite;
  pointer-events: none;
}
@keyframes px-rays { to { transform: rotate(1turn); } }

.px-modal__card {
  position: relative;
  width: 100%;
  max-width: 320px;
  padding: 26px 20px 18px;
  text-align: center;
  border-radius: 20px;
  background:
    linear-gradient(#3A2410, #180E06) padding-box,
    linear-gradient(#F7E29A, #C9922F 45%, #7A5416) border-box;
  border: 3px solid transparent;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 240, 190, .3);
  animation: px-card-in .34s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes px-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.px-modal__ribbon {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2A1608;
  background: linear-gradient(#FFF0BC, #E8B33C);
  box-shadow: 0 3px 0 #7A5416;
  white-space: nowrap;
}
.px-modal__art {
  display: grid;
  place-items: center;
  height: 76px;
  margin: 6px 0 10px;
}
.px-modal__pick {
  display: block;
  width: 76px; height: 76px;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6));
  animation: px-float 1.8s ease-in-out infinite;
}
@keyframes px-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-7px) rotate(6deg); }
}
.px-modal__star {
  display: grid; place-items: center;
  width: 66px; height: 66px;
  color: #FFD54A;
  filter: drop-shadow(0 0 14px rgba(255, 200, 60, .8));
  animation: px-pulse 1.2s ease-in-out infinite;
}
.px-modal__star svg { width: 100%; height: 100%; }
@keyframes px-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.px-modal__title {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  color: #FFE9A6;
  text-shadow: 0 2px 0 #4A2C0A, 0 0 18px rgba(255, 190, 70, .5);
}
.px-modal--win .px-modal__title { font-size: 34px; }
.px-modal--big .px-modal__title  { color: #FFF0B4; }
.px-modal--mega .px-modal__title { color: #FFE07A; font-size: 38px; }
.px-modal--epic .px-modal__title {
  color: #FFF6CE; font-size: 42px;
  animation: px-shine 1s ease-in-out infinite;
}
@keyframes px-shine {
  0%, 100% { text-shadow: 0 2px 0 #4A2C0A, 0 0 16px rgba(255, 190, 70, .6); }
  50%      { text-shadow: 0 2px 0 #4A2C0A, 0 0 30px rgba(255, 225, 130, 1); }
}
.px-modal__sub {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #E8D9A8;
}
.px-modal__price {
  display: inline-flex; align-items: center; gap: 4px;
  color: #FFE08A;
}
.px-modal__price svg { width: 13px; height: 13px; color: var(--gold, #F5C84C); }
.px-modal__mult {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 220, 130, .14);
  color: #FFE08A;
  font-size: 15px;
}
.px-modal__hint {
  margin-top: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(232, 217, 168, .55);
}

.px-rules p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-dim);
}

/* ── Лаки-блок: супер-прокрут ─────────────────────────────── */
.px-lucky {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 0 12px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(255, 196, 40, .28), rgba(6, 4, 14, .86) 62%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: px-modal-in .28s ease-out both;
}
.px-lucky.is-out { animation: px-modal-out .24s ease both; }
.px-lucky__rays {
  will-change: transform; /* слой на видеокарте: без перерисовки на каждом кадре */
  position: absolute;
  width: 170vmax; height: 170vmax;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 220, 90, .20) 0 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 55%);
          mask: radial-gradient(circle, #000 12%, transparent 55%);
  animation: px-rays 14s linear infinite;
  pointer-events: none;
}
.px-lucky__box {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 18px 0 14px;
  border-radius: 22px;
  text-align: center;
  background:
    linear-gradient(180deg, #3B2208, #160B02) padding-box,
    linear-gradient(135deg, #FFF3B0, #F5B51F 30%, #B96A06 60%, #FFE27A) border-box;
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.7),
              0 0 60px rgba(255, 190, 40, .35), inset 0 1px 0 rgba(255, 240, 190, .35);
  animation: px-lucky-pop .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes px-lucky-pop {
  from { opacity: 0; transform: scale(.6) rotate(-4deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.px-lucky__head { display: grid; justify-items: center; gap: 6px; margin-top: -52px; }
.px-lucky__block {
  width: 76px; height: 76px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 18px rgba(255, 200, 40, .9)) drop-shadow(0 8px 10px rgba(0,0,0,.6));
  animation: px-lucky-bob 1.6s ease-in-out infinite;
}
@keyframes px-lucky-bob {
  0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); }
  50%      { transform: translateY(-8px) rotate(5deg) scale(1.06); }
}
.px-lucky__title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(#FFF7C8, #FFC928 55%, #E27A06);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #5A2D00) drop-shadow(0 0 12px rgba(255, 190, 40, .6));
}
.px-lucky__win {
  position: relative;
  height: 116px;
  margin: 12px 10px 10px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #120A02, #26170A 50%, #120A02);
  box-shadow: inset 0 0 0 2px rgba(255, 200, 80, .25), inset 0 8px 18px rgba(0,0,0,.7);
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.px-lucky__track {
  will-change: transform, filter; /* слой на видеокарте: без перерисовки на каждом кадре */
  display: flex;
  gap: 8px;
  height: 100%;
  padding: 10px 0;
  will-change: transform;
}
.px-lucky__cell {
  flex: none;
  width: 84px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 12px;
  color: #FFF4D6;
  background: linear-gradient(180deg, #4A3016, #2A1A0A);
  box-shadow: inset 0 0 0 2px var(--rim, #8A6326), 0 4px 0 rgba(0,0,0,.45);
  transition: transform .3s, box-shadow .3s;
}
.px-lucky__cell b { font-size: 16px; font-weight: 900; }
.px-lucky__cell small { font-size: 10px; opacity: .75; }
.px-lucky__art { width: 34px; height: 34px; display: grid; place-items: center; }
.px-lucky__art svg { width: 28px; height: 28px; color: #FFD23A; }
.px-lucky__art img { width: 34px; height: 34px; object-fit: contain; }
.px-lucky__emoji { font-size: 28px; line-height: 1; }
.px-lucky__cell--lo  { --rim: #7A6A55; }
.px-lucky__cell--mid { --rim: #3FA9F5; background: linear-gradient(180deg, #16324A, #0B1826); }
.px-lucky__cell--hi  { --rim: #FF5AD2; background: linear-gradient(180deg, #4A1640, #240A20); }
.px-lucky__cell--nft { --rim: #FFD23A; background: linear-gradient(180deg, #5A3A06, #2A1A02); }
.px-lucky__cell.is-win {
  transform: scale(1.1);
  box-shadow: inset 0 0 0 3px #FFE27A, 0 0 24px rgba(255, 210, 60, .9), 0 0 48px rgba(255, 170, 20, .6);
  animation: px-lucky-win .9s ease-in-out infinite alternate;
}
@keyframes px-lucky-win {
  from { filter: brightness(1); }
  to   { filter: brightness(1.35); }
}
.px-lucky__ptr {
  position: absolute;
  left: 50%;
  width: 0; height: 0;
  transform: translateX(-50%);
  border: 10px solid transparent;
  filter: drop-shadow(0 0 6px rgba(255, 210, 60, .9));
  z-index: 2;
}
.px-lucky__ptr--top { top: 0; border-top-color: #FFD23A; }
.px-lucky__ptr--bot { bottom: 0; border-bottom-color: #FFD23A; }
.px-lucky__win::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(transparent, rgba(255, 220, 90, .9), transparent);
}
.px-lucky__result {
  display: grid;
  gap: 2px;
  margin: 2px 0 6px;
  animation: px-card-in .4s cubic-bezier(.2, 1.5, .4, 1) both;
}
.px-lucky__result span { font-size: 12px; color: #FFE6A8; opacity: .85; }
.px-lucky__result b {
  font-size: 28px;
  font-weight: 900;
  color: #FFE27A;
  text-shadow: 0 2px 0 #6A3A00, 0 0 18px rgba(255, 200, 40, .8);
}
.px-lucky__hint { font-size: 11px; color: rgba(255, 240, 210, .55); }

/* Кирка, выпавшая из барабана: барабан пустеет, кирка светится и искрит */
.px-reel__slot.is-dropped .px-pick { opacity: 0; transition: opacity .12s; }
.px-tool.is-glow .px-pick__spin {
  animation: px-drop-glow .9s ease-out forwards;
}
@keyframes px-drop-glow {
  0%   { filter: brightness(2.2) drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #FFF3B0); }
  100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}
.px-twinkle {
  position: absolute;
  width: 7px; height: 7px;
  z-index: 11;
  pointer-events: none;
  background:
    linear-gradient(#fff, #fff) center / 100% 2px no-repeat,
    linear-gradient(#fff, #fff) center / 2px 100% no-repeat;
  filter: drop-shadow(0 0 3px #FFF6C0);
  animation: px-twinkle .5s ease-out forwards;
}
@keyframes px-twinkle {
  0%   { opacity: 1; transform: scale(1.3) rotate(0); }
  100% { opacity: 0; transform: scale(.3) rotate(90deg) translateY(6px); }
}

/* ── Лаки-блок: вступление, эффекты ленты и выигрыша ─────────── */
.px-lucky__intro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
}
.px-lucky__big {
  width: 128px; height: 128px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 24px rgba(255, 210, 60, .95));
  animation: px-lucky-intro 1.15s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes px-lucky-intro {
  0%   { transform: scale(.2) rotate(-30deg); opacity: 0; }
  28%  { transform: scale(1.15) rotate(6deg); opacity: 1; }
  40%  { transform: scale(1.05) rotate(-8deg); }
  52%  { transform: scale(1.12) rotate(8deg); filter: drop-shadow(0 0 34px #FFE27A) brightness(1.3); }
  64%  { transform: scale(1.08) rotate(-10deg); }
  76%  { transform: scale(1.22) rotate(10deg); filter: drop-shadow(0 0 48px #fff) brightness(1.8); }
  88%  { transform: scale(1.4); opacity: 1; filter: brightness(3); }
  100% { transform: scale(1.7); opacity: 0; filter: brightness(4); }
}
.px-lucky__shard {
  will-change: transform; /* слой на видеокарте: без перерисовки на каждом кадре */
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  background: url('../assets/mc/lucky.png') 0 0 / 128px 128px;
  image-rendering: pixelated;
  opacity: 0;
  animation: px-lucky-shard .7s cubic-bezier(.2, .7, .3, 1) .95s forwards;
}
@keyframes px-lucky-shard {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rz)) scale(.4); }
}
.px-lucky__flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(255, 236, 160, .9) 18%, transparent 60%);
  opacity: 0;
  animation: px-lucky-flash .55s ease-out 1s forwards;
}
@keyframes px-lucky-flash {
  0%   { opacity: 0; transform: scale(.4); }
  25%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}
.px-lucky.is-intro .px-lucky__box { visibility: hidden; animation: none; }
.px-lucky.is-open .px-lucky__intro { display: none; }
.px-lucky.is-open .px-lucky__box { visibility: visible; animation: px-lucky-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }

/* Лента: карточка под указателем крупнее, к концу рамка пульсирует */
.px-lucky__cell { transition: transform .12s, box-shadow .12s, filter .12s; }
.px-lucky__cell.is-near { transform: scale(1.07); filter: brightness(1.25); }
.px-lucky__win.is-slow {
  animation: px-lucky-slow .45s ease-in-out infinite alternate;
}
@keyframes px-lucky-slow {
  from { box-shadow: inset 0 0 0 2px rgba(255, 200, 80, .3), inset 0 8px 18px rgba(0,0,0,.7), 0 0 0 rgba(255, 200, 40, 0); }
  to   { box-shadow: inset 0 0 0 2px rgba(255, 220, 110, .9), inset 0 8px 18px rgba(0,0,0,.7), 0 0 22px rgba(255, 200, 40, .7); }
}

/* Выигрыш: волна света, дрожь окна */
/* Переворот убран по просьбе владельца — только свечение и подъём. */
.px-lucky__ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 90px; height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  border: 3px solid rgba(255, 230, 120, .95);
  box-shadow: 0 0 24px rgba(255, 210, 60, .9);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.px-lucky__win.is-won .px-lucky__ring { animation: px-lucky-ring .9s ease-out forwards; }
@keyframes px-lucky-ring {
  0%   { opacity: 1; transform: scale(.4); }
  100% { opacity: 0; transform: scale(3.2); }
}
.px-lucky__box.is-won { animation: px-lucky-shake .45s ease-in-out; }
@keyframes px-lucky-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 2px) rotate(-1deg); }
  40% { transform: translate(5px, -2px) rotate(1deg); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(3px, -1px); }
}
.px-lucky__tier {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 5px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #2A1608;
  background: linear-gradient(#FFF0BC, #E8B33C);
  box-shadow: 0 3px 0 #7A5416, 0 0 20px rgba(255, 200, 40, .8);
  animation: px-lucky-tier .5s cubic-bezier(.2, 1.8, .4, 1) both;
}
.px-lucky__tier--mega {
  color: #fff;
  background: linear-gradient(90deg, #FF4FD8, #FFB43A, #4FE3FF, #9B6BFF, #FF4FD8);
  background-size: 300% 100%;
  box-shadow: 0 3px 0 #5A1A6A, 0 0 26px rgba(255, 90, 220, .9);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
  animation: px-lucky-tier .5s cubic-bezier(.2, 1.8, .4, 1) both, px-lucky-rainbow 2s linear infinite;
}
@keyframes px-lucky-tier {
  from { opacity: 0; transform: translateX(-50%) scale(.3); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes px-lucky-rainbow { to { background-position: 300% 0; } }

/* Спрайт кирки в шахте: пиксели без сглаживания, во всю площадь. */
.px-sprite {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Выигрыш раунда — строкой под кнопками, по центру. */
.px-stat--win { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 7; pointer-events: none;
  align-items: center; flex-direction: column; justify-content: center; gap: 2px; padding: 0 10px 10px; }
.px-stat--win b { font-size: 12px; }
.px-stat--win span { font-size: 24px; color: #FFE08A; }
/* Выигрыш — просто текст поверх шахты, без подложки. */
.px-stat--win { background: none; text-shadow: 0 0 1px #000, 1px 1px 0 #000, -1px 1px 0 #000, 0 2px 4px rgba(0,0,0,.8); color: #fff; }
.px-stat--win span svg { filter: drop-shadow(1px 1px 0 #000); }
.px-stat--win span svg { width: 20px; height: 20px; }
.px-buys[hidden] { display: none !important; }
.px-stat--win[hidden] { display: none !important; }

/* Кнопка ускорения: три стрелки, белых — сколько нажатий. */
.px-skip { display: inline-flex; align-items: center; justify-content: center; gap: 0; font-size: 18px; font-weight: 900; }
.px-skip i { font-style: normal; color: rgba(255,255,255,.28); margin: 0 -2px; transition: color .15s, text-shadow .15s; }
.px-skip[data-lvl="1"] i:nth-child(-n+1),
.px-skip[data-lvl="2"] i:nth-child(-n+2),
.px-skip[data-lvl="3"] i:nth-child(-n+3) { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.7); }
/* Выделенная строка правил: максимум лаки-блока */
.px-rules__hl {
  display: block; margin-top: 6px; padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 196, 60, .22), rgba(255, 120, 60, .14));
  border: 1px solid rgba(255, 210, 90, .55);
  color: #FFE08A; font-weight: 900;
}