/* Barre du haut de la table (Components/Table/TopBar.razor). */

.game-topbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.9rem;
}

.room-code {
    opacity: 0.75;
    font-size: 0.8rem;
}

.turn-info {
    font-weight: 600;
}

.smile-counter {
    font-weight: 700;
    color: var(--gold);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.salary-counter {
    font-weight: 700;
    color: #8fe388;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.dirty-money-counter {
    font-weight: 700;
    color: #c9a6f7;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.skip-turn-counter {
    font-weight: 700;
    color: #ff8a80;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.turn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-left: auto;
}

/* Extension Fantastique, étapes 4-5 : sirène, pouvoir éphémère. */
.power-btn { background: linear-gradient(135deg, #7a4ed9, #3346a8); color: #fff; }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
    .game-topbar::-webkit-scrollbar {
        display: none;
    }

    .game-topbar > * {
        flex: 0 0 auto;
    }

    .game-topbar .room-code,
    .game-topbar .btn-label {
        display: none;
    }

    .game-topbar .turn-info {
        white-space: nowrap;
        max-width: 38vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .smile-counter,
    .salary-counter,
    .dirty-money-counter,
    .skip-turn-counter {
        padding: 0.1rem 0.4rem;
    }

    .game-topbar .btn.small {
        margin: 0;
        padding: 0.25rem 0.45rem;
        font-size: 0.74rem;
    }

    .game-topbar .turn-actions {
        flex-wrap: nowrap;
        gap: 0.3rem;
    }

    .game-topbar .turn-actions .btn {
        margin: 0;
        padding: 0.35rem 0.65rem;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .game-topbar .turn-actions .error {
        white-space: nowrap;
    }

    /* ---------- iPhone en mode paysage : hauteur d'écran réduite, on compacte ---------- */
    /* ---------- Écran étroit (iPhone en portrait) : on compacte l'accessoire pour laisser
   la place à l'essentiel (la main, en bas). Indépendant de l'orientation/hauteur, contrairement
   à la règle landscape ci-dessus : un iPhone en portrait est haut mais ÉTROIT, donc c'est la
   largeur qui doit déclencher la compaction ici. ---------- */
    /* Barre du haut sur une seule ligne (défile si besoin), boutons en icônes. */
    .game-topbar {
        flex-wrap: nowrap;
        gap: 0.3rem;
        padding: 0.25rem 0.4rem;
        font-size: 0.74rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .turn-actions .error {
        font-size: 0.8rem;
    }

    /* Téléphone : la bulle du tchat (fixée en haut à droite) recouvrait « Terminer le tour ». */
    .game-topbar .turn-actions {
        margin-right: 46px;
    }
}

@media (max-width: 400px) and (orientation: portrait) {
    .game-topbar .turn-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
        overflow-x: auto;
        scrollbar-width: none;
    }

    /* Portrait étroit : « Terminer le tour » passe sur une 2e ligne plutôt que d'être coupé à droite. */
    .game-topbar {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }
}