/* =========================================================
   HERO TABLE PREVIEW — Midnight Black (FULL CSS)
   - Только для главной страницы (hero)
   - Прожекторы: 2 овала на карточке + 2 овала вокруг стола
   - Никаких глобальных #players/.seat (чтобы не рвало игровой стол)
========================================================= */

/* ---------- TABLE WRAP + CENTER ---------- */

.table-wrap{
  border-radius:24px;
  background:radial-gradient(circle at top,#18182b,#050509 65%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 0 50px rgba(0,0,0,.90);
  padding:16px;
  padding-bottom:clamp(28px, 6vh, 44px);
  position:relative;
  flex:2;
  min-width:0;

  /* прожекторы на карточке не вылезают наружу */
  overflow:hidden;
}

/* ПРОЖЕКТОРЫ НА КАРТОЧКЕ HERO (2 овальных пятна) */
.table-wrap::before{
  content:"";
  position:absolute;
  inset:-45%;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(ellipse at 18% 32%, rgba(111,122,255,.34), transparent 58%),
    radial-gradient(ellipse at 85% 80%, rgba(74,83,240,0.22), transparent 64%)  /* глубокий индиго MB */
  filter: blur(26px);
  opacity:.95;
  mix-blend-mode: screen;

  animation: heroSpotDrift 9.2s ease-in-out infinite;
}

@keyframes heroSpotDrift{
  0%,100%{ transform: translate(0,0) scale(1); opacity:.70; }
  50%{ transform: translate(34px,-22px) scale(1.08); opacity:.98; }
}

/* контент карточки поверх прожекторов */
.table-wrap > *{ position:relative; z-index:1; }

.table-center{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---------- POKER TABLE (СКИН) ---------- */
/* ВАЖНО: это затрагивает только hero-preview-table */
.poker-table.hero-preview-table{
  width:100%;
  max-width:820px;
  aspect-ratio:2.3/1;
  border-radius:999px;
  position:relative;

  background:
    radial-gradient(circle at 50% -40%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(circle at 50% 130%, rgba(111,122,255,.24), #050509 70%);

  box-shadow:0 0 26px rgba(111,122,255,.60);
  margin:auto;

  /* у тебя было overflow:visible — оставляем */
  overflow:visible;

  /* слой для псевдоэлемента */
  z-index:0;
}

/* ПРОЖЕКТОРЫ ВОКРУГ СТОЛА (2 овала, двигаются) */
.poker-table.hero-preview-table::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:999px;
  pointer-events:none;

  /* НЕ ставим -1 (Safari может “спрятать”) */
  z-index:0;

  background:
    radial-gradient(ellipse at 22% 28%, rgba(111,122,255,.40), transparent 58%),
    radial-gradient(ellipse at 78% 78%, rgba(0,255,195,.22), transparent 62%);

  filter: blur(22px);
  opacity:.95;
  mix-blend-mode: screen;

  animation: tableSpotDrift 6.8s ease-in-out infinite;
}

@keyframes tableSpotDrift{
  0%,100%{ transform: translate(0,0) scale(1); opacity:.75; }
  50%{ transform: translate(-28px,18px) scale(1.06); opacity:.98; }
}

/* контент стола поверх прожекторов */
.poker-table.hero-preview-table > *{ position:relative; z-index:1; }

/* внутренний овал */
.poker-table.hero-preview-table .poker-table-inner{
  position:absolute;
  inset:14%;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.06), transparent 65%),
    radial-gradient(circle at 50% 130%, rgba(111,122,255,.22), #050509 80%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 40px rgba(0,0,0,.90);
}

/* логотип в центре */
.poker-table.hero-preview-table .table-logo{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  font-size:14px;
  letter-spacing:.26em;
  color:rgba(245,245,255,.95);
  text-transform:uppercase;
  pointer-events:none;
  white-space:nowrap;
  z-index:2;
}

.poker-table.hero-preview-table .table-logo span{
  display:block;
  font-size:9px;
  margin-top:3px;
  letter-spacing:.30em;
  color:rgba(192,196,255,.85);
}

/* =========================================================
   HERO: вращающееся неоновое кольцо вокруг стола (MB)
   НИЧЕГО не меняем в визуале стола — только дополнительный слой
========================================================= */

/* кольцо — отдельный слой */
.hero-preview-table.poker-table::after{
  content:"";
  position:absolute;
  inset:-8px;              /* толщина ореола */
  border-radius:999px;
  pointer-events:none;

  /* MB-палитра: без зелёного/малахита, без розового */
  background: conic-gradient(
    from 180deg,
    rgba(111,122,255,0.00),
    rgba(111,122,255,0.28),
    rgba(74,83,240,0.20),
    rgba(168,176,255,0.14),
    rgba(111,122,255,0.00)
  );

  filter: blur(12px);
  opacity: .48;

  /* ВАЖНО: чтобы кольцо было ПОД контентом стола, но видно снаружи */
  z-index: 0;
  animation: heroRingSpin 6.6s linear infinite;
}

/* контент стола всегда выше кольца */
.hero-preview-table.poker-table > *{
  position: relative;
  z-index: 1;
}

@keyframes heroRingSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ---------- POT / BOARD / SIDE POTS (если они вдруг есть в hero) ---------- */
/* Скоупим под hero-preview-table, чтобы не трогать игровой стол */
.poker-table.hero-preview-table #pot{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) translateY(-30px);
  font-size:12px;
  color:rgba(230,230,255,.90);
  text-align:center;
  display:none;
  z-index:3;
}
.poker-table.hero-preview-table #pot span{ font-weight:600; color:#fff; }

.poker-table.hero-preview-table #board{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) translateY(6px);
  display:flex;
  gap:6px;
  z-index:3;
}

.poker-table.hero-preview-table #sidePots{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) translateY(40px);
  font-size:11px;
  color:rgba(200,203,255,.90);
  text-align:center;
  z-index:3;
}

/* ---------- CARDS (если в hero превью есть карты) ---------- */
.poker-table.hero-preview-table .card{
  width:28px;
  height:38px;
  border-radius:6px;
  background:radial-gradient(circle at 0 0,#fff,#e4e4f4);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 10px rgba(0,0,0,.60);
  position:relative;
  overflow:hidden;
}
.poker-table.hero-preview-table .card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.10),transparent 60%);
  mix-blend-mode:multiply;
}
.poker-table.hero-preview-table .card-rank{
  position:absolute;
  left:4px; top:3px;
  font-size:11px;
  font-weight:600;
}
.poker-table.hero-preview-table .card-suit{
  position:absolute;
  right:4px; bottom:3px;
  font-size:9px;
}
.poker-table.hero-preview-table .card.red{ color:#d41245; }
.poker-table.hero-preview-table .card.black{ color:#16162a; }

.poker-table.hero-preview-table .card--highlight{
  /* подсветку рисует table-premium.css (тонкий неон) — розовая рамка была старым артефактом */
  z-index: 2;
}

.poker-table.hero-preview-table .card.card-back{
  background:radial-gradient(circle at 20% 0,#1b1b30,#050509 70%);
  border:1px solid rgba(111,122,255,.80);
  box-shadow:0 0 12px rgba(111,122,255,.85);
}

.poker-table.hero-preview-table .card-back-inner{
  position:absolute;
  inset:3px;
  border-radius:5px;
  border:1px dashed rgba(111,122,255,.60);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  letter-spacing:.16em;
  color:rgba(196,200,255,.95);
  text-transform:uppercase;
}

/* =========================================================
   HERO SEATS — строго внутри hero-preview-table
   (никаких глобальных #players/.seat)
========================================================= */
/*.poker-table.hero-preview-table #players{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
}

/* сиденье 
.poker-table.hero-preview-table #players .seat{
  position:absolute;
  height:32px;
  padding:4px 16px 4px 0px;   
  width:fit-content;          
  border-radius:999px;
  background:rgba(5,5,15,.96);
  border:1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#9a9aad;
  box-shadow:0 0 16px rgba(0,0,0,.85);
  pointer-events:auto;
  transition:.2s;
  backdrop-filter: blur(10px);
}

/* аватар внутри сиденья
.poker-table.hero-preview-table #players .seat-avatar{
  width:30px; height:30px;
  border-radius:50%;
  background:radial-gradient(circle at 0 0, rgba(111,122,255,.45), #050509);
  border:1px solid rgba(255,255,255,.30);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:#f5f5ff;
  flex-shrink:0;
}

/* текст 
.poker-table.hero-preview-table #players .seat-text{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}
.poker-table.hero-preview-table #players .seat-name{
  max-width:90px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.poker-table.hero-preview-table #players .seat-stack{
  font-weight:700;
  color:#fff;
}

/* позиции 
.poker-table.hero-preview-table #players .seat-1{ top:0%;  left:50%; transform:translate(-50%,0); }
.poker-table.hero-preview-table #players .seat-2{ top:24%; right:2%; transform:translate(0,-50%); }
.poker-table.hero-preview-table #players .seat-3{ bottom:24%; right:2%; transform:translate(0,50%); }
.poker-table.hero-preview-table #players .seat-4{ bottom:0%; left:50%; transform:translate(-50%,0); }
.poker-table.hero-preview-table #players .seat-5{ bottom:24%; left:2%; transform:translate(0,50%); }
.poker-table.hero-preview-table #players .seat-6{ top:24%; left:2%; transform:translate(0,-50%); }

.poker-table.hero-preview-table #players .seat.active{
  box-shadow:
    0 0 18px rgba(111,122,255,.70),
    0 0 30px rgba(111,122,255,.40);
  border-color:rgba(111,122,255,.90);
  color:#e5e7ff;
} */

/* dealer slots — если вдруг есть, тоже под hero-preview-table */
.poker-table.hero-preview-table .dealer-slot{
  position:absolute;
  width:20px;
  height:20px;
  pointer-events:none;
  z-index:50;
}

.poker-table.hero-preview-table .dealer-slot-1{ top:7%;  left:65%; transform:translate(-50%,-50%); }
.poker-table.hero-preview-table .dealer-slot-2{ top:42%; right:8%;  transform:translate(50%,-50%); }
.poker-table.hero-preview-table .dealer-slot-3{ bottom:7%; right:25%; transform:translate(50%,50%); }
.poker-table.hero-preview-table .dealer-slot-4{ bottom:7%; left:35%; transform:translate(-50%,50%); }
.poker-table.hero-preview-table .dealer-slot-5{ bottom:42%; left:8%; transform:translate(-50%,50%); }
.poker-table.hero-preview-table .dealer-slot-6{ top:7%;  left:25%; transform:translate(-50%,-50%); }