:root{
  --bg:#07101F; --panel:rgba(11,21,41,.8); --panel2:rgba(16,29,55,.82); --line:#22375C;
  --gold:#F2B33D; --teal:#2DD7E5; --red:#F03A52; --ink:#EAF1FB; --dim:#8FA3C2;
  --c-common:#9DB2C9; --c-rare:#3FA7F5; --c-epic:#B05CF0; --c-legendary:#F2B33D; --c-mythic:#F03A52;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden; user-select:none; -webkit-user-select:none;
}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
   radial-gradient(60% 40% at 50% -10%, rgba(45,215,229,.10), transparent 70%),
   radial-gradient(50% 35% at 85% 110%, rgba(240,58,82,.08), transparent 70%),
   radial-gradient(45% 30% at 10% 105%, rgba(242,179,61,.07), transparent 70%);
}
#app{position:relative; z-index:1; max-width:560px; margin:0 auto; height:100dvh; display:flex; flex-direction:column;}

.display{font-family:'Pirata One', Impact, 'Arial Black', serif; letter-spacing:.5px; font-weight:400;}

/* ---------- top bar ---------- */
#topbar{display:flex; align-items:center; gap:8px; padding:10px 12px 8px;}
#logo{font-size:24px; line-height:1; color:var(--gold); text-shadow:0 2px 0 #5b3c00, 0 0 18px rgba(242,179,61,.35);}
#logo small{display:block; font-size:11px; color:var(--teal); letter-spacing:3px; text-shadow:none;}
.stats{margin-left:auto; display:flex; gap:6px;}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:4px 9px; font-size:12px; font-weight:700; display:flex; align-items:center; gap:5px; white-space:nowrap;}
.stat .ic{font-size:13px;}
.stat .lbl{color:var(--dim); font-weight:600; font-size:10px;}

/* ---------- screens ---------- */
#screens{flex:1; overflow:hidden; position:relative;}
.screen{position:absolute; inset:0; overflow-y:auto; padding:6px 12px 16px; display:none;}
.screen.active{display:block;}
.screen::-webkit-scrollbar{width:0;}

/* ---------- bottom dock ---------- */
#dock{display:flex; gap:6px; padding:8px 10px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(180deg, transparent, rgba(4,9,18,.9) 30%);}
.dock-btn{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:12px; color:var(--dim); padding:8px 2px 7px; font-size:10px; font-weight:700; text-align:center; cursor:pointer; transition:all .15s;}
.dock-btn .dic{display:block; font-size:18px; margin-bottom:2px; filter:grayscale(.6) opacity(.8);}
.dock-btn.on{background:linear-gradient(180deg,#1B3158,#142543); color:var(--ink); border-color:var(--teal); box-shadow:0 0 14px rgba(45,215,229,.18) inset;}
.dock-btn.on .dic{filter:none;}
.dock-btn .badge{position:relative;}
.dock-btn .badge::after{content:""; position:absolute; top:-2px; right:-8px; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 6px var(--red);}

/* ---------- roll screen ---------- */
#stage{position:relative; height:min(42vh,350px); display:flex; align-items:center; justify-content:center; margin-top:4px;}
#burst{position:absolute; width:340px; height:340px; border-radius:50%; opacity:0; pointer-events:none; transition:opacity .3s;
  background:radial-gradient(circle, var(--burst,#3FA7F5) 0%, transparent 62%); filter:blur(6px);}
#burst.go{animation:burst .9s ease-out;}
@keyframes burst{0%{opacity:0; transform:scale(.4);} 30%{opacity:.85;} 100%{opacity:0; transform:scale(1.5);}}
#flash{position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:60;}
#flash.go{animation:flash .55s ease-out;}
@keyframes flash{0%{opacity:0;} 25%{opacity:.95;} 100%{opacity:0;}}

.card{position:relative; width:188px; aspect-ratio:400/554; border-radius:14px; background:var(--panel2); border:3px solid var(--line); overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.55);}
.card img,.card video{width:100%; height:100%; object-fit:cover; display:block;}
.card .nameplate{position:absolute; left:0; right:0; bottom:0; padding:22px 10px 8px; background:linear-gradient(transparent, rgba(2,6,14,.92) 60%); text-align:center;}
.card .nameplate .nm{font-size:19px; line-height:1.05; text-shadow:0 2px 4px #000;}
.card .nameplate .rr{font-size:10px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; margin-top:2px;}
.card.b-Gold{border-color:var(--gold); box-shadow:0 0 22px rgba(242,179,61,.5), 0 14px 40px rgba(0,0,0,.55);}
.card.b-Rainbow{border-color:transparent; background-clip:padding-box;}
.card.b-Rainbow::before, .card.b-Secret::before{content:""; position:absolute; inset:-3px; border-radius:14px; padding:3px; z-index:2; pointer-events:none;
  background:conic-gradient(from var(--spin,0deg), #f03a52,#f2b33d,#3fe06c,#2dd7e5,#b05cf0,#f03a52);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spin 3s linear infinite;}
.card.b-Secret::before{filter:drop-shadow(0 0 8px #fff); animation-duration:1.4s;}
@property --spin{syntax:'<angle>'; initial-value:0deg; inherits:false;}
@keyframes spin{to{--spin:360deg;}}
.card.shake{animation:shake .5s;}
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-6px,2px) rotate(-1.5deg)}40%{transform:translate(6px,-2px) rotate(1.5deg)}60%{transform:translate(-4px,1px)}80%{transform:translate(4px,-1px)}}
.card.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1);}
@keyframes pop{0%{transform:scale(.3) rotate(-6deg); opacity:0;} 100%{transform:scale(1) rotate(0); opacity:1;}}

#cardback{display:flex; align-items:center; justify-content:center; background:
  repeating-linear-gradient(45deg, #0E1B33 0 14px, #102040 14px 28px); }
#cardback .skull{font-size:64px; opacity:.9; filter:drop-shadow(0 0 12px rgba(45,215,229,.6));}
#cardback .gl{position:absolute; bottom:14px; font-size:18px; color:var(--teal); letter-spacing:2px;}

#rollinfo{text-align:center; min-height:20px; font-size:12px; color:var(--dim); font-weight:600; margin-top:2px;}
#rollinfo b{color:var(--gold);}
#rollbtns{display:flex; gap:8px; justify-content:center; margin-top:10px; flex-wrap:wrap;}
.btn{border:none; cursor:pointer; border-radius:12px; font-weight:800; color:#07101F; padding:13px 26px; font-size:15px;
  background:linear-gradient(180deg,#FFD476,var(--gold)); box-shadow:0 4px 0 #8a5d10, 0 8px 20px rgba(242,179,61,.25); transition:transform .08s, box-shadow .08s;}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 #8a5d10;}
.btn:disabled{filter:grayscale(.8) brightness(.7); cursor:default;}
.btn.alt{background:linear-gradient(180deg,#5FE7F2,var(--teal)); box-shadow:0 4px 0 #0e6b75, 0 8px 20px rgba(45,215,229,.22);}
.btn.small{padding:9px 14px; font-size:12px; border-radius:10px;}
.btn.ghost{background:var(--panel); color:var(--ink); border:1px solid var(--line); box-shadow:none;}
.btn.red{background:linear-gradient(180deg,#FF7A8C,var(--red)); box-shadow:0 4px 0 #7c1424;}
#potionrow{display:flex; gap:8px; justify-content:center; margin-top:10px;}
.potion{background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:7px 11px; font-size:11px; font-weight:700; cursor:pointer; color:var(--ink); display:flex; align-items:center; gap:6px;}
.potion .cnt{color:var(--gold);}
.potion.active{border-color:var(--teal); box-shadow:0 0 10px rgba(45,215,229,.3); color:var(--teal);}

/* ---------- gacha juice ---------- */
#charge{position:absolute; width:270px; height:270px; border-radius:50%; pointer-events:none; opacity:0; --cc:#3FA7F5;
  background:radial-gradient(circle, var(--cc) 0%, transparent 60%); filter:blur(10px);}
#charge.pulse{animation:chpulse .34s ease-out;}
@keyframes chpulse{0%{opacity:0; transform:scale(.5);} 40%{opacity:.95;} 100%{opacity:0; transform:scale(1.3);}}
#multigrid{position:absolute; inset:6px; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:1fr 1fr; gap:7px; cursor:pointer;}
.mcell{position:relative; border:2px solid var(--line); border-radius:9px; overflow:hidden; background:var(--panel); opacity:0; animation:mflip .4s cubic-bezier(.2,1.4,.4,1) forwards;}
.mcell img,.mcell video{width:100%; height:100%; object-fit:cover; display:block;}
.mcell .mr{position:absolute; left:0; right:0; bottom:0; font-size:7.5px; font-weight:900; text-align:center; padding:6px 1px 2px; background:linear-gradient(transparent, rgba(2,6,14,.95)); letter-spacing:.4px; text-transform:uppercase;}
.mcell.best{box-shadow:0 0 18px 3px rgba(255,255,255,.45); z-index:2;}
@keyframes mflip{0%{opacity:0; transform:rotateY(90deg) scale(.6);} 100%{opacity:1; transform:none;}}
.meter{position:relative; height:18px; background:var(--panel); border:1px solid var(--line); border-radius:10px; margin:10px 2px 6px; overflow:hidden;}
.meter .mfill{height:100%; width:0%; background:linear-gradient(90deg,#F2B33D,#F03A52); transition:width .3s; border-radius:10px; opacity:.85;}
.meter span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:900; letter-spacing:1px; text-shadow:0 1px 2px #000;}
.pityrow{display:flex; gap:8px; margin:0 2px;}
.pity{flex:1;}
.pity .pt{font-size:9px; font-weight:800; color:var(--dim); display:flex; justify-content:space-between; margin-bottom:3px;}
.pbar{height:8px; background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.pfill{height:100%; width:0%; transition:width .3s;}
.pfill.gold{background:linear-gradient(90deg,#8a5d10,var(--gold));}
.pfill.red{background:linear-gradient(90deg,#7c1424,var(--red));}
#odds{text-align:center; font-size:9px; color:var(--dim); font-weight:700; margin-top:7px; letter-spacing:.3px;}
#ticker{display:flex; gap:5px; justify-content:center; margin-top:7px; min-height:34px; overflow:hidden;}
.tkc{width:25px; height:33px; border-radius:5px; border:1.5px solid var(--line); overflow:hidden; flex-shrink:0;}
.tkc img,.tkc video{width:100%; height:100%; object-fit:cover; display:block;}
.cfp{position:fixed; top:-14px; width:8px; height:13px; z-index:66; pointer-events:none; border-radius:2px; animation:cfall linear forwards;}
@keyframes cfall{to{transform:translateY(112vh) rotate(740deg);}}
#secretbanner{position:fixed; left:50%; top:32%; transform:translate(-50%,-50%); z-index:67; font-size:38px; pointer-events:none; white-space:nowrap;
  background:linear-gradient(90deg,#f03a52,#f2b33d,#3fe06c,#2dd7e5,#b05cf0); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.75)); animation:pop .5s cubic-bezier(.2,1.6,.4,1);}
.screenshake{animation:scrshake .45s;}
@keyframes scrshake{20%{transform:translate(-7px,3px);} 45%{transform:translate(7px,-3px);} 70%{transform:translate(-4px,2px);} 100%{transform:none;}}

/* ---------- index ---------- */
.h2{font-size:22px; color:var(--gold); margin:8px 2px 2px; text-shadow:0 2px 0 rgba(0,0,0,.5);}
.sub{font-size:12px; color:var(--dim); margin:0 2px 10px; font-weight:600;}
#grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px;}
.gcard{position:relative; border-radius:11px; overflow:hidden; border:2px solid var(--line); background:var(--panel); cursor:pointer; aspect-ratio:400/554;}
.gcard img,.gcard video{width:100%; height:100%; object-fit:cover; display:block;}
.gcard.unknown img,.gcard.unknown video{filter:brightness(0) opacity(.55);}
.gcard .tag{position:absolute; left:0; right:0; bottom:0; font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; text-align:center; padding:10px 2px 4px; background:linear-gradient(transparent, rgba(2,6,14,.95));}
.gcard .cnt{position:absolute; top:4px; right:5px; background:rgba(2,6,14,.8); border-radius:7px; padding:2px 6px; font-size:10px; font-weight:800; color:var(--gold);}
.gcard .tr{position:absolute; top:4px; left:5px; background:rgba(2,6,14,.8); border-radius:7px; padding:2px 6px; font-size:9px; font-weight:800; color:var(--teal);}

/* ---------- modal ---------- */
#overlay{position:fixed; inset:0; background:rgba(3,7,15,.78); display:none; z-index:50; align-items:flex-end; justify-content:center; backdrop-filter:blur(3px);}
#overlay.show{display:flex;}
#modal{background:var(--panel); border:1px solid var(--line); border-bottom:none; border-radius:18px 18px 0 0; width:100%; max-width:560px; max-height:86dvh; overflow-y:auto; padding:16px 16px calc(18px + env(safe-area-inset-bottom)); animation:up .25s ease-out;}
@keyframes up{from{transform:translateY(40px); opacity:0;}}
#modal .x{position:sticky; top:0; float:right; background:var(--panel2); border:1px solid var(--line); color:var(--dim); border-radius:9px; width:30px; height:30px; font-size:15px; cursor:pointer;}
.mrow{display:flex; gap:14px;}
.mrow .card{width:150px; flex-shrink:0;}
.minfo{flex:1; min-width:0;}
.minfo .nm{font-size:24px; line-height:1.05;}
.minfo .rr{font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; margin:3px 0 8px;}
.kv{display:flex; justify-content:space-between; font-size:12px; padding:5px 0; border-bottom:1px dashed var(--line);}
.kv .k{color:var(--dim); font-weight:600;}
.kv .v{font-weight:800;}
.borderlist{margin-top:12px; display:flex; flex-direction:column; gap:7px;}
.brow{display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:12px; font-weight:700;}
.brow .bname{width:74px;}
.brow .bmult{color:var(--dim); font-size:11px;}
.brow .bcnt{margin-left:auto; color:var(--gold);}
.brow button{margin-left:8px;}
.traitbox{margin-top:12px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px;}
.traitbox .tn{font-weight:800; color:var(--teal); font-size:13px;}
.traitbox .td{font-size:11px; color:var(--dim); margin-top:2px;}

/* ---------- deck ---------- */
#deckslots{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:6px;}
.dslot{aspect-ratio:400/554; border:2px dashed var(--line); border-radius:11px; background:var(--panel); position:relative; overflow:hidden; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:22px;}
.dslot img,.dslot video{width:100%; height:100%; object-fit:cover;}
.dslot .dmg{position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:10px; font-weight:800; color:var(--gold); padding:8px 2px 3px; background:linear-gradient(transparent, rgba(2,6,14,.95));}
#bp{margin-top:14px; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px;}
#bp .num{font-size:34px; color:var(--red); text-shadow:0 0 16px rgba(240,58,82,.45);}
#bp .l{font-size:10px; letter-spacing:3px; color:var(--dim); font-weight:800;}
#picker{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:10px;}

/* ---------- battle ---------- */
.stage-card{display:flex; align-items:center; gap:11px; background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:9px; margin-bottom:9px; cursor:pointer;}
.stage-card.locked{opacity:.45; filter:grayscale(.6);}
.stage-card img,.stage-card video{width:52px; height:68px; object-fit:cover; border-radius:8px; border:1px solid var(--line);}
.stage-card .si{flex:1;}
.stage-card .sn{font-size:17px; line-height:1.1;}
.stage-card .sd{font-size:11px; color:var(--dim); font-weight:600; margin-top:2px;}
.stage-card .done{color:var(--teal); font-size:11px; font-weight:800;}
#fight{text-align:center;}
#fight .vs{font-size:14px; color:var(--dim); font-weight:800; letter-spacing:2px; margin:8px 0;}
.hpbar{height:18px; background:#081224; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:6px 0 2px;}
.hpbar .fill{height:100%; width:100%; background:linear-gradient(90deg,#FF7A8C,var(--red)); transition:width .12s linear; border-radius:10px;}
.hpbar.you .fill{background:linear-gradient(90deg,#5FE7F2,var(--teal));}
.hplbl{font-size:11px; color:var(--dim); font-weight:700; display:flex; justify-content:space-between;}
#fightlog{min-height:22px; font-size:13px; font-weight:800; color:var(--gold); margin-top:10px;}

/* ---------- shop ---------- */
.shoprow{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:11px; margin-bottom:9px;}
.shoprow .ic{font-size:24px;}
.shoprow .si{flex:1;}
.shoprow .sn{font-weight:800; font-size:14px;}
.shoprow .sd{font-size:11px; color:var(--dim); font-weight:600; margin-top:1px;}
#codes{display:flex; gap:8px; margin-top:6px;}
#codeinput{flex:1; background:var(--panel2); border:1px solid var(--line); border-radius:10px; color:var(--ink); padding:11px 12px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1px; outline:none;}
#codeinput:focus{border-color:var(--teal);}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:96px; background:#0a1730; border:1px solid var(--gold); color:var(--gold); border-radius:11px; padding:10px 16px; font-size:13px; font-weight:800; z-index:70; box-shadow:0 8px 24px rgba(0,0,0,.5); animation:toast 2.4s forwards; max-width:90%; text-align:center;}
@keyframes toast{0%{opacity:0; transform:translate(-50%,12px);} 12%,80%{opacity:1; transform:translate(-50%,0);} 100%{opacity:0;}}
.r-Common{color:var(--c-common);} .r-Rare{color:var(--c-rare);} .r-Epic{color:var(--c-epic);} .r-Legendary{color:var(--c-legendary);} .r-Mythic{color:var(--c-mythic);}
.r-Secret{background:linear-gradient(90deg,#f03a52,#f2b33d,#3fe06c,#2dd7e5,#b05cf0); -webkit-background-clip:text; background-clip:text; color:transparent;}
/* ---------- duel battle (ACC style) ---------- */
#bduel{position:relative;}
#turnlbl{text-align:center; font-size:19px; letter-spacing:2px; min-height:25px; margin:0 0 8px; text-shadow:0 2px 6px #000;}
.duelrow{display:flex; gap:10px; align-items:flex-start; justify-content:center; position:relative;}
.duelside{flex:1; max-width:225px; min-width:0;}
.pname{text-align:center; font-size:12px; font-weight:800; margin-bottom:5px; color:var(--red);}
.pname.you{color:var(--teal);}
.bcard{position:relative;}
.vsflame{position:absolute; left:50%; top:40%; z-index:9; font-size:46px; color:var(--gold); pointer-events:none;
  text-shadow:0 0 16px #ff7a00, 0 0 38px #ff2d00, 0 3px 0 #6b2c00; animation:vspop .55s cubic-bezier(.2,1.7,.4,1) forwards;}
@keyframes vspop{0%{transform:translate(-50%,-50%) scale(3.2); opacity:0;} 100%{transform:translate(-50%,-50%) rotate(-7deg) scale(1); opacity:1;}}
.btl{position:relative; border-radius:16px; padding:5px; box-shadow:0 10px 26px rgba(0,0,0,.55);}
.btl.f-Basic{background:linear-gradient(160deg,#46598a,#141f38 55%,#46598a);}
.btl.f-Gold{background:linear-gradient(160deg,#ffe9a8,#e0a92c 35%,#8a5d10 70%,#ffd476); box-shadow:0 0 20px rgba(242,179,61,.45), 0 10px 26px rgba(0,0,0,.55);}
.btl.f-Rainbow,.btl.f-Secret{background:conic-gradient(from var(--spin,0deg), #f03a52,#f2b33d,#3fe06c,#2dd7e5,#b05cf0,#f03a52); animation:spin 4s linear infinite;}
.btl.f-Secret{filter:drop-shadow(0 0 10px rgba(255,255,255,.55)); animation-duration:1.8s;}
.btl-in{background:#0A0F1C; border-radius:12px; overflow:hidden; display:flex; flex-direction:column;}
.btl .art{position:relative;}
.btl .art img,.btl .art video{width:100%; aspect-ratio:400/430; object-fit:cover; object-position:top; display:block;}
.btl .pills{position:absolute; top:7px; left:7px; right:7px; display:flex; gap:5px; z-index:3; flex-wrap:wrap;}
.btl .pl{font-size:8px; font-weight:900; letter-spacing:.6px; text-transform:uppercase; padding:3px 9px; border-radius:999px; color:#071019; border:1.5px solid rgba(255,255,255,.6); box-shadow:0 2px 5px rgba(0,0,0,.45);}
.btl .pl.rainbowbg{background:linear-gradient(90deg,#ff5d72,#f2b33d,#3fe06c,#2dd7e5,#b05cf0);}
.btl .bname{position:absolute; left:0; right:0; top:0; z-index:2; padding:27px 9px 18px; background:linear-gradient(rgba(3,6,12,.9), rgba(3,6,12,.45) 65%, transparent); font-size:17px; line-height:1.05; text-shadow:0 2px 4px #000; pointer-events:none;}
.btl .info{background:#0A0F1C; padding:7px 9px 6px; flex:1;}
.btl .abn{font-size:11px; font-weight:900; color:var(--gold);}
.btl .abd{font-size:8px; color:#C9D6EA; line-height:1.45; font-weight:600; margin-top:2px;}
.btl .chips{display:flex; gap:4px; flex-wrap:wrap; margin-top:6px;}
.btl .chip{font-size:7.5px; font-weight:800; color:#D7E2F2; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:2.5px 8px; letter-spacing:.3px; white-space:nowrap;}
.btl .foot{display:flex; justify-content:space-between; padding:6px 9px 7px; background:#070B14; font-size:11px; font-weight:900; border-top:1px solid rgba(255,255,255,.08);}
.btl .fdmg{color:#FF9D3D;} .btl .fhp{color:#4DE07A;}
.statsrow .btl .abd, .statsrow .btl .chips{display:none;}
.duelside .hpbar{margin-top:6px; height:12px;}
.queue{display:flex; gap:4px; margin-top:7px; justify-content:center; min-height:36px;}
.queue img,.queue video{width:27px; height:36px; object-fit:cover; border-radius:5px; border:1px solid var(--line); opacity:.85;}
.ringfx{position:absolute; inset:0; z-index:7; pointer-events:none;}
.ringfx::before,.ringfx::after{content:""; position:absolute; left:50%; top:50%; width:72%; aspect-ratio:1; margin:-36% 0 0 -36%; border-radius:50%; border:5px solid #fff; box-shadow:0 0 26px #fff, inset 0 0 26px #fff; animation:ringx .6s ease-out forwards;}
.ringfx::after{animation-delay:.13s;}
@keyframes ringx{0%{transform:scale(.15); opacity:1;} 100%{transform:scale(1.8); opacity:0;}}
.slidein{animation:slidein .45s cubic-bezier(.2,1.3,.4,1);}
@keyframes slidein{0%{transform:translateX(-46px) scale(.7); opacity:0;}}
.lungeR{animation:lungeR .34s cubic-bezier(.3,1.4,.5,1);}
@keyframes lungeR{35%{transform:translateX(26px) scale(1.05) rotate(2deg);} 100%{transform:none;}}
.lungeL{animation:lungeL .34s cubic-bezier(.3,1.4,.5,1);}
@keyframes lungeL{35%{transform:translateX(-26px) scale(1.05) rotate(-2deg);} 100%{transform:none;}}
.hitshake{animation:hitshake .28s;}
@keyframes hitshake{20%{transform:translate(-6px,2px) rotate(-2.5deg);} 55%{transform:translate(6px,-2px) rotate(2.5deg);} 100%{transform:none;}}
.dmgnum{position:absolute; font-weight:900; font-size:17px; color:#FFD476; text-shadow:0 2px 5px #000, 0 0 10px rgba(242,179,61,.5); z-index:8; pointer-events:none; animation:dmgfloat .85s forwards; white-space:nowrap;}
.dmgnum.crit{color:#FF5A70; font-size:22px; text-shadow:0 2px 5px #000, 0 0 12px rgba(240,58,82,.7);}
.dmgnum.hurt{color:#FF8A98;}
@keyframes dmgfloat{0%{opacity:0; transform:translateY(8px) scale(.5);} 18%{opacity:1; transform:translateY(-4px) scale(1.15);} 100%{opacity:0; transform:translateY(-38px) scale(1);}}
.spark{position:absolute; width:64px; height:64px; margin:-32px; border-radius:50%; pointer-events:none; z-index:6;
  background:radial-gradient(circle, #fff 0%, rgba(45,215,229,.75) 30%, transparent 62%); animation:sparkfx .32s forwards;}
.spark.red{background:radial-gradient(circle, #fff 0%, rgba(240,58,82,.8) 30%, transparent 62%);}
@keyframes sparkfx{0%{opacity:1; transform:scale(.25);} 100%{opacity:0; transform:scale(1.45);}}
.slash{position:absolute; width:96px; height:5px; margin:-2px -48px; border-radius:3px; pointer-events:none; z-index:7;
  background:linear-gradient(90deg,transparent,#fff 45%,#fff 55%,transparent); animation:slashfx .26s forwards;}
@keyframes slashfx{0%{opacity:0; transform:rotate(-42deg) scaleX(.2);} 35%{opacity:1;} 100%{opacity:0; transform:rotate(-42deg) scaleX(1.35);}}
.defeated{filter:grayscale(1) brightness(.45); transform:rotate(7deg) translateY(12px) scale(.96); transition:all .55s ease-in;}
#bstats{position:absolute; inset:-8px; z-index:20; background:rgba(4,8,16,.88); backdrop-filter:blur(4px); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; cursor:pointer; padding:12px; animation:fadein .4s;}
@keyframes fadein{from{opacity:0;}}
#bstats .vt{font-size:42px; animation:pop .5s cubic-bezier(.2,1.6,.4,1);}
#bstats .vt.win{color:var(--gold); text-shadow:0 3px 0 #5b3c00, 0 0 30px rgba(242,179,61,.8);}
#bstats .vt.lose{color:var(--red); text-shadow:0 3px 0 #4d0a14, 0 0 26px rgba(240,58,82,.7);}
.statsrow{display:flex; gap:12px; align-items:center; justify-content:center;}
.statpanel{border:1.5px solid var(--red); border-radius:12px; padding:10px 14px; background:rgba(10,16,30,.92); min-width:150px; text-align:left;}
.statpanel.win{border-color:var(--gold);}
.statpanel .st{font-weight:900; font-size:13px; color:var(--red); margin-bottom:4px;}
.statpanel.win .st{color:var(--gold);}
.statpanel .sk{color:var(--dim); font-weight:700; font-size:10px; margin-top:6px;}
.statpanel .sv{font-weight:900; font-size:13px;}
.statsrow .btl{width:118px; flex-shrink:0;}
#bstats .dismiss{font-size:12px; font-weight:800; color:var(--ink); text-shadow:0 1px 3px #000;}

/* ---------- One Piece scenery ---------- */
:root{
  --bg-deck:url(../assets/bg/deck.jpg);
  --bg-map:url(../assets/bg/map.jpg);
  --bg-store:url(../assets/bg/store.jpg);
}
.screen{background-size:cover; background-position:center 30%;}
#scr-roll, #scr-deck{ background-image:linear-gradient(rgba(4,9,18,.42), rgba(4,9,18,.82)), var(--bg-deck); }
#scr-index, #scr-battle{ background-image:linear-gradient(rgba(12,7,3,.5), rgba(9,5,2,.85)), var(--bg-map); }
#scr-shop{ background-image:linear-gradient(rgba(14,6,2,.45), rgba(10,4,2,.84)), var(--bg-store); }
#scr-index .sub, #scr-battle .sub, #scr-shop .sub{ color:#C9B188; }
#scr-index, #scr-battle, #scr-shop{ --panel:rgba(26,16,8,.78); --panel2:rgba(34,21,10,.8); --line:#5b4226; --dim:#B79B72; }
#scr-index .gcard.unknown{ background:rgba(26,16,8,.85); }
#modal{ background:#0E1B33; }
#topbar{ background:linear-gradient(180deg, rgba(4,9,18,.55), transparent); }


#rc-art{position:absolute; inset:0;}
#rc-art img,#rc-art video{width:100%; height:100%; object-fit:cover; display:block;}
.r-Divine{background:linear-gradient(90deg,#7DF2FF,#fff,#9ef7ff,#7DF2FF); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 6px rgba(125,242,255,.6));}

/* ---------- full-page desktop layout ---------- */
@media (min-width:880px){
  body{background:linear-gradient(rgba(4,9,18,.82), rgba(4,9,18,.94)), var(--bg-deck) center/cover fixed;}
  #app{max-width:1100px; border-left:1px solid var(--line); border-right:1px solid var(--line); box-shadow:0 0 60px rgba(0,0,0,.6);}
  #logo{font-size:30px;}
  .stat{font-size:14px; padding:6px 14px;}
  #scr-roll.active{display:grid; grid-template-columns:minmax(0,1fr) 420px; column-gap:26px; align-content:start; padding:18px 26px;}
  #scr-roll>*{grid-column:2;}
  #scr-roll #stage{grid-column:1; grid-row:1/9; height:min(76vh,640px);}
  #scr-roll .card{width:320px;}
  #burst{width:480px; height:480px;}
  #charge{width:400px; height:400px;}
  #multigrid{inset:6%;}
  #grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px;}
  #stages{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .stage-card{margin-bottom:0;}
  #deckslots{grid-template-columns:repeat(4,minmax(0,170px)); justify-content:center; gap:14px;}
  #picker{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
  .screen{padding:14px 26px 24px;}
  #overlay{align-items:center;}
  #modal{border-radius:18px; border-bottom:1px solid var(--line); max-width:680px;}
  #dock{max-width:620px; margin:0 auto; width:100%;}
  .duelside{max-width:260px;}
}


#cutscene{position:fixed; inset:0; background:#000; z-index:80; display:flex; align-items:center; justify-content:center; cursor:pointer; animation:fadein .25s;}
#cutscene video{width:100%; height:100%; object-fit:contain;}
#cutscene .skip{position:absolute; bottom:max(18px, env(safe-area-inset-bottom)); right:18px; font-size:12px; font-weight:900; letter-spacing:2px; color:#fff; opacity:.85; background:rgba(0,0,0,.5); padding:8px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.25);}

@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }