/* Wspólny nagłówek panelu i wszystkich modułów gry. */
.app-topbar {
    position: sticky;
    z-index: 40;
    top: 0;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 70px;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: .65rem clamp(1rem, 3vw, 2.5rem);
    border-bottom: 1px solid #274e70;
    background: rgb(13 48 80 / 96%);
    color: #fff;
    box-shadow: 0 5px 20px rgb(5 27 48 / 18%);
    backdrop-filter: blur(15px);
}

.app-topbar__start { display: flex; align-items: center; gap: .75rem; }
.app-resource-bar { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.app-resource {
    display: inline-flex;
    min-height: 2.55rem;
    align-items: center;
    gap: .42rem;
    padding: .45rem .7rem;
    border: 1px solid rgb(157 205 236 / 28%);
    border-radius: 999px;
    background: rgb(255 255 255 / 10%);
    color: #fff;
    box-shadow: none;
    font-size: .78rem;
    line-height: 1;
}
.app-resource small { color: #b8d2e4; font-size: .66rem; font-weight: 800; }
.app-resource strong { color: inherit; font-weight: 800; }

@media (max-width: 680px) {
    .app-topbar { min-height: 68px; gap: .5rem; padding-inline: .8rem; }
    .app-topbar__start { gap: .4rem; }
    .app-resource-bar { gap: .3rem; }
    .app-resource { min-height: 2.25rem; padding: .35rem .55rem; }
    .app-resource small { display: none; }
}

@media (max-width: 390px) {
    .app-resource { gap: .28rem; padding-inline: .45rem; }
}