:root{
  --w: 100vw;
  --h: 100vh;
  --ui: rgba(0,0,0,.55);
  --btn: #ff7a2f;
  --btn2:#ffffff;
  --txt:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
html, body {
  margin:0; padding:0; width:100%; height:100%; background:#000; overflow:hidden;
}
#app{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:#000;
}
.screen{
  position:absolute; inset:0; width:100%; height:100%;
  display:none;
}
.screen.active{ display:block; }

/* Intro video */
#introVideo video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#000;
}
#introVideo .skip-intro{
  position:absolute;
  right: min(3vw, 28px);
  bottom: min(3vw, 28px);
  padding:12px 18px;
  font-size:16px;
  border-radius:999px;
  border:none;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  z-index:120;
  letter-spacing:.5px;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  transition:transform .15s ease, background .15s ease;
}
#introVideo .skip-intro:hover,
#introVideo .skip-intro:focus-visible{
  transform:translateY(-2px);
  background:rgba(0,0,0,.8);
}
#introVideo .skip-intro:focus-visible{
  outline:2px solid rgba(255,255,255,.8);
  outline-offset:3px;
}

/* Intro still */
#introStill{
  background:#000;
}
#introStill img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}

.btn{
  position:absolute; left:50%; transform:translateX(-50%);
  padding:16px 28px; border-radius:16px;
  background:var(--btn); color:var(--btn2);
  font-weight:800; letter-spacing:.5px;
  border:none; cursor:pointer; font-size:24px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  user-select:none; -webkit-user-select:none;
  transition: transform .08s ease, filter .08s ease;
}
.btn:active{ transform:translateX(-50%) scale(.96); filter:brightness(.95); }

#playBtn{ bottom:12vh; }

/* Game screen */
#gameScreen{
  background:#000;
}
#gameBg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none;
}
#gameCanvas{
  position:absolute; inset:0; width:100%; height:100%;
  touch-action:none;
}
#animationOverlay{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* HUD */
#hud{
  position:absolute; top: env(safe-area-inset-top, 0px);
  left:0; right:0; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
  color:var(--txt); font-weight:800; font-size:22px; text-shadow:0 2px 6px rgba(0,0,0,.6);
  pointer-events:none;
}
#lives{ font-size:22px;
color:#ff0000;}

#shootBtn{
  bottom: 0; top: auto; left: 0; right: 0;
  transform: none;
  width: 100%; height: 60px;
  border-radius: 0;
  font-size: 26px;
  background: linear-gradient(180deg, #ff9b4e, #ff6a1c);
  border: 2px solid rgba(255,255,255,.6);
  border-left: none;
  border-right: none;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#powerBarWrap{
  position:absolute; bottom:16vh; left:50%; transform:translateX(-50%);
  width:56vw; max-width:520px; min-width:260px; height:14px;
  background:rgba(255,255,255,.25); border-radius:999px;
  overflow:hidden; display:none;
}
#powerBar{
  height:100%; width:0%;
  background:linear-gradient(90deg, #7CFF7C, #FFD866, #FF6B6B);
  border-radius:999px;
}

/* Modal */
.modal{
  position:absolute; inset:0; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.modal.active{ display:flex; }
.card{
  width:min(92vw, 520px);
  background:#0f0f0f; color:#fff; border-radius:18px; padding:18px 18px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.08);
}
.card h2{ margin:0 0 8px; font-size:22px; }
.card p{ margin:8px 0; line-height:1.35; font-size:16px; opacity:.95; }
.card .btn{
  position:relative; left:auto; transform:none; bottom:auto; margin-top:12px; width:100%;
  font-size:20px; padding:12px 16px; border-radius:12px;
}

/* Game over */
#gameOverList{
  margin-top:10px; background:rgba(255,255,255,.04);
  border-radius:12px; padding:8px 10px; font-size:16px;
}
.row{ display:flex; justify-content:space-between; padding:6px 2px; }
.row + .row{ border-top:1px dashed rgba(255,255,255,.08); }

#initialsWrap{
  margin-top:10px; display:none;
}
#initials{
  width:100%; font-size:22px; padding:8px 8px; border-radius:10px;
  border:1px solid rgba(255,255,255,.2); background:#141414; color:#fff; text-transform:uppercase;
  letter-spacing:6px; text-align:center; font-weight:900;
}
#smallNote{ font-size:12px; opacity:.75; margin-top:6px; }