/* LOAD FONT */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/* MAIN CONTAINER - The Image Skin */
#digimon-container {
  background-image: url("/medias/digimon/digivice.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  width: 100%;
  /* CHANGE THIS VALUE TO MAKE IT BIGGER */
  max-width: 1000px;

  aspect-ratio: 1.1 / 1;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  font-family: "Press Start 2P", monospace;
  image-rendering: pixelated;
  container-type: inline-size;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* --- SCREEN LAYER --- */
.screen-layer {
  position: absolute;
  /* These percentages position the box over the green screen area of the image */
  top: 35.4%;
  left: 36.7%;
  width: 26.5%;
  height: 29%;

  /* Styling inner LCD screen */
  /* background-color: #8bac0f; Retro GB Green */
  background-color: transparent;
  /* Retro GB Green */
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); */
  color: #0f380f;
  /* Dark green text */
}

/* The Partner Image */
#pet-img {
  width: 70%;
  height: auto;
  image-rendering: pixelated;
  /* Filter to make colorful images look like monochromatic LCD */
  /* filter: grayscale(100%) sepia(100%) hue-rotate(50deg) saturate(300%) contrast(0.8); */
}

/* On-screen text */
.on-screen-stats {
  margin-top: 5px;
  text-align: center;
  width: 100%;
}

#msg-display {
  /* Was 8px. Now scales with width */
  font-size: clamp(3px, 1.5cqi, 6px);
  margin-bottom: 1px;
  text-transform: uppercase;
}

#time-display {
  /* Was 10px. Now scales with width */
  font-size: clamp(3px, 1.5cqi, 6px);
}

/* --- INVISIBLE BUTTONS --- */
.digi-btn {
  position: absolute;
  background: transparent;
  /* Invisible */
  border: none;
  cursor: pointer;
  border-radius: 50%;
  /* Optional: temporary red border to see where they are during setup */
  /* border: 2px solid red; */
}

/* Visual feedback when clicking the invisible areas */
.digi-btn:active {
  background-color: rgba(18, 18, 18, 0.2);
  /* Slight shadow on press */
}

/* --- D-PAD UP BUTTON --- */
.btn-up {
  top: 40%;
  /* Higher up */
  left: 14%;
  /* Centered on the D-pad */
  width: 10%;
  /* Smaller touch area */
  height: 9%;
}

/* --- D-PAD DOWN BUTTON --- */
.btn-down {
  top: 49%;
  /* Lower down */
  left: 14%;
  width: 10%;
  height: 9%;
}

/* Right Top Button */
.btn-right-top {
  top: 32%;
  right: 13%;
  width: 15%;
  height: 12%;
  transform: rotate(-7deg);
  /* Match image tilt */
}

/* Right Bottom Button */
.btn-right-bottom {
  top: 53%;
  right: 13%;
  width: 15%;
  height: 12%;
  transform: rotate(-7deg);
}

/* --- MODAL (Screen Flash) --- */
#evolve-modal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* --- NEW: FANCY BACKGROUND ANIMATION --- */
  /* A spinning "Digivolution" Tunnel effect */
  background: conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  z-index: 25;

  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* Mask to make it look like a "Data Tube" */
  -webkit-mask: radial-gradient(circle, transparent 30%, black 100%);
  mask: radial-gradient(circle, transparent 30%, black 100%);

  /* Spin the colors */
  animation: evolveSpin 2s linear infinite;

  /* Add a dark overlay so text is readable */
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
}

#evolve-modal::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* Darkens the rainbow so it's not blinding */
  z-index: -1;
}

.modal-title {
  /* --- FIX: TEXT SIZING --- */
  font-size: clamp(8px, 4cqi, 14px);
  color: #fff;
  /* White text */
  text-shadow: 0 0 5px #ff00de, 0 0 10px #ff00de;
  /* Glowing Neon Pink Outline */
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  z-index: 30;
  text-align: center;
  width: 90%;
  /* Ensure it fits in screen */
  animation: pulseText 0.5s infinite alternate;
}

.modal-subtitle {
  font-size: clamp(6px, 3cqi, 10px);
  color: #00ff00;
  /* Hacker Green */
  text-shadow: 0 0 2px black;
  z-index: 30;
}

/* ANIMATIONS */
@keyframes evolveSpin {
  0% {
    transform: scale(1.5) rotate(0deg);
  }

  100% {
    transform: scale(1.5) rotate(360deg);
  }
}

@keyframes pulseText {
  from {
    transform: scale(1);
    opacity: 0.8;
  }

  to {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* --- NEW MENU UI (Static Window Style) --- */
#menu-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

/* The Static "Window" Bar */
.menu-bar {
  position: relative;
  width: 98%;
  /* Almost full screen width */
  height: 45%;
  /* Taller to fit text */
  /* FANCY LIGHTER BLUE GRADIENT */
  background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);

  /* Double Border + Rounded Edges */
  border: 2px solid white;
  outline: 2px solid #0f380f;
  border-radius: 4px;

  /* "Glassy" Highlight */
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.7),
    /* Top highlight */
    inset 0 -2px 5px rgba(0, 0, 0, 0.2),
    /* Bottom shadow */
    0 5px 10px rgba(0, 0, 0, 0.4);
  /* Drop shadow */

  display: flex;
  align-items: center;
  justify-content: center;

  /* CRITICAL: THIS KEEPS THE SLIDING TEXT INSIDE THE BOX */
  overflow: hidden;
}

/* The Sliding Text */
.menu-text {
  position: absolute;
  width: 100%;
  height: 100%;
  /* Use full height of the bar */

  /* Flexbox to center multi-line text perfectly */
  display: flex;
  align-items: center;
  justify-content: center;

  color: white;
  font-family: "Press Start 2P", monospace;
  text-transform: uppercase;
  text-align: center;

  /* --- FIX: RESPONSIVE SIZING --- */
  /* Starts at 6px, grows with width, caps at 12px */
  font-size: clamp(6px, 3.5cqi, 12px);

  /* --- FIX: ALLOW DOUBLE LINES --- */
  white-space: normal;
  /* Allows text to wrap to next line */
  line-height: 1.2;
  /* Nice spacing between lines */
  padding: 0 5px;
  /* Safety padding on sides */
  box-sizing: border-box;

  /* Thick Shadow for readability */
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
}

/* --- ANIMATIONS (Unchanged) --- */
.slide-out-up {
  animation: slideOutUp 0.2s forwards;
}

.slide-in-up {
  animation: slideInUp 0.2s forwards;
}

.slide-out-down {
  animation: slideOutDown 0.2s forwards;
}

.slide-in-down {
  animation: slideInDown 0.2s forwards;
}

@keyframes slideOutUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-150%);
    opacity: 0;
  }
}

@keyframes slideInUp {
  0% {
    transform: translateY(150%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutDown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(150%);
    opacity: 0;
  }
}

@keyframes slideInDown {
  0% {
    transform: translateY(-150%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- MOBILE KEYBOARD FIX --- */
/* --- MOBILE KEYBOARD FIX --- */
/* --- MOBILE KEYBOARD FIX (ZOOM STABLE) --- */
#virtual-keyboard {
  /* Use absolute so it stays relative to the GAME CONTAINER */
  position: absolute;

  /* Place it exactly in the CENTER of the game */
  /* This prevents the "Jump to Top-Left" bug when zoomed in */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Keep it invisible but usable */
  width: 1px;
  height: 1px;
  opacity: 0;

  /* Lower z-index so it doesn't block clicks on buttons */
  z-index: -1;
  pointer-events: none;

  /* Prevent zooming */
  font-size: 16px;
}

/* --- MAP UI --- */
.map-pin {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #ccc;
  /* Locked Gray */
  border: 2px solid #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* Center on coords */
  z-index: 10;
}

/* Unlocked (Next Battle) - Blinking Red */
.map-pin.unlocked {
  background-color: #ff3333;
  animation: blinkPin 1s infinite;
  box-shadow: 0 0 5px red;
}

/* Cleared - Gold/Green */
.map-pin.cleared {
  background-color: #ffd700;
  border-color: #b8860b;
}

/* Selected Pin Cursor */
.map-pin.selected {
  border: 2px solid white;
  box-shadow: 0 0 0 2px black;
  /* Double border */
  scale: 1.3;
}

@keyframes blinkPin {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

/* --- VS SCREEN --- */
#vs-screen {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0f380f;
  /* Retro Green BG */
  z-index: 20;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 10%;
  box-sizing: border-box;
}

.vs-sprite {
  width: 40%;
  image-rendering: pixelated;
}

.vs-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #0f380f;
  background: #8bac0f;
  padding: 2px 5px;
  border: 2px solid #0f380f;
  font-weight: bold;
  animation: shakeVS 0.2s infinite;
}

@keyframes shakeVS {
  0% {
    transform: translate(-52%, -52%);
  }

  50% {
    transform: translate(-48%, -48%);
  }

  100% {
    transform: translate(-52%, -52%);
  }
}


/* =========================================
   GAME MANUAL UI
   ========================================= */

.game-manual {
  margin-top: 40px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  border: 4px solid #333;
  font-family: "Press Start 2P", monospace;
  text-align: left;
  color: #333;
}

.manual-title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
  border-bottom: 4px solid #333;
  padding-bottom: 10px;
}

.manual-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.manual-column {
  flex: 1;
  min-width: 250px;
}

.manual-subtitle {
  font-size: 14px;
  background: #333;
  color: white;
  padding: 5px 10px;
  margin-bottom: 15px;
}

/* --- BUTTON SCHEMATIC (The Diagram) --- */
.device-schematic {
  position: relative;
  height: 200px;
  background-color: #f0f0f0;
  border: 2px dashed #999;
  border-radius: 10px;
  padding: 10px;
}

.schematic-screen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  height: 20%;
  background: #8bac0f;
  border: 2px solid #0f380f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #0f380f;
}

/* Button Locations in Schematic */
.key-group {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* D-PAD (Left Side) */
.key-group.dpad {
  top: 50%;
  left: 10%;
  flex-direction: column;
  align-items: flex-start;
}

.key-group.dpad .key-label {
  font-size: 10px;
  font-weight: bold;
  border: 2px solid #333;
  padding: 2px;
}

/* BUTTON A (Top Right) */
.key-group.btn-a {
  top: 40%;
  right: 5%;
  flex-direction: row-reverse;
  /* Text on left of button */
}

/* BUTTON B (Bottom Right) */
.key-group.btn-b {
  top: 70%;
  right: 5%;
  flex-direction: row-reverse;
}

.key-circle {
  width: 25px;
  height: 25px;
  background: #333;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.key-desc {
  font-size: 8px;
  color: #555;
  text-transform: uppercase;
  width: 80px;
  line-height: 1.2;
}

/* --- RULES LIST --- */
.rules-list {
  list-style: none;
  padding: 0;
}

.rules-list li {
  font-size: 10px;
  line-height: 1.6;
  margin-bottom: 10px;
  position: relative;
  padding-left: 15px;
}

.rules-list li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: #ff3333;
  font-weight: bold;
}