/* Printed borders reach the physical card edge. A 2px gilded section joins faces. */
.card-shell { border-radius: 5px; --edge-metal: #ba9656; }
.card-front, .card-back { border: 0; border-radius: 5px; }
.card-front { padding: 0; transform: translateZ(1px); }
.card-front::before, .card-front::after { display: none; }
.card-art, .clarke-card .card-art { inset: 0; border-radius: 5px; }
.card-back { transform: rotateY(180deg) translateZ(1px); }
.flow-card .foil-canvas { transition: none; }
.card-edge { position: absolute; display: block; pointer-events: none; backface-visibility: visible; background: linear-gradient(90deg,#46331c,var(--edge-metal),#f2d397,var(--edge-metal)); }
.edge-left, .edge-right { width: 2px; height: 100%; top: 0; transform: rotateY(90deg); }
.edge-left { left: -1px; }
.edge-right { right: -1px; }
.edge-top, .edge-bottom { width: 100%; height: 2px; left: 0; transform: rotateX(90deg); }
.edge-top { top: -1px; }
.edge-bottom { bottom: -1px; }
.coverflow { --flow-card-height: calc(var(--flow-card-width) * 1.5); }
/* Match the 2:3 print in every front view; the former taller shells added a
   dark strip beyond the painted frame when the full image was contained. */
.viewer-stage > .card-shell,
.result-card .card-shell,
.result-card:only-child .card-shell { height: auto; aspect-ratio: 2 / 3; }
.card-top, .card-title { pointer-events: none; }
.clarke-card .card-top, .clarke-card .card-title { display: none; }
.result-card .card-art { inset: 0; }
.result-card .reading-reversed > .card-front { transform: translateZ(1px) rotateZ(180deg); }
.theme-back { --back-art-height: 100%; --back-image: url('./assets/backs-v2/atelier.webp'); }
.back-clarke { --back-image: url('./assets/backs-v12/twin-moons-symmetric.png'); --back-art-height: 100%; }
/* The complete back artwork, including its rim, is exactly invariant under 180-degree rotation. */
.back-clarke .back-half { clip-path: none; }
.back-clarke .back-half-turn { display: none; }
.back-classic { --back-image: url('./assets/backs-v2/classic.webp'); --back-art-height: 100%; }
.ritual-flow .card-back { transform: translateZ(1px); }
.ritual-breath { color: var(--gold); min-width: 72px; }
[data-motion-enable][hidden] { display: none; }
.ritual-page .flow-controls { margin-top: 0; }
/* Decoded, flat packets avoid nested 3D/blended layers on the cold first run. */
.shuffle-stack { width: min(240px, 36vw); height: auto; aspect-ratio: 2/3; margin: 65px auto 70px; perspective:none; isolation:isolate; visibility:hidden; }
.shuffle-stack[data-ready] { visibility:visible; }
.shuffle-stack > div { border-radius: 5px; animation:none !important; will-change:transform; transform-style:flat; contain:paint; box-shadow:1px 2px 0 #bb955c,0 4px 8px #0005; }
.shuffle-stack .card-back { transform: none; }
.shuffle-stack .back-finish { display:none; }
.shuffle-stage { display:grid; place-items:center; }
/* A modal keeps the selected card separate from the frozen, softened deck. */
.draw-reveal { --reveal-width: min(calc(100vw - 10px), calc((100dvh - 220px) * 2 / 3), 660px); position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; background: transparent; color: var(--cream); overflow: hidden; }
.draw-reveal::backdrop { background: #04080acb; backdrop-filter: blur(5px); }
.revealing-card { overflow: hidden; }
.reveal-layout { position: relative; min-height: 100%; display: grid; place-items: center; }
.reveal-lift { perspective: 1200px; transform-origin: center; }
.reveal-hit { display: block; position: relative; border: 0; padding: 0; width: var(--reveal-width); height: auto; aspect-ratio: 2/3; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; outline-offset: 3px; -webkit-tap-highlight-color: transparent; perspective: 1200px; }
.reveal-hit:disabled { opacity: 1; cursor: default; }
.reveal-hit > .card-shell { width: 100%; height: 100%; transition: none; box-shadow: 0 20px 40px #0009; }
.reveal-hit .card-title, .reveal-hit .card-top, .reveal-hit .angle-secret { display: none; }
.reveal-caption { position: absolute; top: calc(50% + var(--reveal-width) * .75 + 18px); width: 100%; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity .8s, transform .8s; pointer-events: none; }
.reveal-ready .reveal-caption { opacity: 1; transform: none; }
.reveal-placing .reveal-caption { opacity:0; transform:translateY(15px); transition-duration:.2s; }
.reveal-placing .reveal-lift { will-change:transform; }
.reveal-caption h2 { font: 25px/1.4 var(--serif); color: #f0d7a8; letter-spacing: 4px; margin: 0 0 9px; text-shadow: 0 0 14px #d4aa6966; }
.reveal-caption p { margin: 0; color: #c0b49b; font-size: 12px; line-height: 1.8; letter-spacing: 2px; }
.insight-wait { padding:28px 18px; border-block:1px solid var(--line); text-align:center; }
.insight-wait h2 { color:var(--gold); font:25px/1.8 var(--serif); }
.insight-offline,.insight-references { margin:20px 0; padding:16px 0; border-top:1px solid var(--line); }
.insight-offline > summary,.insight-references > summary { color:var(--gold); cursor:pointer; font-size:13px; }
/* Resting backgrounds should not occupy continuous animation or compositing work. */
.ambient .nebula, .ambient .dust, .side-orbit, .stage-ring { animation: none; }
@media (max-width: 600px) { .card-particles { display: none; } }
@media (max-width:600px) {
 .ritual-page { height:var(--usable-height); min-height:500px; padding:14px 0 8px; display:flex; flex-direction:column; align-items:center; overflow:hidden; }
 .ritual-page > .eyebrow,.ritual-page > h1,.ritual-page > .reading-lead { flex:none; margin:3px 16px; }
 .ritual-page > h1 { font-size:23px; line-height:1.5; }
 .ritual-page > .reading-lead { font-size:12px; line-height:1.7; }
 .ritual-progress { flex:none; margin:8px 0 0; }
 .ritual-picked { flex:none; height:30px; }
 .ritual-picked:empty { height:0; }
 .ritual-flow { flex:1; min-height:200px; height:auto; container-type:size; --flow-card-width: min(calc(100vw - 76px),calc((100dvh - 440px - var(--safe-top) - var(--safe)) * .666667)); }
 .ritual-flow .flow-card,.ritual-flow .flow-card.is-center { --ritual-width:var(--flow-card-width); width:var(--ritual-width); height:calc(var(--ritual-width) * 1.5); margin:calc(var(--ritual-width) * -.75) 0 0 calc(var(--ritual-width) * -.5); }
 @supports(height:1cqh) {
  .ritual-flow .flow-card,.ritual-flow .flow-card.is-center { --ritual-width:min(calc(100vw - 76px),calc((100cqh - 16px) * .666667)); }
 }
 .ritual-page .flow-controls { flex:none; margin:0; height:34px; }
 .ritual-page > [data-action=pick-center] { flex:none; width:calc(100% - 40px); min-height:46px; margin:4px 20px; }
 .ritual-page > .subtle-hint { flex:none; font-size:10px; margin:5px 12px; }
 .ritual-page > [data-action=auto-draw] { flex:none; min-height:30px; margin:0; padding:5px; }
 .ritual-return { flex:none; width:calc(100% - 40px); min-height:40px; margin:8px 20px 0; border-top:1px solid var(--line); padding:9px 0; }
 .shuffle-stage { flex:1; min-height:280px; width:100%; container-type:size; }
 .shuffle-stack { width:min(calc(100vw - 144px),calc((100dvh - 330px - var(--safe-top) - var(--safe)) * .666667)); max-width:380px; margin:0; }
 @supports(height:1cqh) { .shuffle-stack { width:min(calc(100vw - 144px),calc((100cqh - 60px) * .666667)); } }
}
@media (max-width:600px) and (max-height:760px) {
 .ritual-page { min-height:0; padding-top:8px; }
 .ritual-page > .eyebrow,.ritual-page > .reading-lead { display:none; }
 .ritual-page > h1 { font-size:20px; }
 .ritual-page > .subtle-hint { display:none; }
 .ritual-page .flow-controls { height:28px; }
 .ritual-page > [data-action=pick-center] { min-height:42px; }
 .ritual-picked { height:22px; }
 .ritual-return { min-height:36px; margin-top:4px; padding:7px 0; }
 .shuffle-stage { min-height:200px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-caption { transition: none; }
}