/* ------------------------------------------------------------------------ */
/* Phones (SPEC "Phones"): every window below 1024px wide. One column —      */
/* header, status, players strip, board, last event, hand, bottom action bar  */
/* (landscape: the board left, the rest right); everything else in sheets.    */
/* The media query must match PHONE_QUERY in dom.js. The desktop layout above */
/* is untouched; these elements are empty there.                              */
/* ------------------------------------------------------------------------ */

.m-only, .sheet-grab { display: none; }

@media (max-width: 600px) { .lobby-room .home-art { display: none; } }
@media (max-width: 600px) {
  .offer-columns { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
  /* clip, not hidden: overflow hidden on body would make it a scroll container and break the sticky bars */
  html { overflow-x: hidden; }
  body { overflow-x: clip; }
  button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .brand-sub { display: none; } /* no "онлайн" / "правила" next to the logo */

  /* ---- Game screen: a full-height column, the page itself never scrolls. When everything does not
     fit (an open offer on a short phone, a tiny screen), the column scrolls under the bottom bar,
     which always stays in view (MOB-1). ---- */
  .game-screen {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: env(safe-area-inset-top) 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .game-screen .game-main, .game-screen .board-col, .game-screen .side { display: contents; }
  .game-screen .action-bar, .game-screen .players-card, .game-screen .dev-card,
  .game-screen .side > .feed-card, .game-screen .board-hint { display: none; }

  /* Header: logo, room chip | connection dot, link, menu; the status pill under it. */
  .game-screen > .topbar {
    order: 0;
    flex: none;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 4px max(4px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  }
  .game-screen .topbar-left { flex-wrap: nowrap; gap: 10px; min-width: 0; }
  .game-screen .brand-logo { font-size: 17px; }
  .game-screen .brand-sub, .game-screen .chip-btn, .game-screen .turn-counter,
  .game-screen .topbar-right > .btn-icon { display: none; }
  .game-screen .room-chip { gap: 6px; padding: 4px 10px; color: var(--muted); font-size: 12px; white-space: nowrap; }
  .game-screen .room-code { color: var(--text); font-size: 13px; letter-spacing: .12em; }
  .game-screen .topbar-right { gap: 0; }
  .game-screen .topbar-right > .conn { gap: 0; margin-right: 6px; font-size: 0; }
  .m-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .m-icon-btn:active { background: var(--line); }
  .game-screen .status-pill {
    order: 3;
    width: auto;
    flex: 1 1 100%;
    margin: 0 max(12px, env(safe-area-inset-right)) 0 0;
    padding: 9px 14px;
    border-radius: 14px;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 14px;
    line-height: 1.3;
  }
  .game-screen .status-lead { white-space: normal; }
  .game-screen .status-detail { flex: 1 1 0; min-width: 8em; overflow: visible; white-space: normal; }
  /* Placing a piece: both texts in one cell, the hidden one keeps the height steady (MOB-3). */
  .game-screen .status-detail-steady { display: grid; }
  .game-screen .status-detail-steady > span { grid-area: 1 / 1; }
  .game-screen .status-reserve { visibility: hidden; }
  .game-screen .status-pill.is-blocked { padding-top: 8px; padding-bottom: 8px; }
  .game-screen .status-pill .btn { min-height: 40px; margin: 4px 0 0; padding: 0 14px; font-size: 13px; }
  .game-screen .status-skip + .status-takeover { margin-left: 0; }
  .game-screen .status-skip + .status-takeover .btn-label { display: inline; }
  .m-conn {
    order: 4;
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 8px;
    margin: 0 max(12px, env(safe-area-inset-right)) 0 0;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(224, 82, 74, 0.14);
    color: var(--danger-text);
    font-size: 13px;
  }
  .m-conn.conn-connecting { background: var(--accent-soft); color: var(--accent-text); }

  /* Players strip */
  .m-players {
    order: 1;
    display: grid;
    flex: none;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 6px;
    padding: 8px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  }
  .m-player {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "av vp" "name name" "meta meta";
    align-items: center;
    row-gap: 3px;
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .m-player.is-turn { border-color: rgba(244, 183, 64, 0.55); background: rgba(244, 183, 64, 0.10); }
  .m-player.is-alert { border-color: rgba(224, 82, 74, 0.6); background: rgba(224, 82, 74, 0.1); }
  .m-player.is-offline .avatar { opacity: .55; }
  .m-player-avatar { grid-area: av; }
  .m-player .avatar { font-size: 12px; }
  .m-player .bot-mark { right: -5px; bottom: -4px; width: 14px; height: 14px; border-width: 1.5px; }
  .m-player .bot-mark.is-takeover { background: var(--accent); color: var(--accent-ink); }
  .m-player .offline-dot { width: 11px; height: 11px; right: -3px; bottom: -3px; }
  .m-player-vp { grid-area: vp; justify-self: end; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1; }
  .m-player-name { grid-area: name; display: flex; align-items: center; gap: 3px; min-width: 0; font-size: 12px; font-weight: 500; line-height: 1.3; }
  .m-player-name .icon { flex: none; color: var(--muted); }
  .m-player-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-player-meta { grid-area: meta; display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.3; white-space: nowrap; }
  .m-player-cards { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .m-player-cards .icon { margin-right: 3px; vertical-align: -2px; }
  .m-player.is-offline .m-player-cards, .m-player.is-discarding .m-player-cards { color: var(--danger-text); }
  .m-player-cards.is-warn { color: var(--danger-text); font-weight: 600; }
  .m-award { display: inline-flex; flex: none; color: var(--accent-text); }
  .m-spared { color: #9FDDB5; }
  /* 5–6 players: three columns, two rows; avatar | name over cards | VP */
  .m-players.is-many { gap: 5px; }
  .m-players.is-many .m-player {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "av name vp" "av meta vp";
    column-gap: 6px;
    row-gap: 0;
    padding: 4px 7px 4px 6px;
  }
  .m-players.is-many .m-player-vp { font-size: 15px; }
  .m-players.is-many .m-player-name .icon { display: none; } /* the robot mark is on the avatar */

  /* Board: takes the height that is left; zoom buttons in its corner */
  .game-screen .board-card {
    order: 2;
    position: relative;
    flex: 1 1 0;
    min-height: 120px;
    margin: 8px max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
  }
  .game-screen .board-wrap { flex: 1 1 auto; min-height: 0; touch-action: none; }
  .game-screen svg.board { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; }
  .board-zoom { position: absolute; right: 6px; bottom: 6px; z-index: var(--z-zoom); display: flex; gap: 6px; }
  .zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: rgba(14, 31, 43, 0.82);
    color: var(--text);
    cursor: pointer;
  }
  .zoom-btn:disabled { opacity: .4; cursor: default; }
  /* Bigger, steadier targets for fingers (the nearest one to a tap is taken anyway). */
  .game-screen .target-vertex .ring { transform: scale(1.3); }
  .game-screen .target-edge .seg { stroke-width: 6; }
  .game-screen .target-edge .seg-under { stroke-width: 10; }
  .game-screen .target-vertex:hover .ring { transform: scale(1.3); }
  .game-screen .target-vertex:hover .ring-circle { fill-opacity: .25; animation: pulse 1.6s ease-in-out infinite; }
  .game-screen .target-edge:hover .seg { stroke-width: 6; stroke-dasharray: 6 5; animation: pulse 1.6s ease-in-out infinite; }
  .game-screen .target-hex:hover .hexring { fill-opacity: .08; animation: pulse 1.6s ease-in-out infinite; }

  /* Last event under the board (a tap opens the log) */
  .m-ticker {
    order: 3;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    margin: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: 400 12px/1.3 var(--font);
    text-align: left;
    cursor: pointer;
  }
  .m-ticker-text { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .m-ticker-text .log-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
  .m-ticker-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
  .m-ticker-line b { color: var(--text); font-weight: 600; }
  .m-ticker-turn { flex: none; }

  /* Open trade offer: a prominent banner above the hand */
  .game-screen .trade-slot { order: 4; flex: none; padding: 0 max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); }
  .game-screen .trade-card { gap: 8px 12px; padding: 10px 12px; border-width: 2px; border-color: var(--accent); border-radius: 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
  .game-screen .trade-head { flex: 1 1 100%; }
  .game-screen .trade-title { white-space: normal; font-size: 14px; }
  .game-screen .offer-terms { flex: 1 1 100%; gap: 6px 14px; }
  .game-screen .offer-actions { flex: 1 1 100%; justify-content: stretch; margin-left: 0; }
  .game-screen .offer-actions .btn { flex: 1 1 0; min-height: 44px; font-size: 14px; }
  .game-screen .offer-actions .muted { flex: 1 1 100%; }
  .game-screen .responses { flex: 1 1 100%; gap: 6px 8px; }
  .game-screen .response:not(.is-accept) .response-name { display: none; }
  .game-screen .response .btn-sm { min-height: 40px; padding: 0 14px; }
  .game-screen .response-state { padding-right: 10px; }
  /* While an offer is open the last log line (it repeats the offer) gives its room to the board. */
  .game-screen:has(.trade-slot .trade-card) .m-ticker { display: none; }
  /* Own offer: "Отменить" is a × in the card's corner, so the answers keep the room; the terms are
     the first line (no "Ваше предложение" heading: "Отдаёте … Получаете …" says it). */
  .game-screen .trade-card.is-mine { position: relative; }
  .game-screen .trade-card.is-mine .offer-actions { position: absolute; top: 2px; right: 2px; flex: none; }
  .game-screen .trade-card.is-mine .trade-head { display: none; }
  .game-screen .trade-card.is-mine .offer-terms { min-height: 32px; padding-right: 40px; }
  .game-screen .trade-cancel { flex: 0 0 auto !important; width: 44px; min-height: 44px; padding: 0; }
  .game-screen .trade-cancel .btn-label { display: none; }
  /* The answers, compact: an avatar with a mark ("…" thinking, "×" declined); an acceptor's avatar
     with "Обменяться" (the name is in the tooltip). Two acceptors fit on one line from 360px on. */
  .game-screen .response { position: relative; gap: 4px; min-height: 0; padding: 3px; }
  .game-screen .response .avatar { width: 30px; height: 30px; }
  .game-screen .response .response-name, .game-screen .response-state { display: none; }
  .game-screen .response .btn-sm .icon { display: none; }
  .game-screen .response-mark {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--card);
    border-radius: 50%;
    background: var(--row-hover);
    color: var(--text);
    font: 700 12px/1 var(--font);
  }
  .game-screen .response.is-decline .avatar { opacity: .45; }
  .game-screen .response.is-decline .response-mark { background: var(--danger); color: #fff; }

  /* Hand: five tiles, glyph and count side by side; port rates in the corner */
  .game-screen .hand-card { order: 5; flex: none; padding: 4px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); border: 0; border-radius: 0; background: transparent; }
  .game-screen .hand-card .card-head { display: none; }
  .game-screen .hand-grid { gap: 6px; }
  .game-screen .hand-tile { position: relative; gap: 0; }
  .game-screen .hand-tile.is-empty { opacity: .4; }
  .game-screen .hand-res { flex-direction: row; justify-content: center; gap: 6px; height: 56px; padding: 0; }
  .game-screen .hand-count { font-size: 20px; }
  .game-screen .hand-name, .game-screen .hand-rate:not(.is-port) { display: none; }
  .game-screen .hand-rate.is-port {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 0 4px;
    border-radius: 6px;
    background: rgba(14, 31, 43, 0.78);
    color: var(--accent-text);
    font-size: 12px;
    line-height: 16px;
  }
  .game-screen .spectator-card { order: 5; flex: none; margin: 4px max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); padding: 10px 14px; }
  .game-screen .spectator-note p { margin-top: 2px; }
  .game-screen .spectator-note .btn { min-height: 44px; }

  /* Bottom action bar: always in view, also when the column above it scrolls (portrait) */
  .m-bar {
    order: 6;
    position: sticky;
    bottom: 0;
    z-index: var(--z-bar);
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 10px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    background: var(--card);
  }
  .m-bar-row { display: flex; gap: 8px; min-height: 50px; }
  .m-dice { display: flex; flex: none; align-items: center; gap: 6px; padding: 0 12px; border-radius: 14px; background: var(--row); }
  .m-dice .die { width: 26px; height: 26px; }
  .m-dice-sum { margin-left: 2px; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
  .m-dice-sum.is-seven { color: var(--danger); }
  .m-primary { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 0 12px; border-radius: 14px; font-size: 16px; }
  .m-primary.btn-roll { animation: attention 2.4s ease-in-out infinite; }
  .m-secondary { flex: none; min-height: 50px; padding: 0 18px; border-radius: 14px; font-size: 15px; }
  .m-note { display: flex; flex: 1 1 0; align-items: center; gap: 10px; padding: 0 4px; color: var(--muted); font-size: 14px; }
  .m-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .m-tools.is-single { grid-template-columns: 1fr; }
  .m-tool {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 56px;
    padding: 0 4px;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background: var(--row);
    color: var(--text);
    font: 500 12px var(--font);
    cursor: pointer;
  }
  .m-tools.is-single .m-tool { flex-direction: row; gap: 10px; font-size: 14px; }
  .m-tool[aria-pressed="true"] { border: 2px solid var(--accent); background: rgba(244, 183, 64, 0.12); font-weight: 600; }
  .m-tools .m-btn-trade { width: auto; padding: 0 4px; } /* not the icon-only desktop trade button (1024–1519px) */
  .m-tool.is-disabled { opacity: .45; }
  .m-tool:active:not(.is-disabled) { background: var(--row-hover); }
  .m-badge {
    position: absolute;
    top: 5px;
    right: calc(50% - 30px);
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(234, 240, 244, 0.16);
    color: var(--text);
    font: 700 12px/16px var(--font);
    text-align: center;
  }
  .m-badge-chat { background: var(--danger); color: #fff; }
  .m-badge-dev.is-hot { background: var(--accent-text); color: var(--accent-ink); }
  .m-badge-inline { position: static; margin-left: 2px; }

  /* ---- Lobby ---- */
  .lobby-screen { gap: 0; min-height: 100vh; min-height: 100dvh; padding: env(safe-area-inset-top) 0 0; }
  .lobby-screen > .topbar { flex-wrap: nowrap; padding: 4px max(4px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left)); }
  .lobby-screen .brand-logo { font-size: 17px; }
  .lobby-screen .brand-sub { display: none; }
  .lobby-screen .topbar-right { gap: 2px; }
  .lobby-exit { width: 44px; min-height: 44px; padding: 0; }
  .lobby-exit .btn-label { display: none; }
  .lobby-main, .lobby-card { display: contents; }
  .lobby-room {
    margin: 4px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--card);
  }
  .lobby-room-text { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 8px; width: 100%; }
  .lobby-room-text > .muted:first-child { grid-column: 1 / -1; font-size: 13px; }
  .lobby-room-text > p { display: none; }
  .lobby-code { font-size: 40px; letter-spacing: .12em; line-height: 1; }
  .lobby-seats { display: block; padding-bottom: 4px; color: var(--muted); font-size: 12px; }
  .lobby-copy { grid-column: 1 / -1; width: 100%; min-height: 48px; margin-top: 10px; border-radius: 14px; font-size: 15px; }
  .lobby-theme { grid-column: 1 / -1; justify-content: space-between; margin-top: 12px; }
  .lobby-theme-label { font-size: 14px; color: var(--text-2); }
  .lobby-theme .seg-option { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .lobby-theme-value { padding: 8px 12px; font-size: 14px; }
  .lobby-layout { margin-top: 8px; }
  .lobby-layout-hint { text-align: right; font-size: 12px; }
  .lobby-players-wrap { margin: 12px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); padding-bottom: 16px; }
  .lobby-players-wrap > .card-head { display: none; }
  .lobby-players { gap: 8px; }
  .lobby-player { min-height: 56px; padding: 6px 4px 6px 12px; }
  .lobby-player .avatar { width: 34px; height: 34px; font-size: 13px; }
  .lobby-name { font-size: 15px; }
  .lobby-sub.is-off { color: var(--danger-text); }
  .lobby-player .badge-accent { margin-right: 8px; }
  .lobby-remove { width: 44px; min-height: 44px; margin-right: 0; }
  .lobby-remove.lobby-remove-person { width: auto; padding: 0 10px; }
  .lobby-add-bot { gap: 10px; padding: 12px; }
  .lobby-add-bot > .avatar-empty { display: none; }
  .lobby-add-bot .lobby-free { color: var(--text-2); }
  .lobby-add-bot .seg-option { min-height: 44px; padding: 0 14px; }
  .lobby-add-bot-btn { flex: 1 1 100%; min-height: 46px; border-radius: 12px; font-size: 14px; }
  .lobby-free-row { min-height: 48px; }
  .lobby-hint { margin: 10px 4px 0; font-size: 12px; line-height: 1.45; }
  .lobby-hint.is-active { margin: 10px 0 0; }
  .lobby-controls {
    position: sticky;
    bottom: 0;
    z-index: var(--z-lobby-bar);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: auto;
    padding: 14px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    background: var(--card);
  }
  .lobby-vp { justify-content: space-between; }
  .lobby-vp .field-label { color: var(--text-2); font-size: 14px; }
  .lobby-vp .select { min-width: 0; min-height: 44px; }
  .lobby-bar-row { display: flex; gap: 8px; }
  .lobby-bar-row .btn { min-height: 52px; }
  .lobby-start { flex: 1 1 0; font-size: 16px; }
  .m-lobby-chat { flex: none; gap: 6px; }
  .lobby-bar-row > .m-lobby-chat:only-child { flex: 1 1 auto; }
  .lobby-controls .waiting { font-size: 14px; }
  .lobby-screen .lobby-side > .feed-card { display: none; }
  .lobby-side { display: contents; }
  .lobby-variants { margin: 4px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); padding: 14px 12px 12px 14px; border-radius: 20px; }
  .lobby-variants .card-head { padding: 0 2px 10px 0; }
  .variant-rules-link { min-height: 44px; padding: 0 4px; font-size: 14px; }
  .variant-row { padding: 6px 2px 6px 10px; }
  .variant-label { padding: 6px 0; }
  /* A 44px target around a 22px box (the drawing is the background). */
  .variant-check { width: 44px; height: 44px; margin: -11px -11px -11px -11px; background-size: 22px; }
  .variant-label { align-items: center; }
  .variant-title { font-size: 15px; }
  .variant-bonus { font-size: 12px; }
  .variant-short { font-size: 13px; }
  .variant-help-btn { width: 44px; min-height: 44px; margin-top: -2px; }
  .variant-help { margin: 4px 10px 6px 32px; font-size: 14px; }
  .variant-help a { display: inline-flex; align-items: center; min-height: 44px; }
  .variant-note { font-size: 12px; }
  .lobby-vp-bonus { font-size: 12px; }
  .home-rules { min-height: 44px; padding: 0 6px; }

  /* ---- Home ---- */
  .home-screen { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .home-card { padding: 24px 20px; }
  .home-card .btn-lg { min-height: 52px; }

  /* ---- Dialogs become bottom sheets ---- */
  .modal-backdrop {
    align-items: flex-end;
    top: var(--vvt, 0px);
    bottom: auto;
    height: var(--vvh, 100%);
    padding: 0;
  }
  .modal, .modal-wide {
    width: min(600px, 100%);
    max-height: calc(var(--vvh, 100dvh) - max(16px, env(safe-area-inset-top)));
    overflow: hidden; /* the body scrolls; the title and the buttons stay in view */
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.5);
    overscroll-behavior: contain;
    animation: sheetUp .22s ease-out;
    transition: transform .18s ease-out;
  }
  .modal-tall { height: calc(var(--vvh, 100dvh) * 0.86); }
  .sheet-grab { display: block; flex: none; align-self: center; width: 40px; height: 4px; margin-top: 10px; border-radius: 999px; background: rgba(234, 240, 244, 0.25); }
  .modal-head { align-items: center; padding: 6px 6px 2px 18px; touch-action: none; }
  .modal-head.no-close { min-height: 52px; padding-right: 18px; }
  .modal-head .btn-icon { flex: none; width: 44px; min-height: 44px; }
  .modal-title { margin: 6px 0; font-size: 17px; }
  .modal-subtitle { margin: -2px 0 4px; }
  .modal-body { flex: 0 1 auto; gap: 10px; min-height: 0; padding: 8px 16px 14px; overflow-y: auto; overscroll-behavior: contain; }
  .modal-head, .modal-foot, .sheet-grab { flex: none; }
  .modal-foot { gap: 8px; padding: 10px 16px max(14px, env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1 1 auto; min-height: 48px; }
  .modal-foot .pick-counter, .modal-foot .trade-done, .modal-foot .waiting-host { flex: 1 1 100%; }
  .btn-step { width: 44px; min-height: 44px; }
  .stepper-row { padding: 4px 6px 4px 6px; }
  .res-options { gap: 6px; }
  .res-option { padding: 6px 2px 8px; }
  .res-option-card { height: 58px; }
  .trade-summary { padding: 10px 12px; }
  .trade-count { margin-left: 0; }
  .victim { min-height: 60px; }
  .score-row { grid-template-columns: 16px 36px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px 10px 10px; }
  .score-row .avatar { width: 36px; height: 36px; }
  .winner-banner { gap: 12px; padding: 12px 14px; }
  .winner-title { font-size: 17px; }
  .tabs-modal .tab { flex: 1 1 0; justify-content: center; padding: 0 8px; }
  /* The log and chat in their sheet: the lists fill it, the chat input stays at the bottom. */
  .modal-feed .modal-body { flex: 1 1 auto; min-height: 0; padding: 0 12px max(12px, env(safe-area-inset-bottom)); }
  .modal-feed .feed-card { display: flex; flex: 1 1 auto; min-height: 0; padding: 0; border: 0; background: transparent; }
  .modal-feed .feed-card > .card-head { display: none; }
  .modal-feed .tabs .tab { flex: 1 1 0; justify-content: center; }
  .modal-feed .feed-body { flex: 1 1 auto; min-height: 0; position: relative; }
  .modal-feed .feed-list { position: absolute; inset: 0; max-height: none; font-size: 14px; }
  .modal-feed .chat-form .input { min-height: 48px; font-size: 16px; } /* 16px: no zoom-in on focus (iOS) */
  .modal-feed .chat-form .btn-icon { width: 48px; min-height: 48px; }
  .modal-build .modal-body, .modal-dev .modal-body { gap: 10px; }
  .modal-dev .dev-row { min-height: 56px; }
  .modal-dev .dev-row .btn { min-height: 44px; }
  .modal-dev .dev-list { gap: 8px; }

  /* Readable on a phone: nothing under 12px (the desktop keeps its denser sizes). */
  .badge, .chat-time, .res-option small, .score-vp small, .hand-rate, .build-left, .title-count,
  .trade-head .avatar, .response .avatar, .badge-count { font-size: 12px; }
  .chat-form .btn-icon, .chat-form .btn { min-width: 48px; }
  .game-screen .response .btn-sm { min-height: 44px; }
  .game-screen .status-pill .btn { min-height: 44px; }

  /* Toasts: at the top, clear of the action bar and the sheets */
  .toasts { top: max(10px, env(safe-area-inset-top)); bottom: auto; }
}

/* Narrow phones (below 360px): the room code without the word "Комната" and a smaller logo, so the
   header stays on one line (MOB-7). */
@media (max-width: 359px) {
  .game-screen .brand-logo { font-size: 15px; }
  .game-screen .topbar-left { gap: 8px; }
  .game-screen .room-chip > .muted { display: none; }
}

/* Short phones (≤ 700px tall): a little tighter, the board keeps its share. */
@media (max-width: 1023px) and (orientation: portrait) and (max-height: 700px) {
  .game-screen .status-pill { padding-top: 7px; padding-bottom: 7px; }
  .m-players { padding-top: 6px; }
  .m-player { padding-top: 4px; padding-bottom: 4px; row-gap: 1px; }
  .game-screen .hand-res { height: 46px; }
  /* The port rate sits on the tile's top edge: inside the shorter tile it would cover the count (MOB-2). */
  .game-screen .hand-rate.is-port { top: -6px; right: -2px; }
  .m-ticker { min-height: 40px; }
  .m-bar { gap: 6px; margin-top: 6px; padding-top: 8px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .m-bar-row, .m-primary, .m-secondary { min-height: 46px; }
  .m-tool { min-height: 50px; gap: 2px; }
}

/* Tablets and small windows (761–1023px wide): the phone layout as a centered column (the lobby
   always, the game in portrait; in landscape the game uses the two-column layout below). */
@media (min-width: 761px) and (max-width: 1023px) {
  .lobby-screen { width: 100%; max-width: 720px; margin: 0 auto; }
}
@media (min-width: 761px) and (max-width: 1023px) and (orientation: portrait) {
  .game-screen { width: 100%; max-width: 720px; margin: 0 auto; }
  .game-screen .board-card { margin-left: 12px; margin-right: 12px; }
}

/* Landscape below 1024px (phones turned sideways, small windows): the board on the left at full
   height, everything else in a column on the right that scrolls if it has to. */
@media (max-width: 1023px) and (orientation: landscape) {
  .game-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 44%);
    grid-template-rows: auto auto auto auto auto 1fr;
    align-content: start;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .game-screen .board-card {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    height: calc(100dvh - 16px);
    margin: 8px 0 8px max(8px, env(safe-area-inset-left));
  }
  .game-screen > .topbar, .m-players, .m-ticker, .game-screen .trade-slot,
  .game-screen .hand-card, .game-screen .spectator-card, .m-bar { grid-column: 2; min-width: 0; }
  /* The right column scrolls as a whole, the bar at its end (not kept in view over the hand). */
  .m-bar { position: static; grid-row: -2 / -1; align-self: end; margin-top: 8px; border-radius: 16px 16px 0 0; }
  .game-screen > .topbar { padding-top: max(4px, env(safe-area-inset-top)); padding-left: 12px; }
  .m-players, .game-screen .hand-card { padding-left: 12px; }
  .m-ticker { margin-left: 4px; }
  .m-players, .m-players.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  /* One compact line per player: avatar | name over cards | VP */
  .m-player, .m-players.is-many .m-player {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "av name vp" "av meta vp";
    column-gap: 6px;
    row-gap: 0;
    padding: 3px 6px 3px 5px;
  }
  .m-player-vp { font-size: 15px; }
  .m-player-name .icon { display: none; } /* the robot mark is on the avatar */
  .game-screen .trade-slot { padding: 6px max(12px, env(safe-area-inset-right)) 0 12px; }
  .game-screen .spectator-card { margin: 6px max(12px, env(safe-area-inset-right)) 0 12px; }
  .modal-tall { height: calc(var(--vvh, 100dvh) - 16px); }
}
/* Short landscape (phones): tighter, without the last-event line. */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) {
  .game-screen .brand-logo { font-size: 15px; }
  .game-screen .room-chip > .muted { display: none; } /* the code alone: the header stays on one line */
  .game-screen .status-pill { margin-right: max(12px, env(safe-area-inset-right)); padding: 6px 12px; font-size: 13px; }
  .m-players { padding-top: 6px; }
  .m-ticker { display: none; }
  .game-screen .hand-card { padding-top: 6px; }
  .game-screen .hand-res { height: 44px; }
  .game-screen .hand-count { font-size: 18px; }
  .game-screen .hand-rate.is-port { top: -6px; right: -2px; } /* on the tile's top edge (MOB-2) */
  .m-bar { gap: 6px; margin-top: 6px; padding: 8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 12px; }
  .m-bar-row, .m-primary, .m-secondary { min-height: 46px; }
  .m-tool { min-height: 48px; gap: 2px; }
  .m-badge { top: 3px; }
  .board-zoom { right: 4px; bottom: 4px; }
  /* Lobby: a smaller room card and a one-row bottom bar, so the players list keeps some room. */
  .lobby-room { padding: 10px 16px; }
  .lobby-room .home-art { display: none; }
  .lobby-code { font-size: 28px; }
  .lobby-copy { min-height: 44px; margin-top: 6px; }
  .lobby-controls { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .lobby-controls .waiting { flex: 1 1 auto; margin: 0; }
  .lobby-vp { flex: none; gap: 10px; }
  .lobby-bar-row { flex: 1 1 auto; }
  .lobby-bar-row .btn { min-height: 46px; }
  .lobby-need { order: 5; flex: 1 1 100%; margin: 0; }
}

@keyframes sheetUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }

@media (max-width: 1023px) {
  .m-ev {
    display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 50px; padding: 0 10px 0 12px;
    border: 0; border-radius: 14px; background: var(--row); color: var(--accent-text);
  }
  .ev-reveal { padding: 8px; }
  .ev-card { width: min(300px, 100%); padding: 14px 16px 16px; gap: 8px; }
  .ev-card-title { font-size: 17px; }
  .ev-card-text { font-size: 13px; }
  .ev-num { width: 46px; height: 46px; font-size: 22px; }
  .ev-card-icon { width: 46px; height: 46px; }
  .ev-history-list { grid-template-columns: 1fr; }
  .rules-cards { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
  .m-tools.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .m-tools.is-five .m-tool { font-size: 11.5px; padding: 0 2px; }
  .fish-strip.is-compact { margin-top: 6px; padding: 4px 6px; gap: 6px; }
  .fish-strip.is-compact .fish-strip-open { min-height: 32px; }
  .fish-option { gap: 10px; padding: 8px; }
  .fish-option .btn { min-height: 44px; }
  .fish-swap .btn, .fish-boot-targets .btn { min-height: 44px; }
}

@media (max-width: 1023px) {
  button.res-strip.is-compact { min-height: 44px; }
  .m-tools.is-five .m-tool { font-size: 12px; }
}

@media (max-width: 1023px) {
  .gold-strip.is-compact { margin-top: 6px; padding: 4px 8px; gap: 8px; }
  .gold-strip.is-compact .gold-strip-meta { font-size: 12px; }
  .gold-row { min-height: 40px; }
}