.personal-card-page{width:100%;max-width:100%;margin:0 auto;display:none;flex-direction:column;align-items:center;min-height:100svh;background-color:var(--color-bg);position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;z-index:2;transition:opacity .3s ease-in-out;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-top:80px}.personal-card-page.show{opacity:1}.personal-card-header{position:fixed;top:0;left:50%;transform:translate(-50%) translateY(-100%);opacity:0;z-index:4;width:100%;max-width:440px;min-height:60px;padding:15px 20px;display:none;flex-direction:column;align-items:center;justify-content:flex-start;margin:0;background-color:var(--color-bg);transition:transform .3s ease-in-out,opacity .3s ease-in-out;box-sizing:border-box;overflow:visible}@media (max-width: 439px){.personal-card-header{max-width:100vw;width:100vw}}.personal-card-header.show{transform:translate(-50%) translateY(0);opacity:1;padding:15px 20px 0;height:60px}.personal-card-header-content{width:100%;height:25px;min-height:25px;display:flex;align-items:center;justify-content:space-between;position:relative;margin:0 0 12px;flex-shrink:0}.personal-card-content{min-height:calc(100vh - 60px);height:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px 20px calc(140px + env(safe-area-inset-bottom));width:100%;max-width:440px;box-sizing:border-box}@media (max-width: 440px){.personal-card-content{max-width:calc(440px - (440px - 100vw))}}.personal-card-container{width:100%;max-width:380px;margin:20px auto;position:relative;perspective:1000px;padding-top:0;transition:padding-top .8s cubic-bezier(.4,0,.2,1)}.personal-card-container.card-moved-down{padding-top:0}.personal-card{width:100%;max-width:360px;min-height:450px;height:auto;margin:0 auto;background-color:transparent;background-image:url(/quiz/assets/bg@2x.9239f107851430a781ec.webp);background-size:120% 120%;background-position:center;background-repeat:no-repeat;background-blend-mode:normal;border:1.5px solid rgba(39,186,167,.25);border-radius:24px;box-shadow:0 20px 60px #0009,inset 0 1px 1px #27baa714;padding:28px 24px;position:relative;overflow:hidden}@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi){.personal-card{background-image:url(/quiz/assets/bg@2x.9239f107851430a781ec.webp)}}@media only screen and (-webkit-min-device-pixel-ratio: 3),only screen and (min-resolution: 288dpi){.personal-card{background-image:url(/quiz/assets/bg@2x.9239f107851430a781ec.webp)}}.personal-card-title{display:none}.user-info-section{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;margin-bottom:15px;margin-top:-10px}.user-info-section.visible{opacity:1;transform:translateY(0)}.user-basic-info{display:flex;flex-direction:column;align-items:center;background:transparent;border-radius:0;padding:0}.user-name{font-family:Philosopher,sans-serif;font-size:28px;font-weight:600;color:#f2e6c4;margin:0 0 -3px;text-align:center}.user-details-line{font-family:Open Sans,sans-serif;font-size:13px;color:#f2e6c4b3;text-align:center;display:flex;align-items:center;gap:5px;justify-content:center}.user-details-line span{display:inline-block}.user-details-line .separator{width:2px;height:2px;background:#f2e6c480;border-radius:50%;display:inline-block}.user-name-gender{display:flex;flex-direction:column;gap:5px}.user-gender{font-family:Open Sans,sans-serif;font-size:14px;color:#faf7eacc}.user-zodiac-avatar{display:flex;align-items:center;gap:10px}.zodiac-sign-text{font-family:Philosopher,sans-serif;font-size:16px;color:#f2e6c4}.avatar-icon{width:40px;height:40px;border-radius:50%;background:#27baa733;display:flex;align-items:center;justify-content:center}.avatar-icon svg{width:24px;height:24px}.zodiac-sign-aura-section{opacity:0;transform:scale(.8);transition:opacity .8s ease,transform .8s ease;margin:50px 0 20px;position:relative;display:flex;justify-content:center;align-items:center}.zodiac-sign-aura-section.visible{opacity:1;transform:scale(1)}.zodiac-aura-container{position:relative;width:109px;height:109px;display:flex;align-items:center;justify-content:center;background:transparent}.zodiac-aura-container:before{content:"";position:absolute;width:180px;height:180px;background:radial-gradient(circle,transparent 38%,rgba(200,230,240,.35) 44%,rgba(200,230,240,.3) 48%,rgba(190,225,238,.25) 52%,rgba(180,220,235,.2) 56%,rgba(170,215,232,.15) 60%,rgba(160,210,230,.1) 65%,transparent 75%);border-radius:50%;z-index:3;pointer-events:none}.zodiac-aura-container.modality-fixed:before{background:radial-gradient(circle,transparent 38%,rgba(152,217,22,.35) 44%,rgba(152,217,22,.3) 48%,rgba(152,217,22,.25) 52%,rgba(152,217,22,.2) 56%,rgba(152,217,22,.15) 60%,rgba(152,217,22,.1) 65%,transparent 75%)}.zodiac-aura-container.modality-cardinal:before{background:radial-gradient(circle,transparent 38%,rgba(249,208,93,.35) 44%,rgba(249,208,93,.3) 48%,rgba(249,208,93,.25) 52%,rgba(249,208,93,.2) 56%,rgba(249,208,93,.15) 60%,rgba(249,208,93,.1) 65%,transparent 75%)}.zodiac-aura-container.modality-mutable:before{background:radial-gradient(circle,transparent 38%,rgba(39,186,167,.35) 44%,rgba(39,186,167,.3) 48%,rgba(39,186,167,.25) 52%,rgba(39,186,167,.2) 56%,rgba(39,186,167,.15) 60%,rgba(39,186,167,.1) 65%,transparent 75%)}.zodiac-aura-bg{position:absolute;width:220px;height:220px;opacity:.2;filter:blur(50px);z-index:0;background:radial-gradient(circle,rgba(200,230,240,.25),transparent)}.zodiac-sign-symbol{position:relative;z-index:2;width:109px;height:109px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(0,0,0,.5));border-radius:50%;clip-path:circle(50% at center)}.polarity-modality-section{display:flex;justify-content:space-between;align-items:center;gap:0;margin:-80px 0 50px;padding:0;opacity:0;transition:opacity .6s ease;position:relative;width:100%;z-index:1}.polarity-modality-section.visible{opacity:1}.polarity-item,.modality-item{flex:0 0 auto;background:transparent;border-radius:0;padding:0;text-align:center;opacity:0;transition:opacity .6s ease,transform .6s ease;display:flex;flex-direction:column;align-items:center;gap:1px}.polarity-item.slide-in-left{animation:slideInLeft .6s ease forwards}.modality-item.slide-in-right{animation:slideInRight .6s ease forwards}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.polarity-modality-icon{width:24px;height:24px;margin:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.polarity-modality-icon svg{width:24px!important;height:24px!important;max-width:24px;max-height:24px;display:block}.polarity-modality-value{font-family:Open Sans,sans-serif;font-size:14px;font-weight:600;color:#fff;margin:0}.polarity-modality-label{font-family:Open Sans,sans-serif;font-size:11px;color:#f2e6c499;margin:0}.your-details-section{background:#0e283466;border:1px solid rgba(39,186,167,.15);border-radius:16px;padding:14px 20px;margin:0;opacity:0;transform:translateY(20px) translateZ(0);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1),padding .4s cubic-bezier(.4,0,.2,1);overflow:visible;position:relative;height:auto;min-height:48px;will-change:opacity,transform}.your-details-section.visible{opacity:1;transform:translateY(0) translateZ(0)}.your-details-section.collapsed{padding:14px 20px;height:48px;min-height:48px;max-height:48px}.your-details-title{font-family:Philosopher,sans-serif;font-size:16px;font-weight:600;color:#f2e6c4;margin:0;text-align:center;transition:margin .4s ease;display:flex;align-items:center;justify-content:center;height:20px}.your-details-section.collapsed .your-details-title{margin:0}.details-list{display:flex;flex-direction:column;gap:10px;margin-top:0;transition:margin-top .4s cubic-bezier(.4,0,.2,1)}.details-list.has-items{margin-top:12px}.detail-item{display:flex;justify-content:space-between;align-items:flex-start;opacity:0;max-height:0;overflow:hidden;transform:translateY(-15px) translateZ(0);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1),max-height .6s cubic-bezier(.4,0,.2,1);will-change:opacity,transform,max-height}.detail-item.visible{opacity:1;transform:translateY(0) translateZ(0);max-height:100px}.detail-label{font-family:Open Sans,sans-serif;font-size:13px;font-weight:600;color:#f2e6c4}.detail-value{font-family:Open Sans,sans-serif;font-size:12px;font-weight:400;color:#f2e6c4b3;text-align:right;max-width:65%}.three-zodiac-signs-section{display:flex;justify-content:space-between;gap:10px;margin:30px 0 0;opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}.three-zodiac-signs-section.visible{opacity:1;transform:translateY(0)}.zodiac-sign-item-card{flex:1;background:transparent;border-radius:0;padding:0;text-align:center;opacity:0;transform:scale(.8);transition:opacity .5s ease,transform .5s ease;display:flex;flex-direction:column;align-items:center;gap:1px}.zodiac-sign-item-card.visible{opacity:1;transform:scale(1)}.zodiac-sign-item-card:nth-child(1){transition-delay:.1s}.zodiac-sign-item-card:nth-child(2){transition-delay:.3s}.zodiac-sign-item-card:nth-child(3){transition-delay:.5s}.zodiac-sign-icon-card{width:24px;height:24px;margin:0;filter:drop-shadow(0 2px 8px rgba(39,186,167,.3))}.zodiac-sign-name-card{font-family:Philosopher,sans-serif;font-size:14px;font-weight:600;color:#f2e6c4;margin:0}.zodiac-sign-type-card{font-family:Open Sans,sans-serif;font-size:10px;color:#f2e6c499;margin:0}.progress-bar-fill{width:calc(11 / 14 * 100%);height:100%;background-color:#f2e6c4b3;border-radius:2px;transition:width .3s ease}.personal-card-message-container{display:none;flex-direction:column;align-items:center;width:100%;max-width:360px;padding:0;margin:-20px auto 20px;opacity:0;transform:translateY(-20px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1);pointer-events:auto}.personal-card-message-container.visible{display:flex;opacity:1;transform:translateY(0)}.personal-card-speech-bubble{position:relative;background-color:#fff9e5;border-radius:16px;padding:12px 20px;margin-bottom:12px;width:100%;min-height:64.5px;height:auto;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;box-sizing:border-box;pointer-events:auto}.personal-card-speech-bubble:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:8px solid #FFF9E5}.personal-card-message-text{font-family:Open Sans,sans-serif;font-size:16px;font-weight:600;color:#132026;line-height:1.3;margin:0;text-align:center}.personal-card-message-text .highlight-text{color:#14d5c2}.personal-card-avatar-container{display:flex;justify-content:center;align-items:center;margin-top:4px}.personal-card-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid rgba(242,230,196,.3)}.personal-card-bottom-spacer{height:100px;width:100%;flex-shrink:0}.personal-card-continue-button{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:calc(100% - 40px);max-width:320px;padding:1rem 2rem;background-color:#27baa7;color:#fff9e5;border:none;border-radius:25px;font-family:Philosopher,sans-serif;font-size:22px;font-weight:600;cursor:pointer;text-align:center;margin-bottom:calc(20px + env(safe-area-inset-bottom));display:block;opacity:0;transition:opacity .3s ease,background-color .3s ease;z-index:1000;-webkit-tap-highlight-color:transparent;outline:none}.personal-card-continue-button.visible{opacity:1}.personal-card-continue-button:hover{background-color:#23a595}.personal-card-continue-button:active{transform:translate(-50%) scale(.98);background-color:#23a595;-webkit-tap-highlight-color:transparent}@media (max-width: 380px){.personal-card-container{max-width:calc(100% - 40px)}.personal-card{max-width:100%;padding:20px 16px}.zodiac-sign-item-card{padding:0}.polarity-modality-section{padding:0 12px}}@media (max-height: 740px){.personal-card-container{margin:10px auto}.zodiac-aura-container{width:109px;height:109px}.zodiac-aura-container:before{width:160px;height:160px}.zodiac-sign-symbol{width:109px;height:109px}}
