/* Duelos Troll MLBB - bienvenida (js/bienvenida.js). Prefijo "bie". Solo tokens de base.css.
     html.bieon   mientras la bienvenida está abierta: la página no se desplaza por debajo y la oferta
                  de instalar y el aviso de versión nueva esperan escondidos
     .biegu       la línea "¿Primera vez por aquí? Cómo empezar" de la Guía (el del pie usa .foot)
     .bie         el <dialog>: ocupa toda la ventana y él mismo es el velo
     .biecaja     la tarjeta: cabecera (.bietop), paso (.biecuerpo, lo único que se desliza) y pie (.biepie)
   Dentro del paso: .bieh título, .biep texto, .bienota letra pequeña, .bievs los dos retratos,
   .bieej el héroe de ejemplo, .biecam los pasos numerados, .bieli las listas con icono.
   La tarjeta tiene alto fijo para que los botones no salten de un paso a otro. */

/* ---------- mientras está abierta ---------- */
/* Lo mismo que html.lock (base.css): sin desplazamiento y con el hueco de la barra del color del velo. */
html.bieon{overflow:hidden;background:var(--lock-bg)}
html.bieon body{min-height:100vh}
/* La bienvenida va primero: instalar como app y "Hay una versión nueva" (js/app-instalar.js) esperan.
   Invisibles, no quitadas: la tarjeta de instalar guarda su sitio y así, al cerrar la bienvenida, aparece
   sin empujar la página (con display:none la página saltaría justo al cerrar). */
html.bieon #appOferta,html.bieon #appNueva{visibility:hidden}

/* ---------- "Cómo empezar" en la Guía ---------- */
.biegu{margin:-2px 0 8px;font-size:15px;line-height:20px;color:var(--fg2)}
.biegu .link{font-weight:600;padding:4px 2px}

/* ---------- velo ---------- */
.bie{
  position:fixed;inset:0;z-index:55;
  width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:var(--scrim);color:var(--fg);
  overflow:hidden;overscroll-behavior:contain;
}
.bie:not([open]){display:none}   /* también donde <dialog> no existe y es una capa cualquiera */
.bie[open]{display:flex;align-items:center;justify-content:center}
.bie::backdrop{background:transparent}
.bie:focus{outline:none}

/* ---------- tarjeta ---------- */
.biecaja{
  display:flex;flex-direction:column;width:min(100%,440px);height:min(100%,640px);
  border-radius:18px;background:var(--sheet-bg);box-shadow:var(--shadow);overflow:hidden;
}
.bietop{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:6px 8px 0 20px}
.biecont{margin:0;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.biesaltar{flex:none;padding:4px 12px;font-size:17px}
.biecuerpo{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:6px 20px 14px;
}
.biecuerpo:focus-visible{outline-offset:-3px}
.biepaso{display:flex;flex-direction:column;gap:14px}

/* ---------- textos ---------- */
.bietx{min-width:0}
.bieh{margin:0;font-size:22px;line-height:27px;font-weight:700;letter-spacing:.2px}
.biep{margin:8px 0 0;font-size:16px;line-height:22px}
.bienota{margin:0;font-size:14px;line-height:19px;color:var(--fg2)}

/* ---------- paso 1: los dos retratos y el héroe de ejemplo ---------- */
.bievs{display:flex;align-items:center;justify-content:center;gap:14px;margin:2px 0 14px}
.bievs > span:not(.av){font-size:17px;line-height:22px;font-weight:700;color:var(--fg2)}
.bieej{min-width:0;padding:12px 14px;border-radius:14px;background:var(--sheet-card)}
.bieejn{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:15px;line-height:20px;color:var(--fg2)}
.bieejn b{font-weight:600;color:var(--fg)}
.biekv{display:flex;flex-direction:column;gap:8px;margin:0}
.biekv dt{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.biekv dd{margin:1px 0 0;font-size:15px;line-height:20px;overflow-wrap:anywhere}
.biekv .fav dt{color:var(--good-ink)}
.biekv .con dt{color:var(--bad-ink)}

/* ---------- listas: pasos numerados (paso 2) y filas con icono (pasos 3 y 4) ---------- */
.biecam,.bieli{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.biepa,.biefi{position:relative;display:flex;align-items:flex-start;gap:12px}
.bieft{min-width:0;display:flex;flex-direction:column;gap:1px;font-size:14px;line-height:19px;color:var(--fg2)}
.bieft b{font-size:16px;line-height:21px;font-weight:600;color:var(--fg)}
.bienum{
  flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-fill);color:#fff;font-size:15px;line-height:1;font-weight:700;
}
.biepa .bieft b{margin-top:3px}
.biepa:not(:last-child)::after{content:"";position:absolute;left:13px;top:33px;bottom:-9px;width:2px;border-radius:1px;background:var(--sep)}
.bieic{
  flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--link);
}
.bieic svg{width:20px;height:20px}
.bie-donde .bieli{gap:10px}

/* ---------- pie: puntos y botones ---------- */
.biepie{flex:none;padding:10px 16px 16px}
.bielargo .biepie{box-shadow:0 -.5px 0 var(--sep)}   /* el paso no cabe entero: sigue por debajo de esta raya */
.biepuntos{display:flex;justify-content:center;gap:6px;margin-bottom:12px}
.biepuntos span{width:7px;height:7px;border-radius:4px;background:var(--fg3);opacity:.45}
.biepuntos .on{width:20px;background:var(--accent);opacity:1}
.biebtns{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.biebtns .btn{min-width:0;padding:6px 16px}
.bieprim{grid-column:1 / -1}
.bieatras[hidden] + .btn{grid-column:1 / -1}   /* primer paso: "Siguiente" a todo el ancho */
/* El foco entra solo en "Siguiente" al abrirse: su aro se enseña cuando se usa el teclado (clase bietec, la
   pone el JS con la primera tecla), no a quien toca con el dedo o el ratón. */
.bie:not(.bietec) .biebtns .btn:focus-visible{outline:none}

/* ---------- teléfonos estrechos ---------- */
@media (max-width:359px){
  .bietop{padding-left:16px}
  .biecuerpo{padding:4px 16px 12px}
  .biepie{padding:8px 12px 12px}
  .biebtns .btn{padding:6px 12px;font-size:16px}
  .bieh{font-size:20px;line-height:25px}
}
/* poca altura: sin el dibujo de los dos retratos, que es solo adorno; con menos aún, sin los puntos
   (la cabecera ya dice "Paso 2 de 4") y todo algo más junto */
@media (max-height:700px){
  .bievs{display:none}
}
@media (max-height:650px){
  .biepuntos{display:none}
  .bietop{min-height:46px;padding-top:2px}
  .biepie{padding-top:8px}
  .biepaso{gap:12px}
  .biecam,.bieli{gap:10px}
  .biep{margin-top:6px}
}

/* ---------- tablet y PC ---------- */
@media (min-width:700px) and (min-height:481px){
  .biecaja{width:min(100%,480px);height:min(100%,590px)}
  .bietop{padding:10px 12px 0 26px}
  .biecuerpo{padding:8px 26px 16px}
  .biepie{padding:12px 26px 24px}
  .bieh{font-size:24px;line-height:30px}
  .biepaso{gap:16px}
}

/* ---------- teléfono tumbado: tarjeta ancha y baja, listas en dos columnas, botones en una fila ---------- */
@media (max-height:480px){
  .bie{padding-top:8px;padding-bottom:8px}
  .biecaja{width:min(100%,720px);height:100%}
  .bietop{min-height:44px;padding-top:0}
  .biecuerpo{padding-top:2px;padding-bottom:10px}
  .biepuntos{display:none}
  .biepie{padding:8px 16px 10px}
  .biebtns{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}
  .biebtns .btn{min-height:44px;font-size:15px}
  .bieprim{grid-column:auto;order:3}
  .biesig{grid-column:span 2}
  .bieh{font-size:20px;line-height:25px}
  .biepaso{gap:10px}
}
@media (max-height:480px) and (min-width:560px){
  .bie-que{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
  .biecam,.bieli,.bie-donde .bieli{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 20px}
  .biepa:not(:last-child)::after{display:none}
}

/* ---------- movimiento: solo si el sistema no pide reducirlo ---------- */
@media (prefers-reduced-motion: no-preference){
  .bie[open]{animation:biein .18s ease-out}
  .bie[open] .biecaja{animation:biesube .26s cubic-bezier(.2,.8,.2,1)}
  .biepaso{animation:biepaso .2s ease-out}
}
@keyframes biein{from{opacity:0}to{opacity:1}}
@keyframes biesube{from{transform:translateY(16px)}to{transform:none}}
@keyframes biepaso{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}