@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:#000;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
}

canvas {
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

#hud {
  position:fixed; top:12px; left:12px; z-index:10;
  font-family:'Press Start 2P',monospace; font-size:10px; color:#ff2244;
  text-shadow:0 0 8px rgba(255,34,68,0.5);
  user-select:none; pointer-events:none; line-height:1.8;
}

#score-hud {
  position:fixed; top:12px; right:12px; z-index:10;
  font-family:'Press Start 2P',monospace; font-size:9px; color:#44aaff;
  text-shadow:0 0 8px rgba(68,170,255,0.5);
  user-select:none; pointer-events:none; text-align:right; line-height:1.8;
}

.overlay {
  position:fixed; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Press Start 2P',monospace; color:#fff; text-align:center;
}
.overlay.hidden { display:none; }

#start-screen { background:rgba(5,5,20,0.95); }
#game-over-screen { background:rgba(40,0,0,0.92); }
#win-screen { background:rgba(0,10,40,0.92); }

.overlay h1 {
  font-size:clamp(1.2rem,4vw,2.5rem);
  margin-bottom:1rem; line-height:1.4;
}
.overlay p {
  font-size:0.6rem; color:#8888aa;
  margin-bottom:2rem; max-width:520px; line-height:2;
}
.overlay button {
  font-family:'Press Start 2P',monospace; font-size:0.7rem;
  padding:12px 28px; border:2px solid #ff2244; background:transparent;
  color:#ff2244; cursor:pointer; transition:all 0.3s;
  margin:4px;
}
.overlay button:hover { background:#ff2244; color:#fff; }

#start-screen h1 { color:#ff2244; }
#start-screen h1 span { color:#44aaff; }
#game-over-screen h1 { color:#ff2244; }
#win-screen h1 { color:#44ff88; }

.controls-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 24px;
  text-align:left;
  font-size:0.55rem;
  color:#6666aa;
  margin-bottom:1.5rem;
  line-height:2;
}
.controls-grid .key { color:#44aaff; }

#damage-flash {
  position:fixed; inset:0; z-index:15;
  background:rgba(255,0,0,0.25); pointer-events:none;
  opacity:0; transition:opacity 0.12s;
}
#damage-flash.active { opacity:1; }

#spider-sense {
  position:fixed; inset:0; z-index:14;
  border:3px solid rgba(255,34,68,0.6);
  pointer-events:none; opacity:0; transition:opacity 0.1s;
  box-shadow:inset 0 0 30px rgba(255,34,68,0.15);
}
#spider-sense.active { opacity:1; }

.level-select {
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
}
.level-select button { font-size:0.55rem; padding:10px 18px; }
#btn-start-l2 { border-color:#cc44ff; color:#cc44ff; }
#btn-start-l2:hover { background:#cc44ff; color:#fff; }