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

:root {
    --white: #fff;
    --offwhite: #f5f2ec;
    --light: rgba(255,255,255,0.92);
    --glass: rgba(255,255,255,0.14);
    --glass-border: rgba(255,255,255,0.28);
    --glass-hover: rgba(255,255,255,0.22);
    --accent: #e8c87a;
    --accent2: #b5985a;
    --text-dark: #1a1612;
    --text-mid: #3d3428;
    --shadow: 0 8px 40px rgba(0,0,0,0.35);
    --radius: 8px;
    --font-display: 'Cinzel', serif;
    --font-body: 'Outfit', sans-serif;
}

html, body {
    min-height: 100%;
    font-family: var(--font-body);
    color: var(--white);
    overflow-x: hidden;
}

/* ── Background ─────────────────────────────────── */
#bg-placeholder {
    position: fixed; inset: 0; z-index: -2;
    background: linear-gradient(135deg, #1a2a1a 0%, #2d3d1e 40%, #1e2d3a 100%);
}

#bg-image {
    position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: top;
    filter: blur(14px) brightness(0.52) saturate(0.85); transform: scale(1.06); opacity: 0;
    transition: opacity 1.4s ease;
}
#bg-image.loaded { opacity: 1; }

/* ── Layout ──────────────────────────────────────── */
.page {
    min-height: 100vh; display: flex;
    flex-direction: column; align-items: center; justify-content: top;
    padding: 0 24px 48px;
    gap: 0;
}

/* ── Header ────────────────────────────────────────── */
header {
    margin-top: calc(50vh - 400px);
    text-align: center; margin-bottom: 15px; 
    transform-origin: top center; transform: scale(1);
    transition: margin 0.5s ease, transform 0.5s ease;

    &.intro { animation: fadeUp 0.8s ease both; }

    &.compact { margin-top: 30px; transform: scale(0.72); margin-bottom: -20px; }

    .header-title {
        font-family: var(--font-display);  font-size: clamp(3rem, 10vw, 7rem); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
        color: var(--white);
        text-shadow:
          0 0 60px rgba(232,200,122,0.55),
          0 2px 0 rgba(0,0,0,0.4),
          0 4px 24px rgba(0,0,0,0.5);

        line-height: 1; position: relative;
        user-select: none; cursor: default;

        &:after {
            content: ''; display: block; height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            margin: 14px auto 0; width: 60%; border-radius: 2px;
        }
    }

    .header-sub {
        margin-top: 16px; font-size: clamp(0.8rem, 2.2vw, 1rem); font-weight: 400;
        letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.65);
        em { color: var(--accent); font-style: normal; font-weight: 600; }
    }    

}

/* ── Navigation ──────────────────────────────────── */
nav {
    display: flex; gap: 12px; opacity: 0; pointer-events: none; margin-bottom: 28px;
    transform: translateY(-8px); transition: opacity 0.35s ease, transform 0.35s ease; 
    &.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
}

.nav-btn {
    padding: 7px 18px; border-radius: 999px; text-decoration: none; user-select: none;
    border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65);
    font-family: var(--font-body); font-size: 0.8rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;

    &:hover { background: rgba(255,255,255,0.16); color: #fff; }
    &.active { background: var(--accent); border-color: var(--accent); color: var(--text-dark); font-weight: 500; }
}
  
@media (max-width: 640px) {
    nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* ── Inner page content block ────────────────────── */
.inner-page {
    display: none; width: 100%; max-width: 860px; max-height: 75vh;
    overflow-y: auto; background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 32px 36px;
    opacity: 0; transform: translateY(12px); transition: opacity 0.35s ease, transform 0.35s ease;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.inner-page::-webkit-scrollbar { width: 4px; }
.inner-page::-webkit-scrollbar-track { background: transparent; }
.inner-page::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 99px; }
  
.inner-page.visible { opacity: 1; transform: translateY(0); }

/* ── Main page hide/show ─────────────────────────── */
.main-content {
    opacity: 1;
    &.hidden {
        opacity: 0 !important; pointer-events: none !important; transform: translateY(8px) !important;
        height: 0; transition: opacity 0.3s ease, transform 0.3s ease;
    }
}
  
@media (max-width: 940px) {
    .inner-page { padding: 22px 18px; max-height: 70vh; }
    header { margin-top: 30px !important; transform: scale(0.72) !important; margin-bottom: -20px !important; }
}
  


/* ── Card grid ───────────────────────────────────── */
.card-row {
    display: flex; gap: 14px; width: 100%; max-width: 860px;
    animation: fadeUp 0.9s 0.12s ease both;
}

.card {
    flex: 1; background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 20px 22px; transition: background 0.22s;
    cursor: default; min-height: 135px;
    a { position: relative; }
    a span { position: absolute; top: 31px; left: 3px; opacity: .6; font-size: 13px; }
    &:hover { background: var(--glass-hover); }
}

.card-label {
    font-size: 12px; font-weight: 600; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}

.card-title {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    letter-spacing: 0.06em; color: var(--white); margin-bottom: 10px;
}

.card-body {
    font-size: 0.88rem; color: rgba(255,255,255,0.82); line-height: 1.5;
}

.link-pair {
    display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px;
}

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 5px;
    font-size: 16px; font-weight: 400;
    letter-spacing: 0.04em; color: var(--text-dark); background: var(--accent);
    text-decoration: none; 
    transition: background 0.18s, transform 0.18s;
}
.pill:hover { background: #f0d68a; }

.pill-ghost {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.45);
}
.pill-ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); }

.link-modrinth { 
    background: #00af5c; color: var(--white); 
    &:hover { background: #009d53; }
}
.link-curseforge { 
    background: #eb622b; color: var(--white);
    &:hover { background: #ff784d; } 
}

.coming-soon {
    display: inline-block; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.45); margin-top: 4px;
}

/* ── Support row ─────────────────────────────────── */
.support-row {
    display: flex; gap: 14px;
    width: 100%; max-width: 860px;
    margin-top: 14px; animation: fadeUp 0.9s 0.22s ease both;
}

.support-card {
    flex: 1; border-radius: var(--radius); padding: 18px 22px;
    display: flex; align-items: center; gap: 14px; text-decoration: none;
    font-weight: 600; font-size: 0.92rem; transition: filter 0.2s;
}
.support-card:hover { filter: brightness(1.12); }

.support-card.boosty {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #fff;
}
.support-card.discord {
    background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
    color: #fff;
}

.support-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.18); border-radius: 10px; font-size: 1.1rem;
}

.support-text small {
    display: block; font-weight: 400; font-size: 0.75rem;
    opacity: 0.8; margin-top: 1px; letter-spacing: 0.04em;
}

/* ── Gallery ─────────────────────────────────────── */
.gallery-wrap { width: 100%; max-width: 860px; margin-top: 20px; animation: fadeUp 0.9s 0.3s ease both; }

.gallery-label {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; padding-left: 2px;
    text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 10px;
}

.gallery-track-wrap { position: relative; overflow: hidden; border-radius: var(--radius); }

.gallery-track {
    display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent;
    
}
.gallery-track::-webkit-scrollbar { height: 4px; }
.gallery-track::-webkit-scrollbar-track { background: transparent; }
.gallery-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 99px; }

.gallery-thumb {
    flex-shrink: 0;  width: 220px; height: 130px; border-radius: 10px;
    overflow: hidden; cursor: zoom-in; scroll-snap-align: start;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
    transition: transform 0.2s, border-color 0.2s; position: relative;
}
.gallery-thumb:hover { border-color: rgba(232,200,122,0.5); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.thumb-placeholder {
    width: 100%; height: 100%; display: flex;
    flex-direction: column; align-items: center;
    justify-content: center; gap: 6px;
    color: rgba(255,255,255,0.3); font-size: 0.72rem;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.thumb-placeholder svg { opacity: 0.4; }

/* ── Lightbox ────────────────────────────────────── */
#lightbox {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.92); align-items: center;
    justify-content: center; cursor: zoom-out;
}
#lightbox.open { display: flex; }

#lightbox img {
    max-width: 92vw; max-height: 88vh; border-radius: 8px;
    box-shadow: 0 20px 80px rgba(0,0,0,0.7); animation: lbIn 0.22s ease;
}

#lightbox-close {
    position: absolute; top: 20px; right: 24px; background: none; border: none; color: rgba(255,255,255,0.6);
    font-size: 2rem; cursor: pointer; line-height: 1; transition: color 0.15s;
}
#lightbox-close:hover { color: #fff; }

/* ── Footer links ────────────────────────────────── */
.footer-links { margin-top: 18px; display: flex; gap: 24px; animation: fadeUp 0.9s 0.36s ease both; }

.footer-links a {
    font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; transition: color 0.18s;
    text-transform: uppercase; color: rgba(255,255,255,0.42); text-decoration: none;
}
.footer-links a:hover { color: var(--accent); }

/* ── Animations ──────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lbIn {
    from { opacity: 0; transform: scale(0.93); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 940px) {
    .card-row, .support-row { flex-direction: column; }

    .card, .support-card { width: 100%; flex: none; }
    .page { display: block; padding: 36px 16px 40px; }

    .card-row, .support-row { flex-direction: column; }
    .gallery-thumb { width: 180px; height: 108px; }
    .footer-links { flex-wrap: wrap; justify-content: center; }
}


/* ── Changelog ───────────────────────────────────── */
.log_row {
    border-radius: 6px; overflow: hidden;
    margin-bottom: 8px; background: #e2dcc8;
    border: 1px solid #c9b882; color: #2a1f0e;

    .title {
        padding: 14px 18px; font-family: var(--font-display); font-size: 0.95rem;
        font-weight: 700; letter-spacing: 0.04em;
        cursor: pointer; display: flex;
        justify-content: flex-start; align-items: center;
        user-select: none; transition: background 0.18s; color: #3d2e0e;

        &:hover { background: rgba(0,0,0,0.06); }

        &::after {
            content: '▾'; font-size: 1rem; transition: transform 0.25s ease;
            color: #8a6a20; margin-left: auto;
        }
    }

    &.collapsed .title::after { transform: rotate(-90deg); }

    .desc {
        padding: 0 18px 16px; font-size: 0.88rem;
        line-height: 1.6; color: #3d2e0e;
        border-top: 1px solid #c9b882;

        b {
            display: block; margin-top: 12px; margin-bottom: 4px;
            font-weight: 700; color: #5c3d0a; font-size: 0.78rem; letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        ul {
            padding-left: 18px; margin: 0;
            li { margin-bottom: 3px; }
        }
    }

    &.collapsed .desc { display: none; }

    .log-date {
        font-family: var(--font-body); font-size: 0.78rem; font-weight: 400;
        color: #8a6a20; margin-left: 10px; letter-spacing: 0.04em;
    }

    .badge-soon {
        display: inline-block; padding: 2px 10px; border-radius: 999px;
        background: #88640f; color: #f5ecd0; font-family: var(--font-body);
        font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
        text-transform: uppercase; vertical-align: middle; margin-left: 10px;
    }
}


.text-content-page {
    background: #f0e8cc; border-color: #c9b882; color: #2a1f0e;

    .card-label { color: #8a6a20; }

    h3 {
        font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 20px; margin-bottom: 6px;
        &.allow { color: #4a7c3f; }
        &.deny  { color: #8b3a2f; }
    }

    h2 { color: #3d2e0e; font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 20px; }
    p { color: #3d2e0e; line-height: 1.8; margin-bottom: 14px; }
    ul { padding-left: 20px; margin-bottom: 14px;
        li { color: #3d2e0e; line-height: 1.8; margin-bottom: 4px; }
    }

    .about-contacts {
        margin-top: 24px; padding-top: 16px; border-top: 1px solid #c9b882; color: #5c3d0a; font-size: 0.9rem;
        a { color: #8a6a20; font-weight: 600; text-decoration: none;
            &:hover { text-decoration: underline; }
        }
    }
}

#page-addons, #page-changelog { background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }

.addons-container {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%;

    .addon {
        background: #f0e8cc; border: 1px solid #c9b882; border-radius: var(--radius);
        overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s;
        &:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
        
        .image {
            width: 100%; aspect-ratio: 16/12; background: #d9cc9e; overflow: hidden;
            img { width: 100%; height: 100%; object-fit: cover; display: block; }
        }

        .title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: #3d2e0e; padding: 12px 14px 4px; }
        .description { font-size: 0.82rem; color: #5c3d0a; padding: 0 14px; line-height: 1.5; flex: 1; }

        span { font-size: 0.68rem; color: #a08840; letter-spacing: 0.06em; padding: 0; }
    
        .addon-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 14px; }

        .download {
            display: inline-block; margin: 0; padding: 7px 20px; text-align: center; border-radius: 5px;
            background: #4a7c3f; color: #f0f5ee; font-size: 0.8rem; font-weight: 600;
            letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background 0.18s;
            &:hover { background: #3a6230; }
        }
    }
}

@media (max-width: 640px) {
    .addons-container { grid-template-columns: 1fr; }
}