/* ============================================
   MortalPins Base
   Global variables, reset, typography, body, common helpers
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --mp-bg: #070712;
    --mp-surface: rgba(255, 255, 255, .075);
    --mp-surface-strong: rgba(255, 255, 255, .12);
    --mp-border: rgba(255, 255, 255, .14);
    --mp-text: #f8f7ff;
    --mp-muted: #a8a6bd;
    --mp-gold: #f6c85f;
    --mp-blue: #7c8cff;
    --mp-purple: #a855f7;
    --mp-pink: #ff5ea8;
    --mp-radius: 1.45rem;
    --mp-shadow: 0 24px 90px rgba(0, 0, 0, .38);
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

body {
    min-height: 100vh;
    color: var(--mp-text);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top left, rgba(124, 140, 255, .26), transparent 32rem), radial-gradient(circle at 82% 10%, rgba(168, 85, 247, .20), transparent 34rem), linear-gradient(180deg, #070712 0%, #111122 48%, #070712 100%);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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

    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: none !important;
    }

    button:hover,
    a:hover {
        color: inherit;
    }

textarea {
    min-height: 10em;
}

img {
    max-width: 100%;
}

/* Shared shell and panels */
.mp-shell {
    width: min(1180px, calc(100% - 2rem));
    margin-inline: auto;
}

.glass-panel {
    background: var(--mp-surface) !important;
    border: 1px solid var(--mp-border);
    box-shadow: var(--mp-shadow);
    backdrop-filter: blur(18px);
}

.index-panel {
    background: var(--mp-surface) !important;
    border: 1px solid var(--mp-border);
    box-shadow: var(--mp-shadow);
}

.text-gradient,
.text-gradient-is {
    background: linear-gradient(135deg, var(--mp-gold), var(--mp-pink), var(--mp-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Chrome autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--mp-text);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px transparent;
}

/* ==========================================================
   Mortal Pins Beta Recruitment Banner
========================================================== */

.beta-recruit-card {
    position: relative;
    display: block;
    width: min(100%, 1280px);
    margin: 0 auto 2rem;
    border-radius: var(--mp-radius, 1rem);
    overflow: hidden;
    text-decoration: none;
    background: #05030a;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .45), 0 0 2rem rgba(124, 60, 255, .18);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

    .beta-recruit-card:hover {
        transform: translateY(-4px);
        filter: brightness(1.06);
        box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .55), 0 0 2.4rem rgba(246, 200, 95, .18), 0 0 3rem rgba(124, 60, 255, .22);
    }

.beta-recruit-bg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

/* Button image overlay */
.beta-recruit-btn {
    position: absolute;
    left: clamp(1.5rem, 8vw, 3.5rem);
    bottom: 0;
    width: clamp(13rem, 28vw, 18rem);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 .8rem 1rem rgba(0, 0, 0, .6)) drop-shadow(0 0 1.2rem rgba(255, 94, 168, .35));
    transition: transform .2s ease, filter .2s ease;
}

.beta-recruit-card:hover .beta-recruit-btn {
    transform: scale(1.045);
    filter: drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, .65)) drop-shadow(0 0 1.6rem rgba(255, 94, 168, .48)) drop-shadow(0 0 1.8rem rgba(246, 200, 95, .25));
}

/* Optional glow behind button */
.beta-recruit-card::after {
    content: "";
    position: absolute;
    left: clamp(1rem, 7vw, 7rem);
    bottom: clamp(.6rem, 5vw, 3.8rem);
    width: clamp(14rem, 30vw, 26rem);
    height: clamp(3.5rem, 8vw, 7rem);
    border-radius: 999px;
    background: radial-gradient( circle, rgba(255, 94, 168, .28), rgba(124, 60, 255, .16), transparent 70% );
    filter: blur(14px);
    pointer-events: none;
    z-index: 1;
}

.beta-recruit-btn {
    z-index: 2;
}

/* Mobile */
@media (max-width: 700px) {
    .beta-recruit-card {
        border-radius: .85rem;
    }

    .beta-recruit-btn {
        left: 50%;
        bottom: .9rem;
        transform: translateX(-50%);
        width: min(72%, 18rem);
    }

    .beta-recruit-card:hover .beta-recruit-btn {
        transform: translateX(-50%) scale(1.04);
    }

    .beta-recruit-card::after {
        left: 50%;
        bottom: .55rem;
        transform: translateX(-50%);
        width: 75%;
    }
}