/* Игровой стол (макеты 8, 11, 13). */

.screen--table { gap: 10px; }
.screen--table > * { animation: none; }

.conn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); flex: none; }
.conn-dot[data-status='connecting'] { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.conn-dot[data-status='offline'] { background: var(--red); box-shadow: 0 0 8px var(--red); }

.ptable-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12.5px; color: var(--text-2); min-height: 18px; }
.ptable-status { text-align: center; font-size: 14px; min-height: 21px; color: var(--text-2); }
.ptable-status[data-mine='true'] { color: #fff; font-weight: 600; text-shadow: 0 0 14px var(--red-glow); }
.ptable-extra { display: flex; flex-direction: column; gap: 8px; }
.ptable-extra:empty { display: none; }
.ptable-notice { padding: 10px 14px; }

/* ---------- Стол ---------- */
/* Размеры и положение стола, мест и дилера считает computeLayout() в table.js и передаёт сюда. */
/* --rim и --felt — оформление стола от его создателя (магазин); по умолчанию красный неон. */
.ptable {
  position: relative; width: 100%; min-height: 300px; container-type: inline-size; margin: 4px 0 6px; --seat: 46px; --plate-h: 30px;
  --rim: #ff2a33;
  --felt: #070708;
  --rim-neon: 0 0 0 1px color-mix(in srgb, var(--rim) 22%, transparent), 0 0 16px color-mix(in srgb, var(--rim) 38%, transparent), inset 0 0 14px color-mix(in srgb, var(--rim) 14%, transparent);
  --rim-neon-strong: 0 0 0 1px color-mix(in srgb, var(--rim) 40%, transparent), 0 0 22px color-mix(in srgb, var(--rim) 60%, transparent), inset 0 0 18px color-mix(in srgb, var(--rim) 22%, transparent);
}
.ptable__dealer, .ptable__dealer-hands { position: absolute; background-image: url('/assets/img/dealer.jpg'); background-repeat: no-repeat; pointer-events: none; }
/* Корпус дилера — за столом; тёмный фон картинки растворяется маской */
.ptable__dealer {
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Руки с картами — над столом и только во время раздачи: дилер «ждёт», пока игра не началась */
.ptable__dealer-hands {
  z-index: 2;
  mix-blend-mode: lighten;
  opacity: 0;
  translate: 0 -8px;
  transition: opacity 260ms ease-out, translate 320ms var(--ease-out);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.ptable[data-dealing='true'] .ptable__dealer-hands { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .ptable__dealer-hands { translate: 0 0; transition: opacity 200ms ease-out; } }

.ptable__felt {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  border-radius: 50%;
  background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--rim) 9%, #151517), var(--felt) 78%);
  background-size: cover;
  background-position: center;
  border: 2px solid color-mix(in srgb, var(--rim) 94%, #fff);
  box-shadow: 0 0 0 5px #0c0c0e, 0 0 0 6px rgba(255, 255, 255, 0.28), 0 0 26px color-mix(in srgb, var(--rim) 50%, transparent), inset 0 0 30px color-mix(in srgb, var(--rim) 18%, transparent), inset 0 0 0 6px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
}
.ptable__logo { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 300ms ease-out; pointer-events: none; }
.ptable__logo .logo-img { width: 62%; filter: none; }
.ptable__logo[data-dim='true'] { opacity: 0.08; }
/* Стол с фото-дизайном: логотип не перекрывает изображение */
.ptable[data-photo='true'] .ptable__logo { display: none; }
.ptable__board { position: relative; z-index: 3; display: flex; gap: 4px; min-height: calc(var(--board-card, 34px) * 1.4); align-items: center; }
.ptable__pot { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 5cqw; }
.ptable__pot-main { font-size: clamp(12px, 3.4cqw, 17px); font-weight: 600; padding: 2px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); border: 1px solid var(--line-soft); }
.ptable__pot-side { font-size: clamp(10px, 2.5cqw, 12.5px); color: var(--text-2); }
.ptable__seats { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ptable__seats > * { pointer-events: auto; }

/* ---------- Место игрока ---------- */
/* Точка привязки — центр аватара; табличка с ником и стеком висит с дальней от стола стороны. */
.pseat { position: absolute; width: var(--seat); height: var(--seat); translate: -50% -50%; }
.pseat__box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22%;
  border: 1px solid color-mix(in srgb, var(--rim) 92%, transparent);
  background: #070708;
  box-shadow: var(--rim-neon);
  display: grid;
  place-items: center;
  padding: 0;
  transition: box-shadow 200ms ease-out, opacity 200ms ease-out, border-color 200ms ease-out;
}
/* Аватар занимает всё место игрока — скруглённый прямоугольник целиком (кэш и турнир) */
.pseat__box { overflow: hidden; }
.pseat__box .avatar { width: 100% !important; height: 100% !important; border-radius: 0; background: none; }
.pseat__box .avatar img:not(.avatar__chip) { border-radius: 0; outline: 0; }
.pseat--empty .pseat__box { border-color: color-mix(in srgb, var(--rim) 45%, transparent); box-shadow: none; opacity: 0.7; }
.pseat--folded .pseat__box, .pseat--away .pseat__box { opacity: 0.45; }
.pseat--active .pseat__box { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), var(--rim-neon-strong); }
.pseat--winner .pseat__box { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 22px rgba(53, 208, 127, 0.6); }
.pseat--me .pseat__plate { border-color: rgba(255, 255, 255, 0.5); }

/* Обратный отсчёт хода: полоса под аватаром сжимается за время на ход */
.pseat__timer { position: absolute; left: 8%; right: 8%; bottom: 6%; height: 4px; border-radius: 2px; background: #fff; transform-origin: left center; animation: turn-timer linear both; z-index: 2; }
@keyframes turn-timer { from { transform: scaleX(1); background: #fff; } 70% { background: var(--amber); } to { transform: scaleX(0); background: var(--red); } }

.pseat__plate { position: absolute; left: 50%; top: calc(100% + 3px); translate: -50% 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 120%; height: var(--plate-h); padding: 0 4px; border-radius: 8px; background: rgba(0, 0, 0, 0.72); border: 1px solid var(--line-soft); line-height: 1.15; }
.pseat--above .pseat__plate { top: auto; bottom: calc(100% + 3px); }
.pseat__name { font-size: clamp(9.5px, 2.6cqw, 12px); color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pseat__stack { font-size: clamp(10.5px, 2.9cqw, 13.5px); font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pseat__stack--hand { color: var(--green); font-weight: 600; font-size: clamp(9.5px, 2.5cqw, 12px); }
.pseat__stack--label { font-size: clamp(8.5px, 2.25cqw, 11px); letter-spacing: -0.01em; text-overflow: clip; }
.pseat__dealer { position: absolute; top: -6%; right: -14%; width: 5cqw; height: 5cqw; max-width: 24px; max-height: 24px; min-width: 16px; min-height: 16px; border-radius: 50%; display: grid; place-items: center; background: #f1f1f3; color: #0b0b0d; font-size: clamp(9px, 2.4cqw, 12px); font-weight: 800; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.pseat__cards { position: absolute; bottom: 5%; left: 50%; translate: -50% 0; z-index: 1; display: flex; gap: 2px; pointer-events: none; }
.pseat__cards .pcard:first-child { rotate: -7deg; }
.pseat__cards .pcard:last-child { rotate: 7deg; }
.pseat__action { position: absolute; z-index: 2; top: 24%; left: 50%; translate: -50% -50%; padding: 2px 8px; border-radius: 999px; font-size: clamp(9.5px, 2.5cqw, 12px); font-weight: 700; background: rgba(0, 0, 0, 0.86); border: 1px solid var(--line); white-space: nowrap; animation: fade-in 200ms ease-out both; pointer-events: none; }
.pseat__action--fold { color: var(--text-3); }
.pseat__action--raise, .pseat__action--bet { border-color: var(--red); color: #ff9ba0; }
.pseat__win { position: absolute; top: 6%; left: 50%; translate: -50% 0; padding: 2px 10px; border-radius: 999px; background: var(--green); color: #04130b; font-weight: 800; font-size: clamp(11px, 3cqw, 14px); white-space: nowrap; animation: fade-in 300ms ease-out both; z-index: 2; }
.pseat__emoji { position: absolute; top: -40%; left: 50%; font-size: 24px; animation: emoji-pop 1800ms ease-out both; pointer-events: none; z-index: 3; }
@keyframes emoji-pop { 0% { opacity: 0; translate: -50% 8px; } 15% { opacity: 1; translate: -50% 0; } 80% { opacity: 1; } 100% { opacity: 0; translate: -50% -14px; } }

.pbet { position: absolute; translate: -50% -50%; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.78); border: 1px solid var(--line-soft); font-size: clamp(10px, 2.7cqw, 13px); font-weight: 700; white-space: nowrap; z-index: 1; }
.pbet i { width: 1.1em; height: 1.1em; border-radius: 50%; background: radial-gradient(circle, #111 38%, var(--red) 40%, var(--red) 62%, #f1f1f3 64%); }

/* ---------- Карты ---------- */
.pcard { --w: clamp(34px, 10.4cqw, 58px); position: relative; width: var(--w); aspect-ratio: 5 / 7; border-radius: 12%; background: linear-gradient(160deg, #1b1b1f, #09090b); border: 1px solid rgba(255, 255, 255, 0.55); color: #f4f4f5; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 6% 9%; line-height: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7); flex: none; }
.pcard b { font-size: calc(var(--w) * 0.36); font-weight: 800; letter-spacing: -0.04em; }
.pcard i { font-style: normal; font-size: calc(var(--w) * 0.34); margin-top: 2%; }
.pcard::after { content: attr(aria-label); position: absolute; right: 8%; bottom: 4%; font-size: 0; }
.pcard--red { color: #ff3b44; border-color: rgba(255, 70, 80, 0.8); }
.pcard--light { background: linear-gradient(160deg, #ffffff, #dfdfe4); color: #0b0b0d; border-color: #fff; }
.pcard--light.pcard--red { color: #d0111b; }
.pcard--dim { opacity: 0.4; }
.pcard--img { padding: 0; overflow: hidden; background: #0c0c0e; }
.pcard--img img { width: 100%; height: 100%; object-fit: cover; }
.pcard--sm { --w: clamp(18px, 5.4cqw, 30px); }
.pcard--back { background: repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, var(--card-line) 22%, transparent) 4px 5px), var(--card-back); border-color: var(--card-line); }
.ptable__board .pcard { --w: var(--board-card, 34px); animation: fade-in 250ms ease-out both; }
@media (prefers-reduced-motion: no-preference) {
  .ptable__board .pcard { animation-name: card-in; }
  @keyframes card-in { from { opacity: 0; transform: translateY(-10px) scale(0.96); } }
}

/* ---------- Панель действий ---------- */
.actionbar { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 8px; padding: 10px; border-radius: 20px; border-color: rgba(255, 255, 255, 0.24); box-shadow: var(--glass); container-type: inline-size; }
.actionbar[data-turn='true'] { border-color: rgba(255, 70, 80, 0.95); box-shadow: var(--neon); }
.actionbar__cards { display: flex; min-height: 52px; align-items: center; gap: 10px; padding: 0 4px; border-radius: 12px; transition: scale 150ms ease-out; }
.actionbar__cards:active { scale: 0.96; }
/* Иконка из дизайна (cards-button.webp, 1254×1254): рамка обрезает поля до знака, фильтр убирает подложку */
.actionbar__cards-icon { position: relative; flex: none; width: 40px; aspect-ratio: 948 / 1047; overflow: hidden; }
.actionbar__cards-icon img { position: absolute; max-width: none; width: 132.3%; height: auto; left: -15.8%; top: -10.6%; filter: url(#alpha-key); }
.actionbar__hole { display: flex; }
.actionbar__hole .pcard { --w: 36px; }
.actionbar__hole .pcard:first-child { rotate: -6deg; }
.actionbar__hole .pcard:last-child { rotate: 6deg; margin-left: -8px; }
.act { min-height: 52px; padding: 0 4px; font-size: clamp(12px, 3.5cqw, 15px); font-weight: 500; border-radius: 12px; white-space: normal; line-height: 1.15; box-shadow: inset 0 -2px 0 -1px rgba(255, 42, 51, 0); }
.act:not(:disabled) { border-color: rgba(255, 255, 255, 0.6); box-shadow: inset 0 -2px 0 0 var(--red); }
.act[aria-pressed='true'] { border-color: var(--red); box-shadow: var(--neon); color: #fff; }
.actionbar__raise { width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 70, 80, 0.9); color: var(--red); transition: scale 150ms ease-out, opacity 150ms ease-out, filter 150ms ease-out; flex: none; }
.actionbar__raise .chip-img { width: 100% !important; height: 100% !important; }
.actionbar__raise:not(:disabled) { filter: drop-shadow(0 0 8px var(--red-glow)); }
.actionbar__raise:not(:disabled):active { scale: 0.96; }
.actionbar__raise:disabled { opacity: 0.4; cursor: not-allowed; }
.actionbar__raise[aria-expanded='true'] { filter: drop-shadow(0 0 14px var(--red)); }
@media (max-width: 420px) {
  .actionbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .actionbar__cards { grid-column: 1 / span 3; justify-content: flex-start; }
  .actionbar__raise { grid-column: 4; justify-self: end; grid-row: 1; }
}

.raise { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; animation: fade-in 180ms ease-out both; }
.raise__title { font-size: 16px; font-weight: 600; }
.raise__quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.raise__quick .btn { padding: 0 4px; font-size: 12.5px; min-height: 44px; }
.raise__slider { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.raise__confirm { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
.raise__num { min-height: 52px; text-align: center; padding: 0 8px; }
@media (max-width: 420px) { .raise__quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Чат ---------- */
.chat-title { font-size: 16px; font-weight: 500; margin-top: 6px; }
.chat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; padding: 12px; border-color: rgba(255, 255, 255, 0.24); box-shadow: var(--glass); }
.chat__main { display: flex; flex-direction: column; gap: 10px; min-height: 260px; }
.chat__log { flex: 1; min-height: 120px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; }
.chat__msg { text-align: left; font-size: 13.5px; line-height: 1.35; padding: 4px 6px; border-radius: 8px; color: var(--text-2); overflow-wrap: anywhere; }
.chat__msg b { color: var(--text); font-weight: 600; }
.chat__msg--me b { color: #ff9ba0; }
.chat__reactions { margin-left: 6px; }
@media (hover: hover) { .chat__msg:hover { background: var(--surface-2); } }
.chat__compose { position: relative; border: 1px solid rgba(255, 70, 80, 0.8); border-radius: 14px; background: rgba(4, 4, 5, 0.9); }
.chat__compose:focus-within { box-shadow: var(--neon); }
.chat__input { width: 100%; background: none; border: 0; outline: none; resize: none; padding: 12px 48px 12px 14px; font-size: 14px; line-height: 1.4; display: block; }
.chat__input::placeholder { color: var(--text-3); }
.chat__send { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--red); color: #fff; display: grid; place-items: center; transition: scale 150ms ease-out; }
.chat__send::before { content: ''; position: absolute; inset: -6px; }
.chat__send:active { scale: 0.92; }
.chat__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.chat__phrase { min-height: 44px; padding: 0 6px; font-size: 12.5px; font-weight: 500; white-space: normal; line-height: 1.15; border-color: rgba(255, 255, 255, 0.26); box-shadow: inset 2px 0 0 -1px var(--red), inset 0 -2px 0 -1px var(--red); }
@media (max-width: 520px) {
  .chat { grid-template-columns: 1fr; }
  .chat__main { min-height: 0; }
  .chat__log { max-height: 160px; min-height: 72px; }
}

.hist__cards { gap: 12px; flex-wrap: wrap; }
.hist__hole, .hist__board { gap: 3px; }
.hist .pcard { --w: 26px; }
.sheet .pcard { --w: 26px; }