/* =========================================================
   MODAL (base) — common
========================================================= */
.modal{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display:none;
}
.modal.is-open{
  display:flex;
  align-items:center;
  justify-content:center;
}

.modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}

.modal__panel{
  position:relative;
  width: min(980px, 92vw);
  height: min(680px, 84vh);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,.75);
  background: rgba(0,0,0,.70);
}

.modal__bg{
  position:absolute;
  inset:0;
  background-image: var(--modal-bg);
  background-size: cover;
  background-position: var(--modal-pos, 50% 50%);
  filter: brightness(var(--modal-bright, 1));
  transform: scale(1.02);
}
.modal__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to right, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.35) 100%);
}

/* content layer (default) */
.modal__content{
  position:relative;
  z-index:2;
  height:100%;
  padding: 96px 48px 84px;
}

/* left/right layout */
.modal.is-left  .modal__content{ justify-items:start; text-align:left; }
.modal.is-right .modal__content{ justify-items:end;   text-align:left; }
.modal.is-right .modal__content > *,
.modal.is-left  .modal__content > *{ max-width: 520px; }

.modal__head{ display:flex; align-items:center; gap: 16px; }
.modal__badge{
  width:42px;
  height:42px;
  border-radius:999px;
  background: rgba(212,175,55,.95);
  color:#111;
  display:grid;
  place-items:center;
  font-weight:900;
}
.modal__title{ margin:0; font-size: 28px; letter-spacing:.06em; }

.modal__meta{ margin: 10px 0 0; display:grid; gap: 10px; }
.modal__meta div{ display:grid; grid-template-columns: 70px 1fr; gap: 12px; }
.modal__meta dt{ color: rgba(255,255,255,.55); }
.modal__meta dd{ margin:0; color: rgba(255,255,255,.88); }

.modal__bio{ margin: 18px 0 0; line-height: 2.0; color: rgba(255,255,255,.86); }

/* close */
.modal__close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:6;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.45);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

/* nav — bottom fixed (PC/SP common) */
.modal__nav{
  position:absolute;
  bottom:14px;
  top:auto;
  transform:none;
  z-index:6;

  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.45);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;

  display:grid;
  place-items:center;
  transition: transform .15s ease, background .15s ease;
}
.modal__nav:hover{
  background: rgba(0,0,0,.6);
  transform: scale(1.04);
}
.modal__nav--prev{ left:14px; }
.modal__nav--next{ right:14px; }

@media (max-width: 640px){
  .modal__panel{ width: min(520px, 94vw); height: min(760px, 88vh); }
}

/* slide anim */
.modal__panel.is-animating { pointer-events: none; }
.modal__panel.slide-left  .modal__content,
.modal__panel.slide-left  .modal__bg{ animation: slideLeft .22s ease both; }
.modal__panel.slide-right .modal__content,
.modal__panel.slide-right .modal__bg{ animation: slideRight .22s ease both; }

@keyframes slideLeft{
  from{ opacity:.0; transform: translateX(-14px); }
  to  { opacity:1;  transform: translateX(0); }
}
@keyframes slideRight{
  from{ opacity:.0; transform: translateX(14px); }
  to  { opacity:1;  transform: translateX(0); }
}


/* =========================================================
   MODAL — per modal tweaks (char / staff / gadget)
========================================================= */

/* SP: char modal bg crop */
@media (max-width: 640px){
  .modal__bg{ background-position: 50% 50%; }
  #charModal.is-left  .modal__bg{ background-position: 75% 45%; }
  #charModal.is-right .modal__bg{ background-position: 25% 45%; }
}

/* SP: char modal text always left + head padding */
@media (max-width: 667px){
  #charModal .modal__content{
    justify-items: start !important;
    text-align: left !important;
  }
  #charModal .modal__content > *{ max-width: 100% !important; }
  #charModal .modal__head{ padding-right: 56px; }
}

/* STAFF modal: text bottom + bg tuning */
#staffModal .modal__panel{ display:flex; flex-direction:column; }
#staffModal .modal__content{
  height:auto;
  margin-top:auto;
  padding: 0 48px 84px;
}
@media (max-width:640px){
  #staffModal .modal__content{ padding: 0 22px 84px; }
}
#staffModal .modal__bg{ background-position: 50% 18%; }
#staffModal .modal__bg::after{
  background:
    linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,0) 58%),
    linear-gradient(to right, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.20) 100%);
}

/* CHAR modal: text bottom */
#charModal .modal__panel{ display:flex; flex-direction:column; }
#charModal .modal__content{
  height:auto !important;
  margin-top:auto !important;
  display:block !important;
  padding: 0 48px 84px !important;
  min-height: 260px;
}
@media (max-width:640px){
  #charModal .modal__content{ padding: 0 22px 84px !important; }
}

/* GADGET modal: text bottom */
#gadgetModal .modal__panel{ display:flex; flex-direction:column; }
#gadgetModal .modal__content{
  height:auto;
  margin-top:auto;
  padding: 0 48px 84px;
  min-height: 260px;
}
@media (max-width: 640px){
  #gadgetModal .modal__content{ padding: 0 22px 84px; }
}