/* ============================================================
   DOS PARA DUO · Menu radial "weapon wheel" (todas las paginas)
   Adaptado del pack Animmaster (Navigation Menus/21) a la marca.
   ============================================================ */

/* nav minimalista: logo + Suscribete + boton del wheel (el wheel ES el menu) */
nav{justify-content:flex-start;gap:14px}
nav .logo{margin-right:auto}
nav .nav-links a:not(.btn-yt){display:none !important}
.burger{
  order:3;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);color:var(--muted);
  line-height:1;border-radius:10px;padding:9px 12px;cursor:pointer;
  transition:color .2s,border-color .2s,transform .2s;
}
.burger:hover{border-color:var(--p2);color:var(--p2);transform:translateY(-1px)}
.burger{flex-direction:column;gap:4px}
.burger .b-bar{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s}
.burger:hover .b-bar:nth-child(1){transform:translateY(-1px)}
.burger:hover .b-bar:nth-child(3){transform:translateY(1px)}

body.rm-lock{overflow:hidden}

/* overlay */
.rm-overlay{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,11,20,.82);backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.rm-overlay.on{opacity:1;pointer-events:all}
.rm-top,.rm-foot{
  position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:20px 26px;font-family:var(--mono);font-size:.66rem;letter-spacing:2.5px;
  color:var(--muted);text-transform:uppercase;
}
.rm-top{top:0}
.rm-foot{bottom:0;justify-content:center;text-align:center}
.rm-title{color:var(--gold)}
.rm-close{
  background:none;border:1px solid var(--line);color:var(--text);
  border-radius:8px;width:38px;height:38px;cursor:pointer;font-size:1rem;line-height:1;
  transition:border-color .2s,color .2s;
}
.rm-close:hover{border-color:var(--p2);color:var(--p2)}

/* rueda */
.rm-wheel{position:relative}
.rm-seg{
  position:absolute;inset:0;opacity:0;
  background:rgba(20,36,64,.55);
  border:0;cursor:pointer;text-decoration:none;
}
.rm-overlay.on .rm-seg{opacity:1}
.rm-seg-c{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--text);text-align:center;pointer-events:none;
}
.rm-seg-c .rm-sico{width:30px;height:30px;fill:var(--p1)}
.rm-seg-c b{
  font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
}
@media (any-hover:hover){
  .rm-seg:hover{animation:rmFlick .35s ease-in-out forwards;z-index:10}
  .rm-seg:hover .rm-seg-c{animation:rmFlickC .35s ease-in-out forwards}
}
.rm-seg.rm-on{animation:rmFlick .35s ease-in-out forwards;z-index:10}
.rm-seg.rm-on .rm-seg-c{animation:rmFlickC .35s ease-in-out forwards}

/* joystick central */
.rm-joystick{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#1d3355,var(--panel));
  border:2px solid var(--gold);
  box-shadow:0 0 30px rgba(255,209,102,.25),inset 0 -6px 14px rgba(0,0,0,.5);
  cursor:grab;touch-action:none;user-select:none;z-index:20;
  transition:box-shadow .2s;
}
.rm-joystick:active{cursor:grabbing;box-shadow:0 0 44px rgba(255,209,102,.45),inset 0 -6px 14px rgba(0,0,0,.5)}
.rm-jico{width:38px;height:38px;fill:var(--gold)}

/* flicker retro al apuntar/hover (enciende el gajo en blanco, acentos azules) */
@keyframes rmFlick{
  0%{background:rgba(20,36,64,.55)}
  15%{background:rgba(255,255,255,.7)}
  30%{background:rgba(20,36,64,.6)}
  50%{background:rgba(255,255,255,.85)}
  70%{background:rgba(20,36,64,.65)}
  100%{background:rgba(255,255,255,.96)}
}
@keyframes rmFlickC{
  0%{color:var(--text)}
  100%{color:#0a111f}
}
.rm-seg:hover .rm-sico,.rm-seg.rm-on .rm-sico{fill:var(--p1)}

/* flicker de entrada/salida de cada gajo (steps = duro, retro) */
@keyframes rmIn{0%{opacity:0}25%{opacity:1}45%{opacity:0}70%{opacity:1}85%{opacity:.3}100%{opacity:1}}
@keyframes rmOut{0%{opacity:1}25%{opacity:0}45%{opacity:.8}70%{opacity:0}85%{opacity:.4}100%{opacity:0}}

@media(max-width:760px){
  nav .nav-links .btn-yt{display:none !important} /* en movil solo logo + wheel */
  .rm-seg-c .rm-sico{width:22px;height:22px}
  .rm-seg-c b{font-size:.56rem;letter-spacing:1px}
  .rm-joystick{width:72px;height:72px}
  .rm-jico{width:28px;height:28px}
}
@media (prefers-reduced-motion:reduce){
  .rm-overlay{transition:none}
  .rm-seg,.rm-seg:hover,.rm-seg.rm-on{animation:none !important;opacity:1}
}