/* Bluff — spot-the-lie styles. */

.game-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.head-btns { display: flex; gap: 6px; }

.bf-topic {
  text-align: center; font-weight: 800; letter-spacing: 0.04em;
  color: var(--accent); margin: var(--space-3) 0 var(--space-2);
  text-transform: uppercase; font-size: 0.82rem;
}

.bf-cards { display: grid; gap: 10px; }

/* Each statement is a real button, so it is reachable by keyboard and reads
   its own text as its accessible name. */
.bf-card {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 16px 18px; min-height: 44px; text-align: left;
  font: inherit; line-height: 1.45; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bf-card:hover:not(:disabled) { border-color: var(--accent); }
.bf-card:disabled { cursor: default; }

.bf-no {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--border); color: var(--text-dim);
  font-size: 0.75rem; font-weight: 800;
}

/* After the reveal: the lie is always marked, and a wrong pick is marked too,
   so the player can see BOTH what they chose and what the answer was. */
.bf-card.lie { border-color: #f87171; background: rgba(248, 113, 113, 0.09); }
.bf-card.lie .bf-no { background: #f87171; color: #14161f; }
.bf-card.truth { border-color: var(--good); background: rgba(52, 211, 153, 0.08); }
.bf-card.truth .bf-no { background: var(--good); color: #14161f; }
.bf-card.picked { box-shadow: 0 0 0 2px var(--accent) inset; }

.bf-reveal { margin-top: var(--space-3); }
.bf-verdict { text-align: center; font-weight: 800; margin: 0 0 6px; }
.bf-verdict.good { color: var(--good); }
.bf-verdict.bad { color: #f87171; }
.bf-why {
  margin: 0; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 0.94rem; line-height: 1.55;
}

#btn-next { margin-top: var(--space-3); }

#progress { display: flex; gap: 6px; justify-content: center; margin-top: var(--space-3); }
.bf-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border); }
.bf-dot.now { background: var(--accent); }
.bf-dot.good { background: var(--good); }
.bf-dot.bad { background: #f87171; }

.endgame { margin-top: var(--space-3); }
.end-emoji { font-size: 3rem; }
#end-grid { font-size: 1.3rem; letter-spacing: 2px; white-space: pre-line; line-height: 1.7; }