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

body {
    background-color: #000; /* Black background */
    font-family: 'Baskerville', sans-serif;
    color: #fff;
    text-align: center;
    overflow-x: hidden; /* Allow vertical scrolling */
}

/* Page wrapper: keeps game ratio & allows scaling */
.page-wrapper {
    position: relative;
    width: 100vw; /* Fit width to viewport */
    height: calc(100vw * (1080 / 1920)); /* Maintain 16:9 ratio */
    max-width: 1920px; /* Don’t get bigger than design */
    margin: 0 auto;
}


/* ===== LAYERS ===== */

/* Background image */
.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('Background.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0.3;
    filter: contrast(150%);
    z-index: 2;
    animation: fadeIn 1.5s ease forwards;
}

.hex-layer {
    position: absolute;
    top: 0;
    left: 5%;
    width: 100%;
    height: 100%;
    background: url('hex.png') no-repeat center center;
    background-size: 46%;
    background-position: left center;
    z-index: 1;
    opacity: 0;
    animation: fadeInFrame 1.5s ease forwards;
    animation-delay: 0.4s;
}

/* Frame layer */
.frame-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('Indexframe.png') no-repeat center center;
    background-size: cover;
    z-index: 3;
    opacity: 0;
    animation: fadeInFrame 1.5s ease forwards;
    animation-delay: 0.4s;
}

/* Selection square image */
.selection-square {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('selectionsquare.png') no-repeat center center;
    background-size: cover;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transform: translateX(100%);
    animation: fadeInRight 1.5s ease forwards;
    animation-delay: 0.8s;
}

/* ===== CONTENT ===== */
.content {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 5;
}

h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Baskerville', Times, sans-serif;
    font-size: 5.5vw; /* scales with viewport width */
    color: #fff;
    text-shadow: 2px 2px 4px #000;
    line-height: 1.2;
    opacity: 0;
    transform: translateX(-100%);
    animation: fadeInLeft 1.5s ease forwards;
    animation-delay: 1.2s;
}

h1 span {
    display: block;
}

/* ===== SELECTION BAR ===== */
.selection-bar {
    position: absolute;
    top: 14%;
    right: 12%; /* anchor right edge */
    transform: translateY(-50%); /* only vertical center */
    width: 40%;
    height: 13%; /* fixed height */
    background: url('bar.png') no-repeat right center;
    background-size: 100% 100%; /* force background to fit container exactly */
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: width 0.4s ease;
    z-index: 5; /* Make sure this is higher than .selection-bar-still */
}

.selection-bar:hover {
    width: 60%; /* expand width only */
}


.selection-text {
    font-family: 'Baskerville', serif;
    font-weight: bold;
    font-size: 5vw;
    color: black;
    text-shadow: 5px 0 0 #d8e5fd;
    user-select: none;
    pointer-events: none;
}

/* ===== SELECTION BAR STAGNANT ===== */
.selection-bar-still {
    position: absolute;
    top: calc(14% + var(--step) * 18%);
    right: calc(11% - 4px - var(--step) * 2.7%); /* subtract instead of add */
    width: 40%;
    height: 13%;
    background: url('stillbar.png') no-repeat right center;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 3;
    transform: translateY(-50%);
        /* NEW: center the text inside */
    display: flex;
    justify-content: center;
    align-items: center;
    
}

/* ===== THE ??? BARS ===== */
.unused-bar {
    position: absolute;
    top: calc(14% + var(--step) * 18%);
    right: calc(11% - 4px - var(--step) * 2.7%); /* subtract instead of add */
    width: 40%;
    height: 13%;
    background: url('unusedbar.png') no-repeat right center;
    background-size: 100% 100%;
    pointer-events: auto; /* Enable hover & click */
    z-index: 5;
    transform: translateY(-50%);
    transition: width 0.4s ease; /* <-- This makes it match Vai */

        /* NEW: center the text inside */
    display: flex;
    justify-content: center;
    align-items: center; 
}

.unused-bar:hover {
    width: 60%; /* expand width only */
}


/* === HOME === */
.home-icon {
    position: fixed;
    bottom: 20px;
    left: 40px;
    z-index: 10; /* make sure it appears above background layers */
}

.home-icon img {
    width: 60px; /* really small */
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.home-icon img:hover {
    opacity: 1;
}


/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 0.3; }
}

@keyframes fadeInFrame {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== RESPONSIVE SCALING ===== */
/* This makes the whole game scale on smaller devices */
@media (max-width: 1920px) {
    .page-wrapper {
        transform: scale(calc(100vw / 1920));
        transform-origin: top center;
        height: calc(1080px * (100vw / 1920));
    }
}