.cine{position:fixed;inset:0;z-index:2147483600;overflow:hidden;background:#02040c;color:#fff;outline:0;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.cine[hidden],.cine [hidden]{display:none!important}
.cine img{-webkit-user-drag:none;user-select:none}
.cn-fx{position:absolute;inset:0;display:block;width:100%;height:100%}
.cn-layer{position:absolute;inset:0;pointer-events:none}
.cn-top{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:14px 18px;pointer-events:none}
.cn-count{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:36px}
.cn-cnt{font:18px/1 var(--f-num);letter-spacing:1.4px;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.cn-dots{display:flex;flex-wrap:wrap;gap:6px;max-width:min(60vw,360px)}
.cn-dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  transition:transform .2s,background-color .2s,box-shadow .2s}
.cn-dots i.cur{transform:scale(1.35);background:#fff;box-shadow:0 0 10px #fff}
.cn-dots i.r-hero{background:#3fd0ff;box-shadow:0 0 6px #3fd0ff}
.cn-dots i.r-extreme{background:#e05cff;box-shadow:0 0 6px #e05cff}
.cn-dots i.r-sparking{background:#ffb11f;box-shadow:0 0 8px #ffb11f}
.cn-dots i.r-ultra{background:linear-gradient(135deg,#ff8ad8,#ffd36e,#9dffb0,#7fd8ff,#c59bff);box-shadow:0 0 9px #bcdcff}
.cn-dots i.r-legend{background:#ffd84d;box-shadow:0 0 9px #ffd84d}
.cn-dots i.r-support{background:#5fb4ff;box-shadow:0 0 6px #5fb4ff}
.cn-dots i.r-item{background:#a9b8d6}
.cn-skip{position:relative;z-index:0;margin-left:auto;padding:10px 24px 9px;border:0;background:none;color:#fff;cursor:pointer;pointer-events:auto;
  font:15px/1 var(--f-lbl);letter-spacing:1.8px;text-transform:uppercase}
.cn-skip span{font-size:11px;letter-spacing:-1px}
.cn-skip::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(6,10,22,.5);border:1px solid rgba(255,255,255,.45);transform:skewX(-14deg);
  transition:background .15s}
.cn-skip:hover::before{background:rgba(255,255,255,.18)}
.cn-skip:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cn-pull{position:absolute;left:0;right:0;top:calc(37% + clamp(64px,15vmin,150px));display:flex;justify-content:center;transform:translateY(var(--dy,0px))}
.cn-pin{display:flex;flex-direction:column;align-items:center}
.cn-pt{--pw:min(150vw,920px);position:relative;width:var(--pw);height:calc(var(--pw)*.14);animation:cnBob 1.5s ease-in-out infinite}
.cn-pt img,.cn-pt .cn-rb{position:absolute;left:0;top:50%;width:100%;aspect-ratio:4/1;transform:translateY(-50%)}
.cn-pt.t-gold img{filter:drop-shadow(0 0 10px rgba(255,190,40,.55))}
.cn-pt.t-red img{filter:drop-shadow(0 0 12px rgba(255,80,30,.6))}
.cn-pt .cn-rb{-webkit-mask:url('/assets/gasha_texts/Gas_txtSwipeULTRA_MaterialMask.webp') center/100% 100% no-repeat;
  mask:url('/assets/gasha_texts/Gas_txtSwipeULTRA_MaterialMask.webp') center/100% 100% no-repeat;
  background:linear-gradient(100deg,#ff7fd0,#ffd56a,#8dffa6,#72d6ff,#bf94ff,#ff7fd0,#ffd56a,#8dffa6) 0 0/250% 100%;opacity:.9;
  animation:cnRainbow 1.6s linear infinite}
.cn-arrow{width:clamp(46px,7.5vmin,74px);height:auto;margin-top:2px;overflow:visible;filter:drop-shadow(0 0 10px rgba(190,255,90,.6)) drop-shadow(0 3px 3px rgba(0,0,0,.5));
  animation:cnArrow .9s ease-in-out infinite}
.cine.armed .cn-arrow{animation-duration:.35s;filter:drop-shadow(0 0 16px rgba(230,255,120,.95))}
.cn-hint{margin:10px 0 0;color:rgba(255,255,255,.82);font:14px/1 var(--f-lbl);letter-spacing:2.2px;text-transform:uppercase;text-shadow:0 1px 4px #000}
@keyframes cnBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes cnArrow{0%,100%{transform:translateY(-4px);opacity:.85}50%{transform:translateY(8px);opacity:1}}
@keyframes cnRainbow{to{background-position:-150% 0}}
.cn-card{--ic:min(42vmin,300px);position:absolute;left:0;right:0;top:calc(42% - var(--ic)/2);display:flex;flex-direction:column;align-items:center;text-align:center}
.cn-ic{position:relative;width:var(--ic);height:var(--ic)}
.cn-ic>img:first-child{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(0,0,0,.55))}
.cn-card.is-item .cn-ic>img:first-child{padding:18%}
.cn-new{position:absolute;left:50%;top:-8%;width:48%;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.cn-ru{position:absolute;right:-6%;top:10%;padding:5px 12px 4px;background:#0b0e18;color:#fff;font:12px/1 var(--f-lbl);letter-spacing:1.2px;
  text-transform:uppercase;clip-path:var(--slant);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.cn-ru.head{background:#ffd84d;color:#3a2c00}
.cn-amt{display:block;color:#4fd2ff;font:clamp(24px,4.2vmin,38px)/1 var(--f-num);letter-spacing:.6px;-webkit-text-stroke:5px #fff;
  paint-order:stroke fill;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.cn-card .cn-amt{position:absolute;left:0;right:0;bottom:-4%;z-index:2;text-align:center}
.cn-logo{display:block;width:min(84vw,420px);margin-top:3%;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.cn-nm{max-width:90vw;margin-top:-2px;font:clamp(17px,2.8vmin,25px)/1.2 var(--f-lbl);letter-spacing:.5px;text-shadow:0 2px 4px #000,0 0 14px rgba(0,0,0,.7)}
.cn-hero{--bh:clamp(128px,min(30vw,34vh),300px);--lw:min(80vw,540px,64vh);--hy:46%;position:absolute;inset:0}
.cn-hero.r-sparking{--rc:#ffb52e}.cn-hero.r-ultra{--rc:#a9d8ff}.cn-hero.r-legend{--rc:#ffd84d}
.cn-band{position:absolute;left:-8%;right:-8%;top:calc(var(--hy) - var(--bh)/2);height:var(--bh);overflow:hidden;transform:skewY(-6deg);
  background:linear-gradient(180deg,rgba(4,6,14,.86),rgba(4,6,14,.38) 45%,rgba(4,6,14,.86));border-top:4px solid var(--rc);border-bottom:4px solid var(--rc);
  box-shadow:0 0 36px -4px var(--rc),inset 0 0 50px rgba(0,0,0,.6)}
.cn-hero.r-ultra .cn-band{border-image:linear-gradient(90deg,#ff8ad8,#ffd36e,#9dffb0,#7fd8ff,#c59bff) 1}
.cn-lines{position:absolute;inset:0;opacity:.55;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.22) 22px 24px,
  transparent 24px 61px,rgba(255,255,255,.12) 61px 62px);animation:cnLines .3s linear infinite}
.cn-cut,.cn-bico{position:absolute;left:50%;top:50%;max-width:none;transform:translate(-50%,-50%) skewY(6deg)}
.cn-cut{height:124%;width:auto}
.cn-bico{display:none;height:118%;width:auto;aspect-ratio:1;object-fit:contain}
.cn-hero.nocut .cn-cut{display:none}
.cn-hero.nocut .cn-bico{display:block}
.cn-hlw{position:absolute;left:0;right:0;top:calc(var(--hy) - var(--bh)/2 - var(--lw)/4 + 2px);display:flex;justify-content:center}
.cn-hl{position:relative;display:block;width:var(--lw);aspect-ratio:4/1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.55))}
.cn-hl>img{display:block;width:100%;height:100%}
.cn-hname{position:absolute;left:0;right:0;top:calc(var(--hy) + var(--bh)/2 + 36px);display:flex;justify-content:center;padding:0 14px}
.cn-hname span{display:block;max-width:min(94vw,920px);color:#fff;font:clamp(22px,4.4vmin,46px)/1.12 'DBL-UI',var(--f-num);text-align:center;
  -webkit-text-stroke:7px #070912;paint-order:stroke fill;text-shadow:0 0 22px var(--rc),0 3px 0 #070912;transform:skewX(-8deg) rotate(-2deg)}
.cn-hmeta{position:absolute;left:0;right:0;top:calc(var(--hy) + var(--bh)/2 + 46px + clamp(30px,6vmin,62px));display:flex;justify-content:center;
  align-items:center;flex-wrap:wrap;gap:6px 12px}
.cn-hzp{width:clamp(54px,9vmin,86px);height:auto;aspect-ratio:1;object-fit:contain}
.cn-hmeta .cn-amt{margin:0}
.cn-hmeta .cn-new{position:static;width:clamp(64px,10vmin,96px);transform:rotate(-6deg)}
.cn-hmeta .cn-ru{position:static}
@keyframes cnLines{to{background-position:-62px 0}}
.cn-tap{position:absolute;left:0;right:0;bottom:max(24px,5vh);z-index:6;margin:0;font:16px/1 var(--f-lbl);letter-spacing:2.6px;text-align:center;
  text-transform:uppercase;text-shadow:0 1px 4px #000,0 0 12px rgba(0,0,0,.6);pointer-events:none;animation:cnBlink 1.4s ease-in-out infinite}
@keyframes cnBlink{0%,100%{opacity:.45}50%{opacity:1}}
.cn-res{position:absolute;inset:0;z-index:5;display:flex;justify-content:center;overflow-y:auto;overscroll-behavior:contain;padding:max(54px,8vh) 14px 28px;
  touch-action:pan-y;cursor:default}
.cn-res-in{width:min(100%,780px);margin:auto 0}
.cn-res-h{position:relative;margin:0 0 30px;padding:0 0 10px;color:#fff;font:clamp(24px,4.2vmin,36px)/1 'DBL-UI',var(--f-num);letter-spacing:1px;
  text-shadow:0 2px 0 #0a1630,0 0 16px rgba(120,170,255,.45)}
.cn-res-h::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.12) 70%,transparent)}
.cn-res-h.sm{margin-top:24px;font-size:clamp(19px,3.2vmin,26px)}
.cn-res-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2.6vmin,24px) clamp(6px,1.6vmin,16px)}
.cn-rc{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.cn-rc-art{position:relative;width:100%;aspect-ratio:1}
.cn-rc-art .ic{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain}
.cn-rc.is-item .cn-rc-art .ic{padding:16%}
.cn-rc.r-sparking{--rc:rgba(255,190,60,.95)}.cn-rc.r-ultra{--rc:rgba(175,218,255,.95)}.cn-rc.r-legend{--rc:rgba(255,216,77,.95)}
.cn-rc.hi .cn-rc-art::before{content:'';position:absolute;inset:-16%;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--rc) 0 5deg,transparent 5deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 22%,transparent 68%);mask:radial-gradient(circle,#000 22%,transparent 68%);opacity:.8;animation:cnSpin 8s linear infinite}
.cn-rc.r-ultra .cn-rc-art::before{background:repeating-conic-gradient(from 0deg,#ff8ad8 0 5deg,transparent 5deg 30deg,#7fd8ff 30deg 35deg,transparent 35deg 60deg)}
@keyframes cnSpin{to{transform:rotate(360deg)}}
.cn-rc-new{position:absolute;z-index:2;left:50%;top:-18%;width:74%;transform:translateX(-50%) rotate(-5deg);filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.cn-rc-ru{position:absolute;z-index:2;left:-2%;bottom:2%;padding:3px 7px 2px;background:rgba(6,8,16,.88);color:#fff;font:clamp(8px,1.5vmin,11px)/1 var(--f-lbl);
  letter-spacing:.6px;text-transform:uppercase;clip-path:var(--slant)}
.cn-rc-ru.head{background:#ffd84d;color:#3a2c00}
.cn-rc-amt{margin-top:3px;color:#45c8ff;font:clamp(15px,2.9vmin,25px)/1 var(--f-num);letter-spacing:.4px;-webkit-text-stroke:4px #fff;paint-order:stroke fill;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.cn-rc.is-item .cn-rc-amt{padding:3px 12px 2px;background:linear-gradient(180deg,#fff27a,#ffcc00);color:#2a2000;-webkit-text-stroke:0;font-size:clamp(13px,2.4vmin,19px);
  clip-path:var(--slant);filter:none}
.cn-res-btns{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:46px 30px;margin-top:clamp(44px,8vh,70px);padding-bottom:26px}
.cn-agw{position:relative}
.cn-btn{--s:.9;position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .08s,filter .15s}
.cn-btn::before{content:'';position:absolute;inset:0;z-index:-1;border-style:solid;border-color:transparent;border-width:0 var(--bw);
  border-image-source:var(--bi);border-image-slice:0 var(--bsl) fill;border-image-repeat:stretch}
.cn-btn:hover{filter:brightness(1.08) saturate(1.05)}
.cn-btn:active{transform:translateY(2px) scale(.98)}
.cn-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
.cn-btn.again{--bi:url('/assets/ui/summon/btn-summon.webp');--bsl:115;--bw:calc(115px*var(--s));flex-direction:column;align-items:stretch;justify-content:flex-start;
  min-width:calc(330px*var(--s));height:calc(96px*var(--s));padding:calc(8px*var(--s)) calc(17px*var(--s)) 0}
.cn-gt{display:flex;align-items:center;justify-content:center;height:calc(48px*var(--s));padding:0 calc(12px*var(--s));color:#3d2200;
  font:calc(22px*var(--s))/1 'DBL-UI',var(--f-num);white-space:nowrap;text-shadow:0 1px 0 rgba(255,244,200,.6)}
.cn-gc{display:flex;align-items:center;justify-content:space-between;gap:10px;height:calc(28px*var(--s));padding:0 calc(14px*var(--s)) 0 calc(4px*var(--s));
  color:#fff;font:calc(23px*var(--s))/1 'DBL-UI',var(--f-num)}
.cn-gc img{height:calc(30px*var(--s));width:auto}
.cn-gc b{font-weight:normal}
.cn-gc .free{flex:1;color:#8dffa6;text-align:center;letter-spacing:1px}
.cn-step{position:absolute;left:calc(-6px*var(--s));top:calc(-13px*var(--s));padding:4px 12px 3px;background:#11141b;color:#ffd54a;font:normal calc(15px*var(--s))/1 var(--f-num);
  letter-spacing:1.2px;text-transform:uppercase;transform:skewX(-12deg);box-shadow:0 0 0 2px #ffd54a,0 3px 6px rgba(0,0,0,.5)}
.cn-btn.ok{--bi:url('/assets/ui/summon/btn-decide.webp');--bsl:91;--bw:calc(91px*var(--s));min-width:calc(230px*var(--s));height:calc(80px*var(--s));
  padding:0 0 calc(5px*var(--s));color:#3d2200;font:calc(30px*var(--s))/1 'DBL-UI',var(--f-num);text-shadow:0 1px 0 rgba(255,244,200,.6)}
.cn-note,.cn-freebie{position:absolute;left:50%;z-index:2;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:6px 14px 5px;
  background:linear-gradient(180deg,#fffbc0,#ffe53a 55%,#ffc800);box-shadow:0 0 0 2px #2a1700,0 4px 0 1px rgba(0,0,0,.35);font:15px/1 'DBL-UI',var(--f-num);pointer-events:none}
.cn-note{bottom:calc(100% + 16px);color:#2a1700;transform:translateX(-50%) rotate(-2deg)}
.cn-note img{height:20px;width:auto;margin:-3px 0}
.cn-freebie{top:calc(100% + 8px);color:#c41a12;transform:translateX(-50%) rotate(-1deg)}
@media(max-width:560px){
  .cn-top{padding:10px 12px}
  .cn-hint{font-size:12px}
  .cn-res-grid{gap:12px 6px}
  .cn-btn{--s:.8}
  .cn-res-btns{gap:44px 18px}
}
