/* Torneo: menú, cuenta, lobby del anfitrión y cliente de sala. Se apoya en las variables de pelea.css. */
body.modo-menu #ui { background: radial-gradient(ellipse at 50% 0%, #1b1626 0%, #0a0a10 55%, #050508 100%); overflow-y: auto; }
.mn, .mn *, .lb-top, .lb-top *, .lb-tabla, .lb-tabla *, .lb-pie, .lb-pie *, .lb-estado, .lb-estado *, .cli, .cli * { pointer-events: auto; }
.mn { min-height: 100%; padding: 22px clamp(14px, 4vw, 56px) 60px; user-select: text; }
.mn-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.mn-cab .kicker { font-size: 12px; letter-spacing: .5em; text-transform: uppercase; color: #f2dca0; }
.mn-cab h1 { margin: 2px 0 0; font-family: var(--f-titulo); font-weight: 900; font-size: clamp(30px, 5vw, 54px); letter-spacing: .06em; text-transform: uppercase; color: #dfe6f0; text-shadow: 0 3px 0 #2a2f3c; }
.mn-user { display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .08em; color: #f2dca0; }
.mn-user img { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--oro2); }
.mn button, .cli button, .lb button, .ac button { font: inherit; }
.mn-salir { background: transparent; color: #9a9385; border: 1px solid #333a4d; padding: 5px 12px; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.mn-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; max-width: 1300px; margin: 0 auto; }
.mn-av { grid-column: 1 / -1; }
.mn-centro { display: flex; justify-content: center; padding-top: 4vh; }
.mn-caja { background: rgba(14,15,22,.92); border: 1px solid rgba(216,184,102,.28); padding: 20px 22px; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
.mn-caja h2 { margin: 0 0 14px; font-family: var(--f-titulo); letter-spacing: .18em; text-transform: uppercase; font-size: 16px; color: var(--oro); }
.mn-caja label, .ac label { display: block; margin: 10px 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9aa3b5; }
.mn-caja input, .mn-caja select, .ac input, .lb select, .cli select { display: block; width: 100%; margin-top: 5px; background: #12141c; border: 1px solid #333a4d; color: #e6ebf3; padding: 9px 10px; font: 15px var(--f-hud); letter-spacing: .04em; }
.mn-primario, .ac-ok, .cli-des, .lb-yo, .lb-mas, .lb-menu { background: linear-gradient(180deg, #e9c978, #b58b2f); color: #1a1206; border: 0; padding: 11px 20px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; margin-top: 8px; }
.mn-primario:hover, .ac-ok:hover, .cli-des:hover { filter: brightness(1.1); }
.mn-primario:disabled, .ac-ok:disabled { opacity: .5; }
.mn-mirar { background: transparent; color: #9a9385; border: 1px solid #333a4d; padding: 8px 14px; margin-top: 14px; width: 100%; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.mn-mirar:hover { color: #ffe4a0; }
.mn-err { color: #ff8a7a; font-size: 13px; min-height: 1em; margin: 8px 0 0; }
.mn-nota, .mn-sub { color: #7c8797; font-size: 13px; line-height: 1.5; margin: 10px 0 0; } .mn-sub b { color: #ffe4a0; letter-spacing: .2em; }
.mn-avs { display: flex; gap: 12px; flex-wrap: wrap; }
.mn-avc { position: relative; width: 150px; padding: 12px; background: #12141c; border: 1px solid #2c3345; text-align: center; color: #dfe6f0; display: block; }
.mn-avc b { display: block; margin-top: 8px; letter-spacing: .12em; font-size: 14px; } .mn-avc small { color: #7c8797; font-size: 11px; letter-spacing: .06em; }
.mn-avc > button { position: absolute; top: 4px; right: 4px; background: transparent; border: 0; color: #7c8797; font-size: 14px; }
.mn-avc > button:hover { color: #ff8a7a; }
.mn-sil { height: 64px; display: flex; align-items: center; justify-content: center; font-size: 40px; background: linear-gradient(180deg, #1b2030, #10131c); }
.mn-nuevo { border-style: dashed; border-color: #4a6f5a; color: #8fe0b0; } .mn-nuevo .mn-sil { font-size: 44px; color: #8fe0b0; }
.mn-lista { max-height: 320px; overflow-y: auto; }
.mn-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1f2433; font-size: 14px; letter-spacing: .04em; color: #dfe6f0; }
.mn-fila > span:first-child { flex: 1; min-width: 0; } .mn-fila small { display: block; color: #7c8797; font-size: 11px; }
.mn-fila em { font-style: normal; width: 34px; text-align: right; color: #ffe4a0; } .mn-th { color: #7c8797; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.mn-fila img { width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.mn-bts { display: flex; gap: 6px; } .mn-bts button { background: #1d2030; color: #ffe4a0; border: 1px solid #5a4a22; padding: 4px 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.mn-modal { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; padding: 16px; } .mn-modal[hidden] { display: none; }
.mn-det { position: relative; width: min(560px, 96vw); max-height: 88vh; overflow-y: auto; } .mn-det h3 { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #9aa3b5; margin: 18px 0 4px; }
.mn-x { position: absolute; top: 8px; right: 10px; background: transparent; border: 0; color: #9a9385; font-size: 18px; }

/* formulario de acceso */
.ac { width: min(360px, 86vw); } .ac h2 { margin: 0 0 16px; font-family: var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; font-size: 16px; color: var(--oro); text-align: center; }
.ac-google { text-align: center; margin-bottom: 4px; } .ac-google[hidden] { display: none; } .ac-gbtn { display: flex; justify-content: center; min-height: 44px; }
.ac-o { color: #7c8797; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin: 12px 0 2px; }
.ac-tabs { display: flex; margin: 8px 0 4px; border-bottom: 1px solid #2c3345; }
.ac-tabs button { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; color: #7c8797; padding: 8px; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.ac-tabs button.on { color: #ffe4a0; border-bottom-color: var(--oro); } .ac-ok { width: 100%; } .ac-err { color: #ff8a7a; font-size: 13px; min-height: 1em; text-align: center; }

/* lobby del anfitrión (sobre la escena 3D) */
.lb { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.15) 40%, rgba(0,0,0,.35)); } .lb.on { opacity: 1; }
.lb-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(14px, 3vw, 40px); }
.lb-logo { font-family: var(--f-titulo); font-weight: 900; letter-spacing: .2em; text-transform: uppercase; font-size: clamp(16px, 2vw, 26px); color: #dfe6f0; text-shadow: 0 2px 10px #000; }
.lb-tor { text-align: right; text-shadow: 0 2px 8px #000; } .lb-nombre { display: block; font-size: clamp(16px, 1.8vw, 24px); letter-spacing: .08em; color: #ffe4a0; } .lb-prog { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #cfd6e3; }
.lb-centro { position: absolute; left: 0; right: 0; top: 18%; display: flex; justify-content: center; }
.lb-estado { min-width: min(560px, 90vw); max-width: 90vw; padding: 22px 30px; text-align: center; background: rgba(8,9,14,.72); border: 1px solid rgba(216,184,102,.35); backdrop-filter: blur(6px); }
.lb-titulo { font-family: var(--f-titulo); font-size: clamp(20px, 2.6vw, 34px); letter-spacing: .08em; color: #ffe4a0; margin-bottom: 8px; } .lb-gana { font-size: clamp(28px, 4vw, 56px); }
.lb-estado p { margin: 6px 0; font-size: 15px; letter-spacing: .05em; color: #cfd6e3; } .lb-sub, .lb-gente { color: #8b95a8 !important; font-size: 13px !important; }
.lb-cuenta { font-family: var(--f-titulo); font-weight: 900; font-size: clamp(56px, 9vw, 120px); line-height: 1; color: #fff; text-shadow: 0 0 30px rgba(216,184,102,.6); margin: 6px 0; } .lb-cuenta.urge { color: #ff6a5a; animation: lbpulso .5s ease-in-out infinite alternate; }
@keyframes lbpulso { to { transform: scale(1.06); } }
.lb-acc { margin-top: 10px; display: flex; justify-content: center; gap: 10px; }
.lb-tabla { position: absolute; right: clamp(14px, 3vw, 40px); top: 90px; width: min(300px, 40vw); max-height: 52vh; overflow-y: auto; padding: 14px 16px; background: rgba(8,9,14,.72); border: 1px solid rgba(216,184,102,.25); }
.lb-tabla h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); }
.lb-f { display: flex; gap: 8px; padding: 5px 0; font-size: 14px; color: #dfe6f0; border-bottom: 1px solid #1f2433; } .lb-f > span:nth-child(2) { flex: 1; } .lb-f > span:first-child { width: 18px; color: #7c8797; }
.lb-f em { font-style: normal; width: 24px; text-align: right; color: #ffe4a0; } .lb-f.th { color: #7c8797; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.lb-vacio { color: #7c8797; font-size: 13px; margin: 4px 0; }
.lb-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px clamp(14px, 3vw, 40px) 16px; }
.lb-link { display: flex; align-items: center; gap: 8px; max-width: 760px; } .lb-link span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9aa3b5; white-space: nowrap; }
.lb-link input { flex: 1; min-width: 0; background: rgba(8,9,14,.8); border: 1px solid #333a4d; color: #dfe6f0; padding: 7px 9px; font: 13px monospace; } .lb-cod { font-style: normal; font-family: var(--f-titulo); letter-spacing: .3em; color: #ffe4a0; font-size: 20px; }
.lb-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.lb-btns button, .lb-copiar { background: rgba(29,32,48,.9); color: #ffe4a0; border: 1px solid #5a4a22; padding: 7px 14px; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; } .lb-btns button.ok { border-color: #4a9a6a; color: #8fe0b0; }
.lb-fin { margin-left: auto; color: #ff9a8a !important; border-color: #6a3030 !important; } .lb-fin[hidden] { display: none; }
.lb-esc { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9aa3b5; display: flex; align-items: center; gap: 6px; } .lb-esc select { margin: 0; width: auto; padding: 6px 8px; font-size: 13px; }
.lb-err { margin: 8px 0 0; font-size: 13px; color: #ffb38a; min-height: 1em; }

/* cliente de sala */
.cli { position: fixed; inset: 0; background: #000; } .cli-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.cli-barra { position: fixed; top: 0; left: 0; right: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,0)); z-index: 5; }
.cli-est { flex: 1; min-width: 200px; display: flex; align-items: baseline; gap: 12px; } .cli-estado { font-size: 13px; letter-spacing: .1em; color: #ffe4a0; text-transform: uppercase; } .cli-estado small { color: #9aa3b5; }
.cli-barra button, .cli-ok, .cli-crear { background: rgba(20,22,32,.92); color: #ffe4a0; border: 1px solid #5a4a22; padding: 7px 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.cli-mic.urge { border-color: #ff6a5a; color: #ff9a8a; animation: lbpulso .6s ease-in-out infinite alternate; }
/* botón grande y centrado: lo importante (desafiar) no se esconde en una barra chica */
.cli-cta { position: fixed; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 28px 34px; background: rgba(6,7,11,.82); border: 1px solid rgba(216,184,102,.4); backdrop-filter: blur(4px); text-align: center; box-shadow: 0 0 60px rgba(0,0,0,.6); }
.cli-cta[hidden] { display: none; }
.cli-cta-cuenta:not(:empty) { font-family: var(--f-titulo); font-weight: 900; font-size: clamp(48px, 8vw, 90px); line-height: 1; color: #fff; text-shadow: 0 0 30px rgba(216,184,102,.6); }
.cli-cta-txt { margin: 0; font-size: 16px; letter-spacing: .04em; color: #dfe6f0; } .cli-cta-txt b { color: #ffe4a0; } .cli-cta-txt.cli-tu { color: #8fe0b0; font-size: 18px; }
.cli-cta select { margin: 0; width: auto; min-width: 160px; font-size: 15px; padding: 10px 12px; }
.cli-cta .cli-des { background: linear-gradient(180deg, #e9c978, #b58b2f); color: #1a1206; border: 0; padding: 22px 60px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; font-size: 28px; box-shadow: 0 8px 32px rgba(216,184,102,.45); animation: ctapulso 1.6s ease-in-out infinite; }
.cli-cta .cli-des:hover { filter: brightness(1.08); }
@keyframes ctapulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.cli-cta .cli-crear { padding: 14px 28px; font-size: 15px; }
.cli-login { color: #8fe0b0; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 1px solid #3a5c48; padding: 10px 22px; display: inline-block; }
.cli-entrar { position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.86); text-align: center; } .cli-entrar[hidden] { display: none; }
.cli-entrar h2 { font-family: var(--f-titulo); letter-spacing: .3em; color: var(--oro); } .cli-entrar p { color: #aab; max-width: 420px; margin: 12px auto 22px; line-height: 1.5; } .cli-ok { font-size: 18px; padding: 12px 40px; }
.cli-panel { position: fixed; right: 12px; top: 56px; width: min(340px, 92vw); max-height: 70vh; overflow-y: auto; padding: 14px 16px; background: rgba(8,9,14,.9); border: 1px solid rgba(216,184,102,.3); z-index: 6; } .cli-panel[hidden] { display: none; }
.cli-panel h3 { margin: 0 0 8px; font-size: 14px; letter-spacing: .12em; color: #ffe4a0; } .cli-panel p { color: #cfd6e3; font-size: 14px; } .cli-panel a { color: #ffd98a; }
.cli-ayuda { position: fixed; bottom: 0; left: 0; right: 0; padding: 8px 14px; font-size: 12px; letter-spacing: .05em; color: #9aa3b5; background: linear-gradient(0deg, rgba(0,0,0,.8), transparent); z-index: 5; } .cli-ayuda[hidden] { display: none; } .cli-ayuda b { color: #ffd98a; }