/* Hand-card component. Load LAST, after field-board.css.
   The board owns allocation and paging. Give #hand at least 180px block size
   (160px in short landscape); never shrink copy or clip rules to fit a page.
   Only hand abilities are restyled. Inspection, hero and rank cards keep their
   own contracts. The extra #handSection scope retires earlier side-art rules. */
body[data-progression="xp"] #handSection #hand {
 --portrait-card-width:144px;
 --portrait-sigil:30px;
 display:flex;
 flex-wrap:nowrap;
 align-items:stretch;
 justify-content:center;
 gap:14px;
 min-width:0;
 min-height:0;
 padding:5px 7px 8px;
 overflow:visible;
}
body[data-progression="xp"] #handSection.detailed-hand #hand {--portrait-card-width:176px}

body[data-progression="xp"] #handSection #hand > .ability {
 position:relative;
 isolation:isolate;
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:minmax(60px,1fr) auto auto;
 align-items:stretch;
 justify-content:stretch;
 align-content:stretch;
 gap:3px;
 flex:0 0 var(--portrait-card-width);
 width:var(--portrait-card-width);
 min-width:0;
 max-width:none;
 height:100%;
 min-height:0;
 max-height:none;
 padding:4px!important;
 border:2px solid var(--role);
 border-radius:10px;
 background:radial-gradient(ellipse at 50% 27%,color-mix(in srgb,var(--role) 22%,#24392c),#10231c 76%);
 color:#fff1d6;
 text-align:center;
 box-shadow:inset 0 0 0 1px #e8d4a751,inset 0 0 0 4px #10221b,0 4px 0 color-mix(in srgb,var(--role) 45%,#17251a),0 7px 9px #0009;
 transform:perspective(850px) rotateX(2deg);
 transform-origin:50% 100%;
 transition:transform .16s ease,box-shadow .16s ease;
 overflow:visible;
}

/* The face stays portrait-shaped at rest. Hover raises the whole object,
   without moving the copy independently or covering another card's cost. */
body[data-progression="xp"] #handSection #hand > .ability:hover,
body[data-progression="xp"] #handSection #hand > .ability:focus-visible {
 z-index:18;
 transform:perspective(850px) translateY(-3px) rotateX(0);
 box-shadow:inset 0 0 0 1px #fff0c582,inset 0 0 0 4px #10221b,0 5px 0 color-mix(in srgb,var(--role) 55%,#17251a),0 10px 14px #000a;
}
body[data-progression="xp"] #handSection #hand > .ability.action-available {
 outline:2px solid #7cdf7c;
 outline-offset:1px;
}
body[data-progression="xp"] #handSection #hand > .ability.selected {
 outline:3px double #fff0b3;
 outline-offset:2px;
}
body[data-progression="xp"] #handSection #hand > .ability[aria-disabled="true"] {
 opacity:.72;
 filter:saturate(.65);
 cursor:help;
 outline:none;
}
body[data-progression="xp"] #handSection #hand > .ability[aria-disabled="true"]:is(:hover,:focus-visible) {
 opacity:1;
 filter:none;
}
body[data-progression="xp"] #handSection #hand > .ability:focus-visible {
 outline:3px solid #c7ffb0!important;
 outline-offset:3px;
}

/* Paint occupies a complete window, never the old narrow side rail. */
body[data-progression="xp"] #handSection #hand > .ability > .ability-art {
 position:relative;
 grid-column:1;
 grid-row:1;
 z-index:0;
 inset:auto!important;
 display:flex;
 align-items:stretch;
 justify-content:center;
 width:100%!important;
 height:100%!important;
 min-width:0;
 min-height:0;
 margin:0;
 padding:24px 1px 0;
 border:1px solid color-mix(in srgb,var(--role) 40%,transparent);
 border-radius:6px 6px 3px 3px;
 background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--role) 19%,transparent),#071b1575 78%);
 overflow:visible!important;
 pointer-events:none;
}
body[data-progression="xp"] #handSection #hand > .ability > .ability-art::after {display:none}
body[data-progression="xp"] #handSection #hand .ability-art > .effect-art {
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:2px;
 width:100%!important;
 height:100%!important;
 min-width:0;
 min-height:0;
 padding:0!important;
 background:none;
}
body[data-progression="xp"] #handSection #hand .effect-art-medallion {
 display:flex;
 align-items:center;
 justify-content:center;
 flex:1 1 0!important;
 width:100%!important;
 height:100%!important;
 min-height:0;
 max-height:100%!important;
 aspect-ratio:auto;
 padding:0;
 border:0;
 border-radius:0;
 background:none;
 box-shadow:none;
}
body[data-progression="xp"] #handSection #hand .effect-art-main {
 width:100%!important;
 height:100%!important;
 min-height:0;
 max-height:100%!important;
 padding:0!important;
 object-fit:contain;
 object-position:50% 50%;
 filter:drop-shadow(0 3px 3px #000a);
}
body[data-progression="xp"] #handSection #hand .effect-art-painted {display:block!important}
body[data-progression="xp"] #handSection #hand .effect-art-fallback {display:none!important}
body[data-progression="xp"] #handSection #hand .effect-art-secondary {
 display:flex;
 flex:none;
 gap:5px;
 height:16px;
}
body[data-progression="xp"] #handSection #hand .effect-art-detail {width:16px;height:16px}
body[data-progression="xp"] #handSection #hand .effect-art-buff {
 right:1px;
 bottom:1px;
 width:23px;
 height:23px;
}

/* These remain real HTML. Their natural height determines the art remainder.
   No ellipsis, line clamp or hidden overflow may conceal an effect. */
body[data-progression="xp"] #handSection #hand > .ability > strong {
 position:static;
 grid-column:1;
 grid-row:2;
 display:block;
 align-self:stretch;
 min-width:0;
 min-height:0;
 margin:0!important;
 padding:2px 1px!important;
 font:700 16px/18px Georgia,serif!important;
 color:#fff0cc;
 white-space:normal;
 overflow-wrap:normal;
 background:#15291ff2;
 border-top:1px solid color-mix(in srgb,var(--role) 45%,transparent);
}
body[data-progression="xp"] #handSection #hand > .ability > .effect-copy {
 position:static;
 grid-column:1;
 grid-row:3;
 display:block;
 align-self:stretch;
 min-width:0;
 min-height:0;
 margin:0;
 padding:2px 3px!important;
 font:14px/17px system-ui,sans-serif!important;
 color:#fff0d5;
 white-space:normal;
 overflow-wrap:normal;
 background:#0d211bf2;
 border-radius:3px;
}

/* One consistent identity/cost rail. Free remains explicit; blue is Mana. */
body[data-progression="xp"] #handSection #hand > .ability > .owner {
 position:absolute;
 inset:3px auto auto 4px!important;
 display:block!important;
 width:var(--portrait-sigil)!important;
 height:var(--portrait-sigil)!important;
 margin:0;
 padding:0!important;
 border:0;
 background:none;
 z-index:3;
 pointer-events:none;
}
body[data-progression="xp"] #handSection #hand > .ability > .owner > .class-sigil {
 display:block;
 width:100%!important;
 height:100%!important;
 max-height:none!important;
 margin:0;
 object-fit:contain;
 filter:drop-shadow(0 2px 2px #000);
}
body[data-progression="xp"] #handSection #hand > .ability > .cost {
 position:absolute;
 inset:3px 4px auto auto!important;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:2px;
 min-width:28px;
 height:28px;
 min-height:28px;
 padding:1px 4px;
 font:700 18px/22px Georgia,serif;
 z-index:3;
}
body[data-progression="xp"] #handSection #hand > .ability > .cost .icon {width:20px;height:20px}
body[data-progression="xp"] #handSection #hand > .ability > .cost.free-cost {
 font:600 14px/20px system-ui,sans-serif;
 color:#e1efd0;
 border-color:#b4c994;
 background:#1c3529!important;
}
body[data-progression="xp"] #handSection #hand > .ability > .mana-cost {
 position:absolute;
 inset:33px 5px auto auto;
 font:14px/17px system-ui,sans-serif;
 z-index:3;
}

@media(max-width:700px) and (min-height:501px) {
 body[data-progression="xp"] #handSection #hand {--portrait-card-width:146px;gap:12px;padding-inline:4px}
}
@media(max-height:500px) {
 body[data-progression="xp"] #handSection #hand {--portrait-card-width:124px;--portrait-sigil:26px;gap:10px;padding:4px 5px 7px}
 body[data-progression="xp"] #handSection #hand > .ability {grid-template-rows:minmax(50px,1fr) auto auto;gap:2px}
 body[data-progression="xp"] #handSection #hand > .ability > .ability-art {padding-top:21px}
 body[data-progression="xp"] #handSection #hand > .ability > .cost {height:25px;min-height:25px;font-size:17px;line-height:20px}
 body[data-progression="xp"] #handSection #hand > .ability > strong {font-size:14px!important;line-height:16px!important}
}
@media(prefers-reduced-motion:reduce) {
 body[data-progression="xp"] #handSection #hand > .ability,
 body[data-progression="xp"] #handSection #hand > .ability:is(:hover,:focus-visible) {transition:none;transform:none!important}
}