*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:#05040d;color:#fff;font-family:'Baloo 2',system-ui,sans-serif;
  display:flex;align-items:center;justify-content:center;overflow:hidden;user-select:none;
}
#wrap{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;padding:8px;align-items:center}

/* ---------------- score bar ---------------- */
#scorebar{
  width:min(100%,1200px);display:flex;align-items:center;gap:10px;
  background:#120d2e;border:3px solid #2a1f5c;border-radius:16px;padding:7px 14px;
}
/* ---- Mortal Kombat style health bars ---- */
.fighter-hp{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.hp-top{display:flex;align-items:baseline;gap:8px;font-weight:800;line-height:1.1}
.p2 .hp-top{justify-content:flex-end}
.who{font-size:clamp(11px,1.8vw,16px)}
.p1 .who{color:#9bd1ff}
.p2 .who{color:#ff9bd1}
.wins{font-size:clamp(9px,1.4vw,12px);opacity:.75}
.p2 .wins{order:-1}
.hp-bar{
  position:relative;height:clamp(18px,2.8vw,26px);
  background:#2a0f1c;border:3px solid rgba(255,255,255,.3);
  border-radius:7px;overflow:hidden;
}
.hp-bar.low{animation:pulse .5s infinite alternate}
@keyframes pulse{to{border-color:#ff5a7a;box-shadow:0 0 14px #ff5a7a99}}
.hp-fill{
  position:absolute;top:0;left:0;height:100%;width:100%;
  transition:width .22s ease-out;
}
.hp-bar.flip .hp-fill{left:auto;right:0}
.hp-fill.ok{background:linear-gradient(#9dff7a,#3ec92a)}
.hp-fill.warn{background:linear-gradient(#ffd166,#f0983b)}
.hp-fill.danger{background:linear-gradient(#ff8fab,#e02040)}
.hp-shield{
  position:absolute;top:0;left:0;height:100%;width:0;
  background:repeating-linear-gradient(90deg,#8fd3ff,#8fd3ff 5px,#5fb0e8 5px,#5fb0e8 10px);
  opacity:.85;transition:width .2s;
}
.hp-bar.flip .hp-shield{left:auto;right:0}
.hp-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:clamp(10px,1.6vw,14px);
  color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000;
}
.middle{display:flex;flex-direction:column;align-items:center;gap:2px}
.mini-row{display:flex;gap:4px}
.round-no{font-size:clamp(9px,1.5vw,13px);font-weight:800;color:#ffe9a8;letter-spacing:.08em;text-transform:uppercase}

/* round-win pips */
.rounds{display:flex;gap:4px;margin-top:1px}
.rounds.flip{justify-content:flex-end}
.pip{font-size:clamp(11px,1.8vw,15px);color:rgba(255,255,255,.22);line-height:1}
.pip.won{color:#ffd166;text-shadow:0 0 8px #ffd16699}
.timer{
  font-size:clamp(20px,3.4vw,32px);font-weight:800;color:#ffd166;line-height:1;
  min-width:2.4em;text-align:center;
}
.mini-btn{
  font-family:inherit;cursor:pointer;
  font-size:clamp(9px,1.4vw,12px);font-weight:800;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);
  border-radius:999px;padding:2px 10px;white-space:nowrap;
}
.mini-btn.off{opacity:.42;text-decoration:line-through}

/* ---------------- arena ---------------- */
#arena{
  position:relative;width:min(100%,1200px);aspect-ratio:1200/640;
  border-radius:20px;overflow:hidden;
  box-shadow:0 0 0 4px #231a52,0 20px 50px rgba(0,0,0,.7);
}
canvas{display:block;width:100%;height:100%;cursor:crosshair}

/* ---------------- overlays ---------------- */
.overlay{
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;
  background:radial-gradient(circle at 50% 35%,rgba(70,40,130,.94),rgba(5,4,13,.97));
  overflow-y:auto;
}
.overlay.show{display:flex}
.overlay h1{
  font-size:clamp(34px,7vw,70px);line-height:1;color:#ffd166;
  text-shadow:0 5px 0 #b4621a,0 10px 24px rgba(0,0,0,.6);
}
.overlay h2{font-size:clamp(24px,4.6vw,44px);color:#ffd166;text-shadow:0 3px 0 #b4621a;line-height:1.1}
.overlay h3{font-size:clamp(13px,2vw,18px);color:#ffe9a8}
.tag{font-weight:800;color:#ff8fab;font-size:clamp(13px,2.2vw,20px)}
.note{font-size:clamp(11px,1.8vw,15px);opacity:.85;max-width:30em}
.howto{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.side-card{
  width:clamp(160px,24vw,230px);padding:12px;border-radius:16px;
  background:rgba(255,255,255,.08);border:3px solid rgba(255,255,255,.18);
}
.side-card.p1{border-color:#9bd1ff88}
.side-card.p2{border-color:#ff9bd188}
.side-card .ico{font-size:clamp(28px,5vw,44px);line-height:1.1}
.side-card p{font-size:clamp(11px,1.8vw,15px);line-height:1.5}
.count{font-size:clamp(70px,18vw,170px);font-weight:800;color:#ffd166;text-shadow:0 6px 0 #b4621a}

/* ---------------- character select ---------------- */
.roster{
  display:flex;gap:9px;flex-wrap:wrap;justify-content:center;
  max-width:1060px;margin:2px 0;
}
.fcard{
  --fc:#ffd166;
  width:clamp(118px,13.5vw,164px);padding:9px 8px;
  background:rgba(255,255,255,.07);
  border:3px solid rgba(255,255,255,.15);border-radius:16px;
  cursor:pointer;transition:transform .1s,border-color .1s;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.fcard:hover{transform:translateY(-3px)}
.fcard.on{border-color:var(--fc);box-shadow:0 0 18px color-mix(in srgb, var(--fc) 45%, transparent);transform:translateY(-4px)}
.fcard.taken{opacity:.38;cursor:not-allowed}
.fico{font-size:clamp(28px,4.6vw,42px);line-height:1.05}
.fnm{font-weight:800;font-size:clamp(11px,1.7vw,15px);line-height:1.1;color:var(--fc)}
.fbl{font-size:clamp(9px,1.4vw,12px);opacity:.85;line-height:1.25;min-height:3.2em}
.fstats{width:100%;display:flex;flex-direction:column;gap:2px;margin:1px 0}
.st{display:flex;align-items:center;gap:4px;font-size:10px}
.st i{flex:1;height:6px;background:rgba(0,0,0,.4);border-radius:999px;overflow:hidden;display:block}
.st b{display:block;height:100%;background:var(--fc)}
.fspec{font-size:clamp(9px,1.4vw,12px);font-weight:800;color:#ffe9a8}
.ftaken{font-size:9px;font-weight:800;color:#ff8fab;text-transform:uppercase;letter-spacing:.06em}

.picked{
  background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.2);
  border-radius:14px;padding:7px 16px;max-width:38em;
}
.pk{display:flex;align-items:center;gap:10px;font-size:clamp(11px,1.8vw,16px);line-height:1.3}
.pico{font-size:clamp(22px,3.6vw,32px);line-height:1}

/* ---------------- arcade banner ---------------- */
#banner{
  position:absolute;left:50%;top:26%;transform:translate(-50%,-50%) scale(.6);
  font-weight:800;font-size:clamp(26px,6.5vw,66px);
  color:#ffd166;text-shadow:0 5px 0 #b4621a,0 0 30px rgba(255,209,102,.6);
  letter-spacing:.04em;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .18s,transform .25s cubic-bezier(.3,1.6,.5,1);
}
#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.trophy{font-size:clamp(48px,10vw,90px);line-height:1}
.prize{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:36em}
.prize-chip{
  background:rgba(0,0,0,.35);border:3px solid #ffd166;border-radius:16px;
  padding:7px 16px;font-weight:800;font-size:clamp(12px,2vw,17px);
}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{
  font-family:inherit;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block;
  font-size:clamp(14px,2.2vw,19px);padding:9px 22px;border-radius:999px;
  border:3px solid rgba(255,255,255,.2);
  background:linear-gradient(#ffd166,#f0983b);color:#3d1f00;box-shadow:0 5px 0 #a35c13;
  transition:transform .08s;
}
.btn.big{font-size:clamp(16px,2.7vw,24px);padding:12px 32px}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #a35c13}
.btn.ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.4)}

/* ---------------- popup ---------------- */
#pop{
  position:fixed;left:50%;top:12px;transform:translateX(-50%) translateY(-18px);
  background:rgba(12,9,30,.94);border:3px solid #ffd166;border-radius:16px;
  padding:8px 18px;font-weight:800;font-size:clamp(12px,2vw,18px);
  opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:50;
}
#pop.show{opacity:1;transform:translateX(-50%) translateY(0)}

#touchbar{display:none;text-align:center;font-size:13px;opacity:.8;max-width:30em}
@media (pointer:coarse){#touchbar{display:block}}