/* Centrale contrastbewaking voor alle spelpopups, in lichte en donkere modus. */
:root[data-theme="light"] {
  --popup-shell-bg: #eef1e8;
  --popup-surface: #fffaf0;
  --popup-surface-alt: #eee7d9;
  --popup-text: #30271f;
  --popup-heading: #123f29;
  --popup-muted: #665442;
  --popup-border: #bd913a;
  --popup-input-bg: #fffdf8;
  --popup-input-text: #241d17;
}

:root[data-theme="dark"] {
  --popup-shell-bg: #10241a;
  --popup-surface: #173523;
  --popup-surface-alt: #203d2b;
  --popup-text: #fff8e9;
  --popup-heading: #ffffff;
  --popup-muted: #eadfc8;
  --popup-border: #d2a548;
  --popup-input-bg: #071b11;
  --popup-input-text: #ffffff;
}

#onlineModal .online-dialog,
#infoModal .info-dialog,
#settingsModal .settings-dialog,
.last-trick-dialog,
.boom-dialog,
.chat-history-dialog,
.bid-popup-dialog {
  color: var(--popup-text) !important;
  background: var(--popup-shell-bg) !important;
}

#onlineModal #onlineTitle,
#infoModal #infoTitle,
#settingsModal #settingsTitle,
.last-trick-dialog .last-trick-header h2,
.boom-dialog .last-trick-header h2,
.chat-history-dialog .last-trick-header h2,
.bid-popup-dialog h2 {
  color: #123f29 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal .last-trick-header > span,
#infoModal .last-trick-header > span,
#settingsModal .last-trick-header > span {
  color: #665442 !important;
  opacity: 1 !important;
}

/* Gewone inhoudsvlakken volgen de modus en krijgen altijd de passende tekstkleur. */
#onlineModal #onlineContent .online-card,
#onlineModal #onlineContent .online-profile,
#onlineModal #onlineContent .ranking-columns > section,
#onlineModal #onlineContent .daily-hero,
#onlineModal #onlineContent .verify-card,
#infoModal .info-content > section,
#settingsModal .settings-content > section,
.last-trick-dialog .last-trick-content,
.boom-dialog .boom-content,
.chat-history-dialog .chat-history-content {
  color: var(--popup-text) !important;
  background: var(--popup-surface) !important;
  border-color: var(--popup-border) !important;
}

#onlineModal #onlineContent .online-card :is(h1, h2, h3, h4, strong),
#onlineModal #onlineContent .online-profile :is(h1, h2, h3, h4, strong),
#onlineModal #onlineContent .ranking-columns :is(h1, h2, h3, h4, strong),
#infoModal .info-content :is(h1, h2, h3, h4, strong),
#settingsModal .settings-content :is(h1, h2, h3, h4, strong),
.last-trick-dialog :is(h1, h2, h3, h4, strong),
.boom-dialog :is(h1, h2, h3, h4, strong),
.chat-history-dialog :is(h1, h2, h3, h4, strong) {
  color: var(--popup-heading) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .online-card :is(p, label, small, span),
#onlineModal #onlineContent .online-profile :is(p, label, small, span),
#onlineModal #onlineContent .ranking-columns :is(p, label, small, span),
#infoModal .info-content :is(p, li, label, small),
#settingsModal .settings-content :is(p, li, label, small),
.last-trick-dialog :is(p, li, label, small, span),
.boom-dialog :is(p, li, label, small, span),
.chat-history-dialog :is(p, li, label, small, span) {
  color: var(--popup-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Formuliervelden houden hun eigen contrastrijke vlak in beide modi. */
#onlineModal #onlineContent :is(input, select, textarea),
#infoModal .info-content :is(input, select, textarea),
#settingsModal .settings-content :is(input, select, textarea),
.chat-history-dialog :is(input, select, textarea) {
  color: var(--popup-input-text) !important;
  background: var(--popup-input-bg) !important;
  border-color: var(--popup-border) !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent :is(input, textarea)::placeholder,
#infoModal .info-content :is(input, textarea)::placeholder,
#settingsModal .settings-content :is(input, textarea)::placeholder,
.chat-history-dialog :is(input, textarea)::placeholder {
  color: var(--popup-muted) !important;
  opacity: .82 !important;
}

#onlineModal #onlineContent select option,
#infoModal .info-content select option,
#settingsModal .settings-content select option {
  color: var(--popup-input-text) !important;
  background: var(--popup-input-bg) !important;
}

/* Keuzekaarten: licht/donker vlak gebruikt bijbehorende tekst; geselecteerd blijft groen. */
#onlineModal #onlineContent :is(.online-table-option, .lobby-seat, .social-card, .premium-feature-grid > div) {
  color: var(--popup-text) !important;
  background: var(--popup-surface-alt) !important;
  border-color: var(--popup-border) !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent :is(.online-table-option, .lobby-seat, .social-card, .premium-feature-grid > div) :is(strong, h2, h3) {
  color: var(--popup-heading) !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent :is(.online-table-option, .lobby-seat, .social-card, .premium-feature-grid > div) :is(span, small, p) {
  color: var(--popup-muted) !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent .online-table-option.selected,
#onlineModal #onlineContent .lobby-seat.occupied,
#onlineModal #onlineContent button:is(.start-game-button, .info-button),
#infoModal button,
#settingsModal button,
.last-trick-dialog button,
.boom-dialog button,
.chat-history-dialog button,
.bid-popup-dialog button {
  color: #fff7e7 !important;
  background-color: #124c2f !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .online-table-option.selected :is(strong, span, small),
#onlineModal #onlineContent .lobby-seat.occupied :is(strong, span, small) {
  color: #fff7e7 !important;
}

/* Donkere merkvlakken blijven donker en krijgen daarom expliciet lichte tekst. */
#onlineModal #onlineContent .premium-hero,
#onlineModal #onlineContent .daily-result-confirmation {
  color: #fff8e9 !important;
  background: linear-gradient(145deg, #174f33, #0a2d1d) !important;
  border-color: #d2a548 !important;
}

#onlineModal #onlineContent .premium-hero :is(h1, h2, h3, strong),
#onlineModal #onlineContent .daily-result-confirmation :is(h1, h2, h3, strong) {
  color: #ffffff !important;
}

#onlineModal #onlineContent .premium-hero :is(p, small),
#onlineModal #onlineContent .daily-result-confirmation :is(p, small) {
  color: #f3ead8 !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent .premium-hero > span,
#onlineModal #onlineContent .daily-result-confirmation > span {
  color: #f2c85b !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent > :is(p, small, .online-status),
#infoModal .info-content > :is(p, small),
#settingsModal .settings-content > :is(p, small) {
  color: var(--popup-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Uitgeschakelde bediening blijft leesbaar, maar herkenbaar niet-actief. */
#onlineModal #onlineContent button:disabled,
#infoModal button:disabled,
#settingsModal button:disabled,
.last-trick-dialog button:disabled,
.boom-dialog button:disabled,
.chat-history-dialog button:disabled,
.bid-popup-dialog button:disabled {
  color: #fff7e7 !important;
  background: #607a67 !important;
  opacity: 1 !important;
}

/* Online lobby gebruikt bewust lichte kaarten, ook wanneer het spel in donkere modus staat. */
#onlineModal .online-dialog:has(.online-table-picker) {
  width: min(calc(100vw - 16px), 1040px) !important;
  max-width: calc(100vw - 16px) !important;
  box-sizing: border-box !important;
}

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent :is(.online-grid, .online-card, .online-table-picker, .lobby-actions) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent :is(.online-profile, .online-card) {
  color: #30251c !important;
  background: linear-gradient(145deg, #fffaf0, #eee5d5) !important;
}

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent :is(.online-profile, .online-card) :is(h1, h2, h3, h4, strong) {
  color: #143f29 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent :is(.online-profile, .online-card) :is(p, label, small, span) {
  color: #624c36 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent .online-table-option:not(.selected) {
  color: #30251c !important;
  background: #fffaf0 !important;
}

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent .online-table-option:not(.selected) :is(strong, span, small) {
  color: #3d3025 !important;
  opacity: 1 !important;
}

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent .online-table-option:not(.selected) span { color: #624c36 !important; }
#onlineModal .online-dialog:has(.online-table-picker) #onlineContent .online-table-option:not(.selected) small { color: #52685b !important; }

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent .online-table-option.selected {
  color: #fff7e7 !important;
  background: linear-gradient(145deg, #194f33, #0e3823) !important;
}

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent .online-table-option.selected :is(strong, span, small) {
  color: #fff7e7 !important;
}

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent .lobby-actions {
  display: grid !important;
  grid-template-columns: minmax(96px, .8fr) minmax(120px, 1.35fr) minmax(108px, .85fr) !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
}

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent .lobby-actions > * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#onlineModal .online-dialog:has(.online-table-picker) #onlineContent #onlineStatus {
  color: #fff7e7 !important;
  opacity: 1 !important;
}

@media (max-width: 720px) {
  #onlineModal .online-dialog:has(.online-table-picker) #onlineContent .online-grid {
    grid-template-columns: 1fr !important;
  }

  #onlineModal .online-dialog:has(.online-table-picker) #onlineContent .lobby-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Verzonden vriendschapsverzoek: duidelijke, maar niet-klikbare wachtstatus. */
#onlineModal #onlineContent .social-request-pending {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  border: 1px solid #e0b453 !important;
  border-radius: 999px !important;
  color: #fff9e8 !important;
  background: #6b4a12 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 6px rgba(54,35,5,.18) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
 
/* Herstel bestaande popupstijl: de contrastfix hierboven is alleen nodig voor Online spelen. */
#settingsModal .settings-content :is(.settings-toggle, .settings-field) {
  color: #30251c !important;
}

#settingsModal .settings-content :is(.settings-toggle strong, .settings-field > span) {
  color: #143f29 !important;
  opacity: 1 !important;
}

#settingsModal .settings-content .settings-toggle small {
  color: #624c36 !important;
  opacity: 1 !important;
}

#infoModal .info-content :is(.rules-hero, .rule-summary, .rule-card, .rule-card.wide, .info-card) {
  color: #30251c !important;
}

#infoModal .info-content :is(.rules-hero, .rule-summary, .rule-card, .rule-card.wide, .info-card) :is(h1, h2, h3, h4, strong) {
  color: #143f29 !important;
  opacity: 1 !important;
}

#infoModal .info-content :is(.rules-hero, .rule-summary, .rule-card, .rule-card.wide, .info-card) :is(p, li, span:not(.rule-number), small) {
  color: #4f4135 !important;
  opacity: 1 !important;
}

#infoModal .info-content .rules-hero > span {
  color: #725938 !important;
}

#onlineModal .online-dialog:has(.ranking-columns) #onlineContent .ranking-columns > section {
  color: #30251c !important;
  background: linear-gradient(145deg, #fffaf0, #eee0c8) !important;
  border-color: rgba(184, 139, 67, 0.62) !important;
}

#onlineModal .online-dialog:has(.ranking-columns) #onlineContent .ranking-columns > section :is(h1, h2, h3, h4, strong) {
  color: #143f29 !important;
  opacity: 1 !important;
}

#onlineModal .online-dialog:has(.ranking-columns) #onlineContent .ranking-columns > section :is(p, span, small) {
  color: #624c36 !important;
  opacity: 1 !important;
}

#onlineModal .online-dialog:has(.ranking-columns) #onlineContent .leaderboard-row {
  color: #30251c !important;
}

#onlineModal .online-dialog:has(.ranking-columns) #onlineContent .leaderboard-row > :is(span, strong) {
  color: inherit !important;
}

#onlineModal .online-dialog:has(.ranking-columns) #onlineContent .leaderboard-row.header,
#onlineModal .online-dialog:has(.ranking-columns) #onlineContent .leaderboard-row.header > :is(span, strong) {
  color: #f5d98f !important;
}

/* Kopregels staan op het donkergroene popupframe en blijven daarom licht. */
#settingsModal #settingsTitle,
#onlineModal .online-dialog:has(.ranking-columns) #onlineTitle {
  color: #f2d68e !important;
  opacity: 1 !important;
}

#infoModal #infoTitle {
  color: #143f29 !important;
  opacity: 1 !important;
}

#settingsModal .last-trick-header > span,
#infoModal .last-trick-header > span,
#onlineModal .online-dialog:has(.ranking-columns) .last-trick-header > span {
  color: #eadfc8 !important;
  opacity: 1 !important;
}

#settingsModal .settings-content .settings-field :is(small, p) {
  color: #624c36 !important;
  opacity: 1 !important;
}

/* Dagscore: altijd een licht resultaatvlak met stevig tekstcontrast. */
#onlineModal #onlineContent .daily-result-confirmation {
  color: #2f261e !important;
  background: linear-gradient(145deg, #fffaf0, #f5ead3) !important;
  border-color: #d2a548 !important;
  box-shadow: 0 10px 24px rgba(45, 34, 22, .14) !important;
}

#onlineModal #onlineContent .daily-result-confirmation > span {
  color: #9a6500 !important;
}

#onlineModal #onlineContent .daily-result-confirmation :is(h1, h2, h3, strong) {
  color: #124c2f !important;
}

#onlineModal #onlineContent .daily-result-confirmation :is(p, small) {
  color: #604d3b !important;
}

#onlineModal .online-dialog:has(.daily-result-confirmation) #onlineContent .daily-board-title {
  color: #124c2f !important;
}

#onlineModal .online-dialog:has(.daily-result-confirmation) #onlineContent .leaderboard-row {
  color: #30251c !important;
  background: #fffaf0 !important;
  border-color: rgba(183, 132, 42, .42) !important;
}

#onlineModal .online-dialog:has(.daily-result-confirmation) #onlineContent .leaderboard-row.header {
  color: #fff8e9 !important;
  background: #39654e !important;
}

#onlineModal .online-dialog:has(.daily-result-confirmation) #onlineContent .leaderboard-row > :is(span, strong) {
  color: inherit !important;
  opacity: 1 !important;
}

/* Herstel per werkelijk achtergrondvlak; niet afleiden van de algemene themastand. */
#bidPopup .bid-popup-dialog > strong,
#boomModal .last-trick-header strong {
  color: #fff8e9 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#bidPopup .bid-popup-dialog > p,
#boomModal .last-trick-header span {
  color: #eadfc8 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal .online-dialog:has(.daily-reference-hero) {
  color: #30261d !important;
  background: linear-gradient(145deg, #fffaf0 0%, #a8b5a4 100%) !important;
}

#onlineModal .online-dialog:has(.daily-reference-hero) .last-trick-header > span {
  color: #4f4135 !important;
}

#onlineModal .online-dialog:has(.daily-reference-hero) #onlineTitle {
  color: #12472b !important;
}

#onlineModal .online-dialog:has(.social-shell) .last-trick-header span,
#onlineModal .online-dialog:has(.social-chat) .last-trick-header span {
  color: #624c36 !important;
}

#onlineModal .online-dialog:has(.social-shell) #onlineTitle,
#onlineModal .online-dialog:has(.social-chat) #onlineTitle {
  color: #143f29 !important;
}

#onlineModal .online-dialog:not(:has(.daily-reference-hero)):not(:has(.social-shell)):not(:has(.social-chat)):not(:has(.ranking-columns)) .last-trick-header span {
  color: #eadfc8 !important;
}

#onlineModal .online-dialog:not(:has(.daily-reference-hero)):not(:has(.social-shell)):not(:has(.social-chat)):not(:has(.ranking-columns)) #onlineTitle {
  color: #fff8e9 !important;
}

/* Het versieblok heeft altijd een lichte ondergrond, onafhankelijk van de modus. */
#infoModal .info-dialog.rules-dialog .info-content .rules-version {
  color: #4f4135 !important;
  background: #f3efe3 !important;
}

#infoModal .info-dialog.rules-dialog .info-content .rules-version span,
#infoModal .info-dialog.rules-dialog .info-content .rules-version small {
  color: #624c36 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#infoModal .info-dialog.rules-dialog .info-content .rules-version strong {
  color: #12472b !important;
  opacity: 1 !important;
  text-shadow: none !important;
}