@property --gb-a{syntax:"<angle>";inherits:false;initial-value:0deg}.gb{position:relative}.gb-frame{isolation:isolate;background:#060818;border-radius:30px;justify-content:space-between;align-items:center;gap:24px;min-height:300px;padding:30px clamp(28px,3.6vw,60px);display:flex;position:relative;overflow:hidden;box-shadow:0 30px 70px -40px #000,0 0 60px -30px #506eff80}.gb-frame:before{content:"";z-index:3;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--gb-a), #ffffff14, #6e96fff2, #ffffff14 40%, #a06effd9 70%, #ffffff14);opacity:.8;padding:1.5px;animation:9s linear infinite gb-edge;position:absolute;inset:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.gb:hover .gb-frame:before{opacity:1}@keyframes gb-edge{to{--gb-a:360deg}}.gb-bg,.gb-shade{z-index:-3;position:absolute;inset:0}.gb-bg{background:#04050f url(/banners/gacha-bg.webp) 50%/cover no-repeat;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}.gb:hover .gb-bg{transform:scale(1.04)}.gb[data-v=sakura] .gb-bg,.gb[data-v=aurora] .gb-bg{background:#04050f url(/banners/gacha-sakura.webp) 62% 24%/cover no-repeat}.gb[data-v=aurora] .gb-bg:after{content:"";mix-blend-mode:screen;opacity:.4;background:url(/banners/gacha-bg.webp) 50%/cover no-repeat;position:absolute;inset:0}.gb-shade{z-index:-2;background:linear-gradient(90deg,#040614e6 0%,#04061499 36%,#04061400 68%),linear-gradient(#0000 62%,#040614b3),radial-gradient(45% 90% at 78%,#826eff42,#0000 70%)}.gb-glow{z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#5a82ff47,#0000 72%);width:55%;height:120%;position:absolute;top:-40%;left:-6%}.gb-shine{z-index:-1;pointer-events:none;background:linear-gradient(105deg,#0000 38%,#ffffff14 48%,#0000 58%);animation:8s ease-in-out infinite gb-shine;position:absolute;inset:0;transform:translate(-120%)}@keyframes gb-shine{0%,55%{transform:translate(-120%)}85%,to{transform:translate(120%)}}.gb-sp{left:var(--x);top:calc(14% + var(--d) * 9%);z-index:-1;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 6px #7fa2ff);opacity:0;width:12px;height:12px;animation:4.4s ease-in-out infinite gb-twinkle;animation-delay:var(--d);background:linear-gradient(135deg,#fff,#9fb8ff);text-decoration:none;position:absolute}.gb-sp:nth-of-type(2n){width:8px;height:8px}@keyframes gb-twinkle{0%,to{opacity:0;transform:scale(.4)rotate(0)}50%{opacity:.9;transform:scale(1)rotate(45deg)}}.gb-left{z-index:1;align-items:center;min-width:0;display:flex;position:relative}.gb-text{flex-direction:column;align-items:flex-start;gap:12px;min-width:0;display:flex}.gb-eyebrow{letter-spacing:.2em;text-transform:uppercase;color:#8fb4ff;background:#5a82ff14;border:1px solid #82a5ff57;border-radius:99px;align-items:center;gap:9px;margin:0;padding:8px 18px;font-size:11px;font-weight:900;display:inline-flex;box-shadow:0 0 18px -6px #5a82ffa6}.gb-eyebrow:before{content:"";clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);background:linear-gradient(135deg,#fff,#8fb4ff);width:13px;height:13px;animation:2.8s ease-in-out infinite gb-twinkle}.gb-title{font-family:var(--font-display,inherit);letter-spacing:-.03em;flex-direction:column;align-items:flex-start;margin:0;font-weight:900;line-height:.95;display:flex}.gb-t1{letter-spacing:.34em;text-transform:uppercase;color:#ffffffeb;text-shadow:0 2px 20px #0009;padding-left:3px;font-size:clamp(22px,2.2vw,30px)}.gb-t2{background:linear-gradient(100deg,#fff 0%,#cfe0ff 22%,#6fa8ff 45%,#9a7bff 70%,#e08bff 100%) 0 0/200% 100%;-webkit-text-fill-color:transparent;color:#0000;filter:drop-shadow(0 3px #14145acc)drop-shadow(0 0 26px #6482ff80)drop-shadow(0 10px 22px #000000b3);-webkit-background-clip:text;background-clip:text;padding:4px 8px 8px 0;font-size:clamp(42px,4.8vw,70px);font-style:normal;animation:7s ease-in-out infinite alternate gb-flow}@keyframes gb-flow{to{background-position:100% 0}}.gb-orn{background:linear-gradient(90deg,#82a5ff00,#82a5ffcc) 0/calc(50% - 14px) 1px no-repeat,linear-gradient(270deg,#82a5ff00,#82a5ffcc) 100%/calc(50% - 14px) 1px no-repeat;width:min(100%,360px);height:12px;margin-top:-4px;display:block;position:relative}.gb-orn:after{content:"";clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 6px #7fa2ff);background:linear-gradient(135deg,#fff,#8fb4ff);width:12px;height:12px;position:absolute;top:50%;left:50%;translate:-50% -50%}.gb-ladder{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.gb-ladder li{border:1px solid color-mix(in srgb, var(--c) 45%, transparent);box-shadow:0 0 16px -8px var(--c);background:#080a1c99;border-radius:99px;align-items:center;gap:7px;padding:6px 12px 6px 10px;font-size:12px;display:inline-flex}.gb-ladder i{background:var(--c);width:8px;height:8px;box-shadow:0 0 8px var(--c);rotate:45deg}.gb-ladder b{color:var(--c);letter-spacing:.04em;font-weight:900}.gb-ladder span{color:#ffffffb3;font-variant-numeric:tabular-nums;font-weight:700}.gb-kanji{z-index:-1;letter-spacing:.04em;color:#0000;-webkit-text-stroke:1.5px #96b4ff38;text-shadow:0 0 60px #6482ff40;-webkit-user-select:none;user-select:none;pointer-events:none;font-family:Noto Serif JP,Yu Mincho,Hiragino Mincho ProN,serif;font-size:clamp(110px,14vw,210px);font-weight:900;line-height:1;position:absolute;top:46%;left:47%;translate:-50% -50%}.gb-petals{z-index:-1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.gb-petals b{top:-20px;left:var(--x);width:var(--s);height:calc(var(--s) * .7);opacity:0;animation:gb-petal var(--d) linear infinite;animation-delay:var(--w);background:linear-gradient(135deg,#ffd7ec,#ff8fc4);border-radius:80% 0;position:absolute}@keyframes gb-petal{0%{opacity:0;transform:translate(0)rotate(0)}12%{opacity:.75}to{opacity:0;transform:translate(-120px,300px)rotate(400deg)}}.gb-sub{color:#ffffffb3;max-width:40ch;margin:0;font-size:14.5px;line-height:1.55}.gb-row{flex-wrap:wrap;align-items:center;gap:18px;margin-top:4px;display:flex}.gb-cta{letter-spacing:.015em;color:#fff;text-shadow:0 1px 8px #0a145a80;background:linear-gradient(100deg,#3f8cff 0%,#4a6dff 30%,#8a5cff 72%,#b457ff 100%);border:1px solid #c8dcff99;border-radius:20px;align-items:center;gap:12px;padding:16px 30px;font-size:15.5px;font-weight:700;text-decoration:none;transition:transform .2s,filter .2s;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 0 0 1px #6496ff40,0 14px 34px -10px #4678ffcc,0 0 26px -6px #965aff8c,inset 0 1px #ffffff8c,inset 0 -12px 20px -12px #28148c8c}.gb-cta:before{content:"";pointer-events:none;background:linear-gradient(#ffffff57,#fff0);border-radius:0 0 50% 50%/0 0 100% 100%;height:46%;position:absolute;top:0;left:6%;right:6%}.gb-cta:after{content:"";background:linear-gradient(100deg,#0000 35%,#fff6,#0000 65%);animation:5s ease-in-out infinite gb-shine;position:absolute;inset:0;transform:translate(-120%)}.gb-spark{color:#fff;filter:drop-shadow(0 0 6px #ffffffb3)}.gb-cta svg:last-child{transition:transform .2s}.gb-cta:hover{filter:brightness(1.08)saturate(1.1);transform:translateY(-1px)}.gb:hover .gb-cta svg:last-child{transform:translate(3px)}.gb-cta:focus-visible,.gb-all:focus-visible,.gb-fan:focus-visible{outline-offset:3px;outline:2px solid #fff}.gb-all{color:#ffffff9e;align-items:center;gap:7px;padding:6px 4px;font-size:14px;font-weight:700;text-decoration:none;transition:color .2s,gap .2s;display:inline-flex}.gb-all b{color:#fff;font-variant-numeric:tabular-nums;font-size:20px;font-weight:900}.gb-all:hover{color:#fff;gap:10px}.gb{--fan-w:clamp(400px, 43vw, 660px);--card-w:clamp(110px, 11.6vw, 176px)}.gb-frame{min-height:300px;padding-right:calc(var(--fan-w) + clamp(24px, 4vw, 70px))}.gb-fan{z-index:2;width:var(--fan-w);height:calc(var(--card-w) * 1.4 * 1.24 + 14px);text-decoration:none;display:block;position:absolute;bottom:-22px;right:clamp(40px,5vw,96px)}.gb-card{width:var(--card-w);transform-origin:50% 118%;transform:translate(-50%, var(--y)) rotate(var(--r));filter:drop-shadow(0 20px 22px #0009);transition:transform .35s cubic-bezier(.2,.8,.2,1);position:absolute;bottom:0}.gb-card:first-child{left:12%}.gb-card:nth-child(2){left:31.5%}.gb-card:nth-child(3){width:calc(var(--card-w) * 1.24);left:50%}.gb-card:nth-child(4){left:68.5%}.gb-card:nth-child(5){left:88%}.gb-fan .gc{animation:5.4s ease-in-out infinite gb-card-float}.gb-card:nth-child(2) .gc{animation-delay:-1s}.gb-card:nth-child(3) .gc{animation-delay:-2.2s}.gb-card:nth-child(4) .gc{animation-delay:-3.1s}.gb-card:nth-child(5) .gc{animation-delay:-4s}@keyframes gb-card-float{50%{transform:translateY(-5px)}}.gb:hover .gb-card:first-child{transform:translate(calc(-50% - 14px), calc(var(--y) + 4px)) rotate(-19deg)}.gb:hover .gb-card:nth-child(2){transform:translate(calc(-50% - 8px), calc(var(--y) - 6px)) rotate(-10deg)}.gb:hover .gb-card:nth-child(3){transform:translate(-50%, calc(var(--y) - 16px)) scale(1.04)}.gb:hover .gb-card:nth-child(4){transform:translate(calc(-50% + 8px), calc(var(--y) - 6px)) rotate(10deg)}.gb:hover .gb-card:nth-child(5){transform:translate(calc(-50% + 14px), calc(var(--y) + 4px)) rotate(19deg)}@media (max-width:900px){.gb{--fan-w:min(92%, 380px);--card-w:clamp(70px, 20vw, 96px)}.gb[data-v] .gb-shade{background:linear-gradient(#030514db,#03051480 55%,#03051426)}.gb-frame{padding:22px 20px calc(var(--card-w) * 1.4 + 28px);flex-direction:column;align-items:stretch;min-height:0}.gb-fan{height:calc(var(--card-w) * 1.4 * 1.14 + 12px);bottom:-16px;left:50%;right:auto;transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.gb-shine,.gb-sp,.gb-fan .gc{animation:none}}.gb-altar{width:var(--fan-w);z-index:0;pointer-events:none;height:62%;position:absolute;bottom:0;right:clamp(40px,5vw,96px)}.gb-pool{background:radial-gradient(50% 50% at 50% 60%,#7896ff8c,#6e5aff2e 45%,#0000 70%);height:120%;position:absolute;inset:auto -8% -34%}.gb-ring{border:1px solid #aac3ff59;border-radius:50%;height:74%;position:absolute;bottom:-26%;left:6%;right:6%;box-shadow:0 0 24px -4px #6e96ff73,inset 0 0 30px -10px #6e96ff66;-webkit-mask-image:linear-gradient(#000 0%,#0000 62%);mask-image:linear-gradient(#000 0%,#0000 62%)}.gb-ring-2{height:100%;box-shadow:none;border-color:#aac3ff29;bottom:-42%;left:-6%;right:-6%}.gb-card:nth-child(3){filter:drop-shadow(0 24px 26px #000000a6)drop-shadow(0 0 22px #ff506452)}@keyframes gb-rise{0%{opacity:0;translate:0 46px}}@keyframes gb-fade{0%{opacity:0;translate:-14px}}.gb-card{animation:.9s cubic-bezier(.2,.8,.2,1) both gb-rise}.gb-card:first-child{animation-delay:.25s}.gb-card:nth-child(2){animation-delay:.35s}.gb-card:nth-child(4){animation-delay:.45s}.gb-card:nth-child(5){animation-delay:.55s}.gb-card:nth-child(3){animation-delay:.7s}.gb-left{animation:.8s ease-out both gb-fade}@media (max-width:900px){.gb-altar{height:48%;left:50%;right:auto;transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.gb-card,.gb-left,.gb-rays,.gb-t2,.gb-petals b,.gb-frame:before,.gb-sp,.gb-eyebrow:before,.gb-cta:after{animation:none}}@media (max-width:520px){.gb-eyebrow{letter-spacing:.06em;font-size:11px}.gb-dot{display:none}}@media (max-width:900px){.gb-kanji{font-size:110px;top:26%;left:auto;right:4%}.gb-t2{font-size:clamp(42px,13vw,64px)}}.gb-rays{aspect-ratio:1;z-index:-1;pointer-events:none;background:repeating-conic-gradient(#8caaff33 0deg 4deg,#0000 4deg 18deg);width:130%;animation:80s linear infinite gb-spin;position:absolute;top:46%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(closest-side,#000 8%,#0000 70%);mask:radial-gradient(closest-side,#000 8%,#0000 70%)}@keyframes gb-spin{to{rotate:360deg}}.gb-ladder{gap:6px}@media (max-width:1100px){.gb-ladder li:nth-child(n+4){display:none}}.gb-ladder{flex-basis:100%}.gb-cta{letter-spacing:.02em;text-shadow:0 1px 10px #14085ab3;background:linear-gradient(135deg,#8a7bff 0%,#5a3df0 38%,#3a22b8 72%,#261481 100%);border:0;border-radius:18px;padding:17px 30px 17px 26px;font-weight:800;box-shadow:0 16px 36px -12px #6e50ffe6,0 0 30px -8px #a06eff8c,inset 0 0 0 1px #28148c66,inset 0 1px #ffffff4d,inset 0 -14px 22px -14px #14065acc}.gb-cta:before{background:linear-gradient(#ffffff4d,#ffffff0a 85%,#0000);height:50%;left:4%;right:4%}.gb-cta svg:last-child{box-sizing:content-box;background:#ffffff29;border-radius:50%;padding:6px;box-shadow:inset 0 0 0 1px #ffffff59}.gb-cta:hover{filter:brightness(1.1)saturate(1.1);transform:translateY(-2px);box-shadow:0 20px 42px -12px #785aff,0 0 38px -6px #aa78ffb3,inset 0 0 0 1px #28148c66,inset 0 1px #fff6,inset 0 -14px 22px -14px #14065acc}
