:root {
  --neon-green: #00ffd5;
  --alert-red: #ff3b3b;
  --accent-pink: #ff6ad5;
}

:root {
  color-scheme: dark;
}

:root {
  --bg: #0b0b0b;
  --text: #eaeaea;
  --panel-bg: rgba(255, 255, 255, 0.03);
}

html[data-theme="light"] {
  --bg: #e0e0e0;          /* Light Gray Background */
  --text: #1a1a1a;        /* Dark Text */
  --panel-bg: rgba(0, 0, 0, 0.05);
  --neon-green: #006b5f;  /* Darker Teal for visibility */
  --alert-red: #cc0000;
}

@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace;
}

body {
  background: var(--bg);  /* ✅ USE VARIABLE */
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  font-size: 17px;
  transition: background 0.3s ease, color 0.3s ease;
}

/* INTRO BLOCK */

#intro {
  display: none;
  align-items: center;
  gap: 32px;
  margin-bottom: 32px;
}

#whoami.active #intro {
  display: flex;
}

.intro-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intro-right {
  max-width: 420px;
}

.intro-line {
  color: var(--neon-green);
  font-size: 1.05rem;
  line-height: 1.6;
}


/* THREE COLUMN LAYOUT */
#app {
  display: grid;
  grid-template-columns: 320px 1fr 45%;
  grid-template-rows: 1fr; /* 🔴 THIS IS WHAT YOU WERE MISSING */
  height: 100vh;
}

/* LEFT NAV */
#nav {
  padding: 30px;
}

#profile {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 0 0px 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  object-fit: cover;
  display: block;
  transition: filter 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

#profile:hover {
  filter: grayscale(0);
}

.side-nav button {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  position: relative;
  padding-bottom: 6px;

  color: var(--neon-green);
  margin: 10px 0;
  font-size: 1rem;
  letter-spacing: 0.5px;

  opacity: 0.75;
  transform: translateY(0);
  transition: color 0.25s ease, text-shadow 0.25s ease, opacity 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.side-nav button:hover {
  opacity: 1;
  text-shadow: 0 0 8px rgba(0, 255, 213, 0.7);
  transform: translateY(-3px);
}

/* underline */
.side-nav button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 0%;
  height: 2px;

  background: var(--neon-green);
  box-shadow: 0 0 8px rgba(0, 255, 213, 0.8);

  transition: width 0.25s ease;
}

.side-nav button:hover::after {
  width: 100%;
}

.side-nav button.active::after {
  width: 100%;
  background: var(--alert-red);
  box-shadow: 0 0 12px rgba(255, 59, 59, 0.9);
  animation: underlinePulse 2s ease-in-out infinite;
}

@keyframes underlinePulse {
  0% {
    opacity: 0.6;
    box-shadow: 0 0 6px rgba(255, 59, 59, 0.5);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 16px rgba(255, 59, 59, 1);
  }
  100% {
    opacity: 0.6;
    box-shadow: 0 0 6px rgba(255, 59, 59, 0.5);
  }
}

@keyframes breathe {
  0% {
    text-shadow: 0 0 6px rgba(255, 59, 59, 0.4);
    opacity: 0.85;
  }
  50% {
    text-shadow: 0 0 16px rgba(255, 59, 59, 0.9);
    opacity: 1;
  }
  100% {
    text-shadow: 0 0 6px rgba(255, 59, 59, 0.4);
    opacity: 0.85;
  }
}

.side-nav button.active {
  opacity: 1;
  font-weight: bold;
  color: var(--alert-red);
  transform: translateY(-6px);
  animation: breathe 2s ease-in-out infinite;
}


.panel h2,
.panel h3 {
  color: var(--neon-green);
}

.panel.active h2,
.panel.active h3 {
  color: var(--alert-red);
  animation: breathe 2s ease-in-out infinite;
}

/* MIDDLE CONTENT */
#content {
  /* 1. Force the container to fill the screen height */
  height: 100vh;
  width: 100%;
  
  /* 2. CRITICAL: This stops the box from shrinking to fit the text */
  align-self: stretch; 
  
  /* 3. Center the text inside the big box */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers vertically */
  align-items: center;     /* Centers horizontally */
  
  /* 4. Layout details */
  padding: 40px;
  overflow: visible;
  
}

.panel {
  display: none;
  width: 100%;
  max-width: 600px;
  margin: auto;
  /* --- FROSTY GLASS EFFECT --- */
  background: rgba(255, 255, 255, 0.03); /* Very subtle white tint */
  backdrop-filter: blur(12px);           /* The "Frost" blur */
  -webkit-backdrop-filter: blur(12px);   /* Safari support */
  
  /* Border & Shape */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  
  /* Inner Spacing */
  padding: 15px;
  
  /* Optional: Adds depth so it lifts off the background */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.panel.active {
  display: block;
  animation: fadeSlide 0.35s ease;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TERMINAL */
#terminal-box {
  background: transparent;
  padding: 0;
  border-radius: 0;
  position: relative;
  padding-top: 30px;

  height: auto;
  max-height: 420px;
  width: 520px;          /* try 520–560px */
  max-width: 90vw;

  overflow: hidden;
}

#terminal-output {
  white-space: pre-wrap;
}

/* RIGHT VISUAL */
#visual {
  position: relative;
  width: 100%;
  height: 100%;
}

#particles {
  width: 100%;
  height: 100%;
  display: block;
}

/* CURSOR */
.cursor {
  margin-left: -1px;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.skill-group {
  background: rgba(255, 255, 255, 0.05); /* Slightly lighter than panel */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  
  padding: 20px;
  margin-bottom: 24px;
  
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.skill-group:hover {
  transform: translateX(6px); /* Slide right on hover */
  background: rgba(255, 255, 255, 0.08);
  border-left-color: var(--alert-red); /* Color shift */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.skill-group h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  margin-bottom: 6px;
}

.skill-group ul {
  list-style: none;
  padding-left: 0;
}

.skill-group li {
  margin-bottom: 4px;
}

#whoami p {
  line-height: 1.6;
  max-width: 420px;
  opacity: 0.95;
  color: var(--neon-green);
}

#whoami br + br {
  display: block;
  content: "";
  margin-bottom: 10px;
}

/* WHOAMI HEADER ROW */

.whoami-header {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 0px;
}

.greeting-line {
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--neon-green);
  opacity: 0.8;
  margin-bottom: 2px; /* Pulls it close to the "Hi, I'm" header */
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
}

.whoami-header h1 {
  font-size: 2rem;
  white-space: nowrap;
  margin: 0;
}

/* WARNING */

.warning {
  color: #ffae00;
  font-size: 0.7rem;
  margin-top: 0px;     /* 👈 pulls it closer to the name */
  margin-bottom: 16px;
}

/* WHOAMI TEXT */

.whoami-text {
  color: var(--neon-green);
  line-height: 1.6;
  max-width: 540px;
}

.input-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.85;
}

.prompt {
  opacity: 0.6;
}

#terminal-input {
  background: transparent;
  border: none;
  outline: none;
  color: inherit;

  /* THE KEY FIX */
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;

  caret-color: transparent;
  font-family: monospace;
  font-size: 1rem;
}

.accent-red {
  color: var(--alert-red);
  text-shadow: 0 0 6px rgba(255, 59, 59, 0.7);
}

.accent-pink {
  color: var(--accent-pink);
  text-shadow: 0 0 6px rgba(255, 106, 213, 0.7);
}

#skills li,
#skills p {
  color: var(--neon-green);
}

#skills li {
  opacity: 0.9;
  white-space: nowrap;
}

/* CONTACT SECTION */

#contact {
  color: var(--neon-green);
  white-space: normal;     /* allow wrapping */
  overflow: visible;       /* prevent clipping */
}

#contact p {
  white-space: normal;
  word-break: break-word;  /* safety for long words */
}

.contact-line {
  margin-bottom: 14px;
  line-height: 1.5;
  white-space: nowrap;
}

.contact-line.subtle {
  opacity: 0.75;
  font-size: 0.95rem;
}

.contact-actions {
  margin-top: 24px;
  margin-bottom: 25px;
  display: flex;
  flex-direction: row; 
  align-items: flex-end;
  
  /* 👇 REDUCED GAP: Brings LinkedIn closer to GitHub */
  gap: 150px; 
  
  flex-wrap: wrap; 
}

.contact-actions .light-button:first-child {
  /* 👇 PUSH RIGHT: Adjust this value to move it further from the edge */
  margin-left: 70px; 
}

/* =========================
   GITHUB LIGHT BUTTON
   (Adapted to Neon Green Theme)
========================= */

.light-button {
  /* 1. Force the container to ignore the 200px light beam width */
  width: 100px; 
  
  /* 2. Scale from the bottom-right so it visually shifts towards LinkedIn */
  transform: scale(0.85); 
  transform-origin: bottom right;
  
  /* 3. Optional: Fine-tune the gap with negative margin if needed */
  margin-right: 0px; 
  
  position: relative;
  z-index: 1;
}

.light-button .bt {
  position: relative;
  height: 200px;
  display: flex;
  align-items: flex-end;
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none; /* Remove link underline */
}

.light-button .bt .button-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100px;
  
  /* Glassy Background to match OS Theme */
  background-color: rgba(255, 255, 255, 0.05); 
  border-radius: 5px;
  
  /* Text & Border Color */
  color: var(--neon-green);
  font-weight: 700;
  transition: 300ms;
  outline: var(--neon-green) 2px solid;
  outline-offset: 20px;
}

.light-button .bt .button-holder svg {
  height: 50px;
  fill: var(--neon-green);
  transition: 300ms;
}

.light-button .bt .light-holder {
  position: absolute;
  height: 200px;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.light-button .bt .light-holder .dot {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  background-color: var(--neon-green);
  border-radius: 10px;
  z-index: 2;
}

.light-button .bt .light-holder .light {
  position: absolute;
  top: 0;
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
  background: transparent;
  opacity: 0;
  transition: opacity 300ms;
}

/* --- HOVER EFFECTS --- */

.light-button .bt:hover .button-holder svg {
  fill: var(--alert-red); /* Changes icon to Red on hover */
}

.light-button .bt:hover .button-holder {
  color: var(--alert-red); /* Changes text to Red on hover */
  outline: var(--alert-red) 2px solid;
  outline-offset: 2px;
}

.light-button .bt:hover .light-holder .light {
  opacity: 1;
  /* Green Light Beam */
  background: linear-gradient(
    180deg,
    var(--neon-green) 0%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}


.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.icon-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  opacity: 0.85;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.icon-btn:hover svg {
  transform: translateY(-1px);
  opacity: 1;
}

/* CERTIFICATES */

.cert-grid {
  display: grid;
  /* Default: 1 column on mobile */
  grid-template-columns: 1fr; 
  gap: 16px;
}

@media (min-width: 700px) {
  .cert-grid {
    /* This creates the "4 on left, 4 on right" look */
    grid-template-columns: 1fr 1fr; 
  }
}

.cert-card {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(0, 255, 213, 0.25);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);

  color: var(--neon-green);
  background: rgba(0, 0, 0, 0.25);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


/* lift on hover */
.cert-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--alert-red);
  box-shadow: 0 0 16px rgba(255, 59, 59, 0.35);
}


/* title + meta */
.cert-title {
  font-weight: bold;
  margin-bottom: 4px;
  white-space: normal; /* ALLOW wrapping for long cert names */
  word-wrap: break-word;
}

.cert-meta {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* hidden details */
.cert-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease;
  margin-top: 8px;
}

/* reveal on hover */
.cert-card:hover .cert-details {
  max-height: 200px;
  opacity: 1;
}

/* proof link */
.cert-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--neon-green);
  text-decoration: none;
  position: relative;
}

.cert-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--neon-green);
  transition: width 0.25s ease;
}

.cert-link:hover::after {
  width: 100%;
}

#left {
  /* Use Flexbox to align the menu */
  display: flex;
  flex-direction: column;
  justify-content: center; /* This pushes the menu to the vertical center */
  align-items: flex-start;
  
  height: 100vh; /* Ensures the sidebar is as tall as the screen */
  padding: 40px;
  
  /* Remove the old grid rules to avoid conflicts */
  /* display: grid;  <-- DELETE THIS */
  /* grid-template-rows: auto 1fr; <-- DELETE THIS */
}

.side-nav {
  /* Structure */
  display: flex;
  flex-direction: column;
  gap: 4px; /* Consistent spacing between buttons */
  width: fit-content; /* Shrink-wrap the buttons */
  
  /* THE FROSTY LOOK */
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.1), 
    rgba(255, 255, 255, 0.0)
  );

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  
  /* Borders: A subtle "tech" rim */
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.3); /* Catching top light */
  border-left: 1px solid rgba(255, 255, 255, 0.3); /* Catching left light */
  border-radius: 16px;
  
  /* Spacing */
  padding: 24px 32px;
  
  /* Depth */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s ease;
}

.side-nav:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.15), 
    rgba(255, 255, 255, 0.01)
  );
}

/* Force single line, no clipping */
/* Update this block at the bottom of style.css */
#contact .single-line {
  white-space: nowrap;
  overflow: visible;
}

#footer-container {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 4px; /* Space between the witty text and the copyright */
}

/* The existing witty footer (Main JS targets this) */
#footer {
  font-size: 0.8rem;
  opacity: 0.6;
  color: var(--neon-green);
}

/* The new permanent footer */
#static-footer {
  font-size: 0.7rem; /* Slightly smaller */
  opacity: 0.4;      /* Slightly dimmer */
  color: var(--neon-green);
  font-family: monospace;
}

#static-footer .separator {
  margin: 0 6px;
  opacity: 0.5;
}

.coffee-icon {
  width: 12px;           /* Matches the 0.7rem font size */
  height: 12px;
  vertical-align: middle; /* Centers it with the text */
  margin-left: 2px;       /* Adds a tiny gap after 'by' */
  margin-bottom: 2px;     /* Fine-tune vertical alignment */
  opacity: 0.8;           /* Make it slightly brighter than the text */
}



#bouncer {
  position: fixed;
  top: 40px;
  left: 40px;
  padding: 6px 10px;

  font-size: 0.7rem;
  letter-spacing: 0.12em;

  color: var(--neon-green);
  border: 1px solid rgba(0, 255, 213, 0.3);
  border-radius: 4px;

  pointer-events: none;
  z-index: 999;

  box-shadow: 0 0 12px rgba(0, 255, 213, 0.3);
}

/* --- NUKE EFFECTS --- */

/* 1. The Screen Shake Class */
.shake-mode {
  animation: shake 0.1s infinite;
  background: #1a0000 !important; /* Dark red panic background */
}

/* 2. The Blinding White Flash */
.white-flash {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  z-index: 10000; /* Above everything */
  opacity: 1;
  pointer-events: none;
  animation: fadeOut 2s forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* 3. The "Kernel Panic" Overlay (Fake 404) */
#kernel-panic {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  color: #0f0; /* Retro terminal green */
  font-family: monospace;
  padding: 50px;
  z-index: 9999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ============================
   CHAOS MODE (DO NOT TOUCH)
============================ */

/* 1. The Broken Look */
body.chaos-mode {
  background: #000000 !important;
  color: #ff0000 !important;      /* Red Text */
  font-family: "Comic Sans MS", "Chalkboard SE", sans-serif !important;
  overflow: hidden; /* Stop scrolling while things fall */
}

body.chaos-mode #particles {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
}

#chaos-wrapper {
  position: fixed;
  /* Adjust position as needed */
  bottom: 40px; 
  right: 40px; 
  
  width: 100px;
  height: 100px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

/* 2. Spin the Profile Pic */
body.chaos-mode #profile {
  border-radius: 0 !important; /* Make it square */
  animation: deathSpin 0.5s linear infinite;
  border: 5px dashed red !important;
}

@keyframes deathSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 3. Gravity Failure (Falling Panels) */
body.chaos-mode .panel, 
body.chaos-mode .side-nav,
body.chaos-mode .cert-card {
  position: relative;
  /* Unhook from grid visually */
  box-shadow: none !important;
  background: rgba(255, 0, 0, 0.2) !important;
  border: 2px solid black !important;
  
  /* The Fall */
  animation: dropBounce 1.5s forwards ease-in;
}

/* Stagger the falls so they don't drop at once */
body.chaos-mode .side-nav { animation-delay: 0s; }
body.chaos-mode #whoami   { animation-delay: 0.1s; }
body.chaos-mode #skills   { animation-delay: 0.2s; }
body.chaos-mode #certs    { animation-delay: 0.3s; }
body.chaos-mode #contact  { animation-delay: 0.4s; }

/* The Physics of the Fall */
@keyframes dropBounce {
  0% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(80vh) rotate(10deg); }
  60% { transform: translateY(65vh) rotate(-5deg); }
  80% { transform: translateY(80vh) rotate(2deg); }
  100% { 
    transform: translateY(120vh) rotate(45deg); /* Fall off screen eventually */
    opacity: 0;
  }
}

/* 4. The Button Style */
#chaos-btn {
  position: relative; /* Reset from absolute */
  top: auto;
  left: auto;
  transform: none; /* Remove old transform centering */
  
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--alert-red);
  color: var(--alert-red);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 2; /* Sit on top of text */
  transition: all 0.3s ease;
}

#chaos-btn:hover {
  background: var(--alert-red);
  color: black;
  box-shadow: 0 0 20px var(--alert-red);
  transform: scale(1.1);
}

.ring-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let clicks pass through to button */
  z-index: 1;
  animation: spinText 10s linear infinite;
}

.ring-text text {
  font-family: monospace;
  fill: var(--alert-red);
  letter-spacing: 2px;
  opacity: 0.7;
  font-weight: bold;
}

@keyframes spinText {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* MOBILE FIX */
@media (max-width: 900px) {
  #chaos-wrapper {
    bottom: 20px;
    right: 20px;
    transform: scale(0.8); /* Make it smaller on phones */
  }
}

#reboot-btn {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999; /* Increased to sit above falling UI */
  
  /* DEFAULT: GREEN (Your existing style) */
  background: #000; /* Added black bg to read text over debris */
  color: var(--neon-green);
  font-family: monospace;
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 2px;
  
  padding: 15px 30px;
  border: 2px solid var(--neon-green);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 255, 213, 0.2);
  
  /* ANIMATION */
  animation: fadeIn 0.5s ease-in-out;
}

#reboot-btn.critical {
  color: #000;
  background: var(--alert-red);
  border-color: #fff;
  box-shadow: 0 0 40px rgba(255, 0, 0, 0.8);
  animation: pulseBtn 1s infinite; /* Attention grabbing pulse */
}

#reboot-btn:hover {
  transform: translate(-50%, -50%) scale(1.05);
  background: #fff;
  color: #000;
}

@keyframes pulseBtn {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -40%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

#visual.falling {
  animation: sphereDrop 1s forwards cubic-bezier(0.5, 0, 0.75, 0); /* Heavy fall easing */
}

@keyframes sphereDrop {
  0% { 
    transform: translateY(0); 
  }
  20% { 
    transform: translateY(-50px); /* Cartoonish "up before down" anticipation */
  }
  100% { 
    transform: translateY(150vh); /* Straight into hell */
    opacity: 0;
  }
}

/* --- SPARKLE TEXT EFFECT --- */

/* --- SPARKLE WRAPPER --- */
.sparkle-wrapper {
  position: relative;
  display: inline-block;
  z-index: 10; /* Ensure it sits above background particles */
}

/* LOCK THE COLOR: This ensures the text stays red on hover/animation */
.sparkle-wrapper .accent-red {
  color: var(--alert-red) !important; 
  position: relative;
  z-index: 2; /* Text sits on top of stars */
  display: inline-block;
}

/* --- THE STARS --- */
.sparkle-star {
  position: absolute;
  pointer-events: none;
  z-index: 1; /* Stars sit behind/around text */
  animation: sparklePop 1s ease-in-out forwards;
}

/* SVG Fill Logic */
.sparkle-star svg {
  width: 100%;
  height: 100%;
}

@keyframes sparklePop {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(90deg);
    opacity: 1;
  }
  100% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
}

/* --- COMIC TEXT EFFECT --- */
.comic-text {
  font-family: 'Bangers', cursive !important; /* Force comic font */
  font-size: 3.5rem !important;               /* Make it HUGE */
  letter-spacing: 2px;
  
  /* Comic Gradient (Yellow to Orange) */
  background: linear-gradient(180deg, #ffd000, #ff3b3b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* The Outline */
  -webkit-text-stroke: 1px #fff; 
  
  /* The Hard Shadow (Pop Art Style) */
  filter: drop-shadow(4px 4px 0px rgba(0, 255, 213, 0.4));
  
  /* Comic Tilt */
  transform: rotate(-3deg);
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
  
  /* Smooth interaction */
  transition: transform 0.2s ease, filter 0.2s ease;
  z-index: 10;
}

/* Hover Interaction */
.comic-text:hover {
  transform: scale(1.1) rotate(2deg); /* Snap to opposite tilt */
  filter: drop-shadow(6px 6px 0px var(--accent-pink)); /* Change shadow color */
  cursor: help;
}

/* --- COOL BUTTON --- */
#cool-wrapper {
  position: fixed;
  bottom: 40px;
  left: 40px;
  z-index: 9999;
}

#cool-btn {
  background: black;
  color: cyan;
  border: 2px solid cyan;
  font-family: 'Bangers', cursive; /* Matches your comic vibe */
  font-size: 1.2rem;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 4px 4px 0px rgba(0, 255, 255, 0.4);
  transition: all 0.2s ease;
  letter-spacing: 1px;
}

#cool-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px rgba(255, 0, 255, 0.6);
  border-color: magenta;
  color: magenta;
}

/* ============================
   😎 COOL MODE (HOLOGRAPHIC ICE)
============================ */

/* 1. Global Color Shift -> Icy Blue */
body.cool-mode {
  --neon-green: #00ffff; /* Pure Cyan */
  --alert-red: #ffffff;  /* Accents become pure white */
}

/* 2. Glassy Borders & Glow */
body.cool-mode .panel,
body.cool-mode .side-nav,
body.cool-mode button, 
body.cool-mode a {
  position: relative;
  background: rgba(0, 255, 255, 0.05); /* Very subtle blue tint */
  border-color: rgba(0, 255, 255, 0.5) !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2); /* Soft ambient glow */
  
  /* Gentle Float Animation */
  animation: float 4s ease-in-out infinite; 
}

/* 3. The "Scanner" Border Effect */
/* Instead of a rainbow, a beam of light travels around the border */
body.cool-mode .panel::before,
body.cool-mode .side-nav::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  padding: 1px; /* Border width */
  
  /* The Beam Gradient */
  background: linear-gradient(90deg, transparent, #fff, transparent);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  /* Make the beam move */
  background-size: 200% 100%;
  animation: scanBeam 3s linear infinite;
  opacity: 0.8;
  pointer-events: none;
}

/* 4. Text - Crisp & Glowing */
body.cool-mode h1, 
body.cool-mode h2, 
body.cool-mode h3 {
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); /* Clean glow, no colors */
  color: white;
}

/* 5. Profile Pic - Hologram Style */
body.cool-mode #profile {
  filter: grayscale(100%) brightness(1.2) drop-shadow(0 0 8px cyan);
  border: 2px solid cyan;
  /* Scanline animation */
  animation: hologramFlicker 4s infinite;
}

/* ANIMATIONS */

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); } /* Higher float */
  100% { transform: translateY(0px); }
}

@keyframes scanBeam {
  0% { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}

@keyframes hologramFlicker {
  0% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; transform: skewX(2deg); }
  94% { opacity: 1; transform: skewX(0deg); }
  96% { opacity: 1; }
  97% { opacity: 0.9; transform: skewX(-2deg); }
  98% { opacity: 1; transform: skewX(0deg); }
  100% { opacity: 1; }
}

/* --- MARKER HIGHLIGHT EFFECT --- */
.marker-highlight {
  position: relative;
  display: inline-block;
  z-index: 1;
  
  /* Force text to black so it's readable on the yellow ink */
  color: #000 !important;
  text-shadow: none !important;
  font-weight: bold;
  
  /* Spacing to let the ink bleed a little */
  padding: 2px 6px;
  margin: 0 2px;
}

.marker-highlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: -4px;
  right: -4px;
  bottom: 0;
  
  /* The SVG Image of a Marker Stroke (Matches your #ffae00 warning color) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 150' preserveAspectRatio='none'%3E%3Cpath d='M9.3,103.5c17.5-3.3,130-18,247.2-22.3c114.7-4.2,231.7-2.6,234.2-2.3' stroke='%23ffae00' stroke-width='75' fill='none' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E") no-repeat center center;
  
  background-size: 100% 100%;
  
  /* A slight tilt to make it look hand-drawn */
  transform: rotate(-1.5deg);
  opacity: 0.9;
}

/* Add a slight hover wobble for interactivity */
.marker-highlight:hover::before {
  transform: rotate(1deg) scale(1.02);
  transition: transform 0.2s ease;
}

/* --- METEOR SHOWER EFFECT --- */
.meteor {
  position: fixed;
  top: 0;
  width: 300px;  /* Length of the tail */
  height: 2px;   /* Thickness */
  
  /* Cyan/White Gradient Tail */
  background: linear-gradient(90deg, #ffffff, #00ffff, transparent);
  box-shadow: 0 0 10px #00ffff; /* Glowing Aura */
  
  /* Rotate 45 degrees for diagonal fall */
  transform: rotate(-45deg);
  transform-origin: left;
  
  pointer-events: none; /* Click-through */
  z-index: 1; /* Behind text, in front of background */
  opacity: 0;
  animation: meteorFall linear forwards;
}

@keyframes meteorFall {
  0% {
    transform: translate(0, 0) rotate(-45deg);
    opacity: 1;
  }
  100% {
    /* Travel far down-left across the screen */
    transform: translate(-120vh, 120vh) rotate(-45deg);
    opacity: 0;
  }
}

@media (pointer: fine) {
  body, button, a {
    cursor: none !important;
  }
}

#physics-cursor {
  position: fixed;
  /* Remove top/left 0 if they are interfering */
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  z-index: 999999;
  pointer-events: none;
  color: var(--neon-green);
  
  /* Critical: Ensure it starts at a neutral state */
  transform: translate3d(-100px, -100px, 0); 
  will-change: transform;
  display: block !important;
}

#physics-cursor svg {
  width: 100%;
  height: 100%;
}

/* Red hover state to match your 'active' panel colors */
#physics-cursor.hover {
  color: var(--alert-red);
  filter: drop-shadow(0 0 8px var(--alert-red));
  transform-origin: center;
  scale: 1.2;
}

/* Theme Adaptations */
body.chaos-mode #physics-cursor {
  color: #ff0000;
  animation: jitter 0.1s infinite;
}

@keyframes jitter {
  0% { transform: translate(1px, 1px); }
  50% { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

body.cool-mode #physics-cursor {
  color: #00ffff;
}

/* =========================
   SINGLE BOOT LOADER
========================= */

#boot-loader {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;

  /* HARD ISOLATION */
  isolation: isolate;
}

.boot-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* =========================
   GLITCH TEXT
========================= */

.boot-text {
  font-family: monospace;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 6px;
  color: #00ffd5;
  position: relative;
  text-align: center;
  white-space: nowrap;

}

/* RGB glitch layers */
.boot-text::before,
.boot-text::after {
  content: attr(data-text);
  content: attr(data-text) "...";
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
  pointer-events: none;
}

.boot-text::before {
  color: #ff3b3b;
  transform: translate(-2px, 0);
}

.boot-text::after {
  color: #00ff99;
  transform: translate(2px, 0);
}

/* Active glitch */
.glitch {
  animation: glitch-move 0.12s steps(2) infinite;
}

.glitch::before {
  animation: glitch-left 0.12s steps(2) infinite;
}

.glitch::after {
  animation: glitch-right 0.12s steps(2) infinite;
}

@keyframes glitch-move {
  0% { transform: translate(0); }
  50% { transform: translate(-1px, 1px); }
  100% { transform: translate(0); }
}

@keyframes glitch-left {
  0% { transform: translate(-2px, 0); }
  50% { transform: translate(-4px, 2px); }
  100% { transform: translate(-2px, 0); }
}

@keyframes glitch-right {
  0% { transform: translate(2px, 0); }
  50% { transform: translate(4px, -2px); }
  100% { transform: translate(2px, 0); }
}

/* =========================
   PROGRESS BAR
========================= */

.boot-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
}

.boot-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    #00ffd5,
    #ff3b3b
  );
  transition: width 0.25s ease;
}

/* =========================
   LOADING DOTS
========================= */

.dots {
  display: inline-block;
  width: 1.2em;          /* lock width → no layout shift */
  text-align: left;
}

.dots.freeze::before {
  animation: none;
  content: "...";
}

/* =========================
   SYSTEM VITALS OVERLAY
========================= */

#system-vitals {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: monospace;
  color: #ff4d4f;
}

#system-vitals.hidden {
  display: none;
}

.vitals-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.vitals-label {
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  opacity: 0.8;
}

/* ECG loader (your code) */

.loading svg polyline {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loading svg polyline#back {
  stroke: #ff4d5033;
}

.loading svg polyline#front {
  stroke: #ff4d4f;
  stroke-dasharray: 48, 144;
  stroke-dashoffset: 192;
  animation: dash_682 1.4s linear infinite;
}

@keyframes dash_682 {
  72.5% {
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.vitals-text {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* =========================
   TERMINAL HEART (SVG)
========================= */

.love {
  position: absolute;
  top: 14px;
  right: 60px;
  z-index: 3;
}

.love input {
  display: none;
}

.heart-svg {
  cursor: pointer;
  display: inline-block;
}

.heart-svg svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 1.6;
  transition: all 0.3s ease;
}

.love input:checked + .heart-svg svg {
  fill: #ff4d6d;
  stroke: #ff4d6d;
  transform: scale(1.15);
}

/* POSITIONING FIX */
.bb8-toggle {
  /* Scale down slightly if it's too big */
  transform: scale(0.6); 
  transform-origin: top right;
  /* Ensure variable flows through */
  --toggle-size: 16px; 
}

/* REMASTERED */
/* RTX-ON */
/* completely redone toggle and droid */

.bb8-toggle {
  --toggle-size: 16px;
  /* finally I removed the scale now everything depends on the font-size */
  /* --margin-top-for-head: 1.75em; */
  /* it's just in case 👆 */
  --toggle-width: 10.625em;
  --toggle-height: 5.625em;
  --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);
  --toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4)
    no-repeat;
  --bb8-diameter: 4.375em;
  --radius: 99em;
  --transition: 0.4s;
  --accent: #de7d2f;
  --bb8-bg: #fff;
}

.bb8-toggle,
.bb8-toggle *,
.bb8-toggle *::before,
.bb8-toggle *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.bb8-toggle {
  cursor: pointer;
  margin-top: var(--margin-top-for-head);
  font-size: var(--toggle-size);
}

.bb8-toggle__checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}

.bb8-toggle__container {
  width: var(--toggle-width);
  height: var(--toggle-height);
  background: var(--toggle-bg);
  background-size: 100% 11.25em;
  background-position-y: -5.625em;
  border-radius: var(--radius);
  position: relative;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: calc(var(--toggle-offset) - 1.688em + 0.188em);
  left: var(--toggle-offset);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 2;
}

.bb8__head-container {
  position: relative;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 2;
  -webkit-transform-origin: 1.25em 3.75em;
  -ms-transform-origin: 1.25em 3.75em;
  transform-origin: 1.25em 3.75em;
}

.bb8__head {
  overflow: hidden;
  margin-bottom: -0.188em;
  width: 2.5em;
  height: 1.688em;
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    linear-gradient(
      45deg,
      transparent 0.188em,
      var(--bb8-bg) 0.188em 1.25em,
      transparent 1.25em
    ),
    linear-gradient(
      -45deg,
      transparent 0.188em,
      var(--bb8-bg) 0.188em 1.25em,
      transparent 1.25em
    ),
    linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
  z-index: 1;
  -webkit-filter: drop-shadow(0 0.063em 0.125em gray);
  filter: drop-shadow(0 0.063em 0.125em gray);
}

.bb8__head::before {
  content: "";
  position: absolute;
  width: 0.563em;
  height: 0.563em;
  background: -o-radial-gradient(
      0.25em 0.375em,
      0.125em circle,
      red,
      transparent
    ),
    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
          100%),
    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  background: -o-radial-gradient(
      0.25em 0.375em,
      0.125em circle,
      red,
      transparent
    ),
    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
          100%),
    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  background: -o-radial-gradient(
      0.25em 0.375em,
      0.125em circle,
      red,
      transparent
    ),
    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
          100%),
    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  background: -o-radial-gradient(
      0.25em 0.375em,
      0.125em circle,
      red,
      transparent
    ),
    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
          100%),
    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  background: radial-gradient(
      0.125em circle at 0.25em 0.375em,
      red,
      transparent
    ),
    radial-gradient(
      0.063em circle at 0.375em 0.188em,
      var(--bb8-bg) 50%,
      transparent 100%
    ),
    linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  border-radius: var(--radius);
  top: 0.413em;
  left: 50%;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
  -webkit-box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
  box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
  z-index: 1;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__head::after {
  content: "";
  position: absolute;
  bottom: 0.375em;
  left: 0;
  width: 100%;
  height: 0.188em;
  background: -o-linear-gradient(
    left,
    var(--accent) 0.125em,
    transparent 0.125em 0.188em,
    var(--accent) 0.188em 0.313em,
    transparent 0.313em 0.375em,
    var(--accent) 0.375em 0.938em,
    transparent 0.938em 1em,
    var(--accent) 1em 1.125em,
    transparent 1.125em 1.875em,
    var(--accent) 1.875em 2em,
    transparent 2em 2.063em,
    var(--accent) 2.063em 2.25em,
    transparent 2.25em 2.313em,
    var(--accent) 2.313em 2.375em,
    transparent 2.375em 2.438em,
    var(--accent) 2.438em
  );
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.125em, var(--accent)),
    color-stop(0.125em, transparent),
    color-stop(0.188em, var(--accent)),
    color-stop(0.313em, transparent),
    color-stop(0.375em, var(--accent)),
    color-stop(0.938em, transparent),
    color-stop(1em, var(--accent)),
    color-stop(1.125em, transparent),
    color-stop(1.875em, var(--accent)),
    color-stop(2em, transparent),
    color-stop(2.063em, var(--accent)),
    color-stop(2.25em, transparent),
    color-stop(2.313em, var(--accent)),
    color-stop(2.375em, transparent),
    color-stop(2.438em, var(--accent))
  );
  background: linear-gradient(
    to right,
    var(--accent) 0.125em,
    transparent 0.125em 0.188em,
    var(--accent) 0.188em 0.313em,
    transparent 0.313em 0.375em,
    var(--accent) 0.375em 0.938em,
    transparent 0.938em 1em,
    var(--accent) 1em 1.125em,
    transparent 1.125em 1.875em,
    var(--accent) 1.875em 2em,
    transparent 2em 2.063em,
    var(--accent) 2.063em 2.25em,
    transparent 2.25em 2.313em,
    var(--accent) 2.313em 2.375em,
    transparent 2.375em 2.438em,
    var(--accent) 2.438em
  );
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__antenna {
  position: absolute;
  -webkit-transform: translateY(-90%);
  -ms-transform: translateY(-90%);
  transform: translateY(-90%);
  width: 0.059em;
  border-radius: var(--radius) var(--radius) 0 0;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__antenna:nth-child(1) {
  height: 0.938em;
  right: 0.938em;
  background: -o-linear-gradient(#000 0.188em, silver 0.188em);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.188em, #000),
    color-stop(0.188em, silver)
  );
  background: linear-gradient(#000 0.188em, silver 0.188em);
}

.bb8__antenna:nth-child(2) {
  height: 0.375em;
  left: 50%;
  -webkit-transform: translate(-50%, -90%);
  -ms-transform: translate(-50%, -90%);
  transform: translate(-50%, -90%);
  background: silver;
}

.bb8__body {
  width: 4.375em;
  height: 4.375em;
  background: var(--bb8-bg);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 1;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: -webkit-gradient(
      linear,
      right top,
      left top,
      color-stop(4%, var(--bb8-bg)),
      color-stop(4%, var(--accent)),
      color-stop(10%, transparent),
      color-stop(90%, var(--accent)),
      color-stop(96%, var(--bb8-bg))
    ),
    -webkit-gradient(linear, left top, left bottom, color-stop(4%, var(--bb8-bg)), color-stop(4%, var(--accent)), color-stop(10%, transparent), color-stop(90%, var(--accent)), color-stop(96%, var(--bb8-bg))),
    -webkit-gradient(linear, left top, right top, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent)),
    -webkit-gradient(linear, left top, left bottom, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent));
  background: -o-linear-gradient(
      right,
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    -o-linear-gradient(var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10%
          90%, var(--accent) 90% 96%, var(--bb8-bg) 96%),
    -o-linear-gradient(left, transparent 2.156em, silver 2.156em 2.219em, transparent
          2.188em),
    -o-linear-gradient(transparent 2.156em, silver 2.156em 2.219em, transparent
          2.188em);
  background: linear-gradient(
      -90deg,
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    linear-gradient(
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    linear-gradient(
      to right,
      transparent 2.156em,
      silver 2.156em 2.219em,
      transparent 2.188em
    ),
    linear-gradient(
      transparent 2.156em,
      silver 2.156em 2.219em,
      transparent 2.188em
    );
  background-color: var(--bb8-bg);
}

.bb8__body::after {
  content: "";
  bottom: 1.5em;
  left: 0.563em;
  position: absolute;
  width: 0.188em;
  height: 0.188em;
  background: rgb(236, 236, 236);
  color: rgb(236, 236, 236);
  border-radius: 50%;
  -webkit-box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em,
    2.125em -2.125em, 3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
  box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em,
    3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
}

.bb8__body::before {
  content: "";
  width: 2.625em;
  height: 2.625em;
  position: absolute;
  border-radius: 50%;
  z-index: 0.1;
  overflow: hidden;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0.313em solid var(--accent);
  background: -o-radial-gradient(
      center,
      1em circle,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%),
    -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent
          58%),
    -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg)
          58%);
  background: -o-radial-gradient(
      center,
      1em circle,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%),
    -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent
          58%),
    -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg)
          58%);
  background: radial-gradient(
      1em circle at center,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
    -webkit-gradient(linear, right top, left top, color-stop(42%, transparent), color-stop(42%, var(--accent)), color-stop(58%, transparent)),
    -webkit-gradient(linear, left top, left bottom, color-stop(42%, var(--bb8-bg)), color-stop(42%, var(--accent)), color-stop(58%, var(--bb8-bg)));
  background: radial-gradient(
      1em circle at center,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
    linear-gradient(
      -90deg,
      transparent 42%,
      var(--accent) 42% 58%,
      transparent 58%
    ),
    linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%);
}

.artificial__hidden {
  position: absolute;
  border-radius: inherit;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bb8__shadow {
  content: "";
  width: var(--bb8-diameter);
  height: 20%;
  border-radius: 50%;
  background: #3a271c;
  -webkit-box-shadow: 0.313em 0 3.125em #3a271c;
  box-shadow: 0.313em 0 3.125em #3a271c;
  opacity: 0.25;
  position: absolute;
  bottom: 0;
  left: calc(var(--toggle-offset) - 0.938em);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: skew(-70deg);
  -ms-transform: skew(-70deg);
  transform: skew(-70deg);
  z-index: 1;
}

.bb8-toggle__scenery {
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  position: relative;
  border-radius: inherit;
}

.bb8-toggle__scenery::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  background: #b18d71;
  z-index: 1;
}

.bb8-toggle__cloud {
  z-index: 1;
  position: absolute;
  border-radius: 50%;
}

.bb8-toggle__cloud:nth-last-child(1) {
  width: 0.875em;
  height: 0.625em;
  -webkit-filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
  filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
  right: 1.875em;
  top: 2.813em;
  background: -o-linear-gradient(bottom left, #ffffffae, #ffffffae);
  background: -webkit-gradient(
    linear,
    left bottom,
    right top,
    from(#ffffffae),
    to(#ffffffae)
  );
  background: linear-gradient(to top right, #ffffffae, #ffffffae);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8-toggle__cloud:nth-last-child(2) {
  top: 0.625em;
  right: 4.375em;
  width: 0.875em;
  height: 0.375em;
  background: #dfdedeae;
  -webkit-filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
  filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.bb8-toggle__cloud:nth-last-child(3) {
  top: 1.25em;
  right: 0.938em;
  width: 0.875em;
  height: 0.375em;
  background: #ffffffae;
  -webkit-filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
    drop-shadow(-0.625em 0.313em #ffffffae);
  filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
    drop-shadow(-0.625em 0.313em #ffffffae);
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

.gomrassen,
.hermes,
.chenini {
  position: absolute;
  border-radius: var(--radius);
  background: -o-linear-gradient(#fff, #6e8ea2);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fff),
    to(#6e8ea2)
  );
  background: linear-gradient(#fff, #6e8ea2);
  top: 100%;
}

.gomrassen {
  left: 0.938em;
  width: 1.875em;
  height: 1.875em;
  -webkit-box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
  box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.gomrassen::before,
.gomrassen::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  -webkit-box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
  box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
  background: rgb(184, 196, 200);
}

.gomrassen::before {
  left: 0.313em;
  top: 0.313em;
  width: 0.438em;
  height: 0.438em;
}

.gomrassen::after {
  width: 0.25em;
  height: 0.25em;
  left: 1.25em;
  top: 0.75em;
}

.hermes {
  left: 3.438em;
  width: 0.625em;
  height: 0.625em;
  -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.chenini {
  left: 4.375em;
  width: 0.5em;
  height: 0.5em;
  -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

.tatto-1,
.tatto-2 {
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  border-radius: var(--radius);
}

.tatto-1 {
  background: #fefefe;
  right: 3.125em;
  top: 0.625em;
  -webkit-box-shadow: 0 0 0.438em #fdf4e1;
  box-shadow: 0 0 0.438em #fdf4e1;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.tatto-2 {
  background: -o-linear-gradient(#e6ac5c, #d75449);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#e6ac5c),
    to(#d75449)
  );
  background: linear-gradient(#e6ac5c, #d75449);
  right: 1.25em;
  top: 2.188em;
  -webkit-box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
  box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
  -webkit-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

.bb8-toggle__star {
  position: absolute;
  width: 0.063em;
  height: 0.063em;
  background: #fff;
  border-radius: var(--radius);
  -webkit-filter: drop-shadow(0 0 0.063em #fff);
  filter: drop-shadow(0 0 0.063em #fff);
  color: #fff;
  top: 100%;
}

.bb8-toggle__star:nth-child(1) {
  left: 3.75em;
  -webkit-box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
    -3.125em 1.875em, 1.25em 2.813em;
  box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
    -3.125em 1.875em, 1.25em 2.813em;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.bb8-toggle__star:nth-child(2) {
  left: 4.688em;
  -webkit-box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
    -3.125em 1.25em, 1.25em -1.563em;
  box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
    -3.125em 1.25em, 1.25em -1.563em;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.bb8-toggle__star:nth-child(3) {
  left: 5.313em;
  -webkit-box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0,
    -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
  box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em,
    -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8-toggle__star:nth-child(4) {
  left: 1.875em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.bb8-toggle__star:nth-child(5) {
  left: 5em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.bb8-toggle__star:nth-child(6) {
  left: 2.5em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

.bb8-toggle__star:nth-child(7) {
  left: 3.438em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

/* actions */

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(1) {
  top: 0.625em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(2) {
  top: 1.875em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(3) {
  top: 1.25em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(4) {
  top: 3.438em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(5) {
  top: 3.438em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(6) {
  top: 0.313em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(7) {
  top: 1.875em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud {
  right: -100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen {
  top: 0.938em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes {
  top: 2.5em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini {
  top: 2.75em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container {
  background-position-y: 0;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 {
  top: 100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 {
  top: 100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 {
  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset));
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow {
  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset) + 0.938em);
  -webkit-transform: skew(70deg);
  -ms-transform: skew(70deg);
  transform: skew(70deg);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(225deg);
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before {
  left: 100%;
}

.bb8-toggle__checkbox:not(:checked):hover
  + .bb8-toggle__container
  .bb8__antenna:nth-child(1) {
  right: 1.5em;
}

.bb8-toggle__checkbox:hover
  + .bb8-toggle__container
  .bb8__antenna:nth-child(2) {
  left: 0.938em;
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after {
  background-position: 1.375em 0;
}

.bb8-toggle__checkbox:checked:hover
  + .bb8-toggle__container
  .bb8__head::before {
  left: 0;
}

.bb8-toggle__checkbox:checked:hover
  + .bb8-toggle__container
  .bb8__antenna:nth-child(2) {
  left: calc(100% - 0.938em);
}

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after {
  background-position: -1.375em 0;
}

.bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container {
  -webkit-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  transform: rotate(25deg);
}

.bb8-toggle__checkbox:checked:active
  + .bb8-toggle__container
  .bb8__head-container {
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

.bb8:hover .bb8__head::before,
.bb8:hover .bb8__antenna:nth-child(2) {
  left: 50% !important;
}

.bb8:hover .bb8__antenna:nth-child(1) {
  right: 0.938em !important;
}

.bb8:hover .bb8__head::after {
  background-position: 0 0 !important;
}



/* =========================
   MISC: FREELY FLOATING ASTRONAUT
   [cite_start][cite: 1, 3, 4, 13, 14]
========================= */

/* Make sure the panel allows overflow so Astro can fly around */
#misc {
  /* 1. Define strict height limits so scrolling triggers */
  max-height: 80vh;
  min-height: 400px;
  
  /* 2. Enable Scroll, Disable Overflow */
  overflow-y: auto !important; /* !important overrides previous settings */
  overflow-x: hidden;
  position: relative;
  
  /* 3. Aesthetic Scrollbar (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--neon-green) rgba(0, 0, 0, 0.1);
}

/* 4. Custom Scrollbar (Chrome/Safari/Edge) */
#misc::-webkit-scrollbar {
  width: 6px;
}

#misc::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

#misc::-webkit-scrollbar-thumb {
  background: var(--neon-green);
  border-radius: 4px;
  opacity: 0.8;
}

#misc::-webkit-scrollbar-thumb:hover {
  background: var(--alert-red); /* Turns red on hover */
}

/* --- ANIMATIONS --- */

@keyframes snow {
  0% { opacity: 0; transform: translateY(-100px); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: translateY(100vh); } /* Fall down the whole screen */
}

@keyframes astronaut {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* --- STARS --- */

.box-of-star1, .box-of-star2, .box-of-star3, .box-of-star4 {
  width: 100%;
  position: fixed; /* Fixed to screen, not just panel */
  z-index: 0; /* Behind text */
  left: 0;
  top: 0;
  height: 100vh;
  pointer-events: none; /* Let clicks pass through */
}

.box-of-star1 { animation: snow 5s linear infinite; }
.box-of-star2 { animation: snow 5s -1.64s linear infinite; }
.box-of-star3 { animation: snow 5s -2.30s linear infinite; }
.box-of-star4 { animation: snow 5s -3.30s linear infinite; }

.star {
  width: 3px; height: 3px;
  border-radius: 50%;
  background-color: var(--neon-green); /* Match theme color */
  position: absolute;
  z-index: 10;
  opacity: 0.7;
}

.star:before {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%; background-color: var(--neon-green);
  position: absolute; z-index: 10;
  top: 80px; left: 70px; opacity: .7;
}

.star:after {
  content: ""; width: 8px; height: 8px;
  border-radius: 50%; background-color: var(--neon-green);
  position: absolute; z-index: 10;
  top: 8px; left: 170px; opacity: .9;
}

/* Star positions */
.star-position1 { top: 30px; left: 20px; }
.star-position2 { top: 110px; left: 250px; }
.star-position3 { top: 60px; left: 570px; }
.star-position4 { top: 120px; left: 900px; }
.star-position5 { top: 20px; left: 1120px; }
.star-position6 { top: 90px; left: 1280px; }
.star-position7 { top: 30px; left: 1480px; }

/* --- ASTRONAUT BODY --- */

.astronaut {
  width: 250px;
  height: 300px;
  position: absolute;
  z-index: 11;

  /* ✅ FIX: Moves astronaut down to clear the radar */
  /* Radar is at 15%. Radar height is 150px. We add 20px gap. */
  top: calc(15% + 170px); 

  /* Keep horizontal centering */
  left: calc(50% - 125px);

  /* Restore the rotation animation */
  animation: astronaut 5s linear infinite;
}

.schoolbag {
  width: 100px; height: 150px;
  position: absolute; z-index: 1;
  top: calc(50% - 75px); left: calc(50% - 50px);
  background-color: #94b7ca;
  border-radius: 50px 50px 0 0 / 30px 30px 0 0;
}

.head {
  width: 97px; height: 80px;
  position: absolute; z-index: 3;
  background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
  border-radius: 50%;
  top: 34px; left: calc(50% - 47.5px);
}

.head:after {
  content: ""; width: 60px; height: 50px;
  position: absolute;
  top: calc(50% - 25px); left: calc(50% - 30px);
  background: -webkit-linear-gradient(top, #15aece 0%, #15aece 50%, #0391bf 50%, #0391bf 100%);
  border-radius: 15px;
}

.head:before {
  content: ""; width: 12px; height: 25px;
  position: absolute;
  top: calc(50% - 12.5px); left: -4px;
  background-color: #618095;
  border-radius: 5px;
  box-shadow: 92px 0px 0px #618095;
}

.body {
  width: 85px; height: 100px;
  position: absolute; z-index: 2;
  background-color: #fffbff;
  border-radius: 40px / 20px;
  top: 105px; left: calc(50% - 41px);
  background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
}

.panel-astro {
  width: 60px; height: 40px;
  position: absolute;
  top: 20px; left: calc(50% - 30px);
  background-color: #b7cceb;
}

.panel-astro:before {
  content: ""; width: 30px; height: 5px;
  position: absolute;
  top: 9px; left: 7px;
  background-color: #fbfdfa;
  box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa;
}

.panel-astro:after {
  content: ""; width: 8px; height: 8px;
  position: absolute;
  top: 9px; right: 7px;
  background-color: #fbfdfa;
  border-radius: 50%;
  box-shadow: 0px 14px 0px 2px #fbfdfa;
}

.arm {
  width: 80px; height: 30px;
  position: absolute; top: 121px; z-index: 2;
}

.arm-left {
  left: 30px;
  background-color: #e3e8eb;
  border-radius: 0 0 0 39px;
}

.arm-right {
  right: 30px;
  background-color: #fbfdfa;
  border-radius: 0 0 39px 0;
}

.arm-left:before, .arm-right:before {
  content: ""; width: 30px; height: 70px;
  position: absolute; top: -40px;
}

.arm-left:before {
  border-radius: 50px 50px 0px 120px / 50px 50px 0 110px;
  left: 0; background-color: #e3e8eb;
}

.arm-right:before {
  border-radius: 50px 50px 120px 0 / 50px 50px 110px 0;
  right: 0; background-color: #fbfdfa;
}

.arm-left:after, .arm-right:after {
  content: ""; width: 30px; height: 10px;
  position: absolute; top: -24px;
}

.arm-left:after { background-color: #6e91a4; left: 0; }
.arm-right:after { right: 0; background-color: #b6d2e0; }

.leg {
  width: 30px; height: 40px;
  position: absolute; z-index: 2;
  bottom: 70px;
}

.leg-left {
  left: 76px;
  background-color: #e3e8eb;
  transform: rotate(20deg);
}

.leg-right {
  right: 73px;
  background-color: #fbfdfa;
  transform: rotate(-20deg);
}

.leg-left:before, .leg-right:before {
  content: ""; width: 50px; height: 25px;
  position: absolute; bottom: -26px;
}

.leg-left:before {
  left: -20px; background-color: #e3e8eb;
  border-radius: 30px 0 0 0;
  border-bottom: 10px solid #6d96ac;
}

.leg-right:before {
  right: -20px; background-color: #fbfdfa;
  border-radius: 0 30px 0 0;
  border-bottom: 10px solid #b0cfe4;
}

#checklist {
  --background: #fff;
  --text: #414856;
  --check: #4f29f0;
  --disabled: #c3c8de;
  --width: 100px;
  --height: 180px;
  --border-radius: 10px;
  background: var(--background);
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  position: relative;
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  padding: 30px 85px;
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
  justify-content: center;
}

#checklist label {
  color: var(--text);
  position: relative;
  cursor: pointer;
  display: grid;
  align-items: center;
  width: fit-content;
  transition: color 0.3s ease;
  margin-right: 20px;
}

#checklist label::before, #checklist label::after {
  content: "";
  position: absolute;
}

#checklist label::before {
  height: 2px;
  width: 8px;
  left: -27px;
  background: var(--check);
  border-radius: 2px;
  transition: background 0.3s ease;
}

#checklist label:after {
  height: 4px;
  width: 4px;
  top: 8px;
  left: -25px;
  border-radius: 50%;
}

#checklist input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  height: 15px;
  width: 15px;
  outline: none;
  border: 0;
  margin: 0 15px 0 0;
  cursor: pointer;
  background: var(--background);
  display: grid;
  align-items: center;
  margin-right: 20px;
}

#checklist input[type="checkbox"]::before, #checklist input[type="checkbox"]::after {
  content: "";
  position: absolute;
  height: 2px;
  top: auto;
  background: var(--check);
  border-radius: 2px;
}

#checklist input[type="checkbox"]::before {
  width: 0px;
  right: 60%;
  transform-origin: right bottom;
}

#checklist input[type="checkbox"]::after {
  width: 0px;
  left: 40%;
  transform-origin: left bottom;
}

#checklist input[type="checkbox"]:checked::before {
  animation: check-01 0.4s ease forwards;
}

#checklist input[type="checkbox"]:checked::after {
  animation: check-02 0.4s ease forwards;
}

#checklist input[type="checkbox"]:checked + label {
  color: var(--disabled);
  animation: move 0.3s ease 0.1s forwards;
}

#checklist input[type="checkbox"]:checked + label::before {
  background: var(--disabled);
  animation: slice 0.4s ease forwards;
}

#checklist input[type="checkbox"]:checked + label::after {
  animation: firework 0.5s ease forwards 0.1s;
}

@keyframes move {
  50% {
    padding-left: 8px;
    padding-right: 0px;
  }

  100% {
    padding-right: 4px;
  }
}

@keyframes slice {
  60% {
    width: 100%;
    left: 4px;
  }

  100% {
    width: 100%;
    left: -2px;
    padding-left: 0;
  }
}

@keyframes check-01 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(45deg);
  }

  100% {
    width: 5px;
    top: 8px;
    transform: rotate(45deg);
  }
}

@keyframes check-02 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(-45deg);
  }

  100% {
    width: 10px;
    top: 8px;
    transform: rotate(-45deg);
  }
}

@keyframes firework {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;
  }
}

/* === SYSTEM TASKS WRAPPER === */
.system-tasks {
  margin-top: 24px;
  position: relative;
  z-index: 20; /* stays above stars, below chaos */
}

/* === CHECKLIST OS THEME OVERRIDES === */
#misc #checklist {
  --background: rgba(0, 0, 0, 0.35);
  --text: var(--neon-green);
  --check: var(--alert-red);
  --disabled: rgba(0, 255, 213, 0.35);

  width: auto;
  height: auto;
  padding: 18px 22px;

  box-shadow: none;
  border: 1px solid rgba(0, 255, 213, 0.25);
  backdrop-filter: blur(12px);
}

/* =========================
   VISUAL SWITCHER (FINAL FIX)
========================= */

/* 1. The Container - FORCE HIDDEN by default */
#astro-visual {
  display: none !important; /* Nuclear option: removed from layout */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

/* 2. Show ONLY when active class is added */
#astro-visual.active {
  display: block !important; /* Bring it back */
  pointer-events: auto;
}

/* 3. Hide Sphere when class is added */
#particles.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 4. FORCE ANIMATION & POSITIONING */
#astro-visual .astronaut {
  width: 250px;
  height: 300px;
  position: absolute;
  z-index: 11;
  
  /* POSITION: Directly below the Radar */
  top: calc(15% + 170px); 
  
  /* CENTER: Half of screen minus half of astronaut width */
  left: calc(50% - 125px) !important;
  
  /* ANIMATION: Full 360 spin */
  /* This line must be inside the curly braces! */
  animation: astronaut 5s linear infinite; 
}

#astro-visual .astronaut.falling-spiral {
  animation: spiralDown 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards !important;
}

/* 5. The Floating Animation */
@keyframes astroFloat {
  0% { transform: translate(-50%, -50%) rotate(-5deg); }
  100% { transform: translate(-50%, -65%) rotate(5deg); }
}

/* 6. Ensure Stars stay contained */
#astro-visual .box-of-star1, 
#astro-visual .box-of-star2, 
#astro-visual .box-of-star3, 
#astro-visual .box-of-star4 {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}


/* =========================
   RADAR (Misc Section)
========================= */

.loader {
  /* Positioning: Top Center of the Visual Panel */
  position: absolute;
  top: 15%; /* Sits above the astronaut */
  left: 50%;
  transform: translateX(-50%);
  z-index: 50; /* Behind astronaut (100) but above stars */
  
  /* Size */
  width: 150px;
  height: 150px;
  
  /* Style */
  background: transparent;
  border-radius: 50%;
  box-shadow: 25px 25px 75px rgba(0,0,0,0.55);
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.loader::before {
  content: '';
  position: absolute;
  inset: 20px;
  background: transparent;
  border: 1px dashed #444; /* Fixed typo: added space */
  border-radius: 50%;
  box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),
  inset 5px 5px 35px rgba(0,0,0,0.25);
}

.loader::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px dashed #444; /* Fixed typo */
  box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),
  inset 5px 5px 35px rgba(0,0,0,0.25);
}

.loader span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 100%;
  background: transparent;
  transform-origin: top left;
  animation: radar81 2s linear infinite;
  border-top: 1px dashed #fff;
}

.loader span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* THEME COLOR UPDATE: seagreen -> var(--neon-green) */
  background: var(--neon-green);
  
  transform-origin: top left;
  transform: rotate(-55deg);
  
  /* Updated shadow color */
  filter: blur(30px) drop-shadow(20px 20px 20px var(--neon-green));
}

@keyframes radar81 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* =========================
   ASTRONAUT SPIRAL FALL (FIXED)
========================= */

/* Added #astro-visual ID to increase specificity */
#astro-visual .astronaut.falling-spiral {
  /* Override the float animation immediately */
  animation: spiralDown 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards !important;
}

@keyframes spiralDown {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.6);
    opacity: 1;
  }
  20% {
    /* Slight jump up before the fall (Wile E. Coyote effect) */
    transform: translate(-50%, -60%) rotate(-10deg) scale(0.65);
    opacity: 1;
  }
  100% {
    /* The Crash */
    transform: translate(-50%, 150vh) rotate(1080deg) scale(0.1);
    opacity: 0;
  }
}

/* =========================
   MISC CHAOS: EVERYTHING FALLS
========================= */

/* 1. The Radar Fall */
.loader.falling-spiral {
  animation: spiralDown 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
  /* Radar falls slightly faster/differently for realism */
  animation-delay: 0.1s; 
}

/* 2. The Checklist Fall */
#checklist.falling-spiral {
  position: relative;
  z-index: 100;
  animation: dropBounce 1.5s forwards ease-in;
  border-color: red !important;
  background: rgba(50, 0, 0, 0.8) !important;
}

/* 3. The Stars Fall (Optional: Make the background stars slip) */
#astro-visual.active.falling-sky .box-of-star1,
#astro-visual.active.falling-sky .box-of-star2,
#astro-visual.active.falling-sky .box-of-star3,
#astro-visual.active.falling-sky .box-of-star4 {
  animation: snow 0.5s linear infinite !important; /* Speed up stars aggressively */
  opacity: 0.5;
}

/* =========================
   MISC SECTOR CHAOS
========================= */

/* 1. SPIRAL FALL (Astronaut & Radar) */
/* Strong selector to override default float */
#astro-visual .astronaut.falling-spiral,
.loader.falling-spiral {
  animation: spiralDown 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards !important;
}

@keyframes spiralDown {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.6); opacity: 1; }
  20% { transform: translate(-50%, -60%) rotate(-10deg) scale(0.65); opacity: 1; }
  100% { transform: translate(-50%, 150vh) rotate(1080deg) scale(0.1); opacity: 0; }
}

/* 2. HEAVY DROP (Checklist, Text, Button) */
.falling-ui {
  position: relative; 
  z-index: 9999 !important; /* Force on top */
  animation: uiDrop 1.5s ease-in forwards !important;
  border-color: red !important;
  pointer-events: none;
}

@keyframes uiDrop {
  0% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-20px) rotate(-5deg); } /* Little jump */
  100% { transform: translateY(120vh) rotate(45deg); opacity: 0; }
}

/* 3. WARP SPEED STARS (Background effect) */
#astro-visual.falling-sky .box-of-star1,
#astro-visual.falling-sky .box-of-star2,
#astro-visual.falling-sky .box-of-star3,
#astro-visual.falling-sky .box-of-star4 {
  animation: snow 0.2s linear infinite !important; /* Hyper-speed */
  opacity: 0.5;
}

/* =========================
   MISC: TOYS & WIDGETS
========================= */

.misc-toys {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  width: 100%;
  margin-top: 20px;
  position: relative;
  z-index: 20;
}

/* --- MINECRAFT TORCH (Alignment Fix) --- */

.torch-container input {
  display: none;
}

.torch-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  transform: scale(0.85); /* Slightly Adjusted scale */
}

.simple-text {
  position: absolute;
  bottom: -25px;
  width: 120px;
  text-align: center;
  color: var(--text);
  font-size: 16pt;
  font-weight: 800;
  font-family: monospace;
  opacity: 0.5;
  pointer-events: none;
}

.torch {
  position: relative;
  width: 30px;
  height: 150px; /* Total height (30 head + 120 stick) */
  margin: 0 auto;
  transform-style: preserve-3d;
  
  /* ✅ FIX: Rotate the WHOLE object here, not the individual parts */
  transform: rotateX(-20deg) rotateY(45deg); 
}

.t-head {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  transform-style: preserve-3d;
  z-index: 10;
  
  /* Removed individual rotation */
}

.t-stick {
  position: absolute;
  top: 30px; /* Starts exactly where head ends */
  left: 0;
  width: 30px;
  height: 120px;
  transform-style: preserve-3d;
  
  /* Removed individual rotation */
}

.t-face {
  position: absolute;
  width: 30px;
  height: 30px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  background-color: #000000;
  backface-visibility: hidden; /* Clean up rendering */
}

/* Head Faces */
.t-top { transform: rotateX(90deg) translateZ(15px); }
.t-left { transform: rotateY(-90deg) translateZ(15px); }
.t-right { transform: rotateY(0deg) translateZ(15px); }

.t-top div, .t-left div, .t-right div { width: 100%; height: 100%; }

/* Default Colors (Off) */
.t-top div:nth-child(1), .t-left div:nth-child(3), .t-right div:nth-child(3) { background-color: #ffff9760; }
.t-top div:nth-child(2), .t-left div:nth-child(1), .t-right div:nth-child(1) { background-color: #ffd80060; }
.t-top div:nth-child(3), .t-left div:nth-child(4), .t-right div:nth-child(4) { background-color: #ffffff60; }
.t-top div:nth-child(4), .t-left div:nth-child(2), .t-right div:nth-child(2) { background-color: #ff8f0060; }

.t-side {
  position: absolute;
  width: 30px;
  height: 120px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: repeat(8, 12.5%);
  cursor: pointer;
  backface-visibility: hidden;
}

/* Stick Sides */
.t-side-left { transform: rotateY(-90deg) translateZ(15px); }
.t-side-right { transform: rotateY(0deg) translateZ(15px); }

.t-side-left div, .t-side-right div { width: 100%; height: 100%; }

/* Stick Pixel Art */
.t-side div:nth-child(1) { background-color: #443622; }
.t-side div:nth-child(2), .t-side div:nth-child(2) { background-color: #2e2517; }
.t-side div:nth-child(3), .t-side div:nth-child(5) { background-color: #4b3b23; }
.t-side div:nth-child(4), .t-side div:nth-child(10) { background-color: #251e12; }
.t-side div:nth-child(6) { background-color: #292115; }
.t-side div:nth-child(7) { background-color: #4b3c26; }
.t-side div:nth-child(8) { background-color: #292115; }
.t-side div:nth-child(9) { background-color: #4b3a21; }
.t-side div:nth-child(11), .t-side div:nth-child(15) { background-color: #3d311d; }
.t-side div:nth-child(12) { background-color: #2c2315; }
.t-side div:nth-child(13) { background-color: #493a22; }
.t-side div:nth-child(14) { background-color: #2b2114; }
.t-side div:nth-child(16) { background-color: #271e10; }

/* --- ACTIVE STATE (LIGHT ON) --- */

.torch-container input:checked ~ .torch .t-face {
  filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.8))
    drop-shadow(0px 0px 15px rgba(255, 237, 156, 0.6))
    drop-shadow(0px 0px 30px rgba(255, 227, 101, 0.4));
}

.torch-container input:checked ~ .torch .t-top div:nth-child(1),
.torch-container input:checked ~ .torch .t-left div:nth-child(3),
.torch-container input:checked ~ .torch .t-right div:nth-child(3) { background-color: #ffff97; }

.torch-container input:checked ~ .torch .t-top div:nth-child(2),
.torch-container input:checked ~ .torch .t-left div:nth-child(1),
.torch-container input:checked ~ .torch .t-right div:nth-child(1) { background-color: #ffd800; }

.torch-container input:checked ~ .torch .t-top div:nth-child(3),
.torch-container input:checked ~ .torch .t-left div:nth-child(4),
.torch-container input:checked ~ .torch .t-right div:nth-child(4) { background-color: #ffffff; }

.torch-container input:checked ~ .torch .t-top div:nth-child(4),
.torch-container input:checked ~ .torch .t-left div:nth-child(2),
.torch-container input:checked ~ .torch .t-right div:nth-child(2) { background-color: #ff8f00; }

/* Light up the stick slightly near the top */
.torch-container input:checked ~ .torch .t-side div:nth-child(1) { background-color: #7c623e; }
.torch-container input:checked ~ .torch .t-side div:nth-child(2) { background-color: #4c3d26; }
.torch-container input:checked ~ .torch .t-side div:nth-child(3) { background-color: #937344; }
.torch-container input:checked ~ .torch .t-side div:nth-child(5) { background-color: #937344; }

/* =========================
   MARIO ANIMATION WIDGET (PIXEL PERFECT)
========================= */

/* Container to hold the Mario scene */
.mario-wrapper {
  position: relative;
  width: 102px;        /* Exact width: 3 blocks * 34px */
  height: 150px;       /* Matches Torch height */
  display: block;
  
  /* Flexbox parent handles the spacing between this and the torch */
  
  transform: scale(0.85);
  transform-origin: bottom center;
}

/* --- BRICK (Ground/Block) --- */
.brick {
  height: 2px;
  width: 2px;
  position: absolute;
  bottom: 60px; /* Aligned with torch stick */
  z-index: 10;
  
  /* Pixel Art Shadow */
  box-shadow: 
    2px 2px 0px #ff9999, 4px 2px 0px #ff9999, 6px 2px 0px #ff9999,
    8px 2px 0px #ff9999, 10px 2px 0px #ff9999, 12px 2px 0px #ff9999,
    14px 2px 0px #ff9999, 16px 2px 0px #ff9999, 18px 2px 0px #ff9999,
    20px 2px 0px #ff9999, 22px 2px 0px #ff9999, 24px 2px 0px #ff9999,
    26px 2px 0px #ff9999, 28px 2px 0px #ff9999, 30px 2px 0px #ff9999,
    32px 2px 0px #ff9999, 2px 4px 0px #cc3300, 4px 4px 0px #cc3300,
    6px 4px 0px #cc3300, 8px 4px 0px #cc3300, 10px 4px 0px #cc3300,
    12px 4px 0px #cc3300, 14px 4px 0px #cc3300, 16px 4px 0px #000,
    18px 4px 0px #cc3300, 20px 4px 0px #cc3300, 22px 4px 0px #cc3300,
    24px 4px 0px #cc3300, 26px 4px 0px #cc3300, 28px 4px 0px #cc3300,
    30px 4px 0px #cc3300, 32px 4px 0px #000, 2px 6px 0px #cc3300,
    4px 6px 0px #cc3300, 6px 6px 0px #cc3300, 8px 6px 0px #cc3300,
    10px 6px 0px #cc3300, 12px 6px 0px #cc3300, 14px 6px 0px #cc3300,
    16px 6px 0px #000, 18px 6px 0px #cc3300, 20px 6px 0px #cc3300,
    22px 6px 0px #cc3300, 24px 6px 0px #cc3300, 26px 6px 0px #cc3300,
    28px 6px 0px #cc3300, 30px 6px 0px #cc3300, 32px 6px 0px #000,
    2px 8px 0px #000, 4px 8px 0px #000, 6px 8px 0px #000, 8px 8px 0px #000,
    10px 8px 0px #000, 12px 8px 0px #000, 14px 8px 0px #000, 16px 8px 0px #000,
    18px 8px 0px #000, 20px 8px 0px #000, 22px 8px 0px #000, 24px 8px 0px #000,
    26px 8px 0px #000, 28px 8px 0px #000, 30px 8px 0px #000, 32px 8px 0px #000,
    2px 10px 0px #cc3300, 4px 10px 0px #cc3300, 6px 10px 0px #cc3300,
    8px 10px 0px #000, 10px 10px 0px #cc3300, 12px 10px 0px #cc3300,
    14px 10px 0px #cc3300, 16px 10px 0px #cc3300, 18px 10px 0px #cc3300,
    20px 10px 0px #cc3300, 22px 10px 0px #cc3300, 24px 10px 0px #000,
    26px 10px 0px #cc3300, 28px 10px 0px #cc3300, 30px 10px 0px #cc3300,
    32px 10px 0px #cc3300, 2px 12px 0px #cc3300, 4px 12px 0px #cc3300,
    6px 12px 0px #cc3300, 8px 12px 0px #000, 10px 12px 0px #cc3300,
    12px 12px 0px #cc3300, 14px 12px 0px #cc3300, 16px 12px 0px #cc3300,
    18px 12px 0px #cc3300, 20px 12px 0px #cc3300, 22px 12px 0px #cc3300,
    24px 12px 0px #000, 26px 12px 0px #cc3300, 28px 12px 0px #cc3300,
    30px 12px 0px #cc3300, 32px 12px 0px #cc3300, 2px 14px 0px #cc3300,
    4px 14px 0px #cc3300, 6px 14px 0px #cc3300, 8px 14px 0px #000,
    10px 14px 0px #cc3300, 12px 14px 0px #cc3300, 14px 14px 0px #cc3300,
    16px 14px 0px #cc3300, 18px 14px 0px #cc3300, 20px 14px 0px #cc3300,
    22px 14px 0px #cc3300, 24px 14px 0px #000, 26px 14px 0px #cc3300,
    28px 14px 0px #cc3300, 30px 14px 0px #cc3300, 32px 14px 0px #cc3300,
    2px 16px 0px #000, 4px 16px 0px #000, 6px 16px 0px #000, 8px 16px 0px #000,
    10px 16px 0px #000, 12px 16px 0px #000, 14px 16px 0px #000,
    16px 16px 0px #000, 18px 16px 0px #000, 20px 16px 0px #000,
    22px 16px 0px #000, 24px 16px 0px #000, 26px 16px 0px #000,
    28px 16px 0px #000, 30px 16px 0px #000, 32px 16px 0px #000,
    2px 18px 0px #cc3300, 4px 18px 0px #cc3300, 6px 18px 0px #cc3300,
    8px 18px 0px #cc3300, 10px 18px 0px #cc3300, 12px 18px 0px #cc3300,
    14px 18px 0px #cc3300, 16px 18px 0px #000, 18px 18px 0px #cc3300,
    20px 18px 0px #cc3300, 22px 18px 0px #cc3300, 24px 18px 0px #cc3300,
    26px 18px 0px #cc3300, 28px 18px 0px #cc3300, 30px 18px 0px #cc3300,
    32px 18px 0px #000, 2px 20px 0px #cc3300, 4px 20px 0px #cc3300,
    6px 20px 0px #cc3300, 8px 20px 0px #cc3300, 10px 20px 0px #cc3300,
    12px 20px 0px #cc3300, 14px 20px 0px #cc3300, 16px 20px 0px #000,
    18px 20px 0px #cc3300, 20px 20px 0px #cc3300, 22px 20px 0px #cc3300,
    24px 20px 0px #cc3300, 26px 20px 0px #cc3300, 28px 20px 0px #cc3300,
    30px 20px 0px #cc3300, 32px 20px 0px #000, 2px 22px 0px #cc3300,
    4px 22px 0px #cc3300, 6px 22px 0px #cc3300, 8px 22px 0px #cc3300,
    10px 22px 0px #cc3300, 12px 22px 0px #cc3300, 14px 22px 0px #cc3300,
    16px 22px 0px #000, 18px 22px 0px #cc3300, 20px 22px 0px #cc3300,
    22px 22px 0px #cc3300, 24px 22px 0px #cc3300, 26px 22px 0px #cc3300,
    28px 22px 0px #cc3300, 30px 22px 0px #cc3300, 32px 22px 0px #000,
    2px 24px 0px #000, 4px 24px 0px #000, 6px 24px 0px #000, 8px 24px 0px #000,
    10px 24px 0px #000, 12px 24px 0px #000, 14px 24px 0px #000,
    16px 24px 0px #000, 18px 24px 0px #000, 20px 24px 0px #000,
    22px 24px 0px #000, 24px 24px 0px #000, 26px 24px 0px #000,
    28px 24px 0px #000, 30px 24px 0px #000, 32px 24px 0px #000,
    2px 26px 0px #cc3300, 4px 26px 0px #cc3300, 6px 26px 0px #cc3300,
    8px 26px 0px #000, 10px 26px 0px #cc3300, 12px 26px 0px #cc3300,
    14px 26px 0px #cc3300, 16px 26px 0px #cc3300, 18px 26px 0px #cc3300,
    20px 26px 0px #cc3300, 22px 26px 0px #cc3300, 24px 26px 0px #000,
    26px 26px 0px #cc3300, 28px 26px 0px #cc3300, 30px 26px 0px #cc3300,
    32px 26px 0px #cc3300, 2px 28px 0px #cc3300, 4px 28px 0px #cc3300,
    6px 28px 0px #cc3300, 8px 28px 0px #000, 10px 28px 0px #cc3300,
    12px 28px 0px #cc3300, 14px 28px 0px #cc3300, 16px 28px 0px #cc3300,
    18px 28px 0px #cc3300, 20px 28px 0px #cc3300, 22px 28px 0px #cc3300,
    24px 28px 0px #000, 26px 28px 0px #cc3300, 28px 28px 0px #cc3300,
    30px 28px 0px #cc3300, 32px 28px 0px #cc3300, 2px 30px 0px #cc3300,
    4px 30px 0px #cc3300, 6px 30px 0px #cc3300, 8px 30px 0px #000,
    10px 30px 0px #cc3300, 12px 30px 0px #cc3300, 14px 30px 0px #cc3300,
    16px 30px 0px #cc3300, 18px 30px 0px #cc3300, 20px 30px 0px #cc3300,
    22px 30px 0px #cc3300, 24px 30px 0px #000, 26px 30px 0px #cc3300,
    28px 30px 0px #cc3300, 30px 30px 0px #cc3300, 32px 30px 0px #cc3300,
    2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000, 8px 32px 0px #000,
    10px 32px 0px #000, 12px 32px 0px #000, 14px 32px 0px #000,
    16px 32px 0px #000, 18px 32px 0px #000, 20px 32px 0px #000,
    22px 32px 0px #000, 24px 32px 0px #000, 26px 32px 0px #000,
    28px 32px 0px #000, 30px 32px 0px #000, 32px 32px 0px #000;
}

/* FIX: Manually position the left brick at 0px */
.brick.one {
  left: 0px; 
  right: auto;
}

/* FIX: Manually position the right brick at 68px (Starts after the middle block) */
.brick.two {
  left: 68px; /* 34px (left) + 34px (middle) = 68px */
  right: auto;
}

/* --- TRIGGER BOX (Question Block Hitbox) --- */
.box {
  position: absolute;
  
  /* FIX: Align with the bottom where the art is actually drawn */
  top: auto;
  bottom: 28px; 
  
  left: 34px; 
  width: 34px;
  height: 34px;
  background-color: transparent; /* Keep transparent, but change to red to debug if needed */
  z-index: 50;
  cursor: pointer;
}

/* Hover Interaction: Mushroom Pop-up */
.box:hover + .mush {
  animation: mush 0.5s linear forwards;
  opacity: 1;
}

@keyframes mush {
  0% { transform: translate(0, 0); }
  50% { transform: translate(0, -80px); }
  100% { transform: translate(0, -35px); }
}

/* --- MUSHROOM --- */
.mush {
  height: 2px;
  width: 2px;
  position: absolute;
  bottom: 60px; 
  
  /* FIX: Align start point exactly with the Question Block (34px) */
  /* Previously this was 51px, which pushed it too far right */
  left: 34px; 
  
  z-index: 5; 
  opacity: 0;
  
  /* [Mushroom shadow code omitted - same as before] */
  box-shadow: 
    14px 2px 0px #fc9838, 16px 2px 0px #fc9838, 18px 2px 0px #fc9838,
    20px 2px 0px #fc9838, 12px 4px 0px #fc9838, 14px 4px 0px #fc9838,
    16px 4px 0px #fc9838, 18px 4px 0px #fc9838, 20px 4px 0px #d82800,
    22px 4px 0px #d82800, 10px 6px 0px #fc9838, 12px 6px 0px #fc9838,
    14px 6px 0px #fc9838, 16px 6px 0px #fc9838, 18px 6px 0px #d82800,
    20px 6px 0px #d82800, 22px 6px 0px #d82800, 24px 6px 0px #d82800,
    8px 8px 0px #fc9838, 10px 8px 0px #fc9838, 12px 8px 0px #fc9838,
    14px 8px 0px #fc9838, 16px 8px 0px #fc9838, 18px 8px 0px #d82800,
    20px 8px 0px #d82800, 22px 8px 0px #d82800, 24px 8px 0px #d82800,
    26px 8px 0px #d82800, 6px 10px 0px #fc9838, 8px 10px 0px #fc9838,
    10px 10px 0px #fc9838, 12px 10px 0px #fc9838, 14px 10px 0px #fc9838,
    16px 10px 0px #fc9838, 18px 10px 0px #fc9838, 20px 10px 0px #d82800,
    22px 10px 0px #d82800, 24px 10px 0px #d82800, 26px 10px 0px #fc9838,
    28px 10px 0px #fc9838, 4px 12px 0px #fc9838, 6px 12px 0px #fc9838,
    8px 12px 0px #d82800, 10px 12px 0px #d82800, 12px 12px 0px #d82800,
    14px 12px 0px #fc9838, 16px 12px 0px #fc9838, 18px 12px 0px #fc9838,
    20px 12px 0px #fc9838, 22px 12px 0px #fc9838, 24px 12px 0px #fc9838,
    26px 12px 0px #fc9838, 28px 12px 0px #fc9838, 30px 12px 0px #fc9838,
    4px 14px 0px #fc9838, 6px 14px 0px #d82800, 8px 14px 0px #d82800,
    10px 14px 0px #d82800, 12px 14px 0px #d82800, 14px 14px 0px #d82800,
    16px 14px 0px #fc9838, 18px 14px 0px #fc9838, 20px 14px 0px #fc9838,
    22px 14px 0px #fc9838, 24px 14px 0px #fc9838, 26px 14px 0px #fc9838,
    28px 14px 0px #fc9838, 30px 14px 0px #fc9838, 2px 16px 0px #fc9838,
    4px 16px 0px #fc9838, 6px 16px 0px #d82800, 8px 16px 0px #d82800,
    10px 16px 0px #d82800, 12px 16px 0px #d82800, 14px 16px 0px #d82800,
    16px 16px 0px #fc9838, 18px 16px 0px #fc9838, 20px 16px 0px #fc9838,
    22px 16px 0px #fc9838, 24px 16px 0px #fc9838, 26px 16px 0px #d82800,
    28px 16px 0px #d82800, 30px 16px 0px #fc9838, 32px 16px 0px #fc9838,
    2px 18px 0px #fc9838, 4px 18px 0px #fc9838, 6px 18px 0px #d82800,
    8px 18px 0px #d82800, 10px 18px 0px #d82800, 12px 18px 0px #d82800,
    14px 18px 0px #d82800, 16px 18px 0px #fc9838, 18px 18px 0px #fc9838,
    20px 18px 0px #fc9838, 22px 18px 0px #fc9838, 24px 18px 0px #fc9838,
    26px 18px 0px #d82800, 28px 18px 0px #d82800, 30px 18px 0px #d82800,
    32px 18px 0px #fc9838, 2px 20px 0px #fc9838, 4px 20px 0px #fc9838,
    6px 20px 0px #fc9838, 8px 20px 0px #d82800, 10px 20px 0px #d82800,
    12px 20px 0px #d82800, 14px 20px 0px #fc9838, 16px 20px 0px #fc9838,
    18px 20px 0px #fc9838, 20px 20px 0px #fc9838, 22px 20px 0px #fc9838,
    24px 20px 0px #fc9838, 26px 20px 0px #fc9838, 28px 20px 0px #d82800,
    30px 20px 0px #d82800, 32px 20px 0px #fc9838, 2px 22px 0px #fc9838,
    4px 22px 0px #fc9838, 6px 22px 0px #fc9838, 8px 22px 0px #fc9838,
    10px 22px 0px #fc9838, 12px 22px 0px #fc9838, 14px 22px 0px #fc9838,
    16px 22px 0px #fc9838, 18px 22px 0px #fc9838, 20px 22px 0px #fc9838,
    22px 22px 0px #fc9838, 24px 22px 0px #fc9838, 26px 22px 0px #fc9838,
    28px 22px 0px #fc9838, 30px 22px 0px #fc9838, 32px 22px 0px #fc9838,
    4px 24px 0px #fc9838, 6px 24px 0px #d82800, 8px 24px 0px #d82800,
    10px 24px 0px #d82800, 12px 24px 0px #fff, 14px 24px 0px #fff,
    16px 24px 0px #fff, 18px 24px 0px #fff, 20px 24px 0px #fff,
    22px 24px 0px #fff, 24px 24px 0px #d82800, 26px 24px 0px #d82800,
    28px 24px 0px #d82800, 30px 24px 0px #fc9838, 10px 26px 0px #fff,
    12px 26px 0px #fff, 14px 26px 0px #fff, 16px 26px 0px #fff,
    18px 26px 0px #fff, 20px 26px 0px #fff, 22px 26px 0px #fff,
    24px 26px 0px #fff, 10px 28px 0px #fff, 12px 28px 0px #fff,
    14px 28px 0px #fff, 16px 28px 0px #fff, 18px 28px 0px #fff,
    20px 28px 0px #fff, 22px 28px 0px #fc9838, 24px 28px 0px #fff,
    10px 30px 0px #fff, 12px 30px 0px #fff, 14px 30px 0px #fff,
    16px 30px 0px #fff, 18px 30px 0px #fff, 20px 30px 0px #fff,
    22px 30px 0px #fc9838, 24px 30px 0px #fff, 12px 32px 0px #fff,
    14px 32px 0px #fff, 16px 32px 0px #fff, 18px 32px 0px #fff,
    20px 32px 0px #fc9838, 22px 32px 0px #fff;
  transform: translate(-0px, -0px);
}

/* --- MARIO SPRITE (Question Block) --- */
.tooltip-mario-container {
  height: 2px;
  width: 2px;
  position: absolute;
  bottom: 60px; 
  /* FIX: Manually position the middle block at 34px */
  left: 34px; 
  z-index: 20;
  
  /* [Question Block shadow code omitted - same as before] */
  box-shadow: 
    4px 2px 0px #ce3100, 6px 2px 0px #ce3100, 8px 2px 0px #ce3100,
    10px 2px 0px #ce3100, 12px 2px 0px #ce3100, 14px 2px 0px #ce3100,
    16px 2px 0px #ce3100, 18px 2px 0px #ce3100, 20px 2px 0px #ce3100,
    22px 2px 0px #ce3100, 24px 2px 0px #ce3100, 26px 2px 0px #ce3100,
    28px 2px 0px #ce3100, 30px 2px 0px #ce3100, 2px 4px 0px #ce3100,
    4px 4px 0px #ff9c31, 6px 4px 0px #ff9c31, 8px 4px 0px #ff9c31,
    10px 4px 0px #ff9c31, 12px 4px 0px #ff9c31, 14px 4px 0px #ff9c31,
    16px 4px 0px #ff9c31, 18px 4px 0px #ff9c31, 20px 4px 0px #ff9c31,
    22px 4px 0px #ff9c31, 24px 4px 0px #ff9c31, 26px 4px 0px #ff9c31,
    28px 4px 0px #ff9c31, 30px 4px 0px #ff9c31, 32px 4px 0px #000,
    2px 6px 0px #ce3100, 4px 6px 0px #ff9c31, 6px 6px 0px #000,
    8px 6px 0px #ff9c31, 10px 6px 0px #ff9c31, 12px 6px 0px #ff9c31,
    14px 6px 0px #ff9c31, 16px 6px 0px #ff9c31, 18px 6px 0px #ff9c31,
    20px 6px 0px #ff9c31, 22px 6px 0px #ff9c31, 24px 6px 0px #ff9c31,
    26px 6px 0px #ff9c31, 28px 6px 0px #000, 30px 6px 0px #ff9c31,
    32px 6px 0px #000, 2px 8px 0px #ce3100, 4px 8px 0px #ff9c31,
    6px 8px 0px #ff9c31, 8px 8px 0px #ff9c31, 10px 8px 0px #ff9c31,
    12px 8px 0px #ce3100, 14px 8px 0px #ce3100, 16px 8px 0px #ce3100,
    18px 8px 0px #ce3100, 20px 8px 0px #ce3100, 22px 8px 0px #ff9c31,
    24px 8px 0px #ff9c31, 26px 8px 0px #ff9c31, 28px 8px 0px #ff9c31,
    30px 8px 0px #ff9c31, 32px 8px 0px #000, 2px 10px 0px #ce3100,
    4px 10px 0px #ff9c31, 6px 10px 0px #ff9c31, 8px 10px 0px #ff9c31,
    10px 10px 0px #ce3100, 12px 10px 0px #ce3100, 14px 10px 0px #000,
    16px 10px 0px #000, 18px 10px 0px #000, 20px 10px 0px #ce3100,
    22px 10px 0px #ce3100, 24px 10px 0px #ff9c31, 26px 10px 0px #ff9c31,
    28px 10px 0px #ff9c31, 30px 10px 0px #ff9c31, 32px 10px 0px #000,
    2px 12px 0px #ce3100, 4px 12px 0px #ff9c31, 6px 12px 0px #ff9c31,
    8px 12px 0px #ff9c31, 10px 12px 0px #ce3100, 12px 12px 0px #ce3100,
    14px 12px 0px #000, 16px 12px 0px #ff9c31, 18px 12px 0px #ff9c31,
    20px 12px 0px #ce3100, 22px 12px 0px #ce3100, 24px 12px 0px #000,
    26px 12px 0px #ff9c31, 28px 12px 0px #ff9c31, 30px 12px 0px #ff9c31,
    32px 12px 0px #000, 2px 14px 0px #ce3100, 4px 14px 0px #ff9c31,
    6px 14px 0px #ff9c31, 8px 14px 0px #ff9c31, 10px 14px 0px #ce3100,
    12px 14px 0px #ce3100, 14px 14px 0px #000, 16px 14px 0px #ff9c31,
    18px 14px 0px #ff9c31, 20px 14px 0px #ce3100, 22px 14px 0px #ce3100,
    24px 14px 0px #000, 26px 14px 0px #ff9c31, 28px 14px 0px #ff9c31,
    30px 14px 0px #ff9c31, 32px 14px 0px #000, 2px 16px 0px #ce3100,
    4px 16px 0px #ff9c31, 6px 16px 0px #ff9c31, 8px 16px 0px #ff9c31,
    10px 16px 0px #ff9c31, 12px 16px 0px #000, 14px 16px 0px #000,
    16px 16px 0px #ff9c31, 18px 16px 0px #ce3100, 20px 16px 0px #ce3100,
    22px 16px 0px #ce3100, 24px 16px 0px #000, 26px 16px 0px #ff9c31,
    28px 16px 0px #ff9c31, 30px 16px 0px #ff9c31, 32px 16px 0px #000,
    2px 18px 0px #ce3100, 4px 18px 0px #ff9c31, 6px 18px 0px #ff9c31,
    8px 18px 0px #ff9c31, 10px 18px 0px #ff9c31, 12px 18px 0px #ff9c31,
    14px 18px 0px #ff9c31, 16px 18px 0px #ce3100, 18px 18px 0px #ce3100,
    20px 18px 0px #000, 22px 18px 0px #000, 24px 18px 0px #000,
    26px 18px 0px #ff9c31, 28px 18px 0px #ff9c31, 30px 18px 0px #ff9c31,
    32px 18px 0px #000, 2px 20px 0px #ce3100, 4px 20px 0px #ff9c31,
    6px 20px 0px #ff9c31, 8px 20px 0px #ff9c31, 10px 20px 0px #ff9c31,
    12px 20px 0px #ff9c31, 14px 20px 0px #ff9c31, 16px 20px 0px #ce3100,
    18px 20px 0px #ce3100, 20px 20px 0px #000, 22px 20px 0px #ff9c31,
    24px 20px 0px #ff9c31, 26px 20px 0px #ff9c31, 28px 20px 0px #ff9c31,
    30px 20px 0px #ff9c31, 32px 20px 0px #000, 2px 22px 0px #ce3100,
    4px 22px 0px #ff9c31, 6px 22px 0px #ff9c31, 8px 22px 0px #ff9c31,
    10px 22px 0px #ff9c31, 12px 22px 0px #ff9c31, 14px 22px 0px #ff9c31,
    16px 22px 0px #ff9c31, 18px 22px 0px #ff9c31, 20px 22px 0px #fc9838,
    22px 22px 0px #fc9838, 24px 22px 0px #fc9838, 26px 22px 0px #fc9838,
    28px 22px 0px #fc9838, 30px 22px 0px #fc9838, 4px 24px 0px #fc9838,
    6px 24px 0px #d82800, 8px 24px 0px #d82800, 10px 24px 0px #d82800,
    12px 24px 0px #fff, 14px 24px 0px #fff, 16px 24px 0px #fff,
    18px 24px 0px #fff, 20px 24px 0px #fff, 22px 24px 0px #fff,
    24px 24px 0px #d82800, 26px 24px 0px #d82800, 28px 24px 0px #d82800,
    30px 24px 0px #fc9838, 10px 26px 0px #fff, 12px 26px 0px #fff,
    14px 26px 0px #fff, 16px 26px 0px #fff, 18px 26px 0px #fff,
    20px 26px 0px #fff, 22px 26px 0px #fff, 24px 26px 0px #fff,
    10px 28px 0px #fff, 12px 28px 0px #fff, 14px 28px 0px #fff,
    16px 28px 0px #fff, 18px 28px 0px #fff, 20px 28px 0px #fff,
    22px 28px 0px #fc9838, 24px 28px 0px #fff, 10px 30px 0px #fff,
    12px 30px 0px #fff, 14px 30px 0px #fff, 16px 30px 0px #fff,
    18px 30px 0px #fff, 20px 30px 0px #fff, 22px 30px 0px #fc9838,
    24px 30px 0px #fff, 12px 32px 0px #fff, 14px 32px 0px #fff,
    16px 32px 0px #fff, 18px 32px 0px #fff, 20px 32px 0px #fc9838,
    22px 32px 0px #fff;
  transform: translate(-0px, -0px);
}

/* =========================
   SPACE BUTTON (Boot Sequence)
========================= */

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13rem;
  overflow: hidden;
  height: 3rem;
  background-size: 300% 300%;
  cursor: pointer;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  border: double 4px transparent;
  background-image: linear-gradient(#212121, #212121),
    linear-gradient(
      137.48deg,
      #ffdb3b 10%,
      #fe53bb 45%,
      #8f51ea 67%,
      #0044ff 87%
    );
  background-origin: border-box;
  background-clip: content-box, border-box;
}

#container-stars {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
}

/* Updated to target only the button text */
.btn strong {
  z-index: 2;
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 5px;
  color: #ffffff;
  text-shadow: 0 0 4px white;
}

#glow {
  position: absolute;
  display: flex;
  width: 12rem;
}

.circle {
  width: 100%;
  height: 30px;
  filter: blur(2rem);
  animation: pulse_3011 4s infinite;
  z-index: -1;
}

.circle:nth-of-type(1) {
  background: rgba(254, 83, 186, 0.636);
}

.circle:nth-of-type(2) {
  background: rgba(142, 81, 234, 0.704);
}

.btn:hover #container-stars {
  z-index: 1;
  background-color: #212121;
}

.btn:hover {
  transform: scale(1.1);
}

.btn:active {
  border: double 4px #fe53bb;
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: none;
}

.btn:active .circle {
  background: #fe53bb;
}

#stars {
  position: relative;
  background: transparent;
  width: 200rem;
  height: 200rem;
}

#stars::after {
  content: "";
  position: absolute;
  top: -10rem;
  left: -100rem;
  width: 100%;
  height: 100%;
  animation: animStarRotate 90s linear infinite;
}

#stars::after {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
}

#stars::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 170%;
  height: 500%;
  animation: animStar 60s linear infinite;
}

#stars::before {
  background-image: radial-gradient(#ffffff 1px, transparent 1%);
  background-size: 50px 50px;
  opacity: 0.5;
}

@keyframes animStar {
  from { transform: translateY(0); }
  to { transform: translateY(-135rem); }
}

@keyframes animStarRotate {
  from { transform: rotate(360deg); }
  to { transform: rotate(0); }
}

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

@keyframes pulse_3011 {
  0% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
  100% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* =========================
   NAME GENERATE EFFECT (Bootloader Fix)
========================= */

/* 1. Default State: Hidden & Connected */
.comic-text .char {
  display: inline-block; 
  opacity: 0; /* Start invisible */
  transform: translateY(20px) scale(0.8); /* Start low */
}

/* 2. Trigger Animation ONLY after 'Space' is pressed */
body.site-loaded .comic-text .char {
  animation: charPop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: var(--delay);
}

/* 3. The Pop-in Keyframes */
@keyframes charPop {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 4. Keep Hover Effect Intact */
.comic-text:hover .char {
  transform: none; 
  transition: none;
}

/* =========================
   FIX: HIGHLIGHT VISIBILITY
========================= */

/* 1. Protect the paragraph from the header's hover effects */
.whoami-text {
  position: relative;
  z-index: 5;          /* Sit above the header's background effects */
  isolation: isolate;  /* 🛡️ Create a "force field" so internal z-indexes don't break */
  margin-top: 20px;    /* Add space so the header doesn't scale down into the text */
}

/* 2. Force the highlighted text to stay ON TOP of the yellow ink */
#highlight-line-1,
#highlight-line-2 {
  position: relative;
  z-index: 10 !important; /* Force it to the front */
  
  /* Ensure the text color stays dark grey (readable) against yellow */
  color: #1a1a1a !important; 
  
  /* Optional: Tiny shadow to make it pop off the yellow */
  text-shadow: none; 
}

/* 3. Ensure the RoughNotation SVG (the yellow ink) stays BEHIND */
.rough-annotation {
  z-index: -1 !important;
}

/* 4. Tweak the Header Hover so it grows UP, not DOWN */
.comic-text:hover {
  /* This keeps the bottom edge steady so it doesn't cover the text below */
  transform-origin: center bottom; 
}

/* =========================
   CODING STATS WIDGET
========================= */

.coding-stats {
  margin-top: 24px;
  padding: 20px;
  
  /* Match the Checklist/OS Theme */
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 255, 213, 0.25);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  color: var(--neon-green);
  font-family: monospace;
  position: relative;
  z-index: 20;
}

.stats-header {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-bottom: 16px;
  letter-spacing: 1px;
  font-weight: bold;
}

/* --- TIME STATS GRID --- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  text-align: center;
}

.stat-box {
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 4px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-box:hover {
  transform: translateY(-2px);
  border-color: var(--neon-green);
}

.stat-value {
  font-size: 0.95rem;
  font-weight: bold;
  color: #fff; /* White text for readability */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 0.7rem;
  opacity: 0.7;
  text-transform: uppercase;
}

/* --- LANGUAGES LIST --- */
.stats-langs {
  border-top: 1px dashed rgba(0, 255, 213, 0.3);
  padding-top: 16px;
}

.lang-header {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lang-item {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-rank {
  background: var(--neon-green);
  color: #000;
  font-weight: bold;
  font-size: 0.7rem;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

/* THEME ADAPTATIONS */
body.cool-mode .coding-stats {
  border-color: rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
}

/* =========================
   CUTE COFFEE ICON
========================= */

.coffee-icon {
  width: 16px;            /* Slightly larger to match text */
  height: 16px;
  vertical-align: text-bottom;
  margin-left: 6px;       
  margin-bottom: -2px;     
  
  /* The exact orange look */
  color: #ff9d00;         
  opacity: 1 !important;  /* Force full brightness so it pops */
  
  /* The Wiggle Logic */
  transform-origin: bottom center; /* Pivot from the bottom */
  animation: coffeeWiggle 3s ease-in-out infinite;
}

@keyframes coffeeWiggle {
  0%, 100% { 
    transform: rotate(0deg); 
  }
  20% { 
    transform: rotate(-8deg); 
  }
  40% { 
    transform: rotate(8deg); 
  }
  60% { 
    transform: rotate(-4deg); 
  }
  80% { 
    transform: rotate(4deg); 
  }
}

/* =========================
   ANTIGRAVITY BACKGROUND (FULL SCREEN)
========================= */

#antigravity {
  position: fixed;   /* Locks it to the screen */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;        /* Sits behind text (z-index 1+) and sphere */
  pointer-events: none; /* Let mouse clicks pass through to buttons */
  
  opacity: 0;        /* Hidden by default */
  transition: opacity 0.8s ease-in-out; /* Smooth fade in/out */
  background: transparent;
}

/* Logic: When we add the 'visible' class via JS, it shows up */
#antigravity.visible {
  opacity: 0.6;      /* Adjust brightness here */
}

/* Ensure your content sits ON TOP */
#app {
  position: relative;
  z-index: 5;
}

/* =========================
   PROJECTS SECTION
========================= */

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 10px;
}

@media (min-width: 700px) {
  .project-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.project-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(0, 255, 213, 0.15);
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-5px);
  border-color: var(--neon-green);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 5px 15px rgba(0, 255, 213, 0.1);
}

.project-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.folder-icon svg {
  width: 20px;
  height: 20px;
  color: var(--neon-green);
}

.project-title {
  font-weight: bold;
  font-size: 1rem;
  color: #fff;
  letter-spacing: 0.5px;
}

.project-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin-bottom: 16px;
  flex-grow: 1; /* Pushes tags/links to bottom */
}

/* TECH TAGS */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.project-tags span {
  font-size: 0.7rem;
  color: var(--neon-green);
  border: 1px solid rgba(0, 255, 213, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 255, 213, 0.05);
}

/* LINKS */
.project-links {
  display: flex;
  gap: 15px;
  font-size: 0.8rem;
}

.project-links a {
  color: var(--text);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s;
  font-family: monospace;
}

.project-links a:hover {
  opacity: 1;
  color: var(--neon-green);
  text-decoration: underline;
}

/* COOL MODE ADAPTATIONS */
body.cool-mode .project-card {
  border-color: rgba(0, 255, 255, 0.4);
}
body.cool-mode .folder-icon svg {
  color: #00ffff;
}

/* =========================
   SCROLLABLE PROJECTS ONLY
========================= */

/* 1. Target ONLY the #projects ID */
#projects {
  /* Limit height so it doesn't hit the footer */
  max-height: 80vh; 
  
  /* Allow scrolling only inside this specific box */
  overflow-y: auto;
  overflow-x: hidden;
  
  /* Firefox Scrollbar styling */
  scrollbar-width: thin; 
  scrollbar-color: var(--neon-green) rgba(0,0,0,0.3);
}

/* 2. Chrome/Safari/Edge Scrollbar - Scoped to #projects */
#projects::-webkit-scrollbar {
  width: 6px;
}

#projects::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}

#projects::-webkit-scrollbar-thumb {
  background: var(--neon-green);
  border-radius: 4px;
  opacity: 0.5;
}

#projects::-webkit-scrollbar-thumb:hover {
  background: var(--alert-red); 
}

/* =========================
   SPOTIFY WIDGET
========================= */

.music-widget {
  margin-top: 16px;
  padding: 18px;
  
  /* Match Coding Stats Aesthetic */
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 255, 213, 0.25);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.3s ease;
}

.music-widget:hover {
  border-color: var(--neon-green);
}

.music-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.music-status {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5); /* Default Dim */
  font-weight: bold;
  transition: color 0.3s ease;
}

/* TRACK INFO */
.track-info {
  z-index: 2;
  position: relative;
}

.track-name-wrapper {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

#track-name {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  display: inline-block;
}

/* MARQUEE ANIMATION (Triggered by JS) */
#track-name.scrolling {
  animation: marquee 10s linear infinite;
  padding-left: 100%; /* Start off screen */
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

#artist-name {
  font-size: 0.8rem;
  color: var(--neon-green);
  opacity: 0.8;
  margin-top: 2px;
}

/* SPOTIFY LOGO BACKGROUND */
.spotify-icon {
  position: absolute;
  right: -10px;
  bottom: -15px;
  width: 80px;
  height: 80px;
  opacity: 0.1;
  transform: rotate(-15deg);
  pointer-events: none;
  z-index: 1;
  fill: var(--neon-green);
}

/* EQUALIZER BARS */
.equalizer {
  display: flex;
  gap: 3px;
  height: 12px;
  align-items: flex-end;
  opacity: 0.5;
}

.bar {
  width: 3px;
  background-color: var(--neon-green);
  height: 2px;
  border-radius: 2px;
  transition: height 0.2s ease;
}

/* Active Animation when .playing class is added */
.music-widget.playing .equalizer .bar {
  animation: equalize 1s infinite ease-in-out;
}

.music-widget.playing .equalizer .bar:nth-child(1) { animation-delay: 0.1s; }
.music-widget.playing .equalizer .bar:nth-child(2) { animation-delay: 0.3s; }
.music-widget.playing .equalizer .bar:nth-child(3) { animation-delay: 0.5s; }
.music-widget.playing .equalizer .bar:nth-child(4) { animation-delay: 0.2s; }

@keyframes equalize {
  0% { height: 2px; }
  50% { height: 12px; }
  100% { height: 2px; }
}

/* Cool Mode Override */
body.cool-mode .music-widget {
  border-color: rgba(0, 255, 255, 0.5);
}

/* =========================
   LINK PEEK WIDGET
========================= */

#link-peek {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  background: rgba(10, 10, 10, 0.95);
  border: 1px solid var(--neon-green);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 255, 213, 0.15);
  backdrop-filter: blur(10px);
  z-index: 999999;
  
  /* Start hidden */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95) translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  
  /* Font settings */
  font-family: monospace;
  overflow: hidden;
}

#link-peek.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Header Bar */
.peek-header {
  background: rgba(0, 255, 213, 0.1);
  padding: 6px 10px;
  border-bottom: 1px solid rgba(0, 255, 213, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.peek-dots {
  display: flex;
  gap: 4px;
}

.peek-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.peek-dots span:nth-child(1) { background: #ff5f56; } /* Mac Close Red */
.peek-dots span:nth-child(2) { background: #ffbd2e; } /* Mac Min Yellow */
.peek-dots span:nth-child(3) { background: #27c93f; } /* Mac Max Green */

.peek-title {
  font-size: 0.65rem;
  color: var(--neon-green);
  opacity: 0.7;
  letter-spacing: 1px;
}

/* Content Area */
.peek-content {
  padding: 12px;
}

/* Fake Address Bar */
.peek-bar {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.7rem;
  color: #fff;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  gap: 2px;
}

.peek-protocol {
  color: #888;
}

.peek-url {
  color: var(--neon-green);
}

/* The "Scanner" Visual */
.peek-visual {
  height: 80px;
  background: 
    linear-gradient(rgba(0, 255, 213, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 213, 0.05) 1px, transparent 1px);
  background-size: 10px 10px;
  border: 1px dashed rgba(0, 255, 213, 0.3);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.signal-text {
  font-size: 0.6rem;
  color: var(--neon-green);
  background: #000;
  padding: 2px 6px;
  z-index: 2;
  border: 1px solid var(--neon-green);
}

/* Scan Line Animation */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0, 255, 213, 0.2), transparent);
  animation: peekScan 2s linear infinite;
  pointer-events: none;
}

@keyframes peekScan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* Cool Mode Override */
body.cool-mode #link-peek {
  border-color: #00ffff;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}
body.cool-mode .peek-title,
body.cool-mode .peek-url, 
body.cool-mode .signal-text {
  color: #00ffff;
}

/* =========================
   GRAVITY TEXT EFFECT
========================= */

#gravity-text {
  display: inline-block;
  cursor: pointer;
}

/* Individual letters (created by JS) */
.g-char {
  display: inline-block;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.5, 0, 0.5, 1); /* Fall: Gravity accel */
  transform-origin: center bottom;
}

/* The Falling State */
.g-char.fallen {
  transform: translateY(var(--dist)) rotate(var(--rot));
  transition: transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335); /* Heavy bounce hit */
}

/* The Reset (Rewind) State */
.g-char.resetting {
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snap back */
}

/* =========================
   TRUE ELECTRIC BORDER (JAGGED)
========================= */

/* 1. Reset Card */
.project-card {
  position: relative;
  background: rgba(10, 10, 10, 0.6); /* Darker bg for contrast */
  z-index: 1;
  /* Make space for the messy border */
  margin: 4px; 
}

/* 2. Create the Border Element */
.project-card::after {
  content: "";
  position: absolute;
  inset: -4px; /* Extend outside the card */
  z-index: -1; /* Sit behind content */
  
  /* The Electric Look */
  border: 2px solid var(--neon-green);
  border-radius: 12px;
  
  /* The Glow */
  box-shadow: 
    0 0 10px var(--neon-green),
    0 0 20px var(--neon-green),
    inset 0 0 20px var(--neon-green);
  
  /* The Distortion Filter */
  filter: url(#electric-filter);
  
  /* Hide by default */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 3. Hover State */
.project-card:hover::after {
  opacity: 1;
}

/* Optional: Make the card background solid on hover so text stays readable */
.project-card:hover {
  background: #000;
  transform: scale(1.02);
  z-index: 10;
}

/* 4. Cool Mode Adaptation (Blue Lightning) */
body.cool-mode .project-card::after {
  border-color: #00ffff;
  box-shadow: 
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    inset 0 0 20px #00ffff;
}