/* Pantalla JUGAR: lobby con tarjetas de modo y mapa, barra inferior con equipo, bots y botón principal.
   Usa los tokens de index.html (--ac, --t, --ct, --title…). En Jugar no se muestra la columna lateral. */
body.play-page #lobby{display:none}
body.play-page .body{grid-template-columns:1fr;max-width:1560px}

.lb{--gold:#f2b544;--gold2:#ffe29a;display:grid;gap:22px;padding-bottom:8px;animation:lbIn .5s ease both}
.lb-head{position:relative;padding:6px 2px 0}
.lb-kicker{display:block;font:600 11px var(--title);letter-spacing:.32em;color:var(--gold)}
.lb-head h1{margin:6px 0 4px;font:800 clamp(38px,4.4vw,60px)/1 var(--title);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.lb-head p{margin:0;max-width:620px;color:#b9c1c9;font-size:15px}
.lb-sec{display:grid;gap:12px}
.lb-sec-h{display:flex;align-items:center;gap:12px}
.lb-sec-h span{font:700 12px var(--num);color:#0b0f12;background:var(--gold);padding:2px 7px;border-radius:2px;letter-spacing:.08em}
.lb-sec-h h2{margin:0;font:700 15px var(--title);letter-spacing:.2em;text-transform:uppercase}
.lb-sec-h::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(242,181,68,.45),transparent 70%)}

/* ---------- tarjetas comunes ---------- */
.lb-mode,.lb-map{position:relative;overflow:hidden;isolation:isolate;text-align:left;color:#f2efe8;cursor:pointer;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#11161b;
  box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease,filter .35s ease}
.lb-mode:hover,.lb-map:not(:disabled):hover,.lb-mode:focus-visible,.lb-map:focus-visible{transform:translateY(-4px);border-color:rgba(242,181,68,.55);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(242,181,68,.25),0 0 30px rgba(242,181,68,.12)}
.lb-mode:active,.lb-map:not(:disabled):active{transform:translateY(-1px) scale(.99)}
.lb-mode.on,.lb-map.on{border-color:var(--gold);box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px var(--gold),0 0 34px rgba(242,181,68,.28)}
/* el borde del seleccionado se recorre con un brillo una vez al seleccionarlo */
.lb-mode.on::after,.lb-map.on::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:3;padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--gold2) 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:lbSweep 1.2s ease-out both}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes lbSweep{from{--a:0deg;opacity:1}to{--a:360deg;opacity:0}}
.lb-modes:has(.on) .lb-mode:not(.on):not(:hover),.lb-maps:has(.on) .lb-map:not(.on):not(:hover){filter:saturate(.7) brightness(.82)}
.lb-check{position:absolute;top:10px;right:10px;z-index:4;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:13px;font-weight:900;color:#1b1407;background:var(--gold);box-shadow:0 0 14px rgba(242,181,68,.6);opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .35s cubic-bezier(.2,1.5,.4,1)}
.on>.lb-check{opacity:1;transform:none}

/* ---------- modos ---------- */
.lb-modes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.lb-mode{grid-column:span 3}
.lb-mode:nth-last-child(-n+3):nth-child(4n+1),.lb-mode:nth-last-child(-n+3):nth-child(4n+1)~.lb-mode{grid-column:span 4}
.lb-mode:nth-last-child(-n+2):nth-child(4n+1),.lb-mode:nth-last-child(-n+2):nth-child(4n+1)~.lb-mode{grid-column:span 6}
.lb-mode:last-child:nth-child(4n+1){grid-column:span 12}
.lb-mode{min-height:172px;padding:0}
.lb-mode::before{content:'';position:absolute;inset:-6%;z-index:-2;background:var(--bg) var(--pos)/cover no-repeat;filter:brightness(.42) saturate(.8);transform:scale(1.02);transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s ease}
.lb-mode-art{position:absolute;inset:0;z-index:-1;background:linear-gradient(112deg,rgba(9,12,15,.95) 0%,rgba(9,12,15,.75) 45%,transparent 100%),linear-gradient(0deg,color-mix(in srgb,var(--tint) 32%,transparent),transparent 70%)}
.lb-mode-art img{position:absolute;right:-6px;top:50%;width:112px;height:112px;object-fit:contain;transform:translateY(-50%) rotate(-6deg);filter:drop-shadow(0 8px 18px rgba(0,0,0,.6));opacity:.92;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.lb-mode:hover::before{transform:scale(1.1);filter:brightness(.5) saturate(.95)}
.lb-mode:hover .lb-mode-art img{transform:translateY(-54%) rotate(0deg) scale(1.08)}
.lb-mode-copy{position:relative;display:grid;align-content:end;gap:3px;height:100%;min-height:172px;padding:16px 108px 16px 16px;transition:transform .35s ease}
.lb-mode:hover .lb-mode-copy{transform:translateY(-3px)}
.lb-mode-copy small{font:600 11px var(--title);letter-spacing:.16em;text-transform:uppercase;color:var(--tint)}
.lb-mode-copy b{font:800 22px/1.05 var(--title);letter-spacing:.03em;text-transform:uppercase}
.lb-mode-copy em{font-style:normal;font-size:12px;color:#aeb7c0}
/* la descripción aparece al pasar el ratón o con el modo seleccionado, sin mover el resto */
.lb-mode-desc{display:block;max-height:0;opacity:0;overflow:hidden;font-size:12.5px;line-height:1.35;color:#d6dbe0;transition:max-height .4s ease,opacity .35s ease}
.lb-mode:hover .lb-mode-desc,.lb-mode.on .lb-mode-desc{max-height:52px;opacity:1}

/* ---------- mapas ---------- */
.lb-maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.lb-map{aspect-ratio:16/7.5;min-height:180px;padding:0}
.lb-map-img{position:absolute;inset:0;z-index:-2;background:var(--img) center/cover no-repeat;transform:scale(1.02);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s ease}
.lb-map::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,9,11,.92) 0%,rgba(7,9,11,.35) 45%,rgba(7,9,11,.05) 75%),linear-gradient(90deg,rgba(7,9,11,.55),transparent 55%)}
.lb-map:not(:disabled):hover .lb-map-img{transform:scale(1.08)}
.lb-map-emblem{position:absolute;left:14px;top:12px;width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.7));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.lb-map:not(:disabled):hover .lb-map-emblem{transform:translateY(-3px) scale(1.06)}
.lb-map-copy{position:absolute;left:16px;right:16px;bottom:14px;display:grid;gap:2px;transition:transform .35s ease}
.lb-map:not(:disabled):hover .lb-map-copy{transform:translateY(-3px)}
.lb-map-copy small{font:600 11px var(--title);letter-spacing:.18em;color:#b9c1c9}
.lb-map.on .lb-map-copy small{color:var(--gold2)}
.lb-map-copy b{font:800 clamp(22px,2vw,28px)/1 var(--title);letter-spacing:.05em;text-transform:uppercase;text-shadow:0 3px 16px rgba(0,0,0,.8)}
.lb-map.soon{cursor:default;filter:grayscale(.9) brightness(.6)}

/* ---------- barra inferior: equipo, bots y botón principal ---------- */
.lb-bar{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.9fr) minmax(260px,1fr);gap:16px;align-items:stretch;padding:14px;border:1px solid rgba(242,181,68,.28);border-radius:10px;
  background:linear-gradient(180deg,rgba(20,25,30,.92),rgba(11,14,17,.95));backdrop-filter:blur(10px);box-shadow:0 -10px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(242,181,68,.25)}
.lb-team{display:grid;gap:7px;min-width:0}
.lb-team>small,.lb-bots small{font-size:11px;letter-spacing:.14em;color:#9aa4ae}
.lb-team-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lb-team-opt{display:flex;align-items:center;gap:9px;min-width:0;padding:9px 10px;text-align:left;color:#e6e2da;cursor:pointer;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(255,255,255,.03);transition:border-color .25s ease,background .25s ease,transform .2s ease}
.lb-team-opt img,.lb-auto{flex:0 0 28px;width:28px;height:28px;object-fit:contain;display:grid;place-items:center;font-size:18px;color:#c9d0d6}
.lb-team-opt span{display:grid;min-width:0}
.lb-team-opt b{font:700 13px var(--title);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-team-opt small{font-size:11px;color:#8f99a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-team-opt:hover{border-color:rgba(242,181,68,.5);background:rgba(242,181,68,.06)}
.lb-team-opt:active{transform:scale(.97)}
.lb-team-opt.on{border-color:var(--gold);background:rgba(242,181,68,.12);box-shadow:inset 0 0 0 1px rgba(242,181,68,.4)}
.lb-team-opt.tT.on{border-color:var(--t);background:rgba(224,162,58,.14)}
.lb-team-opt.tCT.on{border-color:var(--ct);background:rgba(90,166,234,.14);box-shadow:inset 0 0 0 1px rgba(90,166,234,.4)}
.lb-bots{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:rgba(255,255,255,.03);transition:border-color .25s ease}
.lb-bots:hover{border-color:rgba(242,181,68,.45)}
.lb-bots input{position:absolute;opacity:0;pointer-events:none}
.lb-bots b{display:block;font:700 13px var(--title);letter-spacing:.06em;text-transform:uppercase}
.lb-switch{position:relative;flex:0 0 46px;height:24px;border-radius:12px;background:#2a333c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .25s ease}
.lb-switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#c9d0d6;transition:transform .3s cubic-bezier(.2,1.4,.4,1),background .25s ease}
.lb-bots input:checked+.lb-switch{background:linear-gradient(90deg,#c9911f,var(--gold))}
.lb-bots input:checked+.lb-switch::after{transform:translateX(22px);background:#1b1407}
.lb-bots input:focus-visible+.lb-switch{outline:2px solid var(--gold2);outline-offset:2px}
.lb-go{position:relative;overflow:hidden;display:grid;align-content:center;gap:2px;padding:12px 22px;border:0;border-radius:8px;cursor:pointer;color:#1b1407;text-align:center;
  background:linear-gradient(180deg,#ffd27a,#f2a33a 55%,#d9822a);box-shadow:0 10px 30px rgba(242,163,58,.35),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .2s ease,box-shadow .3s ease,filter .3s ease}
.lb-go b{font:800 clamp(18px,1.6vw,22px) var(--title);letter-spacing:.12em}
.lb-go small{font-size:12.5px;font-weight:700;color:#3d2606;letter-spacing:.04em}
.lb-go::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .7s ease}
.lb-go:hover{box-shadow:0 14px 40px rgba(242,163,58,.55),0 0 0 1px rgba(255,226,154,.6),inset 0 1px 0 rgba(255,255,255,.6);filter:brightness(1.05)}
.lb-go:hover::after{left:125%}
.lb-go:active{transform:scale(.98)}
.lb-go:disabled{cursor:not-allowed;filter:grayscale(1) brightness(.6);box-shadow:none}
.lb-go:disabled::after{display:none}
/* buscando: franjas en movimiento y pulso suave (es el único estado con animación continua) */
.lb-go.searching{background:repeating-linear-gradient(-45deg,#e8a33d 0 14px,#d38a2c 14px 28px);background-size:40px 40px;animation:lbStripes 1s linear infinite,lbPulse 1.6s ease-in-out infinite}
.lb-go.live{background:linear-gradient(180deg,#9fe39a,#5fc77a 55%,#3f9c56);box-shadow:0 10px 30px rgba(95,199,122,.35)}
@keyframes lbStripes{to{background-position:40px 0}}
@keyframes lbPulse{50%{box-shadow:0 10px 40px rgba(242,163,58,.6),0 0 0 3px rgba(242,181,68,.25)}}
@keyframes lbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ventanas: misma entrada para todos los modales (fundido y escala); el cierre sigue como estaba */
#modal.show>.mb{animation:lbModal .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes lbModal{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}

/* ---------- adaptación ---------- */
@media (max-width:1366px){.lb-mode,.lb-mode-copy{min-height:156px}.lb-mode-art img{width:96px;height:96px}.lb-mode-copy{padding-right:94px}}
@media (max-width:1180px){.lb-bar{grid-template-columns:1fr 1fr}.lb-team{grid-column:1/-1}.lb-modes{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.lb-modes .lb-mode{grid-column:auto!important}.lb-mode-art img{width:72px;height:72px}.lb-mode-copy{padding-right:80px}}
@media (max-width:760px){.lb-bar{grid-template-columns:1fr;position:static}.lb-team-opts{grid-template-columns:1fr}.lb-maps{grid-template-columns:1fr}.lb-head h1{font-size:36px}}
@media (max-height:760px){.lb{gap:16px}.lb-map{min-height:150px}}
body.rm .lb,body.rm .lb-mode,body.rm .lb-map,body.rm .lb-mode::before,body.rm .lb-map-img,body.rm .lb-go{animation:none!important;transition:none!important}
body.rm .lb-mode.on::after,body.rm .lb-map.on::after{display:none}
@media (prefers-reduced-motion:reduce){.lb,.lb-mode,.lb-map,.lb-mode::before,.lb-map-img,.lb-mode-art img,.lb-go,.lb-check,.lb-switch::after{animation:none!important;transition:none!important}.lb-mode.on::after,.lb-map.on::after{display:none}}

/* ---------- avatares de jugador (catálogo único en js/avatars.js) ---------- */
.av-img,.sb-av,.fpic-img,.fin-tag-av{display:block;object-fit:cover;object-position:center;background:#0b0f12;user-select:none}
.pic.av-pic{display:block;flex:0 0 46px;width:46px;height:46px;padding:0;overflow:visible;border-radius:8px;background:transparent;border:0;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.pic.av-pic .av-img{width:100%;height:100%}
.slot.me .pic.av-pic,.frow.on .pic.av-pic{border-color:var(--ac);box-shadow:0 0 0 1px rgba(242,163,58,.5),0 4px 14px rgba(0,0,0,.4)}
/* marcador: avatar junto al nombre, sin aumentar demasiado la fila */
#sb td.sb-name{display:flex;align-items:center;gap:9px}
.sb-av{flex:0 0 30px;width:30px;height:30px;border-radius:6px;border:1px solid rgba(255,255,255,.18)}
#sb tr.me .sb-av{border-color:var(--ac);box-shadow:0 0 0 1px rgba(242,163,58,.45)}
/* galería de avatares en Perfil */
.av-gallery{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))!important}
.av-gallery .profile-icon-option .glyph{width:96px;height:96px;border-radius:10px;overflow:hidden}
.av-gallery .profile-icon-option .glyph img{width:100%;height:100%;object-fit:cover}
.av-gallery .profile-icon-option{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.av-gallery .profile-icon-option:hover{transform:translateY(-3px)}
.av-gallery .profile-icon-option.on{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac),0 0 22px rgba(242,163,58,.3)}
.av-actions{justify-content:flex-start;margin:12px 0 4px}
.profile-avatar img,#avatar img{object-fit:cover}

/* información secundaria del mapa (datos reales del mapa) y transición al seleccionarlo */
.lb-map-info{display:block;max-height:0;opacity:0;overflow:hidden;font-size:12.5px;color:#d6dbe0;letter-spacing:.03em;transition:max-height .4s ease,opacity .35s ease,margin .35s ease}
.lb-map:not(:disabled):hover .lb-map-info,.lb-map.on .lb-map-info{max-height:22px;opacity:1;margin-top:3px}
.lb-map:not(:disabled):hover .lb-map-img{filter:brightness(1.12) saturate(1.08)}
.lb-map.on .lb-map-img{animation:lbMapIn .9s cubic-bezier(.2,.8,.2,1)}
@keyframes lbMapIn{0%{transform:scale(1.14);filter:brightness(1.5) saturate(1.2)}100%{transform:scale(1.02);filter:none}}
@media (prefers-reduced-motion:reduce){.lb-map.on .lb-map-img{animation:none}}
body.rm .lb-map.on .lb-map-img{animation:none}

/* ---------- Jugar en una sola pantalla, sin scroll (escritorio) ---------- */
#avatar img{padding:0;border-radius:50%}
@media (min-width:1100px) and (min-height:640px){
  body.play-page .body{height:calc((100dvh - var(--top-h,68px)) / var(--ui,1));padding-block:14px;overflow:hidden}
  body.play-page #page{height:100%;min-height:0}
  body.play-page .lb{height:100%;display:flex;flex-direction:column;gap:12px;padding-bottom:0}
  body.play-page .lb-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;padding:0}
  body.play-page .lb-kicker{flex-basis:100%}
  body.play-page .lb-head h1{margin:0;font-size:clamp(30px,3.4vh,40px)}
  body.play-page .lb-head p{font-size:14px}
  body.play-page .lb-sec{gap:8px}
  /* modos: una fila de siete tarjetas compactas */
  body.play-page .lb-modes{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:10px}
  body.play-page .lb-modes .lb-mode{grid-column:auto!important}
  body.play-page .lb-mode,body.play-page .lb-mode-copy{min-height:clamp(112px,16vh,158px)}
  body.play-page .lb-mode-copy{padding:12px}
  body.play-page .lb-mode-art img{top:10px;right:8px;width:clamp(48px,6vh,66px);height:clamp(48px,6vh,66px);transform:none}
  body.play-page .lb-mode:hover .lb-mode-art img{transform:scale(1.08)}
  body.play-page .lb-mode-copy b{font-size:clamp(15px,1.15vw,19px)}
  body.play-page .lb-mode-copy small{font-size:10px;letter-spacing:.12em}
  body.play-page .lb-mode-copy em{display:none}
  body.play-page .lb-mode-desc{font-size:11.5px}
  body.play-page .lb-mode:hover .lb-mode-desc,body.play-page .lb-mode.on .lb-mode-desc{max-height:46px}
  /* mapas: ocupan todo el alto libre */
  body.play-page .lb>div.lb-sec:nth-of-type(2){flex:1;min-height:0;grid-template-rows:auto minmax(0,1fr)}
  body.play-page .lb-maps{height:100%;min-height:0}
  body.play-page .lb-map{aspect-ratio:auto;height:100%;min-height:120px}
  body.play-page .lb-bar{padding:10px 12px}
}