/* Fight stage: arena backdrop + animated rig canvas + broadcast HUD. */
.fightarena{height:auto;min-height:0;height:560px;border:1px solid #38393a;border-radius:9px;overflow:hidden;position:relative;background:#090a0b;isolation:isolate}
.fightbg{position:absolute;inset:0;background-repeat:no-repeat;filter:brightness(.62) saturate(.95);transform:scale(1.04)}
.fightbg:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#090a0bcc,transparent 22%,transparent 78%,#090a0bcc),linear-gradient(0deg,#090a0b 6%,transparent 46%,#090a0b88)}
.fighter-stage{position:absolute;z-index:1;left:0;right:0;top:84px;bottom:128px;pointer-events:none}
.fighter-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;image-rendering:pixelated;image-rendering:crisp-edges}
.fighter-stage.shake .fighter-canvas{animation:stage-shake .22s ease-out}
.fighter-stage.shake-heavy .fighter-canvas{animation:stage-shake-heavy .3s ease-out}
@keyframes stage-shake{0%,100%{transform:translate(0)}30%{transform:translate(-2px,1px)}60%{transform:translate(2px,-1px)}}
@keyframes stage-shake-heavy{0%,100%{transform:translate(0)}15%{transform:translate(-5px,2px)}35%{transform:translate(5px,-3px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,0)}}

.fightoverlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding:16px 22px 14px;pointer-events:none;text-shadow:0 2px 8px #000}
.fightoverlay .roundpill,.fightoverlay .clock{box-shadow:0 5px 18px #0008;backdrop-filter:blur(8px)}
.fightoverlay .scoreline{margin-bottom:0}
.broadcast-hud{position:absolute;z-index:5;top:12px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;text-shadow:0 2px 8px #000}
.network-bug{display:flex;align-items:center;gap:6px;color:#fff;font:900 13px 'Barlow Condensed';letter-spacing:1px}.network-bug b{display:grid;place-items:center;width:25px;height:25px;background:var(--red);border-radius:4px;font-size:14px}.network-bug span{color:#d4d0c8;font-size:10px}
.live-bug{display:flex;align-items:center;gap:7px;padding:6px 9px;background:#111c;border:1px solid #ffffff30;border-radius:4px;color:#fff;font:800 10px 'Barlow Condensed';letter-spacing:.8px}.live-bug i{width:7px;height:7px;border-radius:50%;background:#f04436;box-shadow:0 0 10px #f04436;animation:on-air 1.15s ease-in-out infinite}.live-bug span{margin-left:4px;padding-left:9px;border-left:1px solid #ffffff44;color:#c5c0b6;font-size:9px}
@keyframes on-air{50%{opacity:.3}}

/* Move caption: a solid, legible bar anchored to the top of the stage (never over the fighters). */
.move-caption{position:absolute;z-index:6;left:50%;top:50px;transform:translateX(-50%);display:flex;align-items:baseline;gap:10px;padding:5px 16px 6px;background:#0b0c0de6;border:1px solid #ffffff2e;border-left:4px solid #8d8f93;border-radius:4px;box-shadow:0 6px 20px #000a;pointer-events:none;white-space:nowrap}
.move-caption[hidden]{display:none}
.move-caption[data-tone="hit"]{border-left-color:var(--red)}
.move-caption[data-tone="defended"]{border-left-color:var(--blue)}
.move-caption .cap-move{font:900 22px/1 'Barlow Condensed';letter-spacing:.8px;text-transform:uppercase;color:#fff}
.move-caption .cap-meta{font:700 11px 'DM Sans';letter-spacing:.6px;text-transform:uppercase;color:#d3cfc6}
.move-caption.pop{animation:cap-pop .28s ease-out}
@keyframes cap-pop{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}

.bars .bar{height:7px}.bars .bar.health i{background:#e8b64a}
.fightoverlay .bars{margin-top:8px}

@media(max-width:720px){
  .fightarena{aspect-ratio:auto;height:430px}
  .fighter-stage{top:60px;bottom:128px}
  .move-caption{top:46px;padding:4px 11px 5px;max-width:92%}.move-caption .cap-move{font-size:18px}.move-caption .cap-meta{display:none}
  .fightoverlay{padding:12px 12px 10px}.broadcast-hud{left:12px;right:12px;top:10px}.live-bug span{display:none}
  .scoreline{gap:8px}.corner strong{font-size:18px}.clock{font-size:23px;padding:5px 9px}.bars{gap:10px}
}
@media(prefers-reduced-motion:reduce){.fighter-stage.shake .fighter-canvas,.fighter-stage.shake-heavy .fighter-canvas,.move-caption.pop,.live-bug i{animation:none!important}}

/* Secondary pages (rankings, my fighter, history, wallet) */
.page{display:none}.page.active{display:block}
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:12px}
table.data th{font:700 10px 'DM Sans';letter-spacing:1px;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.data td{padding:10px 12px;border-bottom:1px solid #26272a;white-space:nowrap}
table.data tr:hover td{background:#1d1e20}
table.data .rank{font:900 17px 'Barlow Condensed';color:var(--gold);width:40px}
table.data .who{display:flex;align-items:center;gap:10px;font:800 15px 'Barlow Condensed';text-transform:uppercase;letter-spacing:.3px}
table.data .who i{width:34px;height:40px;background:#18191b center bottom/contain no-repeat;image-rendering:pixelated;border-radius:4px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.tabs button{border:1px solid #393a3c;background:#222325;color:#bbb;border-radius:5px;padding:7px 11px;font:700 11px 'DM Sans'}
.tabs button.sel{border-color:var(--red);background:#352321;color:#fff}
.profile-card{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px}
.profile-card .big{height:210px;background:#18191b center bottom/contain no-repeat;image-rendering:pixelated;border:1px solid #333;border-radius:8px}
.profile-card h3{font:900 30px 'Barlow Condensed';margin:0 0 4px;text-transform:uppercase}
.profile-card .meta{color:var(--muted);font-size:11px;margin-bottom:12px}
.record{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.record b{display:block;font:900 24px 'Barlow Condensed';color:#fff}.record span{display:block;background:#212224;border:1px solid #333;border-radius:6px;padding:8px 14px;color:var(--muted);font-size:9px;letter-spacing:1px}
.attr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 18px}
.attr{font-size:10px;color:#aaa}.attr b{float:right;color:#fff}.attr .meter{height:4px;background:#2c2d30;border-radius:3px;margin-top:4px;overflow:hidden}.attr .meter i{display:block;height:100%;background:var(--red)}
.empty{padding:34px;text-align:center;color:var(--muted)}
.bet-box{display:grid;gap:8px}
.bet-box .row{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:10px;color:#999;font-weight:700;letter-spacing:.7px}
.bet-box select{background:#111213;color:#ddd;border:1px solid #3b3c3e;border-radius:4px;padding:6px 8px;font:10px 'DM Sans',sans-serif}
.bet-odds{font-size:10px;color:#d8c69f}
.bet-result{margin:6px 0 0;font-size:11px;color:#d8c69f}.bet-result.win{color:var(--green)}.bet-result.loss{color:#ff8a80}
@media(max-width:720px){.profile-card{grid-template-columns:1fr}.profile-card .big{height:170px}}

/* Creator point-buy + flag backdrops */
.creator-points{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding:10px 12px;background:#222325;border:1px solid #393a3c;border-radius:6px;font:700 11px 'DM Sans';letter-spacing:.8px;color:#aaa}
.creator-points b{font:900 22px 'Barlow Condensed';color:#fff;letter-spacing:.5px}.creator-points.ok b{color:var(--green)}.creator-points.over b{color:#ff8a80}
.creator-stats{margin-top:12px}
.creator-stats .lim{color:#666;font-size:8px;font-weight:600}
.portrait{background-color:#18191b}
.flag-chip{display:inline-block;width:18px;height:12px;vertical-align:-1px;margin-right:5px;border-radius:2px;background-size:cover;background-position:center;box-shadow:0 0 0 1px #0006}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;background:#0b0c0de6;border:1px solid #d9aa5b88;color:#f4dfb7;padding:10px 16px;border-radius:6px;font:700 12px 'DM Sans';box-shadow:0 8px 28px #000a;max-width:92vw}
.mini-avatar{border-radius:8px}
.mini-avatar{width:78px;height:96px;border-radius:8px;background-color:#18191b;border:1px solid #444}
.fightergrid .portrait{height:150px}

/* Winner presentation */
.winner-banner{position:absolute;z-index:7;left:50%;top:6%;transform:translateX(-50%);display:grid;justify-items:center;gap:2px;text-align:center;pointer-events:none;width:min(92%,640px)}
.winner-banner[hidden]{display:none}
.winner-banner small{font:800 14px 'Barlow Condensed';letter-spacing:6px;color:#f4dfb7;text-shadow:0 2px 10px #000}
.winner-banner strong{font:900 clamp(40px,8vw,84px)/.95 'Barlow Condensed';letter-spacing:2px;text-transform:uppercase;background:linear-gradient(180deg,#fff6d6,#e8b64a 55%,#b9822a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #000) drop-shadow(0 0 18px #e8b64a88)}
.winner-banner span{font:700 13px 'DM Sans';letter-spacing:1.5px;color:#f4f2ed;text-transform:uppercase;background:#0b0c0dcc;border:1px solid #ffffff2a;padding:4px 12px;border-radius:3px;margin-top:6px}
.winner-banner.show{animation:winner-in .7s cubic-bezier(.2,1.2,.3,1) both}
@keyframes winner-in{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.fightarena.victory:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 70%,transparent 0 22%,#000a 80%),linear-gradient(#0008,transparent 40%)}
.fightarena.victory .fightoverlay .roundpill{opacity:.0}

/* Health chip (delayed damage bar), low-resource warnings, danger vignette */
.bars .bar{position:relative}.bars .bar i{position:relative;z-index:1}
.bars .bar .chip{position:absolute;left:0;top:0;bottom:0;background:#ffe9a8;opacity:.85;transition:width 1.1s .45s ease-out}
.bars .bar i{transition:width .25s ease-out}
.bar.health.low i{background:#f04436;animation:low-pulse .7s ease-in-out infinite}
.bar:not(.health).low i{animation:low-pulse .9s ease-in-out infinite}
@keyframes low-pulse{50%{opacity:.45}}
.fightarena.danger:after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 90px 6px #f0443666;animation:danger-beat 1.1s ease-in-out infinite}
@keyframes danger-beat{50%{box-shadow:inset 0 0 130px 14px #f0443699}}
.fighter-canvas{transition:none;will-change:transform}
@media(prefers-reduced-motion:reduce){.fightarena.danger:after,.bar.health.low i{animation:none!important}}

.creator-look{grid-column:1/-1;display:flex;gap:14px;align-items:center;padding:10px;background:#1f2023;border:1px solid #393a3c;border-radius:8px}
.creator-look img{width:84px;height:116px;object-fit:contain;background:#141517;border-radius:6px;border:1px solid #333}
.creator-look div{display:grid;gap:6px;font-size:10px;color:#999}.creator-look small{font-weight:700;letter-spacing:1px}
.creator-look span{color:#d8c69f}
.fighter.random-fighter{display:grid;place-content:center;gap:4px;border:1px dashed #3a5a7a;background:#1a2028}.random-fighter .create-mark{color:#7fd1ff}

/* Ring card between rounds: carried across the octagon */
.round-card{position:absolute;z-index:6;left:0;right:0;bottom:22%;height:0;pointer-events:none}
.round-card[hidden]{display:none}
.rc-carry{position:absolute;left:50%;bottom:0;display:grid;justify-items:center;transform:translateX(-50%)}
.round-card.show .rc-carry{animation:rc-walk 3.4s cubic-bezier(.45,.05,.4,1) both}
.rc-board{display:grid;justify-items:center;gap:2px;min-width:168px;padding:10px 18px 9px;background:linear-gradient(#f6f1e6,#e3dccb);color:#141416;
  border:4px solid #141416;box-shadow:0 0 0 3px #f04436,6px 8px 0 #0009;image-rendering:pixelated;animation:rc-bob .42s ease-in-out infinite alternate}
.rc-board img{height:26px;filter:drop-shadow(1px 1px 0 #0006)}
.rc-board small{font:900 13px 'Barlow Condensed';letter-spacing:6px;margin-top:2px}
.rc-board strong{font:900 64px/.85 'Barlow Condensed';color:#d32f22;text-shadow:3px 3px 0 #141416}
.rc-board span{font:800 10px 'DM Sans';letter-spacing:1px;background:#141416;color:#f4dfb7;padding:3px 8px;margin-top:5px;white-space:nowrap}
.rc-handle{display:block;width:8px;height:46px;background:linear-gradient(90deg,#6b4a2c,#9a7048 50%,#5a3d24);border:2px solid #141416;border-top:0}
@keyframes rc-walk{0%{left:-18%}32%{left:50%}70%{left:50%}100%{left:118%}}
@keyframes rc-bob{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-5px) rotate(1.5deg)}}
@media(max-width:720px){.rc-board{min-width:120px;padding:7px 12px}.rc-board strong{font-size:44px}.rc-handle{height:28px}}
@media(prefers-reduced-motion:reduce){.round-card.show .rc-carry,.rc-board{animation:none}}