/* Hall of Fame - Standalone Styles */
/* Global guards to prevent horizontal scroll */
*{ box-sizing: border-box; }
*::before,*::after{ box-sizing: inherit; }
html,body{ overflow-x: hidden; }
:root{
	--ink:#0b1b2b;--ink-70:rgba(11,27,43,.7);--blue-500:#2C3B68;--blue-700:#27345D;
}
/* Animated background enhancements */
.hall{ position:relative; overflow: hidden;margin-top: 20px; }
.hall::before,.hall::after{ content:""; position:absolute; inset:auto; border-radius:50%; filter: blur(30px); opacity:.35; pointer-events:none; }
.hall::before{ width:520px; height:520px; top:-140px; left:-120px; background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.25), rgba(37,99,235,0) 70%); animation: driftHall 14s ease-in-out infinite; }
.hall::after{ width:640px; height:640px; bottom:-180px; right:-160px; background: radial-gradient(circle at 70% 70%, rgba(15,23,42,.20), rgba(15,23,42,0) 70%); animation: driftHall 16s ease-in-out -5s infinite; }
@keyframes driftHall{ 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(10px,-12px) } }

.hall-wrap{ position: relative; }
.hall-head{ text-align:center; display:grid; gap:6px; margin-bottom: 16px; }
.hall-head h2{ margin:0; font-size: clamp(24px,3.4vw,36px); background: linear-gradient(90deg, var(--blue-500), var(--blue-700)); -webkit-background-clip:text; background-clip:text; color: transparent; }
.hall-head p{ margin:0; color: var(--ink-70); }

/* Subtle abstract shapes */
.hall-bg{ position:absolute; inset:0; pointer-events:none; }
.hall-bg .gear,.hall-bg .circuit{ position:absolute; border:1px dashed rgba(44,59,104,.18); border-radius:20px; }
.hall-bg .gear.g1{ width:180px; height:180px; top:-40px; left:-20px; transform: rotate(12deg); }
.hall-bg .gear.g2{ width:220px; height:220px; bottom:-60px; right:-30px; transform: rotate(-16deg); }
.hall-bg .circuit.c1{ width:40%; height:32%; top:30%; left:50%; transform: translateX(-50%); border-style:dotted; opacity:.5 }

/* Grid */
.hall-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position:relative; perspective: 900px; }
@media (max-width: 1100px){ .hall-grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 800px){ .hall-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 520px)
{
	body{
		overflow-x: hidden;
	}
	 .hall-grid{ grid-template-columns: 1fr; } 
	
	}

/* Student Card */
.student-card{ background:
	linear-gradient(#ffffff, #ffffff) padding-box,
	linear-gradient(135deg, rgba(37,99,235,.35), rgba(14,165,233,.25)) border-box;
	border:1px solid transparent;
	padding:16px; display:grid; place-items:center; text-align:center; gap:8px; box-shadow: 0 8px 22px rgba(11,27,43,.08); transition: transform .22s ease, box-shadow .25s ease, filter .25s ease; position:relative; overflow:hidden; }
.student-card::after{ content:""; position:absolute; inset:-2px; border-radius:24px; background: conic-gradient(from 150deg, rgba(44,59,104,.15), rgba(44,59,104,0), rgba(44,59,104,.15)); filter: blur(12px); z-index:0; opacity:.4; transition: opacity .2s ease; }
.student-card:hover{ transform: translateY(-8px) scale(1.015) rotateX(2deg); box-shadow: 0 22px 46px rgba(15,23,42,.20); filter: saturate(1.03); }
.student-card:hover::after{ opacity:.6 }

.avatar{ width:110px; height:110px; border-radius:999px; display:grid; place-items:center; background: radial-gradient(circle at 30% 30%, #eaf1ff, #ffffff); border:1px solid #e6eef8; padding:8px; position:relative; z-index:1; box-shadow: 0 12px 28px rgba(44,59,104,.12); }
.avatar::before{ content:""; position:absolute; inset:-6px; border-radius:999px; background: radial-gradient(circle, rgba(86,127,245,.35), rgba(86,127,245,0) 60%); filter: blur(8px); z-index:-1; }
.avatar img{ width:100%; height:100%; object-fit: cover; border-radius:999px; display:block; }

.student-name{ margin:8px 0 0; font-size:18px; font-weight:800; color: var(--ink); position:relative; z-index:1; }
.student-age{ margin:0 0 6px; color: var(--ink-70); font-size: 13px; position:relative; z-index:1; }

/* Hover micro-anim */
.student-card:hover .avatar{ box-shadow: 0 16px 36px rgba(37,99,235,.25); }

/* Highlight ribbon */
.student-card{ overflow: visible; }
.ribbon{ position:absolute; top:10px; left:-6px; background: linear-gradient(135deg, #2563eb, #0ea5e9); color:#fff; font-weight:800; font-size:12px; padding:6px 12px; border-radius:10px; box-shadow: 0 10px 24px rgba(37,99,235,.35); }
.ribbon::after{ content:""; position:absolute; right:-8px; top:0; border-width: 10px 0 10px 8px; border-style: solid; border-color: transparent transparent transparent #0c4a9a; filter: brightness(1.1); }

/* Sparkle accents around grid */
.sparkle{ position:absolute; width:8px; height:8px; border-radius:50%; background: radial-gradient(circle, #60a5fa, transparent 70%); opacity:.6; filter: blur(0.5px); animation: twinkle 6s ease-in-out infinite; pointer-events:none; }
.sparkle.s1{ top:6%; left:12%; }
.sparkle.s2{ top:48%; right:8%; animation-delay:-2s }
.sparkle.s3{ bottom:10%; left:22%; animation-delay:-3.2s }
@keyframes twinkle{ 0%,100%{ transform: scale(1); opacity:.4 } 50%{ transform: scale(1.4); opacity:.8 } }

/* Layout helpers */
.container{ width:min(1120px,92%); margin:0 auto; }

/* Age groups */
.age-group{ margin: 18px 0 24px; position: relative; }
.age-title{ margin: 0 0 12px; font-size: clamp(18px, 2.6vw, 22px); color: var(--ink); font-weight: 800; display: flex; align-items: center; gap: 10px; }
.age-title::after{ content:""; flex:1; height: 1px; background: linear-gradient(90deg, rgba(44,59,104,.22), rgba(44,59,104,0)); border-radius: 999px; }
.age-title::before{ content:""; position:absolute; left:0; bottom:-4px; width:64px; height:6px; background: linear-gradient(90deg, rgba(37,99,235,.45), rgba(14,165,233,.25), rgba(37,99,235,0)); border-radius:999px; }

/* Achievement text */
.student-achv{ margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--blue-700); background: #eef3ff; border: 1px solid #e6eef8; padding: 6px 10px; border-radius: 999px; box-shadow: 0 8px 18px rgba(44,59,104,.08); }

/* Gender-based avatar accents */
.avatar.girl::before{ background: radial-gradient(circle, rgba(236,72,153,.35), rgba(236,72,153,0) 60%); }
.avatar.boy::before{ background: radial-gradient(circle, rgba(59,130,246,.35), rgba(59,130,246,0) 60%); }

/* CTA Section (bottom) */
.hall-cta{ background: radial-gradient(800px 400px at 20% 10%, rgba(30,144,255,.12), transparent), #ffffff; padding: 40px 0 60px; }
.cta-box{ position: relative; overflow: hidden; background: linear-gradient(135deg, #0f172a, #0b1220 10%, #1e3a8a 40%, #0ea5e9 100%); color: #fff; border-radius: 24px; padding: 28px; display: grid; place-items: center; text-align: center; gap: 10px; box-shadow: 0 22px 50px rgba(2,6,23,.45); }
.cta-box h3{ margin:0; font-size: clamp(20px, 3.2vw, 32px); }
.cta-box p{ margin: 0 0 8px; opacity: .95; }
.cta-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.cta-actions .btn-primary{ display:inline-block; padding:12px 18px; border-radius:12px; background:#ffffff; color:#0f172a; text-decoration:none; font-weight:800; box-shadow: 0 12px 28px rgba(255,255,255,.35); }
.cta-actions .btn-primary:hover{ filter: brightness(0.95); transform: translateY(-2px); }
.cta-actions .btn-outline{ display:inline-block; padding:12px 18px; border-radius:12px; border: 2px solid #fff; color:#fff; text-decoration:none; font-weight:800; }
.cta-actions .btn-outline:hover{ background: rgba(255,255,255,.12); }

/* Media fixes to avoid overflow on small devices */
@media (max-width: 560px){
	/* keep ribbon inside card to avoid page scroll */
	.ribbon{ left:8px; }
	/* ensure images never exceed viewport */
	img,video{ max-width:100%; height:auto; }
}