/* Paleta y base */
:root{
  --bg:#0b0b0f; --panel:#12121a; --ink:#eaeaf0; --muted:#a0a3ad;
  --fx:#181824; --stroke:#1f1f2b; --a:#00ff88; --b:#ff2fd6;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,Roboto,Arial,sans-serif}

.ranking{max-width:820px;margin:auto;padding:1rem;display:block;gap:1.25rem}
.triad{border:1px solid var(--stroke);background:var(--panel);border-radius:14px;padding:1rem}
.triad h3{margin:.1rem 0 .8rem;color:var(--a)}

/* Controles: 3 grupos (1º,2º,3º) eligen A/B/C */
.controls{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:.9rem}
fieldset{border:1px solid var(--stroke);border-radius:10px;padding:.4rem .5rem;display:flex;align-items:center;gap:.35rem;background:var(--fx)}
legend{padding:0 .35rem;color:var(--muted);font-size:.85rem}
label{display:inline-flex;align-items:center;gap:.25rem;background:#1a1a25;border:1px solid #242436;border-radius:8px;padding:.25rem .5rem;cursor:pointer}
input[type=radio]{appearance:none;width:0;height:0;position:absolute;pointer-events:none}
label:has(input:checked){background:linear-gradient(135deg,var(--a),var(--b));color:#0b0b0f;font-weight:700}

/* Pila vertical donde reordenamos */
.stack{
  display:block;
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "pos1"
    "pos2"
    "pos3";
  gap:.45rem;
}

/* Tarjetas */
.card{
  grid-area: pos3; /* por defecto al final */
  display:block;width:100%;
  text-align:left;
  background:#171722;
  border:1px solid #26263a;border-radius:12px;
  padding:.8rem 1rem;
  color:var(--ink);
  transition:transform .15s ease, box-shadow .2s ease;
}
.card:active{transform:scale(.985)}
.card.A{--glow: rgba(0,255,136,.25)}
.card.B{--glow: rgba(255,47,214,.25)}
.card.C{--glow: rgba(120,180,255,.25)}
.card{box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 6px 24px rgba(0,0,0,.35), 0 0 0 1px var(--glow)}

/* === Reglas de orden por tríada usando :has() === */
/* Idea: cada grupo de radios (1º/2º/3º) elige A/B/C.
   Colocamos cada tarjeta en pos1/pos2/pos3 según la selección. */

/* TRIADA 1 */
#triad-1:has(#t1-r1-A:checked) .A {grid-area:pos1}
#triad-1:has(#t1-r2-A:checked) .A {grid-area:pos2}
#triad-1:has(#t1-r3-A:checked) .A {grid-area:pos3}
#triad-1:has(#t1-r1-B:checked) .B {grid-area:pos1}
#triad-1:has(#t1-r2-B:checked) .B {grid-area:pos2}
#triad-1:has(#t1-r3-B:checked) .B {grid-area:pos3}
#triad-1:has(#t1-r1-C:checked) .C {grid-area:pos1}
#triad-1:has(#t1-r2-C:checked) .C {grid-area:pos2}
#triad-1:has(#t1-r3-C:checked) .C {grid-area:pos3}

/* TRIADA 2 */
#triad-2:has(#t2-r1-A:checked) .A {grid-area:pos1}
#triad-2:has(#t2-r2-A:checked) .A {grid-area:pos2}
#triad-2:has(#t2-r3-A:checked) .A {grid-area:pos3}
#triad-2:has(#t2-r1-B:checked) .B {grid-area:pos1}
#triad-2:has(#t2-r2-B:checked) .B {grid-area:pos2}
#triad-2:has(#t2-r3-B:checked) .B {grid-area:pos3}
#triad-2:has(#t2-r1-C:checked) .C {grid-area:pos1}
#triad-2:has(#t2-r2-C:checked) .C {grid-area:pos2}
#triad-2:has(#t2-r3-C:checked) .C {grid-area:pos3}

/* TRIADA 3 */
#triad-3:has(#t3-r1-A:checked) .A {grid-area:pos1}
#triad-3:has(#t3-r2-A:checked) .A {grid-area:pos2}
#triad-3:has(#t3-r3-A:checked) .A {grid-area:pos3}
#triad-3:has(#t3-r1-B:checked) .B {grid-area:pos1}
#triad-3:has(#t3-r2-B:checked) .B {grid-area:pos2}
#triad-3:has(#t3-r3-B:checked) .B {grid-area:pos3}
#triad-3:has(#t3-r1-C:checked) .C {grid-area:pos1}
#triad-3:has(#t3-r2-C:checked) .C {grid-area:pos2}
#triad-3:has(#t3-r3-C:checked) .C {grid-area:pos3}

/* TRIADA 4 */
#triad-4:has(#t4-r1-A:checked) .A {grid-area:pos1}
#triad-4:has(#t4-r2-A:checked) .A {grid-area:pos2}
#triad-4:has(#t4-r3-A:checked) .A {grid-area:pos3}
#triad-4:has(#t4-r1-B:checked) .B {grid-area:pos1}
#triad-4:has(#t4-r2-B:checked) .B {grid-area:pos2}
#triad-4:has(#t4-r3-B:checked) .B {grid-area:pos3}
#triad-4:has(#t4-r1-C:checked) .C {grid-area:pos1}
#triad-4:has(#t4-r2-C:checked) .C {grid-area:pos2}
#triad-4:has(#t4-r3-C:checked) .C {grid-area:pos3}

/* TRIADA 5 */
#triad-5:has(#t5-r1-A:checked) .A {grid-area:pos1}
#triad-5:has(#t5-r2-A:checked) .A {grid-area:pos2}
#triad-5:has(#t5-r3-A:checked) .A {grid-area:pos3}
#triad-5:has(#t5-r1-B:checked) .B {grid-area:pos1}
#triad-5:has(#t5-r2-B:checked) .B {grid-area:pos2}
#triad-5:has(#t5-r3-B:checked) .B {grid-area:pos3}
#triad-5:has(#t5-r1-C:checked) .C {grid-area:pos1}
#triad-5:has(#t5-r2-C:checked) .C {grid-area:pos2}
#triad-5:has(#t5-r3-C:checked) .C {grid-area:pos3}

/* Toggle 'Más' */
.more-toggle{display:none}
.more-label{
  display:inline-flex;align-items:center;justify-content:center;
  margin:1rem 0;padding:.5rem 1rem;border:1px solid var(--stroke);
  background:var(--fx);color:var(--ink);border-radius:10px;cursor:pointer;
}
.pentads{display:none}
.more-toggle:checked ~ .pentads{display:block}

/* Listas verticales: 1cm por elemento y resultados sin borde */
.stack, .triad .result, .pentad .result{
  display:grid;
  grid-template-areas:
    "pos1"
    "pos2"
    "pos3";
  grid-auto-rows:1cm;
  gap:.35rem;
}
.stack .card{height:1cm;line-height:1cm;padding:0 .5rem}

.triad .result .card,
.pentad .result .card{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Triadas: 3 filas de resultado */
.triad .result{grid-template-rows:1cm 1cm 1cm}

/* Pentadas: arena cuadrada y resultado 5 filas */
.pentad .arena{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr 1fr 1fr;
  grid-template-areas:
    "pos2 . pos3"
    ". pos1 ."
    "pos4 . pos5";
  gap:.5rem;
  align-items:center;
  justify-items:center;
  min-height:9cm;
}
.pentad .arena .card{width:max(6rem,30%);height:1cm;line-height:1cm;text-align:center;padding:0 .5rem}
.pentad .result{
  display:grid;
  grid-template-areas:
    "pos1"
    "pos2"
    "pos3"
    "pos4"
    "pos5";
  grid-template-rows:1cm 1cm 1cm 1cm 1cm;
  grid-auto-rows:unset;
}

/* === Reglas :has() para pentadas extra (5) === */
/* PENTAD EXTRA 1 */
#pentad-extra-1:has(#pe1-r1-A:checked) .A {grid-area:pos1}
#pentad-extra-1:has(#pe1-r2-A:checked) .A {grid-area:pos2}
#pentad-extra-1:has(#pe1-r3-A:checked) .A {grid-area:pos3}
#pentad-extra-1:has(#pe1-r4-A:checked) .A {grid-area:pos4}
#pentad-extra-1:has(#pe1-r5-A:checked) .A {grid-area:pos5}
#pentad-extra-1:has(#pe1-r1-B:checked) .B {grid-area:pos1}
#pentad-extra-1:has(#pe1-r2-B:checked) .B {grid-area:pos2}
#pentad-extra-1:has(#pe1-r3-B:checked) .B {grid-area:pos3}
#pentad-extra-1:has(#pe1-r4-B:checked) .B {grid-area:pos4}
#pentad-extra-1:has(#pe1-r5-B:checked) .B {grid-area:pos5}
#pentad-extra-1:has(#pe1-r1-C:checked) .C {grid-area:pos1}
#pentad-extra-1:has(#pe1-r2-C:checked) .C {grid-area:pos2}
#pentad-extra-1:has(#pe1-r3-C:checked) .C {grid-area:pos3}
#pentad-extra-1:has(#pe1-r4-C:checked) .C {grid-area:pos4}
#pentad-extra-1:has(#pe1-r5-C:checked) .C {grid-area:pos5}
#pentad-extra-1:has(#pe1-r1-D:checked) .D {grid-area:pos1}
#pentad-extra-1:has(#pe1-r2-D:checked) .D {grid-area:pos2}
#pentad-extra-1:has(#pe1-r3-D:checked) .D {grid-area:pos3}
#pentad-extra-1:has(#pe1-r4-D:checked) .D {grid-area:pos4}
#pentad-extra-1:has(#pe1-r5-D:checked) .D {grid-area:pos5}
#pentad-extra-1:has(#pe1-r1-E:checked) .E {grid-area:pos1}
#pentad-extra-1:has(#pe1-r2-E:checked) .E {grid-area:pos2}
#pentad-extra-1:has(#pe1-r3-E:checked) .E {grid-area:pos3}
#pentad-extra-1:has(#pe1-r4-E:checked) .E {grid-area:pos4}
#pentad-extra-1:has(#pe1-r5-E:checked) .E {grid-area:pos5}
/* PENTAD EXTRA 2 */
#pentad-extra-2:has(#pe2-r1-A:checked) .A {grid-area:pos1}
#pentad-extra-2:has(#pe2-r2-A:checked) .A {grid-area:pos2}
#pentad-extra-2:has(#pe2-r3-A:checked) .A {grid-area:pos3}
#pentad-extra-2:has(#pe2-r4-A:checked) .A {grid-area:pos4}
#pentad-extra-2:has(#pe2-r5-A:checked) .A {grid-area:pos5}
#pentad-extra-2:has(#pe2-r1-B:checked) .B {grid-area:pos1}
#pentad-extra-2:has(#pe2-r2-B:checked) .B {grid-area:pos2}
#pentad-extra-2:has(#pe2-r3-B:checked) .B {grid-area:pos3}
#pentad-extra-2:has(#pe2-r4-B:checked) .B {grid-area:pos4}
#pentad-extra-2:has(#pe2-r5-B:checked) .B {grid-area:pos5}
#pentad-extra-2:has(#pe2-r1-C:checked) .C {grid-area:pos1}
#pentad-extra-2:has(#pe2-r2-C:checked) .C {grid-area:pos2}
#pentad-extra-2:has(#pe2-r3-C:checked) .C {grid-area:pos3}
#pentad-extra-2:has(#pe2-r4-C:checked) .C {grid-area:pos4}
#pentad-extra-2:has(#pe2-r5-C:checked) .C {grid-area:pos5}
#pentad-extra-2:has(#pe2-r1-D:checked) .D {grid-area:pos1}
#pentad-extra-2:has(#pe2-r2-D:checked) .D {grid-area:pos2}
#pentad-extra-2:has(#pe2-r3-D:checked) .D {grid-area:pos3}
#pentad-extra-2:has(#pe2-r4-D:checked) .D {grid-area:pos4}
#pentad-extra-2:has(#pe2-r5-D:checked) .D {grid-area:pos5}
#pentad-extra-2:has(#pe2-r1-E:checked) .E {grid-area:pos1}
#pentad-extra-2:has(#pe2-r2-E:checked) .E {grid-area:pos2}
#pentad-extra-2:has(#pe2-r3-E:checked) .E {grid-area:pos3}
#pentad-extra-2:has(#pe2-r4-E:checked) .E {grid-area:pos4}
#pentad-extra-2:has(#pe2-r5-E:checked) .E {grid-area:pos5}
/* PENTAD EXTRA 3 */
#pentad-extra-3:has(#pe3-r1-A:checked) .A {grid-area:pos1}
#pentad-extra-3:has(#pe3-r2-A:checked) .A {grid-area:pos2}
#pentad-extra-3:has(#pe3-r3-A:checked) .A {grid-area:pos3}
#pentad-extra-3:has(#pe3-r4-A:checked) .A {grid-area:pos4}
#pentad-extra-3:has(#pe3-r5-A:checked) .A {grid-area:pos5}
#pentad-extra-3:has(#pe3-r1-B:checked) .B {grid-area:pos1}
#pentad-extra-3:has(#pe3-r2-B:checked) .B {grid-area:pos2}
#pentad-extra-3:has(#pe3-r3-B:checked) .B {grid-area:pos3}
#pentad-extra-3:has(#pe3-r4-B:checked) .B {grid-area:pos4}
#pentad-extra-3:has(#pe3-r5-B:checked) .B {grid-area:pos5}
#pentad-extra-3:has(#pe3-r1-C:checked) .C {grid-area:pos1}
#pentad-extra-3:has(#pe3-r2-C:checked) .C {grid-area:pos2}
#pentad-extra-3:has(#pe3-r3-C:checked) .C {grid-area:pos3}
#pentad-extra-3:has(#pe3-r4-C:checked) .C {grid-area:pos4}
#pentad-extra-3:has(#pe3-r5-C:checked) .C {grid-area:pos5}
#pentad-extra-3:has(#pe3-r1-D:checked) .D {grid-area:pos1}
#pentad-extra-3:has(#pe3-r2-D:checked) .D {grid-area:pos2}
#pentad-extra-3:has(#pe3-r3-D:checked) .D {grid-area:pos3}
#pentad-extra-3:has(#pe3-r4-D:checked) .D {grid-area:pos4}
#pentad-extra-3:has(#pe3-r5-D:checked) .D {grid-area:pos5}
#pentad-extra-3:has(#pe3-r1-E:checked) .E {grid-area:pos1}
#pentad-extra-3:has(#pe3-r2-E:checked) .E {grid-area:pos2}
#pentad-extra-3:has(#pe3-r3-E:checked) .E {grid-area:pos3}
#pentad-extra-3:has(#pe3-r4-E:checked) .E {grid-area:pos4}
#pentad-extra-3:has(#pe3-r5-E:checked) .E {grid-area:pos5}
/* PENTAD EXTRA 4 */
#pentad-extra-4:has(#pe4-r1-A:checked) .A {grid-area:pos1}
#pentad-extra-4:has(#pe4-r2-A:checked) .A {grid-area:pos2}
#pentad-extra-4:has(#pe4-r3-A:checked) .A {grid-area:pos3}
#pentad-extra-4:has(#pe4-r4-A:checked) .A {grid-area:pos4}
#pentad-extra-4:has(#pe4-r5-A:checked) .A {grid-area:pos5}
#pentad-extra-4:has(#pe4-r1-B:checked) .B {grid-area:pos1}
#pentad-extra-4:has(#pe4-r2-B:checked) .B {grid-area:pos2}
#pentad-extra-4:has(#pe4-r3-B:checked) .B {grid-area:pos3}
#pentad-extra-4:has(#pe4-r4-B:checked) .B {grid-area:pos4}
#pentad-extra-4:has(#pe4-r5-B:checked) .B {grid-area:pos5}
#pentad-extra-4:has(#pe4-r1-C:checked) .C {grid-area:pos1}
#pentad-extra-4:has(#pe4-r2-C:checked) .C {grid-area:pos2}
#pentad-extra-4:has(#pe4-r3-C:checked) .C {grid-area:pos3}
#pentad-extra-4:has(#pe4-r4-C:checked) .C {grid-area:pos4}
#pentad-extra-4:has(#pe4-r5-C:checked) .C {grid-area:pos5}
#pentad-extra-4:has(#pe4-r1-D:checked) .D {grid-area:pos1}
#pentad-extra-4:has(#pe4-r2-D:checked) .D {grid-area:pos2}
#pentad-extra-4:has(#pe4-r3-D:checked) .D {grid-area:pos3}
#pentad-extra-4:has(#pe4-r4-D:checked) .D {grid-area:pos4}
#pentad-extra-4:has(#pe4-r5-D:checked) .D {grid-area:pos5}
#pentad-extra-4:has(#pe4-r1-E:checked) .E {grid-area:pos1}
#pentad-extra-4:has(#pe4-r2-E:checked) .E {grid-area:pos2}
#pentad-extra-4:has(#pe4-r3-E:checked) .E {grid-area:pos3}
#pentad-extra-4:has(#pe4-r4-E:checked) .E {grid-area:pos4}
#pentad-extra-4:has(#pe4-r5-E:checked) .E {grid-area:pos5}
/* PENTAD EXTRA 5 */
#pentad-extra-5:has(#pe5-r1-A:checked) .A {grid-area:pos1}
#pentad-extra-5:has(#pe5-r2-A:checked) .A {grid-area:pos2}
#pentad-extra-5:has(#pe5-r3-A:checked) .A {grid-area:pos3}
#pentad-extra-5:has(#pe5-r4-A:checked) .A {grid-area:pos4}
#pentad-extra-5:has(#pe5-r5-A:checked) .A {grid-area:pos5}
#pentad-extra-5:has(#pe5-r1-B:checked) .B {grid-area:pos1}
#pentad-extra-5:has(#pe5-r2-B:checked) .B {grid-area:pos2}
#pentad-extra-5:has(#pe5-r3-B:checked) .B {grid-area:pos3}
#pentad-extra-5:has(#pe5-r4-B:checked) .B {grid-area:pos4}
#pentad-extra-5:has(#pe5-r5-B:checked) .B {grid-area:pos5}
#pentad-extra-5:has(#pe5-r1-C:checked) .C {grid-area:pos1}
#pentad-extra-5:has(#pe5-r2-C:checked) .C {grid-area:pos2}
#pentad-extra-5:has(#pe5-r3-C:checked) .C {grid-area:pos3}
#pentad-extra-5:has(#pe5-r4-C:checked) .C {grid-area:pos4}
#pentad-extra-5:has(#pe5-r5-C:checked) .C {grid-area:pos5}
#pentad-extra-5:has(#pe5-r1-D:checked) .D {grid-area:pos1}
#pentad-extra-5:has(#pe5-r2-D:checked) .D {grid-area:pos2}
#pentad-extra-5:has(#pe5-r3-D:checked) .D {grid-area:pos3}
#pentad-extra-5:has(#pe5-r4-D:checked) .D {grid-area:pos4}
#pentad-extra-5:has(#pe5-r5-D:checked) .D {grid-area:pos5}
#pentad-extra-5:has(#pe5-r1-E:checked) .E {grid-area:pos1}
#pentad-extra-5:has(#pe5-r2-E:checked) .E {grid-area:pos2}
#pentad-extra-5:has(#pe5-r3-E:checked) .E {grid-area:pos3}
#pentad-extra-5:has(#pe5-r4-E:checked) .E {grid-area:pos4}
#pentad-extra-5:has(#pe5-r5-E:checked) .E {grid-area:pos5}