#character .equipment-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;margin:0 0 28px;padding:20px;border:1px solid #d8e4f5;border-radius:14px;background:linear-gradient(120deg,#f3f7fe,#fff 65%);align-items:start}
#character .equipment-layout h3{margin:0 0 18px;font-size:16px;color:#173f7b}
#character .paperdoll{display:grid;grid-template-columns:54px minmax(110px,1fr) 54px;grid-template-rows:repeat(5,54px);gap:14px 16px;max-width:310px;margin:auto}
#character .paperdoll-portrait{grid-column:2;grid-row:2/5;position:relative;align-self:stretch;min-width:0;border:1px solid #bdcee5;border-radius:60px 60px 14px 14px;overflow:hidden;background:#e5edfa;box-shadow:inset 0 0 30px #cbdaf4}
#character .paperdoll-portrait>.game-art,#character .paperdoll-portrait>.uploaded-portrait{width:100%;height:100%;border-radius:0;object-fit:cover;aspect-ratio:auto}
#character .portrait-caption{position:absolute;bottom:0;left:0;right:0;padding:7px 3px;text-align:center;font-size:11px;color:#fff;background:#173f7bd9}
#character .compact-item{position:relative;display:block;width:46px;height:46px;min-height:0;margin:0;padding:4px;border:1px solid #cddbef;border-radius:8px;background:#f4f8ff;color:#173f7b;box-shadow:0 2px 3px #173f7b05;cursor:pointer;transition:border-color .15s,background .15s}
#character .compact-item>.game-art{width:100%;height:100%;border-radius:4px;aspect-ratio:1;box-shadow:none}
#character .compact-item:hover,#character .compact-item:focus-visible{border-color:#3c78d4;background:#e7f0ff;outline:2px solid #5286d133;outline-offset:1px}
#character .compact-item[data-grade=green]{border-color:#68a581;background:#eff8f1}
#character .compact-item[data-grade=blue]{border-color:#6797dc;background:#edf4ff}
#character .compact-item[data-grade=legendary]{border-color:#c49c49;background:#fff8e9;box-shadow:0 0 0 1px #d7b86a33}
#character .paperdoll-slot{width:54px;height:54px;justify-self:center;overflow:visible}
#character .paperdoll-slot-label{position:absolute;left:-5px;right:-5px;top:100%;font-size:9px;line-height:13px;color:#6a7f9c;text-align:center;white-space:nowrap;pointer-events:none}
#character .empty-equipment>.game-art{opacity:.23;filter:grayscale(1)}
#character .slot-lock{position:absolute;right:2px;bottom:1px;font-size:12px}
#character [data-slot=helmet]{grid-column:2;grid-row:1}
#character [data-slot=armor]{grid-column:1;grid-row:2}
#character [data-slot=gloves]{grid-column:1;grid-row:3}
#character [data-slot=weapon]{grid-column:1;grid-row:4}
#character [data-slot=ring1]{grid-column:1;grid-row:5}
#character [data-slot=amulet]{grid-column:3;grid-row:1}
#character [data-slot=shield]{grid-column:3;grid-row:2}
#character [data-slot=bracers]{grid-column:3;grid-row:3}
#character [data-slot=ring2]{grid-column:3;grid-row:4}
#character [data-slot=belt]{grid-column:3;grid-row:5}
#character [data-slot=boots]{grid-column:2;grid-row:5}
#character .backpack-panel{min-width:0;border-left:1px solid #dce6f4;padding-left:26px}
#character .backpack-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#character #bagCount{font-size:10px;color:#7286a2}
#character .compact-bag{display:grid;grid-template-columns:repeat(auto-fill,46px);gap:7px;max-height:320px;overflow-y:auto;padding:3px 3px 8px;align-content:start}
#character .compact-quantity{position:absolute;bottom:1px;right:2px;min-width:14px;padding:0 2px;border-radius:3px;background:#fffdf3ed;color:#173f7b;font-size:10px;line-height:14px;font-weight:700;text-align:center}
#character .bag-empty{background:#eef3fa;border-color:#dfe7f2;box-shadow:inset 0 1px 4px #173f7b06;cursor:default}
#character .inventory-hint{font-size:11px;line-height:1.6;color:#7487a1;margin:12px 0 0}
.gear-hint{position:fixed;z-index:100;pointer-events:none;width:260px;max-width:calc(100vw - 16px);padding:14px 16px;background:#fff;color:#21426f;border:1px solid #c4d5ee;border-top:3px solid #7994b8;border-radius:10px;box-shadow:0 12px 40px #14386c26;font:12px/1.5 'Segoe UI',Arial,sans-serif}
.gear-hint[hidden]{display:none}.gear-hint[data-grade=legendary]{border-top-color:#bd9131}.gear-hint[data-grade=green]{border-top-color:#4e9869}.gear-hint[data-grade=blue]{border-top-color:#3675cd}
.gear-hint-name{display:block;font-size:14px;color:#183e78}.gear-hint-type{display:block;font-size:11px;color:#7d8da4;margin-top:3px}.gear-hint-bonus{margin:10px 0;color:#245aa6;font-weight:600}.gear-hint-requirement{font-size:11px;margin:7px 0;color:#597493}.gear-hint-requirement.unmet{color:#b64552}.gear-hint-help{display:block;color:#8493a9;font-size:10px;margin-top:10px}
@media(max-width:800px){#character .equipment-layout{grid-template-columns:280px minmax(0,1fr);gap:18px;padding:14px}#character .backpack-panel{padding-left:16px}#character .paperdoll{gap:14px 10px}}
@media(max-width:620px){#character .equipment-layout{grid-template-columns:minmax(0,1fr);padding:16px;gap:24px}#character .paperdoll-panel{max-width:320px;width:100%;margin:auto}#character .backpack-panel{padding:20px 0 0;border-left:0;border-top:1px solid #dce6f4}#character .compact-bag{max-height:270px}#character .backpack-heading{flex-wrap:wrap}#character .equipment-layout h3{margin-bottom:14px}}
/* Vitals and currencies belong to the character's equipment area. */
.panel.top{display:none}
#character .paperdoll{grid-template-rows:74px repeat(5,54px)}
#character .paperdoll-vitals{grid-column:1/-1;grid-row:1;align-self:start;display:grid;gap:9px}
#character .paperdoll-vitals .stat{padding:0;font-size:11px;font-weight:600;color:#5c7394}
#character .paperdoll-vitals .meter{height:7px;margin-top:5px;border-radius:8px;background:#e3eaf6}
#character .paperdoll-vitals .meter span{display:block;height:100%;border-radius:8px;background:#d9364d}
#character .paperdoll-vitals .meter.mana span{background:#2765cb}
#character .paperdoll-portrait{grid-row:3/6;display:flex;flex-direction:column;border-radius:45px 45px 10px 10px}
#character .paperdoll-portrait>.game-art,#character .paperdoll-portrait>.uploaded-portrait{height:calc(100% - 32px);min-height:0;flex:1}
#character .portrait-caption{position:static;padding:8px 3px;min-height:32px;background:#eaf1fc;color:#173f7b;font-size:11px;font-weight:700;overflow-wrap:anywhere;line-height:1.3}
#character [data-slot=helmet]{grid-row:2}
#character [data-slot=amulet]{grid-row:2}
#character [data-slot=armor],#character [data-slot=shield]{grid-row:3}
#character [data-slot=gloves],#character [data-slot=bracers]{grid-row:4}
#character [data-slot=weapon],#character [data-slot=ring2]{grid-row:5}
#character [data-slot=ring1],#character [data-slot=belt],#character [data-slot=boots]{grid-row:6}
#character .inventory-wallet{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 17px}
#character .inventory-wallet .gold-layer,#character .premium-wallet{position:static;z-index:auto;display:flex;align-items:center;gap:6px;min-width:0;margin:0;padding:9px 10px;background:#fff;border:1px solid #d5e3f6;border-radius:9px;box-shadow:none;backdrop-filter:none}
#character .inventory-wallet .gold-layer .game-art{width:25px;border-radius:5px}
#character .inventory-wallet .gold-layer span:not(.game-art),#character .premium-wallet>span:not(.chronos-icon){font-size:11px;letter-spacing:0;color:#69809e}
#character .inventory-wallet .gold-layer strong,#character .premium-wallet strong{font-size:17px;margin-left:auto;color:#174583;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0}
#character .premium-wallet{background:#f5f2ff;border-color:#ddd3f2}
#character .premium-wallet strong,#character .chronos-icon{color:#7953b7}
#character .chronos-icon{font-size:25px;line-height:1}
@media(max-width:800px) and (min-width:621px){#character .inventory-wallet{grid-template-columns:1fr}}
