/* style.css
/* ================================
--- 1.0 Design Tokens (Root) ---
================================
*/
:root {
/* Colors */
--color-background-deep-space: #0a192f;
--color-background-space: #2b3049;
--color-background-light-navy: #112240;
--color-text-primary: #ffffff;
--color-text-secondary: #bbc8f3;
--color-text-tertiary: #47A6E1;
--color-accent-orange: #F59257;
--color-accent-light-orange: #FFDC89;
--color-accent-yellow: #F8F3DA;
--color-feedback-success: #28a745;
--color-feedback-error: #dc3545;
--color-text-on-accent: #0a192f;
--color-link-orange: #F59257;
--color-linkhover-orange: #c77647;

/* Typography */
--font-primary: 'Nunito', sans-serif;
--font-display: 'Nunito', sans-serif;
--font-size-sm: 0.8rem;
--font-size-md: 0.9rem;
--font-size-base: 1rem;
--font-size-lg: 1.2rem;
--font-size-xl: 1.5rem;
--font-size-xxl: 2rem;
--font-size-xxxl: 2.5rem;

/* Spacing */
--space-xs: 0.5rem;    /* 8px */
--space-sm: 0.8rem;    /* 12.8px */
--space-md: 1rem;      /* 16px */
--space-lg: 1.5rem;    /* 24px */
--space-xl: 2rem;      /* 32px */
--space-xxl: 2.5rem;   /* 40px */
--space-xxxl: 3rem;    /* 48px */
--space-section: 6.25rem; /* 100px */

/* Borders */
--radius-md: 10px;
--radius-lg: 50px;
--border-width-sm: 1px;
--border-width-md: 2px;
--border-width-lg: 3px;

/* Layout */
--nav-height: 4.375rem; /* 70px */
}

/* ================================
--- 2.0 Global Styles     ---
================================
*/

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

html {
scroll-behavior: smooth;
}

body {
background-color: var(--color-background-space);
font-family: var(--font-primary);
color: var(--color-text-primary);
line-height: 1.6;
overflow-x: hidden;
}

body.utility-page {
display: grid;
place-items: center;
min-height: 100vh;
padding: var(--space-xl);
overflow-x: auto;
}

.content-wrapper {
position: relative;
z-index: 5;
background-image: linear-gradient(to bottom, #2b3049, #435479, #5C4F73);
}

h1, h2, h3, h4 {
margin-bottom: var(--space-md);
font-family: var(--font-display);
color: var(--color-accent-light-orange);
line-height: 1.2;
}

h2 {
font-size: var(--font-size-xxxl);
text-align: center;
}

/* Add separators to section headers */
section > h2 {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-lg);
}

section > h2::before,
section > h2::after {
content: '';
flex-grow: 1;
height: 2px;
background-color: rgba(255, 220, 137, 0.3);
max-width: 400px;
}


section {
max-width: 1200px;
margin-inline: auto;
padding-block: var(--space-section);
padding-inline: 5%;
position: relative;
z-index: 2;
scroll-margin-top: var(--nav-height);
}

.section-text {
max-width: 700px;
margin-inline: auto;
margin-block: var(--space-md);
text-align: center;
}

.section-description {
margin-top: var(--space-xxxl);
}

.centered-cta {
text-align: center;
margin-top: 4rem;
}

/* ================================
--- 3.0 Components        ---
================================
*/

/* --- 3.1 Promotional Banner --- */
.promotional-banner {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
gap: 0.625rem; /* 10px */
padding-inline: 2.5rem;
padding-block: 0.625rem;
position: relative;
background-color: var(--color-accent-light-orange);
font-size: var(--font-size-md);
font-weight: bold;
color: var(--color-text-on-accent);
transform: translateY(-100%);
animation: slideDown 0.5s 0.5s forwards;
}

.promotional-banner a {
color: var(--color-text-on-accent);
text-decoration: underline;
font-weight: bold;
}

.promotional-banner-close {
position: absolute;
top: 50%;
right: 1rem;
border: 0;
background: none;
color: var(--color-text-on-accent);
font-size: var(--font-size-lg);
transform: translateY(-50%);
cursor: pointer;
}

@keyframes slideDown {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}

/* --- 3.2 Main Navigation --- */
.main-nav {
display: flex;
justify-content: flex-end;
align-items: center;
height: var(--nav-height);
padding-inline: 2%;
position: sticky;
top: 0;
z-index: 1000;
background-color: rgba(43, 48, 73, 0.1);
backdrop-filter: blur(10px);
transition: top 0.3s;
}

.nav-links {
display: flex;
align-items: center;
position: relative;
}

.main-nav a {
padding-block: 0.3125rem; /* 5px */
margin-inline: 0.9375rem; /* 15px */
position: relative;
flex-shrink: 0;
font-weight: bold;
color: var(--color-accent-yellow);
text-decoration: none;
transition: color 0.3s ease;
}

.nav-links a:hover {
color: var(--color-accent-orange);
}

.nav-links a.active-link {
color: var(--color-accent-orange);
}

#active-link-indicator {
height: var(--border-width-md);
position: absolute;
bottom: 0;
left: 0;
background-color: var(--color-accent-orange);
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav-play-btn {
min-width: 100px;
margin-left: 1.875rem; /* 30px */
padding: 0.5rem 1.25rem;
border: 0;
border-radius: var(--radius-lg);
background-color: var(--color-accent-orange);
font-size: var(--font-size-md);
font-weight: bold;
color: var(--color-text-primary) !important;
text-align: center;
text-transform: uppercase;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nav-play-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 107, 8, 0.4);
}

.burger-menu {
display: none;
z-index: 1001;
cursor: pointer;
}

.burger-menu .line {
width: 25px;
height: 3px;
margin-block: 5px;
background-color: var(--color-text-primary);
transition: all 0.3s ease;
}

/* --- 3.3 Hero Section --- */
.stars-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}

.star {
position: absolute;
background-color: white;
border-radius: 50%;
animation-name: twinkle;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

@keyframes twinkle {
0%, 100% {
opacity: 0.5;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}

.hero-scroll-container {
height: 200vh;
position: relative;
z-index: 1;
}

.hero {
height: 100vh;
width: 100%;
position: sticky;
top: 0;
overflow: hidden;
}

.hero-scene {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.8s ease-in-out;
}

.hero-scene.active {
opacity: 1;
pointer-events: auto;
}

.scene-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xs);
position: relative;
z-index: 2;
}

#hero-main-logo {
width: 80vw;
max-width: 700px;
height: 18vh;
margin-bottom: var(--space-md);
background-image: url('../images/hero1-logoTitle.webp');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}

#hero-scene-1 {
background-image: url('../images/hero1-rocketSketch.webp'), url('../images/hero1-characterLogoSimple.webp');
background-position: 1% 80%, 99% 1%;
background-repeat: no-repeat, no-repeat;
background-size: 25vw, 25vw;
}

.hero h2 {
text-shadow: 0 0 2px rgba(43, 48, 73, 1), 0 0 5px rgba(43, 48, 73, 0.9);
}

.hero p {
max-width: 600px;
margin-bottom: var(--space-xs);
font-size: var(--font-size-lg);
text-shadow: 0 0 2px rgba(43, 48, 73, 1), 0 0 5px rgba(43, 48, 73, 0.9);
}

.hero-cta-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-md);
margin-top: var(--space-xs);
}

/* --- 3.3.1 Rocket Counter --- */
.rocket-counter {
position: absolute;
top: var(--space-xxl);
left: var(--space-xxl);
z-index: 10;
display: flex;
align-items: center;
padding: var(--space-sm) var(--space-lg);
background-color: rgba(17, 34, 64, 0.5); /* --color-background-light-navy with alpha */
backdrop-filter: blur(8px);
border: var(--border-width-sm) solid rgba(136, 146, 176, 0.3); /* --color-text-secondary with alpha */
border-radius: var(--radius-md);
box-shadow: 0 5px 20px rgba(0,0,0,0.25);
transform: translateX(-200%); /* Initial state for animation */
animation: slideInFromLeft 0.8s 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.rocket-counter .rocket-counter-icon {
width: 3.5rem;
height: 3.5rem;
object-fit: contain;
margin-right: var(--space-lg);
filter: drop-shadow(0 0 10px rgba(245, 146, 87, 0.6));
animation: floatRocket 4s ease-in-out infinite;
}

.counter-text span {
font-size: var(--font-size-md);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
}

.counter-text p {
font-weight: 900;
font-size: var(--font-size-xxl);
color: var(--color-text-primary);
line-height: 1;
margin: 0;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

@keyframes floatRocket {
0%, 100% {
transform: translateY(0) rotate(-4deg);
}
50% {
transform: translateY(-5px) rotate(4deg);
}
}

@keyframes slideInFromLeft {
to {
transform: translateX(0);
}
}

/* --- 3.3.2 Hero Carousel --- */
.carousel-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: relative;
}

/* Wrapper for the slides, enables grab cursor */
.carousel-slides {
position: relative;
width: 100%;
height: 100%;
flex-grow: 1;
cursor: grab;
}
.carousel-slides:active {
cursor: grabbing;
}

/* Individual slide styling */
.carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s ease-in-out;
display: flex;
justify-content: center;
align-items: flex-end;
pointer-events: none;
}

.carousel-slide.active {
opacity: 1;
pointer-events: auto;
}

.carousel-bg-image {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 600px;
height: 40vh;
max-height: 60%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
z-index: 1;
}

.carousel-slide .scene-content {
padding-bottom: 22vh;
z-index: 3;
}

.carousel-tabs {
display: flex;
justify-content: center;
gap: 1rem;
position: absolute;
bottom: 12%;
z-index: 10;
}

.carousel-tab {
padding: 0.5rem 1.2rem;
border: var(--border-width-md) solid var(--color-accent-yellow);
border-radius: var(--radius-lg);
background-color: transparent;
color: var(--color-accent-yellow);
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
font-family: var(--font-primary);
font-weight: bold;
font-size: var(--font-size-md);
}

.carousel-tab:hover,
.carousel-tab.active {
background-color: var(--color-accent-yellow);
color: var(--color-background-deep-space);
}

.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background-color: rgba(255, 255, 255, 0.1);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
transition: background-color 0.3s;
}

.carousel-arrow:hover {
background-color: rgba(255, 255, 255, 0.3);
}

.carousel-arrow.prev {
left: 2%;
}

.carousel-arrow.next {
right: 2%;
}


/* Button styles for main and contact pages */
.btn-cta {
display: inline-block;
padding: 15px 35px;
border: 0;
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
background-color: var(--color-accent-orange);
font-family: var(--font-display);
font-size: var(--font-size-lg);
font-weight: bold;
color: var(--color-text-primary);
text-decoration: none;
text-transform: uppercase;
text-align: center;
margin-top: var(--space-xs);
box-shadow: 0 5px 15px rgba(255, 107, 8, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
align-self: center;
}

.btn-cta:hover{
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(255, 107, 8, 0.6);
}

.scroll-down-indicator {
position: fixed;
bottom: -10px;
left: 50%;
z-index: 10;
color: var(--color-text-primary);
font-size: var(--font-size-xxxl);
opacity: 0.7;
transform: translateX(-50%);
animation: pulse 2s infinite;
}

@keyframes pulse {
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.1); }
}

/* --- 3.4 Card Components --- */
.card-base {
border-radius: var(--radius-md);
border: var(--border-width-sm) solid #1d2d50;
background: var(--color-background-light-navy);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-base:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* --- 3.5 Play to Learn Section --- */
.boosts-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-lg);
margin-top: 4rem;
}

.boost-card-wrapper {
position: relative;
display: flex;
flex-direction: column;
flex: 1 1 220px;
max-width: 280px;
}

.boost-concept-box {
position: relative;
width: 100%;
padding: var(--space-md);
border-radius: var(--radius-md) var(--radius-md) 0 0;
background: var(--color-background-deep-space);
border: var(--border-width-sm) solid rgba(136, 146, 176, 0.3);
color: var(--color-text-tertiary);
font-style: italic;
font-size: var(--font-size-md);
text-align: center;
margin-bottom: -1px; /* Overlap border */
z-index: 1;
}

.boost-concept-box::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--color-background-deep-space);
}

.boost-concept-box::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 11px solid rgba(136, 146, 176, 0.3);
margin-top: 1px;
z-index: -1;
}

.boost-card {
width: 100%;
overflow: hidden;
border-radius: 0 0 var(--radius-md) var(--radius-md);
}

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

.boost-content {
padding: var(--space-md) var(--space-sm);
text-align: center;
}

.boost-title-content {
padding-bottom: var(--space-xs);
}

.boost-title-content h3 {
margin-bottom: 0;
}

.framework-image {
display: block;
max-width: 800px;
width: 100%;
margin-inline: auto;
margin-block: var(--space-xxxl);
border-radius: var(--radius-md);
}

.learn-more-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-xxxl);
    text-align: center;
}

.learn-more-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    text-decoration: none;
    color: var(--color-text-primary);
}

.learn-more-card:hover {
    border-color: var(--color-accent-orange);
}

.learn-more-logo {
    height: 80px;
    width: 100%;
    object-fit: contain;
    margin-bottom: var(--space-lg);
}

.background-logo {
    /* Add a background to make the black logo visible */
    background-color: var(--color-text-primary);
    padding: 10px;
    border-radius: var(--radius-md);
}

.learn-more-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.learn-more-text h4 {
    color: var(--color-accent-orange);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-lg);
}

.learn-more-text p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    flex-grow: 1;
}

/* --- 3.6 Play to Win Section --- */
.play-to-win-panel {
display: grid;
gap: var(--space-xxxl);
align-items: stretch;
margin-top: var(--space-xxxl);
}

.rewards-column,
.leaderboard-wrapper {
display: flex;
flex-direction: column;
}

.rewards-column h3, .leaderboard-wrapper h3 {
margin-bottom: var(--space-xl);
font-size: var(--font-size-xxl);
color: var(--color-accent-yellow);
text-align: center;
}

/* Rewards */
.rewards-grid {
display: flex;
flex-direction: column;
gap: var(--space-lg);
align-items: center;
}

.reward-card {
display: flex;
align-items: center;
gap: var(--space-lg);
width: 100%;
max-width: 700px;
padding: var(--space-sm);
text-align: left;
}

.reward-text {
flex: 1;
}

.reward-card h4 {
margin-top: 0;
font-size: 1.25rem;
color: var(--color-accent-orange);
}

.reward-image-container {
flex-basis: 180px;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
}

.reward-image {
display: block;
width: 100%;
height: 135px;
object-fit: cover;
}

/* Leaderboard */
.leaderboard {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: var(--space-sm);
border-radius: var(--radius-md);
background: var(--color-background-light-navy);
}

.leaderboard-tabs {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-md);
border-bottom: var(--border-width-sm) solid var(--color-text-secondary);
}

.tab-btn {
padding: 0.625rem 1.25rem;
border: 0;
border-bottom: var(--border-width-lg) solid transparent;
background: none;
font-size: var(--font-size-base);
color: var(--color-text-secondary);
white-space: nowrap;
transition: color 0.3s, border-bottom 0.3s;
cursor: pointer;
}

.tab-btn.active {
color: var(--color-accent-orange);
border-bottom-color: var(--color-accent-orange);
}

.leaderboard-content {
display: none;
flex-grow: 1;
max-height: 500px;
min-height: 0;
margin-top: var(--space-xs);
padding-right: 0.625rem; /* 10px */
overflow-y: auto;
}

.leaderboard-content.active { display: block; }

.score-table {
width: 100%;
border-collapse: collapse;
}

.score-table tr {
border-bottom: var(--border-width-sm) solid #1d2d50;
}

.score-table tr:last-child {
border-bottom: 0;
}

.score-table td {
padding: 3px 5px;
}

.score-table .rank-cell {
    color: var(--color-text-secondary);
    text-align: right;
    padding-left: 0.05rem;
    padding-right: 0.1rem;
    white-space: nowrap;
    width: 1%; /* shrink to content */
    font-weight: bold;
}
.score-table .name-cell {
    color: var(--color-text-primary);
    font-weight: bold;
    width: 100%;
}
.score-table .score-cell {
    color: var(--color-accent-orange);
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
}

.score-table .loading-row td,
.score-table .error-row td {
padding-block: var(--space-xs);
color: var(--color-text-secondary);
font-style: italic;
text-align: center;
}

.leaderboard-footer {
min-height: 1.2em;
margin-top: var(--space-xs);
padding-top: var(--space-xs);
border-top: var(--border-width-sm) solid #1d2d50;
font-size: 0.85rem;
font-style: italic;
color: var(--color-text-secondary);
text-align: right;
}

#weekly-countdown {
display: block;
font-size: var(--font-size-md);
font-style: italic;
color: var(--color-text-secondary);
white-space: nowrap;
}

.leaderboard-note {
max-width: 800px;
margin: var(--space-md) auto 0;
text-align: center;
}

.leaderboard-note a {
color:var(--color-link-orange); /* Standard link blue */
text-decoration: underline;
}
/* Ensure visited links have the same color as unvisited ones */
.leaderboard-note a:visited {
color:var(--color-link-orange);
}
/* Slightly darken the link color on hover for user feedback */
.leaderboard-note a:hover {
color:var(--color-linkhover-orange);
}

/* --- 3.7 Partner with Us & Footer Sections--- */
.partnership-footer-wrapper {
position: relative;
overflow: hidden;
}

.launch-surface-img {
width: 100%;
height: auto;
position: absolute;
bottom: 0;
left: 50%;
z-index: 0;
transform: translateX(-50%);
}

#partnership, #footer {
position: relative;
z-index: 1;
}

.partner-panel {
display: grid;
gap: var(--space-xxxl);
align-items: stretch;
margin-top: var(--space-xxxl);
}

.partner-opportunities,
.collaborator-logos {
display: flex;
flex-direction: column;
}

.partner-opportunities-box {
background: var(--color-background-light-navy);
border-radius: var(--radius-md);
padding: var(--space-xl);
flex-grow: 1;
display: flex;
flex-direction: column;
}

.partner-opportunities h3,
.collaborator-logos h3 {
margin-bottom: var(--space-xl);
font-size: var(--font-size-xxl);
color: var(--color-accent-yellow);
text-align: center;
}

.partner-opportunities-box p {
text-align: center;
margin-bottom: var(--space-xl);
flex-grow: 1;
}

.partner-opportunities-box {
align-self: flex-start;
}

.logos-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-xl);
padding: var(--space-xl);
border-radius: var(--radius-md);
background: var(--color-background-light-navy);
min-height: 200px;
flex-grow: 1;
}

.logo-item a {
display: block;
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 0.8;
}

.logo-item a:hover {
transform: scale(1.05);
opacity: 1;
}

.logo-item img {
max-width: 180px;
height: auto;
vertical-align: middle;
}


footer {
padding: 40px 20px;
border-top: var(--border-width-sm) solid rgba(49, 69, 112, 0.5);
background: transparent;
text-align: center;
}

.footer-nav a {
margin-inline: 15px;
color: var(--color-text-primary);
text-decoration: none;
text-shadow: 0 0 2px rgba(43, 48, 73, 1), 0 0 5px rgba(43, 48, 73, 0.9);
transition: color 0.3s ease;
}

.footer-nav a:hover {
color: var(--color-accent-orange);
}

.copyright-text {
margin-top: var(--space-md);
font-size: var(--font-size-sm);
text-shadow: 0 0 2px rgba(43, 48, 73, 1), 0 0 5px rgba(43, 48, 73, 0.9);
}

/* --- 3.8 Back to Top Button --- */
#back-to-top {
display: none;
width: 50px;
height: 50px;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1001;
border: 0;
border-radius: 50%;
background-color: var(--color-accent-orange);
font-size: var(--font-size-xl);
color: var(--color-text-primary);
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
cursor: pointer;
}

#back-to-top:hover {
transform: scale(1.1);
}

/* ================================
--- 4.0 Contact Form Styles ---
================================
*/

.form-container {
width: 100%;
max-width: 650px;
/*
padding: var(--space-xxl) var(--space-xxxl);
border-radius: var(--radius-md);
border: var(--border-width-sm) solid #1d2d50;
background-color: var(--color-background-light-navy);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
*/
}

.form-container h1 {
margin-bottom: var(--space-xl);
font-size: var(--font-size-xxxl);
color: var(--color-accent-light-orange);
text-align: center;
}

.form-subtitle {
margin-bottom: var(--space-md);
color: var(--color-text-secondary);
text-align: center;
}

.form-instructions {
margin-bottom: var(--space-md);
font-size: var(--font-size-sm);
font-style: italic;
color: var(--color-text-secondary);
text-align: left;
}

.form-status-message {
display: none;
margin-bottom: var(--space-lg);
padding: var(--space-md);
border-radius: 5px;
font-weight: bold;
text-align: center;
}

.form-status-message.success {
display: block;
background-color: var(--color-feedback-success);
color: var(--color-text-primary);
}

.form-status-message.error {
display: block;
background-color: var(--color-feedback-error);
color: var(--color-text-primary);
}

/* Ensure 'info' level messages are visible too */
.form-status-message.info {
    display: block;
    background-color: var(--color-accent-yellow);
    color: var(--color-text-on-accent);
}

/* Additional message level styles for Django messages */
.form-status-message.warning {
    display: block;
    background-color: var(--color-accent-yellow);
    color: var(--color-text-on-accent);
}

.form-status-message.debug {
    display: block;
    background-color: var(--color-light-overlay);
    color: var(--color-text-secondary);
}

/* Spacing for multiple form status messages */
.form-status-message + .form-status-message {
    margin-top: var(--space-sm);
}

.form-group {
margin-bottom: var(--space-lg);
}

.form-container label {
display: block;
margin-bottom: var(--space-xs);
color: var(--color-text-secondary);
font-weight: bold;
}

.required-asterisk {
margin-left: 2px;
color: var(--color-accent-orange);
}

.optional-text {
font-size: 0.9em;
font-weight: normal;
font-style: italic;
color: var(--color-text-secondary);
}

input[type="text"],
input[type="email"],
input[type="url"],
select,
textarea {
width: 100%;
padding: 0.75rem;
border-radius: 5px;
border: var(--border-width-sm) solid var(--color-text-secondary);
background-color: var(--color-background-deep-space);
font-size: var(--font-size-base);
color: var(--color-text-primary);
transition: border-color 0.3s, box-shadow 0.3s;
}

input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 4px;
flex-shrink: 0;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
outline: 0;
border-color: var(--color-accent-orange);
box-shadow: 0 0 0 3px rgba(245, 146, 87, 0.3);
}

textarea {
min-height: 120px;
resize: vertical;
}

.conditional-fields {
display: none;
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: var(--border-width-sm) dashed var(--color-text-secondary);
}

.consent-group {
display: flex;
align-items: flex-start;
text-align: left;
margin-bottom: 1.5rem;
}

.consent-group label {
margin-left: 0.75rem;
font-weight: normal;
font-size: 0.8rem;
color: var(--slate-gray);
line-height: 1.5;
}

.consent-group a {
color: var(--soft-orange);
text-decoration: underline;
}

.consent-group a:hover {
text-decoration: none;
}

.honeypot-field {
position: absolute;
left: -5000px;
top: -5000px;
opacity: 0;
}

.back-link {
display: block;
margin-top: var(--space-xl);
color: var(--color-link-orange);
text-align: center;
text-decoration: none;
transition: color 0.3s;
}
.back-link:hover {
color: var(--color-linkhover-orange);
}

/* ================================
--- 5.0 Content Form Styles ---
================================
*/

.content-container {
width: 100%;
max-width: 100%;
}

.content-container h1 {
font-family: var(--font-heading);
color: var(--color-accent-light-orange);
text-align: center;
margin-bottom: 2rem;
font-size: 2.5rem;
}

.content-container h4 {
display: flex;
align-items: center;
margin-top: 1rem;
margin-bottom: 0.5rem;
gap: 1rem;
}

.content-container h4::after {
content: '';
flex-grow: 1;
height: 2px;
background-color: rgba(255, 220, 137, 0.3);
max-width: 100%;
}

.content-container h5,
.content-container p,
.content-container li {
font-size: 0.9rem;
color: var(--color-text-secondary);
margin-bottom: 1rem;
}

.content-container h5 {
color: var(--color-accent-light-orange);
margin-bottom: 0.1rem;
}

.content-container li {
margin-bottom: 0.1rem;
}

.content-container ul {
list-style-position: inside;
padding-left: 1rem;
}

.content-container ul ul {
list-style-type: circle;
margin-top: 0.1rem;
padding-left: 2rem;
}

.content-container p a {
color: var(--color-link-orange); /* Standard link blue */
text-decoration: underline;
}
/* Ensure visited links have the same color as unvisited ones */
.content-container p a:visited {
color: var(--color-link-orange);
}
/* Slightly darken the link color on hover for user feedback */
.content-container p a:hover {
color: var(--color-linkhover-orange);
}

/* ================================
--- 6.0 Responsive Design ---
================================
*/

@media (min-width: 2000px) {
.carousel-bg-image {
height: 60vh;
}
}

@media (min-width: 1024px) {
.play-to-win-panel,
.partner-panel {
grid-template-columns: repeat(2, 1fr);
gap: 4rem;
}
}


@media (max-width: 1024px) {
.carousel-bg-image {
height: 50vh;
}
}

@media (max-width: 768px) {
    .main-nav {
    justify-content: space-between;
    }

    .burger-menu {
    display: block;
    }

    .nav-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: -100%;
    background-color: #2b3049;
    transition: left 0.4s ease-in-out;
    }

    .nav-links.nav-active {
    left: 0;
    }

    .nav-links a {
    margin-block: var(--space-xl);
    font-size: var(--font-size-xl);
    }

    .nav-play-btn {
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    }

    #active-link-indicator {
    display: none;
    }

    .burger-menu.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
    }
    .burger-menu.toggle .line2 {
    opacity: 0;
    }
    .burger-menu.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
    }

    .score-table td {
    font-size: var(--font-size-sm);
    padding: 2px 4px;
    }

    .carousel-bg-image {
    height: 40vh;
    }
    .carousel-slide .scene-content {
    padding-bottom: 20vh;
    }
    .carousel-tabs {
    flex-wrap: wrap;
    bottom: 8%;
    gap: 0.5rem;
    }
    .carousel-tab {
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
    }
    .hero h2 {
    font-size: 2rem;
    }
    .hero p {
    font-size: 1rem;
    }
    .carousel-arrow {
    width: 35px;
    height: 35px;
    font-size: 1rem;
    }
    .carousel-arrow.prev { left: 1%; }
    .carousel-arrow.next { right: 1%; }

    .reward-card {
    flex-direction: column;
    text-align: center;
    }
    .reward-image-container {
    width: 100%;
    max-width: 350px;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-lg);
    flex-basis: auto;
    }

    .reward-image {
    height: 200px;
    }

    .boosts-container {
    gap: var(--space-xxl);
    }

    .boost-card-wrapper {
    max-width: 320px;
    flex-basis: 100%;
    }

    .rocket-counter {
    padding: var(--space-xs) var(--space-sm);
    }

    .counter-text p {
    font-size: var(--font-size-xxl);
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .carousel-bg-image {
    height: 35vh;
    opacity: 0.7;
    }

    #hero-main-logo {
    height: 30vh;
    margin-top: 0.5rem;
    }

    .hero p {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-lg);
    }

    .rocket-counter {
    padding: var(--space-xs) var(--space-xs);
    padding-bottom: 0;
    }

    .counter-text span {
    font-size: var(--font-size-sm);
    }

    .counter-text p {
    padding-top: 0.5rem;
    font-size: var(--font-size-xl);
    }
}

/* ================================
--- 7.0 Share Page Specifics ---
================================
*/

/* --- General Layout & Typography --- */
.share-page-body {
    font-family: var(--font-primary);
    background: #2b3049; /* Solid fallback */
    background-image: linear-gradient(135deg, #0a192f, #2b3049, #435479);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    color: var(--color-text-primary);
    text-align: center;
    /* Add flex properties for centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.share-container {
    width: 100%;
    max-width: 24rem; /* 384px */
}

.share-header {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.share-page-body .hero-main-logo {
    width: 100%;
    max-width: 240px;
    height: 80px;
    margin: 0.2rem auto 0.5rem auto;
    background-image: url('../images/hero1-logoTitle.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.share-subtitle {
    font-weight: 500;
    margin-bottom: 0;
    color: #fff;
}

/* --- Rocket Card --- */
.rocket-card {
    background-image: linear-gradient(to bottom, rgb(31 41 55), rgb(17 24 39));
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    overflow: hidden;
    margin: 0.25rem auto;
    max-width: 280px;
    border: 1px solid rgb(55 65 81 / 0.3);
}

.card-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.rocket-container {
    padding: 5px;
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 160px;
    aspect-ratio: 1;
}

.image-error-placeholder {
    width: 100%;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(55 65 81);
    color: rgb(156 163 175);
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.rocket-hover {
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
    animation: rocketIdle 4s ease-in-out infinite;
    border-radius: 8px;
    box-shadow: 0 0 0 rgba(245, 146, 87, 0);
    max-width: 85%;
    max-height: 85%;
    height: auto;
    width: auto;
    background: transparent;
    object-fit: contain;
}

@keyframes rocketIdle {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        filter: drop-shadow(0 0 15px rgba(245, 146, 87, 0.3));
    }
    25% {
        transform: translateY(-3px) rotate(1deg);
        filter: drop-shadow(0 0 20px rgba(245, 146, 87, 0.4));
    }
    50% {
        transform: translateY(-5px) rotate(0deg);
        filter: drop-shadow(0 0 25px rgba(245, 146, 87, 0.5));
    }
    75% {
        transform: translateY(-3px) rotate(-1deg);
        filter: drop-shadow(0 0 20px rgba(245, 146, 87, 0.4));
    }
}

.rocket-hover:hover {
    transform: scale(1.08) rotate(3deg) translateY(-12px);
    filter: brightness(1.15) saturate(1.3) drop-shadow(0 0 30px rgba(245, 146, 87, 0.8)) drop-shadow(0 0 60px rgba(245, 146, 87, 0.4));
    animation-play-state: paused;
}

.rocket-name-container {
    background-image: linear-gradient(to right, rgb(17 24 39 / 0.9), rgb(31 41 55 / 0.9), rgb(17 24 39 / 0.9));
    padding: 0.25rem 1rem;
    text-align: center;
    border-top: 1px solid rgb(55 65 81 / 0.5);
}

.rocket-id-shimmer {
    background: linear-gradient(90deg, transparent, rgba(245, 146, 87, 0.15), transparent);
    background-size: 200% 100%;
    animation: shimmer 4s infinite;
}

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

p.rocket-name-text {
    color: rgb(209 213 219);
    margin: 0;
}

.rocket-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
}

/* --- CTA Section --- */
.cta-section {
    animation: fadeInUp 1s ease-out 0.3s both;
}

p.cta-text {
    line-height: 1.25;
    text-align: center;
    font-size: 1rem;
}

.cta-highlight {
    color: #FFDC89;
    display: block;
    margin-top: 0.125rem;
}

.play-button-container {
    margin-top: 0.25rem;
}

.share-page-body .btn-cta {
    animation: share-pulse 2s infinite;
}

.share-page-body .btn-cta:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 40px rgba(245, 146, 87, 0.3), 0 0 0 1px rgba(245, 146, 87, 0.2);
    animation-play-state: paused;
}

.share-page-body .btn-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.share-page-body .btn-cta:hover::before {
    left: 100%;
}

@keyframes share-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 146, 87, 0.7);
    }
    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(245, 146, 87, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 146, 87, 0);
    }
}

/* --- Disclaimer & Footer --- */
.disclaimer {
    margin-top: 0;
    padding: 0.375rem;
    color: rgb(156 163 175);
}

.disclaimer-paragraph {
    margin: 0.1rem;
    font-size: 0.75rem;
    padding: 0 12px;
}

.disclaimer a {
    text-decoration: underline;
    transition: color 0.15s ease-in-out;
}

.disclaimer a.terms-link {
    color: rgb(251 146 60 / 0.8);
}
.disclaimer a.terms-link:hover {
    color: rgb(253 186 116);
}

.disclaimer a.report-link {
    color: rgb(251 146 60 / 0.8);
}
.disclaimer a.report-link:hover {
    color: rgb(253 186 116);
}


.disclaimer-fade {
    animation: fadeInUp 1s ease-out 0.5s both;
}

.footer-fade {
    animation: fadeInUp 1s ease-out 0.7s both;
}

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

/* --- Animations & Effects --- */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.particle {
    position: fixed;
    pointer-events: none;
    z-index: -1;
}

.share-page-body .content-container {
    animation: slideInFromTop 1s ease-out;
    transition: transform 0.1s ease-out;
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.parallax-layer {
    transition: transform 0.1s ease-out;
}

.parallax-bg {
    transition: transform 0.15s ease-out;
}

.rocket-parallax {
    transition: transform 0.08s ease-out;
    transform-style: preserve-3d;
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    animation: ripple 0.6s linear;
}

@keyframes ripple {
    to {
        transform: scale(2);
        opacity: 0;
    }
}