/**
 * TelccFree — Single master score badge + border micro-dots for multi-part cards.
 */

/* Hide legacy multi-circle row inside version-picker cards */
.ex-btn.ex-version-picker-trigger .ex-static-scores,
.ex-btn.ex-version-picker-trigger .score-more-indicator {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.ex-btn.ex-version-picker-trigger {
  overflow: visible !important;
}

/* Single master badge — same size as standard score dots; always full opacity when scored */
.ex-btn.ex-version-picker-trigger > .score-dot.master-score-badge {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  visibility: visible !important;
}

.ex-btn.ex-version-picker-trigger > .score-dot.master-score-badge.has-score {
  opacity: 1 !important;
}

.ex-btn.ex-version-picker-trigger > .score-dot.master-score-badge.is-unattempted,
.ex-btn.ex-version-picker-trigger > .score-dot.master-score-badge.is-unplayed {
  display: flex !important;
}

/* Frame-embedded sub-task micro-dots (on top border) */
.ex-subtask-frame-dots {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
  z-index: 15;
  padding: 0 4px;
}

.ex-subtask-micro-dot {
  width: 5px;
  height: 5px;
  min-width: 5px;
  min-height: 5px;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: background-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.ex-subtask-micro-dot.is-dim {
  background-color: #888 !important;
  border: none !important;
  opacity: 0.25 !important;
  box-shadow: none !important;
}

.ex-subtask-micro-dot.is-pass.is-green,
.ex-subtask-micro-dot.is-green {
  background-color: #2e7d32 !important;
  border: 1px solid #2e7d32 !important;
  opacity: 1 !important;
  box-shadow: 0 0 4px rgba(46, 125, 50, 0.65) !important;
}

.ex-subtask-micro-dot.is-pass.is-blue,
.ex-subtask-micro-dot.is-blue {
  background-color: #1976d2 !important;
  border: 1px solid #1976d2 !important;
  opacity: 1 !important;
  box-shadow: 0 0 4px rgba(25, 118, 210, 0.65) !important;
}

.ex-subtask-micro-dot.is-pass.is-red,
.ex-subtask-micro-dot.is-red {
  background-color: #e53935 !important;
  border: 1px solid #e53935 !important;
  opacity: 1 !important;
  box-shadow: 0 0 4px rgba(229, 57, 53, 0.65) !important;
}

.ex-subtask-micro-dot.is-pass.is-gold,
.ex-subtask-micro-dot.is-gold {
  background-color: #f9a825 !important;
  border: 1px solid #f9a825 !important;
  opacity: 1 !important;
  box-shadow: 0 0 4px rgba(249, 168, 37, 0.7) !important;
}

html.dark .ex-subtask-micro-dot.is-pass.is-red,
html.dark .ex-subtask-micro-dot.is-red {
  background-color: #ef5350 !important;
  border-color: #e57373 !important;
  box-shadow: 0 0 5px rgba(239, 83, 80, 0.75) !important;
}

.ex-subtask-micro-dot.is-pass:not(.is-blue):not(.is-gold):not(.is-red) {
  background-color: #2e7d32 !important;
  border: 1px solid #2e7d32 !important;
  opacity: 1 !important;
  box-shadow: 0 0 4px rgba(46, 125, 50, 0.65) !important;
}

html.dark .ex-subtask-micro-dot.is-dim {
  background-color: #888 !important;
  border: none !important;
  opacity: 0.25 !important;
}

html.dark .ex-subtask-micro-dot.is-pass.is-green,
html.dark .ex-subtask-micro-dot.is-green {
  background-color: #43a047 !important;
  border-color: #66bb6a !important;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.75) !important;
}

html.dark .ex-subtask-micro-dot.is-pass.is-blue,
html.dark .ex-subtask-micro-dot.is-blue {
  background-color: #42a5f5 !important;
  border-color: #64b5f6 !important;
  box-shadow: 0 0 5px rgba(66, 165, 245, 0.75) !important;
}

html.dark .ex-subtask-micro-dot.is-pass.is-gold,
html.dark .ex-subtask-micro-dot.is-gold {
  background-color: #ffca28 !important;
  border-color: #ffd54f !important;
  box-shadow: 0 0 5px rgba(255, 202, 40, 0.75) !important;
}