/* Grid-only reveal overlays for 9-grid */

.cards.grid9 .card { position: relative; }

/* Ground-truth badge (top-right): AI vs REAL */
.cards.grid9 .card .frame.revealed::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  padding: 4px 8px;
  font: 700 11px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.25);
  color: #fff;
  letter-spacing: .4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.cards.grid9 .card.is-ai .frame.revealed::after {
  content: "AI";
  background: linear-gradient(180deg,#1ec48a,#18a56f);
}
.cards.grid9 .card:not(.is-ai) .frame.revealed::after {
  content: "REAL";
  background: linear-gradient(180deg,#718096,#4a5568);
}

/* Outcome chip (bottom-left): ✓ correct, ✕ wrong */
.cards.grid9 .card .frame.revealed::before {
  content: "";
  position: absolute;
  left: 8px; bottom: 8px;
  padding: 4px 8px;
  font: 800 12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  color: #fff;
}

/* Truth table:
   AI + selected   => correct ✓
   AI + not sel    => missed  ✕
   REAL + selected => wrong   ✕
   REAL + not sel  => correct ✓
*/
.cards.grid9 .card.is-ai.is-selected .frame.revealed::before { content: "✓"; background: #1ec48a; }
.cards.grid9 .card.is-ai:not(.is-selected) .frame.revealed::before { content: "✕"; background: #ff5c5c; }

.cards.grid9 .card:not(.is-ai).is-selected .frame.revealed::before { content: "✕"; background: #ff5c5c; }
.cards.grid9 .card:not(.is-ai):not(.is-selected) .frame.revealed::before { content: "✓"; background: #1ec48a; }

/* Optional: faint dim on reveal so badges pop a bit */
.cards.grid9 .card .frame.revealed img { filter: saturate(0.95) brightness(0.96); }