/* ==========================================================================
   Gold on black — the site's shared skin.

   The landing, the blog and every page built on the shared header load this
   file after site-nav.css and launch-banner.css, so the header, the drawer,
   the launch bubble, the footer and every call to action look the same on all
   of them. The admin does not load it: it keeps its own plain controls.

   It only dresses those shared parts. What belongs to one page stays in that
   page: the landing's sections in views/home.php, the blog's in blog.css.
   ========================================================================== */

:root {
    --gold: #d4af37;
    --gold-rgb: 212, 175, 55;
    --gold-light: #f3d98b;
    --gold-deep: #8a6a24;
    --ink: #050507;
    --parchment: #f4e6c3;
    --font-epic: 'Cinzel', 'Noto Serif', serif;
}

/* The "it's alive" pulse every status mark on the site shares. */
@keyframes gold-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.65); }
    50%      { box-shadow: 0 0 0 4px rgba(212,175,55,0); }
}

/* ==========================================================================
   The button.

   Every call to action is this one: a bronze plate with its corners cut,
   rimmed in a single line of gold that brightens where the corners turn, and
   a glint that crosses the plate under the pointer. The rim is the element's
   ::before and the plate its ::after, one pixel inside it; both are clipped
   to the cut-corner outline, so the gold follows the diagonals as well as the
   sides. The shadow and the hover glow are a drop-shadow on the element
   itself, which traces that outline where a box-shadow would draw a
   rectangle. No extra markup, so a link, a button or a span can all wear it;
   --sm is the same button for cards and bars.

   .btn-epic is the landing's class. .l2-button-primary is the one the blog,
   the support pages, the 404 and the article CTAs were written with — the
   CTAs are stored inside the articles themselves — and the header's and the
   launch bubble's buttons come from shared partials. They are all listed in
   :is() rather than renamed, so no stored article and no partial changes.
   :is() also takes the specificity of its strongest entry, which is what
   lets these rules beat site-nav.css, launch-banner.css and blog.css.
   ========================================================================== */
:is(.btn-epic, .l2-button-primary, .site-header .site-download, .site-header .site-enter, .site-drawer-panel .site-drawer-download, .site-drawer-panel .site-drawer-enter, .launch-banner .launch-btn) {
    --be-pad-y: 0.95rem;
    --be-pad-x: 2.25rem;
    --be-cut: 10px;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    padding: var(--be-pad-y) var(--be-pad-x);
    font-family: var(--font-epic);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: #f7e9c4;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
    cursor: pointer;
    transition: color 0.2s ease, filter 0.25s ease, transform 0.15s ease;
}
/* Rim and plate share the cut-corner outline. */
:is(.btn-epic, .l2-button-primary, .site-header .site-download, .site-header .site-enter, .site-drawer-panel .site-drawer-download, .site-drawer-panel .site-drawer-enter, .launch-banner .launch-btn)::before,
:is(.btn-epic, .l2-button-primary, .site-header .site-download, .site-header .site-enter, .site-drawer-panel .site-drawer-download, .site-drawer-panel .site-drawer-enter, .launch-banner .launch-btn)::after {
    content: '';
    position: absolute;
    z-index: -1;
    clip-path: polygon(
        var(--be-cut) 0, calc(100% - var(--be-cut)) 0,
        100% var(--be-cut), 100% calc(100% - var(--be-cut)),
        calc(100% - var(--be-cut)) 100%, var(--be-cut) 100%,
        0 calc(100% - var(--be-cut)), 0 var(--be-cut)
    );
}
/* The rim: gold lit from above, brightest at the four cut corners. Only the
   pixel the plate leaves uncovered shows. */
:is(.btn-epic, .l2-button-primary, .site-header .site-download, .site-header .site-enter, .site-drawer-panel .site-drawer-download, .site-drawer-panel .site-drawer-enter, .launch-banner .launch-btn)::before {
    inset: 0;
    background:
        radial-gradient(circle at 0 0, #fff3c8, rgba(255,243,200,0) calc(var(--be-cut) * 2.6)),
        radial-gradient(circle at 100% 0, #fff3c8, rgba(255,243,200,0) calc(var(--be-cut) * 2.6)),
        radial-gradient(circle at 0 100%, #f0d27a, rgba(240,210,122,0) calc(var(--be-cut) * 2.6)),
        radial-gradient(circle at 100% 100%, #f0d27a, rgba(240,210,122,0) calc(var(--be-cut) * 2.6)),
        linear-gradient(180deg, #e2bf62 0%, #a78230 55%, #7d5f1d 100%);
}
/* The plate. Its first layer is the glint, parked off the left edge until
   hover sweeps it across — on the way in only: leaving, it jumps back unseen,
   since it is off the plate at both ends. */
:is(.btn-epic, .l2-button-primary, .site-header .site-download, .site-header .site-enter, .site-drawer-panel .site-drawer-download, .site-drawer-panel .site-drawer-enter, .launch-banner .launch-btn)::after {
    inset: 1px;
    background:
        linear-gradient(105deg, transparent 38%, rgba(255,238,190,0.4) 50%, transparent 62%) 110% 0 / 250% 100% no-repeat,
        linear-gradient(180deg, #8f6c25 0%, #5f4515 48%, #36270a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,232,160,0.35),
        inset 0 -10px 16px rgba(0,0,0,0.35);
    transition: filter 0.2s ease;
}
/* A card or a band that is a link as a whole lights its button too. */
:is(.btn-epic, .l2-button-primary, .site-header .site-download, .site-header .site-enter, .site-drawer-panel .site-drawer-download, .site-drawer-panel .site-drawer-enter, .launch-banner .launch-btn):is(:hover, :focus-visible),
:is(.poss-next, .gs-card):is(:hover, :focus-visible) .btn-epic {
    color: #ffffff;
    outline: none;
    transform: none;
    filter: drop-shadow(0 0 8px rgba(212,175,55,0.55)) drop-shadow(0 6px 10px rgba(0,0,0,0.5));
}
:is(.btn-epic, .l2-button-primary, .site-header .site-download, .site-header .site-enter, .site-drawer-panel .site-drawer-download, .site-drawer-panel .site-drawer-enter, .launch-banner .launch-btn):is(:hover, :focus-visible)::after,
:is(.poss-next, .gs-card):is(:hover, :focus-visible) .btn-epic::after {
    background-position: -10% 0, 0 0;
    filter: brightness(1.15) saturate(1.06);
    transition: background-position 0.75s ease, filter 0.2s ease;
}
:is(.btn-epic, .l2-button-primary, .site-header .site-download, .site-header .site-enter, .site-drawer-panel .site-drawer-download, .site-drawer-panel .site-drawer-enter, .launch-banner .launch-btn):active { transform: translateY(1px); }
:is(.btn-epic, .l2-button-primary, .site-header .site-download, .site-drawer-panel .site-drawer-download, .launch-banner .launch-btn) :is(.material-symbols-outlined, svg) {
    flex-shrink: 0;
    font-size: 1.35em;
    line-height: 1;
}
.btn-epic:disabled,
.btn-epic[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
.btn-epic:is(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
    color: #f7e9c4;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
}
.btn-epic:is(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible)::after {
    background-position: 110% 0, 0 0;
    filter: none;
}

/* The small size: cards, bars, the header — and every .l2-button-primary,
   which was always the compact button of the pages written with it. */
:is(.btn-epic--sm, .l2-button-primary, .site-header .site-download, .site-header .site-enter, .site-drawer-panel .site-drawer-download, .site-drawer-panel .site-drawer-enter, .launch-banner .launch-btn) {
    --be-pad-y: 0.62rem;
    --be-pad-x: 1.35rem;
    --be-cut: 7px;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
}
/* Two classes, to outrank the :is() above. */
.btn-epic.btn-epic--block { display: flex; width: 100%; }

/* ==========================================================================
   The shared header, drawer, launch bubble and footer.

   The partials' markup is the same everywhere; this is the gold they are
   dressed in. Their buttons are in the button lists above.
   ========================================================================== */

/* ------------------------------------------------------------------ header */
.site-header {
    background: linear-gradient(to bottom, rgba(5,5,7,0.94) 0%, rgba(5,5,7,0.78) 100%);
    border-bottom: 1px solid rgba(212,175,55,0.12);
}
/* A gold hairline under the bar, fading out at both ends. */
.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.7) 18%, rgba(212,175,55,0.7) 82%, transparent 100%);
    pointer-events: none;
}
.site-brand-name { font-family: var(--font-epic); letter-spacing: 0.14em; }

/* The top-level entries, set in Cinzel with a thin gold rule between each
   two — centred in the gap, which is why the gap is a variable. */
.site-nav { --nav-gap: 2.4rem; gap: var(--nav-gap); }
.site-nav-link {
    position: relative;
    font-family: var(--font-epic);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #cbbf9f;
}
.site-nav > * + *::before {
    content: '';
    position: absolute;
    left: calc(var(--nav-gap) / -2);
    top: 50%;
    width: 1px;
    height: 14px;
    background: linear-gradient(to bottom, transparent, rgba(212,175,55,0.75), transparent);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* Every accent the menu had is gold here. */
.site-header [class*="nav-accent-"],
.site-drawer [class*="nav-accent-"] { --nav-accent: #d4af37; }
.site-header .site-nav-link:is(:hover, :focus-visible, .active),
.site-header .site-nav-group.open > .site-nav-trigger { color: #f3d98b; }
.site-nav-item {
    font-family: var(--font-epic);
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* The AI chip, gilded rather than in Gemini's colours. */
.nav-ai {
    color: #1a1205;
    text-shadow: none;
    background-image: linear-gradient(100deg, #8a6a24, #e8c766, #fff3c4, #e8c766, #8a6a24);
    animation: nav-ai-run 5s linear infinite, nav-ai-glow-gold 2.8s ease-in-out infinite;
}
.site-nav-link:hover .nav-ai,
.site-nav-item:hover .nav-ai,
.site-drawer-link:hover .nav-ai { box-shadow: 0 0 16px rgba(212,175,55,0.9); }
@keyframes nav-ai-glow-gold {
    0%, 100% { box-shadow: 0 0 5px rgba(212,175,55,0.4); }
    50%      { box-shadow: 0 0 13px rgba(212,175,55,0.85); }
}

/* The flags become their codes, in the site's type: emoji flags were the most
   colourful thing left in the header, and Windows draws them as two letters
   in boxes anyway. The partial puts each language's code in data-code, on
   the links and on the greyed-out entries alike — an article not yet
   translated into a language lists it as a span. */
.site-header-actions { gap: 0.85rem; }
.site-header-actions .lang-flags { gap: 0.85rem; }
.site-header-actions .lang-flags :is(a, span),
.site-drawer-flags :is(a, span) {
    position: relative;
    font-size: 0;
    opacity: 1;
    filter: none;
}
.site-header-actions .lang-flags :is(a, span)::after,
.site-drawer-flags :is(a, span)::after {
    content: attr(data-code);
    font-family: var(--font-epic);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8f8670;
    transition: color 0.2s ease;
}
.site-drawer-flags :is(a, span)::after { font-size: 13px; }
/* Not translated yet: dim, and struck through so it does not read as a
   link that merely failed to light up. */
.site-header-actions .lang-flags span::after,
.site-drawer-flags span::after {
    color: #4a4436;
    text-decoration: line-through;
}
.site-header-actions .lang-flags a:hover::after,
.site-drawer-flags a:hover::after { color: #f3d98b; }
.site-header-actions .lang-flags a.active::after,
.site-drawer-flags a.active::after { color: #d4af37; }
/* The current language is underlined in gold. */
.site-header-actions .lang-flags a.active::before,
.site-drawer-flags a.active::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 14px;
    height: 1px;
    background: #d4af37;
    box-shadow: 0 0 6px rgba(212,175,55,0.8);
    transform: translateX(-50%);
}

/* site-nav.css hides the download below 768px — the row cannot hold two
   buttons and the burger — and the button rule above shows it again. */
@media (max-width: 767px) {
    .site-header .site-download { display: none; }
}
@media (max-width: 520px) {
    .site-header .site-enter { --be-pad-y: 0.5rem; --be-pad-x: 0.8rem; font-size: 0.58rem; }
}
@media (min-width: 1024px) and (max-width: 1365px) {
    .site-nav { --nav-gap: 1.5rem; }
    .site-nav-link { font-size: 10px; letter-spacing: 0.1em; }
    .site-header-actions { gap: 0.7rem; }
    .site-header-actions .lang-flags { gap: 0.55rem; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
    .site-nav { --nav-gap: 0.9rem; }
    .site-header .site-download,
    .site-header .site-enter { --be-pad-x: 0.75rem; font-size: 0.58rem; letter-spacing: 0.08em; }
}
/* The logo never gives way to the menu: when the row is tight it is the gaps
   between entries that close, never the brand sliding under "Home" (it did
   at 1366px, and at 1200–1440px once the menu gained the wiki). */
.site-header .site-brand { flex-shrink: 0; }
@media (min-width: 1200px) and (max-width: 1365px) {
    .site-nav { --nav-gap: 1.15rem; }
}
@media (min-width: 1366px) and (max-width: 1599px) {
    .site-nav { --nav-gap: 1.6rem; }
}

/* ------------------------------------------------------------------ drawer */
.site-drawer-title { font-family: var(--font-epic); }
.site-drawer-link {
    font-family: var(--font-epic);
    font-weight: 700;
    letter-spacing: 0.14em;
}
.site-drawer-panel .site-drawer-download,
.site-drawer-panel .site-drawer-enter { display: flex; width: 100%; }
.site-drawer-panel .site-drawer-download + .site-drawer-enter { margin-top: 0.6rem; }

/* ----------------------------------------------------------- launch bubble */
.launch-panel {
    border-color: rgba(212,175,55,0.38);
    border-radius: 2px 0 0 2px;
    background: rgba(10,8,5,0.9);
}
.launch-tab { border-radius: 0 2px 2px 0; }
.launch-badge { color: #d4af37; }
.launch-dot {
    background: #d4af37;
    box-shadow: none;
    animation: gold-pulse 1.8s ease-in-out infinite;
}
.launch-title {
    font-family: var(--font-epic);
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--parchment);
}
/* The bubble is 176px wide: its buttons drop the icon and most of the
   tracking, so a label holds one line — down to Russian's single
   eighteen-letter "Зарегистрироваться". */
.launch-actions { gap: 0.45rem; }
.launch-banner .launch-btn {
    --be-pad-x: 0.4rem;
    display: flex;
    width: 100%;
    font-size: 0.56rem;
    letter-spacing: 0.04em;
    text-wrap: balance;
}
.launch-banner .launch-btn .material-symbols-outlined { display: none; }

/* ------------------------------------------------------------------ footer */
.site-footer { border-top: 1px solid rgba(212,175,55,0.14); }

/* ------------------------------------------------------------- cookie note */
/* The first-visit note of views/partials/cookie-notice.php. Fixed at the
   bottom centre, the one place where the landing's hero keeps nothing —
   its copy sits left, its worlds right — and above the pinned footer.
   Fixed, so showing it moves no layout; under the drawer and the dialogs. */
.cookie-note {
    position: fixed;
    left: 50%;
    bottom: 3.25rem;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    box-sizing: border-box;
    width: min(34rem, calc(100vw - 2rem));
    padding: 0.6rem 0.65rem 0.6rem 0.95rem;
    transform: translateX(-50%);
    background: rgba(10, 8, 5, 0.94);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-left: 2px solid #d4af37;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: 'Manrope', sans-serif;
}
/* display: flex above would otherwise beat the hidden attribute. */
.cookie-note[hidden] { display: none; }
.cookie-note-text {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: #c9c1ac;
}
.cookie-note-text a {
    color: #d4af37;
    text-decoration: underline;
    text-decoration-color: rgba(212, 175, 55, 0.45);
    text-underline-offset: 2px;
    white-space: nowrap;
}
.cookie-note-text a:hover { color: #f3d98b; }
/* A plain gold outline, not the bronze button: the note is meant to be
   quiet, and this is an acknowledgement, not a call to action. */
.cookie-note-ok {
    flex-shrink: 0;
    padding: 0.4rem 0.85rem;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.6);
    border-radius: 0;
    color: #f3d98b;
    font-family: var(--font-epic);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.cookie-note-ok:hover,
.cookie-note-ok:focus-visible {
    background: #d4af37;
    color: #0b0905;
    outline: none;
}
/* On a phone it spans the width, clear of the launch tab on the left edge. */
@media (max-width: 767px) {
    .cookie-note {
        left: 2.4rem;
        right: 0.6rem;
        width: auto;
        transform: none;
        gap: 0.7rem;
        padding: 0.55rem 0.55rem 0.55rem 0.8rem;
    }
    .cookie-note-text { font-size: 0.7rem; }
}

/* The two shared stylesheets switch their own animations off for people who
   asked for less motion; the gold versions above replaced those animations,
   so they are switched off again here. */
@media (prefers-reduced-motion: reduce) {
    .nav-ai,
    .launch-dot { animation: none; }
}