/* One small theatre: the machine, a soft capsule, then the new discovery. */
.gacha-scene{overflow:hidden;isolation:isolate}
.machine-orbit{position:absolute;inset:45px 10% 100px;pointer-events:none;z-index:-1;opacity:0;transition:opacity .25s}
.machine-orbit:before,.machine-orbit:after{content:"";position:absolute;border:1px dashed #efb4ca;border-radius:50%;inset:2% 6%;transform:rotate(-22deg)}
.machine-orbit:after{inset:12% -4%;transform:rotate(25deg)}
.machine-orbit i{position:absolute;width:13px;height:13px;border-radius:50%;background:#9fe4d5;left:8%;top:22%;box-shadow:inset 2px 2px 3px #fff9}
.machine-orbit i:nth-child(2){left:86%;top:42%;background:#ffd987;width:18px;height:18px}
.machine-orbit i:nth-child(3){left:16%;top:78%;background:#d4b8f0;width:10px;height:10px}
.is-mixing .machine-orbit{opacity:1}
.is-mixing .machine-orbit i{animation:orbit-bob .4s ease-in-out infinite alternate}
.is-mixing .machine-orbit i:nth-child(2){animation-delay:-.2s}
.is-mixing #gacha-machine{transform-origin:50% 88%;animation:machine-rock .22s ease-in-out infinite alternate}
@keyframes machine-rock{from{transform:rotate(-1.5deg) translateY(-1px)}to{transform:rotate(1.5deg) translateY(1px)}}
@keyframes orbit-bob{to{transform:translate(8px,-14px) rotate(25deg)}}

#result-dialog{--accent:#159d91;--shell:#79d4c4;--shell-deep:#36aaa2;--glow:#bceee2;--wash:#effbf6;width:420px;padding:29px 32px 22px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow-x:hidden;overflow-y:auto;background:radial-gradient(ellipse at 50% 38%,#fff 14%,var(--wash) 100%);border:1px solid #ffffffc9;isolation:isolate}
#result-dialog[data-rarity="rare"]{--accent:#9760bd;--shell:#c3a1ed;--shell-deep:#9567c9;--glow:#e3c4fa;--wash:#f8f0ff}
#result-dialog[data-rarity="super"]{--accent:#ac7a17;--shell:#f4d676;--shell-deep:#d3a645;--glow:#ffe4a0;--wash:#fff7df}
#result-dialog::backdrop{background:#173b4a87;backdrop-filter:blur(7px)}
#result-dialog .dialog-close{width:40px;height:40px;right:12px;top:12px;z-index:10;background:#ffffffbf}
.result-heading{position:relative;z-index:2;padding:5px 10px 0;min-height:90px}
#result-eyebrow{display:block;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.22em;margin-bottom:10px}
#result-name{font-size:25px;line-height:1.5;margin:3px 0 8px;overflow-wrap:anywhere}
#result-rarity{display:inline-block;min-height:21px;font-size:11px;letter-spacing:.14em;color:var(--accent);padding:3px 11px;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:20px}
#result-dialog:not([data-phase="revealed"]):not([data-phase="opening"]):not([data-phase="duet"]) #result-rarity{visibility:hidden}
.result-visual{height:244px;position:relative;display:grid;place-items:center;margin:1px -12px 6px;isolation:isolate}
.result-halo{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s}
.result-halo:before{content:"";position:absolute;width:260px;height:260px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--glow) 0%,transparent 68%)}
.result-halo:after{content:"";position:absolute;inset:5% 14%;border:1px solid var(--glow);border-radius:50%;box-shadow:0 0 0 19px #ffffff52}
.result-rays{position:absolute;inset:-26px -12px;opacity:0;background:repeating-conic-gradient(from 6deg,transparent 0deg 20deg,var(--glow) 20deg 30deg,transparent 30deg 45deg);mask-image:radial-gradient(circle,transparent 0 40px,#0007 80px,transparent 170px);pointer-events:none}
.capsule-shadow{position:absolute;width:132px;height:18px;left:calc(50% - 66px);top:calc(50% + 76px);border-radius:50%;background:#39777422;filter:blur(6px);transition:opacity .35s}
#reveal-capsule{border:0;background:none;padding:0;position:relative;width:158px;height:164px;z-index:3;border-radius:50%;touch-action:manipulation;cursor:pointer;appearance:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.capsule-half{position:absolute;left:0;width:100%;height:50%;border:2px solid #ffffffb8;transition:transform .62s cubic-bezier(.2,.7,.2,1),opacity .5s;pointer-events:none}
.capsule-top{top:0;border-radius:100px 100px 9px 9px;background:radial-gradient(ellipse at 30% 18%,#fff9 0%,#ffffff05 46%),linear-gradient(135deg,var(--shell),var(--shell-deep));box-shadow:inset -8px -7px 12px #18556a16,inset 4px 4px 7px #fff8;transform-origin:50% 100%}
.capsule-top:before{content:"";position:absolute;top:15px;left:29px;width:38px;height:17px;border-radius:50%;background:#fff9;transform:rotate(-30deg);filter:blur(1px)}
.capsule-top:after{content:"";position:absolute;left:20%;right:20%;bottom:-4px;height:4px;border-radius:50%;background:#fff7}
.capsule-bottom{top:50%;border-radius:8px 8px 100px 100px;background:radial-gradient(ellipse at 35% 14%,#fff 0%,#f6ffffd9 46%,#bce2dedb 100%);box-shadow:inset -8px -10px 16px #698f9028,inset 5px 1px 8px #fff;border-top:3px solid #fff;transform-origin:50% 0}
.capsule-bottom:before{content:"ぷ";position:absolute;width:35px;height:35px;top:10px;left:calc(50% - 17px);display:grid;place-items:center;font-size:19px;font-weight:800;color:var(--accent);background:#ffffffa8;border:1px solid #ffffffc4;border-radius:50%;transform:rotate(-12deg)}
#result-image{position:absolute;width:222px;height:222px;margin:0;object-fit:contain;pointer-events:none;z-index:2;opacity:0;transform:scale(.35);filter:drop-shadow(0 12px 10px #37594c12)}
.result-particles{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0}
.result-particles i{position:absolute;left:50%;top:50%;color:var(--accent);font-size:18px;line-height:1;opacity:0;font-style:normal;transform:translate(-50%,-50%) scale(0)}
.result-particles i:nth-child(3n){color:var(--shell-deep);font-size:12px}
#result-message{position:relative;min-height:40px;line-height:1.7;margin:0 0 12px;font-size:13px}
#result-message strong{color:var(--accent);font-weight:800}
.result-actions{position:relative;z-index:5;transition:opacity .3s;min-height:98px}
#result-dialog:not([data-phase="revealed"]) .result-actions{visibility:hidden;opacity:0;pointer-events:none}
.result-actions .primary{background:var(--accent);box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 80%,#183b4a);min-height:48px}
.result-actions .text-button{min-height:44px;padding-top:12px}
.reveal-hint{position:absolute;bottom:45px;left:25px;right:25px;text-align:center;color:var(--accent);font-size:12px;pointer-events:none}
.reveal-hint span{display:block;letter-spacing:.14em;font-size:10px;margin-top:8px;color:var(--muted)}
#result-dialog[data-phase="opening"] .reveal-hint,#result-dialog[data-phase="revealed"] .reveal-hint{visibility:hidden}
#result-dialog[data-phase="dropping"] #reveal-capsule{animation:capsule-land .82s both}
#result-dialog[data-phase="dropping"] .capsule-shadow{animation:capsule-shadow .82s both}
#result-dialog[data-phase="anticipating"] #reveal-capsule{animation:capsule-rattle .36s ease-in-out infinite}
#result-dialog[data-phase="anticipating"] .result-halo{opacity:.7}
#result-dialog[data-phase="opening"] #reveal-capsule,#result-dialog[data-phase="revealed"] #reveal-capsule{pointer-events:none}
#result-dialog[data-phase="opening"] .capsule-top{transform:translate(-56px,-88px) rotate(-29deg);opacity:0}
#result-dialog[data-phase="opening"] .capsule-bottom{transform:translate(50px,83px) rotate(25deg);opacity:0}
#result-dialog[data-phase="opening"] #result-image{animation:reward-pop .54s .06s cubic-bezier(.18,.8,.22,1) both}
#result-dialog[data-phase="revealed"] #result-image{opacity:1;transform:scale(1)}
#result-dialog[data-phase="revealed"] #reveal-capsule{visibility:hidden}
#result-dialog[data-phase="opening"] .result-halo,#result-dialog[data-phase="revealed"] .result-halo{opacity:1}
#result-dialog[data-phase="opening"] .capsule-shadow,#result-dialog[data-phase="revealed"] .capsule-shadow{opacity:0}
#result-dialog[data-phase="opening"] .result-rays,#result-dialog[data-phase="revealed"] .result-rays{opacity:.6;animation:rays-turn 24s linear infinite}
#result-dialog[data-rarity="super"] .result-rays{opacity:.85}
#result-dialog[data-phase="opening"] .result-particles,#result-dialog[data-phase="revealed"] .result-particles{opacity:1}
#result-dialog[data-phase="opening"] .result-particles i{animation:particle-burst .55s var(--delay) ease-out both}
#result-dialog[data-phase="revealed"] .result-particles i{opacity:.6;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--angle)) scale(.8)}
#result-dialog[data-phase="revealed"] .result-heading{animation:discovery-in .32s ease-out both}
@keyframes capsule-land{0%{transform:translate(-30px,-240px) rotate(-45deg);opacity:0}12%{opacity:1}47%{transform:translate(0,9px) rotate(9deg) scale(1.13,.84)}68%{transform:translate(8px,-27px) rotate(-9deg) scale(.96,1.04)}81%{transform:translate(0,4px) rotate(5deg) scale(1.05,.96)}100%{transform:translate(0,0) rotate(0) scale(1)}}
@keyframes capsule-shadow{0%{transform:scale(.45);opacity:0}47%{transform:scale(1.15);opacity:1}68%{transform:scale(.85);opacity:.5}100%{transform:scale(1);opacity:1}}
@keyframes capsule-rattle{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg) scale(1.015,.985)}75%{transform:rotate(5deg) scale(.99,1.01)}}
@keyframes reward-pop{0%{opacity:0;transform:translateY(20px) scale(.3)}48%{opacity:1;transform:translateY(-12px) scale(1.05,.96)}75%{opacity:1;transform:translateY(4px) scale(.98,1.03)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes particle-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}20%{opacity:1}100%{opacity:.6;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--angle)) scale(.8)}}
@keyframes rays-turn{to{transform:rotate(360deg)}}
@keyframes discovery-in{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:600px){#result-dialog{padding:25px 21px 15px;border-radius:26px}.result-heading{min-height:84px;padding-top:4px}#result-name{font-size:23px}.result-visual{height:220px}#result-image{width:204px;height:204px}#reveal-capsule{width:144px;height:150px}.reveal-hint{bottom:36px}.result-halo:before{width:235px;height:235px}.result-halo:after{inset:5% 16%}}
@media(max-height:620px){#result-dialog{padding-top:18px;padding-bottom:12px}.result-heading{min-height:65px}#result-name{font-size:21px;margin:0 0 3px}#result-eyebrow{margin-bottom:5px}.result-visual{height:178px}#result-image{width:170px;height:170px}#reveal-capsule{width:130px;height:134px}#result-message{margin-bottom:4px;min-height:36px}.result-actions{min-height:90px}.result-halo:after{inset:3% 24%}}
@media(prefers-reduced-motion:reduce){.is-mixing #gacha-machine,.is-mixing .machine-orbit i,#result-dialog .result-rays,#result-dialog .result-heading{animation:none!important}#result-dialog .capsule-half{transition:none}.result-halo{transition:none}}

/* Pao and Rabi host every draw using their current official character artwork. */
#gacha-view .section-heading h1{font-size:clamp(23px,2.5vw,29px)}
.gacha-theatre{position:relative;width:100%;max-width:570px;height:340px;margin:8px 0}
.gacha-theatre #gacha-machine{position:absolute;left:19%;top:0;width:62%;height:100%;max-width:none;margin:0;object-fit:contain;z-index:1}
.gacha-host{position:absolute;bottom:0;margin:0;width:27%;text-align:center;z-index:2;pointer-events:none}
.host-pao{left:0;--host-color:#258d9b;--host-wash:#e7f9f7;transform:rotate(-3deg)}
.host-rabi{right:0;--host-color:#bb5983;--host-wash:#fff0f5;transform:rotate(3deg)}
.host-speech{position:relative;display:inline-block;min-width:90px;padding:10px 13px;background:white;border:1px solid color-mix(in srgb,var(--host-color) 23%,white);border-radius:17px;box-shadow:0 4px 12px #284c5009;font-size:12px;font-weight:800;line-height:1.6;color:var(--host-color);white-space:pre;z-index:3}
.host-speech:after{content:"";position:absolute;width:10px;height:10px;background:white;border-right:1px solid color-mix(in srgb,var(--host-color) 23%,white);border-bottom:1px solid color-mix(in srgb,var(--host-color) 23%,white);bottom:-6px;left:calc(50% - 5px);transform:rotate(45deg)}
.host-image{display:block;position:relative;left:50%;width:176px;height:176px;max-width:none;object-fit:contain;transform:translateX(-50%);margin:-6px 0 -5px;filter:drop-shadow(0 5px 4px #36546712)}
.gacha-host figcaption{display:inline-block;font-size:11px;line-height:1.4;font-weight:800;color:var(--host-color);background:var(--host-wash);border:1px solid #fff;padding:3px 13px;border-radius:20px}
.is-mixing .host-pao .host-image{animation:host-cheer .38s ease-in-out infinite alternate}
.is-mixing .host-rabi .host-image{animation:host-cheer .38s .15s ease-in-out infinite alternate-reverse}
.result-companions{display:flex;align-items:center;justify-content:center;gap:4px;margin:0 -7px 12px;position:relative;z-index:4}
.result-companions img{width:48px;height:62px;object-fit:contain;flex:none}
.result-companions #result-message{flex:1;min-width:0;min-height:0;margin:0;font-size:12px;line-height:1.7}
#result-dialog[data-phase="revealed"] .result-companions img{animation:companion-hop .55s ease-out both}
#result-dialog[data-phase="revealed"] .result-companions img:last-child{animation-delay:.09s}
@keyframes host-cheer{from{transform:translateX(-50%) translateY(0) rotate(-2deg)}to{transform:translateX(-50%) translateY(-8px) rotate(3deg)}}
@keyframes companion-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-8px) rotate(-7deg)}70%{transform:translateY(1px) rotate(3deg)}}
@media(max-width:850px){.gacha-theatre{height:325px}.host-image{width:150px;height:150px}.host-speech{min-width:76px;padding:8px;font-size:11px}}
@media(max-width:600px){#gacha-view .section-heading h1{font-size:23px;line-height:1.45}.gacha-theatre{height:295px;margin-bottom:12px}.gacha-theatre #gacha-machine{left:18%;width:64%}.host-image{width:145px;height:145px}.gacha-host{width:26%;bottom:0}.host-speech{min-width:74px;padding:8px 6px;font-size:11px}.gacha-host figcaption{font-size:10px;padding:3px 11px}.gacha-status{text-align:center;font-size:12px;line-height:1.7;min-height:21px}.result-companions img{width:40px;height:58px}.result-companions{margin-bottom:10px}}
@media(max-width:360px){.host-image{width:125px;height:125px}.host-speech{font-size:10px;min-width:67px;padding:7px 5px}.gacha-theatre{height:278px}.gacha-host{bottom:0}.gacha-status{max-width:230px}}
@media(prefers-reduced-motion:reduce){.is-mixing .host-image,#result-dialog[data-phase="revealed"] .result-companions img{animation:none!important}}

#gacha-view .section-heading h1 span{display:inline-block;white-space:nowrap}

#duet-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;display:none}
#result-dialog[data-phase="duet"] #duet-canvas{display:block}
#result-dialog[data-phase="duet"] #result-image{opacity:0;transform:scale(1)}
#result-dialog[data-phase="duet"] #reveal-capsule{visibility:hidden;pointer-events:none}
#result-dialog[data-phase="duet"] #result-rarity{visibility:visible}
#result-dialog[data-phase="duet"] .result-halo{opacity:1}
#result-dialog[data-phase="duet"] .result-rays{opacity:.35}
#result-dialog[data-phase="duet"] .capsule-shadow,#result-dialog[data-phase="duet"] .reveal-hint{visibility:hidden}
#result-dialog[data-phase="duet"] .result-companions img{visibility:hidden}
#result-dialog[data-phase="duet"] #result-message{color:var(--accent);font-weight:800}

.gacha-free-message{position:relative;z-index:2;display:inline-block;margin:4px 0 9px;padding:7px 19px;border:1px solid #f7c6d9;border-radius:30px;background:#fff0f6;color:#bd4376;font-size:16px;font-weight:800;line-height:1.5;text-align:center}

/* The secret has a distinct, gentle lavender reveal. */
#result-dialog[data-rarity="secret"]{--accent:#9659ac;--shell:#e2b4ec;--shell-deep:#a079d0;--glow:#ffdaed;--wash:#fbf0ff}
#result-dialog[data-rarity="secret"] .result-rays{opacity:.9}