:root {
	--ink: #263238;
	--ocean: #1778a8;
	--ocean-light: #66d1f2;
	--sand: #e7c170;
	--sand-dark: #c9973d;
	--paper: rgba(255, 255, 255, 0.94);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--ink);
	background:
		radial-gradient(circle at 82% 8%, rgba(255, 232, 109, 0.8), transparent 12rem),
		linear-gradient(#77cef2 0%, #b9ecff 45%, #f1d486 100%);
}

.container {
	max-width: 1050px;
	margin: 32px auto;
	padding: 24px;
	background: var(--paper);
	border-radius: 22px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.15);
}

.hero-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 22px;
}

.eyebrow {
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 700;
	color: #0b6f92;
}

h1,
h2,
h3 {
	margin-top: 0;
}

h1 {
	margin-bottom: 8px;
	font-size: clamp(2rem, 4vw, 3.4rem);
}

.intro {
	max-width: 680px;
	margin: 0;
	line-height: 1.5;
}

.highscore-link,
.primary-button,
.secondary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 999px;
	border: none;
	text-decoration: none;
	font-weight: 700;
	cursor: pointer;
}

.highscore-link,
.secondary-button {
	color: #0b5b7c;
	background: #e7f7ff;
	border: 2px solid #b6e5f7;
}

.primary-button {
	color: white;
	background: linear-gradient(135deg, #0c78a3, #064f75);
	box-shadow: 0 8px 20px rgba(6, 79, 117, 0.28);
}

.legend-panel {
	padding: 24px;
	border-radius: 20px;
	background: linear-gradient(135deg, #fff9e6, #e9f8ff);
	border: 2px solid rgba(11, 91, 124, 0.16);
}

.legend-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 22px 0;
}

.legend-card {
	padding: 18px;
	border-radius: 18px;
	background: white;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.legend-card h3 {
	margin-bottom: 10px;
}

.legend-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.legend-card li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #eef2f4;
}

.legend-card li:last-child {
	border-bottom: 0;
}

.legend-card span {
	width: 34px;
	font-size: 1.5rem;
	text-align: center;
}

.towel-symbol {
	display: inline-block;
	width: 38px;
	height: 24px;
	border-radius: 5px;
	background:
		linear-gradient(90deg,
			#2f8ed8 0 18%,
			#ffffff 18% 34%,
			#2f8ed8 34% 52%,
			#ffffff 52% 68%,
			#2f8ed8 68% 100%);
	border: 2px solid rgba(33, 83, 122, 0.55);
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
	transform: rotate(-8deg);
}

.collectible .towel-symbol {
	width: 48px;
	height: 32px;
	border-radius: 6px;
}

.danger {
	border-top: 5px solid #df6b4f;
}

.collect {
	border-top: 5px solid #23a35a;
}

.controls {
	border-top: 5px solid #0c78a3;
}

.hidden {
	display: none !important;
}

.info-bar {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	margin: 18px 0;
	padding: 14px 18px;
	border-radius: 16px;
	background: #f3fbff;
	font-size: 1.08rem;
	font-weight: 700;
}

#gameArea {
	position: relative;
	height: 500px;
	overflow: hidden;
	border-radius: 22px;
	border: 4px solid #12627f;
	background: linear-gradient(#7bd8fb 0%, #baf1ff 38%, #eac879 39%, #d6a34a 100%);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;
}


.countdown-overlay {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(4, 52, 76, 0.35);
	backdrop-filter: blur(2px);
}

#countdownValue {
	width: 160px;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: white;
	background: rgba(4, 75, 112, 0.9);
	border: 5px solid rgba(255, 255, 255, 0.9);
	font-size: 4rem;
	font-weight: 900;
	animation: countdownPulse 1s infinite;
}

@keyframes countdownPulse {
	0% { transform: scale(0.88); opacity: 0.7; }
	45% { transform: scale(1.05); opacity: 1; }
	100% { transform: scale(0.88); opacity: 0.7; }
}

.sky-layer {
	position: absolute;
	inset: 0 0 auto;
	height: 210px;
}

#sun {
	position: absolute;
	top: 22px;
	right: 44px;
	font-size: 58px;
	filter: drop-shadow(0 0 18px rgba(255, 227, 83, 0.7));
}

.cloud {
	position: absolute;
	opacity: 0.85;
	font-size: 44px;
	animation: cloudDrift 18s linear infinite;
}

.cloud-a { top: 38px; left: 8%; }
.cloud-b { top: 96px; left: 38%; animation-duration: 24s; }
.cloud-c { top: 52px; left: 64%; animation-duration: 30s; }

@keyframes cloudDrift {
	from { transform: translateX(-40px); }
	to { transform: translateX(80px); }
}

.sea {
	position: absolute;
	left: 0;
	right: 0;
	top: 170px;
	height: 118px;
	background:
		linear-gradient(rgba(255,255,255,0.25), transparent 18%),
		linear-gradient(180deg, var(--ocean-light), var(--ocean));
	overflow: hidden;
}

.sea::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 28px;
	background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0));
	opacity: 0.7;
}

.wave {
	position: absolute;
	left: -12%;
	width: 124%;
	height: 44px;
	opacity: 0.75;
	background-repeat: repeat-x;
	background-size: 120px 38px;
	background-image: radial-gradient(ellipse at center, rgba(255,255,255,0.75) 0 32%, transparent 34% 100%);
	animation: waveMove 5s linear infinite;
}

.wave-one { top: 8px; animation-duration: 5.2s; }
.wave-two { top: 42px; opacity: 0.48; animation-duration: 7s; animation-direction: reverse; }
.wave-three { top: 74px; opacity: 0.35; animation-duration: 8.5s; }

@keyframes waveMove {
	from { transform: translateX(0) translateY(0); }
	50% { transform: translateX(35px) translateY(4px); }
	to { transform: translateX(70px) translateY(0); }
}

.beach {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 230px;
	background:
		radial-gradient(circle at 16% 68%, rgba(115, 76, 25, 0.2) 0 2px, transparent 3px),
		radial-gradient(circle at 58% 38%, rgba(115, 76, 25, 0.16) 0 2px, transparent 3px),
		radial-gradient(circle at 82% 62%, rgba(115, 76, 25, 0.15) 0 2px, transparent 3px),
		repeating-radial-gradient(ellipse at 50% 120%, rgba(255,255,255,0.18) 0 8px, transparent 9px 21px),
		linear-gradient(180deg, #f1d281 0%, #d9a348 100%);
}

.beach::before {
	content: "";
	position: absolute;
	left: -8%;
	right: -8%;
	top: -28px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(241, 210, 129, 0.3));
}

.sand-grain,
.shell {
	position: absolute;
	opacity: 0.65;
}

.grain-one { left: 14%; bottom: 70px; width: 70px; height: 8px; border-radius: 50%; background: rgba(117, 79, 30, 0.22); }
.grain-two { left: 55%; bottom: 52px; width: 110px; height: 10px; border-radius: 50%; background: rgba(117, 79, 30, 0.16); }
.grain-three { left: 76%; bottom: 118px; width: 58px; height: 8px; border-radius: 50%; background: rgba(117, 79, 30, 0.18); }
.shell-one { left: 24%; bottom: 36px; font-size: 20px; opacity: 0.35; }
.shell-two { left: 43%; bottom: 118px; font-size: 36px; color: rgba(103, 66, 25, 0.3); }
.shell-three { left: 91%; bottom: 76px; font-size: 44px; color: rgba(103, 66, 25, 0.22); }

.runner {
	position: absolute;
	left: 105px;
	bottom: 34px;
	width: 56px;
	height: 122px;
	z-index: 10;
	transform-origin: center bottom;
}

.runner-head,
.runner-neck,
.runner-torso,
.runner-arm,
.runner-leg {
	position: absolute;
	background: #d89b70;
	border: 1px solid #8b5a3c;
	box-shadow: inset 0 -4px 0 rgba(139, 90, 60, 0.12);
}

.runner-head {
	left: 15px;
	top: 0;
	width: 28px;
	height: 30px;
	border-radius: 50%;
}

.runner-head::before,
.runner-head::after {
	content: "";
	position: absolute;
	top: 11px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #3b2b22;
}

.runner-head::before { left: 8px; }
.runner-head::after { right: 8px; }

.runner-neck {
	left: 23px;
	top: 28px;
	width: 12px;
	height: 12px;
	border-radius: 8px;
}

.runner-torso {
	left: 12px;
	top: 38px;
	width: 34px;
	height: 44px;
	border-radius: 18px 18px 15px 15px;
}

.runner-arm {
	top: 44px;
	width: 14px;
	height: 42px;
	border-radius: 12px;
	transform-origin: center 8px;
	animation: armRun 0.45s ease-in-out infinite alternate;
}

.arm-left {
	left: 5px;
}

.arm-right {
	right: 4px;
	animation-direction: alternate-reverse;
}

.runner-leg {
	top: 78px;
	width: 16px;
	height: 46px;
	border-radius: 12px;
	transform-origin: center 6px;
	animation: legRun 0.42s ease-in-out infinite alternate;
}

.leg-left {
	left: 14px;
}

.leg-right {
	right: 12px;
	animation-direction: alternate-reverse;
}

.runner.jumping {
	animation: jumpTilt 0.55s ease-out infinite alternate;
}

.runner.paused .runner-arm,
.runner.paused .runner-leg {
	animation-play-state: paused;
}

@keyframes armRun {
	from { transform: rotate(-28deg); }
	to { transform: rotate(32deg); }
}

@keyframes legRun {
	from { transform: rotate(28deg); }
	to { transform: rotate(-24deg); }
}

@keyframes jumpTilt {
	from { transform: rotate(-4deg); }
	to { transform: rotate(5deg); }
}

.obstacle,
.collectible {
	position: absolute;
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.22));
}

.obstacle {
	left: 860px;
	bottom: 34px;
	width: 70px;
	height: 70px;
	font-size: 52px;
}

.collectible {
	left: 1180px;
	bottom: 150px;
	width: 56px;
	height: 56px;
	font-size: 38px;
	animation: collectibleFloat 1.6s ease-in-out infinite alternate;
}

@keyframes collectibleFloat {
	from { transform: translateY(-4px) rotate(-3deg); }
	to { transform: translateY(7px) rotate(4deg); }
}

.score-form {
	margin-top: 22px;
	padding: 20px;
	border-radius: 18px;
	border: 2px solid rgba(11, 91, 124, 0.18);
	background: #fff7dc;
}

.score-form label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
}

.score-form input[type="text"],
.score-form input:not([type]) {
	width: min(100%, 320px);
	padding: 12px 14px;
	margin-bottom: 16px;
	border-radius: 12px;
	border: 2px solid #e0c070;
	font-size: 1rem;
}

.score-form .secondary-button {
	margin-left: 10px;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 22px 0;
	background: white;
	border-radius: 16px;
	overflow: hidden;
}

th,
td {
	padding: 12px;
	border-bottom: 1px solid #e7ecef;
	text-align: left;
}

th {
	background: #e7f7ff;
}

@media (max-width: 820px) {
	.container {
		margin: 14px;
		padding: 16px;
	}

	.hero-header,
	.info-bar {
		flex-direction: column;
	}

	.legend-grid {
		grid-template-columns: 1fr;
	}

	#gameArea {
		height: 440px;
	}
}

/* Smartphone-Optimierung: Desktop bleibt unverändert, mobile Geräte spielen im Querformat. */
.orientation-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	padding: 24px;
	text-align: center;
	color: white;
	background: linear-gradient(135deg, rgba(4, 52, 76, 0.96), rgba(9, 112, 151, 0.96));
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.orientation-overlay .phone-icon {
	font-size: 4rem;
	margin-bottom: 16px;
	animation: rotatePhoneHint 1.3s ease-in-out infinite alternate;
}

.orientation-overlay h2 {
	font-size: 2rem;
	margin-bottom: 10px;
}

.orientation-overlay p {
	max-width: 420px;
	margin: 0;
	line-height: 1.5;
}

@keyframes rotatePhoneHint {
	from { transform: rotate(0deg) scale(1); }
	to { transform: rotate(90deg) scale(1.08); }
}

body.show-orientation-notice .orientation-overlay,
body.show-orientation-notice-during-game .orientation-overlay {
	display: flex;
}

@media (pointer: coarse), (max-width: 920px) {
	html,
	body {
		min-height: 100%;
		overscroll-behavior: none;
		touch-action: manipulation;
	}

	body.mobile-play-mode {
		overflow: hidden;
	}

	.container {
		width: min(100% - 20px, 1050px);
		margin: 10px auto;
		padding: 14px;
		border-radius: 16px;
	}

	.hero-header {
		gap: 12px;
		margin-bottom: 14px;
	}

	.highscore-link,
	.primary-button,
	.secondary-button {
		min-height: 48px;
		padding: 12px 18px;
		font-size: 1rem;
	}

	.legend-panel {
		overflow: visible;
		-webkit-overflow-scrolling: auto;
	}

	.legend-grid {
		gap: 12px;
	}

	.legend-card {
		padding: 14px;
	}

	.info-bar {
		margin: 8px 0;
		padding: 8px 12px;
		font-size: 0.95rem;
	}

	#gameArea {
		touch-action: none;
	}
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 920px) and (orientation: landscape) {
	html,
	body {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	body.mobile-play-mode .container {
		width: 100vw;
		height: 100dvh;
		margin: 0;
		padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
		border-radius: 0;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.98);
		display: flex;
		flex-direction: column;
	}

	body.mobile-play-mode .hero-header {
		display: none;
	}

	body.mobile-play-mode .legend-panel {
		flex: 1;
		padding: 12px;
		overflow: visible;
	}

	body.mobile-play-mode .legend-panel h2,
	body.mobile-play-mode .legend-panel p {
		margin-bottom: 8px;
	}

	body.mobile-play-mode .legend-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin: 10px 0;
	}

	body.mobile-play-mode .legend-card {
		padding: 10px;
		border-radius: 14px;
	}

	body.mobile-play-mode .legend-card li {
		padding: 5px 0;
		font-size: 0.88rem;
	}

	body.mobile-play-mode .game-panel {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	body.mobile-play-mode .info-bar {
		flex-direction: row;
		justify-content: center;
		gap: 22px;
		margin: 0 0 6px;
		padding: 7px 10px;
		border-radius: 12px;
		font-size: 0.92rem;
		flex: 0 0 auto;
	}

	body.mobile-play-mode #gameArea {
		flex: 1;
		height: auto;
		min-height: 0;
		border-width: 3px;
		border-radius: 14px;
	}

	body.mobile-play-mode .score-form {
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 40;
		width: min(92vw, 480px);
		max-height: 88dvh;
		overflow: auto;
		transform: translate(-50%, -50%);
		margin: 0;
		box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
	}

	body.mobile-play-mode #countdownValue {
		width: 120px;
		height: 120px;
		font-size: 3.2rem;
	}

	body.mobile-play-mode .sky-layer {
		height: 42%;
	}

	body.mobile-play-mode .sea {
		top: 33%;
		height: 24%;
	}

	body.mobile-play-mode .beach {
		height: 50%;
	}

	body.mobile-play-mode .runner {
		left: clamp(70px, 12vw, 110px);
		transform: scale(0.9);
		transform-origin: center bottom;
	}

	body.mobile-play-mode .obstacle {
		transform: scale(0.92);
		transform-origin: center bottom;
	}

	body.mobile-play-mode .collectible {
		transform: scale(0.9);
		transform-origin: center center;
	}
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 920px) and (orientation: portrait) {
	body.mobile-play-mode {
		overflow: hidden;
	}
}

/* Charakterauswahl vor dem Start */
.character-select {
	margin: 10px 0 18px;
	padding: 16px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.72);
	border: 2px solid rgba(11, 91, 124, 0.12);
}

.character-select h3 {
	margin-bottom: 12px;
}

.character-options {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.character-option {
	flex: 1 1 190px;
	min-height: 96px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-radius: 18px;
	border: 3px solid transparent;
	background: white;
	cursor: pointer;
	font-weight: 800;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.character-option.selected {
	border-color: #0c78a3;
	background: #e7f7ff;
}

.character-option input {
	width: 18px;
	height: 18px;
	accent-color: #0c78a3;
}

.mini-runner {
	position: relative;
	width: 42px;
	height: 78px;
	flex: 0 0 42px;
}

.mini-head,
.mini-torso,
.mini-arm,
.mini-leg {
	position: absolute;
	background: #d89b70;
	border: 2px solid #8b5a3c;
}

.mini-head {
	left: 10px;
	top: 0;
	width: 22px;
	height: 23px;
	border-radius: 50%;
}

.mini-torso {
	left: 9px;
	top: 26px;
	width: 24px;
	height: 30px;
	border-radius: 14px 14px 12px 12px;
}

.mini-arm {
	top: 31px;
	width: 10px;
	height: 28px;
	border-radius: 10px;
	animation: armRun 0.55s ease-in-out infinite alternate;
}

.mini-arm-left { left: 1px; }
.mini-arm-right { right: 1px; animation-direction: alternate-reverse; }

.mini-leg {
	top: 53px;
	width: 11px;
	height: 25px;
	border-radius: 10px;
	animation: legRun 0.52s ease-in-out infinite alternate;
}

.mini-leg-left { left: 10px; }
.mini-leg-right { right: 9px; animation-direction: alternate-reverse; }

.female-preview .mini-torso::before,
.female-preview .mini-torso::after,
.runner-female .runner-torso::before,
.runner-female .runner-torso::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: #d89b70;
	border: 2px solid #8b5a3c;
	box-shadow: inset 0 -2px 0 rgba(139, 90, 60, 0.11);
}

.female-preview .mini-torso::before,
.female-preview .mini-torso::after {
	top: 8px;
	width: 9px;
	height: 9px;
}

.female-preview .mini-torso::before { left: 3px; }
.female-preview .mini-torso::after { right: 3px; }

.runner-female .runner-torso::before,
.runner-female .runner-torso::after {
	top: 13px;
	width: 13px;
	height: 13px;
}

.runner-female .runner-torso::before { left: 3px; }
.runner-female .runner-torso::after { right: 3px; }

.male-preview .mini-torso::after,
.runner-male .runner-torso::after {
	content: "";
	position: absolute;
	left: 50%;
	border-radius: 50%;
	background: #c5865e;
	border: 2px solid #8b5a3c;
	transform: translateX(-50%);
}

.male-preview .mini-torso::after {
	bottom: -6px;
	width: 8px;
	height: 11px;
}

.runner-male .runner-torso::after {
	bottom: -10px;
	width: 10px;
	height: 15px;
}

/* Starre Smartphone-Startseite im Querformat: keine separaten Scrollbereiche. */
@media (pointer: coarse) and (orientation: landscape), (max-width: 920px) and (orientation: landscape) {
	html,
	body {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.container {
		width: 100vw;
		height: 100dvh;
		margin: 0;
		padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
		border-radius: 0;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		background: rgba(255, 255, 255, 0.98);
		overflow: hidden;
	}

	.hero-header {
		flex: 0 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		margin-bottom: 6px;
	}

	.hero-header h1 {
		margin: 0;
		font-size: clamp(1.15rem, 3.6vw, 1.65rem);
	}

	.eyebrow,
	.intro {
		display: none;
	}

	.highscore-link {
		min-height: 34px;
		padding: 6px 10px;
		font-size: 0.8rem;
		white-space: nowrap;
	}

	.legend-panel {
		flex: 1 1 auto;
		min-height: 0;
		display: grid;
		grid-template-rows: auto auto 1fr auto auto;
		gap: 6px;
		padding: 8px;
		border-radius: 12px;
		overflow: hidden;
	}

	.legend-panel h2 {
		margin: 0;
		font-size: 1.05rem;
	}

	.legend-panel > p {
		margin: 0;
		font-size: 0.78rem;
		line-height: 1.15;
	}

	.legend-grid {
		min-height: 0;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		margin: 0;
	}

	.legend-card {
		min-height: 0;
		padding: 7px;
		border-radius: 10px;
		box-shadow: none;
	}

	.legend-card h3 {
		margin-bottom: 3px;
		font-size: 0.82rem;
	}

	.legend-card li {
		gap: 4px;
		padding: 2px 0;
		font-size: 0.68rem;
		line-height: 1.05;
	}

	.legend-card span {
		width: 20px;
		font-size: 1rem;
	}

	.legend-card span.towel-symbol {
		width: 25px;
		height: 16px;
		font-size: 0;
	}

	.character-select {
		margin: 0;
		padding: 6px;
		border-radius: 10px;
	}

	.character-select h3 {
		margin: 0 0 4px;
		font-size: 0.82rem;
	}

	.character-options {
		gap: 8px;
		flex-wrap: nowrap;
	}

	.character-option {
		min-height: 56px;
		flex: 1 1 0;
		gap: 6px;
		padding: 5px 8px;
		border-width: 2px;
		border-radius: 10px;
		font-size: 0.78rem;
		box-shadow: none;
	}

	.character-option input {
		width: 14px;
		height: 14px;
	}

	.mini-runner {
		width: 30px;
		height: 52px;
		flex-basis: 30px;
		transform: scale(0.72);
		transform-origin: left center;
	}

	#startButton {
		min-height: 38px;
		padding: 8px 16px;
		font-size: 0.9rem;
		justify-self: center;
	}
}

/* Schwierigkeitsauswahl */
.difficulty-select {
	margin: 10px 0 18px;
	padding: 14px 16px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.72);
	border: 2px solid rgba(11, 91, 124, 0.12);
}

.difficulty-select h3 {
	margin: 0 0 12px;
}

.difficulty-options {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.difficulty-option {
	flex: 1 1 130px;
	min-height: 64px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 16px;
	border: 3px solid transparent;
	background: white;
	cursor: pointer;
	font-weight: 800;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.difficulty-option.selected {
	border-color: #0c78a3;
	background: #e7f7ff;
}

.difficulty-option input {
	width: 18px;
	height: 18px;
	accent-color: #0c78a3;
}

.difficulty-option > span {
	display: inline-flex;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #0c78a3;
	color: white;
	font-weight: 900;
}

/* Figuren näher an der Vorlage: hölzern/cartoonhaft, mit stärker sichtbaren Armen und Beinen. */
.mini-runner {
	width: 54px;
	height: 78px;
	flex: 0 0 54px;
	animation: characterIdle 1.2s ease-in-out infinite alternate;
}

.mini-head {
	left: 17px;
	top: 0;
	width: 20px;
	height: 21px;
	border-radius: 50%;
}

.mini-torso {
	left: 15px;
	top: 25px;
	width: 24px;
	height: 30px;
	border-radius: 14px 14px 16px 16px;
}

.mini-arm {
	top: 27px;
	width: 10px;
	height: 34px;
	border-radius: 999px;
	transform-origin: center 4px;
	animation: none;
}

.mini-arm-left {
	left: 6px;
	transform: rotate(-18deg);
}

.mini-arm-right {
	right: 6px;
	transform: rotate(18deg);
}

.mini-leg {
	top: 52px;
	width: 12px;
	height: 27px;
	border-radius: 999px;
	transform-origin: center 4px;
	animation: none;
}

.mini-leg-left {
	left: 18px;
	transform: rotate(25deg);
}

.mini-leg-right {
	right: 18px;
	transform: rotate(-25deg);
}

.female-preview .mini-torso::before,
.female-preview .mini-torso::after {
	top: 8px;
	width: 10px;
	height: 10px;
	z-index: 2;
}

.female-preview .mini-torso::before { left: 2px; }
.female-preview .mini-torso::after { right: 2px; }

.male-preview .mini-torso::after {
	bottom: -8px;
	width: 8px;
	height: 12px;
	border-radius: 50%;
	z-index: 2;
}

.runner {
	width: 64px;
	height: 122px;
}

.runner-head {
	left: 18px;
	width: 30px;
	height: 31px;
}

.runner-neck {
	left: 27px;
}

.runner-torso {
	left: 16px;
	top: 38px;
	width: 34px;
	height: 45px;
	border-radius: 18px 18px 18px 18px;
}

.runner-arm {
	top: 42px;
	width: 15px;
	height: 49px;
	animation: armRunSoft 0.5s ease-in-out infinite alternate;
}

.arm-left {
	left: 8px;
}

.arm-right {
	right: 7px;
	animation-direction: alternate-reverse;
}

.runner-leg {
	top: 78px;
	width: 17px;
	height: 47px;
	animation: legRunSoft 0.48s ease-in-out infinite alternate;
}

.leg-left {
	left: 19px;
}

.leg-right {
	right: 18px;
	animation-direction: alternate-reverse;
}

.runner-female .runner-torso::before,
.runner-female .runner-torso::after {
	top: 13px;
	width: 13px;
	height: 13px;
	z-index: 2;
}

.runner-female .runner-torso::before { left: 3px; }
.runner-female .runner-torso::after { right: 3px; }

.runner-male .runner-torso::after {
	bottom: -11px;
	width: 10px;
	height: 16px;
	border-radius: 50%;
	z-index: 2;
}

@keyframes armRunSoft {
	from { transform: rotate(-15deg); }
	to { transform: rotate(18deg); }
}

@keyframes legRunSoft {
	from { transform: rotate(22deg); }
	to { transform: rotate(-22deg); }
}

@keyframes characterIdle {
	from { transform: translateY(0); }
	to { transform: translateY(-2px); }
}

.highscore-level-grid {
	display: grid;
	gap: 22px;
}

.highscore-level-card {
	padding: 18px;
	border-radius: 18px;
	border: 1px solid rgba(12, 120, 163, 0.18);
	background: rgba(255, 255, 255, 0.7);
}

.highscore-level-card h2 {
	margin: 0 0 12px;
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 920px) and (orientation: landscape) {
	.legend-panel {
		grid-template-rows: auto auto 1fr auto auto auto;
		gap: 4px;
	}

	.difficulty-select {
		margin: 0;
		padding: 6px;
		border-radius: 10px;
	}

	.difficulty-select h3 {
		margin: 0 0 4px;
		font-size: 0.82rem;
	}

	.difficulty-options {
		gap: 6px;
		flex-wrap: nowrap;
	}

	.difficulty-option {
		min-height: 38px;
		flex: 1 1 0;
		gap: 5px;
		padding: 4px 6px;
		border-width: 2px;
		border-radius: 10px;
		font-size: 0.72rem;
		box-shadow: none;
	}

	.difficulty-option input {
		width: 13px;
		height: 13px;
	}

	.difficulty-option > span {
		width: 22px;
		height: 22px;
		font-size: 0.75rem;
	}

	.character-option {
		min-height: 54px;
	}

	.mini-runner {
		width: 38px;
		height: 55px;
		flex-basis: 38px;
		transform: scale(0.68);
		transform-origin: left center;
	}

	#startButton {
		min-height: 34px;
		padding: 6px 14px;
		font-size: 0.86rem;
	}
}

/* --- Update: Smartphone-Sprung, Figuren-Details, Palme und Alu-Mützen/UFO-Ereignis --- */
.foil-icon {
	display: inline-block;
	width: 22px;
	height: 18px;
	position: relative;
	vertical-align: middle;
	border-radius: 55% 55% 30% 30%;
	background: linear-gradient(135deg, #f7f7f7 0%, #9fa7ad 34%, #ffffff 50%, #7d858c 68%, #e6edf2 100%);
	border: 2px solid #626a70;
	box-shadow: inset -2px -2px 0 rgba(0,0,0,0.18), 0 2px 3px rgba(0,0,0,0.18);
}

.foil-icon::before,
.foil-icon::after {
	content: "";
	position: absolute;
	top: 3px;
	width: 8px;
	height: 12px;
	background: linear-gradient(#eef4f8, #8f979e);
	border: 1px solid #666e74;
}

.foil-icon::before {
	left: 1px;
	transform: rotate(-28deg);
	border-radius: 60% 20% 50% 30%;
}

.foil-icon::after {
	right: 1px;
	transform: rotate(28deg);
	border-radius: 20% 60% 30% 50%;
}

.foil-icon-large {
	width: 34px;
	height: 28px;
	transform: scale(1.1);
}

.foreground-palm {
	position: absolute;
	z-index: 35;
	width: 170px;
	height: 230px;
	font-size: 175px;
	line-height: 1;
	pointer-events: none;
	filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.25));
}

.ufo {
	position: absolute;
	z-index: 32;
	width: 118px;
	height: 72px;
	pointer-events: none;
	filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.28));
}

.ufo-body {
	position: absolute;
	left: 0;
	top: 22px;
	width: 118px;
	height: 50px;
	font-size: 78px;
	line-height: 1;
	text-align: center;
}

.ufo-alien-head {
	position: absolute;
	left: 47px;
	top: 4px;
	width: 28px;
	height: 30px;
	border-radius: 50% 50% 42% 42%;
	background: #55d25f;
	border: 2px solid #1d7e2c;
	z-index: 2;
}

.ufo-alien-head::before,
.ufo-alien-head::after {
	content: "";
	position: absolute;
	top: 10px;
	width: 6px;
	height: 9px;
	border-radius: 50%;
	background: #0d2b14;
}

.ufo-alien-head::before { left: 6px; }
.ufo-alien-head::after { right: 6px; }

.ufo-beam {
	position: absolute;
	top: 62px;
	width: 78px;
	transform: translateX(-50%);
	background:
		repeating-radial-gradient(ellipse at center, rgba(115, 255, 238, 0.45) 0 8px, rgba(115, 255, 238, 0.12) 8px 16px),
		linear-gradient(90deg, transparent 0%, rgba(102, 244, 231, 0.2) 16%, rgba(102, 244, 231, 0.55) 50%, rgba(102, 244, 231, 0.2) 84%, transparent 100%);
	clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
	animation: beamWave 0.32s linear infinite alternate;
	opacity: 0.9;
}

@keyframes beamWave {
	from { filter: hue-rotate(0deg); transform: translateX(-50%) skewX(-4deg); }
	to { filter: hue-rotate(28deg); transform: translateX(-50%) skewX(5deg); }
}

.score-penalty {
	position: absolute;
	z-index: 45;
	color: #842121;
	font-weight: 900;
	font-size: 2.3rem;
	text-shadow: 0 2px 0 white, 0 0 10px rgba(255,255,255,0.9);
	pointer-events: none;
}

.score-penalty-animate {
	animation: penaltyUp 1.15s ease-out forwards;
}

@keyframes penaltyUp {
	from { transform: translateY(0) scale(0.92); opacity: 0; }
	18% { opacity: 1; }
	to { transform: translateY(-90px) scale(1.18); opacity: 0; }
}

/* Weibliche Figur: hüftlanges Haar mit rosa Schleife; Brüste höher und versetzt. */
.runner-female .runner-head {
	z-index: 3;
}

.runner-female .runner-head::before {
	content: "";
	position: absolute;
	left: -9px;
	top: -4px;
	width: 46px;
	height: 86px;
	border-radius: 22px 22px 24px 24px;
	background: linear-gradient(#7a472d, #4f2d1b 70%);
	border: 2px solid rgba(63, 38, 24, 0.75);
	z-index: -2;
}

/*.runner-female .runner-head::after {
	content: "";
	position: absolute;
	left: -16px;
	top: -11px;
	width: 28px;
	height: 20px;
	background:
		radial-gradient(ellipse at 6px 10px, #ff8cc9 0 8px, transparent 9px),
		radial-gradient(ellipse at 22px 10px, #ff8cc9 0 8px, transparent 9px),
		radial-gradient(circle at 14px 10px, #d92f86 0 5px, transparent 6px);
	filter: drop-shadow(0 1px 1px rgba(70, 0, 35, 0.35));
	z-index: 9;
}*/

.runner {
	position: absolute;
	isolation: isolate;
}

.runner-hair {
	display: none;
}

.runner-female .runner-hair {
	display: block;
	position: absolute;
	left: 4px;
	top: -4px;
	width: 46px;
	height: 62px;
	border-radius: 24px 24px 26px 26px;
	background: linear-gradient(#7a472d, #4f2d1b 72%);
	border: 2px solid rgba(63, 38, 24, 0.75);
	z-index: -2;
}

.runner-head {
	position: absolute;
	z-index: 3;
}

.runner-neck {
	position: absolute;
	z-index: 2;
}

.runner-torso {
	position: absolute;
	z-index: 2;
}

.runner-arm,
.runner-leg {
	position: absolute;
	z-index: 1;
}

.runner-female .runner-torso::before,
.runner-female .runner-torso::after {
	top: 7px;
	width: 13px;
	height: 13px;
	z-index: 3;
}

/* ::before ist die rechte Brust aus Sicht der Figur, ::after die linke. */
.runner-female .runner-torso::before { left: 17px; }
.runner-female .runner-torso::after { left: 4px; right: auto; }

.female-preview .mini-head::before {
	content: "";
	position: absolute;
	left: -7px;
	top: -3px;
	width: 34px;
	height: 58px;
	border-radius: 17px 17px 18px 18px;
	background: linear-gradient(#7a472d, #4f2d1b 70%);
	border: 1px solid rgba(63, 38, 24, 0.75);
	z-index: -1;
}

.female-preview .mini-head::after {
	content: "";
	position: absolute;
	left: -12px;
	top: -8px;
	width: 22px;
	height: 15px;
	background:
		radial-gradient(ellipse at 5px 8px, #ff8cc9 0 6px, transparent 7px),
		radial-gradient(ellipse at 17px 8px, #ff8cc9 0 6px, transparent 7px),
		radial-gradient(circle at 11px 8px, #d92f86 0 4px, transparent 5px);
	filter: drop-shadow(0 1px 1px rgba(70, 0, 35, 0.35));
}

.female-preview .mini-torso::before,
.female-preview .mini-torso::after {
	top: 4px;
}

.female-preview .mini-torso::before { left: 13px; }
.female-preview .mini-torso::after { left: 2px; right: auto; }

/* Männliches Oval minimal dünner. */
.runner-male .runner-torso::after {
	width: 7px;
	height: 15px;
}

.male-preview .mini-torso::after {
	width: 6px;
	height: 11px;
}

.runner.helmet-on .runner-head {
	box-shadow: inset 0 -4px 0 rgba(139, 90, 60, 0.12), 0 -5px 0 2px #cfd8df, 0 -8px 0 0 #747d84;
}

.runner.head-scanned .runner-head {
	animation: brainScanBlink 0.16s linear infinite alternate;
}

@keyframes brainScanBlink {
	from { background: #d89b70; }
	to { background: #4b2b18; }
}

@media (pointer: coarse), (max-width: 920px) {
	body.mobile-play-mode .foreground-palm {
		width: 145px;
		height: 200px;
		font-size: 145px;
	}

	body.mobile-play-mode .ufo {
		transform: scale(0.9);
		transform-origin: left top;
	}
}


/* --- Fix: klare Sammel-Grafiken und Palme im vordersten Vordergrund --- */
.towel-symbol {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: 42px !important;
	height: 28px !important;
	border-radius: 4px 4px 8px 8px;
	background:
		repeating-linear-gradient(90deg,
			#ffffff 0 7px,
			#20a7df 7px 14px,
			#ffffff 14px 21px,
			#f48fc0 21px 28px);
	border: 2px solid #287aa0;
	box-shadow:
		inset 0 2px 0 rgba(255,255,255,0.75),
		0 5px 6px rgba(0,0,0,0.18);
	transform: rotate(-5deg);
	flex: 0 0 auto;
}

.towel-symbol::before {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	top: -5px;
	height: 5px;
	border-radius: 5px 5px 0 0;
	background: #f5f5f5;
	border: 1px solid rgba(40,122,160,0.55);
}

.towel-symbol::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	height: 5px;
	background:
		repeating-linear-gradient(90deg,
			transparent 0 4px,
			rgba(40,122,160,0.65) 4px 5px,
			transparent 5px 8px);
}

.collectible .towel-symbol {
	width: 54px !important;
	height: 36px !important;
	transform: rotate(-8deg) scale(1.06);
}

.foil-icon {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	width: 34px;
	height: 26px;
	clip-path: polygon(50% 0, 88% 35%, 76% 100%, 24% 100%, 12% 35%);
	background:
		linear-gradient(135deg,
			#ffffff 0%, #b5bec7 18%, #f8fbff 34%, #8d969f 48%,
			#eef4f8 62%, #7d858c 77%, #ffffff 100%);
	border: 2px solid #5e666d;
	box-shadow:
		inset -3px -3px 0 rgba(0,0,0,0.18),
		inset 3px 3px 0 rgba(255,255,255,0.55),
		0 5px 7px rgba(0,0,0,0.2);
	transform: rotate(2deg);
	flex: 0 0 auto;
}

.foil-icon::before,
.foil-icon::after {
	content: "";
	position: absolute;
	top: 7px;
	width: 13px;
	height: 17px;
	background: linear-gradient(135deg, #f8fbff, #8a939b 75%);
	border: 1px solid #5e666d;
	box-shadow: inset 1px 1px 0 rgba(255,255,255,0.75);
}

.foil-icon::before {
	left: -3px;
	transform: rotate(-24deg);
	border-radius: 70% 25% 45% 35%;
}

.foil-icon::after {
	right: -3px;
	transform: rotate(24deg);
	border-radius: 25% 70% 35% 45%;
}

.foil-icon-large {
	width: 48px;
	height: 38px;
	transform: rotate(4deg) scale(1.08);
}

.foreground-palm {
	position: absolute;
	z-index: 120 !important;
	width: 250px;
	height: 360px;
	pointer-events: none;
	filter: drop-shadow(0 18px 16px rgba(0,0,0,0.36));
	will-change: left;
}

.palm-trunk {
	position: absolute;
	left: 106px;
	bottom: 0;
	width: 46px;
	height: 255px;
	border-radius: 42% 42% 15px 15px;
	background:
		repeating-linear-gradient(12deg,
			#8b4f24 0 18px,
			#b87333 18px 33px,
			#6f3f1d 33px 39px),
		linear-gradient(90deg, #6f3f1d, #c98542, #6f3f1d);
	transform: rotate(7deg);
	transform-origin: center bottom;
	box-shadow: inset -11px 0 0 rgba(0,0,0,0.18);
}

.palm-leaf {
	position: absolute;
	left: 96px;
	top: 8px;
	width: 42px;
	height: 150px;
	border-radius: 100% 0 100% 0;
	background: linear-gradient(45deg, #0b6f38, #1eb35d 58%, #73d66e);
	transform-origin: 20px 130px;
	box-shadow: inset -9px 0 0 rgba(0,0,0,0.15);
}

.palm-leaf-1 { transform: rotate(-86deg); }
.palm-leaf-2 { transform: rotate(-44deg); }
.palm-leaf-3 { transform: rotate(-8deg); }
.palm-leaf-4 { transform: rotate(36deg); }
.palm-leaf-5 { transform: rotate(76deg); }

body.mobile-play-mode .foreground-palm {
	width: 215px;
	height: 310px;
	transform: scale(0.92);
	transform-origin: center bottom;
}

body.mobile-play-mode .palm-trunk {
	height: 230px;
}

/* --- Fix 2026-05: sichtbare Grafiken, Bildschirm-Palme, Qualle und UFO-Bonus/Malus --- */
.jellyfish-symbol {
	position: relative;
	display: inline-block;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
}

.jellyfish-symbol::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 1px;
	width: 32px;
	height: 24px;
	border-radius: 50% 50% 36% 36%;
	background: radial-gradient(circle at 30% 30%, #fff, #ff9fce 36%, #d85aa6 100%);
	border: 2px solid #973372;
	box-shadow: inset 0 -5px 0 rgba(110, 25, 88, 0.18), 0 5px 7px rgba(0,0,0,0.18);
}

.jellyfish-symbol::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 23px;
	width: 27px;
	height: 18px;
	background:
		repeating-linear-gradient(90deg,
			#973372 0 3px,
			transparent 3px 7px);
	clip-path: polygon(0 0, 100% 0, 82% 100%, 66% 35%, 50% 100%, 34% 35%, 18% 100%);
	opacity: 0.88;
	animation: jellyTentacles 0.5s ease-in-out infinite alternate;
}

.jellyfish-large {
	width: 66px;
	height: 66px;
	transform: translateY(2px);
}

.jellyfish-large::before {
	width: 58px;
	height: 42px;
	left: 4px;
	top: 0;
}

.jellyfish-large::after {
	left: 9px;
	top: 42px;
	width: 48px;
	height: 26px;
}

@keyframes jellyTentacles {
	from { transform: skewX(-5deg); }
	to { transform: skewX(6deg); }
}

.towel-symbol.game-towel,
.collectible .towel-symbol.game-towel,
.legend-card .towel-symbol.game-towel {
	position: relative !important;
	display: inline-block !important;
	box-sizing: border-box !important;
	width: 44px !important;
	height: 30px !important;
	min-width: 44px !important;
	border-radius: 5px 5px 9px 9px !important;
	background: repeating-linear-gradient(90deg,
		#fff 0 7px,
		#1aa7df 7px 14px,
		#fff 14px 21px,
		#f48fc0 21px 28px) !important;
	border: 2px solid #176b8f !important;
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.75), 0 5px 6px rgba(0,0,0,0.2) !important;
	transform: rotate(-6deg) !important;
	overflow: visible !important;
	font-size: 0 !important;
}

.collectible .towel-symbol.game-towel.towel-large {
	width: 60px !important;
	height: 40px !important;
	min-width: 60px !important;
	transform: rotate(-8deg) scale(1.05) !important;
}

.towel-symbol.game-towel::before {
	content: "" !important;
	position: absolute !important;
	left: 5px !important;
	right: 5px !important;
	top: -6px !important;
	height: 6px !important;
	border-radius: 6px 6px 0 0 !important;
	background: #f7f7f7 !important;
	border: 1px solid rgba(23,107,143,0.65) !important;
}

.towel-symbol.game-towel::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: -6px !important;
	height: 6px !important;
	background: repeating-linear-gradient(90deg,
		transparent 0 4px,
		rgba(23,107,143,0.75) 4px 5px,
		transparent 5px 8px) !important;
}

.foil-icon.game-foil-hat,
.collectible .foil-icon.game-foil-hat,
.legend-card .foil-icon.game-foil-hat {
	position: relative !important;
	display: inline-block !important;
	box-sizing: border-box !important;
	width: 40px !important;
	height: 30px !important;
	min-width: 40px !important;
	clip-path: polygon(50% 0, 90% 34%, 78% 100%, 22% 100%, 10% 34%) !important;
	background: linear-gradient(135deg,
		#ffffff 0%, #aeb8c0 17%, #f8fbff 32%, #818a92 48%,
		#f0f5f9 62%, #727a82 78%, #ffffff 100%) !important;
	border: 2px solid #566069 !important;
	box-shadow: inset -4px -4px 0 rgba(0,0,0,0.18), inset 3px 3px 0 rgba(255,255,255,0.68), 0 6px 8px rgba(0,0,0,0.24) !important;
	transform: rotate(2deg) !important;
	overflow: visible !important;
	font-size: 0 !important;
}

.collectible .foil-icon.game-foil-hat.foil-icon-large {
	width: 62px !important;
	height: 48px !important;
	min-width: 62px !important;
	transform: rotate(4deg) scale(1.1) !important;
}

.foil-icon.game-foil-hat::before,
.foil-icon.game-foil-hat::after {
	content: "" !important;
	position: absolute !important;
	top: 8px !important;
	width: 16px !important;
	height: 20px !important;
	background: linear-gradient(135deg, #ffffff, #8a939b 75%) !important;
	border: 1px solid #566069 !important;
	box-shadow: inset 1px 1px 0 rgba(255,255,255,0.75) !important;
}

.foil-icon.game-foil-hat::before {
	left: -4px !important;
	transform: rotate(-26deg) !important;
	border-radius: 70% 25% 45% 35% !important;
}

.foil-icon.game-foil-hat::after {
	right: -4px !important;
	transform: rotate(26deg) !important;
	border-radius: 25% 70% 35% 45% !important;
}

.collectible-foil {
	z-index: 22 !important;
	width: 76px !important;
	height: 68px !important;
}

.collectible-towel {
	z-index: 20 !important;
	width: 76px !important;
	height: 64px !important;
}

.foreground-palm {
	z-index: 999 !important;
	position: absolute !important;
	width: min(78vw, 760px) !important;
	height: 108% !important;
	bottom: 0 !important;
	top: auto !important;
	pointer-events: none !important;
	filter: drop-shadow(0 22px 22px rgba(0,0,0,0.48)) !important;
	will-change: left !important;
}

.foreground-palm .palm-trunk {
	position: absolute !important;
	left: 43% !important;
	bottom: -4% !important;
	width: 13% !important;
	height: 91% !important;
	border-radius: 48% 48% 22px 22px !important;
	background: repeating-linear-gradient(12deg,
		#7b421d 0 20px,
		#bd7935 20px 39px,
		#603314 39px 47px) !important;
	transform: rotate(7deg) !important;
	transform-origin: center bottom !important;
	box-shadow: inset -18px 0 0 rgba(0,0,0,0.18) !important;
}

.foreground-palm .palm-leaf {
	position: absolute !important;
	left: 37% !important;
	top: -4% !important;
	width: 15% !important;
	height: 43% !important;
	border-radius: 100% 0 100% 0 !important;
	background: linear-gradient(45deg, #064d27, #19a553 58%, #77de70) !important;
	transform-origin: 50% 92% !important;
	box-shadow: inset -16px 0 0 rgba(0,0,0,0.18) !important;
}

.foreground-palm .palm-leaf-1 { transform: rotate(-92deg) scale(1.55) !important; }
.foreground-palm .palm-leaf-2 { transform: rotate(-50deg) scale(1.72) !important; }
.foreground-palm .palm-leaf-3 { transform: rotate(-8deg) scale(1.88) !important; }
.foreground-palm .palm-leaf-4 { transform: rotate(38deg) scale(1.72) !important; }
.foreground-palm .palm-leaf-5 { transform: rotate(82deg) scale(1.55) !important; }

body.mobile-play-mode .foreground-palm {
	width: 86vw !important;
	height: 112% !important;
	transform: none !important;
}

.ufo {
	z-index: 130 !important;
	width: 190px !important;
	height: 116px !important;
}

.ufo-body {
	left: 0 !important;
	top: 28px !important;
	width: 190px !important;
	height: 82px !important;
	font-size: 118px !important;
}

.ufo-alien-head {
	left: 78px !important;
	top: 0 !important;
	width: 42px !important;
	height: 46px !important;
	border-radius: 50% 50% 42% 42% !important;
	background: #47d45a !important;
	border: 3px solid #126b24 !important;
}

.ufo-alien-head::before,
.ufo-alien-head::after {
	top: 16px !important;
	width: 8px !important;
	height: 12px !important;
}

.ufo-alien-head::before { left: 10px !important; }
.ufo-alien-head::after { right: 10px !important; }

.ufo-beam {
	top: 94px !important;
	width: 90px !important;
	background: linear-gradient(90deg,
		transparent 0 8%, rgba(86,255,240,0.28) 8% 30%,
		rgba(86,255,240,0.75) 45% 55%, rgba(86,255,240,0.28) 70% 92%, transparent 92% 100%) !important;
	clip-path: polygon(45% 0, 57% 0, 48% 10%, 63% 20%, 44% 31%, 60% 43%, 39% 58%, 58% 71%, 35% 86%, 52% 100%, 15% 100%, 34% 86%, 16% 72%, 36% 58%, 20% 44%, 38% 31%, 23% 20%, 40% 10%) !important;
	opacity: 0.96 !important;
	animation: beamZigZag 0.18s linear infinite alternate !important;
}

.ufo-beam.beam-reflected {
	background: linear-gradient(90deg,
		transparent 0 12%, rgba(255,218,70,0.3) 12% 28%,
		rgba(255,218,70,0.92) 45% 55%, rgba(255,218,70,0.3) 72% 88%, transparent 88% 100%) !important;
	filter: drop-shadow(0 0 9px rgba(255,215,0,0.9)) !important;
	transform: translateX(-50%) rotate(-14deg) !important;
}

@keyframes beamZigZag {
	from { transform: translateX(-50%) skewX(-6deg); filter: hue-rotate(0deg); }
	to { transform: translateX(-50%) skewX(7deg); filter: hue-rotate(35deg); }
}

.score-popup {
	position: absolute !important;
	z-index: 1000 !important;
	font-weight: 900 !important;
	font-size: clamp(2.6rem, 7vw, 5rem) !important;
	pointer-events: none !important;
	text-shadow: 0 3px 0 white, 0 0 12px rgba(255,255,255,0.95) !important;
}

.score-popup-penalty { color: #d01010 !important; }
.score-popup-bonus { color: #ffd700 !important; text-shadow: 0 3px 0 #7a4a00, 0 0 18px rgba(255,215,0,0.95) !important; }

.score-popup-animate {
	animation: scorePopupUp 1.25s ease-out forwards !important;
}

@keyframes scorePopupUp {
	from { transform: translateY(0) scale(0.82); opacity: 0; }
	15% { opacity: 1; }
	to { transform: translateY(-120px) scale(1.2); opacity: 0; }
}


/* --- Fix: Qualle und Alu-Mütze als echte SVG-Grafiken, gut sichtbar --- */
.legend-svg {
	width: 42px;
	height: 42px;
	min-width: 42px;
	display: inline-block;
	vertical-align: middle;
	filter: drop-shadow(0 4px 3px rgba(0,0,0,0.18));
}

.game-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.obstacle-jellyfish {
	width: 82px !important;
	height: 82px !important;
	font-size: 0 !important;
	z-index: 28 !important;
}

.jellyfish-game-svg {
	width: 82px !important;
	height: 82px !important;
	animation: jellyBobVisible 0.65s ease-in-out infinite alternate;
}

.collectible-foil {
	width: 86px !important;
	height: 72px !important;
	z-index: 36 !important;
	font-size: 0 !important;
	overflow: visible !important;
}

.foil-game-svg {
	width: 86px !important;
	height: 72px !important;
	animation: foilSparkleVisible 0.8s ease-in-out infinite alternate;
	filter: drop-shadow(0 0 8px rgba(255,255,255,0.95)) drop-shadow(0 7px 5px rgba(0,0,0,0.25));
}

@keyframes jellyBobVisible {
	from { transform: translateY(0) scale(1); }
	to { transform: translateY(-6px) scale(1.04); }
}

@keyframes foilSparkleVisible {
	from { transform: rotate(-4deg) scale(1); filter: drop-shadow(0 0 5px rgba(255,255,255,0.75)) drop-shadow(0 7px 5px rgba(0,0,0,0.25)); }
	to { transform: rotate(5deg) scale(1.08); filter: drop-shadow(0 0 14px rgba(255,255,255,1)) drop-shadow(0 7px 5px rgba(0,0,0,0.25)); }
}

/* --- Fix: gleich große Grafiken, Alu-Mützen-Button und UFO-Punkteanzeige oben --- */
.legend-svg.towel-svg,
.legend-svg.jellyfish-svg,
.legend-svg.foil-svg {
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
}

.obstacle-jellyfish {
	width: 70px !important;
	height: 70px !important;
}

.jellyfish-game-svg {
	width: 70px !important;
	height: 70px !important;
}

.collectible-foil,
.collectible-towel {
	width: 56px !important;
	height: 56px !important;
	font-size: 0 !important;
	overflow: visible !important;
}

.foil-game-svg,
.towel-game-svg {
	width: 56px !important;
	height: 56px !important;
	display: block !important;
	overflow: visible !important;
}

.foil-game-svg {
	animation: foilSparkleVisible 0.8s ease-in-out infinite alternate;
	filter: drop-shadow(0 0 8px rgba(255,255,255,0.95)) drop-shadow(0 7px 5px rgba(0,0,0,0.25));
}

.towel-game-svg {
	filter: drop-shadow(0 7px 5px rgba(0,0,0,0.25));
}

.foil-action-panel {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.foil-countdown-display {
	min-width: 92px;
	padding: 8px 18px;
	border-radius: 999px;
	background: rgba(20, 28, 36, 0.82);
	color: #ffffff;
	font-size: clamp(2.1rem, 5vw, 4.2rem);
	font-weight: 900;
	line-height: 1;
	text-align: center;
	text-shadow: 0 2px 0 rgba(0,0,0,0.55);
	box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}

.foil-equip-button {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border: 3px solid #ffffff;
	border-radius: 999px;
	background: linear-gradient(135deg, #e6edf4, #9faab4 45%, #ffffff 60%, #78838d);
	color: #17202a;
	font-size: clamp(1rem, 2.8vw, 1.45rem);
	font-weight: 900;
	box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 16px rgba(255,255,255,0.75);
	cursor: pointer;
	touch-action: manipulation;
	animation: foilButtonPulse 0.42s ease-in-out infinite alternate;
}

.foil-equip-button .foil-game-svg {
	width: 44px !important;
	height: 36px !important;
	flex: 0 0 auto;
}

@keyframes foilButtonPulse {
	from { transform: scale(1); }
	to { transform: scale(1.07); }
}

.score-popup {
	left: 50% !important;
	top: 18px !important;
	transform: translateX(-50%);
	font-size: clamp(3.6rem, 9vw, 7rem) !important;
	text-align: center;
	min-width: 220px;
}

.score-popup-animate {
	animation: scorePopupTopFlash 2s ease-out forwards !important;
}

@keyframes scorePopupTopFlash {
	0% { transform: translateX(-50%) scale(0.65); opacity: 0; }
	12% { transform: translateX(-50%) scale(1.12); opacity: 1; }
	72% { transform: translateX(-50%) scale(1); opacity: 1; }
	100% { transform: translateX(-50%) translateY(-26px) scale(1.04); opacity: 0; }
}

.runner.head-scanned .runner-head {
	animation: headBrownBlink 0.22s linear infinite alternate !important;
}

@media (max-width: 920px) and (orientation: landscape) {
	.foil-action-panel {
		top: max(8px, env(safe-area-inset-top));
	}

	.foil-countdown-display {
		font-size: clamp(2rem, 7vh, 3.2rem);
		padding: 6px 16px;
	}

	.foil-equip-button {
		padding: 8px 14px;
		font-size: clamp(0.9rem, 4vh, 1.25rem);
	}

	.foil-equip-button .foil-game-svg {
		width: 38px !important;
		height: 32px !important;
	}
}

@keyframes headBrownBlink {
	from { background: #d89b70; border-color: #8b5a3c; }
	to { background: #5b341f; border-color: #2c170c; }
}

/* Anpassungen 04.05.: Haare entfernen, mobile Legende scrollbar, Palme/Busch, Audio-Ereignisse, Pommes/Möwen. */
.runner-female .runner-head::before,
.runner-female .runner-hair {
	display: none !important;
	content: none !important;
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 920px) and (orientation: landscape) {
	html,
	body {
		height: auto !important;
		min-height: 100% !important;
		overflow: auto !important;
	}

	body:not(.mobile-play-mode) .container,
	body:not(.mobile-play-mode) .legend-panel {
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	body:not(.mobile-play-mode) .legend-grid {
		grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
	}

	body.mobile-play-mode {
		height: 100dvh !important;
		overflow: hidden !important;
	}

	body.mobile-play-mode .score-form {
		z-index: 5000 !important;
	}
}

.score-form {
	z-index: 5000 !important;
}

.foreground-palm {
	z-index: 999 !important;
	width: min(86vw, 820px) !important;
	height: 112% !important;
}

.foreground-palm .palm-tree {
	position: absolute;
	left: 28%;
	bottom: 0;
	width: 44%;
	height: 100%;
}

.foreground-palm .palm-tree-left,
.foreground-palm .palm-tree-right {
	display: none;
}

.foreground-palm.palm-bush .palm-tree-left,
.foreground-palm.palm-bush .palm-tree-right {
	display: block;
}

.foreground-palm.palm-bush .palm-tree-left {
	left: 2%;
	transform: rotate(-9deg);
	transform-origin: center bottom;
}

.foreground-palm.palm-bush .palm-tree-middle {
	left: 28%;
	transform: rotate(0deg);
	transform-origin: center bottom;
}

.foreground-palm.palm-bush .palm-tree-right {
	left: 54%;
	transform: rotate(9deg);
	transform-origin: center bottom;
}

.ufo {
	top: 14px !important;
	z-index: 130 !important;
}

.score-popup {
	z-index: 240 !important;
	font-size: clamp(2.8rem, 7vw, 5.2rem) !important;
	font-weight: 1000 !important;
	text-shadow: 0 4px 0 white, 0 0 24px rgba(255, 255, 255, 0.95) !important;
}

.score-popup-bonus {
	color: #ffd300 !important;
}

.score-popup-penalty {
	color: #d71920 !important;
}

.held-fries {
	position: absolute;
	left: 64px;
	top: 46px;
	z-index: 9;
	font-size: 30px;
	transform: rotate(-10deg);
	filter: drop-shadow(0 2px 1px rgba(0,0,0,0.25));
}

.runner.holding-fries .held-fries {
	animation: friesHeldWiggle 0.55s ease-in-out infinite alternate;
}

@keyframes friesHeldWiggle {
	from { transform: translate(0, 0) rotate(-10deg); }
	to { transform: translate(3px, -2px) rotate(-4deg); }
}

.runner.holding-fries .arm-right {
	transform: rotate(-72deg) !important;
	transform-origin: top center;
}

.fries-bird-layer {
	position: absolute;
	inset: 0;
	z-index: 150;
	pointer-events: none;
}

.fries-bird {
	position: absolute;
	font-size: 34px;
	animation: friesBirdEscape 1.6s ease-in forwards;
}

@keyframes friesBirdEscape {
	from { transform: translate(0, 0) scale(0.9); opacity: 1; }
	to { transform: translate(160px, -260px) scale(0.65); opacity: 0; }
}

.seagull-attack {
	position: absolute;
	z-index: 155;
	font-size: 76px;
	line-height: 1;
	pointer-events: none;
	filter: drop-shadow(0 5px 6px rgba(0,0,0,0.22));
	transition: transform 0.05s linear;
}

.seagull-attack.stealing-helmet {
	animation: seagullStealsHelmet 0.95s ease-out forwards;
}

@keyframes seagullStealsHelmet {
	from { transform: translate(0, 0) scale(1.05) rotate(-8deg); opacity: 1; }
	to { transform: translate(210px, -260px) scale(0.72) rotate(18deg); opacity: 0; }
}

.collectible {
	z-index: 24 !important;
}

.collectible-foil .game-svg,
.collectible-towel .game-svg,
.obstacle-jellyfish .game-svg {
	width: 64px !important;
	height: 64px !important;
}

/* Fix 05.05.: weibliche Figur ohne Haare, mit zwei Augen und rosa Schleife. */
.runner-female .runner-head::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 8px !important;
	top: 11px !important;
	width: 4px !important;
	height: 4px !important;
	border-radius: 50% !important;
	background: #3b2b22 !important;
	border: none !important;
	box-shadow: none !important;
	z-index: 6 !important;
}

.runner-female .runner-head::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	right: 8px !important;
	top: 11px !important;
	width: 4px !important;
	height: 4px !important;
	border-radius: 50% !important;
	background: #3b2b22 !important;
	border: none !important;
	box-shadow: none !important;
	z-index: 6 !important;
}

.runner-female .runner-hair {
	display: none !important;
}

.runner-bow {
	display: none;
}

.runner-female .runner-bow {
	display: block;
	position: absolute;
	left: 2px;
	top: -8px;
	width: 26px;
	height: 18px;
	z-index: 20;
	background:
		radial-gradient(ellipse at 6px 9px, #ff9ad4 0 7px, transparent 8px),
		radial-gradient(ellipse at 20px 9px, #ff9ad4 0 7px, transparent 8px),
		radial-gradient(circle at 13px 9px, #d92f86 0 4px, transparent 5px);
	filter: drop-shadow(0 1px 1px rgba(70, 0, 35, 0.35));
}

/* Delfin im Hintergrund über dem Meer, gespiegelt je nach Flugrichtung. */
.dolphin {
	position: absolute;
	width: clamp(92px, 13vw, 155px);
	height: clamp(46px, 7vw, 78px);
	z-index: 5;
	pointer-events: none;
	transform-origin: center center;
	filter: drop-shadow(0 6px 5px rgba(0, 72, 110, 0.22));
}

.dolphin svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Querformat ist auf Smartphones Pflicht: Hochkant zeigt nur den Drehhinweis. */
@media (pointer: coarse) and (orientation: portrait), (max-width: 920px) and (orientation: portrait) {
	body.show-orientation-notice main,
	body.show-orientation-notice .container,
	body.show-orientation-notice .legend-panel,
	body.show-orientation-notice .game-panel {
		visibility: hidden !important;
		pointer-events: none !important;
	}

	body.show-orientation-notice .orientation-overlay {
		visibility: visible !important;
		display: flex !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		z-index: 99999 !important;
	}
}

/* Fix 06.05.: echte Möwe statt Taube, kleiner Delfin im Meer und Möwenabwehr-Button. */
.seagull-defense-button {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1250;
	padding: 10px 14px;
	border: 3px solid #ffffff;
	border-radius: 999px;
	background: linear-gradient(135deg, #fff7ca, #ffcf4d);
	color: #3d2700;
	font-size: clamp(0.95rem, 2.2vw, 1.25rem);
	font-weight: 900;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	touch-action: manipulation;
}

.runner.waving-left-arm .arm-left {
	animation: armDefenseWave 0.16s linear infinite alternate !important;
	transform-origin: top center !important;
}

@keyframes armDefenseWave {
	from { transform: rotate(-96deg); }
	to { transform: rotate(-24deg); }
}

.seagull-attack {
	width: clamp(54px, 8vw, 112px) !important;
	height: clamp(32px, 5vw, 68px) !important;
	font-size: 0 !important;
	transform-origin: center center;
}

.seagull-svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
	filter: drop-shadow(0 5px 5px rgba(0,0,0,0.22));
}

.seagull-svg .wing-left,
.seagull-svg .wing-right {
	animation: seagullWingBeat 0.18s ease-in-out infinite alternate;
	transform-origin: 60px 39px;
}

@keyframes seagullWingBeat {
	from { transform: rotate(-10deg); }
	to { transform: rotate(12deg); }
}

.seagull-attack.diving .seagull-svg {
	animation: seagullDiveWobble 0.34s ease-in-out infinite alternate;
}

@keyframes seagullDiveWobble {
	from { transform: rotate(-8deg); }
	to { transform: rotate(7deg); }
}

.seagull-attack.escaping {
	animation: seagullEscapeReal 1.35s ease-out forwards;
}

.seagull-attack.escaping .seagull-svg {
	animation: seagullEscapeFlap 0.14s ease-in-out infinite alternate;
}

@keyframes seagullEscapeReal {
	0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
	38% { transform: translate(52px, -90px) scale(0.95) rotate(14deg); opacity: 1; }
	100% { transform: translate(170px, -310px) scale(0.62) rotate(24deg); opacity: 0; }
}

@keyframes seagullEscapeFlap {
	from { filter: drop-shadow(0 5px 5px rgba(0,0,0,0.22)); }
	to { filter: drop-shadow(0 8px 8px rgba(0,0,0,0.28)); }
}

.fries-bird {
	width: 92px;
	height: 58px;
	font-size: 0 !important;
}

.fries-bird .seagull-svg {
	width: 92px;
	height: 58px;
}

.dolphin {
	width: clamp(48px, 6vw, 86px) !important;
	height: clamp(24px, 3.2vw, 44px) !important;
	z-index: 6 !important;
	opacity: 0.92;
}

.dolphin svg {
	width: 100%;
	height: 100%;
}

.ufo {
	top: 10px !important;
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 920px) and (orientation: landscape) {
	.seagull-defense-button {
		top: max(8px, env(safe-area-inset-top));
		left: max(8px, env(safe-area-inset-left));
		padding: 8px 12px;
		font-size: clamp(0.85rem, 3.5vh, 1.1rem);
	}

	.dolphin {
		width: clamp(42px, 7vw, 72px) !important;
		height: clamp(20px, 3.7vw, 36px) !important;
	}
}


/* Korrektur: Legendenfigur nutzt dieselben Bauteile wie die Spielfigur; Delfin klein im Meer. */
.mini-character-runner {
	position: relative !important;
	left: auto !important;
	bottom: auto !important;
	width: 56px !important;
	height: 122px !important;
	flex: 0 0 42px !important;
	transform: scale(0.58) !important;
	transform-origin: left top !important;
	z-index: 1 !important;
	margin-right: -10px;
}

.mini-character-runner .runner-head,
.mini-character-runner .runner-neck,
.mini-character-runner .runner-torso,
.mini-character-runner .runner-arm,
.mini-character-runner .runner-leg {
	position: absolute !important;
}

.mini-character-runner.runner-female .runner-bow {
	display: block !important;
}

.mini-character-runner.runner-female .runner-head::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 8px !important;
	top: 11px !important;
	width: 4px !important;
	height: 4px !important;
	border-radius: 50% !important;
	background: #3b2b22 !important;
	border: none !important;
}

.mini-character-runner.runner-female .runner-head::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	right: 8px !important;
	top: 11px !important;
	width: 4px !important;
	height: 4px !important;
	border-radius: 50% !important;
	background: #3b2b22 !important;
	border: none !important;
}

.dolphin {
	width: clamp(42px, 5vw, 72px) !important;
	height: clamp(22px, 2.8vw, 38px) !important;
	z-index: 6 !important;
	opacity: 0.95;
}

.dolphin svg {
	width: 100%;
	height: 100%;
}

/* Korrektur: Delfin bleibt im blauen Wasser und zeigt mit der Schnauze in Sprungrichtung. */
.dolphin {
	z-index: 7 !important;
	transform-origin: center center;
	pointer-events: none;
}

.dolphin svg {
	display: block;
}


/* Korrektur 07.05.: Smartphone-Querformat darf Start/Legende/Highscores nicht abschneiden. */
@media (pointer: coarse) and (orientation: landscape), (max-width: 920px) and (orientation: landscape) {
	html,
	body {
		width: 100% !important;
		height: auto !important;
		min-height: 100dvh !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	body:not(.mobile-play-mode) {
		position: static !important;
		overflow-y: auto !important;
		touch-action: pan-y manipulation !important;
	}

	body:not(.mobile-play-mode) .container {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 100dvh !important;
		max-height: none !important;
		margin: 0 !important;
		padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
		overflow: visible !important;
		border-radius: 0 !important;
	}

	body:not(.mobile-play-mode) .hero-header {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 10px !important;
		margin-bottom: 8px !important;
	}

	body:not(.mobile-play-mode) .legend-panel {
		display: block !important;
		height: auto !important;
		min-height: auto !important;
		max-height: none !important;
		padding: 10px 10px calc(22px + env(safe-area-inset-bottom)) !important;
		overflow: visible !important;
		border-radius: 14px !important;
	}

	body:not(.mobile-play-mode) .legend-panel h2 {
		font-size: 1.15rem !important;
	}

	body:not(.mobile-play-mode) .legend-panel > p {
		font-size: 0.82rem !important;
		line-height: 1.2 !important;
		margin: 0 0 6px !important;
	}

	body:not(.mobile-play-mode) .legend-grid {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(145px, 1fr)) !important;
		gap: 8px !important;
		margin: 8px 0 !important;
		overflow: visible !important;
	}

	body:not(.mobile-play-mode) .legend-card {
		padding: 8px !important;
		border-radius: 12px !important;
		overflow: visible !important;
	}

	body:not(.mobile-play-mode) .legend-card li {
		font-size: 0.72rem !important;
		line-height: 1.08 !important;
		padding: 3px 0 !important;
	}

	body:not(.mobile-play-mode) .character-select,
	body:not(.mobile-play-mode) .difficulty-select {
		margin: 8px 0 !important;
		padding: 8px !important;
	}

	body:not(.mobile-play-mode) .character-options,
	body:not(.mobile-play-mode) .difficulty-options {
		flex-wrap: wrap !important;
		gap: 8px !important;
	}

	body:not(.mobile-play-mode) .character-option,
	body:not(.mobile-play-mode) .difficulty-option {
		min-height: 52px !important;
		padding: 6px 8px !important;
	}

	body:not(.mobile-play-mode) #startButton {
		display: flex !important;
		position: sticky !important;
		bottom: max(8px, env(safe-area-inset-bottom)) !important;
		z-index: 50 !important;
		width: min(100%, 340px) !important;
		margin: 10px auto 0 !important;
		box-shadow: 0 8px 24px rgba(6, 79, 117, 0.34) !important;
	}

	.page {
		width: 100% !important;
		min-height: 100dvh !important;
		padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
		overflow: visible !important;
	}

	.card {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		padding: 12px !important;
		border-radius: 14px !important;
	}

	.header-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 10px !important;
	}

	.header-row h1 {
		font-size: 1.3rem !important;
		margin-bottom: 4px !important;
	}

	.header-row p {
		font-size: 0.82rem !important;
		line-height: 1.2 !important;
		margin: 0 !important;
	}

	.link-button {
		position: sticky !important;
		top: max(8px, env(safe-area-inset-top)) !important;
		z-index: 40 !important;
		white-space: nowrap !important;
	}

	.highscore-level-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		padding-bottom: 20px !important;
	}

	.highscore-level-card {
		padding: 12px !important;
		border-radius: 14px !important;
		overflow: visible !important;
	}

	.table-wrap {
		width: 100% !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
		-webkit-overflow-scrolling: touch;
	}

	table {
		min-width: 520px !important;
		margin: 10px 0 !important;
	}
}

@media (pointer: coarse) and (orientation: portrait), (max-width: 920px) and (orientation: portrait) {
	html,
	body {
		overflow: hidden !important;
	}
}


/* Korrektur: Möwen greifen nur Pommes an, Wegwedeln nur in Nähe, normale Möwen fliegen oben am Himmel. */
.sky-seagull-layer {
	position: absolute;
	inset: 0;
	z-index: 8;
	pointer-events: none;
	overflow: hidden;
}

.sky-seagull {
	position: absolute;
	width: clamp(46px, 5vw, 78px);
	height: clamp(28px, 3.2vw, 48px);
	font-size: 0;
	opacity: 0.94;
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
}

.sky-seagull .seagull-svg {
	width: 100%;
	height: 100%;
}

.sky-seagull-right {
	left: -90px;
	animation: skySeagullRight linear forwards;
}

.sky-seagull-left {
	right: -90px;
	animation: skySeagullLeft linear forwards;
	transform: scaleX(-1);
}

@keyframes skySeagullRight {
	0% { transform: translateX(0) translateY(0) scale(0.72); opacity: 0; }
	12% { opacity: 1; }
	50% { transform: translateX(52vw) translateY(-14px) scale(0.9); opacity: 1; }
	100% { transform: translateX(calc(100vw + 180px)) translateY(5px) scale(0.78); opacity: 0; }
}

@keyframes skySeagullLeft {
	0% { transform: translateX(0) translateY(0) scaleX(-1) scale(0.72); opacity: 0; }
	12% { opacity: 1; }
	50% { transform: translateX(-52vw) translateY(-14px) scaleX(-1) scale(0.9); opacity: 1; }
	100% { transform: translateX(calc(-100vw - 180px)) translateY(5px) scaleX(-1) scale(0.78); opacity: 0; }
}

.seagull-attack.panic-escape {
	animation: seagullPanicEscape 1.15s ease-out forwards !important;
}

.seagull-attack.stolen-fry {
	animation: seagullStolenFryEscape 1.35s ease-out forwards !important;
}

@keyframes seagullPanicEscape {
	0% { transform: translate(0, 0) scale(1.02) rotate(0deg); opacity: 1; }
	35% { transform: translate(18px, -95px) scale(0.78) rotate(-18deg); opacity: 1; }
	100% { transform: translate(70px, -320px) scale(0.32) rotate(-34deg); opacity: 0; }
}

@keyframes seagullStolenFryEscape {
	0% { transform: translate(0, 0) scale(1.04) rotate(0deg); opacity: 1; }
	32% { transform: translate(36px, -92px) scale(0.86) rotate(16deg); opacity: 1; }
	100% { transform: translate(128px, -335px) scale(0.40) rotate(28deg); opacity: 0; }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 920px) and (orientation: landscape) {
	body:not(.mobile-play-mode),
	body:not(.mobile-play-mode) *,
	.page,
	.page *,
	.legend-panel,
	.legend-panel *,
	.highscore-level-grid,
	.highscore-level-grid *,
	.table-wrap,
	.table-wrap * {
		touch-action: pan-y !important;
	}

	body:not(.mobile-play-mode) a,
	body:not(.mobile-play-mode) button,
	body:not(.mobile-play-mode) label,
	.page a,
	.page button,
	.page label {
		touch-action: manipulation !important;
	}

	body:not(.mobile-play-mode) .container,
	.page,
	.card {
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior-y: contain;
	}
}

/* Korrekturen: Punkte-Popup konfigurierbar, Delfin gespiegelt und UFO-Strahl erst über dem Kopf. */
.score-popup-animate {
	animation-duration: var(--score-popup-duration, 1.8s) !important;
}

@keyframes scorePopupTopFlash {
	0% { transform: translateX(-50%) translateY(0) scale(0.65); opacity: 0; }
	12% { transform: translateX(-50%) translateY(0) scale(1.12); opacity: 1; }
	70% { transform: translateX(-50%) translateY(-18px) scale(1); opacity: 1; }
	100% { transform: translateX(-50%) translateY(-88px) scale(1.04); opacity: 0; }
}

.dolphin {
	transform-origin: center center !important;
}

.ufo-beam {
	transform-origin: 50% 0 !important;
}

.ufo-beam.beam-reflected {
	clip-path: polygon(42% 100%, 58% 100%, 49% 88%, 66% 77%, 45% 65%, 62% 52%, 39% 38%, 58% 25%, 35% 12%, 52% 0, 18% 0, 34% 13%, 17% 27%, 36% 39%, 20% 54%, 38% 66%, 23% 78%, 40% 90%) !important;
}

.life-display {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	z-index: 220;
	padding: 8px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.88);
	border: 2px solid rgba(133, 88, 19, 0.55);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
	font-weight: 900;
	font-size: clamp(0.95rem, 2.5vw, 1.25rem);
	color: #3c2608;
	pointer-events: none;
}

.life-display span {
	color: #c70000;
}


/* Fix 07.05.: Möwe flattert kurz vor den Pommes; Wegwedeln nur in dieser Phase; gelber Pommes-Stick im Schnabel. */
.seagull-defense-button.hidden {
	display: none !important;
}

.seagull-attack.hovering-fries {
	filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.32));
}

.seagull-attack.hovering-fries .seagull-svg {
	animation: seagullHoverNearFries 0.12s linear infinite alternate !important;
}

.seagull-attack.hovering-fries .wing-left,
.seagull-attack.hovering-fries .wing-right {
	animation: seagullFrenzyWingBeat 0.075s linear infinite alternate !important;
}

@keyframes seagullHoverNearFries {
	from { transform: translate(-4px, -2px) rotate(-9deg) scale(1.02); }
	to { transform: translate(5px, 3px) rotate(10deg) scale(1.08); }
}

@keyframes seagullFrenzyWingBeat {
	from { transform: rotate(-24deg); }
	to { transform: rotate(28deg); }
}

.seagull-svg .stolen-fry-stick {
	filter: drop-shadow(0 1px 1px rgba(90, 50, 0, 0.35));
}

.seagull-attack.stolen-fry .seagull-svg .stolen-fry-stick,
.fries-bird .seagull-svg .stolen-fry-stick {
	display: block !important;
}

.seagull-attack.panic-escape .seagull-svg {
	animation: seagullFrenzyWingBeatWhole 0.08s linear infinite alternate !important;
}

@keyframes seagullFrenzyWingBeatWhole {
	from { transform: rotate(-12deg) scale(1.05); }
	to { transform: rotate(16deg) scale(0.96); }
}

/* Korrektur 08.05.: Smartphone-Querformat mit normalem Ein-Finger-Scroll auf Legende und Highscores. */
@media (pointer: coarse) and (orientation: landscape), (max-width: 920px) and (orientation: landscape) {
	html {
		height: 100% !important;
		min-height: 100% !important;
		overflow: hidden !important;
		touch-action: pan-y !important;
	}

	body:not(.mobile-play-mode) {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		height: 100dvh !important;
		min-height: 100dvh !important;
		max-height: 100dvh !important;
		margin: 0 !important;
		overflow: hidden !important;
		touch-action: pan-y !important;
		overscroll-behavior-y: auto !important;
	}

	body:not(.mobile-play-mode) > main.container,
	body:not(.mobile-play-mode) > main.page,
	body:not(.mobile-play-mode) .container,
	body:not(.mobile-play-mode) .page {
		position: relative !important;
		display: block !important;
		width: 100vw !important;
		max-width: none !important;
		height: 100dvh !important;
		min-height: 0 !important;
		max-height: 100dvh !important;
		margin: 0 !important;
		padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(44px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
		overflow-x: hidden !important;
		overflow-y: scroll !important;
		-webkit-overflow-scrolling: touch !important;
		touch-action: pan-y !important;
		overscroll-behavior-y: contain !important;
		border-radius: 0 !important;
	}

	body:not(.mobile-play-mode) .legend-panel,
	body:not(.mobile-play-mode) .card,
	body:not(.mobile-play-mode) .highscore-level-card {
		height: auto !important;
		min-height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		touch-action: pan-y !important;
	}

	body:not(.mobile-play-mode) .legend-grid {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(145px, 1fr)) !important;
		gap: 8px !important;
		overflow: visible !important;
	}

	body:not(.mobile-play-mode) .character-options,
	body:not(.mobile-play-mode) .difficulty-options {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
	}

	body:not(.mobile-play-mode) .highscore-level-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		padding-bottom: calc(36px + env(safe-area-inset-bottom)) !important;
		overflow: visible !important;
	}

	body:not(.mobile-play-mode) .table-wrap {
		overflow-x: auto !important;
		overflow-y: visible !important;
		-webkit-overflow-scrolling: touch !important;
		touch-action: pan-x pan-y !important;
	}

	body:not(.mobile-play-mode) #startButton,
	body:not(.mobile-play-mode) .link-button {
		position: relative !important;
		bottom: auto !important;
		top: auto !important;
		z-index: 20 !important;
		margin-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
		touch-action: manipulation !important;
	}

	body:not(.mobile-play-mode) a,
	body:not(.mobile-play-mode) button,
	body:not(.mobile-play-mode) input,
	body:not(.mobile-play-mode) label {
		touch-action: manipulation !important;
	}
}

/* Korrektur 09.05.: Einzelpalme, Pommes-Möwe, Krabbe. */
.foreground-palm:not(.palm-bush) .palm-tree-middle .palm-leaf {
	left: 50% !important;
	top: 17% !important;
	transform-origin: 0 50% !important;
}

.foreground-palm:not(.palm-bush) .palm-tree-middle .palm-trunk {
	left: calc(50% - 22px) !important;
}

.seagull-attack.stolen-fry-corner {
	transition: left 1.45s ease-in, top 1.45s ease-in, transform 1.45s ease-in, opacity 1.45s ease-in !important;
	z-index: 1320 !important;
}

.crab {
	position: absolute;
	bottom: 30px;
	width: clamp(44px, 5.2vw, 72px);
	height: clamp(34px, 4.2vw, 58px);
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1;
	z-index: 180;
	pointer-events: none;
	filter: hue-rotate(330deg) saturate(1.8) drop-shadow(0 5px 3px rgba(80, 35, 0, 0.35));
	animation: crabWalkWiggle 0.36s ease-in-out infinite alternate;
}

.crab.hidden {
	display: none !important;
}

.crab.crab-kicked {
	transition: left 0.92s ease-out, bottom 0.92s ease-out, transform 0.92s ease-out, opacity 0.92s ease-out !important;
	animation: none !important;
	opacity: 0;
	z-index: 1500;
}

@keyframes crabWalkWiggle {
	from { transform: scaleX(-1) translateY(0) rotate(-4deg); }
	to { transform: scaleX(-1) translateY(-3px) rotate(4deg); }
}

.crab-kick-button {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1260;
	padding: 10px 14px;
	border: 3px solid #ffffff;
	border-radius: 999px;
	background: linear-gradient(135deg, #ffdf8d, #e61f1f);
	color: #fff8d8;
	font-size: clamp(0.95rem, 2.2vw, 1.25rem);
	font-weight: 1000;
	text-shadow: 0 2px 0 rgba(75, 0, 0, 0.5);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	touch-action: manipulation;
}

.crab-kick-button.hidden {
	display: none !important;
}

.runner.kicking-crab .leg-right {
	animation: crabKickLeg 0.14s linear infinite alternate !important;
	transform-origin: top center !important;
}

@keyframes crabKickLeg {
	from { transform: rotate(20deg); }
	to { transform: rotate(-78deg); }
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 920px) and (orientation: landscape) {
	.crab-kick-button {
		top: max(8px, env(safe-area-inset-top));
		right: max(8px, env(safe-area-inset-right));
		padding: 8px 12px;
		font-size: clamp(0.85rem, 3.5vh, 1.1rem);
	}
}

/* Korrektur 1.0.1: Version, Spielfiguren, Futurama-artige Alu-Mütze und Button-Sprungschutz. */
.legend-panel,
.highscore-card {
	position: relative;
}

.version-badge {
	position: absolute;
	top: 10px;
	right: 14px;
	z-index: 80;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(11, 91, 124, 0.18);
	color: rgba(38, 50, 56, 0.72);
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

.highscore-version {
	top: 12px;
	right: 16px;
}

.new-game-button {
	min-width: 128px;
	white-space: nowrap;
}

.runner {
	isolation: isolate !important;
}

.runner-female .runner-hair {
	display: block !important;
	position: absolute !important;
	left: 10px !important;
	top: -2px !important;
	width: 44px !important;
	height: 76px !important;
	border-radius: 24px 24px 30px 30px !important;
	background:
		radial-gradient(ellipse at 24% 18%, rgba(132, 75, 43, 0.95) 0 14px, transparent 15px),
		linear-gradient(115deg, #8b5737 0%, #6d3f27 45%, #4a2819 100%) !important;
	border: 2px solid rgba(58, 34, 22, 0.78) !important;
	box-shadow: inset -7px -8px 0 rgba(53, 28, 17, 0.22) !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

.runner-female .runner-head {
	z-index: 4 !important;
}

.runner-female .runner-bow {
	display: block !important;
	position: absolute !important;
	left: 0px !important;
	top: -10px !important;
	width: 31px !important;
	height: 22px !important;
	z-index: 30 !important;
	transform: rotate(-18deg) !important;
	transform-origin: center center !important;
	background:
		radial-gradient(ellipse at 7px 11px, #ff9bd6 0 8px, transparent 9px),
		radial-gradient(ellipse at 24px 11px, #ff9bd6 0 8px, transparent 9px),
		radial-gradient(circle at 15px 11px, #db2e88 0 5px, transparent 6px) !important;
	filter: drop-shadow(0 1px 1px rgba(70, 0, 35, 0.38)) !important;
	pointer-events: none !important;
}

.mini-character-runner.runner-female .runner-hair {
	display: block !important;
}

.mini-character-runner.runner-female .runner-bow {
	display: block !important;
}

.runner.helmet-on::before {
	content: "";
	position: absolute;
	left: 5px;
	top: -18px;
	width: 58px;
	height: 43px;
	z-index: 40;
	border-radius: 52% 48% 38% 42% / 58% 56% 38% 34%;
	background:
		linear-gradient(145deg, rgba(255,255,255,0.98) 0 9%, transparent 10%),
		linear-gradient(45deg, transparent 0 18%, rgba(103,114,124,0.55) 19% 22%, transparent 23% 100%),
		linear-gradient(125deg, transparent 0 35%, rgba(255,255,255,0.9) 36% 43%, transparent 44% 100%),
		linear-gradient(72deg, transparent 0 58%, rgba(94,104,113,0.58) 59% 64%, transparent 65% 100%),
		linear-gradient(160deg, #f7fbff 0%, #aeb8c1 28%, #f9fcff 43%, #7d8790 64%, #d7e0e7 100%);
	border: 3px solid #4d5861;
	clip-path: polygon(8% 40%, 17% 13%, 38% 0%, 55% 8%, 73% 2%, 91% 25%, 96% 55%, 85% 76%, 66% 72%, 54% 88%, 36% 73%, 17% 79%);
	box-shadow: inset 6px 8px 0 rgba(255,255,255,0.5), inset -8px -10px 0 rgba(70,80,90,0.24), 0 2px 2px rgba(0,0,0,0.18);
	pointer-events: none;
}

.runner.helmet-on::after {
	content: "";
	position: absolute;
	left: -1px;
	top: 6px;
	width: 70px;
	height: 21px;
	z-index: 39;
	background:
		linear-gradient(120deg, #cad4dc 0%, #ffffff 35%, #8b97a1 64%, #dce5ec 100%);
	border: 3px solid #4d5861;
	clip-path: polygon(0 35%, 16% 5%, 33% 42%, 50% 8%, 69% 45%, 87% 10%, 100% 42%, 91% 86%, 72% 70%, 53% 98%, 35% 72%, 16% 91%);
	box-shadow: inset 0 5px 0 rgba(255,255,255,0.52);
	pointer-events: none;
}

.runner.helmet-on .runner-bow {
	z-index: 42 !important;
}

.runner.helmet-on .runner-hair {
	filter: brightness(0.72) !important;
}

@media (pointer: coarse) and (orientation: landscape), (max-width: 920px) and (orientation: landscape) {
	.version-badge {
		top: max(6px, env(safe-area-inset-top));
		right: max(8px, env(safe-area-inset-right));
		font-size: 0.64rem;
		padding: 2px 6px;
	}
}


/* Korrektur 1.0.1a: Alu-Mütze höher, Copyright, Verlassen-Button, Krabben-Legende. */
.header-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
}

.exit-game-button {
	background: #fff4e6;
	border-color: #f0c27c;
	color: #86530d;
}

.version-badge {
	border-radius: 12px !important;
	text-align: right;
	line-height: 1.25 !important;
}

.inline-points {
	width: auto !important;
	font-size: inherit !important;
	font-weight: 700;
	color: #936200;
}

/* Die Alu-Mütze sitzt höher, damit die Augen sichtbar bleiben. Sie ragt rund-spitz nach oben. */
.runner.helmet-on::before {
	left: 8px !important;
	top: -23px !important;
	width: 52px !important;
	height: 38px !important;
	z-index: 38 !important;
	border-radius: 48% 52% 42% 44% / 72% 70% 28% 30% !important;
	clip-path: polygon(8% 67%, 15% 35%, 31% 15%, 45% 3%, 57% 13%, 73% 8%, 90% 35%, 96% 68%, 82% 88%, 63% 79%, 51% 94%, 36% 80%, 17% 88%) !important;
}

.runner.helmet-on::after {
	left: 7px !important;
	top: 6px !important;
	width: 54px !important;
	height: 10px !important;
	z-index: 37 !important;
	border-width: 2px !important;
	clip-path: polygon(2% 15%, 22% 0%, 37% 26%, 53% 0%, 70% 30%, 91% 3%, 99% 28%, 91% 82%, 71% 66%, 54% 96%, 36% 66%, 15% 87%) !important;
}

.runner.helmet-on .runner-head::before,
.runner.helmet-on .runner-head::after {
	z-index: 60 !important;
}

.runner.helmet-on .runner-bow {
	z-index: 62 !important;
}

@media (max-width: 720px) {
	.header-actions {
		justify-content: flex-start;
	}
}

/* Korrektur 1.0.1b: Smartphone muss exakt dieselben Figuren, Legendenpunkte und Versionsbox wie Desktop zeigen. */
.legend-card .inline-points,
.legend-card li .inline-points,
body:not(.mobile-play-mode) .legend-card li .inline-points,
body.mobile-play-mode .legend-card li .inline-points {
	display: inline !important;
	width: auto !important;
	min-width: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: 700 !important;
	text-align: left !important;
	white-space: nowrap !important;
	color: #936200 !important;
}

@media (pointer: coarse), (max-width: 920px) {
	.version-badge,
	.highscore-version {
		top: 10px !important;
		right: 14px !important;
		padding: 3px 8px !important;
		font-size: 0.72rem !important;
		font-weight: 800 !important;
		line-height: 1.25 !important;
		border-radius: 12px !important;
		text-align: right !important;
		white-space: nowrap !important;
	}

	/* Dieselbe weibliche Spielfigur wie auf dem Desktop: Haare hinter dem Kopf, Schleife davor. */
	.runner-female .runner-hair,
	.mini-character-runner.runner-female .runner-hair,
	body.mobile-play-mode .runner-female .runner-hair {
		display: block !important;
		position: absolute !important;
		left: 10px !important;
		top: -2px !important;
		width: 44px !important;
		height: 76px !important;
		border-radius: 24px 24px 30px 30px !important;
		background:
			radial-gradient(ellipse at 24% 18%, rgba(132, 75, 43, 0.95) 0 14px, transparent 15px),
			linear-gradient(115deg, #8b5737 0%, #6d3f27 45%, #4a2819 100%) !important;
		border: 2px solid rgba(58, 34, 22, 0.78) !important;
		box-shadow: inset -7px -8px 0 rgba(53, 28, 17, 0.22) !important;
		z-index: 1 !important;
		pointer-events: none !important;
	}

	.runner-female .runner-head,
	.mini-character-runner.runner-female .runner-head,
	body.mobile-play-mode .runner-female .runner-head {
		z-index: 4 !important;
	}

	.runner-female .runner-head::before,
	.mini-character-runner.runner-female .runner-head::before,
	body.mobile-play-mode .runner-female .runner-head::before {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		left: 8px !important;
		top: 11px !important;
		width: 4px !important;
		height: 4px !important;
		border-radius: 50% !important;
		background: #3b2b22 !important;
		border: none !important;
		box-shadow: none !important;
		z-index: 60 !important;
	}

	.runner-female .runner-head::after,
	.mini-character-runner.runner-female .runner-head::after,
	body.mobile-play-mode .runner-female .runner-head::after {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		right: 8px !important;
		top: 11px !important;
		width: 4px !important;
		height: 4px !important;
		border-radius: 50% !important;
		background: #3b2b22 !important;
		border: none !important;
		box-shadow: none !important;
		z-index: 60 !important;
	}

	.runner-female .runner-bow,
	.mini-character-runner.runner-female .runner-bow,
	body.mobile-play-mode .runner-female .runner-bow {
		display: block !important;
		position: absolute !important;
		left: 0px !important;
		top: -10px !important;
		width: 31px !important;
		height: 22px !important;
		z-index: 62 !important;
		transform: rotate(-18deg) !important;
		transform-origin: center center !important;
		background:
			radial-gradient(ellipse at 7px 11px, #ff9bd6 0 8px, transparent 9px),
			radial-gradient(ellipse at 24px 11px, #ff9bd6 0 8px, transparent 9px),
			radial-gradient(circle at 15px 11px, #db2e88 0 5px, transparent 6px) !important;
		filter: drop-shadow(0 1px 1px rgba(70, 0, 35, 0.38)) !important;
		pointer-events: none !important;
	}

	.mini-character-runner {
		position: relative !important;
		left: auto !important;
		bottom: auto !important;
		width: 56px !important;
		height: 122px !important;
		flex: 0 0 42px !important;
		transform: scale(0.58) !important;
		transform-origin: left top !important;
		z-index: 1 !important;
		margin-right: -10px !important;
	}

	.mini-character-runner .runner-head,
	.mini-character-runner .runner-neck,
	.mini-character-runner .runner-torso,
	.mini-character-runner .runner-arm,
	.mini-character-runner .runner-leg {
		position: absolute !important;
	}
}

/* Korrektur 1.0.1c: Spielobjekte sehen auf Desktop und Smartphone wie die Desktop-Legende aus. */
.obstacle-jellyfish .jellyfish-game-svg,
body.mobile-play-mode .obstacle-jellyfish .jellyfish-game-svg {
	width: 64px !important;
	height: 64px !important;
}

.collectible-towel .towel-game-svg,
.collectible-foil .foil-game-svg,
body.mobile-play-mode .collectible-towel .towel-game-svg,
body.mobile-play-mode .collectible-foil .foil-game-svg {
	width: 64px !important;
	height: 64px !important;
}

body.mobile-play-mode .obstacle,
body.mobile-play-mode .collectible {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", Arial, sans-serif !important;
}

.crab,
body.mobile-play-mode .crab {
	filter: drop-shadow(0 5px 3px rgba(80, 35, 0, 0.35)) !important;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", Arial, sans-serif !important;
}