/* 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; }
/* ESTÁNDAR (igual que VS): la tarjeta es un CONTENEDOR de tamaño definido y todo
   su contenido es border-box, para que la actividad embebida se mida contra la
   tarjeta (cqmin) y SIEMPRE quepa — no contra el viewport. */
.teams-card {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; max-width: 900px; width: 100%; margin: 0 auto; min-height: 0;
  box-sizing: border-box; container-type: size;
}
.teams-card, .teams-card * { box-sizing: border-box; }
.teams-q { font-size: clamp(1.1rem, 6cqmin, 2.2rem); font-weight: 700; text-align: center; margin-bottom: .8rem; flex: 0 0 auto; }

/* Teclado (Operaciones) en Teams: la ESTRUCTURA (llenar la tarjeta y repartir las
   filas para caber en cualquier altura) vive UNA vez en styles/scaffold.css; aquí
   solo los TAMAÑOS, en cqmin, que es la medida de la tarjeta. */
/* EL VALOR DEL MODO ES EL FALLBACK DEL TOKEN (igual que en styles/vs.css).
   Estas reglas (0,2,0) ganan a las de la plantilla (0,1,0), así que sin
   consumir el token el tema no podía cambiarlas más que escribiendo su propio
   selector sobre la anatomía — la invasión que la migración retira. */
/* UN SOLO TAMAÑO PARA EL MODO: aquí había tres fórmulas (enunciado 7cqmin, visor
   6cqmin, tecla 5cqmin) para tres textos que en una calculadora miden lo mismo —
   y otras tres en VS y otras tres en la plantilla. El modo dice cuánto vale UNA
   CIFRA en una tarjeta de equipo y el resto sale de ahí (`--math-cifra`, en
   styles/math.css). El techo en `rem` se retira por la misma razón que en los
   otros dos modos: no escala en una pizarra grande. */
.teams-card .ww-keypad-round   { gap: var(--math-gap, 2cqmin); --math-cifra: max(.9rem, 7cqmin); }
.teams-card .ww-keypad         { gap: var(--key-gap, 2cqmin); }
/* Opciones (Quiz) y texto (Tildes/Comas) por cqmin */
.teams-card .ww-opt-grid .btn,
.teams-card .ww-opt        { font-size: clamp(.8rem, 4cqmin, 1.3rem); }
.teams-card .tc-passage    { font-size: clamp(1rem, 5cqmin, 1.8rem); }
/* La ronda que pinta la PLANTILLA (renderRound) entra en la CADENA DE FLEX de
   la tarjeta. Sin esto, una ronda de TABLERO que se mide contra la altura de su
   contenedor (la Sopa: `.ww-ws { height:100% }` + rejilla en cqb) colapsaba a
   una rejilla de 4px injugable — era la capa REAL de la deuda "Equipos+Sopa:
   el hallazgo se pierde" (el arrastre nunca llegaba a las celdas). Las rondas
   de contenido natural (opciones, teclado) no se estiran: solo la Sopa declara
   height:100%. */
#teams-round { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
#teams-round > .ww-ws-round { flex: 1 1 auto; min-height: 0; }

.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; }