.Stellarion2{background-blend-mode: darken;background-image: url(https://i.ibb.co/D1Sn2zc/constellation.png);background-size: 110%;background-position: 325px -40px;background-repeat: no-repeat;padding: 15px;width: auto;} .S2head{display: flex;align-items: center;color: var(--stellarion);gap: 20px;margin-top:5px} .Aname {font-family:Vidaloka;white-space: nowrap;font-size:40px;} .Sline{flex-grow: 1;height: 1px;background-color: var(--stellarion);} #aleicon1{font-size:40px} .Stelladata{display: flex;flex-direction: row;flex-wrap: wrap;gap: 0px;border-radius: 2px;color: #e0e6f0;font-family: 'serif';width: auto;height:400px;margin: auto;justify-content: center;overflow:hidden} .datasec {flex: 1 1 110px;background: rgba(0, 0, 0, 0.5);padding: 15px;border-radius: 2px;backdrop-filter: blur(1px);display: flex;flex-direction: column;justify-content: center;height:400px;width:200px;} .datasecimg{width: 250px;height: 400px;border-radius: 2px;object-fit: cover;} .datasec h3{text-align:center;font-family:Galins;margin-top: 0;font-size: 22px!important;border-bottom: 1px solid var(--stellarion);padding-bottom:5px;margin-bottom: 3px;color: var(--stellarion2);} .datasec ul{padding-left: 5px;margin-bottom: -15px!important;margin-left:-5px} .datasec b,.datasec strong{color:var(--stellarion2)} .stext1{font-family:calibri;font-size:14px;line-height:18px;padding:10px;height:90%;display:block;text-align:justify;color:#eee;overflow:auto} .museplayer {position: relative;width: 345px;height: 50px;background: linear-gradient(to right, #1e1e2f, var(--stellarion));border-radius: 20px;overflow: hidden;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;} .miconito{position: absolute;z-index: 2;pointer-events: none;opacity: 1;transition: opacity 0.3s ease;} #audplay{width: 100%;height: 46px; background-color: transparent;}.museplayer audio {background-color:#000;position: absolute;width: 100%;height: 100%;opacity: 0;pointer-events: none;transition: opacity 0.3s ease;} .museplayer:hover audio {opacity: 1;pointer-events: auto;} .museplayer:hover .miconito {opacity: 0;}.museplayer audio::-webkit-media-controls-panel {background: black;color: white;} .museplayer audio::-webkit-media-controls-play-button, .museplayer audio::-webkit-media-controls-current-time-display, .museplayer audio::-webkit-media-controls-time-remaining-display, .museplayer audio::-webkit-media-controls-timeline, .museplayer audio::-webkit-media-controls-mute-button,.museplayer audio::-webkit-media-controls-volume-slider {filter: invert(1); /* hace los íconos blancos */ } /*************** SECCIÓN RELACIONES ****************/ .relagrid {display: flex; flex-wrap: wrap;gap: 5px;justify-content: space-between;padding: 5px;height:220px;overflow:auto; } /* Tarjeta de relación */ .scard{background: rgba(0, 0, 0, 0.4);border-radius: 8px;width: 280px;padding: 20px;text-align: center;color: #e0e6f0;font-family: 'Vidaloka',serif;position: relative;overflow: hidden; }.relaimg {position: relative;width: 100px;height: 100px;border-radius: 50%;overflow: visible;flex-shrink: 0;margin:0 auto } /* Imagen real */ .relaimg img {width: 100%;height: 100%;border-radius: 50%;object-fit: cover;display: block;position: relative;z-index: 1; } /* Contenedor de estrellas orbitando */ .orbital-stars {position: absolute;border-radius: 50%;top: 50%;left: 50%;width: 100px; /* mayor que la imagen */height: 100px;transform: translate(-50%, -50%);z-index: 2;pointer-events: none;} /* Estrellas individuales */ .star {position: absolute;width: 2px;height: 2px;background: #ffffff;border-radius: 50%;box-shadow: 0 0 6px #ffffffaa;top: 50%;left: 50%;transform-origin: center; } /* Animaciones de órbita */ @keyframes orbit1 {0%{transform: rotate(0deg) translateX(55px) rotate(0deg); }100% { transform: rotate(360deg) translateX(55px) rotate(-360deg);}} @keyframes orbit2 {0%{ transform: rotate(90deg) translateX(55px) rotate(0deg);}100% {transform: rotate(450deg) translateX(55px) rotate(-360deg);}} @keyframes orbit3 {0%{ transform: rotate(180deg) translateX(55px) rotate(0deg); }100% { transform: rotate(540deg) translateX(55px) rotate(-360deg); } } @keyframes orbit4 {0%{ transform: rotate(270deg) translateX(55px) rotate(0deg); }100% { transform: rotate(630deg) translateX(55px) rotate(-360deg);}} /* Aplicación de animaciones */ .star1 { animation: orbit1 6s linear infinite;} .star2 { animation: orbit2 8s linear infinite;} .star3 { animation: orbit3 10s linear infinite;} .star4 {animation: orbit4 12s linear infinite; } /* Información del personaje */ .alerinf {flex-grow: 1;font-size: 14px;color: #d6d9ef;padding:5px;} .alerinf span {font-family:Vidaloka;font-size:18px;display: block;color: #ffffff;margin-bottom: 4px;} .blocki1{font-family:serif;text-align:center;font-size:11px;color:#eee;display:block;max-height:50px;overflow:auto; } /******* CRONO *********/ .Stellarion3{background-blend-mode: darken;background-image: url(https://i.ibb.co/D1Sn2zc/constellation.png);background-size: 100%;background-position: -500px 00%;background-repeat: no-repeat;padding: 15px;width: auto;} .stellchro {max-height: 400px;padding: 10px;overflow: auto; } .stellatime {padding: 10px;display: flex;flex-direction: column;align-items: center;position: relative;} .stellatime::before {content: '';position: absolute;left: 5%;width: 1px;height: 100%;background-color: var(--stellarion); } .steltop{display: flex;flex-direction: column; align-items: flex-start;width: 94%;padding: 20px 40px;margin: 1px 5px 3px 35px;border-left: 4px solid var(--stellarion);background: rgba(0, 0, 0, 0.3);border-radius: 8px;position: relative;} .steltop::before {content: '';position: absolute;left: -10px;top: 45px;width: 10px;height: 2px;background-color: var(--stellarion);} .steltop date{font-size: 18px;color: #fff;margin-bottom: 10px;font-family: Galins;border-bottom: 1px dotted #fff;display: block;} .steltop date a{color:#fff;text-decoration:none!important;} .steltop stcont {font-size: 14px;color: #ccc;line-height: 1.5;font-family: Arial, sans-serif;} .relagrid::-webkit-scrollbar, .stellchro::-webkit-scrollbar, .blocki1::-webkit-scrollbar, .stext1::-webkit-scrollbar {width: 5px!important;height: 6px!important;}.relagrid::-webkit-scrollbar-track,.stellchro::-webkit-scrollbar-track, .blocki1::-webkit-scrollbar-track, .stext1::-webkit-scrollbar-track {background: #000;width: 8px!important;height: 6px!important;}.sclosed {display: flex;flex-direction: column; align-items: flex-start;width: 94%;padding: 20px 40px;margin: 1px 5px 3px 35px;border-left: 4px solid var(--leyenda2);background: rgba(0, 0, 0, 0.3);border-radius: 8px;position: relative;} .sclosed::before {content: '';position: absolute;left: -10px;top: 45px;width: 10px;height: 2px;background-color: var(--leyenda2);} .sclosed date{font-size: 18px;color: #fff;margin-bottom: 10px;font-family: Galins;border-bottom: 1px dotted #fff;display: block;} .sclosed date a{color:#fff;text-decoration:none!important;} .sclosed stcont {font-size: 14px;color: #ccc;line-height: 1.5;font-family: Arial, sans-serif;}.Slegen{flex-direction:row;flex-direction: row-reverse;display: flex;gap: 1rem;font-family: sans-serif;font-size: 14px;margin-top: 1em;}.alelit{display:flex;align-items: center;gap: 10px;}.Slegencolor{width: 16px;height: 16px;border-radius: 4px;display: inline-block;}</style>


<style>.dark-mode .datasec{background:rgba(255, 255, 255, 0.1);} .dark-mode .steltop{background:rgba(255, 255, 255, 0.1)} .dark-mode .sclosed{background:rgba(255, 255, 255, 0.1)} .dark-mode .scard{background:rgba(255, 255, 255, 0.1);color:#000!important} .dark-mode .stext1{color:#000} .dark-mode .blocki1{color:#969696} .dark-mode .steltop date a{color:#000!important} .dark-mode .steltop stcont {color:#000!important} .dark-mode .sclosed stcont, .dark-mode .sclosed date a{color:#000!important}