/* Ocurrencias: frase con hueco arriba y respuestas en tarjetas. Barras de votos solo con transform. */
.ocurrencias { background: #FFF4CC; }
.oc-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; }
.oc-titulo { font-size: 2rem; font-weight: var(--tg-w-strong); letter-spacing: -.02em; text-align: center; }
.oc-sub { font-size: 1.3rem; color: var(--tg-muted); text-align: center; }
.oc-frase { max-width: 52rem; font-size: 2.2rem; font-weight: var(--tg-w-strong); letter-spacing: -.02em; line-height: 1.15; text-align: center; }
.oc-frase--arriba { font-size: 1.9rem; }
.oc-hueco { display: inline-block; color: #B08A00; letter-spacing: -.05em; }

/* Intro de ronda */
.oc-intro { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.oc-intro__grande { font-size: 4rem; font-weight: var(--tg-w-strong); letter-spacing: -.035em; line-height: 1; }
.oc-intro__sub { font-size: 1.6rem; color: var(--tg-muted); }

/* Escribir: quién va por dónde */
.oc-jugadores { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.2rem; max-width: 54rem; margin-top: .6rem; }
.oc-jug { display: flex; align-items: center; gap: .5rem; background: #fff; border-radius: 1.2rem; padding: .4rem 1rem .4rem .5rem; border: .15rem solid #EBD89A; }
.oc-jug--listo { border-color: var(--tg-online); background: #E3F8EA; }
.oc-jug__nombre { font-size: 1.3rem; font-weight: var(--tg-w-medium); max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-jug__estado { font-size: 1.2rem; font-weight: var(--tg-w-strong); }

/* Votar: dos tarjetas enfrentadas */
.oc-duelo { display: flex; align-items: stretch; gap: 1rem; }
.oc-vs { align-self: center; font-size: 1.8rem; font-weight: var(--tg-w-strong); color: #B08A00; }
.oc-tarjeta { position: relative; width: 24rem; box-sizing: border-box; background: #fff; border-radius: 1.2rem; border: .25rem solid #EBD89A;
  padding: 1rem 1.2rem .8rem; display: flex; flex-direction: column; gap: .6rem; }
.oc-tarjeta--gana { border-color: var(--tg-online); background: #EFFBF3; }
.oc-letra { position: absolute; left: -.7rem; top: -.9rem; width: 2rem; height: 2rem; border-radius: 50%; background: #1F1F1F; color: #fff;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.oc-resp { flex: 1; min-height: 5.2rem; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 1.9rem; font-weight: var(--tg-w-medium); line-height: 1.15; overflow-wrap: anywhere; }
.oc-blanco { color: var(--tg-muted); font-weight: var(--tg-w-regular); }
.oc-revela { min-height: 5.4rem; display: flex; flex-direction: column; gap: .35rem; }
.oc-autor { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: 1.2rem; font-weight: var(--tg-w-medium); }
.oc-autor .tg-personaje--linea { width: 1.4rem; height: 1.4rem; }
.oc-barra { height: 1rem; border-radius: .5rem; background: #F3E9C4; overflow: hidden; }
.oc-barra__lleno { display: block; width: 100%; height: 100%; background: #E6B800; transform: scaleX(0); transform-origin: left center; transition: transform .8s ease-out; }
.oc-tarjeta--gana .oc-barra__lleno { background: var(--tg-online); }
.oc-votos { display: flex; align-items: center; gap: .4rem; font-size: 1.1rem; }
.oc-votos__n { font-weight: var(--tg-w-medium); white-space: nowrap; }
.oc-votos__q { flex: 1; display: flex; flex-wrap: wrap; gap: .15rem; align-items: center; }
.oc-votos__p { font-size: 1.4rem; font-weight: var(--tg-w-strong); }
.oc-casa { font-size: 1.3rem; line-height: 1; }

/* Final: todas las respuestas en rejilla */
.oc-todas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem .9rem; width: 54rem; }
.oc-todas--3 { grid-template-columns: repeat(3, 1fr); }
.oc-todas--4, .oc-todas--7, .oc-todas--8 { grid-template-columns: repeat(4, 1fr); }
.oc-tarjeta--mini { width: auto; padding: .7rem .8rem .5rem; gap: .35rem; }
.oc-tarjeta--mini .oc-resp { min-height: 3.6rem; font-size: 1.3rem; }
.oc-tarjeta--mini .oc-revela { min-height: 4.6rem; gap: .25rem; }
.oc-tarjeta--mini .oc-autor { font-size: 1rem; }
.oc-tarjeta--mini .oc-autor span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 8rem; }
.oc-tarjeta--mini .oc-votos { font-size: 1rem; }
.oc-tarjeta--mini .oc-votos__p { font-size: 1.1rem; }
.oc-tarjeta--mini .cl-ficha--mini { width: 1.3rem; height: 1.3rem; }

.oc-votantes { min-height: 2.4rem; display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; }
.oc-votantes__txt { color: var(--tg-muted); font-weight: var(--tg-w-medium); margin-right: .3rem; }
.oc-votante { display: inline-flex; align-items: center; gap: .1rem; opacity: .45; }
.oc-votante--ya { opacity: 1; }
/* 5 a 8 respuestas: tarjetas más bajas para que quepan dos filas con la frase arriba */
.oc-todas--muchas { gap: 1rem .8rem; }
.oc-todas--muchas .oc-tarjeta--mini { padding: .5rem .6rem .4rem; gap: .25rem; }
.oc-todas--muchas .oc-resp { min-height: 2.6rem; font-size: 1.1rem; line-height: 1.1; }
.oc-todas--muchas .oc-revela { min-height: 3.4rem; gap: .15rem; }
.oc-todas--muchas .oc-barra { height: .7rem; }