::selection {
	    background: #ffda70;
            color: #2b1700;
            box-shadow: 0 0 60px #fffaa0;
	}

     ::-moz-selection {
            background: #ffda70;
            color: #2b1700;
            box-shadow: 0 0 60px #fffaa0;
        }

        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        ::-webkit-scrollbar-button:start:decrement,

        ::-webkit-scrollbar-button:end:increment  {
            height: 12px;
            background-color: transparent;
        }

        ::-webkit-scrollbar-track-piece  {
            background-color: #705010;
            -webkit-border-radius: 16px;
        }

        ::-webkit-scrollbar-thumb:vertical {
            height: 10px;
            background-color: #ffda70;
            border: 1px solid #aa6010;
            -webkit-border-radius: 16px;
        }
        ::-webkit-scrollbar-thumb:horizontal {
            height: 10px;
            background-color: #ffda70;
            border: 1px solid #aa6010;
            -webkit-border-radius: 16px;
        }


body {
    font-family: "Courier New", Courier, monospace;
	background-color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	text-align: center;
	overflow: scroll;
}

.wrap {
	position: absolute;
	display: flex;
	cursor: pointer;
	justify-content: center;
	align-items: center;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
}

/* Talerzyk */
.saucer {
	width: 200px;
	background-color: #dcdcdc;
	height: 60px;
	top: -40px;
	margin-top: 190px;
	position: absolute;
	border-radius: 70% 70% 60% 60%;
	pointer-events: none;
}

/* Filiżanka */
.coffe-cup {
	height: 160px;
	position: relative;
	width: 200px;
	background-color: #f1f1f1;
	border-radius: 20% 20% 70% 70%;
	margin-top: 30px;
	z-index: 999;
	transition: transform 0.2s ease-in-out;
	pointer-events: all;
}

.coffe-cup::before {
	content: '';
	position: absolute;
	top: -25px;
	left: 0px;
	width: 171px;
	height: 60px;
	background-color: #6f4e37;
	border-radius: 50%;
	z-index: 998;
	box-shadow: inset 0 0 15px rgba(0, 0, 0, 1), inset 15px 0px 15px #d7b787;
	border: 15px solid #f1f1f1;
}

/* Uszko filiżanki */
.coffe-cup::after {
	content: '';
	position: absolute;
	right: -58px;
	top: 20px;
	width: 45px;
	height: 70px;
	transform: rotate(10deg);
	border-radius: 90% 50% 120px 35%;
	border: 18px solid #f1f1f1;
}

.coffe-cup:hover {
	box-shadow: 0 0 5rem #ffda70;
}

/* Para z filiżanki */
.steam {
	width: 10px;
	height: 200px;
	background: #ffffff;
	position: absolute;
	animation: waft 5s linear infinite;
	filter: blur(27px);
	border-radius: 70%;
	opacity: 0;
	display: block;
	pointer-events: none;
}

.steam-1 {
	left: 25%;
}

.steam-2 {
	left: 30%;
}

.steam-3 {
	left: 40%;
}

.steam-4 {
	left: 50%;
}

.steam-5 {
	left: 60%;
}

/* Animacja pary z losowymi opóźnieniami i zmieniającą się wysokością */
@keyframes waft {
	0% {
		transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
		opacity: 1;
	}
	50% {
		transform: translate3d(0, -600px, 0) scale(1.5) rotate(-30deg);
		opacity: 0.6;
	}
	100% {
		transform: translate3d(0, -900px, 0) scale(2) rotate(30deg);
		opacity: 0;
	}
}

/* Animacja skoku filiżanki */
@keyframes jump {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-30px);
	}
	100% {
		transform: translateY(0);
	}
}

.coffe-cup.jump {
	animation: jump 0.3s ease-out;
}

/* Dodatkowe style, by para była bardziej naturalna */
.steam-1 {
	animation-delay: 1s;
}

.steam-2 {
	animation-delay: 0s;
}

.steam-3 {
	animation-delay: 2s;
}

.steam-4 {
	animation-delay: 1.5s;
}

.steam-5 {
	animation-delay: 0s;
}

/* Napisy na górze i na dole */
.grand-top-text {
        position: absolute;
        top: 25px;
        width: 100%;
        color: #FFD700;
        font-size: 2.2rem;
        font-weight: bold;
	text-shadow: 0 0 0.5rem #ffd700;
}

.top-text {
	position: absolute;
	top: 80px;
	width: 95%;
	color: #FAB700;
	font-size: 1.55rem;
	text-shadow: 0 0 0.2rem #fab700;
	font-weight: bold;
}

.bottom-text {
	position: absolute;
	bottom: 120px;
	width: 95%;
	color: #FAB700;
	text-shadow: 0 0 0.3rem #fab700;
	font-size: 1.2rem;
	font-weight: bold;
}

.star {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #FFDF50;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    opacity: 1;
    animation: appear 0.5s forwards, fade-out 1.5s forwards, shoot 0.5s forwards; /* Dodano animację shoot */
}

@keyframes appear {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0.5; } /* Podgaski zamiast całkowitego znikania */
}

@keyframes shoot {
    0% {
        transform: translate(0, 0); /* Początkowa pozycja */
    }
    100% {
        transform: translate(var(--x-offset), var(--y-offset)); /* Wystrzał w losowym kierunku */
    }
}

.click-effect {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #FFDA50;
    border-radius: 50%;
    transform: scale(1);
    opacity: 0.7;
}

.emblema {
	color: #00ff00;
	text-shadow: 0 0 0.3rem #00ff00;
	font-size: 1rem;
	position: absolute;
	bottom: 15px;
	left: 5px;
}

.emblema:hover {
	text-shadow: 0 0 1rem #ffda70;
	color: #ffda70;
}

.click-effect.animate {
    animation: click-effect 0.5s forwards;
}

@keyframes click-effect {
    0% { transform: scale(1); }
    100% { transform: scale(2); opacity: 0; }
}

        .coffee-button {
            background-color: #ffda70;
            color: #000;
            border: 1px solid #ffda70;
            padding: 10px 20px;
            width: 130px;
	    top: 10px;
	    left: 10px
	    position: absolute
            cursor: pointer;
            font-family: "Courier New", Courier, monospace;
            margin-top: 20px;
            display: inline-block;
            text-decoration: none;
            transition: background-color 0.3s, color 0.3s;
            box-shadow: 0 0 5px #ffda70;
            text-shadow: 0 0 3px #000;
            transition: background-color 0.3s, box-shadow 0.3s;
        }

        .coffee-button:hover {
            background-color: #111;
            color: #ff0000;
            border: 1px solid #ff0000;
            box-shadow: 0 0 20px #ff0000;
	}

@media (max-width: 590px) {

    body {
        background-color: #000;
    }

    .grand-top-text {
        font-size: 1.9rem;
        top: 10px;
        color: #FFD700;
    }

    .top-text {
        font-size: 1.4rem;
        top: 50px;
    }

    .bottom-text {
        font-size: 1.2rem;
        bottom: 10px;
    }

    .emblema {
        font-size: 0.7rem;
        bottom: 10px;
    }

    .coffee-button {
        padding: 5px 10px;
        width: 100px;
        font-size: 0.8rem;
	bottom: 10px;
    }


.coffe-cup {
        height: 160px;
        position: relative;
        width: 180px;
        background-color: #f1f1f1;
        border-radius: 20% 20% 70% 70%;
        margin-top: 30px;
        z-index: 999;
        transition: transform 0.2s ease-in-out;
        pointer-events: all;
}

.coffe-cup::before {
        content: '';
        position: absolute;
        top: -19px;
        left: 0px;
        width: 150px;
        height: 50px;
        background-color: #6f4e37;
        border-radius: 50%;
        z-index: 998;
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 1), inset 1>
        border: 15px solid #f1f1f1;
}

/* Uszko filiżanki */
.coffe-cup::after {
        content: '';
        position: absolute;
        right: -52px;
        top: 20px;
        width: 40px;
        height: 64px;
        transform: rotate(10deg);
        border-radius: 90% 50% 120px 35%;
        border: 18px solid #f1f1f1;
}

.coffe-cup:hover {
        box-shadow: 0 0 3rem #ffda70;
}
}

media (max-width: 470px) {


    .grand-top-text {
        font-size: 1.5rem;
        top: 10px;
        color: #FFD700;
    }

    .top-text {
        font-size: 1rem;
        top: 40px;
    }

    .bottom-text {
        font-size: 0.8rem;
        bottom: 30px;
    }

    .emblema {
        font-size: 0.6rem;
        bottom: 10px;
    }


}