#pa-components{position:fixed;inset:0;z-index:89;display:flex;align-items:center;justify-content:center;background:rgba(4,5,12,.88);color:#f8e7c8;font:14px ui-monospace,Consolas,monospace;padding:12px;box-sizing:border-box}
#pa-components[hidden]{display:none!important}
.pa-cmp-panel{box-sizing:border-box;display:flex;flex-direction:column;width:min(1060px,100%);max-height:94dvh;background:#0d101c;border:1px solid #786137;box-shadow:inset 0 0 0 3px #171b2d,0 18px 80px #0008;padding:20px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.pa-cmp-panel header{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #343a4d;padding-bottom:12px}.pa-cmp-panel h2{font-size:22px;margin:5px 0;color:#ffd15c}.pa-cmp-panel small{color:#929fb5;font-size:11px}.pa-cmp-content{overflow:auto;overscroll-behavior:contain;padding:8px 2px 16px;min-height:0;touch-action:pan-y}.pa-cmp-intro{color:#afbdce;line-height:1.65;margin:6px 0 18px}.pa-cmp-panel button,.pa-cmp-panel select{font:inherit;min-height:44px;border:1px solid #495069;background:#191d30;color:#f8e7c8;cursor:pointer}.pa-cmp-panel button:focus-visible,.pa-cmp-panel select:focus-visible{outline:2px solid #7cffd5;outline-offset:3px}.pa-cmp-panel button:disabled{opacity:.5;cursor:default}.pa-cmp-panel header button{min-width:44px}.pa-cmp-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pa-cmp-panel .pa-cmp-card{display:flex;flex-direction:column;text-align:left;padding:18px;gap:14px;border-top:3px solid var(--cmp-accent,#ffd15c);background:linear-gradient(145deg,#1b2034,#101420);line-height:1.65;width:100%;box-sizing:border-box}.pa-cmp-card strong{color:var(--cmp-accent);font-size:18px}.pa-cmp-card em{font-size:12px;font-style:normal;color:#c0c9d9;white-space:nowrap}.pa-cmp-card span{color:#b9c4d5;font-size:13px}.pa-cmp-card b{font-size:12px;color:#7cffd5;margin-top:auto}.pa-cmp-panel footer{border-top:1px solid #343a4d;padding-top:12px;color:#929fb5;line-height:1.6;font-size:12px}.pa-cmp-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pa-cmp-slot{background:#111522;padding:8px;border:1px solid #30374b}.pa-cmp-slot .pa-cmp-card{min-height:136px;padding:12px;gap:6px;cursor:default}.pa-cmp-slot strong{font-size:15px}.pa-cmp-reforge{display:flex;gap:6px;margin:8px 0}.pa-cmp-reforge select{min-width:0;flex:1}.pa-cmp-reforge button{padding:0 15px;color:#ffd15c}.pa-cmp-empty{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:110px;padding:20px;border:1px dashed #343a4d;color:#77839a}.pa-cmp-keep{margin-top:18px;padding:10px 18px}.pa-cmp-panel #pa-component-notice{color:#ffac88;min-height:0}.pa-cmp-panel #pa-component-notice:not(:empty){margin-top:8px}
@media(max-height:500px){#pa-components{padding:8px}.pa-cmp-panel{padding:12px;max-height:96dvh}.pa-cmp-panel h2{font-size:17px}.pa-cmp-panel header{padding-bottom:6px}.pa-cmp-intro{margin:4px 0 10px;font-size:12px}.pa-cmp-panel .pa-cmp-card{padding:12px;gap:7px}.pa-cmp-card strong{font-size:15px}.pa-cmp-card span{font-size:12px}.pa-cmp-panel footer{padding-top:6px;font-size:11px}}
@media(max-width:600px) and (min-height:501px){.pa-cmp-choices,.pa-cmp-slots{grid-template-columns:1fr}.pa-cmp-panel{padding:14px}.pa-cmp-panel h2{font-size:18px}}
@media(prefers-reduced-motion:no-preference){.pa-cmp-panel{animation:pa-cmp-in .18s ease-out}@keyframes pa-cmp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}
/* Hero details remain directly usable on phones, including short landscape viewports. */
@media(max-width:900px){#pa-heroes .pa243-body{grid-template-columns:minmax(165px,.75fr) minmax(300px,1.25fr);gap:10px}#pa-heroes .pa243-detail{display:flex;min-width:0;min-height:0;touch-action:pan-y;overscroll-behavior:contain}#pa-heroes .pa243-detail>*{flex-shrink:0}#pa-heroes .pa243-detail .row{margin-top:0}#pa-heroes .pa243-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));min-width:0}#pa-heroes .pa243-detail #pa-growth-donor{width:100%}#pa-heroes .pa243-detail .cards{font-size:12px;line-height:1.6}#pa-heroes .pa243-detail .pa243-btn{font-size:12px}}
@media(max-width:600px) and (orientation:portrait){#pa-heroes .pa243-panel{height:94dvh;width:96vw;padding:12px}#pa-heroes .pa243-body{display:flex;flex-direction:column;overflow:auto;touch-action:pan-y;overscroll-behavior:contain}#pa-heroes .pa243-grid{max-height:24dvh;min-height:140px;flex-shrink:0;grid-template-columns:repeat(2,minmax(0,1fr))}#pa-heroes .pa243-detail{flex-shrink:0;overflow:visible}#pa-heroes .pa243-panel .hd{gap:6px}#pa-heroes .pa243-panel .hd small{display:none}#pa-heroes .pa243-panel .hd h2{font-size:18px}#pa-heroes .pa243-panel .hd .shards{padding:0 8px;font-size:10px}}
body:has(#pa-heroes:not([hidden]),#pa-components:not([hidden])) #orientationToggleBtn{display:none!important}
#pa-heroes .pa243-detail{background:#0d101c;border:2px solid var(--acc,#526176)}
#pa-heroes .pa243-detail::before{display:none}
#pa-heroes .pa243-detail button:disabled{opacity:.45;cursor:default}