/* Bomberang - roguelite bomb-blaster, bright sunny-sky theme (palette lifted from
   the bomb-splash keyart: blue sky base, green hills, charcoal bombs, a hot
   fuse-orange / spark-yellow pop) */

:root {
    /* Bomb-splash accents pulled straight off the keyart. Variable NAMES kept
       from the clone so every component recolours from these values. */
    --sky: #ff8a1e;            /* fuse orange (primary accent/hover) */
    --grape: #4aa8e0;          /* clear sky blue */
    --grape-deep: #2f7fc0;
    --lime: #6bbf4a;           /* sunny hill green */
    --lime-deep: #3f8f2f;
    --magenta: #ff5a2b;        /* hot flame red-orange */
    --magenta-deep: #c23d18;
    --corn: #ffd23b;           /* spark yellow */
    --tangerine: #ff8a1e;      /* fuse orange */
    --berry: #4aa8e0;          /* sky blue */
    --charcoal: #1e2230;       /* bomb charcoal (nav / chrome) */
    --text: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.86);
    --card: rgba(255, 255, 255, 0.14);
    --card-line: rgba(255, 255, 255, 0.34);
}

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

body {
    font-family: 'Fredoka', 'Segoe UI', sans-serif;
    color: var(--text);
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -8%, rgba(255, 210, 63, 0.34) 0%, transparent 46%),
        radial-gradient(circle at 100% 20%, rgba(255, 138, 30, 0.22) 0%, transparent 46%),
        radial-gradient(circle at 0% 62%, rgba(107, 191, 74, 0.30) 0%, transparent 46%),
        linear-gradient(180deg, #5bb8ea 0%, #3f93d4 44%, #1c4f7a 100%);
    background-attachment: fixed;
}

.logo, .hero h1, .world-text h3 { font-family: 'Press Start 2P', monospace; }

/* Form controls don't inherit font-family by default -> force them onto the
   Fredoka body font so buttons/inputs/selects never fall back to the system
   font (the main source of cross-page font inconsistency). */
button, input, select, textarea { font-family: inherit; }

/* Nav */
nav {
    position: fixed; top: 0; width: 100%; z-index: 100;
    background: rgba(20, 26, 40, 0.86);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(255, 138, 30, 0.55);
}
.nav-inner {
    max-width: 1140px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 1.5rem;
}
.logo {
    text-decoration: none; color: var(--text);
    font-size: 0.8rem; letter-spacing: 0.05em;
    display: flex; align-items: center; gap: 0.5rem;
    text-shadow: 0 2px 0 rgba(0,0,0,0.35);
}
.logo-img {
    display: block; height: 30px; width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.nav-links { display: flex; align-items: center; gap: 1.1rem; }
.nav-link {
    color: var(--text-dim); text-decoration: none;
    font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em;
    white-space: nowrap;
    transition: color 0.15s;
}
.nav-link:hover { color: var(--corn); }

/* Hamburger toggle - hidden on desktop, shown under the breakpoint */
.nav-toggle {
    display: none;
    background: none; border: 0; cursor: pointer;
    padding: 0.4rem; margin: -0.4rem; margin-left: auto;
    flex-direction: column; gap: 5px;
}
.nav-toggle-bar {
    display: block; width: 24px; height: 2px; border-radius: 2px;
    background: var(--text);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Collapse to a hamburger dropdown once the row gets tight */
@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .nav-links {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(20, 26, 40, 0.98);
        backdrop-filter: blur(10px);
        border-bottom: 2px solid rgba(255, 138, 30, 0.4);
        padding: 0.5rem 0;
        max-height: 0; overflow: hidden;
        transition: max-height 0.28s ease;
    }
    .nav-links.open { max-height: 80vh; overflow-y: auto; }
    .nav-link {
        padding: 0.85rem 1.5rem; font-size: 1rem;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .nav-links .btn-play,
    .nav-links .btn-founder,
    .nav-links .btn-wishlist {
        margin: 0.8rem 1.5rem 0.4rem;
        text-align: center;
    }
}
/* Glossy lime pill */
.btn-play {
    background: linear-gradient(180deg, #c4ff7a 0%, var(--lime) 45%, var(--lime-deep) 100%);
    color: #143d00;
    padding: 0.6rem 1.3rem; border-radius: 9999px;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.95rem; font-weight: 700;
    text-decoration: none; letter-spacing: 0.02em;
    box-shadow: 0 4px 0 var(--lime-deep), 0 6px 14px rgba(0,0,0,0.3),
                inset 0 2px 2px rgba(255,255,255,0.7);
    transition: transform 0.12s, box-shadow 0.12s;
}
.btn-play:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--lime-deep), 0 10px 20px rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.7); }
.btn-play:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--lime-deep), inset 0 2px 2px rgba(255,255,255,0.6); }
/* Glossy pink pill - Wishlist CTA (accent, sits beside the lime Buy button) */
.btn-wishlist {
    background: linear-gradient(180deg, #ff8fc4 0%, var(--sky) 45%, #c11f6e 100%);
    color: #fff;
    padding: 0.6rem 1.3rem; border-radius: 9999px;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.95rem; font-weight: 700;
    text-decoration: none; letter-spacing: 0.02em;
    box-shadow: 0 4px 0 #c11f6e, 0 6px 14px rgba(0,0,0,0.3),
                inset 0 2px 2px rgba(255,255,255,0.5);
    transition: transform 0.12s, box-shadow 0.12s;
}
.btn-wishlist:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #c11f6e, 0 10px 20px rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.5); }
.btn-wishlist:active { transform: translateY(2px); box-shadow: 0 2px 0 #c11f6e, inset 0 2px 2px rgba(255,255,255,0.45); }
/* Glossy gold pill - Founder tier ($12.99), sits beside the free Play Beta CTA */
.btn-founder {
    background: linear-gradient(180deg, #ffe58a 0%, var(--corn) 45%, #d99a00 100%);
    color: #3d2b00;
    padding: 0.6rem 1.3rem; border-radius: 9999px;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.95rem; font-weight: 700;
    text-decoration: none; letter-spacing: 0.02em;
    box-shadow: 0 4px 0 #d99a00, 0 6px 14px rgba(0,0,0,0.3),
                inset 0 2px 2px rgba(255,255,255,0.7);
    transition: transform 0.12s, box-shadow 0.12s;
}
.btn-founder:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #d99a00, 0 10px 20px rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.7); }
.btn-founder:active { transform: translateY(2px); box-shadow: 0 2px 0 #d99a00, inset 0 2px 2px rgba(255,255,255,0.6); }
/* BETA badge - sits beside the logo wordmark, marks the pre-Steam self-launch */
.beta-badge {
    display: inline-block;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem; line-height: 1; letter-spacing: 0.08em;
    color: #143d00;
    background: linear-gradient(180deg, #c4ff7a 0%, var(--lime) 100%);
    padding: 0.28rem 0.4rem 0.24rem; border-radius: 4px;
    box-shadow: 0 2px 0 var(--lime-deep), inset 0 1px 1px rgba(255,255,255,0.6);
    vertical-align: middle;
}

/* Trailer - pattern: tyga.agency story-video section (swap src to the Bomberang trailer) */
.trailer { padding: 3.5rem 1.5rem; }
.trailer-inner { max-width: 900px; margin: 0 auto; }
.trailer-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem; text-align: center; color: var(--lime);
    text-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 0 18px rgba(166,243,74,0.35);
    margin-bottom: 1.4rem;
}
.trailer-frame {
    border-radius: 20px; overflow: hidden; background: #000;
    border: 1px solid var(--card-line);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 4px rgba(255,79,163,0.10);
}
.trailer-video { width: 100%; height: auto; display: block; background: #000; border-radius: 20px; }
@media (max-width: 768px) {
    .trailer { padding: 2.5rem 1rem; }
    .trailer-title { font-size: 0.8rem; }
    .trailer-frame, .trailer-video { border-radius: 12px; }
}

/* Hero */
/* The landing page is the hero and nothing else - one viewport, no scroll. The
   nav is fixed and the footer floats over the art's bottom fade, so the hero
   owns the full height rather than sharing it with page flow. dvh so mobile
   browser chrome collapsing doesn't leave a gap. */
.hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 5rem 1.5rem 7rem;
    overflow: hidden;
}
/* Hero backdrop = the four world-level splash arts, crossfading. Bg art only
   (locked design: no overlays/tagline/CTA). Each layer holds one world and the
   four stagger through a 32s loop (8s each: fade in, hold, fade out). */
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    background-color: #3f93d4;
    background-image: url('https://prodmedia.tyga.host/public/tyga.cloud/landing/bomberang.com/bomberang_splash.png');
}

/* Spark drift */
.stars {
    position: absolute; inset: 0;
    background:
        radial-gradient(5px 5px at 18% 26%, #fff 60%, transparent 62%),
        radial-gradient(4px 4px at 78% 18%, var(--corn) 60%, transparent 62%),
        radial-gradient(6px 6px at 64% 72%, var(--magenta) 60%, transparent 62%),
        radial-gradient(4px 4px at 30% 66%, var(--lime) 60%, transparent 62%),
        radial-gradient(5px 5px at 88% 55%, #fff 60%, transparent 62%),
        radial-gradient(4px 4px at 22% 84%, var(--berry) 60%, transparent 62%);
    opacity: 0.9;
    animation: drift 9s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translateY(-24px); } }

.hero-bg-overlay {
    position: absolute; inset: 0; z-index: 3;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(20,22,27,0.15) 55%,
        rgba(20,22,27,0.5) 100%
    );
}

/* Centered hero CTAs (Play Beta + Founder + Wishlist), above the art + overlays. */
.hero-cta {
    position: relative; z-index: 4;
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: center;
}
.btn-hero {
    padding: 0.95rem 2.1rem;
    font-size: 1.15rem;
}
@media (max-width: 560px) {
    .hero-cta { flex-direction: column; width: min(320px, 90%); }
    .btn-hero { width: 100%; text-align: center; }
}

.hero h1 {
    font-size: 3.4rem;
    color: var(--corn);
    letter-spacing: 0.05em;
    text-shadow:
        0 0 40px rgba(255,210,63,0.5),
        3px 3px 0 var(--magenta),
        6px 6px 0 rgba(0,0,0,0.35);
    margin-bottom: 1.2rem;
}
.hero h1 .tm { font-size: 1rem; vertical-align: top; color: var(--lime); }

.tagline {
    font-size: 1.25rem;
    color: var(--text);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1rem;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.hero-sub {
    font-size: 1rem;
    color: var(--text-dim);
    line-height: 1.6;
    margin: 0 auto 2rem;
    max-width: 480px;
}

/* Blinking cursor */
.cursor {
    display: inline-block;
    width: 0.5em; height: 1em;
    background: var(--corn);
    margin-left: 3px;
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Glossy PLAY pill */
.btn-primary {
    display: inline-block;
    background: linear-gradient(180deg, #ff8cc4 0%, var(--magenta) 45%, var(--magenta-deep) 100%);
    color: #ffffff;
    padding: 1.1rem 2.8rem;
    border-radius: 9999px;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 6px 0 var(--magenta-deep), 0 10px 22px rgba(0,0,0,0.4),
                inset 0 2px 3px rgba(255,255,255,0.6);
    transition: transform 0.12s, box-shadow 0.12s;
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 var(--magenta-deep), 0 16px 30px rgba(0,0,0,0.45), inset 0 2px 3px rgba(255,255,255,0.6);
}
.btn-primary:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0 var(--magenta-deep), inset 0 2px 3px rgba(255,255,255,0.5);
}

.hero-note {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-top: 1.1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Feature tiles */
/* World cards: the four splash images as feature cards, game-feature copy laid
   over a bottom gradient. */
.worlds {
    padding: 4rem 1.5rem;
}
.worlds-inner {
    max-width: 1040px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
}
.world-card {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid var(--card-line);
    background-size: cover; background-position: center;
    background-color: #14161b;
    box-shadow: 0 8px 22px rgba(0,0,0,0.3);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.world-card:hover {
    transform: translateY(-5px);
    border-color: var(--corn);
    box-shadow: 0 14px 34px rgba(0,0,0,0.4), 0 0 30px rgba(255,210,63,0.22);
}
.world-card.w1 { background-image: url('https://prodmedia.tyga.host/public/tyga.cloud/landing/bomberang.com/bomberang_splash.png'); background-position: left center; }
.world-card.w2 { background-image: url('https://prodmedia.tyga.host/public/tyga.cloud/landing/bomberang.com/bomberang_splash.png'); background-position: right center; }
.world-card.w3 { background-image: url('https://prodmedia.tyga.host/public/tyga.cloud/landing/bomberang.com/bomberang_splash.png'); background-position: center top; }
.world-card.w4 { background-image: url('https://prodmedia.tyga.host/public/tyga.cloud/landing/bomberang.com/bomberang_splash.png'); background-position: center bottom; }
.world-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,11,15,0.92) 0%, rgba(10,11,15,0.55) 38%, rgba(10,11,15,0) 68%);
}
.world-text {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.4rem 1.5rem;
    text-align: left;
}
.world-text h3 {
    font-size: 0.9rem; color: var(--corn);
    margin-bottom: 0.6rem; letter-spacing: 0.02em;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.world-text p {
    font-size: 0.95rem; color: var(--text);
    line-height: 1.55;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* Hook Section */
.hook {
    padding: 4rem 1.5rem 5rem;
    text-align: center;
}
.hook-inner { max-width: 640px; margin: 0 auto; }
.hook-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }
.fragment {
    font-size: 1.2rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0 auto 2rem;
    max-width: 520px;
    font-weight: 500;
    text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.fragment.last { margin-bottom: 2.5rem; }

.btn-secondary {
    display: inline-block;
    background: linear-gradient(180deg, #c4ff7a 0%, var(--lime) 45%, var(--lime-deep) 100%);
    color: #143d00;
    padding: 1rem 2.4rem;
    border-radius: 9999px;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem; font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    box-shadow: 0 5px 0 var(--lime-deep), 0 8px 18px rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.6);
    transition: transform 0.12s, box-shadow 0.12s;
}
.btn-secondary:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--lime-deep), 0 14px 26px rgba(0,0,0,0.4), inset 0 2px 2px rgba(255,255,255,0.6); }
.btn-secondary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--lime-deep), inset 0 2px 2px rgba(255,255,255,0.5); }

/* Footer */
/* SaaS-style sub-footer: the "businessy" links live here so the top nav stays
   consumer-only (Play / Download / League / Wishlist / Founder). */
.subfooter {
    padding: 2.6rem 1.5rem 2.2rem;
    background: rgba(20, 26, 40, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.subfooter-inner {
    max-width: 1040px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 2rem;
}
.sf-col { display: flex; flex-direction: column; gap: 0.55rem; }
.sf-col h4 {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem; letter-spacing: 0.06em;
    color: var(--sky); margin: 0 0 0.5rem; text-transform: uppercase;
}
.sf-col a {
    color: var(--text-dim); text-decoration: none;
    font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em;
    transition: color 0.15s;
}
.sf-col a:hover { color: var(--corn); }
@media (max-width: 720px) {
    .subfooter-inner { grid-template-columns: repeat(2, 1fr); }
}
footer {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    background: rgba(20, 26, 40, 0.7);
    border-top: 2px solid rgba(255, 138, 30, 0.28);
}
/* Landing only: the legal strip (copyright, trademark, Terms/Privacy/Cookies)
   sits over the bottom of the hero art so the page stays a single screen.
   It must stay on the page - the cookie banner links into it. Positioned
   against the body (not the viewport) so it tracks the hero's real height. */
body.hero-only { position: relative; overflow: hidden; }
body.hero-only footer {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
    padding: 1rem 1.5rem;
    background: linear-gradient(to top, rgba(20, 22, 27, 0.72), transparent);
    border-top: 0;
}
footer a { color: var(--text-dim); text-decoration: none; }
footer a:hover { color: var(--corn); }
footer .sep { margin: 0 0.5rem; opacity: 0.4; }
.footer-powered { margin-top: 0.6rem; }
.footer-powered a { color: var(--corn); text-decoration: underline; font-weight: 600; }
.footer-powered a:hover { color: var(--magenta); }
.footer-powered .studio { color: var(--text-dim); }

/* Mobile */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    .tagline { font-size: 1rem; }
    .btn-primary { font-size: 1.05rem; padding: 0.9rem 2rem; }
    .worlds-inner { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 1.7rem; letter-spacing: 0.03em; }
    .tagline { font-size: 0.9rem; }
}