/* Element frames for the six cycle factions. A display option (Settings), not an unlock.
   Add el-storm / el-frost / el-verdant / el-jade / el-sun / el-spirit to the .card root.
   Neutral (None) and Hollow (Shade) are not in this file: Shade keeps the frame already in style.css.
   Adapted from the faction-quest pack (CSS baseline 26c4b9f) to the current compact card.
   Board and hand cards are not .lg: the stat badges sit on the art, so corner ornaments stay in the
   header and never share a box with ATK or DEF. Large detail cards (.lg) keep four corners, and the
   badges paint above them. ATK stays --red and DEF stays --blue. */

.card.el-storm{--el-tex:url(assets/tex_storm.webp);--el-scrim:linear-gradient(#0b142466,#0b142488);--el-edge:#5d86ff;--el-keyline:#9fb8ffaa;--el-glow:#4f7dffaa;
  --el-hdtx:#eef3ff;--el-tshadow:0 1px 2px #000;--el-banner:linear-gradient(90deg,#1b2a4d,#3657b8 50%,#1b2a4d);--el-bantx:#e6eeff;
  --el-tb:linear-gradient(#eef1f8e0,#dfe5f1e8),url(assets/tex_storm.webp) center/160px auto;--el-tbsolid:#e6ebf5;--el-tbshade:#6f86b833;--el-cost:#1b2a4d;--el-costtx:#e6eeff;
  --el-tl:url(assets/corner_storm_tl.webp);--el-tr:url(assets/corner_storm_tr.webp);--el-bl:url(assets/corner_storm_bl.webp);--el-br:url(assets/corner_storm_br.webp)}
.card.el-frost{--el-tex:url(assets/tex_frost.webp);--el-scrim:linear-gradient(#1f5f9a80,#13497ea0);--el-edge:#e4f6ff;--el-keyline:#ffffffee;--el-glow:#a8e0ffee;
  --el-hdtx:#f4fbff;--el-tshadow:0 1px 2px #06223f,0 0 4px #0b3a66;--el-banner:linear-gradient(#ffffff55,#ffffff00 60%),linear-gradient(90deg,#7fb6dc,#c4e7fb 50%,#7fb6dc);--el-bantx:#0b2540;
  --el-tb:linear-gradient(#ffffffb8,#f2f9ffc8),url(assets/tex_rime.webp) center/150px auto;--el-tbsolid:#f2f9ff;--el-tbshade:#6fb6e466;--el-cost:radial-gradient(circle at 35% 30%,#fff,#d6efff 60%,#9fd2f2);--el-costtx:#0b2540;
  --el-tl:url(assets/corner_frost_tl.webp);--el-tr:url(assets/corner_frost_tr.webp);--el-bl:url(assets/corner_frost_bl.webp);--el-br:url(assets/corner_frost_br.webp)}
.card.el-verdant{--el-tex:url(assets/tex_verdant.webp);--el-scrim:linear-gradient(#0a180c33,#0a180c55);--el-edge:#6fae4a;--el-keyline:#c9e39a99;--el-glow:#5fcf6a88;
  --el-hdtx:#f4f8e6;--el-tshadow:0 1px 2px #000;--el-banner:linear-gradient(90deg,#24451f,#3f7a32 50%,#24451f);--el-bantx:#eef6dc;
  --el-tb:linear-gradient(#f6f8ece0,#e8eed6e8),url(assets/tex_verdant.webp) center/160px auto;--el-tbsolid:#f0f4e2;--el-tbshade:#4f7a3a33;--el-cost:#eef4dc;--el-costtx:#24451f;
  --el-tl:url(assets/corner_verdant_tl.webp);--el-tr:url(assets/corner_verdant_tr.webp);--el-bl:url(assets/corner_verdant_bl.webp);--el-br:url(assets/corner_verdant_br.webp)}
.card.el-jade{--el-tex:url(assets/tex_jade.webp);--el-scrim:linear-gradient(#00140c44,#00140c55);--el-edge:#2fd39a;--el-keyline:#bff5dd99;--el-glow:#00b38699;
  --el-hdtx:#effff7;--el-tshadow:0 1px 2px #000;--el-banner:linear-gradient(90deg,#0b4a35,#14916a 50%,#0b4a35);--el-bantx:#eafff5;
  --el-tb:linear-gradient(#f2f9f4e0,#e1f0e7e8),url(assets/tex_jade.webp) center/160px auto;--el-tbsolid:#ebf6ef;--el-tbshade:#00a86b2e;--el-cost:#d9f5e8;--el-costtx:#0b4a35;
  --el-tl:url(assets/corner_jade_tl.webp);--el-tr:url(assets/corner_jade_tr.webp);--el-bl:url(assets/corner_jade_bl.webp);--el-br:url(assets/corner_jade_br.webp)}
.card.el-sun{--el-tex:url(assets/tex_sun.webp);--el-scrim:linear-gradient(#3a200022,#3a200033);--el-edge:#ffd56a;--el-keyline:#fff2c4cc;--el-glow:#f2b62acc;
  --el-hdtx:#3a2204;--el-tshadow:0 1px 0 #fff3c899;--el-banner:linear-gradient(90deg,#8a5a0c,#d99a1e 50%,#8a5a0c);--el-bantx:#fff6dc;
  --el-tb:linear-gradient(#fffaeae0,#f8eccbe8),url(assets/tex_sun.webp) center/160px auto;--el-tbsolid:#fcf4dc;--el-tbshade:#d4a01733;--el-cost:#fff4cf;--el-costtx:#5a3606;
  --el-tl:url(assets/corner_sun_tl.webp);--el-tr:url(assets/corner_sun_tr.webp);--el-bl:url(assets/corner_sun_bl.webp);--el-br:url(assets/corner_sun_br.webp)}
.card.el-spirit{--el-tex:url(assets/tex_spirit.webp);--el-scrim:linear-gradient(#12062633,#12062644);--el-edge:#b48cff;--el-keyline:#e3d4ffaa;--el-glow:#a77bffaa;
  --el-hdtx:#f6f0ff;--el-tshadow:0 1px 2px #000;--el-banner:linear-gradient(90deg,#3a2466,#6b48b0 50%,#3a2466);--el-bantx:#f3ecff;
  --el-tb:linear-gradient(#f8f5fee0,#ece5fae8),url(assets/tex_spirit.webp) center/160px auto;--el-tbsolid:#f3effc;--el-tbshade:#7a5cc233;--el-cost:#efe7ff;--el-costtx:#3a2466;
  --el-tl:url(assets/corner_spirit_tl.webp);--el-tr:url(assets/corner_spirit_tr.webp);--el-bl:url(assets/corner_spirit_bl.webp);--el-br:url(assets/corner_spirit_br.webp)}

:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit){
  border-width:3px;padding:0;border-style:solid;border-color:var(--el-edge);
  background:var(--el-scrim),var(--el-tex) center/160px auto;
  box-shadow:0 0 0 1px #000a,0 0 8px 1px var(--el-glow),inset 0 0 0 1px var(--el-keyline);
  --cs:0 0 8px 1px var(--el-glow)}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .hd{
  position:relative;background:var(--el-scrim),var(--el-tex) top left/160px auto;color:var(--el-hdtx);
  border-bottom:1px solid var(--el-keyline);text-shadow:var(--el-tshadow)}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .nm{color:inherit}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .hd::after{
  content:"";position:absolute;pointer-events:none;z-index:0;left:0;right:0;top:0;height:14px;
  background:var(--el-tl) top left/14px 14px no-repeat,var(--el-tr) top right/14px 14px no-repeat}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .hd>*{position:relative;z-index:2}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .cost{
  position:relative;z-index:4;background:var(--el-cost);color:var(--el-costtx);border-color:var(--el-edge)}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .art{
  position:relative;z-index:1;border-color:var(--el-edge)}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .banner{
  background:var(--el-banner);color:var(--el-bantx);border-top:1px solid var(--el-keyline);border-bottom:1px solid var(--el-keyline)}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .tb{
  position:relative;z-index:2;background:var(--el-tb);color:#1d1814;
  box-shadow:inset 0 0 0 1px var(--el-keyline)}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .tb.clip::after{
  background:linear-gradient(90deg,transparent,var(--el-tbsolid) 45%)}
/* Compact cards: the footer is the ATK/DEF strip on the art. It stays above the art. No corner image there. */
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit):not(.lg) .ft{
  background:none;border-top:0;z-index:4}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .ft .badge{
  position:relative;z-index:5;background:#fbf7f0}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .badge.a{color:var(--red)}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .badge.d{color:var(--blue)}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .badge.a.up,
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .badge.d.up{color:#1f6b33}
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .badge.a.down,
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .badge.d.down,
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .badge.d.hurt,
:is(.card.el-storm,.card.el-frost,.card.el-verdant,.card.el-jade,.card.el-sun,.card.el-spirit) .badge.d.hurt.up{color:#b8460f}

/* Large detail cards: four corners, still behind the stat badges. */
:is(.card.lg.el-storm,.card.lg.el-frost,.card.lg.el-verdant,.card.lg.el-jade,.card.lg.el-sun,.card.lg.el-spirit){border-width:4px;padding:0 4px 4px}
:is(.card.lg.el-storm,.card.lg.el-frost,.card.lg.el-verdant,.card.lg.el-jade,.card.lg.el-sun,.card.lg.el-spirit) .hd{margin:0 -4px}
:is(.card.lg.el-storm,.card.lg.el-frost,.card.lg.el-verdant,.card.lg.el-jade,.card.lg.el-sun,.card.lg.el-spirit) .ft{
  position:relative;margin:0 -4px -4px;background:var(--el-scrim),var(--el-tex) bottom left/160px auto;border-top:1px solid var(--el-keyline)}
:is(.card.lg.el-storm,.card.lg.el-frost,.card.lg.el-verdant,.card.lg.el-jade,.card.lg.el-sun,.card.lg.el-spirit) .banner{margin:0 -4px}
:is(.card.lg.el-storm,.card.lg.el-frost,.card.lg.el-verdant,.card.lg.el-jade,.card.lg.el-sun,.card.lg.el-spirit) .hd::after{
  left:-4px;right:-4px;top:-4px;height:36px;
  background:var(--el-tl) top left/36px 36px no-repeat,var(--el-tr) top right/36px 36px no-repeat}
:is(.card.lg.el-storm,.card.lg.el-frost,.card.lg.el-verdant,.card.lg.el-jade,.card.lg.el-sun,.card.lg.el-spirit) .ft::after{
  content:"";position:absolute;pointer-events:none;z-index:0;left:-4px;right:-4px;bottom:-4px;height:28px;
  background:var(--el-bl) bottom left/28px 28px no-repeat,var(--el-br) bottom right/28px 28px no-repeat}
:is(.card.lg.el-storm,.card.lg.el-frost,.card.lg.el-verdant,.card.lg.el-jade,.card.lg.el-sun,.card.lg.el-spirit) .ft>*{position:relative;z-index:5}
:is(.card.lg.el-storm,.card.lg.el-frost,.card.lg.el-verdant,.card.lg.el-jade,.card.lg.el-sun,.card.lg.el-spirit) .art{margin-left:0;margin-right:0}

/* Frost icicles only on the large card, in the gap under the name, not over the stats. */
.card.lg.el-frost .art{margin-top:14px}
.card.lg.el-frost .hd::before{content:"";position:absolute;left:2px;right:2px;top:100%;height:12px;pointer-events:none;z-index:1;
  background:url(assets/icicles_frost.webp) left top/120px 12px repeat-x}