*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000010;font-family:'Courier New',monospace;color:#0af}

#loading{
  position:fixed;inset:0;background:#000010;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;font-size:1rem;color:#0af;z-index:100;
}
.spin{
  width:40px;height:40px;border:3px solid #0af3;
  border-top-color:#0af;border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

#canvas-wrap{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:#000010;
}
canvas{
  display:block;border:1px solid #0af4;
  image-rendering:pixelated;
  max-width:100%;max-height:100%;
}

/* HUD */
#hud{
  position:fixed;top:0;left:0;right:0;
  background:rgba(0,5,20,0.85);
  border-bottom:1px solid #0af3;
  padding:6px 12px;
  display:flex;align-items:center;gap:12px;
  font-size:0.75rem;letter-spacing:0.05em;
  z-index:10;
}
#hp-bar-wrap{display:flex;align-items:center;gap:6px;flex:1;max-width:180px;}
#hp-bar-label{color:#0af;white-space:nowrap;font-size:0.7rem;}
#hp-bar-bg{flex:1;height:10px;background:#0af2;border:1px solid #0af5;border-radius:2px;overflow:hidden;}
#hp-bar-fill{height:100%;transition:width 0.3s,background 0.3s;background:#0f8;}
.hud-item{color:#0af;white-space:nowrap;}
.hud-item b{color:#fff;}
#laser-indicators{display:flex;gap:4px;}
.laser-btn{
  padding:2px 6px;border:1px solid #0af4;border-radius:3px;
  font-size:0.65rem;cursor:pointer;color:#0af6;background:transparent;
  transition:all 0.15s;
}
.laser-btn.active{
  background:#0af2;border-color:#0af;color:#fff;
  box-shadow:0 0 8px #0af;
}
#flash-icons{display:flex;gap:3px;}
.flash-icon{
  width:14px;height:14px;border-radius:50%;
  border:1px solid #f80;background:#f800;
  transition:background 0.2s;
}
.flash-icon.charged{background:#f84;box-shadow:0 0 6px #f80;}

/* Overlays */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,10,0.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;z-index:20;
}
.overlay h1{font-size:2.2rem;color:#fff;text-shadow:0 0 24px #0af;letter-spacing:0.1em;}
.overlay .sub{font-size:0.85rem;color:#0af8;text-align:center;max-width:340px;line-height:1.6;}
.overlay button{
  margin-top:8px;padding:14px 40px;
  background:transparent;border:2px solid #0af;
  color:#0af;font-size:1.1rem;font-family:inherit;letter-spacing:0.1em;
  cursor:pointer;border-radius:6px;
  transition:all 0.15s;
}
.overlay button:hover{background:#0af2;box-shadow:0 0 20px #0af;color:#fff;}
.key-hint{
  margin-top:6px;font-size:0.72rem;color:#0af6;
  display:grid;grid-template-columns:auto auto;gap:4px 16px;
}
.key-hint td:first-child{color:#fff;text-align:right;}
#score-final{font-size:1.6rem;color:#ff0;text-shadow:0 0 16px #ff0;}

/* Joystick area */
#controls{
  position:fixed;bottom:0;left:0;right:0;
  height:180px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px 20px;
  pointer-events:none;
  z-index:10;
}
.stick-wrap{pointer-events:all;position:relative;}
.stick-base{
  width:100px;height:100px;border-radius:50%;
  border:2px solid #0af5;background:rgba(0,30,60,0.5);
  position:relative;display:flex;align-items:center;justify-content:center;
}
.stick-knob{
  width:40px;height:40px;border-radius:50%;
  background:rgba(0,170,255,0.35);border:2px solid #0af;
  position:absolute;pointer-events:none;
  transition:transform 0.05s;
  box-shadow:0 0 12px #0af8;
}
.stick-label{
  text-align:center;font-size:0.6rem;color:#0af6;margin-top:4px;letter-spacing:0.08em;
}
#flash-btn{
  pointer-events:all;
  padding:12px 24px;
  background:rgba(255,80,0,0.15);
  border:2px solid #f80;
  color:#f80;font-family:inherit;font-size:0.9rem;letter-spacing:0.1em;
  border-radius:8px;cursor:pointer;
  text-shadow:0 0 8px #f80;
  box-shadow:0 0 16px #f804;
  transition:all 0.1s;
}
#flash-btn:active{background:rgba(255,80,0,0.4);box-shadow:0 0 32px #f80;}
#flash-btn:disabled{opacity:0.3;cursor:not-allowed;}

/* Flash screen effect */
#flash-screen{
  position:fixed;inset:0;pointer-events:none;z-index:15;
  background:#fff0;transition:background 0.1s;
}

@media(max-width:480px){
  #hud{gap:6px;padding:4px 8px;}
  #hp-bar-wrap{max-width:100px;}
  .laser-btn{padding:1px 4px;font-size:0.6rem;}
}