/* ============================================================
   Realmbreak battle board
   A painted table: stone back rows, a grass battlefield between
   them, champions beside their rows, Ward gems on the left and
   the turn button with its Supply ring on the right.
   ============================================================ */
:root{
  --cond:"Bahnschrift","Arial Narrow","Roboto Condensed",sans-serif;
  --gold1:#fbe7b0;--gold2:#d7a653;--gold3:#8a5f22;--gold4:#4a3212;
  --frame:linear-gradient(160deg,var(--gold1) 0%,var(--gold2) 22%,var(--gold3) 48%,var(--gold2) 70%,var(--gold1) 100%);
  --mana:#3fa8ff;--mana-hi:#b8e4ff;--foe:#ff5a4a;--ally:#56e0c8;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .045' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --foliage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --foliage2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='.06' numOctaves='3' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Card back: source is assets/ui/card-back.svg (embedded so the standalone build keeps it). */
  --back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 350' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3CradialGradient id='bg' cx='50%25' cy='48%25' r='72%25'%3E%3Cstop offset='0' stop-color='%2321507f'/%3E%3Cstop offset='.42' stop-color='%23102a48'/%3E%3Cstop offset='1' stop-color='%23050b17'/%3E%3C/radialGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1c4'/%3E%3Cstop offset='.28' stop-color='%23e0b35e'/%3E%3Cstop offset='.55' stop-color='%238a5f22'/%3E%3Cstop offset='.8' stop-color='%23e0b35e'/%3E%3Cstop offset='1' stop-color='%23fff1c4'/%3E%3C/linearGradient%3E%3ClinearGradient id='gl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6d8'/%3E%3Cstop offset='1' stop-color='%23e9c273'/%3E%3C/linearGradient%3E%3ClinearGradient id='gd' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b98636'/%3E%3Cstop offset='1' stop-color='%235e3f14'/%3E%3C/linearGradient%3E%3CradialGradient id='glow'%3E%3Cstop offset='0' stop-color='%238fd2ff' stop-opacity='.55'/%3E%3Cstop offset='.5' stop-color='%233f8fe0' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%233f8fe0' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='core'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.35' stop-color='%23d4f0ff'/%3E%3Cstop offset='.7' stop-color='%2348b6ff'/%3E%3Cstop offset='1' stop-color='%231b5fae'/%3E%3C/radialGradient%3E%3Cpattern id='lat' width='18' height='18' patternUnits='userSpaceOnUse' patternTransform='rotate(45 125 175)'%3E%3Cpath d='M0 0H18V18' fill='none' stroke='%23d7a653' stroke-opacity='.09' stroke-width='.8'/%3E%3C/pattern%3E%3CclipPath id='in'%3E%3Crect x='16' y='16' width='218' height='318' rx='7'/%3E%3C/clipPath%3E%3Cg id='c' fill='none' stroke='url(%23g)' stroke-linecap='round'%3E%3Cpath d='M20 64V36a16 16 0 0 1 16-16h28' stroke-width='2.6'/%3E%3Cpath d='M28 52c0-13 11-24 24-24' stroke-width='1.3'/%3E%3Cpath d='M36 58c2-12 10-20 22-22' stroke-width='.9' opacity='.7'/%3E%3Cpath d='M36 36l5 5-5 5-5-5z' fill='url(%23g)' stroke='none'/%3E%3C/g%3E%3C/defs%3E%3Crect width='250' height='350' fill='url(%23bg)'/%3E%3Crect width='250' height='350' fill='url(%23lat)'/%3E%3Cg clip-path='url(%23in)'%3E%3Cpath d='M155 175L265 175M154.7 178.9L298.5 197.8M154 182.8L260.2 211.2M152.7 186.5L286.7 242M151 190L246.2 245M148.8 193.3L263.8 281.5M146.2 196.2L224 274M143.3 198.8L231.5 313.8M140 201L195 296.2M136.5 202.7L192 336.7M132.8 204L161.2 310.2M128.9 204.7L147.8 348.5M125 205L125 315M121.1 204.7L102.2 348.5M117.2 204L88.8 310.2M113.5 202.7L58 336.7M110 201L55 296.2M106.7 198.8L18.5 313.8M103.8 196.2L26 274M101.2 193.3L-13.8 281.5M99 190L3.8 245M97.3 186.5L-36.7 242M96 182.8L-10.2 211.2M95.3 178.9L-48.5 197.8M95 175L-15 175M95.3 171.1L-48.5 152.2M96 167.2L-10.2 138.8M97.3 163.5L-36.7 108M99 160L3.8 105M101.2 156.7L-13.8 68.5M103.8 153.8L26 76M106.7 151.2L18.5 36.2M110 149L55 53.8M113.5 147.3L58 13.3M117.2 146L88.8 39.8M121.1 145.3L102.2 1.5M125 145L125 35M128.9 145.3L147.8 1.5M132.8 146L161.2 39.8M136.5 147.3L192 13.3M140 149L195 53.8M143.3 151.2L231.5 36.2M146.2 153.8L224 76M148.8 156.7L263.8 68.5M151 160L246.2 105M152.7 163.5L286.7 108M154 167.2L260.2 138.8M154.7 171.1L298.5 152.2' stroke='%23e0b35e' stroke-opacity='.13' stroke-width='.8'/%3E%3Cg fill='%23e8f4ff'%3E%3Ccircle cx='114.8' cy='193.8' r='1' opacity='0.5'/%3E%3Ccircle cx='126.7' cy='202.4' r='0.5' opacity='0.5'/%3E%3Ccircle cx='152.8' cy='267' r='0.5' opacity='0.4'/%3E%3Ccircle cx='37.4' cy='272.2' r='0.9' opacity='0.3'/%3E%3Ccircle cx='228.2' cy='320.9' r='0.9' opacity='0.6'/%3E%3Ccircle cx='51.7' cy='22.7' r='0.8' opacity='0.3'/%3E%3Ccircle cx='58.7' cy='94' r='0.4' opacity='0.5'/%3E%3Ccircle cx='112.3' cy='282.5' r='0.8' opacity='0.6'/%3E%3Ccircle cx='125' cy='226' r='0.7' opacity='0.4'/%3E%3Ccircle cx='231.5' cy='330.6' r='1' opacity='0.6'/%3E%3Ccircle cx='85.5' cy='90.1' r='0.6' opacity='0.3'/%3E%3Ccircle cx='182' cy='143.7' r='1' opacity='0.5'/%3E%3Ccircle cx='223' cy='284.1' r='0.4' opacity='0.4'/%3E%3Ccircle cx='212.8' cy='165.6' r='1.1' opacity='0.5'/%3E%3Ccircle cx='33.6' cy='215.6' r='0.9' opacity='0.4'/%3E%3Ccircle cx='36.6' cy='122.4' r='1.1' opacity='0.7'/%3E%3Ccircle cx='43.3' cy='95.4' r='0.5' opacity='0.3'/%3E%3Ccircle cx='188.6' cy='73.8' r='0.8' opacity='0.5'/%3E%3Ccircle cx='58.8' cy='247.8' r='0.5' opacity='0.6'/%3E%3Ccircle cx='42.9' cy='150.1' r='0.5' opacity='0.4'/%3E%3Ccircle cx='225.8' cy='270.3' r='0.6' opacity='0.7'/%3E%3Ccircle cx='63.1' cy='141.8' r='1' opacity='0.6'/%3E%3Ccircle cx='39.5' cy='328.6' r='0.5' opacity='0.4'/%3E%3Ccircle cx='183.4' cy='121.3' r='0.6' opacity='0.3'/%3E%3Ccircle cx='37.3' cy='201' r='0.6' opacity='0.6'/%3E%3Ccircle cx='97.5' cy='160.3' r='1.1' opacity='0.5'/%3E%3Ccircle cx='141' cy='290.1' r='0.5' opacity='0.3'/%3E%3Ccircle cx='212.4' cy='274.8' r='0.6' opacity='0.4'/%3E%3Ccircle cx='176.2' cy='313.3' r='0.5' opacity='0.8'/%3E%3Ccircle cx='206.8' cy='207.5' r='0.7' opacity='0.3'/%3E%3Ccircle cx='26.3' cy='320.3' r='0.6' opacity='0.6'/%3E%3Ccircle cx='73' cy='276.6' r='0.8' opacity='0.4'/%3E%3Ccircle cx='55.5' cy='244.2' r='0.4' opacity='0.4'/%3E%3Ccircle cx='137.7' cy='285.7' r='0.8' opacity='0.4'/%3E%3Ccircle cx='214.3' cy='82' r='0.4' opacity='0.4'/%3E%3Ccircle cx='113.4' cy='37' r='0.5' opacity='0.5'/%3E%3Ccircle cx='140.4' cy='59.3' r='0.7' opacity='0.7'/%3E%3Ccircle cx='227.8' cy='224.3' r='0.9' opacity='0.6'/%3E%3Ccircle cx='48' cy='29' r='0.4' opacity='0.8'/%3E%3Ccircle cx='168' cy='320.3' r='0.4' opacity='0.6'/%3E%3Ccircle cx='121.2' cy='247.4' r='0.6' opacity='0.8'/%3E%3Ccircle cx='34.1' cy='189.5' r='0.9' opacity='0.7'/%3E%3Ccircle cx='175.7' cy='239' r='1' opacity='0.8'/%3E%3Ccircle cx='93.3' cy='233.1' r='1' opacity='0.7'/%3E%3Ccircle cx='107.3' cy='266.2' r='1' opacity='0.6'/%3E%3Ccircle cx='151.7' cy='138.1' r='0.8' opacity='0.6'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='125' cy='175' r='112' fill='url(%23glow)'/%3E%3Crect x='6' y='6' width='238' height='338' rx='11' fill='none' stroke='url(%23g)' stroke-width='4'/%3E%3Crect x='12.5' y='12.5' width='225' height='325' rx='8' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='2'/%3E%3Crect x='15' y='15' width='220' height='320' rx='7' fill='none' stroke='%23e0b35e' stroke-opacity='.55' stroke-width='1'/%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 1 250 0)'/%3E%3Cuse href='%23c' transform='matrix(1 0 0 -1 0 350)'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 -1 250 350)'/%3E%3Cpath d='M125 24V92M125 258V326' stroke='url(%23g)' stroke-width='1.6'/%3E%3Cpath d='M125 22l7 9-7 9-7-9zM125 310l7 9-7 9-7-9z' fill='url(%23g)'/%3E%3Cpath d='M98 32h18M134 32h18M98 318h18M134 318h18' stroke='%23e0b35e' stroke-opacity='.6' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='125' cy='175' r='80' fill='none' stroke='url(%23g)' stroke-width='2.4'/%3E%3Ccircle cx='125' cy='175' r='83.5' fill='none' stroke='%23e0b35e' stroke-opacity='.35' stroke-width='.8'/%3E%3Cpath d='M191 175L203 175M194.4 184.1L201.3 185.1M192.6 193.1L199.4 194.9M189.7 201.8L196.1 204.5M182.2 208L192.5 214M180.5 217.6L186.1 221.9M174.5 224.5L179.4 229.4M167.6 230.5L171.9 236.1M158 232.2L164 242.5M151.8 239.7L154.5 246.1M143.1 242.6L144.9 249.4M134.1 244.4L135.1 251.3M125 241L125 253M115.9 244.4L114.9 251.3M106.9 242.6L105.1 249.4M98.2 239.7L95.5 246.1M92 232.2L86 242.5M82.4 230.5L78.1 236.1M75.5 224.5L70.6 229.4M69.5 217.6L63.9 221.9M67.8 208L57.5 214M60.3 201.8L53.9 204.5M57.4 193.1L50.6 194.9M55.6 184.1L48.7 185.1M59 175L47 175M55.6 165.9L48.7 164.9M57.4 156.9L50.6 155.1M60.3 148.2L53.9 145.5M67.8 142L57.5 136M69.5 132.4L63.9 128.1M75.5 125.5L70.6 120.6M82.4 119.5L78.1 113.9M92 117.8L86 107.5M98.2 110.3L95.5 103.9M106.9 107.4L105.1 100.6M115.9 105.6L114.9 98.7M125 109L125 97M134.1 105.6L135.1 98.7M143.1 107.4L144.9 100.6M151.8 110.3L154.5 103.9M158 117.8L164 107.5M167.6 119.5L171.9 113.9M174.5 125.5L179.4 120.6M180.5 132.4L186.1 128.1M182.2 142L192.5 136M189.7 148.2L196.1 145.5M192.6 156.9L199.4 155.1M194.4 165.9L201.3 164.9' stroke='%23e0b35e' stroke-opacity='.7' stroke-width='1.1'/%3E%3Ccircle cx='125' cy='175' r='60' fill='%23081524' fill-opacity='.72' stroke='url(%23g)' stroke-width='1.6'/%3E%3Cpath d='M125 175L136 175L125 101zM125 175L125 186L199 175zM125 175L114 175L125 249zM125 175L125 164L51 175zM125 175L130.7 180.7L158.9 141.1zM125 175L119.3 180.7L158.9 208.9zM125 175L119.3 169.3L91.1 208.9zM125 175L130.7 169.3L91.1 141.1z' fill='url(%23gd)'/%3E%3Cpath d='M125 175L114 175L125 101zM125 175L125 164L199 175zM125 175L136 175L125 249zM125 175L125 186L51 175zM125 175L119.3 169.3L158.9 141.1zM125 175L130.7 169.3L158.9 208.9zM125 175L130.7 180.7L91.1 208.9zM125 175L119.3 180.7L91.1 141.1z' fill='url(%23gl)'/%3E%3Ccircle cx='125' cy='175' r='21' fill='%230a1830' stroke='url(%23g)' stroke-width='3'/%3E%3Ccircle cx='125' cy='175' r='13.5' fill='url(%23core)'/%3E%3Ccircle cx='125' cy='175' r='13.5' fill='none' stroke='%23e6f7ff' stroke-width='1.2' opacity='.9'/%3E%3C/svg%3E") center/cover no-repeat #0a1a2c;
}

/* Board sizes, shared with the scenery behind the arena (#board-scene lines its realms up with the grid). */
.arena,#board-scene{
  --u-w:clamp(66px,calc(7.4vh + .9vw),116px);
  --u-h:calc(var(--u-w)*1.4);
  --h-w:clamp(96px,calc(10vh + 1.8vw),158px);
  --h-h:calc(var(--h-w)*1.4);
  --side:clamp(210px,19vw,340px);
  /* As large as the corner allows: Legend + deck + graveyard + gaps must fit the side column
     (with a floor for narrow windows, where the corner spills onto the table as before). */
  --lg-w:max(84px,min(clamp(118px,calc(12vh + 2.4vw),210px),calc((var(--side) - 56px) / 1.9)));
}
.arena{
  position:relative;isolation:isolate;height:100vh;height:100dvh;min-height:600px;overflow:hidden;user-select:none;-webkit-user-select:none;
  display:grid;color:#f5ecd6;font-family:var(--cond);
  grid-template-columns:var(--side) minmax(0,1fr) var(--side);
  grid-template-rows:calc(var(--h-h)*.28) calc(var(--u-h) + 30px) minmax(calc(var(--u-h)*2 + 40px),1fr) calc(var(--u-h) + 30px) calc(var(--h-h) + 6px);
  grid-template-areas:"corner hando legendo" "nexus slabo legendo" "nexus field orb" "legendme slabme orb" "legendme handme .";
}
.arena button{font:inherit;color:inherit}
.arena :focus-visible{outline:3px solid var(--gold1);outline-offset:3px}

/* ---------- the table: a thin gold frame over the painted realms (scene.css), like the app's framed panels ---------- */
.playmat{grid-column:2;grid-row:2 / 5;position:relative;z-index:0;margin:-6px -1.5%;border-radius:16px;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,11,.2),transparent 28%,transparent 72%,rgba(5,8,11,.2));
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 18px 44px rgba(0,0,0,.35),inset 0 0 70px rgba(0,0,0,.28)}
/* The frame is a masked ring so the painting shows through the middle; the hairline inside echoes the menu buttons. */
.playmat::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--frame);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.playmat::after{content:"";position:absolute;inset:7px;border-radius:11px;border:1px solid rgba(215,166,83,.32)}
.pm-corner{position:absolute;z-index:1;width:clamp(52px,4.6vw,72px);aspect-ratio:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.75));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1c4'/%3E%3Cstop offset='.35' stop-color='%23e0b35e'/%3E%3Cstop offset='.7' stop-color='%238a5f22'/%3E%3Cstop offset='1' stop-color='%23d7a653'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-linecap='round'%3E%3Cpath d='M3 56V17A14 14 0 0 1 17 3h39' stroke-width='4.2'/%3E%3Cpath d='M11 44c0-18 15-33 33-33' stroke-width='2'/%3E%3Cpath d='M19 47c1-15 13-27 28-28' stroke-width='1.1' opacity='.65'/%3E%3C/g%3E%3Cpath d='M17 9l8 8-8 8-8-8z' fill='url(%23g)' stroke='%23000' stroke-opacity='.5' stroke-width='.8'/%3E%3Ccircle cx='56' cy='3' r='2.4' fill='url(%23g)'/%3E%3Ccircle cx='3' cy='56' r='2.4' fill='url(%23g)'/%3E%3C/svg%3E") center/contain no-repeat}
.pm-corner--tl{left:0;top:0}
.pm-corner--tr{right:0;top:0;transform:scaleX(-1)}
.pm-corner--bl{left:0;bottom:0;transform:scaleY(-1)}
.pm-corner--br{right:0;bottom:0;transform:scale(-1)}
/* Where the break between the realms meets the frame. */
.pm-gem{position:absolute;z-index:1;top:50%;width:16px;height:16px;margin-top:-8px;rotate:45deg;border-radius:3px;border:2px solid transparent;
  background:radial-gradient(circle at 40% 40%,#fff4d6,#ffb45a 42%,#8a3d0c 88%) padding-box,var(--frame) border-box;box-shadow:0 0 0 1px rgba(0,0,0,.7),0 0 16px rgba(255,170,80,.85)}
.pm-gem--l{left:-8px}.pm-gem--r{right:-8px}

/* ---------- back rows: dark carved beds with a gold hairline ---------- */
.slab{--slab-shadow:inset 0 2px 10px rgba(0,0,0,.45),inset 0 -1px 0 rgba(251,231,176,.12),0 0 0 1px rgba(0,0,0,.45),0 1px 0 1px rgba(215,166,83,.32),0 8px 20px rgba(0,0,0,.3);
  position:relative;z-index:6;align-self:center;justify-self:center;width:min(100%,calc(var(--u-w)*8));height:calc(var(--u-h) + 22px);border-radius:14px;
  /* No backdrop-filter: with the scene and the glows animating, Firefox re-blurred both rows on every frame. */
  background:linear-gradient(180deg,rgba(18,24,22,.5),rgba(8,12,10,.6));box-shadow:var(--slab-shadow);transition:box-shadow .5s}
.slab::before{content:"";position:absolute;inset:6px;border-radius:10px;border:1px solid rgba(215,166,83,.2);pointer-events:none;transition:border-color .5s}
.slab--opp{grid-area:slabo}
.slab--me{grid-area:slabme}
.slab-cards{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:calc(var(--u-w)*.14)}
.slab.is-lane-target::after{content:"";position:absolute;inset:-4px;border-radius:19px;box-shadow:0 0 0 2px rgba(86,224,200,.55),0 0 26px rgba(86,224,200,.35);pointer-events:none}
.slab.is-lane-target.is-drop-live::after,.slab.is-drop-hover::after{box-shadow:0 0 0 3px var(--ally),0 0 40px rgba(86,224,200,.7),inset 0 0 40px rgba(86,224,200,.35)}
.slot{position:relative;width:var(--u-w);height:var(--u-h);display:grid;place-items:center;flex:none}
.slot--away{border-radius:10px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);background:rgba(0,0,0,.12)}

/* ---------- battlefield: lanes of attackers and blockers, and the spell stack ---------- */
.field{grid-area:field;position:relative;z-index:7;display:grid;place-items:center;margin:0 4%;border-radius:24px;transition:box-shadow .2s,background .2s}
.field.is-drop-target{box-shadow:inset 0 0 0 2px rgba(255,170,90,.35)}
.field.is-drop-live{background:rgba(255,160,80,.06);box-shadow:inset 0 0 0 2px rgba(255,170,90,.6),inset 0 0 50px rgba(255,140,60,.18)}
.field.is-drop-hover{background:rgba(255,160,80,.12);box-shadow:inset 0 0 0 3px #ffb070,inset 0 0 70px rgba(255,140,60,.3)}
/* Attackers and blockers stand back from the trail, so the spell coins on the centre line never cover them. The lanes
   take the field's height, up to what a casting coin (u-w*1.1), its ring and its name plate need. */
.lanes{position:relative;display:flex;gap:calc(var(--u-w)*.22);z-index:2;height:min(100%,calc(var(--u-h)*2.04 + var(--u-w)*1.1 + 64px))}
.lane{display:grid;grid-template-rows:calc(var(--u-h)*1.02) minmax(20px,1fr) calc(var(--u-h)*1.02);justify-items:center;align-items:center}
.lane-cell{display:grid;place-items:center}
/* An empty spot in a lane: a dark carved bed like the back rows, with a gold hairline and a faint shield. */
.lane-cell--empty{position:relative;width:calc(var(--u-w)*.96);height:calc(var(--u-h)*.96);border-radius:10px;color:rgba(251,231,176,.3);
  background:radial-gradient(ellipse at 50% 42%,rgba(24,32,28,.42),rgba(8,12,10,.62));
  box-shadow:inset 0 2px 10px rgba(0,0,0,.5),inset 0 -1px 0 rgba(251,231,176,.1),0 0 0 1px rgba(0,0,0,.45),0 1px 0 1px rgba(215,166,83,.32),0 6px 14px rgba(0,0,0,.25);
  transition:color .2s,background .2s,box-shadow .2s}
.lane-cell--empty::before{content:"";position:absolute;inset:5px;border-radius:7px;border:1px solid rgba(215,166,83,.24);pointer-events:none;transition:border-color .2s}
.lane-cell--empty svg{width:34%;height:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.lane-link{width:3px;height:100%;border-radius:2px;background:linear-gradient(180deg,#ffb070,#9fdcff);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 8px rgba(255,220,170,.6)}
.lane.is-challenged .lane-link{background:#ff5a4a;box-shadow:0 0 8px #ff5a4a}
.uc--lane{width:calc(var(--u-w)*1.02);height:calc(var(--u-h)*1.02)}
.uc.is-attacker{box-shadow:0 0 0 2px #ffb070,0 0 30px rgba(255,120,50,.65),0 16px 30px rgba(0,0,0,.7)}
.uc.is-blocker{box-shadow:0 0 0 2px #9fdcff,0 0 26px rgba(90,170,255,.55),0 16px 30px rgba(0,0,0,.7)}
.stage-declare .uc.is-attacker[data-side="me"],.stage-blocks[data-acting="me"] .uc.is-blocker[data-side="me"]{cursor:pointer}
.field-hint{position:absolute;left:50%;bottom:8px;translate:-50% 0;padding:6px 14px;border-radius:999px;background:rgba(6,8,10,.8);border:1px solid rgba(251,231,176,.3);font:600 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;z-index:3}
.field-hint i{font-style:normal}
/* In combat the lanes fill the field, so the hint moves onto the trail beside the turn button, clear of the units,
   one phrase per line. */
.field.has-combat .field-hint{left:auto;right:8px;bottom:auto;top:50%;translate:0 -50%;max-width:min(300px,27%);letter-spacing:.1em;white-space:normal;text-align:center;line-height:1.35;border-radius:12px}
.field.has-combat .field-hint span{display:block}
.field.has-combat .field-hint i{display:none}
.stack{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:center;gap:calc(var(--u-w)*.18);z-index:5;pointer-events:auto}
/* Between the lanes the coins ride a little high, so their name plates clear the blockers as far as the rings clear the attackers. */
.field.has-combat .stack{top:calc(50% - 7px)}
.stack-orb{--d:calc(var(--u-w)*.95);position:relative;width:var(--d);height:var(--d);border-radius:50%;flex:none;cursor:help;animation:orbIn .35s cubic-bezier(.2,.9,.3,1.3) backwards;
  border:4px solid var(--sp);box-shadow:0 0 0 3px rgba(0,0,0,.6),0 0 0 6px var(--own),0 0 26px var(--own),0 14px 24px rgba(0,0,0,.6)}
.stack-orb img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 25%}
.stack-orb b{position:absolute;left:50%;top:calc(100% + 10px);translate:-50% 0;white-space:nowrap;max-width:calc(var(--d)*1.6);overflow:hidden;text-overflow:ellipsis;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.75);font:700 11px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.stack-orb.is-mine{--own:rgba(86,170,255,.85)}
.stack-orb.is-theirs{--own:rgba(255,90,74,.85)}
.stack-orb.speed-fast{--sp:#3fb4ea}.stack-orb.speed-slow{--sp:#9366de}.stack-orb.speed-burst{--sp:#f0c030}.stack-orb.speed-ability{--sp:#6fd08a}
.stack-orb.is-top{animation:orbIn .35s cubic-bezier(.2,.9,.3,1.3) backwards,coinPulse 1.4s ease-in-out .35s infinite}
/* A chain spreads its coins apart so the resolve-order arrows between them read clearly. */
.stack.is-chain{gap:calc(var(--u-w)*.6)}
.stack-no{position:absolute;right:-6px;top:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font:800 12px/1 var(--cond);font-style:normal;color:#1c1204;background:linear-gradient(#fff1c4,#e2b25a);box-shadow:0 0 0 2px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.6)}
.stack-orb.is-fizzling img{filter:grayscale(1) brightness(.55)}
.stack-orb.is-fizzling{border-style:dashed;--own:rgba(150,150,150,.6);animation:orbIn .35s cubic-bezier(.2,.9,.3,1.3) backwards}
.stack-orb.is-fizzling b{background:rgba(120,20,12,.9);color:#ffd9d0}
.stack-orb.is-fizzling::after{content:"";position:absolute;inset:18%;border-radius:50%;background:linear-gradient(45deg,transparent 45%,rgba(255,90,74,.95) 45% 55%,transparent 55%);pointer-events:none}
/* A coin a counter may take off the stack glows like an enemy target; the picked one lifts until Lock in. */
.stack-orb.is-target{cursor:pointer;outline:2px dashed #ffb070;outline-offset:8px;animation:orbIn .35s cubic-bezier(.2,.9,.3,1.3) backwards;
  --glow:0 0 0 6px #ff5a4a,0 0 40px rgba(255,90,74,.95);--glow-t:1s;--glow-at:-4px}
.stack-orb.is-drop-hover{scale:1.1}
.stack-orb.is-picked{animation:none;translate:0 -6px;box-shadow:0 0 0 3px rgba(0,0,0,.6),0 0 0 6px #ffe08a,0 0 30px rgba(255,210,110,.9),0 14px 24px rgba(0,0,0,.6)}
.stack-orb.is-picked::before{content:none}
/* The card being aimed: a coin, not a full card, so the units it could target stay in view. */
.stack-orb.is-casting{--d:calc(var(--u-w)*1.1);--own:#fbe7b0;pointer-events:none;z-index:2;animation:orbIn .25s cubic-bezier(.2,.9,.3,1.3) backwards,castFloat 2.4s ease-in-out .25s infinite}
@keyframes castFloat{50%{translate:0 -5px}}
/* Where every spell on the stack is headed, and the order the chain resolves in. */
.chain{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:6;overflow:visible;animation:chainIn .3s ease .4s backwards}
@keyframes chainIn{from{opacity:0}}
.chain path{fill:none;stroke-linecap:round}
.chain .ch-target{stroke-width:4;stroke-dasharray:10 8;animation:chainFlow .9s linear infinite;filter:drop-shadow(0 0 5px currentColor)}
.chain .ch-target.is-mine{color:#56aaff;stroke:#56aaff}
.chain .ch-target.is-theirs{color:#ff5a4a;stroke:#ff5a4a}
.chain .ch-target.is-fizzling{color:#9a9a9a;stroke:#9a9a9a;animation:none;opacity:.6}
.chain .ch-order{stroke:#fbe7b0;stroke-width:3.5;color:#fbe7b0;filter:drop-shadow(0 0 4px rgba(255,200,110,.8))}
.chain .ch-ring{fill:none;stroke-width:3;stroke-dasharray:6 5;animation:chainFlow .9s linear infinite}
@keyframes chainFlow{to{stroke-dashoffset:-18}}
body.no-motion .chain .ch-target,body.no-motion .chain .ch-ring{animation:none}
@keyframes orbIn{from{scale:.2;opacity:0}}
@keyframes coinPulse{50%{scale:1.08}}
/* A spot you can block in lights up in the ally teal; brighter while a unit is carried, filled while it hovers. */
.lane.is-open .lane-cell--empty{color:rgba(140,255,230,.7);background:radial-gradient(ellipse at 50% 42%,rgba(22,74,64,.5),rgba(6,26,22,.72));
  box-shadow:inset 0 2px 10px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.45),0 0 0 2px rgba(120,255,225,.7),0 0 16px rgba(86,224,200,.4)}
.lane.is-open .lane-cell--empty::before{border-color:rgba(140,255,230,.4)}
.lane.is-open.is-drop-live .lane-cell--empty{color:rgba(170,255,238,.9);box-shadow:inset 0 0 18px rgba(86,224,200,.3),0 0 0 1px rgba(0,0,0,.45),0 0 0 3px var(--ally),0 0 22px rgba(86,224,200,.6)}
.lane.is-open.is-drop-hover .lane-cell--empty{color:#e6fff9;background:radial-gradient(ellipse at 50% 42%,rgba(60,170,150,.55),rgba(14,70,60,.75))}
.lane.is-open.is-drop-hover .lane-cell--empty::before{border-color:rgba(200,255,244,.7)}

/* ---------- left: Nexus crystals, attack tokens, round ---------- */
.nexus-col{grid-area:nexus;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.nexus{position:relative;width:clamp(70px,8.6vh,100px);aspect-ratio:1/1.1;display:grid;place-items:center;filter:drop-shadow(0 8px 14px rgba(0,0,0,.65))}
.nexus::before,.nexus::after{content:"";position:absolute;clip-path:polygon(50% 0,93% 24%,93% 76%,50% 100%,7% 76%,7% 24%)}
.nexus::before{inset:0;background:var(--frame)}
.nexus::after{inset:5px}
.nexus--opp::after{background:radial-gradient(circle at 35% 28%,#ffc2b8 0,#e2414b 30%,#7d1320 78%)}
.nexus--me::after{background:radial-gradient(circle at 35% 28%,#dff3ff 0,#3a8fe8 32%,#123f85 78%)}
.nexus b{position:relative;z-index:1;font:700 clamp(28px,4vh,40px)/1 var(--cond);text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.5)}
.nexus.is-low::after{animation:lowPulse 1s ease-in-out infinite}
@keyframes lowPulse{50%{filter:brightness(1.6) saturate(1.3)}}
.nexus.is-drop-live{filter:drop-shadow(0 0 16px #ff5a4a)}
/* The attack token: a dim gold-rimmed coin, lit when that player may attack this turn. */
.atk-token{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid transparent;color:rgba(215,166,83,.45);transition:all .3s;
  background:radial-gradient(circle at 40% 30%,#232a30,#0b0f12) padding-box,linear-gradient(160deg,#6b5a3a,#2e261a) border-box;box-shadow:0 4px 10px rgba(0,0,0,.6)}
.atk-token svg{width:15px;height:15px}
.atk-token.is-on{color:#fff;background:radial-gradient(circle at 40% 30%,#ffcf85,#c77a1e) padding-box,var(--frame) border-box;box-shadow:0 0 18px rgba(255,180,80,.85)}
/* Turn plate: the app's framed dark pill with a coloured bar for whose turn it is. */
.round-no{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:126px;padding:9px 14px 8px;border-radius:6px;text-transform:uppercase;
  border:2px solid transparent;background:linear-gradient(180deg,#1b2026,#0a0c0f) padding-box,var(--frame) border-box;box-shadow:0 0 0 1px rgba(0,0,0,.7),0 8px 18px rgba(0,0,0,.55)}
.round-no::before{content:"";position:absolute;left:12px;right:12px;top:3px;height:2px;border-radius:2px;background:var(--tc);box-shadow:0 0 10px var(--tc)}
.round-no b{font:700 14px/1 var(--cond);letter-spacing:.14em;color:#fff;white-space:nowrap}
.round-no small{font:600 10px/1 var(--cond);letter-spacing:.2em;color:#b3a88f}
.round-no.turn-me{--tc:#3fa8ff}.round-no.turn-opp{--tc:#ff5a4a}.round-no.turn-none{--tc:var(--gold2)}
.arena[data-turn="me"] .slab--me,.arena[data-turn="opp"] .slab--opp{box-shadow:var(--slab-shadow),0 0 0 2px color-mix(in srgb,var(--tc) 65%,transparent),0 0 36px color-mix(in srgb,var(--tc) 38%,transparent)}
.arena[data-turn="me"] .slab--me::before,.arena[data-turn="opp"] .slab--opp::before{border-color:color-mix(in srgb,var(--tc) 50%,transparent)}
.arena[data-turn="me"] .slab--me{--tc:#3fa8ff}.arena[data-turn="opp"] .slab--opp{--tc:#ff5a4a}
.phase-mulligan .slab{box-shadow:var(--slab-shadow)!important}.phase-mulligan .slab::before{border-color:rgba(215,166,83,.2)!important}

/* ---------- Legend block: Legend card, deck pile, Signature Ally ---------- */
.legend-block{z-index:9;display:flex;gap:12px;padding:14px}
/* row-reverse + flex-start: packed against the right edge, so a narrow window spills it left onto the table, not off-screen. */
.legend-block--opp{grid-area:legendo;align-items:flex-start;justify-content:flex-start;flex-direction:row-reverse}
.legend-block--me{grid-area:legendme;align-items:flex-end;justify-content:flex-start;padding-bottom:24px}
.legend{position:relative;flex:none;width:var(--lg-w);aspect-ratio:3/4;border-radius:12px;border:3px solid transparent;cursor:help;
  background:linear-gradient(#0c0f12,#0c0f12) padding-box,var(--frame) border-box;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 14px 30px rgba(0,0,0,.7),0 0 30px color-mix(in srgb,var(--fc) 40%,transparent)}
.legend-art{position:absolute;inset:0;border-radius:9px;overflow:hidden}
.legend-art img{width:100%;height:100%;object-fit:cover;object-position:55% 25%}
.legend-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.85))}
.legend-name{position:absolute;left:6px;right:6px;bottom:8px;text-align:center;line-height:1}
/* Sized from the card width so the name stays inside a small Legend card. */
.legend-name b{display:block;font:700 clamp(10px,calc(var(--lg-w)*.11),22px)/1.02 var(--cond);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 4px #000;overflow-wrap:break-word}
.legend-name small{font:600 clamp(8px,calc(var(--lg-w)*.065),11px)/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#d8cdb2}
.legend.is-used .legend-art img{filter:saturate(.6) brightness(.8)}
.legend-ability{position:absolute;right:-12px;top:-12px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;
  background:radial-gradient(circle at 36% 30%,#c9ecff 0,#3fa8ff 32%,#154f9c 78%) padding-box,var(--frame) border-box;border:2px solid transparent;font:700 17px/1 var(--cond);text-shadow:0 1px 0 #000;box-shadow:0 4px 10px rgba(0,0,0,.6)}
.legend-ability:disabled{filter:grayscale(1) brightness(.5);cursor:default}
.legend-ability.is-legal{--glow:0 0 0 2px rgba(184,228,255,1),0 0 24px rgba(63,168,255,.95);--glow-t:1.4s}
.legend-ability.is-selected{transform:scale(1.18)}
.legend-block--opp .legend-ability{right:auto;left:-12px;cursor:default}
.legend-champ{position:absolute;left:50%;translate:-50% 0;bottom:-14px;display:flex;align-items:center;gap:5px;padding:3px 8px 3px 5px;border-radius:999px;background:rgba(8,10,12,.92);border:1px solid rgba(251,231,176,.45);white-space:nowrap}
.legend-champ svg{width:13px;height:13px;color:var(--gold1)}
.legend-champ i{position:relative;width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.legend-champ i::after{content:"";position:absolute;inset:0;width:calc(var(--p) * 100%);background:linear-gradient(90deg,#d7a653,#fbe7b0)}
.legend-champ small{font:700 10px/1 var(--cond)}
.legend-side{flex:none;display:flex;flex-direction:column;gap:10px;align-items:center}
.legend-block--me .legend-side{flex-direction:column-reverse}
.piles{display:flex;gap:8px;align-items:center}
.gravepile{position:relative;width:calc(var(--lg-w)*.36);aspect-ratio:5/7;padding:0;display:grid;place-items:center;cursor:pointer;border-radius:6px;overflow:hidden;
  border:2px solid rgba(215,166,83,.7);background:#10151a;color:#e6dcc6;box-shadow:0 6px 12px rgba(0,0,0,.6);transition:transform .15s,border-color .15s}
.gravepile:hover{transform:translateY(-2px);border-color:var(--gold1)}
.gravepile.is-empty{opacity:.55}
.gravepile-top{position:absolute;inset:0}
.gravepile-top img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(.9) brightness(.45)}
.gravepile svg{position:relative;width:46%;opacity:.85;filter:drop-shadow(0 2px 3px #000)}
.gravepile b{position:absolute;bottom:3px;left:50%;translate:-50% 0;padding:3px 8px;border-radius:999px;font:700 12px/1 var(--cond);
  border:1.5px solid transparent;background:linear-gradient(180deg,#1b2026,#0a0c0f) padding-box,var(--frame) border-box}
.grave-sheet{width:min(920px,92vw);max-height:84vh;overflow:auto;padding:24px 26px;border-radius:8px;border:2px solid transparent;background:linear-gradient(180deg,#141b21,#080b0e) padding-box,var(--frame) border-box}
.grave-sheet h3{margin:0 0 16px;font:700 24px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;text-align:center;color:#fff}
.grave-sheet h3 small{display:block;margin-top:6px;font-size:13px;letter-spacing:.2em;color:var(--gold2)}
.grave-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.grave-sheet .muted{text-align:center;color:#9a9282}
/* The deck: the top card back rests on its stack, whose gilded edge shows underneath (one line per ~8 cards, so it
   thins as the deck runs down). The box keeps room for a full stack; the count sits at the foot like the graveyard's. */
.deckpile{--t:calc(var(--n)*2px);position:relative;width:calc(var(--lg-w)*.52);height:calc(var(--lg-w)*.728 + 10px);display:grid;place-items:end center}
.deckpile::before{content:"";position:absolute;inset:auto 0 0;height:calc(var(--t) + 14px);border-radius:0 0 6px 6px;
  background:repeating-linear-gradient(0deg,#1d1409 0 1px,#d9ad5c 1px 2px);box-shadow:0 8px 16px rgba(0,0,0,.6)}
.deckpile-stack{position:absolute;inset:auto 0 var(--t);aspect-ratio:5/7;border-radius:6px;background:var(--back);box-shadow:0 1px 2px rgba(0,0,0,.7)}
.deckpile.is-empty .deckpile-stack{opacity:.4;filter:grayscale(1)}
.deckpile b{position:relative;margin-bottom:calc(var(--t) + 5px);padding:3px 9px;border-radius:999px;font:700 14px/1 var(--cond);
  border:1.5px solid transparent;background:linear-gradient(180deg,#1b2026,#0a0c0f) padding-box,var(--frame) border-box;box-shadow:0 3px 8px rgba(0,0,0,.6)}
/* Pulsing glows (units that can act, legal targets, the orb, the Legend ability, the ally, a ready level-up): the
   bright ring sits on ::before and only its opacity pulses, which the compositor runs without repainting. Animating
   box-shadow itself repainted every frame and dropped frames on high-refresh screens, worst in Firefox. Each glow
   sets --glow (its brightest shadow), --glow-t (period) and --glow-at (minus its border width). Without motion the
   ring holds steady, so the state still reads. */
.uc.can-attack::before,.uc.can-block::before,.uc.is-target::before,.uc.is-drop-live::before,.bond.is-legal::before,.legend-ability.is-legal::before,
.orb.is-ready::before,.orb.is-attack::before,.stack-orb.is-target::before,.cf-lvl.is-ready::before,.uc-lvl.is-ready::before{
  content:"";position:absolute;inset:var(--glow-at,-2px);border-radius:inherit;pointer-events:none;box-shadow:var(--glow);opacity:.7;animation:glowPulse var(--glow-t,1.6s) ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.uc::before,.bond::before,.legend-ability::before,.orb::before,.stack-orb::before,.cf-lvl::before,.uc-lvl::before{animation:none!important}}
.bond{position:relative;width:calc(var(--lg-w)*.52);aspect-ratio:5/7;padding:0;border-radius:8px;cursor:default;
  border:2px solid transparent;background:linear-gradient(#111,#111) padding-box,var(--frame) border-box;box-shadow:0 6px 14px rgba(0,0,0,.6)}
.bond[data-source]{cursor:grab}
.bond-art{position:absolute;inset:0;border-radius:6px;overflow:hidden}
.bond-art img{width:100%;height:100%;object-fit:cover;object-position:65% 35%}
.bond-cost{position:absolute;left:-8px;top:-8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%,#c9ecff 0,#3fa8ff 32%,#154f9c 78%);border:1.5px solid var(--gold1);font:700 13px/1 var(--cond)}
.bond-tag{position:absolute;left:0;right:0;bottom:4px;text-align:center;font:700 9px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 2px #000}
.bond.is-locked .bond-art,.bond.is-in-play .bond-art,.bond.is-used .bond-art{filter:grayscale(.9) brightness(.45)}
.bond.is-legal{--glow:0 0 0 4px rgba(140,255,230,1),0 0 34px rgba(86,224,200,.85);--glow-t:1.6s}
.bond.is-selected{transform:translateY(-4px) scale(1.06)}

/* ---------- name plates and corner ---------- */
.corner{grid-area:corner;z-index:30;display:flex;align-items:flex-start;justify-content:flex-start;gap:8px;padding:12px 0 0 14px}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;
  background:radial-gradient(circle at 40% 30%,#2b3339,#0d1114) padding-box,var(--frame) border-box;border:2px solid transparent;color:var(--gold1);box-shadow:0 4px 12px rgba(0,0,0,.6)}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{filter:brightness(1.25)}
.snd-btn .mic-slash{display:none}
.snd-btn.is-muted{color:#9a8f7c}.snd-btn.is-muted .mic-slash{display:inline}
.transport{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:rgba(6,8,10,.85);border:1px solid rgba(251,231,176,.25)}
.transport button{background:none;border:0;border-radius:999px;padding:4px 9px;cursor:pointer;font:600 13px/1 var(--cond)}
.transport button.is-on,.transport button:hover{background:rgba(251,231,176,.16)}
.transport input[type=range]{width:min(22vw,260px);accent-color:var(--gold2)}
.transport output{font-size:12px;color:#c8c0ad;padding:0 6px;white-space:nowrap}

/* ---------- round button, with the mana and spell mana counters above it (enemy) and below it (you) ---------- */
.orb-wrap{grid-area:orb;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.orb-shell{--r:clamp(56px,7vh,76px);position:relative;width:calc(var(--r)*2 + 16px);height:calc(var(--r)*2 + 16px);display:grid;place-items:center}
/* Mana and spell mana sit right next to each other in one row. */
.mana-pills{display:flex;align-items:center;justify-content:center;gap:4px}
/* Mana counters: the same framed pills as the coin/card counters in the top bar. */
.mana-num{display:flex;align-items:center;gap:7px;padding:5px 13px 5px 8px;border-radius:999px;font:700 20px/1 var(--cond);text-shadow:0 2px 3px rgba(0,0,0,.7);
  border:1.5px solid transparent;background:linear-gradient(180deg,#1b2026,#0a0c0f) padding-box,var(--frame) border-box;box-shadow:0 6px 14px rgba(0,0,0,.6)}
.mana-num small{font-size:12px;color:#9e968a}
.mana-num--opp{color:#ffd2ca}.mana-num--me{color:#dff1ff}
/* Faceted gem: dark rim (::before) + four lit facets and a glint (::after). The glow sits on
   the unclipped host so the drop-shadow isn't cut off by the diamond clip. */
.mana-gem{--g1:#f2faff;--g2:#8fd0ff;--g3:#3fa8ff;--g4:#12508f;--rim:#07182c;--glow:rgba(63,168,255,.7);
  position:relative;width:15px;height:20px;flex:none;filter:drop-shadow(0 0 4px var(--glow)) drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.mana-gem::before,.mana-gem::after{content:"";position:absolute;clip-path:polygon(50% 0,100% 42%,50% 100%,0 42%)}
.mana-gem::before{inset:0;background:var(--rim)}
.mana-gem::after{inset:1.5px 1.5px;background:
  linear-gradient(135deg,rgba(255,255,255,.95) 0 18%,transparent 19%),
  conic-gradient(from 0deg at 50% 42%,var(--g2) 0 90deg,var(--g4) 90deg 180deg,var(--g3) 180deg 270deg,var(--g1) 270deg 360deg)}
.mana-num--opp .mana-gem{--g1:#fff0ec;--g2:#ff9c8e;--g3:#ff5a4a;--g4:#8e1a12;--rim:#2a0906;--glow:rgba(255,90,74,.65)}
/* Spell mana (mana left unspent, saved for spells): a purple gem for both players, dimmed while there is none. */
.mana-num--spell{color:#eadbff}
.mana-num--spell .mana-gem{--g1:#fbeaff;--g2:#d5a6ff;--g3:#a35cff;--g4:#4b1b8c;--rim:#1c0a30;--glow:rgba(163,92,255,.8)}
.mana-num--spell.is-empty{color:#9a90a8}
.mana-num--spell.is-empty .mana-gem{filter:grayscale(.85) brightness(.55)}
/* "Spell mana" printed under the purple pill (it sits in the gap to the orb, so nothing moves), and a hover note that it's
   only for spells. Plain CSS so it shows at once, unlike a title tooltip. */
.mana-num--spell{position:relative;cursor:help}
.mana-cap{position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  font:700 10.5px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#d7c2fb;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9)}
.mana-num--spell.is-empty .mana-cap{color:#9a90a8}
/* Yours opens below your pill (under its caption), the enemy's above theirs, so neither covers the mana pill or the orb. */
.mana-tip{position:absolute;right:0;top:calc(100% + 18px);width:210px;padding:8px 11px;border-radius:8px;
  font:500 13px/1.35 var(--cond);letter-spacing:0;text-transform:none;color:#e9e1f7;text-shadow:none;white-space:normal;
  background:linear-gradient(180deg,#221733,#120c1c);border:1px solid #6b4aa3;box-shadow:0 8px 20px rgba(0,0,0,.65);
  opacity:0;visibility:hidden;transition:opacity .12s,visibility .12s;pointer-events:none;z-index:40}
.mana-tip strong{display:block;margin-bottom:3px;font:700 11px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#d5b8ff}
.mana-pills--opp .mana-tip{top:auto;bottom:calc(100% + 8px)}
.mana-num--spell:hover .mana-tip{opacity:1;visibility:visible}
.orb{position:relative;width:calc(var(--r)*2);height:calc(var(--r)*2);border-radius:50%;padding:0;cursor:pointer;border:4px solid transparent;
  background:radial-gradient(circle at 50% 35%,#2d5c86,#0f2743 62%,#08172a) padding-box,var(--frame) border-box;
  box-shadow:0 0 0 3px rgba(0,0,0,.55),0 14px 30px rgba(0,0,0,.7),inset 0 0 26px rgba(0,0,0,.6);transition:transform .15s,filter .2s}
.orb span{display:block;padding:0 10px;font:700 clamp(14px,1.9vh,19px)/1.05 var(--cond);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 3px rgba(0,0,0,.7)}
.orb.is-live:hover,.orb.is-ready:hover,.orb.is-attack:hover{transform:scale(1.04);filter:brightness(1.15)}
.orb:active{transform:scale(.97)}
.orb.is-ready{background:radial-gradient(circle at 50% 35%,#4aa8ff,#1a5ea6 60%,#0b2c55) padding-box,var(--frame) border-box;--glow:0 0 42px rgba(110,190,255,.95);--glow-t:1.6s;--glow-at:-4px}
.orb.is-attack{background:radial-gradient(circle at 50% 35%,#ffb15e,#c2561b 60%,#5a1f06) padding-box,var(--frame) border-box;--glow:0 0 44px rgba(255,150,70,1);--glow-t:1.3s;--glow-at:-4px}
.orb.is-wait{cursor:default;background:radial-gradient(circle at 50% 35%,#3a3f44,#1a1d20 62%,#0e1012) padding-box,var(--frame) border-box}
.orb.is-wait span{font-size:clamp(12px,1.5vh,15px);color:#b9b3a6}
/* Online turn timer: only shown once time runs low — a thick ring over the orb's rim draining clockwise
   (gold for you, red for the opponent) and a big countdown above the orb. */
.turn-clock{--p:1;--clk:#ffd36a;position:absolute;left:50%;top:50%;width:calc(var(--r)*2 + 12px);height:calc(var(--r)*2 + 12px);translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:2;animation:clockIn .35s ease-out}
.turn-clock[hidden]{display:none}
.turn-clock i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--clk) calc(var(--p) * 1turn),rgba(0,0,0,.5) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));filter:drop-shadow(0 0 6px var(--clk))}
.turn-clock.is-opp{--clk:#ff7a66}
.turn-clock.is-low{--clk:#ff4a3a}
.turn-clock b{position:absolute;left:50%;bottom:calc(100% + 6px);translate:-50% 0;min-width:44px;padding:3px 10px;border-radius:999px;border:2px solid var(--clk);background:rgba(10,4,4,.85);color:#fff;font:800 22px/1.1 var(--cond);text-align:center;box-shadow:0 0 14px var(--clk)}
.turn-clock b:empty{display:none}
.turn-clock em{position:absolute;left:50%;top:calc(100% + 6px);translate:-50% 0;white-space:nowrap;padding:2px 8px;border-radius:6px;background:rgba(90,10,4,.85);color:#ffd9d2;font:italic 600 12px/1.3 var(--cond)}
.turn-clock.is-mine.is-low b{animation:clockLow .5s ease-in-out infinite alternate}
@keyframes clockLow{to{background:#a3160c;scale:1.12}}
@keyframes clockIn{from{opacity:0;scale:1.25}}
@media (prefers-reduced-motion:reduce){.turn-clock,.turn-clock b{animation:none!important}}
body.no-motion .turn-clock,body.no-motion .turn-clock b{animation:none!important}
.mull-clock{margin:4px 0 0;color:#ffd36a;font:600 14px/1.3 var(--cond);letter-spacing:.04em}

/* ---------- hands ---------- */
.hand{display:flex;justify-content:center;position:relative}
.hand--opp{grid-area:hando;z-index:11;align-items:flex-start;cursor:help;outline:none}
/* Hover the opponent's hand (or tap it on a phone: it takes focus) to count it: the backs slide down, each shows its
   number, and a plate under the fan gives the real hand size. The wider hover area keeps the plate from flickering. */
.hand--opp::before{content:"";position:absolute;inset:0 -12px -18px;z-index:-1}
.hand--opp .back{position:relative;transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .2s}
.hand--opp:hover .back,.hand--opp:focus .back{transform:translateY(calc(-30% - var(--lift))) rotate(var(--rot));filter:brightness(1.12)}
.hand--opp .back::after{content:attr(data-n);position:absolute;left:50%;bottom:8%;translate:-50% 0;opacity:0;
  font:800 13px/1 var(--cond);color:#f6dc98;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9);transition:opacity .2s}
.hand--opp:hover .back::after,.hand--opp:focus .back::after{opacity:1}
.oh-count{position:absolute;left:50%;top:calc(var(--h-w)*.46);z-index:3;translate:-50% -6px;opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(#1b2330,#0c1118);border:1.5px solid var(--gold2);box-shadow:0 6px 16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--ink);font:600 13px/1 var(--cond);letter-spacing:.06em;transition:opacity .18s,translate .25s cubic-bezier(.2,.8,.2,1)}
.oh-count b{display:grid;place-items:center;min-width:26px;height:26px;padding:0 4px;border-radius:999px;
  background:radial-gradient(circle at 40% 30%,#f6dc98,#c08a3a 70%,#7a531d);color:#1a1206;font:800 15px/1 var(--cond);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.oh-count small{color:var(--muted);font-weight:500;letter-spacing:.04em}
.hand--opp:hover .oh-count,.hand--opp:focus .oh-count{opacity:1;translate:-50% 0}
.oh-count.is-empty b{background:#39414d;color:var(--ink)}
body.no-motion .hand--opp .back,body.no-motion .oh-count{transition:none}
@media (prefers-reduced-motion:reduce){.hand--opp .back,.oh-count{transition:none}}
.back{display:block;flex:none;width:calc(var(--h-w)*.62);height:calc(var(--h-w)*.87);margin:0 calc(var(--h-w)*-.13);border-radius:8px;background:var(--back);
  border:2px solid var(--gold2);box-shadow:0 8px 16px rgba(0,0,0,.6);transform:translateY(calc(-44% - var(--lift))) rotate(var(--rot));transform-origin:50% -80%}
.hand--me{grid-area:handme;z-index:20;align-items:flex-start}
.hand-slot{width:var(--h-w);height:var(--h-h);flex:none;position:relative;z-index:var(--z);
  /* Your hand sits almost fully on screen (name, cost and text readable) with a light overlap; hover lifts it the rest of the way. */
  margin-inline:calc(var(--h-w) * clamp(-.3,(6 - var(--n)) * .04 - .04,-.02));
  transform:translateY(var(--lift)) rotate(var(--rot));transform-origin:50% 160%;transition:transform .25s}
.hand-slot:hover,.hand-slot:focus-within{z-index:60}
.hcard{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:12px;transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .2s,opacity .2s}
.hcard[data-source]{cursor:grab}
.hand-slot:hover .hcard,.hcard:focus-visible{transform:translateY(-34%) scale(1.3) rotate(calc(var(--rot) * -1))}
/* Playable cards: a bright blue rim and a wide glow, so they read at a glance against the meadow. */
.hcard.is-playable .cf{box-shadow:0 0 0 3px #6cd4ff,0 0 16px 5px rgba(60,170,255,.95),0 0 38px 10px rgba(40,140,255,.55),0 12px 26px rgba(0,0,0,.6)}
.hcard.is-counter .cf{box-shadow:0 0 0 2px #ff8a7a,0 0 22px rgba(255,90,74,.7),0 12px 26px rgba(0,0,0,.6)}
.hcard.is-selected{transform:translateY(-26%) scale(1.16) rotate(calc(var(--rot) * -1))}
.hcard.is-selected .cf{box-shadow:0 0 0 3px var(--gold1),0 0 36px rgba(255,210,120,.9)}
.hcard.is-lifted,.uc.is-lifted{opacity:.15}

/* ---------- card face: forged metal frame (view.mjs cardFace) ----------
   Geometry follows the frame SVG's 250x350 grid: 1 unit = .4cqw. The art window is 12 units (4.8cqw) in from each edge.
   Layers: art, text panel, frame, keyword backings, cost / stat plaques / badge / gem, tags, gloss. */
.cf{container-type:inline-size;position:relative;display:block;width:100%;aspect-ratio:5/7;border-radius:4cqw;text-align:center;color:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.6);font-family:var(--cond);user-select:none;-webkit-user-select:none}
.cf-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none}
.cf-art{position:absolute;inset:4.8cqw;overflow:hidden;z-index:0;background:#07090b}
.cf-art img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:brightness(1.08) contrast(1.1) saturate(1.15)}
/* Art pop: a vignette pulls the eye to the subject, and the card type's colour glows around the inside of the window. */
.cf-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 30%,color-mix(in srgb,var(--tc) 20%,transparent),transparent 70%),radial-gradient(ellipse 80% 70% at 50% 34%,transparent 45%,rgba(0,0,0,.5) 100%);
  box-shadow:inset 0 0 5cqw color-mix(in srgb,var(--tc) 40%,transparent),inset 0 0 1.2cqw color-mix(in srgb,var(--tc) 65%,transparent)}
/* The text panel keeps to the bottom of the window and only grows up over the art when the rules need the room.
   Its fade is measured in cqw so a taller panel stays dark behind the text. */
.cf-panel{position:absolute;left:4.8cqw;right:4.8cqw;bottom:4.8cqw;z-index:1;padding:15cqw 5cqw 6cqw;display:flex;flex-direction:column;align-items:center;gap:2.2cqw;
  background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--tc) 20%,rgba(7,9,12,.82)) 9cqw,rgba(7,9,12,.95) 19cqw)}
/* Units: the power and health plaques own the bottom corners, so the text stops above them (and above the Tough
   shield, the Quick Attack and Challenger tags and the Overwhelm flame) while the type line sits between them. */
.cf--unit .cf-panel,.cf--companion .cf-panel,.cf--token .cf-panel{padding-bottom:10.5cqw}
.cf--unit .cf-type,.cf--companion .cf-type,.cf--token .cf-type{position:absolute;left:50%;bottom:2.6cqw;translate:-50% 0;white-space:nowrap}
.cf-name{font:700 8.4cqw/1.02 var(--cond);letter-spacing:.06em;text-transform:uppercase;text-align:center;text-wrap:balance;text-shadow:0 1cqw 1.6cqw #000,0 0 3cqw rgba(0,0,0,.8);max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cf-name--long{font-size:7.2cqw}.cf-name--xl{font-size:6.3cqw}
.cf-sub{margin-top:-1.2cqw;font:600 4.4cqw/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--gold1);text-shadow:0 .6cqw 1cqw #000}
.cf-kws{display:flex;gap:1.6cqw;flex-wrap:wrap;justify-content:center}
.cf-kws span,.cf-speed{display:inline-flex;align-items:center;gap:1.2cqw;padding:1cqw 3cqw 1cqw 2cqw;border-radius:1.6cqw;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 .45cqw rgba(251,231,176,.5);
  font:700 4.9cqw/1 var(--cond);text-transform:uppercase;letter-spacing:.08em;color:var(--gold1)}
.cf-kws svg,.cf-speed svg{width:4.9cqw;height:4.9cqw;flex:none}
.cf-speed--burst{color:#ffe07a;box-shadow:inset 0 0 0 .45cqw rgba(255,210,90,.6)}
.cf-speed--fast{color:#9fdcff;box-shadow:inset 0 0 0 .45cqw rgba(120,200,255,.6)}
.cf-speed--slow{color:#d6c2ff;box-shadow:inset 0 0 0 .45cqw rgba(185,150,255,.6)}
.cf-text{font:600 6.1cqw/1.26 "Segoe UI",system-ui,sans-serif;color:#f6f1e6;text-align:center;text-shadow:0 .5cqw 1cqw rgba(0,0,0,.9);overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.cf-text--long{font-size:5.4cqw;-webkit-line-clamp:8}
.cf-text--xl{font-size:4.9cqw;-webkit-line-clamp:9}
.cf-tag{font:700 .92em/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--gold1)}
.cf-type{margin-top:auto;display:flex;gap:1.2cqw;font:600 3.5cqw/1 var(--cond);letter-spacing:.13em;text-transform:uppercase;color:color-mix(in srgb,var(--tc) 40%,#d9cfbb)}
.cf-type i{font-style:normal;opacity:.6}
/* Spells: the art sits in a round window above a solid panel, so the frame is drawn beneath it. */
.cf--spell .cf-frame{z-index:0}
.cf--spell .cf-art{inset:auto;left:13.6cqw;top:8.4cqw;width:72.8cqw;height:72.8cqw;border-radius:50%;z-index:1}
.cf--spell .cf-art::after{border-radius:50%}
.cf--spell .cf-panel{z-index:1;min-height:34.6%;padding:2.5cqw 5cqw 5cqw;gap:1.8cqw;justify-content:flex-start;background:linear-gradient(180deg,transparent,rgba(9,11,15,.9) 6cqw)}
/* Cost orb, type badge and stat plaques: each carries its own SVG so keyword backings can sit between them and the frame. */
.cf-cost,.cf-pow,.cf-hp,.cf-badge{position:absolute;display:grid;place-items:center;z-index:4;filter:drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.55))}
.cf-cost>svg,.cf-pow>svg,.cf-hp>svg,.cf-badge>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cf-cost b,.cf-pow b,.cf-hp b{position:relative;font:700 11cqw/1 var(--cond);-webkit-text-stroke:.5cqw rgba(20,10,0,.6);paint-order:stroke;text-shadow:0 .8cqw 0 rgba(0,0,0,.45)}
.cf-cost{left:-2.5cqw;top:-2.5cqw;width:20.8cqw;height:20.8cqw}
.cf-cost b{font-size:11.5cqw;-webkit-text-stroke-color:rgba(4,24,48,.7)}
.cf-badge{right:0;top:1.2cqw;width:14.4cqw;height:16.8cqw}
.cf-pow,.cf-hp{bottom:-2.4cqw;width:27.2cqw;height:16cqw}
.cf-pow{left:-1.6cqw;padding-right:3cqw}
.cf-hp{right:-1.6cqw;padding-left:3cqw}
.cf-hp>svg{scale:-1 1}
/* A stat above its printed value reads green, below it (or wounded health) red. */
.cf-pow.up b,.uc-pow.up b{color:#7dff95;-webkit-text-stroke-color:#06300f}
.cf-pow.down b,.uc-pow.down b,.cf-hp.hurt b,.uc-hp.hurt b{color:#ff4a3d;-webkit-text-stroke-color:#2a0200}
/* Champion level medallion, tucked under the cost orb: dark disc with a gold "1", gold disc with a dark "2" once levelled. */
.cf-crest{position:absolute;left:3cqw;top:17.4cqw;width:14.4cqw;height:14.4cqw;display:grid;place-items:center;z-index:4;filter:drop-shadow(0 .8cqw 1.2cqw rgba(0,0,0,.7))}
.cf-crest svg{position:absolute;inset:0;width:100%;height:100%}
.cf-crest b{position:relative;font:700 8.4cqw/1 var(--cond);color:var(--gold1);text-shadow:0 .4cqw .8cqw #000}
.cf-crest.is-l2{filter:drop-shadow(0 .8cqw 1.2cqw rgba(0,0,0,.7)) drop-shadow(0 0 2cqw rgba(255,200,110,.75))}
.cf-crest.is-l2 b{color:#3a2408;text-shadow:0 .3cqw 0 rgba(255,245,210,.6)}
/* Numbers in orbs, medallions and plaques: trim the line box to the digits (cap height to baseline) so they sit in the
   optical middle; the font's line box has extra room under the baseline and lifts digits above centre. */
.cf-cost b,.cf-pow b,.cf-hp b,.cf-crest b,.uc-pow b,.uc-hp b{text-box:trim-both cap alphabetic}
/* Level-up line: heading and condition stacked and centred, set off from the rules above by a thin rule. */
.cf-lvtext{display:flex;flex-direction:column;align-items:center;gap:.6cqw;margin-top:1.4cqw;padding-top:1.6cqw;border-top:.4cqw solid rgba(251,231,176,.28)}
.cf-text>.cf-lvtext:first-child{margin-top:0;padding-top:0;border-top:0}
.cf-lvl{position:absolute;right:2cqw;top:19cqw;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.2cqw;padding:1.4cqw 2.2cqw;border-radius:2.5cqw;background:rgba(8,10,12,.88);border:.6cqw solid rgba(251,231,176,.5);box-shadow:0 1cqw 2.5cqw rgba(0,0,0,.6)}
.cf-lvl b{font:700 7cqw/1 var(--cond);letter-spacing:.04em;color:#fff}
.cf-lvl i,.uc-lvl i{display:flex;gap:.8cqw}
.cf-lvl u{width:3.2cqw;height:3.2cqw;border-radius:50%;background:rgba(255,255,255,.18)}
.cf-lvl u.on,.uc-lvl u.on{background:var(--gold1);box-shadow:0 0 1.5cqw rgba(255,214,130,.9)}
.cf-lvl.is-ready,.uc-lvl.is-ready{background:linear-gradient(180deg,#fff2b0,#e2b25a 55%,#9c6a16);border-color:#fff3c4;--glow:0 0 0 1px #fff3c4,0 0 14px rgba(255,210,120,.9);--glow-t:1.6s}
.cf-lvl.is-ready{--glow-at:-.6cqw}
.uc-lvl.is-ready{--glow-at:-1px}
.cf-lvl.is-ready b,.uc-lvl.is-ready b{color:#3a2408;text-transform:uppercase}
.cf-lvl.is-ready i,.uc-lvl.is-ready i{display:none}
.cf-gloss{position:absolute;inset:0;z-index:7;border-radius:4cqw;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 45%,transparent 55%);background-size:250% 100%;background-position:120% 0;transition:background-position .6s}
.hcard:hover .cf-gloss,.col-face:hover .cf-gloss{background-position:-20% 0}
.cf--leader .cf-panel{padding-bottom:7cqw}

/* ---------- rarity gem: set in a bezel on the frame's bottom point (view.mjs rarityGem) ---------- */
.gem--common{color:#8fdc9a}.gem--rare{color:#6fb8ff}.gem--epic{color:#c08cff}.gem--legendary{color:#ff9a4d}
.cf-gem{position:absolute;left:50%;bottom:-7.2cqw;translate:-50% 0;width:12cqw;height:12cqw;z-index:5;pointer-events:none}
.cf-gem .cf-bezel{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cf-gem .gem{position:absolute;left:50%;top:50%;translate:-50% -50%;width:62%;height:62%;filter:drop-shadow(0 0 1.2cqw currentColor)}

/* ---------- art versions of a pulled copy: Alt Art, Secret Art and Beta ----------
   The painting takes over: full-bleed art behind a thin metal keyline with corner brackets, the text on a frosted
   plate, and a tag on the top edge. No foil over the art; Secret Art's shimmer lives on the name only.
   art(card, variant) swaps in a real painting from assets/cards/<variant>/ when it is there. */
.cf--full .cf-art{inset:0;border-radius:4cqw}
.cf--full .cf-art img{object-position:50% 30%}
.cf--full .cf-frame{z-index:2}
.cf.cf--full .cf-panel{left:4cqw;right:4cqw;bottom:4cqw;min-height:0;border-radius:3cqw;padding-top:4cqw;
  background:linear-gradient(180deg,rgba(10,12,16,.4),rgba(10,12,16,.74));backdrop-filter:blur(6px) saturate(1.2);-webkit-backdrop-filter:blur(6px) saturate(1.2);
  box-shadow:inset 0 0 0 .4cqw rgba(255,240,210,.28),0 2cqw 5cqw rgba(0,0,0,.5)}
.cf--full.cf--spell .cf-panel{top:auto}
.cf--full.cf--spell .cf-art{inset:0;width:auto;height:auto;border-radius:4cqw}
.cf--full.cf--spell .cf-art::after{border-radius:0}
.cf--full.cf--spell .cf-frame{z-index:2}
.cf-vtag{position:absolute;left:50%;top:-1.6cqw;translate:-50% 0;z-index:6;padding:1.4cqw 3.6cqw 1.2cqw;border-radius:99px;white-space:nowrap;pointer-events:none;
  font:700 4cqw/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#231809;background:linear-gradient(180deg,#fff3d6,#e7c48a 55%,#b0803c);box-shadow:0 0 0 .5cqw #1a1208,0 0 3cqw rgba(255,200,120,.6)}
.cf--secret .cf-vtag{color:#f7ecff;background:linear-gradient(180deg,#3a2150,#150b20);box-shadow:0 0 0 .5cqw #d9b36a,0 0 3cqw rgba(200,150,255,.6)}
.cf--beta .cf-vtag{color:#1a1004;background:linear-gradient(180deg,#fffbe8,#f2cf85 50%,#b27a2c);box-shadow:0 0 0 .5cqw #1a1004,0 0 3.4cqw rgba(255,200,110,.85)}
.cf--secret .cf-name{background:linear-gradient(100deg,#fff4d6 0,#e6b85c 20%,#fff 32%,#e0b0ff 46%,#9fe8ff 58%,#fff 70%,#ffd9a0 84%,#fff4d6 100%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .8cqw 1cqw #000);text-shadow:none;animation:cfNameFoil 5s linear infinite}
@keyframes cfNameFoil{to{background-position:250% 0}}
.cf--beta .cf-name{color:#fff4d2;text-shadow:0 0 2.4cqw rgba(255,200,110,.7),0 1cqw 1.6cqw #000}
/* Special Art (SP): a jade-and-pearl tag and a cool glow on the name; the painting itself carries the card. */
.cf--special .cf-vtag{letter-spacing:.32em;padding-right:3.3cqw;color:#062a22;background:linear-gradient(180deg,#f2fff9,#9ff0d0 55%,#3fae8c);box-shadow:0 0 0 .5cqw #0b2a22,0 0 3.4cqw rgba(140,255,215,.75)}
.cf--special .cf-name{color:#effff8;text-shadow:0 0 2.4cqw rgba(140,255,215,.65),0 1cqw 1.6cqw #000}
@media (prefers-reduced-motion:reduce){.cf--secret .cf-name{animation:none}}
.no-motion .cf--secret .cf-name{animation:none}
.cf--big{width:min(300px,32vw)}

/* ---------- board unit ---------- */
.uc{container-type:inline-size;position:relative;display:block;width:var(--u-w);height:var(--u-h);padding:0;border-radius:9px;cursor:pointer;
  border:2px solid transparent;background:linear-gradient(#0c0f12,#0c0f12) padding-box,var(--frame) border-box;box-shadow:0 8px 18px rgba(0,0,0,.65);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .3s}
.uc[data-source]{cursor:grab}
.uc:hover{transform:translateY(-4px) scale(1.04)}
.uc-art{position:absolute;inset:0;border-radius:7px;overflow:hidden}
.uc-art img{width:100%;height:100%;object-fit:cover;object-position:55% 25%}
.uc-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.7))}
.uc--champion{background:linear-gradient(#0c0f12,#0c0f12) padding-box,conic-gradient(from 0deg,#fff5d0,#e2b25a,#fff,#d18f2d,#fff5d0) border-box}
.uc.is-leveled{box-shadow:0 0 0 2px #fff3c4,0 0 26px rgba(255,210,120,.8),0 8px 18px rgba(0,0,0,.65)}
.uc-crest{position:absolute;left:50%;top:-9px;translate:-50% 0;width:22px;height:22px;color:var(--gold1);filter:drop-shadow(0 2px 3px #000)}
.uc-crest svg{width:100%;height:100%}
.uc-lvl{position:absolute;left:50%;top:14px;translate:-50% 0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 5px 3px;border-radius:6px;background:rgba(8,10,12,.88);border:1px solid rgba(251,231,176,.5);white-space:nowrap}
.uc-lvl b{font:700 11px/1 var(--cond);color:#fff}
.uc-lvl i{gap:2px}
.uc-lvl u{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.2)}
/* Power and health: the same angular plaques as the card face, sized off the unit's width (1cqw = 1% of it). */
.uc-pow,.uc-hp{position:absolute;bottom:-6cqw;width:42cqw;height:24.7cqw;display:grid;place-items:center;z-index:3;filter:drop-shadow(0 1.5cqw 2cqw rgba(0,0,0,.6))}
.uc-pow{left:-5cqw;padding-right:4cqw}
.uc-hp{right:-5cqw;padding-left:4cqw}
.uc-pow>svg,.uc-hp>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.uc-hp>svg{scale:-1 1}
.uc-pow b,.uc-hp b{position:relative;font:700 17cqw/1 var(--cond);color:#fff;-webkit-text-stroke:.9cqw rgba(20,10,0,.65);paint-order:stroke;text-shadow:0 1cqw 0 rgba(0,0,0,.5)}
/* ---------- keyword marks: only on the field, each on the part of the unit it changes ---------- */
/* Tough: riveted steel plating on the health plaque. */
.uc-ward{pointer-events:none}
/* Overwhelm: the power plaque runs molten (view.mjs) and flames pour off its top edge. */
.uc-flame{position:absolute;left:-5cqw;bottom:13.8cqw;width:42cqw;height:29.6cqw;z-index:2;pointer-events:none;filter:drop-shadow(0 0 2cqw rgba(255,110,30,.8))}
.uc-flame svg{display:block;width:100%;height:100%;overflow:visible}
.uc-flame path{transform-box:fill-box;transform-origin:50% 100%;animation:kwFlame .9s ease-in-out infinite alternate}
@keyframes kwFlame{0%{transform:scale(1,1)}50%{transform:scale(.9,1.12)}100%{transform:scale(1.06,.9)}}
/* Quick Attack: a still lightning bolt on the power plaque's corner, yellow while it can matter (attacking, or free to
   attack this turn) and grey otherwise. */
.uc-quick{position:absolute;left:19cqw;bottom:10cqw;width:23cqw;height:23cqw;z-index:4;pointer-events:none;filter:drop-shadow(0 0 1.6cqw rgba(255,220,80,.85)) drop-shadow(0 .8cqw 1cqw rgba(0,0,0,.8))}
.uc-quick svg{display:block;width:100%;height:100%}
.uc-quick--off{filter:grayscale(1) brightness(.7) drop-shadow(0 .8cqw 1cqw rgba(0,0,0,.8))}
/* Challenger: a red target lock over the art, gone once it has pulled a blocker into its lane. */
.uc-mark{position:absolute;pointer-events:none}
.uc-mark--challenger{inset:0;z-index:2;filter:drop-shadow(0 0 1.4cqw rgba(255,50,50,.85))}
.uc-mark--challenger svg{display:block;width:100%;height:100%;overflow:visible}
.uc-lock-spin{transform-box:fill-box;transform-origin:center;animation:kwLock 14s linear infinite}
@keyframes kwLock{to{rotate:360deg}}
/* Elusive: violet smoke rising from below and hanging around the sides. Two copies of a seamless tile (baked by
   tools/smoke_art.py) scroll upward at different speeds, so it flows rather than sliding as one sheet. They only move
   (transform), so the graphics card runs them without repainting. The old live SVG noise filter was painted on the
   CPU in Firefox, again whenever the unit scaled, and at ~8px/s it stepped one pixel at a time.
   Each layer is exactly three tiles tall and slides one tile (-33.3333% of itself): % keeps the keyframes free of
   cqw, so every browser can run them off the main thread. */
.uc-mark--elusive{inset:0;z-index:1;border-radius:7px;overflow:hidden;contain:strict;
  -webkit-mask-image:linear-gradient(0deg,#000 0,rgba(0,0,0,.65) 30%,transparent 62%),linear-gradient(90deg,rgba(0,0,0,.55),transparent 24%,transparent 76%,rgba(0,0,0,.55));
  mask-image:linear-gradient(0deg,#000 0,rgba(0,0,0,.65) 30%,transparent 62%),linear-gradient(90deg,rgba(0,0,0,.55),transparent 24%,transparent 76%,rgba(0,0,0,.55))}
.uc-mark--elusive::before,.uc-mark--elusive::after,.cf-mark--elusive::before,.cf-mark--elusive::after{content:"";position:absolute;left:0;top:0;width:100%;
  background:url(../../assets/ui/smoke.webp) 0 0 repeat;will-change:transform;animation:kwSmoke 7s linear infinite}
.uc-mark--elusive::before{height:360cqw;background-size:120cqw 120cqw}
.uc-mark--elusive::after{height:252cqw;background-size:84cqw 84cqw;background-position:37cqw 20cqw;opacity:.6;animation-duration:3.8s}
@keyframes kwSmoke{to{transform:translate3d(0,-33.3333%,0)}}
/* Regenerate: two green arrows turn slowly around the health number. While the unit is damaged they glow, since it heals
   as the turn ends. The hover card of a unit on the field wears them too (cf-renew). */
.uc-renew,.cf-renew{position:absolute;z-index:4;pointer-events:none;filter:drop-shadow(0 0 1cqw rgba(80,220,120,.45)) drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.7))}
.uc-renew{right:-4cqw;bottom:-11.6cqw;width:36cqw;height:36cqw}
.cf-renew{left:3.45cqw;top:-3.65cqw;width:23.3cqw;height:23.3cqw}
.uc-renew svg,.cf-renew svg{display:block;width:100%;height:100%;overflow:visible;animation:kwRenew 14s linear infinite}
@keyframes kwRenew{to{rotate:360deg}}
.uc-renew.is-due,.cf-renew.is-due{filter:drop-shadow(0 0 3.4cqw rgba(120,255,160,.95)) drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.7)) brightness(1.2);animation:kwRenewDue 1.3s ease-in-out infinite alternate}
@keyframes kwRenewDue{from{filter:drop-shadow(0 0 1cqw rgba(80,220,120,.45)) drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.7))}}
/* The hover card of a unit on the field wears the other marks too, scaled to the card face's plaques (1cqw = 1% of
   the card). Challenger's lock and Elusive's smoke sit over the art, under the text panel, so the rules stay readable. */
.cf-flame{position:absolute;left:-1.6cqw;bottom:10.4cqw;width:27.2cqw;height:15cqw;z-index:3;pointer-events:none;filter:drop-shadow(0 0 1.4cqw rgba(255,110,30,.8))}
.cf-flame svg{display:block;width:100%;height:100%;overflow:visible}
.cf-flame path{transform-box:fill-box;transform-origin:50% 100%;animation:kwFlame .9s ease-in-out infinite alternate}
.cf-quick{position:absolute;left:13.9cqw;bottom:8cqw;width:14.9cqw;height:14.9cqw;z-index:5;pointer-events:none;filter:drop-shadow(0 0 1.1cqw rgba(255,220,80,.85)) drop-shadow(0 .6cqw .7cqw rgba(0,0,0,.8))}
.cf-quick svg{display:block;width:100%;height:100%}
.cf-mark{position:absolute;inset:4.8cqw;pointer-events:none}
.cf-mark--challenger{z-index:1;filter:drop-shadow(0 0 1cqw rgba(255,50,50,.85))}
.cf-mark--challenger svg{display:block;width:100%;height:100%;overflow:visible}
.cf-mark--elusive{z-index:1;overflow:hidden;contain:strict;
  -webkit-mask-image:linear-gradient(0deg,#000 0,rgba(0,0,0,.65) 45%,transparent 75%),linear-gradient(90deg,rgba(0,0,0,.55),transparent 24%,transparent 76%,rgba(0,0,0,.55));
  mask-image:linear-gradient(0deg,#000 0,rgba(0,0,0,.65) 45%,transparent 75%),linear-gradient(90deg,rgba(0,0,0,.55),transparent 24%,transparent 76%,rgba(0,0,0,.55))}
.cf-mark--elusive::before{height:300cqw;background-size:100cqw 100cqw}
.cf-mark--elusive::after{height:210cqw;background-size:70cqw 70cqw;background-position:31cqw 17cqw;opacity:.6;animation-duration:3.8s}
@media (prefers-reduced-motion:reduce){.uc-flame path,.uc-lock-spin,.uc-mark--elusive::before,.uc-mark--elusive::after,.uc-renew,.cf-renew,.uc-renew svg,.cf-renew svg,.cf-flame path,.cf-mark--elusive::before,.cf-mark--elusive::after{animation:none}}
.no-motion .uc-flame path,.no-motion .uc-lock-spin,.no-motion .uc-mark--elusive::before,.no-motion .uc-mark--elusive::after,.no-motion .uc-renew,.no-motion .cf-renew,.no-motion .uc-renew svg,.no-motion .cf-renew svg,.no-motion .cf-flame path,.no-motion .cf-mark--elusive::before,.no-motion .cf-mark--elusive::after{animation:none}
.uc-stun{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:7px;background:rgba(30,70,140,.5);color:#d8eeff;box-shadow:inset 0 0 0 2px #7fc4ff}
.uc-stun svg{width:42%;height:42%;filter:drop-shadow(0 0 6px #9fdcff);animation:stunSpin 3s linear infinite}
.uc-stun b{padding:2px 6px;border-radius:3px;background:rgba(10,30,70,.9);font:700 9px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
/* Frozen units can still attack and block (power 0), so frost tints the art without covering the stats. */
.uc-frost{position:absolute;inset:0;border-radius:7px;pointer-events:none;background:linear-gradient(180deg,rgba(210,240,255,.5),rgba(170,220,255,.14) 60%,rgba(170,220,255,0));box-shadow:inset 0 0 0 2px #e6f7ff,inset 0 0 16px rgba(255,255,255,.6)}
.uc-frost b{position:absolute;left:50%;top:6px;translate:-50% 0;padding:2px 6px;border-radius:3px;background:rgba(20,60,110,.9);color:#e6f7ff;font:700 9px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
@keyframes stunSpin{to{rotate:360deg}}
.uc.is-stunned{filter:none}
.uc.can-attack{--glow:0 0 0 3px rgba(251,231,176,.95),0 0 30px rgba(255,190,90,.8);--glow-t:1.8s}
.uc.can-block{--glow:0 0 0 4px rgba(140,255,230,1),0 0 34px rgba(86,224,200,.85);--glow-t:1.1s}
.uc.is-selected{transform:translateY(-10px) scale(1.08);box-shadow:0 0 0 3px var(--gold1),0 0 30px rgba(255,210,120,.9),0 16px 30px rgba(0,0,0,.7)}
.uc.is-target,.uc.is-drop-live{--glow:0 0 0 4px rgba(255,120,100,1),0 0 36px rgba(255,70,60,.85);--glow-t:1s}
.uc[data-side="me"].is-target,.uc[data-side="me"].is-drop-live{--glow:0 0 0 4px rgba(140,255,230,1),0 0 34px rgba(86,224,200,.85)}
/* A picked spell target holds a steady ring (no pulse) until it is locked in or pulled back. */
.uc.is-picked,.uc[data-side="me"].is-picked{animation:none;transform:translateY(-6px);box-shadow:0 0 0 4px #ffe08a,0 0 30px rgba(255,210,110,.9)}
.uc.is-picked::before,.uc.is-selected::before,.uc.is-replace::before{content:none}
.orb.is-lock span{color:#fff7dc}
.uc.is-drop-hover{transform:scale(1.12)}

/* ---------- small option tray (only for non-drag choices) ---------- */
.tray{position:absolute;left:50%;bottom:calc(var(--h-h)*.64);translate:-50% 0;z-index:40;display:flex;gap:8px;animation:rise .2s ease-out}
.tray button{padding:9px 18px;border-radius:6px;cursor:pointer;font:700 14px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid transparent;background:linear-gradient(180deg,#1c2a36,#0b131a) padding-box,var(--frame) border-box;box-shadow:0 8px 20px rgba(0,0,0,.6)}
.tray button:hover{filter:brightness(1.25)}
.tray .is-danger{background:linear-gradient(180deg,#4a1a1d,#220b0d) padding-box,var(--frame) border-box}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* ---------- overlays ---------- */
.veil{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(70% 70% at 50% 50%,rgba(5,8,10,.62),rgba(2,3,4,.88));animation:fade .3s}
@keyframes fade{from{opacity:0}}
.mull,.effect-pick{display:flex;flex-direction:column;align-items:center;gap:22px}
.mull h2{font:700 clamp(28px,4.4vh,42px)/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;margin:0;text-shadow:0 3px 10px #000}
.mull-cards{display:flex;gap:clamp(8px,1.5vw,22px)}
.mull-card{position:relative;width:calc(var(--h-w)*1.18);padding:0;border:0;background:none;cursor:pointer;transition:transform .2s}
.mull-card:hover{transform:translateY(-6px)}
.mull-x{position:absolute;left:50%;top:40%;translate:-50% -50%;padding:8px 14px;border-radius:6px;background:rgba(160,30,30,.9);border:2px solid #ffb0a0;font:700 14px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .15s}
.mull-card.is-out .cf{filter:grayscale(.8) brightness(.45)}
.mull-card.is-out .mull-x{opacity:1}
.mull-sub{margin:-10px 0 0;font:600 15px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#cfc4ac}
.mull-actions,.end-actions{display:flex;gap:14px}
/* coin toss: one coin with both Legends on it, landing on the winner's face (--land) */
.toss{display:flex;flex-direction:column;align-items:center;gap:22px}
.toss h2{font:700 clamp(28px,4.4vh,42px)/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;margin:0;text-shadow:0 3px 10px #000}
.toss-coin{width:clamp(120px,19vh,180px);aspect-ratio:1;perspective:900px}
.toss-spin{--land:0deg;position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(var(--land));animation:tossFlip 1.5s cubic-bezier(.2,.7,.25,1) both}
.toss.is-lost .toss-spin{--land:180deg}
.toss-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;backface-visibility:hidden;background:var(--fc,#333);
  border:4px solid #e9c77a;box-shadow:0 0 0 2px #3a2a10,0 12px 30px rgba(0,0,0,.7),inset 0 0 18px rgba(0,0,0,.6)}
.toss-face img{width:100%;height:100%;object-fit:cover}
.toss-face--opp{transform:rotateY(180deg)}
@keyframes tossFlip{from{transform:translateY(0) rotateY(0deg)}45%{transform:translateY(-70px) rotateY(calc(900deg + var(--land)))}to{transform:translateY(0) rotateY(calc(1800deg + var(--land)))}}
.toss .mull-sub,.toss-note,.toss-actions{animation:rise .3s 1.3s both}
.toss-note{margin:-8px 0 0;font:500 15px/1.35 var(--cond);letter-spacing:.06em;color:#e8dcc0;text-align:center}
.mull .toss-note{margin:-12px 0 0}
@media (prefers-reduced-motion:reduce){.toss-spin,.toss .mull-sub,.toss-note,.toss-actions{animation:none}}
/* choosing a unit card to bring back from your graveyard */
.grave-pick{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:45;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(92vw,980px);
  padding:16px 20px 18px;border-radius:10px;border:2px solid transparent;background:linear-gradient(180deg,rgba(20,27,33,.96),rgba(8,11,14,.96)) padding-box,var(--frame) border-box;
  box-shadow:0 24px 60px rgba(0,0,0,.75);animation:rise .2s ease-out}
.grave-pick .mull-sub{margin:0}
.grave-pick-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-height:52vh;overflow:hidden auto;padding:8px 4px 12px}
.grave-pick-card{width:var(--h-w);padding:0;border:0;border-radius:8px;background:none;cursor:pointer;transition:transform .15s}
.grave-pick-card:hover{transform:translateY(-4px)}
.grave-pick-card.is-picked{transform:translateY(-6px);box-shadow:0 0 0 4px #ffe08a,0 0 30px rgba(255,210,110,.9)}
.gbtn{min-width:170px;padding:13px 26px;border-radius:6px;cursor:pointer;font:700 17px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#f5ecd6;
  border:2px solid transparent;background:linear-gradient(180deg,rgba(28,34,40,.95),rgba(10,12,15,.95)) padding-box,var(--frame) border-box;box-shadow:0 10px 24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);transition:filter .15s,transform .15s}
.gbtn:hover{filter:brightness(1.2);transform:translateY(-1px)}
.gbtn:disabled{filter:grayscale(1) brightness(.6);cursor:default;transform:none}
.gbtn--primary{background:linear-gradient(180deg,#2f7fcf,#123e74) padding-box,var(--frame) border-box;box-shadow:0 0 24px rgba(63,168,255,.45),0 10px 24px rgba(0,0,0,.6)}
.gbtn--danger{background:linear-gradient(180deg,#6a2027,#2a0c10) padding-box,var(--frame) border-box}
.veil--end{background:radial-gradient(60% 60% at 50% 50%,rgba(10,14,18,.5),rgba(2,3,4,.94))}
.end-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px}
.end-card::before{content:"";position:absolute;left:50%;top:40%;width:900px;height:900px;translate:-50% -50%;z-index:-1;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,215,140,.18) 0 5deg,transparent 5deg 15deg);mask:radial-gradient(circle,#000 8%,transparent 60%);animation:spin 50s linear infinite}
.end-card.is-defeat::before{background:repeating-conic-gradient(from 0deg,rgba(150,170,190,.12) 0 5deg,transparent 5deg 15deg)}
@keyframes spin{to{rotate:360deg}}
.end-card h2{margin:0;font:700 clamp(64px,13vh,130px)/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(180deg,#fffbe8 10%,#f2cf85 45%,#b27a2c 80%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 24px rgba(255,190,90,.45));animation:endIn .9s cubic-bezier(.2,.8,.2,1)}
.end-card.is-defeat h2{background:linear-gradient(180deg,#f2f6f8,#9fb2bd 55%,#4e616c);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
@keyframes endIn{from{opacity:0;transform:scale(1.35);letter-spacing:.4em}}
.veil--menu{z-index:70}
.menu{display:flex;flex-direction:column;gap:10px;min-width:280px;padding:26px 26px 22px;border-radius:10px;border:2px solid transparent;
  background:linear-gradient(180deg,#141b21,#080b0e) padding-box,var(--frame) border-box;box-shadow:0 30px 70px rgba(0,0,0,.8)}
.menu h3{margin:0 0 8px;text-align:center;font:700 22px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase}
.menu .gbtn{width:100%}
.confirm-veil{position:fixed;z-index:200}
.confirm{width:min(400px,calc(100vw - 32px));min-width:0;animation:confirm-in .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes confirm-in{from{opacity:0;transform:scale(.92) translateY(8px)}}
.confirm-msg{margin:0 0 10px;text-align:center;font:500 16px/1.45 "Segoe UI",system-ui;color:#d8d2c4}
.confirm-btns{display:flex;gap:10px}
.confirm-btns .gbtn{flex:1;min-width:0;padding:13px 12px}
.menu-toggle{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px;font:600 14px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:#c8c0ad}
/* Board picker: a framed thumbnail of the painting with the board's name, and an arrow either side to flip through them. */
.menu-board{display:flex;align-items:center;gap:8px;margin-top:4px}
.mb-view{position:relative;flex:1;height:64px;overflow:hidden;border-radius:6px;border:2px solid transparent;background:#0c1014 padding-box,var(--frame) border-box}
.mb-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 44%;border-radius:4px}
.mb-view span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:4px;
  background:linear-gradient(180deg,rgba(6,9,12,.2),rgba(6,9,12,.62));text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.8)}
.mb-view small{font:600 11px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--gold1)}
.mb-view b{font:700 19px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#f5ecd6}
.mb-arrow{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;cursor:pointer;color:var(--gold1);
  border:2px solid transparent;background:linear-gradient(180deg,rgba(28,34,40,.95),rgba(10,12,15,.95)) padding-box,var(--frame) border-box;transition:filter .15s}
.mb-arrow:hover{filter:brightness(1.25)}
.mb-arrow svg{width:18px;height:18px}
.menu--wide{width:min(560px,92vw);max-height:84vh}
.menu-list{display:flex;flex-direction:column;gap:5px;overflow:auto;max-height:56vh}
.menu-list button{text-align:left;padding:8px 12px;border-radius:5px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);cursor:pointer;font:500 14px/1.3 "Segoe UI",system-ui}
.menu-list button:hover{border-color:var(--gold2)}
.menu--rules{overflow:auto;font-family:"Segoe UI",system-ui;font-size:14px;line-height:1.5}
.menu--rules h4{margin:12px 0 2px;font:700 15px/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--gold1)}
.menu--rules p{margin:0;color:#d8d2c4}
.peek{--pw:clamp(200px,16vw,250px);position:fixed;z-index:9500;width:var(--pw);pointer-events:none;filter:drop-shadow(0 20px 40px rgba(0,0,0,.75));animation:fade .12s}
/* A Legend's hover: the Legend, then its Champion as it is now → levelled up, a size smaller.
   max-content, not auto: a fixed box shrinks to the room left of its last position, which would squeeze the row. */
.peek:has(.peek-legend){width:max-content}
.peek-legend{display:flex;align-items:center;gap:12px}
.peek-main{flex:none;width:var(--pw)}
.peek-champ{flex:none;width:calc(var(--pw) * .82);display:flex;flex-direction:column;align-items:center;gap:7px}
.peek-champ>small{padding:5px 11px;border-radius:999px;background:rgba(8,10,12,.92);border:1px solid rgba(251,231,176,.35);font:700 11px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--gold1)}
.peek-arrow{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:0 -4px;margin-top:24px;border-radius:50%;background:rgba(8,10,12,.92);border:1px solid rgba(251,231,176,.35);color:var(--gold1)}
.peek-arrow svg{width:15px;height:15px;margin-left:2px}
/* Ability on the stack: the hover shows what it does (damage burst up front), not the unit's whole card.
   Green edge = ability speed and blue/red ring = owner, matching its coin. */
.skill{--own:rgba(86,170,255,.85);position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#1b2029,#0b0d12 70%);
  box-shadow:0 0 0 3px #6fd08a,0 0 0 5px rgba(0,0,0,.7),0 0 0 7px var(--own),0 0 30px var(--own)}
.skill.is-theirs{--own:rgba(255,90,74,.85)}
.skill-art{position:relative;height:118px}
.skill-art img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.skill-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,#1b2029 100%)}
.skill-head{position:relative;margin-top:-26px;padding:0 14px;display:grid;gap:3px}
.skill-head b{font:800 22px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.9)}
.skill-head small{font:700 11px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#6fd08a}
.skill-hit{display:flex;align-items:center;gap:12px;margin:12px 12px 0;padding:8px 12px 8px 8px;border-radius:10px;
  background:linear-gradient(90deg,rgba(214,40,26,.4),rgba(214,40,26,.08));border:1px solid rgba(255,90,74,.5)}
.skill-hit b{flex:none;width:52px;height:52px;display:grid;place-items:center;font:900 30px/1 var(--cond);color:#fff;text-shadow:0 2px 3px rgba(60,0,0,.9);
  background:radial-gradient(circle at 38% 32%,#ffb08f,#e5321f 48%,#7d0f08);filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));
  clip-path:polygon(50% 0%,59.8% 13.3%,75% 6.7%,76.9% 23.1%,93.3% 25%,86.7% 40.2%,100% 50%,86.7% 59.8%,93.3% 75%,76.9% 76.9%,75% 93.3%,59.8% 86.7%,50% 100%,40.2% 86.7%,25% 93.3%,23.1% 76.9%,6.7% 75%,13.3% 59.8%,0% 50%,13.3% 40.2%,6.7% 25%,23.1% 23.1%,25% 6.7%,40.2% 13.3%)}
.skill-hit span{display:grid;gap:4px;font:800 16px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#ffd9d0}
.skill-hit small{font:600 12.5px/1.25 "Segoe UI",system-ui;letter-spacing:0;text-transform:none;color:#fff}
.skill-text{margin:10px 14px 0;font:500 13px/1.4 "Segoe UI",system-ui;color:#e6dfd0}
.skill-foot{display:block;margin-top:12px;padding:8px 14px;border-top:1px solid rgba(251,231,176,.14);font:700 10.5px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:rgba(251,231,176,.7)}
.peek-note{margin-top:10px;padding:9px 12px;border-radius:6px;background:rgba(8,10,12,.95);border:1px solid rgba(251,231,176,.3);font:500 12.5px/1.4 "Segoe UI",system-ui;color:#e6dfd0}
/* Touch: a finger drag that starts on a card must reach the drag code. Without this the browser claims it as a
   pan/scroll and fires pointercancel, so every drag on a phone or tablet snaps back. */
.arena [data-source]{touch-action:none;-webkit-touch-callout:none}
.aim{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9400;color:#ff6a4a}
.aim[data-kind="buff"]{color:var(--mana)}
.aim path{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 8px currentColor)}
.drag-avatar{position:fixed;left:0;top:0;z-index:9600;pointer-events:none;filter:drop-shadow(0 26px 30px rgba(0,0,0,.75))}
.drag-avatar>.cf{position:relative;width:100%}
.drag-pile{position:absolute;inset:0}
.drag-pile-card{position:absolute;inset:0;transform:translate(calc(var(--k)*-22%),calc(var(--k)*4%)) rotate(calc(var(--k)*-8deg));filter:brightness(calc(1 - var(--k)*.08));z-index:calc(-1*var(--k))}
.drag-pile-card>.cf{width:100%}
.arena.is-dragging{cursor:grabbing}
.arena.is-dragging .hand-slot:hover .hcard{transform:none}

/* ---------- fx layer (outside the arena) ---------- */
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:9000;overflow:hidden;font-family:var(--cond)}
.fx-ghost{position:fixed;pointer-events:none}
.fx-ghost>*{position:absolute!important;inset:0;width:100%!important;height:100%!important;margin:0!important;animation:none!important}
.fx-showcase{filter:drop-shadow(0 30px 60px rgba(0,0,0,.85)) drop-shadow(0 0 30px rgba(255,210,120,.35))}
.fx-cracked{filter:brightness(1.5) contrast(1.1)}
.fx-cracked::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;background:
  linear-gradient(115deg,transparent 46%,rgba(255,240,210,.95) 47%,transparent 49%),
  linear-gradient(55deg,transparent 58%,rgba(255,240,210,.8) 59%,transparent 60.5%),
  linear-gradient(160deg,transparent 30%,rgba(255,240,210,.7) 31%,transparent 32.5%)}
.fx-float{position:fixed;z-index:2;white-space:nowrap;font:700 34px/1 var(--cond);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.6),0 0 18px rgba(0,0,0,.8)}
.fx-float i{font-size:14px;letter-spacing:.14em;margin:0 8px;opacity:.8;font-style:normal;text-transform:uppercase}
.float-up{color:#9dffb0}.float-down{color:#ff9f92}.float-gold{color:#ffe0a0}
.float-kw{font-size:17px;letter-spacing:.2em;text-transform:uppercase;color:#b8e4ff}
.float-tough{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:#eef4fa;text-shadow:0 0 10px #6f8aa6,0 2px 0 #000}
.fx-kwglyph{position:fixed;z-index:2;pointer-events:none;translate:-50% -50%}
.fx-kwglyph svg{display:block;width:100%;height:100%}
.glyph-ward{filter:drop-shadow(0 0 14px rgba(220,235,255,.9)) drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.glyph-sword{filter:drop-shadow(0 0 10px #fff3a0) drop-shadow(0 0 22px #ffcf2a)}
.glyph-flame{filter:drop-shadow(0 0 16px rgba(255,120,30,.95))}
.glyph-heal{filter:drop-shadow(0 0 12px rgba(120,255,170,.95)) drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.float-heal{font-size:30px;text-shadow:0 0 16px #2fd86f,0 3px 0 rgba(0,0,0,.6)}
.glyph-reticle{--kc:#ff4d4d;--kl:22px;--kt:4px;filter:drop-shadow(0 0 8px rgba(255,50,50,.95));background:
  linear-gradient(var(--kc),var(--kc)) 0 0/var(--kl) var(--kt),linear-gradient(var(--kc),var(--kc)) 0 0/var(--kt) var(--kl),
  linear-gradient(var(--kc),var(--kc)) 100% 0/var(--kl) var(--kt),linear-gradient(var(--kc),var(--kc)) 100% 0/var(--kt) var(--kl),
  linear-gradient(var(--kc),var(--kc)) 0 100%/var(--kl) var(--kt),linear-gradient(var(--kc),var(--kc)) 0 100%/var(--kt) var(--kl),
  linear-gradient(var(--kc),var(--kc)) 100% 100%/var(--kl) var(--kt),linear-gradient(var(--kc),var(--kc)) 100% 100%/var(--kt) var(--kl);background-repeat:no-repeat}
.float-fizzle{font-size:18px;letter-spacing:.2em;text-transform:uppercase;color:#ffd9d0;text-shadow:0 0 12px #c0281a,0 2px 0 #000}
.fx-fizzle{filter:grayscale(1) brightness(.6) drop-shadow(0 10px 20px rgba(0,0,0,.8))}
.float-ward{font-size:20px;letter-spacing:.24em;text-transform:uppercase;color:#fff;text-shadow:0 0 18px #ff5a4a,0 2px 0 #000}
.float-clash{font-size:44px;color:#ffc58e}
.float-held{font-size:40px;color:#b8e4ff}
.float-counter{color:#ffb0a8}
.float-level{font-size:26px;letter-spacing:.24em;color:#ffe9b0;text-shadow:0 0 20px #e2b25a,0 3px 0 #000}
.fx-ring{position:fixed;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;border:3px solid #fff}
.ring-hit{border-color:#ff9a6a;box-shadow:0 0 30px #ff6a3a,inset 0 0 20px #ff6a3a}
.ring-held{border-color:#9fdcff;box-shadow:0 0 30px #5ab8ff,inset 0 0 20px #5ab8ff}
.ring-ward{border-color:#ffd0c8;box-shadow:0 0 40px #ff5a4a;width:180px;height:180px;margin:-90px 0 0 -90px}
.ring-gold{border-color:#ffe0a0;box-shadow:0 0 26px #e2b25a}
.ring-soft{border-color:rgba(255,224,160,.7);box-shadow:0 0 40px rgba(255,210,120,.5);width:320px;height:320px;margin:-160px 0 0 -160px}
.fx-gem{position:absolute;inset:0;clip-path:polygon(50% 0,100% 45%,50% 100%,0 45%);background:linear-gradient(180deg,#e2f4ff,#3fa8ff);filter:drop-shadow(0 0 8px #3fa8ff)}
.fx-banner{position:fixed;left:50%;top:46%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 120px;
  background:linear-gradient(90deg,transparent,rgba(6,10,16,.88) 20%,rgba(6,10,16,.88) 80%,transparent);text-transform:uppercase}
.fx-banner b{font:700 clamp(40px,7vh,68px)/1 var(--cond);letter-spacing:.2em;color:#fff;text-shadow:0 0 30px rgba(80,170,255,.9),0 3px 0 rgba(0,0,0,.6)}
.fx-banner.is-opp b{text-shadow:0 0 30px rgba(255,90,74,.9),0 3px 0 rgba(0,0,0,.6)}
.fx-banner small{display:none}
.fx-banner-line{width:min(56vw,640px);height:2px;background:linear-gradient(90deg,transparent,var(--gold2),transparent)}
.fx-banner::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%) -100% 0/40% 100% no-repeat;animation:fxSweep 1s .2s ease-out forwards}
@keyframes fxSweep{to{background-position:170% 0}}
/* dash afterimages, the screen-edge pulse when your Nexus is hit (fx.mjs; sparks are on the vfx canvas) */
.fx-after{mix-blend-mode:screen;filter:brightness(1.5) saturate(.6) blur(1.5px)}
.fx-vignette{position:fixed;inset:0;box-shadow:inset 0 0 140px 40px var(--vc,rgba(255,40,24,.55))}

/* ---------- reduced motion: state stays legible, movement stops ---------- */
body.no-motion .arena *,body.no-motion .arena *::before,body.no-motion .arena *::after{animation:none!important;transition:none!important}
body.no-motion .arena .uc.is-target{box-shadow:0 0 0 4px var(--foe)}
body.no-motion .arena .uc.is-picked{box-shadow:0 0 0 5px #ffe08a;transform:none}
body.no-motion .arena .uc[data-side="me"].is-drop-live,body.no-motion .arena .uc.can-block{box-shadow:0 0 0 4px var(--ally)}
body.no-motion .arena .uc.can-attack{box-shadow:0 0 0 3px var(--gold1)}
body.no-motion .arena .orb.is-ready{box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 36px rgba(110,190,255,.9)}

@media (max-width:900px){
  .arena,#board-scene{--side:112px}
  /* The side column is too narrow for the two mana counters in a row: they stack, still touching. */
  .mana-pills{flex-direction:column;gap:3px}
}

/* ---------- summoning sickness, sweeping, withdrawing, replacing ---------- */
/* A unit that just arrived greys out, all but Elusive's smoke, so the smoke stays violet. (Greying the whole unit
   also meant re-filtering it on every frame the smoke moved.) */
.uc.is-fresh:not(.is-target,.is-drop-live)>:not(.uc-mark--elusive){filter:grayscale(.85) brightness(.72)}
.uc.is-fresh:not(.is-target,.is-drop-live):hover>:not(.uc-mark--elusive){filter:grayscale(.5) brightness(.9)}
.uc-fresh{position:absolute;right:4px;top:4px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:rgba(10,14,20,.85);border:1px solid rgba(180,200,230,.5);color:#cfe0ff}
.uc-fresh svg{width:14px;height:14px}
.uc.is-swept{transform:translateY(-12px) scale(1.06);box-shadow:0 0 0 3px #ffb070,0 0 28px rgba(255,140,60,.8),0 16px 30px rgba(0,0,0,.7)}
.uc.can-withdraw{cursor:grab}
.uc.can-withdraw:hover::after{content:"↩";position:absolute;left:50%;top:40%;translate:-50% -50%;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid var(--gold2);font:700 18px/1 var(--cond);color:var(--gold1)}
.uc.is-replace{animation:none!important;box-shadow:0 0 0 3px #ff8a5a,0 0 26px rgba(255,120,60,.8)}
.uc.is-replace::after{content:"Replace";position:absolute;left:50%;top:40%;translate:-50% -50%;padding:4px 8px;border-radius:4px;background:rgba(120,30,20,.92);border:1px solid #ffb090;font:700 11px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#fff}
/* Row capacity: five diamonds at the end of the row, lit per unit in play. */
.slab-count{position:absolute;right:calc(var(--u-w)*.3);top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:7px}
.slab-count i{width:7px;height:7px;rotate:45deg;background:rgba(255,255,255,.06);border:1px solid rgba(215,166,83,.4)}
.slab-count i.on{background:linear-gradient(135deg,#fff1c4,#d7a653);border-color:#fbe7b0;box-shadow:0 0 6px rgba(255,200,110,.6)}
.slab.is-full .slab-count i.on{background:linear-gradient(135deg,#ffd0b8,#ff8a5a);border-color:#ffb090;box-shadow:0 0 6px rgba(255,120,60,.7)}
.drag-avatar[data-count]::after{content:"×" attr(data-count);position:absolute;right:-12px;top:-12px;min-width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#ffb15e,#c2561b);border:2px solid var(--gold1);font:700 16px/1 var(--cond);color:#fff}

/* ---------- hits and deaths (fx.mjs fxHurt, fxDie) ---------- */
/* A struck unit: a red wash over the card, claw marks along the blow, and the damage stamped in a red burst
   (the same 24-point burst as the ability hover card's damage). */
.fx-hurt{position:absolute;inset:0;z-index:6;border-radius:7px;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(255,80,60,.12),rgba(190,18,8,.7));box-shadow:inset 0 0 0 3px #ff5a4a,0 0 24px rgba(255,50,30,.75)}
.fx-splat{position:fixed;z-index:4;display:grid;place-items:center;translate:-50% -50%;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.65))}
.fx-splat::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 38% 32%,#ffb08f,#e5321f 48%,#7d0f08);
  clip-path:polygon(50% 0%,59.8% 13.3%,75% 6.7%,76.9% 23.1%,93.3% 25%,86.7% 40.2%,100% 50%,86.7% 59.8%,93.3% 75%,76.9% 76.9%,75% 93.3%,59.8% 86.7%,50% 100%,40.2% 86.7%,25% 93.3%,23.1% 76.9%,6.7% 75%,13.3% 59.8%,0% 50%,13.3% 40.2%,6.7% 25%,23.1% 23.1%,25% 6.7%,40.2% 13.3%)}
.fx-splat.is-lethal::before{background:radial-gradient(circle at 38% 32%,#ff9a86,#b3140a 45%,#330402)}
.fx-splat.is-nexus::before{background:radial-gradient(circle at 38% 32%,#ffd0a0,#f06a1c 48%,#7a2204)}
.fx-splat b{position:relative;font:900 1em/1 var(--cond);color:#fff;-webkit-text-stroke:.07em #4a0803;paint-order:stroke;text-shadow:0 .05em 0 rgba(0,0,0,.4)}
.fx-claw{position:fixed;z-index:3;pointer-events:none;translate:-50% -50%;filter:drop-shadow(0 0 5px #ff3a1a) drop-shadow(0 0 2px #fff)}
.fx-claw svg{display:block;width:100%;height:100%;overflow:visible}
.fx-claw path{fill:none;stroke:#fff6ee;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
/* A killing blow: the health plaque's number turns into a skull, and cracks spread from where the unit was struck.
   Then it tips back onto the table and slides into its graveyard. */
.uc-hp.fx-dead b{visibility:hidden}
.fx-skull{position:absolute;left:calc(50% + 2cqw);top:50%;width:15cqw;height:15cqw;translate:-50% -50%;z-index:2;color:#ffe2da;filter:drop-shadow(0 0 1.6cqw #ff2a1a) drop-shadow(0 .6cqw .6cqw #000)}
.fx-skull svg{display:block;width:100%;height:100%}
.fx-cracks{position:absolute;inset:0;z-index:7;width:100%;height:100%;pointer-events:none;border-radius:7px;filter:drop-shadow(0 0 2px #ffb070)}
.fx-cracks path{fill:none;stroke:#fff6e6;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}