/*
 * Rankings y jugador (D-212): las piezas de assets/js/ranking.js. Va en las páginas que las
 * muestran (los juegos sueltos, La Copa y /records/). Se apoya en base.css (.panel, .btn).
 */

.rk-jugador { display: grid; gap: 6px; }
/* "Juegas como Javi": al tocarlo se despliegan cambiar el PIN y Salir (lo de la cuenta) */
.rk-yo { padding: 6px 14px; }
/* Con details.panel delante: la regla de base.css (details.panel summary, 900) pesa más que .rk-yo summary */
details.panel.rk-yo summary { font-weight: 400; font-size: 1rem; min-height: 44px; gap: 10px; }
details.panel.rk-yo[open] summary { margin-bottom: 6px; }
.rk-cuenta { display: grid; gap: 8px; padding-bottom: 6px; }
.rk-cuenta .rk-campo { margin-bottom: 0; }
.rk-cuenta .rk-link { justify-self: center; }
.rk-yo b { color: var(--cyan); }
.rk-link {
  background: none; border: 0; color: var(--muted); font: 700 0.9rem var(--font-body); text-decoration: underline;
  cursor: pointer; min-height: 44px; min-width: 44px; padding: 0 4px;
}
.rk-ver { display: flex; align-items: center; justify-content: center; margin-top: 4px; }

/* Compacta, para dejar ver los botones del final (C-8). El margen de arriba es el mismo abierta y
   cerrada: si cambia, el título salta al desplegarla. */
.rk-invita { padding-top: 6px; }
.rk-invita:not([open]) { padding-bottom: 6px; }
.rk-invita summary { cursor: pointer; font-weight: 900; min-height: 44px; display: flex; align-items: center; }
.rk-invita[open] summary { margin-bottom: 6px; }
/* Destacada (D-249): arriba, antes de jugar, con un botón a la vista. Plegada, una sola fila. */
.rk-invita--destacada { border: 2px solid var(--cyan); }
details.panel.rk-invita--destacada summary { gap: 12px; }
/* Plegada, el botón hace de flecha; abierta vuelve la flecha para cerrarla */
details.panel.rk-invita--destacada:not([open]) summary::after { content: none; }
.rk-invita-txt { display: grid; gap: 2px; line-height: 1.25; }
.rk-invita-txt small { font-weight: 600; color: var(--muted); font-size: 0.85rem; }
.rk-invita-btn { flex: none; pointer-events: none; }
/* One line inside the One a Day card, so its actions show without scrolling (C-8, C-19) */
.rk-invita--compacta { padding: 8px 10px 12px 14px; margin: 0; }
.rk-invita--compacta:not([open]) { padding-bottom: 12px; }
/* Its Sign in button fits inside the frame, with room for the button's own shadow below */
.rk-invita--compacta .rk-invita-btn { padding: 8px 14px; }
.rk-invita--destacada[open] .rk-invita-btn { display: none; }
.rk-hint { margin: 0 0 10px; font-size: 0.92rem; }
.rk-campo { display: grid; gap: 4px; margin-bottom: 10px; }
.rk-campo span { font-weight: 900; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.rk-campo input {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.3); color: var(--ink); font: 800 1.1rem var(--font-body); outline: none;
}
.rk-campo input:focus { border-color: var(--cyan); }
.rk-campo input::placeholder { color: rgba(255, 255, 255, 0.35); }
.rk-campo input.rk-pin { letter-spacing: 0.5em; text-align: center; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.rk-entrar { width: 100%; margin-top: 8px; }
.rk-error { color: var(--yellow); font-weight: 800; text-align: center; margin: 6px 0; min-height: 0; }
.rk-error:empty { display: none; }
.rk-ok { color: var(--lime); font-weight: 900; text-align: center; margin: 0; }
.rk-aviso { font-weight: 700; margin: 10px 0 6px; }
.rk-botones { display: grid; gap: 8px; }
.rk-botones .btn { width: 100%; }

.rk-titulo { margin: 0 0 6px; }
.rk-seg { display: flex; gap: 4px; background: rgba(0, 0, 0, 0.3); border-radius: 14px; padding: 4px; margin-bottom: 8px; }
.rk-seg button {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--muted); font: 900 0.92rem var(--font-body);
  padding: 8px 4px; border-radius: 10px; cursor: pointer; min-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rk-seg button.on { background: var(--yellow); color: #3a1200; }
/* A 320 px las cuatro pestañas no caben en una línea: se achican y, si igual no, parten línea (U-12) */
@media (max-width: 360px) {
  .rk-seg { gap: 2px; }
  .rk-seg button { flex: 1 1 auto; font-size: 0.8rem; padding: 6px 3px; white-space: normal; line-height: 1.1; overflow: visible; text-overflow: clip; }
}

.rk-lista { display: grid; gap: 4px; }
.rk-centro { text-align: center; margin: 8px 0; }
.rk-fila {
  display: grid; grid-template-columns: 2.2em 1fr auto auto; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.22);
}
.rk-fila.yo { box-shadow: 0 0 0 2px var(--cyan) inset; background: rgba(46, 230, 214, 0.12); }
.rk-puesto { text-align: center; font: 900 1rem var(--font-num); font-variant-numeric: tabular-nums; }
.rk-nombre { font-weight: 800; display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.rk-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rk-nombre small { color: var(--cyan); font-weight: 900; flex-shrink: 0; }
/* Last month's Uno al día points champion (D-412) */
.rk-campeon { flex-shrink: 0; }
.rk-puntos { font: 900 1.05rem var(--font-num); font-variant-numeric: tabular-nums; color: var(--yellow); }
.rk-tiempo { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--muted); min-width: 3.2em; text-align: right; }
.rk-medallas { grid-column: 3 / 5; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-sep { text-align: center; color: var(--muted); line-height: 1; }
.rk-sub { margin: 12px 0 2px; font-size: 1rem; }
.rk-copa { margin: 2px 0; font-size: 0.92rem; }

.rk-resultado { display: grid; gap: 4px; }
.rk-resultado:empty { display: none; }
.rk-record { text-align: center; font: 900 1.25rem var(--font-body); color: var(--lime); margin: 0; }

/* "¿Quieres que esta partida cuente?" (D-274): the one-line Sign in card of every result (C-19), with a
   small jump as it comes in. It only shows with no player signed in. */
.rk-contar { margin-top: 14px; animation: rk-contar-entra 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
.rk-contar .rk-jugador { margin: 0; }
@keyframes rk-contar-entra { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rk-contar { animation: none; } }