/* ============================================================
   NardPlay (Uzun Nərd) — оформление.
   Материалы те же, что у доски: светлый дуб (стол, на котором лежит
   доска), клён (панели), орех (рамки), слоновая кость и эбен
   (кнопки), латунь (акценты), гранат (опасные действия).
   Дерево — готовые картинки в папке /wood; браузер не тратит
   на них время при запуске.
   Шрифты: JetBrains Mono — заголовки, кнопки, имена и числа;
   Inter — обычный текст.
   ============================================================ */

@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/text-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/text-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --walnut-800: #2f1c0e; --walnut-700: #4b2d17; --walnut-600: #5c3a20; --walnut-500: #70482a;
  --maple-50: #fffaea; --maple-100: #f8ecd3; --maple-200: #f1dfbc; --maple-300: #e6cf9f; --maple-400: #cfae77;
  --ink: #2b1b10; --ink-soft: #6a4f37; --ebony: #22150c; --ivory: #fffdf6;
  --brass: #d9b25c; --brass-deep: #9a7120; --nar: #a3232b; --nar-deep: #6e1219; --leaf: #2f7d4f; --green: #4caf50;
  --line: rgba(120, 80, 35, .26);

  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-s: 6px; --r-m: 10px; --r-l: 12px;   /* скругления: мелкие детали, кнопки и поля, панели */

  /* Дерево — готовые картинки из папки /wood. Цвет рядом с картинкой виден, пока она загружается. */
  --maple-img: url(/wood/maple.webp) center / cover;
  --table: radial-gradient(120% 90% at 50% 40%, rgba(255, 244, 222, .16), rgba(90, 52, 20, .2)), #c9a06c url(/wood/oak.webp) center / cover;   /* светлый тёплый дуб — стол, на котором лежит доска */
  --walnut: #5c3a20 url(/wood/walnut.webp) center / cover;
  --maple: #f4e4c4 var(--maple-img);
  --birch: #e9d09c url(/wood/birch.webp) center / cover;        /* светлое дерево кнопок */
  --ebony-wood: #302015 url(/wood/ebony.webp) center / cover;   /* тёмное дерево кнопок */
  --card: linear-gradient(#fffbee, #f3e3c2);
  --card-edge: 0 0 0 1px rgba(120, 80, 35, .4), 0 2px 0 var(--maple-400);

  --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; }
body {
  font: 400 14px/1.4 var(--text); color: var(--ink);
  background: var(--table);
  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(--table, #c9a06c); animation: splash-out .3s 2s forwards; }
  #splash img { width: min(108px, 28vw); height: auto; filter: drop-shadow(0 10px 14px rgba(60, 35, 10, .45)); animation: splash-in .5s cubic-bezier(.2, .9, .3, 1.2) both; }
  #splash b { font: 700 30px var(--mono); letter-spacing: -.02em; color: var(--walnut-700); text-shadow: 0 1.5px 0 rgba(255, 250, 234, .8); }
  #splash small { font: 500 12px var(--mono); color: var(--walnut-600); opacity: .8; }
  #splash i { width: 120px; height: 3px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--walnut-600), transparent) 0 0 / 50% 100% no-repeat, rgba(92, 58, 32, .18); 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: -60px 0, 0 0; } to { background-position: 180px 0, 0 0; } }
@keyframes splash-in { from { transform: scale(.7) rotate(-12deg); 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(--brass-deep); 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(420px, 100%); height: min(740px, 100%);
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: var(--walnut); border-radius: 14px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 225, 170, .26), inset 0 -3px 0 rgba(20, 10, 4, .35), 0 18px 40px rgba(70, 40, 12, .38);
}
.panel {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--maple); border-radius: var(--r-l);
  box-shadow: inset 0 0 0 1px rgba(30, 14, 5, .55), inset 0 7px 10px -6px rgba(40, 20, 8, .5);
}
.view { display: flex; flex-direction: column; gap: 10px; flex: 1 0 auto; }
@media (max-width: 520px) {
  .screen { padding: 0; }
  .case { width: 100%; height: 100%; border-radius: 0; box-shadow: none;
    padding: max(7px, var(--top)) max(7px, var(--right)) max(7px, var(--bottom)) max(7px, var(--left)); }
}

/* Главный экран: на телефоне одна панель и вкладки, на широком экране три панели рядом. */
.pane { display: none; }
#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=daily] #view-daily { display: flex; }
/* Блок чтения («Об игре», «Как играть», страницы): показывается одна из трёх частей. */
.docbox { 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; }
/* Профиль игрока. */
.pid { font: 700 12px var(--mono); padding: 3px 9px; border-radius: 99px; background: rgba(92, 58, 32, .13); }
.pid:empty { display: none; }
.pcard { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--card-edge); }
.pcard .pic { margin: 0; }
.pcard-id { display: grid; gap: 5px; min-width: 0; }
.pcard-id h2 { font-size: 20px; 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 .stats { padding: 8px 0; border-top: 1px solid var(--line); }
#view-profile .feed { border-top: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; flex-shrink: 0; }
/* жалоба и скрытие игрока — тихие ссылки под кнопками профиля */
.safety { display: flex; justify-content: center; gap: 18px; margin-top: -4px; }
.hidden-note { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: -8px; }
/* удаление аккаунта: ссылка внизу настроек и раскрывающийся блок с ПИН-кодом */
.link.danger, #btnPin { align-self: center; }
.link.danger { color: var(--nar); }
.pin-box { background: rgba(92, 58, 32, .07); box-shadow: inset 0 0 0 1px var(--line); }
.del-box { gap: 8px; padding: 10px; border-radius: var(--r-l); background: rgba(163, 35, 43, .08); box-shadow: inset 0 0 0 1px rgba(163, 35, 43, .3); }
.ios-hint { font-size: 13px; padding: 10px 12px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--card-edge); }
.del-box p { font-size: 12px; color: var(--ink-soft); text-align: center; }
.del-box input, .pin-box input { height: 44px; padding: 0 12px; text-align: center; font: 500 16px var(--mono); letter-spacing: .2em; background: var(--ivory); border: 2px solid var(--maple-400); border-radius: var(--r-m); outline: none; }
/* задания дня */
.daily-bar { display: grid; grid-template-columns: 22px auto auto minmax(40px, 1fr); align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; flex-shrink: 0;
  border-radius: var(--r-l); text-align: left; font: 700 13px var(--mono); color: var(--ink); background: var(--card); box-shadow: var(--card-edge); }
.daily-bar svg { width: 22px; height: 22px; fill: none; stroke: var(--walnut-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.daily-bar b { font-size: 12px; color: var(--leaf); }
.daily-bar .bar { height: 6px; }
.tasks { display: grid; gap: 6px; }
.tasks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-m); background: rgba(255, 250, 234, .6); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.tasks b { font: 700 13px var(--mono); color: var(--brass-deep); }
.tasks .check { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--maple-400); }
.tasks .done { background: rgba(47, 125, 79, .1); }
.tasks .done span { color: var(--ink-soft); text-decoration: line-through; }
.tasks .done .check { background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-8.5'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: none; }
.streak { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.streak li { display: grid; justify-items: center; gap: 2px; padding: 7px 2px; border-radius: var(--r-m); background: rgba(255, 250, 234, .6); box-shadow: inset 0 0 0 1px var(--line); }
.streak b { font: 700 13px var(--mono); color: var(--brass-deep); }
.streak .done { background: linear-gradient(#f3dc98, var(--brass)); box-shadow: none; }
.streak .now { box-shadow: inset 0 0 0 2px var(--leaf); }
.hour-bar { height: 10px; border-radius: 5px; }
.hour-bar i { border-radius: 5px; }
.note { font-size: 12px; color: var(--ink-soft); margin-top: -4px; }
.holiday-note { padding: 10px 12px; border-radius: var(--r-m); font: 700 13px var(--text); color: #fff; background: linear-gradient(#3d9a5f, #24693f); }
.bot-levels { margin-top: -4px; }
/* магазин подарков */
.shop-lead { font-size: 12px; color: var(--ink-soft); margin-top: -4px; }
.seg-sm button { min-height: 30px; font-size: 11px; }
.gift-grid.shop-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.shop-grid .gift-card { transition: transform .12s ease, box-shadow .12s ease; }
@media (hover: hover) { .shop-grid .gift-card:not(:disabled):hover { transform: translateY(-2px); } }
.shop-send { gap: 8px; padding: 10px; border-radius: var(--r-l); background: rgba(47, 125, 79, .08); box-shadow: inset 0 0 0 1px rgba(47, 125, 79, .35); }
.shop-send p { text-align: center; font: 700 14px var(--mono); }
.shop-send input, .search { height: 44px; padding: 0 12px; font: 500 16px var(--mono); background: var(--ivory); border: 2px solid var(--maple-400); border-radius: var(--r-m); outline: none; flex-shrink: 0; }
.shop-send input:focus, .search:focus { border-color: var(--brass-deep); }
.coins-sm { font-size: 14px; }
/* страницы 1 2 3 */
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; flex-shrink: 0; }
.pager button { min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--r-s); font: 700 13px var(--mono); color: var(--ink); background: var(--card); box-shadow: var(--card-edge); }
.pager button.on { color: var(--maple-100); background: var(--walnut); box-shadow: none; }
.pager button:disabled:not(.on) { opacity: .35; }
.pager span { align-self: end; padding: 0 2px; color: var(--ink-soft); }
/* все игроки: карточки */
.btn-all { min-height: 40px; font-size: 12px; margin-top: 6px; flex-shrink: 0; }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pcards .pc { width: 100%; display: grid; justify-items: center; gap: 4px; padding: 10px 6px 9px; border-radius: var(--r-l); text-align: center; background: var(--card); box-shadow: var(--card-edge); transition: transform .12s ease; }
@media (hover: hover) { .pcards .pc:hover { transform: translateY(-2px); } }
.pcards .row-pic, .pcards .row-avatar { width: 64px; height: 64px; border-radius: var(--r-m); }
.pcards .row-gift { width: 26px; height: 26px; right: -9px; bottom: -7px; }
.pc-head { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.pc-head b { font: 700 14px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcards .rank { justify-content: center; }
.pc-nums { font: 700 13px var(--mono); font-variant-numeric: tabular-nums; }
.pcards small { font-size: 11px; }
.pcards .st-play { color: var(--brass-deep); font-weight: 600; } .pcards .st-on, .pcards .st-search { color: var(--leaf); }
.pcards .gm .pc { background: linear-gradient(#fff6d6, #f1dc9a); box-shadow: 0 0 0 1.5px #c8920a, 0 2px 0 #a57a12; }
.shop { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-l); background: rgba(255, 250, 234, .6); box-shadow: inset 0 0 0 1px var(--line); }
.tags em.loss { background: var(--nar); }
.tags small { font: 700 11px var(--mono); align-self: center; }
/* Гроссмейстер — высший ранг: золотое имя с короной в списке, в чате и в профиле, золотая рамка аватара. */
/* Гроссмейстер: золотые кости перед именем, имя медленно переливается золотом. */
.list li.gm .row-who b, .chat .who.gm, .gm .pcard-id h2, .pcards .gm b { color: #8f6400; background: linear-gradient(100deg, #8f6400 35%, #e9b52a 50%, #8f6400 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, .pcards .gm 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; }
.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(#fff6d6, #f1dc9a); box-shadow: 0 0 0 1.5px #c8920a, 0 2px 0 #a57a12; }
/* Идущую партию можно смотреть: строка нажимается, справа — значок глаза. */
.feed li[data-watch] { cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a4f37' 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 7px / 18px no-repeat; }
.feed li[data-watch] .duo { padding-right: 28px; }
@media (hover: hover) { .feed li[data-watch]:hover { background-color: rgba(255, 250, 234, .65); } }
.feed li[data-watch]:active { background-color: rgba(217, 178, 92, .3); }
/* Замок админ-панели: пароль владельца. */
.lock { margin: auto 0; align-items: stretch; text-align: center; gap: 10px; }
.lock p { color: var(--ink-soft); font-size: 13px; }
.lock input { height: 48px; padding-inline: 14px; text-align: center; font: 400 16px var(--text); background: var(--ivory); border: 2px solid var(--maple-400); border-radius: var(--r-m); outline: none; }
.lock input:focus { border-color: var(--brass-deep); box-shadow: 0 0 0 3px rgba(217, 178, 92, .55); }
/* Текст страниц «Об игре», «Условия», «Конфиденциальность». */
.doc { font-size: 14px; line-height: 1.55; user-select: text; -webkit-user-select: text; }
.doc h1 { font: 700 19px/1.25 var(--mono); color: var(--walnut-700); margin-bottom: 8px; }
.doc h2 { margin: 16px 0 5px; }
.doc p, .doc ul, .doc ol { margin: 7px 0; }
.doc ul, .doc ol { padding-left: 20px; list-style: revert; }
.doc li { margin: 4px 0; }
/* Список можно тянуть мышью. */
.dragging, .dragging * { cursor: grabbing !important; }
/* Партии и игроки — две панели в одной колонке; на очень широком экране расходятся по своим колонкам. */
#paneInfo { flex: 1; min-height: 0; flex-direction: column; gap: 6px; }
#paneFeed { flex: 0 0 44%; }
/* Компьютер: окно занимает весь экран — чат, игра, партии с игроками. */
@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%; }
  .trio .pane { display: flex; }
  .trio .tabs { grid-column: 2; grid-row: 2; }
  #paneChat { grid-column: 1; grid-row: 1 / -1; }
  #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: 1100px) {
  .trio { gap: 14px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .trio #paneInfo { gap: 14px; }
  .trio .panel { border: 7px solid transparent; border-radius: 16px; background: var(--maple-img) padding-box, linear-gradient(#f4e4c4, #f4e4c4) padding-box, var(--walnut) border-box;
    box-shadow: inset 0 0 0 1px rgba(30, 14, 5, .55), inset 0 7px 10px -6px rgba(40, 20, 8, .5), 0 0 0 1px rgba(60, 35, 10, .35), 0 10px 22px rgba(60, 35, 10, .28); }
  .trio .tabs { padding: 6px; border-radius: 16px; background: var(--walnut); box-shadow: inset 0 0 0 1.5px rgba(255, 225, 170, .22), 0 10px 22px rgba(60, 35, 10, .28); }
}
/* Широкий монитор: четыре колонки — партии и игроки отдельно. */
@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(960px, 100%); height: min(1000px, 100%); }
  #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 .16s ease-out; }
.stickers:not([hidden]) { animation: rise .14s ease-out; }
@keyframes fade { from { opacity: 0; } }

/* Объявление владельца сайта над карточкой игрока. */
.notice { flex-shrink: 0; overflow: hidden; white-space: nowrap; padding: 8px 0; border-radius: var(--r-m); font: 600 13px/1.35 var(--text); color: #fff;
  background: linear-gradient(#c8333c, #9c1f28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 0 #5e0f15;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.notice[data-color=green] { background: linear-gradient(#3d9a5f, #24693f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 0 #123c23; }
.notice span { display: inline-block; padding-left: 100%; animation: marquee 18s linear infinite; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
@keyframes marquee { to { transform: translateX(-100%); } }
/* Ссылки на страницы о сайте. */
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; flex-shrink: 0; }
.links a { font: 500 11px var(--mono); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; padding: 4px 2px; }
a.btn { display: grid; place-items: center; text-decoration: none; }

/* Новогоднее оформление: шапка Деда Мороза надета на угол окна входа и на аватары —
   в меню, в окне игрока и на карточках в партии. Включается владельцем или само в конце декабря.
   Размер шапки — переменная --cap, сдвиг считается от неё, чтобы угол блока попадал в отворот шапки. */
.plaque-pic, .seat, .pic, #login .case { position: relative; }
.pic { display: block; width: 88px; height: 88px; margin: 0 auto; }
.xmas .plaque-pic::before, .xmas .seat::before, .xmas .pic::before, .xmas #login .case::before {
  content: ''; position: absolute; z-index: 6; width: var(--cap); height: var(--cap); left: calc(var(--cap) * -.42); top: calc(var(--cap) * -.16);
  background: url(/cap.png) center / contain no-repeat; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(40, 20, 8, .35));
}
.xmas #login .case::before { --cap: 72px; }
.xmas .plaque-pic::before { --cap: 56px; }
.xmas .pic::before { --cap: 66px; }
.xmas .seat::before { --cap: 42px; }
.xmas .seat-me::before { left: auto; right: calc(var(--cap) * -.42); transform: scaleX(-1); }   /* у вас аватар справа — шапка зеркально на правом углу */
@media (max-width: 520px) { .xmas #login .case::before { --cap: 54px; left: -6px; top: 0; } }   /* на телефоне окно во весь экран — шапка целиком внутри */
@media (min-width: 900px) and (min-height: 521px) and (orientation: landscape) {
  .xmas .seat::before { --cap: 70px; }
  .xmas .seat-me::before { left: calc(var(--cap) * -.42); right: auto; transform: none; }
}

/* ---------- текст ---------- */
.wordmark {
  font: 700 clamp(20px, 6.6vw, 28px)/1.15 var(--mono); letter-spacing: -.02em; text-align: center; color: var(--walnut-700); white-space: nowrap;
  text-shadow: 0 1.5px 0 rgba(255, 250, 234, .95), 0 -1px 0 rgba(40, 20, 8, .22);   /* буквы вырезаны в дереве */
}
.wordmark-sm { font-size: 17px; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.lead { text-align: center; color: var(--ink-soft); font-size: 13px; margin-top: -6px; }
h2 { font: 700 15px/1.25 var(--mono); letter-spacing: -.01em; color: var(--walnut-700); }
h3 { font: 600 12px/1.2 var(--text); color: var(--ink-soft); margin: 2px 0 -5px; }
small { font-size: 11px; color: var(--ink-soft); }
time { font: 500 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; }
.head-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* выключатель звука: деревянная плашка с динамиком; в меню — маленькая, в партии — в ряду кнопок */
.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); }   /* звук выключен — перечёркнутый красный динамик */
.mute-sm { width: 38px; height: 34px; border-radius: var(--r-m); color: var(--walnut-600);
  background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 46%, rgba(120, 80, 35, .14)), var(--birch);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(120, 80, 35, .32), 0 2px 0 #9a7847; }
.mute-sm svg { width: 22px; height: 22px; }
.mute-sm:active { transform: translateY(2px); }
/* кто смотрит партию. Телефон: значок глаза с числом в нижнем левом углу рамки — там нет ни шашек, ни лотка. */
.sound-row { display: flex; align-items: center; gap: 12px; }
.swatch-board { width: 22px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.sb-maple { background: linear-gradient(90deg, #f0d3a2 0 30%, #d98b4f 30% 50%, #f6e6c8 50% 70%, #d98b4f 70%); box-shadow: 0 0 0 2px #d9a46a; }
.sb-walnut { background: linear-gradient(90deg, #ebdcc0 0 30%, #4a3020 30% 50%, #c39060 50% 70%, #4a3020 70%); box-shadow: 0 0 0 2px #4e3322; }
/* Компьютер: табличка слева внизу, под соперником; зрители появляются и исчезают сами. */
.spectators { display: none; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; }

/* ---------- кнопки: эбеновая, костяная и гранатовая шашки ---------- */
.btn {
  width: 100%; min-height: 44px; padding: 8px 14px; flex-shrink: 0;
  font: 700 13px/1.15 var(--mono); border-radius: var(--r-m);
  transition: transform .07s ease, box-shadow .07s ease, filter .15s ease;
}
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn:disabled { filter: saturate(.5); opacity: .5; }
.btn-xl { min-height: 54px; font-size: 15px; display: grid; align-content: center; gap: 2px; }
.btn-xl small { font: 400 11px var(--text); color: inherit; opacity: .75; }
.btn-xl small:empty { display: none; }
/* Кнопки — деревянные плашки: тёмная из эбена, светлая из берёзы. Надпись «вырезана» тенью, сверху мягкий блик. */
.btn-dark {
  color: var(--maple-100); text-shadow: 0 -1px 0 rgba(0, 0, 0, .55);
  background: linear-gradient(rgba(255, 225, 170, .16), rgba(255, 225, 170, 0) 46%, rgba(0, 0, 0, .22)), var(--ebony-wood);
  box-shadow: inset 0 1.5px 0 rgba(255, 225, 170, .22), inset 0 0 0 1px rgba(0, 0, 0, .35), 0 3px 0 #0e0704, 0 6px 10px rgba(30, 14, 5, .25);
}
.btn-dark:active:not(:disabled) { box-shadow: inset 0 1.5px 0 rgba(255, 225, 170, .22), inset 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 0 #0e0704; }
.btn-dark[aria-pressed=true] { background: linear-gradient(rgba(217, 178, 92, .5), rgba(154, 113, 32, .38)), var(--ebony-wood); }   /* идёт поиск */
.btn-ivory, .actions > button {
  color: var(--ink); text-shadow: 0 1px 0 rgba(255, 250, 234, .8);
  background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 46%, rgba(120, 80, 35, .14)), var(--birch);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(120, 80, 35, .32), 0 3px 0 #9a7847, 0 6px 10px rgba(30, 14, 5, .18);
}
.btn-ivory:active:not(:disabled), .actions > button:active { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(120, 80, 35, .32), 0 1px 0 #9a7847; }
.btn-nar {
  color: #fff3ee; background: radial-gradient(120% 140% at 28% 0%, #cf4a52, var(--nar) 55%, #7c161d);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .25), 0 3px 0 #4d0b10, 0 6px 10px rgba(30, 14, 5, .22);
}
.btn-leaf {
  color: #f3fff5; background: radial-gradient(120% 140% at 28% 0%, #58b877, var(--leaf) 55%, #1d5a36);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .28), 0 3px 0 #123c23, 0 6px 10px rgba(30, 14, 5, .22);
}
.btn-leaf:active:not(:disabled) { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .28), 0 1px 0 #123c23; }
.btn-nar:active:not(:disabled) { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .25), 0 1px 0 #4d0b10; }
@media (hover: hover) { .btn:hover:not(:disabled) { filter: brightness(1.07); } }
.row { display: flex; gap: 8px; }
.row .btn { flex: 1 1 0; width: auto; min-width: 0; padding-inline: 8px; }

/* ---------- поля ввода и переключатели ---------- */
form { display: flex; flex-direction: column; gap: 8px; }
#loginForm .btn { min-height: 54px; }   /* кнопка входа той же высоты, что поля */
.field { display: grid; gap: 4px; }
.field > span { font-weight: 600; font-size: 12px; }
.field input, .chat-form input {
  width: 100%; height: 54px; padding: 0 12px; text-align: center; font: 500 18px var(--mono);
  background: var(--ivory); border: 2px solid var(--maple-400); border-radius: var(--r-m); outline: none;
  box-shadow: inset 0 2px 5px rgba(60, 35, 10, .2);
}
.chat-form input.bad { border-color: var(--nar); box-shadow: 0 0 0 3px rgba(163, 35, 43, .3); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.field input:focus, .chat-form input:focus { border-color: var(--brass-deep); box-shadow: inset 0 2px 5px rgba(60, 35, 10, .2), 0 0 0 3px rgba(217, 178, 92, .55); }
#pinInput { letter-spacing: .3em; }
.field small { min-height: 15px; text-align: center; line-height: 15px; }
.field small.bad { color: var(--nar); font-weight: 600; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border-radius: var(--r-m);
  background: rgba(92, 58, 32, .16); box-shadow: inset 0 1px 3px rgba(40, 20, 8, .25); flex-shrink: 0; }
.seg button { min-height: 34px; padding: 3px 4px; border-radius: var(--r-s); font: 500 12px var(--mono); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; gap: 5px; }
.seg button.on { color: var(--ink); font-weight: 700; background: linear-gradient(#fffdf6, #efe0be); box-shadow: 0 2px 0 var(--maple-400), 0 3px 6px rgba(40, 20, 8, .2); }
input[type=range] { width: 100%; height: 24px; margin: 0; accent-color: var(--walnut-600); flex-shrink: 0; }

/* ---------- лампочка «в сети»: утоплена в панель и тихо мигает ---------- */
.lamp { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: #b9a587; box-shadow: inset 0 1px 2px rgba(40, 20, 8, .55); }
.lamp.on { background: radial-gradient(circle at 40% 35%, #a6e3a9, var(--green) 55%, #2e7d32); }
.online-pill { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-m); font-size: 12px; background: rgba(92, 58, 32, .13); white-space: nowrap; flex-shrink: 0; }
.online-pill b { font: 700 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: 1.5px; background: rgba(92, 58, 32, .18); box-shadow: inset 0 1px 1px rgba(40, 20, 8, .3); }
.pips i.on { background: linear-gradient(#ecc977, var(--brass-deep)); box-shadow: none; }

/* ---------- карточка игрока ---------- */
.plaque { display: grid; gap: 9px; padding: 9px; border-radius: var(--r-l); flex-shrink: 0; background: var(--card); box-shadow: var(--card-edge), 0 6px 10px rgba(40, 20, 8, .12); }
.plaque-top { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 11px; align-items: center; }
.plaque-pic { display: block; width: 72px; height: 72px; border-radius: var(--r-m); }
.plaque-avatar { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-m); background: var(--maple-300); box-shadow: 0 0 0 2px var(--walnut-600); }
.plaque-id { display: grid; gap: 5px; min-width: 0; }
.plaque-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.plaque-line .plaque-name { flex: 1; min-width: 0; }
/* монеты: тратятся на подарки, на ранг не влияют */
.coins { display: flex; align-items: center; gap: 6px; padding: 2px; flex-shrink: 0; font: 700 15px/1 var(--mono); color: var(--brass-deep); perspective: 200px; }
.coins b { line-height: 22px; font-variant-numeric: tabular-nums; }
.coins:active .coin { transform: scale(.9); }
/* Монета — маленькая и объёмная: блик сверху, тёмный кант, ребро снизу. Нарисована одним блоком, без картинки. */
.coin { position: relative; display: inline-block; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  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, 0 3px 2px rgba(60, 35, 10, .35); 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 5s ease-in-out 1.5s infinite; }
@keyframes glint { 0%, 82% { transform: translateX(-120%); } 96%, 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); } }
.over-review { text-align: center; font: 600 13px var(--mono); color: var(--leaf); }
.tags small.acc { color: var(--leaf); }
.over-coins { display: flex; align-items: center; justify-content: center; gap: 7px; font: 700 14px var(--mono); color: var(--brass-deep); }
.plaque-name { font: 700 19px/1.1 var(--mono); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 6px; border-radius: 3px; background: rgba(92, 58, 32, .18); box-shadow: inset 0 1px 2px rgba(40, 20, 8, .35); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(#ecc977, var(--brass-deep)); transition: width .4s ease; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 8px; }
.stats > div { display: grid; gap: 1px; padding: 0 6px; 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: 700 16px/1.2 var(--mono); font-variant-numeric: tabular-nums; }

.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 8px 14px rgba(40, 20, 8, .3); }
.hero-dice { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; --s: clamp(34px, 11vw, 46px); }
.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); } }

/* ---------- списки: игроки, идущие партии, результаты ---------- */
.list, .feed { border-top: 1px solid var(--line); flex-shrink: 0; }
/* Правая панель: три блока, каждый листается отдельно. Игрокам достаётся всё свободное место. */
#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: 700 14px/1.2 var(--mono); letter-spacing: -.01em; color: #f8ecd3; cursor: default;
  background: var(--walnut); box-shadow: inset 0 0 0 1px rgba(255, 225, 170, .22), 0 2px 0 rgba(20, 10, 4, .3); }
.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 .dot { fill: currentColor; stroke: none; }
.fold-n { font: 500 12px var(--mono); padding: 2px 8px; border-radius: 99px; background: rgba(255, 225, 170, .16); 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-games { flex: 0 1 auto; max-height: 42%; }
.box-results, .box-players { flex: 1 1 0; }
@media (max-width: 1099px) {
  .fold { cursor: pointer; min-height: 50px; }
  .fold .chev { display: block; transition: transform .16s ease; }
  .box.shut .chev { transform: rotate(-90deg); }
  .box.shut > .feed, .box.shut > .list { 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 54px; }
.feed > li { content-visibility: auto; contain-intrinsic-size: auto 40px; }
/* Метка «новый»: недавно пришедший игрок, только что начатая партия, первое сообщение новичка. */
.tag-new { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 99px; font: 700 10px/1.5 var(--mono); font-style: normal; letter-spacing: .02em; color: #fff; 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 0 2px rgba(255, 255, 255, .25); }
.sheet .list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.row-btn { width: 100%; min-height: 54px; padding: 7px 8px; display: grid; grid-template-columns: 9px 38px minmax(0, 1fr) auto 46px; align-items: center; column-gap: 10px; text-align: left; border-bottom: 1px solid var(--line); }
@media (hover: hover) { .row-btn:hover { background: rgba(255, 250, 234, .65); } }
.row-btn:active { background: rgba(217, 178, 92, .3); }
.row-pic { position: relative; width: 38px; height: 38px; }
.row-gift { position: absolute; right: -7px; bottom: -6px; width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(40, 20, 8, .45)); }
.row-avatar { display: block; width: 38px; height: 38px; border-radius: var(--r-s); object-fit: cover; background: var(--maple-300); box-shadow: 0 0 0 1px rgba(92, 58, 32, .55); }
.row-who { display: grid; min-width: 0; }
.row-who b { font: 700 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(--brass-deep); font-weight: 600; }
.row-who .st-search, .row-who .st-on { color: var(--leaf); }
.num { text-align: right; font: 700 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: 40px; padding: 8px 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; padding: 8px 8px; }
.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: 700 12px var(--mono); color: var(--leaf); 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-soft); flex-shrink: 0; }
.duo.won b:first-child { font-weight: 700; }
.duo.won b:last-child { color: var(--ink-soft); }
.tags { display: flex; gap: 4px; flex-shrink: 0; }
.tags em { font: 500 10px var(--mono); font-style: normal; padding: 2px 6px; border-radius: 4px; color: #fff; background: var(--leaf); }
.tags em.mars { background: var(--brass-deep); }

.avatars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.avatars button { aspect-ratio: 1; border-radius: var(--r-m); overflow: hidden; background: var(--maple-300); box-shadow: 0 0 0 1.5px rgba(92, 58, 32, .4); }
.avatars button.on { box-shadow: 0 0 0 2.5px var(--green), 0 0 0 5px rgba(139, 195, 74, .32); }
.avatars img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* плитка «своё фото»: знак «плюс» нарисован двумя полосками */
.add-photo { position: relative; background: var(--ivory); }
.add-photo::before, .add-photo::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44%; height: 3px; border-radius: 2px; background: var(--walnut-600); transform: translate(-50%, -50%); }
.add-photo::after { transform: translate(-50%, -50%) rotate(90deg); }
.add-photo img, .add-photo.has::before, .add-photo.has::after { display: none; }
.add-photo.has img { display: block; }

/* ---------- чат ---------- */
.chat { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 7px; padding: 6px 2px;
  border-top: 1px solid var(--line); }
.chat li:not(.empty) { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: baseline; padding: 9px 12px; border-radius: 12px; background: rgba(255, 250, 234, .6); }
.chat li.mine { background: rgba(217, 178, 92, .24); }
.chat li.ping { background: rgba(76, 175, 80, .16); box-shadow: inset 3px 0 0 var(--green); }
.chat .empty { margin: auto; }
.chat .who { font: 700 13px var(--mono); color: var(--walnut-600); 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.4; 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 li.gift { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; font-size: 34px; line-height: 1; background: linear-gradient(90deg, rgba(217, 178, 92, .34), rgba(217, 178, 92, .1)); box-shadow: inset 0 0 0 1px rgba(154, 113, 32, .35); }
.chat li.gift.ping { box-shadow: inset 3px 0 0 var(--green), inset 0 0 0 1px rgba(154, 113, 32, .35); }
.chat li.gift img { width: 44px; height: 44px; object-fit: contain; }
.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: 700 13px var(--mono); color: var(--brass-deep); }
/* «… печатает»: место под строку занято всегда, поэтому чат не прыгает */
.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: 7px; flex-shrink: 0; }
.chat-form input { height: 48px; padding-inline: 14px; text-align: left; font: 400 16px var(--text); min-width: 0; border-radius: 13px; }
.icon-btn { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 13px; color: var(--walnut-600);
  background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 46%, rgba(120, 80, 35, .14)), var(--birch);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(120, 80, 35, .32), 0 2px 0 #9a7847; transition: transform .07s ease, filter .15s ease; }
.icon-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .smiley { width: 32px; height: 32px; stroke: none; }
.icon-btn:active:not(:disabled) { transform: translateY(2px); }
.icon-btn:disabled { opacity: .45; }
.icon-btn[aria-expanded=true] { color: var(--maple-100); background: var(--ebony-wood); box-shadow: inset 0 1.5px 0 rgba(255, 225, 170, .22), 0 2px 0 #0e0704; }
/* Отправка — костяная плашка с жирной зелёной стрелкой. */
.icon-btn.send { color: var(--leaf); background: radial-gradient(120% 120% at 30% 22%, #ffffff, #f6ecd6 58%, #e0cba0);
  box-shadow: inset 0 2px 0 #fff, inset 0 -4px 5px rgba(120, 80, 35, .22), inset 0 0 0 1px rgba(120, 80, 35, .3), 0 3px 0 #a58456, 0 5px 8px rgba(30, 14, 5, .22); }
.icon-btn.send svg { width: 28px; height: 28px; fill: currentColor; stroke: none; }
@media (hover: hover) { .icon-btn:hover:not(:disabled) { filter: brightness(1.05); } }
/* панель стикеров над полем ввода */
.picker { flex-shrink: 0; max-height: min(232px, 38vh); overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; padding: 8px;
  border-radius: 14px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--line), 0 6px 14px rgba(40, 20, 8, .16); }
.picker:not([hidden]) { animation: rise .14s ease-out; }
.picker button { aspect-ratio: 1; padding: 5px; border-radius: 10px; font-size: 30px; line-height: 1; }
.picker button:active { background: rgba(217, 178, 92, .35); }
@media (hover: hover) { .picker button:hover { background: rgba(217, 178, 92, .22); } }
.picker img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- нижняя панель: значки вместо слов ---------- */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; flex-shrink: 0; }
.tabs button { position: relative; min-height: 54px; display: grid; place-items: center; border-radius: var(--r-l); color: rgba(248, 236, 211, .55); transition: color .15s ease, background-color .15s ease; }
.tabs svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabs .tab-dice { width: 46px; height: 41px; margin-top: -6px; fill: #fff8e6; stroke: none; opacity: .7; transition: opacity .15s ease; }
.tabs .on .tab-dice { opacity: 1; }
.tabs .tab-dice .pip { fill: #4a2d17; }
.tabs .tab-dice .front { stroke: #4a2d17; stroke-width: 1.4; }
.tabs button.on { color: #fff; background: rgba(255, 240, 205, .13); box-shadow: inset 0 0 0 1px rgba(255, 225, 170, .22); }
.tabs button.on::before { content: ''; position: absolute; left: 50%; bottom: 5px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: var(--brass); }
.tabs button:active { background: rgba(255, 240, 205, .2); }
.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: inset 0 1px 2px rgba(0, 0, 0, .35); }

/* ---------- партия ---------- */
#game { grid-template: auto minmax(0, 1fr) auto / minmax(0, 1fr); gap: 7px; 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; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 10px 4px 4px; border-radius: var(--r-l); justify-self: start; max-width: min(100%, 34vw);
  background: var(--card); box-shadow: var(--card-edge); transition: box-shadow .2s; }
.seat-me { grid-column: 3; justify-self: end; padding: 4px 4px 4px 10px; text-align: right; }
.seat.turn { box-shadow: 0 0 0 2px var(--green), 0 0 0 5px rgba(139, 195, 74, .32); }   /* чей сейчас бросок или ход */
.seat-avatar { width: 40px; height: 40px; border-radius: var(--r-m); object-fit: cover; background: var(--maple-300); flex-shrink: 0; }
.seat-text { min-width: 0; display: grid; }
.seat-text b { font: 700 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: 6px 12px; border-radius: var(--r-m); text-align: center;
  font: 400 12px/1.3 var(--text); color: #f8ecd3; background: var(--walnut); box-shadow: inset 0 0 0 1px rgba(255, 225, 170, .2), 0 2px 0 rgba(20, 10, 4, .3); transition: background .2s, color .2s; }
.status time { font: 500 12px var(--mono); color: inherit; padding-left: 8px; border-left: 1px solid currentColor; }
.status time:empty { display: none; }
.status.mine { color: var(--ebony); background: linear-gradient(#f3dc98, var(--brass)); }
.status.hurry { color: #fff3ee; background: linear-gradient(#c8424a, var(--nar)); box-shadow: 0 2px 0 #4d0b10; }

#stage { min-width: 0; min-height: 0; display: grid; place-items: center; }
#table { position: relative; border-radius: 12px; box-shadow: 0 12px 26px rgba(60, 35, 10, .38); }
#board { display: block; touch-action: none; }   /* указатель-«руку» включает игра — только над тем, чем можно ходить */
#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::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(217, 178, 92, .5)); }
  50% { filter: drop-shadow(0 calc(var(--s) * .1) calc(var(--s) * .08) rgba(25, 12, 4, .5)) drop-shadow(0 0 9px rgba(217, 160, 40, 1)); }
}

.actions { position: relative; display: flex; justify-content: center; gap: 6px; width: min(100%, 520px); margin: 0 auto; }
.actions > button { flex: 1; min-height: 44px; padding: 4px 6px; border-radius: var(--r-m); font: 700 12px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .07s ease, box-shadow .07s ease; }
.actions > button:active { transform: translateY(2px); }
#btnMute, #btnWatchers { flex: 0 0 54px; }
#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: 700 11px/1 var(--mono); color: #fff; background: var(--nar); box-shadow: 0 0 0 2px var(--maple-100); }
.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(--maple); font: 600 14px var(--mono);
  box-shadow: 0 0 0 5px var(--walnut-600), 0 12px 24px rgba(40, 20, 8, .4); animation: rise .14s ease-out; }
.watch-list b { font-size: 12px; color: var(--walnut-600); }
.watch-list small { font: 400 12px var(--text); }
.actions > #btnResign { color: #fff; text-shadow: 0 -1px 0 rgba(70, 0, 5, .6);
  background: linear-gradient(rgba(204, 58, 66, .9), rgba(132, 22, 30, .94)), var(--birch);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(60, 0, 5, .4), 0 3px 0 #4d0b10, 0 6px 10px rgba(30, 14, 5, .2); }
.actions > #btnResign:active { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(60, 0, 5, .4), 0 1px 0 #4d0b10; }
/* Стикеры открываются ровно над кнопками, по центру ряда. */
.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(--maple);
  box-shadow: 0 0 0 6px var(--walnut-600), 0 0 0 7.5px rgba(255, 225, 170, .25), 0 14px 28px rgba(40, 20, 8, .45); }
.stickers button { aspect-ratio: 1; padding: 6px; border-radius: var(--r-m); background: var(--ivory); box-shadow: 0 2px 0 var(--maple-400); font-size: 30px; line-height: 1; }
.stickers button:active { transform: translateY(2px); box-shadow: none; }
.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(40, 20, 8, .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; }
}

/* ---------- кости ---------- */
.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)); }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.face, .core { position: absolute; inset: 0; }
/* Кость — белая слоновая кость со скруглёнными рёбрами, чёрные точки; единица — крупная красная, как у настоящих нардовых костей. */
.face { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 15%; border-radius: 22%; 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)); }
.core { inset: 7%; background: #ece4d6; }
.core-x { transform: rotateY(90deg); }
.core-y { transform: rotateX(90deg); }

/* ---------- окна ---------- */
dialog { border: 0; padding: 0; color: var(--ink); }
.sheet { width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 16px 14px 14px; border-radius: var(--r-l); background: var(--maple); overflow-y: auto;
  box-shadow: 0 0 0 7px var(--walnut-600), 0 0 0 8.5px rgba(255, 225, 170, .25), 0 24px 50px rgba(40, 20, 8, .5); }
.sheet[open] { display: flex; flex-direction: column; gap: 10px; animation: rise .18s ease-out; }
.sheet::backdrop { background: rgba(60, 38, 16, .5); }
.sheet-sm { width: min(320px, calc(100vw - 32px)); 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; }
.sheet-sm .stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0; }
/* подарки в профиле игрока */
.gifts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gifts-head b { font: 500 12px var(--mono); padding: 2px 8px; border-radius: 99px; background: rgba(92, 58, 32, .13); }
.gifts-head b:empty { display: none; }
.gifts { display: grid; gap: 4px; max-height: 168px; min-height: 52px; overflow-y: auto; overscroll-behavior: contain; text-align: left; }
.gifts li:not(.empty) { font-size: 30px; line-height: 1; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 8px; border-radius: var(--r-m); background: rgba(255, 250, 234, .6); }
.gifts img { width: 40px; height: 40px; object-fit: contain; }
.gifts span { display: grid; min-width: 0; font-size: 13px; line-height: 1.3; }
.gifts b { font: 700 13px/1.3 var(--mono); }
.gifts small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gift-hint { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: -6px; }
.gift-balance { text-align: center; font: 500 13px var(--mono); color: var(--ink-soft); margin-top: -4px; }
.gift-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gift-card { font-size: 40px; line-height: 1.2; display: grid; justify-items: center; gap: 3px; padding: 8px 4px 9px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--card-edge); min-width: 0; }
.gift-card img { width: 52px; height: 52px; object-fit: contain; }
.gift-card b { font: 700 12px/1.2 var(--mono); max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.gift-card small { font: 500 11px var(--mono); color: var(--brass-deep); }
.gift-card.on { background: rgba(217, 178, 92, .3); box-shadow: 0 0 0 2.5px var(--leaf); }
.gift-card:disabled { opacity: .4; filter: saturate(.3); }
@media (max-width: 400px) { .gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* подарок всплывает посреди экрана */
#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(--maple-50); background: rgba(47, 28, 14, .9); }
#maint b { font: 700 20px var(--mono); }
#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(30, 14, 5, .45)); animation: gift-pop 2.4s ease both; }
#giftPop { font-size: 120px; line-height: 1; }
#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(217, 178, 92, .85), 0 0 40px 12px rgba(255, 225, 150, .6); 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; } }
.profile-avatar { display: block; width: 88px; height: 88px; margin: 0 auto; border-radius: var(--r-l); object-fit: cover; background: var(--maple-300); box-shadow: 0 0 0 2px var(--walnut-600); }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
#dlgOver h2, #dlgInvite h2 { font-size: 18px; }
#dlgOver[data-result=lose] h2 { color: var(--nar-deep); }
.score { display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 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(--maple-400); border-right: 0; }
.score b { font-size: 34px; line-height: 1; }
.score em { font-style: normal; font-size: 13px; padding: 3px 9px; border-radius: var(--r-s); color: #fff; background: var(--leaf); }
.score em[data-sign=minus] { background: var(--nar); }

/* окно «Как играть» */
.steps { display: grid; gap: 6px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 7px 8px; border-radius: var(--r-s); background: rgba(255, 250, 234, .55); font-size: 13px; line-height: 1.45; }
.steps li::before { content: counter(step); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font: 700 11px var(--mono); color: var(--maple-50); background: var(--walnut-600); }

/* окно «Об игре» */
.about-head { display: flex; align-items: center; gap: 12px; }
.about-head img { border-radius: var(--r-m); background: var(--ivory); box-shadow: var(--card-edge); padding: 4px; }
.doc-about > p:not(.credits) { font-size: 13px; line-height: 1.5; }
.rank-table { display: grid; gap: 4px; }
.rank-table li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: var(--r-s); background: rgba(255, 250, 234, .55); }
.rank-table .rank b { color: var(--ink); font-weight: 700; }
.stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 6px; padding-bottom: 3px; }
/* кнопки-клавиши: нажимаются и утапливаются */
.stack button { width: 100%; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: var(--r-m); background: var(--card); color: var(--ink);
  box-shadow: var(--card-edge), 0 3px 0 rgba(120, 80, 35, .45); font: 500 11px var(--mono); text-align: center; transition: transform .07s, box-shadow .07s; touch-action: manipulation; }
.stack button.down, .stack button:active { transform: translateY(3px); box-shadow: inset 0 2px 5px rgba(60, 35, 12, .35), 0 0 0 1px rgba(120, 80, 35, .4); }
.stack svg { width: 24px; height: 24px; }

#toast { position: fixed; z-index: 100; left: 50%; top: calc(var(--top) + 12px); max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: var(--r-m); text-align: center;
  font: 600 13px var(--text); color: var(--maple-50); background: var(--walnut-800); box-shadow: inset 0 0 0 1.5px rgba(217, 178, 92, .55), 0 8px 20px rgba(40, 20, 8, .4);
  transform: translate(-50%, -16px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
#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) + 8px) 14px 8px; text-align: center; font: 600 13px var(--text);
  color: #fff3ee; background: var(--nar); box-shadow: 0 2px 0 #4d0b10; font-variant-numeric: tabular-nums; }

/* ---------- телефон: игроки и статус в одну строку ---------- */
@media (max-width: 520px) {
  .hud { gap: 5px; min-height: 58px; }   /* высота строки постоянная: текст статуса в одну или две строки ничего не сдвигает */
  .seat { max-width: 33vw; gap: 6px; padding: 3px 7px 3px 3px; }
  .seat-me { padding: 3px 3px 3px 7px; }
  .seat-avatar { width: 34px; height: 34px; }
  .seat-text b { font-size: 12px; }
  .seat .rank b { font-size: 10px; }
  .status { font-size: 10px; padding: 5px 7px; gap: 5px; flex-direction: column; }
  .status time { font-size: 11px; padding: 0; border: 0; }
}
/* ---------- широкий экран в партии ---------- */
@media (min-width: 760px) {
  #game { gap: 10px; padding: 12px 18px; }
  .seat-avatar { width: 46px; height: 46px; }
  .seat-text b { font-size: 14px; }
  .status { font-size: 12px; padding: 8px 16px; }
  .status time { font-size: 13px; }
}
/* планшет стоя: тот же порядок, что на телефоне, но игроки, статус и кнопки крупнее */
@media (min-width: 600px) and (orientation: portrait) {
  .hud { gap: 12px; min-height: 78px; }
  .seat { max-width: 38vw; gap: 10px; padding: 6px 14px 6px 6px; }
  .seat-me { padding: 6px 6px 6px 14px; }
  .seat-avatar { width: 60px; height: 60px; }
  .seat-text { gap: 2px; }
  .seat-text b { font-size: 17px; }
  .seat .rank b { font-size: 13px; }
  .status { font-size: 14px; padding: 8px 16px; flex-direction: column; gap: 3px; }
  .status time { font-size: 15px; padding: 0; border: 0; }
  .actions { width: min(100%, 680px); gap: 10px; }
  .actions > button { min-height: 54px; 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) / 188px minmax(0, 1fr) 188px; column-gap: 14px; row-gap: 8px; }
  .hud { display: contents; }
  .seat, .seat-me { grid-row: 1; justify-self: stretch; max-width: none; flex-direction: column; gap: 8px; padding: 6px 6px 10px; text-align: center; }
  .seat { grid-column: 1; }
  .seat-me { grid-column: 3; flex-direction: column-reverse; }
  /* аватар во всю ширину карточки; на невысоком окне уменьшается, чтобы кнопки и стикеры поместились */
  .seat-avatar { width: min(100%, 26vh); height: auto; aspect-ratio: 1; border-radius: var(--r-m); }
  .seat-text { justify-items: center; gap: 3px; max-width: 100%; }
  .seat-text b { font-size: 15px; }
  .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: 4px; padding: 8px; min-height: 70px; font-size: 12px; }
  .status time { padding: 0; border: 0; font-size: 14px; }
  #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; }
  .actions > button { flex: 0 0 auto; min-height: 44px; 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: 6px; min-height: 0; padding: 10px; overflow-y: auto; border-radius: var(--r-l); background: var(--card); box-shadow: var(--card-edge); }
  .spectators h3 { display: flex; align-items: center; gap: 6px; margin: 0; font: 700 12px var(--mono); color: var(--walnut-600); }
  .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 7px; border-radius: 99px; background: rgba(92, 58, 32, .14); }
  .spectators ul { display: grid; gap: 4px; }
  .spectators li { padding: 5px 8px; border-radius: var(--r-s); font: 600 13px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(255, 250, 234, .6); animation: rise .25s ease-out; }
  .spectators-none { font-size: 12px; color: var(--ink-soft); }
  /* стикеры открываются вниз, под кнопками, и не закрывают доску */
  .stickers { position: static; width: auto; margin: 9px 7px 0; padding: 6px; gap: 5px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stickers button { min-width: 0; padding: 4px; font-size: 22px; }
}
/* на высоком окне под кнопками много места — стикеры в два столбца и вдвое крупнее */
@media (min-width: 900px) and (min-height: 840px) and (orientation: landscape) {
  .stickers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  .stickers button { padding: 9px; font-size: 44px; }
}
/* телефон на боку: игроки и кнопки уходят по сторонам, доска занимает всю высоту */
@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; }
  .plaque-pic { width: 56px; height: 56px; }
  .xmas .plaque-pic::before { --cap: 46px; }
  .plaque-top { grid-template-columns: 56px minmax(0, 1fr); }
  #meNext { display: none; }
}
@media (max-width: 380px) {   /* узкий телефон: название ранга должно помещаться целиком */
  .seat { max-width: 35vw; }
  .seat .rank b { font-size: 9px; letter-spacing: -.2px; }
}
@media (max-width: 350px) {
  .btn { font-size: 12px; } .btn-xl { font-size: 13px; }
  .actions > button, .seg button { font-size: 11px; }
  .stats dd { font-size: 14px; }
}
/* Большой сенсорный экран (планшет, сенсорный телевизор): строки и кнопки крупнее, чтобы попадать пальцем издалека. */
@media (pointer: coarse) and (min-width: 1100px) {
  .row-btn { min-height: 62px; } .feed li:not(.empty) { min-height: 46px; }
  .btn { min-height: 52px; font-size: 15px; } .seg button { min-height: 44px; font-size: 14px; }
  .chat p { font-size: 16px; }
}
/* Лёгкая графика: без анимаций, свечений и больших теней. Включается сама на слабых устройствах и при «уменьшить движение» в системе. */
.lite *, .lite *::before, .lite *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.lite .panel, .lite .case, .lite #table, .lite .hero-board, .lite .sheet { box-shadow: 0 0 0 1px rgba(60, 35, 10, .4); }
.lite .trio .panel { box-shadow: inset 0 0 0 1px rgba(30, 14, 5, .55); }
.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, .lite .xmas .plaque-pic::before, .lite .xmas .seat::before, .lite .xmas .pic::before, .lite .xmas #login .case::before { 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 { display: none; }
#pageBody details { margin: 6px 0; padding: 8px 10px; border-radius: var(--r-m); background: rgba(255, 250, 234, .6); box-shadow: inset 0 0 0 1px var(--line); }
#pageBody summary { cursor: pointer; font-weight: 600; }
#pageBody .author { color: var(--ink-soft); font-style: italic; }