@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,400;0,600;0,700;1,700&family=JetBrains+Mono:wght@400;500;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Rubik+Glitch&family=Permanent+Marker&family=Syne:wght@700;800&display=swap');

:root {
  --primary-red: #ff2a4b;
  --neon-red: #ff1744;
  --crime-yellow: #ffd000;
  --dark-bg: #06080d;
  --card-bg: rgba(14, 19, 32, 0.75);
  --card-border: rgba(255, 255, 255, 0.08);
  --accent-cyan: #00e5ff;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--dark-bg);
  color: #f1f5f9;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(255, 42, 75, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(255, 208, 0, 0.05) 0%, transparent 35%),
    radial-gradient(circle at 50% 85%, rgba(0, 229, 255, 0.04) 0%, transparent 45%),
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 36px 36px, 36px 36px;
}

.heading-font {
  font-family: 'Syne', 'Chakra Petch', sans-serif;
}

.mono-font {
  font-family: 'JetBrains Mono', monospace;
}

.stamp-font {
  font-family: 'Permanent Marker', cursive;
}

/* Caution Tape Animation */
.caution-tape {
  background: repeating-linear-gradient(
    -45deg,
    #ffd000,
    #ffd000 18px,
    #05070a 18px,
    #05070a 36px
  );
  box-shadow: 0 4px 20px rgba(255, 208, 0, 0.25);
}

.caution-tape-red {
  background: repeating-linear-gradient(
    -45deg,
    #ff2a4b,
    #ff2a4b 18px,
    #0a0709 18px,
    #0a0709 36px
  );
  box-shadow: 0 4px 25px rgba(255, 42, 75, 0.35);
}

/* Police Beacon Glow */
@keyframes sirenGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 42, 75, 0.6), inset 0 0 15px rgba(255, 42, 75, 0.3);
    border-color: rgba(255, 42, 75, 0.8);
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 42, 75, 0.95), inset 0 0 25px rgba(255, 42, 75, 0.7);
    border-color: #ff5252;
  }
}

.siren-glow {
  animation: sirenGlow 1.2s infinite ease-in-out;
}

/* Ticker text slide */
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.ticker-track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

/* Glassmorphism & Cyber Crime Cards */
.crime-card {
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.82) 0%, rgba(9, 13, 22, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 35px -10px rgba(0, 0, 0, 0.8), inset 0 1px 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.crime-card:hover {
  border-color: rgba(255, 42, 75, 0.6);
  transform: translateY(-5px);
  box-shadow: 0 20px 45px -10px rgba(255, 42, 75, 0.25), inset 0 1px 1px 0 rgba(255, 42, 75, 0.2);
}

.crime-card.resolved {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(145deg, rgba(6, 30, 24, 0.7) 0%, rgba(8, 18, 16, 0.85) 100%);
}

.crime-card.resolved:hover {
  border-color: #10b981;
  box-shadow: 0 20px 45px -10px rgba(16, 185, 129, 0.25);
}

/* Folder Card */
.folder-card {
  background: linear-gradient(145deg, rgba(19, 26, 44, 0.85) 0%, rgba(10, 14, 25, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(12px);
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.7);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.folder-card:hover {
  border-color: #ffd000;
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -10px rgba(255, 208, 0, 0.2);
}

.folder-tab {
  position: absolute;
  top: -13px;
  left: 20px;
  background: #182238;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px 8px 0 0;
  padding: 3px 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

/* Stamp Effect */
.stamp {
  display: inline-block;
  text-transform: uppercase;
  font-weight: 900;
  border-radius: 6px;
  letter-spacing: 2px;
  mask-image: radial-gradient(circle at center, black 65%, transparent 100%);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stamp-red {
  color: #ff334b;
  border: 3px dashed #ff334b;
  transform: rotate(-7deg);
  text-shadow: 0 0 8px rgba(255, 51, 75, 0.6);
  box-shadow: 0 0 16px rgba(255, 51, 75, 0.35), inset 0 0 16px rgba(255, 51, 75, 0.2);
}

.stamp-green {
  color: #10b981;
  border: 3px dashed #10b981;
  transform: rotate(6deg);
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35), inset 0 0 16px rgba(16, 185, 129, 0.2);
}

/* Wanted Poster Canvas Styling */
#posterExportArea {
  width: 500px;
  background: #0b0f1a;
  border: 4px solid #ff2a4b;
  position: relative;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.95);
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(255, 42, 75, 0.2) 0%, transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 20px 20px, 20px 20px;
}

/* Animated Radar Pulse */
@keyframes radarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.radar-sweep {
  animation: radarSweep 3.5s linear infinite;
}

/* Sound Wave Equalizer */
@keyframes eqBar1 {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}
@keyframes eqBar2 {
  0%, 100% { height: 14px; }
  50% { height: 6px; }
}
@keyframes eqBar3 {
  0%, 100% { height: 8px; }
  50% { height: 18px; }
}

.eq-bar-1 { animation: eqBar1 0.7s ease-in-out infinite; }
.eq-bar-2 { animation: eqBar2 0.5s ease-in-out infinite; }
.eq-bar-3 { animation: eqBar3 0.8s ease-in-out infinite; }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #06080d;
}
::-webkit-scrollbar-thumb {
  background: #1c2438;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff2a4b;
}