*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:#120822;color:#fff;font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none}
[hidden]{display:none!important}
#app{position:fixed;inset:0;max-width:520px;margin:0 auto;overflow:hidden;background:#120822}
.mini{font-size:12px;opacity:.85;line-height:1.6}.center{text-align:center}
.btn{display:block;width:100%;margin:6px 0;padding:11px 10px;border-radius:14px;border:2px solid #ffd6f0;background:linear-gradient(#ff7ac8,#c0308a);font-weight:900;font-size:15px;color:#fff;text-shadow:0 1px 2px #0006;box-shadow:0 3px 0 #7a1a5a,0 4px 10px #0006;text-decoration:none;text-align:center}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #7a1a5a}
.btn.gold{border-color:#fff3b0;background:linear-gradient(#ffd95a,#e08a00);box-shadow:0 3px 0 #8a4a00,0 4px 10px #0006}
.btn.sub{border-color:#ffffff55;background:linear-gradient(#4a3a6a,#2a1a40);box-shadow:0 3px 0 #120822}
.btn.big{font-size:18px;padding:14px}.btn.sm{display:inline-block;width:auto;padding:7px 12px;font-size:13px;margin:3px}
.btn:disabled{opacity:.4;filter:grayscale(.6)}
.btn small{font-size:11px;font-weight:700;opacity:.9}
.row{display:flex;gap:6px;flex-wrap:wrap}.row .btn{flex:1}
.card{background:#ffffff14;border:1px solid #ffffff2a;border-radius:12px;padding:10px;margin:8px 0}
.u{color:#ffd95a}
.heart{color:#ff7ab8}
.pulse{animation:pulse 1.4s infinite}@keyframes pulse{50%{transform:scale(1.04)}}
/* ---- タイトル ---- */
#title{position:absolute;inset:0;overflow:hidden}
#title .tbg{position:absolute;inset:0;background:url(../img/bg_home.webp) center/cover;filter:brightness(.7)}
#title .tgirls{position:absolute;left:0;right:0;top:6%;height:52%;display:flex;justify-content:center;align-items:flex-end}
#title .tgirls img{width:34%;margin:0 -6%;filter:drop-shadow(0 6px 14px #0009);animation:float 3s ease-in-out infinite}
#title .tgirls img:nth-child(2){animation-delay:-.7s;width:38%;z-index:2}#title .tgirls img:nth-child(3){animation-delay:-1.4s;width:38%;z-index:2}#title .tgirls img:nth-child(4){animation-delay:-2.1s}
@keyframes float{50%{transform:translateY(-8px)}}
#title .tlogo{position:absolute;left:0;right:0;top:58%;text-align:center}
#title .tlogo b{display:block;font-size:min(16vw,72px);font-style:italic;color:#fff;text-shadow:0 0 18px #ff5fd2,4px 4px 0 #a01a7a,0 0 40px #ffb0f0;letter-spacing:.02em}
#title .tlogo span{display:inline-block;margin-top:2px;padding:3px 14px;border-radius:14px;background:#0008;font-weight:900;color:#ffe45a}
#title #tgo{position:absolute;left:10%;right:10%;bottom:calc(60px + env(safe-area-inset-bottom));width:auto}
#title .tnote{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));font-size:11px;text-align:center;opacity:.8}
/* ---- 上のバーと下のメニュー ---- */
#topbar{position:absolute;left:0;right:0;top:0;z-index:30;display:flex;gap:6px;align-items:center;padding:calc(6px + env(safe-area-inset-top)) 8px 6px;background:linear-gradient(#120822ee,#12082200)}
.tb-st{position:relative;flex:1;height:30px;background:#0009;border:1px solid #7af0ff88;border-radius:15px;overflow:hidden;font-size:11px;display:flex;align-items:center;gap:6px;padding:0 10px}
.tb-st i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#3adfd0,#7af0ff);opacity:.35;z-index:0}
.tb-st span,.tb-st b,.tb-st em{position:relative;z-index:1}.tb-st b{font-size:14px}.tb-st em{margin-left:auto;font-style:normal;opacity:.85}
.tb-c{display:flex;gap:6px;font-weight:900;font-size:13px}.tb-c span{background:#0009;border-radius:14px;padding:6px 10px}
#nav{position:absolute;left:0;right:0;bottom:0;z-index:30;display:flex;background:linear-gradient(#2a1440f4,#120822);border-top:1px solid #ff9ad055;padding-bottom:env(safe-area-inset-bottom)}
#nav button{flex:1;border:0;background:none;padding:6px 0 7px;font-size:11px;font-weight:900;opacity:.75;display:flex;flex-direction:column;align-items:center}
#nav button span{font-size:22px;line-height:1.1}#nav button.on{opacity:1;color:#ffb0e8;text-shadow:0 0 8px #ff5fd2}
/* ---- ホーム ---- */
#home{position:absolute;inset:0}
.hbg{position:absolute;inset:0;background:url(../img/bg_home.webp) center/cover}
.hgirls{position:absolute;left:0;right:0;top:56px;height:56%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;padding:0 4px}
.hg{position:relative;border:0;background:none;padding:0;overflow:hidden}
.hg img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 4px 10px #000a);transition:transform .2s}
.hg:active img{transform:scale(1.04)}
.hg span{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);background:#000a;border-radius:10px;padding:2px 10px;font-size:12px;font-weight:900;white-space:nowrap}
.hg span i{font-style:normal;color:#ff7ab8;margin-left:4px;font-size:10px}
.hside{position:absolute;right:6px;top:calc(56% + 60px);display:flex;flex-direction:column;gap:6px;z-index:2}
.hbtn{position:relative;width:74px;border:2px solid #ffd6f0aa;border-radius:12px;background:#2a1440dd;padding:6px 2px;font-size:12px;font-weight:900}
.hbtn small{display:block;font-size:9px;opacity:.85}.hbtn.ev{border-color:#7af0ff;background:linear-gradient(#1a4a6a,#2a1440)}
.hbtn em{position:absolute;right:-5px;top:-5px;background:#ff3f6a;border-radius:10px;font-style:normal;font-size:11px;padding:0 6px}
.hstart{position:absolute;left:10px;right:94px;bottom:calc(70px + env(safe-area-inset-bottom));width:auto;line-height:1.25}
.bubble{position:fixed;z-index:40;pointer-events:none;transform:translate(-50%,-100%);max-width:250px;background:#fff;color:#2a0a30;border:2px solid var(--c);font-weight:700;font-size:13px;padding:8px 12px;border-radius:14px;box-shadow:0 3px 10px #0008;animation:bub 3.6s forwards}
@keyframes bub{0%{opacity:0;transform:translate(-50%,-80%)}8%{opacity:1;transform:translate(-50%,-100%)}90%{opacity:1}100%{opacity:0}}
/* ---- パネル ---- */
.panel{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:520px;top:0;bottom:0;z-index:25;background:linear-gradient(#2a1440f8,#120822fa);display:flex;flex-direction:column;padding-top:calc(44px + env(safe-area-inset-top))}
.ph{display:flex;align-items:center;gap:6px;padding:4px 8px}
.ph h2{margin:0;font-size:18px;text-shadow:0 0 8px #ff5fd2}
.back{width:38px;height:38px;border-radius:50%;border:2px solid #ffffff55;background:#0006;font-size:24px;line-height:1}
.pb{flex:1;overflow-y:auto;padding:4px 10px calc(80px + env(safe-area-inset-bottom));touch-action:pan-y}
.pb h4{margin:14px 0 6px;font-size:14px;color:#ffb0e8}
.tabs{display:flex;gap:4px;margin:4px 0 8px}.tabs button{flex:1;border:1px solid #ff9ad088;background:#0006;border-radius:16px;padding:7px;font-size:13px;font-weight:900}.tabs button.on{background:#ff5fb8;border-color:#fff}
/* クエスト */
.chap{position:relative;border-radius:14px;overflow:hidden;margin:8px 0;padding:10px;background:linear-gradient(#0008,#000c),var(--bg) center/cover;border:2px solid #ffffff33}
.chap.lock{filter:grayscale(.8) brightness(.6)}
.cht{font-size:15px;margin-bottom:6px}.cht b{color:#ffe45a}.clr{background:#3adf8a;color:#000;font-size:10px;padding:1px 6px;border-radius:6px}
.stages{display:flex;gap:5px}
.stg{flex:1;aspect-ratio:1;border-radius:12px;border:2px solid #fff8;background:#2a1440cc;font-weight:900;font-size:18px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.stg small{font-size:9px;opacity:.85}.stg small::before{content:"⚡"}
.stg.done{background:linear-gradient(#3a9a6a,#1a5a3a)}.stg.boss{background:linear-gradient(#9a2a4a,#5a0a2a);font-size:12px}.stg.boss.done{background:linear-gradient(#c08a20,#7a4a00)}
.stg:disabled{opacity:.35}
.tower{text-align:center;padding:20px 0}.tw-n{font-size:64px;font-weight:900;color:#ffe45a;text-shadow:0 0 18px #ff9a00}.tw-n small{font-size:20px}
.evb{border-radius:14px;padding:14px;background:linear-gradient(#0007,#000b),var(--bg) center/cover;text-align:center}.evb h3{margin:0;font-size:20px;color:#bff4ff}
.evst .btn small{display:block}
.evrw,.mis{display:flex;align-items:center;gap:8px;background:#ffffff10;border-radius:10px;padding:6px 10px;margin:4px 0;font-size:13px}
.evrw span,.mis span{flex:1}.mis span small{display:block;opacity:.7}.evrw em,.mis em{font-style:normal;opacity:.7;font-size:12px}
/* パーティ */
.pgirls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pg{border:2px solid var(--c);border-radius:14px;background:linear-gradient(#ffffff18,#0006);padding:6px;text-align:center;overflow:hidden}
.pg img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 10%;border-radius:10px}
.pg b{display:block;font-size:14px}.pg small{font-size:11px;opacity:.85}
.gtop{display:flex;gap:10px;align-items:flex-start}.gtop img{width:40%;border-radius:12px;background:#ffffff10}.gtop h3{margin:0}
.xpb{height:6px;background:#0008;border-radius:3px;overflow:hidden;margin:4px 0}.xpb i{display:block;height:100%;background:#7af0ff}
.stat{font-size:12px;line-height:1.7}
.eqs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.eq{border:0;background:none;padding:0}
.coss{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.cos{position:relative;flex:0 0 88px;border:2px solid #ffffff44;border-radius:12px;background:#ffffff10;padding:3px;font-size:10px}
.cos img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 15%;border-radius:8px}.cos.on{border-color:#ffe45a;box-shadow:0 0 10px #ffe45a}
.cos.lock img{filter:brightness(.6)}.cos em{position:absolute;left:3px;right:3px;top:40%;font-style:normal;background:#000c;border-radius:6px;font-weight:900;font-size:11px;color:#ffe45a}
.eps .btn{width:calc(33% - 6px)}
/* 装備 */
.icard{position:relative;aspect-ratio:1;border-radius:12px;border:2px solid #888;background:radial-gradient(#ffffff22,#0006);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.icard img{width:78%;height:70%;object-fit:contain;filter:drop-shadow(0 2px 3px #0008)}
.icard small{font-size:9px;line-height:1.1;padding:0 2px;text-align:center;white-space:nowrap;overflow:hidden;max-width:100%}
.icard .rr{position:absolute;left:3px;top:2px;font-size:10px;font-weight:900;text-shadow:0 0 3px #000}.icard .pl{position:absolute;right:4px;top:2px;font-size:11px;font-weight:900;color:#7af0ff}
.icard .nw{position:absolute;right:3px;bottom:16px;width:8px;height:8px;border-radius:50%;background:#ff3f6a}
.icard.empty{border-style:dashed;opacity:.6;font-size:12px}
.r0{border-color:#c8c8d8}.r1{border-color:#5ab0ff}.r2{border-color:#c46bff;background:radial-gradient(#c46bff33,#0006)}.r3{border-color:#ffb02a;background:radial-gradient(#ffb02a44,#0006);box-shadow:0 0 8px #ffb02a88}.r4{border-color:#ff4f8a;background:radial-gradient(#ff7ad855,#0006);box-shadow:0 0 12px #ff4f8a}
.r0 .rr{color:#ddd}.r1 .rr{color:#8ac8ff}.r2 .rr{color:#e0a8ff}.r3 .rr{color:#ffd06a}.r4 .rr{color:#ff9ac0}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}.ib{position:relative;border:0;background:none;padding:0}.ib em{position:absolute;left:0;right:0;bottom:-2px;font-style:normal;font-size:9px;background:#ff5fb8;border-radius:6px}
.itop{display:flex;gap:10px;align-items:center}.itop .icard{width:96px;flex:0 0 96px}.itop h3{margin:0;font-size:16px}
/* ガチャ */
.gbg{height:180px;border-radius:16px;background:url(../img/bg_gacha.webp) center/cover;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;text-align:center;text-shadow:0 0 6px #000}
.grow{display:flex;gap:6px}.grow .btn{flex:1}
.gm .mbox{background:radial-gradient(#3a1a60,#0b0418);width:min(96vw,500px)}
.gfx{height:120px;display:flex;align-items:center;justify-content:center}
.gfx .circle{width:110px;height:110px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 30px #fff,inset 0 0 30px #fff;animation:spin 1.2s linear infinite}
.gfx.r3 .circle{border-color:#ffd06a;box-shadow:0 0 50px #ffb02a,inset 0 0 30px #ffd06a}.gfx.r4 .circle{border-color:#ff7ad8;box-shadow:0 0 70px #ff4f8a,0 0 120px #ffd06a,inset 0 0 40px #fff}
@keyframes spin{to{transform:rotate(360deg) scale(1.1)}}
.gm.open .gfx{display:none}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;opacity:0}.gm.open .gcards{opacity:1}
.gc{perspective:400px}.gc .back{display:none}.gc .front{animation:flip .5s var(--d) both}
@keyframes flip{0%{transform:rotateY(90deg) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.gc.r3 .front,.gc.r4 .front{animation:flip .5s var(--d) both,glow 1.2s calc(var(--d) + .5s) infinite}@keyframes glow{50%{filter:brightness(1.4)}}
/* ショップ */
.shopr{display:flex;align-items:center;gap:4px;background:#ffffff10;border-radius:10px;padding:6px 10px}.shopr span{flex:1;font-size:13px}
.shopcos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.cosb{border:2px solid #ffd06a88;border-radius:12px;background:#ffffff10;padding:3px;font-size:10px;display:flex;flex-direction:column}
.cosb img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 15%;border-radius:8px}.cosb b{font-size:10px}.cosb.own{border-color:#3adf8a}
.shopep .btn{width:calc(25% - 6px)}
/* 図鑑 */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px}.bk{text-align:center;background:#ffffff10;border-radius:10px;padding:3px}.bk img{width:100%;aspect-ratio:1;object-fit:contain}.bk small{font-size:9px;display:block;white-space:nowrap;overflow:hidden}
.bk.no img{filter:brightness(0) opacity(.5)}.bk.boss{background:#ff5f8a22}
/* モーダル */
.modal{position:fixed;inset:0;z-index:60;background:#000a;display:flex;align-items:center;justify-content:center;padding:12px}
.mbox{width:min(92vw,420px);max-height:90vh;overflow-y:auto;background:linear-gradient(#3a1a58,#1a0b2e);border:2px solid #ffb0e8;border-radius:18px;padding:16px;text-align:center;box-shadow:0 0 30px #ff5fd266;animation:min .25s}
@keyframes min{from{transform:scale(.85);opacity:0}}
.mbox h3{margin:0 0 6px}.mbox p.big{font-size:32px;margin:6px 0;color:#ffe45a}
.res h2{margin:0;font-size:28px;color:#ffe45a;text-shadow:0 0 14px #ff9a00}.res .rg{width:56%;margin:-6px 0}.res .lvup{color:#7af0ff;font-weight:900}
.loot{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:6px 0}
/* ---- 戦闘 ---- */
#bt{position:absolute;inset:0;display:flex;flex-direction:column}
#bt.shk{animation:bshk .35s}@keyframes bshk{20%{transform:translate(calc(var(--sh) * -1),3px)}40%{transform:translate(var(--sh),-3px)}60%{transform:translate(calc(var(--sh) * -.6),2px)}80%{transform:translate(3px,0)}}
#btop{position:relative;flex:1 1 auto;min-height:200px;overflow:hidden}
#bbg{position:absolute;inset:0;background:#120822 center top/cover no-repeat}
#bhud{position:absolute;left:6px;right:6px;top:calc(6px + env(safe-area-inset-top));display:flex;gap:6px;align-items:center;z-index:3}
#bwave{font-weight:900;font-size:13px;background:#0008;padding:3px 10px;border-radius:10px}#btitle{flex:1;font-size:11px;opacity:.85;text-shadow:0 0 4px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bhud button{border:1px solid #fff6;background:#0008;border-radius:14px;padding:4px 10px;font-size:12px}
#bfoes{position:absolute;left:0;right:0;top:34px;bottom:2px;display:flex;align-items:flex-end;justify-content:center}
.foe{position:relative;flex:1;max-width:60%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transition:opacity .5s,transform .5s}
#bfoes.n2 .foe{max-width:48%}#bfoes.n3 .foe{max-width:34%}.foe.boss{max-width:90%}
.foe img{max-width:100%;max-height:calc(100% - 52px);object-fit:contain;filter:drop-shadow(0 8px 10px #000c);animation:fidle 2.4s ease-in-out infinite;transform-origin:50% 100%}
.foe:nth-child(2) img{animation-delay:-.8s}.foe:nth-child(3) img{animation-delay:-1.6s}
@keyframes fidle{50%{transform:translateY(-6px) scaleY(1.03)}}
.foe img.hit{animation:fhit .3s}@keyframes fhit{0%{filter:brightness(4) drop-shadow(0 0 12px #fff)}40%{transform:translateX(10px) rotate(3deg)}70%{transform:translateX(-8px) rotate(-2deg)}}
.foe img.eatk{animation:featk .45s}@keyframes featk{40%{transform:translateY(34px) scale(1.18)}}
.foe.down{opacity:0;transform:scale(.5) translateY(30px)}
.foe.shield img{filter:drop-shadow(0 0 10px #7af0ff) drop-shadow(0 8px 10px #000c)}
.fname{font-size:12px;font-weight:900;text-shadow:0 0 4px #000,0 0 3px #000;white-space:nowrap}.fname small{opacity:.8;font-size:10px}
.fhp{width:80%;height:8px;background:#300a;border:1px solid #fff8;border-radius:5px;overflow:hidden;margin:2px 0}.fhp i{display:block;height:100%;background:linear-gradient(90deg,#ff2a55,#ffa04a);transition:width .3s}
.finfo{display:flex;gap:3px;align-items:center;font-size:10px;margin-bottom:2px}.fcd b{font-size:15px;color:#ffe45a;margin:0 1px}.foe.danger .fcd b{color:#ff4a6a;animation:blink .5s infinite}
@keyframes blink{50%{opacity:.3}}
.wk{color:#000;font-weight:900;padding:0 5px;border-radius:7px}.ab{background:#000a;border:1px solid #ff9ad0;border-radius:7px;padding:0 4px}
.ftg{position:absolute;top:0;font-size:18px;color:#ffe45a;opacity:0}.foe.tg .ftg{opacity:1;animation:tgb .8s infinite}@keyframes tgb{50%{transform:translateY(5px)}}
#bparty{display:flex;gap:4px;padding:0 4px}
.girl{position:relative;flex:1;height:84px;border:2px solid var(--c);border-radius:12px;background:linear-gradient(#ffffff22,#0008);padding:0;overflow:hidden;transition:transform .1s}
.girl img{position:absolute;left:50%;top:-6%;width:150%;transform:translateX(-50%);pointer-events:none}
.girl .gn{position:absolute;left:0;right:0;bottom:9px;font-size:11px;font-weight:900;text-shadow:0 0 3px #000,0 0 3px #000}
.gg{position:absolute;left:4px;right:4px;bottom:3px;height:5px;background:#0009;border-radius:3px;overflow:hidden}.gg i{display:block;height:100%;width:0;background:var(--c);transition:width .3s}
.girl.ready{animation:rdy 1s infinite}@keyframes rdy{50%{box-shadow:0 0 18px var(--c),inset 0 0 12px var(--c)}}
.girl.atk{transform:translateY(-8px)}.girl .seal{display:none;position:absolute;inset:0;background:#4a1a6acc;font-size:28px;font-weight:900;align-items:center;justify-content:center;z-index:2}.girl.sealed .seal{display:flex}
.gdm{position:absolute;left:0;right:0;top:20%;font-size:18px;font-weight:900;color:#fff;text-shadow:0 0 4px #000,2px 2px 0 var(--c);opacity:0;z-index:3}.gdm.on{animation:gdm .6s forwards}@keyframes gdm{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:none}100%{opacity:1}}
#bthp{position:relative;height:16px;margin:4px 6px;background:#200a18;border:1px solid #ff9ad0;border-radius:8px;overflow:hidden}
#bthp i{position:absolute;left:0;top:0;bottom:0;width:100%;transition:width .3s}#bthp .tr{background:#fff;opacity:.7;transition:width .6s}#bthp .hp{background:linear-gradient(90deg,#38d88a,#a6ff6a)}
#bthp b{position:absolute;inset:0;text-align:center;font-size:11px;line-height:15px;text-shadow:0 0 3px #000}
#bboard{position:relative;flex:0 0 auto;height:min(calc((100vw - 8px) * 5 / 6),calc(520px * 5 / 6),45vh);display:flex;justify-content:center;align-items:flex-start;margin-bottom:calc(6px + env(safe-area-inset-bottom))}
#board{border-radius:10px;touch-action:none;box-shadow:0 0 0 2px #ffffff22,0 6px 20px #000a}
#btimer{position:absolute;left:8px;right:8px;top:-5px;height:4px}#btimer i{display:block;height:100%;width:0;background:#ffe45a;border-radius:2px}
/* ---- 演出 ---- */
canvas#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
#flash{position:fixed;inset:0;pointer-events:none;background:#fff;opacity:0;z-index:55}
#redfl{position:fixed;inset:0;pointer-events:none;z-index:54;box-shadow:inset 0 0 80px #ff0033;opacity:0}#redfl.on{animation:redf .5s}@keyframes redf{20%{opacity:1}}
#say{position:fixed;z-index:52;pointer-events:none;transform:translate(-50%,-110%);background:#fff;color:#2a0a30;border:2px solid var(--c);font-weight:900;font-size:13px;padding:5px 12px;border-radius:14px;white-space:nowrap;box-shadow:0 2px 8px #0008}
#toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:70;max-width:90vw;background:#000c;border:1px solid #ff9ad0;border-radius:14px;padding:10px 14px;font-size:13px;font-weight:700;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s}#toast.on{opacity:1}
.ctag{position:fixed;z-index:53;pointer-events:none;transform:translate(-50%,-50%);font-weight:900;font-size:13px;color:#fff;text-shadow:0 0 6px var(--c),0 0 2px #000;white-space:nowrap;animation:ctag .9s forwards}.ctag b{font-size:26px;color:#fff;margin-right:1px;text-shadow:0 0 10px var(--c),2px 2px 0 #000}
.ctag.big b{font-size:34px}.ctag.stag{font-size:16px;color:#fff6c0;letter-spacing:1px;text-shadow:0 0 8px var(--c),0 0 14px var(--c),2px 2px 0 #000;animation-duration:1.1s}@keyframes ctag{0%{opacity:0;transform:translate(-50%,-30%) scale(1.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-120%)}}
.word{position:fixed;left:50%;top:36%;z-index:56;pointer-events:none;transform:translate(-50%,-50%);font-weight:900;font-size:28px;font-style:italic;text-shadow:0 0 12px currentColor,3px 3px 0 #000;white-space:nowrap;animation:word 1.3s forwards}
.word.huge{font-size:min(13vw,60px)}@keyframes word{0%{opacity:0;transform:translate(-50%,-50%) scale(3)}12%{opacity:1;transform:translate(-50%,-50%) scale(.9)}20%{transform:translate(-50%,-50%) scale(1.05)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%)}}
.pop{position:fixed;z-index:53;pointer-events:none;transform:translate(-50%,-50%);font-weight:900;font-size:24px;text-shadow:0 0 4px #000,2px 2px 0 #000;animation:pop 1s forwards}
.pop.weak{font-size:30px;color:#ffe45a}.pop.crit{font-size:36px;color:#ff7ad8}.pop.wtxt{font-size:15px;color:#ffb84a;margin-top:-30px}.pop.heal{color:#7dff9a;font-size:20px}.pop.hurt{color:#ff6a8a;font-size:22px}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-20%) scale(.5)}15%{opacity:1;transform:translate(-50%,-80%) scale(1.25)}30%{transform:translate(-50%,-90%) scale(1)}100%{opacity:0;transform:translate(-50%,-180%)}}
.drop{position:fixed;z-index:53;pointer-events:none;font-size:30px;transform:translate(-50%,-50%);animation:drop 1.2s forwards}@keyframes drop{0%{transform:translate(-50%,-50%) scale(0)}20%{transform:translate(-50%,-120%) scale(1.3)}50%{transform:translate(-50%,-60%) scale(1)}100%{opacity:0;transform:translate(-50%,200%) scale(.5)}}
.cut{position:fixed;inset:0;z-index:57;pointer-events:none;overflow:hidden}
.cut::before{content:"";position:absolute;left:-10%;right:-10%;top:30%;height:40%;background:linear-gradient(90deg,var(--c),#fffa,var(--c));transform:skewY(-8deg);animation:cbg 1.5s forwards;opacity:.92}
.cut .lines{position:absolute;inset:0;background:repeating-linear-gradient(-8deg,transparent 0 18px,#ffffff22 18px 20px);animation:cl .3s linear infinite}@keyframes cl{to{background-position:-60px 0}}
@keyframes cbg{0%{transform:skewY(-8deg) scaleY(0)}12%{transform:skewY(-8deg) scaleY(1)}85%{transform:skewY(-8deg) scaleY(1);opacity:.92}100%{opacity:0}}
.cut img{position:absolute;right:-2%;top:18%;height:64%;animation:cimg 1.5s forwards;filter:drop-shadow(0 0 16px #fff)}
@keyframes cimg{0%{transform:translateX(70%);opacity:0}15%{transform:none;opacity:1}85%{transform:translateX(-4%);opacity:1}100%{transform:translateX(-20%);opacity:0}}
.cut b{position:absolute;left:5%;top:43%;font-size:min(9vw,40px);font-style:italic;text-shadow:0 0 10px #000,3px 3px 0 #0008;animation:ctx 1.5s forwards}.cut small{position:absolute;left:6%;top:56%;font-weight:900;animation:ctx 1.5s forwards;text-shadow:0 0 6px #000}
@keyframes ctx{0%{opacity:0;transform:translateX(-30px)}20%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
.bossin{position:fixed;left:0;right:0;top:32%;z-index:57;pointer-events:none;text-align:center;background:linear-gradient(90deg,transparent,#a0002acc,transparent);padding:10px 0;animation:bi 1.8s forwards}
.bossin i{display:block;font-weight:900;letter-spacing:.4em;color:#ffd0d0;font-size:13px;animation:blink .3s infinite}.bossin b{font-size:28px;text-shadow:0 0 12px #f00}
@keyframes bi{0%{opacity:0;transform:scaleY(0)}10%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0}}
/* ---- お話 ---- */
#vn{position:absolute;inset:0;z-index:20}
.vbg{position:absolute;inset:0;background:#120822 center/cover}
.vpics{position:absolute;left:0;right:0;bottom:120px;top:40px}
.vp{position:absolute;bottom:0;height:auto;width:78%;transition:filter .2s,left .3s;filter:drop-shadow(0 6px 12px #000a)}
.vp.c{left:11%}.vp.l{left:-12%}.vp.r{left:34%}.vp.dim{filter:brightness(.55)}.vp.hop{animation:hop .35s}@keyframes hop{30%{transform:translateY(-14px)}}
.vbox{position:absolute;left:8px;right:8px;bottom:calc(10px + env(safe-area-inset-bottom));min-height:130px;background:linear-gradient(#2a1040f2,#120822f4);border:2px solid #ffb0e8;border-radius:16px;padding:14px 16px}
.vname{position:absolute;top:-15px;left:14px;padding:3px 14px;border-radius:12px;font-weight:900;font-size:14px}.vname:empty{display:none}
.vtext{font-size:16px;line-height:1.65;white-space:pre-wrap;min-height:3.3em}
.vnext{position:absolute;right:14px;bottom:6px;font-size:12px;animation:blink 1s infinite;color:#ffb0e8}
.vctl{position:absolute;right:8px;top:calc(8px + env(safe-area-inset-top));display:flex;gap:6px}.vctl button{border:1px solid #fff5;background:#0008;border-radius:14px;padding:5px 12px;font-size:12px}.vctl button.on{background:#ff5fb8}

/* はじめての案内 */
#tut{position:absolute;inset:0;pointer-events:none;z-index:5}
#tut .tmsg{position:absolute;left:6%;right:6%;top:-58px;background:#000c;border:2px solid #ffe45a;border-radius:12px;padding:6px 10px;font-size:13px;font-weight:900;text-align:center}
#tut .tmsg small{font-weight:400;font-size:11px}
#tut .finger{position:absolute;font-size:40px;left:15%;top:30%;animation:fing 2.4s ease-in-out infinite;filter:drop-shadow(0 2px 4px #000)}
@keyframes fing{0%{left:12%;top:30%;opacity:0}10%{opacity:1}35%{left:45%;top:30%}60%{left:45%;top:55%}85%{left:75%;top:55%;opacity:1}100%{left:75%;top:55%;opacity:0}}
/* 章クリア・スタッフロール */
.ccm .mbox{background:radial-gradient(#5a2a80,#1a0b2e)}
.ccw{font-size:13px;letter-spacing:.4em;color:#ffe45a;font-weight:900;animation:blink 1s infinite}
.chclear h2{margin:6px 0;font-size:22px;text-shadow:0 0 12px #ff5fd2}
.chclear .four{display:flex;justify-content:center}.chclear .four img{width:26%;margin:0 -2%}
.crm .mbox{height:80vh;display:flex;flex-direction:column;overflow:hidden}
.credits{display:flex;flex-direction:column;height:100%}.credits .roll{flex:1;overflow:hidden;position:relative}
.credits .roll>*{animation:roll 22s linear forwards}
@keyframes roll{from{transform:translateY(70vh)}to{transform:translateY(-120vh)}}
.credits p{margin:28px 0;line-height:1.9}
.bimg{width:60%}.foe.in{animation:fin .55s both}
@keyframes fin{0%{opacity:0;transform:scale(.3) translateY(40px);filter:brightness(3)}60%{opacity:1;transform:scale(1.08);filter:brightness(1.6)}100%{transform:none;filter:none}}
.rk{display:flex;gap:8px;align-items:center;background:#ffffff10;border-radius:10px;padding:6px 10px;margin:3px 0;font-size:13px}.rk b{width:26px;color:#ffe45a}.rk span{flex:1}.rk.me{background:#ff5fb855}
.hside{left:8px;right:8px;top:auto;bottom:calc(136px + env(safe-area-inset-bottom));flex-direction:row;flex-wrap:wrap;justify-content:center;gap:5px}
.hbtn{width:auto;flex:1 1 30%;padding:7px 2px}
.hstart{right:10px}
.hgirls{height:calc(100% - 300px)}.hside{bottom:calc(150px + env(safe-area-inset-bottom))}
.hgirls{height:calc(100% - 340px)}
.hside{bottom:calc(166px + env(safe-area-inset-bottom))}
.hgirls{height:calc(100% - 360px)}

.lead{display:inline-block;background:#ffd95a;color:#3a2000;font-weight:900;border-radius:8px;padding:2px 10px;font-size:12px}
.girl.leader::before{content:'👑';position:absolute;left:2px;top:0;font-size:14px;z-index:3}

.eqs.eq4{grid-template-columns:repeat(4,1fr)}

.stages.z10{flex-wrap:wrap}.stages.z10 .stg{flex:0 0 calc(20% - 4px);font-size:15px}

.eps{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.eps .btn{width:auto;margin:0}
.pb h4 .btn.sm{margin-left:6px;padding:3px 10px;font-size:11px}

#bboard.fever #board{animation:fever 1s linear infinite}
@keyframes fever{0%{box-shadow:0 0 0 3px #ff5f8a,0 0 24px #ff5f8a}25%{box-shadow:0 0 0 3px #ffe45a,0 0 24px #ffe45a}50%{box-shadow:0 0 0 3px #3ed6a0,0 0 24px #3ed6a0}75%{box-shadow:0 0 0 3px #a35cff,0 0 24px #a35cff}100%{box-shadow:0 0 0 3px #ff5f8a,0 0 24px #ff5f8a}}

#tut .tmsg{top:auto;bottom:8px;background:#000d}
.fdex{text-align:center}.fdex .fbig{width:62%;max-width:240px;filter:drop-shadow(0 6px 12px #0008)}.fdex h3{margin:4px 0}.fdex .lore{font-size:13px;line-height:1.7;text-align:left;background:#ffffff10;border-radius:10px;padding:8px 10px;margin:8px 0}.fdex h4{margin:8px 0 4px;font-size:13px}.vrow{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:10px}.vchip{display:inline-flex;flex-direction:column;align-items:center;width:52px}.vchip img{width:48px;height:48px;object-fit:contain}.vchip small{font-size:9px;filter:none}.bk[data-k]:not(.no){cursor:pointer}
.bk .noimg{display:flex;align-items:center;justify-content:center;aspect-ratio:1;font-size:26px;color:#ffffff30}.setb{color:#ffd86b;font-weight:700}
.icard .sr{position:absolute;right:3px;top:18px;font-size:9px;font-weight:900;background:#ffd86bdd;color:#4a2400;border-radius:6px;padding:0 4px;line-height:14px}
.dayq{background:linear-gradient(#1a0b2ecc,#1a0b2ecc),var(--bg) center/cover;margin-bottom:10px}.dayq h3{margin:0 0 4px;font-size:15px;color:#ffd86b}
.pickup h4{margin:0 0 4px}.pki{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.pki img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 4px #ffd86b88)}
.lb{font-size:11px;margin-left:6px;background:linear-gradient(90deg,#ffd86b,#ff7ad8);color:#3a1040;border-radius:8px;padding:1px 6px;vertical-align:middle}[data-lb]{margin-top:6px}
.foe.enr::before{content:"";position:absolute;left:5%;right:5%;bottom:0;height:80%;background:radial-gradient(ellipse at 50% 60%,#ff3a5a88,transparent 65%);animation:enr .8s infinite alternate;pointer-events:none;z-index:0}.foe.enr img{position:relative;z-index:1}@keyframes enr{from{opacity:.4;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
.icard .lk{position:absolute;left:3px;bottom:16px;font-size:11px}
.rush{margin-top:12px;background:linear-gradient(135deg,#3a0a1e,#1a0b2e);border:1px solid #ff4f8a88}.rush h3{margin:0 0 4px;color:#ff7ab0;font-size:15px}
.dayq .evst{display:grid;grid-template-columns:1fr 1fr;gap:6px}.dayq .evst .btn{margin:0;padding:8px 4px}.dayq{background:linear-gradient(#1a0b2ebb,#1a0b2eee),var(--bg) center/cover!important}
.vlog{max-height:60vh;overflow-y:auto;text-align:left;font-size:13px;line-height:1.6}.vlog p{margin:0 0 8px}.vlog b{display:block;font-size:11px;color:#ffb0e8}.vlog [data-vi]{cursor:pointer}
.mems{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.mems .btn{margin:0;width:auto;flex:0 0 auto}
#bparty .girl .gpet{position:absolute;right:-4px;bottom:14px;width:34%;max-width:34px;height:auto;z-index:3;animation:pethop 1.6s ease-in-out infinite;pointer-events:none}@keyframes pethop{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#bparty .girl img.gpet{left:auto;top:auto;right:-2px;bottom:12px;width:32px;height:32px;object-fit:contain;border-radius:0;filter:drop-shadow(0 2px 3px #000a);opacity:1}
.prof{text-align:center}.prof img{width:120px;height:120px;object-fit:cover;object-position:50% 15%;border-radius:50%;border:3px solid var(--c);background:#0004}.prof h3{margin:6px 0 2px}.prof .role{color:var(--c);font-weight:700;margin:0 0 8px;font-size:13px}.prof table{width:100%;font-size:12px;border-collapse:collapse;text-align:left}.prof th{width:4.5em;color:#ffb0e8;font-weight:700;padding:3px 4px;vertical-align:top}.prof td{padding:3px 4px}.gtop h3 .btn.sm{display:inline-block;width:auto;margin:0 0 0 4px;padding:2px 8px;font-size:10px;vertical-align:middle}
.ib{position:relative}.ib .cmp{position:absolute;right:4px;bottom:22px;font-style:normal;font-size:13px;font-weight:900;text-shadow:0 0 3px #000,0 0 3px #000}.ib .cmp.up{color:#5dff9a}.ib .cmp.dn{color:#ff6a7a}
.golden{text-align:center;font-weight:900;font-size:13px;color:#3a2000;background:linear-gradient(90deg,#ffd86b,#fff3b0,#ffd86b);background-size:200% 100%;border-radius:20px;padding:4px 10px;margin:0 16px 6px;animation:gold 2s linear infinite;box-shadow:0 0 12px #ffd86b88}@keyframes gold{from{background-position:0 0}to{background-position:200% 0}}
#home .golden{position:absolute;left:16px;right:16px;margin:0;bottom:calc(262px + env(safe-area-inset-bottom));z-index:5}
.icard.prem{border-color:#ffd86b;box-shadow:0 0 8px #ffd86b66,inset 0 0 10px #ffd86b33}.icard.gx{border:2px solid transparent;background:radial-gradient(#ffffff22,#0006) padding-box,linear-gradient(135deg,#ff7ad8,#ffd86b,#7af0ff,#b07aff) border-box;box-shadow:0 0 12px #ff9ad888}.icard.gx::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff55 45%,transparent 60%);background-size:250% 100%;animation:gxs 2.4s linear infinite;pointer-events:none}@keyframes gxs{from{background-position:150% 0}to{background-position:-100% 0}}.icard .gxl{position:absolute;right:3px;bottom:16px;font-size:9px;font-weight:900;background:linear-gradient(90deg,#ff7ad8,#b07aff);color:#fff;border-radius:6px;padding:0 4px;z-index:2}
.res .pow{font-size:14px;margin:4px 0}.res .pow b{color:#ffd86b;font-size:17px}.res .pow em{font-style:normal;color:#5dff9a;font-weight:900}.hpow{position:absolute;left:10px;top:calc(52px + env(safe-area-inset-top));z-index:4;font-size:11px;background:#1a0b2ecc;border:1px solid #ffd86b88;border-radius:12px;padding:2px 10px;color:#fff}.hpow b{color:#ffd86b;font-size:13px}.tabs .lock{opacity:.45}.tabd{font-size:12px;color:#d8c8ff;margin:6px 4px 10px;line-height:1.5}.chclear .opened{background:#ffd86b22;border:1px solid #ffd86b;border-radius:10px;padding:6px 8px;font-size:13px;color:#ffe9a0}
.qmode{display:flex;gap:6px;margin:0 4px 8px}.qmode button{flex:1;padding:6px;border-radius:10px;border:1px solid #ffffff33;background:#ffffff10;color:#fff;font-weight:700}.qmode button.on{background:linear-gradient(#ff5f8a,#b0204a);border-color:#ffb0c8}.chap.hard{box-shadow:inset 0 0 0 2px #ff5f8a88}
.helps{display:flex;flex-direction:column;gap:6px;margin:8px 0}.help{display:flex;align-items:center;gap:8px;text-align:left;background:#ffffff10;border:1px solid var(--c);border-radius:12px;padding:4px 8px;color:#fff}.help img{width:52px;height:52px;object-fit:cover;object-position:50% 15%;border-radius:50%;border:2px solid var(--c)}.help b{display:block;font-size:13px}.help small{font-size:11px;color:#ddd}#bparty .girl .ghelp{position:absolute;left:2px;top:2px;z-index:3;font-size:9px;font-weight:900;background:#5dff9a;color:#0a3a1a;border-radius:6px;padding:0 4px}

.raid{text-align:center}.raid img{width:60%;max-width:220px;filter:drop-shadow(0 0 16px #ff4f8a88)}.raid h3{margin:2px 0 6px}.rbar{height:12px;border-radius:6px;background:#0006;border:1px solid #ff9ad8;overflow:hidden;margin:0 10px}.rbar i{display:block;height:100%;background:linear-gradient(90deg,#ff4f8a,#ffd86b)}.rwin{font-size:22px;font-weight:900;color:#ffd86b;text-shadow:0 0 10px #ffd86b}

.chap.deep{box-shadow:inset 0 0 0 2px #7af0ff88}.deepgo{display:flex;flex-direction:column;align-items:center;margin:6px 0 0;background:linear-gradient(#2a6aa0,#123a6a)}.deepgo small{font-size:10px;opacity:.85}

/* ガチャ演出 */
.gs{position:fixed;inset:0;z-index:48;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.gs-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,#2a1050,#05020c 70%);animation:gsin .4s both}
@keyframes gsin{from{opacity:0}}
.gs-rays{position:absolute;left:50%;top:42%;width:130vmax;height:130vmax;margin:-65vmax 0 0 -65vmax;background:repeating-conic-gradient(#ffffff10 0 6deg,transparent 6deg 18deg);animation:spin 14s linear infinite;opacity:.6}
.gs-circle{position:absolute;left:50%;top:42%;width:220px;height:220px;margin:-110px 0 0 -110px;transition:transform .4s,opacity .4s}
.gs-circle i{position:absolute;inset:0;border-radius:50%;border:3px solid #7af0ff;box-shadow:0 0 24px #7af0ff,inset 0 0 24px #7af0ff;animation:spin 3s linear infinite}
.gs-circle i:nth-child(2){inset:22px;border-style:dashed;animation-duration:2s;animation-direction:reverse}
.gs-circle i:nth-child(3){inset:50px;border-width:2px;animation-duration:1.3s}
.gs-circle b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:64px;color:#fff;text-shadow:0 0 20px #7af0ff;animation:gsp 1s ease-in-out infinite alternate}
@keyframes gsp{to{transform:scale(1.25)}}
.gs.hint.ssr .gs-circle i{border-color:#ffd86b;box-shadow:0 0 40px #ffb02a,inset 0 0 30px #ffd86b}.gs.hint.ssr .gs-circle b{color:#ffd86b;text-shadow:0 0 30px #ffb02a}.gs.hint.ssr .gs-bg{background:radial-gradient(circle at 50% 42%,#6a4a00,#0c0602 70%)}
.gs.hint.ur .gs-circle{animation:gshue 1s linear infinite}.gs.hint.ur .gs-circle i{border-color:#ff7ad8;box-shadow:0 0 60px #ff4f8a,0 0 120px #ffd86b,inset 0 0 40px #fff}.gs.hint.ur .gs-bg{background:radial-gradient(circle at 50% 42%,#6a1060,#0c0210 70%);animation:gshue 2s linear infinite}.gs.hint.ur .gs-rays{background:repeating-conic-gradient(#ff7ad855 0 6deg,#7af0ff33 6deg 12deg,transparent 12deg 18deg);opacity:1;animation-duration:4s}
@keyframes gshue{to{filter:hue-rotate(360deg)}}
.gs.burst .gs-circle{transform:scale(3);opacity:0}
.gs.urflash .gs-bg{animation:gshue .8s linear infinite}
.gs-cards{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(92vw,440px);margin-top:20px}
.gs-cards:has(.gsc:only-child){grid-template-columns:140px;justify-content:center}
.gsc{perspective:600px;animation:gsdrop .35s both}
@keyframes gsdrop{from{opacity:0;transform:translateY(-30px) scale(.6)}}
.gsi{position:relative;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,1.4,.4,1);aspect-ratio:1}
.gsb,.gsf{position:absolute;inset:0;backface-visibility:hidden}
.gsb{border-radius:12px;border:2px solid #b07aff;background:radial-gradient(#5a2a90,#1a0b2e);box-shadow:0 0 12px #b07aff88}
.gsb::after{content:"★";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;color:#ffd86b88}
.gsf{transform:rotateY(180deg)}.gsf .icard{height:100%}
.gsc.open .gsi{transform:rotateY(180deg)}
.gsc.r3.open .gsf{animation:gsgold 1.2s infinite alternate}.gsc.r4.open .gsf{animation:gsur 1s linear infinite}
@keyframes gsgold{to{filter:drop-shadow(0 0 14px #ffd86b) brightness(1.15)}}
@keyframes gsur{0%{filter:drop-shadow(0 0 14px #ff7ad8) hue-rotate(0)}100%{filter:drop-shadow(0 0 14px #7af0ff) hue-rotate(360deg)}}
.gs-skip{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));font-size:12px;color:#fff9;animation:gsp 1s infinite alternate}
.gs-ok{position:relative;margin-top:18px;width:min(80vw,320px)}

.icard .dup{position:absolute;left:3px;bottom:16px;font-size:9px;color:#ffd86b;text-shadow:0 0 3px #000;letter-spacing:-1px;z-index:2}

.tip h3{margin:0 0 8px;color:#ffd86b}.tip p{text-align:left;line-height:1.7;font-size:14px;margin:0 0 12px}

.lbonus .days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:6px 0}.lbonus .days span{font-size:9px;background:#ffffff10;border-radius:6px;padding:3px 0;display:flex;flex-direction:column;align-items:center;opacity:.6}.lbonus .days span b{font-size:10px}.lbonus .days .got{opacity:.35}.lbonus .days .now{opacity:1;background:#ffd86b33;outline:2px solid #ffd86b;animation:gsp .6s infinite alternate}
.starter .four{display:flex;justify-content:center;gap:4px}.starter .four img{width:22%;border-radius:50%;object-fit:cover;object-position:50% 15%;aspect-ratio:1;border:2px solid #ffd86b}.starter h3{margin:8px 0 2px;color:#ffd86b}
#nav button.guide{animation:navg 1s ease-in-out infinite alternate;position:relative}#nav button.guide::after{content:'NEW';position:absolute;top:2px;right:8px;font-size:9px;font-weight:900;background:#ff4f8a;color:#fff;border-radius:6px;padding:0 4px}@keyframes navg{to{filter:drop-shadow(0 0 8px #ffd86b) brightness(1.4)}}

#vn.cg .vpics{opacity:0;transition:opacity .6s}#vn.cg .vbg{background-size:cover;background-position:center top;animation:cgin 1.2s ease-out both}@keyframes cgin{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}

.howto details{background:#ffffff0d;border:1px solid #ffffff22;border-radius:12px;margin:0 0 8px;overflow:hidden}.howto summary{cursor:pointer;padding:10px 12px;font-weight:800;color:#ffd0f0;list-style:none}.howto summary::-webkit-details-marker{display:none}.howto summary::after{content:'＋';float:right;color:#ffd86b}.howto details[open] summary::after{content:'－'}.howto p{margin:0;padding:0 12px 12px;font-size:14px;line-height:1.8;text-align:left}
.hside .hbtn{flex:1 1 22%}

.areas{display:flex;gap:5px;overflow-x:auto;padding:2px 0 8px;margin-bottom:6px;scrollbar-width:thin}.areas button{flex:0 0 auto;padding:5px 10px;border-radius:14px;border:1px solid #ffffff33;background:#ffffff10;color:#fff;font-size:12px;font-weight:700;display:flex;flex-direction:column;align-items:center;line-height:1.2}.areas button small{font-size:9px;opacity:.8}.areas button.on{background:linear-gradient(#ff8ad8,#d43aa8);border-color:#ffd0f0}

/* さわり心地 */
button,.btn,.hbtn,.stg,.bk,.ib,.hg{transition:transform .08s ease-out,filter .08s}
button:active:not(:disabled),.btn:active:not(:disabled),.hbtn:active,.stg:active:not(:disabled),.bk:active,.ib:active,.hg:active{transform:scale(.93);filter:brightness(1.18)}
#bboard.hurry,.hurry{animation:hurry .5s ease-in-out infinite alternate}
@keyframes hurry{from{box-shadow:0 0 0 2px #ff4a6a55,0 0 12px #ff4a6a44}to{box-shadow:0 0 0 3px #ff4a6acc,0 0 26px #ff4a6aaa}}
#bcombo{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:20;pointer-events:none;font-weight:900;font-style:italic;color:#fff;font-size:14px;text-shadow:0 0 10px #ff5fd2,2px 2px 0 #000;opacity:0;white-space:nowrap}
#bcombo b{font-size:40px;margin-right:2px}
#bcombo.on{opacity:1}#bcombo.pop{animation:cpop .25s cubic-bezier(.2,1.8,.4,1)}
#bcombo.c1{color:#ffe45a}#bcombo.c2{color:#ff9a4a}#bcombo.c3,#bcombo.c4{color:#ff6ad8;text-shadow:0 0 16px #ff5fd2,0 0 30px #ffd86b,2px 2px 0 #000}
@keyframes cpop{0%{transform:translate(-50%,-50%) scale(1.7)}100%{transform:translate(-50%,-50%) scale(1)}}

#bcombo{transition:opacity .3s}#bcombo b{font-size:52px}
/* ガチャ：めくる前の裏面で前ぶれ */
.gsc{cursor:pointer}
.gsc:not(.open):active .gsi{transform:scale(.92)}
.gsc.r2:not(.open) .gsb{border-color:#7af0ff;box-shadow:0 0 14px #7af0ffaa;animation:gsb2 1.4s ease-in-out infinite alternate}
.gsc.r3:not(.open) .gsb{border-color:#ffd86b;background:radial-gradient(#8a6010,#2a1600);box-shadow:0 0 18px #ffd86b;animation:gsb3 .8s ease-in-out infinite alternate}
.gsc.r4:not(.open) .gsb{border-color:#fff;background:conic-gradient(from 0deg,#ff7ad8,#ffd86b,#7af0ff,#b07aff,#ff7ad8);box-shadow:0 0 24px #ff7ad8;animation:gsb4 1s linear infinite}
.gsc.r3:not(.open) .gsb::after,.gsc.r4:not(.open) .gsb::after{color:#fff}
@keyframes gsb2{to{box-shadow:0 0 24px #7af0ff}}@keyframes gsb3{to{transform:translateY(-3px);box-shadow:0 0 30px #ffd86b}}@keyframes gsb4{to{filter:hue-rotate(360deg)}}
.gs-btns{position:relative;display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:16px;width:min(80vw,320px)}.gs-btns .btn{width:100%;margin:0}

.hportal{position:absolute;right:10px;top:calc(52px + env(safe-area-inset-top));z-index:4;font-size:10px;font-weight:700;color:#fff;text-decoration:none;background:linear-gradient(90deg,#3a7aff,#7a4aff);border-radius:12px;padding:3px 10px;box-shadow:0 0 10px #7a4aff88;max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tb-st.use{animation:stuse .6s ease-out}@keyframes stuse{0%{filter:brightness(2) drop-shadow(0 0 8px #7af0ff)}100%{filter:none}}
.stpop{position:fixed;z-index:80;pointer-events:none;font-weight:900;font-size:22px;color:#7af0ff;text-shadow:0 0 8px #3ab0ff,2px 2px 0 #000;transform:translateX(-50%);animation:stpop .9s ease-out forwards}@keyframes stpop{0%{opacity:0;transform:translate(-50%,-6px) scale(1.6)}20%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,26px)}}

/* 技がたまったら：タップの札が跳ねて、絵が光る */
.girl.ready{border-color:#fff}
.girl.ready img{filter:brightness(1.25) drop-shadow(0 0 6px var(--c))}
.girl.ready::after{content:'タップ';position:absolute;left:50%;top:3px;transform:translateX(-50%);z-index:4;white-space:nowrap;font-size:10px;font-weight:900;color:#3a2000;background:linear-gradient(#fff6a0,#ffc23a);border-radius:9px;padding:1px 6px;box-shadow:0 0 8px #ffd86b;animation:tapme .7s ease-in-out infinite alternate;pointer-events:none}
@keyframes tapme{to{transform:translateX(-50%) translateY(-2px) scale(1.08)}}
.girl.rdyin{animation:rdyin .45s ease-out,rdy 1s .45s infinite}@keyframes rdyin{0%{transform:scale(1)}40%{transform:scale(1.12) translateY(-6px)}100%{transform:scale(1)}}

/* 提供割合 */
.grates{display:block;margin:8px auto 0}
.rates{max-height:62vh;overflow:auto;text-align:left}.rates h4{margin:10px 0 4px}
.rates table{width:100%;border-collapse:collapse;font-size:12px}.rates td{padding:4px 6px;border-bottom:1px solid #ffffff22;vertical-align:top}.rates td:last-child{text-align:right;white-space:nowrap;font-weight:700}
.rates td[colspan]{text-align:left;font-weight:400;border-bottom:1px solid #ffffff44}.rates details small{display:block;line-height:1.6;opacity:.85}.rates summary{cursor:pointer;font-size:11px;opacity:.8}

/* 名前の入力・挨拶 */
.nickin{width:100%;box-sizing:border-box;font-size:16px;padding:10px;border-radius:10px;border:2px solid #ffffff44;background:#0006;color:#fff;margin:6px 0 10px}
.hg.greet{animation:greet .6s ease-out 2}@keyframes greet{40%{transform:translateY(-10px) scale(1.04)}}
/* 連鎖の文字（連鎖が進むほど大きく、7連鎖からは虹色に光る） */
.chainw{position:fixed;transform:translate(-50%,-50%);z-index:60;pointer-events:none;font-weight:900;white-space:nowrap;-webkit-text-stroke:2px #fff;paint-order:stroke fill;text-shadow:0 0 12px currentColor,0 3px 0 #0008;animation:chainw .9s ease-out forwards}
.chainw.hot{animation-name:chainw,chainhot}
@keyframes chainw{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}18%{transform:translate(-50%,-50%) scale(1.35);opacity:1}35%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-150%) scale(1);opacity:0}}
@keyframes chainhot{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg) brightness(1.3)}}

/* クリアした回数の印 */
.cdots{display:block;font-style:normal;font-size:9px;letter-spacing:1px;color:#ffe45a;line-height:1}.hstart .cdots{display:inline;font-size:11px;margin-left:4px}