[hidden] { display: none !important; }
:root {
  --bg: #120f0c; --bg2: #18130f; --panel: #1d1813; --panel2: #271f18; --panel3: #30261d; --line: #3b3127; --line2: #574634;
  --text: #ece3d3; --muted: #9d907c; --dim: #6f6454;
  --gold: #d4a654; --gold2: #f2d18f; --good: #7fcf8f; --bad: #e0705f; --blue: #7fb2e0;
  --r-common: #d6cdbd; --r-uncommon: #52c86e; --r-rare: #4ea6ee; --r-very-rare: #c26bea; --r-legendary: #eba64f; --r-story: #ead65a;
  --miss: #4a3a2e; --hit: #7fa36a; --crit: #f2c25c;
  --head: "Cinzel", Georgia, serif; --body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scrollbar-color: #4a3b2b #15110d; }
body { margin: 0; color: var(--text); font: 15px/1.4 var(--body);
  background: radial-gradient(ellipse at 50% -10%, #2b2015 0, transparent 60%), radial-gradient(ellipse at 100% 100%, #1d140d 0, transparent 50%), var(--bg);
  background-attachment: fixed; min-height: 100vh; }
h2 { font: 700 14px/1 var(--head); color: var(--gold); letter-spacing: .14em; text-transform: uppercase; margin: 6px 2px 12px;
  display: flex; align-items: center; gap: 10px; }
h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); }
h3 { font: 700 13px/1.2 var(--head); color: var(--gold2); margin: 0 0 10px; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
h3 .aside { margin-left: auto; font: 500 12px var(--body); color: var(--muted); letter-spacing: 0; }
button, select, input { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; }
button { cursor: pointer; background: linear-gradient(#4b3a24, #3a2d1c); border-color: #6b5432; transition: filter .15s, transform .1s; }
button:hover { filter: brightness(1.2); }
button:active { transform: translateY(1px); }
button.ghost { background: transparent; }
button.mini { padding: 0 8px; font-size: 13px; line-height: 22px; }
input:focus, select:focus { outline: 1px solid var(--gold); }
input[type=range] { accent-color: var(--gold); padding: 0; background: none; border: none; }
select { max-width: 100%; }
img { user-select: none; -webkit-user-drag: none; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .dim { color: var(--dim); }

.top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 18px;
  background: linear-gradient(#211a13ee, #15110dee); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; backdrop-filter: blur(6px); }
.brand { font: 700 20px var(--head); color: var(--text); display: flex; align-items: center; gap: 8px; }
.brand span { color: var(--gold); }
.brand-d20 { width: 26px; height: 28px; filter: drop-shadow(0 0 6px #d4a65466); }
.buildbar { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; margin: 14px 18px 0; padding: 14px 20px;
  border: 1px solid var(--line2); border-radius: 14px; position: relative; overflow: hidden;
  background: linear-gradient(110deg, #2d2116 0%, #1c1611 45%, #251a12 100%); box-shadow: 0 10px 40px #0008, inset 0 1px #ffffff0d; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 50%, #d4a65422, transparent 40%); pointer-events: none; }
.hero-who { display: flex; align-items: center; gap: 14px; position: relative; }
.portrait { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); background: #0006;
  box-shadow: 0 0 0 4px #00000055, 0 0 22px #d4a65444; }
.hero-name { font: 700 19px var(--head); color: var(--gold2); }
.hero-classes { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.cbadge { display: flex; align-items: center; gap: 5px; background: #00000040; border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px 2px 3px; font-size: 13px; }
.cbadge img { width: 24px; height: 24px; }
.hero-dmg { text-align: center; position: relative; }
.hero-dmg .lbl { font: 500 11px var(--head); letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.hero-dmg .big { font: 700 56px/1 var(--head); color: var(--gold2); text-shadow: 0 0 24px #f2d18f55, 0 2px 0 #0008; font-variant-numeric: tabular-nums; }
.hero-dmg .sub { font-size: 13px; margin-top: 4px; }
.hero-dmg .sub b { color: var(--text); }
.tipline { font-size: 12.5px; margin-top: 5px; padding: 2px 10px; border-radius: 20px; display: inline-block; cursor: pointer; }
.tipline.bad { background: #e0705f22; color: #f0a090; border: 1px solid #e0705f55; }
.tipline.good { background: #7fcf8f18; color: var(--good); border: 1px solid #7fcf8f44; }
.hero-target { display: flex; gap: 12px; align-items: center; position: relative; min-width: 250px; }
.shield { width: 62px; height: 70px; flex: none; display: grid; place-items: center; font: 700 22px var(--head); color: var(--text);
  background: linear-gradient(#4a3a28, #2a2017); clip-path: path("M31 0 L62 9 L62 34 C62 52 48 63 31 70 C14 63 0 52 0 34 L0 9 Z");
  position: relative; }
.shield small { position: absolute; top: 9px; font: 500 9px var(--body); color: var(--muted); letter-spacing: .1em; }
.shield span { margin-top: 8px; }
.hero-target .tname { font: 700 15px var(--head); color: var(--text); }
.hero-target input[type=range] { width: 160px; }

/* ---------- layout ---------- */
.grid { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(360px, 1.05fr) minmax(400px, 1.25fr); gap: 16px; padding: 16px 18px; align-items: start; }
@media (max-width: 1320px) { .grid { grid-template-columns: 1fr 1fr; } .grid > .col:last-child { grid-column: 1 / -1; } }
.col { min-width: 0; }
@media (max-width: 820px) { .grid { grid-template-columns: minmax(0, 1fr); padding: 12px; } .hero { grid-template-columns: 1fr; margin: 12px; text-align: center; }
  .hero-who, .hero-target { justify-content: center; } }
.card { background: linear-gradient(#211b15, #1b1611); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px;
  box-shadow: 0 6px 24px #0005, inset 0 1px #ffffff08; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.foot { color: var(--dim); font-size: 12px; padding: 4px 18px 24px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }

/* ---------- chips & switches ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--panel2); cursor: pointer; font-size: 13.5px; transition: all .15s; user-select: none; }
.chip:hover { border-color: var(--line2); background: var(--panel3); }
.chip.on { border-color: var(--gold); background: linear-gradient(#4a3920, #33281a); color: var(--gold2); box-shadow: 0 0 12px #d4a65433; }
.chip img { width: 20px; height: 20px; border-radius: 4px; }
.chip.dis { opacity: .45; pointer-events: none; }

/* ---------- раса ---------- */
.races { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.race { text-align: center; cursor: pointer; padding: 6px 2px; border-radius: 10px; border: 1px solid transparent; transition: all .15s; font-size: 12.5px; }
.race img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); display: block; margin: 0 auto 4px; transition: all .15s; filter: saturate(.7); }
.race:hover img { border-color: var(--line2); filter: none; }
.race.on { background: #d4a65414; border-color: #d4a65455; color: var(--gold2); }
.race.on img { border-color: var(--gold); filter: none; box-shadow: 0 0 14px #d4a65466; }
.race-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* ---------- характеристики ---------- */
.abils { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.abil { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 6px; text-align: center; overflow: hidden;
  background: linear-gradient(#2a2119, #1e1813); }
.abil .bg { position: absolute; right: -14px; top: -10px; width: 74px; opacity: .17; pointer-events: none; }
.abil .nm { font: 700 12px var(--head); letter-spacing: .12em; color: var(--muted); }
.abil .sc { font: 700 30px/1.05 var(--head); color: var(--gold2); }
.abil .md { display: inline-block; font-size: 12.5px; padding: 0 7px; border-radius: 10px; background: #0005; color: var(--text); }
.abil .ctl { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; color: var(--muted); }
.abil .rb { display: flex; justify-content: center; gap: 4px; margin-top: 5px; }
.abil .rb span { font-size: 11px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; color: var(--muted); }
.abil .rb span.on { border-color: var(--gold); color: var(--gold2); background: #d4a65422; }
.abil.boost .sc { color: #9fe0ff; text-shadow: 0 0 10px #7fd3f055; }
.pbar { height: 6px; border-radius: 3px; background: #0006; overflow: hidden; margin: 2px 0 10px; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, #a77d36, var(--gold2)); transition: width .3s; }
.pbar.over i { background: var(--bad); }

/* ---------- уровни ---------- */
.track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 6px; margin-bottom: 12px; }
.node { position: relative; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--line); background: radial-gradient(#2f251b, #17120e);
  display: grid; place-items: center; cursor: pointer; transition: all .15s; }
.node img { width: 78%; height: 78%; object-fit: contain; }
.node .lv { position: absolute; bottom: -3px; right: -3px; font: 700 11px var(--head); background: #120f0c; border: 1px solid var(--line2);
  border-radius: 10px; padding: 0 5px; color: var(--muted); }
.node.dot::after { content: ""; position: absolute; top: 1px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 6px var(--gold); }
.node.need::after { background: var(--bad); box-shadow: 0 0 6px var(--bad); }
.node:hover { border-color: var(--line2); transform: translateY(-1px); }
.node.sel { border-color: var(--gold); box-shadow: 0 0 0 3px #d4a65433, 0 0 16px #d4a65455; }
.node.empty { border-style: dashed; opacity: .5; font: 700 18px var(--head); color: var(--muted); }
.lvl-edit { border-top: 1px solid var(--line); padding-top: 12px; }
.lvl-edit .title { font: 700 13px var(--head); color: var(--gold2); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; margin-bottom: 10px; }
.cls { text-align: center; padding: 6px 2px 4px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; font-size: 12px; transition: all .15s; color: var(--muted); }
.cls img { width: 40px; height: 40px; display: block; margin: 0 auto 2px; filter: grayscale(.6) brightness(.85); transition: all .15s; }
.cls:hover img { filter: none; } .cls:hover { color: var(--text); }
.cls.on { border-color: var(--gold); background: #d4a65414; color: var(--gold2); }
.cls.on img { filter: drop-shadow(0 0 6px #d4a65488); }
.cls.subc img { width: 46px; height: 46px; }
.choice { margin: 8px 0; }
.choice > .lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.lvl-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- кукла ---------- */
.doll { display: grid; grid-template-columns: 74px 1fr 74px; gap: 10px; align-items: start; }
.doll .side { display: flex; flex-direction: column; gap: 8px; }
.doll .center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 100%; position: relative; }
.silhouette { width: 100%; max-width: 190px; aspect-ratio: .62; border-radius: 50% 50% 14px 14px / 30% 30% 14px 14px; position: relative;
  background: radial-gradient(ellipse at 50% 30%, #3a2c1e 0, #1a140f 70%); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.silhouette img.pt { width: 82%; opacity: .9; filter: drop-shadow(0 0 20px #000); border-radius: 50%; }
.silhouette .stats { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.pill { background: #000a; border: 1px solid var(--line2); border-radius: 14px; padding: 1px 9px; font-size: 12.5px; }
.pill b { color: var(--gold2); }
.weapons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.wset { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #0002; }
.wset .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.wset .pair { display: flex; gap: 8px; }
.slot { width: 74px; height: 74px; border-radius: 10px; position: relative; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(#2c231a, #15110d 75%); border: 1px solid var(--line); transition: all .15s; flex: none; }
.slot:hover { border-color: var(--gold); transform: translateY(-1px); }
.slot img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 2px 3px #000); }
.slot .ph { font-size: 11px; color: var(--dim); text-align: center; line-height: 1.1; padding: 4px; }
.slot .fxdot { position: absolute; top: 3px; right: 5px; color: var(--good); font-size: 11px; }
.slot.r-common { border-color: #6d6558; } .slot.r-uncommon { border-color: var(--r-uncommon); box-shadow: inset 0 0 14px #52c86e33; }
.slot.r-rare { border-color: var(--r-rare); box-shadow: inset 0 0 16px #4ea6ee3a; } .slot.r-very-rare { border-color: var(--r-very-rare); box-shadow: inset 0 0 18px #c26bea44; }
.slot.r-legendary { border-color: var(--r-legendary); box-shadow: inset 0 0 20px #eba64f55, 0 0 12px #eba64f33; } .slot.r-story { border-color: var(--r-story); box-shadow: inset 0 0 16px #ead65a44; }
.slot.wide { width: 100%; }
.rar-common { color: var(--r-common); } .rar-uncommon { color: var(--r-uncommon); } .rar-rare { color: var(--r-rare); }
.rar-very-rare { color: var(--r-very-rare); } .rar-legendary { color: var(--r-legendary); } .rar-story { color: var(--r-story); }

/* эффекты */
.fxitem { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid #2c241c; }
.fxitem:last-child { border-bottom: none; }
.fxitem > img { width: 36px; height: 36px; object-fit: contain; }
.fxitem .nm { font-weight: 700; font-size: 14px; }
.sw { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; cursor: pointer; font-size: 13.5px; }
.sw .knob { flex: none; width: 30px; height: 17px; border-radius: 10px; background: #3a3027; position: relative; transition: background .2s; margin-top: 1px; }
.sw .knob::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #9d907c; transition: all .2s; }
.sw.on .knob { background: #6e8f4f; } .sw.on .knob::after { left: 15px; background: #e9f5dc; }
.sw .fxv { color: var(--good); } .sw:not(.on) .fxv { color: var(--muted); }
.sw .cond { display: block; color: var(--dim); font-size: 12px; }
.note { color: var(--dim); font-size: 12.5px; padding: 2px 0 2px 38px; }
.note::before { content: "— "; }

/* расходники */
.cgroup { margin-bottom: 10px; }
.cgroup .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.ctiles { display: flex; flex-wrap: wrap; gap: 6px; }
.ctile { width: 54px; height: 54px; border-radius: 10px; border: 1px solid var(--line); background: radial-gradient(#2c231a, #15110d 75%);
  display: grid; place-items: center; cursor: pointer; transition: all .15s; position: relative; }
.ctile img { width: 44px; height: 44px; object-fit: contain; filter: grayscale(.7) brightness(.7); transition: all .2s; }
.ctile:hover img { filter: none; }
.ctile.on { border-color: var(--gold); box-shadow: 0 0 14px #d4a65466, inset 0 0 12px #d4a65433; }
.ctile.on img { filter: drop-shadow(0 0 6px #f2d18faa); }
.ctile .t { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; text-align: center; color: var(--muted); padding: 2px; }

/* ---------- бой ---------- */
.target-row { display: flex; gap: 10px; align-items: center; }
.resists { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.res { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 1px 8px 1px 2px; border-radius: 12px; border: 1px solid var(--line); background: #0003; }
.res img { width: 18px; height: 18px; }
.res.immune { border-color: #e0705f88; color: #f0a090; } .res.resist, .res.resnm { border-color: #d4a65466; } .res.vuln { border-color: #7fcf8f88; color: var(--good); }
details summary { cursor: pointer; color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 10px; font-size: 12.5px; margin-top: 8px; }
.res-grid label { display: flex; justify-content: space-between; gap: 4px; align-items: center; }
.res-grid select, .res-grid input { padding: 1px 4px; font-size: 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg span { padding: 4px 10px; cursor: pointer; font-size: 13px; background: var(--panel2); border-right: 1px solid var(--line); transition: background .15s; }
.seg span:last-child { border-right: none; }
.seg span.on { background: linear-gradient(#5a4428, #3d2f1d); color: var(--gold2); }
.toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 6px; margin-top: 10px; }
.tog { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
  background: var(--panel2); font-size: 13.5px; transition: all .15s; user-select: none; }
.tog img { width: 28px; height: 28px; border-radius: 6px; filter: grayscale(.8) brightness(.7); transition: all .2s; }
.tog:hover { border-color: var(--line2); }
.tog.on { border-color: var(--gold); background: linear-gradient(#3e301e, #2a2117); color: var(--gold2); box-shadow: 0 0 10px #d4a65322; }
.tog.on img { filter: none; }

/* хотбар */
.hotbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.hslot { width: 92px; text-align: center; cursor: pointer; font-size: 12px; }
.hslot .ic { width: 64px; height: 64px; margin: 0 auto 4px; border-radius: 12px; display: grid; place-items: center; position: relative;
  border: 2px solid #3f7d3a; background: radial-gradient(#26301f, #121810); transition: all .15s; }
.hslot.bonus .ic { border-color: #b8742a; background: radial-gradient(#33261a, #17110b); }
.hslot.extra .ic { border-color: #5a86c8; background: radial-gradient(#1f2633, #10141b); }
.hslot .ic img { width: 54px; height: 54px; object-fit: contain; border-radius: 8px; }
.hslot .ic .mark { position: absolute; top: -8px; left: -8px; width: 20px; height: 20px; border-radius: 50%; font: 700 11px/18px var(--head);
  background: #2b4a27; border: 1px solid #5ea152; color: #d6f5cf; }
.hslot.bonus .ic .mark { background: #4a3017; border-color: #d18a3a; color: #ffe0b8; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; line-height: 22px; }
.hslot:hover .ic { transform: translateY(-2px); box-shadow: 0 6px 16px #0008; }
.hslot .nm { color: var(--text); line-height: 1.15; min-height: 28px; }
.hslot .gr { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

/* popover меню */
.pop { position: fixed; z-index: 70; background: #1a1511f5; border: 1px solid var(--gold); border-radius: 10px; box-shadow: 0 12px 40px #000c;
  max-height: 420px; overflow: auto; min-width: 260px; padding: 4px; animation: pop .14s ease; backdrop-filter: blur(4px); }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.pop .grp { font: 700 11px var(--head); letter-spacing: .1em; color: var(--gold); padding: 6px 8px 3px; text-transform: uppercase; }
.pop .it { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.pop .it:hover, .pop .it.on { background: #3a2e20; }
.pop .it img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
.pop .it .meta { margin-left: auto; color: var(--muted); font-size: 12px; }

/* результаты */
.atk { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; transition: background .15s; }
.atk:hover { background: #ffffff06; border-color: var(--line); }
.atk > img, .atk > .noimg { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #0004; }
.atk .nm { font-weight: 700; font-size: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.atk .meta { font-size: 12.5px; color: var(--muted); }
.atk .ev { font: 700 20px var(--head); color: var(--gold2); text-align: right; font-variant-numeric: tabular-nums; }
.atk .ev small { display: block; font: 400 11.5px var(--body); color: var(--muted); }
.tag { display: inline-block; padding: 0 7px; border-radius: 8px; background: #33291f; color: var(--muted); font-size: 11px; font-weight: 500; }
.tag.adv { background: #2f4a2a; color: #b8e6a8; } .tag.dis { background: #4a2a24; color: #f0b0a0; } .tag.warn { background: #4a2a24; color: #f0b0a0; }
.hitbar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; margin-top: 5px; background: var(--miss); }
.hitbar i { display: block; height: 100%; transition: width .4s ease; }
.hitbar .h { background: linear-gradient(#93b87c, #6a8f56); } .hitbar .c { background: linear-gradient(#ffe08a, #e0a838); }
.hitlegend { display: flex; gap: 10px; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.hitlegend b { color: var(--text); font-weight: 500; }
.grp-h { font: 700 11px var(--head); letter-spacing: .14em; color: var(--gold); text-transform: uppercase; margin: 10px 0 2px 4px; display: flex; gap: 8px; align-items: center; }
.grp-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.parts { grid-column: 2 / -1; display: none; padding-top: 6px; }
.atk.open .parts { display: block; }
.part { display: grid; grid-template-columns: 20px 1fr auto auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 1px 0; color: var(--muted); }
.part img { width: 18px; height: 18px; }
.part .v { color: var(--text); font-variant-numeric: tabular-nums; }
.dmgbar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; margin: 4px 0 6px; background: #0005; }
.dmgbar i { display: block; height: 100%; }

/* по типам */
.typebar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: #0005; box-shadow: inset 0 1px 3px #000a; }
.typebar i { display: block; height: 100%; transition: width .4s; position: relative; }
.typebar i:hover { filter: brightness(1.25); }
.typelegend { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 10px; margin-top: 10px; font-size: 13px; }
.typelegend div { display: flex; align-items: center; gap: 6px; }
.typelegend img { width: 20px; height: 20px; }
.typelegend b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* график */
.chart svg { display: block; width: 100%; height: auto; }
.chart text { fill: var(--muted); font: 11px var(--body); }
.chart .hov { cursor: pointer; }

/* шансы */
.chance { display: grid; grid-template-columns: 1fr 130px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #2a221b; }
.chance:last-child { border-bottom: none; }
.chance .nm { font-size: 13.5px; }
.chance .nm small { display: block; color: var(--muted); font-size: 12px; }
.chance .bars { display: grid; gap: 3px; }
.cb { display: grid; grid-template-columns: 34px 1fr 40px; gap: 5px; align-items: center; font-size: 11px; color: var(--muted); }
.cb .t { height: 6px; border-radius: 3px; background: #0006; overflow: hidden; }
.cb .t i { display: block; height: 100%; background: var(--hit); transition: width .4s; }
.cb.cur { color: var(--gold2); font-weight: 700; } .cb.cur .t i { background: var(--gold); }
.cb span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- tooltip ---------- */
.tip { position: fixed; z-index: 80; pointer-events: none; max-width: 340px; min-width: 220px; padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(#231c15f7, #17120ef7); border: 1px solid var(--line2); box-shadow: 0 14px 40px #000d, inset 0 1px #ffffff10; font-size: 13px; }
.tip .tt { font: 700 16px var(--head); line-height: 1.2; }
.tip .ty { color: var(--muted); font-size: 12px; margin: 2px 0 8px; }
.tip .big { display: flex; align-items: center; gap: 8px; font: 700 18px var(--head); color: var(--text); margin-bottom: 6px; }
.tip .big img { width: 24px; height: 24px; }
.tip .ln { padding: 2px 0; }
.tip .gfx { color: var(--good); }
.tip .grey { color: var(--dim); }
.tip hr { border: none; border-top: 1px solid var(--line); margin: 8px 0; }
.tip .props { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }

/* ---------- modal: браузер предметов ---------- */
.modal { position: fixed; inset: 0; z-index: 60; background: #000b; display: grid; place-items: center; animation: fade .15s; backdrop-filter: blur(3px); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.browser { width: min(1080px, 96vw); height: min(760px, 92vh); display: grid; grid-template-columns: 230px 1fr; grid-template-rows: auto 1fr;
  background: linear-gradient(#211a14, #17130f); border: 1px solid var(--gold); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px #000;
  animation: pop .18s ease; }
.browser { position: relative; }
.browser .bclose { position: absolute; top: 10px; right: 12px; }
.browser .bhead { padding-right: 56px !important; grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.browser .bhead .ttl { font: 700 16px var(--head); color: var(--gold2); margin-right: 6px; }
.browser .bhead input { flex: 1; min-width: 180px; }
.browser .cats { overflow: auto; border-right: 1px solid var(--line); padding: 6px; }
.browser .cat { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--muted); }
.browser .cat img { width: 30px; height: 30px; object-fit: contain; }
.browser .cat .n { margin-left: auto; font-size: 11px; color: var(--dim); }
.browser .cat:hover { background: #ffffff08; color: var(--text); }
.browser .cat.on { background: #d4a65420; color: var(--gold2); }
.browser .items { overflow: auto; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; }
.icard { border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; cursor: pointer; background: radial-gradient(#2a2119, #16120e 80%);
  transition: all .15s; position: relative; }
.icard:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 8px 20px #0008; }
.icard img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 4px #000); }
.icard .nm { font-size: 13px; font-weight: 700; line-height: 1.15; margin-top: 4px; }
.icard .mt { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.icard.cur { border-color: var(--gold); box-shadow: 0 0 0 2px #d4a65455; }
.icard .fx { position: absolute; top: 5px; right: 7px; color: var(--good); font-size: 12px; }
.icard.r-uncommon { border-color: #52c86e55; } .icard.r-rare { border-color: #4ea6ee55; } .icard.r-very-rare { border-color: #c26bea66; }
.icard.r-legendary { border-color: #eba64f88; } .icard.r-story { border-color: #ead65a66; }
.browser .empty { color: var(--muted); padding: 30px; grid-column: 1 / -1; text-align: center; }
@media (max-width: 720px) { .browser { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; } .browser .cats { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .browser .cat { flex: none; } .browser .cat .n { display: none; } }

/* пикер существ */
.picker { position: relative; flex: 1; min-width: 0; }
.picker input { width: 100%; }
.picker .drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: 360px; overflow: auto; background: #1b1612;
  border: 1px solid var(--gold); border-radius: 8px; margin-top: 2px; box-shadow: 0 8px 24px #000a; }
.picker .opt { padding: 5px 9px; cursor: pointer; display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
.picker .opt:hover, .picker .opt.act { background: #3a2e20; }
.picker .opt .meta { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.stat { background: #0003; border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px; }
.stat .k { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.stat .v { font: 700 17px var(--head); color: var(--gold2); }
@media (max-width: 480px) {
  .doll { grid-template-columns: 64px 1fr 64px; gap: 6px; } .slot { width: 64px; height: 64px; } .slot img { width: 54px; height: 54px; }
  .abils { grid-template-columns: repeat(2, 1fr); } .weapons { grid-template-columns: 1fr; } .hero-dmg .big { font-size: 46px; }
  .toggles { grid-template-columns: 1fr 1fr; } .chance { grid-template-columns: 1fr 110px; } .seg span { padding: 4px 7px; }
}

/* диапазоны урона */
.headline { margin: 2px 0 3px; }
.headline .dmg { font: 700 21px var(--head); color: var(--gold2); font-variant-numeric: tabular-nums; }
.headline .dmg.crit { font-size: 15px; color: #ffd56a; }
.headline .dl { font-size: 12.5px; color: var(--muted); }
.atk .ev { font-size: 14px; color: var(--muted); cursor: help; }
.atk .ev small { font-size: 11px; }
.atk.open .parts { display: block; }
.parts .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin: 6px 0 2px; }
.part { grid-template-columns: 20px 1fr auto 92px; font-size: 13px; padding: 2px 0; border-top: 1px solid #ffffff08; }
.part .v { font-weight: 700; color: var(--text); }
.part .up { color: var(--good); font-size: 12px; } .part .dn { color: var(--bad); font-size: 12px; }
.atk { cursor: default; }

/* ---------- анимации ---------- */
.tip.show { animation: tipIn .16s cubic-bezier(.2,.8,.3,1.2); transform-origin: top left; }
@keyframes tipIn { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.modal.closing { animation: fadeOut .14s ease forwards; }
.modal.closing .browser { animation: popOut .14s ease forwards; }
.pop.closing { animation: popOut .14s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes popOut { to { opacity: 0; transform: scale(.96) translateY(4px); } }
.anim-on { animation: kOn .38s cubic-bezier(.2,.8,.3,1.3); }
.anim-off { animation: kOff .3s ease; }
@keyframes kOn { 0% { transform: scale(.9); } 45% { transform: scale(1.07); box-shadow: 0 0 22px #d4a654aa; } 100% { transform: none; } }
@keyframes kOff { 0% { transform: scale(1.04); opacity: .6; } 100% { transform: none; opacity: 1; } }
.ctile.anim-on img { animation: kGlow .5s ease; }
@keyframes kGlow { 0% { filter: brightness(2.2) drop-shadow(0 0 10px #fff); transform: scale(1.15) rotate(-6deg); } 100% { filter: drop-shadow(0 0 6px #f2d18faa); transform: none; } }
.sw.anim-on .knob::after { animation: knobOn .22s ease; } .sw.anim-off .knob::after { animation: knobOff .22s ease; }
.sw.anim-on .knob { animation: knobBgOn .22s ease; } .sw.anim-off .knob { animation: knobBgOff .22s ease; }
@keyframes knobOn { from { left: 2px; background: #9d907c; } to { left: 15px; } }
@keyframes knobOff { from { left: 15px; background: #e9f5dc; } to { left: 2px; } }
@keyframes knobBgOn { from { background: #3a3027; } } @keyframes knobBgOff { from { background: #6e8f4f; } }
.anim-equip { animation: kEquip .45s cubic-bezier(.2,.8,.3,1.25); }
@keyframes kEquip { 0% { transform: scale(.82) rotate(-5deg); filter: brightness(2); } 60% { transform: scale(1.08) rotate(1deg); } 100% { transform: none; filter: none; } }
.hslot.anim-equip { animation: none; } .hslot.anim-equip .ic { animation: kEquip .45s cubic-bezier(.2,.8,.3,1.25); }
.anim-bump { animation: kBump .45s ease; display: inline-block; }
@keyframes kBump { 0% { transform: translateY(-4px) scale(1.12); color: #fff; text-shadow: 0 0 14px #f2d18f; } 100% { transform: none; } }
.anim-new { animation: kNew .35s ease both; }
@keyframes kNew { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.anim-slide { animation: kSlide .28s ease; }
@keyframes kSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dmgbar i { transition: width .4s ease; }
.chip, .tog, .ctile, .race, .cls, .node, .seg span, .slot, .hslot .ic { will-change: transform; }
.chip:active, .tog:active, .ctile:active, .race:active, .cls:active, .seg span:active, .slot:active { transform: scale(.95); }
.browser .items.intro .icard { animation: kFade .22s ease both; }
@keyframes kFade { from { opacity: 0; } to { opacity: 1; } }
.browser .cat { transition: background .15s, color .15s; }
.browser .cat.on { box-shadow: inset 3px 0 0 var(--gold); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* окно предметов: спокойное появление, без сдвигов фона */
body.modal-open { overflow: hidden; }
.modal { animation: fade .16s ease; }
.browser { animation: kModalIn .18s ease-out; }
@keyframes kModalIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.modal.closing .browser { animation: kModalOut .14s ease-in forwards; }
@keyframes kModalOut { to { opacity: 0; transform: scale(.985); } }
.browser .items, .browser .cats, .pop, .picker .drop { overscroll-behavior: contain; }
.browser .items { scrollbar-gutter: stable; }
.icard:hover { transform: translateY(-2px); }
img.fadein { opacity: 0; transition: opacity .25s ease; } img.fadein.ready { opacity: 1; }

/* кнопки-действия в стиле переключателей */
button.tog.act { font: inherit; font-size: 13.5px; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  padding: 5px 10px 5px 6px; filter: none; }
button.tog.act:hover { border-color: var(--gold); color: var(--gold2); background: linear-gradient(#3e301e, #2a2117); filter: none; }
button.tog.act img { width: 24px; height: 24px; filter: none; }
button.tog.act .ico { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: #0004; color: var(--muted); font-size: 12px; }
button.tog.act.danger:hover { border-color: var(--bad); color: #f0a090; background: linear-gradient(#3e231c, #2a1714); }
button.tog.act.danger:hover .ico { color: var(--bad); }

.tip .tt-ic { display: flex; align-items: center; gap: 8px; }
.tip .tipicon { width: 34px; height: 34px; object-fit: contain; flex: none; }
.tip .ln + .ln { margin-top: 2px; }

/* переключатель языка — по высоте полей шапки */
.buildbar { align-items: stretch; }
#langBox { display: flex; }
#langBox .seg { display: flex; }
#langBox .seg span { display: flex; align-items: center; padding: 0 12px; font: 700 13px var(--head); letter-spacing: .06em; }

/* ключ и облако */
.keybtn.on { color: var(--good); border-color: #7fcf8f66; }
.keybtn.off { color: var(--muted); }
.browser.keybox { width: min(640px, 94vw); height: auto; grid-template-columns: 1fr; grid-template-rows: auto auto; }
.keybox .kbody { padding: 14px 16px 18px; }
.keybox .kbody p { margin: 0 0 12px; }
.keybox .kbody .warn { color: #f0a090; }
.keybox .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 12px 0 5px; }
.keybox .row { flex-wrap: nowrap; }
.keyval { flex: 1; min-width: 0; overflow-wrap: anywhere; background: #0005; border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font-size: 12.5px; color: var(--gold2); }

/* SEO: заголовок и блок «о калькуляторе» */
h1.brand { margin: 0; font-size: 20px; line-height: 1.1; }
h1.brand .b1 { display: block; }
h1.brand .tagline { display: block; font: 500 11.5px var(--body); color: var(--muted); letter-spacing: .02em; margin-top: 2px; }
h1.brand { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
h1.brand .brand-d20 { grid-row: span 2; }
.about { margin: 4px 18px 0; }
.about-in { max-width: 1100px; margin: 0 auto; background: linear-gradient(#1d1813, #17130f); border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; }
.about h2 { font-size: 16px; }
.about h2::after { display: none; }
.about h3 { margin-top: 16px; }
.about p { color: #d8cdbb; margin: 0 0 10px; max-width: 900px; }
.about ul { margin: 0; padding-left: 18px; color: #d8cdbb; }
.about li { margin: 3px 0; }
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
.faq details { border-top: 1px solid var(--line); padding: 8px 0; }
.faq summary { cursor: pointer; color: var(--text); font-weight: 700; font-size: 14.5px; }
.faq details p { margin: 6px 0 0; color: var(--muted); }
@media (max-width: 820px) { .about { margin: 0 12px; } .about-in { padding: 16px; } .about-cols { grid-template-columns: 1fr; } h1.brand .tagline { display: none; } }