/* STYLING FOR SHOWROOM */

/* ===== Champions gallery frame (same as before) ===== */
.champs-wrap{ max-width:925px; margin:22px auto 28px; padding:0 16px; }
.champs-wrap .intro{ text-align:center; max-width:62ch; margin:0 auto 18px; }
.champs-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* exactly 3 across on desktop */
  gap: 20px;                              /* a touch more breathing room */
}

/* drop to 2 across on tablets */
@media (max-width: 980px){
  .champs-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* single column on phones */
@media (max-width: 600px){
  .champs-grid{ grid-template-columns: 1fr; }
}


.champ-card{
  background:#fcfcfb; border-radius:14px;
  outline:1px solid rgba(0,0,0,.04);
  border:1px solid rgba(167,124,207,.18);
  box-shadow:0 4px 12px rgba(70,56,104,.10);
  padding:10px; text-align:center;
  transition:transform .12s ease, box-shadow .18s ease;
}
.champ-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(70,56,104,.16),
             0 0 0 3px rgba(90,201,180,.10) inset;
}

.champ-card .thumb{
  position:relative;
  width:100%; aspect-ratio:1/1;
  background:
    radial-gradient(var(--dot) .8px, transparent 1.2px),
    var(--bg);
  background-size:14px 14px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.champ-card .thumb img{
  max-width:100%; max-height:100%;
  object-fit:contain; display:block;
}

/* ===== Overlay badge system ===== */
.badges{                     /* container for positioning */
  pointer-events:none;       /* overlays aren’t clickable */
}
.badge{
  position:absolute;
  width:52px; height:52px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.28));
}

/* Positions */
.badge.pos-bl{ left:6px;  bottom:6px; }   /* trophies bottom-left */
.badge.pos-br{ right:6px; bottom:6px; }   /* ribbons  bottom-right */

/* stack trophies (bottom-left) independently */
.badges .tb .badge.pos-bl:nth-child(2){ transform: translate(22%, -22%); }
.badges .tb .badge.pos-bl:nth-child(3){ transform: translate(44%, -44%); }

/* fan ribbons (bottom-right) a little wider so two don't overlap */
.badges .rb .badge.pos-br { right:0px; bottom:8px; }

.badges .rb .badge.pos-br:nth-child(1){
  transform: none;               /* base ribbon */
  z-index: 1;
}
.badges .rb .badge.pos-br:nth-child(2){
  transform: translate(-50%, 0%); /* shift left/up more */
  z-index: 2;
}


/* Files (in images/showroom/) — map each class to a file */
.badge.sgch { background-image:url('../images/showroom/sgch-trophy.png'); }
.badge.ugch { background-image:url('../images/showroom/ugch-trophy.png'); }

.badge.pl-fbc  { background-image:url('../images/showroom/pl-fbc-ribbon.png'); }
.badge.pl-gpc  { background-image:url('../images/showroom/pl-gpc-ribbon.png'); }
.badge.psc-gpc { background-image:url('../images/showroom/psc-gpc-ribbon.png'); }
.badge.psc-xpc { background-image:url('../images/showroom/psc-xpc-ribbon.png'); }
.badge.psc-chpc{ background-image:url('../images/showroom/psc-chpc-ribbon.png'); }
.badge.psc-chpc{ background-image:url('../images/showroom/psc-chpc-ribbon.png'); }

/* Caption + chips (same vibe as before) */
.champ-card figcaption{ margin-top:8px; line-height:1.35; }
.champ-name{ font-weight:700; color:var(--text); }

.chips{
  margin-top:6px; display:flex; gap:6px;
  justify-content:center; flex-wrap:wrap;
}
.chip{
  font-family:'Raleway', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:#333;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:2px 8px;
}
.chip.champion{ border-color:rgba(167,124,207,.35); }
.chip.citizen{  border-color:rgba(90,201,180,.35); }

/* Tiny responsive nudge for very small screens */
@media (max-width:420px){
  .badge{ width:30px; height:30px; }
}

.champ-showname{
  font-weight:600;
  font-size:.85rem;
  color:#4a4456;
  line-height:1.3;
  margin-bottom:2px;
  font-style:italic;
}
.champ-callname{
  font-weight:700;
  color:var(--text);
  font-size:.9rem;
}

.pager{
  display:flex; justify-content:center; align-items:center;
  gap:8px; margin:18px 0 6px;
  font-family:'Raleway', system-ui, sans-serif;
}
.pager a, .pager span{
  font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:6px 10px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(0,0,0,.08);
  background: var(--pill-bg);
  color: var(--pill-text);
}
.pager .pager-num.current{
  background: color-mix(in srgb, var(--title) 14%, #fff 86%);
  color: var(--title);
  border-color: rgba(167,124,207,.35);
}
.pager .pager-btn.is-disabled{
  opacity:.45; pointer-events:none;
}
.pager-ellipsis{ padding:0 4px; opacity:.6; }
