/* =====================================================================
   v17 · Дизайн-система «Чёрной дамы» (по правилам ui-ux-pro-max).
   Здесь только токены и компоненты поверх style.css:
   шкала отступов 4/8, радиусы, слои, длительности анимаций,
   зоны нажатия 44px, видимый фокус, шторки на телефоне, нижняя навигация.
   ===================================================================== */
:root{
  /* отступы: только из этой шкалы */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  /* радиусы */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  /* поверхности и линии (тёплое стекло на тёмной комнате) */
  --surface-1:rgba(255,244,225,.04); --surface-2:rgba(255,244,225,.07); --surface-3:rgba(255,244,225,.12);
  --line:rgba(255,236,200,.10); --line-strong:rgba(255,236,200,.20);
  --sheet-bg:#1c1720; --text:#f3ecd8;
  --ok:#8fe0ad; --danger:#ff9f92;
  /* тени-высоты: только три уровня */
  --e-1:0 1px 2px rgba(0,0,0,.35);
  --e-2:0 10px 28px -10px rgba(0,0,0,.6);
  --e-3:0 28px 70px -16px rgba(0,0,0,.75);
  /* слои */
  --z-header:20; --z-nav:30; --z-side:40; --z-fly:60; --z-modal:70; --z-toast:80; --z-alert:90; --z-skip:100;
  /* движение: нажатие, смена состояния, появление; уход быстрее появления */
  --dur-1:120ms; --dur-2:200ms; --dur-3:280ms; --dur-exit:170ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-spring:cubic-bezier(.34,1.36,.64,1);
  --tap:44px; --tabbar-h:64px;
}

/* ---------- основа ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary,select,label:has(input[type=checkbox]),label:has(input[type=file]){cursor:pointer}
a,button,input,summary,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
.skip{position:fixed;left:var(--sp-3);top:-80px;z-index:var(--z-skip);padding:10px 16px;border-radius:var(--r-md);background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;transition:top var(--dur-2) var(--ease-out)}
.skip:focus{top:calc(var(--sp-3) + env(safe-area-inset-top,0px))}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pg,.dcount,.lb b,.stats b,.secs,.chip,.badge,.tseats,.mycard span,.stars b{font-variant-numeric:tabular-nums}
h1,h2,h3{text-wrap:balance}
p,li{overflow-wrap:break-word}
/* поля: 16px, чтобы iPhone не приближал страницу при вводе */
input[type=text],input[type=password],input[type=search],.usearch{font-size:16px;padding-inline:14px;min-height:var(--tap)}
input[aria-invalid="true"]{border-color:rgba(255,120,100,.7)!important;box-shadow:0 0 0 3px rgba(255,120,100,.16)!important}
.ferr{display:flex;gap:var(--sp-2);align-items:flex-start}
.ferr::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(255,120,100,.3);color:#fff;font-weight:800;font-size:.75rem;margin-top:1px}

/* ---------- кнопки ---------- */
.btn svg{width:18px;height:18px;flex:none}
.btn.loading{position:relative;color:transparent!important;opacity:1!important;cursor:progress}
.btn.loading svg{visibility:hidden}
.btn.loading::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  border:2px solid rgba(29,22,8,.28);border-top-color:var(--accent-ink);animation:spin .7s linear infinite}
.btn.ghost.loading::after,.btn.bad.loading::after{border-color:rgba(255,255,255,.22);border-top-color:var(--text)}
@keyframes spin{to{transform:rotate(360deg)}}
.ibtn.danger{color:var(--danger);border-color:rgba(255,120,100,.32);background:rgba(255,99,82,.08)}
.ibtn.danger:hover{background:rgba(255,99,82,.15)}
.ibtn svg{pointer-events:none}
.brand{min-height:var(--tap);padding-inline:var(--sp-1);margin-left:calc(-1 * var(--sp-1));border-radius:var(--r-md)}
.back{min-height:var(--tap);display:inline-flex;align-items:center;gap:var(--sp-1)}
.kick{min-height:36px;padding-inline:var(--sp-3)}
.chatform .send{width:var(--tap);min-width:var(--tap);padding:0}
.chatform .send svg{width:20px;height:20px}
/* пальцем: всё, на что нажимают, не меньше 44×44 */
@media (pointer:coarse){
  .ibtn,.ibtn.sm{width:var(--tap);height:var(--tap)}
  .acct{min-height:var(--tap)}
  .btn.sm{min-height:40px}
  .quick button{min-height:var(--tap);padding-inline:var(--sp-4)}
  .kick{min-height:var(--tap)}
  .sortmenu button{min-height:var(--tap)}
  .seg button{min-height:40px}
  .lbwho{min-height:var(--tap)}
}

/* ---------- меню стола: значки, группы, переключатель ---------- */
.menu{z-index:var(--z-header);min-width:260px;padding:var(--sp-2);border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--e-3);
  transform-origin:top right;animation:pop-in var(--dur-2) var(--ease-out)}
.menu button,.menu .mitem{gap:var(--sp-3);min-height:var(--tap);padding:0 var(--sp-3)}
.menu svg{width:20px;height:20px;flex:none;color:var(--muted)}
.menu .danger svg{color:currentColor}
.menu hr{margin:var(--sp-1) var(--sp-2)}
.menu .mitem.sw span{flex:1}
.sw input{-webkit-appearance:none;appearance:none;flex:none;width:40px;height:24px;margin:0;border-radius:var(--r-pill);background:var(--surface-3);border:1px solid var(--line-strong);position:relative;cursor:pointer;transition:background-color var(--dur-2)}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform var(--dur-2) var(--ease-spring)}
.sw input:checked{background:var(--accent);border-color:var(--accent)}
.sw input:checked::after{transform:translateX(16px);background:var(--accent-ink)}
.sortmenu{border-radius:var(--r-lg);padding:var(--sp-2);background:rgba(28,23,30,.96);border:1px solid var(--line);box-shadow:var(--e-3);transform-origin:bottom left;animation:pop-in var(--dur-2) var(--ease-out)}
.sortmenu button{min-height:40px;border-radius:var(--r-sm)}
@keyframes pop-in{from{opacity:0;transform:scale(.96)}}

/* ---------- главная: две колонки на широком экране, вкладки снизу на телефоне ---------- */
.landing{place-items:start center;padding-top:var(--sp-5);padding-bottom:var(--sp-6)}
.hall{gap:var(--sp-5)}
.hall-aside,.hall-main{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.hall-main{gap:var(--sp-5)}
.hero2{gap:var(--sp-3);margin:0}
@media (min-width:1100px){
  .hall{max-width:min(1120px,100%);display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--sp-7);align-items:start}
  .hall-aside{position:sticky;top:var(--sp-5)}
  .hero2{align-items:flex-start;text-align:left}
  .hero2 img{width:100%;max-width:320px;height:auto}
  .halltabs{align-self:flex-start;width:min(360px,100%)}
  .hall-aside .mycard{flex-direction:column;align-items:stretch}
  .hall-aside .mycard .btn{width:100%}
}
.tabbar{display:none}
@media (max-width:760px){
  .halltabs{display:none}
  .landing{padding-top:var(--sp-4);padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + var(--sp-5))}
  .hall[data-tab="rating"] .hall-aside,.hall[data-tab="users"] .hall-aside{display:none}
  .hero2 img{width:min(168px,44vw)}
  .hero2 p{font-size:.92rem}
  body.in-hall .acct{display:none} /* профиль — во вкладке снизу */
  /* в зале всплывашка над нижней панелью, чтобы не закрывать заголовки и шторки */
  body.in-hall .toast{top:auto;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + var(--sp-3))}
  @keyframes toast-up{from{opacity:0;transform:translate(-50%,10px)}}
  body.in-hall .toast{animation-name:toast-up}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);justify-content:space-around;gap:var(--sp-1);
    padding:6px max(var(--sp-2),env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(var(--sp-2),env(safe-area-inset-right,0px));
    background:rgba(21,18,23,.88);border-top:1px solid var(--line);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
  .tabbar button{flex:1;max-width:128px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    border:0;background:none;color:var(--muted);font:600 .74rem/1 var(--f-body);border-radius:var(--r-md);position:relative;isolation:isolate}
  .tabbar svg{width:24px;height:24px}
  .tabbar .av{width:24px!important;height:24px!important}
  .tabbar button::before{content:"";position:absolute;left:50%;top:4px;width:56px;height:30px;margin-left:-28px;border-radius:var(--r-pill);background:rgba(226,194,125,.16);
    opacity:0;transform:scaleX(.6);transition:opacity var(--dur-2),transform var(--dur-2) var(--ease-spring);z-index:-1}
  .tabbar button[aria-pressed="true"]{color:var(--accent-hi)}
  .tabbar button[aria-pressed="true"]::before{opacity:1;transform:none}
  .tabbar button:active{transform:scale(.96)}
}

/* «Ваш стол» */
.mycard{border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-4) var(--sp-4) 58px;gap:var(--sp-3)}

/* ---------- карточки столов: вся карточка — одна цель нажатия ---------- */
.tlist{gap:var(--sp-3)}
.tcard{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4);padding:var(--sp-4);border-radius:var(--r-lg);
  background:var(--surface-1);border:1px solid var(--line);transition:background-color var(--dur-2),border-color var(--dur-2),transform var(--dur-1) var(--ease-out)}
.tcard:not(.sk):hover{background:var(--surface-2);border-color:var(--line-strong)}
.tcard:has(.tmain:active){transform:scale(.99)}
.tmain{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none}
.tmain::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tmain:focus-visible{outline:none}
.tcard:has(.tmain:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.ttop{display:flex;align-items:center;gap:var(--sp-2) var(--sp-3);flex-wrap:wrap;min-width:0}
.tname{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;font-size:1.06rem}
.tname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tname svg{width:16px;height:16px;flex:none;color:var(--accent)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:.76rem;font-weight:600;line-height:1.2;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st-lobby .pill{color:var(--ok);background:rgba(79,192,124,.12)}
.st-playing .pill{color:var(--accent-hi);background:rgba(226,194,125,.12)}
.st-playing .pill i{animation:live 1.6s ease-in-out infinite}
@keyframes live{50%{opacity:.35}}
.tseats{display:flex;align-items:center;gap:var(--sp-2);font-size:.86rem;color:var(--muted)}
.tseats b{color:var(--text)}
.pips{display:flex;gap:3px}
.pips i{width:9px;height:13px;border-radius:2px;border:1.5px solid var(--line-strong)}
.pips i.on{background:var(--accent);border-color:var(--accent)}
.tplayers{font-size:.86rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tplayers.muted{opacity:.8}
.tact{position:relative;z-index:1;display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.tact .btn{min-width:96px}
@media (max-width:480px){.tact{width:100%}.tact .btn{flex:1}}

/* загрузка: каркас вместо «Загружаем…» */
.sk{pointer-events:none}
.tcard.sk{flex-direction:column;align-items:stretch;gap:10px;min-height:104px}
.sk i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-1) 0%,var(--surface-3) 50%,var(--surface-1) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.tcard.sk i:nth-child(1){width:45%;height:16px}
.tcard.sk i:nth-child(2){width:28%}
.tcard.sk i:nth-child(3){width:62%}
.lbgrid section.sk{display:flex;flex-direction:column;gap:14px;min-height:190px}
.lbgrid section.sk i:first-child{width:40%;height:16px}
@keyframes shimmer{to{background-position:-200% 0}}

/* пустое состояние: объяснение и действие */
.estate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2);padding:var(--sp-6) var(--sp-4);border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface-1)}
.estate img{opacity:.85;margin-bottom:var(--sp-1)}
.estate b{font-size:1.05rem}
.estate span{color:var(--muted);max-width:38ch}
.estate .btn{margin-top:var(--sp-2)}

/* ---------- окна: шторка снизу на телефоне, карточка по центру на компьютере ---------- */
.modal{z-index:var(--z-modal);background:rgba(8,6,10,.64);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade-in var(--dur-2) var(--ease-out)}
.modal .sheet{background:var(--sheet-bg);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e-3);padding:var(--sp-4) var(--sp-5) var(--sp-5);gap:var(--sp-4);
  animation:sheet-pop var(--dur-3) var(--ease-out);transition:transform var(--dur-2) var(--ease-out)}
.modal .sheet:focus,.modal .sheet:focus-visible{outline:none}
.modal.closing{animation:fade-out var(--dur-exit) var(--ease-in) forwards;pointer-events:none}
.modal.closing .sheet{animation:sheet-pop-out var(--dur-exit) var(--ease-in) forwards}
.sheet-head{min-height:var(--tap)}
.grab{display:none}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes sheet-pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes sheet-pop-out{to{opacity:0;transform:scale(.98)}}
@media (max-width:640px){
  .modal{place-items:end stretch;padding:max(24px,env(safe-area-inset-top,0px)) 0 0}
  .modal .sheet{max-width:none;width:100%;max-height:calc(100dvh - max(24px,env(safe-area-inset-top,0px)));border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:0;
    padding:var(--sp-2) max(var(--sp-4),env(safe-area-inset-right,0px)) calc(var(--sp-5) + env(safe-area-inset-bottom,0px)) max(var(--sp-4),env(safe-area-inset-left,0px));
    animation:sheet-up var(--dur-3) var(--ease-out)}
  .modal.closing .sheet{animation:sheet-down var(--dur-exit) var(--ease-in) forwards}
  .modal .sheet.dragging{transition:none}
  .grab{display:block;flex:none;width:40px;height:5px;border-radius:3px;background:var(--line-strong);margin:2px auto 0;touch-action:none}
  .sheet-head{touch-action:none}
}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes sheet-down{to{transform:translateY(100%)}}

/* пароль с кнопкой «показать» */
.pw{position:relative;display:block}
.pw input{width:100%;padding-right:52px}
.pwt{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:var(--tap);height:var(--tap);border:0;background:none;color:var(--muted);display:grid;place-items:center;border-radius:var(--r-md)}
.pwt svg{width:20px;height:20px}
.pwt:hover{color:var(--text)}
.cform{gap:var(--sp-4)}

/* ---------- всплывашки и связь ---------- */
.toast{z-index:var(--z-toast);background:rgba(28,23,30,.96);color:var(--text);border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:var(--r-md);
  padding:10px 16px;box-shadow:var(--e-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:toast-in var(--dur-3) var(--ease-spring)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-10px)}}
.conn{z-index:var(--z-alert);border-radius:var(--r-pill);padding:8px 16px}

/* ---------- стол: чат-шторка и быстрые фразы ---------- */
.quick{gap:var(--sp-2)}
@media (max-width:900px){
  .side{z-index:var(--z-side);gap:var(--sp-3)}
  .side::before{content:"";flex:none;align-self:center;width:40px;height:5px;border-radius:3px;background:var(--line-strong);margin-top:-2px}
  .quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--sp-3));padding-inline:var(--sp-3);scroll-padding-inline:var(--sp-3)}
  .quick::-webkit-scrollbar{display:none}
  .quick button{flex:none}
}
.mebar .acts{gap:var(--sp-2)}
@media (max-width:760px){.hero2 img{width:min(136px,38vw)}}
/* содержимое окон: ровный ритм 16px */
#modalBody{display:flex;flex-direction:column;gap:var(--sp-4)}
#modalBody>.rowbtn{margin:0}
#modalBody .uprof{gap:var(--sp-3)}
.confirm.out{padding-top:var(--sp-3);border-top:1px solid var(--line)}
.rowbtn{min-height:56px}
.rowbtn .chev{width:20px;height:20px;flex:none;color:var(--accent)}
.back svg{width:18px;height:18px}
.rules-d summary{min-height:var(--tap);display:flex;align-items:center;gap:var(--sp-2)}
/* на главной в шапке есть место для надписи */
@media (max-width:420px){body.in-hall .brand img.bn{display:block;height:20px}}
#modalBody .uprof{margin:0}
.rules-d summary{list-style:none}
.rules-d summary::-webkit-details-marker{display:none}
.rules-d summary::before{content:"";flex:none;width:7px;height:7px;margin:0 4px 0 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-2) var(--ease-out)}
.rules-d[open] summary::before{transform:rotate(45deg)}
.skip{min-height:var(--tap);display:inline-flex;align-items:center}
@media (pointer:coarse){.tact .btn{min-height:var(--tap)}}
/* телефон лёжа: логотип не занимает весь экран */
@media (max-height:500px) and (orientation:landscape){.hero2{flex-direction:row;text-align:left;justify-content:center}.hero2 img{width:96px}.hero2 p{max-width:40ch}}

/* ---------- отмена хода ---------- */
.btn.undo{gap:6px;padding-inline:12px}
.btn.undo svg{width:18px;height:18px}
.btn.undo .undo-n{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--surface-3);font-size:.78rem;font-variant-numeric:tabular-nums;display:inline-grid;place-items:center}
@media (max-width:420px){.btn.undo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* ---------- надписи «Беру», «Погон!», «Бито»: над картами стола, не поверх них ---------- */
.felt>.splash{z-index:30;top:calc(47% - clamp(58px,9vw,96px));transform:translate(-50%,-100%)}
.felt>.splash .sp{animation-name:splash-up}
@keyframes splash-up{0%{opacity:0;transform:translateY(8px) scale(.7)}15%{opacity:1;transform:scale(1.1)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
.felt>.splash .sp small{margin-top:2px}

/* ---------- почта в профиле и «Забыли пароль?» ---------- */
.link{background:none;border:0;padding:0 var(--sp-1);min-height:var(--tap);color:var(--accent);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(226,194,125,.4);cursor:pointer}
.link:hover{color:var(--accent-hi)}
.forgot{align-self:center}
.mailbox{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-1)}
.mailbox h3{margin:0;font-size:1rem}
.mailbox .note{margin:0}
.mailbox .cform{gap:var(--sp-2)}
.mailok{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:0;overflow-wrap:anywhere}
.mailok svg{width:20px;height:20px;flex:none;color:var(--ok)}
.mailok span{color:var(--ok);font-size:.88rem}
.mailacts{display:flex;gap:var(--sp-3);flex-wrap:wrap}
#mCode{letter-spacing:.3em;font-variant-numeric:tabular-nums}
input[type=email]{background:rgba(0,0,0,.3);border:1px solid var(--glass-edge);border-radius:12px;color:var(--ink);font:inherit;font-size:16px;padding:8px 14px;min-height:var(--tap);min-width:0;transition:border-color .14s,box-shadow .14s}
input[type=email]:focus{outline:none;border-color:rgba(226,194,125,.6);box-shadow:0 0 0 3px rgba(226,194,125,.15)}
#mCode:placeholder-shown{letter-spacing:normal}

/* переключатель бета-интерфейса в профиле */
.betasw{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-1)}
.betasw span{display:flex;flex-direction:column;gap:2px}
.betasw small{color:var(--muted);font-size:.82rem}

/* элементы бета-интерфейса — в старом скрыты */
.v2home,.v2-nav,.v2-theme,.v2-doc,.v2-pagefoot,.brand .bt,.acct .acct-stars{display:none}
a.rowbtn{text-decoration:none;color:inherit}