/* The play surface's top banner (operator 2026-08-29).

   One row for what used to be three stacked bars — opponent identity, the event title, the turn
   chip, and the queue walk. On a phone those cost most of a screen before the board appeared, which
   is the whole reason for the merge.

   The event title inside it is core-owned chrome that replaced six per-module banners; those had
   drifted into six different styles, and three modules never rendered one during active play at all
   (ArmadaOne had none anywhere, which is what surfaced the gap). See PlayEventTitleBar. */

.hax-play-banner {
    /* No padding on the shell: the nav caps run edge to edge, so the inner sections carry their
       own. overflow:hidden clips the caps and the progress bar to the rounded corners. */
    padding: 0;
    overflow: hidden;
}

.hax-play-banner-row {
    display: flex;
    align-items: stretch;
}

/* ----- Identity: who, and which event ----- */

.hax-play-banner-identity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-width: 0;                           /* lets long names ellipsis instead of shoving the nav */
    margin-right: auto;
    padding: 0.6rem 0.85rem;
}

.hax-play-banner-who {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.hax-play-banner-name {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The event line. Secondary to the opponent name above it — you check it once to confirm which
   match you are in, where the name is the thing you are playing against. */
.hax-play-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.hax-play-title-icon {
    flex: none;
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 4px;
}

.hax-play-title-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- Status: whose turn, and how stale ----- */

.hax-play-banner-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    padding: 0.6rem 0.85rem;
}

.hax-play-banner-when {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ----- Queue walk -----
   Tinted end caps rather than text links (operator 2026-08-29): as plain text on the banner's own
   surface they read as labels and disappeared into it. Capping both ends gives the bar three
   visible segments — walk left, this match, walk right — and makes the whole cap the tap target,
   comfortably past the 44px touch floor without its own media query. */

.hax-play-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 4.25rem;
    padding: 0.5rem 0.6rem;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-primary);
    text-decoration: none;
    transition: background-color 120ms ease;
}

/* The seam between a cap and the banner body. Only on the inner edge — the outer edge is the
   banner's own rounded corner. */
.hax-play-nav--prev {
    border-right: 1px solid var(--mud-palette-divider);
}

.hax-play-nav--next {
    border-left: 1px solid var(--mud-palette-divider);
}

.hax-play-nav:hover {
    background: var(--mud-palette-action-default-hover);
    text-decoration: none;
}

.hax-play-nav-chevron {
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 400;
}

.hax-play-nav-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* At a boundary the cap stays in place rather than vanishing, so the banner never reflows
   mid-walk. It loses the tint as well as the colour, so "there is nothing that way" reads at a
   glance rather than needing the text. */
.hax-play-nav.is-disabled {
    background: transparent;
    color: var(--mud-palette-text-disabled);
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Underlines the whole banner during a queue walk instead of sitting between the links, so the nav
   does not shift while a load is in flight. */
.hax-play-banner-progress {
    width: 100%;
}

/* ----- Narrow viewports -----
   The label under each chevron is the first thing to go: the arrows are self-explanatory and the
   space is worth more to the opponent name. The tint stays — it is what makes the caps findable. */
@media (max-width: 480px) {
    .hax-play-nav {
        min-width: 2.75rem;
        padding: 0.5rem 0.35rem;
    }

    .hax-play-nav-label {
        display: none;
    }

    .hax-play-banner-identity,
    .hax-play-banner-status {
        padding: 0.5rem 0.6rem;
    }
}