/* Sandrone's character dossier: garnet, warm ink and readable equipment panels. */
body[data-view="character"] { --bg-card:#261f27; --bg-deep:#1e1921; --bg-raised:#312530; --bg-border:#624652; --bg-title:#f1e0d1; --bg-copy:#cfb9c1; --bg-accent:#e0aebd; --bg-garnet:#78354c; --bg-wash:#7d354825; }
.bg-character-heading,.bg-guide,.bg-skills { color:var(--bg-copy); }
:is(.bg-character-heading,.bg-guide,.bg-skills,.bg-detail-tabs) svg { width:19px; height:19px; flex-shrink:0; }
.bg-overline { display:block; color:var(--bg-accent); font-size:12px; letter-spacing:1px; font-weight:600; line-height:1.7; }
.bg-character-heading { padding:28px 0 0; }
.bg-character-heading .breadcrumbs { margin:0 0 18px; font-size:13px; }
.bg-hero { display:grid; grid-template-columns:minmax(0,1fr) 35%; gap:30px; min-height:300px; border:1px solid var(--bg-border); border-radius:18px; padding:30px 36px; background:radial-gradient(ellipse at 83% 45%,var(--bg-wash),transparent 58%),var(--bg-card); overflow:hidden; }
.bg-hero-copy { min-width:0; align-self:center; }
.bg-hero-kicker { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.bg-hero-kicker .stars { margin:0; font-size:11px; letter-spacing:3px; }
.bg-hero h1 { margin:13px 0 8px; color:var(--bg-title); font:400 clamp(34px,3.5vw,49px)/1.15 Georgia,serif; letter-spacing:-1px; }
.bg-character-title { color:var(--bg-copy); font-size:15px; line-height:1.7; margin:0 0 17px; }
.bg-character-meta { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:16px 0 21px; }
.bg-character-meta > span { display:flex; align-items:center; gap:7px; border:1px solid var(--bg-border); border-radius:7px; padding:7px 10px; font-size:12px; line-height:1.5; color:var(--bg-copy); background:var(--bg-deep); }
.bg-character-meta .element { color:var(--el); width:17px; }
.bg-character-meta > span > svg { width:15px; height:15px; }
.bg-hero-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bg-hero-actions .button { min-height:43px; font-size:13px; padding:12px 16px; }
.bg-hero-actions .icon-button { width:43px; height:43px; border:1px solid var(--bg-border); border-radius:9px; color:var(--bg-copy); background:var(--bg-deep); }
.bg-hero-actions .icon-button.saved { background:var(--bg-garnet); color:#ffe8e1; border-color:#bd8297; }
.bg-lore { margin-top:16px; font-size:13px; line-height:1.85; }
.bg-lore summary { color:var(--bg-copy); cursor:pointer; width:fit-content; padding:5px 0; }
.bg-lore p { max-width:650px; padding-top:7px; margin:0; color:var(--bg-copy); }
.bg-hero-art { display:grid; place-items:center; position:relative; align-self:stretch; min-height:235px; }
.bg-hero-art::before { content:''; position:absolute; width:225px; height:225px; border:1px solid #b9897e55; border-radius:50%; box-shadow:0 0 0 12px #bc85850a,0 0 0 35px #bc858507; }
.bg-hero-art > span { position:absolute; color:#b8838e33; font-size:200px; line-height:1; }
.bg-hero-art img { z-index:1; width:100%; height:260px; object-fit:contain; object-position:center; filter:drop-shadow(0 12px 18px #0a041333); }
.bg-traveler-select { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--bg-copy); margin:0 0 18px; }
.bg-traveler-select select { font-size:13px; min-height:40px; color:var(--bg-title); background:var(--bg-deep); border-color:var(--bg-border); }
.bg-detail-tabs { display:flex; align-items:center; gap:32px; border-bottom:1px solid var(--bg-border); padding:0 5px; position:sticky; top:var(--header-offset); background:var(--bg); z-index:8; overflow-x:auto; scrollbar-width:thin; margin-top:12px; }
.bg-detail-tabs button { position:relative; display:block; white-space:nowrap; flex-shrink:0; padding:19px 0; min-height:60px; border:0; background:transparent; color:var(--bg-copy); font-size:14px; font-weight:600; }
.bg-detail-tabs button.active { color:var(--bg-accent); }
.bg-detail-tabs button.active::after { content:''; position:absolute; height:3px; width:100%; bottom:0; left:0; border-radius:3px; background:var(--bg-accent); }
.bg-guide { padding-top:25px; }
.bg-build-overview { padding:25px 28px; border:1px solid var(--bg-border); border-radius:15px; background:linear-gradient(120deg,var(--bg-wash),transparent 65%),var(--bg-card); }
.bg-overview-title { display:flex; gap:20px; align-items:start; justify-content:space-between; }
.bg-overview-title h2,.bg-skills-heading h2 { color:var(--bg-title); font:400 30px/1.3 Georgia,serif; margin:8px 0 9px; }
.bg-overview-title p,.bg-skills-heading p { color:var(--bg-copy); font-size:14px; line-height:1.8; margin:0; }
.bg-version { padding:8px 11px; border:1px solid var(--bg-border); border-radius:7px; white-space:nowrap; color:var(--bg-copy); font-size:12px; line-height:1.5; background:var(--bg-deep); }
.bg-build-selector { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin:22px 0; }
.bg-build-selector > div { display:flex; gap:8px; flex-wrap:wrap; }
.bg-build-selector button { display:flex; gap:9px; align-items:center; background:var(--bg-deep); border:1px solid var(--bg-border); color:var(--bg-copy); padding:11px 16px; min-height:43px; border-radius:9px; font-size:13px; font-weight:600; }
.bg-build-selector button.active { background:var(--bg-garnet); color:#fff0e8; border-color:#b57a91; }
.bg-build-selector .sd-select-field { min-width:230px; }
.bg-build-selector .sd-select-wrap select { background:var(--bg-deep); border-color:var(--bg-border); color:var(--bg-title); }
.bg-build-scope { font-size:12px; color:var(--bg-copy); line-height:1.7; max-width:480px; }
.bg-summary { display:grid; grid-template-columns:.9fr 1.5fr 1fr; border-top:1px solid var(--bg-border); padding-top:20px; gap:22px; }
.bg-summary > div { min-width:0; padding-left:16px; border-left:2px solid #b5788b80; }
.bg-summary span { display:block; font-size:12px; color:var(--bg-copy); margin-bottom:7px; }
.bg-summary strong { color:var(--bg-title); font-size:14px; line-height:1.6; font-weight:600; }
.bg-build-layout { display:grid; grid-template-columns:minmax(0,1fr) 265px; gap:24px; margin-top:25px; align-items:start; }
.bg-build-main { min-width:0; }
.bg-panel { padding:28px; margin-bottom:24px; border:1px solid var(--bg-border); border-radius:15px; background:var(--bg-card); scroll-margin-top:calc(var(--header-offset) + 82px); }
.bg-section-heading { display:flex; align-items:start; gap:14px; margin-bottom:24px; }
.bg-section-heading > span { display:grid; place-items:center; min-width:35px; height:36px; border:1px solid #ad758665; border-radius:9px; color:var(--bg-accent); font-size:13px; background:var(--bg-wash); }
.bg-section-heading h2 { color:var(--bg-title); font:400 28px/1.25 Georgia,serif; margin:0 0 8px; }
.bg-section-heading p { margin:0; color:var(--bg-copy); font-size:13px; line-height:1.8; }
.bg-weapon-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:24px; }
.bg-weapon-choices button { display:flex; align-items:center; text-align:left; gap:9px; border:1px solid var(--bg-border); border-radius:10px; background:var(--bg-deep); color:var(--bg-title); padding:12px 9px; min-width:0; min-height:83px; }
.bg-weapon-choices button.active { border-color:#c792a5; background:linear-gradient(140deg,var(--bg-wash),transparent),var(--bg-raised); box-shadow:inset 0 -2px #c792a5; }
.bg-weapon-choices img { width:44px; height:50px; object-fit:contain; flex-shrink:0; }
.bg-weapon-choices button > span { min-width:0; flex:1; }
.bg-weapon-choices strong { display:block; font-size:12px; line-height:1.5; color:var(--bg-title); font-weight:600; overflow-wrap:anywhere; }
.bg-weapon-choices small { display:block; font-size:11px; line-height:1.6; color:var(--bg-copy); margin-top:5px; }
.bg-weapon-choices i { align-self:flex-start; color:var(--bg-accent); font-size:12px; font-style:normal; }
.bg-weapon-feature { display:flex; gap:25px; align-items:center; padding:22px; border:1px solid var(--bg-border); border-radius:12px; background:radial-gradient(ellipse at top left,var(--bg-wash),transparent),var(--bg-deep); }
.bg-weapon-art { width:135px; height:145px; flex-shrink:0; display:grid; place-items:center; border-radius:10px; background:radial-gradient(ellipse,#bda38026,transparent 72%); }
.bg-weapon-art img { height:135px; width:125px; object-fit:contain; filter:drop-shadow(0 8px 10px #09071133); }
.bg-weapon-copy { min-width:0; }
.bg-weapon-copy .bg-overline { font-size:11px; }
.bg-weapon-copy .stars { font-size:10px; letter-spacing:2px; margin:6px 0; }
.bg-weapon-copy h3 { font-size:23px; line-height:1.4; color:var(--bg-title); margin:5px 0; }
.bg-weapon-copy p { color:var(--bg-copy); font-size:12px; line-height:1.6; margin:0; }
.bg-weapon-type { display:inline-flex; gap:7px; align-items:center; color:var(--bg-copy); font-size:12px; margin-top:14px; }
.bg-weapon-type svg { width:15px; height:15px; }
.bg-weapon-facts { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:18px 0 21px; border-bottom:1px solid var(--bg-border); margin-bottom:20px; }
.bg-weapon-facts > div { padding:0 14px; border-left:2px solid #a36a7a66; }
.bg-weapon-facts span { display:block; color:var(--bg-copy); font-size:12px; line-height:1.6; }
.bg-weapon-facts strong { display:block; color:var(--bg-title); font-size:22px; line-height:1.5; margin-top:3px; font-weight:500; }
.bg-passive-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; }
.bg-passive-heading h4 { color:var(--bg-title); font-size:15px; line-height:1.6; margin:0; }
.bg-refinements { display:flex; gap:5px; }
.bg-refinements button { min-width:33px; height:33px; border:1px solid var(--bg-border); border-radius:7px; color:var(--bg-copy); font-size:12px; background:var(--bg-deep); }
.bg-refinements button.active { background:var(--bg-garnet); border-color:#bd8297; color:#fff3e8; }
.bg-weapon-effect { color:var(--bg-copy); font-size:14px; line-height:1.95; margin:15px 0; white-space:pre-line; }
.bg-item-link { font-size:13px; margin:3px 0 15px; }
.bg-caption { color:var(--bg-copy); font-size:12px; line-height:1.85; border-top:1px solid var(--bg-border); padding-top:15px; margin:0; }
.bg-artifact-feature { display:flex; align-items:center; gap:23px; padding:18px 20px; background:var(--bg-deep); border:1px solid var(--bg-border); border-radius:12px; }
.bg-artifact-art { flex-shrink:0; width:112px; height:112px; display:grid; place-items:center; background:radial-gradient(ellipse,#b4906733,transparent 70%); }
.bg-artifact-art img { height:100px; width:100px; object-fit:contain; }
.bg-artifact-art > svg { width:70px; height:70px; color:var(--bg-accent); }
.bg-artifact-feature h3 { color:var(--bg-title); font-size:22px; margin:7px 0; line-height:1.4; }
.bg-artifact-feature p { font-size:12px; color:var(--bg-copy); line-height:1.6; margin:0 0 12px; }
.bg-artifact-feature .small-link { font-size:12px; }
.bg-set-bonuses { margin:20px 0 27px; }
.bg-set-bonuses > div { display:flex; gap:13px; align-items:start; padding:14px 0; }
.bg-set-bonuses > div + div { border-top:1px solid var(--bg-border); }
.bg-set-bonuses > div > span { display:grid; place-items:center; min-width:30px; height:30px; border:1px solid #b4847a77; border-radius:7px; color:var(--bg-accent); font-size:13px; }
.bg-set-bonuses p { color:var(--bg-copy); font-size:14px; line-height:1.85; margin:0; white-space:pre-line; }
.bg-set-bonuses strong { display:block; color:var(--bg-title); font-size:13px; margin-bottom:5px; }
.bg-subheading { color:var(--bg-title); font-size:15px; margin:0 0 14px; }
.bg-main-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.bg-main-stats > div { display:flex; flex-direction:column; min-width:0; align-items:flex-start; padding:19px 16px; border:1px solid var(--bg-border); border-radius:10px; background:var(--bg-deep); }
.bg-main-stats svg { color:var(--bg-accent); width:23px; height:23px; margin-bottom:15px; }
.bg-main-stats span { color:var(--bg-copy); font-size:12px; margin-bottom:7px; }
.bg-main-stats strong { color:var(--bg-title); font-size:14px; line-height:1.7; font-weight:600; }
.bg-substats { padding:23px 0; border-bottom:1px solid var(--bg-border); }
.bg-substats h3 { color:var(--bg-title); font-size:14px; margin:0 0 13px; }
.bg-substats ol { list-style:none; display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:0; counter-reset:bg-stat; }
.bg-substats li { display:flex; align-items:center; gap:7px; background:var(--bg-deep); border:1px solid var(--bg-border); border-radius:7px; color:var(--bg-copy); font-size:12px; line-height:1.6; padding:8px 11px; counter-increment:bg-stat; }
.bg-substats li::before { content:counter(bg-stat); color:var(--bg-accent); font-weight:600; font-size:11px; }
.bg-energy { display:flex; gap:12px; align-items:start; padding:22px 0 0; color:var(--bg-accent); }
.bg-energy > svg { margin-top:2px; }
.bg-energy strong { color:var(--bg-title); font-size:14px; }
.bg-energy p { color:var(--bg-copy); font-size:13px; line-height:1.8; margin:7px 0 0; }
.bg-priority-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; }
.bg-priority-group { min-width:0; border:1px solid var(--bg-border); border-radius:10px; background:var(--bg-deep); padding:13px; }
.bg-priority-number { color:var(--bg-accent); font-size:13px; display:flex; align-items:center; gap:9px; padding:0 0 12px; margin-bottom:12px; border-bottom:1px solid var(--bg-border); }
.bg-priority-number small { color:var(--bg-copy); font-size:11px; }
.bg-priority-group button { display:flex; align-items:start; width:100%; text-align:left; gap:9px; border:0; background:transparent; color:var(--bg-title); padding:5px 0; min-width:0; }
.bg-priority-group button + button { border-top:1px solid var(--bg-border); margin-top:12px; padding-top:15px; }
.bg-priority-group button > b { color:var(--bg-accent); font-size:14px; line-height:1.6; }
.bg-priority-group button span { min-width:0; }
.bg-priority-group strong { color:var(--bg-title); font-size:13px; line-height:1.6; display:block; }
.bg-priority-group small { color:var(--bg-copy); font-size:12px; line-height:1.7; display:block; margin-top:5px; }
.bg-priority-group svg { width:14px; height:14px; margin-left:auto; margin-top:4px; }
.bg-priority-text { color:var(--bg-copy); line-height:1.7; }
.bg-priority-text b { color:var(--bg-title); font-size:14px; display:block; }
.bg-priority-text > span { font-size:12px; display:block; margin-top:5px; }
.bg-skill-link { font-size:13px; margin:22px 0; }
.bg-play-note { border:1px solid #a96f7d77; background:var(--bg-wash); border-radius:11px; display:flex; align-items:start; gap:13px; padding:20px; }
.bg-play-note > span { color:var(--bg-accent); margin-top:1px; }
.bg-play-note h3 { color:var(--bg-title); font-size:15px; margin:0 0 9px; }
.bg-play-note p { color:var(--bg-copy); font-size:14px; line-height:1.9; margin:0; }
.bg-guide-aside { min-width:0; position:sticky; top:calc(var(--header-offset) + 83px); }
.bg-contents { padding:20px; border:1px solid var(--bg-border); border-radius:12px; background:var(--bg-card); }
.bg-contents > span { margin-bottom:13px; }
.bg-contents button { display:flex; width:100%; align-items:center; text-align:left; gap:9px; border:0; border-radius:7px; background:transparent; color:var(--bg-copy); padding:13px 5px; font-size:13px; }
.bg-contents button:hover { background:var(--bg-wash); color:var(--bg-title); }
.bg-contents button > span { font-size:11px; color:var(--bg-accent); }
.bg-contents svg { width:16px; height:16px; }
.bg-next { padding:24px 20px; border:1px solid #b07c7977; border-radius:12px; margin-top:16px; background:linear-gradient(130deg,var(--bg-wash),transparent),var(--bg-card); }
.bg-next h3 { color:var(--bg-title); font:400 25px/1.3 Georgia,serif; margin:12px 0; }
.bg-next p { color:var(--bg-copy); font-size:13px; line-height:1.85; margin:0 0 20px; }
.bg-next .button { font-size:12px; width:100%; min-height:43px; }
.bg-next .small-link { font-size:12px; margin-top:16px; }
.bg-guide-source { margin-top:18px; border:1px solid var(--bg-border); border-radius:10px; padding:19px; background:var(--bg-deep); }
.bg-guide-source a { display:block; color:var(--bg-accent); font-size:13px; line-height:1.8; margin-top:8px; text-decoration:underline; text-underline-offset:4px; }
.bg-guide-source p { color:var(--bg-copy); font-size:12px; line-height:1.7; margin:8px 0 0; }
.bg-character-info { margin-top:17px; color:var(--bg-copy); font-size:13px; border:1px solid var(--bg-border); border-radius:10px; padding:16px; }
.bg-character-info summary { cursor:pointer; }
.bg-character-info > div { display:flex; justify-content:space-between; gap:12px; font-size:12px; line-height:1.8; padding-top:15px; }
.bg-character-info strong { color:var(--bg-title); font-weight:500; text-align:right; }
.bg-build-footnote { color:var(--bg-copy); font-size:12px; line-height:1.9; margin:3px 0; }
.bg-skills { padding:30px 0; scroll-margin-top:calc(var(--header-offset) + 75px); }
.bg-skills-heading { display:flex; gap:25px; justify-content:space-between; align-items:start; margin-bottom:24px; }
.bg-ability-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.bg-ability-tabs button { display:flex; gap:14px; align-items:start; padding:20px; text-align:left; border:1px solid var(--bg-border); border-radius:11px; background:var(--bg-card); color:var(--bg-copy); min-width:0; }
.bg-ability-tabs button.active { background:linear-gradient(140deg,var(--bg-wash),transparent),var(--bg-raised); border-color:#c2889c; box-shadow:inset 0 -2px #c2889c; }
.bg-ability-tabs b { display:grid; place-items:center; min-width:33px; height:33px; color:var(--bg-accent); background:var(--bg-deep); border:1px solid var(--bg-border); border-radius:8px; font-size:13px; }
.bg-ability-tabs strong { display:block; color:var(--bg-title); font-size:14px; line-height:1.6; }
.bg-ability-tabs small { display:block; color:var(--bg-copy); font-size:12px; line-height:1.8; margin-top:5px; }
.bg-ability { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(290px,.9fr); gap:0; border:1px solid var(--bg-border); border-radius:15px; overflow:hidden; background:var(--bg-card); }
.bg-ability-description { padding:30px; min-width:0; }
.bg-ability-description h3 { color:var(--bg-title); font:400 28px/1.4 Georgia,serif; margin:12px 0 20px; }
.bg-game-text { color:var(--bg-copy); font-size:14px; line-height:2; white-space:pre-line; overflow-wrap:anywhere; }
.bg-game-text strong { color:var(--bg-title); }
.bg-ability-values { padding:27px; min-width:0; border-left:1px solid var(--bg-border); background:var(--bg-deep); }
.bg-values-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:20px; }
.bg-values-heading h3 { color:var(--bg-title); font-size:17px; margin:0; }
.bg-values-heading > span { color:var(--bg-accent); border:1px solid var(--bg-border); border-radius:7px; padding:7px 10px; font-size:13px; }
.bg-values-heading b { color:var(--bg-accent); }
.bg-level-control { display:block; color:var(--bg-copy); font-size:12px; margin-bottom:18px; }
.bg-level-control input { display:block; width:100%; margin:17px 0 8px; accent-color:#ba748e; cursor:pointer; }
.bg-level-control > span { display:flex; justify-content:space-between; color:var(--bg-copy); font-size:11px; }
.bg-level-control i { font-style:normal; }
.bg-values-table { max-height:540px; overflow-y:auto; scrollbar-width:thin; padding-right:6px; margin-bottom:16px; }
.bg-values-table .skill-stat { gap:18px; padding:12px 0; font-size:12px; line-height:1.8; border-color:var(--bg-border); }
.bg-values-table .skill-stat span { color:var(--bg-copy); min-width:0; }
.bg-values-table .skill-stat b { color:var(--bg-title); font-size:13px; text-align:right; white-space:normal; flex-shrink:0; max-width:56%; }
.bg-passives-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:32px 0 18px; }
.bg-passives-heading h3 { color:var(--bg-title); font:400 27px/1.3 Georgia,serif; margin:0; }
.bg-passives-heading > span { color:var(--bg-copy); font-size:13px; }
.bg-passives { display:grid; grid-template-columns:1fr 1fr; gap:13px; align-items:start; }
.bg-passives details { border:1px solid var(--bg-border); border-radius:11px; background:var(--bg-card); padding:0 22px; }
.bg-passives summary { display:flex; align-items:center; gap:13px; list-style:none; padding:20px 0; cursor:pointer; }
.bg-passives summary::-webkit-details-marker { display:none; }
.bg-passives summary > span { color:var(--bg-accent); font-size:12px; }
.bg-passives strong { color:var(--bg-title); font-size:14px; line-height:1.7; font-weight:600; }
.bg-passives summary i { color:var(--bg-accent); font-style:normal; margin-left:auto; font-size:19px; }
.bg-passives details[open] summary i { transform:rotate(45deg); }
.bg-passives .bg-game-text { padding:0 0 22px; border-top:1px solid var(--bg-border); padding-top:15px; }
.bg-empty { font-size:14px; color:var(--bg-copy); line-height:1.9; }
:root[data-theme="light"] body[data-view="character"] { --bg-card:#fffcf7; --bg-deep:#f7eee9; --bg-raised:#f4e1e7; --bg-border:#d4bbc4; --bg-title:#492a3c; --bg-copy:#735261; --bg-accent:#86334e; --bg-garnet:#87354e; --bg-wash:#f1d9e1a6; }
:root[data-theme="light"] .bg-hero { box-shadow:0 9px 25px #77354a0c; }
:root[data-theme="light"] .bg-hero h1,:root[data-theme="light"] .bg-overview-title h2,:root[data-theme="light"] .bg-skills-heading h2,:root[data-theme="light"] .bg-section-heading h2,:root[data-theme="light"] .bg-next h3,:root[data-theme="light"] .bg-ability-description h3 { color:var(--bg-title); }
:root[data-theme="light"] .bg-build-selector button.active,:root[data-theme="light"] .bg-refinements button.active { color:#fff4e9; }
:root[data-theme="light"] .bg-panel { box-shadow:0 7px 22px #723e5008; }
:root[data-theme="light"] .bg-character-meta .element { color:color-mix(in srgb,var(--el) 80%,#533248); }
@media(max-width:1100px) {
 .bg-build-layout { grid-template-columns:minmax(0,1fr) 225px; gap:18px; }
 .bg-panel { padding:23px; }
 .bg-weapon-choices { grid-template-columns:1fr; gap:8px; }
 .bg-weapon-choices button { min-height:68px; padding:9px 12px; }
 .bg-weapon-choices img { width:43px; height:46px; }
 .bg-weapon-choices strong { font-size:13px; }
 .bg-weapon-choices small { margin-top:2px; }
 .bg-priority-groups { grid-template-columns:1fr; }
 .bg-priority-group { display:grid; grid-template-columns:90px 1fr; gap:12px; }
 .bg-priority-number { display:block; border-bottom:0; border-right:1px solid var(--bg-border); margin:0; padding:5px 10px 0 0; }
 .bg-priority-number small { margin-top:6px; }
 .bg-main-stats { gap:8px; }
 .bg-main-stats > div { padding:15px 12px; }
 .bg-ability-tabs button { padding:15px; gap:10px; }
 .bg-ability { grid-template-columns:minmax(0,1fr) minmax(280px,.9fr); }
}
@media(max-width:820px) {
 .bg-hero { padding:25px; grid-template-columns:minmax(0,1fr) 32%; gap:15px; }
 .bg-hero-art img { height:230px; }
 .bg-hero-art::before { width:160px; height:160px; }
 .bg-hero-actions .button { font-size:12px; padding:11px 12px; }
 .bg-build-layout { display:flex; flex-direction:column; }
 .bg-guide-aside { position:static; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:15px; }
 .bg-contents { grid-column:1/-1; display:flex; align-items:center; justify-content:space-around; flex-wrap:wrap; gap:10px; }
 .bg-contents > span { width:100%; margin:0; }
 .bg-contents button { width:auto; }
 .bg-next,.bg-guide-source,.bg-character-info { margin:0; }
 .bg-weapon-choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .bg-weapon-choices button { padding:11px 8px; }
 .bg-weapon-choices img { width:38px; }
 .bg-weapon-choices strong { font-size:12px; }
 .bg-priority-groups { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .bg-priority-group { display:block; }
 .bg-priority-number { display:flex; border:0; border-bottom:1px solid var(--bg-border); padding:0 0 12px; margin:0 0 12px; }
 .bg-priority-number small { margin:0; }
 .bg-ability { grid-template-columns:1fr; }
 .bg-ability-values { border:0; border-top:1px solid var(--bg-border); }
}
@media(max-width:560px) {
 .bg-character-heading { padding-top:19px; }
 .bg-character-heading .breadcrumbs { font-size:12px; gap:9px; margin-bottom:15px; }
 .bg-hero { grid-template-columns:1fr; padding:24px 20px 0; gap:4px; border-radius:14px; }
 .bg-hero h1 { font-size:35px; margin-top:12px; }
 .bg-character-title { font-size:14px; }
 .bg-hero-kicker { gap:13px; }
 .bg-overline { font-size:11px; letter-spacing:.8px; }
 .bg-hero-actions { gap:8px; }
 .bg-hero-actions .button { flex:1; min-width:120px; font-size:12px; padding-inline:10px; }
 .bg-hero-actions .icon-button { width:40px; height:40px; }
 .bg-character-meta { margin:16px 0; gap:7px; }
 .bg-character-meta > span { font-size:11px; padding:6px 8px; }
 .bg-hero-art { min-height:150px; height:160px; overflow:hidden; margin-top:0; }
 .bg-hero-art img { height:180px; width:100%; object-position:center top; }
 .bg-hero-art::before { height:150px; width:150px; }
 .bg-hero-art > span { font-size:150px; }
 .bg-lore { margin-top:12px; font-size:12px; }
 .bg-detail-tabs { gap:24px; margin-top:5px; }
 .bg-detail-tabs button { font-size:13px; min-height:55px; padding:16px 0; }
 .bg-guide { padding-top:20px; }
 .bg-build-overview { padding:22px 18px; }
 .bg-overview-title { flex-wrap:wrap; gap:14px; }
 .bg-overview-title h2,.bg-skills-heading h2 { font-size:27px; }
 .bg-overview-title p,.bg-skills-heading p { font-size:13px; }
 .bg-version { font-size:11px; }
 .bg-build-selector { margin:20px 0; gap:12px; }
 .bg-build-selector > div { width:100%; }
 .bg-build-selector button { padding:10px 13px; font-size:12px; }
 .bg-build-selector .sd-select-field { width:100%; }
 .bg-build-scope { font-size:12px; }
 .bg-summary { grid-template-columns:1fr; gap:17px; padding-top:20px; }
 .bg-summary > div { padding-left:13px; }
 .bg-summary span { font-size:12px; margin-bottom:4px; }
 .bg-summary strong { font-size:14px; }
 .bg-build-layout { margin-top:20px; }
 .bg-panel { padding:22px 17px; border-radius:13px; margin-bottom:20px; }
 .bg-section-heading { gap:10px; margin-bottom:20px; }
 .bg-section-heading h2 { font-size:25px; }
 .bg-section-heading p { font-size:13px; line-height:1.8; }
 .bg-section-heading > span { min-width:30px; height:33px; font-size:12px; }
 .bg-weapon-choices { grid-template-columns:1fr; }
 .bg-weapon-choices button { gap:11px; padding:8px 12px; min-height:64px; }
 .bg-weapon-choices img { width:44px; height:48px; }
 .bg-weapon-choices strong { font-size:13px; }
 .bg-weapon-choices small { font-size:11px; }
 .bg-weapon-feature { padding:18px 12px; gap:12px; }
 .bg-weapon-art { width:90px; height:110px; }
 .bg-weapon-art img { width:85px; height:105px; }
 .bg-weapon-copy h3 { font-size:20px; line-height:1.4; }
 .bg-weapon-copy p { font-size:11px; }
 .bg-weapon-type { margin-top:8px; }
 .bg-weapon-facts { gap:10px; }
 .bg-weapon-facts > div { padding:0 10px; }
 .bg-weapon-facts span { font-size:11px; }
 .bg-weapon-facts strong { font-size:20px; }
 .bg-weapon-effect { font-size:13px; }
 .bg-passive-heading { gap:12px; }
 .bg-artifact-feature { padding:15px 12px; gap:12px; }
 .bg-artifact-art { width:76px; height:86px; }
 .bg-artifact-art img { width:75px; height:80px; }
 .bg-artifact-feature h3 { font-size:19px; }
 .bg-artifact-feature .bg-overline { font-size:10px; }
 .bg-set-bonuses p { font-size:13px; }
 .bg-main-stats { grid-template-columns:1fr; gap:8px; }
 .bg-main-stats > div { display:grid; grid-template-columns:25px minmax(0,1fr); gap:3px 11px; padding:14px; }
 .bg-main-stats svg { grid-row:1/3; margin:0; align-self:center; width:22px; height:22px; }
 .bg-main-stats span { margin:0; font-size:12px; }
 .bg-main-stats strong { grid-column:2; font-size:14px; }
 .bg-priority-groups { grid-template-columns:1fr; gap:9px; }
 .bg-priority-group { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; }
 .bg-priority-number { display:block; border:0; border-right:1px solid var(--bg-border); padding:5px 9px 0 0; margin:0; }
 .bg-priority-number small { font-size:10px; margin-top:4px; }
 .bg-priority-group strong { font-size:13px; }
 .bg-priority-group small { font-size:12px; }
 .bg-play-note { padding:17px 13px; gap:10px; }
 .bg-play-note p { font-size:13px; }
 .bg-guide-aside { grid-template-columns:1fr; }
 .bg-contents { display:block; }
 .bg-contents > span { margin-bottom:8px; }
 .bg-contents button { width:100%; }
 .bg-skills { padding-top:23px; }
 .bg-skills-heading { display:block; margin-bottom:21px; }
 .bg-skills-heading .bg-version { display:inline-block; margin-top:16px; }
 .bg-ability-tabs { gap:7px; }
 .bg-ability-tabs button { flex-direction:column; gap:9px; padding:12px 9px; }
 .bg-ability-tabs b { min-width:29px; height:29px; font-size:12px; }
 .bg-ability-tabs strong { font-size:12px; line-height:1.5; }
 .bg-ability-tabs small { display:none; }
 .bg-ability-description { padding:24px 19px; }
 .bg-ability-description h3 { font-size:25px; }
 .bg-game-text { font-size:13px; line-height:1.95; }
 .bg-ability-values { padding:23px 18px; }
 .bg-values-heading h3 { font-size:16px; }
 .bg-values-table .skill-stat { font-size:12px; gap:14px; }
 .bg-values-table .skill-stat b { font-size:12px; }
 .bg-passives { grid-template-columns:1fr; }
 .bg-passives details { padding-inline:18px; }
 .bg-passives strong { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .bg-guide *, .bg-skills * { scroll-behavior:auto; } }
.bg-mobile-jumps { display:none; }
.bg-generic-talents button { padding:15px 12px; flex-direction:column; gap:10px; }
.bg-generic-talents strong { font-size:13px; }
.bg-generic-talents small { font-size:12px; }
@media(max-width:820px) {
 .bg-mobile-jumps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:20px; }
 .bg-mobile-jumps button { min-width:0; display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 7px; min-height:44px; font-size:12px; border:1px solid var(--bg-border); border-radius:8px; background:var(--bg-card); color:var(--bg-copy); }
 .bg-mobile-jumps svg { width:16px; height:16px; }
}
@media(max-width:560px) {
 .bg-hero { display:block; position:relative; padding:23px 20px; }
 .bg-hero-copy { position:relative; }
 .bg-hero-kicker { display:block; max-width:calc(100% - 95px); }
 .bg-hero-kicker .stars { margin-top:7px; }
 .bg-hero h1 { max-width:calc(100% - 85px); font-size:31px; }
 .bg-character-title { max-width:calc(100% - 90px); }
 .bg-hero-art { position:absolute; top:27px; right:16px; height:110px; min-height:0; width:90px; margin:0; overflow:visible; pointer-events:none; }
 .bg-hero-art img { width:100%; height:110px; object-position:center; }
 .bg-hero-art::before { width:88px; height:88px; }
 .bg-hero-art > span { font-size:95px; }
 .bg-hero-actions .button { flex:none; min-width:0; width:calc(50% - 4px); padding:11px 8px; gap:7px; }
}
.bg-weapon-choices:has(>button:only-child) { grid-template-columns:1fr; }
/* Source-backed stat targets and complete, conditional artifact combinations. */
.bg-first-stats { margin-top:24px; padding-top:24px; border-top:1px solid var(--bg-border); }
.bg-stat-heading { margin:24px 0 16px; }
.bg-first-stats .bg-stat-heading { margin-top:0; }
.bg-stat-heading h3 { margin:6px 0 0; font-size:19px; line-height:1.5; color:var(--bg-title); }
.bg-stat-preview > div { display:grid; grid-template-columns:25px 1fr; column-gap:12px; padding:17px; }
.bg-stat-preview svg { grid-row:1 / 3; margin:3px 0 0; }
.bg-stat-preview strong { grid-column:2; font-size:16px; }
.bg-main-stats p { font-size:13px; line-height:1.85; color:var(--bg-copy); margin:12px 0 0; }
.bg-substats h3 { font-size:16px; line-height:1.6; }
.bg-substats h3 span { display:block; margin-top:5px; font-size:13px; font-weight:400; color:var(--bg-copy); }
.bg-substats li { font-size:14px; padding:10px 12px; gap:10px; align-items:flex-start; }
.bg-substats li::before { display:grid; place-items:center; flex-shrink:0; width:23px; height:23px; border-radius:50%; background:var(--bg-wash); font-size:13px; }
.bg-substat-preview { padding:20px 0; border-bottom:0; }
.bg-first-stats .bg-caption { font-size:13px; }
.bg-fixed-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.bg-fixed-stats > div { display:grid; grid-template-columns:24px 1fr; align-items:center; gap:5px 10px; border:1px solid var(--bg-border); border-radius:10px; background:var(--bg-deep); padding:15px; }
.bg-fixed-stats svg { grid-row:1 / 4; color:var(--bg-accent); }
.bg-fixed-stats span,.bg-fixed-stats small { font-size:13px; line-height:1.6; }
.bg-fixed-stats strong { font-size:15px; color:var(--bg-title); }
.bg-weapon-condition,.bg-set-condition { background:var(--bg-wash); padding:17px 19px; border-left:3px solid var(--bg-accent); border-radius:0 9px 9px 0; font-size:14px; line-height:1.9; color:var(--bg-copy); margin:20px 0; }
.bg-weapon-condition strong,.bg-set-condition strong { color:var(--bg-title); display:block; font-size:14px; margin-bottom:5px; }
.bg-artifact-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:20px; }
.bg-artifact-choices button { display:flex; align-items:center; gap:12px; padding:14px; min-width:0; background:var(--bg-deep); border:1px solid var(--bg-border); border-radius:10px; text-align:left; color:var(--bg-title); }
.bg-artifact-choices button.active { background:var(--bg-raised); border-color:var(--bg-accent); box-shadow:inset 0 -2px var(--bg-accent); }
.bg-artifact-choices strong { display:block; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.bg-artifact-choices small { display:block; color:var(--bg-accent); font-size:12px; margin-bottom:6px; }
.bg-set-icons { display:flex; flex-shrink:0; align-items:center; }
.bg-set-icons img { width:45px; height:45px; object-fit:contain; }
.bg-set-icons img + img { margin-left:-12px; }
.bg-combo { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.bg-combo .bg-artifact-feature { flex-direction:column; align-items:flex-start; gap:8px; padding:17px; }
.bg-combo .bg-artifact-art { width:75px; height:75px; }
.bg-combo .bg-artifact-art img { width:75px; height:75px; }
.bg-combo .bg-artifact-feature h3 { font-size:18px; }
.bg-combo .bg-set-bonuses { margin:5px 0 0; }
.bg-weapon-choices strong { font-size:13px; }
.bg-weapon-choices small { font-size:12px; }
@media(max-width:700px) {
 .bg-artifact-choices { grid-template-columns:1fr; }
 .bg-stat-preview > div { padding:15px; }
 .bg-fixed-stats { grid-template-columns:1fr; }
 .bg-combo { grid-template-columns:1fr; gap:8px; }
 .bg-combo .bg-artifact-feature { flex-direction:row; align-items:center; gap:12px; }
 .bg-first-stats { margin-top:20px; padding-top:20px; }
 .bg-substats li { font-size:13px; width:100%; }
}