:root{
  --p1:#39c6ff;
  --p2:#ff5a5a;
  --gold:#ffce3b;
  --bg:#0b0e17;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  height:100%;
  background:#05060a;
  color:#fff;
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  overflow:hidden;
  user-select:none;
}
#wrap{
  position:relative;
  width:1280px;
  max-width:100vw;
  margin:0 auto;
  aspect-ratio:16/9;
}
canvas{
  display:block;
  width:100%;
  height:100%;
  background:#0b0e17;
  image-rendering:auto;
}
.hidden{display:none !important;}

/* ---------------- HUD ---------------- */
#hud{
  position:absolute;
  top:0;left:0;right:0;
  display:flex;
  justify-content:space-between;
  padding:18px 24px;
  pointer-events:none;
  z-index:5;
}
.hud-side{width:42%;}
.hud-right{display:flex;flex-direction:column;align-items:flex-end;}
.name{
  font-size:20px;font-weight:bold;letter-spacing:2px;
  text-shadow:0 2px 4px #000;margin-bottom:4px;
}
.hud-left .name{color:var(--p1);}
.hud-right .name{color:var(--p2);}
.hpbar{
  position:relative;
  height:26px;
  background:#1a1f2e;
  border:3px solid #000;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 3px 8px rgba(0,0,0,.6);
}
.hp{
  position:absolute;top:0;left:0;height:100%;width:100%;
  background:linear-gradient(#7dffa0,#1fcf5d);
  transition:width .12s linear;
}
.hp-delay{
  position:absolute;top:0;left:0;height:100%;width:100%;
  background:#ffce3b;
  transition:width .55s ease .25s;
}
.hpbar.rev .hp,.hpbar.rev .hp-delay{left:auto;right:0;}
.meterbar{
  margin-top:6px;height:10px;width:60%;
  background:#1a1f2e;border:2px solid #000;border-radius:3px;overflow:hidden;
}
.hud-right .meterbar{margin-left:auto;}
.meter{
  height:100%;width:0%;
  background:linear-gradient(90deg,#ff8a00,#ffd23b);
  transition:width .15s linear;
}
.meterbar.full .meter{
  animation:meterPulse .5s infinite alternate;
}
@keyframes meterPulse{from{filter:brightness(1)}to{filter:brightness(1.8)}}
.rounds{display:flex;gap:6px;margin-top:8px;}
.hud-right .rounds{justify-content:flex-end;}
.dot{width:14px;height:14px;border-radius:50%;background:#2a3046;border:2px solid #000;}
.dot.win{background:var(--gold);box-shadow:0 0 8px var(--gold);}

.hud-center{
  display:flex;flex-direction:column;align-items:center;
  width:16%;
}
.timer{
  font-size:46px;font-weight:bold;
  text-shadow:0 3px 6px #000;
  font-variant-numeric:tabular-nums;
}
.combo{
  font-size:18px;font-weight:bold;height:22px;color:var(--gold);
  text-shadow:0 2px 3px #000;opacity:0;transition:opacity .2s;
}
.combo.show{opacity:1;}

/* ---------------- ANNOUNCE ---------------- */
#announce{
  position:absolute;top:38%;left:0;right:0;
  text-align:center;
  font-size:72px;font-weight:900;letter-spacing:4px;
  color:#fff;
  text-shadow:0 0 24px var(--gold),0 6px 12px #000;
  z-index:8;pointer-events:none;
  animation:announce .9s ease;
}
@keyframes announce{
  0%{transform:scale(2.4);opacity:0;}
  25%{transform:scale(1);opacity:1;}
  80%{transform:scale(1);opacity:1;}
  100%{transform:scale(.9);opacity:0;}
}

/* ---------------- MENUS ---------------- */
#menu,#controls,#result{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#161d33,#05060a 75%);
  z-index:10;text-align:center;
}
#menu h1{
  font-size:90px;font-weight:900;letter-spacing:6px;
  text-shadow:0 0 30px var(--p1),0 8px 0 #000;
}
#menu h1 span{color:var(--p2);text-shadow:0 0 30px var(--p2),0 8px 0 #000;}
.tag{color:#8c98b8;letter-spacing:6px;margin:6px 0 36px;text-transform:uppercase;font-size:14px;}
.btns{display:flex;flex-direction:column;gap:14px;}
button{
  cursor:pointer;
  font-family:inherit;
  font-size:20px;font-weight:bold;letter-spacing:3px;
  color:#fff;background:#1c2438;
  border:3px solid #000;border-radius:6px;
  padding:14px 48px;
  box-shadow:0 5px 0 #000;
  transition:transform .08s,background .15s;
}
button:hover{background:#2a3656;transform:translateY(-2px);}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #000;}
#difficulty{margin-top:30px;display:flex;align-items:center;gap:10px;color:#9aa6c6;letter-spacing:2px;}
#difficulty button{padding:8px 18px;font-size:14px;box-shadow:0 3px 0 #000;}
#difficulty .diff.active{background:var(--gold);color:#000;}
.footer{margin-top:26px;color:#5b6688;font-size:13px;letter-spacing:2px;}

#controls h2,#result h2{font-size:46px;letter-spacing:4px;margin-bottom:24px;}
.ctrl-grid{display:flex;gap:60px;}
.ctrl-col h3{color:var(--gold);letter-spacing:3px;margin-bottom:14px;}
.ctrl-col table{border-collapse:collapse;}
.ctrl-col td{padding:7px 14px;text-align:left;font-size:16px;}
.ctrl-col td:first-child{color:#9aa6c6;}
kbd{
  display:inline-block;min-width:24px;
  background:#222a40;border:2px solid #000;border-bottom-width:4px;
  border-radius:4px;padding:2px 7px;font-size:13px;font-weight:bold;
}
.hint{margin-top:28px;color:#7c89ad;max-width:620px;font-size:14px;line-height:1.5;}
#controls button,#result button{margin-top:30px;}
#result .btns{flex-direction:row;gap:20px;}
#resultText{text-shadow:0 0 28px var(--gold);}
