/* One viewport-sized playing area, with answers kept in their poker context. */
@media (max-width: 600px) {
    body:has(.is-Exercice) nav.navbar { height: auto !important; min-height: 60px; }
    body:has(.is-Exercice) .navbar-brand { margin-right: 8px; }
    body:has(.is-Exercice) .navbar .logo-text { font-size: clamp(16px, 4.8vw, 20px); }
    main:has(.is-Exercice) { min-width: 0; padding-inline: 8px; }
    main:has(.is-Exercice) .title-screen { font-size: 21px; line-height: 1.2; margin: 6px 0; overflow-wrap: anywhere; }
    main:has(.is-Exercice) .text-action { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2 !important; max-width: 100%; }
    main:has(.is-Exercice) .container-withouth-player-top { display: none; }
    .exercise-stage {
        --seat-width: clamp(76px, 22vw, 86px);
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: var(--exercise-height, calc(100svh - 110px));
        max-width: 460px;
        margin: 0 auto 16px;
    }
    main:has(.is-Exercice) .table-container {
        width: 100%; max-width: 460px;
        height: 440px; margin: 8px auto 16px;
        border: 5px solid #eed09d;
        border-radius: 42% / 25%;
    }
    main:has(.is-Exercice) .exercise-stage > .table-container { flex: 1 1 0; min-height: 260px; height: auto; margin: 0; }
    main:has(.is-Exercice) .players-container { z-index: 5; }
    .exercise-stage .table-container .player-container {
        width: var(--seat-width) !important;
        height: auto !important;
        min-height: 44px;
        padding: 3px !important;
        gap: 2px !important;
        font-size: 11px;
        overflow-wrap: anywhere;
        /* Insets keep every player's complete box within the same table. */
        left: calc(4px + var(--seat-x, .5) * (100% - var(--seat-width) - 8px));
        top: calc(12px + var(--seat-y, .5) * (100% - 24px));
        transform: translateY(calc(-100% * var(--seat-y, .5)));
    }
    main:has(.is-Exercice) .button-dealer { right: -1px; top: -11px; width: 22px; height: 22px; line-height: 18px; }
    .exercise-stage .table-container .community-container {
        position: absolute;
        top: 50% !important; left: 50%;
        width: calc(100% - 2 * var(--seat-width) - 20px);
        max-width: none;
        transform: translate(-50%, -50%);
        gap: 6px;
        z-index: 6;
        pointer-events: auto;
    }
    main:has(.is-Exercice) .community-cards { gap: 2px !important; flex-wrap: wrap; max-width: 100%; }
    main:has(.is-Exercice) .card-wrapper { width: 30px; height: 43.5px; flex: 0 0 30px; }
    main:has(.is-Exercice) .card-sprite { transform-origin: top left; transform: scale(.5) translateX(calc(-1 * var(--x, 0px))); }
    main:has(.is-Exercice) .card-img { width: 30px; height: 43.5px; object-fit: contain; }
    main:has(.is-Exercice) .empty-card-slot { width: 30px; height: 44px; }
    main:has(.is-Exercice) .hero-badge { font-size: 10px; top: -10px; word-spacing: normal; padding: 1px 4px; }
    main:has(.is-Exercice) .spot-steps { max-width: 100%; font-size: 10px; }
    main:has(.is-Exercice) .btn { min-height: 44px; min-width: 44px; white-space: normal; }
    .exercise-stage .player-container .btn { padding: 4px; font-size: 12px; width: 100%; }
    .exercise-stage .player-container .mt-1 { margin-top: 0 !important; }
    .exercise-stage .player-container form { width: 100%; }
    .exercise-stage .timer { font-size: 0 !important; white-space: nowrap; color: #17212b !important; background: #f8f9fa; }
    .exercise-stage .timer::after { content: attr(data-countdown); font-size: 12px; }
    .exercise-stage .player-container .input-group { flex-wrap: wrap; }
    .exercise-stage .player-container .input-group input { order: -1; min-width: 100%; max-width: 100% !important; height: 24px; padding: 0; }
    .exercise-stage .player-container .input-group button { width: 50%; min-width: 0; touch-action: none; }
    main:has(.is-Exercice) .btn-breadcrumb { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; margin-bottom: 4px !important; }
    main:has(.is-Exercice) .btn-breadcrumb .btn { min-height: 28px; padding: 3px 8px; font-size: 11px; flex-shrink: 0; }
    main:has(.is-Exercice) nav:has(.breadcrumb-step.invisible):not(:has(.breadcrumb-step:not(.invisible))) { display: none; }
    .exercise-dock { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; padding: 6px; border-radius: 8px; background: var(--bs-secondary-bg); }
    .exercise-dock[hidden] { display: none; }
    .exercise-dock .text-action { width: 100%; font-size: 16px !important; margin: 0 !important; padding: 0 !important; background: transparent; }
    .exercise-dock .option-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; width: 100%; }
    .exercise-dock .btn { padding: 6px 10px; max-width: 100%; font-size: 14px; }
    .exercise-dock form { margin: 0 !important; gap: 6px !important; }
    .exercise-stage .btn:focus-visible { outline: 3px solid white; outline-offset: 2px; }
    main:has(.is-Exercice) .container-index { margin-top: 16px !important; }
    main:has(.is-Exercice) .extra-info-container { padding: 0 8px; }
    main:has(.is-Exercice) .extra-info-table { width: 100%; table-layout: fixed; overflow-wrap: anywhere; }
    main:has(.is-Exercice) .extra-info-table:has(th:nth-child(3)) th:first-child { width: 18%; }
    main:has(.is-Exercice) .extra-info-table:has(th:nth-child(3)) th:nth-child(2) { width: 22%; }
    main:has(.is-Exercice) .formula-container { max-width: 100%; overflow-wrap: anywhere; }
}

@media (max-width: 400px) {
    .exercise-stage .community-cards:has(.card-wrapper:nth-child(5)) { width: 94px; }
}
@media (max-width: 350px) {
    .exercise-dock .option-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exercise-dock .option-container .text-action { grid-column: 1 / -1; }
    .exercise-dock .option-container > button:last-child:nth-child(even) { grid-column: 1 / -1; }
    .exercise-dock .option-container > button { font-size: 12px; padding: 4px 6px; }
}
/* Keep position and role above the cards on both mobile and desktop. */
main:has(.is-Exercice) .player-container > .hero-badge {
    position: static !important;
    left: auto !important;
    top: auto;
    transform: none !important;
    flex-shrink: 0;
    max-width: 100%;
    padding: 2px 4px;
    line-height: 1.15;
    word-spacing: normal;
}
@media (max-width: 600px) {
    .exercise-stage .hero-badge br { display: none; }
}