@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Orbitron:wght@400;700;900&display=swap');

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

body {
    font-family: 'Orbitron', monospace;
    background: linear-gradient(135deg, #0a0e27 0%, #16213e 50%, #1a237e 100%);
    min-height: 100vh;
    color: #e0e6ed;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #00ff88, transparent),
        radial-gradient(2px 2px at 40px 70px, #88ff00, transparent),
        radial-gradient(1px 1px at 90px 40px, #ff0088, transparent);
    background-repeat: repeat;
    background-size: 200px 300px;
    animation: particleFloat 20s infinite linear;
    opacity: 0.1;
    pointer-events: none;
    z-index: -1;
}

@keyframes particleFloat {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-1000px) rotate(360deg); }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header with Money and Quest */
.header {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(16, 33, 62, 0.9) 100%);
    border: 2px solid #00ff88;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    position: relative;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ff88, transparent);
    animation: scanMove 3s linear infinite;
}

@keyframes scanMove {
    0% { top: 0; opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.lab-title {
    font-family: 'Creepster', cursive;
    font-size: 2.5em;
    color: #00ff88;
    text-shadow: 0 0 20px #00ff88;
    margin-bottom: 10px;
}

.money-display, .quest-display {
    font-size: 1.2em; /* Reduced slightly for quest */
    color: #ffeb3b;
    font-weight: 700;
    text-shadow: 0 0 10px #ffeb3b;
    margin-bottom: 5px; /* Space between money and quest */
}
 .quest-display {
     color: #88ff00; /* Different color for quest */
     font-size: 1.1em;
     text-shadow: 0 0 8px #88ff00;
     font-style: italic;
 }
  .quest-display span {
      color: #ffeb3b; /* Highlight quest details */
  }


/* Main Menu */
.main-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.menu-button {
    background: linear-gradient(45deg, #1a237e 0%, #3f51b5 50%, #5c6bc0 100%);
    border: 2px solid #00ff88;
    border-radius: 15px;
    padding: 20px;
    color: #fff;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 1.1em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.menu-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 255, 136, 0.6);
    border-color: #88ff00;
}

.menu-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.menu-button:hover::before {
    left: 100%;
}

/* Content Areas */
.content-area {
    display: none;
    background: linear-gradient(135deg, rgba(255, 0, 136, 0.1) 0%, rgba(26, 35, 126, 0.9) 100%);
    border: 2px solid #ff0088;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    position: relative;
}

.content-area.active {
    display: block;
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.content-title {
    font-family: 'Creepster', cursive;
    font-size: 2em;
    color: #ff0088;
    text-align: center;
    margin-bottom: 25px;
    text-shadow: 0 0 15px #ff0088;
}

/* Shop */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.shop-item {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid #00ff88;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s ease; /* Faster transition for purchase feedback */
    position: relative; /* Needed for particle source */
    overflow: hidden; /* Hide particles initially */
     filter: none; /* Reset filter */
     opacity: 1; /* Reset opacity */
}

.shop-item:hover:not(.locked) {
    background: rgba(0, 255, 136, 0.2);
    transform: scale(1.02); /* Slightly less scale on hover */
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4); /* Less shadow on hover */
}

 .shop-item.owned {
    background: rgba(136, 255, 0, 0.2);
    border-color: #88ff00;
}

 .shop-item.locked {
     background: rgba(128, 128, 128, 0.1); /* Grey background */
     border-color: #757575; /* Grey border */
     cursor: not-allowed; /* Indicate not clickable */
     opacity: 0.6; /* Dim it */
     filter: grayscale(100%); /* Make it grayscale */
     pointer-events: none; /* Prevent clicks */
     /* Remove hover effects */
     transform: none;
     box-shadow: none;
 }
 .shop-item.locked div {
     color: #b0b0b0; /* Dim text */
 }


.item-price {
    color: #ffeb3b;
    font-weight: 700;
    font-size: 1.2em;
}
 .shop-item.locked .item-price {
      color: #b0b0b0; /* Dim price for locked items */
 }

/* Alchemy */
.alchemy-area {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr; /* Use auto for operators */
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}
.alchemy-area > div:nth-child(2n) { /* Style for + and = */
     font-size: 2.5em; /* Increased font size */
     text-align: center;
     color: #fff;
     text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}


.ingredient-slot {
    background: rgba(0, 255, 136, 0.1);
    border: 2px dashed #00ff88;
    border-radius: 15px;
    padding: 15px; /* Reduced padding */
    min-height: 100px; /* Reduced min-height */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Stack emoji and text */
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9em; /* Reduced font size */
    text-align: center;
}

.ingredient-slot:hover {
    background: rgba(0, 255, 136, 0.2);
    border-color: #88ff00;
    transform: scale(1.02); /* Slight hover effect */
}

.ingredient-slot.filled {
    background: rgba(136, 255, 0, 0.2);
    border-style: solid;
}
 .ingredient-slot.failed {
      background: rgba(255, 0, 0, 0.2);
      border-color: #ff0000;
 }


.ingredient-slot div {
     word-break: break-word; /* Prevent long names from overflowing */
}
 .ingredient-slot div:first-child { /* Style for emoji */
     font-size: 2.5em; /* Increased emoji size */
     margin-bottom: 5px;
 }


.mix-button {
    background: linear-gradient(45deg, #e91e63 0%, #f06292 100%);
    border: 3px solid #ff0088; /* Slightly thicker border */
    border-radius: 50%;
    width: 120px; /* Increased size */
    height: 120px; /* Increased size */
    color: white;
    font-size: 4em; /* Increased font size */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(255, 0, 136, 0.4); /* Added shadow */
    margin: 20px auto; /* Center the button */
     padding: 0; /* Remove padding to only show emoji */
}

.mix-button:hover {
    transform: scale(1.1) rotate(180deg);
    box-shadow: 0 0 40px rgba(255, 0, 136, 0.8); /* More intense shadow on hover */
    border-color: #fff; /* Border color changes on hover */
}

/* Assistant */
.assistant-area {
    text-align: center;
    margin-bottom: 20px;
     display: flex; /* Use flexbox */
     flex-direction: column; /* Stack elements vertically */
     align-items: center; /* Center horizontally */
}

 /* Container for assistant image/video and story */
 .assistant-display-container {
     position: relative;
     width: 100%;
    /* max-width: 400px;  Limit size */
     margin-bottom: 15px;
 }

.assistant-image, .assistant-video {
    display: block; /* Remove extra space below */
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    /* aspect-ratio: 4 / 5;  Typical portrait aspect ratio */
    object-fit: cover; /* Cover the container */
    border-radius: 20px;
    border: 3px solid #00ff88;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
    transition: all 0.5s ease;
}

 .assistant-video {
     /* Keep display: block when active, but the JS controls which one shows */
 }
  .assistant-image {
     display: none; /* Hide image by default, video is used */
  }


.assistant-dialogue {
    background: rgba(0, 255, 136, 0.1);
    border: 2px solid #00ff88;
    border-radius: 15px;
    padding: 20px;
    margin: 15px auto; /* Center dialogue box */
    max-width: 80%; /* Limit dialogue box width */
    font-style: italic;
    text-align: center;
}

 .potion-story-area {
     background: linear-gradient(135deg, rgba(255, 0, 136, 0.1) 0%, rgba(26, 35, 126, 0.9) 100%);
     border: 2px solid #ff0088;
     border-radius: 15px;
     padding: 20px;
     margin-top: 20px;
     text-align: center;
     max-width: 80%;
     margin-left: auto;
     margin-right: auto;
     opacity: 0; /* Start hidden */
     transition: opacity 0.5s ease-in;
     pointer-events: none; /* Don't block clicks */
 }
 .potion-story-area.show {
     opacity: 1;
 }
  .potion-story-image {
      max-width: 100%;
      height: auto;
      max-height: 200px;
      object-fit: contain;
      border-radius: 10px;
      margin-bottom: 15px;
       border: 2px solid #ff0088;
  }
 .potion-story-text {
     font-style: normal;
     color: #e0e6ed;
     font-size: 1em;
 }


.potion-inventory {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.potion-item {
    background: linear-gradient(45deg, #9c27b0, #e91e63);
    border: 2px solid #ff0088;
    border-radius: 10px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-weight: 700;
    text-align: center; /* Ensure text is centered */
}

.potion-item:hover {
    transform: scale(1.05); /* Slightly less scale than menu */
    box-shadow: 0 0 20px rgba(255, 0, 136, 0.6);
}

/* Patients */
.patient-area {
    display: flex; /* Use flexbox for column layout */
    flex-direction: column;
    gap: 20px;
    align-items: center; /* Center items horizontally in column */
}

.patient-info {
    background: rgba(255, 0, 136, 0.1);
    border: 2px solid #ff0088;
    border-radius: 15px;
    padding: 20px;
    text-align: center; /* Center patient info content */
    width: 100%; /* Take full width */
    max-width: 600px; /* Limit info block width */
     margin-bottom: 10px; /* Space between info and treatment */
     display: flex; /* Enable flexbox for internal layout */
     flex-direction: column; /* Stack name, image, condition */
     align-items: center; /* Center contents vertically */
}

 .patient-name {
    font-family: 'Creepster', cursive; /* Patient name spooky font */
    font-size: 1.8em; /* Slightly larger name */
    color: #ff0088;
    margin-bottom: 10px; /* Space after name before image */
    text-shadow: 0 0 10px rgba(255, 0, 136, 0.4);
}


.patient-image-container {
    width: 100%; /* Make container take full width */
    max-width: 400px; /* Limit max width */
    position: relative; /* For potentially positioning things over the image */
     margin-bottom: 10px; /* Space between image and condition */
     border-radius: 15px; /* Match border radius */
     overflow: hidden; /* Hide overflow */
     border: 3px solid #ff0088; /* Match border */
     box-shadow: 0 0 25px rgba(255, 0, 136, 0.5); /* Match shadow */
}
 .potion-story-video {
	display: block; /* Remove extra space below */
    width: 100%;
    height: auto;
    /* aspect-ratio: 4 / 5; */
    object-fit: cover;
    border-radius: 20px;
    border: 3px solid #ff0088; /* Couleur de bordure différente pour l'effet */
    box-shadow: 0 0 30px rgba(255, 0, 136, 0.7);
    transition: all 0.5s ease;
 }

.potion-story-area.show {
     opacity: 1;
     pointer-events: auto; /* Permettre les interactions si nécessaire */
 }
.patient-image {
    width: 100%; /* Image fills container */
    height: auto; /* Maintain aspect ratio */
    /* aspect-ratio: 16 / 9; Force 16:9 aspect ratio */
    object-fit: cover; /* Cover the container while maintaining aspect ratio */
     display: block; /* Remove extra space below image */
}


 #cure-display-area {
     position: fixed; /* Fixed to cover entire viewport */
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex; /* Use flexbox to center content */
     flex-direction: column; /* Stack image and button */
     align-items: center;
     justify-content: center;
     background-color: rgba(0,0,0,0.9); /* Darker overlay */
     z-index: 2000; /* Above everything else */
     opacity: 0; /* Start hidden */
     visibility: hidden; /* Fully hide when not showing */
     transition: opacity 0.5s ease-out, visibility 0s linear 0.5s; /* Add delay to visibility */
 }

  #cure-display-area.show {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s; /* Remove visibility delay when showing */
  }

  #cure-display-area .cure-frame {
      background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(16, 33, 62, 0.9) 100%);
      border: 2px solid #00ff88;
      border-radius: 20px;
      padding: 20px;
      text-align: center;
      backdrop-filter: blur(10px);
      max-width: 90%; /* Limit width on smaller screens */
      max-height: 90%; /* Limit height */
      overflow: hidden; /* Hide overflow if content is too large */
      display: flex; /* Flex for internal content */
      flex-direction: column;
      align-items: center;
  }


 #cure-display-area img {
     max-width: 100%; /* Ensure image fits within the frame */
     max-height: 80vh; /* Limit image height relative to viewport */
     object-fit: contain; /* Contain the animation within its space */
      border-radius: 10px; /* Match frame style */
      margin-bottom: 20px; /* Space between image and button */
 }

  #cure-display-area button {
       /* Style Done button */
      background: linear-gradient(45deg, #4caf50 0%, #81c784 100%);
      border: 2px solid #4caf50;
      border-radius: 10px;
      padding: 10px 30px;
      color: white;
      font-weight: 700;
      font-size: 1.2em;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  #cure-display-area button:hover {
      transform: scale(1.05);
      box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
  }


 .patient-condition-row {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px; /* Space between text and icon */
     margin-bottom: 15px;
 }

 .patient-condition-row .condition-text {
     font-size: 1.1em;
     font-style: italic;
 }

 .patient-condition-row .required-potion-icon {
     font-size: 1.5em; /* Size of the required potion icon */
     color: #00ff88; /* Color the icon */
     text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
 }


.treatment-area {
    background: rgba(0, 255, 136, 0.1);
    border: 2px solid #00ff88;
    border-radius: 15px;
    padding: 20px;
    width: 100%; /* Take full width */
    max-width: 600px; /* Limit treatment block width */
    text-align: center;
}

.treatment-area h3 {
     margin-bottom: 15px;
     color: #00ff88;
     text-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

.back-button {
    background: linear-gradient(45deg, #424242, #616161);
    border: 2px solid #757575;
    border-radius: 10px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease;
     display: inline-block; /* Allow margins */
}

.back-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(117, 117, 117, 0.5);
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.inventory-item {
    background: rgba(136, 255, 0, 0.2);
    border: 1px solid #88ff00;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column; /* Stack emoji and text */
    align-items: center;
    justify-content: center;
     font-size: 0.9em; /* Reduced font size */
     word-break: break-word; /* Prevent long names from overflowing */
}

 .inventory-item div:first-child { /* Style for emoji */
     font-size: 1.5em; /* Smaller emoji size than slot */
     margin-bottom: 5px;
 }

.inventory-item:hover {
    background: rgba(136, 255, 0, 0.3);
    transform: scale(1.05);
}

/* Purchase effect particles */
.purchase-particle {
     position: fixed;
     width: 6px; /* Smaller particles */
     height: 6px; /* Smaller particles */
     border-radius: 50%;
     background-color: #ffeb3b; /* Gold color */
     box-shadow: 0 0 5px #ffeb3b; /* Glow */
     pointer-events: none;
     z-index: 1000;
     animation: travelToMoney 1s ease-in forwards;
}

 @keyframes travelToMoney {
     0% {
         transform: translate(0, 0) scale(1);
         opacity: 1;
     }
     100% {
         transform: translate(var(--dx), var(--dy)) scale(0.5);
         opacity: 0;
     }
 }


/* In-game Notifications */
#notification-area {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px); /* Start above the screen */
    z-index: 2000;
    background-color: rgba(26, 35, 126, 0.9);
    color: #fff;
    padding: 15px 25px;
    border: 2px solid #ff0088;
    border-radius: 10px;
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    pointer-events: none; /* Allow clicks on elements behind */
    max-width: 80%;
    text-align: center;
}

#notification-area.show {
    transform: translateX(-50%) translateY(0); /* Slide into view */
    opacity: 1;
}

 #notification-area.success { border-color: #88ff00; background-color: rgba(76, 175, 80, 0.9); }
 #notification-area.error { border-color: #f44336; background-color: rgba(244, 67, 54, 0.9); }
 #notification-area.info { border-color: #2196f3; background-color: rgba(33, 150, 243, 0.9); }


@media (max-width: 768px) {
    .main-menu {
        grid-template-columns: 1fr;
    }

    .alchemy-area {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .patient-area {
         flex-direction: column; /* Already column, ensure consistent */
        align-items: center;
    }

     .patient-image-container {
         max-width: 300px; /* Smaller image on mobile */
     }

    .assistant-image, .assistant-video {
        width: 200px; /* Smaller on mobile */
        height: 300px; /* Smaller on mobile */
    }

     .mix-button {
         width: 100px;
         height: 100px;
         font-size: 3em;
     }

     #notification-area {
         max-width: 95%;
         padding: 10px 15px;
     }
      .quest-display {
          font-size: 1em; /* Smaller font on mobile */
      }
}



.potion-story-video {
	display: block; /* Remove extra space below */
    width: 100%;
    height: auto;
    /* aspect-ratio: 4 / 5; */
    object-fit: cover;
    border-radius: 20px;
    border: 3px solid #ff0088; /* Couleur de bordure différente pour l'effet */
    box-shadow: 0 0 30px rgba(255, 0, 136, 0.7);
    transition: all 0.5s ease;
 }```


 .potion-story-video {
	display: block; /* Remove extra space below */
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 20px;
    border: 3px solid #ff0088; /* Couleur de bordure différente pour l'effet */
    box-shadow: 0 0 30px rgba(255, 0, 136, 0.7);
    transition: all 0.5s ease;
    cursor: pointer; /* <--- AJOUTEZ CETTE LIGNE */
 }


/* Add CSS for the basic click effect and the general fade-in animation */
@keyframes clickEffect {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: hue-rotate(0deg);
    }
     50% {
         filter: hue-rotate(180deg); /* Add color shift */
     }
    100% {
        transform: scale(15);
        opacity: 0;
        filter: hue-rotate(360deg);
    }
}
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
 }