* {
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100vh;

    background-image: url("../assets/hintergrund.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    font-family: 'Press Start 2P', cursive;
}

/* Menü links wie im Bild */
.overlay {
    position: absolute;
    top: 120px;
    left: 120px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Titel */
.title {
    font-size: 52px;
    letter-spacing: 2px;
    color: #f2f2f2;
    margin-bottom: 45px;

    text-shadow:
        4px 4px 0 #2b1a12,
        6px 6px 0 #2b1a12,
        -2px 2px 0 #2b1a12,
        2px -2px 0 #2b1a12;
}

/* Menü-Buttons */
.menu {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.btn {
    width: 360px;
    padding: 22px 0;

    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    color: #ffffff;
    text-decoration: none;

    background: linear-gradient(
        to bottom,
        #8b8b8b 0%,
        #6f6f6f 100%
    );

    border: 4px solid #2e2e2e;

    box-shadow:
        inset 0 4px 0 #a5a5a5,
        inset 0 -4px 0 #4a4a4a,
        0 6px 0 #1e1e1e;

    cursor: pointer;
    user-select: none;

    transition: transform 0.08s ease, filter 0.08s ease;
}

/* Hover */
.btn:hover {
    filter: brightness(1.08);
}

/* Klick */
.btn:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 3px 0 rgba(255,255,255,0.2),
        0 2px 0 #1e1e1e;
}

/* START GAME – gelb */
.btn-start {
    background: linear-gradient(
        to bottom,
        #ffd84d 0%,
        #f2b705 100%
    );

    border-color: #7a4c00;

    box-shadow:
        inset 0 4px 0 #fff1a8,
        inset 0 -4px 0 #c18a00,
        0 6px 0 #5a3b00;

    color: #5a2e00;
}