.gacha-animation{width:100%;min-width:0}.gacha-animation [hidden]{display:none!important}
.ga-stage{--rank-color:#aa74ff;position:relative;isolation:isolate;overflow:hidden;min-height:565px;padding:26px 24px 22px;text-align:center;color:#383950;border:2px solid #41415f;border-radius:28px;background-color:#fff3d9;background-image:radial-gradient(#eddfcb 1px,transparent 1px);background-size:16px 16px;box-shadow:7px 8px 0 #41415f18}
.ga-stage:before{content:'';position:absolute;pointer-events:none;inset:17% 5% 19%;border-radius:50%;background:#fffaf0;z-index:-1}
.ga-topline{display:flex;justify-content:space-between;align-items:center;gap:12px}.ga-eyebrow{font-size:11px;letter-spacing:.12em;font-weight:800;color:#555570}.ga-style-tag{border:1px solid #77748d;border-radius:20px;padding:4px 10px;font-size:10px;background:#fffaf0;font-weight:700}.ga-heading{font-size:24px;line-height:1.5;margin:23px 0 0;color:#383950}.ga-scene{height:340px;width:100%;position:relative;touch-action:pan-y}.ga-scene canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}.ga-scene canvas:active{cursor:grabbing}
.ga-status{font-size:13px;font-weight:700;min-height:22px;margin:2px 0 17px}.ga-controls{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.ga-controls button{width:auto;min-height:44px;margin:0;border:2px solid #41415f;border-radius:30px;padding:10px 25px;font-size:13px;font-weight:700}.ga-controls .ga-start{color:#fff;background:#f15c70;box-shadow:0 4px 0 #41415f}.ga-controls .ga-start:hover{background:#eb455c}.ga-controls .ga-start:disabled{background:#b5a7b1;box-shadow:none}.ga-controls .ga-skip{background:#fffaf0;color:#41415f}.ga-footnote{font-size:10px;color:#777386;margin:18px 0 0}.ga-prize{position:absolute;z-index:3;top:34%;left:50%;transform:translateX(-50%);width:min(290px,82%);padding:23px 20px;border:2px solid #41415f;border-radius:20px;background:#fffdf5;color:#383950;box-shadow:6px 7px 0 #41415f26,0 0 50px var(--rank-color);overflow-wrap:anywhere}.ga-prize h3{font-size:21px;line-height:1.5;color:inherit;margin:13px 0}.ga-prize p{font-size:11px;color:#7b7080;margin:0}.ga-rank{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 10px;border:2px solid #41415f;border-radius:13px;background:var(--rank-color);font-weight:900;font-size:26px;color:#383950;box-shadow:3px 3px 0 #41415f}.ga-stage[data-phase=result] .ga-prize{animation:ga-pop .4s ease-out both}.ga-stage[data-phase=opening]:before{background:color-mix(in srgb,var(--rank-color) 28%,#fffaf0);transition:background .3s}
.ga-preview-page{max-width:1120px;margin:auto}.ga-preview-intro{margin:30px 0}.ga-preview-kicker{font-size:11px;letter-spacing:.15em;font-weight:700;color:#d24c65}.ga-preview-intro h1{font-size:clamp(25px,4vw,39px);margin:12px 0 16px;color:#383950}.ga-preview-intro>p:last-child{font-size:14px;color:#6f6e82;line-height:1.9}.ga-preview-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:26px;align-items:start}.ga-settings{background:#fff;border:1px solid #dedbe6;border-radius:22px;padding:25px}.ga-settings h2{font-size:19px;color:#383950;margin:0 0 23px}.ga-settings label{font-size:13px;font-weight:700}.ga-settings select{width:100%;border-radius:9px;min-height:44px}.ga-settings p{font-size:12px;line-height:1.85}.ga-settings a{display:inline-block;margin-top:12px}.ga-rank-legend{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:17px 0;font-size:11px;color:#555570}.ga-rank-legend span{display:flex;align-items:center;gap:7px}.ga-rank-legend i{display:inline-block;width:13px;height:13px;border:1px solid #41415f;border-radius:4px}.ga-settings-note{padding:13px;border-radius:10px;background:#f6f3fb;color:#66617e}.ga-preview-link{display:inline-block;margin:8px 0 18px}
@keyframes ga-pop{from{opacity:0;transform:translate(-50%,15px) scale(.88)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-width:700px){.ga-preview-layout{grid-template-columns:1fr}.ga-stage{min-height:530px;padding:21px 15px 19px;border-radius:23px}.ga-heading{font-size:21px;margin-top:22px}.ga-scene{height:310px}.ga-settings{padding:21px}.ga-preview-intro{margin:25px 0}.ga-preview-intro h1{font-size:26px;text-wrap:balance}.ga-controls button{padding:10px 18px}}
@media(prefers-reduced-motion:reduce){.gacha-animation *{animation:none!important;transition:none!important}}

.ga-stage[data-kind=pack] .ga-scene,.ga-stage[data-kind=pack] canvas{touch-action:none}.ga-tear-guide{position:absolute;z-index:2;top:16%;left:50%;transform:translateX(-50%);width:min(215px,75%);height:44px;cursor:ew-resize;touch-action:none}.ga-tear-guide span{position:absolute;top:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#535178;background:#fffaf0e8;border-radius:20px;padding:5px 12px}.ga-tear-guide:before{content:"";position:absolute;top:17px;left:0;width:100%;border-top:2px dashed #bba7fa}.ga-tear-guide i{position:absolute;top:15px;left:0;width:calc(var(--cut-progress,0)*100%);height:5px;border-radius:5px;background:#fff;box-shadow:0 0 10px #99deff,0 0 3px #7db9ff}.ga-stage[data-phase=opening] .ga-tear-guide,.ga-stage[data-phase=result] .ga-tear-guide,.ga-stage[data-phase=loading] .ga-tear-guide,.ga-stage[data-phase=dropping] .ga-tear-guide{display:none}

.ga-stage{border-width:1px;box-shadow:0 8px 24px #41415f0a}.ga-prize{border-width:1px;box-shadow:0 8px 22px #41415f18,0 0 35px var(--rank-color)}.ga-rank{border-width:1px;box-shadow:none}.ga-controls button{border-width:1px}.ga-controls .ga-start{box-shadow:0 2px 0 #41415f}.ga-style-tag{border-color:#b7b3c1}

body.gacha-fullscreen-open{overflow:hidden}
dialog.ga-fullscreen{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#fff3d9;overflow:auto;overscroll-behavior:contain}
.ga-fullscreen::backdrop{background:#fff3d9}
.ga-fullscreen .gacha-animation{min-height:100%;height:100%}
.ga-fullscreen .ga-stage{display:flex;flex-direction:column;min-height:100%;height:100%;box-sizing:border-box;border:0;border-radius:0;box-shadow:none;padding:0}
.ga-fullscreen .ga-scene{flex:1 1 auto;min-height:180px;height:auto}
.ga-fullscreen .ga-heading{margin-top:16px}
.ga-fullscreen .ga-prize{top:50%;transform:translate(-50%,-50%);width:min(420px,85%);box-sizing:border-box;max-height:65dvh;overflow:auto}
.ga-fullscreen .ga-stage[data-phase=result] .ga-prize{animation:none}
.ga-fullscreen .ga-controls .ga-done{background:#383950;color:#fff}
@media(max-height:550px){.ga-fullscreen .ga-heading{font-size:18px;margin-top:4px}.ga-fullscreen .ga-scene{min-height:100px}.ga-fullscreen .ga-footnote{margin-top:8px}}

.ga-prize-image{display:block;width:100%;height:min(28dvh,240px);object-fit:contain;margin:16px auto 0;border-radius:8px}
@media(max-height:550px){.ga-prize-image{height:20dvh}.ga-fullscreen .ga-prize{padding:12px}.ga-fullscreen .ga-prize h3{font-size:16px;margin:8px 0}}
.ga-prize:has(.ga-prize-image){top:18%;max-height:66%;overflow:auto;box-sizing:border-box}
.ga-prize-image{height:min(20dvh,140px)}
.ga-fullscreen .ga-prize:has(.ga-prize-image){top:50%;max-height:65dvh}
.ga-fullscreen .ga-prize-image{height:min(28dvh,240px)}

.ga-fullscreen :is(.ga-topline,.ga-heading,.ga-footnote){display:none}
.ga-fullscreen .ga-stage[data-phase=result] :is(.ga-status,.ga-controls){display:none}
.ga-fullscreen>.ga-continue,.ga-fullscreen>.ga-continue:hover,.ga-fullscreen>.ga-continue:focus-visible{position:fixed;inset:0;z-index:10;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;cursor:pointer}
.ga-fullscreen>.ga-continue[hidden]{display:none}
/* Overlay the opening controls at the bottom without shrinking the animation. */
.ga-fullscreen .ga-status{position:absolute;z-index:4;top:auto;bottom:calc(max(15dvh,env(safe-area-inset-bottom)) + 60px);left:16px;right:16px;margin:0;text-shadow:0 1px 4px #fffaf0}
.ga-fullscreen .ga-controls{position:absolute;z-index:4;top:auto;bottom:max(15dvh,env(safe-area-inset-bottom));left:16px;right:16px;gap:10px}
.ga-fullscreen .ga-scene{height:100%;min-height:0}
@media(min-width:701px){.ga-fullscreen .ga-status{bottom:calc(max(10dvh,env(safe-area-inset-bottom)) + 60px)}.ga-fullscreen .ga-controls{bottom:max(10dvh,env(safe-area-inset-bottom))}}
