*{box-sizing:border-box}body{margin:0;background:#0a0b14;color:#e8e8f0;font-family:system-ui,-apple-system,"Segoe UI","Microsoft JhengHei",sans-serif}
.w{max-width:1100px;margin:0 auto;padding:0 16px}a{color:#4fd1ff}code{word-break:break-all;font-size:12px}
nav{background:#000a;border-bottom:1px solid #223;position:sticky;top:0;z-index:5}nav .w{display:flex;align-items:center;gap:12px;height:56px}
.logo{font-weight:800;color:#ffcc33;text-decoration:none;letter-spacing:2px}.tag{background:#f53;color:#fff;font-size:11px;padding:2px 6px;border-radius:4px}#connect{margin-left:auto}
.btn{background:#ffcc33;color:#111;border:0;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer;margin:4px 0}.btn.o{background:transparent;color:#ffcc33;border:1px solid #ffcc33}.btn:disabled{opacity:.4;cursor:default}
.btn small{font-weight:400;opacity:.75}.zh{color:#99a;font-size:.85em;font-weight:400}.small{font-size:13px;color:#aab}
.warn,.demo{background:#3a1d00;border:1px solid #a60;padding:10px;border-radius:8px;margin:14px 0;font-size:13px}.demo{background:#1d0033;border-color:#93f}
.status{padding:8px 0;color:#9f9}.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.box{background:#141628;border:1px solid #2a2d4a;border-radius:12px;padding:14px;margin:10px 0}h3,h4{margin:4px 0 8px}
input,textarea,select{background:#0a0b14;color:#eee;border:1px solid #334;border-radius:6px;padding:6px;margin:3px 0;max-width:100%}input,textarea{width:100%}
.heroes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.hero{background:#141628;border:2px solid #445;border-radius:12px;padding:10px}.hero img{width:100%;border-radius:8px;aspect-ratio:1;object-fit:cover}
.r0{border-color:#889}.r1{border-color:#39f}.r2{border-color:#a4f}.r3{border-color:#fa0}.r4{border-color:#f33;box-shadow:0 0 12px #f33}
.bar{height:6px;background:#223;border-radius:3px;margin:2px 0 6px}.bar i{display:block;height:100%;background:#4fd1ff;border-radius:3px}
.hero .acts{display:flex;flex-wrap:wrap;gap:4px}.hero .acts .btn{padding:5px 8px;font-size:12px}
.arena{position:relative;height:340px;background:radial-gradient(circle at 50% 70%,#2a0d4a,#05060c);border:1px solid #93f;border-radius:14px;display:flex;align-items:center;justify-content:space-around;overflow:hidden;margin:10px 0}
.card{width:170px;height:250px;border-radius:12px;background:#1a1c33;border:3px solid #ffcc33;padding:8px;text-align:center;transition:transform .25s}
.card img{width:100%;height:150px;object-fit:cover;border-radius:8px}.acard{border-color:#3f6}.acard .art{font-size:90px;line-height:150px}
.card .nm{font-weight:700;font-size:13px}.hp{height:10px;background:#300;border-radius:5px;margin-top:6px}.hp i{display:block;height:100%;background:#3f6;border-radius:5px;transition:width .3s}
.vs{font-size:36px;font-weight:900;color:#f53}.hitL{animation:hitL .35s}.hitR{animation:hitR .35s}.shake{animation:shake .3s}
@keyframes hitL{50%{transform:translateX(120px) rotate(8deg)}}@keyframes hitR{50%{transform:translateX(-120px) rotate(-8deg)}}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.dmg{position:absolute;font-weight:900;font-size:30px;color:#ff4;text-shadow:0 0 6px #f00;animation:up 1s forwards;pointer-events:none}.dmg.crit{font-size:42px;color:#f53}
@keyframes up{to{transform:translateY(-70px);opacity:0}}
#result{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:48px;font-weight:900;background:#000a;text-align:center}
.log{font-family:monospace;font-size:12px;white-space:pre-wrap;background:#05060c;border:1px solid #223;border-radius:8px;padding:8px;max-height:200px;overflow:auto;margin:16px 0}
footer{border-top:1px solid #223;padding:20px 0;color:#889;font-size:13px;margin-top:30px}

body.noscroll{overflow:hidden}
#bf{display:none;position:fixed;inset:0;z-index:50;background:#000}#bf.on{display:block}
#bfStage{position:absolute;inset:0;background:url(/img/arena_bg.jpg) center/cover no-repeat;overflow:hidden;image-rendering:pixelated}
.bars{position:absolute;top:2%;left:2%;right:2%;display:flex;align-items:flex-start;gap:3%;z-index:3}
.pb{flex:1;color:#fff;font-weight:800;text-shadow:0 2px 4px #000}.pb.r{text-align:right}.pb .nm{font-size:clamp(14px,2vw,24px)}
.hpb{height:clamp(14px,2.2vh,24px);background:#400;border:3px solid #fff;border-radius:6px;overflow:hidden}.pb.r .hpb{transform:scaleX(-1)}
.hpb i{display:block;height:100%;width:100%;background:linear-gradient(#7f7,#2b2);transition:width .35s}
#bfRound{color:#ffcc33;font-size:clamp(16px,2.6vw,32px);font-weight:900;text-shadow:0 0 8px #000;white-space:nowrap;padding-top:6px}

.hit{filter:brightness(3) saturate(0) drop-shadow(0 0 12px #f00)!important}.dodge{transform:translateY(-12%) translateX(4%) skewX(-8deg);opacity:.6}
.ko{opacity:.4;filter:grayscale(1) drop-shadow(0 10px 8px #000c)!important}
@keyframes kb{40%{margin-left:-14px}80%{margin-left:10px}}
.shake{animation:sh .3s}.shakeBig{animation:sh .2s 2}@keyframes sh{25%{transform:translate(-8px,4px)}75%{transform:translate(8px,-4px)}}
#bfFx{position:absolute;inset:0;pointer-events:none;z-index:4}
.pop{position:absolute;font-weight:900;font-size:clamp(40px,7vw,90px);transform:translateX(-50%);animation:pop 1.1s forwards;text-shadow:0 0 4px #000,3px 3px 0 #000;-webkit-text-stroke:2px #000}
.pop.dmg{color:#ffec3d}.pop.crit{color:#ff3d3d;font-size:clamp(50px,9vw,120px)}.pop.miss{color:#9ad7ff;font-style:italic}
@keyframes pop{0%{transform:translate(-50%,20px) scale(.5);opacity:0}20%{transform:translate(-50%,0) scale(1.2);opacity:1}100%{transform:translate(-50%,-90px) scale(1);opacity:0}}
#bfRes{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;z-index:5;background:#000a;font-size:clamp(60px,12vw,160px);font-weight:900;letter-spacing:6px}
#bfRes.show{display:flex}#bfRes.win{color:#5f5;text-shadow:0 0 30px #0f0}#bfRes.lose{color:#f44;text-shadow:0 0 30px #f00}
#bfRes small{font-size:clamp(18px,2.4vw,32px);color:#fff;letter-spacing:1px}#bfRes b{font-size:clamp(28px,4vw,56px);color:#ffcc33;margin:10px}#bfRes a{font-size:16px;letter-spacing:0}
#bfClose{position:absolute;right:2%;bottom:2%;z-index:6;background:#000a}
/* ---- responsive fullscreen battle ---- */
#bf{height:100vh;height:100dvh;width:100vw;overscroll-behavior:none;touch-action:manipulation}
#bfStage{--lx:28vw;--ly:0px;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.bars{top:calc(env(safe-area-inset-top) + 1.5vh);left:calc(env(safe-area-inset-left) + 2vw);right:calc(env(safe-area-inset-right) + 2vw)}

#bfStage .btns{position:absolute;right:calc(env(safe-area-inset-right) + 2vw);bottom:calc(env(safe-area-inset-bottom) + 2vh);z-index:6;display:flex;gap:10px}
#bfStage .btns .btn{min-height:44px;min-width:44px;padding:10px 16px;font-size:16px;margin:0;background:#000b}
#bfClose{position:static}
.pop{font-size:clamp(34px,min(9vw,11vh),110px)}.pop.crit{font-size:clamp(42px,min(12vw,14vh),140px)}
#bfRes{font-size:clamp(48px,min(14vw,18vh),160px);padding:0 4vw;text-align:center}
#bfRes a{display:inline-block;min-height:44px;line-height:44px;font-size:16px}
/* phone portrait: alien top-right, hero bottom-left */
@media (orientation:portrait){
  #bfStage{background-position:center 30%;--lx:22vw;--ly:-22vh}
  .bars{flex-direction:column;gap:6px;align-items:stretch}.pb{width:100%}.pb.r{text-align:left}.pb.r .hpb{transform:none}
  #bfRound{order:-1;align-self:center;font-size:clamp(16px,5vw,28px)}
  .pb .nm{font-size:clamp(14px,4vw,22px)}
}
/* phone landscape (short screens) */
@media (orientation:landscape) and (max-height:500px){
  .bars{top:calc(env(safe-area-inset-top) + 1vh)}.pb .nm{font-size:14px}.hpb{height:12px;border-width:2px}#bfRound{font-size:16px;padding-top:0}
  #bfRes small{font-size:16px}#bfRes b{font-size:26px;margin:4px}
}
/* rest of /play on mobile */
@media (max-width:600px){
  nav .w{height:auto;min-height:56px;flex-wrap:wrap;padding:6px 12px}.logo{font-size:14px}
  .btn{min-height:44px}select,input{min-height:40px;font-size:16px}
  .grid3{grid-template-columns:1fr}.heroes{grid-template-columns:1fr}
  #bSel,#bTier{width:100%}.log{max-height:160px}
}

/* attack choreography */
.dodging{opacity:.55;filter:blur(1px) drop-shadow(0 10px 8px #000c)!important}
.vfx{position:absolute;pointer-events:none;transform:translate(-50%,-50%)}
.slash{width:var(--s);height:var(--s);border-radius:50%;border:calc(var(--s)*.07) solid transparent;border-top-color:var(--c);border-right-color:var(--c);filter:drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 3px #fff);animation:slash .42s ease-out forwards}
.slash.thin{border-width:calc(var(--s)*.04)}
@keyframes slash{0%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(.6);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-50%) rotate(calc(var(--rot) + 140deg)) scale(1.08);opacity:0}}
.whiff{opacity:.45!important;filter:grayscale(1)!important}
.ring{width:var(--s);height:var(--s);border-radius:50%;border:4px solid var(--c);box-shadow:0 0 18px var(--c);animation:ring .45s ease-out forwards}
@keyframes ring{from{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
.claw{width:var(--s);height:var(--s);background:repeating-linear-gradient(115deg,transparent 0 18%,var(--c) 19% 24%,transparent 25% 33%);-webkit-mask:linear-gradient(#000,#000);filter:drop-shadow(0 0 8px var(--c));animation:claw .42s ease-out forwards}
@keyframes claw{0%{transform:translate(-50%,-50%) scale(1,0) ;opacity:1}40%{transform:translate(-50%,-50%) scale(1,1)}100%{transform:translate(-50%,-50%) scale(1,1);opacity:0}}
.muzzle{width:var(--s);height:var(--s);background:radial-gradient(circle,#fff 0 18%,#ffe14d 30%,#ff7b00 48%,transparent 66%);clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%);animation:fade .18s forwards}
.muzzle.green{background:radial-gradient(circle,#fff 0 18%,#7f7 35%,#0a0 50%,transparent 66%)}
@keyframes fade{to{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
.bolt{width:max(44px,9vmin);height:max(9px,2vmin);border-radius:9px;background:linear-gradient(90deg,transparent,#4fd1ff,#fff);box-shadow:0 0 14px #4fd1ff}
.orb{width:max(30px,7vmin);height:max(30px,7vmin);border-radius:50%;background:radial-gradient(circle,#fff 0 15%,#c6f 40%,#70f 65%,transparent 72%);box-shadow:0 0 24px #a4f}
.orb.star{background:radial-gradient(circle,#fff 0 15%,#ffe14d 40%,#39f 65%,transparent 72%);box-shadow:0 0 24px #ffe14d}
.cast{width:var(--s);height:var(--s);border-radius:50%;border:3px dashed #c6f;box-shadow:0 0 20px #a4f inset;animation:cast .38s linear forwards}.cast.star{border-color:#ffe14d}
@keyframes cast{from{transform:translate(-50%,-50%) rotate(0) scale(.4)}to{transform:translate(-50%,-50%) rotate(270deg) scale(1.1);opacity:0}}
.beam{width:var(--L);height:var(--t);transform-origin:0 50%;transform:translateY(-50%) rotate(var(--ang));background:linear-gradient(#bfb,#3f3,#bfb);border-radius:9px;box-shadow:0 0 18px #3f3,0 0 4px #fff;animation:beam .38s ease-out forwards}
@keyframes beam{0%{clip-path:inset(0 100% 0 0)}40%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
.spark{width:min(1.4vw,1.4vh);height:min(1.4vw,1.4vh);min-width:5px;min-height:5px;background:var(--c);box-shadow:0 0 8px var(--c);animation:spark .5s ease-out forwards}
@keyframes spark{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2);opacity:0}}
/* header: never cover content */
nav{padding-top:env(safe-area-inset-top)}
@media (max-width:600px){nav{position:relative}nav .w{gap:6px}#connect{padding:8px 10px;font-size:13px}#connect small{display:none}.tag{font-size:10px}}

/* ---- grounded fighters ---- */
#bfStage{--ground:11%;--fh:54vh}
.ground{position:absolute;left:0;right:0;bottom:0;height:var(--ground);background:linear-gradient(#0000,#0006);pointer-events:none}
.fwrap{position:absolute;bottom:var(--ground);height:var(--fh);width:min(42vw,calc(var(--fh)*.8));will-change:transform}
.fwrap.h{left:12%}.fwrap.a{right:10%}
.fighter{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;image-rendering:pixelated;transform-origin:50% 100%;will-change:transform;filter:drop-shadow(0 4px 3px #0008)}
.fwrap .fighter{animation:breathe 2.4s ease-in-out infinite}.fwrap.a .fighter{animation-duration:2.9s}
@keyframes breathe{50%{scale:1.012 .985}}
.shadow{position:absolute;left:50%;bottom:0;width:62%;height:calc(var(--fh)*.07);transform:translate(-50%,45%);border-radius:50%;background:radial-gradient(#000c,#0000 70%);will-change:transform,opacity}
.fighter.ko{animation:none;filter:grayscale(1) brightness(.7)}
.fighter.hit{filter:brightness(3.2) saturate(0)!important}
.fighter.dodging{opacity:.6}
@media (orientation:portrait){
  #bfStage{--ground:14%;--fh:min(36vh,52vw)}
  .fwrap{width:46vw}.fwrap.h{left:2vw}.fwrap.a{right:2vw;left:auto}
}
@media (orientation:landscape) and (max-height:500px){#bfStage{--ground:8%;--fh:62vh}}
@media (prefers-reduced-motion:reduce){.fwrap .fighter{animation:none}}

/* OFFICIAL skills */
.skillban{position:absolute;left:50%;top:18%;transform:translateX(-50%);white-space:nowrap;font-weight:900;font-size:clamp(20px,min(6vw,7vh),56px);letter-spacing:.08em;color:#fff;
 background:linear-gradient(90deg,#ff4fd8,#4fd1ff,#ffe14d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px #fff8) drop-shadow(0 3px 0 #000);animation:ban 1.1s ease-out forwards}
@keyframes ban{0%{opacity:0;transform:translateX(-50%) scale(.6)}15%{opacity:1;transform:translateX(-50%) scale(1.08)}25%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}
.beam.nova{background:linear-gradient(#fff,#4fd1ff 30%,#a4f 70%,#fff);box-shadow:0 0 30px #4fd1ff,0 0 60px #a4f}
.pillar{width:var(--w);height:var(--h);transform:translate(-50%,-100%);background:linear-gradient(0deg,#fff0,#ff4fd8aa,#4fd1ffaa,#ffe14d88,#fff0);filter:blur(2px);mix-blend-mode:screen;animation:pil .7s ease-out forwards}
@keyframes pil{0%{opacity:0;transform:translate(-50%,-100%) scaleX(.2)}30%{opacity:1;transform:translate(-50%,-100%) scaleX(1)}100%{opacity:0}}
.meteor{width:max(16px,4vmin);height:max(46px,12vmin);border-radius:50%;background:linear-gradient(#fff0,#4fd1ff,#fff);box-shadow:0 0 18px #4fd1ff}
.ultflash{position:fixed;inset:0;transform:none;background:radial-gradient(#fff,#ffe14d88 40%,#0000 75%);mix-blend-mode:screen;animation:fade .3s forwards}
@media (orientation:portrait){.skillban{top:30%}}
/* rarity badges */
.rbadge{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.3px;line-height:1.5;vertical-align:middle;border:1px solid transparent}
.rb0{background:#2a2d3c;color:#b4b8c6;border-color:#4a4e60;font-weight:500}
.rb1{background:#123a6b;color:#8cc4ff;border-color:#3b9cff}
.rb2{background:#3a1766;color:#e0c2ff;border-color:#b05cff;box-shadow:0 0 8px rgba(176,92,255,.6)}
.rb3{background:linear-gradient(90deg,#ffb300,#ffe680,#ff8a00,#ffb300);background-size:250% 100%;color:#2a1600;border-color:#ffd54a;font-weight:800;box-shadow:0 0 10px rgba(255,190,0,.75),0 0 18px rgba(255,140,0,.4);animation:rbShine 3s linear infinite}
.rb4{background:linear-gradient(90deg,#ff3b3b,#ffb36b,#ff3b3b);background-size:250% 100%;color:#fff;border-color:#ff8a8a;font-weight:800;text-shadow:0 1px 2px #600;box-shadow:0 0 12px rgba(255,59,59,.8),0 0 22px rgba(255,120,60,.45);animation:rbShine 3s linear infinite}
@keyframes rbShine{0%{background-position:0% 50%}100%{background-position:250% 50%}}
@media (prefers-reduced-motion:reduce){.rb3,.rb4{animation:none}}
/* hero status chips / lists */
.stc{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;margin:0 4px 4px 0;line-height:1.5}
.stc.ok{background:#14532d;color:#86efac;border:1px solid #22c55e}.stc.work{background:#1e3a8a;color:#bfdbfe;border:1px solid #3b82f6}
.stc.cd{background:#7c2d12;color:#fed7aa;border:1px solid #f97316}.stc.lim{background:#2a2d3a;color:#cbd5e1;border:1px solid #64748b}
.stc.noen{background:#3f2a0a;color:#fcd34d;border:1px solid #b45309}.stc.claim{background:#134e4a;color:#99f6e4;border:1px solid #14b8a6}.stc.mg{background:#3b0764;color:#e9d5ff;border:1px solid #a855f7}
.hero .chips{min-height:22px;margin-bottom:4px}
.stbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;grid-column:1/-1}.stf{background:#141628;color:#cdd;border:1px solid #3a3f80;border-radius:999px;padding:5px 11px;font:600 12px system-ui,sans-serif;cursor:pointer}
.stf b{margin-left:3px;color:#fff}.stf.on{background:#3a3f80;color:#fff}.stf.ok b{color:#86efac}.stf.work b{color:#93c5fd}.stf.cd b{color:#fdba74}.stf.lim b{color:#cbd5e1}
.heroes:has(.hgrid){display:block}.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.blwrap{margin:8px 0}.blwrap h3{margin:4px 0}.blist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin:6px 0}
.bl{display:flex;align-items:center;gap:10px;background:#141628;border:2px solid #445;border-radius:12px;padding:8px;cursor:pointer}
.bl img{width:56px;height:56px;border-radius:8px;object-fit:cover}.bl .bli{flex:1;min-width:0}.bl .btn{white-space:nowrap;padding:6px 10px;font-size:12px}
.bl.on{border-color:#22c55e;box-shadow:0 0 0 2px #22c55e55}.bl.r1{border-color:#3b82f6}.bl.r2{border-color:#a855f7}.bl.r3{border-color:#f59e0b}.bl.r4{border-color:#ef4444}.bl.on{border-color:#22c55e}
.mg{border:1px dashed #3a3f80;border-radius:12px;padding:8px;margin:8px 0}.empty{color:#aab;padding:10px;border:1px dashed #3a3f80;border-radius:10px}
a.btn.dis{opacity:.45;pointer-events:none;cursor:not-allowed}
#tab-wallet .box{margin-bottom:12px}

.salecd{margin:8px 0;padding:10px 12px;border:1px solid #ffcc33;border-radius:10px;background:rgba(255,204,51,.08);color:#ffcc33;font-size:15px;text-align:center}.salecd b{font-size:20px;letter-spacing:1px;color:#fff}.salecd small{color:#aaa}
/* batch1027: sharper hit flash */
.fighter.hit{filter:brightness(2.4) saturate(.3) drop-shadow(0 0 6px #fff)!important}
.fighter.hitcrit{filter:brightness(2.2) sepia(1) hue-rotate(-30deg) saturate(4) drop-shadow(0 0 10px #ff5a3d)!important}