:root {
    --void: #050e05;
    --deep: #0a1a08;
    --canopy: #0f2d10;
    --fern: #1a4a1c;
    --vine: #2d6e30;
    --leaf: #4caf50;
    --glow: #a8e063;
    --gold: #f5c842;
    --amber: #e8943a;
    --sun: #fff176;
    --text: #f0faf0;
    --muted: #9dbf9e;
    --glass: rgba(8, 24, 8, .72);
    --line: rgba(168, 224, 99, .2);
    --sidebar-w: 260px
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Nunito', Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(45,110,48,.35), transparent 40%),
        radial-gradient(ellipse at 100% 20%, rgba(76,175,80,.2), transparent 35%),
        radial-gradient(ellipse at 50% 100%, rgba(168,224,99,.12), transparent 40%),
        linear-gradient(180deg, #050e05 0%, #0a1a08 35%, #071205 70%, #040c04 100%);
    overflow-x: hidden;
    display: flex
}

/* jungle texture */
body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 2px 6px at 15% 20%, rgba(168,224,99,.18) 0%, transparent 100%),
        radial-gradient(ellipse 1px 4px at 42% 55%, rgba(168,224,99,.12) 0%, transparent 100%),
        radial-gradient(ellipse 2px 5px at 70% 30%, rgba(245,200,66,.1) 0%, transparent 100%),
        radial-gradient(ellipse 1px 3px at 88% 72%, rgba(168,224,99,.14) 0%, transparent 100%);
    background-size: 180px 180px, 240px 240px, 200px 200px, 160px 160px;
    opacity: .6;
    animation: jungleBreeze 22s ease-in-out infinite alternate;
    z-index: 0
}

@keyframes jungleBreeze {
    0%   { background-position: 0 0, 0 0, 0 0, 0 0 }
    100% { background-position: 30px 60px, -20px 40px, 50px -30px, -40px 50px }
}

a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }

/* ════════════════════════════════
   SIDEBAR
════════════════════════════════ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    z-index: 300;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(8,22,8,.97) 0%, rgba(5,14,5,.99) 100%);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform .3s ease
}

/* subtle vine pattern on sidebar */
.sidebar:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120px 300px at 0% 30%, rgba(45,110,48,.18), transparent 70%),
        radial-gradient(ellipse 80px 200px at 100% 70%, rgba(168,224,99,.08), transparent 70%);
    z-index: 0
}

.sidebar > * { position: relative; z-index: 1 }

/* Logo area */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 28px 24px 20px;
    text-decoration: none;
    color: var(--text)
}

.sidebar-brand:hover .sidebar-logo { box-shadow: 0 0 36px rgba(168,224,99,.8) }

.sidebar-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 24px rgba(168,224,99,.5);
    transition: box-shadow .25s
}

.sidebar-logo svg,
.sidebar-logo img {
    width: 100%;
    height: 100%;
    display: block
}

.sidebar-brand-name {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1
}

.sidebar-brand-domain {
    font-size: 11px;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .06em;
    margin-top: 3px
}

/* Divider */
.sidebar-divider {
    height: 1px;
    background: var(--line);
    margin: 0 24px 16px
}

/* Nav links */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
    flex: 1
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    color: #c8e8c8;
    font-weight: 900;
    font-size: 15px;
    transition: background .2s, color .2s
}

.sidebar-nav a:hover {
    background: rgba(168,224,99,.1);
    color: var(--glow)
}

.sidebar-nav a.active {
    background: rgba(168,224,99,.14);
    color: var(--glow);
    box-shadow: inset 3px 0 0 var(--glow)
}

.sidebar-nav a svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: .8
}

.sidebar-nav a:hover svg,
.sidebar-nav a.active svg { opacity: 1 }

/* CTA button in sidebar */
.sidebar-cta {
    padding: 16px 16px 12px
}

.sidebar-cta .btn {
    width: 100%;
    border-radius: 18px
}

/* 18+ badge at bottom */
.sidebar-badge {
    padding: 12px 16px 24px;
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    line-height: 1.5
}

/* Mobile toggle button */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 400;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(8,22,8,.92);
    color: var(--glow);
    font-size: 22px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    transition: background .2s, left .3s ease
}

.sidebar-toggle:hover { background: rgba(168,224,99,.12) }

/* When sidebar is open — shift toggle button to the right of sidebar */
body.sidebar-open .sidebar-toggle {
    left: calc(280px + 10px)
}

/* Overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 290;
    backdrop-filter: blur(2px)
}

.sidebar-overlay.active { display: block }

/* ════════════════════════════════
   PAGE WRAPPER
════════════════════════════════ */
.page-wrap {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1
}

.container {
    width: min(1100px, 92%);
    margin: auto
}

/* ════════════════════════════════
   BUTTONS
════════════════════════════════ */
.btn,
.play-btn {
    border: 1px solid rgba(168,224,99,.5);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--glow), var(--gold));
    color: #050e05;
    font-weight: 900;
    padding: 13px 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 0 22px rgba(168,224,99,.3);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    transition: background .2s, box-shadow .2s
}

.btn:hover,
.play-btn:hover {
    background: linear-gradient(135deg, var(--gold), var(--glow));
    box-shadow: 0 0 32px rgba(245,200,66,.45)
}

.btn.secondary {
    background: rgba(168,224,99,.08);
    color: var(--text);
    box-shadow: none;
    border-color: rgba(168,224,99,.25)
}

.btn.secondary:hover { background: rgba(168,224,99,.15) }

/* ════════════════════════════════
   HERO — feature blocks
════════════════════════════════ */
.hero {
    padding: 72px 0 60px
}

.hero-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--glow);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 13px;
    margin-bottom: 14px
}

.hero h1,
.page-hero h1 {
    font-size: clamp(38px, 5.5vw, 72px);
    line-height: .96;
    margin: 0 0 20px;
    text-shadow: 0 0 40px rgba(168,224,99,.2)
}

.lead {
    font-size: 19px;
    color: #b8d4b8;
    line-height: 1.75;
    margin: 0 0 24px
}

.notice-strip,
.warning {
    border: 1px solid rgba(168,224,99,.3);
    background: linear-gradient(135deg, rgba(168,224,99,.08), rgba(245,200,66,.08));
    border-radius: 24px;
    padding: 15px 18px;
    color: #d4f5d4;
    font-weight: 900
}

/* Feature blocks grid */
.hero-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.feature-block {
    background: linear-gradient(160deg, rgba(15,45,16,.88), rgba(8,22,8,.84));
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s
}

.feature-block:hover {
    border-color: rgba(168,224,99,.45);
    box-shadow: 0 0 40px rgba(168,224,99,.12)
}

.feature-block:before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -60px;
    top: -60px;
    background: radial-gradient(circle, rgba(168,224,99,.15), transparent 65%);
    pointer-events: none
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(168,224,99,.18), rgba(245,200,66,.12));
    border: 1px solid rgba(168,224,99,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.feature-icon svg {
    width: 28px;
    height: 28px
}

.feature-block h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 900
}

.feature-block p {
    margin: 0;
    color: #9dbf9e;
    font-size: 15px;
    line-height: 1.65
}

/* ════════════════════════════════
   SECTIONS
════════════════════════════════ */
.section,
.page-hero {
    padding: 64px 0
}

.page-hero { padding-bottom: 36px }

.grid { display: grid; gap: 24px }
.cards { grid-template-columns: repeat(3, 1fr) }
.game-grid { grid-template-columns: repeat(4, 1fr) }

/* ════════════════════════════════
   CARDS
════════════════════════════════ */
.card,
.game-card,
.legal-box,
.faq-item,
.contact-card,
.testimonial {
    background: linear-gradient(160deg, rgba(15,45,16,.85), rgba(8,22,8,.82));
    border: 1px solid var(--line);
    border-radius: 30px;
    box-shadow: 0 24px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(168,224,99,.08)
}

.card,
.legal-box,
.contact-card,
.testimonial { padding: 26px }

.card { position: relative; overflow: hidden }

.card:before,
.testimonial:before {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    right: -50px;
    top: -50px;
    background: radial-gradient(circle, rgba(168,224,99,.22), transparent 68%)
}

.section-title {
    font-size: clamp(30px, 4vw, 52px);
    margin: 0 0 16px
}

/* ════════════════════════════════
   CAROUSEL
════════════════════════════════ */
.top-carousel { padding: 34px 0 0 }

.carousel-shell {
    border: 1px solid var(--line);
    border-radius: 34px;
    padding: 20px;
    background: rgba(8,22,8,.7);
    box-shadow: 0 0 44px rgba(168,224,99,.1)
}

.carousel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px
}

.carousel-head h2 { margin: 0; font-size: 28px }
.carousel-actions { display: flex; gap: 9px }

.carousel-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(168,224,99,.09);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background .2s, border-color .2s
}

.carousel-btn:hover {
    background: rgba(168,224,99,.18);
    border-color: var(--glow)
}

.carousel-track {
    display: flex;
    gap: 16px;
    overflow: hidden;
    scroll-behavior: smooth;
    align-items: stretch
}

.carousel-track .game-card {
    flex: 0 0 255px;
    min-height: 455px;
    display: flex;
    flex-direction: column
}

.carousel-track .game-card img { height: 231px; aspect-ratio: auto; flex-shrink: 0 }
.carousel-track .game-card h3 { min-height: 50px; flex-shrink: 0 }
.carousel-track .game-card .tags { flex: 1; align-content: flex-start }
.carousel-track .game-card .play-btn { margin-top: auto; flex-shrink: 0 }

/* ════════════════════════════════
   GAME CARDS
════════════════════════════════ */
.game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
    overflow: hidden
}

.game-card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 24px;
    filter: saturate(1.1) contrast(1.05)
}

.game-card h3 {
    min-height: 50px;
    margin: 15px 8px 8px;
    font-size: 18px;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.badge18 {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    background: #050e05;
    color: var(--glow);
    border: 2px solid var(--glow);
    box-shadow: 0 0 14px rgba(168,224,99,.5);
    border-radius: 999px;
    font-weight: 900;
    padding: 7px 10px;
    font-size: 12px
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 8px;
    min-height: 34px;
    margin-top: auto
}

.tag {
    font-size: 12px;
    border-radius: 999px;
    padding: 6px 9px;
    background: rgba(168,224,99,.1);
    border: 1px solid rgba(168,224,99,.2);
    color: #d4f5d4
}

.game-card .play-btn {
    width: calc(100% - 16px);
    margin: 10px 8px 8px
}

/* ════════════════════════════════
   FILTERS
════════════════════════════════ */
.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 24px 0
}

.filter {
    border: 1px solid var(--line);
    background: rgba(168,224,99,.07);
    color: #fff;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 900;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s
}

.filter:hover { background: rgba(168,224,99,.14) }
.filter.active { background: var(--glow); color: #050e05; border-color: var(--glow) }

/* ════════════════════════════════
   GAME PAGE
════════════════════════════════ */
.game-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 26px
}

.iframe-wrap {
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #000;
    min-height: 580px
}

.iframe-wrap iframe { width: 100%; height: 620px; border: 0 }

.description { line-height: 1.75; color: #b8d4b8 }
.description p { display: block !important }

/* ════════════════════════════════
   FAQ
════════════════════════════════ */
.faq-item { padding: 0; overflow: hidden }

.faq-q {
    width: 100%;
    background: none;
    border: 0;
    color: #fff;
    text-align: left;
    padding: 22px;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    font-family: inherit
}

.faq-q:hover { color: var(--glow) }

.faq-a {
    display: none;
    padding: 0 22px 22px;
    color: #9dbf9e;
    line-height: 1.7
}

.faq-item.open .faq-a { display: block }

/* ════════════════════════════════
   FORM
════════════════════════════════ */
.form { display: grid; gap: 15px }

.input,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(5,14,5,.72);
    color: #fff;
    padding: 15px;
    font: inherit;
    outline: none
}

.input:focus,
textarea:focus {
    border-color: var(--glow);
    box-shadow: 0 0 0 4px rgba(168,224,99,.1)
}

textarea { min-height: 160px }
.success { display: none; color: var(--glow); font-weight: 900 }

/* ════════════════════════════════
   TESTIMONIALS
════════════════════════════════ */
.testimonials { grid-template-columns: repeat(3, 1fr) }
.testimonial { position: relative }
.testimonial strong { color: var(--glow) }

.stars {
    color: var(--gold);
    letter-spacing: 3px;
    font-size: 20px;
    text-shadow: 0 0 14px rgba(245,200,66,.5);
    margin-bottom: 12px
}

.quote-spark {
    position: absolute;
    right: 22px;
    top: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--glow);
    background: rgba(168,224,99,.08);
    border: 1px solid var(--line);
    box-shadow: 0 0 20px rgba(168,224,99,.15)
}

.testimonial { padding-top: 34px; overflow: hidden }

.testimonial:after {
    content: "";
    position: absolute;
    left: 24px;
    bottom: -34px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168,224,99,.18), transparent 70%)
}

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
.footer {
    border-top: 1px solid var(--line);
    background: rgba(3,8,3,.95);
    padding: 48px 0 32px;
    color: #7a9e7a
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 32px
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    text-decoration: none;
    color: var(--text)
}

.footer-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(168,224,99,.4)
}

.footer-logo svg,
.footer-logo img { width: 100%; height: 100%; display: block }

.footer-brand-name {
    font-size: 20px;
    font-weight: 900
}

.footer h4 {
    color: var(--glow);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0 0 14px
}

.footer a {
    display: block;
    margin: 8px 0;
    color: #b8d4b8;
    font-size: 14px
}

.footer a:hover { color: var(--glow) }

/* ════════════════════════════════
   AGE MODAL
════════════════════════════════ */
.age-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.age-box {
    width: min(560px, 100%);
    background: linear-gradient(160deg, #0f2d10, #0a1a08);
    border: 1px solid rgba(168,224,99,.4);
    border-radius: 34px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 0 90px rgba(168,224,99,.2)
}

.age-box h2 { font-size: 42px; margin: 0 0 10px }

/* ════════════════════════════════
   FIREFLY PARTICLES
════════════════════════════════ */
.spirit-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden
}

.spirit-bg span {
    position: absolute;
    width: 8px;
    height: 14px;
    border-radius: 50% 50% 40% 60%;
    background: radial-gradient(circle at 40% 30%, #fff, var(--glow) 45%, transparent 75%);
    filter: blur(.3px);
    box-shadow: 0 0 18px rgba(168,224,99,.8);
    opacity: .6;
    animation: fireflyFloat 20s ease-in-out infinite
}

.spirit-bg span:nth-child(1) { left: 6%;  top: 80%; animation-duration: 24s }
.spirit-bg span:nth-child(2) { left: 22%; top: 70%; animation-duration: 18s; animation-delay: -6s;  transform: scale(.7) }
.spirit-bg span:nth-child(3) { left: 55%; top: 85%; animation-duration: 26s; animation-delay: -10s; transform: scale(1.3) }
.spirit-bg span:nth-child(4) { left: 76%; top: 74%; animation-duration: 20s; animation-delay: -4s;  transform: scale(.85) }
.spirit-bg span:nth-child(5) { left: 91%; top: 82%; animation-duration: 28s; animation-delay: -14s; transform: scale(.6) }

@keyframes fireflyFloat {
    0%   { translate: 0 0; opacity: 0 }
    10%  { opacity: .65 }
    40%  { translate: 24px -38vh }
    65%  { translate: -18px -65vh; opacity: .5 }
    100% { translate: 16px -108vh; opacity: 0 }
}

body > *:not(.spirit-bg):not(.sidebar):not(.sidebar-overlay):not(.sidebar-toggle) {
    position: relative;
    z-index: 1
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 1024px) {
    :root { --sidebar-w: 220px }
}

@media (max-width: 768px) {
    body { display: block }

    .sidebar {
        transform: translateX(-100%);
        width: 280px
    }

    .sidebar.open { transform: translateX(0) }

    .sidebar-toggle { display: flex }

    .page-wrap { margin-left: 0 }

    .hero-features,
    .game-layout,
    .footer-grid {
        grid-template-columns: 1fr
    }

    .game-grid,
    .cards,
    .testimonials {
        grid-template-columns: repeat(2, 1fr)
    }

    .carousel-track .game-card {
        flex-basis: 220px;
        min-height: 420px
    }

    .carousel-track .game-card img { height: 196px }
}

@media (max-width: 520px) {
    .game-grid,
    .cards,
    .testimonials {
        grid-template-columns: 1fr
    }

    .hero { padding: 46px 0 }

    .btn,
    .play-btn { width: 100% }

    .lead { font-size: 17px }

    .hero-features { grid-template-columns: 1fr }
}