@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Space+Grotesk:wght@400;500;700&display=swap');

  :root{
    --navy: #0B1023;
    --purple: #2D1B4E;
    --pink: #FF3CAC;
    --yellow: #FFD23F;
    --mint: #06D6A0;
    --ink: #E8E6F0;
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0; padding:0; height:100%; overflow:hidden;
    background: radial-gradient(ellipse at 50% 0%, var(--purple) 0%, var(--navy) 65%);
    font-family:'Space Grotesk', sans-serif;
    color:var(--ink);
    -webkit-user-select:none; user-select:none;
  }

  #stage{ position:relative; width:100vw; height:100vh; }

  canvas{ display:block; width:100%; height:100%; cursor:crosshair; }

  .hud{
    position:absolute; top:0; left:0; right:0;
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:18px 26px; pointer-events:none;
    z-index:10;
  }

  .brand{
    font-family:'Bungee', cursive;
    font-size:clamp(14px, 2.2vw, 24px);
    color:var(--yellow);
    text-shadow: 0 0 12px rgba(255,210,63,0.5), 2px 2px 0 rgba(0,0,0,0.35);
    letter-spacing:1px;
    line-height:1.2;
  }
  .brand span{ color:var(--pink); }
  .brand .sub{
    font-family:'Space Grotesk', sans-serif;
    font-size:clamp(9px, 1.2vw, 14px);
    opacity:0.7;
    letter-spacing:0.5px;
    display:block;
    font-weight:400;
  }

  .stat-block{
    display:flex; gap:14px;
  }

  .stat{
    background:rgba(11,16,35,0.55);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;
    padding:8px 16px;
    text-align:center;
    backdrop-filter: blur(4px);
  }
  .stat .num{ font-family:'Bungee', cursive; font-size:20px; color:var(--mint); }
  .stat .lbl{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; opacity:0.7; }

  #ammoStat .num{ color:var(--pink); }

  /* ---- RELOAD BUTTON ---- */
  .reload-btn{
    position:absolute;
    top:132px;
    left:50%;
    transform:translateX(-50%) scale(0.8);
    font-family:'Bungee', cursive;
    font-size:14px;
    padding:10px 24px;
    border:none;
    border-radius:10px;
    background:var(--mint);
    color:var(--navy);
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    box-shadow:0 4px 0 #04a37f;
    transition: opacity 0.25s, transform 0.25s;
    z-index:15;
  }
  .reload-btn.active{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) scale(1);
    animation: reloadPulse 1s ease-in-out infinite;
  }
  .reload-btn:active{
    transform:translateX(-50%) scale(0.94);
    box-shadow:0 1px 0 #04a37f;
  }
  @keyframes reloadPulse{
    0%,100%{ box-shadow:0 4px 0 #04a37f, 0 0 0px rgba(6,214,160,0.5); }
    50%{ box-shadow:0 4px 0 #04a37f, 0 0 22px rgba(6,214,160,0.9); }
  }

  .toast{
    position:absolute; top:80px; left:50%; transform:translateX(-50%);
    font-family:'Bungee', cursive; font-size:26px; color:var(--yellow);
    text-shadow: 0 0 14px rgba(255,210,63,0.7);
    opacity:0; pointer-events:none; transition: opacity 0.2s, transform 0.4s;
    z-index:15;
  }

  .overlay{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:18px;
    background:rgba(11,16,35,0.86);
    text-align:center;
    padding:20px;
    z-index:20;
  }
  .overlay h1{
    font-family:'Bungee', cursive;
    font-size:clamp(28px, 5vw, 46px);
    margin:0;
    color:var(--pink);
    text-shadow: 0 0 20px rgba(255,60,172,0.6);
  }
  .overlay p{ max-width:480px; line-height:1.5; opacity:0.85; margin:0; }
  .overlay .final{ font-family:'Bungee', cursive; font-size:20px; color:var(--mint); }

  /* ---- DEVELOPER CREDIT / DEDICATION ---- */
  .credit-line{
    margin-top:6px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:clamp(11px, 1.3vw, 14px);
    letter-spacing:0.6px;
    background: linear-gradient(90deg, var(--pink), var(--yellow), var(--mint), var(--pink));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: creditShine 5s linear infinite;
    text-shadow: 0 0 18px rgba(255,210,63,0.25);
    opacity:0.92;
  }
  @keyframes creditShine{
    0%{ background-position: 0% 50%; }
    100%{ background-position: 300% 50%; }
  }

  button{
    font-family:'Bungee', cursive;
    font-size:16px;
    background:var(--mint);
    color:var(--navy);
    border:none;
    border-radius:10px;
    padding:14px 30px;
    cursor:pointer;
    box-shadow:0 4px 0 #04a37f;
    transition: transform 0.08s;
  }
  button:active{ transform:translateY(3px); box-shadow:0 1px 0 #04a37f; }

  /* ---- IMPROVED FOOTER ---- */
  .hint{
    position:absolute;
    bottom:22px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(11,16,35,0.7);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:10px 28px;
    font-family:'Space Grotesk', monospace;
    font-size:clamp(10px, 1.1vw, 13px);
    color:rgba(255,255,255,0.5);
    letter-spacing:0.6px;
    white-space:nowrap;
    z-index:10;
    pointer-events:none;
    box-shadow:0 4px 30px rgba(0,0,0,0.5);
    user-select:none;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .hint.hint-hidden{
    opacity:0;
    transform:translateX(-50%) translateY(40px);
  }
  .hint::before{
    content:'> ';
    color:var(--mint);
    font-weight:700;
    opacity:0.7;
  }

  /* small screens: allow wrapping & smaller padding */
  @media (max-width: 720px){
    .hint{
      white-space:normal;
      padding:8px 18px;
      max-width:92vw;
      font-size:10px;
      bottom:14px;
    }
  }

  #salvoTimer {
    position:absolute;
    top:80px;
    right:20px;
    background:rgba(6,214,160,0.15);
    border:1px solid var(--mint);
    border-radius:8px;
    padding:6px 14px;
    font-family:'Bungee', cursive;
    font-size:16px;
    color:var(--mint);
    opacity:0;
    transition: opacity 0.3s;
    pointer-events:none;
    z-index:15;
  }
  #salvoTimer.show { opacity:1; }

  /* ---- GHAURI ANNOUNCEMENT ---- */
  #ghauriOverlay {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    z-index:30;
    opacity:0;
    transition: opacity 0.1s;
  }
  #ghauriOverlay.show {
    opacity:1;
  }
  #ghauriText {
    font-family:'Bungee', cursive;
    font-size:clamp(44px, 10vw, 100px);
    color:var(--yellow);
    text-shadow:
      0 0 30px rgba(255,210,63,0.9),
      0 0 60px rgba(255,60,60,0.7),
      0 0 100px rgba(255,60,60,0.4),
      0 0 140px rgba(255,60,60,0.2);
    transform: scale(0.3);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align:center;
    letter-spacing:4px;
  }
  #ghauriOverlay.show #ghauriText {
    transform: scale(1);
  }
  #ghauriSub {
    font-size:clamp(16px, 3vw, 28px);
    color:var(--mint);
    text-shadow: 0 0 20px rgba(6,214,160,0.5);
    margin-top:8px;
    letter-spacing:2px;
    opacity:0.8;
  }
  #ghauriOverlay .glow-ring {
    position:absolute;
    border-radius:50%;
    border:3px solid rgba(255,210,63,0.3);
    animation: ringPulse 1.2s ease-out infinite;
    pointer-events:none;
  }
  @keyframes ringPulse {
    0% { width:20px; height:20px; opacity:0.8; }
    100% { width:500px; height:500px; opacity:0; }
  }

  /* ---- SEEKER MISSILE ARRIVAL ANNOUNCEMENT ---- */
  #seekerOverlay {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    z-index:30;
    opacity:0;
    transition: opacity 0.1s;
  }
  #seekerOverlay.show {
    opacity:1;
  }
  #seekerText {
    font-family:'Bungee', cursive;
    font-size:clamp(30px, 7vw, 68px);
    color:var(--mint);
    text-shadow:
      0 0 30px rgba(6,214,160,0.9),
      0 0 60px rgba(6,214,160,0.6),
      0 0 100px rgba(6,214,160,0.3);
    transform: scale(0.3);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align:center;
    letter-spacing:2px;
  }
  #seekerOverlay.show #seekerText {
    transform: scale(1);
  }
  #seekerSub {
    font-size:clamp(14px, 2.6vw, 24px);
    color:var(--yellow);
    text-shadow: 0 0 20px rgba(255,210,63,0.5);
    margin-top:8px;
    letter-spacing:1.5px;
    opacity:0.85;
  }
  #seekerOverlay .glow-ring {
    position:absolute;
    border-radius:50%;
    border:3px solid rgba(6,214,160,0.35);
    animation: ringPulse 1.2s ease-out infinite;
    pointer-events:none;
  }

  /* ---- STAGE CLEAR / LEVEL ANNOUNCEMENT ---- */
  #stageClearOverlay {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    z-index:25;
    opacity:0;
    transition: opacity 0.25s;
  }
  #stageClearOverlay.show { opacity:1; }
  .stage-clear-inner {
    text-align:center;
    transform: scale(0.4);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #stageClearOverlay.show .stage-clear-inner {
    transform: scale(1);
  }
  .stage-clear-title {
    font-family:'Bungee', cursive;
    font-size:clamp(24px, 5vw, 48px);
    color:var(--yellow);
    text-shadow: 0 0 24px rgba(255,210,63,0.7), 0 0 60px rgba(255,210,63,0.3);
    letter-spacing:3px;
  }
  .stage-clear-level {
    margin-top:10px;
    font-family:'Bungee', cursive;
    font-size:clamp(20px, 4vw, 36px);
    color:var(--mint);
    text-shadow: 0 0 18px rgba(6,214,160,0.6);
    letter-spacing:2px;
  }
  .stage-clear-msg{
    margin-top:14px;
    font-family:'Space Grotesk', sans-serif;
    font-size:clamp(12px, 1.6vw, 16px);
    font-style:italic;
    color:rgba(232,230,240,0.75);
    letter-spacing:0.3px;
    max-width:70vw;
    margin-left:auto;
    margin-right:auto;
  }