/* Fighter Profile Overlay */
#profileOverlay{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.65); z-index:9999;
}
#profileOverlay.open{ display:grid; }
#profileCard{
  width:min(960px,94vw); max-height:90vh; overflow:auto;
  background:#0b1222; border:1px solid rgba(255,255,255,.12); border-radius:16px;
}
#profileCard header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.1);
}
#profileCard .actions{ display:flex; gap:8px; }
#profileCard .btn{
  appearance:none; border:0; border-radius:12px; padding:.5rem .8rem;
  background:#334155; color:#fff; cursor:pointer;
}
#overlayProfileBody{ padding:14px; }
/* Back button micro-interaction */
#profileCard .btn{
  transition: background-color .12s ease, transform .06s ease, box-shadow .12s ease;
}
#profileCard .btn:active,
#profileCard .btn.is-pressed{
  background:#475569;            /* slightly brighter to signal press */
  transform: translateY(1px);    /* tactile nudge */
  box-shadow: 0 0 0 2px rgba(255,255,255,.12) inset;
}
/* keyboard focus hint */
#profileCard .btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(59,130,246,.55);
  background:#3b4a61;
}
/* brand in the overlay header */
.brand-bdsfl{
  font-family:"BDSFL", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:1.8rem;
  line-height:1;
  letter-spacing:1px;
  color:#fff;
  user-select:none;
}
.brand-bdsfl .fl{ color:#ef4444; }

/* keep the centered fighter name */
#overlayProfileTitle{
  margin:0; font-weight:700; text-align:center;
}
/* optional: visually hide the header title if you keep it for a11y */
#profileCard #overlayProfileTitle {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* hero row below the header */
.profile-hero .name {
  font-weight: 800;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: 1.15;
}
.profile-hero .meta {
  color: #94a3b8; /* slate-400 */
  font-size: .9rem;
}
  
  @font-face {
  font-family: "BDSFL";
  src: url("BDSFL.ttf") format("truetype");
}