/* =========================================
   Gaming Hub - Welcome Modal
   ========================================= */

/* Modal sizing & glass container */
.gh-welcome-modal .modal-dialog.gh-welcome-dialog{
  max-width: 880px;
}

.gh-welcome-content{
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Card shell */
.gh-welcome-card{
  border-radius: 22px;
  overflow: hidden;
  background: rgba(15, 15, 18, 0.86);
  border: 1px solid rgba(255, 223, 0, 0.14);
  box-shadow:
    0 30px 90px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,223,0,.05) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* HERO */
.gh-welcome-hero{
  position: relative;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255,223,0,.10);
  overflow: hidden;
}

/* Animated-ish background layer */
.gh-welcome-hero-bg{
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(900px 260px at 20% 20%, rgba(255,223,0,.18), transparent 60%),
    radial-gradient(900px 260px at 80% 10%, rgba(184,156,1,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,223,0,.06), rgba(15,15,18,.0) 60%),
    radial-gradient(700px 280px at 50% 120%, rgba(255,223,0,.12), transparent 60%);
  filter: saturate(1.05);
  pointer-events: none;
}

/* Subtle “motherboard” lines via CSS only (no image needed) */
.gh-welcome-hero-bg::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    linear-gradient(90deg, rgba(255,223,0,.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,223,0,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .18;
  transform: rotate(-6deg);
  mask-image: radial-gradient(circle at 30% 10%, #000 0 45%, transparent 70%);
}

/* Close button */
.gh-welcome-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,223,0,.16);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.9);
  display: grid;
  place-items: center;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  z-index: 3;
}
.gh-welcome-close:hover{
  transform: translateY(-1px);
  background: rgba(255,223,0,.08);
  border-color: rgba(255,223,0,.28);
}

/* Hero inner layout */
.gh-welcome-hero-inner{
  position: relative;
  z-index: 2;
}

/* Author row */
.gh-welcome-author{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 14px;
}

.gh-welcome-avatar{
  width: 52px;
  height: 52px;
  /* border-radius: 16px;
  background: rgba(255,223,0,.08);
  border: 1px solid rgba(255,223,0,.22);
  box-shadow: 0 12px 30px rgba(0,0,0,.45); */
  display:grid;
  place-items:center;
  overflow:hidden;
}
.gh-welcome-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gh-welcome-author-meta{ min-width: 0; }
.gh-welcome-author-line{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.gh-welcome-author-name{
  font-weight: 700;
  color: #fff;
  letter-spacing: .2px;
}

.gh-welcome-badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,223,0,.10);
  border: 1px solid rgba(255,223,0,.25);
  color: #FFDF00;
  font-size: .85rem;
  line-height: 1;
}

.gh-welcome-sub{
  color: rgba(255,255,255,.65);
  font-size: .88rem;
  margin-top: 2px;
}

/* Headline */
.gh-welcome-title{
  font-family: Outfit, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 6px 0 6px;
}
.gh-welcome-lead{
  color: rgba(255,255,255,.75);
  margin: 0 0 12px;
  max-width: 58ch;
}

/* Chips */
.gh-welcome-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gh-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(22,23,27,.70);
  border: 1px solid rgba(255,223,0,.12);
  color: rgba(255,255,255,.85);
  font-size: .86rem;
}

/* BODY */
.gh-welcome-body{
  padding: 18px 22px 20px;
}

.gh-welcome-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 14px;
}

.gh-welcome-step{
  display:flex;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(22,23,27,.70);
  border: 1px solid rgba(255,223,0,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.gh-welcome-step:hover{
  transform: translateY(-2px);
  border-color: rgba(255,223,0,.20);
  background: rgba(22,23,27,.82);
}

.gh-welcome-step-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,223,0,.09);
  border: 1px solid rgba(255,223,0,.18);
  color: #FFDF00;
  flex: 0 0 auto;
}

.gh-welcome-step-title{
  color:#fff;
  font-weight: 700;
  margin-bottom: 2px;
}

.gh-welcome-step-desc{
  color: rgba(255,255,255,.70);
  font-size: .92rem;
  line-height: 1.25rem;
}

/* CTA bar */
.gh-welcome-cta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,223,0,.08), rgba(22,23,27,.70));
  border: 1px solid rgba(255,223,0,.14);
}

.gh-welcome-cta-title{
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
}

.gh-welcome-cta-sub{
  color: rgba(255,255,255,.72);
  font-size: .9rem;
}

.gh-welcome-cta-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons (match your gold accent) */
.btn.gh-btn-primary{
  background: #FFDF00;
  border: 1px solid rgba(255,223,0,.45);
  color: #0F0F12;
  font-weight: 800;
  border-radius: 12px;
  padding: 9px 12px;
  box-shadow: 0 10px 28px rgba(255,223,0,.10);
}
.btn.gh-btn-primary:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}

.btn.gh-btn-outline{
  border: 1px solid rgba(255,223,0,.22);
  color: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 9px 12px;
  background: rgba(0,0,0,.15);
}
.btn.gh-btn-outline:hover{
  background: rgba(255,223,0,.08);
  border-color: rgba(255,223,0,.32);
}

.btn.gh-btn-ghost{
  border: 1px dashed rgba(255,223,0,.22);
  color: rgba(255,255,255,.78);
  border-radius: 12px;
  padding: 9px 12px;
  background: transparent;
}
.btn.gh-btn-ghost:hover{
  background: rgba(255,223,0,.06);
  border-color: rgba(255,223,0,.30);
  color: rgba(255,255,255,.92);
}

/* Footer note */
.gh-welcome-footer-note{
  margin-top: 10px;
  color: rgba(255,255,255,.62);
  font-size: .9rem;
  text-align: center;
  padding: 6px 8px;
}


/* =========================================
   Welcome Carousel (Tips)
   ========================================= */

.gh-welcome-carousel-wrap{
  margin-bottom: 14px;
}

.gh-welcome-carousel-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.gh-welcome-carousel-title{
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  display:flex;
  align-items: baseline;
  gap: 10px;
}

.gh-welcome-carousel-sub{
  color: rgba(255,255,255,.62);
  font-weight: 600;
  font-size: .9rem;
}

.gh-welcome-carousel-controls{
  display:flex;
  gap: 8px;
}

.gh-welcome-carousel-btn{
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,223,0,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.gh-welcome-carousel-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,223,0,.08);
  border-color: rgba(255,223,0,.30);
}

.gh-welcome-carousel-btn-primary{
  background: rgba(255,223,0,.10);
  border-color: rgba(255,223,0,.28);
  color: #FFDF00;
}
.gh-welcome-carousel-btn-primary:hover{
  background: rgba(255,223,0,.14);
}

.gh-welcome-carousel{
  padding: 12px;
  border-radius: 18px;
  background: rgba(22,23,27,.50);
  border: 1px solid rgba(255,223,0,.10);
}

/* Make slides not “jump” in height */
.gh-welcome-carousel .carousel-item{
  min-height: 220px;
}

.gh-welcome-dots{
  position: static;
  margin: 10px 0 0;
  display:flex;
  gap: 8px;
  justify-content: center;
  align-items:center;
}

.gh-welcome-dots [data-bs-target]{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,223,0,.25);
  background: rgba(255,223,0,.10);
  opacity: 1;
}
.gh-welcome-dots .active{
  width: 26px;
  background: rgba(255,223,0,.65);
  border-color: rgba(255,223,0,.50);
}

/* Chips -> clickable feel */
.gh-chip.gh-chip-link{
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.gh-chip.gh-chip-link:hover{
  transform: translateY(-1px);
  background: rgba(255,223,0,.08);
  border-color: rgba(255,223,0,.22);
}


/* =========================================
   Background blur + focus (WELCOME MODAL ONLY)
   ========================================= */

/*
  Bootstrap appends the backdrop as a sibling after the modal in the DOM.
  This selector targets ONLY the backdrop created for the welcome modal.
*/
.gh-welcome-modal ~ .modal-backdrop.show{
  opacity: 1 !important;

  /* Heavy blur for focus */
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* Modal pop animation (subtle) */
.gh-welcome-modal.show .gh-welcome-card{
  animation: ghWelcomePop 0.25s ease-out;
}

@keyframes ghWelcomePop{
  from{
    transform: scale(0.965);
    opacity: 0;
  }
  to{
    transform: scale(1);
    opacity: 1;
  }
}


/* Responsive */
@media (max-width: 768px){
  .gh-welcome-grid{ grid-template-columns: 1fr; }
  .gh-welcome-cta{
    flex-direction: column;
    align-items: stretch;
  }
  .gh-welcome-cta-actions{
    justify-content: space-between;
  }
}