/* =========================================================
   TOP IKARIAM · IKARIAM DATOS
   Usa css/mapa.css (panel, badge, título, select) y añade
   aquí el podio y la clasificación.
   Paleta: rojo imperial / pergamino / oro
   ========================================================= */

/* ---------- Selector de categoría ---------- */
#formularioserver.ika-select-only .col-auto { align-items: center; }
#formularioserver.ika-select-only .ika-label { padding-left: 0; }
#formularioserver #categoria { width: 340px; }

#formularioserver #categoria optgroup {
    background: #f1d08a;
    color: #7e0c0b;
    font-weight: 700;
    font-style: normal;
}

/* =========================================================
   LOADER
   ========================================================= */

#loading { margin: 10px auto 40px !important; }
#loading p {
    color: #7a5233;
    font-size: 14px;
    font-weight: 600;
}
#loading .spinner-border {
    color: #7e0c0b;
    width: 3rem;
    height: 3rem;
    border-width: .3em;
}

#resultado {
    width: 96%;
    max-width: 1100px;
    margin: 0 auto 40px;
}

#resultado > p {
    color: #7e0c0b;
    font-weight: 700;
}

/* =========================================================
   🏆 PODIO — TOP 3
   ========================================================= */

.top-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 26px;
    margin: 6px 0 40px;
    padding: 0 0 18px;
    position: relative;
}

/* peana bajo el podio */
.top-wrapper::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(860px, 100%);
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(67,38,28,.35), transparent 70%);
    pointer-events: none;
}

.top-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 260px;
    height: 380px;
    padding: 20px 18px 22px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border-radius: 18px;
    border: 0;
    box-shadow: 0 16px 34px rgba(67,38,28,.35);
    transition: transform .25s ease, box-shadow .25s ease;
}

.top-card:hover { transform: translateY(-8px); }

.top-card::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(25,12,6,.92) 15%, rgba(25,12,6,.55) 55%, transparent);
    pointer-events: none;
}

.top-1 {
    background-image: url('../img/top1.png');
    order: 2;
    box-shadow: 0 0 0 3px rgba(241,208,138,.55), 0 0 40px rgba(241,190,70,.45), 0 20px 40px rgba(67,38,28,.4);
}
.top-2 {
    background-image: url('../img/top2.png');
    height: 340px;
    order: 1;
    box-shadow: 0 0 0 3px rgba(220,226,235,.5), 0 16px 34px rgba(67,38,28,.35);
}
.top-3 {
    background-image: url('../img/top3.png');
    height: 340px;
    order: 3;
    box-shadow: 0 0 0 3px rgba(214,150,90,.5), 0 16px 34px rgba(67,38,28,.35);
}

.top-name {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: "Cinzel", Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .5px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.9);
}

.top-server {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
    color: rgba(255,240,210,.85);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0,0,0,.8);
}

.top-points {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 7px 22px;

    background: linear-gradient(180deg, #a3201a, #7e0c0b);
    color: #ffe9b8;
    border: 1px solid #d9a849;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.4);

    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.top-points > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* =========================================================
   📊 CLASIFICACIÓN (4º en adelante)
   ========================================================= */

.rank-frame {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
    background: linear-gradient(180deg, #6b3f22, #3b2216);
    border: 1px solid #c9963e;
    border-radius: 16px;
    box-shadow: 0 0 0 4px rgba(201,150,62,.25), 0 18px 40px rgba(67,38,28,.35);
    text-align: left;
}

.rank-frame .ika-table-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 8px 10px 14px;
}

.rank-frame .ika-table-title {
    margin: 0;
    font-family: "Cinzel", Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #f1d08a;
}

.rank-frame .ika-count {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    background: linear-gradient(180deg, #a3201a, #7e0c0b);
    color: #ffe9b8;
    border: 1px solid rgba(241,208,138,.6);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.rank-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: none;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #fbf1da;
}

.rank-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1.3fr) minmax(0, 1fr) 170px;
    align-items: center;
    gap: 10px;
    padding: 11px 18px 11px 12px;
    box-sizing: border-box;

    background: #fbf1da;
    border: 0;
    border-bottom: 1px solid rgba(158,106,45,.18);
    border-radius: 0;
    color: #3b2412;
    transition: background-color .15s ease;
}

.rank-row:nth-child(even) { background: #f3e2bb; }
.rank-row:last-child { border-bottom: 0; }
.rank-row:hover { background: #ecd09a; transform: none; }

.rank-pos {
    justify-self: center;
    min-width: 40px;
    padding: 3px 8px;
    background: rgba(126,12,11,.08);
    border: 1px solid rgba(126,12,11,.22);
    border-radius: 8px;
    color: #7e0c0b;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.rank-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #3b2412;
    font-size: 15px;
    font-weight: 700;
}

.rank-server {
    justify-self: start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 10px;
    background: rgba(201,150,62,.18);
    border: 1px solid rgba(158,106,45,.3);
    border-radius: 6px;
    color: #6b3f22;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.rank-points {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: #7e0c0b;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .top-card { width: 220px; height: 340px; }
    .top-2, .top-3 { height: 310px; }
    .top-name { font-size: 20px; }
    .rank-row { grid-template-columns: 52px minmax(0,1.3fr) minmax(0,1fr) 130px; }
}

@media (max-width: 650px) {
    .top-wrapper { gap: 12px; }
    .top-card, .top-2, .top-3 { width: 46%; height: 250px; padding: 14px 10px 16px; }
    .top-1 { order: 0; width: 70%; height: 290px; }
    .top-name { font-size: 17px; }
    .top-server { font-size: 10px; margin-bottom: 10px; }
    .top-points { font-size: 15px; padding: 5px 14px; gap: 8px; }

    .rank-frame { padding: 8px; }
    .rank-row { grid-template-columns: 46px minmax(0,1fr) auto; padding: 10px 12px 10px 6px; }
    .rank-server { display: none; }
    .rank-name, .rank-points { font-size: 14px; }
}