/* Additive artwork layer. React continues owning the cards and reading state. */
#oracle-stone-root .rx-card-grid:has(>.rx-card){align-items:start;row-gap:96px;padding-bottom:82px}
#oracle-stone-root .rx-card-grid:has(>.rx-card)[data-count="1"]{max-width:220px}
#oracle-stone-root .rx-card-grid .rx-card{display:block;position:relative;width:100%;height:auto;min-height:0;aspect-ratio:7/12;padding:0;overflow:visible;border-radius:12px;opacity:1;background:#171027;isolation:isolate;box-shadow:0 10px 24px #0003}
#oracle-stone-root .rx-card-grid .rx-card>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:11px}
#oracle-stone-root .rx-card-grid .rx-card>span:last-child{position:absolute;top:calc(100% + 12px);left:0;width:100%;padding:0 2px;font:12px/1.4 var(--font-body),sans-serif;color:#e9ce9b;overflow-wrap:anywhere}
#oracle-stone-root .rx-card-grid .rx-card>strong{position:absolute;top:calc(100% + 35px);left:0;width:100%;padding:0 2px;font:500 clamp(15px,1.5vw,21px)/1.25 var(--font-display),Georgia,serif;color:#f6eee4}
#oracle-stone-root .rx-card-grid .rx-card>small{position:absolute;top:calc(100% + 65px);left:0;width:100%;padding:0;font:11px/1.4 var(--font-body),sans-serif;color:#bcaccf}
#oracle-stone-root .rx-card-grid .rx-card-open{animation:none}
#oracle-stone-root .rx-card-grid .rx-card-open:not(.os-art-ready)>svg{position:absolute;top:40%;left:calc(50% - 14px)}
#oracle-stone-root .rx-card-grid .os-art-ready>svg{visibility:hidden}
#oracle-stone-root :is(.rx-card,.tarot-card).os-art-ready::before{content:"";position:absolute;inset:0;border-radius:inherit;background-color:#faf6e9;background-image:var(--os-tarot-image);background-size:contain;background-position:center;background-repeat:no-repeat;z-index:1;pointer-events:none;transform:rotate(0deg);animation:os-art-flip .55s cubic-bezier(.22,.75,.25,1)}
#oracle-stone-root :is(.rx-card,.tarot-card).os-art-reversed::before{transform:rotate(180deg);animation-name:os-art-flip-reversed}
#oracle-stone-root .tarot-card{position:relative;aspect-ratio:7/12}
#oracle-stone-root .tarot-card.os-art-ready>.card-face{visibility:hidden}
#oracle-stone-root .rx-card:focus-visible{outline:3px solid #f0d6a7;outline-offset:5px}
@keyframes os-art-flip{from{transform:perspective(1000px) rotateY(90deg)}to{transform:perspective(1000px) rotateY(0deg)}}
@keyframes os-art-flip-reversed{from{transform:perspective(1000px) rotateY(90deg) rotate(180deg)}to{transform:perspective(1000px) rotateY(0deg) rotate(180deg)}}
@media(max-width:600px){#oracle-stone-root .rx-card-grid .rx-card{border-radius:8px}#oracle-stone-root .rx-card-grid .rx-card>img{border-radius:7px}#oracle-stone-root .rx-card-grid .rx-card>span:last-child{font-size:10px;top:calc(100% + 10px);line-height:1.4}#oracle-stone-root .rx-card-grid .rx-card>strong{font-size:15px;top:calc(100% + 43px);line-height:1.25}#oracle-stone-root .rx-card-grid .rx-card>small{font-size:10px;top:calc(100% + 86px)}#oracle-stone-root .rx-card-grid:has(>.rx-card){row-gap:122px;padding-bottom:102px}}
@media(prefers-reduced-motion:reduce){#oracle-stone-root :is(.rx-card,.tarot-card).os-art-ready::before{animation:none}}
@media(max-width:360px){#oracle-stone-root .rx-card-grid .rx-card>strong{font-size:12px}}