/* WORLD ORDER v022 — card presentation.
   1. Hover zoom with a light 3D tilt (hand, Arsenal collection, Codex). The tilt angles and the
      pointer position come from card-tilt.js as CSS variables.
   2. Rarity finish on the large printed card (inspector, Arsenal preview, Codex), in the colours of
      the rarity entry animations: Rare silver #b9d4ea/#7fb3e0, Epic violet #c9a6ff/#9d6bff,
      Legendary gold #f3cf7a/#e0a93a.
   Reduced motion keeps the zoom and the static finish, without tilt or animation. */

/* ---------------------------------------------------------------- 1. zoom + tilt */
.battle-app{--hand-zoom:1.28;--hand-lift:-24px}
.hand-card:not(.active):hover,.hand-card:not(.active):focus-visible{transform:translateY(var(--hand-lift)) rotate(0deg) scale(var(--hand-zoom));z-index:40}
.hand-card>.face{transition:transform .16s ease-out,box-shadow .2s}
.hand-card:not(.active):hover>.face{box-shadow:0 18px 34px #000c,0 0 0 1px #f3e2b955}
.hand-card.playable:not(.active):hover>.face{box-shadow:0 0 0 2px #e8c97f,0 0 22px #e8c97f88,0 18px 34px #000c}
html:not(.wo-reduced-motion) .hand-card.is-tilting>.face{transform:perspective(720px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.dragging-card .hand-card>.face,.hand-card.drag-source>.face{transform:none!important}

/* the glare is a light spot that follows the pointer on a tilted card */
.face-glare{position:absolute;inset:0;z-index:12;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .2s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,22%),#fff8e640 0,#fff8e61a 24%,transparent 56%);mix-blend-mode:screen}
html:not(.wo-reduced-motion) .is-tilting .face-glare{opacity:1}
.face.r-rare .face-glare{background:radial-gradient(circle at var(--gx,50%) var(--gy,22%),#eef7ff4d 0,#dcebf71f 26%,transparent 58%)}
.face.r-epic .face-glare{background:radial-gradient(circle at var(--gx,50%) var(--gy,22%),#eadcff4a 0,#c9a6ff24 26%,transparent 58%)}
.face.r-legendary .face-glare{background:radial-gradient(circle at var(--gx,50%) var(--gy,22%),#fff2c95c 0,#f3cf7a29 26%,transparent 58%)}

/* Arsenal and Codex: the card grows over its tile */
.ars-tile:hover{z-index:4}
.ars-card{transform-origin:50% 58%;transition:transform .18s ease-out}
.ars-tile:hover .ars-card,.ars-card:focus-visible{transform:scale(1.1)}
.ars-card>.ars-face{transition:transform .16s ease-out}
.ars-tile:hover .ars-face>.face{box-shadow:0 16px 30px #000d,0 0 0 1px #f3e2b955}
html:not(.wo-reduced-motion) .ars-card.is-tilting>.ars-face{transform:perspective(760px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.ars-preview{margin-left:0}

.reduced-motion .hand-card>.face,html.wo-reduced-motion .ars-card,html.wo-reduced-motion .ars-card>.ars-face{transition:none}

/* ---------------------------------------------------------------- 2. rarity finish (large card: v026 current model .card-model; the printed .card-visual is a fallback) */
.inspected-card{position:relative;isolation:isolate}
.inspected-card :is(.card-visual,.card-model){transition:transform .2s ease-out}
.inspected-card :is(.card-visual,.card-model)::before,.inspected-card :is(.card-visual,.card-model)::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.inspected-card :is(.card-visual,.card-model)::before{z-index:4}
.inspected-card :is(.card-visual,.card-model)::after{z-index:6}
html:not(.wo-reduced-motion) .inspected-card.is-tilting :is(.card-visual,.card-model){transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
/* a soft light spot on every rarity while the large card follows the pointer */
html:not(.wo-reduced-motion) .inspected-card.is-tilting :is(.card-visual,.card-model).r-common::after{background:radial-gradient(circle at var(--gx) var(--gy),#fff4dc30,transparent 55%);mix-blend-mode:screen}

/* Rare · silver reflection: a cool metallic edge and a silver band that crosses the card */
.inspected-card :is(.card-visual,.card-model).r-rare{box-shadow:0 0 0 1px #b9d4ea80,0 0 24px #7fb3e045,0 15px 35px #0008}
.inspected-card :is(.card-visual,.card-model).r-rare::before{
  background:linear-gradient(135deg,#eaf4fc3d,transparent 20% 80%,#eaf4fc33),linear-gradient(180deg,#dcebf71f,transparent 30% 70%,#dcebf714);
  box-shadow:inset 0 0 0 1.5px #dcebf7b3,inset 0 0 0 3px #7fb3e040,inset 0 0 28px #b9d4ea38;mix-blend-mode:screen}
.inspected-card :is(.card-visual,.card-model).r-rare::after{
  background:linear-gradient(112deg,transparent 41%,#dcebf700 44%,#eef7ff8c 48.6%,#ffffffd9 50%,#eef7ff8c 51.4%,#dcebf700 56%,transparent 59%) no-repeat;
  background-size:300% 100%;background-position:150% 0;mix-blend-mode:screen;opacity:.75}
html:not(.wo-reduced-motion) .inspected-card :is(.card-visual,.card-model).r-rare::after{animation:wo-silver-sweep 5.4s cubic-bezier(.5,.05,.25,1) infinite}
html:not(.wo-reduced-motion) .inspected-card.is-tilting :is(.card-visual,.card-model).r-rare::after{animation:none;background-position:calc((0.75 - var(--px,.5) * .5) * 100%) 0;opacity:.9}
@keyframes wo-silver-sweep{0%{background-position:135% 0}36%,100%{background-position:-35% 0}}

/* Epic · violet glow: a breathing aura around the card, inner violet light and rising motes */
.inspected-card :is(.card-visual,.card-model).r-epic{box-shadow:0 0 0 1px #c9a6ff88,0 0 26px #9d6bff70,0 15px 35px #0008}
.inspected-card :is(.card-visual,.card-model).r-epic::before{
  background:radial-gradient(ellipse 85% 45% at 50% 108%,#9d6bff47,transparent 70%),radial-gradient(ellipse 80% 35% at 50% -8%,#c9a6ff2e,transparent 70%);
  box-shadow:inset 0 0 0 1.5px #d9c2ffa6,inset 0 0 36px #9d6bff59;mix-blend-mode:screen}
.inspected-card :is(.card-visual,.card-model).r-epic::after{inset:0 0 auto 0;height:200%;opacity:.0;mix-blend-mode:screen;
  background:
    radial-gradient(circle at 12% 18%,#efe3ff 0 1.3px,#c9a6ff66 2.4px,transparent 4px),
    radial-gradient(circle at 31% 42%,#efe3ff 0 1px,#c9a6ff55 2px,transparent 3.4px),
    radial-gradient(circle at 54% 11%,#efe3ff 0 1.5px,#c9a6ff66 2.6px,transparent 4.4px),
    radial-gradient(circle at 73% 36%,#efe3ff 0 1px,#c9a6ff55 2px,transparent 3.4px),
    radial-gradient(circle at 88% 24%,#efe3ff 0 1.2px,#c9a6ff66 2.3px,transparent 4px),
    radial-gradient(circle at 22% 70%,#efe3ff 0 1px,#c9a6ff55 2px,transparent 3.2px),
    radial-gradient(circle at 64% 82%,#efe3ff 0 1.3px,#c9a6ff66 2.4px,transparent 4px),
    radial-gradient(circle at 92% 64%,#efe3ff 0 1px,#c9a6ff55 2px,transparent 3.4px);
  background-size:100% 50%;background-repeat:repeat-y}
html:not(.wo-reduced-motion) .inspected-card :is(.card-visual,.card-model).r-epic{animation:wo-epic-aura 3.6s ease-in-out infinite}
html:not(.wo-reduced-motion) .inspected-card :is(.card-visual,.card-model).r-epic::before{animation:wo-epic-inner 3.6s ease-in-out infinite}
html:not(.wo-reduced-motion) .inspected-card :is(.card-visual,.card-model).r-epic::after{opacity:.85;animation:wo-epic-motes 9s linear infinite}
html:not(.wo-reduced-motion) .inspected-card.is-tilting :is(.card-visual,.card-model).r-epic::before{background:radial-gradient(circle at var(--gx) var(--gy),#c9a6ff47,transparent 50%),radial-gradient(ellipse 85% 45% at 50% 108%,#9d6bff47,transparent 70%)}
@keyframes wo-epic-aura{0%,100%{box-shadow:0 0 0 1px #c9a6ff70,0 0 16px #9d6bff4d,0 15px 35px #0008}50%{box-shadow:0 0 0 1px #dcc6ffb3,0 0 36px #9d6bffa6,0 0 72px #9d6bff40,0 15px 35px #0008}}
@keyframes wo-epic-inner{0%,100%{opacity:.62}50%{opacity:1}}
@keyframes wo-epic-motes{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* Legendary · animated gold foil: foil that drifts over the frame, glitter, a gold light sweep,
   a warm aura and slow rays behind the card */
.inspected-card :is(.card-visual,.card-model).r-legendary{box-shadow:0 0 0 1px #f3cf7a99,0 0 30px #e0a93a73,0 15px 35px #0008}
.inspected-card :is(.card-visual,.card-model).r-legendary::before{
  background:
    linear-gradient(118deg,transparent 14%,#f3cf7a2e 22%,#fff3c470 29%,#e0a93a38 35%,transparent 43%,transparent 55%,#f3cf7a29 62%,#fff3c462 68%,#e0a93a33 73%,transparent 80%),
    linear-gradient(62deg,transparent 30%,#ffe7a826 40%,transparent 50%,transparent 70%,#ffe7a81f 78%,transparent 86%);
  background-size:260% 260%,200% 200%;background-position:0% 0%,100% 0%;
  -webkit-mask:radial-gradient(ellipse 60% 56% at 50% 46%,#0006 35%,#000 86%);mask:radial-gradient(ellipse 60% 56% at 50% 46%,#0006 35%,#000 86%);
  box-shadow:inset 0 0 0 1.5px #ffe9aed9,inset 0 0 0 4px #e0a93a33,inset 0 0 36px #e0a93a66;mix-blend-mode:screen;opacity:.9}
.inspected-card :is(.card-visual,.card-model).r-legendary::after{
  background:linear-gradient(108deg,transparent 40%,#fff1c800 43.5%,#ffe7a88c 48.4%,#fffaf0e6 50%,#ffe7a88c 51.6%,#fff1c800 56.5%,transparent 60%) no-repeat;
  background-size:300% 100%;background-position:150% 0;mix-blend-mode:screen;opacity:.85}
html:not(.wo-reduced-motion) .inspected-card :is(.card-visual,.card-model).r-legendary{animation:wo-legend-aura 4.2s ease-in-out infinite}
html:not(.wo-reduced-motion) .inspected-card :is(.card-visual,.card-model).r-legendary::before{animation:wo-legend-foil 7s ease-in-out infinite alternate}
html:not(.wo-reduced-motion) .inspected-card :is(.card-visual,.card-model).r-legendary::after{animation:wo-legend-sweep 4.2s cubic-bezier(.45,.05,.25,1) infinite}
html:not(.wo-reduced-motion) .inspected-card.is-tilting :is(.card-visual,.card-model).r-legendary::before{animation:none;background-position:calc(var(--px,.5) * 100%) calc(var(--py,.5) * 100%),calc((1 - var(--px,.5)) * 100%) calc(var(--py,.5) * 100%);opacity:1}
html:not(.wo-reduced-motion) .inspected-card.is-tilting :is(.card-visual,.card-model).r-legendary::after{animation:none;background:radial-gradient(circle at var(--gx) var(--gy),#fff3cf73,#f3cf7a26 22%,transparent 50%);opacity:1}
@keyframes wo-legend-aura{0%,100%{box-shadow:0 0 0 1px #f3cf7a88,0 0 22px #e0a93a59,0 15px 35px #0008}50%{box-shadow:0 0 0 1px #ffe6a6cc,0 0 44px #e0a93ab3,0 0 90px #e0a93a40,0 15px 35px #0008}}
@keyframes wo-legend-foil{from{background-position:0% 0%,100% 0%}to{background-position:100% 100%,0% 100%}}
@keyframes wo-legend-sweep{0%{background-position:135% 0}40%,100%{background-position:-35% 0}}
/* rays behind the card, as in the Legendary entry */
.inspected-card:has(:is(.card-visual,.card-model).r-legendary)::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#f3cf7a47 0 3.5deg,transparent 3.5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 30%,#0009 48%,transparent 70%);mask:radial-gradient(circle,#000 30%,#0009 48%,transparent 70%)}
html:not(.wo-reduced-motion) .inspected-card:has(:is(.card-visual,.card-model).r-legendary)::before{animation:wo-legend-rays 48s linear infinite}
@keyframes wo-legend-rays{to{rotate:360deg}}
/* sparkles on the gold frame (the motes of the Legendary entry) */
.inspected-card:has(:is(.card-visual,.card-model).r-legendary)::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:
    radial-gradient(circle at 6% 14%,#fffbe9 0 1.4px,#f3cf7a88 2.6px,transparent 5px),
    radial-gradient(circle at 95% 9%,#fffbe9 0 1.2px,#f3cf7a88 2.4px,transparent 4.6px),
    radial-gradient(circle at 97% 47%,#fffbe9 0 1.6px,#f3cf7a99 2.8px,transparent 5.4px),
    radial-gradient(circle at 3% 62%,#fffbe9 0 1.2px,#f3cf7a88 2.4px,transparent 4.6px),
    radial-gradient(circle at 52% 2.5%,#fffbe9 0 1.3px,#f3cf7a88 2.5px,transparent 4.8px),
    radial-gradient(circle at 30% 97.5%,#fffbe9 0 1.4px,#f3cf7a88 2.6px,transparent 5px),
    radial-gradient(circle at 80% 96%,#fffbe9 0 1.2px,#f3cf7a88 2.4px,transparent 4.6px)}
html:not(.wo-reduced-motion) .inspected-card:has(:is(.card-visual,.card-model).r-legendary)::after{animation:wo-legend-twinkle 2.6s ease-in-out infinite}
@keyframes wo-legend-twinkle{0%,100%{opacity:.25}30%{opacity:1}55%{opacity:.45}75%{opacity:.9}}
.inspected-card:has(:is(.card-visual,.card-model).r-epic)::before{content:"";position:absolute;z-index:-1;inset:-8%;pointer-events:none;border-radius:12%;background:radial-gradient(ellipse at 50% 50%,#9d6bff33,transparent 66%)}

/* the old batch-16 legendary sweep and epic enamel are replaced by the finish above */
html:not(.wo-reduced-motion) .inspected-card :is(.card-visual,.card-model).r-epic .card-rarity{animation:wo-enamel 3.6s ease-in-out infinite}

/* in small choice dialogs the printed card stays plain */
.choice-card :is(.card-visual,.card-model)::before,.choice-card :is(.card-visual,.card-model)::after{display:none}