/* Visual refinement pass: the illustrated oracle, full-fidelity card art, and softer motion. */
.oracle-illustration{
  position:absolute;z-index:1;pointer-events:none;left:50%;top:6%;width:clamp(320px,32vw,510px);height:min(87vh,760px);
  display:grid;place-items:center;filter:drop-shadow(0 24px 34px rgba(4,3,13,.72));
  transition:opacity .8s ease,transform 1.2s cubic-bezier(.22,.7,.2,1)
}
.oracle-illustration img{width:100%;height:100%;object-fit:contain;object-position:center bottom;transform-origin:50% 88%;animation:oracle-breathe 7s ease-in-out infinite}
.scene-shade{z-index:2;background:linear-gradient(90deg,rgba(13,15,24,.3),transparent 54%),linear-gradient(180deg,rgba(13,15,24,.1),transparent 48%,#10111a 98%)}
.in-ritual .oracle-illustration{opacity:.68;transform:translateX(3%) scale(.95)}
.touring .oracle-illustration{opacity:0;transform:scale(.92)}

/* Preserve the exact RWS scan in the card: the decorative frame is an edge treatment,
   never a crop or a colour filter over the artwork. */
.portrait{background:linear-gradient(145deg,#2b2030,#141321 65%,#3a2840);border-radius:8px;box-shadow:inset 0 0 0 1px rgba(240,210,157,.3),inset 0 0 22px rgba(0,0,0,.48),0 12px 26px rgba(0,0,0,.38)}
.portrait:before{opacity:.08;mix-blend-mode:screen}
.portrait-art{inset:4.2% 4.2% 4.2%;border:1px solid rgba(233,205,154,.72);border-radius:4px;background:#e7d8bc;box-shadow:0 0 0 3px rgba(20,15,30,.65),0 0 18px rgba(226,192,125,.12)}
.portrait-art img{width:100%;height:100%;object-fit:contain;object-position:center;filter:none;image-rendering:auto}
.portrait:after{inset:4.2%;border-radius:4px;background:linear-gradient(135deg,rgba(255,238,195,.12),transparent 29%,transparent 68%,rgba(22,12,35,.17));mix-blend-mode:screen}
.portrait-frame{opacity:.82}
.portrait-number,.portrait-title,.portrait-en{display:none}
.skin-classic .portrait{background:#e7d8bc;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.skin-classic .portrait-art{inset:2.8%;background:#e7d8bc;border:0;box-shadow:none}
.skin-classic .portrait-art img{object-fit:contain;filter:none}
.skin-classic .portrait-frame,.skin-classic .portrait:after{display:none}

.card-visual{box-shadow:0 16px 28px rgba(0,0,0,.58),0 0 0 1px rgba(216,183,121,.12);will-change:transform,box-shadow,filter}
.card-inner{transition:transform 1.08s cubic-bezier(.16,1,.3,1);will-change:transform}
.card-side{transform-style:preserve-3d}
.card-visual:hover{filter:brightness(1.06);box-shadow:0 20px 34px rgba(0,0,0,.64),0 0 28px rgba(215,183,120,.18)}
.card-visual.is-flipping{animation:card-settle 1.08s cubic-bezier(.22,1,.36,1) both}
.card-visual.revealed .card-front{animation:front-bloom 1.2s ease-out both}
.card-visual.revealed:after{box-shadow:0 0 36px rgba(232,204,151,.3),inset 0 0 0 1px rgba(245,216,157,.55);animation:reveal-glow 1.65s ease-out both}
.fan-card{box-shadow:0 8px 17px rgba(0,0,0,.62),0 0 0 1px rgba(221,186,124,.16);margin-top:0;translate:0 0;transition:translate .36s cubic-bezier(.22,1,.36,1),filter .3s,opacity .2s,box-shadow .3s}
.fan-card:hover,.fan-card:focus-visible{margin-top:0;translate:0 -24px;filter:brightness(1.22) saturate(1.07);box-shadow:0 0 28px rgba(223,192,131,.35),0 18px 19px rgba(0,0,0,.72)}
.fan-card.chosen{translate:0 0}
.fan-enter{animation:fan-unfurl .85s cubic-bezier(.22,1,.36,1) var(--fan-delay,0ms) backwards}
.card-front .portrait{transition:none}
.card-visual.reversed .portrait{transform:rotate(180deg)}
.flying-card{box-shadow:0 0 28px rgba(230,198,133,.42),0 18px 25px rgba(0,0,0,.55);will-change:transform,opacity}
.shuffle-card{box-shadow:0 8px 16px rgba(0,0,0,.55),0 0 0 1px rgba(221,186,124,.18)}

@keyframes oracle-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.008)}}
@keyframes card-settle{0%{translate:0 0;scale:1}38%{translate:0 -16px;scale:1.06}100%{translate:0 0;scale:1}}
@keyframes fan-unfurl{from{opacity:0;transform:translate(0,20px) rotate(0deg)}to{opacity:1;transform:translate(calc(var(--fan-x)*1px),calc(var(--fan-y)*1px)) rotate(calc(var(--fan-a)*1deg))}}
@keyframes front-bloom{0%{filter:brightness(.72) saturate(.72)}45%{filter:brightness(1.12) saturate(1.06)}100%{filter:brightness(1) saturate(1)}}

@media(max-width:800px){
  .oracle-illustration{left:47%;top:9%;width:min(62vw,360px);height:min(70vh,590px);opacity:.88}
  .in-ritual .oracle-illustration{opacity:.42;transform:translateX(2%) scale(.88)}
}
@media(max-width:560px){
  .oracle-illustration{left:auto;right:-3%;top:8%;width:58vw;height:340px;opacity:.7}
  .in-ritual .oracle-illustration{opacity:.3;transform:translateX(0) scale(.86)}
}
@media(prefers-reduced-motion:reduce){.oracle-illustration img{animation:none}.card-visual.revealed,.card-visual.revealed .card-front{animation:none}}



/* User-provided oracle artwork: layered into the room with a soft edge so the 3D architecture remains visible. */
.oracle-illustration{left:58%;top:0;width:min(55vw,820px);height:100vh;display:block;filter:drop-shadow(0 22px 36px rgba(3,2,12,.72));perspective:900px}
.oracle-illustration:before{content:"";position:absolute;inset:8% 8% 6%;background:radial-gradient(ellipse at 50% 42%,rgba(135,118,214,.34),transparent 58%);filter:blur(26px);opacity:.9;transform:translateZ(-40px)}
.oracle-still{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 37%;transform-origin:50% 72%;animation:oracle-breathe 8s ease-in-out infinite;mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 88%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,#000 88%,transparent 100%);-webkit-mask-composite:source-in}
.oracle-glint{position:absolute;inset:12% 10% 8%;pointer-events:none;background:linear-gradient(112deg,transparent 34%,rgba(222,198,255,.16) 48%,transparent 58%);mix-blend-mode:screen;opacity:.5;animation:oracle-glint 9s ease-in-out infinite}
.in-ritual .oracle-illustration{opacity:.35;transform:translateX(5%) scale(.96)}
.touring .oracle-illustration{opacity:0;transform:scale(.94)}
@keyframes oracle-glint{0%,100%{opacity:0;transform:translateX(-10%)}45%{opacity:.5}70%{opacity:0;transform:translateX(10%)}}
@media(max-width:800px){.oracle-illustration{left:44%;top:2%;width:76vw;height:78vh;opacity:.82}.in-ritual .oracle-illustration{opacity:.28;transform:scale(.9)}}
@media(max-width:560px){.oracle-illustration{left:22%;top:4%;width:92vw;height:62vh;opacity:.68}.in-ritual .oracle-illustration{opacity:.2;transform:scale(.86)}.hero-cards{left:35%}}