/* style.css - Command & Conquer: Red Alert Tactical CRT HUD */

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

:root {
  --bg-color: #03060a;
  --panel-bg: rgba(6, 12, 18, 0.92);
  --border-green: rgba(34, 197, 94, 0.45);
  --neon-green: #22c55e;
  --neon-red: #ef4444;
  --neon-silver: #cbd5e1;
  --neon-amber: #f59e0b;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background-color: var(--bg-color);
  color: #e2e8f0;
  font-family: 'Silkscreen', 'VT323', monospace;
  letter-spacing: 0.5px;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.mono {
  font-family: 'Silkscreen', 'VT323', monospace;
}

/* Red Alert Military Glass Panel */
.hud-panel {
  background: rgba(5, 11, 18, 0.95);
  border: 1px solid var(--border-green);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), inset 0 0 10px rgba(34, 197, 94, 0.06);
}

/* Glowing text */
.glow-text-green {
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.85);
}
.glow-text-gold {
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.85);
}
.glow-text-blue {
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.85);
}
.glow-text-red {
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.85);
}
.glow-text-silver {
  text-shadow: 0 0 8px rgba(203, 213, 225, 0.85);
}

/* Screen Shake */
@keyframes screen-rumble {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 3px); }
  40% { transform: translate(4px, -3px); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(3px, 2px); }
  100% { transform: translate(0, 0); }
}
.shake-active {
  animation: screen-rumble 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Red Alert Action Buttons */
.btn-launch {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  border: 1px solid #ef4444;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4), inset 0 0 8px rgba(255, 255, 255, 0.15);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-launch:hover {
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.7);
  filter: brightness(1.2);
}
.btn-launch:active {
  transform: scale(0.98);
}

.btn-fortify {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%);
  border: 1px solid #22c55e;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.35);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-fortify:hover {
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(34, 197, 94, 0.7);
  filter: brightness(1.2);
}
.btn-fortify:active {
  transform: scale(0.98);
}

/* Ticker item animation */
@keyframes ticker-slide {
  from { opacity: 0; transform: translateX(-15px); }
  to { opacity: 1; transform: translateX(0); }
}
.ticker-anim {
  animation: ticker-slide 0.2s ease-out forwards;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  background: rgba(34, 197, 94, 0.4);
  border-radius: 2px;
}

/* Red Alert CRT Scanline Overlay */
.scanlines::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(34, 197, 94, 0.018), rgba(0, 0, 0, 0), rgba(239, 68, 68, 0.018));
  z-index: 10;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
  opacity: 0.75;
}