@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700;900&family=JetBrains+Mono:wght@400;700&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

/* Custom scrollbar hiding for path selection timeline */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Base custom animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fadeIn {
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- ACTIVE GAMEPLAY RESPONSIVE OVERRIDES --- */

/* Hide traditional HUD panels, header, and footer in active gameplay */
body.game-active header,
body.game-active footer,
body.game-active .lg\:col-span-3 {
  display: none !important;
}

/* Let the main container fill the full screen layout without padding or gap */
body.game-active > div.w-full.h-full {
  max-width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100vh !important;
  width: 100vw !important;
  overflow: hidden !important;
}

/* Force main grid to be a full-size flex container */
body.game-active main {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  flex-grow: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Center stage layout centering rules */
body.game-active .lg\:col-span-6 {
  width: 100% !important;
  height: 100% !important;
  max-height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Maximize gameplay box fitting */
body.game-active #canvas-container {
  width: auto !important;
  height: 100% !important;
  max-height: 92vh !important; /* Keep within safe bounds of vertical viewport */
  aspect-ratio: 450/620 !important;
  box-sizing: border-box !important;
  margin: auto !important;
  flex-shrink: 1 !important;
}

/* Base body background & startup overlay styling with realistic brainrot characters */
body {
  background-image: linear-gradient(rgba(10, 15, 12, 0.75), rgba(8, 12, 10, 0.82)), url('./assets/images/green_brainrot_bg_1784105519683.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #fff7ed !important; /* Elegant bright warm cream/white text */
}

#start-overlay {
  background-image: linear-gradient(rgba(10, 15, 12, 0.75), rgba(8, 12, 10, 0.82)), url('./assets/images/green_brainrot_bg_1784105519683.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: #fff7ed !important;
}

/* Dark Theme overrides for standard classes */
.text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400, .text-indigo-200, .text-indigo-300, .text-slate-300\/80, .text-slate-300\/90, .text-white {
  color: #fff7ed !important;
}
.text-slate-400, .text-slate-500, .text-slate-400\/80 {
  color: #fdba74 !important; /* Warm light orange */
}

/* Headers, panels, sidebar cards, floating elements - DARK ORANGE THEME */
header, 
section, 
footer, 
#combo-box, 
#floating-hud > div, 
#floating-sidebars > div, 
#gameplay-left-flank, 
#gameplay-right-flank, 
#help-modal > div, 
#gameover-overlay > div, 
#start-overlay > div,
.bg-slate-900\/85,
.bg-slate-900,
.bg-slate-950 {
  background-color: rgba(20, 14, 10, 0.95) !important;
  border-color: rgba(249, 115, 22, 1.0) !important;
  border-width: 2px !important;
  color: #fff7ed !important;
  box-shadow: 0 10px 30px -5px rgba(249, 115, 22, 0.25), 0 8px 10px -6px rgba(249, 115, 22, 0.2) !important;
}

/* Inner block sub-containers */
.bg-slate-950\/40, 
.bg-slate-950\/30, 
.bg-slate-950\/60,
.bg-slate-950\/80,
.bg-slate-900\/80,
.bg-slate-950\/65 {
  background-color: rgba(43, 24, 16, 0.8) !important;
  border-color: rgba(249, 115, 22, 0.5) !important;
  color: #fff7ed !important;
}

/* Buttons styling inside the dark theme */
button:not(#btn-shake):not(#btn-floating-shake):not(#btn-start):not(#btn-restart-gameover) {
  background-color: rgba(43, 24, 16, 0.9) !important;
  border-color: rgba(249, 115, 22, 0.8) !important;
  color: #fdba74 !important;
}
button:not(#btn-shake):not(#btn-floating-shake):not(#btn-start):not(#btn-restart-gameover):hover {
  background-color: rgba(234, 88, 12, 0.9) !important;
  color: #ffffff !important;
  border-color: rgba(249, 115, 22, 1.0) !important;
}

/* Disabled powerup/button styling */
button[disabled] {
  background-color: rgba(28, 25, 23, 0.6) !important;
  color: rgba(168, 162, 158, 0.4) !important;
  border-color: rgba(120, 113, 108, 0.4) !important;
  opacity: 0.65 !important;
}

/* Accent texts like Sky, Purple and Indigo to make them readable and vibrant */
.text-sky-400 {
  color: #38bdf8 !important; /* Sky 400 */
}
.text-indigo-400 {
  color: #f97316 !important; /* Orange 500 */
}
.text-purple-400 {
  color: #c084fc !important; /* Purple 400 */
}
.text-rose-400 {
  color: #f87171 !important; /* Rose 400 */
}

/* Custom progress bars and sliders */
.bg-slate-800 {
  background-color: rgba(43, 24, 16, 0.8) !important;
}

/* Title and Logo Gradient overrides */
h1.bg-gradient-to-r {
  background-image: linear-gradient(to right, #f97316, #ea580c, #f59e0b) !important;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Spawner line and specific visual frames */
#canvas-container {
  background-image: linear-gradient(rgba(15, 23, 42, 0.80), rgba(15, 23, 42, 0.85)), url('./assets/images/green_brainrot_bg_1784105519683.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  border: 4px solid #f97316 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px -5px rgba(249, 115, 22, 0.3), 0 8px 10px -6px rgba(249, 115, 22, 0.2) !important;
}

/* Highlights and icons */
.ring-slate-800, .border-slate-800, .border-slate-850 {
  border-color: rgba(251, 146, 60, 1.0) !important;
}

/* Hide overflow risk warning box entirely */
#warning-hud {
  display: none !important;
}

/* Display floating widgets in active gameplay state */
body.game-active #floating-hud {
  display: flex !important;
}
body.game-active #floating-sidebars {
  display: flex !important;
}
body.game-active #gameplay-left-flank {
  display: flex !important;
}
body.game-active #gameplay-right-flank {
  display: flex !important;
}