/**
 * Noggle Correct Answer Indicators Styling
 * Visual indicators that show which cells contain correct answers after scoring
 */

/* Correct answer indicator - green circle with checkmark */
/* Use ::before instead of ::after to avoid conflict with player's marks (which use ::after) */
td[data-is-correct="true"]::before {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background-color: #2ecc71;  /* Bright green */
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;  /* Don't interfere with cell clicks */
  opacity: 0;  /* Hidden by default */
  z-index: 10;  /* Above cell content */
  transition: opacity 150ms ease-out; /* Smooth fade when hiding */
}

/* When NOT showing indicators, ensure they're hidden (overrides animation forwards) */
table:not(.show-correct-indicators) td[data-is-correct="true"]::before {
  opacity: 0 !important;
}

/* When showing indicators, clear most cell backgrounds for clean view */
/* But preserve red background for wrong choices */
table.show-correct-indicators td:not(.state-check) {
  background-color: var(--surface) !important;
}

table.show-correct-indicators td.state-check[data-is-correct="true"] {
  background-color: var(--surface) !important;
}

/* Wrong choices keep their red background from scoring */

/* Show elimination X marks but make them subtle/less prominent */
table.show-correct-indicators td.state-cross:not(.state-check)::after,
table.show-correct-indicators td.state-soft-cross:not(.state-check)::after {
  opacity: 0.3 !important;
  font-weight: 300 !important;
}

/* Show user's incorrect choices - just make them visible, don't override colors */
table.show-correct-indicators td.state-check:not([data-is-correct="true"])::after {
  display: block !important;
  /* Let checkmark use its natural color from base styles */
}

/* User's correct choices - checkmark is covered by green circle, so hide it to avoid overlap */
table.show-correct-indicators td.state-check[data-is-correct="true"]::after {
  display: none !important;
}

/* Show indicators when table has the class */
table.show-correct-indicators td[data-is-correct="true"]::before {
  opacity: 1;  /* Simply show them, no animation */
}

/* Dark mode overrides for Show Answers view */
[data-theme="dark"] table.show-correct-indicators td {
  background-color: var(--surface) !important;  /* Use theme surface color */
}

/* Mobile adjustments */
@media (max-width: 550px) {
  td[data-is-correct="true"]::before {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
}