:root {

    --background: #f7f7f5;
    --white: #ffffff;

    --black: #10100f;
    --text: #181817;

    --gray-1: #444440;
    --gray-2: #777771;
    --gray-3: #999993;

    --border: #deded8;
    --border-dark: #c8c8c1;

    --radius: 16px;

    --max-width: 1450px;

    --shadow:
        0 25px 70px rgba(0, 0, 0, 0.07);

}


/* =========================
   RESET
========================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {

    background: var(--background);

    color: var(--text);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;

}

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

button,
input {
    font-family: inherit;
}

::selection {
    background: #111;
    color: white;
}


/* =========================
   BACKGROUND
========================= */

.background-glow {

    position: fixed;

    top: -300px;
    left: 50%;

    transform: translateX(-50%);

    width: 1000px;
    height: 600px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.95),
            transparent 70%
        );

    z-index: -1;

}


/* =========================
   HEADER
========================= */

.header {

    position: sticky;

    top: 0;

    z-index: 100;

    height: 76px;

    padding:
        0
        4vw;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        rgba(247,247,245,0.86);

    backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid rgba(0,0,0,0.07);

}


/* LOGO */

.logo {

    display: flex;

    align-items: center;

    gap: 11px;

}

.logo-box {

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    background: var(--black);

    color: white;

    border-radius: 10px;

    font-weight: 800;

    font-size: 15px;

}

.logo-text strong {

    display: block;

    font-size: 15px;

    letter-spacing: -0.05em;

}

.logo-text span {

    display: block;

    margin-top: 2px;

    font-size: 8px;

    letter-spacing: .2em;

    color: var(--gray-3);

}


/* HEADER RIGHT */

.header-right {

    display: flex;

    align-items: center;

    gap: 25px;

}


/* SEARCH */

.search {

    width: 340px;

    height: 42px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        0
        11px;

    background: white;

    border:
        1px solid var(--border);

    border-radius: 10px;

}

.search svg {

    width: 17px;

    height: 17px;

    fill: none;

    stroke: #777;

    stroke-width: 1.8;

}

.search input {

    width: 100%;

    border: 0;

    outline: none;

    background: transparent;

    font-size: 12px;

}

.search kbd {

    font-size: 8px;

    color: #999;

    padding: 4px 6px;

    border:
        1px solid var(--border);

    border-radius: 5px;

    white-space: nowrap;

}


/* LINKS */

.header-link {

    font-size: 11px;

    font-weight: 600;

}

.discord-button {

    padding:
        12px
        16px;

    background: #111;

    color: white;

    border-radius: 9px;

    font-size: 11px;

    font-weight: 600;

    transition: .25s;

}

.discord-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.15);

}


/* =========================
   HERO
========================= */

.hero {

    max-width: var(--max-width);

    margin: auto;

    min-height: 620px;

    padding:
        100px
        5vw
        90px;

    display: grid;

    grid-template-columns:
        1.15fr
        .85fr;

    gap: 80px;

    align-items: center;

}


.eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #898982;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .18em;

}

.eyebrow span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #111;

}


.hero h1 {

    margin-top: 22px;

    font-size:
        clamp(
            58px,
            7vw,
            105px
        );

    line-height: .91;

    letter-spacing: -.075em;

    font-weight: 800;

}

.hero h1 span {

    color: #aaa;

}


.hero-content > p {

    max-width: 590px;

    margin-top: 27px;

    color: #70706a;

    font-size: 14px;

    line-height: 1.8;

}


/* HERO STATS */

.hero-stats {

    display: flex;

    gap: 38px;

    margin-top: 48px;

    padding-top: 22px;

    border-top:
        1px solid var(--border);

}

.stat {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.stat strong {

    font-size: 17px;

    letter-spacing: -.03em;

}

.stat span {

    color: #999;

    font-size: 8px;

    letter-spacing: .15em;

}


/* HERO CARD */

.hero-card {

    height: 430px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background:
        linear-gradient(
            145deg,
            #fff,
            #e9e9e5
        );

    border:
        1px solid var(--border-dark);

    border-radius: 28px;

    box-shadow: var(--shadow);

    transform: rotate(2deg);

    transition:
        .6s
        cubic-bezier(.2,.8,.2,1);

}

.hero-card:hover {

    transform:
        rotate(0deg)
        translateY(-8px);

}

.hero-card-top,
.hero-card-bottom {

    display: flex;

    justify-content: space-between;

    font-size: 9px;

    letter-spacing: .15em;

    font-weight: 700;

}

.hero-card-top {
    color: #999;
}

.hero-card-bottom {
    color: #777;
}

.hero-card-middle {

    align-self: center;

    font-size: 150px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -.12em;

}


/* =========================
   RULE LAYOUT
========================= */

.rules-layout {

    max-width:
        var(--max-width);

    margin: auto;

    padding:
        40px
        4vw
        120px;

    display: grid;

    grid-template-columns:
        230px
        minmax(0,1fr)
        200px;

    gap: 55px;

}


/* =========================
   SIDEBAR
========================= */

.sidebar {

    position: sticky;

    top: 105px;

    height:
        calc(
            100vh - 140px
        );

    display: flex;

    flex-direction: column;

}

.sidebar-title {

    margin-bottom: 18px;

    color: #999;

    font-size: 9px;

    letter-spacing: .18em;

    font-weight: 700;

}

#categoryNavigation {

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.nav-item {

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        10px
        9px;

    color: #777;

    border-radius: 8px;

    font-size: 11px;

    transition: .2s;

}

.nav-item b {

    color: #aaa;

    font-size: 9px;

}

.nav-item:hover {

    background: #ecece8;

    color: #111;

}

.nav-item.active {

    background: #111;

    color: white;

}

.nav-item.active b {

    color: #aaa;

}


/* PROGRESS */

.sidebar-progress {

    margin-top: auto;

}

.progress-header {

    display: flex;

    justify-content: space-between;

    color: #999;

    font-size: 8px;

    letter-spacing: .12em;

}

.progress-header strong {

    color: #111;

}

.progress {

    height: 3px;

    margin-top: 8px;

    background: #ddd;

    border-radius: 5px;

    overflow: hidden;

}

.progress span {

    display: block;

    width: 0;

    height: 100%;

    background: #111;

    transition: .2s;

}


/* =========================
   CONTENT HEADER
========================= */

.content-header {

    display: flex;

    justify-content: space-between;

    align-items: end;

    padding-bottom: 30px;

    border-bottom:
        1px solid var(--border);

}

.section-label {

    color: #999;

    font-size: 9px;

    letter-spacing: .18em;

    font-weight: 700;

}

.content-header h2 {

    margin-top: 9px;

    font-size: 38px;

    letter-spacing: -.06em;

}

.print-button {

    padding:
        11px
        14px;

    border:
        1px solid var(--border-dark);

    border-radius: 9px;

    background: white;

    cursor: pointer;

    font-size: 10px;

    font-weight: 600;

    transition: .2s;

}

.print-button:hover {

    background: #111;

    color: white;

}


/* =========================
   CATEGORY
========================= */

.rule-category {

    padding:
        55px
        0
        10px;

    scroll-margin-top: 100px;

}

.category-header {

    display: flex;

    gap: 17px;

    margin-bottom: 25px;

}

.category-number {

    padding-top: 5px;

    color: #aaa;

    font-size: 10px;

    font-weight: 700;

}

.category-header h3 {

    font-size: 25px;

    letter-spacing: -.045em;

}

.category-header p {

    margin-top: 6px;

    color: #888;

    font-size: 11px;

    line-height: 1.6;

}


/* =========================
   RULE
========================= */

.rule {

    display: grid;

    grid-template-columns:
        75px
        1fr
        22px;

    gap: 18px;

    padding:
        21px
        15px;

    border-top:
        1px solid var(--border);

    scroll-margin-top: 100px;

    transition: .25s;

}

.rule:hover {

    background: white;

    border-radius: 10px;

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.035);

}

.rule-number {

    color: #aaa;

    font-size: 10px;

    font-weight: 700;

}

.rule h4 {

    margin-bottom: 7px;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .03em;

}

.rule p {

    color: #686862;

    font-size: 12px;

    line-height: 1.75;

}

.rule-index {

    width: 20px;
    height: 20px;

    display: grid;

    place-items: center;

    color: #aaa;

    border:
        1px solid #ddd;

    border-radius: 50%;

    font-size: 9px;

}


/* IMPORTANT */

.rule.important {

    border-left:
        2px solid #111;

    padding-left: 13px;

}

.rule.important h4::after {

    content: "DŮLEŽITÉ";

    margin-left: 8px;

    padding:
        4px
        6px;

    background: #111;

    color: white;

    border-radius: 4px;

    font-size: 7px;

    letter-spacing: .12em;

}


/* =========================
   RIGHT TOC
========================= */

.right-toc {

    position: sticky;

    top: 105px;

    height: max-content;

    padding-left: 18px;

    border-left:
        1px solid var(--border);

}

.right-toc > span {

    display: block;

    margin-bottom: 12px;

    color: #999;

    font-size: 9px;

    letter-spacing: .18em;

    font-weight: 700;

}

.toc-item {

    display: block;

    padding: 6px 0;

    color: #aaa;

    font-size: 9px;

    line-height: 1.4;

    transition: .2s;

}

.toc-item:hover {

    color: #555;

}

.toc-item.active {

    color: #111;

    font-weight: 700;

}


/* =========================
   SEARCH
========================= */

.search-info {

    margin-top: 18px;

    color: #888;

    font-size: 11px;

}

.hidden {
    display: none !important;
}

.no-results {

    padding:
        100px
        0;

    text-align: center;

}

.no-results-icon {

    font-size: 45px;

    color: #aaa;

}

.no-results h3 {

    margin-top: 15px;

    font-size: 20px;

}

.no-results p {

    margin-top: 5px;

    color: #888;

    font-size: 12px;

}


/* =========================
   AGREEMENT
========================= */

.agreement {

    max-width:
        var(--max-width);

    margin:
        0 auto
        90px;

    padding:
        50px
        5vw;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background: #111;

    color: white;

    border-radius: 24px;

}

.agreement .section-label {

    color: #777;

}

.agreement h2 {

    margin-top: 8px;

    font-size: 30px;

    letter-spacing: -.05em;

}

.agreement p {

    max-width: 600px;

    margin-top: 8px;

    color: #999;

    font-size: 12px;

    line-height: 1.7;

}

.agreement button {

    padding:
        15px
        18px;

    border: 0;

    background: white;

    color: #111;

    border-radius: 10px;

    cursor: pointer;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;

}

.agreement button span {

    margin-left: 15px;

}


/* =========================
   FOOTER
========================= */

footer {

    padding:
        35px
        5vw;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top:
        1px solid var(--border);

    color: #999;

    font-size: 9px;

}

.footer-brand {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #111;

}

.footer-brand .logo-box {

    width: 28px;
    height: 28px;

    border-radius: 7px;

    font-size: 11px;

}


/* =========================
   TOAST
========================= */

.toast {

    position: fixed;

    left: 50%;

    bottom: 30px;

    transform:
        translate(
            -50%,
            20px
        );

    opacity: 0;

    pointer-events: none;

    padding:
        13px
        18px;

    background: #111;

    color: white;

    border-radius: 9px;

    font-size: 11px;

    transition: .3s;

    z-index: 200;

}

.toast.show {

    opacity: 1;

    transform:
        translate(
            -50%,
            0
        );

}


/* =========================
   MOBILE
========================= */

@media (max-width: 1150px) {

    .rules-layout {

        grid-template-columns:
            190px
            minmax(0,1fr);

    }

    .right-toc {

        display: none;

    }

}


@media (max-width: 850px) {

    .header {

        height: auto;

        min-height: 68px;

        padding:
            12px
            5vw;

    }

    .header-right {

        gap: 8px;

    }

    .header-link {

        display: none;

    }

    .search {

        width: 190px;

    }

    .search kbd {

        display: none;

    }

    .hero {

        grid-template-columns: 1fr;

        padding-top: 65px;

        min-height: auto;

    }

    .hero-card {

        max-width: 500px;

        width: 100%;

        height: 320px;

    }

    .hero-card-middle {

        font-size: 110px;

    }

    .rules-layout {

        grid-template-columns: 1fr;

        padding-top: 15px;

    }

    .sidebar {

        position: sticky;

        top: 68px;

        height: auto;

        z-index: 20;

        padding:
            12px
            0;

        background:
            rgba(247,247,245,.95);

        border-bottom:
            1px solid var(--border);

    }

    .sidebar-title,
    .sidebar-progress {

        display: none;

    }

    #categoryNavigation {

        flex-direction: row;

        overflow-x: auto;

        padding-bottom: 4px;

    }

    .nav-item {

        min-width: max-content;

    }

    .content-header h2 {

        font-size: 29px;

    }

    .rule {

        grid-template-columns:
            58px
            1fr;

    }

    .rule-index {

        display: none;

    }

    .agreement {

        margin:
            0
            4vw
            60px;

        flex-direction: column;

        align-items: flex-start;

    }

    footer {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }

}


@media print {

    .header,
    .sidebar,
    .right-toc,
    .print-button,
    .agreement,
    footer,
    .hero-card,
    .search-info {

        display: none !important;

    }

    body {

        background: white;

    }

    .hero {

        min-height: auto;

        padding: 20px;

    }

    .rules-layout {

        display: block;

        padding: 20px;

    }

    .rule-category {

        break-inside: avoid;

    }

}