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

/* ── Password screen ─────────────────────────────── */
#pw-screen{
  position:fixed;inset:0;z-index:9999;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  background-image:radial-gradient(ellipse at center,#0a0015 0%,#000 100%);
}
#pw-box{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:44px 52px;
  background:linear-gradient(135deg,#0a0a1a 0%,#111128 100%);
  border-top:3px solid #3f3;border-left:3px solid #3f3;
  border-bottom:3px solid #0a0;border-right:3px solid #0a0;
  box-shadow:4px 4px 0 #050,0 0 40px rgba(0,255,0,0.10);
}
#pw-title{
  font-family:'Press Start 2P',monospace;
  font-size:28px;color:#3f3;
  text-shadow:0 0 16px #0f0,0 0 40px #0a0;
  margin-bottom:6px;
}
#pw-label{
  font-family:'Press Start 2P',monospace;
  font-size:9px;color:#666;letter-spacing:3px;
}
#pw-input{
  width:260px;height:54px;
  background:#000;
  border-top:3px solid #3f3;border-left:3px solid #3f3;
  border-bottom:3px solid #0a0;border-right:3px solid #0a0;
  color:#3f3;
  font-family:'Press Start 2P',monospace;font-size:16px;
  text-align:center;
  outline:none;
  box-shadow:3px 3px 0 #050,0 0 10px rgba(0,255,0,0.12);
  letter-spacing:3px;
}
#pw-input:focus{
  border-top-color:#ff3;border-left-color:#ff3;
  border-bottom-color:#aa8800;border-right-color:#aa8800;
  color:#ff3;box-shadow:3px 3px 0 #554400,0 0 14px rgba(255,255,0,0.25);
}
#pw-error{
  font-family:'Press Start 2P',monospace;
  font-size:9px;color:#f44;
  text-shadow:0 0 8px #f00;
  min-height:14px;letter-spacing:2px;
}
#pw-btn{
  padding:12px 36px;font-size:13px;font-family:'Press Start 2P',monospace;
  background:#001a00;color:#3f3;
  border-top:4px solid #3f3;border-left:4px solid #3f3;
  border-bottom:4px solid #0a0;border-right:4px solid #0a0;
  cursor:pointer;
  box-shadow:4px 4px 0 #050;
}
#pw-btn:hover{background:#002200;}
#pw-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #050;}
body{
  background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100vh;width:100vw;
  font-family:'Press Start 2P',monospace;
  overflow:hidden;
  background-image:radial-gradient(ellipse at center,#0a0015 0%,#000 100%);
}

/* ── Volume bar ─────────────────────────────────── */
#vol-bar{
  display:flex;align-items:center;gap:12px;
  padding:10px 22px;margin-bottom:10px;
  background:linear-gradient(135deg,#0e0e20 0%,#181832 100%);
  border:1px solid rgba(70,70,130,0.55);
  border-radius:14px;
  box-shadow:0 6px 28px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.04);
  color:#3f3;font-size:9px;flex-shrink:0;
}
#mute-btn{
  background:rgba(63,255,63,.07);
  border:1px solid rgba(63,255,63,.28);
  border-radius:9px;color:#3f3;
  font-size:15px;cursor:pointer;padding:6px 12px;
  font-family:inherit;
  transition:background .18s,box-shadow .18s;
}
#mute-btn:hover{
  background:rgba(63,255,63,.14);
  box-shadow:0 0 14px rgba(63,255,63,.18);
}
#mute-btn:active{background:rgba(63,255,63,.2);transform:scale(.95);}

#vol-slider{
  -webkit-appearance:none;appearance:none;
  width:120px;height:4px;
  background:linear-gradient(to right,#3f3 45%,#2a2a42 45%); /* updated by JS */
  border:none;border-radius:2px;cursor:pointer;outline:none;
}
#vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;
  background:#3f3;border:2px solid #0e0e20;
  border-radius:50%;cursor:pointer;
  box-shadow:0 0 8px rgba(63,255,63,.55);
}
#vol-slider::-moz-range-thumb{
  width:15px;height:15px;background:#3f3;
  border:2px solid #0e0e20;border-radius:50%;cursor:pointer;
  box-shadow:0 0 8px rgba(63,255,63,.55);
}
#vol-label{color:#3f3;min-width:38px;font-size:9px;opacity:.85;}

#vol-divider{
  width:1px;height:20px;
  background:rgba(255,255,255,.1);
  flex-shrink:0;
}

/* ── Scale wrapper ──────────────────────────────── */
#scale-wrapper{position:relative;flex-shrink:0;overflow:hidden;}

/* ── Game field ─────────────────────────────────── */
#game{
  position:absolute;top:0;left:0;
  width:1200px;height:600px;overflow:hidden;
  background:#00000f;
  border-left:4px solid #1a1a3a;border-right:4px solid #1a1a3a;
  border-top:4px solid #2a2a4a;border-bottom:4px solid #1a1a3a;
  transform-origin:top left;
}
/* CRT scanlines */
#game::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.18) 3px,rgba(0,0,0,.18) 4px);
}
/* CRT vignette */
#game::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:59;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55) 100%);
}

/* ── HUD ─────────────────────────────────────────── */
#hud{
  position:absolute;top:0;left:0;right:0;height:44px;
  background:#000;border-bottom:4px solid #222;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;z-index:20;
}
#score-display{color:#3f3;font-size:13px;text-shadow:0 0 6px #0f0;}
#best-display{color:#0cf;font-size:11px;text-shadow:0 0 6px #0af;}
#level-display{color:#ff3;font-size:11px;text-shadow:0 0 6px #ff0;}
#lives-display{color:#f44;font-size: 30px;text-shadow:0 0 8px #f00;letter-spacing: 4px;}
#pause-btn{
  background:rgba(255,220,0,.07);
  border:1px solid rgba(255,220,0,.28);
  border-radius:9px;color:#ff3;
  font-size:13px;font-family:inherit;
  min-width:58px;text-align:center;
  padding:6px 14px;cursor:pointer;letter-spacing:2px;
  text-shadow:0 0 6px #ff0;
  transition:background .18s,box-shadow .18s;
}
#pause-btn:hover{
  background:rgba(255,220,0,.14);
  box-shadow:0 0 14px rgba(255,220,0,.2);
}
#pause-btn:active{transform:scale(.95);}
#pause-btn.paused{
  width: 60px;
  color:#3f3;
  text-shadow:0 0 6px #0f0;
  border-color:rgba(63,255,63,.28);
  background:rgba(63,255,63,.07);
}

/* ── Pause overlay ── */
#pause-overlay{
  position:absolute;inset:0;background:rgba(0,0,10,.75);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  z-index:90;
}
#pause-overlay .pause-title{
  font-size:36px;color:#ff3;text-shadow:0 0 16px #ff0,0 0 40px #aa0;
  margin-bottom:16px;
}
#pause-overlay .pause-hint{font-size:11px;color: #ffffff;margin-top:12px;}

/* ── Sprites/elements ────────────────────────────── */
#lamps-group{position:absolute;top:0;left:0;}
.lamp{position:absolute;}
.lamp img,.lamp canvas{display:block;image-rendering:auto;object-fit:contain;}

#player{position:absolute;bottom:16px;}
#player img,#player canvas{display:block;image-rendering:auto;object-fit:contain;}
#player.hit-flash{animation:hitFlash .5s steps(3) forwards;}
@keyframes hitFlash{
  0%{filter:brightness(8) saturate(0);}
  50%{filter:brightness(1);}
  100%{filter:brightness(8) saturate(0);}
}

#projectiles{position:absolute;inset:0;pointer-events:none;overflow:visible;}
.steam,.beam,.explosion{position:absolute;overflow:visible;}
.beam img,.explosion img{display:block;}

/* ── Ground ──────────────────────────────────────── */
#ground{
  position:absolute;bottom:0;left:0;right:0;height:16px;
  background:#111;border-top:4px solid #333;
}

/* ── Overlay ─────────────────────────────────────── */
#overlay{
  position:absolute;inset:0;background:rgba(0,0,10,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:100;
}
#overlay h1{
  font-size:40px;color:#3f3;text-shadow:0 0 16px #0f0,0 0 40px #0a0;
  margin-bottom:24px;text-align:center;line-height:1.6;
}
.ov-sub{font-size:14px;color: #ffffff;margin-bottom:12px;text-align:center;}
.ov-score{font-size:18px;color:#ff3;text-shadow:0 0 8px #ff0;margin-bottom:24px;}
#nick-area{margin-bottom:28px;text-align:center;}
#nick-label{font-size:9px;color:#666;letter-spacing:3px;margin-bottom:12px;}
#nick-boxes{display:flex;justify-content:center;gap:10px;}
.nick-char{
  width:44px;height:58px;
  background:#000;
  border-top:3px solid #3f3;border-left:3px solid #3f3;
  border-bottom:3px solid #0a0;border-right:3px solid #0a0;
  color:#3f3;
  font-family:'Press Start 2P',monospace;font-size:26px;
  text-align:center;text-transform:uppercase;
  outline:none;caret-color:transparent;
  box-shadow:3px 3px 0 #050,0 0 10px rgba(0,255,0,0.15);
}
.nick-char:focus{
  border-top-color:#ff3;border-left-color:#ff3;
  border-bottom-color:#aa8800;border-right-color:#aa8800;
  color:#ff3;box-shadow:3px 3px 0 #554400,0 0 14px rgba(255,255,0,0.3);
}
#start-btn{
  padding:14px 44px;font-size:15px;font-family:inherit;
  background:#001a00;color:#3f3;
  border-top:4px solid #3f3;border-left:4px solid #3f3;
  border-bottom:4px solid #0a0;border-right:4px solid #0a0;
  cursor:pointer;
  box-shadow:4px 4px 0 #050;
  transition:none;
}
#start-btn:hover{background:#002200;}
#start-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #050;}
#rating{
  position:absolute;top:50%;right:40px;transform:translateY(-50%);
  width:260px;padding:16px 18px;
  border:3px solid #0a0;background:rgba(0,20,0,.6);
  box-shadow:3px 3px 0 #050;
}
#rating-title{font-size:12px;color:#3f3;text-align:center;margin-bottom:14px;letter-spacing:2px;}
#rating-list{list-style:none;margin:0;padding:0;}
#rating-list li{display:flex;font-size:10px;color:#ccc;line-height:2.2;}
#rating-list .r-pos{width:32px;color:#666;}
#rating-list .r-nick{flex:1;}
#rating-list .r-score{color:#ff3;}
#rating-list li.me,#rating-list li.me .r-pos{color:#ff3;}
#rating-list .rating-empty{justify-content:center;color:#666;}
/*.ov-hint{font-size:9px;color:#444;margin-top:18px;text-align:center;line-height:2.2;}*/

/* ── On-screen controls ──────────────────────────── */
#controls{
  margin-top:14px;display:flex;gap:16px;
  justify-content:center;flex-shrink:0;
}
.ctrl-btn{
  width:76px;height:76px;
  background:linear-gradient(155deg,#1c1c34 0%,#0d0d1e 100%);
  border:1px solid rgba(63,255,63,.22);
  border-radius:20px;
  color:#3f3;font-size:28px;font-family:inherit;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;user-select:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:
          0 8px 24px rgba(0,0,0,.65),
          inset 0 1px 0 rgba(255,255,255,.06);
  transition:box-shadow .15s,border-color .15s,transform .1s;
}
.ctrl-btn:hover{
  border-color:rgba(63,255,63,.4);
  box-shadow:
          0 8px 24px rgba(0,0,0,.65),
          0 0 22px rgba(63,255,63,.13),
          inset 0 1px 0 rgba(255,255,255,.06);
}
.ctrl-btn:active,.ctrl-btn.pressed{
  transform:scale(.92);
  box-shadow:
          0 2px 8px rgba(0,0,0,.65),
          0 0 14px rgba(63,255,63,.10),
          inset 0 2px 6px rgba(0,0,0,.4);
  background:linear-gradient(155deg,#0d0d1e 0%,#1c1c34 100%);
}
#btn-shoot{
  width:110px;color:#88ddff;
  border-color:rgba(136,221,255,.22);
}
#btn-shoot svg{
  filter:drop-shadow(0 0 5px rgba(136,221,255,.5));
  transition:filter .15s;
}
#btn-shoot:hover{
  border-color:rgba(136,221,255,.4);
  box-shadow:
          0 8px 24px rgba(0,0,0,.65),
          0 0 22px rgba(136,221,255,.13),
          inset 0 1px 0 rgba(255,255,255,.06);
}
#btn-shoot:hover svg{
  filter:drop-shadow(0 0 10px rgba(136,221,255,.75));
}
#btn-shoot:active,#btn-shoot.pressed{
  box-shadow:
          0 2px 8px rgba(0,0,0,.65),
          0 0 14px rgba(136,221,255,.10),
          inset 0 2px 6px rgba(0,0,0,.4);
}
#btn-shoot:active svg,#btn-shoot.pressed svg{
  filter:drop-shadow(0 0 3px rgba(136,221,255,.3));
}

/* ── Contest / replay ── */
.ov-error{font-size:11px;color:#f55;min-height:14px;margin-bottom:16px;text-align:center;line-height:1.8;}
.ov-error a{color:#ff3;text-decoration:none;margin-left:8px;}
#start-btn:disabled{opacity:.5;cursor:wait;}
.speed-btn{
  background:rgba(63,255,63,.06);border:1px solid rgba(63,255,63,.25);border-radius:9px;
  color:#3f3;font-family:inherit;font-size:9px;padding:6px 10px;cursor:pointer;
}
.speed-btn.active{background:rgba(255,220,0,.12);border-color:rgba(255,220,0,.4);color:#ff3;}
#replay-progress{color:#3f3;font-size:9px;min-width:90px;text-align:right;}

/* Contest page: links to the registration and the leaderboard pages */
#contest-links{display:flex;gap:28px;justify-content:center;margin-top:26px;}
#contest-links:empty{display:none;}
#contest-links a{font-size:11px;color:#ff3;text-decoration:none;text-shadow:0 0 6px rgba(255,255,0,.4);letter-spacing:1px;}
#contest-links a:hover{color:#fff;}