/* Pure loot presentation. Load AFTER portrait-cards.css. Root owns modal,
   viewport allocation, hand/reward paging, selection and all state changes. */
.loot-card {--role:#d0c3a3;--loot-rarity:#a5a7ad;--loot-life:#57a899}
.loot-glyph {display:inline-block;width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.loot-card .loot-tags {display:flex;align-items:center;justify-content:space-between;gap:3px;min-width:0;padding:1px 2px;font:12px/16px system-ui;text-align:left}
.loot-lifetime {display:flex;align-items:center;gap:2px;color:var(--loot-life);white-space:nowrap}
.loot-rarity {display:flex;align-items:center;gap:2px;color:var(--loot-rarity);white-space:nowrap}
.loot-rarity .loot-glyph {width:14px;height:14px}
.loot-card .loot-effect-art {display:block;width:100%;height:100%;min-height:0;object-fit:contain;filter:drop-shadow(0 3px 4px #000a)}

body[data-progression="xp"] #handSection #hand > .ability.loot-card {
 --role:#d0c3a3;
 grid-template-rows:minmax(46px,1fr) auto auto auto;
 gap:2px;
 border-color:#cfc3a2;
 background:radial-gradient(ellipse at 50% 25%,#4c493b,#1d2821 78%);
}
body[data-progression="xp"] #handSection #hand > .ability.loot-card > .loot-tags {grid-column:1;grid-row:4;border-top:1px solid #a99d754d;background:#17251ff2}
body[data-progression="xp"] #handSection #hand > .ability.loot-card > .owner.loot-owner {
 display:flex!important;align-items:center;gap:2px;width:auto!important;max-width:74px;height:24px!important;padding:0 2px!important;
 color:#ecdfbb;font:600 12px/16px system-ui;background:#1c2c22e8;border-radius:4px;
}
body[data-progression="xp"] #handSection #hand > .ability.loot-card > .owner.loot-owner .loot-glyph {width:20px;height:20px}
body[data-progression="xp"] #handSection #hand > .ability.loot-card > .cost.loot-cost {min-width:30px;min-height:24px;height:24px;padding:1px 3px;font:600 14px/18px system-ui;white-space:nowrap}
body[data-progression="xp"] #handSection #hand > .ability.loot-card > .ability-art {padding-top:23px;background:radial-gradient(ellipse,#84795225,transparent 78%);border-color:#a99d7559}
body[data-progression="xp"] #handSection #hand > .ability.loot-card > .ability-art > .loot-effect-art {width:100%;height:100%;min-height:0;object-fit:contain;object-position:center}
body[data-progression="xp"] #handSection #hand > .ability.loot-card > .effect-copy {font-size:14px!important;line-height:16px!important;padding:1px 2px!important}

/* Three substantial portrait choices. Labels and exact effects have natural
   height; illustration takes the remainder, with no text clamping. */
.loot-reward-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;min-width:0;min-height:0;padding:5px 5px 9px;align-items:stretch}
.loot-reward-card {
 position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(64px,1fr) auto auto auto;
 gap:3px;min-width:0;min-height:200px;height:100%;padding:31px 6px 5px;border:2px solid #cfc3a2;border-radius:10px;
 background:radial-gradient(ellipse at 50% 24%,#514d3b,#17271e 80%);color:#fff0cf;text-align:center;
 box-shadow:inset 0 0 0 1px #ddcba55e,0 4px 0 #4b4939,0 7px 12px #0008;white-space:normal;
}
.loot-reward-card .loot-reward-art {display:block;grid-column:1;grid-row:1;min-width:0;min-height:0;height:100%}
.loot-reward-card .loot-title {grid-column:1;grid-row:2;margin:0;padding:0;font:700 18px/20px Georgia,serif;color:#fff0cf;white-space:normal}
.loot-reward-card .loot-effect {grid-column:1;grid-row:3;display:block;margin:0;padding:1px 3px;font:14px/17px system-ui;color:#f5ecd8}
.loot-reward-card > .loot-tags {grid-column:1;grid-row:4;border-top:1px solid #a99d755e}
.loot-reward-card > .loot-owner {position:absolute;inset:4px auto auto 5px;display:flex!important;align-items:center;gap:3px;color:#ecdfbb;font:600 12px/20px system-ui}
.loot-reward-card > .loot-cost {position:absolute;inset:4px 5px auto auto;display:block;min-height:23px;padding:1px 4px;border:1px solid #7ad4ff;border-radius:5px;background:#18394e;color:#c8f2ff;font:600 14px/20px system-ui}
.loot-reward-card > .loot-cost.free-cost {border-color:#b4c994;background:#1c3529;color:#e1efd0}
.loot-reward-card:is(:hover,:focus-visible) {outline:3px solid #c7ffb0;outline-offset:2px;box-shadow:inset 0 0 0 1px #fff0c582,0 4px 0 #4b4939,0 9px 14px #000a}
.loot-resource-card {grid-template-rows:minmax(90px,1fr) auto auto;padding-top:6px;border-color:#c3b87e}
.loot-resource-art {display:flex;align-items:center;justify-content:center;grid-row:1;min-height:0;gap:3px}
.loot-resource-art > img {display:block;min-width:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #000a)}
.loot-resource-art:has(img+img) > img {width:48%}
.loot-resource-amount {display:block;grid-row:2;font:700 23px/26px Georgia,serif;color:#ffdf99}
.loot-resource-note {display:block;grid-row:3;font:14px/18px system-ui;color:#e0e6cc}

@media(max-width:700px) and (min-height:501px) {
 .loot-reward-options {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:5px 6px 12px;justify-content:flex-start}
 .loot-reward-options > .loot-reward-card {flex:0 0 240px;width:240px;height:240px;min-height:240px;scroll-snap-align:center}
}
@media(max-height:500px) {
 .loot-reward-options {gap:8px;padding:3px 4px 8px}
 .loot-reward-card {min-height:140px;padding:28px 4px 3px;grid-template-rows:minmax(34px,1fr) auto auto auto;gap:2px}
 .loot-reward-card .loot-title {font-size:14px;line-height:16px}
 .loot-reward-card .loot-effect {font-size:14px;line-height:16px;padding:0 2px}
 .loot-reward-card > .loot-cost {font-size:14px;line-height:18px;min-height:20px}
 .loot-resource-card {padding-top:3px;grid-template-rows:minmax(55px,1fr) auto auto}
 .loot-resource-amount {font-size:20px;line-height:23px}
}
@media(prefers-reduced-motion:reduce) {.loot-reward-options {scroll-behavior:auto}}