/*Alla filer*/

@media only screen and (max-width: 750px) {
    html[data-page="game_display"] iframe {
        width: 100%;
        height: 100%;
        margin-left: 0;
    }
}

/* game_display.php */

html[data-page="game_display"] body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #222; /* Bakgrundsfärg för sidan */
    color: #fff; /* Textfärg */
    height: 100vh;
    width: 99.3%;
}

html[data-page="game_display"] #currency-icon {
    position: absolute;
    height: 35px;
    right: 0px; /* Placering av valutaikonen */
}

html[data-page="game_display"] iframe {
    width: 100.5%;
    height: 94%;
    border: none;
    background: transparent;
    border: 2px solid black; /* Ram runt iframe */
    margin-left: 10px;
    transform: translateY(0px);
}

html[data-page="game_display"] header {
    width: 100%;
    text-align: center;
    background: #333; /* Bakgrundsfärg för header */
    padding: 10px;
    margin-top: 0px;
}

html[data-page="game_display"] header a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
}

html[data-page="game_display"] #currency-bar {
    display: flex;
    align-items: center;
    background-color: #333; /* Mörk bakgrund för valutabaren */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    width: 100px;
    position: relative;
}

/* index.php */

html[data-page="index"] html, html[data-page="index"] body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #131A20; /* Bakgrundsfärg för huvudsidan */
    color: white;
    height: 100%;
    overflow: hidden; /* Inaktivera scrollning */
}

html[data-page="index"] * {
    scrollbar-width: none; /* Döljer scrollbar i Firefox */
    -ms-overflow-style: none; /* Döljer scrollbar i Internet Explorer 10+ */
}

html[data-page="index"] *::-webkit-scrollbar {
    display: none; /* Döljer scrollbar i Chrome, Safari, Edge */
}

html[data-page="index"] #currency-bar {
    display: flex;
    align-items: center;
    background-color: #333; /* Mörk bakgrund för valutabaren */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    width: 100px;
    position: relative;
}

html[data-page="index"] #currency-icon {
    position: absolute;
    height: 35px;
    right: 0px; /* Placering av valutaikonen */
}

/* Döljer scrollbaren i alla webbläsare */
html[data-page="index"] * {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html[data-page="index"] *::-webkit-scrollbar {
    display: none;
}

/* Headersektionen */
html[data-page="index"] #header {
    position: fixed; /* Fixerad överst på sidan */
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between; /* Utrymme mellan element */
    align-items: center;
    padding: 0 20px;
    height: 80px;
    background-color: #0D1117; /* Bakgrundsfärg för header */
    z-index: 1000; /* Säkerställer att den alltid ligger överst */
    animation: fadeIn 1s ease-in forwards;
}

html[data-page="index"] #logo {
    cursor: pointer;
    height: 48px; /* Logotypens höjd */
    width: 48px;  /* Logotypens bredd */
    margin-top: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smidiga övergångar */
}

html[data-page="index"] #logo:hover {
    transform: scale(1.1) translateY(-3px); /* Förstorar och flyttar upp vid hover */
}

html[data-page="index"] nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
}

html[data-page="index"] nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

/* Knappstilar */
html[data-page="index"] .buttons {
    display: flex;
    gap: 10px;
}

html[data-page="index"] .register, .login {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    color: white;
}

/* Sidomenyknapp */
html[data-page="index"] #sidebar-toggle {
    position: fixed;
    top: 100px; /* Justera för att placera den under headern */
    left: 10px;
    font-size: 30px;
    cursor: pointer;
    background-color: black;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 999; /* Se till att den ligger över andra element förutom headern */
    transition: left 0.5s;
    animation: fadeIn 1s ease-in forwards;
}

/* Sidomeny */
html[data-page="index"] .sidebar {
    position: fixed;
    top: 81px; /* Justera så att sidomenyn hamnar under headern */
    left: 0;
    width: 0; /* Initial bredd är 0 */
    height: calc(100% - 80px); /* 100% höjd minus headerns höjd */
    background-color: black;
    color: white;
    overflow-x: hidden;
    transition: width 0.5s;
    padding-top: 20px;
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 998; /* Under sidomenyknappen */
    animation: fadeIn 1s ease-in forwards;
}

/* Profilsektion */
html[data-page="index"] .profile-section {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid white;
}

html[data-page="index"] .username {
    display: flex;
    align-items: flex-start; /* Justera element till startposition */
}

html[data-page="index"] .profile-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
}

/* Huvudinnehåll */
html[data-page="index"] main {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
}

html[data-page="index"] section {
    border-radius: 10px;
}

html[data-page="index"] .buttons {
    display: flex; /* Ser till att knapparna ligger bredvid varandra */
    gap: 20px; /* Avstånd mellan knappar */
}

html[data-page="index"] #logo-title {
    display: flex;
    align-items: center; /* Justerar logga och titel vertikalt */
    gap: 10px; /* Avstånd mellan logga och titel */
    white-space: nowrap;
}

/* Inloggningsknappar */
html[data-page="index"] #signin, html[data-page="index"] #login {
    background-color: #1E2A38; /* Mörkare bakgrund som passar sidans tema men ändå kontrasterar */
    color: #FFFFFF; /* Vit text för tydlig kontrast */
    padding: 10px 20px;
    border: 2px solid #FFEB3B; /* Gul kant för synlighet */
    border-radius: 8px; /* Mjuka knappar */
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0px 6px 15px rgba(255, 235, 59, 0.4); /* Mjuk glöd med gul färg */
    width: 120px;
    height: 40px;
}

/* Hover-effekt */
html[data-page="index"] #signin:hover, html[data-page="index"] #login:hover {
    background-color: #293845; /* Lite ljusare vid hover */
    border-color: #FFEB3B; /* Behåller gul kant */
    box-shadow: 0px 8px 20px rgba(255, 235, 59, 0.6); /* Intensivare skugga vid hover */
    transform: translateY(-3px); /* Lyft-effekt */
}

/* Aktiv effekt */
html[data-page="index"] #signin:active, html[data-page="index"] #login:active {
    background-color: #17202B; /* Mörkare vid klick */
    transform: translateY(1px);
    box-shadow: 0px 4px 12px rgba(255, 235, 59, 0.2); /* Mindre intensiv skugga vid klick */
}

/* Cirkeleffekt */
html[data-page="index"] #circle-container {
    position: relative;
    display: inline-block;
}

html[data-page="index"] #hover-circle {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrera cirkeln */
    height: 60px; /* Cirkelhöjd */
    width: 55px;  /* Cirkelbredd */
    border-radius: 50%; /* Gör det till en cirkel */
    border-color: rgba(0, 255, 255, 0.8);
    border-width: 5px;
    border-style: solid; /* Säkerställer att kanten visas */
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.6), 
                0 0 45px rgba(0, 255, 255, 0.5), 
                0 0 60px rgba(0, 255, 255, 0.4);
    opacity: 0; /* Startar osynlig */
    z-index: -1; /* Säkerställer att den ligger bakom loggan */
    transition: opacity 0.5s ease, box-shadow 0.5s ease; /* Övergång för synlighet och skugga */
}


/* Hover effect for the circle inside #circle-container */
html[data-page="index"] #circle-container:hover #hover-circle {
    opacity: 1; /* Make the circle visible on hover */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 
                0 0 30px rgba(0, 255, 255, 0.7), 
                0 0 45px rgba(0, 255, 255, 0.6); /* Intense glow effect */
}

/* Neon pulse animation for glowing effect */
@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), 
                    0 0 30px rgba(0, 255, 255, 0.5), 
                    0 0 45px rgba(0, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.8), 
                    0 0 60px rgba(0, 255, 255, 0.6), 
                    0 0 90px rgba(0, 255, 255, 0.5);
    }
}

/* Flex container for logo and title */
html[data-page="index"] #logo-title {
    display: flex;
    align-items: center; /* Align logo and title vertically */
    gap: 10px; /* Space between logo and title */
}

/* Layout styling for the top container */
html[data-page="index"] #container1 {
    display: flex;
    justify-content: space-between; /* Space logo/title and buttons evenly */
    align-items: center; /* Center items vertically */
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

/* Centering middle content */
html[data-page="index"] #middle-content {
    flex: 1; /* Allow the title to take up available space */
    text-align: center; /* Center the title */
}

/* Styling for the title inside container1 */
html[data-page="index"] #container1 h1 {
    font-size: 2.5em;
    color: #FFD700; /* Gold color */
    text-shadow: 3px 3px 10px rgba(255, 215, 0, 0.7), 
                 2px 2px 5px rgba(0, 0, 0, 0.7);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
    display: inline-block; /* Keeps text centered */
}

/* Adjusting margin for #a-tag4 */
html[data-page="index"] #a-tag4 {
    margin-right: 300px;
}

/* Main container for the 16:9 rectangle layout */
html[data-page="index"] .rectangle-container {
    position: relative;
    width: 1530px;
    left: -20px;
    top: 50px;
    height: 640px;
    margin: 20px auto; /* Center it */
    display: grid;
    grid-template-columns: 2fr 1fr 2fr; /* Adjusted column layout */
    grid-template-rows: 1fr 2fr 1fr;    /* Adjusted row layout */
    gap: 20px;
    animation: fadeIn 1s ease-in forwards;
}

/* Default styling for rectangles */
html[data-page="index"] .rectangle-container div {
    background-color: #1C2026; /* Default background */
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); /* Soft glow */
}

/* Specific styling for each rectangle */
html[data-page="index"] .rectangle-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    margin-left: 10px;
    background-color: #00B9E8;
    animation: fadeIn 1s ease-in forwards;
    border-radius: 20px;
}

html[data-page="index"] .rectangle-2 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    background-color: #0072B5;
    animation: fadeIn 1s ease-in forwards;
    margin-right: 5px;
    border-radius: 20px;
}

html[data-page="index"] .rectangle-3 {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    background-color: #003F5C;
    animation: fadeIn 1s ease-in forwards;
    border-radius: 20px;
}

html[data-page="index"] .rectangle-4 {
    margin-left: 10px;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    background-color: #2F4F4F;
    animation: fadeIn 1s ease-in forwards;
    border-radius: 20px;
}

html[data-page="index"] .rectangle-5 {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
    background-color: #17A2B8;
    animation: fadeIn 1s ease-in forwards;
    margin-right: 5px;
    border-radius: 20px;
}

html[data-page="index"] .rectangle-6 {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    background-color: #0A9396;
    animation: fadeIn 1s ease-in forwards;
    border-radius: 20px;
}

/* Fade-in animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Inner elements for rectangle-1 */
html[data-page="index"] .rectangle-1 div {
    border-radius: 10px;
    background-color: rgb(255,140,0); /* Orange */
    width: 97%;
    margin-left: 1%;
    height: 9%;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 10px;
}


/* Justerar positionering för fetstilta textelement */
html[data-page="index"] b {
    position: absolute;
    margin-left: -250px;
    margin-top: 7px;
}

/* Sidfotens stil */
html[data-page="index"] footer {
    background-color: #0D1117; /* Mörk bakgrundsfärg */
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    margin-top: 190px; /* Lägger till mellanrum före sidfoten */
}

/* Styling för kategori-rutor */
html[data-page="index"] #category-1 {
    background-color: rgb(27,40,59); /* Mörkblå bakgrund */
    width: 277.5px;
    height: 115px;
    box-shadow: none;
    margin-top: 15px; /* Avstånd mellan rutorna */
}

html[data-page="index"] #category-2 {
    background-color: rgb(27,40,59);
    margin-left: 300px; /* Flyttar den åt höger */
    width: 277.5px;
    height: 115px;
    margin-top: -115px; /* Justerar höjden i linje med category-1 */
    box-shadow: none;
}

html[data-page="index"] #category-3 {
    background-color: rgb(27,40,59);
    width: 277.5px;
    height: 115px;
    box-shadow: none;
    margin-top: 15px;
}

html[data-page="index"] #category-4 {
    background-color: rgb(27,40,59);
    margin-left: 300px;
    width: 277.5px;
    height: 115px;
    margin-top: -115px; /* Justerar höjden i linje med category-3 */
    box-shadow: none;
}

html[data-page="index"] #category-5 {
    background-color: rgb(27,40,59);
    width: 277.5px;
    height: 115px;
    box-shadow: none;
    margin-top: 15px;
}

html[data-page="index"] #category-6 {
    background-color: rgb(27,40,59);
    margin-left: 300px;
    width: 277.5px;
    height: 115px;
    margin-top: -115px; /* Justerar höjden i linje med category-5 */
    box-shadow: none;
}

/* Hover-effekt för kategori-rutor */
html[data-page="index"] #category-1:hover, 
html[data-page="index"] #category-2:hover, 
html[data-page="index"] #category-3:hover, 
html[data-page="index"] #category-4:hover, 
html[data-page="index"] #category-5:hover, 
html[data-page="index"] #category-6:hover {
    transform: scale(1.02) translateY(-3px); /* Lätt förstoring och lyft */
    box-shadow: 
        0px 0px 10px rgba(0, 150, 255, 0.6),  /* Ljus yttre glöd */
        0px 0px 20px rgba(0, 80, 130, 0.5),  /* Sekundär yttre glöd */
        0px 0px 30px rgba(0, 50, 100, 0.4);  /* Djup yttre glöd */
    border: 2px solid rgba(0, 150, 255, 0.8); /* Neonram */
    background: linear-gradient(145deg, rgba(0, 120, 200, 0.4), rgba(0, 80, 130, 0.4)); /* Subtil färgskiftning */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; /* Smidiga övergångar */
    color: rgba(0, 150, 255, 0.6); /* Ändrar textfärg vid hover */
}

/* Hover-effekt för rektangel-element */
html[data-page="index"] .rectangle-1:hover, 
html[data-page="index"] .rectangle-2:hover, 
html[data-page="index"] .rectangle-3:hover, 
html[data-page="index"] .rectangle-4:hover, 
html[data-page="index"] .rectangle-5:hover, 
html[data-page="index"] .rectangle-6:hover {
    transform: scale(1.02) translateY(-3px) !important; /* Lyft rektangeln något */
    box-shadow: 
        0px 0px 10px rgba(0, 150, 255, 0.6),  
        0px 0px 20px rgba(0, 80, 130, 0.5),  
        0px 0px 30px rgba(0, 50, 100, 0.4); 
    border: 2px solid rgba(0, 150, 255, 0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer; /* Ändrar muspekaren vid hover */
}

/* Bild inuti category-1 */
html[data-page="index"] #category-1 img {
    width: 80px;
    height: 80px;
    margin-top: 15px;
    margin-left: 25px; /* Justerar bildens placering i rutan */
}

/* Fet text inuti category-1 */
html[data-page="index"] #category-1 b {
    margin-top: 20px;
    font-size: 30px;
    margin-left: 50px;
}

/* Pil-element inuti category-1 */
html[data-page="index"] #arrow {
    width: 35px;
    height: 35px;
    background-color: rgb(160, 160, 255); /* Ljuslila bakgrund */
    border-top-right-radius: 2px;
    border-bottom-left-radius: 2px;
    margin-top: -23px;
    margin-left: 240px;
    color: black;
    text-align: center;
    opacity: 0; /* Dölj pilen från början */
    position: absolute; /* Positionerar relativt till behållaren */
    transition: opacity 0.5s ease; /* Smidig övergång för fade-effekt */
}

/* Hover-effekt för pilen i category-1 */
html[data-page="index"] #category-1:hover #arrow {
    opacity: 1; /* Visar pilen vid hover */
}

/* Textfärg-övergång inuti category-1 */
html[data-page="index"] #category-1 {
    color: white; /* Standard textfärg */
    transition: color 0.5s ease; /* Smidig färgövergång */
}

/* Ändrar textfärg vid hover över category-1 */
html[data-page="index"] #category-1:hover {
    color: rgb(0, 150, 255); /* Ny textfärg vid hover */
}

/* Styling för knappen "lägg till valuta" */
html[data-page="index"] #add-currency {
    background-color: #007bff; /* Blå knapp */
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 8px;
}


/* Stil för valuta-belopp */
html[data-page="index"] #currency-amount {
    font-size: 18px;
    margin-right: 8px;
}

/* Grundläggande stil för HTML och body */
html[data-page="index"] html, html[data-page="index"] body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* Standardtypsnitt */
    background-color: #131A20; /* Mörk bakgrund */
    color: white; /* Vit text */
    height: 100%;
}

/* Stil för valutafältet */
html[data-page="index"] #currency-bar {
    display: flex;
    align-items: center;
    background-color: #333; /* Mörk bakgrundsfärg */
    color: white;
    padding: 5px 10px;
    border-radius: 5px; /* Rundade kanter */
    width: 100px;
    position: relative;
}

/* Döljer standard-scrollbar i olika webbläsare */
html[data-page="index"] * {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* Stil för valutaikon */
html[data-page="index"] #currency-icon {
    position: absolute;
    height: 35px;
    right: 0px;
}

/* Döljer scrollbaren i WebKit-baserade webbläsare */
html[data-page="index"] *::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Header-sektionen */
html[data-page="index"] #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between; /* Fördelar element jämnt */
    align-items: center;
    padding: 0 20px;
    height: 80px;
    background-color: #0D1117; /* Mörk bakgrund */
    z-index: 1000; /* Ser till att headern alltid är överst */
    animation: fadeIn 1s ease-in forwards;
}

/* Stil för logotypen */
html[data-page="index"] #logo {
    cursor: pointer;
    height: 48px; /* Höjd på cirkeln */
    width: 48px;  /* Bredd på cirkeln */
    margin-top: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smidiga övergångar */
}

/* Hover-effekt på logotypen */
html[data-page="index"] #logo:hover {
    transform: scale(1.1) translateY(-3px); /* Liten förstoring och lyft */
}

/* Knapp för att visa/dölja sidomenyn */
html[data-page="index"] #sidebar-toggle {
    position: fixed;
    top: 100px; /* Justerar så den är precis under headern */
    left: 10px;
    font-size: 30px;
    cursor: pointer;
    background-color: black;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 999; /* Se till att den ligger över andra element */
    transition: left 0.5s;
    animation: fadeIn 1s ease-in forwards;
}

/* Sidomenyn */
html[data-page="index"] .sidebar {
    position: fixed;
    top: 81px; /* Justeras för att ligga under headern */
    left: 0;
    width: 0; /* Initialt osynlig */
    height: calc(100% - 80px); /* Anpassar höjden till skärmhöjden minus headern */
    background-color: black;
    color: white;
    overflow-x: hidden;
    transition: width 0.5s;
    padding-top: 20px;
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 998; /* Ligger under sidomeny-knappen */
    animation: fadeIn 1s ease-in forwards;
}

/* Profilsektion i sidomenyn */
html[data-page="index"] .profile-section {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid white; /* Tunn vit linje */
}

/* Stil för användarnamn */
html[data-page="index"] .username {
    display: flex;
    align-items: flex-start; /* Justerar textinnehållet till toppen */
    color: white;
}

/* Stil för profilbilden */
html[data-page="index"] .profile-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%; /* Rundad profilbild */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
}

/* Knappcontainer */
html[data-page="index"] .buttons {
    display: flex; /* Lägger knapparna på samma rad */
    gap: 20px; /* Mellanrum mellan knapparna */
}

/* Stil för inloggnings- och registreringsknappar */
html[data-page="index"] #signin, html[data-page="index"] #login {
    background-color: #1E2A38; /* Mörk bakgrund som matchar sidan */
    color: #FFFFFF; /* Vit text */
    padding: 10px 20px;
    border: 2px solid #FFEB3B; /* Gul kant för synlighet */
    border-radius: 8px; /* Rundade hörn */
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0px 6px 15px rgba(255, 235, 59, 0.4); /* Mjuk gul skuggning */
    width: 120px;
    height: 40px;
}

/* Hover Effekter */
html[data-page="index"] #signin:hover, html[data-page="index"] #login:hover {
    background-color: #293845; /* Bakgrundsfärg blir något ljusare vid hover */
    border-color: #FFEB3B; /* Gul färg på kanten bibehålls */
    box-shadow: 0px 8px 20px rgba(255, 235, 59, 0.6); /* Mer intensiv skugga vid hover */
    transform: translateY(-3px); /* Lätt upplyft effekt vid hover */
}

/* Aktiv Effekt */
html[data-page="index"] #signin:active, html[data-page="index"] #login:active {
    background-color: #17202B; /* Mörkare bakgrundsfärg vid klick */
    transform: translateY(1px); /* Flyttar knappen neråt vid klick */
    box-shadow: 0px 4px 12px rgba(255, 235, 59, 0.2); /* Mindre intensiv skugga vid klick */
}

/* Cirkeln i container */
html[data-page="index"] #circle-container {
    position: relative;
    display: inline-block;
}

html[data-page="index"] #hover-circle {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar cirkeln */
    height: 60px; /* Cirkeln höjd */
    width: 55px; /* Cirkeln bredd */
    border-radius: 50%; /* Gör den till en cirkel */
    border-color: rgba(0, 255, 255, 0.8); /* Cyan kantfärg */
    border-width: 5px;
    border-style: solid; /* Säkerställer att kanten syns */
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.6),
                0 0 45px rgba(0, 255, 255, 0.5),
                0 0 60px rgba(0, 255, 255, 0.4); /* Neon-liknande glöd */
    opacity: 0; /* Börjar osynlig */
    z-index: -1; /* Säkerställer att det ligger bakom logotypen */
    transition: opacity 0.5s ease, box-shadow 0.5s ease; /* Animering för opacitet och skugga */
}

html[data-page="index"] #circle-container:hover #hover-circle {
    opacity: 1; /* Gör cirkeln synlig vid hover */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8),
                0 0 30px rgba(0, 255, 255, 0.7),
                0 0 45px rgba(0, 255, 255, 0.6); /* Intensiv glöd vid hover */
}

/* Neonpuls-animering */
@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.5), 0 0 45px rgba(0, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.8), 0 0 60px rgba(0, 255, 255, 0.6), 0 0 90px rgba(0, 255, 255, 0.5);
    }
}

/* Logotyp och titel */
html[data-page="index"] #logo-title {
    display: flex;
    align-items: center; /* Vertikal justering av logotyp och titel */
    gap: 10px; /* Mellanrum mellan logotyp och titel */
}

/* Container 1 */
html[data-page="index"] #container1 {
    display: flex;
    justify-content: space-between; /* Fördelar logotyp/titel och knappar jämnt */
    align-items: center; /* Centrerar objekten vertikalt */
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

html[data-page="index"] #container1 h1 {
    font-size: 2.5em;
    color: #FFD700; /* Gyllene färg för texten */
    text-shadow: 3px 3px 10px rgba(255, 215, 0, 0.7), 2px 2px 5px rgba(0, 0, 0, 0.7); /* Skugga för att ge texten mer djup */
    letter-spacing: 3px; /* Ökar avståndet mellan bokstäverna */
    text-transform: uppercase; /* Gör texten versaler */
    margin: 0;
    display: inline-block; /* Håller texten centrerad */
}

/* Spelavsnitt */
html[data-page="index"] .game-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 100px;
    padding: 40px 20px;
}

/* Spel-container */
html[data-page="index"] .game-container {
    background: linear-gradient(135deg, #0D1117 0%, #1E2A38 100%); /* Mörkare gradient som matchar bakgrunden */
    color: #FFFFFF;
    border-radius: 15px;
    padding: 20px;
    width: 350px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.3); /* Justerad skugga för neon-effekt */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 50px;
}

html[data-page="index"] .game-container:hover {
    transform: scale(1.05); /* Förstorar spelcontainern vid hover */
    box-shadow: 0 15px 25px rgba(0, 255, 255, 0.4); /* Cyan skugga vid hover */
}

html[data-page="index"] .game-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

html[data-page="index"] .game-container h2 {
    font-size: 1.5em;
    margin: 15px 0;
    font-weight: 700;
    color: #FFEB3B; /* Gul färg för rubriken */
    text-shadow: 1px 2px 4px rgba(255, 215, 0, 0.5);
}

html[data-page="index"] .game-container p {
    font-size: 1em;
    margin: 10px 0;
    color: #BBB; /* Mjuk vit färg för texten */
    line-height: 1.4;
}

html[data-page="index"] .game-container button {
    background-color: #00FFFF; /* Cyan bakgrundsfärg för knappen */
    color: black;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0px 6px 15px rgba(0, 255, 255, 0.4); /* Cyan glöd runt knappen */
}

/* Hover-effekt för knappar i spelcontainern */
html[data-page="index"] .game-container html[data-page="index"] button:hover {
    background-color: #00BFBF; /* Mörkare cyan vid hover */
    box-shadow: 0px 8px 20px rgba(0, 255, 255, 0.6); /* Cyan skugga vid hover */
}

/* Knapp för att lägga till valuta (rund blå knapp) */
html[data-page="index"] #add-currency {
    background-color: #007bff; /* Blå knapp */
    color: white;
    border: none;
    border-radius: 50%; /* Rund form */
    width: 25px;
    height: 25px;
    font-size: 16px;
    cursor: pointer; /* Gör knappen klickbar */
    margin-right: 8px; /* Mellanrum till höger om knappen */
}

/* Visning av valutaantal */
html[data-page="index"] #currency-amount {
    font-size: 18px;
    margin-right: 8px; /* Mellanrum till höger */
}

/* Overlay-styling (bakgrund som täcker hela sidan) */
html[data-page="index"] #overlay {
    display: none; /* Startar som osynlig */
    position: fixed; /* Fixerad position */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Svart genomskinlig bakgrund */
    z-index: 999; /* Står över andra element */
}

/* Modal (pop-up) styling */
html[data-page="index"] #modal {
    position: fixed;
    top: 50%; /* Centrerar modalen vertikalt */
    left: 50%; /* Centrerar modalen horisontellt */
    transform: translate(-50%, -50%); /* Justerar för att få exakt mittpunkt */
    background: white; /* Vit bakgrund */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Skugga för att ge djup */
    border-radius: 8px;
    z-index: 1000; /* Står över overlay */
    overflow: hidden; /* Förhindrar att innehåll rinner över */
    width: 90vw; /* 90% av viewport-bredden */
    height: 90vh; /* 90% av viewport-höjden */
    display: flex;
    flex-direction: column; /* Ställer upp innehållet vertikalt */
}

/* Knapp för att öppna modal */
html[data-page="index"] .open-modal-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF; /* Blå bakgrund */
    color: white;
    border: none;
    border-radius: 5px; /* Rundade hörn */
    cursor: pointer; /* Klickbar knapp */
}

/* Existerande animation för att fade:a in overlay */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Animation för att fade:a ut overlay */
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Animation för att öppna modal med storleksändring */
@keyframes modalResizeIn {
    0% { transform: translate(-50%, -50%) scale(0.5); } /* Börjar i liten skala */
    100% { transform: translate(-50%, -50%) scale(1); } /* Växer till normal storlek */
}

/* Animation för att stänga modal med storleksändring */
@keyframes modalResizeOut {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(0.8); }
}

/* Applicering av initiala stilar */
html[data-page="index"] #overlay {
    display: none; /* Startar osynlig */
    animation: fadeIn 1.5s ease-out forwards; /* Fade-in animation */
}

html[data-page="index"] #modal {
    animation: modalResizeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1.5) forwards; /* Växande animation för modal */
    margin-top: 30px;
}

/* Modal rubrik */
html[data-page="index"] #modal h2 {
    color: black; /* Svart färg på rubriken */
}

/* Modal text */
html[data-page="index"] #modal p {
    color: black; /* Svart färg på texten */
}

/* Fullskärm-knapp i modal */
html[data-page="index"] #full-screen-button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 3px;
    font-size: 14px;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Innehåll i modal */
html[data-page="index"] #modal-content {
    flex: 1;
    display: flex;
    justify-content: center; /* Centrerar innehållet horisontellt */
    align-items: center; /* Centrerar innehållet vertikalt */
}

/* Fullskärm-läge */
html[data-page="index"] .full-screen-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Full höjd */
    width: 100vw; /* Full bredd */
    margin: 0;
    border-radius: 0;
}

/* Knapp i form av en rektangel */
html[data-page="index"] #rectbutton {
    fill: white;
    border: 2px solid black;
}

/* Iframe för att visa spel eller innehåll */
html[data-page="index"] #game-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none; /* Ingen ram runt iframe */
    display: block; /* Gör iframe till ett blockelement */
}

/* Fullskärm för spel-iframe */
html[data-page="index"] .full-screen-mode #game-iframe {
    width: 100vw; /* Full bredd av viewporten */
    height: 100vh; /* Full höjd av viewporten */
}

/* Knapp som är fixerad på skärmen */
html[data-page="index"] #indexknapp {
    position: fixed;
    padding: 15px 30px;
    background-color: #4CAF50; /* Grön bakgrund */
    color: white; /* Vit text */
    border: none; /* Ingen standardkant */
    border-radius: 8px; /* Rundade hörn */
    cursor: pointer; /* Visar pekare vid hover */
    font-size: 16px; /* Ökad teckenstorlek */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtil skugga */
    top: 50px; /* Position från toppen */
}

/* Navigeringsmeny */
html[data-page="index"] nav ul {
    list-style: none; /* Tar bort punkter från listan */
    display: flex; /* Gör listan horisontell */
    gap: 15px; /* Mellanrum mellan objekten */
}

html[data-page="index"] nav ul li a {
    color: white; /* Vit textfärg */
    text-decoration: none; /* Ingen understrykning */
    font-size: 18px; /* Textstorlek */
}

/* Dölj scrollfältet */
html[data-page="index"] ::-webkit-scrollbar {
    display: none; /* Döljer scrollfältet */
}

/* Knapp för att öppna sidebar */
html[data-page="index"] #sidebar-toggle {
    position: fixed;
    top: 90px;
    left: 10px;
    font-size: 30px; /* Stor text för knappen */
    cursor: pointer; /* Visar pekare vid hover */
    background-color: black; /* Svart bakgrund */
    color: white; /* Vit text */
    padding: 10px;
    border-radius: 5px; /* Rundade hörn */
    z-index: 1000; /* Håller knappen ovanpå andra element */
    transition: left 0.5s; /* Animation vid positionering */
}

/* Sidebar som kan öppnas */
html[data-page="index"] .sidebar {
    height: 100%;
    width: 0; /* Startar med bredd 0 */
    position: fixed;
    top: 80px;
    left: 0;
    background-color: black;
    color: white;
    overflow-x: hidden; /* Döljer horisontellt innehåll */
    transition: width 0.5s; /* Animation vid öppning/stängning */
    padding-top: 20px;
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5); /* Skugga för djup */
}

/* Sidebar öppnas med bredd 250px */
html[data-page="index"] .sidebar.open {
    width: 250px;
}

/* Profilsektion */
html[data-page="index"] .profile-section {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid white;
}

/* Levelsektion */
html[data-page="index"] .level-section {
    padding: 20px;
    text-align: center;
}

/* Text för nivå */
html[data-page="index"] .level-section h4 {
    margin: 0;
    color: #ffcc00; /* Gul färg */
}

/* Erfarenhetsbar */
html[data-page="index"] .exp-bar {
    width: 100%;
    height: 15px;
    background-color: #333; /* Mörk bakgrund */
    border-radius: 10px; /* Rundade hörn */
    margin: 10px 0;
}

/* Progressbar för erfarenhet */
html[data-page="index"] .exp-progress {
    height: 100%;
    background-color: #ffcc00; /* Gul färg för progression */
    border-radius: 10px; /* Rundade hörn */
}

/* Större erfarenhetsbar */
html[data-page="index"] .exp-bar2 {
    width: 350%;
    height: 15px;
    background-color: #333;
    border-radius: 10px;
    margin: 10px auto; /* Centrerar elementet horisontellt */
    transform: translateX(-37%); /* Justerar position */
}

/* Progressbar för den större erfarenhetsbaren */
html[data-page="index"] .exp-progress2 {
    height: 100%;
    background-color: #ffcc00; /* Gul färg */
    border-radius: 10px;
}

/* Text för nivå */
html[data-page="index"] .level-section p {
    margin: 0;
    color: white; /* Vit text */
}

/* Länk till a-tag1 */
html[data-page="index"] #a-tag1 {
    color: white; /* Vit text */
    text-decoration: none; /* Ingen understrykning */
    margin-left: 90px; /* Mellanrum till vänster */
}

/* Position för sökprofil-knapp */
html[data-page="index"] .search-profile-btn-container {
    position: fixed;
    top: 20px;
    right: 150px;
    z-index: 1000; /* Håller knappen ovanpå andra element */
}

/* Styling för sökresultat */
html[data-page="index"] #searchResults {
    margin-top: 10px; /* Mellanrum ovanför */
}

/* Styling för sökprofilknappen */
html[data-page="index"] #searchProfileBtn {
    background-color: #1E2A38; /* Mörkare bakgrund som smälter in på sidan men kontrasterar tillräckligt */
    color: #FFFFFF; /* Vit text för stark kontrast */
    padding: 10px 20px;
    border: 2px solid #FFEB3B; /* Gul kant för att öka synligheten */
    border-radius: 8px; /* Mjukare knappform */
    cursor: pointer;
    font-size: 0.7em; /* Mindre textstorlek */
    font-weight: bold; /* Fet text */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0px 6px 15px rgba(255, 235, 59, 0.4); /* Mjuk glöd med gult */
    width: 120px;
    height: 40px;
}

/* Hover-effekt på knappen */
html[data-page="index"] #searchProfileBtn:hover {
    background-color: #00ccff; /* Ljusa upp knappen till blått vid hover */
    transform: translateY(-5px); /* Flytta knappen upp lite vid hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 20px #00ffea, 0 0 35px #00ffea; /* Förstärk glöden vid hover */
}

/* Aktiv effekt på knappen */
html[data-page="index"] #searchProfileBtn:active {
    transform: translateY(0); /* Återställ position när den trycks ner */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 15px #00ffea, 0 0 25px #00ffea; /* Minska glöden när den är nedtryckt */
}

/* Vit fyrkant som är dold från början */
html[data-page="index"] .profile-square {
    width: 300px;
    height: 270px;
    background-color: white;
    position: fixed;
    top: 70px; /* Under knappen */
    right: 9px;
    display: none; /* Initialt dold */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    z-index: 999; /* Hög z-index för att ligga över andra element */
    opacity: 0; /* Börjar som osynlig */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smidig övergång för opacity och rörelse */
}

/* Synligt tillstånd för fyrkanten */
html[data-page="index"] .profile-square.active {
    display: block;
    opacity: 1;
    transform: translateY(10px); /* Liten rörelseeffekt */
}

/* Sökbehållare */
html[data-page="index"] .search-container {
    position: relative;
    width: 90%;
    left: 15px;
}

/* Sökinput-rutan */
html[data-page="index"] #searchInput {
    width: 80%;
    padding: 10px 40px 10px 10px; /* Utrymme för sökikonen */
    font-size: 14px;
    border: 2px solid #1e90ff; /* Kantfärg som matchar knappen */
    border-radius: 5px;
    outline: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtil skugga */
    transition: border-color 0.3s ease; /* Smidig övergång för kantfärg */
    margin-top: 20px;
}

/* Ändra kantfärg vid fokus */
html[data-page="index"] #searchInput:focus {
    border-color: #00ccff;
}

/* Användarnamn container */
html[data-page="index"] .username {
    display: flex;
    align-items: flex-start; /* Justera till början */
}

/* Profilbild som cirkel */
html[data-page="index"] .profile-circle {
    width: 68px; /* Justera storlek vid behov */
    height: 68px; /* Justera storlek vid behov */
    border-radius: 50%; /* Gör bilden cirkulär */
    background-position: center;
    background-size: cover; /* Ser till att bilden täcker hela cirkeln */
    background-repeat: no-repeat;
    cursor: pointer;
    margin-top: -27px;
    margin-right: 10px;
    margin-left: -10px;
}

/* Användarnamnstext */
html[data-page="index"] .username h3 {
    font-size: 1.5em; /* Större textstorlek för bättre synlighet */
    font-family: Arial, sans-serif; /* Modern fontfamilj */
    margin-top: -10px; /* Flytta upp användarnamnet */
}

/* Resultatlista för användare */
html[data-page="index"] .result-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    margin: 4px 0;
    width: 90%;
    margin-left: 5%;
    padding: 4px 0;
    transition: background-color 0.3s ease, font-size 0.3s ease;
}

/* Hover-effekt på resultatraden */
html[data-page="index"] .result-item:hover {
    font-size: 1.05em;
    background-color: #f9f9f9;
    border-radius: 8px;
    cursor: pointer;
}

/* Profilbild i resultatlistan */
html[data-page="index"] .profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid black;
    margin-right: 8px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Apply hover effect on profile image when result item is hovered */
html[data-page="index"] .result-item:hover html[data-page="index"] .profile-image {
    transform: scale(1.1);
    border-color: #007bff;
}

/* Apply hover effect on username when result item is hovered */
html[data-page="index"] .result-item:hover html[data-page="index"] .username {
    color: #007bff; /* Ljusblå färg på användarnamnet vid hover */
}

/* Resultatrutor */
html[data-page="index"] .search-results {
    max-height: 180px;
    overflow-y: auto;
    background-color: white;
    padding: 8px;
    border-radius: 8px;
}

/* Styling för stäng-knappen */
html[data-page="index"] .close-button {
    background-color: transparent; /* Transparent bakgrund */
    border: none; /* Ingen kant */
    font-size: 20px; /* Storlek på texten */
    font-weight: bold; /* Fet text */
    cursor: pointer; /* Gör knappen klickbar */
    position: absolute;
    top: 10px; /* Placera 10px från toppen */
    right: 10px; /* Placera 10px från högerkanten */
}

/* Cirkelformad profilbild */
html[data-page="index"] .circle-profile {
    width: 80px; /* Bredd på bilden */
    height: 80px; /* Höjd på bilden */
    border-radius: 50%; /* Cirkelformad bild */
    border: 2px solid black; /* Svart kant runt bilden */
    margin-left: 40%; /* Centrerar bilden horisontellt */
}

/* Behållare för vald profil */
html[data-page="index"] .selected-profile-container {
    display: flex;
    flex-direction: column; /* Stapla elementen vertikalt */
    align-items: center; /* Centrerar elementen horisontellt */
    text-align: center; /* Centrerar texten */
}

/* Cirkelformad bild för vald profil */
html[data-page="index"] .selected-profile-circle {
    width: 80px; /* Bredd på bilden */
    height: 80px; /* Höjd på bilden */
    border-radius: 50%; /* Cirkelformad bild */
    transition: transform 0.3s ease-in, box-shadow 0.3s ease-in, translate 0.3s ease-in; /* Smidig övergång */
}

/* Hover-effekt på vald profilbild */
html[data-page="index"] .selected-profile-circle:hover {
    transform: scale(1.05); /* Gör bilden lite större vid hover */
    transform: translateY(-3px); /* Flytta upp bilden lite vid hover */
    box-shadow: 0px 0px 10px #ffcc00; /* Lägg till en gul glöd vid hover */
    border-radius: 50%; /* Bibehåll cirkulär form */
}

/* Användarnamn för vald profil */
html[data-page="index"] .username2 {
    margin-top: 10px; /* Avstånd mellan bild och text */
    font-size: 20px; /* Textstorlek */
    font-family: Arial, Helvetica, sans-serif; /* Fontfamilj */
    font-weight: bold; /* Fet text */
    text-transform: capitalize; /* Första bokstaven stor */
    color: black; /* Textfärg */
}

/* Sektion för nivå och andra detaljer */
html[data-page="index"] .level-section2 p {
    color: black; /* Textfärg */
    position: absolute; /* Absolut positionering */
    top: 0; /* Placera på toppen av behållaren */
    left: 50%; /* Centrera horisontellt */
    transform: translateX(-50%); /* Centrera exakt */
    z-index: 10; /* Högre z-index för att ligga över andra element */
    margin-top: 190px; /* Placera texten längre ner */
}

/* Nivåsektionens rubrik */
html[data-page="index"] .level-section2 h4 {
    color: #ffcc00; /* Gul textfärg */
    margin-bottom: 0px; /* Inget avstånd under */
    margin-top: 10px; /* Lite avstånd över */
}

/* Meddelandeknapp */
html[data-page="index"] .messagebutton {
    position: absolute;
    width: 120px; /* Knappens bredd */
    height: 43px; /* Knappens höjd */
    background-color: #007bff; /* Blå bakgrund */
    color: white; /* Vit text */
    top: 215px; /* Placera den 215px från toppen */
    left: 20px; /* Placera den 20px från vänsterkanten */
    border: none; /* Ingen kant */
    border-radius: 5px; /* Rundade hörn */
    transition: background-color 0.3s, transform 0.3s; /* Smidiga övergångar */
}

/* Hover-effekt på meddelandeknappen */
html[data-page="index"] .messagebutton:hover {
    background-color: #0056b3; /* Mörkare blå vid hover */
    transform: translateY(-3px) scale(1.03); /* Förbättrad transform vid hover */
}

/* Inputfält för att skriva meddelanden */
html[data-page="index"] .message-input {
    width: calc(100% - 90px); /* Ge utrymme för knappen */
    padding: 10px;
    border-radius: 20px; /* Rundade hörn */
    border: 1px solid #dcdcdc; /* Grå kant */
    font-size: 14px; /* Textstorlek */
    outline: none; /* Ta bort fokusram */
    box-sizing: border-box;
    transition: all 0.3s; /* Smidiga övergångar */
}

/* Fokus-stil på inputfältet */
html[data-page="index"] .message-input:focus {
    border-color: #8ab4f8; /* Ljusblå kant vid fokus */
    box-shadow: 0 0 5px rgba(138, 180, 248, 0.5); /* Ljusblå skugga vid fokus */
}

/* Skicka-knapp */
html[data-page="index"] .send-button {
    margin-top: 180px;
    padding: 10px 20px;
    background-color: #4CAF50; /* Grön bakgrund */
    color: #fff; /* Vit text */
    border: none; /* Ingen kant */
    border-radius: 20px; /* Rundade hörn */
    cursor: pointer; /* Pekar-handskursor */
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smidiga övergångar */
}

/* Hover och aktiv effekt på skicka-knappen */
html[data-page="index"] .send-button:hover {
    background-color: #45A049; /* Mörkare grön vid hover */
}

html[data-page="index"] .send-button:active {
    transform: scale(0.98); /* Minska storleken lite vid klick */
}

/* Stäng-knappens styling (dubblett från tidigare) */
html[data-page="index"] .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent; /* Transparent bakgrund */
    border: none; /* Ingen kant */
    font-size: 18px; /* Textstorlek */
    color: #888; /* Ljusgrå textfärg */
    cursor: pointer; /* Pekar-handskursor */
    transition: color 0.2s ease; /* Smidig övergång för textfärgen */
}

/* Hover-effekt för stäng-knappen */
html[data-page="index"] .close-button:hover {
    color: #333; /* Mörkare textfärg vid hover */
}

/*login.php*/

/* Allmänna återställningar */
html[data-page="login"] body {
    font-family: 'Arial', sans-serif;
    background-color: #131A20; /* Matchar bakgrunden med hemsida.php */
    color: white;
    margin: 0;
    padding: 0;
    text-align: center;
    background-size: cover;
    padding-top: 100px;
}

html[data-page="login"] #currency-icon {
    position: absolute;
    height: 35px;
    right: 0px;
}
    
/* Behållare för inloggnings- och registreringsknappar */
html[data-page="login"] #container1 {
    display: flex;
    justify-content: space-between; /* Fördelar logotypen/titeln och knapparna jämnt */
    align-items: center; /* Centrerar objekten vertikalt */
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

html[data-page="login"] .buttons {
    display: flex; /* Ser till att knapparna är bredvid varandra */
    gap: 20px; /* Avstånd mellan knapparna */
}

html[data-page="login"] #logo-title {
    display: flex;
    align-items: center; /* Centrerar logotypen och titeln vertikalt */
    gap: 10px; /* Avstånd mellan logotyp och titel */
}

html[data-page="login"] nav ul {
    list-style: none;
    display: flex;
    gap: 15px; /* Avstånd mellan listobjekten */
}

html[data-page="login"] nav ul li a {
    color: white; /* Vit textfärg för länkar */
    text-decoration: none; /* Ta bort understrykning */
    font-size: 18px;
}

html[data-page="login"] #currency-bar {
    display: flex;
    align-items: center;
    background-color: #333; /* Mörk bakgrund för baren */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    width: 100px;
    position: relative;
}

html[data-page="login"] #signin, html[data-page="login"] #hemsida {
    background-color: #1E2A38; /* Mörkare bakgrund som smälter in men kontrasterar */
    color: #FFFFFF; /* Vit text för stark kontrast */
    padding: 10px 20px;
    border: 2px solid #FFEB3B; /* Gul kant för synlighet */
    border-radius: 8px; /* Mjuka hörn */
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0px 6px 15px rgba(255, 235, 59, 0.4); /* Mjuk glöd med gult */
    width: 120px;
    height: 40px;
}

/* Hover-effekt på inloggningsknappar */
html[data-page="login"] #signin:hover, html[data-page="login"] #hemsida:hover {
    background-color: #293845; /* Lättare nyans vid hover */
    border-color: #FFEB3B; /* Behåll gul kant */
    box-shadow: 0px 8px 20px rgba(255, 235, 59, 0.6); /* Mer intensiv skugga vid hover */
    transform: translateY(-3px); /* Liten lyft-effekt */
}

/* Aktiv effekt på inloggningsknappar */
html[data-page="login"] #signin:active, html[data-page="login"] #hemsida:active {
    background-color: #17202B; /* Mörkare vid klick */
    transform: translateY(1px);
    box-shadow: 0px 4px 12px rgba(255, 235, 59, 0.2); /* Mindre intensiv skugga vid klick */
}

/* Formulär-styling */
html[data-page="login"] form {
    background: rgba(255, 255, 255, 0.1); /* Transparent form med lätt vit överlägg */
    display: inline-block;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); /* Skugga runt formuläret */
    margin: 20px auto;
    width: 300px;
}

/* Inmatningsfält (matchar spelets tema) */
html[data-page="login"] input[type="text"],
html[data-page="login"] input[type="password"] {
    width: 90%; /* Full bredd minus lite utrymme */
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px; /* Justerat för att matcha knapparnas stil */
    border: 2px solid #FFEB3B; /* Gula kanter för att matcha temat */
    font-size: 1.2em;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Lätt skugga */
    background-color: #1C2026; /* Mörk bakgrund för fälten */
    color: white;
    transition: all 0.3s ease;
}

/* Fokus-effekt för inmatningsfält */
html[data-page="login"] input[type="text"]:focus,
html[data-page="login"] input[type="password"]:focus {
    border-color: #00B9E8; /* Blå kant vid fokus */
    outline: none;
    box-shadow: 0px 4px 12px rgba(0, 185, 232, 0.4); /* Lätt blå skugga vid fokus */
}

/* Skicka-knappens stil */
html[data-page="login"] input[type="submit"] {
    background-color: #1E2A38; /* Mörkare bakgrund som smälter in men kontrasterar */
    color: #FFFFFF; /* Vit text för stark kontrast */
    padding: 10px 20px;
    border: 2px solid #FFEB3B; /* Gul kant för synlighet */
    border-radius: 8px; /* Mjuka hörn */
    cursor: pointer;
    font-size: 1.5em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0px 6px 15px rgba(255, 235, 59, 0.4); /* Mjuk glöd med gult */
    width: 303px;
    height: 50px;
    margin-top: 10px;
}


/* Hover- och aktiv-effekter för Skicka-knappen */
html[data-page="login"] input[type="submit"]:hover {
    background-color: #293845; /* Lättare nyans vid hover */
    border-color: #FFEB3B; /* Behåll den gula kanten */
    box-shadow: 0px 8px 20px rgba(255, 235, 59, 0.6); /* Mer intensiv skugga vid hover */
    transform: translateY(-3px); /* Liten lyft-effekt */
}

html[data-page="login"] input[type="submit"]:active {
    background-color: #17202B; /* Mörkare vid klick */
    transform: translateY(1px); 
    box-shadow: 0px 4px 12px rgba(255, 235, 59, 0.2); /* Mindre intensiv skugga vid klick */
}

/* Rubrikstil (matchar spelets tema) */
html[data-page="login"] h2 {
    font-size: 2em;
    color: #FFEB3B; /* Gul rubrik för att matcha spelets tema */
    text-shadow: 2px 2px #333;
    margin-top: 20px;
    text-shadow: 3px 3px 10px rgba(255, 215, 0, 0.7), 2px 2px 5px rgba(0, 0, 0, 0.7); /* Dubbla textskuggor */
}

html[data-page="login"] #text-register {
    font-size: 20px; /* Större textstorlek för registreringslänk */
}

html[data-page="login"] #register-button {
    color: lightblue; /* Ljusblå färg för registreringsknappen */
    text-shadow: none; /* Ingen textskugga */
}

/* Header-sektion */
html[data-page="login"] #header {
    position: fixed; /* Fixera headern på toppen */
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 80px;
    background-color: #0D1117; /* Mörk bakgrund för header */
    z-index: 1000; /* Se till att headern alltid är på toppen */
}

html[data-page="login"] #logo {
    width: 80px;
    height: 80px;
    margin-top: 10px;
    width: auto;
}

html[data-page="login"] .register, html[data-page="login"] .login {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    color: white;
}

html[data-page="login"] .register {
    background-color: green; /* Grön färg för registreringsknappen */
}

html[data-page="login"] .login {
    background-color: red; /* Röd färg för inloggningsknappen */
}

html[data-page="login"] #container1 h1 {
    font-size: 2.5em;
    white-space: nowrap; /* Förhindrar att texten bryts */
    color: #FFD700; /* Guld färg för en elegant look */
    text-shadow: 3px 3px 10px rgba(255, 215, 0, 0.7), 2px 2px 5px rgba(0, 0, 0, 0.7); /* Textskugga för extra effekt */
    letter-spacing: 3px;
    text-transform: uppercase; /* Gör texten versaler */
    margin: 0; /* Tar bort extra marginal */
}

html[data-page="login"] #sigin {
    right: 20px; /* Justera placeringen av sign-in-knappen */
}

html[data-page="login"] #hemsida {
    left: 20px; /* Justera placeringen av hemsida-knappen */
}

html[data-page="login"] #login-info {
    background-color: #1C2026;
    color: #FFD700; /* Guld text för att matcha spelets tema */
    padding: 20px;
    margin-top: 40px;
    margin-bottom: 60px; /* Lagt till marginal under */
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(255, 215, 0, 0.5); /* Gyllene skugga runt informationen */
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Centrerar texten */
}

html[data-page="login"] #login-info h3 {
    font-size: 2em;
    margin-bottom: 10px;
    text-shadow: 3px 3px 10px rgba(255, 215, 0, 0.7), 2px 2px 5px rgba(0, 0, 0, 0.7); /* Textskugga för rubriken */
}

html[data-page="login"] #login-info p {
    font-size: 1.2em;
    color: white;
}

/* Fade-in animation för bakgrunden */
@keyframes fade-in {
    from {
        background-color: rgba(0, 0, 0, 0);
    }
    to {
        background-color: rgba(0, 0, 0, 0.5);
    }
}

html[data-page="login"] #circle-container {
    position: relative;
    display: inline-block;
}

html[data-page="login"] #hover-circle {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar cirkeln */
    height: 60px; /* Cirkeldimensioner */
    width: 55px;
    border-radius: 50%; /* Gör det till en cirkel */
    border-color: rgba(0, 255, 255, 0.8);
    border-width: 5px;
    border-style: solid; /* Gör så att kanten syns */
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.6),
                0 0 45px rgba(0, 255, 255, 0.5),
                0 0 60px rgba(0, 255, 255, 0.4); /* Ljusglödseffekt */
    opacity: 0; /* Börjar osynlig */
    z-index: -1; /* Ser till att cirkeln är bakom logotypen */
    transition: opacity 0.5s ease, box-shadow 0.5s ease; /* Lägger till övergångseffekt för opacitet och skugga */
}


/* Hover-effekter för cirkeln */
html[data-page="login"] #circle-container:hover #hover-circle {
    opacity: 1; /* Gör cirkeln synlig vid hover */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8),
                0 0 30px rgba(0, 255, 255, 0.7),
                0 0 45px rgba(0, 255, 255, 0.6); /* Intensiv glöd vid hover */
}

/* Neonpuls-animation */
@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.5), 0 0 45px rgba(0, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.8), 0 0 60px rgba(0, 255, 255, 0.6), 0 0 90px rgba(0, 255, 255, 0.5);
    }
}

/* Stil för logotypen */
html[data-page="login"] #logo {
    cursor: pointer;
    height: 48px; /* Höjd för cirkeln */
    width: 48px;  /* Bredd för cirkeln */
    margin-top: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smidiga övergångar */
}

html[data-page="login"] #logo:hover {
    transform: scale(1.1) translateY(-3px); /* Skala upp och flytta upp vid hover */
}

/* Föräldrakontainer för formulär och felmeddelande */
html[data-page="login"] .form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

html[data-page="login"] #error-message {
    color: red; /* Röd färg för felmeddelande */
    font-weight: bold;
    text-align: center;
    max-width: 90%;
    padding: 10px; /* Ökad padding */
    box-sizing: border-box;
    position: absolute;
    top: 510px;
    left: 50%;
    transform: translate(-50%, 0); /* Centrerar horisontellt */
    width: 100%;
    visibility: visible; /* Gör det synligt som standard */
    font-size: 1.5em; /* Större textstorlek */
    text-shadow:
        0 0 5px rgba(255, 0, 0, 0.8),
        0 0 10px rgba(255, 0, 0, 0.8),
        0 0 15px rgba(255, 0, 0, 0.8),
        0 0 20px rgba(255, 0, 0, 0.8); /* Neon-glöd-effekt */
    animation: neon-pulse 1.5s infinite alternate; /* Tillämpa pulserande animation */
}

/* Neon puls animation */
@keyframes neon-pulse {
    0% {
        text-shadow:
            0 0 5px rgba(255, 0, 0, 0.8),
            0 0 10px rgba(255, 0, 0, 0.8),
            0 0 15px rgba(255, 0, 0, 0.8),
            0 0 20px rgba(255, 0, 0, 0.8);
        transform: translate(-50%, 0) scale(1); /* Normalstorlek */
    }
    100% {
        text-shadow:
            0 0 10px rgba(255, 0, 0, 1),
            0 0 20px rgba(255, 0, 0, 1),
            0 0 30px rgba(255, 0, 0, 1),
            0 0 40px rgba(255, 0, 0, 1);
        transform: translate(-50%, 0) scale(1.05); /* Lite större */
    }
}

/* Stil för lägg till valuta-knapp */
html[data-page="login"] #add-currency {
    background-color: #007bff; /* Blå knapp */
    color: white;
    border: none;
    border-radius: 50%; /* Cirkelformad */
    width: 25px;
    height: 25px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 8px;
}

/* Stil för valutabelopp */
html[data-page="login"] #currency-amount {
    font-size: 18px;
    margin-right: 8px;
}

/* Dölj scrollbar */
html[data-page="login"] ::-webkit-scrollbar {
    display: none; /* Dölj scrollbar */
}

/* Stil för sidomeny-toggle-knapp */
html[data-page="login"] #sidebar-toggle {
    position: fixed;
    top: 100px; /* Justera så att den är precis under headern */
    left: 10px;
    font-size: 30px;
    cursor: pointer;
    background-color: black;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
    transition: left 0.5s;
}

/* Sidomeny */
html[data-page="login"] .sidebar {
    height: 92%;
    width: 0;
    position: fixed;
    top: 80px;
    left: 0;
    background-color: black;
    color: white;
    overflow-x: hidden;
    transition: width 0.5s;
    padding-top: 20px;
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5);
}

html[data-page="login"] .sidebar.open {
    width: 250px; /* Bredd på sidomenyn när den är öppen */
}

/* Profilsektion */
html[data-page="login"] .profile-section {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid white;
}

/* Level Section */
html[data-page="login"] .level-section {
    padding: 20px;
}

html[data-page="login"] .level-section h4 {
    margin: 0;
    color: #ffcc00; /* Guldgul färg för rubriken */
}

html[data-page="login"] .exp-bar {
    width: 100%;
    height: 15px;
    background-color: #333; /* Mörk bakgrund för erfarenhetsbar */
    border-radius: 10px;
    margin: 10px 0;
}

html[data-page="login"] .exp-progress {
    height: 100%;
    background-color: #ffcc00; /* Guldgul för progress bar */
    border-radius: 10px;
}

html[data-page="login"] .exp-bar2 {
    width: 350%;
    height: 15px;
    background-color: #333;
    border-radius: 10px;
    margin: 10px auto; /* Centrerar elementet horisontellt */
    transform: translateX(-37%); /* Justering av positionen */
}

html[data-page="login"] .exp-progress2 {
    height: 100%;
    background-color: #ffcc00; /* Guldgul progress bar */
    border-radius: 10px;
}

/* Level Text */
html[data-page="login"].level-section p {
    margin: 0;
    color: white; /* Vit textfärg för nivåtext */
}

html[data-page="login"] #a-tag1 {
    color: white;
    text-decoration: none;
}

/* Placera knappen längst upp till höger på skärmen */
html[data-page="login"] .search-profile-btn-container {
    position: fixed;
    top: 20px;
    right: 30px;
    z-index: 1000; /* Se till att den ligger ovanpå andra element */
}

html[data-page="login"] #searchResults {
    margin-top: 10px;
}

/* Stil för sökknappen */
html[data-page="login"] #searchProfileBtn {
    background-color: #1e90ff; /* Elektrisk blå */
    color: white; /* Vit text */
    border: none;
    padding: 10px 5px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px; /* Mer rundade hörn */
    font-family: 'Arial', sans-serif; /* Ren, modern font */
    text-transform: uppercase; /* Gör texten versaler */
    font-weight: bold;
    letter-spacing: 2px; /* Gör texten mer utspridd */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 15px #00ffea, 0 0 25px #00ffea; /* Lägg till glöd-effekt */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}

html[data-page="login"] #searchProfileBtn:hover {
    background-color: #00ccff; /* Ljusa upp blått vid hover */
    transform: translateY(-5px); /* Flytta knappen upp lite vid hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 20px #00ffea, 0 0 35px #00ffea; /* Förstärk glöd vid hover */
}

html[data-page="login"] #searchProfileBtn:active {
    transform: translateY(0); /* Återställ position vid tryck */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 15px #00ffea, 0 0 25px #00ffea; /* Återställ glöd vid tryck */
}

/* Vit kvadrat som är gömd som standard */
html[data-page="login"] .profile-square {
    width: 300px;
    height: 270px;
    background-color: white;
    position: fixed;
    top: 60px; /* Under knappen */
    right: 9px;
    display: none; /* Initialt gömd */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    z-index: 999; /* Hög z-index för att vara ovanpå andra element */
    opacity: 0; /* Börjar osynlig */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smidig övergång för opacitet och rörelse */
}

/* Synlig tillstånd för kvadraten */
html[data-page="login"] .profile-square.active {
    display: block;
    opacity: 1;
    transform: translateY(10px); /* Liten rörelse när den blir synlig */
}

/* Sökningscontainer */
html[data-page="login"] .search-container {
    position: relative;
    width: 90%;
    left: 15px;
}

/* Sökinputfält */
html[data-page="login"] #searchInput {
    width: 80%;
    padding: 10px 40px 10px 10px; /* Utrymme för sökikonen */
    font-size: 14px;
    border: 2px solid #1e90ff; /* Matchar knappen färg */
    border-radius: 5px;
    outline: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtil skugga */
    transition: border-color 0.3s ease; /* Smidig övergång för kantfärgen */
    margin-top: 20px;
}

/* Ändra kantfärg vid fokus */
html[data-page="login"] #searchInput:focus {
    border-color: #00ccff;
}

html[data-page="login"] .username {
    display: flex;
    align-items: flex-start; /* Justera objekten till start */
}

/* Profilcirkel */
html[data-page="login"] .profile-circle {
    width: 68px; /* Justera storlek efter behov */
    height: 68px; /* Justera storlek efter behov */
    border-radius: 50%; /* Gör bilden cirkulär */
    background-position: center;
    background-size: cover; /* Säkerställ att bilden täcker cirkeln */
    background-repeat: no-repeat;
    cursor: pointer;
    margin-top: -27px;
    margin-right: 10px;
    margin-left: -10px;
}

/* Användarnamn */
html[data-page="login"] .username h3 {
    font-size: 1.5em; /* Större teckenstorlek för bättre synlighet */
    font-family: Arial, sans-serif; /* Font för modern look */
    margin-top: -10px; /* Flytta användarnamnet uppåt */
}

/* Resultatlistningsobjekt */
html[data-page="login"] .result-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    margin: 4px 0;
    width: 90%;
    margin-left: 5%;
    padding: 4px 0;
    transition: background-color 0.3s ease, font-size 0.3s ease;
}

/* Hover-effekt på resultatobjekt */
html[data-page="login"] .result-item:hover {
    font-size: 1.05em;
    background-color: #f9f9f9;
    border-radius: 8px;
    cursor: pointer;
}

/* Profilbild */
html[data-page="login"] .profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid black;
    margin-right: 8px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Apply hover effect to profile-image when result-item is hovered */
html[data-page="login"] .result-item:hover .profile-image {
    transform: scale(1.1);
    border-color: #007bff;
}

/* Ändra färg på användarnamn vid hover */
html[data-page="login"] .result-item:hover .username {
    color: #007bff; /* Ljusblå vid hover */
}

/* Sökresultat */
html[data-page="login"] .search-results {
    max-height: 180px;
    overflow-y: auto;
    background-color: white;
    padding: 8px;
    border-radius: 8px;
}

/* Stängknapp för resultat */
html[data-page="login"] .close-button {
    background-color: transparent;
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Cirkulär profilbild */
html[data-page="login"] .circle-profile {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid black;
    margin-left: 40%;
}

/* Vald profilcontainer */
html[data-page="login"] .selected-profile-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrerar objekten horisontellt */
    text-align: center; /* Centrerar text */
}

/* Cirkulär profilbild i vald profil */
html[data-page="login"] .selected-profile-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transition: transform 0.3s ease-in, box-shadow 0.3s ease-in, translate 0.3s ease-in;
}

/* Hover-effekt på vald profilbild */
html[data-page="login"] .selected-profile-circle:hover {
    transform: scale(1.05);
    transform: translateY(-3px);
    box-shadow: 0px 0px 10px #ffcc00;
    border-radius: 50%;
}

/* Användarnamn för vald profil */
html[data-page="login"] .username2 {
    margin-top: 10px; /* Avstånd mellan bild och text */
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: capitalize;
    color: black;
}

/* Nivåsektion för vald profil */
html[data-page="login"] .level-section2 p {
    color: black; /* Eller din föredragna textfärg */
    position: absolute; /* Absolut positionering */
    top: 0; /* Positionera den längst upp i föräldrakontainern */
    left: 50%; /* Centrerar horisontellt */
    transform: translateX(-50%); /* Centrerar horisontellt */
    z-index: 10; /* Högre z-index för att säkerställa att det ligger ovanpå */
    margin-top: 190px;
}

html[data-page="login"] .level-section2 h4 {
    color: #ffcc00; /* Guldgul färg */
    margin-bottom: 0px;
    margin-top: 10px;
}

/* Meddelandeknapp */
html[data-page="login"] .messagebutton {
    position: absolute;
    width: 120px;
    height: 43px;
    background-color: #007bff; /* Klassisk blå */
    color: white;
    top: 215px;
    left: 20px;
    border: none; /* Ta bort kant för en renare look */
    border-radius: 5px; /* Lägger till svaga rundade hörn */
    transition: background-color 0.3s, transform 0.3s; /* Smidig övergång */
}

/* Meddelandeknapp hover-effekt */
html[data-page="login"] .messagebutton:hover {
    background-color: #0056b3; /* Mörkare blå ton vid hover */
    transform: translateY(-3px) scale(1.03); /* Kombinerad transform för smidigare effekt */
}

/* Inmatningsfält för att skriva meddelanden */
html[data-page="login"] .message-input {
    width: calc(100% - 90px); /* Lämnar plats för knappen */
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #dcdcdc;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.3s;
}

/* Fokusstatus för inmatningsfält */
html[data-page="login"] .message-input:focus {
    border-color: #8ab4f8; /* Ljusblå vid fokus */
    box-shadow: 0 0 5px rgba(138, 180, 248, 0.5);
}

/* Skicka-knapp */
html[data-page="login"] .send-button {
    margin-top: 180px;
    padding: 10px 20px;
    background-color: #4CAF50; /* Grön bakgrund */
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Skicka-knappens hover och aktivt tillstånd */
html[data-page="login"] .send-button:hover {
    background-color: #45A049; /* Mörkare grön vid hover */
}

html[data-page="login"] .send-button:active {
    transform: scale(0.98); /* Liten krympning vid klick */
}

/* Stäng-knapp */
html[data-page="login"] .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 18px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Stäng-knappens hover-effekt */
html[data-page="login"] .close-button:hover {
    color: #333;
}

/* signup.php */

/* Allmänna återställningar */
html[data-page="signup"] body {
    font-family: 'Arial', sans-serif;
    background-color: #131A20; /* Bakgrundsfärg matchar hemsida.php */
    color: white;
    margin: 0;
    padding: 0;
    text-align: center;
    background-size: cover;
    padding-top: 100px;
}

html[data-page="signup"] #text-register {
    font-size: 20px;
}

html[data-page="signup"] #register-button {
    color: lightblue;
    text-shadow: none;
}

html[data-page="signup"] nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
}

html[data-page="signup"] nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

html[data-page="signup"] #currency-icon {
    position: absolute;
    height: 35px;
    right: 0px;
}

html[data-page="signup"] #currency-bar {
    display: flex;
    align-items: center;
    background-color: #333; /* Mörk bakgrund för baren */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    width: 100px;
    position: relative;
}

/* Behållare för inloggning och registreringsknappar */
html[data-page="signup"] #container1 {
    display: flex;
    justify-content: space-between; /* Fördelar logotyp/titel och knappar jämnt */
    align-items: center; /* Centrerar objekten vertikalt */
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

/* Knappar */
html[data-page="signup"] .buttons {
    display: flex; /* Säkerställer att knapparna är i rad */
    gap: 20px; /* Avstånd mellan knappar */
}

html[data-page="signup"] #logo-title {
    display: flex;
    align-items: center; /* Justera logotyp och titel vertikalt */
    gap: 10px; /* Avstånd mellan logotyp och titel */
    white-space: nowrap;
}

/* Inloggnings- och hemsidan-knappar */
html[data-page="signup"] #signin, html[data-page="signup"] #hemsida {
    background-color: #1E2A38; /* Mörkare bakgrund som smälter in med sidan men ger kontrast */
    color: #FFFFFF; /* Vit text för stark kontrast */
    padding: 10px 20px;
    border: 2px solid #FFEB3B; /* Gul kant för ökad synlighet */
    border-radius: 8px; /* Mjukare knappform */
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0px 6px 15px rgba(255, 235, 59, 0.4); /* Mjukare glöd-effekt med gult */
    width: 120px;
    height: 40px;
}

/* Hover-effekt för inloggning och hemsida-knappar */
html[data-page="signup"] #signin:hover, html[data-page="signup"] #hemsida:hover {
    background-color: #293845; /* Lättare nyans vid hover */
    border-color: #FFEB3B; /* Behåll den gula kanten */
    box-shadow: 0px 8px 20px rgba(255, 235, 59, 0.6); /* Mer intensiv skugga vid hover */
    transform: translateY(-3px); /* Liten lyft-effekt */
}

/* Aktiv effekt vid klick */
html[data-page="signup"] #signin:active, html[data-page="signup"] #hemsida:active {
    background-color: #17202B; /* Mörkare vid klick */
    transform: translateY(1px);
    box-shadow: 0px 4px 12px rgba(255, 235, 59, 0.2); /* Mindre intensiv skugga vid klick */
}

/* Formulärsstilar */
html[data-page="signup"] form {
    background: rgba(255, 255, 255, 0.1); /* Transparent formulär med en lätt vit överlägg */
    display: inline-block;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
    margin: 20px auto;
    width: 300px;
}

/* Inmatningsfält (matchar speltemat) */
html[data-page="signup"] input[type="text"],
html[data-page="signup"] input[type="password"] {
    width: 90%;
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px; /* Justerad för att matcha hemsida.php knappstil */
    border: 2px solid #FFEB3B; /* Matchar inmatningskanterna med speltemat (gult) */
    font-size: 1.2em;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #1C2026; /* Mörkare bakgrund för inmatning */
    color: white;
    transition: all 0.3s ease;
}

/* Fokus-effekt för inmatningsfält */
html[data-page="signup"] input[type="text"]:focus,
html[data-page="signup"] input[type="password"]:focus {
    border-color: #00B9E8; /* Blå kant vid fokus */
    outline: none;
    box-shadow: 0px 4px 12px rgba(0, 185, 232, 0.4);
}

/* Skicka-knappens stil */
html[data-page="signup"] input[type="submit"] {
    background-color: #1E2A38; /* Mörkare bakgrund som smälter in men ger kontrast */
    color: #FFFFFF; /* Vit text för stark kontrast */
    padding: 10px 20px;
    border: 2px solid #FFEB3B; /* Gul kant för synlighet */
    border-radius: 8px; /* Mjukare knappform */
    cursor: pointer;
    font-size: 1.5em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0px 6px 15px rgba(255, 235, 59, 0.4); /* Mjukare glöd-effekt med gult */
    width: 303px;
    height: 50px;
    margin-top: 10px;
}

/* Hover och aktiv effekt för Skicka-knappen */
html[data-page="signup"] input[type="submit"]:hover {
    background-color: #293845; /* Lättare vid hover */
    border-color: #FFEB3B; /* Behåll den gula kanten */
    box-shadow: 0px 8px 20px rgba(255, 235, 59, 0.6); /* Mer intensiv skugga vid hover */
    transform: translateY(-3px); /* Liten lyft-effekt */
}

html[data-page="signup"] input[type="submit"]:active {
    background-color: #17202B; /* Mörkare vid klick */
    transform: translateY(1px);
    box-shadow: 0px 4px 12px rgba(255, 235, 59, 0.2); /* Mindre intensiv skugga vid klick */
}

/* Rubrikstil (matchar speltemat) */
html[data-page="signup"] h2 {
    font-size: 2em;
    color: #FFEB3B; /* Gul rubrik för att matcha speltemat */
    text-shadow: 2px 2px #333;
    margin-top: 20px;
    text-shadow: 3px 3px 10px rgba(255, 215, 0, 0.7), 2px 2px 5px rgba(0, 0, 0, 0.7);
}

/* Header-sektion */
html[data-page="signup"] #header {
    position: fixed; /* Fixerar headern högst upp */
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 80px;
    background-color: #0D1117;
    z-index: 1000; /* Säkerställer att den alltid är överst */
}

html[data-page="signup"] #logo {
    width: 80px;
    height: 80px;
    margin-top: 10px;
    width: auto;
}

html[data-page="signup"] .register, html[data-page="signup"] .login {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    color: white;
}

html[data-page="signup"] .register {
    background-color: green;
}

html[data-page="signup"] .login {
    background-color: red;
}

html[data-page="signup"] #container1 h1 {
    font-size: 2.5em;
    color: #FFD700; /* Guldfärg för en klassig look */
    text-shadow: 3px 3px 10px rgba(255, 215, 0, 0.7), 2px 2px 5px rgba(0, 0, 0, 0.7);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0; /* Tar bort extra marginal */
}

html[data-page="signup"] #sigin {
    right: 20px;
}

html[data-page="signup"] #hemsida {
    left: 20px;
}

html[data-page="signup"] #signup-info {
    background-color: #1C2026; /* Mörk bakgrund för att matcha temat */
    color: #FFD700; /* Gyllene text för att matcha spelets tema */
    padding: 20px;
    margin-top: 40px;
    margin-bottom: 60px; /* Lagt till marginal under */
    border-radius: 10px; /* Rundade hörn */
    box-shadow: 0px 0px 15px rgba(255, 215, 0, 0.5); /* Gyllene skugga */
    width: 80%; /* Bredd på elementet */
    margin-left: auto;
    margin-right: auto; /* Centrerar elementet */
    text-align: center; /* Centrerad text */
}

html[data-page="signup"] #signup-info h3 {
    font-size: 2em; /* Större textstorlek */
    margin-bottom: 10px; /* Marginal under rubriken */
    text-shadow: 3px 3px 10px rgba(255, 215, 0, 0.7), 2px 2px 5px rgba(0, 0, 0, 0.7); /* Gyllene skugga på texten */
}

html[data-page="signup"] #signup-info p {
    font-size: 1.2em; /* Mellanstor text */
    color: white; /* Vit textfärg */
}

html[data-page="signup"] #circle-container {
    position: relative; /* Relativ positionering för att skapa en förälder för den absoluta positionen av cirkeln */
    display: inline-block;
}

html[data-page="signup"] #hover-circle {
    position: absolute; /* Absolut positionering för cirkeln */
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar cirkeln */
    height: 60px; /* Cirkelns höjd */
    width: 55px; /* Cirkelns bredd */
    border-radius: 50%; /* Gör den rund */
    border-color: rgba(0, 255, 255, 0.8); /* Cyanfärgad kant */
    border-width: 5px; /* Kantens tjocklek */
    border-style: solid; /* Säkerställ att kanten är synlig */
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.6), 0 0 45px rgba(0, 255, 255, 0.5), 0 0 60px rgba(0, 255, 255, 0.4); /* Glöd runt cirkeln */
    opacity: 0; /* Cirkeln är osynlig vid start */
    z-index: -1; /* Gör så att den är bakom logotypen */
    transition: opacity 0.5s ease, box-shadow 0.5s ease; /* Smidig övergång för opacitet och skugga */
}

html[data-page="signup"] #circle-container:hover #hover-circle {
    opacity: 1; /* Gör cirkeln synlig när man håller musen över */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 30px rgba(0, 255, 255, 0.7), 0 0 45px rgba(0, 255, 255, 0.6); /* Intensiv glöd på hover */
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.5), 0 0 45px rgba(0, 255, 255, 0.4); /* Låg intensitet vid början och slut */
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.8), 0 0 60px rgba(0, 255, 255, 0.6), 0 0 90px rgba(0, 255, 255, 0.5); /* Hög intensitet i mitten av animationen */
    }
}

html[data-page="signup"] #logo {
    cursor: pointer; /* Pekaren blir en hand när man håller musen över */
    height: 48px; /* Höjd på logotypen */
    width: 48px; /* Bredd på logotypen */
    margin-top: 25px; /* Marginal ovanför logotypen */
}

html[data-page="signup"] #logo {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smidig övergång för transformering och skugga */
}

html[data-page="signup"] #logo:hover {
    transform: scale(1.1) translateY(-3px); /* Förstorar och flyttar logotypen vid hover */
}

/* Föräldrarkontainer för formulär och felmeddelande */
html[data-page="signup"] .form-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrerar innehållet horisontellt */
    position: relative;
}

html[data-page="signup"] #error-message {
    color: red; /* Röd färg för felmeddelandet */
    font-weight: bold; /* Fetstil */
    text-align: center; /* Centrerad text */
    max-width: 90%; /* Maximal bredd */
    padding: 10px; /* Ökat mellanrum */
    box-sizing: border-box;
    position: absolute;
    top: 510px;
    left: 50%;
    transform: translate(-50%, 0); /* Centrerar felmeddelandet */
    width: 100%;
    visibility: visible; /* Gör det synligt som standard */
    font-size: 1.5em; /* Ökad textstorlek */
    text-shadow:
        0 0 5px rgba(255, 0, 0, 0.8),
        0 0 10px rgba(255, 0, 0, 0.8),
        0 0 15px rgba(255, 0, 0, 0.8),
        0 0 20px rgba(255, 0, 0, 0.8); /* Neon-glöd effekt på felmeddelandet */
    animation: neon-pulse 1.5s infinite alternate; /* Neon-pulserande animation */
}

html[data-page="signup"] #success-message {
    color: rgb(0,255,0); /* Grön färg för framgångsmeddelandet */
    font-weight: bold; /* Fetstil */
    text-align: center; /* Centrerad text */
    max-width: 90%; /* Maximal bredd */
    padding: 10px; /* Ökat mellanrum */
    box-sizing: border-box;
    position: absolute;
    top: 510px;
    left: 50%;
    transform: translate(-50%, 0); /* Centrerar framgångsmeddelandet */
    width: 100%;
    visibility: visible; /* Gör det synligt som standard */
    font-size: 1.5em; /* Ökad textstorlek */
    text-shadow:
        0 0 5px rgba(0, 255, 0, 0.8),
        0 0 10px rgba(0, 255, 0, 0.8),
        0 0 15px rgba(0, 255, 0, 0.8),
        0 0 20px rgba(0, 255, 0, 0.8); /* Neon-glöd effekt på framgångsmeddelandet */
    animation: neon2-pulse 1.5s infinite alternate; /* Neon-pulserande animation */
}

/* Neon pulserande animation */
@keyframes neon-pulse {
    0% {
        text-shadow:
            0 0 5px rgba(255, 0, 0, 0.8),
            0 0 10px rgba(255, 0, 0, 0.8),
            0 0 15px rgba(255, 0, 0, 0.8),
            0 0 20px rgba(255, 0, 0, 0.8); /* Låg glöd vid början */
        transform: translate(-50%, 0) scale(1); /* Normalt läge */
    }
    100% {
        text-shadow:
            0 0 10px rgba(255, 0, 0, 1),
            0 0 20px rgba(255, 0, 0, 1),
            0 0 30px rgba(255, 0, 0, 1),
            0 0 40px rgba(255, 0, 0, 1); /* Hög glöd vid slutet */
        transform: translate(-50%, 0) scale(1.05); /* Lätt förstoring */
    }
}


@keyframes neon2-pulse {
    0% {
        text-shadow:
            0 0 5px rgba(0, 255, 0, 0.8),
            0 0 10px rgba(0, 255, 0, 0.8),
            0 0 15px rgba(0, 255, 0, 0.8),
            0 0 20px rgba(0, 255, 0, 0.8); /* Låg glöd vid början */
        transform: translate(-50%, 0) scale(1); /* Normal storlek */
    }
    100% {
        text-shadow:
            0 0 10px rgba(0, 255, 0, 1),
            0 0 20px rgba(0, 255, 0, 1),
            0 0 30px rgba(0, 255, 0, 1),
            0 0 40px rgba(0, 255, 0, 1); /* Hög glöd vid slutet */
        transform: translate(-50%, 0) scale(1.05); /* Lite större */
    }
}

html[data-page="signup"] #add-currency {
    background-color: #007bff; /* Blå knapp */
    color: white;
    border: none;
    border-radius: 50%; /* Rund knapp */
    width: 25px; /* Bredd på knappen */
    height: 25px; /* Höjd på knappen */
    font-size: 16px; /* Textstorlek */
    cursor: pointer; /* Muspekaren blir en hand */
    margin-right: 8px; /* Marginal till höger */
}

html[data-page="signup"] #currency-amount {
    font-size: 18px; /* Textstorlek för belopp */
    margin-right: 8px; /* Marginal till höger */
}

html[data-page="signup"] #messages {
    position: fixed; /* Fast position på skärmen */
    top: 20px; /* Litet avstånd från toppen */
    left: 50%; /* Centrerad horisontellt */
    transform: translateX(-50%); /* Exakt centrering */
    z-index: 1000; /* Hög z-index så att det syns över andra element */
    text-align: center; /* Centrerad text */
}

html[data-page="signup"] .message {
    display: none; /* Döljer meddelandet till en början */
    padding: 10px 20px; /* Inre marginaler för meddelandet */
    margin: 10px 0; /* Yttre marginaler */
    border-radius: 5px; /* Rundade hörn på meddelandet */
}

html[data-page="signup"] .success {
    background-color: #d4edda; /* Ljusgrön bakgrund för framgångsmeddelande */
    color: #155724; /* Mörkgrön text */
    border: 1px solid #c3e6cb; /* Grön kant */
}

html[data-page="signup"] .error {
    background-color: #f8d7da; /* Ljusrosa bakgrund för felmeddelande */
    color: #721c24; /* Mörkröd text */
    border: 1px solid #f5c6cb; /* Rosa kant */
}

html[data-page="signup"] ::-webkit-scrollbar {
    display: none; /* Döljer rullningslisten */
}

html[data-page="signup"] #sidebar-toggle {
    position: fixed; /* Fast position */
    top: 100px; /* Ligger under headern */
    left: 10px;
    font-size: 30px; /* Stor textstorlek för knappen */
    cursor: pointer; /* Pekaren blir en hand */
    background-color: black; /* Svart bakgrund */
    color: white; /* Vit text */
    padding: 10px; /* Inre marginaler */
    border-radius: 5px; /* Rundade hörn */
    z-index: 1000; /* Hög z-index så att det syns över andra element */
    transition: left 0.5s; /* Övergång för att ändra position */
}

/* Sidebar */
html[data-page="signup"] .sidebar {
    height: 92%; /* Höjd på sidebar */
    width: 0; /* Startar med bredd 0 */
    position: fixed;
    top: 80px; /* Ligger precis under headern */
    left: 0;
    background-color: black; /* Svart bakgrund */
    color: white; /* Vit text */
    overflow-x: hidden; /* Döljer horisontellt överflöd */
    transition: width 0.5s; /* Smidig övergång för bredd */
    padding-top: 20px; /* Inre marginaler */
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5); /* Skugga på sidan */
}

html[data-page="signup"] .sidebar.open {
    width: 250px; /* Öppnar sidebar till 250px bredd */
}

/* Profile Section */
html[data-page="signup"] .profile-section {
    display: flex;
    align-items: center; /* Centrerar innehållet vertikalt */
    padding: 20px; /* Inre marginaler */
    border-bottom: 1px solid white; /* Vit linje under sektionen */
}

/* Level Section */
html[data-page="signup"] .level-section {
    padding: 20px; /* Inre marginaler */
}

html[data-page="signup"] .level-section h4 {
    margin: 0; /* Ingen marginal för rubriken */
    color: #ffcc00; /* Gyllene färg för rubriken */
}

html[data-page="signup"] .exp-bar {
    width: 100%; /* Full bredd på erfarenhetsfältet */
    height: 15px; /* Höjd på fältet */
    background-color: #333; /* Mörk bakgrund */
    border-radius: 10px; /* Rundade hörn */
    margin: 10px 0; /* Marginal ovanför och under */
}

html[data-page="signup"] .exp-progress {
    height: 100%; /* Full höjd */
    background-color: #ffcc00; /* Gyllene färg för progressen */
    border-radius: 10px; /* Rundade hörn */
}

html[data-page="signup"] .exp-bar2 {
    width: 350%; /* Ökad bredd för det andra erfarenhetsfältet */
    height: 15px; /* Höjd på fältet */
    background-color: #333; /* Mörk bakgrund */
    border-radius: 10px; /* Rundade hörn */
    margin: 10px auto; /* Centrerad horisontellt */
    transform: translateX(-37%); /* Flyttar det lite åt vänster för att justera */
}

html[data-page="signup"] .exp-progress2 {
    height: 100%; /* Full höjd */
    background-color: #ffcc00; /* Gyllene färg för progressen */
    border-radius: 10px; /* Rundade hörn */
}

/* Level Text */
html[data-page="signup"].level-section p {
    margin: 0; /* Ingen marginal */
    color: white; /* Vit textfärg */
}

html[data-page="signup"] #a-tag1 {
    color: white; /* Vit textfärg */
    text-decoration: none; /* Ingen understrykning */
}

/* Placera knappen längst upp till höger på skärmen */
html[data-page="signup"] .search-profile-btn-container {
    position: fixed; /* Fast position */
    top: 20px; /* Avstånd från toppen */
    right: 30px; /* Avstånd från högerkant */
    z-index: 1000; /* Hög z-index för att hålla knappen över andra element */
}

html[data-page="signup"] #searchResults {
    margin-top: 10px; /* Marginal ovanför resultaten */
}

/* Stil för knappen */
html[data-page="signup"] #searchProfileBtn {
    background-color: #1e90ff; /* Elektrisk blå bakgrund */
    color: white; /* Vit textfärg */
    border: none;
    padding: 10px 5px; /* Inre marginaler */
    font-size: 16px; /* Textstorlek */
    cursor: pointer; /* Pekaren blir en hand */
    border-radius: 10px; /* Rundade hörn */
    font-family: 'Arial', sans-serif; /* Ren, modern font */
    text-transform: uppercase; /* Texten blir versaler */
    font-weight: bold; /* Fet text */
    letter-spacing: 2px; /* Gör texten mer utsträckt */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 15px #00ffea, 0 0 25px #00ffea; /* Ljusglödseffekt */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease; /* Övergångar för effekter */
}

html[data-page="signup"] #searchProfileBtn:hover {
    background-color: #00ccff; /* Ljusa blå färgen vid hover */
    transform: translateY(-5px); /* Flytta upp knappen lite vid hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 20px #00ffea, 0 0 35px #00ffea; /* Förbättra glöd på hover */
}

html[data-page="signup"] #searchProfileBtn:active {
    transform: translateY(0); /* Återställ positionen när knappen trycks */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 15px #00ffea, 0 0 25px #00ffea; /* Återställ glöd när knappen trycks */
}

/* Vit fyrkant som är dold från början */
html[data-page="signup"] .profile-square {
    width: 300px; /* Bredd på fyrkanten */
    height: 270px; /* Höjd på fyrkanten */
    background-color: white; /* Vit bakgrund */
    position: fixed; /* Fast position */
    top: 60px; /* Ligger nedanför knappen */
    right: 9px;
    display: none; /* Initialt dold */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Ljus skugga runt fyrkanten */
    border-radius: 10px; /* Rundade hörn */
    z-index: 999; /* Hög z-index för att överlappa andra element */
    opacity: 0; /* Börjar osynlig */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smidig övergång för fade och rörelse */
}

/* Synligt tillstånd för fyrkanten */
html[data-page="signup"] .profile-square.active {
    display: block; /* Visar fyrkanten */
    opacity: 1; /* Gör den synlig */
    transform: translateY(10px); /* Flytta in fyrkanten något */
}

/* Sökningsbehållare */
html[data-page="signup"] .search-container {
    position: relative; /* Relativ position */
    width: 90%; /* Bredd på behållaren */
    left: 15px; /* Liten förflyttning till vänster */
}

/* Sökningsinmatningsfält */
html[data-page="signup"] #searchInput {
    width: 80%; /* Bredd på inmatningsfältet */
    padding: 10px 40px 10px 10px; /* Utrymme för sökikonen */
    font-size: 14px; /* Textstorlek */
    border: 2px solid #1e90ff; /* Rand som matchar knappen */
    border-radius: 5px; /* Rundade hörn */
    outline: none; /* Ingen fokuseringsram */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Lätt skugga */
    transition: border-color 0.3s ease; /* Övergång för randfärgen */
    margin-top: 20px; /* Marginal ovanför */
}

/* Ändra randfärgen vid fokus */
html[data-page="signup"] #searchInput:focus {
    border-color: #00ccff; /* Ljusa blå färgen vid fokus */
}

html[data-page="signup"] .username {
    display: flex;
    align-items: flex-start; /* Justera innehållet till början */
}

html[data-page="signup"] .profile-circle {
    width: 68px; /* Justera storleken på cirkeln */
    height: 68px; /* Justera storleken på cirkeln */
    border-radius: 50%; /* Gör bilden rund */
    background-position: center; /* Centrera bilden */
    background-size: cover; /* Se till att bilden täcker hela cirkeln */
    background-repeat: no-repeat; /* Förhindra upprepning av bilden */
    cursor: pointer; /* Pekaren blir en hand */
    margin-top: -27px; /* Justera vertikalt */
    margin-right: 10px; /* Marginal till höger */
    margin-left: -10px; /* Marginal till vänster */
}

html[data-page="signup"] .username h3 {
    font-size: 1.5em; /* Större textstorlek för bättre synlighet */
    font-family: Arial, sans-serif; /* Modern font */
    margin-top: -10px; /* Flytta upp användarnamnet */
}

html[data-page="signup"] .result-item {
    display: flex;
    align-items: center; /* Justera innehållet vertikalt */
    border-bottom: 1px solid #ddd; /* Ljus linje under varje resultat */
    margin: 4px 0; /* Marginal ovanför och under */
    width: 90%; /* Bredd på resultatraden */
    margin-left: 5%; /* Centrera resultaten */
    padding: 4px 0; /* Inre marginaler */
    transition: background-color 0.3s ease, font-size 0.3s ease; /* Smidig övergång för bakgrundsfärg och textstorlek */
}

html[data-page="signup"] .result-item:hover {
    font-size: 1.05em; /* Gör texten något större vid hover */
    background-color: #f9f9f9; /* Ljusare bakgrund vid hover */
    border-radius: 8px; /* Rundade hörn vid hover */
    cursor: pointer; /* Pekaren blir en hand */
}

/* Profilbild */
html[data-page="signup"] .profile-image {
    width: 40px; /* Bredd på profilbild */
    height: 40px; /* Höjd på profilbild */
    border-radius: 50%; /* Gör bilden rund */
    object-fit: cover; /* Bilden täcker hela runda området */
    border: 2px solid black; /* Svart kant runt bilden */
    margin-right: 8px; /* Marginal till höger */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smidig övergång för transformering och kantfärg */
}

/* Applicera hover-effekt på profilbild när resultatet hålls */
html[data-page="signup"] .result-item:hover .profile-image {
    transform: scale(1.1); /* Gör bilden något större vid hover */
    border-color: #007bff; /* Blå kant vid hover */
}

html[data-page="signup"] .result-item:hover .username {
    color: #007bff; /* Ljusblå textfärg vid hover */
}

/* Sökresultatbehållare */
html[data-page="signup"] .search-results {
    max-height: 180px; /* Maxhöjd på sökresultat */
    overflow-y: auto; /* Vertikal rullning om innehållet är för stort */
    background-color: white; /* Vit bakgrund */
    padding: 8px; /* Inre marginaler */
    border-radius: 8px; /* Rundade hörn */
}

/* Stängningsknapp */
html[data-page="signup"] .close-button {
    background-color: transparent; /* Transparent bakgrund */
    border: none; /* Ingen kant */
    font-size: 20px; /* Större textstorlek */
    font-weight: bold; /* Fet stil */
    cursor: pointer; /* Pekaren blir en hand */
    position: absolute; /* Absolut position */
    top: 10px; /* Placera 10px från toppen */
    right: 10px; /* Placera 10px från höger */
}

/* Cirkelformad profilbild */
html[data-page="signup"] .circle-profile {
    width: 80px; /* Bredd på cirkeln */
    height: 80px; /* Höjd på cirkeln */
    border-radius: 50%; /* Gör den rund */
    border: 2px solid black; /* Svart kant */
    margin-left: 40%; /* Placera i mitten horisontellt */
}

/* Behållare för valt profil */
html[data-page="signup"] .selected-profile-container {
    display: flex;
    flex-direction: column; /* Flex-kolumn */
    align-items: center; /* Centera innehållet horisontellt */
    text-align: center; /* Centertext */
}

/* Cirkelformad bild för valt profil */
html[data-page="signup"] .selected-profile-circle {
    width: 80px; /* Bredd på cirkeln */
    height: 80px; /* Höjd på cirkeln */
    border-radius: 50%; /* Gör den rund */
    transition: transform 0.3s ease-in, box-shadow 0.3s ease-in, translate 0.3s ease-in; /* Smidig övergång för transformation och skugga */
}

/* Hover-effekt på vald profilbild */
html[data-page="signup"] .selected-profile-circle:hover {
    transform: scale(1.05); /* Gör bilden något större vid hover */
    transform: translateY(-3px); /* Flytta upp något vid hover */
    box-shadow: 0px 0px 10px #ffcc00; /* Ljus skugga vid hover */
    border-radius: 50%; /* Bevara rund formen */
}

/* Användarnamn för vald profil */
html[data-page="signup"] .username2 {
    margin-top: 10px; /* Avstånd mellan bild och text */
    font-size: 20px; /* Textstorlek */
    font-family: Arial, Helvetica, sans-serif; /* Font */
    font-weight: bold; /* Fet text */
    text-transform: capitalize; /* Första bokstaven stor */
    color: black; /* Svart textfärg */
}

/* Stil för nivåsektionen */
html[data-page="signup"] .level-section2 p {
    color: black; /* Svart textfärg */
    position: absolute; /* Absolut position */
    top: 0; /* Placera på toppen */
    left: 50%; /* Placera i mitten horisontellt */
    transform: translateX(-50%); /* Centrera horisontellt */
    z-index: 10; /* Hög z-index för att vara över andra element */
    margin-top: 190px; /* Marginal ovanför */
}

/* Stil för nivåsektionens rubrik */
html[data-page="signup"] .level-section2 h4 {
    color: #ffcc00; /* Gul textfärg */
    margin-bottom: 0px; /* Ingen marginal nedåt */
    margin-top: 10px; /* Liten marginal uppåt */
}

/* Meddelandeknapp */
html[data-page="signup"] .messagebutton {
    position: absolute; /* Absolut position */
    width: 120px; /* Bredd på knappen */
    height: 43px; /* Höjd på knappen */
    background-color: #007bff; /* Klassisk blå bakgrund */
    color: white; /* Vit textfärg */
    top: 215px; /* Placera knappen 215px från toppen */
    left: 20px; /* Placera knappen 20px från vänster */
    border: none; /* Ingen kant */
    border-radius: 5px; /* Lätt rundade hörn */
    transition: background-color 0.3s, transform 0.3s; /* Smidig övergång för bakgrundsfärg och transformation */
}

/* Hover-effekt på meddelandeknappen */
html[data-page="signup"] .messagebutton:hover {
    background-color: #0056b3; /* Mörkare blå vid hover */
    transform: translateY(-3px) scale(1.03); /* Förflytta uppåt och förstora vid hover */
}

/* Inmatningsfält för meddelanden */
html[data-page="signup"] .message-input {
    width: calc(100% - 90px); /* Lämna utrymme för knappen */
    padding: 10px; /* Inre marginaler */
    border-radius: 20px; /* Rundade hörn */
    border: 1px solid #dcdcdc; /* Ljusgrå kant */
    font-size: 14px; /* Textstorlek */
    outline: none; /* Ingen fokusram */
    box-sizing: border-box; /* Boxmodell för att inkludera padding och border */
    transition: all 0.3s; /* Smidig övergång för alla egenskaper */
}

/* Fokusläge för meddelandeinmatning */
html[data-page="signup"] .message-input:focus {
    border-color: #8ab4f8; /* Ljusblå kant vid fokus */
    box-shadow: 0 0 5px rgba(138, 180, 248, 0.5); /* Ljus skugga vid fokus */
}

/* Skicka-knapp */
html[data-page="signup"] .send-button {
    margin-top: 180px; /* Marginal ovanför */
    padding: 10px 20px; /* Inre marginaler */
    background-color: #4CAF50; /* Grön bakgrund */
    color: #fff; /* Vit textfärg */
    border: none; /* Ingen kant */
    border-radius: 20px; /* Rundade hörn */
    cursor: pointer; /* Pekaren blir en hand */
    font-size: 14px; /* Textstorlek */
    font-weight: bold; /* Fet text */
    margin-left: 10px; /* Marginal till vänster */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smidig övergång för bakgrundsfärg och transformation */
}

/* Hover- och aktivt tillstånd för skicka-knappen */
html[data-page="signup"] .send-button:hover {
    background-color: #45A049; /* Mörkare grön vid hover */
}

html[data-page="signup"] .send-button:active {
    transform: scale(0.98); /* Minska storleken lite vid klick */
}

/* Stäng-knappens stil */
html[data-page="signup"] .close-button {
    position: absolute; /* Absolut position */
    top: 10px; /* Placera 10px från toppen */
    right: 10px; /* Placera 10px från höger */
    background-color: transparent; /* Transparent bakgrund */
    border: none; /* Ingen kant */
    font-size: 18px; /* Textstorlek */
    color: #888; /* Grå textfärg */
    cursor: pointer; /* Pekaren blir en hand */
    transition: color 0.2s ease; /* Smidig övergång för färg */
}

html[data-page="signup"] .close-button:hover {
    color: #333; /* Mörkare grå vid hover */
}

/* spel.php */

/* Grundläggande stil för spel-sidan */
html[data-page="spel"] html, html[data-page="spel"] body {
    margin: 0; /* Ta bort marginaler */
    padding: 0; /* Ta bort padding */
    font-family: Arial, sans-serif; /* Sätt font */
    background-color: #131A20; /* Mörk bakgrundsfärg */
    color: white; /* Vit textfärg */
    height: 100%; /* Full höjd */
    overflow: hidden; /* Inaktivera rullning */
}

/* Valutabarens stil */
html[data-page="spel"] #currency-bar {
    display: flex; /* Flexbox */
    align-items: center; /* Vertikal centrerad */
    background-color: #333; /* Mörk bakgrund för baren */
    color: white; /* Vit textfärg */
    padding: 5px 10px; /* Inre marginaler */
    border-radius: 5px; /* Rundade hörn */
    width: 100px; /* Bredd */
    position: relative; /* Relativ position för att placera ikon */
}

html[data-page="spel"] * {
    scrollbar-width: none; /* Firefox: ta bort scrollbar */
    -ms-overflow-style: none; /* Internet Explorer 10+: ta bort scrollbar */
}

html[data-page="spel"] #currency-icon {
    position: absolute; /* Absolut position */
    height: 35px; /* Höjd på ikonen */
    right: 0px; /* Placera till höger */
}

html[data-page="spel"] *::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge: ta bort scrollbar */
}

/* Header-sektionen */
html[data-page="spel"] #header {
    position: fixed; /* Fixerad position */
    top: 0; /* Placera på toppen */
    left: 0; /* Placera till vänster */
    right: 0; /* Placera till höger */
    display: flex; /* Flexbox för horisontell layout */
    justify-content: space-between; /* Dela upp utrymmet mellan element */
    align-items: center; /* Vertikal centrerad */
    padding: 0 20px; /* Inre marginaler */
    height: 80px; /* Höjd på header */
    background-color: #0D1117; /* Mörk bakgrundsfärg */
    z-index: 1000; /* Säkerställ att den är över andra element */
    animation: fadeIn 1s ease-in forwards; /* Inledande fade-in animation */
}

html[data-page="spel"] #logo {
    cursor: pointer; /* Pekaren blir en hand */
    height: 48px; /* Höjd på logotypen */
    width: 48px;  /* Bredd på logotypen */
    margin-top: 25px; /* Marginal från toppen */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smidiga övergångar för transformation och boxskugga */
}

html[data-page="spel"] #logo:hover {
    transform: scale(1.1) translateY(-3px); /* Skala upp och flytta upp logotypen vid hover */
}

/* Sidomenykontroll */
html[data-page="spel"] #sidebar-toggle {
    position: fixed; /* Absolut position */
    top: 100px; /* Placera precis under header */
    left: 10px; /* Placera 10px från vänster */
    font-size: 30px; /* Stor textstorlek för symbol */
    cursor: pointer; /* Pekaren blir en hand */
    background-color: black; /* Svart bakgrund */
    color: white; /* Vit textfärg */
    padding: 10px; /* Inre marginaler */
    border-radius: 5px; /* Rundade hörn */
    z-index: 999; /* Säkerställ att knappen är över andra element */
    transition: left 0.5s; /* Smidig övergång för vänsterposition */
    animation: fadeIn 1s ease-in forwards; /* Fade-in animation */
}

/* Sidomeny */
html[data-page="spel"] .sidebar {
    position: fixed; /* Fixerad position */
    top: 81px; /* Placera precis under header */
    left: 0; /* Placera till vänster */
    width: 0; /* Initial bredd är 0 */
    height: calc(100% - 80px); /* Full höjd minus header höjd */
    background-color: black; /* Svart bakgrund */
    color: white; /* Vit textfärg */
    overflow-x: hidden; /* Inaktivera horisontell rullning */
    transition: width 0.5s; /* Smidig övergång för bredd */
    padding-top: 20px; /* Inre marginaler från toppen */
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5); /* Lätt skugga till höger */
    z-index: 998; /* Ligger under sidomenykontrollen */
    animation: fadeIn 1s ease-in forwards; /* Fade-in animation */
}

/* Profilsektion */
html[data-page="spel"] .profile-section {
    display: flex; /* Flexbox */
    align-items: center; /* Vertikal centrerad */
    padding: 20px; /* Inre marginaler */
    border-bottom: 1px solid white; /* Vit linje under sektionen */
}

html[data-page="spel"] .username {
    display: flex; /* Flexbox */
    align-items: flex-start; /* Justera innehåll till början */
    color: white; /* Vit textfärg */
}

/* Profilcirkel */
html[data-page="spel"] .profile-circle {
    width: 68px; /* Bredd på cirkeln */
    height: 68px; /* Höjd på cirkeln */
    border-radius: 50%; /* Gör den till en cirkel */
    background-position: center; /* Centrerar bakgrundsbilden */
    background-size: cover; /* Täcker hela området med bakgrundsbild */
    background-repeat: no-repeat; /* Ingen upprepning av bakgrundsbild */
    margin-right: 10px; /* Marginal till höger */
}

/* Knapplayout */
html[data-page="spel"] .buttons {
    display: flex; /* Flexbox för att hålla knapparna på rad */
    gap: 20px; /* Utrymme mellan knappar */
}

/* Inloggnings- och registreringsknappens stil */
html[data-page="spel"] #signin, html[data-page="spel"] #login {
    background-color: #1E2A38; /* Mörkare bakgrund som passar med sidan men kontrasterar */
    color: #FFFFFF; /* Vit text för bra kontrast */
    padding: 10px 20px; /* Inre marginaler */
    border: 2px solid #FFEB3B; /* Gul kant för ökad synlighet */
    border-radius: 8px; /* Mjukare hörn */
    cursor: pointer; /* Pekaren blir en hand */
    font-size: 0.9em; /* Liten textstorlek */
    font-weight: bold; /* Fet stil för att göra texten mer framträdande */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Smidig övergång för bakgrund, transformation och skugga */
    box-shadow: 0px 6px 15px rgba(255, 235, 59, 0.4); /* Mjuk glöd med gul nyans */
    width: 120px; /* Bredd */
    height: 40px; /* Höjd */
}

/* Hover-effekt */
html[data-page="spel"] #signin:hover, html[data-page="spel"] #login:hover {
    background-color: #293845; /* Lättare färg vid hover */
    border-color: #FFEB3B; /* Behåll den gula kanten */
    box-shadow: 0px 8px 20px rgba(255, 235, 59, 0.6); /* Starkare skugga vid hover */
    transform: translateY(-3px); /* Liten lyftning vid hover */
}

/* Aktivt tillstånd */
html[data-page="spel"] #signin:active, html[data-page="spel"] #login:active {
    background-color: #17202B; /* Mörkare vid klick */
    transform: translateY(1px); /* Sänker knappen vid klick */
    box-shadow: 0px 4px 12px rgba(255, 235, 59, 0.2); /* Mindre intensiv skugga när den klickas */
}

/* Behållare för cirklar */
html[data-page="spel"] #circle-container {
    position: relative; /* Relativ position för att placera element */
    display: inline-block; /* Inline-block för att hålla cirkeln */
}

/* Hover-cirkel effekt */
html[data-page="spel"] #hover-circle {
    position: absolute; /* Absolut positionering */
    top: 45%; /* Placera mitt på behållaren */
    left: 50%; /* Placera mitt på behållaren */
    transform: translate(-50%, -50%); /* Centrera cirkeln exakt */
    height: 60px; /* Cirkeldiameter */
    width: 55px; /* Cirkeldiameter */
    border-radius: 50%; /* Gör den till en cirkel */
    border-color: rgba(0, 255, 255, 0.8); /* Cyanfärgad kant */
    border-width: 5px; /* Kantens tjocklek */
    border-style: solid; /* Tydlig solid kant */
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.6), /* Ljusare glöd på olika nivåer */
        0 0 45px rgba(0, 255, 255, 0.5),
        0 0 60px rgba(0, 255, 255, 0.4);
    opacity: 0; /* Gör den osynlig till att börja med */
    z-index: -1; /* Sätt den bakom andra element */
    transition: opacity 0.5s ease, box-shadow 0.5s ease; /* Smidig övergång för synlighet och skugga */
}

html[data-page="spel"] #circle-container:hover #hover-circle {
    opacity: 1; /* Gör den synlig vid hover */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), /* Starkare glöd vid hover */
        0 0 30px rgba(0, 255, 255, 0.7),
        0 0 45px rgba(0, 255, 255, 0.6);
}

/* Neon-pulsanimation */
@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.5), 0 0 45px rgba(0, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.8), 0 0 60px rgba(0, 255, 255, 0.6), 0 0 90px rgba(0, 255, 255, 0.5);
    }
}

/* Logo och titel */
html[data-page="spel"] #logo-title {
    display: flex; /* Flexbox */
    align-items: center; /* Vertikal justering */
    gap: 10px; /* Utrymme mellan logo och titel */
}

/* Behållare för logo och titel */
html[data-page="spel"] #container1 {
    display: flex; /* Flexbox för layout */
    justify-content: space-between; /* Fördela utrymmet jämnt */
    align-items: center; /* Vertikal centrerad */
    padding: 20px; /* Inre marginaler */
    box-sizing: border-box; /* Ta med padding i elementets bredd */
    width: 100%; /* Full bredd */
}

/* Huvudtitel */
html[data-page="spel"] #container1 h1 {
    font-size: 2.5em; /* Stor textstorlek */
    color: #FFD700; /* Guldtext */
    text-shadow: 3px 3px 10px rgba(255, 215, 0, 0.7), 2px 2px 5px rgba(0, 0, 0, 0.7); /* Glödande effekt på texten */
    letter-spacing: 3px; /* Mellanrum mellan bokstäver */
    text-transform: uppercase; /* Gör texten versaler */
    margin: 0; /* Ta bort standardmarginal */
    display: inline-block; /* Behåll texten på en rad */
}

/* Spelsektion */
html[data-page="spel"] .game-section {
    display: flex; /* Flexbox */
    justify-content: center; /* Centrerad layout */
    gap: 20px; /* Utrymme mellan spel */
    flex-wrap: wrap; /* Tillåt omslag av spel */
    padding-top: 100px; /* Utrymme från toppen */
    padding: 40px 20px; /* Inre marginaler */
}

/* Spelbehållarens stil */
html[data-page="spel"] .game-container {
    background: linear-gradient(135deg, #0D1117 0%, #1E2A38 100%); /* Mörkare gradient som matchar bakgrunden */
    color: #FFFFFF; /* Vit textfärg */
    border-radius: 15px; /* Rundade hörn */
    padding: 20px; /* Inre marginaler */
    width: 350px; /* Bredd på behållaren */
    text-align: center; /* Centrerad text */
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.3); /* Cyan skugga för neon-effekt */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smidig övergång för skala och skugga */
    margin-top: 50px; /* Utrymme från toppen */
}

/* Hover-effekt på spelbehållare */
html[data-page="spel"] .game-container:hover {
    transform: scale(1.05); /* Liten förstoring vid hover */
    box-shadow: 0 15px 25px rgba(0, 255, 255, 0.4); /* Starkare cyan skugga vid hover */
}

/* Spelbild */
html[data-page="spel"] .game-container img {
    width: 100%; /* Fyller bredden */
    height: auto; /* Bevarar bildens proportioner */
    border-radius: 10px; /* Rundade hörn på bilden */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Lätt skugga */
}


/* Spelbehållarens titel */
html[data-page="spel"] .game-container h2 {
    font-size: 1.5em; /* Storlek på titeltext */
    margin: 15px 0; /* Utrymme ovanför och nedanför */
    font-weight: 700; /* Fetstil */
    color: #FFEB3B; /* Gul färg för att matcha rubrikens text */
    text-shadow: 1px 2px 4px rgba(255, 215, 0, 0.5); /* Skugga för att skapa en glödande effekt */
}

/* Spelbeskrivningstext */
html[data-page="spel"] .game-container p {
    font-size: 1em; /* Standard textstorlek */
    margin: 10px 0; /* Utrymme ovanför och nedanför */
    color: #BBB; /* Mjukare vit färg för texten */
    line-height: 1.4; /* Radavstånd för bättre läsbarhet */
}

/* Knapp i spelet */
html[data-page="spel"] .game-container button {
    background-color: #00FFFF; /* Cyan-färgad knapp för neon-tema */
    color: black; /* Svart text */
    border: none; /* Ingen kantlinje */
    padding: 12px 25px; /* Inre marginaler */
    border-radius: 8px; /* Rundade hörn */
    cursor: pointer; /* Handpekare vid hover */
    font-weight: bold; /* Fetstil */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smidig övergång vid hover */
    box-shadow: 0px 6px 15px rgba(0, 255, 255, 0.4); /* Cyan-glödande effekt */
}

/* Hover-effekt på knapp */
html[data-page="spel"] .game-container html[data-page="spel"] button:hover {
    background-color: #00BFBF; /* Mörkare cyan vid hover */
    box-shadow: 0px 8px 20px rgba(0, 255, 255, 0.6); /* Starkare glöd vid hover */
}

/* Knapp för att lägga till valuta */
html[data-page="spel"] #add-currency {
    background-color: #007bff; /* Blå knapp */
    color: white; /* Vit text */
    border: none; /* Ingen kantlinje */
    border-radius: 50%; /* Rund form */
    width: 25px; /* Bredd */
    height: 25px; /* Höjd */
    font-size: 16px; /* Textstorlek */
    cursor: pointer; /* Handpekare vid hover */
    margin-right: 8px; /* Utrymme till höger */
}

/* Visning av valuta */
html[data-page="spel"] #currency-amount {
    font-size: 18px; /* Större text för att visa valuta */
    margin-right: 8px; /* Utrymme till höger */
}

/* Overlay-stil (mörkt lager för modalfönster) */
html[data-page="spel"] #overlay {
    display: none; /* Börjar som osynlig */
    position: fixed; /* Fast position för att täcka hela skärmen */
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela bredden */
    height: 100%; /* Täcker hela höjden */
    background: rgba(0, 0, 0, 0.7); /* Halvtransparent svart bakgrund */
    z-index: 999; /* Sätt det bakom andra element */
}

/* Modal fönster (popup) */
html[data-page="spel"] #modal {
    position: fixed; /* Fast position */
    top: 50%; /* Vertikal mitt */
    left: 50%; /* Horisontell mitt */
    transform: translate(-50%, -50%); /* Centrera exakt */
    background: white; /* Vit bakgrund */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Lätt skugga */
    border-radius: 8px; /* Rundade hörn */
    z-index: 1000; /* Sätt det framför overlay */
    overflow: hidden; /* Dölj överflödigt innehåll */
    width: 90vw; /* 90% av viewportens bredd */
    height: 90vh; /* 90% av viewportens höjd */
    display: flex; /* Flexbox för layout i modal */
    flex-direction: column; /* Stapla innehåll vertikalt */
}

/* Exempel på knapp för att öppna modalfönster */
html[data-page="spel"] .open-modal-button {
    display: inline-block; /* Inline-block så att den visas på samma rad */
    padding: 10px 20px; /* Inre marginaler */
    background-color: #007BFF; /* Blå knapp */
    color: white; /* Vit text */
    border: none; /* Ingen kantlinje */
    border-radius: 5px; /* Rundade hörn */
    cursor: pointer; /* Handpekare vid hover */
}

/* Fade-in animation för overlay */
@keyframes fadeIn {
    0% { opacity: 0; } /* Börjar osynlig */
    100% { opacity: 1; } /* Blir synlig */
}

/* Fade-out animation för overlay */
@keyframes fadeOut {
    0% { opacity: 1; } /* Börjar synlig */
    100% { opacity: 0; } /* Blir osynlig */
}

/* Resizing animation för modal vid öppning */
@keyframes modalResizeIn {
    0% { transform: translate(-50%, -50%) scale(0.5); } /* Startar i miniatyrstorlek */
    100% { transform: translate(-50%, -50%) scale(1); } /* Växer till normalstorlek */
}

/* Återgå till mindre storlek vid stängning */
@keyframes modalResizeOut {
    0% { transform: translate(-50%, -50%) scale(1); } /* Startar normalstorlek */
    100% { transform: translate(-50%, -50%) scale(0.8); } /* Krymper något */
}

/* Applicera initiala stilar */
html[data-page="spel"] #overlay {
    display: none; /* Startar som osynlig */
    animation: fadeIn 1.5s ease-out forwards; /* Långsam fade-in animation */
}

html[data-page="spel"] #modal {
    animation: modalResizeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1.5) forwards; /* Modal animation vid öppning */
    margin-top: 30px; /* Utrymme ovanför modalfönstret */
}

/* Modal rubrikstil */
html[data-page="spel"] #modal h2 {
    color: black; /* Svart text */
}

/* Modal textstil */
html[data-page="spel"] #modal p {
    color: black; /* Svart text */
}

/* Fullskärmsknapp för modal */
html[data-page="spel"] #full-screen-button {
    position: absolute; /* Absolut position */
    top: 10px; /* Utrymme från toppen */
    right: 10px; /* Utrymme från höger */
    padding: 3px 3px; /* Liten inre marginal */
    font-size: 14px; /* Liten textstorlek */
    background-color: transparent; /* Transparent bakgrund */
    border: none; /* Ingen kantlinje */
    border-radius: 4px; /* Lätt rundade hörn */
    cursor: pointer; /* Handpekare vid hover */
}

/* Innehåll i modalen (popup) */
html[data-page="spel"] #modal-content {
    flex: 1; /* Flexbox för att fylla utrymmet */
    display: flex; /* Flexbox layout */
    justify-content: center; /* Centrera innehållet horisontellt */
    align-items: center; /* Centrera innehållet vertikalt */
}

/* Fullskärmsläge */
html[data-page="spel"] .full-screen-mode {
    display: flex; /* Flexbox layout */
    align-items: center; /* Vertikal centrering */
    justify-content: center; /* Horisontell centrering */
    height: 100vh; /* Full höjd på skärmen */
    width: 100vw; /* Full bredd på skärmen */
    margin: 0; /* Ta bort marginaler */
    border-radius: 0; /* Ingen rundning av hörnen */
}

/* Stil för rektangulär knapp (SVG) */
html[data-page="spel"] #rectbutton {
    fill: white; /* Vit fyllning */
    border: 2px solid black; /* Svart kantlinje */
}

/* Stil för iframe i spelet */
html[data-page="spel"] #game-iframe {
    flex: 1; /* Flexbox för att fylla utrymmet */
    width: 100%; /* Full bredd */
    height: 100%; /* Full höjd */
    border: none; /* Ingen kantlinje */
    display: block; /* Blocklayout */
}

/* Fullskärmsläge för iframe */
html[data-page="spel"] .full-screen-mode #game-iframe {
    width: 100vw; /* Full bredd på skärmen */
    height: 100vh; /* Full höjd på skärmen */
}

/* Stil för spelknappen */
html[data-page="spel"] #spelknapp {
    position: fixed; /* Fast position på skärmen */
    padding: 15px 30px; /* Inre marginaler */
    background-color: #4CAF50; /* Grön bakgrund */
    color: white; /* Vit text */
    border: none; /* Ingen kantlinje */
    border-radius: 8px; /* Rundade hörn */
    cursor: pointer; /* Handpekare vid hover */
    font-size: 16px; /* Textstorlek */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Lätt skugga */
    top: 50px; /* Utrymme från toppen */
}

/* Meny-styling */
html[data-page="spel"] nav ul {
    list-style: none; /* Ta bort punktlistan */
    display: flex; /* Flexbox layout */
    gap: 15px; /* Utrymme mellan menyalternativ */
}

/* Länkar i menyn */
html[data-page="spel"] nav ul li a {
    color: white; /* Vit text */
    text-decoration: none; /* Ingen understrykning */
    font-size: 18px; /* Textstorlek */
}

/* Dölja scrollbar */
html[data-page="spel"] ::-webkit-scrollbar {
    display: none; /* Döljer scrollbar */
}

/* Sidomeny-toggle knapp */
html[data-page="spel"] #sidebar-toggle {
    position: fixed; /* Fast position */
    top: 90px; /* Utrymme från toppen */
    left: 10px; /* Utrymme från vänster */
    font-size: 30px; /* Större fontstorlek */
    cursor: pointer; /* Handpekare vid hover */
    background-color: black; /* Svart bakgrund */
    color: white; /* Vit text */
    padding: 10px; /* Inre marginaler */
    border-radius: 5px; /* Rundade hörn */
    z-index: 1000; /* Högt index för att visas ovanpå */
    transition: left 0.5s; /* Smidig övergång vid positionändring */
}

/* Sidomeny */
html[data-page="spel"] .sidebar {
    height: 100%; /* Full höjd */
    width: 0; /* Börjar som stängd */
    position: fixed; /* Fast position */
    top: 80px; /* Utrymme från toppen */
    left: 0; /* Utrymme från vänster */
    background-color: black; /* Svart bakgrund */
    color: white; /* Vit text */
    overflow-x: hidden; /* Döljer horisontellt överskridande innehåll */
    transition: width 0.5s; /* Smidig övergång vid breddändring */
    padding-top: 20px; /* Utrymme från toppen */
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5); /* Skugga på höger sida */
}

/* Öppnad sidomeny */
html[data-page="spel"] .sidebar.open {
    width: 250px; /* Full bredd för den öppnade menyn */
}

/* Profilsektion */
html[data-page="spel"] .profile-section {
    display: flex; /* Flexbox layout */
    align-items: center; /* Vertikal centrering */
    padding: 20px; /* Inre marginaler */
    border-bottom: 1px solid white; /* Vit linje längst ned */
}

/* Level-sektion */
html[data-page="spel"] .level-section {
    padding: 20px; /* Inre marginaler */
    text-align: center; /* Centrera texten */
}

/* Nivårubrik */
html[data-page="spel"] .level-section h4 {
    margin: 0; /* Ta bort margin */
    color: #ffcc00; /* Guldgul färg för nivån */
}

/* XP-bar (erfarenhet) */
html[data-page="spel"] .exp-bar {
    width: 100%; /* Full bredd */
    height: 15px; /* Höjd */
    background-color: #333; /* Mörk bakgrund */
    border-radius: 10px; /* Rundade hörn */
    margin: 10px 0; /* Utrymme ovanför och nedanför */
}

/* XP-framsteg */
html[data-page="spel"] .exp-progress {
    height: 100%; /* Full höjd */
    background-color: #ffcc00; /* Guldgul färg för framsteg */
    border-radius: 10px; /* Rundade hörn */
}

/* Extra lång XP-bar för avancerat system */
html[data-page="spel"] .exp-bar2 {
    width: 350%; /* Bredd större än skärmen */
    height: 15px; /* Höjd */
    background-color: #333; /* Mörk bakgrund */
    border-radius: 10px; /* Rundade hörn */
    margin: 10px auto; /* Centrera elementet horisontellt */
    transform: translateX(-37%); /* Justera position för centrerad visning */
}

/* Progressbar för erfarenhet */
html[data-page="spel"] .exp-progress2 {
    height: 100%; /* Full höjd */
    background-color: #ffcc00; /* Guldgul färg */
    border-radius: 10px; /* Rundade hörn */
}

/* Text för nivå */
html[data-page="spel"] .level-section p {
    margin: 0; /* Ta bort marginaler */
    color: white; /* Vit text */
}

/* Länk för a-tag */
html[data-page="spel"] #a-tag1 {
    color: white; /* Vit text */
    text-decoration: none; /* Ingen understrykning */
    margin-left: 90px; /* Utrymme till vänster */
}

/* Placera sökprofilknapp i övre högra hörnet */
html[data-page="spel"] .search-profile-btn-container {
    position: fixed; /* Fast position */
    top: 20px; /* Utrymme från toppen */
    right: 150px; /* Utrymme från höger */
    z-index: 1000; /* Hög z-index för att den ska visas ovanpå andra element */
}

/* Styling för sökresultat */
html[data-page="spel"] #searchResults {
    margin-top: 10px; /* Utrymme ovanför */
}

/* Styling för sökknappen */
html[data-page="spel"] #searchProfileBtn {
    background-color: #1E2A38; /* Mörk bakgrund */
    color: #FFFFFF; /* Vit text */
    padding: 10px 20px; /* Inre marginaler */
    border: 2px solid #FFEB3B; /* Gul kant för att ge kontrast */
    border-radius: 8px; /* Rundade hörn */
    cursor: pointer; /* Handpekare vid hover */
    font-size: 0.7em; /* Mindre textstorlek */
    font-weight: bold; /* Fet text */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Smidiga övergångar */
    box-shadow: 0px 6px 15px rgba(255, 235, 59, 0.4); /* Lätt glöd effekt i gult */
    width: 120px; /* Bredd på knappen */
    height: 40px; /* Höjd på knappen */
}

/* Hover-effekt för sökknappen */
html[data-page="spel"] #searchProfileBtn:hover {
    background-color: #00ccff; /* Ljusare blå på hover */
    transform: translateY(-5px); /* Lyft upp knappen vid hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 20px #00ffea, 0 0 35px #00ffea; /* Förstärk glödeffekt */
}

/* Aktiv knapp-effekt */
html[data-page="spel"] #searchProfileBtn:active {
    transform: translateY(0); /* Återställ positionen vid klick */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 15px #00ffea, 0 0 25px #00ffea; /* Återställ glöd vid klick */
}

/* Vit fyrkant (profilruta) som är dold till att börja med */
html[data-page="spel"] .profile-square {
    width: 300px; /* Bredd på fyrkanten */
    height: 270px; /* Höjd på fyrkanten */
    background-color: white; /* Vit bakgrund */
    position: fixed; /* Fast position */
    top: 70px; /* Utrymme från toppen */
    right: 9px; /* Utrymme från höger */
    display: none; /* Dold till att börja med */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Skugga för att ge djup */
    border-radius: 10px; /* Rundade hörn */
    z-index: 999; /* Hög z-index för att visa ovanpå andra element */
    opacity: 0; /* Börjar osynlig */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smidig fade och rörelse */
}

/* Aktivt tillstånd för profilrutan */
html[data-page="spel"] .profile-square.active {
    display: block; /* Gör rutan synlig */
    opacity: 1; /* Full opacitet */
    transform: translateY(10px); /* Rörelse nedåt för en smidig in-effekt */
}

/* Sökruta container */
html[data-page="spel"] .search-container {
    position: relative; /* Relativ position */
    width: 90%; /* Bredd på 90% */
    left: 15px; /* Utrymme till vänster */
}

/* Sökinputfält */
html[data-page="spel"] #searchInput {
    width: 80%; /* 80% bredd */
    padding: 10px 40px 10px 10px; /* Utrymme för sökikonen */
    font-size: 14px; /* Textstorlek */
    border: 2px solid #1e90ff; /* Blå kantlinje */
    border-radius: 5px; /* Rundade hörn */
    outline: none; /* Ingen fokusring */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Lätt skugga */
    transition: border-color 0.3s ease; /* Smidig övergång av kantfärgen */
    margin-top: 20px; /* Utrymme ovanför */
}

/* Färggänder på inputfältet när det är i fokus */
html[data-page="spel"] #searchInput:focus {
    border-color: #00ccff; /* Blå kant när i fokus */
}

/* Profilnamn och användarnamn */
html[data-page="spel"] .username {
    display: flex; /* Flexbox layout */
    align-items: flex-start; /* Justera till toppen */
}

/* Profilbild i cirkelformat */
html[data-page="spel"] .profile-circle {
    width: 68px; /* Bredd på cirkeln */
    height: 68px; /* Höjd på cirkeln */
    border-radius: 50%; /* Gör bilden rund */
    background-position: center; /* Centrerad bakgrund */
    background-size: cover; /* Täck hela cirkeln med bilden */
    background-repeat: no-repeat; /* Ingen upprepning av bakgrunden */
    cursor: pointer; /* Handpekare vid hover */
    margin-top: -27px; /* Utrymme ovanför */
    margin-right: 10px; /* Utrymme till höger */
    margin-left: -10px; /* Utrymme till vänster */
}

/* Användarnamnstext */
html[data-page="spel"] .username h3 {
    font-size: 1.5em; /* Större textstorlek */
    font-family: Arial, sans-serif; /* Modern font */
    margin-top: -10px; /* Flytta upp texten lite */
}

/* Styling för resultatitems i sökresultat */
html[data-page="spel"] .result-item {
    display: flex; /* Flexbox layout */
    align-items: center; /* Vertikal centrering */
    border-bottom: 1px solid #ddd; /* Ljusgrå linje längst ned */
    margin: 4px 0; /* Utrymme ovanför och nedanför */
    width: 90%; /* 90% bredd */
    margin-left: 5%; /* Utrymme till vänster */
    padding: 4px 0; /* Inre marginaler */
    transition: background-color 0.3s ease, font-size 0.3s ease; /* Smidiga övergångar */
}


/* Hover-effekt för result-item */
html[data-page="spel"] .result-item:hover {
    font-size: 1.05em; /* Större textstorlek vid hover */
    background-color: #f9f9f9; /* Ljus bakgrundsfärg vid hover */
    border-radius: 8px; /* Rundade hörn vid hover */
    cursor: pointer; /* Handpekare vid hover */
}

/* Profilbildens grundläggande styling */
html[data-page="spel"] .profile-image {
    width: 40px; /* Bredd på bilden */
    height: 40px; /* Höjd på bilden */
    border-radius: 50%; /* Gör bilden rund */
    object-fit: cover; /* Täcker hela cirkeln med bilden */
    border: 2px solid black; /* Svart kantlinje */
    margin-right: 8px; /* Utrymme till höger */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Smidig övergång för transform och kantfärg */
}

/* Effekt för profilbilden vid hover på result-item */
html[data-page="spel"] .result-item:hover html[data-page="spel"] .profile-image {
    transform: scale(1.1); /* Större bild vid hover */
    border-color: #007bff; /* Blå kantfärg vid hover */
}

/* Färgsättning för användarnamn vid hover */
html[data-page="spel"] .result-item:hover html[data-page="spel"] .username {
    color: #007bff; /* Ljusblå färg vid hover */
}

/* Styling för sökresultat container */
html[data-page="spel"] .search-results {
    max-height: 180px; /* Maximal höjd för listan */
    overflow-y: auto; /* Scrollbar för vertikal rullning */
    background-color: white; /* Vit bakgrund */
    padding: 8px; /* Utrymme inuti */
    border-radius: 8px; /* Rundade hörn */
}

/* Stängningsknapp för profil */
html[data-page="spel"] .close-button {
    background-color: transparent; /* Transparent bakgrund */
    border: none; /* Ingen kantlinje */
    font-size: 20px; /* Textstorlek */
    font-weight: bold; /* Fet text */
    cursor: pointer; /* Handpekare vid hover */
    position: absolute; /* Absolut positionering */
    top: 10px; /* Utrymme från toppen */
    right: 10px; /* Utrymme från höger */
}

/* Cirkulär profilbild (för vald profil) */
html[data-page="spel"] .circle-profile {
    width: 80px; /* Bredd på cirkeln */
    height: 80px; /* Höjd på cirkeln */
    border-radius: 50%; /* Rund profilbild */
    border: 2px solid black; /* Svart kantlinje */
    margin-left: 40%; /* Centrerad horisontellt */
}

/* Container för vald profil */
html[data-page="spel"] .selected-profile-container {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Vertikal ordning */
    align-items: center; /* Centrera horisontellt */
    text-align: center; /* Centrerad text */
}

/* Vald profils cirkel med hover-effekt */
html[data-page="spel"] .selected-profile-circle {
    width: 80px; /* Bredd på cirkeln */
    height: 80px; /* Höjd på cirkeln */
    border-radius: 50%; /* Rund profilbild */
    transition: transform 0.3s ease-in, box-shadow 0.3s ease-in, translate 0.3s ease-in; /* Smidiga övergångar */
}

/* Hover-effekt för vald profils cirkel */
html[data-page="spel"] .selected-profile-circle:hover {
    transform: scale(1.05); /* Gör cirkeln lite större vid hover */
    transform: translateY(-3px); /* Flyttar cirkeln upp lite */
    box-shadow: 0px 0px 10px #ffcc00; /* Ljusglöd vid hover */
    border-radius: 50%; /* Rund profilbild */
}

/* Användarnamn under vald profil */
html[data-page="spel"] .username2 {
    margin-top: 10px; /* Utrymme ovanför användarnamnet */
    font-size: 20px; /* Textstorlek */
    font-family: Arial, Helvetica, sans-serif; /* Fontfamilj */
    font-weight: bold; /* Fet text */
    text-transform: capitalize; /* Första bokstaven stor */
    color: black; /* Svart text */
}

/* Styling för nivå-sektion */
html[data-page="spel"] .level-section2 p {
    color: black; /* Svart text */
    position: absolute; /* Absolut positionering */
    top: 0; /* Position vid toppen av containern */
    left: 50%; /* Centrerad horisontellt */
    transform: translateX(-50%); /* Justera till 50% för att centrera */
    z-index: 10; /* Högt z-index för att vara ovanpå */
    margin-top: 190px; /* Utrymme ovanför */
}

/* Färgsättning för nivårubrik */
html[data-page="spel"] .level-section2 h4 {
    color: #ffcc00; /* Guldgul text */
    margin-bottom: 0px; /* Ingen marginal nedtill */
    margin-top: 10px; /* Utrymme ovanför */
}

/* Meddelandeknapp */
html[data-page="spel"] .messagebutton {
    position: absolute; /* Absolut positionering */
    width: 120px; /* Bredd på knappen */
    height: 43px; /* Höjd på knappen */
    background-color: #007bff; /* Blå bakgrund */
    color: white; /* Vit text */
    top: 215px; /* Utrymme från toppen */
    left: 20px; /* Utrymme från vänster */
    border: none; /* Ingen kantlinje */
    border-radius: 5px; /* Rundade hörn */
    transition: background-color 0.3s, transform 0.3s; /* Smidiga övergångar */
}

/* Hover-effekt för meddelandeknapp */
html[data-page="spel"] .messagebutton:hover {
    background-color: #0056b3; /* Mörkare blå på hover */
    transform: translateY(-3px) scale(1.03); /* Lyft och förstoring på hover */
}

/* Inmatningsfält för att skriva meddelanden */
html[data-page="spel"] .message-input {
    width: calc(100% - 90px); /* Fyller nästan hela bredden (förutom knappen) */
    padding: 10px; /* Inre marginaler */
    border-radius: 20px; /* Rundade hörn */
    border: 1px solid #dcdcdc; /* Ljusgrå kantlinje */
    font-size: 14px; /* Textstorlek */
    outline: none; /* Ingen fokusring */
    box-sizing: border-box; /* Inkludera padding i storleken */
    transition: all 0.3s; /* Smidig övergång för alla effekter */
}

/* Fokuserad tillstånd för meddelandeinmatning */
html[data-page="spel"] .message-input:focus {
    border-color: #8ab4f8; /* Ljusblå kant vid fokus */
    box-shadow: 0 0 5px rgba(138, 180, 248, 0.5); /* Lätt glöd vid fokus */
}

/* Skicka-knapp */
html[data-page="spel"] .send-button {
    margin-top: 180px; /* Utrymme från toppen */
    padding: 10px 20px; /* Padding inuti knappen */
    background-color: #4CAF50; /* Grön bakgrund */
    color: #fff; /* Vit textfärg */
    border: none; /* Ingen kantlinje */
    border-radius: 20px; /* Rundade hörn */
    cursor: pointer; /* Handpekare vid hover */
    font-size: 14px; /* Textstorlek */
    font-weight: bold; /* Fet text */
    margin-left: 10px; /* Litet utrymme till vänster */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smidig övergång för bakgrundsfärg och transformering */
}

/* Hover- och aktivt tillstånd för skicka-knappen */
html[data-page="spel"] .send-button:hover {
    background-color: #45A049; /* Mörkare grön vid hover */
}

html[data-page="spel"] .send-button:active {
    transform: scale(0.98); /* Lätt krympning vid klick */
}

/* Stängningsknapp */
html[data-page="spel"] .close-button {
    position: absolute; /* Absolut positionering */
    top: 10px; /* Utrymme från toppen */
    right: 10px; /* Utrymme från höger */
    background-color: transparent; /* Transparent bakgrund */
    border: none; /* Ingen kantlinje */
    font-size: 18px; /* Textstorlek */
    color: #888; /* Ljusgrå textfärg */
    cursor: pointer; /* Handpekare vid hover */
    transition: color 0.2s ease; /* Smidig övergång för färg */
}

html[data-page="spel"] .close-button:hover {
    color: #333; /* Mörkare grå vid hover */
}

/* Spel1 layout */
html[data-page="spel1"] body {
    font-family: 'Poppins', sans-serif; /* Fontfamilj */
    display: flex; /* Flexbox-layout */
    flex-direction: column; /* Vertikal ordning */
    align-items: center; /* Centrera horisontellt */
    justify-content: center; /* Centrera vertikalt */
    height: 100vh; /* Fyll hela höjden */
    margin: 0; /* Ta bort standardmarginaler */
    background: linear-gradient(135deg, #ff9a9e, #fad0c4); /* Gradientbakgrund */
    color: #333; /* Mörkgrå textfärg */
}

/* Container för spelet */
html[data-page="spel1"] .game-container {
    text-align: center; /* Centrerad text */
    background: white; /* Vit bakgrund */
    padding: 20px; /* Padding */
    border-radius: 15px; /* Rundade hörn */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Skugga */
    margin-top: 12%; /* Utrymme från toppen */
}

/* Nivåtext */
html[data-page="spel1"] .level {
    font-size: 2.5em; /* Stor textstorlek */
    font-weight: bold; /* Fet text */
    margin-bottom: 10px; /* Utrymme nedtill */
}

/* Spelrutnät */
html[data-page="spel1"] .grid {
    display: grid; /* Gridlayout */
    grid-template-columns: repeat(3, 150px); /* Tre kolumner */
    gap: 20px; /* Utrymme mellan rutorna */
    margin-bottom: 10px; /* Utrymme nedtill */
}

/* Enskild ruta i rutnätet */
html[data-page="spel1"] .box {
    width: 150px; /* Bredd på rutan */
    height: 150px; /* Höjd på rutan */
    background-color: #f5f5f5; /* Ljusgrå bakgrund */
    border: 3px solid #ddd; /* Grå kantlinje */
    border-radius: 15px; /* Rundade hörn */
    cursor: pointer; /* Handpekare vid hover */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smidiga övergångar */
}

/* Hover-effekt för rutor */
html[data-page="spel1"] .box:hover {
    transform: scale(1.1); /* Förstora vid hover */
    background-color: #e0e0e0; /* Ljusare grå vid hover */
}

/* Aktiv ruta (när användaren klickar på den) */
html[data-page="spel1"] .box.active {
    background-color: #ffd700; /* Guldgul bakgrund */
}

/* Korrekt ruta */
html[data-page="spel1"] .box.correct {
    background-color: #4caf50; /* Grön bakgrund för korrekt svar */
}

/* Felaktig ruta */
html[data-page="spel1"] .box.incorrect {
    background-color: #f44336; /* Röd bakgrund för felaktigt svar */
}

/* Kontrollsektion (t.ex. knappar för att starta om eller gå vidare) */
html[data-page="spel1"] .controls {
    margin: 30px 0; /* Utrymme ovanför och nedan */
}

/* Statistiksida */
html[data-page="spel1"] .stats {
    margin-top: 30px; /* Utrymme ovanför */
    font-size: 1.5em; /* Stor textstorlek */
    color: #555; /* Grå textfärg */
}

/* Växla mellan olika lägen (t.ex. ljud eller andra inställningar) */
html[data-page="spel1"] .switch-container {
    display: flex; /* Flexbox-layout */
    align-items: center; /* Centrera vertikalt */
    justify-content: center; /* Centrera horisontellt */
    gap: 15px; /* Utrymme mellan elementen */
    margin-bottom: -3%; /* Justera nedre marginal */
}

/* Växlingsknapp */
html[data-page="spel1"] .switch {
    position: relative; /* Relativ positionering */
    display: inline-block; /* Inline-block layout */
    width: 80px; /* Bredd på knappen */
    height: 40px; /* Höjd på knappen */
}

/* Dold input för växling */
html[data-page="spel1"] .switch input {
    opacity: 0; /* Dold */
    width: 0; /* Ingen bredd */
    height: 0; /* Ingen höjd */
}

/* Växlarens bakgrund */
html[data-page="spel1"] .slider {
    position: absolute; /* Absolut positionering */
    cursor: pointer; /* Handpekare vid hover */
    top: 0; /* Översta position */
    left: 0; /* Vänster position */
    right: 0; /* Höger position */
    bottom: 0; /* Bottenposition */
    background-color: #ddd; /* Grå bakgrund */
    transition: .4s; /* Smidig övergång */
    border-radius: 40px; /* Rundade hörn */
}

/* Växlarens lilla knapp (den runda knappen) */
html[data-page="spel1"] .slider:before {
    position: absolute; /* Absolut positionering */
    content: ""; /* Inget innehåll */
    height: 30px; /* Höjd på knappen */
    width: 30px; /* Bredd på knappen */
    left: 5px; /* Utrymme från vänster */
    bottom: 5px; /* Utrymme från botten */
    background-color: white; /* Vit bakgrund på knappen */
    transition: .4s; /* Smidig övergång */
    border-radius: 50%; /* Rund knapp */
}

/* Växla bakgrundsfärg för slider när den är markerad */
html[data-page="spel1"] input:checked + .slider {
    background-color: #4caf50; /* Grön bakgrund när markerad */
}

/* Förflyttning av slider-knappen när den är markerad */
html[data-page="spel1"] input:checked + .slider:before {
    transform: translateX(40px); /* Flytta knappen till höger */
}

/* Stil för knappar */
html[data-page="spel1"] button {
    background: #4caf50; /* Grön bakgrund */
    color: white; /* Vit textfärg */
    border: none; /* Ingen kantlinje */
    padding: 15px 30px; /* Padding inuti knappen */
    border-radius: 8px; /* Rundade hörn */
    font-size: 1.2em; /* Textstorlek */
    cursor: pointer; /* Handpekare vid hover */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smidiga övergångar */
}

/* Hover-effekt för knappar */
html[data-page="spel1"] button:hover {
    background-color: #45a049; /* Mörkare grön vid hover */
    transform: scale(1.1); /* Förstora vid hover */
}

/* Aktivt tillstånd för knappar */
html[data-page="spel1"] button:active {
    transform: scale(1); /* Återgå till normal storlek vid klick */
}

/* Popup-fönster */
html[data-page="spel1"] .popup {
    position: fixed; /* Absolut positionering */
    top: -150%; /* Döljer popup ovanför skärmen */
    left: 10%; /* Utrymme från vänster */
    transform: translateX(-50%); /* Centrerar popupen */
    background: white; /* Vit bakgrund */
    padding: 30px; /* Padding */
    border-radius: 15px; /* Rundade hörn */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); /* Skugga */
    text-align: center; /* Centrerad text */
    transition: top 0.5s ease; /* Smidig övergång när popupen syns */
    z-index: 1000; /* Högt z-index för att säkerställa att den ligger över andra element */
}

/* När popupen blir synlig */
html[data-page="spel1"] .popup.visible {
    top: -55%; /* Visa popupen */
}

/* Stäng-knapp för popup */
html[data-page="spel1"] .popup .close-btn {
    background: none; /* Ingen bakgrund */
    border: none; /* Ingen kantlinje */
    font-size: 2em; /* Stor textstorlek */
    cursor: pointer; /* Handpekare vid hover */
    position: absolute; /* Absolut positionering */
    top: 10px; /* Utrymme från toppen */
    right: 10px; /* Utrymme från höger */
    color: black; /* Svart textfärg */
}

/* Overlay bakom popup */
html[data-page="spel1"] .overlay {
    position: fixed; /* Absolut positionering */
    top: 0; /* Översta position */
    left: 0; /* Vänster position */
    width: 100%; /* Full bredd */
    height: 100%; /* Full höjd */
    background: rgba(0, 0, 0, 0.5); /* Halvtransparent svart bakgrund */
    z-index: 999; /* Lägger overlay bakom popup */
    display: none; /* Döljer overlay */
}

/* När overlay blir synlig */
html[data-page="spel1"] .overlay.visible {
    display: block; /* Visa overlay */
}

/* Container för växlingsknappar */
html[data-page="spel1"] .button-switch-container {
    display: flex; /* Flexbox-layout */
    align-items: center; /* Vertikalt centrerad */
    justify-content: center; /* Horisontellt centrerad */
    gap: 15px; /* Utrymme mellan knappar */
}

/* Start-knapp */
html[data-page="spel1"] #start-button {
    margin-right: 35%; /* Utrymme till höger */
    margin-bottom: -3%; /* Litet utrymme nedtill */
}

/* Betalnings-popup */
html[data-page="spel1"] #pay-popup {
    display: none; /* Döljer popupen */
    position: fixed; /* Absolut positionering */
    top: 50%; /* Centrera vertikalt */
    left: 50%; /* Centrera horisontellt */
    transform: translate(-50%, -50%); /* Justera för exakt centrering */
    background: white; /* Vit bakgrund */
    padding: 20px; /* Padding */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Skugga */
    z-index: 1000; /* Högt z-index för att popup ska vara överst */
}

/* När betalnings-popupen blir synlig */
html[data-page="spel1"] #pay-popup.visible {
    display: block; /* Visa popup */
}

/* Revive-popup */
html[data-page="spel1"] #revive-popup.popup {
    /* Samma stil som popupen ovan */
    display: none; /* Döljer popupen */
    position: fixed; /* Absolut positionering */
    top: 50%; /* Centrera vertikalt */
    left: 50%; /* Centrera horisontellt */
    transform: translate(-50%, -50%); /* Justera för exakt centrering */
    background: white; /* Vit bakgrund */
    padding: 20px; /* Padding */
    border-radius: 10px; /* Rundade hörn */
    z-index: 1001; /* Står ovanpå den andra popupen */
}

/* När revive-popupen blir synlig */
html[data-page="spel1"] #revive-popup.visible {
    display: block; /* Visa popup */
}

/* Knappar för popup */
html[data-page="spel1"] .popup-buttons {
    display: flex; /* Flexbox-layout */
    gap: 10px; /* Utrymme mellan knappar */
    margin-top: 15px; /* Utrymme ovanför */
}

/* Köp-försök-knapp */
html[data-page="spel1"] #buy-attempts-button {
    position: relative; /* Relativ positionering */
    left: 15%; /* Utrymme från vänster */
}

/* Styling för spel 3 (spel3.php) */
html[data-page="spel3"] body {
    font-family: 'Poppins', sans-serif; /* Typsnitt */
    margin: 0; /* Ingen marginal */
    display: flex; /* Flexbox-layout */
    justify-content: center; /* Centrerad horisontellt */
    align-items: center; /* Centrerad vertikalt */
    height: 100vh; /* Full höjd */
    background: linear-gradient(to bottom, #1e3c72, #2a5298); /* Bakgrundsgradient */
    color: #ffffff; /* Vit textfärg */
}


/* Container för spelet (spel3) */
html[data-page="spel3"] #game-container {
    display: flex; /* Flexbox-layout */
    flex-direction: column; /* Vertikal layout */
    align-items: center; /* Centrerar horisontellt */
    gap: 20px; /* Utrymme mellan elementen */
    padding: 20px; /* Padding inuti */
    background: rgba(255, 255, 255, 0.1); /* Transparent vit bakgrund */
    border-radius: 15px; /* Rundade hörn */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Skugga för att ge djup */
}

/* Grid-container för spelets rutor */
html[data-page="spel3"] #grid-container {
    display: grid; /* Grid-layout */
    grid-template-columns: repeat(4, 100px); /* 4 kolumner med 100px bredd */
    grid-template-rows: repeat(4, 100px); /* 4 rader med 100px höjd */
    gap: 10px; /* Utrymme mellan rutorna */
    border: 5px solid #ccc; /* Grå kantlinje */
    padding: 15px; /* Padding inuti */
    border-radius: 10px; /* Rundade hörn */
    background: rgba(0, 0, 0, 0.2); /* Transparent svart bakgrund */
}

/* Rutorna i spelet */
html[data-page="spel3"] .grid-box {
    width: 100px; /* Bredd */
    height: 100px; /* Höjd */
    border: 1px solid #fff; /* Vit kantlinje */
    cursor: pointer; /* Handpekare vid hover */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Övergångar för transformering och bakgrundsfärg */
    border-radius: 10px; /* Rundade hörn */
}

/* Hover-effekt för rutorna */
html[data-page="spel3"] .grid-box:hover {
    transform: scale(1.1); /* Förstorar när man hovrar */
}

/* Information om spelets nivå */
html[data-page="spel3"] #level-info {
    font-size: 24px; /* Större textstorlek */
    font-weight: bold; /* Fet text */
    margin-bottom: 10px; /* Utrymme under */
    text-align: center; /* Centrerad text */
}

/* Timer och antal försök */
html[data-page="spel3"] #timer, html[data-page="spel3"] #attempts {
    margin: 5px 0; /* Litet utrymme över och under */
    font-size: 18px; /* Textstorlek */
    font-weight: bold; /* Fet text */
}

/* Start-knappens stil */
html[data-page="spel3"] #start-button {
    font-size: 18px; /* Textstorlek */
    padding: 10px 20px; /* Padding inuti knappen */
    background-color: #28a745; /* Grön bakgrund */
    color: white; /* Vit textfärg */
    border: none; /* Ingen kantlinje */
    border-radius: 5px; /* Rundade hörn */
    cursor: pointer; /* Handpekare vid hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smidig övergång för bakgrund och transformering */
}

/* Hover-effekt för start-knappen */
html[data-page="spel3"] #start-button:hover {
    background-color: #218838; /* Mörkare grön vid hover */
    transform: scale(1.05); /* Liten förstoring vid hover */
}

/* Overlay när nytt popup visas */
html[data-page="spel3"] #new-popup-overlay {
    position: fixed; /* Absolut positionering */
    top: 0; /* Översta position */
    left: 0; /* Vänster position */
    width: 100%; /* Full bredd */
    height: 100%; /* Full höjd */
    background: rgba(0, 0, 0, 0.8); /* Halvtransparent svart bakgrund */
    z-index: 999; /* Lägg overlayen ovanpå andra element */
    display: none; /* Döljer overlay till att börja med */
}

/* Nytt spel-överpopup */
html[data-page="spel3"] #new-game-over-popup {
    position: fixed; /* Absolut positionering */
    top: 30%; /* Positioner vid 30% från toppen */
    left: 50%; /* Centrerar horisontellt */
    transform: translateX(-50%); /* Justera för exakt centrering */
    width: 300px; /* Bredd på popupen */
    padding: 20px; /* Padding inuti */
    background: #fff; /* Vit bakgrund */
    color: #333; /* Mörk textfärg */
    border-radius: 10px; /* Rundade hörn */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Skugga för djup */
    text-align: center; /* Centrerad text */
    opacity: 0; /* Startar osynlig */
    display: none; /* Döljer popupen */
    transition: opacity 0.3s ease; /* Smidig övergång för synlighet */
    animation: fall-down 1s cubic-bezier(0.25, 1, 0.5, 1) forwards; /* Animation för att falla ned */
}

/* Rubrik för game over-popup */
html[data-page="spel3"] #new-game-over-popup h2 {
    margin-top: 0; /* Ingen marginal ovanför */
}

/* Stäng-knapp för game over-popup */
html[data-page="spel3"] #new-popup-close {
    position: absolute; /* Absolut positionering */
    top: 10px; /* Utrymme från toppen */
    right: 10px; /* Utrymme från höger */
    background: none; /* Ingen bakgrund */
    border: none; /* Ingen kantlinje */
    font-size: 18px; /* Textstorlek */
    cursor: pointer; /* Handpekare vid hover */
    color: #666; /* Grå textfärg */
}

/* Hover-effekt för stäng-knappen */
html[data-page="spel3"] #new-popup-close:hover {
    color: #000; /* Svart textfärg vid hover */
}

/* Fall-animation för popupen */
@keyframes fall-down {
    from {
        top: -100%; /* Start från ovanför skärmen */
    }
    to {
        top: 30%; /* Sluta vid 30% från toppen */
        opacity: 1; /* Fullt synlig */
    }
}

/* Nytt köp-försök-knapp */
html[data-page="spel3"] #new-buy-attempts-button {
    padding: 10px 20px; /* Padding */
    font-size: 14px; /* Textstorlek */
    background-color: #4CAF50; /* Grön bakgrund */
    color: white; /* Vit textfärg */
    border: none; /* Ingen kantlinje */
    border-radius: 5px; /* Rundade hörn */
    cursor: pointer; /* Handpekare vid hover */
    margin-top: 20px; /* Utrymme ovanför */
    display: none; /* Döljer knappen till att börja med */
}

/* Hover-effekt för köp-försök-knappen */
html[data-page="spel3"] #new-buy-attempts-button:hover {
    background-color: #45a049; /* Mörkare grön vid hover */
}

/* Styling för menyknapp i spel 4 (spel4.php) */
html[data-page="spel4"] #menu_button_container {
    position: absolute; /* Absolut positionering */
    top: 1em; /* Utrymme från toppen */
    right: 1em; /* Utrymme från höger */
}


/* Menyknapp för spel 4 */
html[data-page="spel4"] #menu_button {
    font-size: 1.5em; /* Större textstorlek */
    padding: 0.8em 1.5em; /* Padding runt knappen */
    background-color: #ff8c00; /* Ljus orange bakgrund */
    color: #fff; /* Vit textfärg */
    border: 2px solid #e67300; /* Lite mörkare orange kantlinje */
    border-radius: 10px; /* Rundade hörn */
    cursor: pointer; /* Handpekare vid hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Skugga för djup */
    text-transform: uppercase; /* Gör texten versaler */
    font-family: fantasy; /* Specifik teckensnitt */
    font-weight: bold; /* Fet text */
    transition: transform 0.2s, background-color 0.3s, box-shadow 0.3s; /* Smidiga övergångar */
}

/* Hover-effekt för menyknappen */
html[data-page="spel4"] #menu_button:hover {
    background-color: #ffa500; /* Ljusare orange vid hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Starkare skugga vid hover */
    transform: scale(1.05); /* Förstoring vid hover */
}

/* Startsidans stil */
html[data-page="spel4"] #start_page {
    position: fixed; /* Absolut positionering */
    top: 0; /* Översta position */
    left: 0; /* Vänster position */
    width: 100%; /* Full bredd */
    height: 100%; /* Full höjd */
    display: flex; /* Flexbox-layout */
    justify-content: center; /* Centrerar horisontellt */
    align-items: center; /* Centrerar vertikalt */
    background-color: #a7c53f; /* Grön bakgrund */
    background-image: radial-gradient(circle at 0% 0%, transparent 50%, rgba(0,0,0,0.1) 50%), 
                      radial-gradient(circle at center, rgba(0,0,0,0.1) 50%, transparent 50%), 
                      radial-gradient(circle at 100% 100%, transparent 50%, rgba(0,0,0,0.1) 50%), 
                      radial-gradient(circle at 0% 100%, transparent 50%, rgba(0,0,0,0.1) 50%), 
                      radial-gradient(circle at 100% 0%, transparent 50%, rgba(0,0,0,0.1) 50%);
    background-size: 8em 8em; /* Bakgrundens storlek */
    z-index: 10; /* Lägg start-sidan ovanpå andra element */
}

/* Startknappen på start-sidan */
html[data-page="spel4"] #start_page button {
    font-size: 2em; /* Större textstorlek */
    padding: 1em 2em; /* Padding runt knappen */
    background-color: #ff8c00; /* Ljus orange bakgrund */
    color: #fff; /* Vit textfärg */
    border: 2px solid #e67300; /* Lite mörkare orange kantlinje */
    border-radius: 10px; /* Rundade hörn */
    cursor: pointer; /* Handpekare vid hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Skugga för djup */
    text-transform: uppercase; /* Gör texten versaler */
    font-family: fantasy; /* Specifik teckensnitt */
    font-weight: bold; /* Fet text */
    transition: transform 0.2s, background-color 0.3s, box-shadow 0.3s; /* Smidiga övergångar */
}

/* Hover-effekt för startknappen */
html[data-page="spel4"] #start_page button:hover {
    background-color: #ffa500; /* Ljusare orange vid hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Starkare skugga vid hover */
    transform: scale(1.05); /* Förstoring vid hover */
}

/* Maze-container (labyrint) */
html[data-page="spel4"] #maze_container {
    position: relative; /* Absolut positionering */
    margin: 1em auto; /* Utrymme runt labyrinten */
    width: fit-content; /* Bredd anpassad till innehållet */
}

/* Monstret i labyrinten */
html[data-page="spel4"] .monster {
    background-color: red; /* Röd bakgrund */
    border-radius: 50%; /* Cirkelform */
    animation: blink 0.5s infinite; /* Blinkande animation */
}

/* Blinkande animation */
@keyframes blink {
    0%, 100% {
        opacity: 1; /* Full opacitet */
    }
    50% {
        opacity: 0.5; /* Halv opacitet */
    }
}

/* Maze-labyrinten */
html[data-page="spel4"] #maze {
    position: relative; /* Absolut positionering */
    background-color: #a7c53f; /* Grön bakgrund */
    background-image: radial-gradient(circle at 0% 0%, transparent 50%, rgba(0,0,0,0.1) 50%), 
                      radial-gradient(circle at center, rgba(0,0,0,0.1) 50%, transparent 50%), 
                      radial-gradient(circle at 100% 100%, transparent 50%, rgba(0,0,0,0.1) 50%), 
                      radial-gradient(circle at 0% 100%, transparent 50%, rgba(0,0,0,0.1) 50%), 
                      radial-gradient(circle at 100% 0%, transparent 50%, rgba(0,0,0,0.1) 50%);
    background-size: 8em 8em; /* Bakgrundens storlek */
    transform: translateY(80px); /* Justera för vertikal position */
}

/* Labyrintens rutor */
html[data-page="spel4"] #maze div {
    display: flex; /* Flexbox-layout */
}

/* Labyrintens väggar och nubbins */
html[data-page="spel4"] #maze div div {
    position: relative; /* Absolut positionering */
    width: 1em; /* Bredd */
    height: 1em; /* Höjd */
}

/* Ikoner för dörrar och väggar */
html[data-page="spel4"] #maze div div::after {
    position: absolute; /* Absolut positionering */
    left: -3px; /* Litet avstånd till vänster */
    top: -4px; /* Litet avstånd uppåt */
    text-align: center; /* Centrerad text */
    text-shadow: 0 0 1px black; /* Skugga för text */
    font-size: 1.2em; /* Lite större textstorlek */
    z-index: 10; /* Lägger texten ovanpå andra element */
}

/* Ikon för utgångsdörr */
html[data-page="spel4"] #maze div div.door.exit::after {
    content: "\1F6AA"; /* Dörr-symbol */
}

/* Ikon för nubbins */
html[data-page="spel4"] #maze div div.nubbin::after {
    content: "\1F33C"; /* Plante-symbol */
}

/* Specifika nubbins-ikoner */
html[data-page="spel4"] #maze div.nubbin:nth-of-type(3n)::after {
    content: "\1F344"; /* Svamp-symbol */
}
html[data-page="spel4"] #maze div.nubbin:nth-of-type(5n)::after {
    content: "\1F33B"; /* Blomma-symbol */
}
html[data-page="spel4"] #maze div.nubbin:nth-of-type(7n)::after {
    content: "\1F48E"; /* Smycke-symbol */
}
html[data-page="spel4"] #maze div.nubbin:nth-of-type(13n)::after {
    content: "\1F381"; /* Present-symbol */
}

/* Ikon för hjälten */
html[data-page="spel4"] #maze div.hero::after {
    content: "\1F6B6" !important; /* Mänsklig figur-symbol */
}

/* Ändra riktning för hjälten */
html[data-page="spel4"] #maze.face-right div.hero::after {
    transform: scale(-1, 1); /* Spegelvänd hjälten */
}

/* Väggar och dörrar i labyrinten */
html[data-page="spel4"] #maze div div.wall, 
#maze div div.nubbin.wall, 
#maze div div.door.exit {
    background-color: #454545; /* Mörk grå bakgrund */
    background-image: linear-gradient(45deg, rgba(0,0,0,0.2) 45%, transparent 55%), 
                      linear-gradient(to bottom, rgba(0,0,0,0.2) 45%, transparent 55%); /* Mönster */
    background-size: 0.5em 0.5em; /* Storlek på bakgrundsmönster */
}

/* Tomma väggar och dörrar */
html[data-page="spel4"] #maze div div.nubbin.wall::after {
    content: ""; /* Ingen ikon */
}

/* Transparent vägg */
html[data-page="spel4"] #maze div div.sentinel.wall {
    background: transparent; /* Transparent bakgrund */
}

/* Ikon för sentinel väggar */
html[data-page="spel4"] #maze div div.sentinel.wall::after {
    content: "\1F40A"; /* Ormsymbol */
}

/* Varje tredje sentinel vägg får en annan ikon */
html[data-page="spel4"] #maze div.sentinel.wall:nth-of-type(3n)::after {
    content: "\1F40D"; /* Sköldpaddssymbol */
}

/* Ikon för nycklar */
html[data-page="spel4"] #maze div div.key::after {
    content: "\1F511"; /* Nyckelsymbol */
}

/* Stora utrymmen för udda celler */
html[data-page="spel4"] #maze div div:nth-child(odd) {
    width: 1em; /* Bredd på cellerna */
}

/* Höjd på udda celler */
html[data-page="spel4"] #maze div:nth-child(odd) div {
    height: 1em; /* Höjd på cellerna */
}

/* När labyrinten är klar */
html[data-page="spel4"] #maze.finished::after {
    position: absolute; /* Absolut positionering */
    top: 0; /* Placera högst upp */
    left: 0; /* Placera till vänster */
    width: 100%; /* Full bredd */
    height: 100%; /* Full höjd */
    display: flex; /* Flexbox-layout */
    justify-content: space-around; /* Centrerar innehåll */
    align-items: center; /* Centrerar innehåll vertikalt */
    content: "Game Over"; /* Texten som visas */
    background: rgba(0,0,0,0.4); /* Svart bakgrund med genomskinlighet */
    text-align: center; /* Centrerad text */
    text-transform: uppercase; /* Versaler */
    font-family: monospace; /* Monospace teckensnitt */
    font-size: 5em; /* Stor textstorlek */
    text-shadow: 2px 2px 2px rgba(0,0,0,0.8); /* Skugga på texten */
    color: #fff; /* Vit textfärg */
    z-index: 10; /* Lägger texten ovanpå andra element */
}

/* Maze-output */
html[data-page="spel4"] #maze_output {
    display: flex; /* Flexbox-layout */
    margin: 0.5em auto; /* Marginaler runt output */
}

/* Score och meddelande-styling */
html[data-page="spel4"] #maze_score, #maze_message {
    font-family: fantasy; /* Fantasy teckensnitt */
    font-weight: bold; /* Fet text */
    font-size: 1em; /* Standard textstorlek */
}

/* Score-styling */
html[data-page="spel4"] #maze_score {
    flex: 1; /* Flexibel bredd */
    white-space: nowrap; /* Förhindrar radbrytning */
    text-align: left; /* Vänsterjusterad text */
}

/* Före-text för score */
html[data-page="spel4"] #maze_score::before {
    content: "Score: "; /* Före-text */
}

/* Lägger till nyckelsymbol om spelaren har en nyckel */
html[data-page="spel4"] #maze_score.has-key::after {
    content: "\00a0\1F511"; /* Nyckelsymbol */
}

/* Meddelande-styling */
html[data-page="spel4"] #maze_message {
    flex: 3; /* Flexibel bredd */
    text-align: right; /* Högerjusterad text */
}

/* Grundinställningar för kroppen */
html[data-page="spel4"] body {
    margin: 0; /* Tar bort marginaler */
    padding: 0; /* Tar bort padding */
    font-family: Arial, sans-serif; /* Standard teckensnitt */
    background-color: #2d572c; /* Djupt grön basfärg */
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.2), transparent 50%), 
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1), transparent 50%), 
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.2), transparent 60%), 
        linear-gradient(135deg, #a7c53f 25%, #6a994e 25%, #6a994e 50%, #a7c53f 50%, #a7c53f 75%, #6a994e 75%);
    background-size: 150px 150px, 300px 300px, 500px 500px, 100px 100px; /* Bakgrundsstorlekar */
    background-repeat: repeat, no-repeat, no-repeat, repeat; /* Upprepa vissa bakgrunder */
    background-blend-mode: overlay; /* Blenda bakgrunder */
    color: #fff; /* Vit textfärg */
}

/* Gör så att spelets HUD (head-up display) är synlig och inte flyttas av andra element */
html[data-page="spel4"] #game_hud {
    position: fixed;  /* Fäst på skärmen */
    top: 20px;  /* Placeras 20px från toppen */
    left: 30%;  /* Placeras på 30% av bredden */
    width: 40%;  /* Tar upp 40% av bredden */
    padding: 10px 20px;  /* Padding runt HUD */
    box-sizing: border-box; /* Säkerställ att padding inkluderas i dimensionerna */
    z-index: 1000;  /* Lägger HUD ovanpå andra element */
}

/* Container för poängräknare */
html[data-page="spel4"] #hud_container {
    display: flex;  /* Flexbox-layout */
    justify-content: space-between;  /* Jämnt fördelad text */
    background-color: #4CAF50;  /* Grön bakgrund för containern */
    padding: 10px; /* Padding runt container */
    border-radius: 8px; /* Rundade hörn */
    color: white;  /* Vit textfärg */
    font-size: 16px;  /* Textstorlek */
}

/* Styla varje räknare */
html[data-page="spel4"] #hud_container p {
    margin: 0;  /* Tar bort standardmarginal */
    font-weight: bold;  /* Fet text */
    white-space: nowrap;  /* Förhindrar radbrytning */
}

/* Mörk overlay för popup */
html[data-page="spel4"] #popup-overlay {
    position: fixed; /* Fäst på skärmen */
    top: 0; /* Placera på toppen */
    left: 0; /* Placera till vänster */
    width: 100%; /* Full bredd */
    height: 100%; /* Full höjd */
    background: rgba(0, 0, 0, 0.5); /* Halvtransparent svart bakgrund */
    display: flex; /* Flexbox-layout */
    align-items: center; /* Vertikalt centrerad */
    justify-content: center; /* Horisontellt centrerad */
    opacity: 0; /* Dold från början */
    visibility: hidden; /* Dold från början */
    transition: opacity 0.3s ease, visibility 0.3s; /* Smidig övergång */
}

/* Popup-boxens stil */
html[data-page="spel4"] #popup {
    background: white; /* Vit bakgrund */
    padding: 20px; /* Padding runt popup */
    border-radius: 10px; /* Rundade hörn */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Skugga för djup */
    text-align: center; /* Centrerad text */
    position: relative; /* Absolut positionering */
    transform: translateY(-100%); /* Dölj popup från början */
    transition: transform 0.4s ease-out; /* Smidig övergång */
    width: 300px; /* Bredd på popup */
}

/* Visar popup när den har rätt klass */
html[data-page="spel4"] #popup-overlay.show {
    opacity: 1; /* Gör den synlig */
    visibility: visible; /* Gör den synlig */
}

/* När popup-overlay är synlig, animera popupen */
html[data-page="spel4"] #popup-overlay.show #popup {
    transform: translateY(0); /* Popupen ska komma in från toppen */
}

/* Stäng-knapp för popup */
html[data-page="spel4"] #close-popup {
    position: absolute; /* Absolut positionering */
    top: 10px; /* Placera 10px från toppen */
    right: 15px; /* Placera 15px från högerkant */
    background: none; /* Ingen bakgrund */
    border: none; /* Ingen ram */
    font-size: 20px; /* Större textstorlek */
    cursor: pointer; /* Pekare vid hover */
}

/* Hover-effekt på stäng-knapp */
html[data-page="spel4"] #close-popup:hover {
    color: red; /* Färgen ändras till röd vid hover */
}

/* Köp-försök-knapp */
html[data-page="spel4"] #buy-attempts-button {
    padding: 10px 20px; /* Padding runt knappen */
    font-size: 14px; /* Textstorlek */
    background-color: #4CAF50; /* Grön bakgrundsfärg */
    color: white; /* Vit text */
    border: none; /* Ingen ram */
    border-radius: 5px; /* Rundade hörn */
    cursor: pointer; /* Pekare vid hover */
    margin-top: 20px; /* Avstånd från element ovanför */
    display: none; /* Dold från början */
}

/* Hover-effekt på köp-försök-knapp */
html[data-page="spel4"] #buy-attempts-button:hover {
    background-color: #45a049; /* Mörkare grön vid hover */
}

/* Popup-overlay */
#popup-overlay {
    position: fixed; /* Fast position */
    top: 0; /* Placera högst upp */
    left: 0; /* Placera längst till vänster */
    width: 100%; /* Full bredd */
    height: 100%; /* Full höjd */
    background-color: rgba(0, 0, 0, 0.5); /* Halvtransparent svart bakgrund */
    display: flex; /* Flexbox-layout */
    justify-content: center; /* Centrerar popupen horisontellt */
    align-items: center; /* Centrerar popupen vertikalt */
    visibility: hidden; /* Dold från början */
}

/* Popup-boksen */
#popup {
    background-color: white; /* Vit bakgrund */
    padding: 20px; /* Padding runt popup */
    border-radius: 10px; /* Rundade hörn */
    width: 300px; /* Bredde på popup */
    text-align: center; /* Centrerad text */
    position: relative; /* Absolut positionering */
}

/* Köp-försök-knapp */
#buy-attempts-button {
    margin-top: 20px; /* Avstånd från andra element */
    padding: 10px 20px; /* Padding runt knappen */
    background-color: #4CAF50; /* Grön bakgrund */
    color: white; /* Vit text */
    border: none; /* Ingen ram */
    border-radius: 5px; /* Rundade hörn */
    cursor: pointer; /* Pekare vid hover */
}

/* Hover-effekt på köp-försök-knapp */
#buy-attempts-button:hover {
    background-color: #45a049; /* Mörkare grön vid hover */
}

/* Allmänt för topplista.php */

/* Allmänna återställningar */
html[data-page="topplista"] body {
    font-family: 'Arial', sans-serif; /* Arial som standardteckensnitt */
    background-color: #131A20; /* Matchar bakgrunden från hemsida.php */
    color: white; /* Vit text */
    margin: 0; /* Tar bort marginal */
    padding: 0; /* Tar bort padding */
    text-align: center; /* Centrerad text */
    background-size: cover; /* Bakgrundsbild täcker hela sidan */
    padding-top: 100px; /* Ger lite utrymme på toppen */
    overflow: hidden; /* Inaktiverar rullning */
}
    
/* Container för topplista och inloggningsknappar */
html[data-page="topplista"] #container1 {
    display: flex; /* Flexbox-layout */
    justify-content: space-between; /* Jämnt fördelad layout */
    align-items: center; /* Vertikal centrering */
    padding: 20px; /* Padding runt container */
    box-sizing: border-box; /* Inkluderar padding i storleken */
    width: 100%; /* Full bredd */
}

/* Layout för knappar */
html[data-page="topplista"] .buttons {
    display: flex; /* Flexbox-layout */
    gap: 20px; /* Avstånd mellan knapparna */
}

/* Logo och titel */
html[data-page="topplista"] #logo-title {
    display: flex; /* Flexbox-layout */
    align-items: center; /* Vertikal centrering av logo och titel */
    gap: 10px; /* Avstånd mellan logo och titel */
}

/* Navigation */
html[data-page="topplista"] nav ul {
    list-style: none; /* Tar bort punktlistor */
    display: flex; /* Flexbox-layout */
    gap: 15px; /* Avstånd mellan länkar */
}

html[data-page="topplista"] nav ul li a {
    color: white; /* Vit text */
    text-decoration: none; /* Ingen understrykning */
    font-size: 18px; /* Textstorlek */
}

/* Inloggningsknapp och hemsida-knapp */
html[data-page="topplista"] #signin, html[data-page="topplista"] #hemsida {
    background-color: #1E2A38; /* Mörk bakgrund som passar med hemsidan */
    color: #FFFFFF; /* Vit text */
    padding: 10px 20px; /* Padding runt knappen */
    border: 2px solid #FFEB3B; /* Gul ram för synlighet */
    border-radius: 8px; /* Rundade hörn */
    cursor: pointer; /* Pekare vid hover */
    font-size: 0.9em; /* Liten textstorlek */
    font-weight: bold; /* Fet text */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Smidiga övergångar */
    box-shadow: 0px 6px 15px rgba(255, 235, 59, 0.4); /* Gul glöd-effekt */
    width: 120px; /* Bredde på knappen */
    height: 40px; /* Höjd på knappen */
}

/* Placera valutaikonen */
html[data-page="topplista"] #currency-icon {
    position: absolute; /* Absolut positionering */
    height: 35px; /* Höjd på ikonen */
    right: 0px; /* Placera till höger */
}

/* Hover-effekt på inloggningsknapp och hemsida-knapp */
html[data-page="topplista"] #signin:hover, html[data-page="topplista"] #hemsida:hover {
    background-color: #293845; /* Lättare färg vid hover */
    border-color: #FFEB3B; /* Behåll gul ram */
    box-shadow: 0px 8px 20px rgba(255, 235, 59, 0.6); /* Intensivare skugga vid hover */
    transform: translateY(-3px); /* Liten lyft-effekt */
}

/* Aktiv effekt när knappen är nedtryckt */
html[data-page="topplista"] #signin:active, html[data-page="topplista"] #hemsida:active {
    background-color: #17202B; /* Mörkare färg vid klick */
    transform: translateY(1px); /* Flytta knappen något nedåt */
    box-shadow: 0px 4px 12px rgba(255, 235, 59, 0.2); /* Svagare skugga när knappen är nedtryckt */
}

/* Header-sektionen */
html[data-page="topplista"] #header {
    position: fixed; /* Fixa headern högst upp */
    top: 0;
    left: 0;
    right: 0;
    display: flex; /* Flexbox-layout */
    justify-content: space-between; /* Fördela utrymme mellan element */
    align-items: center; /* Vertikal centrering */
    padding: 0 20px; /* Padding runt headern */
    height: 80px; /* Höjd på headern */
    background-color: #0D1117; /* Mörk bakgrund */
    z-index: 1000; /* Säkerställ att den är ovanpå andra element */
}

/* Logo */
html[data-page="topplista"] #logo {
    width: 80px;
    height: 80px;
    margin-top: 10px; /* Lite utrymme över logo */
    width: auto;
}

/* Titel */
html[data-page="topplista"] #container1 h1 {
    font-size: 2.5em;
    white-space: nowrap; /* Ingen radbrytning */
    color: #FFD700; /* Guld färg för en lyxig känsla */
    text-shadow: 3px 3px 10px rgba(255, 215, 0, 0.7), 2px 2px 5px rgba(0, 0, 0, 0.7);
    letter-spacing: 3px; /* Större mellanrum mellan bokstäver */
    text-transform: uppercase; /* Versaler */
    margin: 0; /* Tar bort extra marginal */
}

/* Cirkelcontainern */
html[data-page="topplista"] #circle-container {
    position: relative;
    display: inline-block;
}

/* Hover-effekt på cirkeln */
html[data-page="topplista"] #hover-circle {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrera cirkeln */
    height: 60px; /* Cirkelhöjd */
    width: 55px;  /* Cirkellängd */
    border-radius: 50%; /* Gör den rund */
    border-color: rgba(0, 255, 255, 0.8);
    border-width: 5px;
    border-style: solid; /* Säkerställ att gränsen syns */
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.6),
                0 0 45px rgba(0, 255, 255, 0.5),
                0 0 60px rgba(0, 255, 255, 0.4);
    opacity: 0; /* Startar som osynlig */
    z-index: -1; /* Håll den bakom logon */
    transition: opacity 0.5s ease, box-shadow 0.5s ease; /* Övergång för opacitet och box-shadow */
}

/* Hover-effekt på cirkeln */
html[data-page="topplista"] #circle-container:hover #hover-circle {
    opacity: 1; /* Gör den synlig vid hover */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8),
                0 0 30px rgba(0, 255, 255, 0.7),
                0 0 45px rgba(0, 255, 255, 0.6); /* Starkare glöd vid hover */
}

/* Nyckelanimation för neonpulse */
@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.5), 0 0 45px rgba(0, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.8), 0 0 60px rgba(0, 255, 255, 0.6), 0 0 90px rgba(0, 255, 255, 0.5);
    }
}

/* Logotyp */
html[data-page="topplista"] #logo {
    cursor: pointer; /* Pekare när man håller musen över */
    height: 48px; /* Cirkelhöjd */
    width: 48px;  /* Cirkellängd */
    margin-top: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smidig övergång */
}

/* Hover-effekt på logotypen */
html[data-page="topplista"] #logo:hover {
    transform: scale(1.1) translateY(-3px); /* Skala upp och flytta upp logon */
}

/* Lägg till valuta-knapp */
html[data-page="topplista"] #add-currency {
    background-color: #007bff; /* Blå knapp */
    color: white;
    border: none;
    border-radius: 50%; /* Rund knapp */
    width: 25px;
    height: 25px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 8px;
}

/* Valutabelopp */
html[data-page="topplista"] #currency-amount {
    font-size: 18px;
    margin-right: 8px;
}

/* Leaderboard-container */
html[data-page="topplista"] #leaderboard-container {
    padding: 20px;
    margin-top: -20px; /* Utrymme under headern */
    height: calc(100vh - 120px); /* Tar upp hela vyhöjden minus headerns höjd */
    display: flex;
    justify-content: center; /* Centrerar */
    align-items: flex-start; /* Justerar till toppen */
    margin-top: 5%;
}

/* Leaderboard-grid */
html[data-page="topplista"] #leaderboard-grid {
    display: grid;
    grid-template-rows: auto 1fr; /* Lägg till rad för text och en annan för rutor */
    grid-template-columns: repeat(3, 1fr); /* 3 kolumner */
    grid-gap: 20px; /* Utrymme mellan elementen */
    width: 95%; /* Ta upp 95% av containerns bredd */
    max-width: 1400px; /* Större maxbredd för ett bredare grid */
    background-color: #1E2A38; /* Matchar container-färgen */
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* Mjuk skugga */
    overflow-y: auto; /* Tillåt rullning om det behövs */
    margin-top: 30px;
}

/* Leaderboard-tile - utseende och effekter */
html[data-page="topplista"] .leaderboard-tile {
    height: 340px; /* Gör varje tile hög */
    background-color: #293845; /* Lättare än bakgrunden */
    color: #FFD700; /* Gul färg för texten */
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(255, 215, 0, 0.7); /* Lägger till en glöd runt texten */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Hover-effekt på leaderboard-tile */
html[data-page="topplista"] .leaderboard-tile:hover {
    transform: scale(1.02); /* Liten zoom vid hover */
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.8); /* Starkare skugga vid hover */
}

/* Leaderboard-text */
#leaderboard-text {
    font-size: 1.5em;
    text-align: center;
}

/* Layout för leaderboard grid */
html[data-page="topplista"] #leaderboard-grid {
    display: grid;
    grid-template-rows: auto 1fr; /* Lägg till plats för kontroller och tiles */
    gap: 20px; /* Utrymme mellan kontroller och tiles */
}

/* Kontrollpanel för leaderboard */
html[data-page="topplista"] #leaderboard-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    background-color: #1E2A38;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Leaderboard-tile med vit text och mindre rundad kant */
html[data-page="topplista"] #leaderboard-grid .leaderboard-tile {
    background-color: #2B3A4D;
    color: white;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    transition: transform 0.3s ease;
}

/* Navigation för leaderboard */
html[data-page="topplista"] #leaderboard-navigation {
    grid-column: span 3; /* Detta gör så att den sträcker sig över hela gridet */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Button för navigation */
html[data-page="topplista"] #leaderboard-navigation button {
    background-color: #1E2A38;
    color: #FFFFFF;
    border: 2px solid #FFD700;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Disabled knapp för navigation */
html[data-page="topplista"] #leaderboard-navigation button:disabled {
    background-color: #555;
    cursor: not-allowed;
}

/* Vänster och höger navigeringsknappar */
html[data-page="topplista"] #left-button,
html[data-page="topplista"] #right-button {
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}

/* Valutabars utseende */
html[data-page="topplista"] #currency-bar {
    display: flex;
    align-items: center;
    background-color: #333; /* Mörk bakgrund för baren */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    width: 100px;
    position: relative;
}

/* Leaderboard-tile - justering av höjd och bakgrund */
html[data-page="topplista"] .leaderboard-tile {
    position: relative;
    overflow-y: auto;
    max-height: 300px; /* Justera höjd efter behov */
    background-color: rgba(22, 20, 20, 0.7);
    border-radius: 5px;
    padding: 10px;
    color: white;
}

/* Memory-item layout */
html[data-page="topplista"] .memory-item {
    width: 100px;
    margin: 10px;
    padding: 10px;
    background-color: lightblue;
    border-radius: 5px;
    text-align: center;
}

/* Grundläggande inställningar för hela sidan */
html[data-page="topplista"] html, html[data-page="topplista"] body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #131A20;
    color: white;
    height: 100%;
}

/* Förhindrar scrollbar */
html[data-page="topplista"] * {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* Valutaikon - position */
html[data-page="topplista"] #currency-icon {
    position: absolute;
    height: 35px;
    right: 0px;
}

/* Dölj scrollbar i webkit-baserade webbläsare (Chrome, Safari, Edge) */
html[data-page="topplista"] *::-webkit-scrollbar {
    display: none;
}

/* Header-sektion - layout och animation */
html[data-page="topplista"] #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between; /* Utrymme mellan elementen */
    align-items: center;
    padding: 0 20px;
    height: 80px;
    background-color: #0D1117;
    z-index: 1000; /* Ser till att den alltid är överst */
    animation: fadeIn 1s ease-in forwards;
}

/* Logotyp - stil och hover-effekt */
html[data-page="topplista"] #logo {
    cursor: pointer;
    height: 48px; /* Cirkelhöjd */
    width: 48px;  /* Cirkelbredd */
    margin-top: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smidiga övergångar */
}

html[data-page="topplista"] #logo:hover {
    transform: scale(1.1) translateY(-3px); /* Skala upp och lyft */
}

/* Sidebar-toggle knapp */
html[data-page="topplista"] #sidebar-toggle {
    position: fixed;
    top: 100px; /* Justera för att vara precis under headern */
    left: 10px;
    font-size: 30px;
    cursor: pointer;
    background-color: black;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 999; /* Se till att knappen är ovanför andra element förutom headern */
    transition: left 0.5s;
    animation: fadeIn 1s ease-in forwards;
}

/* Sidebar - utseende och övergångar */
html[data-page="topplista"] .sidebar {
    position: fixed;
    top: 81px; /* Justera så att sidpanelen är under headern */
    left: 0;
    width: 0; /* Initial bredd är 0 */
    height: calc(100% - 80px); /* 100% höjd minus headerhöjd */
    background-color: black;
    color: white;
    overflow-x: hidden;
    transition: width 0.5s;
    padding-top: 20px;
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 998; /* Under sidebar-toggle knappen */
    animation: fadeIn 1s ease-in forwards;
}

/* Profilsektion - layout */
html[data-page="topplista"] .profile-section {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid white;
}

html[data-page="topplista"] .username {
    display: flex;
    align-items: flex-start; /* Justera för att börja från toppen */
    color: white;
}

html[data-page="topplista"] .profile-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 10px;
}

/* Buttons för inloggning/registrering */
html[data-page="topplista"] .buttons {
    display: flex; /* Ser till att knapparna är bredvid varandra */
    gap: 20px; /* Utrymme mellan knapparna */
}

html[data-page="topplista"] #signin, html[data-page="topplista"] #login {
    background-color: #1E2A38; /* Mörkare bakgrund för att smälta in på sidan men ändå kontrastera tillräckligt */
    color: #FFFFFF; /* Vit text för stark kontrast */
    padding: 10px 20px;
    border: 2px solid #FFEB3B; /* Gul kant för bättre synlighet */
    border-radius: 8px; /* Mjukare knappform */
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0px 6px 15px rgba(255, 235, 59, 0.4); /* Mjukare glöd med gul färg */
    width: 120px;
    height: 40px;
}

/* Hover-effekt på knapparna */
html[data-page="topplista"] #signin:hover, html[data-page="topplista"] #login:hover {
    background-color: #293845; /* Lite ljusare vid hover */
    border-color: #FFEB3B; /* Behåll den gula kanten */
    box-shadow: 0px 8px 20px rgba(255, 235, 59, 0.6); /* Mer intensiv skugga vid hover */
    transform: translateY(-3px); /* Liten lyft-effekt */
}

/* Aktiv effekt på knapparna */
html[data-page="topplista"] #signin:active, html[data-page="topplista"] #login:active {
    background-color: #17202B; /* Mörkare vid klick */
    transform: translateY(1px);
    box-shadow: 0px 4px 12px rgba(255, 235, 59, 0.2); /* Mindre intensiv skugga när den är klickad */
}

/* Cirkelbehållare för hover-circle */
html[data-page="topplista"] #circle-container {
    position: relative;
    display: inline-block;
}

/* Hover-circle - stil och animation */
html[data-page="topplista"] #hover-circle {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar cirkeln */
    height: 60px; /* Cirkelhöjd */
    width: 55px;  /* Cirkelbredd */
    border-radius: 50%; /* Gör det till en cirkel */
    border-color: rgba(0, 255, 255, 0.8);
    border-width: 5px;
    border-style: solid; /* Se till att kanten syns */
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.6),
                0 0 45px rgba(0, 255, 255, 0.5),
                0 0 60px rgba(0, 255, 255, 0.4);
    opacity: 0; /* Börjar osynlig */
    z-index: -1; /* Se till att den är bakom logotypen */
    transition: opacity 0.5s ease, box-shadow 0.5s ease; /* Övergång för opacity och box-shadow */
}

/* Hover-effekt för hover-circle - gör den synlig och lägg till intensifierad glöd */
html[data-page="topplista"] #circle-container:hover #hover-circle {
    opacity: 1; /* Gör den synlig när man hovrar */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8),
                0 0 30px rgba(0, 255, 255, 0.7),
                0 0 45px rgba(0, 255, 255, 0.6); /* Intensiv glöd vid hover */
}

/* Neon-pulsanimation */
@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.5), 0 0 45px rgba(0, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 255, 255, 0.8), 0 0 60px rgba(0, 255, 255, 0.6), 0 0 90px rgba(0, 255, 255, 0.5);
    }
}

/* Logotyp och titel-sektion */
html[data-page="topplista"] #logo-title {
    display: flex;
    align-items: center; /* Justerar logotyp och titel vertikalt */
    gap: 10px; /* Utrymme mellan logotyp och titel */
}

/* Container för logo och titel */
html[data-page="topplista"] #container1 {
    display: flex;
    justify-content: space-between; /* Fördelar logotyp/titel och knappar jämnt */
    align-items: center; /* Centrerar elementen vertikalt */
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

/* Huvudtitel i container1 */
html[data-page="topplista"] #container1 h1 {
    font-size: 2.5em;
    color: #FFD700;
    text-shadow: 3px 3px 10px rgba(255, 215, 0, 0.7), 2px 2px 5px rgba(0, 0, 0, 0.7);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
    display: inline-block; /* Håller texten centrerad */
}

/* Spel-sektion - layout */
html[data-page="topplista"] .game-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 100px;
    padding: 40px 20px;
}

/* Spel-container - styling */
html[data-page="topplista"] .game-container {
    background: linear-gradient(135deg, #0D1117 0%, #1E2A38 100%); /* Mörkare gradient som passar bakgrunden */
    color: #FFFFFF;
    border-radius: 15px;
    padding: 20px;
    width: 350px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.3); /* Justerad skugga för cyan-neon-tema */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 50px;
}

html[data-page="topplista"] .game-container:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 25px rgba(0, 255, 255, 0.4); /* Cyan-skogga vid hover för neon-effekt */
}

/* Bild i spel-container */
html[data-page="topplista"] .game-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Rubrik i spel-container */
html[data-page="topplista"] .game-container h2 {
    font-size: 1.5em;
    margin: 15px 0;
    font-weight: 700;
    color: #FFEB3B; /* Gul färg för att matcha headertexten */
    text-shadow: 1px 2px 4px rgba(255, 215, 0, 0.5);
}

/* Text i spel-container */
html[data-page="topplista"] .game-container p {
    font-size: 1em;
    margin: 10px 0;
    color: #BBB; /* Mjukare vit för en mer dämpad text */
    line-height: 1.4;
}

/* Spel-container knapp */
html[data-page="topplista"] .game-container button {
    background-color: #00FFFF; /* Cyan-knappfärg för att passa neon-temat */
    color: black;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0px 6px 15px rgba(0, 255, 255, 0.4); /* Cyan-glöd effekt */
}

/* Hover-effekt på spel-knappar */
html[data-page="topplista"] .game-container button:hover {
    background-color: #00BFBF; /* Mörkare cyan vid hover */
    box-shadow: 0px 8px 20px rgba(0, 255, 255, 0.6);
}

/* Knapp för att lägga till valuta */
html[data-page="topplista"] #add-currency {
    background-color: #007bff; /* Blå knapp */
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 8px;
}

/* Valuta-mängd */
html[data-page="topplista"] #currency-amount {
    font-size: 18px;
    margin-right: 8px;
}

/* Overlay för modal */
html[data-page="topplista"] #overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

/* Modal-fönster */
html[data-page="topplista"] #modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    z-index: 1000;
    overflow: hidden;
    width: 90vw; /* 90% av viewportens bredd */
    height: 90vh; /* 90% av viewportens höjd */
    display: flex;
    flex-direction: column;
}

/* Exempel på knapp för att öppna modal */
html[data-page="topplista"] .open-modal-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Existerande fade-in animation för overlay */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Fade-out animation för overlay */
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Resizing-animation för modal när den öppnas */
@keyframes modalResizeIn {
    0% { transform: translate(-50%, -50%) scale(0.5); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* Omvänd resizing-animation för modal när den stängs */
@keyframes modalResizeOut {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(0.8); }
}

/* Applicera initiala stilar */
html[data-page="topplista"] #overlay {
    display: none; /* Startar som dold */
    animation: fadeIn 1.5s ease-out forwards;
}

html[data-page="topplista"] #modal {
    animation: modalResizeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1.5) forwards;
    margin-top: 30px;
}

html[data-page="topplista"] #modal h2 {
    color: black;
}

html[data-page="topplista"] #modal p {
    color: black;
}

/* Fullscreen-knapp för modal */
html[data-page="topplista"] #full-screen-button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 3px;
    font-size: 14px;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Modal-innehåll */
html[data-page="topplista"] #modal-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Fullscreen-läge för modal */
html[data-page="topplista"] .full-screen-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    border-radius: 0;
}

/* Stil för rektangulär knapp */
html[data-page="topplista"] #rectbutton {
    fill: white;
    border: 2px solid black;
}

/* Stil för iframe i modal */
html[data-page="topplista"] #game-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Fullscreen-läge för iframe */
html[data-page="topplista"] .full-screen-mode #game-iframe {
    width: 100vw;
    height: 100vh;
}

/* Topplista-knapp - Fast positionering */
html[data-page="topplista"] #topplistaknapp {
    position: fixed;
    padding: 15px 30px;
    background-color: #4CAF50; /* Grön bakgrund */
    color: white; /* Vit text */
    border: none; /* Tar bort standardbordet */
    border-radius: 8px; /* Rundade hörn */
    cursor: pointer; /* Pekare vid hover */
    font-size: 16px; /* Större textstorlek */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtil skugga */
    top: 50px;
}

/* Navigeringens lista */
html[data-page="topplista"] nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
}

/* Länkar i navigeringslistan */
html[data-page="topplista"] nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

/* Dölj webkit-scrollbar */
html[data-page="topplista"] ::-webkit-scrollbar {
    display: none; /* Dölj scrollbar */
}

/* Sidomeny-knapp */
html[data-page="topplista"] #sidebar-toggle {
    position: fixed;
    top: 90px;
    left: 10px;
    font-size: 30px;
    cursor: pointer;
    background-color: black;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
    transition: left 0.5s;
}

/* Sidebar */
html[data-page="topplista"] .sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    top: 80px;
    left: 0;
    background-color: black;
    color: white;
    overflow-x: hidden;
    transition: width 0.5s;
    padding-top: 20px;
    box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5);
}

html[data-page="topplista"] .sidebar.open {
    width: 250px; /* Öppnar sidomenyn */
}

/* Profilsektion */
html[data-page="topplista"] .profile-section {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid white;
}

/* Nivåsektion */
html[data-page="topplista"] .level-section {
    padding: 20px;
    text-align: center;
}

html[data-page="topplista"] .level-section h4 {
    margin: 0;
    color: #ffcc00; /* Gyllene textfärg för nivå */
}

/* Erfarenhetsbar (XP) */
html[data-page="topplista"] .exp-bar {
    width: 100%;
    height: 15px;
    background-color: #333;
    border-radius: 10px;
    margin: 10px 0;
}

html[data-page="topplista"] .exp-progress {
    height: 100%;
    background-color: #ffcc00;
    border-radius: 10px;
}

/* Andra XP-barer */
html[data-page="topplista"] .exp-bar2 {
    width: 350%;
    height: 15px;
    background-color: #333;
    border-radius: 10px;
    margin: 10px auto; /* Centerar elementet horisontellt */
    transform: translateX(-37%);
}

html[data-page="topplista"] .exp-progress2 {
    height: 100%;
    background-color: #ffcc00;
    border-radius: 10px;
}

/* Nivåtext */
html[data-page="topplista"] .level-section p {
    margin: 0;
    color: white;
}

/* Länk för att gå till profil */
html[data-page="topplista"] #a-tag1 {
    color: white;
    text-decoration: none;
}

/* Positionera knappen för att öppna profil ovan till höger på skärmen */
html[data-page="topplista"] .search-profile-btn-container {
    position: fixed;
    top: 20px;
    right: 150px;
    z-index: 1000; /* Se till att den är över andra element */
}

/* Resultat för sökprofil */
html[data-page="topplista"] #searchResults {
    margin-top: 10px;
}

/* Stil för sökprofilknappen */
html[data-page="topplista"] #searchProfileBtn {
    background-color: #1E2A38; /* Mörkare bakgrund som smälter in men kontrasterar tillräckligt */
    color: #FFFFFF; /* Vit text för stark kontrast */
    padding: 10px 20px;
    border: 2px solid #FFEB3B; /* Guldfärgad kant för synlighet */
    border-radius: 8px; /* Mjukare knappform */
    cursor: pointer;
    font-size: 0.7em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0px 6px 15px rgba(255, 235, 59, 0.4); /* Mjuk glöd med gult */
    width: 120px;
    height: 40px;
}

/* Hover-effekt för sökprofilknappen */
html[data-page="topplista"] #searchProfileBtn:hover {
    background-color: #00ccff; /* Ljusa upp den blå vid hover */
    transform: translateY(-5px); /* Flytta knappen uppåt vid hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 20px #00ffea, 0 0 35px #00ffea; /* Förstärk glöden vid hover */
}

/* Aktiv tillstånd för sökprofilknappen */
html[data-page="topplista"] #searchProfileBtn:active {
    transform: translateY(0); /* Återställ positionen när den trycks */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 15px #00ffea, 0 0 25px #00ffea; /* Återställ glöd vid tryck */
}

/* Vit fyrkant som är dold från början */
html[data-page="topplista"] .profile-square {
    width: 300px;
    height: 270px;
    background-color: white;
    position: fixed;
    top: 70px; /* Nedanför knappen */
    right: 9px;
    display: none; /* Initialt dold */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    z-index: 999; /* Hög z-index för att vara över andra element */
    opacity: 0; /* Börjar som osynlig */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smidig fade och rörelse */
}

/* Synlig tillstånd för fyrkanten */
html[data-page="topplista"] .profile-square.active {
    display: block;
    opacity: 1;
    transform: translateY(10px); /* Liten rörelse in */
}

/* Sökbehållare */
html[data-page="topplista"] .search-container {
    position: relative;
    width: 90%;
    left: 15px;
}


/* Sökinputfält */
html[data-page="topplista"] #searchInput {
    width: 80%;
    padding: 10px 40px 10px 10px; /* Utrymme för sökikonen */
    font-size: 14px;
    border: 2px solid #1e90ff; /* Matchar knappens färg */
    border-radius: 5px;
    outline: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtil skugga */
    transition: border-color 0.3s ease; /* Smidig övergång för kantfärgen */
    margin-top: 20px;
}

/* Ändra kantfärg vid fokus */
html[data-page="topplista"] #searchInput:focus {
    border-color: #00ccff;
}

html[data-page="topplista"] .username {
    display: flex;
    align-items: flex-start; /* Justera objekt till början */
}

html[data-page="topplista"] .profile-circle {
    width: 68px; /* Justera storleken vid behov */
    height: 68px; /* Justera storleken vid behov */
    border-radius: 50%; /* Gör bilden rund */
    background-position: center;
    background-size: cover; /* Se till att bilden täcker cirkeln */
    background-repeat: no-repeat;
    cursor: pointer;
    margin-top: -27px;
    margin-right: 10px;
    margin-left: -10px;
}

html[data-page="topplista"] .username h3 {
    font-size: 1.5em; /* Större textstorlek för bättre synlighet */
    font-family: Arial, sans-serif; /* Modern fontfamilj */
    margin-top: -10px; /* Flytta användarnamnstexten uppåt */
}

html[data-page="topplista"] .result-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    margin: 4px 0;
    width: 90%;
    margin-left: 5%;
    padding: 4px 0;
    transition: background-color 0.3s ease, font-size 0.3s ease;
}

html[data-page="topplista"] .result-item:hover {
    font-size: 1.05em;
    background-color: #f9f9f9;
    border-radius: 8px;
    cursor: pointer;
}

html[data-page="topplista"] .profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid black;
    margin-right: 8px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Använd hover-effekt på profilbilden när resultatet är hoverat */
html[data-page="topplista"] .result-item:hover html[data-page="topplista"] .profile-image {
    transform: scale(1.1);
    border-color: #007bff;
}

html[data-page="topplista"] .result-item:hover html[data-page="topplista"] .username {
    color: #007bff; /* Ljusblå på hover */
}

html[data-page="topplista"] .search-results {
    max-height: 180px;
    overflow-y: auto;
    background-color: white;
    padding: 8px;
    border-radius: 8px;
}

html[data-page="topplista"] .close-button {
    background-color: transparent;
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

html[data-page="topplista"] .circle-profile {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid black;
    margin-left: 40%;
}

html[data-page="topplista"] .selected-profile-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centera objekt horisontellt */
    text-align: center; /* Centera texten */
}

html[data-page="topplista"] .selected-profile-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transition: transform 0.3s ease-in, box-shadow 0.3s ease-in, translate 0.3s ease-in;
}

html[data-page="topplista"] .selected-profile-circle:hover {
    transform: scale(1.05);
    transform: translateY(-3px);
    box-shadow: 0px 0px 10px #ffcc00;
    border-radius: 50%;
}

html[data-page="topplista"] .username2 {
    margin-top: 10px; /* Utrymme mellan bild och text */
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: capitalize;
    color: black;
}

html[data-page="topplista"] .level-section2 p {
    color: black; /* Eller önskad textfärg */
    position: absolute; /* Absolut positionering */
    top: 0; /* Positionera det högst upp i föräldraelementet */
    left: 50%; /* Centrera horisontellt */
    transform: translateX(-50%); /* Centrera horisontellt */
    z-index: 10; /* Högre z-index för att säkerställa att det ligger över */
    margin-top: 190px;
}

html[data-page="topplista"] .level-section2 h4 {
    color: #ffcc00;
    margin-bottom: 0px;
    margin-top: 10px;
}

html[data-page="topplista"] .messagebutton {
    position: absolute;
    width: 120px;
    height: 43px;
    background-color: #007bff; /* Klassisk blå */
    color: white;
    top: 215px;
    left: 20px;
    border: none; /* Ta bort kant för ett renare utseende */
    border-radius: 5px; /* Lägga till lätt rundning på hörnen */
    transition: background-color 0.3s, transform 0.3s; /* Smidig övergång */
}

html[data-page="topplista"] .messagebutton:hover {
    background-color: #0056b3; /* Mörkare blå vid hover */
    transform: translateY(-3px) scale(1.03); /* Kombinerad transformering för smidigare effekt */
}

/* Inputfält för att skriva meddelanden */
html[data-page="topplista"] .message-input {
    width: calc(100% - 90px); /* Lämna utrymme för knappen */
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #dcdcdc;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.3s;
}

/* Fokusstatus för inputfält */
html[data-page="topplista"] .message-input:focus {
    border-color: #8ab4f8; /* Ljusblå vid fokus */
    box-shadow: 0 0 5px rgba(138, 180, 248, 0.5);
}

/* Skicka-knapp */
html[data-page="topplista"] .send-button {
    margin-top: 180px;
    padding: 10px 20px;
    background-color: #4CAF50; /* Grön bakgrund */
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Skicka-knappens hover- och aktivt tillstånd */
html[data-page="topplista"] .send-button:hover {
    background-color: #45A049; /* Mörkare grön vid hover */
}

html[data-page="topplista"] .send-button:active {
    transform: scale(0.98); /* Minska lite vid klick */
}

/* Stäng-knappens stil */
html[data-page="topplista"] .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 18px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s ease;
}

html[data-page="topplista"] .close-button:hover {
    color: #333;
}