#lootPanel>.loot-card{width:calc(100vw - 28px);max-width:1100px;height:calc(100dvh - 28px);max-height:800px;padding:0;display:block}
#lootContent{height:100%;min-height:0}.loot-layout{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:15px;padding:22px;background:radial-gradient(ellipse at 50% 10%,#79633199,transparent 70%),#16291e;border-radius:9px;min-height:0}.loot-layout header h2{font:32px/36px Georgia,serif;margin:0 0 6px}.loot-layout p{margin:0}.loot-layout header>p:last-child{font-size:16px}.loot-rewards{display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap;padding:12px;border:1px solid #d4b56988;background:#17271dd9;border-radius:9px}.loot-rewards>div{display:flex;align-items:center;gap:8px;font-size:20px}.loot-rewards .icon{width:48px;height:48px}.loot-rewards strong{font-size:36px;color:#f6d798}.loot-rewards>p{flex-basis:100%;text-align:center;font-size:12px;line-height:16px}.loot-heroes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:12px;min-height:0}.loot-heroes article{display:flex;align-items:center;gap:12px;min-width:0;min-height:0;padding:12px;background:#13281fe8;border:1px solid #c0a56d88;border-radius:8px}.loot-heroes article>img{width:30%;height:100%;object-fit:contain;min-height:0}.loot-heroes article>div{flex:1;min-width:0}.loot-heroes h3{font:23px/26px Georgia,serif;margin:0 0 6px}.loot-heroes strong{font-size:23px;color:#dec3fc}.loot-heroes p{font-size:13px;line-height:18px}.loot-heroes .experience-meter{margin-top:8px}.loot-layout footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.loot-layout footer>span{font-size:12px;line-height:16px}.loot-layout footer>button{font-size:18px;min-height:44px;padding:10px 24px}.loot-pager{display:flex;align-items:center;gap:5px}.loot-pager button{font-size:12px;padding:5px}
@media(max-width:700px) and (min-height:501px){.loot-layout{padding:12px;gap:8px}.loot-layout header h2{font-size:27px;line-height:30px}.loot-layout header>p:last-child{font-size:14px;line-height:18px}.loot-rewards{gap:6px 20px;padding:8px}.loot-rewards .icon{width:35px;height:35px}.loot-rewards strong{font-size:28px}.loot-rewards>div{font-size:16px}.loot-heroes{grid-template-columns:1fr;gap:7px}.loot-heroes article{padding:5px 10px;gap:10px}.loot-heroes article>img{width:22%}.loot-heroes h3{font-size:21px;line-height:23px;margin-bottom:1px}.loot-heroes strong{font-size:20px}.loot-heroes .experience-meter{margin-top:3px}.loot-layout footer{flex-wrap:wrap;gap:5px}.loot-layout footer>span{flex:1;font-size:12px}.loot-layout footer>button{padding:6px 16px;min-height:36px}.loot-pager{flex-basis:100%;justify-content:center}}
@media(max-height:500px){.loot-layout{padding:10px 14px;gap:6px}.loot-layout header .eyebrow{display:none}.loot-layout header h2{font-size:23px;line-height:26px;margin-bottom:2px}.loot-layout header>p:last-child{font-size:13px;line-height:16px}.loot-rewards{gap:3px 24px;padding:3px 8px}.loot-rewards .icon{width:26px;height:26px}.loot-rewards>div{font-size:14px}.loot-rewards strong{font-size:25px}.loot-rewards>p{flex-basis:auto;font-size:12px}.loot-heroes{gap:6px}.loot-heroes article{padding:5px;gap:5px}.loot-heroes h3{font-size:18px;line-height:20px;margin-bottom:1px}.loot-heroes strong{font-size:18px}.loot-heroes p{font-size:12px;line-height:15px}.loot-heroes .experience-meter{margin-top:2px}.loot-layout footer>button{font-size:14px;min-height:30px;padding:5px 16px}.loot-layout footer>span{font-size:12px;line-height:14px}}

.loot-layout header h2>.icon{width:40px;height:40px;margin-right:8px;vertical-align:middle}@media(max-height:500px){.loot-layout header h2>.icon{width:28px;height:28px}}

.loot-rewards{gap:6px 30px}.loot-heroes{grid-template-columns:repeat(var(--loot-columns,3),minmax(0,1fr))}.loot-heroes article>img{max-width:210px}.loot-held-label{display:block;font:12px/16px system-ui;color:#d9c5e8;margin-top:3px}
@media(max-width:700px) and (min-height:501px){.loot-heroes{grid-template-columns:1fr}.loot-held-label{margin-top:1px;font-size:12px;line-height:14px}}
@media(max-width:700px) and (min-height:501px){
 .loot-heroes article{padding:2px 10px}
 .loot-heroes h3{line-height:22px;margin-bottom:0}
 .loot-heroes strong{line-height:22px}
 .loot-heroes p{font-size:14px;line-height:16px}
 .loot-held-label{margin-top:0}
 .loot-heroes .experience-meter{margin-top:2px}
}

/* Keep all earned heroes reachable at small/zoomed viewports. */
.loot-layout{overflow:auto}.loot-heroes{min-height:160px}.loot-layout footer{flex-wrap:wrap;flex-shrink:0}.loot-layout footer>.primary{margin-left:auto}.loot-pager button{min-height:32px;font-size:14px}
@media(max-width:700px) and (min-height:501px){.loot-heroes{min-height:330px}.loot-pager{flex-basis:100%}}
@media(max-height:500px){.loot-heroes{min-height:165px}.loot-layout .experience-meter{gap:3px}}
/* Spoils share the same three-part XP markup as the battle ribbon, without
   inheriting legacy compact eight-pixel tracks from global card styles. */
body[data-progression="xp"] #lootContent .loot-heroes .experience-meter.xp-ranked{
 display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:22px;
 align-items:center;gap:4px;height:22px;min-height:22px;width:100%;padding:0;
 border:0;background:none;overflow:visible;isolation:auto;line-height:20px;
}
body[data-progression="xp"] #lootContent .loot-heroes .experience-meter.xp-ranked>.xp-rank-current,
body[data-progression="xp"] #lootContent .loot-heroes .experience-meter.xp-ranked>.xp-rank-next{
 display:block;position:static;grid-row:1;padding:0;margin:0;
 font:700 14px/22px system-ui,sans-serif;color:#ead0ff;white-space:nowrap;
}
body[data-progression="xp"] #lootContent .loot-heroes .experience-meter.xp-ranked>.xp-rank-current{grid-column:1}
body[data-progression="xp"] #lootContent .loot-heroes .experience-meter.xp-ranked>.xp-rank-next{grid-column:3}
body[data-progression="xp"] #lootContent .loot-heroes .experience-meter.xp-ranked>.xp-track{
 position:relative;display:block;grid-row:1;grid-column:2;width:100%;min-width:0;
 height:22px;min-height:22px;padding:0;border:1px solid #cf9df0;
 background:#21152d;overflow:hidden;line-height:20px;z-index:auto;
}
body[data-progression="xp"] #lootContent .loot-heroes .experience-meter.xp-ranked>.xp-track>i{
 display:block;position:absolute;inset:0 auto 0 0;height:100%;z-index:0;
 background:linear-gradient(90deg,#69349b,#a266d0);
}
body[data-progression="xp"] #lootContent .loot-heroes .experience-meter.xp-ranked>.xp-track>.xp-value{
 position:relative;display:block;width:100%;height:20px;padding:0 2px;margin:0;
 font:14px/20px system-ui,sans-serif;white-space:nowrap;text-align:center;
 color:#fff1ff;text-shadow:0 1px 2px #000;z-index:1;
}