/* ============================================================
   MinerOS Hub — Medallas de rango y prestigio
   ------------------------------------------------------------
   Las medallas eran cuadrados planos con un icono. Aquí pasan a
   ser medallones: metal biselado, brillo que gira, flotación
   suave y un aura para el rango actual.

   Cada rango trae su propio par de color en `--c1`/`--c2` y su
   tinta `--ink`, así que el icono siempre contrasta con su fondo
   (oscuro sobre plata y oro, claro sobre acero y violeta).

   La paleta sale de la del sitio: el oro de marca es el centro
   de la escala y los demás tonos son sus vecinos en la rueda,
   nunca colores traídos de fuera.

   Con "reducir movimiento" todo queda quieto pero igual de
   vistoso: el brillo se detiene en su punto más favorable.
   ============================================================ */

/* ---------- medallón base ---------- */
.rk-dot{
  --c1:#5a6068; --c2:#2c3036; --ink:#f2ede0; --aura:rgba(231,189,90,.5);
  position:relative; overflow:hidden; border-radius:50%;
  border:none !important;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.5),transparent 48%),
    conic-gradient(from 200deg,var(--c1),var(--c2) 34%,var(--c1) 58%,var(--c2) 84%,var(--c1)) !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.22),
    inset 0 -7px 14px rgba(0,0,0,.5),
    inset 0 5px 10px rgba(255,255,255,.14),
    0 10px 24px -12px #000;
  animation:medalFloat 4.6s ease-in-out infinite;
}
/* brillo que barre el metal */
.rk-dot::after{
  content:""; position:absolute; inset:-40%; pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.55) 18deg,transparent 44deg,transparent 360deg);
  animation:medalSheen 5.5s linear infinite; opacity:.55;
}
/* borde interior dorado: el hilo que une toda la escala */
.rk-dot::before{
  content:""; position:absolute; inset:4px; border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 0 12px rgba(0,0,0,.35); pointer-events:none; z-index:2;
}
.rk-dot .mos-ic{position:relative; z-index:3; color:var(--ink) !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}

/* ---------- los ocho rangos ---------- */
.rk-dot.m1{--c1:#7b828c;--c2:#2b2f36;--ink:#f4f1e8;--aura:rgba(150,160,175,.45)}   /* acero */
.rk-dot.m2{--c1:#c98a4b;--c2:#5b3418;--ink:#22160a;--aura:rgba(201,138,75,.5)}     /* cobre */
.rk-dot.m3{--c1:#5fc98d;--c2:#1c5a38;--ink:#0d2418;--aura:rgba(95,201,141,.5)}     /* energía */
.rk-dot.m4{--c1:#dfe5ec;--c2:#78828e;--ink:#1a1d22;--aura:rgba(223,229,236,.5)}    /* plata */
.rk-dot.m5{--c1:#6ea8e8;--c2:#22447a;--ink:#0b1a2e;--aura:rgba(110,168,232,.5)}    /* frío */
.rk-dot.m6{--c1:#f6d98a;--c2:#a9761c;--ink:#241905;--aura:rgba(231,189,90,.62)}    /* oro de marca */
.rk-dot.m7{--c1:#c39af0;--c2:#4d2a80;--ink:#180a2c;--aura:rgba(195,154,240,.52)}   /* violeta */
.rk-dot.m8{--c1:#a8ecf7;--c2:#2f7f96;--ink:#04222b;--aura:rgba(168,236,247,.6)}    /* hielo */

/* cada medalla con su propio compás: en fila, sincronizadas, cantan a robot */
.rk-row:nth-child(2n) .rk-dot{animation-delay:-1.1s}
.rk-row:nth-child(3n) .rk-dot{animation-delay:-2.3s}
.rk-row:nth-child(2n) .rk-dot::after{animation-duration:6.4s}
.rk-row:nth-child(3n) .rk-dot::after{animation-duration:4.9s}

/* ---------- estados ---------- */
.rk-row.locked .rk-dot{filter:grayscale(.82) brightness(.62); animation:none; opacity:.85}
.rk-row.locked .rk-dot::after{animation:none; opacity:.18}
.rk-row.locked .rk-dot .mos-ic{color:rgba(255,255,255,.72) !important}

/* el rango alcanzado luce su aura */
.rk-row.reached .rk-dot{box-shadow:
  inset 0 0 0 1.5px rgba(255,255,255,.26),
  inset 0 -7px 14px rgba(0,0,0,.45),
  inset 0 5px 10px rgba(255,255,255,.16),
  0 10px 26px -12px #000,
  0 0 0 1px var(--aura),
  0 0 22px -4px var(--aura)}

/* el rango actual, además, late */
.rk-row.current .rk-node{position:relative}
.rk-row.current .rk-node::after{
  content:""; position:absolute; top:0; left:50%; width:52px; height:52px;
  transform:translateX(-50%); border-radius:50%; pointer-events:none;
  border:1.5px solid var(--aura); animation:medalPing 2.4s ease-out infinite;
}
.rk-row.current .rk-dot::after{animation-duration:3.2s; opacity:.8}

.rk-dot:hover{transform:scale(1.07)}
.rk-dot{transition:transform .28s cubic-bezier(.16,1,.3,1)}

/* ---------- prestigio: rangos.html ---------- */
.rk-prestige .pg-stars{
  position:relative; width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),transparent 48%),
    conic-gradient(from 200deg,#f6d98a,#a9761c 34%,#f6d98a 58%,#8d5f12 84%,#f6d98a);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3),inset 0 -8px 16px rgba(0,0,0,.42),
    0 0 0 1px rgba(231,189,90,.55),0 0 30px -6px rgba(231,189,90,.6);
  animation:medalFloat 5.2s ease-in-out infinite;
}
.rk-prestige .pg-stars::after{
  content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.6) 16deg,transparent 42deg,transparent 360deg);
  animation:medalSheen 4.6s linear infinite;
}
.rk-prestige .pg-stars .mos-ic{position:relative;z-index:2;width:34px !important;height:34px !important;
  color:#241905 !important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}

/* chips de nivel: pequeños medallones en línea */
.pg-chip{position:relative;display:inline-flex;align-items:center;gap:7px;overflow:hidden;
  border-color:var(--border-gold);background:linear-gradient(135deg,rgba(231,189,90,.10),transparent)}
.pg-chip [data-ic]{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(from 200deg,#f6d98a,#a9761c 40%,#f6d98a);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.pg-chip [data-ic] .mos-ic{width:12px !important;height:12px !important;color:#241905 !important}
.pg-chip:nth-child(2) [data-ic]{background:conic-gradient(from 200deg,#c39af0,#4d2a80 40%,#c39af0)}
.pg-chip:nth-child(2) [data-ic] .mos-ic{color:#180a2c !important}
.pg-chip:nth-child(3) [data-ic]{background:conic-gradient(from 200deg,#a8ecf7,#2f7f96 40%,#a8ecf7)}
.pg-chip:nth-child(3) [data-ic] .mos-ic{color:#04222b !important}

/* ---------- prestigio: mi cuenta ---------- */
.pr-star-ic{
  position:relative; width:44px !important; height:44px !important; border-radius:50%;
  overflow:hidden; place-items:center;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.16),transparent 50%),
    linear-gradient(160deg,#2a2d34,#171a1f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 -5px 10px rgba(0,0,0,.5);
}
.pr-star-ic .mos-ic{position:relative;z-index:2;width:22px !important;height:22px !important}
/* cada estrella conseguida sube un tono en la escala: oro → violeta → hielo */
.pr-star.got .pr-star-ic{
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.5),transparent 48%),
    conic-gradient(from 200deg,var(--c1,#f6d98a),var(--c2,#a9761c) 34%,var(--c1,#f6d98a) 58%,var(--c2,#a9761c) 84%,var(--c1,#f6d98a));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28),inset 0 -6px 12px rgba(0,0,0,.42),
    0 0 0 1px var(--aura,rgba(231,189,90,.55)),0 0 20px -5px var(--aura,rgba(231,189,90,.6));
  animation:medalFloat 4.8s ease-in-out infinite;
}
.pr-star.got .pr-star-ic::after{
  content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.55) 16deg,transparent 42deg,transparent 360deg);
  animation:medalSheen 5.2s linear infinite;
}
.pr-star.got .pr-star-ic .mos-ic{color:var(--ink,#241905) !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.pr-star:nth-child(1).got .pr-star-ic{--c1:#f6d98a;--c2:#a9761c;--ink:#241905}
.pr-star:nth-child(2).got .pr-star-ic{--c1:#f0b95e;--c2:#8a5a12;--ink:#241905;animation-delay:-.9s}
.pr-star:nth-child(3).got .pr-star-ic{--c1:#c39af0;--c2:#4d2a80;--ink:#180a2c;--aura:rgba(195,154,240,.55);animation-delay:-1.8s}
.pr-star:nth-child(4).got .pr-star-ic{--c1:#8fb8f5;--c2:#26467e;--ink:#0b1a2e;--aura:rgba(143,184,245,.55);animation-delay:-2.7s}
.pr-star:nth-child(5).got .pr-star-ic{--c1:#a8ecf7;--c2:#2f7f96;--ink:#04222b;--aura:rgba(168,236,247,.6);animation-delay:-3.6s}
.pr-star.got{border-color:var(--border-gold)}
.pr-star{transition:transform .28s cubic-bezier(.16,1,.3,1)}
.pr-star.got:hover{transform:translateY(-3px)}

/* ---------- movimiento ---------- */
@keyframes medalSheen{ to{ transform:rotate(360deg) } }
@keyframes medalFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
@keyframes medalPing{
  0%{ transform:translateX(-50%) scale(1); opacity:.75 }
  70%{ transform:translateX(-50%) scale(1.42); opacity:0 }
  100%{ transform:translateX(-50%) scale(1.42); opacity:0 }
}

/* en tema claro el metal necesita menos brillo especular */
html[data-theme=light] .rk-dot::after,
html[data-theme=light] .pr-star.got .pr-star-ic::after,
html[data-theme=light] .rk-prestige .pg-stars::after{opacity:.34}

@media(max-width:560px){
  .rk-row.current .rk-node::after{width:44px;height:44px}
  .rk-prestige .pg-stars{width:62px;height:62px}
  .rk-prestige .pg-stars .mos-ic{width:28px !important;height:28px !important}
}

@media(prefers-reduced-motion:reduce){
  .rk-dot,.rk-prestige .pg-stars,.pr-star.got .pr-star-ic{animation:none}
  .rk-dot::after,.rk-prestige .pg-stars::after,.pr-star.got .pr-star-ic::after{
    animation:none; transform:rotate(28deg)}
  .rk-row.current .rk-node::after{animation:none;opacity:.5}
}