/* ===== Toppers Banner — Standalone (no Bootstrap conflicts) ===== */
.tb-overlay * { box-sizing: border-box; }

.tb-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at center, rgba(60,15,15,0.85), rgba(20,5,5,0.95));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  opacity: 0; transition: opacity .35s ease;
}
.tb-overlay.tb-open { display: flex; opacity: 1; }

.tb-modal {
  position: relative;
  width: 100%; max-width: 1080px;
  max-height: 95vh; overflow-y: auto;
  border-radius: 24px;
  background: linear-gradient(180deg, #fbf6e8 0%, #f4ead0 100%);
  border: 3px solid #d4a017;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(212,160,23,.4);
  transform: scale(.7); opacity: 0;
  transition: transform .5s cubic-bezier(.2,.9,.3,1.2), opacity .4s ease;
}
.tb-overlay.tb-open .tb-modal { transform: scale(1); opacity: 1; }

/* Decorative corners */
.tb-corner-tl, .tb-corner-br {
  position: absolute; pointer-events: none; opacity: .3;
  background: linear-gradient(135deg, #ffd700, #d4a017);
}
.tb-corner-tl { top: 0; left: 0; width: 130px; height: 130px; border-bottom-right-radius: 100%; }
.tb-corner-br { bottom: 0; right: 0; width: 160px; height: 160px; border-top-left-radius: 100%; }

/* Close */
.tb-close {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #8B0000, #5a0000);
  color: #fff; font-size: 20px; line-height: 1;
  box-shadow: 0 4px 12px rgba(80,0,0,.5);
  transition: transform .2s;
}
.tb-close:hover { transform: scale(1.12); }

/* Header */
.tb-header {
  position: relative; overflow: hidden;
  padding: 20px 24px; text-align: center;
  background: linear-gradient(135deg, #8B0000, #5a0000);
  color: #fff;
}
.tb-school-tag {
  font-size: 12px; letter-spacing: .3em; font-weight: 600;
  color: #ffd98a; text-transform: uppercase;
}
.tb-school-name {
  margin: 6px 0 0; font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900; font-size: clamp(20px, 3.5vw, 34px);
  text-shadow: 0 2px 8px rgba(0,0,0,.5); line-height: 1.15;
}

/* Title block */
.tb-title-block { position: relative; padding: 24px 16px 6px; text-align: center; }
.tb-subtitle {
  display: inline-block; font-family: 'Playfair Display', serif;
  font-weight: 700; font-size: clamp(15px, 2vw, 22px);
  color: #1e3a8a; letter-spacing: .04em;
}
.tb-title {
  margin: 6px 0 0; font-family: 'Playfair Display', serif;
  font-weight: 900; font-style: italic;
  font-size: clamp(40px, 7vw, 72px); line-height: 1;
  background: linear-gradient(135deg, #b91c1c, #6b0f0f);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: tb-glow 3s ease-in-out infinite;
}
@keyframes tb-glow {
  0%,100% { filter: drop-shadow(0 0 4px rgba(212,160,23,.3)); }
  50%     { filter: drop-shadow(0 0 14px rgba(212,160,23,.7)); }
}

/* 100% badge */
.tb-badge {
  position: absolute; top: 12px; left: 12px;
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: radial-gradient(circle, #fbf6e8, #e8d9a8);
  border: 3px dashed #b91c1c;
  box-shadow: 0 6px 20px rgba(80,0,0,.4);
  transform: rotate(-12deg);
  animation: tb-spin 22s linear infinite reverse;
}
.tb-badge-inner { animation: tb-spin 22s linear infinite; }
.tb-badge-pct { font-family: 'Playfair Display', serif; font-weight: 900; color: #b91c1c; font-size: 18px; line-height: 1; }
.tb-badge-lbl { font-size: 10px; font-weight: 700; color: #b91c1c; letter-spacing: .12em; }
@keyframes tb-spin { to { transform: rotate(360deg); } }

/* Toppers grid */
.tb-grid {
  position: relative;
  padding: 36px 20px 44px;
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: center;
  gap: 28px;
}
.tb-grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center top, rgba(255,215,0,.15), transparent 60%);
}

.tb-card {
  position: relative; width: 200px;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(40px) scale(.85);
  animation: tb-rise .8s cubic-bezier(.2,.9,.3,1.2) forwards;
}
.tb-card[data-rank="1"] { order: 2; animation-delay: 1s; }
.tb-card[data-rank="2"] { order: 1; animation-delay: 1.2s; }
.tb-card[data-rank="3"] { order: 3; animation-delay: 1.4s; }
.tb-card[data-rank="1"] .tb-photo-wrap { width: 180px; height: 180px; }
.tb-card[data-rank="1"] { transform: translateY(-20px); }

@keyframes tb-rise {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.tb-card[data-rank="1"] { animation-name: tb-rise-1; }
@keyframes tb-rise-1 {
  to { opacity: 1; transform: translateY(-20px) scale(1); }
}

/* Medal */
.tb-medal {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 900; color: #fff;
  font-size: 20px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  animation: tb-pulse 2s ease-in-out infinite;
}
.tb-card[data-rank="1"] .tb-medal { background: linear-gradient(135deg, #ffd700, #b8860b); }
.tb-card[data-rank="2"] .tb-medal { background: linear-gradient(135deg, #d9d9d9, #8a8a8a); }
.tb-card[data-rank="3"] .tb-medal { background: linear-gradient(135deg, #d99060, #8a4a1f); }
@keyframes tb-pulse {
  0%,100% { box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 0 rgba(255,215,0,.5); }
  50%     { box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 12px rgba(255,215,0,0); }
}

/* Photo */
.tb-photo-wrap {
  width: 160px; height: 160px; border-radius: 50%;
  padding: 5px; position: relative;
  background: linear-gradient(135deg, #ffd700, #d4a017, #ffd700);
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  overflow: hidden;
}
.tb-photo-wrap::before {
  content: ""; position: absolute; inset: -50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%);
  animation: tb-shimmer 3.5s linear infinite;
}
@keyframes tb-shimmer { to { transform: translateX(50%); } }
.tb-photo {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; background: #fff;
  position: relative; z-index: 2;
  border: 3px solid #fff;
}

/* Name + marks */
.tb-name {
  margin-top: 14px; font-family: 'Playfair Display', serif;
  font-weight: 800; font-size: 17px; color: #5a0000;
  text-align: center; line-height: 1.2;
}
.tb-marks {
  margin-top: 6px; padding: 4px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #8B0000, #5a0000); color: #ffd98a;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.tb-percent {
  margin-top: 6px; font-family: 'Playfair Display', serif;
  font-weight: 900; font-size: 22px; color: #b91c1c;
}

/* Footer */
.tb-footer {
  position: relative; overflow: hidden;
  padding: 20px; text-align: center;
  background: linear-gradient(135deg, #8B0000, #5a0000);
}
.tb-congrats {
  font-family: 'Playfair Display', serif;
  font-weight: 900; font-style: italic; color: #fff;
  font-size: clamp(26px, 4vw, 44px);
  text-shadow: 0 2px 12px rgba(255,200,50,.5);
  letter-spacing: .03em;
}

/* Shimmer sweep on bars */
.tb-header::after, .tb-footer::after {
  content: ""; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,215,0,.25) 50%, transparent 70%);
  animation: tb-sweep 4s ease-in-out infinite;
}
@keyframes tb-sweep { to { left: 130%; } }

/* Mobile */
@media (max-width: 640px) {
  .tb-modal { border-radius: 18px; }
  .tb-grid { padding: 28px 12px 32px; gap: 18px; }
  .tb-card { width: 150px; }
  .tb-card[data-rank="1"] .tb-photo-wrap { width: 150px; height: 150px; }
  .tb-photo-wrap { width: 130px; height: 130px; }
  .tb-badge { width: 64px; height: 64px; top: 8px; left: 8px; }
  .tb-badge-pct { font-size: 14px; }
  .tb-badge-lbl { font-size: 8px; }
  .tb-corner-tl, .tb-corner-br { width: 80px; height: 80px; }
}