/* =========================================================
   EldenRO Home Premium (override)
   Archivo: home-premium.css
   ========================================================= */
html{
  overflow-y: scroll;                 /* fuerza scrollbar siempre */
  scrollbar-gutter: stable both-edges;/* browsers modernos: NO cambia el ancho */
}

body{
  overflow-x: hidden;                 /* corta cualquier overflow horizontal */
}

/* =========================
   TOKENS / THEME
   ========================= */
:root{
  --eld-bg: rgba(10,12,16,.62);
  --eld-bg2: rgba(10,12,16,.42);

  --eld-panel: rgba(12,14,18,.62);
  --eld-panel2: rgba(12,14,18,.42);

  --eld-bd: rgba(255,255,255,.10);
  --eld-bd2: rgba(255,255,255,.16);

  --eld-tx: rgba(255,255,255,.92);
  --eld-tx2: rgba(255,255,255,.68);

  --eld-gold: rgba(177,147,67,.95);
  --eld-gold2: rgba(255,235,200,.90);

  --eld-shadow: 0 18px 60px rgba(0,0,0,.55);
  --eld-shadow2: 0 10px 35px rgba(0,0,0,.45);

  --eld-radius: 18px;
  --eld-radius-sm: 12px;

  --eld-blur: blur(10px);

  --eld-ease: cubic-bezier(.2,.8,.2,1);
  --eld-t: .18s var(--eld-ease);
}

/* =========================
   BASE
   ========================= */
html, body{ background:#07080a; }
.container.home{
  padding-top: 18px;
  padding-bottom: 34px;
}

/* =========================
   REUSABLE BUILDING BLOCKS
   (evita repetir 20 veces lo mismo)
   ========================= */

/* Card base (para módulos grandes) */
.container.home :is(.news,.server-info,.ranking,.woe-info,.slider-container),
.elden-card-woe{
  position:relative;
  overflow:hidden !important;
  border-radius: var(--eld-radius);
  background: var(--eld-panel);
  border: 1px solid var(--eld-bd);
  backdrop-filter: var(--eld-blur);
  box-shadow: var(--eld-shadow2);
  transition: transform var(--eld-t), box-shadow var(--eld-t), border-color var(--eld-t);
}
.container.home :is(.news,.server-info,.ranking,.woe-info,.slider-container)::after,
.elden-card-woe::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events:none;
}

/* Hover lift premium */
.container.home :is(.news,.server-info,.ranking,.woe-info,.slider-container):hover,
.elden-card-woe:hover{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  transform: translateY(-1px);
}

/* Section head (títulos) */
.container.home :is(.news,.server-info,.ranking) .head,
.container.home .slider-container .description{
  background: rgba(0,0,0,.14);
}
.container.home :is(.news,.server-info,.ranking) .head{
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Chips / tabs (news filter, ranking filter, server tabs) */
.container.home :is(.news ul.filter li a, .ranking ul.filter li a, .server-info .filter .btn, .hi-link){
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.78);
  text-decoration:none !important;
  font-size: 12px;
  transition: background var(--eld-t), border-color var(--eld-t), transform var(--eld-t), color var(--eld-t);
}
.container.home :is(.news ul.filter li.active a, .ranking ul.filter li.active a, .server-info .filter .btn.active),
.container.home :is(.news ul.filter li a:hover, .ranking ul.filter li a:hover, .server-info .filter .btn:hover),
.hi-link:hover{
  border-color: rgba(177,147,67,.30);
  background: rgba(177,147,67,.10);
  color: rgba(255,235,200,.95);
  transform: translateY(-1px);
}

/* Small tiles (items rows) */
.container.home :is(.news .item, .elden-woe-row, .server-info .items .item, .hi-step, .hi-tile){
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
}
.container.home :is(.news .item, .elden-woe-row, .hi-step, .hi-tile){
  transition: border-color var(--eld-t), background var(--eld-t), transform var(--eld-t);
}
.container.home :is(.news .item:hover, .elden-woe-row:hover, .hi-step:hover, .hi-tile:hover){
  border-color: rgba(177,147,67,.22);
  background: rgba(0,0,0,.20);
  transform: translateY(-1px);
}

/* =========================
   HERO (UNIFICADO + CROSSFADE OK)
   ========================= */
.elden-hero{
  position: relative;
  min-height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  padding-top: 40px;
}

/* Background stage */
.elden-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;

  /* IMÁGENES */
  --hero-a: url('../images/background.png'); /* PAYON */
  --hero-b: url('../images/abyss.jpg');      /* ABYSS */

  /* fallback si alguna no carga */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(180,150,80,.12), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.85));

  filter: saturate(1.02) contrast(1.04) brightness(.98);
  transform: scale(1.03);
  will-change: transform;
}

/* Crossfade real usando pseudo-elementos
   - ::before = PAYON
   - ::after  = ABYSS
*/
.elden-hero-bg::before,
.elden-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition: opacity 1.2s ease;
  will-change: opacity;
  pointer-events:none;
}

/* PAYON visible por defecto */
.elden-hero-bg::before{
  background-image: var(--hero-a);
  opacity: 1;
}

/* ABYSS oculto por defecto */
.elden-hero-bg::after{
  background-image: var(--hero-b);
  opacity: 0;
}

/* Toggle: agrega .is-b a .elden-hero-bg */
.elden-hero-bg.is-b::before{ opacity:0; }
.elden-hero-bg.is-b::after{ opacity:1; }

/* Overlay (viñeta + textura) */
.elden-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(720px 360px at 50% 35%, rgba(0,0,0,.10), rgba(0,0,0,.62) 70%),
    linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.48)),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.012),
      rgba(255,255,255,.012) 1px,
      transparent 3px,
      transparent 6px
    );
  opacity: .86;
}

/* Fade inferior hacia el body */
.elden-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:140px;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(7,8,10,.65),
    rgba(7,8,10,1)
  );
  z-index:2;
}

/* Marco premium interno */
.elden-hero-inner-border{
  position:relative;
  z-index:2;
  padding: 34px 34px;
  border-radius: 22px;
  background: rgba(8,10,14,.45);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: var(--eld-blur);
  box-shadow: var(--eld-shadow);
  overflow:hidden;
}
.elden-hero-inner-border::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 260px at 50% 15%, rgba(177,147,67,.35), transparent 60%);
  opacity:.95;
  pointer-events:none;
}
.elden-hero-inner-border::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  border: 1px solid rgba(177,147,67,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
  pointer-events:none;
}

/* Hero typography */
.elden-kicker{
  text-transform:uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: rgba(255,235,200,.75);
}
.elden-title{
  margin: 10px 0 6px;
  font-size: 64px;
  letter-spacing: .08em;
  text-shadow: 0 10px 45px rgba(0,0,0,.65);
}
.elden-divider{
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(177,147,67,.85), transparent);
  margin: 12px auto 12px;
  opacity:.85;
}
.elden-subtitle{
  max-width: 520px;
  margin: 0 auto 18px;
  color: var(--eld-tx2);
  line-height: 1.55;
}
.elden-subtitle-rot{
  font-style: italic;
  color: rgba(255,235,200,.88);
  opacity: .84;
  letter-spacing: .04em;
  font-size: 1.1rem;
}

/* CTA */
.elden-cta{
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn-elden{
  position:relative;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  color: var(--eld-tx);
  text-decoration:none !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  transition: transform var(--eld-t), background var(--eld-t), border-color var(--eld-t), box-shadow var(--eld-t);
}
.btn-elden:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(177,147,67,.25), 0 18px 40px rgba(0,0,0,.45);
}
.btn-elden-gold{
  border-color: rgba(177,147,67,.45);
  background: linear-gradient(180deg, rgba(177,147,67,.26), rgba(0,0,0,.22));
}
.btn-elden-gold::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 14px;
  background: radial-gradient(160px 60px at 50% 0%, rgba(255,235,200,.25), transparent 65%);
  pointer-events:none;
  opacity:.9;
}
.btn-elden-outline{
  background: rgba(0,0,0,.18);
  border-color: rgba(177,147,67,.20);
}
.btn-elden-dark{ background: rgba(0,0,0,.32); }

/* =========================
   NEWS
   ========================= */
.container.home .news ul.filter{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
}
.container.home .news .items{ padding: 12px 12px 14px; }
.container.home .news .item{
  display:block;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.container.home .news .item .tag{
  display:inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  margin-bottom: 6px;
}
.container.home .news .item .title{
  font-weight: 700;
  color: rgba(255,255,255,.92);
  letter-spacing:.02em;
}
.container.home .news .item .date{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* =========================
   SLIDER
   ========================= */
.container.home .slider-container{
  margin-top: 16px;
  padding: 0 !important;
}
.container.home .slider-container .anim-slide{ border-radius: var(--eld-radius); }
.container.home .slider-container .description{
  display:block;
  padding: 18px 18px;
  text-decoration:none !important;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.52));
}
.container.home .slider-container .description .head{
  font-weight: 800;
  letter-spacing:.04em;
  color: rgba(255,235,200,.95);
}
.container.home .slider-container .description .text{ color: rgba(255,255,255,.74); }

/* =========================
   SERVER INFO
   ========================= */
.container.home .server-info .head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.container.home .server-info .head h2{
  margin:0;
  font-size: 16px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.container.home .server-info .status-wrapper{
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}
.container.home .server-info .status-wrapper.active{
  border-color: rgba(60, 255, 140, .18);
  background: rgba(60,255,140,.06);
}
.container.home .server-info .status-wrapper .base{
  font-size: 12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.container.home .server-info .filter{
  display:flex;
  gap: 10px;
  padding: 12px 16px;
}
.container.home .server-info .items{ padding: 8px 16px 16px; }
.container.home .server-info .items .item{
  display:flex;
  justify-content:space-between;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  border-radius: 0; /* item tipo fila, no tarjeta */
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.container.home .server-info .items .item:last-child{ border-bottom:0; }
.container.home .server-info .items .label{ color: rgba(255,255,255,.68); }
.container.home .server-info .items .value{
  font-weight: 800;
  letter-spacing:.02em;
  color: rgba(255,255,255,.92);
}

/* =========================
   RANKING
   ========================= */
.container.home .ranking .head{
  display:flex;
  align-items:center;
  gap: 10px;
}
.container.home .ranking .head .title{
  font-weight: 900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.container.home .ranking ul.filter{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  padding: 10px 12px 0;
  margin:0;
  list-style:none;
}
.container.home .ranking .rank-wrapper .view{
  padding: 12px 16px 6px;
}
.container.home .ranking .rank-wrapper .view .name{
  font-size: 14px;
  color: rgba(255,255,255,.92);
  margin-bottom: 8px;
}
.container.home .ranking .rank-wrapper .view .name strong{
  color: rgba(255,235,200,.95);
  letter-spacing:.08em;
}
.container.home .ranking .rank-wrapper .view .image{
  position:relative;
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.container.home .ranking .rank-wrapper .view .image::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(260px 120px at 50% 10%, rgba(177,147,67,.35), transparent 60%);
  opacity:.95;
  pointer-events:none;
}
.container.home .ranking .rank-wrapper .view .more{ padding: 10px 16px 10px; }

.container.home .ranking .positions{ padding: 0 12px 14px; }
.container.home .ranking table{ margin:0; }
.container.home .ranking table thead th{
  border:0;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}
.container.home .ranking table tbody tr{ transition: background var(--eld-t); }
.container.home .ranking table tbody tr:hover{ background: rgba(177,147,67,.06); }
.container.home .ranking table td{
  border-top: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
  font-size: 13px;
}

/* =========================
   WOE CARD
   ========================= */
.elden-card-woe{ padding: 14px 14px 12px; }
.elden-card-head{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 6px 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}
.elden-card-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(177,147,67,.22);
  background: rgba(177,147,67,.10);
  display:flex;
  align-items:center;
  justify-content:center;
}
.elden-card-icon img{ width: 20px; height:auto; opacity:.95; }
.elden-card-title h2{
  margin:0;
  font-size: 16px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.elden-card-title span{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}
.elden-woe-list{ display:flex; flex-direction:column; gap: 10px; }
.elden-woe-row{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 10px;
}
.elden-woe-day{
  min-width: 44px;
  text-align:center;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(177,147,67,.18);
  background: rgba(177,147,67,.08);
  color: rgba(255,235,200,.90);
  font-weight: 900;
  letter-spacing:.10em;
  font-size: 11px;
}
.elden-woe-name{ font-weight: 800; color: rgba(255,255,255,.92); }
.elden-woe-time{ font-size: 12px; color: rgba(255,255,255,.62); }

/* =========================
   VIDEO CARDS (SWIPER)
   ========================= */
.video-grid-wrapper{ margin-top: 30px; }

.video-card{
  display:block;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  text-decoration:none !important;
  box-shadow: var(--eld-shadow2);
  transition: transform var(--eld-t), border-color var(--eld-t), box-shadow var(--eld-t);
}
.video-card:hover{
  transform: translateY(-2px);
  border-color: rgba(177,147,67,.25);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}
.video-card .thumb{ position:relative; }
.video-card .thumb img{
  display:block;
  width:100%;
  height:auto;
  filter: saturate(1.05) contrast(1.03);
}
.video-card .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.65));
  pointer-events:none;
}
.video-card .play-icon{
  position:absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(177,147,67,.30);
  background: rgba(0,0,0,.38);
  color: rgba(255,235,200,.95);
  backdrop-filter: blur(8px);
}
.video-card .info{ padding: 12px 14px 14px; }
.video-card .info h4{
  margin:0;
  font-size: 12px;
  letter-spacing:.16em;
  color: rgba(255,235,200,.85);
  text-transform:uppercase;
}

/* Swiper arrows */
.video-carousel .swiper-button-prev,
.video-carousel .swiper-button-next{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  transition: background var(--eld-t), border-color var(--eld-t), transform var(--eld-t);
}
.video-carousel .swiper-button-prev:hover,
.video-carousel .swiper-button-next:hover{
  border-color: rgba(177,147,67,.25);
  background: rgba(0,0,0,.38);
  transform: translateY(-1px);
}

/* =========================
   HOME BLOCKS (WHY / INTRO / WORLD)
   (tu CSS original, sólo ordenado y con coherencia)
   ========================= */

/* WHY ELDENRO */
.elden-value{ margin: 18px auto 14px; }
.ev-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.ev-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  padding: 14px 14px;
}
.ev-ico{ font-size: 18px; line-height: 1; margin-bottom: 8px; }
.ev-title{ font-weight: 700; letter-spacing: .2px; margin-bottom: 4px; }
.ev-desc{ opacity: .78; font-size: 13px; line-height: 1.35; }

/* INTRO 3-CARDS */
.home-intro{
  display:grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap:14px;
  margin: 18px 0 22px;
}
.hi-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 16px;
  min-height: 180px;
}
.hi-head{ margin-bottom: 10px; }
.hi-kicker{ opacity:.72; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.hi-title{ font-size: 18px; font-weight: 800; margin-top: 4px; }
.hi-sub{ opacity:.78; font-size: 13px; margin-top: 4px; line-height: 1.35; }

.hi-steps{ display:flex; flex-direction:column; gap:10px; margin-top: 12px; }
.hi-step{ display:flex; align-items:center; gap:10px; padding: 10px; }
.hi-step-n{
  width: 26px; height: 26px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  opacity:.9;
  font-weight: 800;
  font-size: 12px;
}
.hi-step-t{ font-weight: 700; font-size: 13px; }
.hi-step-d{ opacity:.75; font-size: 12px; margin-top: 2px; }
.hi-step-a{ margin-left:auto; }

.hi-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  text-decoration:none !important;
  font-weight: 700;
  font-size: 12px;
  transition: background var(--eld-t), border-color var(--eld-t), transform var(--eld-t), color var(--eld-t);
}
.hi-btn:hover{ transform: translateY(-1px); border-color: rgba(177,147,67,.25); }
.hi-btn-gold{ background: rgba(177,147,67,.20); }
.hi-btn-line{ background: rgba(0,0,0,.10); }
.hi-btn-dark{ background: rgba(0,0,0,.28); }

.hi-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px; }
.hi-now{ margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.hi-now-t{ font-weight: 800; font-size: 12px; opacity:.9; }
.hi-now-d{ opacity:.75; font-size: 12px; margin-top: 3px; }

.hi-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin-top: 12px; }
.hi-tt{ font-weight: 800; font-size: 13px; margin-top: 6px; }
.hi-tx{ opacity:.75; font-size: 12px; margin-top: 2px; line-height: 1.3; }

/* WORLD BLOCK */
.elden-world{
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto 22px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.elden-world-inner{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow: hidden;
  padding: 18px 18px 16px;
}
.elden-world-inner:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 260px at 20% 10%, rgba(177,147,67,.13), transparent 60%),
    radial-gradient(700px 240px at 85% 20%, rgba(255,255,255,.06), transparent 65%);
  pointer-events:none;
  opacity: .9;
}
.ew-head{ position: relative; }
.ew-kicker{
  font-size: 12px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.ew-title{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}
.ew-sub{
  margin-top: 8px;
  color: rgba(255,255,255,.68);
  line-height: 1.45;
  max-width: 70ch;
}
.ew-grid{
  position: relative;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.ew-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.ew-ico{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(255,235,200,.92);
  font-size: 16px;
  flex: 0 0 34px;
}
.ew-name{
  font-weight: 800;
  color: rgba(255,255,255,.92);
  font-size: 13px;
}
.ew-desc{
  margin-top: 3px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
  line-height: 1.35;
}
.ew-foot{
  position: relative;
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ew-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.14);
  transition: background var(--eld-t), border-color var(--eld-t), transform var(--eld-t);
}
.ew-btn:hover{ transform: translateY(-1px); }
.ew-btn-gold{
  background: rgba(177,147,67,.18);
  color: rgba(255,235,200,.92);
}
.ew-btn-gold:hover{ background: rgba(177,147,67,.26); }
.ew-btn-line{
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.85);
}
.ew-btn-line:hover{ background: rgba(0,0,0,.28); }

/* =========================
   LANGUAGE SELECTOR (TOPBAR)
   ========================= */
.elden-topbar{ position: relative; z-index: 2000; }
.elden-navwrap{ position: relative; z-index: 1000; }
.elden-actions{ gap: 10px; }

.elden-lang{
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 6000;
}
.elden-lang-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:rgba(255,255,255,.88);
  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
  cursor:pointer;
  transition: background var(--eld-t), border-color var(--eld-t), transform var(--eld-t);
}
.elden-lang-btn:hover{
  background:rgba(0,0,0,.50);
  border-color:rgba(255,255,255,.20);
  transform: translateY(-1px);
}
.elden-lang-caret{ opacity:.7; font-size:12px; }

.elden-lang-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:120px;
  padding:6px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,12,16,.92);
  backdrop-filter: blur(10px);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  display:none;
  z-index:7000;
  pointer-events:auto;
}
.elden-lang:hover .elden-lang-menu,
.elden-lang:focus-within .elden-lang-menu{ display:block; }

.elden-lang-menu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-10px;
  height:10px;
}

.elden-lang-menu a{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  color:rgba(255,255,255,.86);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.4px;
  transition: background var(--eld-t), color var(--eld-t);
}
.elden-lang-menu a:hover{
  background:rgba(255,255,255,.06);
  color:rgba(255,235,200,.95);
}
.elden-lang-menu a.active{
  color: var(--eld-gold);
  font-weight: 600;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 992px){
  .elden-title{ font-size: 54px; }
  .elden-hero-inner-border{ padding: 26px 22px; }

  .ev-grid{ grid-template-columns: 1fr; }
  .home-intro{ grid-template-columns: 1fr; }
  .hi-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .ew-grid{ grid-template-columns: 1fr; }
  .ew-sub{ max-width: none; }
}
@media (max-width: 576px){
  .elden-title{ font-size: 44px; }
  .elden-subtitle{ font-size: 13px; }
}

/* =========================
   ACCESSIBILITY / MOTION
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
  .elden-hero-bg{ transform:none !important; }
}

/* =========================================================
   LAYOUT SAFETY (ONE SOURCE OF TRUTH)
   - evita layout shift (scrollbar)
   - evita overflow horizontal
   ========================================================= */

/* Reserva scrollbar SIEMPRE (evita salto de ancho) */
html{
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;
}

/* Corta overflow horizontal real */
body{
  overflow-x: hidden;
}

/* Fallback si el browser no soporta scrollbar-gutter */
@supports not (scrollbar-gutter: stable) {
  body{ padding-right: calc(100vw - 100%); }
}

/* =========================================================
   HERO SAFETY (ONE SOURCE OF TRUTH)
   - el fondo no debe afectar el layout
   - contenido centrado siempre
   - crossfade estable
   - canvas/FX no puede empujar ancho
   ========================================================= */

.elden-hero{
  position: relative;
  overflow: hidden;         /* compat total */
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Capas del hero */
.elden-hero-bg,
.elden-hero-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* El stage del background nunca se escala como contenedor */
.elden-hero-bg{
  transform: none !important;
  overflow: hidden;
}

/* Crossfade: NO uses transform scale (puede generar overflow “fantasma” en algunos casos)
   Si quieres zoom, hazlo con background-size */
.elden-hero-bg::before,
.elden-hero-bg::after{
  left: 0;
  right: 0;
  width: 100%;
  transform: none !important;

  background-size: 103% auto;  /* zoom seguro */
  background-position: center;
  background-repeat: no-repeat;
}

/* Contenido centrado (tu HTML real usa .elden-hero-content + .container) */
.elden-hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
}

.elden-hero-content > .container.elden-hero-content-inner{
  width: 100%;
  display: flex;
  justify-content: center;
}

.elden-hero-inner-border{
  margin: 0 auto;
  width: min(760px, 92vw);
  text-align: center;
}

/* =========================================================
   HERO FX: canvas y niebla (NO empujan el documento)
   ========================================================= */

#eldHeroFx{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block;
  pointer-events: none;
}

.eld-hero-fog{
  position: absolute !important;
  inset: -10% !important;
  pointer-events: none;
}

/* =========================================================
   HOME MID GRID (Recuadro rojo)
   - Alinea 3 cards + 2 cards con el mismo gap y centrado
   ========================================================= */

/* 1) Asegura que el bloque de 3 cards sea “sólido” */
.home-intro{
  align-items: stretch;
  gap: 14px;
}

/* 2) El contenedor que tiene Server Status + WoE (tu HTML viejo usaba wrapper-left/right) */
.container.home .wrapper-left,
.container.home .wrapper-right{
  /* si estos wrappers son columnas sueltas, los “desarmamos” */
  width: 100%;
}

/* Si existe un contenedor padre que envuelve ambos wrappers, lo convertimos en grid.
   (en muchos homes FluxCP esto suele ser .wrapper o .wrapper-bottom; dejo varias opciones) */
.container.home .wrapper,
.container.home .wrapper-bottom,
.container.home .wrapper-row,
.container.home .wrapper-server,
.container.home .wrapper-woe{
  /* no siempre existe; si no existe, no pasa nada */
}

/* Opción práctica: crea una grilla para los dos bloques usando los wrappers directos */
.container.home .wrapper-left,
.container.home .wrapper-right{
  display: grid;
  gap: 14px;
}

/* Esto hace que “Server Status” no quede colgado:
   si server-status está dentro de wrapper-left, lo centramos y limitamos ancho */
.container.home .wrapper-left .server-info,
.container.home .wrapper-left .server-status,
.container.home .wrapper-left .server{
  max-width: 360px;
  margin: 0 auto;
}

/* WoE card a la derecha: mismo trato */
.container.home .wrapper-right .elden-card-woe,
.container.home .wrapper-right .woe-info,
.container.home .wrapper-right .woe{
  max-width: 360px;
  margin: 0 auto;
}

/* 3) Si tus 2 cards están realmente en la misma fila (recomendado):
   fuerza un contenedor grid de 2 columnas cuando exista algo como .wrapper-bottom */
.container.home .wrapper-bottom,
.container.home .mid-row,
.container.home .home-row-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 992px){
  .container.home .wrapper-bottom,
  .container.home .mid-row,
  .container.home .home-row-2{
    grid-template-columns: 1fr;
  }

  .container.home .wrapper-left .server-info,
  .container.home .wrapper-right .elden-card-woe{
    max-width: 100%;
  }
}

/* =========================================================
   HOME SECTION: Server Status + WoE + Videos (Premium light pass)
   Pegar al FINAL de home-premium.css
   ========================================================= */

/* 0) Ambient light para esta sección (reduce “pantalla negra”) */

.container.home .wrapper-main::before{
  content:"";
  position:absolute;
  inset: -18px -12px -22px -12px;
  pointer-events:none;
  z-index:0;

  /* Luz ambiental estilo Elden */
  background:
    radial-gradient(800px 220px at 22% 10%, rgba(177,147,67,.14), transparent 60%),
    radial-gradient(900px 260px at 78% 18%, rgba(255,255,255,.05), transparent 62%),
    radial-gradient(700px 240px at 50% 100%, rgba(177,147,67,.08), transparent 65%);
  opacity: .95;
}

/* Asegura que el contenido quede sobre el halo */
.container.home .wrapper-left,
.container.home .wrapper-right,
.container.home .wrapper-center,
.container.home .wrapper-full{
  position: relative;
  z-index: 1;
}

/* 1) Card premium unificado (server-info + woe) */
.container.home .server-info,
.container.home .elden-card-woe{
  background:
    radial-gradient(700px 240px at 50% 0%, rgba(177,147,67,.10), transparent 60%),
    linear-gradient(180deg, rgba(18,20,26,.78), rgba(10,12,16,.55)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(177,147,67,.08) inset !important;
  backdrop-filter: blur(12px);
  overflow: hidden;
}

/* borde interno sutil */
.container.home .server-info::after,
.container.home .elden-card-woe::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events:none;
  opacity:.95;
}

/* brillo superior tipo “metal” */
.container.home .server-info::before,
.container.home .elden-card-woe::before{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  top:-35%;
  height:70%;
  background: radial-gradient(closest-side, rgba(255,235,200,.14), transparent 70%);
  pointer-events:none;
  opacity:.85;
}

/* Hover lift más “premium” */
.container.home .server-info:hover,
.container.home .elden-card-woe:hover{
  transform: translateY(-2px);
  border-color: rgba(177,147,67,.22) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.62),
    0 10px 35px rgba(177,147,67,.10),
    0 0 0 1px rgba(177,147,67,.10) inset !important;
}

/* 2) Head más “title bar” y menos plano */
.container.home .server-info .head,
.container.home .elden-card-head{
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Server title */
.container.home .server-info .head h2{
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,235,200,.92);
  margin: 0;
}

/* Status pill más “alive” */
.container.home .server-info .status-wrapper{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.container.home .server-info .status-wrapper.active{
  border-color: rgba(177,147,67,.30);
  background: linear-gradient(180deg, rgba(177,147,67,.18), rgba(0,0,0,.18));
  box-shadow: 0 0 0 1px rgba(177,147,67,.08) inset, 0 10px 25px rgba(0,0,0,.35);
}

/* 3) Tabs (Info / Rates) con look “rune chips” */
.container.home .server-info .filter .btn{
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.18) !important;
  color: rgba(255,255,255,.80) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
}
.container.home .server-info .filter .btn:hover{
  border-color: rgba(177,147,67,.22) !important;
  background: rgba(177,147,67,.08) !important;
  transform: translateY(-1px);
}
.container.home .server-info .filter .btn.active{
  border-color: rgba(177,147,67,.35) !important;
  background: linear-gradient(180deg, rgba(177,147,67,.24), rgba(0,0,0,.18)) !important;
  color: rgba(255,235,200,.95) !important;
}

/* 4) Filas (items) con highlight y separador fino */
.container.home .server-info .items{
  padding-top: 10px;
}
.container.home .server-info .items .item{
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.container.home .server-info .items .label{
  color: rgba(255,255,255,.70);
}
.container.home .server-info .items .value{
  color: rgba(255,235,200,.92);
  text-shadow: 0 0 10px rgba(177,147,67,.12);
}

/* 5) WoE rows: más “placa” y menos plano */
.container.home .elden-woe-row{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
  padding: 10px 10px;
}
.container.home .elden-woe-row:hover{
  border-color: rgba(177,147,67,.20);
  background: rgba(0,0,0,.18);
}
.container.home .elden-woe-day{
  border: 1px solid rgba(177,147,67,.18);
  background: rgba(177,147,67,.07);
  color: rgba(255,235,200,.92);
}
.container.home .elden-woe-time{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  border-radius: 999px;
  padding: 4px 10px;
}

/* 6) Videos: que el bloque no sea un “pozo negro” */
.container.home .video-grid-wrapper{
  margin-top: 18px;
  position: relative;
}
.container.home .video-grid-wrapper::before{
  content:"";
  position:absolute;
  inset:-10px -10px -12px -10px;
  border-radius: 22px;
  pointer-events:none;
  background: radial-gradient(900px 220px at 50% 0%, rgba(177,147,67,.10), transparent 65%);
  opacity:.9;
}

/* Swiper más compacto y alineado */
.container.home .video-carousel.swiper{
  padding: 10px 72px !important;
}

/* Card video: borde interior y glow suave */
.container.home .video-card{
  background:
    radial-gradient(260px 120px at 50% 0%, rgba(177,147,67,.14), transparent 60%),
    rgba(0,0,0,.16) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.container.home .video-card::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events:none;
}
.container.home .video-card:hover{
  border-color: rgba(177,147,67,.26) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.62), 0 10px 30px rgba(177,147,67,.12);
}

/* Play button más “elden” */
.container.home .video-card .play-icon{
  border: 1px solid rgba(177,147,67,.35);
  background: rgba(0,0,0,.38);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.container.home .video-card:hover .play-icon{
  background: rgba(177,147,67,.22);
}

/* Responsive: padding swiper */
@media (max-width: 768px){
  .container.home .video-carousel.swiper{ padding: 10px 54px !important; }
}
@media (max-width: 480px){
  .container.home .video-carousel.swiper{ padding: 10px 44px !important; }
}
/* =========================================================
   SECTION AMBIENCE – rompe el negro plano
   ========================================================= */

.container.home .wrapper-main{
  position: relative;
  padding-bottom: 30px;
}

/* asegurar contenido encima */
.container.home .wrapper-left,
.container.home .wrapper-center,
.container.home .wrapper-right,
.container.home .wrapper-full{
  position: relative;
  z-index: 1;
}
/* =========================================================
   SECTION AMBIENCE v2 – sin “rectángulo”, niebla Elden real
   ========================================================= */

.container.home .wrapper-main{
  position: relative;
  padding-bottom: 30px;
  overflow: visible; /* importante: no cortar la niebla */
}

/* niebla suave + luz dorada difusa (sin borde) */
.container.home .wrapper-main::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 90px;
  width: min(1200px, 120vw);
  height: 520px;
  transform: translateX(-50%);
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(closest-side at 50% 10%, rgba(177,147,67,.14), transparent 72%),
    radial-gradient(closest-side at 25% 70%, rgba(255,255,255,.05), transparent 72%),
    radial-gradient(closest-side at 75% 70%, rgba(255,255,255,.05), transparent 72%);

  opacity: .55;
  filter: blur(22px);
  border-radius: 999px; /* mata el borde rectangular */
}

/* fade extra en los bordes (evita “caja” incluso en monitores grandes) */
@supports (mask-image: radial-gradient(black, transparent)) {
  .container.home .wrapper-main::after{
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
            mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  }
}

/* asegurar contenido encima */
.container.home .wrapper-left,
.container.home .wrapper-center,
.container.home .wrapper-right,
.container.home .wrapper-full{
  position: relative;
  z-index: 1;
}

/* =========================================================
   VISUAL LINK – Server Status ↔ WoE
   ========================================================= */

.container.home .wrapper-left::after{
  content:"";
  position:absolute;
  right:-18px;
  top:80px;
  bottom:80px;
  width:1px;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(177,147,67,.25),
    transparent
  );
  opacity:.6;
}

@media (max-width: 991px){
  .container.home .wrapper-left::after{ display:none; }
}
/* =========================================================
   TRANSITION TO VIDEOS
   ========================================================= */

.container.home .wrapper-full{
  margin-top: 24px;
  position: relative;
}

.container.home .wrapper-full::before{
  content:"";
  position:absolute;
  top:-40px;
  left:0;
  right:0;
  height:80px;
  pointer-events:none;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(177,147,67,.10),
    rgba(0,0,0,0)
  );
}
/* =========================================================
   PREMIUM TITLE DETAIL
   ========================================================= */

.container.home .server-info h2,
.container.home .elden-card-title h2{
  position: relative;
}

.container.home .server-info h2::after,
.container.home .elden-card-title h2::after{
  content:"";
  display:block;
  width:38px;
  height:2px;
  margin-top:6px;
  background:linear-gradient(
    to right,
    rgba(177,147,67,.6),
    transparent
  );
}

.container.home .wrapper-main::before{
  content:"";
  position:absolute;
  inset:-80px -80px -80px -80px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(255,255,255,.03), transparent 70%);
  opacity:.6;
}
/* =========================================================
   VIDEO SECTION – EldenRO Narrative Header
   ========================================================= */

.elden-section-head{
  text-align:center;
  margin:40px 0 30px;
  position:relative;
}

.elden-section-kicker{
  display:block;
  font-family:'Cinzel',serif;
  font-size:.75rem;
  letter-spacing:4px;
  text-transform:uppercase;
  color:rgba(177,147,67,.65);
  margin-bottom:6px;
}

.elden-section-title{
  font-family:'Cinzel',serif;
  font-size:1.8rem;
  letter-spacing:3px;
  color:#f1e4c3;
  text-transform:uppercase;
  margin:0;
  text-shadow:
    0 0 12px rgba(177,147,67,.35),
    0 0 28px rgba(177,147,67,.15);
}

.elden-section-divider{
  width:140px;
  height:2px;
  margin:14px auto 12px;
  background:
    linear-gradient(
      to right,
      transparent,
      rgba(177,147,67,.75),
      transparent
    );
}

.elden-section-sub{
  font-family:'Inter',sans-serif;
  font-size:.85rem;
  color:rgba(255,255,255,.55);
  font-style:italic;
  max-width:520px;
  margin:0 auto;
  line-height:1.6;
}

/* Ambient glow behind the title */
.elden-section-head::after{
  content:"";
  position:absolute;
  left:50%;
  top:10px;
  width:420px;
  height:120px;
  transform:translateX(-50%);
  background:
    radial-gradient(
      ellipse at center,
      rgba(177,147,67,.18),
      transparent 70%
    );
  filter:blur(24px);
  opacity:.6;
  z-index:-1;
  pointer-events:none;
}
.video-card .info h4{
  letter-spacing:2px;
  font-size:.75rem;
  color:#e6d8b5;
}
.elden-section-head{
  margin-top: 24px; /* antes 40px */
}
.elden-section-kicker{
  opacity: .85;
  text-shadow: 0 0 6px rgba(177,147,67,.35);
}
.elden-section-head::before{
  content:"";
  position:absolute;
  left:50%;
  top:-18px;
  width:260px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    to right,
    transparent,
    rgba(177,147,67,.45),
    transparent
  );
}
.video-grid-wrapper{
  margin-top: 28px;
  position: relative;
}

.video-grid-wrapper::before{
  content:"";
  position:absolute;
  top:-60px;
  left:0;
  right:0;
  height:120px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    rgba(177,147,67,.12),
    rgba(0,0,0,0)
  );
}
.video-card .info h4{
  font-size:.7rem;
  letter-spacing:2.5px;
  color:#e9dbb8;
}

.elden-about{ text-align:center; margin:60px auto 40px; max-width: 860px; }
.elden-about-head h2{
  font-family:'Cinzel',serif;
  letter-spacing:.12em;
  color: rgba(255,235,200,.92);
}
.elden-about-divider{
  width: 160px;
  height:2px;
  margin:12px auto 18px;
  background:linear-gradient(90deg, transparent, rgba(177,147,67,.85), transparent);
}
.elden-about-cards{ display:flex; justify-content:space-around; gap:22px; flex-wrap:wrap; }
.about-card{
  width:200px;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:18px 14px;
  backdrop-filter:blur(6px);
}
.about-icon{ font-size:32px; display:block; margin-bottom:8px; }
.about-card h3{ font-size:1rem; letter-spacing:.06em; margin:6px 0; color:rgba(255,235,200,.85); }
.about-card p{ font-size:.85rem; color:rgba(255,255,255,.68); }

/* =========================================================
   FIX: Hero no debe tragarse la pantalla (override definitivo)
   ========================================================= */
.elden-hero{
  min-height: clamp(420px, 62vh, 520px) !important;
  padding-top: 28px !important;
  padding-bottom: 24px !important;
}

/* el contenedor del panel */
.elden-hero-inner-border{
  padding: 28px 26px !important;   /* antes 60px */
}

/* si el bg escalado empuja layout, lo mantenemos controlado */
.elden-hero-bg{
  transform: none !important;
}
.elden-hero-bg::before,
.elden-hero-bg::after{
  transform: scale(1.03);
}

/* reduce el “aire” de la sección What is EldenRO? */
.elden-about{
  margin: 26px auto 14px !important;
}

/* =========================================================
   FIX: “Sección siguiente no aparece hasta zoom out”
   Causa típica: bloque con min-height/height grande o márgenes/paddings enormes.
   ========================================================= */

.container.home{
  padding-top: 26px; /* controla el ritmo visual */
}

/* WORLD / ABOUT: nunca deben “secuestrar” el alto */
.elden-home-block.elden-world{
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto 22px !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Inner con altura natural */
.elden-world-inner{
  height: auto !important;
  min-height: 0 !important;
  padding: 22px 22px 18px !important;
}

/* ABOUT no debe meter un padding-bottom gigante */
.elden-about{
  height: auto !important;
  min-height: 0 !important;
  margin-top: 18px !important;
  padding-bottom: 0 !important;
}

/* Si por alguna razón una regla heredada le mete vh a los hijos */
.elden-home-block.elden-world *{
  min-height: 0;
}

/* Espacio controlado antes del “INTRO GRID” */
.home-intro{
  margin-top: 18px;
}

/* =========================================
   Center: Hall of Champions (wrapper-center)
   ========================================= */
.eld-champions{padding:8px 0}
.eld-ch-head{text-align:center;margin:8px 0 14px}
.eld-ch-kicker{
  font-family:'Cinzel',serif;letter-spacing:.22em;text-transform:uppercase;
  font-size:12px;color:rgba(255,255,255,.58)
}
.eld-ch-title{
  margin-top:6px;font-family:'Cinzel',serif;font-size:22px;letter-spacing:.08em;
  color:rgba(255,255,255,.92)
}
.eld-ch-sub{margin-top:6px;font-size:13px;color:rgba(255,255,255,.62)}
.eld-ch-grid{display:grid;gap:12px}

.eld-ch-card{
  border-radius:18px;border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  padding:12px;position:relative;overflow:hidden
}
.eld-ch-card::before{
  content:"";position:absolute;inset:-1px;
  background:radial-gradient(1200px 240px at 50% 0%, rgba(177,147,67,.12), transparent 60%);
  pointer-events:none
}
.eld-ch-top{display:flex;align-items:center;gap:10px}
.eld-ch-badge{
  min-width:48px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-weight:800;letter-spacing:.08em;font-size:12px;color:rgba(255,255,255,.92);
  border:1px solid rgba(177,147,67,.32);background:rgba(177,147,67,.12)
}
.eld-ch-meta{flex:1}
.eld-ch-mode{font-family:'Cinzel',serif;letter-spacing:.10em;font-size:13px;color:rgba(255,255,255,.90)}
.eld-ch-desc{margin-top:2px;font-size:12px;color:rgba(255,255,255,.62)}
.eld-ch-ico{
  width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);color:rgba(255,255,255,.90)
}

.eld-ch-body{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.eld-ch-ch{display:flex;gap:10px;align-items:center}
.eld-ch-portrait{
  width:54px;height:54px;border-radius:14px;overflow:hidden;position:relative;
  border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);
  flex:0 0 auto
}
.eld-ch-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.eld-ch-portrait.noimg img{display:none}
.eld-ch-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:10px
}
.eld-ch-fallback img{width:100%;height:100%;object-fit:contain;opacity:.85}

.eld-ch-info{min-width:0}
.eld-ch-name{font-weight:800;letter-spacing:.02em;font-size:16px;color:rgba(255,255,255,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eld-ch-subline{margin-top:3px;font-size:12px;color:rgba(255,255,255,.62);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.eld-ch-job{display:inline-flex;gap:6px;align-items:center}
.eld-ch-jobicon{width:16px;height:16px;object-fit:contain}
.eld-ch-sep{opacity:.6}

.eld-ch-stat{
  margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.20)
}
.eld-ch-stat-lbl{font-size:12px;color:rgba(255,255,255,.62)}
.eld-ch-stat-val{font-weight:800;color:rgba(255,255,255,.90)}

.eld-ch-link{
  display:inline-flex;margin-top:10px;font-size:12px;text-decoration:none;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,235,200,.92);
  border-bottom:1px solid rgba(177,147,67,.35);padding-bottom:2px
}
.eld-ch-link:hover{color:rgba(255,235,200,1);border-bottom-color:rgba(177,147,67,.7)}
.eld-ch-card.is-locked{opacity:.82}
.eld-ch-note{margin-top:8px;font-size:12px;color:rgba(255,255,255,.55)}

.elden-invisible{ opacity:0; transform: translateY(10px); }
.elden-visible{ opacity:1; transform:none; transition: opacity .4s ease, transform .4s ease; }

/* =========================
   CHAMPION PODIUM (PvP/MVP)
   ========================= */

.eld-podium{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(177,147,67,.14), rgba(0,0,0,.22) 45%, rgba(0,0,0,.18));
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow: hidden;
  position: relative;
}

.eld-podium::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 220px at 20% 0%, rgba(177,147,67,.22), transparent 55%),
              radial-gradient(520px 220px at 80% 0%, rgba(255,235,200,.10), transparent 60%);
  pointer-events:none;
}

.eld-podium-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.eld-podium-rank{
  font-weight:800;
  letter-spacing:.8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(177,147,67,.35);
  color: rgba(255,235,200,.95);
}

.eld-podium-title{line-height:1.05}
.eld-podium-mode{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color: rgba(255,255,255,.75);
}
.eld-podium-sub{
  font-size:14px;
  color: rgba(255,235,200,.95);
}

.eld-podium-ico{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}

.eld-podium-main{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}

/* Portrait big + medal */
.eld-podium-portrait{
  width:110px;
  height:110px;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(177,147,67,.28);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

.eld-podium-portrait img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  position:relative;
  z-index:2;
}

.eld-podium-medal{
  position:absolute;
  right:100px;
  bottom:156px;
  width:42px;height:42px;
  border-radius:16px;
  display:grid;place-items:center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(177,147,67,.45);
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
  z-index:4;
}

/* hide fallback when loaded (uses your hasimg) */
.eld-podium-portrait .eld-ch-fallback{
  position:absolute; inset:0;
  display:grid; place-items:center;
  z-index:3;
}
.eld-podium-portrait.hasimg .eld-ch-fallback{
  opacity:0; visibility:hidden; pointer-events:none;
}

.eld-podium-name{
  font-size:22px;
  letter-spacing:.6px;
  font-weight:800;
  color: rgba(255,255,255,.94);
}

.eld-podium-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color: rgba(255,255,255,.70);
  font-size:13px;
}
.eld-podium-job{display:inline-flex;align-items:center;gap:8px}
.eld-podium-jobicon{width:18px;height:18px;opacity:.95}
.eld-podium-dot{opacity:.35}

/* Stats row */
.eld-podium-stats{
  width:100%;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:6px;
}
.eld-ps{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  padding:10px 10px;
}
.eld-ps-l{
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color: rgba(255,255,255,.55);
}
.eld-ps-v{
  margin-top:4px;
  font-size:18px;
  font-weight:800;
  color: rgba(255,255,255,.90);
}
.eld-ps.is-gold{
  border-color: rgba(177,147,67,.32);
  background: rgba(177,147,67,.12);
}
.eld-ps.is-gold .eld-ps-v{ color: rgba(255,235,200,.95); }

.eld-podium-link{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(177,147,67,.35);
  background: rgba(0,0,0,.22);
  color: rgba(255,235,200,.95);
  letter-spacing:1.4px;
  text-transform:uppercase;
  font-weight:800;
  font-size:12px;
  text-decoration:none;
}
.eld-podium-link:hover{
  background: rgba(0,0,0,.32);
}

.eld-podium-empty{
  color: rgba(255,255,255,.60);
  padding:10px 0 4px;
}

.eld-podium-portrait{
  width:120px;
  height:120px;
  border-radius:26px;
  background: radial-gradient(120px 120px at 50% 40%, rgba(177,147,67,.20), rgba(0,0,0,.20));
}

.eld-podium-portrait img{
  transform: scale(1.15);
  image-rendering: pixelated; /* perfecto para sprites RO */
}
.eld-podium{
  position:relative;
}

.eld-podium::after{
  content:"";
  position:absolute;
  top:-40px; left:50%;
  width:420px; height:220px;
  transform:translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,235,200,.16), transparent 70%);
  pointer-events:none;
  filter: blur(2px);
}
.eld-podium-rank{
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(177,147,67,.55);
  background: rgba(177,147,67,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}
.eld-podium-link{
  min-width: 220px;
  box-shadow: 0 14px 38px rgba(0,0,0,.55);
}
.eld-podium-link:hover{
  transform: translateY(-1px);
}
.eld-podium-portrait{
  width:140px;
  height:140px;
  border-radius:28px;
}

.eld-podium-portrait img{
  transform: translateY(-6px) scale(1.28);
  transform-origin: 50% 60%;
  image-rendering: pixelated;
}
.eld-podium{
  position:relative;
}

.eld-podium::after{
  content:"";
  position:absolute;
  top:-60px; left:50%;
  width:520px; height:260px;
  transform:translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,235,200,.18), transparent 70%);
  pointer-events:none;
  filter: blur(3px);
  opacity:.9;
}
.eld-podium-stat.is-gold{
  border: 1px solid rgba(177,147,67,.55);
  background: linear-gradient(180deg, rgba(177,147,67,.18), rgba(0,0,0,.22));
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.eld-podium-link{
  min-width: 240px;
  padding: 12px 18px;
  letter-spacing: .08em;
  box-shadow: 0 16px 45px rgba(0,0,0,.58);
}

.eld-podium-link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,235,200,.55);
}
/* ================================
   FAME THRONE (PvP #1)
   ================================ */

/* Card más “escenario”, con luz */
.eld-ch-card.is-throne{
  position: relative;
  overflow: hidden;
  border-color: rgba(177,147,67,.35);
  box-shadow:
    0 24px 90px rgba(0,0,0,.70),
    0 0 0 1px rgba(255,235,200,.06) inset;
}

/* Halo principal detrás del contenido */
.eld-ch-card.is-throne::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(closest-side at 50% 35%, rgba(255,235,200,.22), transparent 62%),
    radial-gradient(closest-side at 50% 50%, rgba(177,147,67,.18), transparent 70%);
  filter: blur(2px);
  opacity: 1;
  pointer-events:none;
}

@keyframes eldRays{
  from{ transform: translateX(-50%) rotate(0deg); }
  to  { transform: translateX(-50%) rotate(360deg); }
}

/* Retrato: más grande y dominante */
.eld-ch-portrait.is-throne-portrait{
  position: relative;
  width: 170px;
  height: 170px;
  margin: 18px auto 10px;
  border-radius: 34px;
  border: 1px solid rgba(177,147,67,.40);
  background: linear-gradient(180deg, rgba(177,147,67,.16), rgba(0,0,0,.22));
  box-shadow:
    0 18px 60px rgba(0,0,0,.70),
    0 0 0 1px rgba(255,235,200,.08) inset;
}

/* Glow alrededor del frame */
.eld-ch-portrait.is-throne-portrait::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 42px;
  background: radial-gradient(circle at 50% 45%, rgba(255,235,200,.22), transparent 62%);
  filter: blur(6px);
  opacity: .95;
  pointer-events:none;
}

/* Partículas (sparkles) */
.eld-ch-portrait.is-throne-portrait::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,235,200,.85) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 25%, rgba(255,235,200,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 55%, rgba(177,147,67,.70) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 70%, rgba(255,235,200,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 85%, rgba(177,147,67,.55) 0 1px, transparent 2px);
  opacity: .55;
  pointer-events:none;
  animation: eldSpark 2.6s ease-in-out infinite;
}

@keyframes eldSpark{
  0%,100%{ opacity:.30; transform: translateY(0); }
  50%    { opacity:.70; transform: translateY(-3px); }
}

/* Sprite: pixel-perfect + escala */
.eld-ch-portrait.is-throne-portrait img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translateY(-8px) scale(1.34);
  transform-origin: 50% 60%;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.75));
}

/* Pedestal debajo del retrato */
.eld-ch-portrait.is-throne-portrait .eld-ch-fallback,
.eld-ch-portrait.is-throne-portrait .eld-pedestal{
  position:absolute;
  left:50%;
  bottom:-16px;
  transform: translateX(-50%);
  width: 140px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(177,147,67,.22), transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.65);
  opacity: .9;
  pointer-events:none;
}

/* Nombre más “famoso” */
.eld-ch-card.is-throne .eld-ch-name{
  font-size: 30px;
  letter-spacing: .06em;
  text-shadow: 0 10px 30px rgba(0,0,0,.80);
}

/* Badge #1 más presente */
.eld-ch-card.is-throne .eld-ch-badge{
  box-shadow: 0 10px 30px rgba(0,0,0,.65);
  border-color: rgba(255,235,200,.25);
}

/* Botón: “premio” */
.eld-ch-card.is-throne .eld-ch-link{
  display:inline-flex;
  justify-content:center;
  min-width: 260px;
  padding: 12px 18px;
  border-color: rgba(177,147,67,.55);
  background: linear-gradient(180deg, rgba(177,147,67,.18), rgba(0,0,0,.25));
  box-shadow: 0 18px 55px rgba(0,0,0,.70);
  transition: transform .15s ease, border-color .15s ease;
}

.eld-ch-card.is-throne .eld-ch-link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,235,200,.55);
}
.wrapper-left{
  margin-top: 200px;
}
.wrapper-right{
  margin-top: 200px;
}

/* Spotlight + fame aura */
.eld-podium-portrait{
  position: relative;
  isolation: isolate;
}

.eld-podium-portrait::before{
  content:"";
  position:absolute;
  inset:-40px -60px -60px -60px;
  background:
    radial-gradient(closest-side, rgba(255,220,140,.22), transparent 70%),
    radial-gradient(closest-side, rgba(255,180,80,.12), transparent 75%);
  filter: blur(6px);
  opacity: .95;
  z-index: 0;
  pointer-events:none;
}

.eld-podium-portrait::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width: 260px;
  height: 90px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,210,120,.18), transparent 70%);
  filter: blur(8px);
  z-index: 0;
  pointer-events:none;
}

.eld-podium-portrait img{
  position: relative;
  z-index: 1;
  transform: translateY(12px) scale(1.18);
  image-rendering: pixelated;
}

/* =========================================================
   RESPONSIVE / ACCESSIBILITY (mantén tu bloque)
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}
/* =========================
   LEGEND GLASS (cracked)
   ========================= */

.eld-ch-portrait.is-legend{
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 10px;
}

.eld-ch-portrait.is-legend .eld-glass{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;

  background:
    radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(120% 120% at 70% 85%, rgba(177,147,67,.10), transparent 58%),
    rgba(0,0,0,.22);

  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 24px 70px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.45);

  backdrop-filter: blur(8px);
}

.eld-ch-portrait.is-legend .eld-glass img{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%) scale(1.28);
  transform-origin: 50% 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 18px 25px rgba(0,0,0,.65));
}

.eld-ch-portrait.is-legend .eld-glass-crack{
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: screen;
  background:
    linear-gradient(115deg, transparent 0 47%, rgba(255,255,255,.22) 48%, rgba(255,255,255,.04) 49%, transparent 52% 100%),
    linear-gradient(25deg,  transparent 0 58%, rgba(255,255,255,.18) 59%, rgba(255,255,255,.03) 60%, transparent 64% 100%),
    linear-gradient(160deg, transparent 0 35%, rgba(255,255,255,.16) 36%, rgba(255,255,255,.02) 37%, transparent 41% 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.00) 0 22px, rgba(255,255,255,.05) 22px 23px, rgba(255,255,255,.00) 23px 44px);
  transform: rotate(-8deg);
  filter: blur(.2px);
}

.eld-ch-portrait.is-legend .eld-glass-sheen{
  position: absolute;
  inset: -40% -60%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg,
    transparent 0 40%,
    rgba(255,255,255,.20) 48%,
    rgba(255,255,255,.05) 54%,
    transparent 60% 100%);
  transform: rotate(8deg) translateX(-35%);
  animation: eldSheen 3.6s ease-in-out infinite;
}

@keyframes eldSheen{
  0%, 55% { opacity: 0; transform: rotate(8deg) translateX(-45%); }
  65%     { opacity: .35; }
  85%     { opacity: .10; transform: rotate(8deg) translateX(25%); }
  100%    { opacity: 0; transform: rotate(8deg) translateX(35%); }
}

.eld-ch-portrait.is-legend .eld-glass-dust{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.20) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 40%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 72%, rgba(177,147,67,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 65%, rgba(255,255,255,.12) 0 1px, transparent 2px);
}

.eld-ch-portrait.is-legend::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 34px;
  pointer-events:none;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(177,147,67,.28), transparent 65%),
    radial-gradient(85% 85% at 50% 80%, rgba(255,235,200,.10), transparent 70%);
  filter: blur(6px);
  opacity: .9;
}

.eld-ch-portrait.is-legend:hover .eld-glass{
  transform: translateY(-1px);
}
/* ===============================
   BROKEN GLASS – LEGEND THRONE
   =============================== */

.eld-ch-portrait.is-legend.is-broken {
  position: relative;
  width: 230px;
  height: 230px;
  margin: 0 auto 16px;
  z-index: 2;
}

/* --- Glass container --- */
.eld-ch-portrait.is-broken .eld-glass {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;

  background:
    radial-gradient(120% 120% at 50% 35%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(140% 140% at 50% 90%, rgba(177,147,67,.18), transparent 65%),
    rgba(0,0,0,.35);

  border: 1px solid rgba(255,255,255,.16);
}
.eld-ch-card.is-throne::before{
  opacity: .75 !important;
}

/* =========================================
   DOMINANT TYPO – PvP #1 Throne
   (paste at the end of home-premium.css)
   ========================================= */

/* Top title block: PvP / First Throne */
.eld-ch-card.is-throne .eld-podium-mode,
.eld-ch-card.is-throne .eld-podium-sub{
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: .22em;
}

.eld-ch-card.is-throne .eld-podium-mode{
  font-size: 12px;
  color: rgba(255,235,200,.80);
  text-shadow: 0 2px 18px rgba(0,0,0,.75);
}

.eld-ch-card.is-throne .eld-podium-sub{
  font-size: 14px;
  letter-spacing: .18em;
  color: rgba(255,235,200,.96);
  text-shadow:
    0 10px 30px rgba(0,0,0,.85),
    0 0 20px rgba(177,147,67,.18);
}

/* Make the #1 badge more “royal” */
.eld-ch-card.is-throne .eld-podium-rank,
.eld-ch-card.is-throne .eld-ch-badge{
  font-weight: 900;
  letter-spacing: .14em;
  border-color: rgba(177,147,67,.60) !important;
  background: linear-gradient(180deg, rgba(177,147,67,.22), rgba(0,0,0,.22)) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,235,200,.08) inset;
  color: rgba(255,235,200,.98) !important;
}

/* MAIN NAME – dominant */
.eld-ch-card.is-throne .eld-podium-name,
.eld-ch-card.is-throne .eld-ch-name{
  font-size: 34px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  color: rgba(255,255,255,.98) !important;
  text-shadow:
    0 18px 55px rgba(0,0,0,.90),
    0 0 24px rgba(177,147,67,.22),
    0 0 10px rgba(255,235,200,.10);
}

/* Meta line – turn into a “nameplate” */
.eld-ch-card.is-throne .eld-podium-meta{
  display: inline-flex !important;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.26);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  color: rgba(255,255,255,.82) !important;
}

.eld-ch-card.is-throne .eld-podium-jobicon{
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.65));
}

.eld-ch-card.is-throne .eld-podium-job{
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(255,235,200,.92);
}

.eld-ch-card.is-throne .eld-podium-mini{
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

/* Stats – stronger labels + values */
.eld-ch-card.is-throne .eld-ps-l{
  font-size: 11px !important;
  letter-spacing: .22em !important;
  font-weight: 800;
  color: rgba(255,255,255,.70) !important;
}

.eld-ch-card.is-throne .eld-ps-v{
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: .06em;
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 12px 28px rgba(0,0,0,.70);
}

/* Rating tile – “king stat” */
.eld-ch-card.is-throne .eld-ps.is-gold{
  border-color: rgba(177,147,67,.55) !important;
  background: linear-gradient(180deg, rgba(177,147,67,.22), rgba(0,0,0,.22)) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,235,200,.08) inset;
}

.eld-ch-card.is-throne .eld-ps.is-gold .eld-ps-v{
  color: rgba(255,235,200,.98) !important;
  text-shadow:
    0 12px 30px rgba(0,0,0,.75),
    0 0 22px rgba(177,147,67,.25);
}

/* CTA – more “commanding” */
.eld-ch-card.is-throne .eld-podium-link,
.eld-ch-card.is-throne .eld-ch-link{
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  border-color: rgba(177,147,67,.60) !important;
  background: linear-gradient(180deg, rgba(177,147,67,.22), rgba(0,0,0,.22)) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.70),
    0 0 0 1px rgba(255,235,200,.08) inset;
}

.eld-ch-card.is-throne .eld-podium-link:hover,
.eld-ch-card.is-throne .eld-ch-link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,235,200,.70) !important;
}
/* =========================
   MVP PODIUM – head relic
   ========================= */

.eld-podium-portrait{
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* si quieres, asegúrate que el sprite esté sobre el aura */
.eld-podium-sprite{
  position: relative;
  z-index: 3;
}

/* aura suave detrás */
.eld-podium-aura{
  position: absolute;
  inset: 10% 12%;
  border-radius: 28px;
  z-index: 1;
  background:
    radial-gradient(closest-side, rgba(177,147,67,.18), rgba(0,0,0,0) 70%),
    radial-gradient(closest-side, rgba(255,235,200,.10), rgba(0,0,0,0) 72%);
  filter: blur(10px);
  opacity: .9;
  pointer-events: none;
}

/* el ícono flotante */
.eld-podium-headitem{
  position: absolute;
  left: 50%;
  top: 18px;                 /* ajusta según tu portrait */
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  z-index: 4;
  image-rendering: pixelated;

  border-radius: 10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 10px 30px rgba(0,0,0,.55),
    0 0 0 1px rgba(177,147,67,.20) inset;
  backdrop-filter: blur(6px);

  animation: eldFloatRelic 2.8s ease-in-out infinite;
}

/* brillo “reliquia” */
.eld-podium-headitem::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 14px;
  background: radial-gradient(circle, rgba(177,147,67,.35), rgba(0,0,0,0) 70%);
  filter: blur(10px);
  opacity: .75;
  z-index: -1;
  pointer-events: none;
}

.eld-podium-headitem:hover{
  transform: translateX(-50%) scale(1.06);
  box-shadow:
    0 14px 40px rgba(0,0,0,.65),
    0 0 0 1px rgba(177,147,67,.28) inset;
}

@keyframes eldFloatRelic{
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -6px; }
}
.eld-podium-portrait{
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible; /* IMPORTANTE: que no lo corte */
}

.eld-podium-headitem{
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  z-index: 5;

  image-rendering: pixelated;
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
/* Contenedor del portrait */
.eld-podium-portrait{
  position: relative !important;
  display: grid;
  place-items: center;
  overflow: visible !important;
}

/* Sprite arriba del aura */
.eld-podium-sprite{
  position: relative;
  z-index: 2;
}

/* Ítem sobre la cabeza (anti “img { width:100% }”) */
.eld-podium-portrait > img.eld-podium-headitem{
  position: absolute !important;
  left: 50% !important;
  top: 74px !important;                 /* AJUSTA: 64–90 según tu sprite */
  transform: translateX(-50%) !important;

  width: 26px !important;
  height: 26px !important;

  max-width: none !important;
  max-height: none !important;

  display: block !important;
  z-index: 5 !important;

  image-rendering: auto !important;     /* quita lo “minecraft” */
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;

  /* glow pro */
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55))
          drop-shadow(0 0 12px rgba(177,147,67,.28));

  animation: eldRelicFloat 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes eldRelicFloat{
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-4px); }
}
/* =========================================================
   EldenRO — MVP #1 (Boss Slayer) — Dominant Card
   Aplica SOLO a: .eld-ch-card.is-mvp  +  .eld-podium-wrap.eld-hunter
   ========================================================= */

/* ---------- Card shell (MVP) ---------- */
.eld-ch-card.is-mvp{
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(177,147,67,.22) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.70));
  box-shadow: 0 22px 70px rgba(0,0,0,.60);
  overflow: hidden;
}

.eld-ch-card.is-mvp::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events:none;
}

.eld-ch-card.is-mvp::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(70% 65% at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.40) 58%, rgba(0,0,0,.78) 100%);
  pointer-events:none;
  opacity:.95;
  mix-blend-mode: multiply;
}

/* ---------- MVP header (reuse eld-ch-top but make it richer) ---------- */
.eld-ch-card.is-mvp .eld-ch-top{
  position: relative;
  z-index: 2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.eld-ch-card.is-mvp .eld-ch-badge{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: .6px;
  color: rgba(255,235,200,.96);
  border: 1px solid rgba(177,147,67,.60);
  background: linear-gradient(180deg, rgba(177,147,67,.26), rgba(0,0,0,.12));
  box-shadow: 0 0 18px rgba(177,147,67,.18);
}

.eld-ch-card.is-mvp .eld-ch-meta{
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}

.eld-ch-card.is-mvp .eld-ch-mode{
  font-size: 12px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: rgba(255,235,200,.80);
}

.eld-ch-card.is-mvp .eld-ch-desc{
  margin-top: 3px;
  font-size: 13px;
  letter-spacing: .4px;
  color: rgba(255,255,255,.68);
}

.eld-ch-card.is-mvp .eld-ch-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  color: rgba(255,235,200,.86);
  box-shadow: 0 14px 34px rgba(0,0,0,.50);
}

/* ---------- Body wrapper ---------- */
.eld-ch-card.is-mvp .eld-ch-body{
  position: relative;
  z-index: 2;
  padding: 14px 16px 18px;
}

/* =========================================================
   MVP layout block (your existing HTML)
   .eld-podium-wrap.eld-hunter -> 2 columns (altar + info)
   ========================================================= */

.eld-podium-wrap.eld-hunter{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

/* ---------- LEFT (altar / sprite) ---------- */
.eld-hunter-left{
  min-width: 0;
}

.eld-hunter-altar{
  position: relative;
  height: 240px;
  border-radius: 22px;
  border: 1px solid rgba(177,147,67,.30);
  background:
    radial-gradient(90% 85% at 50% 35%, rgba(255,235,200,.10), rgba(0,0,0,.22)),
    rgba(0,0,0,.16);
  box-shadow:
    0 22px 55px rgba(0,0,0,.62),
    0 0 24px rgba(177,147,67,.12);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* sprite control: NEVER giant */
.eld-hunter-sprite{
  width: 180px !important;
  height: 180px !important;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.70));
  position: relative;
  z-index: 3;
}

/* trophy */
.eld-hunter-trophy{
  position:absolute;
  top: 10px;
  left: 10px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  display:grid;
  place-items:center;
  z-index: 4;
  box-shadow: 0 14px 34px rgba(0,0,0,.50);
}
.eld-hunter-trophy img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  image-rendering: auto;
}

/* aura + watermark */
.eld-hunter-aura{
  position:absolute;
  inset: -30%;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(177,147,67,.26), rgba(0,0,0,0) 70%);
  opacity: .55;
  z-index: 1;
  pointer-events:none;
}

.eld-hunter-watermark{
  position:absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  text-align:center;
  font-weight: 900;
  letter-spacing: 3px;
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(255,235,200,.16);
  z-index: 2;
  pointer-events:none;
}

/* when no img */
.eld-hunter-altar.noimg{
  place-items: center;
}
.eld-hunter-altar.noimg::after{
  content:"No portrait";
  color: rgba(255,255,255,.40);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---------- RIGHT (info) ---------- */
.eld-hunter-right{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* title/name */
.eld-hunter-title{
  width: 100%;
}

.eld-hunter-name{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .4px;
  color: rgba(255,255,255,.94);
  text-shadow: 0 14px 40px rgba(0,0,0,.70);
  line-height: 1.05;
}

/* pills row */
.eld-hunter-sub{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.eld-hunter-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  letter-spacing: .2px;
}

.eld-hunter-pill.is-gold{
  border-color: rgba(177,147,67,.55);
  background: linear-gradient(180deg, rgba(177,147,67,.20), rgba(0,0,0,.12));
  color: rgba(255,235,200,.92);
}

.eld-hunter-jobicon{
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: auto;
}

/* stats grid */
.eld-hunter-stats{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.eld-hunter-stat{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  padding: 12px 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.eld-hunter-lbl{
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
}

.eld-hunter-val{
  margin-top: 6px;
  font-size: 22px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.eld-hunter-bar{
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.eld-hunter-bar i{
  display:block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(177,147,67,.10), rgba(177,147,67,.62));
}
.eld-hunter-bar.is-dim i{
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.22));
  opacity: .85;
}

/* rank block spans full width (dominant) */
.eld-hunter-stat.is-rank{
  grid-column: 1 / -1;
  border-color: rgba(177,147,67,.34);
  background:
    radial-gradient(120% 120% at 50% 10%, rgba(177,147,67,.16), rgba(0,0,0,.12)),
    rgba(0,0,0,.16);
}

/* CTA button */
.eld-hunter-btn{
  margin-top: 2px;
  text-decoration: none;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 240px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(177,147,67,.60);
  color: rgba(255,235,200,.96);
  background: linear-gradient(180deg, rgba(177,147,67,.22), rgba(0,0,0,.18));
  letter-spacing: 2.6px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(177,147,67,.16);
}
.eld-hunter-btn:hover{
  filter: brightness(1.06);
  box-shadow: 0 0 28px rgba(177,147,67,.22);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .eld-podium-wrap.eld-hunter{
    grid-template-columns: 1fr;
  }
  .eld-hunter-altar{
    height: 220px;
  }
  .eld-hunter-sprite{
    width: 170px !important;
    height: 170px !important;
  }
  .eld-hunter-right{
    align-items: center;
    text-align: center;
  }
  .eld-hunter-sub{
    justify-content: center;
  }
  .eld-hunter-btn{
    width: 100%;
    min-width: 0;
  }
}
.eld-ch-card.is-mvp .eld-hunter-sprite {
  width: 280px !important;
  height: 280px !important;
}
.eld-hunter-sprite {
  transform: translateX(-25px) translateY(-95px);
}