@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&display=swap');

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

:root{
  --primary:#00d4ff;
  --secondary:#ff6b35;
  --accent:#ffd700;
  --green:#00ff88;
  --red:#ff3366;
  --yellow:#ffcc00;
  --dark:#0a0e1a;
  --dark2:#111827;
  --dark3:#1a2235;
  --glow-blue:0 0 20px #00d4ff,0 0 40px #00d4ff44;
  --glow-green:0 0 20px #00ff88,0 0 40px #00ff8844;
  --glow-red:0 0 20px #ff3366,0 0 40px #ff336644;
}

body{
  background:var(--dark);
  font-family:'Rajdhani',sans-serif;
  overflow:hidden;
  height:100vh;
  width:100vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* ── SCREENS ── */
.screen{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  z-index:100;
  background:var(--dark);
  transition:opacity .4s ease, visibility .4s ease;
}
.screen.hidden{opacity:0;visibility:hidden;pointer-events:none;}

/* ── START SCREEN ── */
#startScreen{
  background:radial-gradient(ellipse at 50% 30%,#0d2040 0%,#0a0e1a 70%);
  overflow:hidden;
}
#startScreen::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2300d4ff11' stroke-width='1'%3E%3Cpath d='M30 0v60M0 30h60'/%3E%3C/g%3E%3C/svg%3E");
  animation:gridMove 20s linear infinite;
}
@keyframes gridMove{from{background-position:0 0;}to{background-position:60px 60px;}}

.start-logo{
  position:relative;z-index:2;
  text-align:center;margin-bottom:30px;
}
.start-logo .game-title{
  font-family:'Orbitron',monospace;
  font-size:clamp(28px,6vw,72px);
  font-weight:900;
  background:linear-gradient(135deg,#00d4ff,#00ff88,#ffd700);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:none;
  filter:drop-shadow(0 0 20px #00d4ff88);
  letter-spacing:4px;
  animation:titlePulse 3s ease-in-out infinite;
}
@keyframes titlePulse{0%,100%{filter:drop-shadow(0 0 20px #00d4ff88);}50%{filter:drop-shadow(0 0 40px #00d4ffcc);}}
.start-logo .subtitle{
  font-family:'Orbitron',monospace;
  font-size:clamp(12px,2vw,18px);
  color:#00d4ff88;
  letter-spacing:8px;
  margin-top:8px;
}

.thumbnail-container{
  position:relative;z-index:2;
  width:min(380px,85vw);
  border-radius:16px;
  overflow:hidden;
  border:2px solid #00d4ff44;
  box-shadow:0 0 40px #00d4ff33,0 20px 60px #00000088;
  margin-bottom:30px;
}
.thumbnail-container img{width:100%;display:block;}
.thumb-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,#0a0e1aaa 100%);
}

.start-stats{
  display:flex;gap:20px;margin-bottom:30px;z-index:2;
  flex-wrap:wrap;justify-content:center;
}
.stat-badge{
  background:#ffffff0a;
  border:1px solid #00d4ff33;
  border-radius:12px;
  padding:10px 20px;
  text-align:center;
  backdrop-filter:blur(10px);
}
.stat-badge .val{
  font-family:'Orbitron',monospace;
  font-size:22px;font-weight:700;
  color:var(--primary);
}
.stat-badge .lbl{font-size:11px;color:#ffffff66;letter-spacing:2px;}

.btn-start{
  position:relative;z-index:2;
  font-family:'Orbitron',monospace;
  font-size:clamp(14px,2.5vw,20px);
  font-weight:700;
  letter-spacing:4px;
  padding:16px 50px;
  background:linear-gradient(135deg,#00d4ff,#0066ff);
  color:#fff;
  border:none;
  border-radius:50px;
  cursor:pointer;
  box-shadow:0 0 30px #00d4ff66,0 8px 20px #00000066;
  transition:all .3s ease;
  animation:btnPulse 2s ease-in-out infinite;
}
.btn-start:hover{transform:scale(1.06);box-shadow:0 0 50px #00d4ffaa;}
@keyframes btnPulse{0%,100%{box-shadow:0 0 30px #00d4ff66,0 8px 20px #00000066;}50%{box-shadow:0 0 50px #00d4ffaa,0 8px 20px #00000066;}}

.how-to{
  position:relative;z-index:2;
  margin-top:20px;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;max-width:500px;width:90vw;
}
.how-card{
  background:#ffffff08;
  border:1px solid #ffffff11;
  border-radius:12px;
  padding:14px 10px;
  text-align:center;
  backdrop-filter:blur(8px);
}
.how-card .icon{font-size:28px;margin-bottom:6px;}
.how-card .tip{font-size:12px;color:#ffffffaa;line-height:1.4;}

/* ── HUD ── */
#hud{
  position:fixed;top:0;left:0;right:0;
  z-index:50;
  display:flex;align-items:center;
  padding:8px 16px;gap:12px;
  background:linear-gradient(180deg,#0a0e1aee 0%,transparent 100%);
  pointer-events:none;
}
.hud-block{
  background:#ffffff0a;
  border:1px solid #ffffff15;
  border-radius:10px;
  padding:6px 10px;
  display:flex;flex-direction:column;align-items:center;
  backdrop-filter:blur(10px);
  min-width:60px;
}
.hud-block .hud-val{
  font-family:'Orbitron',monospace;
  font-size:clamp(13px,2.5vw,20px);
  font-weight:700;
  color:var(--primary);
}
.hud-block .hud-lbl{font-size:10px;color:#ffffff66;letter-spacing:1px;}
.hud-spacer{flex:1;}

#levelBadge{
  font-family:'Orbitron',monospace;
  font-size:clamp(11px,2vw,16px);
  font-weight:700;
  color:var(--accent);
  background:#ffd70011;
  border:1px solid #ffd70044;
  border-radius:8px;
  padding:6px 14px;
}

#pauseBtn{
  pointer-events:all;
  background:#ffffff0a;
  border:1px solid #ffffff22;
  border-radius:10px;
  padding:8px 14px;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  transition:all .2s;
  backdrop-filter:blur(10px);
}
#pauseBtn:hover{background:#ffffff22;border-color:#00d4ff66;}

/* ── SIGNAL PANEL ── */
#signalPanel{
  position:fixed;bottom:20px;right:20px;
  z-index:50;
  display:flex;flex-direction:column;
  align-items:flex-end;
  padding:15px;
  background:rgba(10,14,26,0.8);
  border-radius:24px;
  backdrop-filter:blur(15px);
  border:1px solid rgba(0,212,255,0.2);
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  gap:12px;
}
#signalControls{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.signal-group{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;
}
.signal-label{
  font-size:10px;color:#ffffff77;
  font-family:'Orbitron',monospace;letter-spacing:1px;
}
.signal-btns{display:flex;gap:6px;}

.sig-btn{
  width:64px;
  height:54px;
  border-radius:14px;
  border:2px solid transparent;
  cursor:pointer;
  font-size:10px;
  font-family:'Orbitron',monospace;
  font-weight:700;
  letter-spacing:0.5px;
  transition:all .2s ease;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  position:relative;overflow:hidden;
  white-space:nowrap;
  padding:5px;
}
.sig-btn .sig-icon{font-size:16px;line-height:1;}
.sig-btn.red{background:rgba(255,51,102,0.15);border-color:rgba(255,51,102,0.3);color:#ff3366;}
.sig-btn.green{background:rgba(0,255,136,0.15);border-color:rgba(0,255,136,0.3);color:#00ff88;}
.sig-btn.red.active{background:#ff3366;border-color:#ff3366;color:#fff;box-shadow:var(--glow-red);text-shadow:0 1px 2px rgba(0,0,0,0.5);}
.sig-btn.green.active{background:#00ff88;border-color:#00ff88;color:#111;box-shadow:var(--glow-green);}
.sig-btn:hover{transform:scale(1.05);filter:brightness(1.2);}

#soundToggle{
  background:#ffffff0a;
  border:1px solid #ffffff22;
  border-radius:10px;
  padding:8px 14px;
  color:#fff;font-size:20px;
  cursor:pointer;
  transition:all .2s;
  backdrop-filter:blur(10px);
  pointer-events:all;
  align-self:center;
}

/* ── GAME CANVAS ── */
#gameCanvas{
  display:block;
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  z-index:1;
}

/* ── PAUSE SCREEN ── */
#pauseScreen{
  background:#0a0e1add;
  backdrop-filter:blur(16px);
}
.pause-box{
  background:linear-gradient(135deg,#111827,#1a2235);
  border:1px solid #00d4ff33;
  border-radius:24px;
  padding:40px;
  text-align:center;
  box-shadow:0 0 60px #00d4ff22,0 20px 60px #00000088;
  min-width:280px;
}
.pause-title{
  font-family:'Orbitron',monospace;
  font-size:28px;font-weight:700;
  color:var(--primary);
  margin-bottom:30px;
  text-shadow:var(--glow-blue);
}
.pause-btns{display:flex;flex-direction:column;gap:12px;}
.p-btn{
  font-family:'Orbitron',monospace;
  font-size:14px;font-weight:700;letter-spacing:2px;
  padding:14px 30px;
  border-radius:12px;
  border:none;cursor:pointer;
  transition:all .2s ease;
}
.p-btn.resume{background:linear-gradient(135deg,#00d4ff,#0066ff);color:#fff;}
.p-btn.restart{background:#ffffff11;border:1px solid #ffffff22;color:#fff;}
.p-btn.menu{background:#ffffff08;border:1px solid #ffffff11;color:#ffffff88;}
.p-btn:hover{transform:scale(1.04);}

/* ── GAME OVER ── */
#gameOverScreen{
  background:#0a0e1add;
  backdrop-filter:blur(16px);
}
.go-box{
  background:linear-gradient(135deg,#1a0a14,#1a2235);
  border:1px solid #ff336644;
  border-radius:24px;
  padding:40px;
  text-align:center;
  box-shadow:0 0 60px #ff336622,0 20px 60px #00000088;
  min-width:300px;max-width:90vw;
}
.go-title{
  font-family:'Orbitron',monospace;
  font-size:36px;font-weight:900;
  color:var(--red);
  text-shadow:var(--glow-red);
  margin-bottom:8px;
}
.go-reason{color:#ffffff88;font-size:14px;margin-bottom:20px;}
.go-scores{display:flex;gap:20px;justify-content:center;margin-bottom:24px;flex-wrap:wrap;}
.go-score-item{text-align:center;}
.go-score-item .gsv{
  font-family:'Orbitron',monospace;
  font-size:28px;font-weight:700;color:var(--primary);
}
.go-score-item .gsl{font-size:11px;color:#ffffff66;letter-spacing:2px;}

/* ── LEVEL COMPLETE ── */
#levelCompleteScreen{
  background:#0a0e1add;
  backdrop-filter:blur(16px);
}
.lc-box{
  background:linear-gradient(135deg,#0a1a0a,#1a2235);
  border:1px solid #00ff8844;
  border-radius:24px;
  padding:40px;
  text-align:center;
  box-shadow:0 0 60px #00ff8822,0 20px 60px #00000088;
  min-width:300px;max-width:90vw;
}
.lc-title{
  font-family:'Orbitron',monospace;
  font-size:clamp(22px,5vw,36px);font-weight:900;
  color:var(--green);
  text-shadow:var(--glow-green);
  margin-bottom:8px;
}
.stars{font-size:36px;margin:10px 0;}
.lc-score{
  font-family:'Orbitron',monospace;
  font-size:22px;color:var(--accent);
  margin-bottom:20px;
}

/* ── COMBO TOAST ── */
#comboToast{
  position:fixed;top:80px;left:50%;
  transform:translateX(-50%);
  font-family:'Orbitron',monospace;
  font-size:clamp(18px,4vw,28px);
  font-weight:900;
  color:var(--accent);
  text-shadow:0 0 20px var(--accent);
  z-index:200;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}
#comboToast.show{opacity:1;}

/* ── TIMER BAR ── */
#timerBar{
  position:fixed;top:0;left:0;right:0;
  height:4px;z-index:60;
  background:#ffffff11;
}
#timerFill{
  height:100%;
  background:linear-gradient(90deg,#00ff88,#00d4ff,#ffd700);
  transition:width .5s linear;
  box-shadow:0 0 8px #00d4ff88;
}

/* ── MINI MAP ── */
#miniMap{
  position:fixed;bottom:120px;right:12px;
  width:80px;height:80px;
  background:#ffffff08;
  border:1px solid #ffffff22;
  border-radius:8px;
  z-index:50;
  overflow:hidden;
  display:none;
}

/* ── EMERGENCY ALERT ── */
#emergencyAlert{
  position:fixed;top:70px;right:12px;
  z-index:60;
  background:linear-gradient(135deg,#ff000022,#ff000011);
  border:1px solid #ff000066;
  border-radius:12px;
  padding:10px 16px;
  font-family:'Orbitron',monospace;
  font-size:12px;color:#ff4444;
  display:none;
  animation:alertBlink 1s ease-in-out infinite;
}
@keyframes alertBlink{0%,100%{opacity:1;}50%{opacity:.5;}}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:0;}

/* ── RESPONSIVE ── */
@media(max-width:800px){
  #hud{
    padding:6px 8px;
    gap:6px;
  }
  .hud-block{
    min-width:50px;
    padding:4px 6px;
  }
  .hud-block .hud-val{font-size:12px;}
  .hud-block .hud-lbl{font-size:8px;}
  #levelBadge{padding:4px 8px; font-size:10px;}
  #pauseBtn{padding:6px 10px; font-size:14px;}

  #signalPanel{
    right:8px;bottom:8px;
    padding:8px;
    gap:6px;
    border-radius:16px;
  }
  .sig-btn{
    width:52px;height:44px;
    font-size:8px;
    border-radius:10px;
  }
  .sig-btn .sig-icon{font-size:12px;}
  .signal-label{font-size:7px;margin-bottom:0px;}
  #signalControls{
    grid-template-columns:repeat(2, 1fr);
    gap:4px;
  }
  #soundToggle{
    padding:6px 10px;
    font-size:16px;
    margin-top:0;
  }
}
@media(max-width:400px){
  .hud-block{min-width:45px;}
  #levelBadge{display:none;}
}