:root{
	--primary:#e63946;
	--soft:#ffccd5;
	--glass:rgba(255,255,255,0.25);
}

body{
	margin:0;
	font-family: 'Segoe UI', sans-serif;
	background: #612a02;
	background: radial-gradient(circle,rgba(97, 42, 2, 1) 0%, rgba(117, 0, 23, 1) 100%);
	display:flex;
	justify-content:center;
}

#gameWrapper{
	position:relative;
	margin-top: 100px;
}

#wimmelbild{
	max-width:92vw;
	max-height:85vh;
	border-radius:20px;
	box-shadow:0 20px 40px rgba(0,0,0,0.15);
	display:block;
	filter: grayscale(1);
}
#gameWrapper canvas{
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
}

#ui{
	position:fixed;
	top:20px;
	left:50%;
	transform:translateX(-50%);
	backdrop-filter: blur(15px);
	background:var(--glass);
	padding:18px 30px;
	border-radius:25px;
	display:flex;
	gap:25px;
	align-items:center;
	box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.hide {
	display: none;
}
.stat{
	text-align:center;
}

.stat span{
	font-size:18px;
	font-weight:600;
	color:var(--primary);
}

select,button{
	border:none;
	border-radius:20px;
	padding:6px 14px;
	background:white;
	cursor:pointer;
	transition:0.2s;
}

button:hover,select:hover{
	transform:scale(1.05);
}

.circle{
	position:absolute;
	border:4px solid var(--primary);
	background:rgba(230,57,70,0.15);
	border-radius:50%;
	pointer-events:none;
	transform:translate(-50%,-50%) scale(0);
	animation:pop 0.35s ease forwards;
}

@keyframes pop{
	0%{transform:translate(-50%,-50%) scale(0);}
	70%{transform:translate(-50%,-50%) scale(1.15);}
	100%{transform:translate(-50%,-50%) scale(1);}
}

#winOverlay{
	position:fixed;
	inset:0;
	background:rgba(255,240,245,0.95);
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	font-size:32px;
	color:var(--primary);
	display:none;
	text-align:center;
	animation:fadeIn 0.5s ease;
}

@keyframes fadeIn{
	from{opacity:0;}
	to{opacity:1;}
}

#winOverlay button{
	margin-top:20px;
	background:var(--primary);
	color:white;
}

#heartsCanvas{
    position:fixed;
    inset:0;
    z-index:-1;
}

#debugPanel {
	display: none;
    position: fixed;
    bottom: 42px;
    left: 80%;
    transform: translateX(-50%);
    width: 25%;
    max-width: 800px;
    background: transparent;
    padding: 15px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px;
}

#debugPanel textarea{
	width: 100%; 
	height:150px; 
	font-family:monospace; 
	font-size:12px;
    background: #00000054;
	color: #fff;
}