.lb{max-width:900px; display:flex; flex-direction:column; gap:18px}
.lb-head{display:flex; align-items:flex-start; justify-content:space-between; gap:18px}
.lb-head h1{font-size:clamp(27px,4vw,38px); margin-bottom:7px}
.lb-head .lede{margin:0; max-width:52ch}

.lb-you{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--s1);
}
.lb-you-k{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--t3)}
.lb-name{
  font:inherit; font-size:14.5px; font-weight:600; color:var(--t1);
  background:var(--s2); border:1px solid var(--line); border-radius:7px;
  padding:8px 11px; min-width:0; width:min(220px,52vw);
}
.lb-name::placeholder{color:var(--t3); font-weight:400}
.lb-name:focus{outline:2px solid var(--hi); outline-offset:1px}
.lb-save{padding:8px 14px}
.lb-saved{font-size:12.5px; color:var(--hi); min-height:1em}

.lb-tabs{
  position:relative; display:flex; gap:2px; padding:3px;
  border:1px solid var(--line); border-radius:10px; background:var(--s1);
  overflow-x:auto; scrollbar-width:none;
}
.lb-tabs::-webkit-scrollbar{display:none}
.lb-tabs button{
  position:relative; z-index:1; flex:1 0 auto; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  font:inherit; font-size:13.5px; font-weight:560; cursor:pointer;
  padding:9px 15px; border:0; border-radius:7px; background:none; color:var(--t2);
  transition:color .15s;
}
.lb-tabs button i{font-style:normal; font-size:14px; line-height:1}
.lb-tabs button[aria-selected="true"]{color:var(--ink,#101218)}
.lb-tabs button:hover[aria-selected="false"]{color:var(--t1)}
.lb-ind{
  position:absolute; top:3px; bottom:3px; left:3px; width:0;
  background:var(--paper); border-radius:7px; z-index:0;
  transition:left .24s var(--ease), width .24s var(--ease);
}
.lb-note{margin:0; font-size:12.5px; color:var(--t3)}
.lb-head .lede.offline{color:var(--mid)}
.lb-loading{
  list-style:none; padding:22px 14px; text-align:center;
  font-size:13px; color:var(--t3); border:1px dashed var(--line-2); border-radius:var(--r);
}

.lb-list{list-style:none; margin:0; padding:0; display:grid; gap:5px; min-height:60px}
.lb-row{
  --w:0%;
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:12px;
  padding:11px 14px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--s1);
}
.lb-row::before{
  content:""; position:absolute; inset:0 auto 0 0; width:var(--w);
  background:color-mix(in srgb, var(--hi) 12%, transparent);
  transition:width .6s var(--ease);
}
.lb-row.podium{border-color:var(--line)}
.lb-row.me{border-color:var(--hi); background:color-mix(in srgb, var(--hi) 7%, var(--s1))}
.lb-pos{
  position:relative; z-index:1; font-family:var(--mono); font-size:15px;
  color:var(--t3); text-align:center; font-variant-numeric:tabular-nums;
}
.lb-row.podium .lb-pos{font-size:18px}
.lb-body{position:relative; z-index:1; min-width:0; display:grid; gap:3px}
.lb-nm{font-size:14.5px; font-weight:620; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-sub{font-size:11.5px; color:var(--t3); font-family:var(--mono)}
.lb-chips{display:flex; gap:5px; flex-wrap:wrap}
.lb-chip{
  font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:20px;
  border:1px solid var(--line); color:var(--t2); background:var(--s2);
}
.lb-chip.off{color:var(--t3); opacity:.5}
.lb-pts{
  position:relative; z-index:1; font-family:var(--mono); font-size:18px;
  color:var(--t1); font-variant-numeric:tabular-nums;
}
.lb-row.me .lb-pts{color:var(--hi)}

.lb-row[data-player]{cursor:pointer}
.lb-row[data-player]:hover{border-color:var(--line)}
.lb-row[data-player]:focus-visible{outline:2px solid var(--hi); outline-offset:2px}

.lb-perfil{gap:6px}
.lbp-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:17px 18px; border:1px solid var(--line); border-radius:var(--r); background:var(--s1);
}
.lbp-head.me{border-color:var(--hi); background:color-mix(in srgb, var(--hi) 7%, var(--s1))}
.lbp-l{display:grid; gap:3px; min-width:0}
.lbp-l b{font-size:19px; font-weight:660}
.lbp-l small{font-size:12.5px; color:var(--t2)}
.lbp-r{text-align:right}
.lbp-pts{display:block; font-family:var(--mono); font-size:27px; line-height:1; font-variant-numeric:tabular-nums}
.lbp-r i{
  font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--t3);
}
.lbp-row{
  display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:12px 16px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--s1);
}
.lbp-row.off{opacity:.5}
.lbp-emoji{font-size:17px; text-align:center; line-height:1}
.lbp-body{min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 9px}
.lbp-body b{font-size:14px; font-weight:620; flex:none}
.lbp-body small{font-size:11.5px; color:var(--t3); font-family:var(--mono)}
.lbp-hoy{
  font-family:var(--mono); font-size:10px; padding:2px 8px; border-radius:20px;
  border:1px solid #4d3d15; background:#1a1508; color:var(--mid); white-space:nowrap;
}
.lbp-p{font-family:var(--mono); font-size:18px; font-variant-numeric:tabular-nums}
.lbp-back{list-style:none; display:flex; justify-content:center; padding-top:6px}

.lb-foot{display:flex; justify-content:flex-end}
.lb-foot .danger{color:var(--no); border-color:#5a2725}

.lbx{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--s1);
  animation:slidein .32s var(--ease) both;
}
.lbx.ask{border-color:var(--hi); background:color-mix(in srgb, var(--hi) 7%, var(--s1))}
.lbx.crown{border-color:var(--mid); background:color-mix(in srgb, var(--mid) 8%, var(--s1))}
.lbx-l{display:grid; gap:3px; min-width:0; text-align:left}
.lbx-l b{font-size:15px; font-weight:650}
.lbx-l small{font-size:12.5px; color:var(--t2)}
.lbx-r{display:flex; align-items:center; gap:8px}

@media (max-width:560px){
  .lb-row{grid-template-columns:28px 1fr auto; gap:9px; padding:10px 11px}
  .lb-pts{font-size:16px}
  .lbx,.lbx-r{width:100%}
  .lbx-r .btn{flex:1}
}

.lbx.reto{display:block; padding:14px 16px}
.reto-cab{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px}
.reto-cab b{font-size:15px; font-weight:640}
.reto-cod{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--t3); border:1px solid var(--line); border-radius:99px; padding:3px 9px;
}
.reto-lista{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.reto-fila{
  display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; background:var(--s1); font-size:13.5px;
}
.reto-fila.yo{background:var(--s3); box-shadow:inset 0 0 0 1px var(--line)}
.reto-pos{font-family:var(--mono); font-size:12px; color:var(--t3)}
.reto-n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.reto-fila.yo .reto-n{font-weight:640}
.reto-s{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--t2)}
.reto-fila.yo .reto-s{color:var(--t1)}
.reto-pie{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:11px}
.reto-pie small{flex:1; min-width:0; font-size:12px; color:var(--t3)}
.reto-pie .btn{padding:7px 11px; font-size:12.5px}
@media (max-width:520px){
  .reto-pie small{flex:1 1 100%}
}