/* 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:grid;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:grid;
  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}


/* === Ajuste solicitado: reducir el área/contorno de las palabras en la lista vertical a 1cm === */
/* Forzamos altura fija y línea a 1cm para cada tarjeta en los stacks verticales */
.stack { 
  grid-auto-rows: 1cm !important; 
  grid-template-rows: 1cm 1cm 1cm; /* para tríadas */
}
.stack .card{
  height: 1cm !important;
  line-height: 1cm !important;
  padding: 0 .5rem !important;
  font-size: 0.95rem;
}


/* === Grupos de 3 triadas en horizontal === */
.triads-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(240px,1fr));
  gap:1.25rem;
}
