/* Сайт Легиона. Одна разметка — три темы оформления: html[data-skin="poster" | "forge" | "sticker"].
   Общая часть задаёт строение (сетки, кукла, сумка, карточка вещи), темы — цвета, шрифты, рамки и раскладку на широком экране. */

/* ================= общая основа ================= */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 18px; --t-xl: 22px; --t-2xl: 28px; --t-3xl: 40px; --t-4xl: 56px;
  --ease: cubic-bezier(.2,.8,.2,1);
  /* 23.10: подсветка товара — обводка по силуэту рисунка вещи (лавки «Города» и прилавок лавки во вкладке «Поход»), не рамка */
  --item-ol-c: #f2b632; --item-ol: drop-shadow(1.5px 0 0 var(--item-ol-c)) drop-shadow(-1.5px 0 0 var(--item-ol-c)) drop-shadow(0 1.5px 0 var(--item-ol-c)) drop-shadow(0 -1.5px 0 var(--item-ol-c));
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: var(--bg); color: var(--ink); font: 500 var(--t-md)/1.45 var(--tx); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: var(--s2) var(--s3); background: var(--ink); color: var(--bg); }
.skip:focus { left: 8px; }
.muted { color: var(--mute); }
.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
h1, h2, h3 { margin: 0; }
p { margin: 0; text-wrap: pretty; }

/* человечки движка */
.jl-doodle { display: block; width: 100%; height: auto; overflow: visible; }
/* цвета обводки и лиц приходят из самого стиля человечков (MDDoodle.style.css) — у котиков и обезьян они свои */
.art { display: block; width: 100%; height: 100%; overflow: visible; }
.art.sil { opacity: .22; filter: grayscale(1) brightness(var(--sil-b, .4)); }

/* --- шапка --- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); }
.brand { display: flex; align-items: center; gap: var(--s2); }
.tabs { display: flex; gap: var(--s1); }
.tabs button { padding: var(--s2) var(--s4); border: 0; background: none; }
.user { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.who { font-weight: 700; }
/* 18.10: метка администратора игры — как плашка уровня (.lv) своего оформления, только короче */
.adm { flex: none; white-space: nowrap; font-size: var(--t-xs); letter-spacing: .06em; line-height: 1.6; }

/* --- кнопки --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s5); text-decoration: none; font-weight: 800; border: 0;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.btn.sm { min-height: 40px; padding: var(--s1) var(--s4); font-size: var(--t-sm); }
.btn.wide { width: 100%; }
.btn.twitch { background: #9146ff; color: #fff; }
.btn.twitch:hover { background: #a364ff; }

main { max-width: 1320px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s7); }
.tab { display: none; }
.tab.on { display: block; }
.foot { margin-top: var(--s6); text-align: center; color: var(--mute); font-size: var(--t-xs); }
.empty { padding: var(--s6) var(--s4); text-align: center; color: var(--mute); }
.h1 { font-size: var(--t-3xl); line-height: 1.05; }
.h2 { font-size: var(--t-xl); }
.lead { margin-top: var(--s3); font-size: var(--t-lg); color: var(--mute); max-width: 46ch; }

/* --- персонаж: сетка (узкий экран — столбик) --- */
.hero-grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; grid-template-areas: "stage" "vitals" "bag"; }
.stage { grid-area: stage; } .vitals { grid-area: vitals; } .bag { grid-area: bag; } .detail { grid-area: detail; }
@media (min-width: 760px) {
  .hero-grid { grid-template-columns: minmax(300px, 380px) 1fr; grid-template-areas: "stage bag" "vitals bag"; align-items: start; }
}

/* кукла: слоты вокруг героя */
.doll { display: grid; gap: var(--s3); grid-template-columns: 1fr 1.5fr 1fr; grid-template-areas: ". helmet ." "weapon fig shield" "armor fig trinket"; align-items: center; position: relative; }
.doll .fig { grid-area: fig; position: relative; z-index: 1; padding: 0 var(--s1); }
.slot[data-slot="helmet"] { grid-area: helmet; } .slot[data-slot="weapon"] { grid-area: weapon; } .slot[data-slot="shield"] { grid-area: shield; }
.slot[data-slot="armor"] { grid-area: armor; } .slot[data-slot="trinket"] { grid-area: trinket; }
.slot { position: relative; display: grid; grid-template-rows: auto auto auto; justify-items: center; align-content: center; width: 100%; max-width: 150px; justify-self: center; min-height: 112px; gap: 2px; min-height: 44px; padding: var(--s2) var(--s1); text-align: center; border: 0; background: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.slot .art { width: 52px; height: 52px; }
.slot .sl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.slot .sn { font-size: var(--t-xs); font-weight: 700; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slot.full .sn { color: var(--rc); }
.slot:not(.full) .sn { color: var(--mute); font-weight: 500; }
.plate { margin-top: var(--s4); text-align: center; }
.nm { font-size: var(--t-2xl); line-height: 1.1; overflow-wrap: anywhere; }
.role { margin-top: var(--s2); display: flex; justify-content: center; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.rl { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--mute); }
.lv { padding: 2px var(--s2); font-weight: 800; }

/* характеристики */
.vitals { display: grid; gap: var(--s4); align-content: start; }
.meter .mk { display: flex; justify-content: space-between; font-size: var(--t-sm); margin-bottom: 6px; }
.meter .mk span { color: var(--mute); }
.bar { height: 12px; overflow: hidden; }
.bar i { display: block; height: 100%; }
.stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s2); align-items: center; padding: var(--s3); }
.stat .i { grid-row: span 2; width: 22px; height: 22px; }
.stat dt { font-size: var(--t-xs); color: var(--mute); font-weight: 700; }
.stat dd { margin: 0; font-size: var(--t-xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.coins { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--mute); }
.coins .m { margin-left: auto; color: var(--ink); }
.coins .m b { font-variant-numeric: tabular-nums; }

/* сумка */
.bag-h { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.filters button { min-height: 36px; padding: 6px var(--s3); font-size: var(--t-sm); font-weight: 700; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.filters.cls { margin-top: calc(-1 * var(--s2)); }
.filters.cls button { min-height: 32px; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s3); }
.cell { position: relative; display: grid; grid-template-rows: 1fr auto; gap: var(--s1); aspect-ratio: 1 / 1.12; padding: var(--s3) var(--s2) var(--s2); text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.cell .art { width: 64%; height: auto; aspect-ratio: 1; margin: auto; }
.cell .cn { font-size: var(--t-xs); font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cell .cnt { position: absolute; right: 6px; bottom: 34px; font-size: var(--t-xs); font-weight: 800; padding: 0 6px; }
.cell .upg { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; }
.cell .upg .i { width: 14px; height: 14px; stroke-width: 3; }

/* карточка вещи */
.detail { position: relative; }
.detail .x { display: none; }
.d-art { display: grid; place-items: center; height: 150px; margin-bottom: var(--s4); }
.d-art .art { width: 120px; height: 120px; }
.d-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: var(--t-sm); }
.rar { font-weight: 800; color: var(--rc); }
.d-h .on { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--up); }
.d-n { margin-top: var(--s2); font-size: var(--t-xl); line-height: 1.15; }
.d-st { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s2); }
.d-st li { display: grid; grid-template-columns: auto 1fr auto 3.2em; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.d-st li span { color: var(--mute); }
.d-st li b { font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.d-st em { font-style: normal; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.stat dd .pen-was { margin-right: 6px; font-size: .9em; color: var(--ink); opacity: .8; text-decoration: line-through 2px var(--dn); }
.stat dd .pen-now { color: var(--dn); }
.penl { grid-column: 1 / -1; margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border-radius: 8px; border: 2px solid var(--dn); color: var(--ink); font-size: var(--t-sm); display: grid; gap: 2px; }
.penl b { color: var(--dn); } .penl span { color: var(--mute); font-size: var(--t-xs); }
/* 22.10: долг (кошелёк в минусе после пойманной кражи в лавке) */
.debtl { grid-column: 1 / -1; margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border-radius: 8px; border: 2px solid var(--dn); color: var(--ink); font-size: var(--t-sm); display: grid; gap: 2px; }
.debtl b { color: var(--dn); } .debtl span { color: var(--mute); font-size: var(--t-xs); }
.thiefl { color: var(--dn); font-weight: 600; }   /* 22.10: воровская наценка */
.d-gear { margin-top: var(--s3); font-size: var(--t-sm); color: var(--mute); } .d-gear.bad b { color: var(--dn); }
.d-st em.up { color: var(--up); } .d-st em.dn { color: var(--dn); } .d-st em.eq { color: var(--mute); }
.d-eff, .d-cmp, .d-role { margin-top: var(--s3); font-size: var(--t-sm); color: var(--mute); }
.d-eff { color: var(--ink); font-weight: 600; }
.d-cmp b, .d-role b { color: var(--ink); }
.d-cmp b.up { color: var(--up); } .d-cmp b.dn { color: var(--dn); }   /* итог «в целом лучше / слабее» (аукцион) */
.d-a { margin-top: var(--s5); }
/* 22.10: подсказка характеристики по нажатию — окно персонажа и аукцион */
.d-st li[data-stat] { cursor: help; }
.d-pts { margin-top: var(--s3); font-size: var(--t-sm); color: var(--mute); }
/* 24.10 (баг тестера): пояснение — обычный текст, не flex: суммы (<b>, .m) и куски текста не разъезжаются колонками; значок — в строке */
.note { display: block; font-size: var(--t-sm); line-height: 1.45; color: var(--mute); overflow-wrap: break-word; }
.note > svg.i:first-child { margin-right: var(--s2); }
.note.lack, .note.bal { color: var(--ink); }
.scrim { display: none; }

/* редкость: цвет на всё, что помечено data-r */
[data-r="common"] { --rc: var(--rc-common); } [data-r="uncommon"] { --rc: var(--rc-uncommon); } [data-r="rare"] { --rc: var(--rc-rare); } [data-r="epic"] { --rc: var(--rc-epic); } [data-r="legendary"] { --rc: var(--rc-legendary); }

/* призрак, ожидание */
.ghostnote { margin-top: var(--s4); padding: var(--s4); text-align: center; }
.ghostnote .gt { font-weight: 800; }
.ghostnote .cd { margin: var(--s2) 0 2px; font-size: var(--t-3xl); line-height: 1; font-variant-numeric: tabular-nums; }
.ghostnote .gs { font-size: var(--t-sm); color: var(--mute); }
.ghostnote .gh { margin-top: var(--s3); font-size: var(--t-sm); }
.busybar { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: 8px; border: 2px solid var(--dn); color: var(--dn); font-size: var(--t-sm); font-weight: 700; background: var(--surface); }
.slot { position: relative; }
.slot.locked > :not(.lockb) { opacity: .4; filter: grayscale(.7); }
.slot.locked { cursor: not-allowed; }
.slot .lockb { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; pointer-events: none; white-space: nowrap; }
.note.busyn { color: var(--dn); font-weight: 700; }
.ctxm { position: fixed; z-index: 1000; min-width: 190px; max-width: 280px; padding: 6px; border-radius: 10px; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.35); display: grid; gap: 2px; font: 600 14px var(--tx, system-ui); }
.ctxm .ctxh { padding: 4px 10px 6px; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctxm button { all: unset; box-sizing: border-box; padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--ink); }
.ctxm button.main { color: var(--accent); font-weight: 800; }
.ctxm button:hover:not([disabled]), .ctxm button:focus-visible { background: var(--surface2); outline: none; }
.ctxm button[disabled] { color: var(--mute); cursor: default; }
.pend { margin-top: var(--s4); padding: var(--s3) var(--s4); font-size: var(--t-sm); font-weight: 600; }
.is-ghost .fig { opacity: .85; }

/* узкий/средний экран: карточка вещи — выезжающая снизу шторка */
@media (max-width: 1099px) {
  .detail, html .hero-grid > .detail.panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 86vh; overflow: auto; margin: 0; padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom));
    transform: translateY(105%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
  .detail.open, html .hero-grid > .detail.panel.open { transform: none; visibility: visible; transition: transform .3s var(--ease); }
  .detail .x { display: grid; place-items: center; position: absolute; top: var(--s3); right: var(--s3); width: 44px; height: 44px; border: 0; background: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(10, 8, 20, .55); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
  .scrim.open { opacity: 1; pointer-events: auto; }
  .d-art { height: 120px; } .d-art .art { width: 96px; height: 96px; }
}
@media (max-width: 520px) {
  main { padding: var(--s4) var(--s4) var(--s7); }
  .top { padding: var(--s2) var(--s3); gap: var(--s2); }
  .brand b { display: none; }
  .who { display: none; }
  .user .adm { display: none; }   /* как и ник: на узком месте — вкладкам (метка «Админ игры» остаётся в режиме стримера) */
  .tabs button { padding: var(--s2) var(--s3); }
  .grid { grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
  .slot .art { width: 44px; height: 44px; }
  .h1 { font-size: var(--t-2xl); }
}

/* --- приветствие и «героя нет» --- */
.hello { display: grid; gap: var(--s6); align-items: center; }
.hello .btn { margin-top: var(--s5); }
.crowd { display: flex; justify-content: center; align-items: flex-end; }
.crowd .cf { width: clamp(60px, 19vw, 110px); margin: 0 clamp(-12px, -2vw, -6px); flex: none; }
.hello > *, .nohero > * { min-width: 0; }
.hello .h1 { overflow-wrap: anywhere; }
/* страховка: ничего на странице не даёт прокрутки вбок на телефоне */
main { overflow-x: clip; }
@media (max-width: 520px) { .top .btn.twitch.sm { padding-inline: var(--s3); } .hello .btn.twitch { width: 100%; } }
.crowd .cf:nth-child(odd) { transform: translateY(10px); }
.nohero { display: grid; gap: var(--s5); align-items: center; }
.nohero .fig { width: 160px; margin: 0 auto; }
@media (min-width: 900px) { .hello { grid-template-columns: 1.1fr .9fr; } .nohero { grid-template-columns: 200px 1fr; } }

/* --- Легион --- */
.legion { display: grid; gap: var(--s5); }
.lg-head { display: grid; gap: var(--s4) var(--s6); grid-template-columns: 1fr; align-items: end; }
.lg-big b { display: block; font-size: var(--t-4xl); line-height: .95; font-variant-numeric: tabular-nums; }
.lg-big span { font-weight: 700; color: var(--mute); }
.lg-t { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s5); }
.lg-t dt { font-size: var(--t-xs); color: var(--mute); font-weight: 700; }
.lg-t dd { margin: 0; font-size: var(--t-2xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.mix { grid-column: 1 / -1; display: flex; gap: 3px; height: 18px; }
.mix i { display: block; min-width: 6px; background: var(--gc); }
@media (min-width: 760px) { .lg-head { grid-template-columns: auto 1fr; } .lg-t { justify-content: flex-end; } }
[data-g="mage"] { --gc: var(--g-mage); } [data-g="heal"] { --gc: var(--g-heal); } [data-g="phys"] { --gc: var(--g-phys); } [data-g="recruit"] { --gc: var(--g-recruit); }
.groups { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grp .gn { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-lg); }
.sw { display: inline-block; width: 12px; height: 12px; background: var(--gc); flex: none; }
.gv { display: flex; align-items: baseline; gap: var(--s3); margin-top: var(--s3); }
.gv b { font-size: var(--t-3xl); line-height: 1; color: var(--gc); font-variant-numeric: tabular-nums; }
.gv span { color: var(--mute); font-weight: 700; }
.gr { margin-top: var(--s2); font-size: var(--t-sm); color: var(--mute); }
.ranks .row + .row { margin-top: var(--s5); }
.rh { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); margin-bottom: var(--s3); }
.rlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--s3) var(--s2); }
.rf { display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 0; position: relative; }
.rf .rd { width: 56px; }
.rf .rn { font-size: 11px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf .rlv { position: absolute; top: 0; right: 4px; font-size: 11px; font-weight: 800; min-width: 20px; padding: 0 4px; }
.rf.gh .rd { opacity: .7; }

/* --- всплывашка --- */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 24px); padding: var(--s3) var(--s5); font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }



/* ================= раскладки широкого экрана =================
   A — колонки: герой | сумка | вещь.  B — лист персонажа: характеристики | герой | вещь, сумка снизу.  C — баннер: герой во всю ширину, ниже характеристики и сумка, вещь справа. */
@media (min-width: 1100px) {
  :is([data-skin="poster"], [data-skin="book"], [data-skin="plank"]) .hero-grid { grid-template-columns: 360px 1fr 330px; grid-template-areas: "stage bag detail" "vitals bag detail"; align-items: start; }
  :is([data-skin="forge"], [data-skin="den"], [data-skin="rage"]) .hero-grid { grid-template-columns: 290px 1fr 320px; grid-template-areas: "vitals stage detail" "bag bag bag"; align-items: stretch; }
  :is([data-skin="forge"], [data-skin="den"], [data-skin="rage"]) .detail { align-self: start; }
  :is([data-skin="forge"], [data-skin="den"], [data-skin="rage"]) .doll { grid-template-columns: 1fr 1.4fr 1fr; max-width: 560px; margin: 0 auto; gap: var(--s4); }
  :is([data-skin="forge"], [data-skin="den"], [data-skin="rage"]) .slot .art { width: 60px; height: 60px; }
  :is([data-skin="sticker"], [data-skin="box"], [data-skin="comic"]) .hero-grid { grid-template-columns: 330px 1fr 340px; grid-template-areas: "stage stage detail" "vitals bag detail"; align-items: start; }
  :is([data-skin="sticker"], [data-skin="box"], [data-skin="comic"]) .stage { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: var(--s6); padding: var(--s5) var(--s6); }
  :is([data-skin="sticker"], [data-skin="box"], [data-skin="comic"]) .stage .plate { grid-row: 1; grid-column: 1; text-align: left; margin: 0; }
  :is([data-skin="sticker"], [data-skin="box"], [data-skin="comic"]) .stage .plate .role { justify-content: flex-start; }
  :is([data-skin="sticker"], [data-skin="box"], [data-skin="comic"]) .stage .nm { font-size: var(--t-4xl); }
  :is([data-skin="sticker"], [data-skin="box"], [data-skin="comic"]) .stage .doll { grid-column: 2; }
  :is([data-skin="sticker"], [data-skin="box"], [data-skin="comic"]) .stage .ghostnote, :is([data-skin="sticker"], [data-skin="box"], [data-skin="comic"]) .stage .pend { grid-column: 1; }
  .detail { position: sticky; top: 84px; }
}

/* =========================================================
   ТЕМА 1 — «ПЛАКАТ»: как виджеты соц. рейтинга на стриме.
   Бумага, тушь, красный; прямые углы, жёсткая смещённая тень, Unbounded + PT Mono.
   Широкий экран: герой слева, сумка в центре, карточка вещи справа.
   ========================================================= */
html[data-skin="poster"] {
  --bg: #ece2cb; --surface: #f6eedb; --surface2: #e4d8bb; --ink: #1b1a17; --mute: #5c5446; --accent: #c81e17; --accent-2: #8f130e; --focus: #c81e17;
  --rc-common: #5c5446; --rc-uncommon: #24883a; --rc-rare: #1b64b4; --rc-epic: #7c34c4; --rc-legendary: #a86500; --up: #1d7a34; --dn: #c81e17;
  --g-mage: #2b58a8; --g-heal: #2f7d43; --g-phys: #c81e17; --g-recruit: #8a8070;
  --hd: 'Unbounded', 'Arial Black', sans-serif; --tx: 'Golos Text', 'Segoe UI', sans-serif; --mono: 'PT Mono', Consolas, monospace;
  --sil-b: .2; --edge: 3px solid var(--ink); --drop: 6px 6px 0 var(--ink);
}
html[data-skin="poster"] body { background: repeating-linear-gradient(0deg, rgba(27,26,23,.025) 0 1px, transparent 1px 4px), var(--bg); }
[data-skin="poster"] .top { background: var(--ink); color: var(--surface); }
[data-skin="poster"] .brand b { font: 900 var(--t-lg)/1 var(--hd); letter-spacing: .04em; text-transform: uppercase; }
[data-skin="poster"] .brand .mark { width: 22px; height: 22px; background: var(--accent); }
[data-skin="poster"] .tabs button { font: 700 var(--t-sm)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #cfc5ad; min-height: 40px; }
[data-skin="poster"] .tabs button:hover { color: #fff; }
[data-skin="poster"] .tabs button[aria-current] { background: var(--accent); color: #fff; }
[data-skin="poster"] .who { font-family: var(--mono); font-weight: 400; color: #cfc5ad; }
[data-skin="poster"] .btn { border: var(--edge); box-shadow: 4px 4px 0 var(--ink); font-family: var(--hd); font-weight: 700; font-size: var(--t-sm); letter-spacing: .04em; text-transform: uppercase; }
[data-skin="poster"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
[data-skin="poster"] .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
[data-skin="poster"] .btn.primary { background: var(--accent); color: #fff; }
[data-skin="poster"] .btn.ghost { background: var(--surface); color: var(--ink); }
[data-skin="poster"] .top .btn { border-color: var(--surface); box-shadow: none; }
[data-skin="poster"] .top .btn.ghost { background: transparent; color: var(--surface); }
[data-skin="poster"] .top .btn:hover { transform: none; background: var(--surface); color: var(--ink); }
[data-skin="poster"] .panel { background: var(--surface); border: var(--edge); box-shadow: var(--drop); padding: var(--s5); }
[data-skin="poster"] .h1, [data-skin="poster"] .h2, [data-skin="poster"] .nm, [data-skin="poster"] .d-n { font-family: var(--hd); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
[data-skin="poster"] .h2 { font-size: var(--t-lg); }
[data-skin="poster"] .muted, [data-skin="poster"] .slot .sl, [data-skin="poster"] .stat dt, [data-skin="poster"] .meter .mk span, [data-skin="poster"] .lg-t dt { font-family: var(--mono); font-weight: 400; letter-spacing: .06em; }
[data-skin="poster"] .stage { background: radial-gradient(circle at 50% 44%, var(--accent) 0 31%, transparent 31.4%), var(--surface); }
[data-skin="poster"] .stage .fig { filter: drop-shadow(0 10px 0 rgba(27,26,23,.25)); }
[data-skin="poster"] .slot { background: var(--surface); border: var(--edge); }
[data-skin="poster"] .slot:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
[data-skin="poster"] .slot.full { box-shadow: inset 0 6px 0 var(--rc); padding-top: var(--s3); }
[data-skin="poster"] .slot[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 3px; }
[data-skin="poster"] .slot:not(.full) { border-style: dashed; background: var(--surface2); }
[data-skin="poster"] .lv { background: var(--ink); color: var(--surface); font-family: var(--mono); font-weight: 400; letter-spacing: .1em; }
[data-skin="poster"] .rl { font-family: var(--mono); font-weight: 400; color: var(--ink); text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-sm); }
[data-skin="poster"] .bar { height: 14px; border: 2px solid var(--ink); background: var(--surface2); }
[data-skin="poster"] .bar.xp i { background: repeating-linear-gradient(-45deg, var(--ink) 0 6px, #3a3731 6px 12px); }
[data-skin="poster"] .bar.hp i { background: var(--accent); }
[data-skin="poster"] .stat { border: 2px solid var(--ink); background: var(--surface2); }
[data-skin="poster"] .stat dd { font-family: var(--hd); font-weight: 900; }
[data-skin="poster"] .stat[data-k="hp"] .i { color: var(--accent); }
[data-skin="poster"] .filters button { border: 2px solid var(--ink); background: var(--surface); font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-xs); }
[data-skin="poster"] .filters button:hover { background: var(--surface2); }
[data-skin="poster"] .filters button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
[data-skin="poster"] .cell { background: var(--surface2); border: 2px solid var(--ink); box-shadow: inset 0 -6px 0 var(--rc); padding-bottom: var(--s3); }
[data-skin="poster"] .cell:hover { transform: translate(-2px, -2px); box-shadow: inset 0 -6px 0 var(--rc), 4px 4px 0 var(--ink); }
[data-skin="poster"] .cell[aria-pressed="true"] { background: var(--surface); outline: 3px solid var(--accent); outline-offset: 2px; }
[data-skin="poster"] .cell .cnt { background: var(--ink); color: var(--surface); font-family: var(--mono); font-weight: 400; bottom: 38px; }
[data-skin="poster"] .cell .upg { background: var(--up); color: #fff; }
[data-skin="poster"] .d-art { background: radial-gradient(circle, color-mix(in srgb, var(--rc) 22%, transparent) 0 45%, transparent 46%), var(--surface2); border: 2px solid var(--ink); }
[data-skin="poster"] .rar { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; padding: 2px 8px; background: var(--rc); color: #fff; }
[data-skin="poster"] .d-st li { padding-bottom: var(--s2); border-bottom: 1px dashed rgba(27,26,23,.3); }
[data-skin="poster"] .ghostnote { background: var(--ink); color: var(--surface); }
[data-skin="poster"] .ghostnote .cd { font-family: var(--hd); font-weight: 900; }
[data-skin="poster"] .ghostnote .gs { color: #cfc5ad; }
[data-skin="poster"] .pend { background: #ffe9a8; border: 2px solid var(--ink); }
[data-skin="poster"] .toast { background: var(--ink); color: var(--surface); border: 2px solid var(--surface); }
[data-skin="poster"] .toast.err { background: var(--accent); }
[data-skin="poster"] .lg-big b, [data-skin="poster"] .gv b, [data-skin="poster"] .lg-t dd { font-family: var(--hd); font-weight: 900; }
[data-skin="poster"] .lg-big b { color: var(--accent); text-shadow: 4px 4px 0 var(--ink); }
[data-skin="poster"] .mix { border: 2px solid var(--ink); gap: 0; height: 22px; }
[data-skin="poster"] .mix i + i { border-left: 2px solid var(--ink); }
[data-skin="poster"] .grp { border-top-width: 10px; border-top-color: var(--gc); }
[data-skin="poster"] .grp .gn { font-family: var(--hd); font-weight: 900; text-transform: uppercase; font-size: var(--t-md); }
[data-skin="poster"] .grp .sw { display: none; }
[data-skin="poster"] .rh { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .12em; }
[data-skin="poster"] .rf .rlv { background: var(--ink); color: var(--surface); font-family: var(--mono); font-weight: 400; }
[data-skin="poster"] .foot { font-family: var(--mono); }
@media (max-width: 1099px) { [data-skin="poster"] .detail { border-width: 3px 0 0; box-shadow: 0 -6px 0 var(--ink); } }



/* =========================================================
   ТЕМА 2 — «АРСЕНАЛ»: тёмное железо и бронза, римские капители (Cinzel).
   Широкий экран: герой — в центре, как лист персонажа; слева характеристики, справа вещь, сумка — во всю ширину снизу.
   ========================================================= */
html[data-skin="forge"] {
  --bg: #110f0c; --surface: #1c1813; --surface2: #15120e; --ink: #ece2cc; --mute: #a69779; --accent: #caa55c; --accent-2: #8c6d33; --focus: #e8c77d;
  --line: #3e3324; --frame: rgba(202,165,92,.2);
  --rc-common: #b9ad95; --rc-uncommon: #6fdc7a; --rc-rare: #5aa8ff; --rc-epic: #b77bff; --rc-legendary: #ffb84a; --up: #7ad08f; --dn: #ff7a6e;
  --g-mage: #a487ff; --g-heal: #79c98f; --g-phys: #e07a45; --g-recruit: #8f846e;
  --hd: 'Forum', Georgia, serif; --tx: 'Golos Text', 'Segoe UI', sans-serif; --mono: 'Golos Text', sans-serif;
  --sil-b: 1.4;
}
html[data-skin="forge"] body { background: radial-gradient(ellipse 80% 50% at 50% 0, #241c12 0, transparent 70%), var(--bg); }
[data-skin="forge"] .top { background: rgba(17,15,12,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
[data-skin="forge"] .brand b { font: 400 var(--t-xl)/1 var(--hd); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
[data-skin="forge"] .brand .mark { width: 26px; height: 26px; border: 2px solid var(--accent); transform: rotate(45deg) scale(.75); }
[data-skin="forge"] .tabs button { font: 400 var(--t-md)/1 var(--hd); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); min-height: 44px; border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
[data-skin="forge"] .tabs button:hover { color: var(--ink); }
[data-skin="forge"] .tabs button[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }
[data-skin="forge"] .btn { border-radius: 4px; font-family: var(--hd); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-sm); }
[data-skin="forge"] .btn.primary { background: linear-gradient(#d8b46b, #b8913f); color: #1a140b; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px #6b5122; }
[data-skin="forge"] .btn.primary:hover { background: linear-gradient(#e6c27a, #c49c48); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px #6b5122, 0 0 18px rgba(202,165,92,.35); }
[data-skin="forge"] .btn.primary:active { transform: translateY(1px); }
[data-skin="forge"] .btn.ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-2); }
[data-skin="forge"] .btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); color: #f0d38f; }
[data-skin="forge"] .panel { background: linear-gradient(180deg, #1f1a14, #18140f); border: 1px solid var(--line); border-radius: 6px; outline: 1px solid var(--frame); outline-offset: -7px; box-shadow: 0 14px 34px rgba(0,0,0,.45); padding: var(--s5); }
[data-skin="forge"] .h1, [data-skin="forge"] .h2, [data-skin="forge"] .nm, [data-skin="forge"] .d-n, [data-skin="forge"] .grp .gn { font-family: var(--hd); font-weight: 400; letter-spacing: .04em; }
[data-skin="forge"] .h2 { font-size: var(--t-lg); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
[data-skin="forge"] .nm { font-size: var(--t-3xl); }
[data-skin="forge"] .h1 { color: var(--accent); }
[data-skin="forge"] .stage { background: radial-gradient(ellipse 60% 45% at 50% 62%, rgba(214,120,40,.22), transparent 70%), linear-gradient(180deg, #1f1a14, #18140f); }
[data-skin="forge"] .stage .fig::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -4px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(5px); z-index: -1; }
[data-skin="forge"] .slot { background: radial-gradient(circle at 50% 40%, #241e17, #0f0d0a); border: 1px solid var(--line); border-radius: 6px; box-shadow: inset 0 2px 10px rgba(0,0,0,.7); }
[data-skin="forge"] .slot:hover { border-color: var(--accent-2); }
[data-skin="forge"] .slot.full { border-color: color-mix(in srgb, var(--rc) 70%, #000); }
[data-skin="forge"] .slot.full[data-r="epic"], [data-skin="forge"] .slot.full[data-r="legendary"] { box-shadow: inset 0 2px 10px rgba(0,0,0,.7), 0 0 16px color-mix(in srgb, var(--rc) 45%, transparent); }
[data-skin="forge"] .slot[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 2px 10px rgba(0,0,0,.7), 0 0 0 1px var(--accent); }
[data-skin="forge"] .slot .sl { font-family: var(--hd); letter-spacing: .12em; }
[data-skin="forge"] .lv { border: 1px solid var(--accent-2); color: var(--accent); border-radius: 3px; font-family: var(--hd); letter-spacing: .08em; }
[data-skin="forge"] .bar { height: 8px; border-radius: 4px; background: #0c0a08; box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px #2c241a; }
[data-skin="forge"] .bar i { border-radius: 4px; }
[data-skin="forge"] .bar.xp i { background: linear-gradient(90deg, #8c6d33, #e8c77d); }
[data-skin="forge"] .bar.hp i { background: linear-gradient(90deg, #7a1d22, #c8414a); }
[data-skin="forge"] .stat { background: var(--surface2); border: 1px solid var(--line); border-radius: 4px; }
[data-skin="forge"] .stat .i { color: var(--accent); }
[data-skin="forge"] .stat dd { font-family: var(--hd); font-weight: 400; }
[data-skin="forge"] .coins .m b { color: var(--accent); }
[data-skin="forge"] .filters button { border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--mute); font-family: var(--hd); letter-spacing: .08em; }
[data-skin="forge"] .filters button:hover { color: var(--ink); border-color: var(--accent-2); }
[data-skin="forge"] .filters button[aria-pressed="true"] { color: #1a140b; background: var(--accent); border-color: var(--accent); }
[data-skin="forge"] .grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s2); }
[data-skin="forge"] .cell { background: radial-gradient(circle at 50% 38%, #221c15, #0e0c09 75%); border: 1px solid color-mix(in srgb, var(--rc) 45%, #2a2219); border-radius: 4px; box-shadow: inset 0 2px 12px rgba(0,0,0,.75); }
[data-skin="forge"] .cell[data-r="epic"], [data-skin="forge"] .cell[data-r="legendary"] { box-shadow: inset 0 2px 12px rgba(0,0,0,.75), inset 0 0 22px color-mix(in srgb, var(--rc) 22%, transparent); }
[data-skin="forge"] .cell:hover { border-color: var(--rc); transform: translateY(-2px); }
[data-skin="forge"] .cell[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 2px 12px rgba(0,0,0,.75), 0 0 0 1px var(--accent), 0 0 18px rgba(202,165,92,.3); }
[data-skin="forge"] .cell .cn { color: var(--rc); }
[data-skin="forge"] .cell .cnt { color: var(--accent); }
[data-skin="forge"] .cell .upg { color: var(--up); border: 1px solid currentColor; border-radius: 50%; }
[data-skin="forge"] .d-art { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 62%); border-bottom: 1px solid var(--line); }
[data-skin="forge"] .rar { font-family: var(--hd); letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-xs); }
[data-skin="forge"] .d-n { color: var(--rc); }
[data-skin="forge"] .d-st li .i { color: var(--accent); }
[data-skin="forge"] .ghostnote { border: 1px solid #3b4a7a; border-radius: 6px; background: linear-gradient(180deg, #1a2036, #121626); color: #c8d3ff; }
[data-skin="forge"] .ghostnote .cd { font-family: var(--hd); color: #eef2ff; text-shadow: 0 0 18px rgba(150,180,255,.5); }
[data-skin="forge"] .ghostnote .gs { color: #8f9cc8; }
[data-skin="forge"] .pend { border: 1px solid #5a4a1a; border-radius: 4px; background: #241d0d; color: #f1dc9c; }
[data-skin="forge"] .toast { background: #211b14; border: 1px solid var(--accent-2); border-radius: 4px; color: var(--ink); }
[data-skin="forge"] .toast.err { border-color: #a03a3a; background: #2a1414; }
[data-skin="forge"] .lg-big b, [data-skin="forge"] .gv b, [data-skin="forge"] .lg-t dd { font-family: var(--hd); font-weight: 400; }
[data-skin="forge"] .lg-big b { color: var(--accent); }
[data-skin="forge"] .mix { border-radius: 4px; overflow: hidden; height: 10px; gap: 2px; }
[data-skin="forge"] .sw { border-radius: 50%; }
[data-skin="forge"] .rf .rlv { color: var(--accent); }
[data-skin="forge"] .rf .rd { filter: drop-shadow(0 4px 4px rgba(0,0,0,.6)); }
@media (max-width: 1099px) { [data-skin="forge"] .detail { border-radius: 10px 10px 0 0; outline: 0; border-bottom: 0; } }



/* =========================================================
   ТЕМА 3 — «НАКЛЕЙКИ»: как сами человечки — плоские яркие цвета, толстая белая обводка, тёмная тушь.
   Каждый блок — наклейка своего цвета, чуть повёрнута. Широкий экран: герой — баннер сверху, вещь — справа.
   ========================================================= */
html[data-skin="sticker"] {
  --bg: #262062; --surface: #fffaf0; --surface2: #f1ebff; --ink: #15122e; --mute: #59537c; --accent: #ff4f73; --accent-2: #c22a4c; --focus: #ffe27a;
  --rc-common: #7d78a0; --rc-uncommon: #24883a; --rc-rare: #1f7dff; --rc-epic: #8b3dff; --rc-legendary: #f08a00; --up: #12945a; --dn: #e0284d;
  --g-mage: #8b6bff; --g-heal: #2fc483; --g-phys: #ff4f73; --g-recruit: #b8b2d8;
  --hd: 'Rubik', 'Arial Black', sans-serif; --tx: 'Golos Text', 'Segoe UI', sans-serif; --mono: 'Rubik', sans-serif;
  --sky: #9cc2ff; --lemon: #ffe27a; --pink: #ffb3c4; --mint: #a8ebb0;
  --sil-b: .5; --sticker: 0 0 0 5px #fff, 0 10px 0 5px rgba(8,6,36,.45);
}
html[data-skin="sticker"] body { background: radial-gradient(rgba(255,255,255,.07) 1.5px, transparent 1.6px) 0 0 / 22px 22px, var(--bg); }
[data-skin="sticker"] .top { background: rgba(38,32,98,.9); backdrop-filter: blur(8px); color: #fff; }
[data-skin="sticker"] .brand b { font: 900 var(--t-xl)/1 var(--hd); }
[data-skin="sticker"] .brand .mark { width: 30px; height: 30px; border-radius: 50%; background: var(--lemon); box-shadow: 0 0 0 3px #fff; }
[data-skin="sticker"] .tabs button { border-radius: 999px; font: 800 var(--t-sm)/1 var(--hd); color: #d7d2ff; min-height: 40px; transition: background .2s var(--ease), color .2s var(--ease); }
[data-skin="sticker"] .tabs button:hover { background: rgba(255,255,255,.12); color: #fff; }
[data-skin="sticker"] .tabs button[aria-current] { background: #fff; color: var(--ink); }
[data-skin="sticker"] .btn { border-radius: 999px; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); font-family: var(--hd); font-weight: 800; }
[data-skin="sticker"] .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
[data-skin="sticker"] .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
[data-skin="sticker"] .btn.primary { background: var(--accent); color: #fff; }
[data-skin="sticker"] .btn.ghost { background: #fff; color: var(--ink); }
[data-skin="sticker"] .top .btn { border-color: #fff; box-shadow: none; }
[data-skin="sticker"] .top .btn.ghost { background: transparent; color: #fff; }
[data-skin="sticker"] .top .btn:hover { transform: none; background: #fff; color: var(--ink); }
[data-skin="sticker"] .panel { background: var(--surface); border-radius: 26px; box-shadow: var(--sticker); padding: var(--s5); }
[data-skin="sticker"] .stage { background: var(--sky); transform: rotate(-.6deg); }
[data-skin="sticker"] .vitals { background: var(--lemon); transform: rotate(.5deg); }
[data-skin="sticker"] .detail { background: var(--pink); }
[data-skin="sticker"] .h1, [data-skin="sticker"] .h2, [data-skin="sticker"] .nm, [data-skin="sticker"] .d-n, [data-skin="sticker"] .grp .gn { font-family: var(--hd); font-weight: 900; }
[data-skin="sticker"] .nm { font-size: var(--t-3xl); }
[data-skin="sticker"] .h1 { color: var(--ink); }
[data-skin="sticker"] .hello { background: var(--lemon); }
[data-skin="sticker"] .stage .fig { filter: drop-shadow(0 8px 0 rgba(21,18,46,.25)); }
[data-skin="sticker"] .slot { background: #fff; border: 3px solid var(--ink); border-radius: 22px; }
[data-skin="sticker"] .slot:nth-of-type(2n) { transform: rotate(-3deg); } [data-skin="sticker"] .slot:nth-of-type(2n+1) { transform: rotate(2.5deg); }
[data-skin="sticker"] .slot:hover { transform: rotate(0) scale(1.05); }
[data-skin="sticker"] .slot.full { background: color-mix(in srgb, var(--rc) 16%, #fff); }
[data-skin="sticker"] .slot.full .sn { color: var(--ink); }
[data-skin="sticker"] .slot[aria-pressed="true"] { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--accent); }
[data-skin="sticker"] .slot:not(.full) { border-style: dashed; background: rgba(255,255,255,.55); }
[data-skin="sticker"] .slot .sl { color: var(--ink); opacity: .7; }
[data-skin="sticker"] .lv { background: var(--ink); color: var(--lemon); border-radius: 999px; padding: 2px 12px; }
[data-skin="sticker"] .rl { color: var(--ink); }
[data-skin="sticker"] .bar { height: 18px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; }
[data-skin="sticker"] .bar i { border-radius: 999px; }
[data-skin="sticker"] .bar.xp i { background: #8b6bff; }
[data-skin="sticker"] .bar.hp i { background: var(--accent); }
[data-skin="sticker"] .meter .mk span { color: var(--ink); font-weight: 700; opacity: .75; }
[data-skin="sticker"] .stat { background: #fff; border: 3px solid var(--ink); border-radius: 18px; }
[data-skin="sticker"] .stat dt { color: var(--mute); }
[data-skin="sticker"] .stat dd { font-family: var(--hd); font-weight: 900; }
[data-skin="sticker"] .stat[data-k="hp"] .i { color: var(--accent); } [data-skin="sticker"] .stat[data-k="atk"] .i { color: #e86a1d; }
[data-skin="sticker"] .stat[data-k="mag"] .i { color: #8b3dff; } [data-skin="sticker"] .stat[data-k="def"] .i { color: #1f7dff; }
[data-skin="sticker"] .coins { color: var(--ink); }
[data-skin="sticker"] .filters button { border: 3px solid var(--ink); border-radius: 999px; background: #fff; font-family: var(--hd); font-weight: 700; }
[data-skin="sticker"] .filters button:hover { background: var(--surface2); }
[data-skin="sticker"] .filters button[aria-pressed="true"] { background: var(--ink); color: #fff; }
[data-skin="sticker"] .cell { background: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink); }
[data-skin="sticker"] .cell::before { content: ''; position: absolute; left: 8px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 0 2px var(--ink); }
[data-skin="sticker"] .cell:nth-child(3n+1) { transform: rotate(-1.5deg); } [data-skin="sticker"] .cell:nth-child(3n+2) { transform: rotate(1deg); }
[data-skin="sticker"] .cell:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 7px 0 var(--ink); }
[data-skin="sticker"] .cell[aria-pressed="true"] { background: var(--pink); transform: rotate(0) scale(1.04); }
[data-skin="sticker"] .cell .cn { font-family: var(--hd); font-weight: 700; }
[data-skin="sticker"] .cell .cnt { background: var(--lemon); border: 2px solid var(--ink); border-radius: 999px; }
[data-skin="sticker"] .cell .upg { background: var(--up); color: #fff; border-radius: 50%; border: 2px solid var(--ink); }
[data-skin="sticker"] .d-art { background: #fff; border: 3px solid var(--ink); border-radius: 22px; }
[data-skin="sticker"] .rar { padding: 2px 10px; border-radius: 999px; background: var(--rc); color: #fff; border: 2px solid var(--ink); }
[data-skin="sticker"] .d-st li span, [data-skin="sticker"] .d-cmp, [data-skin="sticker"] .d-role, [data-skin="sticker"] .detail .muted, [data-skin="sticker"] .note { color: #4a2b3a; }
[data-skin="sticker"] .d-st li { background: rgba(255,255,255,.6); border-radius: 12px; padding: 6px 10px; }
[data-skin="sticker"] .ghostnote { background: #dfe6ff; border: 3px solid var(--ink); border-radius: 20px; }
[data-skin="sticker"] .ghostnote .cd { font-family: var(--hd); font-weight: 900; }
[data-skin="sticker"] .pend { background: var(--lemon); border: 3px solid var(--ink); border-radius: 16px; }
[data-skin="sticker"] .toast { background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 5px 0 var(--ink); }
[data-skin="sticker"] .toast.err { background: var(--accent); color: #fff; }
[data-skin="sticker"] .foot, [data-skin="sticker"] .legion > .foot, [data-skin="sticker"] .tab > .empty { color: #c9c3f5; }
[data-skin="sticker"] .lg-head { background: var(--lemon); transform: rotate(-.4deg); }
[data-skin="sticker"] .lg-big b, [data-skin="sticker"] .gv b, [data-skin="sticker"] .lg-t dd { font-family: var(--hd); font-weight: 900; }
[data-skin="sticker"] .lg-big span, [data-skin="sticker"] .lg-t dt { color: var(--ink); opacity: .75; }
[data-skin="sticker"] .mix { height: 24px; gap: 0; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; background: #fff; }
[data-skin="sticker"] .mix i + i { border-left: 3px solid var(--ink); }
[data-skin="sticker"] .grp:nth-child(1) { transform: rotate(-.8deg); } [data-skin="sticker"] .grp:nth-child(2) { transform: rotate(.6deg); } [data-skin="sticker"] .grp:nth-child(3) { transform: rotate(-.4deg); } [data-skin="sticker"] .grp:nth-child(4) { transform: rotate(.9deg); }
[data-skin="sticker"] .gv b { color: var(--ink); -webkit-text-stroke: 0; }
[data-skin="sticker"] .grp .gn .sw { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ink); }
[data-skin="sticker"] .grp { border-top: 0; box-shadow: var(--sticker), inset 0 10px 0 var(--gc); padding-top: var(--s6); }
[data-skin="sticker"] .ranks { background: var(--sky); }
[data-skin="sticker"] .rh .sw { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--ink); }
[data-skin="sticker"] .rf .rlv { background: var(--ink); color: var(--lemon); border-radius: 999px; }
[data-skin="sticker"] .rf .rn { color: var(--ink); }
@media (max-width: 1099px) { [data-skin="sticker"] .detail { border-radius: 28px 28px 0 0; box-shadow: 0 -5px 0 #fff, 0 -14px 30px rgba(0,0,0,.35); } [data-skin="sticker"] .detail .x { color: var(--ink); } }
@media (min-width: 1100px) { [data-skin="sticker"] .detail { transform: rotate(.8deg); } }


/* #########################################################
   КОТИКИ
   ######################################################### */

/* ТЕМА К1 — «КНИЖКА»: страница детской книжки, как карточки героя у котиков на стриме.
   Тёплая бумага, коричневая обводка, розовые лапки, медовый свет. Pangolin + Nunito. Раскладка A. */
html[data-skin="book"] {
  --bg: #f8e3c4; --surface: #fff8ec; --surface2: #fdeedd; --ink: #2b1d18; --mute: #7d5d48; --accent: #e8607a; --accent-2: #c2405a; --focus: #e8607a;
  --rc-common: #7d5d48; --rc-uncommon: #24883a; --rc-rare: #2a7fc7; --rc-epic: #8a45d0; --rc-legendary: #b86f00; --up: #3f8a2f; --dn: #c2405a;
  --g-mage: #8a45d0; --g-heal: #3f9a5a; --g-phys: #e8607a; --g-recruit: #b0906e;
  --hd: 'Pangolin', 'Comic Sans MS', cursive; --tx: 'Nunito', 'Segoe UI', sans-serif;
  --sil-b: .3; --pink: #ff8fa3; --honey: #ffd29a; --crumb: #e8cfae;
}
html[data-skin="book"] body { background: radial-gradient(circle at 20% 30%, rgba(255,143,163,.18) 0 3px, transparent 4px) 0 0 / 46px 46px, radial-gradient(circle at 70% 75%, rgba(160,112,58,.12) 0 2px, transparent 3px) 0 0 / 46px 46px, var(--bg); }
[data-skin="book"] .top { background: var(--surface); border-bottom: 3px solid var(--ink); }
[data-skin="book"] .brand b { font: 400 var(--t-2xl)/1 var(--hd); }
[data-skin="book"] .brand .mark { width: 26px; height: 24px; background: radial-gradient(circle at 50% 72%, var(--pink) 34%, transparent 36%), radial-gradient(circle at 18% 28%, var(--pink) 15%, transparent 17%), radial-gradient(circle at 50% 12%, var(--pink) 15%, transparent 17%), radial-gradient(circle at 82% 28%, var(--pink) 15%, transparent 17%); }
[data-skin="book"] .tabs button { border-radius: 999px; font: 400 var(--t-lg)/1 var(--hd); color: var(--mute); min-height: 40px; transition: background .2s var(--ease), color .2s var(--ease); }
[data-skin="book"] .tabs button:hover { color: var(--ink); background: var(--surface2); }
[data-skin="book"] .tabs button[aria-current] { color: var(--ink); background: var(--honey); box-shadow: inset 0 0 0 2.5px var(--ink); }
[data-skin="book"] .btn { border-radius: 999px; border: 2.5px solid var(--ink); font-family: var(--hd); font-weight: 400; font-size: var(--t-lg); box-shadow: 0 4px 0 var(--ink); }
[data-skin="book"] .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
[data-skin="book"] .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
[data-skin="book"] .btn.primary { background: linear-gradient(#ff9fb2, #e8607a); color: #fff; text-shadow: 0 1px 0 var(--accent-2); }
[data-skin="book"] .btn.ghost { background: var(--surface); color: var(--ink); }
[data-skin="book"] .top .btn { box-shadow: none; font-size: var(--t-md); }
[data-skin="book"] .panel { background: var(--surface); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 0 0 4px var(--honey), 0 0 0 7px var(--ink), 0 12px 22px rgba(43,29,24,.22); padding: var(--s5); }
[data-skin="book"] .h1, [data-skin="book"] .h2, [data-skin="book"] .nm, [data-skin="book"] .d-n, [data-skin="book"] .grp .gn, [data-skin="book"] .lg-big b, [data-skin="book"] .gv b, [data-skin="book"] .stat dd, [data-skin="book"] .lg-t dd, [data-skin="book"] .ghostnote .cd { font-family: var(--hd); font-weight: 400; }
[data-skin="book"] .h2 { font-size: var(--t-2xl); }
[data-skin="book"] .nm { font-size: var(--t-3xl); text-shadow: 0 2px 0 var(--honey); }
[data-skin="book"] .stage { background: radial-gradient(ellipse 55% 45% at 50% 60%, rgba(255,210,63,.5), transparent 70%), linear-gradient(#fff3df, #ffe2b8); }
[data-skin="book"] .slot { background: var(--surface); border: 2.5px solid var(--ink); border-radius: 18px; }
[data-skin="book"] .slot:hover { transform: translateY(-2px) rotate(-1deg); }
[data-skin="book"] .slot.full { box-shadow: inset 0 -6px 0 var(--rc); }
[data-skin="book"] .slot:not(.full) { border-style: dashed; background: rgba(255,248,236,.6); }
[data-skin="book"] .slot[aria-pressed="true"] { box-shadow: inset 0 -6px 0 var(--rc), 0 0 0 4px var(--pink); }
[data-skin="book"] .lv { background: linear-gradient(#ff9fb2, #e8607a); color: #fff; border: 2px solid var(--ink); border-radius: 999px; }
[data-skin="book"] .rl { color: #a0703a; }
[data-skin="book"] .bar { height: 12px; border-radius: 8px; background: #f1dcc0; box-shadow: inset 0 0 0 2px var(--ink); }
[data-skin="book"] .bar i { border-radius: 8px; }
[data-skin="book"] .bar.xp i { background: linear-gradient(90deg, #ff8fa3, #ffb84a); }
[data-skin="book"] .bar.hp i { background: linear-gradient(90deg, #e8607a, #ff8fa3); }
[data-skin="book"] .stat { background: #fffaf2; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--crumb); }
[data-skin="book"] .stat .i { color: var(--accent); }
[data-skin="book"] .filters button { border-radius: 999px; border: 2px solid var(--crumb); background: #fffaf2; color: var(--mute); }
[data-skin="book"] .filters button:hover { border-color: var(--ink); color: var(--ink); }
[data-skin="book"] .filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
[data-skin="book"] .cell { background: #fffaf2; border: 0; border-radius: 18px; box-shadow: inset 0 0 0 2px var(--crumb); }
[data-skin="book"] .cell::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 28px; height: 4px; margin-left: -14px; border-radius: 4px; background: var(--rc); }
[data-skin="book"] .cell:hover { box-shadow: inset 0 0 0 2.5px var(--ink); transform: translateY(-2px); }
[data-skin="book"] .cell[aria-pressed="true"] { background: #fff0f3; box-shadow: inset 0 0 0 3px var(--accent); }
[data-skin="book"] .cell .cn { padding-bottom: 6px; }
[data-skin="book"] .cell .cnt { background: var(--honey); border: 2px solid var(--ink); border-radius: 999px; bottom: 40px; }
[data-skin="book"] .cell .upg { background: #7cc96a; color: #fff; border: 2px solid var(--ink); border-radius: 50%; }
[data-skin="book"] .d-art { border-radius: 18px; background: radial-gradient(ellipse at 50% 100%, rgba(255,210,63,.55), transparent 65%), linear-gradient(#ffe7c2, #ffd29a); box-shadow: inset 0 0 0 3px var(--ink); }
[data-skin="book"] .rar { padding: 2px 10px; border-radius: 999px; background: var(--rc); color: #fff; }
[data-skin="book"] .d-st li { padding: 6px 10px; border-radius: 10px; background: #fff3e0; }
[data-skin="book"] .ghostnote { border-radius: 18px; background: linear-gradient(#f4f0fb, #e3dcf0); border: 2.5px solid var(--ink); color: #5a4a7a; }
[data-skin="book"] .ghostnote .gs { color: #6a5a9a; }
[data-skin="book"] .pend { border-radius: 14px; background: #fff3c4; border: 2px solid var(--ink); }
[data-skin="book"] .toast { background: var(--surface); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink); }
[data-skin="book"] .toast.err { background: #ffe1e6; }
[data-skin="book"] .mix { height: 16px; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--ink); gap: 0; }
[data-skin="book"] .sw { border-radius: 50%; }
[data-skin="book"] .rf .rlv { background: var(--honey); border-radius: 999px; }
@media (max-width: 1099px) { [data-skin="book"] .detail { border-radius: 26px 26px 0 0; box-shadow: 0 -4px 0 var(--honey), 0 -7px 0 var(--ink); } }

/* ТЕМА К2 — «ЛЕЖАНКА»: ночная кухня под тёплой лампой. Тёмный сливовый, мёд и розовый, мягкие подушки.
   Comfortaa + Nunito. Слоты — круглые, как миски. Раскладка B. */
html[data-skin="den"] {
  --bg: #1d1620; --surface: #2a2030; --surface2: #221a28; --ink: #f7eadf; --mute: #bfaab7; --accent: #ff8fa3; --accent-2: #ffcf6a; --focus: #ffcf6a;
  --rc-common: #c9b6c2; --rc-uncommon: #6fdc7a; --rc-rare: #7cc8ff; --rc-epic: #cf9bff; --rc-legendary: #ffcf6a; --up: #8fe39a; --dn: #ff8f8f;
  --g-mage: #cf9bff; --g-heal: #8fe3b0; --g-phys: #ff8fa3; --g-recruit: #a8949f;
  --hd: 'Comfortaa', 'Nunito', sans-serif; --tx: 'Nunito', 'Segoe UI', sans-serif;
  --sil-b: 1.6;
}
html[data-skin="den"] body { background: radial-gradient(ellipse 60% 40% at 50% -6%, rgba(255,207,106,.22), transparent 70%), var(--bg); }
[data-skin="den"] .top { background: rgba(29,22,32,.9); backdrop-filter: blur(10px); }
[data-skin="den"] .brand b { font: 700 var(--t-xl)/1 var(--hd); color: var(--accent-2); }
[data-skin="den"] .brand .mark { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 14px 4px rgba(255,207,106,.6); }
[data-skin="den"] .tabs button { border-radius: 999px; font: 700 var(--t-sm)/1 var(--hd); color: var(--mute); min-height: 40px; transition: background .2s var(--ease), color .2s var(--ease); }
[data-skin="den"] .tabs button:hover { color: var(--ink); background: rgba(255,255,255,.06); }
[data-skin="den"] .tabs button[aria-current] { color: #2a1b22; background: var(--accent); }
[data-skin="den"] .btn { border-radius: 999px; font-family: var(--hd); font-weight: 700; }
[data-skin="den"] .btn.primary { background: var(--accent); color: #2a1b22; box-shadow: 0 8px 22px rgba(255,143,163,.3); }
[data-skin="den"] .btn.primary:hover { background: #ffa3b4; transform: translateY(-1px); }
[data-skin="den"] .btn.primary:active { transform: translateY(1px); }
[data-skin="den"] .btn.ghost { background: rgba(255,255,255,.07); color: var(--ink); }
[data-skin="den"] .btn.ghost:hover { background: rgba(255,255,255,.13); }
[data-skin="den"] .panel { background: var(--surface); border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.35); padding: var(--s5); }
[data-skin="den"] .h1, [data-skin="den"] .h2, [data-skin="den"] .nm, [data-skin="den"] .d-n, [data-skin="den"] .grp .gn, [data-skin="den"] .lg-big b, [data-skin="den"] .gv b, [data-skin="den"] .stat dd, [data-skin="den"] .lg-t dd, [data-skin="den"] .ghostnote .cd { font-family: var(--hd); font-weight: 700; }
[data-skin="den"] .h1, [data-skin="den"] .lg-big b { color: var(--accent-2); }
[data-skin="den"] .nm { font-size: var(--t-3xl); }
[data-skin="den"] .stage { background: radial-gradient(ellipse 40% 34% at 50% 18%, rgba(255,207,106,.28), transparent 75%), radial-gradient(ellipse 34% 7% at 50% 74%, rgba(255,143,163,.35), transparent 100%), var(--surface); }
[data-skin="den"] .slot { aspect-ratio: 1; min-height: 0; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #34283a, #1b141f); box-shadow: inset 0 3px 10px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.05); padding: var(--s3); }
[data-skin="den"] .slot .sn { display: none; }
[data-skin="den"] .slot .art { width: 54%; height: auto; aspect-ratio: 1; }
[data-skin="den"] .slot:hover { box-shadow: inset 0 3px 10px rgba(0,0,0,.5), 0 0 0 2px var(--accent-2); }
[data-skin="den"] .slot.full { box-shadow: inset 0 3px 10px rgba(0,0,0,.5), 0 0 0 3px var(--rc), 0 0 18px color-mix(in srgb, var(--rc) 30%, transparent); }
[data-skin="den"] .slot[aria-pressed="true"] { box-shadow: inset 0 3px 10px rgba(0,0,0,.5), 0 0 0 3px var(--accent-2), 0 0 22px rgba(255,207,106,.45); }
[data-skin="den"] .lv { background: rgba(255,207,106,.15); color: var(--accent-2); border-radius: 999px; }
[data-skin="den"] .bar { height: 10px; border-radius: 999px; background: #15101a; }
[data-skin="den"] .bar i { border-radius: 999px; }
[data-skin="den"] .bar.xp i { background: linear-gradient(90deg, #ffb84a, #ffcf6a); }
[data-skin="den"] .bar.hp i { background: linear-gradient(90deg, #e8607a, #ff8fa3); }
[data-skin="den"] .stat { border-radius: 20px; background: var(--surface2); }
[data-skin="den"] .stat .i { color: var(--accent-2); }
[data-skin="den"] .filters button { border: 0; border-radius: 999px; background: var(--surface2); color: var(--mute); }
[data-skin="den"] .filters button:hover { color: var(--ink); }
[data-skin="den"] .filters button[aria-pressed="true"] { background: var(--accent-2); color: #2a1b22; }
[data-skin="den"] .cell { border: 0; border-radius: 22px; background: var(--surface2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
[data-skin="den"] .cell::before { content: ''; position: absolute; inset: 18% 22% 34%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 28%, transparent), transparent 70%); }
[data-skin="den"] .cell .art { position: relative; }
[data-skin="den"] .cell:hover { background: #2c2233; transform: translateY(-2px); }
[data-skin="den"] .cell[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent-2), 0 0 20px rgba(255,207,106,.25); }
[data-skin="den"] .cell .cn { color: var(--rc); }
[data-skin="den"] .cell .cnt { color: var(--accent-2); }
[data-skin="den"] .cell .upg { background: var(--up); color: #1d1620; border-radius: 50%; }
[data-skin="den"] .d-art { border-radius: 24px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 25%, transparent), transparent 65%), var(--surface2); }
[data-skin="den"] .rar { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--rc) 20%, transparent); }
[data-skin="den"] .ghostnote { border-radius: 24px; background: linear-gradient(#2c2a48, #201d36); color: #d9d4ff; }
[data-skin="den"] .ghostnote .gs { color: #a9a3d9; }
[data-skin="den"] .pend { border-radius: 18px; background: rgba(255,207,106,.12); color: #ffe3a6; }
[data-skin="den"] .toast { background: #33263a; border-radius: 999px; color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
[data-skin="den"] .toast.err { background: #4a2030; }
[data-skin="den"] .mix { height: 12px; border-radius: 999px; overflow: hidden; gap: 3px; }
[data-skin="den"] .sw { border-radius: 50%; }
[data-skin="den"] .rf .rlv { color: var(--accent-2); }
[data-skin="den"] .foot { color: #8a7885; }
@media (max-width: 1099px) { [data-skin="den"] .detail { border-radius: 32px 32px 0 0; } }

/* ТЕМА К3 — «КОРОБКА»: котики живут в картонной коробке. Крафт-картон, малярный скотч, штампы краской.
   Rubik Mono One (штамп) + Nunito. Вещи — в ячейках-отсеках. Раскладка C. */
html[data-skin="box"] {
  --bg: #b98b55; --surface: #d6ad74; --surface2: #c99d63; --ink: #2e1f12; --mute: #5d4127; --accent: #b8321f; --accent-2: #7e1f12; --focus: #b8321f;
  --rc-common: #5d4127; --rc-uncommon: #24883a; --rc-rare: #1f5fa8; --rc-epic: #6c2fb0; --rc-legendary: #a35a00; --up: #2f6f22; --dn: #b8321f;
  --g-mage: #6c2fb0; --g-heal: #2f7a3f; --g-phys: #b8321f; --g-recruit: #7a6046;
  --hd: 'Rubik Mono One', 'Arial Black', sans-serif; --tx: 'Nunito', 'Segoe UI', sans-serif;
  --sil-b: .2; --tape: rgba(244,232,190,.88);
}
html[data-skin="box"] body { background: repeating-linear-gradient(90deg, rgba(60,35,10,.06) 0 2px, transparent 2px 7px), repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 5px), var(--bg); }
[data-skin="box"] .top { background: #3a2716; color: #f2dfbf; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
[data-skin="box"] .brand b { font: 400 var(--t-md)/1 var(--hd); letter-spacing: .06em; }
[data-skin="box"] .brand .mark { width: 22px; height: 22px; border: 3px solid #f2dfbf; border-radius: 3px; }
[data-skin="box"] .tabs button { font: 400 12px/1 var(--hd); letter-spacing: .06em; color: #cdb48e; min-height: 40px; }
[data-skin="box"] .tabs button:hover { color: #fff; }
[data-skin="box"] .tabs button[aria-current] { color: #3a2716; background: var(--tape); }
[data-skin="box"] .btn { border-radius: 4px; font-family: var(--hd); font-weight: 400; font-size: 13px; letter-spacing: .04em; border: 3px solid var(--ink); }
[data-skin="box"] .btn.primary { background: var(--accent); color: #fff4e0; box-shadow: 0 4px 0 var(--accent-2); }
[data-skin="box"] .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--accent-2); }
[data-skin="box"] .btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-2); }
[data-skin="box"] .btn.ghost { background: var(--tape); color: var(--ink); }
[data-skin="box"] .top .btn { border-color: #f2dfbf; background: transparent; color: #f2dfbf; }
[data-skin="box"] .panel { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%), var(--surface); border: 2px solid #9b7243; border-radius: 6px; box-shadow: 0 2px 0 #8a6238, 0 14px 24px rgba(46,31,18,.3); padding: var(--s5); }
[data-skin="box"] .panel::before, [data-skin="box"] .panel::after { content: ''; position: absolute; top: -10px; width: 86px; height: 26px; background: var(--tape); box-shadow: 0 1px 2px rgba(0,0,0,.15); pointer-events: none; }
[data-skin="box"] .panel::before { left: 18px; transform: rotate(-4deg); }
[data-skin="box"] .panel::after { right: 18px; transform: rotate(3deg); }
[data-skin="box"] .detail::after, [data-skin="box"] .vitals::before { display: none; }
[data-skin="box"] .h1, [data-skin="box"] .h2, [data-skin="box"] .nm, [data-skin="box"] .d-n, [data-skin="box"] .grp .gn, [data-skin="box"] .lg-big b, [data-skin="box"] .gv b, [data-skin="box"] .stat dd, [data-skin="box"] .lg-t dd, [data-skin="box"] .ghostnote .cd { font-family: var(--hd); font-weight: 400; }
[data-skin="box"] .h2 { display: inline-block; font-size: var(--t-md); color: var(--accent); border: 3px solid currentColor; padding: 4px 10px; transform: rotate(-2deg); letter-spacing: .04em; }
[data-skin="box"] .nm { font-size: var(--t-2xl); text-transform: uppercase; }
[data-skin="box"] .d-n { font-size: var(--t-lg); }
[data-skin="box"] .stage { background: radial-gradient(ellipse 50% 60% at 70% 60%, rgba(46,31,18,.3), transparent 70%), linear-gradient(180deg, #6a4826, #8a6238 30%, var(--surface2) 30.5%); }
[data-skin="box"] .slot { background: #b48650; border: 0; border-radius: 4px; box-shadow: inset 0 3px 8px rgba(46,31,18,.45); }
[data-skin="box"] .slot .sl { color: var(--ink); opacity: .7; }
[data-skin="box"] .slot:hover { box-shadow: inset 0 3px 8px rgba(46,31,18,.45), 0 0 0 3px var(--tape); }
[data-skin="box"] .slot.full { background: #c99a5e; box-shadow: inset 0 3px 8px rgba(46,31,18,.3), inset 0 -5px 0 var(--rc); }
[data-skin="box"] .slot.full .sn { color: var(--ink); }
[data-skin="box"] .slot[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 40% 55% 45% 50%; }
[data-skin="box"] .rl { color: var(--ink); }
[data-skin="box"] .lv { border: 2px solid var(--accent); color: var(--accent); font-family: var(--hd); font-size: 12px; }
[data-skin="box"] .bar { height: 14px; border-radius: 3px; background: #b48650; box-shadow: inset 0 2px 4px rgba(46,31,18,.4); }
[data-skin="box"] .bar.xp i { background: repeating-linear-gradient(-45deg, #2e1f12 0 5px, #4a3420 5px 10px); }
[data-skin="box"] .bar.hp i { background: var(--accent); }
[data-skin="box"] .meter .mk span, [data-skin="box"] .stat dt, [data-skin="box"] .coins { color: var(--ink); }
[data-skin="box"] .stat { background: #e3c08b; border-radius: 4px; box-shadow: inset 0 0 0 2px #9b7243; }
[data-skin="box"] .filters button { border: 2px solid var(--ink); border-radius: 3px; background: transparent; color: var(--ink); font-weight: 800; }
[data-skin="box"] .filters button:hover { background: rgba(255,255,255,.2); }
[data-skin="box"] .filters button[aria-pressed="true"] { background: var(--ink); color: #f2dfbf; }
[data-skin="box"] .grid { gap: 6px; padding: 6px; background: #8a6238; border-radius: 4px; }
[data-skin="box"] .cell { border: 0; border-radius: 2px; background: var(--surface2); box-shadow: inset 0 4px 10px rgba(46,31,18,.4); }
[data-skin="box"] .cell::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 5px; height: 4px; background: var(--rc); opacity: .85; }
[data-skin="box"] .cell:hover { background: #d6ad74; }
[data-skin="box"] .cell[aria-pressed="true"] { background: #e8c48c; box-shadow: inset 0 0 0 3px var(--accent); }
[data-skin="box"] .cell .cn { padding-bottom: 6px; color: var(--ink); }
[data-skin="box"] .cell .cnt { color: var(--accent); font-family: var(--hd); font-weight: 400; bottom: 38px; }
[data-skin="box"] .cell .upg { color: #fff; background: var(--up); border-radius: 2px; }
[data-skin="box"] .d-art { background: #b48650; border-radius: 4px; box-shadow: inset 0 4px 12px rgba(46,31,18,.45); }
[data-skin="box"] .rar { font-family: var(--hd); font-weight: 400; font-size: 11px; padding: 3px 8px; border: 2px solid var(--rc); color: var(--rc); transform: rotate(-2deg); }
[data-skin="box"] .detail .muted, [data-skin="box"] .d-st li span, [data-skin="box"] .d-cmp, [data-skin="box"] .d-role, [data-skin="box"] .note, [data-skin="box"] .muted { color: var(--mute); }
[data-skin="box"] .d-st li { border-bottom: 2px dotted rgba(46,31,18,.3); padding-bottom: 6px; }
[data-skin="box"] .ghostnote { background: #e9e2f2; border: 2px dashed #5a4a7a; border-radius: 4px; color: #3e3060; }
[data-skin="box"] .ghostnote .gs { color: #5a4a7a; }
[data-skin="box"] .pend { background: var(--tape); border-radius: 2px; }
[data-skin="box"] .toast { background: #3a2716; color: #f2dfbf; border-radius: 4px; }
[data-skin="box"] .toast.err { background: var(--accent); }
[data-skin="box"] .mix { height: 18px; gap: 0; border: 2px solid var(--ink); }
[data-skin="box"] .rf .rlv { color: var(--accent); font-family: var(--hd); font-weight: 400; }
[data-skin="box"] .foot, [data-skin="box"] .tab > .empty { color: #4a3420; }
@media (max-width: 1099px) { [data-skin="box"] .detail { border-radius: 8px 8px 0 0; } [data-skin="box"] .detail::before { display: none; } }


/* #########################################################
   ЗЛЫЕ ОБЕЗЬЯНЫ
   ######################################################### */

/* ТЕМА О1 — «ТАБЛИЧКА»: табличка в джунглях, как карточки обезьян на стриме. Доски, гвозди, банановая плашка, листва.
   Rubik Dirt (заголовки) + Golos Text. Раскладка A. */
html[data-skin="plank"] {
  --bg: #17301b; --surface: #7a4a24; --surface2: #5c3518; --ink: #fff1d6; --mute: #e2c8a0; --accent: #ffd84a; --accent-2: #c9a21f; --focus: #ffd84a;
  --rc-common: #e2d6c0; --rc-uncommon: #6fdc7a; --rc-rare: #7fd0ff; --rc-epic: #d6a2ff; --rc-legendary: #ffd84a; --up: #a8f07a; --dn: #ff8a7a;
  --g-mage: #b58aff; --g-heal: #7bc043; --g-phys: #ff6a4a; --g-recruit: #c9a77a;
  --hd: 'Rubik Dirt', 'Rubik', 'Arial Black', sans-serif; --tx: 'Golos Text', 'Segoe UI', sans-serif;
  --sil-b: 1.4; --wood: #2a1a12;
}
html[data-skin="plank"] body { background: radial-gradient(ellipse 30% 20% at 10% 10%, rgba(123,192,67,.25), transparent 70%), radial-gradient(ellipse 35% 25% at 90% 40%, rgba(79,176,138,.18), transparent 70%), radial-gradient(ellipse 30% 25% at 30% 90%, rgba(123,192,67,.2), transparent 70%), var(--bg); }
[data-skin="plank"] .top { background: var(--wood); border-bottom: 4px solid #4fb05a; }
[data-skin="plank"] .brand b { font: 400 var(--t-2xl)/1 var(--hd); color: var(--accent); }
[data-skin="plank"] .brand .mark { width: 30px; height: 14px; border-radius: 0 0 30px 30px / 0 0 18px 18px; background: var(--accent); border: 2px solid #1a0f08; transform: rotate(-20deg); }
[data-skin="plank"] .tabs button { font: 800 var(--t-sm)/1 var(--tx); color: var(--mute); min-height: 40px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }
[data-skin="plank"] .tabs button:hover { color: #fff; }
[data-skin="plank"] .tabs button[aria-current] { background: var(--accent); color: var(--wood); }
[data-skin="plank"] .btn { border-radius: 6px; border: 3px solid #1a0f08; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 4px 0 #1a0f08; }
[data-skin="plank"] .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #1a0f08; }
[data-skin="plank"] .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a0f08; }
[data-skin="plank"] .btn.primary { background: var(--accent); color: var(--wood); }
[data-skin="plank"] .btn.ghost { background: #a8723f; color: var(--ink); }
[data-skin="plank"] .top .btn { box-shadow: none; }
[data-skin="plank"] .panel { position: relative; color: var(--ink); background: repeating-linear-gradient(180deg, transparent 0 58px, rgba(26,15,8,.55) 58px 61px), linear-gradient(90deg, rgba(255,255,255,.03), transparent 30%, rgba(0,0,0,.08) 70%, transparent), var(--surface); border: 3px solid #1a0f08; border-radius: 8px; box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 12px 24px rgba(0,0,0,.4); padding: var(--s5); }
[data-skin="plank"] .panel::before, [data-skin="plank"] .panel::after { content: ''; position: absolute; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8d0c0, #5a5048 70%); box-shadow: 0 1px 0 rgba(0,0,0,.6); }
[data-skin="plank"] .panel::before { left: 10px; } [data-skin="plank"] .panel::after { right: 10px; }
[data-skin="plank"] .detail .x { color: var(--ink); }
[data-skin="plank"] .h1, [data-skin="plank"] .h2, [data-skin="plank"] .nm, [data-skin="plank"] .lg-big b, [data-skin="plank"] .gv b, [data-skin="plank"] .grp .gn { font-family: var(--hd); font-weight: 400; }
[data-skin="plank"] .h2 { display: inline-block; font-size: var(--t-xl); color: var(--wood); background: var(--accent); padding: 4px 14px 2px; border: 3px solid #1a0f08; border-radius: 4px; transform: rotate(-1.5deg); box-shadow: 0 3px 0 #1a0f08; }
[data-skin="plank"] .bag-h .muted { color: var(--mute); }
[data-skin="plank"] .nm { font-size: var(--t-3xl); color: var(--accent); text-shadow: 0 3px 0 #1a0f08; }
[data-skin="plank"] .d-n { font-weight: 900; }
[data-skin="plank"] .stage { background: radial-gradient(ellipse 45% 40% at 50% 55%, rgba(255,216,74,.22), transparent 70%), repeating-linear-gradient(180deg, transparent 0 58px, rgba(26,15,8,.55) 58px 61px), var(--surface); }
[data-skin="plank"] .slot { background: var(--surface2); border: 3px solid #1a0f08; border-radius: 6px; box-shadow: inset 0 3px 8px rgba(0,0,0,.45); }
[data-skin="plank"] .slot:hover { border-color: var(--accent); }
[data-skin="plank"] .slot.full { box-shadow: inset 0 3px 8px rgba(0,0,0,.45), inset 0 -5px 0 var(--rc); }
[data-skin="plank"] .slot[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 3px 8px rgba(0,0,0,.45), 0 0 0 3px var(--accent); }
[data-skin="plank"] .slot .sl { color: var(--mute); }
[data-skin="plank"] .lv { background: var(--accent); color: var(--wood); border-radius: 4px; }
[data-skin="plank"] .rl { color: var(--mute); }
[data-skin="plank"] .bar { height: 14px; border: 2px solid #1a0f08; border-radius: 4px; background: var(--surface2); }
[data-skin="plank"] .bar.xp i { background: repeating-linear-gradient(90deg, #7bc043 0 10px, #5d9a2c 10px 13px); }
[data-skin="plank"] .bar.hp i { background: #e8322a; }
[data-skin="plank"] .stat { background: var(--surface2); border: 2px solid #1a0f08; border-radius: 6px; }
[data-skin="plank"] .stat .i { color: var(--accent); }
[data-skin="plank"] .stat dd { font-weight: 900; }
[data-skin="plank"] .filters button { border: 2px solid #1a0f08; border-radius: 4px; background: var(--surface2); color: var(--ink); }
[data-skin="plank"] .filters button:hover { border-color: var(--accent); }
[data-skin="plank"] .filters button[aria-pressed="true"] { background: var(--accent); color: var(--wood); }
[data-skin="plank"] .cell { background: radial-gradient(circle at 50% 40%, #6a3f1e, #3d2210 80%); border: 2px solid #1a0f08; border-radius: 6px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 55%, transparent); }
[data-skin="plank"] .cell:hover { transform: translateY(-2px) rotate(-1deg); }
[data-skin="plank"] .cell[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 3px var(--accent); }
[data-skin="plank"] .cell .cn { color: var(--ink); }
[data-skin="plank"] .cell .cnt { background: var(--accent); color: var(--wood); border-radius: 4px; }
[data-skin="plank"] .cell .upg { background: #7bc043; color: var(--wood); border-radius: 50%; border: 2px solid #1a0f08; }
[data-skin="plank"] .d-art { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 65%), var(--surface2); border: 3px solid #1a0f08; border-radius: 6px; }
[data-skin="plank"] .rar { padding: 2px 8px; background: var(--rc); color: var(--wood); border-radius: 3px; }
[data-skin="plank"] .d-st li span, [data-skin="plank"] .d-cmp, [data-skin="plank"] .d-role, [data-skin="plank"] .detail .muted, [data-skin="plank"] .note { color: var(--mute); }
[data-skin="plank"] .ghostnote { background: #26324a; border: 3px solid #1a0f08; border-radius: 6px; color: #d6e0ff; }
[data-skin="plank"] .ghostnote .gs { color: #a9b6dd; }
[data-skin="plank"] .pend { background: var(--accent); color: var(--wood); border: 2px solid #1a0f08; border-radius: 4px; }
[data-skin="plank"] .toast { background: var(--accent); color: var(--wood); border: 3px solid #1a0f08; border-radius: 6px; }
[data-skin="plank"] .toast.err { background: #e8322a; color: #fff; }
[data-skin="plank"] .mix { height: 16px; gap: 0; border: 2px solid #1a0f08; border-radius: 4px; overflow: hidden; }
[data-skin="plank"] .rf .rlv { background: var(--accent); color: var(--wood); border-radius: 3px; }
[data-skin="plank"] .rf .rn { color: var(--ink); }
[data-skin="plank"] .foot, [data-skin="plank"] .tab > .empty { color: #9cc29a; }
@media (max-width: 1099px) { [data-skin="plank"] .detail { border-radius: 10px 10px 0 0; } }

/* ТЕМА О2 — «ЯРОСТЬ»: злые обезьяны в гневе. Почти чёрный с красным, банановый акцент, срезанные углы, косой крик.
   Dela Gothic One + Golos Text. Раскладка B. */
html[data-skin="rage"] {
  --bg: #140b09; --surface: #22120e; --surface2: #190d0a; --ink: #fff0e4; --mute: #c7a597; --accent: #e8322a; --accent-2: #ffd84a; --focus: #ffd84a;
  --rc-common: #cbb8ac; --rc-uncommon: #6fdc7a; --rc-rare: #5ec8ff; --rc-epic: #c77dff; --rc-legendary: #ffcf4a; --up: #9be15d; --dn: #ff6a5a;
  --g-mage: #c77dff; --g-heal: #9be15d; --g-phys: #e8322a; --g-recruit: #8a6e62;
  --hd: 'Dela Gothic One', 'Arial Black', sans-serif; --tx: 'Golos Text', 'Segoe UI', sans-serif;
  --sil-b: 1.5; --cut: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
html[data-skin="rage"] body { background: repeating-linear-gradient(-55deg, rgba(232,50,42,.05) 0 26px, transparent 26px 52px), var(--bg); }
[data-skin="rage"] .top { background: #0d0706; border-bottom: 3px solid var(--accent); }
[data-skin="rage"] .brand b { font: 400 var(--t-xl)/1 var(--hd); text-transform: uppercase; transform: skew(-8deg); color: var(--accent-2); }
[data-skin="rage"] .brand .mark { width: 22px; height: 22px; background: var(--accent); clip-path: polygon(50% 0, 63% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 75%, 20% 100%, 30% 60%, 0 38%, 37% 35%); }
[data-skin="rage"] .tabs button { font: 400 var(--t-sm)/1 var(--hd); text-transform: uppercase; color: var(--mute); min-height: 44px; transition: color .2s var(--ease), background .2s var(--ease); }
[data-skin="rage"] .tabs button:hover { color: #fff; }
[data-skin="rage"] .tabs button[aria-current] { color: #fff; background: var(--accent); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
[data-skin="rage"] .btn { border-radius: 0; font-family: var(--hd); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding-inline: var(--s6); }
[data-skin="rage"] .btn.primary { background: var(--accent); color: #fff; }
[data-skin="rage"] .btn.primary:hover { background: #ff4a3a; transform: translateX(2px); }
[data-skin="rage"] .btn.primary:active { transform: translateX(-1px) scale(.98); }
[data-skin="rage"] .btn.ghost { background: #3a1d17; color: var(--ink); }
[data-skin="rage"] .btn.ghost:hover { background: #4d261e; }
[data-skin="rage"] .panel { background: var(--surface); clip-path: var(--cut); padding: var(--s5); box-shadow: inset 0 3px 0 var(--accent); }
[data-skin="rage"] .h1, [data-skin="rage"] .h2, [data-skin="rage"] .nm, [data-skin="rage"] .d-n, [data-skin="rage"] .grp .gn, [data-skin="rage"] .lg-big b, [data-skin="rage"] .gv b, [data-skin="rage"] .stat dd, [data-skin="rage"] .lg-t dd, [data-skin="rage"] .ghostnote .cd { font-family: var(--hd); font-weight: 400; }
[data-skin="rage"] .h2, [data-skin="rage"] .nm, [data-skin="rage"] .h1 { text-transform: uppercase; transform: skew(-6deg); }
[data-skin="rage"] .h2 { color: var(--accent-2); }
[data-skin="rage"] .nm { font-size: var(--t-3xl); color: #fff; text-shadow: 3px 3px 0 var(--accent); }
[data-skin="rage"] .h1 { color: var(--accent-2); }
[data-skin="rage"] .stage { background: radial-gradient(circle at 50% 55%, rgba(232,50,42,.45) 0, rgba(232,50,42,.12) 34%, transparent 55%), repeating-conic-gradient(from 0deg at 50% 55%, rgba(232,50,42,.12) 0 6deg, transparent 6deg 18deg), var(--surface); }
[data-skin="rage"] .slot { background: var(--surface2); border: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: inset 0 0 0 2px #3a1d17; }
[data-skin="rage"] .slot:hover { box-shadow: inset 0 0 0 2px var(--accent); }
[data-skin="rage"] .slot.full { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 70%, transparent), inset 0 -5px 0 var(--rc); }
[data-skin="rage"] .slot[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--accent-2); }
[data-skin="rage"] .slot .sl { font-family: var(--hd); font-weight: 400; }
[data-skin="rage"] .lv { background: var(--accent-2); color: #140b09; font-family: var(--hd); font-weight: 400; transform: skew(-8deg); }
[data-skin="rage"] .bar { height: 10px; background: #0d0706; transform: skew(-20deg); }
[data-skin="rage"] .bar.xp i { background: var(--accent-2); }
[data-skin="rage"] .bar.hp i { background: var(--accent); }
[data-skin="rage"] .stat { background: var(--surface2); box-shadow: inset 3px 0 0 var(--accent); }
[data-skin="rage"] .stat .i { color: var(--accent-2); }
[data-skin="rage"] .filters button { border: 0; background: var(--surface2); color: var(--mute); font-family: var(--hd); font-weight: 400; text-transform: uppercase; font-size: 12px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding-inline: var(--s4); }
[data-skin="rage"] .filters button:hover { color: #fff; }
[data-skin="rage"] .filters button[aria-pressed="true"] { background: var(--accent); color: #fff; }
[data-skin="rage"] .grid { gap: var(--s2); }
[data-skin="rage"] .cell { border: 0; background: var(--surface2); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); box-shadow: inset 0 -4px 0 var(--rc); }
[data-skin="rage"] .cell:hover { background: #2a1510; }
[data-skin="rage"] .cell[aria-pressed="true"] { background: #3a1812; box-shadow: inset 0 -4px 0 var(--rc), inset 0 0 0 2px var(--accent-2); }
[data-skin="rage"] .cell .cn { color: var(--rc); }
[data-skin="rage"] .cell .cnt { color: var(--accent-2); font-family: var(--hd); font-weight: 400; }
[data-skin="rage"] .cell .upg { background: var(--up); color: #140b09; top: 4px; right: 18px; }
[data-skin="rage"] .d-art { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 62%), var(--surface2); clip-path: var(--cut); }
[data-skin="rage"] .rar { font-family: var(--hd); font-weight: 400; text-transform: uppercase; font-size: 12px; }
[data-skin="rage"] .d-n { color: var(--rc); text-transform: uppercase; }
[data-skin="rage"] .d-st li .i { color: var(--accent-2); }
[data-skin="rage"] .ghostnote { background: #1a1d2c; color: #d9deff; box-shadow: inset 0 3px 0 #6a7ad6; }
[data-skin="rage"] .ghostnote .gs { color: #a3acd6; }
[data-skin="rage"] .pend { background: #2a2208; color: #ffe9a8; box-shadow: inset 3px 0 0 var(--accent-2); }
[data-skin="rage"] .toast { background: var(--accent); color: #fff; font-family: var(--hd); font-weight: 400; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
[data-skin="rage"] .toast.err { background: #fff; color: var(--accent); }
[data-skin="rage"] .lg-big b { color: var(--accent); text-shadow: 3px 3px 0 var(--accent-2); }
[data-skin="rage"] .mix { height: 14px; gap: 3px; transform: skew(-20deg); }
[data-skin="rage"] .rf .rlv { color: var(--accent-2); font-family: var(--hd); font-weight: 400; }
@media (max-width: 1099px) { [data-skin="rage"] .detail { clip-path: none; box-shadow: inset 0 4px 0 var(--accent); } }

/* ТЕМА О3 — «КОМИКС»: обезьяний комикс. Банановый фон с растром, белые кадры с толстой обводкой, крик в облачке.
   Rubik Bubbles (заголовки) + Nunito. Раскладка C. */
html[data-skin="comic"] {
  --bg: #ffd84a; --surface: #fffdf6; --surface2: #fff3c4; --ink: #1a120c; --mute: #5a4a3a; --accent: #e8322a; --accent-2: #ff7a1a; --focus: #1f6fe0;
  --rc-common: #6b5d50; --rc-uncommon: #24883a; --rc-rare: #1f6fe0; --rc-epic: #8a2fe0; --rc-legendary: #d77a00; --up: #1d8a3a; --dn: #e8322a;
  --g-mage: #8a2fe0; --g-heal: #1d9a4a; --g-phys: #e8322a; --g-recruit: #a89480;
  --hd: 'Rubik Bubbles', 'Rubik', 'Arial Black', sans-serif; --tx: 'Nunito', 'Segoe UI', sans-serif;
  --sil-b: .25; --sky: #8fd3ff;
}
html[data-skin="comic"] body { background: radial-gradient(circle, rgba(232,120,0,.28) 1.6px, transparent 2px) 0 0 / 12px 12px, var(--bg); }
[data-skin="comic"] .top { background: var(--ink); color: #fff; }
[data-skin="comic"] .brand b { font: 400 var(--t-2xl)/1 var(--hd); color: var(--bg); }
[data-skin="comic"] .brand .mark { width: 28px; height: 22px; background: #fff; border-radius: 50%; position: relative; }
[data-skin="comic"] .brand .mark::after { content: ''; position: absolute; left: 4px; bottom: -6px; border: 6px solid transparent; border-top-color: #fff; border-left-width: 2px; }
[data-skin="comic"] .tabs button { font: 900 var(--t-sm)/1 var(--tx); text-transform: uppercase; color: #d8cfc0; min-height: 40px; border-radius: 6px; }
[data-skin="comic"] .tabs button:hover { color: #fff; }
[data-skin="comic"] .tabs button[aria-current] { background: var(--bg); color: var(--ink); }
[data-skin="comic"] .btn { border-radius: 10px; border: 3px solid var(--ink); font-family: var(--hd); font-weight: 400; font-size: var(--t-lg); box-shadow: 4px 4px 0 var(--ink); }
[data-skin="comic"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
[data-skin="comic"] .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
[data-skin="comic"] .btn.primary { background: var(--accent); color: #fff; }
[data-skin="comic"] .btn.ghost { background: #fff; color: var(--ink); }
[data-skin="comic"] .top .btn { border-color: #fff; box-shadow: none; font-size: var(--t-md); }
[data-skin="comic"] .top .btn.ghost { background: transparent; color: #fff; }
[data-skin="comic"] .panel { background: var(--surface); border: 4px solid var(--ink); border-radius: 6px; box-shadow: 7px 7px 0 var(--ink); padding: var(--s5); }
[data-skin="comic"] .stage { background: radial-gradient(circle, rgba(31,111,224,.18) 1.5px, transparent 2px) 0 0 / 10px 10px, var(--sky); transform: rotate(-.5deg); }
[data-skin="comic"] .vitals { transform: rotate(.6deg); }
[data-skin="comic"] .h1, [data-skin="comic"] .h2, [data-skin="comic"] .nm, [data-skin="comic"] .grp .gn, [data-skin="comic"] .lg-big b, [data-skin="comic"] .gv b { font-family: var(--hd); font-weight: 400; }
[data-skin="comic"] .h2 { font-size: var(--t-2xl); color: var(--accent-2); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
[data-skin="comic"] .nm { font-size: var(--t-4xl); color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
[data-skin="comic"] .d-n { font-weight: 900; }
[data-skin="comic"] .slot { background: #fff; border: 3px solid var(--ink); border-radius: 8px; }
[data-skin="comic"] .slot:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
[data-skin="comic"] .slot.full { box-shadow: inset 0 -6px 0 var(--rc); }
[data-skin="comic"] .slot[aria-pressed="true"] { background: var(--bg); }
[data-skin="comic"] .slot:not(.full) { border-style: dashed; background: rgba(255,255,255,.7); }
[data-skin="comic"] .slot .sl { color: var(--ink); }
[data-skin="comic"] .lv { background: var(--accent); color: #fff; border: 2px solid var(--ink); border-radius: 6px; font-weight: 900; }
[data-skin="comic"] .rl { color: var(--ink); font-weight: 900; }
[data-skin="comic"] .bar { height: 16px; border: 3px solid var(--ink); border-radius: 6px; background: #fff; }
[data-skin="comic"] .bar.xp i { background: repeating-linear-gradient(-45deg, var(--accent-2) 0 6px, #ff9a4a 6px 12px); }
[data-skin="comic"] .bar.hp i { background: var(--accent); }
[data-skin="comic"] .stat { background: #fff; border: 3px solid var(--ink); border-radius: 8px; }
[data-skin="comic"] .stat dd { font-weight: 900; }
[data-skin="comic"] .stat .i { color: var(--accent); }
[data-skin="comic"] .meter .mk span { color: var(--ink); font-weight: 800; }
[data-skin="comic"] .filters button { border: 3px solid var(--ink); border-radius: 8px; background: #fff; font-weight: 900; }
[data-skin="comic"] .filters button:hover { background: var(--surface2); }
[data-skin="comic"] .filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
[data-skin="comic"] .cell { background: #fff; border: 3px solid var(--ink); border-radius: 8px; box-shadow: 3px 3px 0 var(--ink); }
[data-skin="comic"] .cell::before { content: ''; position: absolute; left: 0; top: 0; border: 12px solid transparent; border-left-color: var(--rc); border-top-color: var(--rc); border-top-left-radius: 4px; }
[data-skin="comic"] .cell:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
[data-skin="comic"] .cell[aria-pressed="true"] { background: var(--bg); }
[data-skin="comic"] .cell .cn { font-weight: 800; }
[data-skin="comic"] .cell .cnt { background: var(--accent); color: #fff; border: 2px solid var(--ink); border-radius: 6px; }
[data-skin="comic"] .cell .upg { background: #3ad06a; color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; }
[data-skin="comic"] .d-art { background: radial-gradient(circle, rgba(232,120,0,.25) 1.5px, transparent 2px) 0 0 / 10px 10px, var(--surface2); border: 3px solid var(--ink); border-radius: 8px; }
[data-skin="comic"] .rar { padding: 2px 10px; background: var(--rc); color: #fff; border: 2px solid var(--ink); border-radius: 6px; font-weight: 900; }
[data-skin="comic"] .d-role { position: relative; padding: var(--s3) var(--s4); background: #fff; border: 3px solid var(--ink); border-radius: 18px; color: var(--ink); margin-top: var(--s4); }
[data-skin="comic"] .d-role::after { content: ''; position: absolute; left: 22px; bottom: -14px; border: 7px solid transparent; border-top: 11px solid var(--ink); }
[data-skin="comic"] .ghostnote { background: #e6ecff; border: 3px solid var(--ink); border-radius: 8px; }
[data-skin="comic"] .ghostnote .cd { font-family: var(--hd); font-weight: 400; }
[data-skin="comic"] .pend { background: var(--bg); border: 3px solid var(--ink); border-radius: 8px; }
[data-skin="comic"] .toast { background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); font-weight: 900; }
[data-skin="comic"] .toast.err { background: var(--accent); color: #fff; }
[data-skin="comic"] .lg-head { background: var(--sky); }
[data-skin="comic"] .lg-big b { color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
[data-skin="comic"] .mix { height: 20px; gap: 0; border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; }
[data-skin="comic"] .mix i + i { border-left: 3px solid var(--ink); }
[data-skin="comic"] .grp { box-shadow: 7px 7px 0 var(--ink), inset 0 8px 0 var(--gc); padding-top: var(--s6); }
[data-skin="comic"] .grp .sw { border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); }
[data-skin="comic"] .rf .rlv { background: var(--accent); color: #fff; border-radius: 4px; }
[data-skin="comic"] .foot, [data-skin="comic"] .tab > .empty { color: #5a4a20; }
@media (max-width: 1099px) { [data-skin="comic"] .detail { border-width: 4px 0 0; border-radius: 12px 12px 0 0; box-shadow: 0 -6px 0 var(--ink); } }

/* --- «Лежанка»: кошачьи детали --- */
html[data-skin="den"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffcf6a' fill-opacity='.05'%3E%3Cg transform='translate(28 34) rotate(-18)'%3E%3Cellipse cx='0' cy='6' rx='8' ry='6.5'/%3E%3Ccircle cx='-8' cy='-4' r='3.2'/%3E%3Ccircle cx='-2.6' cy='-8.5' r='3.2'/%3E%3Ccircle cx='3.4' cy='-8.5' r='3.2'/%3E%3Ccircle cx='8.6' cy='-4' r='3.2'/%3E%3C/g%3E%3Cg transform='translate(86 88) rotate(14)'%3E%3Cellipse cx='0' cy='6' rx='8' ry='6.5'/%3E%3Ccircle cx='-8' cy='-4' r='3.2'/%3E%3Ccircle cx='-2.6' cy='-8.5' r='3.2'/%3E%3Ccircle cx='3.4' cy='-8.5' r='3.2'/%3E%3Ccircle cx='8.6' cy='-4' r='3.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 120px, radial-gradient(ellipse 60% 40% at 50% -6%, rgba(255,207,106,.22), transparent 70%), var(--bg); }
/* лапка вместо точки в шапке */
[data-skin="den"] .brand .mark { width: 24px; height: 22px; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 6px rgba(255,207,106,.7));
  background: radial-gradient(ellipse 34% 28% at 50% 72%, var(--accent-2) 98%, transparent), radial-gradient(circle at 14% 34%, var(--accent-2) 13%, transparent 14.5%), radial-gradient(circle at 37% 13%, var(--accent-2) 13%, transparent 14.5%), radial-gradient(circle at 63% 13%, var(--accent-2) 13%, transparent 14.5%), radial-gradient(circle at 86% 34%, var(--accent-2) 13%, transparent 14.5%); }
/* кошачьи ушки на каждой панели */
[data-skin="den"] .panel { position: relative; margin-top: 14px; }
[data-skin="den"] .panel::before, [data-skin="den"] .panel::after { content: ''; position: absolute; top: -17px; width: 40px; height: 30px; pointer-events: none;
  background: radial-gradient(ellipse 36% 46% at 50% 82%, rgba(255,143,163,.75) 0 60%, transparent 62%), var(--surface); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
[data-skin="den"] .panel::before { left: 28px; transform: rotate(-14deg); }
[data-skin="den"] .panel::after { right: 28px; transform: rotate(14deg); }
[data-skin="den"] .stats .stat, [data-skin="den"] .grp::before { position: relative; }
/* лампа над сценой и лежанка под котиком */
[data-skin="den"] .stage { position: relative; background: radial-gradient(ellipse 36% 30% at 16% 22%, rgba(255,207,106,.3), transparent 75%), var(--surface); }
[data-skin="den"] .stage .doll::before { content: ''; position: absolute; left: 13%; top: -26px; width: 2px; height: 46px; background: #4a3a50; }
[data-skin="den"] .stage .doll::after { content: ''; position: absolute; left: calc(13% - 24px); top: 18px; width: 50px; height: 26px; background: linear-gradient(#ffd98a, #e8a83a); clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%); filter: drop-shadow(0 8px 14px rgba(255,207,106,.75)); }
[data-skin="den"] .doll .fig::before { content: ''; position: absolute; z-index: -1; left: 2%; right: 2%; bottom: -10px; height: 26%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #7a3f58, #4a2438 70%); box-shadow: inset 0 0 0 5px #8f4d6a, inset 0 0 0 7px rgba(255,255,255,.18), 0 10px 18px rgba(0,0,0,.4); }
[data-skin="den"] .doll .fig::after { content: ''; position: absolute; z-index: -1; left: 14%; right: 14%; bottom: 4px; height: 12%; border-radius: 50%; border: 2px dashed rgba(255,190,210,.35); }
/* слоты — кошачьи миски */
[data-skin="den"] .slot { position: relative; overflow: visible; }
/* 23.10 (баг с телефона): подставка — без градиента. Вертикальный linear-gradient с color-mix на маленьком эллипсе
   телефоны на Android (DPR 2,6–3, растр на видеокарте) рисовали полосами — «строчки» поперёк подставок ШЛЕМ/ДОСПЕХ/АМУЛЕТ.
   Теперь — ровная заливка, свет сверху и тень снизу — внутренние тени без размытия (их растр ровный при любом DPR) */
[data-skin="den"] .slot::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 9%; height: 20%; border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%;
  background: #3b2d44; box-shadow: inset 0 2px 0 rgba(255,255,255,.14), inset 0 -5px 0 rgba(20,14,26,.45); z-index: 0; }
[data-skin="den"] .slot.full::after { background: color-mix(in srgb, var(--rc) 40%, #3b2d44); }
[data-skin="den"] .slot .art, [data-skin="den"] .slot .sl { position: relative; z-index: 1; }
/* опыт — клубок ниток катится по полоске */
[data-skin="den"] .bar { overflow: visible; }
[data-skin="den"] .bar.xp i { position: relative; }
[data-skin="den"] .bar.xp i::after { content: ''; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%) rotate(20deg); border-radius: 50%;
  background: repeating-linear-gradient(60deg, #ffcf6a 0 3px, #e8a83a 3px 5px); box-shadow: 0 0 0 2px #1d1620; }
/* здоровье — розовая подушечка лапки на конце */
[data-skin="den"] .bar.hp i { position: relative; }
[data-skin="den"] .bar.hp i::after { content: ''; position: absolute; right: -7px; top: 50%; width: 16px; height: 14px; transform: translateY(-50%); border-radius: 50% 50% 45% 45%; background: #ff8fa3; box-shadow: 0 0 0 2px #1d1620; }
/* выбранная вещь — со следом лапки */
[data-skin="den"] .cell[aria-pressed="true"]::after { content: ''; position: absolute; left: 8px; top: 8px; width: 18px; height: 17px; opacity: .9;
  background: radial-gradient(ellipse 34% 28% at 50% 72%, var(--accent-2) 98%, transparent), radial-gradient(circle at 14% 34%, var(--accent-2) 13%, transparent 14.5%), radial-gradient(circle at 37% 13%, var(--accent-2) 13%, transparent 14.5%), radial-gradient(circle at 63% 13%, var(--accent-2) 13%, transparent 14.5%), radial-gradient(circle at 86% 34%, var(--accent-2) 13%, transparent 14.5%); }
[data-skin="den"] .lg-head, [data-skin="den"] .groups .grp, [data-skin="den"] .ranks { margin-top: 14px; }
@media (max-width: 1099px) { [data-skin="den"] .detail { margin-top: 0; } [data-skin="den"] .detail::before, [data-skin="den"] .detail::after { top: -16px; } }
@media (prefers-reduced-motion: no-preference) { [data-skin="den"] .cell:hover .art { animation: den-sniff .6s var(--ease); } }
@keyframes den-sniff { 30% { transform: rotate(-6deg) scale(1.05); } 60% { transform: rotate(5deg) scale(1.05); } }
[data-skin="den"] .slot .sl { position: absolute; left: 0; right: 0; bottom: 12%; z-index: 2; color: var(--ink); opacity: .85; font-size: 10px; }
[data-skin="den"] .slot .art { margin-bottom: 18%; }

/* ================= перетаскивание вещей ================= */
[data-drag] { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.is-dragging, html.is-dragging * { cursor: grabbing !important; }
[data-drag]:not(:disabled) { cursor: grab; }
.dragging { opacity: .35; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 80; width: 72px; height: 72px; pointer-events: none; padding: 8px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc, #fff) 35%, transparent), transparent 70%); filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.drag-ghost .art { width: 100%; height: 100%; transform: scale(1.12) rotate(-6deg); }
.slot.drop-ok { outline: 3px dashed var(--accent); outline-offset: 3px; }
.slot.drop-no { opacity: .35; filter: grayscale(.6); }
.slot.drop-hover { outline-style: solid; transform: scale(1.07); }
.bag.drop-ok { outline: 3px dashed var(--accent); outline-offset: -8px; }
/* 24.10: свой порядок сумки — ячейка под вещью подсвечена (вещь встанет на её место) */
.grid.ord-on .cell.drop-hover { outline: 3px solid var(--accent); outline-offset: 2px; }
.bag-h .bag-sort { margin-left: auto; }
.bag.drop-hover { outline-style: solid; background-image: linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); }
.dnd-hint { font-size: var(--t-xs); }
.bag-h .dnd-hint { order: 3; flex-basis: 100%; }
@media (prefers-reduced-motion: reduce) { .slot.drop-hover { transform: none; } }

/* ================= подсказка при наведении ================= */
.tip { position: fixed; left: 0; top: 0; z-index: 75; width: 250px; padding: var(--s3) var(--s4); pointer-events: none;
  background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--rc, var(--ink)) 60%, transparent); border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,.4); font-size: var(--t-sm); animation: tip-in .15s var(--ease); }
@keyframes tip-in { from { opacity: 0; } }
.tip .t-h { display: flex; align-items: baseline; gap: var(--s2); }
.tip .t-n { font-weight: 800; font-size: var(--t-md); line-height: 1.2; color: var(--rc); }
.tip .t-s { display: flex; flex-wrap: wrap; gap: 4px var(--s2); margin-top: 4px; font-size: var(--t-xs); }
.tip .t-s .on { display: inline-flex; align-items: center; gap: 3px; color: var(--up); font-weight: 800; }
.tip .t-st { list-style: none; margin: var(--s2) 0 0; padding: var(--s2) 0 0; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); display: grid; gap: 4px; }
.tip .t-st li { display: grid; grid-template-columns: auto 1fr auto 2.6em; align-items: center; gap: var(--s2); }
.tip .t-st span { color: var(--mute); }
.tip .t-st b { font-variant-numeric: tabular-nums; }
.tip .t-st em { font-style: normal; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.tip .t-st em.up { color: var(--up); } .tip .t-st em.dn { color: var(--dn); } .tip .t-st em.eq { color: var(--mute); }
.tip .t-eff { margin-top: var(--s2); font-weight: 600; }
.tip .t-cmp { margin-top: var(--s2); font-size: var(--t-xs); color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .tip { animation: none; } }
.tip.over { z-index: 260; }   /* 22.10: подсказка в зале «Города» (окно зала — z-index 200) */
/* 23.10: подсказка-карточка вещи (наковальня, Склад, лавки «Города»: cardTip): тело — общая itemBody (o.tip), ужато под подсказку */
.tip.card { max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.tip.card.scroll { pointer-events: auto; }
/* 24.10 (баг тестера): карточка вещи всегда непрозрачная, с тенью и поверх окон (Кузня, залы «Города», окно персонажа) */
.tip { background-color: var(--surface, #1c1813); }
.tip.card { z-index: 270; opacity: 1; box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .25); }   /* 24.10: длинная карточка на телефоне — листается пальцем */
/* 23.10 (просьба стримера): подсказка вещи — компактнее, главное — характеристики. Имя и строка «редкость · тип»; характеристики — вместе,
   крупно, на своей подложке (сравнение с надетым — прежние цвета); эффект, аура и заточка — сразу за ними; остальное (.d-q: описание,
   сравнение с надетым, класс, прочность, история) — мелко и приглушённо, описание — не длиннее двух строк. Одна подложка вместо черт */
.tip { padding: 10px 12px; }
.tip .t-s { margin-top: 2px; }
.tip .t-st, .tip.card .d-st { list-style: none; margin: 8px 0 0; padding: 6px 8px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--ink) 8%, transparent); display: grid; gap: 3px; }
.tip .t-st li, .tip.card .d-st li { display: grid; grid-template-columns: auto 1fr auto 2.6em; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: var(--t-sm); line-height: 1.3; }
.tip .t-st li span, .tip.card .d-st li span { color: color-mix(in srgb, var(--ink) 82%, transparent); }
.tip .t-st li b, .tip.card .d-st li b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tip .t-eff, .tip.card .d-eff, .tip.card .d-en { margin-top: 6px; font-size: var(--t-xs); font-weight: 700; }
.tip .t-au, .tip.card .d-au { margin-top: 6px; padding: 5px 8px; font-size: var(--t-xs); }
.tip .d-q { margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--mute); }
.tip .d-q:empty { display: none; }
.tip .d-q :is(p, .lg-lorebox, .lg-desc, .lg-lore, .lg-hist) { margin: 3px 0 0; padding: 0; border: 0; background: none; font-size: 12px; line-height: 1.35; font-weight: 400; color: var(--mute); max-width: none; }
.tip .d-q > :first-child, .tip .d-q .lg-lorebox > :first-child { margin-top: 0; }
.tip .d-q :is(.lg-desc, .d-desc, .t-desc) { font-style: italic; opacity: .85; }   /* 24.10 (баг тестера): описание целиком, без «…» */
.tip .d-q b { color: inherit; font-weight: 700; }
/* 24.10 (баг тестера): шапка карточки вещи «[Обычное] Щит» - плашка редкости и место на одной линии, одного размера;
   строки характеристик - значок по центру, числа по правому краю (лавки, сумка, аукцион, Кузня) */
.tip .t-s, .d-h, .au-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tip .t-s > *, .d-h > *, .au-ch > * { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 22px; margin: 0; line-height: 1.2; font-size: 12px; vertical-align: middle; transform: none; }
.tip .t-s > :not(.rar), .d-h > :not(.rar), .au-ch > :not(.rar) { padding: 2px 0; border: 2px solid transparent; border-left: 0; border-right: 0; }
.tip .t-s .rar, .d-h .rar, .au-ch .rar { padding-top: 2px; padding-bottom: 2px; }
.tip .t-st li, .tip.card .d-st li { grid-template-columns: 1.25em minmax(0, 1fr) auto 2.6em; }
.tip .t-st li > .i, .tip.card .d-st li > .i { justify-self: center; align-self: center; vertical-align: middle; }
.tip .t-st li b, .tip.card .d-st li b, .d-st li b { min-width: 3ch; text-align: right; }
.tip .d-q :is(.d-gear.bad, .d-dur.br, .t-dur.br) { color: var(--dn); }
.tip .d-q .lg-hist > summary { font-size: 12px; font-weight: 600; }
/* под стиль каждого варианта */
[data-skin="forge"] .tip { background: linear-gradient(180deg, #221c15, #17130f); border-radius: 4px; outline: 1px solid rgba(202,165,92,.18); outline-offset: -5px; }
[data-skin="forge"] .tip .t-n { font-family: var(--hd); font-weight: 400; font-size: var(--t-lg); }
[data-skin="forge"] .tip .t-st .i { color: var(--accent); }
[data-skin="den"] .tip { background: #33263a; border: 0; border-radius: 18px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 55%, transparent), 0 16px 34px rgba(0,0,0,.45); }
[data-skin="den"] .tip .t-n { font-family: var(--hd); font-weight: 700; }
[data-skin="den"] .tip .t-st .i { color: var(--accent-2); }
[data-skin="rage"] .tip { border: 0; border-radius: 0; background: #2a1510; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); box-shadow: inset 0 3px 0 var(--rc); }
[data-skin="rage"] .tip .t-n { font-family: var(--hd); font-weight: 400; text-transform: uppercase; }
[data-skin="rage"] .tip .t-st .i { color: var(--accent-2); }

/* ================= ВРЕМЕННО: переключатель стиля сайта ================= */
.style-switch { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 14px; background: rgba(16,14,20,.92); color: #f2eee6;
  box-shadow: 0 10px 28px rgba(0,0,0,.45); font: 600 13px/1 'Golos Text', system-ui, sans-serif; }
.style-switch .ss-l { padding: 0 6px; opacity: .65; }
.style-switch button { min-height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: inherit; font: inherit; transition: background .2s, color .2s; }
.style-switch button:hover { background: rgba(255,255,255,.1); }
.style-switch button[aria-pressed="true"] { background: #f2eee6; color: #121018; border-color: #f2eee6; }
html.is-dragging .style-switch { display: none; }
@media (max-width: 520px) { .style-switch { left: 50%; right: auto; transform: translateX(-50%); } .style-switch .ss-l { display: none; } body { padding-bottom: 64px; } }

/* узкие телефоны: шапка без переноса и без прокрутки вбок */
.top > * { min-width: 0; }
.tabs { flex-shrink: 1; }
@media (max-width: 400px) {
  .top { gap: var(--s1); }
  .tabs button { padding: var(--s2) 10px; letter-spacing: .02em !important; }
  .top .btn.twitch.sm span { display: none; }
  .top .btn.twitch.sm { padding-inline: 10px; }
}
@media (max-width: 520px) { html[data-skin] .top .tabs button { font-size: 13px; padding-inline: 9px; letter-spacing: .02em; } }
@media (max-width: 340px) { .brand { display: none; } html[data-skin] .top .tabs button { padding-inline: 7px; } }
@media (max-width: 400px) {
  html[data-skin] .top .btn.sm { padding-inline: 12px; font-size: 13px; }
}

/* ---------- легендарки (16.10): золотое сияние ячейки, лучи и эмблема ауры на рисунке, строка ауры ---------- */
.d-art { position: relative; }
.lgx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; overflow: hidden;
  box-shadow: 0 0 0 2px #ffcf5a, 0 0 12px 1px rgba(255, 196, 70, .55), inset 0 0 16px rgba(255, 196, 70, .3); }
/* 18.10: сияние легендарки — неподвижное в ячейках; «дышит» и бликует только в карточке вещи, и только прозрачностью
   и сдвигом (их рисует видеокарта, без перерисовки страницы). Раньше пульсировала тень и ехал фон в каждой ячейке —
   браузер перерисовывал их каждый кадр. Вечером: пульс — шагами (≈5 кадров в секунду), блик пробегает раз в 9 с —
   в остальное время кадры не рисуются (без видеокарты карточка брала ~7% процессора, теперь ~2%) */
.d-art > .lgx::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 22px 5px rgba(255, 196, 70, .6), inset 0 0 26px rgba(255, 196, 70, .4); opacity: 0; animation: lgx-glow 3.2s steps(8) infinite; will-change: opacity; }
.d-art > .lgx::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(105deg, transparent, rgba(255, 244, 200, .2), transparent); transform: translateX(-120%); animation: lgx-sweep 9s linear infinite; will-change: transform; }
@keyframes lgx-glow { 50% { opacity: 1; } }
@keyframes lgx-sweep { 15%, 100% { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) { .d-art > .lgx::before, .d-art > .lgx::after { animation: none; } }
/* 18.10 (вечер): человечек живой, но дешёвый — только transform (дыхание всего рисунка двигает видеокарта, без перерисовки SVG);
   моргание и взмах оружием — короткие классы от таймера в app.js. Без filter/blur/тени в анимациях и без SMIL.
   Пауза: человечек вне экрана (.zz), вкладка скрыта (.zz-all), «меньше движения» в системе.
   Дыхание — шагами (≈3 кадра в секунду, шаг меньше пикселя — глазу плавно): без видеокарты каждый кадр стоит процессора,
   плавные 60 кадров давали ~10% CPU, шаги — ~3%. Моргание — два кадра (закрыл/открыл), взмах — ~10 кадров в секунду */
@media (prefers-reduced-motion: no-preference) {
  .alive > :is(.jl-doodle, .jd-aura-w) { transform-origin: 50% 95%; animation: jd-breathe 4.4s steps(6) infinite; will-change: transform; }
  .alive.zz > :is(.jl-doodle, .jd-aura-w), .zz-all .alive > :is(.jl-doodle, .jd-aura-w) { animation-play-state: paused; }
  .crowd .cf:nth-child(2n) > .jl-doodle { animation-delay: -1.3s; } .crowd .cf:nth-child(3n) > .jl-doodle { animation-delay: -2.5s; }
  .alive .jl-doodle.blink .jd-eyes { transform-box: fill-box; transform-origin: center; animation: jd-blink .16s steps(1) both; }
  .alive .jl-doodle.sway .jd-weapon { animation: jd-sway 1.6s steps(5); }
  .alive > .jd-ghost { animation-name: jd-float; animation-duration: 3.4s; }
  /* свой герой с аурой: аура плавная — и дыхание плавное (кадры композиции всё равно идут, шаги только дёргали бы) */
  .alive > .jd-aura-w.au-own { animation-timing-function: ease-in-out; }
  /* у зрителя без видеокарты (app.js auraSoft) — шагами по общим часам ауры: 0,125 с (18 шагов на половину вдоха) */
  .alive > .jd-aura-w.au-soft { animation-duration: 4.5s; animation-timing-function: steps(18, end); }
}
/* 23.10 (баг с телефона): кукла «Персонажа» на телефоне — без «дыхания». Дыхание растягивает рисунок по вертикали (scale 1,018)
   отдельным слоем видеокарты (will-change: transform): на Android с DPR 2,6–3 растр слоя растягивался с плиточными швами —
   тонкие пунктирные полоски поперёк головы (там, где у шапки поля). Без слоя рисунок рисуется прямо в страницу — ровно;
   моргание остаётся. И телефону легче (правило «не грузить ПК зрителей») */
@media (pointer: coarse), (min-resolution: 1.5dppx) {
  .doll .fig.alive > :is(.jl-doodle, .jd-aura-w) { animation: none; will-change: auto; transform: none; }
}
/* 19.10: аура своего героя — запечёнными картинками вокруг рисунка (app.js auraLive): свечение позади, искры и нимб впереди.
   Рисунок — position: relative, чтобы слои легли по порядку: свечение под ним, искры над ним */
.jd-aura-w { position: relative; }
.jd-aura-w > .jl-doodle { position: relative; }
.jd-aura-l { position: absolute; inset: 0; pointer-events: none; }
/* запечённые картинки ауры (app.js auraBuild): имя, длительность и задержка анимации — у самой картинки, здесь — линейно,
   по кругу и на паузе; идут только у видимого (.au-on, не .zz, вкладка не скрыта). Только transform/opacity — без перерисовки */
.jd-aura-l > .jd-al { position: absolute; display: block; max-width: none; will-change: transform, opacity; animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: paused; }
.au-on:not(.zz) .jd-aura-l > .jd-al { animation-play-state: running; }
.zz-all .au-on .jd-aura-l > .jd-al { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .jd-aura-l > .jd-al { animation-play-state: paused !important; } }
@keyframes jd-breathe { 50% { transform: scale(.994, 1.018); } }
@keyframes jd-float { 50% { transform: translateY(-2.5%); } }
@keyframes jd-blink { 50% { transform: scaleY(.1); } }
@keyframes jd-sway { 30% { transform: rotate(-7deg); } 65% { transform: rotate(4deg); } }
.cell > .art, .slot > .art, .d-art > .art, .cell > .cn, .slot > .sl, .slot > .sn { position: relative; z-index: 1; }
.d-art > .lgx { border-radius: 24px; }
.art.lgd { overflow: visible; }
.t-au, .d-au { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--rc-legendary) 60%, transparent); background: color-mix(in srgb, var(--rc-legendary) 14%, transparent); color: var(--rc-legendary); font-weight: 600; line-height: 1.35; }
.t-au b, .d-au b { font-weight: 800; }
.t-au span, .d-au span { display: block; margin-top: 2px; font-size: .82em; font-weight: 500; opacity: .8; }
[data-skin="sticker"] .cell[data-r="legendary"]::before, [data-skin="den"] .cell[data-r="legendary"]::before { z-index: 1; }

/* ---------- номера в сумке и откат еды/зелий (16.10) ---------- */
.cell .no { position: absolute; left: 6px; top: 5px; z-index: 2; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; line-height: 1; color: var(--ink, currentColor); background: color-mix(in srgb, currentColor 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
[data-skin="sticker"] .cell .no { left: 26px; }
.cell.oncd > .art { filter: grayscale(.7); opacity: .6; }
.note.use { display: block; line-height: 1.5; color: var(--ink); }
.note.use .muted { font-size: .92em; }
.cell .eatcd { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 2; padding: 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(0, 0, 0, .72); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.cell .eatcd::before { content: '⏳ '; }
.note .cmd { font-family: var(--mono, ui-monospace, monospace); padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, currentColor 12%, transparent); white-space: nowrap; }
.eatcd-t { display: inline-block; margin-top: 6px; font-weight: 700; }
.eatcd-t b { font-variant-numeric: tabular-nums; }

/* ================= 17.10: журнал действий ================= */
.jr { display: grid; gap: var(--s3); }
.jr .filters { margin-bottom: 0; }
.jr .filters small { margin-left: 4px; font-size: .8em; opacity: .7; font-variant-numeric: tabular-nums; }
.jr-sum { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); color: var(--mute); font-size: var(--t-sm); }
.jr-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.jr-sum b.up, .jr-c.up { color: var(--up); } .jr-sum b.dn, .jr-c.dn { color: var(--dn); }
.jr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.jr-day { padding: var(--s3) 0 var(--s1); font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.jr-e { display: grid; grid-template-columns: 48px 92px minmax(0, 1fr) auto; align-items: baseline; gap: var(--s1) var(--s3); padding: var(--s2) 0; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.jr-day + .jr-e { border-top: 0; }
.jr-e time { font-size: var(--t-sm); color: var(--mute); font-variant-numeric: tabular-nums; }
.jr-k { font-size: var(--t-xs); font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.jr-t { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.jr-m { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: var(--s1) var(--s3); font-size: var(--t-sm); white-space: nowrap; }
.jr-r { font-weight: 800; padding: 1px 8px; border-radius: 999px; border: 2px solid currentColor; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; }
.jr-r.win { color: var(--up); } .jr-r.lose { color: var(--dn); } .jr-r.tie { color: var(--mute); }
.jr-c { font-weight: 700; } .jr-c .m, .jr-c .m b { color: inherit; }
.jr-x { color: var(--mute); font-weight: 700; }
.jr .foot { margin: 0; }
/* 23.10: журнал — внутри «Персонажа»: вид на всю ширину и короткий список последних записей под характеристиками */
.jr-wrap > .views { justify-content: center; margin: 0 0 var(--s4); }
.jr-mini { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); min-width: 0; }
.jr-mh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.jr-mh .h3 { margin: 0; font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.jr-more { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-sm); font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; cursor: pointer; }
.jr-more:hover { color: var(--accent); }
.jr-mini > .muted { margin: 0; font-size: var(--t-sm); }
.jr-ml { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.jr-ml li { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: 2px var(--s2); align-items: baseline; font-size: var(--t-sm); }
.jr-ml time { grid-column: 1; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--t-xs); }
.jr-ml .jr-t { grid-column: 2; grid-row: auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; color: var(--ink); line-height: 1.35; }
.jr-ml .jr-m { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 2px var(--s2); align-items: baseline; white-space: nowrap; font-size: var(--t-xs); }
.jr-ml .jr-m:empty { display: none; }
.jr-ml .jr-r { padding: 0 6px; border-width: 1.5px; font-size: 10px; }
@media (max-width: 640px) {
  .jr-e { grid-template-columns: 44px minmax(0, 1fr); }
  .jr-k { grid-column: 2; grid-row: 1; }
  .jr-t { grid-column: 1 / -1; }
  .jr-m { grid-column: 1 / -1; justify-content: flex-start; }
}

/* 17.10: особые вещи (Печать Метаморфозы) — описание и пометка «пока недоступно» */
.d-desc { margin-top: var(--s3); font-size: var(--t-sm); line-height: 1.5; color: #dccbff; font-style: italic; }
.tip .t-desc { margin-top: var(--s2); font-size: 13px; line-height: 1.45; color: #dccbff; font-style: italic; max-width: 300px; }
.note.relicn { color: #e7c8ff; border-color: rgba(199, 139, 255, .45); }

/* ================= 17.10: страница ошибки (вход не удался, нет страницы и т.п.) — во всех темах ================= */
.errp { min-height: 100vh; display: flex; flex-direction: column; }
.errp .top .brand { color: inherit; text-decoration: none; }
.err { flex: 1; display: grid; place-items: center; padding: var(--s6) var(--s4) var(--s7); }
.err-card { position: relative; width: min(520px, 100%); padding: var(--s6) var(--s5) var(--s5); text-align: center;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 0 0 1px var(--frame), 0 24px 60px rgba(0,0,0,.45); }
.err-card::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--frame); pointer-events: none; }
.err-art { display: block; width: 150px; height: 150px; margin: -4px auto var(--s3); color: var(--accent); overflow: visible; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 35%, transparent)); }
.err-swords { opacity: .55; }
.err-shield { fill: var(--surface2); stroke: currentColor; stroke-width: 5; stroke-linejoin: round; }
.err-rim { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .45; }
.err-crack { fill: none; stroke: var(--dn, #ff7a6e); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--dn, #ff7a6e)); }
.err-sparks circle { fill: var(--accent); animation: errSpark 2.4s ease-in-out infinite; }
.err-sparks circle:nth-child(2) { animation-delay: .5s; } .err-sparks circle:nth-child(3) { animation-delay: 1s; } .err-sparks circle:nth-child(4) { animation-delay: 1.5s; } .err-sparks circle:nth-child(5) { animation-delay: 2s; }
@keyframes errSpark { 0%, 100% { opacity: .15; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }
.err-kick { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
.err h1 { margin-top: var(--s2); font: 400 var(--t-3xl)/1.1 var(--hd); color: var(--accent); text-wrap: balance; }
.err-msg { margin: var(--s3) auto 0; max-width: 40ch; color: var(--ink); opacity: .85; }
.err-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s5); }
@media (max-width: 480px) { .err h1 { font-size: var(--t-2xl); } .err-btns .btn { flex: 1 1 100%; } .err-art { width: 120px; height: 120px; } }
@media (prefers-reduced-motion: reduce) { .err-sparks circle { animation: none; opacity: .7; } }

/* ================= 17.10: соц. рейтинг — строка у героя и вкладка «Соц. рейтинг» (во всех темах) ================= */
.socl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); font-size: var(--t-sm); color: var(--mute); }
button.socl { width: 100%; background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-sm); color: var(--mute); text-align: left; cursor: pointer; }   /* 23.10: строка рейтинга ведёт в «Легион (рейтинг)» */
button.socl:hover .sr-r, button.socl:focus-visible .sr-r { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.lg-views { justify-content: center; margin: 0 0 var(--s4); }
#lgRoster[hidden], #lgSoc[hidden] { display: none; }
.socl .sr-i { font-size: 1.1em; line-height: 1; }
.socl .sr-r { color: var(--ink); font-weight: 700; }
.socl .sr-s { margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums; }
.socl em { font-style: normal; font-size: var(--t-xs); color: var(--mute); }
.socl.bad .sr-r, .socl.bad .sr-s { color: var(--dn, #ff7a6e); }
.soc { display: grid; gap: var(--s4); padding-bottom: var(--s6); }
.soc-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.soc-h .lead { margin-top: var(--s2); max-width: 52ch; color: var(--mute); }
.soc-me { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line); background: var(--surface2); }
.soc-me .mi { font-size: 30px; line-height: 1; }
.soc-me b { display: block; font: 400 var(--t-xl)/1.1 var(--hd); color: var(--accent); }
.soc-me span { font-size: var(--t-sm); color: var(--mute); }
.soc-me.bad b { color: var(--dn, #ff7a6e); }
.srl { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 2px; }
.srl.tail { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line); }
.soc-nh { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px dashed var(--line); font-size: var(--t-md); color: var(--mute); }   /* 21.10: соседи по рейтингу */
.srl.tail.nh { margin-top: var(--s2); padding-top: 0; border-top: 0; }
.sr { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, auto) 64px; align-items: center; gap: var(--s3); padding: 7px var(--s3); background: var(--surface2); }
.sr .sp { font-variant-numeric: tabular-nums; color: var(--mute); text-align: right; font-weight: 700; }
.sr .sn { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr .sk { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--mute); white-space: nowrap; }
.sr .sk i { font-style: normal; }
.sr .ss { text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); }
.sr.bad .ss { color: var(--dn, #ff7a6e); }
.sr.p1 .sp, .sr.p2 .sp, .sr.p3 .sp { color: var(--accent); font-size: var(--t-lg); }
.sr.p1 { box-shadow: inset 3px 0 0 var(--rc-legendary, #ffb84a); } .sr.p2 { box-shadow: inset 3px 0 0 #c9d1dc; } .sr.p3 { box-shadow: inset 3px 0 0 #c8875a; }
.sr.me { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 560px) { .sr { grid-template-columns: 32px minmax(0, 1fr) 54px; } .sr .sk { grid-column: 2 / 3; grid-row: 2; } .sr .ss { grid-row: 1 / span 2; grid-column: 3; } .sr .sp { grid-row: 1 / span 2; } }

/* 17.10: четыре вкладки — на узком экране не наезжают на «Выйти»: прокручиваются, «Соц. рейтинг» → «Рейтинг» */
.tabs button { white-space: nowrap; flex: none; }
@media (max-width: 720px) {
  .tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .user { flex: none; }
}
/* 18.10: на узком экране — короткая подпись отдельным словом (через ::first-letter буква иногда пропадала: «ейтинг») */
.tabs .tws { display: none; }
@media (max-width: 520px) { .tabs .tw { display: none; } .tabs .tws { display: inline; } }
/* 18.10: переключатель стиля не перекрывает карточку вещи на телефоне — уходит под шторку и прячется, пока она открыта */
@media (max-width: 1099px) { .style-switch { z-index: 39; } }
body:has(.detail.open) .style-switch, body:has(.scrim.open) .style-switch { opacity: 0; visibility: hidden; pointer-events: none; }
.style-switch { transition: opacity .2s, visibility .2s; }

/* ---------- 18.10: выбранная вещь — светлая рамка цвета текста, а не золотая: золото — это легендарка ---------- */
html[data-skin] .cell[aria-pressed="true"], html[data-skin] .slot[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 3px; }
html[data-skin="forge"] .cell[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 2px 12px rgba(0,0,0,.75); }
html[data-skin="forge"] .slot[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 2px 10px rgba(0,0,0,.7); }
html[data-skin="den"] .cell[aria-pressed="true"] { --accent-2: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
html[data-skin="den"] .slot[aria-pressed="true"] { box-shadow: inset 0 3px 10px rgba(0,0,0,.5), 0 0 0 3px var(--ink); }
html[data-skin="rage"] .cell[aria-pressed="true"] { box-shadow: inset 0 -4px 0 var(--rc), inset 0 0 0 3px var(--ink); }
html[data-skin="rage"] .slot[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ink); }

/* ---------- 18.10: «К содержимому» (для клавиатуры) — сверху по центру, поверх шапки, не на месте логотипа ---------- */
.skip { position: fixed; left: 50%; top: 6px; transform: translate(-50%, -160%); opacity: 0; pointer-events: none; border-radius: 8px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .15s var(--ease), opacity .15s; }
.skip:focus { left: 50%; transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

/* ---------- 18.10: «Снаряжение | Облик» в центре вкладки «Персонаж» ---------- */
.stage .views { justify-content: center; margin: 0 0 var(--s3); }
/* 19.10: «Боевой / Походный» под куклой — тот же вид кнопок, что у переключателя «Снаряжение / Облик» */
.stage .kit { justify-content: center; margin: var(--s2) 0 0; position: relative; z-index: 3; }   /* 19.10: поверх куклы — у котиков (den) фигура с подставкой свисает на кнопки и перехватывала нажатия */
.lookv { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); gap: var(--s3); align-items: start; }   /* 20.10: человечку — до 170 px, остальное — кнопкам */
.lookv .fig { position: relative; max-width: 230px; width: 100%; margin: 0 auto; }
.lookv .fig svg { display: block; width: 100%; height: auto; }
/* 20.10: компактнее — подпись слева в одну строку с кнопками (ПК), на телефоне — над кнопками; кнопки ниже и плотнее */
.lk { display: grid; gap: var(--s2); min-width: 0; align-content: start; container-type: inline-size; }
.lk .note { margin: 0; }
.lk .lk-tip { font-size: var(--t-xs); color: var(--mute); }
.lk-f { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px var(--s2); align-items: center; }
.lk-l { font-size: var(--t-xs); color: var(--mute); text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; }
.lk-c.filters { margin: 0; gap: 4px; min-width: 0; }
.lk-c.filters button { min-height: 30px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; white-space: nowrap; line-height: 1.15; }
.lk-more { font-size: var(--t-sm); color: var(--mute); }
.lk-more summary { cursor: pointer; min-height: 30px; display: flex; align-items: center; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.lk-more summary:hover { color: var(--ink); }
.lk-fxs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 6px; }
.lk-fx { display: inline-flex; align-items: center; gap: 5px; }
.lk-fx b { font-weight: 600; color: var(--ink); }
/* узкая колонка (сайт с боковыми панелями, телефон) — подпись над кнопками */
@container (max-width: 400px) { .lk-f { grid-template-columns: minmax(0, 1fr); gap: 3px; } }
.lk-fx .sw { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.4); flex: none; }
.lk-c.filters button:disabled { opacity: .5; cursor: not-allowed; }
.lk-c.filters button.lk-nick small { font-size: var(--t-xs); color: var(--mute); text-transform: lowercase; letter-spacing: .02em; }
.lk-c.filters button.lk-nick[aria-pressed="true"] small { color: inherit; opacity: .75; }
.lk-c .sw { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.25); flex: none; }
@media (max-width: 640px) { .lookv { grid-template-columns: 1fr; gap: var(--s2); } .lookv .fig { max-width: 150px; } }

/* ---------- 18.10: крестик карточки вещи — поверх рисунка (рисунок легендарки перекрывал его на телефоне — карточка «не закрывалась»);
   на широком экране — тоже есть: снимает выбор ---------- */
.detail .x { z-index: 5; color: var(--mute); }
.detail .x:hover { color: var(--ink); }
@media (min-width: 1100px) { .detail:not([data-none]) .x { display: grid; place-items: center; position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; background: none; } }

/* 18.10: на телефоне разделы шапки не обрезаются («Рейт…») и не наезжают на «Выйти»: лента вкладок прокручивается вбок,
   у «Арсенала» (forge) буквы уже — широкая разрядка не помещалась в 390 px */
@media (max-width: 520px) {
  .tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; white-space: nowrap; }
  .top .user { flex: 0 0 auto; }
  html[data-skin] .top .tabs button { letter-spacing: .02em; font-size: 12.5px; padding-inline: 7px; }
  /* знак Легиона на телефоне не нужен — место нужнее всем четырём вкладкам и «Выйти» */
  .top .brand { display: none; }
  .top .user .btn, .top .user button { padding-inline: 10px; }
}

/* ================= 18.10: режим стримера — пульт стримера внутри сайта =================
   Пульт во фрейме — слева на всю оставшуюся ширину и всю высоту окна; разделы — колонкой справа (те же кнопки, что фильтры
   сумки: у каждого оформления свои), по группам. Узко (док OBS, телефон) — полоса справа, список открывается поверх пульта.
   Сам пульт перекрашивается своей темой (public/platform/skin.css) под текущее оформление. */
.tabs button[hidden], .sm-frame[hidden] { display: none !important; }
body.sm-on main { max-width: none; padding: 0; }
/* одна прокрутка: страница в режиме стримера ровно в окно (шапка + пульт), прокручивается только пульт во фрейме */
body.sm-on { overflow: hidden; padding-bottom: 0 !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sm-wrap { --sm-col: 236px; --sm-h: calc(100vh - var(--sm-top, 72px)); position: relative; display: grid; grid-template-columns: var(--sm-col) minmax(0, 1fr); }
@supports (height: 100dvh) { .sm-wrap { --sm-h: calc(100dvh - var(--sm-top, 72px)); } }
.sm-body { position: relative; height: var(--sm-h); min-height: 240px; }
/* без color-mix — запасные значения: док-панель OBS бывает на старом Chromium */
.sm-side { position: relative; z-index: 6; height: var(--sm-h); min-height: 240px; border-right: 1px solid rgba(255,255,255,.08); border-right-color: var(--line, color-mix(in srgb, var(--ink) 12%, transparent)); background: rgba(0,0,0,.18); background: color-mix(in srgb, var(--surface2) 72%, transparent); }
.sm-list { display: flex; flex-direction: column; gap: var(--s3); height: 100%; padding: var(--s3); overflow-y: auto; overscroll-behavior: contain; }
/* список кнопок: поле в 4 px — рамка фокуса с клавиатуры не обрезается прокруткой */
.filters.sm-nav { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--s2); margin: 0; padding: 6px; }   /* 6 px — рамка фокуса (3 + 2 px) не обрезается прокруткой */
.filters.sm-nav button { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 40px; text-align: left; white-space: normal; line-height: 1.2; }
.filters.sm-nav button:active:not([aria-pressed="true"]) { transform: translateY(1px); }
.sm-nav button[aria-pressed="true"] { cursor: default; }
.sm-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sm-gh { display: flex; align-items: center; margin: var(--s2) 0 0; padding: 0 var(--s1); color: var(--mute); font: 700 var(--t-xs)/1.4 var(--hd, inherit); letter-spacing: .08em; text-transform: uppercase; }
.sm-gh .sm-adm { text-transform: none; }
/* 20.10: подпись группы — кнопка «свернуть / развернуть» */
button.sm-gh { width: 100%; gap: 6px; min-height: 30px; background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer; text-align: left; justify-content: flex-start; border-radius: 8px; }
button.sm-gh:hover { color: var(--ink); }
.sm-chev { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease, ease); }
button.sm-gh[aria-expanded="false"] .sm-chev { transform: rotate(-90deg); }
/* 18.10: «Готовность»: пока не всё готово — первой, со счётчиком; потом — строкой с галочкой в конце */
.sm-cnt, .sm-menu-cnt { font-variant-numeric: tabular-nums; }
.sm-cnt { flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--dn); color: #fff; font: 800 12px/1 var(--tx, inherit); letter-spacing: 0; }
.sm-ready-ok { color: var(--up) !important; }
.sm-ready-ok svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sm-ready-ok[aria-pressed="true"] { color: inherit !important; }
/* 19.10: выключенные у канала разделы — серым (видны по «Показать выключенные» или пока открыт); сама строка — неброская, как подпись */
.sm-nav button.sm-off:not([aria-pressed="true"]) { color: var(--mute); opacity: .62; }
.sm-nav button.sm-off:not([aria-pressed="true"]):hover { opacity: .9; }
.sm-nav button.sm-off[aria-pressed="true"] .sm-t { opacity: .75; }
.filters.sm-nav .sm-offs { min-height: 32px; margin-top: var(--s2); padding: var(--s1) var(--s2); border: 0; background: transparent !important; box-shadow: none; color: var(--mute); font-size: var(--t-xs); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.filters.sm-nav .sm-offs:hover { color: var(--ink); }
.sm-sep { flex: none; height: 1px; margin: var(--s1) var(--s1); background: currentColor; opacity: .14; }
.sm-dock { flex: none; margin-top: auto; width: 100%; min-height: 40px; height: auto; padding-inline: var(--s3) !important; white-space: normal; line-height: 1.25; text-align: center; }
.sm-dock.sm-donwin { margin-top: 0; }   /* «Открыть окно последних донатов» — самой первой строкой меню */
/* «Мятеж»: фон кнопок фильтров совпадает с колонкой — здесь они цвета его «призрачных» кнопок, чтобы читались кнопками */
html[data-skin="rage"] { --chip: #3a1d17; --chip-h: #4d261e; }
[data-skin="rage"] .sm-nav button:not([aria-pressed="true"]) { background: var(--chip); }
[data-skin="rage"] .sm-nav button:not([aria-pressed="true"]):hover { background: var(--chip-h); }
.sm-menu, .sm-curv, .sm-scrim { display: none; }
.sm-frame { position: absolute; inset: 0; }
.sm-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; transition: opacity .2s var(--ease); }
.sm-frame.ready iframe { opacity: 1; }
.sm-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); font-size: var(--t-sm); }
.sm-frame.ready .sm-wait { display: none; }
/* док-панель OBS: без шапки сайта */
html.dock .top, html.dock .skip { display: none; }
html.dock body { min-height: 0; }
@media (max-width: 900px) { .sm-wrap { --sm-col: 200px; } .sm-list { padding: var(--s2); } }

/* узко (док OBS 300–500 px, телефон): полоса 48 px — кнопка «Разделы» со счётчиком «Готовности» и название раздела;
   список выезжает поверх пульта (пульт не сжимается), выбор раздела его закрывает */
@media (max-width: 680px) {
  .sm-wrap { --sm-col: 48px; }
  .sm-side { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s2) 0; }
  .sm-menu { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line, color-mix(in srgb, var(--ink) 18%, transparent)); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
  .sm-menu:hover { background: var(--surface2); }
  .sm-menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .sm-wrap.open .sm-menu { background: var(--accent); border-color: var(--accent); color: var(--bg); }
  .sm-menu-cnt { position: absolute; top: -5px; right: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--dn); color: #fff; font: 800 11px/1 var(--tx, inherit); }
  .sm-menu-cnt[hidden] { display: none; }
  .sm-curv { display: block; flex: 1 1 auto; min-height: 0; max-height: 100%; padding: var(--s2) 0; border: 0; background: none; color: var(--mute); font: 700 var(--t-xs)/1 var(--hd, inherit); letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .sm-curv:hover { color: var(--ink); }
  .sm-list { position: absolute; z-index: 5; top: 0; left: 100%; width: min(272px, calc(100vw - 64px)); height: 100%; background: var(--surface); border-right: 1px solid rgba(255,255,255,.1); border-right-color: var(--line, color-mix(in srgb, var(--ink) 14%, transparent)); box-shadow: 18px 0 40px rgba(0,0,0,.4); visibility: hidden; opacity: 0; transform: translateX(-16px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; }
  .sm-wrap.open .sm-list { visibility: visible; opacity: 1; transform: none; transition: opacity .18s var(--ease), transform .18s var(--ease); }
  .sm-wrap.open .sm-scrim { display: block; position: absolute; z-index: 4; inset: 0; background: rgba(0,0,0,.35); }
}
@media (prefers-reduced-motion: reduce) { .sm-frame iframe, .sm-list, .sm-menu { transition: none !important; } }

/* 18.10: полоса прокрутки колонки разделов — в цветах оформления, тонкая (без серой системной) */
.sm-list { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; scrollbar-color: color-mix(in srgb, var(--accent) 70%, transparent) transparent; }
.sm-list::-webkit-scrollbar { width: 6px; }
.sm-list::-webkit-scrollbar-track { background: transparent; }
.sm-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 999px; }
.sm-list::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.sm-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* ================= 18.10: переключатель стримеров (шапка) и «Мои каналы» (меню ника) =================
   Кнопка — тихая, в цветах оформления; список — всплывающая карточка под ней (токены оформления, свои углы у каждого). */
.chsw { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 220px; min-height: 36px; padding: 4px 10px 4px 8px;
  border: 1px solid var(--line, color-mix(in srgb, var(--ink) 18%, transparent)); border-radius: var(--pop-r, 10px); background: transparent; color: var(--ink);
  font: 700 var(--t-sm)/1.1 var(--tx, inherit); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.chsw[hidden] { display: none; }
.chsw:hover, .chsw[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: var(--accent); }
.chsw .i, .whob .i { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chsw .chu { color: var(--accent); }
.chsw .chv, .whob .chv { width: 14px; height: 14px; opacity: .7; transition: transform .2s var(--ease); }
.chsw[aria-expanded="true"] .chv, .whob[aria-expanded="true"] .chv { transform: rotate(180deg); }
.chsw-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whob { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.whob:hover, .whob[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mych { white-space: nowrap; }
.pop { position: fixed; z-index: 80; overflow-y: auto; overscroll-behavior: contain; padding: var(--s2); border: 1px solid var(--line, color-mix(in srgb, var(--ink) 16%, transparent));
  border-radius: var(--pop-r, 12px); background: var(--surface); color: var(--ink); box-shadow: 0 18px 44px rgba(0,0,0,.45);
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 70%, transparent) transparent; animation: pop-in .14s var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
.pop-h { margin: var(--s2) var(--s2) var(--s1); color: var(--mute); font: 700 var(--t-xs)/1.4 var(--hd, inherit); letter-spacing: .08em; text-transform: uppercase; }
.pop-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pop-ch { display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 6px var(--s2); border-radius: calc(var(--pop-r, 12px) - 4px); color: inherit; text-decoration: none; font-weight: 700; }
.pop-ch:hover, .pop-ch:focus-visible { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.pop-ch[aria-current="page"] { color: var(--accent); }
.pop-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root { --live: #eb0400; --live-ink: #ff5a4f; --live-halo: rgba(235,4,0,.22); }   /* «в эфире» — красный Twitch, во всех оформлениях один */
.pop-live { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--live-ink); font-size: var(--t-xs); font-weight: 800; }
.pop-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px var(--live-halo); }
.pop-here { margin-left: 6px; color: var(--mute); font-size: var(--t-xs); font-weight: 600; }
.pop-mine { display: grid; gap: 4px; padding: 6px var(--s2) var(--s2); }
.pop-mine .pop-n { font-weight: 700; }
.pop-a { display: flex; flex-wrap: wrap; gap: 6px; }
.pop-a a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--line, color-mix(in srgb, var(--ink) 18%, transparent)); border-radius: calc(var(--pop-r, 12px) - 4px);
  color: inherit; text-decoration: none; font-size: var(--t-sm); font-weight: 700; }
.pop-a a:hover, .pop-a a:focus-visible { border-color: var(--accent); color: var(--accent); }
.pop-e { margin: var(--s2); color: var(--mute); font-size: var(--t-sm); }
.pop-sep { margin: var(--s2) 0; border: 0; border-top: 1px solid var(--line, color-mix(in srgb, var(--ink) 12%, transparent)); }
/* углы — как у оформления */
html[data-skin="forge"] { --pop-r: 4px; }
html[data-skin="den"] { --pop-r: 16px; }
html[data-skin="rage"] { --pop-r: 2px; }
[data-skin="forge"] .chsw, [data-skin="forge"] .pop-h { font-family: var(--hd); letter-spacing: .06em; }
[data-skin="rage"] .chsw { font-family: var(--hd); font-weight: 400; text-transform: uppercase; font-size: 12px; }
[data-skin="rage"] .pop { box-shadow: inset 0 3px 0 var(--accent), 0 18px 44px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; } .chsw .chv, .whob .chv { transition: none; } }
/* шапке тесно (вкладки широкими шрифтами оформлений): имя канала — только в подсказке и в списке, кнопка — значок со стрелкой */
@media (max-width: 1360px) { .chsw .chsw-n { display: none; } .chsw { padding-inline: 8px; } }
/* телефон: только значок (имя канала — в подсказке и в списке); «Мой канал» — в списке стримеров */
@media (max-width: 520px) {
  .chsw { flex: none; padding: 0; width: 38px; justify-content: center; }
  .chsw .chsw-n, .chsw .chv { display: none; }
  .mych, .whob { display: none; }   /* ник на телефоне скрыт и раньше; «Мои каналы» — в том же списке стримеров */
}
/* 18.10: вкладок в шапке стало больше («Новости», переключатель стримеров) — на любой ширине лента вкладок не наезжает на ник
   и «Выйти»: она сжимается и прокручивается вбок (как на телефоне), выбранная вкладка показывается целиком (tabSeen) */
.top .tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.top .tabs::-webkit-scrollbar { display: none; }
.top .tabs button { flex: 0 0 auto; white-space: nowrap; }
.top .user { flex: 0 0 auto; }
.top .brand, .top .chsw { flex-shrink: 0; }

/* 19.10: значок звания у ника (награды платформы, «Первопроходец Легиона» и т. п.): маленький, в цвет темы, с подсказкой.
   Оттенок — класс aw-<tone>; вид рамки — как у остальных деталей темы (плакат — штамп, кузня — тонкая рамка, наклейка — белый кант) */
.awb { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-left: .35em; vertical-align: .14em; font: 700 clamp(10px, .55em, 20px)/1 var(--tx); border-radius: 50%; background: var(--aw-bg); color: var(--aw-fg); cursor: help; flex: 0 0 auto; user-select: none; }
.awb > svg { display: block; width: 62%; height: 62%; }
.awb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.aw-pioneer { --aw-bg: var(--rc-rare); --aw-fg: #fff; }
/* 23.10: подсказка значка звания — окошко у значка (app.js awPop): тап/клик, у мыши — наведение; тап мимо, Esc, 4 с — закрывается */
.awpop { position: fixed; left: 0; top: 0; z-index: 80; max-width: min(260px, calc(100vw - 16px)); padding: var(--s2) var(--s3); pointer-events: none;
  background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35); font: 400 var(--t-sm)/1.35 var(--tx, system-ui); animation: tip-in .15s var(--ease); }
.awpop b { display: block; font-weight: 800; }
.awpop span { display: block; margin-top: 2px; }
.awpop::after { content: ''; position: absolute; left: var(--ax, 50%); top: 100%; width: 8px; height: 8px; margin: -4px 0 0 -4px; transform: rotate(45deg);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); border-width: 0 1px 1px 0; }
.awpop:not([data-up="1"])::after { top: 0; transform: rotate(225deg); }
.rf .rn .awb, .sr .sn .awb { font-size: 10px; margin-left: .3em; }
:is([data-skin="poster"], [data-skin="book"], [data-skin="plank"]) .awb { border-radius: 3px; box-shadow: 0 0 0 2px var(--ink); }
:is([data-skin="forge"], [data-skin="den"], [data-skin="rage"]) .awb { background: transparent; color: var(--aw-bg); box-shadow: inset 0 0 0 1.5px var(--aw-bg); }
:is([data-skin="sticker"], [data-skin="box"], [data-skin="comic"]) .awb { box-shadow: 0 0 0 2px #fff, 0 2px 0 2px rgba(8,6,36,.35); }
.nw-ch .awb { font-size: 10px; }


/* ================= 20.10: заточка — «+N» на вещи и окно Кузни (все цвета — из переменных темы) ================= */
.cell .en { position: absolute; left: 6px; bottom: 34px; padding: 0 6px; border-radius: 6px; font-size: var(--t-xs); font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--surface2, rgba(0,0,0,.3)); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.d-en { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: var(--t-sm); font-weight: 700; color: var(--accent); }
.d-a .fg-btn { margin-top: var(--s3); }
.fg-wrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--s4); }
.fg-scrim { position: absolute; inset: 0; background: rgba(10, 8, 20, .62); }
.fg-wrap .fg { position: relative; width: min(480px, 100%); max-height: calc(100dvh - 2 * var(--s4)); overflow: auto; display: grid; gap: var(--s3); overscroll-behavior: contain; }
.fg .h2 { display: flex; align-items: center; gap: var(--s2); padding-right: 48px; }
.fg-x { position: absolute; top: var(--s2); right: var(--s2); display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); }
.fg-item { display: grid; grid-template-columns: 88px 1fr; gap: var(--s3); align-items: center; }
.fg-art { position: relative; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 12px; background: var(--surface2, rgba(0,0,0,.2)); box-shadow: inset 0 0 0 2px var(--rc); }
.fg-art .art { width: 70px; height: 70px; }
.fg-nm { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.fg-nm b { font-size: var(--t-lg); color: var(--rc); }
.fg-tg { color: var(--accent); }
.fg-st { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fg-st li { display: grid; grid-template-columns: auto 1fr auto 4.6em; gap: var(--s2); align-items: center; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.fg-st li span { color: var(--mute); } .fg-st em { font-style: normal; font-weight: 800; color: var(--up); text-align: right; }
.fg-ways button { min-height: 40px; }
.fg-ways small { margin-left: 4px; opacity: .75; font-size: .85em; }
.fg-q { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0; }
.fg-q div { padding: var(--s2) var(--s3); border-radius: 10px; background: var(--surface2, rgba(0,0,0,.2)); min-width: 0; }
.fg-q dt { font-size: var(--t-xs); color: var(--mute); }
.fg-q dd { margin: 2px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fg-ch { font-size: var(--t-2xl); line-height: 1.1; color: var(--accent); }
.fg-q dd .m { font-size: var(--t-sm); }
.fg-f { font-size: var(--t-sm); } .fg-f.bad { color: var(--dn); } .fg-f.save { color: var(--ink); } .fg-f.ok { color: var(--up); }
.fg-why { color: var(--dn); font-weight: 700; }
.fg-go .btn .i { width: 1.2em; height: 1.2em; }
.fg-go .btn:disabled, .fg-buy .btn:disabled, .fg-more .btn:disabled { opacity: .45; filter: saturate(.4); }
.fg-go .btn.fg-sure { outline: 3px solid var(--dn); outline-offset: 2px; }
.fg-cmd .cmd { white-space: nowrap; }
.fg-more { border-top: 1px solid var(--line, rgba(127,127,127,.25)); padding-top: var(--s2); }
.fg-more summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font-size: var(--t-sm); font-weight: 700; color: var(--mute); }
.fg-more > * + * { margin-top: var(--s2); }
.fg-buy { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fg-buy .btn { flex: 1 1 180px; }
/* итог: крупно, коротко; анимация — один раз, только transform/opacity */
.fg-res { min-height: 0; text-align: center; }
.fg-res:empty { display: none; }
.fg-res b { display: block; font-size: var(--t-3xl); line-height: 1.05; font-variant-numeric: tabular-nums; }
.fg-res span { display: block; font-size: var(--t-sm); font-weight: 700; }
.fg-res.ok b { color: var(--accent); } .fg-res.bad b, .fg-res.err span { color: var(--dn); } .fg-res.save b { color: var(--ink); } .fg-res.err b { display: none; }
.fg-res.go { animation: fgPop .7s var(--ease) both; }
@keyframes fgPop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.12); } 100% { transform: none; } }
.fg-art.work .art { animation: fgWork .5s ease-in-out infinite alternate; transform-origin: 50% 80%; }
@keyframes fgWork { from { transform: rotate(-5deg); } to { transform: rotate(5deg) translateY(-2px); } }
.fg-fx { position: absolute; inset: -14px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, var(--accent) 0, transparent 65%); animation: fgFlash .8s ease-out both; }
.fg-fx.bad { background: radial-gradient(circle, var(--dn) 0, transparent 65%); }
.fg-fx.save { background: radial-gradient(circle, var(--ink) 0, transparent 60%); }
@keyframes fgFlash { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
.fg-art.bad .art { opacity: .35; transform: rotate(-12deg) translateY(6px); transition: opacity .5s, transform .5s var(--ease); }
@media (max-width: 520px) {
  .fg-wrap { place-items: end stretch; padding: 0; }
  .fg-wrap .fg { width: 100%; max-height: 92dvh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }
  .fg-q { grid-template-columns: 1fr 1fr; } .fg-q div:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .fg-res.go, .fg-art.work .art, .fg-fx { animation: none; } .fg-fx { display: none; } }
/* 20.10: характеристики второго ряда — крит, уклонение, пробивание… (окно персонажа; видны тестерам, пока не открыты всем) */
.xst { display: grid; gap: var(--s2); }
.xst-h { margin: 0; display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.xst-b { padding: 1px 7px; border: 1px solid currentColor; border-radius: 99px; font-size: 10px; letter-spacing: .08em; }
.xstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xstats .stat { padding: var(--s2) var(--s3); }
.xstats .stat .i { width: 18px; height: 18px; }
.xstats .stat dd { font-size: var(--t-lg); }
.xstats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.xstats .stat.capped dd::after { content: ' · потолок'; font-size: var(--t-xs); font-weight: 700; color: var(--mute); }
.tip .t-cap { margin-top: var(--s2); font-size: var(--t-xs); color: var(--mute); }

/* ================= 22.10: прочность снаряжения — «повреждена» / «сломана» на вещи, строка в карточке, «починить всё» ================= */
.cell .dur, .slot .dur { position: absolute; right: 6px; top: 6px; z-index: 2; padding: 0 5px; border-radius: 6px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--surface2, rgba(0,0,0,.3)); color: color-mix(in srgb, var(--dn) 55%, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dn) 55%, transparent); }
.cell .dur { top: auto; bottom: 34px; }   /* вверху справа — «лучше надетого», внизу слева — заточка; стопок у снаряжения нет */
.cell .dur.br, .slot .dur.br { background: var(--dn); color: #fff; box-shadow: none; }
.d-dur { margin-top: var(--s3); font-size: var(--t-sm); color: color-mix(in srgb, var(--dn) 55%, var(--ink)); }
.d-dur.br { color: var(--dn); }
.d-dur.ok { color: var(--mute); }   /* аукцион: целая вещь — «прочность 100%» */
.d-a .rep-btn { margin-top: var(--s3); }
.repl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s2); padding: var(--s2) var(--s3); border-radius: 8px;
  border: 2px solid color-mix(in srgb, var(--dn) 50%, transparent); font-size: var(--t-sm); }
.repl.br { border-color: var(--dn); }
.repl .btn { min-height: 44px; flex-wrap: wrap; row-gap: 0; text-align: center; }   /* 24.10: в узкой колонке «Починить всё —» и цена переносятся строками, а не сжимаются в столбики */
.t-dur { margin: var(--s1) 0 0; font-size: var(--t-xs); font-weight: 700; color: color-mix(in srgb, var(--dn) 55%, var(--ink)); }
.t-dur.br { color: var(--dn); }
.rep-box { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.rep-box .h3 { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.rep-list li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.rep-list li span { color: var(--rc, var(--ink)); font-weight: 700; overflow-wrap: anywhere; }
.rep-list li em { font-style: normal; font-weight: 800; color: color-mix(in srgb, var(--dn) 55%, var(--ink)); }
.rep-list li em.br { color: var(--dn); }
.rep-list .btn { min-height: 44px; }

/* 22.10: склад — ячейки сумки (у кого открыт склад) */
.bag-cnt { font-variant-numeric: tabular-nums; } .bag-cnt.full { color: var(--dn, #c81e17); } .bag-cnt.near { color: var(--warn, #b7791f); }
.cell .cnt .cc { font-style: normal; } @media (max-width: 600px) { .cell .cnt .cc { display: none; } }
.bag .grid .cell.free { border: 2px dashed color-mix(in srgb, var(--line, #888) 70%, transparent); background: transparent; box-shadow: none; opacity: .5; pointer-events: none; }
.bag-full { margin: 0 0 8px; color: var(--dn, #c81e17); font-weight: 700; }

/* 23.10: «Поход» — первая вкладка, пока у стримера открыт поход; выделена, чтобы сразу было видно, куда идти */
.tabs button.tab-quest[data-tab] { display: inline-flex; align-items: center; gap: 6px; background: #b3261e; color: #fff; border-radius: 6px; font-weight: 800; border-bottom-color: transparent; }
.tabs button.tab-quest[data-tab][hidden] { display: none; }
.tabs button.tab-quest[data-tab]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: tabLive 1.6s ease-in-out infinite; }
.tabs button.tab-quest[data-tab]:hover { background: #d0342a; color: #fff; }
.tabs button.tab-quest[data-tab][aria-current] { background: #d0342a; color: #fff; box-shadow: inset 0 -3px 0 rgba(255,255,255,.75); }
@keyframes tabLive { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .tabs button.tab-quest[data-tab]::before { animation: none; } }
/* 23.10: герой в походе — «Город» в списке, но не открывается */
.tabs button.tab-lock[data-tab] { opacity: .45; cursor: not-allowed; }
.tab-note { position: fixed; z-index: 60; max-width: 260px; padding: 6px 10px; border-radius: 6px; background: #1d1b17; color: #fff; font: 600 13px/1.3 var(--tx, sans-serif); box-shadow: 0 4px 14px rgba(0,0,0,.35); pointer-events: none; }
.tab-note[hidden] { display: none; }

/* 23.10: окно персонажа — переключатель «Боевые характеристики / Ремесло» и список ремёсел */
.xst-h .xst-t { padding: 2px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--mute); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.xst-h .xst-t[aria-selected="true"] { color: var(--ink); border-bottom-color: currentColor; }
.xst-h .xst-t:hover { color: var(--ink); }
.xst-h { flex-wrap: wrap; column-gap: var(--s3); }
.crafts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.stat.craft { padding: var(--s2) var(--s3); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 4px; min-width: 0; align-items: start; }
.craft-t { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.craft-t b { font-size: var(--t-sm); overflow-wrap: anywhere; }
.craft-lv { font-weight: 800; font-size: var(--t-sm); white-space: nowrap; }
.bar.craft-bar { height: 6px; }
.craft-n { margin: 0; font-size: var(--t-xs); }

/* 23.10: «Точно выйти?» — второе нажатие выходит */
#out.warn { color: #fff; background: #b3261e; border-color: #b3261e; }

/* 24.10: телефон — кнопки-фильтры («Снаряжение / Облик / Навыки», сумка, «Состав / Соц. рейтинг») и вкладки характеристик — не ниже 40px */
@media (max-width: 520px) {
  .filters button, .filters.cls button { min-height: 40px; }
  .xst-h .xst-t { min-height: 40px; }
  #out .out-x { display: none; }   /* 24.10: «Выйти» вместо «Выйти из аккаунта» — вкладкам в шапке больше места */
}
/* ================= 24.10: «Отправить баг» — плавающая кнопка (app.js: bfPlace; форма — bugreport.css/js, грузятся по нажатию) =================
   Одна на все оформления: тёмная «таблетка», как переключатель стиля. Поднимается над нижними панелями (--bf-up), прячется (.off) */
.bugfab { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  display: flex; transform: translateY(calc(-1 * var(--bf-up, 0px))); transition: transform .22s var(--ease), opacity .18s var(--ease); }
.bugfab[hidden] { display: none; }
.bugfab.off { opacity: 0; visibility: hidden; pointer-events: none; transition: transform .22s var(--ease), opacity .15s, visibility 0s .15s; }
.bugfab-b { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(16,14,20,.88); color: #f2eee6; font: 600 13px/1 'Golos Text', system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: background .15s, opacity .15s; }
.bugfab-b:hover { background: rgba(16,14,20,.97); }
.bugfab-i { font-size: 17px; line-height: 1; }
.bugfab.busy .bugfab-i { animation: bfBusy .8s ease-in-out infinite alternate; }
@keyframes bfBusy { to { opacity: .35; } }
.bugfab-x { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3); background: #23202b; color: #f2eee6; font: 700 14px/1 system-ui, sans-serif; opacity: 0; transition: opacity .15s; }
.bugfab-x::after { content: ''; position: absolute; inset: -5px; }   /* чуть больше места для пальца (но не до середины кнопки) */
.bugfab:hover .bugfab-x, .bugfab:focus-within .bugfab-x { opacity: 1; }
@media (hover: none) { .bugfab-x { opacity: .9; } }
/* свёрнута: язычок у правого края */
.bugfab.min { right: 0; }
.bugfab.min .bugfab-b { width: 30px; height: 40px; padding: 0 0 0 2px; justify-content: center; border-radius: 12px 0 0 12px; border-right: 0; opacity: .72; }
.bugfab.min .bugfab-b:hover, .bugfab.min .bugfab-b:focus-visible { opacity: 1; }
.bugfab.min .bugfab-t, .bugfab.min .bugfab-x { display: none; }
/* телефон: только значок, круг 44 px */
@media (max-width: 520px) {
  .bugfab-b { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .bugfab-t { display: none; }
  .bugfab-i { font-size: 19px; }
}
/* внизу страницы — запас, чтобы последняя кнопка контента не оставалась под плавающей */
html.bugfab-on:not(.cy-full) #main::after { content: ''; display: block; height: 56px; }
html.is-dragging .bugfab { display: none; }
@media (prefers-reduced-motion: reduce) { .bugfab, .bugfab.off { transition: none; } .bugfab.busy .bugfab-i { animation: none; } }