@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');
@import "tailwindcss";

@font-face {
  font-family: 'Starcraft';
  src: url('/fonts/starcraft-normal.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --sf-bg: #07090F;
  --sf-panel: #0A0E18;
  --sf-panel2: #0D1520;
  --sf-cyan: #00E5FF;
  --sf-blue: #00A8FF;
  --sf-alert: #FF3366;
  --sf-gold: #FFC000;
  --sf-green: #00FF88;
  --sf-border: rgba(0, 229, 255, 0.2);
  --sf-border-gold: rgba(255, 192, 0, 0.4);
}


* {
  box-sizing: border-box;
}

body {
  background-color: var(--sf-bg);
  color: #e0e8ff;
  font-family: 'Share Tech Mono', monospace;
  overflow: hidden;
}

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

.sf-logo {
  font-family: 'Starcraft', 'Chakra Petch', sans-serif;
}

/* Scanlines overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
}

/* Angled clip-path card */
.sf-card {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

/* Cyan glow */
.sf-glow {
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.3), inset 0 0 8px rgba(0, 229, 255, 0.05);
}

/* Gold glow */
.sf-glow-gold {
  box-shadow: 0 0 8px rgba(255, 192, 0, 0.3), inset 0 0 8px rgba(255, 192, 0, 0.05);
}

/* Pulse animation for dirty state */
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 192, 0, 0.4); }
  50% { box-shadow: 0 0 16px rgba(255, 192, 0, 0.8), 0 0 32px rgba(255, 192, 0, 0.3); }
}

.sf-pulse-gold {
  animation: pulse-gold 1.5s ease-in-out infinite;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--sf-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--sf-border);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sf-cyan);
}