/* === PHASE STRIP === */
.phase-strip {
    display: flex;
    background-color: var(--bg-surface);
    border-bottom: 2px solid var(--border);
    height: 2.75rem;
    gap: 0;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 49;
}

.phase-segment {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease-out;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-2);
}

.phase-segment.active {
    color: white;
    font-weight: 700;
    transform: scale(1.02);
}

.phase-segment.completed {
    color: var(--text-muted);
}

/* Phase-colored segments */
.phase-segment[data-phase="start"].active {
    background-color: var(--phase-start);
}

.phase-segment[data-phase="movement"].active {
    background-color: var(--phase-movement);
}

.phase-segment[data-phase="shooting"].active {
    background-color: var(--phase-shooting);
}

.phase-segment[data-phase="assault"].active {
    background-color: var(--phase-melee);
}

.phase-segment[data-phase="end"].active {
    background-color: var(--phase-end);
}

.phase-check {
    font-size: 0.7rem;
}

/* === INLINE PHASE NAVIGATION BUTTONS === */
.phase-strip-back,
.phase-strip-next {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 200ms ease-out;
    white-space: nowrap;
}

.phase-strip-back {
    padding: 0 var(--space-2);
    font-size: 0.7rem;
    background-color: var(--bg-elevated);
    color: var(--text-muted);
    border-right: 1px solid var(--border);
}

.phase-strip-back:active {
    background-color: var(--bg-card);
}

.phase-strip-next {
    padding: 0 var(--space-3);
    font-size: 0.7rem;
    min-width: 4.5rem;
    /* Match BACK styling so NEXT looks identical on every phase. The
       phase-colored variants below are intentionally no-ops. */
    background-color: var(--bg-elevated);
    color: var(--text-muted);
    border-left: 1px solid var(--border);
}

.phase-strip-next:active {
    background-color: var(--bg-card);
}

/* Phase-colored next button — kept for class-name compatibility but
   neutralized so NEXT stays uniform with BACK. */
.phase-strip-next.phase-start,
.phase-strip-next.phase-movement,
.phase-strip-next.phase-shooting,
.phase-strip-next.phase-assault,
.phase-strip-next.phase-end {
    background-color: var(--bg-elevated);
    color: var(--text-muted);
}

/* Hide next button for guests in linked games. Only guests get the
   .linked-as-p2 class; the bare .linked-game class is applied to the
   host too, so scope this to guest-only or the host's NEXT button
   disappears the moment a guest joins. */
.linked-game.linked-as-p2 .phase-strip-next {
    display: none;
}

/* === MOBILE LAYOUT (≤480px) ===
   On phones we only show the active phase between BACK and NEXT —
   inactive segments are hidden. Cleaner than dots and gives the
   current phase label all the room it needs. */
@media (max-width: 480px) {
    .phase-strip-back {
        padding: 0 8px;
        font-size: 0.7rem;
    }
    .phase-strip-next {
        min-width: 3.5rem;
        padding: 0 10px;
        font-size: 0.7rem;
    }
    .phase-segment {
        display: none;
    }
    .phase-segment.active {
        display: flex;
        flex: 1 1 auto;
        font-size: 0.85rem;
        padding: 0 var(--space-2);
        letter-spacing: 0.04em;
        min-width: 0;
        white-space: nowrap;
    }
}