/* Root Variables - Your existing ones are good */
:root {
    --orange: #FFA500;
    --steel-grey: #71797E;
    --ghost-white: #F8F8FF;
    --black: #000000;
    --text-on-dark: #EAEAEA; /* For general text on dark backgrounds */
    --box-shadow-color: hsla(30, 100%, 50%, 0.5);
    /* Theme-specific darks */
    --theme-dark-bg: #22252A; /* Primary dark background for the page */
    --theme-content-bg: #2E3238; /* Background for content boxes like .game, .year */
    --theme-input-bg: #3a3f47;   /* Background for form inputs */
    --theme-border-light: #4a4f58; /* Lighter border for dark elements */
}

/* Base Styles from your original, with theme adjustments */
body {
    font-family: 'Trebuchet MS', Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--theme-dark-bg); /* Using themed dark background */
    color: var(--text-on-dark); /* Using themed text color */
}

.container {
    width: 85%; /* Slightly wider for modern feel */
    max-width: 1200px; /* Max width for large screens */
    margin: 30px auto; /* Consistent vertical margin */
    overflow: hidden;
    padding: 0 15px; /* Add some horizontal padding */
    box-sizing: border-box;
}
.background-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Ensure it's behind the content */
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1002%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(45%2c 41%2c 41%2c 1)'%3e%3c/rect%3e%3cg transform='translate(0%2c 0)' stroke-linecap='round' stroke='url(%26quot%3b%23SvgjsRadialGradient1003%26quot%3b)'%3e%3cpath d='M150 255.09 L150 304.9' stroke-width='15'%3e%3c/path%3e%3cpath d='M170 131.96 L170 428.04' stroke-width='15'%3e%3c/path%3e%3cpath d='M190 114.42 L190 445.58' stroke-width='15'%3e%3c/path%3e%3cpath d='M210 114.44 L210 445.56' stroke-width='15'%3e%3c/path%3e%3cpath d='M230 213.51 L230 346.49' stroke-width='15'%3e%3c/path%3e%3cpath d='M250 226.82 L250 333.18' stroke-width='15'%3e%3c/path%3e%3cpath d='M270 242.19 L270 317.81' stroke-width='15'%3e%3c/path%3e%3cpath d='M290 132.03 L290 427.97' stroke-width='15'%3e%3c/path%3e%3cpath d='M310 75.97 L310 484.03' stroke-width='15'%3e%3c/path%3e%3cpath d='M330 140.17 L330 419.83' stroke-width='15'%3e%3c/path%3e%3cpath d='M350 79.03 L350 480.97' stroke-width='15'%3e%3c/path%3e%3cpath d='M370 238.71 L370 321.29' stroke-width='15'%3e%3c/path%3e%3cpath d='M390 63.29 L390 496.71' stroke-width='15'%3e%3c/path%3e%3cpath d='M410 124.6 L410 435.4' stroke-width='15'%3e%3c/path%3e%3cpath d='M430 104.31 L430 455.69' stroke-width='15'%3e%3c/path%3e%3cpath d='M450 197.12 L450 362.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M470 240.84 L470 319.16' stroke-width='15'%3e%3c/path%3e%3cpath d='M490 70.62 L490 489.38' stroke-width='15'%3e%3c/path%3e%3cpath d='M510 197.34 L510 362.66' stroke-width='15'%3e%3c/path%3e%3cpath d='M530 185.75 L530 374.25' stroke-width='15'%3e%3c/path%3e%3cpath d='M550 233.06 L550 326.94' stroke-width='15'%3e%3c/path%3e%3cpath d='M570 97.81 L570 462.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M590 95.45 L590 464.55' stroke-width='15'%3e%3c/path%3e%3cpath d='M610 96.88 L610 463.12' stroke-width='15'%3e%3c/path%3e%3cpath d='M630 177.42 L630 382.58' stroke-width='15'%3e%3c/path%3e%3cpath d='M650 105.92 L650 454.08' stroke-width='15'%3e%3c/path%3e%3cpath d='M670 186.93 L670 373.07' stroke-width='15'%3e%3c/path%3e%3cpath d='M690 256.46 L690 303.54' stroke-width='15'%3e%3c/path%3e%3cpath d='M710 93.61 L710 466.39' stroke-width='15'%3e%3c/path%3e%3cpath d='M730 110.04 L730 449.96' stroke-width='15'%3e%3c/path%3e%3cpath d='M750 196.95 L750 363.05' stroke-width='15'%3e%3c/path%3e%3cpath d='M770 178.28 L770 381.72' stroke-width='15'%3e%3c/path%3e%3cpath d='M790 218.09 L790 341.92' stroke-width='15'%3e%3c/path%3e%3cpath d='M810 74.78 L810 485.22' stroke-width='15'%3e%3c/path%3e%3cpath d='M830 83.28 L830 476.73' stroke-width='15'%3e%3c/path%3e%3cpath d='M850 183.53 L850 376.48' stroke-width='15'%3e%3c/path%3e%3cpath d='M870 249.84 L870 310.17' stroke-width='15'%3e%3c/path%3e%3cpath d='M890 123.81 L890 436.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M910 183.99 L910 376.01' stroke-width='15'%3e%3c/path%3e%3cpath d='M930 66.54 L930 493.46' stroke-width='15'%3e%3c/path%3e%3cpath d='M950 236.62 L950 323.38' stroke-width='15'%3e%3c/path%3e%3cpath d='M970 109.81 L970 450.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M990 133.38 L990 426.63' stroke-width='15'%3e%3c/path%3e%3cpath d='M1010 208.34 L1010 351.65' stroke-width='15'%3e%3c/path%3e%3cpath d='M1030 218.09 L1030 341.91' stroke-width='15'%3e%3c/path%3e%3cpath d='M1050 248.28 L1050 311.71' stroke-width='15'%3e%3c/path%3e%3cpath d='M1070 191.13 L1070 368.87' stroke-width='15'%3e%3c/path%3e%3cpath d='M1090 141.13 L1090 418.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M1110 249.12 L1110 310.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M1130 84.91 L1130 475.09' stroke-width='15'%3e%3c/path%3e%3cpath d='M1150 211.07 L1150 348.93' stroke-width='15'%3e%3c/path%3e%3cpath d='M1170 246.77 L1170 313.23' stroke-width='15'%3e%3c/path%3e%3cpath d='M1190 158.69 L1190 401.31' stroke-width='15'%3e%3c/path%3e%3cpath d='M1210 218.26 L1210 341.74' stroke-width='15'%3e%3c/path%3e%3cpath d='M1230 113.88 L1230 446.12' stroke-width='15'%3e%3c/path%3e%3cpath d='M1250 187.94 L1250 372.06' stroke-width='15'%3e%3c/path%3e%3cpath d='M1270 185.73 L1270 374.27' stroke-width='15'%3e%3c/path%3e%3cpath d='M1290 180.03 L1290 379.97' stroke-width='15'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1002'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='720' cy='280' r='625.75' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1003'%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='0.25'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 124%2c 0%2c 1)' offset='1'%3e%3c/stop%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e");    background-repeat: repeat-y;
            background-size: contain;
            background-position: center;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: monospace;
        }
/* Showcase Section - Your existing styles are largely fine, minor theme tweaks */
#showcase {
    min-height: 450px;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://images.squarespace-cdn.com/content/5c378107aa49a197694d5563/8ca5a62a-b689-4d24-bf10-b22deb39622c/P1030406.JPG?content-type=image%2Fjpeg') no-repeat center center/cover;
    text-align: center;
    color: var(--ghost-white);
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7); /* Slightly stronger shadow */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
    margin-bottom: 40px; /* More space after showcase */
    border-bottom: 3px solid var(--orange); /* Orange accent */
}
#showcase h1 {
    margin-top: 0;
    font-size: clamp(2.5rem, 6vw, 3.8rem);
    margin-bottom: 15px;
    color: var(--ghost-white); /* Keep white for showcase title if on image */
}
#showcase p {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    max-width: 700px;
    color: var(--text-on-dark);
}

/* General Section Titles */
h2 {
    text-align: center;
    color: var(--orange);
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    margin-top: 40px; /* Consistent top margin for sections */
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

/* Styling for Content Boxes (.game, .year, new .info-section etc.) */
.game, .year, .info-section, .olympics-gallery-wrapper, .signup-form-wrapper {
    background: var(--theme-content-bg);
    padding: 25px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    border: 1px solid var(--theme-border-light);
    color: var(--text-on-dark);
}
.game h3, .year h3, .info-section h3 {
    margin-top: 0;
    color: var(--orange);
    font-size: 1.5em;
    border-bottom: 1px solid var(--orange);
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.game p, .year p, .year li, .info-section p, .info-section li {
    font-size: 0.95em;
    margin-bottom: 10px;
    color: #ccc; /* Lighter than main text for readability within boxes */
}
.year ul, .info-section ul { /* Ensure info section lists are also unstyled */
    list-style-type: none;
    padding-left: 0;
}
.year li, .info-section li {
    padding: 6px 0;
    border-bottom: 1px solid var(--theme-border-light);
}
.year li:last-child, .info-section li:last-child {
    border-bottom: none;
}
.game { /* Keep your hover effect */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.game:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 6px 18px var(--box-shadow-color);
}

/* Event Grid (for current events) */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* Hall of Fame Container (for past olympics) */
#past-olympics-container {
    display: grid; /* Can also be grid for consistency */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* Modal Styling */
.modal {
  position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%;
  overflow: auto; background-color: rgba(0,0,0,0.8); /* Darker overlay */
  display: none; align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
}
.modal-content { /* Re-using .game styling but overriding background for more pop */
  background-color: var(--theme-dark-bg); /* Darker than content boxes */
  margin: auto; padding: 30px; border: 2px solid var(--orange);
  width: 90%; max-width: 600px; border-radius: 10px; position: relative;
  color: var(--text-on-dark); box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  animation: modalOpen 0.3s ease-out;
}
@keyframes modalOpen {
    from { opacity: 0; transform: translateY(-20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.close-button {
  color: #ccc; position: absolute; top: 15px; right: 20px;
  font-size: 32px; font-weight: bold; line-height: 1; cursor: pointer;
  transition: color 0.2s;
}
.close-button:hover, .close-button:focus { color: var(--orange); }
#modal-event-name { margin-top: 0; color: var(--orange); font-size: 1.8em; margin-bottom: 20px; }
#modal-event-description { font-size: 1em; margin-bottom: 25px; line-height: 1.7; color: #ddd; }
#modal-event-rules-link {
    display: inline-block; padding: 10px 20px; background-color: var(--orange);
    color: var(--black); text-decoration: none; border-radius: 5px;
    font-weight: bold; transition: background-color 0.2s, transform 0.2s;
    font-size: 1em;
}
#modal-event-rules-link:hover { background-color: #ffc14d; transform: scale(1.03); }

/* Photo Slider Section */
#olympics-gallery { /* This section can just use default section spacing */
    margin-top: 40px;
    margin-bottom: 40px;
}
.photo-slider-container.olympics-slider { /* Your existing good styles, themed */
    position: relative; width: 100%; max-width: 750px; /* Slightly larger */
    margin: 20px auto; overflow: hidden; border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    border: 2px solid var(--steel-grey); /* Themed border */
}
.olympics-slider .photo-slides { display: flex; }
.olympics-slider .photo-slide { min-width: 100%; display: none; position: relative; }
.olympics-slider .photo-slide.active-photo { display: block; }
.olympics-slider .photo-slide img {
    width: 100%; height: auto; display: block; max-height: 480px; /* Max height for slider images */
    object-fit: cover; border-radius: 8px; /* Slightly rounded inner image */
}
.olympics-slider .photo-caption {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background-color: rgba(0, 0, 0, 0.75); color: var(--ghost-white);
    padding: 12px 15px; text-align: center; font-size: 0.95em; box-sizing: border-box;
}
.olympics-slider .slider-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background-color: rgba(20, 20, 20, 0.7); color: var(--orange);
    border: 1px solid var(--orange); padding: 10px 15px; font-size: 28px;
    cursor: pointer; z-index: 10; border-radius: 50%; opacity: 0.8;
    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.olympics-slider .slider-btn:hover { opacity: 1; background-color: var(--orange); color: var(--black); }
.olympics-slider .prev-photo { left: 15px; }
.olympics-slider .next-photo { right: 15px; }
.olympics-slider .slider-dots-photo {
    position: absolute; bottom: 20px; /* Slightly more space */
    left: 50%; transform: translateX(-50%); display: flex; z-index: 10;
}
.olympics-slider .slider-dots-photo .dot {
    height: 12px; width: 12px; margin: 0 7px;
    background-color: var(--steel-grey); border: 1px solid rgba(0,0,0,0.3);
    border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease;
}
.olympics-slider .slider-dots-photo .dot.active { background-color: var(--orange); }

/* Sign-up Section */
#olympics-signup {
    background-color: var(--theme-content-bg); /* Consistent with other content boxes */
    padding: 40px 20px;
    margin-top: 50px;
    border-top: 3px solid var(--orange);
    text-align: center;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
#olympics-signup .container { width: 100%; max-width: 700px; padding: 0; } /* Center content within signup */
#olympics-signup h2 { color: var(--orange); margin-bottom: 20px; margin-top: 0; }
.signup-intro, .signup-challenge {
    color: var(--text-on-dark); font-size: 1.1em;
    max-width: 650px; margin-left: auto; margin-right: auto;
    margin-bottom: 30px; line-height: 1.7;
}
.signup-form-container { /* Box for the form itself */
    background-color: rgba(0, 0, 0, 0.3);
    padding: 25px; border-radius: 8px; max-width: 450px;
    margin: 20px auto; box-shadow: inset 0 1px 5px rgba(0,0,0,0.4);
}
#interestForm .form-group { margin-bottom: 20px; text-align: left; }
#interestForm label {
    display: block; margin-bottom: 8px;
    color: var(--text-on-dark); font-weight: bold; font-size: 0.9em;
}
#interestForm input[type="text"],
#interestForm input[type="email"] {
    width: 100%; padding: 12px; box-sizing: border-box;
    border: 1px solid var(--theme-border-light);
    background-color: var(--theme-input-bg);
    color: var(--ghost-white); border-radius: 5px; font-size: 1em;
}
#interestForm input[type="text"]:focus,
#interestForm input[type="email"]:focus {
    outline: none; border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--box-shadow-color); /* More prominent focus */
}
.cta-button { /* General CTA Button style */
    display: inline-block; padding: 12px 28px; background-color: var(--orange);
    color: var(--black); text-decoration: none; border-radius: 5px;
    font-weight: bold; font-size: 1.1em; margin-top: 15px;
    border: none; /* Remove border if bg is colored */
    transition: background-color 0.2s, transform 0.2s;
    cursor: pointer;
}
.cta-button:hover:not(:disabled) {
    background-color: #ffc14d; /* Lighter orange */
    transform: scale(1.03);
}
.cta-button:disabled {
    background-color: var(--steel-grey);
    color: #aaa;
    cursor: not-allowed;
}
#interest-form-thank-you {
    color: var(--orange); font-weight: bold; font-size: 1.15em;
    margin-top: 25px;
}

/* Footer */
footer {
    padding: 25px 20px;
    margin-top: 50px;
    color: var(--ghost-white);
    background-color: #1c1e22; /* Very dark grey/black */
    text-align: center;
    border-top: 2px solid var(--orange);
}

/* Responsive Adjustments from your original, ensure they still apply well */
@media(max-width: 768px) {
    .container { width: 95%; }
    #showcase { min-height: 350px; padding-top: 80px; /* Ensure content visible */ }
    #showcase h1 { font-size: 2.2rem; }
    #showcase p { font-size: 1rem; }
    .events-grid, #past-olympics-container { grid-template-columns: 1fr; }
    h2 { font-size: 1.7rem; }
    .content-box h3, .game h3, .year h3, .info-section h3 { font-size: 1.3em; }
    #olympics-signup { padding: 30px 15px; }
}

@media(max-width: 480px) {
    #showcase h1 { font-size: 1.8rem; }
    #showcase p { font-size: 0.95rem; }
    h2 { font-size: 1.6rem; }
    .content-box h3, .game h3, .year h3, .info-section h3 { font-size: 1.2em; }
    .content-box p, .content-box li { font-size: 0.9em; }
    .cta-button { font-size: 1em; padding: 10px 20px; }
    .photo-slider-container.olympics-slider { max-width: 95%; margin: 20px auto 30px auto; }
    .olympics-slider .photo-slide img { max-height: 300px; }
    .modal-content { padding: 20px; max-width: 90%; }
    #modal-event-name { font-size: 1.4em; }
    #modal-event-description { font-size: 0.95em; }
}