:root {
    --gold: #f0a820;
    --gold-dim: #b87a10;
    --blue: #3fa3e8;
    --blue-dim: #1a6db5;
    --blue-glow: rgba(63, 163, 232, 0.25);
    --red: #c0392b;
    --bg: #080a0f;
    --bg2: #0d1117;
    --bg3: #111822;
    --surface: #141c28;
    --surface2: #1a2438;
    --text: #e8eaf0;
    --muted: #7a8a9e;
    --border: rgba(63, 163, 232, 0.18);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    overflow-x: hidden;
}

#stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(63, 163, 232, 0.07) 0%, transparent 60%);
}

#stars::before,
#stars::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 40%, rgba(255, 255, 255, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 45% 20%, rgba(255, 255, 255, 0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 30%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 88% 55%, rgba(255, 255, 255, 0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 33% 65%, rgba(255, 255, 255, 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 52% 88%, rgba(255, 255, 255, 0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 10%, rgba(255, 255, 255, 0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 82% 75%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 5% 50%, rgba(255, 255, 255, 0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 25%, rgba(255, 255, 255, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 38% 92%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 67% 48%, rgba(255, 255, 255, 0.5) 0%, transparent 100%);
}

#stars::after {
    background-image:
        radial-gradient(1px 1px at 8% 32%, rgba(240, 168, 32, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 20% 75%, rgba(63, 163, 232, 0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 55% 18%, rgba(240, 168, 32, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 78% 60%, rgba(63, 163, 232, 0.3) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 40% 45%, rgba(255, 255, 255, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 82%, rgba(240, 168, 32, 0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 3% 92%, rgba(255, 255, 255, 0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 62% 35%, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5vw;
    height: 64px;
    background: rgba(8, 10, 15, 0.85);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

.nav-logo {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text);
    text-decoration: none;
}

.nav-logo span {
    color: var(--blue);
}

nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
}

nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s;
}

nav a:hover {
    color: var(--gold);
}

section,
.hero {
    position: relative;
    z-index: 1;
}


.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 5vw 60px;
    position: relative;
    overflow: hidden;
}

.hero-bg-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 900px;
    background: conic-gradient(from 0deg,
            transparent 0deg, rgba(240, 168, 32, 0.04) 5deg, transparent 10deg,
            transparent 20deg, rgba(63, 163, 232, 0.04) 25deg, transparent 30deg,
            transparent 40deg, rgba(240, 168, 32, 0.03) 45deg, transparent 50deg,
            transparent 60deg, rgba(63, 163, 232, 0.03) 65deg, transparent 70deg,
            transparent 80deg, rgba(240, 168, 32, 0.04) 85deg, transparent 90deg,
            transparent 100deg, rgba(63, 163, 232, 0.03) 105deg, transparent 110deg,
            transparent 120deg, rgba(240, 168, 32, 0.03) 125deg, transparent 130deg,
            transparent 140deg, rgba(63, 163, 232, 0.04) 145deg, transparent 150deg,
            transparent 160deg, rgba(240, 168, 32, 0.03) 165deg, transparent 170deg,
            transparent 180deg, rgba(63, 163, 232, 0.04) 185deg, transparent 190deg,
            transparent 200deg, rgba(240, 168, 32, 0.03) 205deg, transparent 210deg,
            transparent 220deg, rgba(63, 163, 232, 0.03) 225deg, transparent 230deg,
            transparent 240deg, rgba(240, 168, 32, 0.04) 245deg, transparent 250deg,
            transparent 260deg, rgba(63, 163, 232, 0.03) 265deg, transparent 270deg,
            transparent 280deg, rgba(240, 168, 32, 0.03) 285deg, transparent 290deg,
            transparent 300deg, rgba(63, 163, 232, 0.04) 305deg, transparent 310deg,
            transparent 320deg, rgba(240, 168, 32, 0.03) 325deg, transparent 330deg,
            transparent 340deg, rgba(63, 163, 232, 0.03) 345deg, transparent 350deg,
            transparent 360deg);
    pointer-events: none;
    animation: spin-slow 60s linear infinite;
}

@keyframes spin-slow {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.hero-logo {
    width: clamp(140px, 22vw, 220px);
    height: clamp(140px, 22vw, 220px);
    border-radius: 50%;
    box-shadow:
        0 0 60px rgba(63, 163, 232, 0.25),
        0 0 120px rgba(240, 168, 32, 0.1);
    margin-bottom: 2rem;
    animation: float 6s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

.hero h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 2;
}

.hero h1 .blue {
    color: var(--blue);
}

.hero h1 .white {
    color: #fff;
}

.hero-tagline {
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 2;
}

.hero-tagline em {
    font-style: normal;
    color: var(--gold);
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
}

.hero-cta-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.7em 2em;
    border-radius: 3px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--blue);
    color: #fff;
    border: 1px solid var(--blue);
    box-shadow: 0 0 20px rgba(63, 163, 232, 0.3);
}

.btn-primary:hover {
    background: #5ab5f0;
    box-shadow: 0 0 30px rgba(63, 163, 232, 0.5);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
}

.btn-outline:hover {
    background: rgba(240, 168, 32, 0.1);
    box-shadow: 0 0 20px rgba(240, 168, 32, 0.2);
    transform: translateY(-1px);
}

.hero-scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

.scroll-arrow {
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom, var(--blue), transparent);
}

/* ── DIVIDER ── */
.divider {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto 4rem;
    padding: 0 5vw;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.divider-icon {
    width: 8px;
    height: 8px;
    background: var(--gold);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ── SECTION HEADING ── */
.section-heading {
    text-align: center;
    margin-bottom: 4rem;
    padding: 0 5vw;
}

.section-tag {
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    color: var(--blue);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.8rem;
}

.section-heading h2 {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.03em;
}

.section-heading h2 .accent {
    color: var(--gold);
}


#games {
    padding: 100px 5vw;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
    justify-content: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.game-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s;
    position: relative;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.game-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(63, 163, 232, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.game-card:hover {
    border-color: rgba(63, 163, 232, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(63, 163, 232, 0.15);
}

.game-card:hover::before {
    opacity: 1;
}

.game-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--bg3);
    position: relative;
    overflow: hidden;
}

.game-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.game-card:hover .game-thumb img {
    transform: scale(1.04);
}

.game-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg3) 0%, var(--surface2) 100%);
}

.game-thumb-placeholder svg {
    opacity: 0.3;
}

.game-thumb-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
}

.game-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: rgba(8, 10, 15, 0.85);
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: 'Fira Code', monospace;
    font-size: 0.7rem;
    color: var(--blue);
    padding: 2px 8px;
    letter-spacing: 0.08em;
}

.game-body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.game-engine {
    font-family: 'Fira Code', monospace;
    font-size: 0.72rem;
    color: var(--gold-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.game-title {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
    line-height: 1.2;
}

.game-desc {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 1.2rem;
}

.game-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.game-tags {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.tag {
    font-size: 0.72rem;
    font-family: 'Fira Code', monospace;
    color: var(--blue);
    background: rgba(63, 163, 232, 0.1);
    border: 1px solid rgba(63, 163, 232, 0.2);
    border-radius: 2px;
    padding: 1px 7px;
    letter-spacing: 0.05em;
}

.itch-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border: 1px solid rgba(240, 168, 32, 0.3);
    padding: 4px 12px;
    border-radius: 2px;
    transition: all 0.2s;
    white-space: nowrap;
}

.itch-btn:hover {
    background: rgba(240, 168, 32, 0.12);
    border-color: var(--gold);
}

.itch-btn svg {
    flex-shrink: 0;
}


#about {
    padding: 100px 5vw;
    background: linear-gradient(180deg, transparent, rgba(13, 17, 23, 0.8), transparent);
}

.about-inner {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.2rem;
}

.about-text p {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.about-text p strong {
    color: var(--text);
    font-weight: 600;
}

.about-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stack-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stack-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: rgba(63, 163, 232, 0.12);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stack-info {
    flex: 1;
}

.stack-name {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    display: block;
}

.stack-desc {
    font-size: 0.8rem;
    color: var(--muted);
}

/* ── CONTACT ── */
#contact {
    padding: 80px 5vw 120px;
    text-align: center;
}

.contact-box {
    max-width: 560px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden;
}

.contact-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--blue), var(--gold), transparent);
}

.contact-box h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.8rem;
}

.contact-box p {
    color: var(--muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.social-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 1.4em;
    border-radius: 3px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--border);
    color: var(--muted);
    transition: all 0.2s;
}

.social-link:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-glow);
}

.social-link.itch:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(192, 57, 43, 0.1);
}

/* ── FOOTER ── */
footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--border);
    padding: 1.5rem 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

footer p {
    font-size: 0.8rem;
    color: var(--muted);
    font-family: 'Fira Code', monospace;
    letter-spacing: 0.06em;
}

footer .godot-credit {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.78rem;
    color: var(--muted);
}

footer .godot-credit span {
    color: var(--blue);
}


@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 {
    animation: fade-up 0.7s ease both 0.2s;
}

.hero-tagline {
    animation: fade-up 0.7s ease both 0.4s;
}

.hero-cta-row {
    animation: fade-up 0.7s ease both 0.6s;
}

.hero-logo {
    animation: fade-up 0.7s ease both, float 6s ease-in-out 0.7s infinite;
}


@media (max-width: 700px) {
    nav ul {
        display: none;
    }

    .about-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .game-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
}

.circuit-left,
.circuit-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.1;
    pointer-events: none;
}

.circuit-left {
    left: 2vw;
}

.circuit-right {
    right: 2vw;
    transform: translateY(-50%) scaleX(-1);
}