/* =========================================================
   TOP BAR
   ========================================================= */

#top-bar {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    flex: 0 0 150px;

    width: 100%;
    height: 150px;

    padding-left: 100px;
    padding-right: 100px;

    text-align: center;

    background-color: var(--glass-dark-solid);
}


/* ---------------------------------------------------------
   Health Bar
   --------------------------------------------------------- */

#health-bar {
    justify-self: start;

    display: flex;
    flex-wrap: wrap;

    gap: 4px;

    max-width: 360px;
    min-width: 0;
}

#health-bar img {
    width: 20px;
    height: 20px;

    object-fit: contain;
}


/* ---------------------------------------------------------
   Navigation
   --------------------------------------------------------- */

#top-nav {
    justify-self: center;

    width: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    column-gap: 24px;
}

.nav-side {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 4px;

    min-width: 100px;
}

.nav-side-left {
    justify-self: start;
}

.nav-side-right {
    justify-self: end;
}


/* ---------------------------------------------------------
   Navigation Buttons
   --------------------------------------------------------- */

.nav-button {
    width: 30px;
    height: 30px;

    padding: 0;

    display: inline-flex;

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

    border: 0;
    background: transparent;

    cursor: pointer;
}

.nav-button:disabled {
    cursor: default;
    opacity: 0.35;
}

.nav-button img {
    width: 30px;
    height: 30px;

    object-fit: contain;
}


/* ---------------------------------------------------------
   Navigation Destination
   --------------------------------------------------------- */

.nav-destination {
    min-height: 1em;

    color: var(--text-color);

    font-size: 14px;
    line-height: 1;

    white-space: nowrap;
}

.nav-destination:empty {
    visibility: hidden;
}


/* ---------------------------------------------------------
   Open Menu
   --------------------------------------------------------- */

#open-menu {
    justify-self: center;

    display: flex;
    flex-direction: column;

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

    gap: 4px;

    min-width: 200px;

    font-family: "Zelda", sans-serif;

    line-height: 1;
}

.open-menu-title {
    font-size: 50px;
    line-height: 1;
}

.open-menu-dots {
    display: inline-flex;

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

    gap: 2px;

    height: 10px;
    max-height: 10px;

    font-size: 0;
    line-height: 0;
}

.open-menu-dots .circle {
    display: block;

    width: 10px;
    height: 10px;

    object-fit: contain;
}

.circle.inactive {
    opacity: 0.55;
}

.circle.active {
    opacity: 1;
}


/* ---------------------------------------------------------
   Counter
   --------------------------------------------------------- */

#counter {
    justify-self: end;

    width: auto;
    min-width: 0;
}