/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* Make sure to inherit box-sizing */
*, *:before, *:after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

/* Body styling */
body {
    overflow: auto;
    font-family: 'Roboto', sans-serif;
    background-color: #67c8d9; /* Light blue background */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    transition: background-color 1s ease;
}

/* Game container for both desktop and mobile */
.game-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    position: relative;
}

/* Dealer hand (top of the screen) */
.dealer-hand {
    position: absolute;
    top: 5vh; /* Adjust this based on how high you want it */
    width: 50vw;
    display: flex;
    justify-content: center;
}

/* Player hand (middle of the screen) */
.player-hand {
    position: absolute;
    bottom: 34vh; /* Adjust this based on how low you want it */
    width: 50vw;
    display: flex;
    justify-content: center;
}

/* Cards */
.card {
    width: 8vw;
    height: 25vh;
    margin: 1vw;
    object-fit: contain;
    transform: translateY(-200px); /* Initially off-screen */
    opacity: 0; /* Initially hidden */
    transition: transform 0.5s ease-out, opacity 0.5s ease;
}

.card.show {
    transform: translateY(0); /* Slide in */
    opacity: 1;
}

/* Buttons container (at the bottom of the screen) */
.buttons-container {
    position: absolute;
    bottom: 15vh;
    width: 50vw;
    display: flex;
    justify-content: center;
    gap: 2vw;
    opacity: 0;
    transform: translateY(50px); /* Initially off-screen */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in;
}

.buttons-container.show {
    opacity: 1;
    transform: translateY(0); /* Slide up into view */
}

/* Button styling */
.game-button {
    width: 10vw;
    height: 20vh;
    border-radius: 15vw;
    background-color: rgba(255, 255, 255, 0.2); /* Transparent */
    border: 1px solid white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 2vw;
    color: black;
}

/* Hover effect */
.game-button:hover {
    background-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

/* Disabled (grayed out) Split button */
.disabled {
    background-color: grey;
    cursor: not-allowed;
}
.disabled:hover {
    transform: scale(1.0);
    background-color: grey;
}

/* Streak display */
.streak {
    position: absolute;
    bottom: 1vh;
    right: 46vw;
    font-size: 2vw;
    color: black;
}

/* Dealer and player titles */
.dealerTitle {
    position: absolute;
    top: 1vh;
    right: 39vw;
    font-size: 3vw;
    color: white;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.playerTitle {
    position: absolute;
    top: 33vh;
    right: 43vw;
    font-size: 3vw;
    color: white;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

/* Message container */
.messageContainer {
    position: absolute;
    bottom: 16vh;
    width: 40vw;
    right: 27vw;
    font-size: 2vw;
    color: white;
}

/* End button */
.buttons-end {
    position: absolute;
    width: 12vw;
    height: 6vh;
    bottom: 8vh;
    right: 44vw;
    display: none;
    background-color: rgba(255, 255, 255, 0.2); /* Transparent */
    border: .02vw solid black;
    cursor: pointer;
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    font-size: 2vw;
    color: black;
}

.buttons-end:hover {
    background-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

/* Bigger mobile screens */
/* Medium mobile screens */
@media (max-width: 768px) {

   .game-button {
        width: 15vw;
        height: 15vw;
        font-size: 5vw;
    }

    .card {
        width: 20vw;
    }

    .messageContainer {
        font-size: 2vw;
        bottom: 25vh;
        left: 14vw;
        width: 70vw;
    }

    .dealer-hand {
        top: -8vh;
    }

    .player-hand {
        bottom: 25vh;
    }

    .playerTitle {
        font-size: 6vw;
        width: 50vw;
        right: 14vw;
        top: 26vh;
    }

    .dealerTitle {
        font-size: 6vw;
        width: 60vw;
        right: 12vw;
        top: 4vh;
    }

    .buttons-container {
        position: absolute;
        bottom: 25vh;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 4vw;
        opacity: 0;
        transform: translateY(50px); /* Initially off-screen */
        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in;
    }

    .buttons-end {
        position: absolute;
        width: 25vw;
        height: 8vh;
        bottom: 12vh;
        border-radius: 4vw;
        right: 37vw;
        display: none;
        background-color: rgba(255, 255, 255, 0.2); /* Transparent */
        border: 1px solid white;
        cursor: pointer;
        opacity: 0;
        transition: opacity .3s ease, transform .3s ease;
        font-size: 4.5vw;
        color: black;
    }

    .streak {
        position: absolute;
        bottom: 20vh;
        right: 35vw;
        font-size: 6vw;
        color: black;
    }
}




/* Smaller mobile screens */
@media (max-width: 480px) {

    .game-button {
        width: 20vw;
        height: 20vw;
        text-align: center;
        font-size: 4vw;
    }

    .card {
        width: 25vw;
    }

    .messageContainer {
        font-size: 5vw;
        bottom: 26vh;
        left: 11vw;
        width: 80vw;
    }

    .dealer-hand {
        top: 4vh;
    }

    .player-hand {
        bottom: 44vh;
    }

    .playerTitle {
        font-size: 7vw;
        width: 50vw;
        right: 16vw;
        top: 28vh;
    }
    .dealerTitle {
        font-size: 7vw;
        width: 60vw;
        right: 15vw;
        top: 2vh;
    }
    .buttons-container {
        position: absolute;
        bottom: 30vh;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 4vw;
        opacity: 0;
        transform: translateY(50px); /* Initially off-screen */
        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in;
    }
    .buttons-end {
     	position: absolute;
     	width: 30vw;
     	height: 10vh;
     	bottom: 15vh;
        border-radius: 5vw;
     	display: none;
     	right: 35vw;
     	background-color: rgba(255, 255, 255, 0.2); /* Transparent */
     	border: 1px solid white;
     	cursor: pointer;
     	opacity: 0;
     	transition: opacity 0.3s ease, transform 0.3s ease;
     	font-size: 5vw;
     	color: black;
    }
    .streak {
        position: absolute;
    	bottom: 17vh;
    	right: 37vw;
    	font-size: 7vw;
    	color: black;
    }

}
@media only screen and (max-width: 768px) and (orientation: landscape) {
    body {
        display: none; /* Hide content only on mobile devices in landscape mode */
    }
}