/* Card chrome owns its space. Load after style.css and ui-ornaments.css.
   XP contract: .hero-body > .xp-ribbon > .experience-meter. */
#game .hero{--card-footer:42px;--card-head:23px}
#game .hero:has(.promote){--card-footer:65px}
#game .hero:has(.xp-ribbon){--card-footer:64px}
#game .hero:has(.promote):has(.xp-ribbon){--card-footer:87px}
#game .hero>img{inset:var(--card-head) 3px var(--card-footer);width:calc(100% - 6px);height:calc(100% - var(--card-head) - var(--card-footer));object-fit:contain;object-position:center}
#game .hero>.hero-body{display:grid;grid-template-columns:minmax(12px,1fr) auto;grid-template-rows:minmax(0,1fr) 18px 22px auto auto;gap:0 4px;padding:23px 3px 2px;background:none}
#game .hero h3,#game .hero:has(.promote) h3,#game .hero:not(:has(.promote)) h3{position:static;grid-column:1/-1;grid-row:2;display:block;min-width:0;margin:0;padding:1px 0;font-size:14px;line-height:16px;background:#14271ff2;border:0;text-align:center}
#game .hero .rank-badge{top:2px;left:auto;right:3px;bottom:auto;transform:none;height:18px;min-width:18px;font-size:12px}
#game .hero>.role-seal{top:2px;left:3px;right:auto;bottom:auto;width:19px;height:19px}
#game .hero .hp{position:static;grid-row:3;grid-column:2;align-self:center;justify-content:center;min-width:0;font-size:14px;line-height:18px;padding:0 2px;border:0;border-radius:0;box-shadow:none;background:#14271f}
#game .hero .hp .icon{display:none}
#game .hero .health-track,#game .hero:not(:has(.promote)) .health-track{position:static;grid-row:3;grid-column:1;align-self:center;margin:0;height:8px;width:100%}
#game .hero-body>.promote{position:static;grid-row:5;grid-column:1/-1;transform:none;width:100%;min-height:23px;height:23px;padding:1px 2px;border-radius:3px;font-size:14px}
#game .hero-body>.promote span{position:static;display:inline;font-size:14px;color:inherit;text-shadow:none}
#game .hero .guard{top:3px;right:27px;font-size:12px;line-height:16px;padding:0 2px}
#game .hero .guard+.guard{right:52px;top:3px}
#game .hero .stats{top:26px;left:auto;right:3px}
#game .hero-body>.xp-ribbon{position:static;grid-row:4;grid-column:1/-1;min-width:0;padding:1px 0;background:#21152d}
#game .xp-ribbon>.experience-meter{position:relative;isolation:isolate;min-height:20px;line-height:18px;width:100%;margin:0;font-size:12px;border:1px solid #cf9df0;background:#21152d;overflow:hidden;color:#fff1ff;text-align:center}
#game .xp-ribbon>.experience-meter>span{position:relative;display:block;z-index:1;padding:0 2px;font-size:12px;line-height:18px;white-space:nowrap}
#game .xp-ribbon>.experience-meter>i{position:absolute;inset:0 auto 0 0;z-index:0;background:linear-gradient(90deg,#69349b,#a266d0)}

#game .enemy{--enemy-footer:61px;--enemy-head:19px}
#game .enemy>img{inset:var(--enemy-head) 3px var(--enemy-footer);width:calc(100% - 6px);height:calc(100% - var(--enemy-head) - var(--enemy-footer));object-fit:contain;object-position:center}
#game .enemy>.enemy-copy{display:grid;grid-template-columns:minmax(12px,1fr) auto;grid-template-rows:minmax(0,1fr) 18px 22px auto;gap:0 3px;padding:19px 3px 3px;background:none}
#game .enemy h3{grid-row:2;grid-column:1/-1;margin:0;padding:1px 0;font-size:14px;line-height:16px;background:#1e251b}
#game .enemy .hp{position:static;grid-row:3;grid-column:2;align-self:center;justify-content:center;padding:0 2px;border:0;border-radius:0;box-shadow:none;background:#2b241c;font-size:14px;line-height:18px}
#game .enemy .hp .icon{width:12px;height:12px}
#game .enemy .health-track{grid-row:3;grid-column:1;align-self:center;margin:0;height:8px;width:100%}
#game .enemy .intent{grid-row:4;grid-column:1/-1;min-height:18px;padding:1px 0;font-size:12px;line-height:16px;background:#211f17}
#game .enemy .role{top:2px;left:3px;right:3px;font-size:12px;line-height:15px}

/* Costs and emblems sit above the art window; effects sit below it. */
#game .ability{--ability-copy:45px;padding-top:31px;padding-bottom:3px;gap:2px}
#game .ability .ability-art{inset:31px 3px var(--ability-copy);overflow:visible}
#game .ability .ability-art img{height:100%;width:100%;object-fit:contain;object-position:center}
#game .ability .ability-art:after{display:none}
#game .ability .cost{top:0;left:2px;height:28px;min-width:28px;font-size:20px}
#game .ability .cost .icon{width:20px;height:20px}
#game .ability .mana-cost{top:4px;left:35px;font-size:12px;line-height:20px}
#game .ability .owner{top:2px;right:3px}
#game .ability .owner .role-emblem{width:23px;height:23px}
#game .ability strong{font-size:14px;line-height:16px;min-height:18px;padding:1px 0;background:#14271ff2}
#game .ability .effect-strip{min-height:21px;margin:0;padding:2px 0;background:#11231f;font-size:12px}
#game .ability .effect-token b{font-size:14px}

/* Inspection has its own header/footer rails inside the art column. */
#cardInspection .inspection-art{padding:37px 3px 49px;display:flex;align-items:center;justify-content:center}
#cardInspection .inspection-art>img{width:100%;height:100%;min-height:0;object-fit:contain}
#cardInspection .inspection-rank{top:2px;left:4px;font-size:16px;padding:4px 6px}
#cardInspection .inspection-role{top:2px;right:5px}
#cardInspection.pinned .inspection-role{top:2px;right:44px}
#cardInspection .inspection-role .role-emblem{width:29px;height:29px}
#cardInspection .inspection-art .cost{bottom:3px;left:4px;font-size:24px;min-height:38px;padding:2px 5px;border-radius:5px}
#cardInspection .inspection-art .cost .icon{width:28px;height:28px}
#cardInspection .inspection-art .mana-cost{bottom:7px;right:4px;left:auto;top:auto;font-size:16px;padding:2px}
#cardInspection .inspection-art .mana-cost .icon{width:19px;height:19px}
#cardInspection .inspection-copy{font-size:14px}
#cardInspection .inspection-rules{font-size:14px}
#cardInspection .inspection-rule-note,#cardInspection .inspection-subtitle{font-size:12px}

/* In short card rows, a separate side portrait keeps the copy readable. */
@media(max-height:700px){
 #game .ability{width:150px;max-width:160px;flex-basis:150px;padding:3px 3px 3px 52px;justify-content:center;--ability-copy:0px}
 #game .ability .ability-art{inset:29px auto 3px 3px;width:44px}
 #game .ability .cost{top:0;left:2px;height:27px;min-width:27px}
 #game .ability .mana-cost{top:4px;left:34px}
 #game .ability .owner{top:2px;right:3px}
 #game .ability strong{margin-top:25px}
 #game .ability .effect-strip{flex-wrap:wrap;gap:2px 3px;line-height:14px}
}
@media(max-height:500px){
 #game .hero:has(.promote){--card-footer:42px}
 #game .hero:has(.promote):has(.xp-ribbon){--card-footer:64px}
 #game .hero-body>.promote{display:none}
 #game .enemy{--enemy-footer:57px;--enemy-head:3px}
 #game .enemy>.enemy-copy{padding-top:3px}
 #game .ability{max-width:180px;flex-basis:170px;width:170px;padding-left:45px}
 #game .ability .ability-art{width:37px;top:3px}
 #game .ability .cost{left:44px;height:23px;min-width:23px;font-size:17px}
 #game .ability .cost .icon{width:17px;height:17px}
 #game .ability .mana-cost{left:72px;top:2px;line-height:18px}
 #game .ability .owner{right:2px;top:1px}
 #game .ability .owner .role-emblem{width:20px;height:20px}
 #game .ability strong{margin-top:22px;min-height:16px;line-height:15px}
 #game .ability .effect-strip{min-height:18px;padding:0 1px}
 #cardInspection .inspection-art{padding-top:36px;padding-bottom:45px}
 #cardInspection.pinned .inspection-role{right:5px;top:2px}
}
/* Formation containers with enough width can exchange height for a side portrait.
   Narrow multi-hero formations retain portrait cards and readable chrome. */
@container (min-width:230px) and (max-height:155px){
 #game .hero-row>.hero:only-of-type{width:min(145px,calc(100cqw - 70px))}
 #game .hero-row>.hero:only-of-type>img{inset:23px auto 3px 3px;width:35%;height:calc(100% - 26px)}
 #game .hero-row>.hero:only-of-type>.hero-body{padding-left:calc(35% + 6px);grid-template-rows:minmax(0,1fr) 18px 22px auto auto}
}
#game .hero .hp b{font-weight:700}#game .hero .hp small{font-size:12px}#game .xp-ribbon{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:2px;padding:0;min-height:22px}#game .xp-ribbon:has(button){grid-template-columns:minmax(0,1fr) 23px}#game .xp-ribbon>span{display:none}#game .xp-ribbon>button{width:23px;min-width:23px;min-height:22px;height:22px;line-height:18px;font-size:18px;padding:0;background:#69448d;border-color:#d2a2f0}#game .xp-ribbon>.experience-meter,#game .xp-ribbon>.experience-meter>span{font-size:14px;line-height:20px;height:22px}
@container (min-width:160px) and (max-height:155px){#game .hero-row>.hero:only-of-type{width:min(145px,calc(100cqw - 68px));--xp-band:0px}#game .hero-row>.hero:only-of-type:has(.xp-ribbon){--xp-band:22px}#game .hero-row>.hero:only-of-type>img{inset:21px auto calc(var(--xp-band) + 4px) 3px;width:35%;height:calc(100% - 25px - var(--xp-band))}#game .hero-row>.hero:only-of-type>.hero-body{padding:21px 3px 2px calc(35% + 6px);grid-template-rows:minmax(0,1fr) 16px 18px var(--xp-band) auto}#game .hero-row>.hero:only-of-type .hp{font-size:14px;line-height:16px;gap:0}#game .hero-row>.hero:only-of-type .hp small{font-size:12px}#game .hero-row>.hero:only-of-type h3{font-size:14px;line-height:16px;padding:0}#game .hero-row>.hero:only-of-type .xp-ribbon{position:absolute;left:3px;right:3px;bottom:2px;height:22px}}
@media(max-height:500px){#game .hero-row:has(.hero~.hero) .hero{--card-head:15px;--card-footer:54px}#game .hero-row:has(.hero~.hero) .hero-body{padding-top:15px;grid-template-rows:minmax(0,1fr) 16px 18px auto auto}#game .hero-row:has(.hero~.hero) .role-seal{width:14px;height:14px;top:0}#game .hero-row:has(.hero~.hero) .rank-badge{top:0;height:14px;line-height:13px}#game .hero-row:has(.hero~.hero) .hp-max{display:none}}
#game .hero>.activation-badge{position:absolute;top:3px;left:25px;right:24px;text-align:center;font-size:12px;line-height:16px;color:#d8eac2;z-index:3;background:#14271f}.experience-meter{display:grid;grid-template-columns:minmax(8px,1fr) auto;align-items:center;gap:3px;border:0;background:none}.experience-meter>.xp-track{position:relative;display:block;min-width:8px;height:8px;padding:0;overflow:hidden;background:#21152d;border:1px solid #cf9df0}.experience-meter>.xp-track>i{display:block;position:static;height:100%;background:linear-gradient(90deg,#69349b,#a266d0)}.experience-meter>.xp-value{padding:0;white-space:nowrap}#game .xp-ribbon>.experience-meter{display:grid;grid-template-columns:minmax(8px,1fr) auto;gap:3px;border:0;background:none;overflow:visible}#game .xp-ribbon>.experience-meter>.xp-track{height:8px;padding:0;line-height:8px;border:1px solid #cf9df0;background:#21152d}#game .xp-ribbon>.experience-meter>.xp-value{font-size:14px;height:20px;line-height:20px;padding:0}
@media(max-height:500px){#game .hero-row:has(.hero~.hero) .activation-badge{font-size:0;left:23px;right:auto;top:5px;width:6px;height:6px;border-radius:50%;background:#b5d594}}

/* Narrow battlefields reserve a full line for the announced target. */
@media(max-width:700px) and (min-height:501px){#game .enemy{width:min(106px,calc((100cqw - 24px)/3));--enemy-head:3px;--enemy-footer:58px}#game .enemy>.enemy-copy{padding-top:3px}#game .enemy .intent{white-space:nowrap}}

/* XP owns a full-width footer and a real pointer target above hero selection. */
#game .hero-row>.hero:has(.xp-ribbon)>.hero-body{padding-bottom:26px;grid-template-rows:minmax(0,1fr) 16px 18px}
#game .hero-row>.hero:has(.xp-ribbon)>.hero-body>.xp-ribbon{position:absolute;left:3px;right:3px;bottom:2px;width:auto;height:22px}
#game .xp-ribbon>button{pointer-events:auto;position:relative;z-index:8}

#game .hero-row>.hero:has(.xp-ribbon)>.hero-body>.xp-ribbon{grid-area:auto}