/* Equipped hero showroom. Bag only; purchase and equip logic unchanged. */
#shopframe#shopframe .sf-panel.mode-bag .sf-bag{display:grid!important;grid-template-columns:minmax(240px,32%) minmax(0,1fr);gap:18px;overflow:hidden}
#shopframe#shopframe .sf-panel.mode-bag .sf-load{display:flex;flex-direction:column;height:100%;max-height:none;min-height:0;gap:12px;flex:none}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ship{flex:1 1 0;width:100%;max-width:none;height:auto;min-height:180px;padding:24px 12px 50px;border-radius:24px;border:1px solid #96f2dd66!important;background:radial-gradient(ellipse at 50% 36%,#23536080,transparent 65%),linear-gradient(150deg,#162f43,#11192f 65%,#22213e)!important;box-shadow:inset 0 1px #c6ffef30,0 10px 30px #0003;isolation:isolate;overflow:hidden}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-art{width:100%;max-width:none;height:100%;min-height:0;margin:0;z-index:2;--sk-pad:.035;--sk-fw:.94;--sk-fh:.9;--sk-base:1;filter:drop-shadow(0 12px 15px #0005);animation:iv785-float 5s ease-in-out infinite}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ship::before{content:'';position:absolute;inset:6% 5% 14%;border-radius:50%;background:url('/game/inventory-785-halo.svg') center/contain no-repeat;animation:iv785-orbit 36s linear infinite;opacity:.8;z-index:0;pointer-events:none}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ship::after{content:attr(title);position:absolute;left:12px;right:12px;bottom:13px;height:auto;border:0;border-radius:0;background:none;box-shadow:none;color:#defff4;font:800 14px/1.4 system-ui;letter-spacing:.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:none;transform:none;opacity:1;z-index:3}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ring{display:block;position:absolute;left:16%;right:16%;bottom:38px;width:auto;height:17%;border-radius:50%;border:1px solid #b1ffe8aa;background:radial-gradient(ellipse,#a0ffe029,#61ddb910 55%,transparent 65%);box-shadow:0 0 24px #80efd933,inset 0 0 16px #8bfbdc30;filter:none;transform:perspective(180px) rotateX(52deg);animation:iv785-pulse 4s ease-in-out infinite;pointer-events:none;z-index:1}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:112px;flex:0 0 112px;gap:12px}
#shopframe#shopframe .sf-panel.mode-bag .sf-mini{height:100%;min-height:0;padding:8px 8px 24px;border-radius:18px;background:linear-gradient(145deg,#1b2a40,#151d30)!important}
#shopframe#shopframe .sf-panel.mode-bag .sf-mini-art{max-width:none;--sk-pad:.06;--sk-fw:.86;--sk-fh:.85}
#shopframe#shopframe .sf-panel.mode-bag .sf-inv{height:100%;box-sizing:border-box;border-radius:24px;min-width:0}
@keyframes iv785-float{0%,100%{transform:translateY(3px) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes iv785-orbit{to{transform:rotate(360deg)}}
@keyframes iv785-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@media(max-width:1050px){#shopframe#shopframe .sf-panel.mode-bag .sf-bag{grid-template-columns:minmax(200px,31%) minmax(0,1fr);gap:12px}}
@media(max-width:700px){
#shopframe#shopframe .sf-panel.mode-bag .sf-bag{display:flex!important;flex-direction:column;gap:10px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load{display:grid;grid-template-columns:minmax(0,1fr) 88px;flex:0 0 210px;height:210px;max-height:none;gap:10px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ship{height:210px;min-height:0;max-width:none;padding:12px 8px 34px;border-radius:20px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ship::after{font-size:12px;bottom:9px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ring{bottom:28px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-row{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:210px;gap:10px}
#shopframe#shopframe .sf-panel.mode-bag .sf-mini{border-radius:16px;padding:6px 4px 20px}
#shopframe#shopframe .sf-panel.mode-bag .sf-inv{height:auto;flex:1 1 0;border-radius:18px}
}
@media(max-width:700px) and (max-height:740px){
#shopframe#shopframe .sf-panel.mode-bag .sf-load{flex-basis:156px;height:156px;grid-template-columns:minmax(0,1fr) 78px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ship,#shopframe#shopframe .sf-panel.mode-bag .sf-load-row{height:156px}
}
@media(max-height:540px) and (min-width:701px){
#shopframe#shopframe .sf-panel.mode-bag .sf-bag{grid-template-columns:190px minmax(0,1fr);gap:10px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load{display:flex;gap:8px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ship{min-height:100px;padding:6px 6px 28px;border-radius:16px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-row{height:60px;flex-basis:60px;gap:8px}
#shopframe#shopframe .sf-panel.mode-bag .sf-mini{padding:3px 3px 17px;border-radius:12px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ship::after{font-size:11px;bottom:6px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ring{bottom:24px}
}
@media(prefers-reduced-motion:reduce){#shopframe#shopframe .sf-panel.mode-bag .sf-load-art,#shopframe#shopframe .sf-panel.mode-bag .sf-load-ship::before,#shopframe#shopframe .sf-panel.mode-bag .sf-load-ring{animation:none!important}}
@media(max-width:700px) and (max-height:620px){
#shopframe#shopframe .sf-panel.mode-bag .sf-load{flex-basis:120px;height:120px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ship,#shopframe#shopframe .sf-panel.mode-bag .sf-load-row{height:120px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-ship{padding-top:6px;padding-bottom:28px}
#shopframe#shopframe .sf-panel.mode-bag .sf-load-row{gap:6px}
}