/* RandyAI Alarm Frenzy — modern theme overlay */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --bg-color: #0f172a !important;
  --panel-bg: rgba(15, 23, 42, 0.85) !important;
  --border-color: rgba(153, 211, 173, 0.25) !important;
  --text-color: #e2e8f0 !important;
  --accent-color: #99d3ad !important;
  --danger-color: #f87171 !important;
  --warning-color: #fbbf24 !important;
  --advisory-color: #67e8f9 !important;
  --success-color: #5abd84 !important;
  --font-main: 'Inter', system-ui, sans-serif !important;
}

body {
  font-family: var(--font-main) !important;
}

#app {
  background: linear-gradient(165deg, #0f172a 0%, #1e293b 45%, #0f172a 100%) !important;
  background-image:
    linear-gradient(rgba(153, 211, 173, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153, 211, 173, 0.03) 1px, transparent 1px),
    linear-gradient(165deg, #0f172a 0%, #1e293b 45%, #0f172a 100%) !important;
  background-size: 24px 24px, 24px 24px, 100% 100% !important;
}

.hud {
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(153, 211, 173, 0.2) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
  gap: 28px !important;
}

.hud-item .label {
  color: #94a3b8 !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
}

.hud-item .value {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  background: rgba(15, 23, 42, 0.9) !important;
  color: #99d3ad !important;
  border: 1px solid rgba(153, 211, 173, 0.35) !important;
  border-radius: 8px !important;
  text-shadow: 0 0 12px rgba(153, 211, 173, 0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#game-canvas {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.75)),
    url('images/pipe_network_background_1768778263666.png') !important;
  background-size: cover !important;
  background-position: center !important;
}

.overlay {
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(20px) !important;
}

.overlay h1,
.overlay h2,
#start-screen h1,
#game-over-screen h2 {
  font-size: clamp(2rem, 6vw, 3.5rem) !important;
  letter-spacing: 0.08em !important;
  background: linear-gradient(135deg, #99d3ad 0%, #5abd84 50%, #e2e8f0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 700 !important;
}

.overlay p,
#start-screen p {
  color: #94a3b8 !important;
  font-size: 1rem !important;
  max-width: 520px !important;
  text-align: center !important;
  line-height: 1.6 !important;
}

.instructions {
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(153, 211, 173, 0.15) !important;
  border-radius: 16px !important;
  padding: 20px !important;
}

.instruction {
  background: rgba(15, 23, 42, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  border-radius: 10px !important;
  color: #cbd5e1 !important;
}

.primary-btn {
  background: linear-gradient(180deg, #99d3ad 0%, #5abd84 100%) !important;
  border: none !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  border-radius: 10px !important;
  padding: 16px 36px !important;
  box-shadow: 0 4px 20px rgba(90, 189, 132, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.primary-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(90, 189, 132, 0.5) !important;
  color: #0f172a !important;
}

.alarm {
  border-radius: 12px !important;
  border: 2px solid rgba(15, 23, 42, 0.9) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

.alarm-header {
  background: #0f172a !important;
  border-bottom: none !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.06em !important;
}

.alarm-title {
  font-family: var(--font-main) !important;
}

.type-badge,
.critical-badge,
.nuisance-badge,
.false-badge,
.time-badge {
  border-radius: 6px !important;
}

@media (max-width: 768px) {
  .hud {
    background: rgba(15, 23, 42, 0.95) !important;
    padding: 10px !important;
  }

  .hud-item .value {
    font-size: 1.1rem !important;
  }

  .alarm {
    width: 240px !important;
  }
}