body {
	font-family: Arial, sans-serif;
	text-align: center;
	padding-top: 100px;
	background-color: #fdf6e3;
}

h1 {
	font-size: 2em;
}

/* 💻 Desktop: ab 601px – zwei Boxen nebeneinander */
@media (min-width: 601px) {
	.choices {
		flex-direction: row;
		justify-content: center;
		gap: 40px;
		padding: 0 20px;
		max-width: 1000px;
		margin: 40px auto 0 auto;
	}

	@media (min-width: 601px) {
	  .choice {
		width: 300px;
		height: 420px;
		padding: 20px;
	  }
	}

}

/* 📱 Handy: unter 600px – Boxen untereinander */
@media (max-width: 600px) {
	.choices {
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		gap: 4%;
		padding: 0 2%;
	}

	.choice {
		width: 48%;
		min-height: 340px;
		padding: 12px;
		box-sizing: border-box;
	}
}









.choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4%;
  padding: 0 2%;
  box-sizing: border-box;
}









.choice-name {
	font-size: 1.2em;
	margin-top: 10px;
	padding: 10px 20px;
	border-radius: 10px;
	background-color: #ffcc80;
	text-align: center;
	width: 100%;
	word-wrap: break-word;
	white-space: normal;
	box-sizing: border-box;
	box-shadow: inset 0 0 0 1px #a0522d;
}




#winner {
	margin-top: 50px;
	font-size: 2em;
	color: green;
}

.choice {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #fff8dc;
  border: 2px solid #a0522d;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
}







.choice-img {
	width: 100%;
	height: auto;
	max-height: 180px;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}




/* Gewinner hervorheben */
.choice.winner {
	transform: scale(1.2);
	transition: all 0.6s ease-in-out;
	z-index: 10;
}

/* Verlierer ausblenden */
.choice.loser {
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.5s ease-in-out;
	pointer-events: none;
}

.recipe-link {
	display: inline-block;
	margin-top: 30px;
	font-size: 1.4em;
	color: #a0522d;
	text-decoration: none;
	background-color: #fff3e0;
	padding: 10px 20px;
	border-radius: 10px;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
	transition: background-color 0.3s ease;
}

.recipe-link:hover {
	background-color: #ffcc80;
}

/* Hover: nach links/rechts neigen + skalieren */
.choice:hover {
	transform: scale(1.05) rotateZ(var(--tilt));
	transition: transform 0.2s ease-in-out;
}

/* Klick: kurz eindrücken */
.choice:active {
	transform: scale(0.96);
	transition: transform 0.05s ease-in-out;
}

/* Shake-Animation für Verlierer */
@keyframes shake {
	0% { transform: translateX(0); }
	25% { transform: translateX(-8px); }
	50% { transform: translateX(8px); }
	75% { transform: translateX(-4px); }
	100% { transform: translateX(0); }
}

.choice.shake {
	animation: shake 0.4s;
}

#refresh-container {
  margin-top: 40px;
}

#refresh-button {
  font-size: 1.1em;
  padding: 12px 24px;
  background-color: #ffcc80;
  border: 2px solid #a0522d;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
}

#refresh-button:hover {
  background-color: #ffc04d;
}