/* Стиль «Классический стол»: чёрный интерфейс, зелёное сукно, золото — только тонкими линиями и на главных действиях.
   Плоские поверхности, без градиентов и свечения. Экран — альбомная ориентация. */
:root {
  --bg: #0f0f0f;
  --bg2: #151515;
  --panel: #161616;
  --panel2: #1e1e1e;
  --line: #2a2a2a;
  --line-gold: rgba(201, 165, 92, .45);
  --ink: #e9e2cf;
  --muted: #a99f86;
  --dim: #6f6858;
  --gold: #c9a55c;
  --gold-ink: #0f0f0f;
  --good: #6cc08b;
  --bad: #e0685f;
  --gem: #8fb8de;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --card-bg: #fdfcf7;
  --card-ink: #1b1b1b;
  --card-red: #c0142b;
  --cw: clamp(56px, 17vh, 132px);   /* карты в руке */
  --sw: clamp(42px, 12.5vh, 100px); /* карты на столе и в колоде */
  --safe-l: max(12px, env(safe-area-inset-left));
  --safe-r: max(12px, env(safe-area-inset-right));
  /* скины по умолчанию */
  --felt1: #1d5c3f; --felt2: #1a5339; --rim: #1a1a1a;
  --back: url('../cards/backs/atlas_red.svg') center / 100% 100% no-repeat; /* как «Атласная красная» */
  --back-frame: transparent; --back-inset: 0;
  --back-icon: '';
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 500 13px/1.4 var(--sans);
  user-select: none; -webkit-user-select: none; overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input { font: inherit; }
.hidden { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 600; }

.screen { position: fixed; inset: 0; display: flex; }

/* подписи в стиле печати на сукне */
.caps { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }

/* ---------- валюта ---------- */
.cur { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coin, .gem { display: inline-block; flex: none; width: 14px; height: 14px; }
/* валюта — фишка казино: тёмная с золотыми вставками по краю */
.coin { border-radius: 50%; background: #1b1b1b; border: 2px dashed var(--gold); box-shadow: inset 0 0 0 1.5px #1b1b1b, inset 0 0 0 2.5px var(--gold); }
.gem { width: 11px; height: 11px; transform: rotate(45deg); background: var(--gem); border-radius: 2px; }
.cur.lg { font-size: 18px; gap: 7px; }
.cur.lg .coin { width: 20px; height: 20px; }

/* плоские фишки ставок */
.bets { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 3px 6px; }
.bets::-webkit-scrollbar { display: none; }
.pchip {
  --c: #b3122e; --s: #f7f4ec; --t: #f7f4ec;
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--c); border: 4px dashed var(--s); box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 4px var(--s);
  color: var(--t); font-size: 11px; font-weight: 700; letter-spacing: -.2px;
  display: flex; align-items: center; justify-content: center; transition: transform .12s ease;
}
.pchip.on { outline: 2px solid var(--gold); outline-offset: 3px; }
.pchip:disabled { opacity: .25; }
.pchip.sm { width: 38px; height: 38px; font-size: 10px; border-width: 3px; }
.room .pchip { pointer-events: none; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 6px; padding: 11px 16px; font-weight: 600; font-size: 13px; letter-spacing: .3px;
  transition: transform .08s ease, background .15s, color .15s;
}
.btn:active { transform: scale(.98); }
.btn.gold { background: var(--gold); color: var(--gold-ink); }
.btn.gold .coin { border-color: #f3e3b0; box-shadow: inset 0 0 0 1.5px #1b1b1b, inset 0 0 0 2.5px #f3e3b0; }
.btn.line { border: 1px solid var(--gold); color: var(--gold); }
.btn.ghost { border: 1px solid var(--line); color: var(--ink); }
.btn.danger { border: 1px solid rgba(224,104,95,.6); color: var(--bad); }
.btn:disabled { opacity: .38; }
.btn.big { width: 100%; padding: 13px; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; }
.btn.sm { padding: 7px 12px; font-size: 12px; }
.round {
  width: 36px; height: 36px; border-radius: 6px; flex: none; font-size: 16px; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: rgba(15,15,15,.85);
}

.seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { flex: 1; padding: 8px 4px; color: var(--muted); font-weight: 600; font-size: 12px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--ink); color: var(--bg); }

.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 6px 12px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 12px;
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line);
}
.chip.on { border-color: var(--gold); color: var(--gold); }

.league { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--lc); }

.ava {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; background: #1a1a1a; border: 1px solid var(--line-gold);
}

/* ---------- главное окно ---------- */
.main { flex-direction: row; }
.rail {
  width: calc(84px + env(safe-area-inset-left)); padding: 12px 0 12px env(safe-area-inset-left); flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; border-right: 1px solid var(--line);
}
.rail .logo { font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--gold); margin: 4px 0 14px; }
.rail button {
  width: 68px; padding: 9px 0 7px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--dim); font-size: 10px; font-weight: 600; letter-spacing: .3px;
}
.rail svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rail button.on { color: var(--gold); background: #171717; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top {
  display: flex; align-items: center; gap: 10px; height: 54px; flex: none;
  padding: env(safe-area-inset-top) var(--safe-r) 0 16px; border-bottom: 1px solid var(--line);
}
.me-chip { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; }
.me-chip .ava { width: 36px; height: 36px; font-size: 20px; }
.me-chip .nm { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.me-chip .el { font-size: 11px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.wallet { margin-left: auto; display: flex; gap: 8px; }
.pill { display: flex; align-items: center; gap: 8px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 5px 5px 10px; }
.pill .plus { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--gold); color: var(--gold); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }

.view { flex: 1; min-height: 0; overflow: hidden; padding: 14px var(--safe-r) max(10px, env(safe-area-inset-bottom)) 16px; }
.cols { height: 100%; display: grid; grid-template-columns: minmax(270px, 330px) minmax(0, 1fr); gap: 16px; }
.col { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
.scroll { height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }

.panel { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--panel); }
.sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.sec h3 { font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); }
.sec .aside { font-size: 11px; color: var(--muted); }
.aside.online::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); margin-right: 6px; vertical-align: 1px; }

/* быстрая игра */
.quick { border: 1px solid var(--line-gold); border-radius: 8px; padding: 12px 14px; background: var(--panel); }
.quick h2 { font-size: 15px; font-weight: 600; }
.quick .sub { color: var(--muted); font-size: 11px; margin: 2px 0 12px; }
.quick .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.quick .lbl, .sheet .lbl { font-size: 10px; color: var(--muted); margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; }
.quick .btn.big { margin-top: 10px; }

.bonus { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.bonus .t { flex: 1; font-size: 11px; color: var(--muted); }
.bonus .t b { color: var(--ink); display: block; font-size: 13px; font-weight: 600; }

/* список столов */
.rooms { display: flex; flex-direction: column; }
.room { display: flex; align-items: center; gap: 14px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.room .mid { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.room .mode { font-weight: 600; font-size: 14px; }
.room .rules { font-size: 11px; color: var(--muted); grid-row: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room .slots { grid-column: 2; grid-row: 1 / 3; }
.slots { display: flex; }
.slots .s { width: 24px; height: 24px; border-radius: 50%; margin-right: -4px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; background: #1a1a1a; border: 1px solid var(--line-gold); }
.slots .s.free { background: transparent; border: 1px dashed #3a3a3a; }
.empty { text-align: center; color: var(--muted); padding: 24px; font-size: 12px; }

/* рейтинг */
.mycard .place { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mycard .place small { display: block; font-size: 10px; color: var(--muted); letter-spacing: 1.4px; text-transform: uppercase; }
.progress { height: 4px; border-radius: 2px; background: #262626; overflow: hidden; margin-top: 8px; }
.progress i { display: block; height: 100%; background: var(--gold); }
.leagues { display: flex; flex-direction: column; margin-top: 12px; }
.leagues div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.leagues div.cur-l { color: var(--ink); }
.lb { display: flex; flex-direction: column; }
.lb .r { display: flex; align-items: center; gap: 12px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.lb .r.me { background: #1a1812; }
.lb .n { width: 26px; text-align: center; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.lb .r:nth-child(-n+3) .n { color: var(--gold); }
.lb .ava { width: 30px; height: 30px; font-size: 16px; }
.lb .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.lb .who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb .elo { font-weight: 600; font-variant-numeric: tabular-nums; }

/* профиль */
.phead { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 12px; text-align: center; }
.phead .ava { width: 84px; height: 84px; font-size: 46px; position: relative; }
.phead .ava .edit { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.phead .nick { font-size: 18px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.phead .nick .pen { font-size: 12px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.stat { background: var(--panel); padding: 12px; }
.stat b { display: block; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat span { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.chart { width: 100%; height: 110px; display: block; }
.menu-list { display: flex; flex-direction: column; gap: 8px; }
.menu-list .btn { justify-content: space-between; }

/* магазин */
.shop { height: 100%; display: flex; flex-direction: column; gap: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.item { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); }
.item.on { border-color: var(--gold); }
.item .pv { height: 86px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 4px; position: relative; overflow: hidden; background: #111; }
.item .nm { font-weight: 600; font-size: 12px; }
.item .btn { width: 100%; }
.item .tag { position: absolute; top: 6px; right: 6px; border: 1px solid var(--gold); color: var(--gold); font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.pv .mini-felt { width: 84%; height: 66%; border-radius: 10px 10px 50% 50% / 10px 10px 70% 70%; background: var(--felt1); border: 4px solid var(--rim); }
.pv .emo { font-size: 26px; }
.pv { --cw: 50px; }
.pv .card + .card { margin-left: -22px; }
.pv .big-cur { font-size: 20px; }
.pv .big-cur .gem { width: 20px; height: 20px; }
.pv .big-cur .coin { width: 26px; height: 26px; }
.demo-note { font-size: 11px; color: var(--muted); margin-top: 10px; text-align: center; }

/* ---------- окна ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 12px; animation: fade .15s ease; }
.sheet {
  width: 100%; max-width: 460px; max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--bg2); border: 1px solid var(--line-gold); border-radius: 10px;
  padding: 18px 20px; animation: pop .18s ease;
}
.sheet .grab { display: none; }
.sheet h2 { font-size: 17px; margin-bottom: 4px; }
.sheet p { color: var(--muted); margin: 6px 0; font-size: 12px; }
.sheet.dialog { text-align: center; }
.sheet.dialog .big-emoji { font-size: 40px; line-height: 1; margin: 2px 0 8px; }
.sheet.wide { max-width: 620px; }
/* чат — панель справа */
.sheet-wrap.side { justify-content: flex-end; align-items: stretch; padding: 0; }
.sheet.side { max-width: 360px; height: 100%; max-height: none; border-radius: 0; border-width: 0 0 0 1px; padding: 16px var(--safe-r) 16px 16px; animation: slide .2s ease; }
.btnrow { display: flex; gap: 8px; margin-top: 16px; }
.btnrow .btn { flex: 1; }
.field { width: 100%; padding: 11px 12px; border-radius: 6px; border: 1px solid var(--line); background: #111; color: var(--ink); outline: none; user-select: text; -webkit-user-select: text; }
.field:focus { border-color: var(--gold); }
.ava-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-top: 12px; }
.ava-grid button { aspect-ratio: 1; border-radius: 8px; font-size: 26px; border: 1px solid var(--line); }
.ava-grid button.on { border-color: var(--gold); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; text-align: left; }

/* создание стола */
.form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.bet-slider { display: flex; align-items: center; gap: 14px; }
.bet-val { font-size: 18px; }
.bet-val .cur { font-size: 18px; }
.bet-ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 4px 0; }
input[type=range]::-webkit-slider-runnable-track { height: 3px; background: #2e2e2e; border-radius: 2px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8.5px; border-radius: 50%; background: var(--gold); border: 3px solid var(--bg2); }
input[type=range]::-moz-range-track { height: 3px; background: #2e2e2e; }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 3px solid var(--bg2); }
.toggle { display: flex; align-items: center; gap: 10px; margin-top: 14px; cursor: pointer; }
.toggle input { -webkit-appearance: none; appearance: none; width: 36px; height: 20px; border-radius: 10px; background: #2e2e2e; position: relative; margin: 0; flex: none; transition: background .15s; }
.toggle input::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: left .15s; }
.toggle input:checked { background: var(--gold); }
.toggle input:checked::after { left: 18px; background: var(--bg); }
.toggle small { color: var(--dim); margin-left: auto; font-size: 11px; }
.field.pin { letter-spacing: 10px; font-size: 18px; text-align: center; max-width: 170px; }
.sheet:not(.dialog) .btnrow .btn.big { width: auto; flex: 1; }
.ad-box .ad-fake { height: 110px; margin-top: 10px; border: 1px dashed #3a3a3a; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--dim); }

/* ежедневная награда */
.daily { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.dtile { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dtile .dn { font-size: 10px; color: var(--muted); letter-spacing: .6px; text-transform: uppercase; }
.dtile .dr { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; }
.dtile.done { opacity: .45; }
.dtile.today { border-color: var(--gold); background: #1a1812; }
.dtile .ok { position: absolute; top: 4px; right: 6px; color: var(--good); font-size: 11px; font-weight: 700; }
.room .rules .fast { color: var(--gold); font-weight: 600; }

/* чат */
.phrases { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.phrases button { border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; text-align: left; font-weight: 500; font-size: 12px; }
.phrases button:active, .emo-row button:active { border-color: var(--gold); }
.emo-pack { margin-bottom: 12px; }
.emo-pack .h { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--muted); margin-bottom: 6px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.emo-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.emo-row button { aspect-ratio: 1; font-size: 22px; border: 1px solid var(--line); border-radius: 6px; }
.emo-pack.locked .emo-row button { filter: grayscale(1); opacity: .4; }

/* итоги: очковые карты каждого — от туза к валету */
.sheet.results { max-width: 760px; padding: 14px 18px; }
.sheet.results h2 { margin-bottom: 0; }
.sheet.results .btnrow { margin-top: 10px; }
.sheet.results .res-table td { padding-top: 4px; padding-bottom: 4px; }
.sheet.results .res-table { margin-top: 6px; }
.res-table td.nm { width: 110px; }
.res-table td.cards { padding: 6px 4px; }
.pts-strip { display: flex; --cw: clamp(34px, 9.5vh, 58px); }
.pts-strip .card { box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pts-strip .card + .card { margin-left: calc(var(--cw) * -.56); }

/* итоги */
.res-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; text-align: left; }
.res-table th { font-size: 9px; color: var(--muted); font-weight: 600; padding: 4px; letter-spacing: 1px; text-transform: uppercase; }
.res-table td { padding: 7px 4px; border-top: 1px solid var(--line); }
.res-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.res-table .note { display: block; font-size: 10px; color: var(--muted); }
.res-table .plus { color: var(--bad); font-weight: 600; }
.res-table tr.mine td:first-child { color: var(--gold); font-weight: 600; }
.res-table tr.out td { opacity: .5; }
.eggs { border: 1px solid var(--line-gold); color: var(--gold); border-radius: 6px; padding: 7px 10px; font-size: 12px; margin-top: 8px; }
.final { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.final .box { flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 9px; }
.final .box span { display: block; font-size: 9px; color: var(--muted); margin-bottom: 3px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; }
.final .box b { font-size: 16px; font-weight: 600; }
.up { color: var(--good); } .down { color: var(--bad); }
.countdown { font-size: 11px; color: var(--muted); margin-top: 8px; }

/* всплывашка */
.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 10px); transform: translate(-50%, -150%);
  background: #111; border: 1px solid var(--line-gold); border-radius: 6px; padding: 8px 14px; z-index: 60;
  font-size: 12px; font-weight: 600; transition: transform .22s ease; max-width: 80vw; text-align: center;
}
.toast.on { transform: translate(-50%, 0); }

/* экран подключения к серверу */
.boot { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.boot .logo { font-size: 22px; font-weight: 700; letter-spacing: 8px; color: var(--gold); }
.boot .caps { animation: pulse 1.4s ease infinite; }

/* просьба повернуть телефон */
.rotate { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 30px; }
.rotate .ph { width: 44px; height: 72px; border: 2px solid var(--gold); border-radius: 8px; animation: turn 2.2s ease-in-out infinite; }
@media (orientation: portrait) and (max-width: 700px) { .rotate { display: flex; } }

/* ---------- стол ---------- */
.table-screen { flex-direction: column; background: var(--bg); }
.arena { flex: 1; position: relative; min-height: 0; }
.felt {
  position: absolute; left: calc(var(--safe-l) + 62px); right: calc(var(--safe-r) + 62px); top: 22px; bottom: 4px;
  background: var(--felt1); border: 9px solid var(--rim); box-shadow: 0 0 0 1px #2c2c2c;
  border-radius: 22px 22px 50% 50% / 22px 22px 62% 62%;
}
.felt .print { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.felt .print path.arc { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .55; }
.felt .print text { fill: var(--gold); font: 600 11px var(--sans); letter-spacing: 3px; opacity: .6; }
.felt .print text.title { font-size: 26px; letter-spacing: 12px; opacity: .22; }

.tbar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: flex-start; gap: 8px; padding: max(6px, env(safe-area-inset-top)) var(--safe-r) 0 var(--safe-l); pointer-events: none; }
.tbar > * { pointer-events: auto; }
.bank { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line-gold); border-radius: 6px; background: rgba(15,15,15,.85); }
.bank span { font-size: 9px; color: var(--gold); letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; }
.bank b { font-size: 13px; }
.tinfo { margin-left: auto; font-size: 10px; color: var(--muted); text-align: right; line-height: 1.35; padding-top: 3px; }

.seat { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; width: 96px; text-align: center; }
.seat.pos-top { top: 0; left: 50%; transform: translateX(-50%); flex-direction: row; width: auto; gap: 8px; text-align: left; align-items: center; }
.seat .info { display: flex; flex-direction: column; align-items: center; }
.seat.pos-top .info { align-items: flex-start; }
.seat.pos-left { left: var(--safe-l); top: 46%; transform: translateY(-50%); }
.seat.pos-right { right: var(--safe-r); top: 46%; transform: translateY(-50%); }
.seat .ava { width: 42px; height: 42px; font-size: 22px; position: relative; }
.seat .nick { margin-top: 3px; font-size: 11px; font-weight: 600; max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat.pos-top .nick { margin-top: 0; }
.seat .meta { font-size: 10px; color: var(--muted); }
.seat .meta b { color: var(--gold); font-weight: 600; }
/* партнёр в 2×2 — зелёная обводка, подпись и имя */
.seat.partner .ava { border: 2px solid var(--good); }
.seat.partner .nick { color: var(--good); }
/* ленточка на нижнем краю аватара — место игрока от неё не растёт */
.seat .team { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); z-index: 2; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; line-height: 1; text-transform: uppercase; color: var(--gold-ink); background: var(--good); border-radius: 3px; padding: 2px 5px; white-space: nowrap; }
.seat.out { opacity: .4; }
.seat.empty .ava { background: transparent; border: 1px dashed #444; font-size: 14px; color: var(--muted); animation: pulse 1.4s ease infinite; }
/* карты соперника — крупный веер рубашек, чтобы было видно, сколько их */
.ohand { --ow: clamp(24px, 7.4vh, 56px); position: relative; display: flex; justify-content: center; align-items: flex-end; margin-top: 5px; height: calc(var(--ow) * 1.45 + 6px); min-width: var(--ow); }
.ohand.none { visibility: hidden; }
.ohand i {
  position: relative; flex: none; width: var(--ow); height: calc(var(--ow) * 1.45); margin-left: calc(var(--ow) * -.6);
  border-radius: calc(var(--ow) * .08); background: var(--back-frame, #fdfcf7); transform-origin: 50% 120%;
  box-shadow: 0 1px 1px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.3);
}
.ohand i::before { content: ''; position: absolute; inset: var(--back-inset, 7%); border-radius: calc(var(--ow) * .05); background: var(--back); }
.ohand i:first-child { margin-left: 0; }
.ocount {
  position: absolute; right: -6px; bottom: -4px; z-index: 2; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: #0f0f0f; border: 1px solid var(--line-gold); color: var(--ink); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ready-badge { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--good); color: #0f0f0f; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.seat .meta .ok { color: var(--good); font-weight: 600; }

.ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.ring circle { fill: none; stroke-width: 2.5; stroke-dasharray: 100 100; animation: ring var(--dur) linear forwards; animation-delay: var(--delay); }
@keyframes ring { 0% { stroke-dashoffset: 0; stroke: var(--gold); } 70% { stroke: var(--gold); } 100% { stroke-dashoffset: 100; stroke: var(--bad); } }

.deckbox { position: absolute; left: calc(var(--safe-l) + 96px); top: 54px; z-index: 2; --cw: var(--sw); width: calc(var(--sw) * 2.4); height: calc(var(--sw) * 2); }
.deckbox .trumpcard { position: absolute; left: calc(var(--sw) * .95); top: calc(var(--sw) * .12); transform: rotate(90deg); }
.deckbox .pile { position: absolute; left: 0; top: 0; }
.deckbox .pile .card { position: absolute; left: 0; top: 0; }
.deckbox .pile .card:nth-child(2) { left: 2px; top: -2px; }
.deckbox .pile .card:nth-child(3) { left: 4px; top: -4px; }
.deckbox .cnt { position: absolute; left: calc(var(--sw) * .55); top: calc(var(--sw) * .72); transform: translate(-50%, -50%); z-index: 2; background: #0f0f0f; border-radius: 4px; padding: 1px 6px; font-size: 12px; font-weight: 600; }
.trump-badge { position: absolute; left: 0; top: calc(var(--sw) * 1.58); display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 9px; font-weight: 600; color: var(--gold); text-transform: uppercase; letter-spacing: 1.4px; }
.trump-badge .suit-ic { width: 16px; height: 16px; color: #1b1b1b; background: #f7f4ec; border-radius: 50%; padding: 3px; }
.trump-badge.red .suit-ic { color: var(--card-red); }
.deckbox.empty .trump-badge { top: 8px; }
.deckbox.changed .trumpcard, .deckbox.changed .trump-badge { animation: flash .6s ease 3; }

/* взятка крестом: у каждого игрока своя зона перед ним, карты лежат «от игрока» (раскладка — в table.js) */
#tPlays { position: absolute; inset: 0; z-index: 4; pointer-events: none; } /* поверх вееров соперников — сыгранные карты важнее */
#tPlays .zc { position: absolute; width: var(--sw); height: calc(var(--sw) * 1.45); }
/* слева и справа карты лежат поперёк */
#tPlays .zc.rot { width: calc(var(--sw) * 1.45); height: var(--sw); }
#tPlays .zc.rot .card { position: absolute; left: 50%; top: 50%; margin: calc(var(--sw) * -.725) 0 0 calc(var(--sw) * -.5); transform: rotate(90deg); }
#tPlays .zc.z-right .card { transform: rotate(-90deg); }
#tPlays .zc.win .card { outline: 2px solid var(--gold); outline-offset: 1px; }
#tPlays .zc.old .card { filter: brightness(.78); }
/* карта прилетает со стороны игрока */
#tPlays .zc.z-bottom.enter { animation: in-bottom .7s cubic-bezier(.25,.8,.3,1) both; }
#tPlays .zc.z-top.enter { animation: in-top .7s cubic-bezier(.25,.8,.3,1) both; }
#tPlays .zc.z-left.enter { animation: in-left .7s cubic-bezier(.25,.8,.3,1) both; }
#tPlays .zc.z-right.enter { animation: in-right .7s cubic-bezier(.25,.8,.3,1) both; }
.seat.locked .ava { opacity: .5; }

/* подсказка новичку */
.coach { position: absolute; z-index: 7; top: 44px; left: 50%; transform: translateX(-50%); width: min(460px, 70%);
  background: #111; border: 1px solid var(--gold); border-radius: 8px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; animation: pop .2s ease; }
.coach .caps { grid-column: 1; }
.coach .t { grid-column: 1; font-size: 12px; color: var(--ink); }
.coach .btn { grid-column: 2; grid-row: 1 / 3; }

/* перетащенные на стол карты ждут подтверждения; нажатие возвращает карту в руку */
.pending { position: absolute; z-index: 6; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pending:empty { display: none; }
.pend-cards { display: flex; gap: 6px; }
.pend-cards .card { outline: 2px dashed var(--gold); outline-offset: 2px; cursor: pointer; animation: pop .15s ease; }
.pend-hint { font-size: 10px; font-weight: 600; color: var(--gold); background: rgba(15,15,15,.75); padding: 2px 8px; border-radius: 4px; white-space: nowrap; }

/* забранные взятки лежат рядом с игроком рубашкой вверх */
.won { position: relative; width: calc(var(--sw) * .6); height: calc(var(--sw) * .6 * 1.45); flex: none; }
.won.none { visibility: hidden; }
.won i { position: absolute; inset: 0; border-radius: 3px; background: var(--back-frame, #fdfcf7); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.won i::before { content: ''; position: absolute; inset: var(--back-inset, 7%); border-radius: 2px; background: var(--back); }
.won span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: #0f0f0f; font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 3px; }
.seat .won { margin-top: 5px; }
.seat.pos-top .won { margin: 0 0 0 8px; }
.myseat .won { margin-left: 8px; }

.bubble { position: absolute; z-index: 5; max-width: 180px; background: #f7f4ec; color: #1b1b1b; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; animation: pop .18s ease; }
.bubble small { display: block; font-size: 10px; color: #7a735f; font-weight: 600; }
.bubble.emoji { background: none; font-size: 38px; padding: 0; animation: jump .5s ease; }
.bubble.pos-top { top: 4px; left: calc(50% + 90px); }
.bubble.pos-left { left: calc(var(--safe-l) + 72px); top: 18%; }
.bubble.pos-right { right: calc(var(--safe-r) + 72px); top: 18%; }
.bubble.pos-bottom { bottom: 6px; left: calc(var(--safe-l) + 170px); }

.tstatus { position: absolute; z-index: 5; left: 50%; bottom: 8px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--ink); background: rgba(15,15,15,.75); padding: 3px 10px; border-radius: 4px; }
.tstatus:empty { display: none; }
.tstatus .hl { color: var(--gold); }

.dock { flex: none; display: grid; grid-template-columns: 180px minmax(0, 1fr) 180px; align-items: end; gap: 10px; padding: 0 var(--safe-r) max(8px, env(safe-area-inset-bottom)) var(--safe-l); }
.myseat { display: flex; align-items: center; gap: 9px; min-width: 0; padding-bottom: 6px; }
.myseat .ava { width: 40px; height: 40px; font-size: 21px; position: relative; }
.myseat .t { font-size: 10px; color: var(--muted); line-height: 1.35; min-width: 0; }
.myseat .t b { color: var(--ink); font-size: 12px; font-weight: 600; }
.myseat .t .sc { color: var(--gold); font-weight: 600; }
.dock .acts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.dock .acts .btn { width: 100%; }

.hand { display: flex; justify-content: center; padding-top: 14px; min-height: calc(var(--cw) * 1.45 + 14px); }
.hand .card { margin-left: calc(var(--overlap, -4px) * -1); cursor: grab; touch-action: none; transform-origin: 50% 115%; }
.hand .card.slot-ghost { visibility: hidden; }
.hand.dragging .card.sel { opacity: .25; }
.hand .card:first-child { margin-left: 0; }
.hand .card.sel { outline: 2px solid var(--gold); outline-offset: 1px; }
.hand .card.dim { filter: brightness(.55); }
.card.enter { animation: deal .5s ease both; }

/* летящие карты: раздача, добор, сбор взятки */
.flyer { position: absolute; z-index: 30; pointer-events: none; transform-origin: center; }
.flyer .card { box-shadow: 0 6px 16px rgba(0,0,0,.55); }

/* колода в центре стола, пока её тасуют и раздают */
.dealer { position: absolute; z-index: 8; left: 50%; top: 46%; transform: translate(-50%, -50%); width: var(--sw); height: calc(var(--sw) * 1.45); --cw: var(--sw); }
.dealer .dc { position: absolute; inset: 0; }
.dealer .card { box-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* перетаскивание карт на стол */
.drag-ghost { position: fixed; z-index: 70; pointer-events: none; display: flex; transform: translate(-50%, -75%) rotate(-4deg); transition: transform .12s; }
.drag-ghost .card + .card { margin-left: -34px; }
.drag-ghost .card { box-shadow: 0 8px 18px rgba(0,0,0,.6); }
.drag-ghost.over { transform: translate(-50%, -75%) rotate(0deg) scale(1.06); }
.drag-ghost.over .card { outline: 2px solid var(--gold); outline-offset: 1px; }

/* за игрока играет ИИ: стол размыт, по центру — кнопка возврата */
.afk {
  position: absolute; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .2s ease;
}
.afk-box { background: #111; border: 1px solid var(--gold); border-radius: 10px; padding: 18px 24px; text-align: center; display: flex; flex-direction: column; gap: 8px; min-width: 300px; }
.afk-box .t { color: var(--muted); font-size: 12px; margin-bottom: 6px; }

/* ---------- карты ---------- */
/* Настоящая карта: плотная бумага с мягкой тенью, рисунок — поверх фактуры покрытия. */
.card {
  position: relative; width: var(--cw); height: calc(var(--cw) * 1.45); flex: none; border-radius: calc(var(--cw) * .07); color: var(--card-ink);
  box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.28); transition: transform .25s ease;
}
.card.red { color: var(--card-red); }
.card svg { display: block; width: 100%; height: 100%; }
.card img.cimg { display: block; width: 100%; height: 100%; object-fit: fill; border-radius: inherit; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.card svg .bg { fill: var(--card-paper, url(#paper)); stroke: rgba(60,40,20,.22); stroke-width: .8; }
.card svg .tex { fill: url(#linen); pointer-events: none; }
.card svg .rk { font: 700 22px "Times New Roman", "Noto Serif", "PT Serif", Georgia, serif; }
.card svg .rk.big { font-size: 42px; }
.card.trumpc::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--gold); pointer-events: none; }
/* рубашка: белое поле по краю и узор внутри, как у настоящей колоды */
.card.back { background: var(--back-frame, #fdfcf7); display: flex; align-items: center; justify-content: center; }
.card.back::before {
  content: ''; position: absolute; inset: var(--back-inset, 6%); border-radius: calc(var(--cw) * .045); background: var(--back);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.card.back::after { content: var(--back-icon); position: relative; z-index: 1; font-size: calc(var(--cw) * .42); }
.card.small { --cw: var(--sw); }
.card.small svg .bg { stroke-width: 1.2; }

/* рубашки: --back — узор, --back-frame — поле по краю, --back-inset — ширина поля */
/* атласные рубашки — рисунок Dmitry Fomin (CC0), белое поле и скругление уже в самом рисунке */
.back-b_atlas_red { --back: url('../cards/backs/atlas_red.svg') center / 100% 100% no-repeat; --back-frame: transparent; --back-inset: 0; --back-icon: ''; }
.back-b_atlas_blue { --back: url('../cards/backs/atlas_blue_brown.svg') center / 100% 100% no-repeat; --back-frame: transparent; --back-inset: 0; --back-icon: ''; }
.back-b_atlas_green { --back: url('../cards/backs/atlas_green_red.svg') center / 100% 100% no-repeat; --back-frame: transparent; --back-inset: 0; --back-icon: ''; }
/* «Казино» — без белого поля, узор во всю карту */
.back-b_diamond_red { --back: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, rgba(255,255,255,.5) 0 1px, transparent 1px 5px), #b0162a; --back-frame: #b0162a; --back-inset: 0; --back-icon: ''; }
.back-b_diamond_blue { --back: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, rgba(255,255,255,.5) 0 1px, transparent 1px 5px), #1f3f8f; --back-frame: #1f3f8f; --back-inset: 0; --back-icon: ''; }

/* столы */
.skin-t_green { --felt1: #1d5c3f; --rim: #1a1a1a; }
.skin-t_blue { --felt1: #1f4a7a; --rim: #1a1a1a; }
.skin-t_wine { --felt1: #6b1d2c; --rim: #1a1a1a; }
.skin-t_wood { --felt1: #1d5c3f; --rim: #5a3a1c; }
.skin-t_neon { --felt1: #16123a; --rim: #d63c8f; }
.skin-t_gold { --felt1: #20402c; --rim: #a8863e; }

/* ---------- анимации ---------- */
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
@keyframes deal { from { transform: translateY(10px); opacity: 0; } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes flash { 50% { opacity: .4; } }
@keyframes jump { 0% { transform: scale(.4); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes in-top { from { transform: translateY(-60px); opacity: 0; } }
@keyframes in-left { from { transform: translateX(-70px); opacity: 0; } }
@keyframes in-right { from { transform: translateX(70px); opacity: 0; } }
@keyframes in-bottom { from { transform: translateY(60px); opacity: 0; } }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

@media (max-height: 360px) {
  .dock { grid-template-columns: 150px minmax(0, 1fr) 150px; }
}

/* ---------- друзья ---------- */
.rail button { position: relative; }
.rail .badge {
  position: absolute; top: 4px; right: 12px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--gold); color: var(--gold-ink); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.myid { font-size: 26px; font-weight: 600; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.panel .lbl { font-size: 10px; color: var(--muted); margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; }
.addrow { display: flex; gap: 8px; }
.addrow .field { flex: 1; min-width: 0; padding: 9px 12px; }
.flist { display: flex; flex-direction: column; }
.fr { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.fr:last-child { border-bottom: 0; }
.fr .ava { width: 34px; height: 34px; font-size: 18px; position: relative; }
.fr .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr .who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr .btn + .btn { margin-left: -4px; }
.dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bg); background: #555; }
.dot.online { background: var(--good); }
.dot.playing { background: var(--gold); }
.st { font-size: 11px; color: var(--dim); display: flex; gap: 6px; align-items: center; }
.st.online { color: var(--good); }
.st.playing { color: var(--gold); }
.btn.icon { padding: 6px 8px; color: var(--gold); }

/* карточка игрока */
.pcard { display: flex; align-items: center; gap: 14px; }
.pcard .ava { width: 60px; height: 60px; font-size: 32px; }
.pcard .who { min-width: 0; }
.pcard .nm { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .el { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pcard .st { margin-top: 2px; }
.pactions { display: flex; gap: 8px; margin-top: 16px; }
.pactions .btn { flex: 1; }
.pmore { display: flex; justify-content: center; gap: 18px; margin-top: 14px; }
.pmore button { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #444; }
.pmore button:last-child { color: var(--bad); }
.grid.gifts { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* итоги: соперников — в друзья */
.fplayers { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.fp { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px 5px 8px; }
.fp .ava { width: 28px; height: 28px; font-size: 15px; }
.fp .nm { font-weight: 600; font-size: 12px; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frel { font-size: 11px; color: var(--muted); padding: 0 6px; }
.frel.ok { color: var(--good); }
.seat.empty { cursor: pointer; }
.seat .meta.invite { color: var(--gold); }

/* прослушивание звуков */
.snd-list { display: flex; flex-direction: column; margin-top: 8px; }
.snd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.snd span { font-weight: 600; font-size: 12px; }
.snd .v { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.snd .chip { padding: 4px 9px; }

/* меню слева: семь разделов — компактнее, на низких экранах без логотипа */
.rail { gap: 2px; overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail button { padding: 6px 0 4px; gap: 3px; flex: none; }
.rail svg { width: 20px; height: 20px; }
.rail .logo { margin: 2px 0 8px; }
@media (max-height: 400px) { .rail .logo { display: none; } }

/* ---------- турниры ---------- */
.tlist { display: flex; flex-direction: column; gap: 8px; }
.tcard { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); cursor: pointer; }
.tcard.on { border-color: var(--gold); }
.tcard .th { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tcard .th b { font-weight: 600; font-size: 13px; display: flex; gap: 6px; align-items: center; min-width: 0; }
.tcard .tm { font-size: 11px; color: var(--muted); margin-top: 3px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.tcard .tb { margin-top: 8px; }
.tcard .tb .btn { width: 100%; }
.tstate { font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; letter-spacing: .3px; }
.tstate.live { color: var(--good); }
.tclub { white-space: nowrap; flex: none; font-size: 10px; color: var(--gold); border: 1px solid var(--line-gold); border-radius: 4px; padding: 0 4px; font-weight: 700; }
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.tgrid div { background: var(--panel); padding: 7px 8px; display: flex; flex-direction: column; gap: 2px; }
.tgrid span { font-size: 9px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.tgrid b { font-weight: 600; font-size: 12px; }
.tnote { font-size: 11px; color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
.tnote.hl { color: var(--gold); margin: 0 0 6px; }
.tdetail .lbl { font-size: 10px; color: var(--muted); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; }
.tres { display: flex; flex-direction: column; }
.tres div { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.tres .pl { width: 18px; font-weight: 700; color: var(--gold); text-align: center; }
.tres b { flex: 1; font-weight: 600; }
.tplayers { display: flex; flex-wrap: wrap; gap: 6px; }
.trecent { display: flex; flex-direction: column; }
.trecent div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12px; }
.trecent small { color: var(--dim); font-size: 10px; }
.scroll-x { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
.bracket { display: flex; gap: 14px; padding-bottom: 4px; }
.bround { display: flex; flex-direction: column; justify-content: space-around; gap: 8px; min-width: 128px; }
.bname { font-size: 9px; color: var(--gold); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; text-align: center; }
.bmatch { position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #131313; }
.bmatch.live { border-color: var(--good); }
.bp { display: flex; align-items: center; gap: 6px; padding: 4px 7px; font-size: 11px; min-width: 0; }
.bp + .bp { border-top: 1px solid var(--line); }
.bp .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp.win { color: var(--gold); font-weight: 700; }
.bp.lose { opacity: .45; }
.bp.me .nm { text-decoration: underline; text-underline-offset: 2px; }
.bp.empty { color: var(--dim); font-style: italic; }
.blive { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 8px; font-weight: 700; color: var(--good); text-transform: uppercase; letter-spacing: 1px; }

/* ---------- клубы ---------- */
.clist { display: flex; flex-direction: column; }
.crow { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.crow.me { background: #1a1812; }
.crow .n { width: 22px; text-align: center; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.crow:nth-child(-n+3) .n { color: var(--gold); }
.crow .em { font-size: 20px; width: 30px; text-align: center; }
.crow .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crow .who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .who small { font-size: 10px; color: var(--muted); }
.pts { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gold); min-width: 36px; text-align: right; }
.emblems { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.emblems button { aspect-ratio: 1; font-size: 18px; border: 1px solid var(--line); border-radius: 6px; }
.emblems button.on { border-color: var(--gold); background: #1a1812; }
.cclub { display: flex; align-items: center; gap: 12px; }
.cclub .em { font-size: 40px; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-gold); border-radius: 12px; background: #111; }
.cclub .nm { font-size: 17px; font-weight: 600; }
.cclub .tag { color: var(--gold); font-size: 13px; }
.cclub .el { font-size: 12px; color: var(--muted); margin-top: 2px; }
.crole { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--line-gold); border-radius: 3px; padding: 0 4px; }

/* ---------- рамки аватара: кольцо поверх края кружка (градиент по маске) ---------- */
.ava { position: relative; }
.ava.big { width: 58px; height: 58px; font-size: 32px; }
.ava.fr { border-color: transparent; }
.ava.fr::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; padding: 3px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.fr-fr_silver::before { background: linear-gradient(135deg, #f7f7f7, #9c9c9c 35%, #ececec 60%, #7c7c7c); }
.fr-fr_gold::before { background: linear-gradient(135deg, #fff3bf, #c9a55c 30%, #8a6a1e 55%, #f6dc86 75%, #b8893a); }
.fr-fr_ruby::before { background: linear-gradient(135deg, #ff9aa8, #c0142b 35%, #6b0a1a 60%, #ef5a70); }
.fr-fr_laurel::before { background: repeating-conic-gradient(#9fca63 0 9deg, #c9a55c 9deg 13deg, #4f7a34 13deg 24deg); }
.fr-fr_neon::before { background: conic-gradient(#39f3ff, #b25cff, #ff4fd8, #39f3ff); animation: fr-hue 4s linear infinite; }
.fr-fr_fire::before { background: conic-gradient(#ff3b1f, #ffb21f, #ff6a1f, #ffe066, #ff3b1f); animation: fr-spin 2.2s linear infinite; }
.fr-fr_crown::before { background: linear-gradient(135deg, #fff3bf, #c9a55c 35%, #8a6a1e 60%, #f6dc86); }
.fr-fr_autumn::before { background: conic-gradient(#d9532b, #f2a33a, #8c3a1b, #e8c35a, #d9532b); animation: fr-spin 7s linear infinite; }
.fr-fr_pumpkin::before { background: repeating-conic-gradient(#f28c1a 0 30deg, #5a2a86 30deg 60deg); animation: fr-spin 6s linear infinite; }
.fr-fr_snow::before { background: conic-gradient(#ffffff, #9fd4ff, #e8f5ff, #6fb6f2, #ffffff); animation: fr-spin 8s linear infinite; }
.fr-fr_hearts::before { background: conic-gradient(#ff5d8f, #ffc2d4, #d6245a, #ff8fb1, #ff5d8f); animation: fr-hue 5s linear infinite; }
/* украшение сверху: корона, снежинка, сердце */
.fr-fr_crown::after, .fr-fr_snow::after, .fr-fr_hearts::after {
  position: absolute; top: -0.62em; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 46%; line-height: 1; pointer-events: none; z-index: 2;
}
.fr-fr_crown::after { content: '👑'; }
.fr-fr_snow::after { content: '❄️'; }
.fr-fr_hearts::after { content: '💗'; }
@keyframes fr-spin { to { transform: rotate(360deg); } }
@keyframes fr-hue { to { filter: hue-rotate(360deg); } }

/* ---------- анимированные аватары ---------- */
.aa { display: inline-block; line-height: 1; }
.aa-stomp { animation: aa-stomp 1.3s ease-in-out infinite; transform-origin: 50% 100%; }
.aa-bob { animation: aa-bob 2s ease-in-out infinite; }
.aa-nod { animation: aa-nod 1.8s ease-in-out infinite; transform-origin: 50% 80%; }
.aa-wiggle { animation: aa-wiggle 1s ease-in-out infinite; }
.aa-breathe { animation: aa-breathe 2.4s ease-in-out infinite; }
.aa-flicker { animation: aa-flicker .9s ease-in-out infinite; transform-origin: 50% 100%; }
.aa-shine { animation: aa-shine 2.6s ease-in-out infinite; }
.aa-fall { animation: aa-fall 3.2s ease-in-out infinite; }
.aa-wobble { animation: aa-wobble 1.5s ease-in-out infinite; transform-origin: 50% 100%; }
.aa-hop { animation: aa-hop 1.1s cubic-bezier(.3, .6, .4, 1) infinite; }
.aa-beat { animation: aa-beat 1.2s ease-in-out infinite; }
@keyframes aa-stomp { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-12%) scale(.95, 1.06); } 55% { transform: translateY(0) scale(1.1, .9); } 70% { transform: scale(1, 1); } }
@keyframes aa-bob { 0%, 100% { transform: translateY(4%); } 50% { transform: translateY(-8%); } }
@keyframes aa-nod { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } }
@keyframes aa-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes aa-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes aa-flicker { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(1.04, .95) skewX(-4deg); } 50% { transform: scale(.97, 1.07) skewX(3deg); } 75% { transform: scale(1.03, .97) skewX(-2deg); } }
@keyframes aa-shine { 0%, 100% { filter: brightness(1); transform: rotate(0); } 50% { filter: brightness(1.35); transform: rotate(-6deg); } }
@keyframes aa-fall { 0%, 100% { transform: translate(-6%, -4%) rotate(-14deg); } 50% { transform: translate(6%, 4%) rotate(14deg); } }
@keyframes aa-wobble { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-9deg) scale(1.05, .96); } 60% { transform: rotate(7deg) scale(.97, 1.04); } }
@keyframes aa-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18%); } 60% { transform: translateY(0); } 70% { transform: translateY(-5%); } }
@keyframes aa-beat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 28% { transform: scale(1.05); } 32% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .aa, .ava.fr::before { animation: none !important; } }

/* ---------- праздничные столы и рубашки ---------- */
.skin-t_autumn { --felt1: #6a3a1c; --rim: #2a180c; }
.skin-t_halloween { --felt1: #3a1f52; --rim: #d9761c; }
.skin-t_newyear { --felt1: #134a5e; --rim: #e9f1f7; }
.skin-t_valentine { --felt1: #7a1f3d; --rim: #1a1a1a; }
.back-b_autumn { --back: radial-gradient(circle at 50% 45%, #d4722c 0%, #7a2f0e 100%); --back-frame: #fdf3e6; --back-inset: 6%; --back-icon: '🍁'; }
.back-b_halloween { --back: repeating-linear-gradient(45deg, #1a1a1a 0 6px, #2c1646 6px 12px); --back-frame: #f08c1a; --back-inset: 5%; --back-icon: '🎃'; }
.back-b_newyear { --back: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9) 0 1px, transparent 1.6px) 0 0 / 12px 12px, linear-gradient(160deg, #2466b8, #0d2f63); --back-frame: #f4f8ff; --back-inset: 6%; --back-icon: '❄️'; }
.back-b_valentine { --back: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 2px, transparent 2px 8px), linear-gradient(160deg, #e0485f, #9c1233); --back-frame: #fff0f3; --back-inset: 6%; --back-icon: '💗'; }

/* магазин: сезон */
.item .tag.season { left: 6px; right: auto; top: 6px; border-color: #e0913a; color: #e0913a; background: rgba(15,15,15,.7); }
.season-note { font-size: 11px; color: #e0913a; border: 1px solid rgba(224,145,58,.45); border-radius: 6px; padding: 6px 10px; }
.ava-grid + .lbl, .sheet .lbl { margin-top: 12px; }

/* своё фото на аватар */
.ava-img { display: inline-block; width: 1.25em; height: 1.25em; border-radius: 50%; object-fit: cover; vertical-align: -0.25em; }
.ava > .ava-img, .slots .s > .ava-img, .ava-grid button > .ava-img, .photo-row button > .ava-img { width: 100%; height: 100%; vertical-align: top; }
.big-emoji .ava-img { width: 56px; height: 56px; }
.photo-row { display: flex; align-items: center; gap: 12px; margin: 10px 0 12px; }
.photo-row > button[data-a] { width: 52px; height: 52px; flex: none; border-radius: 50%; border: 2px solid var(--line); padding: 0; overflow: hidden; }
.photo-row > button[data-a].on { border-color: var(--gold); }
.crop { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.crop canvas { width: 200px; height: 200px; border-radius: 50%; border: 2px solid var(--gold); touch-action: none; cursor: grab; background: #111; }
@media (max-height: 360px) { .crop canvas { width: 170px; height: 170px; } }

/* веб-версия как приложение */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-touch-callout: none; overscroll-behavior: none; }
.install .t { font-size: 11px; }
.install .btn + .btn { margin-left: -4px; }
.share-ic { display: inline-block; border: 1px solid var(--muted); border-radius: 3px; padding: 0 3px; font-size: 10px; line-height: 1.2; }