/* Amigos (friends, con barra inferior). Raíz: .screen.ui.s-friends. Spec 8.12: dos paneles a la
   izquierda (tu código · añadir amigo) y la lista a la derecha (.flist > .card-row.frow, base.css).
   Sin amigos, la derecha es un .pnl con emptyState. */

.s-friends .friends-body {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px;
  width: 100%; max-width: 1180px; max-height: 480px; align-self: center; margin: auto 0; padding: 12px;
}

/* ---- Izquierda ------------------------------------------------------------------------------ */
.s-friends .friends-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.s-friends .fr-box { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px; }
.s-friends .fr-box .btn { width: 100%; }
.s-friends .fr-box .btn svg { width: 14px; height: 14px; }
.s-friends .fr-codewell { flex: none; height: 44px; display: flex; align-items: center; justify-content: center; }
.s-friends .fr-code { font-size: 32px; letter-spacing: 3px; color: #fff; text-shadow: 0 2px 0 rgba(0,8,30,.55); padding-left: 3px; }
.s-friends input.txt.fr-input { flex: none; height: 40px; font-size: 22px; letter-spacing: 5px; }
.s-friends input.txt.fr-input::placeholder { font-size: 16px; letter-spacing: 1px; }

/* ---- Derecha: lista ------------------------------------------------------------------------- */
.s-friends .flist { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.s-friends .fr-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; margin-right: -4px; }
.s-friends .fr-sec { flex: none; display: flex; align-items: center; gap: 10px; height: 14px; margin-top: 2px; }
.s-friends .fr-sec + .frow { margin-top: -2px; }
.s-friends .fr-on { display: inline-flex; align-items: center; gap: 5px; letter-spacing: .6px; color: var(--c-green-hi); }
.s-friends .fr-on .dot { width: 6px; height: 6px; }
.s-friends .frow { flex: none; height: 52px; padding: 0 12px; gap: 10px; }
.s-friends .fr-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.s-friends .fr-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.s-friends .fr-n { font: 800 13px/1.1 var(--f-ui); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.s-friends .fr-name .flag { width: 16px; height: 11px; }
.s-friends .fr-st { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.s-friends .fr-st.on { color: var(--c-green-hi); }
.s-friends .fr-st.play { color: var(--gold-2); }
.s-friends .fr-st.off { color: var(--tx-4); }
.s-friends .fr-st .dot { width: 6px; height: 6px; }
.s-friends .frow.away .avf { opacity: .6; }
/* Entrada escalonada: como mucho las 10 primeras filas (spec 1.4) */
.s-friends .fr-scroll.stagger > :nth-child(n+11) { animation: none; }
.s-friends .fr-acts { flex: none; display: flex; align-items: center; gap: 8px; }
.s-friends .fr-req { box-shadow: inset 0 0 0 1px rgba(255,211,77,.45), inset 0 1px 0 var(--sf-hi), var(--sh-row); }
/* «Juega con más amigos» (con pocos amigos): fila; .tall, en columna */
.s-friends .fr-scroll { position: relative; }
.s-friends .fr-more { flex: 1 0 auto; min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.s-friends .fr-more-art { position: relative; flex: none; }
.s-friends .fr-more-art .halo { --gc: rgba(40,200,255,.30); left: -30%; right: -30%; top: -30%; bottom: -30%; }
.s-friends .fr-more .fr-balls { width: 64px; height: 48px; }
.s-friends .fr-more .fr-balls img { width: 36px; height: 36px; }
.s-friends .fr-more-t { flex: 1; min-width: 0; }
.s-friends .fr-more-t .ty-h4 { font-size: 16px; }
.s-friends .fr-more-t .ty-body { margin: 3px 0 0; color: var(--tx-3); }
.s-friends .fr-more .btn { flex: none; }
.s-friends .fr-more .btn svg { width: 13px; height: 13px; }
.s-friends .fr-more.tall { flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
.s-friends .fr-more.tall .fr-more-t { flex: none; max-width: 380px; }
.s-friends .fr-more.tall .fr-balls { width: calc(80px * var(--art-k)); height: calc(56px * var(--art-k)); }
.s-friends .fr-more.tall .fr-balls img { width: calc(44px * var(--art-k)); height: calc(44px * var(--art-k)); }
.s-friends .fr-wait { flex: 1; display: flex; align-items: center; justify-content: center; }
.s-friends .fr-empty { flex: 1; min-height: 0; display: flex; }
.s-friends .fr-empty .empty-st { flex: 1; }
/* Bolas 3 y 11 solapadas (estado vacío) */
.s-friends .fr-balls { position: relative; width: calc(110px * var(--art-k)); height: calc(84px * var(--art-k)); }
.s-friends .empty-st .empty-art { width: calc(110px * var(--art-k)); }
.s-friends .fr-balls img { position: absolute; width: calc(64px * var(--art-k)); height: calc(64px * var(--art-k)); filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.s-friends .fr-balls img:first-child { left: 0; top: 2px; }
.s-friends .fr-balls img:last-child { right: 0; bottom: 0; }

/* ---- Ventana Retar -------------------------------------------------------------------------- */
.fr-challenge { width: 440px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.fr-ch-who { display: flex; align-items: center; gap: 12px; }
.fr-ch-who .ty-body { margin: 0; font-size: 13px; }
.fr-ch-who b { color: #fff; font-weight: 800; }
.fr-ch-t { margin-top: 2px; }
.fr-challenge .chips.fr-venues { justify-content: flex-start; }
.fr-venues .chip { color: var(--tx-2); }
.fr-venues .chip.short { color: var(--tx-4); }
@media (hover: hover) { .fr-venues .chip:hover { color: #fff; } }