/* ============================================================
   modal.css — Detail Modal Overlay
   ============================================================ */

#modal-overlay{
  position:fixed;inset:0;background:rgba(5,3,20,.82);backdrop-filter:blur(8px);
  z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:16px;animation:fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

#modal-box{
  background:var(--modal-bg);border:1px solid rgba(155,89,182,.4);
  border-radius:22px;max-width:640px;width:100%;max-height:88vh;
  overflow-y:auto;padding:36px;position:relative;
  animation:slideIn .3s cubic-bezier(.175,.885,.32,1.275);
  box-shadow:0 0 60px rgba(155,89,182,.35);
}
#modal-box::-webkit-scrollbar{width:4px}
#modal-box::-webkit-scrollbar-thumb{background:rgba(155,89,182,.35);border-radius:4px}

.modal-close{
  position:absolute;top:14px;right:14px;
  background:rgba(155,89,182,.15);border:1px solid rgba(155,89,182,.3);
  border-radius:50%;width:34px;height:34px;color:var(--dim);
  cursor:pointer;font-size:.85em;transition:all .2s;
}
.modal-close:hover{background:rgba(155,89,182,.3);color:var(--text)}

/* Modal content styles */
.modal-hero{text-align:center;padding:10px 0 24px}
.modal-emoji{font-size:3.5em;display:block;margin-bottom:10px}
.modal-num{font-size:4em;font-weight:bold;background:linear-gradient(135deg,var(--pl),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.modal-title{font-size:1.4em;color:var(--gold);margin:8px 0 5px}
.modal-sub{font-size:.82em;color:var(--dim);letter-spacing:.06em}
.modal-section{margin-bottom:20px}
.modal-section-title{font-size:.75em;text-transform:uppercase;letter-spacing:.12em;color:var(--pl);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(155,89,182,.2)}
.modal-body{color:var(--text);line-height:1.9;font-size:.91em}
.modal-body p{margin-bottom:12px}
.modal-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.modal-tag{background:rgba(155,89,182,.12);border:1px solid rgba(155,89,182,.3);border-radius:20px;padding:4px 13px;font-size:.76em;color:var(--pl)}
.modal-tag.gold{background:rgba(240,192,64,.1);border-color:rgba(240,192,64,.28);color:var(--gl)}
.modal-tag.red{background:rgba(231,76,60,.1);border-color:rgba(231,76,60,.28);color:#e74c3c}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.modal-item{background:rgba(255,255,255,.04);border:1px solid rgba(155,89,182,.2);border-radius:10px;padding:12px}
.modal-item-lbl{font-size:.68em;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.modal-item-val{font-size:.9em;color:var(--text);line-height:1.55}
.modal-warning{background:rgba(231,76,60,.08);border:1px solid rgba(231,76,60,.25);border-radius:11px;padding:14px;margin-top:12px}
.modal-warning-title{font-size:.73em;color:#e74c3c;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.modal-warning p{color:var(--text);font-size:.86em;line-height:1.75}
.modal-gold-box{background:linear-gradient(135deg,rgba(240,192,64,.08),rgba(155,89,182,.06));border:1px solid rgba(240,192,64,.22);border-radius:11px;padding:14px;margin-top:12px}
.modal-gold-title{font-size:.73em;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.modal-gold-box p{color:var(--text);font-size:.87em;line-height:1.8}

@media(max-width:500px){
  #modal-box{padding:24px 16px}
  .modal-grid{grid-template-columns:1fr}
}