CSS
:root {
    --primary: #010307; /* Black */
    --accent: #ffb800;  /* Gold */
    --text: #333;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(0,0,0,0.08);

/*
  --primary-blue: #1d3557;
  --accent-red: #e63946;
  --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #FFAA17;
  --secondary: #BDBDBF;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #F4F5F8;
  --dark: #222429;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: "Roboto", sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
*/
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

/* Modern Reset & Typography */
body {
    font-family: 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-light);
    color: var(--text);
    line-height: 1.6;
}


.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* STICKY NAV */
.navbar {
    position: sticky;
    top: 0;

    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
    url('../img/ice-texture.webp');
    background-size: cover;
    background-position: center;

    backdrop-filter: blur(10px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(10px);

    z-index: 1000;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    border-bottom: 1px solid rgba(255, 215, 0, 0.2); /* Faint gold bottom edge */
    transition: all 0.3s ease;
}

.navbar .container { display: flex; justify-content: space-between; align-items: center; }

.logo { font-weight: 900; font-size: 1.5rem; text-decoration: none; color: var(--primary); }
.logo span { color: var(--accent); }

.nav-links { display: flex; list-style: none; gap: 2rem; }
.nav-links a { text-decoration: none; color: var(--primary); font-weight: 500; transition: 0.3s; }
.nav-links a:hover { color: var(--accent); }

/* HERO SECTION */
.hero {
    /* Set the height (50% of the viewport height) */
    min-height: 50vh;

    /* Starts as gold in the center and fades to black at the edges */
    background: radial-gradient(ellipse at center, rgba(255, 184, 0, 0.75) 0%, rgba(66, 66, 66, 0.7) 15%, rgba(22, 22, 22, 0.7) 25%, rgba(7, 7, 7, 0.7) 50%, rgba(0, 0, 0, .9) 80%), url('../img/ice-texture.webp');

    /* BACKGROUND PROPERTIES:
       Cover: The image always fills the space (stretches or crops)
       No-Repeat: Prevents tiling
       Center: Keeps the texture centered on all screen sizes
    */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    /* FLEXBOX ALIGNMENT Centers all content text and buttons within the hero */
    display: flex;
    align-items: center;
    padding: 40px 0;
    color: white; /* Ensures text is readable over the dark/gold overlay */
}


/* INNER CONTAINER - The Split Logic */
.hero-container {
    display: flex;
    flex-direction: row; /* Desktop: Side-by-side */
    align-items: center;
    max-width: 95%;
    margin: 0 auto;
    padding-left: 2%; 
    padding-right: 2%;
    width: 100%;
}

/* LEFT HALF: TEXT */
.hero-text {
    flex: 1; /* Takes up 50% */
    text-align: left; /* Left align for desktop */
    padding-right: 10px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-size: 1.1rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
    margin-bottom: 20px;
}

.hero-text h1 { font-size: 3.5rem; margin-bottom: 10px; color: rgba(255, 255, 255); 
    line-height: 1.1;
}

/* RIGHT HALF: IMAGE */
.hero-image {
    flex: 1; /* Takes up 50% */
    display: flex;
    justify-content: flex-end;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 2px solid #ffb81c; /* Signature Gold */
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column; /* Stacks image and text vertically */
        text-align: center; /* Centers text for better mobile aesthetic */
    }

    .hero-text {
        padding-right: 0;
        margin-bottom: 30px; /* Space between text and image */
        order: 1; /* Text on top */
    }

    .hero-image {
        order: 2; /* Image on bottom */
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }

    .guidelines-grid { grid-template-columns: 1fr; text-align: left; }
    .guideline-group li::before { left: 0; }
}


/* Specific styles for the shortened hero */
.hero.hero-small {
    min-height: auto !important; 
    height: auto !important;
    padding: 10px 10px 10px 10px;   /* Less vertical space */
    margin-top: 0;
    margin-bottom: 0;
    display: block !important; 
}

.hero-small .hero-container {
    padding-top: 5px; /* Adjust based on your navbar height */
    gap: 5px;
}

.hero-small h1 {
    font-size: 3rem; /* Smaller heading for the sub-page */
    margin-bottom: 10px;
}

/* Shrink the image on the contact page so it doesn't push the form down */
.hero-small .hero-image img {
    max-height: 375px; 
    width: auto;
}

/* Hide extra buttons if you don't need them on the contact header */
.hero-small .hero-btns {
    display: none;
}



.btn { padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: bold; transition: 0.3s; display: inline-block; }

.btn.primary { background: var(--accent); color: var(--primary); }

.btn.secondary { border: 2px solid white; margin-left: 10px; margin-top: 5px; margin-right: 10px;
/* The Gradient: Fades from a bright gold to a deeper gold */
background: linear-gradient(180deg, #FFD700 0%, #D4AF37 80%);

color: #111111;
font-family: 'Oswald', sans-serif; 
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1.2px;
text-shadow: -1px -1px 0 #5e5e5e98, 1px -1px 0 #5e5e5e98, -1px 1px 0 #5e5e5e98, 1px 1px 0 #5e5e5e98;

/* Recommended additions for a "Premium" button feel */
padding: 12px 24px;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 4px 6px #7e7e7e98;
transition: all 0.2s ease;
}

.btn:hover { transform: translateY(-3px); opacity: 0.9; }

.btn.secondary:hover {
    /* Slightly darkens the gold when the mouse is over it */
    background: linear-gradient(180deg, #FFAA17 0%, #E69500 100%);
    
    /* Adds a subtle lift effect */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 170, 23, 0.4);
}


/* MODERN CARD GRID */
.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 40px 20px;
    max-width: 100%; /* Allows it to use the full width of the hero section */
    margin: 0 auto;
}

.trading-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--shadow);
}

.trading-card:hover { transform: translateY(-12px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

.card-img-wrapper { position: relative; background: #eee; height: 320px; display: flex; align-items: center; justify-content: center; }
.card-img-wrapper img { max-width: 85%; height: auto; border-radius: 5px; }

.badge { position: absolute; top: 15px; right: 15px; background: var(--accent); padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; }

.card-body { padding: 20px; }
.card-body h3 { font-size: 1.1rem; margin-bottom: 5px; }
.card-body p { font-size: 0.9rem; color: #777; }

.details-link { display: inline-block; margin-top: 15px; color: var(--primary); font-weight: bold; text-decoration: none; }

.img-fluid {
    max-width: 100%;
    height: auto;
  }


.indent-me {
    text-indent: 2em; /* 'em' is a responsive unit based on font size */
}


/* TARGETING ALL H2 TAGS */
h2 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.1; /* Slightly tighter for a "Headline" look */
    text-transform: uppercase;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: .75rem;
    
    /* ADDED: Font-family suggestion for a more athletic look */
    font-family: 'Oswald', sans-serif; 
    
    /* ADDED: Ensuring the color matches your brand */
    color: #0a0a0a;
    text-shadow: 2px 2px 4px #ffb800;
}

/* RESPONSIVE SCALING */
@media (max-width: 1200px) {
    h2 {
        /* This keeps the font fluid between 1200px and mobile widths */
        font-size: calc(1.475rem + 2.7vw);
        margin-bottom: 2rem; /* Reduced margin for smaller screens */
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

.cardlinks {
    width: 100%;       
    aspect-ratio: 2.5 / 3.5;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-size: cover;
    background-position: center;
    border-radius: 30px;
    border: 3px solid #ffb800;
    overflow: hidden;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 184, 0, 0.2);
    filter: grayscale(20%) contrast(110%);
}

/* Unique Backgrounds for each card */
.card-1 {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)), 
                url('../img/1985-o-pee-chee-9-mario-lemieux.webp');
                background-size: contain; 
                background-repeat: no-repeat;
                background-color: #000; /* Fills the "empty" space with black */       
}

.card-2 {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)), 
                url('../img/now-playing.webp');
    background-size: contain; 
    background-repeat: no-repeat;
    background-color: #000; /* Fills the "empty" space with black */            
}

.card-3 {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)), 
                url('../img/UDGameJersey.webp');
                background-size: contain; 
                background-repeat: no-repeat;
                background-color: #000; /* Fills the "empty" space with black */       
}

.card-4 {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)), 
                url('../img/CarvingsSuperPower.webp');
                background-size: contain; 
                background-repeat: no-repeat;
                background-color: #000; /* Fills the "empty" space with black */       
}

.cardlinks a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Ensures it sits above images and text */

    background: radial-gradient(circle, rgba(0,0,0,0.6) 0%, transparent 80%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;

    padding-bottom: 50px;

    text-decoration: none;
    color: white;
    text-align: center;
}

.cardlinks::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: 0.5s;
}

.cardlinks:hover {
    transform: translateY(-10px) scale(1.15);
    /* transform: scale(1.15); Slight pop out effect */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 184, 0, 0.5);
    filter: grayscale(0%) contrast(100%);
}

.cardlinks:hover::after {
    left: 100%; /* Makes a 'shimmer' pass over the card on hover */
}

.card-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);
    gap: 15px; /* Space between the cards */
    justify-items: center; /* Centers cards horizontally in their grid cell */
    padding: 10px 20px 40px 20px;
    max-width: 1600px;
    margin: 0 auto;
}

.cardlinks h3 {
    /* 1. The Gold Gradient */
    background: linear-gradient(
        45deg, 
        #bf953f, 
        #fcf6ba, 
        #b38728, 
        #fbf5b7, 
        #aa771c
    );
    
    /* 2. The Magic Trick: This hides the background everywhere EXCEPT inside the text */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. Make the actual text color transparent so the gradient shows through */
    color: transparent;
    
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 5px;
    
    /* 4. Optional: A subtle shadow to make the 'gold' pop off the card image */
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));

    background-size: 200% auto; /* Stretch gradient for movement */
    animation: shine 4s linear infinite;
}

.cardlinks p {
    font-size: 0.9rem; /* Slightly smaller sub-text */
    padding: 0 10px;  /* Prevents text from hitting the edges */

    color: #ffffff;
    font-weight: 500;
    
    /* This creates a 1px black outline by placing shadows at 
       Top-Left, Top-Right, Bottom-Left, and Bottom-Right */
    text-shadow: 
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0px 0px 8px rgba(0,0,0,0.9); /* This adds a soft black cloud behind the text */
}

.foil-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* The "Rainbow" Foil Gradient */
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 30%,
        rgba(255, 0, 255, 0.1) 40%,
        rgba(0, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    
    background-size: 200% 200%;
    background-position: 0% 0%;
    
    /* This makes it blend into the photo like a real hologram */
    mix-blend-mode: overlay; 
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none; /* Let clicks pass through to the link */
    z-index: 1;
}

/* On Hover: Show the foil and move it */
.cardlinks:hover .foil-overlay {
    opacity: 1;
    animation: foilMove 2s infinite linear;
}

@keyframes foilMove {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 200%; }
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


body {
    animation: fadeInPage 0.6s ease-out;
}

@media (max-width: 1400px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .card-grid {
        /* Switch to 1 column on mobile */
        grid-template-columns: 1fr; 
        gap: 20px;
    }

    .cardlinks {
        /* Allow the width to be fluid on small screens */
        width: 100%;
        max-width: 350px; /* Keeps it from getting comically wide on large phones */
        height: 500px; /* Shorter height for mobile balance */
        filter: grayscale(0%) contrast(100%); /* Full color on phones */
    }

}


/* MOVE YOUR HOVER EFFECTS INSIDE THIS BLOCK */
@media (hover: hover) {
    .cardlinks:hover {
        transform: translateY(-15px) scale(1.1);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 
                    0 0 30px rgba(255, 184, 0, 0.5);
        filter: grayscale(0%) contrast(100%);
    }

    .cardlinks:hover::after {
        left: 100%;
    }
}

/* TOUCH DEVICE SPECIFIC (Optional) */
@media (hover: none) {
    .cardlinks {
        filter: grayscale(0%) contrast(100%);
        /* Optional: Add a subtle 'tap' feedback */
    }
    .cardlinks:active {
        background-color: rgba(255, 255, 255, 0.1);
        transform: scale(0.98); 
    }
}    


/* TARGETING ALL H3 TAGS */
h3 {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: rgba(0, 0, 0);
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px #ffb800;
    text-transform: uppercase;
}

/* RESPONSIVE SCALING */
@media (max-width: 1200px) {
    h3 {
        /* This keeps the font fluid between 1200px and mobile widths */
        font-size: calc(1.475rem + 2.7vw);
        margin-bottom: 2rem; /* Reduced margin for smaller screens */
    }
}


#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000; /* Match your site's dark theme */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffb800;
    font-family: 'Oswald', sans-serif;
    transition: opacity 0.5s ease;
}

/* A pulsing gold light effect */
.shimmer {
    width: 50px;
    height: 50px;
    border: 5px solid #333;
    border-top: 5px solid #ffb800;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.foundation-section {
    position: relative; /* Essential for aligning the background layer */
    padding: 80px 20px;
    margin-top: 40px;
    background: #ffffff; /* The base background color */
    overflow: hidden;    /* Keeps the ice texture from spilling out */
    z-index: 1;          /* Establishes the stacking context */
}

/* The Ice Texture Layer */
.foundation-section::before {
    content: "";          /* Required for pseudo-elements */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 1. Add the Image */
    background-image: url('../img/ice-texture.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 2. Make it Lighter (Tint it White) */
    background-color: rgba(255, 255, 255, 0.5); /* A white "overlay" */
    background-blend-mode: overlay; /* Blends the texture with the color */
    
    /* 3. Make it Semi-Transparent */
    opacity: 0.5;        /* 15% opacity makes it subtle and readable */
    
    /* 4. Put it behind the text */
    z-index: -1; 
}

.foundation-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap; /* Stack on mobile */
}

.foundation-image {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

.foundation-image img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    /* Subtle shadow to make the logo/image pop */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

.foundation-content {
    flex: 1.5;
    min-width: 300px;
}

.foundation-content h2 {
    margin-bottom: 10px;
    font-size: 2.5rem;
}

.foundation-content h5 {
    color: #ffb81c; /* Using the 80s Gold we discussed */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.foundation-content p {
    color: #333;
    line-height: 1.8;
    margin-bottom: 15px;
    font-size: 1rem;
    text-indent: 0;
    max-width: 95%; /* Keeps the lines from getting too long */
    margin: 0 auto;
    font-family: 'Oswald', sans-serif; 
}

/* Specifically target ONLY the first paragraph to kill the indent */
.foundation-content p:first-of-type {
    text-indent: 0 !important;
}

/* Only targets the first paragraph in the foundation section */
.foundation-content p:first-of-type::first-letter {
    /* This tells the browser: 'Make this letter 2 lines tall' */
    -webkit-initial-letter: 2;
    initial-letter: 2;
    float: left;
    font-size: 4rem;
    line-height: 0.8;
    font-weight: bold;
    color: #ffb81c;

/* This creates a consistent "wall" for both Line 1 and Line 2 */
    margin-right: 12px; 
    
/* Remove any negative margins you added previously */
    margin-left: 0;
    padding: 0;

    margin-top: 6px;
 
    text-shadow: 
    -1.5px -1.5px 0 #000,  
     1.5px -1.5px 0 #000,
    -1.5px  1.5px 0 #000,
     1.5px  1.5px 0 #000;
}

.foundation-section h4 {
    text-align: center;      /* The primary fix */
    width: 100%;             /* Ensures it takes up the full width of the container */
    margin: 0 auto 20px;     /* Centers it and adds space below */
    
    /* Thematic Styles */
    color: #ffb81c;          /* Pittsburgh Gold */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: 
        -1.5px -1.5px 0 #000,  
         1.5px -1.5px 0 #000,
        -1.5px  1.5px 0 #000,
         1.5px  1.5px 0 #000;
}

/* Call to Action Button */
.foundation-btn {
    display: inline-block;
    background: #000;
    color: #ffb81c;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid #ffb81c;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.foundation-btn:hover {
    background: #ffb81c;
    color: #000;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 184, 28, 0.4);
}

.foundation-content ul {
    padding-left: 1.5rem; /* This provides just enough room for the bullets */
    margin-left: 0;
    list-style-position: inside;
}

.foundation-content li {
    padding-left: 50px;
    margin-bottom: 10px; /* Adds a bit of space between the bullet points */
}


/* Mobile Responsiveness */
@media (max-width: 768px) {
    .foundation-container {
        flex-direction: column;
        text-align: center;
    }
}


.debate-section {
    position: relative;
    padding: 80px 20px;
    background: #111; /* Dark background to contrast the Foundation section */
    color: white;
    overflow: hidden;
    z-index: 1; /* Base layer */
}

/* Reusing the Ice Texture but making it darker for this section */
.debate-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/ice-texture.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-color: rgba(199, 199, 199, 0.5); /* A white "overlay" */
    background-blend-mode: overlay; /* Blends the texture with the color */
   
    opacity: 0.8; 
    z-index: -1; 
    pointer-events: none;
}

.debate-header {
    width: 100%; /* Forces titles to take their own row above the columns */
    text-align: center;
    margin-bottom: 15px;
}

.debate-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}

.debate-image-block {
    flex: 1;
    min-width: 300px;
}

.main-debate-img {
    width: 100%;
    border-radius: 10px;
    border: 2px solid #333;
}

/* The Link under the image */
.debate-link-box {
    margin-top: 15px;
    text-align: center;
}

.debate-link-box a {
    color: #0c0391; /* Modern blue */
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
    font-size: 1.1rem;
}

.debate-content {
    flex: 1.2;
    min-width: 300px;
}

.debate-subtitle {
    color: #ffffff;
    text-transform: uppercase;
    text-align: center; /* Keep left-aligned for this layout */
    margin-bottom: 10px;
    text-shadow: 
    -1.5px -1.5px 0 #041E42, 1.5px -1.5px 0 #041E42, 
    -1.5px 1.5px 0 #041E42, 1.5px 1.5px 0 #041E42,
    2px 2px 4px rgba(0, 0, 0, 0.5);
}

.debate-content p {
    line-height: 1.8;
    font-size: 1rem;
    background: rgba(226, 226, 226, 0.85); /* White glass effect */
    display: inline-block;               /* Shrinks box to fit text */
    padding: 5px 20px;
    border-radius: 50px;                 /* Makes it a pill shape */
    backdrop-filter: blur(5px);          /* Blurs the ice behind the text */    
    margin-bottom: 15px;
    text-indent: 20px;
    color: #0c0391; 
    text-shadow: 
        -1px -1px 0 #beedff, 1px -1px 0 #beedff, 
        -1px 1px 0 #beedff, 1px 1px 0 #beedff;
}

/* Custom Drop Cap for the Debate section */
.drop-cap-debate::first-letter {
    /* This tells the browser: 'Make this letter 2 lines tall' */
    -webkit-initial-letter: 2;
    initial-letter: 2;
    float: left;
    font-size: 4rem;
    line-height: 0.8;
    font-weight: bold;
    color: #0c0391;

/* This creates a consistent "wall" for both Line 1 and Line 2 */
    margin-right: 12px; 
    
/* Remove any negative margins you added previously */
    margin-left: 0;
    padding: 0;

    margin-top: 6px;
    
    text-shadow: 
    -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, 
    -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

.drop-cap-debate {
    text-indent: 0 !important; /* Keep this at zero */
    text-align: left;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .debate-container { flex-direction: column; text-align: center; }
    .drop-cap-debate::first-letter { float: none; display: block; }
}


.debate-header h2 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.1; /* Slightly tighter for a "Headline" look */
    text-transform: uppercase;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: .75rem;
    
    /* ADDED: Font-family suggestion for a more athletic look */
    font-family: 'Oswald', sans-serif; 
    
    /* ADDED: Ensuring the color matches your brand */
    color: #041E42;
    text-shadow: 2px 2px 4px #ffffff;
}

/* RESPONSIVE SCALING */
@media (max-width: 1200px) {
    .debate-header h2 {
        /* This keeps the font fluid between 1200px and mobile widths */
        font-size: calc(1.475rem + 2.7vw);
        margin-bottom: 2rem; /* Reduced margin for smaller screens */
    }
}

.debate-btn {
    display: inline-block;
    background: #0c0391;
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid #ffffff;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.debate-btn:hover {
    background: #ffffff;
    color: #0c0391;
    transform: translateY(-3px);
    border: 2px solid #0c0391;
    box-shadow: 0 5px 15px rgb(12, 3, 145, 0.4);
}


.contact-section {
    position: relative;
    padding: 80px 20px;
    background: #f8f9fa; /* Light grey base */
    overflow: hidden;
    z-index: 1;
}

/* Applying the Ice Background to the Contact Page */
.contact-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/ice-texture.webp');
    background-size: cover;
    opacity: 0.15; /* Subtle ice look */
    z-index: -1;
}

.contact-container {
    max-width: 800px; /* Thinner container looks better for forms */
    margin: 0 auto;
    position: relative;
}

.contact-intro {
    text-align: center;
    margin-bottom: 40px;
    font-family: 'Oswald', sans-serif;
    color: #333;
    font-size: 1.1rem;
}

.contact-card {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
}

/* Modern Form Inputs */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-input {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Oswald', sans-serif;
    background: #fdfdfd;
}

.form-input:focus {
    outline: none;
    border-color: #ffb81c; /* Gold focus border */
    box-shadow: 0 0 5px rgba(255, 184, 28, 0.3);
}

@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
}


.main-footer {
    position: relative;
    background-color: #050505; /* Deep black for contrast */
    color: #ccc;
    padding: 100px 20px 40px;
    overflow: hidden;
    font-family: 'Oswald', sans-serif;
    z-index: 1;
}

/* THE HOCKEY NET IMAGE */
.footer-net-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Create/source an image of a red goal frame and white net */
    background-image: url('../img/nhl-net-background.webp'); 
    background-size: cover;
    background-position: center top;
    opacity: 0.15; /* Keeps it subtle so links are readable */
    z-index: -1;
    pointer-events: none;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 60px;
}

.footer-col h4 {
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 25px;
    border-bottom: 2px solid #ffb81c; /* Gold accent line */
    display: inline-block;
}

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

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

.footer-links a {
    color: #aaa;
    text-decoration: none;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #ffb81c;
    padding-left: 8px; /* Subtle movement on hover */
}

.discord-btn {
    display: inline-block;
    background: #5865F2;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px;
}

.footer-qr {
    max-width: 100px;
    margin-top: 20px;
    filter: grayscale(1) invert(1); /* Makes QR code match the dark theme */
    opacity: 0.7;
}

.footer-copyright {
    text-align: center;
    margin-top: 80px;
    padding-top: 20px;
    border-top: 1px solid #222;
    font-size: 0.85rem;
}

.qr-link span {
    display: block;
    margin-top: 8px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'Oswald', sans-serif;
    
    /* A muted, cool grey */
    color: #888888; 
    
    /* Smooth transition for the glow effect */
    transition: all 0.4s ease-in-out;
    margin-bottom: 10px;
}

/*  The Hover State (Silver Chrome Glow) */
.qr-link:hover span {
    /* Bright "Chrome" Silver */
    color: #ffffff; 
    
    /* The Glow: A mix of white and light silver to create depth */
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.8), 
        0 0 15px rgba(200, 200, 200, 0.5);
    
    /* Optional: slightly increase letter spacing on hover for a "breath" effect */
    letter-spacing: 2px;
}

/* Container for the search block */
.search-section {
    margin-top: 45px; /* Adjust this to move the whole block up or down */

    display: block;
    width: 100%;
}

/* Optional: Add a subtle separator line to define the space better */
.search-section::before {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background-color: #333; /* Dark grey line */
    margin-bottom: 25px;
}

/* The "Search Site Articles" Title */
.search-section h4 {
    margin-bottom: 2px !important; /* Forces the note to sit closer */
}

/* The Small Note in Parentheses */
.search-note {
    margin-top: 0 !important;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: #aaa; /* Subtle grey so it doesn't distract from the main title */
    font-weight: normal;
    font-family: 'Oswald', sans-serif;
    text-transform: none; /* Keeps the lowercase look for better readability */
}

/* Optional: Bolding the "Browse Card Catalog" inside the note */
.search-note b {
    color: #ffb81c; /* Gold to match your link color */
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-col h4 { border-bottom: none; }
}



.brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Forces everything to line up on the left */
    text-align: left;
}

.brand-col h2 {
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 10px;
}

/* Sublte Grey Paragraph text - perfectly aligned */
.footer-desc {
    color: #a0a0a0; /* Subtle metallic grey */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 25px;
    max-width: 400px; /* Prevents text from stretching too wide */
}

/* Secondary label for Socials */
.social-label {
    color: #777; /* Even subtler grey */
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;

    /* The Underline Logic */
    display: inline-block;           /* Ensures the line only spans the text width */
    border-bottom: 1px solid #777; /* Matches the text color */
    padding-bottom: 2px;             /* Creates a small gap between text and line */
}

/* Custom Gold & Black Discord Button */
.discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    color: #ffb81c; /* Pittsburgh Gold */
    border: 1px solid #ffb81c;
    padding: 10px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.discord-btn:hover {
    background-color: #ffb81c;
    color: #000; /* Flips to Black text on Gold background */
    box-shadow: 0 0 15px rgba(255, 184, 28, 0.4);
    transform: translateY(-2px);
}


.partner-network-container {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #222;
    text-align: center;
    margin-bottom: 15px;
}

.partner-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.partner-card {
    text-decoration: none;
    width: 220px;
    height: 120px; /* Horizontal "Ticket/Card" style */
    perspective: 1000px;
}

.card-inner {
    background: linear-gradient(135deg, #111 0%, #050505 100%);
    border: 1px solid #333;
    border-top: 2px solid #ffb81c; /* Gold "Rookie Card" style top border */
    border-radius: 8px;
    padding: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* The Shine Effect on Hover */
.card-inner::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.05), transparent);
    transform: rotate(45deg);
    transition: 0.6s;
}

.partner-card:hover .card-inner {
    transform: translateY(-10px) rotateX(5deg);
    border-color: #ffb81c;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5), 0 0 15px rgba(255, 184, 28, 0.2);
}

.partner-card:hover .card-inner::after {
    left: 100%;
}

.card-brand {
    font-size: 0.6rem;
    color: #ffb81c;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.card-name {
    color: #fff;
    font-size: 1.1rem;
    margin: 5px 0;
    font-family: 'Oswald', sans-serif;
}

.card-stat {
    color: #888;
    font-size: 0.75rem;
    margin: 0;
}

.card-footer {
    font-size: 0.7rem;
    color: #555;
    text-align: right;
    text-transform: uppercase;
    transition: color 0.3s;
}

.partner-card:hover .card-footer {
    color: #fff; /* Silver/White on hover */
}


.pittsburgh-steel-texture {
    /* Base color is a dark metallic grey */
    background-color: #0d0d0d; 
    
    /* Subtle brushed metal pattern (this is a fast-loading CSS pattern) */
    background-image: linear-gradient(0deg, #111111 25%, transparent 25%), 
                      linear-gradient(90deg, #111111 25%, transparent 25%), 
                      linear-gradient(180deg, #111111 25%, transparent 25%), 
                      linear-gradient(270deg, #111111 25%, transparent 25%);
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px, 1px 1px, 0 0;
    
    border: 1px solid #333;
    border-top: 2px solid #ffb81c; /* Gold "Rookie Card" style top border */
    border-radius: 8px;
    
    /* Adds a metallic shimmer over the pattern */
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease-in-out;
}

.partner-card:hover .pittsburgh-steel-texture {
    transform: translateY(-8px) rotateX(2deg);
    border-color: #ffffff; /* Turns silver/white on hover */
    box-shadow: 0 15px 30px rgba(0,0,0,0.6), inset 0 0 10px rgba(255, 184, 28, 0.3);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.verified-icon {
    font-size: 0.8rem;
    color: #4CAF50; /* A premium, non-vibrant green for authorization */
    opacity: 0.8;
    transition: all 0.3s;
}

.partner-card:hover .verified-icon {
    color: #ffffff; /* Turns white on hover to match the glow */
    opacity: 1;
    transform: scale(1.1);
}

.privacy-container {
    max-width: 800px;
    margin: 60px auto;
    color: #ccc; /* Subtle grey text */
    line-height: 1.8;
}

.privacy-container h1, .privacy-container h2 {
    color: #ffb81c; /* Gold Headers */
    margin-top: 40px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

.privacy-container h3, .privacy-container h4 {
    color: #fff;
    margin-top: 30px;
}

.privacy-container a {
    color: #ffb81c;
    text-decoration: underline;
}

.privacy-container strong {
    color: #fff; /* Makes definitions pop */
}

.footer-legal-right {
    text-align: right;
    margin-top: 50px;        /* Creates a large gap from the item above */
    padding-right: 10px;     /* Optional: keeps it from touching the very edge */
    width: 100%;             /* Ensures it takes up the full width to align right */
}
.legal-link {
    color: #777;
    font-size: 0.9rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;   /* Makes it look premium/modern */
    font-family: 'Oswald', sans-serif; /* Matches your headers */
    transition: color 0.3s ease;
}

.legal-link:hover { color: #ffb81c; text-decoration: underline;}

/* The Modal (Background) */
.modal {
    display: none; 
    position: fixed; 
    z-index: 10000; 
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9); /* Dark overlay */
    backdrop-filter: blur(8px);
}

/* Modal Window */


.modal-control-btn {
    position: absolute;
    top: 15px;
    right: 70px; /* Positioned to the left of the close 'X' */
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid white;
    cursor: pointer;
    border-radius: 5px;
    z-index: 1001;
}

.modal-control-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Scrollable area for long text */
.modal-scroll-area {
    overflow-y: auto;
    max-height: 75vh;
    padding-right: 20px;
    color: #a0a0a0;
    line-height: 1.8;
}

/* Styling the scrollbar to be Gold */
.modal-scroll-area::-webkit-scrollbar { width: 8px; }
.modal-scroll-area::-webkit-scrollbar-track { background: #111; }
.modal-scroll-area::-webkit-scrollbar-thumb { background: #ffb81c; border-radius: 10px; }

/* Close Button */
.close-modal {
    position: absolute !important; 
    
    /* Increase these negative values significantly to jump entirely over the black padding and gold border */
    top: -300px;   
    right: -80px;  
    
    /* Leave everything else exactly as you have it */
    color: #ffcc00 !important;
    font-size: 80px !important;
    font-weight: 900 !important;
    cursor: pointer;
    z-index: 1010;
    line-height: 1;
    display: block;
}
.close-modal:hover {
    color: #ffffff !important;
    transition: color 0.2s ease; /* Optional: makes the transition to white smooth */
}

/* Custom Scrollbar for the Pop-up */
.modal-scroll-area::-webkit-scrollbar { width: 6px; }
.modal-scroll-area::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }

.modal {
    display: none; 
    position: fixed; 
    z-index: 10000; /* Stays above navbar */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
}


.modal-scroll-area {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 15px;
}

/* Custom Scrollbar for the Privacy Text */
.modal-scroll-area::-webkit-scrollbar { width: 6px; }
.modal-scroll-area::-webkit-scrollbar-thumb { background: #ffb81c; border-radius: 10px; }


/* Footer Link Spacing */
.footer-legal-right {
    margin-top: 40px; /* Separates from items above */
    text-align: right;
}
.legal-link {
    color: #777;
    font-size: 14px; /* Bigger letters as requested */
    text-decoration: none;
    text-transform: uppercase;
}
.legal-link:hover { color: #ffb81c; }


/* Mobile Optimization for About Page */
@media (max-width: 767px) {
    .about-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .story-text p {
        text-indent: 20px; /* Smaller indent looks better on narrow screens */
        font-size: 1rem;    /* Slightly smaller font for better readability */
        line-height: 1.6;
        margin-bottom: 20px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .story-gallery {
        gap: 20px; /* Adds space between stacked images */
    }
}

.subtitle {
    font-size: 1.1rem;
    color: #888;
    margin-bottom: 30px;
}


.guideline-group h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.3rem;
    text-transform: uppercase;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

/* Style the headers specifically */
.omission h3 { color: #b10000; border-color: #b10000; } /* Red for Omissions */
.eligibility h3 { color: #18f562; border-color: #18f562; } /* Green for Eligibility */

.omission li::before { content: "\f057"; color: #b10000; } /* Circle X */
.eligibility li::before { content: "\f058"; color: #18f562; } /* Circle Check */

/* List Styling */
.guideline-group ul {
    list-style: none;
    padding: 0;
}

.guideline-group li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    line-height: 1.4;
    color: #ddd;
    font-size: 0.95rem;
}

.guideline-group li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffb81c;
    font-weight: bold;
}

.card-display {
    width: 100%;           /* Fills the column width */
    max-width: 250px;      /* Prevents it from getting too huge on big screens */
    height: auto;          /* Maintains the correct scale */
    aspect-ratio: 25 / 35; /* Standard trading card ratio */
    object-fit: cover;     /* Crops slightly instead of stretching */
    border-radius: 8px;    /* Matches your modern professional look */
    display: block;
    margin: 0 auto;        /* Centers the image in the column */
    border: 1px solid #333;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    transition: transform 0.2s;
}

.card-display-double {
    width: 100%;           /* Fills the column width */
    max-width: 250px;      /* Prevents it from getting too huge on big screens */
    height: auto;          /* Maintains the correct scale */
    aspect-ratio: 50 / 35;
    object-fit: cover;     /* Crops slightly instead of stretching */
    border-radius: 8px;    /* Matches your modern professional look */
    display: block;
    margin: 0 auto;        /* Centers the image in the column */
}
.card-display-landscape {
    width: 100%;           /* Fills the column width */
    max-width: 500px;      /* Prevents it from getting too huge on big screens */
    height: auto;          /* Maintains the correct scale */
    aspect-ratio: 35 / 25; /* Standard trading card ratio */
    object-fit: cover;     /* Crops slightly instead of stretching */
    border-radius: 8px;    /* Matches your modern professional look */
    display: block;
    margin: 0 auto;        /* Centers the image in the column */
}

.card-container {
    width: 250px;           /* Match your image width */
    margin: 10px auto;      /* Centers the whole unit */
    text-align: center;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-caption {
    margin-top: 8px;
    font-family: 'Oswald', sans-serif;
    color: #333;         /* Mario Gold */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-display:hover {
    transform: scale(1.05); /* Makes the rookie card pop slightly on hover */
}

/* Styling for the numbered catalog list */
.catalog-list {
    list-style-type: none;
    counter-reset: catalog-counter;
    padding-left: 0;
}
.catalog-list li {
    font-size: 1.5rem;
    counter-increment: catalog-counter;
    margin-bottom: 25px;
    position: relative;
    text-indent: 45px;
}
.catalog-list li::before {
    content: counter(catalog-counter) ".";
    position: absolute;
    left: 0;
    color: #000; 
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
}
.catalog-label {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    display: block;
    margin-bottom: 5px;
    border-bottom: 1px solid #333;
    padding-bottom: 2px;
}
.catalog-value {
    font-size: 1.5rem;
    color: #ffb81c;
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
}
.catalog-note {
    font-size: 1.5rem;
    color: #696969;
    line-height: 1.5;
    display: block;
    font-style: italic;
}

ul.foil-list {
    list-style: none;      /* Removes the default black bullets */
    margin-left: 40px;
    padding-left: 0;       /* Removes default indent */
}

ul.foil-list li {
    position: relative;
    padding-left: 40px;    /* Creates space for the icon on the left */
    margin-bottom: 10px;
}

ul.foil-list li i {
    position: absolute;
    left: 0;               /* Pins the icon to the very left edge */
    top: 4px;              /* Adjusts vertical alignment with the text */
}


/* This creates the horizontal row */
.image-grid {
    display: grid;
    /* This forces 4 columns on desktop */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin: 20px 0;
    align-items: start;
}

.card-item {
    text-align: center;
    /* Forces the container to allow shrinking */
    min-width: 0;
    position: relative;
    overflow: visible !important;
}

.card-item img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
}

.card-image {
    transition: transform 0.4s ease-in-out;
    display: block;
    max-width: 100%;
    height: auto;
}

/* Important: This makes it look good on phones */
@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Forces all items to stay on one line */
.rookie-grid-container {
    display: flex;
    flex-direction: row;
    justify-content: center; /* Centers the row of 4 cards */
    gap: 15px;
    width: 100%;
    max-width: 1000px;       /* Keeps the row from getting too wide on large monitors */
    margin: 30px auto;      /* Centers the container on the page */
}

/* Ensures each card takes up exactly 25% of the row minus the gaps */
.rookie-card-item {
    flex: 0 0 22%;          /* Each card takes up exactly 22% of the row */
    min-width: 0;           /* Allows the high-res images to shrink */
    text-align: center;
}

/* Forces the image to be no wider than the 25% container */
.rookie-card-item img {
    width: 100%;            /* Fills the 22% container */
    max-width: 200px;       /* Prevents the cards from becoming giant on large screens */
    height: auto;
    display: block;
    margin: 0 auto 10px;    /* Centers image and adds space below */
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease; /* Makes the growth smooth */
    cursor: pointer;                /* Shows a hand icon so users know they can hover */
    z-index: 1;                     /* Keeps the card in its place */
}

.rookie-card-item p {
    font-size: 0.85rem;
    color: #333;
    font-weight: bold;
}

/* Mobile Adjustment: Switch to 2x2 grid on small screens for readability */
@media (max-width: 768px) {
    .rookie-grid-container {
        flex-wrap: wrap;
    }
    .rookie-card-item {
        flex: 0 0 45%; /* Two cards per row on mobile */
    }
}

@media (min-width: 1024px) {
    .rookie-card-item img:hover {
        transform: scale(1.25);
    }
}

.rookie-card-item img:hover {
    transform: scale(1.25);         /* Increases size by 25% */
    z-index: 10;                    /* Brings the hovered card to the front */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* Adds a deeper shadow when "lifted" */
}


.price-guide-section {
    /* Top and Bottom margin increased to 60px; Left and Right are 0 */
    padding: 0 5%; 
    margin: 60px auto; 
    
    /* Limits the width so text doesn't stretch too far on wide monitors */
    max-width: 1000px; 

    font-family: Arial, sans-serif;
    line-height: 1.6;
    clear: both; /* Ensures it starts below any floating elements */
}

.price-guide-section h3 {
    color: #000;
    border-bottom: 2px solid #ffcc00; /* Penguins Gold accent */
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.analysis-box {
    background-color: #f9f9f9;
    padding: 25px; /* Increased from 20px */
    border-left: 5px solid #ffcc00;
    margin-top: 20px;
    margin-bottom: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Added a very subtle lift */
}

.analysis-box p {
    margin-bottom: 15px;
    color: #333;
}

.price-links {
    list-style: disc;
    padding-left: 20px; 
    margin-top: 15px;
}

.price-links li {
    margin-bottom: 10px;
}

.price-links a {
    color: #0056b3;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}

.price-links a:hover {
    color: #ffcc00;
    text-decoration: underline;
}



.row.g-4 {
    align-items: flex-start; /* Prevents columns from stretching and snagging */
}

/* Force a clear every 3 items on Desktop (lg) */
@media (min-width: 992px) {
    .row.g-4 > .col-lg-4:nth-child(3n+1) {
        clear: left;
    }
}


.debate-header h2, 
.section-heading {
    color: #212529 !important; /* This is the standard Bootstrap dark gray/black */
    text-transform: uppercase;
    font-weight: 900; /* Adjust to match the boldness of your main title */
}

/* Ensure the underline (if you want it) also matches the color */
.section-heading {
    border-bottom: 2px solid #212529;
    display: inline-block;
}

/* This matches the template's path exactly to override it */
.debate-header h5.debate-description,
div.debate-header h5 {
    color: #0d233a !important; /* The Dark Blue */
    text-transform: none !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1) !important;
    opacity: 1 !important; /* Some templates use opacity: 0.7 for white text */
}


/* Keeps the player names visible while scrolling down the decades */
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #0d233a #f1f1f1;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: auto;
    max-height: 800px; /* Optional: adds a vertical scroll if the table is long */
    border: 1px solid #212529;
}

.table thead th {
    background-color: #0d233a !important;
    white-space: nowrap; /* Prevents names from wrapping in small columns */
    vertical-align: middle;
    border: 1px solid #454d55 !important;
}

.table tbody td {
    border-right: 1px solid #dee2e6;
    min-width: 120px;
}

/* Table Cell Color Logic */
.cell-light { background-color: #f0f4f8; } /* Active Regular Season */
.cell-medium { background-color: #bbd4ff; } /* All-Star / Elite Performance */
.cell-deep { 
    background-color: #0d233a !important; /* The Best in the League */
    color: #ffffff !important;
    font-weight: bold;
}
.cell-empty { background-color: transparent; }


.cell-light-red { background-color: #ff6565; } /* Active Regular Season */
.cell-medium-red { background-color: #cc1414; } /* All-Star / Elite Performance */
.cell-deep-red { 
    background-color: #610000 !important; /* The Best in the League */
    color: #ffffff !important;
    font-weight: bold;
}

.cell-light-green { background-color: #7fff65; } /* Active Regular Season */
.cell-medium-green { background-color: #14cc1d; } /* All-Star / Elite Performance */
.cell-deep-green { 
    background-color: #00610d !important; /* The Best in the League */
    color: #ffffff !important;
    font-weight: bold;
}

.cell-light-blue { background-color: #657cff; } /* Active Regular Season */
.cell-medium-blue { background-color: #1417cc; } /* All-Star / Elite Performance */
.cell-deep-blue { 
    background-color: #020061 !important; /* The Best in the League */
    color: #ffffff !important;
    font-weight: bold;
}

.cell-light-gold { background-color: #f5ff65; } /* Active Regular Season */
.cell-medium-gold { background-color: #f3f70e; } /* All-Star / Elite Performance */
.cell-deep-gold { 
    background-color: #615a00 !important; /* The Best in the League */
    color: #ffffff !important;
    font-weight: bold;
}

.cell-light-black { background-color: #b3b3b3; } /* Active Regular Season */
.cell-medium-black { background-color: #2e2e2e; } /* All-Star / Elite Performance */
.cell-deep-black { 
    background-color: #000000 !important; /* The Best in the League */
    color: #ffffff !important;
    font-weight: bold;
}

/* Fix for horizontal scrolling with many players */
#table-section-wrapper {
    width: 100% !important;
    padding: 0 20px !important;
}

.table-responsive table {
    table-layout: fixed;
    overflow-y: auto !important;
    overflow-x: auto !important;
    max-height: 950px !important; /* Increased from 850px to show ~2 more rows */
    border: 1px solid #212529;
    /* Optional: This ensures the shadow follows the container */
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

.table th, .table td {
    text-align: center;
    border: 1px solid #dee2e6 !important;
}

/* Color Logic Classes */
.cell-light { background-color: #f0f4f8; } /* Very Light Blue-Gray */
.cell-medium { background-color: #cfe2ff; } /* Medium Sky Blue */
.cell-deep { 
    background-color: #0d233a !important; /* Your Signature Navy Blue */
    color: #ffffff !important; 
}

.table-bordered td {
    border: 1px solid #dee2e6 !important;
}

/* Force containers to use more screen real estate */
@media (min-width: 1400px) {
    .container, 
    .container-lg, 
    .container-md, 
    .container-sm, 
    .container-xl, 
    .container-xxl {
        max-width: 95% !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* Reduce internal gutter space */
section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* Ensure rows don't add extra horizontal scroll or gaps */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* This kills the 1320px limit and forces content to use 95% of the screen */
.container, .container-lg, .container-xl, .container-xxl {
    max-width: 95% !important;
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* This forces the 'Boxed' layout to fill the screen on Desktops */
@media (min-width: 1200px) {
    .container {
        max-width: 98% !important;
        width: 98% !important;
    }
    
    /* Shrinks the padding so the table has more room to breathe */
    .px-md-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Tightens the columns so they can fit side-by-side */
th, td {
    padding: 8px 4px !important;
    font-size: 0.9rem; /* Slightly smaller font to help fit all 11 players */
}

.table tbody tr td:first-child {
    background-color: #212529 !important; /* Dark Charcoal */
    color: #ffffff !important;            /* White text for readability */
    font-weight: bold;
    border-right: 2px solid #454d55 !important; /* Defined vertical separator */
}

/* 1. Sticky Header (Player Names) */
thead th {
    position: sticky;
    top: 0;
    z-index: 100; /* Stays above the scrolling years */
    background-color: #0d233a !important;
    color: white;
}

/* 2. Sticky First Column (Years) */
.table tbody td:first-child, 
.table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 90; /* Stays above the player data cells */
    background-color: #212529 !important; /* The dark background you requested */
    color: white !important;
    font-weight: bold;
    border-right: 2px solid #454d55 !important;
}

/* 3. The "Anchor" Cell (The 'Season' header itself) */
.table thead th:first-child {
    z-index: 110; /* The absolute top-left corner must be highest */
    left: 0;
    top: 0;
}


/* -----------------------------------------------------------
   NHL TABLE: DARK STICKY COLUMN FIX
   ----------------------------------------------------------- */

/* 1. Make the 'Season' Header (Top-Left Corner) dark and sticky */
.table thead th:first-child {
    background-color: #212529 !important; /* Dark Charcoal */
    color: #ffffff !important;            /* Pure White Text */
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 1010 !important;             /* Highest priority */
    border-right: 2px solid #454d55 !important;
}

/* 2. Make all 'Years' in the first column dark and sticky */
/* We target the 'td' directly to override Bootstrap's white background */
.table tbody tr td:first-child {
    background-color: #212529 !important; /* Solid Dark Background */
    color: #ffffff !important;            /* White Text for Contrast */
    font-weight: bold !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 990 !important;             /* Sits above the player data */
    border-right: 2px solid #454d55 !important;
    min-width: 130px;                     /* Match your existing width */
}

/* 3. The "Opaque" Fix (Crucial) */
/* This prevents the other table cells from 'ghosting' behind the years when you scroll */
.table tbody tr td:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #212529; 
    z-index: -1;
}

/* ============================================================
    1. THE "SEASON" CORNER CELL (Top-Left Header)
   ============================================================ */
   #comparing-table thead th:first-child,
   .table thead tr th:nth-child(1) {
       position: sticky !important;
       top: 0 !important;      /* Pinned to top */
       left: 0 !important;     /* Pinned to left */
       z-index: 10000 !important; /* THE HIGHEST VALUE: Nothing goes over this */
       background-color: #212529 !important; /* Solid Dark */
       color: #ffffff !important;
       border-right: 2px solid #454d55 !important;
       border-bottom: 2px solid #454d55 !important;
       opacity: 1 !important;
   }
   
   /* ============================================================
       2. THE "SEASON" DATA COLUMN (Left-Side Years)
      ============================================================ */
   #comparing-table tbody tr td:first-child,
   .table tbody tr td:nth-child(1) {
       position: sticky !important;
       left: 0 !important;
       z-index: 5000 !important; /* LOWER than corner, but HIGHER than regular data */
       background-color: #212529 !important;
       color: #ffffff !important;
       font-weight: bold !important;
       min-width: 130px !important;
       padding-top: 1px !important;
       padding-bottom: 1px !important;
       border-right: 2px solid #454d55 !important;
   }
   
   /* ============================================================
       3. GENERAL TABLE & ROW STYLING
      ============================================================ */
   /* This makes the whole header row sit above the body */
   #comparing-table thead {
       position: sticky !important;
       top: 0 !important;
       z-index: 8000 !important; 
   }
   
   #comparing-table thead th {
       position: sticky !important;
       top: 0 !important;
       z-index: 8000 !important; /* Above years, below corner */
       background-color: #212529 !important;
       color: #ffffff !important;
   }
   
   #comparing-table tbody td {
       padding: 1px 4px !important;
       line-height: 1 !important;
       height: 1px;
       vertical-align: middle;
   }
   
   #comparing-table tbody img {
       max-height: 10px !important; 
       width: auto;
       vertical-align: middle;
       display: inline-block;
   }
   
   /* ============================================================
       4. MOBILE OPTIMIZATION
      ============================================================ */
   @media (max-width: 991px) {
       #comparing-table {
           min-width: 1200px !important; 
           display: table !important;
       }
   
       /* CRITICAL: This allows the stickiness to work while scrolling sideways */
       .table-responsive {
           overflow: auto !important;
           max-height: 80vh; /* Set a height so the header has something to stick to */
       }
   
       #comparing-table thead th:first-child {
           z-index: 10001 !important; 
       }
   }



/* 1. Standard Pro Season (Light Gray) */
.cell-pro {
    background-color: #f8f9fa !important;
    color: #6c757d;
}

/* 2. All-Star / Star (Light Blue) */
.cell-star {
    background-color: #e3f2fd !important; /* Soft Ice Blue */
    color: #0d47a1 !important;
    font-weight: bold;
}

/* 3. Best in League (Deep Navy) */
.cell-trophy {
    background-color: #0d233a !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5); /* Adds depth to the "Gold" trophy cells */
}


/* Makes the figure grow slightly when hovered */
figure.figure:hover {
    transform: scale(1.2);
    z-index: 10;
    cursor: zoom-in;
}

/* Adjusts the caption for better readability since the image is bigger */
.figure-caption {
    border-top: 1px solid #dee2e6;
    padding-top: 10px;
    margin-top: 15px !important;
}

.library-container {
    background: #0b0e14;
    color: #e6edf3;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #30363d;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.library-header {
    margin-top: 5px;
    margin-bottom: 0.5rem; /* Reduced from default */
}

.dynasty-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0px;
    font-size: 1.4rem;
}

.dynasty-table th {
    text-align: left;
    padding: 10px;
    background: #161b22;
    color: #8b949e;
    border-bottom: 3px solid #30363d;
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
}

.dynasty-table td {
    padding: 14px;
    border-bottom: 1px solid #21262d;
    font-size: 1.25rem;
}

.dynasty-table tr:hover {
    background: rgba(88, 166, 255, 0.05); /* Subtle blue hover */
}

/* Highlighting the big numbers */
.dynasty-table td:nth-child(5), 
.dynasty-table td:nth-child(6), 
.dynasty-table td:nth-child(8) {
    font-weight: 800;
    color: #58a6ff;
    font-family: 'Roboto Mono', monospace;
}

.spacer-v {
    height: 25px; /* Adjust this pixel value until the gap looks exactly right to you */
    width: 100%;
}

@media screen and (max-width: 600px) {
    .dynasty-table th { font-size: 0.8rem; }
    .dynasty-table td { font-size: 0.8rem; }

    /* Make the first column sticky */
    .dynasty-table th:first-child, 
    .dynasty-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #0b0e14; /* Match your container background */
        border-right: 2px solid #30363d;
        font-size: 0.8rem;
    }

    .dynasty-table th:first-child {
        z-index: 3; /* Keeps header above body cells */
        font-size: 0.8rem;
    }
}

.spacer {
    height: 60px; /* Change this number to widen or shrink the gap */
}


.table-card {
    width: fit-content;       /* Forces the border to wrap tightly around the table */
    margin: 20px auto;        /* Centers the entire container on the page */
    border: 4px solid #212529; /* Match your card border style */
    border-radius: 20px;      /* Rounded corners */
    overflow: hidden;         /* Ensures table corners don't poke out */
    background-color: #fff;
}

#gretzky-table {
    width: auto !important; /* Forces the table to be only as wide as its contents */
    margin-bottom: 0;         /* Removes extra space inside the border */
    border-collapse: collapse;
}

/* Targets ONLY the cells inside the Gretzky table */
#gretzky-table td, 
#gretzky-table th {
    padding-left: 2px !important;  /* Minimal left space */
    padding-right: 2px !important; /* Minimal right space */
    padding-top: 1px !important;   /* Minimal top space */
    padding-bottom: 1px !important;/* Minimal bottom space */
    border: 1px solid #a1cefc; /* Thin internal lines */
    white-space: nowrap;           /* Prevents text from wrapping to a 2nd line */
    font-size: 0.85rem;                /* Optional: makes the text slightly smaller to fit */
    min-width: 60px;
    max-width: 80px;
}

/* Optional: Shrink the header row specifically if needed */
#gretzky-table thead th {
    border-bottom: 3px solid #212529 !important;
    color: white;
}


/* Targets the last 4 data cells in every body row */
#gretzky-table tbody td:nth-last-child(-n+4) {
    background-color: #b8f1ff !important; /* Light gray background */
    color: #091929 !important;            /* Dark charcoal font color */
    font-weight: bold;                    /* Makes the "Possible" numbers pop */
    border-left: 1px solid #ced4da;      /* Subtle vertical divider */
}

/* Optional: Targets the last 4 header cells to match */
#gretzky-table thead tr:nth-child(2) th:nth-last-child(-n+4) {
    background-color: #b8f1ff !important;
    color: #091929 !important;
}

/* Optional: Targets the last 4 footer (Totals) cells */
#gretzky-table tfoot td:nth-last-child(-n+4) {
    background-color: #b8f1ff !important;
    color: #091929 !important;
}

#gretzky-teams-table {
    width: auto !important; /* Forces the table to be only as wide as its contents */
    margin-bottom: 0;         /* Removes extra space inside the border */
    border-collapse: collapse;
}

#gretzky-teams-table td, 
#gretzky-teams-table th {
    padding-left: 2px !important;  /* Minimal left space */
    padding-right: 2px !important; /* Minimal right space */
    padding-top: 1px !important;   /* Minimal top space */
    padding-bottom: 1px !important;/* Minimal bottom space */
    border: 1px solid #a1cefc; /* Thin internal lines */
    white-space: nowrap;           /* Prevents text from wrapping to a 2nd line */
    font-size: 0.85rem;                /* Optional: makes the text slightly smaller to fit */
    min-width: 60px;
    max-width: 80px;
}



/* Container and Typography */
.search-container {
    max-width: 1600px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    text-align: left;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; /* Centers the search bar */
    gap: 20px;               /* This replaces all   characters */
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin: 20px auto;
    max-width: 1600px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    /* 1. Use RGBA to make the background color 80% opaque */
    background-color: rgba(248, 249, 250, 0.8); 
        
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    /* 2. Layer a transparent white gradient OVER the image to fade it */
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), 
                    url('../img/ice-texture.webp');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* 3. Essential: Blend the color and image together */
    background-blend-mode: overlay;

}


/* The Ice Texture Layer */
.search-container::before {
    content: "";          /* Required for pseudo-elements */
    position: absolute;
    top: 0;
    bottom: -1000px;
    left: 0;
    width: 100%;

    
    /* 1. Add the Image */
    background-image: url('../img/ice-texture.webp');


    background-size: cover;      /* Forces 1 copy to stretch to the new larger size */
    background-position: center; /* Keeps the best part of the ice visible */
    background-repeat: no-repeat; /* Guarantees no tiling/overlapping */

    
    /* 2. Make it Lighter (Tint it White) */
    background-color: rgba(255, 255, 255, 0.3); /* A white "overlay" */
    background-blend-mode: overlay; /* Blends the texture with the color */
      
    /* 4. Put it behind the text */
    z-index: -3; 
}



.search-container h2 {
    text-align: center;
    letter-spacing: 2px;
    color: #000;
}

.search-instruction {
    text-align: center;
    font-weight: bold;
    margin-bottom: 40px;
}

/* The Grid System */
.search-grid {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between rows */
}

.search-row {
    display: grid;
    grid-template-columns: 180px 320px 1fr; 
    gap: 20px;
    align-items: center; /* Vertically centers label/input/tip in the row */
    text-align: left;    
    padding: 10px 0;
    margin-bottom: 15px;
}

.search-row label {
    font-weight: bold;
    text-align: left !important; /* Forces text to the far left */
    display: block;              /* Ensures it takes up the full column width */
    width: 100%;                 /* Added for extra safety */
    white-space: nowrap;         /* Prevents labels like "Card Number" from breaking into two lines */
}

.search-row select, 
.search-row input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #ffffff;
    font-size: 14px;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}


/* Add a subtle highlight when the user clicks inside an input */
.search-row select:focus, 
.search-row input:focus {
    outline: none;
    border-color: #ffcc00;
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.25);
}

/* Placeholder text styling */
.search-row input::placeholder {
    color: #adb5bd;
    font-style: italic;
}

/* Input Styling */
.input-group {
    display: contents;
    align-items: center;
    justify-content: flex-end;
}

.input-group label {
    font-weight: bold;
    width: 140px;      /* Forces all labels to be identical width */
    text-align: right;
    margin-right: 15px;
    white-space: nowrap;
}

.input-group select, 
.input-group input {
    flex: 1;           /* Input box fills the remaining space of the 400px */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Tip Styling */
.search-tip {
    font-size: 0.85em;
    color: #555;
    line-height: 1.4;
    margin: 0; /* Remove any default paragraph margins */
    padding: 0;
    text-align: left;
    /* This ensures that if the text wraps, it starts at the far left edge */
    display: flex;
    flex-direction: column;
}


/* Consistent styling for inputs and selects */
select, input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.Searchbutton-container {
    margin-top: 40px;
    display: flex;
    justify-content: center; /* Centers button perfectly in the section */
    width: 100%;
}


/* Button styling to fit a "Library" or "Gallery" feel */
#searchbutton {
    display: inline-block;
    background: #000;
    color: #ffb81c;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #ffb81c;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-top: 20px;
}

#searchbutton:hover {
    background: #ffb81c;
    color: #000;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 184, 28, 0.4);
}

/* Grid layout for the cards themselves */
#card-display-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}


@media (max-width: 800px) {
    .search-row {
        grid-template-columns: 1fr; /* Stacks tips under inputs on small screens */
        gap: 5px;
    }
}

/* Centering the Featured Section */
.featured-header {
    text-align: center;
    margin: 40px 0 20px 0;
}

.featured-header h2 {
    font-size: 2em;
    letter-spacing: 2px;
}

/* Modern Toggle Switch Styling */
.control-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}

.modern-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.modern-switch input { display: none; }

.modern-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.modern-slider:before {
    position: absolute;
    content: "";
    height: 22px; width: 22px;
    left: 4px; bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .modern-slider { background-color: #ffcc00; }
input:checked + .modern-slider:before { transform: translateX(30px); }


/* The Grid (5 Cards Across) */
.card-grid2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 15px;
    align-items: start; /* Keeps cards at the top when drawer opens */
    max-width: 1300px;
    justify-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 10px 20px;
}


/* Centered Button Under Card */
.button-wrapper {
    display: flex;          /* Places children side-by-side */
    align-items: center;    /* Centers button and icon vertically */
    justify-content: center; /* Keeps the group centered under the card */
    gap: 12px;              /* Space between button and icon */
    margin-top: 10px;
    width: 100%;
}

.details-btn {
    padding: 8px 20px;
    border: 2px solid #7e7d7d;
    display: inline-block;
    background: #ffb81c; 
    color: #000;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-top: -10px;
}

.details-btn:hover {
    background: #000; 
    color: #ffb81c;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 184, 28, 0.4);
}

.details-btn.active-black {
    background: #000; 
    color: #ffb81c;
    border-color: #e5e4e2;      /* Platinum border */
    transform: scale(1.05);      /* Keeps the slight "pop" effect */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); 
    outline: none;
}


/* Modal Styling Fixes */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Use dvh to account for mobile browser bars */
    height: 100dvh; 
    display: none; /* JavaScript changes this to flex */
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9000;
    /* Prevent the overlay itself from being scrollable */
    overflow: hidden;
}


.modal-window {
    display: flex;
    flex-direction: column; /* Stacks image top, text bottom */
    align-items: center;    /* Centers everything horizontally */
    justify-content: center;
    position: relative;
    width: 95vw;
    max-width: 500px;
    height: auto;           /* Let the content dictate the height */
    max-height: 90vh;
    background-color: transparent;
    margin: 0 auto;
    position: relative;
}


/* The actual image */
#modal-img {
    width: 100%;
    max-height: 70dvh;
    object-fit: contain; /* Forces uniform size without distortion */
    border-radius: 0;
    filter: drop-shadow(0 0 15px rgba(255, 184, 28, 0.4));
    cursor: pointer; /* Shows the hand icon so users know they can click */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optional: Add a "click to flip" hint under the image */
.modal-window::after {
    position: absolute;
    bottom: 0;
    color: #ffb81c;
    transform: translateX(-50%);
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    opacity: 0.8;
    pointer-events: none; /* Ensures the text doesn't block card clicks */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Adjustments for Desktop specifically */
@media (max-width: 767px) {
    .card-grid2 {
        display: flex;
        flex-wrap: wrap;    /* Allow items to wrap to next line */
        gap: 10px;
    }

    /* The Overlay should lock the background */
    .modal-overlay {
        width: 100vw;
        height: 100vh;
        overflow: hidden; /* Prevents background scrolling */
    }

    .modal-window {
        /* Use 95% of the screen width - leaves a tiny 2.5% gap on each side */
        width: 95vw; 
        max-width: 95vw;
        margin: auto;
        padding: 0;
        box-sizing: border-box;
    }

    #modal-img {
        /* Ensures the image never pushes the window wider than the screen */
        width: 100%;
        height: auto;
        max-height: 70vh; 
        object-fit: contain;
    }

    /* Keep the X from pushing the screen width to the right */
    .close-x {
        top: -65px;
        right: 10px; /* Moves it inside the screen edge */
        font-size: 70px; /* Slightly scaled down for mobile to keep it safe */
        -webkit-text-stroke: 1.5px #ffb81c;
    }

    .flip-hint {
        font-size: 12px;
        margin-top: 5px; /* Pulls it even closer for tight mobile screens */
    }

    .card-item {
        flex: 0 0 calc(50% - 5px); 
        order: 1; /* Default order for all cards */
    }

    /* Make drawers take up full width */
    .card-drawer {
        flex: 0 0 100%;
        width: 100%;
    }

    /* --- SPECIFIC MOBILE ORDERING --- */
    
    /* Row 1: Cards 1 & 2 (Order 1) -> Drawers 1 & 2 (Order 2) */
    .card-item[data-card-id="1"], 
    .card-item[data-card-id="2"] { order: 1; }
    #drawer-1, #drawer-2 { order: 2; }

    /* Row 2: Cards 3 & 4 (Order 3) -> Drawers 3 & 4 (Order 4) */
    .card-item[data-card-id="3"], 
    .card-item[data-card-id="4"] { order: 3; }
    #drawer-3, #drawer-4 { order: 4; }

    /* Row 3: Card 5 & 6 (Order 5) -> Drawer 5 & 6 (Order 6) */
    /* FIXED: Added commas here */
    .card-item[data-card-id="5"],
    .card-item[data-card-id="6"] { order: 5; }
    #drawer-5, #drawer-6 { order: 6; }
}

.flip-hint {
    margin-top: 10px;       /* ADJUST THIS to move text closer or further */
    color: #ffb81c;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    width: 100%;            /* Ensures true centering */
    pointer-events: none;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}


.close-x {
    position: absolute;
    right: 10px; 
    /* Spacing: Cut from -45px to -20px to bring it much closer to the card */
    top: -70px; 
    color: #ffb81c;
    
    /* Size: Bumped up by 1.5x from 50px to 75px */
    font-size: 75px; 
    
    /* Thickness: Using bold weight and a text-stroke for extra "heft" */
    font-weight: 900; 
    -webkit-text-stroke: 2px #ffb81c; /* Adds actual thickness to the character */
    
    cursor: pointer;
    line-height: 0.8;
    padding: 5px;
    z-index: 10002;
    transition: transform 0.2s, color 0.2s;
}

.close-x:hover {
    color: #ffffff;
    -webkit-text-stroke: 2px #ffffff;
    transform: scale(1.1); /* Slight pop on hover for better UX */
}

/* 3D Flip Logic */
.card-container2 {
    perspective: 1200px;
    width: 250px;
    height: 350px;
    cursor: pointer;
    position: relative;
    margin: 0 auto;
    border: 2px solid #444;    /* Dark Steel */
    outline: 1px solid #ffb81c; /* Thin Gold Inner Line */
    outline-offset: -5px;      /* Pulls gold line inside the card */
    padding: 2px;
    background: linear-gradient(145deg, #1a1a1a, #000);
}

.card-container2:hover {
    /* Transitions to a bright, cold silver/platinum border */
    border-color: #a0a0a0; 
    
    /* A subtle, sharp lift */
    transform: translateY(-10px) scale(1.05); 
    
    /* Changes the warm gold glow to a clean, white/silver metallic sheen */
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.15), 
                0 5px 15px rgba(0, 0, 0, 0.5);
                
    /* Optional: Makes the card scan look slightly more "glossy" on hover */
    filter: brightness(1.1) contrast(1.05);
}

.card-container2 img {
    display: block;
    width: 100%;
    height: 350px;         /* Keeps the grid rows perfectly aligned */
    
    /* CHANGE THIS: 'contain' ensures the whole scan fits inside the 350px height */
    object-fit: contain;   
    
    /* This fills any side gaps if the card is narrow (common for tall cards) */
    background-color: #0a0a0a; 
    
    /* Optional: Adds a slight "inner shadow" to make the card look recessed */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    margin-bottom: 0px ;
    padding-bottom: 0px ;
}

/* Adjust the class name to match your specific button class */
.card-container2 .details-btn {
    width: 100%;                  /* Matches card width */
    margin-top: -2px;             /* Slight overlap to hide the seam */
    border-top: none;             /* Removes the line between card and button */
    border-radius: 0 0 10px 10px; /* Only rounds the bottom corners */
    z-index: 2;         /* Ensures it stays on top of any shadows */
}

.card-inner2 {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d; /* Required for the 3D effect */
}

/* The actual flip action */
.card-container2.is-flipped .card-inner2 {
    transform: rotateY(180deg);
}

/* 3. BOTH sides must be absolute to stack on the exact same spot */
.card-front, .card-back {
    position: absolute; /* THIS stacks them */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* THIS hides the 'mirrored' side */
    -webkit-backface-visibility: hidden; /* Safari support */

    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 4. The Front stays at 0 degrees */
.card-front {
    transform: rotateY(0deg) !important;
    backface-visibility: hidden;
}

/* Ensure the image inside doesn't have an inherited mirror effect */
.card-front img {
    transform: scaleX(1) !important;
}

/* 5. The Back is pre-rotated 180 degrees so it faces 'away' */
.card-back {
    /* Rotate the back 180deg AND push it 1px "forward" from its own perspective */
    /* This places it exactly behind the front, facing the opposite way */
    transform: rotateY(180deg) translateZ(1px);
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;   
}

/* Drawer Logic */
.card-drawer {
    grid-column: 1 / -1; 
    display: none;       
    width: 100%;
    background: #ffffff; /* White background as requested */
    color: #000000;       /* Black text */
    border: 2px solid #ffb81c;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    margin-top: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.card-drawer.is-open {
    border-top: 2px solid #ffcc00;
    margin-top: 10px;
    display: block;      /* This pushes the rest of the grid down */
    margin-bottom: 20px;
}

/* Ensure drawer text stays black */
.drawer-text p, .drawer-text strong {
    color: #000;
}

.drawer-content {
    padding: 20px;
    display: flex;
    gap: 20px;
}

.flip-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 10; /* Keeps it above the image */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    pointer-events: none; /* Let the click pass through to the card */
}

/* Modal Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    background: #000;
    margin: 5% auto;
    padding: 20px;
    border: 2px solid #ffb800; /* Your gold border */
    width: 80%;
    max-width: 500px;
    border-radius: 15px;
    position: relative;
    
    /* THE KEY FIX: This allows the X to actually leave the gold box */
    overflow: visible !important; 
    
    box-shadow: 0 0 25px rgba(255, 184, 0, 0.4);
}



/* Match Grid 3 behavior to Grid 2 */
.card-grid3 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* Force Square Corners for Grid 3 specifically */
.card-grid3 .card-container2,
.card-grid3 .card-front,
.card-grid3 .card-back,
.card-grid3 .card-img {
    border-radius: 0 !important;
}


@media (max-width: 767px) {
    .card-grid3 {
        display: flex;
        flex-wrap: wrap;
    }
    .card-item3 {
        flex: 0 0 calc(50% - 10px); /* 2 across on mobile */
    }
    .card-drawer3 {
        flex: 0 0 100%; /* Full width drawer */
    }
}



.rotate-0   { transform: rotate(0deg); }
.rotate-90  { transform: rotate(270deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-270 { transform: rotate(90deg); }


.rotate-btn {
    display: inline-flex;       /* Ensures it behaves like the Details button */
    vertical-align: middle;     /* Aligns the center of this button with the Details button */
    margin-bottom: 0px;         /* Removes any odd bottom spacing */
    margin-left: 15px;          /* Pushes it further to the right under the card */
    
    /* Ensure the height matches your Details button exactly */
    height: 34px;               /* Adjust this number to match your Details button height */
    width: 34px;                /* Keeps it a perfect circle */
    
    transition: background-color 0.3s ease, color 0.3s ease;
}

.rotate-btn:hover {
    background-color: #ffffff !important; /* Turns background white on hover */
    color: #000000 !important;            /* Turns icon black on hover */
    cursor: pointer;
}

/* Button inside the Modal */
.modal-rotate-btn {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background-color: #ffcc00 !important;
    color: #000 !important;
    width: 60px !important; /* Increased size */
    height: 60px !important; /* Increased size */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10002;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.modal-rotate-btn i {
    font-size: 30px !important; /* Larger Icon */
}

.modal-rotate-btn:hover {
    transform: scale(1.1);
    background: #fff;
}

#rotate-modal {
    position: absolute;
    bottom: 20px;    /* Distance from the bottom of the card */
    right: 20px;     /* Distance from the right of the card */
    background: #ffb800; /* Matching your library's gold theme */
    color: #000;      /* High contrast black icon */
    border: 2px solid #000;
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Makes the button a circle */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* Adds depth to make it pop */
    z-index: 1010;
    transition: transform 0.2s, background 0.2s;
}

#rotate-modal:hover {
    background: #fff; /* Flashes white on hover */
    transform: scale(1.1); /* Slightly grows when hovered */
}

.rotate-icon-style {
    background: #ffb81c !important;         /* Matches Details gold */
    border: 2px solid #7e7d7d !important;   /* Matches Details grey border */
    border-radius: 50px !important;         /* Matches Details pill shape */
    padding: 8px 20px !important;           /* Matches Details padding */
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    /* ALIGNMENT: Pushes it right and matches Details margin-top exactly */
    margin-left: 15px; 
    margin-top: -10px; 
    
    transition: all 0.3s ease;
}

/* Forces the SVG inside to be black */
.rotate-icon-style svg path {
    stroke: #000000 !important;
    stroke-width: 2.5px;
}

/* Hover effect: Scales up and rotates the ICON ONLY, keeps the button 10px up */
.rotate-icon-style:hover {
    background-color: #ffb800 !important;
    color: #000000 !important;
}

.rotate-icon-style:hover svg {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

/* Container to keep the button relative to the image */
.modal-content-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible !important; /* This allows the X to exit the box */
}

/* The Gold Circular Button */
.modal-rotate-btn {
    position: absolute;
    bottom: -15px; /* Moves it down */
    right: -15px;  /* Moves it right */
    background-color: #ffb800; /* Gold color */
    color: #000;
    border: 2px solid #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 0px 0px 10px rgba(255, 184, 0, 0.5);
}

.modal-rotate-btn:hover {
    background-color: #fff;
    transform: scale(1.1);
}

.modal-rotate-btn i {
    font-size: 18px;
    font-weight: bold;
}


#card-modal {
    display: none; /* This stays hidden on page load */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    
    /* Center everything inside when it IS displayed */
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.modal-caption {
    color: #ffcc00 !important; /* Direct Gold Hex */
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-top: 20px !important;
    font-size: 24px !important; /* Larger text */
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#close-modal {
    position: absolute !important;
    
    /* These coordinates place it in the black space ABOVE the gold border */
    top: -75px !important;    
    right: -15px !important;  

    /* Look and Feel */
    color: #ffb800 !important;
    font-size: 70px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    z-index: 99999 !important; /* Ensures it sits above the blur effect */
    line-height: 1 !important;
    display: block !important;
}

#close-modal:hover {
    color: #ffffff !important;
}


.cardlinks {
    --card-rotation: 0deg;
    /* Keeps your existing hover/pop-out effects while adding rotation */
    transform: translateY(0) rotate(var(--card-rotation)) !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 3. Keep buttons upright when the card rotates */
.cardlinks .button-wrapper {
    transition: transform 0.4s ease;
    transform: rotate(calc(-1 * var(--card-rotation)));
}

/* 4. Ensure hover effect still works with rotation */
.cardlinks:hover {
    transform: translateY(-10px) scale(1.15) rotate(var(--card-rotation)) !important;
}

.section-below-grid, .next-container-class { 
    user-select: none; 
    -webkit-user-select: none; 
}

/* Ensure the card wrapper doesn't allow its children to trigger neighbor events */
.card-wrapper {
    position: relative;
    isolation: isolate;
    z-index: 1;
}

.card-item, .rotate-icon-style, .section-below-grid {
    user-select: none;
    -webkit-user-select: none;
}