/* Grote browserweergave: benut de extra ruimte voor duidelijk leesbare kaarten.
   Telefoon, tablet en gewone laptops behouden hun bestaande kaartmaten. */
body.game-active .table .player .avatar {
  border: 3px solid rgba(255, 255, 255, .96) !important;
  box-shadow:
    0 0 0 2px rgba(20, 28, 22, .5),
    0 7px 18px rgba(0, 0, 0, .55) !important;
}

/* Mobiel portret: circa 15% groter dan de bestaande 46px, met gelijke
   afmetingen voor boven, links en rechts. */
@media (orientation: portrait) and (max-width: 700px) and (min-height: 560px) {
  body.game-active .table .player-top .avatar,
  body.game-active .table .player-left .avatar,
  body.game-active .table .player-right .avatar {
    width: 53px !important;
    height: 53px !important;
    min-width: 53px !important;
    min-height: 53px !important;
    max-width: 53px !important;
    max-height: 53px !important;
  }
}

/* Mobiel landschap: circa 15% groter dan de compacte 40px-maat. */
@media (orientation: landscape) and (max-width: 980px) and (max-height: 540px) {
  body.game-active .table .player-top .avatar,
  body.game-active .table .player-left .avatar,
  body.game-active .table .player-right .avatar {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }
}

@media (min-width: 1700px) and (min-height: 850px) {
  /* Ruimere tafel: portretten zijn herkenbaar zonder de kaartzone te raken. */
  body.game-active .table .player .avatar,
  body.game-active .table .player-top .avatar {
    width: clamp(64px, 8.8cqw, 76px) !important;
    height: clamp(64px, 8.8cqw, 76px) !important;
    min-width: clamp(64px, 8.8cqw, 76px) !important;
    min-height: clamp(64px, 8.8cqw, 76px) !important;
  }

  body.game-active .table .player-info {
    max-width: 150px !important;
    padding: 6px 11px !important;
  }

  body.game-active .table .player-info span {
    font-size: 15px !important;
  }

  body.game-active .table .player-info small {
    font-size: 12px !important;
  }

  /* Gewonnen slagen groeien mee met de portretten op een ruime tafel. */
  body.game-active .table .trick-stack {
    width: 124px !important;
    min-height: 104px !important;
    gap: 5px !important;
  }

  body.game-active .table .stack-cards {
    width: 88px !important;
    height: 62px !important;
  }

  body.game-active .table .stack-cards span {
    width: 72px !important;
    height: 51px !important;
    border-radius: 7px !important;
  }

  body.game-active .table .stack-cards span:nth-child(1) {
    left: 0 !important;
    top: 9px !important;
  }

  body.game-active .table .stack-cards span:nth-child(2) {
    left: 8px !important;
    top: 5px !important;
  }

  body.game-active .table .stack-cards span:nth-child(3) {
    left: 16px !important;
    top: 0 !important;
  }

  body.game-active .table .stack-cards span::after {
    font-size: 26px !important;
  }

  body.game-active .table .trick-stack strong {
    font-size: 20px !important;
  }

  body.game-active .table .trick-stack small {
    font-size: 13px !important;
  }

  /* Eén grotere maat voor alle kaarten op het tafelkleed. Deze variabelen
     sturen zowel schud-/deelkaarten als de vier kaarten van de slag aan. */
  body.game-active .table {
    --table-play-card-width: clamp(88px, 13cqw, 108px) !important;
    --table-play-card-height: calc(var(--table-play-card-width) * 1.45) !important;
  }

  body.game-active .table .deal-animation-layer {
    --deal-card-w: var(--table-play-card-width) !important;
    --deal-card-h: var(--table-play-card-height) !important;
  }

  body.game-active .table .deal-card,
  body.game-active .table .deal-mini-card {
    width: var(--table-play-card-width) !important;
    height: var(--table-play-card-height) !important;
    min-width: var(--table-play-card-width) !important;
    min-height: var(--table-play-card-height) !important;
    max-width: var(--table-play-card-width) !important;
    max-height: var(--table-play-card-height) !important;
  }

  body.game-active #playerHand.hand {
    gap: clamp(14px, 1.05vw, 26px) !important;
  }

  body.game-active #playerHand .card {
    width: clamp(96px, 5.25vw, 120px) !important;
    height: auto !important;
    min-width: 96px !important;
    min-height: 139px !important;
    max-width: 120px !important;
    max-height: 174px !important;
    aspect-ratio: .69 !important;
    border-radius: 11px !important;
  }

  body.game-active #playerHand .card .corner {
    top: 10px !important;
    left: 10px !important;
    font-size: clamp(17px, 1vw, 22px) !important;
  }

  body.game-active #playerHand .card .rank-center {
    font-size: clamp(25px, 1.5vw, 34px) !important;
  }

  body.game-active #playerHand .card .suit {
    font-size: clamp(44px, 2.65vw, 60px) !important;
  }

  body.game-active .trick-area .played-card {
    width: clamp(88px, 4.7vw, 108px) !important;
    min-width: 88px !important;
  }

  body.game-active .trick-area .played-card .mini-card {
    width: clamp(88px, 4.7vw, 108px) !important;
    height: auto !important;
    min-width: 88px !important;
    max-width: 108px !important;
    max-height: none !important;
    aspect-ratio: .69 !important;
    border-radius: 10px !important;
  }

  body.game-active .trick-area .played-card .mini-card .corner {
    top: 9px !important;
    left: 9px !important;
    font-size: clamp(16px, .9vw, 20px) !important;
  }

  body.game-active .trick-area .played-card .mini-card .suit {
    inset: 0 !important;
    padding-top: 14% !important;
    font-size: clamp(40px, 2.25vw, 52px) !important;
  }

  body.game-active .trick-area .played-card > span {
    max-width: 122px !important;
    font-size: 13px !important;
  }
}

/* Alle spelmodaliteiten vullen onafhankelijk van het speelraster het venster. */
body.game-active > :is(
  .last-trick-modal,
  .chat-history-modal,
  .game-exit-modal,
  .bid-popup
):not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: var(--app-visible-height, 100dvh) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 2200 !important;
}