/* ============================================================
   АДАПТИВНЫЙ МАКЕТ — один код, два вида. Всё здесь живёт внутри медиазапросов
   min-width, поэтому мобильная база (base.css) не затронута: тот же #nav
   становится левым сайдбаром, #scr — центральной сценой, а боковые рельсы
   появляются, когда для них есть место.

   Перенесено из прототипа (arena-web/styles/desktop.css). Удалено при
   переносе: «Друзья» (.frList) и «В эфире» (.efList) — выдуманные люди и
   стримы; «Турниры сегодня» (.tList/.tRow/.tTag/.tPlay) — выдуманное
   расписание с кнопками, которые вели в SNG; .rchip.up («▲ +24 LP сегодня»).
   Вместо них правая колонка лобби показывает то, что сервер действительно
   отдаёт: рейтинг, кошелёк и памятку о честности раздачи.
   ============================================================ */
/* =====================================================================
   ADAPTIVE LAYOUT — one codebase, two views.
   The mobile UX (≤768) is the untouched prototype. Wider screens unfold
   into a web layout WITHOUT changing the stage markup, ids, or app.js:
   the same #nav becomes a left sidebar, #scr is the centered stage, and
   #rail carries chat + session stats. The poker table (#g / #seats /
   #board / #fly) and every animation are reused verbatim.
   Hard rule: never put transform/filter on body/#shell/#scr/#g — they
   are ancestors of #fly and would skew the getBoundingClientRect math
   the chip/deal/reveal animations rely on.
   ===================================================================== */

/* ---- tablet: keep the mobile UX, just centered ---- */
@media (min-width:769px){
  #scr{max-width:560px;margin:0 auto}
}

/* ---- desktop: sidebar + wide centered table ---- */
@media (min-width:1024px){
  #scr{max-width:none;margin:0}
  #shell{padding-left:240px}                 /* reserve the fixed sidebar */

  /* #nav repositioned into a left sidebar — same buttons, same JS handlers */
  .nav{position:fixed;left:0;top:0;bottom:0;width:240px;height:auto;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;
    padding:18px 15px 18px;border-top:0;border-right:1px solid rgba(255,255,255,.07);
    background:linear-gradient(180deg,#0e0b1c,#08060f 70%);overflow:hidden}
  /* gold top-accent line (prototype) */
  .nav::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,194,75,.5),transparent)}
  .nav button{flex-direction:row;justify-content:flex-start;gap:12px;width:100%;
    font-size:14px;padding:11px 14px;border-radius:12px}
  .nav button i{font-size:21px}
  .nav button.on{background:rgba(124,92,255,.14)}
  .fabwrap{flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;width:100%;
    margin:6px 0;padding:9px 12px;border-radius:12px;background:rgba(255,194,75,.08)}
  .nav .fab{width:40px;height:40px;margin:0;animation:none}
  .nav .fab i{font-size:22px}
  .fablabel{font-size:14px;margin:0;color:var(--gold)}

  /* страницы лобби → центральная колонка чтения (#g остаётся во всю ширину).
     `.screen` — контейнер эко-слоя, ведёт себя так же. */
  .page,.screen{left:max(0px,calc(50% - 340px));right:auto;width:min(680px,100%)}
  /* «Клубы» — самостоятельная поверхность: даём всю сцену, читаемую ширину
     эко-слой ограничивает у себя (max-width 900px). Нижней навигации на
     десктопе нет — сайдбар слева, поэтому bottom:0. */
  #s-clubs{left:0;right:0;bottom:0;width:auto}

  /* widen the felt horizontally only — vertical insets identical to mobile,
     so seat %, ghud frame and dock stay perfectly aligned. The caps only
     engage on wide monitors; at ≤~1600 the 40px insets dominate unchanged. */
  .table{left:max(40px,calc(50% - 540px));right:max(40px,calc(50% - 540px))}
  /* frame goes to the very sides of the stage (as on mobile) and the HUD row
     moves inward, so the brackets sit outside the buttons at every width.
     Previously the frame tracked the felt — max(60px,50% - 570px) — and the
     60px floor ran the top-right bracket straight through the right cluster
     (three 34px buttons + gaps = 116px, i.e. 18-134px from the edge) on any
     viewport below ~1260px. No felt-tracking value fixes that: the calc()
     sweeps through the cluster's band as the viewport grows from 1220 to
     1450. Fixed 14px insets + 40px HUD padding leave a 9px gap on both
     sides and never move relative to each other. */
  .ghud-frame{left:14px;right:14px}
  .ghud{padding:0 40px}
  .dock{left:max(0px,calc(50% - 340px));right:max(0px,calc(50% - 340px))}
  /* floor matched to the HUD row's 40px: the frame now runs 14px from the
     edge, and the 12px floor let the pill hang past it on 1024-1120 stages. */
  #propsBtn{right:max(40px,calc(50% - 520px))}

  /* bump card sizes to suit the larger felt (variables → proportional) */
  :root{
    --pc-w:52px;--pc-h:74px;--pc-rk:20px;--pc-su:16px;--pc-big:30px;
    --hero-w:64px;--hero-h:90px;--hero-rk:23px;--hero-su:18px;--hero-big:36px;
  }
}

/* ---- правый рельс (чат стола) — когда для него есть место. Привязан к экрану
   стола: в нём только чат, поэтому страницы лобби (лобби / клубы / профиль)
   получают всю сцену, а не мёртвую панель «Чат стола». ---- */
@media (min-width:1280px){
  body[data-screen="game"] #rail{display:flex;flex-direction:column;gap:14px;width:340px;flex:none;
    padding:22px 18px;border-left:1px solid rgba(255,255,255,.06);overflow-y:auto;max-height:100dvh;
    background:linear-gradient(180deg,#0c0920,#0A0718)}
  .rail-card{background:var(--card);border:1px solid var(--bord);border-radius:16px;padding:14px;
    display:flex;flex-direction:column;min-height:0}
  .rail-h{font-family:'Rajdhani','Manrope',sans-serif;font-weight:700;font-size:14px;letter-spacing:.3px;
    color:var(--text);display:flex;align-items:center;gap:7px;margin-bottom:10px}
  .rail-h i{color:var(--p1);font-size:17px}
  .rail-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;max-height:300px;min-height:60px}
  .rail-empty{color:var(--dim);font-size:12px;text-align:center;padding:14px 0}
  .chat-msg{font-size:12.5px;line-height:1.35;color:var(--text)}
  .chat-msg .nm{font-weight:700;color:var(--p1);margin-right:5px}
  .chat-msg .rb{font-size:9px;font-weight:700;color:var(--gold);background:rgba(255,194,75,.14);
    border-radius:5px;padding:1px 5px;margin-right:5px;vertical-align:middle}
  .chat-msg.sys{color:var(--dim);font-style:italic}
  #chatForm{display:flex;gap:7px;margin-top:10px}
  #chatInput{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--bord);border-radius:10px;
    padding:8px 11px;color:var(--text);font-family:'Manrope',sans-serif;font-size:13px}
  #chatInput:focus{outline:0;border-color:rgba(139,123,255,.5)}
  .rail-send{width:38px;flex:none;border:0;border-radius:10px;background:linear-gradient(135deg,#7C5CFF,#B14BFF);
    color:#fff;display:flex;align-items:center;justify-content:center}
  .rail-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
  .rail-kpi{flex:1;background:rgba(255,255,255,.04);border-radius:11px;padding:9px 6px;text-align:center}
  .rail-kpi b{display:block;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:19px;color:var(--text)}
  .rail-kpi.win b{color:var(--teal)}.rail-kpi.neg b{color:var(--red)}.rail-kpi.pos b{color:var(--gold)}
  .rail-kpi small{color:var(--muted);font-size:10px}
  .hand-row{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;
    padding:5px 0;border-top:1px solid rgba(255,255,255,.05)}
  .hand-row b{color:var(--text);font-family:'Rajdhani',sans-serif}
  .hand-row .pos{color:var(--teal)}.hand-row .neg{color:var(--red)}
}

/* =====================================================================
   ДЕСКТОПНОЕ ЛОББИ (≥1024): широкая шапка, герой «Поднимись в рейтинге», сетка
   режимов 2×2, список кэш-лимитов с сервера и правая колонка (рейтинг,
   кошелёк, памятка о честности раздачи).

   В прототипе на этих местах были «Турниры сегодня» с выдуманным расписанием
   и социальный рельс с выдуманными друзьями и стримами — они не переносились.
   Мобильное лобби (.lobM) здесь скрыто; стол и остальные страницы не меняются.
   ===================================================================== */
@media (min-width:1024px){
  .lobM{display:none}
  /* let #p-home span the full stage (override the centered 680px column) */
  #p-home{top:0;left:0;right:0;width:auto;overflow:hidden;padding-bottom:0}
  .lobD{display:flex;width:100%;height:100%;min-height:0}

  .home-main{flex:1;min-width:0;overflow-y:auto;padding:26px 30px 40px}
  .home-social{width:314px;flex:none;overflow-y:auto;padding:24px 20px;
    border-left:1px solid rgba(255,255,255,.06);
    background:linear-gradient(180deg,#0a0817,#08060f);
    display:flex;flex-direction:column;gap:20px}
  /* Колонка скроллится, а не сжимает карточки. Без этого правила рейтинговая
     карточка складывалась в полоску с одной подписью «RANKED»: содержимое рейла
     стало выше окна (карточка задач), а `flex-shrink` по умолчанию 1, и у
     `.rankCard` с `overflow:hidden` автоминимум разрешается в ноль — она
     единственная сжималась до padding. Правило на всех детей, а не на одну
     карточку: следующая добавленная сюда сломалась бы так же. */
  .home-social>*{flex:none}

  /* --- header --- */
  .lobHdr{display:flex;align-items:center;margin-bottom:22px}
  .lobTitle{font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:22px;letter-spacing:.3px}
  .lobCur{margin-left:auto;display:flex;gap:11px}
  .lobCur .cpill{font-size:15px;padding:9px 13px;border-radius:13px}
  .lobCur .cpill i{font-size:18px}

  /* --- hero "Поднимись в рейтинге" --- */
  .startCard{position:relative;overflow:hidden;border-radius:22px;padding:26px 28px;margin-bottom:18px;
    background:linear-gradient(120deg,#1a1340,#2a1d5e);border:1px solid rgba(124,92,255,.3)}
  .startCard::before{content:"";position:absolute;right:-30px;top:-30px;width:200px;height:200px;border-radius:50%;
    background:radial-gradient(circle,rgba(124,92,255,.4),transparent 70%)}
  .startCard .tech{font-family:'Rajdhani',monospace;font-weight:700;font-size:9px;letter-spacing:2px;
    color:var(--gold);text-transform:uppercase;position:relative}
  .scTitle{font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:28px;margin:10px 0 6px;position:relative}
  .scSub{font-size:13px;font-weight:600;color:var(--muted);max-width:440px;position:relative;line-height:1.5}
  .scBtns{display:flex;gap:12px;margin-top:20px;position:relative}
  .scBtn{border:0;border-radius:14px;padding:14px 26px;font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;
    color:#fff;display:flex;align-items:center;gap:9px}
  .scBtn i{font-size:18px}
  .scBtn.primary{background:linear-gradient(100deg,#7C5CFF,#B14BFF);box-shadow:0 12px 28px rgba(124,92,255,.4)}
  .scBtn.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-weight:700}
  .scBtn:hover{filter:brightness(1.08)}

  /* --- 2×2 mode grid --- */
  .modeGrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:24px}
  .modeCard{display:flex;align-items:center;gap:13px;border-radius:16px;padding:15px;
    background:rgba(255,255,255,.04);border:1px solid var(--bord);cursor:pointer;transition:background .15s,border-color .15s}
  .modeCard:hover{background:rgba(255,255,255,.07);border-color:rgba(124,92,255,.35)}
  .modeIc{width:44px;height:44px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center}
  .modeIc i{font-size:23px}
  .modeTx{flex:1;min-width:0}
  .modeTx b{display:block;font-size:15px;font-weight:700}
  .modeTx small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
  .modeAr{color:var(--dim);font-size:20px}

  /* --- заголовок секции (используется для «Кэш-столы») --- */
  .tSec{display:flex;align-items:center;justify-content:space-between;margin:6px 0 13px}
  .tSec h3{margin:0;font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:17px;
    display:flex;align-items:center;gap:8px}
  .stkList{padding:0}
  .stkRow{padding:14px 17px}
  .stkTx b{font-size:15px}
  .stkTx small{font-size:12px}
  .stkRow:hover{background:rgba(255,255,255,.07);border-color:rgba(124,92,255,.35)}

  /* --- social rail: rank card --- */
  .rankCard{position:relative;overflow:hidden;border-radius:18px;padding:20px;text-align:center;
    background:radial-gradient(130% 95% at 50% 0,rgba(124,92,255,.28),rgba(255,255,255,.02));
    border:1px solid rgba(255,194,75,.22)}
  .rankCard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,194,75,.55),transparent)}
  .rankCard .tech{font-family:'Rajdhani',monospace;font-weight:700;font-size:9px;letter-spacing:2px}
  .rankCard .tech.gold{color:var(--gold)}
  .rankRing{width:92px;height:92px;margin:14px auto 10px;position:relative}
  .rrConic{position:absolute;inset:0;border-radius:50%;
    background:conic-gradient(from -90deg,#F5A623,#FFD873 68%,rgba(255,255,255,.07) 0)}
  .rrIn{position:absolute;inset:5px;border-radius:50%;background:#0c0a18;display:flex;align-items:center;justify-content:center}
  .rrIn i{font-size:42px;color:#9D86FF}
  .rrPct{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);background:var(--gold);color:#2a1900;
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10px;padding:2px 8px;border-radius:7px}
  .rankTier{font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:22px}
  .rankSub{font-size:12px;font-weight:600;color:var(--muted);margin-top:4px}
  .rankChips{display:flex;justify-content:center;gap:8px;margin-top:12px}
  .rchip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.06);color:#cfcae8}
  .rchip .num{font-family:'Rajdhani',sans-serif}

  /* --- секции правой колонки: кошелёк и честность раздачи --- */
  .socSec .socHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .socHead b{font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:15px;display:flex;align-items:center;gap:7px}
  .socHead b i{font-size:17px;color:var(--gold)}
  .walletCard,.fairCard{border-radius:16px;padding:15px 16px;
    background:rgba(255,255,255,.035);border:1px solid var(--bord)}
  .wRow{display:flex;align-items:center;gap:10px;padding:7px 0}
  .wRow+.wRow{border-top:1px solid rgba(255,255,255,.05)}
  .wIc{width:26px;flex:none;text-align:center;font-size:16px}
  .wLbl{flex:1;min-width:0;font-size:12.5px;color:var(--muted)}
  .wRow b{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;color:var(--text)}
  .wNote{font-size:11px;color:var(--dim);line-height:1.45;margin-top:10px}
  .fairState{margin-top:10px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12px;color:var(--teal)}
  .fairState.bad{color:var(--red)}

  /* --- «мои клубы» в правой колонке (src/lobby/clubstrip.js) --- */
  #clubSoc:empty{display:none}
  #clubSoc .socHead .csOn{font-size:11px;font-weight:600;color:var(--teal)}
  .csRow{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer}
  .csRow+.csRow{border-top:1px solid rgba(255,255,255,.05)}
  .csRow .csTx b{font-size:13px}
  .csRow .csTx small{font-size:11px}
  .csAr{flex:none;font-size:16px;color:var(--dim)}
  .csRow:hover .csAr{color:var(--p1)}
  .csLink{color:var(--p1);cursor:pointer}

  /* Полоса «мой клуб» под hero: те же классы, десктопные отступы.
     Отступы держит КОНТЕЙНЕР, а не карточка: собственный margin карточки
     схлопывался наружу через пустой .clubStrip — весь зазор уходил вверх, и
     карточка вставала вплотную к сетке режимов. */
  .lobD .clubStrip{margin:0 0 18px}
  .lobD .csCard{margin:0;border-radius:20px;padding:15px 17px}
  .lobD .csTx b{font-size:17px}
  .lobD .csLvTx b{font-size:14px}

  /* ---- sidebar chrome (logo, nav label, extra rows, footer) ---- */
  .nav .sbHead{display:flex;align-items:center;gap:11px;padding:2px 8px 16px;cursor:pointer}
  .sbLogo{width:38px;height:38px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#7C5CFF,#B14BFF);box-shadow:0 8px 20px rgba(124,92,255,.4)}
  .sbLogo i{font-size:21px;color:#fff}
  .sbWord{line-height:1.15}
  .sbWord b{display:block;font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:14px;letter-spacing:.3px;color:#F4F2FF}
  .sbWord small{display:block;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10px;letter-spacing:3px;color:var(--gold)}
  .nav .sbLabel{display:block;font-family:'Rajdhani',monospace;font-weight:700;font-size:9px;letter-spacing:2px;
    color:var(--dim);text-transform:uppercase;padding:0 10px 8px}

  .nav .sbFoot{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:12px}
  .sbCur{display:flex;gap:8px}
  .sbPill{flex:1;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:8px 9px;
    font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;color:#F4F2FF}
  .sbPill i{font-size:16px}.sbPill .gold{color:var(--gold)}.sbPill .gem{color:var(--teal)}
  .sbUser{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);border-radius:15px;padding:11px 12px;cursor:pointer}
  .sbUser:hover{background:rgba(255,255,255,.06)}
  .sbAv{width:42px;height:42px;flex:none;position:relative}
  .sbAvRing{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--gold) 68%,rgba(255,255,255,.1) 0)}
  .sbAvIn{position:absolute;inset:3px;border-radius:50%;background:linear-gradient(135deg,#7C5CFF,#B14BFF);
    display:flex;align-items:center;justify-content:center;font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;color:#fff}
  .sbAvLv{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);background:var(--gold);color:#2a1900;
    font-family:'Rajdhani',sans-serif;font-weight:800;font-size:9px;padding:1px 5px;border-radius:6px}
  .sbUserTx{min-width:0;line-height:1.3}
  .sbUserTx b{display:block;font-size:13px;font-weight:700;color:#F4F2FF}
  .sbUserTx small{display:block;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10.5px;color:var(--gold)}
}

/* На страницах лобби правая колонка своя (рейтинг / кошелёк / честность), а
   чат-рельс — контекст стола: скрываем его, чтобы не было пустой колонки. */
@media (min-width:1280px){
  body[data-screen="home"] #rail,
  body[data-screen="profile"] #rail,
  body[data-screen="clubs"] #rail{display:none}
}

/* =====================================================================
   MATCHMAKING + PRE-MATCH WAGER + TABLE (desktop) — the "найти матч" flow
   and the table brought to the web prototype. The felt/seats/dock and the
   chip-fly math are untouched; only layout/chrome around them changes.
   ===================================================================== */
/* left table rail hidden until the felt has room for two rails (≥1360) */
#lrail{display:none}

@media (min-width:1024px){
  /* matchmaking search fills the whole stage (was a narrow centered column) */
  #p-mm{top:0;left:0;right:0;width:auto;
    background-image:radial-gradient(700px 500px at 50% 34%,rgba(124,92,255,.16),transparent 62%)}
  .mm-wrap{max-width:560px;margin:0 auto}
  .mm-orb{width:180px;height:180px;margin-bottom:34px}
  .mm-spin{border-width:4px}
  .mm-core i{font-size:60px;filter:drop-shadow(0 0 14px rgba(157,134,255,.6))}
  .mm-title{font-size:30px}
  .mm-sub{font-size:14px;margin-top:10px}
  .mm-dots{margin-top:28px}
  .mm-dots i{width:10px;height:10px}
  .mm-found{font-size:15px;margin-top:20px;font-family:'Rajdhani',sans-serif;color:#cfcae8}

  /* pre-match wager → framed two-pane composition, centred in the viewport
     (was a mobile column floating in dead space; now a designed card) */
  #p-bet{top:0;left:0;right:0;bottom:0;width:auto;overflow:auto}
  #p-bet.on{display:flex;align-items:center;justify-content:center}
  .bet-stage{flex-direction:row;align-items:stretch;justify-content:flex-start;gap:0;
    width:min(1000px,calc(100% - 64px));max-width:none;min-height:auto;margin:0;padding:0;
    background:linear-gradient(180deg,rgba(20,14,40,.72),rgba(12,8,24,.62));
    border:1px solid rgba(255,255,255,.09);border-radius:24px;overflow:hidden;
    box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 90px rgba(108,75,255,.12)}
  .bet-wrap{flex:1;max-width:none;padding:40px 48px}
  .bet-oppcol{display:flex;flex-direction:column;gap:12px;width:336px;flex:none;justify-content:center;
    padding:34px 26px;background:rgba(8,6,15,.4);border-right:1px solid rgba(255,255,255,.07)}
  .bet-opphead{display:flex;align-items:center;justify-content:space-between}
  .bet-opphead .tech{font-family:'Rajdhani',monospace;font-weight:700;font-size:10px;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
  .bet-oppcount{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12px;color:var(--muted)}
  .bet-opplist{display:flex;flex-direction:column;gap:9px}
  .bet-opp{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;
    background:rgba(255,255,255,.04);border:1px solid var(--bord)}
  .bet-oppav{width:42px;height:42px;flex:none;border-radius:50%;position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;
    background:linear-gradient(135deg,#7C5CFF,#B14BFF);border:2px solid rgba(157,134,255,.4)}
  .bet-oppav.bot{background:linear-gradient(135deg,#2DE2C5,#1f7a5c);border-color:rgba(45,226,197,.45);color:#04241c}
  .bet-oppav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
  .bet-opptx{flex:1;min-width:0}
  .bet-opptx b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bet-opptx small{display:block;font-size:11px;color:var(--muted)}
  .bet-oppstk{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;color:var(--gold)}
  .bet-oppempty{color:var(--dim);font-size:12px;padding:14px;text-align:center}
  .bet-oppnote{font-size:11px;color:var(--dim);text-align:center;line-height:1.5;margin-top:2px}

  /* the chat rail is table context only — hide it on the transient flow screens */
  body[data-screen="mm"] #rail,
  body[data-screen="bet"] #rail{display:none}

  /* the left nav is hidden on the table AND the wager screen (showPage) — reclaim
     its reserved 240px so content centres instead of leaving dead space. */
  body[data-screen="game"] #shell,
  body[data-screen="bet"] #shell,
  body[data-screen="mm"] #shell{padding-left:0}

  /* МАГАЗИН — раздел сайдбара, а не экран во весь вьюпорт. `showPage()` гасит
     #nav инлайном, потому что на ТЕЛЕФОНЕ у магазина своя шапка с «назад» и
     нижняя навигация только мешает. На десктопе навигация — сайдбар, из
     которого в магазин и заходят: пропадая, он оставлял мёртвый отступ 240px
     слева и уводил витрину с центра. Инлайновый стиль перебивается только
     !important — поэтому он здесь. */
  body[data-screen="shop"] #nav{display:flex!important}
}

/* table: second (left) rail — session/hands, mirroring the prototype's table */
@media (min-width:1280px){
  body[data-screen="game"] #lrail{display:flex;flex-direction:column;gap:14px;
    width:236px;flex:none;padding:22px 16px;overflow-y:auto;max-height:100dvh;
    border-right:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,#0a0817,#08060f)}
  /* .rail-card / .rail-h / .rail-kpis / .rail-log / .hand-row inherit the ≥1280
     rail styles; only the hand-strength card needs its own rules */
  #lrail .rail-h i{color:var(--teal)}
  .lr-hand{padding:4px 0 2px}
  .lr-hand-empty{color:var(--dim);font-size:12px}
  .lr-hand-name{font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:20px;color:#7FF3E1}
  .lr-hand-sub{font-size:11.5px;color:var(--muted);margin-top:3px}

  /* rails fill the full column height on the table (last card grows, log grows)
     so they read as designed panels rather than a short stack at the top */
  body[data-screen="game"] #rail .rail-card{flex:1;min-height:0}
  body[data-screen="game"] #lrail .rail-card:last-child{flex:1;min-height:0}
  body[data-screen="game"] #rail .rail-log,
  body[data-screen="game"] #lrail .rail-card:last-child .rail-log{max-height:none;flex:1}

  /* chat quick-emotes row */
  .chat-emotes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .chat-emotes button{background:rgba(255,255,255,.05);border:1px solid var(--bord);border-radius:9px;
    font-size:16px;line-height:1;padding:5px 8px;cursor:pointer}
  .chat-emotes button:hover{background:rgba(255,255,255,.1)}
}

/* wide monitors: scale the felt, seats and cards up so the table reads big and
   full rather than a small oval marooned in empty space */
@media (min-width:1720px){
  .seat{width:92px}
  .seat .av{width:58px;height:58px;font-size:20px}
  .seat .info .nm{font-size:12px}
  .seat .info .ch{font-size:14px}
  :root{
    --pc-w:60px;--pc-h:84px;--pc-rk:22px;--pc-su:18px;--pc-big:34px;
    --hero-w:74px;--hero-h:104px;--hero-rk:26px;--hero-su:20px;--hero-big:42px;
  }
}

/* =====================================================================
   TABLE REDESIGN (desktop, ≥1024) — premium "arena station" felt.
   Web-only reskin: replaces the stretched-mobile green oval with the
   constrained, teal-blue premium felt from the table-lab prototype.
   Scoped to body[data-screen="game"] so the MOBILE layout is untouched.
   Seat %s, ghud, dock and the chip-fly math are unchanged (the felt is
   only re-sized/re-coloured; seats are absolute % of .table).
   ===================================================================== */
@media (min-width:1024px){
  body[data-screen="game"] .table{
    top:128px; bottom:236px; left:50%; right:auto; transform:translateX(-50%);
    width:min(1080px, calc(100% - 72px));
    border:8px solid #1b1533; border-radius:50%/48%;
    background:
      radial-gradient(120% 130% at 50% 6%,rgba(45,226,197,.12),transparent 55%),
      radial-gradient(140% 120% at 50% 122%,rgba(108,75,255,.16),transparent 60%),
      radial-gradient(120% 130% at 50% 42%,#17324a,#0c1b2c 72%);
    box-shadow:0 0 0 2px rgba(0,0,0,.5), inset 0 0 70px rgba(0,0,0,.6),
      0 40px 90px rgba(0,0,0,.6), 0 0 90px rgba(108,75,255,.16);
  }
  body[data-screen="game"] .table:before{
    inset:14px; border:1.5px solid rgba(45,226,197,.30);
    box-shadow:0 0 24px rgba(45,226,197,.12) inset; border-radius:49%/47%;
  }
}

/* wide-monitor (≥1720) avatar is bumped to 58px — scale its frame ring +
   container to match, else the cosmetic frame (sized for 46px) misaligns */
@media (min-width:1720px){
  .avbox,.avbox .av{width:58px;height:58px}
  .avbox .frm{-webkit-mask:radial-gradient(transparent 27px,#000 28px);
    mask:radial-gradient(transparent 27px,#000 28px)}
}

/* left-rail "За столом" leaderboard (desktop) */
.lb-list{display:flex;flex-direction:column}
.lb-row{display:flex;align-items:center;gap:8px;padding:6px 3px}
.lb-row+.lb-row{border-top:1px solid rgba(255,255,255,.05)}
.lb-row.me{background:rgba(108,75,255,.13);border-radius:9px;margin:0 -3px;padding:6px}
.lb-rk{width:15px;text-align:center;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:11px;color:var(--dim);flex:none}
.lb-ava{width:27px;height:27px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:11px;color:#fff}
.lb-nm{flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-ch{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12.5px;color:var(--gold);flex:none}

/* floating reactions over the felt (desktop spectacle) */
.floatemo{position:fixed;font-size:30px;pointer-events:none;z-index:200;
  animation:floatemo 1.6s ease-out forwards;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
@keyframes floatemo{0%{opacity:0;transform:translateY(0) scale(.5)}
  15%{opacity:1;transform:translateY(-14px) scale(1.12)}
  100%{opacity:0;transform:translateY(-92px) scale(1)}}

/* =====================================================================
   RAILS v2 + RESULT (desktop) — integrate the side rails so they read as
   one designed surface (not boxy panels standing out), fill the right rail
   with functional live-prop-bets, and centre the result screen without the
   stray chat. Scoped ≥1024 / by data-screen so MOBILE stays untouched.
   ===================================================================== */
@media (min-width:1024px){
  /* result screen: drop the chat rail, reclaim the nav gutter (the desktop
     "match report" layout itself lives in the RESULT (desktop) block below) */
  body[data-screen="result"] #shell{padding-left:0}
  body[data-screen="result"] #rail{display:none}
  /* the report is full-stage, not the 680px reading column .page defaults to */
  #p-result{left:0;right:0;bottom:0;width:auto;overflow-y:auto}
}
@media (min-width:1280px){
  /* dissolve the rail "columns" — no seam/backdrop, cards float on the shared
     felt backdrop so the rails read as part of the table, not bolted-on panels */
  body[data-screen="game"] #lrail{background:transparent;border-right:0;padding:16px 14px}
  body[data-screen="game"] #rail{background:transparent;border-left:0;padding:16px 14px}
  /* integrated, premium rail cards (both rails) — glassy, low-contrast */
  #lrail .rail-card,#rail .rail-card{
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014));
    border:1px solid rgba(255,255,255,.06);border-radius:14px;
    box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 26px rgba(0,0,0,.28);
  }
  #lrail .rail-h,#rail .rail-h{font-size:12px;letter-spacing:.3px;color:#d3cdf0;padding-bottom:1px}
  #lrail .rail-h i,#rail .rail-h i{font-size:16px}
  .rail-kpi{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}
  .hand-row{border-top-color:rgba(255,255,255,.05)}

  /* header badges (LIVE / prop window) */
  .rc-badge{margin-left:auto;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:9px;letter-spacing:1px;
    text-transform:uppercase;color:var(--dim);display:inline-flex;align-items:center;gap:5px}
  .rc-badge.open{color:var(--teal)}
  .rc-badge.live .live-dot{width:6px;height:6px;border-radius:50%;background:var(--red);
    box-shadow:0 0 8px var(--red);animation:pulse 1.6s infinite}
  .rc-note{font-size:10.5px;color:var(--dim);margin-top:11px;line-height:1.4}

  /* right rail: live prop-bets card */
  .rc-props{background:linear-gradient(160deg,rgba(108,75,255,.18),rgba(177,75,255,.06))!important;
    border-color:rgba(139,123,255,.32)!important}
  .rail-props{display:flex;flex-direction:column;gap:9px}
  #rail .prop{background:rgba(8,6,15,.45);border:1px solid var(--bord);border-radius:12px;padding:10px 11px}
  #rail .prop .phead{display:flex;align-items:center;gap:8px}
  #rail .prop .phead i{font-size:15px;color:var(--mag)}
  #rail .prop .plbl{flex:1;min-width:0;font-size:12.5px;font-weight:600;line-height:1.25}
  #rail .prop .pmult{font-family:'Rajdhani',sans-serif;font-weight:800;font-size:16px;color:var(--teal)}
  #rail .prop .pstake{font-size:11px;color:var(--muted);margin-top:7px;display:flex;align-items:center;gap:5px}
  #rail .prop .pstake .pwin{color:var(--gold);font-weight:700}
  #rail .prop .padds{display:flex;gap:6px;margin-top:9px}
  #rail .prop .padd{flex:1;padding:7px 4px;border-radius:9px;background:rgba(255,194,75,.09);
    border:1px solid rgba(255,194,75,.26);color:var(--gold);font-family:'Rajdhani',sans-serif;
    font-weight:700;font-size:12px;cursor:pointer;transition:.12s}
  #rail .prop .padd:hover{background:rgba(255,194,75,.18);transform:translateY(-1px)}

  /* right rail flow: props sit at natural height, chat grows to fill */
  body[data-screen="game"] #rail .rc-props{flex:none;min-height:0}
  body[data-screen="game"] #rail .rc-chat{flex:1;min-height:0;display:flex;flex-direction:column}
}

/* =====================================================================
   UNIFIED GAME BACKDROP — one gradient spans rails + felt so the side
   rails read as part of the table (no seam between the left block and the
   centre). #scr/#g go transparent; the felt keeps its own glow.
   ===================================================================== */
@media (min-width:1024px){
  body[data-screen="game"] #shell{background:radial-gradient(1250px 860px at 50% 20%,#181336,#0a0718 68%)}
  body[data-screen="game"] #scr{background:transparent}
  body[data-screen="game"] #g{background:transparent}
}

/* =====================================================================
   LEFT RAIL v3 (desktop) — hand-strength hero + session tiles + last-hands,
   matching the approved reference. Scoped ≥1280 (rail is desktop-only).
   ===================================================================== */
@media (min-width:1280px){
  body[data-screen="game"] #lrail{width:252px;gap:20px;padding:18px 15px}
  .lr-sec{display:flex;flex-direction:column;min-height:0}
  .lr-grow{flex:1}
  .lr-h{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:2.6px;
    text-transform:uppercase;color:var(--dim);margin:0 2px 11px}

  /* hand-strength hero */
  .hand-hero{background:linear-gradient(160deg,rgba(45,226,197,.12),rgba(108,75,255,.05));
    border:1px solid rgba(45,226,197,.30);border-radius:18px;padding:17px 17px 15px;
    box-shadow:0 0 34px rgba(45,226,197,.12),0 12px 28px rgba(0,0,0,.32)}
  .hand-hero.empty{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07);box-shadow:none}
  .hh-name{font-family:'Unbounded','Rajdhani',sans-serif;font-weight:800;font-size:25px;line-height:1.05;
    color:var(--teal);letter-spacing:.2px}
  .hand-hero.empty .hh-name{color:var(--dim);font-size:17px}
  .hh-sub{font-size:12.5px;color:#d3cdf0;margin-top:5px}
  .hand-hero.empty .hh-sub{color:var(--dim)}

  /* Индикатор силы — четыре дискретных сегмента, а не шкала с процентом.
     Шкала стояла под подписью «шанс на победу к вскрытию», а процент брался из
     таблицы «категория → число»: и нижняя пара двоек, и оверпара тузов
     получали 36%. Сегменты показывают ровно то, что подсказка знает. */
  .hh-meter{display:flex;gap:5px;margin-top:13px}
  .hh-meter>i{flex:1;height:7px;border-radius:999px;background:rgba(255,255,255,.10);transition:background .3s ease}
  .hh-meter.lv-weak>i.on{background:#8b86a8}
  .hh-meter.lv-risky>i.on{background:var(--gold);box-shadow:0 0 8px rgba(255,194,75,.35)}
  .hh-meter.lv-strong>i.on{background:var(--teal);box-shadow:0 0 8px rgba(45,226,197,.35)}
  .hh-meter.lv-nuts>i.on{background:linear-gradient(90deg,#2DE2C5,#8B7BFF);box-shadow:0 0 10px rgba(45,226,197,.55)}
  .hh-draw{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;letter-spacing:.3px;
    color:var(--gold);margin-top:10px}
  .hh-draw:empty{display:none}
  .hh-hint{font-size:11.5px;color:var(--dim);margin-top:9px}
  .hand-hero.empty .hh-meter,.hand-hero.empty .hh-hint,
  .hand-hero.no-level .hh-meter,.hand-hero.no-level .hh-hint{display:none}

  /* Цвет хиро по уровню: бирюза больше не значит «у тебя всё хорошо». */
  .hand-hero.lv-weak{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);box-shadow:0 12px 28px rgba(0,0,0,.32)}
  .hand-hero.lv-weak .hh-name{color:#cfc9e6}
  .hand-hero.lv-risky{background:linear-gradient(160deg,rgba(255,194,75,.12),rgba(108,75,255,.05));
    border-color:rgba(255,194,75,.32);box-shadow:0 0 30px rgba(255,194,75,.10),0 12px 28px rgba(0,0,0,.32)}
  .hand-hero.lv-risky .hh-name{color:var(--gold)}
  .hand-hero.lv-nuts{border-color:rgba(45,226,197,.55);box-shadow:0 0 44px rgba(45,226,197,.20),0 12px 28px rgba(0,0,0,.32)}

  /* session 2×2 tiles */
  .sess-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .sess-tile{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
    border-radius:14px;padding:13px 14px}
  .sess-tile b{display:block;font-family:'Rajdhani',sans-serif;font-weight:800;font-size:25px;line-height:1;color:#fff}
  .sess-tile.teal b{color:var(--teal)}.sess-tile.gold b{color:var(--gold)}.sess-tile.red b{color:var(--red)}
  .sess-tile small{display:block;color:var(--muted);font-size:11.5px;margin-top:7px;line-height:1.25}
  .sess-tile .fire{display:inline-flex;align-items:center;gap:5px}

  /* last-hands list */
  .last-hands{display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0}
  .last-hands::-webkit-scrollbar{width:5px}.last-hands::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:99px}
  .lh-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px 13px}
  .lh-row .ic{font-size:15px;flex:none;display:flex}
  .lh-row.win .ic{color:var(--teal)}.lh-row.lose .ic{color:var(--dim)}
  .lh-row .lbl{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lh-row .amt{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;flex:none}
  .lh-row.win .amt{color:var(--teal)}.lh-row.lose .amt{color:var(--dim)}
}

/* =====================================================================
   POLISH (desktop game): uniform scanline across rails + felt, and subtle
   gold nameplates on the seats (like the lobby, not the loud magenta ones).
   ===================================================================== */
@media (min-width:1024px){
  /* vertical frames separating the two rails from the felt (subtle gold,
     fading at top/bottom) — restores structure lost by the seamless backdrop */
  body[data-screen="game"] #lrail,body[data-screen="game"] #rail{position:relative}
  body[data-screen="game"] #lrail::after,body[data-screen="game"] #rail::before{
    content:"";position:absolute;top:0;bottom:0;width:1px;pointer-events:none;z-index:2;
    background:linear-gradient(180deg,transparent,rgba(255,194,75,.42) 12%,rgba(255,194,75,.5) 50%,rgba(255,194,75,.42) 88%,transparent);
    box-shadow:0 0 10px rgba(255,194,75,.25)}
  body[data-screen="game"] #lrail::after{right:0}
  body[data-screen="game"] #rail::before{left:0}

  /* seat nameplates: quiet gold frame instead of the per-cosmetic magenta */
  body[data-screen="game"] .seat .info{
    border-color:rgba(255,194,75,.30)!important;
    background:rgba(8,6,15,.66)!important;
    box-shadow:0 0 0 1px rgba(255,194,75,.05),0 6px 16px rgba(0,0,0,.4);
  }
  body[data-screen="game"] .seat .info::after{
    border-top-color:rgba(255,194,75,.6);border-right-color:rgba(255,194,75,.6);
  }
}