:root{
  --bg:#061021;
  --panel:#0b2236;
  --accent:#00ffa3;
  --danger:#ff4d6d;
  --muted:#9db7c9;
}
html,body{height:100%;margin:0;font-family: "Segoe UI", Roboto, Arial, sans-serif;background:var(--bg);color:#dbeaf6;}
.wrap{
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px;
}
header{
  text-align:center;
}
h1{margin:4px 0;font-size:28px;letter-spacing:1px;color:var(--accent);text-shadow:0 0 8px rgba(57,255,191,0.12)}
#gameCard{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
  border:1px solid rgba(255,255,255,0.04);
  padding:12px;border-radius:10px;box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
canvas{display:block;background: linear-gradient(180deg,#071430 0%, #04121d 100%); border-radius:6px; width: 100%; max-width: 900px; height: auto; }
#hud{
  display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:10px;
  max-width:900px;
}
#scoreBox{background:var(--panel);padding:8px 12px;border-radius:8px; color:var(--muted);font-weight:700}
#hpBar{flex:1;margin-left:10px;background:rgba(255,255,255,0.03);height:18px;border-radius:8px;overflow:hidden;display:flex;align-items:center}
#hpFill{height:100%;background:linear-gradient(90deg,var(--accent),#60ffdf);width:100%}
#controls {display:flex;gap:8px;align-items:center}
.btn {background:#083042;border:none;padding:8px 12px;border-radius:8px;color:var(--muted);cursor:pointer;font-weight:700}
.small{padding:6px 8px;font-size:13px}
#overlay {
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(0deg, rgba(0,0,0,0.45), rgba(0,0,0,0.45));backdrop-filter: blur(2px);
}
.panel {background:linear-gradient(180deg,#071c2b,#021017);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);width:90%;max-width:520px}
.menuTitle {font-size:22px;color:var(--accent);margin-bottom:6px}
.muted {color:var(--muted);font-size:14px}
.flex-row {display:flex;gap:8px;align-items:center;margin-top:12px}
#touchControls {display:none;margin-top:12px;gap:8px;justify-content:center}
.touchBtn {background:#073544;padding:14px;border-radius:10px;color:var(--muted);font-weight:800;min-width:64px;text-align:center;user-select:none}
@media (max-width:700px){
  canvas{width:100%;height:340px}
  #touchControls{display:flex}
}
footer{font-size:12px;color:var(--muted);margin-top:6px;text-align:center}
/* little "teen" scribble style */
.credits {font-family: "Comic Sans MS", "Comic Neue", "Segoe UI", sans-serif;color:#9be6d2;margin-top:8px}