/* ═══════════════════════════════════════════════
   ARCADE RESUME — STYLE
   ═══════════════════════════════════════════════ */

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  font-family: 'Press Start 2P', cursive;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
::-webkit-scrollbar { display: none; }


/* --- Scroll Area (invisible, drives the whole page) --- */
#scroll-area {
  width: 1px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}


/* --- Viewport (fixed visual frame) --- */
#viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 2;
  background: #000;
  /* Let scrolls pass through to body */
  pointer-events: none;
}


/* --- Sky Background (for drop animation) --- */
#sky-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  background:
    radial-gradient(1px 1px at 10%  15%, #fff 100%, transparent),
    radial-gradient(1px 1px at 25%  35%, #fff 100%, transparent),
    radial-gradient(2px 2px at 40%  10%, #ffa 100%, transparent),
    radial-gradient(1px 1px at 55%  55%, #fff 100%, transparent),
    radial-gradient(1px 1px at 70%  25%, #fff 100%, transparent),
    radial-gradient(2px 2px at 85%  45%, #faf 100%, transparent),
    radial-gradient(1px 1px at 15%  75%, #fff 100%, transparent),
    radial-gradient(1px 1px at 50%  85%, #fff 100%, transparent),
    radial-gradient(2px 2px at 80%  70%, #aff 100%, transparent),
    radial-gradient(1px 1px at 35%  60%, #fff 100%, transparent),
    linear-gradient(to bottom, #05051a 0%, #0a0a2e 60%, #111144 100%);
  background-size: 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
                   300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
                   100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, repeat,
                     repeat, repeat, repeat, repeat, repeat,
                     no-repeat;
}


/* --- World Strip --- */
#world-strip {
  display: flex;
  align-items: flex-end;
  height: 100vh;
  position: absolute;
  bottom: 0;
  left: 0;
  will-change: transform;
  z-index: 3;
  /* Starts pushed below the viewport, slides up during drop */
  transform: translateY(100vh) translateX(0px);
}

.connector {
  width: 70vh; /* Fix 1/2: Use vh instead of vw to maintain consistent aspect ratio and 70% crop on both PC and mobile */
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.stage img,
.connector img {
  height: 100vh;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}


/* --- Character --- */
#character {
  position: absolute;
  left: 50%;
  bottom: 50vh; /* starts in the sky */
  z-index: 10;
  will-change: bottom, transform, opacity;
  /* Default: facing right, centered, hidden during intro */
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

#char-sprite {
  height: 23vh; /* Increased from 15vh (Fix 1) */
  width: auto;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Flip character to face left */
#character.face-left {
  transform: translateX(-50%) scaleX(-1);
}


/* --- Dialog Box --- */
#dialog-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2vh;
  width: 90vw;
  max-width: 800px;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

#dialog-container.visible {
  opacity: 1;
}

#dialog-bg {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
}

#dialog-text {
  position: absolute;
  top: 15%;
  left: 6%;
  width: 85%;
  height: 65%;
  color: #fff;
  font-size: clamp(8px, 1.4vh, 16px);
  line-height: 1.8;
  text-shadow: 1px 1px 0 #000;
  overflow: hidden;
  display: flex;
  align-items: center;
}


/* --- Screen Overlays (Intro & Outro) --- */
.screen-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  z-index: 20;
  text-align: center;
  padding: 20px;
  pointer-events: auto; /* Allow clicking on links */
  transition: opacity 0.3s ease;
}

#outro-scene {
  background: #000; /* Fully opaque black (Fix 5) */
  z-index: 999;     /* Ensure it covers everything */
}

.screen-overlay.hidden {
  display: none;
  opacity: 0;
  pointer-events: none; /* Prevent clicks when hidden (Fix 7) */
}

.screen-overlay h1 {
  font-size: clamp(14px, 3vh, 36px);
  margin-bottom: 20px;
  color: #fff;
  text-shadow:
    3px 3px 0 #cc0000,
    6px 6px 0 rgba(0,0,0,0.3);
  line-height: 1.6;
}

.screen-overlay p {
  font-size: clamp(8px, 1.8vh, 18px);
  color: #ffff00;
  line-height: 1.8;
  margin-bottom: 10px;
}

#outro-part-2 {
  margin-top: 40px;
}

.hidden-outro {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.show-outro {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.6s ease, transform 0.6s ease;
}


/* --- Blinking text --- */
.blink {
  animation: blinker 1.2s steps(2, start) infinite;
}
@keyframes blinker {
  50% { opacity: 0; }
}

.highlight-ai {
  color: #ff3333;
  text-shadow: 0 0 8px rgba(255, 51, 51, 0.8);
  animation: twinkle 1.5s infinite alternate;
}
@keyframes twinkle {
  0% { opacity: 0.6; text-shadow: 0 0 4px #ff3333; }
  100% { opacity: 1; text-shadow: 0 0 15px #ff3333, 0 0 25px #ff3333; }
}


/* --- Outro Links --- */
.outro-links {
  margin-top: 40px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.outro-links a {
  color: #fff;
  text-decoration: none;
  font-size: clamp(8px, 1.4vh, 14px);
  padding: 14px 22px;
  border: 3px solid #555;
  background: #111;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.outro-links a:hover {
  background: #cc0000;
  border-color: #fff;
  color: #fff;
  transform: scale(1.05);
}

.link-icon {
  font-size: clamp(10px, 1.8vh, 18px);
  color: #ffff00;
}


/* --- Responsive tweaks --- */
@media (max-width: 480px) {
  .screen-overlay h1 {
    font-size: clamp(12px, 3.5vh, 28px);
  }
  .outro-links {
    flex-direction: column;
    gap: 12px;
  }
  .outro-links a {
    width: 100%;
    justify-content: center;
  }
  
  /* Fix 3: Make dialog box slightly shorter on mobile so it doesn't hide character feet */
  #dialog-container {
    width: 95vw;
    height: 17vh; /* Reduced by ~5vh */
    bottom: 2vh;
  }
  #dialog-bg {
    height: 100%; /* Stretch vertically */
    width: 100%;
  }
  #dialog-text {
    font-size: clamp(8px, 1.3vh, 12px); /* Adjusted to fit new height */
    line-height: 1.6;
    top: 15%;
    height: 70%;
  }
}