/* ===== FONTS ===== */
@font-face {
  font-family: "SR";
  src: url("assets/fonts/StarRailNeue-Sans-Regular.ttf");
}
@font-face {
  font-family: "SR-Semi";
  src: url("assets/fonts/StarRailNeue-Sans-SemiBold.ttf");
}

/* ===== BASE ===== */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:#05070a;
  color:#6ef2ff;
  font-family:"SR";
  height:100vh;
  overflow:hidden;
}

/* ===== SCANLINES ===== */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,255,255,0.02) 0px,
    transparent 2px
  );
  pointer-events:none;
  z-index:0;
}

/* ===== LAYER FIX ===== */
.top-bar,
.container,
.bottom-bar{
  position:relative;
  z-index:1;
}

/* ===== TOP BAR ===== */
.top-bar{
  height:50px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
  border-bottom:1px solid rgba(0,255,255,.2);
}

/* ===== GRID ===== */
.container{
  display:grid;
  grid-template-columns:260px 1fr 260px;
  height:calc(100vh - 100px);
}

/* ===== PANELS ===== */
.panel{
  padding:16px;
  border-right:1px solid rgba(0,255,255,.1);
}

.right{
  border-left:1px solid rgba(0,255,255,.1);
  border-right:none;
}

/* ===== CENTER ===== */
.core{
  display:flex;
  justify-content:center;
  align-items:center;
}

/* ===== DEFAULT STATE ===== */
.overlay{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;

  border:none;
  background:none;
  backdrop-filter:none;
  padding:0;
}

/* ===== ACTIVE MODULE ===== */
.overlay.active{
  width:100%;
  max-width:700px;
  height:520px;

  border:1px solid rgba(0,255,255,.2);
  padding:16px;

  background:rgba(0,10,14,0.6);
  backdrop-filter:blur(6px);

  align-items:stretch;
  text-align:left;
}

/* ===== SCROLL AREA ===== */
.overlay-content{
  flex:1;
  overflow-y:auto;
  padding-right:6px;
}

.overlay-content::-webkit-scrollbar{
  width:4px;
}
.overlay-content::-webkit-scrollbar-thumb{
  background:#6ef2ff;
}

/* ===== MODULE BUTTON ===== */
.module{
  padding:10px;
  border:1px solid rgba(0,255,255,.2);
  margin-bottom:10px;
  cursor:pointer;
  transition:.2s;
}

.module:hover{
  box-shadow:0 0 10px rgba(0,255,255,.6);
}

/* ===== SYSTEM BUTTON ===== */
.sys-btn{
  background:none;
  border:1px solid rgba(0,255,255,.4);
  color:#6ef2ff;
  padding:6px 12px;
  cursor:pointer;
  font-family:"SR-Semi";
  font-size:11px;
}

.sys-btn:hover{
  box-shadow:0 0 10px #6ef2ff;
}

/* ===== DUAL TEXT ===== */
.dual{
  display:flex;
  flex-direction:column;
  margin-bottom:6px;
}

.dual::before{
  content: attr(data-text);
  font-family:"SR-Semi";
  letter-spacing:2px;
  font-size:14px;
  text-shadow:0 0 6px rgba(0,255,255,.6);
}

.dual::after{
  content: attr(data-text);
  font-family:'Inter', sans-serif;
  font-size:10px;
  opacity:.5;
}

/* ===== AVATAR ===== */
.avatar{
  width:110px;
  height:110px;
  border-radius:50%;
  border:1px solid #6ef2ff;
  object-fit:cover;
  box-shadow:0 0 12px rgba(0,255,255,.5);
}

/* ===== MEDIA ===== */
.media{
  width:100%;
  height:auto;
  max-height:400px;
  object-fit:contain;
  border:1px solid rgba(0,255,255,.2);
  margin:6px 0;
  display:block;
}

/* ===== CAPTION (🔥 THIS WAS MISSING) ===== */
.caption{
  font-family:'Inter', sans-serif;
  font-size:11px;
  opacity:.65;
  line-height:1.6;
  margin-bottom:14px;
  white-space:pre-wrap;   /* keeps natural spacing */
  word-break:break-word;  /* prevents overflow */
}

/* ===== GRID ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid rgba(0,255,255,.2);
}

/* ===== BOTTOM BAR ===== */
.bottom-bar{
  height:50px;
  display:flex;
  align-items:center;
  padding:10px;
  border-top:1px solid rgba(0,255,255,.2);
}

/* ===== MOBILE ===== */
@media (max-width:900px){

  body{
    overflow:auto;
  }

  /* stack layout clean */
  .container{
    display:flex;
    flex-direction:column;
    height:auto;
  }

  /* panels spacing */
  .panel{
    border:none;
    border-bottom:1px solid rgba(0,255,255,.1);
    padding:12px;
  }

  .right{
    order:3; /* move buttons to bottom cleanly */
  }

  /* core spacing */
  .core{
    padding:10px;
  }

  /* overlay becomes full-width card */
  .overlay.active{
    width:100%;
    max-width:100%;
    height:auto;

    padding:14px;
    border:1px solid rgba(0,255,255,.15);
  }

  /* FIX TEXT READABILITY */
  .dual::before{
    font-size:13px;
    letter-spacing:1px;
  }

  .dual::after{
    font-size:11px;
  }

  /* 🔥 IMPORTANT: caption readable */
  .caption{
    font-size:13px;
    line-height:1.7;
  }

  /* images scale better */
  .media{
    max-height:none;
    border-radius:4px;
  }

  /* buttons stretch nicely */
  .sys-btn{
    width:100%;
    text-align:center;
    margin-top:10px;
  }

  /* modules look like cards */
  .module{
    padding:12px;
    margin-bottom:8px;
  }

  /* FIX GRID (no squish) */
  .grid{
    grid-template-columns:1fr;
  }

}