@font-face {
    font-family: "Plus Jakarta Sans";
    src: local("Plus Jakarta Sans");
}

:root {
    --bg-1: #06121b;
    --bg-2: #0d1f31;
    --accent: #38bdf8;
    --text: #e9eef5;
    --border: rgba(255, 255, 255, 0.15);
}

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

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 20% 20%, #0c2a3d 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, #0f3f39 0%, transparent 35%),
        linear-gradient(140deg, var(--bg-1) 0%, var(--bg-2) 60%, #071019 100%);
    color: var(--text);
    font-family: "Plus Jakarta Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
}

.bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.bg.gradient {
    background: radial-gradient(circle at 30% 40%, rgba(56, 189, 248, 0.12), transparent 35%),
        radial-gradient(circle at 70% 60%, rgba(249, 115, 22, 0.18), transparent 30%),
        radial-gradient(circle at 10% 85%, rgba(251, 191, 36, 0.14), transparent 28%);
    filter: saturate(1.1);
}

.bg.grid {
    background-image: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        );
    background-size: 120px 120px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 70%);
}

#board {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 1;
}

#sky {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}