:root {
    --sky-blue: #89CFF0; 
    --dark-blue: #13142A; 
    --8bit-pink: #FF77A8;
    --8bit-blue: #0099DB;
    --8bit-white: #FFFFFF;
    --8bit-black: #000000;
    --8bit-gold: #FFD700; 
}

body { background-color: var(--sky-blue); color: var(--8bit-black); font-family: 'Press Start 2P', cursive; display: flex; justify-content: center; align-items: center; min-height: 100dvh; margin: 0; text-align: center; image-rendering: pixelated; overflow: hidden; transition: background-color 1s ease; }
body.body-space-mode { background-color: var(--dark-blue); }
.star-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(var(--8bit-gold), rgba(255, 215, 0, 0.2) 1px, transparent 20px), radial-gradient(var(--8bit-gold), rgba(255, 215, 0, 0.15) 1px, transparent 15px); background-size: 350px 350px, 250px 250px; background-position: 0 0, 130px 270px; animation: twinkle 20s infinite linear; z-index: 0; }
@keyframes twinkle { from { background-position: 0 0, 130px 270px; } to { background-position: 350px 0, 380px 270px; } }
.cloud-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; pointer-events: none; overflow: hidden; }
@keyframes float-right-to-left { from { left: 100%; transform: translateX(0); } to { left: 0; transform: translateX(-100%); } }
.ambient-cloud { position: absolute; height: auto; z-index: 11; animation: float-right-to-left linear infinite; width: calc(var(--w) * 1px); top: calc(var(--y) * 1%); animation-duration: calc(var(--i) * 1s); transition: opacity 0.5s ease-out; }
.cloud { position: absolute; height: auto; z-index: 11; animation-name: float-right-to-left; animation-timing-function: linear; animation-iteration-count: 1; }

.container { border: 4px solid var(--8bit-white); box-shadow: inset -4px -4px 0px 0px var(--8bit-black), inset 4px 4px 0px 0px var(--8bit-white); background-color: var(--dark-blue); padding: 1rem; max-width: 500px; width: 90%; position: relative; z-index: 3; transition: opacity 0.5s ease-out; display: flex; flex-direction: column; max-height: 95dvh; overflow-y: auto; align-items: center; }
.fest-logo { max-width: 63%; height: auto; margin-bottom: 2rem; image-rendering: auto; transition: all 0.3s ease; }
.fest-poster { max-width: 100%; height: auto; border: 4px solid var(--8bit-black); display: block; image-rendering: auto; cursor: pointer; transition: max-width 0.3s ease; }
main { padding-top: 1.5rem; transition: padding-top 0.3s ease; width: 100%; }
.button-container { display: flex; flex-direction: column; gap: 1rem; }
.btn { display: inline-block; padding: 1rem; text-decoration: none; text-transform: uppercase; border: 4px solid var(--8bit-black); box-shadow: inset -4px -4px 0px 0px rgba(0,0,0,0.5); transition: all 0.1s ease; cursor: pointer; font-family: 'Press Start 2P', cursive; }
.btn-primary { background-color: var(--8bit-pink); color: var(--8bit-white); }
.btn-secondary { background-color: var(--8bit-blue); color: var(--8bit-white); }
.btn:hover { filter: brightness(1.1); }
.btn:active { box-shadow: inset 4px 4px 0px 0px rgba(0,0,0,0.5); transform: translateY(2px); }
.btn:disabled { background-color: #888; filter: grayscale(1); cursor: not-allowed; }
.lightbox { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); justify-content: center; align-items: center; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox-content { max-width: 85%; max-height: 85%; border: 4px solid var(--8bit-white); }
.close-button { position: absolute; top: 20px; right: 35px; color: var(--8bit-white); font-size: 40px; font-weight: bold; cursor: pointer; text-shadow: 2px 2px 0 var(--8bit-black); }
.hidden { display: none !important; }
.fade-out { opacity: 0; pointer-events: none; transition: opacity 0.5s ease-out; }

#game-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: 5; background-color: transparent; }
#ground { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background-color: #D2B48C; border-top: 4px solid #A0522D; z-index: 12; transition: all 0.5s ease-out; background-image: none; }
#player { position: absolute; bottom: 40px; left: 25%; transform: translateX(-50%); width: 40px; height: 60px; z-index: 15; transition: left 0.3s ease; }
#player img { width: 100%; height: 100%; }
.obstacle { position: absolute; bottom: 40px; z-index: 14; }
.pyramid-obs { width: 90px; height: 90px; background-image: url('images/PYRAMID.png'); background-size: contain; background-repeat: no-repeat; background-position: bottom; }
.cactus-obs { width: 70px; height: 105px; background-image: url('images/CACTUS.png'); background-size: contain; background-repeat: no-repeat; background-position: bottom; }

/* THE FIX: Pushed the score display further down to avoid the leaderboard. */
#score-display { position: absolute; top: 180px; left: 50%; transform: translateX(-50%); font-size: 24px; color: var(--8bit-white); text-shadow: 2px 2px 0 var(--8bit-black); z-index: 21; }

#game-over-screen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--8bit-white); text-shadow: 3px 3px 0 var(--8bit-black); z-index: 25; text-align: center; cursor: pointer; width: 90%; }
#game-over-screen p { font-size: 48px; margin: 0; transition: font-size 0.3s ease; }
#game-over-screen span { font-size: 16px; margin-top: 20px; display: block; transition: font-size 0.3s ease;}
#jump-instructions { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: var(--8bit-white); text-shadow: 3px 3px 0 var(--8bit-black); z-index: 20; }
@keyframes screen-shake { 0%, 100% { transform: translate(0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate(-4px, 2px) rotate(-1deg); } 20%, 40%, 60%, 80% { transform: translate(4px, -2px) rotate(1deg); } }
.shake { animation: screen-shake 0.4s linear; }
.ufo-obs { width: 100px; height: 60px; background-image: url('images/UFO.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.uap-obs { width: 60px; height: 120px; background-image: url('images/UAP.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
#game-container.space-mode #ground { opacity: 0; }
/* THE FIX: Removed height property to allow the HTML attribute to control the size. */
#spotify-player { width: 100%; max-width: 450px; margin-bottom: 1.5rem; border: none; }
.leaderboard-container { border: 4px solid var(--8bit-white); box-shadow: inset -4px -4px 0px 0px var(--8bit-black), inset 4px 4px 0px 0px var(--8bit-white); background-color: var(--dark-blue); padding: 2rem; max-width: 500px; width: 90%; color: var(--8bit-white); text-shadow: 2px 2px 0px var(--8bit-black); text-align: center; display: flex; flex-direction: column; gap: 1.5rem; }
.leaderboard-container h2 { margin: 0; font-size: 2rem; color: var(--8bit-gold); }
#score-submission-form { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
#score-submission-form p { margin: 0; font-size: 1rem; }
#player-name-input { font-family: 'Press Start 2P', cursive; padding: 0.75rem; width: 80%; max-width: 250px; text-align: center; background-color: var(--dark-blue); color: var(--8bit-white); border: 4px solid var(--8bit-white); text-transform: uppercase; }
#player-name-input::placeholder { color: rgba(255, 255, 255, 0.5); }
#high-scores-list { list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 0.5rem; font-size: 1rem; }
#high-scores-list li { display: flex; justify-content: space-between; padding: 0.25rem 0.5rem; background-color: rgba(0, 0, 0, 0.2); }
#high-scores-list li:nth-child(1) { background-color: var(--8bit-gold); color: var(--8bit-black); text-shadow: none; font-weight: bold; }
#leaderboard-loading { color: var(--8bit-blue); }
.leaderboard-controls { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

#back-to-menu-btn { position: absolute; top: 20px; left: 20px; z-index: 22; padding: 0; width: 44px; height: 44px; font-size: 24px; font-weight: bold; color: var(--8bit-black); text-shadow: none; display: flex; align-items: center; justify-content: center; padding-bottom: 4px; }

/* THE FIX: Removed the rule that was shrinking the spotify player. */
@media (max-width: 768px) { 

}
@media (max-width: 600px) { 
    #player { left: 30px; } 
    #game-over-screen p { font-size: 32px; } 
    #game-over-screen span { font-size: 14px; } 
    #jump-instructions { font-size: 18px; } 
    .leaderboard-container { padding: 1rem; }
    .leaderboard-container h2 { font-size: 1.5rem; }
    #high-scores-list { font-size: 0.8rem; }
}
@media (max-height: 750px) { .container { padding: 0.5rem; } .fest-logo { max-width: 40%; margin-bottom: 1rem; } main { padding-top: 1rem; } .btn { padding: 0.75rem; } }
.container { scrollbar-width: thin; scrollbar-color: var(--8bit-white) var(--dark-blue); }
.container::-webkit-scrollbar { width: 10px; }
.container::-webkit-scrollbar-track { background: var(--dark-blue); }
.container::-webkit-scrollbar-thumb { background-color: var(--8bit-white); border: 2px solid var(--8bit-black); }
.container::-webkit-scrollbar-thumb:hover { background-color: var(--8bit-blue); }

#in-game-leaderboard { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 20; color: var(--8bit-white); text-shadow: 2px 2px 0 var(--8bit-black); text-align: center; font-size: 14px; }
#in-game-leaderboard h3 { margin: 0 0 0.5rem 0; font-size: 16px; text-align: center; }
#in-game-leaderboard ol { list-style: none; padding: 0; margin: 0; text-align: left; }
#in-game-leaderboard li { margin-bottom: 4px; white-space: nowrap; }
#parallax-bg { position: absolute; bottom: 40px; left: 0; width: 100%; height: 150px; background-image: url('images/mountains.png'); background-size: auto 100%; background-repeat: repeat-x; z-index: 10; animation: scroll-bg 60s linear infinite; opacity: 0; transition: opacity 1s ease-in-out; }
#space-bg { position: absolute; top: 50%; left: 0; width: 300px; height: 300px; margin-top: -150px; background-image: url('images/EARTH.png'); background-size: contain; background-repeat: no-repeat; z-index: 1; opacity: 0; transition: opacity 2s ease-in-out; animation: drift-left 200s linear infinite; animation-play-state: paused; }
#game-container.space-mode #space-bg { opacity: 1; animation-play-state: running; }
@keyframes drift-left { from { transform: translateX(75vw); } to { transform: translateX(-450px); } }
#game-container:not(.space-mode) #parallax-bg { opacity: 1; }
@keyframes scroll-bg { from { background-position-x: 0; } to { background-position-x: -202px; } }