.gate{display:none}html[data-gate=on] .gate,.gate[data-leaving]{display:grid}html[data-gate=on]{scrollbar-gutter:stable;overflow:hidden}html[data-gate=on] body>:not(.gate){visibility:hidden}.gate{--stage-h:min(26rem, 40svh, (100vw - 2rem) * .75);--coin:calc(var(--stage-h) * .8);--thick:calc(var(--coin) * .075);--glow:min(var(--coin) * 2.6, 100vw - 2rem);--gold-hi:color-mix(in oklab, var(--gold) 48%, white);--gold-lo:color-mix(in oklab, var(--gold) 55%, #3b1900);--gold-deep:color-mix(in oklab, var(--gold) 22%, #1d0902);--night:#170505;z-index:300;background:var(--ground);place-items:center;padding:1rem;position:fixed;inset:0;overflow:hidden}@supports (color:lab(0% 0 0)){.gate{--gold-lo:color-mix(in oklab, var(--gold) 55%, lab(13.766% 16.7659 22.1794));--gold-deep:color-mix(in oklab, var(--gold) 22%, lab(4.252% 8.01018 5.662));--night:lab(2.86489% 6.4978 2.30744)}}.gate:focus-visible{box-shadow:none}.gate[data-leaving]{pointer-events:none;animation:gate-out .32s var(--ease-out) forwards}@keyframes gate-out{to{opacity:0}}.gate-column{flex-direction:column;align-items:center;width:min(100%,36rem);display:flex}.gate-stage{width:calc(var(--stage-h) * 4 / 3);height:var(--stage-h);place-items:center;display:grid;position:relative}.gate-glow{width:var(--glow);height:var(--glow);margin:calc(var(--glow) / -2) 0 0 calc(var(--glow) / -2);background:radial-gradient(closest-side, color-mix(in oklab, var(--brand) 34%, transparent), transparent);opacity:.6;transition:opacity .6s var(--ease-out);border-radius:50%;position:absolute;top:50%;left:50%}.gate-glow-gold{background:radial-gradient(closest-side, color-mix(in oklab, var(--gold) 26%, transparent), transparent);opacity:0}.gate[data-result=lucky] .gate-glow{opacity:0}.gate[data-result=unlucky] .gate-glow:not(.gate-glow-gold),.gate[data-result=lucky] .gate-glow-gold{opacity:1}.gate-shadow{width:calc(var(--coin) * .72);height:calc(var(--coin) * .1);margin-left:calc(var(--coin) * -.36);background:radial-gradient(closest-side,#000000d9,#0000);background:radial-gradient(closest-side,lab(.0222645% .0780076 .0246882/.85),#0000);border-radius:50%;position:absolute;bottom:0;left:50%}.gate-seat{width:var(--coin);height:var(--coin);transition:transform .64s var(--ease-out) .36s;position:relative}.gate[data-result=lucky] .gate-seat{transform:translateY(calc(var(--stage-h) * -.5)) scale(.4)}.gate-toss{width:100%;height:100%;perspective:calc(var(--coin) * 4);animation:2.8s ease-in-out infinite alternate gate-float;position:relative}.gate-tilt,.gate-spin{width:100%;height:100%;transform-style:preserve-3d;position:relative}.gate-tilt{animation:3.6s ease-in-out infinite alternate gate-rock}.gate-spin{will-change:transform}.gate-face,.gate-core{border-radius:50%;position:absolute;inset:0}.gate-face{backface-visibility:hidden;transform:translateZ(calc(var(--thick) / 2))}.gate-face-back{transform:rotateX(180deg) translateZ(calc(var(--thick) / 2))}.gate-face svg{width:100%;height:100%;display:block}.gate-core{background:var(--gold-deep);inset:.5%}.gate-edge{--lit:calc((1 + cos(var(--a))) / 2);width:calc(var(--coin) * .0885);height:var(--thick);margin:calc(var(--thick) / -2) 0 0 calc(var(--coin) * -.04425);backface-visibility:hidden;background:repeating-linear-gradient(90deg, transparent 0 12%, #0000006b 12% 25%), linear-gradient(#0000004d, transparent 22% 78%, #0000004d), color-mix(in oklab, var(--gold-hi) calc(var(--lit) * 100%), var(--gold-lo));transform:rotateZ(var(--a)) translateY(calc(var(--coin) * -.499)) rotateX(90deg);position:absolute;top:50%;left:50%}@supports (color:lab(0% 0 0)){.gate-edge{background:repeating-linear-gradient(90deg, transparent 0 12%, lab(0% 0 0/.42) 12% 25%), linear-gradient(lab(0% 0 0/.3), transparent 22% 78%, lab(0% 0 0/.3)), color-mix(in oklab, var(--gold-hi) calc(var(--lit) * 100%), var(--gold-lo))}}.gate-glint{pointer-events:none;border-radius:50%;position:absolute;inset:-.5%;overflow:hidden}.gate-glint i{opacity:0;background:linear-gradient(90deg,#0000,#fff9 50%,#0000);background:linear-gradient(90deg,#0000,lab(100% 0 0/.6) 50%,#0000);width:42%;position:absolute;top:-10%;bottom:-10%;left:0}.gate-ring{width:var(--coin);height:var(--coin);border:2px solid color-mix(in oklab, var(--gold) 70%, transparent);opacity:0;border-radius:50%;position:absolute}.gate:not([data-stage=ask]) .gate-toss{animation:2s both gate-toss}.gate:not([data-stage=ask]) .gate-tilt{animation:2s both gate-tilt}.gate:not([data-stage=ask]) .gate-spin{animation:2s both gate-spin}.gate:not([data-stage=ask]) .gate-shadow{animation:2s both gate-shadow}.gate:not([data-stage=ask]) .gate-glint i{animation:gate-glint .46s var(--ease-out) 1.58s both}.gate:not([data-stage=ask]) .gate-ring{animation:gate-ring .62s var(--ease-out) 1.6s forwards}@keyframes gate-float{0%{transform:translateY(-2%)}to{transform:translateY(2%)}}@keyframes gate-rock{0%{transform:rotate(0)rotateY(-11deg)}to{transform:rotate(0)rotateY(11deg)}}@keyframes gate-toss{0%{animation-timing-function:var(--ease-out);transform:translateY(0)scale(1)}6%{animation-timing-function:cubic-bezier(.2,.75,.3,1);transform:translateY(4%)scale(.96)}40%{animation-timing-function:cubic-bezier(.6,0,.9,.5);transform:translateY(-58%)scale(1.1)}80%{animation-timing-function:cubic-bezier(.1,.6,.4,1);transform:translateY(0)scale(1)}87%{animation-timing-function:cubic-bezier(.6,0,.9,.6);transform:translateY(-5%)scale(1.012)}94%,to{transform:translateY(0)scale(1)}}@keyframes gate-spin{0%{animation-timing-function:var(--ease-out);transform:rotateX(0)}6%{animation-timing-function:cubic-bezier(.22,.62,.5,.94);transform:rotateX(-14deg)}80%{transform:rotateX(var(--turn));animation-timing-function:cubic-bezier(.2,.6,.4,1)}87%{transform:rotateX(calc(var(--turn) + 7deg));animation-timing-function:cubic-bezier(.4,0,.3,1)}96%,to{transform:rotateX(var(--turn))}}@keyframes gate-tilt{0%{animation-timing-function:ease-in-out;transform:rotate(0)rotateY(0)}40%{animation-timing-function:ease-in-out;transform:rotate(-8deg)rotateY(12deg)}80%,to{transform:rotate(0)rotateY(0)}}@keyframes gate-shadow{0%{opacity:1;animation-timing-function:cubic-bezier(.2,.75,.3,1);transform:scale(1)}40%{opacity:.35;animation-timing-function:cubic-bezier(.6,0,.9,.5);transform:scale(.55)}80%,to{opacity:1;transform:scale(1)}}@keyframes gate-glint{0%{opacity:0;transform:translate(-110%)skew(-18deg)}30%{opacity:1}to{opacity:0;transform:translate(250%)skew(-18deg)}}@keyframes gate-ring{0%{opacity:.7;transform:scale(.92)}to{opacity:0;transform:scale(1.5)}}.gate-cats{border:1px solid color-mix(in oklab, var(--gold) 50%, transparent);border-radius:var(--r-xl);background:var(--sunk);opacity:0;transition:opacity .52s var(--ease-out) .36s, transform .64s var(--ease-out) .36s;position:absolute;inset:0;overflow:hidden;transform:translateY(4%)scale(.94);box-shadow:inset 0 1px #ffffff14,0 32px 64px -24px #000000d9;box-shadow:inset 0 1px lab(100% 0 0/.08),0 32px 64px -24px lab(.0200005% .181749 .0392944/.85)}.gate[data-result=lucky] .gate-cats{opacity:1;transform:none}.gate-cats img,.gate-cats video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.gate-burst{position:absolute;top:50%;left:50%}.gate-burst i{background:var(--gold);opacity:0;border-radius:1.5px;width:6px;height:11px;margin:-5.5px 0 0 -3px;position:absolute}.gate-burst i:nth-child(3n){background:var(--gold-hi)}.gate-burst i:nth-child(4n){background:var(--brand-glow)}.gate[data-result=lucky] .gate-burst i{animation:1.1s cubic-bezier(.1,.7,.3,1) both gate-shard}@keyframes gate-shard{0%{opacity:1;transform:translate(0)rotate(0)scale(.4)}60%{opacity:1}to{transform:translate(calc(cos(var(--a)) * var(--d) * var(--coin)), calc(sin(var(--a)) * var(--d) * var(--coin))) rotate(calc(var(--a) * 3)) scale(1);opacity:0}}.gate-line{place-items:center;width:100%;height:2.5rem;margin-top:clamp(1.25rem,4svh,2.25rem);display:grid}.gate-line h2{letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;animation:gate-rise .42s var(--ease-out) both;font-size:clamp(1.25rem,5.6vw,2.5rem);font-weight:800;line-height:1}.gate[data-result=lucky] .gate-line h2{color:var(--gold)}.gate[data-result=unlucky] .gate-line h2{color:var(--brand-glow)}.gate-actions{justify-content:center;gap:.75rem;width:min(100%,21rem);height:3.5rem;margin-top:clamp(1rem,3svh,1.75rem);display:flex}.gate[data-stage=done] .gate-actions>*{animation:gate-rise .42s var(--ease-out) 80ms both}@keyframes gate-rise{0%{opacity:0;transform:translateY(8px)}}.gate-skip{position:absolute;top:1rem;right:1rem}.gate-skip kbd{border:1px solid var(--line-strong);border-radius:var(--r-xs);color:var(--ink-3);padding:2px 5px;font-size:10px;line-height:12px}@media (pointer:coarse){.gate-skip kbd{display:none}}@media (prefers-reduced-motion:reduce){.gate[data-stage] .gate-toss,.gate[data-stage] .gate-tilt,.gate[data-stage] .gate-shadow,.gate[data-stage] .gate-glint i,.gate[data-stage] .gate-ring,.gate[data-stage] .gate-burst i{animation:none}.gate[data-stage] .gate-spin{transform:rotateX(var(--turn));animation:none}}.cg-gold-hi{stop-color:var(--gold-hi)}.cg-gold{stop-color:var(--gold)}.cg-gold-lo{stop-color:var(--gold-lo)}.cg-crimson-hi{stop-color:var(--brand-glow)}.cg-crimson{stop-color:var(--brand)}.cg-crimson-lo{stop-color:var(--hot)}.cg-bone-hi{stop-color:var(--ink)}.cg-bone-lo{stop-color:color-mix(in oklab, var(--ink) 62%, var(--gold-lo))}.cg-fill-deep{fill:var(--gold-deep)}.cg-fill-night{fill:var(--night)}.cg-fill-crimson-hi{fill:var(--brand-glow)}.cg-fill-crimson-lo{fill:var(--hot)}.cg-stroke-hi{stroke:var(--gold-hi)}.cg-stroke-gold{stroke:var(--gold)}.cg-stroke-deep{stroke:var(--gold-deep)}.cg-stroke-night{stroke:var(--night)}.cg-relief{filter:drop-shadow(0 2.5px .75px #0006);filter:drop-shadow(0 2.5px .75px lab(0% 0 0/.4))}
