/* ==== IQ-MODE STYLING ==== */
#face-front {
  /* no scroll or dragging on the face while guessing IQ */
  overflow: hidden !important;
  touch-action: none !important;
}
/* Disabled “Next” button styling */
#confirm-guess.disabled {
  background-color: #000;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}

/* When in IQ mode, make any full-info container transparent */
body.iq-mode .full-info {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/*
 * IQ column uses class .full-info; override global .full-info (Poopins, justify, line-height 1.6) so it matches
 * the summary column: same Poppins stack as body / #result-content (bold 12px, #333).
 */
body.iq-mode .result-pane--description #iq-guess-block.full-info,
body.game-view #result-popup #iq-guess-block.full-info {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  color: #333;
  white-space: normal;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* When the pane is taller than this block, keep the stack at the top (avoid implicit vertical centering) */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 0;
}

/* IQ block container — tight layout like the map column; no extra chrome padding */
#iq-guess-block {
  position: relative;
  border-radius: 8px;
  padding: 0;
  margin-top: 0;
  color: inherit;
}

/* Same vertical rhythm as .result-summary-inner: title → (stat + “face row”) → calc lines */
#iq-guess-block .iq-summary-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  text-align: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.35rem 0.25rem 0 0.25rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Stat + IQ bar share one .result-summary-media grid (like stat + face images on the right) */
#iq-guess-block .result-summary-media {
  width: max-content;
  max-width: 100%;
}

/* Exact bar bounds: labels are positioned inside this box (not half outside the track) */
#iq-guess-block .iq-slider-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

body.iq-mode #iq-guess-block .result-summary-media .result-stat {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: #ffffff;
  font-weight: 700;
}

/* Same rhythm as calc + meta under the face row (inherits result card body text) */
#iq-guess-block .iq-calc-lines {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  font-family: inherit;
  font-weight: bold;
  font-size: 12px;
  color: inherit;
  line-height: 1.25;
  letter-spacing: normal;
}

#iq-guess-block .iq-calc-lines > div {
  margin: 0;
}

/*
 * IQ bar occupies the same vertical slot as the face row (.result-image max-height: 120px).
 */
#iq-guess-block input[type="range"] {
  --percent: 50%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  height: 100%;
  min-height: 120px;
  border-radius: 8px;
  background: linear-gradient(to right,
      var(--theme-gold-base) 0%,
      var(--theme-gold-base) var(--percent),
      #444 var(--percent),
      #444 100%);
  outline: none;
  cursor: ew-resize;
  transition: background 0.1s ease;
  animation: pulse-gold 1.2s infinite ease-in-out;
}

#iq-guess-block input[type="range"]::-webkit-slider-runnable-track,
#iq-guess-block input[type="range"]::-moz-range-track {
  height: 120px;
  border-radius: 8px;
}

/* Remove any focus outline around the slider itself */
#iq-guess-block input[type="range"]:focus {
  outline: none;
}


/* ─── 1) Prevent any browser accent from drawing a knob ─── */
#iq-guess-block input[type="range"] {
  accent-color: transparent !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* ─── 2) Make every engine’s “track” show your JS-driven background ─── */
/* WebKit */
#iq-guess-block input[type="range"]::-webkit-slider-runnable-track {
  background: inherit !important;
}

/* Firefox */
#iq-guess-block input[type="range"]::-moz-range-track {
  background: inherit !important;
}

/* IE/Edge Legacy */
#iq-guess-block input[type="range"]::-ms-fill-lower,
#iq-guess-block input[type="range"]::-ms-fill-upper {
  background: inherit !important;
}

/* ─── 3) Obliterate every native thumb ─── */
/* Chrome/Safari/Edge Chromium (double- and single-colon) */
#iq-guess-block input[type="range"]::-webkit-slider-thumb,
#iq-guess-block input[type="range"]:-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/* Firefox */
#iq-guess-block input[type="range"]::-moz-range-thumb {
  -moz-appearance: none !important;
  appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/* IE/Edge Legacy */
#iq-guess-block input[type="range"]::-ms-thumb {
  appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  margin: 0 !important;
}
/* Also suppress any focus ring color on WebKit */
#iq-guess-block input[type="range"]::-webkit-focus-ring-color {
  display: none;
}

/* Disabled slider styling */
#iq-guess-block input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
    animation: pulse-gold 0s infinite ease-in-out;
}

/* Floating labels — same font as rest of result UI; inset inside the bar */
#iq-guess-block .iq-slider-wrap .iq-thumb-label,
#iq-guess-block .iq-slider-wrap .iq-actual-label {
  position: absolute;
  left: 0;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: var(--theme-gold-base);
  padding: 3px 6px;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  pointer-events: none;
  max-width: calc(100% - 8px);
  box-sizing: border-box;
}

#iq-guess-block .iq-slider-wrap .iq-thumb-label {
  top: 8px;
  bottom: auto;
}

#iq-guess-block .iq-slider-wrap .iq-actual-label {
  top: auto;
  bottom: 8px;
  background: var(--theme-red-deep);
  display: none;
}


/* completely disable any pointer interaction (incl. wheel) on the face in IQ‐mode */

body.iq-mode #result-popup {
  overflow-y: hidden;
}