@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Teko:wght@500;700&display=swap');

:root { --p1: #ff3b3b; --p2: #3bb8ff; --gold: #ffd23f; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff; font-family: 'Teko', 'Arial Narrow', sans-serif; user-select: none; }
#stage canvas { display: block; }
.hidden { display: none !important; }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 5; }

/* ---- HUD ---- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.bars { position: absolute; top: 18px; left: 3vw; right: 3vw; display: flex; align-items: flex-start; gap: 16px; }
.side { flex: 1; }
.side.right { text-align: right; }
.name { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 30px; letter-spacing: 2px; line-height: 1; margin-bottom: 4px;
  text-shadow: 0 0 12px var(--accent, #fff), 2px 2px 0 #000; }
.hpwrap { position: relative; height: 26px; background: #1b0b0b; border: 3px solid #e8e8e8; border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 2px #000, 0 6px 18px rgba(0,0,0,.6); transform: skewX(-12deg); }
.side.right .hpwrap { transform: skewX(12deg); }
.hp, .dmg { position: absolute; top: 0; bottom: 0; width: 100%; }
.left .hp, .left .dmg { right: 0; } .right .hp, .right .dmg { left: 0; }
.dmg { background: #d8261c; }
.hp { background: linear-gradient(#ffe36b, #f2b100 55%, #c98800); transition: width .06s linear; }
.hp.low { background: linear-gradient(#ff9b6b, #f24800 55%, #a82a00); animation: pulse .5s infinite alternate; }
@keyframes pulse { to { filter: brightness(1.35); } }
.pips { margin-top: 6px; display: flex; gap: 6px; }
.right .pips { justify-content: flex-end; }
.pip { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ddd; background: #222; box-shadow: 0 0 0 2px #000; }
.pip.won { background: radial-gradient(#fff6b0, var(--gold)); box-shadow: 0 0 10px var(--gold), 0 0 0 2px #000; }
.timer { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 64px; line-height: .9; min-width: 84px; text-align: center; padding-top: 2px;
  color: #fff; text-shadow: 0 0 14px #ffb300, 3px 3px 0 #000; }
.timer.low { color: #ff4b3b; animation: pulse .4s infinite alternate; }
.meters { position: absolute; bottom: 24px; left: 3vw; right: 3vw; display: flex; justify-content: space-between; }
.meterwrap { position: relative; width: 30vw; max-width: 380px; height: 16px; background: #0a0a1a; border: 2px solid #9aa; border-radius: 2px; overflow: hidden; }
.meterwrap span { position: absolute; inset: 0; font-size: 15px; line-height: 14px; letter-spacing: 4px; text-align: center; color: #cfe; text-shadow: 1px 1px 0 #000; }
.meter { position: absolute; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #2a6cff, #2de2ff); transition: width .15s; }
.meterwrap.right .meter { right: 0; background: linear-gradient(270deg, #2a6cff, #2de2ff); }
.meterwrap.full { border-color: #fff; box-shadow: 0 0 14px #ff2d75; }
.meterwrap.full .meter { background: linear-gradient(90deg, #ff2d75, #ffd23f, #ff2d75); background-size: 200% 100%; animation: shimmer .6s linear infinite; }
.meterwrap.pulse { animation: pop .4s; }
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes pop { 50% { transform: scale(1.12); } }
.combo { position: absolute; top: 120px; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 34px; opacity: 0; color: #fff;
  text-shadow: 0 0 10px #ff8a00, 2px 2px 0 #000; }
.combo b { font-size: 64px; color: var(--gold); margin-right: 6px; }
.combo small { display: block; font-size: 26px; color: #ff4b6b; letter-spacing: 3px; }
.combo.left { left: 4vw; } .combo.right { right: 4vw; text-align: right; }
.combo.show { animation: comboIn 1.4s ease-out forwards; }
@keyframes comboIn { 0% { opacity: 0; transform: translateX(-30px) scale(1.4); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---- announcements ---- */
.banner { position: fixed; left: 0; right: 0; top: 34%; text-align: center; z-index: 12; pointer-events: none; opacity: 0;
  font-family: 'Bebas Neue', Impact, sans-serif; font-size: min(17vw, 170px); letter-spacing: 6px; line-height: 1;
  color: #fff; -webkit-text-stroke: 3px #000; text-shadow: 0 0 30px rgba(255,140,0,.9), 6px 6px 0 #000; }
.banner.show { animation: slam .45s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes slam { 0% { opacity: 0; transform: scale(2.6); } 100% { opacity: 1; transform: scale(1); } }
.banner.fight { color: #ffd23f; }
.banner.ko { color: #ff2b2b; font-size: min(22vw, 220px); text-shadow: 0 0 40px #ff0000, 8px 8px 0 #000; }
.banner.finish { color: #ff2b2b; font-size: min(12vw, 130px); }
.banner.super { font-size: min(8vw, 80px); color: #ff5fa2; top: 18%; }
.banner.win { font-size: min(11vw, 120px); color: var(--gold); }
/* round 1 versus close-ups: the fighter's name low in frame, on his side, in his HUD colour */
.banner.name { top: 64%; font-size: min(10vw, 110px); text-align: left; padding: 0 7%; }
.banner.name1 { text-align: right; }
.banner.name0 { color: #ff5a4a; text-shadow: 0 0 30px rgba(255,40,40,.8), 6px 6px 0 #000; }
.banner.name1 { color: #5ac8ff; text-shadow: 0 0 30px rgba(40,160,255,.8), 6px 6px 0 #000; }
.subbanner { position: fixed; left: 0; right: 0; top: calc(34% + min(17vw, 170px)); text-align: center; z-index: 12; opacity: 0;
  font-family: 'Bebas Neue', Impact, sans-serif; font-size: min(6vw, 56px); letter-spacing: 8px; color: #fff; text-shadow: 0 0 16px #2de2ff, 3px 3px 0 #000; pointer-events: none; }
.subbanner.show { animation: slam .5s .25s cubic-bezier(.2,1.6,.4,1) both; }
.subbanner.name { top: calc(64% + min(10vw, 110px)); text-align: left; padding: 0 7.3%; }
.subbanner.name1 { text-align: right; }

/* ---- title / loading / pause ---- */
#title, #loading, #pause { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.8)); padding: 16px; text-align: center; }
#loading { background: #050508; }
h1 { font-family: 'Bebas Neue', Impact, sans-serif; font-size: min(13vw, 140px); margin: 0; letter-spacing: 6px; line-height: .9;
  color: #fff; text-shadow: 0 0 30px #ff2d55, 6px 6px 0 #000; }
h1 span { color: #ff2d55; text-shadow: 0 0 30px #ff2d55, 6px 6px 0 #000; }
.tag { font-family: 'Bebas Neue', Impact, sans-serif; font-size: min(6vw, 40px); letter-spacing: 10px; margin: 6px 0 20px; color: #ddd; }
.tag i { color: #ff2d55; font-style: normal; }
.menu { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-bottom: 18px; }
button { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 26px; letter-spacing: 3px; padding: 10px 22px; cursor: pointer;
  color: #fff; background: linear-gradient(#2a2a35, #121218); border: 2px solid #ff2d55; border-radius: 4px; box-shadow: 0 0 14px rgba(255,45,85,.35); }
button:hover { background: #ff2d55; color: #000; }
label { font-size: 24px; letter-spacing: 2px; }
select { font: inherit; font-size: 20px; background: #15151c; color: #fff; border: 1px solid #666; padding: 4px 6px; }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 28px; max-width: 1100px; width: 100%;
  background: rgba(0,0,0,.55); border: 1px solid #333; padding: 12px 18px; border-radius: 6px; font-size: 20px; text-align: left; }
.controls h3 { margin: 0 0 4px; font-size: 24px; color: #ffd23f; letter-spacing: 2px; }
.controls p { margin: 2px 0; line-height: 1.3; }
.controls .tips { grid-column: 1 / -1; color: #bbb; }
kbd { display: inline-block; min-width: 22px; padding: 0 5px; margin: 0 1px; border: 1px solid #888; border-bottom-width: 3px; border-radius: 4px;
  background: #222; font-family: 'Teko', monospace; font-size: 18px; line-height: 20px; text-align: center; color: #fff; }
.press { margin-top: 16px; font-size: 28px; letter-spacing: 8px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.loadtrack { width: min(480px, 80vw); height: 10px; border: 2px solid #555; margin: 26px 0 10px; }
#loadbar { height: 100%; width: 0; background: linear-gradient(90deg, #ff2d55, #ffd23f); transition: width .2s; }
#loadmsg { font-size: 22px; color: #aaa; letter-spacing: 2px; }
#pause div { display: flex; flex-direction: column; gap: 12px; }
#pause h2 { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 80px; margin: 0; letter-spacing: 8px; }

@media (max-width: 700px) {
  .name { font-size: 22px; } .timer { font-size: 44px; min-width: 56px; } .hpwrap { height: 18px; }
  .controls { font-size: 16px; } button { font-size: 20px; padding: 8px 14px; }
}

/* video mode: the title card is a clean poster, no menu */
body.video #title .menu, body.video #title .controls, body.video #title .press { display: none; }
body.video #title h1 { font-size: 150px; }
body.video #title .tag { font-size: 54px; margin-top: 14px; }
body.video #loading { background: #000; }