/* Stage frames indicate actual progression, not an invented random rarity. */
#draw-dialog .info-card[data-card-quality="foundation"]{border:2px solid var(--family-color);border-radius:5px;box-shadow:0 5px 16px #0009}
#draw-dialog .info-card[data-card-quality="developed"]{border:4px ridge var(--family-color);border-radius:12px 12px 4px 4px}
#draw-dialog .info-card[data-card-quality="hero-basic"],#evolution-dialog .info-card[data-card-quality="hero-basic"]{border:2px solid var(--family-color);border-radius:9px;box-shadow:inset 0 0 0 2px #101818,0 5px 16px #0009}
#draw-dialog .info-card:is([data-card-quality="hero-advanced"],[data-card-quality="hero-high"]),#evolution-dialog .info-card:is([data-card-quality="hero-advanced"],[data-card-quality="hero-high"]){border:6px double var(--family-color);border-top:8px ridge var(--family-color);border-radius:24px 24px 8px 8px;box-shadow:inset 0 0 26px color-mix(in srgb,var(--family-color) 18%,transparent),0 0 20px color-mix(in srgb,var(--family-color) 32%,transparent),0 6px 16px #000b}
.info-card[data-card-quality="hero-basic"] .card-family-badge::before{content:'Ⅰ';color:inherit}
.info-card:is([data-card-quality="hero-advanced"],[data-card-quality="hero-high"]) .card-family-badge::before{content:'Ⅱ';color:inherit}
#hud .held-card[data-card-quality="hero-basic"]{border:2px solid var(--family-color);border-radius:6px;box-shadow:none}
#hud .held-card:is([data-card-quality="hero-advanced"],[data-card-quality="hero-high"]){border:4px double var(--family-color);border-radius:14px 14px 4px 4px;box-shadow:0 0 8px color-mix(in srgb,var(--family-color) 30%,transparent)}
.card-quality-label{color:#d8cba9;font-weight:700}

/* Grade is shape; existing hero attributes have distinct colour families. */
[data-card-attribute="strength"]{--family-color:#ef977d;--family-panel:#653a2b;--family-deep:#291b17}
[data-card-attribute="agility"]{--family-color:#7fd3a1;--family-panel:#245641;--family-deep:#102a20}
[data-card-attribute="intelligence"]{--family-color:#81b7ef;--family-panel:#294966;--family-deep:#152338}
[data-card-attribute="economy"]{--family-color:#e9d380;--family-panel:#645529;--family-deep:#2e2718}
/* A hero's hue belongs to its attribute; rank changes saturation and ornament. */
[data-card-family="hero"][data-card-attribute="strength"]{--hero-color:#ff896b;--hero-panel:#62362c;--hero-deep:#2b1916}
[data-card-family="hero"][data-card-attribute="agility"]{--hero-color:#71e9a8;--hero-panel:#20563c;--hero-deep:#10271d}
[data-card-family="hero"][data-card-attribute="intelligence"]{--hero-color:#79baff;--hero-panel:#28496d;--hero-deep:#142234}
[data-card-family="hero"][data-card-attribute="economy"]{--hero-color:#ffdb68;--hero-panel:#655020;--hero-deep:#2b2514}
[data-card-family="hero"][data-card-attribute="general"]{--hero-color:#c5a3ff;--hero-panel:#4e396c;--hero-deep:#251b32}
[data-card-family="hero"][data-card-attribute]{--family-color:var(--hero-color);--family-panel:var(--hero-panel);--family-deep:var(--hero-deep)}
[data-card-family="hero"][data-card-quality="hero-basic"]{--family-color:color-mix(in srgb,var(--hero-color) 58%,#94978f);--family-panel:color-mix(in srgb,var(--hero-panel) 60%,#26302d)}
#draw-dialog [data-card-quality="hero-basic"] .card-family-badge,#evolution-dialog [data-card-quality="hero-basic"] .card-family-badge{border-radius:5px 5px 0 0;background:var(--family-deep);color:var(--family-color);border-bottom:1px solid var(--family-color)}
#draw-dialog [data-card-quality="hero-basic"] .choice-main-icon,#evolution-dialog [data-card-quality="hero-basic"] .choice-main-icon{border:1px solid var(--family-color);border-radius:5px;box-shadow:0 0 0 3px var(--family-deep)}
#card-hover-detail[data-card-family="hero"],#card-dialog[data-card-family="hero"]{border:2px solid var(--family-color);background:linear-gradient(145deg,var(--family-panel),var(--family-deep))}
#card-hover-detail[data-card-quality="hero-high"],#card-dialog[data-card-quality="hero-high"]{border:4px double var(--family-color)}
.card-evolution-reward{border-top:1px solid #ffffff30;padding-top:7px;color:#f4df9d!important;font-weight:700}
.card-set-reward .card-evolution-reward{border:0;margin:4px 0 0!important;padding:0;font-size:12px!important;line-height:1.5!important;font-weight:400}
#draw-dialog .info-card>.card-narrative,#evolution-dialog .info-card>.card-narrative,.card-narrative{position:relative;inset:auto;display:block;flex:0 0 auto;min-height:36px;box-sizing:border-box;margin:0;padding:9px 12px;border-top:1px solid #ffffff30;background:#101a15;color:#f3e5bb;font-size:14px;line-height:20px;text-align:center;white-space:normal;overflow-wrap:anywhere;z-index:3}
#draw-dialog .info-card:has(>.card-narrative) .choice-copy{min-height:0;flex:1 1 auto;overflow-y:auto}
#hero-tier-choices{display:flex;gap:8px;margin:4px 0 10px}
#hero-tier-choices button{padding:6px 12px;color:#e8dcb5;background:#22382d;border:1px solid #8c9975}
#hero-tier-choices button[aria-pressed="true"]{border:2px solid #f4d68d}

/* Flavor has its own quiet line, separate from all effects and requirements. */
#draw-dialog .info-card>.card-narrative,#evolution-dialog .info-card>.card-narrative,.card-narrative{min-height:0;padding:6px 10px;font-size:11px;line-height:16px;color:#aab7ad;background:#101a1599;border-top:1px solid #ffffff18;font-weight:400}

/* Whole-set palettes are independent of each member's attribute and tags. */
[data-card-palette="preparation"]{--palette-color:#9fd78c;--palette-panel:#23432b;--palette-deep:#11251c}
[data-card-palette="basic"]{--palette-color:#c6b98c;--palette-panel:#514731;--palette-deep:#26231c}
[data-card-palette="strength"]{--palette-color:#ef977d;--palette-panel:#653a2b;--palette-deep:#291b17}
[data-card-palette="sword"]{--palette-color:#72d9e9;--palette-panel:#245666;--palette-deep:#102b35}
[data-card-palette="agility"]{--palette-color:#7fd3a1;--palette-panel:#245641;--palette-deep:#102a20}
[data-card-palette="intelligence"]{--palette-color:#81b7ef;--palette-panel:#294966;--palette-deep:#152338}
[data-card-palette="summon"]{--palette-color:#b4a0fa;--palette-panel:#59417e;--palette-deep:#241b3b}
[data-card-palette="general"]{--palette-color:#c0d2cf;--palette-panel:#303b3c;--palette-deep:#152421}
[data-card-palette="hero-strength"]{--palette-color:#ff896b;--palette-panel:#62362c;--palette-deep:#2b1916}
[data-card-palette="hero-agility"]{--palette-color:#71e9a8;--palette-panel:#20563c;--palette-deep:#10271d}
[data-card-palette="hero-intelligence"]{--palette-color:#79baff;--palette-panel:#28496d;--palette-deep:#142234}
[data-card-palette="hero-economy"]{--palette-color:#ffdb68;--palette-panel:#655020;--palette-deep:#2b2514}
[data-card-palette="hero-general"]{--palette-color:#c5a3ff;--palette-panel:#4e396c;--palette-deep:#251b32}
[data-card-family][data-card-palette]:not([data-card-palette=""]){--family-color:var(--palette-color);--family-panel:var(--palette-panel);--family-deep:var(--palette-deep)}
[data-card-family][data-card-palette^="hero-"][data-card-grade="initial"]{--family-color:color-mix(in srgb,var(--palette-color) 58%,#94978f);--family-panel:color-mix(in srgb,var(--palette-panel) 60%,#26302d)}
#card-hover-detail[data-card-palette]:not([data-card-palette=""]){border-color:var(--family-color);background:linear-gradient(145deg,var(--family-panel),var(--family-deep))}

/* Opening/basic frames, header bands and set titles share a hue; the face keeps its stage palette. */
[data-card-frame="economy"]{--card-frame-color:#d3bf83}
[data-card-frame="strength"]{--card-frame-color:#cf9b87}
[data-card-frame="intelligence"]{--card-frame-color:#91b3cd}
[data-card-frame="summon"]{--card-frame-color:#b6a3cf}
[data-card-frame="growth"]{--card-frame-color:#a6bd8c}
#draw-dialog .info-card[data-card-frame]:not([data-card-frame=""]),
#hud .held-card[data-card-frame]:not([data-card-frame=""]),
#card-dialog[data-card-frame]:not([data-card-frame=""]),
#card-hover-detail[data-card-frame]:not([data-card-frame=""]){border-color:var(--card-frame-color)}
#hud .held-card[data-card-frame]:not([data-card-frame=""]){border-bottom-color:var(--card-frame-color)!important}
#draw-dialog .info-card[data-card-frame]:not([data-card-frame=""])::after{border-color:var(--card-frame-color)}
#draw-dialog .info-card[data-card-frame]:not([data-card-frame=""]) .card-heading .card-family-badge{background:var(--card-frame-color);color:#17201b}
#draw-dialog .info-card[data-card-frame]:not([data-card-frame=""]) .card-heading .choice-set-title{color:var(--card-frame-color)}
#draw-dialog .info-card[data-card-frame]:not([data-card-frame=""]):is(:hover,.pointer-hover,:focus-visible){border-color:var(--card-frame-color);outline-color:var(--card-frame-color);box-shadow:0 0 24px color-mix(in srgb,var(--card-frame-color) 35%,transparent)}

/* Quiet rank effects: light stays on the frame, never over the card copy. */
:is(#draw-dialog,#evolution-dialog) .hero-rank-fx{position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;border:1px solid color-mix(in srgb,var(--family-color) 42%,transparent);box-shadow:inset 0 0 8px color-mix(in srgb,var(--family-color) 12%,transparent)}
:is(#draw-dialog,#evolution-dialog) [data-card-quality="hero-basic"] .choice-art{background:radial-gradient(ellipse at 50% 75%,color-mix(in srgb,var(--family-color) 13%,transparent),transparent 72%)}
:is(#draw-dialog,#evolution-dialog) :is([data-card-quality="hero-high"],[data-card-quality="hero-advanced"]) .hero-rank-fx{inset:-3px;border-color:color-mix(in srgb,var(--family-color) 65%,transparent);box-shadow:inset 0 0 10px color-mix(in srgb,var(--family-color) 17%,transparent),0 0 9px color-mix(in srgb,var(--family-color) 15%,transparent)}
:is(#draw-dialog,#evolution-dialog) :is([data-card-quality="hero-high"],[data-card-quality="hero-advanced"]) .hero-rank-fx::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;background:linear-gradient(125deg,transparent 36%,var(--family-color) 44%,#fff5d8 49%,var(--family-color) 54%,transparent 62%);background-size:300% 300%;background-position:100% 100%;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.45;animation:hero-frame-drift 9s ease-in-out infinite;pointer-events:none}
:is(#draw-dialog,#evolution-dialog) :is([data-card-quality="hero-high"],[data-card-quality="hero-advanced"]) .hero-rank-fx::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 12px 12px,#fff5d8 0 1px,var(--family-color) 2px,transparent 5px),radial-gradient(circle at calc(100% - 12px) 12px,#fff5d8 0 1px,var(--family-color) 2px,transparent 5px);opacity:.48;animation:hero-corner-light 9s ease-in-out infinite;pointer-events:none}
:is(#draw-dialog,#evolution-dialog) :is([data-card-quality="hero-high"],[data-card-quality="hero-advanced"]) .choice-art{background:radial-gradient(ellipse at 50% 78%,color-mix(in srgb,var(--family-color) 23%,transparent),transparent 72%),conic-gradient(from 155deg at 50% 80%,transparent 0deg 35deg,color-mix(in srgb,var(--family-color) 6%,transparent) 38deg 43deg,transparent 47deg 268deg,color-mix(in srgb,var(--family-color) 6%,transparent) 272deg 277deg,transparent 281deg)}
/* Hero focus uses the same edge treatment rather than a second full-face sweep. */
#draw-dialog .choice-card[data-card-family="hero"]::before,#evolution-dialog .evolution-card[data-card-family="hero"]::before{animation:none;opacity:0}
:is(#draw-dialog,#evolution-dialog) [data-card-family="hero"]:is(:hover,.pointer-hover,:focus-visible) .hero-rank-fx{border-color:var(--family-color)}
@keyframes hero-frame-drift{0%,18%{background-position:100% 100%;opacity:.18}48%{opacity:.65}76%,100%{background-position:0% 0%;opacity:.18}}
@keyframes hero-corner-light{0%,25%,80%,100%{opacity:.35}50%{opacity:.75}}
@media(prefers-reduced-motion:reduce){.hero-rank-fx::before,.hero-rank-fx::after{animation:none!important}.hero-rank-fx::before{background-position:50% 50%!important;opacity:.4!important}}