:root {
    --gold: #c99a43;
    --gold-light: #f5d98f;
    --gold-dark: #6f471b;
    --fel: #96dc38;
    --fel-bright: #c8ff63;
    --fel-dark: #365f18;
    --arcane: #aa66db;
    --ember: #9e3424;
    --surface: rgba(17, 15, 15, 0.97);
    --surface-raised: rgba(31, 24, 22, 0.97);
    --text: #eadfc9;
    --muted: #aa9f8d;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    margin: 0;
    padding: 0;

    background: #070806;
}

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

    color: var(--text);

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(143, 71, 174, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 3% 62%,
            rgba(122, 207, 43, 0.12),
            transparent 24%
        ),
        radial-gradient(
            circle at 97% 68%,
            rgba(122, 207, 43, 0.1),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #0a0b09 0%,
            #12100f 46%,
            #070807 100%
        ) !important;

    background-attachment: fixed !important;
}

body::before {
    content: "";
    position: fixed;
    z-index: -4;
    inset: 0;
    pointer-events: none;
    opacity: .55;
    background:
        repeating-linear-gradient(118deg, transparent 0 66px, rgba(222, 171, 72, .018) 67px, transparent 69px),
        radial-gradient(ellipse at 50% 100%, rgba(100, 177, 38, .09), transparent 46%) !important;
}

/* The old cloud/island markup is reused as abstract fel silhouettes. */
.sky {
    position: fixed;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.cloud {
    position: absolute;
    width: 600px;
    height: 180px;
    border-radius: 50%;
    opacity: .23;
    filter: blur(38px);
    background: radial-gradient(ellipse, rgba(137, 222, 55, .36), rgba(74, 126, 30, .1) 50%, transparent 73%);
    animation: sharedFog 16s ease-in-out infinite alternate;
}

.cloud.one { top: 32%; left: -18%; }
.cloud.two { top: 55%; right: -20%; width: 720px; animation-delay: -5s; }
.cloud.three { top: 78%; left: 30%; width: 520px; opacity: .13; animation-delay: -9s; }

.island {
    position: absolute;
    width: 220px;
    height: 380px;
    opacity: .18;
    filter: blur(.2px);
    clip-path: polygon(50% 0, 65% 20%, 58% 40%, 78% 63%, 61% 100%, 37% 76%, 19% 100%, 25% 58%, 8% 38%, 34% 22%);
    background: linear-gradient(180deg, rgba(93, 145, 35, .55), rgba(16, 18, 13, .9) 55%, transparent);
    box-shadow: 0 0 35px rgba(112, 209, 43, .15);
}

.island::after { display: none; }
.island.one { top: 42%; left: -25px; transform: rotate(-7deg); }
.island.two { top: 35%; right: -30px; transform: rotate(8deg); }
.island.three { top: 75%; left: 52%; width: 120px; height: 220px; opacity: .1; }