/* Gesloten handen van medespelers: op elk scherm gelijk met de eigen hand zichtbaar. */
body.game-active .player {
  overflow: visible !important;
}

body.game-active .player > .avatar,
body.game-active .player > .player-info {
  position: relative !important;
  z-index: 3 !important;
}

body.game-active .opponent-card-fan {
  --fan-step: clamp(5px, .65vw, 9px);
  --fan-card-width: clamp(30px, 4.2vw, 48px);
  --fan-card-height: calc(var(--fan-card-width) * 1.42);
  position: absolute !important;
  z-index: 1 !important;
  width: calc(var(--fan-card-width) + (var(--fan-count) - 1) * var(--fan-step)) !important;
  height: var(--fan-card-height) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.game-active .opponent-card-fan span {
  position: absolute !important;
  top: 0 !important;
  left: calc(var(--card-index) * var(--fan-step)) !important;
  box-sizing: border-box !important;
  width: var(--fan-card-width) !important;
  height: var(--fan-card-height) !important;
  border: 1px solid rgba(244, 224, 166, .92) !important;
  border-radius: clamp(3px, .45vw, 6px) !important;
  background: var(--card-back-bg) !important;
  box-shadow: var(--card-back-shadow) !important;
  transform: rotate(calc(var(--card-offset) * 1.7deg)) !important;
  transform-origin: 50% 110% !important;
}

body.game-active .player-top .opponent-card-fan {
  top: 62% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

body.game-active .player-left .opponent-card-fan {
  top: 50% !important;
  left: 43% !important;
  transform: translateY(-50%) rotate(90deg) !important;
}

body.game-active .player-right .opponent-card-fan {
  top: 50% !important;
  right: 43% !important;
  transform: translateY(-50%) rotate(-90deg) !important;
}

/* Tijdens het schudden zijn alleen de werkelijk uitgedeelde animatiekaarten zichtbaar. */
body.game-active.deal-animation-active .opponent-card-fan {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* De drie gesloten handen komen in hetzelfde onthulmoment op als de eigen hand. */
body.game-active.hand-reveal-active .opponent-card-fan {
  animation: opponentHandReveal 480ms cubic-bezier(.2, .85, .25, 1) both;
}

@keyframes opponentHandReveal {
  from { opacity: 0; filter: blur(2px); }
  to { opacity: 1; filter: blur(0); }
}

@media (orientation: portrait) and (max-width: 760px) {
  body.game-active .table .player {
    position: absolute !important;
    z-index: 8 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  body.game-active .table .player-top {
    top: 7px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    flex-direction: column !important;
    transform: translateX(-50%) !important;
  }

  body.game-active .table .player-left {
    top: 45% !important;
    right: auto !important;
    bottom: auto !important;
    left: 7px !important;
    flex-direction: column-reverse !important;
    transform: translateY(-50%) !important;
  }

  body.game-active .table .player-right {
    top: 45% !important;
    right: 7px !important;
    bottom: auto !important;
    left: auto !important;
    flex-direction: column-reverse !important;
    transform: translateY(-50%) !important;
  }

  body.game-active .table .player > .avatar {
    position: relative !important;
    inset: auto !important;
    width: clamp(43px, 13vw, 54px) !important;
    height: clamp(43px, 13vw, 54px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.game-active .table .player > .player-info {
    position: relative !important;
    inset: auto !important;
    min-width: clamp(76px, 23vw, 96px) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 4px 7px !important;
    border-radius: 8px !important;
    background: rgba(13, 17, 12, .84) !important;
    text-align: center !important;
    transform: none !important;
  }

  body.game-active .table .player-info span,
  body.game-active .table .player-info small {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    color: #fffaf0 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.game-active .table .player-info span { font-size: clamp(12px, 3.6vw, 15px) !important; }
  body.game-active .table .player-info small { font-size: clamp(10px, 3vw, 12px) !important; }

  body.game-active .opponent-card-fan {
    --fan-step: clamp(4px, 1.2vw, 7px);
    --fan-card-width: clamp(25px, 8vw, 38px);
  }

  body.game-active .player-top .opponent-card-fan {
    top: clamp(33px, 9.5vw, 41px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body.game-active .player-left .opponent-card-fan {
    top: 52% !important;
    right: auto !important;
    left: clamp(30px, 8.5vw, 38px) !important;
    transform: translateY(-50%) rotate(90deg) !important;
  }

  body.game-active .player-right .opponent-card-fan {
    top: 52% !important;
    right: clamp(30px, 8.5vw, 38px) !important;
    left: auto !important;
    transform: translateY(-50%) rotate(-90deg) !important;
  }
}

@media (min-width: 1101px), (min-height: 701px) {
  body.game-active .opponent-card-fan {
    --fan-step: clamp(6px, .65vw, 10px);
    --fan-card-width: clamp(34px, 3.5vw, 54px);
  }
}