/* ══════════════════════════════════════════════════════════════════════════
   TERRADROP · TEMA "STRIKE"
   Estética de juego de lucha: pantalla partida VS, cortes en punta de flecha,
   rojo de impacto, oro de cinturón y violeta de fondo.

   IMPORTANTE — cómo funciona este archivo:
   Se carga DESPUÉS de style.css y sólo redefine la CAPA VISUAL (color, fondo,
   borde, sombra, forma y tipografía). NO toca posicionamiento, tamaños ni
   media queries de layout, así que todos los arreglos de solapamiento y de
   móvil que ya están en style.css siguen intactos.

   Paleta:
     rojo impacto  #FF2D55   ← acción principal
     oro cinturón  #FFC531   ← rango, premium, recompensa
     violeta       #7B1FD9 / #A44BFF
     negro         #0A050E
     losa          #1B1024
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Paleta STRIKE ── */
  --sk-red:#FF2D55;      --sk-red-dk:#C41339;   --sk-red-lt:#FF6B87;
  --sk-gold:#FFC531;     --sk-gold-dk:#D89A12;  --sk-gold-lt:#FFDD77;
  --sk-vio:#7B1FD9;      --sk-vio-lt:#A44BFF;   --sk-vio-dk:#4C0F94;
  --sk-blk:#0A050E;      --sk-blk2:#12081A;
  --sk-slab:#1B1024;     --sk-slab2:#261633;    --sk-slab3:#331E45;
  /* --sk-faint se aclaró de #8A73A0 a #A692B8: con el tono anterior las etiquetas
     pequeñas (Fácil/Normal/Difícil) se quedaban en 4.0 de contraste, por debajo del
     mínimo legible de 4.5. */
  --sk-ink:#F7F0FA;      --sk-muted:#B8A3C8;    --sk-faint:#A692B8;
  --sk-line:rgba(164,75,255,.26);
  --sk-line-soft:rgba(164,75,255,.14);

  /* ── Formas (el sello de STRIKE) ── */
  --sk-arrow:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  --sk-arrow-sm:polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
  --sk-slab-l:polygon(0 0, calc(100% - 12px) 0, 100% 100%, 12px 100%);
  --sk-slab-r:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  --sk-notch:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));

  /* ── Tipografía ── */
  --sk-disp:'Barlow Condensed','Arial Narrow','Segoe UI',system-ui,sans-serif;
  --sk-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sk-mono:ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace;

  /* ── Se reasignan los tokens que ya usa style.css ──
     Así los componentes que leen var(--gold)/var(--cyan) cambian solos. */
  --gold:var(--sk-gold);
  --cyan:var(--sk-red);
  --accent-cyan:var(--sk-red);
  --accent-vibrant:var(--sk-red);
  --accent-gradient:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk));
  --accent-gradient-hover:linear-gradient(100deg,var(--sk-red-lt),var(--sk-red));
  --bg-dark:var(--sk-blk);
  --panel-dark:var(--sk-slab);
  --text-main:var(--sk-ink);
  --text-sub:var(--sk-muted);
  --text-muted:var(--sk-muted);
  --dark:var(--sk-blk);
  --glass-bg:rgba(27,16,36,.72);
  --glass-border:var(--sk-line);
  /* legal.php usa var(--accent-primary, #00f2fe); al definirlo aquí, sus títulos
     dejan de salir en el cian antiguo sin tocar esa página. */
  --accent-primary:var(--sk-red);
}

/* Utilidad de título: itálica condensada pesada con sombra de impacto */
.sk-title,
h1, h2,
#auth-title,
.mission-briefing-v4 h2,
.sec-title{
  font-family:var(--sk-disp);
  font-weight:800;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.01em;
}

/* ═══════════════════════════════════════════ 1 · FONDO GLOBAL ══════════ */
body{
  font-family:var(--sk-body);
  color:var(--sk-ink);
  background:
    radial-gradient(90% 46% at 50% 0%, rgba(255,45,85,.20), transparent 62%),
    radial-gradient(70% 40% at 88% 82%, rgba(123,31,217,.22), transparent 60%),
    linear-gradient(180deg,#180B22,#0A050E) !important;
}

/* ── FONDO: "HUMO" ────────────────────────────────────────────────────────
   Sin patrón repetido de ningún tipo: sólo pozas de luz roja y violeta muy
   difuminadas, como humo iluminado, más una viñeta fuerte que oscurece los
   bordes. Es el fondo más limpio de los cuatro y deja todo el protagonismo al
   panel. Todo son degradados CSS (sin imágenes ni canvas), así que no pesa. */
#main-menu .glass-bg{
  background:
    radial-gradient(42% 34% at 22% 24%, rgba(255,45,85,.30), transparent 66%),
    radial-gradient(46% 38% at 78% 34%, rgba(164,75,255,.28), transparent 68%),
    radial-gradient(56% 40% at 38% 84%, rgba(123,31,217,.34), transparent 70%),
    radial-gradient(38% 30% at 82% 80%, rgba(255,45,85,.20), transparent 68%),
    radial-gradient(130% 96% at 50% 50%, transparent 22%, rgba(3,1,6,.9) 100%),
    linear-gradient(180deg,#170B21,#06030B) !important;
  filter:none !important;
}
/* Los dos orbes heredados pasan a ser resplandores de esquina muy suaves. */
#main-menu .glass-bg::before{background:var(--sk-red) !important;opacity:.12 !important}
#main-menu .glass-bg::after{background:var(--sk-vio) !important;opacity:.20 !important}

/* La Tierra ambiental y las estrellas no encajan en un juego de lucha */
.cosmos-earth,
.cosmos-fx{display:none !important}

/* ═══════════════════════════════════════ 2 · PANELES / SUPERFICIES ═════ */
.glass-panel,
#main-menu .glass-panel{
  background:linear-gradient(170deg, rgba(38,22,51,.94), rgba(14,7,20,.96)) !important;
  border:1.5px solid var(--sk-line) !important;
  border-radius:0 !important;
  clip-path:var(--sk-notch);
  box-shadow:0 30px 80px -30px #000, inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter:blur(10px);
}
.glass-loading-box{
  background:linear-gradient(170deg,#261633,#12081A) !important;
  border:1.5px solid var(--sk-line) !important;
  border-radius:0 !important;
  box-shadow:0 30px 80px -30px #000, inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.config-section-v4,
#main-menu .config-section-v4{
  background:linear-gradient(160deg, rgba(38,22,51,.85), rgba(20,11,29,.9)) !important;
  border:1px solid var(--sk-line-soft) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-r);
}
.loading-overlay-v4{
  background:rgba(8,4,12,.82) !important;
}

/* ═══════════════════════════════════════════ 3 · BOTONES ══════════════ */
/* Acción principal: forma de flecha, rojo de impacto */
.btn-deploy-v4,
#start-game-btn,
.btn-accept-v4{
  font-family:var(--sk-disp) !important;
  font-weight:800 !important;
  font-style:italic !important;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:1.12rem;
  color:#fff !important;
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:var(--sk-arrow);
  box-shadow:0 0 34px -10px rgba(255,45,85,.95) !important;
  text-shadow:0 2px 0 rgba(0,0,0,.4);
  transition:filter .14s, transform .14s;
}
.btn-deploy-v4:hover,
#start-game-btn:hover,
.btn-accept-v4:hover{
  filter:brightness(1.12);
  transform:scale(1.02);
  background:linear-gradient(100deg,var(--sk-red-lt),var(--sk-red)) !important;
}

/* Botón secundario: losa violeta cortada */
.config-btn-v4,
.btn-decline-v4,
.push-btn--ghost{
  font-family:var(--sk-disp) !important;
  font-weight:700 !important;
  font-style:italic !important;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--sk-ink) !important;
  background:linear-gradient(100deg,var(--sk-slab2),var(--sk-slab)) !important;
  border:1px solid var(--sk-line) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-l);
  transition:.14s;
}
.config-btn-v4:hover,
.btn-decline-v4:hover{
  background:linear-gradient(100deg,var(--sk-vio),var(--sk-vio-dk)) !important;
  border-color:var(--sk-vio-lt) !important;
  color:#fff !important;
}
.config-btn-v4.active,
.config-card-v4.active{
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  border-color:var(--sk-red) !important;
  color:#fff !important;
  box-shadow:0 0 22px -8px rgba(255,45,85,.9) !important;
}

/* Botón premium/oro (ANALIZAR CONTINENTE, REVELAR DÉCADA…) */
.btn-gold{
  font-family:var(--sk-disp) !important;
  font-weight:800 !important;
  font-style:italic !important;
  color:#2E1A00 !important;
  background:linear-gradient(100deg,var(--sk-gold-lt),var(--sk-gold)) !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:var(--sk-arrow-sm);
  box-shadow:0 0 26px -10px rgba(255,197,49,.9) !important;
}
.btn-gold:hover{filter:brightness(1.1);transform:scale(1.02)}
.btn-gold i{color:#2E1A00 !important}

/* Botones de zona/región y tarjetas de configuración */
.config-card-v4{
  background:linear-gradient(160deg,var(--sk-slab2),var(--sk-slab)) !important;
  border:1px solid var(--sk-line-soft) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-r);
  color:var(--sk-muted) !important;
  font-family:var(--sk-disp);
  font-weight:700;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.02em;
  box-shadow:none !important;
  transition:.14s;
}
.config-card-v4:hover{border-color:var(--sk-vio-lt) !important;color:var(--sk-ink) !important}
.config-card-v4 i{color:var(--sk-gold)}
.config-card-v4.active i{color:#fff}

/* Píldoras del editor de avatar */
.cyber-pill-btn{
  font-family:var(--sk-disp) !important;
  font-weight:700 !important;
  font-style:italic !important;
  text-transform:uppercase;
  border-radius:0 !important;
  clip-path:var(--sk-slab-l);
  background:var(--sk-slab2) !important;
  border:1px solid var(--sk-line-soft) !important;
  color:var(--sk-muted) !important;
}
.cyber-pill-btn:hover{background:var(--sk-slab3) !important;color:var(--sk-ink) !important;border-color:transparent !important}
.cyber-pill-btn.active,
#profile-modal .cyber-pill-btn.active{
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 0 20px -8px rgba(255,45,85,.9) !important;
}

/* Pestañas principales (Solo / Multijugador / Ranking) */
.tab-btn{
  font-family:var(--sk-disp) !important;
  font-weight:700 !important;
  font-style:italic !important;
  text-transform:uppercase;
  letter-spacing:.03em;
  background:var(--sk-slab) !important;
  border:1px solid var(--sk-line-soft) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-l);
  color:var(--sk-muted) !important;
  box-shadow:none !important;
  transition:.14s;
}
.tab-btn:hover{color:var(--sk-ink) !important;border-color:var(--sk-vio-lt) !important}
.tab-btn.active{
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 0 22px -8px rgba(255,45,85,.85) !important;
}
.tab-btn.active i{color:#fff !important}

/* Botón de idioma / tema en la barra superior */
.lang-btn,
.theme-toggle-btn-v4,
#main-menu .theme-toggle-btn-v4{
  background:var(--sk-slab2) !important;
  border:1px solid var(--sk-line) !important;
  color:var(--sk-ink) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-l);
  font-family:var(--sk-disp);
  font-weight:700;
  font-style:italic;
}
.lang-btn:hover,
.theme-toggle-btn-v4:hover{background:var(--sk-vio) !important;border-color:var(--sk-vio-lt) !important}
.lang-btn.active{background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;color:#fff !important;border-color:transparent !important}

/* ═══════════════════════════════════ 4 · MENÚ PRINCIPAL ═══════════════ */
.top-nav-v4,
#main-menu .top-nav-v4{
  background:linear-gradient(100deg, rgba(123,31,217,.32), rgba(10,5,14,.6)) !important;
  border-bottom:2px solid var(--sk-red) !important;
}
/* OJO: el atajo `background:...!important` fuerza además `background-clip:border-box`,
   lo que rompía el recorte del degradado sobre el texto (el logo salía como una barra
   dorada). Por eso background-clip TIENE que llevar !important también. */
.menu-logo-v4,
#main-menu .menu-logo-v4{
  font-family:var(--sk-disp) !important;
  font-weight:800 !important;
  font-style:italic !important;
  text-transform:uppercase;
  letter-spacing:.02em;
  background:linear-gradient(100deg,#fff,var(--sk-gold)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  text-shadow:none;
}
#main-menu .menu-logo-v4 i{color:var(--sk-red) !important;-webkit-text-fill-color:var(--sk-red)}

.mission-briefing-v4 h2{
  color:#fff !important;
  text-shadow:3px 3px 0 var(--sk-red);
}
.glass-label,
.stat-setting__label,
.cosmetic-section__label,
.cyber-card-title{
  font-family:var(--sk-disp) !important;
  font-weight:700 !important;
  font-style:italic !important;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--sk-gold) !important;
}

/* Tarjetas de modo de juego */
.mode-card{
  background:linear-gradient(100deg,var(--sk-slab2),var(--sk-slab)) !important;
  border:1px solid var(--sk-line-soft) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-l);
  box-shadow:none !important;
  transition:.14s;
}
.mode-card:hover{border-color:var(--sk-vio-lt) !important;transform:translateX(3px)}
.mode-card.active{
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  border-color:transparent !important;
  box-shadow:0 0 26px -10px rgba(255,45,85,.9) !important;
}
.mode-card__glow{display:none !important}
.mode-card__name{
  font-family:var(--sk-disp) !important;
  font-weight:800 !important;
  font-style:italic !important;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--sk-ink) !important;
}
.mode-card.active .mode-card__name{color:#fff !important}
.mode-card__tag{
  font-family:var(--sk-mono) !important;
  font-size:.6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sk-faint) !important;
}
.mode-card.active .mode-card__tag{color:rgba(255,255,255,.85) !important}
.mode-card__icon{color:var(--sk-gold) !important}
.mode-card.active .mode-card__icon{color:#fff !important}
.mode-card__check{background:var(--sk-gold) !important;color:#2E1A00 !important;border-radius:0 !important;clip-path:var(--sk-arrow-sm)}

/* Ajustes de vida / tiempo / velocidad */
.stat-tile,
.speedrun-speed-tile{
  background:var(--sk-slab2) !important;
  border:1px solid var(--sk-line-soft) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-r);
  transition:.14s;
}
.stat-tile:hover,
.speedrun-speed-tile:hover{border-color:var(--sk-vio-lt) !important}
.stat-tile.active,
.speedrun-speed-tile.active{
  background:linear-gradient(100deg,var(--sk-vio),var(--sk-vio-dk)) !important;
  border-color:var(--sk-vio-lt) !important;
  box-shadow:0 0 20px -8px rgba(164,75,255,.9) !important;
}
.stat-tile__val{
  font-family:var(--sk-disp) !important;
  font-weight:800 !important;
  font-style:italic !important;
  color:var(--sk-ink) !important;
}
.stat-tile.active .stat-tile__val{color:#fff !important}
.stat-tile__sub{font-family:var(--sk-mono) !important;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-faint) !important}
.stat-setting__icon{color:var(--sk-red) !important}

/* Tarjeta de agente (perfil en el menú) */
.agent-card,
.agent-card__info{background:transparent}
.agent-card__callsign,
.agent-name{
  font-family:var(--sk-disp) !important;
  font-weight:800 !important;
  font-style:italic !important;
  text-transform:uppercase;
  color:var(--sk-ink) !important;
}
.agent-card__avatar-ring{
  border:2px solid var(--sk-gold) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-l);
  box-shadow:0 0 18px -6px rgba(255,197,49,.8) !important;
}
.agent-card__status{font-family:var(--sk-mono) !important;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sk-gold) !important}
.agent-card__status-dot{background:var(--sk-red) !important;box-shadow:0 0 8px var(--sk-red) !important}
.agent-dropdown{
  background:linear-gradient(170deg,var(--sk-slab2),var(--sk-blk2)) !important;
  border:1px solid var(--sk-line) !important;
  border-radius:0 !important;
  clip-path:var(--sk-notch);
}
.agent-dropdown__item{
  font-family:var(--sk-disp) !important;
  font-weight:700 !important;
  font-style:italic !important;
  text-transform:uppercase;
  color:var(--sk-ink) !important;
}
.agent-dropdown__item:hover{background:var(--sk-vio) !important;color:#fff !important}
.agent-dropdown__item--gold{color:var(--sk-gold) !important}
.agent-dropdown__item--danger{color:var(--sk-red) !important}
.agent-dropdown__header{
  font-family:var(--sk-mono) !important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sk-faint) !important;border-bottom:1px solid var(--sk-line) !important;
}
/* Chips de racha y nivel */
.agent-chip{
  font-family:var(--sk-mono) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-l);
  border:1px solid var(--sk-line) !important;
  background:var(--sk-slab) !important;
}
.agent-chip--streak{color:var(--sk-red) !important;border-color:rgba(255,45,85,.5) !important}
.agent-chip--level{color:var(--sk-gold) !important;border-color:rgba(255,197,49,.5) !important}

/* ═══════════════════════════════════════ 5 · LOGIN / REGISTRO ═════════ */
.auth-box-premium{
  background:linear-gradient(170deg,#261633,#12081A) !important;
  border:1.5px solid var(--sk-line) !important;
  border-radius:0 !important;
  box-shadow:0 30px 80px -30px #000, inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.auth-box-premium::before{background:linear-gradient(90deg,transparent,var(--sk-red),transparent) !important;height:3px !important}
/* .auth-scan-line removed from the markup — nothing left to restyle. */
#auth-title{
  background:linear-gradient(100deg,#fff,var(--sk-gold)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}
.auth-glass-input{
  background:var(--sk-blk2) !important;
  border:1px solid var(--sk-line) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-r);
  color:var(--sk-ink) !important;
  font-family:var(--sk-body) !important;
  box-shadow:none !important;
}
.auth-glass-input:focus{border-color:var(--sk-red) !important;box-shadow:0 0 0 1px var(--sk-red), 0 0 24px -10px rgba(255,45,85,.9) !important}
.auth-input-icon{color:var(--sk-red) !important}
.pwd-toggle-btn{color:var(--sk-faint) !important}
#auth-switch-link,
#forgot-password-link{color:var(--sk-gold) !important;border-bottom-color:rgba(255,197,49,.5) !important}
#password-reqs{
  background:var(--sk-blk2) !important;
  border:1px solid var(--sk-line-soft) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-r);
}
#auth-error{
  background:rgba(255,45,85,.16) !important;
  border:1px solid var(--sk-red) !important;
  border-left:4px solid var(--sk-red) !important;
  border-radius:0 !important;
  color:var(--sk-red-lt) !important;
}

/* ═══════════════════════════════════ 6 · EDITOR DE PERFIL ═════════════ */
#profile-modal .profile-v5-modal,
.cyber-hud-modal{
  background:linear-gradient(170deg,#261633,#0E0714) !important;
  border:1.5px solid var(--sk-line) !important;
  border-radius:0 !important;
}
#profile-modal .cyber-avatar-panel{
  background:
    radial-gradient(circle at 50% 32%, rgba(255,45,85,.20), rgba(14,7,20,.85) 68%),
    linear-gradient(170deg,var(--sk-slab),var(--sk-blk)) !important;
  border:1.5px solid var(--sk-line) !important;
  border-radius:0 !important;
  clip-path:var(--sk-notch);
}
#profile-modal .avatar-editor-tabs{
  background:var(--sk-blk2) !important;
  border:1px solid var(--sk-line-soft) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-r);
}
.cyber-card-v5,
#profile-modal .cyber-card-v5{
  background:linear-gradient(160deg,var(--sk-slab2),var(--sk-slab)) !important;
  border:1px solid var(--sk-line-soft) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-r);
}
.cyber-badge{
  font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;
  background:linear-gradient(100deg,var(--sk-gold-lt),var(--sk-gold)) !important;
  color:#2E1A00 !important;border-radius:0 !important;clip-path:var(--sk-arrow-sm);border:0 !important;
}
/* Selectores de color: rombos en vez de círculos */
.cyber-color-btn,
#profile-modal .cyber-color-btn{
  border-radius:0 !important;
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  border:0 !important;
  box-shadow:none !important;
}
.cyber-color-btn.active,
#profile-modal .cyber-color-btn.active{
  box-shadow:0 0 0 2px var(--sk-gold), 0 0 18px -4px var(--sk-gold) !important;
}
.cyber-switch-container,
.cyber-switch-btn{
  background:var(--sk-slab2) !important;
  border:1px solid var(--sk-line-soft) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-l);
  color:var(--sk-muted) !important;
}
.cyber-switch-btn.active,
.cyber-switch-container.active{
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  color:#fff !important;border-color:transparent !important;
}
.cyber-switch-label{font-family:var(--sk-mono) !important;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase}
.cyber-select-v5{
  background:var(--sk-blk2) !important;border:1px solid var(--sk-line) !important;
  border-radius:0 !important;color:var(--sk-ink) !important;font-family:var(--sk-body) !important;
}
/* Tarjetas de cosméticos y mascotas */
.cosm-card,
.pet-card{
  background:linear-gradient(160deg,var(--sk-slab2),var(--sk-slab)) !important;
  border:1px solid var(--sk-line-soft) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-r);
  transition:.14s;
}
.cosm-card:hover,
.pet-card:hover{border-color:var(--sk-vio-lt) !important;transform:translateY(-2px)}
.cosm-card.active,
.pet-card.active{
  background:linear-gradient(160deg,var(--sk-red),var(--sk-red-dk)) !important;
  border-color:transparent !important;
  box-shadow:0 0 22px -8px rgba(255,45,85,.9) !important;
}
.cosm-card__name,
.pet-card__name{
  font-family:var(--sk-disp) !important;font-weight:700 !important;font-style:italic !important;
  text-transform:uppercase;color:var(--sk-ink) !important;
}
.cosm-card__sub{font-family:var(--sk-mono) !important;font-size:.54rem;letter-spacing:.08em;color:var(--sk-faint) !important}
.cosm-card__icon{color:var(--sk-gold) !important}
.cosm-card__pro-badge,
.pet-card__pro-badge{
  background:linear-gradient(100deg,var(--sk-gold-lt),var(--sk-gold)) !important;
  color:#2E1A00 !important;border-radius:0 !important;clip-path:var(--sk-arrow-sm);
  font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;border:0 !important;
}
.cosm-card--pro,
.pet-card--pro{border-color:rgba(255,197,49,.35) !important}
.btn-save-cyber{
  font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;
  text-transform:uppercase;letter-spacing:.04em;color:#fff !important;
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  border:0 !important;border-radius:0 !important;clip-path:var(--sk-arrow);
  box-shadow:0 0 30px -10px rgba(255,45,85,.95) !important;
}
.btn-save-cyber:hover{filter:brightness(1.1)}
/* Barra de nivel en logros */
.ach-level-box{background:var(--sk-slab) !important;border:1px solid var(--sk-line) !important;border-radius:0 !important;clip-path:var(--sk-slab-r)}
.ach-level-track{background:var(--sk-blk) !important;border-radius:0 !important;clip-path:var(--sk-slab-l)}
.ach-level-fill{background:linear-gradient(90deg,var(--sk-red),var(--sk-gold)) !important;border-radius:0 !important;box-shadow:0 0 10px rgba(255,45,85,.6)}

/* ═══════════════════════════════════════════ 7 · HUD DE PARTIDA ═══════ */
.floating-hud{font-family:var(--sk-disp)}
.hud-label{
  font-family:var(--sk-mono) !important;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sk-faint) !important;
}
/* Round + timer sit on raw Street View, so they need their own plate. The old
   treatment was a hard 3px red offset shadow over a gradient-clipped fill: style.css
   sets -webkit-text-fill-color:transparent, so the glyphs vanished and only the red
   ghost showed. Solid fill on a dark slab — legible over sky, asphalt or snow. */
#round-counter,
#round-timer{
  font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;
  text-transform:uppercase;
  background:rgba(10,5,14,.82) !important;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,.9) !important;
  padding:2px 12px 2px 10px;clip-path:var(--sk-slab-r);
  box-shadow:inset 3px 0 0 var(--sk-red);
}
#round-timer{color:var(--sk-gold) !important;-webkit-text-fill-color:var(--sk-gold) !important;box-shadow:inset 3px 0 0 var(--sk-gold);}
.energy-box{color:var(--sk-gold) !important;font-family:var(--sk-disp) !important;font-style:italic !important;font-weight:800 !important}
/* Cápsula de vida → placa de luchador */
.modern-hp-container{
  background:linear-gradient(100deg, rgba(38,22,51,.9), rgba(10,5,14,.9)) !important;
  border:1px solid var(--sk-line) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-l);
  box-shadow:0 0 22px -10px rgba(255,45,85,.6) !important;
}
.modern-hp-track{background:var(--sk-blk) !important;border-radius:0 !important;clip-path:var(--sk-slab-l)}
.modern-hp-fill{
  background:linear-gradient(90deg,var(--sk-red),var(--sk-gold)) !important;
  border-radius:0 !important;box-shadow:0 0 10px rgba(255,45,85,.7) !important;
}
.modern-hp-container.hp-critical{border-color:var(--sk-red) !important;box-shadow:0 0 22px rgba(255,45,85,.7) !important}
.modern-hp-text{font-family:var(--sk-mono) !important;color:var(--sk-ink) !important}
.sp-hud-avatar-wrapper{
  border:2px solid var(--sk-gold) !important;border-radius:0 !important;clip-path:var(--sk-slab-l);
  box-shadow:0 0 14px -4px rgba(255,197,49,.8) !important;
}
#sp-hud-prestige-title{color:var(--sk-gold) !important;font-family:var(--sk-disp) !important;font-style:italic !important}
/* Botones circulares del HUD → rombos */
.hud-music-btn{
  background:linear-gradient(160deg,var(--sk-slab2),var(--sk-blk2)) !important;
  border:1px solid var(--sk-line) !important;
  border-radius:0 !important;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color:var(--sk-gold) !important;
  box-shadow:none !important;
}
.hud-music-btn:hover{background:var(--sk-vio) !important;color:#fff !important;transform:scale(1.08)}
#quit-to-menu-btn{color:var(--sk-red) !important;border-color:rgba(255,45,85,.5) !important}
#quit-to-menu-btn:hover{background:var(--sk-red) !important;color:#fff !important}
/* Habilidades tácticas */
.tactical-btn{
  background:linear-gradient(160deg,var(--sk-slab2),var(--sk-slab)) !important;
  border:1px solid var(--sk-line) !important;
  border-radius:0 !important;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color:var(--sk-ink) !important;
  font-family:var(--sk-disp) !important;font-style:italic !important;font-weight:700 !important;
  box-shadow:none !important;
}
.tactical-btn i{color:var(--sk-gold) !important}
.tactical-btn:hover:not(:disabled){border-color:var(--sk-red) !important;box-shadow:0 0 20px -8px rgba(255,45,85,.9) !important}
.tactical-btn:hover:not(:disabled) i{color:var(--sk-red) !important}
/* Mapa */
.map-container-wrapper{
  border:2px solid var(--sk-red) !important;
  border-radius:0 !important;
  background:rgba(10,5,14,.9) !important;
  box-shadow:0 0 30px -12px rgba(255,45,85,.8) !important;
}
#guess-btn{
  font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;
  text-transform:uppercase;color:#fff !important;
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  border:0 !important;border-radius:0 !important;clip-path:var(--sk-arrow);
  box-shadow:0 0 30px -10px rgba(255,45,85,.95) !important;
}
.map-toggle-btn{
  background:var(--sk-slab2) !important;border:1px solid var(--sk-red) !important;
  color:var(--sk-red) !important;border-radius:0 !important;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* Multijugador en partida */
.mp-agent-card{
  background:linear-gradient(100deg,var(--sk-slab2),var(--sk-slab)) !important;
  border:1px solid var(--sk-line) !important;border-radius:0 !important;clip-path:var(--sk-slab-l);
}
.mp-vs-badge{
  font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;
  color:var(--sk-gold) !important;
  text-shadow:0 2px 0 #000, 0 0 16px rgba(255,197,49,.9);
}
.agent-hp-bar{background:var(--sk-blk) !important;border-radius:0 !important}
.agent-hp-fill{background:linear-gradient(90deg,var(--sk-red),var(--sk-gold)) !important;border-radius:0 !important}
.agent-hp-val{font-family:var(--sk-mono) !important;color:var(--sk-muted) !important}

/* Escáner de acento y dron */
.accent-scanner{
  background:linear-gradient(170deg, rgba(38,22,51,.95), rgba(10,5,14,.95)) !important;
  border:1.5px solid var(--sk-line) !important;
  border-radius:0 !important;
  clip-path:var(--sk-notch);
  box-shadow:0 0 40px -14px rgba(255,45,85,.6) !important;
  font-family:var(--sk-body) !important;
}
.scanner-title{font-family:var(--sk-disp) !important;font-style:italic !important;font-weight:800 !important;color:var(--sk-gold) !important}
.accent-play-btn{
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  color:#fff !important;border-radius:0 !important;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow:0 0 24px -8px rgba(255,45,85,.9) !important;
}
.playback-timer{font-family:var(--sk-disp) !important;font-style:italic !important;font-weight:800 !important;color:var(--sk-red) !important}
.waveform-bar{background:var(--sk-vio) !important}
.accent-guess-input{
  background:var(--sk-blk2) !important;border:1px solid var(--sk-line) !important;
  border-radius:0 !important;clip-path:var(--sk-slab-r);color:var(--sk-ink) !important;
}
.drone-hud{color:var(--sk-red) !important;text-shadow:0 0 4px rgba(255,45,85,.7) !important}
.drone-telemetry-left,
.drone-telemetry-right{
  background:rgba(27,16,36,.72) !important;border:1px solid rgba(255,45,85,.28) !important;
  border-radius:0 !important;clip-path:var(--sk-slab-r);
}
.drone-corner{border-color:var(--sk-red) !important}

/* ═══════════════════════════════════ 8 · RESULTADOS Y DIÁLOGOS ════════ */
/* Pantalla de resultados: es el momento de "K.O." del juego, así que lleva el
   tratamiento más fuerte — marco rojo, cabecera con sombra de impacto y estrellas
   en oro de cinturón. Usa .results-box (no .glass-loading-box). */
.results-overlay{background:rgba(8,4,12,.86) !important}
.results-box{
  background:linear-gradient(170deg,#261633,#0E0714) !important;
  border:2px solid var(--sk-red) !important;
  border-radius:0 !important;
  clip-path:var(--sk-notch);
  box-shadow:0 0 60px -18px rgba(255,45,85,.85) !important;
}
.result-stars{color:var(--sk-gold) !important;filter:drop-shadow(0 0 8px rgba(255,197,49,.7))}
.result-location{
  font-family:var(--sk-mono) !important;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sk-muted) !important;
}
.result-share-btn{
  background:linear-gradient(100deg,var(--sk-vio),var(--sk-vio-dk)) !important;
  color:#fff !important;border:0 !important;border-radius:0 !important;clip-path:var(--sk-arrow-sm);
  font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;
  text-transform:uppercase;
}
.result-share-btn:hover{filter:brightness(1.12)}
#next-btn{
  font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;
  text-transform:uppercase;color:#fff !important;
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  border:0 !important;border-radius:0 !important;clip-path:var(--sk-arrow);
  box-shadow:0 0 30px -10px rgba(255,45,85,.95) !important;
}
#restart-btn{
  font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;
  text-transform:uppercase;color:#2E1A00 !important;
  background:linear-gradient(100deg,var(--sk-gold-lt),var(--sk-gold)) !important;
  border:0 !important;border-radius:0 !important;clip-path:var(--sk-arrow);
}
.sonar-indicator{
  background:rgba(27,16,36,.8) !important;border:1px solid var(--sk-red) !important;
  color:var(--sk-red) !important;border-radius:0 !important;clip-path:var(--sk-slab-l);
}
.sonar-pulse{background:var(--sk-red) !important}
/* Same hard-offset shadow that made ROUND 1 unreadable: on two-line multiplayer
   results it reads as a red duplicate of every line. Tight dark shadow instead. */
#round-distance{
  font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;
  text-transform:uppercase;color:#fff !important;text-shadow:0 2px 4px rgba(0,0,0,.95) !important;
}
#round-score{font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important}
#custom-dialog-modal .glass-loading-box{
  background:linear-gradient(170deg,#261633,#12081A) !important;
  border:1.5px solid var(--sk-line) !important;border-radius:0 !important;
}
#dialog-title{font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;text-transform:uppercase}
.toast-body,
.cyber-alert{
  background:linear-gradient(100deg,var(--sk-slab2),var(--sk-blk2)) !important;
  border:1px solid var(--sk-line) !important;border-radius:0 !important;clip-path:var(--sk-slab-l);
}
/* Onboarding */
.onb-card{
  background:linear-gradient(170deg,#261633,#12081A) !important;
  border:1.5px solid var(--sk-line) !important;border-radius:0 !important;clip-path:var(--sk-notch);
}
.onb-title{font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;text-transform:uppercase;color:#fff !important}
.onb-icon i{color:var(--sk-red) !important}
.onb-dot.active{background:var(--sk-red) !important}
.onb-next{
  font-family:var(--sk-disp) !important;font-style:italic !important;font-weight:800 !important;
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  border-radius:0 !important;clip-path:var(--sk-arrow);color:#fff !important;
}
/* Aviso de notificaciones */
.push-prompt{
  background:linear-gradient(100deg,var(--sk-slab2),var(--sk-blk2)) !important;
  border:1px solid var(--sk-line) !important;border-radius:0 !important;clip-path:var(--sk-slab-l);
}
.push-btn--primary{
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  color:#fff !important;border:0 !important;border-radius:0 !important;clip-path:var(--sk-arrow-sm);
  font-family:var(--sk-disp) !important;font-style:italic !important;font-weight:800 !important;
}
/* Cookies */
.cookie-banner-v4{
  background:linear-gradient(100deg,var(--sk-slab2),var(--sk-blk2)) !important;
  border:1px solid var(--sk-line) !important;border-radius:0 !important;
}
.cookie-icon-v4{color:var(--sk-gold) !important}

/* ═══════════════════════════════════════ 9 · RANKING Y TABLAS ═════════ */
.glass-table th{
  font-family:var(--sk-disp) !important;font-weight:700 !important;font-style:italic !important;
  text-transform:uppercase;letter-spacing:.08em;color:var(--sk-gold) !important;
  border-bottom:2px solid var(--sk-red) !important;
}
.glass-table td{border-bottom:1px solid var(--sk-line-soft) !important;color:var(--sk-ink) !important}
.glass-table tbody tr:hover{background:rgba(164,75,255,.12) !important}
.rank-badge{
  font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;
  border-radius:0 !important;clip-path:var(--sk-slab-l);
}
/* Cinturones de rango (el motivo estrella de STRIKE) */
.rank-tier-bronze{background:rgba(205,127,50,.18) !important;border:1px solid rgba(205,127,50,.55) !important;color:#CD7F32 !important;border-radius:0 !important;clip-path:var(--sk-slab-l)}
.rank-tier-silver{background:rgba(192,192,192,.18) !important;border:1px solid rgba(192,192,192,.55) !important;color:#C0C0C0 !important;border-radius:0 !important;clip-path:var(--sk-slab-l)}
.rank-tier-gold{background:rgba(255,197,49,.18) !important;border:1px solid var(--sk-gold) !important;color:var(--sk-gold) !important;border-radius:0 !important;clip-path:var(--sk-slab-l)}
.rank-tier-platinum{background:rgba(255,45,85,.16) !important;border:1px solid var(--sk-red) !important;color:var(--sk-red) !important;border-radius:0 !important;clip-path:var(--sk-slab-l)}
.rank-tier-diamond{background:rgba(164,75,255,.18) !important;border:1px solid var(--sk-vio-lt) !important;color:var(--sk-vio-lt) !important;border-radius:0 !important;clip-path:var(--sk-slab-l)}
.rank-tier-master{background:linear-gradient(100deg,rgba(255,45,85,.25),rgba(255,197,49,.25)) !important;border:1px solid var(--sk-gold) !important;color:#fff !important;border-radius:0 !important;clip-path:var(--sk-slab-l)}
#season-progress-box{background:var(--sk-slab) !important;border:1px solid var(--sk-line) !important;border-radius:0 !important;clip-path:var(--sk-slab-r)}
.stat-mini-card{background:var(--sk-slab2) !important;border:1px solid var(--sk-line-soft) !important;border-radius:0 !important;clip-path:var(--sk-slab-r)}
.stat-mini-val{font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;color:var(--sk-gold) !important}
.stat-mini-lbl{font-family:var(--sk-mono) !important;font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-faint) !important}

/* ═══════════════════════════════════════ 10 · AMIGOS Y MULTI ═════════ */
.friends-tab-btn{
  font-family:var(--sk-disp) !important;font-weight:700 !important;font-style:italic !important;
  text-transform:uppercase;background:var(--sk-slab) !important;
  border:1px solid var(--sk-line-soft) !important;border-radius:0 !important;clip-path:var(--sk-slab-l);
  color:var(--sk-muted) !important;
}
.friends-tab-btn.active{background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;color:#fff !important;border-color:transparent !important}
.player-slot-v4{
  background:linear-gradient(100deg,var(--sk-slab2),var(--sk-slab)) !important;
  border:1px solid var(--sk-line) !important;border-radius:0 !important;clip-path:var(--sk-slab-l);
}
.player-name-span{font-family:var(--sk-disp) !important;font-weight:700 !important;font-style:italic !important;text-transform:uppercase}
.player-status-badge{
  font-family:var(--sk-mono) !important;border-radius:0 !important;clip-path:var(--sk-slab-l);
  background:var(--sk-slab) !important;border:1px solid var(--sk-line) !important;color:var(--sk-gold) !important;
}
.waiting-badge{color:var(--sk-faint) !important}
.cyber-lobby-card{
  background:linear-gradient(160deg,var(--sk-slab2),var(--sk-slab)) !important;
  border:1px solid var(--sk-line) !important;border-radius:0 !important;clip-path:var(--sk-slab-r);
}

/* ═══════════════════════════════════════════ 11 · PREMIUM ════════════ */
.glass-card-upgrade{
  background:linear-gradient(160deg, rgba(255,197,49,.14), var(--sk-slab)) !important;
  border:1.5px solid var(--sk-gold) !important;
  border-radius:0 !important;clip-path:var(--sk-notch);
  box-shadow:0 0 40px -16px rgba(255,197,49,.8) !important;
}
.cc-pro-feat{color:var(--sk-ink) !important}
.cc-pro-feat i{color:var(--sk-gold) !important}
#go-premium-btn{color:var(--sk-gold) !important;border-color:rgba(255,197,49,.5) !important}
#go-premium-btn:hover{background:var(--sk-gold) !important;color:#2E1A00 !important}
.premium-mod-label{font-family:var(--sk-disp) !important;font-style:italic !important;color:var(--sk-gold) !important}

/* ── Casillas de verificación (modificadores PRO) ────────────────────────
   Venían con el estilo por defecto del navegador (cuadrito gris de sistema), que
   desentonaba con todo lo demás. Ahora son casillas del tema: corte en diagonal,
   relleno rojo al marcar y check blanco dibujado con borde. */
.cyber-checkbox{
  -webkit-appearance:none; appearance:none;
  width:19px; height:19px; flex:0 0 19px; margin:0;
  background:var(--sk-blk2);
  border:1.5px solid var(--sk-line);
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 5px) 0, 100% 100%, 5px 100%);
  cursor:pointer; position:relative; transition:.14s;
}
.cyber-checkbox:hover:not(:disabled){border-color:var(--sk-red);box-shadow:0 0 12px -4px rgba(255,45,85,.9)}
.cyber-checkbox:checked{
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk));
  border-color:transparent;
}
.cyber-checkbox:checked::after{
  content:""; position:absolute; left:6px; top:2px;
  width:4px; height:9px; border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform:rotate(42deg);
}
.cyber-checkbox:disabled{opacity:.4;cursor:not-allowed}
.premium-mod-label{font-family:var(--sk-disp) !important;font-style:italic !important;font-weight:700 !important;text-transform:uppercase;letter-spacing:.02em}

/* ═══════════════════════════════════════════ 12 · ADMIN ══════════════ */
/* Las 6 pestañas no caben en una fila dentro del modal y la última (Errores)
   quedaba cortada e inalcanzable. En escritorio pasan a dos filas; en móvil se
   mantiene el desplazamiento horizontal, que allí es el patrón correcto. */
@media (min-width:641px){
  #admin-modal .glass-tabs{flex-wrap:wrap !important;overflow:visible !important}
}
#admin-modal .glass-tabs{gap:8px}
#admin-errors-feed{font-family:var(--sk-mono) !important}
#admin-errors-feed > div{border-radius:0 !important;clip-path:var(--sk-slab-r)}
#admin-modal .glass-loading-box{border-color:var(--sk-gold) !important}
.admin-tab{
  font-family:var(--sk-disp) !important;font-weight:700 !important;font-style:italic !important;
  text-transform:uppercase;border-radius:0 !important;clip-path:var(--sk-slab-l);
}
.admin-metric-card{
  background:linear-gradient(160deg,var(--sk-slab2),var(--sk-slab)) !important;
  border:1px solid var(--sk-line-soft) !important;border-radius:0 !important;clip-path:var(--sk-slab-r);
}
.admin-metric-val{font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important}
.admin-metric-lbl{font-family:var(--sk-mono) !important;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-faint) !important}
.admin-metric-icon{color:var(--sk-red) !important}

/* ═══════════════════════════════════════════ 13 · DOSIER WIKI ════════ */
.wiki-dossier-panel,
#premium-dossier-modal .modal-content{
  background:linear-gradient(170deg,var(--sk-slab2),var(--sk-blk2)) !important;
  border:1px solid var(--sk-line) !important;border-radius:0 !important;clip-path:var(--sk-notch);
}
.wiki-dossier__subject{font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;text-transform:uppercase;color:var(--sk-gold) !important}
.dossier-minimized{
  background:var(--sk-slab2) !important;border:1px solid var(--sk-gold) !important;color:var(--sk-gold) !important;
  border-radius:0 !important;clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* Línea de tiempo (¿Cuándo fue?) */
.timeline-container-wrapper{
  background:linear-gradient(170deg,var(--sk-slab2),var(--sk-blk2)) !important;
  border:2px solid var(--sk-red) !important;border-radius:0 !important;
}
.timeline-title{font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;text-transform:uppercase;color:var(--sk-gold) !important}
.timeline-year-val{font-family:var(--sk-disp) !important;font-weight:800 !important;font-style:italic !important;color:var(--sk-red) !important}
.timeline-range-slider::-webkit-slider-thumb{background:var(--sk-red) !important;border-radius:0 !important}
.timeline-range-slider::-moz-range-thumb{background:var(--sk-red) !important;border-radius:0 !important}

/* ═════════════════════════════ 13b · CABECERA DE AGENTE (perfil) ═════ */
/* La banda "IDENTIFICATIVO DE AGENTE / ADMIN" seguía en cian del tema anterior. */
.cyber-fingerprint{
  background:linear-gradient(160deg,var(--sk-red),var(--sk-red-dk)) !important;
  border:0 !important;
  border-radius:0 !important;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color:#fff !important;
  box-shadow:0 0 20px -6px rgba(255,45,85,.9) !important;
}
.cyber-fingerprint i{color:#fff !important}
/* Sin sombra de impacto aquí: sobre un nombre corto y en itálica se leía como si
   las letras estuviesen duplicadas. El resplandor suave da relieve sin ensuciar. */
.cyber-username,
#profile-username,
#profile-username-badge{
  font-family:var(--sk-disp) !important;
  font-weight:800 !important;
  font-style:italic !important;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--sk-ink) !important;
  text-shadow:0 0 14px rgba(255,45,85,.45) !important;
}
.cyber-username i,
#profile-username-badge i{color:var(--sk-gold) !important;text-shadow:none !important}

/* "EXPLORADOR" ya es una PÍLDORA con fondo dorado, así que el texto debe ir en
   oscuro. Ponerlo en dorado (como hacía la versión anterior de este tema) lo
   dejaba invisible: dorado sobre dorado. */
#profile-modal .cc-eyebrow,
.cc-eyebrow{
  font-family:var(--sk-disp) !important;
  font-weight:800 !important;
  font-style:italic !important;
  font-size:.66rem !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
  color:#2E1A00 !important;
  background:linear-gradient(100deg,var(--sk-gold-lt),var(--sk-gold)) !important;
  border-radius:0 !important;
  clip-path:var(--sk-arrow-sm);
  padding:4px 16px !important;
  box-shadow:0 0 22px -8px rgba(255,197,49,.9) !important;
}
#profile-modal .cc-title,
.cc-title{
  font-family:var(--sk-disp) !important;
  font-weight:800 !important;
  font-style:italic !important;
  text-transform:uppercase;
  color:var(--sk-ink) !important;
  text-shadow:3px 3px 0 var(--sk-red) !important;
}
.cyber-status{
  background:rgba(255,45,85,.14) !important;
  border:1px solid var(--sk-red) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-l);
  color:var(--sk-red) !important;
  font-family:var(--sk-mono) !important;
  letter-spacing:.14em;
  text-transform:uppercase;
}
/* El texto "CONECTADO" trae el cian en un style="" dentro del propio <span>, así
   que hay que apuntar al span: sólo !important gana a un estilo en línea. */
.cyber-status span{color:var(--sk-red) !important}
.status-pulse{background:var(--sk-red) !important;box-shadow:0 0 8px var(--sk-red) !important}
/* La banda contenedora de esa cabecera */
.cyber-grid-layout > .cyber-badge,
#profile-modal .cyber-badge{border-radius:0 !important}

/* ═════════════════════════════ 13c · DESPLEGABLES (select) ═══════════ */
/* El desplegable nativo salía blanco con resalte azul del sistema. En Chrome y
   Edge las <option> sí aceptan color de fondo y de texto, así que la lista
   desplegada también queda en el tema. Se quita además la flecha del sistema y
   se dibuja una propia. */
select,
.cyber-select-v5,
.auth-glass-input[name="country"],
#auth-country,
#profile-country{
  -webkit-appearance:none; appearance:none;
  background-color:var(--sk-blk2) !important;
  background-image:linear-gradient(45deg,transparent 50%,var(--sk-red) 50%),
                   linear-gradient(135deg,var(--sk-red) 50%,transparent 50%) !important;
  background-position:calc(100% - 19px) 50%, calc(100% - 13px) 50% !important;
  background-size:6px 6px, 6px 6px !important;
  background-repeat:no-repeat !important;
  border:1px solid var(--sk-line) !important;
  border-radius:0 !important;
  color:var(--sk-ink) !important;
  font-family:var(--sk-body) !important;
  padding-right:34px !important;
  cursor:pointer;
}
/* style.css tiene `#profile-modal .cyber-select-v5 {...!important}` (selector con ID),
   que gana a la regla de arriba. Hay que igualar la especificidad para el editor. */
#profile-modal .cyber-select-v5,
#profile-modal .auth-glass-input,
#profile-modal select{
  -webkit-appearance:none; appearance:none;
  background-color:var(--sk-blk2) !important;
  background-image:linear-gradient(45deg,transparent 50%,var(--sk-red) 50%),
                   linear-gradient(135deg,var(--sk-red) 50%,transparent 50%) !important;
  background-position:calc(100% - 19px) 50%, calc(100% - 13px) 50% !important;
  background-size:6px 6px, 6px 6px !important;
  background-repeat:no-repeat !important;
  border:1px solid var(--sk-line) !important;
  border-radius:0 !important;
  color:var(--sk-ink) !important;
  padding-right:34px !important;
}
select:focus,
.cyber-select-v5:focus,
#auth-country:focus{
  border-color:var(--sk-red) !important;
  outline:none !important;
  box-shadow:0 0 0 1px var(--sk-red), 0 0 22px -8px rgba(255,45,85,.9) !important;
}
select option{
  background-color:var(--sk-slab2) !important;
  color:var(--sk-ink) !important;
  font-family:var(--sk-body) !important;
  padding:8px !important;
}
select option:checked,
select option:hover{
  background:linear-gradient(100deg,var(--sk-red),var(--sk-red-dk)) !important;
  color:#fff !important;
}

/* ═════════════════════════════ 13d · PÁGINA LEGAL ═══════════════════ */
/* legal.php (Términos, Privacidad, Cookies) comparte .glass-panel/.top-nav-v4/
   .menu-logo-v4 con el menú, así que hereda casi todo el tema con sólo enlazar
   este archivo. Aquí van sus piezas propias. Llevan !important porque el bloque
   <style> de esa página se carga DESPUÉS de esta hoja. */
.legal-content h2{
  font-family:var(--sk-disp) !important;
  font-weight:800 !important;
  font-style:italic !important;
  text-transform:uppercase;
  letter-spacing:.03em !important;
  color:var(--sk-red) !important;
  font-size:1.25rem !important;
  text-shadow:2px 2px 0 rgba(0,0,0,.45);
}
.legal-content h3{
  font-family:var(--sk-disp) !important;
  font-weight:700 !important;
  font-style:italic !important;
  text-transform:uppercase;
  color:var(--sk-gold) !important;
  font-size:1rem !important;
}
.legal-content p,
.legal-content li{color:var(--sk-muted) !important}
.legal-content strong{color:var(--sk-ink) !important}
.legal-content a{color:var(--sk-gold) !important;text-decoration-color:rgba(255,197,49,.5)}
.legal-content a:hover{color:var(--sk-red) !important}
.legal-meta{
  color:var(--sk-faint) !important;
  border-top:1px solid var(--sk-line) !important;
  font-family:var(--sk-mono) !important;
}
.legal-alert{
  background:rgba(255,197,49,.10) !important;
  border:1px solid var(--sk-gold) !important;
  border-left:4px solid var(--sk-gold) !important;
  border-radius:0 !important;
  clip-path:var(--sk-slab-r);
  color:var(--sk-gold) !important;
}
.logo-icon{color:var(--sk-red) !important;-webkit-text-fill-color:var(--sk-red)}

/* ═══════════════════════════════════════════ 14 · SCROLLBARS ═════════ */
::-webkit-scrollbar-thumb{background:var(--sk-vio) !important;border-radius:0 !important}
::-webkit-scrollbar-thumb:hover{background:var(--sk-red) !important}
::-webkit-scrollbar-track{background:var(--sk-blk2) !important}
::selection{background:rgba(255,45,85,.32);color:#fff}
:focus-visible{outline:2px solid var(--sk-gold) !important;outline-offset:2px}

/* ═══════════════════════════════════ 14b · BARRA DE INSTALACIÓN ═════ */
/* Sólo la ven visitantes Android que llegan por la web sin tener la app. Va
   anclada abajo porque arriba compite con el HUD del juego. */
/* box-sizing explícito: este proyecto NO tiene la regla universal, así que sin
   esto los 12 px de padding se suman al ancho y el botón se sale de la pantalla. */
.install-banner{box-sizing:border-box;position:fixed;left:0;right:0;bottom:0;z-index:9500;display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--sk-slab);border-top:2px solid var(--sk-red);box-shadow:0 -8px 28px rgba(0,0,0,.55)}
.install-banner__icon{flex:none;width:44px;height:44px;display:block}
/* overflow:hidden en el contenedor y recorte en AMBAS líneas: sin esto el rótulo
   se sale de su caja en pantallas de 360 px y se mete debajo del botón. */
.install-banner__copy{flex:1;min-width:0;overflow:hidden;display:flex;flex-direction:column;line-height:1.2}
.install-banner__copy strong,
.install-banner__copy span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.install-banner__copy strong{font-family:var(--sk-disp);font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.05rem;color:var(--sk-gold)}
.install-banner__copy span{font-size:.8rem;color:var(--sk-faint)}
.install-banner__cta{flex:none;padding:10px 18px;background:var(--sk-red);color:#fff;font-weight:800;font-size:.85rem;text-transform:uppercase;text-decoration:none;clip-path:var(--sk-arrow-sm)}
.install-banner__close{flex:none;width:34px;height:34px;min-height:34px;padding:0;background:none;border:none;color:var(--sk-faint);font-size:1.1rem;cursor:pointer}

/* ═══════════════════════════════════════════ 15 · MÓVIL ═════════════ */
/* Los cortes en flecha se estrechan para que no se coman el texto en pantallas
   pequeñas. Sólo se ajusta la FORMA, nunca la posición ni el tamaño. */
@media (max-width:480px){
  :root{
    --sk-arrow:polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
    --sk-arrow-sm:polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%, 6px 50%);
    --sk-slab-l:polygon(0 0, calc(100% - 8px) 0, 100% 100%, 8px 100%);
    --sk-slab-r:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    --sk-notch:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  }
  /* En el HUD el espacio es crítico: sin recortes que resten ancho útil. */
  .modern-hp-container{clip-path:none !important}
  /* Barra de instalación: en 360 px el botón se come el rótulo, así que aquí
     adelgaza para que quepan las dos cosas. */
  .install-banner{gap:10px;padding:10px}
  .install-banner__cta{padding:9px 13px;font-size:.78rem}
  .install-banner__icon{width:38px;height:38px}
}