/* V4: a full-width journal with a separate hero armory and gem editor. */
main{max-width:none;width:100%;padding:0 28px 24px}
.page-heading{padding:18px 0 23px}
.layout{grid-template-columns:clamp(210px,10.5vw,360px) minmax(530px,1.3fr) minmax(460px,1fr);gap:24px}
.hero-rail{display:flex;flex-direction:column;gap:20px;min-width:0}
.hero-panel{padding:20px 14px}
.hero-panel>h2{font-size:20px;padding-bottom:17px}
.hero-list{gap:10px}
.hero-tile{height:clamp(90px,9dvh,146px)}
.hero-tile strong{font-size:clamp(12px,.75vw,18px);bottom:11px}
.hero-tile .hero-role{font-size:9px!important;left:7px;top:7px}
.hero-tile img{width:113%;left:-6.5%}
.hero-tile .selected-mark{font-size:15px;right:7px;top:7px}
.saved-heading h3{font-size:12px}
.saved-heading,.empty-saves{font-size:10px}
.hero-rail .build-panel{order:0}
.hero-rail .build-panel-heading h2{font-size:17px}
.hero-rail .build-choice{min-height:105px;padding:12px 95px 12px 10px}
.hero-rail .build-choice>b{font-size:15px}
.hero-rail .build-hero-art{width:135px;right:-15px}
.hero-rail .build-choice>b>span{display:block;font-size:9px}
.hero-rail .build-list{max-height:250px}
.hero-rail .build-tabs button{font-size:10px;padding:8px 4px}
.hero-rail .sample-note,.hero-rail .source-link{font-size:9px}
.right-sidebar{display:flex;flex-direction:column;max-height:none;overflow:visible;padding:0;gap:18px}
.journal-frame{margin-top:8px}
.frame-title{min-width:190px;height:32px;top:-18px}
.frame-title h2{font-size:20px}
.frame-inner{padding:17px 16px 12px;margin:9px}
.set-bonus-toggle{display:flex;align-items:center;gap:16px;padding:15px 18px;margin:3px 0 15px;border:1px solid #79653a;background:radial-gradient(ellipse at 10% 50%,#9c742a2b,transparent 75%),linear-gradient(110deg,#222c2d,#11222d);cursor:pointer;position:relative;box-shadow:inset 0 0 0 3px #0b1922,inset 0 0 0 4px #76623b44;isolation:isolate}
.set-bonus-toggle:has(input:checked){border-color:#d4b96a;background:radial-gradient(ellipse at 20% 50%,#c3943b30,transparent 75%),linear-gradient(110deg,#303631,#172c34);box-shadow:inset 0 0 0 3px #0c1a22,inset 0 0 0 4px #ad8e4d66,0 0 20px #d7a8460b}
.set-bonus-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.set-bonus-toggle:has(input:focus-visible){outline:2px solid #efdaa4;outline-offset:4px}
.set-bonus-emblem{font-size:42px;color:#93815a;text-shadow:0 2px 2px #000;line-height:1;flex-shrink:0}
.set-bonus-toggle:has(input:checked) .set-bonus-emblem{color:#f5d78b;text-shadow:0 0 18px #e5af4040,0 2px 2px #000}
.set-bonus-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.set-bonus-copy small{font-size:8px;letter-spacing:1.8px;color:#b2aa8e}
.set-bonus-copy strong{font:600 clamp(15px,1.1vw,25px) Cinzel,Georgia,serif;color:#f0deb1}
.set-bonus-copy>span{font-size:11px;color:#a4b5b6}
.set-bonus-value{font:600 25px Cinzel,Georgia,serif;color:#e0c47d;margin-left:auto;flex-shrink:0}
.set-switch{width:45px;height:24px;flex-shrink:0;position:relative;border:1px solid #677878;border-radius:20px;background:#0a161f}
.set-switch:after{content:'';width:16px;height:16px;background:#637a83;border:1px solid #9cacaa;border-radius:50%;position:absolute;top:2px;left:3px}
.set-bonus-toggle:has(input:checked) .set-switch{border-color:#bba061;background:#a18a424d}
.set-bonus-toggle:has(input:checked) .set-switch:after{left:23px;background:#e0c17e;border-color:#fff1c9;box-shadow:0 0 8px #d0a24166}
.build-toolbar{min-height:65px;padding:9px 11px;margin:0 0 12px;gap:12px}
.build-portrait{height:42px;width:42px}
.active-build b{font-size:15px;max-width:none}
.active-build span{font-size:10px}
.build-total strong{font-size:25px}
.build-total span{font-size:9px}
.tree-grid{--node:clamp(33px,4.4dvh,68px);height:clamp(540px,calc(100dvh - 355px),1250px);padding:8px 0 0}
.column-name{font-size:clamp(10px,.75vw,16px);margin-bottom:7px}
.top-ornament{height:29px}
.top-ornament,.node-stack,.gem-base,.gem-base:before{background-size:clamp(80px,5.3vw,160px) auto}
.gem-power{height:40px;line-height:37px;font-size:clamp(21px,1.35vw,32px);background-size:clamp(85px,6vw,175px) auto}
.gem-base{height:66px;padding-top:5px}
.gem-base img{height:45px;width:45px}
.tree-footnote{font-size:9px;padding-top:7px}
.tree-node .node-rank{height:12px;line-height:10px;font-size:8px;min-width:12px}
.armory-panel{padding:16px 19px 12px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#304d5c3d,transparent 70%),linear-gradient(125deg,#132835,#0c1b26)}
.armory-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #6b684d77;padding:0 0 13px}
.armory-heading small{font-size:8px;letter-spacing:1.5px;color:#91a7ac}
.armory-heading h2{font-size:23px;margin-top:4px}
.armory-heading>span{font-size:10px;color:#a6b4ae}
.armory-stage{height:clamp(410px,48dvh,780px);display:grid;grid-template-columns:84px minmax(0,1fr) 84px;gap:8px;padding:13px 0 10px;position:relative}
.armory-slots{display:grid;grid-template-rows:repeat(7,minmax(0,1fr));gap:6px;position:relative;z-index:2}
.armory-slot{position:relative;min-height:0;padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid #41545f;border-radius:0;background:linear-gradient(135deg,#24333d88,#0b1923);color:#8296a1;box-shadow:inset 0 0 0 2px #0a1721;isolation:isolate}
.armory-slot:before,.armory-slot:after{content:'';position:absolute;width:7px;height:7px;border-color:#7d9297;opacity:.55}
.armory-slot:before{left:2px;top:2px;border-top:1px solid;border-left:1px solid}
.armory-slot:after{right:2px;bottom:2px;border-bottom:1px solid;border-right:1px solid}
.armory-slot:hover{border-color:#bfaa73;background:linear-gradient(135deg,#304653,#132731)}
.armory-slot-icon{height:clamp(22px,3.3dvh,51px);width:clamp(22px,3.3dvh,51px);display:flex;align-items:center;justify-content:center}
.armory-slot-icon img{height:100%;width:100%;object-fit:contain;filter:grayscale(1) brightness(.65);opacity:.8}
.armory-slot-name{font-size:8px;line-height:1.1;color:#96a6ad;white-space:nowrap}
.armory-gem{position:absolute;right:-5px;bottom:4px;width:19px;height:19px;display:flex;align-items:center;justify-content:center;background:#0a1922;border:1px solid #526672;border-radius:2px;font-size:12px;color:#5f737e;z-index:2}
.armory-gem img{height:19px;width:19px;object-fit:contain}
.armory-slot.has-power{border-color:color-mix(in srgb,var(--slot-color) 75%,#394752);background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--slot-color) 33%,transparent),transparent 120%),#10212b;box-shadow:inset 0 0 0 2px #0a1721,0 0 10px color-mix(in srgb,var(--slot-color) 10%,transparent)}
.armory-slot.has-power .armory-slot-icon img{filter:grayscale(1) brightness(1.7);opacity:.95}
.armory-slot.has-power .armory-slot-name{color:color-mix(in srgb,var(--slot-color) 70%,#e1ded1)}
.armory-slot.has-power .armory-gem{border-color:var(--slot-color);color:var(--slot-color);font-size:8px}
.armory-slot.selected{outline:2px solid #eed5a0;outline-offset:2px;z-index:3}
.armory-slot.selected:before,.armory-slot.selected:after{border-color:#f5d58f;opacity:1;width:11px;height:11px}
.armory-figure{position:relative;display:flex;align-items:flex-end;justify-content:center;min-width:0;overflow:hidden;isolation:isolate}
.armory-halo{position:absolute;inset:10% -25% -10%;z-index:-1;background:radial-gradient(ellipse at center,#709db82a,transparent 64%)}
.armory-halo:after{content:'';position:absolute;left:15%;right:15%;bottom:7%;height:12%;border-radius:50%;background:radial-gradient(ellipse,#9bb4be25,transparent 65%);border-bottom:1px solid #b9a57144;transform:perspective(200px) rotateX(45deg)}
#armory-hero{display:block;max-width:100%;width:auto;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 16px #0008);mask-image:linear-gradient(#000 91%,transparent);-webkit-mask-image:linear-gradient(#000 91%,transparent);pointer-events:none}
.armory-art-label{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:6px;letter-spacing:2px;color:#a3b2b8;white-space:nowrap}
.armory-key{display:flex;justify-content:center;gap:20px;font-size:8px;color:#81979f;border-top:1px solid #4d5e5e66;padding-top:10px}
.armory-key span{display:flex;align-items:center;gap:5px}
.armory-key i{height:7px;width:7px;border:1px solid #627684;background:#162632}
.armory-key .filled-key{border-color:#70c9bd;background:#4aa89c88}
.armory-panel{width:100%}
.armory-stage{grid-template-rows:minmax(0,1fr)}
.armory-slots,.armory-figure{min-height:0;height:100%}
#armory-hero{object-position:center center}
.armory-slot-icon{height:clamp(22px,2.5dvh,42px);width:clamp(22px,2.5dvh,42px)}
.gem-panel{padding:0 19px 16px}
.editing-heading{margin:0;padding:13px 0 15px;border-top:0;gap:10px;flex-wrap:wrap}
.editing-heading>img{width:30px;height:30px}
.editing-heading h3{font-size:17px}
.editing-heading small{font-size:7px}
.editing-heading>span{font-size:10px}
#remove-selected-gem{font-size:9px;padding:5px 7px;margin-left:auto;background:none;border-color:#41545c;color:#a8b6ba}
.equipment-step{margin:0 0 15px;align-items:baseline;gap:10px}
.equipment-step h2{font-size:20px;text-align:left;text-transform:none}
.equipment-step>span{font-size:10px;color:#a8b6b8;text-align:right}
.catalog-labels,.gem-row{grid-template-columns:80px repeat(4,minmax(0,1fr));gap:8px}
.catalog-labels{font-size:9px;color:#a3b1b2;line-height:1.4}
.gem-row{padding:5px 0;border-bottom:1px solid #334a532f}
.gem-row>b{font-size:12px}
.gem-choice{height:45px;width:100%;max-width:95px;border-radius:2px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--c) 10%,transparent),transparent 100%),#0c1d28}
.gem-choice img{height:37px;width:37px}
.gem-choice:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,#142630)}
.gem-choice.selected-gem{border-color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),0 0 10px color-mix(in srgb,var(--c) 12%,transparent)}
.gem-choice .equipped-count{font-size:8px;right:3px;bottom:2px}
.essence-panel{border-top:1px solid #4a5b5a;margin-top:14px;padding-top:12px}
.essence-panel summary{font-size:12px}
.essence-panel summary>span{font-size:11px}
.essence-input{font-size:11px}
.essence-input select{font-size:12px;padding:8px}
.no-socket-help{font-size:12px;line-height:1.7}
.modifier-help{font-size:10px}
.unassigned-note{font-size:10px}
[hidden]{display:none!important}
.toast:empty{display:none}
@media(min-width:2200px){
 main{padding:0 34px 28px}.layout{gap:28px}.hero-panel{padding:22px 19px}.hero-panel>h2{font-size:26px}.hero-tile strong{font-size:18px}.hero-tile .hero-role{font-size:10px!important}.hero-rail .build-panel{padding:20px 16px}.hero-rail .build-choice>b{font-size:19px}.hero-rail .build-choice{min-height:120px}.hero-rail .sample-note,.hero-rail .source-link{font-size:11px}.hero-rail .build-panel-heading h2{font-size:21px}.hero-rail .build-tabs button{font-size:12px}.hero-rail .build-choice small{font-size:10px}.hero-rail .mini-track span{font-size:11px}.armory-stage{grid-template-columns:105px minmax(0,1fr) 105px;gap:16px}.armory-slot-name{font-size:11px}.armory-gem{height:25px;width:25px;right:-7px;font-size:18px}.armory-gem img{height:24px;width:24px}.armory-heading h2{font-size:28px}.armory-heading>span{font-size:12px}.armory-panel{padding:20px 28px 14px}.gem-panel{padding:0 28px 20px}.editing-heading h3{font-size:22px}.equipment-step h2{font-size:25px}.equipment-step>span{font-size:13px}.catalog-labels{font-size:12px}.gem-row{padding:7px 0}.gem-choice{max-width:140px;height:54px}.gem-choice img{height:46px;width:46px}.gem-row>b{font-size:16px}.catalog-labels,.gem-row{grid-template-columns:100px repeat(4,minmax(0,1fr));gap:14px}.set-bonus-toggle{padding:19px 24px;gap:23px}.set-bonus-copy strong{font-size:29px}.set-bonus-copy small{font-size:10px}.set-bonus-copy>span{font-size:13px}.set-bonus-value{font-size:36px}.set-bonus-emblem{font-size:55px}.set-switch{transform:scale(1.2);margin-left:12px}.tree-grid{height:clamp(570px,calc(100dvh - 370px),1250px)}.tree-footnote{font-size:11px}.build-toolbar{padding:12px 15px}.active-build b{font-size:19px}.active-build span{font-size:12px}.build-total strong{font-size:32px}.build-total span{font-size:10px}.frame-title{min-width:240px;height:35px}.frame-title h2{font-size:24px}.page-heading h1{font-size:35px}.game-title{font-size:10px}.page-actions button{font-size:12px;padding:10px 16px}
}
/* Keep the full edit loop in reach at common ultrawide heights. */
@media(min-width:1451px){
 .armory-stage{height:clamp(350px,38dvh,700px)}
 .tree-grid{height:clamp(520px,calc(100dvh - 435px),1200px);--node:clamp(31px,3.85dvh,63px)}
 .gem-choice{height:40px}.gem-choice img{height:34px;width:34px}
 .gem-row{padding:4px 0}.editing-heading{padding:11px 0}.equipment-step{margin-bottom:11px}
}
@media(min-width:2200px){
 .set-bonus-toggle{padding:14px 22px}.set-bonus-copy strong{font-size:26px}.set-bonus-emblem{font-size:44px}
 .gem-choice{height:43px}.gem-choice img{height:36px;width:36px}.gem-row{padding:4px 0}
 .armory-slot-icon{height:clamp(22px,2.2dvh,42px);width:clamp(22px,2.2dvh,42px)}
}
@media(max-width:1450px) and (min-width:621px){
 main{padding:0 20px 24px}.layout{grid-template-columns:180px minmax(0,1fr);gap:22px}.hero-rail{grid-column:1;grid-row:1 / span 2}.journal-frame{grid-column:2;grid-row:1}.right-sidebar{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:16px}.armory-stage{height:460px;grid-template-columns:63px minmax(0,1fr) 63px;gap:5px}.armory-slot-name{font-size:7px}.armory-panel{padding:13px 12px 11px}.armory-heading h2{font-size:18px}.armory-heading>span{font-size:8px}.armory-slot-icon{height:29px;width:29px}.gem-panel{padding:0 12px 13px}.catalog-labels,.gem-row{grid-template-columns:50px repeat(4,minmax(0,1fr));gap:3px}.catalog-labels{font-size:6px}.gem-row>b{font-size:9px}.gem-choice{height:34px}.gem-choice img{height:29px;width:29px}.equipment-step h2{font-size:16px}.equipment-step>span{font-size:8px}.editing-heading h3{font-size:14px}.editing-heading>span{font-size:8px}.editing-heading>img{height:23px;width:23px}.hero-tile{height:90px}.hero-tile strong{font-size:11px}.hero-tile .hero-role{font-size:7px!important}.hero-panel>h2{font-size:18px}.hero-list{gap:7px}.hero-panel{padding:16px 10px}.hero-rail .build-choice{padding-right:58px}.hero-rail .build-choice>b{font-size:12px}.hero-rail .build-hero-art{width:105px;right:-25px}.hero-rail .build-tabs{flex-direction:column}.set-bonus-copy strong{font-size:21px}.tree-grid{height:620px;--node:41px}.right-sidebar .build-panel{order:0}
}
@media(max-width:1000px) and (min-width:621px){.layout{grid-template-columns:145px minmax(0,1fr);gap:18px}.hero-tile{height:78px}.hero-tile strong{font-size:9px}.hero-panel{padding:14px 8px}.hero-list{gap:6px}.right-sidebar{display:flex}.armory-stage{height:500px;grid-template-columns:80px minmax(0,1fr) 80px}.armory-slot-name{font-size:9px}.armory-panel,.gem-panel{width:100%}.gem-panel{padding:0 18px 15px}.catalog-labels,.gem-row{grid-template-columns:70px repeat(4,minmax(0,1fr));gap:7px}.catalog-labels{font-size:8px}.gem-row>b{font-size:11px}.gem-choice{height:44px}.gem-choice img{height:36px;width:36px}.set-bonus-toggle{gap:10px;padding:15px 12px}.set-bonus-copy strong{font-size:17px}.set-bonus-value{font-size:22px}.set-bonus-copy>span{font-size:9px}.set-bonus-copy small{font-size:6px}.set-bonus-emblem{font-size:30px}.set-switch{width:39px;height:22px}.set-switch:after{height:14px;width:14px}.set-bonus-toggle:has(input:checked) .set-switch:after{left:19px}.frame-inner{padding:16px 8px 10px}.build-total strong{font-size:21px}.active-build b{font-size:12px}.active-build span{font-size:8px}.build-toolbar{gap:8px;padding:7px}.build-portrait{height:32px;width:32px}.tree-footnote{font-size:7px}}
@media(max-width:620px){
 main{padding:0 13px 20px}.page-heading{padding:16px 0 23px}.layout{display:flex;gap:25px}.hero-rail{display:contents}.hero-panel{width:100%;padding:13px 11px;order:0}.hero-panel>h2{font-size:17px;padding-bottom:10px}.hero-list{gap:8px}.hero-tile{height:86px;width:79px;min-width:79px}.hero-tile strong{font-size:10px;bottom:7px}.hero-tile .hero-role{font-size:6px!important;left:4px;top:4px}.saved-heading{padding-top:10px;margin-top:10px}.journal-frame{order:1;width:calc(100% - 10px)}.right-sidebar{order:2;width:100%;gap:18px}.hero-rail .build-panel{order:3;width:100%}.hero-rail .build-tabs{flex-direction:row}.hero-rail .build-choice>b{font-size:17px}.hero-rail .build-choice{min-height:105px;padding-right:110px}.hero-rail .build-hero-art{width:145px}.frame-inner{margin:6px;padding:15px 6px 8px}.frame-title{height:28px;top:-16px;min-width:160px}.frame-title h2{font-size:17px}.set-bonus-toggle{gap:8px;padding:13px 9px;margin:1px 0 11px}.set-bonus-emblem{font-size:25px}.set-bonus-copy{gap:4px}.set-bonus-copy small{font-size:5px;letter-spacing:1px}.set-bonus-copy strong{font-size:13px}.set-bonus-copy>span{font-size:7px}.set-bonus-value{font-size:17px}.set-switch{height:19px;width:33px}.set-switch:after{height:11px;width:11px;top:2px;left:3px}.set-bonus-toggle:has(input:checked) .set-switch:after{left:17px}.build-toolbar{min-height:49px;padding:6px;gap:7px}.build-portrait{height:28px;width:28px}.active-build b{font-size:10px}.active-build span{font-size:7px}.build-total strong{font-size:18px}.build-total span{font-size:6px}.tree-grid{height:480px;--node:28px;padding-top:4px}.column-name{font-size:6px;margin-bottom:3px}.top-ornament{height:22px}.top-ornament,.node-stack,.gem-base,.gem-base:before{background-size:54px auto}.gem-power{font-size:15px;height:29px;line-height:26px;background-size:54px auto}.gem-base{height:43px;padding-top:0}.gem-base img{height:29px;width:29px}.tree-node .node-rank{height:9px;line-height:7px;font-size:6px;min-width:8px}.tree-footnote{font-size:6px;gap:5px}.armory-panel{padding:16px 15px 12px}.armory-stage{height:460px;grid-template-columns:65px minmax(0,1fr) 65px;gap:4px}.armory-slot-icon{height:28px;width:28px}.armory-slot-name{font-size:7px}.armory-gem{height:17px;width:17px;right:-4px}.armory-gem img{height:17px;width:17px}.armory-heading h2{font-size:21px}.armory-heading>span{font-size:9px}.armory-key{font-size:8px;gap:14px}.gem-panel{padding:0 15px 15px}.editing-heading h3{font-size:17px}.editing-heading>span{font-size:8px}.editing-heading>img{height:26px;width:26px}.equipment-step h2{font-size:20px}.equipment-step>span{font-size:9px;max-width:135px}.catalog-labels,.gem-row{grid-template-columns:57px repeat(4,minmax(0,1fr));gap:5px}.catalog-labels{font-size:6px}.gem-row>b{font-size:10px}.gem-choice{height:41px}.gem-choice img{height:34px;width:34px}.essence-panel summary{font-size:12px}.hero-rail .build-panel-heading h2{font-size:19px}.hero-rail .build-tabs button{font-size:12px}.hero-rail .sample-note,.hero-rail .source-link{font-size:11px}
}
@media(max-width:620px){
 .armory-figure{overflow:visible}
 #armory-hero{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:280px;max-width:none;height:auto;max-height:100%;opacity:.96}
}