/* TEAMS — shared-screen, turn-based classroom play. Big touch targets, a
   persistent scoreboard and a single question card in the center. */
.teams-arena { display: flex; flex-direction: column; height: calc(100vh - 70px); min-height: 480px; }

/* Scoreboard strip */
.teams-scoreboard { display: flex; gap: .6rem; padding: .6rem .9rem; flex-wrap: wrap; justify-content: center; }
.teams-chip {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .9rem; border-radius: 999px; font-weight: 700;
  opacity: .65; transition: opacity .2s, transform .2s, box-shadow .2s;
}
.teams-chip.is-turn { opacity: 1; transform: scale(1.06); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.teams-chip-name { font-size: 1rem; }
.teams-chip-score { font-size: 1.4rem; font-variant-numeric: tabular-nums; }

/* Center stage */
.teams-stage { flex: 1; display: flex; flex-direction: column; padding: .5rem 1rem 1.2rem; min-height: 0; }
.teams-turn { text-align: center; margin-bottom: .6rem; }
.teams-card {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  overflow: auto; max-width: 900px; width: 100%; margin: 0 auto;
}
.teams-q { font-size: clamp(1.3rem, 3vw, 2.2rem); font-weight: 700; text-align: center; margin-bottom: 1.2rem; }
.teams-opts { max-width: 760px; margin: 0 auto; width: 100%; }
.teams-opt.teams-picked { outline: 4px solid #ffc107; outline-offset: -2px; }
.teams-answer { text-align: center; font-size: 1.2rem; margin-top: 1rem; }
.teams-hint { text-align: center; margin-top: 1rem; color: #6c757d; }
.teams-hint summary { cursor: pointer; }

/* Host controls */
.teams-controls { display: flex; gap: .8rem; justify-content: center; padding-top: 1rem; flex-wrap: wrap; }
.teams-controls .btn { min-width: 180px; }

/* Memory board */
.mem-grid { display: grid; gap: .6rem; max-width: 900px; margin: 0 auto; width: 100%; }
.mem-card {
  aspect-ratio: 3/2; border: 2px solid #dee2e6; border-radius: .6rem;
  background: #f1f3f5; cursor: pointer; font-size: clamp(.9rem, 1.8vw, 1.4rem);
  font-weight: 600; display: flex; align-items: center; justify-content: center;
  padding: .3rem; transition: transform .15s, background .2s, border-color .2s;
}
.mem-card:hover:not(:disabled) { transform: translateY(-2px); border-color: #0d6efd; }
.mem-card.is-flipped { background: #cfe2ff; border-color: #0d6efd; }
.mem-card.is-matched { background: #d1e7dd; border-color: #198754; opacity: .85; cursor: default; }
.mem-card .mem-face { word-break: break-word; text-align: center; }

/* End */
.teams-podium { margin: auto; }
.teams-ranking { max-width: 340px; margin: 1rem auto 0; }
.teams-rank-row { padding: .4rem .8rem; border-bottom: 1px solid #eee; font-size: 1.1rem; }