/* Visually hidden class for accessibility (hides content visually but keeps it available for screen readers) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

body { 
  margin: 0; 
  font-family: Arial, sans-serif;
  background-color: #000;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  padding: 0;
}

/* Fix for mobile black gap at top */
@media (max-width: 768px) {
  body {
    min-height: 100vh;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    position: fixed;
  }
}

header {
  display: block;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

footer {
  display: block;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
    
#container { 
  position: relative; 
  width: 100%; 
  min-height: 100vh;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}
    
#customNameInput {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 100;
  padding: 10px;
  flex-wrap: wrap;
}
    
#namesInput {
  padding: 10px;
  font-size: 16px;
  width: 80%;
  max-width: 500px;
  border-radius: 20px;
  border: 2px solid #ff00cc;
  background: rgba(0,0,0,0.7);
  color: white;
  margin-bottom: 10px;
}
    
#buttons {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 1000;
  flex-wrap: wrap;
  padding: 0 10px;
}
    
@media (max-width: 768px) {
  #buttons {
    position: fixed;
    bottom: 20px;
  }
}
    
button {
  padding: 12px 24px;
  font-size: clamp(16px, 5vw, 24px);
  border-radius: 50px;
  border: none;
  cursor: pointer;
  background: linear-gradient(45deg, #ff00cc, #3333ff);
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(255, 0, 204, 0.7);
  transition: all 0.3s;
  margin-bottom: 10px;
  position: relative;
  z-index: 1000;
}
    
button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(255, 0, 204, 1);
}
    
#updateNamesBtn {
  padding: 10px 15px;
  font-size: clamp(14px, 4vw, 16px);
}
    
#winner {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0px;
  color: #fff;
  z-index: 100;
  text-shadow: 0 0 10px #ff00cc, 0 0 20px #ff00cc, 0 0 30px #ff00cc;
  transition: font-size 0.5s;
  background-color: rgba(0,0,0,0.5);
  padding: 10px;
  border-radius: 20px;
  margin: 0 auto;
  max-width: 90%;
}
    
@media (max-width: 768px) {
  #winner {
    font-size: 0;
    top: 120px;
  }
    
  #winner.active {
    font-size: clamp(32px, 10vw, 72px) !important;
  }
    
  #winner span {
    font-size: clamp(18px, 6vw, 36px) !important;
  }
    
  #customNameInput {
    flex-direction: column;
    align-items: center;
    top: 10px;
  }
    
  #namesInput {
    width: 90%;
    max-width: none;
  }
    
  #updateNamesBtn {
    width: 90%;
    max-width: none;
    margin-top: 5px;
  }
    
  button {
    width: 45%;
    min-width: 120px;
    padding: 10px 20px;
  }
}
    
.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #f00;
  z-index: 50;
}
    
#frog {
  position: absolute;
  bottom: -500px; /* Initially off-screen */
  left: 50%;
  transform: translateX(-50%);
  width: 0; /* Hidden initially */
  height: 0; /* Hidden initially */
  z-index: 90;
  transition: all 0.5s;
  max-width: 80vw;
  max-height: 50vh;
}
    
.explosion-text {
  position: absolute;
  font-family: Impact, fantasy;
  font-size: clamp(24px, 6vw, 50px);
  font-weight: bold;
  color: #ffff00;
  text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
  z-index: 97;
  transform: scale(0) rotate(0deg);
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
  animation: none; /* Start with no animation, will be applied via JS */
}
    
.chaos-message {
  position: absolute;
  font-size: clamp(16px, 6vw, 24px);
  font-weight: bold;
  color: white;
  text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
  z-index: 95;
  transform: rotate(0deg);
  opacity: 0;
  transition: opacity 0.3s, transform 0.5s, color 0.5s;
  animation: floatAround 5s infinite alternate ease-in-out, color-pulse 3s infinite alternate;
}
    
.glitch-text {
  position: absolute;
  font-family: monospace;
  font-size: clamp(24px, 8vw, 40px);
  font-weight: bold;
  color: #ff00ff;
  text-shadow: 
    -3px -3px 0 #00ffff,
    3px 3px 0 #ff0000,
    6px 0px 0 #0000ff,
    -2px 2px 0 #ffff00,
    2px -1px 0 #00ff00,
    -4px 0px 0 #ff8800;
  z-index: 96;
  transform: skew(-15deg);
  opacity: 0;
  transition: opacity 0.1s;
  animation: glitchFlicker 0.3s infinite steps(2);
}
    
.lightning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 190;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.05s;
}
    
.lightning-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 190;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.05s;
}
    
.spinner-praise {
  position: absolute;
  font-size: clamp(16px, 5vw, 32px);
  font-weight: bold;
  color: gold;
  text-shadow: 0 0 8px #ff00ff, 0 0 15px #00ffff;
  z-index: 98;
  opacity: 0;
  text-align: center;
  animation: glow-pulse 2s infinite alternate;
}
    
#canvasContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
    
@media (max-width: 768px) {
  #canvasContainer {
    height: 85vh;
  }
    
  .wheel-container-mobile {
    transform: translateY(-7vh);
  }
}
    
/* Effect UI styles */
#effectIndicator {
  position: fixed;
  top: 82vh; /* 18% from the bottom (82% from top) */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  padding: 10px 15px;
  background: rgba(0, 0, 0, 0.85);
  border: 3px solid #00ffff;
  border-radius: 10px;
  color: #00ffff;
  font-weight: bold;
  z-index: 2000;
  font-size: 16px;
  opacity: 0; /* Hidden by default */
  display: none; /* Hidden by default */
  transition: opacity 1s, box-shadow 1s, color 1s, text-shadow 1s; /* Doubled from 0.5s to 1s */
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
  text-align: center; /* Center text */
  min-width: 180px; /* Ensure reasonable width */
}
    
#rarityBadge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: linear-gradient(45deg, #ff0000, #ff00cc);
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.6s; /* Doubled from 0.3s to 0.6s */
}
    
.matrix-code {
  position: absolute;
  color: #00ff00;
  font-family: monospace;
  font-size: 14px;
  z-index: 10;
  opacity: 0.7;
  white-space: nowrap;
}
    
.emoji {
  position: absolute;
  font-size: 30px;
  z-index: 95;
  user-select: none;
}
    
#blackholeContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 95;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s;
}
    
#blackhole {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(75,0,130,0.8) 50%, rgba(0,0,0,0) 100%);
  box-shadow: 0 0 50px 10px rgba(138, 43, 226, 0.7);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 1s;
}
    
.sound-wave {
  position: absolute;
  border: 2px solid;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  opacity: 0.8;
  z-index: 92;
  pointer-events: none;
}
    
.dimensional-rift {
  position: absolute;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.8), rgba(75, 0, 130, 0.8));
  border-radius: 10px;
  transform: skew(-10deg, 5deg);
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.6);
  z-index: 93;
  opacity: 0;
  transition: all 0.5s;
  overflow: hidden;
}
    
/* New - Space energy effect inside rifts */
.dimensional-rift::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(135deg, transparent 20%, rgba(255, 255, 255, 0.1) 40%, transparent 60%),
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  opacity: 0.6;
  animation: riftShimmer 3s infinite ease-in-out alternate;
  pointer-events: none;
}
    
.rift-tear-light {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 15px #fff, 0 0 30px rgba(138, 43, 226, 0.8);
  z-index: 92;
  pointer-events: none;
}
    
.cosmic-dust {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: white;
  border-radius: 50%;
  z-index: 94;
  opacity: 0.7;
  pointer-events: none;
  will-change: transform, opacity; /* Performance hint */
}
    
#lightningContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 94;
  opacity: 0;
}
    
.lightning-bolt {
  position: absolute;
  stroke: #00ffff;
  stroke-width: 2;
  opacity: 0.8;
  filter: drop-shadow(0 0 5px #00ffff);
}
    
.wheel-duplicate {
  position: absolute;
      margin: 0; 
      font-family: Arial, sans-serif;
      background-color: #000;
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
    }
    
    #container { 
      position: relative; 
      width: 100%; 
      min-height: 100vh;
      overflow-x: hidden;
    }
    
    #customNameInput {
      position: absolute;
      top: 20px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 10px;
      z-index: 100;
      padding: 10px;
      flex-wrap: wrap;
    }
    
    #namesInput {
      padding: 10px;
      font-size: 16px;
      width: 80%;
      max-width: 500px;
      border-radius: 20px;
      border: 2px solid #ff00cc;
      background: rgba(0,0,0,0.7);
      color: white;
      margin-bottom: 10px;
    }
    
    #buttons {
      position: absolute;
      bottom: 20px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 10px;
      z-index: 1000;
      flex-wrap: wrap;
      padding: 0 10px;
    }
    
    @media (max-width: 768px) {
      #buttons {
        position: fixed;
        bottom: 20px;
      }
    }
    
    button {
      padding: 12px 24px;
      font-size: clamp(16px, 5vw, 24px);
      border-radius: 50px;
      border: none;
      cursor: pointer;
      background: linear-gradient(45deg, #ff00cc, #3333ff);
      color: white;
      font-weight: bold;
      text-transform: uppercase;
      box-shadow: 0 0 20px rgba(255, 0, 204, 0.7);
      transition: all 0.3s;
      margin-bottom: 10px;
      position: relative;
      z-index: 1000;
    }
    
    button:hover {
      transform: scale(1.05);
      box-shadow: 0 0 30px rgba(255, 0, 204, 1);
    }
    
    #updateNamesBtn {
      padding: 10px 15px;
      font-size: clamp(14px, 4vw, 16px);
    }
    
    #winner {
      position: absolute;
      top: 80px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 0px;
      color: #fff;
      z-index: 100;
      text-shadow: 0 0 10px #ff00cc, 0 0 20px #ff00cc, 0 0 30px #ff00cc;
      transition: font-size 0.5s;
      background-color: rgba(0,0,0,0.5);
      padding: 10px;
      border-radius: 20px;
      margin: 0 auto;
      max-width: 90%;
    }
    
    @media (max-width: 768px) {
      #winner {
        font-size: 0;
        top: 120px;
      }
      
      #winner.active {
        font-size: clamp(32px, 10vw, 72px) !important;
      }
      
      #winner span {
        font-size: clamp(18px, 6vw, 36px) !important;
      }
      
      #customNameInput {
        flex-direction: column;
        align-items: center;
        top: 10px;
      }
      
      #namesInput {
        width: 90%;
        max-width: none;
      }
      
      #updateNamesBtn {
        width: 90%;
        max-width: none;
        margin-top: 5px;
      }
      
      button {
        width: 45%;
        min-width: 120px;
        padding: 10px 20px;
      }
    }
    
    .confetti {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #f00;
      z-index: 50;
    }
    
    #frog {
      position: absolute;
      bottom: -500px; /* Initially off-screen */
      left: 50%;
      transform: translateX(-50%);
      width: 0; /* Hidden initially */
      height: 0; /* Hidden initially */
      z-index: 90;
      transition: all 0.5s;
      max-width: 80vw;
      max-height: 50vh;
    }
    
    .explosion-text {
      position: absolute;
      font-family: Impact, fantasy;
      font-size: clamp(24px, 6vw, 50px);
      font-weight: bold;
      color: #ffff00;
      text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
      z-index: 97;
      transform: scale(0) rotate(0deg);
      opacity: 0;
      transform-origin: center center;
      will-change: transform, opacity;
      animation: none; /* Start with no animation, will be applied via JS */
    }
    
    .chaos-message {
      position: absolute;
      font-size: clamp(16px, 6vw, 24px);
      font-weight: bold;
      color: white;
      text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
      z-index: 95;
      transform: rotate(0deg);
      opacity: 0;
      transition: opacity 0.3s, transform 0.5s, color 0.5s;
      animation: floatAround 5s infinite alternate ease-in-out, color-pulse 3s infinite alternate;
    }
    
    .glitch-text {
      position: absolute;
      font-family: monospace;
      font-size: clamp(24px, 8vw, 40px);
      font-weight: bold;
      color: #ff00ff;
      text-shadow: 
        -3px -3px 0 #00ffff,
        3px 3px 0 #ff0000,
        6px 0px 0 #0000ff,
        -2px 2px 0 #ffff00,
        2px -1px 0 #00ff00,
        -4px 0px 0 #ff8800;
      z-index: 96;
      transform: skew(-15deg);
      opacity: 0;
      transition: opacity 0.1s;
      animation: glitchFlicker 0.3s infinite steps(2);
    }
    
    .lightning {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.9);
      z-index: 190;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.05s;
    }
    
    .lightning-flash {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.9);
      z-index: 190;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.05s;
    }
    
    .spinner-praise {
      position: absolute;
      font-size: clamp(16px, 5vw, 32px);
      font-weight: bold;
      color: gold;
      text-shadow: 0 0 8px #ff00ff, 0 0 15px #00ffff;
      z-index: 98;
      opacity: 0;
      text-align: center;
      animation: glow-pulse 2s infinite alternate;
    }
    
    #canvasContainer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    
    @media (max-width: 768px) {
      #canvasContainer {
        height: 85vh;
      }
      
      .wheel-container-mobile {
        transform: translateY(-7vh);
      }
    }
    
    /* Effect UI styles */
    #effectIndicator {
      position: fixed;
      top: 12vh;
      right: 15px;
      padding: 10px 15px;
      background: rgba(0, 0, 0, 0.85);
      border: 3px solid #00ffff;
      border-radius: 10px;
      color: #00ffff;
      font-weight: bold;
      z-index: 1000;
      font-size: 16px;
      opacity: 0;
      display: none;
      transition: opacity 0.5s, box-shadow 0.5s, color 0.5s, text-shadow 0.5s;
      box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    }
    
    #rarityBadge {
      position: absolute;
      top: -10px;
      right: -10px;
      background: linear-gradient(45deg, #ff0000, #ff00cc);
      color: white;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: bold;
      opacity: 0;
      transform: scale(0);
      transition: all 0.3s;
    }
    
    .matrix-code {
      position: absolute;
      color: #00ff00;
      font-family: monospace;
      font-size: 14px;
      z-index: 10;
      opacity: 0.7;
      white-space: nowrap;
    }
    
    .emoji {
      position: absolute;
      font-size: 30px;
      z-index: 95;
      user-select: none;
    }
    
    #blackholeContainer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 95;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.5s;
    }
    
    #blackhole {
      width: 0;
      height: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(75,0,130,0.8) 50%, rgba(0,0,0,0) 100%);
      box-shadow: 0 0 50px 10px rgba(138, 43, 226, 0.7);
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 50%;
      transition: all 1s;
    }
    
    .sound-wave {
      position: absolute;
      border: 2px solid;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      opacity: 0.8;
      z-index: 92;
      pointer-events: none;
    }
    
    .dimensional-rift {
      position: absolute;
      background: linear-gradient(135deg, rgba(138, 43, 226, 0.8), rgba(75, 0, 130, 0.8));
      border-radius: 10px;
      transform: skew(-10deg, 5deg);
      box-shadow: 0 0 20px rgba(138, 43, 226, 0.6);
      z-index: 93;
      opacity: 0;
      transition: all 0.5s;
      overflow: hidden;
    }
    
    /* New - Space energy effect inside rifts */
    .dimensional-rift::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        linear-gradient(135deg, transparent 20%, rgba(255, 255, 255, 0.1) 40%, transparent 60%),
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
      opacity: 0.6;
      animation: riftShimmer 3s infinite ease-in-out alternate;
      pointer-events: none;
    }
    
    .rift-tear-light {
      position: absolute;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 0 15px #fff, 0 0 30px rgba(138, 43, 226, 0.8);
      z-index: 92;
      pointer-events: none;
    }
    
    .cosmic-dust {
      position: absolute;
      width: 2px;
      height: 2px;
      background-color: white;
      border-radius: 50%;
      z-index: 94;
      opacity: 0.7;
      pointer-events: none;
      will-change: transform, opacity; /* Performance hint */
    }
    
    #lightningContainer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 94;
      opacity: 0;
    }
    
    .lightning-bolt {
      position: absolute;
      stroke: #00ffff;
      stroke-width: 2;
      opacity: 0.8;
      filter: drop-shadow(0 0 5px #00ffff);
    }
    
    .wheel-duplicate {
      position: absolute;
      opacity: 0.5;
      filter: hue-rotate(90deg) blur(2px);
      z-index: 2;
    }
    
    .mist {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, transparent, rgba(128, 0, 128, 0.3));
      z-index: 5;
      pointer-events: none;
      opacity: 0;
      transition: opacity 1s;
      animation: mistPulse 8s infinite ease-in-out;
    }
    
    /* Rift energy beams */
    .rift-energy-beam {
      position: absolute;
      height: 1px;
      background: linear-gradient(90deg, rgba(138, 43, 226, 0.2), rgba(138, 43, 226, 0.8) 50%, rgba(138, 43, 226, 0.2));
      box-shadow: 0 0 10px rgba(138, 43, 226, 0.6);
      pointer-events: none;
      z-index: 92;
      transform-origin: 0 50%;
      will-change: opacity;
    }
    
    .beam-particle {
      position: absolute;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background-color: white;
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
      pointer-events: none;
      z-index: 93;
      will-change: transform, left, top, opacity;
    }
    
    /* Rift objects */
    .rift-object {
      position: absolute;
      pointer-events: none;
      z-index: 91;
      will-change: transform, left, top, opacity;
    }
    
    .rift-asteroid {
      box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.3),
                  inset -2px -2px 3px rgba(0, 0, 0, 0.3);
    }
    
    .rift-crystal {
      transform-origin: center center;
    }
    
    .rift-tech::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 30%;
      height: 30%;
      background-color: rgba(0, 255, 255, 0.3);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      opacity: 0.7;
    }
    
    @keyframes purpleBeamPulse {
      0% { opacity: 0.5; height: 1px; }
      50% { opacity: 0.8; }
      100% { opacity: 0.5; height: 2px; }
    }
    
    @keyframes cyanBeamPulse {
      0% { opacity: 0.6; box-shadow: 0 0 8px rgba(0, 255, 255, 0.4); }
      50% { opacity: 0.9; box-shadow: 0 0 12px rgba(0, 255, 255, 0.7); }
      100% { opacity: 0.6; box-shadow: 0 0 8px rgba(0, 255, 255, 0.4); }
    }
    
    @keyframes orangeBeamPulse {
      0% { opacity: 0.5; transform: scaleY(0.7); }
      50% { opacity: 0.8; transform: scaleY(1.2); }
      100% { opacity: 0.5; transform: scaleY(0.7); }
    }
    
    @keyframes goldBeamPulse {
      0% { opacity: 0.7; box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); }
      30% { opacity: 1.0; box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 30px rgba(255, 255, 255, 0.5); }
      60% { opacity: 0.8; box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); }
      100% { opacity: 0.7; box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); }
    }
    
    @keyframes riftShimmer {
      0% { 
        background-position: 0% 0%; 
        opacity: 0.3;
      }
      50% { 
        opacity: 0.6; 
      }
      100% { 
        background-position: 100% 100%; 
        opacity: 0.3;
      }
    }
    
    @keyframes mistPulse {
      0% { opacity: 0.3; }
      50% { opacity: 0.6; }
      100% { opacity: 0.3; }
    }
    
    #realityBreakContainer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 200;
      pointer-events: none;
      perspective: 1000px;
      perspective-origin: center;
      opacity: 0;
    }
    
    .reality-shard {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.8);
      transform-style: preserve-3d;
      backface-visibility: hidden;
      transform-origin: center;
      box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
    }
    
    .floating-rune {
      position: absolute;
      font-family: 'Arial', sans-serif;
      font-weight: bold;
      color: #ff00ff;
      text-shadow: 0 0 10px #0000ff;
      opacity: 0;
      z-index: 96;
      pointer-events: none;
    }
    
    .time-echo {
      position: absolute;
      border-radius: 50%;
      border: 2px solid rgba(0, 255, 255, 0.5);
      box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
      z-index: 91;
      pointer-events: none;
    }

    .effect-time-echo {
      position: absolute;
      border-radius: 50%;
      border: 3px solid rgba(100, 150, 255, 0.7); 
      box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
      z-index: 91;
      pointer-events: none;
      background-color: rgba(50, 100, 200, 0.1);
    }

/* Add animations for pulsing effects */
@keyframes pulseGold {
    0% { box-shadow: 0 0 10px gold, 0 0 20px gold; }
    50% { box-shadow: 0 0 20px gold, 0 0 40px gold; }
    100% { box-shadow: 0 0 10px gold, 0 0 20px gold; }
}

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

/* New animation for floating messages */
@keyframes floatAround {
    0% { transform: translate(0, 0) rotate(-5deg); }
    25% { transform: translate(10px, 5px) rotate(0deg); }
    50% { transform: translate(0, 10px) rotate(5deg); }
    75% { transform: translate(-10px, 5px) rotate(0deg); }
    100% { transform: translate(0, 0) rotate(-5deg); }
}

/* New animation for glitch text */
@keyframes glitchFlicker {
    0% { opacity: 1; text-shadow: -3px -3px 0 #00ffff, 3px 3px 0 #ff0000, 6px 0px 0 #0000ff; filter: none; }
    25% { opacity: 0.9; text-shadow: 2px -1px 0 #ff00ff, -1px 2px 0 #00ff00, 3px 1px 0 #ffff00; filter: hue-rotate(90deg); }
    50% { opacity: 0.8; text-shadow: -2px 1px 0 #ff8800, 1px -1px 0 #8800ff, -1px -3px 0 #00ffff; filter: hue-rotate(180deg); }
    75% { opacity: 0.9; text-shadow: 1px 2px 0 #ff0000, -2px -1px 0 #00ffff, 0px 3px 0 #ffff00; filter: hue-rotate(270deg); }
    100% { opacity: 1; text-shadow: -3px -3px 0 #00ffff, 3px 3px 0 #ff0000, 6px 0px 0 #0000ff; filter: none; }
}

/* Add animations for spinning explosions */
@keyframes spin-appear {
    0% { transform: scale(0) rotate(-360deg); }
    70% { transform: scale(1.2) rotate(20deg); }
    85% { transform: scale(0.9) rotate(-10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes color-cycle {
    0% { color: #ffff00; text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; }
    25% { color: #ff00ff; text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff; }
    50% { color: #00ffff; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; }
    75% { color: #ff8800; text-shadow: 0 0 10px #0088ff, 0 0 20px #0088ff; }
    100% { color: #88ff00; text-shadow: 0 0 10px #ff0088, 0 0 20px #ff0088; }
}

@keyframes color-pulse {
    0% { color: white; text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff; }
    33% { color: #f0f0ff; text-shadow: 0 0 10px #ff8800, 0 0 20px #00ff88; }
    66% { color: #fff0ff; text-shadow: 0 0 10px #00ffff, 0 0 20px #ffff00; }
    100% { color: #ffff00; text-shadow: 0 0 10px #ff00ff, 0 0 20px #0088ff; }
}

@keyframes glow-pulse {
    0% { text-shadow: 0 0 8px #ff00ff, 0 0 15px #00ffff; }
    50% { text-shadow: 0 0 12px #ff00ff, 0 0 20px #00ffff; }
    100% { text-shadow: 0 0 8px #ff00ff, 0 0 15px #00ffff; }
}

/* Mobile adjustments for effect indicator - Safari and general */
@media (max-width: 768px) {
  /* Ensure the effect indicator is positioned correctly on mobile */
  #effectIndicator {
    /* Position from top for mobile browsers */
    top: 75vh !important; 
    bottom: auto !important;
    position: fixed !important;
    /* Add extra visible styles to ensure it's not being hidden */
    display: block;
    z-index: 9999 !important;
  }
}

/* Chrome-specific mobile targeting - also lowered to match Safari position */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  /* Chrome-specific selector trick */
  #effectIndicator:not(*:root) {
    top: 75vh !important; /* Adjusted to match Safari position */
    transform: translateX(-50%) !important;
    left: 50% !important;
    position: fixed !important;
    z-index: 9999 !important;
  }
}