/* ============================================================
   Backgammon (Uzun Nərd) — оформление.
   Тёмное дерево в цветах самой доски: фон — орех рамки, панели — тёмный орех,
   карточки и клавиши — орех чуть светлее, главные кнопки — латунь петель,
   светлые кнопки — слоновая кость шашек, опасные — гранат.
   Кнопки — объёмные клавиши: кромка снизу, при нажатии клавиша утапливается.
   Скругления крупные и одинаковые по всей игре (переменные --r-*).
   Шрифты: Tektur — только название и заголовки (ровный «игровой» шрифт),
   JetBrains Mono — кнопки, числа, имена, текст и чат. Оба — с азербайджанскими буквами и кириллицей.
   ============================================================ */

@font-face { font-family: 'Tektur'; src: url('/fonts/tektur-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tektur'; src: url('/fonts/tektur-latin-ext-500.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Tektur'; src: url('/fonts/tektur-cyrillic-500.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Tektur'; src: url('/fonts/tektur-latin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tektur'; src: url('/fonts/tektur-latin-ext-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Tektur'; src: url('/fonts/tektur-cyrillic-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Tektur'; src: url('/fonts/tektur-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tektur'; src: url('/fonts/tektur-latin-ext-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Tektur'; src: url('/fonts/tektur-cyrillic-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-latin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-latin-ext-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-cyrillic-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-latin-ext-500.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-cyrillic-500.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-latin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-latin-ext-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-cyrillic-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-latin-ext-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-cyrillic-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  /* Ореховое дерево, как у доски: панели с железными уголками, внутри — тёмные углубления и таблички из светлого ореха,
     кнопки — объёмные, с тёмной обводкой, как в мобильных играх. Текст — светлый, с тёмным контуром. */
  --bg: #2b170b;          /* фон под картинкой времени года */
  --wood: #4a3121;        /* дерево панелей (средний тон досок) */
  --card: #4f3523;        /* углубление в дереве: карточки, ячейки */
  --card-2: #5a2e1a;
  --well: #24160c;        /* глубже: поля, дорожки переключателей */
  --soft: rgba(255, 230, 190, .07);
  --tint: rgba(255, 220, 160, .14);
  --line: rgba(255, 220, 170, .16);
  --line-2: rgba(255, 220, 170, .26);
  --ink: #fff6e6; --ink-soft: #f3d3a8; --ink-dim: #d7aa7c;
  --outline: #1f1109;     /* обводка всего объёмного: кнопок, панелей, табличек */
  --gold: #ffc531; --gold-hi: #ffe27a; --gold-deep: #d88a0e; --gold-edge: #8a4b06;
  --ivory: #f3e5c9; --ivory-lo: #d8c09a; --ivory-edge: #8e7552;
  --nar: #e8413b; --nar-hi: #ff6a5c; --nar-edge: #7d1410;
  --win: #74dc4a; --win-bg: #3c9a22; --green: #6be04a;
  --dark: #1c0d05;
  --paper: #6e4c33; --paper-2: #5c3d27; --paper-ink: #fff3dd;   /* 21.1: «бумага» стала светлым ореховым деревом */

  --display: 'Tektur', 'JetBrains Mono', ui-monospace, monospace;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-s: 6px; --r-m: 10px; --r-l: 12px; --r-xl: 16px;

  --walnut: url(/ui/walnut-panel.webp);   /* орех доски, отражённый по вертикали: на высоких панелях нет шва */
  --page: radial-gradient(120% 90% at 50% 20%, rgba(40, 22, 10, .45), rgba(16, 8, 3, .88)), var(--walnut) center / cover, var(--bg);
  --panel: linear-gradient(rgba(64, 40, 22, .6), rgba(46, 28, 15, .72)), var(--walnut) center / 900px auto, #3a2618;
  --panel-flat: linear-gradient(rgba(64, 40, 22, .6), rgba(46, 28, 15, .72)), var(--walnut) center / 900px auto, #3a2618;
  --panel-edge: 0 0 0 3px var(--outline), inset 0 2px 0 rgba(255, 214, 160, .5), inset 0 -3px 0 rgba(70, 25, 6, .55), 0 6px 0 #2a0f04, 0 14px 26px rgba(0, 0, 0, .35);
  --card-edge: inset 0 2px 5px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 214, 160, .4);
  --inset: inset 0 3px 5px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 214, 160, .4);
  --press: transform .09s cubic-bezier(.3, .7, .4, 1), box-shadow .09s ease, filter .15s ease, background-color .15s ease;
  /* текст на дереве: тёмная обводка, чтобы читался на любой доске */
  --ts: 0 1px 0 rgba(50, 18, 4, .85), 0 0 3px rgba(50, 18, 4, .5);
  --ts-big: 0 2px 0 var(--outline), 2px 0 0 var(--outline), -2px 0 0 var(--outline), 0 -2px 0 var(--outline), 1.5px 1.5px 0 var(--outline), -1.5px 1.5px 0 var(--outline), 1.5px -1.5px 0 var(--outline), -1.5px -1.5px 0 var(--outline), 0 4px 0 rgba(30, 10, 2, .5);

  --top: env(safe-area-inset-top, 0px); --bottom: env(safe-area-inset-bottom, 0px);
  --left: env(safe-area-inset-left, 0px); --right: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }   /* полосы прокрутки не показываются нигде */
html, body { height: 100%; margin: 0; }
html { background: var(--bg); color-scheme: dark; }
body {
  font: 400 14px/1.45 var(--mono); color: var(--ink);
  background: var(--page);
  overflow: hidden; overscroll-behavior: none; touch-action: manipulation;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
[hidden] { display: none !important; }
/* Заставка — только в установленном приложении (на телефоне оно открывается с пустого экрана): название и полоска загрузки.
   Исчезает, когда игра готова; если код не запустился — сама через две секунды. */
#splash { display: none; }
@media (display-mode: standalone) {
  #splash { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center;
    background: var(--page); animation: splash-out .3s 2s forwards; }
  #splash b { font: 700 34px var(--display); letter-spacing: .01em; color: var(--gold-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); animation: splash-in .5s cubic-bezier(.2, .9, .3, 1.2) both; }
  #splash small { font: 400 12px var(--mono); color: var(--ink-soft); }
  #splash i { width: 140px; height: 4px; margin-top: 10px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent) 0 0 / 50% 100% no-repeat, rgba(255, 220, 160, .12); animation: splash-load 1.1s ease-in-out infinite; }
  .ready #splash { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
}
@keyframes splash-load { from { background-position: -70px 0, 0 0; } to { background-position: 210px 0, 0 0; } }
@keyframes splash-in { from { transform: scale(.8); opacity: 0; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
button { font: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; }
button:disabled { cursor: default; }
input { font: inherit; color: inherit; user-select: text; -webkit-user-select: text; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { -webkit-user-drag: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- экран и «футляр» ---------- */
.screen { position: fixed; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 16px; }
.case { width: min(430px, 100%); height: min(760px, 100%); display: flex; flex-direction: column; gap: 8px; }
.panel {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--panel-edge);
}
.view { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 520px) {
  .screen { padding: 0; }
  .case { width: 100%; height: 100%; gap: 6px;
    padding: max(6px, var(--top)) max(6px, var(--right)) max(6px, var(--bottom)) max(6px, var(--left)); }
  .panel { padding: 12px; border-radius: var(--r-l); }
}

/* Главный экран: на телефоне одна панель и вкладки, на широком экране три панели рядом. */
.pane { display: none; }
/* Центральная панель сама не прокручивается: прокручивается открытый блок. У блоков со своей шапкой (.split)
   шапка — заголовок, поиск, фильтры — стоит на месте, а листается только часть под ней (.scroll). */
#paneMain { overflow: hidden; }
#paneMain > .view { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#paneMain > .view.split { overflow: hidden; }
/* Прокручиваемые блоки обрезают всё, что выходит за их край, — в том числе тени карточек. Поэтому у них 4px запаса внутри,
   а отрицательный отступ возвращает содержимое на прежнее место. */
#paneMain > .view, .split > .scroll, .docbox > .scroll, .admin-host > .scroll, .ptable { margin: -4px; padding: 4px; }
.split > .scroll, .docbox > .scroll, .admin-host > .scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }
#loginDoc { overflow: hidden; }
.admin-host { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
#home[data-tab=chat] #paneChat, #home[data-tab=info] #paneInfo, #home:not([data-tab=chat]):not([data-tab=info]) #paneMain { display: flex; }
/* В центральной панели виден один блок — тот, чья вкладка открыта. */
#paneMain > .view { display: none; }
#home[data-tab=play] #view-play, #home[data-tab=settings] #view-settings, #home[data-tab=admin] #view-admin, #home[data-tab=page] #view-page,
#home[data-tab=profile] #view-profile, #home[data-tab=shop] #view-shop, #home[data-tab=players] #view-players, #home[data-tab=games] #view-games { display: flex; }
/* Блок чтения («Об игре», «Как играть», страницы): показывается одна из частей; кнопка «Назад» стоит на месте. */
.docbox { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; animation: fade .16s ease-out; }
.docbox section { display: none; flex-direction: column; gap: 10px; }
.docbox .doc-page { display: none; }
.docbox[data-doc=about] .doc-about, .docbox[data-doc=how] .doc-how { display: flex; }
.docbox[data-doc=page] .doc-page { display: block; }
/* «Как играть»: картинка входа и партии — на всю ширину блока */
.how-promo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--r-l); background: var(--well); box-shadow: var(--card-edge); margin: 3px 0 4px; }

/* ---------- текст ---------- */
.wordmark { font: 700 clamp(24px, 7.4vw, 32px)/1.1 var(--display); letter-spacing: .01em; text-align: center; color: var(--gold-hi); white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 18px rgba(227, 180, 94, .18); }
.wordmark-sm { font-size: 21px; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.lead { text-align: center; color: var(--ink-soft); font-size: 13px; margin-top: -6px; }
h2 { font: 600 15px/1.25 var(--display); letter-spacing: .01em; color: var(--ink); }
h3 { font: 600 12px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin: 4px 0 -4px; }
small { font-size: 12px; color: var(--ink-soft); }
time { font: 400 11px var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.credits { text-align: center; font-size: 12px; color: var(--ink-soft); }
.link { font: 500 12px var(--mono); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; transition: color .15s; }
.link:active { color: var(--gold); }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; min-height: 40px; }
.head-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.note { font-size: 12px; color: var(--ink-soft); margin-top: -4px; }

/* ---------- кнопки: латунная, костяная, ореховая и гранатовая клавиши ---------- */
/* Клавиша: ровный цвет, светлая кромка сверху и тёмная кромка снизу. Нажали — клавиша опускается на кромку (класс down
   ставит игра сразу при касании, :active — запасной путь), отпустили — пружинит обратно. */
.btn {
  position: relative; width: 100%; min-height: 48px; padding: 9px 16px; flex-shrink: 0;
  font: 600 14px/1.15 var(--mono); border-radius: var(--r-m);
  transition: var(--press);
}
.btn:disabled { filter: saturate(.4) brightness(.8); opacity: .55; }
.btn-xl { min-height: 58px; font-size: 17px; display: grid; align-content: center; gap: 3px; }
.btn-xl small { font: 400 11px var(--mono); color: inherit; opacity: .78; letter-spacing: 0; }
.btn-xl small:empty { display: none; }
/* латунь — главное действие */
.btn-dark { color: #2a1706; background: linear-gradient(var(--gold-hi), var(--gold) 55%, #c9913f); text-shadow: 0 1px 0 rgba(255, 240, 200, .45);
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .7), 0 4px 0 var(--gold-edge), 0 7px 14px rgba(0, 0, 0, .4); }
.btn-dark[aria-pressed=true] { color: var(--gold-hi); text-shadow: none; background: linear-gradient(#4b3020, #3a2416); box-shadow: inset 0 0 0 1.5px var(--gold), 0 4px 0 #1a0f07, 0 7px 14px rgba(0, 0, 0, .4); }   /* идёт поиск */
/* орех — второстепенное */
.btn-ivory, .actions > button { color: var(--ink); background: linear-gradient(#4a3121, #3b2618);
  box-shadow: inset 0 1px 0 rgba(255, 228, 185, .14), 0 0 0 1px rgba(0, 0, 0, .35), 0 4px 0 #170d06, 0 7px 12px rgba(0, 0, 0, .3); }
/* гранат — опасное */
.btn-nar, .actions > #btnResign { color: #fff3ee; background: linear-gradient(var(--nar-hi), var(--nar)); text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  box-shadow: inset 0 1px 0 rgba(255, 220, 220, .35), 0 4px 0 var(--nar-edge), 0 7px 12px rgba(0, 0, 0, .35); }
/* зелёная — купить (магазин) */
.btn-buy { color: #f2ffe9; background: linear-gradient(#5fcf72, #35a04b); text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  box-shadow: inset 0 1px 0 rgba(235, 255, 225, .45), 0 4px 0 #1e6b30, 0 7px 12px rgba(0, 0, 0, .35); }
.btn-buy.down:not(:disabled), .btn-buy:active:not(:disabled) { box-shadow: inset 0 1px 0 rgba(235, 255, 225, .35), 0 0 0 #1e6b30, 0 2px 4px rgba(0, 0, 0, .35); }
/* профиль: пара одинаковых тёмных клавиш с цветной рамкой — подарок (гранат) и qızıl (латунь) */
.btn-gift { --ring: #e07a8b; color: #ffd9df; background: linear-gradient(#5e2433, #45192a); }
.btn-coins { --ring: var(--gold); color: var(--gold-hi); background: linear-gradient(#563a24, #3d2818); }
.btn-gift, .btn-coins { text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  box-shadow: inset 0 0 0 1.5px var(--ring), inset 0 2px 0 rgba(255, 228, 200, .12), 0 4px 0 #170d06, 0 7px 12px rgba(0, 0, 0, .3); }
.btn-gift.down:not(:disabled), .btn-gift:active:not(:disabled),
.btn-coins.down:not(:disabled), .btn-coins:active:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--ring), 0 0 0 #170d06, 0 2px 4px rgba(0, 0, 0, .3); }
.btn-gift, .btn-coins { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; white-space: nowrap; }
/* слоновая кость — подарить (окно подарка) */
.btn-leaf { color: #2b1a0f; background: linear-gradient(#fbf1dd, var(--ivory) 50%, var(--ivory-lo));
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 var(--ivory-edge), 0 7px 12px rgba(0, 0, 0, .35); }
.btn.down:not(:disabled), .btn:active:not(:disabled), .actions > button:active { transform: translateY(4px); }
.btn-dark.down:not(:disabled), .btn-dark:active:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 250, 225, .5), 0 0 0 var(--gold-edge), 0 2px 4px rgba(0, 0, 0, .4); }
.btn-ivory.down:not(:disabled), .btn-ivory:active:not(:disabled), .actions > button:active { box-shadow: inset 0 1px 0 rgba(255, 228, 185, .1), 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 #170d06, 0 2px 4px rgba(0, 0, 0, .3); }
.btn-nar.down:not(:disabled), .btn-nar:active:not(:disabled), .actions > #btnResign:active { box-shadow: inset 0 1px 0 rgba(255, 220, 220, .25), 0 0 0 var(--nar-edge), 0 2px 4px rgba(0, 0, 0, .35); }
.btn-leaf.down:not(:disabled), .btn-leaf:active:not(:disabled) { box-shadow: inset 0 1px 0 #fff, 0 0 0 var(--ivory-edge), 0 2px 4px rgba(0, 0, 0, .35); }
@media (hover: hover) { .btn:hover:not(:disabled), .actions > button:hover { filter: brightness(1.07); } }
.row { display: flex; gap: 10px; }
#pActions { flex-wrap: wrap; }
#pActions .btn { flex: 1 1 0; }
#pActions #btnInvite { flex-basis: 100%; }   /* «Подарить» и «Монеты» рядом, вызов на игру — строкой ниже */
.row .btn { flex: 1 1 0; width: auto; min-width: 0; padding-inline: 8px; }
a.btn { display: grid; place-items: center; text-decoration: none; }

/* круглые и квадратные кнопки-значки: та же клавиша, поменьше */
.icon-btn { width: 50px; height: 50px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-m); color: var(--ink);
  background: linear-gradient(#4a3121, #3b2618); box-shadow: inset 0 1px 0 rgba(255, 228, 185, .14), 0 0 0 1px rgba(0, 0, 0, .35), 0 4px 0 #170d06; transition: var(--press); }
.icon-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 228, 185, .1), 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 #170d06; }
.icon-btn:disabled { opacity: .45; }
.icon-btn.send { color: #2a1706; background: linear-gradient(var(--gold-hi), var(--gold) 55%, #c9913f); box-shadow: inset 0 1px 0 rgba(255, 250, 225, .7), 0 4px 0 var(--gold-edge); }
.icon-btn.send:active { box-shadow: inset 0 1px 0 rgba(255, 250, 225, .5), 0 0 0 var(--gold-edge); }
.icon-btn.send svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }

/* «Поделиться» — только значок, крупный, в шапке рядом с названием */
.share-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-m); color: var(--gold-hi);
  background: linear-gradient(#4a3121, #3b2618); box-shadow: inset 0 1px 0 rgba(255, 228, 185, .14), 0 0 0 1px rgba(0, 0, 0, .35), 0 3px 0 #170d06; transition: var(--press); }
.share-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.share-btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 228, 185, .1), 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 #170d06; }
.share-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; animation: rise .16s ease-out; }
.share-to { display: grid; justify-items: center; gap: 5px; padding: 10px 4px; border-radius: var(--r-m); color: var(--ink); font: 500 11px var(--mono); text-decoration: none; text-align: center;
  background: var(--card); box-shadow: var(--card-edge); transition: var(--press); }
.share-to:active { transform: translateY(2px); }
.share-to svg { width: 24px; height: 24px; }
#shareCopy svg { fill: none; stroke: var(--ink); stroke-width: 1.8; }

/* выключатель звука: в меню — клавиша рядом с громкостью, в партии — в ряду кнопок */
.mute { display: grid; place-items: center; }
.mute svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mute .body { fill: currentColor; stroke-width: 1.2; }
.mute .snd-off, .mute[aria-pressed=true] .snd-on { display: none; }
.mute[aria-pressed=true] .snd-off { display: block; color: var(--nar-hi); }   /* звук выключен — перечёркнутый красный динамик */
.mute-sm { width: 48px; height: 46px; flex-shrink: 0; border-radius: var(--r-m); color: var(--ink);
  background: linear-gradient(#4a3121, #3b2618); box-shadow: inset 0 1px 0 rgba(255, 228, 185, .14), 0 0 0 1px rgba(0, 0, 0, .35), 0 4px 0 #170d06; transition: var(--press); }
.mute-sm svg { width: 24px; height: 24px; }
.mute-sm:active { transform: translateY(4px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 0 #170d06; }
.sound-row { display: flex; align-items: center; gap: 14px; }

/* ---------- поля ввода и переключатели ---------- */
form { display: flex; flex-direction: column; gap: 8px; }
#loginForm .btn { min-height: 56px; font-size: 16px; }
.field { display: grid; gap: 5px; }
.field > span { font: 600 12px var(--mono); letter-spacing: .03em; color: var(--ink-soft); }
.field input, .chat-form .chat-input, .search, .lock input, .del-box input {
  width: 100%; height: 54px; padding: 0 14px; text-align: center; font: 500 18px var(--mono); color: var(--ink);
  background: var(--well); border: 1.5px solid rgba(240, 210, 165, .14); border-radius: var(--r-m); outline: none; box-shadow: var(--inset);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .chat-form .chat-input:focus, .search:focus, .lock input:focus, .del-box input:focus { border-color: var(--gold); box-shadow: var(--inset), 0 0 0 3px rgba(227, 180, 94, .18); }
.chat-form .chat-input.bad { border-color: var(--nar-hi); box-shadow: var(--inset), 0 0 0 3px rgba(212, 74, 82, .22); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
#pinInput { letter-spacing: .3em; }
.field small { min-height: 15px; text-align: center; line-height: 15px; }
.field small.bad { color: var(--nar-hi); font-weight: 700; }

/* переключатель: утопленная дорожка, выбранное — выпуклая клавиша с латунной надписью */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--r-m); flex-shrink: 0;
  background: var(--well); box-shadow: var(--inset); }
.seg button { min-height: 38px; padding: 3px 4px; border-radius: var(--r-s); font: 600 12px var(--mono); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; gap: 5px; transition: var(--press); }
.seg button:active { transform: scale(.96); }
.seg button.on { color: var(--gold-hi); background: linear-gradient(#4f3423, #3e281a); box-shadow: inset 0 1px 0 rgba(255, 228, 185, .14), 0 0 0 1px rgba(0, 0, 0, .4), 0 2px 0 #140c06; }
.seg-sm button { min-height: 32px; font-size: 11px; }
.seg button:disabled { opacity: .4; }
/* громкость: толстая полоса и крупный круглый бегунок */
#volume { -webkit-appearance: none; appearance: none; flex: 1; width: auto; min-width: 0; height: 32px; margin: 0; background: transparent; cursor: pointer; }
#volume::-webkit-slider-runnable-track { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--gold) var(--fill, 50%), var(--well) var(--fill, 50%)); box-shadow: var(--inset); }
#volume::-moz-range-track { height: 14px; border-radius: 7px; background: var(--well); }
#volume::-moz-range-progress { height: 14px; border-radius: 7px; background: var(--gold); }
#volume::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -8px; border-radius: 50%; background: linear-gradient(#fbf1dd, var(--ivory-lo)); box-shadow: 0 0 0 2px var(--gold-edge), 0 3px 4px rgba(0, 0, 0, .45); }
#volume::-moz-range-thumb { width: 26px; height: 26px; border: 2px solid var(--gold-edge); border-radius: 50%; background: var(--ivory); }
.notify { display: grid; gap: 8px; }
.notify .note { margin: 0; }

/* ---------- лампочка «в сети» ---------- */
.lamp { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 40% 35%, #6b5a4a, #3a2c20 70%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
.lamp.on { background: radial-gradient(circle at 38% 32%, #e3ffe0, #4fd06a 45%, #1f8a3a); box-shadow: 0 0 8px rgba(88, 211, 110, .55); }
.chat-fold { display: none; grid-auto-flow: column; align-items: center; gap: 6px; padding: 4px; color: var(--ink); }
.chat-fold svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
#paneChat:not(.shut) .chat-fold svg { transform: rotate(180deg); }   /* открыт — стрелка вверх (свернуть), свёрнут — вниз (развернуть) */
.chat-fold .tab-badge { position: static; }
.online-pill { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; font-size: 12px; background: var(--well); box-shadow: var(--inset); white-space: nowrap; flex-shrink: 0; }
.online-pill b { font: 600 12px var(--mono); }

/* ---------- ранг: пять делений и название ---------- */
.rank { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rank b { font: 500 12px var(--mono); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pips { display: flex; gap: 2px; flex-shrink: 0; }
.pips i { width: 6px; height: 12px; border-radius: 2px; background: rgba(255, 230, 190, .13); }
.pips i.on { background: linear-gradient(var(--gold-hi), var(--gold-deep)); box-shadow: 0 0 4px rgba(227, 180, 94, .35); }
.ai { font: 500 12px var(--mono); color: var(--gold); }

/* ---------- карточка игрока ---------- */

.profile-avatar, .seat-avatar, .row-avatar { display: block; object-fit: cover; background: radial-gradient(circle at 50% 35%, #5a3c27, #2b1b10); box-shadow: inset 0 0 0 1px rgba(255, 228, 185, .08), 0 0 0 1px rgba(0, 0, 0, .45); }
/* монеты: тратятся на подарки, на ранг не влияют. Нажимается сама монета (не число): крутится и звенит. */
.coins { display: flex; align-items: center; gap: 6px; padding: 0 9px 0 0; flex-shrink: 0; border-radius: 999px; font: 700 15px/1 var(--mono); color: var(--gold-hi); background: var(--well); box-shadow: var(--inset); perspective: 200px; }
.coins b { line-height: 1; font-variant-numeric: tabular-nums; }
.coin:active { transform: scale(.86); }
/* Монета — маленькая и объёмная: блик сверху, тёмный кант, ребро снизу. Нарисована одним блоком, без картинки. */
.coin { position: relative; display: inline-block; width: 22px; height: 22px; padding: 0; border-radius: 50%; flex-shrink: 0; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 34% 28%, #fff6c4 0 10%, #ffd84f 30%, #eaa80f 64%, #b87708 100%);
  box-shadow: inset 0 0 0 2px #f8cb42, inset 0 0 0 3px rgba(140, 84, 0, .55), 0 2px 0 #96600a; transition: transform .1s; }
.coin::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%); transform: translateX(-120%); animation: glint 6s ease-in-out 1.5s infinite; }
@keyframes glint { 0%, 66% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.coin.spin { animation: coin-spin .9s cubic-bezier(.2, .7, .3, 1); }
@keyframes coin-spin { 0% { transform: rotateY(0) scale(1); } 30% { transform: rotateY(360deg) scale(1.25); } 100% { transform: rotateY(1080deg) scale(1); } }
.bar { height: 7px; border-radius: 4px; background: var(--well); box-shadow: var(--inset); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi)); transition: width .5s ease; }
/* статистика: число крупно, подпись мелко; ячейки разделены тонкими линиями */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 9px; }
.stats > div { display: grid; gap: 2px; padding: 0 4px; text-align: center; border-left: 1px solid var(--line); min-width: 0; }
.stats > div:first-child { border-left: 0; }
.stats dt { font-size: 10px; line-height: 1.2; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats dd { font: 600 17px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
/* подробная статистика профиля — сетка карточек, которая сама подстраивается под ширину */
.stats-more { grid-template-columns: repeat(3, minmax(0, 1fr));   /* 9 ячеек — ровно 3 × 3 на любом экране */ gap: 6px; border-top: 0; padding-top: 0; }
.stats-more > div { padding: 9px 6px; border: 0; border-radius: var(--r-m); background: var(--card); box-shadow: var(--card-edge); }
.stats-more > div:first-child { border: 0; }
.stats-more dt { white-space: normal; }
.stats-more dd { font-size: 16px; }

.hero { position: relative; flex: 1; min-height: 100px; border-radius: var(--r-l); }   /* доска занимает всё свободное место панели */
.hero-board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; border-radius: var(--r-l); box-shadow: 0 10px 26px rgba(0, 0, 0, .55); }
.hero-dice { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; --s: clamp(34px, 11vw, 46px); pointer-events: none; }
.hero.searching .cube { animation: tumble 1.5s linear infinite; }
.hero.searching .die + .die .cube { animation-duration: 1.9s; animation-direction: reverse; }
@keyframes tumble { to { transform: rotateX(360deg) rotateY(720deg); } }

/* Объявление владельца сайта над карточкой игрока. */
.notice { flex-shrink: 0; overflow: hidden; white-space: nowrap; padding: 9px 0; border-radius: var(--r-m); font: 600 13px/1.35 var(--mono); color: #2a1706;
  background: linear-gradient(var(--gold-hi), var(--gold));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.notice span { display: inline-block; padding-left: 100%; animation: marquee 18s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
/* Ссылки на страницы о сайте. */
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; flex-shrink: 0; }
.links a { font: 400 12px var(--mono); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; padding: 4px 2px; }
.copy { margin-top: 2px; text-align: center; font: 400 12px var(--mono); color: var(--ink-dim); }

/* ---------- профиль игрока ---------- */
.pid { font: 600 12px var(--mono); padding: 4px 10px; border-radius: 999px; color: var(--gold-hi); background: var(--well); box-shadow: var(--inset); }
.pid:empty { display: none; }
.pcard { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--card-edge); }
.pic { position: relative; display: block; width: 92px; height: 92px; margin: 0 auto; }
.pcard .pic { margin: 0; }
.profile-avatar { width: 92px; height: 92px; margin: 0 auto; border-radius: var(--r-l); }
.pcard-id { display: grid; gap: 6px; min-width: 0; }
.pcard-id h2 { font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-id p { color: var(--ink-soft); font-size: 13px; }
.pcard-id p:empty { display: none; }
#view-profile > .scroll > .stats { padding: 4px 0 2px; border-top: 0; }
#view-profile .feed { border-top: 0; }
/* жалоба и скрытие игрока — тихие ссылки под кнопками профиля */
/* смена ПИН-кода и удаление аккаунта: раскрывающиеся блоки */
#btnPin { align-self: center; }
.del-box:not([hidden]) { display: grid; }
.del-box { gap: 8px; padding: 12px; border-radius: var(--r-l); background: rgba(184, 50, 59, .12); box-shadow: inset 0 0 0 1px rgba(212, 74, 82, .35); }
.pin-box { background: var(--card); box-shadow: var(--card-edge); }
.del-box p { font-size: 12px; color: var(--ink-soft); text-align: center; }
.del-box input { height: 46px; font-size: 16px; letter-spacing: .2em; }
.shop { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-l); background: var(--well); box-shadow: var(--inset); animation: rise .16s ease-out; }
.tags em.loss { background: var(--nar); }
.tags small { font: 600 11px var(--mono); align-self: center; }
.tags small.plus { color: var(--win); }
.tags small.minus { color: var(--nar-hi); }
.tags small.acc { color: var(--gold); }
/* подарки в профиле игрока */
.gifts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gifts-head b { font: 600 12px var(--mono); padding: 2px 9px; border-radius: 999px; color: var(--gold-hi); background: var(--well); }
.gifts-head b:empty { display: none; }
.gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; flex-shrink: 0; }
.gifts li:not(.empty) { display: grid; justify-items: center; align-content: center; aspect-ratio: 1; gap: 2px; padding: 6px 4px; border-radius: var(--r-m); text-align: center; min-width: 0;
  background: var(--card); box-shadow: var(--card-edge); }
.gifts .empty { grid-column: 1 / -1; }
.gifts img { width: 50px; height: 50px; object-fit: contain; }
.gifts b { font: 500 11px/1.25 var(--mono); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gifts small { font-size: 10px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gift-hint { text-align: center; font-size: 12px; color: var(--ink-soft); }
/* монеты в подарок: суммы — кнопками в один ряд */
.amounts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.amt { min-height: 42px; border-radius: var(--r-m); font: 600 14px var(--mono); color: var(--gold-hi);
  background: linear-gradient(#4a3121, #3b2618); box-shadow: inset 0 1px 0 rgba(255, 228, 185, .14), 0 0 0 1px rgba(0, 0, 0, .35), 0 3px 0 #170d06; transition: var(--press); }
.amt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.amt.on { color: #2a1706; background: linear-gradient(var(--gold-hi), var(--gold)); box-shadow: inset 0 1px 0 rgba(255, 250, 225, .7), 0 3px 0 var(--gold-edge); }
.amt:disabled { opacity: .35; }

/* ---------- магазин подарков ----------
   Подарок — вырезанная наклейка с белой каймой на деревянной карточке. Карточки одного размера заполняют место до низа панели. */
.shop-lead { font-size: 12px; color: var(--ink-soft); margin-top: -4px; flex-shrink: 0; }
.shop-area { flex: 1 1 0; min-height: 96px; display: grid; place-items: start center; }
.gift-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gift-grid.shop-grid { --cell: 100px; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--cell); align-content: start; }
.gift-card { position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 4px 9px; border-radius: var(--r-l); min-width: 0;
  background: var(--card); box-shadow: var(--card-edge); transition: var(--press); }
.gift-card:active { transform: scale(.95); }
.gift-card img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.gift-card b { font: 500 12px/1.2 var(--mono); max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.gift-card small { font: 600 11px var(--mono); color: var(--gold-hi); }
.gift-card.on { background: #4a3122; box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(227, 180, 94, .25); }
.shop-grid .gift-card { align-content: center; padding: 5px 4px; gap: 3px; overflow: hidden; }
.shop-grid .gift-card:nth-child(4n + 2) { background: #362419; }
.shop-grid .gift-card:nth-child(4n + 3) { background: #302016; }
.shop-grid .gift-card.on { background: #4a3122; }
/* цена — ценник с монеткой */
.shop-grid .gift-card small { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 3px; border-radius: 999px; background: rgba(0, 0, 0, .3); }
.shop-grid .gift-card small::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f2c230 55%, #b87708); }
/* кайма наклейки — четыре резкие тени без размытия; на слабых устройствах её нет */
.shop-grid .gift-card img { width: calc(var(--cell) * .46); height: calc(var(--cell) * .46);
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 2px rgba(0, 0, 0, .45));
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.shop-grid .gift-card b { font-size: clamp(10px, calc(var(--cell) * .1), 13px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.shop-grid .gift-card small { font-size: clamp(10px, calc(var(--cell) * .095), 12px); }
.shop-grid .gift-card.on img { transform: rotate(-6deg) scale(1.08); }
.shop-grid .empty { grid-column: 1 / -1; }
@media (hover: hover) { .shop-grid .gift-card:hover img { transform: rotate(-6deg) scale(1.06); } }
.gift-card .have { position: absolute; top: 5px; right: 5px; padding: 1px 7px; border-radius: 999px; font: 600 10px/1.5 var(--mono); font-style: normal; color: #2a1706; background: var(--gold); }
/* монета — в чате у подарка монетами */
.coin-big { display: block; width: 34px; height: 34px; border-radius: 50%; font-style: normal; flex-shrink: 0;
  background: radial-gradient(circle at 34% 28%, #fff6c4 0 10%, #ffd84f 30%, #eaa80f 64%, #b87708 100%);
  box-shadow: inset 0 0 0 3px #f8cb42, inset 0 0 0 5px rgba(140, 84, 0, .45), 0 3px 0 #96600a; }
/* полоса покупки внизу: выбранный подарок, сколько уже есть и кнопка; пока ничего не выбрано — подсказка */
.shop-buy { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 64px; padding: 8px 8px 8px 10px; flex-shrink: 0;
  border-radius: var(--r-l); background: var(--card); box-shadow: inset 0 0 0 1.5px rgba(227, 180, 94, .45), 0 2px 0 rgba(0, 0, 0, .35); }
.shop-buy.idle { grid-template-columns: minmax(0, 1fr); text-align: center; background: var(--well); box-shadow: var(--inset); }
.shop-buy.idle img, .shop-buy.idle .btn, .shop-buy.idle small { display: none; }
.shop-buy.idle b { font: 500 12px var(--mono); color: var(--ink-soft); white-space: normal; }
.shop-buy img { width: 46px; height: 46px; object-fit: contain; }
.shop-buy p { display: grid; min-width: 0; }
.shop-buy b { font: 600 14px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-buy .btn { width: auto; min-height: 44px; padding-inline: 14px; font-size: 13px; }
.search { height: 46px; font-size: 16px; text-align: left; flex-shrink: 0; }
/* страницы 1 2 3 */
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; flex-shrink: 0; }
.pager.keep[hidden] { display: flex !important; visibility: hidden; min-height: 36px; }   /* место под страницы занято всегда: строки и карточки не прыгают */
.pager button { min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--r-s); font: 600 13px var(--mono); color: var(--ink);
  background: linear-gradient(#4a3121, #3b2618); box-shadow: inset 0 1px 0 rgba(255, 228, 185, .12), 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 0 #170d06; transition: var(--press); }
.pager button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.pager button.on { color: #2a1706; background: linear-gradient(var(--gold-hi), var(--gold)); box-shadow: 0 2px 0 var(--gold-edge); }
.pager button:disabled:not(.on) { opacity: .3; }
.pager span { align-self: end; padding: 0 2px; color: var(--ink-soft); }

/* ---------- все игроки и все партии ---------- */
.btn-all { min-height: 42px; font-size: 12px; margin-top: 6px; flex-shrink: 0; }
.gtable { flex: 1 1 0; min-height: 0; overflow: hidden; border-top: 1px solid var(--line); }
.gtable li { min-height: 44px; }
.pt-row { display: grid; align-items: center; column-gap: 8px; padding: 0 10px; grid-template-columns: 26px 40px minmax(0, 1fr) 56px 66px; width: 100%; height: 52px; text-align: left;
  border-bottom: 1px solid var(--line); border-radius: var(--r-s); transition: background-color .12s; }
@media (hover: hover) { .pt-row:hover { background: var(--soft); } }
.pt-row:active { background: var(--tint); }
.pt-dev { display: grid; place-items: center; color: var(--ink-dim); }
.pt-dev svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.row-pic .lamp { position: absolute; left: -3px; top: -3px; width: 12px; height: 12px; outline: 2px solid var(--wood); }   /* лампочка на углу аватара */
.pt-who { display: grid; gap: 2px; min-width: 0; }
.pt-who b { font: 600 14px/1.2 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-who .rank b { font: 400 11px var(--mono); }
.pt-who .pips i { width: 5px; height: 10px; }
.pt-pts, .pt-wl { text-align: right; font: 600 14px var(--mono); font-variant-numeric: tabular-nums; }
.pt-wl { font-size: 12px; color: var(--ink-soft); }
.ptable { flex: 1 1 0; min-height: 0; overflow: hidden; }
.ptable .gm .pt-row { background: linear-gradient(90deg, rgba(227, 180, 94, .16), rgba(227, 180, 94, 0)); }
.ptable .gm .row-avatar { box-shadow: 0 0 0 2px #d9a514; }
.ptable .empty { padding-top: 24px; }
/* розовая рамка у аватара игрока jale — везде, где видна его аватарка */
img.pink { box-shadow: 0 0 0 2px #f07ab0, 0 0 0 3.5px rgba(214, 70, 140, .4) !important; }
/* Гроссмейстер — высший ранг: золотое имя с золотыми костями в списке, в чате и в профиле, золотая рамка аватара. */
.list li.gm .row-who b, .chat .who.gm, .gm .pcard-id h2, .ptable .gm .pt-who > b { color: #f0c55a; background: linear-gradient(100deg, #e0a92c 35%, #fff1b8 50%, #e0a92c 65%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gold 6s linear infinite; }
@keyframes gold { from { background-position: 100% 0; } to { background-position: -60% 0; } }
.list li.gm .row-who b::before, .chat .who.gm::before, .gm .pcard-id h2::before, .ptable .gm .pt-who > b::before { content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-right: 5px; vertical-align: -.16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1a8'/%3E%3Cstop offset='.5' stop-color='%23e8b528'/%3E%3Cstop offset='1' stop-color='%23a8730a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='9' y='2' width='13' height='13' rx='3' fill='url(%23g)' stroke='%237a5206' stroke-width='.8'/%3E%3Crect x='2' y='9' width='13' height='13' rx='3' fill='url(%23g)' stroke='%237a5206' stroke-width='.8'/%3E%3Cg fill='%235a3a05'%3E%3Ccircle cx='15.5' cy='8.5' r='1.3'/%3E%3Ccircle cx='5.5' cy='12.5' r='1.2'/%3E%3Ccircle cx='8.5' cy='15.5' r='1.2'/%3E%3Ccircle cx='11.5' cy='18.5' r='1.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.chat .who.gm .tag-new { -webkit-text-fill-color: #fff3ee; }
.list li.gm .row-avatar, .gm .profile-avatar { box-shadow: 0 0 0 2px #d9a514, 0 0 0 3.5px rgba(143, 100, 0, .45); }
.gm .pcard { background: linear-gradient(#4d3519, #33220f); box-shadow: inset 0 0 0 1.5px #c8920a, 0 2px 0 rgba(0, 0, 0, .4); }
/* Идущую партию можно смотреть: строка нажимается, справа — значок глаза. */
.feed li[data-watch] { cursor: pointer; border-radius: var(--r-s); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9a083' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5S21.5 12 21.5 12s-3.5 6.5-9.5 6.5S2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E") right 8px top 8px / 18px no-repeat; }
.feed li[data-watch] .duo { padding-right: 28px; }
@media (hover: hover) { .feed li[data-watch]:hover { background-color: var(--soft); } }
.feed li[data-watch]:active { background-color: var(--tint); }
/* Замок админ-панели: пароль владельца. */
.lock { margin: auto 0; align-items: stretch; text-align: center; gap: 10px; }
.lock p { color: var(--ink-soft); font-size: 13px; }
.lock input { height: 50px; font-size: 16px; }
/* Текст страниц «Об игре», «Условия», «Конфиденциальность». */
.doc { font-size: 14px; line-height: 1.6; user-select: text; -webkit-user-select: text; }
.doc h1 { font: 700 20px/1.25 var(--display); color: var(--gold-hi); margin-bottom: 8px; }
.doc h2 { margin: 16px 0 5px; color: var(--gold-hi); }
.doc p, .doc ul, .doc ol { margin: 7px 0; }
.doc ul, .doc ol { padding-left: 20px; list-style: revert; }
.doc li { margin: 4px 0; }
.doc a { color: var(--gold); text-underline-offset: 3px; }
.doc .when { font-size: 12px; color: var(--ink-soft); }
/* Список можно тянуть мышью. */
.dragging, .dragging * { cursor: grabbing !important; }

/* ---------- списки: игроки, идущие партии, результаты ---------- */
.list, .feed { border-top: 1px solid var(--line); flex-shrink: 0; }
/* Правая панель: блоки, каждый листается отдельно. Игрокам достаётся всё свободное место. */
#paneInfo { flex: 1; min-height: 0; flex-direction: column; gap: 8px; }
#paneFeed { flex: 0 0 44%; }
#paneFeed, #panePlayers { overflow: hidden; gap: 12px; }
.box { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.box > h2 { flex-shrink: 0; }
/* Заголовки разделов — деревянные полосы со счётчиком. На телефоне и планшете касание сворачивает раздел. */
.fold { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: var(--r-m); text-align: left;
  font: 600 14px/1.2 var(--display); letter-spacing: .01em; color: var(--ink); cursor: default;
  background: var(--card); box-shadow: var(--card-edge); transition: var(--press); }
.fold span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fold-n { font: 600 12px var(--mono); padding: 3px 9px; border-radius: 999px; color: var(--gold-hi); background: var(--well); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fold-n:empty, .fold .chev { display: none; }
.box .list, .box .feed { border-top: 0; }
.box .feed, .box .list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.box-results .feed { flex: 1 1 0; overflow: hidden; position: relative; }
.box-results .feed > li { content-visibility: visible; }   /* последние партии — страницами, без прокрутки */
.box-games { flex: 0 1 auto; max-height: 42%; }
.box-results, .box-players { flex: 1 1 0; }
@media (max-width: 1099px) {
  .fold { cursor: pointer; }
  .fold:active { transform: scale(.985); }
  .fold .chev { display: block; transition: transform .16s ease; }
  .box.shut .chev { transform: rotate(-90deg); }
  .box.shut > .feed, .box.shut > .list, .box.shut > .btn-all { display: none; }
  .box.shut { flex: 0 0 auto; }
  /* панель, в которой всё свёрнуто, сжимается до заголовков и отдаёт место соседней */
  #paneFeed:not(:has(.box:not(.shut))), #panePlayers:not(:has(.box:not(.shut))) { flex: 0 0 auto; }
  #paneFeed { flex: 1 1 0; } #panePlayers { flex: 1.25 1 0; }
  .box-games:not(.shut):has(+ .box-results.shut) { max-height: none; flex: 1 1 0; }
}
/* Строки за пределами видимой части списка браузер не рисует — длинные списки не тормозят прокрутку. */
.list > li { content-visibility: auto; contain-intrinsic-size: auto 56px; }
.feed > li { content-visibility: auto; contain-intrinsic-size: auto 42px; }
/* Метка «новый»: только что начатая партия, первое сообщение новичка. */
.tag-new { display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px; font: 600 10px/1.5 var(--mono); font-style: normal; letter-spacing: .02em; color: #fff3ee; background: var(--nar); vertical-align: 1px; flex-shrink: 0; }
/* В свёрнутом блоке появилось новое — точка на заголовке. */
.box.fresh .fold span::after { content: ''; display: inline-block; width: 9px; height: 9px; margin-left: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.row-btn { width: 100%; min-height: 56px; padding: 7px 8px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 46px; align-items: center; column-gap: 10px; text-align: left;
  border-bottom: 1px solid var(--line); border-radius: var(--r-s); transition: background-color .12s; }
@media (hover: hover) { .row-btn:hover { background: var(--soft); } }
.row-btn:active { background: var(--tint); }
.row-pic { position: relative; width: 40px; height: 40px; }
.row-gift { position: absolute; right: -7px; bottom: -6px; width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.row-avatar { width: 40px; height: 40px; border-radius: var(--r-s); }
.row-who { display: grid; min-width: 0; }
.row-who b { font: 600 14px/1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-who small { font-size: 12px; line-height: 1.25; }
.row-who .st-play { color: var(--gold); font-weight: 700; }
.row-who .st-search, .row-who .st-on { color: var(--win); }
.num { text-align: right; font: 600 14px var(--mono); font-variant-numeric: tabular-nums; }
.empty { padding: 14px 8px; text-align: center; color: var(--ink-soft); font-size: 13px; }
.feed li:not(.empty) { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px; border-bottom: 1px solid var(--line); }
.feed .empty { padding: 12px 8px; font-size: 13px; }
.feed time { font-size: 11px; white-space: nowrap; }
.feed li.game { flex-direction: column; align-items: stretch; gap: 3px; }
.game .duo small { font: 500 11px var(--mono); color: var(--ink-soft); }
.game-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.game-meta small { font-size: 10px; }
.game-meta time { font: 600 12px var(--mono); color: var(--win); font-variant-numeric: tabular-nums; }
.duo { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; font: 500 13px var(--mono); }
.duo b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duo i { font-style: normal; color: var(--ink-dim); flex-shrink: 0; }
.duo.won b:first-child { font-weight: 700; color: var(--ink); }
.duo.won b:last-child { color: var(--ink-soft); }
.tags { display: flex; gap: 4px; flex-shrink: 0; }
.tags em { font: 600 10px var(--mono); font-style: normal; padding: 2px 7px; border-radius: 999px; color: #eaffe9; background: var(--win-bg); }
.tags em.mars { color: #2a1706; background: var(--gold); }

/* выбор аватара: 14 фигурок двумя рядами */
.avatars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.avatars button { aspect-ratio: 1; border-radius: var(--r-m); overflow: hidden; background: radial-gradient(circle at 50% 35%, #5a3c27, #2b1b10); box-shadow: inset 0 0 0 1px rgba(255, 228, 185, .08), 0 0 0 1px rgba(0, 0, 0, .4), 0 2px 0 rgba(0, 0, 0, .35); transition: var(--press); }
.avatars button:active { transform: scale(.92); }
.avatars button.on { box-shadow: 0 0 0 2.5px var(--gold), 0 0 12px rgba(227, 180, 94, .4); }
.avatars img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* установка приложения: одна клавиша — для этого устройства, с его значком */
.app-box { display: grid; gap: 10px; }
.app-btn { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.app-btn .os { display: none; }
.app-btn .ic { width: 22px; height: 22px; display: block; }
[data-os=android] .app-btn { background: linear-gradient(#4cc46f, #2f9a4b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #1d6b33, 0 7px 12px rgba(0, 0, 0, .3); }
[data-os=ios] .app-btn { background: linear-gradient(#55555a, #1c1c1e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 0 #000, 0 7px 12px rgba(0, 0, 0, .3); }
[data-os=pc] .app-btn { background: linear-gradient(#2a95e8, #0067b8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 0 #00467e, 0 7px 12px rgba(0, 0, 0, .3); }
[data-os=android] .os-android, [data-os=ios] .os-ios, [data-os=pc] .os-pc { display: block; }
.app-btn.down:not(:disabled), .app-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.app-btn.done, .app-btn.done:disabled { color: var(--win); text-shadow: none; opacity: 1; filter: none; background: var(--well); box-shadow: var(--inset); }
.app-btn.done::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236cbf73' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / contain no-repeat; }
.app-btn.done .os { display: none !important; }
.app-box .note { margin: 0; text-align: center; }
.app-note { margin-top: 0; text-align: center; color: var(--ink-dim); }

/* ---------- чат ---------- */
.chat { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 7px; padding: 8px 2px; border-top: 1px solid var(--line); }
.chat li:not(.empty) { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 3px; align-items: baseline; padding: 10px 12px; border-radius: var(--r-m);
  background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 228, 185, .05), 0 1px 0 rgba(0, 0, 0, .3); animation: pop-in .18s ease-out; }
@keyframes pop-in { from { transform: translateY(6px); opacity: .01; } }
.chat li.mine { background: #43301f; }
.chat li.ping { background: #4a321b; box-shadow: inset 3px 0 0 var(--gold); }
.chat .empty { margin: auto; }
.chat-link { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }   /* ссылка на страницу сайта */
.chat .who { font: 700 13px var(--mono); color: var(--gold-hi); text-align: left; }
.chat time { text-align: right; justify-self: end; font-size: 11px; }
.chat p { grid-column: 1 / -1; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
/* стикер — в одной строке с именем: имя, картинка, время */
.chat li.stick { grid-template-columns: auto auto 1fr; align-items: center; font-size: 26px; line-height: 1; }
.chat-sticker { width: 32px; height: 32px; object-fit: contain; }
.chat-sticker[src^="/api/chatimg"] { width: 44px; height: 44px; }
/* подарок — строка на всю ширину: картинка, кто кому и что */
.chat li.gift { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; font-size: 34px; line-height: 1; background: #3f2c18; box-shadow: inset 0 0 0 1px rgba(227, 180, 94, .35); }
.chat li.gift.ping { box-shadow: inset 3px 0 0 var(--gold), inset 0 0 0 1px rgba(227, 180, 94, .35); }
.chat li.gift img { width: 44px; height: 44px; object-fit: contain; }
.chat li.gift .coin-big { margin: 0 auto; }
.chat li.gift p { grid-column: auto; font-size: 14px; line-height: 1.4; user-select: none; -webkit-user-select: none; }
.chat li.gift p b { font-family: var(--mono); }
.chat li.gift p i { font-style: normal; color: var(--ink-soft); margin: 0 6px; }
.chat li.gift p span { display: block; font: 600 13px var(--mono); color: var(--gold-hi); }
/* закрепить сообщение (видно только владельцу) и закреплённое сообщение над чатом */
.pin-on { position: absolute; right: 6px; bottom: 4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-soft); opacity: .35; }
.pin-on svg, .chat-pin svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pin-on:hover, .pin-on:focus-visible { opacity: 1; background: var(--tint); }
.chat-pin { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-m); flex-shrink: 0;
  color: var(--ink); background: #43301f; box-shadow: inset 3px 0 0 var(--gold); }
.chat-pin p { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; line-height: 1.35; }
.chat-pin p b { font: 700 12px var(--mono); color: var(--gold-hi); flex-shrink: 0; }
.chat-pin p span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pin-off { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-soft); }
.pin-off:hover { background: var(--tint); }
/* «… печатает»: место под строку занято всегда, поэтому чат не прыгает */
.typing { flex-shrink: 0; height: 18px; margin: -4px 2px; font-size: 12px; line-height: 18px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .15s ease; }
.typing.on { opacity: 1; }
.typing.on::after { content: '…'; display: inline-block; vertical-align: bottom; overflow: hidden; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { from { width: 0; } to { width: 1.1em; } }
.chat-form { flex-direction: row; align-items: center; gap: 8px; flex-shrink: 0; }
.chat-form .chat-input { flex: 1 1 auto; height: 50px; padding-inline: 14px; text-align: left; font: 400 16px/46px var(--mono); min-width: 0;
  white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; user-select: text; -webkit-user-select: text; cursor: text; }
.chat-input:empty::before { content: attr(data-ph); color: var(--ink-dim); pointer-events: none; }   /* подсказка в пустом поле */
.chat-input[contenteditable=false] { opacity: .6; cursor: default; }

/* ---------- нижняя панель: значки вместо слов ---------- */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; flex-shrink: 0; padding: 5px; border-radius: var(--r-xl);
  background: linear-gradient(rgba(14, 8, 4, .88), rgba(10, 6, 3, .92)), var(--walnut) center / 900px auto; box-shadow: inset 0 1px 0 rgba(255, 228, 185, .07), 0 0 0 1px rgba(0, 0, 0, .55), 0 10px 24px rgba(0, 0, 0, .45); }
.tabs button { position: relative; min-height: 56px; display: grid; place-items: center; border-radius: var(--r-l); transition: var(--press); }
/* Значки меню кремовые; выбранная вкладка — выпуклая деревянная клавиша с латунной чертой. */
.tabs svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); opacity: .62; transition: transform .15s ease, opacity .15s ease, stroke .15s; }
.tabs button.on { background: linear-gradient(#4a3121, #37231a); box-shadow: inset 0 1px 0 rgba(255, 228, 185, .14), 0 0 0 1px rgba(0, 0, 0, .5), 0 3px 0 #0b0603; }
.tabs button.on svg { opacity: 1; stroke: var(--gold-hi); transform: translateY(-2px); }
.tabs button.on::before { content: ''; position: absolute; left: 50%; bottom: 6px; width: 24px; height: 3px; margin-left: -12px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 8px rgba(227, 180, 94, .7); }
.tabs button:active { transform: translateY(2px) scale(.96); }
.tab-badge { position: absolute; top: 5px; left: calc(50% + 8px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; font: 600 11px/19px var(--mono); text-align: center; color: #fff3ee; background: var(--nar); box-shadow: 0 0 0 2px var(--dark); }
.tab-badge[hidden] { display: none; }
.tabs button.new::after { content: ''; position: absolute; top: 9px; left: calc(50% + 10px); width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }

/* Партии и игроки — две панели в одной колонке; на очень широком экране расходятся по своим колонкам. */
/* Компьютер: окно занимает весь экран — чат, игра, партии с игроками. Колонки стоят на месте; чат сворачивается
   в свою шапку (вверх) и разворачивается обратно (вниз) кнопкой в шапке. */
@media (min-width: 1100px) {
  .trio { display: grid; grid-template: minmax(0, 1fr) auto / minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); width: min(100%, 2200px); height: 100%; gap: 14px; }
  .trio .pane { display: flex; }
  .trio .tabs { grid-column: 2; grid-row: 2; padding: 6px; }
  .trio #paneInfo { gap: 14px; }
  #paneChat { grid-column: 1; grid-row: 1 / -1; overflow: hidden; }
  #paneChat.shut { align-self: start; }
  #paneChat.shut > :not(.pane-head) { display: none; }
  #paneChat .pane-head { cursor: pointer; }
  #paneChat .chat-fold { display: grid; }
  #paneMain { grid-column: 2; grid-row: 1; }
  #paneInfo { grid-column: 3; grid-row: 1 / -1; }
  .trio .tabs [data-tab=chat], .trio .tabs [data-tab=info] { display: none; }
  #home[data-tab=chat] #view-play, #home[data-tab=info] #view-play { display: flex; }
}
/* Широкий монитор и телевизор: четыре колонки — партии и игроки отдельно. */
@media (min-width: 1560px) {
  .trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, .9fr); }
  .trio #paneInfo { display: contents; }
  #paneFeed { grid-column: 3; grid-row: 1 / -1; }
  #panePlayers { grid-column: 4; grid-row: 1 / -1; }
}
@media (min-width: 521px) and (max-width: 699px) and (min-height: 800px) {
  .case { width: min(540px, 100%); height: min(900px, 100%); }   /* маленький планшет: карточка крупнее телефонной */
}
/* Планшет: игра, чат и настройки слева по вкладкам, игроки и партии всегда видны справа. */
@media (min-width: 700px) and (max-width: 1099px) {
  .trio { display: grid; grid-template: minmax(0, 1fr) auto / minmax(0, 1.2fr) minmax(270px, 1fr); width: min(980px, 100%); height: min(1000px, 100%); gap: 10px; }
  #paneMain, #paneChat { grid-column: 1; grid-row: 1; }
  #paneInfo { display: flex; grid-column: 2; grid-row: 1 / -1; }
  .trio .tabs { grid-column: 1; grid-row: 2; }
  .trio .tabs [data-tab=info] { display: none; }
  #home[data-tab=info] #paneMain { display: flex; }   /* вкладки «Игроки» здесь нет — слева остаётся игра */
  #login .case { width: min(500px, 100%); height: min(860px, 100%); }
}

/* Быстрые плавные появления: экраны, вкладки и всплывающие блоки не «моргают». */
.screen:not([hidden]), .view, .trio .pane { animation: fade .18s ease-out; }
.view { animation-name: view-in; }
@keyframes view-in { from { opacity: .01; transform: translateY(6px); } }
.stickers:not([hidden]) { animation: rise .14s ease-out; }
@keyframes fade { from { opacity: .01; } }   /* не с нуля: полностью прозрачное браузер не считает показанным (LCP) */
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }

/* ---------- партия ---------- */
#game { grid-template: auto minmax(0, 1fr) auto / minmax(0, 1fr); gap: 8px; place-items: stretch;
  padding: max(7px, var(--top)) max(7px, var(--right)) max(7px, var(--bottom)) max(7px, var(--left)); }
.hud { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 6px; width: min(100%, 900px); margin: 0 auto; }
.seat { grid-row: 1; grid-column: 1; position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 11px 5px 5px; border-radius: var(--r-l); justify-self: start; max-width: min(100%, 34vw);
  background: var(--panel); box-shadow: var(--panel-edge); transition: box-shadow .25s; }
.seat-me { grid-column: 3; justify-self: end; padding: 5px 5px 5px 11px; text-align: right; }
.seat.turn { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(227, 180, 94, .4), var(--panel-edge); }   /* чей сейчас бросок или ход */
.seat-avatar { width: 42px; height: 42px; border-radius: var(--r-m); flex-shrink: 0; }
.seat-text { min-width: 0; display: grid; }
.seat-text b { font: 600 13px/1.25 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .rank b { font-size: 11px; }
.seat .pips { display: none; }   /* на телефоне ранг — только словом, деления видны на широком экране */
.seat-me .rank { justify-content: flex-end; }
.status { grid-column: 2; grid-row: 1; justify-self: center; max-width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--r-m); text-align: center;
  font: 500 12px/1.3 var(--mono); color: var(--ink); background: var(--panel); box-shadow: var(--panel-edge); transition: background .2s, color .2s; }
.status time { font: 600 12px var(--mono); color: inherit; padding-left: 8px; border-left: 1px solid currentColor; }
.status time:empty { display: none; }
.status.mine { color: #2a1706; background: linear-gradient(var(--gold-hi), var(--gold)); box-shadow: 0 0 16px rgba(227, 180, 94, .4), 0 3px 0 var(--gold-edge); }
.status.hurry { color: #fff3ee; background: linear-gradient(var(--nar-hi), var(--nar)); box-shadow: 0 0 16px rgba(212, 74, 82, .45), 0 3px 0 var(--nar-edge); animation: hurry 1s ease-in-out infinite; }
@keyframes hurry { 50% { transform: scale(1.03); } }

#stage { min-width: 0; min-height: 0; display: grid; place-items: center; }
#table { position: relative; border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .6); }
#board { display: block; touch-action: none; border-radius: 12px; }   /* указатель-«руку» включает игра — только над тем, чем можно ходить */
#dice { position: absolute; inset: 0; pointer-events: none; --s: 48px; }
#dice .die { position: absolute; transition: opacity .25s, left .35s ease, top .35s ease; }
/* Кости, которые можно бросить, мягко светятся. */
#dice.rollable .die { pointer-events: auto; cursor: pointer; animation: glow 1.6s ease-in-out infinite; }
#dice.rollable .die:active { transform: scale(.92); }
#dice.rollable .die::before { content: ''; position: absolute; inset: -12px; }   /* пальцем попасть легче: зона нажатия шире кости */
#dice.waiting .die { opacity: .7; }
#dice .die.dim { opacity: .45; }
#dice .die.used1 { opacity: .62; }
#dice .die.used2 { opacity: .2; }
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 calc(var(--s) * .1) calc(var(--s) * .08) rgba(25, 12, 4, .5)) drop-shadow(0 0 2px rgba(227, 180, 94, .5)); }
  50% { filter: drop-shadow(0 calc(var(--s) * .1) calc(var(--s) * .08) rgba(25, 12, 4, .5)) drop-shadow(0 0 10px rgba(240, 180, 60, 1)); }
}

.actions { position: relative; display: flex; justify-content: center; gap: 8px; width: min(100%, 540px); margin: 0 auto; padding-bottom: 4px; }
.actions > button { flex: 1; min-height: 48px; padding: 4px 8px; border-radius: var(--r-m); font: 600 12px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: var(--press); }
#btnMute, #btnWatchers { flex: 0 0 56px; }
#btnStickers { flex: 1 1 0; } .actions > #btnResign { flex: 1.35 1 0; }
/* глаз: сколько человек смотрит — число в кружке в углу, как уведомление */
.eye { position: relative; display: grid; place-items: center; overflow: visible !important; }
.eye svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center;
  font: 600 11px/1 var(--mono); color: #fff3ee; background: var(--nar); box-shadow: 0 0 0 2px var(--dark); }
.watch-list { position: absolute; bottom: calc(100% + 12px); left: 0; right: 0; margin: 0 auto; z-index: 30; width: min(260px, calc(100% - 16px));
  display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-l); background: var(--panel); font: 500 14px var(--mono);
  box-shadow: var(--panel-edge); animation: rise .14s ease-out; }
.watch-list b { font: 600 12px var(--mono); color: var(--gold-hi); }
.watch-list small { font: 400 12px var(--mono); }
/* Стикеры открываются ровно над кнопками, по центру ряда. */
.stickers { position: absolute; left: 0; right: 0; bottom: calc(100% + 14px); margin: 0 auto; z-index: 30; width: min(320px, calc(100% - 16px));
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; border-radius: var(--r-l); background: var(--panel); box-shadow: var(--panel-edge); }
.stickers button { aspect-ratio: 1; padding: 6px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--card-edge); font-size: 30px; line-height: 1; transition: var(--press); }
.stickers button:active { transform: scale(.9); }
.stickers img, .float img { width: 100%; height: 100%; object-fit: contain; display: block; }
.float { position: fixed; z-index: 60; width: 96px; height: 96px; pointer-events: none; font-size: 72px; line-height: 96px; text-align: center;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); animation: sticker 3.1s ease forwards; }
@keyframes sticker {
  0% { transform: translate(-50%, -10px) scale(.3); opacity: 0; }
  10% { transform: translate(-50%, 12px) scale(1.12); opacity: 1; }
  18%, 80% { transform: translate(-50%, 18px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, 46px) scale(.9); opacity: 0; }
}
/* Компьютер: табличка зрителей под соперником; на телефоне — кнопка с глазом. */
.spectators { display: none; }

/* ---------- кости ---------- */
.die { position: relative; width: var(--s); height: var(--s); perspective: calc(var(--s) * 5); flex-shrink: 0;
  filter: drop-shadow(0 calc(var(--s) * .1) calc(var(--s) * .08) rgba(25, 12, 4, .5)); transition: transform .1s; }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.face, .shell { position: absolute; inset: 0; }
/* Кость — белая слоновая кость со скруглёнными рёбрами, чёрные точки; единица — крупная красная, как у настоящих нардовых костей. */
.face { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 15%; border-radius: 16%; backface-visibility: hidden;
  background: radial-gradient(circle at 30% 26%, #ffffff, #faf6ee 45%, #e9e0d0 85%, #d6cab5);
  box-shadow: inset 0 0 0 1px rgba(120, 100, 75, .28), inset 0 calc(var(--s) * -.05) calc(var(--s) * .08) rgba(120, 95, 60, .25), inset 0 calc(var(--s) * .04) calc(var(--s) * .05) rgba(255, 255, 255, .9); }
.face b { width: 72%; height: 72%; place-self: center; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3634, #0b0a0a 72%); box-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.f1 b { width: 100%; height: 100%; background: radial-gradient(circle at 40% 35%, #ff4a3d, #c0100c 70%, #8c0806); }
.f1 { transform: translateZ(calc(var(--s) / 2)); }
.f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.f3 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.f2 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.f5 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

/* ---------- окна ---------- */
dialog { border: 0; padding: 0; color: var(--ink); }
.sheet { width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 18px 16px 16px; border-radius: var(--r-xl); background: var(--panel); overflow-y: auto; box-shadow: var(--panel-edge); }
.sheet[open] { display: flex; flex-direction: column; gap: 11px; animation: sheet-in .22s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes sheet-in { from { transform: translateY(16px) scale(.96); opacity: 0; } }
.sheet::backdrop { background: rgba(5, 3, 1, .62); backdrop-filter: blur(2px); }
.sheet-sm { width: min(330px, calc(100vw - 24px)); text-align: center; align-items: stretch; }
.sheet-sm > p { color: var(--ink-soft); font-size: 13px; margin-top: -4px; }
.sheet-sm > p:empty { display: none; }
#dlgOver h2, #dlgInvite h2 { font: 700 22px/1.2 var(--display); color: var(--gold-hi); }
#dlgOver[data-result=lose] h2 { color: var(--nar-hi); }
#dlgOver[data-result=win] { box-shadow: 0 0 0 1.5px rgba(227, 180, 94, .55), 0 0 40px rgba(227, 180, 94, .25), var(--panel-edge); }
.score { display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 15px var(--mono); font-variant-numeric: tabular-nums; }
.score span { color: var(--ink-soft); }
.score i { width: 0; height: 0; border: 6px solid transparent; border-left: 9px solid var(--ink-dim); border-right: 0; }
.score b { font: 700 34px/1 var(--mono); color: var(--ink); }
.score em { font-style: normal; font-size: 13px; padding: 3px 10px; border-radius: 999px; color: #eaffe9; background: var(--win-bg); }
.score em[data-sign=minus] { background: var(--nar); color: #fff3ee; }
.over-review { text-align: center; font: 600 13px var(--mono); color: var(--win); }
.over-coins { display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px var(--mono); color: var(--gold-hi); }
#maint { position: fixed; z-index: 200; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; color: var(--ink); background: rgba(10, 6, 3, .94); }
#maint b { font: 700 22px var(--display); color: var(--gold-hi); }
/* подарок всплывает посреди экрана */
#giftPop { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; pointer-events: none; }
#giftPop[hidden] { display: none; }
#giftPop img { width: min(46vw, 220px); height: min(46vw, 220px); object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); animation: gift-pop 2.4s ease both; }
#giftPop::before { content: ''; position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(227, 180, 94, .5), 0 0 40px 12px rgba(255, 210, 120, .45); animation: gift-ring 1.1s ease-out both; }
@keyframes gift-ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@keyframes gift-pop { 0% { transform: translateY(40px) scale(.3); opacity: 0; } 14% { transform: none; opacity: 1; } 22% { transform: scale(1.08); } 30%, 78% { transform: none; opacity: 1; } 100% { transform: translateY(-50px) scale(.9); opacity: 0; } }

/* «Как играть» */
.steps { display: grid; gap: 6px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 9px 10px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--card-edge); font-size: 13px; line-height: 1.5; }
.steps li::before { content: counter(step); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font: 600 12px var(--mono); color: #2a1706; background: var(--gold); }
/* «Об игре» */
.about-head { display: flex; align-items: center; gap: 12px; }
.about-head img { border-radius: var(--r-m); background: var(--card); box-shadow: var(--card-edge); padding: 4px; }
.about-head h2 { font: 700 22px var(--display); color: var(--gold-hi); }
.doc-about > p:not(.credits) { font-size: 13px; line-height: 1.55; }
.rank-table { display: grid; gap: 5px; }
.rank-table li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; font-size: 13px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--card-edge); }
.rank-table .rank b { color: var(--ink); font-weight: 700; }

#toast { position: fixed; z-index: 100; left: 50%; top: calc(var(--top) + 12px); max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: var(--r-m); text-align: center;
  font: 600 13px var(--mono); color: var(--ink); background: linear-gradient(#4a3121, #37231a); box-shadow: 0 0 0 1px rgba(227, 180, 94, .4), 0 10px 26px rgba(0, 0, 0, .5);
  transform: translate(-50%, -16px) scale(.96); opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s cubic-bezier(.2, .9, .3, 1.2); }
#toast.on { transform: translate(-50%, 0); opacity: 1; }
#banner:not([hidden]) + #toast { top: calc(var(--top) + 56px); }
#banner { position: fixed; z-index: 90; left: 0; right: 0; top: 0; padding: calc(var(--top) + 9px) 14px 9px; text-align: center; font: 600 13px var(--mono);
  color: #fff3ee; background: var(--nar); font-variant-numeric: tabular-nums; }

/* ---------- телефон: игроки и статус в одну строку ---------- */
@media (max-width: 520px) {
  .hud { gap: 5px; min-height: 58px; }   /* высота строки постоянная: текст статуса в одну или две строки ничего не сдвигает */
  .seat { max-width: 33vw; gap: 6px; padding: 4px 8px 4px 4px; border-radius: var(--r-m); }
  .seat-me { padding: 4px 4px 4px 8px; }
  .seat-avatar { width: 36px; height: 36px; border-radius: var(--r-s); }
  .seat-text b { font-size: 12px; }
  .seat .rank b { font-size: 10px; }
  .seat:has(.ai) { max-width: min(100%, 46vw); }   /* у бота «Süni intellekt» длиннее ранга */
  .status { font-size: 10px; padding: 6px 8px; gap: 4px; flex-direction: column; }
  .status time { font-size: 12px; padding: 0; border: 0; }
  .tabs { border-radius: var(--r-l); padding: 4px; }
  .tabs button { min-height: 52px; border-radius: var(--r-m); }
}
/* ---------- широкий экран в партии ---------- */
@media (min-width: 760px) {
  #game { gap: 10px; padding: 12px 18px; }
  .seat-avatar { width: 48px; height: 48px; }
  .seat-text b { font-size: 14px; }
  .status { font-size: 13px; padding: 9px 18px; }
  .status time { font-size: 14px; }
}
/* планшет стоя: тот же порядок, что на телефоне, но игроки, статус и кнопки крупнее */
@media (min-width: 600px) and (orientation: portrait) {
  .hud { gap: 12px; min-height: 80px; }
  .seat { max-width: 38vw; gap: 10px; padding: 6px 14px 6px 6px; }
  .seat-me { padding: 6px 6px 6px 14px; }
  .seat-avatar { width: 62px; height: 62px; }
  .seat-text { gap: 2px; }
  .seat-text b { font-size: 17px; }
  .seat .rank b { font-size: 13px; }
  .seat:has(.ai) { max-width: min(100%, 44vw); }
  .status { font-size: 14px; padding: 9px 16px; flex-direction: column; gap: 3px; }
  .status time { font-size: 16px; padding: 0; border: 0; }
  .actions { width: min(100%, 680px); gap: 12px; }
  .actions > button { min-height: 56px; font-size: 15px; }
  .stickers { width: min(440px, calc(100% - 16px)); gap: 8px; padding: 10px; }
}
@media (min-width: 760px) and (orientation: portrait) {
  .seat .pips { display: flex; }   /* на большом планшете хватает места и для делений ранга */
}
/* компьютер и планшет на боку: соперник слева, вы и кнопки справа — доске достаётся вся высота окна */
@media (min-width: 900px) and (min-height: 521px) and (orientation: landscape) {
  #game { grid-template: auto auto minmax(0, 1fr) / 196px minmax(0, 1fr) 196px; column-gap: 16px; row-gap: 10px; }
  .hud { display: contents; }
  .seat, .seat-me { grid-row: 1; justify-self: stretch; max-width: none; flex-direction: column; gap: 9px; padding: 8px 8px 12px; text-align: center; border-radius: var(--r-xl); }
  .seat { grid-column: 1; }
  .seat-me { grid-column: 3; flex-direction: column-reverse; padding: 12px 8px 8px; }
  /* аватар во всю ширину карточки; на невысоком окне уменьшается, чтобы кнопки и стикеры поместились */
  .seat-avatar { width: min(100%, 26vh); height: auto; aspect-ratio: 1; border-radius: var(--r-l); }
  .seat-text { justify-items: center; gap: 4px; max-width: 100%; }
  .seat-text b { font-size: 16px; }
  .seat .rank, .seat-me .rank { justify-content: center; }
  .seat .rank b { font-size: 12px; }
  .seat .pips { display: flex; }
  .status { grid-column: 3; grid-row: 2; justify-self: stretch; flex-direction: column; justify-content: center; gap: 5px; padding: 10px; min-height: 74px; font-size: 13px; }
  .status time { padding: 0; border: 0; font-size: 16px; }
  #stage { grid-column: 2; grid-row: 1 / -1; }
  .actions { grid-column: 3; grid-row: 3; flex-direction: column; justify-content: flex-start; width: auto; margin: 0; gap: 10px; }
  .actions > button { flex: 0 0 auto; min-height: 48px; font-size: 13px; }
  #btnStickers, .actions > #btnResign { flex: 0 0 auto; }
  #btnWatchers, .watch-list { display: none !important; }
  .spectators { grid-column: 1; grid-row: 2 / -1; align-self: stretch; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; overflow-y: auto;
    border-radius: var(--r-xl); background: var(--panel); box-shadow: var(--panel-edge); }
  .spectators h3 { display: flex; align-items: center; gap: 7px; margin: 0; padding-bottom: 7px; border-bottom: 1px solid var(--line); font: 600 12px var(--display); color: var(--gold-hi); text-transform: none; letter-spacing: .02em; }
  .spectators h3 svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .spectators h3 span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spectators h3 b { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--well); }
  .spectators ul { display: grid; gap: 4px; }
  .spectators li { padding: 7px 10px; border-radius: var(--r-s); font: 600 13px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--card); animation: rise .25s ease-out; }
  .spectators-none { font-size: 12px; color: var(--ink-soft); }
  /* стикеры раскрываются под кнопками и занимают всё свободное место колонки до низа: сетка 3 × 4, ячейки одного размера */
  .actions { align-self: stretch; min-height: 0; }
  .stickers { position: static; flex: 1 1 auto; min-height: 0; width: auto; max-height: 520px; margin: 0; padding: 8px; gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .stickers button { aspect-ratio: auto; min-width: 0; min-height: 0; padding: 6px; display: grid; place-items: center; }
  .stickers img { width: 100%; height: 100%; max-width: 64px; max-height: 64px; }
}
/* телефон на боку: игроки и кнопки уходят по сторонам, доска занимает всю высоту */
@media (max-height: 520px) and (orientation: landscape) {
  #game { grid-template: auto auto minmax(0, 1fr) / 160px minmax(0, 1fr) 160px; column-gap: 10px; row-gap: 7px; }
  .hud { display: contents; }
  .seat { grid-column: 1; grid-row: 1; justify-self: stretch; max-width: none; }
  .seat-me { grid-column: 3; grid-row: 1; justify-self: stretch; justify-content: flex-end; }
  .status { grid-column: 1; grid-row: 2; justify-self: stretch; flex-direction: row; justify-content: center; }
  #stage { grid-column: 2; grid-row: 1 / -1; }
  .actions { grid-column: 3; grid-row: 2 / -1; flex-direction: column; justify-content: flex-start; width: auto; margin: 0; }
  .actions > button, #btnStickers, .actions > #btnResign { flex: 0 0 auto; }
  .stickers { left: auto; right: calc(100% + 14px); bottom: 0; margin: 0; width: 280px; }
}
/* невысокий экран: убираем второстепенное, чтобы всё помещалось без прокрутки */
@media (max-height: 640px) {
  .lead { display: none; }
  .panel { padding: 10px 12px; gap: 8px; }
  .view { gap: 8px; }
  .btn-xl { min-height: 52px; }
}
/* узкий телефон (до 380 px) и самый узкий (320 px): всё сжимается, но помещается целиком */
@media (max-width: 380px) {
  .seat { max-width: 35vw; }
  .seat .rank b { font-size: 9px; letter-spacing: -.2px; }
  .panel { padding: 10px; gap: 9px; }
  .stats dd { font-size: 15px; }
  .stats dt { font-size: 9px; }
  .avatars { gap: 4px; }
  .pcard { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .pic, .profile-avatar { width: 76px; height: 76px; }
  .pcard-id h2 { font-size: 19px; }
  .amounts { gap: 4px; }
  .wordmark-sm { font-size: 19px; }
}
@media (max-width: 350px) {
  .btn { font-size: 13px; padding-inline: 10px; } .btn-xl { font-size: 15px; }
  .actions { gap: 6px; }
  .actions > button, .seg button { font-size: 11px; }
  #btnMute, #btnWatchers { flex-basis: 48px; }
  .stats > div { padding: 0 2px; }
  .chat li:not(.empty) { padding: 9px 10px; }
  .chat p { font-size: 14px; }
  .row-btn { grid-template-columns: 36px minmax(0, 1fr) auto 40px; column-gap: 8px; }
  .row-pic, .row-avatar { width: 36px; height: 36px; }
  .pt-row { grid-template-columns: 22px 36px minmax(0, 1fr) 48px 56px; column-gap: 6px; padding: 0 6px; }
  .row-pic .lamp { width: 10px; height: 10px; }
  .tabs svg { width: 27px; height: 27px; }
  .tabs .tab-dice { width: 40px; height: 36px; }
  .share-bar { gap: 6px; }
}
/* Большой сенсорный экран (планшет, сенсорный телевизор): строки и кнопки крупнее, чтобы попадать пальцем издалека. */
@media (pointer: coarse) and (min-width: 1100px) {
  .row-btn { min-height: 62px; } .feed li:not(.empty) { min-height: 48px; }
  .btn { min-height: 54px; font-size: 15px; } .seg button { min-height: 44px; font-size: 14px; }
  .chat p { font-size: 16px; }
}
/* Телевизор и большой монитор (от 1800 px): всё чуть крупнее, чтобы читалось с дивана. */
@media (min-width: 1800px) and (min-height: 950px) {
  body { font-size: 15px; }
  .btn { min-height: 54px; font-size: 15px; } .btn-xl { min-height: 64px; font-size: 19px; }
  .fold { min-height: 56px; font-size: 15px; }
  .row-btn { min-height: 62px; } .row-who b, .pt-who b { font-size: 15px; }
  .chat p { font-size: 16px; }
  .stats dd { font-size: 19px; }
}
/* Лёгкая графика: без анимаций, свечений и больших теней. Включается сама на слабых устройствах и при «уменьшить движение» в системе. */
.lite *, .lite *::before, .lite *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.lite .panel, .lite #table, .lite .hero-board, .lite .sheet, .lite .spectators, .lite .tabs { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.lite .shop-grid .gift-card img { filter: none; }
.lite .coin::after, .lite .notice span { animation: none !important; }
.lite .notice span { padding-left: 0; white-space: normal; }
.lite .notice { white-space: normal; padding: 8px 10px; -webkit-mask-image: none; mask-image: none; }
.lite .row-gift { filter: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* страницы /az /ru /en внутри игры: без кнопки «Играть» и большой картинки — игра и так открыта */
#pageBody .cta, #pageBody .shot, #pageBody .shots, #pageBody .gallery, #pageBody .top, #pageBody .langs { display: none; }
#pageBody details { margin: 6px 0; padding: 9px 11px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--card-edge); }
#pageBody summary { cursor: pointer; font-weight: 700; }
#pageBody .author { color: var(--ink-soft); font-style: italic; }
#pageBody img { display: block; width: 100%; height: auto; border-radius: var(--r-m); background: var(--well); }

/* =====================================================================
   21.0 — КАЗУАЛЬНОЕ ДЕРЕВО
   Всё ниже поверх прежних правил: доски, камень, самоцветы и бумага.
   ===================================================================== */

/* ---------- фон меню: время года ---------- */
#scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #6c9ad6; }
.scene-img { position: absolute; inset: 0; background: var(--scene, none) center 72% / cover no-repeat; }
body[data-season=winter] #scene { background: #9cc0e8; }
body[data-season=autumn] #scene { background: #f0973a; }
body[data-season=summer] #scene { background: #3d7bb0; }
body[data-season=spring] #scene { background: #3c8ee0; }
body[data-screen=game] #scene { display: none; }   /* в партии — только доска */
body:not([data-screen=game]) { background: var(--bg); }
.screen { z-index: 1; }

/* ---------- панели: доски с каменными уголками ---------- */
.panel, .sheet { background: var(--panel); box-shadow: var(--panel-edge); border-radius: var(--r-xl); text-shadow: var(--ts); }
.panel { padding: 16px 14px; }
.sheet::backdrop { background: rgba(20, 8, 2, .55); backdrop-filter: blur(3px); }
h2 { color: #fff; text-shadow: var(--ts-big); letter-spacing: .02em; }
h3 { color: var(--gold-hi); text-shadow: var(--ts); }
.wordmark { color: #ffe27a; text-shadow: var(--ts-big), 0 0 22px rgba(255, 200, 80, .35); font-weight: 700; }
.lead, .note, small, .credits, .copy, .links a, .link { text-shadow: var(--ts); }
.link { color: var(--gold-hi); }
@media (max-width: 520px) { .panel { padding: 14px 12px; border-radius: var(--r-l); } }
.case { gap: 12px; }
@media (min-width: 1100px) { .trio { padding: 6px; gap: 18px !important; width: min(100%, 2000px) !important; } }

/* ---------- бумага: светлые карточки с тёмным текстом ---------- */
.chat li:not(.empty), .box .feed, .box .list, .ptable, .gtable, .pcard, .rank-table li, .steps li, .stats-more > div, #pageBody details, .gift-card, .gifts li:not(.empty) {
  --ink: var(--paper-ink); --ink-soft: #e2c299; --ink-dim: #c09a72; --line: rgba(255, 220, 170, .16); --tint: rgba(255, 210, 140, .14); --soft: rgba(255, 210, 140, .07);
  color: var(--ink); text-shadow: var(--ts);
}
.box .feed, .box .list, .ptable, .gtable { background: linear-gradient(var(--paper), var(--paper-2)); border-radius: var(--r-m); padding: 2px 6px;
  box-shadow: 0 0 0 2.5px var(--outline), inset 0 -3px 0 rgba(150, 90, 40, .25), 0 3px 0 rgba(40, 14, 3, .5); }
.box .feed .empty, .box .list .empty { color: var(--ink-soft); }
.feed li:not(.empty) { border-bottom: 1.5px dashed var(--line); }
.feed li:last-child, .list > li:last-child .row-btn { border-bottom: 0; }
.row-btn { border-bottom: 1.5px dashed var(--line); }
.tags em { border: 1.5px solid rgba(0, 0, 0, .25); }
.duo i { color: var(--ink-dim); }
.game-meta time { color: #2e8a12; }
.row-who .st-play { color: #c46a00; } .row-who .st-search, .row-who .st-on { color: #2e8a12; } .row-who .st-away { color: #b88400; }
.feed li[data-watch] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5a33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5S21.5 12 21.5 12s-3.5 6.5-9.5 6.5S2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E"); }

/* ---------- заголовки разделов: самоцветные таблички ---------- */
.fold { --gem: #2fa8f0; --gem-hi: #7fd8ff; --gem-lo: #1a6fc4; --gem-edge: #0d3e7a;
  min-height: 46px; color: #fff; text-shadow: var(--ts-big); font: 700 15px/1.1 var(--display); letter-spacing: .03em;
  background: linear-gradient(var(--gem-hi), var(--gem) 48%, var(--gem-lo) 52%, var(--gem-lo));
  box-shadow: 0 0 0 2.5px var(--gem-edge), inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 4px 0 var(--gem-edge); border-radius: var(--r-m); }
.box-games .fold { --gem: #49c42a; --gem-hi: #a6f06b; --gem-lo: #2f9a18; --gem-edge: #18530a; }
.box-results .fold { --gem: #ff9a1f; --gem-hi: #ffd166; --gem-lo: #e0700a; --gem-edge: #7a3a03; }
.box-players .fold { --gem: #c447e8; --gem-hi: #ec9cff; --gem-lo: #9327bf; --gem-edge: #4d0d68; }
.fold-n { color: var(--outline); background: #fff3c4; text-shadow: none; box-shadow: inset 0 -2px 0 rgba(150, 90, 0, .3), 0 0 0 1.5px rgba(0, 0, 0, .25); font-weight: 700; }
.fold svg { stroke: #fff; filter: drop-shadow(0 1px 0 var(--outline)); }
.box > h2 { margin-bottom: 6px; }
.box { gap: 8px; }
.pane-head h2 { font-size: 18px; }

/* ---------- кнопки-самоцветы ---------- */
.btn { --gem: #3fb5ff; --gem-hi: #8fdcff; --gem-lo: #1a7fe0; --gem-edge: #0c3a78;
  font: 700 15px/1.15 var(--display); letter-spacing: .02em; color: #fff; text-shadow: var(--ts-big); border-radius: var(--r-m);
  background: linear-gradient(var(--gem-hi), var(--gem) 46%, var(--gem-lo) 54%, var(--gem-lo));
  box-shadow: 0 0 0 3px var(--outline), inset 0 0 0 1.5px var(--gem-edge), inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(0, 0, 0, .16), 0 5px 0 var(--outline), 0 9px 12px rgba(0, 0, 0, .3); }
.btn-dark { --gem: #58c92a; --gem-hi: #b2f56b; --gem-lo: #36a114; --gem-edge: #1b5b07; color: #fff; text-shadow: var(--ts-big); }
.btn-ivory { --gem: #3fb5ff; --gem-hi: #8fdcff; --gem-lo: #1a7fe0; --gem-edge: #0c3a78; color: #fff; }
.btn-nar { --gem: #f04a3c; --gem-hi: #ff9a7e; --gem-lo: #c8231a; --gem-edge: #620c06; color: #fff; }
.btn-buy, .btn-leaf { --gem: #ffbe1f; --gem-hi: #ffe680; --gem-lo: #f08f05; --gem-edge: #7a3d00; color: #fff; }
.btn-gift { --gem: #e65bd6; --gem-hi: #ffadf2; --gem-lo: #b82fae; --gem-edge: #5a0d55; color: #fff; }
.btn-coins { --gem: #ffbe1f; --gem-hi: #ffe680; --gem-lo: #f08f05; --gem-edge: #7a3d00; color: #fff; }
.btn-gift, .btn-coins { box-shadow: 0 0 0 3px var(--outline), inset 0 0 0 1.5px var(--gem-edge), inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(0, 0, 0, .16), 0 5px 0 var(--outline), 0 9px 12px rgba(0, 0, 0, .3); }
.btn.down:not(:disabled), .btn:active:not(:disabled), .btn-dark.down:not(:disabled), .btn-dark:active:not(:disabled), .btn-ivory.down:not(:disabled), .btn-ivory:active:not(:disabled),
.btn-nar.down:not(:disabled), .btn-nar:active:not(:disabled), .btn-leaf.down:not(:disabled), .btn-leaf:active:not(:disabled), .btn-buy.down:not(:disabled), .btn-buy:active:not(:disabled),
.btn-gift.down:not(:disabled), .btn-gift:active:not(:disabled), .btn-coins.down:not(:disabled), .btn-coins:active:not(:disabled) {
  transform: translateY(5px); box-shadow: 0 0 0 3px var(--outline), inset 0 0 0 1.5px var(--gem-edge), inset 0 3px 0 rgba(255, 255, 255, .35), 0 0 0 var(--outline), 0 3px 6px rgba(0, 0, 0, .3); }
.btn:disabled { filter: saturate(.25) brightness(.85); opacity: .7; }
.btn-dark[aria-pressed=true] { --gem: #ff9a1f; --gem-hi: #ffd166; --gem-lo: #e0700a; --gem-edge: #7a3a03; color: #fff; }   /* идёт поиск */
.btn-xl { min-height: 64px; font-size: 20px; }
.btn-xl small { font: 600 11px var(--mono); text-shadow: var(--ts); }
.btn-gift svg { display: none; }
.btn-gift::before, .btn-coins .coin { content: ''; width: 26px; height: 26px; flex-shrink: 0; background: url(/ui/gift.webp) center / contain no-repeat; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.btn-coins .coin { background-image: url(/ui/coin.webp); box-shadow: none; }
.btn-all { min-height: 44px; font-size: 13px; margin-top: 8px; }
.app-btn { box-shadow: 0 0 0 3px var(--outline), inset 0 3px 0 rgba(255, 255, 255, .35), 0 5px 0 var(--outline) !important; }
.app-btn.done, .app-btn.done:disabled { box-shadow: var(--inset) !important; }

/* круглые кнопки-значки: деревянная пуговица, нажатая — золотая */
.icon-btn, .share-btn, .mute-sm, .pager button, .amt { color: #fff6e6; text-shadow: var(--ts);
  background: radial-gradient(circle at 50% 30%, #c87442, #8a4220 70%, #6b3015);
  box-shadow: 0 0 0 2.5px var(--outline), inset 0 2px 0 rgba(255, 210, 160, .55), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 4px 0 var(--outline); }
.icon-btn:active:not(:disabled), .share-btn:active, .mute-sm:active, .pager button:active:not(:disabled), .amt:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 2.5px var(--outline), inset 0 2px 0 rgba(255, 210, 160, .4), 0 0 0 var(--outline); }
.icon-btn.send { color: #fff; background: linear-gradient(#b2f56b, #58c92a 46%, #36a114 54%); box-shadow: 0 0 0 2.5px var(--outline), inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--outline); }
.icon-btn.send svg { filter: drop-shadow(0 1px 0 var(--outline)); }
.share-btn svg, .icon-btn svg, .mute svg { filter: drop-shadow(0 1.5px 0 rgba(40, 14, 3, .8)); }
.pager button.on, .amt.on { color: var(--outline); text-shadow: none; background: linear-gradient(#ffe680, #ffbe1f 50%, #f08f05 52%); box-shadow: 0 0 0 2.5px var(--outline), inset 0 2px 0 rgba(255, 255, 255, .55), 0 4px 0 var(--outline); }
.pager span { color: var(--ink-soft); }

/* переключатели: углубление, выбранное — золотая плитка */
.seg { background: var(--well); box-shadow: var(--inset); border-radius: var(--r-m); }
.seg button { color: var(--ink-soft); font-weight: 700; }
.seg button.on { color: var(--outline); text-shadow: none; background: linear-gradient(#ffe680, #ffbe1f 50%, #f08f05 52%); box-shadow: 0 0 0 2px var(--outline), inset 0 2px 0 rgba(255, 255, 255, .55), 0 3px 0 var(--outline); }
.opt-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 10px; font: 600 13px var(--mono); }

/* поля ввода — бумага */
.field input, .chat-form .chat-input, .search, .lock input, .del-box input, .adm-field {
  color: var(--paper-ink); background: linear-gradient(#fffaf0, var(--paper)); border: 0; text-shadow: none;
  box-shadow: 0 0 0 2.5px var(--outline), inset 0 3px 4px rgba(120, 70, 30, .28); }
.field input:focus, .chat-form .chat-input:focus, .search:focus, .lock input:focus, .del-box input:focus { box-shadow: 0 0 0 2.5px var(--outline), 0 0 0 5px rgba(255, 197, 49, .6), inset 0 3px 4px rgba(120, 70, 30, .28); }
.chat-input:empty::before { color: #a9805a; }
.field > span { color: var(--gold-hi); text-shadow: var(--ts); }
.field small.bad { color: #ffd0c8; }
#volume::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--gold) var(--fill, 50%), var(--well) var(--fill, 50%)); box-shadow: 0 0 0 2px var(--outline), var(--inset); }
#volume::-webkit-slider-thumb { background: radial-gradient(circle at 40% 30%, #ff9a7e, #e8413b 60%, #a3170f); box-shadow: 0 0 0 2.5px var(--outline), 0 3px 0 var(--outline); }

/* ---------- монеты и лампочки ---------- */
.coin { width: 26px; height: 26px; border-radius: 50%; background: url(/ui/coin.webp) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 2px 0 rgba(40, 14, 3, .6)); overflow: visible; }
.coin::after { inset: 0; border-radius: 50%; overflow: hidden; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .8) 50%, transparent 60%); -webkit-mask: url(/ui/coin.webp) center / contain no-repeat; mask: url(/ui/coin.webp) center / contain no-repeat; }
.coins { color: #ffe27a; background: linear-gradient(#5a2a14, #3d1b0c); box-shadow: 0 0 0 2.5px var(--outline), inset 0 2px 4px rgba(0, 0, 0, .5); padding: 0 12px 0 0; font: 700 16px var(--display); text-shadow: var(--ts); }
.coins .coin { margin-left: -6px; width: 32px; height: 32px; }
.coin-big { background: url(/ui/coin.webp) center / contain no-repeat; box-shadow: none; }
.lamp { box-shadow: 0 0 0 2px var(--outline); }
.lamp.on { background: radial-gradient(circle at 38% 32%, #f0ffe0, #6be04a 45%, #2a9a12); box-shadow: 0 0 0 2px var(--outline), 0 0 8px rgba(107, 224, 74, .7); }
.lamp.away { background: radial-gradient(circle at 38% 32%, #fffbe0, #ffc531 45%, #d08a00); box-shadow: 0 0 0 2px var(--outline), 0 0 8px rgba(255, 197, 49, .7); }
.row-pic .lamp { outline: 0; }
.online-pill { color: var(--ink); background: var(--well); box-shadow: var(--inset); text-shadow: var(--ts); }

/* ---------- карточка игрока в меню ---------- */

.pcard .rank b { color: var(--ink-soft); }
.bar { background: #e2c597; box-shadow: inset 0 2px 3px rgba(110, 60, 20, .35), 0 0 0 2px var(--outline); height: 10px; border-radius: 6px; }
.bar i { background: linear-gradient(#b2f56b, #58c92a 50%, #36a114); border-radius: 6px; }
.pips i { background: rgba(110, 60, 25, .2); }
.panel .pips i:not(.on) { background: rgba(255, 230, 190, .2); }
.pcard .pips i:not(.on), .box .pips i:not(.on), .ptable .pips i:not(.on) { background: rgba(110, 60, 25, .2); }
.pips i.on { background: linear-gradient(#ffe680, #ffbe1f 50%, #e08a05); box-shadow: 0 0 0 1px rgba(90, 40, 0, .5); }
.stats { border-top: 1.5px dashed var(--line); }
.stats > div { border-left: 1.5px dashed var(--line); }
.stats dd { font: 700 19px/1.2 var(--display); color: var(--paper-ink); }
.stats dt { color: var(--ink-soft); font-weight: 600; }
#view-profile .stats dd, #view-profile .stats dt { color: var(--ink); }
.stats-more > div { background: linear-gradient(var(--paper), var(--paper-2)); box-shadow: 0 0 0 2px var(--outline), 0 3px 0 rgba(40, 14, 3, .5); }
.stats-more dd { color: var(--paper-ink); }
.stats-more dt { color: #8b5a33; }
.pcard { background: linear-gradient(var(--paper), var(--paper-2)); box-shadow: 0 0 0 3px var(--outline), 0 4px 0 rgba(40, 14, 3, .55); }
.pcard-id h2 { color: var(--paper-ink); text-shadow: none; font-family: var(--display); }
.profile-avatar { border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--outline) !important; background: #ffe6b8; }
.pid { color: var(--outline); background: #fff3c4; box-shadow: 0 0 0 2px var(--outline); text-shadow: none; }

/* окно в мир: доска лежит на картинке времени года (на телефоне фон за панелью не виден) */
#heroPlay { border-radius: var(--r-l); background: var(--scene) center 72% / cover no-repeat, #6c9ad6; box-shadow: 0 0 0 3px var(--outline), inset 0 0 0 3px rgba(255, 255, 255, .25), inset 0 -40px 60px rgba(0, 0, 0, .15); overflow: hidden; }
#heroPlay .hero-board { box-shadow: 0 0 0 2px var(--outline), 0 12px 18px rgba(0, 0, 0, .45); }
#loginPanel .hero { border-radius: var(--r-l); background: var(--scene) center 72% / cover no-repeat, #6c9ad6; box-shadow: 0 0 0 3px var(--outline), inset 0 0 0 3px rgba(255, 255, 255, .25); overflow: hidden; }
#loginPanel .hero-board { box-shadow: 0 0 0 2px var(--outline), 0 12px 18px rgba(0, 0, 0, .45); }

/* ---------- чат: бумажные записки ---------- */
.chat { border-top: 0; padding: 6px 4px; gap: 8px; }
.chat li:not(.empty) { background: linear-gradient(var(--paper), var(--paper-2)); box-shadow: 0 0 0 2px var(--outline), 0 3px 0 rgba(40, 14, 3, .5); border-radius: var(--r-m); }
.chat li.mine { background: linear-gradient(#efffd9, #d9f2b5); }
.chat li.ping { background: linear-gradient(#fff6c4, #ffe28a); box-shadow: 0 0 0 2px var(--outline), inset 4px 0 0 #ff9a1f, 0 3px 0 rgba(40, 14, 3, .5); }
.chat li.gift { background: linear-gradient(#ffeefc, #f8d3f2); box-shadow: 0 0 0 2px var(--outline), 0 3px 0 rgba(40, 14, 3, .5); }
.chat .who { color: #c4560a; }
.chat li.gift p span { color: #9a1f8f; }
.chat-link { color: #c4560a; }
.chat-pin { color: var(--paper-ink); background: linear-gradient(#fff6c4, #ffe28a); box-shadow: 0 0 0 2px var(--outline), inset 4px 0 0 #ff9a1f; text-shadow: none; }
.chat-pin p b { color: #c4560a; }
.typing { color: var(--gold-hi); }

/* ---------- магазин и подарки ---------- */
.gift-card, .gifts li:not(.empty) { background: linear-gradient(var(--paper), var(--paper-2)) !important; box-shadow: 0 0 0 2px var(--outline), 0 3px 0 rgba(40, 14, 3, .5); }
.gift-card.on, .shop-grid .gift-card.on { background: linear-gradient(#fff6c4, #ffd65a) !important; box-shadow: 0 0 0 2.5px var(--outline), 0 0 0 5px #ffc531, 0 3px 0 rgba(40, 14, 3, .5); }
.gift-card small, .shop-grid .gift-card small { color: #7a3d00; }
.shop-grid .gift-card small { background: #ffe680; box-shadow: 0 0 0 1.5px rgba(122, 61, 0, .5); }
.shop-grid .gift-card small::before { width: 14px; height: 14px; background: url(/ui/coin.webp) center / contain no-repeat; }
.gift-card .have { background: #58c92a; color: #fff; text-shadow: 0 1px 0 #1b5b07; box-shadow: 0 0 0 1.5px var(--outline); }
.shop-buy { background: var(--card); box-shadow: var(--card-edge); }
.shop-buy.idle { background: var(--well); }
.shop, .del-box, .pin-box { background: rgba(40, 14, 3, .45); box-shadow: var(--inset); }
.gifts-head b { color: var(--outline); background: #fff3c4; text-shadow: none; box-shadow: 0 0 0 2px var(--outline); }

/* ---------- выбор аватара ---------- */
.avatars { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.avatars button { border-radius: 50%; background: #ffe6b8; box-shadow: 0 0 0 2.5px var(--outline), 0 3px 0 var(--outline); overflow: hidden; position: relative; }
.avatars button.on { box-shadow: 0 0 0 2.5px var(--outline), 0 0 0 5.5px var(--gold), 0 3px 0 var(--outline); }
.avatars img { border-radius: 50%; }

/* ---------- нижняя панель: деревянная полка с пуговицами ---------- */
.tabs { background: var(--panel-flat); box-shadow: var(--panel-edge); border-radius: var(--r-xl); padding: 8px; gap: 6px; }
.tabs button { min-height: 58px; border-radius: 50%; aspect-ratio: 1; max-height: 62px; justify-self: center; width: min(100%, 62px);
  background: radial-gradient(circle at 50% 30%, #c87442, #8a4220 70%, #6b3015);
  box-shadow: 0 0 0 2.5px var(--outline), inset 0 2px 0 rgba(255, 210, 160, .55), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 4px 0 var(--outline); }
.tabs svg { stroke: #fff6e6; opacity: 1; stroke-width: 2.3; filter: drop-shadow(0 1.5px 0 rgba(40, 14, 3, .9)); width: 30px; height: 30px; }
.tabs button.on { background: linear-gradient(#ffe680, #ffbe1f 50%, #f08f05 52%); box-shadow: 0 0 0 2.5px var(--outline), inset 0 2px 0 rgba(255, 255, 255, .6), 0 4px 0 var(--outline), 0 0 16px rgba(255, 197, 49, .55); transform: translateY(-3px); }
.tabs button.on svg { stroke: var(--outline); filter: none; transform: none; }
.tabs button.on::before { display: none; }
.tabs button:active { transform: translateY(2px) scale(.95); }
.tab-badge, .badge { box-shadow: 0 0 0 2px var(--outline); background: var(--nar); font-weight: 700; top: -2px; }

/* ---------- партия ---------- */
.seat, .status, .spectators, .watch-list, .stickers { background: var(--panel-flat); box-shadow: var(--panel-edge); text-shadow: var(--ts); }
.seat { border-radius: var(--r-l); }
.seat-avatar { border-radius: 50%; background: #ffe6b8; box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--outline); }
.seat.turn { box-shadow: 0 0 0 3px var(--outline), 0 0 0 6px var(--gold), 0 0 22px rgba(255, 197, 49, .6), 0 6px 0 #2a0f04; }
.seat-st { display: block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font: 700 10.5px var(--mono); color: var(--outline); background: #ffe680; text-shadow: none; box-shadow: 0 0 0 1.5px var(--outline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-self: start; }
.seat-st[data-st=off] { background: #ff9a7e; color: #fff; text-shadow: 0 1px 0 var(--nar-edge); }
.seat-me .seat-st { justify-self: end; }
.seat.talking .seat-avatar { animation: talk .6s ease-in-out infinite; box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px #58c92a, 0 0 18px #6be04a; }
@keyframes talk { 50% { transform: scale(1.07); } }
.status.mine { color: #fff; text-shadow: var(--ts-big); background: linear-gradient(#b2f56b, #58c92a 46%, #36a114 54%); box-shadow: 0 0 0 3px var(--outline), inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--outline), 0 0 18px rgba(107, 224, 74, .5); }
.status.hurry { color: #fff; text-shadow: var(--ts-big); background: linear-gradient(#ff9a7e, #f04a3c 46%, #c8231a 54%); box-shadow: 0 0 0 3px var(--outline), inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--outline), 0 0 18px rgba(240, 74, 60, .5); }
#table { border-radius: 14px; box-shadow: 0 0 0 3px var(--outline), 0 18px 40px rgba(0, 0, 0, .65); }
.actions > button { color: #fff; font: 700 13px var(--display); text-shadow: var(--ts-big);
  background: linear-gradient(#8fdcff, #3fb5ff 46%, #1a7fe0 54%); box-shadow: 0 0 0 2.5px var(--outline), inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--outline); }
.actions > #btnResign { background: linear-gradient(#ff9a7e, #f04a3c 46%, #c8231a 54%); box-shadow: 0 0 0 2.5px var(--outline), inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--outline); }
.actions > #btnMute, .actions > #btnWatchers { background: radial-gradient(circle at 50% 30%, #c87442, #8a4220 70%, #6b3015); }
.actions > button:active { transform: translateY(4px); box-shadow: 0 0 0 2.5px var(--outline), inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 0 var(--outline); }
.stickers button { background: linear-gradient(var(--paper), var(--paper-2)); box-shadow: 0 0 0 2px var(--outline), 0 3px 0 rgba(40, 14, 3, .5); }
.spectators li { background: var(--card); box-shadow: var(--card-edge); }
.spectators h3 b { background: var(--well); }

/* рация: держите, пока говорите */
.actions > .talk { position: relative; flex: 1.2 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(#b2f56b, #58c92a 46%, #36a114 54%); }
.talk svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; filter: drop-shadow(0 1.5px 0 var(--outline)); }
.talk time { font: 700 12px var(--mono); color: #fff; }
.talk time:empty { display: none; }
.actions > .talk.rec { background: linear-gradient(#ff9a7e, #f04a3c 46%, #c8231a 54%); transform: translateY(4px);
  box-shadow: 0 0 0 2.5px var(--outline), 0 0 0 calc(2.5px + var(--lvl, 0) * 9px) rgba(255, 106, 92, .45), 0 0 0 var(--outline); }
.actions > .talk.rec span { display: none; }

/* ---------- окна и подсказки ---------- */
#dlgOver h2, #dlgInvite h2 { color: #ffe27a; text-shadow: var(--ts-big); font-size: 26px; }
#dlgOver[data-result=lose] h2 { color: #ffb0a6; }
#dlgOver[data-result=win] { box-shadow: var(--panel-edge), 0 0 0 7px var(--gold), 0 0 50px rgba(255, 197, 49, .45); }
.score b { color: #fff; text-shadow: var(--ts-big); font-family: var(--display); }
.score em { box-shadow: 0 0 0 1.5px var(--outline); }
.over-review { color: #c4ff9e; }
.over-coins { color: #ffe27a; }
#toast { color: var(--paper-ink); background: linear-gradient(var(--paper), var(--paper-2)); box-shadow: 0 0 0 2.5px var(--outline), 0 4px 0 rgba(40, 14, 3, .5), 0 12px 26px rgba(0, 0, 0, .4); font-weight: 700; }
#banner { box-shadow: 0 3px 0 var(--outline); text-shadow: var(--ts); }
.notice { color: var(--outline); background: linear-gradient(#ffe680, #ffc531); box-shadow: 0 0 0 2.5px var(--outline); text-shadow: none; }
#maint { background: rgba(30, 12, 3, .94); }
.steps li::before { color: #fff; background: #ff9a1f; box-shadow: 0 0 0 2px var(--outline); text-shadow: 0 1px 0 var(--outline); }
.rank-table li, .steps li { background: linear-gradient(var(--paper), var(--paper-2)); box-shadow: 0 0 0 2px var(--outline), 0 3px 0 rgba(40, 14, 3, .5); }
.doc h1, .doc h2, .about-head h2 { color: #ffe27a; text-shadow: var(--ts-big); }
.doc a { color: #ffe27a; }
#pageBody details { background: linear-gradient(var(--paper), var(--paper-2)); box-shadow: 0 0 0 2px var(--outline); }

/* подарок и монеты — крупно посреди экрана: лучи, кольцо и дождь монет */
#giftPop::after { content: ''; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(rgba(255, 230, 120, .28) 0 10deg, rgba(255, 230, 120, 0) 10deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent);
  animation: rays 2.4s linear both; }
@keyframes rays { from { transform: rotate(0) scale(.4); opacity: 0; } 15% { opacity: 1; transform: rotate(20deg) scale(1); } 80% { opacity: 1; } to { transform: rotate(90deg) scale(1.05); opacity: 0; } }
.coin-fly { position: fixed; z-index: 95; width: 34px; height: 34px; pointer-events: none; background: url(/ui/coin.webp) center / contain no-repeat; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4)); }

/* ---------- лёгкая графика ---------- */
.lite .panel, .lite .sheet, .lite .tabs { box-shadow: 0 0 0 3px var(--outline); }
/* поправки 21.0 */
.coin { overflow: hidden; }
.coin::after { -webkit-mask: none; mask: none; }
.chat { background: rgba(40, 14, 3, .38); border-radius: var(--r-m); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 214, 160, .35); padding: 8px; }
.chat .empty { color: var(--ink-soft); text-shadow: var(--ts); }
#paneChat .pane-head, #view-shop > .pane-head, #view-settings > .pane-head, #view-players > .pane-head, #view-games > .pane-head, #view-profile > .pane-head {
  --gem: #2fa8f0; --gem-hi: #7fd8ff; --gem-lo: #1a6fc4; --gem-edge: #0d3e7a; padding: 4px 6px 4px 12px; min-height: 46px; border-radius: var(--r-m);
  background: linear-gradient(var(--gem-hi), var(--gem) 48%, var(--gem-lo) 52%, var(--gem-lo));
  box-shadow: 0 0 0 2.5px var(--gem-edge), inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 4px 0 var(--gem-edge); margin-bottom: 4px; }
.pane-head .link { color: #fff; text-shadow: var(--ts-big); font: 700 13px var(--display); text-decoration: none; }
.chat-fold { color: #fff; }
.chat-fold svg { filter: drop-shadow(0 1px 0 var(--outline)); }
#paneChat .online-pill { background: rgba(10, 40, 90, .45); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
.row-avatar { border-radius: 50%; box-shadow: 0 0 0 2px var(--outline); background: #ffe6b8; }
.row-pic .lamp { left: -2px; top: -2px; }
.wordmark-sm { font-size: 24px; }
.hero { margin: 0; }
/* кость отбрасывает мягкую тень на доску: пока летит — тень меньше и бледнее */
#dice .die::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -14%; height: 22%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(30, 12, 3, .45), rgba(30, 12, 3, 0)); }
.face { background: radial-gradient(circle at 30% 24%, #ffffff, #fbf7ef 40%, #ece2cf 80%, #d9cab0); }
.face b { box-shadow: inset 0 calc(var(--s) * .02) calc(var(--s) * .03) rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .8); }
@media (min-width: 900px) and (min-height: 521px) and (orientation: landscape) { .actions > .talk { flex: 0 0 auto; min-height: 64px; font-size: 15px; } .talk svg { width: 26px; height: 26px; } }
@media (max-height: 520px) and (orientation: landscape) { .actions > .talk { flex: 0 0 auto; } }
@media (max-width: 430px) { .actions { gap: 6px; } .actions > button { font-size: 11px; padding: 4px 5px; } .talk svg { width: 19px; height: 19px; } }

/* =====================================================================
   21.1 — ДЕРЕВО, КАК В ОРИГИНАЛЕ, ЧУТЬ СВЕТЛЕЕ
   Цвета только из дерева, латуни и граната — без синих, зелёных и розовых табличек. Объём (обводка, кромка, блик) остаётся.
   ===================================================================== */
/* таблички разделов и шапки — светлый дуб с латунной кромкой */
.fold, .box-games .fold, .box-results .fold, .box-players .fold,
#paneChat .pane-head, .info-head, #view-shop > .pane-head, #view-settings > .pane-head, #view-players > .pane-head, #view-games > .pane-head, #view-profile > .pane-head {
  --gem: #8a5b36; --gem-hi: #b9895a; --gem-lo: #6e4527; --gem-edge: #1f1109;
  background: linear-gradient(rgba(255, 225, 170, .18), rgba(255, 225, 170, 0) 50%, rgba(0, 0, 0, .12) 51%), var(--walnut) center / 600px auto, #7a5233;
  box-shadow: 0 0 0 2.5px var(--outline), inset 0 0 0 1.5px rgba(227, 180, 94, .55), inset 0 2px 0 rgba(255, 230, 190, .35), 0 4px 0 var(--outline); }
.fold { color: var(--gold-hi); }
.fold-n { color: var(--gold-hi); background: var(--well); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5); text-shadow: none; }
#paneChat .online-pill { background: var(--well); }
/* кнопки: латунь (главное), орех (второе), гранат (опасное) */
.btn, .btn-ivory { --gem: #6e4a30; --gem-hi: #9a6e4a; --gem-lo: #573822; --gem-edge: #2a170b; color: #fff3dd; }
.btn-dark, .btn-buy, .btn-leaf, .btn-coins { --gem: #e3b45e; --gem-hi: #ffe7a6; --gem-lo: #c18a35; --gem-edge: #6f4510; color: #2a1706; text-shadow: 0 1px 0 rgba(255, 245, 210, .6); }
.btn-dark[aria-pressed=true] { --gem: #5a3b25; --gem-hi: #7a5233; --gem-lo: #4a2f1d; --gem-edge: #2a170b; color: var(--gold-hi); text-shadow: var(--ts); }
.btn-nar, .btn-gift { --gem: #b8323b; --gem-hi: #e2646b; --gem-lo: #8f1f27; --gem-edge: #4a0a10; color: #fff3ee; }
.btn-xl small { text-shadow: none; }
.icon-btn.send { background: linear-gradient(#ffe7a6, #e3b45e 50%, #c18a35 52%) !important; color: #2a1706; }
.icon-btn.send svg { filter: none; }
/* круглые пуговицы и полка вкладок — орех */
.icon-btn, .share-btn, .mute-sm, .pager button, .amt, .tabs button, .actions > #btnMute, .actions > #btnWatchers, .adm-tabs button, .adm-seg button, .adm-b {
  background: radial-gradient(circle at 50% 28%, #9a6e4a, #5f3f28 72%, #4a2f1d); }
/* карточки (бывшая бумага) — светлый орех с объёмом */
.box .feed, .box .list, .ptable, .gtable, .pcard, .stats-more > div, .chat li:not(.empty), .gift-card, .gifts li:not(.empty), .rank-table li, .steps li, #pageBody details, .stickers button, .adm-tile, #toast {
  background: linear-gradient(rgba(255, 225, 170, .08), rgba(0, 0, 0, .06)), var(--walnut) center / 700px auto, #5c3d27 !important; }
.box .feed, .box .list, .ptable, .gtable { background: rgba(20, 11, 5, .38) !important; box-shadow: 0 0 0 2.5px var(--outline), inset 0 3px 6px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 220, 170, .2); }
.pcard-id h2, .stats dd, .stats-more dd { color: #fff3dd; text-shadow: var(--ts); }
.stats-more dt, .stats dt { color: var(--ink-soft); }
.chat li.mine { background: linear-gradient(rgba(140, 170, 90, .14), rgba(0, 0, 0, .05)), var(--walnut) center / 700px auto, #5c3d27 !important; }
.chat li.ping, .chat-pin { background: linear-gradient(rgba(227, 180, 94, .22), rgba(0, 0, 0, .05)), var(--walnut) center / 700px auto, #5c3d27 !important; box-shadow: 0 0 0 2px var(--outline), inset 4px 0 0 var(--gold), 0 3px 0 rgba(0, 0, 0, .45); color: var(--ink); text-shadow: var(--ts); }
.chat li.gift { background: linear-gradient(rgba(227, 180, 94, .16), rgba(0, 0, 0, .05)), var(--walnut) center / 700px auto, #5c3d27 !important; }
.chat .who, .chat-link, .chat-pin p b { color: var(--gold-hi); }
.chat li.gift p span { color: var(--gold-hi); }
.row-who .st-play { color: var(--gold); } .row-who .st-search, .row-who .st-on { color: #8fdc7a; } .row-who .st-away { color: #ffd76a; }
.game-meta time { color: #8fdc7a; }
.gift-card.on, .shop-grid .gift-card.on { background: linear-gradient(rgba(227, 180, 94, .3), rgba(0, 0, 0, .05)), var(--walnut) center / 700px auto, #6e4c33 !important; box-shadow: 0 0 0 2.5px var(--outline), 0 0 0 5px var(--gold), 0 3px 0 rgba(0, 0, 0, .45); }
.gift-card small, .shop-grid .gift-card small { color: var(--gold-hi); }
.shop-grid .gift-card small { background: var(--well); box-shadow: none; }
.gift-card .have { background: var(--gold); color: #2a1706; text-shadow: none; }
.feed li[data-watch] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2c299' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5S21.5 12 21.5 12s-3.5 6.5-9.5 6.5S2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E"); }
.pid, .gifts-head b { color: var(--gold-hi); background: var(--well); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5); }
.bar { background: var(--well); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5), 0 0 0 2px var(--outline); }
.bar i { background: linear-gradient(#ffe7a6, #e3b45e 50%, #c18a35); }
.pips i:not(.on), .panel .pips i:not(.on), .pcard .pips i:not(.on), .box .pips i:not(.on), .ptable .pips i:not(.on) { background: rgba(255, 230, 190, .16); }
/* поля ввода — тёмное углубление, как в оригинале */
.field input, .chat-form .chat-input, .search, .lock input, .del-box input, .adm-field { color: var(--ink); background: var(--well); text-shadow: none;
  box-shadow: 0 0 0 2.5px var(--outline), inset 0 3px 5px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 220, 170, .2); }
.chat-input:empty::before { color: var(--ink-dim); }
/* партия: «ваш ход» — латунь, рация — латунь, при записи — гранат */
.status.mine { color: #2a1706; text-shadow: 0 1px 0 rgba(255, 245, 210, .6); background: linear-gradient(#ffe7a6, #e3b45e 46%, #c18a35 54%); box-shadow: 0 0 0 3px var(--outline), inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--outline), 0 0 18px rgba(227, 180, 94, .5); }
.status.hurry { background: linear-gradient(#e2646b, #b8323b 46%, #8f1f27 54%); }
.actions > button { color: #fff3dd; background: radial-gradient(circle at 50% 28%, #9a6e4a, #5f3f28 72%, #4a2f1d); }
.actions > #btnResign { background: linear-gradient(#e2646b, #b8323b 46%, #8f1f27 54%); }
.talk time { color: #fff; }
.actions > .talk.rec { color: #fff; text-shadow: var(--ts-big); background: linear-gradient(#e2646b, #b8323b 46%, #8f1f27 54%); }
.actions > .talk.rec svg { stroke: #fff; }
.seat.talking .seat-avatar { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--gold), 0 0 18px rgba(227, 180, 94, .8); }
#toast { color: var(--ink); text-shadow: var(--ts); }
.adm-tile b { color: var(--gold-hi); } .adm-tile span { color: var(--ink-soft); }
.steps li::before { color: #2a1706; background: var(--gold); text-shadow: none; }

/* значок «Игра» — две объёмные белые кости, как на доске; цвет не меняется ни в обычной, ни в нажатой вкладке */
.tabs .tab-dice, .tabs button.on .tab-dice { width: 42px; height: 38px; margin: 0; stroke: none; fill: none; opacity: 1; filter: drop-shadow(0 2px 1px rgba(20, 8, 2, .55)); }

/* =====================================================================
   21.4 — железные уголки, читаемый чат, значки вместо слов
   ===================================================================== */
/* железные уголки — на самых углах панели, поверх кромки (рисуются рамкой, поэтому их не обрезает прокрутка) */
.panel, .sheet { border: 1px solid transparent; border-image: url(/ui/iron.svg) 32 / 34px / 6px stretch; }
@media (max-width: 520px) { .panel, .sheet { border-image-width: 28px; border-image-outset: 4px; } }

/* чат: ровные светлые таблички, крупный текст — читается с первого взгляда */
.chat li:not(.empty), .chat li.mine, .chat li.ping, .chat li.gift {
  background: linear-gradient(#f3e3c4, #e8d2aa) !important; color: #2c1a0d; text-shadow: none;
  --ink: #2c1a0d; --ink-soft: #6e4c2c; --ink-dim: #8d6a48;
  box-shadow: 0 0 0 2px var(--outline), inset 0 -3px 0 rgba(120, 80, 40, .22), 0 3px 0 rgba(0, 0, 0, .45) !important; }
.chat li.mine { background: linear-gradient(#e9efd2, #d7e2b4) !important; }
.chat li.ping { background: linear-gradient(#fbe7b4, #f1d189) !important; box-shadow: 0 0 0 2px var(--outline), inset 4px 0 0 #b8791a, 0 3px 0 rgba(0, 0, 0, .45) !important; }
.chat li.gift { background: linear-gradient(#f6e2d6, #ecccb8) !important; }
.chat p { font-size: 16px; line-height: 1.45; color: #2c1a0d; font-weight: 500; }
.chat .who { color: #8a3d0c; font-size: 14px; }
.chat time { color: #7a5a3c; }
.chat li.gift p span { color: #8a3d0c; }
.chat-link { color: #8a3d0c; }
.chat .pin-on { color: #7a5a3c; }
.chat li.gift p i { color: #7a5a3c; }

.pnext { display: grid; gap: 4px; margin-top: 2px; }

/* монеты игрока в шапке любого раздела меню */
.hud-coins { flex-shrink: 0; }
.pane-head .hud-coins { margin-left: auto; }
.head-tools .hud-coins { margin-left: 0; }
.coin.spin { animation: coin-spin .9s cubic-bezier(.2, .7, .3, 1); }

/* вкладки внизу нажимаются, как большие кнопки: утапливаются под пальцем */
.tabs button.down { transform: translateY(4px) scale(.96); box-shadow: 0 0 0 2.5px var(--outline), inset 0 2px 0 rgba(255, 210, 160, .4), 0 0 0 var(--outline); }

/* подарки в магазине — картинка 60 точек */
.gift-card img, .shop-grid .gift-card img { width: 60px; height: 60px; }

/* телефон: шапка вкладки «Игроки» со своими монетами; на планшете и компьютере игроки стоят рядом с игрой — шапка не нужна */
.info-head { display: none; }
@media (max-width: 699px) { .info-head { display: flex; flex: none; } }
/* шесть вкладок (у владельца) помещаются и на узком телефоне: круглая кнопка не шире своей колонки */
.tabs { grid-auto-columns: minmax(0, 1fr); }
.tabs button { min-height: 0; min-width: 0; }
@media (max-width: 400px) { .tabs { gap: 4px; padding: 6px; } .tabs svg { width: 26px; height: 26px; } .tabs .tab-dice, .tabs button.on .tab-dice { width: 36px; height: 33px; } }

/* =====================================================================
   21.5
   ===================================================================== */
/* Кости — настоящий объём. Тень кубика больше не фильтр (фильтр «сплющивал» куб в некоторых браузерах и обрезал углы
   на поворотах) — это отдельное пятно под костью. Рёбра без щелей, кости при поиске не задевают друг друга. */
.die { filter: none; }
.face { border-radius: 13%; }
.hero-dice { gap: calc(var(--s) * .6); }
.hero-dice .die::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -22%; height: 22%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(25, 12, 4, .5), rgba(25, 12, 4, 0)); }
.hero.searching .cube { animation: tumble 1.6s cubic-bezier(.45, .05, .55, .95) infinite; }
.hero.searching .die + .die .cube { animation-duration: 1.9s; animation-delay: -.5s; }
.hero.searching .die { animation: hop .8s ease-in-out infinite alternate; }
.hero.searching .die + .die { animation-delay: -.4s; }
@keyframes tumble {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  25% { transform: rotateX(190deg) rotateY(110deg) rotateZ(40deg); }
  50% { transform: rotateX(360deg) rotateY(250deg) rotateZ(90deg); }
  75% { transform: rotateX(550deg) rotateY(470deg) rotateZ(40deg); }
  100% { transform: rotateX(720deg) rotateY(720deg) rotateZ(0deg); }
}
@keyframes hop { from { transform: translateY(4px); } to { transform: translateY(-8px); } }
.hero.searching .die::after { animation: hop-shadow .8s ease-in-out infinite alternate; }
.hero.searching .die + .die::after { animation-delay: -.4s; }
@keyframes hop-shadow { from { transform: translateY(-4px) scale(1); opacity: 1; } to { transform: translateY(8px) scale(.8); opacity: .6; } }

/* рация — как соседние кнопки: ореховая, с белым микрофоном */
.actions > .talk { flex: 0 0 64px; background: radial-gradient(circle at 50% 28%, #9a6e4a, #5f3f28 72%, #4a2f1d); }
.talk svg.mic { width: 28px; height: 28px; stroke: #fff6e6; stroke-width: 2.1; filter: drop-shadow(0 1.5px 0 rgba(40, 14, 3, .9)); }
.actions > .talk.rec svg.mic { animation: talk .6s ease-in-out infinite; }
@media (min-width: 900px) and (min-height: 521px) and (orientation: landscape) { .actions > .talk { flex: 0 0 auto; min-height: 64px; } .talk svg.mic { width: 32px; height: 32px; } }

/* профиль: «Подарить подарок» и «Подарить монеты» — просто слова */
.btn-gift::before { display: none; }
#pActions .btn { white-space: normal; line-height: 1.15; }

/* аватары: первые 16, остальные — по кнопке «Ещё» */
.av-more { width: 100%; min-height: 40px; margin-top: 2px; }

/* карточки подарков — объёмные плашки: светлая верхняя кромка, тёмная нижняя, приподняты над панелью */
.gift-card, .shop-grid .gift-card { border-radius: 9px;
  background: linear-gradient(180deg, rgba(255, 232, 196, .2), rgba(255, 232, 196, 0) 40%, rgba(0, 0, 0, .2)), var(--walnut) center / 700px auto, #6a4730 !important;
  box-shadow: 0 0 0 2px var(--outline), inset 0 2px 0 rgba(255, 236, 200, .45), inset 2px 0 0 rgba(255, 236, 200, .12), inset -2px 0 0 rgba(0, 0, 0, .2), inset 0 -4px 0 rgba(0, 0, 0, .3),
    0 5px 0 #24130a, 0 9px 12px rgba(0, 0, 0, .35) !important;
  transform: translateY(-2px); transition: transform .12s, box-shadow .12s; }
.gift-card:active, .gift-card.down { transform: translateY(3px);
  box-shadow: 0 0 0 2px var(--outline), inset 0 2px 0 rgba(255, 236, 200, .3), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 0 0 #24130a, 0 2px 4px rgba(0, 0, 0, .3) !important; }
.gift-card.on, .shop-grid .gift-card.on {
  background: linear-gradient(180deg, rgba(255, 220, 140, .35), rgba(227, 180, 94, .08) 45%, rgba(0, 0, 0, .15)), var(--walnut) center / 700px auto, #7a5236 !important;
  box-shadow: 0 0 0 2px var(--outline), 0 0 0 4.5px var(--gold), inset 0 2px 0 rgba(255, 240, 200, .55), inset 0 -4px 0 rgba(0, 0, 0, .3), 0 5px 0 #24130a, 0 10px 14px rgba(0, 0, 0, .4) !important; }
.gift-card img { transform: translateY(-2px); filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .45)); }
.shop-grid .gift-card img { width: min(60px, calc(var(--cell) * .46)); height: min(60px, calc(var(--cell) * .46)); }
.shop-grid .gift-card { align-content: space-evenly; }
.gift-card .have { border-radius: 6px; }

/* разрешения: название и состояние слева, кнопка справа */
.perm-row { align-items: center; gap: 10px; }
.perm-row > span { display: grid; gap: 2px; min-width: 0; }
.perm-row small { font-size: 12px; color: var(--ink-soft); }
.perm-row .btn { flex: 0 0 auto; min-height: 38px; padding: 6px 14px; font-size: 13px; }
.perms { display: grid; gap: 10px; }
.perms > h3 { margin-bottom: -2px; }
/* «Установить» — латунная, как остальные главные кнопки (без синего, зелёного и чёрного по системам) */
[data-os] .app-btn, .app-btn { color: #2a1706; text-shadow: 0 1px 0 rgba(255, 245, 210, .6); background: linear-gradient(#ffe7a6, #e3b45e 46%, #c18a35 54%, #b07a2a); }
.app-btn .ic { filter: drop-shadow(0 1px 0 rgba(255, 245, 210, .5)); }

/* оболочка кости: те же шесть сторон на 1,5 пикселя глубже — закрывает щели на рёбрах при вращении */
.shell { border-radius: 10%; background: #e6dbc7; --in: calc(var(--s) / 2 - 1.5px); }
.shell.f1 { transform: translateZ(var(--in)); }
.shell.f6 { transform: rotateY(180deg) translateZ(var(--in)); }
.shell.f3 { transform: rotateY(90deg) translateZ(var(--in)); }
.shell.f4 { transform: rotateY(-90deg) translateZ(var(--in)); }
.shell.f2 { transform: rotateX(90deg) translateZ(var(--in)); }
.shell.f5 { transform: rotateX(-90deg) translateZ(var(--in)); }