/* Narrow desktop/tablet browser: large square table with a compact hand below. */
@media (min-width: 981px) and (max-width: 1150px) and (min-height: 700px) {
  body.game-active .app-shell {
    width: 100vw !important;
    height: var(--app-visible-height, 100dvh) !important;
    max-width: none !important;
    max-height: var(--app-visible-height, 100dvh) !important;
    margin: 0 !important;
    padding: 10px !important;
    display: grid !important;
    --compact-table-size: min(calc((100vw - 254px) / 2), calc(100dvh - 292px));
    grid-template-columns: repeat(2, minmax(0, 1fr)) 210px !important;
    grid-template-rows: 112px 112px minmax(300px, 1fr) 48px 74px !important;
    grid-template-areas:
      "top top top"
      "variant table score"
      "hand table score"
      "events events score"
      "chat chat chat" !important;
    gap: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.game-active .bid-panel { display: none !important; }

  body.game-active .variant-banner {
    grid-area: variant !important;
    display: grid !important;
    place-self: start center !important;
    width: min(100%, var(--compact-table-size)) !important;
    height: 112px !important;
    min-width: 0 !important;
    min-height: 112px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.game-active .variant-banner-content { min-width: 0 !important; }
  body.game-active .variant-banner-content > span { font-size: 8px !important; }
  body.game-active .variant-banner-content > strong { display: block !important; font-size: 15px !important; line-height: 1.02 !important; }
  body.game-active .variant-banner-content > p { margin: 4px 0 0 !important; font-size: 8px !important; line-height: 1.08 !important; }
  body.game-active .variant-city-mark { width: 44px !important; height: 44px !important; min-width: 44px !important; font-size: 14px !important; }

  body.game-active .top-bar { grid-area: top !important; min-height: 0 !important; height: 112px !important; }

  body.game-active .table {
    grid-area: table !important;
    place-self: center !important;
    box-sizing: border-box !important;
    width: min(100%, var(--compact-table-size)) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  body.game-active .deal-animation-layer { --deal-card-w: clamp(40px, 10%, 50px) !important; }

  body.game-active .played-card { width: clamp(54px, 14%, 68px) !important; }
  body.game-active .played-card .mini-card { width: clamp(54px, 14%, 68px) !important; height: auto !important; aspect-ratio: .69 !important; }
  body.game-active .played-card .mini-card .corner { top: 7px !important; left: 7px !important; font-size: 14px !important; }
  body.game-active .played-card .mini-card .corner > span:last-child,
  body.game-active .played-card .mini-card .rank-center { display: none !important; }
  body.game-active .played-card .mini-card .suit { inset: 0 !important; padding-top: 14% !important; display: grid !important; place-items: center !important; font-size: 34px !important; }
  body.game-active .played-card > span { font-size: 11px !important; }

  body.game-active .score-board {
    grid-area: score !important;
    place-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, minmax(58px, auto)) minmax(0, 1fr) !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  body.game-active .score-board > .score-card { min-height: 58px !important; padding: 9px 10px !important; }
  body.game-active .score-board > .score-actions { display: grid !important; grid-template-columns: 1fr !important; align-content: start !important; gap: 8px !important; }

  body.game-active .hand-panel {
    grid-area: hand !important;
    place-self: stretch !important;
    align-self: stretch !important;
    justify-self: center !important;
    width: min(100%, var(--compact-table-size)) !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 7px 10px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 7px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.game-active .hand-heading { min-width: 0 !important; min-height: 28px !important; margin: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(190px, auto) !important; align-items: center !important; gap: 8px !important; }
  body.game-active .your-player-label .avatar { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 14px !important; }
  body.game-active .hand-heading h2 { font-size: 17px !important; }
  body.game-active .hand-heading p { font-size: 11px !important; line-height: 1.1 !important; text-align: right !important; }

  body.game-active #playerHand.hand {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    place-items: center !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  body.game-active #playerHand .card { width: auto !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: 70px !important; max-height: 100px !important; aspect-ratio: .69 !important; border-radius: 7px !important; }
  body.game-active #playerHand .card .corner > span:last-child { display: none !important; }

  body.game-active .game-events { grid-area: events !important; place-self: stretch !important; width: 100% !important; height: 48px !important; min-width: 0 !important; min-height: 48px !important; padding: 5px !important; overflow: hidden !important; }
  body.game-active .game-events .message { height: 100% !important; min-height: 0 !important; padding: 5px 9px !important; display: flex !important; align-items: center !important; font-size: 13px !important; overflow: hidden !important; }

  body.game-active .table-chat { grid-area: chat !important; place-self: stretch !important; width: 100% !important; height: 74px !important; min-width: 0 !important; min-height: 74px !important; padding: 8px !important; overflow: hidden !important; }
  body.game-active .table-chat-header { min-width: 180px !important; }
  body.game-active .table-chat-header strong { font-size: 12px !important; }
  body.game-active .table-chat-header small { font-size: 9px !important; }
  body.game-active .bid-popup-dialog { width: min(420px, calc(100vw - 32px)) !important; }
}