/* General Styles */
body {
    font-family: 'EB Garamond', serif;
    margin: 0;
    padding: 0;
}

/* General Screen Styles */
.screen {
    display: none; /* Hide all screens by default */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    align-items: center;
}

.screen.active {
    display: block;
}

/* Greeting Screen */
#greeting-screen {
    padding: 0;
    margin: 0;
    background-color: #f6f2e7; /* Background color */
    position: relative;
    width: 100%;
    height: 100vh; /* Full screen height */
    overflow: hidden; /* Ensure SVG graphics don't overflow */
}

#greeting-screen.active {
    padding: 0;
    margin: 0;
    display: flex; /* Use flexbox only when the screen is active */
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Align content to the top */
}

#music-control {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000; /* Above all screens */
}

.music-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 100;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.music-toggle:hover {
    opacity: 1;
}

.music-toggle svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    #music-control {
        bottom: 10px;
        right: 10px;
    }
}

/* Button Styling */
#start-button {
    position: absolute;
    top: 20%; /* 20% from the top */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    padding: 15px 30px;
    font-family: 'EB Garamond', serif; /* Use EB Garamond font */
    font-size: 1.5em;
    color: #557c70; /* Text color */
    background-color: transparent; /* Transparent background */
    border: 2px solid #557c70; /* Rectangle border */
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    z-index: 10;
}

#start-button:hover {
    background-color: #557c70; /* Fill button on hover */
    color: #f6f2e7; /* Change text color on hover */
}

/* SVG Graphics Styling */
.svg-graphic {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    width: auto; /* Flexible width */
    height: 50vh; /* Target height */
    max-width: 100%;
    z-index: 1;
}

/* Aspect ratio protection - shrinks ONLY when necessary */
@media (max-aspect-ratio: 1/1) { /* Portrait or narrow screens */
    .svg-graphic {
        width: calc(50vh * (359/321)); /* Replace with your SVG's ratio */
        height: auto; /* Let width drive the size */
        max-height: 50vh; /* Soft limit */
    }
}


/* Snake Screen */
#snake-screen {
    background-color: #d2d9e1; /* Background color */
    position: relative;
    width: 100%;
    height: 100vh; /* Full screen height */
    overflow: hidden; /* Ensure no overflow */
}

#snake-screen.active {
    padding: 0;
    margin: 0;
    display: flex; /* Use flexbox only when the screen is active */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to the top */
}

/* Frame and Canvas Container */
.frame-container {
    position: relative;
    top: 10%; /* 10% from the top */
    height: 70vh;
    margin: 0 auto; /* Center horizontally */
    max-width: 90%;
}

/* Frame (PNG) */
.frame {
    height: 100%; /* Make the frame 100% of the container */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it behaves as a block element */
}

/* Snake Game Canvas */
#snake-game {
    position: absolute;
    top: 50%; /* Center vertically inside the frame */
    left: 50%; /* Center horizontally inside the frame */
    transform: translate(-50%, -50%); /* Offset to true center */
    background-color: transparent; /* Transparent background */
}

/* Add to styles.css */
#confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 1000;
}

.confetti {
    opacity: 0;
    position: fixed;
    width: 10px;
    height: 10px;
    background: #ff0000;
    animation:
        fade-in 0.1s linear forwards,
        fall 3s linear 0.1s forwards;
    z-index: 1000;
}

@keyframes fade-in {
    to { opacity: 1; }
}

@keyframes fall {
    to { transform: translateY(100vh) rotate(360deg); }
}

/* Food Item Silhouettes */
#food-silhouettes {
    position: relative;
    width: 80%; /* Match the width of the frame container */
    margin: 3vh auto 0; /* Center horizontally and add padding on top */
    display: flex;
    justify-content: center; /* Space out the silhouettes */
    align-items: center;
    flex-wrap: wrap;
    top: 10%;
}

.food-item {
    width: 6.5%;
    min-width: 20px;
    margin: 0.5%;
}

/* FINAL SCREEN - Full Page Scroll Styles */
#final-screen {
    display: none;
    position: relative;
    width: 100%;
}

#final-screen.active {
    display: block;
    height: auto; /* Remove fixed height */
    overflow: visible; /* Allow natural scrolling */
}

/* Each tile as a full-viewport section */
.tile {
    height: 100vh; /* Each tile takes full viewport height */
    width: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px; /* Add some padding for content */
    scroll-snap-align: start; /* Optional: for smooth snapping */
    --content-top: 15vh;
}

/* Optional: Enable smooth scroll snapping */
/* Uncomment if you want snapping behavior */

html {
    --scroll-duration: 800ms;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}


/* Tile Backgrounds */
.tile-1,
.tile-3 {
    background-color: #d2d9e1;
}
.tile-4 {
    background-color: #f6f2e7;
}
.tile-2 {
    background-color: #fff;
}

/* Tile Content */
.tile-content {
    text-align: center;
    height: 100vh;
    z-index: 2;
    max-width: 600px; /* Limit content width for better readability */
    margin: 0 auto; /* Center content */
    padding: 0;
}

/* Title Images for Tiles */
.tile-title-img {
    position: relative;
    max-width: 90%;
    height: 20vh;
    margin-bottom: 0;
}

.tile-text {
    font-family: 'EB Garamond', serif;
    color: #557c70;
    margin: 20px 0;
    font-size: 1.5rem;
    line-height: 1.6;
    position: relative;
}

.tile-1 .tile-title-img {
    top: 15vh;
}

.tile-1 .tile-text {
    top: 15vh;
}

/* Link protection */
.tile-1 .tile-text a {
    display: inline; /* Changed from inline-block */
    vertical-align: baseline; /* Ensures alignment with text */
    white-space: normal; /* Allows wrapping if needed */
    text-decoration: underline; /* Optional: clarifies it's clickable */
    color: inherit; /* Maintains your color scheme */
}

/* Tile 2 - Full Image */
.tile-full-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Decorative Images */
.tile-decor {
    position: absolute;
    z-index: 1;
    height: 30vh;
    width: auto;
}

/* Tile 1 decoration */
.tile-decor-1 {
    bottom: 0;
    right: 5%;
    height: 55vmin;
    min-height: 35vh;
    width: auto;
}

/* Base styles (unchanged for large screens) */
.tile-3 .tile-content {
    max-height: 70vh;
    overflow-y: auto; /* Allows scrolling if absolutely needed */
}

/* Automatic text scaling */
.tile-3 .tile-text {
    font-size: min(1.5rem, max(1.1rem, 2.5vmin)); /* Clamps between 1.1rem-1.5rem */
    line-height: 1.5;
    padding: 0 5%;
    overflow-wrap: break-word;
}

/* Tile 3 decorations */
.tile-decor-left {
    bottom: 0;
    left: 5%;
    height: 50vmin;
    min-height: 20vh;
    width: auto;
}
.tile-decor-right {
    bottom: 0;
    right: 5%;
    height: 50vmin;
    min-height: 20vh;
    width: auto;
}

/* Button Styling */
#register-button {
    padding: 15px 30px;
    font-family: 'EB Garamond', serif; /* Use EB Garamond font */
    font-size: 1em;
    color: #557c70; /* Text color */
    background-color: transparent; /* Transparent background */
    border: 2px solid #557c70; /* Rectangle border */
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    z-index: 10;
}

#register-button:hover {
    background-color: #557c70; /* Fill button on hover */
    color: #f6f2e7; /* Change text color on hover */
}


@media (max-aspect-ratio: 0.5) {
    .tile-3 .tile-decor-left,
    .tile-3 .tile-decor-right {
        min-height: 30vh;
    }
}

@media (max-aspect-ratio: 0.35) {
    .tile-3 .tile-decor-left,
    .tile-3 .tile-decor-right {
        display: None;
    }
}


/* Tile 4 decorations */
.tile-title-img-4 {
    position: relative;
    max-width: 90%;
    height: 25vh;
    margin-bottom: 0;
    top: 15vh;
}

.tile-text-4 {
    font-family: 'EB Garamond', serif;
    color: #557c70;
    margin: 0 0;
    font-size: 1.5rem;
    line-height: 1.6;
    position: relative;
    top: 15vh;
}

.tile-decor-trop {
    bottom: 0;
    left: 5%;
    height: 50vmin;
    min-height: 30vh;
    width: auto;
    z-index: 10;
}

.tile-decor-flower {
    bottom: 0;
    right: 5%;
    height: 50vmin;
    min-height: 30vh;
    width: auto;
}

@media (max-aspect-ratio: 0.5) {
    .tile-4 .tile-decor-flower {
        display: none; /* Sacrifice decorations if needed */
    }
}