/* ==========================================================================
   Game Center — Сделка: 10 чемоданов, банкир вскрывает чужие партиями
   ========================================================================== */

/* Обёртка нужна ТОЛЬКО чтобы повесить .marquee-frame (бегущие лампочки,
   см. slot.css) вокруг сетки чемоданов — сама #dl-grid остаётся
   неизменной по id/классу, за который цепляется deal.js. */
.dl-grid-frame {
  position: relative;
  border-radius: var(--radius);
  padding: 7px;
  margin: 6px 0 4px;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.035), transparent 65%);
  /* Лёгкая перспектива для «раскрытия крышки» чемоданов в объёме. */
  perspective: 640px;
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 0;
}

.deal-case {
  --case-glow: var(--gold);

  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke);
  /* Объёмная металлическая обивка: тёмный кожаный корпус + верхний блик,
     будто свет падает сверху на выпуклую крышку кейса. */
  background: linear-gradient(165deg, rgba(88, 60, 16, 0.6) 0%, rgba(61, 42, 10, 0.55) 45%, rgba(20, 12, 4, 0.72) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -8px 14px rgba(0, 0, 0, 0.5),
    inset 0 0 14px rgba(0, 0, 0, 0.35), 0 5px 10px -6px rgba(0, 0, 0, 0.7);
  cursor: default;
  transform-style: preserve-3d;
  transition: transform 0.15s var(--ease-back), border-color 0.25s, box-shadow 0.25s,
    filter 0.25s, opacity 0.25s;
}

/* Металлические уголки-заклёпки + диагональный блеск обивки — общий для
   ЛЮБОГО состояния чемодана (закрыт/открыт/свой), поэтому на ::after
   (::before занят звёздочкой «свой» ниже, конфликтовать не должны). */
.deal-case::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    /* 4 заклёпки по углам */
    radial-gradient(circle 2.4px at 11% 13%, rgba(255, 230, 170, 0.9), rgba(70, 45, 10, 0.9) 60%, transparent 62%),
    radial-gradient(circle 2.4px at 89% 13%, rgba(255, 230, 170, 0.9), rgba(70, 45, 10, 0.9) 60%, transparent 62%),
    radial-gradient(circle 2.4px at 11% 87%, rgba(255, 230, 170, 0.9), rgba(70, 45, 10, 0.9) 60%, transparent 62%),
    radial-gradient(circle 2.4px at 89% 87%, rgba(255, 230, 170, 0.9), rgba(70, 45, 10, 0.9) 60%, transparent 62%),
    /* диагональный блик обивки */
    linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, transparent 22%, transparent 78%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.deal-case__inner {
  position: relative;
  z-index: 1;
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s var(--ease-back);
}

.deal-case__value {
  position: relative;
  z-index: 1;
  font-size: 9.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  min-height: 11px;
}

/* Кликабельно во время выбора своего чемодана */
.deal-case--pickable {
  cursor: pointer;
  animation: deal-idle-glow 2.2s ease-in-out infinite;
}
.deal-case--pickable:active {
  transform: scale(0.9);
}
@keyframes deal-idle-glow {
  50% {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke));
  }
}

/* Твой чемодан — держим отмеченным на протяжении всего раунда */
.deal-case--own {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 22px -6px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -8px 14px rgba(0, 0, 0, 0.5);
}
.deal-case--own::before {
  content: '★';
  position: absolute;
  top: 2px;
  right: 4px;
  z-index: 2;
  font-size: 8px;
  color: var(--accent);
  filter: drop-shadow(0 0 3px var(--accent));
}

/* Вскрытый банкиром чемодан: показываем сумму, гасим карточку — плюс
   «драматичная» откидка крышки (лёгкий 3D-флип с блеском) вместо мгновенной
   смены фильтра, и волна задержек по позиции в сетке ниже, чтобы партия
   вскрывалась не одним кадром, а слева-направо/сверху-вниз. */
.deal-case--open {
  cursor: default;
  animation: deal-case-flip 0.5s var(--ease-back) both;
  filter: grayscale(0.35) brightness(0.85);
}
.deal-case--open .deal-case__value {
  color: var(--case-glow);
}
/* Специфичность (0,3,0) — намеренно выше, чем у [data-tier='4'] (0,2,0)
   ниже: свой чемодан ВСЕГДА получает свой «поп»-реванш вместо тир-глоу
   анимации, даже если в нём оказалась топ-сумма (тир 4). */
.deal-case.deal-case--open.deal-case--own {
  filter: none;
  animation: deal-reveal 0.5s var(--ease-back);
}
@keyframes deal-reveal {
  0% {
    transform: scale(0.5) rotate(-8deg);
  }
  55% {
    transform: scale(1.18) rotate(4deg);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes deal-case-flip {
  0% {
    transform: rotateX(0deg) scale(1);
    filter: grayscale(0) brightness(1.6) saturate(1.3);
  }
  45% {
    transform: rotateX(-24deg) scale(1.08);
    filter: grayscale(0.1) brightness(1.3);
  }
  100% {
    transform: rotateX(0deg) scale(1);
    filter: grayscale(0.35) brightness(0.85);
  }
}
/* Волна вскрытия по позиции в сетке 5×2 — банкир как будто идёт по рядам
   слева направо, а не вспыхивает вся партия одним кадром. Чисто
   декоративная задержка старта уже играющей анимации, порядок реального
   вскрытия по-прежнему решает сервер/JS (см. session.opened). */
.deal-case:nth-child(1) { animation-delay: 0ms; }
.deal-case:nth-child(2) { animation-delay: 45ms; }
.deal-case:nth-child(3) { animation-delay: 90ms; }
.deal-case:nth-child(4) { animation-delay: 135ms; }
.deal-case:nth-child(5) { animation-delay: 180ms; }
.deal-case:nth-child(6) { animation-delay: 45ms; }
.deal-case:nth-child(7) { animation-delay: 90ms; }
.deal-case:nth-child(8) { animation-delay: 135ms; }
.deal-case:nth-child(9) { animation-delay: 180ms; }
.deal-case:nth-child(10) { animation-delay: 225ms; }

/* Свечение по «редкости» вскрытой суммы (data-tier проставляет deal.js по
   game.dealValues — уже полностью честной и заранее известной таблице
   возможных сумм, см. комментарий в deal.js). Тир 0 = пусто/сгорел. */
.deal-case[data-tier='0'] {
  border-color: color-mix(in srgb, var(--red) 45%, var(--stroke));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 35%, transparent),
    0 0 16px -6px var(--red), inset 0 0 14px rgba(0, 0, 0, 0.5);
}
.deal-case[data-tier='2'] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -8px 14px rgba(0, 0, 0, 0.5),
    0 0 12px -5px var(--gold);
}
.deal-case[data-tier='3'] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -8px 14px rgba(0, 0, 0, 0.5),
    0 0 16px -3px var(--gold), 0 0 26px -8px var(--accent);
}
.deal-case[data-tier='4'] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -8px 14px rgba(0, 0, 0, 0.5),
    0 0 20px -2px var(--gold), 0 0 34px -6px var(--accent);
  animation: deal-case-flip 0.5s var(--ease-back) both, deal-jackpot-glow 1.6s ease-in-out 0.5s infinite;
}
@keyframes deal-jackpot-glow {
  50% {
    filter: brightness(1.15) saturate(1.1);
  }
}
.deal-case--bust .deal-case__inner {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 8px rgba(255, 92, 122, 0.6));
}

/* -------------------------- Панель предложения банкира -------------------------- */

.deal-offer {
  margin: 2px auto 0;
  width: 100%;
  max-width: 340px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  background: linear-gradient(180deg, rgba(255, 209, 102, 0.09), rgba(255, 209, 102, 0.02));
  animation: deal-offer-in 0.35s var(--ease-out);
}
@keyframes deal-offer-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.deal-offer__label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}
.deal-offer__amount {
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

/* Кнопка «Забрать» — поверх стандартной .bet-кнопки */
.dl-cashout-btn {
  cursor: pointer;
}
.dl-cashout-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.dl-cashout-btn--ready .bet__amount {
  color: var(--gold);
}