/* ======================================
   STAR FIELD
   ====================================== */

#star-layer {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    pointer-events: none;

    z-index: 2;

}


/* ======================================
   NORMAL STARS
   ====================================== */

.star {

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    pointer-events: none;

    box-shadow:
        0 0 6px currentColor;

}


/* ======================================
   SECRET EASTER EGG STAR
   ====================================== */

.easter-egg-star {

    pointer-events: auto;

    cursor: pointer;

    width: 6px !important;
    height: 6px !important;

    background-color: #fde68a !important;

    color: #fde68a;

    box-shadow:

        0 0 5px #fde68a,

        0 0 12px #fde68a,

        0 0 25px
        rgba(253, 230, 138, 0.8);

    animation:
        secret-star
        1.5s
        ease-in-out
        infinite
        alternate;

    z-index: 10;

}


@keyframes secret-star {

    from {

        transform: scale(1);

        opacity: 0.7;

    }

    to {

        transform: scale(1.7);

        opacity: 1;

    }

}


/* ======================================
   DUCK PLANET OVERLAY
   ====================================== */

#duck-planet-overlay {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 1000;

    display: none;

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

    flex-direction: column;

    background:

        radial-gradient(
            circle at center,
            rgba(35, 25, 60, 0.98),
            rgba(10, 7, 20, 0.99)
        );

}


/* ======================================
   OPEN STATE
   ====================================== */

#duck-planet-overlay.open {

    display: flex;

}


/* ======================================
   PLANET CONTAINER
   ====================================== */

#duck-planet-container {

    width: min(75vw, 700px);

    height: min(65vh, 600px);

    cursor: grab;

}


#duck-planet-container:active {

    cursor: grabbing;

}


#duck-planet-container canvas {

    display: block;

    width: 100%;
    height: 100%;

}


/* ======================================
   TITLE
   ====================================== */

.duck-planet-title {

    position: absolute;

    top: 35px;

    font-family:
        "Courier New",
        monospace;

    font-size: 28px;

    font-weight: bold;

    letter-spacing: 3px;

    color: #fde68a;

    text-shadow:

        0 0 8px
        rgba(253, 230, 138, 0.7);

}


/* ======================================
   HELP TEXT
   ====================================== */

.duck-planet-help {

    position: absolute;

    bottom: 30px;

    margin: 0;

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;

    color: white;

    opacity: 0.7;

}


/* ======================================
   CLOSE BUTTON
   ====================================== */

#close-duck-planet {

    position: absolute;

    top: 25px;
    right: 30px;

    z-index: 2;

    padding: 6px 10px;

    border: 2px solid #f9a8d4;

    border-radius: 6px;

    background-color:
        rgba(249, 168, 212, 0.1);

    color: white;

    font-family:
        "Courier New",
        monospace;

    font-size: 16px;

    cursor: pointer;

}


#close-duck-planet:hover {

    background-color:
        rgba(249, 168, 212, 0.3);

    transform: scale(1.1);

}