/* --- VIBRANT & PLAYFUL THEME --- */
:root {
    --primary: #FF3366; 
    --blue: #00C2CB;    
    --yellow: #FFD700;  
    --dark: #2D2D2D;
    --paper: #FDFDFD;
    
    /* Fonts Updated to proper Capitals */
    --font-title: 'Montserrat', sans-serif; 
    --font-body: 'Poppins', sans-serif;   
    --font-hand: 'Great Vibes', cursive; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); background-color: #f4f7fa; overflow-x: hidden; }

/* --- HERO SECTION --- */
.hero-section { background: white; padding: 30px 20px; text-align: center; position: relative; border-bottom: 5px solid var(--primary); }
.hero-bg-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(var(--blue) 15%, transparent 16%), radial-gradient(var(--yellow) 15%, transparent 16%); background-size: 30px 30px; background-position: 0 0, 15px 15px; opacity: 0.1; z-index: 0; }
.hero-content { position: relative; z-index: 1; }

.hero-main-logo { width: 100px; height: auto; margin: 0 auto 15px auto; display: block; filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.2)); }

.main-title { font-family: var(--font-title); font-size: 2.2rem; font-weight: 900; color: var(--dark); line-height: 1.1; margin-bottom: 10px; }
.year-pill { background: var(--primary); color: white; display: inline-block; padding: 5px 20px; border-radius: 50px; font-weight: 800; font-size: 1rem; transform: rotate(-2deg); box-shadow: 3px 3px 0px var(--dark); margin-bottom: 15px; }

/* Search Bar */
.search-wrapper { max-width: 600px; margin: 10px auto 0; display: flex; gap: 10px; }
@media (max-width: 600px) { .search-wrapper { flex-direction: column; width: 100%; } .search-wrapper input, .search-wrapper button { width: 100%; } }
.search-wrapper input { flex: 1; padding: 12px 20px; border: 3px solid var(--dark); border-radius: 15px; font-size: 1rem; font-family: var(--font-body); }
.search-wrapper button { background: var(--blue); color: white; border: 3px solid var(--dark); padding: 12px 25px; border-radius: 15px; font-weight: 800; cursor: pointer; transition: 0.2s; }

/* Tabs */
.tabs-sticky-container { background: var(--dark); position: sticky; top: 0; z-index: 100; padding: 10px 0; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.tabs-scroll-area { display: flex; justify-content: center; gap: 10px; overflow-x: auto; padding: 0 20px; white-space: nowrap; }
.tabs-scroll-area::-webkit-scrollbar { display: none; }
.tab-btn { background: #444; color: white; border: none; padding: 8px 20px; border-radius: 30px; font-weight: 700; cursor: pointer; transition: 0.3s; }
.tab-btn.active { background: var(--yellow); color: var(--dark); font-weight: 900; transform: scale(1.1); }

/* --- GRID DESKTOP (5 IN A ROW) --- */
.results-container { max-width: 1400px; margin: 0 auto; padding: 40px 10px; }
.section-header { text-align: center; margin-bottom: 10px; }
.title-cash { font-family: var(--font-title); font-weight: 900; color: #B8860B; font-size: 2rem; }
.title-merit { font-family: var(--font-title); color: #008B99; font-size: 2rem; }

.gallery-grid {
    display: grid;
    /* This forces 5 columns on desktop */
    grid-template-columns: repeat(5, 1fr); 
    gap: 25px;
    justify-content: center;
}

/* --- SWIPE INDICATOR & STRICT MOBILE/TABLET LAYOUT --- */
.swipe-indicator { display: none; font-size: 0.9rem; font-weight: 600; color: #DAA520; margin-top: 10px; animation: swipeAnim 2s infinite; }
.blue-text { color: var(--blue); }

@keyframes swipeAnim { 0%, 100% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(-10px); opacity: 1; } }

/* Any screen smaller than laptop (Tablets & Mobiles) */
@media (max-width: 1024px) { 
    .tabs-scroll-area { justify-content: flex-start; }
    
    /* FIX 1: Scales down slightly on mobile so "Imagination Awards" fits on one line */
    .title-cash, .title-merit { font-size: 1.6rem; }
    
    .gallery-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding: 20px 5vw 10px 5vw; 
        /* FIX 2: This is the magic line that stops the left side from being cut off! */
        justify-content: flex-start; 
    }
    
    /* Safely hides scrollbar without triggering cPanel warnings */
    .gallery-grid::-webkit-scrollbar { display: none; }
    
    .frame-card { 
        flex: 0 0 75vw; /* Reduced from 90vw so it sits beautifully within the screen */
        max-width: 320px; 
        scroll-snap-align: center; 
        scroll-snap-stop: always; 
        margin: 0 auto;
    }
    .swipe-indicator { display: block; } 
}
/* Premium 3D Depth Animation */
    .frame-card { 
        /* The cubic-bezier makes the snap feel bouncy and expensive like iOS */
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease-out; 
    }
    .scaled-down {
        transform: scale(0.78) !important; /* Much more obvious shrink effect */
        opacity: 0.4; 
    }
/* =========================================
   THE NEW PROPER PHOTO FRAME DESIGN
   ========================================= */

.frame-card {
    border-radius: 4px; 
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 12px; 
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}

.frame-card:hover { transform: translateY(-5px); box-shadow: 0 20px 35px rgba(0,0,0,0.25); }

.f-matting {
    background: var(--paper);
    padding: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.1); 
    border: 1px solid #eee;
}

/* --- NEW FRAME HEADER (Side-by-side Logo & Text) --- */
.f-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 8px; /* Tighter space */
}
.card-logo {
    width: 50px; /* Scaled down slightly to save vertical space */
    height: auto;
    margin-bottom: 2px; /* Tighter space */
}
.card-title {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.2;
    margin: 0;
    width: 100%;
    text-align: center;
}
.red-year {
    color: var(--primary); /* Makes it red */
    display: block; /* Forces it to drop perfectly to the center */
    margin-top: 2px;
}
.f-logo {
    width: 45px;
    height: auto;
}
.f-title {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: 1.15rem; /* Made slightly bigger */
    color: var(--dark);
    line-height: 1.1;
    margin: 0;
    text-align: left;
}

/* --- PHOTO AREA --- */
.f-photo {
    width: 100%;
    aspect-ratio: 4/5; /* Changed to Insta 4:5 ratio to save height */
    background: #e0e0e0;
    position: relative;
    overflow: hidden;
    /* NEW: Beautiful distinct photo mount effect */
    border: 4px solid #ffffff; 
    outline: 1px solid #e0e0e0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); 
}
.f-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- FOOTER (Signature) --- */
.f-footer {
    text-align: center;
    margin-top: 15px; /* Added more space above the signature */
    padding-bottom: 5px;
}
.f-signature {
    font-family: var(--font-hand);
    font-size: 2.2rem;
    color: var(--dark);
    line-height: 1.1; /* Increased from 0.8 so the tops of cursive letters don't get cut off */
}

/* --- FRAME STYLE 1: MASTER OF IMAGINATION --- */
.master-frame {
    background: linear-gradient(to bottom right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    border: 1px solid #8B6508;
}
.master-frame .f-signature { color: #8B6508; }

/* --- FRAME STYLE 2: BEST ACHIEVEMENT --- */
.achievement-frame {
    background: linear-gradient(135deg, var(--blue), var(--primary));
    border: 1px solid #111;
}
.achievement-frame .f-signature { color: var(--primary); }

/* Utilities */
.hidden { display: none; }
#no-results { text-align: center; padding: 50px; }
.reset-btn { background: var(--dark); color: white; padding: 10px 20px; margin-top: 20px; border: none; border-radius: 5px; cursor: pointer;}

/* --- DOWNLOAD BUTTON --- */
.btn-download {
    background: transparent;
    border: 1px solid #ccc;
    color: var(--dark);
    padding: 5px 15px;
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 5px;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-download:hover {
    background: var(--blue);
    color: white;
    border-color: var(--blue);
}

/* --- CANVA CERTIFICATE OVERLAYS --- */
.cert-canvas {
    position: relative;
    width: 2000px; /* High-Resolution A4 Width */
    height: 1414px; /* High-Resolution A4 Height */
    background: white;
    overflow: hidden;
}

.cert-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

/* 1. Photo Position (Exact Canva Dimensions) */
.cert-photo-overlay {
    position: absolute;
    z-index: 2;
    
    /* Keep the top and left/right percentages you already aligned perfectly! */
    top: 30.5%;     
    right: 10.8%;  
    
    /* THE EXACT SIZE FIX */
    width: 8.65%;  
    height: 14.52%; 
    
    overflow: hidden;
}

.cert-photo-overlay img { 
    width: 100%; 
    height: 100%; 
    /* This is the magic command that auto-crops the image to fill the box perfectly */
    object-fit: cover; 
}

/* 2. Name Position (First Line) */
.cert-name-overlay {
    position: absolute;
    z-index: 2;
    top: 41%; 
    left: 0;
    width: 100%;
    text-align: center;
    font-family: var(--font-hand); 
    font-size: 110px; 
    
    /* THE BOLD FIXES */
    font-weight: bold; /* Tells the browser to use bold */
    -webkit-text-stroke: 0.5px #222; /* Secret trick: Adds a 2-pixel thick outline to the letters to make them extra heavy! */
    
    color: #222;
    text-transform: capitalize !important; 
}
/* 3. Institution Position (Second Line) */
.cert-inst-overlay {
    position: absolute;
    z-index: 2;
    top: 51.5%; /* Pushed UP to sit on the second line */
    left: 0;
    width: 100%;
    text-align: center;
    font-family: var(--font-title); /* Uses the bold, uppercase-style font */
    font-size: 45px; /* The exact size the name used to be */
    font-weight: 800;
    color: #333;
}

/* 4. Group Blank Position */
.cert-group-overlay {
    position: absolute;
    z-index: 2;
    top: 59.8%; /* Moved DOWN to touch the line perfectly */
    left: 64.6%; /* Moved LEFT to sit exactly over the ___ */
    font-family: var(--font-body);
    font-size: 30px;
    font-weight: 800;
    color: #8B0000; 
}

/* 5. QR Code Position (Green Box) */
.cert-qr-overlay {
    position: absolute;
    z-index: 2;
    top: 73.5%; /* Adjust to fit inside the green brackets */
    left: 9%;
    width: 9%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cert-qr-overlay img { width: 100%; height: auto; aspect-ratio: 1/1; mix-blend-mode: multiply; }
.cert-qr-text {
    margin-top: 12px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    color: #000;
    white-space: nowrap;
}

/* --- 3D FLIP CARD EFFECT --- */
.frame-card {
    cursor: pointer;
    perspective: 1000px; /* Gives the 3D depth */
}

.f-matting.flip-inner {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0; 
}

.f-matting.flip-inner.flipped {
    transform: rotateY(180deg);
}

/* FRONT - Kept relative so it holds the card's natural height */
.flip-front {
    position: relative;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #fffdf5; 
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    z-index: 2; /* Keeps front on top initially */
    box-sizing: border-box;
}

/* BACK - Made absolute so it hides exactly behind the front */
.flip-back {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%; /* Matches the exact size of the front */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #fffdf5;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

/* --- BACKSIDE CONTENT STYLING --- */
.back-sub { font-family: var(--font-title); color: #B8860B; font-size: 12px; margin: 0; text-transform: uppercase; letter-spacing: 2px;}
.back-name { font-family: var(--font-hand); font-size: 45px; color: var(--dark); margin: 5px 0 15px 0; line-height: 1;}
.back-stats { display: flex; gap: 10px; width: 100%; justify-content: center; margin-bottom: 15px; }
.stat-box { background: rgba(0,0,0,0.03); padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.05); width: 45%; }
.stat-box span { display: block; font-size: 10px; color: #777; text-transform: uppercase; font-weight: bold;}
.stat-box strong { font-size: 18px; color: var(--dark); font-family: var(--font-title); }
.back-school { font-size: 11px; color: #555; margin-bottom: 15px; font-family: var(--font-body);}
.back-school strong { color: var(--dark); font-size: 14px; }
.back-reward-box { background: #fff8e1; color: #d35400; padding: 10px 15px; border-radius: 12px; border: 2px dashed #f1c40f; width: 90%; margin: 0 auto; }
.back-reward-box span { font-size: 10px; text-transform: uppercase; font-weight: bold; }
.back-reward-box strong { font-size: 22px; font-weight: 900; display: block; margin-top: 2px;}

.merit-box { background: #e0f7fa; color: #00838f; border-color: #4dd0e1; }

/* --- NEW ELEMENTS: STATE HIGHLIGHTS & LANDSCAPE LOGO --- */

/* Ensures the front tag stays locked inside the photo box */
.f-photo { 
    position: relative; 
} 

/* The Bold Highlight Badge on the Front Photo */
.photo-state-tag {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: #d35400; /* Rich orange/gold highlight */
    color: white;
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    z-index: 5;
}

/* The Landscape Logo on the Back */
.back-logo {
    width: 140px; /* Wider to accommodate the landscape shape */
    height: auto;
    margin-bottom: 12px;
    object-fit: contain;
}

/* The Bold State Highlight on the Back */
.back-state {
    background: #222; /* Dark contrast background */
    color: #f1c40f; /* Bold gold text */
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 900;
    padding: 5px 15px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- SMOOTH SECURITY MODAL --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* The fix for the glitchy lightning flash! */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 350px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-top: 5px solid #27ae60; /* Green Top Border */
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

/* Green Secure Lock */
.modal-icon { font-size: 40px; color: #27ae60; margin-bottom: 15px; }

.modal-content h3 { margin: 0 0 10px 0; color: #2c3e50; font-family: var(--font-title); font-size: 20px;}
.modal-content p { font-size: 13px; color: #555; margin-bottom: 20px; line-height: 1.5;}

#access-code-input {
    width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 8px;
    font-size: 16px; text-align: center; font-weight: bold; text-transform: uppercase;
    margin-bottom: 10px; box-sizing: border-box; transition: all 0.3s;
}
#access-code-input:focus { border-color: #27ae60; outline: none; box-shadow: 0 0 8px rgba(39, 174, 96, 0.2); }
#security-error { color: #e74c3c; font-size: 13px; font-weight: bold; margin: 0 0 15px 0; }

.modal-buttons { display: flex; gap: 10px; justify-content: center; }
.btn-cancel { background: #eee; color: #333; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold;}
.btn-verify { background: #27ae60; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.3s;}
.btn-verify:hover { background: #219653; }

/* Help Instructions */
.security-help { margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px; font-size: 11px !important; color: #7f8c8d !important; }
.security-help strong { color: #2c3e50; }

/* Rocket Animation */
#generation-title { color: #27ae60; }
#generation-status { font-weight: bold; margin-top: 15px; font-size: 15px; color: #333;}
#generation-delay { color: #d35400; font-size: 12px; font-weight: bold; background: #fff3e0; padding: 10px; border-radius: 8px;}

/* --- UPGRADED SMOOTH ROCKET ANIMATION --- */
.rocket-container { 
    position: relative; 
    height: 70px; 
    margin: 20px auto; 
    background: #f4f6f9; /* Sleek pill-shaped track */
    border-radius: 35px; 
    overflow: hidden; 
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.05);
}

.rocket-icon { 
    font-size: 32px; 
    color: #e74c3c; /* Premium vibrant red */
    position: absolute; 
    top: 18px; 
    left: 0;
    /* Using transform for GPU-accelerated buttery smoothness */
    transform: translateX(-50px) rotate(45deg); 
    animation: smoothRocket 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; 
    filter: drop-shadow(-3px 3px 3px rgba(0,0,0,0.2)); /* 3D depth shadow */
}

/* Moving speed lines for the illusion of extreme speed */
.rocket-container::before, 
.rocket-container::after {
    content: '';
    position: absolute;
    height: 3px;
    background: #cbd5e1;
    border-radius: 3px;
    animation: speedLines 0.8s linear infinite;
    opacity: 0.7;
}

.rocket-container::before { top: 20px; width: 40px; animation-delay: 0s; }
.rocket-container::after { bottom: 20px; width: 25px; animation-delay: 0.4s; }

/* The smooth flight path */
@keyframes smoothRocket {
    0% { transform: translateX(-50px) translateY(5px) rotate(45deg); }
    15% { transform: translateX(20px) translateY(-3px) rotate(48deg); }
    85% { transform: translateX(280px) translateY(-3px) rotate(45deg); }
    100% { transform: translateX(400px) translateY(5px) rotate(45deg); }
}

/* The rushing wind effect */
@keyframes speedLines {
    0% { transform: translateX(400px); }
    100% { transform: translateX(-100px); }
}

/* --- PROFESSIONAL FOOTER STYLES --- */
.site-footer {
    background: #1a252f; /* Deep, premium dark blue/grey */
    color: #ecf0f1;
    padding: 60px 0 0 0;
    font-family: var(--font-body), sans-serif;
    margin-top: 60px;
    border-top: 5px solid #d35400; /* Rich orange accent line at the top */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo {
    width: 160px;
    height: auto;
    margin-bottom: 20px;
}

.about-col p {
    font-size: 13px;
    line-height: 1.6;
    color: #bdc3c7;
    margin-bottom: 20px;
    text-align: justify;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.05);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.social-links a:hover {
    background: #f1c40f;
    color: #1a252f;
    border-color: #f1c40f;
    transform: translateY(-3px); /* Cute hover bounce */
}

.footer-col h4 {
    color: #f1c40f;
    font-size: 18px;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    font-family: var(--font-title), sans-serif;
    position: relative;
    padding-bottom: 10px;
    letter-spacing: 1px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: #f1c40f;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a, .footer-links li {
    color: #bdc3c7;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-links a:hover {
    color: #f1c40f;
    transform: translateX(5px); /* Smooth slide right on hover */
}

.cred-list i {
    color: #27ae60; /* Secure green color for the shields */
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #bdc3c7;
    line-height: 1.5;
}

.footer-contact i {
    color: #f1c40f;
    margin-top: 4px;
}

.footer-bottom {
    background: #11181f; /* Even darker strip at the very bottom */
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: #7f8c8d;
}

.footer-bottom p {
    margin: 0;
}

/* --- TAP TO FLIP HINT --- */
.flip-hint-wrapper {
    text-align: center;
    width: 100%;
    margin-bottom: 25px;
}

.flip-hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(241, 196, 15, 0.15); /* Soft gold background */
    color: #b8860b; /* Deep gold text */
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-family: var(--font-title);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(241, 196, 15, 0.4);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.flip-hint i {
    font-size: 16px;
    color: #d35400; /* Rich orange finger icon */
}

/* --- ADMIN BAR --- */
.admin-top-bar {
    background: #f8f9fa;
    border-bottom: 1px solid #e1e2e6;
    width: 100%;
}
.btn-admin {
    background: none;
    border: none;
    color: #34495e;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}
.btn-admin:hover {
    color: #2980b9;
}

/* --- PC LAYOUT FIX: COMPACT CARD BACKS TO PREVENT OVERLAPPING --- */
@media (min-width: 1025px) {
    .flip-back {
        padding: 15px 10px !important; /* Slightly tighter padding */
    }
    .back-logo {
        width: 110px !important; /* Slightly smaller logo */
        margin-bottom: 5px !important; /* Tighter spacing */
    }
    .back-name {
        font-size: 32px !important; /* Scale cursive down to fit safely */
        margin: 5px 0 5px 0 !important;
    }
    .back-state {
        margin-bottom: 8px !important;
        padding: 3px 12px !important;
    }
    .back-school {
        margin-bottom: 8px !important;
        line-height: 1.1 !important;
    }
    .back-stats {
        margin-bottom: 8px !important;
        gap: 5px !important;
    }
    .back-reward-box {
        padding: 6px 10px !important;
        width: 95% !important;
    }
    .back-reward-box strong {
        font-size: 18px !important;
    }
    /* Specifically tightens the new "Top 100" banner margins on PC */
    .achievement-frame .back-stats div {
        margin-bottom: 5px !important;
        padding: 5px 10px !important;
    }
}

/* --- LAYOUT FIXES FOR BEST ACHIEVEMENT --- */

/* Adds space directly below the Best Achievement Header */
#merit-section .section-header {
    margin-bottom: 30px !important; 
}

/* Prevents the cards from touching the edges of the screen on PC */
#merit-grid, #cash-grid {
    padding-left: 15px;  
    padding-right: 15px;
}

/* --- ULTIMATE PERFORMANCE & SPEED OPTIMIZATIONS --- */

/* 1. Force the Graphics Card (GPU) to handle the 3D Cards */
.frame-card {
    will-change: transform, box-shadow;
    transform: translateZ(0); /* Secret trigger for Hardware Acceleration */
    -webkit-backface-visibility: hidden; /* Stops flickering */
    backface-visibility: hidden;
}

.f-matting.flip-inner {
    will-change: transform;
    transform: translateZ(0); 
}

/* 2. Lock the grid layout so the browser doesn't recalculate the whole page on scroll */
.gallery-grid {
    -webkit-overflow-scrolling: touch; /* Buttery smooth momentum scrolling on iPhones */
    contain: layout paint; /* Tells browser this box is isolated from the rest of the site */
}

/* 3. Optimize the images so they don't lag while flipping */
.f-photo img {
    transform: translateZ(0);
    will-change: transform;
}

/* --- GRAND REVEAL  --- */
#reveal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.4); 
    
    /* Slightly reduced blur from 35px to 25px for a massive speed boost */
    backdrop-filter: blur(25px); 
    -webkit-backdrop-filter: blur(25px);
    
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* THE FIX: We removed 'filter' from the transition. Browsers hate animating blurs! */
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.9s ease-out;
    
    /* THE GPU KICK: Forces the Graphics Card to handle the overlay */
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* The floating glass ID card in the center */
.reveal-glass-card {
    text-align: center;
    background: rgba(255, 255, 255, 0.85);
    padding: 45px 60px;
    border-radius: 30px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.06), inset 0 0 0 2px rgba(255,255,255,0.8);
    animation: floatContainer 4s ease-in-out infinite alternate;
}

.genz-gradient-text {
    font-family: var(--font-title);
    font-size: 2.2rem;
    letter-spacing: 2px;
    margin-bottom: 5px;
    text-transform: uppercase;
    /* Animated Gradient Text */
    background: linear-gradient(135deg, var(--primary), var(--blue), var(--yellow), var(--primary));
    background-size: 300% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradientShift 4s linear infinite;
}

.sub-text {
    font-family: var(--font-body);
    color: #7f8c8d;
    margin-bottom: 30px;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 1.1rem;
}

/* --- THE ART WAVE LOADER --- */
.art-icon-loader {
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 32px;
}

.art-icon-loader i {
    color: #e2e8f0; /* Default greyed out */
    animation: popIcon 1.5s infinite;
}

/* Staggered animation delays for the "wave" effect */
.art-icon-loader i:nth-child(1) { animation-delay: 0.0s; }
.art-icon-loader i:nth-child(2) { animation-delay: 0.2s; }
.art-icon-loader i:nth-child(3) { animation-delay: 0.4s; }
.art-icon-loader i:nth-child(4) { animation-delay: 0.6s; }
.art-icon-loader i:nth-child(5) { animation-delay: 0.8s; }

/* Each icon pops into a specific brand color */
@keyframes popIcon {
    0%, 100% { transform: scale(1) translateY(0); filter: grayscale(100%); opacity: 0.6; }
    20% { transform: scale(1.4) translateY(-12px); filter: grayscale(0%); opacity: 1; color: var(--primary); }
    40% { color: var(--blue); }
    60% { color: var(--yellow); }
}

@keyframes gradientShift {
    to { background-position: 300% center; }
}

@keyframes floatContainer {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-12px); }
}

/* --- THE ZOOM BLAST EFFECT --- */
.reveal-hidden {
    /* translateZ(0) keeps the zoom locked to the GPU */
    transform: scale(1.3) translateZ(0); 
    opacity: 0; 
    pointer-events: none;
    /* We deleted 'filter: blur(20px)' here. The opacity fade does the work smoothly now! */
}