@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap");
/* Lobby de la portada: escenario de noche, muro a la izquierda, entradas de juego a la derecha, cinta abajo.
   Paleta del sitio: carbón (#141413 / #171a16), lima (#c5f04a) y papel (#efede4). */
.lb{position:relative;height:100vh;min-height:640px;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);color:var(--paper);background:#141413;overflow:hidden;font-family:Barlow,Arial,sans-serif}
.lb::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 50% 62%,rgba(197,240,74,.10),transparent 70%),radial-gradient(ellipse 100% 60% at 50% 0%,#20251d,transparent 70%)}
/* barra de arriba */
.lb-top{position:relative;z-index:3;display:flex;align-items:center;gap:28px;padding:18px 32px;border-bottom:1px solid var(--line)}
.lb-top .brand{font-size:27px}
.lb-nav{display:flex;gap:22px;font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}
.lb-nav a{color:#b9bfae}.lb-nav a:hover,.lb-nav a.on{color:var(--lima)}
.lb-estado{margin-left:auto;display:flex;align-items:center;gap:10px;font:600 12px/1 'JetBrains Mono',monospace;color:#b9bfae}
.lb-estado i{width:8px;height:8px;border-radius:50%;background:var(--lima);box-shadow:0 0 0 4px rgba(197,240,74,.18);animation:lb-late 1.6s infinite}
@keyframes lb-late{50%{box-shadow:0 0 0 8px rgba(197,240,74,0)}}
/* cuerpo: muro | escenario | entradas */
.lb-cuerpo{position:relative;display:grid;grid-template-columns:minmax(280px,340px) 1fr minmax(320px,390px);min-height:0}
.lb-escena{position:absolute;inset:0;width:100%;height:100%;min-width:0;touch-action:none;cursor:grab;z-index:0}
.lb-col{position:relative;z-index:2;display:flex;flex-direction:column;min-height:0;padding:22px}
.lb-col h2{font:800 13px/1 Barlow,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--lima);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.lb-col h2::after{content:'';flex:1;height:1px;background:var(--line)}
/* muro: una columna de papel oscuro */
.lb-muro{background:linear-gradient(90deg,#141413 70%,rgba(20,20,19,0))}
.lb-muro-c{overflow:auto;flex:1;padding-right:6px;scrollbar-width:thin;scrollbar-color:#3a4034 transparent}
.lb-muro .mu-nuevo{padding:12px;gap:8px;margin-bottom:14px;background:#1d211b}
.lb-muro .mu-nuevo [data-yo-av],.lb-muro .mu-cuenta-letras{display:none}
.lb-muro .mu-input{font-size:14px;padding:9px 11px}
.lb-muro .mu-publicar{padding:9px 16px;font-size:13px}
.lb-muro .mu-lista{columns:1}
.lb-muro .mu-post{padding:12px 12px 6px;gap:9px;margin-bottom:10px}
.lb-muro .mu-texto{font-size:14px}
.lb-muro .mu-av{width:32px;height:32px}
.lb-muro .mu-foto img{max-height:240px}
.lb-muro .mu-mas .button{padding:9px 14px;font-size:13px}
/* centro: título sobre el escenario y tu cartel */
.lb-centro{position:relative;z-index:1;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:26px 10px 22px}
.lb-titulo{text-align:center}
.lb-titulo .eyebrow{justify-content:center;color:#a7ad9e}
.lb-titulo h1{font:800 clamp(46px,5.6vw,92px)/.86 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:-1.5px;margin:12px 0 0;text-shadow:0 8px 40px rgba(0,0,0,.6)}
.lb-titulo h1 em{font-style:normal;color:var(--lima)}
.lb-yo{align-self:center;width:max-content;margin:0 auto;text-align:center;background:rgba(20,20,19,.72);border:1px solid var(--line);border-radius:100px;padding:8px 18px;backdrop-filter:blur(6px)}
.lb-yo b{display:block;font:800 18px/1.1 'Barlow Condensed',sans-serif;text-transform:uppercase}
.lb-yo span{font-size:11px;color:#a7ad9e;letter-spacing:.5px}
.lb-yo a{pointer-events:auto;color:var(--lima);font-size:11px;margin-left:6px}
.lb-ayuda{text-align:center;margin-top:8px;font:600 11px 'JetBrains Mono',monospace;color:#8d9483;letter-spacing:.5px}
.lb-ayuda kbd{border:1px solid #4a5143;border-radius:4px;padding:1px 6px;color:var(--paper)}
/* entradas de los juegos */
.lb-juegos{background:linear-gradient(270deg,#141413 70%,rgba(20,20,19,0))}
.lb-entradas{display:grid;grid-auto-rows:max-content;gap:8px;overflow:auto;flex:1;align-content:start;padding-right:4px;scrollbar-width:thin;scrollbar-color:#3a4034 transparent}
.lb-entrada{position:relative;display:grid;grid-template-columns:118px 1fr;grid-template-rows:auto auto;gap:4px 12px;align-items:center;color:var(--paper);background:#1d211bd9;border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;transition:transform .15s,border-color .15s,background .15s;backdrop-filter:blur(4px)}
.lb-entrada:hover{transform:translateX(-3px);border-color:#c5f04a66}
.lb-entrada.on{border-color:var(--lima);background:#232a1ee6;box-shadow:0 0 0 1px var(--lima),0 10px 30px #0008}
.lb-img{grid-row:span 2;position:relative;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#111}
.lb-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.lb-entrada:hover .lb-img img,.lb-entrada.on .lb-img img{transform:scale(1.06)}
.lb-img::after{content:'';position:absolute;inset:auto 0 0;height:4px;background:var(--c)}
.lb-txt{display:grid;gap:2px;min-width:0;align-self:end}
.lb-txt b{font:800 19px/1 'Barlow Condensed',sans-serif;text-transform:uppercase}
.lb-txt small{font-size:11.5px;line-height:1.3;color:#b9bfae;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lb-sala{position:absolute;top:4px;left:4px;font:700 9px 'JetBrains Mono',monospace;text-transform:uppercase;background:#141413cc;color:var(--lima);padding:2px 5px;border-radius:3px}
.lb-sala:empty{display:none}
.lb-jugar-chico{justify-self:start;align-self:start;font:800 13px 'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;background:var(--lima);color:#1b2213;border:0;border-radius:5px;padding:6px 14px;cursor:pointer}
.lb-jugar-chico:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* el casino: grande, con la mesa de Dobro */
.lb-entrada.grande{grid-template-columns:1fr;grid-template-rows:max-content;padding:0;overflow:hidden;border-color:#f2c94c77}
.lb-entrada.grande .lb-img{grid-row:auto;aspect-ratio:16/8;border-radius:0}
.lb-entrada.grande .lb-txt{position:absolute;left:14px;right:110px;bottom:12px;text-shadow:0 2px 8px #000}
.lb-entrada.grande .lb-txt b{font-size:26px;color:#f2c94c}
.lb-entrada.grande .lb-txt small{color:#efede4}
.lb-entrada.grande .lb-jugar-chico{position:absolute;right:12px;bottom:14px;background:#f2c94c;font-size:16px;padding:9px 18px}
.lb-jugar{margin-top:12px;display:grid;gap:4px;background:var(--lima);color:#1b2213;border-radius:6px;padding:16px 20px;font:800 34px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;box-shadow:0 0 0 0 rgba(197,240,74,.5);animation:lb-pulso 2.4s infinite}
.lb-jugar small{display:block;font:700 11px Barlow,sans-serif;letter-spacing:1.4px;opacity:.7}
.lb-jugar:hover{filter:brightness(1.06)}
@keyframes lb-pulso{60%{box-shadow:0 0 0 14px rgba(197,240,74,0)}}
/* cinta de abajo */
.lb-cinta{position:relative;z-index:3;border-top:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:11px 0;font-size:13px;color:#b9bfae;background:#141413}
.lb-cinta div{display:inline-block;animation:lb-cinta 70s linear infinite;padding-left:20px}
.lb-cinta b{color:var(--lima);margin-right:4px}
.lb-cinta i{font-style:normal;color:#4a5143;margin:0 18px}
@keyframes lb-cinta{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.lb-cinta div,.lb-jugar,.lb-estado i{animation:none}}
@media (max-width:1100px){
  .lb-cuerpo{grid-template-columns:minmax(250px,300px) 1fr minmax(270px,310px)}
  .lb-nav{gap:14px}
}
@media (max-width:860px){
  .lb{height:auto;min-height:0}
  .lb-top{padding:14px 18px;gap:12px;flex-wrap:wrap}
  .lb-top .button{padding:10px 14px;font-size:12px;gap:10px}
  .lb-estado span{display:none}
  .lb-col{padding:18px 16px}
  .lb-titulo h1{font-size:44px}
  .lb-nav{order:3;width:100%;overflow:auto;gap:18px}
  .lb-cuerpo{display:flex;flex-direction:column}
  .lb-escena{position:relative;height:62vh;order:1}
  .lb-centro{position:absolute;left:0;right:0;top:0;height:62vh;order:1}
  .lb-juegos{order:2;background:none}
  .lb-muro{order:3;background:none;max-height:90vh}
  .lb-ayuda{display:none}
}

/* lobbys compartidas */
.lb-lobbys{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);color:var(--paper);border-radius:6px;padding:10px 14px;font:700 12px Barlow,sans-serif;letter-spacing:1.4px;text-transform:uppercase;cursor:pointer}
.lb-lobbys b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#2a3025;color:var(--lima);font-size:13px;letter-spacing:0}
.lb-lobbys.con-gente{border-color:var(--lima)}.lb-lobbys.con-gente b{background:var(--lima);color:#1b2213}
.lb-lobbys:hover{border-color:#c5f04a99}
.lb-jugar.esperando{background:#2a3025;color:var(--paper);animation:none;cursor:default}
.gr-fondo{position:fixed;inset:0;z-index:40;background:#0008}
.gr-panel{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(420px,100vw);background:#171a16;border-left:1px solid var(--line);overflow:auto;padding:20px;color:var(--paper);font-family:Barlow,Arial,sans-serif;box-shadow:-20px 0 60px #000a}
.gr-panel[hidden],.gr-fondo[hidden]{display:none}
.gr-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.gr-panel h2{font:800 34px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;margin:0}
.gr-panel h3{font:800 13px/1 Barlow,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--lima);margin:22px 0 10px;display:flex;justify-content:space-between}
.gr-panel h3 .mono{font-family:'JetBrains Mono',monospace;color:#b9bfae;letter-spacing:1px}
.gr-cerrar{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--paper);font-size:24px;cursor:pointer}
.gr-miembros{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gr-miembros li,.gr-fila{display:flex;align-items:center;gap:10px;background:#1d211b;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.gr-miembros li span:not(.gr-cara){flex:1;font-weight:600}
.gr-miembros small{color:#a7ad9e;font-weight:500}
.gr-miembros em{font-style:normal;font:700 10px 'JetBrains Mono',monospace;text-transform:uppercase;color:#1b2213;background:var(--lima);padding:3px 7px;border-radius:4px}
.gr-cara{display:inline-block;width:36px;height:36px;border-radius:50%;overflow:hidden;flex:none}
.gr-cara svg{width:100%;height:100%;display:block}
.gr-caras{display:flex}.gr-caras .gr-cara{width:30px;height:30px;margin-right:-8px;border:2px solid #1d211b}
.gr-txt{flex:1;display:grid;gap:2px;min-width:0;margin-left:6px}
.gr-txt b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-txt small{font-size:12px;color:#a7ad9e}
.gr-fila{margin-bottom:8px}
.gr-flecha{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--lima);color:#1b2213;display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.gr-flecha svg{width:22px;height:22px}
.gr-flecha:hover{transform:translateX(3px) scale(1.06)}
.gr-flecha:disabled{opacity:.4;cursor:default}
.gr-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.gr-switch{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;width:100%}
.gr-switch input{accent-color:#c5f04a;width:18px;height:18px}
.gr-switch span{display:none}
.gr-vacio{color:#a7ad9e;font-size:14px}.gr-vacio a{color:var(--lima)}
.gr-invitacion{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;background:#1d211b;border:1px solid var(--lima);border-radius:10px;padding:12px 14px;color:var(--paper);box-shadow:0 14px 40px #000a;font-family:Barlow,Arial,sans-serif}
.gr-invitacion .btn-lima svg{width:14px;height:14px;vertical-align:-2px}
@media (max-width:860px){.lb-lobbys{padding:8px 10px}}
.gr-btn{flex:none;font:700 12px Barlow,sans-serif;letter-spacing:.5px;color:var(--paper);background:#2a3025;border:1px solid var(--line);border-radius:6px;padding:8px 12px;cursor:pointer}
.gr-btn:hover{border-color:#c5f04a88}.gr-btn:disabled{opacity:.6;cursor:default}
.gr-btn.lima{background:var(--lima);color:#1b2213;border-color:var(--lima)}
.gr-btn svg{width:14px;height:14px;vertical-align:-2px}
.gr-config{display:grid;gap:9px;margin-top:18px;padding:14px;border:1px solid #c5f04a55;border-radius:12px;background:#c5f04a0b}
.gr-config h3{margin:0}.gr-config p{margin:0;color:#bac5b4;font-size:13px;line-height:1.4}
.gr-config label{display:grid;gap:5px;color:#d5ddce;font-size:12px;font-weight:700}
.gr-select{width:100%;background:#20261d;color:#efede4;border:1px solid #718066;border-radius:8px;padding:9px 10px;font:600 14px Barlow,Arial,sans-serif}
.gr-select:disabled{opacity:.68}.gr-config [data-gr-jugar]{font-size:14px;margin-top:5px;padding:12px}

/* lugares libres para sumar gente */
.lb-invitar{position:absolute;inset:0;z-index:1;pointer-events:none}
.lb-mas{position:absolute;left:0;top:0;pointer-events:auto;display:grid;justify-items:center;gap:6px;background:none;border:0;color:var(--paper);cursor:pointer}
.lb-mas span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:2px dashed #c5f04a99;background:rgba(20,20,19,.55);color:var(--lima);transition:transform .15s,background .15s}
.lb-mas svg{width:26px;height:26px}
.lb-mas small{font:700 10px Barlow,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#b9bfae}
.lb-mas:hover span{transform:scale(1.08);background:var(--lima);color:#1b2213;border-style:solid}

/* fondo épico: el póster del juego elegido detrás del escenario, con luces que barren */
.lb-fondo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.lb-fondo-capa{position:absolute;inset:-4%;background:center/cover no-repeat;opacity:0;transform:scale(1.08);transition:opacity .7s,transform 7s ease-out;filter:saturate(1.15) brightness(.62)}
.lb-fondo-capa.ver{opacity:1;transform:scale(1)}
.lb-fondo::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 50% 55%,transparent 30%,#141413ee 100%),linear-gradient(180deg,#141413cc 0%,transparent 25%,transparent 60%,#141413 100%)}
.lb-luces{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.lb-luces i{position:absolute;top:-20%;width:18%;height:140%;background:linear-gradient(90deg,transparent,rgba(197,240,74,.10),transparent);transform:rotate(18deg);animation:lb-barre 9s linear infinite}
.lb-luces i:nth-child(2){animation-delay:3s;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
.lb-luces i:nth-child(3){animation-delay:6s}
@keyframes lb-barre{from{left:-25%}to{left:110%}}
.lb-escena{z-index:1}.lb-col{z-index:3}.lb-centro{z-index:2}
.lb-muro,.lb-juegos{background:linear-gradient(90deg,#141413f2 60%,rgba(20,20,19,.4))}
.lb-juegos{background:linear-gradient(270deg,#141413f2 60%,rgba(20,20,19,.4))}
@media (prefers-reduced-motion:reduce){.lb-luces i{animation:none;display:none}.lb-fondo-capa{transition:opacity .3s}}

.brand .brand-logo{width:34px;height:34px;display:block;flex:none}
/* Agregar amigos (panel de Lobbys) */
.gr-agregar{display:flex;gap:8px;margin-bottom:10px}
.gr-agregar input{flex:1;min-width:0;background:#141713;border:1px solid var(--line);border-radius:6px;color:var(--paper);font:600 14px Barlow,sans-serif;padding:8px 10px}
.gr-agregar input:focus{outline:none;border-color:#c5f04a99}
.gr-sub{margin:12px 0 6px;font:700 11px 'JetBrains Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;color:#a7ad9e}

/* celular: la cabecera entra en un solo renglón (marca, lobbys y cuenta) y el menú va abajo */
@media (max-width:520px){
  .lb-top{padding:12px 14px;gap:10px}
  .lb-top .brand{font-size:21px;gap:8px}
  .lb-top .brand-logo{width:28px!important;height:28px!important}
  .lb-estado{display:none}
  .lb-lobbys{margin-left:auto;padding:8px 10px;letter-spacing:1px}
  .lb-top [data-cuenta]{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;padding:9px 12px}
  .lb-nav{scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:26px}
  .lb-nav::-webkit-scrollbar{display:none}
}