/* ==========================================================================
   Site navigation — the index header, on every page.

   The index used to build this out of Tailwind utility classes, which only
   exist on the index. Moved to real classes here so the blog, the legal pages,
   support and the 404 render the identical header without loading Tailwind.
   The declarations are the Tailwind ones, one for one, so the index looks
   exactly as it did.
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@media (min-width: 1024px) {
    .site-header { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* Every page that is not the index puts the content in normal flow, so it
   needs to clear the fixed header: 40px logo + 2 × 1rem padding. */
.site-has-fixed-nav { padding-top: 72px; }

.site-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.site-brand img { height: 40px; width: auto; display: block; }

.site-brand-name {
    font-family: 'Noto Serif', serif;
    font-size: 1.125rem;
    line-height: 1.2;
    font-weight: 700;
    color: #d4af37;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Hidden below 1024px, exactly as on the index. */
.site-nav { display: none; align-items: center; gap: 1.5rem; }

@media (min-width: 1024px) { .site-nav { display: flex; } }
@media (min-width: 1280px) { .site-nav { gap: 2rem; } }

.site-nav-link {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a1a1aa;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.nav-accent-gold:hover   { color: #d4af37; }
.nav-accent-green:hover  { color: #22c55e; }
.nav-accent-blue:hover   { color: #009dff; }
.nav-accent-purple:hover { color: #a855f7; }

.site-nav-link.active { color: #d4af37; }

/* Each accent as a value too, for the dot the family entries carry. */
.nav-accent-gold   { --nav-accent: #d4af37; }
.nav-accent-green  { --nav-accent: #22c55e; }
.nav-accent-blue   { --nav-accent: #009dff; }
.nav-accent-purple { --nav-accent: #a855f7; }

/* ------------------------------- Families -------------------------------- */

/* A family is a trigger in the row and a menu that hangs just under the bar.
   Hidden with visibility as well as opacity, so a closed menu is skipped by
   Tab instead of being focused while invisible. */
.site-nav-group { position: relative; display: flex; align-items: center; }

.site-nav-group.open > .site-nav-trigger { color: #d4af37; }

.site-nav-caret {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 0.6em;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}

.site-nav-group.open .site-nav-caret { transform: translateY(1px) rotate(-135deg); }

.site-nav-menu {
    position: absolute;
    /* The trigger sits on the bar's centre line; this drops the menu to just
       below the bar's bottom edge. */
    top: calc(100% + 32px);
    left: 50%;
    z-index: 2;
    min-width: 13rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.4rem;
    background: rgba(10, 10, 14, 0.97);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 3px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.site-nav-group.open .site-nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* An invisible bridge over the gap, so the pointer can travel from the
   trigger to the menu without leaving the family. */
.site-nav-menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 34px;
}

/* The notch that points the menu at its trigger. */
.site-nav-menu::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: rgba(10, 10, 14, 0.97);
    border-top: 1px solid rgba(212, 175, 55, 0.25);
    border-left: 1px solid rgba(212, 175, 55, 0.25);
    transform: translateX(-50%) rotate(45deg);
}

.site-nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.75rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    color: #d1d1d6;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.site-nav-item::before,
.site-drawer-sublink::before {
    content: '';
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--nav-accent, #d4af37);
    box-shadow: 0 0 6px var(--nav-accent, #d4af37);
}

.site-nav-item:hover,
.site-nav-item:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    color: var(--nav-accent, #d4af37);
    padding-left: 0.95rem;
    outline: none;
}

/* ------------------------------ The AI mark ------------------------------ */

/* Two characters riding the label they belong to. It started as gradient text
   and read as a smudge at 8px, so it is a filled chip now: the Gemini gradient
   runs through it and the glow breathes, because this is the one place in the
   menu that has to be noticed before anything is clicked. */
.nav-ai {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0.22em 0.42em;
    border-radius: 2px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    vertical-align: 0.3em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    /* Cut at 300% so sliding the position runs the gradient through the chip
       rather than repainting it. */
    background-image: linear-gradient(100deg, #4285F4, #9B72CB, #D96570, #9B72CB, #4285F4);
    background-size: 300% 100%;
    animation: nav-ai-run 5s linear infinite, nav-ai-glow 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(155, 114, 203, 0.95);
}

@keyframes nav-ai-run  { to { background-position: -300% 0; } }
@keyframes nav-ai-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(155, 114, 203, 0.45); }
    50%      { box-shadow: 0 0 13px rgba(155, 114, 203, 0.9); }
}

/* The drawer sets its entries in 12px, where the chip needs less lift. */
.site-drawer-link .nav-ai {
    font-size: 0.68em;
    margin-left: 0.55em;
    vertical-align: 0.22em;
}

/* Decoration, not information: the mark stays, the motion goes. */
@media (prefers-reduced-motion: reduce) {
    .nav-ai { animation: none; }
}

.site-header-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Flags follow the index: hidden on phones, where the row has no space, and
   on tablets too, where the burger is already there — the drawer carries
   them. Between 768 and 1023px the brand, two buttons, the flags and the
   burger overflowed the row once the login read "Login / Register". */
.site-header-actions .lang-flags { display: none; }

@media (min-width: 1024px) {
    .site-header-actions .lang-flags { display: flex; gap: 8px; align-items: center; }
}

/* Download button: the green sibling of the login button, for people who have
   not installed the game yet. Green, so the two never read as one wide button.
   Below 768px the header keeps the login alone — two buttons, the flags
   and the burger do not fit — and the drawer carries the download instead. */
.site-header .site-download {
    display: none;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(to bottom, #1d7a44, #12512d);
    border: 1px solid #22c55e;
    color: #fff;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 2px;
    white-space: nowrap;
    transition: transform 0.15s, filter 0.15s;
}

.site-header .site-download:hover { transform: translateY(-1px); filter: brightness(1.15); }

@media (min-width: 768px) {
    .site-header .site-download { display: inline-flex; }
}

/* Discord: the official mark in Discord's blurple — not themed gold on
   purpose, it is someone else's brand and is recognised by its colour — but
   quiet: the bare glyph, no plate, a touch dimmed until pointed at, so it
   does not compete with the two buttons beside it. Shown in the header from
   1024px, where there is no burger; below that the drawer has it. */
.site-header .site-discord {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: #5865f2;
    opacity: 0.8;
    transition: opacity 0.15s, background-color 0.15s;
}
.site-header .site-discord svg { width: 20px; height: 20px; }
.site-header .site-discord:hover,
.site-header .site-discord:focus-visible { opacity: 1; background-color: rgba(88, 101, 242, 0.14); outline: none; }

@media (min-width: 1024px) {
    .site-header .site-discord { display: inline-flex; }
}

/* The drawer's, as quiet as the header's: an outline, the glyph in blurple. */
.site-drawer-discord {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(88, 101, 242, 0.45);
    border-radius: 6px;
    color: #d1d1d6;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: background-color 0.15s, border-color 0.15s;
}
.site-drawer-discord svg { width: 18px; height: 18px; color: #5865f2; }
.site-drawer-discord:hover { background-color: rgba(88, 101, 242, 0.12); border-color: #5865f2; }

.site-header .site-enter {
    /* The index got these from Tailwind utilities that only load there;
       stated here so the button is identical on every page. */
    display: inline-block;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    padding: 0.5rem 1.25rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 2px;
    white-space: nowrap;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Site footer — same markup and same look as the index's.
   ========================================================================== */

.site-footer {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    color: #71717a;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* The index does not scroll, so there the bar is pinned. */
.site-footer-fixed { position: fixed; bottom: 0; left: 0; z-index: 50; }

.site-footer-brand { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.site-footer-brand img { height: 1.25rem; width: auto; display: block; }

/* Eight entries now that the legal pages live here, so the row wraps instead
   of pushing the community links off the edge. */
.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem 1.25rem;
}

.site-footer-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-footer-links a:hover { color: #d4af37; }

/* On a phone the two halves stop competing for the same line. */
@media (max-width: 720px) {
    .site-footer { flex-direction: column; gap: 0.6rem; text-align: center; }
    .site-footer-links { justify-content: center; }
}

/* ==========================================================================
   Phone layout — everything below is scoped to max-width media queries, so
   the desktop header, drawer-less, is exactly what it was.
   ========================================================================== */

/* The burger only exists where the horizontal nav is hidden. */
.site-burger { display: none; }

@media (max-width: 1023px) {
    .site-burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 38px;
        height: 34px;
        padding: 0 7px;
        background: rgba(0, 0, 0, 0.35);
        border: 1px solid rgba(212, 175, 55, 0.45);
        border-radius: 2px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .site-burger span {
        display: block;
        height: 2px;
        width: 100%;
        background: #d4af37;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .site-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .site-burger.open span:nth-child(2) { opacity: 0; }
    .site-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ---------------------------------- Drawer -------------------------------- */

.site-drawer { position: fixed; inset: 0; z-index: 120; }

.site-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.site-drawer.open .site-drawer-backdrop { opacity: 1; }

.site-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.9rem 1.05rem 1.4rem;
    background: linear-gradient(160deg, rgba(18, 18, 24, 0.98) 0%, rgba(6, 6, 10, 0.98) 100%);
    border-left: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.7);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-drawer.open .site-drawer-panel { transform: translateX(0); }

.site-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.site-drawer-title {
    font-family: 'Noto Serif', serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d4af37;
}

.site-drawer-close {
    background: transparent;
    border: 0;
    color: #d1d1d6;
    font-size: 1.7rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
}

.site-drawer-close:hover { color: #fff; }

.site-drawer-nav { display: flex; flex-direction: column; }

.site-drawer-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #d1d1d6;
    text-decoration: none;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0.75rem 0.15rem;
    cursor: pointer;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.site-drawer-link:hover,
.site-drawer-link:focus-visible { padding-left: 0.5rem; outline: none; }

.site-drawer-link.active { color: #d4af37; }

/* A family in the drawer: the summary reads as one more entry, with the
   caret on the far edge; its members hang off a gold rule, one step in. */
.site-drawer-group { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }

.site-drawer-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    border-bottom: 0;
}

.site-drawer-summary::-webkit-details-marker { display: none; }

.site-drawer-summary .site-nav-caret { margin-right: 0.4rem; }

.site-drawer-group[open] > .site-drawer-summary { color: #d4af37; }
.site-drawer-group[open] .site-nav-caret { transform: translateY(1px) rotate(-135deg); }

.site-drawer-sub {
    display: flex;
    flex-direction: column;
    margin: 0 0 0.55rem 0.3rem;
    padding-left: 0.35rem;
    border-left: 1px solid rgba(212, 175, 55, 0.3);
}

.site-drawer-sublink {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #a1a1aa;
    border-bottom: 0;
    padding: 0.6rem 0.5rem;
}

.site-drawer-sublink:hover,
.site-drawer-sublink:focus-visible { padding-left: 0.85rem; }

.site-drawer-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 0.2rem 0;
}

.site-drawer-flags a,
.site-drawer-flags span { font-size: 22px; }

.site-drawer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    color: #71717a;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.site-drawer-legal a { color: inherit; text-decoration: none; }
.site-drawer-legal a:hover { color: #d4af37; }

/* On a phone the download sits above the login: whoever opens the drawer
   from the landing is likelier to need the installer than the login. */
.site-drawer-download {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: linear-gradient(to bottom, #1d7a44, #12512d);
    border: 1px solid #22c55e;
    color: #fff;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    padding: 0.7rem 1rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 2px;
}

/* Both buttons want the bottom of the panel; only the first one gets it. */
.site-drawer-download + .site-drawer-enter { margin-top: 0.5rem; }

.site-drawer-enter {
    margin-top: auto;
    display: block;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 2px;
}

/* The page behind must not scroll while the drawer is over it. */
body.drawer-open { overflow: hidden; }

/* ------------------------- Header on a small phone ------------------------ */

@media (max-width: 520px) {
    .site-header { padding: 0.6rem 0.85rem; gap: 0.5rem; }
    .site-brand { gap: 0.5rem; }
    .site-brand img { height: 30px; }
    .site-brand-name { font-size: 0.9rem; letter-spacing: 0.06em; }
    .site-header-actions { gap: 0.5rem; }
    /* "Logowanie / Rejestracja" is wider than the room beside the wordmark:
       the label may break onto a second line rather than run into it. */
    .site-header .site-enter { padding: 0.45rem 0.7rem; font-size: 9px; white-space: normal; max-width: 8.5rem; line-height: 1.25; }
    .site-has-fixed-nav { padding-top: 56px; }
}

@media (max-width: 340px) {
    /* At this width the button and the burger cannot share the row with a
       word mark; the logo alone still identifies the site. */
    .site-brand-name { display: none; }
}

/* ------------------------------ Pinned footer ----------------------------- */

/* Only the index pins the bar, and there a wrapped two-row footer eats a third
   of a phone screen. The links stay in the DOM and live in the drawer. */
@media (max-width: 720px) {
    .site-footer-fixed {
        flex-direction: row;
        justify-content: center;
        padding: 0.5rem 0.75rem;
    }

    .site-footer-fixed .site-footer-links { display: none; }
}

/* --------------------- Header between 1024 and 1366px --------------------- */

/* The nav appears at 1024px. It held ten entries until they were grouped into
   families and ran off the side of a landscape tablet; five fit now, but the
   flags and two buttons still crowd the row, so each tier gives back what
   that width can spare. From 1366px up the desktop spacing stands. */
@media (min-width: 1200px) and (max-width: 1365px) {
    .site-header { padding-left: 1.5rem; padding-right: 1.5rem; }
    .site-nav { gap: 0.9rem; }
    .site-header-actions { gap: 0.6rem; }
    .site-header-actions .lang-flags { gap: 5px; }
    .site-header-actions .lang-flags a { font-size: 16px; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .site-header { padding-left: 0.85rem; padding-right: 0.85rem; gap: 0.6rem; }
    .site-nav { gap: 0.5rem; }
    .site-nav-link { letter-spacing: 0.04em; }
    .site-header-actions { gap: 0.45rem; }
    .site-header-actions .lang-flags { gap: 4px; }
    .site-header-actions .lang-flags a { font-size: 14px; }
    .site-brand { gap: 0.5rem; }

    /* The nav, the flags and two buttons: both buttons give back the width
       the row needs, rather than pushing the nav off the side. The login
       label is two words now ("Login / Register"), long in Polish. */
    .site-header .site-download { padding: 0.45rem 0.6rem; font-size: 9px; letter-spacing: 0.03em; }
    .site-header .site-enter { padding: 0.45rem 0.7rem; font-size: 9px; letter-spacing: 0.03em; }

    /* The wordmark used to be hidden here to make room for ten entries; with
       the families there is room for it again, one size down — except in
       the narrowest stretch, below. */
    .site-brand-name { font-size: 0.95rem; letter-spacing: 0.03em; }
}

/* The Discord icon joined the row, and up to 1099px the row no longer holds
   the wordmark too: the shield stands for the brand there. */
@media (min-width: 1024px) and (max-width: 1099px) {
    .site-brand-name { display: none; }
}