@font-face {
  /* ===== THEMED NEWS MODULE - ESQUEMA AZUL ===== */
  .news-article {
    background: linear-gradient(150deg, rgba(2, 6, 23, 0.03) 30%, rgba(10, 15, 30, 0.01) 100%);
    border: 1px solid rgba(59, 130, 246, 0.45);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    margin: 18px 0;
    overflow: hidden;
  }
  .news-article__header {
    padding: 16px 18px 8px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 14px;
  }
  .news-article__badge {
    color: #cbd5e1;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    letter-spacing: .3px;
  }
  .news-article__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
  }
  .news-article__title a { color:#f1f5f9; text-decoration:none; }
  .news-article__title a:hover { color:#60a5fa; }
  .news-article__meta { margin-left:auto; color:#cbd5e1; font-size:13px; opacity:.9; }
  .news-article__body { padding: 6px 18px 18px 18px; color:#e5e7eb; }
  
  /* Read more button wrapper */
  .news-readmore-wrap { text-align:right; margin-top: 10px; }
  
  /* Reuse button style site-wide - esquema azul */
  .news-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; text-decoration:none; font-weight:600; letter-spacing:.2px; color:#f8fafc; background:linear-gradient(135deg, #142543, #1a2f55); box-shadow:0 6px 18px rgba(59, 130, 246, 0.28), inset 0 1px 0 rgba(255,255,255,.18); border:1px solid rgba(59, 130, 246, 0.45); transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
  .news-btn:hover { transform: translateY(-1px); filter:saturate(1.03); box-shadow:0 10px 24px rgba(59, 130, 246, 0.38), inset 0 1px 0 rgba(255,255,255,.22); background:linear-gradient(135deg, #1a2f55, #203a66); }
  .news-btn-arrow { font-size:16px; line-height:1; }
  
    font-family: AscensionFont;
    src: url(rohnroundedmedium.ttf);
  }
  
  
  .video-container {
    height: 700px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  
  .video-container video {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  
  /* Caption del video con esquema azul moderno */
  .video-container .caption {
    z-index: 1;
    position: relative;
    text-align: center;
    color: #f1f5f9;
    padding: 20px;
    vertical-align: middle;
    margin-top: 100px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 20px rgba(59, 130, 246, 0.4);
  }
  
  
  .home__content .headlogo {
    width: 550px;
    filter: drop-shadow(0 8px 16px rgba(59, 130, 246, 0.3));
    transition: all 0.3s ease;
  }

  .home__content .headlogo:hover {
    filter: drop-shadow(0 12px 24px rgba(59, 130, 246, 0.5));
    transform: scale(1.02);
  }
  
  @keyframes pulse {
    0% {
      text-shadow: 0 0 2px #1a0a00, 0 0 4px #1a0a00;
      transform: scale(1);
    }
    50% {
      text-shadow: 0 0 6px #3b82f6, 0 0 10px #3b82f6;
      transform: scale(1.05);
    }
    100% {
      text-shadow: 0 0 2px #1a0a00, 0 0 4px #1a0a00;
      transform: scale(1);
    }
  }
  
  /* Header online con esquema azul moderno */
  .online-header {
    text-align: center;
    position: relative;
  }
  
  .online-header span {
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }
  
  .online-header h4 {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }
  
  .online-header h4.pulsing-text {
    animation: 1s ease 0s infinite normal none running pulseBlue;
    color: #f1f5f9;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 20px rgba(59, 130, 246, 0.5);
  }

  @keyframes pulseBlue {
    0% {
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 15px rgba(59, 130, 246, 0.3);
      transform: scale(1);
    }
    50% {
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 25px rgba(59, 130, 246, 0.7);
      transform: scale(1.02);
    }
    100% {
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 15px rgba(59, 130, 246, 0.3);
      transform: scale(1);
    }
  }
  
  
  
  /* Header online secundario con esquema azul */
  .online-header2 {
    text-align: center;
  }
  
  .online-header2 span {
    color: #94a3b8;
    font-size: 0.8rem;
    line-height: 100%;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }
  
  .online-header2 h4 {
    font-size: 1.4rem;
    line-height: 100%; 
    margin: inherit;
    font-weight: 600;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }
  
  .online-header2 h4.pulsing-text {
    animation: 1s ease 0s infinite normal none running pulseBlue;
    color: #e2e8f0;
    line-height: 100%;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(59, 130, 246, 0.4);
  }
  
  
  
  
  /* Títulos H2 con esquema azul moderno */
  .h2-title {
    font-size: 2.2rem;
    color: #f1f5f9;
    padding: 35px;
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 20px rgba(59, 130, 246, 0.4);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    letter-spacing: 0.5px;
    position: relative;
  }

  .h2-title::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  }
  
  .modal-open {
    overflow: hidden;
  }
  
  .modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
  }
  
  .modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
  }
  
  .modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  
  .modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
  }
  
  .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border: 2px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(150deg, rgba(0, 0, 0, 0.03) 30%, rgba(0, 0, 0, 0.01) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 0 auto;
    width: 100%;
    padding: 50px 60px;
    border-radius: 10px;
  }
  
  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.60)
  }
  
  .modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  
  .modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: 0.5;
  }
  
  .modal-header {
    padding: 15px;
  }
  
  .modal-header .close {
    margin-top: -2px;
  }
  
  .modal-title {
    margin: 0;
    font-size: 1.6rem !important;
    color: #3b82f6;
  }
  
  .modal-body {
    position: relative;
    padding: 15px;
  }
  
  .modal-footer {
    padding: 15px;
    text-align: right;
  }
  
  .modal-footer .btn+.btn {
    margin-bottom: 0;
    margin-left: 5px;
  }
  
  .modal-footer .btn-group .btn+.btn {
    margin-left: -1px;
  }
  
  .modal-footer .btn-block+.btn-block {
    margin-left: 0;
  }
  
  .modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
  }
  
  @media (min-width: 768px) {
    .modal-dialog {
      width: 600px;
      margin: 30px auto;
    }
  
    .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
  
    .modal-sm {
      width: 300px;
    }
  }
  
  @media (min-width: 992px) {
    .modal-lg {
      width: 900px;
    }
  }
  
  .clearfix:before,
  .clearfix:after,
  .modal-header:before,
  .modal-header:after,
  .modal-footer:before,
  .modal-footer:after {
    display: table;
    content: " ";
  }
  
  .clearfix:after,
  .modal-header:after,
  .modal-footer:after {
    clear: both;
  }
  
  
  .modal__close {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 0 0 0 10px;
    top: 0;
    right: 0;
    z-index: 1;
    color: #3b82f6;
    border-left: 2px solid rgba(255, 255, 255, 0.05);
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
  }
  
  .fa-xmark {
    color: #561f1f;
  }
  
  
  /*==============================
    Screw
  ==============================*/
  .screw {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    background: url("../img/screw.svg") no-repeat center;
    pointer-events: none;
    z-index: 2;
  }
  
  .screw--tl {
    top: 15px;
    left: 15px;
  }
  
  .screw--tr {
    top: 15px;
    right: 15px;
  }
  
  .screw--bl {
    bottom: 15px;
    left: 15px;
  }
  
  .screw--br {
    bottom: 15px;
    right: 15px;
  }
  
  .screw--big-tr {
    width: 67px;
    height: 67px;
    background: url("../img/screw--big-tr.svg") no-repeat center;
    top: 15px;
    right: 15px;
  }
  
  .screw--big-tl {
    width: 67px;
    height: 67px;
    background: url("../img/screw--big-tl.svg") no-repeat center;
    top: 15px;
    left: 15px;
  }
  
  .screw--big-br {
    width: 67px;
    height: 67px;
    background: url("../img/screw--big-br.svg") no-repeat center;
    bottom: 15px;
    right: 15px;
  }
  
  .screw--big-bl {
    width: 67px;
    height: 67px;
    background: url("../img/screw--big-bl.svg") no-repeat center;
    bottom: 15px;
    left: 15px;
  }
  
  .screw--lines-tl {
    width: 67px;
    height: 67px;
    background: url("../img/screw--lines-tl.svg") no-repeat center;
    top: 15px;
    left: 15px;
  }
  
  .screw--lines-tr {
    width: 67px;
    height: 67px;
    background: url("../img/screw--lines-tr.svg") no-repeat center;
    top: 15px;
    right: 15px;
  }
  
  .screw--lines-br {
    width: 67px;
    height: 67px;
    background: url("../img/screw--lines-br.svg") no-repeat center;
    bottom: 15px;
    right: 15px;
  }
  
  .screw--lines-bl {
    width: 67px;
    height: 67px;
    background: url("../img/screw--lines-bl.svg") no-repeat center;
    bottom: 15px;
    left: 15px;
  }
  
  .screw--footer {
    display: none;
  }
  
  .screw--tablet {
    display: none;
  }
  
  @media (min-width: 992px) {
    .screw--tablet {
      display: block;
    }
  }
  
  @media (min-width: 1400px) {
    .screw--footer {
      display: block;
      width: 67px;
      height: 67px;
    }
  
    .screw--footer-tl {
      background: url("../img/screw--lines-tl.svg") no-repeat center;
      top: 30px;
      left: 30px;
    }
  
    .screw--footer-tr {
      background: url("../img/screw--lines-tr.svg") no-repeat center;
      top: 30px;
      right: 30px;
    }
  
    .screw--footer-br {
      background: url("../img/screw--lines-br.svg") no-repeat center;
      bottom: 30px;
      right: 30px;
    }
  
    .screw--footer-bl {
      background: url("../img/screw--lines-bl.svg") no-repeat center;
      bottom: 30px;
      left: 30px;
    }
  }
  
  .card__price span {
    font-size: 0.8rem !important;
    text-align: center;
  }
  
  .about-content .bg-1 {
    background-image: url("../img/antihack.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 30px;
    padding-top: 30px;
  }
  
  .about-content .bg-2 {
    background-image: url("../img/playtowin.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 30px;
    padding-top: 30px;
  }
  
  
  .about-content .bg-3 {
    background-image: url("../img/battlepass.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 30px;
    padding-top: 30px;
  }
  
  
  .about-content .bg-4 {
    background-image: url("../img/pvpevent.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 30px;
    padding-top: 30px;
  }
  
  /* Botones principales de la home - Esquema azul moderno */
  .home__btn2 {
    width: auto;
    min-width: 160px;
    height: 54px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #f8fafc;
    font-size: 15px;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    font-weight: 600;
    padding: 0 24px;
    margin-top: 0px;
    margin-right: 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 20px rgba(30, 64, 175, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
  }

  .home__btn2:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(96, 165, 250, 0.6);
    color: #ffffff;
  }

  .home__btn2:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 4px 15px rgba(30, 64, 175, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  
  /* Enlaces principales con esquema azul */
  .main__link2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 24px;
    color: #93c5fd;
    font-weight: 600;
    margin-bottom: 8px;
    margin-left: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }

  .main__link2:hover {
    color: #f1f5f9;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(59, 130, 246, 0.6);
    transform: translateY(-1px);
  }
  
  .main__link2 svg {
    width: 24px;
    height: auto;
    fill: #93c5fd;
    margin-left: 8px;
    transition: all 0.3s ease;
    margin-right: -3px;
  }

  .main__link2:hover svg {
    fill: #f1f5f9;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
  }
  
  .monsterkill img.logomonsterkill {
    display: inline !important;
    width: 18px !important;
  }
  
  .monsterkill img.monsterkillimage {
    width: 45px !important;
    display: inline !important;
  }
  
  .mkplayerinfo {
    color: #3b82f6;
  }
  
  .mkplayerinfo a {
    color: #3b82f6;
  }
  
  .monsterkill .card__title {
    display: block;
    width: 100%;
    color: #3b82f6;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 5px;
    transition: color 0.5s ease;
    padding: 0px !important;
  }
  
  .monsterkill .card__price .map {
    color: orange;
  }
  
  .monsterkillfull {
    font-size: 16px;
    color: #3b82f6;
    border-bottom: 1px outset #3b82f6;
    padding: 10px;
    font-family: 'Rajdhani', sans-serif;
  }
  
  .monsterkillfull img {
    width: 25px;
    border-radius: 50%;
  }
  
  .monsterkillfull .name {
    color: #3b82f6;
    font-weight: bold;
  }
  
  .monsterkillfull .monstername {
    font-weight: bold;
  }
  
  .monsterkillfull .map {
    color: #3b82f6;
    font-weight: bold;
  }
  
  .monsterkillfull .date {
    color: #3b82f6;
    font-weight: bold;
  }
  
  .sellers-list__author img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
    width: 20px !important;
    height: 20px;
    border-radius: 16px;
  }
  
  .fuck {
    width: 100% !important;
    display: inline-block;
  }
  
  img.rankings-class-tophome {
    width: 28px;
    border-radius: 50%;
    margin-left: 13px;
    margin-top: -12px;
  
  }
  
  img.logoguildhome {
    left: 25px;
  }
  
  img.logoguildhomeg1 {
    margin-left: 12px;
    margin-top: 0px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
  }
  
  img.logoguildhomeg2 {
    margin-left: 10px;
    margin-top: 2px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
  }
  
  img.logoguildhomeg3 {
    margin-left: 8px;
    margin-top: 3px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
  }
  
  img.logoguildhomeg4 {
    margin-left: 8px;
    margin-top: 3px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
  }
  
  img.logoguildhomeg5 {
    margin-left: 8px;
    margin-top: 3px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
  }
  
  .ranking-home {
    width: 100%;
    min-height: 402px;
    color: #3b82f6;
    font-weight: 700;
    display: table;
    line-height: 27px;
  }
  
  .ranking-home tbody tr {
    border: 2px solid rgba(255, 255, 255, 0.05);
  
    backdrop-filter: blur(10px);
    margin-bottom: 10px;
    display: block;
    border-radius: 5px;
    padding: 5px;
  }
  
  .ranking-home tr:first-child {
    border: 2px solid rgba(255, 255, 255, 0.05);
    background-color: #561f1f;
    backdrop-filter: blur(10px);
    padding-bottom: 15px;
    padding-top: 15px;
  }
  
  .ranking-home tr td:first-child {
    width: 15%;
    text-align: center;
  }
  
  .ranking-home tr td.character-info-home {
    padding-left: 10px;
  }
  
  .ranking-home tr td p {
    margin-bottom: 0px !important;
  }
  
  
  .bgcharacterhome {
    width: 30%;
  }
  
  
  .ClassAvatar1 {
    position: absolute;
    top: calc(-23px / -2 - 5px);
    left: calc(-45px / -2);
    width: calc(50px + 40px);
    height: calc(32px + 30px);
    background-size: cover;
    background-position: 50%;
    z-index: -1;
    background-image: url(../img/rating_1.png);
  }
  
  img.rankings-class-tophome1 {
    width: 28px;
    border-radius: 50%;
    margin-left: 13px;
    margin-top: 0px;
  
  }
  
  
  .ClassAvatar2 {
    position: absolute;
    top: calc(-8px / -2 - 5px);
    left: calc(-45px / -2);
    width: calc(40px + 40px);
    height: calc(32px + 30px);
    background-size: cover;
    background-position: 50%;
    z-index: -1;
    background-image: url(../img/rating_2.png);
  }
  
  img.rankings-class-tophome2 {
    width: 28px;
    border-radius: 50%;
    margin-left: 7px;
    margin-top: 0px;
  
  }
  
  
  .ClassAvatar3 {
    position: absolute;
    top: calc(-8px / -2 - 5px);
    left: calc(-63px / -2);
    width: calc(20px + 40px);
    height: calc(32px + 30px);
    background-size: cover;
    background-position: 50%;
    z-index: -1;
    background-image: url(../img/rating_3.png);
  }
  
  img.rankings-class-tophome3 {
    width: 28px;
    border-radius: 50%;
    margin-left: 7px;
    margin-top: 0px;
  
  }
  
  
  .ClassAvatar4 {
    position: absolute;
    top: calc(-8px / -2 - 5px);
    left: calc(-63px / -2);
    width: calc(20px + 40px);
    height: calc(32px + 30px);
    background-size: cover;
    background-position: 50%;
    z-index: -1;
    background-image: url(../img/rating_10.png);
  }
  
  img.rankings-class-tophome4 {
    width: 28px;
    border-radius: 50%;
    margin-left: 7px;
    margin-top: 0px;
  
  }
  
  .ClassAvatar5 {
    position: absolute;
    top: calc(-8px / -2 - 5px);
    left: calc(-63px / -2);
    width: calc(20px + 40px);
    height: calc(32px + 30px);
    background-size: cover;
    background-position: 50%;
    z-index: -1;
    background-image: url(../img/rating_10.png);
  }
  
  img.rankings-class-tophome5 {
    width: 28px;
    border-radius: 50%;
    margin-left: 7px;
    margin-top: 0px;
  
  }
  
  .usercp {
    width: 100%;
  }
  
  .usercp li {
    border: 2px solid #3a240f;
    border-radius: 10px;
    height: 65px;
    padding: 5px;
    margin-bottom: 10px;
    text-shadow: 1px 1px 1px #000;
  }
  
  .usercp li:hover {
    transform: scale(1.05);
    background-color: #561f1f;
    border: 2px solid #000;
  }
  
  .usercp li img {
    width: 50px;
  }
  
  
  .usercp li a {
    height: 70px;
    color: #3b82f6;
    line-height: 100%;
  }
  
  .usercp li a p {
    display: inline-block;
    margin-bottom: 0px !important;
    vertical-align: middle;
    height: 50px;
    line-height: 120%;
    border-spacing: 0px;
    padding-top: 5px;
    color: #FFF;
    font-weight: bolder;
    letter-spacing: -1px;
  }
  
  .usercp li a p font {
    display: inline-block;
    margin-bottom: 0px !important;
    font-size: 10px;
    color: #3b82f6
  }
  
  .currencies {
    width: 100%
  }
  
  .currencies li {
    width: 100%;
    height: 40px;
    border-bottom: 1px outset #3b82f6;
    margin-bottom: 10px;
  }
  
  .currencies li img {
    margin-bottom: 5px;
  }
  
  .currencies a {
    float: right;
  }
  
  .currencies span {
    color: aquamarine;
    font-weight: bolder;
    line-height: 100%;
    font-size: 20px;
    padding-left: 5px;
    line-height: 30px;
  }
  
  .buycurrencies {
    width: 110px;
    text-align: center;
    border-radius: 12px;
    background-color: #130600;
      border-top: 1px solid #3a240f;
      border-bottom: 1px solid #3a240f;
    padding: 5px;
    color: #3b82f6;
    font-size: 13px;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
  }
  
  .buycurrencies:hover {
    color: #3b82f6;
    background-color: #561f1f;
  }
  
  .buycurrencies--true {
    background-color: #561f1f;
    color: #3b82f6;
  }
  
  .buycurrencies--true:hover {
    background-color: #130600;
      border-top: 1px solid #3a240f;
      border-bottom: 1px solid #3a240f;
    color: #561f1f;
  }
  
  
  /* Estilo base page-title removido - cada módulo define su propio estilo específico */
  
  
  .killerhomefix1 {
    margin-left: 16px !important;
  }
  
  .killerhomefix2 {
    margin-left: 10px !important;
  }
  
  .killerhomefix3 {
    margin-left: 10px !important;
  }
  
  .killerhomefix4 {
    margin-left: 10px !important;
  }
  
  .killerhomefix5 {
    margin-left: 10px !important;
  }
  
  @media only screen and (max-width: 768px) {
  
    /* For mobile phones: */
    .col-3 {
      width: 100%;
      max-width: 100%;
      min-width: 100%;
      flex: 0 0 100%;
    }
  
    .card-info-character {
      width: calc(100% - 20px) !important;
      max-width: 350px !important;
      min-width: 280px !important;
      margin: 0 auto 20px auto !important;
      padding: 8px !important;
      flex: 0 0 auto !important;
    }
    
    .card-info-character .top-section {
      height: 160px !important;
    }
    
    .card-info-character .bottom-section .title {
      font-size: 15px !important;
    }
    
    .card-info-character .bottom-section .row .item .big-text {
      font-size: 11px !important;
    }
    
    .card-info-character .bottom-section .row .item .regular-text {
      font-size: 8px !important;
    }
  }
  
  /* Responsive adicional para pantallas muy pequeñas */
  @media only screen and (max-width: 480px) {
    .card-info-character {
      width: calc(100% - 15px) !important;
      max-width: 320px !important;
      min-width: 260px !important;
      margin: 0 auto 15px auto !important;
      padding: 6px !important;
    }
    
    .card-info-character .top-section {
      height: 140px !important;
    }
    
    .card-info-character .bottom-section {
      padding: 8px 3px !important;
    }
    
    .card-info-character .bottom-section .title {
      font-size: 14px !important;
      letter-spacing: 1px !important;
    }
    
    .card-info-character .bottom-section .row .item {
      padding: 3px !important;
    }
    
    .card-info-character .bottom-section .row .item .big-text {
      font-size: 10px !important;
    }
    
    .card-info-character .bottom-section .row .item .regular-text {
      font-size: 7px !important;
    }
  }
  
  /* Responsive específico para módulo myaccount - ACTUALIZADO */
  @media (max-width: 768px) {
    body:has(.collection) .card-info-character {
      width: calc(100% - 10px) !important;
      max-width: 100% !important;
      margin: 0 5px 15px 5px !important;
      padding: 8px !important;
      overflow-x: hidden !important;
      box-sizing: border-box !important;
    }
  }
  
  @media (max-width: 480px) {
    body:has(.collection) .card-info-character {
      width: calc(100% - 10px) !important;
      max-width: calc(100vw - 20px) !important;
      margin: 0 5px 10px 5px !important;
      padding: 6px !important;
      overflow-x: hidden !important;
      box-sizing: border-box !important;
    }
  }
  
  .Char-info-header-table {
    width: 100%
  }
  
  .Char-info-header-table td.character-class span {
    font-size: 12px;
    margin-right: 5px;
    border-radius: 8px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 12px;
    line-height: 1;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(124, 58, 237, 0.9) 100%);
    border: 1px solid rgba(139, 92, 246, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .Char-info-header-table td a {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #f1f5f9;
    text-align: left;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 15px;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  .Char-info-header-table td a:hover {
    color: #60a5fa;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(96, 165, 250, 0.5);
  }
  
  .card-info-character {
    width: 300px;
    margin-left: 30px;
    margin-bottom: 30px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    padding: 0;
    overflow: hidden;
    box-shadow: 
      0 10px 30px rgba(0, 0, 0, 0.4),
      0 0 20px rgba(59, 130, 246, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }
  
  .info-char-small {
    margin: 15px 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 0 15px;
  }
  
  .info-char-small span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.3) 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #e2e8f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.2s ease;
  }
  
  .info-char-small span:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.4) 100%);
    border-color: rgba(59, 130, 246, 0.6);
    transform: translateY(-1px);
  }
  
  .card-info-character:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(59, 130, 246, 0.4);
  }
  
  .card-info-character .top-section {
    height: 180px;
    border-radius: 14px 14px 0 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.6) 100%);
    border-bottom: 2px solid rgba(59, 130, 246, 0.3);
    position: relative;
    overflow: hidden;
  }
  
  .card-info-character .top-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 50%, rgba(96, 165, 250, 0.05) 100%);
    pointer-events: none;
  }
  
  .card-info-character .top-section .border {
    display: none;
  }
  
  .card-info-character .top-section .icons {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    display: inline-block;
    justify-content: space-between;
  }
  
  .card-info-character .top-section .icons .logo {
    height: 100%;
    padding: 7px 0 7px 15px;
  }
  
  .card-info-character .top-section .icons .logo .top-section {
    height: 100%;
  }
  
  .card-info-character .top-section .icons .social-media {
    height: 100%;
    padding: 8px 15px;
    display: flex;
    gap: 7px;
  }
  
  .card-info-character .top-section .icons .social-media .svg {
    height: 100%;
    fill: #130600;
  }
  
  .card-info-character .top-section .icons .social-media .svg:hover {
    fill: #3b82f6;
  }
  
  .card-info-character .bottom-section {
    margin-top: 0;
    padding: 15px 12px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 41, 59, 0.4) 100%);
    border-radius: 0 0 14px 14px;
  }
  
  .card-info-character .bottom-section .title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #60a5fa;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
  }
  
  .card-info-character .bottom-section .row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
  }
  
  .card-info-character .bottom-section .row .item {
    flex: 1;
    text-align: center;
    padding: 6px 4px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.2s ease;
    min-height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .card-info-character .bottom-section .row .item:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
  }
  
  .card-info-character .bottom-section .row .item .big-text {
    font-size: 10px;
    font-weight: 600;
    display: block;
    color: #e2e8f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    margin-bottom: 2px;
    line-height: 1.1;
  }
  
  .card-info-character .bottom-section .row .item .regular-text {
    font-size: 7px;
    color: #94a3b8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    line-height: 1;
  }

  /* Progress bars modernas para las tarjetas de personajes */
  .card-info-character .progress {
    height: 6px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 6px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  }

  .card-info-character .progress-bar {
    height: 100%;
    border-radius: 5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .card-info-character .progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    animation: shimmer 2s infinite;
  }

  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  .card-info-character .progress-bar-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
  }

  .card-info-character .progress-bar-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
  }

  .card-info-character .progress-bar-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
  }

  .card-info-character .progress-bar-info {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
  }

  
  .ranking-button-main {
    width: 230px;
    border-radius: 20px;
    background: #130600;
      border-top: 1px solid #3a240f;
      border-bottom: 1px solid #3a240f;
    padding: 5px;
    overflow: hidden;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 20px 0px;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
  }
  
  .ranking-button-main:hover {
    transform: scale(1.05);
  }
  
  .ranking-button-main .top-section {
    height: 80px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(45deg, rgb(4, 159, 187) 0%, rgb(80, 246, 255) 100%);
    position: relative;
  }
  
  
  
  
  
  
  
  
  
  
  
  .ranking-button-main .top-section .icons .logo .top-section {
    height: 100%;
  }
  
  .ranking-button-main .top-section .icons .social-media {
    height: 100%;
    padding: 8px 15px;
    display: flex;
    gap: 7px;
  }
  
  .ranking-button-main .top-section .icons .social-media .svg {
    height: 100%;
    fill: #130600;
  }
  
  .ranking-button-main .top-section .icons .social-media .svg:hover {
    fill: #3b82f6;
  }
  
  .ranking-button-main .bottom-section {
    margin-top: 15px;
    padding: 10px 5px;
  }
  
  .ranking-button-main .bottom-section .title {
    display: block;
    font-size: 17px;
    font-weight: bolder;
    color: #3b82f6;
    text-align: center;
    letter-spacing: 2px;
  }
  
  .ranking-button-main .bottom-section .row {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  
  .ranking-button-main .bottom-section .row .item {
    flex: 30%;
    text-align: center;
    padding: 5px;
    color: rgba(170, 222, 243, 0.721);
  }
  
  .ranking-button-main .bottom-section .row .item .big-text {
    font-size: 12px;
    display: block;
  }
  
  .ranking-button-main .bottom-section .row .item .regular-text {
    font-size: 9px;
  }
  
  .ranking-button-main .bottom-section .row .item:nth-child(2) {
    border-left: 1px solid rgba(255, 255, 255, 0.126);
    border-right: 1px solid rgba(255, 255, 255, 0.126);
  }
  
  .rankings-class-filter {
    display: inline-block;
    list-style-type: none;
    margin: 20px auto;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -khtml-border-radius: 10px;
    font-family: var(--tg-heading-font-family);
  
  }
  
  .rankings-class-filter li {
    display: inline-block;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin-bottom: 10px;
    margin-right: 25px;
  }
  
  .rankings-class-filter li a {
    text-decoration: none;
    color: #FFF;
  }
  
  .rankings-class-filter-selection {
    display: inline-block;
    width: 75px;
    text-align: center;
    color: #f1f5f9;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .rankings-class-filter-selection:hover {
    color: #60a5fa !important;
    transform: translateY(-2px);
  }
  
  .rankings-class-filter-selection:hover img {
    -webkit-filter: brightness(120%);
    filter: brightness(120%);
  }
  
  .rankings-class-filter-selection img {
    width: 62px;
    height: auto;
    border-radius: 50%;
    margin-bottom: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    filter: grayscale(100%) brightness(0.8);
    position: relative;
    z-index: 2;
  }

  .rankings-class-filter-selection span {
    display: block;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    width: 98px;
    height: 108px;
    position: relative;
    transition: all 0.3s ease;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .rankings-class-filter-selection span:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(96, 165, 250, 0.15) 100%);
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 30px rgba(59, 130, 246, 0.2);
  }
  
  .pagination>li {
    display: inline;
    margin-right: 15px;
  }
  
  .pagination>li>a,
  .pagination>li>span {
    margin-right: 15px;
    position: relative;
    float: left;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background-color: #130600;
      border-top: 1px solid #3a240f;
      border-bottom: 1px solid #3a240f;
    font-size: 14px;
    color: #3b82f6;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
  
  }
  
  .pagination>li>a:hover,
  .pagination>li>span:hover,
  .pagination>li>a:focus,
  .pagination>li>span:focus {
    z-index: 2;
    color: #23527c;
    background-color: #3b82f6;
    border-color: #3b82f6;
  }
  
  .pagination>li:first-child>a,
  .pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  
  .pagination>li:last-child>a,
  .pagination>li:last-child>span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  .pagination>.active>a,
  .pagination>.active>span,
  .pagination>.active>a:hover,
  .pagination>.active>span:hover,
  .pagination>.active>a:focus,
  .pagination>.active>span:focus {
    z-index: 3;
    color: #3b82f6;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
  }
  
  .pagination>.disabled>span,
  .pagination>.disabled>span:hover,
  .pagination>.disabled>span:focus,
  .pagination>.disabled>a,
  .pagination>.disabled>a:hover,
  .pagination>.disabled>a:focus {
    color: #777777;
    cursor: not-allowed;
    background-color: #130600;
      border-top: 1px solid #3a240f;
      border-bottom: 1px solid #3a240f;
    border-color: #3b82f6;
  }
  
  .pagination-lg>li>a,
  .pagination-lg>li>span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
  }
  
  .pagination-lg>li:first-child>a,
  .pagination-lg>li:first-child>span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  
  .pagination-lg>li:last-child>a,
  .pagination-lg>li:last-child>span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  
  .pagination-sm>li>a,
  .pagination-sm>li>span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
  }
  
  .pagination-sm>li:first-child>a,
  .pagination-sm>li:first-child>span {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  
  .pagination-sm>li:last-child>a,
  .pagination-sm>li:last-child>span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  
  .progreso-quest {
    width: 25%;
  }
  
  .progreso-quest .progress {
    width: 100% !important;
    height: 20px;
    margin-top: 15px;
  }
  
  table.table-migration {
    margin-bottom: 50px;
    width: 100%;
  }
  
  table.rakings-deidad-customs {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.92) 100%);
  }

  table.rakings-deidad-customs td .medal {
    width: 30px;
  }

  table.rakings-deidad-customs td a {
    color: #60a5fa;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  table.rakings-deidad-customs td a:hover {
    color: #93c5fd;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
  }

  table.rakings-deidad-customs th,
  table.rakings-deidad-customs td {
    padding: 15px 20px;
    background: transparent;
    border: none;
    color: #e2e8f0;
  }

  table.rakings-deidad-customs th {
    text-align: left;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(96, 165, 250, 0.1) 100%);
    border-bottom: 2px solid rgba(59, 130, 246, 0.3);
    color: #f1f5f9;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
  }

  table.rakings-deidad-customs thead th:first-child {
    border-top-left-radius: 16px;
  }

  table.rakings-deidad-customs thead th:last-child {
    border-top-right-radius: 16px;
  }

  table.rakings-deidad-customs tbody tr {
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.3s ease;
  }

  table.rakings-deidad-customs tbody tr:hover {
    background: rgba(59, 130, 246, 0.08);
    transform: scale(1.01);
  }

  table.rakings-deidad-customs tbody tr:last-child td:first-child {
    border-bottom-left-radius: 16px;
  }

  table.rakings-deidad-customs tbody tr:last-child td:last-child {
    border-bottom-right-radius: 16px;
  }
  
  .nft {
    user-select: none;
    max-width: 300px;
    margin: 5rem 5rem 0 0;
    border: 1px solid #3b82f622;
    background-color: #282c34;
    background: linear-gradient(0deg, #282c34 0%, rgba(17, 0, 32, 0.5) 100%);
    box-shadow: 0 7px 20px 5px #00000088;
    border-radius: 0.7rem;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    overflow: hidden;
    transition: 0.5s all;
    float: left;
    margin-left: 30px;
  }
  
  
  .nft table {
    user-select: none;
    border: 1px solid #3b82f622;
    background-color: #282c34;
    background: linear-gradient(0deg, #282c34 0%, rgba(17, 0, 32, 0.5) 100%);
    box-shadow: 0 7px 20px 5px #00000088;
    border-radius: 0.7rem;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    overflow: hidden;
    transition: 0.5s all;
  }
  
  
  .nft table td {
    color: #3b82f6
  }
  
  .nft hr {
    width: 100%;
    border: none;
    border-bottom: 1px solid #3b82f655;
    margin-top: 0;
  }
  
  .nft ins {
    text-decoration: none;
  }
  
  .nft .main {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem;
  }
  
  .nft .main h2 {
    font-size: 20px;
    color: #3b82f6;
  }
  
  .nft .main .tokenImage {
    border-radius: 0.5rem;
    max-width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .nft .main .description {
    margin: 0.5rem 0;
    color: #a89ec9;
  }
  
  .nft .main .tokenInfo {
    justify-content: space-between;
    align-items: center;
  }
  
  .nft .main .tokenInfo .price {
    align-items: center;
    color: #ee83e5;
    font-weight: 700;
    font-size: 30px !important;
  }
  
  .nft .main .tokenInfo .price p {
    font-size: 26px !important;
    font-weight: bold;
  }
  
  .nft .main .tokenInfo .price ins {
    margin-left: -0.3rem;
    margin-right: 0.5rem;
  }
  
  .nft .main .tokenInfo .duration {
    display: flex;
    align-items: center;
    color: #a89ec9;
    margin-right: 0.2rem;
  }
  
  .nft .main .tokenInfo .duration ins {
    margin: 0.5rem;
    margin-bottom: 0.4rem;
  }
  
  .nft .main .creator {
    align-items: center;
    margin-top: 0.2rem;
    margin-bottom: 50px;
    ;
  }
  
  .nft .main .creator ins {
    color: #a89ec9;
    text-decoration: none;
  }
  
  .nft .main .creator .wrapper {
    align-items: center;
    border: 1px solid #3b82f622;
    padding: 0.3rem;
    margin: 0;
    margin-right: 0.5rem;
    border-radius: 100%;
    box-shadow: inset 0 0 0 4px #000000aa;
  }
  
  .nft .main .creator .wrapper img {
    border-radius: 100%;
    border: 1px solid #3b82f622;
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    margin: 0;
  }
  
  .nft ::before {
    position: fixed;
    content: "";
    box-shadow: 0 0 100px 40px #3b82f608;
    top: -10%;
    left: -100%;
    transform: rotate(-45deg);
    height: 60rem;
    transition: 0.7s all;
  }
  
  .nft:hover {
    border: 1px solid #3b82f644;
    box-shadow: 0 7px 50px 10px #000000aa;
    transform: scale(1.015);
    filter: brightness(1.3);
  }
  
  .nft:hover ::before {
    filter: brightness(0.5);
    top: -100%;
    left: 200%;
  }
  
  .bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .bg h1 {
    font-size: 20rem;
    filter: opacity(0.5);
  }
  
  .manualpayment table {
    width: 50%;
    color: #3b82f6;
  }
  
  .manualpayment h2,
  .manualpayment h3 {
    color: #3b82f6;
  }
  
  .imgfixcharacters img {
    width: 40px;
  }
  
  .migration-btn {
    width: auto;
    min-width: 140px;
    height: 50px;
    border-radius: 12px;
    background-color: #561f1f;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #3b82f6;
    font-size: 14px;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 0 20px;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  
  .migration-btn-completed {
    width: auto;
    min-width: 140px;
    height: 50px;
    border-radius: 12px;
    background-color: cadetblue;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #3b82f6;
    font-size: 14px;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 0 20px;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  
  .migration-btn-disabled {
    width: auto;
    min-width: 140px;
    height: 50px;
    border-radius: 12px;
    background-color: #561f1f;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #3b82f6;
    font-size: 14px;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 0 20px;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    filter: grayscale(1);
  }
  
  
  .donation-btn {
    width: auto;
    min-width: 140px;
    height: 50px;
    border-radius: 12px;
    background-color: #130600;
      border-top: 1px solid #3a240f;
      border-bottom: 1px solid #3a240f;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #3b82f6;
    font-size: 14px;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 0 20px;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  
  .downloadBlock-content {
    padding-top: 40px;
    padding-bottom: 20px
  }
  
  .downloadBlock {
    background-size: cover;
    max-width: 560px;
    width: 100%;
    padding: 40px 30px 55px;
    margin: 0 auto;
    margin-bottom: 30px;
    text-decoration: none
  }
  
  .downloadBlock-title {
    display: block;
    color: #3b82f6;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 35px
  }
  
  .downloadBlock-title span {
    color: #3b82f6
  }
  
  .downloadBlock-text {
    color: #3b82f6;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 35px
  }
  
  .downloadBlock-button {
    text-align: center
  }
  
  .d-button {
    display: block;
    width: 155px;
    height: 105px;
    text-align: center;
    padding-top: 78px;
    font-size: 13px;
    font-weight: 600
  }
  
  .d-button.googleButton {
    background: url(../img/google-img.png) center top 20px no-repeat;
    background-color: #453b90;
    color: #3b82f6
  }
  
  .d-button.googledriveButton {
    background: url(../img/google-img.png) center top 20px no-repeat;
    background-color: #453b90;
    color: #3b82f6
  }
  
  .d-button.dropboxButton {
    background: url(../img/dropbox-img.png) center top 20px no-repeat;
    background-color: #1a0a00;
    color: #696868
  }
  
  .d-button.megaButton {
    background: url(../img/mega-img.png) center top 20px no-repeat;
    background-color: #1a0a00;
    color: #3b82f6
  }
  
  .d-button.media-fireButton {
    background: url(../img/media-fire.png) center top 20px no-repeat;
    background-color: #1a0a00;
    color: #3b82f6
  }
  
  .d-button:hover {
    transform: scale(1.1);
    color: #3b82f6
  }
  
  .drivers {
    margin-bottom: 80px
  }
  
  .drivers span {
    display: block;
    text-align: center;
    color: #3b82f6;
    font-size: 15px;
    margin-bottom: 20px
  }
  
  .mirror-title {
    color: #3b82f6;
    font-size: 15px;
    font-weight: 600;
    display: block;
    text-align: center;
    margin-bottom: 60px
  }
  
  .mirrorBlock {
    text-align: center;
    margin-bottom: 65px
  }
  
  .mirrorBlock p {
    color: #3b82f6;
    font-weight: 600;
    margin-bottom: 20px
  }
  
  .mirrorBlock p span {
    color: #a97fff
  }
  
  /* ===== RESPONSIVE DESIGN PARA HOME - ESQUEMA AZUL ===== */
  
  @media only screen and (max-width: 768px) {
    .home__content .headlogo {
      width: 320px;
      filter: drop-shadow(0 6px 12px rgba(59, 130, 246, 0.4));
    }

    .home__content .headlogo:hover {
      filter: drop-shadow(0 8px 16px rgba(59, 130, 246, 0.6));
      transform: scale(1.01);
    }
  
    .video-container video {
      display: none;
    }
  
    .video-container {
      height: 420px;
    }
  
    .video-container .caption {
      z-index: 1;
      position: relative;
      text-align: center;
      color: #f1f5f9;
      padding: 15px;
      vertical-align: middle;
      margin-top: 0px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(59, 130, 246, 0.4);
    }

    .home__btn2 {
      min-width: 140px;
      height: 48px;
      font-size: 14px;
      padding: 0 20px;
      margin-right: 15px;
      margin-bottom: 10px;
    }

    .online-header h4 {
      font-size: 2rem;
    }

    .online-header2 h4 {
      font-size: 1.2rem;
    }

    .main__link2 {
      font-size: 20px;
      margin-left: 15px;
    }

    .h2-title {
      font-size: 1.8rem;
      padding: 25px;
    }

    .vs-sidebox.bg-major-black {
      padding: 15px !important;
      margin-bottom: 20px !important;
      border-radius: 12px !important;
    }

    .vs-sidebox.bg-major-black .sidebox-title,
    .vs-sidebox.bg-major-black h5.sidebox-title {
      font-size: 16px !important;
      padding-bottom: 12px !important;
    }
  
    .home {
      background: url(../img/body-bg-mobile.png) no-repeat bottom center / cover;
    }
  }

  /* Responsive para pantallas muy pequeñas */
  @media only screen and (max-width: 480px) {
    .home__content .headlogo {
      width: 280px;
    }

    .video-container {
      height: 350px;
    }

    .video-container .caption {
      padding: 12px;
      margin-top: -10px;
    }

    .home__btn2 {
      min-width: 120px;
      height: 44px;
      font-size: 13px;
      padding: 0 16px;
      margin-right: 10px;
      margin-bottom: 8px;
    }

    .online-header h4 {
      font-size: 1.6rem;
    }

    .online-header span {
      font-size: 0.75rem;
    }

    .online-header2 h4 {
      font-size: 1rem;
    }

    .online-header2 span {
      font-size: 0.7rem;
    }

    .main__link2 {
      font-size: 18px;
      margin-left: 10px;
    }

    .h2-title {
      font-size: 1.5rem;
      padding: 20px;
    }

    .vs-sidebox.bg-major-black {
      padding: 12px !important;
      margin-bottom: 15px !important;
    }

    .vs-sidebox.bg-major-black .sidebox-title,
    .vs-sidebox.bg-major-black h5.sidebox-title {
      font-size: 15px !important;
      padding-bottom: 10px !important;
      letter-spacing: 0.5px !important;
    }

    .vs-sidebox.bg-major-black .sidebox-title::after,
    .vs-sidebox.bg-major-black h5.sidebox-title::after {
      width: 60px !important;
    }
  }
  
  
  /* ===== TARJETAS DE LA HOME REDISEÑADAS - ESQUEMA AZUL MODERNO ===== */
  
  /* Tarjetas principales de la home - Diseño azul moderno premium */
  .vs-sidebox.bg-major-black {
      background: linear-gradient(135deg, 
          rgba(10, 15, 25, 0.95) 0%, 
          rgba(17, 24, 39, 0.92) 50%, 
          rgba(30, 41, 59, 0.90) 100%) !important;
      border: 2px solid rgba(59, 130, 246, 0.3) !important;
      border-radius: 16px !important;
      padding: 20px !important;
      margin-bottom: 25px !important;
      position: relative !important;
      overflow: hidden !important;
      box-shadow: 
          0 12px 30px rgba(0, 0, 0, 0.5),
          0 0 20px rgba(59, 130, 246, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      transition: all 0.3s ease !important;
      transform: translateZ(0) !important;
  }
  
  /* Efecto de brillo azul sutil en el fondo */
  .vs-sidebox.bg-major-black::before {
      content: '' !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      background: 
          radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
          radial-gradient(circle at 80% 20%, rgba(96, 165, 250, 0.06) 0%, transparent 50%) !important;
      pointer-events: none !important;
      z-index: 1 !important;
  }
  
  /* Efecto hover azul moderno */
  .vs-sidebox.bg-major-black:hover {
      border-color: rgba(59, 130, 246, 0.6) !important;
      transform: translateY(-3px) scale(1.02) !important;
      box-shadow: 
          0 16px 40px rgba(0, 0, 0, 0.6),
          0 0 25px rgba(59, 130, 246, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }
  
  /* Títulos de las tarjetas - Esquema azul moderno */
  .vs-sidebox.bg-major-black .sidebox-title,
  .vs-sidebox.bg-major-black h5.sidebox-title {
      color: #f1f5f9 !important;
      font-weight: 700 !important;
      font-size: 18px !important;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 15px rgba(59, 130, 246, 0.3) !important;
      margin-bottom: 20px !important;
      padding-bottom: 15px !important;
      border-bottom: 2px solid rgba(59, 130, 246, 0.4) !important;
      position: relative !important;
      z-index: 2 !important;
      text-transform: uppercase !important;
      letter-spacing: 1px !important;
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif !important;
  }
  
  /* Línea decorativa azul en los títulos */
  .vs-sidebox.bg-major-black .sidebox-title::after,
  .vs-sidebox.bg-major-black h5.sidebox-title::after {
      content: '' !important;
      position: absolute !important;
      bottom: -2px !important;
      left: 0 !important;
      width: 80px !important;
      height: 3px !important;
      background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd) !important;
      border-radius: 2px !important;
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.4) !important;
  }
  
  /* Contenido de las tarjetas */
  .vs-sidebox.bg-major-black .media-body {
      position: relative !important;
      z-index: 2 !important;
  }
  
  /* vs-events SIN degradé - solo posición */
  .vs-sidebox.bg-major-black .vs-events {
      position: relative !important;
      z-index: 2 !important;
  }
  
  /* Tablas dentro de las tarjetas */
  .vs-sidebox.bg-major-black .castlesiege-deidad {
      background: rgba(0, 0, 0, 0.3) !important;
      border-radius: 8px !important;
      overflow: hidden !important;
  }
  
  .vs-sidebox.bg-major-black .castlesiege-deidad td {
      color: #e2e8f0 !important;
      font-weight: 500 !important;
      padding: 10px 15px !important;
      border: none !important;
  }
  
  .vs-sidebox.bg-major-black .castlesiege-deidad .text-white {
      color: #93c5fd !important;
      font-weight: 600 !important;
      text-shadow: 0 0 8px rgba(59, 130, 246, 0.4) !important;
  }
  
  /* Separadores horizontales azules */
  .vs-sidebox.bg-major-black hr {
      border: none !important;
      height: 2px !important;
      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent) !important;
      margin: 20px 0 !important;
      border-radius: 1px !important;
      box-shadow: 0 0 6px rgba(59, 130, 246, 0.3) !important;
  }
  
  /* Enlaces y botones azules dentro de las tarjetas */
  .vs-sidebox.bg-major-black a.label {
      background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
      color: #f8fafc !important;
      font-weight: 600 !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
      border-radius: 8px !important;
      padding: 8px 16px !important;
      transition: all 0.3s ease !important;
      text-decoration: none !important;
      border: 1px solid rgba(59, 130, 246, 0.3) !important;
      box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3) !important;
  }
  
  .vs-sidebox.bg-major-black a.label:hover {
      background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5) !important;
      border-color: rgba(96, 165, 250, 0.6) !important;
  }
  
  /* Imágenes dentro de las tarjetas */
  .vs-sidebox.bg-major-black img {
      border-radius: 6px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
      transition: transform 0.3s ease !important;
  }
  
  .vs-sidebox.bg-major-black:hover img {
      transform: scale(1.05) !important;
  }
  
  /* Videos dentro de las tarjetas */
  .vs-sidebox.bg-major-black video {
      border-radius: 6px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  }
  
  /* Texto descriptivo azul */
  .vs-sidebox.bg-major-black .text-white-50 {
      color: rgba(226, 232, 240, 0.85) !important;
      font-weight: 500 !important;
      line-height: 1.6 !important;
  }
  
  /* Widget de redes sociales con esquema azul */
  .vs-sidebox .widget-redes {
      background: linear-gradient(135deg, rgba(10, 15, 25, 0.9), rgba(17, 24, 39, 0.95)) !important;
      border: 2px solid rgba(59, 130, 246, 0.4) !important;
      border-radius: 12px !important;
      padding: 15px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      margin-bottom: 20px !important;
      transition: all 0.3s ease !important;
      backdrop-filter: blur(5px) !important;
      -webkit-backdrop-filter: blur(5px) !important;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(59, 130, 246, 0.1) !important;
  }

  .vs-sidebox .widget-redes:hover {
      border-color: rgba(59, 130, 246, 0.6) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(59, 130, 246, 0.15) !important;
  }

  /* ===== MEJORAS ADICIONALES PARA LA HOME AZUL ===== */
  
  /* Asegurar que todos los textos principales tengan el esquema azul */
  body .home-content,
  body .main-content {
      color: #e2e8f0;
  }

  body .home-content h1,
  body .home-content h2,
  body .home-content h3,
  body .main-content h1,
  body .main-content h2,
  body .main-content h3 {
      color: #f1f5f9 !important;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 12px rgba(59, 130, 246, 0.3) !important;
  }

  body .home-content a,
  body .main-content a {
      color: #93c5fd !important;
      transition: all 0.3s ease !important;
  }

  body .home-content a:hover,
  body .main-content a:hover {
      color: #f1f5f9 !important;
      text-shadow: 0 0 8px rgba(59, 130, 246, 0.6) !important;
  }
  
  /* Mantener el estilo original para widget-container-redes */
  .widget-container-redes .widget-redes {
      position: relative !important;
      margin-bottom: 10px !important;
      z-index: 1 !important;
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
  }
  
  /* Efectos hover solo para widgets del sidebar */
  .vs-sidebox .widget-redes:hover {
      border-color: rgba(59, 130, 246, 0.6) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3) !important;
  }
  
  .vs-sidebox .widget-redes a {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      text-decoration: none !important;
      color: #3b82f6 !important;
      font-weight: 700 !important;
      font-size: 16px !important;
      transition: color 0.3s ease !important;
  }
  
  .vs-sidebox .widget-redes:hover a {
      color: #60a5fa !important;
  }
  
  .vs-sidebox .widget-redes img {
      width: 36px !important;
      height: 36px !important;
      filter: brightness(1.2) drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
      transition: transform 0.3s ease !important;
  }
  
  .vs-sidebox .widget-redes:hover img {
      transform: scale(1.1) !important;
  }
  
  /* Mantener estilos originales para widget-container-redes */
  .widget-container-redes .widget-redes img {
      width: 270px !important;
      height: auto !important;
      border-radius: 5px !important;
      filter: none !important;
      transition: none !important;
  }
  
  /* ===== RANKINGS DENTRO DE LAS TARJETAS MEJORADOS ===== */
  
  /* Contenedor principal del ranking COMPACTO */
  .vs-sidebox.bg-major-black .ranking-1 {
      background: rgba(0, 0, 0, 0.2) !important;
      border: 1px solid rgba(177, 119, 20, 0.15) !important;
      border-radius: 8px !important;
      padding: 10px !important;
      backdrop-filter: blur(2px) !important;
      -webkit-backdrop-filter: blur(2px) !important;
      position: relative !important;
      overflow: visible !important;
  }
  
  /* Contenedor principal más compacto */
  .vs-sidebox.bg-major-black .ranking {
      padding: 8px 8px 4px 8px !important; /* Padding inferior reducido */
  }
  
  /* Filas del ranking EXTRA COMPACTAS */
  .vs-sidebox.bg-major-black .row-ranking {
      background: linear-gradient(135deg, rgba(26, 12, 0, 0.6), rgba(19, 6, 0, 0.8)) !important;
      border: 1px solid rgba(177, 119, 20, 0.15) !important;
      border-radius: 6px !important; /* Bordes más pequeños */
      margin-bottom: 4px !important; /* Reducido de 8px a 4px */
      transition: all 0.3s ease !important;
      position: relative !important;
      overflow: hidden !important;
      min-height: 32px !important; /* Altura mínima controlada */
  }
  
  .vs-sidebox.bg-major-black .row-ranking:hover {
      border-color: rgba(59, 130, 246, 0.4) !important;
      transform: translateX(3px) !important;
      box-shadow: 
          0 4px 15px rgba(0, 0, 0, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }
  
  /* Celdas del ranking EXTRA COMPACTAS */
  .vs-sidebox.bg-major-black .cell-ranking {
      padding: 4px 8px !important; /* Reducido de 8px a 4px verticalmente */
      border: none !important;
      color: #fff3d1 !important;
      font-weight: 500 !important;
      transition: color 0.3s ease !important;
      position: relative !important;
      overflow: visible !important;
      font-size: 13px !important; /* Fuente ligeramente más pequeña */
  }
  
  /* Asegurar que los iconos de clase se vean - ESQUEMA AZUL */
  .vs-sidebox.bg-major-black .cell-ranking img.rankings-class-tophome,
  .vs-sidebox.bg-major-black .cell-ranking img.rankings-class-tophome1,
  .vs-sidebox.bg-major-black .cell-ranking img.rankings-class-tophome2,
  .vs-sidebox.bg-major-black .cell-ranking img.rankings-class-tophome3,
  .vs-sidebox.bg-major-black .cell-ranking img.rankings-class-tophome4,
  .vs-sidebox.bg-major-black .cell-ranking img.rankings-class-tophome5 {
      display: inline-block !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 10 !important;
      border: 1px solid rgba(59, 130, 246, 0.3) !important;
      border-radius: 3px !important;
      background: rgba(2, 6, 23, 0.5) !important;
  }
  
  /* Primera celda (posición) - ESQUEMA AZUL */
  .vs-sidebox.bg-major-black .cell-ranking:nth-child(1) {
      background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
      border-radius: 8px 0 0 8px !important;
      min-width: 50px !important;
      text-align: center !important;
      flex: 0 0 50px !important;
  }
  
  /* Segunda celda (nombre del jugador) */
  .vs-sidebox.bg-major-black .cell-ranking:nth-child(2) {
      flex: 2 !important;
      font-weight: 600 !important;
  }
  
  .vs-sidebox.bg-major-black .cell-ranking:nth-child(2) a {
      color: #60a5fa !important;
      text-decoration: none !important;
      font-weight: 600 !important;
      transition: color 0.3s ease !important;
  }
  
  .vs-sidebox.bg-major-black .cell-ranking:nth-child(2) a:hover {
      color: #93c5fd !important;
  }
  
  /* Tercera celda (puntos/score) - ESQUEMA AZUL */
  .vs-sidebox.bg-major-black .cell-ranking:nth-child(3) {
      text-align: center !important;
      color: #e2e8f0 !important;
  }
  
  .vs-sidebox.bg-major-black .cell-ranking:nth-child(3) span {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.1)) !important;
      padding: 2px 8px !important; /* Reducido padding */
      border-radius: 10px !important; /* Bordes más pequeños */
      border: 1px solid rgba(59, 130, 246, 0.3) !important;
      font-size: 12px !important; /* Fuente más pequeña */
      font-weight: 600 !important;
      color: #60a5fa !important;
  }
  
  /* Cuarta celda (guild) */
  .vs-sidebox.bg-major-black .cell-ranking:nth-child(4) {
      text-align: center !important;
      flex: 0 0 60px !important;
  }
  
  /* ===== PAGINACIÓN RANKINGS HOME - ARREGLADA ===== */
  
  /* Contenedor del paginador - sin espacio innecesario - ESQUEMA AZUL */
  .vs-sidebox.bg-major-black .pagination-container {
      margin: 8px 0 0 0 !important; /* Eliminado margen inferior */
      padding: 8px 15px 8px 15px !important; /* Padding más compacto */
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      border-top: 1px solid rgba(59, 130, 246, 0.2) !important;
      background: rgba(2, 6, 23, 0.2) !important;
      border-radius: 0 0 12px 12px !important;
  }
  
  /* Tabla del paginador */
  .vs-sidebox.bg-major-black .pagination {
      margin: 0 !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      background: transparent !important;
  }
  /* Fila del paginador */
  .vs-sidebox.bg-major-black .pagination tr {
      background: transparent !important;
  }
  
  /* Celdas del paginador */
  .vs-sidebox.bg-major-black .pagination td {
      padding: 0 2px !important;
      border: none !important;
      background: transparent !important;
  }
  
  /* Botones del paginador */
  .vs-sidebox.bg-major-black .pagination .vs-btn2 {
      background: rgba(19, 6, 0, 0.8) !important;
      border: 1px solid rgba(139, 105, 20, 0.4) !important;
      color: #60a5fa !important;
      padding: 6px 12px !important;
      margin: 0 !important;
      border-radius: 4px !important;
      transition: all 0.3s ease !important;
      text-decoration: none !important;
      font-weight: 500 !important;
      min-width: 40px !important;
      font-size: 11px !important;
      display: inline-block !important;
      text-align: center !important;
  }
  
  .vs-sidebox.bg-major-black .pagination .vs-btn2:hover {
      background: rgba(59, 130, 246, 0.6) !important;
      border-color: #60a5fa !important;
      color: #93c5fd !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3) !important;
  }
  
  /* Texto especial en las tarjetas */
  .vs-sidebox.bg-major-black .widget-player__first-name {
      color: #fff3d1 !important;
      font-weight: 600 !important;
  }
  
  .vs-sidebox.bg-major-black .text-description {
      color: #60a5fa !important;
      font-weight: 600 !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  }
  
  .vs-sidebox.bg-major-black .text-time,
  .vs-sidebox.bg-major-black .text-explain {
      color: rgba(255, 243, 209, 0.9) !important;
      font-weight: 500 !important;
      line-height: 1.4 !important;
  }
  
  /* Responsive para las tarjetas de la home COMPACTO */
  @media (max-width: 768px) {
      .vs-sidebox.bg-major-black {
          padding: 12px !important;
          margin-bottom: 15px !important;
      }
      
      .vs-sidebox.bg-major-black .sidebox-title,
      .vs-sidebox.bg-major-black h5.sidebox-title {
          font-size: 14px !important;
          margin-bottom: 12px !important;
          padding-bottom: 8px !important;
      }
      
      .vs-sidebox.bg-major-black .cell-ranking {
          padding: 3px 6px !important; /* Aún más compacto en móvil */
          font-size: 12px !important; /* Fuente más pequeña en móvil */
      }
      
      .vs-sidebox.bg-major-black .row-ranking {
          margin-bottom: 3px !important; /* Menos espaciado en móvil */
          min-height: 28px !important; /* Altura mínima menor en móvil */
      }
      
      .vs-sidebox.bg-major-black .ranking {
          padding: 6px 6px 3px 6px !important; /* Padding inferior muy reducido en móvil */
      }
      
      .vs-sidebox.bg-major-black .row-ranking:hover {
          transform: none !important;
      }
      
      .vs-sidebox.bg-major-black .ranking-1 {
          padding: 8px !important;
      }
  }
  
  @media (max-width: 480px) {
      .vs-sidebox.bg-major-black {
          padding: 10px !important;
          border-radius: 10px !important;
      }
      
      .vs-sidebox.bg-major-black .ranking-1 {
          padding: 6px !important;
      }
      
      .vs-sidebox.bg-major-black .cell-ranking {
          padding: 2px 4px !important; /* Ultra compacto en móvil pequeño */
          font-size: 11px !important; /* Fuente muy pequeña */
      }
      
      .vs-sidebox.bg-major-black .row-ranking {
          margin-bottom: 2px !important; /* Espaciado mínimo */
          min-height: 24px !important; /* Altura muy pequeña */
      }
      
      .vs-sidebox.bg-major-black .cell-ranking:nth-child(3) span {
          padding: 1px 6px !important; /* Badges muy compactos */
          font-size: 10px !important;
      }
      
      .vs-sidebox.bg-major-black .ranking {
          padding: 4px 4px 2px 4px !important; /* Padding inferior mínimo en móvil pequeño */
      }
      
      .vs-sidebox.bg-major-black .cell-ranking:nth-child(1) {
          min-width: 35px !important;
          flex: 0 0 35px !important;
      }
      
      /* Paginador responsive móvil */
      .vs-sidebox.bg-major-black .pagination-container {
          padding: 6px 10px !important;
          margin: 6px 0 0 0 !important; /* Sin margen inferior en móvil */
      }
      
      .vs-sidebox.bg-major-black .pagination .vs-btn2 {
          padding: 5px 8px !important;
          font-size: 10px !important;
          min-width: 32px !important;
      }
  }
  
  /* ===== TABS DENTRO DE LAS TARJETAS MEJORADOS ===== */
  
  /* Contenedor de tabs mejorado */
  .vs-sidebox.bg-major-black .tab {
      background: linear-gradient(90deg, rgba(26, 12, 0, 0.9), rgba(19, 6, 0, 0.95)) !important;
      border: 1px solid rgba(177, 119, 20, 0.3) !important;
      border-radius: 12px 12px 0 0 !important;
      overflow: hidden !important;
      margin-bottom: 0 !important;
      padding: 0 !important;
      display: flex !important;
  }
  
  /* Botones de tabs mejorados */
  .vs-sidebox.bg-major-black .tab button {
      background: transparent !important;
      border: none !important;
      color: rgba(255, 243, 209, 0.8) !important;
      padding: 12px 20px !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
      flex: 1 !important;
      position: relative !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
  }
  
  .vs-sidebox.bg-major-black .tab button::before {
      content: '' !important;
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      height: 2px !important;
      background: transparent !important;
      transition: background 0.3s ease !important;
  }
  
  .vs-sidebox.bg-major-black .tab button:hover {
      color: #3b82f6 !important;
      background: rgba(177, 119, 20, 0.1) !important;
  }
  
  .vs-sidebox.bg-major-black .tab button:hover::before {
      background: linear-gradient(90deg, transparent, #3b82f6, transparent) !important;
  }
  
  .vs-sidebox.bg-major-black .tab button.active,
  .vs-sidebox.bg-major-black .tab button:focus {
      color: #60a5fa !important;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.1)) !important;
  }
  
  .vs-sidebox.bg-major-black .tab button.active::before {
      background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6) !important;
  }
  
  /* Contenido de tabs */
  .vs-sidebox.bg-major-black .tabcontent {
      background: rgba(0, 0, 0, 0.2) !important;
      border: 1px solid rgba(177, 119, 20, 0.2) !important;
      border-top: none !important;
      border-radius: 0 0 12px 12px !important;
      padding: 15px !important;
      backdrop-filter: blur(3px) !important;
      -webkit-backdrop-filter: blur(3px) !important;
  }
  
  /* Section titles mejorados */
  .vs-sidebox.bg-major-black .section-title2 h2,
  .vs-sidebox.bg-major-black .sec-title2 {
      color: #3b82f6 !important;
      font-weight: 700 !important;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
      margin-bottom: 20px !important;
      text-align: center !important;
      font-size: 18px !important;
      text-transform: uppercase !important;
      letter-spacing: 1px !important;
  }
  
  /* ===== SISTEMA DE LOGROS - MEJORAS TIPOGRÁFICAS ===== */
  
  /* Botón de ayuda al lado derecho */
  .logros-help-button {
      text-align: right !important;
      margin: 0 !important;
  }
  
  .logros-help-button .label {
      background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
      color: #000000 !important;
      font-weight: 600 !important;
      padding: 8px 16px !important;
      border-radius: 20px !important;
      font-size: 13px !important;
      text-decoration: none !important;
      transition: all 0.3s ease !important;
      border: 1px solid rgba(218, 165, 32, 0.3) !important;
      text-shadow: none !important;
  }
  
  .logros-help-button .label:hover {
      background: linear-gradient(135deg, #60a5fa, #93c5fd) !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
  }
  
  /* Mejoras para los boxes de logros */
  .vs-sidebox.bg-major-black .widget-player__first-name {
      color: #FFFFFF !important; /* Blanco limpio en lugar del amarillito feo */
      font-weight: 600 !important;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
      font-size: 1.1rem !important;
  }
  
  /* Descripciones de logros mejoradas */
  .vs-sidebox.bg-major-black .text-explain {
      background: rgba(0, 0, 0, 0.4) !important;
      padding: 12px 15px !important;
      border-radius: 8px !important;
      border-left: 3px solid #60a5fa !important;
      margin: 8px 0 !important;
      color: rgba(255, 243, 209, 0.95) !important; /* Texto claro y legible */
      font-style: italic !important;
      line-height: 1.4 !important;
      font-size: 14px !important;
  }
  
  /* Premios sin recuadro - más limpio */
  .vs-sidebox.bg-major-black .text-description {
      color: #60a5fa !important; /* Azul brillante para premios */
      font-weight: 700 !important;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
      font-size: 1.1rem !important;
      background: transparent !important; /* Sin fondo */
      padding: 8px 15px !important;
      border: none !important; /* Sin borde */
      border-radius: 0 !important; /* Sin bordes redondeados */
  }
  
  /* Tiempo de completado más sutil */
  .vs-sidebox.bg-major-black .text-time {
      color: rgba(184, 134, 11, 0.8) !important; /* Dorado más suave */
      font-weight: 500 !important;
      font-style: italic !important;
      font-size: 13px !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  }
  
  /* Título de logros específico - alineado a la izquierda */
  .vs-video-area .page-title {
      font-size: 1.4rem !important;
      color: #60a5fa !important;
      text-align: left !important; /* Alineado a la izquierda ahora */
      margin: 0 0 20px 0 !important;
      padding: 10px 0 !important; /* Sin padding horizontal */
      text-shadow: 
          0 2px 4px rgba(0, 0, 0, 0.8),
          0 0 15px rgba(184, 134, 11, 0.3) !important;
      position: relative !important;
      z-index: 10 !important;
      font-weight: 600 !important;
      letter-spacing: 0.5px !important;
  }
  
  .vs-video-area .page-title::after {
      content: '' !important;
      position: absolute !important;
      bottom: -8px !important;
      left: 0 !important; /* Alineado a la izquierda */
      transform: none !important; /* Sin transformación */
      width: 100px !important; /* Ligeramente más ancho */
      height: 2px !important;
      background: linear-gradient(90deg, #60a5fa, #3b82f6, transparent) !important; /* Gradiente de izquierda a derecha */
  }
  
  /* Responsive para sistema de logros */
  @media (max-width: 768px) {
      .vs-video-area .page-title {
          font-size: 1.2rem !important;
          margin: 0 0 15px 0 !important;
          padding: 8px 0 !important; /* Mantener sin padding horizontal */
          text-align: center !important; /* Centrado en móvil */
      }
      
      .vs-video-area .page-title::after {
          left: 50% !important; /* Centrado en móvil */
          transform: translateX(-50%) !important;
          background: linear-gradient(90deg, transparent, #60a5fa, transparent) !important;
      }
      
      .logros-help-button {
          text-align: center !important; /* Centrado en móvil */
          margin: 10px 0 0 0 !important;
      }
      
      .logros-help-button .label {
          font-size: 12px !important;
          padding: 6px 12px !important;
      }
      
      .vs-sidebox.bg-major-black .widget-player__first-name {
          font-size: 1rem !important;
      }
      
      .vs-sidebox.bg-major-black .text-description {
          font-size: 1rem !important;
          padding: 6px 12px !important;
      }
  }
  
  @media (max-width: 480px) {
      .vs-video-area .page-title {
          font-size: 1rem !important;
          margin: 0 0 12px 0 !important;
          padding: 6px 0 !important; /* Sin padding horizontal */
          letter-spacing: 0.3px !important;
          text-align: center !important; /* Centrado en móvil pequeño */
      }
      
      .logros-help-button {
          text-align: center !important; /* Centrado en móvil pequeño */
          margin: 8px 0 15px 0 !important;
      }
      
      .vs-sidebox.bg-major-black .text-explain {
          padding: 10px 12px !important;
          font-size: 13px !important;
      }
      
      .vs-sidebox.bg-major-black .text-time {
          font-size: 12px !important;
      }
  }
  
  /* Mejoras para avatares/imágenes de clases */
  .vs-sidebox.bg-major-black .ClassAvatar1,
  .vs-sidebox.bg-major-black .ClassAvatar2,
  .vs-sidebox.bg-major-black .ClassAvatar3,
  .vs-sidebox.bg-major-black .ClassAvatar4,
  .vs-sidebox.bg-major-black .ClassAvatar5 {
      border: 2px solid rgba(59, 130, 246, 0.4) !important;
      border-radius: 50% !important;
      transition: all 0.3s ease !important;
  }
  
  .vs-sidebox.bg-major-black .ClassAvatar1:hover,
  .vs-sidebox.bg-major-black .ClassAvatar2:hover,
  .vs-sidebox.bg-major-black .ClassAvatar3:hover,
  .vs-sidebox.bg-major-black .ClassAvatar4:hover,
  .vs-sidebox.bg-major-black .ClassAvatar5:hover {
      border-color: #60a5fa !important;
      transform: scale(1.1) !important;
      box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) !important;
  }
  
  /* Efectos para badges y labels especiales */
  .vs-sidebox.bg-major-black .badge {
      background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
      color: #000000 !important;
      font-weight: 600 !important;
      border-radius: 6px !important;
      padding: 4px 8px !important;
      border: none !important;
  }
  
  .vs-sidebox.bg-major-black .badge.bg-error {
      background: linear-gradient(135deg, #dc3545, #e74c3c) !important;
      color: #ffffff !important;
  }
  
  /* Sin animación - tarjetas estáticas */
  
  /* ===== HEADER BOSS KILLS SIDEBAR ===== */
  
  /* Boss Kills ahora usa el estilo page-title estándar */
  
  .ranking-button-main .top-section .icons .logo .top-section {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 6px 12px;
      color: #3b82f6;
      font-weight: bolder;
      text-shadow: 1px 1px 2px #000000, 0 0 5px #3a240f;
      background-color: transparent;
      text-align: center;
  }
  
  .ranking-button-main .top-section .icons .logo {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 6px 12px;
      color: #3b82f6;
      font-weight: bolder;
      text-shadow: 1px 1px 2px #000000, 0 0 5px #3a240f;
      background-color: transparent;
      text-align: center;
  }
  
  /* ===========================================
     MEJORAS PARA EL FORMULARIO DE REGISTRO
     =========================================== */
  
  /* Prevenir scroll horizontal cuando el formulario está activo */
  body:has(.sign) {
    overflow-x: hidden;
  }
  
  /* Fallback para navegadores que no soportan :has() */
  @supports not selector(:has(*)) {
    body {
      overflow-x: hidden;
    }
  }
  
  /* Contenedor principal - Azul marino oscuro predominante */
  .sign {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 40px 20px;
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 0;
    width: 100vw;
    background: linear-gradient(180deg, #0f1419 0%, #1a202c 50%, #2d3748 100%);
    overflow: hidden;
  }
  

  /* ===========================================
     FOOTER CON TEMA AZUL ARMONIZADO
     =========================================== */

  /* Footer con estilo azul moderno armonizado con header */
  .footer {
    background: rgba(10, 15, 25, 0.85) !important;
    border-top: 1px solid rgba(59, 130, 246, 0.15) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    color: #e5e7eb !important;
  }

  /* Estilos específicos para mejorar las letras del footer */
  .footer * {
    color: #e5e7eb !important;
  }

  .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
    color: #f8fafc !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }

  .footer a {
    color: #cbd5e1 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
  }

  .footer a:hover {
    color: #93c5fd !important;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.4) !important;
  }

  .footer p, .footer span, .footer div {
    color: #cbd5e1 !important;
  }

  /* ===========================================
     FOOTER MINIMALISTA Y ELEGANTE
     =========================================== */

  /* Contenedor principal del footer centrado */
  .footer .container {
    padding: 15px 20px 15px !important;
    max-width: 1200px !important;
  }

  /* Row centrado */
  .footer .row {
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Columna centrada */
  .footer .col-12 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Logo centrado y elegante */
  .footer__logo {
    margin-bottom: 15px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .footer__logo img {
    height: 70px !important;
    width: auto !important;
    filter: brightness(1.1) !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .footer__logo img:hover {
    transform: scale(1.08) !important;
    filter: brightness(1.2) !important;
  }

  /* Créditos minimalistas */
  .footer__credits {
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-align: center !important;
    opacity: 0.8 !important;
    letter-spacing: 0.3px !important;
    transition: color 0.2s ease, opacity 0.2s ease !important;
  }

  .footer__credits:hover {
    color: #cbd5e1 !important;
    opacity: 1 !important;
  }

  /* ===========================================
     FOOTER RESPONSIVE DESIGN
     =========================================== */

  /* Tablet y pantallas medianas */
  @media (max-width: 992px) {
    .footer .container {
      padding: 12px 15px 12px !important;
    }
    
    .footer__logo img {
      height: 60px !important;
    }
    
    .footer__credits {
      font-size: 13px !important;
    }
  }

  /* Móvil */
  @media (max-width: 768px) {
    .footer .container {
      padding: 10px 10px 10px !important;
    }
    
    .footer__logo {
      margin-bottom: 12px !important;
    }
    
    .footer__logo img {
      height: 55px !important;
    }
    
    .footer__credits {
      font-size: 12px !important;
    }
  }

  /* Móvil pequeño */
  @media (max-width: 480px) {
    .footer .container {
      padding: 8px 8px 8px !important;
    }
    
    .footer__logo {
      margin-bottom: 10px !important;
    }
    
    .footer__logo img {
      height: 50px !important;
    }
    
    .footer__credits {
      font-size: 11px !important;
    }
  }
  
  /* ===========================================
     HEADER - REDISEÑO ARMONIZADO CON REGISTRO
     =========================================== */
  .header {
    background: rgba(10, 15, 25, 0.85) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15) !important;
    min-height: auto !important;
    height: auto !important;
  }
  .header__content { 
    padding: 8px 24px !important; 
    min-height: auto !important;
  }
  .header__logo img { 
    height: 50px !important; 
    max-height: 50px !important;
  }
  .header__nav-link,
  .header__action-btn span,
  .header__profile-btn p,
  .header__profile-btn span { color: #e5e7eb !important; }
  .header__nav-link:hover { color: #f1f5f9 !important; }
  .header__nav-link--active { color: #cbd5e1 !important; }
  .header__nav-link svg,
  .header__action-btn svg,
  .header__profile-btn svg { fill: #94a3b8 !important; }
  .header__action-btn:hover svg,
  .header__nav-link:hover svg { fill: #cbd5e1 !important; }
  .header__btn span { background-color: #cbd5e1 !important; }
  .header__menu { background: rgba(10, 15, 25, 0.92) !important; border-left: 1px solid rgba(59,130,246,0.12) !important; }
  .header__nav-menu { background: rgba(10, 15, 25, 0.95) !important; border: 1px solid rgba(59,130,246,0.12) !important; }
  .header__nav-menu a { color: #e5e7eb !important; }
  .header__nav-menu a:hover { color: #f1f5f9 !important; }
  .header__profile-btn { border: 1px solid rgba(59,130,246,0.15) !important; background: rgba(2,6,23,0.5) !important; }
  .header__action-btn--signin {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
    transition: all 0.3s ease !important;
  }
  .header__action-btn--signin span { color: #f8fafc !important; letter-spacing: 0.3px; font-weight: 600; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; }
  .header__action-btn--signin svg { fill: #cbd5e1 !important; }
  .header__action--signin:hover a span,
  .header__action--signin:hover button span { color: #f8fafc !important; }
  .header__action--signin:hover a svg,
  .header__action--signin:hover button svg { fill: #cbd5e1 !important; }
  .header__action-btn--signin:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.2) 100%) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.3) !important;
  }
  .header__action-btn--signin:active {
    background: linear-gradient(180deg, #10223f 0%, #172b4d 100%) !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.4) !important;
  }
  .header__search input { background: rgba(2,6,23,0.65) !important; color: #e5e7eb !important; border: 1px solid rgba(59,130,246,0.2) !important; }
  .header__search button svg { color: #cbd5e1 !important; fill: #cbd5e1 !important; }
  
  @media (min-width: 1200px) {
    .header__content { padding: 0 36px; }
    /* En desktop el menú debe fundirse con el fondo del header */
    .header__menu { background: transparent !important; border-left: none !important; box-shadow: none !important; }
    .header__content { background: transparent !important; }
  }
  
  /* En móvil/tablet mantenemos panel con fondo para el menú lateral */
  @media (max-width: 1199px) {
    .header__menu { background: rgba(10, 15, 25, 0.92) !important; border-left: 1px solid rgba(59,130,246,0.12) !important; }
  }
  
  /* ===========================================
     DOWNLOADS - NUEVO ESTILO ARMONIZADO CON REGISTRO
     (Overrides de la sección de downloads existente)
     =========================================== */
  /* Fondo y overlay, menos altura inicial para evitar scroll */
  .downloadBlock-content {
    margin-top: -140px;
    padding-top: 120px;
  }
  .downloadBlock-content::before {
    background: linear-gradient(135deg, rgba(10, 15, 30, 0.88) 0%, rgba(17, 24, 39, 0.78) 40%, rgba(2, 6, 23, 0.88) 100%);
  }
  /* Contenedor glassy azul */
  .downloadBlock {
    background: rgba(10, 15, 25, 0.65);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.25) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 720px;
    padding: 28px 24px 28px;
  }
  .downloadBlock:hover {
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
  }
  /* Títulos y textos en blanco/gris */
  .downloadBlock-title { color: #e5e7eb; }
  .downloadBlock-title span { color: #cbd5e1; text-shadow: none; }
  .downloadBlock p, .downloadBlock li { color: #cbd5e1; }
  /* Botones */
  .downloadBlock-buttons { gap: 16px; }
  .d-button {
    border-radius: 14px;
    border: 1px solid rgba(59, 130, 246, 0.25);
    background: rgba(10, 15, 25, 0.55);
  }
  .d-button::before { background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.08), transparent); }
  .d-button:hover {
    border-color: rgba(59, 130, 246, 0.45);
    background: rgba(10, 15, 25, 0.75);
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.25);
  }
  /* Título principal de downloads con paleta azul */
  .downloadBlock-content .page-title {
    color: #e5e7eb;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 15px rgba(59, 130, 246, 0.35), 0 0 4px rgba(0, 0, 0, 0.6);
  }
  .downloadBlock-content .page-title::after {
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.6) 50%, transparent 100%);
  }
  /* Subtítulos/requisitos */
  .downloadBlock-content .h2-title { color: #e5e7eb; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
  /* Tablas/otros contenedores (si existen) */
  .downloadBlock-content .table-scroll {
    background: rgba(10, 15, 25, 0.7);
    border: 1px solid rgba(59,130,246,0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  }
  .footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(59, 130, 246, 0.6) 50%,
      transparent 100%
    );
    z-index: 2;
  }
  
  /* ===========================================
     MEJORAS PARA EL MÓDULO DE DOWNLOADS  
     =========================================== */
  
  /* Prevenir scroll horizontal cuando el módulo downloads está activo */
  body:has(.downloadBlock-content) {
    overflow-x: hidden;
  }
  
  /* Fallback para navegadores que no soportan :has() */
  @supports not selector(:has(*)) {
    .downloadBlock-content {
      overflow-x: hidden;
    }
  }
  


  /* Contenedor principal con fondo de imagen que cubre todo */
  .downloadBlock-content {

    background-size: cover;
    background-attachment: fixed;
  }
  
  /* Overlay con transparencia para el fondo */
  .main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      rgba(10, 15, 30, 0.88) 0%,
      rgba(17, 24, 39, 0.78) 40%,
      rgba(2, 6, 23, 0.88) 100%
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  
  /* Asegurar que el contenido esté por encima del overlay */
  .downloadBlock-content > * {
    position: relative;
    z-index: 2;
  }

  /* Grid de descargas moderno */
  .downloadBlock-content .downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
  }

@media (max-width: 997px) {
    /* Estilos que se aplicar�n para anchos de pantalla de 997px o m�s */
    .downloadBlock-content .downloads-grid {
    display: inherit;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}
	
	.download-card { margin-bottom: 30px;}
	}


  /* Cards de descarga modernas */
  .downloadBlock-content .download-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(2, 6, 23, 0.6) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .downloadBlock-content .download-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .downloadBlock-content .download-card:hover {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  }

  .downloadBlock-content .download-card:hover::before {
    opacity: 1;
  }

  /* Card destacada */
  .downloadBlock-content .download-card--featured {
    border: 2px solid rgba(59, 130, 246, 0.5);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(2, 6, 23, 0.7) 100%);
  }

  .downloadBlock-content .download-card--featured::before {
    opacity: 0.7;
  }

  /* Iconos de las cards */
  .downloadBlock-content .download-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    margin-bottom: 24px;
    color: #60a5fa;
  }

  .downloadBlock-content .download-card--featured .download-card__icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(96, 165, 250, 0.15));
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
  }

  /* Contenido de las cards */
  .downloadBlock-content .download-card__content {
    margin-bottom: 24px;
  }

  .downloadBlock-content .download-card__title {
    font-size: 24px;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .downloadBlock-content .download-card__version {
    font-size: 14px;
    color: #60a5fa;
    margin-bottom: 12px;
    font-weight: 500;
  }

  .downloadBlock-content .download-card__description {
    font-size: 16px;
    color: #e2e8f0;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  /* Estadísticas de descarga */
  .downloadBlock-content .download-card__stats {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
  }

  .downloadBlock-content .download-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #cbd5e1;
    background: rgba(59, 130, 246, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(59, 130, 246, 0.2);
  }

  .downloadBlock-content .download-stat svg {
    color: #60a5fa;
  }

  /* Acciones de descarga */
  .downloadBlock-content .download-card__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .downloadBlock-content .download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
  }

  .downloadBlock-content .download-btn--primary {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .downloadBlock-content .download-btn--primary:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    color: #ffffff;
  }

  .downloadBlock-content .download-btn--secondary {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
  }

  .downloadBlock-content .download-btn--secondary:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
  }

  /* Sección de requisitos del sistema */
  .downloadBlock-content .system-requirements {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .downloadBlock-content .system-requirements__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    color: #f1f5f9;
    text-align: center;
    margin-bottom: 40px;
    justify-content: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .downloadBlock-content .system-requirements__title svg {
    color: #60a5fa;
  }

  /* Grid de requisitos */
  .downloadBlock-content .requirements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }

  .downloadBlock-content .requirement-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(2, 6, 23, 0.4) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
  }

  .downloadBlock-content .requirement-item:hover {
    border-color: rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(2, 6, 23, 0.5) 100%);
  }

  .downloadBlock-content .requirement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    color: #60a5fa;
    flex-shrink: 0;
  }

  .downloadBlock-content .requirement-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .downloadBlock-content .requirement-label {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 500;
  }

  .downloadBlock-content .requirement-value {
    font-size: 16px;
    color: #f1f5f9;
    font-weight: 600;
  }
  
  /* Mejorar títulos de descarga - Minimalista */
  .downloadBlock-title {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    font-size: 18px;
    margin-bottom: 30px;
    font-weight: 500;
    letter-spacing: 0.5px;
  }
  
  .downloadBlock-title span {
    color: #60a5fa;
    font-weight: 600;
    text-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
  }
  
  /* Mejorar botones de descarga - Minimalista - 20% más grandes */
  .downloadBlock-buttons {
    gap: 15px; /* Aumentado gap */
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 15px; /* Aumentado margen */
  }
  
  .d-button {
    border-radius: 16px;
    border: 1px solid rgba(177, 119, 20, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 168px; /* Aumentado de 140px (20% más) */
    height: 102px; /* Aumentado de 85px (20% más) */
    padding-top: 72px; /* Aumentado proporcionalmente */
    font-size: 13px; /* Ligeramente más grande */
    font-weight: 500;
    background: rgba(19, 6, 0, 0.6);
  }
  
  .d-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.08), transparent);
    transition: left 0.6s ease;
  }
  
  .d-button:hover::before {
    left: 100%;
  }
  
  .d-button:hover {
    transform: translateY(-4px);
    border-color: rgba(177, 119, 20, 0.5);
    box-shadow: 
      0 8px 35px rgba(0, 0, 0, 0.25),
      0 0 25px rgba(59, 130, 246, 0.15);
    background: rgba(19, 6, 0, 0.8);
  }
  
  /* Estilos globales de page-title removidos - cada módulo tiene su propio estilo específico */
  
  /* ===============================
     TÍTULOS DE MÓDULOS INDIVIDUALES
     =============================== */
  
  /* Título del módulo downloads - mismo estilo que rankings */
  .downloadBlock-content .page-title {
    text-align: center;
    color: #f1f5f9;
    text-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.8),
      0 0 15px rgba(59, 130, 246, 0.3);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 40px 0 30px 0;
    position: relative;
    z-index: 10;
  }
  
  /* Línea separadora del título downloads - igual que rankings */
  .downloadBlock-content .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(59, 130, 246, 0.4) 20%,
      rgba(59, 130, 246, 0.7) 50%,
      rgba(59, 130, 246, 0.4) 80%,
      transparent 100%
    );
    border-radius: 1px;
    z-index: 3;
  }
  



  /* Breadcrumb mejorado para aparecer sobre el fondo */
  .breadcrumb {
    position: relative;
 
    display: inline-block;
	  height: 200px;
  }
  
  .breadcrumb__item {
    color: rgba(177, 119, 20, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  
  .breadcrumb__item--active {
    color: #D4AF37;
  }
  
  /* Mejorar sección de requisitos del sistema */
  .h2-title {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-top: 30px; /* Reducido de 60px a 30px para menos scroll */
    text-align: center; /* Centrar también este título */
    margin-bottom: 30px;
    text-align: center;
    font-size: 24px;
    color: #3b82f6; /* Color consistente con DOWNLOAD */
  }
  
  .table-scroll {
    position: relative;
    z-index: 2;
    background: rgba(26, 12, 0, 0.85);
    border-radius: 16px;
    padding: 30px;
    border: 2px solid rgba(177, 119, 20, 0.3);
    box-shadow: 
      0 15px 35px rgba(0, 0, 0, 0.4),
      0 0 25px rgba(177, 119, 20, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    max-width: 800px;
    margin: 0 auto;
    transition: all 0.3s ease;
  }
  
  .table-scroll:hover {
    transform: translateY(-2px);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  
  .rakings-deidad-customs {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.92) 100%);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-radius: 16px;
  }

  .rakings-deidad-customs thead th {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(96, 165, 250, 0.1) 100%);
    border: none;
    border-bottom: 2px solid rgba(59, 130, 246, 0.3);
    color: #f1f5f9;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    padding: 15px 20px;
    letter-spacing: 0.5px;
  }

  .rakings-deidad-customs thead th:first-child {
    border-top-left-radius: 16px;
  }

  .rakings-deidad-customs thead th:last-child {
    border-top-right-radius: 16px;
  }

  .rakings-deidad-customs tbody tr {
    border: none;
    transition: all 0.3s ease;
  }
  .rakings-deidad-customs tbody tr:hover {
    background: rgba(59, 130, 246, 0.08);
    transform: scale(1.01);
  }

  .rakings-deidad-customs tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.15);
  }

  .rakings-deidad-customs tbody tr:nth-child(odd) {
    background: rgba(15, 23, 42, 0.08);
  }

  .rakings-deidad-customs tbody tr:hover {
    background: rgba(59, 130, 246, 0.12) !important;
  }

  .rakings-deidad-customs tbody tr:last-child td:first-child {
    border-bottom-left-radius: 16px;
  }

  .rakings-deidad-customs tbody tr:last-child td:last-child {
    border-bottom-right-radius: 16px;
  }

  .rakings-deidad-customs tbody td {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.5;
  }

  .rakings-deidad-customs tbody td:first-child {
    font-weight: 600;
    color: #60a5fa;
  }

  .rakings-deidad-customs tbody td em {
    color: rgba(226, 232, 240, 0.9);
    font-style: normal;
    font-weight: 500;
  }
  
  /* Responsive para móviles */
  @media (max-width: 768px) {
    .downloadBlock-content {
      background-attachment: scroll;
      margin-top: -160px; /* Aumentado significativamente para cobertura total */
      padding-top: 120px; /* Ajustado para equilibrar con el nuevo margen del título */
      padding-bottom: 30px; /* Reducido */
      padding-left: 15px;
      padding-right: 15px;
      margin-left: calc(-50vw + 50%);
      margin-right: calc(-50vw + 50%);
      width: 100vw;
      overflow-x: hidden;
      min-height: 85vh; /* Reducido para mobile */
    }
    
    .downloadBlock {
      padding: 30px 25px 40px; /* Aumentado para mantener proporción */
      margin-bottom: 20px; /* Reducido */
      max-width: 480px; /* Aumentado (20% más que 400px) */
    }
    
    .downloadBlock-title {
      font-size: 18px; /* Aumentado */
      margin-bottom: 25px;
    }
    
    .d-button {
      width: 144px; /* Aumentado (20% más que el anterior 120px) */
      height: 90px; /* Aumentado (20% más que el anterior 75px) */
      padding-top: 62px; /* Aumentado proporcionalmente */
      font-size: 12px; /* Aumentado */
    }
    
    .page-title {
      font-size: 28px; /* Aumentado */
      margin: 0 0 70px 0; /* Aumentado 10px más para mejor separación */
      padding: 20px 15px; /* Reducido para mobile */
      letter-spacing: 2px; /* Reducido para mobile */
      width: 100%; /* Ocupar todo el ancho */
    }
    
    .table-scroll {
      padding: 15px 10px; /* Reducido */
      max-width: 100%;
      margin: 0 10px;
    }
    
    .h2-title {
      font-size: 24px; /* Aumentado */
      margin-top: 20px; /* Reducido */
    }
  }
  
  @media (max-width: 480px) {
    .downloadBlock-content {
      margin-top: -140px; /* Aumentado significativamente para cobertura total */
      padding-top: 100px; /* Ajustado para equilibrar con el nuevo margen del título */
      padding-bottom: 25px; /* Reducido */
      padding-left: 10px;
      padding-right: 10px;
    }
    
    .downloadBlock {
      padding: 25px 20px 35px; /* Aumentado para mantener proporción */
      max-width: 384px; /* Aumentado (20% más que 320px) */
    }
    
    .downloadBlock-title {
      font-size: 16px; /* Aumentado */
      margin-bottom: 20px;
    }
    
    .d-button {
      width: 132px; /* Aumentado (20% más que el anterior 110px) */
      height: 84px; /* Aumentado (20% más que el anterior 70px) */
      padding-top: 58px; /* Aumentado proporcionalmente */
      font-size: 11px; /* Aumentado */
    }
    
    .table-scroll {
      padding: 12px 8px; /* Reducido */
      margin: 0 5px;
    }
    
    .page-title {
      font-size: 24px; /* Ajustado para mobile pequeño */
      margin: 0 0 60px 0; /* Aumentado 10px más para mejor separación */
      padding: 18px 10px; /* Más compacto */
      letter-spacing: 1.5px; /* Reducido para mobile pequeño */
      width: 100%; /* Ocupar todo el ancho */
    }
    
    .h2-title {
      font-size: 20px; /* Aumentado */
      margin-top: 15px; /* Reducido */
    }
  }
  
  
  
  /* Efecto adicional de partículas doradas */
  .sign::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(2px 2px at 20px 30px, rgba(177, 119, 20, 0.3), transparent),
      radial-gradient(2px 2px at 40px 70px, rgba(212, 175, 55, 0.2), transparent),
      radial-gradient(1px 1px at 90px 40px, rgba(177, 119, 20, 0.4), transparent),
      radial-gradient(1px 1px at 130px 80px, rgba(212, 175, 55, 0.3), transparent),
      radial-gradient(2px 2px at 160px 30px, rgba(177, 119, 20, 0.2), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: sparkle 20s linear infinite;
    z-index: 2;
    pointer-events: none;
  }
  
  /* Animación de partículas doradas */
  @keyframes sparkle {
    0%, 100% { 
      opacity: 0.3;
      transform: translateY(0px);
    }
    50% { 
      opacity: 0.8;
      transform: translateY(-5px);
    }
  }
  
  .sign__content {
    width: 100%;
    max-width: 450px; /* Ancho equilibrado */
    margin: 0 auto;
    position: relative;
    z-index: 10;
  }
  
  /* Formulario azul marino oscuro con gris */
  .sign__form {
    background: linear-gradient(135deg, 
      rgba(15, 20, 25, 0.95) 0%, 
      rgba(30, 41, 59, 0.92) 50%,
      rgba(51, 65, 85, 0.90) 100%);
    border: 1px solid rgba(71, 85, 105, 0.4);
    border-radius: 16px;
    padding: 35px 30px;
    margin: 20px auto;
    box-shadow: 
      0 30px 60px rgba(0,0,0,0.7), 
      inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 450px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  
  /* Eliminamos el efecto de brillo para seguir el estilo minimalista del launcher */
  
  /* Animación del borde brillante dark */
  @keyframes borderGlowDark {
    0%, 100% { 
      background-position: 0% 50%; 
      opacity: 0.4;
    }
    50% { 
      background-position: 100% 50%;
      opacity: 0.7;
    }
  }
  
  /* Logo mejorado */
  .sign__logo {
    text-align: center;
    margin-bottom: 25px;
  }
  
  .sign__logo img {
    width: auto;
    height: 70px;
    filter: drop-shadow(0 6px 12px rgba(177, 119, 20, 0.4));
    transition: all 0.3s ease;
  }
  
  .sign__logo img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 8px 16px rgba(212, 175, 55, 0.6));
  }
  
  /* Grupos de campos mejorados */
  .sign__group {
    margin-bottom: 20px;
    position: relative;
  }
  
  /* Inputs azul marino oscuro */
  .sign__input {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(71, 85, 105, 0.5);
    border-radius: 10px;
    height: 50px;
    padding: 0 16px;
    font-size: 16px;
    color: #cbd5e1;
    width: 100%;
    transition: all 0.15s ease;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .sign__input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.3);
    outline: none;
    background: rgba(15, 23, 42, 0.95);
    color: #f1f5f9;
  }
  
  .sign__input::placeholder {
    color: rgba(148, 163, 184, 0.7);
    font-weight: 400;
  }
  
  /* Botón de registro azul marino predominante */
  .sign__btn {
    background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
    border: 1px solid rgba(71, 85, 105, 0.6);
    border-radius: 10px;
    color: #f1f5f9;
    font-size: 16px;
    font-weight: 600;
    height: 54px;
    width: 100%;
    margin-top: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.15s ease;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(30, 58, 138, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    position: relative;
    overflow: hidden;
  }
  
  /* Efecto de brillo superior en el botón (como en el launcher) */
  .sign__btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
    border-radius: 10px 10px 0 0;
    opacity: 0.8;
  }
  
  /* Animación de breathing como en el launcher */
  .sign__btn {
    animation: buttonBreathe 3s ease-in-out infinite;
  }
  
  @keyframes buttonBreathe {
    0%, 100% {
      box-shadow: 0 10px 25px rgba(30, 58, 138, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    50% {
      box-shadow: 0 14px 35px rgba(30, 58, 138, 0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    }
  }
  
  .sign__btn:hover {
    animation: none; /* Pausar la animación de breathing en hover */
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 15px 35px rgba(30, 58, 138, 0.6);
    background: linear-gradient(180deg, #1e40af 0%, #3b82f6 100%);
    border-color: rgba(59, 130, 246, 0.8);
  }
  
  .sign__btn:active {
    transform: scale(0.97);
    transition: transform 0.05s ease;
  }
  
  /* Kit de Bienvenida azul marino oscuro */
  .welcome-kit-notice-modern {
    background: linear-gradient(135deg, 
      rgba(30, 41, 59, 0.8) 0%, 
      rgba(51, 65, 85, 0.6) 100%);
    border: 1px solid rgba(71, 85, 105, 0.4);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 
      0 12px 30px rgba(0,0,0,0.5), 
      inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.15s ease;
  }
  
  .welcome-kit-notice-modern:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  }
  
  .welcome-kit-icon-modern {
    font-size: 32px;
    filter: drop-shadow(0 4px 8px rgba(24, 208, 255, 0.4));
    min-width: 40px;
  }
  
  .welcome-kit-content-modern h4 {
    color: #EAEAF2;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }
  
  .welcome-kit-content-modern p {
    color: #A7A8B3;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }
  
  .discord-link-modern {
    color: #18D0FF !important;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.15s ease;
  }
  
  .discord-link-modern:hover {
    color: #3FEEFF !important;
    text-decoration: underline;
  }
  
  /* Mensaje de progreso azul marino oscuro */
  .launcher-progress-notice {
    background: linear-gradient(135deg, 
      rgba(30, 58, 138, 0.2) 0%, 
      rgba(51, 65, 85, 0.15) 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 
      0 12px 30px rgba(0,0,0,0.5), 
      inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
  }
  
  .launcher-progress-notice::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(24, 208, 255, 0.1), transparent);
    animation: progressShimmer 3s ease-in-out infinite;
  }
  
  @keyframes progressShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
  }
  
  .launcher-progress-notice:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  }
  
  .progress-icon {
    font-size: 24px;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.5));
    animation: iconPulse 2s ease-in-out infinite;
  }
  
  @keyframes iconPulse {
    0%, 100% { 
      transform: scale(1);
      filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.5));
    }
    50% { 
      transform: scale(1.1);
      filter: drop-shadow(0 6px 12px rgba(59, 130, 246, 0.7));
    }
  }
  
  .progress-content {
    flex: 1;
  }
  
  .progress-message {
    color: #18D0FF;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    text-shadow: 0 0 10px rgba(24, 208, 255, 0.3);
  }
  
  .progress-submessage {
    color: #A7A8B3;
    font-size: 13px;
    line-height: 1.4;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }
  
  /* Texto de términos mejorado */
  .form-group {
    margin: 20px 0;
    text-align: center;
  }
  
  .form-group [style*="color:white"] {
    color: rgba(177, 119, 20, 0.9) !important;
    font-size: 14px;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  
  .form-group a {
    color: #D4AF37 !important;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  
  .form-group a:hover {
    color: #F4D03F !important;
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  }
  
  /* Recaptcha mejorado */
  .g-recaptcha {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    padding: 15px;
    border-radius: 10px;
    background: rgba(19, 6, 0, 0.5);
    border: 1px solid rgba(177, 119, 20, 0.2);
  }
  
  /* Responsive para captcha */
  @media (max-width: 768px) {
    .g-recaptcha {
      padding: 20px 15px;
      margin: 25px 0;
      border-radius: 12px;
      background: rgba(19, 6, 0, 0.7);
      border: 1px solid rgba(177, 119, 20, 0.3);
      transform: scale(0.9);
      transform-origin: center;
    }
  }
  
  @media (max-width: 480px) {
    .g-recaptcha {
      padding: 25px 20px;
      margin: 30px 0;
      border-radius: 15px;
      background: rgba(19, 6, 0, 0.8);
      border: 2px solid rgba(177, 119, 20, 0.4);
      transform: scale(0.85);
      transform-origin: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }
  }
  
  @media (max-width: 360px) {
    .g-recaptcha {
      padding: 30px 25px;
      margin: 35px 0;
      border-radius: 18px;
      background: rgba(19, 6, 0, 0.9);
      border: 2px solid rgba(177, 119, 20, 0.5);
      transform: scale(0.8);
      transform-origin: center;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    }
  }
  
  /* Responsive para móviles */
  @media (max-width: 768px) {
    .sign {
      background-attachment: scroll; /* Mejor rendimiento en móviles */
      margin-left: calc(-50vw + 50%);
      margin-right: calc(-50vw + 50%);
      width: 100vw;
      overflow-x: hidden;
      padding: 30px 15px;
    }
    
    .sign__content {
      max-width: 380px;
    }
    
    .sign__form {
      padding: 25px 22px;
      margin: 15px;
    }
    
    .sign__input,
    .sign__btn {
      height: 46px;
      font-size: 15px;
    }
    
    .sign__logo img {
      height: 65px;
    }
  }
  
  /* Para pantallas muy pequeñas */
  @media (max-width: 480px) {
    .sign {
      padding: 20px 10px;
    }
    
    .sign__content {
      max-width: 320px;
    }
    
    .sign__form {
      padding: 25px 20px;
      border-radius: 16px;
    }
    
    .sign__input,
    .sign__btn {
      height: 46px;
      font-size: 14px;
    }
    
    .welcome-kit-notice-modern {
      padding: 15px;
      flex-direction: column;
      text-align: center;
      gap: 10px;
    }
    
    .welcome-kit-icon-modern {
      font-size: 28px;
    }
    
    .welcome-kit-content-modern h4 {
      font-size: 16px;
    }
    
    .welcome-kit-content-modern p {
      font-size: 13px;
    }
    
    .launcher-progress-notice {
      padding: 14px 16px;
      flex-direction: column;
      text-align: center;
      gap: 8px;
    }
    
    .progress-icon {
      font-size: 20px;
    }
    
    .progress-message {
      font-size: 15px;
    }
    
    .progress-submessage {
      font-size: 12px;
    }
  }
  
  /* Para pantallas grandes */
  @media (min-width: 1200px) {
    .sign__content {
      max-width: 480px;
    }
    
    .sign__form {
      padding: 35px 32px;
    }
  }
  
  /* Animación suave para la carga del formulario */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .sign__form {
    animation: fadeInUp 0.8s ease-out;
  }
  
  /* Asegurar que las secciones fuera del fondo mantengan el estilo normal */
  .space-20 {
    position: relative;
    z-index: 1;
  }
  
  /* Ajustes adicionales para la sección de requisitos */
  .h2-title + .table-scroll {
    margin-top: 20px;
  }
  
  /* Separación elegante entre secciones */
  .space-20 {
    height: 40px;
    position: relative;
    z-index: 1;
  }
  
  /* Asegurar que la sección de requisitos esté bien separada */
  .downloadBlock-content + .space-20 + .h2-title {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid rgba(177, 119, 20, 0.15);
  }
  
  /* ===============================
     MÓDULO DE RANKINGS - CAMBIOS CONSERVADORES
     =============================== */
  
  /* Aplicar solo a páginas de rankings usando el selector específico table#rankings */
  /* Asegurar fondo oscuro para html cuando estemos en rankings */
  html:has(body:has(table#rankings.rakings-deidad-customs)) {
    background-color: #0f172a !important;
    width: 100%;
    height: 100%;
  }
  
  body:has(table#rankings.rakings-deidad-customs) {
    background: #0f172a url('../img/CoverNew.png') repeat-y center center fixed;
    background-size: cover;
    overflow-x: hidden;
    min-height: 100vh;
    width: 100%;
  }
  
  /* Overlay sutil solo para rankings */
  body:has(table#rankings.rakings-deidad-customs)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
      135deg, 
      rgba(15, 23, 42, 0.75) 0%, 
      rgba(30, 41, 59, 0.65) 30%, 
      rgba(51, 65, 85, 0.55) 60%, 
      rgba(15, 23, 42, 0.75) 100%
    );
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: -1;
    pointer-events: none;
  }
  
  /* Responsive para overlay de rankings en móviles */
  @media (max-width: 768px) {
    body:has(table#rankings.rakings-deidad-customs)::before {
      position: absolute;
      width: 100vw;
      height: 100%;
      min-height: 100vh;
    }
  }
  
  /* ================================
     MÓDULOS DE HUNT - FONDO DE COVER
     =============================== */
  
  /* Aplicar fondo de cover a módulos de hunt (hunt, huntguild, hunthistory, huntguildhistory) */
  html:has(body:has(.hunt-rankings-section)) {
    background-color: #130600 !important;
    width: 100%;
    height: 100%;
  }
  
  body:has(.hunt-rankings-section) {
    background: #130600 url('../img/CoverNew.png') repeat-y center center fixed;
    background-size: cover;
    overflow-x: hidden;
    min-height: 100vh;
    width: 100%;
  }
  
  /* Overlay sutil solo para módulos de hunt */
  body:has(.hunt-rankings-section)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
      135deg, 
      rgba(7, 2, 0, 0.75) 0%, 
      rgba(19, 6, 0, 0.65) 30%, 
      rgba(26, 12, 0, 0.55) 60%, 
      rgba(7, 2, 0, 0.75) 100%
    );
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: -1;
    pointer-events: none;
  }
  
  /* Responsive para overlay de hunt en móviles */
  @media (max-width: 768px) {
    body:has(.hunt-rankings-section)::before {
      position: absolute;
      width: 100vw;
      height: 100%;
      min-height: 100vh;
    }
  }
  

  
  /* Estilizar título de hunt conservadoramente */
  body:has(.hunt-rankings-section) .page-title {
    text-align: center;
    color: #3b82f6;
    text-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 15px rgba(177, 119, 20, 0.3);
    margin-bottom: 60px;
    position: relative;
  }
  
  /* Línea separadora sutil en el título de hunt */
  body:has(.hunt-rankings-section) .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      #3b82f6 50%,
      transparent 100%
    );
    z-index: 3;
  }
  
  /* Estilizar menú de filtros de hunt */
  body:has(.hunt-rankings-section) .rankings-class-filter {
    background: rgba(15, 23, 42, 0.75);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 
      0 8px 20px rgba(0, 0, 0, 0.25),
      0 0 15px rgba(59, 130, 246, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 30px;
    position: relative;
  }
  
  /* ===============================
     SECCIÓN SUPERIOR DEL HUNT - REDISEÑO MODERNO
     =============================== */
  
  /* Botones de navegación superiores */
  .filter-week {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 25px 0 35px 0;
  }
  
  .filter-week .label {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 12px;
    padding: 10px 20px;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .filter-week .label:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
    color: #ffffff;
    text-decoration: none;
  }
  
  /* NUEVO CONTENEDOR DE PREMIO SEMANAL - HUNT RANKING */
  .weekly-prize-notice {
    background: linear-gradient(135deg, 
      rgba(15, 23, 42, 0.95) 0%, 
      rgba(30, 41, 59, 0.90) 30%, 
      rgba(51, 65, 85, 0.85) 70%, 
      rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid rgba(59, 130, 246, 0.4);
    border-radius: 20px;
    padding: 0;
    margin: 30px auto;
    max-width: 1000px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 
      0 20px 50px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(59, 130, 246, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
  }
  
  .weekly-prize-notice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, rgba(96, 165, 250, 0.1) 0%, transparent 50%),
      linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.05) 50%, transparent 70%);
    pointer-events: none;
    z-index: 1;
  }
  
  .weekly-prize-notice:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 
      0 25px 60px rgba(0, 0, 0, 0.6),
      0 0 40px rgba(59, 130, 246, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  
  /* Header del premio con diseño moderno */
  .weekly-prize-header {
    background: linear-gradient(135deg, 
      rgba(59, 130, 246, 0.2) 0%, 
      rgba(30, 41, 59, 0.8) 50%, 
      rgba(59, 130, 246, 0.15) 100%);
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
    position: relative;
    z-index: 2;
    border-radius: 20px 20px 0 0;
  }
  
  .weekly-prize-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(59, 130, 246, 0.6) 50%, 
      transparent 100%);
  }
  
  /* Icono del trofeo mejorado */
  .weekly-prize-icon {
    font-size: 3.5em;
    color: #ffd700;
    filter: drop-shadow(0 6px 15px rgba(255, 215, 0, 0.5));
    animation: trophyGlow 3s ease-in-out infinite alternate;
    position: relative;
  }
  
  .weekly-prize-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: iconPulse 2s ease-in-out infinite;
    z-index: -1;
  }
  
  @keyframes trophyGlow {
    0% { 
      filter: drop-shadow(0 6px 15px rgba(255, 215, 0, 0.5));
      transform: scale(1);
    }
    100% { 
      filter: drop-shadow(0 8px 20px rgba(255, 215, 0, 0.8));
      transform: scale(1.05);
    }
  }
  
  @keyframes iconPulse {
    0%, 100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.3;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.2);
      opacity: 0.6;
    }
  }
  
  /* Título y contenido del premio */
  .weekly-prize-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .weekly-prize-title h3 {
    color: #f1f5f9;
    font-size: 2em;
    font-weight: 800;
    margin: 0;
    text-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 15px rgba(59, 130, 246, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .prize-subtitle {
    color: #60a5fa;
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
  }
  
  /* Líder actual compacto */
  .current-leader-compact {
    background: linear-gradient(135deg, 
      rgba(255, 215, 0, 0.15) 0%, 
      rgba(59, 130, 246, 0.1) 100%);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 15px;
    padding: 15px 20px;
    min-width: 250px;
    position: relative;
    overflow: hidden;
  }
  
  .current-leader-compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(255, 215, 0, 0.1), 
      transparent);
    transition: left 0.6s ease;
  }
  
  .current-leader-compact:hover::before {
    left: 100%;
  }
  
  .leader-compact-info {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
  }
  
  .leader-compact-label {
    color: #60a5fa;
    font-weight: 700;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .leader-compact-name {
    color: #ffd700;
    font-weight: 800;
    font-size: 1em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }
  
  .leader-compact-points {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.9em;
    opacity: 0.9;
  }
  
  /* Contenido del premio */
  .weekly-prize-content {
    padding: 30px;
    position: relative;
    z-index: 2;
  }
  
  .prize-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
  }
  
  .prize-info-item {
    background: linear-gradient(135deg, 
      rgba(15, 23, 42, 0.8) 0%, 
      rgba(30, 41, 59, 0.6) 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .prize-info-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(59, 130, 246, 0.1), 
      transparent);
    transition: left 0.5s ease;
  }
  
  .prize-info-item:hover::before {
    left: 100%;
  }
  
  .prize-info-item:hover {
    border-color: rgba(59, 130, 246, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
  }
  
  .prize-info-item.prize-highlight {
    background: linear-gradient(135deg, 
      rgba(255, 215, 0, 0.1) 0%, 
      rgba(59, 130, 246, 0.05) 100%);
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
  }
  
  .prize-info-item.prize-highlight:hover {
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 10px 35px rgba(255, 215, 0, 0.3);
  }
  
  .info-icon {
    font-size: 2em;
    color: #60a5fa;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    flex-shrink: 0;
  }
  
  .prize-highlight .info-icon {
    color: #ffd700;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
  }
  
  .info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 2;
  }
  
  .info-label {
    color: #94a3b8;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }
  
  .info-value {
    color: #f1f5f9;
    font-size: 1.1em;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  
  .prize-highlight .info-value {
    color: #ffd700;
    text-shadow: 0 1px 3px rgba(255, 215, 0, 0.3);
  }
  
  /* Reglas del premio */
  .prize-rules {
    background: linear-gradient(135deg, 
      rgba(15, 23, 42, 0.6) 0%, 
      rgba(30, 41, 59, 0.4) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 15px;
    padding: 25px;
    margin-top: 20px;
  }
  
  .prize-rules h4 {
    color: #60a5fa;
    font-size: 1.2em;
    font-weight: 700;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .prize-rules ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .prize-rules li {
    color: #e2e8f0;
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
  }
  
  .prize-rules li::before {
    content: '▶';
    color: #60a5fa;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
  }
  
  /* Responsive para el contenedor del premio */
  @media (max-width: 768px) {
    .weekly-prize-notice {
      margin: 20px 15px;
      border-radius: 15px;
    }
    
    .weekly-prize-header {
      flex-direction: column;
      text-align: center;
      gap: 15px;
      padding: 20px;
    }
    
    .weekly-prize-icon {
      font-size: 2.5em;
    }
    
    .weekly-prize-title h3 {
      font-size: 1.5em;
    }
    
    .current-leader-compact {
      min-width: auto;
      width: 100%;
    }
    
    .weekly-prize-content {
      padding: 20px;
    }
    
    .prize-info-grid {
      grid-template-columns: 1fr;
      gap: 15px;
    }
    
    .prize-info-item {
      padding: 15px;
    }
    
    .info-icon {
      font-size: 1.5em;
    }
  }
  
  @media (max-width: 480px) {
    .weekly-prize-header {
      padding: 15px;
    }
    
    .weekly-prize-title h3 {
      font-size: 1.3em;
    }
    
    .weekly-prize-content {
      padding: 15px;
    }
    
    .prize-info-item {
      flex-direction: column;
      text-align: center;
      gap: 10px;
    }
    
    .prize-rules {
      padding: 20px;
    }
  }
  
  /* Fin de la sección del premio semanal del hunt ranking */
  
  .prize-rules h4 {
    color: #60a5fa;
    font-size: 1.1em;
    font-weight: 600;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .prize-rules ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .prize-rules li {
    color: #e5e7eb;
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
  }
  
  .prize-rules li::before {
    content: '▶';
    color: #60a5fa;
    position: absolute;
    left: 0;
    top: 0;
  }
  
  /* Responsive para la sección del premio */
  @media (max-width: 768px) {
    .weekly-prize-header {
      flex-direction: column;
      text-align: center;
      gap: 15px;
    }
    
    .current-leader-compact {
      margin-left: 0;
      margin-top: 15px;
    }
    
    .prize-info-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    
    .filter-week {
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
  }
  

  /* Estilizar título de rankings con diseño azul moderno */
  body:has(table#rankings.rakings-deidad-customs) .page-title {
    text-align: center;
    color: #f1f5f9;
    text-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.8),
      0 0 15px rgba(59, 130, 246, 0.3);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 40px 0 30px 0;
    position: relative;
    z-index: 10;
  }
  
  /* Línea separadora sutil en el título de rankings - IGUAL QUE DOWNLOADS */
  body:has(table#rankings.rakings-deidad-customs) .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      #3b82f6 50%,
      transparent 100%
    );
    z-index: 3;
  }
  

  /* Línea separadora debajo del menú de rankings */
  body:has(table#rankings.rakings-deidad-customs) .rankings-class-filter::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(59, 130, 246, 0.4) 50%,
      transparent 100%
    );
  }
  
  /* Layout de dos columnas para rankings */
  body:has(table#rankings.rakings-deidad-customs) .rankings-layout {
    display: flex;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Panel lateral izquierdo para categorías */
  body:has(table#rankings.rakings-deidad-customs) .rankings-sidebar {
    flex: 0 0 280px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 
      0 10px 25px rgba(0, 0, 0, 0.3),
      0 0 15px rgba(59, 130, 246, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    height: fit-content;
    position: sticky;
    top: 20px;
  }

  /* Título del panel lateral */
  body:has(table#rankings.rakings-deidad-customs) .rankings-sidebar h3 {
    color: #f1f5f9;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px 0;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
  }

  /* Lista de categorías */
  body:has(table#rankings.rakings-deidad-customs) .rankings-categories {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* Botones de categoría */
  body:has(table#rankings.rakings-deidad-customs) .rankings-categories li {
    margin-bottom: 8px;
  }

  body:has(table#rankings.rakings-deidad-customs) .rankings-categories a {
    display: block;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    color: #e2e8f0;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  body:has(table#rankings.rakings-deidad-customs) .rankings-categories a:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60a5fa;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
  }

  body:has(table#rankings.rakings-deidad-customs) .rankings-categories a.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(96, 165, 250, 0.15) 100%);
    border-color: rgba(59, 130, 246, 0.5);
    color: #93c5fd;
    font-weight: 600;
  }

  /* Contenedor principal de la tabla */
  body:has(table#rankings.rakings-deidad-customs) .rankings-main {
    flex: 1;
    min-width: 0;
  }

  /* Estilizar tabla de rankings con glass morphism sutil */
  body:has(table#rankings.rakings-deidad-customs) .table-responsive {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.8) 100%);
    border-radius: 12px;
    padding: 25px 25px 50px 25px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 
      0 10px 25px rgba(0, 0, 0, 0.3),
      0 0 15px rgba(59, 130, 246, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 15px;
    position: relative;
    overflow: visible;
    max-height: none;
  }
  
  
  
  /* Paginador minimalista y limpio para rankings */
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate {
    margin: 15px auto 10px auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.4);
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: fit-content;
  }
  
  /* Botones del paginador - estilo minimalista */
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #94a3b8;
    padding: 6px 10px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    min-width: 32px;
    height: 32px;
    line-height: 1;
  }
  
  /* Hover minimalista */
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa !important;
    text-decoration: none;
  }
  
  /* Botón activo minimalista */
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #3b82f6 !important;
    color: #ffffff !important;
    font-weight: 600;
  }
  
  /* Botones deshabilitados */
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.3;
    pointer-events: none;
    color: #64748b !important;
  }
  
  /* Flechas de navegación */
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    color: #60a5fa !important;
    font-weight: 600;
  }
  
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd !important;
  }
  
  /* Info del paginador oculta para ahorrar espacio */
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_info {
    display: none;
  }
  
  /* Eliminar estilos de focus por defecto */
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button:focus,
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
  }
  
  body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button {
    outline: none !important;
  }
  
  /* Configuración base de la tabla */
  body:has(table#rankings.rakings-deidad-customs) table#rankings {
    width: 100% !important;
    table-layout: auto !important;
  }
  
  /* CORREGIR COLOR CELESTE DEL PAGINADOR - Sobrescribir estilos de .pagination */
  body:has(table#rankings.rakings-deidad-customs) .pagination > .active > a,
  body:has(table#rankings.rakings-deidad-customs) .pagination > .active > span,
  body:has(table#rankings.rakings-deidad-customs) .pagination > .active > a:hover,
  body:has(table#rankings.rakings-deidad-customs) .pagination > .active > span:hover,
  body:has(table#rankings.rakings-deidad-customs) .pagination > .active > a:focus,
  body:has(table#rankings.rakings-deidad-customs) .pagination > .active > span:focus {
    z-index: 3;
    color: #ffffff !important;
    cursor: default;
    background-color: rgba(59, 130, 246, 0.8) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
  }
  
  /* Sobrescribir todos los estados del paginador para evitar colores celestes */
  body:has(table#rankings.rakings-deidad-customs) .pagination > li > a,
  body:has(table#rankings.rakings-deidad-customs) .pagination > li > span {
    background-color: rgba(15, 23, 42, 0.7) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
  }
  
  body:has(table#rankings.rakings-deidad-customs) .pagination > li > a:hover,
  body:has(table#rankings.rakings-deidad-customs) .pagination > li > span:hover,
  body:has(table#rankings.rakings-deidad-customs) .pagination > li > a:focus,
  body:has(table#rankings.rakings-deidad-customs) .pagination > li > span:focus {
    background-color: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #93c5fd !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2) !important;
  }
  
  /* Hover elegante para las filas de la tabla de rankings */
  body:has(table#rankings.rakings-deidad-customs) table#rankings tbody tr {
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  body:has(table#rankings.rakings-deidad-customs) table#rankings tbody tr:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    transform: scale(1.02);
    box-shadow: 
      0 4px 15px rgba(177, 119, 20, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  
  body:has(table#rankings.rakings-deidad-customs) table#rankings tbody tr:hover td {
    color: #D4AF37;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  
  /* Responsive para móviles en rankings */
  @media (max-width: 768px) {
    body:has(table#rankings.rakings-deidad-customs) {
      background: #0f172a url('../img/CoverNew.png') repeat-y center center scroll !important;
      background-size: cover !important;
      overflow-x: hidden !important;
      margin-top: -120px;
      padding-top: 140px;
      position: relative;
      min-height: 100vh;
    }

    /* Layout móvil: columna única */
    body:has(table#rankings.rakings-deidad-customs) .rankings-layout {
      flex-direction: column;
      gap: 20px;
      padding: 0 15px;
    }

    /* Panel lateral en móvil */
    body:has(table#rankings.rakings-deidad-customs) .rankings-sidebar {
      flex: none;
      width: 100%;
      position: static;
      padding: 20px;
    }

    /* Categorías en móvil - diseño horizontal scrollable */
    body:has(table#rankings.rakings-deidad-customs) .rankings-categories {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 10px;
      -webkit-overflow-scrolling: touch;
    }

    body:has(table#rankings.rakings-deidad-customs) .rankings-categories li {
      margin-bottom: 0;
      flex-shrink: 0;
    }

    body:has(table#rankings.rakings-deidad-customs) .rankings-categories a {
      white-space: nowrap;
      padding: 10px 16px;
      font-size: 13px;
    }

    body:has(table#rankings.rakings-deidad-customs) .rankings-categories a:hover {
      transform: translateX(0);
    }
    
    /* Responsive para móviles en módulos de hunt */
    body:has(.hunt-rankings-section) {
      background: #130600 url('../img/CoverNew.png') repeat-y center center scroll !important;
      background-size: cover !important;
      overflow-x: hidden !important;
      margin-top: -120px;
      padding-top: 140px;
      position: relative;
      min-height: 100vh;
    }
    
    /* Overlay para el módulo rankings */
    body:has(table#rankings.rakings-deidad-customs)::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      min-height: 100vh;
      background: linear-gradient(
        135deg, 
        rgba(7, 2, 0, 0.75) 0%, 
        rgba(19, 6, 0, 0.65) 30%, 
        rgba(26, 12, 0, 0.55) 60%, 
        rgba(7, 2, 0, 0.75) 100%
      );
      backdrop-filter: blur(1px);
      -webkit-backdrop-filter: blur(1px);
      z-index: -1;
      pointer-events: none;
    }
    
    /* Asegurar que html también tenga el fondo correcto en móviles */
    html:has(body:has(table#rankings.rakings-deidad-customs)) {
      background-color: #130600 !important;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .page-title {
      margin-bottom: 40px;
      font-size: 28px;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .rankings-class-filter {
      padding: 15px;
      margin: 0 10px 25px 10px;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .table-responsive {
      padding: 15px 15px 40px 15px;
      margin: 0 10px 30px 10px;
      /* Habilitar scroll horizontal independiente en tablets */
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
    }
    
    /* Asegurar que la tabla tenga ancho mínimo para activar scroll */
    body:has(table#rankings.rakings-deidad-customs) table#rankings {
      min-width: 600px; /* Ancho mínimo para forzar scroll horizontal */
    }
    
    /* Contenedor del paginador minimalista para tablet */
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate {
      position: relative;
      margin: 10px auto 8px auto;
      padding: 6px 12px;
      background: rgba(15, 23, 42, 0.3);
      border-radius: 10px;
      border: 1px solid rgba(59, 130, 246, 0.1);
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      width: fit-content;
      max-width: 90%;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button {
      padding: 5px 8px;
      margin: 0;
      font-size: 12px;
      min-width: 28px;
      height: 28px;
      background: transparent;
      border: none;
      border-radius: 6px;
      color: #94a3b8;
      outline: none !important;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
      background: rgba(59, 130, 246, 0.15) !important;
      color: #60a5fa !important;
      outline: none !important;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button.current {
      background: #3b82f6 !important;
      color: #ffffff !important;
      font-weight: 600;
      outline: none !important;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_info {
      font-size: 11px;
      padding: 6px 12px;
      margin: 15px auto 10px auto;
      max-width: 90%;
      text-align: center;
    }
    
    /* Hover más sutil para tablet */
    body:has(table#rankings.rakings-deidad-customs) table#rankings tbody tr:hover {
      transform: scale(1.01);
      box-shadow: 0 2px 10px rgba(59, 130, 246, 0.15);
    }
  }
  
  @media (max-width: 480px) {
    body:has(table#rankings.rakings-deidad-customs) {
      background: #0f172a url('../img/CoverNew.png') repeat-y center center scroll !important;
      background-size: cover !important;
      overflow-x: hidden !important;
      margin-top: -80px;
      padding-top: 100px;
      position: relative;
      min-height: 100vh;
    }

    /* Layout móvil pequeño */
    body:has(table#rankings.rakings-deidad-customs) .rankings-layout {
      padding: 0 10px;
      gap: 15px;
    }

    body:has(table#rankings.rakings-deidad-customs) .rankings-sidebar {
      padding: 15px;
    }

    body:has(table#rankings.rakings-deidad-customs) .rankings-sidebar h3 {
      font-size: 16px;
      margin-bottom: 15px;
    }

    body:has(table#rankings.rakings-deidad-customs) .rankings-categories a {
      padding: 8px 12px;
      font-size: 12px;
    }
    
    /* Responsive para móviles pequeños en módulos de hunt */
    body:has(.hunt-rankings-section) {
      background: #130600 url('../img/CoverNew.png') repeat-y center center scroll !important;
      background-size: cover !important;
      overflow-x: hidden !important;
      margin-top: -80px;
      padding-top: 100px;
      position: relative;
      min-height: 100vh;
    }
    
    /* Overlay para el módulo rankings */
    body:has(table#rankings.rakings-deidad-customs)::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      min-height: 100vh;
      background: linear-gradient(
        135deg, 
        rgba(7, 2, 0, 0.75) 0%, 
        rgba(19, 6, 0, 0.65) 30%, 
        rgba(26, 12, 0, 0.55) 60%, 
        rgba(7, 2, 0, 0.75) 100%
      );
      backdrop-filter: blur(1px);
      -webkit-backdrop-filter: blur(1px);
      z-index: -1;
      pointer-events: none;
    }
    
    /* Asegurar que html también tenga el fondo correcto en móviles */
    html:has(body:has(table#rankings.rakings-deidad-customs)) {
      background-color: #130600 !important;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .page-title {
      margin-bottom: 30px;
      font-size: 24px;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .rankings-class-filter {
      padding: 12px;
      margin: 0 5px 20px 5px;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .table-responsive {
      padding: 10px 10px 35px 10px;
      margin: 0 5px 25px 5px;
      /* Habilitar scroll horizontal independiente en móviles */
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      /* Scrollbar personalizada para móviles */
      scrollbar-width: thin;
      scrollbar-color: rgba(177, 119, 20, 0.4) transparent;
    }
    
    /* Scrollbar webkit para móviles */
    body:has(table#rankings.rakings-deidad-customs) .table-responsive::-webkit-scrollbar {
      height: 4px;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .table-responsive::-webkit-scrollbar-track {
      background: rgba(26, 12, 0, 0.3);
      border-radius: 2px;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .table-responsive::-webkit-scrollbar-thumb {
      background: rgba(177, 119, 20, 0.6);
      border-radius: 2px;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .table-responsive::-webkit-scrollbar-thumb:hover {
      background: rgba(177, 119, 20, 0.8);
    }
    
    /* Asegurar que la tabla tenga ancho mínimo para activar scroll en móviles */
    body:has(table#rankings.rakings-deidad-customs) table#rankings {
      min-width: 500px; /* Ancho mínimo para móviles */
    }
    
    /* Contenedor del paginador optimizado para móviles */
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate {
      position: relative;
      margin: 15px 0 10px 0;
      padding: 0 20px 0 5px; /* Espacio a la derecha para el indicador */
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      display: flex;
      justify-content: flex-start; /* Alineado a la izquierda para scroll horizontal */
      align-items: center;
      max-width: 100%;
      /* Estilo de scrollbar personalizado para móviles */
      scrollbar-width: thin;
      scrollbar-color: rgba(177, 119, 20, 0.3) transparent;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate::-webkit-scrollbar {
      height: 3px;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate::-webkit-scrollbar-track {
      background: transparent;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate::-webkit-scrollbar-thumb {
      background: rgba(177, 119, 20, 0.3);
      border-radius: 2px;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button {
      padding: 5px 6px;
      margin: 0 1px;
      font-size: 11px;
      min-width: 24px;
      outline: none !important;
      box-shadow: none !important;
      flex-shrink: 0;
      border-radius: 3px;
      font-weight: 500;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
      background: rgba(177, 119, 20, 0.25) !important;
      border-color: rgba(177, 119, 20, 0.6) !important;
      color: #D4AF37 !important;
      outline: none !important;
      box-shadow: 0 1px 4px rgba(177, 119, 20, 0.2) !important;
      transform: none; /* Sin animaciones en móviles */
    }
    
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate .paginate_button.current {
      background: rgba(177, 119, 20, 0.9) !important;
      border-color: #3b82f6 !important;
      color: #ffffff !important;
      outline: none !important;
      box-shadow: 0 1px 4px rgba(177, 119, 20, 0.4) !important;
      font-weight: 600;
    }
    
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_info {
      font-size: 10px;
      padding: 5px 8px;
      margin: 10px auto 8px auto;
      max-width: 95%;
      text-align: center;
      line-height: 1.3;
    }
    
    /* Hover muy sutil para móviles */
    body:has(table#rankings.rakings-deidad-customs) table#rankings tbody tr:hover {
      transform: none; /* Sin transform en móviles para mejor rendimiento */
      box-shadow: 0 1px 5px rgba(177, 119, 20, 0.1);
    }
    
    /* Indicador visual sutil de scroll horizontal en el paginador */
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate::after {
      content: '→';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(177, 119, 20, 0.4);
      font-size: 12px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    /* Mostrar indicador cuando hay overflow */
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate[style*="overflow"] ::after,
    body:has(table#rankings.rakings-deidad-customs) .dataTables_wrapper .dataTables_paginate:hover::after {
      opacity: 1;
    }
  }
  
  
  
  /* ===============================
     MÓDULO DE REGISTRO - DISEÑO CONSISTENTE
     =============================== */
  
  /* Prevenir scroll horizontal cuando el módulo registro está activo */
  body:has(.register-content) {
    overflow-x: hidden;
  }
  
  /* Fallback para navegadores que no soportan :has() */
  @supports not selector(:has(*)) {
    .register-content {
      overflow-x: hidden;
    }
  }
  
  /* Ocultar breadcrumb cuando está el módulo de registro activo */
  body:has(.register-content) .breadcrumb {
    display: none !important;
  }
  
  /* Fallback para navegadores que no soportan :has() */
  @supports not selector(:has(*)) {
    .register-content ~ .breadcrumb {
      display: none !important;
    }
  }
  
  /* Contenedor principal con fondo de imagen que cubre todo */
  .register-content {
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: -140px; /* Compensación menor para evitar scroll */
    padding-top: 120px; /* Menos padding superior */
    width: 100vw;
    background: url('../img/cover_page.jpg') repeat-y center center;
    background-size: cover;
    background-attachment: fixed;
    padding-bottom: 40px; /* Reducido para menos scroll */
    padding-left: 20px;
    padding-right: 20px;
    min-height: 100vh; /* Aumentado para cubrir toda la pantalla */
  }
  
  /* Overlay con transparencia para el fondo */
  .register-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      rgba(10, 15, 30, 0.88) 0%,
      rgba(17, 24, 39, 0.78) 40%,
      rgba(2, 6, 23, 0.88) 100%
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1;
  }
  
  
  
  /* Asegurar que el contenido esté por encima del overlay */
  .register-content > * {
    position: relative;
    z-index: 2;
  }
  
  /* Título del registro azul marino oscuro - copiado del estilo rankings */
  .register-content .page-title {
    text-align: center;
    color: #f1f5f9;
    text-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.8),
      0 0 15px rgba(59, 130, 246, 0.3);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 40px 0 30px 0; /* Mismo margen que rankings */
    position: relative;
    z-index: 10;
  }
  
  
  
  /* Línea separadora del título azul marino */
  .register-content .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(59, 130, 246, 0.4) 20%,
      rgba(59, 130, 246, 0.7) 50%,
      rgba(59, 130, 246, 0.4) 80%,
      transparent 100%
    );
    border-radius: 1px;
    z-index: 3;
  }
  
  /* Ajustar el formulario de registro para que no tenga fondo duplicado */
  .register-content .sign {
    background: none;
    margin-top: 0;
    padding-top: 0;
    min-height: auto;
  }
  /* Reubicar elementos informativos en una fila compacta en desktop */
  .register-content .welcome-kit-notice-modern,
  .register-content .launcher-progress-notice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .register-content .welcome-kit-notice-modern > *,
  .register-content .launcher-progress-notice > * {
    grid-column: 1 / -1;
  }
  @media (min-width: 992px) {
    .register-content .welcome-kit-notice-modern,
    .register-content .launcher-progress-notice {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  /* Contenedor del formulario sin separador inferior propio */
  .register-content .sign__content {
    position: relative;
    margin-bottom: 0;
  }
  /* Formulario de registro - estilo moderno y más cuadrado */
  .register-content .sign__content {
    max-width: 900px; /* Más ancho para evitar scroll */
    margin-left: auto;
    margin-right: auto;
  }
  .register-content .sign__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 12px; /* Menos separación */
    padding: 22px; /* Menos padding */
    background: rgba(10, 15, 25, 0.7);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.25) inset;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .register-content .form-group,
  .register-content .launcher-progress-notice,
  .register-content .welcome-kit-notice-modern {
    grid-column: 1 / -1;
  }
  .register-content .sign__input {
    width: 100%;
    height: 44px; /* Un poco más compacto */
    padding: 10px 12px;
    color: #e5e7eb;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .register-content .sign__input::placeholder {
    color: rgba(226, 232, 240, 0.55);
  }
  .register-content .sign__input:focus {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(2, 6, 23, 0.75);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  }
  /* Forzar ciertos campos a ocupar el ancho total del grid */
  .register-content .sign__group--full {
    grid-column: 1 / -1;
  }
  .register-content .sign__btn {
    grid-column: 1 / -1;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(180deg, #142543 0%, #1a2f55 100%);
    color: #f8fafc;
    border: 1px solid rgba(59, 130, 246, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
  }
  .register-content .sign__btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #1a2f55 0%, #203a66 100%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.45);
    filter: none;
  }
  .register-content .sign__btn:active {
    transform: translateY(0);
    background: linear-gradient(180deg, #10223f 0%, #172b4d 100%);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.4);
  }
  /* ReCaptcha y texto legal a ancho completo */
  .register-content .form-group .g-recaptcha,
  .register-content .form-group .col-sm-12 {
    width: 100%;
  }
  /* Logo del servidor en el formulario de registro */
  .register-content .register-logo {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
  }
  .register-content .register-logo img {
    height: 80px;
    width: auto;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
  }
  /* Tipografía del módulo registro en blanco y gris plateado */
  .register-content,
  .register-content .sign__form,
  .register-content .sign__input {
    color: #e5e7eb;
  }
  .register-content a {
    color: #cbd5e1;
  }
  .register-content a:hover {
    color: #f1f5f9;
  }
  /* Texto legal y enlaces en gris plateado */
  .register-content .form-group .col-sm-12 {
    color: #e2e8f0 !important;
    text-align: center;
  }
  .register-content .form-group .col-sm-12 a {
    color: #cbd5e1 !important;
    text-decoration: underline;
  }
  .register-content .form-group .col-sm-12 a:hover {
    color: #f1f5f9 !important;
    text-decoration: none;
  }
  /* Ajustar posibles estilos antiguos dorados del registro */
  .register-content .sign__text,
  .register-content .sign__text a {
    color: #cbd5e1;
  }
  .register-content .sign__text a:hover {
    color: #f1f5f9;
  }
  /* Responsive: 1 columna en pantallas estrechas */
  @media (max-width: 768px) {
    .register-content .sign__form {
      grid-template-columns: 1fr;
      padding: 18px;
      border-radius: 14px;
    }
    .register-content {
      background-attachment: scroll;
      margin-top: -120px;
      padding-top: 140px;
    }
    
    .register-content .page-title {
      margin: 40px 0 30px 0;
      font-size: 28px;
    }
  }
  @media (max-width: 480px) {
    .register-content {
      margin-top: -80px;
      padding-top: 100px;
    }
    
    .register-content .page-title {
      margin: 40px 0 30px 0;
      font-size: 24px;
    }
  }
  
  /* ===============================
     MÓDULO DE LOGIN - ESTRUCTURA IDÉNTICA AL REGISTER
     =============================== */
  
  /* Aplicar overflow hidden al body cuando hay login-content */
  body:has(.login-content) {
    overflow-x: hidden;
  }
  
  /* Fallback para navegadores que no soportan :has() */
  @supports not selector(:has(*)) {
    .login-content {
      overflow-x: hidden;
    }
  }
  
  /* Ocultar breadcrumb cuando está el módulo de login activo */
  body:has(.login-content) .breadcrumb {
    display: none !important;
  }
  
  /* Fallback para navegadores que no soportan :has() */
  @supports not selector(:has(*)) {
    .login-content ~ .breadcrumb {
      display: none !important;
    }
  }
  
  /* Contenedor principal con fondo de imagen que cubre todo - SIN FRANJAS AZULES */
  .login-content {
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: -140px;
    margin-bottom: -40px; /* Reducido para mejor transición con el footer */
    padding-top: 120px;
    padding-bottom: 60px; /* Reducido para evitar superposición extraña */
    padding-left: 20px;
    padding-right: 20px;
    width: 100vw;
    height: 100vh;
    min-height: 100vh; /* Restaurado a valor normal */
    background: url('../img/cover_page.jpg') center center / cover repeat-y fixed;
    /* Eliminar cualquier color de fondo que cause franjas */
    background-color: transparent;
    /* Centrado vertical mejorado */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Asegurar que cubra completamente */
    overflow: hidden;
  }
  
  /* Overlay con transparencia para el fondo - SIN FRANJAS AZULES */
  .login-content::before {
    content: '';
    position: absolute;
    top: -15px; /* Reducido para mejor control */
    left: -15px; /* Reducido para mejor control */
    right: -15px; /* Reducido para mejor control */
    bottom: -15px; /* Reducido para evitar superposición con footer */
    width: calc(100% + 30px);
    height: calc(100% + 30px);
    background: linear-gradient(135deg, rgba(10, 15, 30, 0.88) 0%, rgba(17, 24, 39, 0.78) 40%, rgba(2, 6, 23, 0.88) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1;
    /* NO usar background-color sólido que cause franjas */
  }
  
  /* Asegurar que el contenido esté por encima del overlay */
  .login-content > * {
    position: relative;
    z-index: 2;
  }

  /* Mejorar la transición entre login y footer */
  body:has(.login-content) .footer {
    margin-top: 0 !important;
    position: relative;
    z-index: 3;
    border-top: 1px solid rgba(59, 130, 246, 0.2) !important;
  }
  
  /* Título del login azul marino oscuro - IDÉNTICO AL REGISTER */
  .login-content .page-title {
    text-align: center;
    color: #f1f5f9;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(59, 130, 246, 0.3);
    margin: 40px 0 30px 0; /* Menos altura vertical */
    position: relative;
    z-index: 10;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }
  
  /* Línea separadora del título azul marino - IDÉNTICA AL REGISTER */
  .login-content .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(59, 130, 246, 0.4) 20%,
      rgba(59, 130, 246, 0.7) 50%,
      rgba(59, 130, 246, 0.4) 80%,
      transparent 100%
    );
    border-radius: 1px;
    z-index: 3;
  }
  
  /* Ajustar el formulario de login - IDÉNTICO AL REGISTER */
  .login-content .sign {
    background: none;
    margin-top: 0;
    padding-top: 0;
    min-height: auto;
  }
  
  /* Contenedor del formulario de login - IDÉNTICO AL REGISTER */
  .login-content .sign__content {
    position: relative;
    margin-bottom: 0;
    margin-top: 0;
    max-width: 900px; /* Más ancho para evitar scroll */
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Formulario con estilos EXACTOS del register */
  .login-content .sign__form {
    padding: 22px; /* Menos padding */
    background: rgba(10, 15, 25, 0.7);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.25) inset;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  
  /* Inputs del login - EXACTOS AL REGISTER */
  .login-content .sign__input {
    width: 100%;
    height: 44px; /* Un poco más compacto */
    padding: 10px 12px;
    color: #e5e7eb;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  
  .login-content .sign__input::placeholder {
    color: rgba(226, 232, 240, 0.55);
  }
  
  .login-content .sign__input:focus {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(2, 6, 23, 0.75);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  }
  
  /* Botón del login - EXACTO AL REGISTER */
  .login-content .sign__btn {
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(180deg, #142543 0%, #1a2f55 100%);
    color: #f8fafc;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(20, 37, 67, 0.4);
    cursor: pointer;
    width: 100%;
    margin-top: 15px;
  }
  
  .login-content .sign__btn:hover {
    background: linear-gradient(180deg, #1a2f55 0%, #2563eb 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
  }
  
  .login-content .sign__btn:active {
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(20, 37, 67, 0.4);
  }
  
  /* Textos del login - IDÉNTICOS AL REGISTER */
  .login-content .sign__text,
  .login-content .sign__text a {
    color: rgba(203, 213, 225, 0.9) !important;
  }
  
  .login-content .sign__text a:hover {
    color: #93c5fd !important;
  }
  
  /* Asegurar cobertura completa en diferentes resoluciones - SIN FRANJAS */
  @media (min-width: 1920px) {
    .login-content {
      /* Para pantallas muy grandes, usar background-size: 100% 100% para estirar */
      background: url('../img/cover_page.jpg') center center / 100% 100% repeat-y fixed;
      background-color: transparent;
      height: 100vh;
      min-height: 100vh; /* Restaurado a valor normal */
      padding-bottom: 70px; /* Ajustado para mejor transición */
      margin-bottom: -50px; /* Ajustado para mejor transición con footer */
    }
  }
  
  @media (max-width: 1366px) and (min-width: 769px) {
    .login-content {
      /* Para pantallas medianas, asegurar cobertura con cover y fallback */
      background: url('../img/cover_page.jpg') center center / cover repeat-y fixed;
      background-color: transparent;
      height: 100vh;
      min-height: 100vh; /* Restaurado a valor normal */
      padding-bottom: 65px; /* Ajustado para mejor transición */
      margin-bottom: -45px; /* Ajustado para mejor transición con footer */
    }
  }
  
  /* Responsive para login - SIN FRANJAS AZULES */
  @media (max-width: 768px) {
    .login-content {
      background: url('../img/cover_page.jpg') center center / cover repeat-y scroll;
      background-color: transparent;
      margin-top: -120px;
      margin-bottom: -35px; /* Ajustado para mejor transición con footer */
      padding-top: 100px;
      padding-bottom: 55px; /* Ajustado para evitar superposición */
      height: 100vh;
      min-height: 100vh; /* Restaurado a valor normal */
      justify-content: center;
      overflow: hidden;
    }
    
    .login-content .page-title {
      margin: 20px 0 15px 0;
      font-size: 28px;
    }
  }
  
  @media (max-width: 480px) {
    .login-content {
      background: url('../img/cover_page.jpg') center center / cover repeat-y scroll;
      background-color: transparent;
      margin-top: -100px;
      margin-bottom: -30px; /* Ajustado para mejor transición con footer */
      padding-top: 80px;
      padding-bottom: 50px; /* Ajustado para evitar superposición */
      height: 100vh;
      min-height: 100vh; /* Restaurado a valor normal */
      justify-content: center;
      overflow: hidden;
    }
    
    .login-content .page-title {
      margin: 15px 0 10px 0;
      font-size: 24px;
    }
    
    .login-content .sign__form {
      padding: 25px 20px;
    }
  }
  
  /* Fallback adicional para navegadores que no soportan vh */
  @supports not (height: 100vh) {
    .login-content {
      min-height: 100%;
      height: auto;
    }
  }
  
  
  /* ===============================
     MÓDULO USERCP/MYACCOUNT - FONDO DE IMAGEN
     =============================== */
  
  /* Aplicar fondo sólido azul al módulo myaccount - SIN IMÁGENES */
  body:has(.card-info-character) {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
    overflow-x: hidden !important;
    margin-top: -120px;
    padding-top: 140px;
    position: relative;
    min-height: 100vh;
  }
  
  /* Overlay sutil para el módulo myaccount - AZUL LIMPIO */
  body:has(.card-info-character)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: linear-gradient(
      135deg, 
      rgba(15, 23, 42, 0.3) 0%, 
      rgba(30, 41, 59, 0.2) 50%, 
      rgba(15, 23, 42, 0.3) 100%
    );
    z-index: -1;
    pointer-events: none;
  }
  
  /* Ocultar breadcrumb en myaccount */
  body:has(.card-info-character) .breadcrumb {
    display: none !important;
  }
  
  /* Estilizar títulos del myaccount - AZUL LIMPIO */
  body:has(.card-info-character) .page-title {
    text-align: center;
    color: #f1f5f9;
    text-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 15px rgba(59, 130, 246, 0.4);
    margin: 20px 0 40px 0;
    position: relative;
    z-index: 10;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  
  
  /* ===============================
     MÓDULO MYACCOUNT - DISEÑO DASHBOARD MODERNO
     =============================== */

  /* Contenedor principal tipo dashboard */
  body:has(.collection) .row-grid {
    background: rgba(15, 23, 42, 0.4) !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 25px !important;
    margin: 20px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    position: relative !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Cards tipo dashboard - diseño completamente nuevo */
  body:has(.collection) .collection {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin: 0 !important;
    min-height: 140px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Efecto de brillo sutil en las cards */
  body:has(.collection) .collection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, transparent 50%, rgba(96, 165, 250, 0.02) 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* Hover effect moderno y sutil */
  body:has(.collection) .collection:hover {
    transform: translateY(-4px) scale(1.02) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 41, 59, 0.9) 100%) !important;
    box-shadow: 
      0 12px 30px rgba(0, 0, 0, 0.4),
      0 0 25px rgba(59, 130, 246, 0.3) !important;
  }

  /* Ocultar completamente todas las imágenes y elementos visuales */
  body:has(.collection) .collection img,
  body:has(.collection) .collection .collection__image,
  body:has(.collection) .collection .collection__bg,
  body:has(.collection) .collection .collection__cover,
  body:has(.collection) .collection .collection__avatar,
  body:has(.collection) .collection .collection__avatar img,
  body:has(.collection) .collection .collection__meta .collection__avatar,
  body:has(.collection) .collection [style*="background-image"],
  body:has(.collection) .collection [data-bg] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Forzar eliminación de backgrounds inline */
  body:has(.collection) .collection * {
    background-image: none !important;
  }

  body:has(.collection) .collection > div[style],
  body:has(.collection) .collection > a[style] {
    background: none !important;
    background-image: none !important;
  }

  /* Ocultar la barra superior del módulo MyAccount */
  body:has(.collection) .module-header-bar {
    display: none !important;
  }

  /* Título de las cards - estilo dashboard */
  body:has(.collection) .collection__name,
  body:has(.collection) .collection .collection__name {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    opacity: 0.8 !important;
    position: relative !important;
    text-align: left !important;
    z-index: 2 !important;
  }

  /* Botones/labels de estado */
  body:has(.collection) .collection__number,
  body:has(.collection) .collection .collection__number {
    position: relative !important;
    z-index: 2 !important;
    margin-top: auto !important;
  }

  /* Eliminar decoraciones excesivas */
  body:has(.collection) .collection__name::before,
  body:has(.collection) .collection__name::after {
    display: none !important;
  }

  /* Responsive para contenedor de fotos */
  @media (max-width: 768px) {
    body:has(.collection) .collection {
      padding: 20px !important;
      min-height: 120px !important;
      margin-bottom: 15px !important;
    }
    
    body:has(.collection) .collection__name {
      font-size: 1rem !important;
    }
    
    body:has(.collection) .collection__name::before,
    body:has(.collection) .collection__name::after {
      display: none !important;
    }
    
    body:has(.collection) .collection::after {
      width: 35px !important;
      height: 35px !important;
      font-size: 16px !important;
      top: 12px !important;
      right: 12px !important;
    }
    
    body:has(.collection) .collection__status {
      top: 12px !important;
      left: 12px !important;
      font-size: 0.65rem !important;
      padding: 3px 6px !important;
    }
  }

  /* Animaciones sparkle eliminadas */

  /* Crear iconos con CSS puro para cada tipo de card */
  body:has(.collection) .collection::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    z-index: 2;
  }

  /* Icono para Account Status */
  body:has(.collection) .collection:nth-child(1)::after {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
  }

  /* Icono para VIP Status */
  body:has(.collection) .collection:nth-child(2)::after {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
  }

  /* Icono para Online Status */
  body:has(.collection) .collection:nth-child(3)::after {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
  }

  /* Icono para Change Password */
  body:has(.collection) .collection:nth-child(4)::after {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
  }

  body:has(.collection) .collection__number {
    position: relative !important;
    z-index: 3 !important;
    color: #93c5fd !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-shadow: 
      0 1px 3px rgba(0, 0, 0, 0.7),
      0 0 10px rgba(147, 197, 253, 0.5) !important;
    text-align: center !important;
    background: rgba(59, 130, 246, 0.1) !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    display: inline-block !important;
    min-width: 60px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  body:has(.collection) .collection__number::before {
    content: '#';
    opacity: 0.6;
    margin-right: 2px;
  }

  body:has(.collection) .collection__number:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
  }

  /* Indicadores de estado mejorados */
  body:has(.collection) .collection__status {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background: rgba(16, 185, 129, 0.9) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 3 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }

  body:has(.collection) .collection__status.offline {
    background: rgba(239, 68, 68, 0.9) !important;
  }

  body:has(.collection) .collection__status.pending {
    background: rgba(245, 158, 11, 0.9) !important;
  }

  body:has(.collection) .collection__avatar {
    display: none !important;
  }

  /* Descripción y subtítulos del contenedor */
  body:has(.collection) .collection__description {
    color: #cbd5e1 !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    margin-top: 8px !important;
    opacity: 0.9 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body:has(.collection) .collection__subtitle {
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
    opacity: 0.8 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Labels modernos rediseñados */
  body:has(.collection) .label-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-size: 0.8rem !important;
    box-shadow: 
      0 4px 15px rgba(16, 185, 129, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body:has(.collection) .label-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-size: 0.8rem !important;
    box-shadow: 
      0 4px 15px rgba(239, 68, 68, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body:has(.collection) .label-info {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-size: 0.8rem !important;
    box-shadow: 
      0 4px 15px rgba(59, 130, 246, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body:has(.collection) .label-info:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 
      0 6px 20px rgba(59, 130, 246, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    color: #ffffff !important;
  }

  body:has(.collection) .label-default {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    border: 1px solid rgba(107, 114, 128, 0.4) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-size: 0.8rem !important;
    box-shadow: 
      0 4px 15px rgba(107, 114, 128, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 3 !important;
  }

  /* Cards de personajes - Diseño azul moderno */
  body:has(.collection) .card-info-character {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    box-shadow: 
      0 10px 25px rgba(0, 0, 0, 0.3),
      0 0 15px rgba(59, 130, 246, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    overflow: hidden;
  }

  body:has(.collection) .card-info-character::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, rgba(96, 165, 250, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
  }

  body:has(.collection) .card-info-character:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 
      0 15px 35px rgba(0, 0, 0, 0.4),
      0 0 25px rgba(59, 130, 246, 0.2);
  }

  /* Textos de las cards de personajes */
  body:has(.collection) .card-info-character .character-name,
  body:has(.collection) .card-info-character .character-class {
    color: #f1f5f9 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    font-weight: 600 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body:has(.collection) .card-info-character .info-char-small span {
    color: #cbd5e1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body:has(.collection) .card-info-character .bottom-section .title {
    color: #60a5fa !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    font-weight: 700 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body:has(.collection) .card-info-character .bottom-section .big-text {
    color: #e2e8f0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Progress bars azules modernas */
  body:has(.collection) .progress {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body:has(.collection) .progress-bar-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
  }

  body:has(.collection) .progress-bar-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
  }

  body:has(.collection) .progress-bar-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
  }

  body:has(.collection) .progress-bar-info {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4) !important;
  }

  /* Tabla de historial de conexiones - Estilo azul moderno */
  body:has(.collection) .rakings-deidad-customs {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%) !important;
    border: 2px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 
      0 10px 25px rgba(0, 0, 0, 0.3),
      0 0 15px rgba(59, 130, 246, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body:has(.collection) .rakings-deidad-customs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, rgba(96, 165, 250, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
  }

  body:has(.collection) .rakings-deidad-customs tr:first-child td {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(30, 41, 59, 0.8) 100%) !important;
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    border-bottom: 2px solid rgba(59, 130, 246, 0.4) !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 12px 16px !important;
  }

  body:has(.collection) .rakings-deidad-customs tr:not(:first-child) td {
    color: #e2e8f0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2) !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 10px 16px !important;
  }

  body:has(.collection) .rakings-deidad-customs tr:not(:first-child):hover td {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #f1f5f9 !important;
  }
  
  /* Responsive para myaccount */
  @media (max-width: 768px) {
    body:has(.collection) {
      background-attachment: scroll !important;
      margin-top: -120px;
      padding-top: 140px;
      min-height: 100vh;
    }
    
    body:has(.collection)::before {
      position: absolute;
      width: 100%;
      height: 100%;
      min-height: 100vh;
    }
    
    body:has(.collection) .page-title {
      margin: 30px 0 30px 0;
      font-size: 28px;
    }
  }
  
  @media (max-width: 480px) {
    body:has(.collection) {
      background-attachment: scroll !important;
      margin-top: -80px;
      padding-top: 100px;
      min-height: 100vh;
    }
    
    body:has(.collection)::before {
      position: absolute;
      width: 100%;
      height: 100%;
      min-height: 100vh;
    }
    
    body:has(.collection) .page-title {
      margin: 25px 0 25px 0;
      font-size: 24px;
    }
  }
  
  /* Media queries específicas para contenedores del módulo myaccount */
  @media (max-width: 768px) {
    /* Contenedores principales responsive */
    body:has(.collection) .col-md-9,
    body:has(.collection) .col-lg-9 {
      width: calc(100% - 20px) !important;
      max-width: 100% !important;
      margin: 0 auto !important;
      padding: 20px !important;
      border-radius: 15px !important;
    }
    
    /* Row-grid responsive */
    body:has(.collection) .row-grid {
      padding: 15px !important;
      margin-bottom: 20px !important;
      border-radius: 12px !important;
    }
    
    /* Currencies responsive */
    body:has(.collection) .currencies li {
      height: 35px !important;
      padding: 6px 10px !important;
      margin-bottom: 6px !important;
      border-radius: 10px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }
    
    body:has(.collection) .currencies span {
      font-size: 13px !important;
      font-weight: 600 !important;
    }
    
    /* Buycurrencies responsive */
    body:has(.collection) .buycurrencies {
      width: 80px !important;
      height: 28px !important;
      padding: 4px 8px !important;
      font-size: 11px !important;
      margin-left: 10px !important;
      border-radius: 8px !important;
    }
  }
  
  @media (max-width: 480px) {
    /* Contenedores principales móviles */
    body:has(.collection) .col-md-9,
    body:has(.collection) .col-lg-9 {
      width: calc(100% - 15px) !important;
      padding: 15px !important;
      margin: 0 auto !important;
      border-radius: 12px !important;
    }
    
    /* Row-grid móviles */
    body:has(.collection) .row-grid {
      padding: 12px !important;
      margin-bottom: 15px !important;
      border-radius: 10px !important;
    }
    
    /* Currencies móviles */
    body:has(.collection) .currencies li {
      height: 32px !important;
      padding: 5px 8px !important;
      margin-bottom: 5px !important;
      border-radius: 8px !important;
      font-size: 12px !important;
    }
    
    body:has(.collection) .currencies span {
      font-size: 12px !important;
      font-weight: 600 !important;
    }
    
    /* Buycurrencies móviles */
    body:has(.collection) .buycurrencies {
      width: 70px !important;
      height: 25px !important;
      padding: 3px 6px !important;
      font-size: 10px !important;
      margin-left: 8px !important;
      border-radius: 6px !important;
      letter-spacing: 0.3px !important;
    }
    
    /* Contenedores principales más compactos */
    body:has(.collection) .container,
    body:has(.collection) .container-fluid {
      padding: 10px !important;
    }
    
    /* Breadcrumb responsive específico */
    body:has(.collection) .breadcrumb {
      padding: 8px 15px !important;
      margin-bottom: 15px !important;
      border-radius: 10px !important;
    }
  }
  
  /* Media query específica para pantallas muy pequeñas myaccount */
  @media (max-width: 360px) {
    body:has(.collection) .col-md-9,
    body:has(.collection) .col-lg-9 {
      width: calc(100% - 10px) !important;
      padding: 10px !important;
      border-radius: 8px !important;
    }
    
    body:has(.collection) .row-grid {
      padding: 8px !important;
      margin-bottom: 10px !important;
    }
    
    body:has(.collection) .currencies li {
      height: 28px !important;
      padding: 4px 6px !important;
      font-size: 11px !important;
    }
    
    body:has(.collection) .buycurrencies {
      width: 60px !important;
      height: 22px !important;
      font-size: 9px !important;
      padding: 2px 4px !important;
    }
    
    body:has(.collection) .page-title {
      font-size: 18px !important;
      margin: 15px 0 !important;
    }
  }
  
  /* ÚNICO CONTENEDOR FLEX - COMPACTO */
  body:has(.collection) .usercp li a {
    color: #ffffff !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 3 !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  /* Iconos del menú lateral - COMPACTOS */
  body:has(.collection) .usercp li img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    z-index: 4 !important;
    object-fit: cover !important;
  }

  body:has(.collection) .usercp li span,
  body:has(.collection) .usercp li div {
    color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 3 !important;
  }

  /* Sidebar usercp moderno azul para myaccount - COMPACTO */
  body:has(.collection) .usercp li {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    border-radius: 10px !important;
    box-shadow: 
      0 4px 15px rgba(0, 0, 0, 0.4),
      0 0 15px rgba(59, 130, 246, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
    height: 50px !important;
  }

  body:has(.collection) .usercp li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, rgba(96, 165, 250, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
  }

  body:has(.collection) .usercp li a p {
    color: #ffffff !important;
    text-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 15px rgba(59, 130, 246, 0.3) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    position: relative !important;
    z-index: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    flex: 1 !important;
    font-size: 0.9rem !important;
  }

  body:has(.collection) .usercp li a p font {
    color: #93c5fd !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
    font-weight: 500 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 0.9 !important;
    font-size: 0.75rem !important;
    margin-top: 1px !important;
    line-height: 1 !important;
  }

  body:has(.collection) .usercp li:hover {
    transform: translateY(-3px) scale(1.01) !important;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(51, 65, 85, 0.95) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.7) !important;
    box-shadow: 
      0 15px 40px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(59, 130, 246, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  }

  /* Hover effect para el contenedor de currencies */
  body:has(.collection) .currencies:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    box-shadow: 
      0 10px 30px rgba(0, 0, 0, 0.5),
      0 0 25px rgba(59, 130, 246, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  }

  body:has(.collection) .usercp li:hover a p {
    color: #ffffff !important;
    text-shadow: 
      0 2px 6px rgba(0, 0, 0, 0.9),
      0 0 15px rgba(59, 130, 246, 0.4) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body:has(.collection) .usercp li:hover a p font {
    color: #93c5fd !important;
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.3) !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Panel lateral moderno para myaccount - .author__meta mejorado */
  body:has(.collection) .author__meta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 25px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-radius: 20px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 
      0 15px 35px rgba(0, 0, 0, 0.4),
      0 0 25px rgba(59, 130, 246, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    height: auto;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
  }

  body:has(.collection) .author__meta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 60%),
      radial-gradient(circle at 80% 70%, rgba(96, 165, 250, 0.1) 0%, transparent 60%),
      linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.05) 50%, transparent 70%);
    pointer-events: none;
    z-index: 1;
  }

  body:has(.collection) .author__meta > * {
    position: relative;
    z-index: 2;
  }

  /* Título del panel lateral */
  body:has(.collection) .author__meta h3,
  body:has(.collection) .author__meta .author__name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 15px 0;
    text-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 15px rgba(59, 130, 246, 0.3);
    letter-spacing: -0.5px;
    text-align: center;
    width: 100%;
  }

  /* Avatar del usuario en el panel */
  body:has(.collection) .author__meta .author__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(59, 130, 246, 0.4);
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.3),
      0 0 15px rgba(59, 130, 246, 0.2);
    margin: 0 auto 20px auto;
    transition: all 0.3s ease;
  }

  body:has(.collection) .author__meta .author__avatar:hover {
    transform: scale(1.05);
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 
      0 12px 30px rgba(0, 0, 0, 0.4),
      0 0 20px rgba(59, 130, 246, 0.3);
  }

  body:has(.collection) .author__meta .author__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Información del usuario */
  body:has(.collection) .author__meta .author__text,
  body:has(.collection) .author__meta p {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 15px 0;
    text-align: center;
    font-weight: 500;
  }

  /* Enlaces y botones en el panel */
  body:has(.collection) .author__meta a {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: inline-block;
    margin: 5px 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  body:has(.collection) .author__meta a:hover {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);
  }

  /* Stats o información adicional */
  body:has(.collection) .author__meta .author__stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 15px;
  }

  body:has(.collection) .author__meta .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(59, 130, 246, 0.1);
  }

  body:has(.collection) .author__meta .stat-label {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
  }

  body:has(.collection) .author__meta .stat-value {
    color: #f1f5f9;
    font-weight: 700;
    font-size: 0.9rem;
  }

  /* Responsive para el panel lateral */
  @media (max-width: 768px) {
    body:has(.collection) .author__meta {
      padding: 20px;
      margin-bottom: 15px;
    }
    
    body:has(.collection) .author__meta .author__avatar {
      width: 60px;
      height: 60px;
    }
    
    body:has(.collection) .author__meta h3,
    body:has(.collection) .author__meta .author__name {
      font-size: 1.2rem;
    }
  }

  /* Contenedor unificado para currencies - COMPACTO */
  body:has(.collection) .currencies {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    border-radius: 10px !important;
    box-shadow: 
      0 4px 15px rgba(0, 0, 0, 0.4),
      0 0 15px rgba(59, 130, 246, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  body:has(.collection) .currencies::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, rgba(96, 165, 250, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
  }

  /* Items de currencies individuales - COMPACTOS */
  body:has(.collection) .currencies li {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 6px !important;
    position: relative !important;
    overflow: visible !important;
    justify-content: space-between !important;
    color: #ffffff !important;
    z-index: 2 !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1) !important;
  }

  body:has(.collection) .currencies li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  /* Área de contenido de currencies - COMPACTO */
  body:has(.collection) .currencies li span {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 15px rgba(59, 130, 246, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 3 !important;
    position: relative !important;
  }

  /* Iconos de currencies compactos */
  body:has(.collection) .currencies li img {
    width: 22px !important;
    height: 22px !important;
    border-radius: 4px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    z-index: 3 !important;
    object-fit: cover !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  }

  /* Botones BUY compactos - ancho reducido */
  body:has(.collection) .buycurrencies {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 1) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.7) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    padding: 6px 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 
      0 3px 12px rgba(59, 130, 246, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 3 !important;
    position: relative !important;
    min-width: 60px !important;
    max-width: 70px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  body:has(.collection) .buycurrencies:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 1) 0%, rgba(37, 99, 235, 1) 100%) !important;
    border-color: rgba(59, 130, 246, 0.9) !important;
    transform: translateY(-1px) scale(1.01) !important;
    box-shadow: 
      0 6px 20px rgba(59, 130, 246, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  }
  
  /* ============================
     PÁGINA DE INICIO (HOME PAGE) - ESQUEMA AZUL
     ============================ */
  
  /* Asegurar fondo oscuro azul para html cuando estamos en home */
  html:has(body:has(#section-1)) {
    background-color: #0a0f1e !important;
    width: 100%;
    height: 100%;
  }
  
  /* Detectar home page usando #section-1 - sin imágenes ni overlays globales */
  body:has(#section-1) {
    background: #0a0f1e !important; /* solo color sólido, el slide maneja su overlay */
    min-height: 100vh;
    position: relative;
    width: 100%;
    overflow-x: hidden;
  }
  
  /* Overlay principal ELIMINADO para imagen nítida */
  /* body:has(#section-1)::before REMOVIDO COMPLETAMENTE */
  
  /* Responsive para overlay ELIMINADO */
  
  /* ===== LÍNEAS SEPARADORAS ENTRE SECCIONES DE LA HOME ===== */
  
  /* Línea separadora entre Rankings y Últimos bosses asesinados - ESQUEMA AZUL */
  body:has(#section-1) .vs-video-area:first-of-type::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.7), transparent);
    border-radius: 1px;
    z-index: 1;
  }
  
  /* Línea separadora entre Últimos bosses asesinados y Sistema de Logros - ESQUEMA AZUL */
  body:has(#section-1) .vs-video-area:nth-of-type(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.7), transparent);
    border-radius: 1px;
    z-index: 1;
  }
  
  /* Línea separadora entre Noticias/Rankings y la primera vs-video-area - ESQUEMA AZUL */
  body:has(#section-1) .container + .vs-video-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.7), transparent);
    border-radius: 1px;
    z-index: 1;
    margin-top: -1px;
  }
  
  /* Asegurar que las secciones tengan posición relativa para el posicionamiento absoluto */
  body:has(#section-1) .vs-video-area {
    position: relative;
  }
  
  /* Ajustar el padding superior para dar espacio a la línea */
  body:has(#section-1) .vs-video-area {
    padding-top: 80px !important;
  }
  
  /* Asegurar que el footer tenga posición relativa para el posicionamiento absoluto */
  body:has(#section-1) .footer {
    position: relative;
  }
  
  /* Línea separadora final antes del footer - ESQUEMA AZUL */
  body:has(#section-1) .footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(59, 130, 246, 0.7) 50%,
      transparent 100%
    );
    z-index: 3;
  }
  
  /* Responsive para líneas separadoras */
  @media (max-width: 768px) {
    body:has(#section-1) .vs-video-area::before,
    body:has(#section-1) .container + .vs-video-area::before {
      width: 90%;
    }
    
    body:has(#section-1) .footer::before {
      left: 15%;
      right: 15%;
    }
    
    body:has(#section-1) .vs-video-area {
      padding-top: 60px !important;
    }
  }
  
  @media (max-width: 480px) {
    body:has(#section-1) .vs-video-area::before,
    body:has(#section-1) .container + .vs-video-area::before {
      width: 95%;
    }
    
    body:has(#section-1) .footer::before {
      left: 10%;
      right: 10%;
    }
    
    body:has(#section-1) .vs-video-area {
      padding-top: 50px !important;
    }
  }
    
    /* ===== TÍTULOS DISCRETOS EN LA HOME ===== */
  
  /* Títulos más discretos en la home para BOSS KILLS y ULTIMAS NOTICIAS - ESQUEMA AZUL */
  body:has(#section-1) .page-title {
    font-size: 1.3rem !important;
    color: #f1f5f9 !important;
    text-align: center !important;
    margin: 10px 0 15px 0 !important;
    padding: 8px 15px !important;
    text-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 15px rgba(59, 130, 246, 0.3) !important;
    position: relative !important;
    z-index: 10 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
  }
  
  /* Línea separadora debajo del título - más sutil - ESQUEMA AZUL */
  body:has(#section-1) .page-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 25% !important;
    right: 25% !important;
    height: 1px !important;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(59, 130, 246, 0.7) 50%,
      transparent 100%
    ) !important;
    z-index: 3 !important;
  }
  
  /* ===== MEJORAS CONTENEDOR NOTICIAS VS-BLOG ===== */
  
  /* Contenedor principal de noticias mejorado - ESQUEMA AZUL */
  body:has(#section-1) .vs-blog {
    background: rgba(2, 6, 23, 0.92) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    border-radius: 10px !important;
    margin: 20px 0 !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
  }
  
  body:has(#section-1) .vs-blog:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2) !important;
  }
  
  /* Header de fecha de la noticia - MÁS DISCRETO */
  body:has(#section-1) .vs-blog .blog-meta {
    background: rgba(19, 6, 0, 0.8) !important; /* Sin gradiente chillón */
    border: none !important;
    border-bottom: 1px solid rgba(139, 105, 20, 0.3) !important; /* Línea sutil */
    padding: 12px 20px !important;
    margin: 0 !important;
  }
  
  body:has(#section-1) .vs-blog .blog-meta a {
    color: #E6D4A6 !important; /* Crema dorado suave */
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) !important;
  }
  
  body:has(#section-1) .vs-blog .blog-meta i {
    color: #60a5fa !important; /* Azul cálido pero discreto */
    margin-right: 8px !important;
  }
  
  /* Contenido de la noticia */
  body:has(#section-1) .vs-blog .blog-content {
    background: transparent !important;
    padding: 20px !important;
  }

/* ===== PLAYER INFO CARDS - DISEÑO MODERNO DASHBOARD ===== */

/* Grid container para las tarjetas de información - COMPACTO */
.player-info-grid, .guild-info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  padding: 15px !important;
  margin: 0 !important;
  max-height: 400px !important;
  overflow: hidden !important;
}

.guild-info-grid-unified {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tarjetas individuales de información - MÁS PEQUEÑAS */
.info-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.7) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 50px !important;
  max-height: 50px !important;
  box-sizing: border-box !important;
}

/* Efecto hover en las tarjetas */
.info-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(59, 130, 246, 0.15) !important;
}

/* Efecto de brillo sutil en las tarjetas */
.info-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Contenedor del icono - MÁS PEQUEÑO */
.info-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(96, 165, 250, 0.15) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  position: relative !important;
  z-index: 2 !important;
  align-self: center !important;
}

/* Iconos con colores específicos - MÁS PEQUEÑOS */
.info-icon i {
  font-size: 14px !important;
  color: #60a5fa !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Colores específicos para diferentes tipos de información */
.class-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

.class-icon i {
  color: #22c55e !important;
}

.level-icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

.level-icon i {
  color: #f59e0b !important;
}

.ml-icon {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(147, 51, 234, 0.15) 100%) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

.ml-icon i {
  color: #a855f7 !important;
}

.reset-icon {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.15) 100%) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.reset-icon i {
  color: #ef4444 !important;
}

.guild-icon {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(2, 132, 199, 0.15) 100%) !important;
  border-color: rgba(14, 165, 233, 0.3) !important;
}

.guild-icon i {
  color: #0ea5e9 !important;
}

.pk-icon {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(249, 115, 22, 0.15) 100%) !important;
  border-color: rgba(251, 146, 60, 0.3) !important;
}

.pk-icon i {
  color: #fb923c !important;
}

.status-icon {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(13, 148, 136, 0.15) 100%) !important;
  border-color: rgba(20, 184, 166, 0.3) !important;
}

.status-icon i {
  color: #14b8a6 !important;
}

.country-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.15) 100%) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

.country-icon i {
  color: #6366f1 !important;
}

/* Contenido de la información - COMPACTO */
.info-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  justify-content: center !important;
  height: 100% !important;
}

/* Etiqueta de la información - MÁS PEQUEÑA */
.info-label {
  font-size: 10px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  line-height: 1 !important;
}

/* Valor de la información - MÁS COMPACTO */
.info-value {
  font-size: 13px !important;
  color: #f1f5f9 !important;
  font-weight: 600 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-height: 15px !important;
  display: flex !important;
  align-items: center !important;
}

/* Valores específicos con colores destacados */
.level-value {
  color: #fbbf24 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(251, 191, 36, 0.3) !important;
}

.ml-value {
  color: #c084fc !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(192, 132, 252, 0.3) !important;
}

.reset-value {
  color: #fca5a5 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(252, 165, 165, 0.3) !important;
}

.guild-value {
  color: #7dd3fc !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(125, 211, 252, 0.3) !important;
}

.pk-value {
  color: #fdba74 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(253, 186, 116, 0.3) !important;
}

.status-value {
  color: #5eead4 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(94, 234, 212, 0.3) !important;
}

.country-value {
  color: #a5b4fc !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(165, 180, 252, 0.3) !important;
}

/* Responsive para pantallas pequeñas - COMPACTO */
@media (max-width: 768px) {
  /* Player profile responsive fixes */
  .player-info-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px !important;
    max-height: 350px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .info-card {
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 8px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .info-icon {
    width: 28px !important;
    height: 28px !important;
  }
  
  .info-icon i {
    font-size: 12px !important;
  }
  
  .info-value {
    font-size: 12px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .info-label {
    font-size: 9px !important;
  }
  
  /* Profile video container responsive */
  .profile-video-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 10px !important;
  }
  
  .video-wrapper {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Death log container responsive */
  .death-log-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 10px !important;
  }
  
  .death-entry {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* ===== PROFILE VIDEO CONTAINER - DISEÑO MODERNO ===== */

/* Contenedor principal del video */
.profile-video-container {
  padding: 15px !important;
  position: relative !important;
}

/* Wrapper del video con efectos modernos */
.video-wrapper {
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 41, 59, 0.4) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(59, 130, 246, 0.1) !important;
}

/* Video del perfil */
.profile-video {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 12px !important;
  max-height: 300px !important;
  object-fit: cover !important;
}

/* Overlay sobre el video */
.video-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.8) 100%) !important;
  padding: 20px !important;
  z-index: 2 !important;
}

/* Badge del personaje */
.character-badge {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Icono del badge */
.badge-icon {
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(96, 165, 250, 0.2) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.badge-icon i {
  font-size: 16px !important;
  color: #60a5fa !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Información del badge */
.badge-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.character-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.character-class {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* ===== DEATH LOG CONTAINER - DISEÑO MODERNO ===== */

/* Contenedor principal de deaths - SIN SCROLL */
.death-log-container {
  padding: 12px !important;
  max-height: none !important;
  overflow: visible !important;
}


/* Entrada individual de death - MÁS COMPACTA */
.death-entry {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  margin-bottom: 4px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 41, 59, 0.4) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 32px !important;
  max-height: 32px !important;
}

.death-entry:hover {
  transform: translateX(2px) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.1) !important;
}

/* Icono de death - MÁS PEQUEÑO */
.death-icon {
  width: 24px !important;
  height: 24px !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.2) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.death-icon i {
  font-size: 11px !important;
  color: #ef4444 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Detalles de death - UNA SOLA LÍNEA COMPACTA */
.death-details {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

/* Información de death - TODO EN UNA LÍNEA */
.death-info {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.killer-name {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #ef4444 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 60px !important;
}

.death-text {
  font-size: 9px !important;
  color: #94a3b8 !important;
  font-style: italic !important;
  white-space: nowrap !important;
}

.victim-name {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 60px !important;
}

/* Meta información de death - COMPACTA */
.death-meta {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

.death-location {
  font-size: 8px !important;
  color: #60a5fa !important;
  background: rgba(59, 130, 246, 0.2) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  white-space: nowrap !important;
}

.death-time {
  font-size: 8px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Estado sin deaths */
.no-deaths {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 20px !important;
  text-align: center !important;
}

.no-deaths-icon {
  width: 60px !important;
  height: 60px !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%) !important;
  border: 2px solid rgba(34, 197, 94, 0.3) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 15px !important;
}

.no-deaths-icon i {
  font-size: 24px !important;
  color: #22c55e !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.no-deaths-text {
  font-size: 14px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* ===== GEAR CONTAINER - DISEÑO MODERNO ===== */

/* Contenedor principal del gear */
.gear-container {
  padding: 15px !important;
  position: relative !important;
}

/* Wrapper del inventario */
.inventory-wrapper {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Fondo del inventario */
.inventory-background {
  width: 100% !important;
  max-width: 400px !important;
  height: 350px !important;
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(59, 130, 246, 0.1) !important;
}

/* Responsive para contenedores de perfil */
@media (max-width: 768px) {
  /* Ocultar el banner del perfil en móviles */
  .profile-banner-section {
    display: none !important;
  }
  
  /* Agregar margen superior cuando el banner está oculto */
  .row.profiles:first-of-type {
    margin-top: 20px !important;
  }
}

/* Para pantallas muy pequeñas, asegurar que el banner esté oculto */
@media (max-width: 480px) {
  .profile-banner-section {
    display: none !important;
  }
  
  .row.profiles:first-of-type {
    margin-top: 15px !important;
  }
  
  .profile-video {
    max-height: 200px !important;
  }
  
  .video-overlay {
    padding: 15px !important;
  }
  
  .character-name {
    font-size: 14px !important;
  }
  
  .character-class {
    font-size: 11px !important;
  }
  
  .death-entry {
    padding: 4px 6px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }
  
  .death-icon {
    width: 20px !important;
    height: 20px !important;
  }
  
  .death-icon i {
    font-size: 9px !important;
  }
  
  .killer-name, .victim-name {
    font-size: 10px !important;
    max-width: 50px !important;
  }
  
  .death-text {
    font-size: 8px !important;
  }
  
  .death-location, .death-time {
    font-size: 7px !important;
  }
  
  .inventory-background {
    max-width: 300px !important;
    height: 250px !important;
  }
}
  
  body:has(#section-1) .vs-blog .blog-title {
    color: #60a5fa !important; /* Azul cálido y elegante */
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
    line-height: 1.3 !important;
  }
  
  body:has(#section-1) .vs-blog .blog-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
  }
  
  body:has(#section-1) .vs-blog .blog-title a:hover {
    color: #E6D4A6 !important; /* Hover en crema dorado */
  }
  
  /* Texto del contenido de la noticia */
  body:has(#section-1) .vs-blog .blog-content p {
    color: #e0e0e0 !important;
    line-height: 1.6 !important;
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }
  
  /* Responsive para home page */
  @media (max-width: 768px) {
    body:has(#section-1) {
      background: #0a0f1e !important; /* sin imagen, evitar capas por detrás */
      overflow-x: hidden;
      min-height: 100vh;
      height: auto;
      width: 100vw;
      margin: 0;
      padding: 0;
    }
    
    /* Noticias más compactas en tablet */
    body:has(#section-1) .vs-blog {
      margin: 15px 5px !important;
      border-radius: 8px !important;
    }
    
    body:has(#section-1) .vs-blog .blog-title {
      font-size: 1.2rem !important;
    }
    
    body:has(#section-1) .vs-blog .blog-content {
      padding: 15px !important;
    }
    
    /* Títulos más pequeños en móvil */
    body:has(#section-1) .page-title {
      font-size: 1.1rem !important;
      margin: 8px 0 12px 0 !important;
      padding: 6px 12px !important;
    }
    
    /* Asegurar que html también tenga el fondo correcto en móviles */
    html:has(body:has(#section-1)) {
      background-color: #130600 !important;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
    }
  }
  
  @media (max-width: 480px) {
    body:has(#section-1) {
      background: #0a0f1e !important; /* sin imagen, evitar capas por detrás */
      overflow-x: hidden;
      min-height: 100vh;
      height: auto;
      width: 100vw;
      margin: 0;
      padding: 0;
    }
    
    /* Títulos aún más pequeños en móviles pequeños */
    body:has(#section-1) .page-title {
      font-size: 1rem !important;
      margin: 6px 0 10px 0 !important;
      padding: 5px 10px !important;
      letter-spacing: 0.3px !important;
    }
    
    /* Noticias muy compactas en móviles pequeños */
    body:has(#section-1) .vs-blog {
      margin: 10px 3px !important;
      border-radius: 6px !important;
    }
    
    body:has(#section-1) .vs-blog .blog-title {
      font-size: 1.1rem !important;
    }
    
    body:has(#section-1) .vs-blog .blog-content {
      padding: 12px !important;
    }
    
    body:has(#section-1) .vs-blog .blog-meta {
      padding: 10px 15px !important;
    }
    
    body:has(#section-1) .vs-blog .blog-meta a {
      font-size: 0.85rem !important;
    }
    
    /* Asegurar que html también tenga el fondo correcto en móviles */
    html:has(body:has(#section-1)) {
      background-color: #130600 !important;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
    }
  }
  
  /* Eliminado hover de currencies - solo fondo estático */
  
  body:has(.collection) .buycurrencies {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 12px;
    color: #60a5fa;
    box-shadow: 
      0 4px 20px rgba(0, 0, 0, 0.3),
      0 0 10px rgba(59, 130, 246, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    width: 100px;
    padding: 6px 10px;
    font-size: 12px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    float: right;
    z-index: 2;
  }
  
  body:has(.collection) .buycurrencies::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.15), transparent);
    transition: left 0.5s ease;
  }
  
  body:has(.collection) .buycurrencies:hover {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%);
    border-color: rgba(59, 130, 246, 0.7);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 
      0 8px 30px rgba(0, 0, 0, 0.4),
      0 0 20px rgba(59, 130, 246, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 12px rgba(59, 130, 246, 0.4);
  }
  
  body:has(.collection) .buycurrencies:hover::before {
    left: 100%;
  }
  
  body:has(.collection) .buycurrencies--true {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(30, 64, 175, 0.9) 100%);
    border-color: rgba(96, 165, 250, 0.6);
    color: #ffffff;
    box-shadow: 
      0 8px 35px rgba(0, 0, 0, 0.3),
      0 0 25px rgba(59, 130, 246, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  
  body:has(.collection) .buycurrencies--true:hover {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.9) 0%, rgba(59, 130, 246, 1) 100%);
    transform: translateY(-3px);
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(96, 165, 250, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  /* Mejorar contenedor principal del contenido en myaccount */
  body:has(.collection) .container,
  body:has(.collection) .container-fluid,
  body:has(.collection) .row {
    position: relative;
    z-index: 2;
  }
  
  /* Aplicar glass morphism al área de contenido principal */
  body:has(.collection) .col-md-9,
  body:has(.collection) .col-lg-9 {
    background: rgba(26, 12, 0, 0.8);
    border: 1px solid rgba(177, 119, 20, 0.3);
    border-radius: 20px;
    padding: 30px;
    margin-left: 20px;
    box-shadow: 
      0 15px 35px rgba(0, 0, 0, 0.4),
      0 0 25px rgba(177, 119, 20, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    z-index: 2;
  }
  
  /* Contenedor row-grid eliminado - diseño limpio sin contenedor extra */
  body:has(.collection) .row-grid {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Estilos de usercp mantenidos sin cambios en los boxes originales */
  
  /* Tooltip simple con fondo negro */
  #WzTtDiV {
    z-index: 9999 !important;
    position: fixed !important;
    /* Alineado con el inventario del player gear */
    right: 15px !important;
    top: 45% !important;
    width: 300px !important;
    height: auto !important;
    /* Fondo negro sólido */
    background: #000000 !important;
    border: 2px solid #3b82f6 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8) !important;
    padding: 10px !important;
    /* Visibilidad */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  /* Tooltip visible */
  #WzTtDiV[style*="visibility: visible"] {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Evitar interferencias */
  body:has(.collection)::before,
  body:has(.usercp)::before,
  body:has(.sign)::before,
  body:has(.profile-banner-section)::before {
    pointer-events: none !important;
  }
  
  /* Contenido del tooltip */
  #WzTtDiV table {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-collapse: collapse !important;
  }
  
  #WzTtDiV td {
    background: transparent !important;
    border: none !important;
    padding: 3px 5px !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
  }
  
  #WzTtDiV tr {
    border: none !important;
    background: transparent !important;
  }
  
  /* Eliminar cualquier borde interno de elementos */
  #WzTtDiV *,
  #WzTtDiV *:before,
  #WzTtDiV *:after {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* Nombre del item */
  #WzTtDiV tr:first-child td {
    color: #D4AF37 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-align: center !important;
    padding: 5px !important;
  }
  
  /* Colores para diferentes propiedades */
  #WzTtDiV td[style*="color:blue"],
  #WzTtDiV td[style*="color:#4169E1"] {
    color: #87CEEB !important;
  }
  
  #WzTtDiV td[style*="color:orange"],
  #WzTtDiV td[style*="color:#FF4500"] {
    color: #FFA500 !important;
  }
  
  #WzTtDiV td[style*="color:green"],
  #WzTtDiV td[style*="color:#32CD32"] {
    color: #90EE90 !important;
  }
  
  #WzTtDiV td[style*="color:red"],
  #WzTtDiV td[style*="color:#FF0000"] {
    color: #FF6B6B !important;
  }
  
  /* Responsive - Tablet */
  @media (max-width: 768px) {
    #WzTtDiV {
      /* Centrado horizontal y vertical en tablet */
      left: 50% !important;
      top: 50% !important;
      right: auto !important;
      transform: translateX(-50%) translateY(-50%) !important;
      width: 320px !important;
      max-width: 90vw !important;
    }
  }
  
  /* Responsive - Móvil */
  @media (max-width: 480px) {
    #WzTtDiV {
      /* Centrado horizontal, ligeramente arriba en móvil */
      left: 50% !important;
      top: 40% !important;
      right: auto !important;
      transform: translateX(-50%) translateY(-50%) !important;
      width: 300px !important;
      max-width: 95vw !important;
      font-size: 11px !important;
    }
    
    #WzTtDiV td {
      font-size: 11px !important;
      padding: 2px 4px !important;
    }
    
    #WzTtDiV tr:first-child td {
      font-size: 13px !important;
    }
  }
  
  /* Estilos para el contenido del tooltip de items */
  .item-box {
    background: rgba(0, 0, 0, 0.95) !important;
    border: 1px solid #3b82f6 !important;
    border-radius: 8px !important;
    padding: 8px !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  }
  
  .item-name {
    font-weight: bold !important;
    margin-bottom: 5px !important;
    text-align: center !important;
  }
  
  .item-info, .item-opt-jog, .item-opt-harmony, 
  .item-opt-skill, .item-opt-luck, .item-opt-life, 
  .item-opt-exc, .item-opt-anc, .item-opt-socket,
  .item-class-req, .item-expiration {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 2px 0 !important;
    color: #ffffff !important;
  }
  
  /* ===============================
     MÓDULO DE PROFILE PLAYER - DISEÑO CONSISTENTE
     =============================== */
  
  /* Aplicar fondo de imagen al módulo de profile player */
  body:has(.profile-banner-section) {
    background: #130600 url('../img/CoverNew.png') repeat-y center center fixed;
    background-size: cover;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
  }
  
  /* Asegurar que el html tenga altura completa */
  html:has(body:has(.profile-banner-section)) {
    min-height: 120vh;
    background: url('../img/CoverNew.png') repeat-y center center fixed;
    background-size: cover;
  }
  
  /* Overlay para el módulo de profile player */
  body:has(.profile-banner-section)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg, 
      rgba(7, 2, 0, 0.75) 0%, 
      rgba(19, 6, 0, 0.65) 30%, 
      rgba(26, 12, 0, 0.55) 60%, 
      rgba(7, 2, 0, 0.75) 100%
    );
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: -1;
    pointer-events: none;
  }
  
  /* Ocultar breadcrumb en profile player */
  body:has(.profile-banner-section) .breadcrumb {
    display: none !important;
  }
  
  /* Línea separadora inferior antes del footer en profile player */
  body:has(.profile-banner-section) .footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      #3b82f6 50%,
      transparent 100%
    );
    z-index: 3;
  }
  
  /* Asegurar que el footer tenga posición relativa y fondo */
  body:has(.profile-banner-section) .footer {
    position: relative;
    background: transparent;
  }
  
  /* Glass morphism effects para las secciones del profile */
  body:has(.profile-banner-section) .vs-blog {
    background: rgba(26, 12, 0, 0.85);
    border-radius: 8px;
    border: 1px solid rgba(177, 119, 20, 0.25);
    box-shadow: 
      0 8px 20px rgba(0, 0, 0, 0.4),
      0 0 12px rgba(177, 119, 20, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }
  
  /* Eliminar márgenes y padding extra de contenedores que puedan causar doble espaciado */
  body:has(.profile-banner-section) .table-responsive {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body:has(.profile-banner-section) .rankings-table {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Optimizar las columnas del perfil */
  body:has(.profile-banner-section) .profiles .col-6 {
    margin-bottom: 20px;
    padding: 0 10px;
  }
  
  /* Eliminar espaciado extra de las filas */
  body:has(.profile-banner-section) .profiles {
    margin: 0 !important;
  }
  
  /* Mejorar las tablas dentro de las secciones */
  body:has(.profile-banner-section) .vs-blog .rakings-deidad-customs {
    margin: 0;
    border-radius: 0 0 8px 8px;
    border-top: none;
  }
  
  /* Mejorar el contenedor de video del perfil */
  body:has(.profile-banner-section) .profilechar {
    border-radius: 6px;
    border: 1px solid rgba(177, 119, 20, 0.2);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  /* Títulos elegantes para las secciones del profile */
  body:has(.profile-banner-section) .blog-meta.profiletxt {
    background: linear-gradient(135deg, rgba(19, 6, 0, 0.95) 0%, rgba(26, 12, 0, 0.9) 100%) !important;
    color: #3b82f6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    font-weight: 600;
    font-size: 14px !important;
    text-align: center;
    padding: 8px 15px !important;
    margin: 0 !important;
    border: 1px solid rgba(177, 119, 20, 0.3);
    border-radius: 6px 6px 0 0;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  /* Línea decorativa debajo del título */
  body:has(.profile-banner-section) .blog-meta.profiletxt::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  }
  /* Responsive para profile player */
  @media (max-width: 768px) {
    body:has(.profile-banner-section) {
      background-attachment: scroll;
      margin-top: -1200px;
      padding-top: 1000px;
      min-height: 150vh;
    }
    
    html:has(body:has(.profile-banner-section)) {
      background-attachment: scroll;
      min-height: 150vh;
    }
    
    body:has(.profile-banner-section) .footer::before {
      left: 15%;
      right: 15%;
    }
    
    body:has(.profile-banner-section) .blog-meta.profiletxt {
      font-size: 13px !important;
      padding: 6px 12px !important;
    }
  }
  
  @media (max-width: 480px) {
    body:has(.profile-banner-section) {
      margin-top: -1500px;
      padding-top: 1300px;
      min-height: 200vh;
    }
    
    html:has(body:has(.profile-banner-section)) {
      min-height: 200vh;
    }
    
    body:has(.profile-banner-section) .footer::before {
      left: 10%;
      right: 10%;
    }
    
    body:has(.profile-banner-section) .blog-meta.profiletxt {
      font-size: 12px !important;
      padding: 5px 10px !important;
      letter-spacing: 0.3px;
    }
    
    body:has(.profile-banner-section) .blog-meta.profiletxt::after {
      left: 15%;
      right: 15%;
    }
  }
  
  @media (max-width: 360px) {
    body:has(.profile-banner-section) {
      margin-top: -1800px;
      padding-top: 1600px;
      min-height: 250vh;
    }
    
    html:has(body:has(.profile-banner-section)) {
      min-height: 250vh;
    }
  }
  
  @media (max-width: 1024px) and (min-width: 769px) {
    body:has(.profile-banner-section) {
      margin-top: -1000px;
      padding-top: 800px;
      min-height: 130vh;
    }
    
    html:has(body:has(.profile-banner-section)) {
      min-height: 130vh;
    }
  }
  
  @media (max-width: 900px) and (min-width: 700px) {
    body:has(.profile-banner-section) {
      margin-top: -1100px;
      padding-top: 900px;
      min-height: 140vh;
    }
    
    html:has(body:has(.profile-banner-section)) {
      min-height: 140vh;
    }
  }
  
  @media (min-width: 1200px) {
    body:has(.profile-banner-section) {
      margin-top: -600px;
      padding-top: 500px;
      min-height: 120vh;
    }
    
    html:has(body:has(.profile-banner-section)) {
      min-height: 120vh;
    }
  }
  
  @media (max-width: 600px) and (min-width: 481px) {
    body:has(.profile-banner-section) {
      margin-top: -1400px;
      padding-top: 1200px;
      min-height: 180vh;
    }
    
    html:has(body:has(.profile-banner-section)) {
      min-height: 180vh;
    }
  }
  
  @media (max-width: 800px) and (min-width: 601px) {
    body:has(.profile-banner-section) {
      margin-top: -1200px;
      padding-top: 1000px;
      min-height: 160vh;
    }
    
    html:has(body:has(.profile-banner-section)) {
      min-height: 160vh;
    }
  }
  
  /* ===============================
     MÓDULO UNSTICK CHARACTER - DISEÑO MEJORADO
     =============================== */
  
  /* Aplicar fondo de imagen al módulo unstick - detección específica */
  body:has(.unstick-module) {
    background: #130600 url('../img/CoverNew.png') repeat-y center center fixed !important;
    background-size: cover !important;
    overflow-x: hidden !important;
    min-height: 100vh !important;
    position: relative !important;
  }
  
  /* Asegurar que el html tenga altura completa para unstick */
  html:has(body:has(.unstick-module)) {
    min-height: 120vh;
    background: url('../img/CoverNew.png') repeat-y center center fixed;
    background-size: cover;
  }
  
  /* Overlay para el módulo unstick */
  body:has(.unstick-module)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg, 
      rgba(7, 2, 0, 0.75) 0%, 
      rgba(19, 6, 0, 0.65) 30%, 
      rgba(26, 12, 0, 0.55) 60%, 
      rgba(7, 2, 0, 0.75) 100%
    );
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: -1;
    pointer-events: none;
  }
  
  /* Ocultar breadcrumb en unstick */
  body:has(.unstick-module) .breadcrumb {
    display: none !important;
  }
  
  /* Título del módulo unstick mejorado - SOLO LÍNEA DIVISORA */
  body:has(.unstick-module) .page-title {
    background: transparent !important;
    color: #3b82f6 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    text-align: center !important;
    padding: 20px 0 !important;
    margin: 0 0 30px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Línea divisora simple debajo del título unstick */
  body:has(.unstick-module) .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30%;
    right: 30%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      #3b82f6 50%,
      transparent 100%
    );
    box-shadow: none;
  }
  
  /* Tabla del módulo unstick mejorada */
  body:has(.unstick-module) .table-responsive {
    background: rgba(26, 12, 0, 0.9) !important;
    border-radius: 12px !important;
    border: 2px solid rgba(177, 119, 20, 0.3) !important;
    box-shadow: 
      0 12px 30px rgba(0, 0, 0, 0.6),
      0 0 20px rgba(177, 119, 20, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    overflow: hidden !important;
  }
  
  /* Mejoras específicas para la tabla unstick */
  body:has(.unstick-module) .rakings-deidad-customs {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  body:has(.unstick-module) .rakings-deidad-customs th {
    background: rgba(177, 119, 20, 0.2) !important;
    color: #D4AF37 !important;
    border: 1px solid rgba(177, 119, 20, 0.3) !important;
    padding: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
  }
  
  body:has(.unstick-module) .rakings-deidad-customs td {
    background: rgba(19, 6, 0, 0.4) !important;
    color: #fff3d1 !important;
    border: 1px solid rgba(177, 119, 20, 0.2) !important;
    padding: 10px !important;
    font-size: 14px !important;
  }
  
  body:has(.unstick-module) .rakings-deidad-customs tr:hover td {
    background: rgba(177, 119, 20, 0.15) !important;
    transform: scale(1.01) !important;
    transition: all 0.2s ease !important;
  }
  
  /* Botones unstick mejorados */
  body:has(.unstick-module) .migration-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #D4AF37 50%, #3b82f6 100%) !important;
    color: #000000 !important;
    border: 2px solid #D4AF37 !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 
      0 4px 12px rgba(177, 119, 20, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
  
  body:has(.unstick-module) .migration-btn:hover {
    background: linear-gradient(135deg, #D4AF37 0%, #F4D03F 50%, #D4AF37 100%) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 
      0 6px 20px rgba(177, 119, 20, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  }
  
  /* Alert de información mejorado */
  body:has(.unstick-module) .alert {
    background: rgba(19, 6, 0, 0.9) !important;
    border: 2px solid rgba(177, 119, 20, 0.4) !important;
    border-radius: 8px !important;
    color: #fff3d1 !important;
    padding: 15px 20px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    font-size: 14px !important;
    text-align: center !important;
    margin-top: 20px !important;
  }
  
  /* Línea separadora inferior antes del footer en unstick */
  body:has(.unstick-module) .footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      #3b82f6 50%,
      transparent 100%
    );
    z-index: 3;
  }
  
  /* Asegurar que el footer tenga posición relativa */
  body:has(.unstick-module) .footer {
    position: relative;
    background: transparent;
  }
  
  /* Mejorar sidebar usercp específicamente en unstick - SIN HOVER */
  body:has(.unstick-module) .usercp li {
    background: rgba(26, 12, 0, 0.85);
    border: 2px solid rgba(177, 119, 20, 0.4);
    border-radius: 16px;
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  
  body:has(.unstick-module) .usercp li a p {
    color: #F4D03F;
    text-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 8px rgba(212, 175, 55, 0.3);
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  
  body:has(.unstick-module) .usercp li a p font {
    color: rgba(177, 119, 20, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    font-weight: 500;
  }
  
  body:has(.unstick-module) .usercp li:hover a p {
    color: #ffffff;
    text-shadow: 
      0 2px 6px rgba(0, 0, 0, 0.9),
      0 0 15px rgba(244, 208, 63, 0.5);
  }
  
  body:has(.unstick-module) .usercp li:hover a p font {
    color: #D4AF37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
  }
  
  /* Mejorar sección de currencies en unstick - AJUSTADA */
  body:has(.unstick-module) .currencies li {
    background: rgba(26, 12, 0, 0.7);
    border: 1px solid rgba(177, 119, 20, 0.3);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 
      0 4px 20px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* Margen reducido */
  }
  
  /* Responsive para unstick */
  @media (max-width: 768px) {
    body:has(.unstick-module) {
      background-attachment: scroll !important;
      margin-top: -800px !important;
      padding-top: 600px !important;
      min-height: 130vh !important;
    }
    
    body:has(.unstick-module) .page-title {
      font-size: 22px !important;
      padding: 15px !important;
      margin-bottom: 20px !important;
    }
    
    body:has(.unstick-module) .table-responsive {
      padding: 15px !important;
      margin-bottom: 20px !important;
    }
    
    body:has(.unstick-module) .rakings-deidad-customs th,
    body:has(.unstick-module) .rakings-deidad-customs td {
      padding: 8px !important;
      font-size: 12px !important;
    }
  }
  
  @media (max-width: 480px) {
    body:has(.unstick-module) {
      margin-top: -600px !important;
      padding-top: 500px !important;
      min-height: 140vh !important;
    }
    
    body:has(.unstick-module) .page-title {
      font-size: 18px !important;
      padding: 12px !important;
    }
    
    body:has(.unstick-module) .migration-btn {
      padding: 8px 14px !important;
      font-size: 12px !important;
    }
    
    body:has(.unstick-module) .table-responsive {
      padding: 10px !important;
    }
    
    body:has(.unstick-module) .rakings-deidad-customs th,
    body:has(.unstick-module) .rakings-deidad-customs td {
      padding: 6px !important;
      font-size: 11px !important;
    }
  }
  
  /* ===============================
     MÓDULO DONATION - DISEÑO MEJORADO
     =============================== */
  
  /* Aplicar fondo de imagen al módulo donation */
  /* ========== DONATION MODULE - SIMPLIFICADO SIN INTERFERIR FOOTER ========== */
  body:has(.donation-module) {
    background: #130600 url('../img/CoverNew.png') repeat-y center center fixed !important;
    background-size: cover !important;
    overflow-x: hidden !important;
    min-height: 100vh !important;
  }
  
  /* HTML para donation - REGLAS MÍNIMAS */
  
  /* Overlay para el módulo donation - SIN INTERFERIR CON FOOTER */
  body:has(.donation-module)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: linear-gradient(
      135deg, 
      rgba(7, 2, 0, 0.75) 0%, 
      rgba(19, 6, 0, 0.65) 30%, 
      rgba(26, 12, 0, 0.55) 60%, 
      rgba(7, 2, 0, 0.75) 100%
    );
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: -1;
    pointer-events: none;
  }
  
  /* Ocultar breadcrumb en donation */
  body:has(.donation-module) .breadcrumb {
    display: none !important;
  }
  
  /* Título del módulo donation mejorado - SOLO LÍNEA DIVISORA */
  body:has(.donation-module) .page-title {
    background: transparent !important;
    color: #3b82f6 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    text-align: center !important;
    padding: 20px 0 !important;
    margin: 0 0 30px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Línea divisora simple debajo del título donation */
  body:has(.donation-module) .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30%;
    right: 30%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      #3b82f6 50%,
      transparent 100%
    );
    box-shadow: none;
  }
  
  /* Contenedor de tarjetas - ESTILO SIMPLE */
  body:has(.donation-module) .donation-cards-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin: 30px auto !important;
    padding: 20px !important;
  }
  
  /* Tarjetas de donation - DISEÑO SIMPLE Y FUNCIONAL */
  body:has(.donation-module) .donation-card {
    width: calc(33.333% - 15px) !important;
    max-width: 350px !important;
    min-width: 280px !important;
    background: rgba(19, 6, 0, 0.9) !important;
    border: 2px solid #3b82f6 !important;
    border-radius: 10px !important;
    padding: 20px !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  }
  
  body:has(.donation-module) .donation-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(177, 119, 20, 0.5) !important;
  }
  
  body:has(.donation-module) .donation-card .main {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    height: auto !important;
  }
  
  body:has(.donation-module) .donation-card h2 {
    color: #fff3d1 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 10px 0 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
  }
  
  body:has(.donation-module) .donation-card h2:last-of-type {
    color: #daa520 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-top: 15px !important;
  }
  
  body:has(.donation-module) .donation-card .tokenImage img {
    width: 100px !important;
    height: auto !important;
    margin: 10px 0 !important;
  }
  
  body:has(.donation-module) .donation-card hr {
    border: none !important;
    height: 1px !important;
    background: #3b82f6 !important;
    margin: 15px 0 !important;
  }
  
  body:has(.donation-module) .donation-btn {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
    border: none !important;
    color: #000000 !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-top: 10px !important;
  }
  
  body:has(.donation-module) .donation-btn:hover {
    background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
    transform: translateY(-2px) !important;
  }
  
  body:has(.donation-module) .bonus {
    background: rgba(255, 105, 180, 0.2) !important;
    border: 1px solid #ff69b4 !important;
    border-radius: 5px !important;
    padding: 5px 10px !important;
    margin-bottom: 10px !important;
    display: inline-block !important;
    color: #ff69b4 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
  }
  
  /* RESPONSIVE SIMPLE PARA DONACION */
  @media (max-width: 1000px) {
    body:has(.donation-module) .donation-card {
      width: calc(50% - 15px) !important;
    }
  }
  
  @media (max-width: 700px) {
    body:has(.donation-module) .donation-card {
      width: 100% !important;
    }
    
    body:has(.donation-module) .donation-cards-container {
      flex-direction: column !important;
      align-items: center !important;
    }
  }
  
  /* DONATION MODULE - TABS MEJORADOS */
  body:has(.donation-module) .tab {
    text-align: center !important;
    margin: 30px auto !important;
    max-width: 1000px !important;
    background: linear-gradient(135deg, rgba(26, 12, 0, 0.85), rgba(19, 6, 0, 0.9)) !important;
    border: 2px solid rgba(177, 119, 20, 0.4) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }
  
  body:has(.donation-module) .tab button {
    background: linear-gradient(135deg, rgba(19, 6, 0, 0.8), rgba(26, 12, 0, 0.6)) !important;
    border: 2px solid rgba(177, 119, 20, 0.5) !important;
    color: #fff3d1 !important;
    padding: 12px 20px !important;
    margin: 0 8px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  body:has(.donation-module) .tab button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(177, 119, 20, 0.2), transparent) !important;
    transition: left 0.5s ease !important;
  }
  
  body:has(.donation-module) .tab button:hover {
    background: linear-gradient(135deg, rgba(177, 119, 20, 0.3), rgba(212, 175, 55, 0.2)) !important;
    border-color: rgba(177, 119, 20, 0.8) !important;
    color: #F4D03F !important;
    transform: translateY(-2px) !important;
    box-shadow: 
      0 6px 18px rgba(177, 119, 20, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }
  
  body:has(.donation-module) .tab button:hover::before {
    left: 100% !important;
  }
  
  body:has(.donation-module) .tab button.active {
    background: linear-gradient(135deg, #3b82f6, #D4AF37) !important;
    border-color: #D4AF37 !important;
    color: #000000 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    box-shadow: 
      0 6px 20px rgba(177, 119, 20, 0.5),
      inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  }
  
  /* CONTENEDOR DE TARJETAS MEJORADO */
  body:has(.donation-module) .tabcontent {
    background: linear-gradient(135deg, rgba(26, 12, 0, 0.9), rgba(19, 6, 0, 0.95)) !important;
    border: 2px solid rgba(177, 119, 20, 0.4) !important;
    border-radius: 15px !important;
    padding: 30px 20px !important;
    margin: 20px auto !important;
    max-width: 1200px !important;
    box-shadow: 
      0 12px 35px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  body:has(.donation-module) .tabcontent::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: 
      radial-gradient(circle at 20% 80%, rgba(177, 119, 20, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 50%) !important;
    pointer-events: none !important;
  }
  
  /* Tarjetas de donation mejoradas - efectos contenidos */
  body:has(.donation-module) .donation-card {
    background: linear-gradient(135deg, rgba(26, 12, 0, 0.9), rgba(19, 6, 0, 0.95)) !important;
    border: 2px solid rgba(177, 119, 20, 0.6) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    margin: 15px !important;
    text-align: center !important;
    width: calc(33.333% - 30px) !important;
    min-width: 280px !important;
    max-width: 350px !important;
    min-height: 400px !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: top !important;
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Forzar ancho consistente para todas las tarjetas de donation */
  body:has(.donation-module) #MercadoPago .donation-card,
  body:has(.donation-module) #Paypal .donation-card {
    width: calc(33.333% - 20px) !important;
    max-width: 320px !important;
    min-width: 280px !important;
    flex: 0 0 calc(33.333% - 20px) !important;
    margin: 10px !important;
  }
  
  /* Responsive para 3 columnas consistentes */
  @media (max-width: 1200px) {
    body:has(.donation-module) #MercadoPago .donation-card,
    body:has(.donation-module) #Paypal .donation-card {
      width: calc(50% - 20px) !important;
      flex: 0 0 calc(50% - 20px) !important;
    }
  }
  
  @media (max-width: 700px) {
    body:has(.donation-module) #MercadoPago .donation-card,
    body:has(.donation-module) #Paypal .donation-card {
      width: calc(100% - 20px) !important;
      flex: 0 0 calc(100% - 20px) !important;
      max-width: 350px !important;
    }
  }
  
  body:has(.donation-module) .donation-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(45deg, transparent 30%, rgba(177, 119, 20, 0.1) 50%, transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
  }
  
  body:has(.donation-module) .donation-card:hover {
    border-color: rgba(212, 175, 55, 0.8) !important;
    transform: translateY(-3px) !important;
    box-shadow: 
      0 12px 35px rgba(177, 119, 20, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }
  
  body:has(.donation-module) .donation-card:hover::before {
    opacity: 1 !important;
  }
  
  /* Contenedor mejorado para consistencia PayPal/MercadoPago */
  body:has(.donation-module) .donation-cards-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    text-align: center !important;
    margin: 20px auto !important;
    max-width: 1200px !important;
  }
  
  /* Específico para formularios de PayPal */
  body:has(.donation-module) #Paypal form {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
  }
  
  /* Título principal "COMPRA COINS" */
  body:has(.donation-module) .donation-card::after {
    content: 'COMPRA COINS' !important;
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: #D4AF37 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
    z-index: 3 !important;
    background: linear-gradient(45deg, #D4AF37, #F4D03F) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  
  /* Contenido de las tarjetas optimizado */
  body:has(.donation-module) .donation-card h2 {
    color: #fff3d1 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 8px 0 5px 0 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
    position: relative !important;
    z-index: 2 !important;
  }
  
  body:has(.donation-module) .donation-card h2:last-of-type {
    color: #D4AF37 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9) !important;
    margin: 8px 0 !important;
    background: linear-gradient(45deg, #D4AF37, #3b82f6, #D4AF37) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: goldShimmer 3s ease-in-out infinite !important;
  }
  
  @keyframes goldShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  
  body:has(.donation-module) .donation-card .tokenImage {
    margin: 20px 0 12px 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }
  
  body:has(.donation-module) .donation-card .tokenImage img {
    width: 85px !important;
    height: auto !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) !important;
    transition: transform 0.3s ease !important;
  }
  
  body:has(.donation-module) .donation-card:hover .tokenImage img {
    transform: scale(1.05) !important;
  }
  
  body:has(.donation-module) .donation-card hr {
    border: none !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #3b82f6, transparent) !important;
    margin: 12px 0 10px 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }
  
  /* Botones de donation optimizados */
  body:has(.donation-module) .donation-btn,
  body:has(.donation-module) a.donation-btn,
  body:has(.donation-module) button.donation-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #D4AF37 50%, #3b82f6 100%) !important;
    border: 2px solid rgba(177, 119, 20, 0.8) !important;
    color: #000000 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-top: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 3 !important;
    box-shadow: 
      0 4px 15px rgba(177, 119, 20, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    width: 90% !important;
    max-width: 180px !important;
  }
  
  body:has(.donation-module) .donation-btn::before,
  body:has(.donation-module) a.donation-btn::before,
  body:has(.donation-module) button.donation-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, #D4AF37 0%, #F4D03F 50%, #D4AF37 100%) !important;
    border-radius: 6px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: -1 !important;
  }
  
  body:has(.donation-module) .donation-btn:hover,
  body:has(.donation-module) a.donation-btn:hover,
  body:has(.donation-module) button.donation-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
      0 6px 20px rgba(177, 119, 20, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(212, 175, 55, 1) !important;
  }
  
  body:has(.donation-module) .donation-btn:hover::before,
  body:has(.donation-module) a.donation-btn:hover::before,
  body:has(.donation-module) button.donation-btn:hover::before {
    opacity: 1 !important;
  }
  
  body:has(.donation-module) .donation-btn:active,
  body:has(.donation-module) a.donation-btn:active,
  body:has(.donation-module) button.donation-btn:active {
    transform: translateY(0) !important;
    box-shadow: 
      0 2px 8px rgba(177, 119, 20, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Sidebar usercp simple */
  body:has(.donation-module) .usercp li {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid #3b82f6 !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
  }
  
  body:has(.donation-module) .usercp li a p {
    color: #fff3d1 !important;
    padding: 10px !important;
  }
  
  body:has(.donation-module) .usercp li a p font {
    color: #daa520 !important;
  }
  
  body:has(.donation-module) .usercp li:hover a p font {
    color: #F4D03F !important;
  }
  
  body:has(.donation-module) .currencies li {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid #3b82f6 !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
  }
  
  /* Responsive con contenido completo visible y efectos contenidos */
  @media (max-width: 1000px) {
    body:has(.donation-module) .donation-card {
      width: calc(50% - 30px) !important;
      margin: 10px !important;
      min-height: 380px !important;
      height: auto !important;
    }
  }
  
  @media (max-width: 700px) {
    body:has(.donation-module) .donation-card {
      width: calc(100% - 30px) !important;
      max-width: 350px !important;
      margin: 15px auto !important;
      min-height: 360px !important;
      height: auto !important;
    }
    
    body:has(.donation-module) .donation-card .tokenImage img {
      width: 75px !important;
    }
    
    body:has(.donation-module) .donation-card h2 {
      font-size: 14px !important;
    }
    
    body:has(.donation-module) .donation-card h2:last-of-type {
      font-size: 16px !important;
    }
    
    body:has(.donation-module) .donation-cards-container {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }
  }
  
  /* ===============================
     MÓDULO HOME - DISEÑO CONSISTENTE CON ESQUEMA AZUL
     =============================== */
  
  /* Contenedor principal con fondo de imagen para la home - esquema azul */
  body:has(.main) {
      background: linear-gradient(90deg, #000000 0%, #0a0e1a 25%, #0a0e1a 50%, #0a0e1a 75%, #000000 100%) !important;
      background-size: cover !important;
      overflow-x: hidden;
      margin-top: -80px;
      padding-top: 100px;
      position: relative;
      min-height: 100vh;
  }
  
  /* Overlay .main ELIMINADO para imagen nítida */
  /* body:has(.main)::before REMOVIDO COMPLETAMENTE */
  
  /* Asegurar que el contenido principal esté por encima del overlay */
  .main {
      position: relative;
      z-index: 2;
  }
  
  /* Estilos específicos para la home - esquema azul */
  .main .page-title {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(2, 6, 23, 0.4) 100%);
      border: 1px solid rgba(59, 130, 246, 0.4);
      border-radius: 10px;
      padding: 15px 20px;
      margin: 20px 0;
      text-align: center;
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
      color: #f1f5f9;
      text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(59, 130, 246, 0.3);
      font-size: 32px;
      font-weight: 700;
      letter-spacing: 2px;
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  }
  
  .main .page-title span {
      color: #f1f5f9;
      font-weight: 700;
      font-size: 1.4rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
  }
  
  /* Línea separadora del título azul */
  .main .page-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 20%;
      right: 20%;
      height: 2px;
      background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(59, 130, 246, 0.4) 20%,
          rgba(59, 130, 246, 0.7) 50%,
          rgba(59, 130, 246, 0.4) 80%,
          transparent 100%
      );
      border-radius: 1px;
      z-index: 3;
  }
  
  /* Mejorar las secciones de la home - esquema azul */
  .main .vs-sidebox {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(2, 6, 23, 0.6) 100%);
      border: 1px solid rgba(59, 130, 246, 0.3);
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
      margin-bottom: 20px;
  }
  
  /* Estilos para los elementos de texto en la home - esquema azul */
  .main .text-white {
      color: #f1f5f9 !important;
  }
  
  .main .text-description {
      color: #e2e8f0 !important;
  }
  
  .main .text-time {
      color: #cbd5e1 !important;
  }
  
  .main .text-explain {
      color: #e5e7eb !important;
  }
  
  /* Estilos para el slider principal de la home - esquema azul */
  .main #section-1 {
      margin-bottom: 20px;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  }
  
  /* Estilos .main del banner eliminados - duplicados de slides.css */
  
  /* Estilos .main del countdown eliminados - duplicados de slides.css */
  
  /* Responsive para la home */
  @media (max-width: 768px) {
      body:has(.main) {
          margin-top: -60px;
          padding-top: 80px;
      }
      
      .main .container {
          margin: 10px;
          padding: 15px;
      }
      
      .main .page-title {
          margin: 15px 0;
          padding: 12px 15px;
          font-size: 24px;
      }
      
      .main .page-title span {
          font-size: 1.2rem;
      }
      
      .main .tituloopen {
          font-size: 1.8rem;
      }
      
      /* Referencias .main del countdown eliminadas */
  }
  

  
  /* ======================================
     SERVER STATS SECTION - HOME (COMPACTO) - ESQUEMA AZUL
  ====================================== */
  .server-stats-section {
      background: rgba(2, 6, 23, 0.4);
      padding: 14px 0;
      position: relative;
      border-top: 1px solid rgba(59, 130, 246, 0.3);
      border-bottom: 1px solid rgba(59, 130, 246, 0.3);
  }
  
  .server-stats-section::after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.7), transparent);
      opacity: 0.6;
  }
  
  .stats-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 19px;
      max-width: 950px;
      margin: 0 auto;
      flex-wrap: wrap;
  }
  
  .stat-card {
      background: rgba(2, 6, 23, 0.3);
      border: 1px solid rgba(59, 130, 246, 0.4);
      border-radius: 5px;
      padding: 7px 11px;
      text-align: center;
      position: relative;
      transition: all 0.2s ease;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 1px;
  }
  
  .stat-card:hover {
      background: rgba(59, 130, 246, 0.1);
      border-color: rgba(59, 130, 246, 0.7);
  }
  
  .stat-icon {
      font-size: 0.7rem;
      color: rgba(59, 130, 246, 0.8);
      margin: 0;
      opacity: 0.7;
  }
  
  .stat-content {
      display: flex;
      flex-direction: column;
      gap: 1px;
      align-items: center;
  }
  
  .stat-label {
      color: #e2e8f0;
      font-size: 0.6rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      opacity: 0.65;
      margin: 0;
      line-height: 1.5;
	  
  }
  
  .stat-number {
      color: rgba(59, 130, 246, 0.9);
      font-size: 0.65rem;
      font-weight: 700;
      margin: 0;
      line-height: 1;
      text-shadow: none;
  }
  
  .stat-number.pulsing-text {
      font-size: 0.65rem !important;
      font-weight: 700 !important;
      letter-spacing: 0.5px !important;
      background: linear-gradient(135deg, #00FF00 0%, #39FF14 50%, #00FF00 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
  }
  
  .stat-number.pulsing-text::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
      animation: glow-pulse-blue 2s ease-in-out infinite;
      z-index: -1;
  }
  
  .stat-card:hover .stat-number {
      color: #60a5fa;
  }
  
  .status-online {
      color: #00ff88 !important;
	  font-size: 0.65rem;
  }
  
  .stat-card:hover .status-online {
      color: #00ff88 !important;
  }
  
  .pulsing-text {
      animation: glow-pulse-blue 2s ease-in-out infinite;
  }
  
  @keyframes glow-pulse-blue {
      0% {
          color: #3b82f6;
          text-shadow: 
              0 0 10px rgba(59, 130, 246, 0.7),
              0 0 20px rgba(59, 130, 246, 0.5),
              0 0 30px rgba(59, 130, 246, 0.3);
          transform: scale(1);
      }
      50% {
          color: #60a5fa;
          text-shadow: 
              0 0 15px rgba(96, 165, 250, 0.8),
              0 0 25px rgba(96, 165, 250, 0.6),
              0 0 35px rgba(96, 165, 250, 0.4);
          transform: scale(1.05);
      }
      100% {
          color: #3b82f6;
          text-shadow: 
              0 0 10px rgba(59, 130, 246, 0.7),
              0 0 20px rgba(59, 130, 246, 0.5),
              0 0 30px rgba(59, 130, 246, 0.3);
          transform: scale(1);
      }
  }
  
  /* Responsive para stats compactos */
  @media (max-width: 768px) {
      .server-stats-section {
          padding: 11px 0;
      }
      
      .stats-container {
          gap: 14px;
      }
      
      .stat-card {
          min-width: 95px;
          height: 43px;
          padding: 5px 9px;
      }
      
      .stat-label {
          font-size: 8px;
      }
      
      .stat-number {
          font-size: 12px;
      }
      
      .stat-icon {
          font-size: 10px;
      }
  }
  
  @media (max-width: 480px) {
      .stats-container {
          gap: 9px;
      }
      
      .stat-card {
          min-width: 81px;
          height: 38px;
          padding: 4px 7px;
      }
      
      .stat-label {
          font-size: 7px;
      }
      
      .stat-number {
          font-size: 11px;
      }
      
      .stat-icon {
          font-size: 9px;
      }
  }
  
  /* ======================================
     HEADER IMPROVEMENTS - CENTRADO Y RESPONSIVE
  ====================================== */
  
  /* Mejora del centrado del menú principal en desktop */
  @media (min-width: 1200px) {
    .header .header__content {
      position: relative !important;
    }
    
    .header .header__content .header__menu {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-60%, -50%) !important; /* Centrar pero mover más a la izquierda */
      width: auto !important;
      display: flex !important;
      margin: 0 !important;
    }
    
    .header .header__content .header__nav {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      flex-wrap: nowrap !important;
      gap: 0 !important;
    }
    
    .header .header__content .header__nav-item {
      margin-left: 40px !important;
      margin-right: 0 !important;
    }
    
    .header .header__content .header__nav-item:first-child {
      margin-left: 0 !important;
    }
    
    /* OCULTAR botón hamburguesa en desktop */
    .header__btn {
      display: none !important;
    }
    
    /* Mostrar botón LOGIN en desktop y ajustar su posición */
    .header__action--signin {
      display: flex !important;
      margin-left: 20px !important;
    }
  
    .header__action-btn--signin {
      padding: 0 !important;
    }
  
    .header__action-btn--signin span {
      padding: 8px 24px !important;
      font-size: 14px !important;
    }
  }
  
  /* Mejoras del botón hamburguesa (SOLO RESPONSIVE) */
  .header__btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    display: none !important; /* Oculto por defecto */
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 20px !important;
    top: 19px !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    cursor: pointer !important;
  }
  
  /* MOSTRAR botón hamburguesa solo en responsive */
  @media (max-width: 1199px) {
    .header__btn {
      display: flex !important;
    }
  }
  
  .header__btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.2) 100%) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
  }

  .header__btn span {
    width: 18px !important;
    height: 2px !important;
    background: linear-gradient(90deg, #60a5fa, #3b82f6) !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    position: absolute !important;
    transform-origin: center !important;
  }

  .header__btn span:first-child {
    top: 8px !important;
  }

  .header__btn span:nth-child(2) {
    top: 15px !important;
  }

  .header__btn span:last-child {
    top: 22px !important;
  }

  .header__btn:hover span {
    background: linear-gradient(90deg, #ffffff, #60a5fa) !important;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6) !important;
  }

  .header__btn--active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.25) 100%) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
  }

  .header__btn--active span {
    background: linear-gradient(90deg, #ffffff, #60a5fa) !important;
  }

  .header__btn--active span:first-child {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }

  .header__btn--active span:nth-child(2) {
    opacity: 0 !important;
  }

  .header__btn--active span:last-child {
    transform: rotate(-45deg) translate(7px, -6px) !important;
  }
  
  /* ===== BOTONES MODERNOS DEL HEADER (CONTROL PANEL & LOGOUT) ===== */
  
  /* Botón Control Panel - Diseño moderno azul */
  .header__profile-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 12px !important;
    padding: 8px 16px !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.2),
      inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .header__profile-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent) !important;
    transition: left 0.6s ease !important;
  }
  
  .header__profile-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.2) 100%) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 
      0 8px 20px rgba(59, 130, 246, 0.3),
      0 0 15px rgba(59, 130, 246, 0.2),
      inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
  }
  
  .header__profile-btn:hover::before {
    left: 100% !important;
  }
  
  .header__profile-btn:active {
    transform: translateY(0px) !important;
    box-shadow: 
      0 4px 12px rgba(59, 130, 246, 0.2),
      inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }
  
  .header__profile-btn div p {
    color: #f8fafc !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-size: 14px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    z-index: 2 !important;
  }
  
  .header__profile-btn span {
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    z-index: 2 !important;
  }
  
  .header__profile-btn svg {
    fill: #94a3b8 !important;
    transition: fill 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
  }
  
  .header__profile-btn:hover svg {
    fill: #cbd5e1 !important;
  }
  
  /* ===== BOTONES DE ACCIÓN DEL HEADER (LOGOUT, ETC) ===== */
  
  /* Estilo general para todos los botones de acción */
  .header__action-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 
      0 3px 10px rgba(0, 0, 0, 0.15),
      inset 0 1px 2px rgba(255, 255, 255, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 36px !important;
  }
  
  .header__action-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.15), transparent) !important;
    transition: left 0.5s ease !important;
  }
  
  .header__action-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    transform: translateY(-1px) !important;
    box-shadow: 
      0 6px 15px rgba(59, 130, 246, 0.25),
      0 0 10px rgba(59, 130, 246, 0.15),
      inset 0 1px 2px rgba(255, 255, 255, 0.12) !important;
  }
  
  .header__action-btn:hover::before {
    left: 100% !important;
  }
  
  .header__action-btn:active {
    transform: translateY(0px) !important;
    box-shadow: 
      0 3px 10px rgba(59, 130, 246, 0.2),
      inset 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  }
  
  /* Texto de los botones de acción */
  .header__action-btn span {
    color: #f8fafc !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
  }
  
  /* SVG de los botones de acción */
  .header__action-btn svg {
    fill: #94a3b8 !important;
    transition: fill 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
  }
  
  .header__action-btn:hover svg {
    fill: #cbd5e1 !important;
  }
  
  /* Botón específico de logout con color rojo sutil */
  .header__action-btn[href*="logout"],
  .header__action-btn[onclick*="logout"] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(220, 38, 38, 0.08) 100%) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
  }
  
  .header__action-btn[href*="logout"]:hover,
  .header__action-btn[onclick*="logout"]:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.15) 100%) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow: 
      0 6px 15px rgba(239, 68, 68, 0.25),
      0 0 10px rgba(239, 68, 68, 0.15),
      inset 0 1px 2px rgba(255, 255, 255, 0.12) !important;
  }
  
  .header__action-btn[href*="logout"] span,
  .header__action-btn[onclick*="logout"] span {
    color: #fecaca !important;
  }
  
  .header__action-btn[href*="logout"] svg,
  .header__action-btn[onclick*="logout"] svg {
    fill: #f87171 !important;
  }
  
  .header__action-btn[href*="logout"]:hover svg,
  .header__action-btn[onclick*="logout"]:hover svg {
    fill: #fca5a5 !important;
  }
  
  .header__profile-btn div span {
    color: #3b82f6 !important;
    font-size: 11px !important;
  }
  
  /* Mejorar spacing de los botones de perfil */
  .header__action--profile {
    margin-left: 15px !important;
  }
  
  .header__action--profile:first-child {
    margin-left: 0 !important;
  }
  
  /* ======================================
     REEMPLAZAR ICONO DE LOGIN POR TEXTO "LOGIN"
  ====================================== */
  
  /* Ocultar el SVG del botón de login */
  .header__action-btn--signin svg {
    display: none !important;
  }
  
  /* Botón LOGIN con diseño azul moderno consistente */
  .header__action-btn--signin {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
  }

  .header__action-btn--signin::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.6s ease !important;
  }

  .header__action-btn--signin:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
      0 8px 25px rgba(59, 130, 246, 0.4),
      0 0 20px rgba(59, 130, 246, 0.3) !important;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
  }

  .header__action-btn--signin:hover::before {
    left: 100% !important;
  }

  .header__action-btn--signin:active {
    transform: translateY(0px) !important;
    }

    .header__action-btn--signin span {
    display: block !important;
    padding: 8px 20px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    position: relative !important;
    z-index: 2 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Responsive styles */
  @media (max-width: 575px) {
    .header__action-btn--signin span {
      padding: 8px 16px !important;
      font-size: 12px !important;
    }
  }
  
  /* CORRECCIÓN COMPLETA: Botón LOGIN azul consistente en responsive */
  @media (max-width: 1199px) {
    .header__action--signin {
      display: flex !important;
      position: relative !important;
    }
    
    .header__action-btn--signin {
      background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
      border: 1px solid rgba(59, 130, 246, 0.4) !important;
      border-radius: 12px !important;
      padding: 0 !important;
      transition: all 0.3s ease !important;
      position: relative !important;
      overflow: hidden !important;
      display: block !important;
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
    }
  
    .header__action-btn--signin:hover {
      transform: translateY(-2px) !important;
      box-shadow: 
        0 8px 25px rgba(59, 130, 246, 0.4),
        0 0 20px rgba(59, 130, 246, 0.3) !important;
      background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    }
  
    .header__action-btn--signin svg {
      display: none !important;
    }
  
    .header__action-btn--signin span {
      display: block !important;
      padding: 8px 16px !important;
      color: #ffffff !important;
      font-weight: 600 !important;
      font-size: 12px !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
      transition: all 0.3s ease !important;
      margin: 0 !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }
  
    .header__action-btn--signin:hover span {
      color: #ffffff !important;
    }
  }
  
  /* Responsive para móvil mejorado */
  @media (max-width: 575px) {
    .header__action-btn--signin span {
      padding: 8px 10px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      min-width: 80px !important;
      text-align: center !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      white-space: nowrap !important;
    }
    
    .header__actions {
      gap: 8px !important;
    }
    
    .header__action--signin {
      min-width: 80px !important;
      max-width: 90px !important;
    }
    
    .header__action-btn--signin {
      padding: 6px 8px !important;
      min-width: 80px !important;
      max-width: 90px !important;
      justify-content: center !important;
      display: flex !important;
      align-items: center !important;
      box-shadow: none !important;
      border-radius: 6px !important;
    }
    
    .header__action-btn--signin:hover {
      box-shadow: 0 2px 8px rgba(177, 119, 20, 0.3) !important;
    }
  }
  
  /* ======================================
     MEJORAS RESPONSIVE ADICIONALES
  ====================================== */
  
  /* Tablet */
  @media (max-width: 1199px) and (min-width: 768px) {
    .header__actions {
      margin-right: 60px !important;
    }
    
    .header__btn {
      right: 20px;
      top: 28px;
    }
  }
  
  /* Mobile mejorado */
  @media (max-width: 767px) {
    .header__content {
      padding: 0 15px;
    }
    
    .header__logo img {
      height: 60px !important;
    }
    
    .header__actions {
      margin-right: 70px !important; /* Aumentado de 60px a 70px */
    }
    
    .header__action--profile {
      margin-left: 12px !important; /* Aumentado de 10px a 12px */
    }
    
    .header__action--signin {
      margin-right: 8px !important; /* Espacio adicional del lado derecho */
    }
    
    .header__profile-btn {
      padding: 6px 8px !important;
    }
    
    .header__profile-btn div p {
      font-size: 12px !important;
    }
    
    .header__profile-btn div span {
      font-size: 10px !important;
    }
    
    .header__btn {
      right: 15px;
      top: 23px;
      width: 40px;
      height: 40px;
    }
    
    .header__btn span {
      width: 18px;
      height: 2px;
    }
    
    .header__btn span:nth-child(2) {
      width: 14px;
    }
    
    .header__btn span:last-child {
      width: 10px;
    }
  }
  
  /* Mobile pequeño - LOGIN button mejorado */
  @media (max-width: 480px) {
    .header__actions {
      margin-right: 75px !important; /* Mayor espacio en pantallas pequeñas */
    }
    
    .header__action--signin {
      min-width: 70px !important;
      height: auto !important;
      margin-right: 10px !important; /* Más espacio del lado derecho */
    }
    
    .header__action-btn--signin {
      background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
      border: 1px solid rgba(59, 130, 246, 0.4) !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
    }
    
    .header__action-btn--signin:hover {
      transform: translateY(-2px) !important;
      box-shadow: 
        0 8px 25px rgba(59, 130, 246, 0.4),
        0 0 20px rgba(59, 130, 246, 0.3) !important;
      background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    }
    
    .header__action-btn--signin span {
      padding: 6px 12px !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      letter-spacing: 0.3px !important;
      min-width: 50px !important;
      text-align: center !important;
      display: block !important;
      white-space: nowrap !important;
      color: #ffffff !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }
    
    .header__profile-btn img {
      width: 24px !important;
      height: 24px !important;
    }
    
    .header__btn {
      right: 12px; /* Movido más hacia adentro para dar más espacio */
      top: 22px;
      width: 38px; /* Ligeramente más pequeño */
      height: 38px;
    }
  }
  
  /* Móvil extra pequeño */
  @media (max-width: 360px) {
    .header__actions {
      margin-right: 80px !important; /* Aún mayor espacio en pantallas muy pequeñas */
    }
    
    .header__action--signin {
      margin-right: 12px !important;
    }
    
    .header__action-btn--signin {
      min-width: 65px !important;
      background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
      border: 1px solid rgba(59, 130, 246, 0.4) !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
    }
    
    .header__action-btn--signin:hover {
      transform: translateY(-1px) !important;
      box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4), 0 0 20px rgba(59, 130, 246, 0.3) !important;
      background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    }
    
    .header__action-btn--signin span {
      padding: 5px 8px !important;
      font-size: 11px !important;
      min-width: 70px !important;
      max-width: 75px !important;
      font-weight: 700 !important;
      color: #ffffff !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      white-space: nowrap !important;
    }
    
    .header__btn {
      right: 10px; /* Más hacia adentro */
      width: 36px; /* Más pequeño */
      height: 36px;
    }
    
    .header__btn span {
      width: 16px;
      height: 2px;
    }
    
    .header__btn span:nth-child(2) {
      width: 12px;
    }
    
    .header__btn span:last-child {
      width: 8px;
    }
  }
  
  /* Pantallas muy pequeñas (como iPhone SE, etc.) */
  @media (max-width: 320px) {
    .header__actions {
      margin-right: 85px !important; /* Máximo espacio */
    }
    
    .header__action--signin {
      margin-right: 15px !important;
    }
    
    .header__action-btn--signin {
      min-width: 60px !important;
      background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
      border: 1px solid rgba(59, 130, 246, 0.4) !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
    }
    
    .header__action-btn--signin:hover {
      transform: translateY(-1px) !important;
      box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4), 0 0 20px rgba(59, 130, 246, 0.3) !important;
      background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    }
    
    .header__action-btn--signin span {
      padding: 4px 6px !important;
      font-size: 10px !important;
      min-width: 65px !important;
      max-width: 70px !important;
      font-weight: 700 !important;
      letter-spacing: 0.2px !important;
      color: #ffffff !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      white-space: nowrap !important;
    }
    
    .header__btn {
      right: 8px;
      width: 34px;
      height: 34px;
    }
  }
  
  /* ======================================
     MEJORAS ADICIONALES DEL MENU DROPDOWN
  ====================================== */
  
  /* Mejorar los dropdowns del menú */
  .header__nav-menu {
    background: rgba(7, 2, 0, 0.95) !important;
    border: 2px solid #3b82f6 !important;
    border-radius: 10px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8) !important;
  }
  
  .header__nav-menu li {
    border-bottom: 1px solid rgba(177, 119, 20, 0.2) !important;
  }
  
  .header__nav-menu li:last-child {
    border-bottom: none !important;
  }
  
  .header__nav-menu a {
    color: #fff3d1 !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
  }
  
  .header__nav-menu a:hover {
    background: rgba(177, 119, 20, 0.2) !important;
    color: #D4AF37 !important;
  }
  
  /* Animación de entrada para dropdowns */
  @keyframes fadeInDropdown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .header__nav-menu.show {
    animation: fadeInDropdown 0.3s ease !important;
  }
  
  /* ===============================
     SECCIÓN ELIMINADA: Banner duplicado que causaba conflictos de z-index
     Los estilos del banner están ahora centralizados en slides.css
     =============================== */
  
  /* ===============================
     SECCIÓN LIMPIADA: Código duplicado del countdown eliminado
     Los estilos del countdown están definidos en slides.css
     =============================== */
  
  
  
  /* ===========================================
     ESTILOS OBSOLETOS DEL RANKING ELIMINADOS
     (Se mantiene solo el nuevo sistema de ranking moderno)
     =========================================== */

  /* Welcome Kit Notice Styles */
  
  .row-ranking:hover {
      border-color: rgba(177, 119, 20, 0.8) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 25px rgba(177, 119, 20, 0.25) !important;
  }
  
  /* Efecto de brillo sutil en hover */
  .row-ranking:hover::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(177, 119, 20, 0.05), rgba(212, 175, 55, 0.03));
      border-radius: 12px;
      pointer-events: none;
  }
  
  /* ====== CELDA DE POSICIÓN (MEDALLA) ====== */
  .ranking-position {
      background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%) !important;
      color: #ffffff !important;
      font-weight: 800 !important;
      font-size: 14px !important;
      text-shadow: none !important;
      border-radius: 50% !important;
      width: 32px !important;
      height: 32px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      position: relative !important;
      flex-shrink: 0 !important;
      margin-right: 8px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Efectos especiales para las primeras 3 posiciones */
  .ranking-position[data-position="1"] {
      background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
      animation: goldGlow 2s ease-in-out infinite alternate !important;
  }
  
  .ranking-position[data-position="2"] {
      background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%) !important;
      box-shadow: 0 0 15px rgba(192, 192, 192, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }
  
  .ranking-position[data-position="3"] {
      background: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%) !important;
      box-shadow: 0 0 15px rgba(205, 127, 50, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }
  
  @keyframes goldGlow {
      0% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3); }
      100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.3); }
  }
  
  /* ====== CONTENEDOR DE AVATAR CON GUILD BADGE ====== */
  .avatar-container {
      position: relative !important;
      flex-shrink: 0 !important;
  }
  
  .ranking-avatar {
      width: 40px !important;
      height: 40px !important;
      border-radius: 6px !important;
      border: 2px solid rgba(177, 119, 20, 0.6) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
      transition: all 0.3s ease !important;
      display: block !important;
  }
  
  /* Badge del guild elegante y discreto */
  .guild-badge {
      position: absolute !important;
      bottom: -1px !important;
      right: -1px !important;
      width: 16px !important;
      height: 16px !important;
      border-radius: 4px !important;
      border: 1px solid rgba(177, 119, 20, 0.7) !important;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(20, 10, 0, 0.9)) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 
          0 2px 6px rgba(0, 0, 0, 0.6),
          inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
      z-index: 2 !important;
      transition: all 0.3s ease !important;
  }
  
  .guild-badge img {
      width: 12px !important;
      height: 12px !important;
      border-radius: 2px !important;
      border: none !important;
      object-fit: cover !important;
      display: block !important;
      filter: brightness(1.1) contrast(1.1) !important;
      transition: all 0.3s ease !important;
  }
  
  /* Efectos hover para el avatar container */
  .row-ranking:hover .avatar-container .ranking-avatar {
      border-color: rgba(212, 175, 55, 0.8) !important;
      box-shadow: 0 4px 12px rgba(177, 119, 20, 0.3) !important;
  }
  
  .row-ranking:hover .guild-badge {
      border-color: rgba(212, 175, 55, 0.9) !important;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(30, 15, 0, 0.95)) !important;
      box-shadow: 
          0 3px 8px rgba(0, 0, 0, 0.7),
          inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
      transform: scale(1.05) !important;
  }
  
  .row-ranking:hover .guild-badge img {
      filter: brightness(1.15) contrast(1.1) !important;
  }
  
  
  
  /* ====== INFORMACIÓN DEL JUGADOR UNIFICADA ====== */
  .ranking-player-info {
      flex: 1 !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding-left: 6px !important;
      min-width: 160px !important;
  }
  
  .ranking-player-details {
      display: flex !important;
      flex-direction: column !important;
      gap: 2px !important;
  }
  
  .ranking-player-name {
      line-height: 1.2 !important;
  }
  
  .ranking-player-name a {
      color: #D4AF37 !important;
      font-weight: 700 !important;
      font-size: 14px !important;
      text-decoration: none !important;
      transition: color 0.3s ease !important;
  }
  
  .ranking-player-name a:hover {
      color: #FFD700 !important;
      text-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
  }
  
  .ranking-player-class {
      color: #b89960 !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      opacity: 0.9 !important;
  }
  
  /* ====== STATS BADGES CON COLORES AZULES ====== */
  .ranking-level,
  .ranking-reset,
  .ranking-hunt-points {
      background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%) !important;
      padding: 8px 14px !important;
      border-radius: 12px !important;
      border: 2px solid #60a5fa !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      color: #130600 !important;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important;
      margin-right: 8px !important;
      flex-shrink: 0 !important;
      text-align: center !important;
      width: 64px !important;
      box-shadow: 
          0 2px 8px rgba(177, 119, 20, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
      transition: all 0.3s ease !important;
      position: relative !important;
      letter-spacing: 0.5px !important;
      text-transform: uppercase !important;
  }
  
  /* Efecto sutil con colores del sitio */
  .ranking-level::before,
  .ranking-reset::before,
  .ranking-hunt-points::before,
  .guild-points::before {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      background: linear-gradient(135deg, rgba(177, 119, 20, 0.3), rgba(212, 175, 55, 0.2));
      border-radius: 14px;
      z-index: -1;
      opacity: 0.5;
      filter: blur(1px);
  }
  
  .ranking-reset:last-child,
  .ranking-hunt-points {
      margin-right: 0px !important;
  }
  
  .ranking-hunt-points {
      width: 100px !important;
      padding: 8px 16px !important;
  }
  
  /* Efectos hover con colores azules */
  .row-ranking:hover .ranking-level,
  .row-ranking:hover .ranking-reset,
  .row-ranking:hover .ranking-hunt-points {
      background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 50%, #60a5fa 100%) !important;
      box-shadow: 
          0 4px 12px rgba(59, 130, 246, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
      transform: translateY(-2px) !important;
      color: #130600 !important;
      border-color: #93c5fd !important;
  }
  
  .row-ranking:hover .ranking-level::before,
  .row-ranking:hover .ranking-reset::before,
  .row-ranking:hover .ranking-hunt-points::before {
      opacity: 0.7;
      background: linear-gradient(135deg, rgba(96, 165, 250, 0.4), rgba(147, 197, 253, 0.3));
  }
  
  .row-ranking:hover .guild-points {
      background: linear-gradient(135deg, #D4AF37 0%, #F4D03F 50%, #D4AF37 100%) !important;
      box-shadow: 
          0 4px 12px rgba(177, 119, 20, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
      transform: translateY(-2px) !important;
      color: #130600 !important;
      border-color: #F4D03F !important;
  }
  
  .row-ranking:hover .guild-points::before {
      opacity: 0.7;
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.4), rgba(244, 208, 63, 0.3));
  }
  
  
  
  /* ====== RANKINGS DE GUILD (DISEÑO ESPECIAL) ====== */
  .row-ranking.guild-ranking {
      padding: 10px !important;
  }
  
  .guild-ranking .ranking-guild-info {
      flex: 1 !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding-left: 4px !important;
      min-width: 160px !important;
  }
  
  .guild-ranking .guild-logo {
      width: 32px !important;
      height: 32px !important;
      border-radius: 4px !important;
      border: 2px solid rgba(177, 119, 20, 0.6) !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
      flex-shrink: 0 !important;
  }
  
  .guild-ranking .guild-name a {
      color: #D4AF37 !important;
  }

/* ===== GUILD PROFILE STYLES - DISEÑO MODERNO ===== */

/* Guild Profile Banner - Logo Fix */
.profile-banner-section {
  overflow: hidden !important;
}

.profile-banner .profile-thumb {
  overflow: hidden !important;
  border-radius: 8px !important;
  width: 80px !important;
  height: 80px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.profile-banner .profile-thumb img {
  max-width: 80px !important;
  max-height: 80px !important;
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  border: 2px solid rgba(59, 130, 246, 0.5) !important;
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
}

/* Guild Unified Container */
.guild-unified-container {
  padding: 15px !important;
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
}

.guild-logo-section {
  flex-shrink: 0 !important;
  width: 200px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 41, 59, 0.4) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 15px !important;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(59, 130, 246, 0.1) !important;
  overflow: visible !important;
  min-height: 200px !important;
}

.guild-info-section {
  flex: 1 !important;
}

.guild-logo-display {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 120px !important;
}

.guild-logo-display img {
  max-width: 100px !important;
  max-height: 100px !important;
  width: 100px !important;
  height: 100px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) !important;
  position: relative !important;
  z-index: 1 !important;
}

.guild-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;
}

.guild-badge .badge-icon {
  width: 32px !important;
  height: 32px !important;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

.guild-badge .badge-icon i {
  color: white !important;
      font-size: 14px !important;
}

.guild-badge .badge-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}

.guild-name {
  color: #3b82f6 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  line-height: 1.1 !important;
  word-wrap: break-word !important;
  text-align: center !important;
}

.guild-members {
  color: #94a3b8 !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Guild Members Container */
.guild-members-container {
  padding: 15px !important;
  max-height: 500px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.member-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.7) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  min-height: 54px !important;
  max-height: 54px !important;
  box-sizing: border-box !important;
}

.member-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(59, 130, 246, 0.15) !important;
}

.member-card.online {
  border-left: 3px solid #10b981 !important;
}

.member-card.offline {
  border-left: 3px solid #ef4444 !important;
}

.member-class-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  border: 2px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.member-class-avatar .class-icon {
  width: 32px !important;
  height: 32px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  display: block !important;
}

.member-details {
  flex: 1 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  min-height: 38px !important;
  height: 100% !important;
}

/* Nueva clase para meta información en una sola línea */
.member-meta-single-line {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  min-width: 180px !important;
}

.member-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  justify-content: center !important;
  min-width: 120px !important;
}

.member-name {
  color: #3b82f6 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  line-height: 1.2 !important;
  min-width: 80px !important;
  flex-shrink: 0 !important;
}

.member-class {
  color: #94a3b8 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  min-width: 60px !important;
  flex-shrink: 0 !important;
}

.member-meta {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  min-width: 200px !important;
}

.member-resets, .member-position {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  color: #64748b !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  background: rgba(0, 0, 0, 0.2) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(100, 116, 139, 0.2) !important;
  min-width: 35px !important;
  flex-shrink: 0 !important;
}

.member-resets i, .member-position i {
  color: #3b82f6 !important;
  font-size: 8px !important;
}

.status-online {
  color: #10b981 !important;
  font-size: 0.55rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
  background: rgba(16, 185, 129, 0.1) !important;
  padding: 1px 2px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  font-weight: 600 !important;
  min-width: 28px !important;
  flex-shrink: 0 !important;
}

.status-online i {
  color: #10b981 !important;
  font-size: 6px !important;
}

.status-offline {
  color: #ef4444 !important;
  font-size: 9px !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
  background: rgba(239, 68, 68, 0.1) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  font-weight: 600 !important;
  min-width: 32px !important;
  flex-shrink: 0 !important;
}

.status-offline i {
  color: #ef4444 !important;
  font-size: 6px !important;
}

/* Iconos específicos para guild info */
.master-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.score-icon {
  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
}

.members-icon {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
}

.alliance-icon {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
}

.alliance-card .info-value {
  max-width: 200px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Responsive para guild profile */
@media (max-width: 768px) {
  /* Prevenir overflow horizontal en móviles */
  body:has(.profiles) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  .profiles {
    margin: 0 !important;
    padding: 0 10px !important;
    max-width: calc(100vw - 20px) !important;
    overflow-x: hidden !important;
  }
  
  .profiles .row {
    margin: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .profiles .col-12,
  .profiles .col-6 {
    padding: 0 5px !important;
    margin-bottom: 15px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .vs-sidebox {
    margin: 0 !important;
    padding: 15px 10px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  .guild-unified-container {
    flex-direction: column !important;
    gap: 15px !important;
    padding: 10px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .guild-logo-section {
    width: 100% !important;
    padding: 15px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .guild-info-grid-unified {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .member-card {
    padding: 6px 10px !important;
    gap: 8px !important;
    min-height: 45px !important;
    max-height: 45px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .member-class-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  
  .member-class-avatar .class-icon {
    width: 28px !important;
    height: 28px !important;
  }
  
  .guild-members-container {
    max-height: 350px !important;
    gap: 6px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 10px !important;
  }
  
  .member-meta {
    gap: 6px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Responsive para nueva clase member-meta-single-line */
  .member-meta-single-line {
    gap: 6px !important;
    min-width: 150px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .member-name {
    font-size: 12px !important;
    min-width: 70px !important;
  }
  
  .member-class {
    font-size: 9px !important;
    min-width: 50px !important;
  }
  
  .member-resets, .member-position {
    font-size: 9px !important;
    min-width: 30px !important;
    padding: 1px 4px !important;
  }
  
  .status-online, .status-offline {
    font-size: 8px !important;
    min-width: 25px !important;
    padding: 1px 4px !important;
  }
  }
  
  .guild-ranking .guild-name a:hover {
      color: #FFD700 !important;
      text-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
  }
  
  .guild-ranking .guild-points {
      width: 80px !important;
      margin-right: 0 !important;
      padding: 8px 14px !important;
      background: linear-gradient(135deg, #3b82f6 0%, #D4AF37 50%, #3b82f6 100%) !important;
      border-radius: 12px !important;
      border: 2px solid #D4AF37 !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      color: #130600 !important;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) !important;
      box-shadow: 
          0 2px 8px rgba(177, 119, 20, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
      transition: all 0.3s ease !important;
      position: relative !important;
      letter-spacing: 0.5px !important;
      text-transform: uppercase !important;
  }
  
  /* ====== HEADERS DE RANKINGS ====== */
  .ranking-header {
      background: linear-gradient(135deg, rgba(177, 119, 20, 0.35), rgba(212, 175, 55, 0.25)) !important;
      border: 1px solid rgba(177, 119, 20, 0.6) !important;
      border-radius: 10px !important;
      margin-bottom: 8px !important;
      padding: 10px 12px !important;
      display: flex !important;
      align-items: center !important;
      font-weight: 700 !important;
      font-size: 12px !important;
      color: #D4AF37 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Headers mejorados con mejor espaciado */
  .ranking-header .header-rank {
      width: 48px !important;
      text-align: center !important;
      flex-shrink: 0 !important;
  }
  
  .ranking-header .header-player-unified {
      flex: 1 !important;
      text-align: left !important;
      padding-left: 6px !important;
      min-width: 160px !important;
  }
  
  .ranking-header .header-level,
  .ranking-header .header-reset {
      width: 72px !important;
      flex-shrink: 0 !important;
      text-align: center !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      letter-spacing: 0.8px !important;
      margin-right: 8px !important;
  }
  
  .ranking-header .header-hunt-points {
      width: 100px !important;
      flex-shrink: 0 !important;
      text-align: center !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      letter-spacing: 0.3px !important;
  }
  
  
  
  /* Header especial para Guild Ranking */
  .ranking-header.guild-header {
      padding: 10px 12px !important;
  }
  
  .guild-header .header-rank {
      width: 48px !important;
      text-align: center !important;
      flex-shrink: 0 !important;
  }
  
  .guild-header .header-guild-name {
      flex: 1 !important;
      text-align: left !important;
      padding-left: 4px !important;
      min-width: 160px !important;
  }
  
  .guild-header .header-points {
      width: 80px !important;
      flex-shrink: 0 !important;
      text-align: center !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      letter-spacing: 0.8px !important;
  }
  
  /* Welcome Kit Notice Styles */
  .welcome-kit-notice {
    background: linear-gradient(135deg, rgba(177, 119, 20, 0.1) 0%, rgba(177, 119, 20, 0.05) 100%);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 16px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  
  .welcome-kit-notice::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(177, 119, 20, 0.1), transparent);
    transition: left 0.5s ease;
  }
  
  .welcome-kit-notice:hover::before {
    left: 100%;
  }
  
  .welcome-kit-notice:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(177, 119, 20, 0.2);
    border-color: #d4af37;
  }
  
  .welcome-kit-icon {
    font-size: 2.5rem;
    animation: bounce 2s infinite;
    flex-shrink: 0;
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-10px);
    }
    60% {
      transform: translateY(-5px);
    }
  }
  
  .welcome-kit-content {
    flex: 1;
  }
  
  .welcome-kit-content h4 {
    color: #3b82f6;
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(177, 119, 20, 0.3);
  }
  
  .welcome-kit-content p {
    color: #ffffff;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    opacity: 0.9;
  }
  
  /* Responsive styles for welcome kit notice */
  @media (max-width: 768px) {
    .welcome-kit-notice {
      padding: 12px;
      gap: 12px;
      margin: 15px 0;
    }
    
    .welcome-kit-icon {
      font-size: 2rem;
    }
    
    .welcome-kit-content h4 {
      font-size: 1.1rem;
    }
    
    .welcome-kit-content p {
      font-size: 0.9rem;
    }
  }
  
  @media (max-width: 480px) {
    .welcome-kit-notice {
      flex-direction: column;
      text-align: center;
      padding: 15px;
      gap: 10px;
    }
    
    .welcome-kit-icon {
      font-size: 2.2rem;
    }
    
    .welcome-kit-content h4 {
      font-size: 1rem;
    }
    
    .welcome-kit-content p {
      font-size: 0.85rem;
    }
  }
  
  /* Weekly Prize Notice Styles */
  .weekly-prize-notice {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.12) 0%, rgba(15, 23, 42, 0.8) 50%, rgba(59, 130, 246, 0.08) 100%);
    border: 2px solid #3b82f6;
    border-radius: 15px;
    padding: 0;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 
      0 8px 25px rgba(59, 130, 246, 0.3),
      0 0 20px rgba(59, 130, 246, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  
  .weekly-prize-notice::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.8s ease;
  }
  
  .weekly-prize-notice:hover::before {
    left: 100%;
  }
  
  .weekly-prize-notice:hover {
    transform: translateY(-5px);
    box-shadow: 
      0 15px 40px rgba(59, 130, 246, 0.4),
      0 0 30px rgba(59, 130, 246, 0.15);
    border-color: #60a5fa;
  }
  
  .weekly-prize-header {
    background: linear-gradient(135deg, 
      rgba(177, 119, 20, 0.4) 0%, 
      rgba(212, 175, 55, 0.3) 25%, 
      rgba(177, 119, 20, 0.2) 50%, 
      rgba(212, 175, 55, 0.25) 75%, 
      rgba(177, 119, 20, 0.3) 100%);
    padding: 18px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 3px solid rgba(177, 119, 20, 0.4);
    position: relative;
    overflow: hidden;
  }
  
  .weekly-prize-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: headerShimmer 4s ease-in-out infinite;
  }
  
  @keyframes headerShimmer {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
  }
  
  .weekly-prize-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    flex: 1;
  }
  
  .weekly-prize-icon {
    font-size: 2.8rem;
    animation: trophyGlow 3s infinite;
    flex-shrink: 0;
    filter: drop-shadow(0 0 15px rgba(177, 119, 20, 0.7));
    position: relative;
  }
  
  .weekly-prize-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(177, 119, 20, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: iconPulse 2s ease-in-out infinite;
  }
  
  @keyframes iconPulse {
    0%, 100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.3;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.2);
      opacity: 0.6;
    }
  }
  
  @keyframes trophyGlow {
    0%, 100% {
      transform: scale(1) rotate(0deg);
      filter: drop-shadow(0 0 15px rgba(177, 119, 20, 0.7));
    }
    50% {
      transform: scale(1.15) rotate(8deg);
      filter: drop-shadow(0 0 25px rgba(177, 119, 20, 1));
    }
  }
  
  .weekly-prize-title h3 {
    color: #ffffff;
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 15px rgba(177, 119, 20, 0.6);
  }
  
  .prize-subtitle {
    color: #3b82f6;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    margin-top: 2px;
  }
  
  .weekly-prize-content {
    padding: 20px;
  }
  
  .prize-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
  }
  
  .prize-info-item {
    background: linear-gradient(135deg, rgba(177, 119, 20, 0.1) 0%, rgba(19, 6, 0, 0.3) 100%);
    border: 2px solid rgba(177, 119, 20, 0.3);
    border-radius: 10px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
  }
  
  .prize-info-item:hover {
    transform: translateY(-2px);
    border-color: #d4af37;
    box-shadow: 0 5px 15px rgba(177, 119, 20, 0.2);
  }
  
  .prize-info-item.prize-highlight {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(177, 119, 20, 0.15) 100%);
    border-color: #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
  }
  
  .prize-info-item.prize-highlight:hover {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
  }
  
  .info-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
  }
  
  .info-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  
  .info-label {
    color: #e6d7a3;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .info-value {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
  
  .prize-highlight .info-value {
    color: #d4af37;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
  }
  
  /* Compact Leader Styles */
  .current-leader-compact {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3) 0%, rgba(177, 119, 20, 0.2) 100%);
    border: 2px solid #d4af37;
    border-radius: 12px;
    padding: 12px 16px;
    animation: leaderGlow 3s ease-in-out infinite alternate;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    flex-shrink: 0;
    min-width: 200px;
  }
  
  .leader-compact-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  .leader-compact-label {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
  }
  
  .leader-compact-name {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  }
  
  .leader-compact-name a {
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .leader-compact-name a:hover {
    color: #d4af37 !important;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
    transform: scale(1.05);
  }
  
  .leader-compact-points {
    color: #e6d7a3;
    font-size: 0.9rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(177, 119, 20, 0.4) 0%, rgba(19, 6, 0, 0.5) 100%);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(177, 119, 20, 0.5);
  }
  
  .current-leader {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(177, 119, 20, 0.15) 100%);
    border: 2px solid #d4af37;
    border-radius: 10px;
    padding: 0;
    margin: 15px 0;
    overflow: hidden;
    animation: leaderGlow 3s ease-in-out infinite alternate;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
  }
  
  @keyframes leaderGlow {
    0% {
      box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
    }
    100% {
      box-shadow: 0 0 40px rgba(212, 175, 55, 0.7);
    }
  }
  
  .leader-header {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.4) 0%, rgba(177, 119, 20, 0.3) 100%);
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  }
  
  .leader-icon {
    font-size: 1.2rem;
    animation: crownGlow 2s ease-in-out infinite alternate;
  }
  
  @keyframes crownGlow {
    0% {
      filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
    }
    100% {
      filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.8));
    }
  }
  
  .leader-label {
    color: #ffffff;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  }
  
  .leader-info {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  .leader-name {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.1rem;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  }
  
  .leader-name a {
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .leader-name a:hover {
    color: #d4af37 !important;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    transform: scale(1.05);
  }
  
  .leader-points {
    color: #e6d7a3;
    font-size: 0.95rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(177, 119, 20, 0.2) 0%, rgba(19, 6, 0, 0.3) 100%);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(177, 119, 20, 0.3);
  }
  
  .prize-rules {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 41, 59, 0.4) 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 15px;
    padding: 25px;
    margin-top: 20px;
  }
  
  .prize-rules h4 {
    color: #60a5fa;
    font-size: 1.2em;
    font-weight: 700;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
  }
  
  .prize-rules ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .prize-rules li {
    color: #e2e8f0;
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
  }
  
  .prize-rules li::before {
    content: '▶';
    color: #60a5fa;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
  }
  
  .prize-rules li:last-child {
    margin-bottom: 0;
  }
  
  /* Hunt Monsters Section Styles */
  .hunt-monsters-section {
    background: linear-gradient(145deg, rgba(177, 119, 20, 0.08) 0%, rgba(19, 6, 0, 0.6) 50%, rgba(177, 119, 20, 0.05) 100%);
    border: 2px solid rgba(177, 119, 20, 0.3);
    border-radius: 15px;
    padding: 0;
    margin-top: 0;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(177, 119, 20, 0.15);
    height: fit-content;
  }
  
  .hunt-monsters-header {
    background: linear-gradient(135deg, rgba(177, 119, 20, 0.25) 0%, rgba(212, 175, 55, 0.15) 100%);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid rgba(177, 119, 20, 0.2);
  }
  
  .hunt-monsters-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 8px rgba(177, 119, 20, 0.5));
  }
  
  .hunt-monsters-title h4 {
    color: #ffffff;
    margin: 0 0 3px 0;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(177, 119, 20, 0.4);
  }
  
  .hunt-monsters-subtitle {
    color: #e6d7a3;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.9;
  }
  
  .hunt-monsters-grid {
    padding: 12px;
    max-height: 600px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(177, 119, 20, 0.6) rgba(19, 6, 0, 0.3);
  }
  
  .hunt-monsters-grid::-webkit-scrollbar {
    width: 8px;
  }
  
  .hunt-monsters-grid::-webkit-scrollbar-track {
    background: rgba(19, 6, 0, 0.3);
    border-radius: 4px;
  }
  
  .hunt-monsters-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgba(177, 119, 20, 0.8) 0%, rgba(212, 175, 55, 0.6) 100%);
    border-radius: 4px;
    border: 1px solid rgba(177, 119, 20, 0.3);
  }
  
  .hunt-monsters-grid::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, rgba(177, 119, 20, 1) 0%, rgba(212, 175, 55, 0.8) 100%);
  }
  
  .hunt-monster-card {
    background: linear-gradient(135deg, rgba(177, 119, 20, 0.1) 0%, rgba(19, 6, 0, 0.3) 100%);
    border: 1px solid rgba(177, 119, 20, 0.2);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
  }
  
  .hunt-monster-card:hover {
    transform: translateY(-2px);
    border-color: rgba(177, 119, 20, 0.4);
    box-shadow: 0 5px 15px rgba(177, 119, 20, 0.2);
    background: linear-gradient(135deg, rgba(177, 119, 20, 0.15) 0%, rgba(19, 6, 0, 0.4) 100%);
  }
  
  .monster-image {
    flex-shrink: 0;
  }
  
  .monster-image img {
    width: 35px;
    height: 35px;
    border-radius: 6px;
    border: 1px solid rgba(177, 119, 20, 0.3);
    background: rgba(19, 6, 0, 0.5);
    transition: all 0.3s ease;
  }
  
  .hunt-monster-card:hover .monster-image img {
    border-color: rgba(177, 119, 20, 0.6);
    transform: scale(1.05);
  }
  
  .monster-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .monster-name {
    font-size: 0.85rem;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  }
  
  .monster-location {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  
  .location-icon {
    font-size: 0.7rem;
    opacity: 0.8;
  }
  
  .map-name {
    color: #e6d7a3;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(177, 119, 20, 0.2);
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid rgba(177, 119, 20, 0.3);
  }
  
  .monster-points {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .points-icon {
    font-size: 0.7rem;
  }
  
  .points-value {
    color: #90EE90;
    font-size: 0.75rem;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(144, 238, 144, 0.4);
  }
  
  /* Hunt Rankings Section Styles */
  .hunt-rankings-section {
    background: linear-gradient(145deg, rgba(177, 119, 20, 0.08) 0%, rgba(19, 6, 0, 0.6) 50%, rgba(177, 119, 20, 0.05) 100%);
    border: 2px solid rgba(177, 119, 20, 0.3);
    border-radius: 15px;
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(177, 119, 20, 0.15);
  }
  
  /* Desktop: Mantener layout original y limitar a top 50 */
  @media (min-width: 769px) {
    .hunt-rankings-container, .hunt-monsters-container {
      width: auto !important;
      margin-bottom: 0;
    }
    
    .row {
      flex-direction: row;
    }
    
    .col-8 {
      width: 66.666667% !important;
      max-width: 66.666667% !important;
      flex: 0 0 66.666667% !important;
    }
    
    .col-4 {
      width: 33.333333% !important;
      max-width: 33.333333% !important;
      flex: 0 0 33.333333% !important;
    }
    
    .hunt-rankings-grid,
    .hunt-monsters-grid {
      max-height: none;
      overflow-y: visible;
    }
    
    /* En desktop: limitar a top 50 */
    .hunt-ranking-card:nth-child(n+51) {
      display: none;
    }
    
    /* Hunt Guild desktop específico */
    .hunt-rankings-container .hunt-ranking-card .class-avatar {
      width: 45px;
      height: 45px;
      border-radius: 8px;
    }
    
    .hunt-rankings-container .hunt-ranking-card .player-name {
      font-size: 1rem;
    }
    
    .hunt-rankings-container .hunt-ranking-card .player-class {
      font-size: 0.8rem;
    }
    
    .hunt-rankings-container .hunt-ranking-card .player-guild {
      font-size: 0.75rem;
    }
    
    /* Indicador de top 50 en desktop */
    .desktop-top50-indicator {
      background: linear-gradient(135deg, rgba(177, 119, 20, 0.1) 0%, rgba(19, 6, 0, 0.3) 100%);
      border: 1px solid rgba(177, 119, 20, 0.2);
      border-radius: 8px;
      padding: 8px 12px;
      margin-top: 8px;
      text-align: center;
      display: block;
    }
    
    .desktop-top50-indicator .top50-text {
      color: #e6d7a3;
      font-size: 0.8rem;
      font-weight: 500;
      opacity: 0.9;
    }
  }
  
  .hunt-rankings-header {
    background: linear-gradient(135deg, rgba(177, 119, 20, 0.25) 0%, rgba(212, 175, 55, 0.15) 100%);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid rgba(177, 119, 20, 0.2);
  }
  
  .hunt-rankings-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 8px rgba(177, 119, 20, 0.5));
  }
  
  .hunt-rankings-title h4 {
    color: #ffffff;
    margin: 0 0 3px 0;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(177, 119, 20, 0.4);
  }
  
  .hunt-rankings-subtitle {
    color: #e6d7a3;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.9;
  }
  
  .hunt-rankings-grid {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .hunt-ranking-card {
    background: linear-gradient(135deg, rgba(177, 119, 20, 0.1) 0%, rgba(19, 6, 0, 0.3) 100%);
    border: 1px solid rgba(177, 119, 20, 0.2);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    position: relative;
  }
  
  .hunt-ranking-card:hover {
    transform: translateY(-3px);
    border-color: rgba(177, 119, 20, 0.4);
    box-shadow: 0 8px 25px rgba(177, 119, 20, 0.25);
    background: linear-gradient(135deg, rgba(177, 119, 20, 0.15) 0%, rgba(19, 6, 0, 0.4) 100%);
  }
  
  .hunt-ranking-card.rank-gold {
    border-color: #FFD700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(19, 6, 0, 0.3) 100%);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  }
  
  .hunt-ranking-card.rank-gold:hover {
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4);
  }
  
  .hunt-ranking-card.rank-silver {
    border-color: #C0C0C0;
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.15) 0%, rgba(19, 6, 0, 0.3) 100%);
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.2);
  }
  
  .hunt-ranking-card.rank-silver:hover {
    box-shadow: 0 8px 25px rgba(192, 192, 192, 0.3);
  }
  
  .hunt-ranking-card.rank-bronze {
    border-color: #CD7F32;
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.15) 0%, rgba(19, 6, 0, 0.3) 100%);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.2);
  }
  
  .hunt-ranking-card.rank-bronze:hover {
    box-shadow: 0 8px 25px rgba(205, 127, 50, 0.3);
  }
  
  .ranking-position {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
  }
  
  .position-number {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  }
  
  .position-medal {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  }
  
  .player-avatar {
    flex-shrink: 0;
  }
  
  .class-avatar {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    border: 2px solid rgba(177, 119, 20, 0.4);
    background: rgba(19, 6, 0, 0.5);
    transition: all 0.3s ease;
  }
  
  .hunt-ranking-card:hover .class-avatar {
    border-color: rgba(177, 119, 20, 0.7);
    transform: scale(1.05);
  }
  
  .player-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  
  .player-name {
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
  
  .player-name a {
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .player-name a:hover {
    color: #d4af37 !important;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
  }
  
  .player-class {
    color: #e6d7a3;
    font-size: 0.9rem;
    font-weight: 500;
  }
  
  .player-guild {
    color: #3b82f6;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .player-guild a {
    color: #3b82f6 !important;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .player-guild a:hover {
    color: #d4af37 !important;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
  }
  
  .player-points {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
  }
  
  .points-label {
    color: #e6d7a3;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .points-value {
    color: #90EE90;
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(144, 238, 144, 0.4);
  }
  
  .player-location {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
  }
  
  .location-icon {
    font-size: 0.8rem;
    opacity: 0.8;
  }
  
  .location-name {
    color: #e6d7a3;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
  }
  
  .player-week {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    background: rgba(177, 119, 20, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(177, 119, 20, 0.2);
  }
  
  .week-label {
    font-size: 0.7rem;
    color: rgba(177, 119, 20, 0.8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .week-value {
    font-size: 1rem;
    font-weight: 700;
    color: #3b82f6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  /* Responsive styles for weekly prize notice */
  @media (max-width: 768px) {
    .weekly-prize-notice {
      margin: 15px 0;
    }
    
    .weekly-prize-header {
      padding: 15px 20px;
      gap: 12px;
      flex-direction: column;
      align-items: flex-start;
    }
    
    .weekly-prize-title {
      width: 100%;
      align-items: center;
      text-align: center;
    }
    
    .weekly-prize-icon {
      font-size: 2.2rem;
    }
    
    .weekly-prize-title h3 {
      font-size: 1.4rem;
      letter-spacing: 1px;
    }
    
    .prize-subtitle {
      font-size: 0.8rem;
    }
    
    .current-leader-compact {
      width: 100%;
      margin-top: 10px;
      min-width: auto;
      padding: 10px 14px;
    }
    
    .leader-compact-info {
      justify-content: center;
      gap: 8px;
    }
    
    .leader-compact-name {
      font-size: 1.1rem;
    }
    
    .leader-compact-points {
      font-size: 0.85rem;
      padding: 5px 8px;
    }
    
    .weekly-prize-content {
      padding: 15px;
    }
    
    .prize-info-grid {
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .prize-info-item {
      padding: 10px 12px;
      gap: 10px;
    }
    
    .info-icon {
      font-size: 1.3rem;
    }
    
    .info-value {
      font-size: 0.9rem;
    }
    
    .prize-rules {
      padding: 15px;
      margin-top: 15px;
    }
    
    .prize-rules h4 {
      font-size: 1rem;
    }
    
    .prize-rules li {
      font-size: 0.85rem;
    }
    
    /* Hunt Monsters Responsive */
    .hunt-monsters-section {
      margin-top: 15px;
    }
    
    .hunt-monsters-header {
      padding: 10px 12px;
      gap: 8px;
    }
    
    .hunt-monsters-icon {
      font-size: 1.3rem;
    }
    
    .hunt-monsters-title h4 {
      font-size: 0.9rem;
    }
    
    .hunt-monsters-subtitle {
      font-size: 0.7rem;
    }
    
    .hunt-monsters-grid {
      padding: 10px;
      gap: 6px;
      max-height: 500px;
    }
    
    .hunt-monster-card {
      padding: 6px 8px;
      gap: 8px;
    }
    
    .monster-image img {
      width: 30px;
      height: 30px;
    }
    
    .monster-name {
      font-size: 0.8rem;
    }
    
    .monster-location {
      gap: 3px;
    }
    
    .location-icon {
      font-size: 0.6rem;
    }
    
    .map-name {
      font-size: 0.65rem;
      padding: 1px 3px;
    }
    
    .monster-points {
      gap: 3px;
    }
    
    .points-icon {
      font-size: 0.6rem;
    }
    
    .points-value {
      font-size: 0.7rem;
    }
    
    /* Hunt Rankings Responsive */
    .hunt-rankings-section {
      margin-bottom: 15px;
    }
    
    /* Tablet: Cambiar a layout vertical */
    .col-8, .col-4 {
      width: 100%;
      margin-bottom: 15px;
    }
    
    .hunt-rankings-header {
      padding: 12px 15px;
      gap: 10px;
    }
    
    .hunt-rankings-icon {
      font-size: 1.5rem;
    }
    
    .hunt-rankings-title h4 {
      font-size: 1rem;
    }
    
    .hunt-rankings-subtitle {
      font-size: 0.7rem;
    }
    
    .hunt-rankings-grid {
      padding: 12px;
      gap: 10px;
    }
    
    .hunt-ranking-card {
      padding: 12px;
      gap: 12px;
    }
    
    .position-number {
      font-size: 1.1rem;
    }
    
    .position-medal {
      font-size: 1.3rem;
    }
    
    .class-avatar {
      width: 45px;
      height: 45px;
    }
    
    .player-name {
      font-size: 1rem;
    }
    
    .player-class {
      font-size: 0.85rem;
    }
    
    .player-guild {
      font-size: 0.8rem;
    }
    
    .points-value {
      font-size: 1rem;
    }
    
    .location-name {
      font-size: 0.7rem;
    }
    
    .player-week {
      padding: 8px;
      gap: 4px;
    }
    
    .week-label {
      font-size: 0.65rem;
    }
    
    .week-value {
      font-size: 0.9rem;
    }
  }
  
  @media (max-width: 480px) {
    .weekly-prize-notice {
      margin: 10px 0;
    }
    
    .weekly-prize-header {
      flex-direction: column;
      text-align: center;
      padding: 12px 15px;
      gap: 10px;
    }
    
    .weekly-prize-title {
      width: 100%;
      align-items: center;
      text-align: center;
    }
    
    .weekly-prize-icon {
      font-size: 2rem;
    }
    
    .weekly-prize-title h3 {
      font-size: 1.2rem;
      letter-spacing: 0.5px;
    }
    
    .prize-subtitle {
      font-size: 0.75rem;
    }
    
    .current-leader-compact {
      width: 100%;
      margin-top: 8px;
      padding: 8px 12px;
      min-width: auto;
    }
    
    .leader-compact-info {
      justify-content: center;
      gap: 6px;
    }
    
    .leader-compact-label {
      font-size: 0.8rem;
    }
    
    .leader-compact-name {
      font-size: 1rem;
    }
    
    .leader-compact-points {
      font-size: 0.8rem;
      padding: 4px 7px;
    }
    
    .weekly-prize-content {
      padding: 12px;
    }
    
    .prize-info-grid {
      gap: 8px;
      margin-bottom: 12px;
    }
    
    .prize-info-item {
      padding: 8px 10px;
      gap: 8px;
    }
    
    .info-icon {
      font-size: 1.2rem;
    }
    
    .info-value {
      font-size: 0.85rem;
    }
    
    .info-label {
      font-size: 0.7rem;
    }
    
    .prize-rules {
      padding: 12px;
      margin-top: 12px;
    }
    
    .prize-rules h4 {
      font-size: 0.9rem;
      margin-bottom: 8px;
    }
    
    .prize-rules li {
      font-size: 0.8rem;
      margin-bottom: 6px;
      padding-left: 15px;
    }
    
    /* Hunt Monsters Mobile Responsive */
    .hunt-monsters-section {
      margin-top: 10px;
    }
    
    .hunt-monsters-header {
      padding: 6px 8px;
      gap: 4px;
    }
    
    .hunt-monsters-icon {
      font-size: 1rem;
    }
    
    .hunt-monsters-title h4 {
      font-size: 0.75rem;
    }
    
    .hunt-monsters-subtitle {
      font-size: 0.55rem;
    }
    
    .hunt-monsters-grid {
      padding: 6px;
      gap: 3px;
      max-height: 300px;
    }
    
    .hunt-monster-card {
      padding: 3px 5px;
      gap: 4px;
      border-radius: 6px;
    }
    
    .monster-image img {
      width: 22px;
      height: 22px;
      border-radius: 4px;
    }
    
    .monster-name {
      font-size: 0.65rem;
      line-height: 1.2;
    }
    
    .monster-location {
      gap: 1px;
    }
    
    .location-icon {
      font-size: 0.45rem;
    }
    
    .map-name {
      font-size: 0.5rem;
      padding: 1px 2px;
      border-radius: 2px;
    }
    
    .monster-points {
      gap: 1px;
    }
    
    .points-icon {
      font-size: 0.45rem;
    }
    
    .points-value {
      font-size: 0.55rem;
    }
    
    /* Hunt Rankings Mobile Responsive */
    .hunt-rankings-section {
      margin-bottom: 10px;
    }
    
    /* Mobile: Layout vertical con ancho completo */
    .hunt-rankings-container, .hunt-monsters-container {
      width: 100% !important;
      margin-bottom: 15px;
    }
    
    /* En móviles: forzar layout vertical */
    .row {
      flex-direction: column;
    }
    
    .col-8, .col-4 {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
    }
    
    /* En móviles: mostrar solo 5 elementos visibles pero permitir scroll */
    .hunt-rankings-grid {
      max-height: 400px; /* Altura para mostrar ~5 elementos */
      overflow-y: auto;
    }
    
    .hunt-monsters-grid {
      max-height: 350px; /* Altura para mostrar ~5 elementos */
      overflow-y: auto;
    }
    
    /* Scrollbar personalizado para móviles */
    .hunt-rankings-grid::-webkit-scrollbar,
    .hunt-monsters-grid::-webkit-scrollbar {
      width: 6px;
    }
    
    .hunt-rankings-grid::-webkit-scrollbar-track,
    .hunt-monsters-grid::-webkit-scrollbar-track {
      background: rgba(19, 6, 0, 0.3);
      border-radius: 3px;
    }
    
    .hunt-rankings-grid::-webkit-scrollbar-thumb,
    .hunt-monsters-grid::-webkit-scrollbar-thumb {
      background: rgba(177, 119, 20, 0.6);
      border-radius: 3px;
    }
    
    .hunt-rankings-grid::-webkit-scrollbar-thumb:hover,
    .hunt-monsters-grid::-webkit-scrollbar-thumb:hover {
      background: rgba(177, 119, 20, 0.8);
    }
    
    /* Ocultar indicador de top 50 en móviles */
    .desktop-top50-indicator {
      display: none !important;
    }
    
    /* Hunt Guild específico - ajustes responsive */
    .hunt-rankings-container .hunt-ranking-card .class-avatar {
      width: 45px;
      height: 45px;
      border-radius: 8px;
      border: 2px solid rgba(177, 119, 20, 0.4);
      background: rgba(19, 6, 0, 0.5);
      transition: all 0.3s ease;
    }
    
    .hunt-rankings-container .hunt-ranking-card:hover .class-avatar {
      border-color: rgba(177, 119, 20, 0.8);
      transform: scale(1.05);
    }
    
    /* Fallback para logos de guild que no cargan */
    .hunt-rankings-container .hunt-ranking-card .class-avatar:not([src]),
    .hunt-rankings-container .hunt-ranking-card .class-avatar[src=""],
    .hunt-rankings-container .hunt-ranking-card .class-avatar[src*="error"] {
      background: linear-gradient(135deg, rgba(177, 119, 20, 0.3) 0%, rgba(19, 6, 0, 0.7) 100%);
      position: relative;
    }
    
    .hunt-rankings-container .hunt-ranking-card .class-avatar:not([src])::after,
    .hunt-rankings-container .hunt-ranking-card .class-avatar[src=""]::after,
    .hunt-rankings-container .hunt-ranking-card .class-avatar[src*="error"]::after {
      content: "🏰";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.2rem;
      color: rgba(177, 119, 20, 0.8);
    }
    
    /* Hunt Guild responsive tablet */
    .hunt-rankings-container .hunt-ranking-card .class-avatar {
      width: 40px;
      height: 40px;
    }
    
    .hunt-rankings-container .hunt-ranking-card .player-name {
      font-size: 0.85rem;
    }
    
    .hunt-rankings-container .hunt-ranking-card .player-class {
      font-size: 0.7rem;
    }
    
    .hunt-rankings-container .hunt-ranking-card .player-guild {
      font-size: 0.65rem;
    }
    
    .hunt-rankings-header {
      padding: 8px 10px;
      gap: 6px;
    }
    
    .hunt-rankings-icon {
      font-size: 1.1rem;
    }
    
    .hunt-rankings-title h4 {
      font-size: 0.8rem;
    }
    
    .hunt-rankings-subtitle {
      font-size: 0.6rem;
    }
    
    .hunt-rankings-grid {
      padding: 8px;
      gap: 6px;
    }
    
    .hunt-ranking-card {
      padding: 6px 8px;
      gap: 6px;
      border-radius: 8px;
    }
    
    .ranking-position {
      gap: 2px;
    }
    
    .position-number {
      font-size: 0.8rem;
    }
    
    .position-medal {
      font-size: 1rem;
    }
    
    .class-avatar {
      width: 30px;
      height: 30px;
      border-radius: 6px;
    }
    
    .player-info {
      gap: 2px;
    }
    
    .player-name {
      font-size: 0.75rem;
      line-height: 1.2;
    }
    
    .player-class {
      font-size: 0.6rem;
    }
    
    .player-guild {
      font-size: 0.55rem;
    }
    
    .player-points {
      gap: 2px;
    }
    
    .points-label {
      font-size: 0.55rem;
    }
    
    .points-value {
      font-size: 0.7rem;
    }
    
    .player-location {
      gap: 2px;
    }
    
    .location-icon {
      font-size: 0.5rem;
    }
    
    .location-name {
      font-size: 0.55rem;
    }
    
    /* Hunt Guild responsive específico */
    .hunt-rankings-container .hunt-ranking-card .class-avatar {
      width: 30px;
      height: 30px;
      border-radius: 6px;
    }
    
    .hunt-rankings-container .hunt-ranking-card .player-name {
      font-size: 0.75rem;
      line-height: 1.2;
    }
    
    .hunt-rankings-container .hunt-ranking-card .player-class {
      font-size: 0.6rem;
    }
    
    .hunt-rankings-container .hunt-ranking-card .player-guild {
      font-size: 0.55rem;
    }
    
    .player-week {
      padding: 6px;
      gap: 3px;
    }
    
    .week-label {
      font-size: 0.6rem;
    }
    
    .week-value {
      font-size: 0.8rem;
    }
    
  
  }
  
  /* ===== RANKINGS MENU RESPONSIVE ===== */
  
  /* Mobile - Make rankings menu more compact */
  @media (max-width: 768px) {
    .rankings_menu {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px 20px;
      padding: 20px;
      margin-bottom: 30px;
      overflow-y: visible;
    }
    
    .rankings_menu a {
      width: calc(50% - 10px) !important;
      min-width: 140px !important;
      height: 50px !important;
      line-height: 50px !important;
      font-size: 13px !important;
      margin: 0 !important;
      padding: 0 8px !important;
    }
    
    .rankings_menu .ranking-button-main {
      width: 100% !important;
      transform: none !important;
      border-radius: 15px !important;
    }
    
    .rankings_menu .ranking-button-main .top-section {
      height: 70px !important;
      border-radius: 12px !important;
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
    }
    
    .rankings_menu .ranking-button-main .top-section .icons .logo {
      font-size: 12px !important;
      line-height: 70px !important;
      font-weight: 600 !important;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    }
    
    .rankings_menu .ranking-button-main .bottom-section {
      margin-top: 10px !important;
      padding: 8px 4px !important;
    }
    
    .rankings_menu .ranking-button-main .bottom-section .title {
      font-size: 14px !important;
      letter-spacing: 1.5px !important;
      font-weight: 700 !important;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) !important;
    }
  }
  
  /* Small mobile - Even more compact */
  @media (max-width: 480px) {
    .rankings_menu {
      gap: 25px 16px;
      padding: 15px;
      margin-bottom: 25px;
      overflow-y: visible;
    }
    
    .rankings_menu a {
      width: calc(50% - 8px) !important;
      min-width: 120px !important;
      height: 45px !important;
      line-height: 45px !important;
      font-size: 12px !important;
    }
    
    .rankings_menu .ranking-button-main {
      border-radius: 12px !important;
    }
    
    .rankings_menu .ranking-button-main .top-section {
      height: 60px !important;
      border-radius: 10px !important;
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
    }
    
    .rankings_menu .ranking-button-main .top-section .icons .logo {
      font-size: 11px !important;
      line-height: 60px !important;
      font-weight: 600 !important;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    }
    
    .rankings_menu .ranking-button-main .bottom-section {
      margin-top: 8px !important;
      padding: 6px 3px !important;
    }
    
    .rankings_menu .ranking-button-main .bottom-section .title {
      font-size: 13px !important;
      letter-spacing: 1px !important;
      font-weight: 700 !important;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) !important;
    }
  }
  
  /* ===== RESPONSIVE RANKING HEADERS HOME ===== */
  @media (max-width: 768px) {
    .ranking-header {
      padding: 8px 10px !important;
      font-size: 11px !important;
      letter-spacing: 0.3px !important;
    }
    
    .ranking-header .header-rank {
      width: 40px !important;
      font-size: 10px !important;
    }
    
    .ranking-header .header-player-unified {
      min-width: 120px !important;
      padding-left: 4px !important;
      font-size: 10px !important;
    }
    
    .ranking-header .header-level,
    .ranking-header .header-reset {
      width: 28px !important;
      font-size: 9px !important;
      letter-spacing: 0.1px !important;
      margin-right: 2px !important;
    }
    
    /* Mover header level más a la izquierda para alinearlo */
    .ranking-header .header-level {
      margin-left: -48px !important;
      margin-right: 8px !important;
    }
    
    .ranking-header .header-hunt-points {
      width: 80px !important;
      font-size: 10px !important;
      letter-spacing: 0.2px !important;
    }
    
    /* Guild headers */
    .guild-header .header-rank {
      width: 40px !important;
      font-size: 10px !important;
    }
    
    .guild-header .header-guild-name {
      min-width: 120px !important;
      padding-left: 2px !important;
      font-size: 10px !important;
    }
    
    .guild-header .header-points {
      width: 70px !important;
      font-size: 10px !important;
      letter-spacing: 0.5px !important;
    }
  }
  
  @media (max-width: 480px) {
    .ranking-header {
      padding: 6px 8px !important;
      font-size: 10px !important;
      letter-spacing: 0.2px !important;
      margin-bottom: 6px !important;
    }
    
    .ranking-header .header-rank {
      width: 35px !important;
      font-size: 9px !important;
    }
    
    .ranking-header .header-player-unified {
      min-width: 100px !important;
      padding-left: 2px !important;
      font-size: 9px !important;
    }
    
    .ranking-header .header-level,
    .ranking-header .header-reset {
      width: 24px !important;
      font-size: 8px !important;
      letter-spacing: 0px !important;
      margin-right: 1px !important;
    }
    
    /* Mover header level más a la izquierda para alinearlo */
    .ranking-header .header-level {
      margin-left: -46px !important;
      margin-right: 6px !important;
    }
    
    .ranking-header .header-hunt-points {
      width: 65px !important;
      font-size: 9px !important;
      letter-spacing: 0.1px !important;
    }
    
    /* Guild headers */
    .guild-header .header-rank {
      width: 35px !important;
      font-size: 9px !important;
    }
    
    .guild-header .header-guild-name {
      min-width: 100px !important;
      padding-left: 1px !important;
      font-size: 9px !important;
    }
    
    .guild-header .header-points {
      width: 60px !important;
      font-size: 9px !important;
      letter-spacing: 0.3px !important;
    }
  }
  
  @media (max-width: 360px) {
    .ranking-header {
      padding: 5px 6px !important;
      font-size: 9px !important;
      letter-spacing: 0.1px !important;
      margin-bottom: 5px !important;
    }
    
    .ranking-header .header-rank {
      width: 30px !important;
      font-size: 8px !important;
    }
    
    .ranking-header .header-player-unified {
      min-width: 80px !important;
      padding-left: 1px !important;
      font-size: 8px !important;
    }
    
    .ranking-header .header-level,
    .ranking-header .header-reset {
      width: 20px !important;
      font-size: 7px !important;
      letter-spacing: 0px !important;
      margin-right: 0px !important;
    }
    
    /* Mover header level más a la izquierda para alinearlo */
    .ranking-header .header-level {
      margin-left: -44px !important;
      margin-right: 4px !important;
    }
    
    .ranking-header .header-hunt-points {
      width: 55px !important;
      font-size: 8px !important;
      letter-spacing: 0.1px !important;
    }
    
    /* Guild headers */
    .guild-header .header-rank {
      width: 30px !important;
      font-size: 8px !important;
    }
    
    .guild-header .header-guild-name {
      min-width: 80px !important;
      padding-left: 0 !important;
      font-size: 8px !important;
    }
    
    .guild-header .header-points {
      width: 50px !important;
      font-size: 8px !important;
      letter-spacing: 0.2px !important;
    }
  }
  
  /* ===== RESPONSIVE RANKING ELEMENTS HOME ===== */
  @media (max-width: 768px) {
    /* Reducir tamaño del círculo de posición */
    .ranking-position {
      width: 26px !important;
      height: 26px !important;
      font-size: 11px !important;
      margin-right: 6px !important;
    }
    
    /* Reducir tamaño del avatar */
    .ranking-avatar {
      width: 32px !important;
      height: 32px !important;
      border-radius: 4px !important;
      border-width: 1px !important;
    }
    
    /* Reducir tamaño del badge de guild */
    .guild-badge {
      width: 12px !important;
      height: 12px !important;
      border-radius: 3px !important;
      bottom: -1px !important;
      right: -1px !important;
    }
    
    .guild-badge img {
      width: 8px !important;
      height: 8px !important;
      border-radius: 1px !important;
    }
    
    /* Reducir tamaño de los badges de level/reset */
    .ranking-level,
    .ranking-reset,
    .ranking-hunt-points {
      padding: 4px 3px !important;
      border-radius: 6px !important;
      font-size: 9px !important;
      margin-right: 2px !important;
      width: 28px !important;
      letter-spacing: 0px !important;
    }
    
    /* Mover level más a la izquierda y separar mejor */
    .ranking-level {
      margin-left: -48px !important;
      margin-right: 8px !important;
    }
    
    .ranking-hunt-points {
      width: 50px !important;
      padding: 6px 6px !important;
    }
    
    /* Reducir tamaño de textos */
    .ranking-player-name {
      font-size: 12px !important;
    }
    
    .ranking-player-class {
      font-size: 10px !important;
    }
    
    /* Reducir padding del row */
    .row-ranking {
      padding: 8px 10px !important;
      gap: 6px !important;
    }
  }
  
  @media (max-width: 480px) {
    /* Reducir aún más el círculo de posición */
    .ranking-position {
      width: 22px !important;
      height: 22px !important;
      font-size: 10px !important;
      margin-right: 4px !important;
    }
    
    /* Reducir aún más el avatar */
    .ranking-avatar {
      width: 28px !important;
      height: 28px !important;
      border-radius: 3px !important;
    }
    
    /* Reducir aún más el badge de guild */
    .guild-badge {
      width: 10px !important;
      height: 10px !important;
      border-radius: 2px !important;
    }
    
    .guild-badge img {
      width: 6px !important;
      height: 6px !important;
      border-radius: 1px !important;
    }
    
    /* Reducir aún más los badges de level/reset */
    .ranking-level,
    .ranking-reset,
    .ranking-hunt-points {
      padding: 3px 2px !important;
      border-radius: 4px !important;
      font-size: 8px !important;
      margin-right: 1px !important;
      width: 24px !important;
      letter-spacing: 0px !important;
    }
    
    /* Mover level más a la izquierda y separar mejor */
    .ranking-level {
      margin-left: -46px !important;
      margin-right: 6px !important;
    }
    
    .ranking-hunt-points {
      width: 40px !important;
      padding: 4px 4px !important;
    }
    
    /* Reducir aún más los textos */
    .ranking-player-name {
      font-size: 11px !important;
    }
    
    .ranking-player-class {
      font-size: 9px !important;
    }
    
    /* Reducir aún más el padding del row */
    .row-ranking {
      padding: 6px 8px !important;
      gap: 4px !important;
    }
  }
  
  @media (max-width: 360px) {
    /* Reducir al máximo el círculo de posición */
    .ranking-position {
      width: 20px !important;
      height: 20px !important;
      font-size: 9px !important;
      margin-right: 3px !important;
    }
    
    /* Reducir al máximo el avatar */
    .ranking-avatar {
      width: 24px !important;
      height: 24px !important;
      border-radius: 2px !important;
    }
    
    /* Reducir al máximo el badge de guild */
    .guild-badge {
      width: 8px !important;
      height: 8px !important;
      border-radius: 1px !important;
    }
    
    .guild-badge img {
      width: 5px !important;
      height: 5px !important;
      border-radius: 0px !important;
    }
    
    /* Reducir al máximo los badges de level/reset */
    .ranking-level,
    .ranking-reset,
    .ranking-hunt-points {
      padding: 2px 1px !important;
      border-radius: 3px !important;
      font-size: 7px !important;
      margin-right: 0px !important;
      width: 20px !important;
      letter-spacing: 0px !important;
    }
    
    /* Mover level más a la izquierda y separar mejor */
    .ranking-level {
      margin-left: -44px !important;
      margin-right: 4px !important;
    }
    
    .ranking-hunt-points {
      width: 30px !important;
      padding: 3px 3px !important;
    }
    
    /* Reducir al máximo los textos */
    .ranking-player-name {
      font-size: 10px !important;
    }
    
    .ranking-player-class {
      font-size: 8px !important;
    }
    
    /* Reducir al máximo el padding del row */
    .row-ranking {
      padding: 4px 6px !important;
      gap: 3px !important;
    }
  }
  
  /* Popup Modal Styles */
  .modal-popup {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      animation: fadeIn 0.3s ease-in-out;
  }
  
  .modal-popup-content {
      position: relative;
      margin: 5% auto;
      padding: 20px;
      width: 90%;
      max-width: 600px;
      text-align: center;
      animation: slideIn 0.3s ease-out;
  }
  
  .modal-popup-close {
      position: absolute;
      top: -15px;
      right: -15px;
      color: #fff;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
      background: #3b82f6;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      z-index: 10000;
  }
  
  .modal-popup-close:hover,
  .modal-popup-close:focus {
      background: #d4a017;
      transform: scale(1.1);
  }
  
  .popup-image {
      width: 100%;
      height: auto;
      max-width: 100%;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(177, 119, 20, 0.3);
      transition: transform 0.3s ease;
      opacity: 1;
  }
  
  .popup-image:hover {
      transform: scale(1.02);
  }
  
  @keyframes fadeIn {
      from {
          opacity: 0;
      }
      to {
          opacity: 1;
      }
  }
  
  @keyframes slideIn {
      from {
          transform: translateY(-50px);
          opacity: 0;
      }
      to {
          transform: translateY(0);
          opacity: 1;
      }
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
      .modal-popup-content {
          margin: 15% auto;
          width: 90%;
          max-width: 400px;
          padding: 15px;
      }
      
      .modal-popup-close {
          top: -10px;
          right: -10px;
          width: 35px;
          height: 35px;
          font-size: 24px;
      }
      
      .popup-image {
          max-width: 100%;
          height: auto;
      }
  }
  
  @media (max-width: 480px) {
      .modal-popup-content {
          margin: 20% auto;
          width: 85%;
          max-width: 320px;
          padding: 10px;
      }
      
      .modal-popup-close {
          top: -8px;
          right: -8px;
          width: 30px;
          height: 30px;
          font-size: 20px;
      }
      
      .popup-image {
          max-width: 100%;
          height: auto;
      }
  }
  
  @media (max-width: 360px) {
      .modal-popup-content {
          margin: 25% auto;
          width: 80%;
          max-width: 280px;
          padding: 8px;
      }
      
      .modal-popup-close {
          top: -6px;
          right: -6px;
          width: 28px;
          height: 28px;
          font-size: 18px;
      }
  }
  
  /* ===============================
     NEWS MODULE (FEATURED + GRID + SINGLE)
     Palette aligned with site: #3b82f6 / #D4AF37 on dark backgrounds
     Classes are namespaced to avoid collisions
  ================================ */
  
  /* Page background for News pages only (match Home) */
  body.page-news {
    background: #130600 url('../img/CoverNew.png') center center / cover repeat-y fixed;
    min-height: 100vh;
    position: relative;
    width: 100%;
    overflow-x: hidden;
  }
  /* Remove breadcrumb/navigation on News pages */
  body.page-news .breadcrumb { display: none !important; }
  /* Tighten top spacing so the section starts with the title */
  body.page-news .page-title { margin-top: 0 !important; }
  /* Overlay similar to Home */
  body.page-news::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
      135deg,
      rgba(19, 6, 0, 0.85) 0%,
      rgba(26, 12, 0, 0.75) 25%,
      rgba(19, 6, 0, 0.85) 50%,
      rgba(26, 12, 0, 0.75) 75%,
      rgba(19, 6, 0, 0.85) 100%
    );
    z-index: -1;
  }
  /* End News background scope */
  
  .news-list-container {
    display: block;
    margin: 0 auto 25px auto;
  }
  
  /* ===============================
     HOME: BOSS KILLS CAROUSEL
     =============================== */
  .bosskills-carousel { position: relative; overflow: hidden; border-radius: 12px; }
  .bosskills-track { display: flex; will-change: transform; }
  .bosskills-slide { flex: 0 0 100%; }
  .bosskills-dots { display: flex; justify-content: center; gap: 8px; padding: 10px 0 0; }
  .bosskills-dots .bossdot { width: 25px; height: 5px;  border: 1px solid rgba(212,175,55,.6);  cursor: pointer; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
  .bosskills-dots .bossdot.active { background: linear-gradient(to right, #00ffff, #007bff, #8a2be2); box-shadow: 0 0 0 3px rgba(177,119,20,.15); transform: scale(1.05); }
  .bosskills-dots .bossdot:hover { background: linear-gradient(to right, #00ffff, #007bff, #8a2be2); }
  
  /* Featured block */
  .news-featured {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
    align-items: stretch;
    background: #0e0700; /* solid like home */
    border: 1px solid rgba(177,119,20,0.45);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
    margin-bottom: 22px;
  }
  .news-featured-image { position: relative; }
  .news-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .news-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
    display: flex;
    align-items: flex-end;
    padding: 14px;
  }
  .news-featured-category {
    color: #e9c57a;
    background: rgba(177,119,20,0.15);
    border: 1px solid rgba(177,119,20,0.35);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    letter-spacing: .3px;
  }
  .news-featured-content { padding: 16px 16px 18px 6px; display:flex; flex-direction:column; }
  .news-featured-meta { display:flex; gap:14px; color:#d7d7d7; font-size:13px; }
  .news-featured-title { margin:10px 0 12px; font-size:26px; line-height:1.25; }
  .news-featured-title a { color:#fff; text-decoration:none; }
  .news-featured-title a:hover { color:#3b82f6; }
  .news-featured-btn {
    margin-top:auto;
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700;
    color:#1c1400; background:linear-gradient(135deg,#3b82f6,#D4AF37);
    box-shadow:0 6px 18px rgba(177,119,20,.28), inset 0 1px 0 rgba(255,255,255,.18);
    border:1px solid rgba(212,175,55,.45); transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  }
  .news-featured-btn:hover { transform: translateY(-1px); filter:saturate(1.03); box-shadow:0 10px 24px rgba(177,119,20,.38), inset 0 1px 0 rgba(255,255,255,.22); }
  
  /* Recent grid */
  .news-recent-section { margin-top: 12px; }
  .news-section-header { text-align:left; margin-bottom: 10px; }
  .news-section-title { font-size:20px; margin:0 0 2px; color:#fff; }
  .news-section-subtitle { font-size:13px; color:#d7d7d7; margin:0; opacity:.9; }
  
  .news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  
  /* Card */
  .news-card {
    background: #0e0700; /* solid like home */
    border: 1px solid rgba(177,119,20,0.35);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .news-card:hover { transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.35); }
  .news-card-image { position: relative; }
  .news-card-image img { display:block; width:100%; height:170px; object-fit:cover; }
  .news-card-overlay { position:absolute; inset:auto 0 0 0; padding:10px; display:flex; justify-content:flex-start; }
  .news-card-category { color:#e9c57a; background: rgba(177,119,20,0.15); border:1px solid rgba(177,119,20,0.35); border-radius:8px; padding:2px 8px; font-size:12px; }
  .news-card-content { padding: 12px 14px 14px; display:flex; flex-direction:column; }
  .news-card-meta { display:flex; gap:12px; color:#d7d7d7; font-size:12px; margin-bottom:6px; }
  .news-card-title { margin:0 0 6px; font-size:18px; line-height:1.35; }
  .news-card-title a { color:#fff; text-decoration:none; }
  .news-card-title a:hover { color:#3b82f6; }
  .news-card-excerpt { color:#d7d7d7; font-size:14px; line-height:1.55; margin:0 0 10px; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:3.9em; }
  .news-card-btn { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; text-decoration:none; font-weight:600; letter-spacing:.2px; color:#1c1400; background:linear-gradient(135deg,#3b82f6,#D4AF37); box-shadow:0 6px 18px rgba(177,119,20,.28), inset 0 1px 0 rgba(255,255,255,.18); border:1px solid rgba(212,175,55,.45); transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
  .news-card-btn:hover { transform: translateY(-1px); filter:saturate(1.03); box-shadow:0 10px 24px rgba(177,119,20,.38), inset 0 1px 0 rgba(255,255,255,.22); }
  
  /* Single view */
  .news-single-container { margin: 0 auto 20px auto; }
  .news-back-btn { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; text-decoration:none; font-weight:600; color:#1c1400; background:linear-gradient(135deg,#3b82f6,#D4AF37); border:1px solid rgba(212,175,55,.45); box-shadow:0 6px 18px rgba(177,119,20,.28), inset 0 1px 0 rgba(255,255,255,.18); margin-bottom:12px; }
  .news-back-btn:hover { transform: translateY(-1px); filter:saturate(1.03); }
  .news-single { background: #0e0700; border:1px solid rgba(177,119,20,0.45); border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.25); }
  .news-single-header { padding: 16px 18px 8px 18px; }
  .news-single-meta { display:flex; gap:14px; color:#d7d7d7; font-size:13px; align-items:center; flex-wrap:wrap; }
  .news-single-category { color: #e9c57a; background: rgba(177,119,20,0.15); border: 1px solid rgba(177,119,20,0.35); border-radius: 6px; padding: 2px 8px; font-size: 12px; letter-spacing: .3px; }
  .news-single-title { margin: 10px 0 8px; font-size: 26px; line-height: 1.25; }
  .news-single-image img { display:block; width:100%; height:280px; object-fit:cover; }
  .news-single-body { padding: 12px 18px 18px; color:#eaeaea; }
  
  /* Responsive */
  @media (max-width: 1199.98px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .news-featured { grid-template-columns: 1fr; }
    .news-featured-image img { height: 280px; }
  }
  @media (max-width: 767.98px) {
    .news-grid { grid-template-columns: 1fr; }
    .news-card-image img { height: 180px; }
    .news-featured-content { padding: 14px; }
  }
  
  /* ===========================================
     DOWNLOADS - FINAL OVERRIDES (máxima prioridad)
     =========================================== */
  .downloadBlock-content.downloadBlock-content { margin-top: -140px !important; padding-top: 120px !important; padding-bottom: 20px !important; min-height: auto !important; }
  .downloadBlock-content.downloadBlock-content::before { background: linear-gradient(135deg, rgba(10,15,30,0.88) 0%, rgba(17,24,39,0.78) 40%, rgba(2,6,23,0.88) 100%) !important; }
  .downloadBlock-content .page-title.page-title { color: #e5e7eb !important; text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 15px rgba(59,130,246,0.35), 0 0 4px rgba(0,0,0,0.6) !important; }
  .downloadBlock-content .page-title.page-title::after { background: linear-gradient(90deg, transparent 0%, rgba(59,130,246,0.6) 50%, transparent 100%) !important; }
  
  .downloadBlock.downloadBlock { background: rgba(10,15,25,0.65) !important; border: 1px solid rgba(59,130,246,0.18) !important; border-radius: 16px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(15,23,42,0.25) inset !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; max-width: 720px !important; padding: 28px 24px 28px !important; }
  .downloadBlock.downloadBlock:hover { border-color: rgba(59,130,246,0.35) !important; box-shadow: 0 15px 50px rgba(0,0,0,0.35) !important; }
  .downloadBlock .downloadBlock-title { color: #e5e7eb !important; text-shadow: none !important; }
  .downloadBlock .downloadBlock-title span { color: #cbd5e1 !important; text-shadow: none !important; }
  .downloadBlock .downloadBlock-buttons { gap: 16px !important; }
  .downloadBlock .d-button { border-radius: 14px !important; border: 1px solid rgba(59,130,246,0.25) !important; background: rgba(10,15,25,0.55) !important; color: #e5e7eb !important; }
  .downloadBlock .d-button::before { background: linear-gradient(90deg, transparent, rgba(59,130,246,0.08), transparent) !important; }
  .downloadBlock .d-button:hover { border-color: rgba(59,130,246,0.45) !important; background: rgba(10,15,25,0.75) !important; box-shadow: 0 8px 35px rgba(0,0,0,0.25) !important; }
  .downloadBlock .megaButton, .downloadBlock .media-fireButton { color: #e5e7eb !important; }
  
  /* ===============================
     DOWNLOADS - Tarjetas modernas dl-*
     =============================== */
  .dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; max-width: 1000px; margin: 0 auto 40px; position: relative; z-index: 2; }
  @media (max-width: 1024px) { .dl-grid { grid-template-columns: 1fr; max-width: 500px; } }
  
  .dl-card {
    background: rgba(10, 15, 25, 0.8);
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,.35), 0 0 0 1px rgba(15,23,42,.25) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px 18px 18px;
    color: #e5e7eb;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    max-height: 280px;
    overflow: hidden;
  }
  .dl-card:hover { transform: translateY(-2px); border-color: rgba(59,130,246,0.45); box-shadow: 0 12px 35px rgba(0,0,0,.45); }
  .dl-card-header { display:flex; align-items:center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .dl-card-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: .3px; line-height: 1.3; }
  .dl-badge { display:inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; color:#cbd5e1; border:1px solid rgba(59,130,246,.3); background: rgba(2,6,23,.5); }
  .dl-badge--info { border-color: rgba(59,130,246,.45); color:#e5e7eb; }

  .dl-card-actions { display:flex; gap: 12px; flex-wrap: wrap; }
  .dl-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 14px; border-radius: 12px; text-decoration:none; color:#f8fafc; background: linear-gradient(180deg,#142543,#1a2f55); border:1px solid rgba(59,130,246,.35); box-shadow: 0 6px 14px rgba(15,23,42,.35); transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
  .dl-btn:hover { transform: translateY(-1px); background: linear-gradient(180deg,#1a2f55,#203a66); box-shadow: 0 8px 18px rgba(15,23,42,.45); }
  .dl-btn:active { transform: translateY(0); background: linear-gradient(180deg,#10223f,#172b4d); box-shadow: 0 6px 14px rgba(15,23,42,.4); }
  .dl-btn .dl-btn-label { font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }

  .dl-note { margin: 10px 2px 0; color:#cbd5e1; font-size: 13px; opacity:.95; }

  .dl-specs { max-width: 800px; margin: 0 auto; position: relative; z-index: 2; text-align: center; }
  .dl-specs-title { color:#94a3b8; font-size: 16px; font-weight: 500; margin: 0 0 14px; opacity: 0.8; }

  .dl-specs-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    background: rgba(10,15,25,.4); 
    border: 1px solid rgba(59,130,246,.15); 
    border-radius: 14px; 
    padding: 20px 24px; 
    text-align: left; 
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .dl-specs-list li { 
    color: #cbd5e1; 
    font-size: 14px; 
    margin-bottom: 10px; 
    line-height: 1.5; 
    padding: 8px 0;
    border-bottom: 1px solid rgba(59,130,246,.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .dl-specs-list li:last-child { margin-bottom: 0; border-bottom: none; }
  .dl-specs-list strong { 
    color: #e5e7eb; 
    font-weight: 600; 
    min-width: 140px;
    flex-shrink: 0;
  }
  .dl-specs-list span {
    color: #94a3b8;
    font-weight: 500;
    margin-left: auto;
    text-align: right;
  }

  
  /* Tabla de requisitos más moderna y legible */
  .dl-specs .rakings-deidad-customs {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(2,6,23,0.45);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 12px;
    overflow: hidden;
  }
  .dl-specs .rakings-deidad-customs thead th {
    background: rgba(10,15,25,0.75);
    color: #e5e7eb;
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(59,130,246,0.25);
  }
  .dl-specs .rakings-deidad-customs tbody td {
    color: #cbd5e1;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(59,130,246,0.12);
  }
  .dl-specs .rakings-deidad-customs tbody tr:nth-child(odd) td { background: rgba(10,15,25,0.35); }
  .dl-specs .rakings-deidad-customs tbody tr:last-child td { border-bottom: none; }
  .dl-specs .rakings-deidad-customs em { color: #e5e7eb; font-style: normal; opacity: .95; }
  
  /* Scroll horizontal suave en pantallas estrechas */
  .dl-specs .dl-specs-table { overflow-x: auto; }
  
  /* ===============================
     TABLA DE RANKING HOME - ESQUEMA AZUL
     =============================== */
  
  /* Header de la tabla de ranking */
  .ranking-header {
      display: flex;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(17, 24, 39, 0.8));
      border: 1px solid rgba(59, 130, 246, 0.4);
      border-radius: 8px 8px 0 0;
      padding: 12px 8px;
      margin-bottom: 2px;
      font-weight: 600;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }
  
  .ranking-header > div {
      color: #e2e8f0 !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      padding: 0 8px;
  }
  
  .header-rank {
      flex: 0 0 60px;
      text-align: center;
  }
  
  .header-player-unified {
      flex: 2;
      text-align: left;
  }
  
  .header-level,
  .header-reset {
      flex: 0 0 80px;
      text-align: center;
  }
  
  /* Filas de ranking */
  .row-ranking {
      display: flex;
      background: linear-gradient(135deg, rgba(2, 6, 23, 0.6), rgba(17, 24, 39, 0.8));
      border: 1px solid rgba(59, 130, 246, 0.2);
      border-radius: 6px;
      margin-bottom: 4px;
      padding: 8px;
      align-items: center;
      transition: all 0.3s ease;
  }
  
  .row-ranking:hover {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(17, 24, 39, 0.9));
      border-color: rgba(59, 130, 246, 0.4);
      transform: translateX(3px);
  }
  
  /* Posición del ranking */
  .ranking-position {
      flex: 0 0 60px;
      text-align: center;
      background: linear-gradient(135deg, #3b82f6, #60a5fa);
      color: #ffffff !important;
      font-weight: 700;
      border-radius: 6px;
      padding: 8px 4px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  }
  
  /* Información del jugador */
  .ranking-player-info {
      flex: 2;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 12px;
  }
  
  .ranking-player-details {
      display: flex;
      flex-direction: column;
      gap: 2px;
  }
  
  .ranking-player-name {
      color: #60a5fa !important;
      font-weight: 600;
      font-size: 14px;
  }
  
  .ranking-player-name a {
      color: #60a5fa !important;
      text-decoration: none;
      transition: color 0.3s ease;
  }
  
  .ranking-player-name a:hover {
      color: #93c5fd !important;
  }
  
  .ranking-player-class {
      color: #cbd5e1 !important;
      font-size: 12px;
      opacity: 0.8;
  }
  
  /* Level y Reset */
  .ranking-level,
  .ranking-reset {
      flex: 0 0 80px;
      text-align: center;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.1));
      border: 1px solid rgba(59, 130, 246, 0.3);
      border-radius: 6px;
      padding: 6px 8px;
      font-weight: 600;
      color: #60a5fa !important;
      font-size: 13px;
  }
  
  /* Avatar container */
  .avatar-container {
      position: relative;
      display: flex;
      align-items: center;
  }
  
  .avatar-container img {
      border: 1px solid rgba(59, 130, 246, 0.3);
      border-radius: 4px;
      background: rgba(2, 6, 23, 0.5);
  }
  
  .guild-badge {
      margin-left: -8px;
      z-index: 2;
  }
  
  /* ====================================
     NUEVO RANKING RENOVADO - DISEÑO MODERNO
  ====================================== */
  
  .new-ranking-section {
      background: rgba(10, 15, 25, 0.75);
      border: 1px solid rgba(59,130,246,0.25);
      border-radius: 18px;
      padding: 25px;
      margin: 20px 0;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
      backdrop-filter: blur(10px);
      color: #e5e7eb;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  
  .new-ranking-section:hover {
      transform: translateY(-3px);
      border-color: rgba(59,130,246,0.4);
      box-shadow: 0 16px 45px rgba(0,0,0,.5);
  }
  
  .ranking-header-new {
      text-align: center;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
  }
  
  .ranking-title h2 {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: .4px;
      color: #f1f5f9;
      margin-bottom: 8px;
  }
  
  .ranking-title h2 i {
      color: #ffd700;
      margin-right: 10px;
      filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
  }
  
  .ranking-title p {
      color: #cbd5e1;
      font-size: 12px;
      font-weight: 600;
      margin: 0 0 18px 0;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(2,6,23,.5);
      border: 1px solid rgba(59,130,246,.3);
      display: inline-block;
  }
  
  /* ====================================
     PESTAÑAS DEL NUEVO RANKING
  ====================================== */
  
  .new-ranking-tabs {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 20px;
  }
  
  .new-tab-btn {
      background: linear-gradient(180deg,#142543,#1a2f55);
      border: 1px solid rgba(59,130,246,.35);
      border-radius: 12px;
      color: #f8fafc;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      box-shadow: 0 6px 14px rgba(15,23,42,.35);
  }
  
  .new-tab-btn:hover {
      transform: translateY(-1px);
      background: linear-gradient(180deg,#1a2f55,#203a66);
      box-shadow: 0 8px 18px rgba(15,23,42,.45);
  }
  
  .new-tab-btn:active {
      transform: translateY(0);
      background: linear-gradient(180deg,#10223f,#172b4d);
      box-shadow: 0 6px 14px rgba(15,23,42,.4);
  }
  
  .new-tab-btn.active {
      background: linear-gradient(180deg, #3b82f6, #60a5fa);
      border-color: rgba(59,130,246,.6);
      color: white;
      box-shadow: 0 8px 18px rgba(59,130,246,.45);
      transform: translateY(-1px);
  }
  
  .new-tab-btn i {
      font-size: 0.9rem;
  }
  
  .new-tab-content {
      display: none;
  }
  
  .new-tab-content.active {
      display: block;
  }
  
  .ranking-cards-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 650px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
  }
  
  /* ====================================
     CONTENEDORES COMPACTOS
  ====================================== */
  
  .ranking-card-compact {
      display: flex;
      align-items: center;
      background: rgba(10, 15, 25, 0.75);
      border: 1px solid rgba(59,130,246,0.25);
      border-radius: 18px;
      padding: 16px 20px;
      margin-bottom: 12px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 6px 18px rgba(0,0,0,.25);
      backdrop-filter: blur(10px);
      color: #e5e7eb;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  
  .ranking-card-compact:hover {
      transform: translateY(-3px);
      border-color: rgba(59,130,246,0.4);
      box-shadow: 0 16px 45px rgba(0,0,0,.5);
  }
  
  .ranking-position-compact {
      font-size: 1.2rem;
      font-weight: 700;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #3b82f6, #60a5fa);
      color: white;
      margin-right: 12px;
      box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
      flex-shrink: 0;
  }
  
  /* Efectos especiales para las primeras 3 posiciones - COMPACTO */
  .ranking-card-compact.first-place .ranking-position-compact {
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      color: #1a1a1a;
      box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
      animation: goldPulseCompact 2s ease-in-out infinite alternate;
  }
  
  .ranking-card-compact.second-place .ranking-position-compact {
      background: linear-gradient(135deg, #c0c0c0, #e5e5e5);
      color: #1a1a1a;
      box-shadow: 0 4px 15px rgba(192, 192, 192, 0.4);
  }
  
  .ranking-card-compact.third-place .ranking-position-compact {
      background: linear-gradient(135deg, #cd7f32, #daa520);
      color: #1a1a1a;
      box-shadow: 0 4px 15px rgba(205, 127, 50, 0.4);
  }
  
  @keyframes goldPulseCompact {
      0% {
          box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
          transform: scale(1);
      }
      100% {
          box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
          transform: scale(1.05);
      }
  }
  
  .ranking-avatar-compact {
      margin-right: 15px;
      flex-shrink: 0;
  }
  
  .ranking-avatar-compact img {
      width: 45px;
      height: 45px;
      border-radius: 6px;
      border: 1px solid rgba(59, 130, 246, 0.3);
      transition: all 0.3s ease;
  }
  
  .ranking-card-compact:hover .ranking-avatar-compact img {
      border-color: rgba(59, 130, 246, 0.6);
      transform: scale(1.05);
  }
  
  .ranking-guild-logo-compact {
      margin-right: 12px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 45px;
      height: 45px;
  }
  
  .ranking-info-compact {
      flex: 1;
      margin-right: 12px;
  }
  
  .player-name-compact,
  .guild-name-compact {
      font-size: 1rem;
      font-weight: 600;
      color: #f8fafc;
      margin-bottom: 2px;
      line-height: 1.2;
  }
  
  .player-name-compact a,
  .guild-name-compact a {
      color: inherit;
      text-decoration: none;
      transition: color 0.3s ease;
  }
  
  .player-name-compact a:hover,
  .guild-name-compact a:hover {
      color: #60a5fa;
  }
  
  .player-class-compact,
  .guild-master-compact {
      font-size: 0.7rem;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      line-height: 1;
  }
  
  .player-stats-compact,
  .guild-stats-compact {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
  }
  
  .stat-compact {
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 0.75rem;
      color: #cbd5e1;
      background: rgba(59, 130, 246, 0.08);
      padding: 3px 6px;
      border-radius: 8px;
      border: 1px solid rgba(59, 130, 246, 0.15);
      transition: all 0.3s ease;
      font-weight: 500;
  }
  
  .stat-compact:hover {
      background: rgba(59, 130, 246, 0.2);
      border-color: rgba(59, 130, 246, 0.4);
      color: #f8fafc;
  }
  
  .stat-compact i {
      color: #60a5fa;
      font-size: 0.7rem;
  }
  
  .ranking-card {
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.6) 100%);
      border: 1px solid rgba(59, 130, 246, 0.2);
      border-radius: 16px;
      padding: 25px 30px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
  }
  
  .ranking-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
      transition: left 0.6s ease;
  }
  
  .ranking-card:hover::before {
      left: 100%;
  }
  
  .ranking-card:hover {
      transform: translateY(-5px) scale(1.02);
      border-color: rgba(59, 130, 246, 0.5);
      box-shadow: 
          0 20px 40px rgba(0, 0, 0, 0.3),
          0 0 30px rgba(59, 130, 246, 0.2);
  }
  
  .ranking-position-new {
      font-size: 2rem;
      font-weight: 900;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #3b82f6, #60a5fa);
      color: white;
      margin-right: 25px;
      box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
      position: relative;
      z-index: 1;
  }
  
  /* Efectos especiales para las primeras 3 posiciones */
  .ranking-card.first-place .ranking-position-new {
      background: linear-gradient(135deg, #ffd700, #ffed4e);
      color: #1a1a1a;
      box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
      animation: goldPulse 2s ease-in-out infinite alternate;
  }
  
  .ranking-card.second-place .ranking-position-new {
      background: linear-gradient(135deg, #c0c0c0, #e5e5e5);
      color: #1a1a1a;
      box-shadow: 0 8px 25px rgba(192, 192, 192, 0.4);
  }
  
  .ranking-card.third-place .ranking-position-new {
      background: linear-gradient(135deg, #cd7f32, #daa520);
      color: #1a1a1a;
      box-shadow: 0 8px 25px rgba(205, 127, 50, 0.4);
  }
  
  @keyframes goldPulse {
      0% {
          box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
          transform: scale(1);
      }
      100% {
          box-shadow: 0 12px 35px rgba(255, 215, 0, 0.6);
          transform: scale(1.05);
      }
  }
  
  .ranking-avatar-container {
      position: relative;
      margin-right: 25px;
  }
  
  .ranking-avatar-container img {
      width: 80px;
      height: 80px;
      border-radius: 12px;
      border: 3px solid rgba(59, 130, 246, 0.3);
      transition: all 0.3s ease;
  }
  
  .ranking-card:hover .ranking-avatar-container img {
      border-color: rgba(59, 130, 246, 0.8);
      transform: scale(1.05);
  }
  
  .player-glow {
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(96, 165, 250, 0.2));
      border-radius: 16px;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
      filter: blur(8px);
  }
  
  .ranking-card:hover .player-glow {
      opacity: 1;
  }
  
  .ranking-info {
      flex: 1;
  }
  
  .player-name {
      font-size: 1.4rem;
      font-weight: 700;
      color: #f8fafc;
      margin-bottom: 5px;
  }
  
  .player-name a {
      color: inherit;
      text-decoration: none;
      transition: color 0.3s ease;
  }
  
  .player-name a:hover {
      color: #60a5fa;
  }
  
  .player-class {
      font-size: 0.9rem;
      color: #94a3b8;
      margin-bottom: 15px;
      text-transform: uppercase;
      letter-spacing: 1px;
  }
  
  .player-stats {
      display: flex;
      gap: 20px;
  }
  
  .stat-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9rem;
      color: #cbd5e1;
      background: rgba(59, 130, 246, 0.1);
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid rgba(59, 130, 246, 0.2);
      transition: all 0.3s ease;
  }
  
  .stat-item:hover {
      background: rgba(59, 130, 246, 0.2);
      border-color: rgba(59, 130, 246, 0.4);
      color: #f8fafc;
  }
  
  .stat-item i {
      color: #60a5fa;
      font-size: 0.8rem;
  }
  
  .ranking-decoration {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0.1;
  }
  
  .decoration-lines {
      width: 40px;
      height: 40px;
      background: linear-gradient(45deg, transparent 30%, #3b82f6 30%, #3b82f6 70%, transparent 70%);
      background-size: 8px 8px;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
      .new-ranking-section {
          padding: 30px 15px;
          margin: 20px 0;
      }
      
      .ranking-title h2 {
          font-size: 2rem;
      }
      
      .new-ranking-tabs {
          flex-direction: column;
          gap: 10px;
          max-width: 300px;
          margin: 0 auto 25px auto;
      }
      
      .new-tab-btn {
          padding: 10px 16px;
          font-size: 0.85rem;
          justify-content: center;
      }
      
      .ranking-cards-container {
          max-width: 100%;
          gap: 10px;
      }
      
      .ranking-card-compact {
          padding: 12px 15px;
          flex-wrap: wrap;
      }
      
      .ranking-position-compact {
          width: 35px;
          height: 35px;
          font-size: 1.2rem;
          margin-right: 12px;
      }
      
      .ranking-avatar-compact img {
          width: 45px;
          height: 45px;
      }
      
      .ranking-guild-logo-compact {
          width: 45px;
          height: 45px;
      }
      
      .player-name-compact,
      .guild-name-compact {
          font-size: 1rem;
      }
      
      .player-class-compact,
      .guild-master-compact {
          font-size: 0.7rem;
      }
      
      .player-stats-compact,
      .guild-stats-compact {
          gap: 6px;
          flex-wrap: wrap;
      }
      
      .stat-compact {
          font-size: 0.75rem;
          padding: 3px 6px;
      }
  }
  
  @media (max-width: 480px) {
      .ranking-cards-container {
          gap: 15px;
      }
      
      .ranking-card {
          padding: 15px 10px;
      }
      
      .player-name {
          font-size: 1.2rem;
      }
      
      .stat-item {
          font-size: 0.8rem;
          padding: 4px 8px;
      }
  }
  
  /* Estilos para el módulo Unstick Character */
  .unstick-container {
    width: calc(100% - 30px);
    max-width: calc(100% - 30px);
    margin: 0 auto;
    padding: 0;
    margin-top: 0;
    margin-left: 30px;
    margin-right: 0;
  }

  .unstick-table-wrapper {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  width: 100%;
  margin-bottom: 20px;
  margin-top: 10px;
}

  .unstick-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
  }

  .unstick-table thead {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.3) 100%);
    border-bottom: 2px solid rgba(59, 130, 246, 0.4);
  }

  .unstick-table th {
    padding: 15px 20px;
    text-align: left;
    font-weight: 700;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    border: none;
  }

  .unstick-th-avatar {
    width: 80px;
    text-align: center !important;
  }

  .unstick-th-name {
    width: 35%;
  }

  .unstick-th-zen {
    width: 25%;
    text-align: center !important;
  }

  .unstick-th-action {
    width: 25%;
    text-align: center !important;
  }

  .unstick-row {
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
  }

  .unstick-row:hover {
    background: rgba(59, 130, 246, 0.08);
  }

  .unstick-table td {
    padding: 18px 20px;
    border: none;
    vertical-align: middle;
  }

  .unstick-td-avatar {
    text-align: center;
    width: 80px;
  }

  .unstick-td-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
  }

  .unstick-td-avatar img:hover {
    border-color: rgba(59, 130, 246, 0.6);
    transform: scale(1.05);
  }

  .unstick-td-name {
    font-weight: 600;
    color: #e2e8f0;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  }

  .unstick-td-zen {
    text-align: center;
    font-weight: 600;
    color: #60a5fa;
    font-size: 15px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  }

  .unstick-td-action {
    text-align: center;
  }

  .unstick-btn {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%);
    border: 2px solid rgba(59, 130, 246, 0.5);
    border-radius: 10px;
    padding: 8px 16px;
    color: #f1f5f9;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    width: 100%;
  }

  .unstick-btn:hover {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.9) 0%, rgba(59, 130, 246, 0.9) 100%);
    border-color: rgba(96, 165, 250, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.3);
  }

  .unstick-info-box {
  margin-top: 25px;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.15) 100%);
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

  .unstick-info-box p {
    margin: 0;
    color: #e2e8f0;
    font-size: 15px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  }

  /* Responsive para unstick */
  @media (max-width: 768px) {
  .unstick-container {
    padding: 0;
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin-left: 20px;
    margin-right: 0;
  }
  
  .unstick-table th,
  .unstick-table td {
    padding: 10px 8px;
    font-size: 12px;
  }
  
  .unstick-td-avatar img {
    width: 40px;
    height: 40px;
  }
  
  .unstick-btn {
    padding: 6px 12px;
    font-size: 11px;
    width: 100%;
  }
  
  .unstick-th-name,
  .unstick-td-name {
    width: 30%;
  }
  
  .unstick-th-zen,
  .unstick-td-zen {
    width: 20%;
  }
  
  .page-title {
    margin-bottom: 15px;
  }
  
  .unstick-info-box {
    width: 90%;
  }
}

  @media (max-width: 480px) {
  .unstick-container {
    width: calc(100% - 15px);
    max-width: calc(100% - 15px);
    margin-left: 15px;
    margin-right: 0;
  }

  .unstick-table th,
  .unstick-table td {
    padding: 8px 5px;
    font-size: 11px;
  }
  
  .unstick-td-avatar img {
    width: 35px;
    height: 35px;
  }
  
  .unstick-btn {
    padding: 5px 10px;
    font-size: 10px;
  }
  
  .unstick-th-name,
  .unstick-td-name {
    width: 25%;
  }
  
  .unstick-th-zen,
  .unstick-td-zen {
    width: 20%;
  }
  
  .unstick-th-action,
  .unstick-td-action {
    width: 30%;
  }
  
  .unstick-table-wrapper {
    border-radius: 12px;
  }
  
  .unstick-info-box {
    padding: 15px 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    width: 85%;
  }
}

/* ===== MEJORAS DE ALINEACIÓN GENERAL ===== */

/* Asegurar alineación consistente en todas las tarjetas */
.info-card, .member-card {
  box-sizing: border-box !important;
}

/* Alineación específica para valores con iconos */
.info-value img, .member-meta img {
  vertical-align: middle !important;
  margin-right: 4px !important;
}

/* Prevenir desbordamiento de texto largo */
.member-name, .info-value {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Alineación consistente para elementos de estado */
.status-online, .status-offline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

/* Corregir alineación de logos de guild */
.guild-value img {
  vertical-align: middle !important;
  margin-right: 6px !important;
}

/* Mejorar alineación en dispositivos móviles */
@media (max-width: 768px) {
  .member-info {
    min-width: 100px !important;
  }
  
  .member-meta {
    min-width: 150px !important;
  }
  
  /* Optimización específica para grid de información de guild en móviles */
  .guild-info-grid-unified .info-card {
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 8px !important;
  }
  
  .guild-info-grid-unified .info-icon {
    width: 28px !important;
    height: 28px !important;
  }
  
  .guild-info-grid-unified .info-icon i {
    font-size: 12px !important;
  }
  
  .guild-info-grid-unified .info-label {
    font-size: 9px !important;
  }
  
  .guild-info-grid-unified .info-value {
    font-size: 11px !important;
  }
  
  /* Mantener alliance en su columna normal - NO expandir */
  .guild-info-grid-unified .alliance-card {
    grid-column: auto !important; /* Mantiene su posición normal en el grid */
  }
}

/* Breakpoint adicional para pantallas muy pequeñas */
@media (max-width: 480px) {
  /* Reglas específicas para módulo de profiles solamente */
  body:has(.profiles) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  body:has(.profiles) .container,
  body:has(.profiles) .container-fluid {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  body:has(.profiles) .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  body:has(.profiles) [class*="col-"] {
    padding-left: 5px !important;
    padding-right: 5px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .guild-info-grid-unified .info-card {
    min-height: 45px !important;
    max-height: 45px !important;
    padding: 6px !important;
    gap: 6px !important;
  }
  
  .guild-info-grid-unified .info-icon {
    width: 26px !important;
    height: 26px !important;
  }
  
  .guild-info-grid-unified .info-icon i {
    font-size: 11px !important;
  }
  
  .guild-info-grid-unified .info-label {
    font-size: 8px !important;
  }
  
  .guild-info-grid-unified .info-value {
    font-size: 10px !important;
  }
  
  /* Correcciones adicionales para pantallas muy pequeñas */
  .profiles {
    padding: 0 5px !important;
    max-width: calc(100vw - 10px) !important;
  }
  
  .vs-sidebox {
    padding: 10px 8px !important;
  }
  
  .guild-unified-container,
  .guild-members-container {
    padding: 8px !important;
  }
}

/* ===== SCROLLBAR MODERNO GLOBAL - DISEÑO AZUL ===== */

/* Scrollbar principal del body - Diseño moderno */
body::-webkit-scrollbar {
  width: 12px !important;
}

body::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.6) 100%) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(59, 130, 246, 0.1) !important;
}

body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.8) 0%, rgba(37, 99, 235, 0.9) 50%, rgba(29, 78, 216, 1) 100%) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease !important;
}

body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(59, 130, 246, 1) 0%, rgba(37, 99, 235, 1) 50%, rgba(29, 78, 216, 1) 100%) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 
    0 4px 12px rgba(59, 130, 246, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
  transform: scaleX(1.1) !important;
}

body::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(37, 99, 235, 1) 0%, rgba(29, 78, 216, 1) 50%, rgba(30, 64, 175, 1) 100%) !important;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(59, 130, 246, 0.4) !important;
}

/* Scrollbar para Firefox */
html {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(59, 130, 246, 0.8) rgba(15, 23, 42, 0.8) !important;
}

/* Scrollbar general para todos los elementos - Diseño consistente */
*::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

*::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 41, 59, 0.4) 100%) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(59, 130, 246, 0.05) !important;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.7) 0%, rgba(37, 99, 235, 0.8) 100%) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  transition: all 0.3s ease !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 1) 100%) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2) !important;
}

*::-webkit-scrollbar-corner {
  background: rgba(15, 23, 42, 0.8) !important;
  border-radius: 4px !important;
}

/* Scrollbar específico para contenedores de profiles */
.profiles *::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

.profiles *::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4) !important;
  border-radius: 3px !important;
}

.profiles *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.6) 0%, rgba(37, 99, 235, 0.7) 100%) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(59, 130, 246, 0.1) !important;
}

  .profiles *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.8) 0%, rgba(37, 99, 235, 0.9) 100%) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
  }

/* ===== CORRECCIONES RESPONSIVE GLOBALES PARA TODOS LOS MÓDULOS ===== */

/* Prevenir overflow horizontal en todos los módulos */
@media (max-width: 768px) {
  /* Reglas globales para prevenir overflow */
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  .container,
  .container-fluid {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* ===== MYACCOUNT MODULE RESPONSIVE FIXES ===== */
  
  /* Correcciones específicas para myaccount */
  body:has(.collection) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  body:has(.collection) .container,
  body:has(.collection) .container-fluid {
    max-width: calc(100vw - 20px) !important;
    overflow-x: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  body:has(.collection) .row {
    margin: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  body:has(.collection) [class*="col-"] {
    padding-left: 5px !important;
    padding-right: 5px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Cards de información de personajes */
  body:has(.collection) .card-info-character {
    width: calc(100% - 10px) !important;
    max-width: 100% !important;
    margin: 0 5px 15px 5px !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* Grid de dashboard */
  body:has(.collection) .row-grid {
    padding: 15px 10px !important;
    margin: 10px 5px !important;
    max-width: calc(100% - 10px) !important;
    overflow-x: hidden !important;
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  
  /* Collections cards */
  body:has(.collection) .collection {
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 15px !important;
  }
  
  /* Author meta sidebar */
  body:has(.collection) .author__meta {
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 10px 0 !important;
    padding: 15px !important;
  }
  
  /* Usercp sidebar */
  body:has(.collection) .usercp {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 0 5px !important;
  }
  
  body:has(.collection) .usercp li {
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin-bottom: 8px !important;
    height: 45px !important;
  }
  
  /* Botones de compra */
  body:has(.collection) .buycurrencies {
    max-width: 80px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    margin-left: 10px !important;
  }
}

/* Responsive para pantallas muy pequeñas */
@media (max-width: 480px) {
  /* Reglas más estrictas para móviles pequeños */
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  .container,
  .container-fluid {
    max-width: calc(100vw - 20px) !important;
    overflow-x: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  .row {
    margin: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  [class*="col-"] {
    padding-left: 5px !important;
    padding-right: 5px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* MyAccount ultra compacto */
  body:has(.collection) .card-info-character {
    width: calc(100% - 10px) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 0 5px 10px 5px !important;
    padding: 6px !important;
    overflow-x: hidden !important;
  }
  
  body:has(.collection) .row-grid {
    padding: 10px 5px !important;
    margin: 5px !important;
    max-width: calc(100% - 10px) !important;
    gap: 10px !important;
  }
  
  body:has(.collection) .collection {
    padding: 12px !important;
    margin: 0 !important;
  }
  
  body:has(.collection) .author__meta {
    padding: 12px !important;
    margin: 5px 0 !important;
  }
  
  body:has(.collection) .usercp li {
    height: 42px !important;
    margin-bottom: 6px !important;
  }
  
  body:has(.collection) .usercp li a p {
    font-size: 0.8rem !important;
  }
  
  body:has(.collection) .buycurrencies {
    max-width: 70px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
    margin-left: 8px !important;
  }
}

/* Correcciones adicionales para otros módulos que puedan tener problemas similares */
@media (max-width: 768px) {
  /* Downloads module */
  .downloadBlock-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Register module */
  .register-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Login module */
  .login-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Rankings module */
  body:has(table#rankings) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  body:has(table#rankings) .container,
  body:has(table#rankings) .table-responsive {
    max-width: calc(100vw - 20px) !important;
    overflow-x: auto !important;
    margin: 0 10px !important;
  }
  
  /* Hunt rankings module */
  body:has(.hunt-rankings-section) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* News module */
  .news-article {
    max-width: calc(100% - 20px) !important;
    margin: 10px !important;
    overflow-x: hidden !important;
  }
  
  /* General sidebox improvements */
  .vs-sidebox {
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 5px 15px 5px !important;
    padding: 12px !important;
  }
}