/**
 * TelccFree — Modern flat score badge styling (no white ring borders).
 */

/* Anti-flicker: hide disks until JS hydration applies Teil 2 tier state */
html:not(.telc-scores-ready) .score-dot:not(.score-static),
html:not(.telc-scores-ready) .user-score-badge:not(.score-static) {
  visibility: hidden !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: transparent !important;
}

html.telc-scores-ready .score-dot,
html.telc-scores-ready .user-score-badge {
  visibility: visible;
}

.score-dot.is-unattempted,
.score-dot.user-score-badge.is-unattempted,
.ex-btn .score-dot.is-unattempted {
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.03) !important;
  border: 1px dashed rgba(0, 0, 0, 0.2) !important;
  color: rgba(0, 0, 0, 0.28) !important;
  box-shadow: none !important;
  outline: none !important;
}

html.dark .score-dot.is-unattempted {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

.score-dot.has-score,
.score-dot.user-score-badge.has-score,
.score-badge,
.ex-btn .score-dot.has-score,
a.ex-btn .score-dot.has-score,
div.ex-btn .score-dot.has-score {
  opacity: 1 !important;
  border: none !important;
  outline: none !important;
  color: #fff !important;
  background-image: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  font-weight: 800 !important;
  isolation: isolate !important;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease !important;
}

/*
 * Opaque fallback ONLY when no tier class is present.
 * NEVER apply red to master badges that already have score-green/blue/gold —
 * that caused "5/5 RED" while classList correctly said score-green.
 */
.ex-btn .score-dot.has-score:not(.score-green):not(.score-blue):not(.score-gold):not(.score-yellow):not(.telc-gold-crown-badge),
a.ex-btn .score-dot.has-score:not(.score-green):not(.score-blue):not(.score-gold):not(.score-yellow):not(.telc-gold-crown-badge),
div.ex-btn .score-dot.has-score:not(.score-green):not(.score-blue):not(.score-gold):not(.score-yellow):not(.telc-gold-crown-badge),
.ex-btn .score-dot.master-score-badge.has-score:not(.score-green):not(.score-blue):not(.score-gold):not(.score-yellow):not(.telc-gold-crown-badge) {
  background-color: var(--telc-tile-red, #e53935) !important;
}

.score-dot.has-score.score-red,
.score-badge.score-red,
.ex-btn .score-dot.has-score.score-red,
.ex-btn .score-dot.master-score-badge.has-score.score-red {
  background: var(--telc-tile-red, #e53935) !important;
  background-color: var(--telc-tile-red, #e53935) !important;
}

.score-dot.has-score.score-green,
.score-badge.score-green,
.ex-btn .score-dot.has-score.score-green,
.ex-btn .score-dot.master-score-badge.has-score.score-green {
  background: var(--telc-tile-green, #2e7d32) !important;
  background-color: var(--telc-tile-green, #2e7d32) !important;
}

.score-dot.has-score.score-blue,
.score-badge.score-blue,
.ex-btn .score-dot.has-score.score-blue,
.ex-btn .score-dot.master-score-badge.has-score.score-blue {
  background: var(--telc-tile-blue-tier, #1976d2) !important;
  background-color: var(--telc-tile-blue-tier, #1976d2) !important;
}

.score-dot.has-score.score-gold:not(.telc-gold-crown-badge),
.score-badge.score-gold:not(.telc-gold-crown-badge),
.ex-btn .score-dot.has-score.score-gold:not(.telc-gold-crown-badge),
.ex-btn .score-dot.master-score-badge.has-score.score-gold:not(.telc-gold-crown-badge) {
  background: var(--telc-tile-gold, #f9a825) !important;
  background-color: var(--telc-tile-gold, #f9a825) !important;
}

.score-dot.has-score:hover,
.score-badge:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.modal-circle-big {
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.version-picker-option-badge.has-score {
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html.dark .score-dot.has-score,
html.dark .score-badge {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}