/* MTW's share-first order and Aura's sheen, using the Delulu button shape. */
body:is([data-screen="screen-egg"],[data-screen="screen-result"]) #app{max-width:540px;height:auto;min-height:calc(100svh - var(--flow-header));padding:8px 15px calc(32px + env(safe-area-inset-bottom))}
body:is([data-screen="screen-egg"],[data-screen="screen-result"]) #quiz-screens{height:auto}
#screen-egg.active{height:auto;max-height:none;display:flex;flex-direction:column;gap:15px;padding:0}
#screen-egg h1{font-size:clamp(30px,6vw,38px)}
#egg-art{height:220px;flex:none;container-type:normal}
#egg-art .orb-wrap{width:220px;height:220px;max-width:100%}
.waiting-instructions{font-size:18px}.waiting-instructions span{font-size:16px;margin-top:0}
#screen-result.active{height:auto;padding:0}
#screen-result .result-shell{height:auto;max-height:none;display:block}
#screen-result .result-tabs{margin-bottom:18px}
#screen-result .result-hero-panel{display:flex;flex-direction:column;gap:10px;padding:0 0 56px}
#screen-result .result-hero-panel .result-orb-stage{flex:1 1 220px;min-height:170px}
#screen-result .result-hero-panel .result-hero-bottom{margin-top:14px}#screen-result .result-hero-heading .archetype-line{display:block;font-size:17px;line-height:1.3}
#screen-result .result-hero-heading h1{font-size:clamp(34px,7vw,44px)}
#screen-result .meter-number{font-size:40px}
#screen-result .score-badge{min-width:140px;padding:7px 20px}
#screen-result .score-badge p{font-size:11px}
#screen-result .result-meter{margin:0 auto 3px}
#screen-result .meter-labels{font-size:11px;margin-top:9px}
#screen-result .result-live-count{font-size:11px;line-height:1.35;margin:0;color:#a18b98}
.result-live-count span{display:inline;margin-left:4px}
#screen-result .result-hero-actions{padding:0}
#screen-result .result-scroll-panel{overflow:visible;padding:0 2px 16px}
:is(#screen-egg,#screen-result) #shared-actions{max-width:none;width:100%;padding:18px;border-radius:24px;background:#fdf0e3}
/* Fluid size keeps the heading and its arrows on a single line down to 320px. */
.share-heading{display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;font:600 clamp(14px,calc(5.7vw - 4px),25px)/1.25 Delulu,Nunito,sans-serif;color:var(--button-purple);margin:0 0 15px}
.share-heading span,.share-scroll-cue span,.share-invite-cta span{display:inline-block;font-family:Nunito,sans-serif;font-weight:900;letter-spacing:3px;animation:share-point-down 1.6s ease-in-out infinite}
.share-invite-cta{display:none}
#screen-result .share-invite-cta{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin:0 0 13px;min-height:48px;padding:10px 14px;border:2px solid #2d3436;border-radius:24px;background:#fffaf6;color:var(--button-purple);box-shadow:2px 4px 0 #2d3436;font:900 clamp(13px,calc(6.1vw - 5px),19px)/1.2 Nunito,sans-serif;white-space:nowrap}
#screen-result .share-invite-cta:active{box-shadow:1px 1px 0 #2d3436;transform:translate(1px,2px)}
#screen-result .share-heading{font:800 16px/1.4 Nunito,sans-serif;color:#886b7e;margin:0 0 14px}
#screen-result .share-heading span{display:none}
#screen-result #shared-actions{margin-top:28px}
.share-heading{scroll-margin-top:20px}
.share-scroll-cue{position:fixed;z-index:30;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:10px 22px;border:2px solid #2d3436;border-radius:24px;background:#fffaf6;color:var(--button-purple);box-shadow:2px 4px 0 #2d3436;font:900 19px/1.2 Nunito,sans-serif;white-space:nowrap}
.share-scroll-cue[hidden]{display:none!important}
.share-scroll-cue:active{box-shadow:1px 1px 0 #2d3436}
@keyframes share-point-down{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
.social-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.social-share-rest{margin-top:14px}
/* The link itself sits between the two rows of apps, as prominent as a share button. */
.share-copy-box{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:16px 0 0;padding:13px;border:2px solid #2d3436;border-radius:18px;background:#fffaf6;box-shadow:3px 5px 0 #2d3436}
.share-copy-field{width:100%;min-width:0;min-height:46px;padding:10px 13px;border:2px solid #e0cede;border-radius:12px;background:#fff;color:#6d4e63;font:800 15px/1.3 Nunito,sans-serif;text-overflow:ellipsis}
.share-copy-field:focus{outline:3px solid #9a70cd;outline-offset:2px}
/* animation:none keeps cta-beacon from repainting the background over this one. */
#shared-actions .share-copy-button{min-height:52px;margin:0;font-size:17px;background:var(--button-purple);color:#fff;border-color:#2d3436;box-shadow:3px 4px 0 #2d3436;animation:none}
#shared-actions .share-copy-button:hover{background:var(--button-purple-dark);transform:translate(-1px,-1px);box-shadow:4px 5px 0 #2d3436}
#shared-actions .share-copy-button:active{transform:translate(2px,3px);box-shadow:1px 1px 0 #2d3436}
:is(#shared-actions,.invite-share) .social-share-button{grid-column:auto;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:62px;margin:0;padding:12px 10px;isolation:isolate;overflow:hidden;border:2px solid #2d3436;border-radius:17px;background:var(--social-bg);color:#fff;box-shadow:3px 5px 0 #2d3436,inset 0 2px 0 #ffffff66;font:900 18px/1.2 Nunito,sans-serif;text-shadow:0 1px 2px #0004;transition:transform .18s,box-shadow .18s;animation:none}
#shared-actions .social-share-button::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#ffffff3d,transparent 46%,#00000012 54%,transparent);pointer-events:none}
#shared-actions .social-share-button::after{content:"";position:absolute;top:-40%;left:-50%;width:40%;height:180%;background:linear-gradient(100deg,transparent,#ffffff6b,transparent);transform:translateX(-100%) skewX(-18deg);animation:social-sheen 4.8s ease-in-out infinite;animation-delay:var(--social-delay,0s);pointer-events:none}
#shared-actions .social-share-button:hover,#shared-actions .social-share-button:focus-visible{transform:translate(-1px,-2px);box-shadow:4px 7px 0 #2d3436,inset 0 2px 0 #ffffff77}
#shared-actions .social-share-button:focus-visible{outline:3px solid #9d59a3;outline-offset:6px}
#shared-actions .social-share-button:active{transform:translate(2px,4px);box-shadow:1px 1px 0 #2d3436;animation:none}
#shared-actions :is(.social-whatsapp,.social-instagram){animation:social-nudge 4.8s ease-in-out infinite}
#shared-actions .social-instagram{animation-delay:.6s}
#screen-egg #share-whatsapp,#screen-egg #share-whatsapp:hover,#screen-egg #share-whatsapp:focus-visible{grid-column:auto;background:var(--social-bg);font-size:18px;min-height:62px;padding:12px 10px;animation:social-nudge 4.8s ease-in-out infinite}
.social-whatsapp{--social-bg:linear-gradient(135deg,#26cb6a,#10a452 70%,#0b9151)}
.social-instagram{--social-bg:linear-gradient(125deg,#f39940 -10%,#e82978 48%,#7c37ce 108%);--social-delay:.5s}
.social-tiktok{--social-bg:linear-gradient(135deg,#202027,#0a0a0d);--social-delay:1s}
.social-tiktok .social-icon{filter:drop-shadow(-1px 0 #25f4ee) drop-shadow(1px 1px #fe2c55)}
.social-messenger{--social-bg:linear-gradient(135deg,#448aff,#8751d0 72%,#c061c1);--social-delay:1.5s}
.social-facebook{--social-bg:linear-gradient(135deg,#448aff,#1464d4);--social-delay:2s}
.social-snapchat{--social-bg:linear-gradient(135deg,#fff951,#ffef00);--social-delay:2.5s}
#shared-actions .social-snapchat{color:#242126;text-shadow:none}
.social-snapchat .social-icon{fill:#fff;stroke:#242126;stroke-width:1.6;stroke-linejoin:round}
.social-twitter{--social-bg:linear-gradient(135deg,#35333c,#0b0b10);--social-delay:2.5s}
.social-telegram{--social-bg:linear-gradient(135deg,#1caddb,#087fab);--social-delay:3s}
.friend-answers-cta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:78px;margin:0;padding:15px 20px;border:2px solid #2d3436;border-radius:18px;background:linear-gradient(115deg,#703a65,#a45293 65%,#bc639d);color:#fff;box-shadow:3px 6px 0 #2d3436,inset 0 2px 0 #ffffff66;font:900 21px/1.25 Nunito,sans-serif;text-shadow:0 1px 2px #0004;animation:friend-answers-pop 3.8s ease-in-out infinite;transition:transform .18s,box-shadow .18s}
.friend-answers-cta>span:first-child{font-size:29px;flex:none}
.friend-answers-cta::after{content:"";position:absolute;top:-40%;left:-50%;width:40%;height:180%;background:linear-gradient(100deg,transparent,#ffffff80,transparent);transform:translateX(-100%) skewX(-18deg);animation:social-sheen 3.8s ease-in-out infinite;pointer-events:none}
.friend-answers-cta:hover,.friend-answers-cta:focus-visible{animation:none;transform:translateY(-2px);box-shadow:3px 8px 0 #2d3436,inset 0 2px 0 #ffffff66}
.friend-answers-cta:focus-visible{outline:3px solid #9d59a3;outline-offset:6px}
.friend-answers-cta:active{animation:none;transform:translate(2px,4px);box-shadow:1px 2px 0 #2d3436}
#shared-actions .share-friend-answers{display:none}
#screen-result #shared-actions .share-friend-answers{display:flex;grid-column:1/-1}
.share-owner-utilities{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.invite-share .social-share-grid{margin-top:18px}
.invite-share a.social-share-button{text-decoration:none}
.invite-share .share-utilities{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.invite-share .share-utilities .secondary{margin:0}
#shared-actions .share-owner-utilities .secondary{min-height:46px;font-size:12px;line-height:1.25;padding:7px 6px;margin:0}
.status-friend-answers{margin-top:24px}
@keyframes friend-answers-pop{0%,12%,28%,100%{transform:translateY(0)}18%{transform:translateY(-4px)}23%{transform:translateY(-1px)}}
.social-icon{width:27px;height:27px;flex:0 0 27px;fill:currentColor}
.social-instagram .social-icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.social-spark{position:absolute;right:13%;top:20%;width:4px;height:4px;border-radius:50%;background:white;box-shadow:0 0 7px #fff;pointer-events:none;animation:social-spark 3.7s ease-in-out infinite;animation-delay:var(--social-delay,0s)}
body:is([data-screen="screen-egg"],[data-screen="screen-result"]) #shared-actions .share-utilities{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:14px}
body:is([data-screen="screen-egg"],[data-screen="screen-result"]) #shared-actions .share-utilities .secondary{min-height:48px;padding:9px 5px;margin:0;background:#fff;font-size:16px;box-shadow:2px 3px 0 #2d3436}
.owner-utilities{display:grid;gap:16px;margin:8px 4px 0;padding-top:20px;border-top:1px solid #e3d1dd;text-align:center}
.owner-utilities .notification-cta,.result-hero-actions .owner-utilities .notification-cta{font-size:16px;padding:9px 4px;line-height:1.35;margin:auto}
#screen-result .owner-utilities .text-button{font-size:17px;padding:11px}
#screen-egg .owner-utilities .respondents-button{font-size:18px;min-height:56px}
.owner-utilities .secondary{font-size:17px;background:#fff}
/* A native dialog keeps focus and Escape behavior, including inside mobile browsers. */
.modal:has(.story-share){max-width:490px;padding:34px 20px 23px;max-height:90svh;overflow-y:auto}
.modal .story-share h2{font-size:27px;line-height:1.15;text-align:center;margin:5px 0 22px;color:#643856}
.story-share-row{display:grid;grid-template-columns:minmax(105px,.78fr) minmax(0,1.22fr);gap:16px;align-items:start}
.story-preview{min-width:0;text-align:center}
.story-preview-image{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;border-radius:12px;background:#f3e9f0;box-shadow:0 4px 12px #60345226;-webkit-touch-callout:default}
.story-preview-image[hidden]{display:none}
.modal .story-preview p{font-size:12px;line-height:1.35;margin:8px 0;color:#806578}
.story-preview .story-save{display:block;font-size:14px;font-weight:900;text-decoration:underline;text-underline-offset:3px;margin:12px 0;color:#71405f}
.story-share ol{list-style:none;counter-reset:story;display:grid;gap:16px;margin:0;padding:0}
.story-share li{counter-increment:story;position:relative;padding-left:28px;font-size:16px;line-height:1.4;color:#654a5d}
.story-share li::before{content:counter(story);position:absolute;left:0;top:1px;width:21px;height:23px;display:grid;place-items:center;border-radius:6px;background:#ebdcec;color:#794c77;font-size:14px;font-weight:900}
.story-share .story-link{display:block;width:100%;height:43px;min-width:0;margin:18px 0 12px;padding:9px 12px;border:1px solid #ddcbd8;border-radius:12px;background:#fff;color:#806578;font:14px Nunito,sans-serif}
.modal .story-copy{width:100%;min-height:56px;margin:0;font-size:20px;background:linear-gradient(120deg,#f08545,#df387b 50%,#9042b7);color:#fff;border:2px solid #2d3436;box-shadow:3px 4px 0 #2d3436;animation:none}
.modal .story-feedback{font-size:14px;line-height:1.35;margin:12px 0 0;text-align:center;color:#71405f}
.story-retry{font-size:14px;text-decoration:underline;background:none;color:#71405f;padding:8px 0}
.story-share [hidden]{display:none!important}
@keyframes social-sheen{0%,30%{transform:translateX(-100%) skewX(-18deg)}68%,100%{transform:translateX(470%) skewX(-18deg)}}
@keyframes social-nudge{0%,12%,28%,100%{transform:translateY(0)}18%{transform:translateY(-4px)}23%{transform:translateY(-1px)}}
@keyframes social-spark{0%,72%,100%{opacity:0;transform:scale(.4)}82%{opacity:.95;transform:scale(1.2)}}
@media(max-width:370px){.social-share-grid{gap:13px 10px}#shared-actions .social-share-button{font-size:16px;gap:8px}#screen-egg #share-whatsapp{font-size:16px}.story-share-row{gap:12px}.story-share li{font-size:15px}.modal:has(.story-share){padding-left:16px;padding-right:16px}}
@media(prefers-reduced-motion:reduce){#shared-actions .social-share-button,#shared-actions .social-share-button::after,.friend-answers-cta,.friend-answers-cta::after,.social-spark,.share-heading span,.share-scroll-cue span{animation:none!important}.social-spark{opacity:0}}

/* Keep translated headings inside the padded sharing card on small screens. */
#shared-actions .share-heading{flex-wrap:wrap;white-space:normal;gap:4px 10px;text-wrap:balance}

.share-copy-icon{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:370px){#shared-actions .social-share-button,#screen-egg #share-whatsapp{font-size:14px;gap:6px;padding:12px 6px}#shared-actions .social-icon{width:22px;height:22px;flex-basis:22px}}

.share-heading .share-pointing{letter-spacing:0;white-space:nowrap}