/* Panel lateral: marca, servidor, buscador, perfil, niveles, accesorios, lobby, toggles y responsive */
.brand{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);}
.brand img{width:46px;height:46px;border-radius:12px;object-fit:cover;flex-shrink:0;background:var(--panel2);}
.brand b{font-size:16px;line-height:1.2;}
.brand small{display:block;color:var(--dim);font-size:12px;margin-top:2px;}
#srvMap{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%;}
#connectRow{display:flex;gap:6px;margin-top:6px;}
#srvRate{gap:0 !important;white-space:nowrap;}
#srvRate .star{font-size:17px;line-height:1;background:linear-gradient(90deg,#f6c445 var(--f),rgba(255,255,255,.18) var(--f));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
#srvRate .rateTxt{margin-left:8px;font-size:13px;color:var(--dim);}
#connectBtn{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:8px;background:var(--accent);border:1px solid var(--accent);color:#fff;font-weight:600;font-size:13px;text-decoration:none;}
#connectBtn:hover{filter:brightness(1.1);}
#srvAddr{font-size:12px;color:var(--dim);margin-top:8px;word-break:break-all;}
#sidebar{width:340px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;}
.section{padding:14px 16px;border-bottom:1px solid var(--border);}
.section h3{margin:0 0 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
.section h3 span{color:var(--text);margin-left:4px;}

#lookup{display:flex;gap:6px;}
#nameResults{margin-top:8px;display:flex;flex-direction:column;gap:4px;}
#nameResults[hidden]{display:none;}
#nameResults button{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:13px;cursor:pointer;}
#nameResults button:hover,#nameResults button:focus{border-color:var(--accent);outline:none;}
#nameResults .n{white-space:normal;overflow-wrap:anywhere;min-width:0;}
#nameResults .i{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums;flex-shrink:0;}
#steamInput{flex:1;min-width:0;padding:10px 11px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:14px;}
#steamInput:focus{outline:1px solid var(--accent);}
button{padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:13px;cursor:pointer;}
button:hover{border-color:var(--accent);}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}
button:disabled{opacity:.5;cursor:default;}
#status{font-size:12px;color:var(--dim);min-height:16px;margin-top:8px;line-height:1.4;}
#status.err{color:var(--err);}

.profile{display:flex;align-items:center;gap:12px;}
#pAvatar{width:52px;height:52px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;background:linear-gradient(135deg,#5b9dff,#9b6bff);color:#fff;}
#pAvatar img{width:100%;height:100%;border-radius:12px;object-fit:cover;display:block;}
.lobbyBtn img{width:22px;height:22px;border-radius:5px;flex-shrink:0;margin-right:8px;}
.lobbyBtn .nm{display:flex;align-items:center;min-width:0;}
.lobbyBtn img.flag{width:auto;height:14px;border-radius:2px;margin-right:6px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.15);}
#pAvatar.admin{box-shadow:0 0 0 2px #f6c445,0 0 14px rgba(246,196,69,.55);}
#pName.admin{color:#f6c445;}
.adminBadge{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:999px;background:linear-gradient(135deg,#f6c445,#e8a317);color:#2a1c00;font-size:11px;font-weight:700;letter-spacing:.04em;}
.lobbyBtn.admin{border-color:#f6c445;background:linear-gradient(90deg,rgba(246,196,69,.16),var(--panel2) 60%);}
.lobbyBtn .adminBadge{margin:0 0 0 8px;padding:1px 7px;font-size:10px;flex-shrink:0;}
#pAvatar,#pName{color:inherit;text-decoration:none;cursor:pointer;}
#pAvatar:not([href]),#pName:not([href]){cursor:default;}
#pName{display:block;}
#pName[href]:hover{text-decoration:underline;}
#pAvatar[href]:hover{filter:brightness(1.12);}
#pName{font-size:16px;font-weight:600;line-height:1.25;white-space:normal;overflow-wrap:anywhere;}   /* el nick completo (hasta 32 caracteres) se parte en renglones en vez de cortarse */
#pId{font-size:12px;color:var(--dim);margin-top:2px;word-break:break-all;}
.row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;color:var(--dim);}
.row span:last-child{color:var(--text);display:flex;align-items:center;gap:6px;}
.row i{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--border);}
.hat{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;margin-top:6px;border:1px solid var(--border);border-radius:8px;background:var(--panel2);font-size:13px;}
.hat small{color:var(--dim);white-space:nowrap;}
.hat.fail{border-color:var(--err);color:var(--err);}
.empty{font-size:12.5px;color:var(--dim);}
.lobbyBtn{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;margin-top:6px;text-align:left;}
.lobbyBtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lobbyBtn small{color:var(--dim);white-space:nowrap;}
.topRank{color:var(--dim);font-variant-numeric:tabular-nums;min-width:22px;margin-right:4px;flex-shrink:0;text-align:right;}

/* Desplegable "Mas horas jugadas" */
#topDetails>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);-webkit-user-select:none;user-select:none;}
#topDetails>summary::-webkit-details-marker{display:none;}
#topDetails>summary::after{content:"";width:7px;height:7px;margin-right:3px;flex-shrink:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;}
#topDetails[open]>summary::after{transform:rotate(-135deg) translateY(-2px);}
#topDetails>summary:hover{color:var(--text);}
#topDetails>summary:focus-visible{outline:1px solid var(--accent);outline-offset:4px;border-radius:4px;}
#topDetails #topList{margin-top:8px;}

/* Niveles y resets (BuyLevels) */
.lvlHead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.lvlHead b{font-size:22px;font-variant-numeric:tabular-nums;}
.lvlHead .of{color:var(--dim);font-size:13px;}
.resetPill{display:inline-block;padding:1px 9px;border-radius:999px;background:linear-gradient(135deg,#9b6bff,#5b9dff);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;}
.lvlBar{height:6px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);overflow:hidden;margin:8px 0 6px;}
.lvlBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#9b6bff);}
.lvlTag{flex-shrink:0;margin-left:8px;padding:1px 7px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.03em;white-space:nowrap;}

select{width:100%;padding:9px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:13px;}
#playBtn{width:100%;margin-top:6px;}
#pmDownload{display:none;width:100%;margin-top:8px;text-align:center;box-sizing:border-box;text-decoration:none;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:13px;font-weight:600;}
#pmDownload:hover{filter:brightness(1.15);}
#resetBtn{width:100%;margin-top:8px;}
.toggles label{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 0;cursor:pointer;color:var(--dim);}
.toggles input{accent-color:var(--accent);}
#gyroMsg{font-size:12px;color:var(--dim);line-height:1.4;}
#gyroMsg.err{color:var(--err);}
#visits{font-size:12px;color:var(--dim);text-align:center;padding:12px 16px;margin-top:auto;}
#visits b{color:var(--text);font-variant-numeric:tabular-nums;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:#333;border-radius:4px;}

@media (max-width:760px){
  html,body{height:100dvh;}
  #app{flex-direction:column;height:100dvh;}
  #viewport{flex:none;height:50dvh;min-height:240px;}
  #sidebar{width:100%;flex:1;min-height:0;border-left:0;border-top:1px solid var(--border);
    -webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,0px);}
  #steamInput,button,select{font-size:15px;}
}

#uniqueHist{margin:2px 0 8px;font-size:12px;color:var(--dim);}
#uniqueHist summary{cursor:pointer;padding:2px 0;}
.uhRow{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:8px;padding:2px 0;}
.uhRow i{display:block;height:6px;border-radius:3px;background:var(--accent,#4a90e2);opacity:.75;}
.uhRow b{color:var(--text);font-weight:600;min-width:28px;text-align:right;}
.uhNote{margin-top:6px;font-size:11px;opacity:.7;}