/* MAZE EFFECTS - THE VOID */
/* Performance optimizations applied throughout */

/* Hide the age gate on void pages - void has its own entry page */
.age-gate {
  display: none !important;
}

/* Also ensure main content is visible without JS verification */
.main-content {
  display: block !important;
}

:root {
  --void-black: #050505;
  --blood-red: #8b0000;
  --sickly-green: #39ff14;
  --flesh-pink: #8b4557;
  --bone-white: #e8e8e8;
  --decay-yellow: #9a8c00;
  /* Higher contrast alternatives for accessibility */
  --text-dim: #888888; /* Improved from #666 for WCAG AA */
  --focus-color: #39ff14;
}

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

body {
  background: var(--void-black);
  color: var(--bone-white);
  font-family: 'VT323', 'Courier New', monospace;
  min-height: 100vh;
  overflow-x: hidden;
  cursor: default;
}

/* Loading vignette effect */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
  z-index: 1000;
}

/* Scanline overlay */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.1) 0px,
    rgba(0,0,0,0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 999;
}

/* Main container */
.maze-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  z-index: 1;
}

/* ========== TEXT EFFECTS ========== */

/* Glitch text */
.glitch {
  position: relative;
  animation: glitchText 3s infinite;
  will-change: transform;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  color: var(--blood-red);
  animation: glitchBefore 2s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.glitch::after {
  color: var(--sickly-green);
  animation: glitchAfter 2s infinite;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes glitchText {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

@keyframes glitchBefore {
  0%, 100% { transform: translate(0); opacity: 0.8; }
  20% { transform: translate(-3px, 0); }
  40% { transform: translate(3px, 0); }
  60% { transform: translate(-1px, 0); }
  80% { transform: translate(1px, 0); }
}

@keyframes glitchAfter {
  0%, 100% { transform: translate(0); opacity: 0.8; }
  20% { transform: translate(3px, 0); }
  40% { transform: translate(-3px, 0); }
  60% { transform: translate(1px, 0); }
  80% { transform: translate(-1px, 0); }
}

/* Typewriter text */
.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--blood-red);
  white-space: nowrap;
  animation: typing 3s steps(40) forwards, blink 0.7s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* Scramble text (controlled by JS) */
.scramble {
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
}

/* Zalgo-style text */
.corrupted {
  text-shadow:
    0 0 2px var(--blood-red),
    0 0 4px var(--blood-red),
    2px 2px 0 rgba(139,0,0,0.5),
    -2px -2px 0 rgba(57,255,20,0.3);
  animation: corrupt 0.5s infinite;
}

@keyframes corrupt {
  0%, 100% { filter: blur(0); }
  50% { filter: blur(0.5px); }
}

/* Fade in text */
.fade-in {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

.fade-in.delay-1 { animation-delay: 1s; }
.fade-in.delay-2 { animation-delay: 2s; }
.fade-in.delay-3 { animation-delay: 3s; }
.fade-in.delay-4 { animation-delay: 4s; }

@keyframes fadeIn {
  to { opacity: 1; }
}

/* Pulsing text */
.pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ========== VISUAL DISTORTION ========== */

/* Screen shake */
.shake {
  animation: shake 0.5s ease-in-out;
  will-change: transform;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Heavy shake */
.shake-heavy {
  animation: shakeHeavy 0.3s ease-in-out;
  will-change: transform;
}

@keyframes shakeHeavy {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-10px, 5px); }
  50% { transform: translate(10px, -5px); }
  75% { transform: translate(-5px, 10px); }
}

/* Color inversion flash */
.invert-flash {
  animation: invertFlash 0.1s ease-out;
  will-change: filter;
}

@keyframes invertFlash {
  0%, 100% { filter: invert(0); }
  50% { filter: invert(1); }
}

/* Static noise overlay */
.static-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.1"/></svg>');
  pointer-events: none;
  z-index: 998;
  opacity: 0;
  animation: staticPulse 5s infinite;
}

@keyframes staticPulse {
  0%, 90%, 100% { opacity: 0; }
  92%, 98% { opacity: 0.3; }
}

/* Screen crack overlay */
.cracked {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.1) 49%, transparent 51%),
              linear-gradient(-45deg, transparent 48%, rgba(255,255,255,0.05) 49%, transparent 51%);
  pointer-events: none;
  z-index: 1001;
  opacity: 0;
}

.cracked.show {
  opacity: 1;
  animation: crackIn 0.1s ease-out;
}

@keyframes crackIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Chromatic aberration */
.chromatic {
  animation: chromatic 0.2s ease-out;
}

@keyframes chromatic {
  0%, 100% {
    text-shadow: none;
  }
  50% {
    text-shadow:
      -3px 0 0 rgba(255,0,0,0.7),
      3px 0 0 rgba(0,255,255,0.7);
  }
}

/* ========== CURSOR EFFECTS ========== */

/* Cursor types via body class */
.cursor-default { cursor: default; }
.cursor-eye { cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100"><text y=".9em" font-size="80">👁️</text></svg>') 16 16, auto; }
.cursor-hand { cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100"><text y=".9em" font-size="80">🖐️</text></svg>') 16 16, auto; }
.cursor-skull { cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100"><text y=".9em" font-size="80">💀</text></svg>') 16 16, auto; }
.cursor-cross { cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100"><text y=".9em" font-size="80">✝️</text></svg>') 16 16, crosshair; }
.cursor-none { cursor: none; }

/* Cursor trail container - optimized for high DOM activity */
.maze-cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9997;
  overflow: hidden;
  contain: strict;
}

/* Individual trail particles */
.cursor-trail-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.8;
  transform: translate(-50%, -50%);
  animation: cursorTrailFade 0.8s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes cursorTrailFade {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
}

/* Trail color variations */
.cursor-trail-particle.trail-blood {
  background: radial-gradient(circle, #8b0000 0%, #4a0000 100%);
  box-shadow: 0 0 6px #8b0000;
}

.cursor-trail-particle.trail-green {
  background: radial-gradient(circle, #39ff14 0%, #1a8a0a 100%);
  box-shadow: 0 0 6px #39ff14;
}

.cursor-trail-particle.trail-white {
  background: radial-gradient(circle, #ffffff 0%, #888888 100%);
  box-shadow: 0 0 6px #ffffff;
}

.cursor-trail-particle.trail-purple {
  background: radial-gradient(circle, #8b008b 0%, #4a004a 100%);
  box-shadow: 0 0 6px #8b008b;
}

.cursor-trail-particle.trail-yellow {
  background: radial-gradient(circle, #9a8c00 0%, #4a4200 100%);
  box-shadow: 0 0 6px #9a8c00;
}

.cursor-trail-particle.trail-flesh {
  background: radial-gradient(circle, #8b4557 0%, #4a2230 100%);
  box-shadow: 0 0 6px #8b4557;
}

/* Reduced motion - disable trail animations */
@media (prefers-reduced-motion: reduce) {
  .cursor-trail-particle {
    animation: none !important;
    display: none;
  }
}

/* ========== LINKS & NAVIGATION ========== */

.maze-link {
  color: var(--bone-white);
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.maze-link:hover {
  color: var(--blood-red);
  border-color: var(--blood-red);
  text-shadow: 0 0 10px var(--blood-red);
}

.maze-link.hidden {
  color: var(--void-black);
  font-size: 0.5rem;
}

.maze-link.hidden:hover {
  color: var(--blood-red);
  font-size: 1rem;
}

/* Invisible link - only visible on hover */
.maze-link.invisible {
  color: transparent;
  border: 1px solid transparent;
}

.maze-link.invisible:hover {
  color: var(--sickly-green);
  border-color: var(--sickly-green);
}

/* ========== JUMP SCARE ========== */

.jumpscare-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--void-black);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.jumpscare-container.active {
  display: flex;
  animation: jumpscareIn 0.1s ease-out;
  will-change: transform, opacity;
}

.jumpscare-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@keyframes jumpscareIn {
  from { transform: scale(1.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ========== MISC ELEMENTS ========== */

/* Creepy image */
.creepy-image {
  filter: grayscale(30%) contrast(1.2);
  transition: all 0.3s ease;
}

.creepy-image:hover {
  filter: grayscale(0%) contrast(1.4) brightness(1.1);
  transform: scale(1.02);
}

/* Eyes that follow cursor (controlled by JS) */
.watching-eye {
  font-size: 3rem;
  display: inline-block;
  transition: transform 0.1s ease;
}

/* Blood drip effect */
.blood-drip {
  position: relative;
}

.blood-drip::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 4px;
  height: 0;
  background: var(--blood-red);
  border-radius: 0 0 2px 2px;
  animation: drip 3s infinite;
}

@keyframes drip {
  0%, 100% { height: 0; opacity: 0; }
  50% { height: 20px; opacity: 1; }
  80% { height: 20px; opacity: 0; }
}

/* Breathing effect */
.breathing {
  animation: breathing 4s ease-in-out infinite;
  will-change: transform;
}

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

/* Heartbeat */
.heartbeat {
  animation: heartbeat 1s ease-in-out infinite;
  will-change: transform;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

/* Float effect */
.float {
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}

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

/* ========== PAGE TRANSITIONS ========== */

.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--void-black);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.page-transition.active {
  opacity: 1;
  pointer-events: all;
}

/* ========== MAZE TRANSITION OVERLAY ========== */

.maze-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  background: var(--void-black);
  overflow: hidden;
}

.maze-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
  will-change: opacity, transform;
}

.maze-transition-overlay .transition-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.maze-transition-overlay .blood-drips-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: hidden;
}

.maze-transition-overlay .blood-drip-element {
  position: absolute;
  top: -100px;
  width: 8px;
  background: linear-gradient(to bottom, var(--blood-red), #4a0000);
  border-radius: 0 0 4px 4px;
  height: 0;
}

/* FADE transition */
.maze-transition-overlay.transition-fade {
  transition: opacity 0.4s ease-in;
}

.maze-transition-overlay.transition-fade.active {
  animation: transitionFadeIn 0.4s ease-in forwards;
}

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

/* GLITCH transition */
.maze-transition-overlay.transition-glitch {
  background: var(--void-black);
}

.maze-transition-overlay.transition-glitch .transition-canvas {
  opacity: 1;
}

.maze-transition-overlay.transition-glitch.active {
  animation: transitionGlitchIn 0.4s steps(4) forwards;
}

@keyframes transitionGlitchIn {
  0% { 
    opacity: 0;
    transform: translateX(0);
  }
  25% { 
    opacity: 0.5;
    transform: translateX(-10px);
  }
  50% { 
    opacity: 0.7;
    transform: translateX(10px);
  }
  75% { 
    opacity: 0.9;
    transform: translateX(-5px);
  }
  100% { 
    opacity: 1;
    transform: translateX(0);
  }
}

/* STATIC transition */
.maze-transition-overlay.transition-static {
  background: #111;
}

.maze-transition-overlay.transition-static .transition-canvas {
  opacity: 1;
  mix-blend-mode: screen;
}

.maze-transition-overlay.transition-static.active {
  animation: transitionStaticIn 0.4s linear forwards;
}

@keyframes transitionStaticIn {
  0% { opacity: 0; }
  10% { opacity: 0.3; }
  20% { opacity: 0.1; }
  30% { opacity: 0.5; }
  40% { opacity: 0.3; }
  50% { opacity: 0.7; }
  60% { opacity: 0.5; }
  70% { opacity: 0.8; }
  80% { opacity: 0.6; }
  90% { opacity: 0.9; }
  100% { opacity: 1; }
}

/* BLOOD-DRIP transition */
.maze-transition-overlay.transition-blood-drip {
  background: transparent;
}

.maze-transition-overlay.transition-blood-drip.active {
  background: var(--void-black);
  animation: transitionBloodBgIn 0.5s ease-out forwards;
}

.maze-transition-overlay.transition-blood-drip .blood-drips-container {
  opacity: 1;
}

.maze-transition-overlay.transition-blood-drip.active .blood-drip-element {
  animation: bloodDripFall 0.5s ease-in forwards;
}

@keyframes transitionBloodBgIn {
  0% { background: rgba(139, 0, 0, 0); }
  50% { background: rgba(139, 0, 0, 0.5); }
  100% { background: var(--void-black); }
}

@keyframes bloodDripFall {
  0% {
    top: -20px;
    height: 0;
  }
  30% {
    height: 80px;
  }
  100% {
    top: 100vh;
    height: 150px;
  }
}

/* Mobile optimizations for transitions */
@media (max-width: 768px) {
  .maze-transition-overlay.transition-glitch.active {
    animation-duration: 0.35s;
  }
  
  .maze-transition-overlay.transition-static.active {
    animation-duration: 0.35s;
  }
  
  .maze-transition-overlay.transition-blood-drip .blood-drip-element {
    width: 6px;
  }
  
  /* Reduce canvas resolution on mobile for performance */
  .maze-transition-overlay .transition-canvas {
    image-rendering: pixelated;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .maze-transition-overlay.active {
    animation: none !important;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  
  .maze-transition-overlay .blood-drip-element {
    animation: none !important;
  }
  
  .maze-transition-overlay .transition-canvas {
    opacity: 0 !important;
  }
}

/* ========== RESPONSIVE ========== */

/* Touch-friendly defaults */
@media (hover: none) and (pointer: coarse) {
  /* Make hover states work on tap */
  .maze-link:active,
  .maze-link:focus {
    color: var(--blood-red);
    border-color: var(--blood-red);
    text-shadow: 0 0 10px var(--blood-red);
  }

  .maze-link.invisible:active,
  .maze-link.invisible:focus {
    color: var(--sickly-green);
    border-color: var(--sickly-green);
  }

  .darkness-text:active {
    color: var(--blood-red);
  }

  .creepy-image:active {
    filter: grayscale(0%) contrast(1.4) brightness(1.1);
    transform: scale(1.02);
  }
}

@media (max-width: 768px) {
  .maze-container {
    padding: 20px 15px;
  }

  .glitch::before,
  .glitch::after {
    display: none;
  }

  /* ===== Touch-Friendly Links (44px minimum tap targets) ===== */
  .maze-link {
    padding: 14px 24px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin: 8px 4px;
  }

  .maze-link.hidden {
    font-size: 0.9rem;
    min-height: 44px;
    padding: 14px;
  }

  .maze-link.hidden:hover,
  .maze-link.hidden:active {
    font-size: 1.1rem;
  }

  /* ===== Exit Links - More Visible on Mobile ===== */
  .exit-link {
    position: fixed;
    bottom: 15px;
    right: 15px;
    left: 15px;
    text-align: center;
    padding: 16px 20px;
    min-height: 48px;
    font-size: 1rem;
    opacity: 0.7;
    background: rgba(5, 5, 5, 0.9);
    border: 1px solid rgba(139, 0, 0, 0.5);
    border-radius: 4px;
    z-index: 100;
  }

  .exit-link:hover,
  .exit-link:active {
    opacity: 1;
    border-color: var(--blood-red);
  }

  /* ===== Readable Text ===== */
  .void-entry h1 {
    font-size: 2.5rem;
  }

  .void-entry .warning {
    font-size: 1rem;
  }

  .void-message {
    padding: 20px 15px;
    font-size: 1rem;
    line-height: 1.7;
    margin: 15px 10px;
  }

  /* ===== Navigation Elements ===== */
  .next-link,
  .back-btn,
  .enter-btn {
    padding: 16px 32px;
    min-height: 48px;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ===== Scaled Effects ===== */
  .watching-eye {
    font-size: 2rem;
  }

  .eyes-wall {
    font-size: 2rem;
  }

  /* Reduce heavy animations on mobile for performance */
  .static-overlay {
    animation: none;
    opacity: 0;
  }

  /* Simplify scanlines for performance */
  body::after {
    background: repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.05) 0px,
      rgba(0,0,0,0.05) 2px,
      transparent 2px,
      transparent 4px
    );
  }

  /* ===== Touch Feedback ===== */
  .maze-link:active,
  .next-link:active,
  .back-btn:active,
  .enter-btn:active,
  .exit-link:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* ===== Room Layout Adjustments ===== */
  .room {
    padding: 30px 15px 80px 15px; /* Extra bottom padding for exit link */
  }

  /* ===== Jumpscare container ===== */
  .jumpscare-container img {
    max-width: 100vw;
    max-height: 100vh;
  }
}

/* ===== Bottom Toolbar Buttons - Mobile Responsive ===== */
/* These buttons are created by JS with inline styles - use !important to override */
@media (max-width: 768px) {
  #maze-audio-control,
  #maze-map-btn,
  #maze-journal-btn,
  #maze-share-btn,
  #maze-settings-btn,
  #maze-hints-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.2rem !important;
    bottom: 75px !important; /* Move above exit-link */
  }

  /* Recalculate positions for smaller buttons and spacing */
  #maze-audio-control { right: 10px !important; }
  #maze-map-btn { right: 56px !important; }
  #maze-journal-btn { right: 102px !important; }
  #maze-hints-btn { right: 148px !important; }
  #maze-share-btn { right: 194px !important; }
  #maze-settings-btn { right: 240px !important; }
}

/* Small phones - even smaller buttons */
@media (max-width: 380px) {
  #maze-audio-control,
  #maze-map-btn,
  #maze-journal-btn,
  #maze-share-btn,
  #maze-settings-btn,
  #maze-hints-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }

  /* Tighter spacing for very small screens */
  #maze-audio-control { right: 8px !important; }
  #maze-map-btn { right: 48px !important; }
  #maze-journal-btn { right: 88px !important; }
  #maze-hints-btn { right: 128px !important; }
  #maze-share-btn { right: 168px !important; }
  #maze-settings-btn { right: 208px !important; }

  .void-entry h1 {
    font-size: 2rem;
  }

  .maze-link {
    font-size: 1rem;
    padding: 12px 20px;
  }

  .void-message {
    font-size: 0.95rem;
    padding: 15px 12px;
  }

  .exit-link {
    font-size: 0.95rem;
    padding: 14px 16px;
  }
}

/* ========== MOBILE NAVIGATION HINTS ========== */

/* Touch hint for mobile users */
.touch-hint {
  display: none;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
  padding: 10px;
  opacity: 0.6;
}

@media (hover: none) and (pointer: coarse) {
  .touch-hint {
    display: block;
    animation: fadeIn 1s forwards 2s;
    opacity: 0;
  }
}

/* Invisible links get tap indicator on mobile */
@media (hover: none) and (pointer: coarse) {
  .maze-link.invisible::after {
    content: '(tap to reveal)';
    display: block;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    margin-top: 4px;
  }
}

/* ========== SPECIAL PAGES ========== */

/* Entry page */
.void-entry {
  text-align: center;
}

.void-entry h1 {
  font-size: 4rem;
  color: var(--blood-red);
  font-family: 'Creepster', cursive;
  margin-bottom: 20px;
}

.void-entry .warning {
  color: var(--decay-yellow);
  font-size: 1.2rem;
  margin-bottom: 40px;
}

/* Message boxes */
.void-message {
  max-width: 600px;
  padding: 30px;
  border: 1px solid var(--blood-red);
  background: rgba(139, 0, 0, 0.1);
  margin: 20px auto;
  font-size: 1.2rem;
  line-height: 1.8;
}

/* Exit link */
.exit-link {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: var(--text-dim);
  font-size: 0.8rem;
  opacity: 0.3;
  text-decoration: none;
  z-index: 100;
}

.exit-link:hover,
.exit-link:focus {
  color: var(--bone-white);
  opacity: 1;
}

/* ========== ACCESSIBILITY ========== */

/* Focus indicators for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible:not([tabindex="-1"]) {
  outline: 3px solid var(--sickly-green);
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
}

/* Navigation link focus */
.maze-link:focus-visible {
  color: var(--sickly-green);
  border-color: var(--sickly-green);
  text-shadow: 0 0 10px var(--sickly-green);
}

/* Button focus styles */
.enter-btn:focus-visible,
.submit-btn:focus-visible,
.choice:focus-visible {
  outline: 3px solid var(--sickly-green);
  outline-offset: 2px;
  box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
}

/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--void-black);
  color: var(--sickly-green);
  padding: 12px 24px;
  border: 2px solid var(--sickly-green);
  text-decoration: none;
  font-family: 'VT323', monospace;
  font-size: 1rem;
  z-index: 10001;
  transition: top 0.3s ease;
}

.skip-to-content:focus {
  top: 10px;
  outline: none;
}

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ensure minimum contrast for text */
.text-dim {
  color: #888888; /* WCAG AA compliant against #050505 */
}

/* Keyboard navigation visual cue */
.keyboard-focused {
  position: relative;
}

.keyboard-focused::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px dashed var(--sickly-green);
  border-radius: 4px;
  pointer-events: none;
}

/* ========== LOADING SPLASH SCREEN ========== */

.void-loading-splash {
  --splash-primary: #8b0000;
  --splash-secondary: #4a0000;
  --splash-accent: #ff0000;
  --splash-glow: rgba(139, 0, 0, 0.8);
  
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  background: var(--void-black);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

.void-loading-splash.active {
  opacity: 1;
  pointer-events: all;
}

/* Splash content container */
.void-loading-splash .splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  z-index: 2;
  text-align: center;
  padding: 20px;
}

/* THE VOID logo with glitch effect */
.void-loading-splash .splash-logo {
  font-family: 'Creepster', cursive;
  font-size: clamp(2.5rem, 8vw, 4rem);
  color: var(--splash-primary);
  text-shadow: 
    0 0 20px var(--splash-glow),
    0 0 40px var(--splash-glow),
    0 0 60px var(--splash-glow);
  position: relative;
  animation: splashLogoGlitch 0.8s infinite;
  letter-spacing: 8px;
}

.void-loading-splash .splash-logo::before,
.void-loading-splash .splash-logo::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.void-loading-splash .splash-logo::before {
  color: var(--splash-accent);
  animation: splashGlitchBefore 0.6s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  opacity: 0.8;
}

.void-loading-splash .splash-logo::after {
  color: var(--sickly-green);
  animation: splashGlitchAfter 0.6s infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  opacity: 0.6;
}

@keyframes splashLogoGlitch {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-2px, 1px); }
  20% { transform: translate(2px, -1px); }
  30% { transform: translate(-1px, 2px); }
  40% { transform: translate(1px, -2px); }
  50% { transform: translate(-2px, -1px); }
  60% { transform: translate(2px, 1px); }
  70% { transform: translate(1px, 2px); }
  80% { transform: translate(-1px, -1px); }
  90% { transform: translate(2px, 2px); }
}

@keyframes splashGlitchBefore {
  0%, 100% { transform: translate(0); }
  33% { transform: translate(-4px, 0); }
  66% { transform: translate(4px, 0); }
}

@keyframes splashGlitchAfter {
  0%, 100% { transform: translate(0); }
  33% { transform: translate(4px, 0); }
  66% { transform: translate(-4px, 0); }
}

/* Loading indicator - pulsing icon */
.void-loading-splash .splash-indicator {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.void-loading-splash .splash-icon {
  font-size: 2.5rem;
  animation: splashIconPulse 1s ease-in-out infinite;
  filter: drop-shadow(0 0 15px var(--splash-glow));
}

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

/* Blood drip loading bar underneath icon */
.void-loading-splash .splash-indicator::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--splash-primary) 20%, 
    var(--splash-accent) 50%,
    var(--splash-primary) 80%,
    transparent 100%
  );
  border-radius: 2px;
  animation: splashLoadingBar 0.8s ease-in-out infinite;
}

@keyframes splashLoadingBar {
  0%, 100% { 
    opacity: 0.5;
    transform: translateX(-50%) scaleX(0.7);
  }
  50% { 
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
}

/* Creepy loading message */
.void-loading-splash .splash-message {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: clamp(1rem, 3vw, 1.2rem);
  color: var(--bone-white);
  opacity: 0.8;
  text-shadow: 0 0 10px var(--splash-glow);
  animation: splashMessageFlicker 2s infinite;
  max-width: 300px;
  line-height: 1.4;
}

@keyframes splashMessageFlicker {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.5; }
  52% { opacity: 0.9; }
  54% { opacity: 0.6; }
}

/* Scanlines overlay */
.void-loading-splash .splash-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
  z-index: 3;
  animation: splashScanlineMove 0.1s linear infinite;
}

@keyframes splashScanlineMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

/* Vignette effect */
.void-loading-splash .splash-vignette {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ===== SPLASH VARIANTS BY ROOM TYPE ===== */

/* Horror variant - extra pulsing, red glow */
.void-loading-splash.splash-horror .splash-indicator::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--splash-glow) 0%, transparent 70%);
  animation: splashHorrorGlow 1.5s ease-in-out infinite;
  z-index: -1;
}

@keyframes splashHorrorGlow {
  0%, 100% { transform: scale(0.8); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

/* Liminal variant - slower, dreamier */
.void-loading-splash.splash-liminal .splash-logo {
  animation: splashLiminalFloat 3s ease-in-out infinite;
}

.void-loading-splash.splash-liminal .splash-icon {
  animation: splashLiminalPulse 2s ease-in-out infinite;
}

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

@keyframes splashLiminalPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 0.9; }
}

/* Puzzle variant - geometric, calculating feel */
.void-loading-splash.splash-puzzle .splash-indicator::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid var(--splash-primary);
  animation: splashPuzzleRotate 3s linear infinite;
  opacity: 0.5;
}

.void-loading-splash.splash-puzzle .splash-indicator::after {
  animation: splashPuzzleBar 0.6s steps(8) infinite;
}

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

@keyframes splashPuzzleBar {
  0%, 100% { width: 20px; }
  50% { width: 60px; }
}

/* Corruption variant - glitchy, unstable */
.void-loading-splash.splash-corruption .splash-logo {
  animation: splashCorruptionGlitch 0.3s infinite;
}

.void-loading-splash.splash-corruption .splash-message {
  animation: splashCorruptionText 0.5s infinite;
}

.void-loading-splash.splash-corruption .splash-content {
  animation: splashCorruptionShift 0.2s infinite;
}

@keyframes splashCorruptionGlitch {
  0%, 100% { 
    transform: translate(0);
    filter: hue-rotate(0deg);
  }
  25% { 
    transform: translate(-5px, 2px);
    filter: hue-rotate(90deg);
  }
  50% { 
    transform: translate(5px, -2px);
    filter: hue-rotate(180deg);
  }
  75% { 
    transform: translate(-3px, -3px);
    filter: hue-rotate(270deg);
  }
}

@keyframes splashCorruptionText {
  0%, 100% { opacity: 0.8; transform: translateX(0); }
  25% { opacity: 0.4; transform: translateX(-3px); }
  50% { opacity: 1; transform: translateX(3px); }
  75% { opacity: 0.6; transform: translateX(-1px); }
}

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

/* Static noise for corruption variant */
.void-loading-splash.splash-corruption::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.15"/></svg>');
  pointer-events: none;
  z-index: 0;
  animation: splashStaticFlicker 0.1s steps(5) infinite;
  mix-blend-mode: overlay;
}

@keyframes splashStaticFlicker {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.2; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .void-loading-splash .splash-logo,
  .void-loading-splash .splash-logo::before,
  .void-loading-splash .splash-logo::after,
  .void-loading-splash .splash-icon,
  .void-loading-splash .splash-indicator::after,
  .void-loading-splash .splash-message,
  .void-loading-splash .splash-scanlines,
  .void-loading-splash.splash-horror .splash-indicator::before,
  .void-loading-splash.splash-liminal .splash-logo,
  .void-loading-splash.splash-liminal .splash-icon,
  .void-loading-splash.splash-puzzle .splash-indicator::before,
  .void-loading-splash.splash-puzzle .splash-indicator::after,
  .void-loading-splash.splash-corruption .splash-logo,
  .void-loading-splash.splash-corruption .splash-message,
  .void-loading-splash.splash-corruption .splash-content,
  .void-loading-splash.splash-corruption::before {
    animation: none !important;
  }
  
  .void-loading-splash .splash-logo::before,
  .void-loading-splash .splash-logo::after {
    display: none;
  }
  
  .void-loading-splash .splash-scanlines {
    display: none;
  }
  
  /* Simple fade for reduced motion */
  .void-loading-splash {
    transition: opacity 0.2s ease;
  }
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  .void-loading-splash .splash-logo {
    font-size: 2rem;
    letter-spacing: 4px;
  }
  
  .void-loading-splash .splash-icon {
    font-size: 2rem;
  }
  
  .void-loading-splash .splash-indicator {
    width: 60px;
    height: 60px;
  }
  
  .void-loading-splash .splash-message {
    font-size: 0.95rem;
    max-width: 250px;
  }
  
  /* Reduce animation complexity on mobile */
  .void-loading-splash .splash-scanlines {
    animation: none;
  }
  
  .void-loading-splash.splash-corruption::before {
    display: none; /* Static noise is heavy on mobile */
  }
}