/* ===== SHOWCASE (Stable Slider: scroll-snap) ===== */

.showcase{ padding: 10px 0 4px; }

.showcaseGrid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:12px;
  align-items:start;
}
@media (max-width: 980px){
  .showcaseGrid{ grid-template-columns:1fr; }
}

.kicker{
  display:flex; align-items:center; gap:10px;
  color: rgba(154,164,175,.92);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.kDot{
  width:6px; height:6px; border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(201,162,39,.10);
}

/* Main shell */
.showcaseMain{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1000px 420px at 20% 0%, rgba(201,162,39,.09), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: var(--shadow3);
  overflow:hidden;
  padding:12px;
}

.showcaseTop{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap;
  padding: 2px 2px 10px;
}

.showcaseActions{ display:flex; gap:8px; }
.sBtn{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(243,245,247,.92);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.sBtn:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.26); }
.sBtn i{ width:18px; height:18px; color: rgba(201,162,39,.92); }

/* Stage */
.scStage{
  position:relative;
  border-radius: 20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Track: works even WITHOUT JS */
.scTrack{
  display:flex;
  gap:12px;
  padding:0;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.scTrack::-webkit-scrollbar{ height:0; }
.scTrack{ scrollbar-width:none; }

/* Each slide */
.scCard{
  scroll-snap-align:start;
  flex: 0 0 100%;
  position:relative;
  min-height: 360px;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(0,0,0,.12);
}

/* Responsive heights */
@media (max-width: 980px){
  .scCard{ min-height: 300px; }
}
@media (max-width: 560px){
  .scCard{ min-height: 260px; }
}

/* Media */
.scMedia{
  position:absolute; inset:0;
  overflow:hidden;
}
.scMedia img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(.92) contrast(1.08);
  transform: scale(1.03);
  transition: transform .9s ease;
}
.scCard:hover .scMedia img{ transform: scale(1.07); }

.scShade{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.86));
}
.scGrid{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 320px at 20% 10%, rgba(201,162,39,.18), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 18px);
  opacity:.16;
  mix-blend-mode: overlay;
}

/* Placeholder */
.scPh{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:
    radial-gradient(900px 340px at 20% 10%, rgba(201,162,39,.12), transparent 55%),
    radial-gradient(700px 280px at 85% 15%, rgba(154,164,175,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.28));
}
.scPhInner{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  color: rgba(154,164,175,.92);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter: blur(10px);
}
.scPhInner i{ width:18px; height:18px; color: rgba(201,162,39,.92); }
.scMedia.hasImg .scPh{ display:none; }

/* Caption */
.scCaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 14px;
}
.scCaption h3{
  margin:0 0 6px;
  font-family:"Bebas Neue", sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:20px;
  line-height:1.05;
}
.scCaption p{
  margin:0 0 10px;
  color: rgba(154,164,175,.92);
  font-size:13px;
  line-height:1.55;
  max-width: 88ch;
}
.scLive{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* HUD */
.scHud{
  position:absolute;
  left:12px; right:12px; top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  pointer-events:none;
}
.scPills{ display:flex; gap:8px; pointer-events:auto; }
.scDot{
  width:10px; height:10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.scDot:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.30); }
.scDot.is-active{
  background: rgba(201,162,39,.85);
  border-color: rgba(201,162,39,.40);
}
.scCounter{
  pointer-events:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(243,245,247,.90);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
}

/* Side panel (same as before) */
.showcaseSide{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: var(--shadow3);
  overflow:hidden;
  padding:12px;
}
.sideHead{ margin-bottom:10px; }
.sideNote{
  margin:8px 0 0;
  color: rgba(154,164,175,.92);
  font-size:13px;
  line-height:1.5;
}

.ownedGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 520px){
  .ownedGrid{ grid-template-columns: 1fr; }
}

.ownedCard{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding:12px;
  min-height: 120px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.ownedCard:hover{
  transform: translateY(-2px);
  border-color: rgba(201,162,39,.22);
  background: rgba(0,0,0,.18);
}

.ownedLogo{
  width: 92px;
  height: 44px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
}
.ownedLogo img{
  max-width:100%;
  max-height:100%;
  filter: grayscale(1) brightness(1.6);
  opacity: .55;
  transition: opacity .18s ease, filter .18s ease;
}
.ownedCard:hover .ownedLogo img{
  opacity: .72;
  filter: grayscale(1) brightness(1.9);
}

.ownedName{
  font-family:"Bebas Neue", sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:14px;
  color: rgba(243,245,247,.92);
}
.ownedSub{
  margin-top:6px;
  color: rgba(154,164,175,.92);
  font-size:12px;
  letter-spacing:.04em;
}

.ownedCard.is-soon{
  border-style:dashed;
  opacity:.92;
}
.ownedCard.is-soon .ownedName{
  color: rgba(201,162,39,.85);
}

.sideFoot{ margin-top:10px; }
.sideFoot .btn{ width:100%; justify-content:center; }