/* =====================================================================
   MU CAIDOS - RANKING V2
   ranking.css
   Estilo inspirado en la plantilla RedEye / WebEngine del sitio oficial:
   fondo oscuro, acentos dorados, tabla con filas alternas.
   ===================================================================== */

/* ---------- Reinicio local (el INTRO tiene estilos globales de <table>
     que aqui no deben entrar; por eso este ranking va dentro de un
     iframe y ademas todo cuelga de .rk-app) ---------- */
.rk-app, .rk-app * { box-sizing: border-box; }

:root{
    --rk-fondo:      #0d0708;
    --rk-panel:      #17100f;
    --rk-panel-2:    #1e1615;
    --rk-fila:       #191312;
    --rk-fila-alt:   #221b19;
    --rk-borde:      #2c2220;
    --rk-texto:      #cfc6bd;
    --rk-tenue:      #8a7f77;
    --rk-oro:        #ffcc4d;
    --rk-oro-suave:  #ffda8a;
    --rk-rojo:       #b03a2e;
    --rk-verde:      #4cd137;
}

html, body{
    margin:0; padding:0;
    background: var(--rk-fondo);
    color: var(--rk-texto);
    font-family: 'Tahoma', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

.rk-app{
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 14px 14px;
}

/* ============================ CABECERA ============================ */
.rk-cabecera{
    text-align:center;
    padding: 2px 0 9px;
    border-bottom: 1px solid var(--rk-borde);
    margin-bottom: 10px;
    position: relative;
}
.rk-cabecera h1{
    margin:0;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 22px;
    letter-spacing: 3px;
    color: var(--rk-oro);
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(255,204,77,.35), 0 2px 0 #000;
}
.rk-cabecera p{
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--rk-tenue);
    text-transform: uppercase;
}
.rk-estado{
    margin-top: 6px;
    font-size: 12px;
    color: var(--rk-tenue);
}
.rk-estado b{ color: var(--rk-verde); }

/* ============================ PESTANAS ============================ */
.rk-pestanas{
    display:flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content:center;
    margin-bottom: 10px;
}
.rk-pestanas button{
    appearance:none;
    border: 1px solid var(--rk-borde);
    background: linear-gradient(180deg, #1d1514 0%, #120c0c 100%);
    color: var(--rk-tenue);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: bold;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 3px;
    transition: all .18s ease;
    white-space: nowrap;
}
.rk-pestanas button:hover{
    color: var(--rk-oro-suave);
    border-color: #5a4326;
    background: linear-gradient(180deg, #2a1f1b 0%, #170f0e 100%);
}
.rk-pestanas button.activa{
    color: #1a1208;
    border-color: #a5802f;
    background: linear-gradient(180deg, var(--rk-oro-suave) 0%, #d9a63c 100%);
    box-shadow: 0 0 12px rgba(255,204,77,.28);
}

/* ============================= PANEL ============================== */
.rk-panel{
    background: var(--rk-panel);
    border: 1px solid var(--rk-borde);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 26px rgba(0,0,0,.55);
}
.rk-panel-cab{
    height: 34px;
    line-height: 34px;
    text-align:center;
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--rk-oro-suave);
    background: linear-gradient(180deg, #241a17 0%, #150e0e 100%);
    border-bottom: 1px solid var(--rk-borde);
}

/* ============================= TABLA ============================== */
.rk-scroll{ width:100%; overflow-x:auto; }

table.rk-tabla{
    width:100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: transparent;
    font-size: 13px;
}
table.rk-tabla thead th{
    background: #120c0c;
    color: var(--rk-tenue);
    font-size: 10.5px;
    font-weight: bold;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align:center;
    padding: 8px 8px;
    border-bottom: 1px solid var(--rk-borde);
    white-space: nowrap;
}
table.rk-tabla tbody td{
    padding: 5px 8px;
    text-align:center;
    vertical-align: middle;
    color: var(--rk-texto);
    border-bottom: 1px solid rgba(255,255,255,.035);
}
table.rk-tabla tbody tr{ background: var(--rk-fila); }
table.rk-tabla tbody tr:nth-child(even){ background: var(--rk-fila-alt); }
table.rk-tabla tbody tr:hover{ background: #2b2220; }

/* ---- Podio: top 3 ---- */
.rk-pos{ font-weight:bold; font-size: 16px; color: var(--rk-tenue); width: 52px; }
tr.rk-p1 .rk-pos{ color:#ffd257; text-shadow:0 0 10px rgba(255,210,87,.5); }
tr.rk-p2 .rk-pos{ color:#d8d8d8; text-shadow:0 0 10px rgba(216,216,216,.35); }
tr.rk-p3 .rk-pos{ color:#d18d4a; text-shadow:0 0 10px rgba(209,141,74,.35); }
tr.rk-p1{ background: linear-gradient(90deg, rgba(255,204,77,.12) 0%, rgba(255,204,77,0) 60%) , var(--rk-fila) !important; }
tr.rk-p2{ background: linear-gradient(90deg, rgba(220,220,220,.08) 0%, rgba(220,220,220,0) 60%), var(--rk-fila-alt) !important; }
tr.rk-p3{ background: linear-gradient(90deg, rgba(209,141,74,.10) 0%, rgba(209,141,74,0) 60%), var(--rk-fila) !important; }
.rk-medalla{ font-size: 15px; margin-right: 2px; }

/* ---- Imagenes ---- */
.rk-raza{
    width: 31px; height: 31px;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(0,0,0,.8), 0 0 0 1px #3a2e29;
    display:inline-block; vertical-align: middle;
}
/* Bandera del pais: pequena pero nitida y con marco para que se despegue
   del fondo cuando el ranking esta en modo transparente. */
.rk-bandera{
    width: 28px;
    height: 21px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6);
    display: inline-block;
    vertical-align: middle;
    image-rendering: -webkit-optimize-contrast;
}
/* La raza y el nombre van pegados, como en la web oficial */
.rk-cel-raza{ width: 46px; text-align: right !important; padding-right: 0 !important; }
.rk-cel-pais{ width: 50px; }
table.rk-tabla tbody td.rk-cel-nombre{ text-align: left; padding-left: 12px; }
table.rk-tabla thead th.rk-cel-nombre{ text-align: left; padding-left: 12px; }

/* ---- Nombre + estado ---- */
.rk-nombre{
    color: var(--rk-oro-suave);
    font-weight: bold;
    letter-spacing: .3px;
    white-space: nowrap;
}
.rk-guild{ color:#9fc2e8; font-weight:bold; white-space: nowrap; }
.rk-punto{
    display:inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    background: #5a4a44;
    vertical-align: middle;
}
.rk-punto.on{
    background: var(--rk-verde);
    box-shadow: 0 0 7px rgba(76,209,55,.9);
}
.rk-sub{ display:block; font-size: 10px; color: var(--rk-tenue); font-weight: normal; letter-spacing: 0; }

.rk-valor{ color:#fff; font-weight:bold; font-size: 14px; }
.rk-tenue{ color: var(--rk-tenue); }

/* ---- Etiquetas ---- */
.rk-tag{
    display:inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight:bold;
    letter-spacing:.5px;
    border:1px solid transparent;
}
.rk-tag-dup{ color:#7fb4ff; background: rgba(60,120,220,.14); border-color: rgba(60,120,220,.45); }
.rk-tag-van{ color:#ff8d7a; background: rgba(200,60,40,.14);  border-color: rgba(200,60,40,.45); }
.rk-tag-nada{ color: var(--rk-tenue); }
.rk-tag-rey{ color:#1a1208; background: linear-gradient(180deg,#ffda8a,#d9a63c); border-color:#a5802f; }

/* ---- Mensajes ---- */
.rk-aviso{
    padding: 26px 22px;
    text-align:center;
    color: var(--rk-tenue);
    font-size: 13px;
    line-height: 1.7;
}
.rk-aviso b{ color: var(--rk-oro-suave); }
.rk-aviso.error{ color:#e8a99f; }

/* ---- Cargando ---- */
.rk-cargando{ padding: 40px 0; text-align:center; }
.rk-spinner{
    display:inline-block; width: 26px; height: 26px;
    border: 3px solid rgba(255,204,77,.2);
    border-top-color: var(--rk-oro);
    border-radius: 50%;
    animation: rk-giro .8s linear infinite;
}
@keyframes rk-giro{ to{ transform: rotate(360deg); } }

/* ---- Pie ---- */
.rk-pie{
    display:flex; justify-content: space-between; align-items:center;
    flex-wrap: wrap; gap: 8px;
    padding: 7px 2px 0;
    font-size: 11px;
    color: var(--rk-tenue);
}
.rk-pie button{
    appearance:none; cursor:pointer;
    background: transparent;
    border: 1px solid var(--rk-borde);
    color: var(--rk-tenue);
    border-radius: 3px;
    padding: 5px 11px;
    font-size: 11px;
    font-family: inherit;
    transition: all .18s ease;
}
.rk-pie button:hover{ color: var(--rk-oro-suave); border-color:#5a4326; }

/* ============================ RESPONSIVE =========================== */
@media (max-width: 900px){
    .rk-app{ padding: 10px; }
    .rk-cabecera h1{ font-size: 20px; letter-spacing: 2px; }
    .rk-pestanas button{ font-size: 10.5px; padding: 8px 10px; }
    table.rk-tabla{ font-size: 12px; }
    .rk-raza{ width: 28px; height: 28px; }
    .rk-bandera{ width: 24px; height: 18px; }
    .rk-cel-pais{ width: 40px; }
    .rk-ocultar-movil{ display:none; }
}
@media (max-width: 560px){
    .rk-cabecera p{ display:none; }
    table.rk-tabla thead th{ font-size: 9.5px; padding: 8px 5px; }
    table.rk-tabla tbody td{ padding: 6px 5px; }
}