:root {
  --c-p1: #1abc9c;
  --c-p2: #e74c3c;
  --c-gold: #f39c12;
  --c-purple: #8e44ad;
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body {
  width:100%; height:100%;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#wrap { position:relative; width:640px; }

/* ── TITLE ── */
#title {
  width:640px; height:420px;
  background:#0d0820;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.t-scanlines {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(142,68,173,0.07) 28px,rgba(142,68,173,0.07) 29px);
}
.t-glow {
  position:absolute; width:500px; height:200px;
  background:radial-gradient(ellipse,rgba(142,68,173,0.28) 0%,transparent 70%);
  top:40%; left:50%; transform:translate(-50%,-50%); pointer-events:none;
}
.t-corner {
  position:absolute; width:36px; height:36px;
  border-color:rgba(243,156,18,0.5); border-style:solid;
}
.t-corner.tl{top:16px;left:16px;border-width:2px 0 0 2px;}
.t-corner.tr{top:16px;right:16px;border-width:2px 2px 0 0;}
.t-corner.bl{bottom:16px;left:16px;border-width:0 0 2px 2px;}
.t-corner.br{bottom:16px;right:16px;border-width:0 2px 2px 0;}
.logo {
  font-family:'Bebas Neue',sans-serif;
  font-size:90px; letter-spacing:8px; color:#fff; line-height:1;
  text-shadow:0 0 24px rgba(243,156,18,0.9),0 0 70px rgba(243,156,18,0.4),5px 5px 0 #6c3483;
  animation:flicker 4s infinite;
  position:relative; z-index:1;
}
.logo-sub {
  font-family:'Orbitron',monospace; font-size:12px; letter-spacing:7px; color:var(--c-gold);
  margin-top:-2px; margin-bottom:28px; position:relative; z-index:1;
}
.char-row { display:flex; gap:32px; margin-bottom:32px; position:relative; z-index:1; }
.cname {
  font-family:'Orbitron',monospace; font-size:14px; font-weight:700; letter-spacing:3px;
  padding:7px 20px; border:2px solid;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
.cname.p1{color:var(--c-p1);border-color:var(--c-p1);background:rgba(26,188,156,0.08);}
.cname.p2{color:var(--c-p2);border-color:var(--c-p2);background:rgba(231,76,60,0.08);}
.menu { display:flex; flex-direction:column; gap:12px; width:290px; position:relative; z-index:1; }
.mbtn {
  font-family:'Orbitron',monospace; font-size:12px; font-weight:700; letter-spacing:3px;
  padding:15px 0; border:2px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.03); color:#bbb; cursor:pointer;
  text-align:center; text-transform:uppercase;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
  transition:all 0.14s; user-select:none;
}
.mbtn:hover {
  border-color:var(--c-gold); color:var(--c-gold);
  background:rgba(243,156,18,0.1);
  text-shadow:0 0 10px rgba(243,156,18,0.6);
  transform:scaleX(1.03);
}
.t-hint {
  position:absolute; bottom:12px;
  font-family:'Orbitron',monospace; font-size:9px; letter-spacing:2px;
  color:rgba(255,255,255,0.22); z-index:1;
}
@keyframes flicker{0%,95%,100%{opacity:1;}96%{opacity:.8;}97%{opacity:1;}98.5%{opacity:.65;}99%{opacity:1;}}

/* ── GAME ── */
#game { display:none; flex-direction:column; align-items:center; width:640px; }

/* HUD */
#hud {
  width:640px; padding:8px 12px 6px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(0,0,0,0.75);
  border-bottom:1px solid rgba(142,68,173,0.35);
}
.hside { width:43%; }
.hside.r { text-align:right; }
.hname {
  font-family:'Orbitron',monospace; font-size:9px; font-weight:700;
  letter-spacing:2px; margin-bottom:4px;
}
.hname.p1{color:var(--c-p1);}
.hname.p2{color:var(--c-p2);}
.hptrack {
  height:14px; background:#111;
  border:1px solid rgba(255,255,255,0.12); overflow:hidden; position:relative;
}
.hpbar { height:100%; position:absolute; transition:width 0.07s linear; }
.hpbar.p1{left:0;background:linear-gradient(90deg,#e74c3c,#f1c40f,#1abc9c);}
.hpbar.p2{right:0;background:linear-gradient(270deg,#e74c3c,#f1c40f,#8e44ad);}
.pips { display:flex; gap:4px; margin-top:4px; }
.hside.r .pips { justify-content:flex-end; }
.pip {
  width:9px; height:9px;
  border:1px solid rgba(255,255,255,0.25);
  background:transparent; transition:background .3s;
}
.pip.on { background:var(--c-gold); border-color:var(--c-gold); }
.hcenter { text-align:center; }
#ht {
  font-family:'Bebas Neue',sans-serif; font-size:34px; line-height:1;
  color:#fff; text-shadow:0 0 14px rgba(243,156,18,.6); min-width:48px;
}
#rlabel {
  font-family:'Orbitron',monospace; font-size:8px; letter-spacing:2px;
  color:rgba(255,255,255,.4); margin-top:2px;
}

/* Canvas + overlay */
.cw { position:relative; }
#canvas {
  display:block; image-rendering:pixelated;
  border-left:2px solid rgba(142,68,173,.45);
  border-right:2px solid rgba(142,68,173,.45);
}
#ov {
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  flex-direction:column; pointer-events:none; z-index:50;
}
#ov.show{display:flex;}
#ovt {
  font-family:'Bebas Neue',sans-serif; font-size:56px; letter-spacing:6px;
  color:#fff;
  text-shadow:3px 3px 0 #000,-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000,0 0 36px rgba(243,156,18,.9);
  animation:pop .2s ease-out;
}
#ovs {
  font-family:'Orbitron',monospace; font-size:11px; letter-spacing:4px;
  color:var(--c-gold); margin-top:6px; opacity:.9;
}
@keyframes pop{from{transform:scale(1.5);opacity:0;}to{transform:scale(1);opacity:1;}}

/* Controls bar */
#cbar {
  width:640px; padding:5px 12px;
  background:rgba(0,0,0,.82);
  border-top:1px solid rgba(142,68,173,.28);
  display:flex; justify-content:space-between;
}
.cg {
  font-family:'Orbitron',monospace; font-size:8px; letter-spacing:1px;
  color:rgba(255,255,255,.32); line-height:1.9;
}
.ck {
  display:inline-block; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); padding:0 4px;
  border-radius:2px; font-size:8px; color:rgba(255,255,255,.5); margin:0 1px;
}