/* SiteHead — верхняя панель в духе dark metal / Dota UI */



:root {

    --sh-bg: rgba(10, 8, 10, 0.88);

    --sh-border: rgba(120, 130, 145, 0.35);

    --sh-border-soft: rgba(70, 75, 90, 0.55);

    --sh-text: #b8bec8;

    --sh-text-dim: rgba(150, 155, 165, 0.35);

    --sh-hover: #e8eef6;

    --sh-hover-glow: rgba(210, 220, 235, 0.7);

    --sh-active: #f2f5fa;

    --sh-logo-border: rgba(160, 170, 185, 0.45);

    --sh-logo-bg: rgba(20, 16, 18, 0.7);

    --sh-font: "Cinzel", "Cormorant Garamond", "Times New Roman", serif;

    --sh-quote-h: 28px;

}



.site-head {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 100;

    display: flex;

    align-items: center;

    padding: 12px 30px;

    gap: 20px;

    box-sizing: border-box;

    background:

        linear-gradient(

            180deg,

            rgba(28, 26, 30, 0.55) 0%,

            transparent 55%

        ),

        var(--sh-bg);

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

    box-shadow:

        inset 0 -1px 0 rgba(0, 0, 0, 0.65),

        inset 0 1px 0 rgba(255, 255, 255, 0.04),

        0 8px 24px rgba(0, 0, 0, 0.45);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

}



.logo-sprite {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    padding: 0;

    box-sizing: border-box;

    text-decoration: none;

    background: transparent;

    border: none;

    box-shadow: none;

    cursor: pointer;

    flex-shrink: 0;

    transition:

        filter 0.25s ease,

        transform 0.2s ease,

        opacity 0.25s ease;

}



.logo-sprite img {

    display: block;

    width: 48px;

    height: 48px;

    object-fit: contain;

    image-rendering: pixelated;

    image-rendering: crisp-edges;

    filter: grayscale(1) brightness(1.15);

    transition: filter 0.3s ease;

}



.logo-sprite:hover {

    filter: none;

}



.logo-sprite:hover img {

    filter: grayscale(0) brightness(1);

}



.logo-sprite:active {

    transform: scale(0.96);

}



.nav-links {

    display: flex;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;

}



.nav-link {

    font-family: var(--sh-font);

    font-size: 0.82rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--sh-text);

    text-decoration: none;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);

    padding: 6px 2px;

    transition:

        color 0.25s ease,

        text-shadow 0.25s ease;

    white-space: nowrap;

}



html[lang="ru"] .nav-link {

    letter-spacing: 1.2px;

}



.nav-link:hover {

    color: var(--sh-hover);

    text-shadow:

        0 0 8px var(--sh-hover-glow),

        0 0 18px rgba(200, 215, 235, 0.4),

        0 1px 2px rgba(0, 0, 0, 0.8);

}



.nav-link.is-active {

    color: var(--sh-active);

    text-shadow:

        0 0 6px rgba(220, 230, 245, 0.55),

        0 1px 2px rgba(0, 0, 0, 0.8);

}



.nav-divider {

    color: var(--sh-text-dim);

    font-family: var(--sh-font);

    font-size: 0.8rem;

    font-weight: 500;

    user-select: none;

    opacity: 0.7;

}



/* Слот-барабан цитат — справа */

.quote-reel {

    margin-left: auto;

    flex: 1 1 200px;

    max-width: min(52vw, 640px);

    min-width: 0;

}



.quote-reel__window {

    height: var(--sh-quote-h);

    overflow: hidden;

    position: relative;

    mask-image: linear-gradient(

        180deg,

        transparent 0%,

        #000 22%,

        #000 78%,

        transparent 100%

    );

    -webkit-mask-image: linear-gradient(

        180deg,

        transparent 0%,

        #000 22%,

        #000 78%,

        transparent 100%

    );

}



.quote-reel__window::before,

.quote-reel__window::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    height: 1px;

    z-index: 1;

    pointer-events: none;

    background: linear-gradient(

        90deg,

        transparent,

        rgba(180, 190, 205, 0.25),

        transparent

    );

}



.quote-reel__window::before {

    top: 0;

}



.quote-reel__window::after {

    bottom: 0;

}



.quote-reel__track {

    display: flex;

    flex-direction: column;

    will-change: transform;

}



.quote-reel__track.is-spinning {

    transition: transform 0.85s cubic-bezier(0.12, 0.8, 0.2, 1);

}



.quote-reel__item {

    height: var(--sh-quote-h);

    line-height: var(--sh-quote-h);

    display: block;

    padding: 0 4px;

    box-sizing: border-box;

    font-family: var(--sh-font);

    font-size: 0.72rem;

    font-weight: 500;

    font-style: italic;

    letter-spacing: 0.06em;

    color: rgba(190, 198, 210, 0.72);

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);

    text-align: right;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



html[lang="ru"] .quote-reel__item {

    font-size: 0.92rem;

    letter-spacing: 0.03em;

}



/* Переключатель языка — слот ENG/RU */

.lang-reel {

    appearance: none;

    border: 1px solid rgba(160, 170, 185, 0.28);

    background: rgba(14, 12, 16, 0.55);

    color: var(--sh-text);

    cursor: pointer;

    padding: 0 10px;

    height: 32px;

    min-width: 56px;

    box-sizing: border-box;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-shadow:

        inset 0 0 10px rgba(160, 175, 195, 0.08),

        0 0 0 1px rgba(0, 0, 0, 0.35);

    transition:

        border-color 0.25s ease,

        box-shadow 0.25s ease,

        color 0.25s ease;

}



.lang-reel:hover {

    border-color: rgba(210, 220, 235, 0.55);

    color: var(--sh-hover);

    box-shadow:

        inset 0 0 12px rgba(200, 215, 235, 0.14),

        0 0 10px rgba(200, 215, 235, 0.18);

}



.lang-reel__window {

    display: block;

    height: var(--sh-quote-h);

    width: 2.6em;

    overflow: hidden;

    position: relative;

    mask-image: linear-gradient(

        180deg,

        transparent 0%,

        #000 18%,

        #000 82%,

        transparent 100%

    );

    -webkit-mask-image: linear-gradient(

        180deg,

        transparent 0%,

        #000 18%,

        #000 82%,

        transparent 100%

    );

}



.lang-reel__track {

    display: flex;

    flex-direction: column;

    will-change: transform;

}



.lang-reel__track.is-spinning {

    transition: transform 0.75s cubic-bezier(0.12, 0.8, 0.2, 1);

}



.lang-reel__item {

    height: var(--sh-quote-h);

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: var(--sh-font);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);

    user-select: none;

}



/* Laptop / small desktop — quote yields space */

@media (max-width: 1024px) {

    .site-head {

        padding: 10px 20px;

        gap: 14px;

    }



    .quote-reel {

        flex: 1 1 160px;

        max-width: min(40vw, 420px);

    }



    .quote-reel__item {

        font-size: 0.65rem;

    }



    html[lang="ru"] .quote-reel__item {

        font-size: 0.8rem;

    }

}



/* Tablet — header can wrap; quote takes full next row */

@media (max-width: 900px) {

    .site-head {

        flex-wrap: wrap;

        row-gap: 10px;

        padding: 10px 16px;

    }



    .nav-links {

        gap: 12px;

    }



    .nav-link {

        font-size: 0.76rem;

        letter-spacing: 1.5px;

    }



    html[lang="ru"] .nav-link {

        letter-spacing: 0.8px;

    }



    .quote-reel {

        order: 3;

        flex: 1 1 100%;

        width: 100%;

        max-width: none;

        margin-left: 0;

    }



    .quote-reel__item {

        text-align: left;

        font-size: 0.68rem;

    }



    html[lang="ru"] .quote-reel__item {

        font-size: 0.84rem;

    }



    .lang-reel {

        margin-left: auto;

    }

}



/* Phone — grid: logo | nav | lang / quotes full width */

@media (max-width: 640px) {

    .site-head {

        display: grid;

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

        grid-template-areas:

            "logo nav lang"

            "quote quote quote";

        align-items: center;

        column-gap: 10px;

        row-gap: 8px;

        padding: 8px 12px;

    }



    .logo-sprite {

        grid-area: logo;

        width: 40px;

        height: 40px;

    }



    .logo-sprite img {

        width: 40px;

        height: 40px;

    }



    .nav-links {

        grid-area: nav;

        gap: 6px;

        min-width: 0;

        flex-wrap: nowrap;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

    }



    .nav-links::-webkit-scrollbar {

        display: none;

    }



    .nav-link {

        font-size: 0.68rem;

        letter-spacing: 1px;

        padding: 10px 4px;

        min-height: 44px;

        display: inline-flex;

        align-items: center;

    }



    html[lang="ru"] .nav-link {

        font-size: 0.7rem;

        letter-spacing: 0.4px;

    }



    .nav-divider {

        font-size: 0.65rem;

        flex-shrink: 0;

    }



    .quote-reel {

        grid-area: quote;

        order: unset;

        flex: unset;

        width: auto;

        max-width: none;

        margin-left: 0;

    }



    .quote-reel__item {

        text-align: left;

        font-size: 0.62rem;

    }



    html[lang="ru"] .quote-reel__item {

        font-size: 0.78rem;

    }



    .lang-reel {

        grid-area: lang;

        margin-left: 0;

        height: 40px;

        min-width: 48px;

        padding: 0 8px;

    }

}



@media (max-width: 380px) {

    .nav-divider {

        display: none;

    }



    .nav-links {

        gap: 4px;

    }



    .nav-link {

        font-size: 0.62rem;

        letter-spacing: 0.6px;

        padding: 10px 2px;

    }



    html[lang="ru"] .nav-link {

        font-size: 0.64rem;

        letter-spacing: 0.2px;

    }

}



/* Compact Mobile Landscape */

@media (max-height: 520px) {

    .site-head {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 4px 12px;

        height: 46px;

        gap: 8px;

        flex-wrap: nowrap;

    }



    .logo-sprite {

        width: 32px;

        height: 32px;

    }



    .logo-sprite img {

        width: 32px;

        height: 32px;

    }



    .quote-reel {

        display: none;

    }



    .nav-links {

        gap: 8px;

        overflow-x: auto;

        scrollbar-width: none;

        -ms-overflow-style: none;

    }



    .nav-links::-webkit-scrollbar {

        display: none;

    }



    .nav-link {

        font-size: 0.68rem;

        padding: 6px 4px;

        min-height: 36px;

    }



    .lang-reel {

        height: 32px;

        min-width: 44px;

        padding: 0 6px;

    }

}