/* Con amigos (room). Raíz: .screen.ui.s-room (spec 8.16). Mismo formato que Práctica (practice.css usa
   los mismos nombres .cards-row / .opt-card con su propio prefijo). */

.s-room .cards-row { display: flex; gap: 14px; padding: 12px; justify-content: center; align-items: center; }
.s-room .stagger > * { animation-fill-mode: backwards; }
.s-room .opt-card { width: 330px; height: 100%; max-height: 330px; padding: 14px 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.s-room .otitle { font-size: 24px; }
.s-room .otext { margin: 0; max-width: 290px; }
.s-room .ogroup { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; min-height: 0; margin-top: 2px; }
.s-room .go { flex: none; width: 200px; margin-top: auto; }
.s-room .go.join { width: 180px; }

/* Crear sala: la mesa elegida en perspectiva (cede alto si hay muchas mesas que elegir) */
.s-room .persp { position: relative; flex: 1 1 auto; width: 100%; min-height: 40px; max-height: 88px; perspective: 420px; perspective-origin: 50% 0%; }
.s-room .persp .timg { position: absolute; left: 50%; top: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%) rotateX(40deg); transform-origin: 50% 0; filter: drop-shadow(0 10px 9px rgba(0,0,0,.6)); }
/* Con muchas mesas (más de 4) no cabe la mesa en 390 de alto: se quita y se compactan las opciones */
.s-room .opt-card.many .persp { display: none; }
#stage[data-h="l"] .s-room .opt-card.many, #stage[data-h="xl"] .s-room .opt-card.many { max-height: 400px; }
#stage[data-h="l"] .s-room .persp, #stage[data-h="xl"] .s-room .persp { max-height: 118px; }
#stage[data-h="l"] .s-room .opt-card.many .persp, #stage[data-h="xl"] .s-room .opt-card.many .persp { display: block; }
.s-room .persp .timg[src=""] { visibility: hidden; }
.s-room .chips { overflow-y: auto; min-height: 0; max-width: 100%; padding: 1px 2px 4px; touch-action: pan-y; }
.s-room .chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; }
.s-room .chip .sep { font-style: normal; opacity: .6; }
.s-room .chip img { width: 15px; height: 15px; margin-left: 1px; }
.s-room .chip .ty-num { font-size: 15px; }

/* Unirme: bolas 3 y 11 con halo cian; código grande */
.s-room .oart { position: relative; flex: 0 1 auto; width: calc(70px * var(--art-k)); height: calc(56px * var(--art-k)); min-height: 36px; }
.s-room .oart .halo { left: -36px; top: -30px; right: -36px; bottom: -30px; }
.s-room .oart img { position: absolute; height: 72%; aspect-ratio: 1; filter: drop-shadow(0 4px 5px rgba(0,0,0,.55)); }
.s-room .o-b1 { left: 4%; top: 0; }
.s-room .o-b2 { left: 34%; top: 28%; }
.s-room .code-grp { padding: 0 8px; }
.s-room .code-grp input.txt.code { height: 48px; max-width: 260px; }
/* Muchas mesas: tarjeta más ancha y dos columnas de opciones iguales, más compactas */
.s-room .opt-card.many { width: 370px; }
.s-room .opt-card.many .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.s-room .opt-card.many .chip { height: 28px; padding: 0 8px; font-size: 14px; justify-content: center; min-width: 0; }
.s-room .opt-card.many .chip .ty-num { font-size: 14px; }
.s-room .opt-card.many .chip img { width: 13px; height: 13px; }
.s-room .chip .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Atajo a Amigos */
.s-room .to-friends { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 290px; padding: 8px 8px 8px 12px; margin-top: 4px; text-align: left; color: var(--c-cyan); }
.s-room .to-friends svg { flex: none; }
.s-room .to-friends .ty-small { flex: 1; min-width: 0; color: var(--tx-2); }
.s-room .to-friends .btn { flex: none; }