/* ==========================================================================
   Симулятор PLO5 — стол на троих.
   Палитра наследует токены сайта (assets/css/tokens.css), но собственные
   переменные оставлены: страница должна работать и в отрыве от сайта.
   ========================================================================== */
:root{
  --c-bg:#0B0C10; --c-bg-2:#101218; --c-surface:#171A22; --c-surface-2:#1D212B;
  --c-line:#262B36;
  --c-felt:#0F3D2E; --c-felt-deep:#0A2A20;
  --c-gold:#C8A24A; --c-gold-bright:#E6C877;
  --c-text:#F2F1EC; --c-dim:#9BA0AB; --c-faint:#666C79;
  --c-ok:#3FBF7F; --c-warn:#E5A93B; --c-danger:#E5544B;
  --c-red:#D6423C;
  --f-display:'Bahnschrift','Inter Tight','Segoe UI',system-ui,sans-serif;
  --f-text:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --r-s:8px; --r-m:14px; --r-l:22px;
}

/* Глобальные правила (сброс, body, шрифты) убраны: страница живёт внутри
   сайта, эти вещи задают tokens.css и base.css. Здесь — только то,
   что относится к самому столу. */

.app{
  max-width:980px; margin:0 auto;
  display:flex; flex-direction:column; gap:16px;
  font-size:15px; line-height:1.5;
}
.app small{font-size:12px}
.app button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}

/* --------------------------------------------------------------- ПОДСКАЗКА */
/* Держит внимание на том, что решает прямо сейчас: цена банка, число
   соперников, опасность борда. Выключается галочкой в настройках. */
.coach{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start;
  padding:12px 14px; border-radius:var(--r-m);
  background:rgba(200,162,74,.07); border:1px solid rgba(200,162,74,.28);
}
.coach__icon{width:18px;height:18px;color:var(--c-gold);margin-top:2px}
.coach__label{
  display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-gold); margin-bottom:3px;
}
.coach__text{font-size:14px;line-height:1.55;color:var(--c-text)}
.coach__text b{color:var(--c-gold-bright)}
.coach__off{
  width:24px;height:24px;border-radius:50%;color:var(--c-faint);
  font-size:18px;line-height:1;
}
.coach__off:hover{color:var(--c-text)}

/* ------------------------------------------------------------------ ШАПКА */
.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:flex-start}
.session{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.session div{display:flex;flex-direction:column;line-height:1.2;min-width:54px}
.session b{font-family:var(--f-display);font-size:17px}
.session small{color:var(--c-faint);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.link{color:var(--c-faint);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--c-gold)}
.pos{color:var(--c-ok)} .neg{color:var(--c-danger)}

/* ------------------------------------------------------------------- СТОЛ */
.table{
  position:relative;border-radius:var(--r-l);border:1px solid var(--c-line);
  background:radial-gradient(120% 100% at 50% 35%,var(--c-felt) 0%,var(--c-felt-deep) 55%,#0a1a15 100%);
  padding:16px;display:flex;flex-direction:column;gap:14px;align-items:center;
  box-shadow:inset 0 0 80px rgba(0,0,0,.55);
}
.opponents{display:flex;gap:12px;width:100%;justify-content:center;flex-wrap:wrap}
.seat{display:flex;flex-direction:column;align-items:center;gap:7px;transition:opacity .2s}
.seat--bot{flex:1 1 260px;max-width:340px;padding:10px;border-radius:var(--r-m);
  border:1px solid transparent;background:rgba(0,0,0,.16)}
.seat--hero{width:100%}
.seat.is-turn{border-color:var(--a-gold,rgba(200,162,74,.45));background:rgba(200,162,74,.07)}
.seat.is-folded{opacity:.38}
.seat__info{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap;justify-content:center}
.seat__name{color:var(--c-text)}
.seat.is-turn .seat__name{color:var(--c-gold-bright)}
.seat__style{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-dim);
  border:1px solid var(--c-line);border-radius:99px;padding:1px 7px}
.seat__mood{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  border-radius:99px;padding:1px 7px;background:rgba(229,84,75,.18);
  border:1px solid rgba(229,84,75,.5);color:#FF9C95}
.seat__pos{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--c-gold);color:var(--c-gold);border-radius:99px;padding:1px 7px}
.seat__stack{font-family:var(--f-display);font-size:15px}
.seat__stack::after{content:' BB';font-size:10px;color:var(--c-faint)}
.hand{display:flex;gap:5px}
.bet{font-family:var(--f-display);font-size:13px;color:var(--c-gold-bright);
  background:rgba(0,0,0,.45);border:1px solid rgba(200,162,74,.35);
  border-radius:99px;padding:2px 10px}
.bet::after{content:' BB';font-size:9px;opacity:.7}

.middle{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:12px 0;width:100%;border-block:1px solid rgba(255,255,255,.07)}
.pot{display:flex;align-items:baseline;gap:8px}
.pot small{color:var(--c-dim);text-transform:uppercase;letter-spacing:.1em;font-size:11px}
.pot b{font-family:var(--f-display);font-size:24px;color:var(--c-gold-bright)}
.board{display:flex;gap:5px;min-height:74px;align-items:center}
/* Текст берётся из data-атрибута: в CSS он был зашит по-русски
   и оставался русским на всех остальных языках. */
.board:empty::after{content:attr(data-empty);color:rgba(255,255,255,.25);font-size:12px}
.street{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-dim)}
.boardinfo{font-size:12px;color:var(--c-faint);text-align:center;max-width:640px;line-height:1.6}
.boardinfo b{color:var(--c-dim)}

.made{font-size:13px;color:var(--c-dim);min-height:20px;text-align:center;line-height:1.6}
.made b{color:var(--c-text)}
.prob{color:var(--c-faint)}
/* Четыре цвета мастей, осветлённые — текст лежит на тёмном фоне. */
.g{font-family:var(--f-display);font-weight:700;margin-right:4px;font-size:15px}
.g--s0{color:#E8E6DF} .g--s1{color:#FF6B64} .g--s2{color:#5AA6FF} .g--s3{color:#3FCB80}
.tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:1px 7px;margin-left:6px}
.tag--nuts{background:var(--c-gold);color:#1A1405}
.tag--eq{border:1px solid var(--c-line);color:var(--c-gold-bright)}

/* ------------------------------------------------------------------ КАРТЫ */
.pcard{
  width:58px;height:82px;border-radius:8px;background:#F6F4EE;color:#15171E;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-family:var(--f-display);font-weight:700;line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.5);user-select:none;
}
.pcard__r{font-size:25px;letter-spacing:-.01em}
.pcard__s{font-size:30px;line-height:.8;
  font-family:'Segoe UI Symbol','Apple Color Emoji','Noto Sans Symbols 2',sans-serif}
.pcard--s0{color:#15171E}   /* ♠ пики  — графит */
.pcard--s1{color:#D6423C}   /* ♥ черви — красный */
.pcard--s2{color:#1F6FE0}   /* ♦ бубны — синий */
.pcard--s3{color:#12844A}   /* ♣ трефы — зелёный */
.pcard--back{
  background:repeating-linear-gradient(45deg,#1c2740 0 6px,#243354 6px 12px);
  border:1px solid rgba(255,255,255,.14);
}
.pcard--ghost{opacity:.45;filter:grayscale(.35)}
.pcard--sm{width:40px;height:57px;border-radius:6px}
.pcard--sm .pcard__r{font-size:17px} .pcard--sm .pcard__s{font-size:20px}
.pcard--xs{width:34px;height:48px;border-radius:5px}
.pcard--xs .pcard__r{font-size:14px} .pcard--xs .pcard__s{font-size:16px}

/* --------------------------------------------------------------- КНОПКИ */
.controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:44px}
.btn{
  border-radius:99px;padding:11px 18px;font-weight:600;font-size:14px;
  border:1px solid var(--c-line);background:var(--c-surface);transition:.15s;
  display:inline-flex;align-items:center;gap:7px;
}
.btn:hover{border-color:var(--c-gold);transform:translateY(-1px)}
.btn b{font-family:var(--f-display);color:var(--c-gold-bright)}
.btn--gold{background:linear-gradient(135deg,var(--c-gold-bright),var(--c-gold));color:#1A1405;border-color:transparent}
.btn--gold b{color:#1A1405}
.btn--gold:hover{filter:brightness(1.08)}
.btn--fold{border-color:rgba(229,84,75,.4)}
.btn--fold:hover{border-color:var(--c-danger);color:#ffb3ae}
.btn--ghost{background:transparent;color:var(--c-dim)}
.btn kbd{font:inherit;font-size:10px;color:var(--c-faint);border:1px solid var(--c-line);
  border-radius:4px;padding:0 4px}

.opts{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;color:var(--c-faint);font-size:12px}
.opts label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.opts input{accent-color:var(--c-gold)}

/* ------------------------------------------------------------- ПОБЕДИТЕЛЬ */
.winner{
  border-radius:var(--r-m);border:1px solid var(--c-line);background:var(--c-surface);
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;
}
.winner--win{border-color:rgba(63,191,127,.55)}
.winner--lose{border-color:rgba(229,84,75,.5)}
.winner__title{font-family:var(--f-display);font-size:21px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.winner--win .winner__title{color:var(--c-ok)}
.winner--lose .winner__title{color:#FF8F88}
.winner__title span{font-size:16px;color:var(--c-gold-bright)}
.winner__note{font-size:12px;color:var(--c-faint)}
.winner__rows{display:flex;flex-direction:column;gap:6px}
.wrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px;
  padding:8px 11px;border-radius:var(--r-s);background:var(--c-bg-2);border:1px solid transparent}
.wrow.is-pot{border-color:rgba(200,162,74,.45)}
.wrow.is-out{opacity:.5}
.wrow__who{min-width:74px;color:var(--c-dim)}
.wrow__cat{font-weight:600}
.wrow__cards{margin-left:auto;display:flex;align-items:center;gap:2px}
.wrow__plus{color:var(--c-faint);margin:0 4px}
.wrow__mark{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border-radius:99px;padding:1px 7px;background:var(--c-gold);color:#1A1405}
.wrow__mark--soft{background:transparent;border:1px solid var(--c-line);color:var(--c-dim)}

/* -------------------------------------------------------------------- ЛОГ */
.log{
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-m);
  padding:12px 14px;font-size:13px;max-height:160px;overflow:auto;
  display:flex;flex-direction:column;gap:4px;
}
.log p{color:var(--c-dim)}
.log b{color:var(--c-text);font-weight:600}
.log .st{color:var(--c-gold);text-transform:uppercase;font-size:11px;letter-spacing:.1em;margin-top:6px}
.log .st:first-child{margin-top:0}
.log .g{font-size:13px;letter-spacing:0}

/* ----------------------------------------------------------------- РАЗБОР */
.review{
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-m);
  padding:16px;display:flex;flex-direction:column;gap:14px;
}
.review__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.review__res{font-family:var(--f-display);font-size:20px}
.review__hands{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.hbox{background:var(--c-bg-2);border:1px solid var(--c-line);border-radius:var(--r-s);padding:10px}
.hbox h3{font-size:12px;color:var(--c-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.hbox .hand{margin-bottom:6px}
.hbox p{font-size:13px;color:var(--c-dim)}
.hbox p b{color:var(--c-text)}
.hbox.is-win{border-color:rgba(63,191,127,.5)}
.dlist{display:flex;flex-direction:column;gap:8px}
.d{display:flex;gap:10px;align-items:flex-start;font-size:13px;
   background:var(--c-bg-2);border-left:3px solid var(--c-line);border-radius:var(--r-s);padding:9px 12px}
.d--ok{border-left-color:var(--c-ok)}
.d--warn{border-left-color:var(--c-warn)}
.d--bad{border-left-color:var(--c-danger)}
.d__st{color:var(--c-faint);min-width:64px;text-transform:uppercase;font-size:11px;letter-spacing:.06em;padding-top:2px}
.d__body b{color:var(--c-text)}
.d__body{color:var(--c-dim)}
.note{font-size:12px;color:var(--c-faint)}
.note b{color:var(--c-gold-bright)}
.lesson{background:rgba(200,162,74,.08);border:1px solid rgba(200,162,74,.3);
  border-radius:var(--r-s);padding:12px 14px;font-size:14px}
.lesson b{color:var(--c-gold-bright)}

/* -------------------------------------------------------------- ШПАРГАЛКА */
.cheat{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-m);padding:16px}
.cheat h2{font-size:15px;margin-bottom:10px}
.cheat__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cheat h3{font-size:12px;color:var(--c-gold);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.cheat p,.cheat li{font-size:13px;color:var(--c-dim)}
.cheat ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.cheat li::before{content:'—';color:var(--c-faint);margin-right:6px}
.cheat table{border-collapse:collapse;font-size:13px;width:100%}
.cheat td{padding:3px 0;color:var(--c-dim)}
.cheat td:last-child{text-align:right;color:var(--c-gold-bright);font-family:var(--f-display)}
.foot{text-align:center;color:var(--c-faint);font-size:12px;padding-bottom:20px}

/* ==========================================================================
   ТЕЛЕФОН

   Стол собран на флексах, а флекс-элемент по умолчанию не сжимается меньше
   своего содержимого (min-width:auto). Из-за этого место бота требовало
   340px при доступных ~320 и распирало страницу вбок. Поэтому здесь везде
   явный min-width:0 — без него любые уменьшения размеров бесполезны.
   ========================================================================== */

@media (max-width:720px){
  .seat--bot{flex:1 1 100%; max-width:none}
}

@media (max-width:640px){
  .app, .table, .middle, .opponents, .seat, .seat__info, .made, .boardinfo{ min-width:0; }
  .table{ padding:12px 10px; gap:10px; }

  /* Боты — друг под другом: в строку они не помещаются, а перенос
     внутри карточки рвёт имя и стек на разные строки. */
  .opponents{ flex-direction:column; gap:8px; }
  .seat--bot{ padding:8px; }
  .seat__info{ gap:6px; font-size:12px; }
  .seat__stack{ font-size:14px; }

  .pot b{ font-size:20px; }
  .middle{ padding:10px 0; gap:7px; }
  .boardinfo{ font-size:11px; line-height:1.5; }
  .made{ font-size:12px; }

  .pcard{ width:44px; height:62px; border-radius:7px; }
  .pcard__r{ font-size:19px } .pcard__s{ font-size:22px }
  .pcard--sm{ width:33px; height:47px }
  .pcard--sm .pcard__r{ font-size:14px } .pcard--sm .pcard__s{ font-size:16px }
  .pcard--xs{ width:27px; height:38px }
  .board{ gap:4px; min-height:62px; }
  .hand{ gap:4px; }
}

@media (max-width:640px){
  /* Кнопки прилипают к низу экрана. Стол на телефоне вытягивается в столбик,
     и без этого до «колла» приходилось листать через двух ботов и борд —
     играть было невозможно. */
  .controls{
    position:sticky; bottom:0; z-index:5;
    margin-inline:-10px; padding:10px;
    background:linear-gradient(to top, var(--c-bg) 62%, transparent);
  }
}

@media (max-width:480px){
  /* Кнопки действий — сеткой в две колонки: шесть штук в строку на телефоне
     превращаются в нечитаемую полосу, а промахнуться пальцем здесь дорого. */
  .controls{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
  }
  .controls .btn{
    width:100%; min-height:48px; padding:10px 8px; font-size:13px;
    justify-content:center; white-space:normal;
  }
  /* «Новая раздача» и «до вскрытия» — во всю ширину: они завершают ход */
  .controls .btn#btn-new,
  .controls .btn[data-a="auto"]{ grid-column:1 / -1; }
  .controls kbd{ display:none; }          /* горячих клавиш на телефоне нет */

  .pcard{ width:40px; height:56px }
  .pcard__r{ font-size:17px } .pcard__s{ font-size:20px }
  .session div{ min-width:46px }
  .session{ font-size:11px }
}

/* Очень узкие экраны: пять карт в руке должны помещаться в строку */
@media (max-width:360px){
  .pcard{ width:36px; height:51px }
  .pcard__r{ font-size:15px } .pcard__s{ font-size:18px }
  .table{ padding:10px 6px }
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}