/* Leesbare inhoudsstijl voor Online, Klassement, Uitleg en Instellingen. */
.online-dialog:has(.online-table-picker) #onlineContent,
.online-dialog:has(.ranking-columns) #onlineContent,
.info-dialog .info-content,
.settings-dialog .settings-content {
  padding: 14px !important;
  border: 1px solid #c79b49 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.055), transparent 34%),
    linear-gradient(145deg, #0e4b30, #082f20) !important;
  color: #fff9ec !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 14px rgba(10,37,23,.14) !important;
  font-family: Arial, sans-serif !important;
}

/* Online spelen */
.online-dialog:has(.online-table-picker) #onlineContent .online-profile,
.online-dialog:has(.online-table-picker) #onlineContent .online-card {
  border: 1px solid rgba(184,139,67,.62) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #fffaf0, #eee0c8) !important;
  color: #30251c !important;
  box-shadow: 0 4px 9px rgba(8,29,18,.15), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.online-dialog:has(.online-table-picker) :is(.online-profile strong, .online-card h2, .online-card > strong) {
  color: #143f29 !important;
  font-family: Arial, sans-serif !important;
}

.online-dialog:has(.online-table-picker) #onlineContent .online-profile > div {
  border: 1px solid rgba(184,139,67,.56) !important;
  background: rgba(255,250,240,.94) !important;
  color: #30251c !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}

.online-dialog:has(.online-table-picker) #onlineContent .online-profile > div span {
  color: #725938 !important;
  opacity: 1 !important;
}

.online-dialog:has(.online-table-picker) #onlineContent .online-profile > div strong {
  color: #143f29 !important;
  opacity: 1 !important;
}

.online-dialog:has(.online-table-picker) :is(.online-profile span, .online-card > span, .online-card p, .online-card label) {
  color: #624c36 !important;
  font-family: Arial, sans-serif !important;
}

.online-dialog:has(.online-table-picker) .online-table-option {
  border: 1px solid rgba(171,129,61,.48) !important;
  border-radius: 11px !important;
  background: #fffaf0 !important;
  color: #34281f !important;
  box-shadow: none !important;
}

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

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

.online-dialog:has(.online-table-picker) .online-table-option.selected {
  border-color: #c69a45 !important;
  background: linear-gradient(145deg, #194f33, #0e3823) !important;
  color: #fff7e5 !important;
  box-shadow: 0 0 0 2px rgba(207,165,79,.16) !important;
}

.online-dialog:has(.online-table-picker) #onlineContent .online-table-option.selected :is(strong, span, small) { color: #fff3d4 !important; opacity: 1 !important; }
.online-dialog:has(.online-table-picker) :is(select, input) {
  border: 1px solid #b88d45 !important;
  background: #fffdf6 !important;
  color: #2f261e !important;
  font-family: Arial, sans-serif !important;
}

.online-dialog:has(.online-table-picker) :is(.start-game-button, .info-button) {
  border: 1px solid #cda34e !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #194f33, #0e3823) !important;
  color: #f7d98f !important;
  box-shadow: 0 3px 8px rgba(15,50,31,.17) !important;
  font-family: Arial, sans-serif !important;
}

/* Klassement */
.online-dialog:has(.ranking-columns) #onlineContent .ranking-columns > section {
  border: 1px solid rgba(184,139,67,.62) !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #fffaf0, #eee0c8) !important;
  color: #30251c !important;
  box-shadow: 0 4px 9px rgba(8,29,18,.15), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.online-dialog:has(.ranking-columns) :is(.ranking-columns h2, .ranking-own-position, .ranking-winner) {
  color: #143f29 !important;
  font-family: Arial, sans-serif !important;
}

.online-dialog:has(.ranking-columns) .ranking-rotterdam :is(h2, .ranking-winner) { color: #84251f !important; }
.online-dialog:has(.ranking-columns) #onlineContent .leaderboard-row {
  border: 1px solid rgba(171,129,61,.4) !important;
  background: rgba(255,252,244,.88) !important;
  color: #30251c !important;
  font-family: Arial, sans-serif !important;
}

.online-dialog:has(.ranking-columns) #onlineContent .leaderboard-row.header {
  background: #174f33 !important;
  color: #f5d98f !important;
}

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

.online-dialog:has(.ranking-columns) .ranking-show-all {
  border-color: #c99e4c !important;
  background: #174f33 !important;
  color: #f4d78b !important;
}

/* Uitleg */
.info-dialog .info-content {
  line-height: 1.5 !important;
}

.info-dialog .info-content :is(h1, h2, h3, h4) {
  color: #f2d68e !important;
  font-family: Arial, sans-serif !important;
}

.info-dialog .info-content :is(p, li, span, small, label) {
  color: #fff9ec !important;
  font-family: Arial, sans-serif !important;
}

.info-dialog .info-content :is(section, article, .rules-step, .rule-card, .info-card) {
  border-color: rgba(194,151,75,.5) !important;
  background: rgba(255,250,240,.94) !important;
  color: #30251c !important;
}

.info-dialog .info-content :is(section, article, .rules-step, .rule-card, .info-card) :is(h1,h2,h3,h4,strong) { color: #143f29 !important; }
.info-dialog .info-content :is(section, article, .rules-step, .rule-card, .info-card) :is(p,li,span,small) { color: #4f4135 !important; }

/* Instellingen */
.settings-dialog .settings-content { gap: 10px !important; }
.settings-dialog :is(.settings-toggle, .settings-field) {
  padding: 12px 14px !important;
  border: 1px solid rgba(184,139,67,.62) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #fffaf0, #eee0c8) !important;
  color: #30251c !important;
  box-shadow: 0 3px 7px rgba(8,29,18,.12) !important;
}

.settings-dialog :is(.settings-toggle strong, .settings-field > span) {
  color: #143f29 !important;
  font-family: Arial, sans-serif !important;
}

.settings-dialog .settings-toggle small { color: #624c36 !important; font-family: Arial, sans-serif !important; }
.settings-dialog .settings-field select {
  border: 1px solid #b88d45 !important;
  background: #fffdf6 !important;
  color: #2f261e !important;
  font-family: Arial, sans-serif !important;
}

@media (max-width: 760px) {
  .online-dialog:has(.online-table-picker) #onlineContent,
  .online-dialog:has(.ranking-columns) #onlineContent,
  .info-dialog .info-content,
  .settings-dialog .settings-content { padding: 10px !important; border-radius: 13px !important; }
}

/* Inloggen, accountherstel en welkom: dezelfde leesbare goud-groene stijl. */
#onlineModal[data-online-view="auth"] .online-dialog,
#onlineModal[data-online-view="welcome"] .online-dialog { font-family: Arial, Helvetica, sans-serif !important; }

#onlineModal[data-online-view="auth"] #onlineContent :is(.premium-hero, .account-form, .verify-card),
#onlineModal[data-online-view="welcome"] #onlineContent .premium-hero {
  background: rgba(255, 250, 240, .95) !important;
  border: 1px solid #c9a45f !important;
  color: #3d3025 !important;
  box-shadow: 0 3px 10px rgba(61, 48, 37, .14) !important;
}

#onlineModal[data-online-view="auth"] #onlineContent :is(.premium-hero h2, .account-form > span, .verify-card > span, .verify-card strong),
#onlineModal[data-online-view="welcome"] #onlineContent .premium-hero h2 {
  color: #123f29 !important; opacity: 1 !important; text-shadow: none !important;
}

#onlineModal[data-online-view="auth"] #onlineContent :is(.premium-hero > span, .premium-hero p, .account-form small, .verify-card p),
#onlineModal[data-online-view="welcome"] #onlineContent :is(.premium-hero > span, .premium-hero p) {
  color: #624c36 !important; opacity: 1 !important; text-shadow: none !important;
}

#onlineModal[data-online-view="auth"] #onlineContent :is(.account-form input, .verify-card input) {
  background: #fffdf7 !important; border: 1px solid #b98a31 !important;
  color: #2f251c !important; opacity: 1 !important;
}

#onlineModal[data-online-view="auth"] #onlineContent :is(.account-form input, .verify-card input)::placeholder {
  color: #7a6a57 !important; opacity: 1 !important;
}

#onlineModal[data-online-view="auth"] #onlineContent .account-text-button { color: #195b38 !important; font-weight: 700 !important; }

#onlineModal[data-online-view="auth"] #onlineContent :is(.start-game-button, .info-button),
#onlineModal[data-online-view="welcome"] #onlineContent :is(.start-game-button, .info-button) {
  min-height: 44px; border: 1px solid #d6a544 !important;
  background: linear-gradient(145deg, #195b38, #0b3522) !important;
  color: #fff3d4 !important; font-weight: 800 !important;
}

#onlineModal[data-online-view="welcome"] #onlineContent {
  display: grid !important;
  gap: 14px !important;
}

#onlineModal[data-online-view="welcome"] #onlineContent .premium-hero {
  padding: 20px !important;
}

#onlineModal[data-online-view="welcome"] #onlineContent .premium-hero h2 {
  margin: 5px 0 10px !important;
  line-height: 1.18 !important;
}

#onlineModal[data-online-view="welcome"] #onlineContent .premium-hero p {
  margin: 0 !important;
  line-height: 1.55 !important;
}

#onlineModal[data-online-view="welcome"] #welcomeContinueButton {
  width: 100% !important;
  margin-top: 2px !important;
}

/* Regels: lichte inhoud, duidelijke header en contrastrijk onderwerpenmenu. */
.info-dialog.rules-dialog {
  font-family: Arial, Helvetica, sans-serif !important;
  background: linear-gradient(145deg, #fffaf0 0%, #dce5d8 100%) !important;
  border: 2px solid #c99b3d !important;
  color: #3d3025 !important;
  box-shadow: 0 20px 58px rgba(0, 0, 0, .52), inset 0 0 0 3px rgba(255, 244, 205, .7) !important;
}

.rules-dialog > .last-trick-header {
  margin: calc(-1 * clamp(14px, 2.2vw, 24px)) calc(-1 * clamp(14px, 2.2vw, 24px)) 12px !important;
  padding: 13px clamp(14px, 2.2vw, 24px) !important;
  background: rgba(255, 250, 240, .96) !important;
  border-bottom: 2px solid #c99b3d !important;
}

.rules-dialog > .last-trick-header > span {
  color: #725938 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  opacity: 1 !important;
}

.rules-dialog #infoTitle {
  color: #123f29 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  text-shadow: none !important;
}

.rules-dialog #closeInfoButton {
  color: #f7d57a !important;
  background: linear-gradient(145deg, #195b38, #0b3522) !important;
  border: 2px solid #c99b3d !important;
}

.rules-dialog .info-content,
.rules-dialog .rules-guide {
  background: transparent !important;
  color: #3d3025 !important;
}

.rules-dialog .rules-hero {
  background: rgba(255, 250, 240, .95) !important;
  border: 1px solid #c9a45f !important;
  box-shadow: 0 3px 10px rgba(61, 48, 37, .14) !important;
}

.rules-dialog .rules-hero :is(span, h2, p) {
  font-family: Arial, Helvetica, sans-serif !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.info-dialog.rules-dialog .rules-hero > span { color: #725938 !important; }
.info-dialog.rules-dialog .rules-hero h2 { color: #123f29 !important; }
.info-dialog.rules-dialog .rules-hero p { color: #624c36 !important; }
.info-dialog.rules-dialog .rules-hero #rulesStartDemoButton {
  width: max-content !important;
  max-width: 100% !important;
  min-height: 40px !important;
  margin-top: 11px !important;
  padding: 9px 15px !important;
  border: 1px solid #d6a544 !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #195b38, #0b3522) !important;
  color: #fff3d4 !important;
  font: 800 14px/1.1 Arial, Helvetica, sans-serif !important;
  box-shadow: 0 3px 8px rgba(11,53,34,.2) !important;
  cursor: pointer !important;
}

.rules-dialog .rules-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  padding: 6px !important;
  border: 1px solid #c9a45f !important;
  border-radius: 12px !important;
  background: rgba(255, 250, 240, .92) !important;
}

.rules-dialog .rules-tabs button {
  border: 1px solid #b99451 !important;
  border-radius: 9px !important;
  background: #f4ead8 !important;
  color: #3d3025 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.rules-dialog .rules-tabs button:is(:hover, :focus-visible) {
  background: #e8dcc6 !important;
  color: #123f29 !important;
}

.rules-dialog .rules-tabs button.active {
  background: linear-gradient(145deg, #195b38, #0b3522) !important;
  border-color: #d6a544 !important;
  color: #fff3d4 !important;
  box-shadow: 0 2px 7px rgba(11, 53, 34, .3) !important;
}

.rules-dialog .rule-card,
.rules-dialog .rule-card.wide {
  background: rgba(255, 250, 240, .96) !important;
  border: 1px solid #c9a45f !important;
  color: #3d3025 !important;
  box-shadow: 0 3px 9px rgba(61, 48, 37, .12) !important;
}

.rules-dialog .rule-card :is(strong, h2, h3, h4) {
  color: #123f29 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

.rules-dialog .rule-card :is(p, li, span:not(.rule-number)) {
  color: #4f4135 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  opacity: 1 !important;
}

.rules-dialog .rule-number,
.rules-dialog .rank-strip span {
  color: #fff3d4 !important;
  background: #174f33 !important;
  border-color: #c99b3d !important;
}

.info-dialog.rules-dialog .info-content .rules-panel .rule-card .rule-number {
  color: #ffffff !important;
}

.info-dialog.rules-dialog .info-content .rules-panel .rule-rank-card .rank-strip span,
.info-dialog.rules-dialog .info-content .rules-panel .rule-rank-card .rank-strip.quiet span {
  color: #ffffff !important;
}

@media (max-width: 760px) {
  .rules-dialog .rules-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eee8dc;
  --panel: #fffaf0;
  --panel-strong: #e6eadf;
  --text: #2f251c;
  --muted: #665744;
  --shadow: rgba(45, 34, 23, .2);
}

:root[data-theme="dark"] { color-scheme: dark; }
/* Dagboom: vooraf het doel en na afloop de verwerkte positie duidelijk tonen. */
.daily-score-target {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(214, 179, 90, .65);
  border-radius: 10px;
  color: #fffaf0 !important;
  background: rgba(0, 0, 0, .45);
  line-height: 1.4;
}

.daily-score-target strong { color: #f2c85b; font-weight: 800; }

.daily-result-confirmation {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid #d6b35a;
  border-radius: 16px;
  color: #fffaf0;
  background: linear-gradient(145deg, #0c4a2a, #071d13);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

.daily-result-confirmation > span {
  color: #f2c85b;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.daily-result-confirmation h2 { margin: 6px 0 10px; color: #fffaf0 !important; font-weight: 800; }
.daily-result-confirmation p { margin-top: 6px; color: #fffaf0 !important; line-height: 1.45; }
.daily-result-confirmation strong { color: #f2c85b; font-weight: 800; }