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

:root {
  --bg: #07070d;
  --bg2: #0c0c18;
  --green: #00ff41;
  --blue: #00d4ff;
  --red: #ff3344;
  --yellow: #ffcc00;
  --orange: #ff8800;
  --purple: #b266ff;
  --dim: #334455;
  --text: #c0d0e0;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Space Grotesk', sans-serif;
}

html, body { 
  width:100%; height:100%; overflow:hidden; 
  background: var(--bg); color: var(--text);
  font-family: var(--mono);
}

#scanlines {
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
}

#canvas {
  position:fixed; top:0; left:0; width:100%; height:100%; z-index:0;
}

#ui-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%; z-index:1;
  display:flex; flex-direction:column;
}

/* === GLITCH EFFECT === */
.glitch {
  position:relative;
  animation: glitch-skew 4s infinite linear alternate-reverse;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position:absolute; top:0; left:0; width:100%; height:100%;
  overflow:hidden;
}
.glitch::before {
  color: var(--blue);
  animation: glitch-1 2s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.glitch::after {
  color: var(--red);
  animation: glitch-2 3s infinite linear alternate-reverse;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}
@keyframes glitch-1 {
  0%,90%,100% { transform:translate(0); }
  92% { transform:translate(-3px,1px); }
  94% { transform:translate(3px,-1px); }
  96% { transform:translate(-1px,2px); }
}
@keyframes glitch-2 {
  0%,88%,100% { transform:translate(0); }
  90% { transform:translate(2px,-1px); }
  93% { transform:translate(-2px,1px); }
  96% { transform:translate(1px,2px); }
}
@keyframes glitch-skew {
  0%,95%,100% { transform:skewX(0deg); }
  96% { transform:skewX(0.5deg); }
  97% { transform:skewX(-0.3deg); }
  98% { transform:skewX(0.2deg); }
}

/* === HUD === */
#hud {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; background: rgba(7,7,13,0.92);
  border-bottom: 1px solid rgba(0,212,255,0.15);
  flex-shrink:0; min-height:64px; gap:12px;
}
#hud-left { flex:0 0 auto; }
#title {
  font-family: var(--sans); font-weight:800; font-size:14px;
  color: var(--green); letter-spacing:2px; text-transform:uppercase;
}
#wave-display {
  font-size:11px; color: var(--blue); margin-top:2px; letter-spacing:1px;
}
#wave-num { color: var(--yellow); font-weight:700; }
#difficulty-label { color: var(--orange); }
#hud-center { display:flex; gap:24px; flex:1; justify-content:center; }
.hud-stat { text-align:center; min-width:100px; }
.hud-stat-label { font-size:9px; letter-spacing:2px; color: var(--dim); margin-bottom:2px; }
.hud-stat-value { font-size:22px; font-weight:800; color: var(--green); }
.hud-stat-value.uptime { color: var(--blue); }
.hud-stat-value.budget { color: var(--yellow); }
.hud-bar { width:100%; height:4px; background: rgba(255,255,255,0.06); border-radius:2px; margin-top:3px; }
.hud-bar-fill { height:100%; border-radius:2px; transition: width 0.3s, background 0.3s; }
#uptime-bar { width:100%; background: var(--blue); }
#budget-bar { width:100%; background: var(--yellow); }

#hud-right { flex:0 0 auto; }
.gauge-group { display:flex; gap:8px; }
.gauge { display:flex; align-items:center; gap:4px; }
.gauge-label { font-size:9px; color: var(--dim); letter-spacing:1px; width:28px; }
.gauge-bar { width:48px; height:8px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; }
.gauge-fill { height:100%; border-radius:4px; background: var(--green); transition: width 0.3s, background 0.3s; }

/* === MAIN AREA === */
#main-area {
  flex:1; display:flex; overflow:hidden; min-height:0;
}
#game-zone {
  flex:1; position:relative; overflow:hidden;
}
#pipeline-labels {
  position:absolute; bottom:8px; left:0; right:0; pointer-events:none;
}
.pipe-label {
  position:absolute; font-size:9px; letter-spacing:2px; color: rgba(0,212,255,0.3);
  transform:translateX(-50%);
}

/* === HAZARD CONTAINER === */
#hazard-container {
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:10;
}
.hazard-card {
  pointer-events:all;
  background: rgba(10,10,20,0.95);
  border: 2px solid var(--red);
  border-radius:8px; padding:20px 28px;
  text-align:center; max-width:380px;
  animation: hazard-in 0.3s ease-out;
  box-shadow: 0 0 40px rgba(255,51,68,0.3), inset 0 0 20px rgba(255,51,68,0.05);
}
.hazard-card.warn { border-color: var(--yellow); box-shadow: 0 0 40px rgba(255,204,0,0.2); }
.hazard-card.info { border-color: var(--blue); box-shadow: 0 0 40px rgba(0,212,255,0.2); }
.hazard-card.money { border-color: var(--orange); box-shadow: 0 0 40px rgba(255,136,0,0.2); }
.hazard-title { font-size:18px; font-weight:800; margin-bottom:8px; }
.hazard-card .hazard-title { color: var(--red); }
.hazard-card.warn .hazard-title { color: var(--yellow); }
.hazard-card.info .hazard-title { color: var(--blue); }
.hazard-card.money .hazard-title { color: var(--orange); }
.hazard-desc { font-size:12px; color: var(--text); margin-bottom:14px; line-height:1.5; }
.hazard-btn {
  background: transparent; border: 1px solid var(--green);
  color: var(--green); padding:8px 20px; font-family:var(--mono);
  font-size:12px; cursor:pointer; border-radius:4px; margin:4px;
  transition: all 0.15s;
}
.hazard-btn:hover { background: var(--green); color: var(--bg); }
.hazard-btn.wrong { border-color: var(--red); color: var(--red); }
.hazard-btn.wrong:hover { background: var(--red); color: #fff; }
.hazard-progress {
  width:100%; height:6px; background:rgba(255,255,255,0.1); border-radius:3px; margin-top:10px; overflow:hidden;
}
.hazard-progress-fill {
  height:100%; background: var(--red); border-radius:3px; transition: width 0.1s linear;
}
.hazard-counter { font-size:28px; font-weight:800; color:var(--green); margin:8px 0; }
.hazard-slider {
  -webkit-appearance:none; width:100%; height:6px; background:rgba(255,255,255,0.1);
  border-radius:3px; outline:none; margin:10px 0;
}
.hazard-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px; background:var(--blue);
  border-radius:50%; cursor:pointer;
}
@keyframes hazard-in {
  from { transform:scale(0.8); opacity:0; }
  to { transform:scale(1); opacity:1; }
}

/* === EVENT LOG === */
#event-log {
  width:280px; background: rgba(0,0,0,0.85);
  border-left:1px solid rgba(0,255,65,0.15);
  display:flex; flex-direction:column; flex-shrink:0;
}
#log-header {
  padding:8px 12px; font-size:11px; letter-spacing:2px;
  color: var(--green); border-bottom:1px solid rgba(0,255,65,0.1);
}
#log-content {
  flex:1; overflow-y:auto; padding:6px 10px; font-size:10px;
  line-height:1.6; color: var(--green); opacity:0.8;
}
#log-content::-webkit-scrollbar { width:4px; }
#log-content::-webkit-scrollbar-thumb { background: rgba(0,255,65,0.2); border-radius:2px; }
.log-entry { margin-bottom:1px; word-break:break-all; }
.log-entry.error { color: var(--red); }
.log-entry.warn { color: var(--yellow); }
.log-entry.success { color: var(--green); }
.log-entry.info { color: var(--blue); }
.log-entry.special { color: var(--purple); }

/* === CONTROLS === */
#controls {
  display:flex; gap:12px; padding:8px 16px; 
  background: rgba(7,7,13,0.92); border-top:1px solid rgba(0,212,255,0.15);
  flex-shrink:0; align-items:flex-start; flex-wrap:wrap;
}
.ctrl-group { flex:1; min-width:140px; }
.ctrl-label { font-size:9px; letter-spacing:2px; color:var(--dim); margin-bottom:4px; }
.ctrl-buttons { display:flex; gap:4px; flex-wrap:wrap; }
.ctrl-btn {
  background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1);
  color: var(--text); padding:5px 10px; font-family:var(--mono); font-size:10px;
  cursor:pointer; border-radius:3px; transition: all 0.15s; white-space:nowrap;
}
.ctrl-btn:hover { border-color: var(--blue); color: var(--blue); }
.ctrl-btn.active { border-color: var(--green); color: var(--green); background: rgba(0,255,65,0.05); }
.ctrl-btn.emergency { border-color: rgba(255,136,0,0.3); color: var(--orange); }
.ctrl-btn.emergency:hover { border-color: var(--orange); background: rgba(255,136,0,0.1); }
.ctrl-btn:disabled { opacity:0.3; cursor:not-allowed; }

/* === MENU === */
#menu-screen {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background: rgba(7,7,13,0.97); z-index:100;
  display:flex; align-items:center; justify-content:center;
}
#menu-content { text-align:center; max-width:500px; padding:20px; }
.menu-title {
  font-family: var(--sans); font-size:28px; font-weight:800;
  color: var(--green); letter-spacing:4px; margin-bottom:16px;
}
.menu-sub { font-size:13px; color: var(--text); line-height:1.6; margin-bottom:28px; }
.menu-sub .dim { color: var(--dim); font-size:11px; }
.difficulty-select { display:flex; gap:12px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
.diff-btn {
  background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.1);
  padding:16px 20px; border-radius:6px; cursor:pointer; text-align:center;
  transition: all 0.2s; min-width:130px; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.diff-btn:hover, .diff-btn.selected {
  border-color: var(--green); background: rgba(0,255,65,0.03);
}
.diff-icon { font-size:28px; }
.diff-name { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--green); }
.diff-desc { font-family:var(--mono); font-size:9px; color:var(--dim); }
.menu-stats { font-size:11px; color: var(--dim); }
.menu-stats b { color: var(--blue); }
.menu-stats span { margin:0 12px; }

/* === GAME OVER === */
#gameover-screen {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background: rgba(7,7,13,0.97); z-index:100;
  display:flex; align-items:center; justify-content:center;
  animation: fade-in 0.5s;
}
@keyframes fade-in { from{opacity:0}to{opacity:1} }
#gameover-content { text-align:center; max-width:460px; padding:20px; }
.gameover-title {
  font-family: var(--sans); font-size:36px; font-weight:800;
  color: var(--red); letter-spacing:6px; margin-bottom:8px;
}
.gameover-reason { font-size:12px; color: var(--yellow); margin-bottom:20px; }
.gameover-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.go-stat {
  background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
  padding:10px; border-radius:4px; text-align:left;
}
.go-label { font-size:9px; color:var(--dim); letter-spacing:1px; display:block; margin-bottom:2px; }
.go-val { font-size:16px; font-weight:700; color:var(--green); }
.go-error { font-size:11px; color:var(--yellow); }
.gameover-achievements { margin:12px 0; }
.achievement-badge {
  display:inline-block; background:rgba(178,102,255,0.1);
  border:1px solid var(--purple); border-radius:20px;
  padding:4px 12px; font-size:10px; color:var(--purple); margin:3px;
}
.gameover-quote { font-size:11px; color:var(--dim); font-style:italic; margin:12px 0; line-height:1.5; }
.play-again-btn {
  background: transparent; border:2px solid var(--green); color:var(--green);
  padding:12px 32px; font-family:var(--mono); font-size:14px; font-weight:700;
  cursor:pointer; border-radius:4px; margin-top:8px; letter-spacing:2px;
  transition: all 0.2s;
}
.play-again-btn:hover { background: var(--green); color: var(--bg); }
.footer-link { margin-top:16px; }
.footer-link a { color: var(--dim); font-size:10px; text-decoration:none; letter-spacing:1px; }
.footer-link a:hover { color: var(--blue); }

/* === RESPONSIVE === */
@media (max-width:768px) {
  #hud { flex-wrap:wrap; padding:6px 10px; min-height:auto; }
  #hud-center { gap:12px; }
  .hud-stat-value { font-size:16px; }
  #event-log { display:none; }
  #title { font-size:11px; }
  #controls { padding:6px 10px; }
  .ctrl-btn { padding:4px 8px; font-size:9px; }
  .menu-title { font-size:20px; letter-spacing:2px; }
  .difficulty-select { flex-direction:column; align-items:center; }
  .diff-btn { min-width:200px; }
}