/* 🌌 LuumynOS Unified Stylesheet v2.9.6 */
/* Ambient visuals · Ceremonial overlays · Interactive glyph systems */
#integritySigilPanel h2 {
  font-size: 1.4rem;
  color: #ffd77f;
  text-shadow: 0 0 10px rgba(255,215,120,0.5);
}

#manifestDisplay {
  background: #1c1c2b;
  color: #e0e0ff;
  padding: 16px;
  margin-top: 20px;
  border: 1px solid #444;
  font-family: 'Orbitron', sans-serif;
}
.panelAligned h2 {
  animation: ambientPulse 3s ease-in-out infinite;
  color: #d0ffc0;
  text-shadow: 0 0 12px #a0ff90;
}

@keyframes ambientPulse {
  0%, 100% { opacity: 0.8; text-shadow: 0 0 6px #a0ff90; }
  50%      { opacity: 1;   text-shadow: 0 0 18px #c4ffc4; }
}
/* 🔷 Base Layout */
body {
  background: #0a0a0e;
  color: #e3e3e3;
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 40px;
  overflow-x: hidden;
}
:root {
  color-scheme: dark;
}

/* Footer */
.footerCeremony em {
  font-style: italic;
  color: #b3f7ff;
  animation: shimmerPulse 3.5s ease-in-out infinite;
}

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

/* takes out li::markers */
li::marker {
  content: none;
}

/* 🔷 Headings & Notes */
h1 {
  color: #b3f7ff;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 10px;
}
p.moduleNote {
  text-align: center;
  font-style: italic;
  color: #aaa;
  margin-bottom: 30px;
}

/* 🔷 Shared Panel Styling */
section.panel {
  background: #1b1b22;
  padding: 30px;
  border-radius: 12px;
  max-width: 700px;
  margin: auto;
  box-shadow: 0 0 30px rgba(179,247,255,0.2);
}

/* 🕸 Solar Pulse */

.panel.solarPulse h2 {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel.solarPulse .glyphPing {
  font-size: 1.2rem;
  animation: glyphBlink 4s infinite ease-in-out;
}

@keyframes glyphBlink {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.solarPulse .dataBlock {
  padding: 0.5rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #fffbd1;
}

.moduleNote {
  font-size: 0.85rem;
  font-style: italic;
  color: #cccccc;
  margin-top: 0.5rem;
  opacity: 0.7;
}

/* 📹 Gallery */
#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1600px;
  margin: auto;
}
.gallery-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px auto;
  flex-wrap: wrap;
}
.video-card {
  background: #1b1b22;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(118,185,255,0.2);
}
.video-card h3 { color: #b3f7ff; }
.video-card p { color: #aaa; }
.video-card img.thumb {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* 📜 Log Overlay */
.logEntry { margin-bottom: 16px; }
.logEntry strong { color: #b3f7ff; }

/* 🧭 Tab Navigation */
.tabList {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px auto;
  padding: 0 10px;
}
.tabButton {
  background: #1b1b22;
  color: #91c6ff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
}
.tabButton:hover {
  background: #2a2a33;
  color: #b3f7ff;
}
.tabButton.active {
  background: #2e3b55;
  color: #b3f7ff;
}

/* 📦 Iframe Container */
#moduleFrame {
  width: 100%;
  height: 800px;
  border: none;
  background: #0a0a0e;
  box-shadow: 0 0 20px rgba(118,185,255,0.2);
}

/* 📺 Channel Insight */
.resultCard {
  background: #1b1b22;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(179,247,255,0.2);
  max-width: 800px;
  margin: 30px auto;
  position: relative;
  overflow: hidden;
}
.resultCard h2 { color: #b3f7ff; }
.resultCard p { color: #ccc; }
.resultCard img { border-radius: 8px; }
iframe.latestVideo {
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(179,247,255,0.2);
  width: 100%;
  max-width: 600px;
  height: 340px;
}

/* ✶ Glyphs and Trails */
.glyph {
  position: absolute;
  font-size: 1.2rem;
  opacity: 0.15;
  animation: pulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.15; }
  50% { transform: scale(1.4); opacity: 0.3; }
}
.trail {
  position: absolute;
  width: 2px;
  height: 80px;
  background: linear-gradient(to top, #b3f7ff 0%, transparent 100%);
  opacity: 0.2;
  animation: trailFade 6s ease-in-out infinite;
}
@keyframes trailFade {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.4; }
}

/* ☄️ Comet Trail */
.cometTrail {
  position: absolute;
  width: 100px;
  height: 3px;
  background: linear-gradient(to right, #66ccff, transparent);
  animation: cometFly 1.2s ease-out forwards;
  pointer-events: none;
}
@keyframes cometFly {
  0% { transform: translateX(-120px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(120px); opacity: 0; }
}

/* 🌌 Constellation Dots */
.constellationDot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #b3f7ff;
  animation: dotFloat 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dotFloat {
  0%   { transform: translateY(0); opacity: 0.5; }
  50%  { transform: translateY(-8px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.5; }
}

/* 🔘 Inputs and Buttons */
input[type="text"] {
  padding: 10px;
  width: 60%;
  max-width: 500px;
  border-radius: 6px;
  border: none;
  font-size: 1rem;
  margin-bottom: 10px;
  background-color: #111;
  color: #e3e3e3;
}
button {
  padding: 10px 20px;
  background: #1f1f2e;
  color: #b3f7ff;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  margin: 5px;
}
button:hover {
  background: #2c2c3a;
}

/* 🧾 Footer & Presence Echo */
footer {
  text-align: center;
  color: #888;
  font-size: 0.85rem;
  padding: 30px 20px;
  font-style: italic;
}
.presenceCounter {
  position: relative;
  padding: 20px;
  text-align: center;
  font-size: 1.1rem;
  background: #0f0f17;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(179,247,255,0.2);
  overflow: hidden;
  color: #b3f7ff;
  font-family: 'Segoe UI', sans-serif;
  margin: 40px auto;
  max-width: 600px;
}
.presenceCounter .glyphPing {
  margin: 0 8px;
  font-size: 1.2rem;
  color: #91c6ff;
}
.presenceCounter strong {
  color: #b3f7ff;
  text-shadow: 0 0 5px rgba(179,247,255,0.3);
}
#snowLayer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.glyphPing {
  display: inline-block;
  font-size: 1.2rem;
  color: #8fdfff;
  animation: glyphOrbit 4s linear infinite, glyphPulse 3s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes glyphOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes glyphPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; text-shadow: 0 0 6px #91c6ff; }
}
/* 🔦 Highlight Words */
.highlightWord {
  background-color: #1f1f2e;
  color: #ffe680;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.95rem;
  box-shadow: 0 0 6px rgba(255, 232, 128, 0.2);
}

/* 📱 Responsive Layout · Mobile Viewport */
@media screen and (max-width: 768px) {
  body {
    padding: 20px;
    font-size: 0.95rem;
  }

  h1 {
    font-size: 2rem;
  }

  .tabButton {
    font-size: 0.9rem;
    padding: 8px 12px;
  }

  #moduleFrame {
    height: 600px;
  }

  input[type="text"] {
    width: 90%;
  }

  button {
    padding: 8px 16px;
    font-size: 0.9rem;
  }

  .resultCard {
    padding: 16px;
    margin: 20px auto;
  }

  iframe.latestVideo {
    width: 100%;
    height: 240px;
  }

  .gallery-filters {
    flex-direction: column;
    align-items: center;
  }
}

/* 📱 Responsive Layout · Small Screens */
@media screen and (max-width: 480px) {
  h1 {
    font-size: 1.6rem;
  }

  .tabList {
    flex-direction: column;
    align-items: center;
  }

  .video-card {
    padding: 14px;
  }

  .resultCard h2 {
    font-size: 1.4rem;
  }

  .highlightWord {
    font-size: 0.85rem;
    padding: 1px 4px;
  }
}

/* 🌋 GeoPulse Magnitude Classes */
.quakeItem.mag1,
.quakeItem.mag2,
.quakeItem.mag3 {
  background: #2a2a2a;
}
.quakeItem.mag4 {
  background: #1a3f2e;
}
.quakeItem.mag5 {
  background: #1a2f4f;
}
.quakeItem.mag6 {
  background: #4f1a1a;
}
.quakeItem.mag7 {
  background: #3a1a4f;
}
.quakeItem.mag8,
.quakeItem.mag9 {
  background: #000000;
}

/* ❄️ Snowfall Canvas Layer (for presence counter) */
#snowLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

#waveEchoPanel {
      background: #1b1b22;
      padding: 30px;
      border-radius: 12px;
      max-width: 700px;
      margin: auto;
      box-shadow: 0 0 30px rgba(179,247,255,0.2);
    }

/* Part for Wave Eco TAB */
.stationRow {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* Optional: allows stacking on small screens */
}

.stationBlock {
  background: #0f0f17;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(179,247,255,0.1);
  text-align: center;
}

.stationRow1 {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* Optional: allows stacking on small screens */
}

.stationBlock1 {
  background: #0f0f17;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(179,247,255,0.1);
  text-align: center;
}

.stationRow2 {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* Optional: allows stacking on small screens */
}

.stationBlock2 {
  background: #0f0f17;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(179,247,255,0.1);
  text-align: center;
}

.stationRow3 {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* Optional: allows stacking on small screens */
}

.stationBlock3 {
  background: #0f0f17;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(179,247,255,0.1);
  text-align: center;
}

.stationRow4 {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* Optional: allows stacking on small screens */
}

.stationBlock4 {
  background: #0f0f17;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(179,247,255,0.1);
  text-align: center;
}

.presenceCounter {
  position: relative;
  overflow: hidden;
}
#snowLayer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.solarTable {
  margin: 1rem auto;
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
  background-color: rgba(255,255,255,0.03);
  color: #fffbd1;
}
.solarTable th, .solarTable td {
  border: 1px solid #ffd77f;
  padding: 0.5rem;
  text-align: center;
}
.solarTable th {
  background-color: rgba(255,215,120,0.1);
}

.windPulse {
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background-color: #ffd77f;
  box-shadow: 0 0 12px rgba(255,215,120,0.4);
  animation-name: pulseWind;
  animation-iteration-count: infinite;
  vertical-align: middle;
  margin-right: 0.5rem;
}

@keyframes pulseWind {
  0%   { transform: scale(1);   opacity: 0.7; }
  50%  { transform: scale(1.4); opacity: 1;   }
  100% { transform: scale(1);   opacity: 0.7; }
	   { transform: scale(1);   opacity: 0.7; }
}

.alertList {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}
.alertList li {
  margin-bottom: 0.5rem;
  background-color: rgba(255,255,255,0.03);
  padding: 0.75rem;
  border-left: 4px solid #ff7f50;
}