/* ==========================================
   LEVEL HEADER
   ========================================== */

#levelHeader {
    position: fixed;

    top: 20px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 20;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 28px;

    font-weight: 700;

    letter-spacing: 4px;

    text-shadow:
        0 0 8px rgba(100, 255, 255, 0.8),
        0 0 20px rgba(120, 80, 255, 0.7);

    pointer-events: none;
}


/* ==========================================
   LEVEL INTRO
   ========================================== */

#levelIntro {
    position: fixed;

    inset: 0;

    z-index: 30;

    display: flex;

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

    background:
        radial-gradient(
            circle at center,
            rgba(20, 10, 45, 0.25),
            rgba(0, 0, 0, 0.72)
        );

    backdrop-filter: blur(3px);

    opacity: 1;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


#levelIntro.hidden {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


#levelIntroBox {
    width: min(680px, 85vw);

    padding: 42px 48px;

    text-align: center;

    border:
        1px solid
        rgba(110, 255, 255, 0.35);

    border-radius: 18px;

    background:
        rgba(5, 8, 25, 0.78);

    box-shadow:
        0 0 30px rgba(70, 100, 255, 0.25),
        0 0 80px rgba(80, 40, 255, 0.12);

    backdrop-filter: blur(12px);
}


#levelTitle {
    margin-bottom: 28px;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 34px;

    font-weight: 700;

    letter-spacing: 5px;

    text-shadow:
        0 0 10px #63ffff,
        0 0 25px #664cff;
}


#levelDescription {
    color: rgba(235, 245, 255, 0.9);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;

    line-height: 1.7;

    letter-spacing: 0.5px;
}


#levelDescription p {
    margin: 13px 0;
}


#levelDescription .welcome {
    color: #72ffff;

    font-size: 22px;

    font-weight: 700;

    text-shadow:
        0 0 10px rgba(80, 255, 255, 0.8);
}


#levelDescription .finalMessage {
    margin-top: 28px;

    color: #b88cff;

    font-size: 21px;

    font-weight: 700;

    line-height: 1.5;

    text-shadow:
        0 0 12px rgba(170, 100, 255, 0.8);
}


#beginLevelButton {
    margin-top: 25px;

    padding: 13px 30px;

    border:
        1px solid
        rgba(100, 255, 255, 0.7);

    border-radius: 8px;

    background:
        rgba(50, 80, 150, 0.35);

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 3px;

    cursor: pointer;

    box-shadow:
        0 0 15px
        rgba(70, 220, 255, 0.2);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


#beginLevelButton:hover {
    transform: scale(1.05);

    background:
        rgba(70, 120, 200, 0.5);

    box-shadow:
        0 0 25px
        rgba(80, 240, 255, 0.5);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    background: #05020d;
}

#game {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;
}

canvas {
    display: block;

    width: 100%;
    height: 100%;
}