/* ============================================================
   portada.css — la pantalla de título

   La portadilla de funcional-i3 vuelta pantalla de juego: «TIEMPO
   CONTINUO» enorme en Righteous cian, el emblema (una cadena de tres
   estados) que se dibuja a trazo sobre un planeta difuso y cuya partícula
   salta con esperas exponenciales, «pulsa para empezar», la ficha del
   jugador y el menú con puntos guía.
   ============================================================ */

.portada { max-width: 52rem; margin: 0 auto; padding-bottom: 2rem; }

.po-titulo { text-align: center; padding: clamp(2.2rem, 7vh, 4.5rem) 0 1.6rem; }
.po-sobre { display: block; letter-spacing: var(--track-etq); color: var(--crema-2); font-size: .82rem; }
.po-grande {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 8.2rem);
  line-height: .88;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 1rem 0 .7rem;
  color: var(--acento);
  text-shadow: 0 0 42px color-mix(in srgb, var(--acento) 28%, transparent);
}
.po-sub { font-size: 1.15rem; color: var(--crema-2); }
.po-sub em { color: var(--crema); font-style: normal; font-weight: 600; }

/* El emblema, sobre un planeta difuso (el de integracion-i3, aquí en cian). */
.po-emblema { margin: 2rem auto 1.2rem; width: min(250px, 62vw); color: var(--acento); position: relative; isolation: isolate; }
.po-emblema::before {
  content: '';
  position: absolute;
  inset: 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 44% 42%, color-mix(in srgb, var(--hielo) 55%, transparent), color-mix(in srgb, var(--acento) 22%, transparent) 46%, transparent 70%);
  filter: blur(10px);
  animation: deriva 14s ease-in-out infinite alternate;
}
@keyframes deriva { from { transform: translate(0, 0); } to { transform: translate(3%, 3%); } }
.emblema-grande { width: 100%; height: auto; display: block; overflow: visible; }
.emb-leyenda {
  font-family: var(--f-mono);
  font-size: 8.3px;
  letter-spacing: .12em;
  fill: var(--hielo-texto);
  text-transform: uppercase;
}


/* El trazo que se dibuja solo, una vez. */
.traza { stroke-dasharray: 1; stroke-dashoffset: 0; }
.po-emblema .traza { animation: trazar 2.4s cubic-bezier(.4, .1, .2, 1) both; }
.po-emblema .emb-estado:nth-child(2) { animation-delay: .3s; }
.po-emblema .emb-estado:nth-child(3) { animation-delay: .6s; }
.po-emblema .emb-flecha { animation-delay: 1s; }
.po-emblema .emb-leyenda { animation: aparecer 1.6s .6s both; }
.po-emblema .emb-particula { animation: aparecer .8s 2s both; transition: cx .32s cubic-bezier(.5, -0.4, .3, 1.5), cy .32s cubic-bezier(.5, -0.4, .3, 1.5); }
@keyframes trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------ las puertas */

.po-puertas { margin: 0 auto; }
.po-puertas-tit {
  text-align: center;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--crema);
  margin-bottom: 1.1rem;
}
.po-puertas-tit::after {
  content: '';
  display: block;
  width: 7px; height: 7px;
  margin: .6rem auto 0;
  background: var(--acento);
}
.po-lista { list-style: none; margin: 0; padding: 0; }
.po-puerta {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .62rem .2rem;
  color: var(--crema);
  border-bottom: 1px solid var(--filete-2);
  transition: background .2s, padding .2s;
}
.po-puerta:hover { color: var(--crema); background: linear-gradient(90deg, var(--acento-velo), transparent 85%); padding-left: .55rem; }
.po-num {
  font-family: var(--f-display);
  font-style: normal;
  color: var(--hielo-texto);
  font-size: 1.35rem;
  min-width: 2.6rem;
  text-align: right;
}
.po-txt { display: flex; flex-direction: column; min-width: 0; }
.po-tit { font-size: 1.32rem; line-height: 1.2; }
.po-puerta:hover .po-tit { color: var(--acento); }
.po-sub-p { color: var(--crema-3); font-style: normal; font-size: .98rem; line-height: 1.35; }
.po-guia { flex: 1; border-bottom: 1px dotted var(--filete); transform: translateY(-.35em); min-width: 1.4rem; }
.po-cuenta-p {
  color: var(--crema-2);
  letter-spacing: .12em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  font-family: var(--f-mono);
  text-transform: uppercase;
  font-size: .78em;
}

.po-pie { margin: 2.6rem auto 0; max-width: 40rem; text-align: center; font-style: normal; color: var(--crema-3); font-size: .98rem; }

@media (max-width: 620px) {
  .po-guia { display: none; }
  .po-puerta { flex-wrap: wrap; gap: .2rem .7rem; }
  .po-cuenta-p { margin-left: 3.5rem; font-size: .72rem; }
  .po-num { min-width: 2.2rem; }
}

/* ------------------------------------------------------------ lo de juego */

.po-grande span { display: block; }
.po-grande span + span { color: var(--crema); text-shadow: none; }
.emb-tenue { opacity: .45; }
.emb-particula { fill: var(--hielo); filter: drop-shadow(0 0 6px var(--hielo)); }
.cab-emblema .emb-particula, .colofon-emblema .emb-particula { filter: none; }
.po-pulsa {
  font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .22em; font-size: .86rem;
  color: var(--oro); margin-top: .4rem;
  animation: pulsa 1.6s steps(2, jump-none) infinite;
}
@keyframes pulsa { 50% { opacity: .25; } }
.po-suena { color: var(--crema-2); font-size: .98rem; display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.po-suena .ico { color: var(--lila); }
.po-suena a { font-size: .9rem; }

.po-jugador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .9rem 1.6rem;
  align-items: center;
  margin: 1.2rem auto 2.8rem;
  padding: 1.1rem 1.4rem 1.2rem;
  border: 1px solid var(--filete);
  background: var(--noche-2);
  position: relative;
}
.po-jugador::before, .po-jugador::after { content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none; }
.po-jugador::before { top: -1px; left: -1px; border-top: var(--filete-ancho) solid var(--oro); border-left: var(--filete-ancho) solid var(--oro); }
.po-jugador::after { bottom: -1px; right: -1px; border-bottom: var(--filete-ancho) solid var(--oro); border-right: var(--filete-ancho) solid var(--oro); }
.po-jug-rango { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.po-jug-rango .etq { color: var(--oro); }
.po-jug-nombre { font-family: var(--f-display); font-size: 1.7rem; line-height: 1.1; }
.po-jug-barra { display: block; height: 6px; background: var(--filete); position: relative; overflow: hidden; max-width: 22rem; width: 100%; }
.po-jug-barra i { position: absolute; inset: 0; background: var(--oro); transform-origin: left; }
.po-jug-sig { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .06em; color: var(--crema-3); }
.po-jug-datos { display: flex; gap: 1.2rem; font-family: var(--f-mono); color: var(--crema-2); }
.po-jug-datos b { color: var(--oro); font-size: 1.3rem; }
.po-jug-datos .ico { color: var(--oro); vertical-align: -.1em; }
.po-jug-acc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; }
.po-empezar { font-size: .9rem; padding: .75rem 1.3rem; }
.po-num { font-family: var(--f-mono); font-weight: 700; font-size: 1.05rem; }

@media (max-width: 620px) {
  .po-jugador { grid-template-columns: minmax(0, 1fr); padding: 1rem 1.05rem; }
}