/* Estilo del lobby igualado al del index: paleta azul marino, Exo 2 + Staatliches, botones inclinados, esquinas casi rectas.
   Se carga DESPUÉS de overlays.css y ANTES de halloween.css (así el tema Halloween sigue pisando colores). */
:root{
  --bg:#08101f; --panel:#101f3b; --panel2:#0c1a33; --border:#25416f;
  --text:#eef4ff; --dim:#a7b8d8; --accent:#5b9cf6; --err:#ff6b6b;
  --ice:#cfe2ff; --cy:#5fd0ff; --dk:#07122a; --ok:#6dff8c; --r:2px;
  --f:"Exo 2",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fd:"Staatliches",Impact,"Arial Narrow",sans-serif;
}
html,body{font-family:var(--f);}
button,input,select,textarea{font-family:var(--f);}

/* Panel lateral: barra de color arriba como el panel del index */
#sidebar{background:var(--panel);}
#sidebar::before{content:"";flex:none;height:3px;background:linear-gradient(90deg,var(--cy),var(--accent),transparent);}
::-webkit-scrollbar-thumb{background:var(--border);}

/* Marca */
.brand img{border-radius:0;object-fit:contain;background:none;}
.brand small{font:400 15px/1 var(--fd);letter-spacing:.1em;text-transform:uppercase;color:var(--cy);margin-top:4px;}

/* Títulos de sección: Staatliches con las rayas diagonales del index */
.section h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:400 22px/1 var(--fd);letter-spacing:.06em;color:var(--text);}
.section h3::after{content:"";flex:1;min-width:12px;height:10px;background:repeating-linear-gradient(115deg,var(--border) 0 3px,transparent 3px 9px);}
.section h3 span{color:var(--cy);margin-left:0;}
#topDetails>summary{font:400 22px/1 var(--fd);letter-spacing:.06em;color:var(--text);}
#topDetails>summary:hover{color:var(--cy);}

/* Botones de acción: forma inclinada, mayúsculas y degradado en los principales */
#copyBtn,#goBtn,#backBtn,#playBtn,#resetBtn,#dnReal,#hwConfettiTest,#pmDownload,#connectBtn,#tvConfirm .btns button{
  font:700 14px var(--f);letter-spacing:.06em;text-transform:uppercase;border:0;border-radius:0;
  background:#ffffff1c;color:var(--text);padding:11px 20px;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:filter .2s,transform .15s;}
#copyBtn:hover,#goBtn:hover,#backBtn:hover,#playBtn:hover,#resetBtn:hover,#dnReal:hover,#hwConfettiTest:hover,#pmDownload:hover,#connectBtn:hover,#tvConfirm .btns button:hover{filter:brightness(1.25);}
#copyBtn:active,#goBtn:active,#backBtn:active,#playBtn:active,#resetBtn:active,#dnReal:active,#hwConfettiTest:active,#pmDownload:active,#connectBtn:active{transform:translateY(1px);}
#copyBtn:focus-visible,#goBtn:focus-visible,#backBtn:focus-visible,#playBtn:focus-visible,#resetBtn:focus-visible,#dnReal:focus-visible,#hwConfettiTest:focus-visible,#pmDownload:focus-visible,#connectBtn:focus-visible,#tvConfirm .btns button:focus-visible{outline:0;background:var(--ice);color:var(--dk);}
#goBtn,#connectBtn,#tvConfirm .btns #tvConfirmYes{background:linear-gradient(var(--cy),var(--accent));color:var(--dk);}
#connectRow{gap:2px;}

/* Campos y tarjetas: esquinas de 2px como el index */
#steamInput,select{border-radius:var(--r);background:var(--panel2);}
#steamInput{padding:11px 12px;}
#steamInput:focus{outline:2px solid var(--cy);outline-offset:0;}
#nameResults button,.hat,.lobbyBtn,#tvConfirm .url{border-radius:var(--r);}
#tvConfirm .box{border-radius:var(--r);}
#fps{border-radius:var(--r);background:rgba(8,16,31,.75);}
.chatBubble{border-radius:var(--r);background:rgba(8,16,31,.9);}
.chatBubble{background:color-mix(in srgb,var(--bg) 90%,transparent);}

/* Avisos */
#eventBanner{border-radius:var(--r);font:400 19px/1.2 var(--fd);letter-spacing:.05em;}
.bdayBanner{border-radius:var(--r);font:400 24px/1.15 var(--fd);letter-spacing:.04em;}

/* Cartelito del logo */
#homeTip{font:400 17px/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r);}

/* Botón "Descargar playermodel" como barra de carga: se llena con el color del tema y al completarse se pone verde */
#pmDownload.dl{background:linear-gradient(90deg,var(--cy),var(--accent)) 0 0/var(--dlw,0%) 100% no-repeat,#ffffff1c;
  color:var(--text);text-shadow:0 1px 3px rgba(0,0,0,.65);font-variant-numeric:tabular-nums;transition:background-size .2s linear,filter .2s;}
#pmDownload.done{background:var(--ok);color:#04210f;text-shadow:none;}
@media (prefers-reduced-motion:reduce){#pmDownload.dl{transition:none;}}

/* Barra de nivel igual a la del index: encabezado en Exo 2, pastilla con borde y barra redondeada de 10px */
.lvlHead{align-items:baseline;gap:8px;margin-bottom:8px;}
.lvlHead b{font:700 20px/1.2 var(--f);letter-spacing:0;}
.lvlHead .of{color:var(--dim);font-size:13px;}
.resetPill{padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:0;background:transparent;border:1px solid var(--accent);color:var(--accent);}
.lvlBar{height:10px;border:0;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:0 0 10px;}
.lvlBar i{border-radius:99px;background:linear-gradient(90deg,var(--cy),var(--accent));transition:width .5s;}
@media (prefers-reduced-motion:reduce){.lvlBar i{transition:none;}}

/* Cuenta de Steam (arriba a la derecha del visor): foto + nombre con menú Perfil / Salir, como el del index */
#acct{position:absolute;top:12px;right:12px;z-index:8;}
#acct[hidden]{display:none;}
#fps{top:68px;}
.ac-b{display:flex;align-items:center;gap:10px;padding:5px 22px 5px 14px;font:700 14px/1 var(--f);letter-spacing:0;text-transform:none;border:0;border-radius:0;color:var(--text);
  background:rgba(8,16,31,.78);background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:filter .2s;}
.ac-b:hover{filter:brightness(1.25);}
.ac-b:focus-visible{outline:0;background:var(--ice);color:var(--dk);}
.ac-b img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;}
.ac-n{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ac-c{font-style:normal;font-size:11px;color:var(--dim);transition:transform .2s;}
.ac-b[aria-expanded="true"] .ac-c{transform:rotate(180deg);}
.ac-m{position:absolute;top:calc(100% + 8px);right:0;min-width:100%;display:flex;flex-direction:column;background:var(--panel2);border:1px solid var(--border);box-shadow:0 18px 50px rgba(0,0,0,.6);}
.ac-m[hidden]{display:none;}
.ac-m a,.ac-m button{display:block;width:100%;padding:13px 22px;text-align:left;white-space:nowrap;text-decoration:none;border:0;border-radius:0;clip-path:none;background:none;color:var(--text);font:400 19px/1 var(--fd);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;}
.ac-m a:hover,.ac-m button:hover{background:#ffffff14;filter:none;}
.ac-m a:focus-visible,.ac-m button:focus-visible{outline:0;background:var(--ice);color:var(--dk);}
.ac-m button{border-top:1px solid var(--border);}
.ac-login{display:inline-flex;align-items:center;padding:11px 20px;font:700 13px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--dk);
  background:linear-gradient(var(--cy),var(--accent));clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:filter .2s;}
.ac-login:hover{filter:brightness(1.15);}
.ac-login:focus-visible{outline:0;background:var(--ice);}
.acModal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:16px;}
.acModal .box{width:100%;max-width:320px;padding:16px;border:1px solid var(--border);border-radius:var(--r);background:var(--panel);color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:8px;}
.acModal .box b{font:400 24px/1.1 var(--fd);letter-spacing:.04em;}
.acModal .box span{font-size:13px;color:var(--dim);}
.acModal .btns{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}
.acModal .btns button{font:700 14px var(--f);letter-spacing:.06em;text-transform:uppercase;border:0;border-radius:0;background:#ffffff1c;color:var(--text);padding:11px 20px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);}
.acModal .btns button:hover{filter:brightness(1.25);}
.acModal .btns button:focus-visible{outline:0;background:var(--ice);color:var(--dk);}
.acModal .btns .acOk{background:linear-gradient(var(--cy),var(--accent));color:var(--dk);}
@media (max-width:560px){.ac-n{display:none;}.ac-b{padding:5px 18px 5px 12px;}}   /* en celular solo la foto, para no tapar el ojito del televisor */
@media (prefers-reduced-motion:reduce){.ac-b,.ac-c,.ac-login{transition:none;}}