/* Daguitdaging: gecentreerde informatie-iconen en beter leesbaar scoredoel. */
#onlineContent .daily-reference-info > .daily-info-icon {
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}

#onlineContent .daily-reference-card p.daily-score-target {
  color: #fff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .42) !important;
}

#onlineContent .daily-reference-card p.daily-score-target strong {
  color: #ffd966 !important;
  font-weight: 850 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .42) !important;
}

/* Tablet/telefoon liggend rond 1024 CSS-pixels: drie vaste kolommen zonder overlap. */
@media (orientation: landscape) and (min-width: 981px) and (max-width: 1100px) and (max-height: 700px) {
  body.game-active .app-shell {
    width: 100vw !important;
    height: var(--app-visible-height, 100dvh) !important;
    padding: 6px !important;
    display: grid !important;
    grid-template-columns: clamp(210px, 23vw, 242px) minmax(360px, 1fr) clamp(224px, 24vw, 252px) !important;
    grid-template-rows: 94px minmax(0, 1fr) 78px !important;
    grid-template-areas:
      "top top score"
      "chat table hand"
      "events table hand" !important;
    gap: 6px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.game-active .top-bar { grid-area: top !important; height: 94px !important; min-height: 94px !important; overflow: hidden !important; }
  body.game-active .variant-banner { display: none !important; }

  body.game-active .table {
    grid-area: table !important;
    place-self: center !important;
    width: min(100%, calc(var(--app-visible-height, 100dvh) - 112px)) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }

  body.game-active .score-board {
    grid-area: score !important;
    width: 100% !important;
    height: 94px !important;
    min-height: 94px !important;
    padding: 6px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: 43px 33px !important;
    gap: 5px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.game-active .score-board > .score-card {
    min-width: 0 !important;
    min-height: 43px !important;
    height: 43px !important;
    padding: 4px 6px !important;
    overflow: hidden !important;
  }

  body.game-active .score-board > .score-card span,
  body.game-active .score-board > .score-card strong {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body.game-active .score-board > .score-card span { font-size: 8px !important; }
  body.game-active .score-board > .score-card strong { font-size: 16px !important; }

  body.game-active .score-board > .score-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  body.game-active .score-board > .score-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 33px !important;
    height: 33px !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  body.game-active .hand-panel {
    grid-area: hand !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px !important;
    grid-template-rows: 38px minmax(0, 1fr) !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

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

  body.game-active #playerHand .card {
    width: auto !important;
    height: min(100%, 86px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 60px !important;
    max-height: 86px !important;
    aspect-ratio: .69 !important;
  }

  body.game-active .table-chat {
    grid-area: chat !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  body.game-active .game-events { grid-area: events !important; width: 100% !important; height: 78px !important; min-height: 78px !important; overflow: hidden !important; }
}
/* Online lobby: keep waiting and connection information readable on the light popup theme. */
#onlineModal .table-queue-meter {
  border-color: #c99635 !important;
  background: #fff0c9 !important;
}

#onlineModal .table-queue-meter strong {
  color: #154c34 !important;
  font-weight: 900 !important;
}

#onlineModal .table-queue-meter span {
  color: #624d36 !important;
  font-weight: 750 !important;
}

#onlineModal .table-seat-list > div {
  border-color: #bda77d !important;
  background: #e9e2d6 !important;
}

#onlineModal .table-seat-list > div strong {
  color: #302820 !important;
}

#onlineModal .table-seat-list > div span {
  color: #675846 !important;
  font-weight: 750 !important;
}

#onlineModal .table-seat-list > div.occupied {
  border-color: #3d7a58 !important;
  background: #dcebdd !important;
}

#onlineModal .fill-ai-button:disabled {
  border-color: #466d55 !important;
  background: #698b72 !important;
  color: #fff9e8 !important;
  opacity: 1 !important;
}

#onlineModal #onlineStatus {
  padding: 9px 12px !important;
  border: 1px solid #3a7a58 !important;
  border-radius: 9px !important;
  background: #164f37 !important;
  color: #fff9e8 !important;
  font-weight: 800 !important;
}

/* Make profile and authentication taps reliable in iOS/Android webviews. */
#geminiMenuHost {
  pointer-events: auto !important;
}

#onlineModal .password-field {
  position: relative;
  display: grid;
}

#onlineModal .password-field input {
  width: 100% !important;
  padding-right: 52px !important;
}

#onlineModal .password-visibility {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 42px;
  height: 36px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  touch-action: manipulation;
}

#onlineModal .password-visibility:focus-visible {
  outline: 2px solid #b98729;
  outline-offset: 1px;
}

#onlineModal .account-form-error {
  margin: 0 !important;
  padding: 9px 11px;
  border: 1px solid #a62f28;
  border-radius: 8px;
  background: #fff0ed;
  color: #86251f !important;
  font-weight: 800;
  line-height: 1.35;
}

#onlineModal .account-form input[aria-invalid="true"] {
  border-color: #b42f27 !important;
  box-shadow: 0 0 0 2px rgba(180,47,39,.16);
}

@media (hover: none), (pointer: coarse) {
  :is(.online-avatar, .social-avatar, .profile-avatar-preview, .shop-item-avatar):active {
    position: relative;
    z-index: 160 !important;
    transform: scale(1.65) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.48), 0 0 0 3px rgba(222,176,73,.95) !important;
    filter: brightness(1.08) saturate(1.06);
  }
}