/* ARCANA (templates/arcana.html, static/arcana.js). A dark, candle-lit night:
   the ring of cards turns in 3D around a hooded fortune teller, eyes burning in
   the dark of the hood, hands about a crystal ball; fog drifts, embers rise.
   Drawn cards turn over in their slots with a burst of light. Everything stands
   still for people who ask for less motion. */
.ar-page{position:relative;isolation:isolate;overflow:hidden;padding:var(--s4) 0 var(--s6);color:#EDE6FF;
  background:radial-gradient(900px 560px at 50% 38%,rgba(110,40,170,.30),transparent 65%),
             radial-gradient(800px 420px at 50% 100%,rgba(150,18,36,.30),transparent 70%),
             radial-gradient(600px 380px at 8% 20%,rgba(90,20,60,.25),transparent 70%),
             linear-gradient(180deg,#05030F,#0B0618 55%,#050208);}
/* A vignette: the edges fall away into the dark. */
.ar-page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  box-shadow:inset 0 0 220px 80px rgba(0,0,0,.85);}
.ar-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.ar-sky i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.2;animation:arTwinkle var(--t,4s) ease-in-out var(--o,0s) infinite alternate;}
@keyframes arTwinkle{to{opacity:.9;transform:scale(1.6);}}
/* Fog, drifting low across the page. */
.ar-fog{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.ar-fog i{position:absolute;left:-30%;width:90%;height:260px;border-radius:50%;filter:blur(40px);opacity:.35;
  background:radial-gradient(closest-side,rgba(170,140,220,.35),transparent);animation:arFog 38s linear infinite;}
.ar-fog i:nth-child(1){top:46%;}
.ar-fog i:nth-child(2){top:62%;animation-duration:52s;animation-delay:-20s;background:radial-gradient(closest-side,rgba(160,40,70,.35),transparent);}
.ar-fog i:nth-child(3){top:30%;animation-duration:64s;animation-delay:-41s;opacity:.22;}
@keyframes arFog{from{transform:translateX(0);}to{transform:translateX(140%);}}
/* The Oswald Wirth cards: an oxblood night, to match their backs. */
.ar-page[data-deck="wirth"]{
  background:radial-gradient(900px 560px at 50% 38%,rgba(170,24,48,.32),transparent 65%),
             radial-gradient(800px 420px at 50% 100%,rgba(210,120,30,.20),transparent 70%),
             radial-gradient(600px 380px at 8% 20%,rgba(120,20,30,.30),transparent 70%),
             linear-gradient(180deg,#0D0205,#1A050A 55%,#070103);}
.ar-page[data-deck="wirth"] .ar-fog i{background:radial-gradient(closest-side,rgba(230,130,100,.28),transparent);}
.ar-page[data-deck="wirth"] .ar-aura{filter:hue-rotate(-40deg);}
.ar-page[data-deck="wirth"] .ar-card::before{background-image:url("tarot/wirth/back.webp");}
/* With the Wirth cards the title, labels and chosen buttons turn from ember gold to bone and blood. */
.ar-page[data-deck="wirth"] .ar-head h1{background-image:linear-gradient(180deg,#FFF6E8 0%,#F0C9A2 42%,#B3122E 100%);
  animation-name:arTitleBlood;}
@keyframes arTitleBlood{0%,100%{filter:drop-shadow(0 0 14px rgba(220,30,60,.35));}48%{filter:drop-shadow(0 0 26px rgba(220,30,60,.75));}
  50%{filter:drop-shadow(0 0 8px rgba(220,30,60,.2));}52%{filter:drop-shadow(0 0 24px rgba(220,30,60,.6));}}
.ar-page[data-deck="wirth"] .ar-chip[aria-pressed="true"]{background:linear-gradient(135deg,#F2D7B0,#B3122E);color:#1A0508;
  box-shadow:0 0 18px -4px rgba(220,30,60,.75);}
.ar-page[data-deck="wirth"] .ar-chip{border-color:rgba(240,190,160,.3);background:rgba(40,6,14,.55);}
.ar-page[data-deck="wirth"] .ar-chip:hover{border-color:rgba(240,201,162,.75);}
.ar-page[data-deck="wirth"] .ar-ask-label{color:#F0C9A2;}
.ar-page[data-deck="wirth"] .ar-ask-input{border-color:rgba(240,190,160,.3);background:rgba(40,6,14,.6);}
.ar-page[data-deck="wirth"] .ar-ask-input:focus{border-color:#F0C9A2;box-shadow:0 0 0 3px rgba(220,30,60,.25);}
.ar-page[data-deck="wirth"] .ar-head .lede,.ar-page[data-deck="wirth"] .crumbs,.ar-page[data-deck="wirth"] .crumbs a{color:#E3C8C0;}
/* What the oracle says, in a bubble beside its hood (arcana.js, say()). */
.ar-bubble{position:absolute;z-index:4;left:calc(50% + 150px);top:6%;max-width:260px;margin:0;padding:12px 16px;border-radius:18px;
  background:linear-gradient(180deg,rgba(40,16,70,.94),rgba(22,8,40,.94));border:1px solid rgba(255,196,84,.55);color:#FFE9B8;
  font-style:italic;font-size:15px;line-height:1.4;box-shadow:0 0 28px -6px rgba(255,140,60,.6),0 10px 30px rgba(0,0,0,.5);
  pointer-events:none;opacity:0;transform:translateY(6px) scale(.96);transform-origin:0 100%;transition:opacity .35s,transform .35s;}
.ar-bubble.is-on{opacity:1;transform:none;}
.ar-bubble::before,.ar-bubble::after{content:"";position:absolute;border-radius:50%;background:rgba(30,12,55,.94);border:1px solid rgba(255,196,84,.55);}
.ar-bubble::before{left:-16px;bottom:-6px;width:14px;height:14px;}
.ar-bubble::after{left:-30px;bottom:-18px;width:8px;height:8px;}
@media (max-width:760px){
  .ar-bubble{left:50%;top:2%;max-width:min(260px,80vw);transform:translate(-50%,6px);transform-origin:50% 100%;}
  .ar-bubble.is-on{transform:translate(-50%,0);}
  .ar-bubble::before{left:calc(50% - 7px);bottom:-14px;}
  .ar-bubble::after{left:calc(50% - 4px);bottom:-26px;}
}
/* Installing it as an app: how to, where the browser has no prompt of its own. */
.ar-app-how{margin:10px 0 0;padding:12px 14px;border-radius:12px;border:1px solid rgba(201,160,255,.3);background:rgba(20,10,48,.6);
  font-size:14px;line-height:1.55;color:#DCD2F5;}
.ar-app-how strong{color:#FFD58A;}

/* The heading: the title and its line on the left; the question and the
   spread on the right, each with room to breathe. */
.ar-page .crumbs,.ar-page .crumbs a{color:#B9AEE0;}
.ar-head{position:relative;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);align-items:end;gap:24px 56px;}
.ar-head h1{margin:var(--s2) 0 0;font-size:clamp(40px,5.5vw,72px);line-height:1;letter-spacing:.14em;font-weight:800;
  background:linear-gradient(180deg,#FFF1C4 0%,#FFC454 45%,#C2410C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,120,40,.45));animation:arTitle 6s ease-in-out infinite;}
@keyframes arTitle{0%,100%{filter:drop-shadow(0 0 14px rgba(255,120,40,.35));}48%{filter:drop-shadow(0 0 26px rgba(255,90,30,.7));}
  50%{filter:drop-shadow(0 0 8px rgba(255,90,30,.2));}52%{filter:drop-shadow(0 0 24px rgba(255,90,30,.6));}}
.ar-head .lede{margin:var(--s2) 0 0;color:#C9C0EA;max-width:34rem;}
.ar-side{display:grid;gap:14px;}
.ar-ask{display:grid;gap:8px;}
.ar-ask-label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FFC454;}
.ar-ask-input{width:100%;padding:12px 15px;border-radius:12px;border:1px solid rgba(201,160,255,.35);background:rgba(20,10,48,.6);
  color:#F3EEFF;font:500 15px/1.3 inherit;}
.ar-ask-input::placeholder{color:#8F84BF;}
.ar-ask-input:focus{outline:none;border-color:#FFC454;box-shadow:0 0 0 3px rgba(255,196,84,.2);}
.ar-controls{display:flex;flex-wrap:wrap;gap:8px;}
.ar-chip{padding:9px 16px;border-radius:999px;border:1px solid rgba(201,160,255,.35);background:rgba(20,10,48,.55);color:#E8DEFF;
  font:700 14px/1 inherit;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s;}
.ar-chip:hover{border-color:rgba(255,196,84,.7);}
.ar-chip[aria-pressed="true"]{background:linear-gradient(135deg,#FFC454,#E8622B);color:#1A1030;border-color:transparent;box-shadow:0 0 18px -4px rgba(255,120,40,.7);}
.ar-sound[aria-pressed="true"]{background:rgba(20,10,48,.55);color:#E8DEFF;border-color:rgba(201,160,255,.35);box-shadow:none;}
.ar-chip:focus-visible,.ar-card:focus-visible,.ar-view-btn:focus-visible{outline:2px solid #FFC454;outline-offset:3px;}

/* The ring. --cw is the card's width; the script works out the radius, the
   tilt and how close you are. */
.ar-stage{position:relative;margin-top:var(--s4);}
.ar-ring-wrap{--cw:118px;position:relative;height:calc(var(--cw) * 1.67 + 310px);perspective:1500px;perspective-origin:50% 30%;
  user-select:none;-webkit-user-select:none;}
/* Only the cards turn the ring: on a card a drag turns and tilts it; elsewhere the page scrolls. */
.ar-card{touch-action:none;cursor:grab;}
.ar-ring-wrap.is-dragging,.ar-ring-wrap.is-dragging .ar-card{cursor:grabbing;}
.ar-ring{position:absolute;left:50%;top:200px;width:var(--cw);height:calc(var(--cw) * 1.667);margin-left:calc(var(--cw) / -2);
  transform-style:preserve-3d;}
.ar-card{position:absolute;inset:0;padding:0;border:0;border-radius:9px;background:none;cursor:pointer;
  transition:opacity .5s,filter .3s;-webkit-tap-highlight-color:transparent;transform-style:preserve-3d;}
.ar-card img{display:block;width:100%;height:100%;border-radius:9px;object-fit:cover;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,214,140,.35),0 14px 30px -12px rgba(0,0,0,.8);transition:box-shadow .5s,transform .3s,filter .5s;}
.ar-card:hover img{transform:translateY(-10px);box-shadow:0 0 0 1px rgba(255,214,140,.8),0 0 26px 2px rgba(255,140,60,.6);}
.ar-card.is-drawn{opacity:.12;pointer-events:none;}
/* The cards bounce, one after another round the ring, like a wave (--bd, arcana.js).
   Their own translate, so it never fights the burn, spin and shatter animations. */
.ar-card{animation:arBounce 2.4s cubic-bezier(.3,0,.3,1) var(--bd,0s) infinite;}
@keyframes arBounce{0%,62%,100%{translate:0 0;}20%{translate:0 -16px;}36%{translate:0 0;}46%{translate:0 -6px;}54%{translate:0 0;}}
.ar-ring-wrap::after{content:"";position:absolute;left:50%;bottom:30px;width:min(780px,92%);height:52px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,110,40,.30),rgba(126,40,160,.14) 60%,transparent);filter:blur(5px);pointer-events:none;}
.ar-hint{margin:6px 0 0;text-align:center;font-size:14px;color:#A99EDB;}

/* How close, and back to where it started. */
.ar-view{position:absolute;right:0;bottom:12px;display:flex;gap:6px;z-index:2;}
.ar-view-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(201,160,255,.4);background:rgba(20,10,48,.7);color:#F3EEFF;
  font:700 18px/1 inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s;}
.ar-view-btn:hover{border-color:#FFC454;box-shadow:0 0 14px -2px rgba(255,140,60,.6);}

/* Cards with depth: a gilded edge behind each face, and light that slides across. */
.ar-card::before{content:"";position:absolute;inset:0;border-radius:9px;transform:translateZ(-4px);
  background:#3A2A10 url("tarot/back.webp") center/cover;box-shadow:0 0 0 1px rgba(255,214,140,.55),inset 0 0 0 2px #B88A35;}
.ar-card::after{content:"";position:absolute;inset:0;border-radius:9px;pointer-events:none;transform:translateZ(1px);
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.38) 48%,transparent 60%) no-repeat;background-size:250% 100%;
  background-position:130% 0;animation:arGlare var(--gl,7s) ease-in-out var(--gd,0s) infinite;}
@keyframes arGlare{0%,70%{background-position:130% 0;}100%{background-position:-60% 0;}}
/* Thickness: gilded layers stacked behind each face (arcana.js adds them), so a
   card turned at an angle shows a solid gold edge; the back face sits behind them. */
.ar-depth{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;}
.ar-depth i{position:absolute;inset:0;border-radius:9px;transform:translateZ(var(--z));
  background:linear-gradient(90deg,#5a3a10,#d9a84a 18%,#f7d98c 50%,#c58f2c 82%,#5a3a10);
  box-shadow:inset 0 0 0 1px rgba(60,35,5,.6);}
.ar-card::before{transform:translateZ(-7px) !important;}
/* A bevel of light round the face, and a deeper shadow beneath. */
.ar-card img{box-shadow:0 0 0 1px rgba(255,214,140,.55),inset 0 0 0 2px rgba(255,240,200,.3),
  0 18px 34px -12px rgba(0,0,0,.9),0 4px 10px -4px rgba(0,0,0,.6);}
.ar-card.is-glint img{box-shadow:0 0 0 1px rgba(255,231,163,.95),0 0 34px 8px rgba(255,140,60,.75);filter:brightness(1.25) saturate(1.2);}

/* Now and then a card bursts into embers and re-forms, or drifts away and is
   drawn back by the fortune teller (arcana.js). */
.ar-card.is-shatter,.ar-card.is-drift{pointer-events:none;}
.ar-card.is-shatter img{animation:arShatter 2.8s ease forwards;}
.ar-card.is-shatter::before,.ar-card.is-shatter::after{animation:arShatterEdge 2.8s ease forwards;}
@keyframes arShatter{0%{transform:none;opacity:1;filter:none;}
  12%{transform:scale(1.12);opacity:1;filter:brightness(2.4) saturate(1.8) hue-rotate(-20deg);}
  22%{transform:scale(.15) rotate(28deg);opacity:0;}
  70%{transform:scale(.15) rotate(-20deg);opacity:0;filter:brightness(2.4);}
  86%{transform:scale(1.08);opacity:1;filter:brightness(1.9);}
  100%{transform:none;opacity:1;filter:none;}}
@keyframes arShatterEdge{0%,14%{opacity:1;}20%,82%{opacity:0;}100%{opacity:1;}}
.ar-card.is-drift img{animation:arDrift 4s cubic-bezier(.45,0,.2,1) forwards;}
.ar-card.is-drift::before,.ar-card.is-drift::after{opacity:0;transition:opacity .3s;}
@keyframes arDrift{0%{transform:none;opacity:1;filter:none;}
  42%{transform:translate3d(-24px,-170px,90px) rotate(-22deg) scale(.82);opacity:.7;filter:drop-shadow(0 0 16px rgba(201,160,255,.95)) brightness(1.3);}
  58%{transform:translate3d(-30px,-178px,90px) rotate(-14deg) scale(.82);opacity:.65;filter:drop-shadow(0 0 22px rgba(255,90,40,.95)) brightness(1.5);}
  100%{transform:none;opacity:1;filter:none;}}
/* A card catches fire: it glows, chars and crumbles, then re-forms out of the light. */
.ar-card.is-burn,.ar-card.is-spin{pointer-events:none;}
.ar-card.is-burn img{animation:arBurn 3.4s ease forwards;}
.ar-card.is-burn::before,.ar-card.is-burn::after{animation:arShatterEdge 3.4s ease forwards;}
@keyframes arBurn{0%{filter:none;opacity:1;transform:none;}
  18%{filter:brightness(1.7) sepia(1) saturate(3.5) hue-rotate(-25deg);box-shadow:0 0 30px 10px rgba(255,90,20,.85);}
  38%{filter:brightness(.55) sepia(1) saturate(2) hue-rotate(-30deg) contrast(1.4);opacity:1;transform:translateY(-4px);}
  52%{filter:brightness(.1) contrast(2);opacity:0;transform:translateY(-14px) scale(.96);}
  74%{filter:brightness(2.2);opacity:0;transform:scale(.4);}
  90%{filter:brightness(1.7);opacity:1;transform:scale(1.06);}
  100%{filter:none;opacity:1;transform:none;}}
/* A card spins on its own axis, then settles. */
.ar-card.is-spin img{animation:arSpin 2.2s cubic-bezier(.5,0,.3,1) forwards;}
.ar-card.is-spin::before{opacity:0;}
@keyframes arSpin{0%{transform:none;}20%{transform:translateY(-14px) rotateY(0);filter:brightness(1.3) drop-shadow(0 0 14px rgba(201,160,255,.9));}
  80%{transform:translateY(-14px) rotateY(1080deg);filter:brightness(1.3) drop-shadow(0 0 14px rgba(255,140,60,.9));}
  100%{transform:none;filter:none;}}
.ar-shards.is-fire i{border-radius:50%;animation-name:arEmber;animation-duration:1.6s;}
@keyframes arEmber{from{transform:translate(0,0) scale(1);opacity:1;}60%{opacity:.9;}
  to{transform:translate(var(--dx),var(--dy)) scale(.15);opacity:0;}}
.ar-shards{position:absolute;width:0;height:0;pointer-events:none;z-index:3;}
/* A card smoulders: it darkens and smoke curls up off it, then it clears. */
.ar-card.is-smoke img{animation:arSmoulder 4.4s ease forwards;}
@keyframes arSmoulder{0%,100%{filter:none;}20%,75%{filter:brightness(.72) sepia(.45) saturate(1.3);}}
.ar-shards.is-smoke i{border-radius:50%;background:var(--c,rgba(200,190,225,.35));box-shadow:none;filter:blur(7px);
  animation:arSmokeRise var(--t,3.2s) ease-out forwards;}
@keyframes arSmokeRise{0%{transform:translate(0,0) scale(.5);opacity:0;}20%{opacity:.85;}
  100%{transform:translate(var(--dx),var(--dy)) scale(3.2);opacity:0;}}
.ar-shards i{position:absolute;width:var(--s,6px);height:var(--s,6px);border-radius:2px;background:var(--c,#FFD27A);
  box-shadow:0 0 10px 2px rgba(255,120,40,.9);animation:arShard 1.4s cubic-bezier(.15,.8,.25,1) forwards;}
@keyframes arShard{from{transform:translate(0,0) rotate(0) scale(1);opacity:1;}
  to{transform:translate(var(--dx),var(--dy)) rotate(var(--r,180deg)) scale(.2);opacity:0;}}

/* The spread: one slot, or three. */
.ar-spread{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;justify-content:center;gap:clamp(14px,3vw,40px);}
.ar-slot{position:relative;display:grid;justify-items:center;gap:10px;padding-bottom:34px;}
[data-spread="1"] .ar-slot-side{display:none;}
[data-spread="1"] .ar-slot-label{visibility:hidden;}
.ar-slot-label{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#FFC454;}
.ar-flip{position:relative;width:clamp(120px,15vw,180px);aspect-ratio:3/5;perspective:1100px;transform-style:preserve-3d;transition:transform .25s ease-out;}
.ar-face{position:absolute;inset:0;border-radius:12px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .9s cubic-bezier(.3,1.3,.5,1);box-shadow:0 0 0 1px rgba(255,214,140,.4),0 24px 50px -20px rgba(0,0,0,.9);}
.ar-face img{display:block;width:100%;height:100%;object-fit:cover;}
.ar-face-back{opacity:.35;}
.ar-face-front{transform:rotateY(180deg);}
.ar-slot.is-turned .ar-face-back{transform:rotateY(-180deg);opacity:1;}
.ar-slot.is-turned .ar-face-front{transform:rotateY(0);box-shadow:0 0 0 1px rgba(255,214,140,.7),0 0 40px -4px rgba(255,120,40,.55),0 24px 50px -20px rgba(0,0,0,.9);}
.ar-slot.is-reversed .ar-face-front img{transform:rotate(180deg);}
.ar-slot.is-turned .ar-flip{animation:arFloat 5s ease-in-out infinite alternate;}
@keyframes arFloat{from{translate:0 0;}to{translate:0 -10px;}}
.ar-face-front::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 47%,transparent 62%) no-repeat;background-size:250% 100%;background-position:130% 0;}
.ar-slot.is-turned .ar-face-front::after{animation:arGlare 6s ease-in-out 1s infinite;}
.ar-rev-tag{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;background:rgba(201,160,255,.18);color:#E3D3FF;border:1px solid rgba(201,160,255,.45);opacity:0;transition:opacity .4s .6s;}
.ar-slot.is-reversed.is-turned .ar-rev-tag{opacity:1;}
.ar-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:3;}
.ar-burst i{position:absolute;width:6px;height:6px;border-radius:50%;background:#FFE7A3;box-shadow:0 0 10px 2px rgba(255,140,60,.9);
  animation:arBurst 1.1s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes arBurst{from{transform:translate(0,0) scale(1);opacity:1;}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0;}}

/* What the cards say. */
.ar-readings{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:var(--s4);}
.ar-read{padding:20px 22px;border-radius:16px;background:rgba(20,10,48,.6);border:1px solid rgba(201,160,255,.25);animation:arIn .6s ease both;}
@keyframes arIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.ar-read p{margin:0;}
.ar-read .ar-read-pos{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#FFC454;}
.ar-read h2{margin:6px 0 2px;font-size:22px;color:#fff;}
.ar-read .ar-read-way{font-size:13px;font-weight:700;color:#C9A0FF;}
.ar-read .ar-read-text{margin-top:10px;color:#D9D1F5;line-height:1.6;}

/* The small print: even spacing, the keys in a row that wraps cleanly. */
.ar-about{display:grid;gap:14px;margin-top:var(--s5, 48px);max-width:72rem;}
.ar-about p{margin:0;}
.ar-about .fine{color:#A99EDB;line-height:1.65;}
.ar-keys{display:flex;flex-wrap:wrap;gap:8px 20px;}
.ar-keys span{display:inline-flex;align-items:center;gap:6px;}
.ar-about kbd{display:inline-block;min-width:22px;padding:1px 6px;border:1px solid rgba(201,160,255,.35);border-bottom-width:2px;border-radius:5px;
  font:700 12px/1.5 ui-monospace,Menlo,Consolas,monospace;text-align:center;background:rgba(20,10,48,.6);color:#E8DEFF;}
.ar-back{margin-top:6px !important;}
.ar-about .text-link{color:#FFC454;}

/* ---- The fortune teller at the heart of the ring ---- */
.ar-oracle{position:absolute;left:50%;top:50%;width:240px;height:330px;margin:-300px 0 0 -120px;pointer-events:none;transform-style:flat;
  transform-origin:50% 80%;}
.ar-aura{position:absolute;left:50%;top:40%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,30,60,.35),rgba(90,30,150,.18) 55%,transparent);filter:blur(10px);
  animation:arAura 7s ease-in-out infinite alternate;}
@keyframes arAura{to{transform:scale(1.12);opacity:.75;}}
.ar-teller,.ar-hands{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.ar-teller{animation:arBreathe 6s ease-in-out infinite;transform-origin:50% 100%;}
@keyframes arBreathe{50%{transform:translateY(-4px) scaleY(1.01);}}
.ar-eyes{animation:arEyes 5s steps(1,end) infinite;}
.ar-eyes ellipse{animation:arEyeGlow 3.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center;}
@keyframes arEyeGlow{from{opacity:.55;}to{opacity:1;}}
/* A blink, now and then. */
@keyframes arEyes{0%,46%,50%,100%{opacity:1;}47%,49%{opacity:0;}}
.ar-sigil{opacity:.45;animation:arSigil 4s ease-in-out infinite alternate;}
@keyframes arSigil{to{opacity:.85;filter:drop-shadow(0 0 4px #c9a0ff);}}
.ar-orb{position:absolute;left:50%;top:205px;width:118px;height:118px;margin-left:-59px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,231,163,.5) 12%,transparent 30%),
             radial-gradient(circle at 50% 58%,#9b4dff 0%,#4a1a8f 42%,#1a0636 72%,#0a0214 100%);
  box-shadow:0 0 40px 10px rgba(158,90,255,.55),0 0 90px 24px rgba(255,90,40,.22),inset -14px -18px 40px rgba(0,0,0,.6);
  animation:arOrbBob 6s ease-in-out infinite alternate,arOrbGlow 3.2s ease-in-out infinite alternate;transition:box-shadow .6s;}
/* The ball glows: a halo that breathes, brighter as the core swells. */
@keyframes arOrbGlow{
  from{box-shadow:0 0 34px 8px rgba(158,90,255,.5),0 0 80px 22px rgba(255,90,40,.18),0 0 160px 60px rgba(120,60,255,.12),inset -14px -18px 40px rgba(0,0,0,.6);}
  to{box-shadow:0 0 60px 18px rgba(190,130,255,.85),0 0 130px 44px rgba(255,120,50,.35),0 0 240px 90px rgba(140,70,255,.22),inset -10px -14px 34px rgba(0,0,0,.45);}}
@keyframes arOrbBlaze{
  from{box-shadow:0 0 70px 22px rgba(255,140,60,.75),0 0 150px 46px rgba(158,60,255,.45),0 0 260px 100px rgba(255,90,40,.2),inset -14px -18px 40px rgba(0,0,0,.4);}
  to{box-shadow:0 0 95px 32px rgba(255,180,90,.95),0 0 190px 64px rgba(180,80,255,.6),0 0 320px 130px rgba(255,110,50,.3),inset -10px -14px 30px rgba(0,0,0,.3);}}
.ar-orb i{position:absolute;inset:-20%;border-radius:50%;mix-blend-mode:screen;opacity:.8;
  background:conic-gradient(from 0deg,transparent 0 20%,rgba(255,150,80,.55) 30%,transparent 45%,rgba(160,120,255,.55) 65%,transparent 80%);
  filter:blur(10px);animation:arSwirl 9s linear infinite;}
.ar-orb i:nth-child(2){animation-duration:14s;animation-direction:reverse;opacity:.5;}
.ar-orb i:nth-child(3){inset:12%;background:radial-gradient(circle at 50% 50%,rgba(255,240,200,.9),transparent 45%);filter:blur(6px);animation:arCore 3.2s ease-in-out infinite alternate;}
@keyframes arSwirl{to{transform:rotate(360deg);}}
@keyframes arCore{from{opacity:.25;transform:scale(.7);}to{opacity:.8;transform:scale(1.05);}}
@keyframes arOrbBob{to{transform:translateY(-6px);}}
.ar-hands{z-index:1;filter:drop-shadow(0 0 12px rgba(170,110,255,.35));}
/* The table in front of the fortune teller: dice and skulls, the skulls' eyes smouldering. */
.ar-table{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));}
.ar-skull-eye{animation:arEyeGlow 2.6s ease-in-out infinite alternate;}
.ar-oracle.is-dragon .ar-skull-eye,.ar-oracle.is-speaking .ar-skull-eye{animation-duration:.4s;}
/* The dragon: the fortune teller melts into smoke and a dragon rears up in its place, wings beating,
   eyes burning, fire from its jaws; then it is the fortune teller again (arcana.js, dragon()). */
.ar-dragon{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transform:scale(.55) translateY(40px);
  transform-origin:50% 75%;transition:opacity .8s ease,transform 1s cubic-bezier(.2,1.5,.4,1);filter:drop-shadow(0 0 16px rgba(255,80,30,.5));}
.ar-teller,.ar-hands,.ar-teller-img,.ar-runes{transition:opacity .8s ease .2s;}
.ar-oracle.is-dragon .ar-dragon{opacity:1;transform:none;}
.ar-oracle.is-dragon .ar-teller,.ar-oracle.is-dragon .ar-hands,.ar-oracle.is-dragon .ar-teller-img,.ar-oracle.is-dragon .ar-runes{opacity:0;transition-delay:0s;}
.ar-oracle.is-dragon .ar-aura{background:radial-gradient(closest-side,rgba(255,90,30,.5),rgba(160,20,40,.25) 55%,transparent);}
.ar-dw{transform-box:fill-box;transform-origin:100% 85%;}
.ar-oracle.is-dragon .ar-dw{animation:arWingBeat 1.4s ease-in-out infinite alternate;}
@keyframes arWingBeat{from{transform:rotate(9deg);}to{transform:rotate(-12deg) scaleY(.92);}}
.ar-oracle.is-dragon .ar-deye{animation:arEyeGlow .6s ease-in-out infinite alternate;}
.ar-djaw{transition:transform .25s;}
.ar-oracle.is-breathing .ar-djaw{transform:translateY(7px);}
.ar-oracle.is-breathing .ar-dnose{fill:#fff1a0;}
.ar-breath{position:absolute;left:50%;top:50%;width:0;height:0;}
.ar-breath i{position:absolute;left:0;top:0;width:var(--s,14px);height:var(--s,14px);margin:calc(var(--s,14px)/-2);border-radius:50%;
  background:radial-gradient(circle,var(--c,#FFE08A),rgba(255,90,20,.6) 55%,transparent 72%);mix-blend-mode:screen;
  animation:arBreath var(--t,1.1s) cubic-bezier(.2,.6,.3,1) forwards;}
@keyframes arBreath{0%{transform:translate(0,0) scale(.3);opacity:1;}70%{opacity:.85;}100%{transform:translate(var(--dx),var(--dy)) scale(2.8);opacity:0;}}
/* Bats: now and then a few flit past the fortune teller (arcana.js, bats()). */
.ar-bats{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:3;}
.ar-bat{position:absolute;left:0;top:0;width:76px;height:38px;fill:#16060F;
  filter:drop-shadow(0 0 1.5px rgba(255,190,110,.95)) drop-shadow(0 0 9px rgba(170,90,255,.7));}
.ar-bat-w{transform-origin:30px 14px;animation:arFlap var(--fl,.16s) ease-in-out infinite alternate;}
@keyframes arFlap{from{transform:scaleY(1);}to{transform:scaleY(-.35);}}
.ar-bat .ar-bat-eye{fill:#FF4A1A;}
/* Cobwebs, spiders and the crow (arcana.js). The spiders' legs step in two
   sets; the one on your screen casts a shadow, as if on the glass. */
.ar-critters{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3;}
.ar-web{position:absolute;top:0;width:min(220px,28vw);height:auto;fill:none;stroke:rgba(214,220,255,.3);stroke-width:.7;
  filter:drop-shadow(0 0 2px rgba(200,210,255,.25));animation:arWebSway 7s ease-in-out infinite alternate;}
.ar-web-l{left:0;transform-origin:0 0;}
.ar-web-r{right:0;transform:scaleX(-1);transform-origin:50% 0;animation-delay:-3s;}
@keyframes arWebSway{from{rotate:0deg;}to{rotate:1.2deg;}}
.ar-spider{position:absolute;left:-60px;top:-60px;width:120px;height:120px;fill:#0D0610;overflow:visible;
  filter:drop-shadow(0 0 3px rgba(150,110,255,.35));}
.ar-spider path{fill:none;stroke:#0D0610;stroke-width:3.2;stroke-linecap:round;}
.ar-spider .ar-sp-mark{fill:#B3001B;stroke:none;}
.ar-spider .ar-sp-eye{fill:#FF3A2A;}
.ar-legs-a,.ar-legs-b{transform-origin:0 -4px;animation:arStep .2s ease-in-out infinite alternate;}
.ar-legs-b{animation-direction:alternate-reverse;}
.ar-spider.is-still .ar-legs-a,.ar-spider.is-still .ar-legs-b{animation-duration:1.4s;}
@keyframes arStep{from{transform:rotate(-7deg);}to{transform:rotate(7deg);}}
.ar-thread{position:absolute;top:0;width:1px;height:0;background:linear-gradient(rgba(220,225,255,.55),rgba(220,225,255,.25));}
.ar-glass{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden;}
.ar-spider.is-on-glass{filter:drop-shadow(0 22px 16px rgba(0,0,0,.55)) drop-shadow(0 0 2px rgba(255,255,255,.25));}
.ar-spider.is-on-glass .ar-legs-a,.ar-spider.is-on-glass .ar-legs-b{animation-duration:.16s;}
.ar-carried{position:absolute;left:0;top:0;width:30px;height:48px;border-radius:3px;object-fit:cover;
  box-shadow:0 0 14px rgba(255,190,90,.6);}
.ar-card.is-stolen{visibility:hidden;pointer-events:none;}
/* The crow (arcana.js): a real one, alive on the whole page, its feet at the
   point it is moved to. It sits breathing on the top edge of things, flies
   with its wings beating (two pictures in turn) and never takes a click. A
   rim of candlelight keeps it seen on the dark night. */
.ar-crow{position:fixed;left:0;top:0;width:0;height:0;z-index:58;pointer-events:none;will-change:transform;}
.ar-crow-pic{position:absolute;left:0;bottom:0;max-width:none;pointer-events:none;user-select:none;
  transform:translateX(-50%) scaleX(var(--face,1)) rotate(var(--tilt,0deg));transform-origin:50% 100%;
  filter:drop-shadow(0 0 1.5px rgba(255,200,140,.75)) drop-shadow(0 0 9px rgba(170,90,255,.45)) drop-shadow(0 6px 6px rgba(0,0,0,.55));}
.ar-crow.is-sitting .ar-crow-pic{height:66px;width:auto;animation:arCrowBreathe 3.2s ease-in-out infinite alternate;}
.ar-crow.is-flying .ar-crow-pic{width:104px;height:auto;bottom:-14px;transform-origin:50% 70%;}
@keyframes arCrowBreathe{from{scale:1 1;}to{scale:1.02 1.035;}}
.ar-crow .ar-carried{left:-15px;top:0;transform:rotate(12deg);}
.ar-carried.is-falling{z-index:1;}
@media (max-width:700px){.ar-crow.is-sitting .ar-crow-pic{height:46px;}.ar-crow.is-flying .ar-crow-pic{width:74px;bottom:-10px;}}
/* Prey the cat leaps at starts. */
.is-startled{animation:arStartle .5s ease-out;}
@keyframes arStartle{30%{translate:0 -16px;}}
/* The black cat (arcana.js): walks past on four legs, crouches, leaps and swipes. */
.ar-cat{position:absolute;left:-50px;top:-50px;width:100px;height:60px;fill:#060308;overflow:visible;
  filter:drop-shadow(0 0 4px rgba(150,110,255,.45));}
.ar-cat.is-left{scale:-1 1;}
.ar-cat-all{transform-origin:0 8px;transition:transform .25s ease-out;}
.ar-cat.is-walk .ar-cat-all{animation:arCatBob .3s ease-in-out infinite alternate;}
@keyframes arCatBob{from{translate:0 0;}to{translate:0 -1.5px;}}
.ar-cat.is-crouch .ar-cat-all{transform:scale(1.08,.78);}
.ar-cat.is-leap .ar-cat-all{transform:rotate(-24deg) scale(1.12,.92);}
.ar-cat .ar-cat-leg{fill:none;stroke:#060308;stroke-width:4;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 0;}
.ar-cat .ar-cat-leg.is-far{stroke:#1a1020;}
.ar-cat.is-walk .ar-cat-leg-a{animation:arCatStep .3s ease-in-out infinite alternate;}
.ar-cat.is-walk .ar-cat-leg-b{animation:arCatStep .3s ease-in-out infinite alternate-reverse;}
@keyframes arCatStep{from{transform:rotate(-24deg);}to{transform:rotate(24deg);}}
.ar-cat.is-leap .ar-cat-leg{transform:rotate(40deg);}
.ar-cat .ar-cat-tail{fill:none;stroke:#060308;stroke-width:5;stroke-linecap:round;transform-box:fill-box;transform-origin:100% 100%;
  animation:arTail 2.4s ease-in-out infinite alternate;}
.ar-cat.is-crouch .ar-cat-tail{animation-duration:.25s;}
@keyframes arTail{from{transform:rotate(-12deg);}to{transform:rotate(14deg);}}
.ar-cat .ar-cat-paw{fill:none;stroke:#060308;stroke-width:4.5;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:0 100%;}
.ar-cat.is-swipe .ar-cat-paw{opacity:1;animation:arSwipe .2s ease-in-out 3 alternate;}
@keyframes arSwipe{from{transform:rotate(30deg);}to{transform:rotate(-30deg);}}
.ar-cat .ar-cat-eye{fill:#C9F24E;filter:drop-shadow(0 0 2px #C9F24E);}
/* Her side table with the specimen jars, and her spell book on its stand. */
/* Inside the ring, clear of the cards on either side (owner, 2026-11-08). */
.ar-shelf{position:absolute;left:246px;top:162px;width:150px;height:190px;overflow:visible;transform:scale(.88);transform-origin:0 100%;
  filter:drop-shadow(0 0 10px rgba(110,255,170,.25)) drop-shadow(0 8px 10px rgba(0,0,0,.6));}
.ar-bub{fill:rgba(220,255,235,.75);transform-box:fill-box;animation:arBubble 2.6s ease-in infinite;}
.ar-bub-2{animation-delay:-.9s;}.ar-bub-3{animation-delay:-1.7s;}
@keyframes arBubble{0%{transform:translateY(0);opacity:0;}15%{opacity:1;}100%{transform:translateY(-34px);opacity:0;}}
.ar-book{position:absolute;left:-158px;top:206px;width:140px;height:130px;overflow:visible;transform:scale(.9);transform-origin:100% 100%;
  filter:drop-shadow(0 0 12px rgba(176,108,255,.35)) drop-shadow(0 8px 10px rgba(0,0,0,.6));}
.ar-book-ink{stroke:#9b4dff;stroke-width:2;filter:drop-shadow(0 0 2px #c58cff);animation:arInk 3s ease-in-out infinite alternate;}
@keyframes arInk{from{opacity:.55;}to{opacity:1;}}
.ar-book-page{transform-origin:70px 50px;animation:arPage 9s ease-in-out infinite;}
@keyframes arPage{0%,72%{transform:scaleX(1);opacity:1;}88%{transform:scaleX(-1);opacity:1;}89%,100%{transform:scaleX(-1);opacity:0;}}
@media (max-width:900px){.ar-shelf,.ar-book{display:none;}}
/* While she thinks (arcana.js, thinking()): circles of signs turn behind her,
   lightning runs from her fingers into the ball, sparks spiral up, her eyes
   blaze, her aura shifts, and she rises a little off her seat. */
.ar-magic{position:absolute;left:50%;top:150px;width:300px;height:300px;margin:-150px 0 0 -150px;overflow:visible;
  opacity:0;transform:scale(.55);transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
  fill:none;filter:drop-shadow(0 0 6px rgba(190,120,255,.9));}
.ar-magic circle,.ar-magic path{stroke:rgba(214,170,255,.7);stroke-width:1.2;}
.ar-magic text{fill:#FFD27A;font-size:15px;letter-spacing:2px;}
.ar-magic-a,.ar-magic-b{transform-box:view-box;transform-origin:150px 150px;}
.ar-oracle.is-thinking .ar-magic{opacity:1;transform:scale(1);}
.ar-oracle.is-thinking .ar-magic-a{animation:arTurn 16s linear infinite;}
.ar-oracle.is-thinking .ar-magic-b{animation:arTurn 11s linear infinite reverse;}
@keyframes arTurn{to{transform:rotate(360deg);}}
.ar-bolts{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;opacity:0;fill:none;
  stroke:#DDF0FF;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 0 3px #8FD0FF) drop-shadow(0 0 8px #9B4DFF);}
.ar-oracle.is-thinking .ar-bolts{opacity:1;}
.ar-oracle.is-thinking .ar-bolts path{animation:arBolt .9s steps(1) infinite;}
.ar-bolts path:nth-child(2){animation-delay:-.3s !important;}.ar-bolts path:nth-child(3){animation-delay:-.55s !important;}
.ar-bolts path:nth-child(4){animation-delay:-.75s !important;}
@keyframes arBolt{0%{opacity:1;}20%{opacity:0;}35%{opacity:1;}50%{opacity:.2;}65%{opacity:0;}80%{opacity:1;}}
.ar-sparks{position:absolute;left:50%;top:262px;width:0;height:0;z-index:2;opacity:0;transition:opacity .6s ease;}
.ar-oracle.is-thinking .ar-sparks{opacity:1;}
.ar-sparks b{position:absolute;left:-7px;top:-7px;font-size:14px;line-height:14px;color:#FFD27A;
  text-shadow:0 0 8px #FF9A3C,0 0 14px #9B4DFF;animation:arSpark 3.2s linear infinite;}
@keyframes arSpark{0%{transform:rotate(var(--a)) translate(26px,0) scale(.4);opacity:0;}
  15%{opacity:1;}100%{transform:rotate(calc(var(--a) + 220deg)) translate(96px,-150px) scale(1.15);opacity:0;}}
.ar-sparks b:nth-child(1){--a:0deg;animation-delay:-0.00s;}
.ar-sparks b:nth-child(2){--a:30deg;animation-delay:-0.27s;}
.ar-sparks b:nth-child(3){--a:60deg;animation-delay:-0.54s;}
.ar-sparks b:nth-child(4){--a:90deg;animation-delay:-0.81s;}
.ar-sparks b:nth-child(5){--a:120deg;animation-delay:-1.08s;}
.ar-sparks b:nth-child(6){--a:150deg;animation-delay:-1.35s;}
.ar-sparks b:nth-child(7){--a:180deg;animation-delay:-1.62s;}
.ar-sparks b:nth-child(8){--a:210deg;animation-delay:-1.89s;}
.ar-sparks b:nth-child(9){--a:240deg;animation-delay:-2.16s;}
.ar-sparks b:nth-child(10){--a:270deg;animation-delay:-2.43s;}
.ar-sparks b:nth-child(11){--a:300deg;animation-delay:-2.70s;}
.ar-sparks b:nth-child(12){--a:330deg;animation-delay:-2.97s;}
.ar-oracle.is-thinking .ar-teller,.ar-oracle.is-thinking .ar-teller-img,.ar-oracle.is-thinking .ar-hands{animation-name:arBreathe,arLevitate;
  animation-duration:6s,2.6s;animation-timing-function:ease-in-out,ease-in-out;animation-iteration-count:infinite,infinite;
  animation-direction:normal,alternate;}
@keyframes arLevitate{from{translate:0 0;}to{translate:0 -9px;}}
.ar-oracle.is-thinking .ar-eyes{filter:brightness(1.9) drop-shadow(0 0 6px #FF7A1A);}
.ar-oracle.is-thinking .ar-aura{animation:arAuraShift 4s linear infinite;}
@keyframes arAuraShift{from{filter:hue-rotate(0deg);scale:1;}50%{scale:1.12;}to{filter:hue-rotate(360deg);scale:1;}}
.ar-oracle.is-thinking .ar-bub{animation-duration:.9s;}
.ar-oracle.is-thinking .ar-book-page{animation-duration:2.2s;}
.ar-oracle.is-thinking .ar-alien-eye{fill:#7CFF6A;filter:drop-shadow(0 0 3px #7CFF6A);}
/* Smoke curling up from the ball. */
.ar-smoke{position:absolute;left:50%;top:200px;width:0;height:0;}
.ar-smoke i{position:absolute;left:-18px;top:0;width:36px;height:36px;border-radius:50%;background:rgba(190,170,230,.25);filter:blur(10px);
  animation:arSmoke 7s ease-out infinite;}
.ar-smoke i:nth-child(2){animation-delay:-1.8s;left:-6px;}
.ar-smoke i:nth-child(3){animation-delay:-3.6s;left:-26px;}
.ar-smoke i:nth-child(4){animation-delay:-5.2s;left:-12px;background:rgba(200,60,80,.2);}
@keyframes arSmoke{0%{transform:translate(0,0) scale(.6);opacity:0;}15%{opacity:.8;}100%{transform:translate(var(--sx,18px),-200px) scale(2.6);opacity:0;}}
.ar-smoke i:nth-child(odd){--sx:-22px;}
.ar-runes{position:absolute;left:50%;top:262px;width:0;height:0;animation:arSwirl 14s linear infinite;}
.ar-runes b{position:absolute;left:-9px;top:-9px;width:18px;height:18px;font-size:16px;line-height:18px;text-align:center;color:#FFC08A;
  text-shadow:0 0 8px rgba(255,110,40,.9);}
.ar-runes b:nth-child(1){transform:translate(110px,0);}.ar-runes b:nth-child(2){transform:translate(-110px,0);}
.ar-runes b:nth-child(3){transform:translate(84px,34px);}.ar-runes b:nth-child(4){transform:translate(-84px,-34px);}
/* Speaking, or calling a card back: the eyes flare, the ball burns. */
.ar-oracle.is-speaking .ar-orb,.ar-oracle.is-summoning .ar-orb{box-shadow:0 0 70px 22px rgba(255,140,60,.75),0 0 150px 46px rgba(158,60,255,.45),inset -14px -18px 40px rgba(0,0,0,.4);
  animation:arOrbBob 6s ease-in-out infinite alternate,arOrbBlaze .9s ease-in-out infinite alternate;}
.ar-oracle.is-speaking .ar-orb i:nth-child(3),.ar-oracle.is-summoning .ar-orb i:nth-child(3){animation-duration:.5s;}
.ar-oracle.is-speaking .ar-eyes ellipse,.ar-oracle.is-summoning .ar-eyes ellipse{animation:none;opacity:1;transform:scale(1.6);}
.ar-oracle.is-summoning .ar-aura{animation:none;transform:scale(1.35);opacity:1;
  background:radial-gradient(closest-side,rgba(255,80,40,.5),rgba(150,30,200,.25) 55%,transparent);transition:transform .4s,opacity .4s;}

/* Embers rising through the ring; a shooting star now and then. */
.ar-motes{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.ar-motes i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#FFD27A;box-shadow:0 0 8px 2px rgba(255,120,40,.85);
  opacity:0;animation:arMote var(--md,9s) linear var(--mo,0s) infinite;}
.ar-motes i:nth-child(3n){background:#ff8a5a;box-shadow:0 0 8px 2px rgba(220,40,40,.8);}
@keyframes arMote{0%{opacity:0;transform:translate(0,0);}10%{opacity:.9;}100%{opacity:0;transform:translate(var(--mx,20px),calc(-1 * var(--mh,380px)));}}
.ar-shoot{position:absolute;width:140px;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff);box-shadow:0 0 8px #fff;transform:rotate(20deg);animation:arShoot 1.1s ease-out forwards;}
@keyframes arShoot{from{opacity:0;translate:0 0;}15%{opacity:1;}to{opacity:0;translate:420px 150px;}}

/* ---- The oracle's reading (written by the language model on the server) ---- */
.ar-voice{position:relative;margin-top:var(--s4);padding:26px 30px;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgba(80,20,60,.55),rgba(20,10,48,.8));border:1px solid rgba(255,170,100,.35);
  box-shadow:0 0 50px -18px rgba(255,110,40,.5);}
.ar-voice-title{margin:0 0 10px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#FFC454;}
.ar-voice-orb{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#B48CFF 45%,#3A1D8F);
  box-shadow:0 0 12px 3px rgba(180,140,255,.7);animation:arCore 1.6s ease-in-out infinite alternate;}
.ar-voice-text{margin:0;color:#F3EEFF;font-size:18px;line-height:1.7;white-space:pre-wrap;min-height:1.7em;}
.ar-voice-text::after{content:"";display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-2px;background:#FFC454;
  animation:arBlink 1s steps(1) infinite;}
@keyframes arBlink{50%{opacity:0}}
/* While it thinks: what the oracle is doing, a line at a time, and no cursor yet. */
.ar-voice.is-thinking .ar-voice-text{display:none;}
.ar-voice-wait{margin:0;display:flex;align-items:center;gap:12px;color:#D9C8FF;font-size:18px;font-style:italic;line-height:1.6;}
.ar-voice-wait span:last-child{animation:arWaitIn .6s ease both;}
@keyframes arWaitIn{from{opacity:0;transform:translateY(4px);filter:blur(2px);}to{opacity:1;transform:none;filter:none;}}
.ar-voice-spark{flex:none;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff,#ffb36b 35%,#9b4dff 70%,transparent 72%);
  box-shadow:0 0 14px 4px rgba(255,140,60,.6),0 0 28px 8px rgba(155,77,255,.35);animation:arSpark 1.2s ease-in-out infinite alternate;}
@keyframes arSpark{from{transform:scale(.8);opacity:.7;}to{transform:scale(1.15);opacity:1;}}
.ar-voice.is-thinking{box-shadow:0 0 60px -14px rgba(255,110,40,.7),0 0 90px -30px rgba(155,77,255,.6);}
.ar-voice-note{margin:14px 0 0;font-size:12.5px;color:#9C92C9;}

@media (max-width:900px){
  .ar-head{grid-template-columns:1fr;align-items:start;}
}
@media (max-width:700px){
  .ar-ring-wrap{--cw:84px;perspective:1000px;height:calc(var(--cw) * 1.67 + 210px);}
  .ar-ring{top:120px;}
  .ar-oracle{scale:.72;}
  .ar-view{bottom:4px;}
}
@media (prefers-reduced-motion:reduce){
  .ar-sky i,.ar-burst i,.ar-read,.ar-orb,.ar-orb i,.ar-runes,.ar-aura,.ar-teller,.ar-eyes,.ar-eyes ellipse,.ar-sigil,.ar-smoke i,
  .ar-fog i,.ar-head h1,.ar-skull-eye,.ar-card::after,.ar-motes i,.ar-slot.is-turned .ar-flip,.ar-slot.is-turned .ar-face-front::after,
  .ar-voice-orb,.ar-voice-text::after,.ar-voice-spark,.ar-voice-wait span:last-child{animation:none;}
  .ar-card.is-burn img,.ar-card.is-spin img,.ar-card.is-smoke img,.ar-card{animation:none;}
  .ar-dragon,.ar-bats,.ar-breath,.ar-critters,.ar-glass,.ar-magic,.ar-bolts,.ar-sparks{display:none;}
  .ar-crow-pic{animation:none;}
  .ar-bub,.ar-book-page,.ar-book-ink{animation:none;}
  .ar-face{transition:none;}
}

/* On phones and tablets (arcana.js, lite): the same scene with less to draw. Blurs,
   big glows that repaint every frame, the shine and bounce on all 22 cards and the
   gilded layers (also fewer stars and embers) cost more than a phone can spare. A
   swipe up or down scrolls the page, sideways turns the ring, and cards hold still to be tapped. */
.ar-lite .ar-ring-wrap,.ar-lite .ar-card{touch-action:pan-y;}
.ar-lite .ar-card{animation:none;}
.ar-lite .ar-card:hover img{transform:none;}
.ar-lite .ar-card::before{transform:translateZ(-1px) !important;}
.ar-lite .ar-card::after{display:none;}
.ar-lite .ar-card img{box-shadow:0 0 0 1px rgba(255,214,140,.55);}
.ar-lite .ar-fog i{filter:none;}
.ar-lite .ar-fog i:nth-child(n+2),.ar-lite .ar-smoke,.ar-lite .ar-orb i:nth-child(2){display:none;}
.ar-lite .ar-aura,.ar-lite .ar-hands,.ar-lite .ar-table,.ar-lite .ar-dragon,.ar-lite .ar-bat,.ar-lite .ar-sigil,.ar-lite .ar-orb i,
.ar-lite .ar-shards.is-smoke i,.ar-lite .ar-ring-wrap::after{filter:none;}
.ar-lite .ar-head h1{animation:none;filter:none;}
.ar-lite .ar-sigil{animation:none;}
.ar-lite .ar-orb{animation:arOrbBob 6s ease-in-out infinite alternate;box-shadow:0 0 40px 10px rgba(158,90,255,.55),inset -14px -18px 40px rgba(0,0,0,.6);}
.ar-lite .ar-oracle.is-speaking .ar-orb,.ar-lite .ar-oracle.is-summoning .ar-orb{animation:arOrbBob 6s ease-in-out infinite alternate;
  box-shadow:0 0 56px 18px rgba(255,140,60,.75),inset -14px -18px 40px rgba(0,0,0,.4);}
.ar-lite .ar-view-btn{width:44px;height:44px;}

/* A painted fortune teller, when there is one: it takes the drawn one's place. */
.ar-teller-img{position:absolute;left:-20%;bottom:0;width:140%;height:auto;pointer-events:none;
  filter:drop-shadow(0 0 30px rgba(120,20,60,.6));animation:arBreathe 6s ease-in-out infinite;transform-origin:50% 100%;}
.ar-teller.is-hidden,.ar-hands.is-hidden{display:none;}
/* A card in flight: pulled into the fortune teller's hands, then thrown to its place. */
.ar-fly{position:fixed;left:0;top:0;z-index:60;pointer-events:none;border-radius:9px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,214,140,.7),0 0 30px 6px rgba(255,120,40,.55);will-change:transform;}
.ar-fly img{display:block;width:100%;height:100%;object-fit:cover;}
@media (prefers-reduced-motion:reduce){ .ar-teller-img{animation:none;} }