/* =========================================================================
   CS-PLAYER-04 — player navigation, inside the arcade theme.

   Scoped entirely under `.cs-pl-nav`. It sets no global, overrides nothing,
   and touches no existing theme selector — the theme's own navigation is
   byte-identical with or without this file.

   Logical properties only, as in player-ui.css, so it lays out correctly in
   the site's RTL direction without a mirrored copy.

   THE RESERVED SLOT is the important part. `min-width` holds space for the
   wider of the two states, so replacing the anonymous controls with the
   signed-in ones cannot reflow the header. The browser test measures the
   header box before and after bootstrap and requires zero movement; without
   the reservation that measurement fails, which is how the number below was
   chosen rather than guessed.
   ========================================================================= */

.cs-pl-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 168px;           /* the reserved slot — see above */
    min-height: 38px;
    margin-inline-start: 10px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    flex: 0 0 auto;
}

/* The API is unreachable: withdraw the surface, keep the space so the
   surrounding header does not reflow on a slow or failing network. */
.cs-pl-nav[data-state="unavailable"] > * { visibility: hidden; }

.cs-pl-nav-anon,
.cs-pl-nav-auth {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.cs-pl-nav-anon[hidden],
.cs-pl-nav-auth[hidden] { display: none; }

.cs-pl-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 38px is a comfortable target beside the theme's own header controls
       without making the header taller than it already is. */
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(128, 128, 140, .45);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.cs-pl-nav-btn:hover { border-color: currentColor; }

.cs-pl-nav-btn-primary {
    background: #4c7dff;
    border-color: #4c7dff;
    color: #fff;
}
.cs-pl-nav-btn-primary:hover { filter: brightness(1.08); }

.cs-pl-nav-name {
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}
.cs-pl-nav-name:hover { text-decoration: underline; }

.cs-pl-nav-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(128, 128, 140, .45);
    opacity: .8;
    white-space: nowrap;
}

.cs-pl-nav :focus-visible {
    outline: 3px solid #4c7dff;
    outline-offset: 2px;
}

/* Narrow screens: the theme's header is already crowded at 360px, so the
   badge steps aside and the slot narrows. The controls stay full size —
   shrinking a tap target to fit is how a control becomes unreachable. */
@media (max-width: 560px) {
    .cs-pl-nav { min-width: 96px; margin-inline-start: 6px; gap: 6px; }
    .cs-pl-nav-badge { display: none; }
    .cs-pl-nav-btn { padding: 0 10px; }
    .cs-pl-nav-name { max-width: 8ch; }
}

/* ---- the bar ------------------------------------------------------------
   Normal flow at the top of the document. It reserves its own height, so
   the page below it never moves when the nav swaps state, and it covers
   nothing. */
.cs-pl-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 46px;
    padding: 4px 12px;
    box-sizing: border-box;
    background: rgba(127, 127, 140, .08);
    border-block-end: 1px solid rgba(128, 128, 140, .18);
    font-family: system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif;
}
.cs-pl-bar .cs-pl-nav { margin-inline-start: 0; }