body {
  margin:0; padding:0;
  font-family:'Russo One', cursive;
  color:white; background:black;
  overflow:hidden;
}

/* Canvases */
canvas {
  position: fixed; top:0; left:0; width:100vw; height:100vh;
  pointer-events:none; user-select:none; display:block;
}
#bgCanvas { z-index:0; }
#cursorCanvas { z-index:2; }

/* Pages */
.page {
  position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:3; display:flex; flex-direction:column; justify-content:center; align-items:center;
  transition: opacity 1s ease, visibility 1s ease;
}
.hidden { opacity:0; visibility:hidden; }

/* Password inputs */
#passwordPage input, #passwordPage button {
  font-size:1.2rem; padding:10px; margin:10px;
  border-radius:5px; border:none;
}
#passwordPage button { cursor:pointer; background:#00c9b1; color:black; }

/* Floating letters */
.floating-letter {
  position:absolute;
  font-family: 'Russo One', sans-serif;
  font-size:3rem;
  color:white;
  text-shadow:0 0 5px rgba(255,255,255,0.7),
              0 0 10px rgba(255,255,255,0.7),
              0 0 15px rgba(0,255,255,0.7);
  user-select:none;
  opacity:1;
  transition: opacity 2s linear;
}

/* Dashboard */
#dashboardPage h1 { text-align:center; margin-bottom:20px; position: relative; }


.dashboard { position:relative; width:100vw; height:100vh; }

.widget {
  position:absolute; border-radius:15px; padding:20px; color:white;
  transition: all 1s ease;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  box-sizing:border-box; text-align:center; background: rgba(0,255,255,0.2); border: 2px solid #0ff; 
}

/* Widget styles */
#moodWidget { display:flex; flex-direction:row; justify-content:center; height: 20px; width:60px; align-items:center; gap:15px; }

.mood-icon { font-size:1.5rem; cursor:pointer; transition: transform 0.3s ease; }

.mood-icon:hover { transform: scale(1.3); }

#timelineWidget {  overflow:auto; }

#timelineWidget ul { list-style:none; padding:0; margin:0; width:100%; }

#timelineWidget li { margin:10px 0; padding:5px; background: rgba(255,255,255,0.1); border-radius:5px; }

#blogWidget {height:40px; width:80px;}

#musicWidget {
  width: 300px;
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(0, 255, 255, 0.4);
  border-radius: 20px;
  padding: 20px;
  backdrop-filter: blur(8px);
  color: #0ff;
  text-shadow: 0 0 6px #0ff;
  box-shadow: 0 0 20px #0ff3 inset, 0 0 20px #0ff5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.widget-title {
  margin-bottom: 15px;
  font-size: 1.1rem;
}

/* Hexagon Fuel Cells */
.hex-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 15px;
}

.hex {
  position: relative;
  width: 55px;
  height: 60px;
  background: rgba(0,255,255,0.1);
  clip-path: polygon(
    50% 0%,
    93% 25%,
    93% 75%,
    50% 100%,
    7% 75%,
    7% 25%
  );
  border: 2px solid #0ff5;
  box-shadow: 0 0 12px #0ff9 inset, 0 0 10px #0ff3;
  overflow: hidden;
}

.hex-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(#0ff, #058bff);
  box-shadow: 0 0 12px #0ff;
  transition: height 0.4s ease;
}

/* Controls */
.hex-player-controls {
  display: flex;
  gap: 10px;
}

.hex-player-controls button {
  background: rgba(0,255,255,0.2);
  border: 1px solid #0ff6;
  color: #0ff;
  font-size: 1.2rem;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 0 4px #0ff;
  transition: 0.2s ease;
}

.hex-player-controls button:hover {
  background: rgba(0,255,255,0.4);
  transform: scale(1.15);
}


.space-invaders {
  display:flex;
  bottom:10%;
  right:10%;
  width: 50px;
}

.moonWidget {
  display:flex;
  bottom:30%;
  right:30%;
  width:132px;
}

 /* Cosmic code container */
   #cosmic-code {
  width: 400px;          /* same as widget width */
  height: 180px;         /* same as widget height */
  background: #111;
  border: 2px solid #0ff;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box; /* include padding inside width */
  overflow: auto;         /* scroll if content overflows */
}


  #cosmic-code pre {
  white-space: pre-wrap;    /* allow long lines to wrap */
  word-break: break-word;   /* break very long words/lines */
  margin: 0;                /* remove default <pre> margin */
  font-size: 14px;          /* adjust font size to fit */
  line-height: 1.4;         /* tighter spacing if needed */
}


  #cosmic-code .comment { color: #888; }
#cosmic-code .keyword { color: #0ff; font-weight: bold; }
#cosmic-code .function { color: #0f0; }
#cosmic-code .string { color: #ff0; }


    /* Glow effect for neon/cosmic vibe */
    .cosmic-code pre span {
      text-shadow: 0 0 3px rgba(255,255,255,0.7), 0 0 8px rgba(0,255,255,0.4);
    }
    
#pong canvas {
  width: 100%;
  height: 100%;
  display: block;
}


/* Clue text */
.clue { position:absolute; left:20px; bottom:20px; opacity:0.06; font-size:11px; user-select:none; }

/* Sitemap */
#holo-star-map-container {
    position: relative;
    width: 100%;
    height: 400px;
    perspective: 800px;
    overflow: hidden;
}

#holoStarMap {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events:auto;
}

/* Info Panel */
#starInfoPanel {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 220px;
    padding: 10px 14px;
    background: rgba(0, 0, 25, 0.75);
    border: 1px solid cyan;
    color: white;
    font-family: Arial, sans-serif;
    border-radius: 10px;
    backdrop-filter: blur(6px);
    transition: opacity 0.3s;
}

#starInfoPanel.hidden {
    opacity: 0;
    pointer-events: none;
}