/* Circle-profile tarot card (tarot.js). Uses the funnel tokens (--f, --f-disp, --f-serif, --ease, --spring); each card
   sets --acc (glyph/lines), --glow (holo + bars) and --deep (card ink) inline from CARDS. Motion is off under reduced motion. */
/* Keep the same entrance while the screen's temporary enter-* class is added/removed. */
.tc-stage,.screen.s-profile>.tc-stage{display:flex;justify-content:center;perspective:1000px;margin:6px 0 0;animation:tc-deal .9s var(--ease,cubic-bezier(.22,1,.36,1)) .1s backwards}
@keyframes tc-deal{from{opacity:0;transform:translateY(26px) rotateY(-75deg) scale(.92)}to{opacity:1;transform:none}}
.tc{position:relative;width:clamp(170px,calc((100cqh - 340px) * .654),min(268px,76vw));aspect-ratio:268/410;transform-style:preserve-3d;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;
 transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease,ease)}
.tc.live{transition:transform .08s linear}
.tc:focus-visible{outline:3px solid var(--lilac-deep,#7E66D6);outline-offset:6px;border-radius:22px}
.tc-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .75s var(--ease,ease)}
.tc.flip .tc-inner{transform:rotateY(180deg)}
.tc:not(.live):not(.flip) .tc-inner{animation:tc-sway 7s ease-in-out 1.2s infinite alternate}
@keyframes tc-sway{from{transform:rotateY(-5deg) rotateX(2deg)}to{transform:rotateY(5deg) rotateX(-2deg)}}
.tc-face{position:absolute;inset:0;border-radius:20px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 24px 46px #1a10304d,0 2px 0 #ffffff1a inset}

/* front */
.tc-front{display:flex;flex-direction:column;align-items:center;padding:7% 7% 6%;color:#fff;
 background:radial-gradient(90% 55% at 50% 30%,color-mix(in srgb,var(--glow) 26%,transparent),transparent 70%),radial-gradient(130% 85% at 50% 0%,var(--deep),#110F15 74%)}
.tc-holo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.34;background-size:260% 260%;background-position:var(--mx,30%) var(--my,30%);
 background-image:linear-gradient(115deg,transparent 28%,color-mix(in srgb,var(--glow) 55%,transparent) 38%,#9fd8ff55 45%,color-mix(in srgb,var(--acc) 60%,transparent) 52%,#ff9fe044 59%,transparent 68%)}
.tc:not(.live) .tc-holo{animation:tc-holo 5s ease-in-out infinite alternate}
@keyframes tc-holo{from{background-position:10% 20%}to{background-position:90% 80%}}
.tc-front::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(45% 35% at var(--mx,50%) var(--my,50%),#ffffff2e,transparent 70%)}
.tc.live .tc-front::after{opacity:1}
.tc-grain{position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:radial-gradient(#fff .6px,transparent .7px);background-size:5px 5px}
.tc-frame{position:absolute;inset:9px;border-radius:14px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);pointer-events:none}
.tc-frame::after{content:"";position:absolute;inset:5px;border-radius:10px;border:1px solid color-mix(in srgb,var(--acc) 20%,transparent)}
.tc-corner{position:absolute;font-style:normal;font-size:9px;line-height:1;color:var(--acc);opacity:.85}
.tc-corner:nth-child(1){top:8px;left:9px}.tc-corner:nth-child(2){top:8px;right:9px}.tc-corner:nth-child(3){bottom:8px;left:9px}.tc-corner:nth-child(4){bottom:8px;right:9px}
.tc-num{position:relative;margin-top:2%;font:400 14px/1 var(--f-serif,Georgia,serif);letter-spacing:.32em;padding-left:.32em;color:var(--acc)}
.tc-glyph{position:relative;width:64%;aspect-ratio:1;margin:4% 0 3%;overflow:visible;color:var(--acc);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--glow) 55%,transparent))}
.tc-halo{transform-origin:75px 75px;animation:tc-spin 60s linear infinite}
@keyframes tc-spin{to{transform:rotate(360deg)}}
.tc-tw{transform-box:fill-box;transform-origin:center;animation:tc-tw 2.4s ease-in-out infinite alternate;animation-delay:calc(var(--d)*-.7s)}
@keyframes tc-tw{from{opacity:.25;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.tc-who{position:relative;font:800 12px/1 var(--f-disp,sans-serif);letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;color:#fff;opacity:.72}
.tc-name{position:relative;margin-top:6px;font:400 34px/1 var(--f-serif,Georgia,serif);font-style:italic;font-synthesis:style;letter-spacing:-.01em;text-align:center;color:color-mix(in srgb,var(--acc) 55%,#fff)}
.tc-orn{position:relative;display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:9px;color:var(--acc)}
.tc-orn i{display:block;width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--acc))}.tc-orn i:last-child{transform:scaleX(-1)}
.tc-traits{position:relative;margin-top:10px;font:600 10.5px/1.6 var(--f,sans-serif);letter-spacing:.16em;text-transform:uppercase;text-align:center;color:color-mix(in srgb,var(--acc) 70%,#fff)}
.tc-brand{position:relative;margin-top:auto;font:800 8px var(--f-disp,sans-serif);letter-spacing:.24em;color:#ffffff73}
.tc-brand em{font:400 italic 12px var(--f-serif,Georgia,serif);font-synthesis:style;letter-spacing:0;color:var(--acc);opacity:.9}

/* back */
.tc-back{transform:rotateY(180deg);padding:8% 7.5%;color:var(--ink,#131313);display:flex;flex-direction:column;
 background:linear-gradient(165deg,color-mix(in srgb,var(--acc) 42%,#fff),#FEFEFD 62%)}
.tc-cap{display:block;margin-bottom:14px;font:700 10.5px var(--f,sans-serif);letter-spacing:.13em;text-transform:uppercase;color:color-mix(in srgb,var(--glow) 55%,#131313)}
.tc-stat{display:grid;grid-template-columns:20px 74px 1fr;align-items:center;gap:6px;margin:0 0 10px;font:600 12.5px var(--f,sans-serif)}
.tc-bars{display:flex;gap:4px}.tc-bars i{flex:1;height:9px;border-radius:3px;background:#1313131a}
.tc-bars i.on{background:linear-gradient(90deg,var(--glow),color-mix(in srgb,var(--glow) 55%,#131313))}
.tc-row{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding-top:11px;border-top:1px dashed #13131326;font:500 11.5px/1.3 var(--f,sans-serif);color:#131313a0}
.tc-row b{display:block;margin-top:3px;font-weight:700;font-size:12.5px;color:#131313}
.tc-row .r{text-align:right}
.tc-ico{font-size:15px!important;letter-spacing:2px}
.tc-fine{margin:auto 0 0;font:500 10.5px var(--f,sans-serif);color:#13131380;text-align:center}

/* caption under the card */
.tc-caption{margin:16px auto 0;max-width:290px;text-align:center;font:400 italic 19px/1.25 var(--f-serif,Georgia,serif);font-synthesis:style;color:var(--lilac-deep,#7E66D6)}
.tc-hint{display:flex;align-items:center;justify-content:center;gap:8px;width:fit-content;max-width:100%;min-height:54px;margin:12px auto 0;padding:6px 4px;border:0;background:transparent;text-align:left;font:600 27px/1 var(--f-hand,cursive);color:var(--lilac-ink,#6A50C8);transform:rotate(-3deg)}
.tc-hint-copy{display:block}
.tc-hint small{display:block;margin-top:4px;font:600 20px/1.1 var(--f-hand,cursive)}
.tc-hint-arrow{flex:none;width:42px;height:56px;margin-top:-22px;overflow:visible}
@media (hover:hover) and (pointer:fine){.tc-hint:hover{color:var(--ink)}}
.tc-hint:focus-visible{outline:3px solid var(--lilac-deep);outline-offset:3px;border-radius:8px}

/* Reserve room for the flip cue above the fixed footer on short phones. */
@container (max-height:600px){
 .screen.s-profile.has-top{padding-top:58px}
 .s-profile h1.m{font-size:23px}
 .screen.s-profile>.tc-stage{margin-top:0}
 .tc-caption{margin-top:10px;font-size:17px}
 .tc-hint{margin-top:4px;min-height:48px;padding:4px;font-size:25px}
 .tc-hint small{font-size:18px}
 .tc-name{font-size:22px}
 .tc-who{font-size:10px}
 .tc-traits{font-size:8.5px}
 .tc-back{padding:8px 7.5%}
 .tc-cap{font-size:9px;margin-bottom:6px}
 .tc-stat{grid-template-columns:16px 56px minmax(0,1fr);gap:4px;font-size:10px;line-height:1.2;margin-bottom:5px}
 .tc-bars{gap:2px}.tc-bars i{height:6px}
 .tc-row{gap:6px;margin-top:6px;padding-top:6px;font-size:9px}.tc-row b{font-size:10px}
 .tc-ico{font-size:12px!important}.tc-fine{font-size:9px}
}

@media (prefers-reduced-motion:reduce){.tc-stage,.tc-inner,.tc-holo,.tc-halo,.tc-tw{animation:none!important}.tc,.tc-inner{transition:none!important}}
html.still .tc-stage,html.still .tc-inner,html.still .tc-holo,html.still .tc-halo,html.still .tc-tw{animation:none!important}