/* BJPVP — основной стиль (этап B: вынесен из index.html ДОСЛОВНО, v7.110.26).
   Дизайн-система «MIDNIGHT FELT». Каскад: main.css → mobile-shell.css (порядок линков!). */
/* ═══════════════════════════════════════════════════════════════════
 ДИЗАЙН-СИСТЕМА «MIDNIGHT FELT» · PvP Blackjack v6
 Премиум-казино: изумрудный фетр, латунь, палисандр, обсидиан
 ═══════════════════════════════════════════════════════════════════ */
:root{
  /* Палитра */
  --bg-deep:#070a0e;
  --bg-1:#0d1218;
  --bg-2:#141b24;
  --panel:#1a232f;
  --panel-2:#22303f;
  --line:rgba(255,255,255,.08);

  --felt-1:#0d6b3a;
  --felt-2:#0a4f2a;
  --felt-3:#063a1d;
  --felt-edge:#042312;

  --wood-1:#7a4520;
  --wood-2:#5a2f12;
  --wood-3:#3b1e09;

  --brass-1:#e8c873;
  --brass-2:#d4af37;
  --brass-3:#a07a1a;

  --ink:#f4ecdc;
  --ink-dim:#a8b3c2;
  --ink-mute:#6f7a8a;

  --suit-red:#c8102e;
  --suit-blk:#14181d;

  --win:#2dd4a7;
  --win-2:#10b981;
  --lose:#ef4444;
  --lose-2:#b91c1c;
  --warn:#f59e0b;
  --info:#60a5fa;
  --epic:#a855f7;

  /* Тени */
  --shd-card:0 6px 20px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4);
  --shd-deep:0 12px 36px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
  --shd-glow-brass:0 0 32px rgba(212,175,55,.35);
  --shd-glow-win:0 0 24px rgba(45,212,167,.45);

  /* Радиусы */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px;

  /* Шрифты */
  --f-display:'Cinzel',Georgia,serif;
  --f-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono','SF Mono',Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{
  background:var(--bg-deep);
  color:var(--ink);
  font-family:var(--f-ui);
  /* v7.47.0: радикальный «без полос прокрутки» — body фиксирован под viewport,
     никаких scrollbar'ов на странице. Контент адаптивен через flex/grid. */
  height:100vh;
  max-height:100vh;
  width:100vw;
  max-width:100vw;
  overflow:hidden;
  margin:0;
  padding:0;
  font-size:14px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* v7.47.0: скрыть scrollbar'ы ВЕЗДЕ (но wheel/touch-scroll внутри fixed-секций
   остаётся работать — иначе контент с overflow:auto будет недоступен).
   Это глобальное правило не убирает функциональность, только убирает визуал. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none;width:0;height:0}

/* Глобальный фон: радиальные «прожекторы» + лёгкий шум */
body::before{
  content:'';
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212,175,55,.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 100%, rgba(13,107,58,.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(168,85,247,.06), transparent 60%);
}
body::after{
  content:'';
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 2px, rgba(255,255,255,.04) 2px 3px),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size:auto, 3px 3px;
}

/* Контейнер экранов */
/* v7.47.0: жёстко вписываем в 100vh, никакого outer-scroll. Inner-секции
   используют flex:1 + min-height:0 + overflow:auto (визуально без scrollbar). */
.screen{display:none;flex-direction:column;align-items:center;justify-content:center;height:100vh;max-height:100vh;padding:18px;gap:16px;position:relative;z-index:1;overflow:hidden;box-sizing:border-box}
.screen.active{display:flex}
/* Атомарный показ: экран проявляется единым блоком (ТОЛЬКО opacity — без transform,
   иначе сломается containing-block для position:fixed элементов игрового стола). */
@keyframes screenReveal{from{opacity:0}to{opacity:1}}
.screen.active{animation:screenReveal .16s ease-out both}
@media (prefers-reduced-motion: reduce){.screen.active{animation:none}}
/* Веаль-кавер на время сборки экрана (лобби): пока контент дозагружается, он скрыт
   под кавером; по готовности кавер гаснет → всё появляется разом. Создаётся из JS
   (не в HTML) — поэтому сбой JS не оставит приложение под глухим кавером на старте. */
#app-cover{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 35%, #15212e 0%, #0a0f16 70%, #070a0f 100%);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease}
#app-cover.show{opacity:1;visibility:visible;pointer-events:auto}
#app-cover .ac-logo{font-family:var(--f-display);color:var(--brass-1);letter-spacing:4px;font-size:22px;font-weight:700;text-transform:uppercase;opacity:.92;animation:acPulse 1.1s ease-in-out infinite}
@keyframes acPulse{0%,100%{opacity:.55}50%{opacity:.95}}
@media (prefers-reduced-motion: reduce){#app-cover .ac-logo{animation:none}}

/* ───────────────────────── Кнопки ───────────────────────── */
button{
  cursor:pointer;border:none;border-radius:var(--r-md);
  padding:11px 20px;font-size:14px;font-weight:600;letter-spacing:.2px;
  font-family:var(--f-ui);color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .12s ease, box-shadow .2s, filter .2s, background .2s;
  position:relative;overflow:hidden;
}
button:hover{transform:translateY(-1px);filter:brightness(1.1);box-shadow:0 6px 18px rgba(0,0,0,.45)}
button:active{transform:translateY(0);filter:brightness(.95)}
button:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;filter:saturate(.5)}

.btn-primary{
  background:linear-gradient(180deg, #1bd17e 0%, #10b981 50%, #047857 100%) !important;
  color:#04321f !important;
  border:1px solid rgba(255,255,255,.2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(16,185,129,.35);
  font-weight:800;letter-spacing:.4px;
  text-shadow:0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 10px 26px rgba(16,185,129,.55)}

.btn-secondary{
  background:linear-gradient(180deg, #4ba3ea 0%, #2980b9 60%, #1c5d8a 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px rgba(41,128,185,.35);
  font-weight:700;
}

.btn-gold{
  background:linear-gradient(180deg, var(--brass-1) 0%, var(--brass-2) 50%, var(--brass-3) 100%) !important;
  color:#2a1f08 !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px rgba(212,175,55,.4);
  font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.2);
}

/* Эффект «brush» при hover */
button::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.18), transparent);
  transition:left .55s ease;
}
button:hover::after{left:130%}

/* ───────────────────────── Инпуты ───────────────────────── */
input{
  width:100%;
  padding:13px 14px;
  border-radius:var(--r-md);
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.42);
  color:var(--ink);
  font-size:15px;
  font-family:var(--f-ui);
  transition:border-color .2s, box-shadow .2s;
  outline:none;
}
input::placeholder{color:rgba(255,255,255,.32)}
input:focus{
  border-color:var(--brass-2);
  box-shadow:0 0 0 3px rgba(212,175,55,.15);
  background:rgba(0,0,0,.55);
}

/* ═══════════════════════════════════════════════════════════
 ЭКРАН AUTH
 ═══════════════════════════════════════════════════════════ */
#screen-auth{
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(45,107,69,.4) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 90%, rgba(20,30,45,.8) 0%, transparent 70%),
    linear-gradient(180deg, #0a0f14 0%, #0d1620 50%, #060a0f 100%);
}
/* Парящие масти на auth */
#screen-auth::before{
  content:'♠ ♥ ♦ ♣';
  position:absolute;inset:0;z-index:0;pointer-events:none;
  font-size:140px;letter-spacing:80px;
  color:rgba(212,175,55,.04);
  display:flex;align-items:center;justify-content:center;
  filter:blur(2px);
  animation:floatSuits 24s ease-in-out infinite;
}
@keyframes floatSuits{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-15px,10px) scale(1.05)}
}

#screen-auth h1{
  font-family:var(--f-display);
  font-size:54px;font-weight:700;
  letter-spacing:6px;
  background:linear-gradient(180deg, #fef4d4 0%, var(--brass-1) 35%, var(--brass-2) 65%, var(--brass-3) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 18px rgba(212,175,55,.4));
  margin-bottom:0;
  text-align:center;line-height:1;
}
#screen-auth h1+p,#screen-auth>p{
  color:var(--ink-mute);font-size:12px;
  letter-spacing:4px;text-transform:uppercase;
  margin-bottom:8px;
}
.auth-tagline{
  color:var(--brass-2);
  font-size:11px;letter-spacing:6px;text-transform:uppercase;
  margin-top:-4px;margin-bottom:14px;text-align:center;
  font-family:var(--f-display);font-weight:500;
}

.auth-box{
  background:linear-gradient(180deg, rgba(26,35,47,.85), rgba(13,18,24,.92));
  border:1px solid rgba(212,175,55,.18);
  border-radius:var(--r-lg);
  padding:32px 28px;width:360px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
  position:relative;z-index:1;
}
.auth-box::before{
  content:'';position:absolute;top:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg, transparent, var(--brass-2), transparent);
}

.auth-tabs{display:flex;border-radius:var(--r-md);overflow:hidden;background:rgba(0,0,0,.35);padding:4px;gap:4px;border:1px solid rgba(255,255,255,.06)}
.auth-tab{
  flex:1;padding:10px;background:transparent;
  color:var(--ink-mute);font-weight:700;font-size:13px;letter-spacing:.5px;
  border:none;border-radius:8px;
  transition:all .2s;
}
.auth-tab.active{
  background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.08));
  color:var(--brass-1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.error-msg{color:#ff6b6b;font-size:12px;text-align:center;min-height:18px;font-weight:500}

/* ═══════════════════════════════════════════════════════════
 ЭКРАН LOBBY
 ═══════════════════════════════════════════════════════════ */
#screen-lobby{
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(13,107,58,.18) 0%, transparent 60%),
    linear-gradient(180deg, #0a0f14 0%, #0d1620 100%);
}
.user-badge{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg, rgba(26,35,47,.9), rgba(13,18,24,.95));
  border:1px solid rgba(212,175,55,.2);
  border-radius:999px;
  padding:8px 18px 8px 8px;
  box-shadow:var(--shd-deep);
}
.user-badge .avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg, var(--brass-1), var(--brass-3));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:700;font-size:18px;color:#2a1f08;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.4);
}
.user-badge .uname{font-weight:700;font-size:14px;color:var(--ink)}
.user-badge .ubal{font-size:11px;color:var(--brass-1);letter-spacing:.5px;font-weight:600}

.room-code-big{
  font-family:var(--f-mono);
  font-size:42px;font-weight:800;letter-spacing:14px;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  color:var(--brass-1);
  padding:18px 32px 18px 46px;
  border-radius:var(--r-md);
  cursor:pointer;
  border:1.5px solid rgba(212,175,55,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 28px rgba(0,0,0,.5),
    0 0 24px rgba(212,175,55,.12);
  transition:all .2s;
  text-shadow:0 0 18px rgba(212,175,55,.5);
}
.room-code-big:hover{
  border-color:var(--brass-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 28px rgba(0,0,0,.5), 0 0 36px rgba(212,175,55,.3);
  transform:translateY(-1px);
}

.lobby-action-card{
  background:linear-gradient(180deg, rgba(26,35,47,.85), rgba(13,18,24,.9));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg);
  padding:22px;width:360px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--shd-deep);
  position:relative;
  transition:border-color .25s, transform .15s, box-shadow .25s;
}
.lobby-action-card:hover{
  border-color:rgba(212,175,55,.3);
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,55,.18);
}
.lobby-action-card h3{
  font-family:var(--f-display);font-size:15px;font-weight:600;
  color:var(--ink);margin:0;letter-spacing:1.5px;text-transform:uppercase;
}
.lobby-action-card .hint{font-size:12px;color:var(--ink-mute);margin-bottom:4px}

.lobby-box{
  background:linear-gradient(180deg, rgba(26,35,47,.8), rgba(13,18,24,.9));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg);
  padding:18px;width:340px;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--shd-deep);
}
.lobby-box .section-title{
  font-family:var(--f-display);font-size:11px;font-weight:600;
  color:var(--brass-2);letter-spacing:2px;text-transform:uppercase;
  margin-bottom:6px;
}

.player-item-lobby{
  /* табличная раскладка — 3 колонки: ник, баланс, кнопки */
  /* шире ник-колонка (мин. 180px = аватар + 10 символов), без обрезки */
  display:grid;
  grid-template-columns:minmax(180px, 1fr) 95px auto;
  gap:12px;
  align-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);
  padding:10px 14px;border-radius:var(--r-md);
  font-size:13px;font-weight:500;
  transition:background .2s;
}
.player-item-lobby .col-nick{display:flex;align-items:center;gap:8px;min-width:0;overflow:visible}
.player-item-lobby .col-nick > span{white-space:nowrap;overflow:visible;text-overflow:unset}
.player-item-lobby .col-balance{font-family:'JetBrains Mono',monospace;font-size:12px;color:#e8c873;font-weight:700;text-align:right;white-space:nowrap}
.player-item-lobby .col-actions{display:flex;gap:4px;justify-content:flex-end;align-items:center;white-space:nowrap}
.player-item-lobby:hover{background:rgba(255,255,255,.06)}

#lobby-players.mylobby-limit-box{
  min-height:54px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}
#lobby-players .mylobby-limit-state{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:10px 12px;
  color:#a8b3c2;
  font-size:12px;
  line-height:1.25;
  text-align:center;
}
#lobby-players .mylobby-limit-title{
  color:#a8b3c2;
  font-weight:800;
  white-space:nowrap;
}
#lobby-players .mylobby-limit-hint{
  color:#7a8493;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:720px;
}

.dealer-badge{
  background:linear-gradient(180deg, var(--brass-1), var(--brass-3));
  color:#2a1f08;
  padding:3px 10px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}

/* Cut селектор */
.cut-selector{
  background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.25));
  border:1px solid rgba(212,175,55,.18);
  border-radius:var(--r-md);
  padding:16px;
  width:340px;text-align:center;
}
.cut-selector h4{
  font-family:var(--f-display);
  color:var(--brass-1);font-size:12px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;
}
.cut-slider-wrap{display:flex;align-items:center;gap:12px;justify-content:center;margin:6px 0}
.cut-slider{width:180px;accent-color:var(--brass-2)}
.cut-val{font-size:22px;font-weight:800;color:var(--brass-1);min-width:50px;font-family:var(--f-mono)}
.cut-votes-list{font-size:10px;color:var(--ink-mute);margin-top:6px;letter-spacing:.3px}

/* ═══════════════════════════════════════════════════════════
 ИГРОВОЙ ЭКРАН
 ═══════════════════════════════════════════════════════════ */
#screen-game{
  padding:8px 8px 210px;
  justify-content:flex-start;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, #1a2733 0%, #0d141d 50%, #060a0f 100%);
}
#screen-game::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%);
}

.table-wrap{
  position:relative;width:100%;max-width:920px;
  margin:6vh auto 0;
  z-index:1;
}

/* Стол: палисандровый обод + латунная окантовка + изумрудный фетр */
.poker-table{
  position:relative;
  width:100%;padding-bottom:62.1%;
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(255,255,255,.05) 0%, transparent 50%),
    radial-gradient(ellipse 65% 60% at 50% 50%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 78%, var(--felt-edge) 100%);
  border-radius:50%;
  box-shadow:
    /* латунная нить */
    0 0 0 3px var(--brass-2),
    /* палисандровый обод */
    0 0 0 16px var(--wood-1),
    0 0 0 19px var(--wood-2),
    0 0 0 20px var(--wood-3),
    /* внешнее свечение и тень */
    0 0 0 22px rgba(0,0,0,.4),
    0 18px 80px rgba(0,0,0,.85),
    0 6px 24px rgba(0,0,0,.5),
    /* внутреннее затемнение по краю */
    inset 0 0 80px rgba(0,0,0,.4),
    inset 0 0 24px rgba(0,0,0,.25);
}
/* Латунные «огоньки» по ободу */
.poker-table::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,.6) 0%, transparent 8%),
    radial-gradient(circle at 100% 50%, rgba(212,175,55,.5) 0%, transparent 8%),
    radial-gradient(circle at 50% 100%, rgba(212,175,55,.5) 0%, transparent 8%),
    radial-gradient(circle at 0% 50%, rgba(212,175,55,.5) 0%, transparent 8%);
  pointer-events:none;
}
.table-logo{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--f-display);
  font-size:22px;font-weight:600;
  color:rgba(255,255,255,.06);
  letter-spacing:6px;text-align:center;line-height:1.4;
  pointer-events:none;user-select:none;
  text-transform:uppercase;
}
.table-logo::before{
  content:'♣ ♠ ♥ ♦';
  display:block;font-size:30px;letter-spacing:14px;
  color:rgba(212,175,55,.07);margin-bottom:6px;
  text-shadow:0 0 12px rgba(212,175,55,.2);
}

#seats-container{position:absolute;inset:0;pointer-events:none}
.seat{
  position:absolute;display:flex;flex-direction:column;align-items:center;
  /* v7.52.1: --seat-scale задаётся на #seats-container по числу игроков —
     при 4-5 местах боксы соседей не пересекаются (компактнее). */
  transform:translate(-50%,-50%) scale(var(--seat-scale, 1));
  transition:left .3s, top .3s;
  pointer-events:auto;
}
.seat-top{flex-direction:column-reverse}
/* v7.52.1: масштаб мест по числу игроков (не-дилеров). */
#seats-container.seats-3{--seat-scale:.93}
#seats-container.seats-4{--seat-scale:.84}
#seats-container.seats-5{--seat-scale:.76}

@media (min-width: 761px){
  #seats-container.desktop-compact .seat:not(.seat-lefthalf):not(.seat-righthalf):not(.seat-top){
    width:280px;height:1px;
    display:block;
    transform:translate(-50%,0) scale(var(--seat-scale, 1));
    transform-origin:center center;
  }
  #seats-container.desktop-compact .seat:not(.seat-lefthalf):not(.seat-righthalf):not(.seat-top) .chair-wrap{
    position:absolute;
    left:50%;top:0;
    margin:0;
    transform:translate(-50%,-50%);
  }
  #seats-container.desktop-compact .seat:not(.seat-lefthalf):not(.seat-righthalf):not(.seat-top) .player-field{
    position:absolute;
    left:50%;bottom:21px;
    margin:0;
    transform:translateX(-50%);
    max-width:540px;
  }
  #seats-container.desktop-compact .seat:not(.seat-lefthalf):not(.seat-righthalf):not(.seat-top) .seat-chips{
    position:absolute;
    left:50%;bottom:178px;
    min-height:30px;
    transform:translateX(-50%);
    z-index:18;
  }
  #seats-container.desktop-compact .seat:not(.seat-lefthalf):not(.seat-righthalf):not(.seat-top) .chair-label{
    position:absolute;
    left:50%;top:14px;
    margin:0;
    transform:translateX(-50%);
  }
  #seats-container.desktop-compact .seat:not(.seat-lefthalf):not(.seat-righthalf):not(.seat-top) .seat-status{
    position:absolute;
    left:50%;top:34px;
    margin:0;
    transform:translateX(-50%);
    z-index:20;
  }
  #seats-container.desktop-compact .seat-lefthalf,
  #seats-container.desktop-compact .seat-righthalf{
    width:190px;height:1px;
    transform-origin:center center;
  }
  #seats-container.desktop-compact .seat-lefthalf{
    transform:translate(0,0) scale(var(--seat-scale, 1));
    transform-origin:left center;
    align-items:flex-start;
  }
  #seats-container.desktop-compact .seat-righthalf{
    transform:translate(-100%,0) scale(var(--seat-scale, 1));
    transform-origin:right center;
    align-items:flex-end;
  }
  #seats-container.desktop-compact .seat-lefthalf .player-field,
  #seats-container.desktop-compact .seat-righthalf .player-field{
    position:absolute;
    bottom:19px;
    width:160px;min-width:160px;max-width:160px;
    margin-top:0;
  }
  #seats-container.desktop-compact .seat-lefthalf .player-field{
    left:0;
  }
  #seats-container.desktop-compact .seat-righthalf .player-field{
    right:0;
  }
  #seats-container.desktop-compact .seat-lefthalf .player-field > .cards-row,
  #seats-container.desktop-compact .seat-righthalf .player-field > .cards-row{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:0;
  }
  /* ПРАВЫЙ игрок: верхний бокс = бокс, по которому ХОДЯТ ПЕРВЫМ. Сплит играется
     СПРАВА НАЛЕВО (advanceHand: currentHandIndex→0; новый бокс splice'ится на hi,
     оригинал = hi+1 = ходит первым) → первый по ходу = hands[N-1]. append идёт
     hands[0]-first, поэтому column кладёт hands[0] (ВТОРОЙ по ходу) наверх — нам нужен
     column-reverse, чтобы наверху был hands[N-1] (первый по ходу). Левый остаётся column
     (наверху hands[0] = второй по ходу) — зеркально, юзер подтвердил. Реверс ТОЛЬКО
     визуальный (DOM hands[0]-first сохраняем) → settle по pStk.children[handIdx] цела;
     chip-стек правого реверсим в JS, чтобы ставки совпадали с боксами. */
  #seats-container.desktop-compact .seat-righthalf .player-field > .cards-row{
    flex-direction:column-reverse;
  }
  #seats-container.desktop-compact .seat-lefthalf .seat-chips,
  #seats-container.desktop-compact .seat-righthalf .seat-chips{
    position:absolute;
    top:auto;
    bottom:19px;
    height:var(--side-chip-lane-height, 106px);
    min-height:0;
    transform:none;
    z-index:18;
  }
  #seats-container.desktop-compact .seat-lefthalf .seat-chips{left:168px}
  #seats-container.desktop-compact .seat-righthalf .seat-chips{right:168px}
  #seats-container.desktop-compact .seat-lefthalf .seat-chips > .chip-stack-wrap,
  #seats-container.desktop-compact .seat-righthalf .seat-chips > .chip-stack-wrap{
    height:100%;
    justify-content:center;
  }
  #seats-container.desktop-compact .seat-lefthalf .chair-wrap,
  #seats-container.desktop-compact .seat-righthalf .chair-wrap{
    position:absolute;
    /* Desktop side seats use the same anchor as bottom seats: the seat point is the
       centerline of the player nameplate. Keeping a separate 78px offset made side
       players sit visibly lower than the center player. */
    top:0;
    width:190px;
    margin-top:0;
    transform:translateY(-50%);
  }
  #seats-container.desktop-compact .seat-lefthalf .chair-wrap{left:0}
  #seats-container.desktop-compact .seat-righthalf .chair-wrap{right:0}
  #seats-container.desktop-compact .seat-lefthalf .chair,
  #seats-container.desktop-compact .seat-righthalf .chair{
    width:190px;min-width:190px;max-width:190px;height:46px;
  }
  #seats-container.desktop-compact .seat-lefthalf .chair-wrap .pf-name,
  #seats-container.desktop-compact .seat-righthalf .chair-wrap .pf-name{
    gap:5px;
  }
  #seats-container.desktop-compact .seat-lefthalf .player-nick,
  #seats-container.desktop-compact .seat-righthalf .player-nick{
    font-size:17px;
  }
  #seats-container.desktop-compact .seat-lefthalf .seat-balance,
  #seats-container.desktop-compact .seat-righthalf .seat-balance{
    font-size:15px;
  }
  #seats-container.desktop-compact .seat-lefthalf .seat-balance{
    left:auto;right:calc(100% + 8px);top:50%;
    transform:translateY(-50%);
    text-align:right;
  }
  #seats-container.desktop-compact .seat-righthalf .seat-balance{
    left:calc(100% + 8px);right:auto;top:50%;
    transform:translateY(-50%);
    text-align:left;
  }
  #seats-container.desktop-compact .seat-lefthalf .chair-label,
  #seats-container.desktop-compact .seat-righthalf .chair-label{
    position:absolute;
    top:-38px;
    left:0;right:0;
    margin:0;
  }
  #seats-container.desktop-compact .seat-lefthalf .seat-status,
  #seats-container.desktop-compact .seat-righthalf .seat-status{
    position:absolute;
    top:34px;
    left:0;right:0;
    margin:0;
    z-index:20;
  }
  body.screen-game #seats-container.desktop-compact .seat-top .seat-status{
    position:absolute;
    left:50%;
    top:-12px;
    width:max-content;
    min-height:0;
    margin:0;
    transform:translateX(-50%);
    z-index:32;
  }
  body.screen-game #shoe-hud,
  body.screen-game #table-stakes{
    top:72px;
  }
  body.screen-game #screen-game:not([data-phase="betting"]) #seats-container.desktop-compact .seat:not(.seat-top) .hand-inner-box{
    position:relative !important;
    min-height:124px;
    padding:10px 8px 30px !important;
  }
  body.screen-game #screen-game:not([data-phase="betting"]) #seats-container.desktop-compact .seat:not(.seat-top) .hand-score{
    position:absolute !important;
    right:8px;
    bottom:5px;
    margin:0 !important;
    min-height:0 !important;
    line-height:1;
    font-size:20px;
    z-index:20;
  }
  body.screen-game #screen-game:not([data-phase="betting"]) #seats-container.desktop-compact .seat:not(.seat-top) .pf-score{
    position:absolute !important;
    right:10px;
    bottom:5px;
    margin:0 !important;
    min-height:0 !important;
    line-height:1;
    font-size:20px;
    z-index:20;
  }
}

/* Кресла */
/* стул той же ширины что и player-field — растягивается по chair-wrap */
.chair{
  width:100%;
  min-width:138px;
  max-width:190px;
  height:46px;
  background:
    linear-gradient(180deg, #a06636 0%, #774120 60%, #4a280f 100%);
  border-radius:6px 6px 12px 12px;
  border:1.5px solid #c47a3a;
  box-shadow:
    inset 0 1px 0 rgba(255,210,150,.3),
    inset 0 -2px 4px rgba(0,0,0,.4),
    0 6px 14px rgba(0,0,0,.6);
  position:relative;
}
/* chair-wrap имеет фиксированную ширину = ширине chair (190px).
 Поле игрока (player-field) теперь может быть шире (для боксов), но кресло —
 независимая визуальная область фиксированного размера. Это обеспечивает:
 • timer-ring строго вокруг chair (inset считается от chair-wrap),
 • seat-balance прилипает к правому краю chair (left:100%+8px от chair-wrap). */
.chair-wrap{width:190px;display:flex;align-items:center;justify-content:center}
.chair::before{
  content:'';position:absolute;bottom:-12px;left:6px;right:6px;height:14px;
  background:linear-gradient(180deg, #c47a3a, #8c4d1f);
  border:1.5px solid #d68a4a;
  border-radius:0 0 8px 8px;
}
.seat-top .chair{border-radius:12px 12px 6px 6px}
.seat-top .chair::before{bottom:auto;top:-12px;border-radius:8px 8px 0 0}

/* Моё кресло — латунь */
.seat-me .chair{
  background:linear-gradient(180deg, var(--brass-1) 0%, var(--brass-2) 50%, var(--brass-3) 100%) !important;
  border-color:#f0d480 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,250,200,.55),
    inset 0 -2px 4px rgba(80,50,0,.45),
    0 0 22px rgba(212,175,55,.4),
    0 6px 14px rgba(0,0,0,.6) !important;
}
.seat-me .chair::before{
  background:linear-gradient(180deg, #f0d480, #b88d28) !important;
  border-color:#f8e0a0 !important;
}

/* дубль-объявление, добавляет position:relative.
 Ширина сохраняется из первой декларации (190px) — переопределить не нужно. */
.chair-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.chair-wrap .pf-name{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:#fff;font-size:11px;font-weight:700;
  white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.95);
  z-index:3;pointer-events:none;
  display:flex;align-items:center;gap:5px;
}
.player-ava{
  font-size:18px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
/* +50% к размеру ника на столе (11→17px), 800 — жирный. */
.player-nick{font-size:17px;font-weight:800;letter-spacing:.2px}

.seat-balance{
  position:absolute;
  left:calc(100% + 8px);top:50%;
  transform:translateY(-50%);
  font-size:15px;
  color:var(--brass-1);
  font-weight:800;font-family:var(--f-mono);
  white-space:nowrap;line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,.95), 0 0 8px rgba(212,175,55,.25);
  letter-spacing:.5px;pointer-events:none;z-index:4;
}
/* v7.52.1: баланс выводится НАРУЖУ от стола. Игроки левой половины — слева
   от кресла (иначе баланс налезал на карты соседа справа), правой — справа. */
.seat-lefthalf .seat-balance{
  left:auto;right:calc(100% + 8px);text-align:right;
}

.chair-label{
  font-size:10px;color:var(--brass-1);
  text-align:center;margin-top:4px;
  font-weight:700;letter-spacing:.5px;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}
.seat-status{
  min-height:18px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.seat-top .chair-label{
  position:absolute;bottom:2px;left:2px;
  margin:0;z-index:10;
}

/* Поле игрока: тёмное стекло */
.player-field{
  background:linear-gradient(180deg, rgba(18,22,30,.85), rgba(8,12,18,.92)) !important;
  border-radius:14px !important;
  /* max-width расширен с 300 до 460px,
 чтобы 3 hand-wraps по 136px + gap'ы (≈ 420px) умещались без выпирания
 в фазе bet_placed (карт ещё нет — рамки боксов уже видны). */
  padding:9px 14px;min-width:138px;max-width:460px;width:fit-content;
  text-align:center;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  /* фишки↔карты −80% — margin-top 6 → 1. */
  margin-top:1px;
  position:relative;overflow:visible;
  display:flex !important;flex-direction:column;align-items:center;
  backdrop-filter:blur(8px);
  transition:border-color .25s, box-shadow .25s;
}

.player-field.active-field{
  background:linear-gradient(180deg, rgba(20,80,55,.85), rgba(8,40,28,.92)) !important;
  border:1.5px solid rgba(45,212,167,.5) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.55),
    0 0 24px rgba(45,212,167,.35),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  animation:fieldGlow 2.2s ease-in-out infinite;
}
@keyframes fieldGlow{
  0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.55), 0 0 24px rgba(45,212,167,.35), inset 0 1px 0 rgba(255,255,255,.08)}
  50%{box-shadow:0 6px 20px rgba(0,0,0,.55), 0 0 36px rgba(45,212,167,.55), inset 0 1px 0 rgba(255,255,255,.08)}
}

.player-field.me-field{
  background:linear-gradient(180deg, rgba(20,55,90,.85), rgba(10,30,55,.92)) !important;
  border-color:rgba(96,165,250,.3) !important;
}
.player-field.dealer-field{
  background:linear-gradient(180deg, rgba(80,55,8,.85), rgba(40,28,4,.92)) !important;
  border:1px solid var(--brass-2) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.55),
    0 0 28px rgba(212,175,55,.45),
    inset 0 0 12px rgba(212,175,55,.08) !important;
}

/* когда игра идёт — фон player-field прозрачный, рамка/тень убраны.
 Видны только: боксы (карты/ставки), счёт, бейдж статуса. Дилерское поле — оставляем как есть. */
.player-field.game-active:not(.dealer-field){
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
}
.player-field.game-active.active-field:not(.dealer-field){
  /* активность игрока теперь подсвечивается через timer-ring на кресле,
 а не через свечение поля — анимацию глоу отключаем */
  animation:none !important;
}

.cards-row{
  display:flex;justify-content:center;flex-wrap:nowrap;
  /* сокращаем margin 4px→1px (−80%) сверху и снизу,
 чтобы кнопки/карты ближе к креслу и фишкам. */
  /* v7.108.2: резерв под ПОЛНУЮ карту (78px) + каскад split-боксов (≈8px), чтобы при
     появлении карт строка не подрастала и бокс/соседи не «прыгали» (layout shift). */
  gap:0;margin:1px 0;min-height:88px;
  overflow:visible;align-items:flex-end;
  order:3;
  /* cards-row внутри pcards-{id} не должна расширяться больше
 родителя — wrap-ы и фишки фиксированной ширины помещаются внутри. */
  max-width:100%;
}
/* боксы идут ВДОЛЬ ЛИНИИ СТОЛА (одна строка,
 nowrap), но каждый следующий чуть выше и чуть в сторону от предыдущего —
 диагональ. Направление каскада задаётся через CSS-переменную --cascade-dx
 (см. JS в renderGame: для левых игроков +, для правых −). */
#seats-container .player-field > .cards-row {
  /* gap между split-боксами −50% (6 → 3). */
  flex-wrap:nowrap;justify-content:center;gap:3px;align-items:flex-end;
}
.hand-cascade-1 { transform:translate(var(--cascade-dx, 6px), -4px) }
.hand-cascade-2 { transform:translate(calc(var(--cascade-dx, 6px) * 2), -8px) }
.cards-row .card:not(:first-child){margin-left:-22px}
.cards-row .card:hover{z-index:10}

.pf-score{
  order:4;
  font-family:var(--f-mono);
  font-size:24px;font-weight:800;
  color:var(--ink);min-height:32px;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  letter-spacing:1px;
}
/* в фазе игры, когда .pf-score пустой (мульти-бокс
 игрок — счёт идёт под каждым боксом через .hand-score), уменьшаем
 min-height с 32 до 6px чтобы сократить расстояние между кнопками и креслом
 (−80%). Если в pf-score есть текст (одно-бокс игрок, дилер) — высота
 определится font-size:24px. */
.player-field.game-active .pf-score:empty{min-height:6px}

/* v7.110.50 (fix): счёт сплит-бокса (.hand-score) внутри .hand-inner-box (flex-column).
   Внутренний .cards-row наследует глобальный order:3, а у .hand-score order был дефолтным
   (0) → счёт уезжал НАД картами на десктопе (на мобиле маскировалось position:absolute из
   mobile-screens.css). Ставим order ВЫШЕ карт → счёт снова ПОД боксом. */
.hand-score{
  order:5;
  font-family:var(--f-mono);
  font-size:17px;font-weight:800;
  color:var(--ink);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  margin-top:2px;line-height:1;
}
.hand-result-score{
  font-size:22px;
  text-shadow:0 2px 5px rgba(0,0,0,.7);
}

.sbadge{
  order:7;
  display:inline-block;
  padding:2px 9px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.4px;
  margin-top:0;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.1);
}
.sbadge:empty{display:none}
.s-playing{background:linear-gradient(180deg,#3b82f6,#1d4ed8);color:#fff}
.s-stand{background:linear-gradient(180deg,#10b981,#047857);color:#fff}
.s-bust{background:linear-gradient(180deg,#ef4444,#991b1b);color:#fff}
.s-blackjack{background:linear-gradient(180deg,var(--brass-1),var(--brass-3));color:#2a1f08}
.s-betting{background:rgba(160,160,160,.4);color:#fff}
.s-bet_placed{background:linear-gradient(180deg,#14b8a6,#0f766e);color:#fff}
.s-dealer{background:linear-gradient(180deg,var(--brass-1),var(--brass-3));color:#2a1f08}
.s-dealer_waiting{background:linear-gradient(180deg,#a855f7,#6b21a8);color:#fff}
.s-dealer_playing{background:linear-gradient(180deg,#f59e0b,#b45309);color:#fff}
.s-reserved{background:linear-gradient(180deg,#a855f7,#6b21a8);color:#fff}
/* PRO — дилер решает «Ещё» или «Хватит» после 17+. */
.s-dealer_decision{background:linear-gradient(180deg,#f59e0b,#b45309);color:#1a0e00;animation:fieldGlow 1.8s ease-in-out infinite}

/* ═══════════ Карты ═══════════ */
.card{
  width:67px;height:94px;
  border-radius:8px;
  background:
    linear-gradient(135deg, #f9f1dd 0%, #f4ecd5 100%);
  display:flex;flex-direction:column;
  padding:4px 6px 3px;
  flex-shrink:0;position:relative;overflow:hidden;
  border:1px solid rgba(0,0,0,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,0,0,.08),
    2px 4px 10px rgba(0,0,0,.55),
    0 1px 3px rgba(0,0,0,.4);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s,
             margin-top .35s cubic-bezier(.34,1.56,.64,1),
             margin-bottom .35s cubic-bezier(.34,1.56,.64,1),
             margin-left .35s cubic-bezier(.34,1.56,.64,1);
  z-index:1;
  font-family:var(--f-display);
}
.card::after{
  /* Тонкая бумажная текстура */
  content:'';position:absolute;inset:0;border-radius:8px;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.015) 2px 3px);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-10px) rotate(2deg) scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 16px 30px rgba(0,0,0,.7),
    0 4px 10px rgba(0,0,0,.4);
  z-index:20;
}
.card.hidden{
  background:
    repeating-linear-gradient(45deg, #8a1818 0 6px, #6e0e0e 6px 12px),
    radial-gradient(circle at 50% 50%, #a52828, #5a0a0a);
  border:1px solid rgba(255,255,255,.15);
}
.card.hidden::after{
  content:'';
  position:absolute;inset:4px;border-radius:5px;
  border:1.5px solid rgba(212,175,55,.5);
  background:
    radial-gradient(circle at 50% 50%, rgba(212,175,55,.25) 0%, transparent 30%);
}
.card.hidden::before{
  content:'♠';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--f-display);font-size:var(--card-back-suit-size, 24px);
  color:rgba(212,175,55,.5);text-shadow:0 0 8px rgba(212,175,55,.4);
}

/* дизайн карт — РАНГ в TL+BR (диагональ), МАСТЬ в TR+BL.
 ранг 15→18px, масть 13→16px (≈ +20%).
 
 • ОТСТУПЫ от краёв ↓ (top/left/right/bottom 3-5 → 1-2px) — символы
 сильнее прижаты к углам карты по запросу юзера.
 • РАЗМЕРЫ: desktop-карты и угловые символы увеличены на 20%. */
.card-tl{position:absolute;top:1px;left:2px;line-height:1;z-index:1;
  font-size:24px;font-weight:900;color:inherit;font-family:var(--f-display)}
.card-tr{position:absolute;top:2px;right:2px;line-height:1;z-index:1;
  font-size:24px;color:inherit}
.card-bl{position:absolute;bottom:2px;left:2px;line-height:1;z-index:1;
  font-size:24px;color:inherit}
.card-br{position:absolute;bottom:1px;right:2px;line-height:1;z-index:1;
  font-size:24px;font-weight:900;color:inherit;font-family:var(--f-display);
  transform:rotate(180deg);transform-origin:center}
/* Legacy-классы оставлены для совместимости — не используются. */
.card-top,.card-bottom,.card-main,.cval-sm,.csut-sm{display:none}
.card-suit-lg{display:none}
.card-val-lg{display:none}

/* Bust анимации */
.card.busted{filter:brightness(.5) saturate(.4) blur(.3px)}
@keyframes cardShake{
  0%,100%{transform:translateX(0) rotate(0)}
  20%{transform:translateX(-5px) rotate(-4deg)}
  40%{transform:translateX(5px) rotate(4deg)}
  60%{transform:translateX(-4px) rotate(-3deg)}
  80%{transform:translateX(4px) rotate(3deg)}
}
@keyframes crackIn{
  0%{opacity:0;transform:scale(.6) rotate(-5deg)}
  60%{opacity:1;transform:scale(1.08) rotate(2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.card.busted-anim{animation:cardShake .45s ease-out forwards}

/* 
 Анимация прилёта карты — теперь СУЩЕСТВЕННО видимое движение от
 дилера к боксу, флип происходит ТОЛЬКО в боксе.
 Раньше 650мс — слишком быстро, движение почти невидимо. Стало 1100мс:
 • 0-78% (≈860мс): карта летит ОТ дилера К боксу РУБАШКОЙ ВВЕРХ.
 rotateY:180 фиксирован весь полёт (back facing viewer).
 Лёгкий rotateZ -6° для «парения», scale 0.85→0.95→1.05.
 • 78-100% (≈240мс): snap-flip ТОЛЬКО в боксе.
 brightness flash 1→1.8→1, rotateY 180→90→0.
 Карта приземляется лицом вверх с лёгкой вспышкой.
 Длительность 1100мс — звук sounds/card-deal.mp3 (1150мс) заканчивается
 сразу после анимации. */
.card.card-dealing{
  animation:cardArrival 1100ms cubic-bezier(.35,.08,.4,1) forwards;
  z-index:50 !important;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
@keyframes cardArrival{
  0%{
    /* СТАРТ — у дилера, рубашкой вверх, чуть наклонена */
    transform:translate(var(--from-x,0px),var(--from-y,-100px)) rotateY(180deg) rotateZ(-6deg) scale(.85);
    opacity:0;
    filter:brightness(1);
    box-shadow:0 8px 24px rgba(0,0,0,.55);
  }
  8%{ opacity:1; }
  /* Полёт занимает 0-78% — около 860мс заметного движения */
  35%{
    transform:translate(calc(var(--from-x,0px) * .65), calc(var(--from-y,0px) * .65)) rotateY(180deg) rotateZ(-6deg) scale(.92);
    opacity:1;
  }
  60%{
    transform:translate(calc(var(--from-x,0px) * .35), calc(var(--from-y,0px) * .35)) rotateY(180deg) rotateZ(-4deg) scale(.97);
    opacity:1;
  }
  78%{
    /* ДОЛЕТЕЛИ ДО БОКСА — карта на своей позиции, ещё рубашкой вверх */
    transform:translate(0,0) rotateY(180deg) rotateZ(0) scale(1.05);
    filter:brightness(1.8);
    opacity:1;
  }
  /* Флип ТОЛЬКО здесь, в боксе (78-100% = 240мс) */
  88%{
    transform:translate(0,0) rotateY(90deg) scale(1.05);
    filter:brightness(1.6);
  }
  95%{
    transform:translate(0,0) rotateY(0deg) scale(1.04);
    filter:brightness(1.2);
  }
  100%{
    transform:translate(0,0) rotateY(0deg) rotateZ(0) scale(1);
    filter:brightness(1);
    opacity:1;
  }
}

/* ── Раздача: летящий клон карты (v7.44.20) ──────────────────────────
 Клон карты живёт в <body>, поэтому НЕ уничтожается при пересборке
 .cards-row в renderGame (это и была причина «телепорта» — раньше карта
 с классом .card-dealing удалялась посреди полёта следующим рендером).
 Летит рубашкой вверх от позиции НИЖЕ дилера к боксу, переворачивается
 уже в боксе. 1650мс = на 50% медленнее прежних 1100мс. */
.fly-card-deal{
  position:fixed; z-index:8800; pointer-events:none;
  perspective:700px; will-change:transform;
  animation:flyDealMove 1980ms cubic-bezier(.35,.08,.4,1) forwards;
}
.fly-card-deal .fly-inner{
  position:absolute; inset:0; transform-style:preserve-3d;
  animation:flyDealFlip 1980ms ease-in forwards;
}
.fly-card-deal .fly-face{
  position:absolute; inset:0;
  width:100%!important; height:100%!important; margin:0!important;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.fly-card-deal .fly-front{ transform:rotateY(180deg); }
/* Скрытая карта (чужой игрок, обычно 3я+): без флипа — летит и остаётся рубашкой вверх */
.fly-card-deal.fly-no-flip .fly-inner{ animation:none; transform:rotateY(0deg); }
/* Флип-открытие закрытой карты на фазе results (задача 1) — переворот на месте, без полёта. */
@keyframes cardRevealFlip{ 0%{transform:rotateY(90deg);opacity:.55} 60%{opacity:1} 100%{transform:rotateY(0deg);opacity:1} }
.card.card-reveal-flip{ animation:cardRevealFlip .5s ease-out; }
@keyframes flyDealMove{
  0%{   transform:translate(var(--fx,0px),var(--fy,0px)) scale(.9); opacity:0; }
  10%{  opacity:1; }
  72%{  transform:translate(0,0) scale(1.05); opacity:1; }   /* долетели до бокса */
  100%{ transform:translate(0,0) scale(1); opacity:1; }      /* лёгкая осадка */
}
@keyframes flyDealFlip{
  0%,72%{ transform:rotateY(0deg); }     /* в полёте — рубашкой вверх */
  86%{    transform:rotateY(90deg); }    /* флип в боксе */
  100%{   transform:rotateY(180deg); }   /* лицом вверх */
}

/* Mute-кнопка: иконка в правом-верхнем углу game-screen. По умолчанию
 скрыта, показывается через body.screen-game (см. JS showScreen). */
#mute-btn{
  /* v7.108.3: звук — в самый правый верхний угол. */
  position:fixed;top:10px;right:10px;z-index:9001;
  width:36px;height:36px;
  background:rgba(20,25,35,.85);
  border:1px solid rgba(212,175,55,.4);
  border-radius:8px;color:#e8c873;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  padding:0;backdrop-filter:blur(8px);
  transition:background .2s, border-color .2s, transform .15s;
}
#mute-btn:hover{
  background:rgba(40,35,15,.92);
  border-color:rgba(212,175,55,.75);
  transform:scale(1.05);
}
#mute-btn:active{ transform:scale(.96); }
#mute-btn svg{ width:22px; height:22px; display:block; }
body.screen-game #mute-btn{ display:flex; }
.card.busted-anim::after{
  content:'';position:absolute;inset:0;border-radius:8px;
  background:
    linear-gradient(127deg, transparent 35%, rgba(220,30,30,.8) 35.5% 36%, transparent 36%),
    linear-gradient(53deg, transparent 45%, rgba(180,15,15,.7) 45.5% 46%, transparent 46%),
    linear-gradient(160deg, transparent 60%, rgba(200,20,20,.6) 60.5% 61%, transparent 61%);
  animation:crackIn .4s ease-out forwards;pointer-events:none;
}

/* ═══════════ Фишки ═══════════ */
.seat-chips{display:flex;justify-content:center;align-items:center;min-height:30px}
.chip-stack-wrap{display:flex;flex-direction:column;align-items:center;margin:0}
/* подпись теперь ПОД стопкой — margin-top вместо margin-bottom */
.chip-lbl{font-size:10px;color:var(--brass-1);font-weight:800;margin-top:3px;font-family:var(--f-mono);text-shadow:0 1px 2px rgba(0,0,0,.7)}
.bet-stack{display:flex;flex-direction:row;align-items:flex-end;flex-wrap:wrap;justify-content:center;gap:3px}

/* фишка без ребристого паттерна — сплошная заливка с лёгкой подсветкой сверху */
.chip-coin{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;
  flex-shrink:0;position:relative;
  border:none;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.18) 0%, transparent 55%),
    var(--chip-base, #333);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 3px 6px rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.3);
  color:rgba(255,255,255,.95);
}
.chip-coin > span,.chip-coin{font-family:var(--f-mono)}
.chip-500{--chip-base:#c0392b;color:#fff}
.chip-250{--chip-base:#16a34a;color:#fff}
.chip-100{--chip-base:#1e40af;color:#fff}
.chip-50{--chip-base:#d97706;color:#1a0e00}
/* мелкие номиналы 1-25 — собственные цвета, чтобы каждый
 уровень фишки был визуально отличим. */
.chip-25{--chip-base:#9a4dff;color:#fff}
.chip-10{--chip-base:#a8b3c2;color:#1a0e00}
.chip-5{--chip-base:#f5d76e;color:#1a0e00}
.chip-1{--chip-base:#f4ecd5;color:#1a0e00}
.chip-count{
  position:absolute;top:-6px;right:-6px;
  background:var(--brass-1);color:#2a1f08;
  font-size:8px;border-radius:999px;
  min-width:16px;height:16px;padding:0 3px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;border:1.5px solid #2a1f08;
  line-height:1;z-index:2;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* фишки ВНУТРИ бокса ставки (фаза betting).
 Размер увеличен с 16px до 22px, чтобы фишки были видны.
 Каждая стопка имеет подпись с номиналом (например «500 ×2»). */
/* стопочки выравниваются по нижнему краю — N фишек уходят вверх */
/* select-dropdown для min/max ставки — стилизован как rake-select.
 Каждая опция = цветной чип с номиналом (используем emoji-«фишку» в text). */
.bet-limit-select{
  background:rgba(0,0,0,.55);color:#e8c873;
  border:1px solid rgba(212,175,55,.3);
  border-radius:6px;padding:5px 10px;
  font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;
  cursor:pointer;color-scheme:dark;
  min-width:96px;
}
.bet-limit-select option{
  background:#0e1620;color:#e8c873;
  font-family:'JetBrains Mono',monospace;font-weight:800;
}

/* прокручиваемое chip-меню для min/max ставки в настройках стола.
 Горизонтальный скролл, каждый элемент — мини-чип с номиналом, активный — outline. */
.bet-limit-chips{
  display:flex;flex-direction:row;align-items:center;gap:4px;
  overflow-x:auto;max-width:160px;scroll-behavior:smooth;
  scrollbar-width:thin;padding:2px;
}
.bet-limit-chips::-webkit-scrollbar{height:4px}
.bet-limit-chips::-webkit-scrollbar-thumb{background:rgba(212,175,55,.4);border-radius:2px}
.bet-limit-chip{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;border:none;
  font-size:10px;font-weight:900;color:#fff;cursor:pointer;
  font-family:var(--f-mono);
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #333;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.5);
  transition:transform .15s,outline .15s;
}
.bet-limit-chip:hover{transform:translateY(-2px)}
.bet-limit-chip.active{outline:2px solid #e8c873;outline-offset:2px}
.bet-limit-chip.chip-1{background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #f4ecd5;color:#1a0e00}
.bet-limit-chip.chip-5{background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #f5d76e;color:#1a0e00}
.bet-limit-chip.chip-10{background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #a8b3c2;color:#1a0e00}
.bet-limit-chip.chip-25{background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #9a4dff}
.bet-limit-chip.chip-50{background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #d97706;color:#1a0e00}
.bet-limit-chip.chip-100{background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #1e40af}
.bet-limit-chip.chip-250{background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #16a34a}
.bet-limit-chip.chip-500{background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #c0392b}
.bet-limit-chip.chip-1000{background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #6b21a8}
.bet-limit-chip.chip-5000{background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #0f766e}

.box-chip-stack{
  display:flex;flex-direction:row;align-items:flex-end;justify-content:center;
  gap:4px;margin-bottom:4px;min-height:36px;
}
.box-chip-group{
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.box-chip{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:900;
  flex-shrink:0;position:relative;border:none;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%),
    var(--chip-base, #333);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 1px 2px rgba(0,0,0,.5);
  color:rgba(255,255,255,.95);
  font-family:var(--f-mono);
}
.box-chip.chip-500{--chip-base:#c0392b;color:#fff}
.box-chip.chip-250{--chip-base:#16a34a;color:#fff}
.box-chip.chip-100{--chip-base:#1e40af;color:#fff}
.box-chip.chip-50{--chip-base:#d97706;color:#1a0e00}
.box-chip.chip-25{--chip-base:#9a4dff;color:#fff}
.box-chip.chip-10{--chip-base:#a8b3c2;color:#1a0e00}
.box-chip.chip-5{--chip-base:#f5d76e;color:#1a0e00}
.box-chip.chip-1{--chip-base:#f4ecd5;color:#1a0e00}
.box-chip-count{
  position:absolute;top:-5px;right:-5px;
  background:var(--brass-1);color:#2a1f08;
  font-size:7px;border-radius:999px;
  min-width:13px;height:13px;padding:0 2px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;border:1px solid #2a1f08;
  line-height:1;z-index:2;
}
.box-chip-lbl{
  font-family:var(--f-mono);font-size:8px;font-weight:800;
  color:var(--brass-1);line-height:1;letter-spacing:.2px;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.box-sum{
  font-family:var(--f-mono);font-size:13px;font-weight:800;
  color:#e8c873;letter-spacing:.3px;line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.box-label{
  font-size:8px;color:rgba(255,255,255,.55);
  margin-top:2px;letter-spacing:.3px;line-height:1;
}

/* Башмак HUD */
/* v7.111.13: башмак ВНУТРИ стола, справа от дилера, но статично относительно стола.
   Не привязываем к DOM дилера: при ротации игроков HUD не должен уезжать за ними. */
#shoe-hud{
  position:absolute;top:14px;left:calc(50% + 125px);right:auto;bottom:auto;z-index:7;
  background:linear-gradient(180deg, rgba(18,22,30,.92), rgba(8,12,18,.96));
  border:1px solid rgba(212,175,55,.25);
  border-radius:var(--r-md);
  padding:7px 11px;
  display:none;flex-direction:row;align-items:center;gap:10px;
  box-shadow:var(--shd-deep);
  backdrop-filter:blur(10px);
}
#shoe-hud-visual{
  width:28px;height:42px;
  background:linear-gradient(180deg, var(--wood-1) 0%, var(--wood-3) 100%);
  border-radius:4px 4px 6px 6px;
  border:1.5px solid #c47a3a;
  position:relative;overflow:hidden;flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,200,140,.3), 0 2px 4px rgba(0,0,0,.4);
}
#shoe-hud-fill{
  position:absolute;bottom:0;left:1.5px;right:1.5px;
  background:linear-gradient(180deg, #f5ecd9, #d8c498);
  border-radius:1px 1px 3px 3px;transition:height .4s;
}
/* v7.107.0: красная карта-срезка — горизонтальная метка в башмаке на месте среза.
   bottom задаётся из JS (updateShoe) по cutPercent: показывает, до какого места дойдут
   карты, прежде чем колоду перетасуют. */
#shoe-hud-cut{
  position:absolute;left:0;right:0;height:3px;z-index:2;
  background:repeating-linear-gradient(90deg,#c0152b,#c0152b 4px,#fff 4px,#fff 6px);
  box-shadow:0 0 5px rgba(192,21,43,.9), 0 0 2px #c0152b;
  transition:bottom .4s;
}
#shoe-hud-stats{color:var(--brass-1);font-size:10px;line-height:1.6;font-family:var(--f-mono);letter-spacing:.3px}
#shoe-hud-stats span{color:#fff;font-weight:800;margin-left:4px}

/* v7.107.0: правый-верхний угол освобождён от башмака (он уехал в стол). Сюда —
   номер предыдущей раздачи (кликабельно) + кнопка правил, столбиком. */
#last-hand-btn{
  display:none;
  /* v7.108.3: номер предыдущей раздачи — чуть ЛЕВЕЕ кнопки звука (звук в углу right:10). */
  position:fixed;top:10px;right:54px;z-index:201;
  background:linear-gradient(180deg,rgba(212,175,55,.22),rgba(160,122,26,.3));
  color:var(--brass-1);border:1px solid rgba(212,175,55,.45);
  font-size:11px;font-weight:800;letter-spacing:.4px;font-family:var(--f-mono);
  padding:6px 12px;border-radius:6px;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
#last-hand-btn:hover{background:linear-gradient(180deg,rgba(212,175,55,.35),rgba(160,122,26,.45))}
body.screen-game #last-hand-btn.has-hand{display:block}
/* v7.45.95: кнопка правил (правый верхний угол, под номером раздачи) */
#table-rules-btn{
  display:none;
  position:fixed;top:46px;right:10px;z-index:200;
  background:linear-gradient(180deg,rgba(168,85,247,.55),rgba(107,33,168,.65));
  color:#fff;border:1px solid rgba(168,85,247,.5);
  font-size:11px;font-weight:700;letter-spacing:.5px;
  padding:6px 12px;border-radius:6px;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
#table-rules-btn:hover{background:linear-gradient(180deg,rgba(168,85,247,.7),rgba(107,33,168,.8))}
body.screen-game #table-rules-btn{display:block}
/* v7.111.13: лимиты ставок + рейк — рядом с верхней зоной дилера, статично относительно стола.
   Эти параметры не принадлежат игроку-дилеру и не должны двигаться при ротации мест. */
#table-stakes{
  position:absolute;top:18px;left:calc(50% - 235px);right:auto;bottom:auto;z-index:6;
  font-family:var(--f-mono);font-size:11px;line-height:1.7;letter-spacing:.3px;
  color:rgba(232,200,115,.55);pointer-events:none;text-align:left;
}
#table-stakes b{color:rgba(232,200,115,.8);font-weight:800}
body.screen-game #table-stakes{display:block}

/* v7.45.95: чат-панель справа (~14% = 1/7 экрана). Сообщения через socket.io. */
/* v7.50.3: чат на 30% шире (14vw→18vw) и на 30% больше шрифт (11→14px). */
#chat-panel{
  display:none;
  /* v7.107.0: башмак уехал в стол → чат растянут вверх (top 160→86, под кнопками раздачи/правил). */
  position:fixed;top:86px;right:10px;bottom:80px;width:18vw;min-width:220px;max-width:320px;
  background:linear-gradient(180deg, rgba(18,22,30,.94), rgba(8,12,18,.96));
  border:1px solid rgba(212,175,55,.2);border-radius:10px;z-index:198;
  flex-direction:column;overflow:hidden;
  box-shadow:var(--shd-deep);
  transition:transform .24s ease, opacity .2s ease;
}
body.screen-game #chat-panel{display:flex}
#chat-panel-header{
  padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--f-display);color:var(--brass-1);
  font-size:15px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
#chat-collapse-btn{
  display:none;background:rgba(255,255,255,.07);color:#e8c873;border:1px solid rgba(232,200,115,.24);
  width:26px;height:24px;border-radius:6px;font-size:18px;line-height:1;cursor:pointer;
}
#chat-restore-btn{
  display:none;position:fixed;top:92px;right:10px;z-index:199;
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;border:1px solid rgba(255,255,255,.24);
  box-shadow:0 8px 20px rgba(0,0,0,.45);font-size:18px;cursor:pointer;
}
#chat-messages{
  flex:1;overflow-y:auto;padding:8px 10px;
  font-size:14px;line-height:1.45;color:#e0e6ed;
  scroll-behavior:smooth;
}
#chat-messages .msg{margin-bottom:4px;word-wrap:break-word}
#chat-messages .msg-from{color:#60a5fa;font-weight:700;margin-right:4px}
#chat-messages .msg-from.sys{color:#94a3b8;font-style:italic}
#chat-messages .msg-from.bot{color:#a855f7}
#chat-input-row{
  display:flex;gap:4px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.06);
  align-items:center;
}
#chat-input{
  flex:1;background:#0d111a;color:#e0e6ed;border:1px solid #2a3344;
  padding:7px 10px;border-radius:5px;font-size:14px;min-width:0;
}
#chat-input-row button{
  background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;border:none;
  padding:7px 11px;border-radius:5px;cursor:pointer;font-size:16px;flex-shrink:0;
}
/* v7.50.3: кнопка эмодзи-пикера в чате */
#chat-emoji-btn{
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important;
  font-size:17px!important;padding:6px 8px!important;
}
#chat-emoji-pop{
  position:absolute;bottom:54px;right:10px;z-index:210;display:none;
  background:linear-gradient(180deg,rgba(26,32,44,.99),rgba(13,18,26,.99));
  border:1px solid rgba(212,175,55,.3);border-radius:10px;padding:8px;
  grid-template-columns:repeat(6,1fr);gap:4px;box-shadow:0 8px 24px rgba(0,0,0,.6);
  max-width:260px;
}
#chat-emoji-pop.show{display:grid}
#chat-emoji-pop button{
  background:rgba(255,255,255,.04);border:none;border-radius:6px;cursor:pointer;
  font-size:20px;padding:4px;line-height:1;transition:background .12s;
}
#chat-emoji-pop button:hover{background:rgba(212,175,55,.25)}

/* v7.50.1: стол НЕ сжимаем (padding-right раньше уменьшал ширину → стол был мелкий).
   Вместо этого сохраняем полный размер (max-width:920px) и СДВИГАЕМ влево через
   transform, чтобы стол был по центру зоны [левый край экрана … левый край чата].
   Чат: right:10px + width 14vw. Центр левой зоны = (100vw - 10 - 14vw)/2.
   Сдвиг от центра экрана (50vw) = -(5px + 7vw). */
/* v7.50.3: чат теперь 18vw → пересчитан сдвиг (половина чат-зоны = 9vw). */
body.screen-game .table-wrap{
  max-width: min(920px, calc(100vw - 18vw - 80px));
  transform: translateX(calc(-9vw - 5px));
}
/* v7.50.3: нижняя панель (action/наблюдатель) центрируется ПО СТОЛУ, не по
   экрану — иначе перекос (стол сдвинут влево, панель была по центру экрана). */
body.screen-game .bottom-hud{
  max-width: min(920px, calc(100vw - 18vw - 80px));
  transform: translateX(calc(-9vw - 5px));
}
@media (min-width: 901px){
  body.screen-game #chat-collapse-btn{display:inline-flex;align-items:center;justify-content:center}
  body.screen-game.chat-collapsed #chat-panel{
    transform:translateX(calc(100% + 24px));
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  body.screen-game.chat-collapsed #chat-restore-btn{display:block}
  body.screen-game.chat-collapsed .table-wrap{
    max-width:920px;
    transform:none;
  }
  body.screen-game.chat-collapsed .bottom-hud{
    max-width:920px;
    transform:none;
  }
}
@media (max-width: 900px){
  body.screen-game .table-wrap{ transform:none; max-width:920px; }
  body.screen-game .bottom-hud{ transform:none; max-width:920px; }
  body.screen-game #chat-panel{display:none}
  #chat-restore-btn{display:none!important}
}

/* v7.45.95: round-info по центру стола, виден ТОЛЬКО в фазе betting +
   первые ~5 секунд playing (через body.show-round-info флаг). Остальное
   время скрыт — освобождает центр стола под карты/чипы. */
.round-info{
  display:none;
  /* v7.52.2: absolute внутри .poker-table → ровно центр стола (верт+гориз). */
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--f-display);
  font-size:22px;color:var(--brass-1);
  text-align:center;z-index:199;pointer-events:none;
  background:linear-gradient(180deg, rgba(18,22,30,.92), rgba(8,12,18,.95));
  border:2px solid rgba(232,200,115,.4);
  border-radius:14px;
  padding:14px 32px;letter-spacing:3px;
  font-weight:700;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
  box-shadow:0 0 40px rgba(232,200,115,.25), var(--shd-card);
  opacity:0;transition:opacity .35s ease;
}
body.screen-game.show-round-info .round-info{display:block;opacity:1}
/* legacy ready-btn — реально скрытая навсегда, чтобы
 зелёный «legacy» не выскакивал даже когда какой-то код пытается
 снять inline display:none. */
#ready-btn{display:none !important}
/* bottom-hud (action-panel «$55» + history) показывается
 ТОЛЬКО на screen-game. На других экранах (lobby/owner/report) —
 скрыта чтобы не оставались артефакты. Используем body:not(.screen-game)
 чтобы не сломать существующее правило .bottom-hud { min-height:210px }. */
body:not(.screen-game) .bottom-hud{display:none !important}

/* Нижний HUD */
/* bottom-hud не перекрывает кресла.
 Резервируем меньше: 210px вместо 260px, action-panel min-height 100px вместо 140px —
 action-msg «Выбери ставку» больше не лезет в зону игроков (стулья). */
.bottom-hud{
  position:fixed;bottom:0;left:0;right:0;
  width:100%;max-width:920px;margin:0 auto;
  display:flex;flex-direction:column;gap:6px;
  padding:6px 10px 10px;
  background:linear-gradient(180deg, rgba(8,12,18,.65), rgba(8,12,18,.98) 30%);
  z-index:100;
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(212,175,55,.15);
  /* v7.50.3: history-box убран (результаты в чате) → меньше высота HUD.
     v7.52.2: контент (фишки/ставки) прижат к НИЗУ страницы (flex-end). */
  min-height:150px;justify-content:flex-end;
}
.bottom-hud .action-panel{
  flex-shrink:0;min-height:100px;
}
.bottom-hud .history-box{
  flex:1;min-height:50px;
}
.bottom-hud::before{
  content:'';position:absolute;top:-1px;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg, transparent, var(--brass-2), transparent);
}

.action-panel{
  background:linear-gradient(180deg, rgba(26,35,47,.6), rgba(13,18,24,.7));
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:14px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
#action-msg{
  font-size:15px;font-weight:600;margin-bottom:10px;min-height:24px;
  letter-spacing:.2px;
}

.action-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.btn-hit{
  background:linear-gradient(180deg,#10b981,#047857) !important;
  color:#fff !important;min-width:120px;flex:1;max-width:140px;
  font-size:14px;padding:12px 0;font-weight:700;letter-spacing:.4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px rgba(16,185,129,.3);
}
.btn-stand{
  background:linear-gradient(180deg,#ef4444,#991b1b) !important;
  color:#fff !important;min-width:120px;flex:1;max-width:140px;
  font-size:14px;padding:12px 0;font-weight:700;letter-spacing:.4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px rgba(239,68,68,.3);
}
.btn-double{
  background:linear-gradient(180deg,var(--brass-1),var(--brass-3)) !important;
  color:#2a1f08 !important;min-width:120px;flex:1;max-width:140px;
  font-size:14px;padding:12px 0;font-weight:800;letter-spacing:.4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(212,175,55,.4);
}
.btn-split{
  background:linear-gradient(180deg,#a855f7,#6b21a8) !important;
  color:#fff !important;min-width:120px;flex:1;max-width:140px;
  font-size:14px;padding:12px 0;font-weight:700;letter-spacing:.4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px rgba(168,85,247,.3);
}

/* Кнопки ставок (фишки) */
.bet-chips-panel{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:7px 0}
/* мерцание пустых боксов */
@keyframes boxPulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.95;transform:scale(1.04)}
}
.bet-chip-btn{
  width:54px;height:54px;border-radius:50% !important;
  font-size:12px;font-weight:800;
  border:none !important;
  position:relative;cursor:pointer;
  transition:transform .15s;
  font-family:var(--f-mono);
}
.bet-chip-btn:hover{transform:translateY(-3px) scale(1.08) !important}
/* большие кнопки ставок для мелких номиналов 1-25 */
.bchip-1{
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #f4ecd5 !important;
  color:#1a0e00 !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.5);
}
.bchip-5{
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #f5d76e !important;
  color:#1a0e00 !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.5);
}
.bchip-10{
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #a8b3c2 !important;
  color:#1a0e00 !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.5);
}
.bchip-25{
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #9a4dff !important;
  color:#fff !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.5);
}
/* большие кнопки ставок — единая заливка без белого паттерна */
.bchip-50{
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #d97706 !important;
  color:#1a0e00 !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.5);
}
.bchip-100{
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #1e40af !important;
  color:#fff !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.5);
}
.bchip-250{
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #16a34a !important;
  color:#fff !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.5);
}
.bchip-500{
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22) 0%, transparent 55%), #c0392b !important;
  color:#fff !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.5);
}
.btn-clear-bet{
  background:rgba(255,255,255,.08) !important;color:var(--ink-dim) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  width:46px;height:44px;padding:0 !important;font-size:18px;line-height:1;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.btn-confirm-bet{
  background:linear-gradient(180deg, var(--brass-1), var(--brass-3)) !important;
  color:#2a1f08 !important;font-weight:800;
  padding:11px 24px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(212,175,55,.4);
}
/* Очистить(↩) · Повторить(🔁) · Удвоить(×2) · ОК — все в одном ряду .action-btns.
   Три значка-кнопки одного размера, ОК — шире (с суммой). */
.btn-rebet,.btn-double-bet{
  background:rgba(232,200,115,.12) !important;color:#e8c873 !important;
  border:1px solid rgba(232,200,115,.35) !important;
  border-radius:8px;width:46px;height:44px;padding:0 !important;
  font-weight:800;font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.btn-rebet:hover:not(:disabled),.btn-double-bet:hover:not(:disabled){background:rgba(232,200,115,.2) !important}
.btn-rebet:disabled,.btn-double-bet:disabled{cursor:default}
.bet-amount-display{
  font-size:26px;font-weight:800;color:var(--brass-1);
  font-family:var(--f-mono);
  text-shadow:0 0 12px rgba(212,175,55,.4);
}

#timer-wrap{
  margin-top:8px;background:rgba(0,0,0,.4);
  border-radius:4px;height:6px;overflow:hidden;
  border:1px solid rgba(255,255,255,.04);
}
#timer-bar{
  height:100%;background:linear-gradient(90deg, var(--win), var(--win-2));
  border-radius:4px;
  transition:width 1s linear, background .5s;
  width:100%;
  box-shadow:0 0 8px currentColor;
}

/* Timer ring (вокруг активного игрока)
 теперь ring живёт внутри .chair-wrap и обводит КРЕСЛО,
 а не player-field. Inset подобран так, чтобы кольцо обтягивало именно кресло. */
.timer-ring{
  position:absolute;
  /* chair высотой ~46px + площадка снизу/сверху ~14px */
  top:-4px;bottom:-16px;left:-4px;right:-4px;
  border-radius:10px 10px 16px 16px;
  padding:3px;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  -webkit-mask-composite:xor;
  pointer-events:none;opacity:0;
  transition:opacity .3s;z-index:10;
}
.seat-top .timer-ring{
  /* для верхних сидений площадка кресла сверху */
  top:-16px;bottom:-4px;
  border-radius:16px 16px 10px 10px;
}
.timer-ring.active{opacity:1}

/* История раздач */
.history-box{
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.3));
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r-md);
  padding:6px 10px;max-height:100px;
  overflow-y:auto;display:flex;flex-direction:column;gap:2px;
}
.hand-entry{
  display:flex;align-items:center;gap:8px;
  font-size:11px;border-bottom:1px solid rgba(255,255,255,.04);
  padding:3px 0;font-family:var(--f-mono);
}
.hand-link{
  color:var(--info);text-decoration:none;cursor:pointer;
  font-size:11px;white-space:nowrap;font-weight:800;
  padding:2px 6px;border-radius:5px;
  background:rgba(96,165,250,.08);
  border:1px solid rgba(96,165,250,.15);
}
.hand-link:hover{background:rgba(96,165,250,.18);color:#93c5fd}
.h-win{color:var(--win);font-weight:800}
.h-lose{color:var(--lose);font-weight:800}
.h-push{color:var(--ink-mute)}
.hand-entry-dealer{font-size:10px;color:var(--ink-mute);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Иконки исхода */
.outcome-lose{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  background:linear-gradient(180deg,#ef4444,#991b1b);
  border-radius:8px;position:relative;vertical-align:middle;
  border:1.5px solid rgba(255,255,255,.2);
  box-shadow:0 4px 10px rgba(239,68,68,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.outcome-lose::before,.outcome-lose::after{
  content:'';position:absolute;width:3.5px;height:20px;
  background:#fff;border-radius:2px;
}
.outcome-lose::before{transform:rotate(45deg)}
.outcome-lose::after{transform:rotate(-45deg)}
.outcome-win{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  background:linear-gradient(180deg, var(--brass-1), var(--brass-3));
  border-radius:8px;position:relative;vertical-align:middle;
  border:1.5px solid rgba(255,255,255,.3);
  box-shadow:0 4px 12px rgba(212,175,55,.5), inset 0 1px 0 rgba(255,255,255,.4);
  color:#2a1f08;font-size:18px;font-weight:800;
}
.outcome-win::after{content:'★';font-family:var(--f-display)}

/* pop-анимация иконки исхода под каждым боксом — появляется
 во время фазы расчётов, делая результат заметным. */
@keyframes handOutcomePop {
  0%   { opacity: 0; transform: scale(.4) translateY(-6px) }
  60%  { opacity: 1; transform: scale(1.18) translateY(0) }
  100% { opacity: 1; transform: scale(1) translateY(0) }
}

/* облачко-сообщение хода («Ещё», «Чек», «Сплит», «Дабл»)
 позиционируется относительно seat — появляется рядом с картами игрока. */
.action-bubble{
  position:absolute;
  left:50%;top:-8px;
  transform:translate(-50%, -100%);
  background:linear-gradient(180deg, #f9f1dd, #d8c498);
  color:#2a1f08;
  font-family:'Cinzel',serif;font-size:13px;font-weight:700;
  padding:6px 14px;border-radius:18px;
  border:1.5px solid #c47a3a;
  box-shadow:0 4px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5);
  white-space:nowrap;letter-spacing:.4px;
  pointer-events:none;z-index:30;
  animation:actionBubblePop .35s cubic-bezier(.34,1.56,.64,1), actionBubbleFade .6s 1.2s ease-out forwards;
}
.action-bubble::after{
  content:'';position:absolute;bottom:-7px;left:50%;
  transform:translateX(-50%);width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:7px solid #c47a3a;
}
@keyframes actionBubblePop{
  0%{opacity:0;transform:translate(-50%,-80%) scale(.5)}
  100%{opacity:1;transform:translate(-50%,-100%) scale(1)}
}
@keyframes actionBubbleFade{
  0%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-120%) scale(.92)}
}

/* Бейджи дилер/ты */
.dealer-seat-tag{
  background:radial-gradient(circle at 35% 25%, #fff4b0 0%, var(--brass-1) 42%, var(--brass-3) 100%);
  color:#2a1f08;
  width:30px;height:30px;padding:0;border-radius:50%;
  font-family:var(--f-display);
  font-size:18px;font-weight:900;letter-spacing:0;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 4px rgba(0,0,0,.4);
}
.me-seat-tag{
  background:linear-gradient(180deg, #60a5fa, #2563eb);
  color:#fff;
  padding:3px 9px;border-radius:999px;
  font-size:10px;font-weight:800;
  display:inline-block;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 4px rgba(0,0,0,.4);
}
/* отодвигаем «Ты» от стула чтобы не накладывалось
 — для нижнего сидения сдвиг ВНИЗ (margin-top), для верхнего (seat-top) ВВЕРХ */
.chair-label{margin-top:10px}
.seat-top .chair-label{margin-top:0;margin-bottom:10px;bottom:-14px !important}
.vs-dealer-lbl{
  font-size:13px;color:var(--brass-1);
  background:rgba(212,175,55,.12);
  padding:2px 10px;border-radius:8px;
  margin-left:8px;font-weight:700;letter-spacing:.2px;
  border:1px solid rgba(212,175,55,.2);
}

/* панель Владельца */
.owner-tab{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--ink-dim);
  padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.4px;
  border-radius:8px;cursor:pointer;
  transition:all .15s;
}
.owner-tab:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.owner-tab.active{
  background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.06));
  border-color:rgba(212,175,55,.4);
  color:var(--brass-1);
}
/* v7.45.63: period filter — компактные тогглы */
.owner-period-btn{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--ink-dim);
  padding:5px 12px;font-size:11px;font-weight:600;
  border-radius:6px;cursor:pointer;letter-spacing:.3px;
  transition:all .15s;
}
.owner-period-btn:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.owner-period-btn.active{
  background:linear-gradient(180deg, rgba(96,165,250,.25), rgba(96,165,250,.1));
  border-color:rgba(96,165,250,.5);
  color:#93c5fd;
}
.owner-table{
  width:100%;border-collapse:collapse;
  background:rgba(0,0,0,.35);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;font-size:13px;
}
.owner-table th{
  font-family:var(--f-display);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--brass-1);font-weight:600;text-align:left;
  padding:10px 14px;background:rgba(212,175,55,.06);
  border-bottom:1px solid rgba(212,175,55,.15);
}
.owner-table td{
  padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle;
}
.owner-table tr:hover td{background:rgba(255,255,255,.02)}
/* кликабельные строки в отчётах — чуть ярче на hover */
.owner-table tr[onclick]:hover td{background:rgba(212,175,55,.06)}
.owner-table .num{font-family:var(--f-mono);font-weight:700;color:var(--brass-1)}
.owner-table .pos{color:var(--win);font-family:var(--f-mono);font-weight:700}
.owner-table .neg{color:var(--lose);font-family:var(--f-mono);font-weight:700}
.owner-table .dim{color:var(--ink-mute);font-size:11px}
.owner-pill{
  display:inline-block;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
}
.owner-pill.lobby{background:rgba(168,85,247,.18);color:#c084fc;border:1px solid rgba(168,85,247,.3)}
.owner-pill.playing{background:rgba(45,212,167,.18);color:#34d399;border:1px solid rgba(45,212,167,.3)}
.owner-pill.betting{background:rgba(96,165,250,.18);color:#60a5fa;border:1px solid rgba(96,165,250,.3)}
.owner-pill.results{background:rgba(245,158,11,.18);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}
.owner-pill.dealer_turn{background:rgba(232,200,115,.18);color:#e8c873;border:1px solid rgba(212,175,55,.3)}
.owner-section-title{
  font-family:var(--f-display);font-size:14px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--brass-1);margin:8px 0 10px;
}
.owner-empty{
  background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.08);
  border-radius:10px;padding:24px;text-align:center;color:var(--ink-mute);font-size:13px;
}
.owner-stat-card{
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;display:inline-flex;flex-direction:column;gap:4px;min-width:120px;
  margin:0 8px 8px 0;
}
.owner-stat-card .stat-val{font-family:var(--f-mono);font-size:18px;font-weight:800;color:var(--brass-1)}
.owner-stat-card .stat-lbl{font-size:10px;color:var(--ink-mute);letter-spacing:.6px;text-transform:uppercase}

/* карточка итогов круга в history-list (вместо модалки) */
.circle-card{
  background:linear-gradient(180deg, rgba(212,175,55,.14), rgba(13,18,24,.85));
  border:1px solid rgba(212,175,55,.4);
  border-radius:12px;padding:10px 12px;
  margin:4px 0;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.4), 0 0 18px rgba(212,175,55,.1);
  animation:circleCardIn .4s ease-out;
}
@keyframes circleCardIn{
  0%{opacity:0;transform:translateY(-6px) scale(.97)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.circle-card .cc-head{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-display);font-size:12px;
  color:var(--brass-1);letter-spacing:1.5px;text-transform:uppercase;
}
.circle-card .cc-row{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;
  font-size:11px;align-items:center;
}
.circle-card .cc-name{
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:5px;
}
.circle-card .cc-payout{
  font-family:var(--f-mono);font-weight:800;text-align:right;
}
.circle-card .cc-payout.win{color:var(--win)}
.circle-card .cc-payout.lose{color:var(--lose)}
.circle-card .cc-bal{
  font-family:var(--f-mono);color:var(--brass-1);font-weight:700;
  text-align:right;font-size:10px;
}
.circle-card .cc-medal{font-size:13px;line-height:1}
.circle-card .cc-rake{font-size:9px;color:var(--lose);margin-left:4px}

/* Bot бейдж */
.bot-badge{
  background:linear-gradient(180deg, #a855f7, #6b21a8);
  color:#fff;padding:1px 6px;border-radius:5px;
  font-size:8px;font-weight:800;margin-left:4px;
  letter-spacing:.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
/* v7.52.0: значок бота-счётчика (учитывает вышедшие карты) */
.count-badge{
  font-size:10px;margin-left:3px;cursor:help;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.guest-badge{
  background:linear-gradient(180deg, #6b7280, #374151);
  color:#fff;padding:1px 6px;border-radius:5px;
  font-size:8px;font-weight:800;margin-left:4px;
  letter-spacing:.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
/* индикация отключённых игроков */
.offline-badge{
  background:linear-gradient(180deg, #f59e0b, #b45309);
  color:#fff;padding:1px 6px;border-radius:5px;
  font-size:8px;font-weight:800;margin-left:4px;
  letter-spacing:.5px;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  animation:offlinePulse 1.8s ease-in-out infinite;
}
@keyframes offlinePulse{
  0%,100%{opacity:.5}50%{opacity:1}
}
.seat.seat-offline{opacity:.55;filter:grayscale(.5)}
.player-item-lobby.offline{opacity:.55}

.dealer-score-badge{
  display:inline-block;
  background:linear-gradient(180deg, var(--brass-1), var(--brass-3));
  color:#2a1f08;
  border-radius:7px;padding:2px 12px;
  font-weight:800;font-family:var(--f-mono);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 4px rgba(0,0,0,.3);
}

/* Уведомления */
#notif{
  position:fixed;top:38vh;left:50%;
  transform:translateX(-50%);
  background:linear-gradient(180deg, #ef4444, #991b1b);
  color:#fff;
  padding:11px 22px;border-radius:10px;
  display:none;z-index:9999;
  font-weight:700;font-size:14px;letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 12px 32px rgba(0,0,0,.6), 0 0 24px rgba(239,68,68,.3);
}
.app-update-banner{
  position:fixed;
  top:calc(12px + env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  z-index:10030;
  display:none;
  pointer-events:none;
}
.app-update-banner button{
  pointer-events:auto;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  padding:9px 16px;
  background:linear-gradient(180deg,#22c55e,#047857);
  color:#fff;
  font-weight:900;
  font-size:13px;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 24px rgba(34,197,94,.28);
  backdrop-filter:blur(10px);
}
.app-update-banner button:disabled{
  cursor:wait;
  opacity:.72;
}
@media (max-width:760px){
  .app-update-banner{
    top:calc(8px + env(safe-area-inset-top));
    width:calc(100vw - 24px);
    text-align:center;
  }
  .app-update-banner button{
    max-width:100%;
    padding:8px 13px;
    font-size:12px;
  }
}
.dealer-turn-banner{
  background:linear-gradient(180deg, #f59e0b, #b45309);
  color:#1a0e00;
  padding:6px 14px;border-radius:8px;
  font-weight:800;font-size:13px;
  display:inline-block;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(245,158,11,.3);
}

/* Round flash */
#round-flash{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.85);
  background:linear-gradient(180deg, rgba(18,22,30,.96), rgba(8,12,18,.98));
  border-radius:var(--r-lg);
  padding:22px 32px;z-index:8000;
  display:none;text-align:center;min-width:280px;
  border:1px solid var(--brass-2);
  box-shadow:0 16px 60px rgba(0,0,0,.8), 0 0 40px rgba(212,175,55,.2);
  transition:transform .25s ease, opacity .25s;opacity:0;
}
#round-flash.show{display:block;transform:translate(-50%,-50%) scale(1);opacity:1}
#round-flash h3{
  font-family:var(--f-display);
  color:var(--brass-1);font-size:20px;
  margin-bottom:10px;letter-spacing:2px;text-transform:uppercase;
}
.rf-row{
  display:flex;justify-content:space-between;gap:18px;
  font-size:13px;padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.rf-win{color:var(--win);font-weight:800}
.rf-lose{color:var(--lose);font-weight:800}
.rf-push{color:var(--ink-mute)}
.rf-bj{color:var(--brass-1);font-weight:800}

/* Circle overlay */
#circle-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.85);backdrop-filter:blur(8px);
  z-index:9000;display:none;
  align-items:center;justify-content:center;
}
#circle-overlay.show{display:flex}
.circle-modal{
  background:linear-gradient(180deg, rgba(18,22,30,.98), rgba(8,12,18,.99));
  border-radius:var(--r-xl);
  padding:28px;width:92%;max-width:520px;max-height:92vh;
  overflow-y:auto;
  border:1px solid var(--brass-2);
  box-shadow:0 24px 60px rgba(0,0,0,.85), 0 0 60px rgba(212,175,55,.15);
  position:relative;
}
.circle-modal::before{
  content:'';position:absolute;top:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg, transparent, var(--brass-2), transparent);
}
.circle-modal h2{
  font-family:var(--f-display);
  color:var(--brass-1);font-size:24px;
  margin-bottom:16px;text-align:center;
  letter-spacing:3px;text-transform:uppercase;
}
.summary-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r-md);
  padding:14px;margin-top:8px;
}
.summary-row{
  display:grid;grid-template-columns:1fr 110px 100px;
  align-items:center;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:14px;
}
.summary-row span:nth-child(2),.summary-row span:nth-child(3){text-align:right}
.summary-balance{
  font-size:16px;font-weight:800;color:var(--brass-1);
  text-align:right;font-family:var(--f-mono);
}
.btn-ok-circle{
  background:linear-gradient(180deg, var(--win), var(--win-2)) !important;
  color:#fff !important;
  font-size:15px;padding:12px 0;width:100%;
  border-radius:var(--r-md);margin-top:12px;
  font-weight:800;letter-spacing:.4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(16,185,129,.3);
}
.btn-ok-circle:disabled{background:#555 !important;color:#aaa !important}

/* Hand popup */
#hand-popup{
  position:fixed;inset:0;
  background:rgba(0,0,0,.85);backdrop-filter:blur(6px);
  z-index:11000;display:none;align-items:center;justify-content:center;
}
#hand-popup.show{display:flex}
.hand-popup-inner{
  background:linear-gradient(180deg, rgba(18,22,30,.98), rgba(8,12,18,.99));
  border-radius:var(--r-lg);padding:22px;
  width:92%;max-width:440px;max-height:92vh;overflow-y:auto;
  border:1px solid rgba(212,175,55,.3);
  box-shadow:0 16px 40px rgba(0,0,0,.7);
}
.hand-popup-inner h3{
  font-family:var(--f-display);
  color:var(--brass-1);font-size:18px;
  margin-bottom:12px;letter-spacing:1.5px;
}
.hand-popup-inner .hp-dealer{
  color:var(--ink-dim);font-size:12px;margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px;
}
.hand-popup-inner .hp-row{
  display:flex;justify-content:space-between;
  font-size:13px;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.hp-close{
  float:right;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  color:#fff;border-radius:8px;padding:5px 12px;cursor:pointer;
  font-size:12px;margin-left:8px;font-weight:600;
}
.hp-close:hover{background:rgba(255,255,255,.15)}

/* Летящие фишки */
.flying-chip{
  position:fixed;width:26px;height:26px;border-radius:50%;
  z-index:8800;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:800;
  border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 3px 6px rgba(0,0,0,.5);
  font-family:var(--f-mono);
}

/* Balance change animation */
@keyframes balanceFloat{
  0%{opacity:0;transform:translateY(0) scale(.7)}
  15%{opacity:1;transform:translateY(-8px) scale(1.25)}
  80%{opacity:1;transform:translateY(-36px) scale(1)}
  100%{opacity:0;transform:translateY(-52px) scale(.9)}
}
.balance-change-anim{
  position:fixed;pointer-events:none;z-index:8800;
  font-size:18px;font-weight:800;
  animation:balanceFloat 2.2s ease-out forwards;
  text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 18px currentColor;
  white-space:nowrap;letter-spacing:.5px;
  font-family:var(--f-mono);
}

/* Скроллбары */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.3)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--brass-2), var(--brass-3));
  border-radius:3px;
}
::-webkit-scrollbar-thumb:hover{background:var(--brass-1)}

/* Утилиты */
.kbd{
  display:inline-block;padding:2px 6px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:5px;
  font-family:var(--f-mono);font-size:10px;
  color:var(--ink-dim);
}

.divider{
  display:flex;align-items:center;gap:12px;width:100%;
  color:var(--ink-mute);font-size:11px;letter-spacing:2px;text-transform:uppercase;
}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent)}

/* Подсказка под input авто-расчёта */
#cut-cards-display,#join-code{font-family:var(--f-mono)}

/* Round info indicator */
.phase-pill{
  display:inline-block;padding:2px 10px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;
  background:linear-gradient(180deg, var(--brass-1), var(--brass-3));
  color:#2a1f08;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}

/* ═══════════════════════════════════════════════════════════════
 ФИЧИ 1.1 · 1.3 · 3.1 · 3.3 · 3.6
 Аватар, ник-цвет, эмодзи-реакции, броски, профиль
 ═══════════════════════════════════════════════════════════════ */

/* Универсальная модалка */
.modal-bg{
  position:fixed;inset:0;
  background:rgba(0,0,0,.78);backdrop-filter:blur(6px);
  z-index:9400;display:none;
  align-items:center;justify-content:center;
}
.modal-bg.show{display:flex}
.modal-card{
  background:linear-gradient(180deg, rgba(18,22,30,.98), rgba(8,12,18,.99));
  border:1px solid rgba(212,175,55,.3);
  border-radius:var(--r-lg);
  /* v7.47.0: модалка вписана в viewport, без видимого scrollbar.
     Длинный контент → overflow:auto без полосы (скроется через global rule). */
  padding:24px;width:92%;max-width:460px;max-height:92vh;
  display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.8),0 0 36px rgba(212,175,55,.12);
  position:relative;
  overflow:hidden;
}
.modal-card > *{flex-shrink:0}
.modal-card > .modal-scroll-area{flex:1;min-height:0;overflow:auto}
.modal-card h2{
  font-family:var(--f-display);
  color:var(--brass-1);font-size:20px;
  margin-bottom:16px;text-align:center;
  letter-spacing:2px;text-transform:uppercase;
}
.modal-card .close-x{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--ink-dim);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.modal-card .close-x:hover{background:rgba(255,255,255,.1);color:#fff}
.buyin-preset{
  background:rgba(232,200,115,.12);
  color:#e8c873;
  border:1px solid rgba(232,200,115,.35);
  border-radius:7px;
  padding:8px 6px;
  font-weight:900;
  cursor:pointer;
}
/* ползунок суммы байина — золотая тема под стать модалке */
#global-buyin-slider{
  -webkit-appearance:none;appearance:none;height:8px;border-radius:6px;outline:none;
  background:rgba(232,200,115,.18);border:1px solid rgba(232,200,115,.25);
}
#global-buyin-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#f0d68a,#d4af37);border:2px solid rgba(255,255,255,.35);
  box-shadow:0 3px 8px rgba(0,0,0,.5);cursor:pointer;
}
#global-buyin-slider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#f0d68a,#d4af37);border:2px solid rgba(255,255,255,.35);
  box-shadow:0 3px 8px rgba(0,0,0,.5);cursor:pointer;
}
#global-buyin-slider::-moz-range-track{background:transparent}
.table-icon-btn{
  position:fixed;
  z-index:300;
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:0;
  line-height:1;
  letter-spacing:0;
  box-shadow:0 3px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
  cursor:pointer;
  backdrop-filter:blur(7px);
  transition:transform .14s ease, filter .14s ease, opacity .14s ease;
}
.table-icon-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}
.table-icon-btn:disabled{
  opacity:.55;
  cursor:default;
  transform:none;
  filter:none;
}
.table-icon-btn svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.table-icon-btn::after{
  content:attr(data-tip);
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:10000;
  width:max-content;
  max-width:240px;
  padding:6px 9px;
  border-radius:7px;
  background:rgba(10,15,20,.94);
  border:1px solid rgba(255,255,255,.13);
  color:#f4ecdc;
  font:700 11px/1.25 var(--f-body);
  letter-spacing:.2px;
  text-align:left;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(-3px);
  pointer-events:none;
  transition:none;
  display:block;
}
.table-icon-btn:hover::after,
.table-icon-btn:focus-visible::after{
  opacity:1;
  transform:translateY(0);
  left:0;
}
.table-icon-btn--table-invite::after{
  left:auto;
  right:0;
}
.table-icon-btn--table-invite:hover::after,
.table-icon-btn--table-invite:focus-visible::after{
  left:auto;
  right:0;
}
.table-icon-btn--blue{
  background:linear-gradient(180deg,rgba(74,144,244,.92),rgba(35,93,205,.92));
  border-color:rgba(111,176,255,.5);
}
.table-icon-btn--red{
  background:linear-gradient(180deg,rgba(166,45,45,.94),rgba(126,26,26,.94));
  border-color:rgba(255,112,112,.45);
}
.table-icon-btn--gold{
  color:#f3d987;
  background:linear-gradient(180deg,rgba(82,68,32,.78),rgba(42,35,18,.84));
  border-color:rgba(232,200,115,.48);
}
#global-to-lobby-btn,
#personal-to-lobby-btn{
  top:12px;
  left:12px;
}
#global-leave-btn,
#personal-leave-seat-btn{
  top:62px;
  left:12px;
  z-index:302;
}
#personal-table-invite-btn{
  top:18px;
  right:18px;
  z-index:303;
}
body.chat-open #personal-table-invite-btn{
  z-index:320;
}

/* Avatar modal */
.avatar-modal-section{margin-bottom:16px}
.avatar-modal-section h3{
  font-family:var(--f-display);font-size:12px;color:var(--brass-1);
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:10px;font-weight:600;
}
.avatar-tabs{display:flex;gap:6px;margin-bottom:10px}
.avatar-tab{
  flex:1;padding:8px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:8px;
  color:var(--ink-dim);cursor:pointer;
  letter-spacing:.5px;text-transform:uppercase;
}
.avatar-tab.active{
  background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.05));
  color:var(--brass-1);border-color:rgba(212,175,55,.4);
}
.swatch{
  aspect-ratio:1;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:18px;font-weight:800;
  border:2px solid transparent;
  transition:transform .12s, border-color .15s, box-shadow .15s;
  color:#0a0e14;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 4px 10px rgba(0,0,0,.4);
}
.swatch:hover{transform:scale(1.08)}
.swatch.selected{
  border-color:var(--brass-1);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 0 0 3px rgba(212,175,55,.35), 0 6px 14px rgba(212,175,55,.3);
}
.color-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.color-grid .swatch{font-size:0;color:transparent}
.color-grid .swatch.selected::after{
  content:'✓';color:#fff;font-size:14px;font-weight:900;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.emoji-grid{
  display:grid;grid-template-columns:repeat(8,1fr);gap:6px;max-height:240px;overflow-y:auto;
  padding:6px;background:rgba(0,0,0,.2);border-radius:10px;
}
.emoji-grid .swatch{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);font-size:24px;color:#fff;box-shadow:none;
}
.emoji-grid .swatch.selected{
  background:rgba(212,175,55,.15);border-color:var(--brass-1);
}
.letter-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}

.avatar-preview{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:14px;background:rgba(0,0,0,.3);
  border:1px solid var(--line);border-radius:12px;margin-bottom:16px;
}
.avatar-preview .av-disc{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:30px;font-weight:800;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 6px 14px rgba(0,0,0,.5);
  color:#0a0e14;
  border:3px solid rgba(255,255,255,.1);
}
.avatar-preview .preview-text{
  font-family:var(--f-display);font-size:20px;font-weight:700;
}

/* Profile popup */
.profile-card{
  background:linear-gradient(180deg, rgba(18,22,30,.98), rgba(8,12,18,.99));
  border:1px solid rgba(212,175,55,.3);
  border-radius:var(--r-lg);
  padding:24px;width:92%;max-width:440px;position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.8);
}
.profile-card .close-x{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--ink-dim);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.profile-head{
  display:flex;align-items:center;gap:16px;
  margin-bottom:18px;padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.profile-ava{
  width:74px;height:74px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:34px;font-weight:800;
  color:#0a0e14;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 6px 14px rgba(0,0,0,.5);
  border:3px solid var(--brass-2);
}
.profile-name{font-family:var(--f-display);font-size:22px;font-weight:700;letter-spacing:1px}
.profile-title{
  display:inline-block;padding:3px 10px;border-radius:999px;
  background:linear-gradient(180deg, var(--brass-1), var(--brass-3));
  color:#2a1f08;font-size:10px;font-weight:800;letter-spacing:.8px;
  margin-top:6px;text-transform:uppercase;
}
.profile-balance{
  font-family:var(--f-mono);font-size:14px;color:var(--brass-1);
  margin-top:6px;letter-spacing:.5px;font-weight:700;
}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat-cell{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;
  padding:10px;text-align:center;
}
.stat-val{font-family:var(--f-mono);font-size:18px;font-weight:800;color:var(--brass-1)}
.stat-val.pos{color:var(--win)}
.stat-val.neg{color:var(--lose)}
.stat-lbl{font-size:10px;color:var(--ink-mute);letter-spacing:.6px;text-transform:uppercase;margin-top:2px}
.stats-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.stats-tile{
  flex:1;min-width:120px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;
}
.tile-lbl{font-size:10px;color:var(--ink-mute);letter-spacing:.6px;text-transform:uppercase}
.tile-val{font-family:var(--f-mono);font-size:14px;font-weight:800;color:var(--ink);margin-top:2px}

/* Emote picker (floating) */
#emote-picker{
  position:fixed;z-index:9700;
  background:linear-gradient(180deg, rgba(18,22,30,.96), rgba(8,12,18,.98));
  border:1.5px solid rgba(212,175,55,.4);
  border-radius:14px;padding:8px;
  box-shadow:0 16px 36px rgba(0,0,0,.7), 0 0 24px rgba(212,175,55,.15);
  display:none;flex-direction:column;gap:6px;
  backdrop-filter:blur(10px);
}
#emote-picker.show{display:flex}
#emote-picker .target-name{
  font-size:10px;color:var(--brass-1);
  letter-spacing:1px;text-transform:uppercase;
  text-align:center;font-family:var(--f-display);
  padding:2px 8px;
}
#emote-picker .row{display:flex;gap:4px;align-items:center}
#emote-picker .emote-btn,#emote-picker .throw-btn{
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  font-size:20px;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s, background .15s;
}
#emote-picker .emote-btn:hover,#emote-picker .throw-btn:hover{
  background:rgba(212,175,55,.15);
  border-color:rgba(212,175,55,.4);
  transform:scale(1.18);
}
#emote-picker .throw-btn{position:relative;border-color:rgba(168,85,247,.3)}
#emote-picker .throw-btn::after{
  content:attr(data-cost);
  position:absolute;bottom:-7px;right:-7px;
  background:var(--epic);color:#fff;
  font-size:8px;font-weight:800;font-family:var(--f-mono);
  padding:1px 4px;border-radius:6px;
  border:1px solid rgba(0,0,0,.4);line-height:1.2;
}
#emote-picker .divider-row{
  height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  margin:2px 0;
}
#emote-picker .label-mini{
  font-size:9px;color:var(--ink-mute);letter-spacing:.8px;
  text-transform:uppercase;text-align:center;
}

/* Emote bubble всплывает над креслом */
.emote-bubble{
  position:absolute;pointer-events:none;z-index:50;
  font-size:30px;left:50%;top:0;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(212,175,55,.3));
  animation:emoteFly 2.6s ease-out forwards;
}
@keyframes emoteFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  10%{opacity:1;transform:translate(-50%,-220%) scale(1.4)}
  60%{opacity:1;transform:translate(-50%,-280%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-360%) scale(.9)}
}

.emote-streak-flash{
  position:absolute;inset:-8px;border-radius:18px;
  border:3px solid rgba(212,175,55,.7);
  box-shadow:0 0 40px rgba(212,175,55,.6), inset 0 0 24px rgba(212,175,55,.3);
  animation:streakPulse 1.6s ease-out forwards;
  pointer-events:none;z-index:8;
}
@keyframes streakPulse{
  0%{opacity:0;transform:scale(.85)}
  20%{opacity:1;transform:scale(1.05)}
  100%{opacity:0;transform:scale(1.2)}
}

/* Throw projectile */
.throw-projectile{
  position:fixed;z-index:9700;pointer-events:none;
  font-size:42px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.7));
  transition:left .9s cubic-bezier(.45,1.2,.7,1), top .9s cubic-bezier(.55,0,.7,.4), transform .9s linear;
}
.throw-impact{
  position:fixed;z-index:9701;pointer-events:none;
  font-size:48px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.8));
  animation:impactBurst .7s ease-out forwards;
}
@keyframes impactBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.6) rotate(20deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.1) rotate(-20deg)}
}

/* ═══════════════════════════════════════════════════════════════════
 семантические эмоции (em:*) и категорийные
 предметы (it:*) — CSS из мокапа v7.29.
 ═══════════════════════════════════════════════════════════════════ */
.fx-layer{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:220px;height:220px;pointer-events:none;z-index:9;
  display:flex;align-items:center;justify-content:center;
}
.seat-top .fx-layer{top:auto;bottom:0}
.fx-layer.fx-shake{animation:fxLayerShake .55s cubic-bezier(.36,.07,.19,.97) both}
@keyframes fxLayerShake{
  10%,90%{transform:translateX(calc(-50% - 2px))}
  20%,80%{transform:translateX(calc(-50% + 3px))}
  30%,50%,70%{transform:translateX(calc(-50% - 5px))}
  40%,60%{transform:translateX(calc(-50% + 5px))}
}
.emote{
  position:absolute;font-size:42px;line-height:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.7));
  animation:emoteIn .42s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes emoteIn{
  0%{opacity:0;transform:translateY(20px) scale(.4) rotate(-15deg)}
  60%{opacity:1;transform:translateY(-8px) scale(1.18) rotate(6deg)}
  100%{opacity:1;transform:translateY(-14px) scale(1) rotate(0)}
}
.emote.float-out{animation:emoteOutV2 1s ease-in forwards}
@keyframes emoteOutV2{
  to{opacity:0;transform:translateY(-90px) scale(.8) rotate(-12deg)}
}
.emote-burst{
  position:absolute;inset:50% 50% auto auto;width:0;height:0;
  pointer-events:none;
}
.emote-burst span{
  position:absolute;font-size:20px;
  animation:burstFly 1.1s ease-out forwards;
}
@keyframes burstFly{
  0%{transform:translate(0,0) scale(.3);opacity:0}
  20%{opacity:1;transform:translate(var(--dx,0), var(--dy,0)) scale(1.1)}
  100%{transform:translate(calc(var(--dx,0)*2.4), calc(var(--dy,0)*2.4 + 40px)) scale(.6);opacity:0}
}
.emote.fire-glow{text-shadow:0 0 12px #ff6a2e, 0 0 24px #ff3b1e}
.fire-ring{
  position:absolute;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,140,60,.55) 0%, rgba(255,90,40,.25) 40%, transparent 70%);
  animation:fireRing 1.6s ease-out forwards;pointer-events:none;
}
@keyframes fireRing{
  0%{transform:scale(.3);opacity:0}
  30%{opacity:1}
  100%{transform:scale(1.6);opacity:0}
}
.sweat-drop{
  position:absolute;font-size:22px;
  animation:sweatFall 1.2s ease-in forwards;pointer-events:none;
}
@keyframes sweatFall{
  0%{opacity:0;transform:translateY(-10px)}
  20%{opacity:1}
  100%{opacity:0;transform:translateY(60px)}
}
.crown-flash{
  position:absolute;top:-20px;font-size:40px;
  filter:drop-shadow(0 0 14px rgba(255,210,80,.9));
  animation:crownPulse 1.4s ease-out forwards;pointer-events:none;
}
@keyframes crownPulse{
  0%{opacity:0;transform:scale(.4) rotate(-10deg)}
  50%{opacity:1;transform:scale(1.2) rotate(8deg)}
  100%{opacity:0;transform:scale(1) rotate(0) translateY(-20px)}
}
.shake-seat{animation:shakeSeatV2 .55s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shakeSeatV2{
  10%,90%{transform:translate(-50%,-50%) translateX(-2px)}
  20%,80%{transform:translate(-50%,-50%) translateX(3px)}
  30%,50%,70%{transform:translate(-50%,-50%) translateX(-5px)}
  40%,60%{transform:translate(-50%,-50%) translateX(5px)}
}
.player-field.glow-win{
  animation:glowWinV2 1.4s ease-out;
}
@keyframes glowWinV2{
  0%{box-shadow:0 6px 20px rgba(0,0,0,.55)}
  40%{box-shadow:0 6px 20px rgba(0,0,0,.55), 0 0 36px rgba(45,212,167,.85), 0 0 64px rgba(45,212,167,.5)}
  100%{box-shadow:0 6px 20px rgba(0,0,0,.55)}
}
.splat{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;z-index:10;
  animation:splatPop .3s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes splatPop{to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.splat.fade{animation:splatFade 3.5s ease-out forwards}
@keyframes splatFade{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  80%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(.95);opacity:0}
}
.screen-crack{
  position:absolute;inset:0;pointer-events:none;z-index:40;
  opacity:0;animation:crackShow 2.6s ease-out forwards;
}
@keyframes crackShow{
  0%{opacity:0;transform:scale(.85)}
  10%{opacity:1;transform:scale(1)}
  80%{opacity:1}
  100%{opacity:0}
}
.egg-overlay{
  position:absolute;inset:-6px;pointer-events:none;z-index:35;
  border-radius:12px;overflow:hidden;
  opacity:0;animation:eggShow 3s ease-out forwards;
}
@keyframes eggShow{
  0%{opacity:0;transform:scale(.6) rotate(-6deg)}
  15%{opacity:1;transform:scale(1) rotate(0)}
  85%{opacity:1}
  100%{opacity:0;transform:scale(1.05)}
}
.flash-bomb{
  position:absolute;inset:-40px;pointer-events:none;z-index:50;
  background:radial-gradient(circle, #fff 0%, rgba(255,200,80,.7) 30%, transparent 70%);
  opacity:0;animation:bombFlash 1.2s ease-out forwards;
}
@keyframes bombFlash{
  0%{opacity:0;transform:scale(.3)}
  10%{opacity:1;transform:scale(1.3)}
  40%{opacity:.4}
  100%{opacity:0;transform:scale(1.6)}
}
.water-drops{position:absolute;inset:0;pointer-events:none;z-index:36}
.water-drops span{
  position:absolute;top:-10px;font-size:18px;
  animation:dropFall 1.4s ease-in forwards;
}
@keyframes dropFall{to{transform:translateY(80px);opacity:0}}
.hue-flicker{animation:hueFlick 2s ease-out forwards}
@keyframes hueFlick{
  0%{filter:none}
  10%{filter:hue-rotate(45deg) brightness(1.2) saturate(1.5)}
  50%{filter:hue-rotate(-25deg) brightness(.95) saturate(1.4)}
  100%{filter:none}
}
.rainbow-nick .player-nick{
  background:linear-gradient(90deg,#ff5b5b,#ffa54b,#ffe14b,#5bff8d,#5bd6ff,#7c5bff,#ff5bd6);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rainbowMove 1.4s linear, rainbowFade 2.4s 1.2s forwards;
}
@keyframes rainbowMove{from{background-position:0 0}to{background-position:200% 0}}
@keyframes rainbowFade{to{-webkit-text-fill-color:#fff;background:none}}

/* Кнопки v2 в emote-picker (с подписями) */
#emote-picker .em-v2-btn, #emote-picker .it-v2-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:4px 6px;min-width:48px;height:44px;
  font-size:13px;line-height:1;
}
#emote-picker .ev2-emoji, #emote-picker .itv2-emoji{font-size:18px;line-height:1}
#emote-picker .ev2-label, #emote-picker .itv2-label{
  font-size:8px;letter-spacing:.2px;color:var(--ink-dim);font-weight:700;
}

/* Кнопка профиля в лобби */
.btn-profile{
  background:linear-gradient(180deg, rgba(168,85,247,.5), rgba(107,33,168,.6)) !important;
  color:#fff !important;
  border:1px solid rgba(168,85,247,.5) !important;
  font-size:12px !important;padding:8px 14px !important;
  font-weight:700;letter-spacing:.4px;
}

/* Кликабельность кресла */
.seat .chair-wrap{cursor:pointer}
.seat .chair-wrap:hover .chair{
  filter:brightness(1.15);
  box-shadow:0 0 18px rgba(212,175,55,.4), 0 4px 12px rgba(0,0,0,.6);
}

/* v7.45.25 #fix2: рулетка выбора дилера — без затемнения всего экрана.
 Раньше: position:fixed;inset:0;rgba(0,0,0,.88);backdrop-filter:blur(6px)
 — закрывала весь экран. Теперь: маленькая карточка по центру viewport,
 без overlay, без блюра — стол и фон остаются видимыми. */
#dealer-drum-overlay{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  background:linear-gradient(180deg,rgba(15,32,24,.96),rgba(7,15,12,.96));
  border:2px solid rgba(212,175,55,.55);border-radius:14px;
  padding:18px 28px;
  box-shadow:0 12px 48px rgba(0,0,0,.75), 0 0 60px rgba(212,175,55,.25);
  z-index:8500;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;min-width:280px;max-width:88vw;
}
#dealer-drum-overlay.show{display:flex}
.dealer-drum-title{
  font-family:var(--f-display);font-size:18px;color:var(--brass-1);
  letter-spacing:3px;text-transform:uppercase;font-weight:600;
  text-shadow:0 2px 8px rgba(0,0,0,.8), 0 0 24px rgba(212,175,55,.3);
  text-align:center;
}
.dealer-drum-frame{
  position:relative;
  width:340px;height:84px;
  background:linear-gradient(180deg, rgba(18,22,30,.95), rgba(8,12,18,.99));
  border:2px solid var(--brass-2);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 16px 40px rgba(0,0,0,.75),
    0 0 36px rgba(212,175,55,.25),
    inset 0 2px 0 rgba(255,255,255,.06);
}
.dealer-drum-frame::before, .dealer-drum-frame::after{
  /* Затемнения сверху и снизу — эффект «барабана» */
  content:'';position:absolute;left:0;right:0;height:24px;
  pointer-events:none;z-index:3;
}
.dealer-drum-frame::before{
  top:0;background:linear-gradient(180deg, rgba(8,12,18,.98), transparent);
}
.dealer-drum-frame::after{
  bottom:0;background:linear-gradient(0deg, rgba(8,12,18,.98), transparent);
}
.dealer-drum-pointer{
  position:absolute;left:0;right:0;top:50%;height:0;
  border-top:2px dashed rgba(212,175,55,.55);
  transform:translateY(-1px);
  z-index:4;pointer-events:none;
}
.dealer-drum-pointer::before, .dealer-drum-pointer::after{
  content:'';position:absolute;top:-7px;
  border:7px solid transparent;
  pointer-events:none;
}
.dealer-drum-pointer::before{
  left:-2px;border-left-color:var(--brass-2);
}
.dealer-drum-pointer::after{
  right:-2px;border-right-color:var(--brass-2);
}
.dealer-drum-strip{
  position:absolute;left:0;right:0;top:0;
  will-change:transform;
}
.dealer-drum-item{
  height:84px;display:flex;align-items:center;justify-content:center;
  gap:12px;padding:0 22px;
  font-family:var(--f-display);font-size:22px;font-weight:700;
  letter-spacing:1px;color:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.04);
  filter:blur(.5px) brightness(.7);
  transition:filter .25s, transform .25s;
}
.dealer-drum-item.focus{
  filter:none;
  background:linear-gradient(90deg, transparent 0%, rgba(212,175,55,.12) 50%, transparent 100%);
  transform:scale(1.05);
}
.dealer-drum-item .drum-ava{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:22px;font-weight:800;
  color:#0a0e14;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.5);
  flex-shrink:0;
}
.dealer-drum-item .drum-ava.emoji{
  background:transparent !important; box-shadow:none;
  color:#fff;font-size:32px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
.dealer-drum-final-tag{
  font-family:var(--f-display);font-size:16px;
  color:var(--brass-1);letter-spacing:3px;text-transform:uppercase;
  opacity:0;transition:opacity .4s;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.dealer-drum-final-tag.show{opacity:1}
@keyframes drumCrown{
  0%{transform:translateY(20px) scale(.5);opacity:0}
  60%{transform:translateY(-4px) scale(1.2);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}
.drum-crown{
  font-size:34px;
  filter:drop-shadow(0 4px 12px rgba(212,175,55,.5));
  animation:drumCrown .55s ease-out forwards;
}

/* ───── v7.105.0: ВАРИАНТ 2 барабана — горизонтальная ЛЕНТА ───── */
#dealer-drum-overlay.lane .lane-frame{
  position:relative;width:360px;height:118px;overflow:hidden;
  background:linear-gradient(180deg,rgba(18,22,30,.95),rgba(8,12,18,.99));
  border:2px solid var(--brass-2);border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.75),0 0 36px rgba(212,175,55,.25),inset 0 2px 0 rgba(255,255,255,.06);
}
#dealer-drum-overlay.lane .lane-frame::before,#dealer-drum-overlay.lane .lane-frame::after{
  content:'';position:absolute;top:0;bottom:0;width:46px;pointer-events:none;z-index:3;
}
#dealer-drum-overlay.lane .lane-frame::before{left:0;background:linear-gradient(90deg,rgba(8,12,18,.98),transparent)}
#dealer-drum-overlay.lane .lane-frame::after{right:0;background:linear-gradient(270deg,rgba(8,12,18,.98),transparent)}
.lane-strip{position:absolute;left:0;top:0;height:118px;display:flex;will-change:transform}
.lane-item{width:132px;height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex-shrink:0;font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--ink);filter:blur(.5px) brightness(.7);transition:filter .25s,transform .25s}
.lane-item.focus{filter:none;transform:scale(1.08);background:radial-gradient(ellipse at center,rgba(212,175,55,.16),transparent 70%)}
.lane-pointer{position:absolute;left:50%;top:0;bottom:0;width:0;border-left:2px dashed rgba(212,175,55,.6);transform:translateX(-1px);z-index:4;pointer-events:none}
.lane-pointer::before,.lane-pointer::after{content:'';position:absolute;left:-7px;border:7px solid transparent}
.lane-pointer::before{top:-2px;border-top-color:var(--brass-2)}
.lane-pointer::after{bottom:-2px;border-bottom-color:var(--brass-2)}

/* ───── v7.105.0: ВАРИАНТ 3 барабана — ПРОЖЕКТОР ───── */
#dealer-drum-overlay.spotlight .spot-grid{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:520px;padding:8px;
}
.spot-item{
  width:104px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;
  border:2px solid rgba(255,255,255,.07);border-radius:12px;
  background:rgba(18,22,30,.7);font-family:var(--f-display);font-size:14px;font-weight:700;color:var(--ink);
  opacity:.55;transition:all .18s ease;
}
.spot-item.lit{
  opacity:1;transform:scale(1.12) translateY(-3px);
  border-color:var(--brass-1);
  background:radial-gradient(ellipse at center,rgba(212,175,55,.22),rgba(18,22,30,.9));
  box-shadow:0 8px 26px rgba(212,175,55,.4),0 0 0 4px rgba(212,175,55,.1);
}

/* ───── v7.105.0: анимация СРЕЗКИ + ПЕРЕМЕШИВАНИЯ нового башмака (3 вида) ───── */
#reshuffle-overlay{
  position:absolute;inset:0;z-index:8600;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(ellipse at center,rgba(7,15,12,.78),rgba(0,0,0,.86));
  animation:rsFade .3s ease both;
}
#reshuffle-overlay.body-fallback{position:fixed}
#reshuffle-overlay.show{display:flex}
@keyframes rsFade{from{opacity:0}to{opacity:1}}
#reshuffle-overlay .rs-stage{position:relative;width:220px;height:150px}
#reshuffle-overlay .rs-title{font-family:var(--f-display);font-size:18px;color:var(--brass-1);letter-spacing:2px;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 26px rgba(212,175,55,.35);text-align:center}
#reshuffle-overlay .rs-sub{font-size:12px;color:#a8b3c2;letter-spacing:1px}
/* мини-карта (общий вид) */
#reshuffle-overlay .rs-deck,#reshuffle-overlay .rs-fan-card,#reshuffle-overlay .rs-half i,#reshuffle-overlay .rs-spray i{
  position:absolute;width:60px;height:86px;border-radius:8px;
  background:linear-gradient(135deg,#fafafa,#e2e6ea);border:1px solid rgba(0,0,0,.25);
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
#reshuffle-overlay .rs-cutcard{
  position:absolute;width:62px;height:90px;border-radius:8px;left:80px;top:30px;
  background:repeating-linear-gradient(45deg,#c0152b,#c0152b 7px,#9c0f22 7px,#9c0f22 14px);
  border:2px solid #ffd0d0;box-shadow:0 6px 20px rgba(192,21,43,.6);
}
#reshuffle-overlay .rs-cutcard.small{width:46px;height:68px}
/* V1: красная карта выезжает + стопка, карты разлетаются и собираются */
#reshuffle-overlay.v1 .rs-deck{left:80px;top:32px;animation:rsDeckPulse 2.6s ease both}
#reshuffle-overlay.v1 .rs-cutcard{animation:rsCutEject 2.6s cubic-bezier(.3,.8,.3,1) both}
#reshuffle-overlay.v1 .rs-spray i{left:80px;top:32px;opacity:0;animation:rsSpray 1.4s ease 1s both}
#reshuffle-overlay.v1 .rs-spray i:nth-child(1){--dx:-90px;--dr:-22deg}
#reshuffle-overlay.v1 .rs-spray i:nth-child(2){--dx:-46px;--dr:-11deg}
#reshuffle-overlay.v1 .rs-spray i:nth-child(3){--dx:-12px;--dr:-4deg}
#reshuffle-overlay.v1 .rs-spray i:nth-child(4){--dx:18px;--dr:5deg}
#reshuffle-overlay.v1 .rs-spray i:nth-child(5){--dx:52px;--dr:12deg}
#reshuffle-overlay.v1 .rs-spray i:nth-child(6){--dx:96px;--dr:24deg}
@keyframes rsCutEject{0%{transform:translateX(0) translateY(0)}30%{transform:translateX(86px) translateY(-6px) rotate(6deg)}70%{transform:translateX(86px) translateY(-6px) rotate(6deg);opacity:1}100%{transform:translateX(150px) translateY(40px) rotate(20deg);opacity:0}}
@keyframes rsDeckPulse{0%,55%{transform:scale(1)}70%{transform:scale(1.06) rotate(-2deg)}100%{transform:scale(1)}}
@keyframes rsSpray{0%{opacity:0;transform:translate(0,0) rotate(0)}30%{opacity:1}100%{opacity:1;transform:translateX(var(--dx)) translateY(calc(var(--dx) * -0.05)) rotate(var(--dr))}}
/* V2: веер карт раскрывается и схлопывается */
#reshuffle-overlay.v2 .rs-fan-card{left:80px;top:32px;transform-origin:50% 120%;animation:rsFan 2.6s ease both;animation-delay:calc(var(--i) * .05s)}
@keyframes rsFan{0%{transform:rotate(0)}40%{transform:rotate(calc((var(--i) - 4) * 17deg))}75%{transform:rotate(calc((var(--i) - 4) * 17deg))}100%{transform:rotate(0)}}
/* V3: riffle — две половины складываются */
#reshuffle-overlay.v3 .rs-half{position:absolute;top:32px;width:60px;height:86px}
#reshuffle-overlay.v3 .rs-half.left{left:30px}
#reshuffle-overlay.v3 .rs-half.right{left:130px}
#reshuffle-overlay.v3 .rs-half.left i{left:0;animation:rsRiffleL 2.6s ease both;animation-delay:calc(var(--i) * .08s)}
#reshuffle-overlay.v3 .rs-half.right i{left:0;animation:rsRiffleR 2.6s ease both;animation-delay:calc(var(--i) * .08s)}
@keyframes rsRiffleL{0%{transform:translateX(0) translateY(calc(var(--i) * -2px))}45%{transform:translateX(70px) translateY(calc(var(--i) * -2px))}100%{transform:translateX(50px) translateY(0)}}
@keyframes rsRiffleR{0%{transform:translateX(0) translateY(calc(var(--i) * -2px))}45%{transform:translateX(-70px) translateY(calc(var(--i) * -2px))}100%{transform:translateX(-50px) translateY(0)}}

/* Аватар-кружок в нике */
.player-ava-disc{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  font-family:var(--f-display);font-size:12px;font-weight:800;
  color:#0a0e14;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.5);
  border:1.5px solid rgba(0,0,0,.4);
  flex-shrink:0;
}
.player-ava-disc.emoji{
  background:transparent !important;
  border:none;box-shadow:none;
  font-size:18px;color:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));
}


/* мини-блок maintenanceShake (был третьим <style> в index.html) */
@keyframes maintenanceShake {
  0%   { transform: translate(0, 0) rotate(0deg) }
  25%  { transform: translate(-2px, 1px) rotate(-1.5deg) }
  50%  { transform: translate(2px, -1px) rotate(1.5deg) }
  75%  { transform: translate(-1px, 2px) rotate(-1deg) }
  100% { transform: translate(2px, 0) rotate(1deg) }
}

/* ═══════════ v7.110.58: ДЕСКТОП-правки (стол прямоугольный +10% ширины, жирнее карты) ═══════════ */
/* Только десктоп (min-width:761px). Мобильная раскладка (mobile-screens.css, max-width:760)
   не затрагивается — там свой прямоугольный стол по мокапам v711013. */
@media (min-width: 761px) {
  /* (1) стол шире на 10%: 920 → 1012px */
  .table-wrap { max-width: 1012px; }
  /* (1) форма стола — СКРУГЛЁННЫЙ ПРЯМОУГОЛЬНИК вместо овала (border-radius:50%).
     Деревянный обод (box-shadow-кольца) и фетр следуют новому радиусу. */
  .poker-table { border-radius: 42px; }
  /* (3) достоинства (ранги) и масти карт — жирнее. Ранги уже 800 → 900; масти были
     дефолтные (~400) → 900 + лёгкая обводка currentColor, т.к. unicode-глифы мастей
     не всегда тяжелеют от font-weight. */
  .card-tl, .card-br { font-weight: 900; }
  .card-tr, .card-bl { font-weight: 900; -webkit-text-stroke: 0.6px currentColor; }
  /* v7.110.66 (п.1): контент «Моё лобби» (форма «Настройки/Создать», список столов)
     растягиваем на всю ширину средней колонки. Раньше #tab-my-content имел
     align-items:center → блоки сжимались до ~830px и центрировались, оставляя пустое
     место между ними и левой колонкой (код лобби и т.д.). Теперь блоки заполняют ширину. */
  #tab-my-content { align-items: stretch !important; }   /* !important — перебиваем inline align-items:center в index.html */
}