/* =====================================================================
   PICA JUMP · Clasificación — estilo "brasa" (familia de Amigos/Carrera)
   Mismo lenguaje: marco con degradado, icono que sobresale, botón X rojo,
   cristal oscuro y botones 3D. Identidad propia: dorado de trofeo + podio con foco de luz.
   Todo va bajo #positionsModal, así no pisa a las demás ventanas.
   ===================================================================== */
#positionsModal {
    --ps-crema: #fff1e0; --ps-mute: #d8b494; --ps-linea: rgba(255, 170, 90, .24); --ps-vidrio: rgba(255, 255, 255, .07);
    --ps-fuego: linear-gradient(135deg, #f14712, #fda32a); --ps-base: #7a2208;
    font-family: 'Montserrat', system-ui, sans-serif;
}
#positionsModal.mostrar { background-color: rgba(12, 4, 2, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---------- Tarjeta ---------- */
#positionsModal .floating-popup-box.pos-box {
    width: calc(322 * var(--u)); max-width: 94vw; margin-top: calc(32 * var(--u));
    padding: calc(40 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
    border: calc(3 * var(--u)) solid transparent; border-radius: calc(26 * var(--u)); color: var(--ps-crema);
    background:
        radial-gradient(120% 46% at 50% 0, rgba(255, 190, 60, .24) 0, rgba(255, 110, 20, 0) 70%) padding-box,
        linear-gradient(180deg, #3d1308 0%, #260904 100%) padding-box,
        linear-gradient(160deg, #ffd75e 0%, #f7630c 52%, #e8321a 100%) border-box;
    box-shadow: 0 0 calc(34 * var(--u)) rgba(255, 150, 0, .42), 0 calc(20 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .55);
    max-height: 94dvh;
}

/* Icono de trofeo (dorado: es lo que la distingue de Amigos/Carrera) y botón cerrar */
#positionsModal .pos-badge {
    position: absolute; z-index: 2; left: 50%; top: calc(-33 * var(--u)); transform: translateX(-50%);
    width: calc(64 * var(--u)); height: calc(64 * var(--u)); box-sizing: border-box; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(160deg, #ffe27a, #f59e0b 55%, #ea5804); border: calc(4 * var(--u)) solid #fff; color: #fff;
    box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .5), 0 0 calc(20 * var(--u)) rgba(255, 190, 40, .7);
}
#positionsModal .pos-badge svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); filter: drop-shadow(0 calc(2 * var(--u)) 0 rgba(120, 50, 0, .45)); }
#positionsModal .pos-x {
    position: absolute; z-index: 3; top: calc(-10 * var(--u)); right: calc(-8 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); padding: 0;
    border: calc(2.5 * var(--u)) solid #fff; border-radius: 50%; background: linear-gradient(160deg, #ee4244, #c1121f); color: #fff;
    font: 800 calc(13 * var(--u)) 'Montserrat', sans-serif; cursor: pointer; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .45);
    display: grid; place-items: center; line-height: 1;
}
#positionsModal .pos-x:active { transform: scale(.92); }

/* ---------- Cabecera ---------- */
#positionsModal .pos-header-area { margin-bottom: calc(10 * var(--u)); gap: 0; }
#positionsModal .pos-main-title {
    font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: normal; font-size: calc(27 * var(--u)); letter-spacing: 1px; line-height: 1.05; color: #fff;
    text-shadow: 0 calc(3 * var(--u)) 0 #ff4d00, 0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(255, 90, 0, .45);
}
#positionsModal .pos-subtitle { margin: calc(7 * var(--u)) 0 0; font-size: calc(10.5 * var(--u)); font-weight: 800; letter-spacing: .6px; color: var(--ps-mute); text-transform: uppercase; }
/* línea "Reinicia en 4d 15h · 18 oct – 24 oct" (la inyecta PicaSemana.pintarCierre) */
#positionsModal .pos-header-area > :not(.pos-main-title):not(.pos-subtitle) {
    margin: calc(7 * var(--u)) 0 0; padding: calc(3 * var(--u)) calc(11 * var(--u)); border-radius: 99px;
    background: rgba(255, 140, 40, .18); border: 1px solid rgba(255, 170, 90, .35);
    color: #ffc27a !important; font-size: calc(10.5 * var(--u)); font-weight: 800;
}

/* ---------- Pestañas (píldora oscura + botón 3D activo) ---------- */
#positionsModal .pos-tabs-container {
    width: 100%; box-sizing: border-box; display: flex; gap: calc(5 * var(--u)); padding: calc(4 * var(--u)); margin-bottom: calc(10 * var(--u));
    border-radius: calc(16 * var(--u)); background: rgba(0, 0, 0, .32); border: 1.5px solid var(--ps-linea); box-shadow: none;
}
#positionsModal .pos-tab-btn {
    flex: 1 1 0; padding: calc(8 * var(--u)) calc(4 * var(--u)); border: 0; border-radius: calc(12 * var(--u)); background: transparent; box-shadow: none;
    color: var(--ps-mute); font: 800 calc(12 * var(--u)) 'Montserrat', sans-serif; cursor: pointer; transition: color .2s, background .2s;
}
#positionsModal .pos-tab-btn.active {
    background: var(--ps-fuego); color: #fff; text-shadow: 0 calc(1 * var(--u)) 0 rgba(90, 20, 0, .5);
    box-shadow: 0 calc(3 * var(--u)) 0 var(--ps-base), 0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(255, 90, 0, .3);
}

/* ---------- Panel del podio + lista (cristal con foco de luz) ---------- */
#positionsModal .pos-card {
    position: relative; width: 100%; box-sizing: border-box; padding: calc(14 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u)); gap: calc(8 * var(--u));
    border-radius: calc(20 * var(--u)); color: var(--ps-crema); max-height: 50dvh;
    background: radial-gradient(70% 55% at 50% 22%, rgba(255, 190, 60, .20) 0, rgba(255, 190, 60, 0) 100%), rgba(0, 0, 0, .28);
    border: 1.5px solid var(--ps-linea); box-shadow: inset 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .35);
}
#positionsModal .pos-msg { color: var(--ps-mute); }

/* Podio */
#positionsModal .podio-corona { color: #ffd23f; filter: drop-shadow(0 0 calc(6 * var(--u)) rgba(255, 190, 0, .85)); }
#positionsModal .podio-av, #positionsModal .podio-av-vacio { box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .55); }
#positionsModal .podio-col.oro .podio-av { box-shadow: 0 0 calc(18 * var(--u)) rgba(255, 190, 0, .8), 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .5); }
#positionsModal .podio-col.plata .podio-av { box-shadow: 0 0 calc(10 * var(--u)) rgba(200, 215, 235, .35), 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .5); }
#positionsModal .podio-col.bronce .podio-av { box-shadow: 0 0 calc(10 * var(--u)) rgba(230, 140, 70, .4), 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .5); }
#positionsModal .podio-av-vacio { background: rgba(255, 255, 255, .06); color: #b88a6a; }
#positionsModal .podio-nombre { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
#positionsModal .podio-pts { color: #ffb02e; text-shadow: 0 calc(2 * var(--u)) 0 rgba(0, 0, 0, .45); }
#positionsModal .podio-pts small, #positionsModal .pos-fila-pts small { color: #e9c9a8; opacity: .9; }
#positionsModal .podio-base { box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, .55), 0 0 calc(14 * var(--u)) rgba(0, 0, 0, .35); }
#positionsModal .podio-col.oro .podio-base { box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, .65), 0 0 calc(20 * var(--u)) rgba(255, 190, 0, .45); }
#positionsModal .podio-col.yo .podio-nombre { color: #ffb02e; }
#positionsModal .podio-col.yo .podio-av { outline: calc(2 * var(--u)) solid #fff; outline-offset: calc(1 * var(--u)); }

/* Lista (mismo vidrio que las filas de Amigos) */
#positionsModal .pos-list-container { scrollbar-color: rgba(255, 150, 60, .5) transparent; }
#positionsModal .pos-fila { background: var(--ps-vidrio); border: 1.5px solid rgba(255, 170, 90, .16); border-radius: calc(16 * var(--u)); box-shadow: none; }
#positionsModal .pos-fila.yo { background: rgba(255, 120, 0, .16); border-color: #ff8a1f; }
#positionsModal .pos-fila-rank { background: rgba(255, 255, 255, .1); color: #fff; }
#positionsModal .pos-fila.yo .pos-fila-rank { background: var(--ps-fuego); }
#positionsModal .pos-fila-av { border: calc(2 * var(--u)) solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
#positionsModal .pos-fila-nombre { color: #fff; }
#positionsModal .pos-fila-nombre em { background: var(--ps-fuego); }
#positionsModal .pos-fila-barra { background: rgba(255, 255, 255, .1); }
#positionsModal .pos-fila-barra i { background: linear-gradient(90deg, #ffd75e, #f7630c); box-shadow: 0 0 calc(6 * var(--u)) rgba(255, 140, 0, .6); }
#positionsModal .pos-fila-pts { color: #ffb02e; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }

/* Vacío (igual que el "Aún no tienes amigos") */
#positionsModal .pos-vacio { border: 2px dashed rgba(255, 170, 90, .3); border-radius: calc(18 * var(--u)); color: var(--ps-mute); margin: calc(6 * var(--u)) 0; }
#positionsModal .pos-vacio b { color: var(--ps-crema); }

/* Tu posición (botón de fuego, como "Tu código de amigo") */
#positionsModal .pos-yo { margin-top: calc(11 * var(--u)); border-radius: calc(20 * var(--u)); box-shadow: 0 calc(4 * var(--u)) 0 var(--ps-base), 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(255, 90, 0, .3); }