/* ==========================================================================
   Game Center — рулетка: колесо, стол ставок, фишки
   ========================================================================== */

.roulette {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  padding: 6px 2px 0;
  --accent: #e63946;
  --accent-2: #2ee6a6;
}

/* ---------------------------------- Колесо ---------------------------------- */

.roulette__top {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Забирает весь остаток высоты, свободный после стола ставок и панели
     (оба теперь по контенту, не растягиваются) — колесо максимально
     крупное, насколько позволяет экран. */
  flex: 1 1 auto;
  min-height: 0;
}

.roulette__wheel-wrap {
  position: relative;
  isolation: isolate;
  /* height:100% забирает всю высоту .roulette__top (см. выше), 92vw не даёт
     стать шире экрана на низких-но-широких окнах, 460px — потолок на
     десктопе. aspect-ratio держит колесо квадратным. */
  height: min(100%, 92vw, 460px);
  width: auto;
  aspect-ratio: 1;
}
/* Деревянная чаша, в которую «вставлено» колесо — тёплый лакированный
   бортик позади обода, как в настоящем рулеточном столе. Рисуется чуть
   шире самого колеса (inset отрицательный) и лежит позади него по
   z-index, поэтому не мешает клику/анимации. */
.roulette__wheel-wrap::before {
  content: '';
  position: absolute;
  inset: -7%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.2), transparent 46%),
    conic-gradient(from 0deg, #5a3a1e, #7a5228, #4a2f16, #6b4423, #3a2410, #7a5228, #5a3a1e);
  box-shadow:
    0 20px 46px -18px rgba(0, 0, 0, 0.9),
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    inset 0 3px 6px rgba(255, 255, 255, 0.14),
    inset 0 -10px 22px rgba(0, 0, 0, 0.55);
}
/* Стеклянный блик поверх обода колеса — усиливает ощущение выпуклого металла */
.roulette__wheel-wrap::after {
  content: '';
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.32), transparent 45%);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 4;
}

.roulette__wheel {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  will-change: transform;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.6));
  transition: filter 0.35s ease;
}
/* Лёгкое размытие во время вращения — читается как реальная скорость
   колеса. Переключается классом из animateWheel() в roulette.js. Это
   transition, не @keyframes — под prefers-reduced-motion он попадает под
   общий transition-duration:0.01ms и просто не проигрывается. */
.roulette__wheel--spin {
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.6)) blur(0.7px);
}

.roulette__svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Указатель — гранёный золотой клин из двух наложенных треугольников
   (тёмное золото снизу + светлый блик сверху), а не плоская заливка
   --accent-2 — читается как настоящая металлическая деталь стола. */
.roulette__pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 27px solid var(--gold-deep);
  z-index: 3;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 60%, transparent));
}
.roulette__pointer::before {
  content: '';
  position: absolute;
  top: -27px;
  left: -12px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 19px solid var(--gold-light);
  opacity: 0.9;
}

/* Шарик: крутится по ободу колеса (JS задаёт rotate()+translateY()) и
   падает в лунку выигрышного числа — см. animateBall() в roulette.js. */
.roulette__ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 17px;
  margin: -8.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #e8e2d0 55%, #9c9484 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.65), 0 0 8px rgba(255, 255, 255, 0.65),
    0 0 0 2px rgba(255, 255, 255, 0.15);
  z-index: 5;
  will-change: transform;
  transition: filter 0.35s ease;
}
/* Размытие шарика во время полёта по ободу — переключается классом из
   animateBall() в roulette.js, снимается в момент приземления. */
.roulette__ball--spin {
  filter: blur(0.5px);
}
.roulette__ball--landed {
  animation: rl-ball-glow 0.5s ease-out;
}
@keyframes rl-ball-glow {
  0% {
    filter: drop-shadow(0 0 7px #fff);
  }
  100% {
    filter: none;
  }
}

.roulette__result {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(22px, 8vw, 32px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
  z-index: 2;
}
.roulette__result--red {
  background: radial-gradient(circle at 35% 30%, #ff5c5c, #c1121f 55%, #7a0d15 88%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.28);
  animation: rl-pop 0.45s var(--ease-back);
}
.roulette__result--black {
  background: radial-gradient(circle at 35% 30%, #3a3550, #14121c 55%, #060509 88%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.16);
  animation: rl-pop 0.45s var(--ease-back);
}
.roulette__result--green {
  background: radial-gradient(circle at 35% 30%, #4fd873, #2ea043 55%, #175c27 88%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.28);
  animation: rl-pop 0.45s var(--ease-back);
}
@keyframes rl-pop {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* --------------------------------- Стол ставок -------------------------------- */

/* Игровое поле — зелёное сукно с тонкой текстурой и золотым кантом,
   как на настоящем рулеточном столе */
.roulette__board {
  position: relative;
  isolation: isolate;
  /* Не растягиваемся на весь остаток высоты — иначе под сеткой чисел
     остаётся пустое сукно. Размер — по контенту, лишнюю высоту отдаём колесу. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
    radial-gradient(ellipse at 50% 110%, rgba(0, 0, 0, 0.55), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #0c4028, #072a1a 60%, #051e13);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* Примечание: .roulette__board — единственный скроллящийся блок вёрстки
   (overflow-y:auto — на низких экранах сетка чисел + внешние ставки не
   помещаются), поэтому НЕ вешаем сюда бегущий ::before/::after (marquee-
   frame, деревянный борт с отрицательным inset) — оба приёма зависят от
   контента, «вылезающего» за рамку псевдоэлементом, а overflow-y:auto
   обрежет его и по X тоже (известная особенность CSS: смешанный overflow-x
   visible/overflow-y auto считается auto по обеим осям). Тот же
   декоративный язык — на .roulette__wheel-wrap (без overflow) и
   .roulette__panel (без overflow) ниже. */

.rl-grid {
  display: flex;
  gap: 4px;
  align-items: stretch;
}

.rl-numbers {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
}

/* Ячейки чисел — лёгкий градиент + внутренняя тень, чтобы читались как
   инкрустированные в сукно, а не плоские цветные прямоугольники */
.rl-cell {
  position: relative;
  min-height: 38px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -3px 6px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s var(--ease-back), box-shadow 0.2s;
}
/* Глянцевый блик по диагонали — та же «инкрустация в лак», что и у
   .pcard в cards.css, чтобы ячейки читались как эмалевые жетоны, а не
   плоская заливка. */
.rl-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 45%);
  pointer-events: none;
}
.rl-cell:active { transform: scale(0.9); }
.rl-cell--red { background: linear-gradient(160deg, #e5303f, #a10f1c); }
.rl-cell--black { background: linear-gradient(160deg, #2b2738, #0c0a14); }
.rl-cell--green,
.rl-cell--zero { background: linear-gradient(160deg, #3fc363, #1b7532); }
.rl-cell--zero {
  width: 32px;
  border-radius: 6px;
  font-size: 14px;
}

.rl-outside {
  display: flex;
  gap: 4px;
}

.rl-out-btn {
  position: relative;
  flex: 1;
  padding: 11px 3px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(160deg, var(--panel-strong), var(--panel));
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s var(--ease-back), background 0.2s;
}
.rl-out-btn:active { transform: scale(0.94); }
.rl-out-btn--red { background: linear-gradient(160deg, rgba(229, 48, 63, 0.62), rgba(161, 15, 28, 0.55)); }
.rl-out-btn--black { background: linear-gradient(160deg, rgba(43, 39, 56, 0.85), rgba(10, 8, 16, 0.85)); }

/* Поле, на котором стоит ставка */
.rl-has-bet {
  box-shadow: 0 0 0 2px var(--gold), 0 0 12px -2px var(--gold);
  z-index: 1;
}

/* Бейдж ставки — приподнятая фишка с окантовкой, а не плоская пилюля */
.rl-chip-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  min-width: 21px;
  height: 21px;
  padding: 0 4px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fff2c4, var(--gold) 55%, #b8862c 100%);
  color: #241a05;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 21px;
  text-align: center;
  box-shadow:
    0 0 0 2px #241a05,
    0 0 0 3px rgba(255, 255, 255, 0.35),
    0 3px 7px rgba(0, 0, 0, 0.55);
  z-index: 2;
}

/* --------------------------------- Панель ставок -------------------------------- */

/* Панель ставок — стеклянная приборная консоль под столом (то же
   panel/panel-strong стекло, что и в остальном интерфейсе) с тонкой
   золотой окантовкой и бегущими лампочками marquee-frame по периметру —
   визуально «закрывает» композицию колесо → стол → консоль. */
.roulette__panel {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 12px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--stroke));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px -20px rgba(0, 0, 0, 0.8);
}

.roulette__chips {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Кнопки выбора фишки — имитация настоящей казино-фишки: рифлёный край
   (сегменты через conic-gradient + exclude-mask, как у .spin-btn::before в
   slot.css) + «стопка» из едва заметных нижних теней вместо плоской пилюли. */
.chip-btn {
  position: relative;
  min-width: 52px;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  background: linear-gradient(160deg, var(--panel-strong), var(--panel));
  border: 1px solid var(--stroke);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 2px 0 rgba(0, 0, 0, 0.3),
    0 4px 1px -1px rgba(255, 255, 255, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.14s var(--ease-back), background 0.2s, box-shadow 0.2s;
}
.chip-btn::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.4) 0deg 7deg, transparent 7deg 22.5deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  opacity: 0.55;
  pointer-events: none;
}
.chip-btn:active { transform: scale(0.92) translateY(1px); }
.chip-btn--active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #0a0413;
  box-shadow:
    0 6px 18px -8px var(--accent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 2px 0 rgba(0, 0, 0, 0.3),
    0 4px 1px -1px rgba(255, 255, 255, 0.15);
}
.chip-btn--active::before {
  background: repeating-conic-gradient(rgba(0, 0, 0, 0.32) 0deg 7deg, transparent 7deg 22.5deg);
  opacity: 0.7;
}

.roulette__actions {
  display: flex;
  gap: 8px;
}

.roulette__btn {
  position: relative;
  flex: 1;
  padding: 13px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  background: linear-gradient(180deg, var(--panel-strong), var(--panel));
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s var(--ease-back), background 0.2s, box-shadow 0.2s;
}
.roulette__btn:active { transform: scale(0.95); }
.roulette__btn--primary {
  flex: 2;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #0a0413;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.18),
    0 10px 26px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
/* Тот же золотой металлический ободок, что у .cardtable__action--primary
   в cards.css — единый визуальный язык «премиальной кнопки» по всему
   каталогу. */
.roulette__btn--primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  padding: 2px;
  background: conic-gradient(
    from 200deg,
    var(--gold-light) 0deg, var(--gold) 90deg, var(--gold-deep) 180deg,
    var(--gold) 270deg, var(--gold-light) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.85;
  pointer-events: none;
}
.roulette__btn:disabled {
  opacity: 0.4;
  box-shadow: none;
}

.roulette__total {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}