/* =========================================================
   table-surface.css — Midnight Black Poker (Table surface)
   - seats avatar+frame as in account-settings
   - safe defaults for anon / no customization
   - win effect (pop + glow)
========================================================= */

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

.table-wrap {
  border-radius:24px;
  background:radial-gradient(circle at top,#18182b,#050509 65%);
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:0 0 50px rgba(0,0,0,0.9);
  padding:12px;
  position:relative;
  flex:2;
  min-width:0;
}

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

/* ---------- POKER TABLE (СКИН) ---------- */

.poker-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,0.16),transparent 60%),
    radial-gradient(circle at 50% 130%,rgba(111,122,255,0.24),#050509 70%);
  box-shadow:0 0 26px rgba(111,122,255,0.6);
  margin:auto;
  overflow:visible; /* важно: не режем внешние глоу */
}

.poker-table-inner {
  position:absolute;
  inset:14%;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,0.06),transparent 65%),
    radial-gradient(circle at 50% 130%,rgba(111,122,255,0.22),#050509 80%);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:inset 0 0 40px rgba(0,0,0,0.9);
}

/* Логотип в центре стола */

.table-logo {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  font-size:14px;
  letter-spacing:0.26em;
  color:rgba(245,245,255,0.95);
  text-transform:uppercase;
  pointer-events:none;
  white-space:nowrap;
  z-index:1;
}

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

/* Пот, борд и сайд-поты */

#pot {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) translateY(-30px);
  font-size:12px;
  color:rgba(230,230,255,0.9);
  text-align:center;
  display:none;
  z-index:2;
}
#pot span { font-weight:600; color:#fff; }

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

#sidePots {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) translateY(40px);
  font-size:11px;
  color:rgba(200,203,255,0.9);
  text-align:center;
  z-index:4;
}

/* ---------- CARDS ---------- */

.card {
  width:28px;
  height:38px;
  border-radius:6px;
  background:radial-gradient(circle at 0 0,#ffffff,#e4e4f4);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 4px 10px rgba(0,0,0,0.6);
  position:relative;
  overflow:hidden;
}

.card::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,0.1),transparent 60%);
  mix-blend-mode:multiply;
}

.card-rank { position:absolute; left:4px; top:3px; font-size:11px; font-weight:600; }
.card-suit { position:absolute; right:4px; bottom:3px; font-size:9px; }

.card.red   { color:#d41245; }
.card.black { color:#16162a; }

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

.card.card-back {
  background: radial-gradient(circle at 20% 0,#1b1b30,#050509 70%);
  border:1px solid rgba(232,197,105,0.55);
  box-shadow:0 0 10px rgba(232,197,105,0.35);
}

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

/* ---------- SEATS (СТУЛЬЯ) ---------- */

:root{
  --seat-height: 38px;

  /* как в account-settings */
  --seat-avatar-size: 46px;  /* чуть больше, чем было */
  --seat-frame-pad: 3px;
  --seat-gap: 8px;

  /* дефолты для неавторизованного/без выбора */
  --seat-default-frame: "frame_neon_lava"; /* если захочешь — поменяешь */
  --seat-default-fg: rgba(255,255,255,.92);
}

#players {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
}

.seat {
  position:absolute;
  height: var(--seat-height);
  padding:4px 10px 4px 0px;
  border-radius:999px;
  background:rgba(5,5,15,0.96);
  border:1px solid rgba(255,255,255,0.14);
  display:flex;
  align-items:center;
  gap: var(--seat-gap);
  font-size:10px;
  color:#9a9aad;
  pointer-events:auto;
  transition:0.2s;
  overflow: visible; /* важно: не режем глоу */
}

/* контейнер под аватар/рамку */
.seat-avatar{
  width: var(--seat-avatar-size);
  height: var(--seat-avatar-size);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  position:relative;
  overflow: visible;
}

/* если table.js забыл дать avatar-frame — визуально всё равно будет аккуратно */
.seat-avatar:not(.avatar-frame){
  background: radial-gradient(circle at 30% 0, rgba(255,255,255,.12), transparent 55%),
              radial-gradient(circle at 0 100%, rgba(232,197,105,.35), #050509 80%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 14px rgba(232,197,105,0.20);
}

/* 🔥 рамка: включается системой frames.css (важно: class avatar-frame + data-frame) */
.seat-avatar.avatar-frame{
  overflow: visible;
  border-radius:999px;
}

/* fallback: если data-frame не поставили — ставим дефолт рамки CSS-ом
   (frames.css читает именно data-frame, поэтому даём его через attribute selector)
*/
.seat-avatar.avatar-frame:not([data-frame]){
  /* не можем реально "поставить" data-frame из CSS, но можем дать лёгкий дефолт-вид */
  box-shadow:
    0 0 14px rgba(232,197,105,0.20),
    0 0 26px rgba(232,197,105,0.10);
  border: 1px solid rgba(246,236,208,0.28);
}

/* внутренний core (как в account-settings) */
.seat-avatar .seat-avatar-core{
  position:absolute;
  inset: var(--seat-frame-pad);
  border-radius:999px;
  overflow:hidden;
  z-index:2;
  background:
    radial-gradient(circle at 30% 0, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(circle at 0 100%, rgba(111,122,255,.45), #050509 80%);
  border:1px solid rgba(255,255,255,.18);
}

/* картинка аватара */
.seat-avatar img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:999px;
  object-fit:cover;
  display:block;
  z-index:2;
}

/* fallback "MB"/emoji если нет img */
.seat-avatar .seat-avatar-fallback{
  position:absolute;
  inset:0;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:.16em;
  color: var(--seat-default-fg);
  user-select:none;
  z-index:1;
}

.seat-text {
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}

.seat-name {
  max-width:82px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.seat-stack { font-weight:600; color:#fff; }

/* расположение стульев */
.seat-1 { top:-8%;  left:50%; transform:translate(-50%,0); }
.seat-2 { top:26%; right:0%; transform:translate(0,-50%); }
.seat-3 { bottom:26%; right:0%; transform:translate(0,50%); }
.seat-4 { bottom:-8%; left:50%; transform:translate(-50%,0); }
.seat-5 { bottom:26%; left:0%; transform:translate(0,50%); }
.seat-6 { top:26%; left:0%; transform:translate(0,-50%); }

.seat.active {
  box-shadow: 0 0 18px rgba(111,122,255,0.7), 0 0 30px rgba(111,122,255,0.4);
  border-color:rgba(111,122,255,0.9);
  color:#e5e7ff;
}

/* ---------- WIN EFFECT (победа игрока) ---------- */
/* Вешаем класс на .seat: seat--win */

.seat--win{
  z-index: 20;
}

.seat--win .seat-avatar{
  animation: seatWinPop 900ms ease-out 1;
  transform: translateZ(0);
}

/* усиливаем сияние рамки ТОЛЬКО во время выигрыша */
.seat--win .seat-avatar.avatar-frame{
  filter: brightness(1.18) saturate(1.15);
}

/* если frames.css рисует glow через ::before/::after — во время win не гасим */
.seat--win .seat-avatar.avatar-frame::before,
.seat--win .seat-avatar.avatar-frame::after{
  opacity: 1 !important;
  filter: saturate(1.25) brightness(1.25);
}

@keyframes seatWinPop{
  0%   { transform: scale(1.00); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1.10); }
}

/* ---------- dealer slots ---------- */

.dealer-slot {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 50;
}

/* P1 */
.dealer-slot-1 { top: 7%; left: 65%; transform: translate(-50%, -50%); }
/* P2 */
.dealer-slot-2 { top: 42%; right: 8%; transform: translate(50%, -50%); }
/* P3 */
.dealer-slot-3 { bottom: 7%; right: 25%; transform: translate(50%, 50%); }
/* P4 */
.dealer-slot-4 { bottom: 7%; left: 35%; transform: translate(-50%, 50%); }
/* P5 */
.dealer-slot-5 { bottom: 42%; left: 8%; transform: translate(-50%, 50%); }
/* P6 */
.dealer-slot-6 { top: 7%; left: 25%; transform: translate(-50%, -50%); }

/* =========================================================
   PATCH: MIRROR RIGHT SEATS (P2, P3)
   Идеальное зеркальное поведение относительно P5 / P6
========================================================= */

/* --- БАЗА: зеркалим флекс --- */
.seat-2,
.seat-3{
  flex-direction: row-reverse;     /* текст слева, аватар справа */

  /* зеркальный паддинг:
     было (для левых): 4px 10px 4px 0
     стало:            4px 0   4px 10px */
  padding: 4px 0px 4px 10px;
}

/* --- ТЕКСТОВЫЙ БЛОК --- */
.seat-2 .seat-text,
.seat-3 .seat-text{
  align-items: flex-end;           /* текст прижат к аватару */
  text-align: right;

  min-width: 0;
  max-width: 92px;                 /* подгони при желании */

  /* ВОЗДУХ МЕЖДУ ТЕКСТОМ И ЛЕВЫМ КРАЕМ ПЛАШКИ */
  padding-left: 8px;
}

/* --- ИМЯ / СТЕК --- */
.seat-2 .seat-name,
.seat-3 .seat-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- АВАТАР: симметрия --- */
.seat-2 .seat-avatar,
.seat-3 .seat-avatar{
  margin-left: 0;
  margin-right: 0;
}