/*
 * Styling for the cosmic one‑pager. Aims to combine modern, playful
 * interactions with a restrained Japanese sensibility: soft colours,
 * generous whitespace and clean typography【318733841676621†L122-L127】.  We
 * avoid scrollbars by keeping everything on a single viewport and
 * reveal content via overlay cards.  Planets orbit in a star field to
 * provide navigation.
 */

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  /* Animated gradient background evoking sunrise and twilight hues */
  background: linear-gradient(120deg, #2c6e7a, #e07a5f, #9561e2, #2c6e7a);
  background-size: 400% 400%;
  animation: gradientShift 60s ease infinite;
}

/* Star field canvas fills the viewport */
#stars-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Allow clicks to reach planets above the canvas */
  pointer-events: none;
}

/* Container for orbiting planets; we disable pointer events here so
 * the canvas can capture click‑through except on the planets themselves. */
#planets-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Allow pointer events so planets can be clicked */
  pointer-events: auto;
  /* Use isolation so blending on planets doesn’t affect background */
  isolation: isolate;
  /* Place planets above the star canvas */
  z-index: 10;
}

/* Planet base style */
.planet {
  position: absolute;
  width: clamp(60px, 80px, 90px);
  height: clamp(60px, 80px, 90px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(0.7rem, 0.9rem, 1rem);
  color: #fff;
  cursor: pointer;
  pointer-events: all;
  z-index: 20;
  /* Ensure the planet is centered on its own (0,0) point. When we update
   * left/top via JS, this transform keeps the planet centered relative
   * to its own size, so pointer events align correctly. */
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  /* Add a gentle vertical floating animation to each planet to give a sense of movement
   * while keeping their positions static. */
  animation: floatY 8s ease-in-out infinite;
  user-select: none;
  /* Add subtle drop shadow for depth */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.planet:hover {
  /* Maintain centering when scaling on hover */
  transform: translate(-50%, -50%) scale(1.1);
}

/* Distinct colours for each planet (set via data attributes in JS) */

/* Overlay covers the entire viewport when visible */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Hidden by default. We toggle display via JS. */
  display: none;
  align-items: center;
  justify-content: center;
  /* Semi‑transparent veil with stronger blur allows main planets to
   * remain visible while focusing the overlay.  Increase transparency
   * further so the star field and orbiting planets remain noticeable.
   */
  background-color: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
  transition: opacity 0.4s ease;
  z-index: 1000;
}

/* Hidden state explicitly sets display none for simplicity */
#overlay.hidden {
  display: none;
}

/* Content card inside overlay */
.overlay-content {
  /* Dark tinted background with more transparency so you can glimpse the star field below.  Slightly increase transparency and reduce tint. */
  background-color: rgba(18, 25, 60, 0.6);
  color: #eaeff7;
  /* Present the overlay as a circular control panel. Use equal
   * width and height based on the viewport's smaller dimension. */
  border-radius: 50%;
  width: clamp(70vmin, 80vmin, 85vmin);
  height: clamp(70vmin, 80vmin, 85vmin);
  padding: clamp(1.5rem, 2.5rem, 3rem);
  /* Allow close button to be visible outside the circular boundary */
  overflow: visible;
  position: relative;
  /* Remove rectangular gradient border; instead simulate a coloured ring with box-shadow.
   * The ring gently glows around the circular panel, reminiscent of
   * spaceship HUDs. */
  border: none;
  box-shadow:
    0 0 0 3px rgba(149, 97, 226, 0.5),
    0 0 0 6px rgba(224, 122, 95, 0.35),
    0 14px 30px rgba(0, 0, 0, 0.4);
  /* Layered backgrounds: subtle grid lines and scattered stars. Lower opacities for a gentler look */
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px),
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 12px);
  animation: cardEnter 0.6s ease forwards;
  /* Crosshair lines reminiscent of a spaceship control panel */
  position: relative;
}

/* Draw crosshair lines within the circular overlay */
.overlay-content::before,
.overlay-content::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.overlay-content::before {
  /* horizontal line */
  top: 50%;
  left: 5%;
  width: 90%;
  height: 2px;
  transform: translateY(-50%);
}
.overlay-content::after {
  /* vertical line */
  left: 50%;
  top: 5%;
  width: 2px;
  height: 90%;
  transform: translateX(-50%);
}

.overlay-content h2 {
  margin-top: 0;
  font-family: 'Poppins', sans-serif;
  color: #e07a5f;
  font-size: clamp(1.2rem, 1.5rem, 1.8rem);
}
.overlay-content p {
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: clamp(0.9rem, 1rem, 1.1rem);
}
.overlay-content a {
  color: #7bbbe0;
  font-weight: 500;
  text-decoration: none;
}
.overlay-content a:hover {
  text-decoration: underline;
}

/* Limit the width of inner content within the circular overlay and center it
   horizontally to prevent text hugging the curved edges. */
#overlay-inner {
  max-width: 65%;
  margin: 0 auto;
}

/* Projects mini solar system inside the Projects overlay */
.projects-orbit-container {
  /* Fill the entire overlay so the solar system can centre itself relative
     to the circular map. */
  margin-top: 0.5rem;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
#projects-orbit {
  /* Centre the mini solar system within the circular overlay both horizontally
     and vertically. By positioning absolutely at the midpoint of the overlay and
     translating by half of its own dimensions, the orbits remain fully inside
     the circular map at all times. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Fit the mini solar system within the circular overlay */
  width: 60vmin;
  height: 60vmin;
  /* Allow clicks to pass through to planets */
  pointer-events: none;
  z-index: 1;
}
/* Orbit wrapper rotates planets around the centre */
.project-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  animation-name: orbitProject;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* Ensure orbit containers don't block clicks to planets */
  pointer-events: none;
  z-index: 1;
}
/* Project planets */
.project-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  transform-origin: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
  /* Ensure project planets always receive click events and appear above everything */
  pointer-events: auto !important;
  z-index: 1500;
  /* Ensure planets are always interactive regardless of position */
  position: relative;
}
.project-planet:hover {
  transform: scale(1.1) translate(var(--translate-x, 0), var(--translate-y, 0));
}
.project-planet span {
  pointer-events: none;
}
.project-detail {
  /* Unified circular design for all screen sizes - positioned in top-left */
  position: fixed;
  top: 2rem;
  left: 2rem;
  width: clamp(280px, 25vw, 350px);
  height: clamp(280px, 25vw, 350px);
  z-index: 1100;
  margin: 0;
  padding: 2rem;
  /* Circular spaceship control panel styling */
  background: rgba(18, 25, 60, 0.95);
  backdrop-filter: blur(5px);
  /* Subtle crosshair grid pattern within the circular panel */
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px),
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 12px);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(149, 97, 226, 0.5),
    0 0 0 6px rgba(224, 122, 95, 0.35),
    0 8px 25px rgba(0, 0, 0, 0.4);
  color: #eaeff7;
  text-align: center;
  font-size: clamp(0.8rem, 0.9rem, 1rem);
  line-height: 1.4;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* Hide scrollbar for all browsers */
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  -ms-overflow-style: none;
  overflow-y: auto;
  /* Flexbox for perfect centering */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.project-detail::-webkit-scrollbar {
  width: 0px; /* Hide scrollbar for webkit browsers */
  background: transparent;
}

.project-detail::-webkit-scrollbar-track {
  background: transparent;
}

.project-detail::-webkit-scrollbar-thumb {
  background: transparent;
}

.project-detail::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

.project-detail.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.project-detail h3 {
  margin: 0 0 0.8rem 0;
  color: #e07a5f;
  font-size: clamp(1rem, 1.1rem, 1.3rem);
  line-height: 1.2;
}

.project-detail .category {
  color: #9561e2;
  font-size: clamp(0.65rem, 0.75rem, 0.85rem);
  font-weight: 600;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-detail p {
  line-height: 1.4;
  margin-bottom: 1rem;
  font-size: clamp(0.7rem, 0.8rem, 0.9rem);
  max-width: 80%;
}

.project-detail a {
  color: #7bbbe0;
  font-size: clamp(0.7rem, 0.8rem, 0.9rem);
  text-decoration: none;
  font-weight: 500;
  margin-right: 0.5rem;
}

.project-detail a:hover {
  text-decoration: underline;
}

/* On Screen Button - Spaceship Control Panel Style */
.on-screen-button {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(149, 97, 226, 0.9), rgba(224, 122, 95, 0.8));
  border: 2px solid rgba(149, 97, 226, 0.7);
  border-radius: 20px;
  color: #ffffff;
  font-size: clamp(0.6rem, 0.7rem, 0.8rem);
  font-weight: 600;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(149, 97, 226, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1200;
}

.on-screen-button:hover {
  background: linear-gradient(135deg, rgba(224, 122, 95, 0.95), rgba(149, 97, 226, 0.9));
  border-color: rgba(224, 122, 95, 0.8);
  transform: translateX(-50%) scale(1.05);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(224, 122, 95, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.on-screen-button:active {
  transform: translateX(-50%) scale(0.95);
}

.btn-icon {
  font-size: 0.8em;
  animation: sparkle 2s ease-in-out infinite;
}

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

/* General hidden class */
.hidden {
  display: none !important;
}

/* Detailed Project View Overlay */
.detailed-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(128, 128, 128, 0.2);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.detailed-overlay.show {
  display: flex !important;
  opacity: 1;
  pointer-events: auto;
}

.detailed-overlay.hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

.detailed-content {
  position: relative;
  width: clamp(70vmin, 80vmin, 85vmin);
  height: clamp(70vmin, 80vmin, 85vmin);
  background: rgba(18, 25, 60, 0.85);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(149, 97, 226, 0.5),
    0 0 0 6px rgba(224, 122, 95, 0.35),
    0 14px 30px rgba(0, 0, 0, 0.4);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px),
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 12px);
  overflow: visible;
  animation: detailedEnter 0.6s ease forwards;
  will-change: transform, opacity;
  transform: translateZ(0); /* Hardware acceleration */
}

/* Navigation Button Base Styles */
.nav-button {
  position: absolute;
  border: 3px solid #00d4ff;
  border-radius: 8px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #00d4ff;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow:
    0 0 20px rgba(0, 212, 255, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  z-index: 10003;
  text-shadow: 0 0 10px #00d4ff;
}

.nav-button:hover {
  background: linear-gradient(135deg, #0f3460 0%, #16213e 50%, #1a1a2e 100%);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.2), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  transform: scale(1.1);
}

/* Close Button */
.close-button {
  top: -30px;
  right: -30px;
  width: 45px;
  height: 45px;
  font-size: 1.4rem;
}

/* Navigation Arrows */
.nav-arrow {
  width: 50px;
  height: 50px;
  top: 50%;
  font-size: 1.8rem;
}

.left-arrow {
  left: -80px;
  transform: translateY(-50%);
}

.right-arrow {
  right: -80px;
  transform: translateY(-50%);
}

.nav-arrow:hover {
  transform: translateY(-50%) scale(1.1);
}

/* Project Counter */
.project-counter {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #00d4ff;
  padding: 0.5rem 1rem;
  border: 2px solid #00d4ff;
  border-radius: 6px;
  font-weight: bold;
  font-size: 0.9rem;
  text-shadow: 0 0 10px #00d4ff;
  box-shadow:
    0 0 20px rgba(0, 212, 255, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  z-index: 10003;
}

/* Enhanced Navigation Header */
.detailed-header {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

/* Enhanced Close Button */
.detailed-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(45deg, #9561e2, #e07a5f);
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  z-index: 20;
}

.detailed-close:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Enhanced Project Navigation */
.project-navigation {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.5rem 1rem;
  border-radius: 25px;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Enhanced Navigation Arrows */
.nav-arrow {
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(45deg, #9561e2, #e07a5f);
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav-arrow:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.nav-arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Enhanced Project Counter */
.project-counter {
  color: white;
  font-weight: bold;
  font-size: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  min-width: 40px;
  text-align: center;
}


@keyframes detailedEnter {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Detailed Header with Navigation */
.detailed-header {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  z-index: 2100;
}

.detailed-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(149, 97, 226, 0.7);
  background: linear-gradient(135deg, rgba(18, 25, 60, 0.9), rgba(44, 110, 122, 0.8));
  color: #f8c1c9;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detailed-close:hover {
  background: linear-gradient(135deg, rgba(224, 122, 95, 0.95), rgba(149, 97, 226, 0.9));
  transform: scale(1.1) rotate(90deg);
  border-color: rgba(224, 122, 95, 0.8);
}

/* Project Navigation */
.project-navigation {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(18, 25, 60, 0.8);
  border: 1px solid rgba(149, 97, 226, 0.5);
  border-radius: 25px;
  padding: 0.5rem 1rem;
  backdrop-filter: blur(3px);
}

.nav-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(149, 97, 226, 0.6);
  background: linear-gradient(135deg, rgba(149, 97, 226, 0.3), rgba(224, 122, 95, 0.2));
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-arrow:hover {
  background: linear-gradient(135deg, rgba(149, 97, 226, 0.6), rgba(224, 122, 95, 0.5));
  transform: scale(1.1);
  border-color: rgba(149, 97, 226, 0.8);
}

.nav-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.project-counter {
  color: #eaeff7;
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 60px;
  text-align: center;
}

/* Detailed Project Content */
.detailed-project-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 60%;
  color: #eaeff7;
  text-align: center;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2rem 1rem;
}

.detailed-project-info::-webkit-scrollbar {
  display: none;
}

.detailed-project-info h2 {
  color: #e07a5f;
  font-size: clamp(1.5rem, 2rem, 2.5rem);
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
}

.detailed-project-info .detailed-category {
  color: #9561e2;
  font-size: clamp(0.8rem, 1rem, 1.2rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}

.detailed-project-info .detailed-description {
  font-size: clamp(0.9rem, 1.1rem, 1.3rem);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.detailed-project-info .detailed-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.detailed-project-info .detailed-link {
  background: linear-gradient(135deg, rgba(149, 97, 226, 0.8), rgba(224, 122, 95, 0.7));
  border: 1px solid rgba(149, 97, 226, 0.6);
  border-radius: 20px;
  color: #ffffff;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: clamp(0.8rem, 0.9rem, 1rem);
}

.detailed-project-info .detailed-link:hover {
  background: linear-gradient(135deg, rgba(224, 122, 95, 0.9), rgba(149, 97, 226, 0.8));
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* On Screen Button - Spaceship Control Panel Style */
.on-screen-button {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(149, 97, 226, 0.9), rgba(224, 122, 95, 0.8));
  border: 2px solid rgba(149, 97, 226, 0.7);
  border-radius: 20px;
  color: #ffffff;
  font-size: clamp(0.6rem, 0.7rem, 0.8rem);
  font-weight: 600;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(149, 97, 226, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1200;
}

.on-screen-button:hover {
  background: linear-gradient(135deg, rgba(224, 122, 95, 0.95), rgba(149, 97, 226, 0.9));
  border-color: rgba(224, 122, 95, 0.8);
  transform: translateX(-50%) scale(1.05);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(224, 122, 95, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.on-screen-button:active {
  transform: translateX(-50%) scale(0.95);
}

.btn-icon {
  font-size: 0.8em;
  animation: sparkle 2s ease-in-out infinite;
}

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

/* Detailed Project View Overlay */
.detailed-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.detailed-overlay.show {
  opacity: 1;
}


@keyframes detailedEnter {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Detailed Header with Navigation */
.detailed-header {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  z-index: 2100;
}

.detailed-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(149, 97, 226, 0.7);
  background: linear-gradient(135deg, rgba(18, 25, 60, 0.9), rgba(44, 110, 122, 0.8));
  color: #f8c1c9;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detailed-close:hover {
  background: linear-gradient(135deg, rgba(224, 122, 95, 0.95), rgba(149, 97, 226, 0.9));
  transform: scale(1.1) rotate(90deg);
  border-color: rgba(224, 122, 95, 0.8);
}

/* Project Navigation */
.project-navigation {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(18, 25, 60, 0.8);
  border: 1px solid rgba(149, 97, 226, 0.5);
  border-radius: 25px;
  padding: 0.5rem 1rem;
  backdrop-filter: blur(3px);
}

.nav-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(149, 97, 226, 0.6);
  background: linear-gradient(135deg, rgba(149, 97, 226, 0.3), rgba(224, 122, 95, 0.2));
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-arrow:hover {
  background: linear-gradient(135deg, rgba(149, 97, 226, 0.6), rgba(224, 122, 95, 0.5));
  transform: scale(1.1);
  border-color: rgba(149, 97, 226, 0.8);
}

.nav-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.project-counter {
  color: #eaeff7;
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 60px;
  text-align: center;
}

/* Detailed Project Content */
.detailed-project-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 60%;
  color: #eaeff7;
  text-align: center;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2rem 1rem;
}

.detailed-project-info::-webkit-scrollbar {
  display: none;
}

.detailed-project-info h2 {
  color: #e07a5f;
  font-size: clamp(1.5rem, 2rem, 2.5rem);
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
}

.detailed-project-info .detailed-category {
  color: #9561e2;
  font-size: clamp(0.8rem, 1rem, 1.2rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}

.detailed-project-info .detailed-description {
  font-size: clamp(0.9rem, 1.1rem, 1.3rem);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.detailed-project-info .detailed-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.detailed-project-info .detailed-link {
  background: linear-gradient(135deg, rgba(149, 97, 226, 0.8), rgba(224, 122, 95, 0.7));
  border: 1px solid rgba(149, 97, 226, 0.6);
  border-radius: 20px;
  color: #ffffff;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: clamp(0.8rem, 0.9rem, 1rem);
}

.detailed-project-info .detailed-link:hover {
  background: linear-gradient(135deg, rgba(224, 122, 95, 0.9), rgba(149, 97, 226, 0.8));
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
@keyframes orbitProject {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Header section inside overlay cards */
.overlay-header {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative;
}

.overlay-header-icon {
  width: 72px;
  height: 72px;
  display: block;
  margin: 0 auto 0.5rem;
  animation: floatY 6s ease-in-out infinite;
}
.overlay-content .projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.project-card {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
}
.project-card:hover {
  transform: translateY(-4px);
}
.project-card h3 {
  margin-top: 0;
  font-size: 1.1rem;
  color: #2c6e7a;
}
.project-card .category {
  font-size: clamp(0.7rem, 0.8rem, 0.9rem);
  font-weight: 600;
  color: #e07a5f;
  margin-bottom: 0.5rem;
}
.project-card a {
  font-size: 0.85rem;
  margin-right: 0.5rem;
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  /* Style the close button as a circular control panel element */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(149, 97, 226, 0.7);
  background: linear-gradient(135deg, rgba(18, 25, 60, 0.9), rgba(44, 110, 122, 0.8));
  color: #f8c1c9;
  font-size: 1.6rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(149, 97, 226, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* Add subtle crosshair lines inside the close button to evoke spaceship UI */
  transition: all 0.3s ease;
  animation: gentlePulse 6s ease-in-out infinite;

  /* Ensure the close button always sits above other overlay elements, such as
     the project info HUD panel. */
  z-index: 1200;
}

/* About section astronaut image */
.about-astronaut {
  display: block;
  margin: 2rem auto 1rem auto;
  max-width: 100%;
  height: auto;
  width: clamp(200px, 300px, 350px); /* Fluid responsive sizing */
  transition: transform 0.3s ease;
}

.about-astronaut:hover {
  transform: scale(1.05);
}

.close-btn:hover {
  background: linear-gradient(135deg, rgba(224, 122, 95, 0.95), rgba(149, 97, 226, 0.9));
  color: #ffffff;
  transform: scale(1.1) rotate(90deg);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(224, 122, 95, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: rgba(224, 122, 95, 0.8);
}

.close-btn:active {
  transform: scale(0.95) rotate(90deg);
}

/* Gentle pulsing animation for the close button */
@keyframes gentlePulse {
  0%, 100% {
    box-shadow:
      0 6px 12px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(149, 97, 226, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow:
      0 6px 12px rgba(0, 0, 0, 0.5),
      0 0 25px rgba(149, 97, 226, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}

/* Crosshair lines for close button - enhanced for cute style */
.close-btn::before,
.close-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 65%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: all 0.3s ease;
}
.close-btn::after {
  width: 3px;
  height: 65%;
  background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.close-btn:hover::before,
.close-btn:hover::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.close-btn:hover::after {
  background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

/* Animated gradient keyframes */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Overlay card entry animation */
@keyframes cardEnter {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Floating animation for icons */
@keyframes floatY {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ===============================================
   BLACK HOLE EVENT SYSTEM
   =============================================== */

/* Simplified Timer - Just Text */
.control-panel-timer {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  font-family: 'Poppins', sans-serif;
  color: #eaeff7;
  text-align: center;
  padding: 0.5rem;
}

/* Zoom Controls for Projects */
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-content: center;
}

.zoom-btn {
  background: rgba(149, 97, 226, 0.2);
  border: 1px solid rgba(149, 97, 226, 0.5);
  color: #eaeff7;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.zoom-btn:hover:not(:disabled) {
  background: rgba(149, 97, 226, 0.4);
  border-color: rgba(149, 97, 226, 0.8);
  transform: scale(1.05);
}

.zoom-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

#zoom-level-indicator {
  font-size: 0.7rem;
  color: #f8c1c9;
  font-weight: 600;
  min-width: 60px;
}

/* Background planets (previous zoom levels) */
.background-orbit {
  opacity: 0.3;
  filter: blur(1px);
  pointer-events: none;
}

.background-planet {
  transform-origin: center;
  scale: 0.6;
  opacity: 0.4;
  filter: blur(0.5px);
  pointer-events: none;
}

/* Cosmic Wisdom Message */
.cosmic-wisdom {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900; /* Lower than overlays (1000) so wisdom hides behind them */
  max-width: 80vw;
  text-align: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.cosmic-wisdom.show {
  opacity: 1;
}

.cosmic-wisdom.hidden {
  display: none;
}

.wisdom-text {
  background: rgba(0, 0, 0, 0); /* Completely transparent - no background at all */
  border: none;
  border-radius: 20px;
  padding: 2rem 3rem;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.6;
  text-shadow:
    0 0 15px rgba(149, 97, 226, 0.8),
    0 0 30px rgba(149, 97, 226, 0.6),
    0 0 45px rgba(149, 97, 226, 0.4);
  box-shadow: none; /* Remove complex box shadows that might cause glitches */
  backdrop-filter: none;
  animation: simpleGlow 8s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
}

.wisdom-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(149, 97, 226, 0.3) 50%,
    transparent 100%);
  animation: shimmer 6s ease-in-out infinite;
}

@keyframes simpleGlow {
  0% {
    text-shadow:
      0 0 15px rgba(149, 97, 226, 0.8),
      0 0 30px rgba(149, 97, 226, 0.6),
      0 0 45px rgba(149, 97, 226, 0.4);
  }
  100% {
    text-shadow:
      0 0 25px rgba(149, 97, 226, 1.0),
      0 0 50px rgba(149, 97, 226, 0.8),
      0 0 75px rgba(149, 97, 226, 0.6);
  }
}

@keyframes shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* Large desktop cosmic wisdom adjustments */
@media (max-width: 1200px) {
  .cosmic-wisdom {
    top: 8%;
    max-width: 85vw;
  }
  
  .wisdom-text {
    padding: 2.2rem 2.8rem;
    font-size: 1.15rem;
  }
}

/* Medium desktop cosmic wisdom adjustments */
@media (max-width: 1024px) {
  .cosmic-wisdom {
    top: 7%;
    max-width: 88vw;
  }
  
  .wisdom-text {
    padding: 2rem 2.5rem;
    font-size: 1.1rem;
  }
}

/* Small desktop cosmic wisdom adjustments */
@media (max-width: 900px) {
  .cosmic-wisdom {
    top: 6%;
    max-width: 90vw;
  }
  
  .wisdom-text {
    padding: 1.8rem 2.2rem;
    font-size: 1.05rem;
  }
}

/* Mobile responsiveness for cosmic wisdom */
@media (max-width: 768px) {
  .cosmic-wisdom {
    top: 5%;
    max-width: 90vw;
  }
  
  .wisdom-text {
    padding: 1.5rem 2rem;
    font-size: 1rem;
  }
}

/* Tablet to mobile cosmic wisdom transition */
@media (max-width: 640px) {
  .cosmic-wisdom {
    top: 4%;
    max-width: 92vw;
  }
  
  .wisdom-text {
    padding: 1.3rem 1.8rem;
    font-size: 0.95rem;
  }
}

/* Small tablet to mobile cosmic wisdom transition */
@media (max-width: 560px) {
  .cosmic-wisdom {
    top: 3%;
    max-width: 94vw;
  }
  
  .wisdom-text {
    padding: 1.2rem 1.6rem;
    font-size: 0.92rem;
  }
}

@media (max-width: 480px) {
  .wisdom-text {
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
  }
}

.timer-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #f8c1c9;
  margin-bottom: 0.3rem;
  letter-spacing: 1px;
}

.timer-countdown {
  font-size: 1.8rem;
  font-weight: 700;
  color: #7bbbe0;
  margin: 0.5rem 0;
  text-shadow: 0 0 10px rgba(123, 187, 224, 0.5);
  font-family: 'Courier New', monospace;
}

.timer-warning {
  font-size: 0.6rem;
  color: #bfa5f6;
  margin-top: 0.3rem;
  opacity: 0.8;
}

/* Timer warning states - keep original blue color for better visibility */
.control-panel-timer.timer-warning .timer-countdown {
  color: #7bbbe0; /* Keep original blue color */
  text-shadow: 0 0 10px rgba(123, 187, 224, 0.5);
}

.control-panel-timer.timer-critical .timer-countdown {
  color: #7bbbe0; /* Keep original blue color */
  text-shadow: 0 0 15px rgba(123, 187, 224, 0.8);
}

/* Black Hole Container */
#blackhole-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 500;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#blackhole-container.hidden {
  display: none;
}

/* Black Hole Stages */
#blackhole {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  opacity: 0;
  transform: scale(0);
  transition: all 2s ease-out;
}

/* Ensure black hole stays visible once active */
#blackhole.blackhole-active {
  opacity: 1 !important;
  display: block !important;
}

/* White flash transition when black hole disappears */
#blackhole.blackhole-flash {
  animation: blackholeWhiteFlash 1s ease-out forwards;
}

@keyframes blackholeWhiteFlash {
  0% {
    opacity: 1;
    transform: scale(2.5);
    filter: brightness(1);
  }
  30% {
    opacity: 1;
    transform: scale(3);
    filter: brightness(10) blur(0px);
    box-shadow: 0 0 200px rgba(255, 255, 255, 1),
                0 0 400px rgba(255, 255, 255, 0.8),
                0 0 600px rgba(255, 255, 255, 0.6);
  }
  70% {
    opacity: 0.8;
    transform: scale(4);
    filter: brightness(20) blur(5px);
    box-shadow: 0 0 300px rgba(255, 255, 255, 1),
                0 0 600px rgba(255, 255, 255, 0.9),
                0 0 900px rgba(255, 255, 255, 0.7);
  }
  100% {
    opacity: 0;
    transform: scale(5);
    filter: brightness(0) blur(10px);
    box-shadow: none;
  }
}

/* All stages use blackhole3.png but with different effect intensities */
.blackhole-stage1 {
  background-image: url('images/blackhole3.png'),
                    radial-gradient(circle at center,
                      rgba(0, 0, 0, 0.7) 30%,
                      rgba(30, 50, 100, 0.6) 50%,
                      rgba(60, 80, 150, 0.4) 70%,
                      transparent 100%);
  background-size: contain, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  box-shadow:
    0 0 50px rgba(100, 150, 255, 0.3),
    inset 0 0 30px rgba(0, 0, 0, 0.8);
}

.blackhole-stage1.blackhole-appear {
  opacity: 1;
  transform: scale(1);
  animation: blackholeStage1 10s ease-out forwards;
}

/* Stage 2: Same image, more intense effects */
.blackhole-stage2 {
  background-image: url('images/blackhole3.png'),
                    radial-gradient(circle at center,
                      rgba(0, 0, 0, 0.8) 25%,
                      rgba(100, 50, 0, 0.6) 45%,
                      rgba(255, 150, 50, 0.5) 65%,
                      rgba(255, 200, 100, 0.3) 80%,
                      transparent 100%);
  background-size: contain, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  box-shadow:
    0 0 80px rgba(255, 150, 50, 0.5),
    0 0 120px rgba(255, 100, 0, 0.3),
    inset 0 0 40px rgba(0, 0, 0, 0.9);
}

.blackhole-stage2.blackhole-grow {
  opacity: 1;
  transform: scale(1.5);
  animation: blackholeStage2 15s ease-out forwards;
}

/* Stage 3: Same image, maximum effects */
.blackhole-stage3 {
  background-image: url('images/blackhole3.png'),
                    radial-gradient(circle at center,
                      rgba(0, 0, 0, 0.9) 20%,
                      rgba(150, 50, 0, 0.7) 35%,
                      rgba(255, 100, 0, 0.6) 50%,
                      rgba(255, 200, 50, 0.5) 65%,
                      rgba(255, 255, 100, 0.3) 80%,
                      transparent 100%);
  background-size: contain, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  box-shadow:
    0 0 150px rgba(255, 100, 0, 0.8),
    0 0 250px rgba(255, 150, 50, 0.6),
    0 0 350px rgba(255, 200, 100, 0.4),
    inset 0 0 60px rgba(0, 0, 0, 1);
}

.blackhole-stage3.blackhole-full {
  opacity: 1;
  transform: scale(2.5);
  animation: blackholeStage3 35s ease-out forwards;
}

/* Planet Sucking Animation */
.planet.sucked-into-blackhole {
  animation: suckIntoBlackHole 3s ease-in forwards;
  z-index: 400;
}

.planet.spit-from-blackhole {
  animation: spitFromBlackHole 2s ease-out forwards;
  z-index: 20;
}

/* Lightning Effects */
#lightning-effects {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 600;
}

.lightning-bolt {
  position: absolute;
  width: 3px;
  height: 100px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(150, 200, 255, 0.8) 50%,
    transparent 100%);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(150, 200, 255, 0.6);
  animation: lightningFlash 0.5s ease-out;
}

/* Nebula Effects */
#nebula-effects {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 550;
}

.nebula-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 200, 150, 1) 0%,
    rgba(255, 150, 100, 0.8) 50%,
    transparent 100%);
  box-shadow: 0 0 8px rgba(255, 200, 150, 0.8);
  animation: nebulaSparkle 3s ease-in-out infinite;
}

/* Enhanced Star Field Effects During Black Hole */
body.blackhole-active #stars-canvas {
  animation: acceleratedStars 2s linear infinite;
}

body.blackhole-stage2 #stars-canvas {
  animation: acceleratedStars 1s linear infinite;
}

body.blackhole-stage3 #stars-canvas {
  animation: acceleratedStars 0.5s linear infinite;
  filter: brightness(1.2) contrast(1.1);
}

/* Background Effects */
body.blackhole-active {
  background: linear-gradient(120deg, #1a2c4a, #4a1a2c, #2c1a4a, #1a4a2c);
  background-size: 400% 400%;
  animation: chaosGradient 6s ease infinite;
}

/* Keyframe Animations */
@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes timerWarning {
  0%, 100% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 30px rgba(224, 122, 95, 0.3); }
  50% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 40px rgba(224, 122, 95, 0.6); }
}

@keyframes timerCritical {
  0%, 100% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 100, 100, 0.5); }
  50% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 50px rgba(255, 100, 100, 0.9); }
}

@keyframes blackholeStage1 {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(0.8) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

@keyframes blackholeStage2 {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.5) rotate(720deg); }
}

@keyframes blackholeStage3 {
  0% { transform: scale(1.5) rotate(0deg); }
  100% { transform: scale(2.5) rotate(1440deg); }
}

@keyframes suckIntoBlackHole {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translate(-25%, -25%) scale(0.7) rotate(90deg);
    opacity: 0.8;
  }
  70% {
    transform: translate(0, 0) scale(0.3) rotate(270deg);
    opacity: 0.4;
  }
  100% {
    transform: translate(0, 0) scale(0) rotate(360deg);
    opacity: 0;
  }
}

@keyframes spitFromBlackHole {
  0% {
    transform: translate(0, 0) scale(0) rotate(360deg);
    opacity: 0;
  }
  30% {
    transform: translate(0, 0) scale(0.3) rotate(270deg);
    opacity: 0.4;
  }
  70% {
    transform: translate(-25%, -25%) scale(0.7) rotate(90deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes lightningFlash {
  0% { opacity: 0; transform: scaleY(0); }
  50% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0); }
}

@keyframes nebulaSparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes acceleratedStars {
  0% { transform: translateZ(0); }
  100% { transform: translateZ(10px); }
}

@keyframes chaosGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===============================================
   RESPONSIVE DESIGN FOR MOBILE DEVICES
   =============================================== */

/* Large desktop to tablet transition */
@media (max-width: 1200px) {
  .overlay-content {
    width: 82vmin;
    height: 82vmin;
    padding: 2.3rem;
  }
  
  .planet {
    width: 75px;
    height: 75px;
    font-size: 0.85rem;
  }
  
  .project-planet {
    width: 48px;
    height: 48px;
  }
}

/* Medium desktop to tablet transition */
@media (max-width: 1024px) {
  .overlay-content {
    width: 85vmin;
    height: 85vmin;
    padding: 2.2rem;
  }
  
  .planet {
    width: 72px;
    height: 72px;
    font-size: 0.82rem;
  }
  
  .project-planet {
    width: 46px;
    height: 46px;
  }
  
  /* Project detail panel uses unified circular design - no changes needed */
}

/* Small desktop to tablet transition */
@media (max-width: 900px) {
  .overlay-content {
    width: 88vmin;
    height: 88vmin;
    padding: 2.1rem;
  }
  
  .planet {
    width: 70px;
    height: 70px;
    font-size: 0.8rem;
  }
  
  /* Project detail panel uses unified circular design - no changes needed */
}

/* Tablet and smaller screens */
@media (max-width: 768px) {
  /* Adjust overlay size for tablets */
  .overlay-content {
    width: 90vmin;
    height: 90vmin;
    padding: 2rem;
  }
  
  /* Project detail panel uses unified circular design - no changes needed */
  
  /* Smaller close button for tablets */
  .close-btn {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }
  
  /* Adjust planet sizes for tablets */
  .planet {
    width: 70px;
    height: 70px;
    font-size: 0.8rem;
  }
  
  /* Smaller project planets */
  .project-planet {
    width: 45px;
    height: 45px;
    font-size: 0.8rem;
  }
  
  /* Responsive astronaut image for tablets */
  .about-astronaut {
    width: 250px;
    margin: 1.5rem auto 1rem auto;
  }
}

/* Tablet to mobile transition */
@media (max-width: 640px) {
  .overlay-content {
    width: 92vmin;
    height: 92vmin;
    padding: 1.8rem;
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 1.5rem);
  }
  
  .planet {
    width: 65px;
    height: 65px;
    font-size: 0.75rem;
  }
  
  .project-planet {
    width: 42px;
    height: 42px;
    font-size: 0.75rem;
  }
  
  /* Project detail panel uses unified circular design - minimal mobile adjustments */
  .project-detail {
    top: 1.5rem;
    left: 1.5rem;
    width: clamp(250px, 30vw, 300px);
    height: clamp(250px, 30vw, 300px);
    padding: 1.5rem;
  }
  
  .close-btn {
    width: 42px;
    height: 42px;
    font-size: 1.3rem;
  }
  
  .about-astronaut {
    width: 220px;
    margin: 1.3rem auto 0.8rem auto;
  }
}

/* Small tablet to mobile transition */
@media (max-width: 560px) {
  .overlay-content {
    width: 94vmin;
    height: 94vmin;
    padding: 1.6rem;
  }
  
  .planet {
    width: 62px;
    height: 62px;
    font-size: 0.72rem;
  }
  
  .project-planet {
    width: 40px;
    height: 40px;
  }
  
  /* Project detail panel uses unified circular design - smaller mobile adjustments */
  .project-detail {
    top: 1rem;
    left: 1rem;
    width: clamp(220px, 35vw, 280px);
    height: clamp(220px, 35vw, 280px);
    padding: 1.2rem;
  }
  
  .about-astronaut {
    width: 210px;
    margin: 1.2rem auto 0.7rem auto;
  }
}

/* Mobile phones and small screens */
@media (max-width: 480px) {
  /* Keep circular overlay but make it fit mobile screen */
  .overlay-content {
    width: 90vmin;
    height: 90vmin;
    border-radius: 50%; /* Keep the circular space control panel style */
    padding: 1.2rem;
    /* Ensure it fits on mobile screens */
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    /* Keep overflow visible for close button and project planets */
    overflow: visible;
  }
  
  /* Make overlay inner content properly sized and scrollable for text sections */
  #overlay-inner {
    max-width: 70%;
    max-height: calc(90vmin - 4rem);
    overflow-y: auto;
    padding-right: 0.5rem;
  }
  
  /* Create circular text flow for mobile text content */
  #overlay-inner:not(:has(.projects-orbit-container)) {
    /* Add circular padding to respect round shape */
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    margin: 0 auto;
    /* Create circular text boundaries using shape-outside */
    border-radius: 50%;
    /* Add subtle inner shadow to define circular boundary */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
    /* Ensure text flows within circular boundary */
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  /* Adjust text content within circular boundary */
  #overlay-inner:not(:has(.projects-orbit-container)) p {
    /* Add responsive margins that create circular text flow */
    margin-left: calc(5% + 0.5rem);
    margin-right: calc(5% + 0.5rem);
    text-align: justify;
    hyphens: auto;
  }
  
  /* First paragraph gets more top margin */
  #overlay-inner:not(:has(.projects-orbit-container)) p:first-of-type {
    margin-top: 1rem;
  }
  
  /* Last paragraph gets more bottom margin */
  #overlay-inner:not(:has(.projects-orbit-container)) p:last-of-type {
    margin-bottom: 1.5rem;
  }
  
  /* Ensure projects section doesn't get scrolling applied */
  #overlay-inner:has(.projects-orbit-container) {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
  
  /* Responsive text sizing for mobile */
  .overlay-content h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  
  .overlay-content p {
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 0.8rem;
  }
  
  /* Smaller header icon for mobile */
  .overlay-header-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 0.8rem;
  }
  
  /* Adjust overlay header for mobile */
  .overlay-header {
    margin-bottom: 1rem;
  }
  
  /* Project detail panel uses unified circular design - no mobile-specific overrides needed */
  }
  
  /* Adjust close button for mobile */
  .close-btn {
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  /* Smaller planets for mobile */
  .planet {
    width: 60px;
    height: 60px;
    font-size: 0.7rem;
  }
  
  /* Smaller project planets for mobile */
  .project-planet {
    width: 40px;
    height: 40px;
    font-size: 0.7rem;
  }
  
  /* Responsive astronaut image for mobile */
  .about-astronaut {
      width: 200px;
      margin: 1rem auto 0.5rem auto;
  }
  
  /* Adjust project orbit container for mobile */
  #projects-orbit {
    width: 70vmin;
    height: 70vmin;
  }
  
  /* Adjust overlay inner content for mobile */
  #overlay-inner {
    max-width: 85%;
  }
  
  /* Adjust overlay header for mobile */
  .overlay-header-icon {
    width: 60px;
    height: 60px;
  }
  
  .overlay-content h2 {
    font-size: 1.5rem;
  }
  
  .overlay-content p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  /* Adjust projects orbit container for mobile */
  .projects-orbit-container {
    margin-top: 0.5rem;
  }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
  /* Keep circular but smaller for very small screens */
  .overlay-content {
    width: 85vmin;
    height: 85vmin;
    border-radius: 50%; /* Keep circular */
    padding: 1rem;
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    /* Keep overflow visible for close button and project planets */
    overflow: visible;
  }
  
  /* Even more compact content area and scrollable for text sections */
  #overlay-inner {
    max-width: 75%;
    max-height: calc(85vmin - 3rem);
    overflow-y: auto;
    padding-right: 0.5rem;
  }
  
  /* Create circular text flow for very small screens */
  #overlay-inner:not(:has(.projects-orbit-container)) {
    padding: 1.5rem 1rem 1rem 1rem;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  /* Adjust text content for very small screens */
  #overlay-inner:not(:has(.projects-orbit-container)) p {
    margin-left: calc(3% + 0.3rem);
    margin-right: calc(3% + 0.3rem);
    text-align: justify;
    hyphens: auto;
  }
  
  /* Ensure projects section doesn't get scrolling applied */
  #overlay-inner:has(.projects-orbit-container) {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
  
  /* Even smaller text for very small screens */
  .overlay-content h2 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
  }
  
  .overlay-content p {
    font-size: 0.75rem;
    line-height: 1.3;
    margin-bottom: 0.7rem;
  }
  
  /* Smaller header icon */
  .overlay-header-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 0.6rem;
  }
  
  .project-detail {
    top: 0.5rem;
    left: 0.5rem;
    width: 150px; /* Larger circular size for very small screens */
    height: 150px;
    max-height: none;
    font-size: 0.65rem;
    border-radius: 50%; /* Keep circular */
    padding: 0.8rem 0.6rem;
  }
  
  .project-detail h3 {
    font-size: 0.7rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    padding: 0 0.6rem;
    max-width: 90px;
  }
  
  .project-detail .category {
    font-size: 0.55rem;
    padding: 0 0.4rem;
    max-width: 100px;
  }
  
  .project-detail p {
    font-size: 0.6rem;
    line-height: 1.2;
    padding: 0 0.4rem;
    max-width: 110px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  .project-detail a {
    font-size: 0.55rem;
    padding: 0 0.2rem;
  }
  
  .project-detail.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
  }
  
  .planet {
    width: 50px;
    height: 50px;
    font-size: 0.6rem;
  }
  
  .project-planet {
    width: 35px;
    height: 35px;
  }
  
  .close-btn {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
  
  .overlay-header-icon {
    width: 50px;
    height: 50px;
  }
  
  .overlay-content h2 {
    font-size: 1.3rem;
  }
  
  .overlay-content p {
    font-size: 0.85rem;
  }
  
  /* Very small astronaut image for very small screens */
  .about-astronaut {
      width: 150px;
      margin: 0.8rem auto 0.5rem auto;
  }
}

/* Landscape orientation adjustments for mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .overlay-content {
    width: 70vh;
    height: 70vh;
    border-radius: 50%; /* Keep circular even in landscape */
    max-width: 60vw;
    max-height: 85vh;
  }
  
  /* Project detail panel uses unified circular design - landscape adjustments handled by clamp() */
  
  #overlay-inner {
    max-width: 75%;
  }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets for mobile */
  .planet {
    min-width: 60px;
    min-height: 60px;
  }
  
  .project-planet {
    min-width: 40px;
    min-height: 40px;
  }
  
  .close-btn {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Remove hover effects on touch devices */
  .planet:hover {
    transform: translate(-50%, -50%);
  }
  
  .project-planet:hover {
    transform: scale(1) translate(var(--translate-x, 0), var(--translate-y, 0));
  }
  
  .close-btn:hover {
    transform: none;
    background: linear-gradient(135deg, rgba(18, 25, 60, 0.9), rgba(44, 110, 122, 0.8));
    color: #f8c1c9;
  }
}

/* ===============================================
   BLACK HOLE EVENT - MOBILE RESPONSIVENESS
   =============================================== */

/* Large desktop timer adjustments */
@media (max-width: 1200px) {
  .control-panel-timer {
    top: 22px;
    right: 22px;
    padding: 1rem 1.2rem;
    min-width: 200px;
    font-size: 1rem;
  }
  
  .timer-countdown {
    font-size: 1.8rem;
  }
}

/* Medium desktop timer adjustments */
@media (max-width: 1024px) {
  .control-panel-timer {
    top: 20px;
    right: 20px;
    padding: 0.95rem 1.15rem;
    min-width: 190px;
    font-size: 0.98rem;
  }
  
  .timer-countdown {
    font-size: 1.7rem;
  }
}

/* Small desktop timer adjustments */
@media (max-width: 900px) {
  .control-panel-timer {
    top: 18px;
    right: 18px;
    padding: 0.9rem 1.1rem;
    min-width: 180px;
    font-size: 0.95rem;
  }
  
  .timer-countdown {
    font-size: 1.6rem;
  }
}

/* Mobile adjustments for black hole timer */
@media (max-width: 768px) {
  .control-panel-timer {
    top: 10px;
    right: 10px;
    padding: 0.8rem 1rem;
    min-width: 160px;
    font-size: 0.9rem;
  }
  
  .timer-label {
    font-size: 0.6rem;
  }
  
  .timer-countdown {
    font-size: 1.4rem;
  }
  
  .timer-warning {
    font-size: 0.55rem;
  }
  
  /* Smaller black hole on mobile */
  #blackhole {
    width: 150px;
    height: 150px;
  }
  
  .blackhole-stage2.blackhole-grow {
    transform: scale(1.2);
  }
  
  .blackhole-stage3.blackhole-full {
    transform: scale(1.8);
  }
  
  /* Adjust lightning for mobile */
  .lightning-bolt {
    height: 60px;
    width: 2px;
  }
  
  /* Smaller nebula sparkles */
  .nebula-sparkle {
    width: 3px;
    height: 3px;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .control-panel-timer {
    top: 5px;
    right: 5px;
    padding: 0.6rem 0.8rem;
    min-width: 140px;
    font-size: 0.8rem;
  }
  
  .timer-label {
    font-size: 0.5rem;
    margin-bottom: 0.2rem;
  }
  
  .timer-countdown {
    font-size: 1.2rem;
    margin: 0.3rem 0;
  }
  
  .timer-warning {
    font-size: 0.5rem;
    margin-top: 0.2rem;
  }
  
  /* Even smaller black hole for tiny screens */
  #blackhole {
    width: 120px;
    height: 120px;
  }
  
  .blackhole-stage2.blackhole-grow {
    transform: scale(1.1);
  }
  
  .blackhole-stage3.blackhole-full {
    transform: scale(1.5);
  }
  
  /* Compact lightning */
  .lightning-bolt {
    height: 40px;
    width: 1px;
  }
  
  /* Tiny sparkles */
  .nebula-sparkle {
    width: 2px;
    height: 2px;
  }
}

/* Landscape mobile adjustments */
@media (max-height: 500px) and (orientation: landscape) {
  .control-panel-timer {
    top: 5px;
    right: 5px;
    padding: 0.5rem 0.8rem;
    min-width: 120px;
    font-size: 0.7rem;
  }
  
  .timer-countdown {
    font-size: 1rem;
  }
  
  #blackhole {
    width: 100px;
    height: 100px;
  }
  
  .blackhole-stage2.blackhole-grow {
    transform: scale(1.1);
  }
  
  .blackhole-stage3.blackhole-full {
    transform: scale(1.4);
  }
}

/* Responsive Design for Detailed View System */
@media (max-width: 1200px) {
  .on-screen-button {
    font-size: clamp(0.55rem, 0.65rem, 0.75rem);
    padding: 0.4rem 0.8rem;
  }
  
  .detailed-content {
    width: clamp(75vmin, 85vmin, 90vmin);
    height: clamp(75vmin, 85vmin, 90vmin);
  }
  
  .detailed-header {
    width: 85%;
  }
  
  .detailed-close {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
  
  .nav-arrow {
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
  }
}

@media (max-width: 1024px) {
  .on-screen-button {
    font-size: clamp(0.5rem, 0.6rem, 0.7rem);
    padding: 0.35rem 0.7rem;
  }
  
  .detailed-content {
    width: clamp(80vmin, 90vmin, 95vmin);
    height: clamp(80vmin, 90vmin, 95vmin);
  }
  
  .detailed-project-info {
    width: 75%;
    height: 65%;
  }
  
  .detailed-project-info h2 {
    font-size: clamp(1.3rem, 1.8rem, 2.2rem);
  }
  
  .detailed-project-info .detailed-category {
    font-size: clamp(0.75rem, 0.9rem, 1.1rem);
  }
  
  .detailed-project-info .detailed-description {
    font-size: clamp(0.85rem, 1rem, 1.2rem);
  }
}

@media (max-width: 900px) {
  .on-screen-button {
    bottom: 0.8rem;
    font-size: clamp(0.45rem, 0.55rem, 0.65rem);
    padding: 0.3rem 0.6rem;
  }
  
  .detailed-header {
    top: 1.5rem;
    width: 90%;
  }
  
  .project-navigation {
    padding: 0.4rem 0.8rem;
    gap: 0.8rem;
  }
  
  .nav-arrow {
    width: 26px;
    height: 26px;
    font-size: 1rem;
  }
  
  .project-counter {
    font-size: 0.8rem;
    min-width: 50px;
  }
}

@media (max-width: 768px) {
  .on-screen-button {
    bottom: 0.6rem;
    font-size: clamp(0.4rem, 0.5rem, 0.6rem);
    padding: 0.25rem 0.5rem;
    gap: 0.2rem;
  }
  
  .btn-icon {
    font-size: 0.7em;
  }
  
  .detailed-content {
    width: clamp(85vmin, 95vmin, 98vmin);
    height: clamp(85vmin, 95vmin, 98vmin);
  }
  
  .detailed-header {
    top: 1rem;
    width: 95%;
  }
  
  .detailed-close {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  
  .project-navigation {
    padding: 0.3rem 0.6rem;
    gap: 0.6rem;
  }
  
  .nav-arrow {
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
  }
  
  .project-counter {
    font-size: 0.75rem;
    min-width: 45px;
  }
  
  .detailed-project-info {
    width: 80%;
    height: 70%;
    padding: 1.5rem 0.8rem;
  }
  
  .detailed-project-info h2 {
    font-size: clamp(1.2rem, 1.5rem, 1.8rem);
    margin-bottom: 0.8rem;
  }
  
  .detailed-project-info .detailed-category {
    font-size: clamp(0.7rem, 0.8rem, 0.9rem);
    margin-bottom: 1rem;
  }
  
  .detailed-project-info .detailed-description {
    font-size: clamp(0.8rem, 0.9rem, 1rem);
    margin-bottom: 1.5rem;
  }
  
  .detailed-project-info .detailed-links {
    gap: 0.8rem;
    margin-top: 1.5rem;
  }
  
  .detailed-project-info .detailed-link {
    padding: 0.6rem 1.2rem;
    font-size: clamp(0.75rem, 0.8rem, 0.9rem);
  }
}

@media (max-width: 640px) {
  .on-screen-button {
    bottom: 0.5rem;
    font-size: 0.45rem;
    padding: 0.2rem 0.4rem;
  }
  
  .detailed-project-info {
    width: 85%;
    height: 75%;
  }
  
  .detailed-project-info h3 {
    font-size: clamp(0.9rem, 1rem, 1.1rem);
    margin: 1rem 0 0.5rem 0;
  }
  
  .detailed-project-info ul {
    font-size: clamp(0.75rem, 0.8rem, 0.9rem);
    padding-left: 1.2rem;
  }
  
  .detailed-project-info li {
    margin-bottom: 0.3rem;
  }
}

@media (max-width: 560px) {
  .on-screen-button {
    bottom: 0.4rem;
    font-size: 0.4rem;
    padding: 0.15rem 0.35rem;
  }
  
  .detailed-header {
    top: 0.8rem;
  }
  
  .detailed-project-info {
    width: 90%;
    height: 80%;
    padding: 1.2rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .on-screen-button {
    bottom: 0.3rem;
    font-size: 0.35rem;
    padding: 0.1rem 0.3rem;
  }
  
  .detailed-content {
    width: clamp(90vmin, 98vmin, 100vmin);
    height: clamp(90vmin, 98vmin, 100vmin);
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
  }
  
  .detailed-header {
    top: 0.5rem;
    width: 98%;
  }
  
  .detailed-close {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }
  
  .project-navigation {
    padding: 0.2rem 0.4rem;
    gap: 0.4rem;
  }
  
  .nav-arrow {
    width: 20px;
    height: 20px;
    font-size: 0.8rem;
  }
  
  .project-counter {
    font-size: 0.7rem;
    min-width: 40px;
  }
  
  .detailed-project-info {
    width: 95%;
    height: 85%;
    padding: 1rem 0.4rem;
  }
  
  .detailed-project-info h2 {
    font-size: clamp(1rem, 1.2rem, 1.4rem);
    margin-bottom: 0.6rem;
  }
  
  .detailed-project-info .detailed-category {
    font-size: clamp(0.6rem, 0.7rem, 0.8rem);
    margin-bottom: 0.8rem;
  }
  
  .detailed-project-info .detailed-description {
    font-size: clamp(0.7rem, 0.8rem, 0.9rem);
    margin-bottom: 1rem;
  }
  
  .detailed-project-info .detailed-links {
    gap: 0.6rem;
    margin-top: 1rem;
  }
  
  .detailed-project-info .detailed-link {
    padding: 0.5rem 1rem;
    font-size: clamp(0.65rem, 0.7rem, 0.8rem);
  }
}

@media (max-width: 375px) {
  .on-screen-button {
    bottom: 0.2rem;
    font-size: 0.3rem;
    padding: 0.08rem 0.25rem;
  }
  
  .detailed-project-info {
    width: 98%;
    height: 90%;
    padding: 0.8rem 0.3rem;
  }
  
  .detailed-project-info h2 {
    font-size: clamp(0.9rem, 1rem, 1.2rem);
    margin-bottom: 0.4rem;
  }
  
  .detailed-project-info .detailed-category {
    font-size: clamp(0.55rem, 0.6rem, 0.7rem);
    margin-bottom: 0.6rem;
  }
  
  .detailed-project-info .detailed-description {
    font-size: clamp(0.65rem, 0.7rem, 0.8rem);
    margin-bottom: 0.8rem;
  }
  
  .detailed-project-info h3 {
    font-size: clamp(0.8rem, 0.9rem, 1rem);
    margin: 0.8rem 0 0.4rem 0;
  }
  
  .detailed-project-info ul {
    font-size: clamp(0.65rem, 0.7rem, 0.8rem);
    padding-left: 1rem;
  }
  
  .detailed-project-info .detailed-links {
    gap: 0.4rem;
    margin-top: 0.8rem;
  }
  
  .detailed-project-info .detailed-link {
    padding: 0.4rem 0.8rem;
    font-size: clamp(0.6rem, 0.65rem, 0.75rem);
  }
}