html, body {
    margin: 0;
    padding: 0;
}

 /*Vārda ievades loga css*/
#name-input-container {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid black;
    border-radius: 11px;
    transform: translate(-50%, -50%);
    z-index: 2;
}

#name-form {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#name-form label {
    font-size: 18px;
    display: block;
    margin-bottom: 10px;
}

#name-input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    max-width: 300px;
}

#name-form button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
}

#name-form button:hover {
    background-color: #0056b3;
}

/*Galvenā ekrāna css*/
#main-screen {
    width: 100%;
    height: 100vh;
    display: flex;
    background-image: url('Backgrounds/background.png');
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative; 
    z-index: 1;
}

/*Animācija krītošajām dekoratīvām figūrām*/
@keyframes fallingAnimation {
    0% {
        top: -40px;
    }
    100% {
        top: 100vh;
    }
}

h1 {
    font-size: 64px;
    margin: 10px;
    z-index: 1;
}

h2 {
    font-size: 36px;
    font-weight: bold;
    font-family: Arial;
}

/*Galvenās lapas pogu css*/
button {
    font-size: 20px;
    padding: 10px 20px;
    margin: 10px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 1;
}

/*Kursora novietošanas efekti pogām*/
#play-button:hover {
    background-color: rgb(184, 181, 181) !important;
}

#open-color-picker:hover {
    background-color: rgb(184, 181, 181) !important;
}

#instructions-button:hover {
    background-color: rgb(184, 181, 181) !important;
}

#leaderboards-button:hover {
    background-color: rgb(184, 181, 181) !important;
}

#settings-button:hover {
    background-color: rgb(184, 181, 181) !important;
}

#pause-button:hover {
    background-color: rgb(184, 181, 181) !important;
}

/*Iestatījumu ekrāna css*/
#settings-screen {
    display: none;
    position: fixed;
    width: 300px;
    background-color: white;
    border: 2px solid;
    border-radius: 5px;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    text-align: center;
}

#settings-screen label {
    font-size: 18px;
}

/*Spēlētāja krāsas izvēles pogas css*/
#open-color-picker {
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}

/*Spēlētāja krāsas izvēles loga css*/
#color-picker-container {
    display: none;
    position: absolute;
    width: 300px;
    height: 400px;
    border: 2px solid;
    border-radius: 5px;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#colorpicker {
    width: 280px;
    height: 280px;
    margin: 10px auto;
}

#close-color-picker {
    background-color: #e74c3c;
    text-align: center;
    color: white;
    width: 95px;
    height: 40px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #e74c3c;
    margin-top: 75px;
}

#close-color-picker:hover {
    background-color: #c43c2a;
    transform: scale(1.05);
}

#close-settings {
    background-color: #e74c3c;
    color: white;
    width: 95px;
    height: 40px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #e74c3c;
    margin-top: 15px;
}

#close-settings:hover {
    background-color: #c43c2a;
    transform: scale(1.05);
}

/*Instrukcijas ekrāna css*/
#instructions-screen {
    display: none;
    position: fixed;
    width: 325px;
    border: 2px solid black;
    border-radius: 10px;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center; 
}

#instructions-screen p {
    font-size: 18px;
    font-family: Arial, sans-serif; 
    font-weight: bold; 
    text-align: center;
}

#instructions-content-points,
#instructions-content-powerups {
    text-align: left;
    margin-left: 1px;
}

ul li {
    font-size: 16px;
    font-family: Arial;
    font-weight: bold;
    margin-bottom: 5px;
}

.hidden {
    display: none;
}

/*Instrukciju pogas uz instrukcijas ekrāna css*/
#instruction-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-family: Arial;
    margin-bottom: 1px;
}

/*Katras instrukcijas pogas css*/
#general-instructions-button,
#powerups-instructions-button,
#points-instructions-button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    width: 110px;
    height: 40px;
    border: none;
    border-radius: 25px;
    margin: 0 2px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    font-size: 16px; 
    font-weight: bold; 
}

#general-instructions-button:hover,
#powerups-instructions-button:hover,
#points-instructions-button:hover {
    background-color: rgb(184, 181, 181) !important;
    transform: scale(1.05);
}

#close-instructions {
    background-color: #e74c3c;
    color: white;
    width: 95px;
    height: 40px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #e74c3c;
    margin: 10px auto;
}

#close-instructions:hover {
    background-color: #c43c2a;
    transform: scale(1.05);
}

/*Līderu saraksta css*/
#leaderboards-container {
    display: none;
    position: fixed;
    background-color: #b6b6b6;
    height: 70vh;
    width: 58vh;
    margin: 0 auto;
    padding: 20px;
    border: 2px solid #b8b8b8;
    border-radius: 10px;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
}

#leaderboards-container h2 {
    text-align: center;
    font-size: 3vw;
    font-weight: bold;
    margin-bottom: 2px;
    margin-top: -3px;
}

#leaderboards-standings {
    display: flex;
    position: fixed;
    background-color: rgb(180, 180, 180);
    height: 52vh;
    width: 56vh;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#leaderboards-standings ol {
    list-style: none;
    padding: 0;
}

#leaderboards-standings li .rank,
#leaderboards-standings li .username,
#leaderboards-standings li .score {
    font-size: 2.3vw;
    font-weight: bold;
}

#leaderboards-standings li .first-rank {
    color: gold;
    font-weight: bold;
}

#leaderboards-standings li .second-rank {
    color: silver;
    font-weight: bold;
}

#leaderboards-standings li .third-rank {
    color: #cd7f32;
    font-weight: bold;
}

#close-leaderboards {
    background-color: #e74c3c;
    text-align: center;
    color: white;
    width: 95px;
    height: 40px;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #e74c3c;
    position: absolute;
    bottom: 10px;
    margin-left: auto;
}

#close-leaderboards:hover {
    background-color: #c43c2a;
    transform: scale(1.05);
}

/*Spēles ekrāna css*/
#game-container {
    display: none;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('Backgrounds/backgroundgame2.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/*Spēles laukuma css*/
.canvas-container {
    width: 40vh;
    height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 3px solid black;
}

/*Punktu un dzīvību css*/
.points-lives-container {
    display: flex;
    margin-left: 2%;
    margin-top: 8px;
    margin-right: 2%;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.label {
    font-size: 24px;
    margin-right: 5px;
}

/*Punktu pieskaitīšanas animācijas css*/
.points-animation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    font-size: 24px;
    color: rgb(0, 0, 0);
    animation: pointsAnimation 1s linear;
    pointer-events: none;
    z-index: 1000;
}

.points-animation {
    position: absolute;
    font-size: 24px;
    color: rgb(0, 0, 0);
    animation: pointsAnimation 1s linear;
    pointer-events: none;
    margin: 10px;
}

/*Punktu pieskaitīšanas animācija*/
@keyframes pointsAnimation {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-50px);
        opacity: 0.7;
    }
    100% {
        transform: translateY(-100px);
        opacity: 0;
    }
}

#points-count {
    text-align: center;
    margin-top: -3px;
}

.lives-label {
    position: absolute;
    font-size: 24px;
    top: 0;
}

/*Sirds bildes css*/
.heart-image {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
    margin-left: 1px;
    margin-top: 27px;
}

#hearts-container {
    margin-left: 0;
}

/*Dzīvību zaudēšanas animācija*/
@keyframes lifeLost {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/*Dzīvību iegūšanas animācija*/
@keyframes heartGainAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.heart-image.life-lost {
    animation: lifeLost 1s ease-in-out forwards;
}

.heart-image.heart-gain {
    animation: heartGainAnimation 1s ease-in-out forwards;
}

/*Pauzes pogas css*/
.pause-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 3;
    position: absolute;
    top: 5px;
    left: 48%;
    transform: translate(-50%, -50%);
}

/*Pauzes loga css*/
#pause-menu {
    display: none;
    position: fixed;
    height: 260px;
    width: 20vh;
    background-color: #f0f0f0;
    border: 2px solid black;
    border-radius: 10px;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

#pause-menu p {
    font-size: 28px;
}

/*Atsākt pogas css*/
#resume-button {
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

#resume-button:hover {
    background-color: rgb(184, 181, 181) !important;
}

/*Iestatījumu pogas uz pauzes loga css*/
#settings-button-pause {
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

#settings-button-pause:hover {
    background-color: rgb(184, 181, 181) !important;
}

/*Iestatījumu loga uz pauzes loga css*/
#settings-screen-pause {
    display: none;
    position: fixed;
    width: 300px;
    background-color: white;
    border: 2px solid;
    border-radius: 5px;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    text-align: center;
}

#settings-screen-pause label {
    font-size: 18px;
}

/*Aizvērt iestatījumu logu poga*/
#close-settings-pause {
    background-color: #e74c3c;
    color: white;
    width: 95px;
    height: 40px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #e74c3c;
    margin-top: 15px;
}

#close-settings-pause:hover {
    background-color: #c43c2a;
    transform: scale(1.05);
}

/*Galvenā lapa pogas css*/
#main-menu-button-pause {
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

#main-menu-button-pause:hover {
    background-color: #c0392b !important;
}

#game-canvas {
    width: 40vh;
    height: 90vh; 
    position: relative;
    overflow: hidden;
}

/*Spēlētāja figūras css*/
#player-box {
    position: absolute;
    bottom: 0;
    left: calc(50% - 0%);
    transform: translateX(-50%);
    z-index: 2;
}

/*Platuma papildiespējas css*/
#width-container {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 25vh;
    right: 2px;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0);
    padding: -2px;
    border-radius: 5px;
    text-align: center;
}

#width-image {
    width: 40px;
    height: 40px;
}

#width-timer {
    font-size: 28px;
}

/*2x Zvaigznes iespējas papildiespējas css*/
#double-star-container {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 35vh;
    right: -8px;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0);
    padding: 5px;
    border-radius: 5px;
    text-align: center;
}

#double-star-image {
    width: 40px;
    height: 40px;
}

#double-star-timer {
    font-size: 28px;
}

/*2x punktu papildiespējas css*/
#double-points-container {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 45vh;
    right: -6px;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0);
    padding: 5px;
    border-radius: 5px;
    text-align: center;
}

#double-points-image {
    width: 40px;
    height: 40px;
}

#double-points-timer {
    font-size: 28px;
}

/*Vairoga papildiespējas css*/
#shield-container {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 55vh;
    right: -8px;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0);
    padding: 5px;
    border-radius: 5px;
    text-align: center;
}

#shield-image {
    width: 40px;
    height: 40px;
}

/*Spēles beigas ekrāna css*/
#game-over-screen {
    display: none;
    position: fixed;
    width: 250px;
    border: 2px solid;
    border-radius: 5px;
    text-align: center;
    font-size: 24px;
    padding: 20px;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*Spēlēt Vēlreiz pogas css*/
#restart-button {
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    margin-top: 5px;
}

#restart-button:hover {
    background-color: rgb(184, 181, 181) !important;
}

/*Galvenās lapas pogas css*/
#main-menu-button {
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    margin-top: 5px;
}

#main-menu-button:hover {
    background-color: #c0392b !important;
}