/* PHASE10_V73_CENTER_MENU_START
   Narrow, centre-aligned action panel for mobile touch. Overrides V71's
   left+right stretch and the original V7 portrait grid. Card hand is still
   positioned by V72 script and remains half visible ABOVE this panel.
   Does not touch PC/fine-pointer view or actual card/game buttons' logic.
*/
@media (pointer: coarse), (hover: none) and (max-width: 1100px) {
    #gameScreen .game-action-bar {
        position: absolute !important;
        z-index: 350 !important;
        left: 50% !important;
        right: auto !important;
        bottom: max(4px, env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%) !important;
        transform-origin: center bottom !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))) !important;
        min-height: 0 !important;
        height: auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(4px, .7vw, 8px) !important;
        padding: 6px 9px !important;
        overflow: visible !important;
        border: 1px solid rgba(252,210,124,.58) !important;
        border-radius: 15px !important;
        background: linear-gradient(180deg, #101c2d 0%, #080d18 100%) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,242,203,.11) !important;
        isolation: isolate !important;
    }
    #gameScreen .game-action-bar > .selected-count {
        box-sizing: border-box !important;
        position: static !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        justify-content: center !important;
        align-items: center !important;
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 74px !important;
        width: auto !important;
        height: 35px !important;
        padding: 0 7px !important;
        margin: 0 !important;
        color: #f3dfb9 !important;
        font-size: clamp(10px, 1.3vw, 12px) !important;
        white-space: nowrap !important;
        text-align: center !important;
        background: rgba(255,255,255,.035) !important;
        border: 1px solid rgba(255,222,152,.13) !important;
        border-radius: 10px !important;
    }
    #gameScreen .game-action-bar > .game-action-button {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 6px clamp(7px, 1vw, 12px) !important;
        border-radius: 11px !important;
        line-height: 1.12 !important;
        font-size: clamp(10px, 1.35vw, 12px) !important;
        font-weight: 800 !important;
        text-align: center !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        overflow: hidden !important;
        touch-action: manipulation !important;
    }
    #gameScreen .game-action-bar > .game-action-button[hidden] {
        display: none !important;
    }
    #gameScreen .game-action-bar > #autoFinishButton[hidden] {
        display: none !important;
    }
}

/* Extremely narrow landscape screens still need all actions to fit. */
@media (pointer: coarse) and (orientation: landscape) and (max-width: 710px),
       (hover: none) and (orientation: landscape) and (max-width: 710px) {
    #gameScreen .game-action-bar {
        gap: 3px !important;
        padding: 4px 5px !important;
    }
    #gameScreen .game-action-bar > .game-action-button {
        padding: 4px 5px !important;
        font-size: 9px !important;
        height: 34px !important;
        min-height: 34px !important;
    }
    #gameScreen .game-action-bar > .selected-count {
        min-width: 0 !important;
        padding: 0 4px !important;
        font-size: 9px !important;
    }
}

/* In portrait the game can add 'Karte ziehen'. Keep every control accessible
   in one compact grid instead of offscreen absolute-position buttons. */
@media (pointer: coarse) and (orientation: portrait),
       (hover: none) and (orientation: portrait) and (max-width: 1100px) {
    #gameScreen .game-action-bar {
        width: min(470px, calc(100% - 16px)) !important;
        max-width: calc(100% - 16px) !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(32px, auto) !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: 5px !important;
        overflow: visible !important;
    }
    #gameScreen .game-action-bar > .selected-count {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        height: 20px !important;
        min-height: 20px !important;
    }
    #gameScreen .game-action-bar > .game-action-button {
        position: relative !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        font-size: clamp(9px, 2.5vw, 11px) !important;
        padding: 3px 4px !important;
        white-space: normal !important;
    }
}
/* PHASE10_V73_CENTER_MENU_END */