/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* This affects the whole page */
body {
    background-color: #000; /* Keeps it dark like your hallway */
    color: #fff;
    font-family: 'Courier New', Courier, monospace; /* Typewriter feel */
    height: 100vh;
    display: flex;
justify-content: center;
    align-items: center;
    margin: 0;
    overflow: hidden; /* Stops the scrollbars from appearing */
    
    
}

#game-container {
    width: 95vw;
    max-width: 800px;
    height: 71.25vw;
    max-height: 600px;
    background-color: #000;
    border: 10px solid #222; /* Your Weirdcore border */
    box-sizing: border-box;
    overflow: hidden;
    
    /* THIS pulls it to the exact center */
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
    #title-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Matches your drawing's white background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: opacity 0.8s ease;
    overflow: hidden;
 
}

#title-wrapper {
    position: relative;
    cursor: pointer; /* Makes the whole thing clickable */
}

#title-image {
    max-width: 800px;
    max-height: 600px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* Optional: Subtle pulse to make the drawing feel 'alive' */
#title-image {
    animation: titlePulse 2s ease-in-out infinite;
}

@keyframes titlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

#start-hitbox {
    position: absolute;
    bottom: 10%; /* Adjust this to sit right over your 'START' bubble */
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 80px;
    /* background: rgba(255, 0, 0, 0.2);  <-- Uncomment this to see the hitbox while testing! */
}

#start-button {
    position: absolute;
    bottom: 10% !important;      /* Positions it near the bottom of the logo */
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 40px;
    background-color: #000;
    color: #fff;
    border: 3px solid #ffccff; /* That pink you liked! */
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 110;
}

/* Make it glow when you hover over it */
#start-button:hover {
    background-color: #ffccff;
    color: #000;
    box-shadow: 0 0 20px #ffccff;
    transform: translateX(-50%) scale(1.1);
}
 


/* Your Pink Tool Tray at the bottom */
#tool-tray {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #ffccff; /* Light pink like your video */
    border-top: 5px solid #000;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#jack-scene {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Keeps Jack's world below the Title Screen */
}

#jack-character {
    position: absolute;
    bottom: 0;
    right: 5%;               /* This pins him to the right side of the screen! */
    height: 90%;
    width: auto;
    z-index: 5;
    display: block !important;
}

#dialogue-box {
    position: absolute;
    bottom: 5%;        /* Keeps it at the bottom so Jack's face is visible */
    left: 5%;          /* Small gap from the left wall */
    width: 90%;        /* Fits neatly inside the screen */
    height: auto;      /* Lets it grow if the text gets long */
    min-height: 100px;
    
    background-color: #000000;
    border-radius: 12px;
    border: 2px solid #ffffff;
    
    /* Your Glossy Shine */
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 51%
    );

    padding: 20px;
    z-index: 10;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

#jack-text {
    /* Since the box is black, the text MUST be white to be seen */
    color: #ffffff; 
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    margin: 0;
    line-height: 1.4;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5); /* A subtle contrast boost */
}

#click-prompt {
    position: absolute;
    bottom: 15px;
    right: 20px;
    color: #ffffff;
    font-size: 20px;         /* Made it a little bigger too */
    animation: float 1.5s ease-in-out infinite;
    display: none;           /* Removed the !important tags so your JS can control it */
}


@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

#scene-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;              /* Lowest layer */
}

#jack-scene::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* This creates a circular shadow that fades out in the middle */
    background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.4) 100%);
    pointer-events: none; /* This makes sure you can still click the dialogue box! */
    z-index: 15; /* Puts it on top of everything to 'glue' the scene together */
}

#options-container {
    position: absolute;
    top: 200px; /* Positioned below the dialogue box */
    left: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 20;
}

.diag-opt {
    background: #000;
    color: #fff;
    border: 2px solid #ffffff;
    border-radius: 8px;
    padding: 25px 50px;      /* Increased padding makes the button physically taller/wider */
    font-family: 'Courier New', monospace;
    font-size: 18px;         /* Made the text much easier to read */
    cursor: pointer;
    text-align: left;
    transition: 0.2s;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
}


.diag-opt:hover {
    background-color: #222;
    border-color: #ff00ff; /* A tiny hint of that pink back just for the hover! */
    transform: translateX(5px);
}