:root{
  --bg1:#0f172a;
  --bg2:#020617;
  --panel: rgba(255,255,255,.08);
  --panel2: rgba(255,255,255,.12);
  --text: #e5e7eb;
  --accent:#22c55e;
  --danger:#ef4444;
  --warn:#f59e0b;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 50% 0%, #1e293b 0%, var(--bg1) 35%, var(--bg2) 100%);
}

.top{
  text-align:center;
  padding:14px 10px 6px;
}
.top h1{ margin:0; font-size:28px; letter-spacing:.5px; }
.sub{ margin:6px 0 0; opacity:.9; }

.hud{
  max-width: 980px;
  margin: 10px auto;
  padding: 10px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.hud-box{
  min-width: 140px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}
.label{ font-size:12px; opacity:.8; letter-spacing:1px; }
.value{ font-size:22px; margin-top:4px; font-weight:bold; }

.btn{
  border:0;
  border-radius: 12px;
  padding: 12px 16px;
  cursor:pointer;
  font-weight:bold;
  color:#06220f;
  background: linear-gradient(180deg, #34d399, #22c55e);
  box-shadow: 0 8px 20px rgba(34,197,94,.25);
}
.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
}
.btn.ghost{
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:none;
}

main{ padding: 10px 10px 30px; }

#game{
  position: relative;
  max-width: 980px;
  height: 70vh;
  min-height: 420px;
  margin: 0 auto;
  border-radius: 16px;
  overflow:hidden;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(59,130,246,.18) 0%, rgba(59,130,246,0) 60%),
    radial-gradient(800px 500px at 80% 20%, rgba(34,197,94,.14) 0%, rgba(34,197,94,0) 60%),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  cursor: crosshair;
  user-select:none;
}

.message{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  font-weight:bold;
  letter-spacing:.5px;
}

.ninja{
  position:absolute;
  font-size: 40px;
  cursor:pointer;
  user-select:none;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.25));
  transform: translateZ(0);
}
.ninja:active{ transform: scale(.95); }

.spark{
  position:absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fde047;
  pointer-events:none;
}

.slash{
  position:absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  pointer-events:none;
  opacity:0;
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 0 30px rgba(255,255,255,.12);
  transform: translate(-50%,-50%);
}

.slash.on{
  opacity:1;
  animation: slashPop .18s ease-out;
}
@keyframes slashPop{
  0%{ transform: translate(-50%,-50%) scale(.6); opacity:.2; }
  100%{ transform: translate(-50%,-50%) scale(1); opacity:1; }
}

.shake{
  animation: shake .18s linear;
}
@keyframes shake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-3px); }
  50%{ transform: translateX(3px); }
  75%{ transform: translateX(-3px); }
  100%{ transform: translateX(0); }
}

.foot{
  text-align:center;
  padding: 10px;
  opacity:.75;
}