/* Trotamundos (juegos/trotamundos/tv.js). La foto tapa el mapa mientras se juega; al revelar
   se funde (opacity) y queda el mapa, que no se mueve. Nada cambia en cada fotograma.
   Sin box-shadow (Bravia). 1rem = 32 px a 1080p. */
.tm { background: #10131A; color: #fff; }
.tm p { margin: 0; }

/* Mapa (Leaflet): mar azul claro, países en mundo.js */
.tm-mapa { position: absolute; inset: 0; background: #A9D3E8; z-index: 0; } /* encierra las capas de Leaflet (z-index 400…) */
.tm-mapa.leaflet-container { background: #A9D3E8; font: inherit; }

/* Foto a pantalla completa */
.tm-foto { position: absolute; inset: 0; z-index: 1; box-sizing: border-box; padding: 8rem 2rem 1.5rem; background: #10131A; transition: opacity 400ms ease; } /* arriba queda la franja del cartel */
.tm-foto__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tm-revela .tm-foto { opacity: 0; }

/* Cartel: en la franja de arriba (no tapa la foto); al revelar, en fila con la foto pequeña */
.tm-cartel {
  position: absolute; left: 2rem; top: 1.5rem; max-width: 60%; box-sizing: border-box;
  padding: 1rem 1.5rem; border-radius: 1.25rem; background: #fff; color: var(--tg-ink);
  display: flex; flex-direction: column; gap: .25rem; z-index: 500;
}
.tm-cartel__ante { font-size: 1.125rem; color: var(--tg-muted); }
.tm-cartel__titulo { font-size: 2.25rem; font-weight: var(--tg-w-medium); letter-spacing: -.03em; line-height: 1.1; }
.tm-cartel__sub { font-size: 1.25rem; color: var(--tg-muted); }
.tm-cartel--revela { flex-direction: row; align-items: center; gap: 1.25rem; padding: .75rem 1.5rem .75rem .75rem; max-width: calc(100% - 4rem); }
.tm-cartel__foto { width: 10rem; height: 6.5rem; object-fit: cover; border-radius: .75rem; flex: none; }
.tm-cartel__textos { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.tm-cartel--revela .tm-cartel__titulo { font-size: 2.5rem; }
.tm-cartel--revela .tm-cartel__sub { font-size: 1.375rem; color: var(--tg-ink); }
.tm-cartel__credito { font-size: .875rem; color: var(--tg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Quién ha contestado ya (arriba a la derecha, sobre la foto) */
.tm-elegidos { position: absolute; right: 2rem; top: 1.5rem; display: flex; gap: .75rem; z-index: 500; }
.tm-elegido { position: relative; width: 3.5rem; height: 3.5rem; opacity: .35; }
.tm-elegido.ok { opacity: 1; }
.tm-elegido__avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tm-elegido__avatar .tg-personaje { width: 2.75rem; height: 2.75rem; }
img.tm-elegido__avatar { object-fit: cover; }
.tm-elegido__check {
  position: absolute; right: -.375rem; bottom: -.25rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--tg-online); color: #fff; font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* Frase del momento clave (abajo, al revelar) */
.tm-aviso { position: absolute; left: 0; right: 0; bottom: 1.5rem; display: flex; justify-content: center; z-index: 500; pointer-events: none; }
.tm-aviso__txt { font-size: 1.75rem; padding: .5rem 1.5rem; border-radius: 2rem; }

/* Marcas del mapa: el sitio de verdad y la cara de cada uno con sus puntos */
.tm-real__pin { display: block; font-size: 4rem; line-height: 1; text-align: center; }
.tm-cara { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.tm-cara__marco {
  width: 4.5rem; height: 4.5rem; box-sizing: border-box; border-radius: 50%; border: .3rem solid var(--c, #fff);
  background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none;
}
.tm-cara__avatar { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.tm-cara__avatar .tg-personaje { width: 3.25rem; height: 3.25rem; }
img.tm-cara__avatar { object-fit: cover; }
.tm-cara__txt {
  white-space: nowrap; font-size: 1.125rem; font-weight: var(--tg-w-strong); line-height: 1;
  padding: .3rem .6rem; border-radius: 1rem; background: #1F1F1F; color: #fff;
}
.tm-cara--bien .tm-cara__txt { background: var(--tg-host, #FFE45C); color: var(--tg-ink); }