/* Страница-миниигра RPG «Колесо хаоса». Ар-деко Deadlock, как на оверлее и панелях: сажа, латунь, крем,
   бирюза душ, фиолет Покровителя. Одна вещь первого уровня — слот «Сейчас лучше всего» над живым городом; ниже —
   события по рангу и «Ты» с одной целью, остальное во вкладках. Цвет — это роль: латунь — интерфейс, души — валюта,
   кровь — удар, абрикос — призыв, фиолет — только Twitch. Старые имена переменных остаются псевдонимами на выпуск. */
:root {
  --bg-page: #121510; --bg-sunk: #0d100c; --surface-1: #1a1f17; --surface-2: #262e22; --surface-3: #303a2b;
  --line: #3a4432; --line-brass: #6e5326; --brass: #c9a45c; --brass-hi: #ecd08a;
  --text: #f1e6c8; --text-dim: #bdb39a; --on-brass: #2a1d08; --on-soul: #0d2a22;
  --soul: #7fe0bf; --soul-deep: #2f8f78; --points: #9146ff; --amber: #d9a441; --sapphire: #5b9bd5; --spirit: #a77bd9;
  --call: #f0b57a; --danger: #e5533d; --danger-soft: #ffb3a8; --live: var(--soul);
  --weapon: #e0892e; --vitality: #6aa84f;   /* ветки прокачки (v4): Оружие, Живучесть; Дух — --spirit */
  --display: "Playfair Display SC", Georgia, serif; --ui: "Jost", "Segoe UI", "Roboto", sans-serif;
  --r-1: 2px; --r-2: 4px; --r-3: 6px; --t-fast: 120ms; --t-in: 240ms; --t-gain: 600ms;
  --radius: var(--r-3); --gap: 16px;
  /* псевдонимы старых имён — убрать через выпуск */
  --soot: var(--bg-page); --night: var(--bg-page); --plate: var(--surface-1); --plate-2: var(--surface-2); --plate-3: var(--surface-3);
  --brass-lo: var(--line-brass); --cream: var(--text); --dim: var(--text-dim); --blood: var(--danger); --twitch: var(--points); --label: var(--ui);
}
* { box-sizing: border-box; }
html { background: var(--soot); color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); font: 15px/1.4 var(--ui); overflow-x: hidden; background:
  radial-gradient(1200px 600px at 80% -10%, rgba(201,164,92,.10), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, rgba(127,224,191,.07), transparent 60%), var(--soot); }
a { color: var(--brass-hi); }
button, input { font: inherit; }
img { max-width: 100%; }
small { font-weight: 400; color: var(--text-dim); font-size: 13px; letter-spacing: .01em; }
[hidden] { display: none !important; }
code { font-family: var(--label); background: rgba(255,255,255,.07); padding: 0 6px; border-radius: 3px; color: var(--brass-hi); white-space: nowrap; }

/* обод колеса хаоса за всем: медленно вращается, почти не виден */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sky .rim { position: absolute; right: -22vmin; top: -24vmin; width: 84vmin; height: 84vmin; opacity: .08; animation: rimspin 240s linear infinite; will-change: transform; }
@keyframes rimspin { to { transform: rotate(360deg); } }

/* полоса сверху: название, чип эфира, вход или чип зрителя */
.topbar { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 24px; background: var(--surface-1); box-shadow: 0 1px 0 var(--line); }
.topbar .brand img { width: 36px; height: 36px; }
.topbar .brand b { font-size: 17px; }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* город из sinlab, поверх — слот «Сейчас лучше всего» и шкала дневного лимита; арена летает по всему городу */
.hero { position: relative; z-index: 1; overflow: hidden; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; transition: min-height .5s ease; }
.next { position: relative; z-index: 2; max-width: 640px; padding: 22px 24px 8px; display: grid; gap: 10px; align-content: start; }
.next .eyebrow { font: 600 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.next h1 { margin: 0; font: 900 clamp(26px, 3vw, 40px)/1.05 var(--display); color: var(--text); letter-spacing: .01em; text-shadow: 0 2px 14px rgba(0,0,0,.8); text-wrap: balance; }
.next p { margin: 0; max-width: 60ch; font-size: 15px; color: var(--text); text-shadow: 0 1px 6px rgba(0,0,0,.85); }
.next .row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.next .timer { font: 700 34px/1 var(--ui); color: var(--brass-hi); font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.next .btn.big { min-height: 56px; padding: 0 26px; font-size: 19px; letter-spacing: .12em; }
.next .q { font: 600 18px/1.3 var(--ui); color: var(--text); text-shadow: 0 1px 6px rgba(0,0,0,.85); }
.next .ans { display: flex; gap: 8px; max-width: 420px; }
.next .ans input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r-2); border: 1px solid var(--line); background: rgba(13,16,12,.9); color: var(--text); font: 15px var(--ui); }
.limit { position: relative; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 6px 24px 12px; font-size: 13px; color: var(--text-dim); text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.limit .track { width: 160px; height: 6px; border-radius: var(--r-1); background: rgba(255,255,255,.1); overflow: hidden; }
.limit .track i { display: block; height: 100%; background: var(--soul); }
.gain { display: inline-flex; align-items: center; gap: 4px; color: var(--soul); font: 700 13px/1 var(--ui); white-space: nowrap; }
.gain img { width: 16px; height: 16px; }
.banner { position: absolute; inset: 0; z-index: 0; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.banner .back { opacity: .85; }
/* передний план: силуэты крыш из sinlab, зеркальная плитка без шва; поверх дымки, под труперами */
.banner .front { position: absolute; left: 0; right: 0; bottom: -2px; height: 44%; min-height: 70px; pointer-events: none;
  background: url("/art/game-front.webp") center bottom / auto 100% repeat-x; }
.banner .fog { position: absolute; inset: -12%; pointer-events: none;
  background: radial-gradient(55% 45% at 28% 72%, rgba(127,224,191,.11), transparent 70%), radial-gradient(45% 40% at 74% 56%, rgba(201,164,92,.10), transparent 70%); }
.banner .haze { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,21,16,.9) 0, rgba(18,21,16,.55) 40%, rgba(18,21,16,.1) 70%), linear-gradient(180deg, rgba(18,21,16,.15) 0, rgba(18,21,16,.05) 50%, rgba(18,21,16,.92) 92%, var(--bg-page) 100%); }
.hero canvas.arena { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero.play { min-height: 330px; cursor: crosshair; }
/* «Ринг» в баннере — главная игра сайта, без входа (game.js → ringBill). Вывеска справа сверху поверх города: блоки шапки
   не двигает; латунная рамка, пиксельный заголовок как на /ring и бирюзовый отсвет — заметна, но не спорит со слотом «Сейчас
   лучше всего». Босс стоит справа — пока он открыт, вывеска уступает ему место. Уже 1200 — столбиком, уже 900 — строкой под баннером.
   Вся вывеска — ссылка (rb-link растянута поверх); над ней только «Найти соперника» для вошедших; ниже текста — счётчик «в поиске» */
.ringbill { position: absolute; z-index: 3; top: 18px; right: max(24px, calc((100% - 1480px) / 2 + 20px));
  display: grid; grid-template-columns: 192px 176px; grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "scene txt" "scene q" "scene do";
  column-gap: 14px; row-gap: 6px;
  padding: 8px 14px 10px 8px; border-radius: var(--r-3); color: var(--text); text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, rgba(26,31,23,.94), rgba(13,16,12,.96));
  box-shadow: inset 0 0 0 1px var(--line-brass), inset 0 0 0 3px rgba(13,16,12,.9), inset 0 0 0 4px rgba(127,224,191,.3), 0 12px 30px rgba(0,0,0,.55), 0 0 28px rgba(127,224,191,.14);
  transition: transform var(--t-fast), box-shadow var(--t-fast), opacity .25s, visibility .25s; }
.ringbill:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--brass), inset 0 0 0 3px rgba(13,16,12,.9), inset 0 0 0 4px rgba(127,224,191,.6), 0 14px 34px rgba(0,0,0,.6), 0 0 34px rgba(127,224,191,.26); }
.rb-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.rb-link:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }
.rb-scene { grid-area: scene; display: block; width: 192px; height: 112px; border-radius: var(--r-2); background: #07090a; box-shadow: 0 0 0 1px #0b0d0a, 0 0 0 2px var(--line-brass); image-rendering: auto; }
.rb-txt { grid-area: txt; align-self: start; display: grid; gap: 7px; padding-top: 6px; font: 500 14px/1.3 var(--ui); color: var(--text); }
.rb-txt b { font: 400 16px/1.2 "Press Start 2P", var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--brass-hi); text-shadow: 2px 2px 0 #0b0d0a; }
.rb-dash { display: none; }
.rb-q { grid-area: q; display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.2 var(--ui); color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb-q .dot, .mm-count .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.rb-q.on, .mm-count.on { color: var(--text); }
.rb-q.on .dot, .mm-count.on .dot { background: var(--soul); box-shadow: 0 0 8px var(--soul); }
.rb-do { grid-area: do; display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.rb-go { min-height: 36px; padding: 6px 20px; font-size: 13px; letter-spacing: .14em; }
.rb-find { position: relative; z-index: 2; min-height: 36px; padding: 6px 14px; font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
.rb-find.on { background: rgba(13,16,12,.92); color: var(--soul); box-shadow: inset 0 0 0 1px var(--soul), 0 0 14px rgba(127,224,191,.25); }
.rb-find span { font-variant-numeric: tabular-nums; }
.ringbill.logged { grid-template-columns: 192px auto; }
.ringbill.logged .rb-txt { max-width: 280px; }
.ringbill:hover .rb-go { filter: brightness(1.08); }
.hero.boss .ringbill { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 1199px) and (min-width: 901px) {
  .ringbill, .ringbill.logged { grid-template-columns: 192px; grid-template-rows: auto auto auto auto; grid-template-areas: "scene" "txt" "q" "do"; padding: 8px 8px 10px; }
  .rb-txt { padding-top: 0; gap: 4px; font-size: 13px; }
  .rb-txt b { font-size: 13px; }
  .rb-do .btn { flex: 1 1 auto; }
  .hero.rb-logged { min-height: 360px; }                     /* вывеска с «Найти соперника» выше — баннер под неё */
}
@media (max-width: 900px) {
  .hero .ringbill, .hero .ringbill.logged { position: relative; top: auto; right: auto; bottom: auto; margin: 0 12px 12px; grid-template-columns: 112px minmax(0, 1fr) auto;
    grid-template-rows: auto auto; grid-template-areas: "scene txt go" "scene q go"; align-items: center; column-gap: 10px; row-gap: 2px; padding: 6px 10px 6px 6px; }
  .hero .ringbill.logged { grid-template-rows: auto auto auto; grid-template-areas: "scene txt go" "scene q go" "find find find"; }
  .hero .rb-scene { width: 112px; height: auto; aspect-ratio: 192 / 112; }
  .hero .rb-txt { display: block; padding: 0; font-size: 13px; line-height: 1.3; align-self: end; }
  .hero .rb-txt b { font-size: 10px; line-height: 1.6; }
  .hero .rb-dash { display: inline; }
  .hero .rb-q { align-self: start; }
  .hero .rb-do { display: contents; }
  .hero .rb-go { grid-area: go; align-self: center; min-height: 40px; padding: 6px 14px; font-size: 13px; }
  .hero .rb-find { grid-area: find; margin-top: 6px; min-height: 44px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .ringbill { transition: none; } .ringbill:hover { transform: none; } }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px var(--brass-lo), 0 0 18px rgba(201,164,92,.35); }
.brand b { display: block; font: 900 19px/1 var(--display); color: var(--brass-hi); letter-spacing: .04em; }
.brand i { display: block; font-style: normal; font-size: 11px; color: var(--text-dim); letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }
.brand em { font-style: normal; color: var(--brass-hi); }
.live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 16px; background: rgba(18,21,16,.75); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: var(--text-dim); max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.live.on i { background: var(--live); box-shadow: 0 0 10px var(--live); animation: beat 1.6s ease-in-out infinite; }
.live.on { color: var(--text); }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.who { display: flex; align-items: center; gap: 10px; }
.who .chip { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 22px; background: rgba(26,31,23,.92); box-shadow: inset 0 0 0 1px var(--brass-lo); }
.who .chip i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brass); color: var(--soot); font: 700 15px var(--display); font-style: normal; }
.who .chip b { font-weight: 600; }
.who .chip span { color: var(--soul); font-weight: 700; font-variant-numeric: tabular-nums; }
.who .chip img { width: 18px; height: 18px; object-fit: contain; }
.who .chip button { background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0 4px; font-size: 13px; }
.who .chip button:hover { color: var(--cream); }

/* кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 16px; border-radius: 4px; border: 0;
  background: linear-gradient(#ecd08a, #c9a45c 55%, #a9843e); color: var(--on-brass); font: 600 14px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 var(--line-brass), 0 6px 14px rgba(0,0,0,.35); transition: transform var(--t-fast), filter var(--t-fast); }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 var(--brass-lo), 0 3px 8px rgba(0,0,0,.35); }
.btn:disabled { filter: grayscale(.7) brightness(.6); cursor: default; transform: none; }
.btn.ghost, .btn.sec { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-brass); }
.btn.ghost:hover, .btn.sec:hover { box-shadow: inset 0 0 0 1px var(--brass); }
.btn.call { background: linear-gradient(#ffd3a3, #f0b57a 55%, #c4824a); color: var(--on-brass); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #8a5a2e, 0 6px 14px rgba(0,0,0,.35); }
.btn.twitch { background: var(--twitch); color: #fff; box-shadow: 0 2px 0 #5c2bb8, 0 6px 14px rgba(0,0,0,.35); }
.btn.twitch::before { content: ""; width: 16px; height: 18px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M2 0 0 5v19h7v4h4l4-4h5l6-6V0zm20 17-4 4h-6l-4 4v-4H3V2h19zM13 7h2v6h-2zm5 0h2v6h-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M2 0 0 5v19h7v4h4l4-4h5l6-6V0zm20 17-4 4h-6l-4 4v-4H3V2h19zM13 7h2v6h-2zm5 0h2v6h-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn.big { min-height: 60px; font-size: 23px; padding: 10px 28px; letter-spacing: .12em; }
.btn.soul { background: linear-gradient(#a8f0da, #7fe0bf 55%, #3fae90); color: var(--on-soul); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 #2f8f78, 0 6px 14px rgba(0,0,0,.35); }
.btn.blood, .btn.danger { background: linear-gradient(#ff8a7a, #e5533d 55%, #a32e1e); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 #7a1f12, 0 6px 14px rgba(0,0,0,.35); }
.btn.sm { min-height: 30px; padding: 4px 12px; font-size: 12px; }


/* стрим и чат Twitch прямо на странице: для тех, кто играет всерьёз */
.stream { position: relative; z-index: 1; max-width: 1360px; margin: 14px auto 0; padding: 0 20px; }
/* пароль эфира: одна строка под стримом — состояние, поле и кнопка; идёт пароль — латунная рамка */
.pwfield { position: relative; z-index: 1; max-width: 1360px; margin: 10px auto 0; padding: 0 20px; }
.pw-in { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 4px;
  background: rgba(18,21,16,.82); box-shadow: inset 0 0 0 1px var(--line); }
.pw-in.on { box-shadow: inset 0 0 0 1px var(--brass), 0 0 18px rgba(201,164,92,.18); }
.pw-h { font: 700 15px/1 var(--display, Georgia, serif); letter-spacing: .04em; color: var(--brass-hi, #ecd08a); text-transform: uppercase; }
.pw-state { flex: 1 1 220px; min-width: 0; font-size: 14px; color: var(--text-dim); }
.pw-in.on .pw-state { color: var(--text); }
.pw-state b { color: var(--soul); font-variant-numeric: tabular-nums; }
.pw-word { flex: 0 1 220px; min-width: 120px; height: 34px; padding: 0 10px; border-radius: 3px; border: 0; font: 600 16px/1 var(--ui, sans-serif);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text); background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--line-brass); }
.pw-word:focus { outline: none; box-shadow: inset 0 0 0 1px var(--brass), 0 0 0 2px rgba(201,164,92,.25); }
.pw-word:disabled { opacity: .45; }
.pw-word[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger); }
.stream-in { display: grid; grid-template-columns: minmax(0, calc(66vh * 16 / 9)) 12px var(--chat-w, 340px); justify-content: center; gap: 6px; }
.splitter { cursor: col-resize; border-radius: 6px; background: linear-gradient(var(--line), var(--line)) center / 2px 50% no-repeat; transition: background .15s; touch-action: none; }
.splitter:hover, .stream-in.dragging .splitter { background: linear-gradient(var(--brass), var(--brass)) center / 3px 60% no-repeat; }
.stream-in.dragging { user-select: none; }
.stream-in.dragging iframe { pointer-events: none; }         /* иначе рамка Twitch перехватывает мышь во время перетаскивания */
/* плеер не выше двух третей экрана: верх панели остаётся виден под ним */
.player { aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--brass-lo), 0 10px 30px rgba(0,0,0,.45); }
.chatbox { border-radius: var(--radius); overflow: hidden; background: var(--plate); box-shadow: inset 0 0 0 1px var(--brass-lo), 0 10px 30px rgba(0,0,0,.45); min-height: 300px; }
.player iframe, .chatbox iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 1500px) { .stream { max-width: 1760px; } }
@media (max-width: 900px) {
  .stream { padding: 0 12px; margin-top: 12px; }
  .stream-in { grid-template-columns: 1fr; }
  .splitter { display: none; }
  .chatbox { height: 420px; }
}

/* приборная панель: два столбца, под ними вкладки */
.board { position: relative; z-index: 1; display: grid; gap: var(--gap); padding: 14px 20px 30px; max-width: 1360px; margin: 0 auto;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
.col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.more-wrap { grid-column: 1 / -1; display: grid; gap: 10px; }
.more-wrap .panel { padding-top: 16px; }
.fold { position: absolute; top: 12px; right: 14px; z-index: 1; border: 0; background: none; padding: 4px 0; color: var(--text-dim);
  font: 600 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.fold::after { content: " ▴"; }
.fold:hover { color: var(--brass-hi); }
.more-wrap .panel > h2 { padding-right: 96px; }
/* два столбца в своей строке: липкий «Ты» упирается в её низ и не наезжает на «Ещё» */
.cols { grid-column: 1 / -1; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
/* топ в правом столбце: пьедестал и три строки, остальное — во вкладке «Таблицы» */
.top.mini { padding: 10px 4px 0; }
.top.mini h2 { padding: 0 12px; }
.top.mini h2 small { margin-left: auto; }
.top.mini .board-list { grid-template-columns: 1fr; }
.top.mini .board-list li:nth-child(n + 4):not(.me) { display: none; }
@media (min-width: 1500px) { .board { max-width: 1480px; } }
.card { background: linear-gradient(180deg, var(--plate), #161b14); border-radius: var(--radius); padding: 14px 16px 16px; position: relative; min-width: 0;
  box-shadow: inset 0 0 0 1px var(--brass-lo), inset 0 0 0 4px var(--plate), inset 0 0 0 5px rgba(201,164,92,.22), 0 10px 30px rgba(0,0,0,.35); }
.card h2, .top.mini h2 { margin: 0 0 10px; font: 900 14px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card h2 small { text-transform: none; letter-spacing: .02em; }
.more { margin-top: 10px; border: 0; background: none; color: var(--brass); font: 600 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; padding: 4px 0; }
.more:hover { color: var(--brass-hi); }
.more::after { content: " ▾"; }
.more[aria-expanded="true"]::after { content: " ▴"; }

/* сейчас: призывы и события */
.calls { display: grid; gap: 10px; }
.call { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "left title" "left sub" "bar bar" "btn btn"; gap: 4px 16px; align-items: center;
  padding: 14px 16px; border-radius: var(--radius); background: rgba(201,139,85,.12); box-shadow: inset 0 0 0 2px #c98b55;
  position: relative; overflow: hidden; margin-bottom: 10px; }
.call::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px #f0b57a, inset 0 0 22px rgba(240,181,122,.35); animation: fadepulse 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes fadepulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.call > b { grid-area: title; font: 900 19px/1.1 var(--display); color: var(--brass-hi); padding-right: 60px; }
.call > span { grid-area: sub; color: var(--dim); font-size: 13px; padding-right: 60px; }
.call .left { grid-area: left; font: 700 46px/1 var(--ui); color: var(--call); font-variant-numeric: tabular-nums; min-width: 56px; text-align: center; }
.call .bar { grid-area: bar; height: 4px; margin-top: 6px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.call .bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: #f0b57a; transition: transform .25s linear; }
.call .btn { grid-area: btn; margin-top: 6px; }
.call .pic { position: absolute; right: 10px; top: 8px; width: 54px; height: 54px; object-fit: contain; opacity: .9; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.events { display: grid; gap: 10px; grid-template-columns: 1fr; }
.ev { position: relative; padding: 10px 12px 12px; border-radius: var(--radius); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ev.in, .call.in { animation: pop .35s ease-out; }
.ev .pic { position: absolute; right: 8px; top: 6px; width: 60px; height: 60px; object-fit: contain; opacity: .95; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.ev .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-right: 66px; }
.ev .head b { font: 900 14px/1.1 var(--display); letter-spacing: .06em; }
.ev .head span { font: 700 18px/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--brass-hi); }
.ev .sub { margin-top: 5px; color: var(--dim); font-size: 13px; padding-right: 60px; }
.ev .hp { height: 8px; margin-top: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.ev .hp i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, #ff8a7a, var(--blood)); transition: transform .3s, width .3s; }
.ev .hp.soul i { background: linear-gradient(90deg, #a8f0da, var(--soul)); }
.ev .phases { display: flex; gap: 6px; margin-top: 8px; }
.ev .phases div { flex: 1; text-align: center; padding: 3px; border-radius: 3px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: rgba(255,255,255,.04); }
.ev .phases div.on { color: #2a1d08; background: var(--brass); font-weight: 700; }
.ev .do { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ev.boss { box-shadow: inset 0 0 0 2px var(--blood); }
.ev.boss.hit { animation: shake .35s; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ev.orb { box-shadow: inset 0 0 0 2px var(--soul); }
.ev.orb .pic { animation: orbfly 1.2s ease-in-out infinite alternate; }
@keyframes orbfly { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
.ev.relay.amber { box-shadow: inset 0 0 0 2px var(--amber); } .ev.relay.sapphire { box-shadow: inset 0 0 0 2px var(--sapphire); }
.ev.hole { box-shadow: inset 0 0 0 2px var(--spirit); }
.ev.hole .pic { animation: spinslow 6s linear infinite; }
@keyframes spinslow { to { transform: rotate(360deg); } }
.ev.patron { box-shadow: inset 0 0 0 2px var(--spirit); background: linear-gradient(180deg, rgba(167,123,217,.18), var(--plate-2)); }
.ev.statue { box-shadow: inset 0 0 0 2px var(--brass-lo); }
/* третий уровень: законченное, ждущее, линия, Покровитель — строкой без рамки */
.ev.done, .ev.idle { background: transparent; box-shadow: none; padding: 4px 2px 4px 6px; }
.ev.done .pic, .ev.idle .pic { display: none; }
.ev.done .head, .ev.idle .head { padding-right: 0; }
.ev.done .head b, .ev.idle .head b { font: 600 14px/1.2 var(--ui); letter-spacing: 0; color: var(--text-dim); }
.ev.done .sub, .ev.idle .sub { margin-top: 2px; font-size: 12px; padding-right: 0; }
.ev.t3 { background: transparent; box-shadow: none; padding: 4px 2px; display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 13px; }
.ev.t3 img { width: 22px; height: 22px; object-fit: contain; }
.ev.t3 .vs { flex: 1; min-width: 60px; height: 8px; border-radius: var(--r-1); background: var(--sapphire); overflow: hidden; }
.ev.t3 .vs i { display: block; height: 100%; background: var(--amber); }
.ev.t3 .amber { color: var(--amber); } .ev.t3 .sapphire { color: var(--sapphire); }
.chipb.link { border: 0; background: none; color: var(--brass); cursor: pointer; padding: 4px 6px; font: 600 12px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.chipb.link:hover { color: var(--brass-hi); }
.people { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.people span { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 9px; background: rgba(255,255,255,.08); }
.hits { display: flex; gap: 3px; margin-top: 8px; } .hits i { flex: 1; height: 8px; border-radius: 2px; background: rgba(255,255,255,.08); } .hits i.on { background: var(--brass-hi); }
.tally div { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; font-size: 13px; }
.tally i { display: block; height: 4px; background: var(--spirit); border-radius: 2px; grid-column: 1 / -1; }
.quiet { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; color: var(--dim); font-size: 13px; }
.quiet i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); cursor: help; }
.quiet i img { width: 34px; height: 34px; object-fit: contain; opacity: .85; }

/* ты: души, звание, фракция, герой, предметы — одной плашкой */
.locked { display: grid; grid-template-columns: 56px 1fr; gap: 4px 12px; align-items: center; }
.locked .ghost { width: 56px; grid-row: 1 / span 3; animation: float 3s ease-in-out infinite; }
.locked b { font-weight: 600; font-size: 15px; }
.locked p { color: var(--text-dim); font-size: 13px; margin: 0; }
.locked .btn { justify-self: start; margin-top: 4px; }
.goal { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: var(--r-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--soul-deep); }
.goal b { font-weight: 600; font-size: 14px; }
.goal small { display: block; color: var(--text-dim); font-size: 12px; }
.goal:empty { display: none; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.souls { position: relative; display: grid; grid-template-columns: 56px auto 1fr; gap: 0 12px; align-items: center; }
.souls .ghost { width: 56px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(127,224,191,.45)); }
.souls .count { display: flex; align-items: baseline; gap: 6px; }
.souls .count b { font: 900 40px/1 var(--display); color: var(--soul); text-shadow: 0 0 24px rgba(127,224,191,.35); font-variant-numeric: tabular-nums; }
.souls .count b.up { animation: flash .6s; }
@keyframes flash { 0% { color: #fff; transform: scale(1.08); } 100% { color: var(--soul); transform: none; } }
.souls .count i { font-style: normal; color: var(--dim); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.burst { position: absolute; left: 16px; top: -4px; width: 60px; height: 60px; pointer-events: none; }
.burst i { position: absolute; left: 50%; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--soul); box-shadow: 0 0 8px var(--soul); animation: soulup 1.1s ease-out forwards; }
@keyframes soulup { from { opacity: 1; transform: translate(-50%, 0) scale(1); } to { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -70px) scale(.4); } }
.rank { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 0 10px; align-items: center; justify-self: end; min-width: 0; }
.rank img { position: absolute; left: 7px; top: 7px; width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.rank .ring { width: 46px; height: 46px; transform: rotate(-90deg); }
.rank .ring circle { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 5; }
.rank .ring #ring-fill { stroke: var(--brass-hi); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.rank .lvl b { display: block; color: var(--brass-hi); font: 700 13px/1.1 var(--label); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.rank .lvl span { color: var(--dim); font-size: 12px; white-space: nowrap; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.facts .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 14px; background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.facts .chip img { width: 22px; height: 22px; object-fit: contain; border-radius: 50%; }
.facts .chip b { font-weight: 600; }
.facts .chip.amber b { color: var(--amber); } .facts .chip.sapphire b { color: var(--sapphire); }
.facts .chip em { font-style: normal; color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.facts .chip.items img { border-radius: 0; }
.facts .chip.none { color: var(--dim); box-shadow: none; background: none; padding-left: 0; }
.status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.status:empty { display: none; }
.status span { font-size: 12px; padding: 3px 9px; border-radius: 10px; background: rgba(255,255,255,.06); color: var(--dim); }
.status span.warn { background: rgba(229,83,61,.18); color: #ffb3a8; }
.status span.good { background: rgba(127,224,191,.14); color: var(--soul); }
.me-more { margin-top: 8px; display: grid; gap: 8px; font-size: 13px; color: var(--dim); }
.me-more p { margin: 0; }
.me-more b { color: var(--cream); font-weight: 600; }
.me-more .row { display: flex; flex-wrap: wrap; gap: 6px; }

/* линия: две фракции и Покровитель */
.factions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.faction { padding: 8px 10px; border-radius: var(--radius); background: var(--plate-2); position: relative; overflow: hidden; }
.faction::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; background: radial-gradient(120px 80px at 100% 0, currentColor, transparent 70%); }
.faction.amber { color: var(--amber); } .faction.sapphire { color: var(--sapphire); }
.faction .name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.faction .name img { width: 26px; height: 26px; border-radius: 50%; }
.faction .name small { margin-left: auto; white-space: nowrap; }
.faction .st { display: grid; grid-template-columns: 68px 1fr 44px; gap: 4px 6px; align-items: center; margin-top: 6px; font-size: 11px; color: var(--dim); }
.faction .st .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.faction .st .bar i { display: block; height: 100%; background: currentColor; transition: width .6s; }
.faction .st .v { text-align: right; font-variant-numeric: tabular-nums; }
.faction .st .dead { color: var(--blood); }
/* в эфире: шкала клича фракции и сколько осада сняла с передней постройки за стрим */
.faction .cry { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; margin-top: 6px; font-size: 11px; color: var(--dim); }
.faction .cry b { color: var(--cream); font-weight: 600; font-variant-numeric: tabular-nums; }
.faction .cry .bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.faction .cry .bar i { display: block; height: 100%; background: currentColor; transition: width .6s; }
.faction .wall { margin-top: 4px; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.factions .cryhow { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--dim); }
.patron { position: relative; margin-top: 10px; padding: 8px 10px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(167,123,217,.14), var(--plate-2)); display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; }
.patron img { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 0 14px rgba(167,123,217,.6)); }
.patron .glow { position: absolute; left: 10px; top: 50%; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201,164,92,.8), rgba(167,123,217,.4) 50%, transparent 72%); animation: glowpulse 1.8s ease-in-out infinite; }
@keyframes glowpulse { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.3); } }
.patron b { font: 900 13px/1.1 var(--display); color: var(--spirit); letter-spacing: .06em; }
.patron .bar { height: 6px; margin: 6px 0 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.patron .bar i { display: block; height: 100%; background: linear-gradient(90deg, #6a46a3, var(--spirit)); transition: width .6s; }
.patron span { font-size: 12px; color: var(--dim); }

/* топ душ: пьедестал и хвост десятки */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; align-items: end; }
.podium .p { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 8px 10px; border-radius: var(--radius); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); text-align: center; min-width: 0; }
.podium .p > b { font: 700 15px/1.1 var(--label); color: var(--cream); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .p .n { font: 700 18px/1 var(--label); color: var(--soul); font-variant-numeric: tabular-nums; }
.podium .p small { font-size: 11px; display: flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; white-space: nowrap; }
.podium .medal { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 900 15px var(--display); color: #2a1d08; box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5); }
.podium .badge { position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.podium .crown { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.podium .p1 { order: 2; padding-top: 22px; background: linear-gradient(180deg, rgba(236,208,138,.22), var(--plate-2)); box-shadow: inset 0 0 0 1px var(--brass), 0 0 24px rgba(236,208,138,.18); }
.podium .p1 .medal { width: 42px; height: 42px; font-size: 19px; background: linear-gradient(#ffe9a8, #c9a45c 60%, #8a6a2c); }
.podium .p1 > b { font-size: 17px; color: var(--brass-hi); }
.podium .p1 .n { font-size: 22px; }
.podium .p2 { order: 1; background: linear-gradient(180deg, rgba(201,206,214,.14), var(--plate-2)); box-shadow: inset 0 0 0 1px #9aa3ad; }
.podium .p2 .medal { background: linear-gradient(#f2f4f7, #b8c0c9 60%, #6e7780); }
.podium .p3 { order: 3; background: linear-gradient(180deg, rgba(184,115,51,.16), var(--plate-2)); box-shadow: inset 0 0 0 1px #b87333; }
.podium .p3 .medal { background: linear-gradient(#e8b58a, #b87333 60%, #6f4420); }
.podium .p.me { outline: 2px solid var(--soul); outline-offset: -2px; }
.board-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.board-list li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 5px 10px; border-radius: 4px; background: rgba(255,255,255,.035); font-size: 13px; }
.board-list .pos { font: 700 12px var(--label); color: var(--dim); text-align: right; font-style: normal; }
.board-list .who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.board-list .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .who em { font-style: normal; color: var(--dim); font-size: 11px; white-space: nowrap; }
.board-list .n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cream); }
.board-list li.me { background: rgba(127,224,191,.12); box-shadow: inset 2px 0 0 var(--soul); }
.board-me { margin: 10px 0 0; font-size: 13px; color: var(--dim); }
.board-me b { color: var(--soul); }

/* действия: иконки, цена в уголке, кулдаун вместо цены */
.acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.acts button { position: relative; display: grid; justify-items: center; gap: 5px; padding: 10px 4px 8px; border: 0; border-radius: var(--radius); background: var(--plate-2); color: var(--cream);
  box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .15s, transform .08s; min-width: 0; }
.acts button:hover { box-shadow: inset 0 0 0 1px var(--brass); }
.acts button:active { transform: translateY(1px); }
.acts .ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3a4532, var(--plate)); box-shadow: inset 0 0 0 1px var(--brass-lo); font-size: 24px; }
.acts .ic img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.acts .ic i { font-style: normal; }
.acts button b { font: 600 12px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acts button small { position: absolute; right: 6px; top: 5px; font-size: 11px; color: var(--brass); font-variant-numeric: tabular-nums; }
.acts button.cd { opacity: .55; }
.acts button.cd small { color: #f0b57a; }

/* вкладки подробностей */
.panel { animation: pop .25s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* лента */
#feed-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
#feed-list li { padding: 7px 10px; border-radius: 4px; background: rgba(255,255,255,.035); font-size: 13px; line-height: 1.35; animation: pop .3s ease-out; }
#feed-list li time { display: inline-block; font-size: 11px; color: var(--dim); letter-spacing: .08em; margin-right: 8px; }
#feed-list li.mine { background: rgba(127,224,191,.1); box-shadow: inset 2px 0 0 var(--soul); }
#feed-list li.sent { color: var(--dim); }
#feed-list:empty::after { content: "пока ничего — бот напишет сюда, когда что-то случится"; color: var(--dim); font-size: 13px; }

/* магазин: иконка, имя, цена; описание — по нажатию */
.tiers { display: grid; gap: 10px; }
.tier { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: start; }
.tier h3 { margin: 8px 0 0; font: 700 13px/1.2 var(--label); color: var(--brass); letter-spacing: .08em; text-transform: uppercase; }
.tier .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.item { display: grid; grid-template-columns: 40px 1fr auto; grid-template-areas: "pic name buy" "what what what"; gap: 2px 8px; align-items: center; padding: 6px 8px; border-radius: var(--radius); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .15s; }
.item:hover { box-shadow: inset 0 0 0 1px var(--brass); }
.item img { grid-area: pic; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.item b { grid-area: name; font: 900 13px/1.1 var(--display); color: var(--cream); }
.item .btn { grid-area: buy; }
.item p { grid-area: what; margin: 0; font-size: 12px; color: var(--dim); display: none; padding-top: 4px; }
.item.open p { display: block; }
.item.have { box-shadow: inset 0 0 0 1px var(--soul); }
.item.t3 b { color: var(--brass-hi); }

/* герои: плашки с именем, подробности — выше по нажатию */
.herogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.herogrid .h { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 4px; background: var(--plate-2); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; text-align: left; font: 600 13px/1.1 var(--label); min-width: 0; }
.herogrid .h:hover { box-shadow: inset 0 0 0 1px var(--brass); }
.herogrid .h i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line); }
.herogrid .h i.gun { background: #f0b57a; } .herogrid .h i.spirit { background: var(--spirit); }
.herogrid .h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.herogrid .h em { margin-left: auto; font-style: normal; color: var(--soul); font-size: 11px; }
.herogrid .h.mine { box-shadow: inset 0 0 0 2px var(--soul); }
.herogrid .h.pick { box-shadow: inset 0 0 0 1px var(--brass); background: var(--plate-3); }
.hero-detail { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; margin-bottom: 10px; border-radius: var(--radius); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--brass-lo); font-size: 13px; }
.hero-detail b { font: 900 16px/1.1 var(--display); color: var(--brass-hi); }
.hero-detail .role { color: var(--dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-left: 6px; }
.hero-detail .role.gun { color: #f0b57a; } .hero-detail .role.spirit { color: var(--spirit); }
.hero-detail p { margin: 0; grid-column: 1; color: var(--cream); }
.hero-detail p.off { color: var(--dim); }
.hero-detail .btn { grid-column: 2; grid-row: 1 / span 3; }
.legend { display: flex; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--dim); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* как устроено: плитки с картинками, минимум текста */
.tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tabs button { border: 0; border-radius: 3px; padding: 6px 12px; background: var(--plate-2); color: var(--dim); cursor: pointer; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.tabs button.on { background: var(--brass); color: #2a1d08; font-weight: 700; }
.rules-body { font-size: 13px; }
.rules-body h3 { margin: 14px 0 0; font: 900 13px/1.1 var(--display); color: var(--brass); letter-spacing: .1em; text-transform: uppercase; }
.rules-body p { margin: 8px 0 0; color: var(--dim); }
.rules-body p b, .rules-body .num { color: var(--cream); font-weight: 600; }
.rules-body .how { margin: 8px 0 0; padding-left: 18px; color: var(--dim); }
.rules-body .how li { margin-top: 6px; line-height: 1.45; }
.rules-body .how b { color: var(--cream); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 8px; }
.tile { display: grid; grid-template-columns: 44px 1fr; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: var(--radius); background: var(--plate-2); min-width: 0; }
.tile img, .tile .emo { grid-row: 1 / span 2; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.tile .emo { display: grid; place-items: center; font-size: 26px; font-style: normal; filter: none; }
.tile b { font: 700 13px/1.15 var(--label); letter-spacing: .03em; color: var(--cream); }
.tile span { font-size: 12px; color: var(--dim); line-height: 1.3; }
.tile .num { color: var(--soul); font-weight: 600; }
.tile code { font-size: 12px; padding: 0 4px; }
.ranks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; text-align: center; }
.ranks div { padding: 8px 4px; border-radius: var(--radius); background: var(--plate-2); font-size: 11px; color: var(--dim); }
.ranks img { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto 4px; }
.ranks b { display: block; color: var(--brass-hi); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.rules-body .cmds { width: 100%; border-collapse: collapse; }
.rules-body .cmds td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 13px; }
.rules-body .cmds td:first-child { white-space: nowrap; }
.rules-body .try { margin-left: 8px; }
.search { width: 100%; padding: 8px 12px; margin: 0 0 8px; border-radius: 4px; border: 1px solid var(--line); background: var(--soot); color: var(--cream); font-size: 15px; }
.search:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.prizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 8px; }
.prizes div { padding: 6px 10px; border-radius: 4px; background: var(--plate-2); font-size: 12px; color: var(--dim); }
.prizes div b { color: var(--cream); font-weight: 600; }

/* таблицы */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
td, th { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; }
th { font-weight: 500; color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
td.n { text-align: right; font-variant-numeric: tabular-nums; }
td .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.amber { background: var(--amber); } .dot.sapphire { background: var(--sapphire); } .dot.none { background: var(--line); }
tr.me td { color: var(--soul); }
.tab .quiet { font-size: 13px; }

.foot { position: relative; z-index: 1; text-align: center; color: var(--dim); font-size: 12px; padding: 0 20px 30px; }

/* диалог цели */
dialog.ask { border: 0; border-radius: var(--radius); padding: 0; background: transparent; color: var(--cream); max-width: min(94vw, 420px); width: 100%; }
dialog.ask::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
dialog.ask form { padding: 18px; background: var(--plate); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--brass-lo), 0 20px 50px rgba(0,0,0,.6); display: grid; gap: 10px; }
dialog.ask h3 { margin: 0; font: 900 18px/1.1 var(--display); color: var(--brass-hi); }
dialog.ask .hint { margin: 0; color: var(--dim); font-size: 13px; }
dialog.ask label { display: grid; gap: 4px; font-size: 13px; color: var(--dim); }
dialog.ask input { padding: 10px 12px; border-radius: 4px; border: 1px solid var(--line); background: var(--soot); color: var(--cream); font-size: 16px; }
dialog.ask input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
dialog.ask .chips { display: flex; flex-wrap: wrap; gap: 6px; }
dialog.ask .chips button { border: 0; border-radius: 12px; padding: 4px 10px; background: var(--plate-2); color: var(--cream); cursor: pointer; font-size: 13px; box-shadow: inset 0 0 0 1px var(--line); }
dialog.ask .chips button:hover { box-shadow: inset 0 0 0 1px var(--brass); }
dialog.ask .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* всплывашки: ответы бота приходят сюда, даже если лента закрыта */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 5; display: grid; gap: 8px; max-width: min(92vw, 380px); }
body.stage-back-on .toasts { bottom: 76px; }

/* свёрнутая партия (Ринг, Шахматы): плашка внизу экрана — дорога назад к арене или доске; горит, когда ждут тебя */
.stage-back { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 6; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px;
  background: rgba(18,21,16,.96); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-brass), 0 8px 24px rgba(0,0,0,.5);
  font: 500 14px/1.2 var(--ui); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stage-back .gi { margin: 0; color: var(--brass); }
.stage-back b { color: var(--brass-hi); font-weight: 700; }
.stage-back em { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-style: normal; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.stage-back span { padding-left: 8px; border-left: 1px solid var(--line-brass); color: var(--brass-hi); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.stage-back:hover { box-shadow: inset 0 0 0 1px var(--brass), 0 8px 24px rgba(0,0,0,.5); }
.stage-back.hot { background: linear-gradient(#ffd3a3, #f0b57a 55%, #c4824a); color: var(--on-brass); animation: stagecall 1.2s ease-in-out infinite; }
.stage-back.hot .gi, .stage-back.hot b, .stage-back.hot em, .stage-back.hot span { color: var(--on-brass); border-color: rgba(42,29,8,.35); }
@keyframes stagecall { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,181,122,.0), 0 8px 24px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 0 7px rgba(240,181,122,.28), 0 8px 24px rgba(0,0,0,.5); } }
@media (prefers-reduced-motion: reduce) { .stage-back.hot { animation: none; } }
@media (max-width: 420px) { .stage-back { gap: 6px; padding: 8px 14px; font-size: 13px; } .stage-back span { padding-left: 6px; font-size: 11px; letter-spacing: .04em; } }
.toast { padding: 10px 14px; border-radius: 4px; background: var(--plate-2); color: var(--cream); font-size: 14px; box-shadow: inset 0 0 0 1px var(--line), 0 8px 24px rgba(0,0,0,.5); animation: pop .3s ease-out; }
.toast.bad { box-shadow: inset 0 0 0 1px var(--blood), 0 8px 24px rgba(0,0,0,.5); }
.toast.good { box-shadow: inset 0 0 0 1px var(--soul), 0 8px 24px rgba(0,0,0,.5); }
.toast.me { box-shadow: inset 2px 0 0 var(--soul), inset 0 0 0 1px var(--line), 0 8px 24px rgba(0,0,0,.5); }

/* телефон: один столбец, кнопки крупнее */
@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; padding: 12px 12px 24px; }
  .hero.play { min-height: 360px; }   /* на телефоне труперам нужно место под строкой эфира */
  .cols, .col { display: contents; }
  .now { order: 1; } .me { order: 2; } .loot { order: 3; } .top { order: 4; } .more-wrap { order: 0; }   /* окна — первыми, под плеером */
  .col > .card:last-child { flex: none; }
  .hero { min-height: 236px; }
  .topbar { padding: 0 12px; height: 52px; gap: 8px; }
  .topbar .live, .topbar #stream-toggle, .who .chip b { display: none; }
  .next { padding: 14px 14px 6px; max-width: 74%; }
  .next h1 { font-size: 26px; }
  .next .btn.big { min-height: 52px; font-size: 16px; padding: 0 18px; }
  .limit { padding: 4px 14px 10px; }
  .brand i { display: none; }
  .souls { grid-template-columns: 48px 1fr; }
  .souls .ghost { width: 48px; }
  .souls .count b { font-size: 34px; }
  .rank { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
  .btn.big { min-height: 56px; font-size: 21px; }
  .tier { grid-template-columns: 1fr; gap: 4px; }
  .ranks img { width: 36px; height: 36px; }
}
@media (max-width: 420px) {
  .factions { grid-template-columns: 1fr; }
  .acts { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .acts .ic { width: 44px; height: 44px; } .acts .ic img { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky .rim, .call, .ev, #feed-list li, .toast, .souls .count b, .ghost, .live i, .ev .pic, .patron img, .burst i, .panel,
  .call::after, .patron .glow, .sky .bat { animation: none !important; }
}

/* липкая полоска разделов: прозрачная под шапкой, плотная, когда шапка ушла вверх */
.jump { position: sticky; top: 0; z-index: 4; display: flex; gap: 2px; align-items: center; padding: 6px 12px; margin: 0 auto; max-width: 1760px;
  overflow-x: auto; scrollbar-width: none; background: transparent; transition: background .2s, box-shadow .2s; }
.jump::-webkit-scrollbar { display: none; }
.jump.stuck { background: rgba(18,21,16,.96); box-shadow: 0 1px 0 var(--brass-lo), 0 8px 24px rgba(0,0,0,.35); }
.jump a { position: relative; flex: none; padding: 10px 12px; border-radius: var(--r-2); color: var(--text-dim); text-decoration: none; font: 600 13px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.jump a:hover { color: var(--cream); }
.jump .sep { flex: none; width: 1px; height: 18px; margin: 0 6px; background: var(--brass-lo); }
.jump a.on { color: var(--brass-hi); box-shadow: inset 0 -2px 0 var(--brass); }
.jump a em { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--soul); color: #0d2a22; font: 700 10px/16px var(--label); font-style: normal; }
.jump .totop { margin-left: 8px; flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--plate-2); color: var(--brass); cursor: pointer; box-shadow: inset 0 0 0 1px var(--brass-lo); opacity: 0; pointer-events: none; transition: opacity .2s; }
.jump.stuck .totop { opacity: 1; pointer-events: auto; }
.card, .more-wrap { scroll-margin-top: 54px; }
@media (max-width: 420px) {
  .jump { padding: 6px 8px; }
  .jump a { padding: 10px 7px; letter-spacing: .06em; }
  .jump:not(.stuck) .totop { display: none; }
  .jump.stuck a { padding: 10px 6px; }                       /* в липкой полосе рядом «наверх» — поля уже */
}

/* викторина и прогноз на матч */
.ev.quiz { box-shadow: inset 0 0 0 2px var(--brass); background: linear-gradient(180deg, rgba(201,164,92,.14), var(--plate-2)); }
.ev.quiz .q { margin: 8px 0 0; font: 700 17px/1.3 var(--label); color: var(--cream); }
.ev .hint { color: var(--dim); font-size: 12px; align-self: center; }
.ev.predict { box-shadow: inset 0 0 0 2px var(--soul); }
.ev.predict.done.loss { box-shadow: inset 0 0 0 2px var(--blood); }
.pools { height: 10px; margin-top: 8px; border-radius: 5px; background: linear-gradient(90deg, #ff8a7a, var(--blood)); overflow: hidden; }
.pools i { display: block; height: 100%; background: linear-gradient(90deg, #a8f0da, var(--soul)); transition: width .4s; }
.pools-l { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--dim); }
.pools-l span:first-child { color: var(--soul); } .pools-l span:last-child { color: #ffb3a8; text-align: right; }
.ev .mine { margin-top: 4px; font-size: 13px; color: var(--cream); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sides > div { display: grid; gap: 6px; padding: 8px; border-radius: var(--radius); background: rgba(255,255,255,.04); }
.sides b { font: 900 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.sides > div:first-child b { color: var(--soul); } .sides > div:last-child b { color: #ffb3a8; }
.sides span { display: flex; flex-wrap: wrap; gap: 6px; }
.modbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--dim); }
.modbar:empty { display: none; }

/* задания дня — в карточке «Ты» */
.quests { margin-top: 10px; }
.quests:empty { display: none; }
.quests h3 { margin: 0 0 6px; font: 900 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.quest { display: grid; grid-template-columns: 30px 1fr; grid-template-areas: "ic title" "ic bar" "ic n"; gap: 2px 8px; align-items: center; padding: 6px 8px; border-radius: var(--radius); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.quest img, .quest .emo { grid-area: ic; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.quest .emo { display: grid; place-items: center; font-size: 20px; font-style: normal; filter: none; }
.quest b { grid-area: title; font: 600 11px/1.2 var(--label); color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quest .bar { grid-area: bar; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.quest .bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: var(--soul); transition: transform .4s; }
.quest span { grid-area: n; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.quest.done { box-shadow: inset 0 0 0 1px var(--soul); } .quest.done span { color: var(--soul); font-weight: 700; }
@media (max-width: 420px) { .qgrid { grid-template-columns: repeat(2, 1fr); } }

/* колесо в 3D: появляется в углу, когда кто-то крутит на стриме; крутится одной трансформацией */
.wheel3d { position: fixed; left: 16px; bottom: 16px; z-index: 5; width: 240px; pointer-events: none; perspective: 520px; --wd: 240px; }
.wheel3d .disc { position: relative; width: var(--wd); height: var(--wd); transform: rotateX(56deg); transform-style: preserve-3d; }
.wheel3d .face { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 6px var(--brass-lo), 0 0 0 9px var(--brass), 0 18px 30px rgba(0,0,0,.55); will-change: transform; overflow: hidden; }
.wheel3d .face span { position: absolute; left: 50%; top: 50%; width: 0; height: var(--wd); white-space: nowrap; font: 700 9px/1 var(--label); color: var(--cream); letter-spacing: .04em; transform-origin: 0 0; padding-left: 4px; }
.wheel3d .hub { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ecd08a, #8a6a2c); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.wheel3d .pin { position: absolute; left: 50%; top: -4px; width: 0; height: 0; margin-left: -8px; border: 8px solid transparent; border-top: 18px solid var(--blood); filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.wheel3d .who { margin-top: 10px; text-align: center; font: 700 12px/1.2 var(--label); color: var(--brass-hi); text-shadow: 0 1px 4px rgba(0,0,0,.8); }
/* настоящее 3D (Three.js, WebGL): маленький холст, тень — статичным градиентом под ним, а не фильтром */
.wheel3d .gl { display: block; width: var(--wd); height: var(--wd); background: radial-gradient(ellipse 44% 22% at 50% 70%, rgba(0,0,0,.55), transparent 72%); }
.wheel3d.three .disc, .wheel3d.three .pin { display: none; }
@media (max-width: 900px) { .wheel3d { width: 160px; left: 8px; bottom: 8px; --wd: 160px; } }

/* сезон: хэллоуин приходит из настроек программы ([event]) — латунь становится тыквенной, в небе летучие мыши */
:root[data-theme="halloween"] { --brass: #e08a2e; --brass-hi: #ffb35c; --brass-lo: #7a3f12; --spirit: #b36cff; }
:root[data-theme="halloween"] .banner .haze { background: linear-gradient(180deg, rgba(40,10,50,.4) 0, rgba(18,21,16,.15) 40%, rgba(18,21,16,.9) 90%, var(--soot) 100%); }
.sky .bat { position: absolute; left: 0; width: 28px; height: 14px; background: #000; opacity: .6; animation: bat 16s linear infinite;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M14 7Q10 0 2 3q4 2 3 6 4-1 7 2l2-2 2 2q3-3 7-2-1-4 3-6-8-3-12 4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M14 7Q10 0 2 3q4 2 3 6 4-1 7 2l2-2 2 2q3-3 7-2-1-4 3-6-8-3-12 4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.sky .b1 { top: 16%; animation-duration: 18s; } .sky .b2 { top: 28%; animation-duration: 23s; animation-delay: -9s; } .sky .b3 { top: 10%; animation-duration: 14s; animation-delay: -4s; }
@keyframes bat { from { transform: translate3d(-40px, 0, 0) scaleY(1); } 50% { transform: translate3d(50vw, -30px, 0) scaleY(.6); } to { transform: translate3d(100vw, 0, 0) scaleY(1); } }


/* дуэли: статус готовности, боец, выбор игры и ставки, сама партия */
.dstat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.dstat .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.dstat.on { color: var(--cream); } .dstat.on .dot { background: var(--soul); box-shadow: 0 0 8px var(--soul); }
.dstat.off .dot { background: var(--blood); }
.dstat > span { flex: 1 1 200px; min-width: 0; }         /* длинная строка не уносит точку на отдельную строку */
.fighter { margin-top: 10px; padding: 8px 10px; border-radius: var(--radius); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); }
.fhead { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--dim); }
.fhead b { color: var(--brass-hi); font: 900 13px/1.2 var(--display); letter-spacing: .06em; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.stat { display: grid; gap: 2px; justify-items: center; padding: 6px 4px; border-radius: 4px; background: rgba(255,255,255,.04); }
.stat b { font: 600 11px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.stat em { font: 900 20px/1 var(--display); font-style: normal; color: var(--cream); }
.stat .btn { padding: 2px 8px; min-height: 24px; font-size: 11px; }
.dform { margin-top: 10px; display: grid; gap: 8px; }
.gtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gtile { display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border: 0; border-radius: var(--radius); background: var(--plate-2); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.gtile i { font-style: normal; font-size: 22px; } .gtile b { font: 600 12px/1 var(--label); letter-spacing: .06em; text-transform: uppercase; }
.gtile.on { box-shadow: inset 0 0 0 2px var(--brass); background: var(--plate-3); }
.dform .about, .dgame .about { margin: 0; font-size: 12px; color: var(--dim); }
.drow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--dim); } .drow > span { min-width: 52px; }
.drow em { font-style: normal; font-size: 12px; }
.chipb { border: 0; border-radius: 12px; padding: 4px 10px; background: var(--plate-2); color: var(--cream); cursor: pointer; font-size: 13px; box-shadow: inset 0 0 0 1px var(--line); }
.chipb.on { background: var(--brass); color: #2a1d08; font-weight: 700; }
.dwait, .dopen { margin-top: 10px; display: grid; gap: 6px; font-size: 13px; }
.dwait { padding: 8px 10px; border-radius: var(--radius); background: rgba(201,164,92,.1); box-shadow: inset 0 0 0 1px var(--brass-lo); }
.dopen > b { font: 900 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.dopen > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 4px; background: rgba(255,255,255,.04); }
.dopen > div > span:first-child { flex: 1; }
.dlive { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--dim); }
.dlive > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; max-width: 100%; padding: 3px 6px 3px 8px; border-radius: 12px; background: rgba(255,255,255,.05); }
.dlive .dl-who { min-width: 0; line-height: 28px; }                  /* строка ростом со значок: значок не вылезает на соседнюю */
.dgame { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--plate-2); box-shadow: inset 0 0 0 2px var(--brass); display: grid; gap: 8px; }
.dgame.done.won { box-shadow: inset 0 0 0 2px var(--soul); } .dgame.done.lost { box-shadow: inset 0 0 0 2px var(--blood); }
.dhead { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dhead b { font: 900 14px/1.1 var(--display); letter-spacing: .04em; } .dhead span { color: var(--dim); font-size: 12px; }
.dres { font: 700 18px/1.2 var(--label); color: var(--brass-hi); } .won .dres { color: var(--soul); } .lost .dres { color: #ffb3a8; }
.dlog { margin: 0; padding-left: 0; list-style: none; font-size: 12px; color: var(--dim); display: grid; gap: 2px; }
.drawpad { display: grid; place-items: center; gap: 4px; min-height: 140px; border: 0; border-radius: var(--radius); cursor: pointer; font: 900 28px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.drawpad small { font: 500 12px/1.2 var(--label); letter-spacing: .04em; text-transform: none; opacity: .8; }
.drawpad.armed { background: linear-gradient(180deg, #3a1a14, #1f1210); color: #ffb3a8; box-shadow: inset 0 0 0 2px var(--blood); }
.drawpad.go { background: linear-gradient(180deg, #a8f0da, #3fae90); color: #0d2a22; box-shadow: 0 0 30px rgba(127,224,191,.6); animation: gopulse .5s ease-in-out infinite alternate; }
@keyframes gopulse { from { transform: scale(1); } to { transform: scale(1.03); } }
.fbars { display: grid; gap: 6px; }
.fhp { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: center; font-size: 13px; }
.fhp div { height: 10px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.fhp i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, #ff8a7a, var(--blood)); transition: transform .4s; }
.fhp em { font-style: normal; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.fround, .qscore { font-size: 12px; color: var(--dim); }
.fmoves { display: flex; gap: 8px; flex-wrap: wrap; } .fmoves .btn { flex: 1; min-height: 48px; }
.qq { margin: 0; font: 700 16px/1.3 var(--label); }
.qform { display: flex; gap: 6px; }
.qform input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--line); background: var(--soot); color: var(--cream); font-size: 15px; }
.drolls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drolls > div { display: grid; gap: 2px; justify-items: center; padding: 8px; border-radius: var(--radius); background: rgba(255,255,255,.04); }
.drolls b { font-size: 13px; } .dice { font-size: 30px; line-height: 1; letter-spacing: 2px; }
.dice em { font: 700 14px/1 var(--label); font-style: normal; color: var(--soul); margin-left: 6px; } .dice.wait { color: var(--dim); }
.drolls small { color: var(--dim); font-size: 11px; }
.call .do { grid-area: btn; display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
@media (max-width: 900px) { .duels { order: 3; } .act { order: 4; } .lane { order: 5; } .top { order: 6; } .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .gtiles { grid-template-columns: repeat(2, 1fr); } }


/* карточка «Ты»: лист персонажа */
.hero-id { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 10px; border-radius: var(--radius); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); }
.hero-id .face { position: relative; width: 56px; height: 56px; }
.hero-id .face img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.hero-id .face .rk { position: absolute; right: -8px; bottom: -8px; width: 30px; height: 30px; border-radius: 0; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.hero-id .face .none { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--plate-3); color: var(--dim); font-size: 24px; }
.hero-id .who-id { display: grid; gap: 2px; min-width: 0; }
.hero-id .who-id b { font: 900 16px/1.1 var(--display); color: var(--brass-hi); }
.hero-id .who-id span { font-size: 12px; color: var(--dim); }
.hero-id .who-id span i { font-style: normal; color: var(--cream); }
.sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.sh { padding: 8px 10px; border-radius: var(--radius); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; display: grid; gap: 6px; align-content: start; }
.sh h3 { margin: 0; font: 900 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sh h3 small { text-transform: none; letter-spacing: .02em; }
.sh .xp { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.sh .xp i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: var(--brass); }
.sh .stats { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.sh .about { margin: 0; font-size: 12px; color: var(--dim); }
#sheet-items { grid-column: 1 / -1; }
.skill { display: grid; grid-template-columns: 76px 1fr; gap: 2px 8px; align-items: start; font-size: 12px; }
.skill b { font: 600 11px/1.5 var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.skill span { color: var(--cream); line-height: 1.35; }
.skill em { grid-column: 2; font-style: normal; color: var(--dim); font-size: 11px; }
.skill .btn { grid-column: 2; justify-self: start; }
.skill.on b { color: var(--soul); }
.inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.it { display: grid; grid-template-columns: 36px 1fr; grid-template-areas: "pic name" "pic what"; gap: 0 8px; align-items: center; padding: 5px 8px; border-radius: 4px; background: rgba(255,255,255,.04); min-width: 0; }
.it img { grid-area: pic; width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.it b { grid-area: name; font: 900 12px/1.1 var(--display); color: var(--cream); }
.it span { grid-area: what; font-size: 11px; line-height: 1.25; color: var(--dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sh .row { display: flex; flex-wrap: wrap; gap: 6px; }
/* линия: кто в какой фракции */
.members { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.members span { font-size: 11px; padding: 2px 7px; border-radius: 9px; background: rgba(255,255,255,.06); color: var(--dim); }
.members span.on { color: var(--cream); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px currentColor; }
.members span.me { color: var(--soul); font-weight: 700; }
.members em { font-size: 11px; color: var(--dim); }
.members .chipb { font-size: 11px; padding: 2px 8px; }
.factions .legend { grid-column: 1 / -1; margin-top: 2px; }
@media (max-width: 420px) { .sheet { grid-template-columns: 1fr; } .sh .stats { grid-template-columns: repeat(2, 1fr); } .hero-id { grid-template-columns: 56px 1fr; } }

:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hero { transition: none; } }

/* игры на странице: вкладки, дневной лимит, Знаток, лучшие за день */
.gtabs { margin-bottom: 8px; }
.daily { display: grid; gap: 4px; margin-bottom: 8px; font-size: 12px; color: var(--dim); } .daily b { color: var(--cream); }
.daily:empty { display: none; }
.daily .bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.daily .bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, var(--brass), var(--soul)); transition: transform .4s; }
.solo { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 8px; }
.solo > small { font: 600 11px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.solo.ok { box-shadow: inset 0 0 0 2px var(--soul); } .solo.ok .qq { color: var(--soul); }
.solo.bad { box-shadow: inset 0 0 0 2px var(--blood); } .solo.bad .qq { color: #ffb3a8; }
.chipb.bot.on { background: var(--soul); color: #0d2a22; }
.boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.bcol { padding: 8px 10px; border-radius: var(--radius); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.bcol > b { display: block; font: 900 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin-bottom: 6px; }
.bcol ol { margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 3px; font-size: 13px; }
.bcol li { counter-increment: n; display: grid; grid-template-columns: 18px 1fr auto; gap: 4px; align-items: baseline; }
.bcol li::before { content: counter(n) "."; color: var(--dim); font-size: 11px; }
.bcol li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcol li em { font-style: normal; color: var(--soul); font-variant-numeric: tabular-nums; }
.bcol li.me { color: var(--brass-hi); font-weight: 700; }
.bcol .about, #boards-body > .about { margin: 6px 0 0; font-size: 12px; color: var(--dim); }
@media (max-width: 600px) { .boards { grid-template-columns: 1fr; } }

/* подписчики канала: звезда и золото, рамка в карточке «Ты», своё задание */
.subst { font-style: normal; margin-right: 3px; font-size: 11px; }
.podium b.sub, .board-list .who .sub, .members span.sub { color: var(--brass-hi); }
.hero-id.sub { box-shadow: inset 0 0 0 1px var(--brass), 0 0 16px rgba(236,208,138,.25); }
.hero-id.sub .face img:first-child, .hero-id.sub .face .none { box-shadow: 0 0 0 2px var(--brass); }
.quest.subq { box-shadow: inset 0 0 0 1px var(--brass); } .quest.subq b { color: var(--brass-hi); }

/* души: где взять и куда потратить; полученное — серым, в конце */
.lrow.got { opacity: .6; }
.lrow.got em { color: var(--text-dim); }
.loot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lcol h3 { margin: 0 0 6px; font: 900 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.lcol.earn h3 { color: var(--soul); } .lcol.spend h3 { color: #ffb3a8; }
.lcol ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lrow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "ic t n" "ic s b"; gap: 1px 8px; align-items: center; padding: 5px 8px; border-radius: 4px; background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.lrow.hot { box-shadow: inset 0 0 0 1px var(--soul); background: linear-gradient(90deg, rgba(127,224,191,.14), var(--plate-2) 70%); }
.lrow .ic { grid-area: ic; font-style: normal; font-size: 18px; text-align: center; }
.lrow b { grid-area: t; font: 600 13px/1.2 var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow small { grid-area: s; font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lrow em { grid-area: n; font: 900 14px/1 var(--display); font-style: normal; color: var(--soul); text-align: right; white-space: nowrap; }
.spend .lrow em { color: #ffb3a8; }
.lrow .act { grid-area: b; justify-self: end; }
.lrow .act .btn { min-height: 24px; padding: 2px 10px; font-size: 11px; }
.lrow .ok { font-size: 11px; color: var(--soul); font-weight: 700; white-space: nowrap; }
.loot .more { margin-top: 8px; }
@media (max-width: 600px) { .loot-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .loot { order: 2; } }
/* лотерея, страховка, война фракций */
.ev.lottery .sub b { color: var(--soul); }
.ev.lottery.idle { opacity: .85; }
.chipb.ins.on { background: var(--soul); color: #0d2a22; font-weight: 700; }
.war { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.war .hint { font-size: 11px; color: var(--dim); }
.lrow small a { color: var(--soul); }
.sh .xp.mastery i { background: linear-gradient(90deg, var(--brass), var(--soul)); }
.sh .row .ok { font-size: 12px; color: var(--soul); font-weight: 700; }

/* персонаж: портрет героя (art/hero-<slug>.webp, иначе буква и эмблема), рядом души и звание, ниже лист 2×2 */
.char { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: start; }
/* колесо v4: короткая «Ты» — три цифры и большая ссылка «Персонаж»; лист персонажа — на /game/hero */
.profile.short .sheet { display: none; }
.me-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.me-keys .mk { display: grid; gap: 4px; padding: 8px 10px; border-radius: var(--r-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.me-keys b { font: 600 10.5px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.me-keys em { font: 900 26px/1 var(--display); font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.me-keys em small { font-size: 14px; color: var(--text-dim); }
.me-keys span { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-keys i { font-style: normal; font-weight: 700; } .me-keys i.w { color: var(--weapon); } .me-keys i.v { color: var(--vitality); } .me-keys i.s { color: var(--spirit); }
.me-keys .g { color: var(--brass-hi); }
#hero-go { display: flex; width: 100%; margin-top: 10px; min-height: 60px; text-decoration: none; letter-spacing: .18em; }
#hero-go[hidden] { display: none; }
#hero-go::after { content: ""; width: 22px; height: 22px; margin-left: 4px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.who .chip a.chip-name { font-weight: 600; color: var(--text); text-decoration: none; }
.who .chip a.chip-name:hover { color: var(--brass-hi); text-decoration: underline; }
@media (max-width: 600px) {
  .who .chip a.chip-name { display: none; } .me-keys { gap: 6px; } .me-keys .mk { padding: 7px 8px; } .me-keys em { font-size: 21px; } #hero-go { min-height: 56px; }
  /* короткая «Ты» на телефоне: портрет слева от душ и героя, ближайшая цель — во всю ширину под ними */
  .profile.short .char-main { display: contents; }
  .profile.short .char > .portrait { grid-row: 1 / span 2; }
  .profile.short .char .souls, .profile.short .char .hero-id { grid-column: 2; }
  .profile.short .char .goal { grid-column: 1 / -1; }
}
.char-main { display: grid; gap: 8px; min-width: 0; }
.portrait { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-3); overflow: hidden; background: radial-gradient(circle at 50% 30%, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line-brass), inset 0 0 0 4px var(--surface-1), inset 0 0 0 5px rgba(201,164,92,.22); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.portrait .none { display: grid; place-items: center; height: 100%; font: 900 56px var(--display); color: var(--line-brass); font-style: normal; }
.portrait .em { position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
.portrait .rk { position: absolute; left: 6px; top: 6px; width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
/* в карточке «Ты» портрет тянется на всю высоту строки: справа души, герой и цель выше, чем 3:4 — без пустоты под портретом */
.char { align-items: stretch; }
.char > .portrait { aspect-ratio: auto; min-height: 171px; }
.me .souls { grid-template-columns: 40px minmax(0, auto) 1fr; }
/* огромный баланс (ставки без потолка) не раздвигает карточку: число сжимается на узком экране и переносится, а не вылезает */
.me .souls .count { min-width: 0; flex-wrap: wrap; }
.me .souls .count b { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .me .souls .count b { font-size: clamp(20px, 7.5vw, 32px); } }
.me .souls .ghost { width: 40px; }
.me .souls .count b { font-size: 32px; }
.me .hero-id { grid-template-columns: 1fr auto; margin-top: 0; padding: 6px 10px; }
.me .hero-id .face { display: none; }
.me .goal { margin-top: 0; }
.me .sheet { grid-template-columns: 1fr 1fr; margin-top: 12px; }
.me .sh .inv { display: flex; flex-wrap: wrap; gap: 6px; }
.me .sh .it { width: 46px; height: 46px; grid-template-columns: 1fr; grid-template-areas: "pic"; padding: 4px; justify-items: center; }
.me .sh .it b, .me .sh .it span { display: none; }
.me .sh .it img { width: 36px; height: 36px; }
@media (max-width: 600px) { .char { grid-template-columns: 96px 1fr; } .me .sheet { grid-template-columns: 1fr; } }

/* бой: два бойца с портретами, бегунок точного удара, стойки */
.farena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 8px; }
.fcard { display: grid; grid-template-columns: 52px 1fr; gap: 4px 10px; align-items: center; padding: 8px; border-radius: var(--r-2); background: rgba(255,255,255,.04); min-width: 0; }
.fcard .pbox { position: relative; width: 52px; height: 68px; grid-row: 1 / span 2; border-radius: 4px; overflow: hidden; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-brass); }
.fcard .pbox img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.fcard .pbox .none { display: grid; place-items: center; height: 100%; font: 900 26px var(--display); color: var(--brass); font-style: normal; }
.fcard .pbox .em { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; }
.fcard b { font: 900 14px/1.1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard .fhp { grid-template-columns: 1fr auto; }
.fcard.me .fhp i { background: linear-gradient(90deg, #a8f0da, var(--soul)); }
.fvs { font: 900 18px var(--display); color: var(--brass); }
.swing { position: relative; height: 14px; margin: 10px 0 4px; border-radius: var(--r-1); background: rgba(255,255,255,.08); overflow: hidden; }
.swing .zone { position: absolute; top: 0; bottom: 0; left: calc(var(--sweet) - var(--win)); width: calc(var(--win) * 2); background: var(--brass); opacity: .9; }
.swing .mark { position: absolute; top: -2px; bottom: -2px; width: 3px; left: 0; background: var(--text); box-shadow: 0 0 6px var(--text); }
.fhint { font-size: 12px; color: var(--text-dim); }
.facc { font-size: 13px; color: var(--soul); }
@media (max-width: 600px) { .farena { grid-template-columns: 1fr; } .fvs { text-align: center; } }

/* столбцы без дыр: слева «Сейчас», «Души», топ; справа «Ты» — прилипает, пока прокручивается левый */
.col.side { position: sticky; top: 54px; align-self: start; }
.me .sheet #sheet-items { grid-column: auto; }
.me .sheet { grid-auto-flow: dense; }
/* листы «Ты» узкие (≈180 px на 1024–1280): колонка листа не растёт по содержимому, статы бойца — 2×2, иначе «Боец» вылезает */
.me .sh { grid-template-columns: minmax(0, 1fr); }
.me .sh .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .col.side { position: static; } .loot { order: 3; } .top { order: 4; } }

/* сцена: Ринг и Шахматы в окне поверх страницы (сами сцены — fight.css и chess.css) */
dialog.stage { border: 0; padding: 0; background: transparent; color: var(--text); width: min(96vw, 980px); max-width: none; max-height: 100vh; max-height: 100dvh; }
dialog.stage::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(2px); }
.stage-in { background: var(--surface-1); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-brass), 0 24px 60px rgba(0,0,0,.6); display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 8px; padding: 10px 12px 12px; }
.stage-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); min-height: 30px; }
.stage-head b { font: 900 16px/1.1 var(--display); color: var(--brass-hi); letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; }
.stage-head em { font-style: normal; font-size: 12px; opacity: .8; }
.stage-head .sbtn { margin-left: auto; display: flex; gap: 6px; }
.stage-head .sh-stakes { color: var(--text); font-variant-numeric: tabular-nums; }
body.stage-open { overflow: hidden; }
@media (max-width: 600px) { dialog.stage { width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; } .stage-in { border-radius: 0; min-height: 100vh; min-height: 100dvh; padding: 8px; } .stage-head { gap: 6px 10px; } .stage-head .sbtn { margin-left: 0; width: 100%; justify-content: flex-end; } }
/* телефон лёжа: окно сцены во весь экран, шапка в одну строку — арене и доске нужна каждая строка высоты */
@media (orientation: landscape) and (max-height: 520px) {
  dialog.stage { width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; }
  .stage-in { border-radius: 0; min-height: 100vh; min-height: 100dvh; padding: 4px 8px 6px; gap: 4px; }
  .stage-head { flex-wrap: nowrap; min-height: 26px; overflow: hidden; white-space: nowrap; }
  .stage-head .sbtn { margin-left: auto; width: auto; }
  .stage-head .sh-stakes { display: none; }
}

/* плитки шести игр: Ринг и Шахматы крупнее, в первом ряду; иконки — контурные svg */
.gtiles { grid-template-columns: repeat(4, 1fr); }
.gtile.big { grid-column: span 2; padding: 14px 6px 10px; }
.gtile i svg, .gi svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.gtile.big i svg { width: 32px; height: 32px; color: var(--brass-hi); }
.gi { display: inline-flex; vertical-align: -3px; margin-right: 4px; } .gi svg { width: 16px; height: 16px; }
@media (max-width: 420px) { .gtiles { grid-template-columns: repeat(2, 1fr); } .gtile.big { grid-column: span 2; } }

/* ранги дуэлей (ranked.js): настоящие значки Deadlock, цифра подранга поверх снизу по центру с тёмной обводкой;
   28 — лобби и HUD, 64 — вызовы, 120 — «Ты» и итог партии */
.rk { position: relative; display: inline-block; flex: none; width: 28px; height: 28px; vertical-align: middle; line-height: 0; }
.rk64 { width: 64px; height: 64px; }
.rk120 { width: 120px; height: 120px; }
.rk img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.rk120 img { filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
.rk-r0 img { filter: drop-shadow(0 0 1px rgba(236,208,138,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
/* тёмный кристалл Обскуруса на тёмной плашке почти не виден: под ним светлое пятно */
.rk-r0:not(.rk120)::before { content: ""; position: absolute; inset: 4% 8% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side at 50% 58%, rgba(225,214,184,.62), rgba(225,214,184,.26) 62%, rgba(225,214,184,0)); }
.rk-r0:not(.rk120) img { position: relative; }     /* тёмный Обскурус на тёмном фоне */
.rk b { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font: 700 12px/1 var(--ui); letter-spacing: .02em; color: #fbf3da; white-space: nowrap; pointer-events: none;
  text-shadow: 1px 0 0 #0b0d09, -1px 0 0 #0b0d09, 0 1px 0 #0b0d09, 0 -1px 0 #0b0d09, 1px 1px 0 #0b0d09, -1px 1px 0 #0b0d09, 1px -1px 0 #0b0d09, -1px -1px 0 #0b0d09, 0 1px 3px rgba(0,0,0,.9); }
.rk64 b { bottom: 3%; font-size: 16px; letter-spacing: .04em; }
.rk120 b { bottom: 4%; font-size: 27px; letter-spacing: .06em;
  text-shadow: 2px 0 0 #0b0d09, -2px 0 0 #0b0d09, 0 2px 0 #0b0d09, 0 -2px 0 #0b0d09, 2px 2px 0 #0b0d09, -2px 2px 0 #0b0d09, 2px -2px 0 #0b0d09, -2px -2px 0 #0b0d09, 0 3px 8px rgba(0,0,0,.9); }
.rk.pop { animation: rkpop .55s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes rkpop { 0% { transform: scale(.6); opacity: .2; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }
.rk-up { color: var(--soul) !important; } .rk-down { color: var(--danger-soft) !important; }
.rk-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.rk-bar i { position: absolute; inset: 0; transform-origin: 0 50%; background: linear-gradient(90deg, var(--brass), var(--brass-hi)); }
.rk-bar.cal i { background: linear-gradient(90deg, #7d776a, #c9bea0); }
.rk-bar.cal::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--n, 5) - 2px), var(--surface-1) calc(100% / var(--n, 5) - 2px), var(--surface-1) calc(100% / var(--n, 5))); }
.rk-num { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rk-line { font-size: 12px; line-height: 1.35; color: var(--text-dim); }
.rk-line b { color: var(--text); font-weight: 600; }
.rk-shields { display: inline-flex; gap: 2px; margin-right: 5px; vertical-align: -2px; }
.rk-shields svg { width: 12px; height: 12px; fill: var(--brass); stroke: #0b0d09; stroke-width: 1.4; }
.rk-game { font: 700 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.rk-equal { display: block; color: var(--text-dim); }

/* «Ты»: две лестницы рядом */
.me .sheet .rk-sheet { grid-column: 1 / -1; }
.rk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.rk-card { display: grid; justify-items: center; align-content: start; gap: 5px; min-width: 0; padding: 10px 10px 12px; text-align: center; border-radius: var(--radius);
  background: radial-gradient(140px 100px at 50% 28%, rgba(201,164,92,.13), transparent 70%), rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px var(--line); }
.rk-card .rk120 { margin: -2px 0 -4px; }
.rk-card .rk-name { font: 900 19px/1.1 var(--display); color: var(--brass-hi); letter-spacing: .02em; }
.rk-card .rk-bar { width: 100%; }
.rk-card .rk-rec { color: var(--text-dim); opacity: .85; }

/* вызовы: обе ставки, превью очков, значок 64 */
.rk-terms { grid-area: terms; display: grid; gap: 3px; margin-top: 2px; }
.rk-terms-l { margin: 0; font-size: 13px; line-height: 1.35; color: var(--text-dim); }
.rk-terms-l b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.rk-terms-l.rk-off { font-style: italic; }
.call.duel { grid-template-areas: "left title" "left sub" "terms terms" "bar bar" "btn btn"; }
.call.duel.has-rk { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "left title rk" "left sub rk" "terms terms terms" "bar bar bar" "btn btn btn"; }
.call.duel.has-rk > b, .call.duel.has-rk > span { padding-right: 0; }
.call .rk-from { grid-area: rk; align-self: start; width: 78px; display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.rk-to { position: absolute; right: 10px; top: 8px; width: 78px; display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.rk-from small, .rk-to small { font: 600 11px/1.15 var(--ui); color: var(--brass-hi); text-align: center; }
.dwait { position: relative; }
.dwait.has-rk { padding-right: 96px; min-height: 96px; }
.dopen > div.dch { align-items: center; flex-wrap: nowrap; gap: 10px; }
.dch-rk { flex: none; display: grid; }
.dch-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dch-main > b { font-weight: 600; color: var(--text); }
.dch-main > small { font-size: 11px; color: var(--brass-hi); }
.dch-do { flex: none; display: grid; justify-items: end; gap: 4px; }
.chipb.rkc { display: inline-flex; align-items: center; gap: 4px; padding-top: 1px; padding-bottom: 1px; padding-left: 4px; }
.chipb .rk { margin: -3px 0; }                       /* значок почти целиком в плашке: цифра подранга не на её краю */
/* динамик у ника «стрим со звуком»: контурный svg цветом душ; на выбранной (латунной) плашке — цветом текста */
.chipb .snd { display: inline-flex; margin-left: 4px; vertical-align: -3px; color: var(--soul); }
.chipb.rkc .snd { margin-left: 0; }
.chipb .snd svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chipb .snd svg .b { fill: currentColor; }
.chipb.on .snd { color: inherit; }
.dlive .rk { margin: 0 3px 0 0; }
.dform .dodds { color: var(--text); } .dform .dodds b { color: var(--brass-hi); font-variant-numeric: tabular-nums; }
/* итог и окно партии открылись не с клавиатуры — фокус на заголовке и на сцене без рамки (с клавиатуры — с рамкой) */
.rk-over > h3.nofv:focus, .rk-over > h3.nofv:focus-visible, .stage-body.nofv:focus, .stage-body.nofv:focus-visible { outline: none; }
.dform .rk-hint { color: var(--text-dim); }

/* итог партии: значок, разбор очков, полоса доезжает, баннер */
.rk-res { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 12px 14px; text-align: left;
  border-radius: var(--radius); background: radial-gradient(160px 120px at 64px 50%, rgba(201,164,92,.12), transparent 70%), rgba(0,0,0,.2); box-shadow: inset 0 0 0 1px var(--line); }
.rk-res.off { display: block; }
.rk-res-badge { display: grid; place-items: center; }
.rk-res-main { display: grid; gap: 5px; min-width: 0; }
.rk-res .rk-name { font: 900 22px/1.1 var(--display); color: var(--brass-hi); letter-spacing: .02em; }
.rk-delta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.rk-delta b { font: 700 34px/1 var(--ui); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.rk-delta.up b { color: var(--soul); } .rk-delta.down b { color: var(--danger-soft); } .rk-delta.zero b { color: var(--text); }
.rk-delta small { font-size: 12px; color: var(--text-dim); }
.rk-why { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.rk-why li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 10px; font-size: 12px; color: var(--text-dim); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.rk-why li b { color: var(--text); font-variant-numeric: tabular-nums; }
.rk-why li.prot { box-shadow: inset 0 0 0 1px var(--line-brass); color: var(--brass-hi); }
.rk-why li .rk-shields { margin-right: 0; }
.rk-souls { margin: 2px 0 0; font-size: 13px; color: var(--text-dim); }
.rk-souls b { font-variant-numeric: tabular-nums; }
.rk-banner { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; border-radius: var(--r-2);
  background: linear-gradient(90deg, transparent, rgba(201,164,92,.28), transparent); box-shadow: inset 0 1px 0 rgba(236,208,138,.35), inset 0 -1px 0 rgba(236,208,138,.35); }
.rk-banner b { font: 900 18px/1.1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-hi); }
.rk-banner span { font: 600 15px/1.1 var(--ui); color: var(--text); }
.rk-banner.down { background: linear-gradient(90deg, transparent, rgba(229,83,61,.22), transparent); box-shadow: inset 0 1px 0 rgba(255,179,168,.3), inset 0 -1px 0 rgba(255,179,168,.3); }
.rk-banner.down b { color: var(--danger-soft); }
.rk-banner.in { animation: rkban .6s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes rkban { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.dgame .rk-res { margin-top: 2px; max-width: 600px; }
/* разбор поверх сцены (Ринг, Шахматы): кнопкой «Посмотреть доску» прячется */
.stage-in { position: relative; }
.stage-rank { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: 16px; overflow: auto; border-radius: inherit;
  background: radial-gradient(600px 360px at 50% 40%, rgba(201,164,92,.10), transparent 70%), rgba(13,16,12,.95); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: rkfade .35s ease-out; }
.stage-rank .rk-res { background: radial-gradient(160px 120px at 64px 50%, rgba(201,164,92,.14), transparent 70%), var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-brass), 0 18px 40px rgba(0,0,0,.45); }
@keyframes rkfade { from { opacity: 0; } to { opacity: 1; } }
.rk-over { width: min(580px, 100%); display: grid; gap: 10px; text-align: center; }
.rk-over > h3 { margin: 0; font: 900 36px/1.05 var(--display); color: var(--brass-hi); letter-spacing: .03em; }
.rk-over.lost > h3 { color: var(--danger-soft); } .rk-over.draw > h3 { color: var(--text); }
.rk-over > p { margin: -4px 0 0; color: var(--text-dim); }
.rk-over > .row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }

.stage-head .rk-head { white-space: nowrap; }
.stage-head .rk-head b { display: inline; font: 700 13px/1 var(--ui); letter-spacing: 0; }
.stage-head .rk-head.off { opacity: .75; font-style: italic; }
/* «Таблицы» → «Ранги» и правила */
.rk-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.rk-col { min-width: 0; padding: 8px 10px; border-radius: var(--radius); background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--line); }
.rk-col > b { display: block; margin-bottom: 6px; font: 900 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.rk-top { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rk-top li { display: grid; grid-template-columns: 16px 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.rk-top .rk-pos { font-style: normal; font-size: 11px; color: var(--text-dim); text-align: right; }
.rk-top .rk-who { display: grid; gap: 1px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rk-top .rk-who small { font-size: 11px; color: var(--brass); overflow: hidden; text-overflow: ellipsis; }
.rk-top em { font-style: normal; color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.rk-top li.rk-me .rk-who { color: var(--brass-hi); font-weight: 700; }
.rk-ranks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rk-ranks b { overflow-wrap: anywhere; }
.rk-ranks .rk { display: block; margin: 0 auto 4px; }
.rk-ranks .rk img { width: 100%; height: 100%; margin: 0; }
.tile.rk-tile { grid-template-columns: 1fr; }
@media (max-width: 600px) {
  .dopen > div.dch { flex-wrap: wrap; align-items: flex-start; }
  .dch-main { flex: 1 1 calc(100% - 80px); }
  .dch-do { flex: 1 1 100%; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
  .rk-boards { grid-template-columns: 1fr; }
  .rk-ranks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .rk-ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* «Послушник», «Ритуалист» заглавными в 4 колонки не влезают */
}
@media (max-width: 520px) {
  /* входящий вызов на телефоне: значок не отнимает колонку у заголовка — таймер и значок строкой сверху, текст во всю ширину */
  .call.duel.has-rk { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "left rk" "title title" "sub sub" "terms terms" "bar bar" "btn btn"; }
  .call.duel.has-rk .rk-from { justify-self: end; align-self: center; width: auto; grid-auto-flow: column; align-items: center; gap: 8px; }
  .call.duel.has-rk .rk-from small { order: -1; text-align: right; max-width: 110px; }
  .call.duel.has-rk .left { justify-self: start; }
  .rk-res { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 10px; }
  .rk-res-main { justify-items: center; width: 100%; }
  .rk-res .rk-bar { width: 100%; }
  .rk-delta, .rk-why { justify-content: center; }
  .rk-over > h3 { font-size: 30px; }
  .stage-rank { padding: 10px; align-items: start; }
}
@media (max-width: 420px) {
  .rk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .rk-card { padding: 8px 6px 10px; }
  .rk-card .rk-name { font-size: 16px; }
  .call .rk-from { width: 66px; }
  .rk-to { width: 70px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .rk.pop, .rk-banner.in, .stage-rank { animation: none; }
}

/* «Найти матч» (game.js → renderMM): главный блок «Игр» над формой вызова. Игра (Ринг / Шахматы), ставка без потолка —
   пресеты и своя сумма, честный расчёт одной строкой, большая кнопка. В поиске — пульс душ, таймер, сколько ещё ищут,
   «Отменить». Рамка как у карточек, внутри бирюзовый отсвет: это про души */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mm { display: grid; gap: 10px; margin: 2px 0 14px; padding: 12px 14px 14px; border-radius: var(--radius); scroll-margin-top: 60px;
  background: linear-gradient(180deg, rgba(127,224,191,.07), rgba(13,16,12,.35));
  box-shadow: inset 0 0 0 1px var(--line-brass), inset 0 0 0 3px rgba(13,16,12,.55), inset 0 0 0 4px rgba(127,224,191,.2); }
.mm:empty { display: none; }
.mm-top { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.mm-top h3 { margin: 0; font: 900 19px/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-hi); }
.mm-count { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mm-lead { margin: 0; font-size: 14px; color: var(--text); }
.mm-do { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-do .btn { min-height: 46px; }
.mm-games { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-g { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; border: 0; border-radius: var(--radius); background: var(--surface-2); color: var(--text);
  cursor: pointer; text-align: left; font: inherit; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--t-fast), background var(--t-fast); }
.mm-g:hover { box-shadow: inset 0 0 0 1px var(--brass); }
.mm-g i { flex: none; display: grid; place-items: center; color: var(--text-dim); }
.mm-g i svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.mm-g span { min-width: 0; }
.mm-g b { display: block; font: 600 15px/1.1 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.mm-g em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--text-dim); }
.mm-g.on { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--brass); }
.mm-g.on i { color: var(--brass-hi); }
.mm-stake-h { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.mm-stake-h > b { font: 600 12px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.mm-stake-h small b { color: var(--soul); font-weight: 700; font-variant-numeric: tabular-nums; }
.mm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-chips .chipb, .dstakes .chipb { min-height: 40px; min-width: 56px; padding: 6px 12px; border-radius: 20px; font-size: 15px; font-variant-numeric: tabular-nums; }
.dstakes .chipb { min-height: 36px; min-width: 50px; font-size: 14px; }
.chipb:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
/* своя сумма: то же поле — в поиске и в форме вызова Ринга и Шахмат */
.stake-own { flex: 1 1 130px; min-width: 120px; max-width: 220px; display: flex; }
.stake-own input { width: 100%; min-height: 40px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-sunk); color: var(--text);
  font: 600 15px/1 var(--ui); font-variant-numeric: tabular-nums; }
.stake-own input::placeholder { color: var(--text-dim); font-weight: 400; }
.stake-own input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.stake-own.on input { border-color: var(--brass); background: rgba(201,164,92,.1); }
.stake-own.bad input { border-color: var(--danger); background: rgba(229,83,61,.08); }
.dstakes .stake-own input { min-height: 36px; font-size: 14px; }
.mm-fair { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text); }
.mm-live:empty { display: none; }
.mm-warn { margin: 0; padding: 7px 10px; border-radius: var(--r-2); font-size: 13px; line-height: 1.4; color: var(--text);
  background: rgba(240,181,122,.1); box-shadow: inset 2px 0 0 var(--call); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.mm-warn.bad { background: rgba(229,83,61,.12); box-shadow: inset 2px 0 0 var(--danger); }
.mm-go { width: 100%; flex-direction: column; gap: 6px; min-height: 66px; }
.mm-go > span { font-size: 22px; line-height: 1; }
.mm-go small { font: 500 13px/1.1 var(--ui); letter-spacing: .02em; text-transform: none; color: inherit; opacity: .85; }
.mm-small { margin: -2px 0 0; font-size: 12px; color: var(--text-dim); text-align: center; }
.dform .about.dbad { color: var(--danger-soft); }
/* в поиске: пульс, «Ищем соперника…», таймер ожидания, сколько ещё ищут, «Отменить» */
.mm-wait { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; padding: 14px; border-radius: var(--radius);
  background: rgba(127,224,191,.08); box-shadow: inset 0 0 0 1px rgba(127,224,191,.45); }
.mm-pulse { width: 16px; height: 16px; margin: 0 4px; border-radius: 50%; background: var(--soul); animation: mmpulse 1.6s ease-out infinite; }
@keyframes mmpulse { 0% { box-shadow: 0 0 0 0 rgba(127,224,191,.6); } 100% { box-shadow: 0 0 0 16px rgba(127,224,191,0); } }
.mm-wait-t { min-width: 0; }
.mm-wait-t b { font: 700 19px/1.2 var(--ui); color: var(--text); }
.mm-timer { margin-left: 10px; font: 700 22px/1 var(--ui); color: var(--soul); font-variant-numeric: tabular-nums; }
.mm-wait-t small { display: block; margin-top: 6px; color: var(--text-dim); }
.mm-wait-t small .gi { color: var(--brass); }
.mm-cancel { min-height: 44px; padding: 8px 20px; }
.mm-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.mm-hint a { font-weight: 600; }
/* найден: кто, обе ставки, банк; кнопка — к арене или доске */
.mm-found { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; border-radius: var(--radius);
  background: rgba(201,164,92,.12); box-shadow: inset 0 0 0 2px var(--brass); }
.mm-found b { display: block; font: 700 18px/1.2 var(--ui); color: var(--brass-hi); }
.mm-found small { display: block; margin-top: 4px; color: var(--text); font-variant-numeric: tabular-nums; }
.mm-found small .gi { color: var(--brass); }
.mm-found .btn { min-height: 44px; }
@media (max-width: 600px) {
  .mm { padding: 12px 12px 14px; }
  .mm-wait { grid-template-columns: auto minmax(0, 1fr); }
  .mm-wait .mm-cancel { grid-column: 1 / -1; width: 100%; }
  .mm-timer { display: block; margin: 6px 0 0; }
  .mm-found .btn, .mm-do .btn { width: 100%; }
  .mm-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }        /* пять пресетов в ряд, своя сумма — строкой ниже */
  .mm-chips .chipb { min-width: 0; padding: 6px 2px; font-size: 14px; }
  .mm-chips .stake-own { grid-column: 1 / -1; max-width: none; }
  .dstakes .stake-own { max-width: none; flex-basis: 100%; }
}
@media (max-width: 420px) {
  .mm-g { gap: 8px; padding: 8px 10px; }
  .mm-g i svg { width: 26px; height: 26px; }
  .mm-go > span { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .mm-pulse { animation: none; box-shadow: 0 0 0 4px rgba(127,224,191,.25); } .mm-g { transition: none; } }
/* v4: ссылки на «Что нового» и «Как играть» — сервер оставляет их в index.html только у бренда с колёсами по ставкам:
   строка под баннером (шапку и баннер не трогает), строка в карточке входа и в подвале */
.v4bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px;
  max-width: 1360px; margin: 10px auto 0; padding: 0 20px; font-size: 14px; color: var(--text-dim); }
.v4bar b { font: 900 15px/1 var(--display); color: var(--brass-hi); letter-spacing: .03em; }
.v4bar .btn { text-decoration: none; }
.locked .more { grid-column: 2; justify-self: start; margin-top: 2px; text-decoration: none; }
.locked .more::after { content: " →"; }
.foot .docs { display: inline-flex; gap: 16px; margin-left: 16px; }
.foot .docs a { color: var(--brass-hi); }
@media (max-width: 900px) { .v4bar { padding: 0 12px; } .v4bar span { flex: 1 1 100%; text-align: center; } .foot .docs { display: flex; justify-content: center; margin: 10px 0 0; } }
/* v4: рамка ника за серебряный альбом и звание за золотой (PLAN §6, SPEC §6.3) — на /game и /game/hero, где пишется ник */
.nick.gold-frame { padding: 0 8px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--rar-gold, #f5c84c), 0 0 14px rgba(245,200,76,.35); }
a.nick.gold-frame, span.nick.gold-frame { padding: 1px 6px; }
.ntitle-in { font-style: normal; color: var(--rar-gold, #f5c84c); }
.ntitle { display: block; margin-top: 2px; font-size: 11px; line-height: 1.2; letter-spacing: .04em; color: var(--rar-gold, #f5c84c); }
/* v4: своя карточка после прокрута — золото и хаос большим тостом с картинкой в рамке */
.toast.cardt { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; }
.toast.cardt.gold { box-shadow: inset 0 0 0 1px #f5c84c, 0 0 22px rgba(245,200,76,.35), 0 8px 24px rgba(0,0,0,.5); }
.toast.cardt.chaos { box-shadow: inset 0 0 0 1px #a77bff, 0 0 22px rgba(167,123,255,.4), 0 8px 24px rgba(0,0,0,.5); }
.ctpic { position: relative; flex: 0 0 76px; width: 76px; aspect-ratio: var(--ar, 360 / 530); }
.ctpic .win { position: absolute; left: var(--wx); top: var(--wy); width: var(--ww); height: var(--wh); overflow: hidden; background: #1c2118; }
.ctpic .win img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ctpic .fr { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ctt { display: grid; gap: 4px; min-width: 0; }
.ctt small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.toast.cardt.gold .ctt small { color: #f5c84c; }
.toast.cardt.chaos .ctt small { color: #c7a8ff; }
.ctt b { font-size: 18px; line-height: 1.1; }