/* TinyFingers skin for the native Ezoic CMP. The provider retains the legal
   content, controls, vendor lists and consent behaviour. No purpose is hidden.
   Selectors follow Ezoic's published customization contract and v2 markup. */
body #ez-cookie-dialog-wrapper {
  --ez-bg: var(--tf-surface, #111d27);
  --ez-text: var(--tf-text, #f5e7d6);
  --ez-body-color: var(--tf-muted, #b7c3c9);
  --ez-accent: var(--tf-accent, #ffb64f);
  --ez-border: var(--tf-border, #30414d);
  --ez-font: var(--tf-font, 'Avenir Next', ui-rounded, 'Trebuchet MS', sans-serif);
  --ez-radius: var(--tf-radius-round, 999px);
  --ez-btn-text: var(--tf-on-accent, #17212a);
  --ez-btn-muted: var(--tf-control-border, #647987);
  color-scheme: var(--tf-color-scheme, dark);
  background: var(--tf-backdrop, rgb(2 8 14 / 72%)) !important;
  background: color-mix(in srgb, var(--tf-backdrop, rgb(2 8 14 / 72%)) 65%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--ez-font) !important;
}

:root[data-tf-appearance="light"] body #ez-cookie-dialog-wrapper {
  --ez-bg: var(--tf-bg, #fbf8f1);
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner {
  box-sizing: border-box !important;
  flex-direction: column !important;
  position: fixed !important;
  inset: auto 0 0 !important;
  width: 100% !important;
  max-width: none !important;
  max-height: calc(100vh - 20px) !important;
  max-height: calc(100dvh - 20px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 2px solid var(--tf-accent-border, #ffb64f) !important;
  border-radius: 0 !important;
  background: var(--ez-bg) !important;
  color: var(--tf-text, #f5e7d6) !important;
  box-shadow: var(--tf-shadow, 0 16px 48px rgb(2 8 14 / 24%)) !important;
  overflow: hidden !important;
  text-align: start !important;
  line-height: var(--tf-leading, 1.65) !important;
}

/* Layout must not reopen a dialog the provider has already closed. */
#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner:not([hidden]):not([aria-hidden="true"]):not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
}

body #ez-cookie-dialog-wrapper:is([hidden], [aria-hidden="true"], [style*="display: none"], [style*="display:none"]),
#ez-cookie-dialog-wrapper #ez-cookie-dialog:is([hidden], [aria-hidden="true"], [style*="display: none"], [style*="display:none"]) {
  display: none !important;
  pointer-events: none !important;
}

/* Legal copy may scroll on a short viewport; the three first-layer choices
   remain outside that scrolling region. The full text stays accessible. */
#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-cookie-form,
#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner .ez-cmp-visible-content-wrapper {
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: min(1200px, 100%) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px 32px 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-color: var(--tf-control-border, #647987) var(--ez-bg);
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner .ez-cmp-visible-content-wrapper {
  max-height: none !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-cmp-title {
  margin: 0 0 14px !important;
  color: var(--tf-text, #f5e7d6) !important;
  font: var(--tf-weight-medium, 600) 19px / 1.4 var(--ez-font) !important;
  letter-spacing: -.02em !important;
  text-align: start !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-cmp-title::before {
  content: 'TinyFingers ✧';
  display: inline-block;
  margin-inline-end: 24px;
  color: var(--tf-text, #f5e7d6);
  font-size: 21px;
  font-weight: var(--tf-weight-bold, 700);
  letter-spacing: -.045em;
  white-space: nowrap;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog :is(p, li, label, .ez-cmp-description, .ez-cmp-header-name, #ez-cookie-details-description) {
  color: var(--tf-muted, #b7c3c9) !important;
  font-family: var(--ez-font) !important;
  line-height: 1.65 !important;
  text-align: start !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #main-ezcmp p {
  margin: 0 0 10px !important;
  font-size: 14px !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog :is(h2, h3, h4, h5, h6) {
  color: var(--tf-text, #f5e7d6) !important;
  font-family: var(--ez-font) !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner .ez-btn-row-container,
#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #secondary-links {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: min(1200px, 100%) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 10px 32px 0 !important;
  border: 0 !important;
  background: var(--ez-bg) !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #button-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner .ez-btn-group-left {
  display: contents !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #button-row button {
  box-sizing: border-box !important;
  min-width: 180px !important;
  min-height: 46px !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 11px 20px !important;
  border-radius: var(--tf-radius-round, 999px) !important;
  font: var(--tf-weight-medium, 600) 14px / 1.45 var(--ez-font) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  cursor: pointer !important;
  touch-action: manipulation;
  transition: background-color var(--tf-motion, 160ms) var(--tf-ease, ease), border-color var(--tf-motion, 160ms) var(--tf-ease, ease) !important;
}

/* Either native refusal control can be configured by Ezoic. Style both without
   overriding their display/hidden state or replacing their native action. */
#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner :is(#ez-accept-all, #ez-reject-all, #ez-accept-necessary, #ez-save-settings) {
  border: 1px solid var(--tf-accent, #ffb64f) !important;
  background: var(--tf-accent, #ffb64f) !important;
  color: var(--tf-on-accent, #17212a) !important;
  opacity: 1 !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-manage-settings {
  margin-inline-end: auto !important;
  border: 1px solid var(--tf-control-border, #647987) !important;
  background: transparent !important;
  color: var(--tf-text, #f5e7d6) !important;
  opacity: 1 !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog a {
  color: var(--tf-link, #a9d9ee) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #secondary-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 24px !important;
  padding-block: 4px max(12px, env(safe-area-inset-bottom, 0px)) !important;
  font-size: 12px !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #secondary-links a {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
  padding: 0 !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog :is(button, a, input, select, summary):focus-visible {
  outline: var(--tf-focus-ring, 3px solid #a9d9ee) !important;
  outline-offset: 3px !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog :is(input, select) {
  accent-color: var(--tf-accent, #ffb64f);
  color-scheme: var(--tf-color-scheme, dark);
  color: var(--tf-text, #f5e7d6) !important;
  border-color: var(--tf-control-border, #647987) !important;
}

#ez-cookie-dialog-wrapper #ez-cookie-dialog :is(.ez-cmp-header-row, .ez-cmp-description) {
  border-color: var(--tf-border, #30414d) !important;
  border-radius: var(--tf-radius, 12px) !important;
  background: var(--ez-bg) !important;
}

body #ezPrivacyCenter {
  background: var(--tf-surface, #111d27) !important;
  color: var(--tf-link, #a9d9ee) !important;
  border: 1px solid var(--tf-control-border, #647987) !important;
  font-family: var(--tf-font, sans-serif) !important;
}

/* A single footer entry reopens the unchanged CMP. Hide the native floating
   launcher only after our guarded, accessible replacement has been mounted. */
body.tf-privacy-footer-ready #ezPrivacyCenter {
  display: none !important;
}

body #tf-privacy-controls {
  position: static;
  grid-column: 1 / -1;
  padding: 12px 16px;
  text-align: center;
}

body #tf-privacy-settings {
  box-sizing: border-box;
  position: static;
  min-height: var(--tf-control-height, 44px);
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tf-link, #a9d9ee);
  font: var(--tf-weight-medium, 600) 12px / 1.4 var(--tf-font, sans-serif);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
}

body #tf-privacy-settings:focus-visible {
  outline: var(--tf-focus-ring, 3px solid #a9d9ee);
  outline-offset: 3px;
}

body #tf-privacy-status {
  box-sizing: border-box;
  position: static;
  width: min(480px, 100%);
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid var(--tf-border, #30414d);
  border-radius: var(--tf-radius, 12px);
  background: var(--tf-surface, #111d27);
  color: var(--tf-text, #f5e7d6);
  font: 13px / 1.6 var(--tf-font, sans-serif);
  overflow-y: auto;
  overflow-wrap: anywhere;
}

body #tf-privacy-settings[hidden],
body #tf-privacy-status[hidden] {
  display: none !important;
}

/* The game lifecycle also guards the provider API: this is visual defence only,
   never a substitute for suppressing late CMP requests while a game is active. */
body.tf-game-active #ez-cookie-dialog-wrapper,
body.tf-game-active #ez-cookie-loader-wrapper,
body.tf-game-active #ezPrivacyCenter,
body.tf-game-active #tf-privacy-controls,
body.tf-game-active #tf-privacy-settings,
body.tf-game-active #tf-privacy-status {
  display: none !important;
  pointer-events: none !important;
}

@media (hover: hover) {
  body #tf-privacy-settings:hover {
    color: var(--tf-text, #f5e7d6);
    background: transparent;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner :is(#ez-accept-all, #ez-reject-all, #ez-accept-necessary, #ez-save-settings):hover {
    background: var(--tf-accent-hover, #ffc773) !important;
    border-color: var(--tf-accent-hover, #ffc773) !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-manage-settings:hover {
    background: var(--tf-surface-raised, #192833) !important;
    color: var(--tf-text, #f5e7d6) !important;
  }
}

@media (max-width: 620px) {
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner {
    border-radius: var(--tf-radius-lg, 20px) var(--tf-radius-lg, 20px) 0 0 !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-cookie-form,
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner .ez-cmp-visible-content-wrapper {
    padding: 22px 20px 0 !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-cmp-title {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-cmp-title::before {
    display: block;
    margin: 0 0 10px;
    font-size: 20px;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #main-ezcmp p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner .ez-btn-row-container {
    padding: 8px 20px 0 !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #button-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #button-row button {
    min-width: 0 !important;
    width: 100% !important;
    padding-inline: 10px !important;
    font-size: 13px !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner :is(#ez-reject-all, #ez-accept-necessary) {
    order: 1 !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-accept-all {
    order: 2 !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-manage-settings {
    order: 3 !important;
    grid-column: 1 / -1 !important;
    margin-inline-end: 0 !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-save-settings {
    grid-column: 1 / -1 !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #secondary-links {
    justify-content: center !important;
    gap: 4px 18px !important;
    padding-inline: 20px !important;
  }
}

@media (max-width: 350px) {
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #ez-cookie-form,
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner .ez-cmp-visible-content-wrapper,
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner .ez-btn-row-container,
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #secondary-links {
    padding-inline: 16px !important;
  }
  #ez-cookie-dialog-wrapper #ez-cookie-dialog.ez_banner #button-row button {
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ez-cookie-dialog-wrapper *,
  #ez-cookie-loader-wrapper * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  #ez-cookie-dialog-wrapper #ez-cookie-dialog button {
    border: 1px solid ButtonText !important;
  }
}

@media print {
  #tf-privacy-settings,
  #tf-privacy-status {
    display: none !important;
  }
}

/* Present only in the separate, loopback-only QA fixture; never a CMP claim. */
#ez-cookie-dialog-wrapper #ez-cookie-dialog .tf-cmp-fixture-note {
  font-size: 11px !important;
  color: var(--tf-accent-text, #ffb64f) !important;
}
#ez-cookie-dialog-wrapper #ez-cookie-dialog .tf-cmp-fixture-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}
