/* Telepathy — 8-question prediction game styles. */

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

.tp-banner {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 700; text-align: left;
  padding: 10px 14px; margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.tp-banner-emoji { font-size: 1.1rem; line-height: 1; flex: none; }

.tp-locale-note {
  font-size: 0.82rem; font-weight: 650; text-align: center;
  padding: 8px 12px; margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--border);
}

.tp-progress-wrap { margin-bottom: var(--space-3); }
#tp-progress-label { text-align: right; }

/* ---- Questions ---- */
.tp-questions { display: flex; flex-direction: column; gap: 10px; }
.tp-q {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 13px 13px;
}
.tp-q.locked { opacity: 0.92; }
.tp-q-text { margin: 0 0 9px; font-weight: 700; font-size: 0.95rem; line-height: 1.35; }

.tp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tp-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  font: 600 0.85rem/1.25 var(--font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease), border-color 120ms var(--ease), box-shadow 120ms var(--ease), background 120ms var(--ease);
}
.tp-opt:active { transform: scale(0.97); }
.tp-opt.sel {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), var(--glow);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.tp-opt:disabled { cursor: default; }
.tp-opt:disabled:not(.sel) { opacity: 0.55; }

/* ---- Endgame / results ---- */
.endgame { margin-top: var(--space-4); }
.end-emoji { font-size: 3rem; }

.tp-results { margin: var(--space-3) 0; display: flex; flex-direction: column; gap: 6px; }
.tp-result-row {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.86rem;
}
.tp-result-row.ok { border-color: color-mix(in srgb, var(--good) 40%, var(--border)); }
.tp-result-row.miss { border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); }
.tp-result-mark { flex: 0 0 auto; font-weight: 800; }
.tp-result-row.ok .tp-result-mark { color: var(--good); }
.tp-result-row.miss .tp-result-mark { color: var(--bad); }
.tp-result-text { flex: 1; line-height: 1.4; }

/* ---- Small screens: keep 8 questions × 4 options tappable, not cramped ---- */
@media (max-width: 420px) {
  .tp-q { padding: 11px 11px 12px; }
  .tp-q-text { font-size: 0.9rem; margin-bottom: 8px; }
  .tp-opt { padding: 9px 10px; font-size: 0.8rem; min-height: 42px; }
}

@media (max-width: 340px) {
  .tp-opts { grid-template-columns: 1fr; }
}