/* Daguitdaging: rustige premium kaartclub-stijl. Alleen presentatie. */
.online-dialog:has(.daily-reference-hero) {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 28px) !important;
  padding: 18px !important;
  overflow: hidden !important;
  border: 1px solid #c79b49 !important;
  border-radius: 30px !important;
  background: linear-gradient(145deg, #fffaf0 0%, #27452c 100%) !important;
  box-shadow: 0 22px 55px rgba(11, 24, 15, .28), inset 0 0 0 3px rgba(255,255,255,.68) !important;
  color: #30261d !important;
  font-family: Arial, sans-serif !important;
  animation: daily-popup-open .22s ease-out both;
}

.online-dialog:has(.daily-reference-hero) > .last-trick-header {
  min-height: 62px !important;
  margin: 0 4px 12px !important;
  padding: 4px 70px 12px 4px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(160, 119, 49, .28) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.online-dialog:has(.daily-reference-hero) > .last-trick-header::before {
  display: none !important;
  content: none !important;
}

.online-dialog:has(.daily-reference-hero) > .last-trick-header span {
  color: #3b3026 !important;
  font: 600 12px/1.2 Arial, sans-serif !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

.online-dialog:has(.daily-reference-hero) #onlineTitle {
  margin-top: 1px !important;
  color: #12472b !important;
  font: 800 clamp(28px, 3vw, 40px)/1 Arial, sans-serif !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}

.online-dialog:has(.daily-reference-hero) #closeOnlineButton {
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid #cda34e !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #194f33, #0e3823) !important;
  color: transparent !important;
  box-shadow: 0 4px 10px rgba(15, 50, 31, .2) !important;
}

.online-dialog:has(.daily-reference-hero) #closeOnlineButton::after {
  content: "×" !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #f7dfa0 !important;
  font: 400 30px/1 Arial, sans-serif !important;
}

.online-dialog:has(.daily-reference-hero) #onlineContent {
  max-height: calc(100dvh - 122px) !important;
  padding: 0 4px 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-color: #c9a45a transparent;
}

#onlineContent .daily-reference-hero.daily-hero {
  position: relative !important;
  min-height: 142px !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 20px !important;
  padding: 18px 24px !important;
  overflow: hidden !important;
  border: 1px solid #c79b49 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.08), transparent 36%),
    linear-gradient(145deg, #155437 0%, #0d3f29 62%, #0a3422 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 24px rgba(0,0,0,.1), 0 5px 13px rgba(22, 48, 29, .12) !important;
}

#onlineContent .daily-reference-hero::after {
  right: 22px !important;
  opacity: .065 !important;
  transform: scale(.86) !important;
}

#onlineContent .daily-date-card {
  width: 92px !important;
  min-height: 108px !important;
  border: 1px solid #d2ad62 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fffdf6, #eee0c8) !important;
  box-shadow: 0 5px 11px rgba(0,0,0,.16), inset 0 0 0 2px rgba(255,255,255,.56) !important;
}

#onlineContent .daily-date-card span {
  padding: 7px 5px 5px !important;
  background: #765234 !important;
  color: #fff6dc !important;
  font: 800 10px/1 Arial, sans-serif !important;
}

#onlineContent .daily-date-card strong { color: #36271d !important; font: 800 38px/1 Arial, sans-serif !important; }
#onlineContent .daily-date-card small { color: #49372a !important; font: 700 10px/1 Arial, sans-serif !important; }

#onlineContent .daily-reference-hero .daily-hero-copy > span {
  color: #e4c477 !important;
  font: 700 14px/1.2 Arial, sans-serif !important;
}

#onlineContent .daily-reference-hero .daily-hero-copy h2 {
  margin: 3px 0 8px !important;
  color: #fffaf0 !important;
  font: 800 clamp(25px, 3vw, 35px)/1.05 Arial, sans-serif !important;
  letter-spacing: .015em !important;
}

#onlineContent .daily-reference-hero .daily-hero-copy p {
  max-width: 800px !important;
  margin: 0 !important;
  color: rgba(255,251,241,.92) !important;
  font: 500 13px/1.45 Arial, sans-serif !important;
}

#onlineContent .daily-reference-grid {
  position: relative !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin: 18px 2px 14px !important;
}

#onlineContent .daily-reference-grid .daily-reference-card {
  min-height: 226px !important;
  padding: 33px 22px 18px !important;
  gap: 8px !important;
  overflow: visible !important;
  border: 1px solid rgba(174, 133, 64, .48) !important;
  border-radius: 22px !important;
  background: linear-gradient(155deg, #fffdf7, #f5ead8) !important;
  box-shadow: 0 5px 14px rgba(65, 47, 25, .1), inset 0 0 0 2px rgba(255,255,255,.62) !important;
  color: #35291f !important;
}

#onlineContent .daily-variant-ribbon {
  top: -14px !important;
  left: 50% !important;
  width: min(270px, calc(100% - 52px)) !important;
  min-height: 34px !important;
  padding: 6px 18px !important;
  transform: translateX(-50%) !important;
  border: 1px solid #cba251 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #175a38, #0d4229) !important;
  box-shadow: 0 3px 7px rgba(16, 53, 32, .16) !important;
  color: #efd28b !important;
  font: 800 16px/1 Arial, sans-serif !important;
  letter-spacing: .025em !important;
}

#onlineContent .daily-rotterdam .daily-variant-ribbon {
  background: linear-gradient(180deg, #8f2923, #671813) !important;
}

#onlineContent .daily-reference-card h2 {
  margin: 5px 0 0 !important;
  color: #392c22 !important;
  font: 750 clamp(19px, 2vw, 24px)/1.15 Arial, sans-serif !important;
}

#onlineContent .daily-reference-card p {
  margin: 0 !important;
  color: #68594b !important;
  font: 500 13px/1.35 Arial, sans-serif !important;
}

#onlineContent .daily-card-divider {
  height: 1px !important;
  margin: 4px 0 !important;
  background: linear-gradient(90deg, transparent, rgba(157,119,53,.36), transparent) !important;
}

#onlineContent .daily-attempt-status {
  color: #145234 !important;
  font: 700 13px/1.25 Arial, sans-serif !important;
}

#onlineContent .daily-rotterdam .daily-attempt-status { color: #84251f !important; }

#onlineContent .daily-reference-start {
  width: min(88%, 360px) !important;
  min-height: 52px !important;
  height: 52px !important;
  margin: 4px auto 0 !important;
  padding: 6px 14px !important;
  gap: 10px !important;
  border: 1px solid #d0a452 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #19603b, #0d4429) !important;
  box-shadow: 0 5px 11px rgba(13, 63, 38, .18), inset 0 1px 0 rgba(255,255,255,.11) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

#onlineContent .daily-rotterdam .daily-reference-start {
  background: linear-gradient(180deg, #9a2d26, #701914) !important;
  box-shadow: 0 5px 11px rgba(99, 24, 20, .17), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

#onlineContent .daily-reference-start:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
  box-shadow: 0 7px 14px rgba(31, 53, 34, .2), 0 0 0 2px rgba(215,177,93,.12) !important;
}

#onlineContent .daily-reference-start b {
  color: #fff8e8 !important;
  font: 800 clamp(13px, 1.45vw, 16px)/1.08 Arial, sans-serif !important;
  letter-spacing: .015em !important;
}

#onlineContent .daily-reference-start span { color: #efd28a !important; font-size: 15px !important; }
#onlineContent .daily-reference-start .daily-button-flourish { font-size: 11px !important; opacity: .55 !important; }

#onlineContent .daily-reference-grid::after {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid #caa14e !important;
  background: #17482f !important;
  box-shadow: 0 3px 8px rgba(25, 47, 30, .14) !important;
  color: #e9ca7d !important;
  font-size: 13px !important;
}

#onlineContent .daily-reference-info,
#onlineContent .daily-reference-score {
  min-height: 66px !important;
  margin-top: 10px !important;
  padding: 11px 14px !important;
  gap: 11px !important;
  border: 1px solid rgba(173, 132, 63, .34) !important;
  border-radius: 14px !important;
  background: rgba(255, 250, 240, .76) !important;
  box-shadow: none !important;
  color: #382c22 !important;
}

#onlineContent .daily-info-icon {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid #c9a051 !important;
  background: #17482f !important;
  color: #f2d68e !important;
  box-shadow: 0 2px 5px rgba(24, 56, 34, .13) !important;
  font: 800 16px/1 Arial, sans-serif !important;
}

#onlineContent .daily-reference-info strong,
#onlineContent .daily-reference-score .daily-board-title {
  color: #15482f !important;
  font: 800 14px/1.2 Arial, sans-serif !important;
  letter-spacing: .015em !important;
}

#onlineContent .daily-reference-info p,
#onlineContent .daily-reference-score p {
  margin: 3px 0 0 !important;
  color: #594b3e !important;
  font: 500 12px/1.35 Arial, sans-serif !important;
}

#onlineContent .daily-info-watermark { display: none !important; }
#onlineContent .daily-winner-amsterdam { color: #145234 !important; }
#onlineContent .daily-winner-rotterdam { color: #84251f !important; }

#onlineContent .daily-score-open {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid #c7a055 !important;
  border-radius: 9px !important;
  background: #fffaf0 !important;
  box-shadow: 0 2px 5px rgba(55, 42, 25, .08) !important;
  color: #15482f !important;
  font: 800 11px/1 Arial, sans-serif !important;
  text-transform: uppercase !important;
}

#onlineContent .daily-score-results {
  padding: 10px !important;
  border: 1px solid rgba(173,132,63,.3) !important;
  border-radius: 12px !important;
  background: rgba(255,250,240,.82) !important;
}

@keyframes daily-popup-open {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 760px) {
  .online-dialog:has(.daily-reference-hero) {
    width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  .online-dialog:has(.daily-reference-hero) > .last-trick-header {
    min-height: 50px !important;
    margin-bottom: 9px !important;
    padding: 2px 50px 9px 2px !important;
  }

  .online-dialog:has(.daily-reference-hero) #onlineTitle { font-size: 25px !important; }
  .online-dialog:has(.daily-reference-hero) #closeOnlineButton { top: 11px !important; right: 12px !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; }
  .online-dialog:has(.daily-reference-hero) #onlineContent { max-height: calc(100dvh - 96px) !important; }

  #onlineContent .daily-reference-hero.daily-hero {
    min-height: 122px !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  #onlineContent .daily-date-card { width: 62px !important; min-height: 86px !important; border-radius: 10px !important; }
  #onlineContent .daily-date-card strong { font-size: 29px !important; }
  #onlineContent .daily-reference-hero .daily-hero-copy > span { font-size: 11px !important; }
  #onlineContent .daily-reference-hero .daily-hero-copy h2 { font-size: 21px !important; }
  #onlineContent .daily-reference-hero .daily-hero-copy p { font-size: 10.5px !important; line-height: 1.32 !important; }

  #onlineContent .daily-reference-grid { grid-template-columns: 1fr !important; gap: 28px !important; margin-top: 18px !important; }
  #onlineContent .daily-reference-grid::after { display: none !important; }
  #onlineContent .daily-reference-grid .daily-reference-card { min-height: 204px !important; padding: 31px 15px 14px !important; border-radius: 17px !important; }
  #onlineContent .daily-variant-ribbon { min-height: 32px !important; font-size: 14px !important; }
  #onlineContent .daily-reference-card h2 { font-size: 19px !important; }
  #onlineContent .daily-reference-start { width: min(94%, 340px) !important; height: 48px !important; min-height: 48px !important; }

  #onlineContent .daily-reference-info,
  #onlineContent .daily-reference-score { grid-template-columns: 34px minmax(0, 1fr) !important; padding: 10px !important; }
  #onlineContent .daily-reference-score .daily-score-open { grid-column: 1 / -1 !important; width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .online-dialog:has(.daily-reference-hero),
  #onlineContent .daily-reference-start { animation: none !important; transition: none !important; }
}