/* OXXY: a fingertip cue, responsive sphere and cancellable reveal. */
.orb-stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding:18px 0 0}
.play-orb{flex:none;touch-action:manipulation}
/* A quiet breath of light behind the sphere, independent of its touch gesture. */
.play-orb::before{content:"";position:absolute;inset:-36%;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#f3d64e36 0%,#f3d64e36 35%,#f3d64e1c 55%,#f3d64e00 72%);opacity:.24;transform:scale(.93);animation:orb-backlight-breathe 6.4s ease-in-out infinite}
@keyframes orb-backlight-breathe{0%,100%{opacity:.24;transform:scale(.93)}50%{opacity:.62;transform:scale(1.14)}}
.play-orb[aria-busy="true"]::before,body:has(#content-dialog[open]) .play-orb::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.play-orb::before{animation:none;opacity:.28;transform:none}}
.orb-surface,.orb-surface::before,.orb-surface::after,.orb-current path{animation:none!important}
.orb-surface{transform:none;transition:filter .22s,scale .22s,box-shadow .22s}
.orb-current path{stroke-dasharray:28 72;opacity:.65}
.orb-cue{display:flex;flex-direction:column;align-items:center;gap:8px;color:#f1df8d;text-decoration:none;min-height:59px;line-height:1.4;max-width:100%;padding:0 12px 4px;border-radius:12px;touch-action:manipulation}
.cue-arrow{height:19px;opacity:.8}
.cue-action{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:5px 14px;border:1px solid #f3d64e55;border-radius:99px;background:#202018;color:#f6e7a8;font-size:12px;font-weight:500}
.cue-story{display:none}
.cue-touch{display:none}
.orb-cue:hover .cue-action{border-color:#f3d64e;background:#2c291b}
.play-orb:focus-visible,.orb-cue:focus-visible{outline:2px solid #ffe789;outline-offset:9px}
.play-orb:focus-visible .orb-surface{scale:1.035;filter:brightness(1.09);box-shadow:0 0 34px #ffde3b65,0 0 90px #f3d13436}
@media(hover:hover){.play-orb:hover .orb-surface{scale:1.035;filter:brightness(1.09);box-shadow:0 0 34px #ffde3b65,0 0 90px #f3d13436}}
.invitation-used .orb-cue{visibility:hidden;pointer-events:none}
[data-invitation-variant="B"] .orb-cue{gap:5px;min-height:67px}
[data-invitation-variant="B"] .cue-arrow{display:none}
[data-invitation-variant="B"] .cue-story{display:block;font-size:16px;letter-spacing:-.02em;color:#f6f4ee}
[data-invitation-variant="B"] .cue-action{background:transparent;border-color:transparent;font-size:12px;gap:6px}
[data-invitation-variant="B"] .cue-action::before{content:'↑';font-size:17px;color:#f3d64e}
[data-invitation-variant="B"] .orb-surface.cue-pulse{animation:cue-two-pulses 1.05s ease-in-out 2!important}
@keyframes cue-two-pulses{0%,100%{scale:1;filter:brightness(1)}48%{scale:1.045;filter:brightness(1.12)}}
@media(pointer:coarse){.cue-mouse{display:none}.cue-touch{display:inline}}
@media(max-width:760px){.orb-stage{gap:14px;padding-top:8px}.orb-cue{min-height:58px}.cue-action{font-size:12px;min-height:35px}[data-invitation-variant="B"] .cue-story{font-size:14px}.play-copy{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.orb-surface,.orb-bolt,.play-orb,.orb-surface.cue-pulse{animation:none!important;transition:none!important;transform:none!important;scale:1!important}}

[data-preview-touch="true"] .cue-mouse{display:none}[data-preview-touch="true"] .cue-touch{display:inline}
.orb-pointer{display:block;position:absolute;width:220px;height:auto;left:calc(50% - 360px);top:164px;pointer-events:none;user-select:none;z-index:0;filter:drop-shadow(0 8px 12px #0004)}
.play-orb,.orb-cue{z-index:1}
[data-invitation-variant="C"] .cue-story{display:block;font-size:15px;color:#f6f4ee;letter-spacing:-.02em}
[data-invitation-variant="C"] .cue-arrow{display:none}
[data-invitation-variant="C"] .orb-cue{gap:7px;min-height:67px}
.orb-reveal{position:fixed;inset:0;z-index:9999;overflow:hidden;pointer-events:auto;background:#14141410}
.reveal-sphere,.reveal-wave{position:absolute;border-radius:50%;transform-origin:center;pointer-events:none}
.reveal-sphere{background:radial-gradient(circle at 33% 25%,#fff5af,#ffdb35 40%,#9d7c17 83%);box-shadow:0 0 65px #f3d64e35}
.reveal-wave{border:2px solid #f3d64e80;box-shadow:0 0 20px #f3d64e25}
.reveal-cancel{position:absolute;right:22px;top:22px;border:1px solid #fff6;background:#181818;color:#f6f4ee;padding:12px 17px;border-radius:99px;font:13px inherit;min-height:44px;cursor:pointer}
.reveal-cancel:focus-visible{outline:3px solid #ffe15b;outline-offset:4px}
.reveal-reduced{background:#e1cb6f22}.reveal-reduced .reveal-sphere,.reveal-reduced .reveal-wave{display:none}
@media(max-width:760px){.orb-pointer{width:140px;height:auto;left:calc(50% - 230px);top:128px}[data-invitation-variant="C"] .cue-story{font-size:14px}}

/* The forearm continues past the viewport edge; only the hero crops it. */
.play-hero>.orb-pointer{width:calc(50% - 92px);max-width:none;left:-55px;top:206px;height:auto;z-index:0;filter:drop-shadow(0 10px 14px #0003)}
.play-hero>.orb-pointer{transform:translate3d(var(--hand-x,0px),var(--hand-y,0px),0);transform-origin:96.5% 10%}
.orb-touch-ring{position:absolute;inset:-7px;border:1px solid #ffdf70;border-radius:50%;opacity:0;pointer-events:none}
.play-hero-inner{position:relative;z-index:1}
@media(max-width:760px){.play-hero>.orb-pointer{width:290px;left:calc(50% - 374px);top:172px}}
@media(min-width:761px) and (max-width:1000px){.play-hero>.orb-pointer{width:calc(50% - 70px);top:206px}}
@media(min-width:600px) and (max-width:760px){.play-hero>.orb-pointer{width:calc(50% - 70px);left:-55px;top:172px}}
@media(max-width:480px){.play-hero>.orb-pointer{width:270px;left:calc(50% - 349px);top:151px}}