:root {
    --ds-color-purple-100: #1a1a2e;
    --ds-color-purple-80: #563b9a;
    --ds-color-purple-50: #7950e5;
    --ds-color-purple-20: #a19bd9;
    --ds-color-purple-10: #d9d7f0;
    --ds-color-green-100: #2c3e1b;
    --ds-color-green-80: #6cb928;
    --ds-color-green-50: #97e851;
    --ds-color-yellow-50: #fecd19;
    --ds-color-red-50: #e94560;
    --ds-color-blue-70: #00344a;
    --ds-color-blue-50: #00a2fe;
    --ds-color-turqoise-80: #1f9c7d;
    --ds-color-orange-50: #ffa43d;
    --ds-color-orange-80: #bf7b2e;
    --ds-color-white-5: hsla(0, 0%, 100%, 0.05);
    --ds-color-white-10: hsla(0, 0%, 100%, 0.1);
    --ds-color-white-20: hsla(0, 0%, 100%, 0.2);
    --ds-color-white-40: hsla(0, 0%, 100%, 0.4);
    --ds-color-white-60: hsla(0, 0%, 100%, 0.6);
    --ds-color-white-80: hsla(0, 0%, 100%, 0.8);
    --ds-color-white: #fff;
    --ds-color-black-20: rgba(16, 16, 28, 0.2);
    --ds-color-black-30: rgba(16, 16, 28, 0.3);
    --ds-color-black-40: rgba(16, 16, 28, 0.4);
    --ds-color-black-50: rgba(16, 16, 28, 0.5);
    --ds-color-black-60: rgba(16, 16, 28, 0.6);
    --ds-color-black-70: rgba(16, 16, 28, 0.7);
    --ds-color-black-80: rgba(16, 16, 28, 0.8);
    --ds-color-black-90: rgba(16, 16, 28, 0.9);
    --ds-color-black: #10101c;
    --ds-color-turquoise: #3ae8bd;
    --font-size-9: 0.5625rem;
    --line-height-9: 0.6875rem;
    --font-size-10: 0.625rem;
    --line-height-10: 0.75rem;
    --font-size-11: 0.6875rem;
    --line-height-11: 0.875rem;
    --font-size-12: 0.75rem;
    --line-height-12: 0.875rem;
    --font-size-14: 0.875rem;
    --line-height-14: 1rem;
    --font-size-16: 1rem;
    --line-height-16: 1.25rem;
    --font-size-18: 1.125rem;
    --line-height-18: 1.375rem;
    --font-size-20: 1.25rem;
    --line-height-20: 1.5rem;
    --font-size-22: 1.375rem;
    --line-height-22: 1.7875rem;
    --font-size-24: 1.5rem;
    --line-height-24: 1.625rem;
    --font-size-28: 1.75rem;
    --line-height-28: 2.187rem;
    --font-size-30: 1.875rem;
    --line-height-30: 2rem;
    --font-size-32: 2rem;
    --line-height-32: 2.5rem;
    --font-size-36: 2.25rem;
    --line-height-36: 2.375rem;
    --font-size-40: 2.5rem;
    --line-height-40: 2.375rem;
    --font-size-48: 3rem;
    --line-height-48: 3.25rem;
    --font-size-60: 3.75rem;
    --line-height-60: 3.875rem;
    --font-size-64: 4rem;
    --line-height-64: 4rem;
    --font-size-72: 4.5rem;
    --line-height-72: 4.5rem;
    --default-font: neo-sans, sans-serif;
}

@media only screen and (max-width: 768px) {
    .game_modes {
        width: 100% !important;
        text-align: center !important;
    }

    .game_modes p {
        font-size: 20px !important;
    }

    .footer_mitte {
        padding-bottom: 50px !important;
    }
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden !important;
    font-family: neo-sans, sans-serif;
}

body {
    background: #1a1a2e;
}

.filter-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    /* Adjust the last value (0.5) to control the darkness (0 is fully transparent, 1 is fully opaque) */
}

.background_backgroundClassic__ySr_Z,
.background_backgroundHome__lurxW {
    font-family: "Arial", sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.centered-image {
    max-width: 100%; /* Responsive image */
    height: auto; /* Maintain aspect ratio */
    position: absolute; /* Position it absolutely within the container */
    top: 50%; /* Move down to the middle of the container */
    left: 50%; /* Move right to the middle of the container */
    transform: translate(
        -50%,
        -50%
    ); /* Center the image by adjusting its position */
}

.background_wrapper__OlrxG {
    height: 100%;
}

header {
    display: flex;

    justify-content: space-between;
    align-items: center;
    /* Change to your desired background color */
    padding: 10px 30px;
}

.header_logo img {
    height: 50px;
    /* Adjust as needed */
}

.header_buttons button {
    margin-left: 10px;
    /* Adjust as needed */
}
html,
body {
    height: 100%; /* Ensure body takes full height */
    margin: 0; /* Remove default margin */
}

.content {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center vertically */
    justify-content: flex-start; /* Align to the left side */
    padding-left: 60px; /* Keep left padding */
}

.game_modes {
    background-color: rgba(0, 0, 0, 0.5); /* Modern look */
    padding: 40px; /* Better spacing */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    border-radius: 20px; /* Rounded corners */
    position: relative;
    overflow: hidden; /* Prevent content overflow */
}

.game_modes p {
    white-space: pre-line !important; /* Maintains whitespace and wraps text */
    max-width: 400px; /* Set a maximum width for demonstration */
}

.game_modes p {
    color: white; /* Change text color to improve contrast */
    cursor: pointer; /* Change cursor to pointer for clickable items */
    font-size: 1.2rem; /* Adjust font size */
    margin: 2rem 0 !important; /* Vertical spacing between items */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition */
}

.game_modes p:hover {
    transform: scale(1.02); /* Slightly scale up on hover */
}

.ads {
    position: absolute;
    left: 70px;
    z-index: 99;
    background-color: red;
    border-radius: 14px;
    height: 60%;
    width: 250px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .content {
        justify-content: center; /* Center items on mobile */
        padding-left: 0; /* Remove left padding on mobile */
    }
    .game_modes {
        width: 50% !important; /* Full width on mobile */
        padding: 65px; /* Less padding on mobile */
        text-align: center !important;
    }
    .game_modes p {
        font-size: 1.7rem !important; /* Smaller font size on mobile */
    }
}

.game_modes p {
    margin: 20px 0; /* Consistent margin */
    font-size: 2.5rem; /* Slightly smaller base font size */
    color: #fff;
    font-style: italic;
    font-weight: bold;
    text-shadow: 0.125rem 0.125rem 0.93rem rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    text-align: center; /* Center align text */
}

/* Active state styles */
.game_modes p.enabled {
    color: #fff; /* Normal color for enabled state */
}

.game_modes p.enabled:hover {
    transform: scale(1.05); /* Scale effect on hover */
    color: #ffcc00; /* Change color on hover for visibility */
}

/* Disabled state styles */
.game_modes p.disabled {
    color: hsla(0, 0%, 100%, 0.4);
    pointer-events: none; /* Disable pointer events for disabled state */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .game_modes p {
        font-size: 2rem; /* Smaller font size for tablets */
    }
}

@media (max-width: 480px) {
    .game_modes p {
        font-size: 1.5rem; /* Smaller font size for mobile devices */
        margin: 15px 0; /* Adjust margins for smaller screens */
    }
}

.game_modes p.enabled:hover {
    transform: scale(1.01);
    color: #563b9a;
}

.footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    padding: 10px 0;
}

/* Footer Links */
.footer_links {
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: left;
    position: fixed !important;
    bottom: 12px !important;
    left: 20px;
    /* Float the links to the left */
}

.footer_links li {
    display: inline-block;
    margin-right: 20px;
    /* Adjust as needed */
    transition: transform 0.3s ease;

    text-decoration: none;
    color: rgb(197, 197, 197);
}

.normal-item {
    cursor: pointer !important;
}

.footer_links li:hover {
    transform: scale(1.1);
}

.footer_links li a {
    text-decoration: none;
    color: rgb(197, 197, 197);
    /* Change to your desired text color */
}

.footer_links li a i {
    margin-right: 5px;
}

.footer_links li a {
    display: flex;
    align-items: center;
}
/* Footer Mitte */
.footer_mitte {
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: left;
    left: 50%;
    transform: translateX(-50%);
    position: fixed !important;
    bottom: 12px !important;
}

.footer_mitte li {
    display: inline-block;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    color: hsla(0, 0%, 100%, 0.8); /* Brighter text color */
    padding: 15px 20px; /* Increased padding for better spacing */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Added box shadow for depth */
}

.footer_mitte li:hover {
    transform: scale(1.1);
    background-color: rgba(
        255,
        255,
        255,
        0.2
    ); /* Change background color on hover */
    color: hsla(0, 0%, 100%, 1); /* Brighter text color on hover */
}

.footer_mitte li a {
    text-decoration: none;
    color: inherit; /* Inherit color from li for consistency */
    font-weight: 700;
    font-size: 25px; /* Slightly larger font size for better readability */
}

/* Footer Rechts */
.footer_rechts {
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: right;
    /* Float the .footer_rechts to the right */
}

.footer_rechts {
    position: absolute;
    bottom: 12px;
    right: 20px;
}

.footer_rechts li {
    display: inline-block;
    margin-left: 20px;
    transition: transform 0.3s ease;
}

.footer_rechts li:hover {
    transform: scale(1.1);
}

.footer_rechts li a {
    text-decoration: none;
    color: hsla(0, 0%, 100%, 0.4);
    /* Change to your desired text color */
}

.footer_rechts li a i {
    margin-left: 5px;
}

.footer_socials li {
    font-size: 35px;
}

.footer_legal {
    left: 12px;
    font-size: 10px;
    color: hsla(0, 0%, 100%, 0.4);
    text-decoration: underline;
    float: right;
}

.footer_legal li {
    display: inline;
    /* Make list items display inline */
    margin-left: 20px;
    /* Add some spacing between items */
}

.play-now {
    z-index: 999 !important;
    background-color: #4caf50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-style: italic;
    display: inline-block;
    font-size: 23px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.play-now:hover {
    transform: scale(1.1);
}

.header_logo img {
    border-radius: 8px;
    z-index: 33;
}

/* ------------------------------ */
#avatar {
    z-index: 3 !important;
    width: 100%;
    height: 100%;
}

.header_buttons {
    z-index: 990 !important;
}

.footer_rechts,
.footer_links {
    z-index: 12 !important;
}

.profile_profile__NiRPb {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    /* Semi-transparent white */
    backdrop-filter: blur(5px);
    border-radius: 25px;
    /* Adjust blur strength as needed */
    border: unset;
    cursor: pointer;
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 990;
}

header {
    z-index: 990 !important;
}

button {
    font-family: var(--default-font);
}

button {
    background: none;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    font-size: 0.875rem;
    padding: 0;
}

.profile_avatar__9dt_x {
    height: 5rem;
    transform: scale(1.1);
    width: 5rem;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.avatar_titleAvatar__AwEMA {
    overflow: hidden;
    position: relative;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.styles_rectangle___6gqv {
    height: 0;
    position: relative;
    width: 100%;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.avatar_titleAvatarImage__cWPGX {
    border-radius: 100%;
    height: 45%;
    margin: 28%;
    overflow: hidden;
    width: 45%;
}

.styles_rectangle___6gqv > * {
    left: 0;
    position: absolute;
    top: 0;
}

.profile_progression__iuwTn {
    box-sizing: border-box;
    min-width: 6.5rem;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.profile_title__hVxff {
    color: var(--ds-color-white);
    margin-bottom: 0.125rem;
    max-width: 11.5rem;
    text-align: start;
    text-transform: uppercase;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.profile_levelProgressWrapper__ZyVr9 {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    white-space: nowrap;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.profile_level__kUo9T {
    color: var(--ds-color-yellow-50);
    margin-bottom: 0.125rem;
    text-transform: uppercase;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.profile_xp__grjiG {
    margin: -0.125rem -1rem;
    width: 100%;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.xp-progress-bar_xpChange__DB8y5 {
    position: relative;
    z-index: 1;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.xp-progress-bar_xpChangeGrid__YK8ru {
    display: grid;
    grid-template-areas:
        "space        xpProgress  space2   "
        "currentLevel progressBar nextLevel"
        "newTitle     newTitle    newTitle ";
    grid-template-columns: auto 1fr auto;
    margin: auto 0;
    grid-gap: 0.25rem 1rem;
    flex: 1 1;
    gap: 0.25rem 1rem;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.xp-progress-bar_progressBar__V8sW0 {
    grid-area: progressBar;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.progress-bar_heightSmall__nQoAa {
    --height: 0.5rem;
}

.progress-bar_root__1WqEp {
    --height: 1.5rem;
    position: relative;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.slanted-wrapper_roundnessSmall__rEqsY {
    --roundness: 0.1875rem;
}

.slanted-wrapper_variantGrey__KL4XO {
    --variant-background-color: var(--ds-color-white-40);
}

.slanted-wrapper_root__2eaEs {
    --variant-box-shadow: none;
    --variant-filter: none;
    --roundness: 0.25rem;
    --interactive-focus-border-width: 0.125rem;
    --interactive-focus-border-color: var(--ds-color-white-20);
    --interactive-focus-border-style: solid;
    filter: var(--variant-filter);
    position: relative;
    z-index: 0;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.progress-bar_progress__Fmo83 {
    height: 100%;
    left: 0;
    max-width: 100%;
    min-width: 1rem;
    position: absolute;
    top: 0;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.coin-count_row__RLztI {
    display: flex;
    flex-direction: row;
}

.coin-count_root__J3cRV {
    align-items: center;
    display: flex;
    gap: 0.25rem;
}

.profile_dropdownIndicator__OBYqL {
    align-items: center;
    display: flex;
    height: 1rem;
    justify-content: center;
    width: 1rem;
}

.profile_title__hVxff > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.label_uppercase__SPiOR {
    text-transform: uppercase;
}

.label_italic__HmPmX {
    font-style: italic;
}

.label_label__i72ag {
    font-size: var(--fs);
    font-weight: 700;
    line-height: var(--lh);
}

.slanted-wrapper_roundnessSmall__rEqsY {
    --roundness: 0.1875rem;
}

.slanted-wrapper_variantGrey__KL4XO {
    --variant-background-color: var(--ds-color-white-40);
}

.slanted-wrapper_root__2eaEs {
    --variant-box-shadow: none;
    --variant-filter: none;
    --roundness: 0.25rem;
    --interactive-focus-border-width: 0.125rem;
    --interactive-focus-border-color: var(--ds-color-white-20);
    --interactive-focus-border-style: solid;
    filter: var(--variant-filter);
    position: relative;
    z-index: 0;
}

element {
    width: 25.3333%;
}

.progress-bar_progress__Fmo83 {
    height: 100%;

    left: 0;

    max-width: 100%;

    min-width: 1rem;

    position: absolute;

    top: 0;
}

.profile_profile__NiRPb * {
    pointer-events: none;
}

.slanted-wrapper_roundnessSmall__rEqsY {
    --roundness: 0.1875rem;
}

.slanted-wrapper_variantYellow__4igch {
    --variant-background-color: var(--ds-color-yellow-50);
}

.slanted-wrapper_root__2eaEs {
    --variant-box-shadow: none;
    --variant-filter: none;
    --roundness: 0.25rem;
    --interactive-focus-border-width: 0.125rem;
    --interactive-focus-border-color: var(--ds-color-white-20);
    --interactive-focus-border-style: solid;
    filter: var(--variant-filter);
    position: relative;
    z-index: 0;
}

.coin-count_row__RLztI div {
    color: #fff;
}

.profile_profile__NiRPb {
    transition: transform 0.1s ease;
}

.profile_profile__NiRPb:hover {
    transform: scale(0.9);
}

.cookie-box {
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 1rem 2rem;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: 700;
    backdrop-filter: blur(5px);
    border-radius: 25px;
    transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

.cookie-box--hide {
    opacity: 0;
    bottom: -100%;
}

.cookie-button {
    display: inline-block;
    cursor: pointer;
    padding: 0.65rem 0.85rem;
    margin-left: 0.45rem;
    color: #fff;
    font-size: 0.75rem;
    letter-spacing: 1px;
    background-image: linear-gradient(62deg, #5a304a 0%, #1a1a2e 100%);
    border-radius: 8px;
}
/* Modern search bar styles */
.search_bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.search_bar.active {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
}

.search_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.container {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.search_bar.active .container {
    transform: translateY(100px);
}

.searchInput {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.searchInput input {
    width: 100%;
    height: 60px;
    padding: 0 60px 0 25px;
    font-size: 18px;
    color: #333;
    border: none;
    outline: none;
    background: transparent;
    transition: all 0.2s ease;
}

.searchInput input::placeholder {
    color: #999;
}

.searchInput input:focus {
    background: #f8f9fa;
}

.resultBox {
    padding: 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.searchInput.active .resultBox {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.resultBox::-webkit-scrollbar {
    width: 6px;
}

.resultBox::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.resultBox::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.resultBox li {
    list-style: none;
    padding: 15px 25px;
    color: #444;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resultBox li:hover {
    background: #f5f7f9;
}

/* Optional animation for list items */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.normal-item {
    animation: fadeIn 0.3s ease forwards;
}

.fa-crown {
    position: absolute;
    right: 25px;
    color: #ffd700;
    transform: translateX(-100%);
}

.disabled {
    color: #999;
    pointer-events: none;
}

.login-button {
    background-color: #83cace;
    border: none;
    color: white;
    padding: 10px 20px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 15px;
    transition: all 0.1s ease;
}

.login-button:hover {
    transform: scale(1.1);
}

.signup-button {
    background-color: #4caf50;
    border: none;
    color: white;
    font-weight: 600;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 15px;
    transition: all 0.1s ease;
}

.signup-button:hover {
    transform: scale(1.1);
}

#spline_thing {
    display: block !important;
    position: absolute;
    bottom: 0;
    transform: translateY(33%);
}

#globe_img {
    z-index: 1;
}

@media (max-width: 767px) {
    #globe_img {
        display: none !important;
    }

    #spline_thing {
        display: none !important;
    }

    .footer_links li i {
        font-size: 24px;
        margin-right: 5px;
    }

    .footer_links li p {
        display: none !important;
    }

    .footer_links li a i {
        font-size: 24px;
        margin-right: 5px;
    }

    .footer_links li a p {
        display: none !important;
    }
}

#spline_thing {
    z-index: 1 !important;
}

.game_modes p,
.game_modes div {
    z-index: 999 !important;
}