/* Gold theme styles for popup/modal and ornamental frames */
:root{
  --gold-light:#ffd46a;
  --gold-mid:#c78c2f;
  --gold-dark:#6b430f;
  --ivory:#f6eedf;
  --gold-bg:#0b0705;
}

/* Apply when body or modal has .gold-theme */
.gold-theme .modal-content,
.modal.gold-theme .modal-content{
  background:
    linear-gradient(180deg, rgba(255,241,210,0.03), rgba(0,0,0,0.6)),
    url('../assets/textures/gold-foil.png');
  background-size: cover;
  background-blend-mode: overlay;
  color:var(--ivory);
  border-radius:18px;
  padding:28px;
  border:6px solid rgba(200,140,40,0.85);
  box-shadow: 0 28px 70px rgba(0,0,0,0.6), inset 0 3px 12px rgba(255,235,180,0.06);
  position:relative;
  overflow:hidden;
}

.gold-theme .modal-header,
.modal.gold-theme .modal-header{ background:transparent; border-bottom:0; }

.gold-theme .modal-body,
.modal.gold-theme .modal-body{ color:var(--ivory); text-shadow:0 2px 8px rgba(0,0,0,0.6); }

.gold-theme .portrait-frame,
.modal.gold-theme .portrait-frame{
  display:inline-block;
  background: linear-gradient(180deg, rgba(255,245,205,0.95), rgba(210,160,60,0.95));
  padding:8px;
  border-radius:12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.6);
  border:3px solid rgba(255,255,255,0.06);
}

.gold-theme .portrait-frame img,
.modal.gold-theme .portrait-frame img{
  display:block;
  border-radius:8px;
  width:220px; height:300px; object-fit:cover;
  box-shadow: 0 18px 40px rgba(0,0,0,0.65);
  border:4px solid rgba(255, 223, 130, 0.95);
}

.gold-theme .gold-heading,
.modal.gold-theme .gold-heading{
  font-weight:800; font-size:20px; text-align:center; margin-top:18px; margin-bottom:6px;
  background: linear-gradient(90deg,var(--gold-light),var(--gold-mid),#b87724);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 4px 14px rgba(0,0,0,0.45);
}

.gold-theme .gold-sub,
.modal.gold-theme .gold-sub{ text-align:center; color:var(--ivory); line-height:1.6; }

.gold-theme .btn-gold,
.modal.gold-theme .btn-gold{
  display:inline-block; background: linear-gradient(180deg,#ffdf86,#c98f2a); color:#2b1606; padding:10px 18px; border-radius:28px; font-weight:700; border:1px solid rgba(0,0,0,0.12);
  box-shadow: 0 8px 22px rgba(201,140,25,0.25); transition: transform .18s ease, filter .18s ease;
}
.gold-theme .btn-gold:hover{ transform: translateY(-3px); filter:brightness(1.03); }

/* Shimmer overlay for metallic sheen */
.gold-theme .modal-content::after,
.modal.gold-theme .modal-content::after{
  content:""; position:absolute; top:-40%; left:-60%; width:220%; height:200%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 60%);
  transform: rotate(-25deg); animation: goldShimmer 6s infinite; mix-blend-mode: overlay; pointer-events:none;
}
@keyframes goldShimmer{ 0%{ transform: translateX(-60%) rotate(-25deg); } 100%{ transform: translateX(60%) rotate(-25deg); } }

/* Decorative divider */
.gold-theme .gold-divider, .modal.gold-theme .gold-divider{ width:100%; height:6px; background: linear-gradient(90deg, transparent, rgba(255,216,120,0.6), transparent); margin:18px 0 6px; opacity:0.95; }

/* Responsive tweaks */
@media (max-width:800px){
  .gold-theme .portrait-frame img, .modal.gold-theme .portrait-frame img{ width:140px; height:200px; }
  .gold-theme .modal-content, .modal.gold-theme .modal-content{ padding:18px; border-radius:12px; }
}

/* Helper classes (use in markup) */
.portrait-frame{ display:inline-block; }
.gold-heading{ display:block; }
.gold-sub{ display:block; }
.gold-divider{ display:block; }

/* Enhanced metallic edge lines and rounded double-border like the screenshot */
.gold-theme .honor-modal-content{
  border-radius:26px;
  box-shadow: 0 50px 140px rgba(0,0,0,.85), 0 6px 30px rgba(212,175,55,.06) inset, 0 0 0 2px rgba(212,175,55,.06) inset;
}
.gold-theme .honor-modal-content::before{
  content:''; position:absolute; left:8px; right:8px; top:8px; bottom:8px; border-radius:20px; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.28), inset 0 0 0 6px rgba(0,0,0,.28);
  z-index:1;
}
/* thin decorative inner tracks (double-line) */
.gold-theme .honor-modal-content::after{
  content:''; position:absolute; right:12px; top:12px; bottom:12px; width:6px; border-radius:6px; pointer-events:none;
  background: linear-gradient(180deg, rgba(212,175,55,0.0) 0%, rgba(212,175,55,0.8) 45%, rgba(212,175,55,0.0) 100%);
  box-shadow: 0 0 0 1px rgba(255,230,160,.06) inset;
  opacity:0.95; z-index:2;
}

/* Small inner corner strokes */
.gold-theme .honor-modal-content .corner-stroke{ position:absolute; right:18px; top:18px; width:18px; height:18px; border-radius:6px; box-shadow: 0 0 0 2px rgba(212,175,55,.6) inset; pointer-events:none; z-index:3; }

/* Close button: gold circular with glowing X */
.gold-theme .honor-close{ background: linear-gradient(135deg,#f6df9a,#d4af37 60%); border:2px solid rgba(255,245,190,.25); color:#2b1606; box-shadow: 0 10px 26px rgba(0,0,0,.6), 0 0 22px rgba(212,175,55,.08); }
.gold-theme .honor-close:before, .gold-theme .honor-close:after{ background:#2b1606; box-shadow:0 0 10px rgba(0,0,0,.6); }
.gold-theme .honor-close:hover{ background: linear-gradient(135deg,#ffeaad,#e0b84a 65%); border-color:#d4af37; transform: rotate(0deg) scale(1.03); }

/* Make the portrait frames pop with thin outer lines */
.gold-theme .portrait-frame{ box-shadow: 0 30px 60px rgba(0,0,0,.75), 0 0 0 3px rgba(212,175,55,.45), inset 0 2px 8px rgba(255,255,255,.12); }