/* Local plumes rise from the table and conceal the scene change at their peak. */
.ritual{transition:none}
.scene-retired .ritual{display:none}
.ritual-shifting .orb-energy,.ritual-shifting .orb-halo{animation:none!important;opacity:0!important;transition:opacity .8s ease}
.ritual-shifting .energy-wisp{animation-play-state:paused}
.stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 72%,#44234042,transparent 57%),radial-gradient(ellipse at 0 60%,#a6682620,transparent 38%),radial-gradient(ellipse at 100% 60%,#a668261a,transparent 38%),linear-gradient(180deg,#0c071600,#0d0718a8 62%,#100a17);transition:opacity 1.2s ease}
.scene-retired::after{opacity:1}
.dialogue.leaving-conversation{opacity:0;transition:opacity .24s ease}
.dialogue.draw-layout{display:block;flex:none;width:min(1060px,calc(100% - 32px));margin:0 auto 32px;padding-top:12px;opacity:1;transform:none}
.draw-layout .draw-panel{margin:0;text-align:center}
.draw-heading{position:relative;max-width:580px;margin:0 auto 24px;animation:ritual-arrive .35s .1s both}
.draw-eyebrow{margin:0 0 12px;color:var(--gold);font-size:10px;letter-spacing:.23em;text-transform:uppercase}
.draw-heading h1{margin:0;color:var(--ivory);font:400 clamp(37px,4.4vw,54px)/1.12 Georgia,serif;letter-spacing:-.035em}
.draw-heading h1:focus{outline:none}
.draw-guidance{max-width:440px;min-height:38px;margin:14px auto 0;color:#c2b2ce;font-size:12px;line-height:1.7;text-wrap:balance}
.draw-layout .cards{width:min(394px,92%);gap:24px;margin:0 auto;padding-top:0;transition:width .65s ease,gap .65s ease,padding-top .65s ease;animation:ritual-arrive .35s .1s both}
.draw-layout .card{gap:9px}
.draw-layout .card small{min-height:22px;font-size:9px;letter-spacing:.04em}
.draw-layout .card strong{min-height:22px;font-size:14px;color:#d8c8b7}
.draw-panel:not(.is-revealing) .card-artwork{outline:none}
.draw-panel .card-back{transform:rotate(180deg)}
.slot-frame{display:grid;place-items:center;width:100%;aspect-ratio:7/12;border:1px solid #cfad7750;border-radius:8px;background:linear-gradient(155deg,#1c112a66,#100a1744);box-shadow:inset 0 0 24px #d7a4ef05,0 0 24px #d7a4ef04;position:relative}
.slot-frame::before{content:"";position:absolute;inset:7px;border:1px solid #cfad771c;border-radius:4px}
.slot-number{color:#d9b77e;font:400 clamp(34px,4vw,48px)/1 Georgia,serif;letter-spacing:.04em;text-shadow:0 0 20px #d9b77e55}
.draw-layout .card small{order:2}
.draw-layout .card strong{order:3}
.draw-layout .card .slot-frame,.draw-layout .card .card-artwork{order:1}
/* Reserve the card-name lines before the first draw so the fan stays put. */
.draw-panel:not(.is-revealing) .card strong,.draw-panel:not(.is-revealing) .empty-slot::after{min-height:3.6em}
.draw-panel:not(.is-revealing) .empty-slot::after{content:"";order:3;display:block;font-size:14px}
.draw-layout .draw-status{margin:18px 0 0;min-height:20px;color:#d1b588;font-size:10px;letter-spacing:.09em}
.fan-table{position:relative;height:340px;margin:24px auto 0;max-width:960px;transition:opacity .45s ease,transform .6s cubic-bezier(.4,0,.8,1);isolation:isolate}
.table-orbit{position:absolute;inset:40px 3% 0;border-radius:50%;background:radial-gradient(ellipse,#0004,transparent 68%);border-bottom:1px solid #c99a5e12;pointer-events:none}
.fan-viewport{--fan-step:74px;--fan-width:108px;--fan-fade:clamp(24px,6vw,64px);position:relative;z-index:1;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x;cursor:grab;mask-image:linear-gradient(to right,transparent,#000 var(--fan-fade),#000 calc(100% - var(--fan-fade)),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fan-fade),#000 calc(100% - var(--fan-fade)),transparent);animation:deal-fan .55s .05s both}
.fan-viewport::-webkit-scrollbar{display:none}
.fan-viewport:active{cursor:grabbing}
.fan-viewport.is-busy{pointer-events:none;overflow-x:hidden}
.fan-hints{display:flex;align-items:center;justify-content:center;gap:24px;min-height:44px;opacity:0;pointer-events:none;transition:opacity .4s ease}
.fan-hints.is-visible,.fan-hints:has(button:focus-visible){opacity:1}
.fan-hints button{width:112px;height:44px;display:grid;place-items:center;padding:8px;border:0;border-radius:8px;background:transparent;color:#e1ceb3;pointer-events:none}
.fan-hints.is-visible button,.fan-hints button:focus-visible{pointer-events:auto}
.fan-hints #previous-card{--hint-drift:-3px}
.fan-hints #next-card{--hint-drift:3px}
.fan-hints svg{width:96px;height:24px;stroke-width:1.35;opacity:.6;filter:drop-shadow(0 0 4px #f1d4af66) drop-shadow(0 0 10px #d7b9eb44);animation:fan-hint-drift 2.5s ease-in-out infinite;animation-play-state:paused}
.fan-hints #previous-card svg{mask-image:linear-gradient(90deg,#000 0%,#000d 35%,#0007 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000d 35%,#0007 100%)}
.fan-hints #next-card svg{mask-image:linear-gradient(270deg,#000 0%,#000d 35%,#0007 100%);-webkit-mask-image:linear-gradient(270deg,#000 0%,#000d 35%,#0007 100%)}
.fan-hints.is-visible svg{animation-play-state:running}
.fan-hints button:disabled{visibility:hidden}
.fan-hints.is-entering button:disabled{visibility:visible}
.fan-hints button:focus-visible{outline:1px solid var(--gold);outline-offset:2px;background:#1c112ae6}
.fan-hints button:focus-visible svg{animation:none;opacity:.85}
@keyframes fan-hint-drift{0%,100%{transform:translateX(0);opacity:.6}50%{transform:translateX(var(--hint-drift));opacity:.9}}
.card-fan{--fan-gutter:0px;position:relative;width:calc(77 * var(--fan-step) + 2 * var(--fan-gutter) + var(--fan-width));height:100%}
.fan-card{position:absolute;left:calc(var(--index) * var(--fan-step) + var(--fan-gutter));top:36px;width:var(--fan-width);aspect-ratio:7/12;margin:0;padding:0;border:0;border-radius:5px;background:none;transform:translateY(var(--arc,0px)) rotate(var(--angle,180deg));transform-origin:center;touch-action:pan-x;-webkit-tap-highlight-color:transparent}
.fan-card-back{display:block;width:100%;height:100%;border-radius:inherit;background:url('assets/tarot/card-back.svg') center/100% 100%;box-shadow:0 0 0 1px #0b0810;transition:transform .18s cubic-bezier(.2,.65,.25,1)}
.fan-card:disabled{cursor:default}
.fan-card:focus-visible{outline:none}
/* Keep the button’s hit area and stacking order fixed while its artwork rises. */
.fan-card.is-current .fan-card-back{transform:translateY(10px);transition-delay:.06s}
.fan-card.is-picked{visibility:hidden;pointer-events:none}
.fan-card.is-drawing{pointer-events:none;will-change:transform}
.draw-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:0;padding:4px 0 16px;transition:opacity .25s}
.draw-patience{margin:0;color:#ad99b8;font:italic 14px/1.5 Georgia,serif}
.leaving-fan .fan-table{opacity:0;transform:translateY(110px);pointer-events:none}
.leaving-fan .draw-footer{opacity:0;pointer-events:none}
.draw-layout .reading-chat{max-width:600px;margin:28px auto 0}
.draw-panel.is-revealing .draw-guidance{max-width:430px}
.draw-panel.is-revealing .cards{width:min(600px,100%);max-width:100%;gap:clamp(10px,3vw,28px);padding-top:clamp(20px,5svh,50px)}
.ritual-mist{--plume-size:clamp(460px,66vw,860px);position:fixed;z-index:20;inset:0;overflow:hidden;pointer-events:none;opacity:0;contain:strict}
.ritual-mist::before{content:"";position:absolute;inset:-35% -10%;opacity:0;background:radial-gradient(ellipse at 24% 78%,#685577 0%,transparent 53%),radial-gradient(ellipse at 76% 23%,#584662 0%,transparent 58%),#302637;-webkit-mask-image:linear-gradient(to top,#000 83%,transparent);mask-image:linear-gradient(to top,#000 83%,transparent)}
.ritual-mist span{
  --delay:0s;--source:-8vw;--drift:-24vw;--rise:-36vh;--turn:-24deg;
  --plume-width:var(--plume-size);--plume-height:var(--plume-size);
  --core-x:42%;--core-y:62%;--wing-x:68%;--wing-y:43%;--crest-x:37%;--crest-y:31%;
  position:absolute;left:calc(50% - var(--plume-width)/2);top:calc(76% - var(--plume-height)/2);
  width:var(--plume-width);height:var(--plume-height);opacity:0;
  background:
    radial-gradient(ellipse 45% 39% at var(--core-x) var(--core-y),#bca8ceaa 0%,#8b769f8c 37%,#5646694d 72%,transparent 100%),
    radial-gradient(ellipse 37% 32% at var(--wing-x) var(--wing-y),#c4b0d090 0%,#78658a70 46%,transparent 100%),
    radial-gradient(ellipse 32% 37% at var(--crest-x) var(--crest-y),#d8c9e34d 0%,#79668b65 48%,transparent 100%);
  filter:blur(12px)
}
.ritual-mist span:nth-child(2){--delay:.07s;--source:9vw;--drift:30vw;--rise:-23vh;--turn:38deg;--plume-width:calc(var(--plume-size)*.82);--plume-height:calc(var(--plume-size)*1.14);--core-x:60%;--core-y:54%;--wing-x:28%;--wing-y:67%;--crest-x:66%;--crest-y:26%}
.ritual-mist span:nth-child(3){--delay:.16s;--source:1vw;--drift:-4vw;--rise:-49vh;--turn:-51deg;--plume-width:calc(var(--plume-size)*1.16);--plume-height:calc(var(--plume-size)*.72);--core-x:34%;--core-y:51%;--wing-x:70%;--wing-y:68%;--crest-x:54%;--crest-y:29%}
.ritual-mist span:nth-child(4){--delay:.24s;--source:-16vw;--drift:-42vw;--rise:-17vh;--turn:22deg;--plume-width:calc(var(--plume-size)*.68);--plume-height:calc(var(--plume-size)*1.2);--core-x:53%;--core-y:69%;--wing-x:34%;--wing-y:34%;--crest-x:72%;--crest-y:40%}
.ritual-mist span:nth-child(5){--delay:.31s;--source:14vw;--drift:40vw;--rise:-40vh;--turn:64deg;--plume-width:calc(var(--plume-size)*1.12);--plume-height:calc(var(--plume-size)*.85);--core-x:67%;--core-y:57%;--wing-x:31%;--wing-y:53%;--crest-x:58%;--crest-y:22%}
.ritual-mist span:nth-child(6){--delay:.39s;--source:-3vw;--drift:13vw;--rise:-28vh;--turn:-35deg;--plume-width:calc(var(--plume-size)*.76);--plume-height:calc(var(--plume-size)*1.05);--core-x:37%;--core-y:48%;--wing-x:66%;--wing-y:71%;--crest-x:28%;--crest-y:26%}
.ritual-mist span:nth-child(7){--delay:.47s;--source:5vw;--drift:-18vw;--rise:-52vh;--turn:45deg;--plume-width:calc(var(--plume-size)*1.04);--plume-height:calc(var(--plume-size)*.8);--core-x:58%;--core-y:65%;--wing-x:28%;--wing-y:42%;--crest-x:74%;--crest-y:32%}
.ritual-shifting .ritual-mist{opacity:1}
.ritual-shifting .ritual-mist::before{animation:mist-cover 2s linear both;will-change:transform,opacity}
.ritual-shifting .ritual-mist span{animation:mist-rise 1.58s var(--delay) cubic-bezier(.34,.04,.35,1) both;will-change:transform,opacity}
@keyframes mist-cover{0%,18%{opacity:0;transform:translateY(100%)}22%{opacity:1;transform:translateY(55%)}46%,56%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(-7%)}}
@keyframes mist-rise{
  0%{opacity:0;transform:translate3d(var(--source),12vh,0) rotate(0deg) scale(.16,.24)}
  14%{opacity:.85}
  40%{opacity:.95}
  64%{opacity:.8;transform:translate3d(var(--drift),var(--rise),0) rotate(var(--turn)) scale(1.65,1.9)}
  100%{opacity:0;transform:translate3d(var(--drift),calc(var(--rise) - 20vh),0) rotate(calc(var(--turn) + 18deg)) scale(2.45,2.3)}
}
@keyframes ritual-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes deal-fan{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:700px){
  .dialogue.draw-layout{width:calc(100% - 24px);padding-top:8px;margin-bottom:16px}
  .draw-heading{margin-bottom:22px;padding:0 4px}
  .draw-eyebrow{font-size:9px;margin-bottom:8px}
  .draw-heading h1{font-size:clamp(30px,8.6vw,38px)}
  .draw-guidance{font-size:11px;max-width:300px;min-height:38px;margin-top:12px}
  .draw-layout .cards{width:100%;max-width:410px;gap:12px}
  .draw-layout .card{gap:7px}
  .draw-layout .card small{min-height:14px;font-size:8px}
  .draw-layout .card strong{font-size:12px;min-height:18px}
  .draw-panel:not(.is-revealing) .empty-slot::after{font-size:12px}
  .draw-layout .draw-status{margin-top:12px;font-size:10px}
  .fan-viewport{--fan-step:70px;--fan-width:var(--mobile-fan-width)}
  .fan-table{--mobile-fan-width:108px;height:calc(var(--mobile-fan-width) * 1.7143 + 94px);margin-top:16px}
  .fan-card{top:24px}
  .table-orbit{inset:40px 0 8px}
  .draw-footer{gap:4px;padding-top:0}
  .draw-patience{font-size:13px}
}
@media(max-width:360px){.fan-table{--mobile-fan-width:100px}.fan-viewport{--fan-step:64px}}
@media(min-width:410px) and (max-width:700px){.fan-table{--mobile-fan-width:118px}.fan-viewport{--fan-step:76px}}
@media(max-width:700px) and (max-height:700px){
  .stage.is-selecting{min-height:100svh}
  .stage.is-selecting .topbar{padding-block:4px}
  .dialogue.draw-layout{padding-top:0}
  .draw-heading{margin-bottom:8px}
  .draw-eyebrow{margin-bottom:6px}
  .draw-heading h1{font-size:30px}
  .draw-panel:not(.is-revealing) .cards{max-width:300px;gap:10px}
  .draw-layout .card{gap:5px}
  .draw-layout .draw-status{margin-top:6px;min-height:16px}
  .fan-table{height:calc(var(--mobile-fan-width) * 1.7143 + 84px);margin-top:8px}
  .draw-footer{gap:0}
}
@media(min-width:701px) and (max-height:950px){.dialogue.draw-layout{padding-top:0}.draw-heading{margin-bottom:24px}.draw-heading h1{font-size:43px}.draw-layout .cards{width:340px;gap:22px}.fan-table{margin-top:24px}}
@media(prefers-reduced-motion:reduce){
  .ritual,.stage::after,.dialogue.leaving-conversation,.fan-card-back,.fan-table,.draw-footer,.draw-layout .cards{transition:none!important}
  .draw-heading,.draw-layout .cards,.draw-layout .draw-status,.draw-footer,.fan-viewport{animation:none!important}
  .ritual-shifting .ritual-mist{animation:none;opacity:0}
  .ritual-shifting .ritual-mist span,.ritual-shifting .ritual-mist::before{animation:none}
}

@media(prefers-reduced-motion:reduce){.fan-hints{transition:none}.fan-hints svg{animation:none;opacity:.75}}
.transferring-card{position:absolute;left:0;top:0;z-index:0;display:block;border-radius:5px;pointer-events:none;perspective:1000px;will-change:transform}
.transfer-inner{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.transfer-face{position:absolute;inset:0;display:block;overflow:hidden;border-radius:5px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.transfer-back{background:url('assets/tarot/card-back.svg') center/100% 100%}
.transfer-front{background:#eee6d7;transform:rotateY(180deg) rotate(180deg)}
.transfer-front img{display:block;width:100%;height:100%;object-fit:contain}
.transferring-card.is-clear{z-index:2}

.fan-viewport:focus-visible{outline:1px solid var(--gold);outline-offset:3px;border-radius:12px}