/* =========================================================
   SURVIVOR S51 — GLOBAL SITE STYLES
   =========================================================
   This file controls the shared visual design of the site.

   Change colors, navigation, global cards, buttons, etc.
   here and every page using site.css will update.
========================================================= */


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root{
    --bg:#07111f;
    --bg2:#0b1830;

    --card:#0d1a31;
    --card2:#0a1528;

    --line:#173a65;
    --line2:#224d81;

    --ink:#eaf2ff;
    --muted:#a8c2e6;

    --teal:#00e0d8;
    --gold:#ffd54a;
    --red:#ff2d55;
    --green:#76ffb5;

    --shadow:0 18px 46px rgba(0,0,0,.66);

    --radius:18px;
    --radius-small:12px;

    --max-width:1180px;
}


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

*{
    box-sizing:border-box;
}

html{
    margin:0;
    padding:0;
}

body{
    margin:0;
    min-height:100vh;

    color:var(--ink);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            60rem 60rem at 10% -10%,
            #193057 0%,
            transparent 60%
        ),
        radial-gradient(
            70rem 70rem at 110% 0%,
            #0a2142 0%,
            transparent 55%
        ),
        linear-gradient(
            180deg,
            var(--bg2),
            var(--bg)
        );

    background-attachment:fixed;
}

img{
    max-width:100%;
}

a{
    color:inherit;
}


/* =========================================================
   GLOBAL PAGE WRAPPER
========================================================= */

.wrap{
    width:min(
        calc(100% - 28px),
        var(--max-width)
    );

    margin:0 auto;
}


/* =========================================================
   SHARED NAVIGATION
========================================================= */

.topnav{
    width:min(
        calc(100% - 28px),
        var(--max-width)
    );

    margin:18px auto 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    flex-wrap:wrap;
}

.topnav a{
    min-width:48px;
    height:44px;

    padding:0 14px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

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

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #10203a,
            #0b162b
        );

    color:var(--ink);

    text-decoration:none;

    font-weight:900;

    box-shadow:
        0 8px 24px rgba(0,0,0,.32),
        inset 0 0 0 1px #0e2452;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.topnav a:hover{
    border-color:var(--teal);

    transform:translateY(-1px);

    box-shadow:
        0 10px 28px rgba(0,0,0,.4),
        0 0 16px rgba(0,224,216,.10);
}


/* =========================================================
   CHAT NAV BUTTON
========================================================= */

.topnav .navChat{
    margin-left:12px;

    min-width:auto;

    padding-left:17px;
    padding-right:17px;

    color:#07111f;

    background:
        linear-gradient(
            180deg,
            #fff3a6 0%,
            #ffd54a 55%,
            #c99b18 100%
        );

    border-color:#ffd54a;

    font-size:.78rem;
    font-weight:1000;

    letter-spacing:.10em;

    box-shadow:
        0 0 18px rgba(255,213,74,.16),
        0 8px 24px rgba(0,0,0,.35);
}

.topnav .navChat:hover{
    border-color:#fff3a6;

    transform:translateY(-1px);

    box-shadow:
        0 0 22px rgba(255,213,74,.25),
        0 10px 28px rgba(0,0,0,.4);
}


/* =========================================================
   SHARED CARD
========================================================= */

.card{
    background:
        linear-gradient(
            180deg,
            #10203a,
            #0b162b
        );

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

    border-radius:var(--radius);

    box-shadow:
        var(--shadow),
        inset 0 0 0 1px #0e2452;
}


/* =========================================================
   HEADINGS
========================================================= */

.gold-title{
    margin:0;

    font-weight:1000;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff3c0 25%,
            #ffd54a 60%,
            #ffffff 100%
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}

.teal{
    color:var(--teal);
}

.gold{
    color:var(--gold);
}

.muted{
    color:var(--muted);
}


/* =========================================================
   GLOBAL BUTTONS
========================================================= */

.btn{
    appearance:none;

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

    border-radius:12px;

    padding:11px 16px;

    background:
        linear-gradient(
            180deg,
            #132746,
            #0b1930
        );

    color:var(--ink);

    font:inherit;
    font-weight:900;

    cursor:pointer;

    text-decoration:none;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    transition:
        transform .15s ease,
        border-color .15s ease;
}

.btn:hover{
    transform:translateY(-1px);

    border-color:var(--teal);
}

.btn-primary{
    color:#041617;

    border-color:var(--teal);

    background:
        linear-gradient(
            180deg,
            #52fff5,
            var(--teal)
        );
}

.btn-gold{
    color:#171000;

    border-color:var(--gold);

    background:
        linear-gradient(
            180deg,
            #fff2a0,
            var(--gold)
        );
}


/* =========================================================
   FORM ELEMENTS
========================================================= */

input,
textarea,
select,
button{
    font:inherit;
}

input,
textarea,
select{
    color:var(--ink);

    background:#081426;

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

    border-radius:12px;

    outline:none;
}

input:focus,
textarea:focus,
select:focus{
    border-color:var(--teal);

    box-shadow:
        0 0 0 3px rgba(0,224,216,.08);
}


/* =========================================================
   SHARED PILL
========================================================= */

.pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;

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

    border-radius:999px;

    padding:6px 10px;

    background:#0a172b;

    color:var(--muted);

    font-size:.78rem;
    font-weight:900;
}


/* =========================================================
   SHARED DIVIDER
========================================================= */

.divider{
    width:100%;
    height:1px;

    margin:18px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--line2),
            transparent
        );
}


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

.site-footer{
    width:min(
        calc(100% - 28px),
        var(--max-width)
    );

    margin:40px auto 20px;

    padding:20px 14px;

    text-align:center;

    color:var(--muted);

    font-size:.78rem;
}

.site-footer strong{
    color:var(--gold);
}


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

@media (max-width:700px){

    .wrap{
        width:min(
            calc(100% - 18px),
            var(--max-width)
        );
    }

    .topnav{
        width:calc(100% - 18px);

        margin-top:10px;
        margin-bottom:14px;

        gap:6px;
    }

    .topnav a{
        min-width:42px;
        height:40px;

        padding:0 11px;
    }

    .topnav .navChat{
        margin-left:5px;

        padding-left:13px;
        padding-right:13px;

        font-size:.72rem;
    }

    .site-footer{
        width:calc(100% - 18px);
    }
}