/* Tin badge: rolled metal, printed paper, original transparent art, foil film. */
.intro-character{border:0;background:none!important;padding:4px 5px 12px;border-radius:0}
.intro-character:before{inset:4px 5px auto;aspect-ratio:1;border-radius:50%;background-color:#ead1dd;background-image:radial-gradient(circle at 34% 25%,#fff7ef,color-mix(in srgb,var(--accent,#ffb5d8) 70%,#bac5d1) 62%,color-mix(in srgb,var(--accent,#ffb5d8) 42%,#70536b));border:3px solid #d2c8c7;box-shadow:inset 0 0 0 2px #fff9,inset 0 0 15px #36233025,0 5px 0 #655467,0 8px 12px #11081755}
.intro-character img{transform:scale(.90);border-radius:50%;filter:drop-shadow(0 2px 1px #28102566)}
.intro-character:hover img,.intro-character:focus-visible img{transform:translateY(-2px) scale(.94)}
.intro-character:after{content:"";position:absolute;inset:5px 6px auto;aspect-ratio:1;border-radius:50%;pointer-events:none;background:linear-gradient(125deg,transparent 20%,#fff9 31%,transparent 42%,#b8ffff30 55%,transparent 70%);opacity:.30;transition:opacity .2s,transform .25s}
.intro-character:hover:after{opacity:.65;transform:rotate(22deg)}
.intro-character>span{margin-top:10px}
.character-tilt-stage{width:min(440px,72vw,61vh)}
.character-tilt-card{aspect-ratio:1;border-radius:50%;background:linear-gradient(140deg,#ffffed,#a3a3b6 28%,#f8ede3 42%,#6e6577 64%,#e7d9c5);border:1px solid #fbebdd;box-shadow:0 8px 0 #746274,0 13px 0 #473e50,0 36px 65px #09030d88;transform-style:preserve-3d}
.character-card-back{inset:3.2%;border-radius:50%;background:radial-gradient(circle at 34% 25%,#fff7ef,color-mix(in srgb,var(--accent) 70%,#bac5d1) 62%,color-mix(in srgb,var(--accent) 42%,#70536b));border:1px solid #fff6;transform:translateZ(2px);box-shadow:inset 0 0 20px #36233045}
.character-card-back:after{inset:7%;border-radius:50%;border:1px dashed #fff9;background:repeating-conic-gradient(from 12deg,transparent 0 28deg,#fff2 29deg 30deg)}
.character-viewer-image{inset:3%;width:94%;height:94%;border-radius:50%;object-fit:contain;transform:translateZ(21px);filter:drop-shadow(0 6px 3px #36233055)}
.character-tilt-shine{display:block;inset:3%;border-radius:50%;transform:translateZ(25px);opacity:.42;mix-blend-mode:screen;background:radial-gradient(ellipse at var(--gx) var(--gy),#fff9,transparent 36%),conic-gradient(from var(--foil-angle,115deg) at var(--gx) var(--gy),#ffbad433,transparent 18%,#bcf6ff66 32%,#eed2ff55 42%,transparent 52%,#ffe6a64d 62%,transparent 80%);box-shadow:inset 0 0 16px #fff5;pointer-events:none}
.character-viewer-caption{inset:calc(100% + 26px) -10% auto;background:none;border:0;padding:0;transform:translateZ(0);box-shadow:none;text-shadow:0 2px 10px #0007;gap:6px}
.character-viewer-caption strong{font-size:30px}.character-viewer-caption span{font-size:13px}
@media(max-width:700px){.character-tilt-stage{width:min(330px,75vw,54vh)}.character-viewer-caption{inset:calc(100% + 25px) -10% auto}.character-viewer-image,.character-tilt-shine{border-radius:50%}}
@media(prefers-reduced-motion:reduce){.intro-character:after{transition:none;transform:none!important}.character-tilt-shine{opacity:.23}.intro-character img,.intro-character:hover img{transform:scale(.9)}}
