:root{
  --bg:#0b1020; --fg:#eef3ff; --muted:#a8b3cf; --glass:rgba(255,255,255,.08);
  --accent: #7cf8c8; --accent2:#8aa4ff; --danger:#ff6b6b; --ok:#5be37d;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  
  /* Frequently used colors for consistency */
  --accent-alpha-85: rgba(124,248,200,.85);
  --accent-alpha-6: rgba(124,248,200,.6);
  --accent-alpha-35: rgba(124,248,200,.35);
  --accent2-alpha-6: rgba(138,164,255,.6);
  --accent2-alpha-25: rgba(138,164,255,.25);
  
  /* Purple WALL-E underground color palette */
  --walle-purple-dk: #6a4c93;
  --walle-purple-md: #8b4fb3;
  --walle-purple-lt: #a663cc;
  --walle-purple-glow: #c77dff;
  --walle-brown-minimal: #8b5a3c;
  --walle-brown-accent: #a0522d;
  --walle-eye-blue : #4a90e2;
  
  /* Common fade animations */
  --fade-in: fadeIn 0.6s cubic-bezier(.22,1.1,.36,1);
  --fade-out: fadeOut 0.55s ease forwards;
}
html,body{margin:0;height:100%;background:linear-gradient(140deg,#090e1a,#0f1630 60%,#101a3f);overflow:hidden;}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; color:var(--fg);} 
body.underground-mode{
  background:linear-gradient(160deg,var(--walle-purple-dk) 0%,#2d1b3d 35%,var(--walle-brown-minimal) 70%,#3d2946 100%);
  position: relative;
  overflow: hidden;
}

/* Underground atmospheric particles */
body.underground-mode::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(1px 1px at 20px 30px, rgba(199, 125, 255, 0.3), transparent),
    radial-gradient(1px 1px at 40px 70px, rgba(166, 99, 204, 0.2), transparent),
    radial-gradient(2px 2px at 90px 40px, rgba(139, 79, 179, 0.3), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 160px 30px, rgba(199, 125, 255, 0.2), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: underground-particles 20s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

@keyframes underground-particles {
  0% { transform: translateY(0px) translateX(0px); }
  100% { transform: translateY(-100px) translateX(-50px); }
}

/* Underground depth shadows */
body.underground-mode::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse at 25% 25%, transparent 40%, rgba(0, 0, 0, 0.15) 100%),
    radial-gradient(ellipse at 75% 75%, transparent 40%, rgba(0, 0, 0, 0.15) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, transparent 20%);
  pointer-events: none;
  z-index: 2;
  opacity: 0.8;
} 
/* ===== Preloader ===== */
#loader{position:fixed; inset:0; background:radial-gradient(circle at 50% 40%,#0f182d 0%,#060a14 70%); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:40px; z-index:10000; color:var(--fg); font-family:inherit; overflow:hidden;}
#loader.hidden{pointer-events:none;}
#loader.fade-out{animation:loaderFade .9s ease forwards;}
@keyframes loaderFade{50%{opacity:0; transform:scale(1.04);}100%{opacity:0; visibility:hidden;}}
#loader .loader-inner{position:relative; display:flex; flex-direction:column; align-items:center; gap:32px; width:min(580px,86vw);}
.brand-block{display:flex; flex-direction:column; align-items:center; gap:12px;}
.brand-logo{width:250px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.55)); animation:logoPop .9s cubic-bezier(.22,1.25,.36,1);} 
@keyframes logoPop{0%{transform:translateY(20px) scale(.85); opacity:0;}60%{transform:translateY(-4px) scale(1.05); opacity:1;}100%{transform:translateY(0) scale(1);} }
.brand-block .tag{font-size:13px; letter-spacing:3px; font-weight:600; background:linear-gradient(90deg,var(--accent2),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; text-align:center;}
.progress-area{display:flex; flex-direction:column; gap:18px; width:100%;}
.pulse-line{position:relative; height:34px; width:100%; overflow:hidden; border-radius:999px; background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12);}
.pulse-line span{position:absolute; left:-40%; top:0; width:40%; height:100%; background:linear-gradient(90deg,rgba(138,164,255,0),rgba(138,164,255,.8),rgba(124,248,200,0)); filter:blur(2px); animation:pulseScan 2.2s ease-in-out infinite;}
@keyframes pulseScan{0%{left:-40%;}50%{left:60%;}100%{left:140%;}}
.status-text{font-size:14px; font-weight:500; letter-spacing:.5px; min-height:18px; text-align:center;}
.bar{position:relative; height:6px; background:rgba(255,255,255,.08); border-radius:6px; overflow:hidden;}
#load-bar{position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,var(--accent2),var(--accent)); box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 16px -2px rgba(124,248,200,.6);}
/* loader robot removed */
.loader-hint{position:absolute; bottom:40px; left:50%; transform:translateX(-50%); font-size:12px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--muted); opacity:.8; animation:hintPulse 4s ease-in-out infinite;}
@keyframes hintPulse{0%,100%{opacity:.25; letter-spacing:2px;}50%{opacity:.85; letter-spacing:3px;}}
/* Transition animation of EVE from loader to cursor */
body.pre-init #cursor-eve{opacity:0;}
body.loader-transition #cursor-eve{animation:eveArrival 1.15s cubic-bezier(.22,1.2,.36,1) forwards;}
@keyframes eveArrival{0%{opacity:0; transform:translate(50%,50%) scale(.4) rotate(-18deg);}60%{opacity:1; transform:translate(0,0) scale(1.12);}100%{opacity:1; transform:translate(0,0) scale(1);} }
/* Loader to world reveal mask */
#loader.world-zoom{animation:worldReveal 1.1s ease forwards; transform-origin:center;}
@keyframes worldReveal{0%{clip-path:circle(140% at 50% 50%);}100%{clip-path:circle(0% at 85% 78%); opacity:0;}}
@media (prefers-reduced-motion: reduce){#loader,#loader *{animation:none !important;}}

/* Glass Branch Description Box */
.glass-description {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 400px;
  max-width: 650px;
  width: 85%;
  padding: 24px 32px;
  z-index: 1000;
  
  /* Enhanced Glass morphism with more box-like appearance */
  background: linear-gradient(
    145deg,
    rgba(106, 76, 147, 0.12) 0%,
    rgba(139, 79, 179, 0.20) 30%,
    rgba(163, 73, 164, 0.15) 70%,
    rgba(106, 76, 147, 0.10) 100%
  );
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  
  /* More defined box structure */
  border: 2px solid;
  border-image: linear-gradient(
    145deg,
    rgba(139, 79, 179, 0.6) 0%,
    rgba(163, 73, 164, 0.8) 50%,
    rgba(139, 79, 179, 0.6) 100%
  ) 1;
  border-radius: 12px;
  
  /* Advanced glass effects */
  box-shadow: 
    0 8px 32px rgba(106, 76, 147, 0.35),
    0 16px 64px rgba(139, 79, 179, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(139, 79, 179, 0.15),
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 rgba(139, 79, 179, 0.10);
  
  /* Refined animations */
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  transform: translateX(-50%) translateY(20px) scale(0.92);
  
  /* WALL-E micro details */
  position: relative;
}

.glass-description::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(
    145deg,
    rgba(139, 79, 179, 0.3),
    transparent 20%,
    transparent 80%,
    rgba(139, 79, 179, 0.3)
  );
  border-radius: 12px;
  z-index: -1;
  opacity: 0.7;
}

.glass-description::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 12px;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(139, 79, 179, 0.8), transparent);
  border-radius: 50%;
  box-shadow: 
    6px 0 0 rgba(139, 79, 179, 0.6),
    12px 0 0 rgba(139, 79, 179, 0.4);
}

.glass-description.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

#default-glass-description{
  padding-bottom: 20px;
}

/* Mobile visibility adjustments */
@media (max-width: 768px) {
  /*.glass-description {
    display: none !important;
  }*/
  
  .eve-mobile-dialog {
    transform: translateX(-50%) translateY(20px);
  }
  
  .eve-mobile-dialog.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.glass-description #branch-text {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.96);
  text-align: center;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(139, 79, 179, 0.3);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  letter-spacing: 0.3px;
}

/* ...existing code... */

/* Responsive glass-description for mobile */
@media (max-width: 768px) {
  .glass-description {
    min-width: unset;
    max-width: 86vw;
    width: 86vw;
    padding: 14px 10px;
    font-size: 15px;
    left: 50%;
    top: 30%; 
    transform: translateX(-50%);
    border-radius: 10px;
  }
}

/* Even smaller screens */
@media (max-width: 480px) {
  .glass-description {
    padding: 10px 4vw;
    font-size: 13px;
    top: 30%; 
  }
}

/* ...existing code... */

/* Responsive adjustments - Mobile First Approach */
@media (max-width: 768px) {
  /* Hide desktop glass description on mobile */
  /*.glass-description {
    display: none !important;
  }*/
  
  /* EVE Mobile Dialog Box */
  .eve-mobile-dialog {
    position: fixed;
    bottom: auto;
    top: auto;
    max-width: 280px;
    width: auto;
    min-width: 200px;
    padding: 12px 16px 12px 50px;
    z-index: 999; /* Below EVE cursor but above game */
    
    /* Dark EVE Speech Bubble Theme */
    background: linear-gradient(
      135deg,
      rgba(20, 30, 50, 0.95) 0%,
      rgba(25, 35, 60, 0.93) 50%,
      rgba(15, 25, 45, 0.95) 100%
    );
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    
    border: 1.5px solid rgba(124, 248, 200, 0.4);
    border-radius: 16px;
    
    box-shadow: 
      0 6px 24px rgba(0, 184, 232, 0.3),
      0 12px 32px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(0, 184, 232, 0.1);
    
    /* Speech bubble pointer positioning */
    position: fixed;
    
    /* Smooth movement animation */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
    pointer-events: none;
  }
  
  /* Speech bubble tail pointing to EVE - positioned dynamically */
  .eve-mobile-dialog::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: rgba(0, 184, 232, 0.4);
    /* Position will be set dynamically by JavaScript */
  }
  
  .eve-mobile-dialog::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.98);
    /* Position will be set dynamically by JavaScript */
  }
  
  /* EVE Avatar in dialog - more compact for following */
  .eve-mobile-dialog .eve-avatar {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: linear-gradient(140deg, #FFFFFF 0%, #EAE9EB 40%, #F5F5F5 100%);
    border: 1px solid rgba(0, 184, 232, 0.5);
    border-radius: 50%;
    box-shadow: 
      0 2px 6px rgba(0, 184, 232, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    
    /* Cute bouncing animation */
    animation: eve-avatar-bounce 2s ease-in-out infinite;
    
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  @keyframes eve-avatar-bounce {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-55%) scale(1.05); }
  }
  
  .eve-mobile-dialog .eve-avatar::after {
    content: '';
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at 40% 30%, #4A90E2 0%, #0088CC 70%);
    border-radius: 50%;
    box-shadow: 
      0 0 3px rgba(74, 144, 226, 0.9),
      0 0 6px rgba(0, 136, 204, 0.5);
    animation: eve-eye-sparkle 3s ease-in-out infinite;
  }
  
  @keyframes eve-eye-sparkle {
    0%, 90%, 100% { opacity: 1; transform: scale(1); }
    95% { opacity: 0.3; transform: scale(0.8); }
    25%, 75% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 4px rgba(74, 144, 226, 1), 0 0 8px rgba(0, 136, 204, 0.8); }
  }
  
  .eve-mobile-dialog.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }
  
  .eve-mobile-dialog #mobile-branch-text {
    font-size: 12px;
    line-height: 1.4;
    background: linear-gradient(135deg, #7cf8c8, #8aa4ff, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 500;
    letter-spacing: 0.1px;
    text-shadow: 0 1px 2px rgba(124, 248, 200, 0.3);
    margin: 0;
    /* Cute text animation */
    animation: text-glow 4s ease-in-out infinite;
  }
  
  @keyframes text-glow {
    0%, 100% { text-shadow: 0 1px 2px rgba(0, 184, 232, 0.2); }
    50% { text-shadow: 0 1px 3px rgba(0, 184, 232, 0.4), 0 0 8px rgba(74, 144, 226, 0.2); }
  }
}

/* Mobile smaller screen adjustments */
@media (max-width: 480px) {
  .eve-mobile-dialog {
    max-width: 240px;
    min-width: 180px;
    padding: 10px 14px 10px 42px;
  }
  
  .eve-mobile-dialog .eve-avatar {
    width: 24px;
    height: 24px;
    left: 6px;
  }
  
  .eve-mobile-dialog .eve-avatar::after {
    width: 5px;
    height: 5px;
  }
  
  .eve-mobile-dialog #mobile-branch-text {
    font-size: 11px;
    line-height: 1.3;
  }
  
  .eve-underground-dialog {
    max-width: 240px;
    min-width: 180px;
    padding: 10px 14px 10px 42px;
  }
  
  .eve-underground-dialog .eve-avatar {
    width: 24px;
    height: 24px;
    left: 6px;
  }
  
  .eve-underground-dialog .eve-avatar::before {
    width: 3px;
    height: 3px;
    top: -2px;
  }
  
  .eve-underground-dialog .eve-avatar::after {
    width: 5px;
    height: 5px;
  }
  
  .eve-underground-dialog #mobile-underground-text {
    font-size: 11px;
    line-height: 1.3;
    background: linear-gradient(135deg, #7cf8c8, #8aa4ff, #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 500;
  }
}

/* Hide during loader phase */
body.pre-init .glass-description,
body.loader-transition .glass-description {
  opacity: 0;
  pointer-events: none;
}

/* Hide road text box when in underground mode, timeline mode, or when overview is open */
body.underground-mode .glass-description:not(.underground-box),
body.timeline-mode .glass-description:not(.underground-box),
body.overview-open .glass-description:not(.underground-box) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Additional failsafe - hide road glass-description when overlays are active, but keep underground box */
body.underground-mode .glass-description:not(.underground-box),
body.timeline-mode .glass-description:not(.underground-box),
body.overview-open .glass-description:not(.underground-box) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Exception: ALWAYS keep underground-box visible in underground mode */
body.underground-mode .glass-description.underground-box {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: none !important;
}

/* Underground Timeline Description Box (Left Side) */
.underground-box {
  position: fixed;
  top: 80%;
  left: 20px;
  transform: translateY(-50%);
  min-width: 300px;
  max-width: 400px;
  width: auto;
  padding: 18px 24px;
  z-index: 900; /* Lower than road box to avoid conflicts */
  
  /* WALL-E purple underground theme with minimal brown accents */
  background: linear-gradient(
    145deg,
    rgba(106, 76, 147, 0.25) 0%,
    rgba(139, 79, 179, 0.35) 30%,
    rgba(166, 99, 204, 0.20) 50%,
    rgba(139, 90, 60, 0.15) 80%,
    rgba(106, 76, 147, 0.18) 100%
  );
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  
  border: 2px solid;
  border-image: linear-gradient(
    145deg,
    rgba(199, 125, 255, 0.8) 0%,
    rgba(166, 99, 204, 0.9) 30%,
    rgba(139, 90, 60, 0.6) 70%,
    rgba(199, 125, 255, 0.7) 100%
  ) 1;
  border-radius: 12px;
  
  box-shadow: 
    0 8px 32px rgba(106, 76, 147, 0.4),
    0 16px 64px rgba(139, 79, 179, 0.25),
    inset 0 1px 0 rgba(199, 125, 255, 0.3),
    inset 0 -1px 0 rgba(139, 90, 60, 0.2),
    inset 1px 0 0 rgba(255, 255, 255, 0.15),
    inset -1px 0 0 rgba(139, 79, 179, 0.15);
  
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  transform: translateY(-50%) translateX(-20px) scale(0.94);
}

.underground-box::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(
    145deg,
    rgba(199, 125, 255, 0.5),
    transparent 25%,
    transparent 75%,
    rgba(139, 90, 60, 0.4)
  );
  border-radius: 12px;
  z-index: -1;
  opacity: 0.9;
  animation: underground-glow 4s ease-in-out infinite;
}

@keyframes underground-glow {
  0%, 100% {
    opacity: 0.9;
    background: linear-gradient(
      145deg,
      rgba(199, 125, 255, 0.5),
      transparent 25%,
      transparent 75%,
      rgba(139, 90, 60, 0.4)
    );
  }
  50% {
    opacity: 1;
    background: linear-gradient(
      145deg,
      rgba(199, 125, 255, 0.7),
      transparent 20%,
      transparent 80%,
      rgba(139, 90, 60, 0.6)
    );
  }
}

.underground-box::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 12px;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(199, 125, 255, 0.9), transparent);
  border-radius: 50%;
  box-shadow: 
    6px 0 0 rgba(199, 125, 255, 0.7),
    12px 0 0 rgba(166, 99, 204, 0.5),
    18px 0 0 rgba(139, 90, 60, 0.4),
    0 6px 0 rgba(199, 125, 255, 0.6),
    6px 6px 0 rgba(166, 99, 204, 0.4),
    0 12px 0 rgba(139, 90, 60, 0.3);
  animation: crystal-pulse 3s ease-in-out infinite;
}

@keyframes crystal-pulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
    box-shadow: 
      6px 0 0 rgba(199, 125, 255, 0.7),
      12px 0 0 rgba(166, 99, 204, 0.5),
      18px 0 0 rgba(139, 90, 60, 0.4),
      0 6px 0 rgba(199, 125, 255, 0.6),
      6px 6px 0 rgba(166, 99, 204, 0.4),
      0 12px 0 rgba(139, 90, 60, 0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 
      6px 0 0 rgba(199, 125, 255, 0.9),
      12px 0 0 rgba(166, 99, 204, 0.7),
      18px 0 0 rgba(139, 90, 60, 0.6),
      0 6px 0 rgba(199, 125, 255, 0.8),
      6px 6px 0 rgba(166, 99, 204, 0.6),
      0 12px 0 rgba(139, 90, 60, 0.5);
  }
}

.underground-box.visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
}

/* Mobile visibility adjustments for underground */
@media (max-width: 768px) {
  .underground-box {
    display: none !important;
  }
  
  .eve-underground-dialog {
    transform: translateX(-50%) translateY(20px);
  }
  
  .eve-underground-dialog.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.underground-box #underground-text {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 250, 240, 0.95);
  text-align: left;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.7),
    0 1px 3px rgba(199, 125, 255, 0.5),
    0 0 12px rgba(139, 79, 179, 0.3);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  letter-spacing: 0.3px;
}

/* Hide underground box when not in underground mode */
body:not(.underground-mode) .underground-box {
  display: none;
}

/* Show only in underground mode */
body.underground-mode .underground-box {
  display: block;
}

/* Responsive adjustments for underground box - Mobile First */
@media (max-width: 1024px) {
  .underground-box {
    left: 15px;
    min-width: 260px;
    max-width: 290px;
    padding: 16px 20px;
    top: 90%;
  }
  
  .underground-box #underground-text {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  /* Hide desktop underground box on mobile */
  .underground-box {
    display: none !important;
  }
  
  /* EVE Underground Mobile Dialog Box */
  .eve-underground-dialog {
    position: fixed;
    bottom: auto;
    top: auto;
    max-width: 280px;
    width: auto;
    min-width: 200px;
    padding: 12px 16px 12px 50px;
    z-index: 999; /* Below EVE cursor but above game */
    
    /* Underground EVE Speech Bubble Theme */
    background: linear-gradient(
      135deg,
      rgba(106, 76, 147, 0.98) 0%,
      rgba(139, 79, 179, 0.95) 30%,
      rgba(166, 99, 204, 0.92) 70%,
      rgba(199, 125, 255, 0.95) 100%
    );
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    
    border: 1.5px solid rgba(199, 125, 255, 0.7);
    border-radius: 16px;
    
    box-shadow: 
      0 6px 24px rgba(106, 76, 147, 0.5),
      0 12px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -1px 0 rgba(199, 125, 255, 0.3);
    
    /* Smooth movement animation */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
    pointer-events: none;
  }
  
  /* Underground speech bubble tail - positioned dynamically */
  .eve-underground-dialog::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: rgba(199, 125, 255, 0.7);
    /* Position will be set dynamically by JavaScript */
  }
  
  .eve-underground-dialog::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: rgba(139, 79, 179, 0.95);
    /* Position will be set dynamically by JavaScript */
  }
  
  /* Underground EVE Avatar with headlight - more compact */
  .eve-underground-dialog .eve-avatar {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: linear-gradient(140deg, var(--walle-purple-dk) 0%, var(--walle-purple-md) 40%, var(--walle-brown-minimal) 100%);
    border: 1px solid rgba(199, 125, 255, 0.8);
    border-radius: 50%;
    box-shadow: 
      0 2px 6px rgba(199, 125, 255, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    
    /* Cute bouncing animation with underground theme */
    animation: eve-underground-bounce 2.5s ease-in-out infinite;
    
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  @keyframes eve-underground-bounce {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-55%) scale(1.08); }
  }
  
  /* Underground EVE headlight effect - smaller for dialog */
  .eve-underground-dialog .eve-avatar::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(199, 125, 255, 0.7));
    border-radius: 50%;
    box-shadow: 
      0 0 6px rgba(255, 255, 255, 0.9),
      0 0 12px rgba(199, 125, 255, 0.7);
    animation: underground-avatar-headlight 2.5s ease-in-out infinite;
  }
  
  @keyframes underground-avatar-headlight {
    0%, 100% { opacity: 0.9; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.3); }
  }
  
  .eve-underground-dialog .eve-avatar::after {
    content: '';
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at 40% 30%, var(--walle-purple-glow) 0%, var(--walle-purple-lt) 70%);
    border-radius: 50%;
    box-shadow: 
      0 0 3px rgba(199, 125, 255, 0.9),
      0 0 6px rgba(166, 99, 204, 0.5);
    animation: eve-underground-eye-sparkle 3.5s ease-in-out infinite;
  }
  
  @keyframes eve-underground-eye-sparkle {
    0%, 90%, 100% { opacity: 1; transform: scale(1); }
    95% { opacity: 0.4; transform: scale(0.8); }
    30%, 70% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 4px rgba(199, 125, 255, 1), 0 0 8px rgba(166, 99, 204, 0.8); }
  }
  
  .eve-underground-dialog.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }
  
  .eve-underground-dialog #mobile-underground-text {
    font-size: 12px;
    line-height: 1.4;
    background: linear-gradient(135deg, #a8c8ff, #c9a9ff, #2c2c2c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 500;
    letter-spacing: 0.1px;
    text-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.7),
      0 1px 2px rgba(199, 125, 255, 0.5);
    margin: 0;
    /* Cute underground text glow */
    animation: underground-text-glow 4s ease-in-out infinite;
  }
  
  @keyframes underground-text-glow {
    0%, 100% { 
      text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 1px 2px rgba(199, 125, 255, 0.5);
    }
    50% { 
      text-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.8),
        0 1px 3px rgba(199, 125, 255, 0.7),
        0 0 10px rgba(166, 99, 204, 0.4);
    }
  }
}



/* Common fade animations */
@keyframes fadeIn {
  from { opacity:0; transform:scale(.98); }
  to { opacity:1; transform:none; }
}

@keyframes fadeOut {
  to { opacity:0; transform:scale(1.02); }
}

/* ===== Guided Start Overlay ===== */
#guide-overlay{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9000; pointer-events:none; font-family:inherit;}
#guide-overlay.active{display:flex; animation:var(--fade-in);}
#guide-overlay.fading{animation:var(--fade-out);}
.guide-content{position:relative; display:flex; flex-direction:column; gap:28px; align-items:center;}
.guide-prompt{background:rgba(10,16,32,.65); backdrop-filter:blur(14px) saturate(140%); border:1px solid rgba(255,255,255,.15); padding:20px 28px; border-radius:18px; font-size:20px; font-weight:600; letter-spacing:.5px; color:#e6ecff; box-shadow:0 10px 34px -10px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05) inset; position:relative; overflow:hidden;}
.guide-prompt::before{content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(138,164,255,.15),rgba(124,248,200,.08) 40%,rgba(138,164,255,.15)); opacity:.6; mix-blend-mode:overlay;}
.guide-prompt .keys{background:linear-gradient(90deg,var(--accent2),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; margin-right:10px;}
.guide-prompt kbd{display:inline-block; min-width:32px; text-align:center; padding:6px 8px; margin:0 2px; background:linear-gradient(180deg,#0f182c,#101f3d); border:1px solid rgba(255,255,255,.22); border-radius:8px; font:600 14px/1 "Segoe UI",ui-sans-serif; color:#e6ecff; box-shadow:0 4px 10px -4px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06) inset; position:relative;}
.guide-prompt kbd::after{content:""; position:absolute; inset:2px; border-radius:6px; background:linear-gradient(120deg,rgba(255,255,255,.12),rgba(255,255,255,0));}
.guide-prompt .or{font-size:14px; font-weight:500; color:var(--muted); margin:0 8px;}
.guide-prompt .msg{font-weight:500; font-size:18px; color:var(--fg);}
#guide-prompt-touch{display:none;}
@media (hover:none),(pointer:coarse){#guide-prompt-desktop{display:none;}#guide-prompt-touch{display:block;} }
.highlight-ring{position:absolute; width:120px; height:120px; border-radius:50%; border:3px solid rgba(124,248,200,.55); box-shadow:0 0 0 4px rgba(124,248,200,.15),0 0 40px -6px rgba(124,248,200,.6); animation:ringPulse 2.6s ease-in-out infinite; opacity:.85;}
.highlight-ring::after{content:""; position:absolute; inset:-6px; border:2px dashed rgba(138,164,255,.6); border-radius:50%; animation:ringRotate 8s linear infinite; opacity:.55;}
@keyframes ringPulse{0%,100%{transform:scale(.86);}50%{transform:scale(1);} }
@keyframes ringRotate{to{transform:rotate(360deg);} }
#ring-left{bottom:70px; left:calc(50% - 140px);}
#ring-right{bottom:70px; left:calc(50% + 40px);}
@media (max-width:900px){#ring-left,#ring-right{display:none;}}
@media (prefers-reduced-motion: reduce){.highlight-ring{animation:none !important;} .guide-prompt{animation:none !important;} }

/* header/HUD removed in favor of in-canvas HUD */
#game-wrap{position:fixed; inset:0; height:100dvh; display:grid; place-items:center;}
canvas{width:100%; height:100%; display:block; touch-action:none}

/* Overlay panels */
.overlay{
  position:fixed; inset:0; display:none; place-items:center; z-index:10; background:rgba(2,6,23,.35); backdrop-filter: blur(10px);
}
.panel{
  width:min(820px,92vw); max-height:calc(82vh - env(safe-area-inset-bottom)); overflow:auto; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow: var(--shadow); padding:22px 20px 16px;
  animation:pop .18s ease-out;
}
@keyframes pop{from{transform:translateY(8px) scale(.98); opacity:0} to{transform:none; opacity:1}}

.panel h2{margin:0 0 8px; font-size:22px}
.panel p{color:var(--muted); line-height:1.5}
.grid{display:grid; gap:14px}
.grid.cols-2{grid-template-columns: 1fr 1fr}
@media (max-width:780px){ .grid.cols-2{grid-template-columns:1fr} }

/* Custom Scrollbar - Car Theme */
.panel {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--glass);
}

.panel::-webkit-scrollbar {
  width: 16px;
}

.panel::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(11, 16, 32, 0.6), rgba(26, 35, 59, 0.4));
  border-radius: 12px;
  border: 1px solid rgba(138, 164, 255, 0.1);
  position: relative;
}

.panel::-webkit-scrollbar-track:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(138, 164, 255, 0.3), transparent);
  transform: translateX(-50%);
}

.panel::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--accent2), var(--accent));
  border-radius: 12px;
  border: 2px solid rgba(11, 16, 32, 0.3);
  position: relative;
  min-height: 40px;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

.panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #9bb5ff, #8ffed0);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 15px rgba(124, 248, 200, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.4);
  transform: scale(1.05);
}

.panel::-webkit-scrollbar-thumb:active {
  background: linear-gradient(45deg, #7a94ff, #6ee8bb);
  transform: scale(0.95);
}

/* Add car headlight effect */
.panel::-webkit-scrollbar-thumb:after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 70%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* Add wheel-like details */
.panel::-webkit-scrollbar-thumb:before {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(11, 16, 32, 0.6);
}

/* Content-Aware Card Styling */
.card {
  --dx:0px; --dy:0px; --glowX:0px; --glowY:0px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
  transition: background .4s ease, border-color .4s ease, transform .45s cubic-bezier(.22,.68,.32,1);
  backdrop-filter: blur(12px) saturate(130%);
  transform: translate3d(var(--dx), var(--dy), 0) perspective(800px) translateZ(0);
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent, rgba(138, 164, 255, 0.1));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 14px 34px -6px rgba(0,0,0,.55),
    0 0 24px -4px rgba(138,164,255,.25),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.card:hover::after {
  opacity: 1;
}

/* Header Card - Project Info */
.card.hero {
  background: linear-gradient(135deg, 
    rgba(138, 164, 255, 0.2) 0%, 
    rgba(124, 248, 200, 0.15) 50%, 
    rgba(138, 164, 255, 0.1) 100%);
  border: 1px solid rgba(138, 164, 255, 0.4);
  position: relative;
  overflow: hidden;
}

.card.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent2), var(--accent), var(--accent2));
  animation: shimmer 2s ease-in-out infinite;
}

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

.card.hero::after {
  content: '🚗';
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 24px;
  opacity: 0.3;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

/* Problem Card - Warning Theme */
.card.problem {
  background: linear-gradient(135deg, 
    rgba(255, 107, 107, 0.15) 0%, 
    rgba(255, 159, 67, 0.1) 100%);
  border: 1px solid rgba(255, 107, 107, 0.3);
  position: relative;
}

.card.problem::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff6b6b, #ff9f43);
}

.card.problem::after {
  content: '⚠️';
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 22px;
  opacity: 0.7;
  animation: pulse-warning 2s ease-in-out infinite;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

/* Solution Card - Success Theme */
.card.solution {
  background: linear-gradient(135deg, 
    rgba(124, 248, 200, 0.2) 0%, 
    rgba(138, 164, 255, 0.15) 100%);
  border: 1px solid rgba(124, 248, 200, 0.4);
  position: relative;
}

.card.solution::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
}

.card.solution::after {
  content: '💡';
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 22px;
  opacity: 0.8;
  filter: drop-shadow(0 0 10px rgba(124, 248, 200, 0.6));
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { filter: drop-shadow(0 0 10px rgba(124, 248, 200, 0.4)); }
  to { filter: drop-shadow(0 0 20px rgba(124, 248, 200, 0.8)); }
}

/* Phase Cards - Progressive Theme */
.card.phase {
  background: linear-gradient(135deg, 
    rgba(138, 164, 255, 0.15) 0%, 
    rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(138, 164, 255, 0.25);
  position: relative;
}

.card.phase::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  animation: phase-progress 3s ease-in-out infinite;
}

@keyframes phase-progress {
  0% { height: 20%; top: 0; }
  50% { height: 100%; top: 0; }
  100% { height: 20%; top: 80%; }
}

/* Locked Phase - Red Text */
.card.phase.locked {
  background: linear-gradient(135deg, 
    rgba(255, 138, 138, 0.15) 0%, 
    rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 138, 138, 0.25);
  color: #ff6b6b;
}

.card.phase.locked h3,
.card.phase.locked .summary {
  color: #ff6b6b !important;
}

.card.phase.locked::before {
  background: linear-gradient(180deg, #ff6b6b, #e74c3c);
}

/* Impact Card - Special Highlight */
.card.impact {
  background: linear-gradient(135deg, 
    rgba(124, 248, 200, 0.25) 0%, 
    rgba(138, 164, 255, 0.2) 50%,
    rgba(124, 248, 200, 0.15) 100%);
  border: 1px solid rgba(124, 248, 200, 0.5);
  position: relative;
  overflow: hidden;
}

.card.impact::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    transparent 0deg,
    rgba(124, 248, 200, 0.2) 90deg,
    rgba(138, 164, 255, 0.2) 180deg,
    rgba(124, 248, 200, 0.2) 270deg,
    transparent 360deg
  );
  animation: rotate-gradient 8s linear infinite;
  z-index: -1;
}

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

.card.impact::after {
  content: '🌍';
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 22px;
  opacity: 0.8;
  animation: earth-spin 4s linear infinite;
}

@keyframes earth-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Enhanced Typography for Cards */
.card h3 {
  margin: 0 0 8px 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 18px;
}

.card h4 {
  margin: 0 0 10px 0;
  color: var(--fg);
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card p {
  margin: 0 0 8px 0;
  line-height: 1.6;
  color: var(--muted);
}

.card ul {
  margin: 10px 0 0 0;
  padding-left: 16px;
  color: var(--muted);
}

.card li {
  margin-bottom: 6px;
  line-height: 1.5;
}

/* Liquid sheen overlay reacts to --glowX/--glowY */
.liquid-enabled .card::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at calc(50% + var(--glowX)) calc(40% + var(--glowY)), rgba(138,164,255,.25), rgba(124,248,200,.12) 22%, rgba(124,248,200,0) 60%);
  mix-blend-mode: plus-lighter;
  opacity:.55;
  pointer-events:none;
  transition: opacity .6s ease;
}
.liquid-enabled .card:hover::before { opacity:.85; }

/* Panel passing car */
.panel-car {
  position:absolute; top:0; left:0;
  width:82px; height:34px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  border:1px solid rgba(255,255,255,.4);
  border-radius:14px;
  box-shadow:0 4px 14px -2px rgba(0,0,0,.6),0 0 22px -4px rgba(124,248,200,.55);
  filter:brightness(1.05) saturate(120%);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:#0b1020;
  pointer-events:none; z-index:50;
  overflow:hidden;
}
.panel-car::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%);
  mix-blend-mode:overlay; opacity:.35;
}
.panel-car .wheels { position:absolute; left:6px; right:6px; bottom:-4px; height:10px; display:flex; justify-content:space-between; }
.panel-car .wheels::before, .panel-car .wheels::after {
  content:''; width:14px; height:14px; background:#0b1020; border:2px solid #7cf8c8; border-radius:50%; box-shadow:0 0 0 2px #0b1020 inset,0 0 6px -2px #7cf8c8;
}

/* Enhanced Grid Layout */
.grid.overview {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 4px; /* Small padding to prevent cut-off of animations */
}

.grid.overview .card:first-child {
  grid-column: 1 / -1; /* Span full width for hero card */
}

/* Responsive adjustments */
@media (max-width: 780px) {
  .grid.overview {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  .card {
    padding: 14px;
  }
  
  .card h3 {
    font-size: 16px;
  }
  
  .card h4 {
    font-size: 14px;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card::before,
  .card::after {
    animation: none !important;
    transition: none !important;
  }
  
  .card:hover {
    transform: none;
  }
}

/* Performance optimization for animations */
.card::before,
.card::after {
  will-change: transform, opacity;
}

/* Fix for potential overflow issues */
.panel {
  position: relative;
}

.grid.overview {
  max-width: 100%;
  overflow-x: hidden;
}
.meta{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 0}
.meta .chip{font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
.btn{
  appearance:none; border:none; cursor:pointer; padding:10px 14px; border-radius:10px; font-weight:600;
  background:linear-gradient(90deg,var(--accent2),var(--accent)); color:#0b0f1c; box-shadow: var(--shadow);
  transition: all 0.2s ease;
}

/* Accessibility: Focus states for buttons */
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  transform: translateY(-1px);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 35px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1) inset;
}

.btn:active {
  transform: translateY(0);
}

.btn.secondary{
  background:rgba(255,255,255,.08); color:var(--fg); border:1px solid rgba(255,255,255,.12);
}

.btn.secondary:focus-visible {
  outline: 3px solid var(--fg);
  background:rgba(255,255,255,.15);
}

.btn.small{padding:8px 12px; font-size:12px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* Form */
form{display:grid; gap:12px; margin-top:8px}
label{font-size:13px; opacity:.9}
input, textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:var(--fg)
}
.help{font-size:12px; color:var(--muted)}
.success{color:var(--ok)} .error{color:var(--danger)}

/* Toasts */
#toasts{position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:20}
.toast{background:#0f172a; color:var(--fg); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:10px 12px;
  box-shadow: var(--shadow); animation:var(--fade-in)}

/* Touch controls with proper focus states */
#touch{
  position:fixed; left:0; right:0; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:6; display:flex; justify-content:center; gap:12px;
}
.padbtn{
  width:64px; height:64px; border-radius:999px; border:1px solid rgba(255,255,255,.2); 
  background:rgba(255,255,255,.06); cursor:pointer; transition:all 0.2s ease;
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Accessibility: Focus states for touch controls */
.padbtn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  background: rgba(124,248,200,.15);
}

.padbtn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.4);
}

.padbtn:active {
  transform: scale(0.95);
  background: rgba(124,248,200,.2);
}

/* Improve touch target sizes for accessibility */
@media (min-width:900px){ #touch{display:none} }
@media (max-width:699px){
  .padbtn{width:56px; height:56px; font-size:22px; backdrop-filter:blur(6px);}
  #touch{gap:8px;}
}
@media (max-width:480px){
  .padbtn{width:58px; height:58px; font-size:20px;} /* Increased from 52px for better accessibility */
}

/* Vertical touch controls for timeline */
#touch-vertical{
  position:fixed;
  right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:6;
  display:none;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
#touch-vertical .padbtn{width:62px; height:62px; font-size:22px; touch-action:manipulation;}
@media (max-width:699px){ #touch-vertical .padbtn{width:56px; height:56px;} }
@media (min-width:900px){ #touch-vertical{display:none !important;} }

/* Mobile portrait: allow scrolling panel & reduce padding */
@media (max-width:760px) and (orientation:portrait){
  .panel{width:96vw; max-height:calc(100dvh - 40px); padding:18px 16px 12px;}
  body{overflow:hidden;}
}

/* Orientation overlay disabled */
#orientation-overlay{display:none !important;}

/* Improve tap targets on very small devices */
@media (max-width:420px){
  .btn.small{padding:10px 14px; font-size:13px;}
}

/* Safe-area utility for iOS */
body::after{content:""; position:fixed; left:0; right:0; bottom:0; height:env(safe-area-inset-bottom); background:rgba(0,0,0,.4); pointer-events:none;}

/* High DPI clamp for low-power mode: will add a body class when engaged */
body.low-power canvas{image-rendering:pixelated;}

/* Fallback content for accessibility */
noscript {
  position: fixed; inset: auto 12px 12px 12px; z-index: 1;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px;
}

/* ========= EVE CURSOR SYSTEM (Film-Accurate Extra-Terrestrial Vegetation Evaluator) ========= */
/* Completely removes all bus/vehicle cursor code and rebuilds around hyper-detailed EVE */

body.eve-cursor { cursor: none; }
body.eve-cursor * { cursor: none !important; }

#cursor-eve { 
  position: fixed; 
  left: 0; 
  top: 0; 
  width: 46px; /* Film-accurate 0.85:1 width-to-height ratio */
  height: 54px; 
  transform: translate(-50%, -50%); 
  pointer-events: none; 
  z-index: 9999; 
  transition: filter 0.35s ease; 
  /* 3D Foundation - Enable perspective rendering */
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Main EVE body container with 3D floating animation */
#cursor-eve .eve-body { 
  width: 100%; 
  height: 100%; 
  position: relative; 
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.25)); 
  animation: eve-float-3d 3.8s ease-in-out infinite; 
  /* 3D Transform Base */
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
}

@keyframes eve-float-3d { 
  0%, 100% { 
    transform: translateY(-3px) rotateX(-1deg) rotateY(0.5deg); 
  } 
  50% { 
    transform: translateY(3px) rotateX(1deg) rotateY(-0.5deg); 
  } 
}

/* Anti-gravity propulsion rings - adjusted for egg proportions */
#cursor-eve .propulsion-field {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px; /* Slightly narrower for egg base */
  height: 16px;
  pointer-events: none;
}

#cursor-eve .energy-ring {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  /* Enhanced gradient border for film accuracy */
  border: 1.5px solid;
  border-image: linear-gradient(
    45deg, 
    rgba(0, 184, 232, 0.2) 0%, 
    rgba(0, 184, 232, 0.6) 50%, 
    rgba(0, 184, 232, 0.2) 100%
  ) 1;
  animation: energy-pulse 2.2s ease-in-out infinite;
  /* Add subtle inner glow */
  box-shadow: 
    0 0 0 1px rgba(0, 184, 232, 0.1) inset,
    0 0 8px rgba(0, 184, 232, 0.2);
}

#cursor-eve .energy-ring:nth-child(1) {
  width: 36px; /* Proportional to egg base */
  height: 8px;
  bottom: 0;
  animation-delay: 0s;
}

#cursor-eve .energy-ring:nth-child(2) {
  width: 42px; /* Proportional to egg base */
  height: 10px;
  bottom: -2px;
  animation-delay: 0.3s;
}

@keyframes energy-pulse {
  0%, 100% { 
    opacity: 0.3; 
    transform: translateX(-50%) scale(0.9); 
    border-image: linear-gradient(
      45deg, 
      rgba(0, 184, 232, 0.2) 0%, 
      rgba(0, 184, 232, 0.4) 50%, 
      rgba(0, 184, 232, 0.2) 100%
    ) 1;
    box-shadow: 
      0 0 0 1px rgba(0, 184, 232, 0.05) inset,
      0 0 6px rgba(0, 184, 232, 0.1);
  }
  50% { 
    opacity: 0.8; 
    transform: translateX(-50%) scale(1.1); 
    border-image: linear-gradient(
      45deg, 
      rgba(0, 184, 232, 0.4) 0%, 
      rgba(0, 184, 232, 0.8) 50%, 
      rgba(0, 184, 232, 0.4) 100%
    ) 1;
    box-shadow: 
      0 0 0 1px rgba(0, 184, 232, 0.2) inset,
      0 0 12px rgba(0, 184, 232, 0.4);
  }
}

/* EVE Body Section (Lower 60% - Main Egg Shell) */
#cursor-eve .body-section {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(140deg, #FFFFFF 0%, #EAE9EB 40%, #F5F5F5 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  /* 3D egg body with tapered bottom - using fallback clip-path */
  clip-path: ellipse(80% 95% at 50% 85%);
  border-radius: 50% 50% 40% 40% / 60% 60% 90% 90%;
  box-shadow: 
    0 0 0 1px rgba(0, 184, 232, 0.15) inset,
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 8px 24px -8px rgba(0, 184, 232, 0.2);
  transform-style: preserve-3d;
  /* Energy connection port at top */
  border-top: 2px solid rgba(0, 184, 232, 0.3);
}

/* Levitating Head Section (Upper 40% - Floating Display Unit) */
#cursor-eve .head-section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(140deg, #FFFFFF 0%, #EAE9EB 40%, #F5F5F5 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  /* 3D egg head with rounded top - using fallback clip-path */
  clip-path: ellipse(80% 95% at 50% 15%);
  border-radius: 40% 40% 50% 50% / 90% 90% 60% 60%;
  box-shadow: 
    0 0 0 1px rgba(0, 184, 232, 0.15) inset,
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(0, 184, 232, 0.3);
  transform-style: preserve-3d;
  /* Levitation effect - synchronized with body floating */
  animation: head-levitate 3.8s ease-in-out infinite;
  transform: translateZ(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes head-levitate {
  0%, 100% { 
    transform: translateZ(4px) translateY(-2px) rotateX(1deg); 
  }
  50% { 
    transform: translateZ(6px) translateY(2px) rotateX(-1deg); 
  }
}

/* Energy Tether - Connecting body to head */
#cursor-eve .energy-tether {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 4px;
  background: linear-gradient(180deg, 
    rgba(0, 184, 232, 0.8) 0%, 
    rgba(0, 184, 232, 0.4) 50%,
    rgba(0, 184, 232, 0.1) 100%
  );
  box-shadow: 0 0 8px rgba(0, 184, 232, 0.6);
  animation: tether-pulse 3.8s ease-in-out infinite;
  border-radius: 1px;
}

@keyframes tether-pulse {
  0%, 100% { 
    opacity: 0.6; 
    height: 3px;
    box-shadow: 0 0 6px rgba(0, 184, 232, 0.4);
  }
  50% { 
    opacity: 1; 
    height: 5px;
    box-shadow: 0 0 12px rgba(0, 184, 232, 0.8);
  }
}

/* Jonathan Ive-inspired surface highlights for body section */
#cursor-eve .body-section::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: 
    radial-gradient(
      ellipse at 30% 25%, 
      rgba(255, 255, 255, 0.7) 0%, 
      rgba(255, 255, 255, 0.3) 30%, 
      transparent 60%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 40%,
      rgba(255, 255, 255, 0.05) 100%
    );
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: inherit;
}

/* Surface highlights for head section */
#cursor-eve .head-section::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: 
    radial-gradient(
      ellipse at 30% 75%, 
      rgba(255, 255, 255, 0.7) 0%, 
      rgba(255, 255, 255, 0.3) 30%, 
      transparent 60%
    );
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: inherit;
}

/* Energy seams for body section */
#cursor-eve .body-section::after {
  content: "";
  position: absolute;
  inset: 4px;
  -webkit-mask-image: url("/assets/eve-egg.svg");
  -webkit-mask-size: 100% 167%;
  -webkit-mask-position: bottom;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/eve-egg.svg");
  mask-size: 100% 167%;
  mask-position: bottom;
  mask-repeat: no-repeat;
  border: 1px solid rgba(0, 184, 232, 0.2);
  opacity: 0.6;
  animation: seam-glow 4s ease-in-out infinite;
}

@keyframes seam-glow {
  0%, 100% { opacity: 0.2; border-color: rgba(0, 184, 232, 0.2); }
  50% { opacity: 0.6; border-color: rgba(0, 184, 232, 0.4); }
}

/* Film-Accurate LED Display Screen - now housed in levitating head */
#cursor-eve .display-screen {
  position: relative;
  width: 24px; /* Smaller to fit in head section */
  height: 14px; 
  background: linear-gradient(180deg, #001B4D 0%, #00172E 100%);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 
    0 0 0 1px rgba(0, 25, 77, 0.4) inset,
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(255, 255, 255, 0.02);
  overflow: hidden;
  /* 3D depth within head */
  transform: translateZ(-1px);
}

/* Face panel depression area - subtle asymmetrical hint */
#cursor-eve .display-screen::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 18px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.01);
  border-radius: 7px;
  box-shadow: 
    0 0 0 1px rgba(0, 0, 0, 0.03) inset;
  z-index: -1;
}

/* Film-accurate LED eyes with 3D depth */
#cursor-eve .eye-led {
  width: 4px; /* Smaller for head section */
  height: 4px;
  background: radial-gradient(circle at 40% 30%, #4A90E2 0%, #00B8E8 70%);
  border-radius: 50%;
  box-shadow: 
    0 0 0 0.5px rgba(74, 144, 226, 0.3),
    0 0 3px rgba(74, 144, 226, 0.8),
    0 0 6px rgba(0, 184, 232, 0.4);
  transition: all 0.25s ease;
  animation: eye-idle 3.5s ease-in-out infinite;
  position: relative;
  /* 3D glow effect */
  transform: translateZ(1px);
}

/* LED matrix grid effect with 3D depth */
#cursor-eve .eye-led::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: 
    linear-gradient(90deg, transparent 40%, rgba(74, 144, 226, 0.1) 50%, transparent 60%),
    linear-gradient(0deg, transparent 40%, rgba(74, 144, 226, 0.1) 50%, transparent 60%);
  border-radius: 50%;
  opacity: 0.6;
}

@keyframes eye-idle {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Enhanced display reflection with scan lines */
#cursor-eve .display-screen::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 5px;
  background: 
    linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, transparent 50%),
    repeating-linear-gradient(
      90deg, 
      transparent 0%, 
      rgba(0, 184, 232, 0.03) 1px, 
      transparent 2px
    );
  pointer-events: none;
}

/* Screen depth effect */
#cursor-eve .display-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset;
  pointer-events: none;
}

/* Hidden retractable arms (deployed on interaction) - positioned on body section */
#cursor-eve .arm-compartment {
  position: absolute;
  width: 14px;
  height: 3px;
  background: linear-gradient(90deg, #F5F5F5, #EAE9EB);
  border-radius: 1.5px;
  opacity: 0;
  transition: all 0.3s ease;
  /* 3D positioning */
  transform: translateZ(2px);
}

#cursor-eve .arm-left {
  left: -6px;
  top: 45%; /* Positioned on body section's widest point */
  transform: translateY(-50%) translateX(-100%) translateZ(2px);
}

#cursor-eve .arm-right {
  right: -6px;
  top: 45%; /* Positioned on body section's widest point */
  transform: translateY(-50%) translateX(100%) translateZ(2px);
}

/* 3D Scanning beam (activated on hover/interaction) */
#cursor-eve .scanning-beam {
  position: absolute;
  top: 30%; /* Emanating from head section */
  left: 50%;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, rgba(0, 184, 232, 0.9), rgba(74, 144, 226, 0.6));
  border-radius: 1px;
  transform: translate(-50%, -50%) translateZ(3px);
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(0, 184, 232, 0.6);
}

/* ===== EVE STATE ANIMATIONS ===== */

/* Active state - scanning mode */
#cursor-eve.active .shell {
  filter: brightness(1.1) saturate(120%);
  transform: scale(1.05);
  box-shadow: 
    0 0 0 2px rgba(0, 184, 232, 0.3) inset,
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 0 20px rgba(0, 184, 232, 0.4);
}

#cursor-eve.active .eye-led {
  width: 6px; /* Slightly larger when active */
  height: 6px;
  box-shadow: 
    0 0 0 0.5px rgba(74, 144, 226, 0.5),
    0 0 8px rgba(74, 144, 226, 1),
    0 0 16px rgba(0, 184, 232, 0.6);
  animation: eye-scan 0.8s ease-in-out infinite alternate;
}

@keyframes eye-scan {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.2); }
}

#cursor-eve.active .scanning-beam {
  height: 40px;
  opacity: 0.8;
  animation: beam-sweep 1.2s ease-in-out infinite;
}

@keyframes beam-sweep {
  0%, 100% { height: 40px; opacity: 0.8; }
  50% { height: 60px; opacity: 1; }
}

#cursor-eve.active .arm-compartment {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Curious state - gentle investigation mode */
#cursor-eve.curious .eve-body {
  animation: eve-curious 2.5s ease-in-out infinite;
}

@keyframes eve-curious {
  0%, 100% { transform: translateY(-2px) rotate(-1deg); }
  25% { transform: translateY(1px) rotate(0.5deg); }
  75% { transform: translateY(-1px) rotate(-0.5deg); }
}

#cursor-eve.curious .eye-led {
  animation: eye-curious 2s ease-in-out infinite;
}

@keyframes eye-curious {
  0%, 100% { transform: scale(1) translateX(0); }
  50% { transform: scale(1.1) translateX(1px); }
}

/* 3D Energy aura for special interactions */
#cursor-eve .energy-aura {
  position: absolute;
  inset: -6px;
  background: radial-gradient(
    ellipse at 50% 45%, 
    rgba(0, 184, 232, 0.1) 0%, 
    rgba(0, 184, 232, 0.05) 50%, 
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: aura-pulse-3d 3s ease-in-out infinite;
  /* 3D volumetric effect */
  transform: translateZ(-2px);
  border-radius: 50%;
}

@keyframes aura-pulse-3d {
  0%, 100% { 
    transform: translateZ(-2px) scale(0.9) rotateX(0deg); 
    opacity: 0; 
  }
  50% { 
    transform: translateZ(1px) scale(1.1) rotateX(5deg); 
    opacity: 0.6; 
  }
}

#cursor-eve.active .energy-aura {
  opacity: 1;
}

/* Deployment animation for arms */
#cursor-eve.deploy .arm-compartment {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

#cursor-eve.deploy .arm-right::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #00B8E8, #4A90E2);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 184, 232, 0.8);
  animation: plasma-charge 0.6s ease-in-out infinite alternate;
}

@keyframes plasma-charge {
  0% { opacity: 0.6; transform: translateY(-50%) scale(0.8); }
  100% { opacity: 1; transform: translateY(-50%) scale(1.2); }
}

/* ===== EVE MODE VARIANTS (replacing data-mode attributes) ===== */

/* Problem-solving mode (error state) */
#cursor-eve[data-mode=problem] .shell {
  background: linear-gradient(140deg, #FFE5E5 0%, #FFD5D5 40%, #FFEEEE 100%);
  box-shadow: 
    0 0 0 1px rgba(255, 107, 107, 0.2) inset,
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 8px 24px -8px rgba(255, 107, 107, 0.3);
}

#cursor-eve[data-mode=problem] .eye-led {
  background: radial-gradient(circle at 40% 30%, #FF6B6B 0%, #FF8E8E 70%);
  box-shadow: 
    0 0 6px rgba(255, 107, 107, 0.8),
    0 0 12px rgba(255, 107, 107, 0.4);
}

#cursor-eve[data-mode=problem] .energy-ring {
  border-color: rgba(255, 107, 107, 0.4);
}

/* Solution mode (success state) */
#cursor-eve[data-mode=solution] .shell {
  background: linear-gradient(140deg, #E8F5E8 0%, #D5F5D5 40%, #F0F8F0 100%);
  box-shadow: 
    0 0 0 1px rgba(91, 227, 125, 0.3) inset,
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 8px 24px -8px rgba(91, 227, 125, 0.4);
}

#cursor-eve[data-mode=solution] .eye-led {
  background: radial-gradient(circle at 40% 30%, #5BE37D 0%, #7CF8C8 70%);
  box-shadow: 
    0 0 8px rgba(91, 227, 125, 0.9),
    0 0 16px rgba(124, 248, 200, 0.5);
}

/* Impact mode (powered up) */
#cursor-eve[data-mode=impact] .shell {
  background: linear-gradient(140deg, #E8F4FF 0%, #D5EEFF 40%, #F0F8FF 100%);
  animation: impact-energy 3.4s ease-in-out infinite;
}

@keyframes impact-energy {
  0%, 100% { 
    box-shadow: 
      0 0 0 1px rgba(0, 184, 232, 0.2) inset,
      0 2px 8px rgba(0, 0, 0, 0.1),
      0 8px 24px -8px rgba(0, 184, 232, 0.3);
  }
  50% { 
    box-shadow: 
      0 0 0 2px rgba(0, 184, 232, 0.4) inset,
      0 4px 12px rgba(0, 0, 0, 0.15),
      0 12px 32px -8px rgba(138, 164, 255, 0.6);
  }
}

#cursor-eve[data-mode=impact] .eye-led {
  background: conic-gradient(from 0deg, #00B8E8, #8AA4FF, #00B8E8);
  animation: impact-eyes 4s linear infinite;
}

@keyframes impact-eyes {
  to { transform: rotate(360deg); }
}

/* Phase transition mode */
#cursor-eve[data-mode=phase] .shell {
  background: linear-gradient(140deg, #F0F0FF 0%, #E8E8FF 40%, #F8F8FF 100%);
}

#cursor-eve[data-mode=phase] .eye-led {
  transform: scaleX(0.8);
  background: radial-gradient(circle at 40% 30%, #8AA4FF 0%, #5D72FF 70%);
}

/* Hero mode (narrative moments) */
#cursor-eve[data-mode=hero] .shell {
  background: linear-gradient(140deg, #FFFFFF 0%, #EAE9EB 40%, #F5F5F5 100%);
  filter: brightness(1.1) saturate(110%);
}

#cursor-eve[data-mode=hero] .eye-led {
  background: radial-gradient(circle at 40% 30%, #4A90E2 0%, #00B8E8 70%);
  box-shadow: 
    0 0 8px rgba(74, 144, 226, 1),
    0 0 16px rgba(0, 184, 232, 0.6);
}

/* Transitioning between modes */
#cursor-eve.transitioning .shell { 
  transition: background 0.25s ease, transform 0.25s ease; 
}

/* Additional dynamic expressions */
#cursor-eve[data-mode=thrilled] .shell {
  background: linear-gradient(140deg, #FFF8E1 0%, #FFF3C4 40%, #FFFDE7 100%);
  box-shadow: 
    0 0 0 1px rgba(255, 193, 7, 0.3) inset,
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 8px 24px -8px rgba(255, 193, 7, 0.4);
}

#cursor-eve[data-mode=thrilled] .eye-led {
  width: 6px; /* Appropriate excited size */
  height: 6px;
  background: radial-gradient(circle at 40% 30%, #FFC107 0%, #FFD54F 70%);
  box-shadow: 
    0 0 8px rgba(255, 193, 7, 0.9),
    0 0 16px rgba(255, 213, 79, 0.5);
}

#cursor-eve[data-mode=bored] .shell {
  background: linear-gradient(140deg, #F5F5F5 0%, #E0E0E0 40%, #F0F0F0 100%);
  filter: grayscale(0.15) brightness(0.9);
}

#cursor-eve[data-mode=bored] .eye-led {
  width: 7px; /* Slightly wider for sleepy effect */
  height: 3px; /* Shorter height for half-closed look */
  background: radial-gradient(ellipse at 40% 30%, #607D8B 0%, #78909C 70%);
  box-shadow: 
    0 0 3px rgba(96, 125, 139, 0.6),
    0 0 6px rgba(120, 144, 156, 0.3);
}

#cursor-eve[data-mode=sleepy] .shell {
  background: linear-gradient(140deg, #EEEEEE 0%, #DDDDDD 40%, #E8E8E8 100%);
  filter: brightness(0.85);
}

#cursor-eve[data-mode=sleepy] .eye-led {
  width: 8px; /* Wider for sleepy squint */
  height: 1.5px; /* Very narrow for closed eyes */
  background: radial-gradient(ellipse at 40% 30%, #37474F 0%, #455A64 70%);
  box-shadow: 
    0 0 3px rgba(55, 71, 79, 0.5),
    0 0 6px rgba(69, 90, 100, 0.3);
}

/* Workshop Variant Transformations */
#cursor-eve.variant-transition .shell { 
  animation: eve-variant-pop 0.48s cubic-bezier(0.22, 1.4, 0.36, 1); 
}

@keyframes eve-variant-pop { 
  0% { 
    transform: scale(0.85) rotate(-6deg); 
    filter: brightness(0.8) saturate(80%); 
  } 
  60% { 
    transform: scale(1.12) rotate(3deg); 
  } 
  100% { 
    transform: scale(1); 
  } 
}

#cursor-eve.workshop-game .shell {
  background: linear-gradient(140deg, #F3E5FF 0%, #E1BEE7 40%, #F8F0FF 100%);
}

#cursor-eve.workshop-ctf .shell {
  background: linear-gradient(140deg, #E0F2F1 0%, #B2DFDB 40%, #F1F8E9 100%);
}

#cursor-eve.workshop-code .shell {
  background: linear-gradient(140deg, #E3F2FD 0%, #BBDEFB 40%, #F0F8FF 100%);
}

#cursor-eve.workshop-game .eye-led {
  background: radial-gradient(circle at 40% 30%, #B488FF 0%, #8AA4FF 70%);
  box-shadow: 
    0 0 8px rgba(180, 136, 255, 0.8),
    0 0 16px rgba(138, 164, 255, 0.4);
}

#cursor-eve.workshop-ctf .eye-led {
  background: radial-gradient(circle at 40% 30%, #00FF88 0%, #7CF8C8 70%);
  box-shadow: 
    0 0 8px rgba(0, 255, 136, 0.8),
    0 0 16px rgba(124, 248, 200, 0.4);
}

#cursor-eve.workshop-code .eye-led {
  background: radial-gradient(circle at 40% 30%, #6BE3F5 0%, #8AA4FF 70%);
  box-shadow: 
    0 0 8px rgba(107, 227, 245, 0.8),
    0 0 16px rgba(138, 164, 255, 0.4);
}

/* Underground mode modifications for EVE */
body.underground-mode #cursor-eve .shell {
  /* WALL-E purple underground theme colors */
  background: linear-gradient(140deg, var(--walle-purple-dk) 0%, var(--walle-purple-md) 40%, var(--walle-brown-minimal) 100%);
  box-shadow: 
    0 0 0 1px rgba(199, 125, 255, 0.4) inset,
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 8px 24px -8px rgba(166, 99, 204, 0.6);
}

body.underground-mode #cursor-eve .energy-ring {
  border-color: rgba(199, 125, 255, 0.8);
}

body.underground-mode #cursor-eve .eye-led {
  background: radial-gradient(circle at 40% 30%, var(--walle-purple-glow) 0%, var(--walle-purple-lt) 70%);
  box-shadow: 
    0 0 8px rgba(199, 125, 255, 0.9),
    0 0 16px rgba(166, 99, 204, 0.6),
    0 0 24px rgba(139, 79, 179, 0.4);
}

/* Animated headlight for underground mode */
body.underground-mode #cursor-eve::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(199, 125, 255, 0.8) 35%, 
    rgba(166, 99, 204, 0.6) 70%, 
    transparent 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 16px rgba(255, 255, 255, 0.9),
    0 0 32px rgba(199, 125, 255, 0.7),
    0 0 48px rgba(166, 99, 204, 0.5);
  animation: underground-headlight 3s ease-in-out infinite;
  z-index: 10;
}

@keyframes underground-headlight {
  0%, 100% {
    opacity: 0.85;
    transform: translateX(-50%) scale(1);
    box-shadow: 
      0 0 16px rgba(255, 255, 255, 0.9),
      0 0 32px rgba(199, 125, 255, 0.7),
      0 0 48px rgba(166, 99, 204, 0.5);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.3);
    box-shadow: 
      0 0 20px rgba(255, 255, 255, 1),
      0 0 40px rgba(199, 125, 255, 0.9),
      0 0 60px rgba(166, 99, 204, 0.7);
  }
}

/* EVE enter/exit underground transitions */
#cursor-eve.enter-underground .shell { 
  animation: eve-enter-underground 0.7s cubic-bezier(0.22, 1.25, 0.36, 1); 
}

@keyframes eve-enter-underground { 
  0% { 
    transform: translateY(-10px) scale(0.9); 
    filter: brightness(0.9); 
  } 
  60% { 
    transform: translateY(4px) scale(1.08); 
  } 
  100% { 
    transform: none; 
  } 
}

#cursor-eve.exit-underground .shell { 
  animation: eve-exit-underground 0.7s cubic-bezier(0.22, 1.25, 0.36, 1); 
}

@keyframes eve-exit-underground { 
  0% { 
    transform: translateY(10px) scale(1.05); 
  } 
  100% { 
    transform: none; 
  } 
}

/* Wave animation equivalent */
#cursor-eve.wave .eve-body { 
  animation: eve-wave 0.6s ease; 
}

@keyframes eve-wave { 
  0% { transform: rotate(0deg); } 
  30% { transform: rotate(-8deg); } 
  60% { transform: rotate(6deg); } 
  100% { transform: rotate(0deg); } 
}

/* Mobile compact helper mode */
#cursor-eve.mobile { 
  transition: transform 0.5s ease; 
}

#cursor-eve.mobile .shell { 
  border-radius: 50%; 
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  #cursor-eve .eve-body,
  #cursor-eve .energy-ring,
  #cursor-eve .eye-led,
  #cursor-eve .energy-aura,
  #cursor-eve .scanning-beam {
    animation: none !important;
  }
  
  #cursor-eve .eve-body {
    transform: translateY(0) rotate(0deg);
  }
}

/* Legacy transition animations preserved for compatibility */
body.pre-init #cursor-eve { opacity: 0; }
body.loader-transition #cursor-eve { 
  animation: eve-arrival 1.15s cubic-bezier(0.22, 1.2, 0.36, 1) forwards; 
}

@keyframes eve-arrival {
  0% { 
    opacity: 0; 
    transform: translate(50%, 50%) scale(0.3) rotate(-12deg); 
  }
  60% { 
    opacity: 1; 
    transform: translate(0, 0) scale(1.08) rotate(2deg); 
  }
  100% { 
    opacity: 1; 
    transform: translate(0, 0) scale(1) rotate(0deg); 
  }
}
/* Legacy cursor styles removed - EVE implementation is complete */

/* Enhanced cursor light for underground mode */
body.underground-mode #cursor-eve::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:160px; height:160px; border-radius:50%; pointer-events:none; opacity:0.7; 
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 0.5) 0%, 
    rgba(199, 125, 255, 0.4) 15%,
    rgba(166, 99, 204, 0.3) 35%, 
    rgba(139, 79, 179, 0.2) 55%,
    rgba(106, 76, 147, 0.1) 75%,
    transparent 100%);
  /* Enhanced purple underground light radius */
  box-shadow: 
    0 0 80px rgba(255, 255, 255, 0.4), 
    0 0 160px rgba(199, 125, 255, 0.3),
    0 0 240px rgba(166, 99, 204, 0.2);
  animation: underground-light-pulse 4s ease-in-out infinite;
}

@keyframes underground-light-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      0 0 80px rgba(255, 255, 255, 0.4), 
      0 0 160px rgba(199, 125, 255, 0.3),
      0 0 240px rgba(166, 99, 204, 0.2);
  }
  50% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 
      0 0 100px rgba(255, 255, 255, 0.5), 
      0 0 200px rgba(199, 125, 255, 0.4),
      0 0 300px rgba(166, 99, 204, 0.3);
  }
}

/* Close button synergy */
button#closePanel:hover, button#closePanel:focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 12px -2px rgba(0,184,232,.6); }

/* ========= Disable Overview Outer Glow ========= */
/* Remove radial sheen & hover halo specifically inside liquid-enabled overview panel */
.liquid-enabled .card::before { display:none !important; }
.liquid-enabled .card, .liquid-enabled .card:hover { box-shadow:none !important; }
.liquid-enabled .card:hover { background: rgba(255,255,255,0.16); }

/* Enhanced EVE modes for registration excitement */
#cursor-eve[data-mode="registration"] {
  filter: drop-shadow(0 0 15px rgba(0,184,232,0.8));
  animation: registrationExcitement 2s ease-in-out infinite;
}

@keyframes registrationExcitement {
  0%, 100% { transform: scale(1.05); }
  50% { transform: scale(1.1) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  #cursor-eve[data-mode="registration"] {
    animation: none !important;
  }
}