/* PATH: /public/css/home.css */

.vx-home{
  display:block;
}

.vx-home-hero{
  position: relative;
  margin-top: -6px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--vx-brand), var(--vx-brand-2));
  box-shadow: 0 18px 40px rgba(12,10,20,.14);
  display: none !important;
}

.vx-hero-inner{
  padding: 18px 16px 28px 16px;
  color: #fff;
}

.vx-hero-title{
  font-weight: 950;
  letter-spacing: -0.8px;
  font-size: 18px;
  opacity: .95;
}

.vx-hero-search{
  display:flex;
  gap:10px;
  margin-top: 12px;
  align-items:center;
}

.vx-searchbox{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}

.vx-searchbox i{
  font-size: 16px;
  opacity: .9;
}

.vx-searchinput{
  flex:1;
  border:0;
  outline:0;
  background: transparent;
  color: #fff;
}
.vx-searchinput::placeholder{
  color: rgba(255,255,255,.70);
}

.vx-filterbtn{
  width: 46px;
  height: 46px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.16);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, background .12s ease;
}
.vx-filterbtn i{ font-size: 18px; }
.vx-filterbtn:hover{ background: rgba(255,255,255,.20); }
.vx-filterbtn:active{ transform: scale(.98); }

/* Wave */
.vx-hero-wave{
  height: 28px;
  background:
    radial-gradient(120% 200% at 50% -40%, rgba(255,255,255,.30), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.0));
}

/* blocks spacing */
.vx-home-block{
  margin-top: 14px;
}

.vx-sec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 0 0 10px 0;
}
.vx-sec-right{
  white-space: nowrap;
}

/* Categories */
.vx-cat-strip{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom: 20px;
  scroll-snap-type: x mandatory;
}

.vx-cat-item{
  border:0;
  background: transparent;
  scroll-snap-align: start;
  display:flex;
  flex-direction: column;
  align-items:center;
  min-width: 92px;
  gap:8px;
}

.vx-cat-ico{
  width: 64px;
  height: 64px;
  border-radius: 22px;
  background: rgba(138,5,190,.10);
  border: 1px solid var(--vx-border-2);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--vx-brand);
}
.vx-cat-ico i{ font-size: 22px; }

.vx-cat-label{
  font-size: 12px;
  font-weight: 900;
  color: var(--vx-text);
  opacity: .88;
}

/* Invite card */
.vx-invite-card{
  border-radius: 22px;
  padding: 16px;
  color:#fff;
  background: linear-gradient(135deg, var(--vx-brand), var(--vx-brand-2));
  display:flex;
  align-items: stretch;
  gap:12px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(12,10,20,.14);
}

.vx-invite-left{
  flex:1;
  min-width:0;
}

.vx-invite-title{
  font-weight: 950;
  letter-spacing: -0.7px;
  font-size: 18px;
}

.vx-invite-sub{
  margin-top: 6px;
  opacity: .86;
  font-size: 13px;
}

.vx-invite-btn{
  margin-top: 12px;
  border: 0;
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
}

.vx-invite-art{
  width: 96px;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.vx-invite-bubble{
  position:absolute;
  width: 74px;
  height: 74px;
  border-radius: 28px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  transform: rotate(12deg);
}
.vx-invite-bubble.b2{
  width: 54px; height: 54px;
  right: -8px; top: 8px;
  opacity: .85;
}
.vx-invite-bubble.b3{
  width: 44px; height: 44px;
  left: 6px; bottom: 4px;
  opacity: .75;
}

/* Guest onboarding (same slot do invite) */
.vx-onboard-card{
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--vx-brand), var(--vx-brand-2));
  box-shadow: 0 18px 40px rgba(12,10,20,.14);
}

.vx-onboard-pane{
  padding: 16px;
  color: #fff;
  min-height: 192px;
  display: flex;
  flex-direction: column;
}

.vx-onboard-kicker{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  opacity: .86;
  font-weight: 800;
}

.vx-onboard-title{
  margin-top: 4px;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.vx-onboard-text{
  margin-top: 8px;
  font-size: 13px;
  opacity: .88;
}

.vx-onboard-btn{
  margin-top: auto;
  align-self: flex-start;
  border: 0;
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
}

.vx-onboard-dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: 0;
}

.vx-onboard-dots [data-bs-target]{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  opacity: .55;
}

.vx-onboard-dots .active{
  opacity: 1;
}

/* Carousel base (Home uses existing .vx-carousel) */
.vx-carousel{
  display:flex;
  gap:12px;
  overflow:auto;
  padding-bottom:20px;
  scroll-snap-type:x mandatory;
}

.vx-game-card{
  min-width: 176px;
  scroll-snap-align: start;
  border-radius: 18px;
  background: var(--vx-surface);
  border: 1px solid var(--vx-border-2);
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.vx-game-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(70% 90% at 20% 10%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(70% 90% at 80% 90%, rgba(138,5,190,.12), transparent 60%);
  opacity: .85;
}

.vx-game-poster{
  height: 92px;
  border-radius: 16px;
  background:
    radial-gradient(80% 100% at 25% 10%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(80% 100% at 75% 90%, rgba(138,5,190,.16), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.03), rgba(11,18,32,.00));
  border: 1px solid var(--vx-border-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 34px;
  color: var(--vx-text);
}

/* Composer pill */
.vx-composer-pill{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
}