.pack-heading{display:flex;justify-content:space-between;align-items:center;margin:14px 0 8px;gap:8px}.pack-heading h3{margin:0}.pack-heading>span,.chest-locked{font-size:12px;color:var(--muted,#b9ac97)}
.backpack-grid{display:grid;grid-template-columns:repeat(var(--pack-columns,6),minmax(0,1fr));grid-template-rows:repeat(var(--pack-rows,6),minmax(0,1fr));aspect-ratio:var(--pack-columns,6)/var(--pack-rows,6);isolation:isolate;border:5px ridge #735334;border-radius:9px;padding:5px;gap:2px;background:linear-gradient(#130b06a8,#130b0699),url('/assets/art/journey-017.webp') 100% 0/400% 200%;box-shadow:inset 0 0 26px #000,0 10px 22px #0006;max-width:560px;margin:auto}
.pack-cell{border:1px solid #b988483b;border-radius:2px;background:#09080540;pointer-events:none;z-index:-1}
.pack-piece{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;min-width:0;padding:2px;border:1px solid #9c815c88;border-radius:5px;background:linear-gradient(135deg,#68544077,#1d1816d9);overflow:hidden;box-shadow:inset 0 0 13px #0c0807;touch-action:manipulation}
.pack-piece>.item-art{width:min(100%,82px);height:auto;aspect-ratio:1;flex-shrink:1;max-height:100%;min-height:0}
.pack-piece.magic,.pack-piece.rare{border-color:#6da3c58a;background:radial-gradient(ellipse at center,#4da1dc30,#151819b8);box-shadow:inset 0 0 13px #6cc5ff29}
.pack-piece.selected{outline:2px solid #edcb7b;outline-offset:-3px;filter:brightness(1.2)}.pack-piece:focus-visible{outline:3px solid #f8dfa0}
.pack-item-name{font-size:10px;line-height:1.2;color:#ecdfc4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;width:100%;overflow-wrap:anywhere}.backpack-grid .pack-item-name{display:none}
.pack-element{position:absolute;bottom:2px;right:3px;font-size:13px;text-shadow:0 1px 4px #000;background:#090f17bf;border-radius:50%;padding:0 3px;color:#b9dff6}


.pack-tabs{display:flex;gap:7px;margin:16px 0 8px;flex-wrap:wrap}.pack-tabs button{flex:1;min-width:78px;padding:9px 5px;font-size:13px}.chest-locked{display:block;text-align:center;margin:7px 0}.chest-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:12px 0}.chest-grid .pack-piece{min-height:100px}.chest-banner{height:145px;position:relative;background:url('/assets/art/journey-017.webp') 66.6667% 0/400% 200%;border-radius:8px;box-shadow:inset 0 -55px 42px #0d0909}.chest-banner h3{position:absolute;bottom:5px;left:15px;text-shadow:0 2px 5px #000}
.gear-comparison button{margin:4px 4px 4px 0}.gear-detail>.row{flex-wrap:wrap}.gear-detail>.row:first-child{flex-wrap:nowrap}.gear-detail strong{overflow-wrap:anywhere}
.pending-loot{margin:16px 0;padding:14px;background:#302419;border:1px solid #ac8b48;border-radius:8px;text-align:left}.pending-piece{padding:12px 0;border-bottom:1px solid #a7864544}.pending-piece>.item-art{float:left;margin-right:8px}.pending-piece>strong{font-size:14px;overflow-wrap:anywhere}.pending-piece p{font-size:12px;clear:both;padding-top:6px}.pending-piece .row{flex-wrap:wrap}.pending-piece .row button{padding:8px;font-size:12px}
.quest-preparation{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}.quest-preparation span{background:#201a1430;border:1px solid #4a382033;border-radius:4px;padding:4px 6px;font-size:11px;color:#3c2817}.quest-preparation .weak{background:#99ac7345}.hero-resists{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.hero-resists span{padding:5px 8px;background:#233443;border:1px solid #6b99b755;border-radius:5px;font-size:12px}
.fx-water{--fx-color:#70d8ea;color:#70d8ea}.state-resist_water,.state-resist_fire,.state-resist_ice,.state-resist_lightning,.state-resist_nature,.state-resist_light,.state-resist_shadow{animation:element-ward-pulse 2s ease-in-out infinite}@keyframes element-ward-pulse{50%{box-shadow:inset 0 0 10px #85ccff70,0 0 8px #85ccff45}}.reduce-motion [class*="state-resist_"]{animation:none}@media(prefers-reduced-motion:reduce){[class*="state-resist_"]{animation:none}}
@media(min-width:650px){.chest-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(max-width:359px){.chest-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pack-tabs button{font-size:11px}.gear-detail .row:first-child .item-art{width:42px;height:42px}.gear-detail{padding:10px}}
.item-art.item-ratio,.pack-piece>.item-art.item-ratio{height:auto;aspect-ratio:var(--item-aspect,1)}
.item-popup-open{overflow:hidden;overscroll-behavior:none}
.slot-item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;margin-top:14px}.slot-item{min-width:0;text-align:center}.slot-item>.pack-piece{width:100%;min-height:145px;padding:10px;gap:7px}.slot-item .item-art{width:76px;max-height:90px;flex-shrink:0}.slot-item .pack-item-name{font-size:12px;-webkit-line-clamp:3}.slot-item>small{display:block;margin-top:5px;color:var(--muted)}.slot-item-grid>p{grid-column:1/-1}.slot-results .slot-filter{scroll-margin-bottom:100px}
@media(min-width:650px){.slot-item-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.item-popup{box-sizing:border-box;width:min(540px,calc(100% - 28px));max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);padding:0;margin:auto;border:1px solid #b2955d;border-radius:13px;background:radial-gradient(ellipse at top,#35413d,#171d1d 65%);color:var(--text,#eee1c7);box-shadow:0 24px 80px #000b,inset 0 0 0 3px #a6864120;overflow:hidden}
.item-popup[open]{display:flex;flex-direction:column}.item-popup::backdrop{background:#050909b8;backdrop-filter:blur(3px)}
.item-popup-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 10px 6px 17px;border-bottom:1px solid #a6864144;flex-shrink:0}.item-popup-close{width:44px;height:44px;min-height:44px;padding:0;border:1px solid #a6864166;border-radius:8px;background:#111a19;color:#f0d99e;font-size:28px;line-height:1}
.item-popup-body{overflow:auto;overscroll-behavior:contain;min-height:0;padding:4px;scrollbar-color:#a68641 #171d1d}.item-popup .gear-detail{margin:0;border:0;background:transparent;padding:14px}.item-popup .gear-detail>.row:first-child>div{min-width:0}.item-popup .gear-detail>.row:first-child>.item-art{flex-shrink:0}.item-popup .gear-detail button{max-width:100%;white-space:normal}.item-popup .item-affixes{overflow-wrap:anywhere}
.item-popup-arrival{animation:item-popup-arrive .18s ease-out}@keyframes item-popup-arrive{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.item-popup-notice{margin:0;padding:10px 16px;background:#48281f;color:#ffe2bc;border-bottom:1px solid #af734f;font-size:13px;flex-shrink:0}
.reduce-motion .item-popup-arrival{animation:none}@media(prefers-reduced-motion:reduce){.item-popup-arrival{animation:none}}
.shop-purchase{display:flex;flex-direction:column;gap:7px;min-width:0}.shop-purchase select{padding:7px;min-height:40px;max-width:130px;font-size:12px}.shop-purchase button{min-width:0}@media(max-width:600px){.shop-item .shop-purchase{grid-column:1/-1;flex-direction:row;justify-content:flex-end;align-items:center}.shop-purchase select{width:130px}}
.pack-tabs button:before{content:'';display:block;width:30px;height:30px;margin:0 auto 5px;background:url('/assets/art/journey-017.webp') 0 0/400% 200%;border-radius:4px}.pack-tabs button[data-view="chest"]:before{background-position:66.6667% 0}
@media(max-width:600px){.shop-item.inventory{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:start;gap:9px}.shop-item.inventory>.item-art{grid-column:1;grid-row:1;width:48px;height:48px}.shop-item.inventory>div:not(.shop-purchase){grid-column:2;min-width:0}.shop-item.inventory>.shop-purchase{grid-column:1/-1;grid-row:2;display:flex;flex-direction:row;justify-content:flex-end;gap:8px}.shop-item.inventory p{overflow-wrap:break-word}.shop-item.inventory>.item-ratio{height:auto}}