*{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}}