* { box-sizing: border-box; }
   
    html, body {
       margin: 0; padding: 0; overflow: hidden;
       width: 100%; height: 100%; 
       position: fixed; top: 0; left: 0; /* Sella la web a los bordes físicos */
       font-family: 'Orbitron', sans-serif;
       color: #fff;
       background-color: #03050a; 
    }
    
    /* --- CAPA AISLADA DE NEBULOSAS (Puro brillo sin afectar a la UI) --- */
    body::before {
        content: '';
        position: absolute; 
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: -1; 
        
        /* 1. Ponemos la pared azul oscuro AQUÍ */
        background-color: #03050a; 
        
        /* 2. Nebulosas con un Naranja Fuego mucho más puro (255, 85, 0) */
        background-image: 
            radial-gradient(circle at 15% 15%, rgba(0, 229, 255, 0.35) 0%, transparent 55%),
            radial-gradient(circle at 85% 85%, rgba(255, 85, 0, 0.45) 0%, transparent 70%),
            radial-gradient(circle at 50% 50%, rgba(0, 85, 255, 0.15) 0%, transparent 70%);
            
        /* 3. El efecto "quemado" que te gustaba, aplicado SOLO a esta capa */
        filter: brightness(1.45) contrast(1.2);
    }
           
    canvas { 
       display: block; 
       width: 100% !important; /* Dejamos que CSS mande sobre el tamaño */
       height: 100% !important; 
       position: absolute; top:0; left:0; z-index: 1;
    }
    
    .ui-layer { position: absolute; z-index: 10; width: 100%; height: 100%; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center;}
    
    #mainMenu { 
      background: radial-gradient(circle, rgba(5, 7, 12, 0.2) 0%, rgba(2, 3, 5, 0.6) 100%);
      pointer-events: auto; width: 100%; height: 100%; 
    }
    .title { 
      font-family: 'Orbitron', sans-serif;
      color: #fff;
      font-size: 5.5rem; font-weight: 900; text-transform: uppercase; 
      margin-bottom: 5px; letter-spacing: 6px;
      text-shadow: 0 0 10px rgba(255,255,255,0.3);
    }
    
    .main-title {
     font-family: 'Orbitron', sans-serif;
     font-size: 5.8rem; 
     font-weight: 900; 
     text-transform: uppercase; 
     margin-bottom: 25px; 
     letter-spacing: 8px;
     position: relative;
     user-select: none; /* Blinda el texto para que no se pueda subrayar/seleccionar */
     /* Animación original de respiración o latido de neón restaurada */
   }
    .title-astro {
      /* Degradado de luz superior a inferior */
      background: linear-gradient(180deg, #ffffff 0%, #00e5ff 60%, #0077ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      /* Capas múltiples de sombra para crear brillo neón tridimensional */
      filter: drop-shadow(0 0 15px rgba(0, 229, 255, 0.7)) 
              drop-shadow(0 0 35px rgba(0, 229, 255, 0.4));
    }

    .title-spin {
      background: linear-gradient(180deg, #ffffff 0%, #ff1155 60%, #990022 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 15px rgba(255, 17, 85, 0.7)) 
              drop-shadow(0 0 35px rgba(255, 17, 85, 0.4));
    }

    .title-sm {
      font-size: 0.75em;
    }
   
    .subtitle { 
      font-family: 'Orbitron', sans-serif;
      color: #00e5ff; font-size: 1.2rem; margin-bottom: 40px; letter-spacing: 4px;
      text-shadow: 0 0 10px rgba(0,229,255,0.8);
    }
    .menu-btn { 
      font-family: 'Orbitron', sans-serif;
      background: rgba(0, 229, 255, 0.05); color: #fff; 
      border: 1px solid rgba(0, 229, 255, 0.3); 
      border-left: 4px solid #00e5ff; /* <--- LÍNEA MODIFICADA (Borde izquierdo sólido) */
      padding: 18px 35px; 
      margin: 10px;
      font-size: 1.15rem; 
      font-weight: bold; border-radius: 4px; cursor: pointer; 
      transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
      width: 380px; 
      letter-spacing: 1.5px;
      backdrop-filter: blur(5px);
      box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 15px rgba(0,0,0,0.3);
    }
    
    .menu-btn:hover { 
      background: rgba(0, 229, 255, 0.15); color: #fff; 
      border-color: #00e5ff; /* <--- LÍNEA AÑADIDA (Ilumina todo el marco) */
      box-shadow: 0 0 20px rgba(0,229,255,0.3), inset 0 0 15px rgba(0,229,255,0.1); 
      transform: scale(1.04); 
      text-shadow: 0 0 8px currentColor; 
    }
        
    .menu-btn.disabled { 
      opacity: 0.4; cursor: not-allowed; border-color: #444 !important; 
      color: #777 !important; background: rgba(0,0,0,0.5) !important; box-shadow: none; 
    }
    .menu-btn.disabled:hover { transform: none; box-shadow: none; text-shadow: none; }
    
    /* Actualizamos también los contenedores para que abracen el nuevo tamaño */
    .btn-wrapper { position: relative; width: 380px; margin: 10px; display: flex; align-items: center; justify-content: center; }
    .btn-wrapper .menu-btn { width: 100%; margin: 0; }
    
    /* El resto se queda igual, saltamos al inline-group */
    .cancel-search-btn {
      position: absolute; right: -50px; top: 50%; transform: translateY(-50%);
      background: rgba(255, 17, 51, 0.1); color: #ff1133; border: 1px solid rgba(255,17,51,0.5);
      border-radius: 4px; padding: 12px 16px; cursor: pointer; font-size: 1.1rem;
      transition: all 0.2s; display: none; font-family: 'Orbitron', sans-serif;
    }
    .cancel-search-btn:hover { background: rgba(255, 17, 51, 0.3); box-shadow: 0 0 10px rgba(255,17,51,0.6); }
    
    .menu-input {
      font-family: 'Orbitron', sans-serif; background: rgba(0, 0, 0, 0.5); border: 1px solid #00e5ff;
      color: #fff; padding: 15px; font-size: 1.2rem; text-align: center; border-radius: 4px;
      width: 240px; /* <--- También ensanchamos el input de la sala un poco (de 200 a 240px) */
      margin-right: 10px; text-transform: uppercase; outline: none;
    }
    
    /* Actualizado a 380px */
    .inline-group { display: flex; align-items: center; justify-content: center; width: 380px; margin: 10px; }
    
         /* --- BOTONES SUPERIORES (SONIDO E IDIOMA) --- */
    .top-left-minimal, .lang-toggle {
      font-family: 'Orbitron', sans-serif;
      background: linear-gradient(90deg, rgba(10, 15, 25, 0.8) 0%, rgba(0, 229, 255, 0.15) 100%);
      color: #00e5ff; border: 1px solid rgba(0, 229, 255, 0.2);
      border-left: 3px solid #00e5ff; 
      padding: 8px 16px; border-radius: 4px; cursor: pointer; 
      font-size: 0.95rem; font-weight: bold; letter-spacing: 1px; 
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
      pointer-events: auto; backdrop-filter: blur(5px);
      box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 10px rgba(0, 229, 255, 0.05);
    }
    
    .top-left-minimal:hover, .lang-toggle:hover { 
      background: linear-gradient(90deg, rgba(0, 229, 255, 0.15) 0%, rgba(0, 229, 255, 0.35) 100%);
      color: #fff; border-color: #00e5ff; transform: translateY(-2px);
      box-shadow: 0 0 15px rgba(0, 229, 255, 0.4), inset 0 0 10px rgba(0, 229, 255, 0.2); 
      text-shadow: 0 0 8px currentColor;
    }

    /* --- CONTADOR DE JUGADORES ONLINE --- */
    #playerCounter {
      font-family: 'Orbitron', sans-serif;
      background: linear-gradient(90deg, rgba(10, 15, 25, 0.8) 0%, rgba(0, 255, 136, 0.15) 100%);
      color: #00ff88; 
      border: 1px solid rgba(0, 255, 136, 0.2);
      border-left: 3px solid #00ff88; 
      padding: 8px 16px; border-radius: 4px; 
      font-size: 0.95rem; font-weight: bold; letter-spacing: 1px; 
      pointer-events: none; backdrop-filter: blur(5px);
      box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 10px rgba(0, 255, 136, 0.05);
      text-shadow: 0 0 10px rgba(0,255,136,0.5);
    }

      /* --- PING DISPLAY (MODO CLÁSICO) --- */
    #pingDisplay {
      position: absolute !important;
      bottom: 25px !important;
      left: 430px !important; 
      top: auto !important;
      right: auto !important;
      font-family: 'Orbitron', sans-serif;
      pointer-events: none;
      z-index: 100;
      opacity: 0.6 !important;
      font-size: 0.8rem !important;
    }

    #playerProfile {
      position: absolute; top: 25px; right: 30px; /* <- Movido arriba a la derecha */
      font-family: 'Orbitron', sans-serif;
      display: none; pointer-events: auto; background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(0, 229, 255, 0.3); padding: 10px 20px; border-radius: 6px;
      text-align: right; /* <- Alineamos el texto a la derecha */
    }
    .btn-logout {
      background: rgba(255, 17, 51, 0.1); border: 1px solid #ff1133; color: #ff1133;
      padding: 4px 10px; border-radius: 4px; cursor: pointer; font-family: 'Orbitron', sans-serif;
      font-size: 0.75rem; margin-top: 5px; transition: 0.2s;
    }
    .btn-logout:hover { background: rgba(255, 17, 51, 0.3); color: #fff; box-shadow: 0 0 10px rgba(255, 17, 51, 0.6); }

    .creator-tag {
      position: absolute; bottom: 20px; right: 30px; font-family: 'Orbitron', sans-serif;
      color: rgba(0, 229, 255, 0.45); font-size: 0.95rem; letter-spacing: 3px;
      text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
      pointer-events: none; text-align: right;
    }

    #hudLayer { display: none; justify-content: space-between; padding: 15px; flex-direction: row; align-items: flex-start;}
    .panel-glass {
      background: rgba(10, 15, 25, 0.6); backdrop-filter: blur(6px); border: 1px solid rgba(0, 229, 255, 0.2); 
      border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); pointer-events: none;
    }

    #gameInfo { padding: 15px 20px; min-width: 190px; }
    #roundText { font-family: 'Orbitron', sans-serif; color: #ffaa00; font-size: 1.25rem; margin-bottom: 8px; text-shadow: 0 0 10px rgba(255,170,0,0.8); }
    #scoreText { color: #ddd; font-size: 1.05rem; line-height: 1.6; font-weight: 700;}
    
       /* --- HUD DE CONTROLES MEJORADO (COMPACTO Y ESCALADO) --- */
    #controlsUI { 
      padding: 8px 10px; /* Extirpados los espacios sobrantes */
      color: #ddd; 
      font-size: 11px; /* Letra un punto más grande */
      line-height: 1.35; /* Interlineado mucho más pegado */
      text-align: right; 
      margin-bottom: 4px; /* Pegamos el panel a los botones */
      width: 100%; 
      font-family: 'Orbitron', sans-serif; 
      letter-spacing: 0.5px;
      background: linear-gradient(90deg, rgba(10, 15, 25, 0.4) 0%, rgba(0, 229, 255, 0.15) 100%);
      border: 1px solid rgba(0, 229, 255, 0.1); 
      border-right: 3px solid #00e5ff; 
      border-radius: 6px; 
      box-shadow: inset -10px 0 20px rgba(0, 229, 255, 0.05), 0 4px 15px rgba(0,0,0,0.5);
    }
    #controlsUI span { 
      text-shadow: 0 0 4px rgba(0,0,0,0.9); 
    }
    
    #actionButtons { 
      display: flex; flex-direction: column; gap: 3px; /* Botones casi pegados entre sí */ 
      width: 100%; transition: all 0.3s; justify-content: flex-end;
    }
    
    .quit-btn {
      font-family: 'Orbitron', sans-serif; 
      background: linear-gradient(90deg, rgba(255, 17, 51, 0.05) 0%, rgba(255, 17, 51, 0.15) 100%); 
      color: #ff1133; 
      border: 1px solid rgba(255,17,51,0.3); 
      border-right: 2px solid #ff1133; 
      padding: 6px 12px; 
      border-radius: 4px; cursor: pointer; font-weight: bold; 
      transition: all 0.2s; pointer-events: auto; font-size: 10px; 
      letter-spacing: 1px; width: 100%;
      text-align: center; /* <-- Vuelven a estar centrados */
    }
    .quit-btn:hover { 
      background: linear-gradient(90deg, rgba(255, 17, 51, 0.1) 0%, rgba(255, 17, 51, 0.3) 100%); 
      border-color: #ff1133; color: #fff; box-shadow: 0 0 15px rgba(255,17,51,0.5); 
    }
    
    .opt-btn {
      font-family: 'Orbitron', sans-serif; 
      background: linear-gradient(90deg, rgba(0, 229, 255, 0.05) 0%, rgba(0, 229, 255, 0.15) 100%); 
      color: #00e5ff; 
      border: 1px solid rgba(0, 229, 255, 0.3); 
      border-right: 2px solid #00e5ff; 
      padding: 6px 12px; 
      border-radius: 4px; cursor: pointer; font-weight: bold; 
      transition: all 0.2s; pointer-events: auto; font-size: 10px; 
      letter-spacing: 1px; width: 100%;
      text-align: center; /* <-- Vuelven a estar centrados */
    }
    .opt-btn:hover { 
      background: linear-gradient(90deg, rgba(0, 229, 255, 0.1) 0%, rgba(0, 229, 255, 0.3) 100%); 
      color: #fff; box-shadow: 0 0 15px rgba(0,229,255,0.5); border-color: #00e5ff; 
    }

    /* --- MODO ICONOS (HUD OCULTO) --- */
        /* Modifica tu clase .icon-mode para añadirle el background */
    .icon-mode {
      padding: 0 !important;
      width: 40px !important;
      height: 40px !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      border-radius: 50% !important; 
      border-width: 2px !important;
      background: rgba(10, 15, 25, 0.8) !important; /* <--- AÑADE ESTA LÍNEA */
    }
    .icon-mode svg {
      width: 20px;
      height: 20px;
      /* currentColor copia automáticamente el cian o el rojo del botón */
      filter: drop-shadow(0 0 6px currentColor); 
      transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .icon-mode:hover svg {
      transform: scale(1.2); /* Efecto táctil al pasar el ratón */
    }
   
    #skillsHUD { 
        position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); 
        display: flex; gap: 10px; pointer-events: none; /* Separación reducida de 25px a 10px */
    }
    
 .cyber-skill-card {
       background: rgba(10, 15, 25, 0.85);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 6px;
       padding: 8px 10px; /* <--- Padding lateral más ajustado */
       width: 215px; /* <--- El punto dulce: ni muy grande ni muy pequeño */
       box-shadow: 0 4px 15px rgba(0,0,0,0.5);
       display: flex; flex-direction: column; gap: 8px;
       backdrop-filter: blur(5px);
       transition: all 0.3s ease;
   }
   
   /* Efectos de colores al cargar */
   .cyber-skill-card.ready-cyan { border-top: 2px solid #00e5ff; box-shadow: 0 -2px 15px rgba(0,229,255,0.15), 0 4px 15px rgba(0,0,0,0.5); }
   .cyber-skill-card.ready-orange { border-top: 2px solid #ffaa00; box-shadow: 0 -2px 15px rgba(255,170,0,0.15), 0 4px 15px rgba(0,0,0,0.5); }
   .cyber-skill-card.ready-pink { border-top: 2px solid #ff1155; box-shadow: 0 -2px 15px rgba(255,17,85,0.15), 0 4px 15px rgba(0,0,0,0.5); }
   .cyber-skill-card.ready-hook { border-top: 2px solid #ffffff; box-shadow: 0 -2px 15px rgba(255,255,255,0.15), 0 4px 15px rgba(0,0,0,0.5); }

   .skill-info { 
       display: flex; 
       justify-content: space-between; 
       align-items: center; 
       gap: 6px; 
       width: 100%; /* Asegura que no se desborde */
   }
   
   /* Etiqueta del botón (EJ: CLICK IZQ / X) */
   .skill-bind {
       font-family: 'Orbitron', sans-serif; 
       font-size: 8.5px; /* <--- Reducido ligeramente */
       color: #fff;
       background: rgba(255,255,255,0.1); 
       padding: 3px 5px; /* <--- Más apretado */
       border-radius: 3px; 
       letter-spacing: 0px; /* <--- Quitamos espaciado extra */
       white-space: nowrap; 
       flex-shrink: 0; /* <--- Evita que la cajita gris se deforme */
   }
   
   /* Texto de estado (EJ: ENCIERRO (IZQ)) */
   .skill-status {
       font-family: 'Orbitron', sans-serif; 
       font-size: 9.5px; /* <--- Reducido medio punto */
       font-weight: bold;
       color: #fff; 
       letter-spacing: 0px; /* <--- Letras más juntas */
       text-shadow: 0 0 5px rgba(255,255,255,0.5); 
       text-align: right;
       white-space: nowrap; 
       overflow: hidden; /* <--- EL SEGURO: Si algo es enorme, no se sale de la tarjeta */
       text-overflow: ellipsis; /* Pone "..." si el texto es demasiado largo */
   }
    
    .skill-track {
        width: 100%; height: 6px; /* Más fina y elegante */
        background: rgba(0,0,0,0.8); border-radius: 3px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05);
    }
    
    .skill-bar-fill { height: 100%; width: 100%; transition: width 0.1s linear, background 0.3s; }
        /* --- MARCA DE AGUA (ESTILO TÍTULO PRINCIPAL) --- */
    #watermark {
      position: absolute; bottom: 25px; right: 30px; font-family: 'Orbitron', sans-serif;
      font-size: 1.5rem; font-weight: 900; letter-spacing: 5px; pointer-events: none;
      opacity: 0.65; /* Ligeramente translúcido para que no moleste en la partida */
    }
    .watermark-astro { 
      background: linear-gradient(180deg, #ffffff 0%, #00e5ff 60%, #0077ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.6));
    }
    .watermark-spin { 
      background: linear-gradient(180deg, #ffffff 0%, #ff1155 60%, #990022 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 10px rgba(255, 17, 85, 0.6));
    }
   
/* --- HOLOGRAMA DE ANUNCIOS (E-SPORTS LIGERO Y LIMPIO) --- */
    #announcement { 
      display: none; 
      position: absolute; 
      top: 50%; 
      left: 50%; /* Lo volvemos a centrar puramente */
      transform: translate(-50%, -50%); 
      text-align: center; 
      pointer-events: none; 
      z-index: 99999; 
      transition: top 0.4s ease-in-out;
      width: 100vw; 
      
      /* Limpiamos la franja gigante para que no tape la visión */
      background: none;
      padding: 0;
      border: none;
      box-shadow: none;
      backdrop-filter: none;
    }
    
    /* Contenedor neutral */
    .announce-text { 
      font-family: 'Orbitron', sans-serif; 
      font-weight: 900; 
      font-size: clamp(2rem, 6vw, 4rem); 
      letter-spacing: 12px; 
      text-transform: uppercase;
      margin: 0;
      display: inline-block;
      
      /* Le damos un aura brillante solo alrededor de las letras */
      background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, transparent 60%);
      padding: 30px 60px;
    }
    
    /* Texto Genérico (Oro holográfico premium) */
    .fire-text {
      background: linear-gradient(180deg, #ffffff 0%, #ffea00 45%, #ffaa00 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 15px rgba(255, 170, 0, 0.8)) drop-shadow(0 0 30px rgba(255, 170, 0, 0.4));
    }
    
    /* Matamos las flechas feas antiguas */
    .announce-text::before, .announce-text::after { display: none; }
    
    /* Animación E-Sports: Fundido con expansión de letras y desenfoque */
    @keyframes pop { 
      0% { 
          transform: scale(0.9); 
          opacity: 0; 
          letter-spacing: 0px; 
          filter: blur(10px) brightness(2); 
      } 
      30% { 
          opacity: 1; 
          filter: blur(0px) brightness(1.5); 
      }
      100% { 
          transform: scale(1); 
          opacity: 1; 
          letter-spacing: 12px; 
          filter: blur(0px) brightness(1); 
      } 
    }

  /* --- PANTALLA DE RESULTADOS E-SPORTS --- */
    #resultsScreen { 
      display: none; 
      background: radial-gradient(circle at center, rgba(0, 229, 255, 0.10) 0%, rgba(2, 4, 8, 0.82) 100%); 
      backdrop-filter: blur(8px); 
      pointer-events: auto; width: 100%; height: 100%; z-index: 99999; 
      flex-direction: column; align-items: center; justify-content: center;
    }

    .results-subheader {
      font-family: 'Orbitron', sans-serif;
      font-size: 0.8rem;
      color: #00e5ff;
      letter-spacing: 6px;
      margin-bottom: 6px;
      opacity: 0.8;
      text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    }

    #winnerText {
      font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
      letter-spacing: 4px;
      margin-bottom: 25px !important;
      text-transform: uppercase;
      animation: pulseWinner 2s infinite alternate ease-in-out;
    }
    
    @keyframes pulseWinner {
      0% { transform: scale(1); filter: brightness(1); }
      100% { transform: scale(1.03); filter: brightness(1.15) drop-shadow(0 0 15px rgba(255,255,255,0.2)); }
    }
    
    #leaderboard { 
      margin: 0 0 30px 0; 
      display: flex; flex-direction: column; gap: 10px; 
      width: 720px; max-width: 92vw; 
    }
    
    @keyframes slideInRow {
        0% { transform: translateX(50px); opacity: 0; filter: blur(5px); }
        100% { transform: translateX(0); opacity: 1; filter: blur(0); }
    }
    
    .leaderboard-row { 
      display: flex; justify-content: space-between; align-items: center; 
      background: linear-gradient(90deg, rgba(16, 24, 40, 0.85) 0%, rgba(5, 8, 15, 0.92) 100%);
      border: 1px solid rgba(255, 255, 255, 0.08); 
      border-left: 5px solid var(--p-color, #00e5ff); 
      padding: 12px 22px; 
      border-radius: 6px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.6), inset 0 0 15px rgba(255,255,255,0.02); 
      backdrop-filter: blur(10px);
      transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
      opacity: 0; 
      animation: slideInRow 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    /* Estilo especial para el Campeón (#1) */
    .leaderboard-row.is-champion {
      background: linear-gradient(90deg, color-mix(in srgb, var(--p-color) 22%, rgba(10,15,25,0.95)) 0%, rgba(10, 15, 25, 0.95) 100%);
      border-color: var(--p-color);
      border-left-width: 7px;
      box-shadow: 0 0 25px color-mix(in srgb, var(--p-color) 35%, transparent), inset 0 0 20px color-mix(in srgb, var(--p-color) 15%, transparent);
    }

    /* Sutil borde derecho si eres tú (y no eres el #1) */
    .leaderboard-row.is-me-row:not(.is-champion) {
      border-right: 3px solid #00e5ff;
      background: linear-gradient(90deg, rgba(0, 229, 255, 0.07) 0%, rgba(8, 12, 22, 0.92) 100%);
    }
    
    .leaderboard-row:hover { 
      transform: scale(1.015) translateX(8px); 
      border-color: var(--p-color);
      box-shadow: 0 0 20px color-mix(in srgb, var(--p-color) 30%, transparent);
    }

    .player-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .rank-number { font-family: 'Orbitron', sans-serif; font-size: 1.45rem; font-weight: 900; width: 42px; text-align: left; flex-shrink: 0; }

    /* Rombo/Caja de Rango en Resultados */
    .res-rank-box {
      width: 34px; height: 34px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0, 0, 0, 0.6);
      border: 1px solid var(--r-color, #555);
      border-radius: 6px;
      font-size: 1.15rem;
      box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    }
    .res-rank-box.bot-box {
      border-color: rgba(255,255,255,0.15);
      color: #777; font-size: 0.6rem; font-weight: 900; letter-spacing: 1px;
    }

    .res-name-block { display: flex; flex-direction: column; min-width: 0; }
    .res-player-name { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.15rem; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .res-you-tag {
      background: rgba(0, 229, 255, 0.15); color: #00e5ff; border: 1px solid #00e5ff;
      font-size: 0.6rem; font-weight: 900; padding: 2px 6px; border-radius: 3px; letter-spacing: 1px;
      box-shadow: 0 0 8px rgba(0, 229, 255, 0.3); flex-shrink: 0;
    }
    .res-flee-tag {
      background: rgba(255, 17, 51, 0.15); color: #ff1133; border: 1px solid #ff1133;
      font-size: 0.6rem; font-weight: 900; padding: 2px 6px; border-radius: 3px; letter-spacing: 1px; flex-shrink: 0;
    }

    /* Bloque derecho: Rondas y Recompensa */
    .res-stats-group { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
    .res-stat-label { font-family: 'Orbitron', sans-serif; font-size: 0.62rem; color: rgba(255,255,255,0.45); letter-spacing: 1.5px; margin-bottom: 5px; text-transform: uppercase; }
    
    .player-score { text-align: center; line-height: 1; }
    .res-rounds-num { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.35rem; color: #fff; }

    /* Cristales de Ronda (3 Rombos) */
    .res-round-pips { display: flex; gap: 6px; align-items: center; }
    .res-pip {
      width: 9px; height: 9px;
      transform: rotate(45deg);
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s;
    }
    .res-pip.active {
      background: var(--pip-color, #00e5ff);
      border-color: #ffffff;
      box-shadow: 0 0 10px var(--pip-color, #00e5ff);
    }

    .res-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.1); }
    .res-reward-box { text-align: right; min-width: 105px; display: flex; flex-direction: column; align-items: flex-end; }

    /* Cápsulas de Recompensa */
    .res-reward-pill {
      font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.05rem;
      padding: 4px 10px; border-radius: 4px; display: inline-block;
    }
    .res-reward-pill span { font-size: 0.65rem; opacity: 0.8; }
    .res-reward-pill.win { color: #00ff88; background: rgba(0, 255, 136, 0.1); border: 1px solid rgba(0, 255, 136, 0.35); text-shadow: 0 0 12px rgba(0,255,136,0.5); }
    .res-reward-pill.zero { color: #88aacc; background: rgba(136, 170, 204, 0.08); border: 1px solid rgba(136, 170, 204, 0.2); opacity: 0.75; font-size: 0.95rem; }
    .res-reward-pill.priv { color: #ffaa00; background: rgba(255, 170, 0, 0.1); border: 1px solid rgba(255, 170, 0, 0.3); font-size: 0.75rem; letter-spacing: 1px; }
    .res-reward-pill.bot { color: #555; font-size: 0.85rem; }
    .res-reward-pill.flee { color: #ff1133; background: rgba(255, 17, 51, 0.1); border: 1px solid rgba(255, 17, 51, 0.3); font-size: 0.8rem; }
    .pts-label { font-size: 0.85rem; color: #aaa; margin-left: 5px; }

    .menu-step { display: flex; flex-direction: column; align-items: center; width: 100%; }

        /* --- ESTILOS DEL CHAT CIBERNÉTICO --- */
    #chatContainer {
      position: absolute; bottom: 20px; left: 20px; width: 380px; /* <--- Subido de 340px a 380px (~15%) */
      display: flex; flex-direction: column; pointer-events: auto; z-index: 25;
      filter: drop-shadow(0 4px 15px rgba(0,0,0,0.5));
    }
    
    #chatHeader {
      background: linear-gradient(90deg, rgba(10, 15, 25, 0.9) 0%, rgba(0, 229, 255, 0.15) 100%);
      border: 1px solid rgba(0, 229, 255, 0.2); 
      border-left: 4px solid #00e5ff; /* Borde asimétrico HUD */
      border-bottom: none;
      border-radius: 6px 6px 0 0; padding: 8px 12px; 
      display: flex; justify-content: space-between; align-items: center; cursor: pointer;
      backdrop-filter: blur(5px);
      transition: all 0.2s;
    }
    #chatHeader:hover { background: linear-gradient(90deg, rgba(10, 15, 25, 0.95) 0%, rgba(0, 229, 255, 0.3) 100%); }
    
    .chat-tabs { display: flex; gap: 8px; }
    .chat-tab {
      background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 229, 255, 0.2); color: #88aacc;
      font-family: 'Orbitron', sans-serif; font-size: 9px; padding: 4px 8px; border-radius: 3px; 
      cursor: pointer; transition: all 0.2s; letter-spacing: 1px;
    }
    .chat-tab.active { 
      background: rgba(0, 229, 255, 0.2); color: #fff; border-color: #00e5ff; 
      box-shadow: 0 0 10px rgba(0,229,255,0.4); text-shadow: 0 0 5px #fff;
    }
    
    #chatTitle { font-family: 'Orbitron', sans-serif; font-size: 11px; color: #00e5ff; letter-spacing: 1px; font-weight: bold; pointer-events: none; text-shadow: 0 0 8px #00e5ff;}
    #btnToggleChat {
      background: none; border: none; color: #00e5ff; cursor: pointer; font-weight: bold;
      transition: all 0.2s; padding: 0; font-size: 16px; line-height: 1; pointer-events: none;
    }
    
    #chatBody { display: flex; flex-direction: column; height: 230px; } /* <--- Subido de 200px a 230px */
    
    .chat-messages-box {
      flex-grow: 1; 
      background: rgba(5, 7, 12, 0.85); backdrop-filter: blur(6px);
      border: 1px solid rgba(0, 229, 255, 0.2); 
      border-left: 4px solid #00e5ff; /* Continúa la línea de neón */
      border-bottom: none; border-top: none;
      padding: 10px; overflow-y: auto; color: #ddd; font-size: 12px;
      display: flex; flex-direction: column; gap: 6px;
    }
    /* Scrollbar de neón */
    .chat-messages-box::-webkit-scrollbar { width: 4px; }
    .chat-messages-box::-webkit-scrollbar-thumb { background: #00e5ff; border-radius: 4px; box-shadow: 0 0 5px #00e5ff; }
    
    #chatInputContainer { display: flex; width: 100%; }
    
    #chatInput {
      flex-grow: 1; background: rgba(0, 0, 0, 0.7); 
      border: 1px solid rgba(0, 229, 255, 0.3);
      border-left: 4px solid #00e5ff; /* Remata la línea de neón */
      border-radius: 0 0 0 6px; padding: 10px 12px; color: #fff; 
      font-family: 'Montserrat', sans-serif; font-size: 12px; outline: none; transition: all 0.2s;
    }
    #chatInput:focus { background: rgba(10, 15, 25, 0.9); border-color: #00e5ff; box-shadow: inset 0 0 10px rgba(0,229,255,0.2); }
    
    #btnSendChat {
      background: linear-gradient(90deg, rgba(0, 229, 255, 0.1) 0%, rgba(0, 229, 255, 0.2) 100%); 
      border: 1px solid rgba(0, 229, 255, 0.3); border-left: none;
      border-radius: 0 0 6px 0; color: #00e5ff; font-weight: bold; cursor: pointer; padding: 0 15px;
      transition: all 0.2s; font-size: 16px;
    }
    #btnSendChat:hover { background: rgba(0, 229, 255, 0.3); color: #fff; box-shadow: 0 0 10px rgba(0,229,255,0.5); text-shadow: 0 0 8px #fff;}
    
    .chat-msg { word-wrap: break-word; line-height: 1.4; font-family: 'Montserrat', sans-serif; }
    /* Nombres en fuente sci-fi */
    .chat-author { font-weight: 800; color: #00e5ff; font-family: 'Orbitron', sans-serif; font-size: 11px;}
    .chat-author-enemy { font-weight: 800; color: #ff0055; font-family: 'Orbitron', sans-serif; font-size: 11px;}
    .chat-author-global { font-weight: 800; color: #ffaa00; font-family: 'Orbitron', sans-serif; font-size: 11px;}
    .chat-author-room { font-weight: 800; color: #00ff88; font-family: 'Orbitron', sans-serif; font-size: 11px;}

/* --- ESTILOS DEL TOP 100 GLOBAL --- */
    #globalLeaderboardScreen {
      display: none;
      /* Fondo casi transparente para ver el canvas animado */
      background: radial-gradient(circle, rgba(0, 229, 255, 0.05) 0%, rgba(2, 3, 5, 0.4) 100%);
      backdrop-filter: blur(4px); 
      pointer-events: auto;
      width: 100%; height: 100%;
      flex-direction: column; align-items: center; justify-content: center;
      z-index: 20;
    }
    .lb-container {
      width: 650px; max-width: 90vw; height: 60vh;
      /* Cristal tintado oscuro, sin bordes toscos, solo líneas de luz arriba y abajo */
      background: linear-gradient(180deg, rgba(10, 15, 25, 0.85) 0%, rgba(3, 5, 8, 0.95) 100%); 
      border: none; 
      border-top: 2px solid #00e5ff; 
      border-bottom: 2px solid rgba(0, 229, 255, 0.2);
      border-radius: 4px; /* Esquinas más afiladas */
      box-shadow: 0 15px 40px rgba(0,0,0,0.8), inset 0 0 20px rgba(0, 229, 255, 0.05);
      display: flex; flex-direction: column; overflow: hidden; margin-bottom: 30px;
      backdrop-filter: blur(12px);
    }
    
    .lb-header {
      display: flex; justify-content: space-between; padding: 12px 25px;
      background: rgba(0, 0, 0, 0.4); 
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      /* Textos del header apagados y serios para dar contraste a los datos */
      font-family: 'Orbitron', sans-serif; color: rgba(255,255,255,0.4); 
      font-size: 0.75rem; letter-spacing: 3px; font-weight: 900;
    }
    
    .lb-list {
      flex-grow: 1; overflow-y: auto; padding: 15px;
      display: flex; flex-direction: column; gap: 6px; /* Filas más juntas */
    }
    
    .lb-list::-webkit-scrollbar { width: 6px; }
    .lb-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
    .lb-list::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.3); border-radius: 3px; }
    .lb-list::-webkit-scrollbar-thumb:hover { background: #00e5ff; }
    
   .lb-row {
      display: flex; justify-content: space-between; align-items: center;
      background: rgba(255,255,255,0.02); 
      border: 1px solid rgba(255, 255, 255, 0.05); /* Marco tenue apagado */
      border-left: 4px solid var(--row-color, transparent); /* Línea lateral del color exacto */
      padding: 10px 20px; border-radius: 4px; 
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    .lb-row:hover {
      background: rgba(255, 255, 255, 0.05); 
      border-color: var(--row-color); /* ¡El marco entero estalla de color! */
      transform: translateX(6px) scale(1.02); 
      box-shadow: 0 0 20px var(--row-color-glow), inset 0 0 10px var(--row-color-glow);
    }
    
        /* El Top 3 tiene un fondo degradado especial, pero usando el color de su rango */
    .lb-row.top-3-row { 
      background: linear-gradient(90deg, var(--row-color-bg) 0%, rgba(255,255,255,0.02) 100%); 
    }
   
    /* --- TARJETAS DE LEYENDA DE RANGOS (DISEÑO PREMIUM) --- */
    .rank-legend-card {
        flex: 1; display: flex; align-items: center; padding: 0 20px;
        position: relative; overflow: hidden; cursor: default;
        border-left: 4px solid var(--rank-color);
        background: linear-gradient(90deg, var(--rank-color-bg) 0%, transparent 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.02);
        transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    .rank-legend-card:hover {
        background: linear-gradient(90deg, var(--rank-color-bg-hover) 0%, rgba(10, 15, 25, 0.8) 100%);
        padding-left: 30px; /* Se desplaza internamente sin romper la caja */
        box-shadow: inset 15px 0 30px -15px var(--rank-color);
    }
    
       /* Patrón holográfico (Rayas Cyberpunk integradas) */
    .rank-legend-card::after {
        content: ''; position: absolute; 
        /* Hacemos la capa más grande de lo normal para poder moverla luego */
        top: -20px; right: -20px; bottom: -20px; left: 0; 
        /* Líneas muy finas (1px) usando el color propio de cada rango */
        background: repeating-linear-gradient(
            -45deg, 
            transparent, 
            transparent 5px, 
            var(--rank-color) 5px, 
            var(--rank-color) 6px 
        );
        opacity: 0.15; /* Sutil por defecto */
        z-index: 0; 
        
        /* LA MAGIA: Un degradado que hace que las líneas desaparezcan suavemente hacia la izquierda */
        -webkit-mask-image: linear-gradient(to right, transparent 30%, black 100%);
        mask-image: linear-gradient(to right, transparent 30%, black 100%);
        
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    }
    
    .rank-legend-card:hover::after { 
        opacity: 0.35; /* Las líneas brillan más al enfocar */
        /* Al mover la capa oculta en diagonal, las rayas parecen avanzar como una cinta transportadora */
        transform: translate(-15px, 15px); 
    }
    
    /* Marco del icono (Diamante) */
    .rank-legend-icon-box {
        display: flex; justify-content: center; align-items: center; flex-shrink: 0;
        width: 44px; height: 44px; margin-right: 20px; z-index: 1;
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid var(--rank-color);
        box-shadow: 0 0 10px var(--rank-color-bg), inset 0 0 15px var(--rank-color-bg);
        transform: rotate(45deg); /* Girado como un diamante */
        transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    /* Animación del diamante al pasar el ratón */
    .rank-legend-card:hover .rank-legend-icon-box {
        transform: rotate(0deg) scale(1.1); /* Vuelve a ser un cuadrado y crece */
        background: var(--rank-color-bg-hover);
        box-shadow: 0 0 20px var(--rank-color-bg-hover), inset 0 0 20px var(--rank-color);
    }
    
    /* Contra-rotación del icono para que el texto siempre esté derecho */
    .rank-legend-icon-box span {
        transform: rotate(-45deg);
        transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .rank-legend-card:hover .rank-legend-icon-box span {
        transform: rotate(0deg); 
    }

    #discordBtn {
      margin: 15px auto 0 auto; /* Lo centra y le da 15px de espacio por arriba */
      width: fit-content; /* Obliga a que mantenga su tamaño pequeño original */
      font-family: 'Orbitron', sans-serif;
      background: rgba(88, 101, 242, 0.15);
      border: 1px solid #5865F2;
      color: #ffffff; 
      padding: 6px 14px;
      border-radius: 4px;
      text-decoration: none;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s ease;
      pointer-events: auto;
    }
    #discordBtn:hover {
      background: rgba(88, 101, 242, 0.8);
      box-shadow: 0 0 15px rgba(88, 101, 242, 0.6);
      transform: translateY(-2px);
    }

    /* BOTONES DE MODOS BLOQUEADOS (PRÓXIMAMENTE) */
    .locked-modes-bar {
      position: absolute; top: 25px; right: 520px; /* <--- Aumentado de 420px a 520px */
      display: flex; gap: 10px; pointer-events: auto; z-index: 15;
    }
    .locked-mode-btn {
      font-family: 'Orbitron', sans-serif;
      background: rgba(20, 15, 10, 0.65);
      border: 1px dashed rgba(255, 170, 0, 0.45);
      color: #bbb;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.8rem;
      letter-spacing: 1px;
      transition: all 0.25s ease;
      backdrop-filter: blur(5px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    }
    .locked-mode-btn:hover {
      background: rgba(40, 25, 10, 0.85);
      border-color: #ffaa00;
      color: #fff;
      box-shadow: 0 0 15px rgba(255, 170, 0, 0.25);
      transform: translateY(-1px);
    }
    .locked-badge {
      background: rgba(255, 170, 0, 0.15);
      color: #ffaa00;
      font-size: 0.6rem;
      font-weight: 900;
      padding: 2px 6px;
      border-radius: 3px;
      border: 1px solid rgba(255, 170, 0, 0.5);
      letter-spacing: 1px;
      text-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
    }
    @media (max-width: 950px) {
      .locked-modes-bar { display: none; }
    }

        /* --- TÍTULO LIGA ORBITAL (E-SPORTS PREMIUM - COLORES INVERTIDOS) --- */
    .epic-title {
        display: flex; 
        justify-content: center; 
        align-items: center;
        font-family: 'Orbitron', sans-serif;
        font-weight: 900;
        /* Texto principal en metal incandescente (Oro a Fuego) */
        background: linear-gradient(180deg, #ffffff 0%, #ffea00 45%, #ffaa00 55%, #ff5500 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        
        font-size: clamp(2.5rem, 5vw, 4rem); 
        letter-spacing: 12px; 
        margin-bottom: 35px;
        text-transform: uppercase;
        
        /* Resplandor naranja con base oscura */
        filter: drop-shadow(0 0 15px rgba(255, 170, 0, 0.4)) drop-shadow(0 5px 5px rgba(0,0,0,0.8));
    }
    
    /* Adornos técnicos (Flechas en cristal Cian) */
    .epic-title::before {
        content: '►';
        /* Degradado cian/hielo */
        background: linear-gradient(180deg, #ffffff 0%, #00e5ff 50%, #0077ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-right: 25px;
        font-size: clamp(1.5rem, 4vw, 2.5rem);
        /* Brillo de neón cian puro */
        filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.8));
        vertical-align: middle;
    }
    
    .epic-title::after {
        content: '◄';
        background: linear-gradient(180deg, #ffffff 0%, #00e5ff 50%, #0077ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 25px;
        font-size: clamp(1.5rem, 4vw, 2.5rem);
        filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.8));
        vertical-align: middle;
    }
      #landscapeWarning {
        display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background: #05070c; color: #00e5ff; z-index: 99999;
        text-align: center; justify-content: center; align-items: center;
        flex-direction: column; font-family: 'Orbitron', sans-serif;
      }
      /* Si es una pantalla móvil y está en vertical, muestra el aviso */
    @media screen and (max-width: 950px) and (orientation: portrait) {
      #landscapeWarning { display: flex; }
      #mainMenu, #gameCanvas, .ui-layer { display: none !important; }
      }
         
        /* --- TARJETA DE PERFIL CIBERNÉTICA (MINIMALISTA Y ESCALADA) --- */
      #playerProfile.cyber-profile-card {
       position: absolute; top: 25px; right: 30px; z-index: 1000; margin: 0; 
       background: linear-gradient(270deg, rgba(10, 15, 25, 0.8) 0%, rgba(0, 229, 255, 0.15) 100%);
       border: 1px solid rgba(0, 229, 255, 0.2); 
       border-right: 3px solid var(--rank-color, #00e5ff);
       border-radius: 4px; 
       box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 10px rgba(0, 229, 255, 0.05);
       backdrop-filter: blur(5px);
       
       padding: 21px 32px; /* <--- Ligeramente más holgado (antes 18px 28px) */
       display: flex; flex-direction: column; gap: 14px; /* <--- Espaciado interno ampliado */
       min-width: 275px; /* <--- Subido de 240px a 275px (~15%) */
   }
    
    .scanline { display: none; }
    
    .profile-header { display: flex; align-items: center; gap: 18px; margin-bottom: 15px; }
    
        /* --- AVATAR DINÁMICO (DIAMANTE PREMIUM) --- */
    #profileRankIcon { 
        margin: 0 !important; display: flex; justify-content: center; align-items: center; 
        font-size: 30px; 
        z-index: 2; 
        color: var(--rank-color, #00e5ff); 
        text-shadow: 0 0 10px var(--rank-color, #00e5ff); 
        animation: subtleGlow 3s infinite alternate ease-in-out; 
        
        /* Contra-rotación para que el icono del rango se quede derecho */
        transform: rotate(-45deg);
        transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    @keyframes subtleGlow {
        0% { filter: brightness(0.9); text-shadow: 0 0 8px var(--rank-color, #00e5ff); }
        100% { filter: brightness(1.2); text-shadow: 0 0 15px var(--rank-color, #00e5ff); }
    }
    
    .profile-avatar { 
        position: relative; 
        /* Tamaño ajustado para que las esquinas del rombo no se salgan */
        width: 48px; height: 48px; 
        display: flex; align-items: center; justify-content: center; flex-shrink: 0; 
        border-radius: 6px; /* Bordes ligeramente suavizados */
        background: rgba(3, 5, 8, 0.9); 
        border: 2px solid var(--rank-color, #00e5ff);
        box-shadow: 0 0 10px rgba(0,0,0,0.6), inset 0 0 15px rgba(0,0,0,0.9); 
        
        /* Rotación principal para convertirlo en rombo */
        transform: rotate(45deg);
        transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        /* Separación extra a la derecha para que la punta del rombo no roce el nombre */
        margin-right: 10px; 
        margin-left: 5px;
    }
    
    /* Animación del avatar al pasar el ratón por cualquier parte de la tarjeta de perfil */
    .cyber-profile-card:hover .profile-avatar {
        transform: rotate(0deg) scale(1.05); /* Vuelve a ser un cuadrado y crece */
        background: rgba(10, 15, 25, 0.9);
        box-shadow: 0 0 20px var(--rank-color, #00e5ff), inset 0 0 20px var(--rank-color, #00e5ff);
    }
    
    .cyber-profile-card:hover #profileRankIcon {
        transform: rotate(0deg); 
        /* Dispara un fogonazo rápido y se congela en el estado final (forwards) */
        animation: iconFlashFocus 0.4s forwards ease-out;
    }
    
    /* Animación de Fogonazo -> Enfoque Nítido */
    @keyframes iconFlashFocus {
        0% { 
            filter: brightness(2); 
            text-shadow: 0 0 30px var(--rank-color, #00e5ff); 
        }
        100% { 
            filter: brightness(1); 
            /* Quitamos el difuminado de la letra para que quede 100% nítida y cortante */
            text-shadow: none; 
        }
    }
    
    .profile-avatar::before, .profile-avatar::after { 
        display: none; 
    }
        
    /* --- TEXTOS (Escalados) --- */
    .profile-info { display: flex; flex-direction: column; text-align: left; justify-content: center;}
    .profile-label { font-family: 'Orbitron', sans-serif; font-size: 10px; color: rgba(255, 255, 255, 0.4); letter-spacing: 2px; }
    .profile-name { font-family: 'Orbitron', sans-serif; font-size: 17px; font-weight: 900; color: #ffffff !important; text-shadow: 0 0 8px var(--rank-color, #00e5ff); margin-top: 2px; }
    
    /* --- ESTADÍSTICAS --- */
    .profile-stats { 
        display: flex; gap: 30px; padding-top: 12px; 
        border-top: 1px solid rgba(255, 255, 255, 0.08); 
    }
    .stat-box { flex: 1; text-align: left; background: transparent; border: none; padding: 0; }
    .stat-title { font-family: 'Orbitron', sans-serif; font-size: 9px; color: rgba(255, 255, 255, 0.4); margin-bottom: 2px; letter-spacing: 1px; }
    .stat-value { font-family: 'Orbitron', sans-serif; font-size: 16px; font-weight: bold; color: #fff; }
    
    /* --- BOTÓN CERRAR SESIÓN --- */
    .cyber-btn-red {
        background: rgba(255, 17, 51, 0.05) !important; 
        border: 1px solid rgba(255, 17, 51, 0.2) !important; 
        color: rgba(255, 17, 51, 0.8) !important;
        padding: 10px 0; /* <--- Botón un poco más alto */
        border-radius: 4px;
        font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: bold; letter-spacing: 2px; 
        cursor: pointer; transition: all 0.2s; text-transform: uppercase; 
        width: 100%; text-align: center;
        margin-top: 10px;
    }
    .cyber-btn-red:hover { 
        background: rgba(255, 17, 51, 0.15) !important; 
        border-color: #ff1133 !important; 
        box-shadow: 0 0 15px rgba(255, 17, 51, 0.2) !important; 
        color: #ff1133 !important; 
        text-shadow: 0 0 8px rgba(255, 17, 51, 0.8); 
    }

        /* --- MARCADOR DE RETRANSMISIÓN (ESPORTS LIMPIO) --- */
        #gameInfo {
            padding: 0 !important;
            min-width: 175px;
            min-height: 50px;
            background: linear-gradient(135deg, rgba(10, 15, 30, 0.90) 0%, rgba(5, 8, 16, 0.95) 100%) !important;
            border: 1px solid rgba(0, 229, 255, 0.35) !important;
            border-left: none !important; /* Eliminado el borde cian grueso izquierdo */
            border-radius: 6px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.6), inset 0 0 15px rgba(0, 229, 255, 0.08);
            backdrop-filter: blur(10px);
            
            resize: both;
            overflow: hidden; 
            overflow-y: auto; 
            pointer-events: auto !important; 
            
            max-width: 55vw;
            max-height: 75vh;
            transition: border-color 0.2s;
        }

        #gameInfo:hover {
            border-color: #00e5ff !important;
            box-shadow: 0 8px 35px rgba(0,0,0,0.7), inset 0 0 20px rgba(0, 229, 255, 0.15);
        }
        
        #gameInfo::-webkit-resizer {
            background: linear-gradient(135deg, transparent 50%, rgba(0, 229, 255, 0.8) 50%);
            outline: none;
        }
    
        #gameInfo::-webkit-scrollbar { width: 3px; }
        #gameInfo::-webkit-scrollbar-track { background: transparent; }
        #gameInfo::-webkit-scrollbar-thumb { background: #00e5ff; border-radius: 2px; box-shadow: 0 0 6px #00e5ff; }
        
        /* Cabecera del marcador */
        .sb-header {
            background: rgba(0, 229, 255, 0.12);
            border-bottom: 1px solid rgba(0, 229, 255, 0.25);
            padding: 8px 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }
        .sb-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 0.7rem; color: #00e5ff; font-weight: 900; letter-spacing: 2px;
        }
        
        /* --- INDICADOR LIVE AMPLIADO Y DESTACADO --- */
        .sb-live {
            font-family: 'Orbitron', sans-serif;
            color: #ff1133; font-size: 0.85rem; font-weight: 900; letter-spacing: 2px;
            animation: blinkLive 1.5s infinite;
            display: flex; align-items: center; gap: 7px;
            flex-shrink: 0; 
            text-shadow: 0 0 10px rgba(255, 17, 51, 0.6);
        }
        .sb-live::before {
             content: ''; display: inline-block; width: 10px; height: 10px;
             background: #ff1133; border-radius: 50%; box-shadow: 0 0 12px #ff1133, 0 0 4px #fff;
        }
        @keyframes blinkLive { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

        .sb-icon-wrapper {
             width: 22px;
             display: flex;
             justify-content: center;
             align-items: center;
             margin-right: 6px;
             flex-shrink: 0;
        }
        
        /* Fila de cada jugador (Con su borde lateral dinámico del color de la peonza) */
        .sb-row {
            display: flex; align-items: center;
            padding: 8px 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            /* Mantenemos el borde izquierdo dinámico inyectado desde JS con el color del Spin */
            background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, transparent 100%);
            transition: background 0.15s;
        }
        .sb-row:hover { background: rgba(0, 229, 255, 0.04); }
        .sb-row:last-child { border-bottom: none; }

        .sb-name {
            font-family: 'Orbitron', sans-serif;
            color: #fff; font-size: 0.85rem; font-weight: 700;
            text-shadow: 0 0 4px rgba(255,255,255,0.2);
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis;
            flex-grow: 1; 
            margin-right: 15px; 
        }
        
        .sb-score {
            font-family: 'Orbitron', sans-serif; font-weight: 900;
            font-size: 1.2rem; color: #ffaa00; text-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
        }
                /* --- MULETILLA INTERACTIVA (SPIN ICON) --- */
        .spin-hint-container {
          margin: 25px auto 0 auto; /* Se separa del botón de Discord */
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          pointer-events: auto;
          width: fit-content;
        }
        
        .spin-hint-icon {
          transition: all 0.3s ease;
          filter: drop-shadow(0 0 5px #00e5ff);
        }
        
        /* Al pasar el ratón: La peonza gira rapidísimo y se hace grande */
        .spin-hint-container:hover .spin-hint-icon {
          animation: ultraSpin 0.3s linear infinite;
          transform: scale(1.2);
          filter: drop-shadow(0 0 15px #00e5ff);
        }
        
        @keyframes ultraSpin {
          0% { transform: scale(1.2) rotate(0deg); }
          100% { transform: scale(1.2) rotate(360deg); }
        }
        
        /* La caja de texto flotante (Tooltip) */
        .spin-hint-tooltip {
          position: absolute;
          top: 55px; /* Sale por debajo de la peonza */
          background: rgba(10, 15, 25, 0.95);
          border: 1px solid #ffaa00;
          color: #ffaa00;
          padding: 8px 16px;
          border-radius: 6px;
          font-family: 'Orbitron', sans-serif;
          font-size: 0.8rem;
          font-weight: 900;
          white-space: nowrap;
          text-transform: uppercase;
          box-shadow: 0 0 15px rgba(255, 170, 0, 0.4);
          pointer-events: none;
          z-index: 100;
          
          /* Animación de entrada holográfica */
          opacity: 0;
          transform: translateY(-15px) scale(0.8);
          transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        /* El piquito del bocadillo */
        .spin-hint-tooltip::before {
          content: ''; position: absolute;
          top: -6px; left: 50%; transform: translateX(-50%);
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-bottom: 6px solid #ffaa00;
        }
        
        /* Mostrar el texto al hacer hover */
        .spin-hint-container:hover .spin-hint-tooltip {
          opacity: 1;
          transform: translateY(0) scale(1);
        }

        /* --- ESTADOS HOVER PARA EL CURSOR DEL MANDO --- */
        .menu-btn.hover-active { 
            background: rgba(0, 229, 255, 0.15); color: #fff; 
            border-color: #00e5ff; /* <--- LÍNEA AÑADIDA */
            box-shadow: 0 0 20px rgba(0,229,255,0.3), inset 0 0 15px rgba(0,229,255,0.1); 
            transform: scale(1.04); 
            text-shadow: 0 0 8px currentColor;
        }
        .cancel-search-btn.hover-active { background: rgba(255, 17, 51, 0.3); box-shadow: 0 0 10px rgba(255,17,51,0.6); }
        .top-left-minimal.hover-active, .lang-toggle.hover-active { 
            background: linear-gradient(90deg, rgba(0, 229, 255, 0.15) 0%, rgba(0, 229, 255, 0.35) 100%);
            color: #fff; border-color: #00e5ff; transform: translateY(-2px);
            box-shadow: 0 0 15px rgba(0, 229, 255, 0.4), inset 0 0 10px rgba(0, 229, 255, 0.2); 
            text-shadow: 0 0 8px currentColor;
        }
        #discordBtn.hover-active { background: rgba(88, 101, 242, 0.8); box-shadow: 0 0 15px rgba(88, 101, 242, 0.6); transform: translateY(-2px); }
        .cyber-btn-red.hover-active { background: rgba(255, 17, 51, 0.15) !important; border-color: #ff1133 !important; box-shadow: 0 0 15px rgba(255, 17, 51, 0.2) !important; color: #ff1133 !important; text-shadow: 0 0 8px rgba(255, 17, 51, 0.8); }
        
        /* Efectos del icono interactivo de la Peonza */
        .spin-hint-container.hover-active .spin-hint-icon { animation: ultraSpin 0.3s linear infinite; transform: scale(1.2); filter: drop-shadow(0 0 15px #00e5ff); }
        .spin-hint-container.hover-active .spin-hint-tooltip { opacity: 1; transform: translateY(0) scale(1); }

        /* --- ESTILOS NORMALES (Borde tenue, lateral brillante) --- */
        #btnPrivate, #btnStartPriv { border-color: rgba(0, 255, 136, 0.3) !important; border-left: 4px solid #00ff88 !important; color: #00ff88 !important; }
        #btnLeaderboard { border-color: rgba(255, 170, 0, 0.3) !important; border-left: 4px solid #ffaa00 !important; color: #ffaa00 !important; }
        #btnOn8FFA { border-color: rgba(184, 0, 255, 0.3) !important; border-left: 4px solid #b800ff !important; color: #b800ff !important; }
        #btnBackPublic, #btnBack, #btnLeavePriv, #btnBackFromLb { border-color: rgba(255, 17, 51, 0.3) !important; border-left: 4px solid #ff1133 !important; color: #ff1133 !important; }
        
        /* --- EFECTO HOVER (El marco entero se ilumina) --- */
        /* Verde */
        #btnPrivate:not(.disabled):hover, #btnPrivate:not(.disabled).hover-active,
        #btnStartPriv:not(.disabled):hover, #btnStartPriv:not(.disabled).hover-active {
          background: rgba(0, 255, 136, 0.15) !important; 
          border-color: #00ff88 !important; /* <--- Marco iluminado */
          box-shadow: 0 0 20px rgba(0, 255, 136, 0.3), inset 0 0 15px rgba(0, 255, 136, 0.1);
        }
        
        /* Naranja */
        #btnLeaderboard:not(.disabled):hover, #btnLeaderboard:not(.disabled).hover-active {
          background: rgba(255, 170, 0, 0.15) !important; 
          border-color: #ffaa00 !important; /* <--- Marco iluminado */
          box-shadow: 0 0 20px rgba(255, 170, 0, 0.3), inset 0 0 15px rgba(255, 170, 0, 0.1);
        }
        
        /* Morado */
        #btnOn8FFA:not(.disabled):hover, #btnOn8FFA:not(.disabled).hover-active {
          background: rgba(184, 0, 255, 0.15) !important; 
          border-color: #b800ff !important; /* <--- Marco iluminado */
          box-shadow: 0 0 20px rgba(184, 0, 255, 0.3), inset 0 0 15px rgba(184, 0, 255, 0.1);
        }
        
        /* Rojo */
        #btnBackPublic:not(.disabled):hover, #btnBackPublic:not(.disabled).hover-active,
        #btnBack:not(.disabled):hover, #btnBack:not(.disabled).hover-active,
        #btnLeavePriv:not(.disabled):hover, #btnLeavePriv:not(.disabled).hover-active,
        #btnBackFromLb:not(.disabled):hover, #btnBackFromLb:not(.disabled).hover-active {
          background: rgba(255, 17, 51, 0.15) !important; 
          border-color: #ff1133 !important; /* <--- Marco iluminado */
          box-shadow: 0 0 20px rgba(255, 17, 51, 0.3), inset 0 0 15px rgba(255, 17, 51, 0.1);
        }

            /* --- CHAT Y PERFIL (Soporte Mando) --- */
        #chatHeader:hover, #chatHeader.hover-active { background: linear-gradient(90deg, rgba(10, 15, 25, 0.95) 0%, rgba(0, 229, 255, 0.3) 100%); }
        .chat-tab:not(.active):hover, .chat-tab:not(.active).hover-active { background: rgba(0, 229, 255, 0.2); color: #fff; text-shadow: 0 0 5px #fff; }
        
        .cyber-profile-card:hover .profile-avatar, .cyber-profile-card.hover-active .profile-avatar {
            transform: rotate(0deg) scale(1.05); background: rgba(10, 15, 25, 0.9);
            box-shadow: 0 0 20px var(--rank-color, #00e5ff), inset 0 0 20px var(--rank-color, #00e5ff);
        }
        .cyber-profile-card:hover #profileRankIcon, .cyber-profile-card.hover-active #profileRankIcon {
            transform: rotate(0deg); animation: iconFlashFocus 0.4s forwards ease-out;
        }

            /* --- LIGA ORBITAL Y RANGOS (Soporte Mando) --- */
        .lb-row.hover-active {
            background: rgba(255, 255, 255, 0.05); 
            border-color: var(--row-color); 
            transform: translateX(6px) scale(1.02); 
            box-shadow: 0 0 20px var(--row-color-glow), inset 0 0 10px var(--row-color-glow);
        }
        
        .rank-legend-card.hover-active {
            background: linear-gradient(90deg, var(--rank-color-bg-hover) 0%, rgba(10, 15, 25, 0.8) 100%);
            padding-left: 30px;
            box-shadow: inset 15px 0 30px -15px var(--rank-color);
        }
        .rank-legend-card.hover-active::after {
            opacity: 0.35; transform: translate(-15px, 15px); 
        }
        .rank-legend-card.hover-active .rank-legend-icon-box {
            transform: rotate(0deg) scale(1.1); background: var(--rank-color-bg-hover);
            box-shadow: 0 0 20px var(--rank-color-bg-hover), inset 0 0 20px var(--rank-color);
        }
        .rank-legend-card.hover-active .rank-legend-icon-box span {
            transform: rotate(0deg); 
        }
   
           /* ==========================================================================
           SISTEMA RESPONSIVE UNIVERSAL (ANCLAJE POR ESQUINAS)
           ========================================================================== */
        
        /* PANTALLAS MEDIANAS, PORTÁTILES (1366x768) Y TABLETS HORIZONTALES */
        @media (max-width: 1400px), (max-height: 850px) {
            /* Esquinas superiores */
            #topLeftHUD { transform: scale(0.85); transform-origin: top left; }
            #playerProfile.cyber-profile-card { transform: scale(0.85); transform-origin: top right; }
            .locked-modes-bar { transform: scale(0.85); transform-origin: top right; right: 380px; } 
                
            /* Esquinas inferiores */
            #chatContainer { transform: scale(0.85); transform-origin: bottom left; }
            #heatModeUI { transform: scale(0.85); transform-origin: bottom right; }
            #watermark { transform: scale(0.85); transform-origin: bottom right; }
            
            /* Centro inferior (Comprimimos el panel de 4 habilidades extra al 75% para blindarlo) */
            #skillsHUD { transform: translateX(-50%) scale(0.75); transform-origin: bottom center; }
            
            /* Elementos centrales */
            .menu-step { transform: scale(0.85); transform-origin: center center; }
            .main-title { font-size: 4.8rem; }
            
            /* HUD de partida */
            #gameInfo { transform: scale(0.85); transform-origin: top left; }
            #topRightHUD { transform: scale(0.85); transform-origin: top right; }
            
            /* Pantallas completas centradas */
            #globalLeaderboardScreen, #resultsScreen { transform: scale(0.85); transform-origin: center center; }
        }
        
        /* MÓVILES, TABLETS VERTICALES Y VENTANAS MUY PEQUEÑAS */
        @media (max-width: 950px), (max-height: 600px) {
            #topLeftHUD { transform: scale(0.65); transform-origin: top left; }
            #playerProfile.cyber-profile-card { transform: scale(0.65); transform-origin: top right; }
            
            #chatContainer { transform: scale(0.65); transform-origin: bottom left; width: 300px; }
            #heatModeUI { transform: scale(0.65); transform-origin: bottom right; }
            #watermark { transform: scale(0.65); transform-origin: bottom right; bottom: 15px; }
            
            #skillsHUD { transform: translateX(-50%) scale(0.65); transform-origin: bottom center; bottom: 15px; }
            
            .menu-step { transform: scale(0.7); transform-origin: center center; }
            .main-title { font-size: 3.5rem; }
            
            #gameInfo { transform: scale(0.7); transform-origin: top left; }
            #topRightHUD { transform: scale(0.7); transform-origin: top right; }
            
            #globalLeaderboardScreen, #resultsScreen { transform: scale(0.7); transform-origin: center center; }
        }
                /* --- ADORNOS CIAN PARA EL BOTÓN LIGA ORBITAL --- */
        #btnLeaderboard::before {
            content: '► ';
            color: #00e5ff;
            text-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
            transition: all 0.2s;
        }
        
        #btnLeaderboard::after {
            content: ' ◄';
            color: #00e5ff;
            text-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
            transition: all 0.2s;
        } 


                 /* ==========================================================================
            PANEL DE SALA PRIVADA Y CHECKBOX CIBERNÉTICO
            ========================================================================== */
         .lobby-status-panel {
             background: linear-gradient(135deg, rgba(10, 15, 25, 0.8) 0%, rgba(255, 170, 0, 0.05) 100%);
             border: 1px solid rgba(255, 170, 0, 0.2);
             border-left: 4px solid #ffaa00; /* Naranja para contrastar con los botones cian */
             border-radius: 4px;
             padding: 15px 25px;
             margin: 10px 0 15px 0;
             width: 380px; /* Exactamente el ancho de los botones */
             box-shadow: 0 8px 25px rgba(0,0,0,0.5), inset 0 0 15px rgba(255, 170, 0, 0.05);
             backdrop-filter: blur(8px);
             text-align: left;
         }
         
         .lobby-status-header {
             font-size: 0.65rem; font-family: 'Orbitron', sans-serif;
             color: rgba(255, 255, 255, 0.4);
             letter-spacing: 3px;
             margin-bottom: 12px;
             border-bottom: 1px solid rgba(255,255,255,0.1);
             padding-bottom: 6px;
         }
         
         .lobby-code-display {
             font-size: 1.6rem; font-family: 'Orbitron', sans-serif;
             color: #ffaa00; font-weight: 900;
             letter-spacing: 4px;
             text-shadow: 0 0 15px rgba(255, 170, 0, 0.6);
             margin-bottom: 8px;
         }
         
         .lobby-players-display {
             font-size: 0.95rem; font-family: 'Orbitron', sans-serif;
             color: #00e5ff; font-weight: bold;
             letter-spacing: 2px;
         }
         
         /* --- CHECKBOX CUSTOM --- */
         .host-spec-box {
             margin: 0 0 20px 0;
             width: 380px;
         }
         
         .cyber-checkbox-label {
             display: flex; align-items: center; gap: 15px; cursor: pointer;
             padding: 12px 20px;
             background: rgba(0, 0, 0, 0.5);
             border: 1px dashed rgba(0, 229, 255, 0.3);
             border-radius: 4px;
             transition: all 0.2s;
         }
         
         .cyber-checkbox-label:hover {
             background: rgba(0, 229, 255, 0.1);
             border-style: solid;
             border-color: #00e5ff;
             box-shadow: 0 0 15px rgba(0,229,255,0.2);
         }
         
         /* Ocultamos la cajita fea nativa de Windows/Mac */
         .cyber-checkbox-label input { display: none; } 
         
         /* Creamos nuestro propio recuadro de neón */
         .custom-checkbox {
             width: 22px; height: 22px; flex-shrink: 0;
             border: 2px solid rgba(0, 229, 255, 0.5);
             border-radius: 4px;
             display: flex; justify-content: center; align-items: center;
             transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             background: rgba(0,0,0,0.8);
         }
         
         /* Cuando haces click, se ilumina y sale un tick */
         .cyber-checkbox-label input:checked + .custom-checkbox {
             background: #00e5ff;
             border-color: #00e5ff;
             box-shadow: 0 0 15px #00e5ff;
             transform: scale(1.1);
         }
         
         .cyber-checkbox-label input:checked + .custom-checkbox::after {
             content: '✔';
             color: #000; /* Tick en color negro para que contraste brutal */
             font-size: 14px;
             font-weight: 900;
         }
         
         .chk-text {
             font-size: 0.8rem; font-family: 'Orbitron', sans-serif;
             color: #ccc; letter-spacing: 1.5px;
             transition: color 0.2s;
         }
         
         .cyber-checkbox-label input:checked ~ .chk-text {
             color: #fff;
             text-shadow: 0 0 5px rgba(255,255,255,0.5);
         } 


               /* --- LISTA DE JUGADORES EN SALA PRIVADA --- */
          .lobby-player-list {
              margin-top: 15px;
              display: flex;
              flex-direction: column;
              gap: 6px;
              max-height: 180px;
              overflow-y: auto;
              padding-right: 5px;
              border-top: 1px solid rgba(255, 255, 255, 0.1);
              padding-top: 15px;
          }
          
          /* Scrollbar en miniatura */
          .lobby-player-list::-webkit-scrollbar { width: 4px; }
          .lobby-player-list::-webkit-scrollbar-thumb { background: #00e5ff; border-radius: 2px; }
      
          .lobby-player-row {
              display: flex;
              align-items: center;
              background: rgba(0, 0, 0, 0.4);
              border: 1px solid rgba(0, 229, 255, 0.15);
              border-left: 3px solid #00e5ff;
              padding: 8px 12px;
              border-radius: 4px;
              font-family: 'Orbitron', sans-serif;
              font-size: 0.85rem;
              transition: all 0.2s;
          }
          
          .lobby-player-row.is-host {
              border-left-color: #ffaa00;
              background: rgba(255, 170, 0, 0.05);
              border-color: rgba(255, 170, 0, 0.2);
          }
      
          .host-badge {
              background: #ffaa00;
              color: #000;
              font-size: 0.6rem;
              font-weight: 900;
              padding: 2px 6px;
              border-radius: 3px;
              margin-right: 12px;
              letter-spacing: 1px;
          }


            /* ==========================================================================
            SISTEMA MÓVIL Y CONTROLES TÁCTILES (VERSIÓN ROBUSTA)
            ========================================================================== */
         
         /* 1. COMPRESIÓN EXTREMA PARA MENÚ EN APAISADO (Evita superposiciones) */
         @media (max-height: 500px) {
             /* 1. Subimos un poco el título (de 65px a 50px) y le damos margen negativo por abajo */
             .main-title { margin-top: 50px !important; font-size: 3rem !important; margin-bottom: -5px !important; letter-spacing: 4px !important; }
             
             /* 2. Pegamos el subtítulo a los botones eliminando su margen */
             .subtitle { font-size: 0.9rem !important; margin-bottom: 0px !important; }
             
             /* 3. Reducimos el padding vertical 2px para que los botones sean un pelín más finos y suban en bloque */
             .menu-btn { padding: 10px 20px !important; margin: 4px !important; font-size: 1.1rem !important; width: 340px !important; }
             
             /* Ajuste de contenedores */
             .btn-wrapper { margin: 2px 4px 12px 4px !important; width: 340px !important; }
             .inline-group { margin: 2px !important; width: 340px !important; }
             
             /* Subtítulos de los bots */
             #hintBots4, #hintBots8 { bottom: -10px !important; font-size: 0.6rem !important; }
             
             #discordBtn { margin-top: 2px !important; padding: 4px 10px !important; font-size: 0.75rem !important; }
             
             /* Esquinas aplastadas y pegadas a los bordes */
             #topLeftHUD { transform: scale(0.6) !important; top: 10px !important; left: 10px !important; }
             #playerProfile.cyber-profile-card { transform: scale(0.6) !important; top: 10px !important; right: 10px !important; }
             
             /* Limpiamos elementos innecesarios PERO salvamos la firma del creador */
             .locked-modes-bar, #watermark, #pingDisplay { display: none !important; }
             .creator-tag { display: block !important; transform: scale(0.6) !important; transform-origin: bottom right !important; bottom: 10px !important; right: 10px !important; }
         
             /* Mantenemos tu nombre visible, compacto y pegado a la esquina */
             .creator-tag { 
                 display: block !important; 
                 transform: scale(0.6) !important; 
                 transform-origin: bottom right !important; 
                 bottom: 10px !important; 
                 right: 10px !important; 
             }
         }
         
         /* 2. ACTIVACIÓN DEL HUD TÁCTIL (A prueba de fallos) */
         #mobileUI { display: none; width: 100%; height: 100%; position: absolute; top:0; left:0; pointer-events: none; z-index: 1000; }
         
                 /* Se activa si es estrecho (tablet), SI LA ALTURA ES PEQUEÑA (móvil en horizontal), o si no hay ratón */
         @media (max-width: 950px), (max-height: 600px), (hover: none) {
             #skillsHUD, #controlsUI { display: none !important; }
                      
                      /* 1. Marcador ultra compacto, semitransparente y que no bloquee los dedos */
             #gameInfo { 
                 transform: scale(0.55); 
                 transform-origin: top left; 
                 margin: 5px !important; 
                 opacity: 0.85; 
                 pointer-events: none !important; /* El joystick funcionará aunque toques encima */
             }
             
             /* 2. Encoger y apartar los botones de Salir/Sonido arriba a la derecha */
             #topRightHUD { position: absolute !important; top: 5px !important; right: 5px !important; transform: scale(0.65); transform-origin: top right; }
             #actionButtons { flex-direction: row !important; gap: 10px; justify-content: flex-end; }
             
             /* 3. Ajustar los 4 botones táctiles para que dejen ver el juego */
             #mobileActionButtons { bottom: 15px; right: 15px; gap: 8px; }
             .mobile-skill-btn { width: 58px; height: 58px; border-radius: 8px; padding: 6px; }
             .mob-skill-text { font-size: 9px; letter-spacing: 0.5px; }
             
             #mobileUI { display: block !important; }
         }
                  
           /* 3. RESTAURACIÓN DEL JOYSTICK FIJO 3.0 */
        #joystickZone { 
            position: absolute; top: 0; left: 0; width: 50vw; height: 100%; z-index: 900; touch-action: none;
            pointer-events: auto !important; /* <--- LA MAGIA: Vuelve a atrapar tus dedos */
        }
        #joystickBase { 
            display: block !important; 
            position: absolute; 
            bottom: 80px; 
            left: 50px; 
            width: 120px; 
            height: 120px; 
            border-radius: 50%; 
            background: rgba(10, 15, 25, 0.5); 
            border: 2px solid rgba(0, 229, 255, 0.4); 
            transform: none; 
            opacity: 0.4; 
            transition: opacity 0.2s;
            box-shadow: 0 0 20px rgba(0,229,255,0.2), inset 0 0 20px rgba(0,0,0,0.8); 
            pointer-events: none;
        }
        #joystickBase.active { opacity: 0.9; }
        #joystickStick {
            position: absolute; top: 50%; left: 50%;
            width: 50px; height: 50px; border-radius: 50%;
            background: radial-gradient(circle, #00e5ff 0%, #0077ff 100%);
            transform: translate(-50%, -50%);
            box-shadow: 0 4px 15px rgba(0,0,0,0.5), inset 0 0 10px rgba(255,255,255,0.5);
            pointer-events: none;
        }

         #mobileActionButtons { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 15px; pointer-events: auto !important; touch-action: none; z-index: 1001; }
         .mobile-skill-btn { background: rgba(10, 15, 25, 0.85); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; width: 70px; height: 70px; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.7); backdrop-filter: blur(5px); user-select: none; transition: transform 0.1s; pointer-events: auto !important; }
         .mob-skill-text { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 900; text-align: center; margin: auto 0; letter-spacing: 1px; pointer-events: none; text-shadow: 0 0 5px currentColor; }
         .mobile-skill-btn .skill-track { pointer-events: none; height: 8px; background: rgba(0,0,0,0.8); border-radius: 4px; overflow: hidden; width: 100%; border: 1px solid rgba(255,255,255,0.1); }
         .mobile-skill-btn .skill-bar-fill { pointer-events: none; height: 100%; transition: width 0.1s; }
         
         /* Bordes iluminados para la recarga */
         .mobile-skill-btn.ready-cyan { border-top: 4px solid #00e5ff; box-shadow: 0 -2px 15px rgba(0,229,255,0.3), 0 4px 15px rgba(0,0,0,0.5); }
         .mobile-skill-btn.ready-orange { border-top: 4px solid #ffaa00; box-shadow: 0 -2px 15px rgba(255,170,0,0.3), 0 4px 15px rgba(0,0,0,0.5); }
         .mobile-skill-btn.ready-pink { border-top: 4px solid #ff1155; box-shadow: 0 -2px 15px rgba(255,17,85,0.3), 0 4px 15px rgba(0,0,0,0.5); }
         
         /* Efecto de hundimiento al pulsar */
         .mobile-skill-btn:active { transform: scale(0.85); background: rgba(255,255,255,0.1); }

         /* BOTÓN ALTERNAR CÁMARA (MÓVIL) */
         .mobile-cam-btn { 
             position: absolute; top: 75px; right: 15px; 
             background: rgba(10, 15, 25, 0.85); border: 1px solid #ffaa00; color: #ffaa00;
             border-radius: 50%; width: 42px; height: 42px;
             display: flex; justify-content: center; align-items: center; font-size: 18px;
             box-shadow: 0 4px 15px rgba(0,0,0,0.5); pointer-events: auto !important; z-index: 1001; transition: 0.2s;
         }
         .mobile-cam-btn:active { transform: scale(0.85); }

         /* ==========================================================================
            4. COMPRESIÓN DE MENÚS (RESULTADOS Y LIGA ORBITAL) EN MÓVIL
            ========================================================================== */
         @media (max-width: 950px), (max-height: 600px), (hover: none) {
             
             /* 1. Anulamos el escalado básico para hacer un diseño 100% responsivo */
             #globalLeaderboardScreen, #resultsScreen { transform: none !important; padding: 10px; }
             
             /* =========================================
                PANTALLA DE RESULTADOS (A prueba de 8J)
                ========================================= */
             #winnerText { font-size: 1.5rem !important; margin-bottom: 10px !important; }
             
             /* Le damos altura máxima y activamos el scroll táctil por si no caben los 8 */
             #leaderboard { 
                 max-height: 60vh; overflow-y: auto; gap: 4px; 
                 width: 100%; max-width: 700px; margin-bottom: 10px; padding-right: 5px; 
             }
             
             /* Mini scrollbar de neón */
             #leaderboard::-webkit-scrollbar { width: 4px; }
             #leaderboard::-webkit-scrollbar-thumb { background: #00e5ff; border-radius: 2px; }
             
             /* Compresión extrema de las filas */
             .leaderboard-row { padding: 6px 15px; border-left-width: 4px; }
             .leaderboard-row .rank-number { font-size: 1rem; margin-right: 10px; }
             .leaderboard-row .player-info span:last-child { font-size: 0.9rem; }
             
             /* Acerca los puntos a la recompensa para ahorrar ancho */
             .leaderboard-row > div:nth-child(2) { gap: 10px !important; } 
             .leaderboard-row > div:nth-child(2) > div:nth-child(3) { min-width: 0 !important; }
             .player-score { font-size: 1.1rem !important; }
             
             #btnResultsMenu { padding: 8px 20px !important; font-size: 0.9rem !important; width: auto !important; margin-top: 5px; }
         
             /* =========================================
                LIGA ORBITAL (Side-by-side apretado)
                ========================================= */
             #lbTitle { font-size: 1.3rem !important; margin-bottom: 5px !important; letter-spacing: 4px !important; }
             
             /* Forzamos que las 2 columnas se mantengan pegadas en paralelo y no salten a la siguiente línea */
             #globalLeaderboardScreen > div:nth-child(2) { flex-wrap: nowrap !important; gap: 10px !important; height: 70vh !important; margin-bottom: 10px !important; }
             .lb-container { height: 100% !important; min-width: 0 !important; }
             .lb-container:nth-child(1) { flex: 1.4 !important; } /* Lista Top 100 un poco más ancha */
             .lb-container:nth-child(2) { flex: 1 !important; }   /* Leyenda de rangos un poco más estrecha */
             
             .lb-header { padding: 6px 10px; font-size: 0.65rem; }
             
             /* Encoger y apretar los textos del Top 100 inyectados por JS */
             .lb-list { padding: 5px; gap: 4px; }
             .lb-row { padding: 5px 10px; }
             .lb-row > div > div:nth-child(1) { width: 30px !important; font-size: 0.9rem !important; } /* Puesto */
             .lb-row > div > div:nth-child(2) { width: 25px !important; font-size: 1rem !important; }   /* Icono */
             .lb-row > div > div:nth-child(3) { font-size: 0.75rem !important; margin-left: 5px !important; } /* Nombre */
             .lb-row > div > div:nth-child(4) > div:nth-child(1) { font-size: 0.9rem !important; }      /* Puntos */
             .lb-row > div > div:nth-child(4) > div:nth-child(2) { font-size: 0.5rem !important; }      /* Texto rango */
         
             /* Encoger la Leyenda de Rangos derecha */
             .rank-legend-card { padding: 0 10px; border-left-width: 3px; }
             
             /* Textos normales de la tarjeta (Tienen que ir primero) */
             .rank-legend-card span { font-size: 0.8rem !important; letter-spacing: 1px !important; }
             .rank-legend-card span:last-child { font-size: 0.5rem !important; }
             
             /* Rombo y su icono (Aumentados y blindados para que no se encojan) */
             .rank-legend-icon-box { width: 34px !important; height: 34px !important; margin-right: 12px !important; }
             .rank-legend-card .rank-legend-icon-box span { font-size: 1.5rem !important; line-height: 1 !important; }
             
             /* Botón de salir de la Liga */
             #btnBackFromLb { padding: 6px 20px !important; margin: 0 !important; width: auto !important; font-size: 0.8rem !important; }
         }

            /* ==========================================================================
            SELECTOR DE INTERFAZ (CLÁSICO CENTRADO VS ASIMÉTRICO E-SPORTS)
            ========================================================================== */
            
         /* SI LA CLASE ESTÁ ACTIVA EN EL BODY, APLICAMOS EL DISEÑO ASIMÉTRICO EN PC */
         @media (min-width: 951px) and (min-height: 601px) {
             body.asymmetric-ui #mainMenu {
                 align-items: flex-start !important; 
                 justify-content: center !important;
                 padding-left: 8vw !important; 
                 padding-bottom: 0 !important; 
             }
             
             body.asymmetric-ui .menu-step { align-items: flex-start !important; }
             
             body.asymmetric-ui .main-title {
                 text-align: left !important;
                 transform-origin: left center !important; 
                 margin-bottom: 0px !important; 
             }
             
             body.asymmetric-ui .subtitle {
                 text-align: left !important;
                 margin-left: 6px !important; 
                 margin-bottom: 40px !important;
             }
         
             body.asymmetric-ui .btn-wrapper, 
             body.asymmetric-ui .inline-group {
                 margin: 8px 0 26px 0 !important; 
                 justify-content: flex-start !important;
             }
             
           /* --- BOTONES PRINCIPALES (Texto centrado) --- */
        body.asymmetric-ui .menu-btn {
            margin: 0 !important; 
            transform-origin: center !important; /* Escala desde el centro al pasar el ratón */
            text-align: center !important; 
            padding: 18px 35px !important; /* Restauramos la simetría interna */
        }

        /* --- TEXTO BOTS (Centrado bajo el botón de 380px) --- */
        body.asymmetric-ui #hintBots4, 
        body.asymmetric-ui #hintBots8 {
            left: 50% !important;
            transform: translateX(-50%) !important;
            bottom: -22px !important;
            text-align: center !important;
            width: 100% !important;
            letter-spacing: 2px !important;
            font-size: 0.65rem !important;
            color: rgba(0, 229, 255, 0.5) !important;
        }

           /* --- DISCORD Y PEONZA (Alineados al centro matemático de la columna) --- */
           body.asymmetric-ui #discordBtn { 
               margin: 20px 0 0 0 !important; 
               margin-left: 190px !important; /* 190px es la mitad exacta del botón de 380px */
               transform: translateX(-50%) !important;
           }
           
           /* Protegemos la animación de hover del Discord para que no pierda su centro */
           body.asymmetric-ui #discordBtn:hover { 
               transform: translateX(-50%) translateY(-2px) !important; 
           }
           
           body.asymmetric-ui .spin-hint-container { 
               margin: 25px 0 0 0 !important; 
               margin-left: 190px !important;
               transform: translateX(-50%) !important;
               align-items: center !important; 
           }
           
           /* Devolvemos el "bocadillo" de texto de la peonza al centro */
           body.asymmetric-ui .spin-hint-tooltip { 
               left: 50% !important; 
               transform: translateY(-15px) translateX(-50%) scale(0.8) !important; 
           }
           body.asymmetric-ui .spin-hint-tooltip::before { 
               left: 50% !important; 
               transform: translateX(-50%) !important; 
           }
           body.asymmetric-ui .spin-hint-container:hover .spin-hint-tooltip { 
               transform: translateY(0) translateX(-50%) scale(1) !important; 
           }
         
             body.asymmetric-ui #chatContainer {
                  left: auto !important; 
                  right: 2vw !important; 
                  bottom: 3vh !important;
                  /* Eliminamos el scale(0.9) para que mantenga el nuevo tamaño del 15% */
                  transform: none !important; 
              }
      
              /* --- ADAPTACIÓN ESTÉTICA DEL CHAT A LA DERECHA --- */
              body.asymmetric-ui #chatHeader {
                  border-left: 1px solid rgba(0, 229, 255, 0.2) !important;
                  border-right: 4px solid #00e5ff !important; /* Pasamos la línea de neón a la derecha */
                  border-radius: 6px 6px 0 0 !important;
              }
      
              body.asymmetric-ui .chat-messages-box {
                  border-left: 1px solid rgba(0, 229, 255, 0.2) !important;
                  border-right: 4px solid #00e5ff !important; /* Continuamos el neón por la derecha */
              }
      
              body.asymmetric-ui #chatInput {
                  border-left: 1px solid rgba(0, 229, 255, 0.3) !important;
                  border-right: 4px solid #00e5ff !important; /* Rematamos el neón abajo a la derecha */
                  border-radius: 0 0 6px 0 !important;
              }
      
              body.asymmetric-ui #btnSendChat {
                  border-left: none !important;
                  border-right: 1px solid rgba(0, 229, 255, 0.3) !important;
                  border-radius: 0 0 0 6px !important; /* Invertimos las esquinas del botón de enviar */
              }
         
              body.asymmetric-ui .creator-tag {
                  right: auto !important;
                  left: 2vw !important;
                  bottom: 3vh !important;
                  text-align: left !important;
                  transform-origin: bottom left !important;
              }
            
              body.asymmetric-ui #pingDisplay {
                 position: absolute !important;
                 top: 35px !important; 
                 left: 580px !important; /* <--- Aumentado para separarlo bien de los botones izquierdos */
                 bottom: auto !important;
                 right: auto !important;
                 opacity: 0.6 !important;
                 font-size: 0.8rem !important;
             }
         }

         
                     /* ==========================================================================
                ADAPTACIÓN MÓVIL: PANEL DE SALA PRIVADA
                ========================================================================== */
             @media (max-width: 950px), (max-height: 600px) {
                 .lobby-status-panel, .host-spec-box {
                    width: 320px !important; 
                    padding: 10px 15px !important;
                    margin: 20px 0 10px 0 !important; /* <--- Aumentado a 20px para empujarlo hacia abajo */
                }
                 
                 .lobby-code-display { font-size: 1.2rem !important; margin-bottom: 4px !important; }
                 .lobby-players-display { font-size: 0.8rem !important; }
                 .lobby-status-header { font-size: 0.55rem !important; margin-bottom: 6px !important; padding-bottom: 4px !important; }
                 
                 /* Achicamos el checkbox cibernético */
                 .cyber-checkbox-label { padding: 8px 15px !important; }
                 .custom-checkbox { width: 18px !important; height: 18px !important; }
                 .cyber-checkbox-label input:checked + .custom-checkbox::after { font-size: 11px !important; }
                 .chk-text { font-size: 0.65rem !important; }
                 
                 /* Apretamos la lista y le cortamos la altura máxima para que quepan los botones */
                 .lobby-player-list { 
                     max-height: 85px !important; 
                     margin-top: 8px !important; 
                     padding-top: 8px !important; 
                 }
                 
                 .lobby-player-row { padding: 4px 10px !important; font-size: 0.7rem !important; }
                 .host-badge { font-size: 0.5rem !important; padding: 2px 4px !important; margin-right: 8px !important; }
             }