/* Phones and tablets — single-player (index.html) and multiplayer (multiplayer.html).
   Loaded after style.css (and mp-layout.css), so these rules win on small screens. */

/* Short button labels exist only for phones (see .btn-long below) */
.btn-short { display: none; }

/* Any touch screen, also wide ones (iPad / Android tablets held sideways use the desktop layout):
   double-click and drag & drop do not work with fingers, so "Взяти" / "Скинути" must be there;
   no text selection or double-tap zoom while playing */
@media (hover: none), (pointer: coarse) {
    #take-card, #discard-card { display: inline-flex !important; }
    #game-container, #mpx-chat, #mpx-challenge {
        -webkit-user-select: none; user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
    #game-container button, #game-container .card, #game-controls button { touch-action: manipulation; }
    #mpx-chat input { font-size: 16px; -webkit-user-select: text; user-select: text; }
    .card:hover { transform: none; }
}

/* ════════════════ Tablets and phones (≤ 900px, or any phone held sideways) ════════════════ */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    :root { --card-width: 54px; --card-height: 80px; }

    #game-container { height: 100vh; height: 100dvh; }

    /* Touch screens (iPhone): no double-tap zoom, no text selection / callout menu on long taps */
    #game-container, #mpx-chat, #mpx-challenge {
        -webkit-user-select: none; user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
    #game-container button, #game-container .card, #game-controls button, #mpx-chat, #mpx-challenge { touch-action: manipulation; }
    #mpx-chat input { font-size: 16px; -webkit-user-select: text; user-select: text; }   /* < 16px makes iOS zoom in */

    /* Compact one-line header */
    #game-header,
    #multiplayer-game-area #game-header {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 4px 8px;
    }
    #game-header h1 {
        font-size: 0.95rem !important;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    #game-header .header-section { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
    #game-header .logo-card { width: 18px; height: 25px; }   /* the small joker card next to "Joker" */
    #game-header .game-info { display: flex; gap: 4px; flex-shrink: 0; }
    #game-header .game-info span { font-size: 0.75rem; padding: 2px 6px; }
    #game-header .header-controls { flex-wrap: nowrap; gap: 4px; flex-shrink: 0; }
    #game-header .header-controls button { font-size: 0; padding: 6px 8px; min-width: 0; }
    #game-header .header-controls button i { font-size: 14px; }

    /* The game messages become a slim strip under the header (tap to expand) */
    #game-container { display: flex; flex-direction: column; }
    #game-header { order: 0; }
    #game-messages-window.game-messages,
    #multiplayer-game-area #game-messages-window.game-messages {
        order: 1;
        position: static;
        width: auto;
        max-height: 58px;
        margin: 4px 8px 0;
        cursor: pointer;
        flex-shrink: 0;
        transform: none !important;
    }
    #game-messages-window .messages-header { display: none; }
    #game-messages-window .messages-content { max-height: 54px; padding: 3px 6px; }
    #game-messages-window .message { font-size: 13px; padding: 2px 6px; }
    #game-messages-window.expanded { max-height: 55vh !important; }
    #game-messages-window.expanded .messages-content { max-height: 52vh !important; }
    #game-board { order: 2; }
    #game-controls { order: 3; }

    /* All seats stacked in one column: opponents (compact rows: name + card count + their
       combinations), the table, my combinations, my hand.
       A flex column, not a grid: Safari on iPhones sized the grid rows differently (the opponents'
       rows stayed name-high and their combinations were not shown at all).
       The board does not scroll as a whole: my combinations and my hand always stay on screen;
       opponents shrink only when there is no room left, and each seat then scrolls on its own. */
    #game-board,
    #multiplayer-game-area #game-board,
    #multiplayer-game-area #game-board.no-side-seats {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 4px 6px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #player-1 { order: 1; }
    #player-4 { order: 2; }
    #player-2 { order: 3; }
    .center-area { order: 4; flex: none; align-self: stretch; margin-top: auto; margin-bottom: auto; }   /* spare room above and below: the table sits in the middle */
    #laid-combinations-3 { order: 5; flex: none; align-self: stretch; min-width: 0; max-width: 100%; box-sizing: border-box; }
    #hand-3 { order: 6; flex: none; }
    .player-area:not(.player-bottom) { flex: 0 1 auto; min-height: 30px; overflow-y: auto; overscroll-behavior: contain; }
    /* rows keep their full height (the seat scrolls), so the combinations never slide over the name */
    .player-area:not(.player-bottom) { grid-template-rows: auto max-content; }
    .player-area:not(.player-bottom) > .player-laid-combinations { align-self: start; }
    /* My combinations: one row right above my hand, swiped sideways when there are many */
    #laid-combinations-3 { align-self: end; overflow-y: hidden; overflow-x: auto; overscroll-behavior: contain; }
    #combo-display-3 { flex-wrap: nowrap; width: max-content; }
    #combo-display-3 .laid-combo { flex: 0 0 auto; }
    .player-right, .player-left { display: flex; }
    #multiplayer-game-area #game-board:not(.no-side-seats) .player-right { padding-top: 4px; }
    /* Opponent seat: name + card-count badge on one line, its combinations below.
       A grid, not a wrapping flexbox: browsers measure a wrapping flexbox as one line, so the
       board gave the seat too little height and the next seat was drawn over its combinations. */
    .player-area:not(.player-bottom) {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas:
            "info hand ."
            "combos combos combos";
        align-items: center;
        justify-items: start;
        gap: 4px 8px;
        padding: 3px 6px;
    }
    .player-area:not(.player-bottom) > .player-info { grid-area: info; }
    .player-area:not(.player-bottom) > .player-hand { grid-area: hand; }
    .player-area:not(.player-bottom) > .player-laid-combinations { grid-area: combos; justify-self: stretch; }

    /* My seat: its parts sit on the board grid directly, so my hand can stick to the bottom of the
       board and stays visible however many combinations are on the table */
    .player-bottom { display: contents; }
    .player-bottom .player-info { display: none; }
    #laid-combinations-3 { grid-area: mine; }
    #hand-3 {
        grid-area: hand;
        position: sticky; bottom: 0; z-index: 4;
        margin: 0 -6px;
        background: rgba(13,31,23,0.97);
        border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0;
        border-top: 1px solid rgba(201,168,76,0.25);
    }
    /* My turn: my seat box is not drawn here (display: contents), so my hand itself glows gold */
    .player-bottom.active-player #hand-3 {
        border-top: 2px solid var(--gold-bright, #e2c068);
        background: linear-gradient(180deg, rgba(226,192,104,0.30), rgba(13,31,23,0.97) 75%);
        animation: myHandTurn 1.6s ease-in-out infinite;
    }
    .player-bottom.active-player #hand-3 .card:not(.selected) { box-shadow: 0 0 0 1px rgba(226,192,104,0.85), 0 3px 10px rgba(226,192,104,0.45); }
    @keyframes myHandTurn {
        0%, 100% { box-shadow: inset 0 3px 12px rgba(226,192,104,0.35), 0 -4px 16px rgba(226,192,104,0.30); }
        50%      { box-shadow: inset 0 3px 18px rgba(226,192,104,0.60), 0 -6px 26px rgba(226,192,104,0.60); }
    }
    .player-area:not(.player-bottom) .player-info { padding: 2px 8px; min-height: 0; height: auto; }
    .player-area:not(.player-bottom) .player-info .player-name { font-size: 15px; line-height: 1.3; padding: 0; margin: 0; border: 0; }
    .player-area:not(.player-bottom) .player-laid-combinations { flex-basis: 100%; }
    .player-area .player-laid-combinations h4 { display: none; }
    .player-area .no-combos { display: none; }

    /* Opponents' face-down cards: a small "🂠 14" badge instead of a fan of card backs.
       The cards stay in the DOM (invisible, zero size) and a CSS counter counts them. */
    .player-area:not(.player-bottom) .player-hand {
        counter-reset: opp-cards;
        position: static;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        width: auto; height: auto;
        min-height: 0; min-width: 0;
        padding: 0;
        border: 0;
        background: none;
        overflow: visible;
    }
    .player-area:not(.player-bottom) .player-hand > .card,
    .player-area:not(.player-bottom) .player-hand > .mp-back {
        counter-increment: opp-cards;
        position: absolute !important;
        width: 0 !important; height: 0 !important; min-width: 0 !important;
        margin: 0 !important; padding: 0 !important; border: 0 !important;
        overflow: hidden; visibility: hidden;
    }
    .player-area:not(.player-bottom) .player-hand:not(.mp-opp-hand)::after,
    .player-area:not(.player-bottom) .player-hand .mp-count {
        display: inline-flex; align-items: center; gap: 3px;
        position: static;
        padding: 1px 8px;
        border: 1px solid rgba(201,168,76,0.5);
        border-radius: 10px;
        background: rgba(10,25,16,0.85);
        color: var(--gold, #C9A84C);
        font: 700 14px/1.4 'PT Sans', Arial, sans-serif;
        transform: none;
    }
    .player-area:not(.player-bottom) .player-hand:not(.mp-opp-hand)::after { content: '🂠 ' counter(opp-cards); }
    /* the count written by game.js wins: Safari on iPhone showed 0 from the CSS counter */
    .player-area:not(.player-bottom) .player-hand[data-count]:not(.mp-opp-hand)::after { content: '🂠 ' attr(data-count); }

    /* Laid combinations: small cards */
    .laid-combo { padding: 8px 4px 2px; gap: 2px; }
    /* One small type tag ("ТЕРЦ"/"СЕТ") on the top edge, above the cards */
    .laid-combo::before,
    .laid-combo .combo-info { display: none; }   /* duplicates of the type tag */
    .laid-combo .combo-label {
        position: absolute; top: -7px; left: 4px; z-index: 2;
        font-size: 10px; line-height: 1.2; padding: 1px 4px;
    }
    .combo-display { padding-top: 6px; row-gap: 10px; }
    .laid-combo .card, .laid-card { width: 36px !important; height: 52px !important; padding: 2px !important; }
    .laid-combo .card .card-corner, .laid-card .card-corner { font-size: 9px; }
    .card-rank { font-size: 14px; }
    .laid-combo .card .card-rank, .laid-card .card-rank { font-size: 11px; }
    .laid-combo .card .card-main-symbol, .laid-card .card-main-symbol { font-size: 16px; }
    .return-combo-btn { top: -7px; font-size: 10px; line-height: 1.2; padding: 1px 6px; }   /* level with the СЕТ / ТЕРЦ tag */
    /* jokers on small cards: the hat and the word must not run into the corners */
    .joker-hat { width: 50%; }
    .joker-text { font-size: 6px; letter-spacing: 0.12em; margin-right: -0.12em; }
    .laid-combo .joker-hat, .laid-card .joker-hat { width: 50%; }

    /* Centre: deck, trump, discard in one compact row (the board does not scroll, so it stays in sight) */
    .center-area {
        gap: 4px;
        position: relative;
        z-index: 3;
        align-self: stretch;   /* full width in the column (sideways: set back to start below) */
        background: rgba(13,31,23,0.96);
        border-radius: 10px;
    }
    .game-table { gap: 22px !important; padding: 6px 10px !important; flex-wrap: nowrap; justify-content: center; }   /* deck, trump, discard do not touch */
    .deck-container, .trump-container, .discard-container { min-width: 0; }
    .deck-description, .discard-description, .trump-info { font-size: 12px; padding: 2px 8px; }
    .current-turn { padding: 3px 12px !important; font-size: 14px; }

    /* My hand: one row, cards overlap so all of them are visible */
    #hand-3 {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        padding: 12px 4px 4px 4px !important;
        min-height: calc(var(--card-height) + 16px);
    }
    #hand-3 .card { flex: 0 0 auto; }
    #hand-3 { gap: 0 !important; }

    /* Empty "laid combinations" boxes take no room */
    .player-laid-combinations:not(:has(.laid-combo)) { display: none; }
    .player-laid-combinations.combos-empty { display: none; }   /* same, set by ui.js, for Safari without :has() */
    /* Header links ("Онлайн") show only their icon */
    #game-header .header-controls a { font-size: 0 !important; padding: 6px 8px; }
    #game-header .header-controls a i { font-size: 14px; }
    /* Their labels are hidden, but the gap before the label stayed and pushed the icon left */
    #game-header .header-controls button,
    #game-header .header-controls a,
    #game-header #home-btn { gap: 0 !important; justify-content: center; }
    /* 15 cards exactly fill the hand: the overlap is computed from the hand's real width
       (cqw = 1% of #hand-3's content box). Older browsers without cqw keep a fixed overlap. */
    #hand-3 { container-type: inline-size; }
    #hand-3 .card + .card { margin-left: -24px !important; }
    /* ...but at least 18px of every card stays visible (to tap it); on very narrow phones
       (Galaxy Fold, 280px) the hand then scrolls sideways a little */
    #hand-3 .card + .card { margin-left: max(calc(18px - var(--card-width)), min(6px, calc((100cqw - var(--card-width)) / 14 - var(--card-width)))) !important; }
    .player-bottom .player-info { padding: 2px 8px; }

    /* Controls: compact buttons; secondary ones show only their icon */
    #game-controls,
    #multiplayer-game-area #game-controls {
        position: relative;
        z-index: 30;   /* above the sticky hand/table: the opened chat (inside the controls) must be on top */
        gap: 4px;
        padding: 4px 6px 6px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .game-btn { min-width: 0 !important; min-height: 38px; padding: 7px 9px !important; font-size: 13px !important; }
    /* Secondary buttons: icon only (game actions keep their short labels) */
    /* ("Викласти карти" keeps its label: it is a game action) */
    #show-rules, #show-tournament, #new-game, #home-btn, #game-rules { font-size: 0 !important; }
    #show-rules i, #show-tournament i, #new-game i, #home-btn i, #game-rules i { font-size: 15px; }
    #game-header #home-btn { padding: 4px 8px; min-height: 28px; }   /* next to the logo */
}

/* Narrow phones: the header has 7 buttons (home, new game, online, rules, table, settings,
   sound) — only the joker card stays as the logo, and the buttons get a little narrower, so
   the header (and with it the whole page) is not wider than the screen */
@media (max-width: 480px) {
    #game-header h1.game-logo { font-size: 0 !important; gap: 0; overflow: visible; }
    #game-header .header-section { gap: 4px; }
    #game-header .header-controls { gap: 3px; }
    #game-header .header-controls button,
    #game-header .header-controls a { padding: 4px 6px !important; min-width: 30px; min-height: 30px; }
    #game-header #home-btn { padding: 4px 6px; min-width: 30px; }
    #game-header .game-info span { padding: 2px 5px; }
}

/* (the tablets-and-phones block goes on) */
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
    #mpx-save .btn-long { display: none; }

    /* Phones: "Взяти" / "Скинути" buttons (no double-click / drag on touch screens), short labels */
    #take-card, #discard-card { display: inline-flex !important; }
    .btn-long { display: none; }
    .btn-short { display: inline !important; }

    /* Multiplayer: the back link is just an arrow; the messages strip does not spill over the table */
    body:has(#multiplayer-game-area:not(.hidden)) .back-to-single { font-size: 0; padding: 7px 9px; top: 4px; left: 4px; }
    body:has(#multiplayer-game-area:not(.hidden)) .back-to-single i { font-size: 14px; }
    #multiplayer-game-area #game-header { padding-left: 44px; }
    #game-messages-window.game-messages { overflow: hidden; }

    /* Cards react to taps, not to hover */
    .card:hover { transform: none; }
    .card.selected { transform: translateY(-10px); }
}

/* ════════════════ Tablets in portrait (601–900px wide, tall) ════════════════ */
@media (min-width: 601px) and (max-width: 900px) and (min-height: 700px) {
    /* Plenty of room: bigger cards and readable header/buttons */
    :root { --card-width: 68px; --card-height: 100px; }
    #game-header h1 { font-size: 1.15rem !important; }
    #game-header .game-info span { font-size: 0.75rem; }
    .game-btn { padding: 9px 12px !important; font-size: 13px !important; }
    .laid-combo .card, .laid-card { width: 44px !important; height: 64px !important; }
}

/* ════════════════ Narrow phones (≤ 400px: most Androids, iPhone SE/mini) ════════════════ */
@media (max-width: 400px) {
    /* the buttons fit in two rows */
    #game-controls, #multiplayer-game-area #game-controls { gap: 3px; padding-left: 4px; padding-right: 4px; }
    .game-btn { padding: 7px 7px !important; }
    #add-to-combo { font-size: 0 !important; gap: 0 !important; justify-content: center; }
    #add-to-combo i { font-size: 15px; }
}

/* ════════════════ Phones (≤ 480px) ════════════════ */
@media (max-width: 480px) {
    :root { --card-width: 52px; --card-height: 76px; }
    #game-header .game-info span:first-child { display: none; }   /* round number: in the tournament table */
    /* Table: card-sized deck/trump/discard, no captions */
    .deck-description, .discard-description { display: none; }
    .deck, .card-back-stack, .trump-card, .discard-pile,
    .card-back-stack .card-back, .trump-card .card, .discard-pile .card {
        width: var(--card-width) !important; height: var(--card-height) !important; min-width: 0 !important; min-height: 0 !important;
    }
    .game-table { padding: 4px 10px !important; }
    .card-corner { font-size: 11px; }
}

/* ════════════════ Phones held sideways (low height, e.g. iPhone: 275–375px) ════════════════
   Header row with the messages strip inside it; opponents and their combinations on the left;
   the table (deck, trump, discard, whose turn) on the right; my hand always visible across the
   bottom; all buttons in one row. */
@media (max-height: 500px) and (orientation: landscape) {
    :root { --card-width: 44px; --card-height: 62px; }

    /* Header: no title, just round/trump on the left and the icons on the right */
    #game-header,
    #multiplayer-game-area #game-header { height: 34px; min-height: 0; padding: 2px 8px; box-sizing: border-box; position: relative; }
    #multiplayer-game-area #game-header { padding-left: 52px; }   /* room for the back arrow */
    #game-header h1 { display: none; }
    #game-header .header-section { flex: 0 0 auto; }
    #game-header .header-controls button,
    #game-header .header-controls a { padding: 4px 9px !important; min-height: 30px; min-width: 34px; box-sizing: border-box; }

    /* Messages: a one-line strip IN the header row (ui.js moves it there, between the round badge and
       the buttons), so it takes only the free space. (It used to be pinned at fixed offsets and,
       once the header got more buttons, lay over "Нова гра" / "Онлайн".) Tap to expand. */
    #game-header:has(> .game-messages.in-header) { gap: 6px; }
    #game-messages-window.game-messages.in-header,
    #multiplayer-game-area #game-messages-window.game-messages.in-header {
        position: relative !important; top: auto !important; left: auto !important; right: auto !important;
        flex: 1 1 auto; min-width: 0; width: auto !important;
        height: 28px; max-height: none !important; margin: 0;
        overflow: visible; z-index: 20; cursor: pointer; transform: none !important;
        order: 0;   /* (the phone layout gives the strip order 1 — that put it after the buttons) */
    }
    #game-messages-window.in-header .messages-header { display: none; }
    #game-messages-window.in-header .messages-content {
        height: 100%; max-height: none !important; box-sizing: border-box; padding: 2px 6px; overflow: hidden;
    }
    #game-messages-window.in-header .message { flex-shrink: 0; font-size: 11px; padding: 1px 6px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* opened: the whole list drops down over the table */
    #game-messages-window.in-header.expanded .messages-content {
        position: absolute; top: 0; left: 0; right: 0; height: auto; max-height: 66vh !important; overflow-y: auto;
        background: rgba(10,22,14,0.97); border: 1px solid rgba(201,168,76,0.5); border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.7);
    }
    #game-messages-window.in-header.expanded .message { white-space: normal; }

    /* Board: opponents + my combinations | table; my hand sticks to the bottom */
    #game-board,
    #multiplayer-game-area #game-board,
    #multiplayer-game-area #game-board.no-side-seats {
        /* the three opponents side by side (each with its combinations below), the table on the right */
        display: grid;
        grid-template-areas:
            "player1 player4 player2 center"
            "mine    mine    mine    center"
            "hand    hand    hand    hand";
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
        grid-template-rows: minmax(0, 1fr) max-content auto;   /* opponents get what my combos and hand leave */
        align-content: stretch;
        gap: 2px 6px;
        padding: 2px 6px 0;
    }
    #laid-combinations-3 { padding: 0; }
    #hand-3 {
        padding: 12px 6px 2px !important;
        min-height: calc(var(--card-height) + 14px);
    }
    .player-area:not(.player-bottom) { padding: 1px 4px; align-content: flex-start; align-self: stretch; }
    .player-area:not(.player-bottom) .player-info .player-name { font-size: 13px; }

    /* Table: small cards, no captions; whose turn stays visible */
    .center-area { align-self: start; gap: 2px; margin-top: 0; margin-bottom: 0; }
    .game-table { gap: 10px !important; padding: 4px 8px !important; }
    .deck-description, .discard-description { display: none; }
    .center-area .trump-info { font-size: 10px; padding: 0 4px; }
    .deck, .card-back-stack, .trump-card, .discard-pile { width: 44px !important; height: 62px !important; min-width: 0 !important; min-height: 0 !important; }
    .card-back-stack .card-back { width: 44px !important; height: 62px !important; }
    .trump-card .card, .discard-pile .card { width: 44px !important; height: 62px !important; }
    .deck-label { font-size: 10px; padding: 0 5px !important; bottom: -6px; }
    .current-turn { padding: 1px 10px !important; font-size: 11px; margin: 0; }

    /* Buttons: one row; scrolls sideways if it ever does not fit */
    #game-controls,
    #multiplayer-game-area #game-controls {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 4px;
        padding: 3px 6px;
        padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px));
        padding-left: calc(6px + env(safe-area-inset-left, 0px));
        padding-right: calc(6px + env(safe-area-inset-right, 0px));
    }
    .game-btn { flex: 0 0 auto; min-height: 32px; padding: 4px 9px !important; }
    #mpx-chat.in-controls, #mpx-challenge.in-controls, #mpx-fresh.in-controls { flex: 0 0 auto; }
    #mpx-chat.in-controls:not(.collapsed) { bottom: 44px; top: 40px; display: flex; flex-direction: column; }
    #mpx-chat.in-controls:not(.collapsed) .mpx-list { height: auto; flex: 1; }
}

/* Narrower phones held sideways (Android ~740px, iPhone SE 667px): all buttons, including the
   online ones (Чат, 💾, Штраф!), still fit in one row */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 860px) {
    #game-controls, #multiplayer-game-area #game-controls { gap: 3px; }
    .game-btn { padding: 4px 7px !important; }
    /* "Доклати" keeps its label: as a bare ⊕ icon nobody recognised it as the add-to-combination button */
    #mpx-challenge.in-controls, #mpx-fresh.in-controls { padding: 4px 8px; }
    #mpx-chat.in-controls.collapsed header { padding: 4px 8px; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 720px) {
    #mpx-chat.in-controls.collapsed .mpx-chat-label { display: none; }
    #lay-down-combos { font-size: 0 !important; gap: 0 !important; justify-content: center; }
    #lay-down-combos i { font-size: 15px; }
    #add-to-combo { font-size: 0 !important; gap: 0 !important; justify-content: center; }
    #add-to-combo i { font-size: 15px; }
}

/* Pop-up windows on low screens: compact, and the whole window scrolls instead of being cut off
   (its buttons must always be reachable) */
@media (max-height: 500px) {
    .pr-overlay, .mpx-overlay { padding: 6px !important; }
    .pr-box, .mpx-review { padding: 10px 14px !important; }
    .pr-box h3, .mpx-review h3 { font-size: 16px !important; margin-bottom: 2px !important; }
    .pr-reason, .mpx-review .mpx-reason { margin: 6px 0 !important; padding: 5px 8px !important; font-size: 13px; }
    .pr-cards, .mpx-cards { margin: 6px 0 !important; }
    .pr-card, .mpx-card { padding: 3px 6px !important; font-size: 14px !important; }
    .pr-meta, .mpx-meta { font-size: 12px !important; }
    .pr-btn, .mpx-btn { margin-top: 8px !important; }
    /* the button stays visible at the bottom of the window even when its text has to scroll */
    .pr-box .pr-btn, .mpx-review .mpx-btn { position: sticky; bottom: 0; box-shadow: 0 -6px 12px rgba(10,22,14,0.95); }
}
@media (max-width: 900px), (max-height: 500px) {
    .modal-content, .settings-content {
        max-height: calc(100vh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        overflow-y: auto !important;
        box-sizing: border-box;
    }
}

/* Very low landscape (in-app browsers such as Telegram on an iPhone: ~275px) */
@media (max-height: 330px) and (orientation: landscape) {
    :root { --card-width: 40px; --card-height: 56px; }
    .laid-combo .card, .laid-card { width: 30px !important; height: 42px !important; }
    .laid-combo .card .card-main-symbol, .laid-card .card-main-symbol { font-size: 12px; }
    .deck, .card-back-stack, .trump-card, .discard-pile,
    .card-back-stack .card-back, .trump-card .card, .discard-pile .card { width: 38px !important; height: 54px !important; }
}