:root {
    --bg: #080604;
    --panel: #100c07;
    --panel-2: #171008;
    --gold: #f2b94b;
    --gold-light: #ffe1a0;
    --gold-dark: #8f5d13;
    --cream: #f5eee2;
    --muted: #a89d8c;
    --line: rgba(242, 185, 75, .2);
    --max: 1180px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--cream);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

.top-line {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), #fff0bd, var(--gold), transparent);
}

.container {
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(8, 6, 4, .92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
}

.header-inner {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.logo {
    width: 160px;
    height: auto;
    display: block;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #c7bca9;
}

.main-nav a:hover,
.footer-links a:hover,
.text-link:hover {
    color: var(--gold-light);
}

.header-actions,
.intro-actions,
.cta-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border: 1px solid var(--gold);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 12px;
    font-weight: 800;
    transition: .25s ease;
}

.btn-gold {
    background: linear-gradient(135deg, #ffe2a2, var(--gold) 45%, #b97016);
    color: #1b1004;
    box-shadow: 0 8px 28px rgba(242, 185, 75, .14);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(242, 185, 75, .24);
}

.btn-outline {
    background: transparent;
    color: var(--gold-light);
}

.btn-outline:hover {
    background: rgba(242, 185, 75, .08);
}

.btn-large {
    min-height: 52px;
    padding: 0 25px;
}

.intro-section {
    padding: 90px 0 70px;
    background:
        radial-gradient(circle at 10% 20%, rgba(242, 185, 75, .09), transparent 27%),
        radial-gradient(circle at 90% 60%, rgba(143, 93, 19, .08), transparent 28%);
}

.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
    gap: 70px;
    align-items: end;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.intro-copy h1 {
    max-width: 800px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 6vw, 78px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -.04em;
}

.lead {
    max-width: 760px;
    margin-top: 26px;
    color: #bdb2a1;
    font-size: 17px;
}

.intro-actions {
    margin-top: 34px;
}

.text-link {
    color: var(--gold-light);
    font-weight: 700;
    font-size: 13px;
}

.mini-facts {
    margin-top: 58px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 620px;
    border-top: 1px solid var(--line);
}

.mini-facts div {
    padding: 20px 20px 0 0;
}

.mini-facts strong {
    display: block;
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 27px;
}

.mini-facts span {
    display: block;
    color: #847a6c;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.intro-side {
    border-left: 1px solid var(--line);
    padding-left: 35px;
}

.quote-card {
    padding: 26px;
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(242, 185, 75, .09), rgba(255, 255, 255, .015));
}

.quote-mark {
    color: var(--gold);
    font-family: Georgia, serif;
    font-size: 60px;
    line-height: .5;
}

.quote-card p {
    margin: 18px 0;
    color: #d5ccbf;
    font-family: Georgia, serif;
    font-size: 19px;
}

.quote-card small,
.side-index span {
    color: #847a6c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}

.side-index {
    margin-top: 25px;
    display: grid;
    gap: 8px;
}

.side-index a {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #bcb1a0;
    font-size: 13px;
}

.side-index a:hover {
    color: var(--gold-light);
}

.banner-section {
    padding: 0 0 85px;
}

.banner-frame {
    position: relative;
    padding: 7px;
    background: linear-gradient(135deg, var(--gold-dark), #2a1b0b, var(--gold));
    box-shadow: 0 28px 70px rgba(0,0,0,.45);
}

.banner-frame::after {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    border: 1px solid rgba(255, 225, 160, .45);
}

.banner-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.section {
    padding: 100px 0;
}

.section-dark {
    background: #0d0905;
    border-top: 1px solid rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.04);
}

.section-heading {
    display: grid;
    grid-template-columns: 1fr .65fr;
    gap: 50px;
    align-items: end;
    margin-bottom: 45px;
}

.section-heading.compact {
    grid-template-columns: 1fr .8fr;
}

.section-heading h2,
.info-title h2,
.cta-inner h2,
.faq-title h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -.03em;
}

.section-heading > p,
.faq-title > p,
.cta-inner p {
    color: #9f9586;
    font-size: 14px;
}

.game-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.game-card {
    min-height: 300px;
    position: relative;
    padding: 30px;
    background: #100b06;
    transition: .25s ease;
}

.game-card:hover {
    background: #171007;
    transform: translateY(-3px);
    z-index: 2;
}

.game-card.featured {
    background: linear-gradient(145deg, #1b1208, #100b06);
}

.number {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #5d503f;
    font-size: 11px;
    letter-spacing: .12em;
}

.game-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    border: 1px solid var(--gold-dark);
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-size: 21px;
    background: rgba(242,185,75,.05);
}

.game-card h3 {
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 500;
}

.game-card p {
    margin: 12px 0 24px;
    color: #918676;
    font-size: 13px;
}

.game-card a {
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.guide-section {
    background: #f2ede4;
    color: #20170e;
}

.guide-section .eyebrow {
    color: #8c5b16;
}

.guide-section .section-heading > p {
    color: #766b5d;
}

.guide-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.guide-main {
    min-height: 310px;
    padding: 34px;
    border: 1px solid rgba(77,52,22,.18);
    background: #faf7f1;
}

.guide-main:nth-child(2) {
    background: #e9dfce;
}

.guide-main:nth-child(3) {
    background: #18110a;
    color: #f3e8d7;
}

.guide-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2em;
    color: #9a671d;
}

.guide-main:nth-child(3) .guide-label {
    color: var(--gold);
}

.guide-main h3 {
    margin-top: 90px;
    font-family: Georgia, serif;
    font-size: 30px;
    font-weight: 500;
}

.guide-main p {
    margin-top: 14px;
    color: #746a5e;
    font-size: 13px;
}

.guide-main:nth-child(3) p {
    color: #a99e8d;
}

.note-box {
    margin-top: 22px;
    padding: 18px 22px;
    display: flex;
    gap: 10px;
    background: #e6dac7;
    color: #5f5447;
    font-size: 12px;
}

.note-box strong {
    color: #2a1c0f;
}

.information-section {
    background: #0b0805;
}

.information-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 100px;
    align-items: start;
}

.info-copy {
    padding-top: 12px;
}

.info-copy p {
    margin-bottom: 24px;
    color: #a79b89;
    font-size: 16px;
}

.cta-section {
    padding: 70px 0;
    background: linear-gradient(90deg, #171006, #2a1a09, #171006);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-inner h2 {
    font-size: clamp(30px, 4vw, 48px);
}

.cta-actions {
    flex-shrink: 0;
}

.faq-section {
    background: #f7f2e9;
    color: #20170e;
}

.faq-layout {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 90px;
}

.faq-title p {
    margin-top: 20px;
    color: #75695b;
}

.faq-list {
    border-top: 1px solid rgba(32,23,14,.2);
}

.faq-list details {
    border-bottom: 1px solid rgba(32,23,14,.2);
    padding: 20px 0;
}

.faq-list summary {
    cursor: pointer;
    list-style: none;
    padding-right: 30px;
    position: relative;
    font-family: Georgia, serif;
    font-size: 20px;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";
    position: absolute;
    right: 0;
    color: #9a671d;
}

.faq-list details[open] summary::after {
    content: "−";
}

.faq-list p {
    padding: 14px 30px 0 0;
    color: #74695c;
    font-size: 13px;
}

.site-footer {
    padding: 45px 0;
    background: #060403;
    border-top: 1px solid var(--line);
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.footer-logo-link {
    display: flex;
    justify-content: center;
    width: 100%;
}

.footer-logo {
    width: 190px;
    height: auto;
    display: block;
}

.footer-inner p {
    color: #706657;
    font-size: 11px;
}

.footer-links {
    display: flex;
    gap: 20px;
    color: #9a8e7d;
    font-size: 11px;
}

@media (max-width: 950px) {
    .main-nav {
        display: none;
    }

    .intro-grid,
    .section-heading,
    .section-heading.compact,
    .information-grid,
    .faq-layout {
        grid-template-columns: 1fr;
    }

    .intro-side {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 30px 0 0;
    }

    .game-list,
    .guide-layout {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 620px) {
    .container {
        width: min(var(--max), calc(100% - 26px));
    }

    .header-inner {
        min-height: 70px;
    }

    .logo {
        width: 120px;
    }

    .header-actions .btn {
        min-height: 38px;
        padding: 0 12px;
        font-size: 10px;
    }

    .intro-section {
        padding: 60px 0 45px;
    }

    .intro-copy h1 {
        font-size: 43px;
    }

    .lead {
        font-size: 15px;
    }

    .mini-facts {
        grid-template-columns: 1fr;
    }

    .mini-facts div {
        padding: 15px 0;
        border-bottom: 1px solid rgba(242,185,75,.1);
    }

    .banner-section {
        padding-bottom: 50px;
    }

    .section {
        padding: 65px 0;
    }

    .game-list,
    .guide-layout {
        grid-template-columns: 1fr;
    }

    .game-card {
        min-height: auto;
    }

    .guide-main {
        min-height: 270px;
    }

    .guide-main h3 {
        margin-top: 70px;
    }

    .note-box {
        flex-direction: column;
    }

    .cta-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .cta-actions .btn {
        width: 100%;
    }
}


/* MEGAQQ Banner Popup */
.megaqq-popup { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; }
.megaqq-popup.is-open { display: flex; }
.megaqq-popup-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.84); backdrop-filter: blur(7px); }
.megaqq-popup-card { position: relative; z-index: 1; width: min(920px,100%); max-height: calc(100vh - 48px); overflow: auto; padding: 10px; border: 1px solid rgba(242,185,75,.5); border-radius: 18px; background: #090705; box-shadow: 0 30px 100px rgba(0,0,0,.75), 0 0 45px rgba(242,185,75,.12); }
.megaqq-popup-banner { display: block; width: 100%; height: auto; max-height: calc(100vh - 170px); object-fit: contain; border-radius: 11px; }
.megaqq-popup-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(0,0,0,.72); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.megaqq-popup-actions { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 8px 4px; }
.megaqq-popup-actions .btn { min-width: 170px; }
.megaqq-popup-dismiss { min-height: 48px; padding: 0 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: transparent; color: #bfb5a5; font: inherit; cursor: pointer; }
body.popup-open { overflow: hidden; }
@media (max-width: 620px) { .megaqq-popup { padding: 12px; } .megaqq-popup-card { padding: 7px; border-radius: 13px; } .megaqq-popup-banner { max-height: calc(100vh - 145px); border-radius: 8px; } .megaqq-popup-close { top: 10px; right: 10px; width: 34px; height: 34px; font-size: 23px; } .megaqq-popup-actions { gap: 8px; padding-top: 10px; } .megaqq-popup-actions .btn, .megaqq-popup-dismiss { width: 100%; min-width: 0; } }