/* What opens over a screen: sheets, the table chat, messages and an invitation to a table. */

/* ---------- a sheet rises from the bottom edge ---------- */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgba(4,5,20,.68)}
.sheet{--pad:20px;position:relative;width:min(480px,100%);max-height:calc(100% - 28px - env(safe-area-inset-top,0px));box-sizing:border-box;display:flex;flex-direction:column;gap:14px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:22px max(var(--pad),env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(var(--pad),env(safe-area-inset-left,0px));
  background:var(--bg);color:var(--text);animation:sheetup .22s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetup{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.sheet > *{flex:none}
.sheet h2{padding-right:44px;font-size:calc(var(--head-size) + 4px);line-height:1.2;color:var(--text)}
.sheet h2 .mdl{width:.8em;height:.8em}
.sheet p{margin:0;line-height:1.5}
.sheet .field{gap:8px}
.sheet .flabel{margin-top:6px}
.sheet .search{margin-top:0}
.sh-x{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-ctl);background:none;color:var(--muted)}
.sh-x svg{width:22px;height:22px}
.sheet > .sh-x{position:absolute;right:max(8px,env(safe-area-inset-right,0px));top:12px;z-index:1}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.ok{color:var(--good);font-weight:700}
.ghost.no{color:var(--bad)}
.secondary.no{color:var(--bad);border-color:var(--bad)}
.acc{font-size:15px;overflow-wrap:anywhere}

/* numbers in a row: rating, league, a player's card */
.pstats.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pstats.s3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* a ranked list */
.lbs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lb{display:flex;align-items:center;gap:10px;min-height:58px;border-bottom:var(--div)}
.lb-n{flex:none;width:28px;text-align:center;font-family:var(--f-display);font-weight:var(--w-head);font-size:16px;color:var(--muted);font-feature-settings:"lnum" 1}
.lb .ava{width:38px;height:38px;font-size:16px}
.lb .fr-tx{flex:1}
.lb-r{flex:none;font-family:var(--f-display);font-weight:var(--w-head);font-size:18px;font-feature-settings:"lnum" 1;font-variant-numeric:tabular-nums}
.lb.me .fr-tx b,.lb.me .lb-n,.lb.me .lb-r{color:var(--hi)}
.prizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.prizes div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;text-align:center;border:var(--bw) solid var(--line);border-radius:var(--r-ctl)}
.prizes span{font-size:12px;line-height:16px;color:var(--muted)}
.prizes b{font-family:var(--f-display);font-weight:var(--w-head);font-size:20px;line-height:24px;color:var(--hi);font-feature-settings:"lnum" 1}

/* rules */
.mode{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-panel)}
.mode h3{margin:0;font-family:var(--f-display);font-weight:var(--w-head);font-size:18px;line-height:1.2;font-feature-settings:"lnum" 1}
.mode p{font-size:14px;color:var(--muted)}
.mode ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.45}
.mode .lnk{align-self:flex-start;min-height:32px}
.rules{list-style:none;margin:0;padding:0;counter-reset:rule;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.5}
.rules li{counter-increment:rule;display:grid;grid-template-columns:30px minmax(0,1fr)}
.rules li::before{content:counter(rule);font-family:var(--f-display);font-weight:var(--w-head);color:var(--hi);font-feature-settings:"lnum" 1}
.rules li > span{min-width:0}
.rules b{color:var(--hi)}

/* a player: the card and the editor */
.avarow{display:flex;align-items:center;gap:14px}
.avarow .ava{width:72px;height:72px;font-size:30px}
.avarow .acts{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.avarow .secondary{min-height:44px}
.emgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.emgrid button{aspect-ratio:1;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-ctl);background:none}
.emgrid .ava{width:84%;height:84%}
.emgrid button[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:1px}

/* an emblem: a drawn mark on a field of colour */
.ava.em svg{width:56%;height:56%;fill:currentColor}
.ava.em.c0{background:#F7B92C;color:#15174A}
.ava.em.c1{background:#C4283F;color:#FFF4E0}
.ava.em.c2{background:#1FA39A;color:#0F1038}

/* ---------- table chat ---------- */
.bubbles{position:fixed;inset:0;z-index:37;pointer-events:none}
.bubble{position:absolute;max-width:60%;box-sizing:border-box;padding:8px 12px;background:var(--card);color:var(--card-ink);font-size:14px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;border:var(--card-bw) solid var(--card-edge);border-radius:var(--r-panel);box-shadow:var(--sh-card);animation:bub .2s ease-out}
.bubble.mine{background:var(--accent);color:var(--on-accent)}
@keyframes bub{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chat{position:fixed;left:50%;bottom:0;z-index:38;transform:translateX(-50%);width:min(480px,100%);max-height:66%;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;
  padding:8px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--surface);color:var(--text);border-top:var(--bw) solid var(--line-strong)}
.chead{display:flex;align-items:center;gap:12px;min-height:44px}
.chead b{flex:1;font-family:var(--f-display);font-weight:var(--w-head);font-size:16px;text-transform:var(--caps);letter-spacing:var(--track)}
.chead .lnk{color:var(--muted);font-size:13px}
.clog{flex:1 1 auto;min-height:64px;max-height:32vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.4}
.clog .empty{padding:14px 0}
.cmsg{display:flex;align-items:center;gap:8px;min-height:38px}
.cmsg b{flex:none;color:var(--hi);white-space:nowrap}
.cmsg.mine b{color:var(--muted)}
.cmsg span{flex:1;min-width:0;overflow-wrap:anywhere}
/* hide and report: a full 44px to press, though the line stays 38px tall and the two stand close */
.cmsg button{flex:none;width:44px;height:44px;margin-block:-3px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--muted)}
.cmsg button+button{margin-left:-8px}
.cmsg button svg{width:18px;height:18px}
.cmsg.muted span{opacity:.4;text-decoration:line-through}
.cmsg.sys{justify-content:center;min-height:0;padding:3px 0;font-size:13px;color:var(--muted);text-align:center}
.cmsg.sys span{flex:none;max-width:100%}
.cquick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.cquick::-webkit-scrollbar{display:none}
.cquick button{flex:none;min-width:44px;height:44px;box-sizing:border-box;padding:0 12px;border:var(--bw) solid var(--line-strong);border-radius:var(--r-ctl);background:none;color:var(--text);font-size:14px;font-weight:600;white-space:nowrap}
.cform{display:flex;gap:8px}
.cform .txt{min-height:48px}
.cform .primary{flex:none;min-height:48px;width:56px;padding:0;display:grid;place-items:center}
.cform .primary svg{width:22px;height:22px}

/* ---------- a message and an invitation: at the top, over everything ---------- */
#toast,.invbar{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);box-sizing:border-box;max-width:min(456px,calc(100% - 24px))}
#toast{z-index:40;width:max-content;padding:12px 16px;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:700;line-height:1.35;text-align:center;border-radius:var(--r-ctl)}
.invbar{z-index:39;width:100%;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;background:var(--surface);color:var(--text);border:var(--bw) solid var(--accent);border-radius:var(--r-panel)}
.invbar .ava{width:40px;height:40px;font-size:17px}
.invbar .who{flex:1;min-width:0;font-size:13px;line-height:1.35;color:var(--muted)}
.invbar .who b{display:block;font-size:15px;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
/* my partner left and a bot finishes the seat: stay, or leave and lose the stake */
.tkbar{flex-wrap:wrap;gap:10px;padding:12px 14px}
.tkbar .who{flex:1 1 100%}
.tkbar .who b{margin-bottom:3px}
.tkbar .act{flex:1 1 0;min-width:0;padding:0 8px}

/* ================= Адрас ================= */
[data-theme="adras"] .overlay:not(.full) .sheet{border-top:6px solid #F7B92C}
[data-theme="adras"] .lb.me{margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);background:#1B1E5A}
[data-theme="adras"] .mode{border:0}
[data-theme="adras"] #toast{box-shadow:4px 4px 0 #0A0B2A}
[data-theme="adras"] .invbar{border-width:0 0 0 6px;box-shadow:4px 4px 0 #0A0B2A}
[data-theme="adras"] .chat{border-top:6px solid #F7B92C}

/* ================= Ганч ================= */
[data-theme="ganch"] .overlay:not(.full) .sheet{border-top:1px solid #C9A55C;border-radius:18px 18px 0 0}
[data-theme="ganch"] .lb-r,[data-theme="ganch"] .prizes b{color:var(--accent)}
[data-theme="ganch"] .chat{border-top-color:#C9A55C;border-radius:18px 18px 0 0}
[data-theme="ganch"] #toast{background:#16263D;color:var(--text);border:1px solid #C9A55C;font-weight:600;box-shadow:0 10px 24px rgba(0,0,0,.5)}
[data-theme="ganch"] .invbar{box-shadow:0 10px 24px rgba(0,0,0,.5)}
[data-theme="ganch"] .emgrid button{border-radius:50%}

/* ================= Топчан ================= */
[data-theme="topchan"] .overlay{background:rgba(39,33,28,.6)}
[data-theme="topchan"] .overlay:not(.full) .sheet{border-top:2px solid #27211C;border-radius:18px 18px 0 0}
[data-theme="topchan"] .mode{background:#FFFBF2;border-color:#27211C;box-shadow:3px 3px 0 #27211C;margin-right:3px}
[data-theme="topchan"] .prizes div{background:#FFFBF2;border-color:#27211C}
[data-theme="topchan"] .emgrid button{border-radius:50%}
[data-theme="topchan"] .emgrid button[aria-pressed="true"]{outline-color:#27211C}
[data-theme="topchan"] .chat{background:#FFFBF2;border-top:2px solid #27211C;border-radius:18px 18px 0 0}
[data-theme="topchan"] .cquick button{border-radius:20px;background:#F5ECDC}
[data-theme="topchan"] .bubble{border:2px solid #27211C}
[data-theme="topchan"] .bubble.mine{background:#E3A72F;color:#27211C}
[data-theme="topchan"] #toast{background:#FFFBF2;color:#27211C;border:2px solid #27211C;box-shadow:3px 3px 0 #27211C}
[data-theme="topchan"] .invbar{background:#FFFBF2;border-color:#27211C;box-shadow:3px 3px 0 #27211C}

@media (prefers-reduced-motion:reduce){.sheet,.bubble{animation:none}}

/* ---------- other players: hide, report, block ---------- */
/* a seat that opens the sheet about its player */
[data-seat]{cursor:pointer}
/* one of several (the reason of a report): a dot in a ring in every look — a switch would read as «any of them» */
.opt.rad{min-height:52px}
.opt.rad .o-mk{width:26px;height:26px;border:2px solid var(--line-strong);border-radius:50%;background:none}
.opt.rad .o-mk svg{display:none}
.opt.rad .o-mk::after{content:"";position:static;width:12px;height:12px;border-radius:50%;background:transparent;transform:none;transition:none}
.opt.rad[aria-checked="true"] .o-mk{background:none;border-color:var(--accent)}
.opt.rad[aria-checked="true"] .o-mk::after{background:var(--accent);transform:none}
.sheet .togs .opt:first-child{border-top:0}
/* a link inside a sheet's text is the look's own, not the browser's blue */
.sheet a{color:var(--hi);text-underline-offset:2px}
/* the rules of the chat, short */
.rlist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.rlist li{position:relative;padding-left:18px;line-height:1.4}
.rlist li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;background:var(--accent);transform:rotate(45deg)}

/* the coin shop: a row for each pack */
.packs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.packs li{display:flex;align-items:center;gap:12px;min-height:56px}
.packs b{flex:1 1 auto;min-width:0;font-size:19px;font-variant-numeric:tabular-nums}
.packs b small{display:block;font-size:12px;font-weight:600;opacity:.7}
.packs .primary{flex:none;min-width:112px;min-height:46px;padding:4px 12px}
/* quick game: the stake */
.qstakes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.qstakes .fchip{padding:0 4px;font-variant-numeric:tabular-nums}
.qstakes .fchip:disabled{opacity:.35;cursor:default}