/* Cliente online ampliado: ranking, cola, emotes y espectador (js/ranking.js) */
.moves-btn.rk-corner{ top:auto; bottom:66px; left:16px; right:auto; }   /* encima de PERFIL (abajo-izquierda) */

/* Lobby online */
.rk-row{ display:flex; gap:12px; }
#rk-q{ display:flex; gap:14px; align-items:center; font-size:11px; color:var(--gold); text-shadow:2px 2px 0 #000; }
#rk-spec-code{
  width:200px; font-family:inherit; font-size:20px; text-align:center; text-transform:uppercase; letter-spacing:6px;
  color:var(--ink); background:#fff; border:3px solid #000; box-shadow:0 0 0 3px var(--gold); padding:12px 8px; border-radius:4px;
}
#rk-spec-code:focus-visible{ outline:3px solid #39a0ff; outline-offset:3px; }
.online-panel{ gap:12px; padding-top:18px; padding-bottom:18px; }
.online-panel .hint{ margin:2px 0; }

/* Pantalla RANKING */
.rk-panel{ width:760px; text-align:center; }
.rk-table{ width:100%; border-collapse:collapse; margin:10px 0; font-size:11px; }
.rk-table th{ color:var(--gold); padding:8px 6px; border-bottom:3px solid var(--gold); text-shadow:2px 2px 0 #000; }
.rk-table td{ padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.12); }
.rk-table td:nth-child(2){ text-align:left; }
.rk-table tr.is-me td{ background:var(--gold); color:var(--ink); }
#rk-msg:empty, #rk-you:empty{ display:none; }
#screen-ranking :focus-visible{ outline:3px solid #39a0ff; outline-offset:3px; }

/* Batalla: emotes, espectadores y aviso de espectador */
#rk-emo-btn, #rk-badge{ display:none; }
#screen-battle.rk-on #rk-emo-btn{ display:block; }
#screen-battle.rk-spec #rk-badge{ display:block; }
#rk-emo-btn{ left:auto; right:16px; top:112px; min-width:48px; min-height:48px; font-size:18px; padding:6px; }
#rk-emo{
  position:absolute; top:172px; right:16px; z-index:7; display:flex; flex-direction:column; gap:6px;
  background:rgba(12,16,32,.92); padding:10px; border-radius:6px; box-shadow:0 0 0 3px #000, 0 0 0 5px var(--gold);
}
#rk-emo button{
  min-height:44px; font-family:inherit; font-size:11px; color:#fff; text-align:left; cursor:pointer;
  background:var(--navy); border:3px solid #000; border-radius:4px; padding:8px 12px;
}
#rk-emo button:hover, #rk-emo button.is-sel{ background:var(--gold); color:var(--ink); }
#rk-emo kbd{ font-family:inherit; color:var(--gold); margin-right:10px; }
#rk-emo button:hover kbd, #rk-emo button.is-sel kbd{ color:var(--ink); }
#rk-eye, #rk-badge{
  position:absolute; top:118px; left:50%; transform:translateX(-50%); z-index:5; pointer-events:none;
  font-size:10px; color:#9fd4ff; text-shadow:2px 2px 0 #000;
}
#rk-eye{ font-size:14px; }
#rk-badge{ color:var(--gold); background:rgba(12,16,32,.7); padding:6px 10px; border-radius:4px; }
.rk-bub{
  position:absolute; z-index:4; transform:translateX(-50%); white-space:nowrap; pointer-events:none;
  font-size:14px; color:var(--ink); background:#fff; padding:10px 12px; border-radius:8px; box-shadow:0 0 0 3px #000, 4px 4px 0 3px #000;
  animation:rk-pop .18s ease-out;
}
.rk-bub::after{ content:""; position:absolute; left:50%; bottom:-12px; margin-left:-8px; border:8px solid transparent; border-top-color:#fff; }
.rk-bub.is-spec{ top:150px; left:50%; font-size:11px; background:#9fd4ff; }
.rk-bub.is-spec::after{ display:none; }
.rk-delta{ color:var(--gold); }
#result-overlay.rk-spec [data-action="rematch"], #result-overlay.rk-spec [data-action="to-select"]{ display:none; }
@keyframes rk-pop{ from{ transform:translateX(-50%) scale(.6); } }
@media (prefers-reduced-motion: reduce){ .rk-bub{ animation:none; } }
html.reduce-motion .rk-bub{ animation:none; }