/* Unit component reset. Load after the layout cascade, before portrait-cards.
   The root owns column widths and party paging. Native prefers 2:3 cards;
   narrow enemy groups may grow taller to preserve full rules above that ratio. */
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero,
body[data-progression="xp"] #game > .encounter #enemies > .enemy {
 position:relative;
 isolation:isolate;
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:minmax(0,1fr) auto;
 align-self:center;
 justify-self:center;
 width:100%!important;
 max-width:150px!important;
 height:100%!important;
 max-height:280px!important;
 min-width:0;
 min-height:0;
 aspect-ratio:2/3;
 margin:0;
 padding:20px 3px 3px;
 border:2px solid var(--role,#b9c69a);
 border-radius:9px;
 background:radial-gradient(ellipse at 50% 30%,#3d51409c,#11241bf5 78%);
 box-shadow:inset 0 0 0 1px #e8d4a751,0 4px 0 #243426,0 7px 9px #0008;
 overflow:visible;
}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero {max-height:225px!important}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero > img,
body[data-progression="xp"] #game > .encounter #enemies > .enemy > img {
 position:static!important;
 inset:auto!important;
 z-index:0;
 grid-row:1;
 grid-column:1;
 align-self:stretch;
 width:100%!important;
 height:100%!important;
 min-width:0;
 min-height:0;
 margin:0;
 padding:0;
 object-fit:contain;
 object-position:center bottom!important;
 pointer-events:none;
}

/* Static copy below a flexible art row prevents every previous absolute
   footer/side-art/@container rule from spending the same space twice. */
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero:has(.xp-ribbon) > .hero-body {
 position:static!important;
 inset:auto!important;
 z-index:1;
 display:grid!important;
 grid-row:2;
 grid-column:1;
 grid-template-columns:minmax(0,1fr) auto!important;
 grid-template-rows:auto auto auto auto!important;
 align-items:center;
 gap:2px 3px;
 min-width:0;
 min-height:0;
 margin:0;
 padding:0!important;
 background:#12261fee;
 pointer-events:none;
}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .hero-body > h3 {
 position:static!important;
 grid-row:1!important;
 grid-column:1/-1!important;
 display:block;
 min-width:0;
 min-height:0;
 margin:0!important;
 padding:0!important;
 font:700 18px/20px Georgia,serif!important;
 text-align:center;
 white-space:normal;
 overflow-wrap:normal;
 background:none;
}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .hero-body > .hp {
 position:static!important;
 inset:auto!important;
 grid-row:2!important;
 grid-column:2!important;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:0;
 min-width:0;
 margin:0;
 padding:0!important;
 border:0;
 border-radius:0;
 background:none;
 box-shadow:none;
 font:700 18px/20px system-ui!important;
 white-space:nowrap;
}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .hp > .hp-max {display:inline!important;font-size:12px;line-height:18px}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .hp > .icon {display:none}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .hero-body > .health-track {
 position:relative!important;
 inset:auto!important;
 grid-row:2!important;
 grid-column:1!important;
 display:block;
 width:100%;
 height:7px!important;
 min-width:6px;
 margin:0!important;
}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .hero-body > .stats {
 position:static!important;
 inset:auto!important;
 grid-row:3;
 grid-column:1/-1;
 display:flex;
 justify-content:center;
 align-items:center;
 flex-wrap:wrap;
 gap:2px 6px;
 min-width:0;
 margin:0;
 font:12px/16px system-ui;
}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .stats > span {display:flex;align-items:center;gap:2px;padding:0;background:none}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .stats .icon {width:12px;height:12px}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero:has(.xp-ribbon) > .hero-body > .xp-ribbon {
 position:static!important;
 inset:auto!important;
 grid-row:4!important;
 grid-column:1/-1!important;
 display:grid;
 grid-template-columns:minmax(0,1fr);
 width:100%!important;
 min-width:0;
 height:22px!important;
 min-height:22px;
 margin:0;
 padding:0!important;
 background:none;
 pointer-events:auto;
}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .xp-ribbon:has(button) {grid-template-columns:minmax(0,1fr) 23px!important}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .hero-body > .role {display:none}

/* Keep real targeting and earned-upgrade controls above the art. */
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero > .hero-select {position:absolute;inset:0;z-index:2}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero > .role-seal {position:absolute!important;inset:2px auto auto 3px!important;width:18px!important;height:18px!important;z-index:4;pointer-events:none}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .rank-badge {position:absolute!important;inset:2px 3px auto auto!important;transform:none;width:auto;min-width:17px;height:17px;font:12px/15px system-ui;z-index:4}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero > .short-position {position:absolute!important;inset:2px 24px auto!important;display:block!important;width:auto;height:17px;font:12px/16px system-ui;text-align:center;z-index:3;background:#15291fe8}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero > .activation-badge {display:none}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .guard {position:absolute!important;inset:23px 3px auto auto;display:flex!important;align-items:center;gap:2px;z-index:4;padding:0 2px;font:12px/16px system-ui;background:#183224ed}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .guard + .guard {top:41px}
body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .xp-ribbon > button {position:relative;z-index:8;pointer-events:auto}

body[data-progression="xp"] #game > .encounter #enemies {
 display:flex!important;
 flex-direction:row!important;
 align-items:stretch!important;
 justify-content:center;
 gap:6px;
 min-width:0;
 min-height:0;
}
body[data-progression="xp"] #game > .encounter #enemies > .enemy {flex:1 1 0;max-height:280px!important;border-color:#c9a37d;--role:#e6b99b}
body[data-progression="xp"] #game > .encounter #enemies > .enemy > .enemy-copy {
 position:static!important;
 inset:auto!important;
 grid-row:2;
 grid-column:1;
 display:flex!important;
 flex-direction:column;
 align-items:stretch;
 justify-content:flex-end!important;
 gap:2px;
 min-width:0;
 min-height:0;
 margin:0;
 padding:0!important;
 background:#17251def;
 pointer-events:none;
}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .enemy-copy > h3 {
 position:static;
 display:block;
 min-width:0;
 min-height:0;
 margin:0!important;
 padding:0!important;
 font:700 18px/20px Georgia,serif!important;
 white-space:normal;
 overflow-wrap:normal;
 text-align:center;
}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .enemy-full-name {display:inline}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .enemy-short-name {display:none}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .hp {position:static!important;inset:auto!important;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px;padding:0!important;margin:0;min-height:20px;font:700 18px/20px system-ui!important;border:0;background:none;box-shadow:none}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .hp > .icon {display:none}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .health-track {position:relative!important;inset:auto!important;display:block;height:7px!important;flex:none;margin:0!important}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .enemy-signature {display:block;font:12px/15px system-ui;color:#f5daa8;white-space:normal;overflow-wrap:normal;text-align:center}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .intent {position:static;display:block;min-height:0!important;white-space:normal!important;overflow-wrap:normal;font:14px/17px system-ui!important;padding:0!important;margin:0!important;background:none;text-align:center}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .intent > .icon {display:inline-block;width:13px;height:13px;vertical-align:-2px}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .enemy-status {display:block;font:12px/15px system-ui;white-space:normal}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .enemy-copy > .role {position:absolute;inset:2px 3px auto auto;display:flex;align-items:center;gap:2px;font:12px/16px system-ui}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .role > .icon {width:12px;height:12px}
body[data-progression="xp"] #game > .encounter #enemies > .enemy .enemy-rank {inset:2px auto auto 3px;z-index:4;font:12px/16px system-ui}

@media(max-width:700px), (max-height:500px) {
 body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero,
 body[data-progression="xp"] #game > .encounter #enemies > .enemy {padding-top:18px;max-height:100%!important}
 body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .hero-body > h3,
 body[data-progression="xp"] #game > .encounter #enemies > .enemy .enemy-copy > h3 {font-size:14px!important;line-height:16px!important}
 body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero .hero-body > .hp,
 body[data-progression="xp"] #game > .encounter #enemies > .enemy .hp {font-size:16px!important;line-height:18px!important;min-height:18px}
 body[data-progression="xp"] #game > .formation :is(#front,#rear) > .hero:has(.xp-ribbon) > .hero-body {gap:1px 3px}
 body[data-progression="xp"] #game > .encounter #enemies > .enemy > .enemy-copy {gap:1px}
}