* {
    margin: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: rgb(84, 194, 230);
    transition: 0.2s;
}

a:hover {
    font-weight: bold;
}

body {
    font-family: sans-serif;
    font-family: "Ubuntu Sans Mono", monospace;
    text-align: center;
    line-height: 2;
    background-color: gray;
    background-image: radial-gradient(rgb(0, 72, 131), black);
    color: white;
}

header {
    /* background-image: url(assets/grid-bg-ChatGPT\ Image\ 14\ mar\ 2026\,\ 22_49_52.png);
    background-size: cover;
    background-position: center;
    filter: hue-rotate(200deg); */
    text-align: left;
    
}

header>h1 {
    text-shadow: 5px 5px black;

    cursor: pointer;
}

header a {
    color: unset;
}

header,
footer {
    padding: 20px;
    background-color: rgb(21, 64, 98);
    color: rgb(255, 255, 255);
}

.KolorTitolo {
    max-width: 250px;
    filter: drop-shadow(2.5px 2.5px 1px black);
}

#info {
    padding: 40px;
    background-image: linear-gradient(90deg, rgb(114, 35, 114), rgb(24, 0, 49));
    color: white
}

#peopleOnlineSection {
    /* The landing page needs the online roster to feel like a real UI card
    instead of a loose heading, so we give it a compact framed container that
    still matches Kolorlando's blue-toned menu styling. */
    width: min(720px, calc(100% - 24px));
    margin: 30px auto;
    padding: 18px 20px;
    border: solid 2px rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(7, 34, 61, 0.92), rgba(6, 14, 31, 0.95));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    text-align: left;
}

#peopleOnlineHeader {
    /* The count and status line are grouped so players can instantly tell
    whether the roster is simply empty or the realtime socket is still joining. */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px 16px;
}

#peopleOnlineHeader h2 {
    margin: 0;
}

#peopleOnlineCount {
    color: rgb(125, 255, 155);
}

#peopleOnlineList {
    /* The landing page roster should read like a compact session monitor,
    keeping each connected client on its own line without the browser's
    default list spacing making the card feel loose. */
    margin: 14px 0 0;
    padding-left: 20px;
    color: white;
}

#peopleOnlineList li+li {
    margin-top: 8px;
}

#playButton {
    border: solid 6px green;
    color: rgb(0, 52, 0);
    background-color: rgb(72, 255, 72);
    margin-top: 10px;
    padding: 5px;
    min-width: 220px;
    font: unset;
    font-size: 2rem;
    font-family: var(--uiFont);
    transition: 0.2s;
}

#playButton:hover {
    color: white;
}

#playButton:active {
    color: red;
}

/* Shared gallery row used by both the landing page screenshots and the hall cards. */
#kImages {
    width: 100%;
    padding: 40px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;

}

/* Landing page screenshot cards keep the simpler outer frame style. */
#kImages>div {
    width: 30%;
    line-height: 0;
    overflow: hidden;
    background-color: rgb(15, 49, 85);
    box-shadow: 0 0 3px white;
    border: solid 1px white;
    border-radius: 15px;
    aspect-ratio: 16/9;
}

#kImages>div>img {
    transition: 0.2s;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: 0.2s;
    overflow: hidden;
    display: block;
}

#kImages>div>img:hover {
    transform: scale(1.25);
}

.kLevelsDisplay {
    width: 100%;
    padding: 40px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;

}

/* Hall cards add their own card shell while still living inside #kImages. */
.kLevels {
    width: 25%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(15, 49, 85);
    box-shadow: 0 0 3px white;
    border: solid 1px white;
    border-radius: 15px;
    transition: 0.2s;
    aspect-ratio: 4/3.5;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.kLevels>div {
    aspect-ratio: 16/9;
    width: 100%;
    transition: 0.2s;
    overflow: hidden;
}

.kLevels>h2 {
    font-variant: small-caps;
}

.kLevels>p {
    background-color: rgb(0, 20, 45);
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kLevels>div>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.2s;
    overflow: hidden;
    display: block;
}

.kLevels:hover {
    box-shadow: 0 0 15px white;


}

.kLevels>div>img:hover {
    transform: scale(1.25);
}

.gallery {
    background-color: rgb(70, 92, 156);
}

@media screen and (max-width: 1000px) {

    #kImages>div,
    .kLevels {
        width: 40%;
        margin: 10px;
    }
}

/* Mobile layout stacks cards full width on narrow screens. */
@media screen and (max-width: 800px) {
    #kImages {
        padding: 0;
    }

    #kImages>div,
    .kLevels {
        width: 100%;
        margin: 10px;
    }

    .desktopDiv {
        display: none;
    }

    #peopleOnlineSection {
        width: calc(100% - 16px);
        margin: 20px 8px;
        padding: 14px;
    }
}

.invisible {
    display: none;
}

.box {
    max-width: 300px;
    margin: auto;
    text-align: left;
    padding: 5px;
    border-bottom: solid 1px white;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 80%, rgba(255, 255, 255, 0.383));
}

#idDiv {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 200px;
    font-size: 1rem;
    text-align: right;
    display: flex;
    align-items: center;
    z-index: 999;

}

#idDiv_icon_wrapper {
    width: 50px;
    margin-left: 15px;
    border: solid 2px white;
    border-radius: 50%;

    cursor: pointer;
    overflow: hidden;

}

#idDiv_icon {
    filter: invert(1);
    display: block;
}

.authModal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-y: auto;
}

.authModal.invisible {
    /* The modal uses flex for centering when visible, so this stronger rule
    makes sure the shared invisible utility still hides it on first load. */
    display: none;
}

.authModal_backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.authModal_panel {
    /* Keep the form readable above the dark backdrop while matching the
    rest of the game's blue-toned UI language. */
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-height: calc(100vh - 40px);
    padding: 25px;
    border: solid 2px white;
    border-radius: 20px;
    background: linear-gradient(180deg, rgb(20, 76, 119), rgb(5, 25, 49));
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    overflow-y: auto;
}

.authModal_panel.is-session-blocked {
    border-color: rgb(255, 92, 92);
    background: linear-gradient(180deg, rgb(104, 24, 24), rgb(39, 8, 8));
    box-shadow: 0 0 28px rgba(255, 74, 74, 0.28);
}

.authModal_statusBadge {
    display: inline-block;
    margin: 10px 0 16px;
    padding: 6px 12px;
    border: solid 1px rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background-color: rgba(255, 82, 82, 0.2);
    color: rgb(255, 191, 191);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.authModal_statusBadge.invisible {
    display: none;
}

.authModal_form {
    /* A compact column layout keeps the sign-in inputs easy to tap on both
    desktop and mobile without introducing extra buttons yet. */
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.authModal_form>input {
    width: 100%;
    padding: 12px;
    border: solid 2px rgb(117, 185, 255);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.12);
    color: white;
    font: inherit;
}

.authModal_form>input::placeholder {
    color: rgba(255, 255, 255, 0.72);
}

.authModal_form>input:focus {
    outline: solid 2px white;
    outline-offset: 2px;
}

.authModal_message {
    /* Reserve a stable feedback area so success and error messages can appear
    without pushing the button around every time auth state changes. */
    min-height: 3.2em;
    padding: 8px 10px;
    border: solid 1px rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.18);
    color: rgb(255, 238, 174);
    line-height: 1.4;
}

.authModal_message.is-session-blocked {
    border-color: rgba(255, 82, 82, 0.45);
    background-color: rgba(97, 9, 9, 0.42);
}


.authModal_sendButton {
    /* The rounded bright button gives the modal a friendlier playful finish
    while staying large enough to tap comfortably on touch screens. */
    margin-top: 8px;
    padding: 12px 18px;
    border: solid 2px white;
    border-radius: 999px;
    background: linear-gradient(180deg, rgb(255, 197, 91), rgb(255, 126, 80));
    color: rgb(42, 17, 0);
    font: inherit;
    font-weight: bold;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

.authModal_sendButton:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 18px rgba(255, 153, 102, 0.4);
    filter: brightness(1.05);
}

.authModal_sendButton:active {
    transform: scale(0.98);
}

@media screen and (max-height: 520px) {
    .authModal {
        align-items: flex-start;
        padding: 12px;
    }

    .authModal_panel {
        max-height: calc(100vh - 24px);
        padding: 18px;
    }
}

.gradient-text {
    background: linear-gradient(90deg, rgb(136, 255, 172), #00c2ff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

#exampleUserProfile {
    
    margin: auto;
    max-width: 230px;

}