/* ============================================================================
   THE SHARED TOP BAR - one thread through the rooms (09-27, his yes).

   On the three ROOM MENUS (RNKLscape directory, RNKLets hub, RNKLzone hub):
       [ <- RNKL(TM) ]  ...........................  [ ROOM NAME ]
   The homepage's own amber bar, carried into every room: the RNKL mark is
   the way home, the name on the right says where you are. Below it, each
   room keeps its own flavour.

   It REPLACES the loose back pill on those three menus only. Inside the
   games the pill rule still holds (see rnkl-back.css): leaving a screen =
   top-left pill, closing a pop-up = last button in the card.

   Fixed, so home is always one tap away while you scroll the directory.
   Being fixed it takes no space: each page gives its content room with
   body.has-rnkl-topbar (below) or its own padding.
   ============================================================================ */
.rnkl-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;                      /* above the pages' scanline/vignette layers */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    height: calc(48px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    margin: 0;
    background: rgba(22, 16, 9, 0.94);
    border-bottom: 1px solid rgba(255, 180, 84, 0.22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
}
.rnkl-topbar-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;                   /* thumb-sized */
    padding: 0 4px 0 0;
    color: #ffb454;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
    text-shadow: 0 0 12px rgba(255, 158, 61, 0.55);
    background: none;
    border: 0;
    box-shadow: none;
}
.rnkl-topbar-home:focus-visible { outline: 2px solid #ffb454; outline-offset: 2px; }
@media (hover: hover) {
    .rnkl-topbar-home:hover { color: #ffcb7d; }
}
.rnkl-topbar-room {
    color: #b4854a;                     /* 5.8:1 on the bar - readable, and quieter than the mark */
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Room for the bar: its 48px plus a 16px breath before the page begins.
   Pages drop the extra top padding they used to keep clear of the pill. */
body.has-rnkl-topbar {
    padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
}