#top-bar, #bottom-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 20px;
    font-size: 18px;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: var(--z-button-bar);
    background: none;
}
#top-bar {
    margin-top: 10px;
    position: fixed;
}
#bottom-bar {
    padding: 10px 0;
    gap: 20px;
}

#bottom-bar .bar-icon-button {
    padding: 3px;
    border: 2px solid rgba(34, 34, 34, 0.9);
}

.bar-item {
    margin: 0 0px;
    pointer-events: auto; /* Enable interactions */
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 20px;
    user-select: none;
    font-family: "Jersey 15", "Roboto", sans-serif;
    white-space: nowrap;
}

/* Frosty background effect */
.frosty-bg {
    background: rgba(34, 34, 34, 0.6);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    color: #fff;
}

/* Adjust total score color */
#total-score.bright {
    background: rgba(40, 167, 69, 1.0);
}
#total-score.dull {
    /*background: rgba(136, 136, 136, 0.6);*/
}
#total-score>span {
    font-family: "Jersey 10", "Jersey 15", "Roboto", sans-serif;
    margin-left: 0.1ch;
}
#total-score {
    min-width: 8.1ch; /* width of 8.1 chars: 'SCORE ' + 2 digit number + 0.1ch margin */
    display: inline-block;
    text-align: center;
}
#letters-used {
    min-width: 13ch; /* width of 8 chars: 2 digit number + '/' + 2 digit number + ' LETTERS' */
    display: inline-block;
    text-align: center;
}
#optimal-count {
    min-width: 10ch; /* width of 10 chars: 'OPTIMAL ' + 2 digit number */
    display: inline-block;
    text-align: center;
    pointer-events: auto;
}

.center-container {
    display: inline-flex;
    /*flex-wrap: wrap;*/
    flex-direction: column;
    margin: 0 auto;
}

#title-bar {
    font-family: "Jersey 15", "Jersey 10", "Roboto", sans-serif;
    display: flex;              /* Use flex if you need to align items inside */
    width: 100%;                /* Will always be as wide as the container */
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 15px;
    gap: 0;
    user-select: none;
}
#button-bar {
    display: flex;              /* Layout for your buttons/items */
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
    gap: 20px;
}

#title-bar span.title {
    font-size: 24px;
    color: rgba(34, 34, 34, 0.6);
    flex-grow: 1;
    text-align: left;
    font-variant: small-caps;
}

.logo-container {
    display: flex;               /* Enables Flexbox */
    justify-content: center;     /* Centers horizontally */
    align-items: center;         /* Centers vertically */
}

.logo-container::before {
    font-size: 16px;
    content: 'by';
    margin-right: 5px;
    color: rgba(204, 204, 204, 0.9);
}

#logo {
    display: flex;
    width: 80px;
    height: 32px;
    outline: none;
    background: url("../images/vierte-logo-cropped.png") no-repeat center;
    background-size: contain;
    cursor: pointer;
    pointer-events: auto;
}

.bar-icon-button {
    cursor: pointer;
    padding: 0;
    background: none;
    color: rgba(34, 34, 34, 0.6);
    text-shadow: 0 0 1px rgba(34, 34, 34, 0.6);
}
.bar-icon-button:hover {
    color: rgba(34, 34, 34, 0.8);
    cursor: pointer;
    text-shadow: 0 0 1px rgba(34, 34, 34, 0.8);
}
.penalty-icon {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 14px;
    color: white;
    background: #B56A68;
    background: rgba(181, 106, 104, 0.6);
    backdrop-filter: blur(1px);
    border-radius: 50%;
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
}