:root {
  --bg: #0f100f; --surface: #161715; --raised: #1d1e1b; --well: #121311;
  --line: rgba(233,220,195,.09); --line-strong: rgba(233,220,195,.2);
  --text: #e9dcc3; --text-2: #b4ab98; --muted: #837c6d;
  --brass: #c9a35b; --brass-ink: #1a1408; --danger: #c36d5e;
  --hp: #a8524a;
  --r-common: #7f857f; --r-uncommon: #8ca469; --r-rare: #7fa3b0; --r-epic: #ad82b6; --r-special: #d3a253;
  --sans: "Segoe UI", Arial, sans-serif; --serif: Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.2,.75,.2,1);
}
* { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; }
body { background: var(--bg); color: var(--text); font: 13px/1.4 var(--sans); font-variant-numeric: tabular-nums; min-height: 100vh; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.app { max-width: 1120px; margin: 0 auto; padding: 12px 16px 24px; }

/* верхняя строка: один ряд вместо двух */
.top { display: flex; align-items: center; gap: 12px; height: 56px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); flex: none; display: grid; place-items: center; color: var(--muted); }
.who { min-width: 0; line-height: 1.2; }
.who strong { display: block; font: 16px/20px var(--serif); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who span { font-size: 12px; color: var(--muted); }
.pages { display: flex; gap: 2px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.pages::-webkit-scrollbar { display: none; }
.pg { height: 32px; padding: 0 12px; border-radius: 8px; color: var(--text-2); white-space: nowrap; transition: background-color .15s, color .15s; }
.pg:hover { color: var(--text); background: var(--surface); }
.pg[aria-current="page"] { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px 0 var(--brass); }
.view { display: flex; gap: 2px; flex: none; }
.view button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; color: var(--text-2); white-space: nowrap; transition: background-color .15s, color .15s; }
.view button:hover { color: var(--text); background: var(--surface); }
.view button[aria-current="true"] { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px 0 var(--brass); }
.view .only-narrow { display: none; }

.main { display: grid; min-width: 0; grid-template-columns: 296px minmax(0, 1fr); gap: 16px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.h h2 { font: 18px/24px var(--serif); font-weight: 400; }
.h small, .label { color: var(--muted); font-size: 12px; }

/* герой */
.doll { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-rows: repeat(4, 56px); gap: 8px; margin-bottom: 16px; }
.fig { grid-column: 2; grid-row: 1 / span 4; display: grid; place-items: center; color: #25261f; }
.fig svg { width: 100%; height: 100%; max-height: 248px; fill: var(--well); stroke: var(--line-strong); stroke-width: 1; }
.slot { position: relative; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); }
.slot img { position: relative; width: 40px; height: 40px; object-fit: contain; }
.slot.empty { border-style: dashed; }
.slot.empty svg { width: 20px; height: 20px; opacity: .55; }
.slot[data-r="uncommon"] { box-shadow: inset 0 -2px 0 var(--r-uncommon); }
.slot[data-r="epic"] { box-shadow: inset 0 -2px 0 var(--r-epic); }
.slot:hover { border-color: var(--line-strong); }
.hp { margin-bottom: 12px; }
.hp .row { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--text-2); }
.hp .row b { color: var(--text); font-weight: 500; }
.bar { height: 8px; border-radius: 4px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: var(--hp); }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.chip { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--well); }
.chip span { color: var(--muted); font-size: 12px; }
.chip b { font: 500 16px/20px var(--sans); }
.attrs { display: grid; }
.attr { display: flex; align-items: center; justify-content: space-between; height: 36px; border-top: 1px solid var(--line); color: var(--text-2); }
.attr b { color: var(--text); font-weight: 500; margin-right: 8px; }
.plus { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--brass); display: inline-grid; place-items: center; font-size: 16px; line-height: 1; }
.plus[disabled] { opacity: .3; cursor: default; }
.tail { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.link { color: var(--muted); font-size: 12px; height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line); }
.link:hover { color: var(--text); border-color: var(--line-strong); }

/* сумка */
.bag { position: relative; }
.cur { display: flex; gap: 8px; }
.cur span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--well); border: 1px solid var(--line); color: var(--text-2); }
.cur b { color: var(--text); font-weight: 500; }
.cur .si { color: var(--brass); }
.cats { display: flex; gap: 4px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: none; display: grid; justify-items: center; gap: 2px; width: 56px; padding: 6px 0 4px; border-radius: 10px; color: var(--muted); transition: background-color .15s, color .15s; }
.cat small { font-size: 11px; line-height: 14px; }
.cat:hover { color: var(--text); background: var(--raised); }
.cat[aria-selected="true"] { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px 0 var(--brass); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; min-width: 0; }
.cell { position: relative; aspect-ratio: 1; min-width: 0; overflow: visible; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); transition: border-color .12s, background-color .12s; }
.cell:hover { border-color: var(--line-strong); background: var(--raised); }
.cell img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.cell .n { position: absolute; right: 5px; bottom: 3px; font-size: 11px; line-height: 14px; color: var(--text); text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.cell::after { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--rc, transparent); }
.cell[data-r="uncommon"] { --rc: var(--r-uncommon); } .cell[data-r="rare"] { --rc: var(--r-rare); } .cell[data-r="epic"] { --rc: var(--r-epic); } .cell[data-r="special"] { --rc: var(--r-special); }
.cell[aria-selected="true"] { border-color: var(--brass); background: var(--raised); }
.cell[aria-selected="true"]::before { content: ""; position: absolute; inset: -1px auto auto -1px; width: 12px; height: 12px; border-top: 2px solid var(--brass); border-left: 2px solid var(--brass); border-top-left-radius: 10px; }
.cell[data-name]:hover::before { content: attr(data-name); position: absolute; z-index: 5; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 8px; border-radius: 6px; background: #0b0b0a; border: 1px solid var(--line-strong); font-size: 12px; color: var(--text); pointer-events: none; border-top-left-radius: 6px; width: auto; height: auto; }
.empty-cell { aspect-ratio: 1; border: 1px dashed var(--line); border-radius: 10px; opacity: .5; }

/* карточка предмета: поверх сумки, не сдвигает сетку */
.scrim { display: none; }
.card { position: fixed; z-index: 20; top: 72px; right: max(16px, calc(50vw - 528px)); width: 300px; max-height: calc(100vh - 96px); overflow: auto; padding: 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 16px 48px rgba(0,0,0,.6); display: none; }
.app[data-open="true"] .card { display: block; }
.card-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--text-2); }
.card-x:hover { background: var(--raised); }
.card .top2 { display: grid; grid-template-columns: 72px 1fr; gap: 12px; margin-bottom: 12px; align-items: center; padding-right: 24px; }
.card .well { width: 72px; height: 72px; border-radius: 10px; display: grid; place-items: center; background: radial-gradient(circle at 50% 55%, #26251f, var(--well) 72%); border: 1px solid var(--line); }
.card .well img { position: relative; width: 52px; height: 52px; object-fit: contain; }
.card .well { position: relative; }
.card h3 { font: 18px/24px var(--serif); font-weight: 400; }
.rar { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12px; }
.rar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--r-common)); }
.card p { color: var(--text-2); margin-bottom: 12px; }
.facts div { display: flex; justify-content: space-between; height: 32px; align-items: center; border-top: 1px solid var(--line); color: var(--text-2); }
.facts b { color: var(--text); font-weight: 500; }
.actions { display: grid; gap: 8px; margin-top: 12px; }
.btn { height: 40px; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--text); }
.btn:hover { background: var(--raised); }
.btn.warn { color: var(--danger); border-color: rgba(195,109,94,.35); }
.btn small { color: var(--muted); margin-left: 6px; }

/* ===== телефон ===== */
@media (max-width: 760px) {
  .app { padding: 8px 12px 24px; }
  .top { height: 52px; margin-bottom: 8px; gap: 8px; }
  .pages { order: 3; flex-basis: 100%; margin: 0; }
  .view { order: 4; flex-basis: 100%; }
  .view button { flex: 1 1 0; padding: 0 6px; height: 36px; }
  .view .only-narrow { display: inline-flex; }
  .app[data-view="inventory"] .hero-panel { display: none; }
  .app[data-view="character"] .bag { display: none; }
  .top { flex-wrap: wrap; height: auto; padding-bottom: 4px; }
  .who { margin-right: auto; }
  .main { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cats { margin-right: -4px; }
  .panel { padding: 12px; border-radius: 10px; }
  .doll { grid-template-columns: repeat(4, 1fr); grid-template-rows: none; grid-auto-rows: 56px; }
  .fig { display: none; }
  .doll .slot { grid-area: auto !important; width: 100%; height: 56px; }
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .h h2 { font-size: 17px; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(8,9,8,.66); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app[data-open="true"] .scrim { opacity: 1; pointer-events: auto; }
  .card { position: fixed; z-index: 31; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 70vh; display: block; transform: translateY(calc(100% + 16px)); transition: transform .26s var(--ease); }
  .app[data-open="true"] .card { transform: none; }
  .card::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: -4px auto 12px; }
  .actions { grid-template-columns: 1fr 1fr; }
}
.best { display: none; }
.app[data-view="bestiary"] .main { display: none; }
.app[data-view="bestiary"] .best { display: block; }
@media (hover: none) { .cell[data-name]:hover::before { display: none; } }

/* руны */
.cell.rune img { inset: 12%; width: 76%; height: 76%; }
.cell.rune::after { display: none; }
.cell.rune .ring { position: absolute; inset: 5px; border-radius: 50%; border: 1px solid var(--rc, var(--line)); opacity: .55; pointer-events: none; }
.cell.rune .kind { position: absolute; top: 4px; right: 6px; font-size: 10px; line-height: 12px; color: var(--muted); }
.cell.rune[data-r="moon"] { --rc: #9fb4bd; } .cell.rune[data-r="witch"] { --rc: #b98ac6; } .cell.rune[data-r="nav"] { --rc: #e0ac57; }
.card.runec { width: 340px; }
.card.runec .well img { width: 56px; height: 56px; }
.rdot { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 12px; }
.rdot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rc, var(--r-common)); }
.sec { margin-top: 12px; }
.sec h4 { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 400 12px/16px var(--sans); color: var(--muted); }
.q { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 10px; color: var(--muted); cursor: help; }
.r2 { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--text-2); line-height: 1.45; }
.r2 .l { color: var(--muted); }
.r2.one { grid-template-columns: 1fr; }
.term { border-bottom: 1px dotted var(--text-2); color: var(--text); cursor: help; }
.tip { position: fixed; z-index: 100; max-width: 260px; padding: 8px 12px; background: #0b0b0a; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); font-size: 12px; line-height: 1.4; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.up { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--well); }
.up .lv { color: var(--text-2); line-height: 1.45; } .up .lv b { color: var(--text); font-weight: 500; }
.up .dust { color: var(--muted); font-size: 12px; }
.up .pre { min-height: 18px; color: var(--brass); font-size: 12px; line-height: 1.4; }
.up .ctl { display: grid; grid-template-columns: 1fr 76px; gap: 12px; align-items: center; }
.up input[type=range] { width: 100%; accent-color: var(--brass); height: 28px; }
.up input[type=number] { width: 100%; height: 36px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: inherit; }
.up .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn.primary { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); font-weight: 500; }
.btn.primary:hover { background: #d6b06b; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn.confirm { color: var(--danger); border-color: rgba(195,109,94,.5); }

/* подпись под значком руны */
.grid.runes { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.grid.runes .cell { aspect-ratio: 1 / 1.22; }
.grid.runes .cell img { inset: auto; top: 6px; left: 50%; transform: translateX(-50%); width: 58%; height: auto; aspect-ratio: 1; }
.grid.runes .cell .ring { inset: auto; top: 4px; left: 50%; transform: translateX(-50%); width: 62%; aspect-ratio: 1; }
.cell.rune .cap { position: absolute; left: 4px; right: 4px; bottom: 6px; height: 26px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; font-size: 11px; line-height: 13px; color: var(--text-2); overflow-wrap: anywhere; text-wrap: balance; }
.cell.rune .n { right: auto; left: 6px; top: 4px; bottom: auto; }
.cell.rune:hover .cap, .cell.rune[aria-selected="true"] .cap { color: var(--text); }
@media (max-width: 760px) { .grid.runes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* руны по референсу: сетка без рамок, подпись над крупным значком */
.grid.runes { gap: 6px 4px; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.grid.runes .cell { display: block; aspect-ratio: auto; height: 100px; border-color: transparent; background: transparent; border-radius: 12px; }
.grid.runes .cell:hover { background: var(--raised); }
.grid.runes .cell[aria-selected="true"] { background: var(--raised); border-color: var(--brass); }
.grid.runes .cell .cap { position: absolute; top: 6px; left: 4px; right: 4px; bottom: auto; height: 26px; }
.grid.runes .cell .ic { position: absolute; left: 50%; top: 36px; width: 60px; height: 60px; transform: translateX(-50%); }
.grid.runes .cell .ic img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); transform: none; object-fit: contain; }
.grid.runes .cell .ic .ring { position: absolute; inset: 0; width: auto; border-radius: 50%; border: 1px solid var(--rc); opacity: .7; transform: none; aspect-ratio: auto; }
.grid.runes .cell .ic .kind { position: absolute; top: -3px; right: -9px; font-size: 10px; line-height: 12px; color: var(--muted); }
.grid.runes .cell .ic .n { position: absolute; right: -9px; bottom: -3px; left: auto; top: auto; font-size: 11px; line-height: 14px; }
@media (max-width: 760px) { .grid.runes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* руны: рамки как у всех ячеек, подпись внутри ячейки сверху, один ровный ряд у всех */
.grid.runes { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.grid.runes .cell { height: 92px; border-color: var(--line); background: var(--bg); border-radius: 10px; }
.grid.runes .cell:hover { border-color: var(--line-strong); background: var(--raised); }
.grid.runes .cell[aria-selected="true"] { border-color: var(--brass); background: var(--raised); }
.grid.runes .cell .cap { top: 6px; left: 6px; right: 6px; height: 14px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: unset; text-wrap: nowrap; text-align: center; font-size: 11px; line-height: 14px; color: var(--text-2); }
.grid.runes .cell .ic { top: 26px; width: 58px; height: 58px; }
.grid.runes .cell .ic .kind { right: -14px; top: -2px; }
.grid.runes .cell .ic .n { right: -14px; bottom: -2px; }
@media (max-width: 760px) { .grid.runes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ПК: постоянная панель описания справа от сумки */
@media (min-width: 1100px) {
  .app { max-width: 1280px; }
  .main { grid-template-columns: 296px minmax(0, 1fr) 328px; }
  .card, .card.runec { position: sticky; top: 16px; right: auto; width: auto; max-height: none; overflow: visible; display: block !important; box-shadow: none; border-color: var(--line); background: var(--surface); }
  .card-x { display: none; }
  .scrim { display: none !important; }
}

/* картинки предметов нельзя открыть, перетащить или выделить: клики проходят сквозь них */
.cell img, .slot img, .well img, .glow, .inside img { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
/* ===== свечение за предметом: текстура света, окрашенная цветом редкости ===== */
.glow { position: absolute; inset: 2%; pointer-events: none; background: var(--gc, transparent); opacity: var(--go, .5); transition: opacity .2s;
  -webkit-mask: url("/assets/shared/ui/glow.png") center / contain no-repeat; mask: url("/assets/shared/ui/glow.png") center / contain no-repeat; }
:is(.cell, .slot, .well)[data-r="common"] { --gc: var(--r-common); --go: .22; }
:is(.cell, .slot, .well)[data-r="uncommon"] { --gc: var(--r-uncommon); --go: .42; }
:is(.cell, .slot, .well)[data-r="rare"] { --gc: var(--r-rare); --go: .5; }
:is(.cell, .slot, .well)[data-r="epic"] { --gc: var(--r-epic); --go: .62; }
:is(.cell, .slot, .well)[data-r="special"] { --gc: var(--r-special); --go: .62; }
/* цветокоррекция иконок пака под палитру игры */
[data-art="dustnav"] { --cc: hue-rotate(210deg) saturate(1.3) brightness(1.3); }
[data-art="dustnav"] img { filter: var(--cc); }
[data-art="bismuth"] { --cc: saturate(.55) hue-rotate(-18deg) brightness(1.05); }
[data-art="bismuth"] img { filter: var(--cc); }
[data-art="dustwitch"] { --cc: hue-rotate(-62deg) saturate(.6) brightness(1.3); }
[data-art="dustwitch"] img { filter: var(--cc); }
[data-art="dustmoon"] { --cc: hue-rotate(-65deg) saturate(.7) brightness(1.15); }
[data-art="dustmoon"] img { filter: var(--cc); }
[data-art="runemoon"] { --cc: hue-rotate(175deg) saturate(.35) brightness(1.25); }
[data-art="runemoon"] img { filter: var(--cc); }
[data-art="runenav"] { --cc: hue-rotate(190deg) saturate(1.15) brightness(1.05); }
[data-art="runenav"] img { filter: var(--cc); }
[data-art="dustnav"] { --cc: hue-rotate(205deg) saturate(1.1) brightness(1.1); }
[data-art="dustnav"] img { filter: var(--cc); }
[data-art="runenav"] { --cc: hue-rotate(190deg) saturate(1) brightness(1.25); }
[data-art="runenav"] img { filter: var(--cc); }
[data-art="scroll"] { --cc: none; }
[data-art="scroll"] img { filter: sepia(.55) hue-rotate(150deg) saturate(1.5) brightness(1.15) contrast(1.05); }
.bans { position: absolute; left: 4px; bottom: 4px; z-index: 2; display: flex; gap: 2px; }
.ban { position: relative; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: rgba(12, 12, 11, .85); border: 1px solid var(--line-strong); }
.ban img { position: static !important; inset: auto !important; width: 11px !important; height: 11px !important; object-fit: contain; pointer-events: none; filter: brightness(1.45) contrast(1.05); }
.ban::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; height: 1.5px; background: #d9745f; transform: translate(-50%, -50%) rotate(-45deg); border-radius: 1px; box-shadow: 0 0 0 .5px rgba(12, 12, 11, .8); }
.cell .ban { pointer-events: auto; }
.bans.big { position: static; gap: 8px; }
.bans.big .ban { width: 40px; height: 40px; }
.bans.big .ban img { width: 26px !important; height: 26px !important; }
.bans.big .ban::after { height: 2px; }
.lockrow { margin: 12px 0 0; }
#cPriceRow[hidden], #cSell[hidden], .lockrow[hidden], .inside[hidden] { display: none !important; }
.inside { margin: 12px 0; }
.inside h4 { margin: 0 0 8px; font: 400 12px/16px var(--sans); color: var(--muted); }
.inside .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.inside .dcell { display: grid; gap: 4px; justify-items: center; }
.inside .dcell .cell { width: 100%; cursor: default; }
.inside .dcell small { color: var(--text-2); font-size: 12px; line-height: 14px; text-align: center; }
.inside .dcell .cell .n { font-size: 12px; }
.cell:hover .glow, .cell[aria-selected="true"] .glow { --go: .85; opacity: .85; }
.cell img { z-index: 1; }
.cell .n { z-index: 3; font-weight: 600; text-shadow: 0 1px 2px #000, 0 0 4px #000, 0 0 6px rgba(0,0,0,.9); }
.cell .fx, .cell .glow { z-index: 0; }
@media (prefers-reduced-motion: no-preference) { :is(.cell, .slot)[data-r="epic"] .glow, :is(.cell, .slot)[data-r="special"] .glow { animation: breathe 4.5s ease-in-out infinite; } }
@keyframes breathe { 50% { opacity: calc(var(--go) * .6); } }

/* ===== особый эффект: расходящееся кольцо и мерцающий ромб (искры и предметы редкости «особое») ===== */
.fx { position: absolute; inset: 0; pointer-events: none; display: none; --fc: #e0ac57; }
[data-fx="spark"] { --fc: #ffd978; }
[data-fx] .fx { display: block; }
.fx::before, .fx::after { content: ""; position: absolute; inset: 6%; background: var(--fc); }
.fx::before { -webkit-mask: url("/assets/shared/ui/fx-ring.png") center / contain no-repeat; mask: url("/assets/shared/ui/fx-ring.png") center / contain no-repeat; opacity: 0; }
.fx::after { inset: 16%; -webkit-mask: url("/assets/shared/ui/fx-star.png") center / contain no-repeat; mask: url("/assets/shared/ui/fx-star.png") center / contain no-repeat; opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  [data-fx] .fx::before { animation: fx-ring 3.6s ease-out infinite; }
  [data-fx] .fx::after { animation: fx-star 2.4s ease-in-out infinite; }
  [data-fx="spark"] .fx::after { animation-duration: 1.7s; }
}
@keyframes fx-ring { 0% { transform: scale(.45); opacity: .0; } 15% { opacity: .55; } 100% { transform: scale(1.05); opacity: 0; } }
@keyframes fx-star { 0%, 100% { transform: scale(.75) rotate(0deg); opacity: .35; } 50% { transform: scale(1.15) rotate(45deg); opacity: .95; } }
[data-fx] img { z-index: 1; }
.cell[data-fx] .glow, .slot[data-fx] .glow, .well[data-fx] .glow { --go: .8; }

/* ===== фигура и надетое снаряжение ===== */
.slot[data-eq] { cursor: pointer; }
.slot[data-eq][aria-selected="true"] { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass), 0 0 14px color-mix(in srgb, var(--brass) 35%, transparent); }
.pickhint { display: inline-flex; align-items: center; gap: 10px; padding: 0 12px; height: 30px; border: 1px solid var(--brass); background: color-mix(in srgb, var(--brass) 12%, transparent); color: var(--text); font-size: 13px; }
.pickhint[hidden] { display: none !important; }
.pickhint button { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }
.eq-head { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; padding-right: 28px; }
.eq-sec { margin-top: 14px; }
.eq-sec > h4 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; font: 700 13px/18px var(--serif); letter-spacing: .03em; color: var(--text); }
.eq-sec > h4 small { font: 12px/16px var(--sans); color: var(--muted); letter-spacing: 0; }
.eq-places { display: grid; gap: 4px; }
.eq-pl { border: 1px solid var(--line); background: var(--well); }
.eq-pl > button.row { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 40px; padding: 6px 10px; text-align: left; color: var(--text-2); }
.eq-pl > button.row:hover { background: var(--raised); color: var(--text); }
.eq-pl .ic { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--muted); font-size: 14px; line-height: 1; }
.eq-pl.on .ic { border-color: var(--brass); color: var(--brass); }
.eq-pl .nm { display: grid; gap: 1px; min-width: 0; } .eq-pl .nm b { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eq-pl .nm small { color: var(--muted); font-size: 12px; }
.eq-pl .st { font-size: 12px; color: var(--muted); } .eq-pl.on .st { color: var(--brass); }
.eq-pl.locked { opacity: .55; } .eq-pl.locked > button.row { cursor: default; }
.eq-opts { display: grid; gap: 4px; padding: 0 8px 8px; }
.eq-opts[hidden] { display: none; }
.eq-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); background: var(--bg); }
.eq-opt span { color: var(--text-2); font-size: 13px; } .eq-opt b { color: var(--text); font-weight: 500; }
.eq-opt button, .eq-mini { height: 28px; padding: 0 10px; border: 1px solid var(--line-strong); color: var(--text); font-size: 12px; }
.eq-opt button:hover, .eq-mini:hover { border-color: var(--brass); color: var(--brass); }
.eq-socks { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding: 4px 0; }
.eq-sk { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px dashed var(--line-strong); background: var(--well); color: var(--muted); font-size: 22px; transition: border-color .12s, box-shadow .12s; }
.eq-sk:hover, .eq-sk.pick { border-color: var(--brass); color: var(--brass); }
.eq-sk.pick { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 25%, transparent); }
.eq-sk.full { border-style: solid; border-color: var(--rc, var(--line-strong)); }
.eq-sk.full img { width: 38px; height: 38px; object-fit: contain; pointer-events: none; }
.eq-sk .n { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); font-size: 11px; color: var(--text-2); }
.eq-link { width: 18px; height: 3px; flex: none; background: var(--brass); opacity: .7; }
.eq-gap { width: 10px; flex: none; }
.eq-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.eq-empty { padding: 10px 12px; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }


/* ===== яркость иконок: чуть светлее, насыщеннее и контрастнее, цветокор предметов сохраняется ===== */
[data-art="scroll"] { --cc: sepia(.55) hue-rotate(150deg) saturate(1.5) brightness(1.15) contrast(1.05); }
.cell img, .slot img, .card .well img, .inside .cell img, .eq-head .well img, .eq-sk img { filter: var(--cc, none) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(1.22) saturate(1.12) contrast(1.05); }
.cell.rune img, .grid.runes .cell img { filter: var(--cc, none) brightness(1.12) saturate(1.08); }
.cell:hover img, .cell[aria-selected="true"] img { filter: var(--cc, none) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(1.3) saturate(1.15) contrast(1.05); }

/* ===== alt-skin (пак Dark Templar) ===== */

/* ===== альтернативная версия: окна и рамки из пака UI MMORPG Dark Templar (Wenrexa), блики GlareFlare ===== */
/* Alegreya SC (SIL OFL): кириллица и латиница, заголовки */
@font-face { font-family: "Alegreya SC"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/shared/ui/fontcyr.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya SC"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/shared/ui/fontlat.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #06080a; --surface: #0c1013; --raised: #151b20; --well: #080b0d;
  --line: rgba(205, 222, 232, .10); --line-strong: rgba(190, 212, 226, .24);
  --text: #e3eaef; --text-2: #a3afb8; --muted: #6f7c86;
  --brass: #9fc0d2; --brass-ink: #0b1218; --danger: #e8a070;
  --hp: #86a9bd;
  --serif: "Alegreya SC", Georgia, serif;
}
/* фон: текстура камня, сверху тёплый красный отсвет, по краям затемнение */
body { background: radial-gradient(ellipse 80% 55% at 50% -8%, rgba(40, 72, 94, .34), transparent 70%), linear-gradient(rgba(4, 6, 9, .38), rgba(4, 6, 9, .38)), #05070a url("/assets/shared/ui/bg.webp") center top / cover fixed no-repeat; letter-spacing: .01em; }
h1, h2, h3, h4, .who strong, .pg, .view button, .f-tabs button, .h h2, .cat small, .btn { font-family: var(--serif); font-weight: 700; letter-spacing: .02em; }
h1, h2, h3 { font-size: 1.12em; }
.who strong { font-size: 17px; }
.pg, .view button, .f-tabs button { font-size: 14px; }
.top { border-bottom: 0; position: relative; padding-bottom: 6px; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(150, 182, 202, .7) 18%, rgba(150, 182, 202, .7) 82%, transparent); }

/* вкладки: чёткая красная черта вместо растянутой картинки */
.pg, .view button, .cat, .f-tabs button { border-radius: 0; background: none; box-shadow: none; position: relative; }
.pg[aria-current="page"], .pg[aria-current="true"], .view button[aria-current="true"], .cat[aria-selected="true"], .f-tabs button[aria-pressed="true"] { background: linear-gradient(rgba(150, 182, 202, 0), rgba(150, 182, 202, .22)); box-shadow: inset 0 -2px 0 var(--brass), 0 8px 14px -10px rgba(150, 182, 202, .8); color: #e4f0f6; }
.pg:hover, .view button:hover, .cat:hover, .f-tabs button:hover { background: linear-gradient(rgba(150, 182, 202, 0), rgba(150, 182, 202, .1)); }

/* окна: рваная рамка пака, заголовок встаёт в красную полосу */
.panel, .card, .f-bench > .card { background: none; border: 0; border-style: solid; border-color: transparent; border-width: 52px 28px 30px; padding: 0;
  border-image: url("/assets/shared/ui/panel.webp") 125 60 60 60 fill / 52px 28px 30px 28px stretch; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 18px rgba(40, 72, 94, .35)); }
.panel > .h:first-child { margin: -40px 0 14px; }
.panel > .h:first-child h2 { text-shadow: 0 1px 3px #000; }
.hero-panel { border-width: 40px 26px 28px; border-image-width: 40px 26px 28px 26px; }
.card { border-width: 40px 26px 28px; border-image: url("/assets/shared/ui/obj.webp") 70 fill / 40px 26px 28px 26px stretch; }
.card .well { background: none; border: 0; }
.card-x { background: url("/assets/shared/ui/close.webp") center / contain no-repeat; color: transparent; }
.card-x svg { opacity: 0; }

/* ячейки: нарисованы CSS (без растра, поэтому чёткие на любом размере) */
.cell, .slot, .card .well, .empty-cell, .grid.runes .cell { border: 1px solid rgba(190, 212, 226, .13); border-radius: 3px; background:
  radial-gradient(ellipse at 50% 42%, rgba(60, 40, 38, .55), rgba(9, 7, 7, .96) 78%), #0a0808;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), inset 0 -10px 16px -10px rgba(0, 0, 0, .9); transition: border-color .12s, filter .12s; }
.card .well { background-size: 100% 100%; }
.cell:hover, .slot:hover { border-color: rgba(190, 212, 226, .38); filter: brightness(1.3); }
.cell[aria-selected="true"] { border-color: var(--brass); filter: brightness(1.2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), 0 0 0 1px var(--brass), 0 0 14px rgba(150, 182, 202, .45); }
.cell[aria-selected="true"]::before { display: none; }
.slot[data-r="uncommon"], .slot[data-r="epic"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), inset 0 -10px 16px -10px rgba(0, 0, 0, .9); }
.slot.empty { border-style: solid; opacity: .5; }
.empty-cell { opacity: .35; box-shadow: none; }
.cell::after { left: 5px; top: 5px; width: 7px; height: 7px; box-shadow: 0 0 6px var(--rc, transparent); }
.cell:not([data-art]) img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.grid.runes .cell { border-color: rgba(190, 212, 226, .13); }
.grid.runes .cell[aria-selected="true"] { border-color: var(--brass); }

/* кнопки: форма мазка из пака, заливка CSS */
.btn, .f-actions .btn { position: relative; isolation: isolate; height: 46px; border: 0; border-radius: 0; background: none; color: var(--text); text-shadow: 0 1px 2px #000; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#1d252c, #0a0e11); -webkit-mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; transition: filter .12s; }
.btn:hover { background: none; color: #fff; }
.btn:hover::before { filter: brightness(1.45); }
.btn.primary::before, .btn.warn::before { background: linear-gradient(#35495a, #16212b); }
.btn.warn { color: #f0f8fc; }
.seg button, .tiers button, .place { border-radius: 0; background-color: rgba(255, 255, 255, .02); }
.seg button.chosen, .tiers button.chosen, .place.chosen { border-color: var(--brass); background: rgba(150, 182, 202, .14); }

/* мелочи */
.chip, .cur span, .f-chip { border-radius: 2px; background: rgba(0, 0, 0, .35); }
.bar { border-radius: 0; background: #05070a; box-shadow: inset 0 0 0 1px rgba(150, 182, 202, .35); }
.bar i { background: linear-gradient(#9fc0d2, #4f6d82); }
.facts div, .attr { border-top-color: rgba(150, 182, 202, .18); }
.plus { border-radius: 0; border-color: var(--brass); color: #dcebf3; }
.f-hero, .smith { border-radius: 0; }
.link, .tip { border-radius: 0; }

/* блики GlareFlare: без лучей-крестов. Только мягкое гало, без бегущих бликов */
.fx::after { inset: 4%; background: no-repeat center / contain; mix-blend-mode: screen; opacity: .16; -webkit-mask: radial-gradient(circle at center, #000 0, rgba(0,0,0,.55) 38%, transparent 66%); mask: radial-gradient(circle at center, #000 0, rgba(0,0,0,.55) 38%, transparent 66%); }
[data-fx="special"] .fx::after { background-image: url("/assets/shared/ui/f11.webp"); }
[data-fx="spark"] .fx::after { background-image: url("/assets/shared/ui/f09.webp"); }
.fx::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-fx] .fx::after { animation: fx-soft 4.6s ease-in-out infinite !important; }
}
@keyframes fx-soft { 0%, 100% { transform: scale(.97); opacity: .1; } 50% { transform: scale(1); opacity: .2; } }
.cell[data-r="epic"] .glow, .slot[data-r="epic"] .glow { background: var(--r-epic); }
.btn { font-size: 16px; }
.btn small { font-family: var(--sans); font-weight: 400; }
.cat small { font-family: var(--sans); font-weight: 600; font-size: 12px; }

/* ===== масштаб как у оригинала: рамка рисуется ВНЕ раскладки, размеры колонок, ячеек и шрифтов прежние ===== */
.panel, .f-bench > .card { border-width: 40px 1px 1px; padding: 0 15px 15px;
  border-image: url("/assets/shared/ui/panel.webp") 125 60 60 60 fill / 40px 14px 16px 14px stretch; border-image-outset: 0 12px 14px 12px; }
.panel > .h:first-child { margin: -30px 0 12px; }
.hero-panel { border-width: 24px 1px 1px; border-image-width: 24px 14px 16px 14px; }
.card { border-width: 14px 1px 1px; padding: 0 15px 15px; border-image: url("/assets/shared/ui/obj.webp") 70 fill / 22px 16px 18px 16px stretch; border-image-outset: 8px 12px 14px 12px; }
.f-bench > .card { border-image: url("/assets/shared/ui/obj.webp") 70 fill / 22px 16px 18px 16px stretch; border-width: 14px 1px 1px; }
.pg, .view button, .f-tabs button { font-size: 13px; letter-spacing: 0; }
.who strong { font-size: 16px; }
.h h2 { font-size: 18px; }
.btn, .f-actions .btn { height: 40px; font-size: 15px; }
.cat small { font-size: 11px; }
.top { padding-bottom: 0; }

/* ===== альт: телефон ===== */
@media (max-width: 760px) {
  .panel, .f-bench > .card, .card, .nodecard, .vcard { border-width: 30px 1px 1px; padding: 0 12px 12px; border-image-width: 30px 12px 14px 12px; border-image-outset: 0 8px 10px 8px; }
  .hero-panel { border-width: 18px 1px 1px; border-image-width: 18px 12px 14px 12px; }
  .panel > .h:first-child { margin: -22px 0 10px; }
  .canvas { border-width: 1px; padding: 0; border-image: none; border: 1px solid rgba(150, 182, 202, .3); background-color: #05070a; }
  .mapbox { border-width: 1px; padding: 0; border-image: none; border: 1px solid rgba(150, 182, 202, .3); }
  .pg { font-size: 12px; padding: 0 9px; }
  .app { padding-left: 16px; padding-right: 16px; }
}

/* полноформатные панели с артом: без рваной рамки, фон возвращаем */
.panel.scene, .panel.canvas, .panel.mapbox { border: 1px solid rgba(150, 182, 202, .3); border-image: none; padding: 0; filter: none; }
.panel.scene { background: #0a0a09 url("") center / cover; }
.panel.canvas { background: radial-gradient(circle at 50% 50%, #17181a, #05070a 72%); }

/* цветокор иконок (руны, пыль, висмут) сохраняется вместе с тенью */
.cell[data-art] img, .slot[data-art] img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)) var(--cc, ); }

/* ===== единый формат кнопок: мазок из пака, заливка и состояния только через ::before ===== */
.btn, .btn.primary, .btn.warn, .btn.confirm, .btn.big, .btn.big.primary { background: none !important; border: 0 !important; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.btn { min-height: 44px; height: auto; padding: 8px 22px; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--text); }
.btn > span { font: inherit; line-height: inherit; }
.btn small { font-family: var(--sans); font-weight: 400; font-size: 12px; opacity: .8; }
.btn::before { background: linear-gradient(#1d252c, #0a0e11); }
.btn:hover::before { filter: brightness(1.4); }
.btn.primary::before, .btn.big.primary::before { background: linear-gradient(#46627a, #1f3040); }
.btn.warn::before { background: linear-gradient(#35495a, #16212b); }
.btn.confirm::before { background: linear-gradient(#6b8fa8, #2d4558); }
.btn.primary, .btn.warn, .btn.confirm { color: #f4fbff; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn[disabled]:hover::before { filter: none; }
/* пара кнопок под ползунком: при подтверждении вторая занимает всю строку */
.up .two { grid-template-columns: 1fr 1fr; gap: 10px; }
.up .two:has(.btn.confirm) { grid-template-columns: 1fr; }
.up .two:has(.btn.confirm) #apply { order: 2; }
.up .two:has(.btn.confirm) .btn.confirm { order: 1; }
.up .btn { padding: 8px 14px; font-size: 14px; }
.actions { gap: 10px; }
.actions .btn { width: 100%; }
/* разные роли: основное красное, опасное тёмное с красным текстом, второстепенное тёмное */
.btn.warn::before { background: linear-gradient(#1a242c, #0b0f13); }
.btn.warn { color: #a9c6d6; }
.btn:not(.primary):not(.warn):not(.confirm) { color: #e3eaef; }
.up .two { grid-template-columns: 1fr; }
.up .two #all { order: 2; }
.up .two #apply { order: 1; }
.up .two:has(.btn.confirm) .btn.confirm { order: 1; }
.up .two:has(.btn.confirm) #apply { order: 2; }

/* подсказка над соседними ячейками: наведённая ячейка (с фильтром) образует свой слой, поднимаем его выше всех */
.cell:hover, .cell:focus-visible, .cell[aria-selected="true"]:hover { z-index: 40; }
.cell[data-name]:hover::before { z-index: 41; background: #0a0707; border-color: rgba(150, 182, 202, .5); font-family: var(--sans); box-shadow: 0 6px 16px rgba(0, 0, 0, .7); }
.top::before { background: rgba(5, 7, 10, .94); border-bottom: 1px solid rgba(150, 182, 202, .35); }

/* ===== плашки в стиле окон профиля: рваная рамка пака, но крупной картинкой и с уменьшением, поэтому чёткая ===== */
.card, .card.runec, .nodecard, .vcard, .f-bench > .card { border: 0 solid transparent !important; border-width: 40px 24px 26px !important; padding: 0 !important; border-radius: 0;
  border-image: url("/assets/shared/ui/panel.webp") 125 60 60 60 fill / 40px 24px 26px 24px stretch !important; border-image-outset: 0 !important; background: none !important; box-shadow: none !important;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55)); position: relative; }
.card > *, .nodecard > *, .vcard > * { position: relative; }
.card > .card-x { position: absolute; top: -34px; right: -16px; }
.card #itemBody, .card #runeBody, .card #equipBody { padding-top: 6px; }
.card::before, .nodecard::before, .vcard::before { display: none; }
.card-x { z-index: 3; background: rgba(150, 182, 202, .08) !important; border: 1px solid rgba(150, 182, 202, .35); color: var(--brass) !important; border-radius: 50%; width: 32px; height: 32px; }
.card-x svg { opacity: 1 !important; width: 16px; height: 16px; stroke-width: 2; }
.card-x:hover { background: rgba(150, 182, 202, .2) !important; color: #f0f8fc !important; }
.card .well { background: radial-gradient(circle at 50% 55%, #1e2a33, #080b0d 75%) !important; border: 1px solid rgba(150, 182, 202, .25) !important; }
@media (max-width: 760px) { .card, .card.runec, .nodecard, .vcard { padding: 14px !important; } }
.eq-pl, .eq-opt { border-radius: 2px; } .eq-sk { background: radial-gradient(circle, #161e25, #07090b); }
.eq-opt button, .eq-mini { background: rgba(150, 182, 202, .08); }

.card, .nodecard, .vcard { overflow-x: hidden !important; scrollbar-width: none; }
.card::-webkit-scrollbar, .nodecard::-webkit-scrollbar, .vcard::-webkit-scrollbar { display: none; }

/* мешочек пыли крупнее */
.card .top2:has(#cWell[data-art="scroll"]) { grid-template-columns: 120px 1fr; gap: 14px; }
.card #cWell[data-art="scroll"] { width: 120px; height: 120px; }
.card #cWell[data-art="scroll"] img { width: 96px; height: 96px; }
.cell[data-art="scroll"] img { inset: 8%; width: 84%; height: 84%; }
@media (max-width: 760px) { .card, .card.runec, .nodecard, .vcard { border-width: 30px 16px 20px !important; border-image-width: 30px 16px 20px 16px !important; } }

/* ===== скругление ячеек, редкость у надетого, выравнивание правой карточки, отступ от профиля ===== */
.cell, .slot, .empty-cell, .grid.runes .cell, .card .well, .eq-sk { border-radius: 9px; }
.cell::after { left: 7px; top: 7px; }
.cell[aria-selected="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), 0 0 0 1px var(--brass), 0 0 14px rgba(150, 182, 202, .4); }
.slot[data-r] { --rc: var(--r-common); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), inset 0 -3px 0 var(--rc), inset 0 -18px 18px -16px color-mix(in srgb, var(--rc) 40%, transparent); }
.slot[data-r="uncommon"] { --rc: var(--r-uncommon); } .slot[data-r="rare"] { --rc: var(--r-rare); } .slot[data-r="epic"] { --rc: var(--r-epic); } .slot[data-r="special"] { --rc: var(--r-special); }
.slot[data-r][aria-selected="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), inset 0 -3px 0 var(--rc), 0 0 0 1px var(--brass), 0 0 14px rgba(150, 182, 202, .4); }
@media (min-width: 880px) {
  .card, .card.runec { top: 0 !important; }
  .main > #bag { margin-left: 28px; }
}

/* ===== яркость иконок: чуть светлее, насыщеннее и контрастнее, цветокор предметов сохраняется ===== */
[data-art="scroll"] { --cc: sepia(.55) hue-rotate(150deg) saturate(1.5) brightness(1.15) contrast(1.05); }
.cell img, .slot img, .card .well img, .inside .cell img, .eq-head .well img, .eq-sk img { filter: var(--cc, none) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(1.22) saturate(1.12) contrast(1.05); }
.cell.rune img, .grid.runes .cell img { filter: var(--cc, none) brightness(1.12) saturate(1.08); }
.cell:hover img, .cell[aria-selected="true"] img { filter: var(--cc, none) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(1.3) saturate(1.15) contrast(1.05); }

/* наведение и выбор: без двойного осветления (фильтр ячейки снят, иконка светлеет чуть-чуть) */
.cell:hover, .slot:hover, .cell[aria-selected="true"], .slot[aria-selected="true"] { filter: none; }
.cell:hover, .slot:hover { background-color: rgba(150, 182, 202, .08); }
.cell:hover img, .cell[aria-selected="true"] img { filter: var(--cc, none) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(1.3) saturate(1.14) contrast(1.05); }

/* ===== ползунок распределения очков из пака Dark Templar ===== */
input[type=range]::-webkit-slider-runnable-track { background: url("/assets/shared/ui/sltrack.webp") center / 100% 100% no-repeat; box-shadow: none; border-radius: 0; }
input[type=range]::-moz-range-track { background: url("/assets/shared/ui/sltrack.webp") center / 100% 100% no-repeat; box-shadow: none; border-radius: 0; }
input[type=range]::-webkit-slider-thumb { width: 48px; height: 20px; margin-top: 4px; background: url("/assets/shared/ui/slthumb.webp") center / 100% 100% no-repeat; border-radius: 0; box-shadow: none; }
input[type=range]::-moz-range-thumb { width: 48px; height: 20px; background: url("/assets/shared/ui/slthumb.webp") center / 100% 100% no-repeat; border-radius: 0; box-shadow: none; }
.alloc .ghost { border-radius: 3px; }

/* ===== гадание: кнопки, пузыри, шрифты и окно «Подробнее» в виде профиля ===== */
.dv-btn.btn { flex-direction: column; gap: 1px; }
.dv-btn.btn span { font: inherit; }
.dopen.btn { height: auto; min-height: 40px; padding: 6px 20px; font-size: 14px; color: var(--text); }
.dopen.btn::before { background: linear-gradient(#1d252c, #0a0e11); }
.cur span, .chip-s { border-radius: 0; background: rgba(0, 0, 0, .45); border: 1px solid rgba(150, 182, 202, .25); font-family: var(--serif); font-weight: 700; letter-spacing: .02em; font-size: 13px; }
.cur b, .chip-s b { font-weight: 700; }
.dv-detail { border: 0; border-radius: 0; background: url("/assets/shared/ui/obj.webp") center / 100% 100% no-repeat; box-shadow: none; padding: 22px 34px 20px; }
.dv-detail h3 { font-family: var(--serif); font-weight: 700; letter-spacing: .02em; }
.dv-card-name { border: 0; border-radius: 0; background: rgba(5, 8, 10, .88); box-shadow: 0 0 0 1px rgba(150, 182, 202, .3), 0 8px 18px rgba(0, 0, 0, .6); font-family: var(--serif); font-weight: 700; letter-spacing: .02em; font-size: 12px; }
.dv-reveal h2 { font-family: var(--serif); font-weight: 700; letter-spacing: .02em; }
.chip-s { height: 30px; padding: 0 12px; }
.chips-top { gap: 8px; }

/* индикатор вкладок в виде альт-версии */
.tab-ind { border-radius: 0; background: linear-gradient(rgba(150, 182, 202, 0), rgba(150, 182, 202, .22)); box-shadow: inset 0 -2px 0 var(--brass), 0 8px 14px -10px rgba(150, 182, 202, .6); }
/* подпись под «Гадать» читаемая */
.dv-btn.btn small { opacity: 1; color: #eaf4fa; font-weight: 600; font-size: 12px; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
/* «Искры» и «Лунное серебро» на плашках из пака */
.chip-s { position: relative; isolation: isolate; border: 0; background: none; height: 36px; padding: 0 20px; color: #eaf4fa; text-shadow: 0 1px 2px #000; }
.chip-s::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#1d252c, #0a0e11); -webkit-mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; }

/* гадание: контур голубой, «Пропустить» как остальные кнопки */
#pDiv { --hf-line: rgba(150, 182, 202, .45); --hf-line-soft: rgba(150, 182, 202, .32); --hf-gold: #9fc0d2; --hf-gold-bright: #cfe6f2; --hf-gold-soft: #4d6677; }
.dv-stage { border-color: rgba(150, 182, 202, .42); box-shadow: inset 0 0 0 1px rgba(150, 182, 202, .08), 0 0 22px rgba(120, 170, 200, .12); }
.dv-stage .dv-skip.btn { position: absolute; top: 14px; right: 14px; z-index: 3; min-height: 40px; height: auto; padding: 6px 20px; font-size: 14px; color: var(--text); }
.dv-skip.btn::before { background: linear-gradient(#1d252c, #0a0e11); }
.tab-ind.bar { border-radius: 0; background: var(--brass); box-shadow: 0 0 10px rgba(159, 192, 210, .5); }