:root {
    --page: #171421;
    --surface: #241f32;
    --surface-raised: #2b243d;
    --accent: #f5a74d;
    --accent-light: #ffbe73;
    --leaf-light: #8dcf5f;
    --leaf-dark: #5a9b4a;
    --text: #f4f3ff;
    --muted: #ececee;
    --nav-muted: #d1cede;
    --button-text: #ffffff;
    --footer-text: #aaa6b6;
    --border: rgba(228, 227, 231, 0.2);
    --border-strong: #393449;
    --header-background: rgba(22, 20, 31, .96);
    --hero-background: linear-gradient(180deg, rgba(39, 32, 52, 0.96), rgba(23, 20, 33, 0.96));
    --hero-overlay: radial-gradient(ellipse at 50% 15%, rgba(245, 167, 77, 0.24) 0%, rgba(245, 167, 77, 0.08) 28%, transparent 65%);
    --button-hover: #ffc47d;
    --button-border: 1px solid rgba(245, 167, 77, 0.9);
    --card-background: linear-gradient(115deg, rgba(36, 31, 50, 0.96), rgba(17, 15, 24, 0.96));
    --card-hover-border: rgba(245, 167, 77, 0.8);
    --footer-background: rgba(22, 20, 31, 0.9);
}

html, body {
  min-width: 200px;
  min-height: 100vh;
}

* { box-sizing: border-box; }
		body { 
            margin: 0; 
            font-family: Lexend, sans-serif; 
            color: var(--text); 
            background-image: url(assets\images\background.svg);
            background-position: center;
        }

		header, footer { 
            padding: 20px max(24px, calc((100% - 960px) / 2)); 
        }

		header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            background: var(--surface); 
        }

		.brand { 
            color: var(--text); 
            font-size: 1.2rem; 
            font-weight: bold; 
            letter-spacing: 1px; 
            text-decoration: none; 
            width: 25%;
            min-width: 150px;
        }

		.brand span { 
            color: var(--accent); 
        }

		nav { 
            display: flex; 
            gap: 22px; 
        }

		nav a { 
            color: var(--nav-muted); 
            text-decoration: none; 
        }

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

		main { 
            min-height: 50%; 
        }

		.hero { 
            padding: 100px 24px 90px; 
            text-align: center; 
            background: radial-gradient(ellipse at top, #342750, var(--page) 70%); 
        }

		.hero p { 
            margin: 0 0 14px; 
            color: var(--accent-light); 
        }

        .hero img {
            width: 75%;
            min-width: 150px;
            max-width: 500px;
        }

		h1 { margin: 0 auto 18px; 
            max-width: 700px; 
            font-size: clamp(2.7rem, 8vw, 5rem); 
            line-height: 1.05; 
        }

		.intro { 
            max-width: 520px; 
            margin: 0 auto 28px !important; 
            color: var(--muted) !important; 
            font-size: 1.1rem; 
            line-height: 1.6; 
        }

		.button { 
            display: inline-block; 
            padding: 12px 20px; 
            border-radius: 6px; 
            background: var(--accent); 
            color: var(--button-text); 
            font-weight: bold; 
            text-decoration: none; 
        }

		.button:hover { 
            background: var(--button-hover); 
        }

		.games { 
            max-width: 960px; 
            margin: 0 auto; 
            padding: 48px 24px 64px; 
        }

		.games h2 { 
            margin-top: 0; 
            font-size: 1.7rem; 
        }

		.game-card { 
            padding: 24px; 
            border: 1px solid var(--border-strong); 
            border-radius: 10px; 
            background: var(--surface); 
        }

		.game-card h3 { 
            margin: 0 0 8px; 
        }

		.game-card p { 
            margin: 0; 
            color: var(--muted); 
            line-height: 1.6; 
        }

		footer { 
            border-top: 1px solid var(--border-strong); 
            color: var(--footer-text); 
            text-align: center; 
            font-size: .9rem; 
        }

		@media (max-width: 520px) { 
            header { 
                align-items: flex-start; 
                flex-direction: column; 
                gap: 14px; 
            } nav { 
                gap: 16px; 
            } .hero { 
                padding: 76px 20px; 
            } 
        }

        body {
            color: var(--text);
            background: var(--page);
        }

        header {
            position: relative;
            z-index: 1;
            background: var(--header-background);
            border-bottom: 1px solid var(--border);
        }

        .brand {
            color: var(--text);
            letter-spacing: .06em;
        }

        .brand span,
        .hero p {
            color: var(--leaf-dark);
        }

        .hero span {
            color: var(--leaf-light);
        }

        nav a {
            padding: 8px 0;
            color: var(--muted);
            transition: color .2s ease;
        }

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

        .hero {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            border-bottom: 1px solid var(--border);
            padding: clamp(88px, 13vw, 150px) 24px clamp(32px, 5vw, 56px);
            background:
                var(--hero-background);
        }

        .hero::after {
            position: absolute;
            z-index: -1;
            inset: 0;
            content: "";
            background: var(--hero-overlay);
            pointer-events: none;
        }

        .hero-logo {
            width: 500px;
        }

        h1 {
            text-wrap: balance;
        }

        .intro {
            color: var(--muted) !important;
        }

        .button {
            padding: 14px 24px;
            border: var(--button-border);
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(245, 167, 77, 0.95), rgba(223, 135, 43, 0.92));
            transition: transform .2s ease, filter .2s ease, background .2s ease;
        }

        .button:hover {
            transform: translateY(-2px);
            filter: brightness(1.06);
            background: linear-gradient(180deg, rgba(255, 193, 117, 0.98), rgba(235, 149, 58, 0.94));
        }

        .games h2 {
            margin-bottom: 22px;
            letter-spacing: -.02em;
        }

        .game-card {
            position: relative;
            overflow: hidden;
            border-color: var(--border);
            border-radius: 16px;
            background:
                var(--card-background);
            transition: transform .2s ease, border-color .2s ease;
        }

        .game-card:hover {
            transform: translateY(-4px);
            border-color: var(--card-hover-border);
        }

        .game-card p {
            color: var(--muted);
        }

        footer {
            border-top-color: var(--border);
            color: var(--footer-text);
            background: var(--footer-background);
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                scroll-behavior: auto !important;
                transition-duration: .01ms !important;
            }
        }

        .brand img {
            display: block;
            width: 100%;
            max-width: 220px;
            height: auto;
        }

        .section-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .section-heading h2 {
            margin: 0 0 22px;
        }

        .text-link {
            color: var(--text);
            font-weight: 600;
            text-decoration-color: var(--accent-light);
            text-underline-offset: 4px;
        }

        .game-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
            gap: 20px;
        }

        .game-card {
            min-height: 140px;
            padding: 24px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: var(--surface);
            transition: transform .2s ease, border-color .2s ease;
        }

        .game-card:hover {
            transform: translateY(-4px);
            border-color: var(--card-hover-border);
        }

        .game-card h3 {
            margin: 0 0 10px;
            font-size: 1.35rem;
        }

        .game-status {
            display: inline-block;
            margin-bottom: 16px;
            padding: 5px 11px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text);
            font-size: .78rem;
            font-weight: 700;
        }

        .status-released {
            background: rgba(63, 126, 41, .5);
        }

        .status-demo-available {
            background: rgba(55, 105, 143, .55);
        }

        .status-in-development {
            background: rgba(130, 91, 28, .55);
        }

        .status-on-hold {
            background: rgba(110, 66, 78, .55);
        }

        .game-image {
            display: block;
            width: 100%;
            height: 150px;
            margin-bottom: 20px;
            border-radius: 10px;
            background: var(--page);
            object-fit: cover;
        }

        .game-card p {
            margin: 0 0 18px;
            color: var(--muted);
            line-height: 1.6;
        }

        .game-card .text-link {
            display: inline-block;
        }

        .game-platform-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 18px;
        }

        .game-unavailable {
            margin: 18px 0 0 !important;
            font-weight: 700;
        }

        .platform-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            padding: 10px 16px;
            border: 1px solid transparent;
            border-radius: 999px;
            color: #fff;
            font-size: .9rem;
            font-weight: 700;
            text-decoration: none;
            transition: transform .2s ease, filter .2s ease;
        }

        .platform-button:hover {
            transform: translateY(-2px);
            filter: brightness(1.12);
        }

        .platform-button:focus-visible {
            outline: 3px solid #fff;
            outline-offset: 3px;
        }

        .itch-button {
            background: #fa5c5c;
        }

        .gamejolt-button {
            background: #c83e36;
        }

        .page-content {
            min-height: 60vh;
            max-width: 960px;
            margin: 0 auto;
            padding: 72px 24px;
        }

        .page-intro {
            margin-bottom: 42px;
            text-align: center;
        }

        .page-intro .eyebrow {
            color: var(--leaf-light);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .page-intro h1 {
            margin-bottom: 14px;
        }

        .page-intro .intro {
            margin-bottom: 0 !important;
        }

        .socials-section {
            display: flex;
            justify-content: center;
        }

        .social-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px;
        }

        .social-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 18px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: rgba(23, 20, 33, 0.72);
            color: var(--text);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            transition: transform .2s ease, border-color .2s ease, background .2s ease;
        }

        .social-link:hover {
            transform: translateY(-2px);
            border-color: var(--card-hover-border);
            background: rgba(36, 31, 50, 0.88);
        }

        .social-icon {
            font-size: 1.2em;
            line-height: 1;
            color: var(--accent-light);
        }

        .loading-message,
        .empty-message,
        .error-message {
            margin: 0;
            color: var(--muted);
            line-height: 1.6;
        }

        .error-message {
            color: #fff0eb;
        }

        footer nav {
            justify-content: center;
            margin-bottom: 12px;
        }

        footer p {
            margin: 0;
        }

        @media (max-width: 520px) {
            .section-heading {
                align-items: flex-start;
                flex-direction: column;
                gap: 0;
                margin-bottom: 20px;
            }

            .section-heading h2 {
                margin-bottom: 8px;
            }

            .page-content {
                padding: 56px 20px;
            }
        }