/*
 * Centrale popupstijl. Foto 2 (lichte, moderne kaartstijl) is de leidraad.
 * Dit bestand staat bewust als laatste stylesheet in index.html zodat oude,
 * schermspecifieke kleurcorrecties de leesbaarheid niet opnieuw verstoren.
 */
:root {
  --popup-shell: #eef1e8;
  --popup-paper: #fffaf0;
  --popup-paper-soft: #f7efdf;
  --popup-ink: #493a2e;
  --popup-modern-muted: #705d49;
  --popup-green: #12492f;
  --popup-green-deep: #0a3522;
  --popup-gold: #c89436;
  --popup-gold-soft: #dfbf78;
  --popup-line: rgba(190, 139, 48, .68);
  --popup-shadow: 0 22px 60px rgba(3, 18, 11, .34), inset 0 0 0 2px rgba(255,255,255,.72);
}

/* Laatste contrastbewaking voor het lichte Google/Facebook-inlogvenster. */
#onlineModal #onlineContent div.social-login-hero {
  background: linear-gradient(145deg, #fffdf7, #f7edd9) !important;
  border-color: #c99a3f !important;
}
#onlineModal #onlineContent div.social-login-hero > span { color: #9b6500 !important; }
#onlineModal #onlineContent div.social-login-hero > h2 { color: #104f34 !important; text-shadow: none !important; }
#onlineModal #onlineContent div.social-login-hero > p { color: #604f3e !important; opacity: 1 !important; }
#onlineModal #onlineContent div.social-login-card > p.online-status { color: #604f3e !important; opacity: 1 !important; }

/* Daguitdaging is in beide thema's licht. Deze regels staan bewust in de
   laatst geladen popupthemalaag zodat de donkere modus ze niet terugdraait. */
#onlineModal #onlineContent .daily-reference-info.online-card {
  color: #35291f !important;
  -webkit-text-fill-color: #35291f !important;
  background: #fff0c4 !important;
  border-color: #d8a43d !important;
}

#onlineModal #onlineContent .daily-reference-info :is(strong, b) {
  color: #174a31 !important;
  -webkit-text-fill-color: #174a31 !important;
}

#onlineModal #onlineContent .daily-reference-info p {
  color: #695746 !important;
  -webkit-text-fill-color: #695746 !important;
}

#onlineModal #onlineContent .daily-reference-info .daily-info-icon {
  color: #fff8e8 !important;
  -webkit-text-fill-color: #fff8e8 !important;
  background: #17482f !important;
}

#onlineModal #onlineContent .daily-variant-ribbon,
#onlineModal #onlineContent .daily-variant-ribbon *,
#onlineModal #onlineContent button.daily-reference-start,
#onlineModal #onlineContent button.daily-reference-start b,
#onlineModal #onlineContent button.daily-reference-start > span:not(.daily-button-cards) {
  color: #fff8e8 !important;
  -webkit-text-fill-color: #fff8e8 !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent button.daily-reference-start .daily-button-cards i {
  color: #302b25 !important;
  -webkit-text-fill-color: #302b25 !important;
  background: #fffdf6 !important;
}

#onlineModal #onlineContent button.daily-reference-start .daily-button-cards i:first-child {
  color: #c94545 !important;
  -webkit-text-fill-color: #c94545 !important;
}

/* Alle hoofdvensters gebruiken voortaan dezelfde lichte basis. */
:is(
  #onlineModal .online-dialog,
  #infoModal .info-dialog,
  #settingsModal .settings-dialog,
  .last-trick-dialog,
  .boom-dialog,
  .chat-history-dialog,
  .game-exit-dialog,
  .bid-popup-dialog,
  .legal-dialog > div
) {
  color: var(--popup-ink) !important;
  background: linear-gradient(145deg, #fffdf6 0%, var(--popup-shell) 100%) !important;
  border: 1px solid var(--popup-gold) !important;
  border-radius: 22px !important;
  box-shadow: var(--popup-shadow) !important;
}

:is(#onlineModal, #infoModal, #settingsModal, #lastTrickModal, #boomModal, #chatHistoryModal, #gameExitModal) {
  color: var(--popup-ink) !important;
}

:is(
  #onlineModal .last-trick-header,
  #infoModal .last-trick-header,
  #settingsModal .last-trick-header,
  .last-trick-dialog > .last-trick-header,
  .boom-dialog > .last-trick-header,
  .chat-history-dialog > .last-trick-header
) {
  color: var(--popup-green) !important;
  background: rgba(255, 250, 240, .78) !important;
  border-bottom: 1px solid var(--popup-line) !important;
}

:is(
  #onlineModal .last-trick-header,
  #infoModal .last-trick-header,
  #settingsModal .last-trick-header,
  .last-trick-dialog > .last-trick-header,
  .boom-dialog > .last-trick-header,
  .chat-history-dialog > .last-trick-header
) :is(span, strong, h1, h2) {
  color: var(--popup-green) !important;
  text-shadow: none !important;
}

#onlineTitle,
#infoTitle,
#settingsTitle,
#lastTrickTitle,
#boomTitle,
#chatHistoryTitle {
  color: var(--popup-green) !important;
  -webkit-text-fill-color: var(--popup-green) !important;
  text-shadow: none !important;
}

#onlineModal#onlineModal .online-dialog .last-trick-header > div > span {
  color: #705d49 !important;
  -webkit-text-fill-color: #705d49 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#boomModal #boomOverview .pot-points-summary {
  color: #fff0c4 !important;
  -webkit-text-fill-color: #fff0c4 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#boomModal #boomHomeButton,
#boomModal #boomHomeButton[hidden] {
  display: none !important;
}

#lastTrickModal .pot-review-row > div > strong {
  color: #fff0c4 !important;
  -webkit-text-fill-color: #fff0c4 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#lastTrickModal .pot-review-row > p {
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#lastTrickModal .pot-review-row > small {
  color: #f4d58a !important;
  -webkit-text-fill-color: #f4d58a !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal .online-dialog #onlineContent,
#infoModal .info-dialog #infoContent,
#settingsModal .settings-dialog #settingsContent {
  color: var(--popup-ink) !important;
  background: #edf1e8 !important;
}

:is(#onlineContent, #infoContent, #settingsContent, .last-trick-content, .boom-content, .chat-history-content) {
  color: var(--popup-ink) !important;
  background: transparent !important;
}

/* Koppen en gewone tekst blijven in elk kleurthema leesbaar. */
:is(#onlineContent, #infoContent, #settingsContent, .bid-popup-dialog, .last-trick-dialog, .boom-dialog, .chat-history-dialog)
  :is(h1, h2, h3, h4, legend, .section-title) {
  color: var(--popup-green) !important;
  -webkit-text-fill-color: var(--popup-green) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

:is(#onlineContent, #infoContent, #settingsContent, .bid-popup-dialog, .last-trick-dialog, .boom-dialog, .chat-history-dialog)
  :is(p, li, label, small, .helper-text) {
  color: var(--popup-modern-muted) !important;
  -webkit-text-fill-color: var(--popup-modern-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

:is(#onlineContent, #infoContent, #settingsContent, .bid-popup-dialog, .last-trick-dialog, .boom-dialog, .chat-history-dialog)
  :is(strong, b) {
  color: var(--popup-ink) !important;
  -webkit-text-fill-color: var(--popup-ink) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Lichte kaarten: één rustige, moderne oppervlaktestijl. */
:is(#onlineContent, #infoContent, #settingsContent, .last-trick-dialog, .boom-dialog, .chat-history-dialog)
  :is(
    .online-card, .online-profile, .online-section, .online-lobby-card,
    .settings-toggle, .settings-field, .settings-section,
    .rules-hero, .rules-summary, .rules-card,
    .social-player-card, .social-search-result, .social-invite-card, .social-message-row, .social-empty,
    .social-settings-section, .profile-card, .shop-card,
    .premium-card, .premium-option, .ranking-card, .leaderboard-card,
    .daily-reference-card, .daily-reference-info, .daily-reference-score,
    .legal-menu-link, .legal-popup-document,
    .last-trick-summary, .boom-summary, .boom-round, .chat-message
  ) {
  color: var(--popup-ink) !important;
  background: var(--popup-paper) !important;
  border-color: var(--popup-line) !important;
  box-shadow: 0 6px 16px rgba(47, 42, 28, .08) !important;
}

/* Donkere introductieblokken worden ook licht; alleen acties en selecties zijn groen. */
:is(
  #onlineContent .premium-hero,
  #onlineContent .daily-reference-hero,
  #onlineContent .social-settings-intro,
  #onlineContent .legal-menu-intro,
  #onlineContent .online-hero,
  #infoContent .rules-hero
) {
  color: var(--popup-ink) !important;
  background: var(--popup-paper) !important;
  border: 1px solid var(--popup-line) !important;
  box-shadow: 0 7px 18px rgba(47, 42, 28, .08) !important;
}

:is(
  #onlineContent .premium-hero,
  #onlineContent .daily-reference-hero,
  #onlineContent .social-settings-intro,
  #onlineContent .legal-menu-intro,
  #onlineContent .online-hero,
  #infoContent .rules-hero
) :is(h1, h2, h3) { color: var(--popup-green) !important; }

:is(
  #onlineContent .premium-hero,
  #onlineContent .daily-reference-hero,
  #onlineContent .social-settings-intro,
  #onlineContent .legal-menu-intro,
  #onlineContent .online-hero,
  #infoContent .rules-hero
) :is(p, small) { color: var(--popup-modern-muted) !important; }

/* Social-login moet ook na alle thema-overschrijvingen helder leesbaar blijven. */
#onlineModal #onlineContent .social-login-hero {
  color: #3f352b !important;
  background: linear-gradient(145deg, #fffdf7, #f7edd9) !important;
  border-color: #c99a3f !important;
}

#onlineModal #onlineContent .social-login-hero > span { color: #9b6500 !important; }
#onlineModal #onlineContent .social-login-hero h2 { color: #104f34 !important; text-shadow: none !important; }
#onlineModal #onlineContent .social-login-hero p { color: #604f3e !important; opacity: 1 !important; }
#onlineModal #onlineContent .social-login-card {
  color: #3f352b !important;
  background: #fffaf0 !important;
  border-color: #c99a3f !important;
}
#onlineModal #onlineContent .social-login-card > .online-status { color: #604f3e !important; opacity: 1 !important; }

/* Formulieren zijn licht en voorspelbaar, ook in donkere modus. */
:is(#onlineContent, #infoContent, #settingsContent, .chat-history-dialog, .bid-popup-dialog)
  :is(input, textarea, select) {
  color: var(--popup-ink) !important;
  -webkit-text-fill-color: var(--popup-ink) !important;
  background: #fffdf8 !important;
  border-color: var(--popup-line) !important;
  caret-color: var(--popup-green) !important;
}

:is(#onlineContent, #infoContent, #settingsContent, .chat-history-dialog)
  :is(input, textarea)::placeholder {
  color: #8b7b69 !important;
  opacity: 1 !important;
}

/* Online zoek-, tekst- en keuzevelden blijven crème, ook in donkere modus. */
#onlineModal #onlineContent :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  textarea,
  select
) {
  color: var(--popup-ink) !important;
  -webkit-text-fill-color: var(--popup-ink) !important;
  background: #fff0c4 !important;
  background-color: #fff0c4 !important;
  border-color: var(--popup-line) !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent :is(input, textarea)::placeholder {
  color: #705d49 !important;
  -webkit-text-fill-color: #705d49 !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent select option {
  color: var(--popup-ink) !important;
  background: #fff0c4 !important;
}

#settingsModal .settings-content select {
  color: var(--popup-green-deep) !important;
  -webkit-text-fill-color: var(--popup-green-deep) !important;
  background: #fff0c4 !important;
  background-color: #fff0c4 !important;
  border-color: var(--popup-line) !important;
  opacity: 1 !important;
}

#settingsModal .settings-content select option {
  color: var(--popup-green-deep) !important;
  background: #fff0c4 !important;
}

#onlineModal #onlineContent .social-search input,
#onlineModal #onlineContent .lobby-actions input,
#onlineModal #onlineContent .online-card select {
  color: var(--popup-ink) !important;
  -webkit-text-fill-color: var(--popup-ink) !important;
  background: #fff0c4 !important;
  background-color: #fff0c4 !important;
}

#onlineModal #onlineContent :is(.social-search, .lobby-actions) input::placeholder {
  color: #705d49 !important;
  -webkit-text-fill-color: #705d49 !important;
  opacity: 1 !important;
}

/* Geselecteerde tafel: lichte tekst op het donkergroene actieve vlak. */
#onlineModal #onlineContent .online-table-option.selected > strong {
  color: #fff7e7 !important;
  -webkit-text-fill-color: #fff7e7 !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent .online-table-option.selected > span {
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent .online-table-option.selected > small {
  color: #f4d58a !important;
  -webkit-text-fill-color: #f4d58a !important;
  opacity: 1 !important;
}

/* Primaire acties en actieve keuzes. */
:is(
  #onlineModal, #infoModal, #settingsModal, #lastTrickModal, #boomModal, #chatHistoryModal,
  .bid-popup-dialog, .game-exit-dialog, .legal-dialog
) :is(
  .start-game-button, .info-button, .primary-button, .legal-primary,
  [data-action="primary"], button.active, button[aria-selected="true"]
) {
  color: #fff8e8 !important;
  -webkit-text-fill-color: #fff8e8 !important;
  background: linear-gradient(180deg, #17623e 0%, #0d472d 100%) !important;
  border-color: var(--popup-gold) !important;
  text-shadow: none !important;
}

:is(#closeOnlineButton, #closeInfoButton, #closeSettingsButton, #closeLastTrickButton, #closeBoomButton, #closeChatHistoryButton) {
  color: #fff2c8 !important;
  -webkit-text-fill-color: #fff2c8 !important;
  background: linear-gradient(180deg, #15583a, #0b3d28) !important;
  border-color: var(--popup-gold) !important;
}

/* Inactieve tabs blijven licht; dit is het belangrijke verschil met foto 1. */
:is(.rules-tabs, .social-tabs) {
  background: var(--popup-paper) !important;
  border-color: var(--popup-line) !important;
}

:is(.rules-tabs, .social-tabs) button:not(.active):not([aria-selected="true"]) {
  color: var(--popup-ink) !important;
  -webkit-text-fill-color: var(--popup-ink) !important;
  background: var(--popup-paper-soft) !important;
  border-color: var(--popup-line) !important;
}

/* Cijfers in rode meldingstellers blijven wit, ook binnen lichte tabknoppen. */
#onlineModal .social-tabs button b {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Regels: dezelfde breedte en luchtige drie kolommen als de oudere uitvoering. */
#infoModal .info-dialog.rules-dialog {
  width: min(980px, calc(100vw - 24px)) !important;
  max-width: 980px !important;
}

#infoModal #infoContent .rules-guide {
  color: var(--popup-ink) !important;
  background: #edf1e8 !important;
  border-color: var(--popup-line) !important;
}

#infoContent .rules-tabs {
  background: var(--popup-paper) !important;
  border-color: var(--popup-line) !important;
}

#infoContent .rules-tabs button:not(.active) {
  color: var(--popup-ink) !important;
  -webkit-text-fill-color: var(--popup-ink) !important;
  background: var(--popup-paper-soft) !important;
  border-color: var(--popup-line) !important;
}

#infoContent .rules-tabs button.active {
  color: #fff8e8 !important;
  -webkit-text-fill-color: #fff8e8 !important;
  background: linear-gradient(180deg, #17623e 0%, #0d472d 100%) !important;
}

#infoContent .rules-panel,
#infoContent .rules-panel.active {
  color: var(--popup-ink) !important;
  background: transparent !important;
}

#infoModal .rules-panel.active {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#infoModal .rules-summary { grid-column: 1 / -1 !important; }
#infoModal .rules-version {
  color: var(--popup-modern-muted) !important;
  background: var(--popup-paper) !important;
  border-color: var(--popup-line) !important;
}
#infoModal .rules-version :is(strong, b) { color: var(--popup-green) !important; }

/* De kaartvolgorde staat op donkergroene fiches. Zet naast color ook de
   WebKit-tekstvulling expliciet licht, zodat mobiele browsers geen oudere
   donkerbruine popupkleur over de letters heen leggen. */
#infoModal #infoContent .rules-panel .rule-rank-card .rank-strip span,
#infoModal #infoContent .rules-panel .rule-rank-card .rank-strip.quiet span {
  color: #fff0c4 !important;
  -webkit-text-fill-color: #fff0c4 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2) !important;
}

/* Sociale en online-inhoud: groene buitenvlakken worden lichte werkbladen. */
#onlineContent :is(.social-shell, .social-chat, .online-table-picker, .ranking-shell, .profile-shell, .shop-shell) {
  color: var(--popup-ink) !important;
  background: rgba(238, 241, 232, .84) !important;
  border-color: var(--popup-line) !important;
}

#onlineContent .social-chat-head { color: var(--popup-green) !important; }

:root[data-theme="light"] #onlineModal #onlineContent .social-chat-head .presence.offline {
  color: #705d49 !important;
  -webkit-text-fill-color: #705d49 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#gameExitModal #gameExitText {
  color: var(--popup-modern-muted) !important;
  -webkit-text-fill-color: var(--popup-modern-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#gameExitModal #cancelGameExitButton {
  color: #173d27 !important;
  -webkit-text-fill-color: #173d27 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#gameExitModal #confirmGameExitButton {
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#chatHistoryModal .chat-history-list .chat-line > strong {
  color: #fff0c4 !important;
  -webkit-text-fill-color: #fff0c4 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Het potoverzicht sluit aan op de lichte kaartstijl van de popup. */
#boomModal #boomOverview .boom-pot {
  color: var(--popup-ink) !important;
  background: #fffaf0 !important;
  border: 1px solid var(--popup-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 5px 14px rgba(36, 47, 38, .10) !important;
}

#boomModal #boomOverview .boom-pot header {
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(190, 139, 48, .32) !important;
}

#boomModal #boomOverview .boom-pot header strong {
  color: var(--popup-green) !important;
  -webkit-text-fill-color: var(--popup-green) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#boomModal #boomOverview .boom-pot header span {
  color: var(--popup-modern-muted) !important;
  -webkit-text-fill-color: var(--popup-modern-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#boomModal #boomOverview .boom-trick {
  color: var(--popup-ink) !important;
  -webkit-text-fill-color: var(--popup-ink) !important;
  background: var(--popup-paper-soft) !important;
  border: 1px solid rgba(190, 139, 48, .22) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#boomModal #boomOverview .boom-nat {
  color: #7b211d !important;
  -webkit-text-fill-color: #7b211d !important;
  background: #fff0ed !important;
  border-color: #c86459 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
#onlineContent .social-chat-messages p.friend { color: var(--popup-ink) !important; background: var(--popup-paper) !important; }
#onlineModal #onlineContent .social-chat-messages p.own {
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  background: var(--popup-green) !important;
  opacity: 1 !important;
}
#onlineModal #onlineContent .social-chat-messages p.own > strong {
  color: #f4d58a !important;
  -webkit-text-fill-color: #f4d58a !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent .premium-hero > span {
  color: #f4d05f !important;
  -webkit-text-fill-color: #f4d05f !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .premium-hero > h2 {
  color: #fff7e7 !important;
  -webkit-text-fill-color: #fff7e7 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .premium-hero > p {
  color: #fff0c4 !important;
  -webkit-text-fill-color: #fff0c4 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal .online-dialog:has(#registerForm) .premium-hero > span,
#onlineModal .online-dialog:has(#welcomeContinueButton) .premium-hero > span,
#onlineModal #onlineContent .premium-success-hero > span {
  color: #8a5c12 !important;
  -webkit-text-fill-color: #8a5c12 !important;
}

#onlineModal .online-dialog:has(#registerForm) .premium-hero > h2,
#onlineModal .online-dialog:has(#welcomeContinueButton) .premium-hero > h2,
#onlineModal #onlineContent .premium-success-hero > h2 {
  color: var(--popup-green) !important;
  -webkit-text-fill-color: var(--popup-green) !important;
}

#onlineModal .online-dialog:has(#registerForm) .premium-hero > p,
#onlineModal .online-dialog:has(#welcomeContinueButton) .premium-hero > p,
#onlineModal #onlineContent .premium-success-hero > p {
  color: var(--popup-modern-muted) !important;
  -webkit-text-fill-color: var(--popup-modern-muted) !important;
}

/* De bevestiging na Premium-activering gebruikt dezelfde lichte kaartstijl. */
#onlineModal #onlineContent .premium-success-hero,
#onlineModal #onlineContent .mollie-payment-card {
  color: var(--popup-ink) !important;
  background: #fffaf0 !important;
  border: 1px solid var(--popup-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(47, 42, 28, .08) !important;
}

#onlineModal #onlineContent .mollie-payment-card :is(strong, h2, h3) {
  color: var(--popup-green) !important;
  -webkit-text-fill-color: var(--popup-green) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .mollie-payment-card :is(p, span, small) {
  color: var(--popup-modern-muted) !important;
  -webkit-text-fill-color: var(--popup-modern-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Premium-aanbod: lichte blokken met dezelfde moderne popupstijl. */
#onlineModal #onlineContent .premium-offer-hero,
#onlineModal #onlineContent .premium-offer-features > div {
  color: var(--popup-ink) !important;
  background: #fffaf0 !important;
  border: 1px solid var(--popup-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(47, 42, 28, .08) !important;
}

#onlineModal #onlineContent .premium-offer-hero > span {
  color: #8a5c12 !important;
  -webkit-text-fill-color: #8a5c12 !important;
}

#onlineModal #onlineContent :is(.premium-offer-hero h2, .premium-offer-features strong) {
  color: var(--popup-green) !important;
  -webkit-text-fill-color: var(--popup-green) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent :is(.premium-offer-hero p, .premium-offer-features span, #premiumOfferStatus) {
  color: var(--popup-modern-muted) !important;
  -webkit-text-fill-color: var(--popup-modern-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .premium-plan-grid .premium-plan-button {
  color: var(--popup-ink) !important;
  background: linear-gradient(145deg, #fffaf0, #f4e5bd) !important;
  border-color: var(--popup-gold) !important;
  box-shadow: 0 7px 16px rgba(77, 57, 19, .13) !important;
}

#onlineModal #onlineContent .premium-plan-grid .premium-plan-button:hover,
#onlineModal #onlineContent .premium-plan-grid .premium-plan-button:focus-visible {
  background: linear-gradient(145deg, #fffdf7, #efd99d) !important;
  border-color: #a8731d !important;
  box-shadow: 0 9px 20px rgba(77, 57, 19, .18) !important;
}

#onlineModal #onlineContent .premium-plan-grid .premium-plan-button strong {
  color: var(--popup-green) !important;
  -webkit-text-fill-color: var(--popup-green) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .premium-plan-grid .premium-plan-button span {
  color: var(--popup-modern-muted) !important;
  -webkit-text-fill-color: var(--popup-modern-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .mollie-checkout-button {
  width: min(360px, 100%) !important;
  min-height: 54px !important;
  padding: 12px 24px !important;
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  background: linear-gradient(145deg, #17633f, #0b4129) !important;
  border: 1px solid var(--popup-gold) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(11, 65, 41, .24), inset 0 1px rgba(255,255,255,.18) !important;
  font-family: Inter, Arial, sans-serif !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .mollie-checkout-button strong {
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  font: 800 15px/1.2 Inter, Arial, sans-serif !important;
  letter-spacing: .025em !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .mollie-checkout-button:hover,
#onlineModal #onlineContent .mollie-checkout-button:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(145deg, #1d7550, #0d4d32) !important;
  border-color: #e0b34f !important;
  box-shadow: 0 10px 22px rgba(11, 65, 41, .3), 0 0 0 3px rgba(200,148,54,.18) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 420px) {
  #onlineModal #onlineContent .mollie-checkout-button strong {
    white-space: normal !important;
  }
}

#onlineModal #onlineContent .password-reset-hero > span {
  color: #8a5c12 !important;
  -webkit-text-fill-color: #8a5c12 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .password-reset-hero > h2 {
  color: var(--popup-green) !important;
  -webkit-text-fill-color: var(--popup-green) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .password-reset-hero > p {
  color: var(--popup-modern-muted) !important;
  -webkit-text-fill-color: var(--popup-modern-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .social-request-pending {
  color: #fff0c4 !important;
  -webkit-text-fill-color: #fff0c4 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent #onlineStatus {
  color: #fff0c4 !important;
  -webkit-text-fill-color: #fff0c4 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .social-gamepad-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 35px !important;
  height: 29px !important;
  flex: 0 0 35px !important;
  margin-right: 3px !important;
  vertical-align: middle !important;
  filter: none !important;
  opacity: 1 !important;
}

#onlineModal #onlineContent .social-gamepad-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(0, 35, 22, 0.32));
}

#onlineModal #onlineContent .invite-card { stroke-width: 1.5; }
#onlineModal #onlineContent .invite-card-back { fill: #e5b23c; stroke: #fff0c4; }
#onlineModal #onlineContent .invite-card-front { fill: #fff9e8; stroke: #d59d27; }
#onlineModal #onlineContent .invite-card-suit { fill: #c94747; }
#onlineModal #onlineContent .invite-card-plus-bg { fill: #155a3b; stroke: #fff0c4; stroke-width: 1.2; }
#onlineModal #onlineContent .invite-card-plus { fill: none; stroke: #fff0c4; stroke-width: 2; stroke-linecap: round; }

#onlineModal #onlineContent .lobby-friend-invite {
  width: 100% !important;
  min-height: 44px !important;
  margin-top: 12px !important;
}

/* Tabellen behouden een duidelijke groene kop en lichte regels. */
:is(#onlineContent, #infoContent) table thead :is(th, td) {
  color: #fff8e8 !important;
  background: var(--popup-green) !important;
}
:is(#onlineContent, #infoContent) table tbody :is(th, td) {
  color: var(--popup-ink) !important;
  background: var(--popup-paper) !important;
}

/* Het staande hoofdmenu moet in een smal browservenster volledig bereikbaar zijn. */
@media (orientation: portrait) {
  html body:not(.game-active) #startMenu.start-menu:not([hidden]) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

/* Speluitnodiging: lichte kaartvlakken met het vaste Klaverjastafel-contrast. */
#onlineModal .online-dialog:has(#friendInviteForm) #onlineContent .premium-hero > span,
#onlineModal .online-dialog:has(.invite-sent-confirmation) #onlineContent .premium-hero > span {
  color: #9b6818 !important;
  -webkit-text-fill-color: #9b6818 !important;
}

#onlineModal .online-dialog:has(#friendInviteForm) #onlineContent .premium-hero > h2,
#onlineModal .online-dialog:has(.invite-sent-confirmation) #onlineContent .premium-hero > h2 {
  color: var(--popup-green) !important;
  -webkit-text-fill-color: var(--popup-green) !important;
}

#onlineModal .online-dialog:has(#friendInviteForm) #onlineContent .premium-hero > p,
#onlineModal .online-dialog:has(.invite-sent-confirmation) #onlineContent .premium-hero > p {
  color: var(--popup-modern-muted) !important;
  -webkit-text-fill-color: var(--popup-modern-muted) !important;
}

#onlineModal #friendInviteForm,
#onlineModal #friendInviteForm .social-check {
  color: var(--popup-ink) !important;
  background: var(--popup-paper) !important;
  border-color: var(--popup-line) !important;
}

#onlineModal #friendInviteForm .social-check strong { color: var(--popup-green) !important; }
#onlineModal #friendInviteForm .social-check small { color: var(--popup-modern-muted) !important; }

/* Vriend uitnodigen: altijd lichte kaartvlakken, ook als globale themaregels later laden. */
#onlineModal .online-dialog:has(#friendInviteForm) #onlineContent .premium-hero {
  background: linear-gradient(145deg, #fffaf0, #f7ead0) !important;
  border-color: #d9aa45 !important;
  color: #3f342b !important;
}

#onlineModal .online-dialog:has(#friendInviteForm) #friendInviteForm {
  background: #fffaf0 !important;
  border-color: #d9aa45 !important;
  color: #3f342b !important;
}

#onlineModal .online-dialog:has(#friendInviteForm) #friendInviteForm .friend-invite-field,
#onlineModal .online-dialog:has(#friendInviteForm) #friendInviteForm .friend-invite-field > span {
  color: #5d4e40 !important;
  -webkit-text-fill-color: #5d4e40 !important;
}

#onlineModal .online-dialog:has(#friendInviteForm) #friendInviteForm select {
  background: #fff0c4 !important;
  border-color: #d6aa4d !important;
  color: #3f342b !important;
  -webkit-text-fill-color: #3f342b !important;
}

#onlineModal .online-dialog:has(#friendInviteForm) #friendInviteForm select option {
  background: #fffaf0 !important;
  color: #3f342b !important;
}

#onlineModal .online-dialog:has(#friendInviteForm) #friendInviteForm .social-check {
  background: #f8edda !important;
  border-color: #dfb85d !important;
}

#onlineModal .online-dialog:has(#friendInviteForm) #friendInviteForm > .start-game-button {
  background: linear-gradient(180deg, #1d7544, #0f5030) !important;
  color: #fff8e7 !important;
  -webkit-text-fill-color: #fff8e7 !important;
}

/* Bevestiging na het versturen gebruikt dezelfde lichte kaartstijl. */
#onlineModal .online-dialog:has(.invite-sent-confirmation) #onlineContent .invite-sent-confirmation {
  background: linear-gradient(145deg, #fffaf0, #f7ead0) !important;
  border: 1px solid #d9aa45 !important;
  color: #3f342b !important;
  box-shadow: 0 5px 14px rgba(60, 43, 20, .08) !important;
}

#onlineModal .online-dialog:has(.invite-sent-confirmation) #onlineContent .invite-sent-confirmation > span {
  color: #9b6818 !important;
  -webkit-text-fill-color: #9b6818 !important;
}

#onlineModal .online-dialog:has(.invite-sent-confirmation) #onlineContent .invite-sent-confirmation > h2 {
  color: #154c32 !important;
  -webkit-text-fill-color: #154c32 !important;
  text-shadow: none !important;
}

#onlineModal .online-dialog:has(.invite-sent-confirmation) #onlineContent .invite-sent-confirmation > p {
  color: #6b5845 !important;
  -webkit-text-fill-color: #6b5845 !important;
  opacity: 1 !important;
}

/* Sociale foutmelding: licht en leesbaar in beide kleurmodi. */
#onlineModal .online-dialog:has(.social-error-state) #onlineContent .social-error-state {
  background: linear-gradient(145deg, #fffaf0, #f7ead0) !important;
  border: 1px solid #d9aa45 !important;
  color: #3f342b !important;
  box-shadow: 0 5px 14px rgba(60, 43, 20, .08) !important;
}

#onlineModal .online-dialog:has(.social-error-state) #onlineContent .social-error-state > span {
  color: #9b6818 !important;
  -webkit-text-fill-color: #9b6818 !important;
}

#onlineModal .online-dialog:has(.social-error-state) #onlineContent .social-error-state > h2 {
  color: #154c32 !important;
  -webkit-text-fill-color: #154c32 !important;
  text-shadow: none !important;
}

#onlineModal .online-dialog:has(.social-error-state) #onlineContent .social-error-state > p {
  color: #6b5845 !important;
  -webkit-text-fill-color: #6b5845 !important;
  opacity: 1 !important;
}

/* Speel/pas-popup: licht kaartvlak in plaats van donkergroen met donkere letters. */
.bid-popup-dialog { padding: 16px !important; }
#bidPopup .bid-popup-dialog > span {
  color: #8a5a0b !important;
  -webkit-text-fill-color: #8a5a0b !important;
  opacity: 1 !important;
}
#bidPopup .bid-popup-dialog > strong {
  color: var(--popup-green) !important;
  -webkit-text-fill-color: var(--popup-green) !important;
  opacity: 1 !important;
}
#bidPopup .bid-popup-dialog > p {
  color: var(--popup-modern-muted) !important;
  -webkit-text-fill-color: var(--popup-modern-muted) !important;
  opacity: 1 !important;
}
.bid-popup-dialog .bid-actions button:first-child {
  color: #1d241e !important;
  -webkit-text-fill-color: #1d241e !important;
  background: #e2b341 !important;
  border-color: #c7922f !important;
  opacity: 1 !important;
}
.bid-popup-dialog .bid-actions button:last-child {
  color: var(--popup-ink) !important;
  -webkit-text-fill-color: var(--popup-ink) !important;
  background: var(--popup-paper-soft) !important;
  border-color: var(--popup-line) !important;
  opacity: 1 !important;
}

#bidPopup .bid-popup-dialog .bid-actions .pass-button {
  color: var(--popup-ink) !important;
  -webkit-text-fill-color: var(--popup-ink) !important;
  background: #f7d692 !important;
  background-color: #f7d692 !important;
  border-color: #c89436 !important;
}

/* Semantische meldingen mogen kleur houden, maar nooit laag contrast krijgen. */
:is(.error, .form-error, .account-error, [role="alert"]) {
  color: #7b211d !important;
  background-color: #fff0ed !important;
  border-color: #c86459 !important;
}

@media (max-width: 720px) {
  :is(#onlineModal .online-dialog, #infoModal .info-dialog, #settingsModal .settings-dialog,
      .last-trick-dialog, .boom-dialog, .chat-history-dialog, .game-exit-dialog) {
    width: min(96vw, 980px) !important;
    border-radius: 18px !important;
  }

  #infoModal .rules-panel.active { grid-template-columns: 1fr !important; }
  #infoModal .rules-summary { grid-column: 1 !important; }

  /* Verenigingsuitnodiging: lange namen mogen de mobiele popup niet verbreden. */
  #onlineModal #onlineContent .online-card,
  #onlineModal #onlineContent .online-club-invite {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #onlineModal #onlineContent .online-club-invite {
    width: 100% !important;
    overflow: hidden !important;
  }

  #onlineModal #onlineContent .online-club-invite p {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  #onlineModal #onlineContent #onlineClubInviteSelect,
  #onlineModal #onlineContent #inviteOnlineClubButton,
  #onlineModal #onlineContent #onlineClubInviteStatus {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-inline: 0 !important;
  }

  #onlineModal #onlineContent #onlineClubInviteSelect {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #onlineModal #onlineContent #inviteOnlineClubButton {
    min-height: 46px !important;
    padding-inline: 12px !important;
    white-space: normal !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#onlineModal, #infoModal, #settingsModal, #lastTrickModal, #boomModal, #chatHistoryModal) * {
    transition-duration: .01ms !important;
  }
}

/* Toernooikaarten blijven rustig uitgelijnd wanneer één kaart een afteller toont.
   Flex voorkomt dat de grid-rijen van de overige kaarten onnatuurlijk uitrekken. */
#onlineModal #onlineContent .community-grid > .tournament-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
}

#onlineModal #onlineContent .community-grid > .tournament-card > .community-badge {
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
}

#onlineModal #onlineContent .community-grid > .tournament-card > :is(h3, p, .community-meta, .tournament-expectation) {
  flex: 0 0 auto !important;
}

#onlineModal #onlineContent .community-grid > .tournament-card > .community-actions {
  margin-top: auto !important;
  padding-top: 12px !important;
  align-items: stretch !important;
}

/* Lobby: lichte tafelkaart met goed leesbare stoelstatussen. */
#onlineModal #onlineContent .online-card:has(.lobby-seat-map) {
  color: #493c31 !important;
  background: linear-gradient(145deg, #fffaf0, #f5eddd) !important;
  border: 1px solid #dfa934 !important;
  box-shadow: 0 10px 24px rgba(39, 54, 42, .12) !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) > span {
  color: #6b5845 !important;
  font-weight: 800 !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) > h2 {
  color: #145337 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) > p {
  color: #6b5845 !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) .lobby-actions {
  gap: 10px !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) .lobby-actions .info-button {
  color: #fffaf0 !important;
  background: #14613e !important;
  border-color: #c99321 !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) .lobby-seat-map {
  background: radial-gradient(circle at center, rgba(239, 249, 239, .98), rgba(225, 239, 225, .96)) !important;
  border-color: #3e9660 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85) !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) .lobby-seat {
  color: #493c31 !important;
  background: #fff9ed !important;
  border-color: #d6a334 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) .lobby-seat.free {
  border: 2px dashed #c69122 !important;
  background: #fff8e8 !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) .lobby-seat.occupied {
  border: 1px solid #c9982e !important;
  background: #f4e7c9 !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) .lobby-seat > span {
  color: #315b45 !important;
  font-weight: 700 !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) .lobby-seat > strong {
  color: #154c32 !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) .lobby-seat > small {
  color: #715e49 !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) .lobby-seat.own {
  background: #e1f1df !important;
  box-shadow: 0 0 0 2px #278451, 0 6px 16px rgba(31, 105, 64, .18) !important;
}

#onlineModal #onlineContent .online-card:has(.lobby-seat-map) .online-status,
#onlineModal #onlineContent .online-card:has(.lobby-seat-map) .online-status strong {
  color: #31513f !important;
}

@media (max-width: 520px) {
  #onlineModal #onlineContent .online-card:has(.lobby-seat-map) .lobby-seat-map {
    border-radius: 28px !important;
  }
}

/* Terugblik: kaarttekens behouden hun echte speelkaartkleuren. */
#lastTrickModal .last-trick-card .mini-card {
  color: #34342f !important;
  -webkit-text-fill-color: #34342f !important;
  opacity: 1 !important;
}

#lastTrickModal .last-trick-card .mini-card.red {
  color: #c94848 !important;
  -webkit-text-fill-color: #c94848 !important;
}

#lastTrickModal .last-trick-card .mini-card :is(.corner, .rank-center, .suit, .pip-layout, .court-figure),
#lastTrickModal .last-trick-card .mini-card :is(.corner, .rank-center, .suit, .pip-layout, .court-figure) * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#lastTrickModal .last-trick-card .mini-card .trump-mark {
  color: #2d2517 !important;
  -webkit-text-fill-color: #2d2517 !important;
  background: #e5b642 !important;
}

#lastTrickModal .last-trick-card > span {
  color: #5f503f !important;
  -webkit-text-fill-color: #5f503f !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Tafelchat-overzicht: lichte berichten met herkenbare accenten per afzender. */
#chatHistoryModal .chat-history-dialog {
  color: #493a2e !important;
  background: linear-gradient(145deg, #fffdf6, #edf1e8) !important;
}

#chatHistoryModal .chat-history-note {
  color: #5f503f !important;
  -webkit-text-fill-color: #5f503f !important;
}

#chatHistoryModal .chat-history-list {
  padding: 4px !important;
  border-radius: 12px !important;
  background: rgba(255, 250, 240, .58) !important;
}

#chatHistoryModal .chat-history-list .chat-line {
  color: #493a2e !important;
  background: #fffaf0 !important;
  border: 1px solid #dfbd75 !important;
  border-left: 4px solid #38875d !important;
  box-shadow: 0 4px 10px rgba(48, 52, 39, .09) !important;
}

#chatHistoryModal .chat-history-list .chat-line.ai {
  background: #f7efdf !important;
  border-color: #d9b461 !important;
  border-left-color: #3c9a6a !important;
}

#chatHistoryModal .chat-history-list .chat-line.system {
  background: #eaf3f4 !important;
  border-color: #9fc5ce !important;
  border-left-color: #3e91aa !important;
}

#chatHistoryModal .chat-history-list .chat-line > strong {
  color: #145337 !important;
  -webkit-text-fill-color: #145337 !important;
}

#chatHistoryModal .chat-history-list .chat-line.system > strong {
  color: #235d70 !important;
  -webkit-text-fill-color: #235d70 !important;
}

#chatHistoryModal .chat-history-list .chat-line > span {
  color: #493a2e !important;
  -webkit-text-fill-color: #493a2e !important;
  font-weight: 650 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Bevestiging vervangt de aanvraagknop en blijft ook na opnieuw openen zichtbaar. */
#onlineModal #onlineContent .community-membership-request-sent {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 15px !important;
  color: #174c32 !important;
  -webkit-text-fill-color: #174c32 !important;
  background: #e7f1df !important;
  border: 1px solid #75a982 !important;
  border-radius: 11px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 10px rgba(41, 79, 51, .10) !important;
}

/* Speluitnodiging op telefoon: alle acties blijven binnen het dialoogvenster. */
#onlineModal[data-online-view="game-invitation"] .online-dialog,
#onlineModal .online-dialog:has(.login-game-invitation) {
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
  color: #493a2e !important;
  background: linear-gradient(145deg, #fffdf6, #edf1e8) !important;
}

#onlineModal[data-online-view="game-invitation"] #onlineContent,
#onlineModal .online-dialog:has(.login-game-invitation) #onlineContent {
  min-height: 0 !important;
  max-height: calc(100dvh - 132px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  padding: 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

#onlineModal[data-online-view="game-invitation"] #onlineContent .login-game-invitation,
#onlineModal #onlineContent .login-game-invitation {
  gap: 12px !important;
  padding: clamp(14px, 4vw, 20px) !important;
  color: #493a2e !important;
  background: #fff8e9 !important;
  border-color: #d7aa4e !important;
  box-shadow: 0 6px 18px rgba(57, 48, 34, .10) !important;
}

#onlineModal #onlineContent .login-game-invitation-label { color: #8a5900 !important; -webkit-text-fill-color: #8a5900 !important; }
#onlineModal #onlineContent .login-game-invitation h2 { color: #123f2b !important; -webkit-text-fill-color: #123f2b !important; }
#onlineModal #onlineContent .login-game-invitation p { color: #59483b !important; -webkit-text-fill-color: #59483b !important; }
#onlineModal #onlineContent .login-game-invitation-expiry { color: #234b35 !important; -webkit-text-fill-color: #234b35 !important; background: #e5efdb !important; }

#onlineModal #onlineContent .login-game-invitation-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
}

#onlineModal #onlineContent .login-game-invitation-actions > button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 !important;
}

/* Uitgesloten online speler: dezelfde lichte en leesbare popupstijl. */
#onlineModal .online-dialog:has(#closeTimedOutMatchNotice) {
  color: #493a2e !important;
  background: linear-gradient(145deg, #fffdf6, #edf1e8) !important;
}

#onlineModal .online-dialog:has(#closeTimedOutMatchNotice) #onlineContent .premium-hero {
  color: #493a2e !important;
  background: #fff8e9 !important;
  border-color: #d7aa4e !important;
  box-shadow: 0 6px 18px rgba(57, 48, 34, .10) !important;
}

#onlineModal .online-dialog:has(#closeTimedOutMatchNotice) .premium-hero > span { color: #9a6508 !important; -webkit-text-fill-color: #9a6508 !important; }
#onlineModal .online-dialog:has(#closeTimedOutMatchNotice) .premium-hero > h2 { color: #145337 !important; -webkit-text-fill-color: #145337 !important; }
#onlineModal .online-dialog:has(#closeTimedOutMatchNotice) .premium-hero > p { color: #665345 !important; -webkit-text-fill-color: #665345 !important; }
#onlineModal #closeTimedOutMatchNotice { width: 100% !important; min-height: 46px !important; margin: 10px 0 0 !important; }

@media (max-width: 600px) {
  #onlineModal .online-dialog:has(.login-game-invitation) .last-trick-header h2 { font-size: clamp(25px, 8vw, 34px) !important; }
  #onlineModal #onlineContent .login-game-invitation-player { align-items: flex-start !important; }
  #onlineModal #onlineContent .login-game-invitation-player h2 { font-size: clamp(20px, 6vw, 27px) !important; line-height: 1.08 !important; }
  #onlineModal #onlineContent .login-game-invitation-player p,
  #onlineModal #onlineContent .login-game-invitation > p { font-size: clamp(16px, 4.7vw, 20px) !important; line-height: 1.35 !important; }
}

/* Mobiel toetsenbord: houd de inlogvelden in het zichtbare deel van het scherm. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  html.mobile-keyboard-open #onlineModal:not([hidden]) {
    position: fixed !important;
    top: var(--app-visible-top, 0px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    height: var(--app-visible-height, 100dvh) !important;
    min-height: 0 !important;
    padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)) !important;
    align-items: flex-start !important;
    overflow: hidden !important;
  }

  html.mobile-keyboard-open #onlineModal .online-dialog:has(#loginForm),
  html.mobile-keyboard-open #onlineModal .online-dialog:has(#registerForm) {
    width: 100% !important;
    max-height: calc(var(--app-visible-height, 100dvh) - 12px) !important;
    margin: 0 !important;
    transform: none !important;
  }

  html.mobile-keyboard-open #onlineModal .online-dialog:has(#loginForm) #onlineContent,
  html.mobile-keyboard-open #onlineModal .online-dialog:has(#registerForm) #onlineContent {
    max-height: calc(var(--app-visible-height, 100dvh) - 82px) !important;
    overflow-y: auto !important;
    scroll-padding: 14px 0 24px !important;
    overscroll-behavior: contain;
  }
}