/* Cutscene Styles */
#cutscene-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; /* Highest z-index to ensure overlay */
  display: none; /* Initially hidden */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.9); /* Fallback background */
  opacity: 0; /* Start fully transparent for fade-in */
  transition: opacity 1s ease-in-out; /* Smooth fade transition */
  animation-fill-mode: forwards; /* Retain end state of animations if any were used elsewhere */
}

.cutscene {
  position: fixed; /* Ensure it covers entire screen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; /* Highest z-index */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cutscene-title {
  margin-bottom: 2rem;
  z-index: 10;
}

.cutscene-title span {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0;
  animation: slideUp 2s forwards 0.5s;
}

.cutscene-title h1 {
  font-size: 5rem;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
  opacity: 0;
  animation: expand 2s forwards 1s;
  letter-spacing: 3px;
}

.cutscene-description {
  max-width: 80%;
  display: none;  
  z-index: 10;
}

.cutscene-description p {
  margin: 1rem 0;
  font-size: 1.5rem;
  line-height: 1.5;
}

/* Cosmic Cutscene */
.cosmic-cutscene {
  background: radial-gradient(ellipse at center, #0f0f23 0%, #090918 50%, #000000 100%);
  perspective: 1000px;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: white;
  border-radius: 50%;
  animation: twinkle 5s infinite linear;
}

.star:nth-child(2n) {
  background-color: #fffacd; /* Light yellow */
}

.star:nth-child(3n) {
  background-color: #add8e6; /* Light blue */
}

.star:nth-child(5n) {
  background-color: #ffb6c1; /* Light pink */
  width: 3px;
  height: 3px;
}

.star:nth-child(7n) {
  background-color: #e6e6fa; /* Lavender */
}

.star:nth-child(11n) {
  width: 4px;
  height: 4px;
}

.nebula {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(63, 0, 255, 0.2) 0%, rgba(255, 0, 242, 0.1) 40%, transparent 70%);
  opacity: 0;
  animation: pulseNebula 10s infinite alternate, rotateNebula 30s linear infinite;
}

.cosmic-cutscene .cutscene-title h1 {
  background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 7rem;
}

.cosmic-cutscene::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%);
  animation: cosmicExplosion 30s forwards;
  z-index: 5;
}

/* Godly Cutscene */
.godly-cutscene {
  background: radial-gradient(ellipse at center, #4a0072 0%, #280036 50%, #0d0012 100%);
}

.godly-light {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.7) 0%, rgba(255, 165, 0, 0.3) 40%, transparent 70%);
  animation: pulsateLight 4s infinite alternate;
}

.godly-ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 0;
  background: linear-gradient(to top, rgba(255, 215, 0, 0), rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0));
  transform-origin: bottom center;
  animation: rayGrow 8s infinite ease-in-out alternate;
}

.godly-cutscene .cutscene-title h1 {
  color: #FFD700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  font-size: 6rem;
}

/* Mythic Cutscene */
.mythic-cutscene {
  background: linear-gradient(135deg, #4a0045 0%, #800080 100%);
}

.mythic-particle {
  position: absolute;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, #e268a8 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  animation: mythicParticle 5s infinite ease-in-out;
}

.mythic-cutscene .cutscene-title h1 {
  color: #e268a8;
  text-shadow: 0 0 15px rgba(226, 104, 168, 0.8);
  font-size: 5.5rem;
}

/* Legendary Cutscene */
.legendary-cutscene {
  background: linear-gradient(135deg, #331800 0%, #ff8000 100%);
}

.legendary-flame {
  position: absolute;
  bottom: 0;
  width: 30px;
  height: 60px;
  background: radial-gradient(ellipse at bottom, #ff8000 0%, transparent 100%);
  animation: flameRise 3s infinite ease-out;
}

.legendary-cutscene .cutscene-title h1 {
  color: #ff8000;
  text-shadow: 0 0 15px rgba(255, 128, 0, 0.8);
  font-size: 5rem;
}

/* Eight-pointed Star */
.eight-pointed-star {
  position: absolute;
  width: 200px;
  height: 200px;
  z-index: 2;
  opacity: 0;
  animation: fadeInStar 1s forwards 0.5s, rotateStar 20s linear infinite;
}

.cosmic-cutscene .eight-pointed-star {
  width: 300px;
  height: 300px;
}

.godly-cutscene .eight-pointed-star {
  width: 250px;
  height: 250px;
  filter: brightness(1.2) drop-shadow(0 0 20px gold);
}

/* Skip Button */
.skip-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  cursor: pointer;
  z-index: 100;
  transition: all 0.2s;
  width: 80px;
  height: auto;
}

.skip-button:hover {
  transform: scale(1.1);
}

/* Glitch Cutscene */
.glitch-cutscene {
  background-color: #111;
  animation: glitchBackground 0.3s infinite step-end;
  overflow: hidden;
}

.glitch-box {
  position: absolute;
  background-color: rgba(0, 255, 255, 0.2);
  animation: glitchMove 0.5s infinite alternate;
  z-index: 3;
}

.scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 50%);
  background-size: 100% 4px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.3;
}

.glitch-text {
  position: relative;
  animation: textGlitch 0.4s infinite alternate;
  text-shadow: 3px 3px 0 rgba(255, 0, 0, 0.5), -3px -3px 0 rgba(0, 255, 255, 0.5);
  z-index: 5;
}

.glitched-star {
  filter: hue-rotate(90deg) saturate(200%) contrast(150%);
  animation: glitchStar 0.3s infinite step-end, rotateStar 20s linear infinite;
}

/* Oppression Cutscene */
.oppression-cutscene {
  background: linear-gradient(135deg, #000000 0%, #1a0000 50%, #000000 100%);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.9);
}

.dark-particle {
  position: absolute;
  background-color: #000;
  border-radius: 50%;
  animation: fallingParticle 10s infinite ease-in;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.oppression-chain {
  position: absolute;
  top: 0;
  width: 10px;
  height: 100vh;
  background: repeating-linear-gradient(0deg, transparent, transparent 15px, #333 15px, #333 30px);
  opacity: 0.6;
  animation: chainRattle 3s infinite ease-in-out;
}

.oppression-text {
  color: #999;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  filter: contrast(0.8) brightness(0.8);
  animation: oppressionPulse 4s infinite alternate;
}

/* Shaking "you will suffer" text for S U F F E R cutscene */
.suffer-text {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ff6666;
  text-transform: lowercase;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 0 24px rgba(255,50,50,0.18);
  animation: sufferShake 0.45s infinite, sufferPulse 3s infinite alternate;
  pointer-events: none;
}

/* Subtle pulse to the text */
@keyframes sufferPulse {
  from { transform: translate(-50%, -50%) scale(1); opacity: 0.95; }
  to { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

/* Fast irregular shake for unsettling effect */
@keyframes sufferShake {
  0% { transform: translate(calc(-50% - 2px), calc(-50% - 1px)) rotate(-0.6deg) scale(1); }
  10% { transform: translate(calc(-50% + 3px), calc(-50% + 1px)) rotate(0.8deg) scale(1.01); }
  20% { transform: translate(calc(-50% - 4px), calc(-50% - 2px)) rotate(-1.2deg) scale(0.99); }
  30% { transform: translate(calc(-50% + 2px), calc(-50% + 2px)) rotate(0.6deg) scale(1.02); }
  40% { transform: translate(calc(-50% - 3px), calc(-50% - 1px)) rotate(-0.8deg) scale(0.995); }
  50% { transform: translate(calc(-50% + 1px), calc(-50% - 3px)) rotate(0.4deg) scale(1.01); }
  60% { transform: translate(calc(-50% - 2px), calc(-50% + 2px)) rotate(-0.5deg) scale(1); }
  70% { transform: translate(calc(-50% + 3px), calc(-50% - 2px)) rotate(0.9deg) scale(1.02); }
  80% { transform: translate(calc(-50% - 1px), calc(-50% + 1px)) rotate(-0.3deg) scale(0.998); }
  90% { transform: translate(calc(-50% + 2px), calc(-50% - 1px)) rotate(0.6deg) scale(1.01); }
  100% { transform: translate(calc(-50% - 2px), calc(-50% - 1px)) rotate(-0.6deg) scale(1); }
}

.oppressed-star {
  filter: grayscale(80%) brightness(0.7);
  opacity: 0.6;
  animation: oppressionStar 5s infinite ease-in-out, rotateStar 30s linear infinite;
}

.oppression-cutscene .cutscene-title h1 {
  color: #660000;
  text-shadow: 0 0 15px rgba(102, 0, 0, 0.8);
}

.pineapple-cutscene {
  background: #000; /* base; pineapples added as floating emoji elements */
}

.pineapple-emoji {
  position: absolute;
  font-size: 32px;
  opacity: 0.8;
  animation: floatPine 8s linear infinite;
}

.shake-star {
  animation: shakeStar 0.4s infinite linear, rotateStar 12s linear infinite;
  filter: drop-shadow(0 0 10px #ffd700);
}

@keyframes floatPine {
  from { transform: translateY(110vh) rotate(0deg); }
  to { transform: translateY(-20vh) rotate(360deg); }
}

@keyframes shakeStar {
  0% { transform: translate(-2px, 0) rotate(0deg); }
  25% { transform: translate(2px, 0) rotate(1deg); }
  50% { transform: translate(-2px, 0) rotate(0deg); }
  75% { transform: translate(2px, 0) rotate(-1deg); }
  100% { transform: translate(-2px, 0) rotate(0deg); }
}

.goofy-explosion-piece {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: 0.9;
  animation: explodeGoofy 0.8s ease-out forwards;
}

@keyframes explodeGoofy {
  from { transform: translate(0,0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(720deg); opacity: 0; }
}

/* Keyframes */
@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(50px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes expand {
  from { 
    opacity: 0;
    transform: scale(0.5);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes twinkle {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}

@keyframes pulseNebula {
  0% { opacity: 0.1; }
  100% { opacity: 0.5; }
}

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

@keyframes cosmicExplosion {
  0% { 
    width: 0;
    height: 0;
    opacity: 1;
  }
  50% {
    width: 200vh;
    height: 200vh;
    opacity: 0.8;
  }
  100% { 
    width: 400vh;
    height: 400vh;
    opacity: 0;
  }
}

@keyframes pulsateLight {
  0% { opacity: 0.3; }
  100% { opacity: 0.8; }
}

@keyframes fadeInStar {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes rayGrow {
  0% { height: 0; }
  50% { height: 100vh; }
  100% { height: 50vh; }
}

@keyframes mythicParticle {
  0% { 
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  20% { 
    opacity: 0.8;
    transform: translateY(-20px) scale(1);
  }
  100% { 
    opacity: 0;
    transform: translateY(-100px) scale(0.5);
  }
}

@keyframes flameRise {
  0% { 
    height: 60px;
    opacity: 1;
  }
  100% { 
    height: 200px;
    opacity: 0;
  }
}

@keyframes glitchBackground {
  0%, 90% { background-color: #111; }
  10%, 40% { background-color: #191919; }
  20%, 80% { background-color: #0a0a0a; }
  30%, 50%, 100% { background-color: #111; }
  60%, 95% { background-color: #080808; }
  70% { background-color: #0f0f0f; }
}

@keyframes glitchMove {
  0% { transform: translate(0, 0); opacity: 0.8; }
  20% { transform: translate(-10px, 5px); opacity: 0.6; }
  40% { transform: translate(10px, -5px); opacity: 0.8; }
  60% { transform: translate(-5px, -10px); opacity: 0.4; }
  80% { transform: translate(5px, 10px); opacity: 0.6; }
  100% { transform: translate(0, 0); opacity: 0.8; }
}

@keyframes textGlitch {
  0%, 80% { transform: translate(0, 0) skew(0deg); }
  20% { transform: translate(-2px, 1px) skew(1deg); }
  40% { transform: translate(2px, -1px) skew(-1deg); }
  60% { transform: translate(-1px, -2px) skew(0.5deg); }
}

@keyframes glitchStar {
  0%, 80% { opacity: 1; transform: scale(1) rotate(0deg); }
  10%, 30%, 50%, 70% { opacity: 0.8; transform: scale(1.05) rotate(2deg); }
  20%, 40%, 60% { opacity: 0.9; transform: scale(0.95) rotate(-2deg); }
}

@keyframes fallingParticle {
  0% { transform: translateY(-10vh) scale(0.8); opacity: 0; }
  50% { opacity: 0.3; }
  100% { transform: translateY(110vh) scale(0.3); opacity: 0; }
}

@keyframes chainRattle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes oppressionPulse {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes oppressionStar {
  0% { transform: scale(0.9); filter: grayscale(80%) brightness(0.7); }
  50% { transform: scale(1); filter: grayscale(90%) brightness(0.6); }
  100% { transform: scale(0.9); filter: grayscale(80%) brightness(0.7); }
}