/* ============================================
   CYBER NIGHT THEME - SMKN 2 JEMBER
   Global Theme Override
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
  --cn-bg-primary: #0a0e27;
  --cn-bg-secondary: #0d1b3e;
  --cn-bg-tertiary: #132952;
  --cn-bg-card: rgba(13, 27, 62, 0.9);
  --cn-bg-card-hover: rgba(20, 40, 80, 0.95);
  --cn-border: rgba(58, 197, 201, 0.25);
  --cn-border-bright: rgba(58, 197, 201, 0.5);
  --cn-accent: #3ac5c9;
  --cn-accent-glow: rgba(58, 197, 201, 0.3);
  --cn-accent2: #64d2ff;
  --cn-text: #e0e8f0;
  --cn-text-muted: rgba(200, 215, 230, 0.6);
  --cn-heading: #ffffff;
  --cn-success: #00d140;
  --cn-danger: #ff4757;
  --cn-warning: #ffa502;
  --cn-font-display: 'Orbitron', monospace;
  --cn-font-body: 'Rajdhani', sans-serif;
  --cn-font-mono: 'Share Tech Mono', monospace;
}

/* ===== GLOBAL BODY ===== */
body, [data-bs-theme="dark"], [data-bs-theme="light"] {
  background: linear-gradient(180deg, #0a0e27 0%, #0d1b3e 40%, #132952 100%) !important;
  background-attachment: fixed !important;
  color: var(--cn-text) !important;
  font-family: var(--cn-font-body) !important;
  min-height: 100vh;
}

/* ===== ANIMATED STARS BACKGROUND ===== */


@keyframes starsShimmer {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* All content above stars */


/* ===== NAVBAR ===== */
.navbar {
  background: rgba(10, 14, 39, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--cn-border) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
  padding: 0.6rem 0 !important;
}

.navbar .navbar-brand {
  font-family: var(--cn-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: var(--cn-accent) !important;
  text-shadow: 0 0 15px var(--cn-accent-glow);
}

.navbar .navbar-brand:hover {
  color: var(--cn-accent2) !important;
}

.navbar .navbar-brand img.ctf_logo {
  filter: drop-shadow(0 0 8px var(--cn-accent-glow));
}

.navbar .nav-link {
  font-family: var(--cn-font-body) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  padding: 0.5rem 0.9rem !important;
  border-radius: 8px !important;
  margin: 0 2px !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--cn-accent) !important;
  background: rgba(58, 197, 201, 0.1) !important;
  text-shadow: 0 0 10px var(--cn-accent-glow);
}

.navbar .nav-link i {
  color: var(--cn-accent) !important;
}

.navbar-toggler {
  border-color: var(--cn-border) !important;
}

.navbar-toggler-icon {
  filter: brightness(1.5);
}

.navbar .dropdown-menu {
  background: rgba(13, 27, 62, 0.98) !important;
  border: 1px solid var(--cn-border) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.navbar .dropdown-item {
  color: var(--cn-text) !important;
  font-family: var(--cn-font-body) !important;
  transition: all 0.2s ease !important;
  border-radius: 8px !important;
  margin: 2px 4px !important;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item.bg-primary {
  background: rgba(58, 197, 201, 0.15) !important;
  color: var(--cn-accent) !important;
}

/* ===== JUMBOTRON / PAGE HEADERS ===== */
.jumbotron {
  background: linear-gradient(135deg, rgba(13, 27, 62, 0.8), rgba(19, 41, 82, 0.6)) !important;
  border-bottom: 1px solid var(--cn-border) !important;
  padding: 3rem 0 2rem !important;
  margin-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}

.jumbotron::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(58, 197, 201, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(100, 210, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.jumbotron h1, .jumbotron h2, .jumbotron h3 {
  font-family: var(--cn-font-display) !important;
  color: var(--cn-heading) !important;
  text-shadow: 0 0 20px var(--cn-accent-glow) !important;
  letter-spacing: 2px !important;
  position: relative;
}

.jumbotron h1 {
  font-weight: 800 !important;
  font-size: 2.2rem !important;
}

/* ===== CONTAINER ===== */
.container {
  position: relative;
  z-index: 1;
}

main[role="main"] .container {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

/* ===== CARDS & PANELS ===== */
.card, .modal-content {
  background: var(--cn-bg-card) !important;
  border: 1px solid var(--cn-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important;
}

.card:hover {
  border-color: var(--cn-border-bright) !important;
  box-shadow: 0 8px 32px rgba(58, 197, 201, 0.15) !important;
}

.modal-header {
  border-bottom: 1px solid var(--cn-border) !important;
}

.modal-footer {
  border-top: 1px solid var(--cn-border) !important;
}

/* ===== CHALLENGE BUTTONS ===== */
.challenge-button, .btn-dark {
  background: var(--cn-bg-card) !important;
  border: 1px solid var(--cn-border) !important;
  border-radius: 14px !important;
  color: var(--cn-text) !important;
  font-family: var(--cn-font-body) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.challenge-button::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(58, 197, 201, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.challenge-button:hover {
  border-color: var(--cn-accent) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(58, 197, 201, 0.2) !important;
  color: var(--cn-accent) !important;
}

.challenge-button:hover::before {
  opacity: 1;
}

.challenge-button .challenge-inner p {
  font-family: var(--cn-font-display) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.5px;
}

.challenge-button .challenge-inner span {
  font-family: var(--cn-font-mono) !important;
  color: var(--cn-accent) !important;
  font-size: 1.3rem !important;
  text-shadow: 0 0 10px var(--cn-accent-glow);
}

/* Solved challenges */
.challenge-solved {
  border-color: var(--cn-success) !important;
  background: rgba(0, 209, 64, 0.08) !important;
}

.challenge-solved::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 8px; right: 10px;
  color: var(--cn-success);
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Category headers */
.category-header h3 {
  font-family: var(--cn-font-display) !important;
  font-weight: 700 !important;
  color: var(--cn-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  font-size: 1.1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid var(--cn-border) !important;
  text-shadow: 0 0 15px var(--cn-accent-glow);
}

/* ===== TABLES ===== */
.table {
  color: var(--cn-text) !important;
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: rgba(58, 197, 201, 0.04) !important;
  --bs-table-hover-bg: rgba(58, 197, 201, 0.08) !important;
  border-color: var(--cn-border) !important;
}

.table thead th {
  font-family: var(--cn-font-display) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--cn-accent) !important;
  border-bottom: 2px solid var(--cn-border-bright) !important;
  padding: 1rem 0.75rem !important;
}

.table td {
  font-family: var(--cn-font-body) !important;
  font-size: 0.95rem !important;
  padding: 0.8rem 0.75rem !important;
  border-color: rgba(58, 197, 201, 0.1) !important;
  vertical-align: middle !important;
}

.table tbody tr {
  transition: background 0.2s ease !important;
}

.table a {
  color: var(--cn-accent2) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.table a:hover {
  color: var(--cn-accent) !important;
  text-shadow: 0 0 8px var(--cn-accent-glow);
}

/* ===== FORMS ===== */
.form-control, .form-select {
  background: rgba(10, 14, 39, 0.8) !important;
  border: 1px solid var(--cn-border) !important;
  border-radius: 10px !important;
  color: var(--cn-text) !important;
  font-family: var(--cn-font-body) !important;
  font-size: 1rem !important;
  padding: 0.7rem 1rem !important;
  transition: all 0.3s ease !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--cn-accent) !important;
  box-shadow: 0 0 0 3px var(--cn-accent-glow), 0 0 20px rgba(58, 197, 201, 0.1) !important;
  background: rgba(13, 27, 62, 0.9) !important;
  color: #fff !important;
}

.form-control::placeholder {
  color: var(--cn-text-muted) !important;
}

.form-label, label {
  font-family: var(--cn-font-body) !important;
  font-weight: 600 !important;
  color: var(--cn-text) !important;
  letter-spacing: 0.5px !important;
}

.form-text, small.text-muted {
  color: var(--cn-text-muted) !important;
}

/* ===== BUTTONS ===== */
.btn-primary {
  background: linear-gradient(135deg, #3ac5c9, #1a8fa3) !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: var(--cn-font-display) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 0.6rem 1.5rem !important;
  box-shadow: 0 4px 15px rgba(58, 197, 201, 0.3) !important;
  transition: all 0.3s ease !important;
  color: #fff !important;
}

.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #4dd8dc, #2ba5b8) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(58, 197, 201, 0.4) !important;
}

.btn-outline-primary {
  color: var(--cn-accent) !important;
  border: 2px solid var(--cn-border-bright) !important;
  border-radius: 10px !important;
  font-family: var(--cn-font-display) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 1px !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

.btn-outline-primary:hover {
  background: rgba(58, 197, 201, 0.1) !important;
  border-color: var(--cn-accent) !important;
  color: var(--cn-accent) !important;
  transform: translateY(-2px) !important;
}

.btn-outline-secondary {
  color: var(--cn-text) !important;
  border-color: var(--cn-border) !important;
  border-radius: 10px !important;
  font-family: var(--cn-font-body) !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

.btn-outline-secondary:hover {
  background: rgba(58, 197, 201, 0.1) !important;
  border-color: var(--cn-accent) !important;
  color: var(--cn-accent) !important;
}

.btn-secondary {
  background: rgba(58, 197, 201, 0.15) !important;
  border: 1px solid var(--cn-border) !important;
  color: var(--cn-text) !important;
  border-radius: 10px !important;
  font-family: var(--cn-font-body) !important;
}

.btn-info {
  background: linear-gradient(135deg, rgba(58, 197, 201, 0.2), rgba(100, 210, 255, 0.2)) !important;
  border: 1px solid var(--cn-border-bright) !important;
  color: var(--cn-accent2) !important;
  border-radius: 10px !important;
}

.btn-info:hover {
  background: linear-gradient(135deg, rgba(58, 197, 201, 0.3), rgba(100, 210, 255, 0.3)) !important;
}

.btn-close {
  filter: invert(1) !important;
}

/* ===== NAV TABS & PILLS ===== */
.nav-tabs {
  border-bottom: 2px solid var(--cn-border) !important;
}

.nav-tabs .nav-link {
  font-family: var(--cn-font-body) !important;
  font-weight: 600 !important;
  color: var(--cn-text-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: all 0.3s ease !important;
  border-radius: 0 !important;
}

.nav-tabs .nav-link:hover {
  color: var(--cn-accent) !important;
  border-bottom-color: var(--cn-accent) !important;
}

.nav-tabs .nav-link.active {
  background: transparent !important;
  color: var(--cn-accent) !important;
  border-bottom-color: var(--cn-accent) !important;
  text-shadow: 0 0 10px var(--cn-accent-glow);
}

.nav-pills .nav-link {
  font-family: var(--cn-font-body) !important;
  font-weight: 600 !important;
  color: var(--cn-text-muted) !important;
  border: 1px solid var(--cn-border) !important;
  border-radius: 10px !important;
  margin: 3px !important;
  transition: all 0.3s ease !important;
}

.nav-pills .nav-link:hover {
  background: rgba(58, 197, 201, 0.1) !important;
  color: var(--cn-accent) !important;
}

.nav-pills .nav-link.active {
  background: linear-gradient(135deg, #3ac5c9, #1a8fa3) !important;
  border-color: var(--cn-accent) !important;
  color: #fff !important;
}

/* ===== BADGES ===== */
.badge {
  font-family: var(--cn-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border-radius: 8px !important;
}

.badge.bg-primary, .bg-primary {
  background: linear-gradient(135deg, #3ac5c9, #1a8fa3) !important;
}

.badge.bg-secondary, .bg-secondary {
  background: rgba(58, 197, 201, 0.15) !important;
  color: var(--cn-accent) !important;
}

.badge.bg-info {
  background: rgba(100, 210, 255, 0.2) !important;
  color: var(--cn-accent2) !important;
}

.badge.bg-danger, .badge-notification {
  background: var(--cn-danger) !important;
}

/* ===== ALERTS ===== */
.alert {
  border-radius: 12px !important;
  border: 1px solid !important;
  font-family: var(--cn-font-body) !important;
  backdrop-filter: blur(10px) !important;
}

.alert-success {
  background: rgba(0, 209, 64, 0.1) !important;
  border-color: rgba(0, 209, 64, 0.3) !important;
  color: #00d140 !important;
}

.alert-danger {
  background: rgba(255, 71, 87, 0.1) !important;
  border-color: rgba(255, 71, 87, 0.3) !important;
  color: #ff4757 !important;
}

.alert-info {
  background: rgba(58, 197, 201, 0.1) !important;
  border-color: rgba(58, 197, 201, 0.3) !important;
  color: var(--cn-accent) !important;
}

.alert-warning {
  background: rgba(255, 165, 2, 0.1) !important;
  border-color: rgba(255, 165, 2, 0.3) !important;
  color: var(--cn-warning) !important;
}

/* ===== PROGRESS BARS ===== */
.progress {
  background: rgba(10, 14, 39, 0.6) !important;
  border-radius: 10px !important;
  border: 1px solid var(--cn-border) !important;
  height: 1.2rem !important;
  overflow: hidden;
}

/* ===== SCOREBOARD GRAPH ===== */
#score-graph {
  background: var(--cn-bg-card) !important;
  border: 1px solid var(--cn-border) !important;
  border-radius: 16px !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
}

/* ===== TEXT UTILITIES ===== */
.text-muted {
  color: var(--cn-text-muted) !important;
}

.text-secondary {
  color: var(--cn-text-muted) !important;
}

a {
  color: var(--cn-accent2) !important;
  transition: all 0.2s ease !important;
}

a:hover {
  color: var(--cn-accent) !important;
  text-shadow: 0 0 8px var(--cn-accent-glow);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cn-font-display) !important;
  color: var(--cn-heading) !important;
}

h3 {
  font-weight: 700 !important;
}

/* ===== FOOTER ===== */
.footer {
  background: rgba(10, 14, 39, 0.7) !important;
  border-top: 1px solid var(--cn-border) !important;
  padding: 1.5rem 0 !important;
  backdrop-filter: blur(10px) !important;
}

.footer a, .footer small {
  color: var(--cn-text-muted) !important;
  font-family: var(--cn-font-body) !important;
}

/* ===== MODAL ===== */
.modal-backdrop {
  background: rgba(5, 8, 20, 0.8) !important;
}

.modal-content {
  background: rgba(13, 27, 62, 0.98) !important;
}

.modal-header {
  font-family: var(--cn-font-display) !important;
}

.modal-header .modal-title,
.modal-header h5 {
  font-family: var(--cn-font-display) !important;
  color: var(--cn-accent) !important;
}

/* ===== CHALLENGE MODAL SPECIFICS ===== */
.challenge-name {
  font-family: var(--cn-font-display) !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 0 15px var(--cn-accent-glow);
}

.challenge-value {
  font-family: var(--cn-font-mono) !important;
  color: var(--cn-accent) !important;
  text-shadow: 0 0 10px var(--cn-accent-glow);
}

.challenge-tag {
  background: rgba(58, 197, 201, 0.15) !important;
  color: var(--cn-accent) !important;
  border: 1px solid var(--cn-border) !important;
  border-radius: 8px !important;
  font-family: var(--cn-font-body) !important;
  padding: 0.3rem 0.8rem !important;
}

.challenge-desc {
  color: var(--cn-text) !important;
  font-family: var(--cn-font-body) !important;
  line-height: 1.7 !important;
}

.challenge-input {
  font-family: var(--cn-font-mono) !important;
  font-size: 1rem !important;
}

.challenge-submit {
  font-family: var(--cn-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  border-color: var(--cn-accent) !important;
  color: var(--cn-accent) !important;
}

.challenge-submit:hover {
  background: var(--cn-accent) !important;
  color: #0a0e27 !important;
}

/* ===== SPINNER ===== */
.spinner, .fa-spinner, .fa-circle-notch {
  color: var(--cn-accent) !important;
}

/* ===== HORIZONTAL RULES ===== */
hr {
  border-color: var(--cn-border) !important;
  opacity: 0.5 !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cn-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--cn-border-bright);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cn-accent);
}

/* ===== PAGE SELECT ===== */
.page-select {
  background: rgba(10, 14, 39, 0.8) !important;
  border: 1px solid var(--cn-border) !important;
  border-radius: 8px !important;
  color: var(--cn-text) !important;
  padding: 0.3rem 0.6rem !important;
  font-family: var(--cn-font-body) !important;
}

/* ===== DETAILS / HINTS ===== */
details {
  background: rgba(58, 197, 201, 0.05) !important;
  border: 1px solid var(--cn-border) !important;
  border-radius: 10px !important;
  padding: 0.8rem 1rem !important;
  margin-bottom: 0.5rem !important;
}

details summary {
  font-family: var(--cn-font-body) !important;
  font-weight: 600 !important;
  color: var(--cn-accent2) !important;
  cursor: pointer;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.jumbotron {
  animation: fadeInUp 0.6s ease-out;
}

main .container {
  animation: fadeInUp 0.8s ease-out;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .jumbotron h1 {
    font-size: 1.6rem !important;
  }
  
  .navbar .nav-link {
    padding: 0.6rem 1rem !important;
  }
}



/* ===== STARS BACKGROUND (safe version) ===== */
#cyber-stars {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 20% 50%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 30% 10%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 60% 80%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 80% 60%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 15% 85%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 35% 90%, rgba(255,255,255,0.4), transparent),
    radial-gradient(2px 2px at 45% 15%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 55% 55%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 65% 25%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 75% 75%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 85% 5%, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 95% 85%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 5% 65%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 48% 48%, rgba(255,255,255,0.5), transparent);
  animation: starsShimmer 8s ease-in-out infinite alternate;
}

/* ===== CRITICAL MODAL FIX ===== */
.modal {
  pointer-events: auto !important;
}

.modal.show {
  pointer-events: auto !important;
}

.modal-dialog {
  pointer-events: auto !important;
}

.modal-content {
  pointer-events: auto !important;
}

.modal-body, .modal-header, .modal-footer {
  pointer-events: auto !important;
}

.modal-body input,
.modal-body button,
.modal-body a,
.modal-body .nav-link,
.modal-body .btn,
.modal-body .form-control,
.modal-body textarea,
.modal-body select,
.modal-body details,
.modal-body summary,
.modal-content .btn-close {
  pointer-events: auto !important;
  cursor: pointer;
}

/* Fix: challenge-button might have ::before overlay blocking clicks */
.challenge-button::before {
  pointer-events: none !important;
}

/* Fix: jumbotron ::before overlay */
.jumbotron::before {
  pointer-events: none !important;
}

/* Fix: ensure #cyber-stars doesn't block */
#cyber-stars {
  pointer-events: none !important;
  position: fixed;
  z-index: -1;
}

/* Fix: navbar fixed-top might cause stacking issues */
.navbar.fixed-top {
  z-index: 1030 !important;
}

/* Make sure main content area is interactive */
main[role="main"] {
  position: relative;
  z-index: 1;
}

/* ===== CRITICAL MODAL FIX ===== */
.modal {
  pointer-events: auto !important;
}

.modal.show {
  pointer-events: auto !important;
}

.modal-dialog {
  pointer-events: auto !important;
}

.modal-content {
  pointer-events: auto !important;
}

.modal-body, .modal-header, .modal-footer {
  pointer-events: auto !important;
}

.modal-body input,
.modal-body button,
.modal-body a,
.modal-body .nav-link,
.modal-body .btn,
.modal-body .form-control,
.modal-body textarea,
.modal-body select,
.modal-body details,
.modal-body summary,
.modal-content .btn-close {
  pointer-events: auto !important;
  cursor: pointer;
}

/* Fix: challenge-button might have ::before overlay blocking clicks */
.challenge-button::before {
  pointer-events: none !important;
}

/* Fix: jumbotron ::before overlay */
.jumbotron::before {
  pointer-events: none !important;
}

/* Fix: ensure #cyber-stars doesn't block */
#cyber-stars {
  pointer-events: none !important;
  position: fixed;
  z-index: -1;
}

/* Fix: navbar fixed-top might cause stacking issues */
.navbar.fixed-top {
  z-index: 1030 !important;
}

/* Make sure main content area is interactive */
main[role="main"] {
  position: relative;
  z-index: 1;
}

/* ===== CRITICAL FIX: Modal above navbar ===== */
#challenge-window.modal {
  z-index: 1055 !important;
}

#challenge-window .modal-dialog {
  margin-top: 5rem !important;
}

/* Ensure modal backdrop is above navbar */
.modal-backdrop {
  z-index: 1045 !important;
}

/* Navbar must stay below modal */
.navbar.fixed-top {
  z-index: 1030 !important;
}

/* ===== FIX: Modal content ABOVE backdrop ===== */
#challenge-window.modal.show {
  z-index: 1060 !important;
  pointer-events: auto !important;
}

#challenge-window.modal.show .modal-dialog {
  pointer-events: auto !important;
}

#challenge-window.modal.show .modal-content,
#challenge-window.modal.show .modal-content * {
  pointer-events: auto !important;
}

.modal-backdrop.show {
  z-index: 1040 !important;
}