/* 50 · card: the card component's own sheet (components/card.js).
   A card is a printed object, so it reads the same in both themes. Its record gives two numbers, --card-h (hue)
   and --card-k (share of full chroma); every color on both sides derives from them here, and nothing on a card
   reads a page color.
   Face down: a paper edge around the printed cover, the pack's icon in the medallion; the foil comes out only
   under the hand. Face up: paper, the drawing in the card's ink on the ripples of the well, the words, and an
   index in each corner; calm under the hand, so it can be read.
   data-state: down, pulling, up. data-fit: roomy, snug, tight, bare; the card picks, type scales with its width. */

@property --rx{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --ry{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --flip{syntax:"<angle>";inherits:false;initial-value:0deg}

.rw-card{--card-h:20;--card-k:1;--fit:1;
  --c-paper:oklch(.962 calc(.016 * var(--card-k)) var(--card-h));
  --c-window:oklch(.93 calc(.032 * var(--card-k)) var(--card-h));
  --c-line:oklch(.8 calc(.05 * var(--card-k)) var(--card-h));
  --c-fill:oklch(.89 calc(.05 * var(--card-k)) var(--card-h));
  --c-ink:oklch(.28 calc(.06 * var(--card-k)) var(--card-h));
  --c-sub:oklch(.45 calc(.06 * var(--card-k)) var(--card-h));
  --c-accent:oklch(.56 calc(.17 * var(--card-k)) var(--card-h));
  --c-glow:oklch(.8 calc(.15 * var(--card-k)) var(--card-h));
  --c-deep:oklch(.38 calc(.09 * var(--card-k)) var(--card-h));
  --c-icon:oklch(.86 calc(.12 * var(--card-k)) var(--card-h));
  position:relative;border:0;background:none;padding:0;text-align:left;aspect-ratio:5/7;width:100%;max-width:100%;min-width:0;
  perspective:1100px;container-type:inline-size;
  animation:rw-sway calc(var(--rw-beat) * 2) ease-in-out infinite;animation-delay:var(--rw-sway-delay,0s)}
.rw-card[data-fit="snug"]{--fit:.9}
.rw-card[data-fit="tight"]{--fit:.84}
.rw-card[data-fit="bare"]{--fit:.78}
@keyframes rw-sway{0%,100%{rotate:-.7deg}50%{rotate:.7deg}}

/* the body leans with the page camera at card depth (the nearest layer) plus the hand on it */
.rw-card__body{position:absolute;inset:0;transform-style:preserve-3d;border-radius:var(--card-radius,14px);--lift:0px;
  transform:rotateX(calc(var(--rw-py) * -10deg + var(--rx))) rotateY(calc(var(--rw-px) * 12deg + var(--ry) + var(--flip)));
  translate:0 var(--lift);box-shadow:0 12px 24px -14px var(--rw-card-shadow);
  transition:--rx .25s ease-out,--ry .25s ease-out,--flip .55s var(--e),translate .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.rw-card:hover .rw-card__body{--lift:-5px;box-shadow:0 22px 34px -18px var(--rw-card-shadow)}
.rw-card[data-state="up"] .rw-card__body{--flip:180deg}
.rw-card[data-state="pulling"] .rw-card__body{animation:rw-pop var(--pull,1.5s) cubic-bezier(.25,.8,.3,1) forwards}
/* a pull has one light (perceive.effects): the card rises a share of its own width (cqi: the card is its own
   container, so the motion keeps its proportion at any size), its light rims it from behind, and its shadow falls
   longer and softer on the table while it is up */
@keyframes rw-pop{
  0%{transform:translateY(0) scale(1) rotateY(0);box-shadow:0 12px 24px -14px var(--rw-card-shadow)}
  14%{transform:translateY(-6cqi) scale(1.08) rotateY(0);box-shadow:0 13cqi 16cqi -7cqi var(--rw-card-shadow),0 0 7cqi 0 color-mix(in oklab,var(--c-aura) 50%,transparent)}
  72%{transform:translateY(-6cqi) scale(1.08) rotateY(540deg);box-shadow:0 13cqi 16cqi -7cqi var(--rw-card-shadow),0 0 9cqi 1cqi color-mix(in oklab,var(--c-aura) 70%,transparent)}
  100%{transform:translateY(0) scale(1) rotateY(540deg);box-shadow:0 12px 24px -14px var(--rw-card-shadow)}}

/* both sides are the same paper; no frame, no inner shadow */
.rw-card__face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;border-radius:var(--card-radius,14px);background:var(--c-paper)}

/* face down: the printed cover. Each design names its ground and its pair; the medallion takes the card's icon color */
.rw-card[data-cover="heroes"]{--cv-a:var(--rw-cover-heroes-a);--cv-b:var(--rw-cover-heroes-b);--cv-top:var(--rw-cover-heroes-top);--cv-bottom:var(--rw-cover-heroes-bottom)}
.rw-card[data-cover="pathfinder"]{--cv-a:var(--rw-cover-pathfinder-a);--cv-b:var(--rw-cover-pathfinder-b);--cv-top:var(--rw-cover-pathfinder-top);--cv-bottom:var(--rw-cover-pathfinder-bottom);
  --cv-line:var(--rw-cover-pathfinder-line);--cv-lattice:var(--rw-cover-pathfinder-lattice)}
.rw-card[data-cover="skies"]{--cv-a:var(--rw-cover-skies-a);--cv-b:var(--rw-cover-skies-b);--cv-top:var(--rw-cover-skies-top);--cv-bottom:var(--rw-cover-skies-bottom)}
.rw-card[data-cover="threads"]{--cv-a:var(--rw-cover-threads-a);--cv-b:var(--rw-cover-threads-b);--cv-top:var(--rw-cover-threads-top);--cv-bottom:var(--rw-cover-threads-bottom)}
.rw-card[data-cover="crowns"]{--cv-a:var(--rw-cover-crowns-a);--cv-b:var(--rw-cover-crowns-b);--cv-top:var(--rw-cover-crowns-top);--cv-bottom:var(--rw-cover-crowns-bottom)}
.rw-card[data-cover="messengers"]{--cv-a:var(--rw-cover-messengers-a);--cv-b:var(--rw-cover-messengers-b);--cv-top:var(--rw-cover-messengers-top);--cv-bottom:var(--rw-cover-messengers-bottom)}
.rw-card[data-cover="masks"]{--cv-a:var(--rw-cover-masks-a);--cv-b:var(--rw-cover-masks-b);--cv-top:var(--rw-cover-masks-top);--cv-bottom:var(--rw-cover-masks-bottom)}
.rw-card[data-cover="balance"]{--cv-a:var(--rw-cover-balance-a);--cv-b:var(--rw-cover-balance-b);--cv-top:var(--rw-cover-balance-top);--cv-bottom:var(--rw-cover-balance-bottom)}
.rw-card[data-cover="chance"]{--cv-a:var(--rw-cover-chance-a);--cv-b:var(--rw-cover-chance-b);--cv-top:var(--rw-cover-chance-top);--cv-bottom:var(--rw-cover-chance-bottom)}
.rw-card[data-cover="mirrors"]{--cv-a:var(--rw-cover-mirrors-a);--cv-b:var(--rw-cover-mirrors-b);--cv-top:var(--rw-cover-mirrors-top);--cv-bottom:var(--rw-cover-mirrors-bottom);
  --cv-line:var(--rw-cover-mirrors-line);--cv-lattice:var(--rw-cover-mirrors-lattice);--cv-medal:var(--rw-cover-mirrors-medal);--c-icon:var(--rw-cover-mirrors-icon)}
.rw-card[data-cover="serpents"]{--cv-a:var(--rw-cover-serpents-a);--cv-b:var(--rw-cover-serpents-b);--cv-top:var(--rw-cover-serpents-top);--cv-bottom:var(--rw-cover-serpents-bottom)}
.rw-cover__print{position:absolute;inset:5px;border-radius:10px;overflow:hidden;background:radial-gradient(115% 85% at 50% 50%,var(--cv-a),var(--cv-b))}
.rw-cover{position:absolute;inset:0;width:100%;height:100%;display:block}
.rw-cover__lattice{fill:none;stroke:var(--cv-lattice,var(--rw-cover-lattice));stroke-width:.5}
.rw-cover__rule{fill:none;stroke:var(--cv-line,var(--rw-cover-line));stroke-width:.6}
.rw-cover__rule--in{stroke-width:.35}
.rw-cover__star{fill:var(--cv-top);stroke:none}
/* the corner stars rest until a hand comes; then they twinkle in turn round the card: a swell, a cross of light,
   a small turn, then rest */
.rw-cover__spark{transform-box:fill-box;transform-origin:center;opacity:.75}
.rw-cover__flare{fill:none;stroke:color-mix(in oklab,var(--cv-top) 30%,white);stroke-width:.3;stroke-linecap:round;opacity:0}
/* the star itself never swells or turns (the reader, 2026-10-13: that read as a smudge); it only brightens, crisp,
   while its bling crosses it */
/* under the hand (card.js marks them is-near): near the middle all four, near an edge only the nearest */
.rw-card[data-state="down"] .rw-cover__spark.is-near{animation:rw-star-glint calc(var(--rw-beat) * .8) ease-in-out infinite;animation-delay:calc(var(--k,0) * var(--rw-beat) * -.2)}
@keyframes rw-star-glint{0%,30%,80%,100%{opacity:.75}54%{opacity:1}}
/* the shine stays inside the star's own radius: a small swell, a thin glint along its arms, no blur */
@keyframes rw-twinkle{0%,38%,72%,100%{scale:.9;rotate:0deg;opacity:.75}50%{scale:1.1;rotate:15deg;opacity:1}58%{scale:1;rotate:20deg;opacity:.95}}
@keyframes rw-flare{0%,40%,66%,100%{opacity:0}50%{opacity:.95}}
/* the second motion of every shine: the bling, two long thin blades of light that open across the star and close.
   At rest one star at a time, in random order (card.js); under the hand all four in turn; on a pull all four flash
   together and the blades run much longer and thinner, the card's super-excited moment */
.rw-cover__bling{fill:color-mix(in oklab,var(--cv-top) 25%,white);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center}
.rw-cover__spark.is-twinkle{animation:rw-star-glint .95s ease-in-out 1}
.rw-cover__spark.is-twinkle .rw-cover__bling--h{animation:rw-bling-h .95s ease-out 1}
.rw-cover__spark.is-twinkle .rw-cover__bling--v{animation:rw-bling-v .95s ease-out 1}
.rw-card[data-state="down"] .rw-cover__spark.is-near .rw-cover__bling--h{animation:rw-bling-h calc(var(--rw-beat) * .8) ease-out infinite;animation-delay:calc(var(--k,0) * var(--rw-beat) * -.2)}
.rw-card[data-state="down"] .rw-cover__spark.is-near .rw-cover__bling--v{animation:rw-bling-v calc(var(--rw-beat) * .8) ease-out infinite;animation-delay:calc(var(--k,0) * var(--rw-beat) * -.2)}
.rw-card[data-state="pulling"] .rw-cover__spark{animation:rw-star-glint .55s ease-out 1}
.rw-card[data-state="pulling"] .rw-cover__bling--h{animation:rw-bling-h-x .6s ease-out 1}
.rw-card[data-state="pulling"] .rw-cover__bling--v{animation:rw-bling-v-x .6s ease-out 1}
@keyframes rw-bling-h{0%,34%{opacity:0;scale:0 1}54%{opacity:1;scale:1 1}100%{opacity:0;scale:.3 .6}}
@keyframes rw-bling-v{0%,34%{opacity:0;scale:1 0}54%{opacity:1;scale:1 1}100%{opacity:0;scale:.6 .3}}
@keyframes rw-bling-h-x{0%{opacity:0;scale:0 1}35%{opacity:1;scale:2.6 .5}100%{opacity:0;scale:3.4 .2}}
@keyframes rw-bling-v-x{0%{opacity:0;scale:1 0}35%{opacity:1;scale:.5 2.6}100%{opacity:0;scale:.2 3.4}}
.rw-cover__ticks{fill:none;stroke:var(--cv-line,var(--rw-cover-line));stroke-width:.55;stroke-linecap:round}
.rw-cover__medal{fill:var(--cv-medal,var(--rw-cover-medal));stroke:var(--cv-line,var(--rw-cover-line));stroke-width:.6}
.rw-cover__medal-in{fill:none;stroke:var(--c-icon);stroke-width:.45}
.rw-cover__suit-glyph{fill:none;stroke:var(--c-icon);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* the engraved emblems (lib/emblems.js, a 48-unit sheet): outline, a tint inside, fine engraving, solid points */
.rw-cover__emblem--top{--em:var(--cv-top)}
.rw-cover__emblem--bottom{--em:var(--cv-bottom)}
.rw-cover__emblem--medal{--em:var(--c-icon)}
/* what turns on a cover is its own sheet laid over the print (card.js), so it turns whole, without repainting the
   print: the tick ring once in 64 beats (below notice, felt not seen), the spirals at their own speed and way
   (lib/emblems.js). The sheet's center is the medallion's (50, 70) */
.rw-cover--ticks{animation:rw-turn calc(var(--rw-beat) * 64) linear infinite}
.rw-cover--spin{animation:rw-turn var(--spin,30s) linear infinite}
.rw-cover--back{animation-direction:reverse}
@keyframes rw-turn{to{rotate:360deg}}

/* the transmutation circle (cards whose record asks for it: the hexagon cards). Under a hand the medallion's
   hexagon grows out to the circle's span, then the circle draws itself in light, line after line, and casts its
   glow onto the table */
.rw-cover__layer--spell{opacity:0;transition:opacity .2s}
.rw-card[data-state="down"]:hover .rw-cover__layer--spell{opacity:1}
.rw-card[data-spell] .rw-cover__suit,.rw-card[data-spell] .rw-cover__emblem--medal{transition:opacity .3s}
.rw-card[data-spell][data-state="down"]:hover .rw-cover__suit,.rw-card[data-spell][data-state="down"]:hover .rw-cover__emblem--medal{opacity:0}
.rw-spell__hex{fill:none;stroke:var(--c-aura);stroke-width:.7;stroke-linejoin:round;transform-box:view-box;transform-origin:50px 70px;scale:.243;
  transition:scale .6s cubic-bezier(.3,.7,.2,1)}
.rw-card[data-state="down"]:hover .rw-spell__hex{scale:1}
.rw-spell__line{fill:none;stroke:var(--c-aura);stroke-width:.55;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.rw-card[data-state="down"]:hover .rw-spell__line{animation:rw-spell .8s cubic-bezier(.3,.6,.3,1) forwards;animation-delay:calc(.45s + var(--s,0) * 70ms)}
@keyframes rw-spell{to{stroke-dashoffset:0}}
.rw-card[data-spell][data-state="down"]:hover .rw-card__body{box-shadow:0 22px 34px -18px var(--rw-card-shadow),0 0 46px -10px var(--c-aura)}
/* layer awareness (the reader, 2026-10-13): an emblem's bodies are opaque, tinted over the ground they lie on, so
   whatever is nearer hides the lines of what is behind it */
.rw-cover__emblem{--em-ground:var(--cv-b)}
/* the medallion's disc is a translucent tint, so a body mixed into it would still show what lies behind (the house
   did): its emblems lie on an opaque match of it instead, dark on the dark covers, ivory on the ivory one */
.rw-card{--cv-medal-solid:color-mix(in oklab,var(--cv-a) 52%,#12070F)}
.rw-card[data-cover="mirrors"]{--cv-medal-solid:color-mix(in oklab,var(--cv-a) 40%,#FFFCF0)}
.rw-cover__emblem--medal{--em-ground:var(--cv-medal-solid)}
.rw-emblem__fill{fill:color-mix(in oklab,var(--em) 22%,var(--em-ground,transparent));stroke:var(--em);stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round}
.rw-emblem__line{fill:none;stroke:var(--em);stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round}
.rw-emblem__fine{fill:none;stroke:var(--em);stroke-width:.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.rw-emblem__dot,.rw-emblem__solid{fill:var(--em);stroke:none}
.rw-emblem__flame{fill:color-mix(in oklab,var(--em) 55%,#FFD27A);stroke:var(--em);stroke-width:.6;stroke-linejoin:round}
.rw-emblem__hole{fill:var(--cv-b);stroke:var(--em);stroke-width:.7;stroke-linejoin:round}
.rw-emblem__shade{fill:color-mix(in oklab,var(--em) 45%,var(--em-ground,transparent));stroke:var(--em);stroke-width:1.15;stroke-linejoin:round}
/* the emblems that live (lib/emblems.js, drawn on the cover's live sheet): each motion moves whole parts */
.rw-emblem__glow{fill:var(--em);stroke:none;opacity:.2}
.rw-fire__glow,.rw-fire__flame,.rw-fire__heart,.rw-bell__swing,.rw-bell__clapper,.rw-mill__sails,.rw-mill__stone{transform-box:view-box}
/* the campfire burns slow (the reader, 2026-10-13: at least twice as slow), so it reads as a fire, not a flutter */
.rw-fire__glow{transform-origin:24px 32px;animation:rw-glow 2.8s ease-in-out infinite alternate}
@keyframes rw-glow{0%{opacity:.6;scale:.94}60%{opacity:1;scale:1.04}100%{opacity:.75;scale:.98}}
.rw-fire__flame{transform-origin:24px 35px;animation:rw-flicker 2.4s ease-in-out infinite alternate}
.rw-fire__heart{transform-origin:24px 35px;animation:rw-flicker 1.6s ease-in-out infinite alternate-reverse}
@keyframes rw-flicker{0%{transform:scale(1,.95) skewX(-2deg)}50%{transform:scale(.97,1.04) skewX(1deg)}100%{transform:scale(1.02,.98) skewX(2deg)}}
/* sparks: each rises, drifts and winks out on its own clock; the blue ones come from the hottest heart */
.rw-ember{transform-box:fill-box;transform-origin:center;opacity:0;animation:rw-ember-rise 3.2s linear infinite}
.rw-ember--1{animation-delay:-.8s}.rw-ember--2{animation-delay:-1.6s;animation-duration:3.7s}
.rw-ember--3{animation-delay:-2.3s;animation-duration:2.9s}.rw-ember--4{animation-delay:-.4s;animation-duration:4.1s}
.rw-ember--5{animation-delay:-2.9s;animation-duration:3.4s}.rw-ember--6{animation-delay:-1.2s;animation-duration:3.9s}
.rw-ember--blue{fill:color-mix(in oklab,#7FB8FF 80%,white)}
@keyframes rw-ember-rise{0%{opacity:0;translate:0 5px;scale:1}20%{opacity:1}100%{opacity:0;translate:1.6px -7px;scale:.5}}
/* smoke: soft wisps curl up out of a chimney or a flame and thin out within the medallion; dense enough to read as
   haze (the reader, 2026-10-13: "I still barely see the haze") */
.rw-emblem__wisp{fill:color-mix(in oklab,var(--em) 82%,transparent);stroke:none;opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:rw-wisp 3.4s ease-out infinite}
.rw-wisp--1{animation-delay:-1.7s}.rw-wisp--late{animation-duration:3.9s;animation-delay:-.9s}.rw-wisp--late.rw-wisp--1{animation-delay:-2.8s}
.rw-wisp--fire{animation-duration:4.6s}.rw-wisp--fire.rw-wisp--1{animation-delay:-1.5s}.rw-wisp--fire.rw-wisp--2{animation-delay:-3.1s}
@keyframes rw-wisp{0%{opacity:0;translate:0 0;scale:.5 .2}30%{opacity:1;scale:1 1}100%{opacity:0;translate:.6px -3px;scale:1.35 1.3}}
/* the helm's star: dark most of the beat, then it flares on the lit steel and is gone */
.rw-helm__glint{transform-box:fill-box;transform-origin:center;opacity:0;animation:rw-helm-glint var(--rw-beat) ease-out infinite}
@keyframes rw-helm-glint{0%,72%{opacity:0;scale:.2;rotate:0deg}80%{opacity:1;scale:1.1;rotate:45deg}100%{opacity:0;scale:.4;rotate:90deg}}
.rw-card[data-state="down"]:hover .rw-helm__glint{animation-duration:calc(var(--rw-beat) * .5)}
/* the plume in a breeze, swung from its root on the crest (24, 9.5 on the emblem's sheet), by the deadzone rule
   (skills/animations, Deadzones): at rest a small quick sway, about 1.5 degrees over three uneven beats; under the
   hand or in a pull a wide slow one, up to 7 degrees over ten beats, eased in over 2 beats and settling over 4.
   The two sit one inside the other and add, so waking and settling never snap. Now and then a glint runs along the
   plume from root to tip, its upper edge first and the lower one a little after; quicker under the hand */
@property --rw-plume-x{syntax:"<number>";inherits:false;initial-value:0}
.rw-plume__wide,.rw-plume__rest{transform-origin:24px 9.5px}
.rw-plume__rest{animation:rw-plume-rest calc(var(--rw-beat) * 3) ease-in-out infinite}
@keyframes rw-plume-rest{0%,100%{rotate:0deg}22%{rotate:-1.5deg}48%{rotate:.6deg}71%{rotate:-.9deg}86%{rotate:1.2deg}}
.rw-plume__wide{--rw-plume-x:0;transition:--rw-plume-x calc(var(--rw-beat) * 4) ease-out;
  animation:rw-plume-wide calc(var(--rw-beat) * 10) ease-in-out infinite}
@keyframes rw-plume-wide{0%,100%{rotate:calc(var(--rw-plume-x) * -7deg)}50%{rotate:calc(var(--rw-plume-x) * 4deg)}}
.rw-card:hover .rw-plume__wide,.rw-card[data-state="pulling"] .rw-plume__wide{--rw-plume-x:1;transition-duration:calc(var(--rw-beat) * 2);transition-timing-function:ease-in-out}
.rw-plume__glint{stroke-dasharray:.2 2;stroke-dashoffset:.2;animation:rw-plume-glint calc(var(--rw-beat) * 6) linear infinite}
.rw-plume__glint--low{animation-delay:calc(var(--rw-beat) * .35)}
@keyframes rw-plume-glint{0%,84%{stroke-dashoffset:.2}96%,100%{stroke-dashoffset:-1}}
.rw-card:hover .rw-plume__glint{animation-duration:calc(var(--rw-beat) * 2)}
.rw-card[data-state="pulling"] .rw-plume__glint{animation-duration:var(--rw-beat)}
@media (prefers-reduced-motion:reduce){.rw-plume__wide,.rw-plume__rest,.rw-plume__glint{animation:none;transition:none}}
/* the bell keeps its far swing for the excited states (the reader, 2026-10-13): at rest a quick, small toll; under
   the hand it swings wider and faster; a pull rings it out to the edge of its arc */
.rw-bell__swing{transform-origin:30px 0px;animation:rw-bell-swing calc(var(--rw-beat) * .5) ease-in-out infinite;--sw:3.5deg}
@keyframes rw-bell-swing{0%,100%{rotate:calc(var(--sw) * -1)}50%{rotate:var(--sw)}}
.rw-bell__clapper{transform-origin:24px 30px;animation:rw-bell-clap calc(var(--rw-beat) * .5) ease-in-out infinite;animation-delay:calc(var(--rw-beat) * -.05);--cl:3deg}
@keyframes rw-bell-clap{0%,100%{rotate:var(--cl)}50%{rotate:calc(var(--cl) * -1)}}
.rw-bell__sound{animation:rw-bell-sound calc(var(--rw-beat) * .5) ease-out infinite}
@keyframes rw-bell-sound{0%{opacity:.95}60%,100%{opacity:0}}
.rw-card[data-state="down"]:hover .rw-bell__swing{--sw:9deg;animation-duration:calc(var(--rw-beat) * .25)}
.rw-card[data-state="down"]:hover .rw-bell__clapper{--cl:7deg;animation-duration:calc(var(--rw-beat) * .25)}
.rw-card[data-state="down"]:hover .rw-bell__sound{animation-duration:calc(var(--rw-beat) * .25)}
.rw-card[data-state="pulling"] .rw-bell__swing{--sw:16deg;animation-duration:.45s}
.rw-card[data-state="pulling"] .rw-bell__clapper{--cl:12deg;animation-duration:.45s}
.rw-mill__sails{transform-origin:24px 14px;animation:rw-turn 9s linear infinite}
.rw-mill__stone{transform-origin:24px 24px;animation:rw-turn 16s linear infinite reverse}
/* the dragon's breath: a misshapen heart of cloud puffs out of the jaw, drifts off and thins, then comes again */
.rw-dragon__breath{transform-box:fill-box;transform-origin:0% 40%;opacity:0;animation:rw-breath 3.2s ease-out infinite}
@keyframes rw-breath{0%{opacity:0;scale:.3;translate:-2px 0}20%{opacity:1;scale:1}70%{opacity:.8;translate:2px -1px;scale:1.15}100%{opacity:0;translate:4px -2px;scale:1.3}}
/* the moon rocks gently, hung from above, as a moon does in a picture book */
.rw-cover__sway{transform-box:fill-box;transform-origin:50% -30%;animation:rw-moon-sway 7s ease-in-out infinite}
@keyframes rw-moon-sway{0%,100%{rotate:-6deg;translate:0 0}50%{rotate:6deg;translate:0 -.6px}}
.rw-emblem__glass{fill:color-mix(in oklab,var(--em) 8%,transparent);stroke:none}
.rw-emblem__glint{fill:none;stroke:color-mix(in oklab,var(--em) 25%,white);stroke-width:.9;stroke-linecap:round}
.rw-emblem__glint-dot{fill:color-mix(in oklab,var(--em) 20%,white);stroke:none}
.rw-card__face--cover .rw-holo{inset:5px;border-radius:10px;opacity:0}
.rw-card[data-state="down"]:hover .rw-card__face--cover .rw-holo{opacity:.2}

/* face up: strip, drawing, words, strip; the drawing takes what the words leave */
.rw-card__face--reveal{transform:rotateY(180deg);display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;
  gap:calc(2.3cqi * var(--fit));padding:4.2cqi 4.4cqi 3.8cqi}
.rw-card__strip{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;
  font-family:var(--f-data);font-size:max(8px,calc(3.3cqi * var(--fit)));line-height:1;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-sub);font-variant-numeric:tabular-nums}
.rw-card__index{display:inline-flex;align-items:center;gap:.35em;flex:none;font-weight:700;letter-spacing:.02em;color:var(--c-ink)}
/* Round 14: the bottom index reads upright; turned 180° its "02" read as a mirrored "Z0" */
.rw-card__index--bottom{transform:none}
.rw-card__suit{width:1.3em;height:1.3em;display:block;flex:none}
.rw-card__suit-glyph{fill:none;stroke:var(--c-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rw-card__pack{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-card__mark{display:inline-flex;gap:.8em;min-width:0;white-space:nowrap}
.rw-card__rarity{color:var(--c-accent)}
/* share: a small pill on the bottom strip, only once the card is face up; it fades in after the card settles */
.rw-card__share{flex:none;visibility:hidden;opacity:0;transition:opacity .3s .25s,box-shadow .15s,border-color .15s}   /* its look: 06-button.css --share */
.rw-card[data-state="up"] .rw-card__share{visibility:visible;opacity:1}
.rw-card__share-url{position:absolute;left:6%;right:6%;bottom:12%;z-index:3;font:inherit;font-size:max(9px,calc(3cqi * var(--fit)));
  padding:.4em .6em;border-radius:6px;border:1px solid var(--c-accent);background:var(--c-paper,#fff);color:var(--c-ink)}
@media (prefers-reduced-motion:reduce){.rw-card__share{transition:none}}

/* one surface: no box around the drawing. The well lies under the whole face, deepest; the drawing floats
   just above it; the words sit on the paper. The whole card leans with the camera and the hand */
.rw-card .rw-well{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.rw-card__strip,.rw-card__window,.rw-card__text{position:relative;z-index:1}
.rw-card__window{min-height:0}
.rw-card__art{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible}
/* a drawing's own ground (The Pull): the sheet's rings and meridians, faint, in the ground's line */
.rw-well__spokes{fill:none;--o:.2}
.rw-well__ring{fill:none;stroke-opacity:var(--o)}
.rw-card .rw-well__ring{stroke:var(--c-line);stroke-width:.35}
/* a field the drawing stands on (the tower's grid), in the ground's line, fading out from the drawing's focus */
.rw-card .rw-well__lines{fill:none;stroke:var(--c-line);stroke-width:.35;stroke-opacity:.5}
/* the hypnotic part: the ground swells by one percent and back about its focal point (lib.well sets the origin),
   small enough that the reader cannot tell whether it moves; it swells whole, so nothing inside it repaints */
.rw-card[data-state="up"] .rw-well{animation:rw-swell calc(var(--rw-beat) * 4) ease-in-out infinite}
@keyframes rw-swell{0%,100%{scale:1}50%{scale:var(--swell,1.01)}}
/* the landing: one ripple in the card's accent runs out from the drawing's focal point */
.rw-well__wave{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center}
.rw-card .rw-well__wave{stroke:var(--c-accent)}
/* it starts on the landing itself, fast at the impact, then spreading and thinning */
.rw-card[data-state="up"] .rw-well__wave{animation:rw-wave 1.3s cubic-bezier(.08,.75,.3,1) 0s 1 both}
@keyframes rw-wave{0%{opacity:.85;scale:.1}100%{opacity:0;scale:9}}

.rw-card__text{display:flex;flex-direction:column;gap:calc(1.4cqi * var(--fit));min-width:0}
.rw-card__name{font-size:max(12px,calc(6.6cqi * var(--fit)));line-height:1.06;color:var(--c-ink)}
.rw-card__hook{font-size:max(9.5px,calc(4.3cqi * var(--fit)));line-height:1.3;color:var(--c-sub)}
.rw-card__becomes{font-size:max(9.5px,calc(4.3cqi * var(--fit)));line-height:1.3;color:var(--c-ink)}
.rw-card__becomes-arrow{font-style:normal;color:var(--c-accent)}
/* a price card's price: the biggest thing on its face after the drawing */
.rw-card__price{font-family:var(--f-data);font-weight:700;font-size:max(15px,calc(9cqi * var(--fit)));line-height:1;
  color:var(--c-accent);font-variant-numeric:tabular-nums;margin-top:calc(1cqi * var(--fit))}
.rw-card__note{color:var(--c-sub)}
.rw-card[data-fit="tight"] .rw-card__hook,.rw-card[data-fit="bare"] .rw-card__hook,.rw-card[data-fit="bare"] .rw-card__rarity{display:none}
.rw-card[data-fit="bare"] .rw-card__name,.rw-card[data-fit="bare"] .rw-card__becomes{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* the pen: the card's ink on the card's paper, the accent where the eye should land */
.rw-art{--pen:color-mix(in oklab,var(--c-ink) 86%,var(--c-window));--pen-k:var(--c-accent)}
.rw-ink{stroke:var(--pen);stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rw-ink--accent{stroke:var(--pen-k);stroke-width:1.3}
.rw-ink--back{stroke-width:.7;opacity:.45}
.rw-hatch{stroke:var(--pen);stroke-width:.6;fill:none;opacity:.5;stroke-linecap:round}
.rw-dash{stroke:var(--pen);stroke-width:.85;fill:none;stroke-dasharray:2 3;opacity:.6}
.rw-dash--far{opacity:.35}
.rw-face{fill:var(--c-fill);stroke:var(--pen);stroke-width:1;stroke-linejoin:round;stroke-linecap:round}
.rw-face--plain{stroke:none}
.rw-face--fold{fill:color-mix(in oklab,var(--c-ink) 12%,var(--c-fill))}
.rw-hole{fill:var(--c-deep);stroke:var(--pen);stroke-width:.9;stroke-linejoin:round}
.rw-wire{stroke:var(--pen);stroke-width:.7;fill:none;stroke-linecap:round}
.rw-wire--accent{stroke:var(--pen-k);stroke-width:.8}
.rw-fill-faint{fill:var(--pen-k);fill-opacity:.1}
.rw-fill-accent{fill:var(--pen-k);fill-opacity:.2}
.rw-glow{fill:var(--c-glow);fill-opacity:.35;stroke:none}
.rw-pip{fill:var(--pen);stroke:none}
.rw-spark{stroke:var(--pen-k);stroke-width:1.1;stroke-linecap:round;fill:none}
.rw-sand{fill:color-mix(in oklab,var(--c-accent) 26%,var(--c-fill));stroke:var(--pen);stroke-width:.5;stroke-linejoin:round}
.rw-sand--top{fill:color-mix(in oklab,var(--c-accent) 14%,var(--c-fill))}
.rw-stream{stroke:var(--pen-k);stroke-width:.7;stroke-linecap:round;fill:none}
.rw-grain{fill:var(--pen);stroke:none;opacity:.55}
.rw-gleam{fill:none;stroke:var(--c-paper);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.rw-gleam--thin{stroke-width:.6;opacity:.85}
/* a tube: its ink edge is a wide stroke, its body a narrower one laid on top (widths set by the drawing) */
.rw-tube{fill:none;stroke:var(--pen);stroke-linecap:butt;stroke-linejoin:round}
.rw-tube.rw-tube--accent{stroke:var(--pen-k)}
.rw-tube__body{fill:none;stroke:var(--c-fill);stroke-linecap:butt;stroke-linejoin:round}
.rw-tube__body.rw-tube--accent{stroke:color-mix(in oklab,var(--c-accent) 18%,var(--c-fill))}
/* the Plot Deck's sea (lib.art sea): bands without edges darkening toward the eye, the strand's strokes in the card's
   blue, the far ones faint behind the base pairs; each stroke drifts one wavelength at its own pace, so the strokes
   slip against each other and the strand rewrites itself. The ground carries the sea on under the words */
.rw-sea__band{stroke:none}
/* Round 12 (the user: "tone the helix down; it lies over the sea instead of being part of it"): the strand quieter,
   so it reads as a current in the water, and the sea's lines flow with it (rw-sea-current below) */
.rw-sea__near{fill:var(--pen-k);stroke:none;opacity:.62}
.rw-sea__far{fill:var(--pen-k);stroke:none;opacity:.24}
.rw-sea__rung{fill:none;stroke:var(--pen-k);stroke-width:.35;opacity:.28}
/* the current (the helix's place, Round 12): the sea's own lines, a step stronger, flowing quicker than the water */
.rw-sea__current{fill:none;stroke:var(--pen-k);stroke-width:.5;stroke-linecap:round;opacity:.55}
.rw-card .rw-well__sea{animation:rw-sea-current var(--flow,12s) linear infinite}
@keyframes rw-sea-current{from{translate:0 0}to{translate:var(--wl,9px) 0}}
.rw-sea__layer{animation:rw-sea-drift 26s linear infinite}
.rw-sea__layer--0{animation-duration:23s}.rw-sea__layer--1{animation-duration:24.5s}.rw-sea__layer--3{animation-duration:27.5s}.rw-sea__layer--4{animation-duration:29s}
@keyframes rw-sea-drift{from{translate:0 0}to{translate:65px 0}}
.rw-card .rw-well__sea{fill:none;stroke:var(--c-line);stroke-width:.35;stroke-opacity:.85}
/* the gravity well (The Pull): the sheet's quads darken with depth into the card's deep; its grid is the pen, thin */
.rw-gw{stroke:var(--pen);stroke-width:.3;stroke-linejoin:round}
.rw-gw--0{fill:var(--c-paper)}
.rw-gw--1{fill:color-mix(in oklab,var(--c-deep) 7%,var(--c-paper))}
.rw-gw--2{fill:color-mix(in oklab,var(--c-deep) 16%,var(--c-paper))}
.rw-gw--3{fill:color-mix(in oklab,var(--c-deep) 27%,var(--c-paper))}
.rw-gw--4{fill:color-mix(in oklab,var(--c-deep) 40%,var(--c-paper))}
.rw-gw--5{fill:color-mix(in oklab,var(--c-deep) 56%,var(--c-paper))}
.rw-gw--6{fill:color-mix(in oklab,var(--c-deep) 74%,var(--c-paper))}
.rw-gw--7{fill:color-mix(in oklab,var(--c-deep) 92%,black)}
/* its energy: dashes running in along the spirals, never stopping; each cut piece keeps the stream's phase */
.rw-flow{fill:none;stroke:var(--pen-k);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 5;--flow:2.6s}
.rw-flow__trail{fill:none;stroke:var(--pen-k);stroke-width:.45;stroke-linejoin:round;stroke-opacity:.35}
.rw-flow--o1{opacity:.3}.rw-flow--o2{opacity:.6}.rw-flow--o3{opacity:1}
.rw-card[data-state="up"] .rw-flow{animation:rw-flow var(--flow) linear var(--d,0s) infinite}
.rw-flow--p0{--d:calc(var(--flow) * -1)}.rw-flow--p1{--d:calc(var(--flow) * -.875)}
.rw-flow--p2{--d:calc(var(--flow) * -.75)}.rw-flow--p3{--d:calc(var(--flow) * -.625)}
.rw-flow--p4{--d:calc(var(--flow) * -.5)}.rw-flow--p5{--d:calc(var(--flow) * -.375)}
.rw-flow--p6{--d:calc(var(--flow) * -.25)}.rw-flow--p7{--d:calc(var(--flow) * -.125)}
@keyframes rw-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-10}}
/* Round 14 (the user): the funnel becomes a thick wormhole whose void turns by itself, and the dash swirls become
   single phantom quanta that flash and collapse to a point, one at a time, big enough to read at card size */
.rw-pull__void{fill:color-mix(in oklab,var(--c-deep) 92%,black)}
.rw-pull__rim{fill:none;stroke:var(--pen);stroke-width:2.8}
.rw-pull__rim--in{stroke:var(--pen-k);stroke-width:1;opacity:.85}
.rw-pull__arm{fill:none;stroke:var(--pen-k);stroke-width:1.2;stroke-linecap:round;opacity:.5}
.rw-pull__core{fill:var(--c-glow)}
.rw-pull__spin{transform-box:fill-box;transform-origin:center;animation:rw-pull-spin 9s linear infinite}
@keyframes rw-pull-spin{to{transform:rotate(-360deg)}}
.rw-pull__q{fill:var(--c-glow);stroke:var(--pen-k);stroke-width:.3;transform-box:fill-box;transform-origin:center;opacity:.7;transform:scale(.55)}
.rw-card[data-state="up"] .rw-pull__q{animation:rw-pull-q 4.8s ease-in infinite;animation-delay:calc(var(--i,0) * -.6s)}
/* each quantum's turn by class, not an inline style (the CSP rule) */
.rw-pull__q--1{--i:1}.rw-pull__q--2{--i:2}.rw-pull__q--3{--i:3}.rw-pull__q--4{--i:4}.rw-pull__q--5{--i:5}.rw-pull__q--6{--i:6}.rw-pull__q--7{--i:7}
@keyframes rw-pull-q{0%{opacity:0;transform:scale(.15)}6%{opacity:1;transform:scale(1.3)}16%{opacity:.95;transform:scale(1)}28%{opacity:1;transform:scale(.05)}33%,100%{opacity:0;transform:scale(0)}}
/* a drawing that turns (The Loop) turns as whole sheets, its still sheet and its live one together, about the
   sheet's center (65, 50); the ouroboros the way it eats. Its scales step toward the mouth on the live sheet,
   row after row, a degree and a half round the ring and back */
.rw-card[data-state="up"] .rw-art--turn{animation:rw-art-turn 72s linear infinite}
@keyframes rw-art-turn{to{rotate:-360deg}}
.rw-scale{transform-box:view-box;transform-origin:65px 50px;--step:2.4s}

/* the hourglass with attitude (Inversion): at rest an hourglass; now and then (card.js picks, data-act) a short act,
   small and quick, never big. Its face shows only while it acts. Acts are seconds long on one card, so they may move
   parts inside the drawing */
.rw-hg,.rw-hg__walk,.rw-hg__cap,.rw-hg__eyes,.rw-hg__brow{transform-box:view-box}
.rw-hg{transform-origin:60px 91px}
.rw-hg__cap{transform-origin:37px 18px}
.rw-hg__brow--l{transform-origin:55px 23px}.rw-hg__brow--r{transform-origin:65px 23px}
.rw-hg__eyes{transform-origin:60px 27.6px}
.rw-hg__eye{fill:var(--pen);transform-box:fill-box;transform-origin:center}
.rw-hg__glint{fill:var(--c-paper)}
.rw-hg__brow{fill:none;stroke:var(--pen);stroke-width:.7;stroke-linecap:round}
.rw-hg__mouth{fill:var(--pen);opacity:0}
.rw-hg__face{opacity:0;transition:opacity .14s}
.rw-card[data-act] .rw-hg__face{opacity:1}
.rw-card[data-act] .rw-hg__eye{animation:rw-hg-blink 1.6s ease-in-out}
@keyframes rw-hg-blink{0%,52%,62%,100%{scale:1 1}57%{scale:1 .12}}

/* wiggle: a quick shimmy */
.rw-card[data-act="wiggle"] .rw-hg{animation:rw-hg-wiggle .52s ease-in-out}
@keyframes rw-hg-wiggle{0%,100%{rotate:0deg}15%{rotate:-4deg}35%{rotate:4deg}55%{rotate:-3deg}75%{rotate:2deg}}
/* tip: the top cap tips like a hat, one brow goes up */
.rw-card[data-act="tip"] .rw-hg__cap{animation:rw-hg-tip .95s cubic-bezier(.3,1.6,.5,1)}
@keyframes rw-hg-tip{0%,100%{rotate:0deg;translate:0 0}28%,72%{rotate:-11deg;translate:0 -2px}}
.rw-card[data-act="tip"] .rw-hg__brow--r{animation:rw-hg-brow .95s ease-in-out}
@keyframes rw-hg-brow{0%,100%{translate:0 0;rotate:0deg}25%,75%{translate:0 -1.6px;rotate:-8deg}}
/* huh: a lean to the side and a look, mouth a little open */
.rw-card[data-act="huh"] .rw-hg{animation:rw-hg-huh 1.3s cubic-bezier(.3,1.4,.5,1)}
@keyframes rw-hg-huh{0%,100%{rotate:0deg}22%,80%{rotate:9deg}}
.rw-card[data-act="huh"] .rw-hg__eyes{animation:rw-hg-look 1.3s ease-in-out}
@keyframes rw-hg-look{0%,100%{translate:0 0}25%,78%{translate:1.6px -.4px}}
.rw-card[data-act="huh"] .rw-hg__mouth,.rw-card[data-act="peek"] .rw-hg__mouth{opacity:1}
/* hop: squash, up, land, settle */
.rw-card[data-act="hop"] .rw-hg{animation:rw-hg-hop .72s ease-in-out}
@keyframes rw-hg-hop{0%,100%{translate:0 0;scale:1 1}16%{scale:1.06 .92}42%{translate:0 -7px;scale:.96 1.05}66%{translate:0 0;scale:1.05 .94}82%{scale:1 1}}
/* walk: it waddles off to one side, looks round, waddles across, comes home; eyes look where it goes */
.rw-card[data-act="walk"] .rw-hg__walk{animation:rw-hg-travel 4.4s ease-in-out}
@keyframes rw-hg-travel{0%,100%{translate:0 0}24%,32%{translate:-34px 0}68%,76%{translate:34px 0}}
.rw-card[data-act="walk"] .rw-hg{animation:rw-hg-step .4s ease-in-out 11}
@keyframes rw-hg-step{0%,50%,100%{rotate:0deg;translate:0 0}25%{rotate:-5deg;translate:0 -2px}75%{rotate:5deg;translate:0 -2px}}
.rw-card[data-act="walk"] .rw-hg__eyes{animation:rw-hg-eyes-walk 4.4s ease-in-out}
@keyframes rw-hg-eyes-walk{0%,22%{translate:-1.5px 0}30%,66%{translate:1.5px 0}74%,100%{translate:-1.5px 0}}
/* peek: it leans right up to the glass of the screen, head tilted, eyes wide, and looks at you */
.rw-card[data-act="peek"] .rw-hg{transform-origin:60px 55px;animation:rw-hg-peek 2.1s cubic-bezier(.3,1.3,.4,1)}
@keyframes rw-hg-peek{0%,100%{scale:1;rotate:0deg;translate:0 0}28%,78%{scale:1.34;rotate:-8deg;translate:-4px 6px}52%{rotate:-12deg}}
.rw-card[data-act="peek"] .rw-hg__eyes{animation:rw-hg-wide 2.1s ease-in-out}
@keyframes rw-hg-wide{0%,100%{scale:1}28%,78%{scale:1.3}}
.rw-card[data-state="up"] .rw-scale{animation:rw-scale-step var(--step) ease-in-out var(--d,0s) infinite}
@keyframes rw-scale-step{0%,100%{rotate:0deg}45%{rotate:1.5deg}}
.rw-scale--0{--d:calc(var(--step) * -1)}.rw-scale--1{--d:calc(var(--step) * -.875)}
.rw-scale--2{--d:calc(var(--step) * -.75)}.rw-scale--3{--d:calc(var(--step) * -.625)}
.rw-scale--4{--d:calc(var(--step) * -.5)}.rw-scale--5{--d:calc(var(--step) * -.375)}
.rw-scale--6{--d:calc(var(--step) * -.25)}.rw-scale--7{--d:calc(var(--step) * -.125)}

/* the rare drop, in the card's own glow */
.rw-card[data-state="pulling"] .rw-gloss{animation:rw-stripe var(--pull,1.5s) cubic-bezier(.3,.7,.3,1) forwards}
@keyframes rw-stripe{0%,50%{transform:translate(55%,40%);opacity:0}62%{opacity:1}88%{transform:translate(-12%,-14%);opacity:.9}100%{transform:translate(-30%,-30%);opacity:0}}
.rw-card__veil{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;border-radius:14px;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,40%),color-mix(in oklab,var(--c-glow) 70%,white),color-mix(in oklab,var(--c-glow) 40%,transparent) 55%,transparent 80%)}
.rw-card[data-state="pulling"] .rw-card__veil{animation:rw-veil var(--pull,1.5s) linear forwards}
@keyframes rw-veil{0%{opacity:0}8%{opacity:.8}40%{opacity:.7}70%{opacity:.25}100%{opacity:0}}
/* the climax is the card's own drawing, never a stock glyph: as the face comes round it flares in the card's light
   about its focal point, then settles back to rest */
.rw-card__window{transform-origin:var(--wx,50%) var(--wy,50%)}
.rw-card[data-state="pulling"] .rw-card__window{animation:rw-art-flare var(--pull,1.5s) ease-out forwards}
@keyframes rw-art-flare{0%,62%{scale:1;filter:none}80%{scale:1.06;filter:drop-shadow(0 0 3cqi var(--c-aura)) brightness(1.05)}100%{scale:1;filter:none}}
/* the aura: picked by the card's color (data-aura, lib/auras.js), in the card's hue at full strength. Two sheets that
   lift with the card but do not spin with it: the back one behind the card (its light spilling past the edge), the
   front one over it (the hot rim, sparks, drops). Its reach, 14 units round a 100-unit card, is the air the deck
   reserves (40-deck.css), so it is never cut */
.rw-card{--c-aura:oklch(.82 .15 var(--card-h));--c-aura-hot:color-mix(in oklab,var(--c-aura) 30%,white);--c-aura-crust:color-mix(in oklab,var(--c-aura) 40%,var(--c-deep))}
.rw-aura{position:absolute;left:-14%;top:-10%;width:128%;height:120%;pointer-events:none;display:block;opacity:0}
.rw-aura--back{z-index:-1}
.rw-aura--front{z-index:3}
.rw-card[data-state="pulling"] .rw-aura{opacity:1;animation:rw-aura-lift var(--pull,1.5s) cubic-bezier(.25,.8,.3,1) forwards}
@keyframes rw-aura-lift{0%{translate:0 0;scale:1}14%,72%{translate:0 -6cqi;scale:1.08}100%{translate:0 0;scale:1}}
.rw-aura__crust{fill:none;stroke:var(--c-aura-crust);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:calc(var(--aura-env,0) * .95)}
.rw-aura__fill0{fill:var(--c-aura-crust);stroke:none;opacity:calc(var(--aura-env,0) * .7)}
.rw-aura__glow{fill:none;stroke:var(--c-aura);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:calc(var(--aura-env,0) * .8)}
.rw-aura__core{fill:none;stroke:var(--c-aura-hot);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:var(--aura-env,0)}
.rw-aura__fill{fill:var(--c-aura);stroke:none;opacity:calc(var(--aura-env,0) * .9)}
.rw-aura__fill2{fill:var(--c-aura-hot);stroke:none;opacity:var(--aura-env,0)}
.rw-aura--zap .rw-aura__core{stroke-linejoin:miter;stroke-linecap:square;stroke-width:1.2}
.rw-aura--zap .rw-aura__glow{stroke-linejoin:miter}
.rw-aura--sun .rw-aura__glow{stroke-width:2.6}
.rw-aura--tide .rw-aura__glow{stroke-width:2}
.rw-aura--tide .rw-aura__core{stroke-width:.6}
.rw-aura--bloom .rw-aura__glow{stroke-width:1.6}
.rw-aura--bloom .rw-aura__core{stroke-width:.5}
.rw-aura--arcane .rw-aura__core{stroke-dasharray:4 3;animation:rw-rune .6s linear infinite}
@keyframes rw-rune{to{stroke-dashoffset:-7}}
/* each ray dims along its own length: its gradient runs from the heart to its tip (lib/auras.js) */
.rw-aura__rays{opacity:.85}
.rw-aura__stop{stop-color:var(--c-aura)}
.rw-aura__stop--a{stop-color:var(--c-aura-hot);stop-opacity:.9}.rw-aura__stop--b{stop-opacity:.45}.rw-aura__stop--c{stop-opacity:0}
/* the rays stand out from behind the card as its light gathers, peak as the face comes round, and drain away */
.rw-aura__burst{transform-box:view-box;transform-origin:50px 70px;opacity:0}
.rw-card[data-state="pulling"] .rw-aura__burst{animation:rw-aura-burst var(--pull,1.5s) ease-out forwards}
@keyframes rw-aura-burst{0%,20%{opacity:0;scale:.6;rotate:0deg}55%{opacity:1;scale:1}80%{opacity:.9;scale:1.08}100%{opacity:0;scale:1.14;rotate:24deg}}
/* nightshade only: each pull spits blood from one point on its edge, the way a spray under pressure does
   (lib/auras.js draws it fresh each pull). It flies out as the light peaks, sits wet with its hard shadow from the one
   light above, then dries dark and goes. No blur: it moves whole and only its fill turns. Night stays as it was */
.rw-aura__spatter{display:none}
:root[data-rw-theme="light"] .rw-aura__spatter{display:inline;opacity:0;transform-box:view-box;transform-origin:var(--spatter-o,50px 70px)}
.rw-aura__spatter-ink{fill:var(--rose-deep)}
.rw-aura__spatter-shade{fill:color-mix(in srgb,var(--rose-dark) 45%,transparent)}
:root[data-rw-theme="light"] .rw-card[data-state="pulling"] .rw-aura__spatter{animation:rw-spatter-spray var(--pull,1.5s) cubic-bezier(.2,.9,.3,1) forwards}
:root[data-rw-theme="light"] .rw-card[data-state="pulling"] .rw-aura__spatter-ink{animation:rw-spatter-dry var(--pull,1.5s) linear forwards}
:root[data-rw-theme="light"] .rw-card[data-state="pulling"] .rw-aura__spatter-shade{animation:rw-spatter-sink var(--pull,1.5s) linear forwards}
/* the spray: nothing, then out from the source in a blink, held, then gone as the card lands */
@keyframes rw-spatter-spray{0%,38%{opacity:0;scale:.15}40%{opacity:1;scale:.5}47%{opacity:1;scale:1}82%{opacity:1;scale:1}100%{opacity:0;scale:1}}
/* wet blood rose dries to the darkest rose; a dried stain is flat, so its shadow goes */
@keyframes rw-spatter-dry{0%,47%{fill:var(--rose-deep)}85%,100%{fill:var(--rose-dark)}}
@keyframes rw-spatter-sink{0%,50%{opacity:1}80%,100%{opacity:0}}
/* the void (Kitbash): the card sinks into a dark seal. As it spins it recedes; behind it a seal of unreadable script
   opens inside the rays, its three arms twisting one way and its ring the other; the page is stamped with seals in its
   own ink (module.seal, 55-seal.css); as the card lands the seal closes and the card comes back up to the table */
.rw-card[data-aura="void"]{--c-aura:oklch(.62 .2 305);--c-aura-hot:oklch(.86 .12 305);--c-aura-crust:oklch(.16 .06 300)}
.rw-aura__seal,.rw-aura__seal-script,.rw-aura__seal-arms{transform-box:view-box;transform-origin:50px 70px}
.rw-aura__seal{opacity:0}
.rw-aura__seal-ring{fill:none;stroke:var(--c-aura-crust);stroke-width:.9}
.rw-aura__seal-ink{fill:var(--c-aura-crust);stroke:none}
.rw-card[data-aura="void"][data-state="pulling"] .rw-card__body{animation-name:rw-void-sink}
.rw-card[data-aura="void"][data-state="pulling"] .rw-aura{animation-name:rw-aura-void}
.rw-card[data-aura="void"][data-state="pulling"] .rw-aura__seal{animation:rw-void-seal var(--pull,2.2s) ease-out forwards}
.rw-card[data-aura="void"][data-state="pulling"] .rw-aura__seal-arms{animation:rw-turn calc(var(--pull,2.2s) * 1.6) linear 1}
.rw-card[data-aura="void"][data-state="pulling"] .rw-aura__seal-script{animation:rw-turn calc(var(--pull,2.2s) * 3) linear 1 reverse}
@keyframes rw-void-sink{
  0%{transform:translateY(0) scale(1) rotateY(0)}
  14%{transform:translateY(-3cqi) scale(.92) rotateY(0)}
  72%{transform:translateY(-2cqi) scale(.74) rotateY(540deg)}
  100%{transform:translateY(0) scale(1) rotateY(540deg)}}
@keyframes rw-aura-void{0%{translate:0 0;scale:1}14%{translate:0 -3cqi;scale:.92}72%{translate:0 -2cqi;scale:.74}100%{translate:0 0;scale:1}}
@keyframes rw-void-seal{0%{opacity:0;scale:.3}18%{opacity:1}60%{scale:1.3;opacity:1}85%{opacity:.9;scale:1.32}100%{opacity:0;scale:1.1}}
/* lava (The Evil Furnace): a crust, the molten body and hot runs on the rim; the drops fall in the flow's own color */
.rw-card[data-aura="lava"]{--c-aura:oklch(.72 .19 50);--c-aura-hot:oklch(.97 .09 95);--c-aura-crust:oklch(.36 .12 30)}
.rw-aura--lava .rw-aura__crust{stroke-width:2.4}
.rw-aura--lava .rw-aura__glow{filter:none;stroke-width:1.3;opacity:var(--aura-env,0)}
.rw-aura--lava .rw-aura__core{stroke-width:.7}
.rw-aura--lava .rw-aura__sparks{fill:var(--c-aura)}

/* the implosions (fire, ice): the card swells as it bursts, is squeezed and spun by the suction, and pops back
   infused; the glyph only flashes at the infusion. The thrown smoke and sparks come from lib/auras.js */
.rw-aura__smoke{stroke:none;opacity:calc(var(--aura-env,0) * .55)}
.rw-aura__sparks{fill:var(--c-aura-hot);stroke:none;opacity:var(--aura-env,0)}
.rw-aura--blaze .rw-aura__smoke{fill:color-mix(in oklab,var(--c-aura) 22%,#2A2224)}
.rw-aura--ice .rw-aura__smoke{fill:color-mix(in oklab,var(--c-aura) 35%,white);opacity:calc(var(--aura-env,0) * .4)}
.rw-card[data-aura="ice"]{--c-aura:oklch(.9 .07 var(--card-h));--c-aura-hot:white}
.rw-card[data-implode][data-state="pulling"] .rw-card__body{animation-name:rw-implode}
.rw-card[data-implode][data-state="pulling"] .rw-aura{animation-name:rw-aura-implode}
.rw-card[data-implode][data-state="pulling"] .rw-aura__burst{animation-name:rw-aura-burst-late}
@keyframes rw-implode{
  0%{transform:translateY(0) scale(1) rotateY(0)}
  16%,32%{transform:translateY(-4cqi) scale(1.08) rotateY(0)}
  70%{transform:translateY(-2.5cqi) scale(.9) rotateY(540deg)}
  84%{transform:translateY(-2cqi) scale(1.04) rotateY(540deg)}
  100%{transform:translateY(0) scale(1) rotateY(540deg)}}
@keyframes rw-aura-implode{0%{translate:0 0;scale:1}16%,32%{translate:0 -4cqi;scale:1.08}70%{translate:0 -2.5cqi;scale:.9}84%{translate:0 -2cqi;scale:1.04}100%{translate:0 0;scale:1}}
@keyframes rw-aura-burst-late{0%,72%{opacity:0;scale:.6;rotate:0deg}84%{opacity:1;scale:1}100%{opacity:0;scale:1.14;rotate:20deg}}
/* heaven (Inversion): the pull is a descent from heaven, playful from the first frame. The clouds part at once and a
   shaft of light falls on the card; the card rises into the light, the sun shows right away and stays, the card
   turns over while it comes down, and lands at 1.5 s. Milk white and gold, whatever the card's hue */
.rw-card[data-aura="heaven"]{--c-aura:oklch(.95 .06 85);--c-aura-hot:#FFFFFF}
.rw-aura__beam,.rw-aura__cloud{opacity:0}
.rw-aura__beam-stop{stop-color:#FFFDF6}
.rw-aura__beam-stop--a{stop-opacity:.95}.rw-aura__beam-stop--b{stop-color:#FFE9A8;stop-opacity:.45}.rw-aura__beam-stop--c{stop-opacity:0}
.rw-aura__puff{fill:#FFFFFF}
.rw-aura__beam,.rw-aura__cloud{transform-box:view-box;transform-origin:50px -14px}
.rw-card[data-aura="heaven"][data-state="pulling"] .rw-card__body{animation-name:rw-descend}
.rw-card[data-aura="heaven"][data-state="pulling"] .rw-aura{animation-name:rw-aura-descend}
.rw-card[data-aura="heaven"][data-state="pulling"] .rw-aura__burst{animation-name:rw-aura-burst-early}
.rw-card[data-aura="heaven"][data-state="pulling"] .rw-aura__beam{animation:rw-heaven-beam var(--pull,1.5s) ease-out forwards}
.rw-card[data-aura="heaven"][data-state="pulling"] .rw-aura__cloud--l{animation:rw-heaven-part-l var(--pull,1.5s) cubic-bezier(.2,.8,.2,1) forwards}
.rw-card[data-aura="heaven"][data-state="pulling"] .rw-aura__cloud--r{animation:rw-heaven-part-r var(--pull,1.5s) cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rw-descend{
  0%{transform:translateY(0) scale(1) rotateY(0)}
  10%{transform:translateY(-8cqi) scale(1.08) rotateY(0)}
  72%{transform:translateY(-4cqi) scale(1.06) rotateY(540deg)}
  100%{transform:translateY(0) scale(1) rotateY(540deg)}}
@keyframes rw-aura-descend{0%{translate:0 0;scale:1}10%{translate:0 -8cqi;scale:1.08}72%{translate:0 -4cqi;scale:1.06}100%{translate:0 0;scale:1}}
@keyframes rw-aura-burst-early{0%{opacity:0;scale:.6;rotate:0deg}10%{opacity:1;scale:1}88%{opacity:.85;scale:1.08;rotate:18deg}100%{opacity:0;scale:1.14;rotate:24deg}}
@keyframes rw-heaven-beam{0%{opacity:0;scale:.6 .15}10%{opacity:1;scale:1 1}82%{opacity:.85}100%{opacity:0;scale:1.05 1}}
@keyframes rw-heaven-part-l{0%{opacity:0;translate:12px 0}8%{opacity:1;translate:0 0}70%{opacity:.95;translate:-26px -2px}100%{opacity:0;translate:-34px -4px}}
@keyframes rw-heaven-part-r{0%{opacity:0;translate:-12px 0}8%{opacity:1;translate:0 0}70%{opacity:.95;translate:26px -2px}100%{opacity:0;translate:34px -4px}}

/* impressions (card.js, a record with impress): the open one, right as the card settles, says more will come;
   then a lighter one now and then. Each is a short swell, a ring of the card's light and a sweep of gloss; the -a and
   -b names are the same animation, so it can play again */
.rw-card[data-impress^="open"] .rw-card__body{animation:rw-impress-open 1s cubic-bezier(.3,1.6,.5,1)}
.rw-card[data-impress="beat-a"] .rw-card__body{animation:rw-impress-a .9s ease-out}
.rw-card[data-impress="beat-b"] .rw-card__body{animation:rw-impress-b .9s ease-out}
.rw-card[data-impress$="-a"] .rw-card__face--reveal .rw-gloss{animation:rw-impress-gloss-a 1s ease-out}
.rw-card[data-impress$="-b"] .rw-card__face--reveal .rw-gloss{animation:rw-impress-gloss-b 1s ease-out}
@keyframes rw-impress-open{0%,100%{scale:1}30%{scale:1.08;box-shadow:0 0 0 2px var(--c-aura),0 0 70px 8px var(--c-aura)}}
@keyframes rw-impress-a{0%,100%{scale:1}35%{scale:1.035;box-shadow:0 0 0 1.5px var(--c-aura),0 0 40px 2px var(--c-aura)}}
@keyframes rw-impress-b{0%,100%{scale:1}35%{scale:1.035;box-shadow:0 0 0 1.5px var(--c-aura),0 0 40px 2px var(--c-aura)}}
@keyframes rw-impress-gloss-a{0%{transform:translate(55%,40%);opacity:0}25%{opacity:.8}100%{transform:translate(-30%,-30%);opacity:0}}
@keyframes rw-impress-gloss-b{0%{transform:translate(55%,40%);opacity:0}25%{opacity:.8}100%{transform:translate(-30%,-30%);opacity:0}}

/* infused: the blaze card keeps an ember breathing in its rim, the ice card a rim of frost */
.rw-card[data-aura="blaze"][data-state="up"] .rw-card__face--reveal{
  box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--c-aura) 55%,transparent),inset 0 -14px 26px -16px var(--c-aura);
  animation:rw-ember calc(var(--rw-beat) * 1) ease-in-out infinite}
@keyframes rw-ember{50%{box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--c-aura) 75%,transparent),inset 0 -18px 30px -14px var(--c-aura)}}
.rw-card[data-aura="ice"][data-state="up"] .rw-card__face--reveal{
  box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--c-aura) 60%,white),inset 0 0 22px -9px color-mix(in oklab,var(--c-aura) 50%,white)}

@media (prefers-reduced-motion:reduce){
  .rw-fire__glow,.rw-fire__flame,.rw-fire__heart,.rw-ember,.rw-emblem__wisp,.rw-helm__glint,.rw-bell__swing,.rw-bell__clapper,.rw-bell__sound,.rw-mill__sails,.rw-mill__stone,.rw-cover__sway,.rw-sea__layer,.rw-dragon__breath,.rw-cover__spark.is-near,.rw-cover__spark.is-near .rw-cover__bling{animation:none}
  .rw-card,.rw-card[data-state="pulling"] .rw-card__body,.rw-card[data-state="pulling"] .rw-gloss,.rw-card[data-state="pulling"] .rw-card__veil,.rw-card[data-state="pulling"] .rw-aura,.rw-aura__core,
  .rw-cover--ticks,.rw-cover--spin,.rw-card[data-state="down"]:hover .rw-cover__spark,.rw-card[data-state="down"]:hover .rw-cover__flare,.rw-card[data-aura="blaze"][data-state="up"] .rw-card__face--reveal,
  .rw-card[data-state="up"] .rw-well,.rw-card[data-state="up"] .rw-well__wave,
  .rw-card[data-state="up"] .rw-flow,.rw-card[data-state="up"] .rw-pull__q,.rw-pull__spin,.rw-card[data-state="up"] .rw-art--turn,.rw-card[data-state="up"] .rw-scale,
  .rw-card[data-impress] .rw-card__body,.rw-card[data-impress] .rw-card__face--reveal .rw-gloss{animation:none}
  .rw-card__body{transform:rotateY(var(--flip));transition:none}
  /* no spray without motion (a reduced pull lands at once anyway) */
  :root[data-rw-theme] .rw-aura__spatter{display:none}
}

/* Round 11 · night (the user, 2026-10-13: Beast at a Feast, "make it nighttime on the card"). A drawing that says
   night (lib.art: night) turns its card, or a panel's window, to night: the paper goes to the sky's deep blue, the
   ink to moonlight, fills to dusk, the accent to lantern gold. The same tokens, so every class in the pen follows */
.rw-card[data-night],.rw-item__art[data-night]{--card-h:255;
  --c-paper:oklch(.2 .045 265);--c-window:oklch(.24 .05 265);--c-line:oklch(.42 .06 265);--c-fill:oklch(.3 .05 262);
  --c-ink:oklch(.92 .03 90);--c-sub:oklch(.78 .04 260);--c-accent:oklch(.82 .14 80);--c-glow:oklch(.86 .13 85);
  --c-deep:oklch(.14 .04 265);--c-icon:oklch(.86 .1 85)}
.rw-card[data-night] .rw-art,.rw-item__art[data-night] .rw-art{--pen:color-mix(in oklab,var(--c-ink) 78%,var(--c-window));--pen-k:var(--c-accent)}
.rw-card[data-night] .rw-fill-accent,.rw-item__art[data-night] .rw-fill-accent{fill-opacity:.45}

/* the killer feature, festival lights: each bulb fades in as the one before it fades out, in the drawing's
   staggered order (--i of --n), one full round in two beats; never two at full together. Lantern gold whatever the
   card, crisp (a bulb and two halos, soft only by opacity) */
/* the moon (Round 12): a lit disc, its halo soft by opacity alone, the bite cut in the sky's own colour */
.rw-feast__moon{fill:color-mix(in oklab,var(--c-glow) 40%,var(--c-ink))}
.rw-feast__moon-halo{fill:var(--c-glow);opacity:.06}
.rw-feast__moon-halo--in{opacity:.1}
.rw-feast__moon-bite{fill:var(--c-paper);stroke:none}
/* Round 14: Sylva's tears, blown back off her cheeks one after another, fading as they fly */
.rw-sylva__tear{animation:rw-sylva-tear 1.8s ease-out infinite;animation-delay:calc(var(--i,0) * -.45s)}
.rw-sylva__tear--1{--i:1}.rw-sylva__tear--2{--i:2}.rw-sylva__tear--3{--i:3}   /* each tear's beat by class (the CSP rule) */
@keyframes rw-sylva-tear{0%{opacity:0;translate:0 0}20%{opacity:1}100%{opacity:0;translate:0 -3px}}
@media (prefers-reduced-motion:reduce){.rw-sylva__tear{animation:none}}
/* Round 14: the lab glass in front of the scientists, a faint pane you see through */
.rw-feast__glass{fill:currentColor;fill-opacity:.12;stroke:currentColor;stroke-width:.4;stroke-opacity:.7}
.rw-feast__sea{fill:var(--c-fill);opacity:.35}
/* the square's floor, faint, so the stalls, fountain and table stand on one ground */
.rw-feast__floor{fill:var(--c-window);opacity:.55;stroke:var(--pen);stroke-opacity:.15;stroke-width:.5}
.rw-feast__wire{stroke-width:.5;opacity:.7}
.rw-feast__trail{stroke-dasharray:2 2.4;opacity:.75}
.rw-feast__light{opacity:.22;animation:rw-feast-light calc(var(--rw-beat,4.5s) * 2) linear infinite;
  animation-delay:calc(var(--rw-beat,4.5s) * -2 * var(--i,0) / var(--n,9))}
/* each bulb's turn by class, not an inline style (the CSP rule); nine bulbs */
.rw-feast__light--1{--i:1}.rw-feast__light--2{--i:2}.rw-feast__light--3{--i:3}.rw-feast__light--4{--i:4}.rw-feast__light--5{--i:5}.rw-feast__light--6{--i:6}.rw-feast__light--7{--i:7}.rw-feast__light--8{--i:8}
.rw-feast__bulb{fill:#FFE6A3}
.rw-feast__halo{fill:#FFC85A;opacity:.18}
.rw-feast__halo--in{opacity:.35}
@keyframes rw-feast-light{0%{opacity:.22}5.5%{opacity:1}11.1%{opacity:.22}100%{opacity:.22}}

/* the placeholder: a giant question mark in the card's accent over a soft shadow of itself; its dot breathes */
.rw-mystery__mark{fill:none;stroke:var(--c-accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.rw-mystery__shade{fill:none;stroke:var(--c-deep);stroke-width:10;stroke-linecap:round;opacity:.15}
.rw-mystery__dot{fill:var(--c-accent);transform-box:fill-box;transform-origin:center;animation:rw-mystery-dot var(--rw-beat,4.5s) ease-in-out infinite}
@keyframes rw-mystery-dot{0%,100%{scale:1;opacity:.85}50%{scale:1.25;opacity:1}}

/* a pack panel's own drawing (component.panel): a window in the panel, the card's palette made from the panel's hue */
.rw-item__art{position:relative;width:100%;aspect-ratio:14/11;max-height:240px;border-radius:12px;overflow:hidden;
  --card-h:var(--panel-h,20);--card-k:.9;
  --c-paper:oklch(.962 calc(.016 * var(--card-k)) var(--card-h));--c-window:oklch(.93 calc(.032 * var(--card-k)) var(--card-h));
  --c-line:oklch(.8 calc(.05 * var(--card-k)) var(--card-h));--c-fill:oklch(.89 calc(.05 * var(--card-k)) var(--card-h));
  --c-ink:oklch(.28 calc(.06 * var(--card-k)) var(--card-h));--c-accent:oklch(.56 calc(.17 * var(--card-k)) var(--card-h));
  --c-deep:oklch(.38 calc(.09 * var(--card-k)) var(--card-h));background:var(--c-paper)}
.rw-item__art > svg{position:absolute;inset:0;width:100%;height:100%;display:block}

@media (prefers-reduced-motion:reduce){
  .rw-feast__light,.rw-card .rw-well__sea{animation:none}
  .rw-feast__light:nth-child(3n+1){opacity:1}
  .rw-mystery__dot{animation:none}
}

/* thread deabba19 (2026-10-12, done 2026-10-14). Rarity sealed until the deck is all pulled, then each tier in its
   colour: one blue, three purple, four red, one white sun, the void with none */
.rw-card[data-tier] .rw-card__rarity{letter-spacing:.08em;opacity:.7}
#rw-deck[data-revealed] .rw-card[data-tier] .rw-card__rarity{opacity:1}
#rw-deck[data-revealed] .rw-card[data-tier="blue"] .rw-card__rarity{color:oklch(.6 .17 250)}
#rw-deck[data-revealed] .rw-card[data-tier="purple"] .rw-card__rarity{color:oklch(.55 .2 305)}
#rw-deck[data-revealed] .rw-card[data-tier="red"] .rw-card__rarity{color:oklch(.55 .21 25)}
#rw-deck[data-revealed] .rw-card[data-tier="sun"] .rw-card__rarity{color:var(--c-ink);text-shadow:0 0 8px oklch(.97 .06 95)}
#rw-deck[data-revealed] .rw-card[data-tier="void"] .rw-card__rarity{color:oklch(.5 .02 290);font-style:italic}

/* the last card left is ultra rare and awake: rays behind it, a small sway caught in a deadzone, and under the hand
   1.5 s of sparks and zaps (its stars all glint) */
.rw-card[data-last][data-state="down"]{animation:rw-last-sway calc(var(--rw-beat) * 1.2) ease-in-out infinite}
@keyframes rw-last-sway{0%,22%,50%,72%,100%{rotate:0deg}11%{rotate:-1.6deg}61%{rotate:1.6deg}}
.rw-card[data-last][data-state="down"]::before{content:"";position:absolute;inset:-18%;z-index:-1;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,color-mix(in oklab,var(--c-glow) 55%,transparent) 0 4deg,transparent 4deg 15deg);
  -webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);
  animation:rw-turn calc(var(--rw-beat) * 6) linear infinite}
.rw-card[data-last][data-state="down"]:hover .rw-card__body{animation:rw-last-zap 1.5s steps(12) 1}
@keyframes rw-last-zap{0%,100%{filter:none}8%,33%,58%,83%{filter:drop-shadow(0 0 6px var(--c-glow)) brightness(1.25)}20%,46%,70%{filter:drop-shadow(0 0 2px var(--c-accent))}}
.rw-card[data-last][data-state="down"]:hover .rw-cover__spark{animation:rw-star-glint .3s ease-in-out 5}

/* the void card opens like a shop pack: under the hand it floats up out of its socket, a dark socket left behind */
.rw-card[data-tier="void"][data-state="down"]::after{content:"";position:absolute;inset:3%;z-index:-1;border-radius:var(--card-radius,14px);
  background:oklch(.16 .04 300);box-shadow:inset 0 4px 12px oklch(0 0 0 / .6);opacity:0;transition:opacity .3s}
.rw-card[data-tier="void"][data-state="down"]:hover::after{opacity:1}
.rw-card[data-tier="void"][data-state="down"]:hover .rw-card__body{--lift:-16px;scale:1.04;box-shadow:0 30px 40px -18px oklch(.2 .1 305 / .7)}

/* the miasma seal: as it reaches a card a purple burn eats its outer layer in cigarette holes that grow and join,
   and under it the card turns neon-grey night holo */
@property --rw-burn{syntax:"<percentage>";inherits:true;initial-value:0%}
.rw-card[data-burn] .rw-card__body{animation:rw-burn 1.6s ease-in forwards}
@keyframes rw-burn{to{--rw-burn:140%}}
.rw-card[data-burn] .rw-card__face{filter:grayscale(1) contrast(1.15) brightness(.85)}
.rw-card[data-burn] .rw-card__face::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,oklch(.82 .14 200 / .45),oklch(.8 .16 320 / .4),oklch(.86 .12 150 / .4),oklch(.82 .14 200 / .45));
  background-size:300% 300%;mix-blend-mode:color-dodge;animation:rw-holo-drift 6s linear infinite}
@keyframes rw-holo-drift{to{background-position:300% 0}}
.rw-card[data-burn] .rw-card__face::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  background:oklch(.93 .02 80);
  box-shadow:inset 0 0 0 2px oklch(.45 .2 305);
  -webkit-mask:radial-gradient(circle at 22% 30%,transparent calc(var(--rw-burn) * .5),#000 calc(var(--rw-burn) * .5 + 2%)),
    radial-gradient(circle at 74% 62%,transparent calc(var(--rw-burn) * .6),#000 calc(var(--rw-burn) * .6 + 2%)),
    radial-gradient(circle at 40% 84%,transparent calc(var(--rw-burn) * .45),#000 calc(var(--rw-burn) * .45 + 2%));
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle at 22% 30%,transparent calc(var(--rw-burn) * .5),#000 calc(var(--rw-burn) * .5 + 2%)),
    radial-gradient(circle at 74% 62%,transparent calc(var(--rw-burn) * .6),#000 calc(var(--rw-burn) * .6 + 2%)),
    radial-gradient(circle at 40% 84%,transparent calc(var(--rw-burn) * .45),#000 calc(var(--rw-burn) * .45 + 2%));
  mask-composite:intersect;
  filter:drop-shadow(0 0 3px oklch(.55 .25 305))}
@media (prefers-reduced-motion:reduce){
  .rw-card[data-last][data-state="down"],.rw-card[data-last][data-state="down"]::before,.rw-card[data-last] .rw-card__body,.rw-card[data-burn] .rw-card__face::before{animation:none}
  .rw-card[data-burn] .rw-card__body{animation:none;--rw-burn:140%}
}