/* The Arrow's tarot reading (js/tarot.js), Stardust Crusaders deck style. Everything is scoped to .tarot-wrap / .tarot-card. */
.tarot-wrap { position: absolute; inset: 0; z-index: 85; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; overflow: hidden; opacity: 0; transition: opacity .35s; --tc: #f2c14e; }
.tarot-wrap.show { opacity: 1; } .tarot-wrap.out { opacity: 0; }
.tr-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, #3a1a5a 0, #1a0a2a 55%, #07030c 100%); }
.tr-bg::before { content: ''; position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(242, 193, 78, .06) 0 4deg, transparent 4deg 12deg); animation: tcSpin 60s linear infinite; }
.tr-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(#ffffff22 1px, transparent 1.6px) 0 0 / 7px 7px; mix-blend-mode: overlay; }
/* entrance: the dark opens as an iris, a gold ring rolls out */
.tarot-wrap.show .tr-bg { animation: trIris .7s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes trIris { from { clip-path: circle(0% at 50% 55%); } to { clip-path: circle(120% at 50% 55%); } }
.tr-ring { position: absolute; left: 50%; top: 55%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid #f2c14e; box-shadow: 0 0 24px #f2c14e, inset 0 0 18px #f2c14e88; opacity: 0; pointer-events: none; }
.tarot-wrap.show .tr-ring { animation: trRing 1.1s .1s ease-out both; }
@keyframes trRing { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(40); } }
.tarot-wrap.awaken .tr-bg { background: radial-gradient(circle at 50% 50%, var(--tc) 0, #3a1a5a 42%, #07030c 90%); transition: background .6s; }
.tr-motes i { position: absolute; bottom: -10px; left: var(--x); width: 4px; height: 4px; border-radius: 50%; background: #f2c14e; box-shadow: 0 0 8px #f2c14e; transform: scale(var(--s)); animation: trMote 7s var(--d) linear infinite; opacity: .7; }
@keyframes trMote { to { transform: translateY(-110vh) scale(var(--s)); opacity: 0; } }
.tr-kana { position: absolute; top: 12%; font-family: var(--f-jp); font-weight: 900; font-size: clamp(34px, 6vw, 80px); line-height: 1; color: #b89ae8; -webkit-text-stroke: 2px #07030c; opacity: .55; animation: trThrob 1.1s ease-in-out infinite alternate; pointer-events: none; }
.tr-kana.l { left: 3%; transform: rotate(-8deg); } .tr-kana.r { right: 3%; transform: rotate(8deg); animation-delay: .5s; }
@keyframes trThrob { to { opacity: .9; filter: drop-shadow(0 0 10px #b89ae8); } }
.tr-head { position: relative; text-align: center; color: #f6ecd8; animation: trDrop .6s .15s cubic-bezier(.2, 1.6, .4, 1) both; }
.tr-head small { display: block; font-family: Anton, Impact, sans-serif; letter-spacing: .3em; color: #c8323c; font-size: 13px; }
.tr-head b { display: block; font-family: Rye, serif; font-size: clamp(20px, 3.2vw, 36px); color: #f2c14e; text-shadow: 3px 3px 0 #07030c, 0 0 18px #f2c14e55; }
.tr-head span { font-size: 14px; opacity: .85; }
@keyframes trDrop { from { opacity: 0; transform: translateY(-30px) scale(1.3); } }
.tr-cards { position: relative; display: flex; gap: clamp(8px, 2.2vw, 30px); justify-content: center; perspective: 1400px; max-width: 100%; --w: clamp(120px, min(21vw, calc((100vh - 330px) * 11 / 19)), 250px); }
.tr-foot { position: relative; min-height: 44px; }
.tarot-wrap .tr-go[disabled] { opacity: .5; }

/* the spinning deck the cards are dealt from */
.tr-deck { position: absolute; left: 50%; top: 50%; width: calc(var(--w) * .62); aspect-ratio: 11 / 19; transform: translate(-50%, -50%); transform-style: preserve-3d; z-index: 4; pointer-events: none; transition: opacity .35s; }
.tr-deck .trk { position: absolute; inset: 0; transform: translate(calc(var(--k) * -1.5px), calc(var(--k) * -1.5px)); filter: drop-shadow(3px 3px 0 #07030c); }
.tr-deck .trk svg { width: 100%; height: 100%; display: block; }
.tr-deck.spin { animation: trDeckSpin .8s cubic-bezier(.4, 0, .3, 1); }
.tr-deck.spin .trk:nth-child(odd) { animation: trRiffle .8s ease-in-out; }
@keyframes trDeckSpin { 0% { transform: translate(-50%, -50%) rotateY(0) scale(.6); } 60% { transform: translate(-50%, -50%) rotateY(540deg) scale(1.05); } 100% { transform: translate(-50%, -50%) rotateY(720deg) scale(1); } }
@keyframes trRiffle { 30% { transform: translate(-30%, -4px) rotate(-8deg); } 60% { transform: translate(30%, -4px) rotate(8deg); } }
.tr-deck.gone { opacity: 0; }

/* the card */
.tarot-card { position: relative; width: var(--w); aspect-ratio: 11 / 19; cursor: pointer; opacity: 0; z-index: 2;
  transform: translate(var(--dx, 0), var(--dy, 40vh)) scale(.62) rotate(calc(var(--i) * -10deg)); transition: transform .6s cubic-bezier(.2, 1.15, .4, 1), opacity .15s, filter .3s; }
.tarot-card.dealt { opacity: 1; transform: rotate(calc(var(--i) * 3deg)) translateY(calc(var(--i) * var(--i) * 8px)); }
.tr-cards.has-pick .tarot-card:not(.chosen) { filter: brightness(.55) saturate(.6); transform: scale(.94) rotate(calc(var(--i) * 3deg)); }
.tarot-card.chosen { transform: translateY(-14px) scale(1.05); filter: drop-shadow(0 0 22px var(--tc-glow, #f2c14e)); z-index: 3; }
.tarot-card.dealt.flipped:not(.chosen):hover { transform: translateY(-10px) scale(1.03); z-index: 3; }
.tc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.4, 1.4, .5, 1); }
.tarot-card.flipped .tc-inner { transform: rotateY(180deg) rotateX(var(--ry, 0deg)) rotateY(calc(var(--rx, 0deg) * -1)); }
.tarot-card.flipped:hover .tc-inner { transition: transform .15s ease-out; }
.tc-back, .tc-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 5.5% / 3.2%; overflow: hidden; filter: drop-shadow(5px 6px 0 #07030c); }
.tc-back { filter: drop-shadow(5px 6px 0 #07030c); }
.tc-front { transform: rotateY(180deg); }
.tarot-card .tc-svg { display: block; width: 100%; height: 100%; }
.tarot-card .tc-standsvg { overflow: visible; }
.tarot-card .tc-standsvg > * { filter: drop-shadow(1.5px 1.5px 0 #2a1608); }
.tarot-card .tc-rays { transform-box: view-box; transform-origin: 110px 168px; animation: tcSpin 24s linear infinite; }
@keyframes tcSpin { to { transform: rotate(360deg); } }
/* card faces (also used outside the reading via SBR.tarotCard): SVG art + HTML lettering sized in cqw */
.tc-face { position: relative; width: 100%; aspect-ratio: 11 / 19; container-type: inline-size; }
.tc-face > .tc-svg { display: block; width: 100%; height: 100%; }
.tcx > div, .tcx-back { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; line-height: 1; pointer-events: none; }
.tcx-num { top: 4.8%; height: 8.6%; left: 37% !important; right: 37% !important; font-family: Rye, Georgia, serif; color: #2a1608; letter-spacing: .02em; text-shadow: 0 1px 0 #fff8e0; }
.tcx-arc { top: 69.6%; height: 7.2%; left: 18% !important; right: 18% !important; font-family: Rye, Georgia, serif; color: #2a1608; letter-spacing: .03em; }
.tcx-name { top: 80.4%; height: 5.4%; font-family: Anton, Impact, 'Oswald', sans-serif; color: #1a1020; letter-spacing: .01em; }
.tcx-sub { top: 86.4%; height: 3.4%; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 700; color: #8a2a1a; letter-spacing: .14em; }
.tcx-sub.jp { font-family: var(--f-jp); font-weight: 900; letter-spacing: 0; }
.tcx-part { top: 90.4%; height: 2.8%; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 3.4cqw; color: #6a4414; letter-spacing: .2em; }
.tcx-back { top: 10.4%; height: 6.8%; font-family: Rye, Georgia, serif; font-size: 6.4cqw; color: #f2c14e; letter-spacing: .3em; padding-left: .3em; text-shadow: 0 0 6px #f2c14e66; }
.tcx-back.b { top: 82.8%; transform: rotate(180deg); }
/* foil shimmer: a rainbow sheen that follows the mouse, and one sweep as the card turns */
.tc-foil { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; mix-blend-mode: overlay; transition: opacity .25s;
  background: linear-gradient(115deg, transparent 22%, rgba(255, 236, 170, .75) 38%, rgba(170, 225, 255, .55) 47%, rgba(255, 170, 225, .5) 55%, rgba(255, 236, 170, .6) 62%, transparent 76%); background-size: 260% 260%; background-position: var(--mx, 50%) var(--my, 50%); }
.tarot-card.flipped:hover .tc-foil { opacity: .75; }
.tarot-card.flipped .tc-front::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 250, 220, .75) 48%, transparent 60%); background-size: 300% 100%; background-position: 120% 0; mix-blend-mode: overlay; animation: tcSheen 1.1s .45s ease-out both; }
@keyframes tcSheen { to { background-position: -40% 0; } }
.tarot-card.chosen .tc-foil { opacity: .45; animation: tcFoil 3s linear infinite; }
@keyframes tcFoil { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.tc-key { position: absolute; bottom: 1.2%; right: 50%; transform: translateX(50%); width: 18px; height: 18px; display: none; place-items: center; font-size: 11px; font-weight: 700; background: #2a1608; color: #f6ecd8; border-radius: 50%; border: 1px solid #f2c14e; }
.tarot-card:hover .tc-key { display: grid; }

/* the reading panel under the cards */
.tr-detail { position: relative; z-index: 2; width: min(760px, 96vw); min-height: 74px; max-height: 110px; overflow: hidden; padding: 7px 14px; color: #f6ecd8; background: linear-gradient(180deg, rgba(42, 22, 8, .92), rgba(26, 10, 20, .92)); border: 2px solid #b8862a; outline: 1px solid #f2c14e66; outline-offset: -5px; border-radius: 6px; box-shadow: 4px 4px 0 #07030c; font-size: 12.5px; line-height: 1.3; }
.trd-hint { text-align: center; opacity: .7; font-style: italic; padding-top: 20px; }
.tr-detail.on { animation: trdIn .25s ease-out; }
@keyframes trdIn { from { opacity: .3; transform: translateY(4px); } }
.trd-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.trd-head b { font-family: Anton, Impact, sans-serif; font-size: 17px; color: #f2c14e; letter-spacing: .02em; }
.trd-head span { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: .12em; color: #e8c88a; } .trd-head i { font-family: Georgia, serif; letter-spacing: 0; text-transform: none; color: #f6ecd8; opacity: .8; }
.trd-desc { margin: 2px 0; font-style: italic; opacity: .85; font-size: 12px; }
.trd-passive { font-weight: 700; color: #fff; border-left: 3px solid var(--tc, #f2c14e); padding-left: 6px; }
.trd-moves { list-style: none; margin: 3px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 12px; }
.trd-moves li { font-size: 11px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.trd-moves em { font-style: normal; font-weight: 700; background: #f2c14e; color: #2a1608; padding: 0 3px; margin-right: 4px; font-size: 9.5px; border-radius: 2px; }
.trd-moves b { color: #f2c14e; margin-right: 4px; } .trd-moves span { opacity: .82; }

/* awakening */
.tarot-card.burn { animation: tcBurn .7s ease-in forwards; pointer-events: none; }
@keyframes tcBurn { 40% { filter: brightness(2) sepia(1) hue-rotate(-30deg); } 100% { opacity: 0; transform: translateY(40px) scale(.7) rotate(8deg); filter: brightness(0); } }
.tarot-card.rise { animation: tcRise 1s .15s cubic-bezier(.2, 1.2, .4, 1) forwards; z-index: 5; }
@keyframes tcRise { to { transform: translateY(-4vh) scale(1.14); filter: drop-shadow(0 0 40px #fff); } }
.tarot-wrap.awaken .tr-head, .tarot-wrap.awaken .tr-foot, .tarot-wrap.awaken .tr-detail { opacity: 0; transition: opacity .3s; }
.tr-title { position: absolute; left: 0; right: 0; bottom: 3%; text-align: center; z-index: 6; animation: trSlam .5s cubic-bezier(.2, 1.8, .4, 1) both; pointer-events: none; }
.tr-title small { display: block; font-family: Anton, Impact, sans-serif; letter-spacing: .35em; color: #f6ecd8; font-size: 14px; text-shadow: 2px 2px 0 #07030c; }
.tr-title b { display: block; font-family: Rye, serif; font-size: clamp(30px, 6vw, 70px); color: #f2c14e; -webkit-text-stroke: 3px #07030c; text-shadow: 6px 6px 0 #07030c; }
.tr-title i { font-style: normal; font-family: var(--f-jp); font-weight: 900; font-size: clamp(20px, 3vw, 34px); color: #fff; -webkit-text-stroke: 2px #07030c; letter-spacing: .1em; }
@keyframes trSlam { from { opacity: 0; transform: scale(2.6); } }

@media (max-width: 900px) { .trd-desc { display: none; } .tr-detail { max-height: 118px; } }
@media (max-width: 700px) {
  .tr-cards { gap: 6px; --w: min(30vw, calc((100vh - 360px) * 11 / 19)); }
  .tr-kana { display: none; }
  .tr-detail { font-size: 11px; padding: 5px 8px; max-height: 150px; }
  .trd-moves { grid-template-columns: 1fr; }
  .trd-moves li { -webkit-line-clamp: 1; }
  .tr-head span { display: none; }
}
@media (max-height: 560px) { .tr-head span, .trd-desc { display: none; } .tr-cards { --w: min(21vw, calc((100vh - 250px) * 11 / 19)); } }
/* reduced motion: no spinning, dealing or tilting; the cards simply appear and turn */
.tarot-wrap.calm .tr-bg, .tarot-wrap.calm .tr-bg::before, .tarot-wrap.calm .tr-ring, .tarot-wrap.calm .tr-motes i, .tarot-wrap.calm .tr-kana, .tarot-wrap.calm .tr-head, .tarot-wrap.calm .tc-rays, .tarot-wrap.calm .tc-front::after { animation: none !important; }
.tarot-wrap.calm .tarot-card { transition: opacity .2s; transform: none; }
.tarot-wrap.calm .tc-inner { transition: transform .01s; }
.tarot-wrap.calm .tr-deck { display: none; }
@media (prefers-reduced-motion: reduce) { .tarot-card .tc-rays, .tr-motes i, .tr-kana, .tr-bg::before { animation: none; } }
/* toasts step aside to the top-right while the cards are out (as they do for modals, css/ux.css) */
body:has(#overlay > .tarot-wrap) #toasts { top: 12px; bottom: auto; left: auto; right: 16px; flex-direction: column; align-items: flex-end; }
body:has(#overlay > .tarot-wrap) .toast { max-width: 260px; font-size: 12px; padding: 5px 9px; opacity: .85; }