/* ============ BLOOD ARENA — premium fight UI ============ */
:root{
  --bg:#07080d; --bg2:#0d0f17;
  --panel:rgba(22,25,36,.72);
  --panel-solid:#161924;
  --line:rgba(255,255,255,.08);
  --text:#f3f4f8; --muted:#8b90a3;
  --red:#ff2d55; --red2:#c81e3a;
  --blue:#3d9eff; --green:#2fe07a;
  --gold:#ffcf3a; --gold2:#ff9d2f;
  --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
body{min-height:100vh}
.hidden{display:none!important}
b{font-weight:800}

/* animated ambience */
.bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(120% 80% at 50% -10%,#19112099 0,transparent 60%),
  radial-gradient(120% 80% at 50% 110%,#0a1a2a99 0,transparent 60%),var(--bg)}
.bg-fx span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;animation:drift 14s ease-in-out infinite}
.bg-fx span:nth-child(1){width:260px;height:260px;background:#ff2d5533;top:-60px;left:-40px}
.bg-fx span:nth-child(2){width:300px;height:300px;background:#1f6fd633;bottom:-80px;right:-60px;animation-delay:-5s}
.bg-fx span:nth-child(3){width:200px;height:200px;background:#ffcf3a22;top:40%;left:55%;animation-delay:-9s}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}

#app{max-width:560px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 10px) 16px 30px}
.screen{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- HUD ---------- */
#hud{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hud-user{display:flex;align-items:center;gap:10px}
.ava{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(135deg,#2a2f40,#171a25);border:1px solid var(--line)}
.hud-name{font-weight:800;font-size:15px;line-height:1.1}
.hud-rank{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.wallet{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:linear-gradient(135deg,#3a2c08,#241a05);border:1px solid #ffcf3a44;
  box-shadow:0 0 18px #ffcf3a22}
.wallet b{color:var(--gold);font-size:15px}
.wallet .coin{font-size:14px}

/* ---------- LOBBY ---------- */
.logo{text-align:center;margin:18px 0 22px}
.logo-sub{color:var(--gold);font-size:11px;letter-spacing:3px;font-weight:700;opacity:.85}
.logo-title{font-family:"Russo One",sans-serif;font-size:46px;line-height:.9;margin:6px 0 8px;
  letter-spacing:1px;background:linear-gradient(180deg,#fff,#b9bed0);-webkit-background-clip:text;
  background-clip:text;color:transparent;text-shadow:0 6px 30px #0008}
.logo-title span{display:block;background:linear-gradient(180deg,var(--red),var(--red2));
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px #ff2d5566)}
.logo-tag{color:var(--muted);font-size:13px;margin:0}

.bet-card{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:var(--r);padding:18px;box-shadow:0 20px 50px #0006}
.bet-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;
  letter-spacing:1.5px;color:var(--muted);font-weight:700;margin-bottom:14px}
.mult{color:var(--gold);background:#ffcf3a14;padding:3px 9px;border-radius:999px}
.bet-display{display:flex;align-items:center;gap:12px}
.rnd-btn{width:48px;height:48px;border:none;border-radius:14px;font-size:26px;font-weight:800;
  color:#fff;background:#222634;display:grid;place-items:center;cursor:pointer;transition:.1s}
.rnd-btn:active{transform:scale(.9)}
.bet-amount{flex:1;display:flex;align-items:baseline;justify-content:center;gap:6px;
  background:#0c0e16;border:1px solid var(--line);border-radius:14px;padding:10px 6px}
.bet-amount input{width:100%;border:none;background:none;color:#fff;text-align:center;
  font-family:"Russo One",sans-serif;font-size:34px;outline:none;-moz-appearance:textfield}
.bet-amount input::-webkit-inner-spin-button,.bet-amount input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.bet-amount .cur{color:var(--gold);font-weight:800;font-size:18px}
.bet-quick{display:flex;gap:8px;margin-top:12px}
.bet-quick button{flex:1;padding:10px 0;border:1px solid var(--line);border-radius:11px;
  background:#0c0e16;color:var(--text);font-weight:700;font-size:14px;cursor:pointer;transition:.12s}
.bet-quick button:active{transform:scale(.94);border-color:var(--gold)}
.payout-hint{text-align:center;color:var(--muted);font-size:12.5px;margin:14px 0 4px;min-height:16px}
.payout-hint b{color:var(--green)}

/* big CTA */
.cta{position:relative;width:100%;border:none;border-radius:16px;padding:18px;cursor:pointer;
  color:#fff;font-family:"Russo One",sans-serif;font-size:19px;letter-spacing:1px;overflow:hidden;
  background:linear-gradient(120deg,var(--red),var(--red2));margin-top:14px;
  box-shadow:0 12px 30px #ff2d5544,inset 0 1px 0 #ffffff33}
.cta:active{transform:scale(.98)}
.cta:disabled{opacity:.4;filter:grayscale(.4)}
.cta-label{position:relative;z-index:1}
.cta-win{display:block;font-family:Inter;font-size:12px;font-weight:700;opacity:.9;letter-spacing:0;margin-top:2px}
.cta-glow{position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,#ffffff66,transparent);transform:skewX(-20deg);
  animation:shimmer 2.6s infinite}
@keyframes shimmer{0%{left:-60%}55%,100%{left:130%}}
.cta.confirm{background:linear-gradient(120deg,#ff3a51,#a3142d)}

.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  text-align:left;cursor:pointer;transition:.12s}
.tile:active{transform:scale(.97)}
.tile-ico{font-size:26px}
.tile-t{font-weight:800;margin-top:6px}
.tile-s{font-size:11.5px;color:var(--muted)}

/* ---------- COMBATANT CARDS ---------- */
.combatant{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;transition:box-shadow .2s}
.combatant.hit{animation:cardHit .4s}
@keyframes cardHit{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.combatant.dead{opacity:.55;filter:grayscale(.6)}
.c-top{display:flex;align-items:center;gap:12px}
.c-ava{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(135deg,#2a2f40,#14171f);border:1px solid var(--line);flex:none}
.enemy .c-ava{box-shadow:0 0 16px #ff2d5533}
.self .c-ava{box-shadow:0 0 16px #2fe07a33}
.c-info{flex:1;min-width:0}
.c-name{font-weight:800;font-size:15px;margin-bottom:6px}
.hp{position:relative;height:16px;border-radius:8px;background:#0a0c13;overflow:hidden;border:1px solid var(--line)}
.hp-fill{position:absolute;inset:0;width:100%;border-radius:8px;transition:width .55s cubic-bezier(.2,.8,.2,1)}
.hp-fill.enemy{background:linear-gradient(90deg,#ff4d63,#c81e3a)}
.hp-fill:not(.enemy){background:linear-gradient(90deg,#2fe07a,#16a85a)}
.hp-txt{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:800;
  text-shadow:0 1px 2px #000;z-index:1}
.dots{display:flex;gap:6px;margin-top:10px}
.dot{flex:1;text-align:center;font-size:10px;color:var(--muted);background:#0a0c13;border-radius:8px;
  padding:4px 2px;border:1px solid var(--line)}
.dot .pip{display:block;font-size:13px;line-height:1.1}
.self .dots{margin:0 0 10px}

.round-pill{text-align:center;margin:12px 0}
.round-pill span{font-family:"Russo One",sans-serif;font-size:13px;letter-spacing:3px;color:var(--muted);
  background:#0c0e16;border:1px solid var(--line);padding:5px 16px;border-radius:999px}

/* ---------- RING / interactive body ---------- */
.ring{position:relative;display:flex;flex-direction:column;align-items:center;margin:4px 0 6px}
.mode-switch{display:flex;gap:10px;width:100%;margin-bottom:6px}
.mode{flex:1;border:1.5px solid var(--line);border-radius:14px;background:#0c0e16;color:var(--muted);
  padding:9px;font-size:11px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:.15s;line-height:1.4}
.mode span{font-size:15px}
.mode b{display:block;font-size:13px;color:var(--text);font-family:Inter}
.mode.atk.active{border-color:var(--red);background:#ff2d5514;color:#ff8a99;box-shadow:0 0 16px #ff2d5522}
.mode.blk.active{border-color:var(--blue);background:#3d9eff14;color:#9fc8ff;box-shadow:0 0 16px #3d9eff22}

#bodySvg{width:170px;height:auto;display:block;filter:drop-shadow(0 12px 24px #0008)}
.plate{fill:url(#plate);stroke:#0a0c13;stroke-width:2.5;cursor:pointer;transition:fill .15s,filter .15s}
.plate:active{transform:scale(.99)}
.plate.atk{fill:url(#atkGrad);filter:url(#glowR)}
.plate.blk{fill:url(#blkGrad);filter:url(#glowB)}
.plate.both{fill:url(#atkGrad);filter:url(#glowR);stroke:var(--blue);stroke-width:4}

.hint{text-align:center;color:var(--muted);font-size:13px;margin:6px 0 10px;min-height:18px;font-weight:600}

.battle-actions{display:flex;gap:10px;align-items:stretch;margin-top:6px}
.surrender{width:56px;border:1px solid var(--line);border-radius:16px;background:#15101400;font-size:20px;
  color:var(--muted);cursor:pointer;background:#120c0f}
.surrender:active{transform:scale(.95)}
.battle-actions .cta{margin-top:0;flex:1}

/* floating damage */
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:40}
.dmg{position:absolute;left:50%;transform:translateX(-50%);font-family:"Russo One",sans-serif;
  font-size:30px;font-weight:800;text-shadow:0 3px 10px #000;animation:floatUp 1s ease-out forwards}
.dmg.crit{font-size:42px;color:var(--gold)}
.dmg.norm{color:#ff5b6e}
.dmg.heal,.dmg.block{color:var(--blue);font-size:22px}
.dmg.frac{color:#ff2d55}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  20%{opacity:1;transform:translate(-50%,-6px) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-2px)}
  60%{transform:translate(-4px,-3px)}80%{transform:translate(4px,2px)}}

/* ---------- RESULT ---------- */
#result{display:flex;align-items:center;justify-content:center;min-height:78vh;text-align:center;position:relative}
.result-inner{position:relative;z-index:2;width:100%}
.result-badge{font-size:80px;animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.result-title{font-family:"Russo One",sans-serif;font-size:38px;letter-spacing:2px;margin:4px 0}
.result-title.win{background:linear-gradient(180deg,#ffe07a,#ff9d2f);-webkit-background-clip:text;background-clip:text;color:transparent}
.result-title.loss{color:#ff5b6e}
.result-amount{font-family:"Russo One",sans-serif;font-size:30px;margin:8px 0 2px}
.result-amount.win{color:var(--gold)}.result-amount.loss{color:var(--muted)}
.result-sub{color:var(--muted);font-size:13px;margin-bottom:22px}
#result .cta{max-width:320px;margin:0 auto}
.link{display:block;margin:14px auto 0;background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer}

.confetti{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.9}}

/* ---------- UPGRADE / HISTORY ---------- */
.page-head{display:flex;align-items:center;gap:8px;margin:6px 0 16px}
.page-head h2{font-size:20px;margin:0}
.back{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  color:#fff;font-size:24px;line-height:1;cursor:pointer}
.sp-banner{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;
  font-size:14px;color:var(--muted);margin-bottom:12px}
.sp-banner b{color:var(--gold);font-size:18px}
.stat-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:14px;margin-bottom:10px}
.stat-row .si{font-size:22px}
.stat-row .sn{flex:1}
.stat-row .sn small{display:block;color:var(--muted);font-size:11px}
.stat-row .sv{font-family:"Russo One",sans-serif;font-size:20px}
.stat-row button{border:none;border-radius:11px;background:linear-gradient(120deg,var(--green),#16a85a);
  color:#04210f;font-weight:800;font-size:16px;width:46px;height:42px;cursor:pointer}
.stat-row button:disabled{background:#222634;color:#555;cursor:default}
.buy-point{width:100%;margin-top:6px;border:1px dashed #ffcf3a55;border-radius:14px;background:#ffcf3a0d;
  color:var(--gold);font-weight:700;padding:14px;cursor:pointer}

.hist-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px}
.hist-top{display:flex;justify-content:space-between;align-items:center}
.hist-top .vs{font-weight:700;font-size:14px}
.hist-amt{font-family:"Russo One",sans-serif;font-size:16px}
.hist-amt.win{color:var(--green)}.hist-amt.loss{color:#ff5b6e}
.hist-meta{color:var(--muted);font-size:12px;margin-top:4px}
.hist-item details{margin-top:8px}
.hist-item summary{color:var(--blue);font-size:12px;cursor:pointer}
.hist-item pre{white-space:pre-wrap;font-size:11.5px;color:var(--muted);font-family:Inter;margin:8px 0 0}
.empty{text-align:center;color:var(--muted);padding:40px 0}

/* ---------- VS overlay ---------- */
.vs-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(circle at center,#1a0a12ee,#05060aee)}
.vs-side{display:flex;flex-direction:column;align-items:center;gap:10px}
.vs-side.left{animation:inL .5s ease both}
.vs-side.right{animation:inR .5s ease both}
@keyframes inL{from{transform:translateX(-120px);opacity:0}to{transform:none;opacity:1}}
@keyframes inR{from{transform:translateX(120px);opacity:0}to{transform:none;opacity:1}}
.vs-ava{width:88px;height:88px;border-radius:22px;display:grid;place-items:center;font-size:48px;
  background:linear-gradient(135deg,#2a2f40,#14171f);border:1px solid var(--line)}
.vs-side.left .vs-ava{box-shadow:0 0 30px #2fe07a55}
.vs-side.right .vs-ava{box-shadow:0 0 30px #ff2d5555}
.vs-nm{font-weight:800;font-size:14px}
.vs-word{font-family:"Russo One",sans-serif;font-size:46px;color:var(--red);
  filter:drop-shadow(0 0 16px #ff2d5588);animation:vsPulse .6s ease both .15s}
@keyframes vsPulse{from{transform:scale(2);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  background:#000d;border:1px solid var(--line);color:#fff;padding:11px 20px;border-radius:999px;
  font-size:14px;font-weight:600;box-shadow:0 10px 30px #0008;animation:fade .25s}