html, body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #000000;
}


/* =========================
   LOBBY IMAGE
========================= */

img {
    max-width: 100%;
    height: auto;
}


/* =========================
   GENERAL POPUP
========================= */

.popup {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    /* Dark background */
    background: rgba(0, 0, 0, 0.7);

    display: flex;

    justify-content: center;
    align-items: center;

    z-index: 999;
}


/* =========================
   POPUP BOX
========================= */

.popup-box {
    background: white;

    border: 3px solid black;

    padding: 20px;

    width: 300px;

    border-radius: 10px;

    box-sizing: border-box;
}


/* =========================
   POPUP BUTTON
========================= */

.popup button {
    background: #4b3d2a;

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 6px;

    cursor: pointer;
}


.popup button:hover {
    background: #6a5238;
}


/* =========================
   HIDDEN
========================= */

.hidden {
    display: none !important;
}


/* =========================
   OBJECT POPUP
========================= */

#object-title {
    text-align: center;

    font-size: 24px;

    margin-bottom: 15px;
}


#object-text {
    text-align: justify;

    line-height: 1.2;
}


/* =========================
   OBJECT POPUP BOX
========================= */

#object-popup .popup-box {
    max-width: 90%;
}


/* =========================
   CHARACTER POPUP
========================= */

/*
   This is the popup that appears
   when clicking a character
   directly on the lobby.
*/

#character-popup {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    display: flex;

    justify-content: center;
    align-items: center;

    z-index: 1000;

    box-sizing: border-box;
}


.character-popup-box {
    width: 400px;

    max-width: 90%;

    max-height: 90%;

    overflow: auto;

    background: white;

    border: 3px solid black;

    padding: 20px;

    box-sizing: border-box;

    text-align: center;
}


.character-sheet {
    max-width: 100%;

    max-height: 70vh;

    width: auto;

    height: auto;
}


/* =========================
   CLUE BOARD POPUP
========================= */

#clue-popup {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    display: flex;

    justify-content: center;
    align-items: center;

    z-index: 1000;

    box-sizing: border-box;

    pointer-events: auto;
}


/* =========================
   CLUE BOARD BOX
========================= */

.clue-box {
    width: auto;
    height: auto;

    background: transparent;

    border: none;

    padding: 0;

    box-sizing: border-box;

    text-align: center;

    overflow: visible;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================
   CLUE BOARD IMAGE
========================= */

#clue-board-image {
    display: block;

    max-width: 95vw;
    max-height: 90vh;

    width: auto;
    height: auto;
}


/* =========================
   CHARACTER GALLERY POPUP
========================= */

/*
   IMPORTANT:

   This covers the ENTIRE screen.

   The dark area prevents the lobby
   behind it from being clicked.

   Clicking the dark area does NOTHING
   because there is no onclick attached
   to this element.
*/

#character-gallery-popup {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    display: flex;

    justify-content: center;
    align-items: center;

    z-index: 1000;

    box-sizing: border-box;

    padding: 20px;
}


/* =========================
   CHARACTER GALLERY BOX
========================= */

.character-gallery-box {
    width: 70%;
    max-width: 900px;

    height: 70%;
    max-height: 700px;

    background: #f5f1e8;

    border: 3px solid black;

    padding: 20px;

    box-sizing: border-box;

    text-align: center;

    overflow: auto;
}


/* =========================
   CHARACTER ICONS
========================= */

.character-icons {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

    margin: 20px;
}


.character-icons button {
    background: #ddd;

    color: black;

    border: none;

    padding: 8px;

    cursor: pointer;

    border-radius: 5px;
}


.character-icons button:hover {
    background: #bbb;
}


.character-icons img {
    width: 70px;
    height: 70px;

    object-fit: contain;

    display: block;

    margin: auto;
}


.character-icons span {
    display: block;

    margin-top: 5px;
}


/* =========================
   CHARACTER PROFILE
========================= */

.character-profile {
    margin-top: 20px;

    padding: 20px;

    background: white;

    border: 2px solid black;

    display: flex;

    flex-direction: row;

    gap: 25px;

    text-align: left;

    box-sizing: border-box;
}


/* =========================
   FULL BODY IMAGE
========================= */

.character-profile-image {
    width: 250px;

    min-width: 180px;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    flex-shrink: 0;
}


#profile-image {
    width: 250px;

    max-width: 100%;

    max-height: 450px;

    object-fit: contain;
}


/* =========================
   CHARACTER INFORMATION
========================= */

.character-profile-content {
    flex: 1;

    min-width: 0;
}


#profile-name {
    margin-top: 0;

    margin-bottom: 15px;

    font-size: 24px;
}


/* =========================
   STORY TABS
========================= */

.story-tabs {
    display: flex;

    gap: 8px;

    margin-bottom: 15px;

    flex-wrap: wrap;
}


.story-tabs button {
    background: #ddd;

    color: black;

    border: 1px solid black;

    padding: 7px 12px;

    cursor: pointer;

    border-radius: 4px;
}


.story-tabs button:hover {
    background: #bbb;
}


/* =========================
   STORY DIALOGUE
========================= */

#profile-description {
    text-align: left;

    line-height: 1.4;

    max-height: 350px;

    overflow-y: auto;
}


#profile-description strong {
    font-weight: bold;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

    .character-icons {
        grid-template-columns: repeat(3, 1fr);
    }

    .character-profile {
        flex-direction: column;
    }

    .character-profile-image {
        width: 100%;
        min-width: 0;
    }

    #profile-image {
        max-height: 300px;
    }

}


@media (max-width: 450px) {

    .character-icons {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* =========================
   CHARACTER TAB - MOBILE
========================= */

@media (max-width: 700px) {

    /* Character Gallery window */

    .character-gallery-box {
        width: 95%;
        height: 90%;

        padding: 15px;

        overflow-y: auto;
    }


    /* Character icons */

    .character-icons {
        grid-template-columns: repeat(3, 1fr);

        gap: 8px;

        margin: 10px 0;
    }


    .character-icons button {
        padding: 6px;

        font-size: 12px;
    }


    .character-icons img {
        width: 55px;
        height: 55px;
    }


    /* Character profile */

    .character-profile {
        flex-direction: column;

        gap: 15px;

        padding: 15px;

        margin-top: 15px;
    }


    /* Character image */

    .character-profile-image {
        width: 100%;

        min-width: 0;

        justify-content: center;
    }


    #profile-image {
        width: auto;

        max-width: 100%;

        max-height: 300px;
    }


    /* Character information */

    .character-profile-content {
        width: 100%;

        min-width: 0;
    }


    #profile-name {
        text-align: center;

        font-size: 20px;
    }


    /* Story tabs */

    .story-tabs {
        justify-content: center;

        gap: 5px;
    }


    .story-tabs button {
        padding: 6px 9px;

        font-size: 12px;
    }


    /* Story text */

    #profile-description {
        max-height: 250px;

        font-size: 14px;

        overflow-y: auto;
    }

}


/* =========================
   VERY SMALL PHONES
========================= */

@media (max-width: 450px) {

    .character-icons {
        grid-template-columns: repeat(2, 1fr);
    }


    .character-icons img {
        width: 50px;
        height: 50px;
    }


    .character-gallery-box {
        width: 95%;
        height: 90%;

        padding: 10px;
    }


    .character-profile {
        padding: 10px;
    }


    #profile-image {
        max-height: 250px;
    }


    #profile-description {
        font-size: 13px;
    }

}