body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-image: url('bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
}

#game-container {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1.04vw; /* Changed from 1.85vh, (original 20px -> 1.04vw) */
    border-radius: 0.52vw; /* 10px -> 0.52vw */
    box-shadow: 0 0 0.52vw rgba(0, 0, 0, 0.1); /* 10px -> 0.52vw */
    text-align: center;
    position: relative;
    width: 73vw; /* Changed to accommodate 70vw content + padding */
    /* max-width: 41.67vw; Removed */
    min-height: 37vh; /* 400px -> 37vh */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Added to help center .screen if it's narrower */
}

/* Ensure background image persists in fullscreen */
#game-container:fullscreen {
    background-image: url('bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white; 
}


#fullscreen-icon {
    position: fixed; 
    top: 10vh;    
    right: 7vw;   
    font-size: 2.2vh; /* 24px -> 2.2vh */
    cursor: pointer;
    z-index: 2000; 
}

.screen {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-grow: 1;
}

.screen.active {
    display: flex;
}

#start-button, .answer-button, #next-button {
    background-color: #ADD8E6; /* Light Blue */
    border: none;
    border-radius: 0.42vw; /* 8px -> 0.42vw */
    padding: 1.38vh 1.56vw; /* 15px 30px -> 1.38vh 1.56vw */
    font-size: 1.8vh; /* 1.2em (19.2px) -> 1.8vh */
    cursor: pointer;
    margin: 0.9vh; /* 10px -> 0.9vh */
    min-width: 10.4vw; /* 200px -> 10.4vw */
    box-shadow: 0 0.21vw 0.31vw rgba(0,0,0,0.1); /* 4px 6px -> 0.21vw 0.31vw */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
}

#start-button {
    width: 46.875vw;  /* 900px -> 46.875vw */
    height: 31.48vh; /* 340px -> 31.48vh */
    font-size: 5.5vh; /* 4em (64px) -> 5.92vh, adjusted to 5.5vh for balance */
    max-width: 90vw;  
    max-height: 80vh; 
    padding: 1.85vh; /* 20px -> 1.85vh */
    background-color: #ffe594; 
    border-radius: 1.46vw; /* 28px -> 1.46vw */
}

#start-button:hover, #start-button:active {
    background-color: #e6cf84; 
}


#start-button div, .answer-button div, #next-button div {
    margin: 0.18vh 0; /* 2px -> 0.18vh */
}


#question-text {
    font-size: 3.5vh; /* 2.5em (40px) -> 3.5vh */
    margin-bottom: 1.85vh; /* 20px -> 1.85vh */
    padding: 0.9vh; /* 10px -> 0.9vh */
    width: 70vw; /* Exact width */
    /* max-width: 70vw; Removed as width is now exact */
    box-sizing: border-box; 
    margin-left: auto; /* Ensure centering */
    margin-right: auto; /* Ensure centering */
}

#question-text.end-game-message {
    font-size: 4.5vh; /* Larger for end game message, smaller than restart button (5.5vh) */
}

#feedback-message {
    font-size: 2.5vh; /* 1.8em (28.8px) -> 2.5vh */
    margin-bottom: 1.38vh; /* 15px -> 1.38vh */
    padding: 0.9vh; /* 10px -> 0.9vh */
    border-radius: 0.26vw; /* 5px -> 0.26vw */
    min-height: 5vh; /* 2em (relative to 2.5vh font-size) -> 5vh */
    width: 70vw; /* Exact width */
    /* max-width: 70vw; Removed as width is now exact */
    box-sizing: border-box; 
    margin-left: auto; 
    margin-right: auto; 
}

#feedback-message.correct {
    background-color: #90EE90; 
    color: #333;
}

#feedback-message.incorrect {
    background-color: #FFA07A; 
    color: #333;
}

#answer-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9vh; /* 10px -> 0.9vh (or 0.52vw) */
    width: 70vw; /* Exact width */
    /* max-width: 70vw; Removed as width is now exact */
    margin-bottom: 1.85vh; /* 20px -> 1.85vh */
    margin-left: auto; 
    margin-right: auto; 
}

.answer-button {
    font-size: 2.8vh;   /* 2em (32px) -> 2.8vh */
    background-color: #ffe594; 
    padding: 2.3vh; /* 25px -> 2.3vh */
    box-sizing: border-box; 
    min-height: 11.1vh; /* 120px -> 11.1vh */
}

.answer-button:hover, .answer-button:active {
    background-color: #e6cf84; 
}

.answer-button.selected {
    background-image: none; 
    background-color: #FFD700; 
}

.answer-button.correct {
    background-image: linear-gradient(to right, #e6f3e9, #acdabb); 
    background-color: transparent; 
}

.answer-button.incorrect-picked {
    background-color: #FFA07A; 
}


#controls {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    width: 100%;
    max-width: 36.45vw; /* 700px -> 36.45vw */
    margin-top: 3.7vh; /* 40px -> 3.7vh */
}


#next-button {
    padding: 1.38vh 1.56vw; /* Shared: 15px 30px */
    font-size: 2.2vh; /* 1.5em (24px) -> 2.2vh */
    position: fixed;
    bottom: 3.7vh; /* 40px -> 3.7vh */
    right: 2.08vw;  /* 40px -> 2.08vw */
    z-index: 1000; 
    background-color: #ffe594; 
    color: #333; 
    border: none; 
    border-radius: 0.42vw; /* Shared: 8px */
    box-shadow: 0 0.21vw 0.31vw rgba(0,0,0,0.1); /* Shared: 4px 6px */
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    margin: 0; 
}

#next-button:hover, #next-button:active {
    background-color: #e6cf84; 
}

#progress-bar-container {
    flex-grow: 1; 
    height: 2.78vh; /* 30px -> 2.78vh */
    background-color: #E0E0E0;
    border-radius: 1.38vh; /* 15px -> 1.38vh */
    overflow: visible; 
    position: relative; 
}

#progress-bar {
    height: 100%;
    width: 0%; 
    background: linear-gradient(to right, #87CEFA, #ADD8E6); 
    border-radius: 1.38vh; /* 15px -> 1.38vh */
    transition: width 0.5s ease-in-out;
}

.progress-spot {
    width: 6.25vw; /* 120px -> 6.25vw */
    height: 6.25vw; /* 120px -> 6.25vw (to keep circular with vw) */
    background-color: #87CEFA; 
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%); 
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2vw; /* 2.5em (40px) -> 2vw */
    font-weight: bold;
    border: 0.3vh solid white; /* 4px -> 0.3vh (or 0.21vw) */
    z-index: 1; 
}


/* Fullscreen adjustments */
body:fullscreen #question-text {
    font-size: 5vh; /* Was 3em, relative to 3.5vh -> 10.5vh. Let's set an absolute vh. */
}
body:fullscreen .answer-button {
    font-size: 4vh; /* Was 2.5em, relative to 2.8vh -> 7vh. Let's set an absolute vh. */
    padding: 3.24vh; /* 35px -> 3.24vh */
}
/* #start-button fullscreen styling can be added if needed, but it's already large */

body:fullscreen #next-button {
    font-size: 3vh; /* Was 2em, relative to 2.2vh -> 4.4vh. Let's set an absolute vh. */
}

body:fullscreen #progress-bar-container {
    height: 3.7vh; /* 40px -> 3.7vh */
}
body:fullscreen .progress-spot {
    width: 3vw; /* 50px -> 2.6vw, adjusted to 3vw */
    height: 3vw; /* 50px -> 2.6vw, adjusted to 3vw */
    font-size: 1.5vw; /* Was 1.2em, relative to 2vw -> 2.4vw. Let's set an absolute vw. */
    border: 0.2vh solid white;
}