/* ════════════════════════════════════════════════════════════
   NARRADIVE STUDIOS — Core Stylesheet
   Shared tokens, base, header, footer, buttons, utilities
   ════════════════════════════════════════════════════════════ */

/* ═══ FONTS ═══ */
@font-face {
    font-family: 'Inter';
    src: url('../Assets/Fonts/Inter/Inter24pt-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../Assets/Fonts/Inter/Inter24pt-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cinzel';
    src: url('../Assets/Fonts/Cinzel/Cinzel-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cinzel';
    src: url('../Assets/Fonts/Cinzel/Cinzel-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cinzel';
    src: url('../Assets/Fonts/Cinzel/Cinzel-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* Inter (heavy) — the CommandPocket marketing art is set in Inter, so the
   tools + docs sub-brand headings + body use the same family at Bold/ExtraBold for
   an exact match (the rest of the site uses Aladin display + Amarante body).
   Variable file covers 700-800; two subsets so Turkish glyphs render (latin-ext). */
@font-face {
    font-family: 'Inter';
    src: url('../Assets/Fonts/Inter/Inter-Bold-latin.woff2') format('woff2');
    font-weight: 700 800; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    src: url('../Assets/Fonts/Inter/Inter-Bold-latin-ext.woff2') format('woff2');
    font-weight: 700 800; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Aladin — decorative display face for site headings + nav (self-hosted, OFL).
   Stock Aladin lacks 5 Turkish glyphs (ğ Ğ ş Ş İ); we patched them IN by composing
   each from Aladin's own base letter + its own breve/cedilla/dot-above marks, so
   they match the hand perfectly (build script: _source/incoming/fonts/
   build_aladin_tr.py, source: Aladin-TR-Regular.ttf). Two subsets, full Turkish. */
@font-face {
    font-family: 'Aladin';
    src: url('../Assets/Fonts/Aladin/Aladin-latin.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Aladin';
    src: url('../Assets/Fonts/Aladin/Aladin-latin-ext.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Amarante — decorative serif for site body copy (self-hosted, OFL). Full
   Turkish coverage; single weight (400), so bold text renders synthetically. */
@font-face {
    font-family: 'Amarante';
    src: url('../Assets/Fonts/Amarante/Amarante-latin.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Amarante';
    src: url('../Assets/Fonts/Amarante/Amarante-latin-ext.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══ TOKENS ═══ */
:root {
    /* Surfaces — warm, candlelit temple black (occult direction) */
    --void: #070605;
    --bg: #0e0b09;
    --bg-2: #140f0b;
    --panel: #1a140f;
    --panel-2: #221a12;
    --panel-hi: #2d2318;
    --line: rgba(255, 238, 214, 0.09);
    --line-strong: rgba(255, 238, 214, 0.16);

    /* Brand accents — candle gold leads, blood crimson + verdigris teal support */
    --teal: #46b39d;
    --teal-bright: #78dcc4;
    --teal-deep: #2c8576;
    --purple: #9a6fb8;
    --purple-deep: #4a3a73;
    --crimson: #c93a24;
    --gold: #e0a93b;
    --bubble-gold: #e6cf82; /* the dropdown speech-bubble's soft parchment gold */

    /* Text — warm off-white / parchment */
    --text: #f5eee0;
    --text-dim: #cdbfa6;
    --muted: #9a8b72;

    /* Type — layered fantasy system:
       --font-hero : dramatic blackletter, hero-scale titles only
       --font-display : hand-drawn grimoire, section titles + names
       --font-caps : crisp roman caps for small UI labels (nav, kickers)
       --font-body : readable sans for paragraphs */
    --font-hero: 'Aladin', 'Cinzel', Georgia, serif;
    --font-display: 'Aladin', 'Cinzel', Georgia, serif;
    --font-caps: 'Cinzel', Georgia, serif;
    --font-body: 'Amarante', Georgia, serif;
    /* CommandPocket sub-brand display face = Inter (matches the product's
       marketing art). Tools + docs pages re-point --font-display / --font-hero
       to this; heading weight (700, core h1-h6) + wordmarks (800) supply the
       heft. Header stays on --font-caps. */
    --font-cp: 'Inter', system-ui, sans-serif;

    /* Layout */
    --container: 1240px;
    --container-narrow: 880px;
    --nav-h: 72px;
    --radius: 10px;
    --radius-lg: 18px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Spacing */
    --s-1: 0.5rem;
    --s-2: 1rem;
    --s-3: 1.5rem;
    --s-4: 2rem;
    --s-5: 3rem;
    --s-6: 4.5rem;
    --s-7: 7rem;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text);
    background-color: var(--bg);
    overflow-x: hidden;
    position: relative;
    width: 100%;
    max-width: 100vw;
    -webkit-font-smoothing: antialiased;
}

/* Atmospheric layered background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('../Assets/images/background_Pattern.webp');
    background-repeat: repeat;
    background-size: 900px 450px;
    opacity: 0.55;
    z-index: -2;
    pointer-events: none;
    filter: brightness(0.32) saturate(0.5);
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 600px at 15% -5%, rgba(68, 187, 164, 0.10), transparent 60%),
        radial-gradient(1000px 700px at 100% 0%, rgba(139, 111, 196, 0.10), transparent 55%),
        radial-gradient(1200px 900px at 50% 120%, rgba(12, 13, 18, 0.9), transparent 70%);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; }

::selection { background: var(--teal); color: var(--void); }

/* Focus */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ═══ LAYOUT ═══ */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-3);
}
.section { padding: var(--s-7) 0; position: relative; }
.section--tight { padding: var(--s-6) 0; }

/* Screen-reader-only: kept in the DOM/accessibility tree, off-screen (not display:none) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══ TYPOGRAPHY ═══ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.eyebrow {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}
.eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal));
}
.eyebrow.is-centered::before { display: none; }

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--s-6);
}
.section-head .eyebrow { margin-bottom: var(--s-2); }
.section-title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    color: var(--text);
    letter-spacing: 0.03em;
}
.section-sub {
    margin-top: var(--s-2);
    color: var(--text-dim);
    font-size: 1.08rem;
    line-height: 1.75;
}

.lead { color: var(--text-dim); font-size: 1.15rem; line-height: 1.8; }
.muted { color: var(--muted); }
.text-teal { color: var(--teal); }

/* ═══ BUTTONS ═══ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.92rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.95rem 1.7rem;
    border-radius: var(--radius);
    transition: all 0.3s var(--ease);
    position: relative;
    cursor: pointer;
    white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn img { width: 20px; height: 20px; object-fit: contain; }

/* Discord button (devlog actions + contact CTA) */
.btn--discord {
    background: rgba(88, 101, 242, 0.14);
    color: var(--text);
    border: 1px solid rgba(88, 101, 242, 0.5);
}
.btn--discord:hover {
    background: #5865f2;
    color: #fff;
    border-color: #5865f2;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -12px rgba(88, 101, 242, 0.6);
}

.btn--primary {
    background: var(--teal);
    color: var(--void);
    box-shadow: 0 8px 30px -8px rgba(68, 187, 164, 0.55);
}
.btn--primary:hover {
    background: var(--teal-bright);
    transform: translateY(-2px);
    box-shadow: 0 14px 38px -10px rgba(68, 187, 164, 0.7);
}
.btn--ghost {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    border: 1px solid var(--line-strong);
}
.btn--ghost:hover {
    border-color: var(--teal);
    color: var(--teal-bright);
    transform: translateY(-2px);
}

/* In-game "Event" button (diegetic art button) - used on games, devlog, 404 */
.btn--event {
    background: url('../Assets/wybmd-assets/Event_Button.png') center / 100% 100% no-repeat;
    color: #2a1a0e;
    border: none;
    padding: 1rem 2.4rem 1.1rem;
    filter: drop-shadow(0 5px 9px rgba(20, 10, 4, 0.5));
    transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.btn--event:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 9px 15px rgba(20, 10, 4, 0.6)) brightness(1.04);
}

/* ── Diegetic wishlist / parchment seal button ──
   The game's own parchment button art, defined here so it is available
   site-wide (games.html wishlist strip + 404 "return" button). Layers:
   Small_Button (base, stretched 100% 100%) -> Small_Button_Red on :active.
   Our own drop-shadow gives the shade. On hover: the split selection pieces -
   a dimmed Highlight glow (::before, below the text) and the Top/Bot gilt
   flourishes (::after, two background layers, on top). */
.wishlist-seal {
    position: relative;
    z-index: 0; /* own stacking context so the ::before halo sits behind cleanly */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Shared width so STEAM and the longer EPIC GAMES seal match instead of each
       sizing to its own label; content is centred within the equalised box. */
    min-width: 15rem;
    gap: 0.7rem;
    padding: 0.95rem 1.9rem 1.05rem 1.5rem;
    background: url('../Assets/wybmd-assets/Small_Button.png') center / 100% 100% no-repeat;
    /* Our own soft shade, following the torn parchment shape. Deepens on hover. */
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.wishlist-seal:active { background-image: url('../Assets/wybmd-assets/Small_Button_Red.png'); }
.wishlist-seal:active .wishlist-seal-label { color: #ffe4c4; }
.wishlist-seal:active .wishlist-seal-name { color: #fff6e6; text-shadow: 0 1px 2px rgba(80, 12, 0, 0.5); }
.wishlist-seal:active img { filter: brightness(0) invert(1) opacity(0.92); }
/* Hover highlight - the selection's soft glow, split out as its own layer so
   we can dim it and keep it BELOW the text, so it never covers the label. */
.wishlist-seal::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 78%;
    height: 150%;
    transform: translate(-50%, -50%);
    background: url('../Assets/wybmd-assets/Button_Selection_Seperate_Highlight.png') center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
    z-index: 1; /* above the parchment, below the icon/text (z-index 2) */
}
/* Hover gilt flourishes - the Top and Bot selection pieces as two background
   layers, pinned to the parchment's top and bottom edges and sticking out. */
.wishlist-seal::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -18%; /* two-line store seal is taller, so a smaller inset keeps the
                  Top/Bot flourishes from spreading too far apart */
    bottom: -18%;
    background-image:
        url('../Assets/wybmd-assets/Button_Selection_Seperate_Top.png'),
        url('../Assets/wybmd-assets/Button_Selection_Seperate_Bot.png');
    background-position: center top, center bottom;
    background-size: auto 22px, auto 22px;
    background-repeat: no-repeat, no-repeat;
    opacity: 0;
    transform: scale(0.92);
    transform-origin: center;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    pointer-events: none;
    z-index: 3; /* on top; flourishes sit at the edges, clear of the text */
}
.wishlist-seal:hover::before,
.wishlist-seal:focus-visible::before { opacity: 1; }
.wishlist-seal:hover::after,
.wishlist-seal:focus-visible::after { opacity: 1; transform: scale(1); }
/* Grow as one on hover: the parent scale carries the parchment, highlight and
   flourishes (its ::before/::after children) together. */
.wishlist-seal:hover { transform: scale(1.05); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6)); }
/* Icon + text sit above the parchment; store logos read as dark ink on tan. */
.wishlist-seal img {
    position: relative;
    z-index: 2;
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) opacity(0.78);
}
/* Keep the Steam seal icon dark ink on the parchment. The global
   img[src*="steam-logo"] rule (for dark .store-btn buttons elsewhere) inverts
   it white and has equal specificity, so this higher-specificity rule wins
   regardless of source order. */
.wishlist-seal.wishlist-seal--steam img { filter: brightness(0) opacity(0.78); }
/* ...but still invert to white when pressed (red parchment), like the Epic seal. */
.wishlist-seal.wishlist-seal--steam:active img { filter: brightness(0) invert(1) opacity(0.92); }
.wishlist-seal-texts { position: relative; z-index: 2; display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.wishlist-seal-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6f5228;
}
.wishlist-seal-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.12rem;
    letter-spacing: 0.05em;
    color: #37280f;
    text-shadow: 0 1px 0 rgba(255, 244, 214, 0.35);
}
.wishlist-seal:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 4px;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .wishlist-seal { transition: none; }
}

/* Store CTA (Steam / Unity) */
.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1.5rem 0.7rem 0.85rem;
    border-radius: var(--radius);
    /* Solid fill (not a gradient): a gradient is a background-image and cannot
       transition to the solid hover colour, which produced a ghost-colour flash
       mid-hover. Solid base + background-color transition = clean crossfade. */
    background-color: var(--panel-hi);
    border: 1px solid var(--line-strong);
    transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.12s var(--ease);
}
.store-btn img { width: 38px; height: 38px; object-fit: contain; }
.store-btn-ico { width: 30px; height: 30px; flex-shrink: 0; color: #fff; }
/* The Steam mark ships dark-on-transparent — force it white so it's visible on the dark UI */
img[src*="steam-logo"] { filter: brightness(0) invert(1); }
.store-btn .store-btn-texts { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-btn .store-btn-label { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; }
.store-btn .store-btn-name { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.06em; }
/* Hover: fill with the platform's own colour, border matches the fill exactly, no motion */
.store-btn--steam:hover { background: #1568b0; border-color: #1568b0; }
.store-btn--steam:hover .store-btn-name { color: #fff; }
.store-btn--steam:hover .store-btn-label { color: rgba(255, 255, 255, 0.82); }

/* Unity & Docs: fill with Unity's gunmetal (#222c37), lifted slightly so the
   hover reads on the dark UI. Text and marks stay light — no harsh white flash. */
.store-btn--unity:hover,
.store-btn--docs:hover { background: #2b3a4b; border-color: #46627d; }
.store-btn--unity:hover .store-btn-name,
.store-btn--docs:hover .store-btn-name { color: #fff; }
.store-btn--unity:hover .store-btn-label,
.store-btn--docs:hover .store-btn-label { color: rgba(255, 255, 255, 0.82); }
.store-btn--docs:hover .store-btn-ico { color: #fff; }

/* Epic: fill with Epic's own near-black (#101014), mark and text stay light. */
.store-btn--epic:hover { background: #101014; border-color: #2c2c33; }
.store-btn--epic:hover .store-btn-name { color: #fff; }
.store-btn--epic:hover .store-btn-label { color: rgba(255, 255, 255, 0.82); }

/* ═══ HEADER ═══ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    z-index: 1000;
    /* border-color intentionally NOT transitioned: fading the scrolled divider
       (var(--line), a warm off-white) back to transparent flashed a whitish
       hairline on the way up. Background + shadow still ease; the border snaps. */
    transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
    background: linear-gradient(180deg, rgba(8, 9, 13, 0.62) 0%, rgba(8, 9, 13, 0.42) 26%, rgba(8, 9, 13, 0.22) 52%, rgba(8, 9, 13, 0.08) 76%, rgba(8, 9, 13, 0.015) 90%, rgba(8, 9, 13, 0) 100%);
    /* Clip the fill to the padding box so the semi-transparent gradient never
       paints under the 1px transparent border - that overlap left a faint dark
       seam along the header's bottom edge at rest (see the y=71 hairline). */
    background-clip: padding-box;
    border-bottom: 1px solid transparent;
}
.site-header.scrolled {
    background: rgba(10, 11, 16, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom-color: var(--line);
    box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.9);
}
.nav {
    height: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}

/* Brand / logo */
.brand {
    position: relative;
    height: var(--nav-h);
    display: grid;
    align-items: start;
    flex-shrink: 0;
}
.brand-state {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    transition: opacity 0.38s var(--ease), transform 0.42s var(--ease);
    will-change: opacity, transform;
}
/* Top: wordmark resting (raised). Entering here is DELAYED so it waits for
   the secondary mark to slide up & out of the way first. */
.brand-state-full {
    grid-area: 1 / 1;
    opacity: 1;
    transform: translateY(-28px);
    transition-delay: 0.42s;
}
/* Top: mark parked above & hidden. Exits immediately (slides up). */
.brand-state-mark {
    position: absolute;
    top: 4px;
    left: 37px;
    opacity: 0;
    transform: translateY(-44px);
    pointer-events: none;
    transition-delay: 0s;
}
/* Scrolled: wordmark slides UP and out immediately. */
.site-header.scrolled .brand-state-full {
    opacity: 0;
    transform: translateY(-104px);
    pointer-events: none;
    transition-delay: 0s;
}
/* Scrolled: mark slides DOWN into view, DELAYED until the wordmark has gone. */
.site-header.scrolled .brand-state-mark {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0.42s;
}
.brand-full {
    height: 207px;
    width: auto;
    display: block;
}
.brand-mark {
    width: 112px; height: 112px;
    object-fit: contain;
    filter: drop-shadow(0 13px 14px rgba(0, 0, 0, 0.6));
}
/* Wordmark already reads "NARRADIVE" — the standalone text label is retired */
.brand-word { display: none; }

/* The header is the shared occult SHELL — one consistent look on every page.
   The CommandPocket pages (tools/docs) re-point --teal to orange and --font-display
   to Inter on <body>, which used to bleed into the nav (orange underline, wrong
   font). Pin the header back to the site teal + display face so the top bar reads
   identically everywhere; the sub-brand still owns the page body below it. */
.tools-page .site-header,
.docs-page .site-header {
    --teal: #46b39d;
    --teal-bright: #78dcc4;
    --teal-deep: #2c8576;
    --font-display: 'Aladin', 'Cinzel', Georgia, serif;
    --font-hero: 'Aladin', 'Cinzel', Georgia, serif;
}

/* Nav menu */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
    margin-right: var(--s-4);
}
/* Keep every link on a single line — longer labels (e.g. TR "BİZ KİMİZ?") must
   never wrap or get squeezed, which is what knocked the dropdown carets out of
   place. On narrower desktops the spacing/size tightens so they still fit. */
.nav-menu > li { flex-shrink: 0; }
@media (min-width: 961px) and (max-width: 1240px) {
    .nav-menu { gap: 1.5rem; margin-right: var(--s-2); }
}
@media (min-width: 961px) and (max-width: 1080px) {
    .nav-menu { gap: 1.1rem; }
    .nav-link { font-size: 0.78rem; letter-spacing: 0.07em; }
}
/* Desktop: as the collapsed secondary mark slides in, the nav links slide left
   to sit just to the RIGHT of the mark (and back when returning to the top).
   The exact distance depends on layout (logo width, nav width per language), so
   site.js measures it and sets --nav-shift; the fallback keeps a sane nudge if
   JS is unavailable. Timing mirrors the brand mark: the shift is delayed until
   the wordmark has cleared, and returns immediately. Scoped to desktop so it
   never fights the mobile drawer's own transform. */
@media (min-width: 961px) {
    .nav-menu {
        transition: transform 0.5s cubic-bezier(0.5, 0, 0.18, 1);
        will-change: transform;
    }
    .site-header.scrolled .nav-menu {
        transform: translateX(var(--nav-shift, -2.4rem));
        transition-delay: 0.25s;
    }
}
.nav-link {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    position: relative;
    padding: 0.4rem 0;
    white-space: nowrap;
    transition: color 0.25s var(--ease);
}
/* Hover / active underline: a matte stroke that fades at both ends and grows
   outward from the centre. Teal for every tab — the header is the shared occult
   shell, so CommandPocket stays teal here too (its orange lives on the page body,
   not the nav). On dropdown tabs the stroke stops before the caret. */
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--teal) 22%, var(--teal) 78%, transparent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--teal); }
.nav-link.active::after { transform: scaleX(1); }
/* dropdown tabs: keep the stroke clear of the ▾ caret column */
.has-sub > .nav-link::after { width: calc(100% - 1.3em); }

/* Nav dropdown */
.nav-item { position: relative; }
.has-sub > .nav-link { padding-right: 1.15em; }
.has-sub > .nav-link::before {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    width: 6px; height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: 0.55;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav-item:hover > .nav-link::before,
.nav-item:focus-within > .nav-link::before {
    opacity: 1;
    transform: translateY(-30%) rotate(225deg);
}
/* Keep the parent tab's hover look (color + underline) while the cursor is
   anywhere in its sub-menu — the tab is no longer :hover, but the item is. */
.has-sub:hover > .nav-link,
.has-sub:focus-within > .nav-link {
    color: var(--text);
}
.has-sub:hover > .nav-link::after,
.has-sub:focus-within > .nav-link::after {
    transform: scaleX(1);
}
/* Sub-menu: the sub-links sit on the game's soft dark text backdrop
   (Text_Background.png), with a small speech-bubble tail (bubblearrow-dark.png,
   the game tail recoloured to the same soft-black tone) pointing up to the tab.
   The host is transparent and its top padding doubles as the invisible hover
   bridge from the tab. It is centred on the tab's TEXT, not the whole tab box:
   the ▾ caret padding would otherwise push the blob to the right, so we nudge it
   back left by half that caret column (--sub-shift). */
.nav-sub {
    --sub-shift: 0.47rem;   /* ≈ half the .nav-link caret padding (1.15em) */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;               /* span the FULL parent-tab width — that whole row is
                               the (invisible) click target, so dropping straight
                               down from the tab lands on the sub-link */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 17px;   /* gap + hover bridge + room for the tail */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    z-index: 30;
}
/* the tail — sits in the bridge gap, base overlapping the blob top, tip aiming up.
   Centred on the tab TEXT (blob sits there too), i.e. left of the box centre by
   half the caret column. */
.nav-sub::after {
    content: '';
    position: absolute;
    top: 15px;
    left: calc(50% - var(--sub-shift));
    width: 22px;
    height: 22px;
    transform: translateX(-50%);
    background: url('../Assets/wybmd-assets/bubblearrow-dark.png') center / contain no-repeat;
    pointer-events: none;
}
.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
/* The <a> is a wide, transparent HIT AREA spanning the parent tab; its right
   padding = the caret column so the (flex-centred) label lands under the parent
   TEXT, not the box centre. Vertical padding makes the click row comfortably tall. */
.nav-sublink {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem calc(2 * var(--sub-shift)) 0.5rem 0;
}
/* The visible speech blob — hugs its own label, auto-sizing per sub-tab, and
   carries all the type styling. */
.nav-sublabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    /* the game's soft dark text backdrop. Slightly heavier top padding drops the
       label a touch lower so it reads centred in the soft blob. */
    background: url('../Assets/wybmd-assets/Text_Background.png') center / 100% 100% no-repeat;
    padding: 0.7rem 2.3rem 0.56rem;
    transition: color 0.2s var(--ease);
}
.nav-sublink:hover .nav-sublabel {
    color: var(--teal-bright);
}
/* Side flyout — hovering CommandPocket reveals Documentation to the right */
.nav-subitem { position: relative; }
.has-flyout > .nav-sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.has-flyout > .nav-sublink::after {
    content: '';
    width: 0.42rem;
    height: 0.42rem;
    border-top: 1.5px solid var(--text-dim);
    border-right: 1.5px solid var(--text-dim);
    transform: rotate(45deg);
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
    flex-shrink: 0;
}
.nav-subitem:hover > .nav-sublink,
.nav-subitem:focus-within > .nav-sublink {
    color: var(--teal-bright);
    background: rgba(255, 255, 255, 0.05);
}
.nav-subitem:hover > .nav-sublink::after,
.nav-subitem:focus-within > .nav-sublink::after {
    border-color: var(--teal-bright);
    transform: rotate(45deg) translate(1px, -1px);
}
.nav-flyout {
    position: absolute;
    top: -0.45rem;
    left: calc(100% + 0.45rem);
    display: flex;
    flex-direction: column;
    min-width: max-content;
    padding: 0.45rem;
    background: rgba(12, 13, 18, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    z-index: 31;
}
/* invisible bridge across the gap so the cursor can travel into the flyout */
.nav-flyout::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -0.5rem;
    width: 0.5rem;
}
.nav-subitem:hover > .nav-flyout,
.nav-subitem:focus-within > .nav-flyout {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

/* Language toggle */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
}
.lang-btn {
    /* Match .nav-link (--font-display / Aladin) so nav links + the EN/TR toggle
       read as one consistent header system on every page, CommandPocket included
       (the header re-pins --font-display back to Aladin on CommandPocket). */
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    color: var(--muted);
    transition: all 0.25s var(--ease);
}
.lang-btn.active { background: var(--teal); color: var(--void); }

/* Hamburger */
.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    margin-left: var(--s-1);
}
.hamburger, .hamburger::before, .hamburger::after {
    display: block;
    width: 24px; height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.hamburger { position: relative; }
.hamburger::before { content: ''; position: absolute; top: -7px; left: 0; }
.hamburger::after { content: ''; position: absolute; top: 7px; left: 0; }
.nav-toggle.active .hamburger { background: transparent; }
.nav-toggle.active .hamburger::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active .hamburger::after { transform: translateY(-7px) rotate(-45deg); }

/* ═══ FOOTER ═══ */
.site-footer { position: relative; margin-top: var(--s-6); background: var(--void); }
.footer-cta {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: var(--s-6) 0;
    text-align: center;
}
.footer-cta h3 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--text);
    margin-bottom: var(--s-2);
}
.footer-cta p { color: var(--text-dim); max-width: 560px; margin: 0 auto var(--s-4); }

.footer-social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-4);
}
.social-icon {
    width: 50px; height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    color: var(--text-dim); /* warm default tint for every icon (discord, patreon, linkedin included) */
}
.social-icon img { width: 22px; height: 22px; }
.social-icon svg { width: 21px; height: 21px; }
.social-icon:hover { border-color: var(--teal); }
.social-icon.reddit:hover { background: #ff4500; border-color: #ff4500; }
.social-icon.linkedin:hover { background: #0077b5; border-color: #0077b5; }
.social-icon.x:hover { background: #000; border-color: #000; }
.social-icon.discord:hover { background: #5865f2; border-color: #5865f2; }
.social-icon.patreon:hover { background: #000; border-color: #000; }
.social-icon.bluesky { color: var(--text-dim); }
.social-icon.bluesky:hover { background: #0a7aff; border-color: #0a7aff; color: #fff; }
.social-icon.youtube { color: var(--text-dim); }
.social-icon.youtube:hover { background: #ff0000; border-color: #ff0000; color: #fff; }
.social-icon.instagram { color: var(--text-dim); }
.social-icon.instagram:hover { background: #d62976; border-color: #d62976; color: #fff; }
.social-icon.tiktok { color: var(--text-dim); }
.social-icon.tiktok:hover { background: #000; border-color: #000; color: #fff; }
/* Black buttons get a thin grey border on hover (matching the Epic store button)
   so they don't vanish into the dark background */
.social-icon.x:hover,
.social-icon.tiktok:hover,
.social-icon.patreon:hover {
    border-color: #2c2c33;
}

.footer-banner {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%);
    mask-image: linear-gradient(180deg, transparent, #000 35%);
}
.footer-banner img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center 40%;
    filter: grayscale(25%) contrast(1.05) brightness(0.85);
}
.footer-legal {
    padding: var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom));
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    font-family: var(--font-body);
    border-top: 1px solid var(--line);
    background: var(--void);
}
.footer-legal a { color: var(--text-dim); text-decoration: none; transition: color 0.2s; }
.footer-legal a:hover { color: var(--teal); }
.footer-legal .sep { margin: 0 0.6rem; opacity: 0.4; }

/* ═══ REVEAL ON SCROLL ═══
   Hidden state only applies under html.anim (added by JS), so content is
   visible by default if JS/animations are unavailable. */
.reveal { opacity: 1; transform: none; }
html.anim .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    will-change: opacity, transform;
}
html.anim .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    html.anim .reveal { opacity: 1; transform: none; }
}

/* ═══ RESPONSIVE NAV ═══ */
@media (max-width: 960px) {
    :root { --nav-h: 70px; }
    .nav-menu {
        position: fixed;
        top: var(--nav-h);
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: var(--s-2) var(--s-3) var(--s-4);
        background: rgba(10, 11, 16, 0.97);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
    }
    .nav-menu.open { transform: none; opacity: 1; visibility: visible; }
    .nav-link {
        font-size: 1.2rem;
        padding: 1rem 0.4rem;
        border-bottom: 1px solid var(--line);
        text-align: center;
        display: block;
    }
    .nav-link::after { display: none; }
    .has-sub > .nav-link::before { display: none; }
    .nav-sub {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        display: block;
        width: 100%;
        max-width: 100%;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        min-width: 0;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        filter: none;
        transition: none;
    }
    .nav-sub::before,
    .nav-sub::after { display: none; }
    /* Kill every desktop hover/focus transform so tapping a sub-tab on touch
       devices (where :hover/:focus-within stick) can never slide the panel. */
    .nav-item:hover > .nav-sub,
    .nav-item:focus-within > .nav-sub,
    .nav-subitem:hover > .nav-flyout,
    .nav-subitem:focus-within > .nav-flyout {
        transform: none;
    }
    .nav-sublink {
        display: block;
        text-align: center;
        /* keep the mobile menu exactly as before the desktop restyle */
        font-family: var(--font-display);
        text-transform: none;
        font-size: 1rem;
        letter-spacing: 0.04em;
        color: var(--muted);
        background: none;
        text-shadow: none;
        padding: 0.85rem 0.4rem;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
    }
    /* the desktop blob/label melts back into a plain inline mobile link */
    .nav-sublabel {
        display: inline;
        background: none;
        text-shadow: none;
        color: inherit;
        padding: 0;
        font: inherit;
        letter-spacing: inherit;
        text-transform: none;
    }
    /* the desktop elbow connector doesn't belong in the flattened mobile menu */
    .nav-sublink::before,
    .nav-sublink::after { display: none; }
    /* On mobile the dropdown is flattened — the flyout renders inline as a plain centered link */
    .nav-subitem { position: static; width: 100%; max-width: 100%; }
    .nav-flyout {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: none;
    }
    .nav-flyout::before { display: none; }
    .has-flyout > .nav-sublink { justify-content: center; }
    .has-flyout > .nav-sublink::after { display: none; }
    .nav-flyout .nav-sublink { font-size: 0.95rem; color: var(--muted); }
    .nav-toggle { display: flex; }
    .lang-toggle { margin-left: auto; }
    /* The wordmark becomes position:absolute here, so its <picture> shrink-wraps to
       an indefinite width. Without max-width:none the global `img { max-width:100% }`
       would clamp the logo to 100% of that 0-width parent and it vanishes. */
    .brand-full { height: 82px; max-width: none; }
    .brand-state-full { transform: translateY(0); position: absolute; top: 0; left: 0; }
    /* Same shrink-wrap trap as .brand-full: the absolute parent has indefinite
       width, so max-width:100% would clamp the mark to 0. max-width:none lets the
       explicit 68px width stand. */
    .brand-mark { width: 68px; height: 68px; max-width: none; }
    .brand-state-mark { top: 1px; left: 4px; }
    .brand-word { font-size: 1.05rem; }
    .footer-banner img { height: 130px; }

    /* ─── Closed-menu click-trap fix ───
       The flattened mobile sub-links carry their own `visibility: visible`,
       which overrides the closed `.nav-menu`'s `visibility: hidden`. Combined
       with the menu's `opacity: 0` (invisible, but NOT click-proof) and
       `position: fixed`, this leaves invisible yet tappable sub-links floating
       over the top of every page — so taps on page content (the trailer video,
       hero cards, etc.) silently navigated to Games / Tools / Docs.
       While the menu is closed, disable pointer interaction on it and every
       descendant. Opacity still handles the fade-out, so animation is intact. */
    .nav-menu:not(.open),
    .nav-menu:not(.open) * {
        pointer-events: none;
    }
}
@media (max-width: 460px) {
    .brand-word { display: none; }
}