@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&display=swap');

:root{
  --eld-bg: rgba(10,12,16,.62);
  --eld-bg2: rgba(10,12,16,.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,.95);
  --eld-shadow: 0 18px 60px rgba(0,0,0,.55);
  --eld-radius: 18px;
  --eld-radius-sm: 12px;
}

.eld-si-wrap{ padding: 18px 0 44px; display:grid; gap:14px; }

.eld-si-head{
  border-radius: var(--eld-radius);
  background: linear-gradient(180deg, var(--eld-bg), var(--eld-bg2));
  border: 1px solid var(--eld-bd);
  box-shadow: var(--eld-shadow);
  padding: 18px 18px 16px;
  position: relative;
  overflow:hidden;
  backdrop-filter: blur(10px);
}

.eld-si-head:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 260px at 18% 8%, rgba(177,147,67,.18), transparent 60%),
    radial-gradient(520px 220px at 80% 0%, rgba(255,235,200,.10), transparent 60%);
  pointer-events:none;
}

.eld-si-kicker{
  font-family:"Cinzel", serif;
  letter-spacing:.18em;
  font-size:12px;
  color: var(--eld-tx2);
  text-transform: uppercase;
  position: relative;
}

.eld-si-title{
  font-family:"Cinzel", serif;
  margin: 8px 0 6px;
  font-size: 34px;
  font-weight: 800;
  color: var(--eld-tx);
  letter-spacing: .02em;
  position: relative;
}

.eld-si-sub{
  color: var(--eld-tx2);
  font-size: 14px;
  line-height: 1.35;
  position: relative;
}

/* Cards */
.eld-si-card{
  border-radius: var(--eld-radius);
  background: linear-gradient(180deg, var(--eld-bg), var(--eld-bg2));
  border: 1px solid var(--eld-bd);
  box-shadow: var(--eld-shadow);
  overflow:hidden;
  backdrop-filter: blur(10px);
  position: relative;
}

.eld-si-card:after{
  content:"";
  position:absolute;
  left:18px; right:18px; top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,235,200,.30), transparent);
  pointer-events:none;
}

.eld-si-cardhead{
  padding: 16px 18px 10px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}

.eld-si-h3{
  margin: 0;
  font-family:"Cinzel", serif;
  font-size: 18px;
  letter-spacing:.03em;
  color: var(--eld-tx);
}

.eld-si-badges{ display:flex; gap:8px; flex-wrap: wrap; }

.eld-si-badge{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  padding: 6px 10px;
  border-radius: 999px;
}

.eld-si-badge.is-gold{
  color: rgba(255,235,200,.95);
  border-color: rgba(177,147,67,.40);
  background: rgba(177,147,67,.10);
}

/* Stats grid */
.eld-si-grid{
  padding: 0 18px 18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.eld-si-stat{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  padding: 12px 12px;
}

.eld-si-stat.is-wide{ grid-column: 1 / -1; }

.eld-si-label{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
}

.eld-si-value{
  margin-top: 6px;
  font-size: 26px;
  font-weight: 800;
  color: rgba(255,235,200,.95);
}

.eld-si-meta{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

/* Insights */
.eld-si-insights{
  padding: 0 18px 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.eld-si-ins{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  padding: 12px 12px;
}

.eld-si-ins-title{
  color: rgba(255,255,255,.70);
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
}

.eld-si-ins-value{
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
  color: rgba(255,235,200,.95);
}

.eld-si-ins-note{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.58);
  line-height: 1.35;
}

/* Top classes pills */
.eld-si-top{
  margin: 0 18px 18px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

.eld-si-top-title{
  color: rgba(255,255,255,.70);
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.eld-si-top-badges{ display:flex; flex-wrap: wrap; gap: 8px; }

.eld-si-pill{
  display:inline-flex;
  gap: 10px;
  align-items:center;
  border-radius: 999px;
  padding: 7px 10px;
  border: 1px solid rgba(177,147,67,.38);
  background: rgba(177,147,67,.10);
  color: rgba(255,235,200,.95);
}

.eld-si-pill-name{ font-weight: 700; }
.eld-si-pill-val{
  color: rgba(255,255,255,.86);
  border-left: 1px solid rgba(255,255,255,.16);
  padding-left: 10px;
}

/* Class grid */
.eld-si-classgrid{
  padding: 0 18px 18px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.eld-si-class{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  padding: 10px 10px;
}

.eld-si-class-name{
  color: rgba(255,255,255,.70);
  font-size: 12px;
}

.eld-si-class-val{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,235,200,.95);
}

.eld-si-empty{
  padding: 0 18px 18px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}

/* Responsive */
@media (max-width: 820px){
  .eld-si-classgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .eld-si-grid{ grid-template-columns: 1fr; }
  .eld-si-insights{ grid-template-columns: 1fr; }
}

/* Codex block */
.eld-si-codex{ padding: 0 18px 18px; }

.eld-si-codex-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
}

.eld-si-codex-stat{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  padding: 10px 10px;
}

.eld-si-codex-label{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.eld-si-codex-value{
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,235,200,.95);
}

.eld-si-divider{
  margin: 14px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,235,200,.22), transparent);
}

.eld-si-columns{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 12px;
}

.eld-si-col{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  padding: 12px 12px;
}

.eld-si-coltitle{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 10px;
}

.eld-si-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
  font-size: 13px;
}

.eld-si-tags{ display:flex; flex-wrap: wrap; gap: 8px; }

.eld-si-tag{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.78);
  font-size: 12px;
}

.eld-si-links{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.eld-si-linkbtn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.86);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 12px;
}

.eld-si-linkbtn:hover{
  border-color: rgba(255,235,200,.28);
  background: rgba(0,0,0,.28);
}

.eld-si-linkbtn.is-gold{
  border-color: rgba(177,147,67,.40);
  background: rgba(177,147,67,.10);
  color: rgba(255,235,200,.95);
}

@media (max-width: 980px){
  .eld-si-codex-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .eld-si-columns{ grid-template-columns: 1fr; }
}