/* =====================================================================
   樂慾島　星慾盲盒（20261108.1）
   ・App 四個分頁、道具卡、說明頁
   ・拆盒動畫：盒子搖晃 → 掀蓋 → 光束 → 卡片升起翻面；十連是十張背面朝上、一張一張翻
   ・稀有度顏色走 --rc／--rc2（JS 餵進來）：SSR 金、SR 紫、R 藍、N 銀
   ===================================================================== */
.appv.gacha{--ac:#ffb547;background:#120a1f;--ink2:#120a1f;--ink3:#231434}
.appv.gacha .ahd{background:linear-gradient(180deg,#2c1a40,rgba(18,10,31,.35))}
.appv.gacha .ahd .aht small{color:#ffd37a;font-weight:700}
.gbtabs{padding-top:8px}
.gbsub{font-weight:400;color:var(--dim)}

/* ---------- 共用：稀有度 ---------- */
.gbrar{display:inline-block;font-family:var(--latin);font-style:italic;font-weight:700;font-size:11px;letter-spacing:.08em;padding:1px 7px 0;border-radius:9px;background:rgba(0,0,0,.55);color:var(--rc,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc,#fff) 45%,transparent)}
.gbstars{display:block;color:#ffd37a;font-size:10px;letter-spacing:.1em;margin-top:1px}

/* ---------- 道具的圖（沒有生成圖時：底色＋字） ---------- */
.gbart{position:relative;display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
 background:radial-gradient(70% 60% at 50% 25%,color-mix(in srgb,var(--rc,#fff) 38%,transparent),transparent 70%),linear-gradient(170deg,color-mix(in srgb,var(--rc2,#555) 55%,#1a1026),#120a1c 90%);
 box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rc,#fff) 55%,transparent),inset 0 -30px 40px -20px color-mix(in srgb,var(--rc2,#555) 40%,transparent)}
.gbart::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,0) 0 10px,rgba(255,255,255,.035) 10px 11px);pointer-events:none}
.gbart i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:46px;line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));transform:translateY(-2px)}
.gbart.img{background-size:cover;background-position:center 38%}
.gbart.img i{display:none}
.gbart.unk{filter:saturate(.5)}
.gbart.unk i{filter:blur(6px) brightness(.5);opacity:.6}
.gbart.unk b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:900;font-size:34px;color:rgba(255,255,255,.75);text-shadow:0 0 18px var(--rc,#fff)}
.gbart.big{aspect-ratio:3/4;width:176px;margin:0 auto;border-radius:16px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rc,#fff) 70%,transparent),0 18px 36px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--rc,#fff) 38%,transparent)}
.gbart.big i{font-size:96px}.gbart.big.unk b{font-size:72px}
.gbit.r-ssr .gbart:not(.img)::after,.gbit.r-sr .gbart:not(.img)::after,.gbc.r-ssr .gbart:not(.img)::after,.gbc.r-sr .gbart:not(.img)::after{content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 40%,rgba(255,255,255,.12) 50%,transparent 60% 100%);animation:gbspin2 7s linear infinite;pointer-events:none}

/* ---------- 道具格 ---------- */
.gbgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;margin:4px 0 14px}
.gbit{position:relative;display:flex;flex-direction:column;gap:5px;text-align:left;min-width:0}
.gbit .gbart{width:100%}
.gbit>.gbrar{position:absolute;top:6px;left:6px;z-index:1}
.gbit .gbn{position:absolute;top:6px;right:6px;z-index:1;font-style:normal;font-family:var(--num,'Barlow Condensed',sans-serif);font-size:12px;font-weight:700;padding:1px 7px;border-radius:9px;background:rgba(0,0,0,.6);color:#fff}
.gbit b{font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gbit small{font-size:11px;color:var(--gold);line-height:1.3}
.gbit.hid b{color:var(--dim);letter-spacing:.12em}
.gbit.hid small{color:var(--dim)}
.gbit:active .gbart{transform:scale(.97)}
.gbssrs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px;padding:4px 16px 6px}
.gbssrs::-webkit-scrollbar{display:none}
.gbssrs .gbit{flex:0 0 104px}
.gbssrs .gbit .gbart{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rc,#fff) 55%,transparent),0 8px 20px color-mix(in srgb,var(--rc,#fff) 22%,transparent)}

/* ---------- 拆盒頁 ---------- */
.gbhero{--rc:#ffd37a;--rc2:#ff8f3d;position:relative;overflow:hidden;border-radius:22px;padding:14px 14px 14px;min-height:330px;display:flex;flex-direction:column;align-items:center;
 background:#0b0612;border:1px solid rgba(255,211,122,.18);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.gbhbg{position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 0%,rgba(255,211,122,.26),transparent 60%),radial-gradient(60% 50% at 50% 100%,rgba(192,75,255,.22),transparent 60%),linear-gradient(180deg,#160b22,#0b0612);pointer-events:none}
.gbhbg::after{content:'';position:absolute;left:50%;top:-10%;width:60%;height:120%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 70%);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);pointer-events:none}
.gbhdust,.gbxdust{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gbhdust i,.gbxdust i{position:absolute;left:var(--x);bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;background:#ffd37a;opacity:0;animation:gbdust var(--t) linear var(--d) infinite;box-shadow:0 0 8px #ffd37a}
@keyframes gbdust{0%{transform:translateY(0);opacity:0}10%{opacity:.8}90%{opacity:.5}100%{transform:translateY(-420px) translateX(14px);opacity:0}}
.gbhtop{position:relative;z-index:1;width:100%;display:flex;align-items:center;justify-content:space-between}
.gbcr{display:inline-flex;align-items:baseline;gap:5px;padding:6px 12px 6px 10px;border-radius:18px;background:rgba(0,0,0,.45);border:1px solid rgba(255,211,122,.3)}
.gbcr i{font-style:normal;color:#ffd37a;font-size:13px;text-shadow:0 0 10px #ffd37a}
.gbcr b{font-family:var(--num,'Barlow Condensed',sans-serif);font-size:22px;font-weight:700;color:#fff;line-height:1}
.gbcr small{font-size:11px;color:var(--sub)}
.gbrate{height:28px;padding:0 11px;border-radius:14px;font-size:11.5px;color:var(--sub);background:rgba(255,255,255,.07);border:1px solid var(--line)}
.gbhbox{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:180px;margin:6px 0 2px}
.gbhbox:active .gbox{transform:scale(.96)}
.gbhbtns{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:1fr 1.45fr;gap:10px;margin-top:6px}
.gbpull{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:56px;border-radius:18px;transition:transform .15s,opacity .2s}
.gbpull:active{transform:scale(.97)}
.gbpull b{font-size:16px;font-weight:800}
.gbpull small{font-size:11px;opacity:.85}
.gbpull.one{background:rgba(255,255,255,.09);border:1px solid var(--line2)}
.gbpull.ten{position:relative;overflow:hidden;color:#2a1600;background:linear-gradient(135deg,#fff1c2,#ffd37a 45%,#ffb547);box-shadow:0 10px 26px rgba(255,181,71,.35),inset 0 1px 0 rgba(255,255,255,.7)}
.gbpull.ten::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
.gbpull.ten small{opacity:.75}
.gbpull.no{opacity:.5}
.gbhnote{position:relative;z-index:1;margin:10px 0 0;font-size:11.5px;color:var(--dim);text-align:center}
.gbstarter{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:12px 0 2px;padding:12px 14px;border-radius:18px;
 background:linear-gradient(120deg,rgba(255,211,122,.18),rgba(192,75,255,.12));border:1px solid rgba(255,211,122,.4);box-shadow:0 10px 26px rgba(255,181,71,.18);transition:transform .3s,opacity .3s}
.gbstarter .gbsic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(0,0,0,.35);flex:0 0 46px}
.gbstarter div{flex:1;min-width:0}
.gbstarter b{display:block;font-size:14.5px;color:#ffe9b0}
.gbstarter small{display:block;font-size:12px;color:var(--sub);line-height:1.45;margin-top:1px}
.gbstarter em{font-style:normal;font-size:13px;font-weight:700;color:#ffd37a;white-space:nowrap}
.gbstarter.got{transform:scale(1.04);opacity:0}
.gbbuffs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 2px}
.gbbuffs span{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:14px;font-size:12px;font-weight:700;color:#ffe9b0;background:rgba(255,211,122,.14);border:1px solid rgba(255,211,122,.35)}
.gbbuffs i{font-style:normal;color:#ffd37a}
.gbrules{margin:6px 0 10px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.gbrules b{display:block;font-size:13px;color:var(--gold);margin-bottom:4px}
.gbrules span{display:block;font-size:12px;color:var(--sub);line-height:1.6}

/* ---------- 我的盒子、精品櫃、紀錄 ---------- */
.gbsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px;margin:2px 0 14px}
.gbsum div{padding:10px 4px 8px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);text-align:center}
.gbsum b{display:block;font-family:var(--num,'Barlow Condensed',sans-serif);font-size:20px;font-weight:700;line-height:1.1}
.gbsum small{display:block;font-size:10.5px;color:var(--dim);margin-top:2px}
.gbsec{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--rc,#fff) 16%,transparent),transparent 80%);border-left:3px solid var(--rc,#fff)}
.gbsec b{font-family:var(--latin);font-style:italic;font-size:15px;color:var(--rc,#fff);letter-spacing:.06em}
.gbsec b i{font-family:var(--sans);font-style:normal;font-size:12px;color:var(--sub);margin-left:6px;letter-spacing:0}
.gbsec small{font-size:11px;color:var(--dim)}
.gbrates{display:grid;gap:6px;margin-bottom:8px}
.gbrt{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.gbrt b{font-family:var(--latin);font-style:italic;font-size:15px;color:var(--rc);width:40px}
.gbrt span{flex:1;font-size:12.5px;color:var(--sub)}
.gbrt em{font-style:normal;font-family:var(--num,'Barlow Condensed',sans-serif);font-size:18px;font-weight:700}
.gbh{padding:9px 0;border-bottom:1px solid var(--line)}
.gbh small{display:block;font-size:11px;color:var(--dim);margin-bottom:5px}
.gbhl{display:flex;flex-wrap:wrap;gap:5px}
.gbhl i{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:15px;background:linear-gradient(170deg,color-mix(in srgb,var(--rc2,#555) 55%,#1a1026),#120a1c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc,#fff) 55%,transparent)}
.gbhl i.r-ssr{box-shadow:inset 0 0 0 1px var(--rc),0 0 10px color-mix(in srgb,var(--rc) 50%,transparent)}

/* ---------- 說明頁（底部面板） ---------- */
.gbd{margin:-22px -18px 0}
.gbdart{position:relative;padding:34px 0 18px;background:radial-gradient(70% 80% at 50% 45%,color-mix(in srgb,var(--rc,#fff) 30%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--rc2,#555) 30%,#1a1026),#140b1e)}
.gbdrar{position:absolute;left:16px;top:16px;font-family:var(--latin);font-style:italic;font-weight:700;font-size:13px;letter-spacing:.08em;padding:3px 10px;border-radius:12px;background:rgba(0,0,0,.6);color:var(--rc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 55%,transparent)}
.gbdstar{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;align-items:flex-end;color:#ffd37a;font-size:14px;letter-spacing:.12em;text-shadow:0 0 12px rgba(255,211,122,.7)}
.gbdstar small{font-size:10px;letter-spacing:0;color:var(--sub)}
.gbd h3{margin:-6px 18px 4px;font-size:22px}
.gbd .pst{margin:0 18px;color:var(--sub);font-size:12.5px}
.gbd p{margin:8px 18px;font-family:var(--serif);color:var(--txt);font-size:14.5px;line-height:1.85}
.gbd p.per{color:var(--sub);font-family:var(--sans);font-size:13px}
.gbdrow{display:flex;gap:8px;margin:10px 18px 0;font-size:12.5px;color:var(--sub)}
.gbdrow span{flex:1;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.gbdrow b{color:#fff}
.gbd .psbt{margin:12px 18px 4px}
.gbpick .gbpp{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 10px;margin:0 -2px 6px;scrollbar-width:none}
.gbpick .gbpp::-webkit-scrollbar{display:none}
.gbpick .pchip{width:84px}
.gbpick .nsb{margin-top:4px}
.gbrs .gbrates{margin:10px 0}
.gbnk b{color:#ffd37a}
.nkmi svg{width:16px;height:16px}

/* =====================================================================
   盒子
   ===================================================================== */
.gbox{position:relative;width:132px;height:132px;transition:transform .2s}
.gbox .gbshadow{position:absolute;left:6%;right:6%;bottom:-14px;height:22px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.65),transparent 70%)}
.gbbody{position:absolute;left:7%;right:7%;top:34%;bottom:3%;border-radius:10px 10px 16px 16px;overflow:visible;
 background:linear-gradient(170deg,#3d2756 0%,#22142f 50%,#140b1e 100%);
 box-shadow:0 18px 36px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -14px 28px rgba(0,0,0,.45)}
.gbbody::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--holo);background-size:200% 100%;animation:holo 7s linear infinite;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;pointer-events:none}
.gbbody::after{content:'';position:absolute;left:12%;top:8%;width:18%;height:70%;border-radius:40%;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);pointer-events:none}
.gbinner{position:absolute;left:4%;right:4%;top:0;height:46%;border-radius:8px 8px 40% 40%;background:radial-gradient(70% 90% at 50% 0%,color-mix(in srgb,var(--rc) 85%,#fff),color-mix(in srgb,var(--rc) 40%,transparent) 55%,transparent 80%);opacity:0;transition:opacity .4s}
.gbglow{position:absolute;left:18%;right:18%;bottom:70%;height:0;border-radius:40% 40% 0 0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--rc) 55%,transparent) 60%,color-mix(in srgb,var(--rc) 85%,#fff));filter:blur(6px);opacity:0;transition:height .7s cubic-bezier(.2,.8,.2,1),opacity .4s}
.gbrib{position:absolute;background:linear-gradient(90deg,#ff8fcf,#ff2d7e 48%,#c2185b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 2px 6px rgba(0,0,0,.3);transition:transform .45s cubic-bezier(.4,0,.8,.4),opacity .35s}
.gbrib.v{left:50%;top:34%;bottom:3%;width:13%;transform:translateX(-50%);border-radius:0 0 4px 4px}
.gbrib.h{left:7%;right:7%;top:58%;height:11%;background:linear-gradient(180deg,#ff8fcf,#ff2d7e 48%,#c2185b)}
.gblid{position:absolute;left:3%;right:3%;top:21%;height:15%;border-radius:9px;background:linear-gradient(170deg,#4d335f,#2c1b3e 60%,#1d1029);
 box-shadow:0 10px 18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2);transform-origin:50% 0%;transition:transform .6s cubic-bezier(.3,.7,.25,1.15);z-index:2}
.gblid::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--holo);background-size:200% 100%;animation:holo 7s linear infinite;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;pointer-events:none}
.gblidrib{position:absolute;left:50%;top:0;bottom:0;width:13.5%;transform:translateX(-50%);background:linear-gradient(90deg,#ff8fcf,#ff2d7e 48%,#c2185b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.gbseal{position:absolute;left:50%;top:100%;transform:translate(-50%,-45%);width:40px;height:40px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
 background:conic-gradient(from 210deg,#ffe9b0,#ffd37a 30%,#b8862b 55%,#ffe9b0 80%,#ffd37a);box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.35),inset 0 0 0 4px rgba(120,80,20,.35);color:#3a2300}
.gbseal b{font-family:var(--latin);font-style:italic;font-size:9.5px;letter-spacing:.06em}
.gbseal small{font-family:var(--latin);font-size:6.5px;letter-spacing:.2em;margin-top:1px}
.gbten{position:absolute;right:-6px;top:6px;font-style:normal;font-family:var(--num,'Barlow Condensed',sans-serif);font-weight:700;font-size:15px;padding:2px 9px;border-radius:12px;background:#ffd37a;color:#2a1600;box-shadow:0 6px 14px rgba(255,211,122,.4);z-index:3}
.gbox.idle{animation:gbfloat 3.4s ease-in-out infinite}
.gbox.idle .gbshadow{animation:gbfloatsh 3.4s ease-in-out infinite}
@keyframes gbfloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@keyframes gbfloatsh{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.82);opacity:.7}}
.gbox.shake{animation:gbshake .72s cubic-bezier(.36,.07,.19,.97) both}
@keyframes gbshake{0%{transform:translateX(0) rotate(0)}12%{transform:translateX(-5px) rotate(-3deg)}24%{transform:translateX(5px) rotate(3deg)}36%{transform:translateX(-7px) rotate(-4deg)}48%{transform:translateX(7px) rotate(4deg)}60%{transform:translateX(-9px) rotate(-5deg) translateY(-3px)}72%{transform:translateX(9px) rotate(5deg) translateY(-6px)}84%{transform:translateX(-5px) rotate(-2deg) translateY(-3px)}100%{transform:translateX(0) rotate(0)}}
.gbox.open .gblid{transform:perspective(520px) rotateX(-128deg) translateY(-2px)}
.gbox.open .gbrib{opacity:0;transform:translateX(-50%) scaleY(.6) translateY(30%)}
.gbox.open .gbrib.h{transform:scaleX(1.2) scaleY(0)}
.gbox.open .gbinner{opacity:1;animation:gbpulse 1.4s ease-in-out infinite}
.gbox.open .gbglow{height:280px;opacity:.95}
@keyframes gbpulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

/* =====================================================================
   拆盒畫面（整個手機）
   ===================================================================== */
.gbx{position:absolute;inset:0;z-index:58;background:#07040b;opacity:0;transition:opacity .32s;overflow:hidden;user-select:none;cursor:pointer}
.gbx.on{opacity:1}
.gbxbg{position:absolute;inset:0;background:radial-gradient(75% 55% at 50% -5%,color-mix(in srgb,var(--rc,#ffd37a) 26%,transparent),transparent 60%),radial-gradient(60% 40% at 50% 110%,color-mix(in srgb,var(--rc2,#8a2be2) 30%,transparent),transparent 60%),#07040b;transition:background .6s}
.gbxbg::after{content:'';position:absolute;left:50%;top:-10%;width:58%;height:110%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 70%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
.gbxdust i{animation-duration:var(--t)}
.gbxrays{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;
 background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rc,#ffd37a) 28%,transparent) 0 6deg,transparent 6deg 15deg);
 -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 30%,transparent 62%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 30%,transparent 62%);transition:opacity .5s,transform .6s}
.gbx.rays .gbxrays{opacity:.7;transform:translate(-50%,-50%) scale(1);animation:gbspin 16s linear infinite}
.gbx.rays.r-sr .gbxrays{opacity:.45}
@keyframes gbspin{to{transform:translate(-50%,-50%) scale(1) rotate(360deg)}}
@keyframes gbspin2{to{transform:rotate(360deg)}}
.gbxflash{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#fff 0%,color-mix(in srgb,var(--rc,#ffd37a) 85%,#fff) 25%,color-mix(in srgb,var(--rc,#ffd37a) 40%,transparent) 55%,transparent 75%);opacity:0;pointer-events:none}
.gbx.flash .gbxflash{animation:gbflash .75s ease-out}
@keyframes gbflash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.gbxstage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.gbx.hit .gbxstage{animation:gbhit .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes gbhit{0%,100%{transform:none}20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,2px)}}
.gbxboxw{position:relative;transform:translateY(-10px) scale(1.3);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s}
.gbx.cards .gbxboxw{transform:translateY(190px) scale(.9);opacity:.55}
.gbx.cards.ten .gbxboxw{transform:translateY(60vh) scale(.5);opacity:0}
.gbxboxw .gbten{right:-14px;top:-4px}
.gbcards{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;padding-bottom:40px}
.gbcards.ten{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 8px;align-content:center;align-items:start;justify-items:stretch;padding:56px 14px 170px}
.gbc{position:relative;width:224px;aspect-ratio:3/4;perspective:1000px;pointer-events:auto;opacity:0;transform:translateY(120px) scale(.25);z-index:1}
.gbc.rise{opacity:1;transform:none;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .3s}
.gbcards.ten .gbc{width:100%;aspect-ratio:3/4;transform:translateY(38vh) scale(.2) rotate(-12deg)}
.gbcards.ten .gbc.deal{opacity:1;transform:none;transition:transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i)*70ms),opacity .25s calc(var(--i)*70ms)}
.gbc.focus{z-index:5}
.gbc.focus .gbcin{transform:rotateY(180deg) scale(1.1)}
.gbcin{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,.7,.2,1)}
.gbc.flip .gbcin{transform:rotateY(180deg)}
.gbk,.gbf{position:absolute;inset:0;border-radius:18px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.gbcards.ten .gbk,.gbcards.ten .gbf{border-radius:12px}
.gbk{background:linear-gradient(160deg,#2a1a3c,#140b1e 60%,#0c0712);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rc) 55%,transparent),0 14px 30px rgba(0,0,0,.5),0 0 24px color-mix(in srgb,var(--rc) 28%,transparent)}
.gbk i{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.04) 12px 13px),radial-gradient(60% 50% at 50% 30%,color-mix(in srgb,var(--rc) 22%,transparent),transparent 70%)}
.gbk i::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--rc) 25%,rgba(255,255,255,.1)) 48%,transparent 60%);background-size:220% 100%;animation:gbsheen 2.6s ease-in-out infinite}
@keyframes gbsheen{0%{background-position:120% 0}100%{background-position:-120% 0}}
.gbk b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:900;font-size:64px;color:rgba(255,255,255,.22);text-shadow:0 0 22px color-mix(in srgb,var(--rc) 60%,transparent)}
.gbcards.ten .gbk b{font-size:26px}
.gbc.r-ssr .gbk{box-shadow:inset 0 0 0 1.5px var(--rc),0 14px 30px rgba(0,0,0,.5),0 0 34px color-mix(in srgb,var(--rc) 55%,transparent);animation:gbssrk 1.6s ease-in-out infinite}
@keyframes gbssrk{0%,100%{box-shadow:inset 0 0 0 1.5px var(--rc),0 14px 30px rgba(0,0,0,.5),0 0 22px color-mix(in srgb,var(--rc) 45%,transparent)}50%{box-shadow:inset 0 0 0 1.5px #fff,0 14px 30px rgba(0,0,0,.5),0 0 44px color-mix(in srgb,var(--rc) 85%,transparent)}}
.gbc.r-n .gbk{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.5)}
.gbf{transform:rotateY(180deg);background:#140b1e;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rc) 70%,transparent),0 14px 30px rgba(0,0,0,.5),0 0 30px color-mix(in srgb,var(--rc) 30%,transparent)}
.gbc.r-ssr .gbf::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from 0deg,#ffd37a,#fff6d6,#ff8f3d,#ffd37a,#fff,#ffd37a);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:gbbd 2.2s ease-in-out infinite alternate;z-index:2;pointer-events:none;}
@keyframes gbbd{from{opacity:.6;filter:hue-rotate(0)}to{opacity:1;filter:hue-rotate(-18deg)}}
.gbf .gbart{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;border-radius:0;box-shadow:none;background-position:center 38%}
.gbf .gbart i{font-size:84px;align-items:flex-start;padding-top:30%}
.gbcards.ten .gbf .gbart{height:auto}
.gbcards.ten .gbf .gbart i{font-size:30px;padding-top:26%}
.gbf .gbart::after{display:none}
.gbinfo{position:absolute;left:0;right:0;bottom:0;padding:64px 14px 14px;background:linear-gradient(180deg,transparent,rgba(12,6,20,.9) 58%)}
.gbinfo b{display:block;font-family:var(--serif);font-size:18px;line-height:1.3;margin-top:5px}
.gbinfo small{display:block;font-size:11.5px;color:var(--sub);margin-top:3px}
.gbcards.ten .gbinfo{padding:26px 5px 6px}
.gbcards.ten .gbinfo b{font-size:9.5px;font-family:var(--sans);font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbcards.ten .gbinfo .gbrar{font-size:8.5px;padding:0 5px}
.gbnew,.gbdup{position:absolute;top:10px;right:10px;z-index:3;font-style:normal;font-weight:800;font-size:11px;letter-spacing:.06em;padding:3px 8px;border-radius:10px;color:#fff;background:linear-gradient(135deg,#ff5fa2,#ff2d7e);box-shadow:0 6px 14px rgba(255,45,126,.4)}
.gbdup{background:linear-gradient(135deg,#ffe9b0,#ffd37a);color:#2a1600;box-shadow:0 6px 14px rgba(255,211,122,.4)}
.gbdup em{font-style:normal;font-weight:800}
.gbcards.ten .gbnew,.gbcards.ten .gbdup{top:4px;right:4px;font-size:8px;padding:1px 5px}
.gbburst{position:absolute;left:50%;top:50%;z-index:6;pointer-events:none}
.gbburst i{position:absolute;left:0;top:0;width:var(--s);height:var(--s);border-radius:50%;background:var(--rc);box-shadow:0 0 8px var(--rc);animation:gbpop var(--t) cubic-bezier(.2,.8,.3,1) forwards}
.gbburst i.sq{border-radius:2px;background:var(--rc2)}
@keyframes gbpop{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.1);opacity:0}}
.gbstamp{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:7;text-align:center;pointer-events:none;opacity:0}
.gbstamp b{display:block;font-family:var(--latin);font-style:italic;font-weight:700;font-size:92px;line-height:1;letter-spacing:.06em;background:linear-gradient(180deg,#fff6d6,var(--rc) 45%,var(--rc2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 30px color-mix(in srgb,var(--rc) 70%,transparent))}
.gbstamp small{display:block;font-family:var(--serif);font-size:16px;letter-spacing:.5em;color:#fff;margin-top:4px;text-shadow:0 0 14px var(--rc)}
.gbstamp.on{animation:gbstamp 1.1s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes gbstamp{0%{opacity:0;transform:translateY(-50%) scale(3);filter:blur(10px)}30%{opacity:1;transform:translateY(-50%) scale(.96);filter:blur(0)}75%{opacity:1;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-52%) scale(1.06)}}
.gbxhint{position:absolute;left:0;right:0;bottom:118px;text-align:center;font-size:13px;color:var(--sub);letter-spacing:.08em;opacity:0;transition:opacity .3s;pointer-events:none}
.gbxhint.on{opacity:1;animation:gbhint 1.7s ease-in-out infinite}
@keyframes gbhint{0%,100%{opacity:.5}50%{opacity:1}}
.gbxskip{position:absolute;top:54px;right:16px;z-index:9;height:30px;padding:0 12px;border-radius:15px;background:rgba(255,255,255,.1);border:1px solid var(--line);font-size:12px;color:var(--sub);backdrop-filter:blur(6px)}
.gbxbar{position:absolute;left:0;right:0;bottom:0;z-index:8;padding:12px 16px calc(20px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;transform:translateY(40px);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s;cursor:default}
.gbxbar.on{transform:none;opacity:1}
.gbxbar>.btn{min-width:160px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px)}
.gbxsum{width:100%;padding:12px 14px 14px;border-radius:22px;background:rgba(20,11,30,.86);backdrop-filter:blur(14px);border:1px solid color-mix(in srgb,var(--rc) 35%,transparent);box-shadow:0 -10px 40px rgba(0,0,0,.45)}
.gbxcnt{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.gbxcnt span{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:10px;font-size:12px;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 50%,transparent)}
.gbxcnt span b{font-family:var(--latin);font-style:italic;color:var(--rc)}
.gbxline{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--sub);margin-bottom:10px}
.gbxline b{color:#fff}
.gbxline .ref b{color:#ffd37a}
.gbxbtns{display:grid;grid-template-columns:1fr 1.45fr;gap:8px}
.gbxbtns .btn{height:48px;flex-direction:column;gap:0;line-height:1.15}
.gbxbtns .btn small{font-size:10.5px}
.gbxbtns .btn.pri{background:linear-gradient(135deg,#fff1c2,#ffd37a 45%,#ffb547);color:#2a1600;box-shadow:0 10px 26px rgba(255,181,71,.35)}
.gbxbtns .btn.pri small{opacity:.75}

/* 還沒顯示過通知的空白橫幅，頂端會露出一條細線，隱藏它 */
.banner:not(.on):empty{visibility:hidden}