:root{
  --bg:#070707;
  --neon-cyan:#00ffe7;
  --neon-pink:#ff00aa;
  --muted:#cfeff0;
  --container:1200px;
  --radius:18px;

  /* New extended palette / accents */
  --surface-a:linear-gradient(180deg,rgba(10,10,12,.96),rgba(20,16,24,.96));
  --surface-b:linear-gradient(180deg,rgba(14,16,22,.90),rgba(10,10,14,.94));
  --border-soft:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.06);
  --focus-ring:0 0 0 3px rgba(0,255,231,.55),0 0 0 6px rgba(255,0,170,.35);
  --danger:#ff3d5d;
  --warn:#ffbf35;
  --ok:#36e1a0;
  --gradient-neon:linear-gradient(90deg,var(--neon-cyan),var(--neon-pink));
  --trans-fast:.18s cubic-bezier(.2,.9,.3,1);
  --trans-med:.26s cubic-bezier(.2,.9,.3,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Roboto',Arial,sans-serif;
  background:var(--bg);
  color:#e6f9f9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* Background */
.page-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url('img/fondo.png') center/cover no-repeat;
  filter:blur(6px) brightness(.42) saturate(.95);
  opacity:1;transform:scale(1.02);
}
.page-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45));
  mix-blend-mode:multiply;
  pointer-events:none;
}

.wrap{max-width:var(--container);margin:0 auto;padding:18px;position:relative;z-index:2}

/* Header */
header.site-header{
  margin-top:8px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(90deg,#05060a 0%,#0f1220 100%);
  border-radius:10px;padding:12px 18px;
  box-shadow:0 6px 28px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.03);
}
.brand{display:flex;align-items:center;gap:14px}
.brand .logo{
  width:46px;height:46px;border-radius:10px;
  background:url('img/Logo Web.png') center/cover no-repeat;
  border:2px solid rgba(0,0,0,.25);
}
.brand h1{margin:0;font-family:'Press Start 2P',monospace;font-size:.95rem;color:#fff}

nav.main-nav{display:flex;gap:16px;align-items:center;font-size:.9rem}
nav.main-nav a,nav.main-nav button{
  color:var(--muted);text-decoration:none;padding:8px 12px;
  border-radius:8px;background:transparent;border:0;cursor:pointer;
  transition:background var(--trans-fast),color var(--trans-fast);
}
nav.main-nav a:hover,nav.main-nav button:hover,
nav.main-nav a:focus-visible,nav.main-nav button:focus-visible{
  background:var(--gradient-neon);color:#071014;outline:none;
}

.page-title{
  font-family:'Press Start 2P';font-size:1.8rem;text-align:center;
  margin:22px 0 10px;color:#fff;
  text-shadow:2px 0 var(--neon-cyan),-2px 0 var(--neon-pink);
}

/* HERO layout (home) */
.hero{display:grid;grid-template-columns:1fr 360px;gap:26px;margin-top:6px;align-items:start}

/* Main billboard */
.hero-feature{
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(6,6,8,.6));
  border-radius:18px;padding:48px 28px;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.04);
  box-shadow:0 24px 90px rgba(0,0,0,.7);
  min-height:540px;display:flex;align-items:center;justify-content:center;
}

.db-link{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;height:100%;text-decoration:none;color:inherit;position:relative;
  outline:none;border-radius:12px;transition:transform .18s ease,box-shadow .18s ease;
  gap:12px;padding:6px;z-index:2;
}
.db-link:focus{box-shadow:0 0 0 6px rgba(0,255,231,.06)}

.db-frame{
  position:absolute;inset:14px;border-radius:14px;pointer-events:none;
  box-shadow:0 0 140px rgba(0,255,231,.04) inset,0 0 60px rgba(255,0,170,.02) inset;
  border:2px solid rgba(255,255,255,.02);mix-blend-mode:screen;z-index:0;
}

.db-pill{
  position:relative;width:100%;max-width:1000px;height:400px;border-radius:28px;
  overflow:hidden;display:block;background:#000;
  box-shadow:0 18px 60px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.04);
}
.db-pill-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.72) contrast(.98) saturate(.96);
  transition:filter .22s ease,transform .28s cubic-bezier(.2,.9,.3,1);
  transform-origin:center center;user-select:none;-webkit-user-drag:none;
}
.db-pill::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.45) 0%,rgba(0,0,0,.08) 45%,rgba(0,0,0,0) 60%);
  z-index:1;pointer-events:none;
}
.db-label{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  display:inline-block;padding:10px 24px;border-radius:999px;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(20,12,30,.45));
  color:#fff;font-family:'Bungee','Press Start 2P',monospace;
  font-size:1.6rem;letter-spacing:1.6px;
  -webkit-text-stroke:1px rgba(0,0,0,.9);
  text-shadow:2px 0 var(--neon-cyan),-2px 0 var(--neon-pink);
  border:1px solid rgba(255,255,255,.04);
  box-shadow:0 6px 26px rgba(0,0,0,.6),0 6px 40px rgba(0,255,231,.03) inset;
}
.db-link:hover .db-pill-img,.db-link:focus .db-pill-img,.db-link:focus-within .db-pill-img{
  filter:brightness(1) contrast(1.02) saturate(1.05);transform:scale(1.02)
}
.db-link:hover{transform:translateY(-6px);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.db-link:active{transform:translateY(-2px)}

.hero-grid{display:flex;flex-direction:column;gap:14px}
.small-card{
  position:relative;border-radius:12px;overflow:hidden;min-height:125px;
  background:linear-gradient(180deg,rgba(18,16,20,.95),rgba(12,12,14,.95));
  border:1px solid rgba(255,255,255,.04);display:flex;align-items:center;gap:12px;padding:14px;
}
.small-card .thumb{
  width:128px;height:92px;border-radius:10px;
  background-size:cover;background-position:center;
  border:2px solid rgba(0,255,231,.06);
  box-shadow:0 6px 26px rgba(0,0,0,.6);flex:0 0 128px;
}
.small-card .content{display:flex;flex-direction:column;gap:8px;flex:1}
.small-card .meta{
  color:#fff;font-family:'Press Start 2P';font-size:.94rem;letter-spacing:.6px;line-height:1.05
}
.small-card p.desc{
  font-family:Roboto,Arial,sans-serif;font-size:.82rem;color:#cfecec;margin:0;font-weight:400;letter-spacing:.1px
}
.small-card .btn{
  align-self:flex-end;margin-right:8px;text-decoration:none;
  padding:10px 16px;border-radius:10px;background:linear-gradient(90deg,var(--neon-cyan) 30%,var(--neon-pink));
  color:#071014;font-weight:700;box-shadow:0 10px 26px rgba(0,255,231,.06);
  transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s ease,filter .22s ease,background-position .5s ease;
  background-size:200% 100%;position:relative;z-index:2;display:inline-block;
}
.small-card .btn:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 18px 46px rgba(0,255,231,.12),0 6px 28px rgba(255,0,170,.08);
  filter:saturate(1.08);background-position:100% 0;
}
.small-card .btn::after{
  content:"";position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  opacity:0;transition:opacity .28s ease,transform .28s ease;transform:scaleX(.96);pointer-events:none;
}
.small-card .btn:hover::after{opacity:1;transform:scaleX(1)}

.panel-secciones{
  margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.tarjeta-seccion{
  background:linear-gradient(180deg,rgba(10,10,12,.9),rgba(20,16,24,.9));
  padding:20px;border-radius:var(--radius);
  border:2px solid rgba(255,0,170,.12);box-shadow:0 18px 60px rgba(0,0,0,.6);
  text-align:center;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;
}
.tarjeta-seccion .icon{
  width:84px;height:84px;margin:6px auto 12px;border-radius:14px;background:#0f0f13;
  border:3px solid rgba(0,255,231,.12);box-shadow:0 0 30px rgba(255,0,170,.06);
  display:flex;align-items:center;justify-content:center;
}
.tarjeta-seccion h3{
  font-family:'Press Start 2P';color:#fff;font-size:.86rem;margin:8px 0;letter-spacing:.6px;
}
.tarjeta-btn{
  display:inline-block;font-family:'Press Start 2P';text-decoration:none;
  padding:12px 18px;border-radius:10px;background:linear-gradient(90deg,var(--neon-cyan) 30%,var(--neon-pink));
  color:#071014;font-size:.78rem;box-shadow:0 10px 26px rgba(0,255,231,.06);margin-top:6px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.tarjeta-btn:hover{transform:translateY(-6px);box-shadow:0 18px 46px rgba(0,255,231,.12)}

.glitch-bar{height:12px;margin-top:12px;border-radius:8px;
  background:repeating-linear-gradient(90deg,var(--neon-pink)0 3px,var(--neon-cyan)4px 6px,transparent 7px 15px);
  opacity:.2;filter:blur(1px);
}

.site-footer{
  margin:34px 0 80px;text-align:center;color:#7afcff;
  font-family:'Press Start 2P';font-size:.75rem;
}

/* ================== DROPDOWN UNIVERSAL NEON ================== */
.dropdown{position:relative}

.dropdown .dropbtn{
  position:relative;
  z-index:45;
  transition:.22s cubic-bezier(.2,.9,.3,1);
}

.dropdown .dropdown-menu .submenu-list{
  list-style:none;          /* quita bullets */
  margin:4px 0 6px;
  padding:0;                /* elimina indentación */
}
.dropdown .dropdown-menu .submenu-list li{
  list-style:none;
  margin:0;
  padding:0;
}

/* Asegurar que ningún marcador aparezca en navegadores que usan ::marker */
.dropdown .dropdown-menu .submenu-list li::marker{
  content:"";
}

/* (Opcional) Si querés separar un poco los enlaces sin viñeta */
.dropdown .dropdown-menu .submenu-list li a{
  display:block;
  padding:9px 14px 8px;
  margin:4px 0;
  border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  font-size:.78rem;
  letter-spacing:.55px;
  color:#dffbfb;
  text-decoration:none;
  transition:.22s cubic-bezier(.2,.9,.3,1);
}
.dropdown .dropdown-menu .submenu-list li a:hover,
.dropdown .dropdown-menu .submenu-list li a:focus-visible{
  outline:none;
  background:var(--gradient-neon);
  color:#071014;
  box-shadow:0 14px 40px rgba(0,255,231,.25),0 8px 30px rgba(255,0,170,.22);
  transform:translateY(-3px);
  border-color:transparent;
}
.dropdown .dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:260px;
  padding:12px 12px 14px;
  background:linear-gradient(180deg,rgba(14,16,26,.95),rgba(10,10,14,.97));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow:
    0 24px 80px -12px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 28px -6px rgba(0,255,231,.25),
    0 0 24px -6px rgba(255,0,170,.22);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  animation:ddPop .35s cubic-bezier(.2,.9,.3,1);
  overflow:hidden;
  isolation:isolate;
  z-index:40;
}
@keyframes ddPop{
  0%{opacity:0;transform:translateY(8px) scale(.97)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* Mostrar por hover / foco / estado abierto via JS */
.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{display:block}

/* Barra luminosa superior */
.dropdown .dropdown-menu::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:0;
  height:2px;
  background:var(--gradient-neon);
  opacity:.65;
  border-radius:4px;
  filter:drop-shadow(0 0 6px rgba(0,255,231,.35));
}

/* Enlaces base */
.dropdown .dropdown-menu a,
.dropdown .dropdown-menu button.dd-link{
  position:relative;
  display:block;
  width:100%;
  padding:9px 14px 8px;
  margin:2px 0;
  font-size:.78rem;
  letter-spacing:.55px;
  font-family:'Roboto',Arial,sans-serif;
  color:#dffbfb;
  text-decoration:none;
  border-radius:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
  transition:.22s cubic-bezier(.2,.9,.3,1);
}
.dropdown .dropdown-menu a:hover,
.dropdown .dropdown-menu a:focus-visible,
.dropdown .dropdown-menu button.dd-link:hover,
.dropdown .dropdown-menu button.dd-link:focus-visible{
  outline:none;
  background:var(--gradient-neon);
  color:#071014;
  box-shadow:0 14px 40px rgba(0,255,231,.25),0 8px 30px rgba(255,0,170,.22);
  transform:translateY(-3px);
  border-color:transparent;
}

/* Enlace marcado como activo */
.dropdown .dropdown-menu a.active{
  background:var(--gradient-neon);
  color:#071014;
  font-weight:700;
  box-shadow:0 10px 34px rgba(0,255,231,.25),0 6px 26px rgba(255,0,170,.20);
  border-color:transparent;
}

/* Encabezado de grupo (estático) */
.dropdown .dropdown-menu .dd-group-header{
  font-family:'Press Start 2P',monospace;
  font-size:.55rem;
  letter-spacing:.95px;
  font-weight:800;
  color:#9ee1ef;
  text-transform:uppercase;
  padding:6px 10px 5px;
  margin:6px 0 4px;
  border-radius:8px;
  background:linear-gradient(90deg,rgba(0,255,231,.14),rgba(255,0,170,.14));
  border:1px solid rgba(0,255,231,.35);
  box-shadow:0 6px 24px rgba(0,255,231,.18),0 4px 18px rgba(255,0,170,.18);
  position:relative;
}

/* Separador horizontal */
.dropdown .dropdown-menu .dd-separator{
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,0));
  margin:8px 4px;
  border-radius:2px;
}

/* ---- Grupos expandibles con <details> ---- */
.dropdown .dropdown-menu details.dd-group{
  margin:8px 0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:linear-gradient(185deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
  overflow:hidden;
  transition:.25s cubic-bezier(.2,.9,.3,1);
}
.dropdown .dropdown-menu details.dd-group[open]{
  border-color:rgba(0,255,231,.40);
  box-shadow:
    0 0 0 2px rgba(0,255,231,.30),
    0 0 16px -2px rgba(0,255,231,.35),
    0 0 14px -2px rgba(255,0,170,.30);
  background:linear-gradient(180deg,rgba(0,255,231,.10),rgba(255,0,170,.10));
}
.dropdown .dropdown-menu summary.dd-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px 9px;
  font-family:'Press Start 2P';
  font-size:.55rem;
  letter-spacing:.95px;
  font-weight:800;
  color:#cfecec;
  user-select:none;
  transition:.22s;
  position:relative;
}
.dropdown .dropdown-menu summary.dd-summary::-webkit-details-marker{display:none}
.dropdown .dropdown-menu summary.dd-summary:hover,
.dropdown .dropdown-menu summary.dd-summary:focus-visible{
  outline:none;
  background:var(--gradient-neon);
  color:#071014;
}
.dropdown .dropdown-menu summary.dd-summary::before{
  content:"";
  width:0;height:0;
  border-left:7px solid #aef;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  transition:.25s;
  filter:drop-shadow(0 0 4px rgba(0,255,231,.55));
}
.dropdown .dropdown-menu details.dd-group[open] summary.dd-summary::before{
  transform:rotate(90deg);
  border-left-color:#071014;
}
.dropdown .dropdown-menu .dd-body{
  padding:6px 10px 10px;
  animation:ddBodyFade .30s ease;
}
@keyframes ddBodyFade{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---- Subniveles anidados (ul.dd-sub) ---- */
.dropdown .dropdown-menu ul.dd-sub{
  list-style:none;
  margin:4px 0 2px;
  padding:0;
  border-left:2px solid rgba(0,255,231,.35);
}
.dropdown .dropdown-menu ul.dd-sub li a{
  font-size:.72rem;
  padding:8px 12px 7px;
  margin:3px 0 3px 6px;
  border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
}
.dropdown .dropdown-menu ul.dd-sub li a:hover,
.dropdown .dropdown-menu ul.dd-sub li a:focus-visible{
  background:var(--gradient-neon);
  color:#071014;
  transform:translateX(2px) translateY(-2px);
}

/* ---- Focus accesible universal ---- */
.dropdown .dropdown-menu a:focus-visible,
.dropdown .dropdown-menu button.dd-link:focus-visible,
.dropdown .dropdown-menu summary.dd-summary:focus-visible{
  box-shadow:0 0 0 3px rgba(0,255,231,.55),0 0 0 6px rgba(255,0,170,.35);
  outline:none;
}

/* Botón principal resaltado al abrir */
.dropdown.open > .dropbtn,
.dropdown:hover > .dropbtn{
  background:var(--gradient-neon);
  color:#071014;
  box-shadow:0 10px 34px rgba(0,255,231,.25),0 6px 26px rgba(255,0,170,.20);
}

/* Scroll interno (si el menú se hace largo) */
.dropdown .dropdown-menu{
  max-height:420px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,255,231,.45) rgba(255,255,255,.08);
}
.dropdown .dropdown-menu::-webkit-scrollbar{width:8px}
.dropdown .dropdown-menu::-webkit-scrollbar-track{
  background:rgba(255,255,255,.05);border-radius:8px;
}
.dropdown .dropdown-menu::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--neon-cyan),var(--neon-pink));border-radius:8px;
}

/* Responsive ajustes mínimos */
@media (max-width:560px){
  .dropdown .dropdown-menu{
    min-width:220px;
    padding:10px 10px 12px;
  }
  .dropdown .dropdown-menu a,
  .dropdown .dropdown-menu button.dd-link{
    font-size:.72rem;
    padding:8px 12px 7px;
    margin:2px 0;
  }
  .dropdown .dropdown-menu summary.dd-summary{
    font-size:.50rem;
    padding:9px 12px 8px;
  }
  .dropdown .dropdown-menu .dd-group-header{
    font-size:.50rem;
    padding:5px 8px 4px;
    letter-spacing:.8px;
  }
  .dropdown .dropdown-menu ul.dd-sub li a{
    font-size:.66rem;
    padding:7px 10px 6px;
  }
}

/* ================= PLAYER PAGE (GLOBAL SHARED STYLES) ================= */
.player-hero{
  position:relative;display:grid;grid-template-columns:200px 1fr 180px;gap:24px;
  background:linear-gradient(140deg,rgba(14,16,24,.86),rgba(26,20,32,.92));
  border:1px solid var(--border);border-radius:26px;padding:26px 30px;
  box-shadow:0 24px 90px rgba(0,0,0,.72);overflow:hidden;isolation:isolate;min-height:180px;
}
.player-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.75));
  opacity:.55;z-index:-1;
}

.player-photo{
  width:170px;height:170px;border-radius:22px;object-fit:cover;
  background:#000;border:1.5px solid rgba(255,255,255,.08);box-shadow:0 12px 40px rgba(0,0,0,.7);
}

.player-name{
  margin:0;font-family:'Bungee','Press Start 2P',monospace;
  font-size:2.6rem;line-height:1.02;letter-spacing:1.6px;color:#fff;
  text-shadow:2px 0 var(--neon-cyan),-2px 0 var(--neon-pink);word-break:break-word;
}
.player-sub{
  color:#cfecec;font-size:1rem;letter-spacing:.45px;
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
}
.player-sub .flag{
  width:34px;height:22px;object-fit:cover;border-radius:5px;
  border:1px solid rgba(255,255,255,.25);box-shadow:0 0 10px rgba(0,0,0,.55);
}

.rating-dial{
  --r:0;
  position:relative;width:140px;height:140px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bungee','Press Start 2P',monospace;font-size:3rem;color:#fff;letter-spacing:2px;
  background:radial-gradient(circle at 50% 42%,#071014 0%,#0e1822 60%,#071014 100%);
  border:2px solid rgba(255,255,255,.08);
  box-shadow:0 0 26px rgba(0,255,231,.35),0 0 16px rgba(255,0,170,.30),
             0 4px 16px rgba(0,0,0,.65) inset;
  text-shadow:0 0 12px rgba(0,255,231,.45),0 0 8px rgba(255,0,170,.35);
  overflow:hidden;
}
.rating-dial::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;
  background:conic-gradient(var(--neon-cyan)0deg,var(--neon-cyan) calc(((var(--r)-40)/59)*300deg),
             rgba(255,255,255,.10) calc(((var(--r)-40)/59)*300deg) 360deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 57%,black 58%);
          mask:radial-gradient(circle at 50% 50%,transparent 57%,black 58%);
  filter:blur(.7px);opacity:.9;
}
.rating-bar{
  width:100%;height:16px;border-radius:10px;
  background:linear-gradient(90deg,#0f1722,#091016);
  border:1px solid rgba(255,255,255,.08);overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.55);
}
.rating-bar>span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--neon-cyan),var(--neon-pink));
  transition:width 1.2s cubic-bezier(.16,.9,.3,1);
}

/* Carteles: video ancho + stats más angosta */
.duo-cards{
  margin-top:20px;
  display:grid;
  grid-template-columns: 1.7fr 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width:880px){
  .duo-cards{ grid-template-columns:1fr; }
}

/* Stats compacta */
#statsCard{
  min-height: 180px;
  padding: 16px 18px 16px;
}
#statsCard .stats-desc{ margin-bottom:8px; }
#statsCard .action-btn{ margin-top:auto; align-self:center; }

/* Fila primaria */
.primary-attrs{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:720px){
  .primary-attrs{grid-template-columns:1fr;}
}

/* Otros atributos */
.attr-grid--other{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,260px));
  gap:16px;
  justify-content:center;
}

/* Grid atributos */
.attr-grid{
  margin-top:28px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px;
}
.attr-card{
  position:relative;background:var(--surface-b);border:1px solid var(--border);
  border-radius:20px;padding:16px 18px 14px;display:flex;flex-direction:column;
  gap:8px;min-height:110px;box-shadow:0 18px 60px rgba(0,0,0,.6);overflow:hidden;
  transition:transform var(--trans-med),box-shadow var(--trans-med),border-color .4s ease;
}
.attr-card:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 30px 90px rgba(0,0,0,.75);border-color:rgba(255,255,255,.14)}
.attr-label{
  font-family:'Press Start 2P',monospace;font-size:.58rem;letter-spacing:.85px;font-weight:700;
  color:#9ee1ef;text-transform:uppercase;opacity:.85;
}
.attr-value{
  font-family:'Bungee','Press Start 2P',monospace;font-size:1.15rem;line-height:1.15;
  color:#fff;text-shadow:0 0 14px rgba(0,255,231,.35);word-break:break-word;
}
.attr-value a{color:#7afcff;text-decoration:none}
.attr-value a:hover{text-decoration:underline}

.attr-grid--two{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
@media (max-width:920px){.attr-grid--two{grid-template-columns:1fr}}

.video-shell{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#000;border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 26px rgba(0,0,0,.55);
  margin-top:6px;
}
.video-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Press Start 2P';font-size:.65rem;color:#fff;
  background:linear-gradient(180deg,#00270e,#043618);letter-spacing:.5px;
}

/* Mini button */
.btn-mini{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px 9px;border-radius:12px;
  font-family:'Press Start 2P',monospace;font-size:.55rem;letter-spacing:.55px;font-weight:800;
  background:linear-gradient(90deg,var(--neon-cyan) 10%,var(--neon-pink));
  color:#071014;text-decoration:none;min-width:150px;
  box-shadow:0 10px 34px rgba(0,255,231,.26),0 6px 28px rgba(255,0,170,.20);
  transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s,filter .22s;
}
.btn-mini:hover{
  transform:translateY(-5px) scale(1.03);
  box-shadow:0 22px 60px rgba(0,255,231,.35),0 12px 46px rgba(255,0,170,.28);
  filter:saturate(1.10);
}
.btn-mini .ico{
  width:20px;height:20px;background-size:20px 20px;background-position:center;background-repeat:no-repeat;
}
.btn-video .ico{background-image:url("img/icons/youtube.svg")}
.btn-stats .ico{background-image:url("img/icons/stats.svg")}

.btn-mini:focus-visible,.action-btn:focus-visible{
  outline:none;box-shadow:var(--focus-ring);
}

/* Compact mode */
body.player-compact .player-hero{grid-template-columns:170px 1fr;padding:18px}
body.player-compact .player-photo{width:170px;height:170px}
body.player-compact .player-name{font-size:2.2rem}
body.player-compact .rating-dial{width:100px;height:100px;font-size:1.9rem}

/* Responsive shared */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr 320px}
  .db-label{font-size:2.2rem;padding:8px 18px}
  .small-card{min-height:120px}
  .small-card .thumb{width:112px;height:84px;flex:0 0 112px}
  .db-pill{height:300px}
  .player-hero{grid-template-columns:180px 1fr 160px}
  .player-photo{width:150px;height:150px}
  .rating-dial{width:130px;height:130px;font-size:2.8rem}
  .player-name{font-size:2.2rem}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-grid{flex-direction:row;gap:12px}
  .hero-grid .small-card{min-height:120px;flex-direction:column;align-items:flex-start}
  .small-card .thumb{width:100%;height:88px;flex:0 0 auto}
  .panel-secciones{grid-template-columns:repeat(2,1fr)}
  .db-pill{width:100%;max-width:720px;height:280px}
  .db-label{font-size:1.9rem;-webkit-text-stroke:1px}
  .small-card .content{align-items:flex-start}
  .small-card .btn{align-self:flex-start;margin-right:0}
  .player-hero{grid-template-columns:160px 1fr;grid-auto-rows:auto;gap:18px}
  .duo-cards{grid-template-columns:1fr}
}
@media (max-width:560px){
  .db-pill{height:200px;border-radius:18px}
  .db-label{font-size:1.6rem;-webkit-text-stroke:1px;bottom:12px;padding:8px 16px}
  .panel-secciones{grid-template-columns:1fr;gap:14px}
  .player-hero{padding:22px 22px;grid-template-columns:140px 1fr}
  .player-photo{width:130px;height:130px}
  .rating-dial{width:110px;height:110px;font-size:2.5rem}
  .player-name{font-size:1.85rem}
  .btn-mini{min-width:130px;font-size:.5rem;padding:9px 12px 8px}
}

/* Utilities */
.u-hidden{display:none!important}
.u-flex{display:flex!important}
.u-center{text-align:center!important}
.upper{text-transform:uppercase!important}
.nowrap{white-space:nowrap!important}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* Animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes pulseGlow{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.25) saturate(1.07)}
}
.pulse-glow{animation:pulseGlow 3.6s ease-in-out infinite}

/* Notes / Stats local (mantengo tus bloques) */
#statsCard .stats-core{display:flex;flex-direction:column;height:100%}
.stats-rating-big{
  font-family:'Bungee','Press Start 2P',monospace;
  font-size:2.4rem;
  line-height:1;
  color:#fff;
  text-shadow:0 0 16px rgba(0,255,231,.40),0 0 12px rgba(255,0,170,.30);
  margin:4px 0 10px;
  letter-spacing:2px;
}
.stat-lines{list-style:none;margin:0 0 18px 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.stat-lines li{display:flex;flex-wrap:wrap;gap:6px;color:#cfecec}
.stat-lines .k{
  font-weight:700;font-family:'Press Start 2P',monospace;
  font-size:.55rem;letter-spacing:.65px;text-transform:uppercase;color:#9ee1ef;
}
.stat-lines .v{
  font-weight:600;font-family:Roboto,Arial,sans-serif;
  letter-spacing:.4px;color:#fff;
}
.stat-lines .team a,.stat-lines .league a{color:#7afcff;text-decoration:none;font-weight:700}
.stat-lines .team a:hover,.stat-lines .league a:hover{text-decoration:underline}
.action-btn.stats.stats-xl{
  align-self:center;min-width:240px;padding:16px 26px 15px;font-size:.78rem;border-radius:18px;margin-top:auto;
}
@media (max-width:880px){.stats-rating-big{font-size:2.2rem;margin-top:0}}
@media (max-width:560px){
  .action-btn.stats.stats-xl{min-width:200px;padding:14px 20px 13px;font-size:.7rem}
  .stats-rating-big{font-size:2rem}
}
.duo-cards{align-items:stretch}
.player-card{height:100%}
#statsCard .stats-core{flex:1;display:flex;flex-direction:column}

.stats-card{display:flex;flex-direction:column;height:100%;padding:26px 30px 26px}
.stats-inner{display:flex;flex-direction:column;flex:1;min-height:100%}
.stats-title{margin:0 0 12px 0;font-size:1.25rem;letter-spacing:1px}
.stats-big-rating{
  font-family:'Bungee','Press Start 2P',monospace;
  font-size:4.6rem;line-height:.9;margin:0 0 8px;color:#fff;
  text-shadow:0 0 28px rgba(0,255,231,.50),0 0 18px rgba(255,0,170,.40),
              2px 0 var(--neon-cyan),-2px 0 var(--neon-pink);
  letter-spacing:4px;user-select:none;
}
.stats-lines{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.stats-lines li{
  display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;
  border-bottom:1px solid rgba(255,255,255,.08);padding:6px 0 4px;
}
.stats-lines li:last-child{border-bottom:none;padding-bottom:0}
.stats-lines .k{
  font-family:'Press Start 2P',monospace;font-size:.70rem;letter-spacing:1.1px;
  font-weight:800;color:#9ee1ef;text-transform:uppercase;min-width:130px;
}
.stats-lines .v{
  font-family:'Bungee','Press Start 2P',monospace;font-size:1.22rem;line-height:1.05;
  color:#fff;letter-spacing:.8px;text-shadow:0 0 14px rgba(0,255,231,.35);
  display:flex;align-items:center;gap:10px;
}
.stats-lines .country img.flag{
  width:38px;height:26px;object-fit:cover;border-radius:6px;
  border:1px solid rgba(255,255,255,.35);box-shadow:0 0 10px rgba(0,0,0,.55);
}
.stats-lines .team a,.stats-lines .league a{color:#7afcff;text-decoration:none;font-weight:800}
.stats-lines .team a:hover,.stats-lines .league a:hover{text-decoration:underline}
.action-btn.stats.stats-xl{
  align-self:center;min-width:260px;padding:18px 34px 16px;font-size:.85rem;border-radius:24px;margin-top:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.action-btn.stats.stats-xl:hover{transform:translateY(-8px) scale(1.05)}
@media (max-width:880px){
  .stats-big-rating{font-size:4rem}
  .stats-lines .v{font-size:1.1rem}
}
@media (max-width:560px){
  .stats-card{padding:22px 22px}
  .stats-big-rating{font-size:3.4rem;letter-spacing:3px}
  .stats-lines .v{font-size:1rem}
  .action-btn.stats.stats-xl{min-width:220px;padding:16px 26px 14px;font-size:.78rem}
  .stats-lines .k{font-size:.62rem;letter-spacing:.9px;min-width:110px}
}

/* Team logo meta */
.p-meta .team-meta{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.team-logo{
  width:26px;
  height:26px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 8px rgba(0,0,0,.45);
  vertical-align:middle;
}
/* Overrides para eliminar el recuadro tenue alrededor del cartel de BASE DE DATOS */
.hero-feature{
  border: none !important;        /* quita el borde del contenedor grande */
  box-shadow: none !important;    /* opcional: si querés también sin sombra externa */
  background: transparent !important; /* opcional: si no querés fondo del contenedor */
}

.db-frame{
  display: none !important;       /* oculta el marco interior tenue */
}