#tarot{--tarot-perspective:1}
#journeyPause{display:none!important}
#tarot .tarot-heading{top:5%;left:14%;right:14%}
#tarot .tarot-playfield{top:20%;bottom:14%;left:3%;right:3%;max-width:1900px}
#tarot .tarot-center{top:27%}
#tarot .tarot-deck-card[hidden]{display:none!important}
#tarot .tarot-card-visual img{object-fit:contain}
#tarotRing{touch-action:pan-y;user-select:none}
#tarot .tarot-deck-card:enabled:hover .tarot-card-visual,#tarot .tarot-deck-card:focus-visible .tarot-card-visual{transform:translateY(-22px) scale(1.04)}
.tarot-ribbon-arrow{position:absolute;top:78%;z-index:110;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #e8c68d;border-radius:50%;background:#30212abc;color:#f7dfae;font:32px/1 Georgia,serif;cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s}
#tarotRibbonLeft{left:0}#tarotRibbonRight{right:0}
.tarot-ribbon-arrow:hover{background:#6d4e35;box-shadow:0 0 18px #e3b66b55;transform:scale(1.07)}
.tarot-ribbon-arrow:focus-visible{outline:2px solid #ffe4a6;outline-offset:4px}
#tarot.journey-ready .tarot-ribbon-arrow{display:none}
#tarot.journey-ready .tarot-center{top:48%}
#tarot .tarot-footer{bottom:4%;left:5%;right:5%}
#tarotHint{font-family:TarotSerif,SimSun,serif}
@media(max-width:700px){
 #tarot .tarot-heading{top:11%;left:4%;right:4%}
 #tarot .tarot-playfield{top:23%;bottom:18%;left:2%;right:2%}
 #tarot .tarot-center{top:26%}
 .tarot-ribbon-arrow{width:34px;height:34px;font-size:25px;top:79%}
 #tarot .tarot-footer{bottom:3%}
 #tarot .tarot-slot figcaption{font-size:12px}
}
@media(max-height:650px) and (min-width:701px){#tarot .tarot-heading{top:3%}#tarot .tarot-heading h2{font-size:30px}#tarot .tarot-playfield{top:22%;bottom:16%}#tarot .tarot-footer{bottom:2%}}
@media(prefers-reduced-motion:reduce){#tarot .tarot-card-visual,.tarot-ribbon-arrow{transition:none}}

#tarot .tarot-selected-card:disabled{opacity:1;filter:none}
#tarot .tarot-slot-frame{border-color:#c5a36e99}

/* Two balanced fans on the illustrated velvet tabletop. */
#tarot .tarot-table{background-image:url('assets/tarot-velvet-room.webp')}
#tarot .tarot-heading{top:6%;left:17%;right:20%;text-align:left}
#tarot .tarot-heading h2{font-size:clamp(28px,3vw,48px);font-weight:700}
#tarot .tarot-heading p{font-size:clamp(14px,1.35vw,22px)}
#tarot .tarot-playfield{top:19%;bottom:10%;left:2%;right:2%;max-width:1900px}
#tarot .tarot-center{top:16%}
#tarot .tarot-slots{gap:clamp(14px,2.2vw,36px)}
#tarot .tarot-deck-card{width:var(--ribbon-card-w,var(--card-w));height:calc(var(--ribbon-card-w,var(--card-w))*1.5)}
#tarot .tarot-ribbon-arrow{top:68%}
#tarot #tarotRibbonLeft{left:2%}#tarot #tarotRibbonRight{right:2%}
#tarot .tarot-footer{bottom:4%}
#tarot .tarot-footer-note{display:none}
#tarot.journey-ready .tarot-center{top:42%}
#tarot.journey-reading .tarot-heading{top:4%}
@media(max-width:700px){
 #tarot .tarot-heading{top:10%;left:5%;right:5%;text-align:center}
 #tarot .tarot-heading h2{font-size:clamp(22px,6vw,30px)}
 #tarot .tarot-heading p{font-size:13px;margin-top:5px}
 #tarot .tarot-playfield{top:26%;bottom:14%}
 #tarot .tarot-center{top:14%}
 #tarot .tarot-slots{gap:12px}
 #tarot .tarot-ribbon-arrow{top:67%}
 #tarot .tarot-footer{bottom:3%}
}
@media(min-width:701px) and (max-height:700px){
 #tarot .tarot-heading{top:3%}
 #tarot .tarot-heading h2{font-size:30px}
 #tarot .tarot-heading p{font-size:14px;margin-top:4px}
 #tarot .tarot-playfield{top:21%;bottom:10%}
 #tarot .tarot-center{top:15%}
}


@media(min-width:701px) and (max-height:700px){#tarot .tarot-footer{bottom:2%}}
