/* ===== Base /assets/css/neon.css ===== */
body {
  background: #000;
  color: #0ff;
  font-family: monospace;
  margin: 0;
}

/* Neon text */
.neon {
  text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;
}
/* Dashboard Panel */
#dashboard-panel {
  display: none;              /* hidden by default */
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  max-width: 80%;
  margin: 1rem auto;
  padding: 0.5rem 1rem;
  border: 2px solid #0ff;
  border-radius: 8px;
  background: rgba(0,0,0,0.8);
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff inset;
  text-align: center;
  font-size: 0.95rem;
  color: #0ff;
  z-index: 5;
  position: relative;
}

/* When activated */
#dashboard-panel.visible {
  display: block;
  opacity: 1;
}


/* Premium Glow */
#dashboard-panel.premium-active {
  border-color: khaki;
  box-shadow: 0 0 12px khaki, 0 0 24px khaki inset;
}
#dashboard-panel .badge {
  color: khaki;
  font-weight: bold;
  text-shadow: 0 0 6px khaki, 0 0 12px khaki;
  margin-right: 1rem;
}


/* Highlighted dashboard values */
#dashboard-panel .highlight {
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 6px #0ff, 0 0 12px #0ff;
  margin: 0 0.5rem;
}

/* ===== DevShop ===== */
.devshop-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  margin: 1rem auto;
  max-width: 600px;
  border: 2px solid #0ff;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px #0ff inset;
  color: #0ff;
}

.devshop-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 6px #f00;
}

.devshop-dot.far {
  background: red;
  box-shadow: 0 0 8px red, 0 0 16px red;
}

.devshop-dot.near {
  background: purple;
  box-shadow: 0 0 10px violet, 0 0 24px violet, 0 0 36px purple;
  animation: pulse 1.2s infinite alternate;
}

@keyframes pulse {
  from { box-shadow: 0 0 10px violet, 0 0 20px purple; }
  to   { box-shadow: 0 0 20px violet, 0 0 40px purple; }
}

.devshop-link {
  cursor: pointer;
  color: #0ff;
  text-decoration: underline;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.devshop-link:hover {
  color: #fff;
  text-shadow: 0 0 6px #0ff;
}

.devshop-city {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.8;
}


/* ===== Module Grid ===== */
.modules-grid {
  display: flex;
  flex-direction: column; /* stack rows vertically */
  gap: 2rem;
  padding: 5rem 1rem 4rem; /* space for header/footer */
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.modules-grid.blurred {
  filter: blur(6px);
  opacity: 0.4;
}

/* Module rows */
.modules-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.modules-row.registered {
  order: -1; /* float purple/khaki to top */
}
.modules-row.free {
  order: 0;
}


/* ===== Panels ===== */
.panel {
  flex: 1 1 240px;
  max-width: 260px;
  border: 2px solid #0ff;
  border-radius: 12px;
  box-shadow: 0 0 10px #0ff, 0 0 20px #0ff inset;
  padding: 1rem;
  text-align: center;
  background: rgba(0,0,0,0.75);
  position: relative;
  transition: all 0.2s ease-in-out;
}
.panel:hover {
  box-shadow: 0 0 20px #0ff, 0 0 40px #0ff inset;
  transform: translateY(-2px);
}

/* Subtle glowing divider effect */
.panel::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -0.75rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0ff, transparent);
  opacity: 0.6;
}

/* ===== Panel Themes ===== */
.panel-green {
  color: #0f0;
  border-color: #0f0;
  box-shadow: 0 0 10px #0f0, 0 0 20px #0f0 inset;
}
.panel-green:hover {
  box-shadow: 0 0 20px #0f0, 0 0 40px #0f0 inset;
}

.panel-purple {
  color: #a0f;
  border-color: #a0f;
  box-shadow: 0 0 10px #a0f, 0 0 20px #a0f inset;
}
.panel-purple:hover {
  box-shadow: 0 0 20px #a0f, 0 0 40px #a0f inset;
}

.panel-orange {
  color: #f90;
  border-color: #f90;
  box-shadow: 0 0 10px #f90, 0 0 20px #f90 inset;
}
.panel-orange:hover {
  box-shadow: 0 0 20px #f90, 0 0 40px #f90 inset;
}

.panel-red {
  color: #f00;
  border-color: #f00;
  box-shadow: 0 0 10px #f00, 0 0 20px #f00 inset;
}
.panel-red:hover {
  box-shadow: 0 0 20px #f00, 0 0 40px #f00 inset;
}

/* Khaki Premium Panel */
.panel-khaki {
  color: #f0e68c;
  border-color: #f0e68c;
  box-shadow: 0 0 10px #f0e68c, 0 0 20px #f0e68c inset;
}
.panel-khaki:hover {
  box-shadow: 0 0 20px #f0e68c, 0 0 40px #f0e68c inset;
}

/* ===== Buttons ===== */
.neon-btn {
  margin-top: 1rem;
  cursor: pointer;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  transition: all 0.2s ease;
}
.neon-btn:hover {
  transform: scale(1.05);
}

/* Button themes */
.btn-green { background: #0f0; color: #000; }
.btn-green:hover { background: #0c0; }

.btn-purple { background: #a0f; color: #fff; }
.btn-purple:hover { background: #80c; }

.btn-orange { background: #f90; color: #000; }
.btn-orange:hover { background: #d70; }

.btn-red { background: #f00; color: #fff; }
.btn-red:hover { background: #c00; }

.btn-khaki { background: #f0e68c; color: #000; }
.btn-khaki:hover { background: #d9c96f; }

/* ===== Overlay ===== */
.overlay,
.module-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.95);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  z-index: 9999;
  padding: 1rem;
  overflow-y: auto;

  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.overlay.active,
.module-overlay.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  display: flex;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  color: #f00;
  text-shadow: 0 0 6px #f00;
  transition: transform 0.2s ease, color 0.2s ease;
  z-index: 10000;
}
.close-btn:hover {
  color: #ff4d4d;
  transform: scale(1.2);
}

/* ===== Spinner ===== */
.spinner {
  border: 4px solid rgba(0, 255, 255, 0.2);
  border-top: 4px solid #0ff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 2rem auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== Footer ===== */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.85);
  border-top: 2px solid #0ff;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.9rem;
  color: #0ff;
  box-shadow: 0 -2px 10px rgba(0,255,255,0.5);
}
.footer a {
  color: #0ff;
  text-decoration: none;
  margin: 0 1rem;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.footer a:hover {
  color: #fff;
  text-shadow: 0 0 8px #0ff;
}



/* ===== DevShop ===== */
.devshop-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1rem auto;
  padding: 0.5rem 1rem;
  border: 2px solid #a0f;
  border-radius: 8px;
  background: rgba(0,0,0,0.7);
  box-shadow: 0 0 8px #a0f inset;
  color: #a0f;
  font-size: 0.95rem;
  text-align: center;
}

/* Address / links */
.devshop-link {
  cursor: pointer;
  text-decoration: underline;
  color: #a0f;
  transition: color 0.2s, text-shadow 0.2s;
}
.devshop-link:hover {
  color: #fff;
  text-shadow: 0 0 8px #a0f;
}

/* Proximity dot */
.devshop-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #500050; /* faint purple */
  box-shadow: 0 0 6px #a0f;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Brighter glow when "near" */
.devshop-dot.near {
  background: #a0f;
  box-shadow: 0 0 10px #a0f, 0 0 20px #a0f, 0 0 30px #a0f;
}

/* ===== Neon Heading Fix ===== */
h2.neon,
h3.neon {
  color: #f8f0ff; /* very light lavender-white */
  text-shadow:
    0 0 6px #d9b3ff,
    0 0 14px #a0f,
    0 0 20px #a0f;
}