/* Pastell Pixelmonster – alles unter .ppm, damit Themes nicht reinfunken */
.ppm {
	--ppm-ink: #6b3a4f;
	--ppm-text: #7a4a5a;
	--ppm-frame: #f9dfe4;
	--ppm-frame-2: #f3c9d2;
	--ppm-cream: #fff8f3;
	--ppm-line: #e7b3bf;
	--ppm-pink: #f78fab;
	--ppm-pink-2: #e9708f;
	--ppm-blue: #8fd0f5;
	--ppm-blue-bg: #e6f5fd;
	--ppm-px: 3px;
	font-family: ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.3;
	color: var(--ppm-text);
	max-width: 340px;
	margin: 0 auto;
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
}
.ppm.ppm-size-small { font-size: 12px; max-width: 260px; --ppm-px: 2px; }
.ppm.ppm-size-large { font-size: 16px; max-width: 480px; }
.ppm.ppm-size-full { font-size: 16px; max-width: none; }
.ppm *, .ppm *::before, .ppm *::after { box-sizing: border-box; }

/* Theme-Button-Styles neutralisieren */
.ppm button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.2;
	box-shadow: none;
	min-height: 0;
	width: auto;
	cursor: pointer;
	border-radius: 0;
}
.ppm button:disabled { cursor: default; }
.ppm button:focus-visible { outline: 3px solid var(--ppm-blue); outline-offset: 2px; }

.ppm-ic { display: block; width: 1.25em; height: 1.25em; image-rendering: pixelated; }

/* Rahmen mit Pixel-Ecken */
.ppm-frame {
	position: relative;
	background: var(--ppm-frame);
	padding: 0.55em;
	margin: var(--ppm-px);
	box-shadow:
		0 calc(-1 * var(--ppm-px)) 0 0 var(--ppm-ink),
		0 var(--ppm-px) 0 0 var(--ppm-ink),
		calc(-1 * var(--ppm-px)) 0 0 0 var(--ppm-ink),
		var(--ppm-px) 0 0 0 var(--ppm-ink),
		inset 0 calc(-1 * var(--ppm-px)) 0 0 var(--ppm-frame-2);
}

/* Kopfzeile */
.ppm-top {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 0.45em;
}
.ppm-hearts {
	display: flex;
	gap: 0.15em;
	padding: 0.3em 0.45em;
	background: var(--ppm-cream);
	border: 2px solid var(--ppm-line);
	border-radius: 0.5em;
}
.ppm-hearts .ppm-ic { width: 1.05em; height: 1.05em; }
.ppm-lvl {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 700;
	font-size: 0.85em;
	white-space: nowrap;
	min-width: 0;
}
.ppm-xp {
	flex: 1;
	height: 0.7em;
	background: var(--ppm-cream);
	border: 2px solid var(--ppm-ink);
	border-radius: 1em;
	overflow: hidden;
	min-width: 2em;
}
.ppm-xp i { display: block; height: 100%; width: 0; background: var(--ppm-blue); transition: width 0.4s; }
.ppm-iconbtn {
	display: grid;
	place-items: center;
	width: 2em;
	height: 2em;
	background: var(--ppm-cream) !important;
	border: 2px solid var(--ppm-line) !important;
	border-radius: 0.45em !important;
	flex: none;
}
.ppm-iconbtn .ppm-ic { width: 1em; height: 1em; }

/* Bühne */
.ppm-stage {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 2px solid var(--ppm-line);
	border-radius: 0.3em;
	background: #cbe8f5;
	user-select: none;
	-webkit-user-select: none;
}
@supports not (aspect-ratio: 1) {
	.ppm-stage { height: 0; padding-top: 75%; }
}
.ppm-bg {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	display: block;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}
.ppm-sp { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.ppm .ppm-mon {
	position: absolute;
	left: 50%;
	bottom: 5%;
	width: 45%;
	transform: translateX(-50%);
	touch-action: manipulation;
	z-index: 1;
}
.ppm-mon-body {
	position: relative;
	display: block;
	transform-origin: 50% 100%;
	animation: ppm-bob 1.2s steps(2) infinite;
	filter: drop-shadow(0 0.25em 0 rgba(80, 60, 70, 0.16));
}
.ppm-mon-img {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
}
.ppm-acc {
	position: absolute;
	height: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
}
.ppm-acc[hidden] { display: none; }
.ppm-gold { filter: sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.08); }
.ppm-is-shiny .ppm-mon::before {
	content: "";
	position: absolute;
	top: -6%; right: -6%; bottom: 0; left: -6%;
	z-index: 1;
	background:
		radial-gradient(circle, #fff3b0 0 2px, transparent 3px) 10% 20% / 30% 30%,
		radial-gradient(circle, #ffffff 0 1.5px, transparent 2.5px) 60% 70% / 26% 26%;
	animation: ppm-sparkle 1.6s steps(3) infinite;
	pointer-events: none;
}
.ppm-crack {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	pointer-events: none;
}
.ppm-crack[hidden] { display: none; }
@keyframes ppm-bob { 50% { transform: translateY(-3%); } }
.ppm-is-egg .ppm-mon-body { animation: none; }
.ppm-is-sleeping .ppm-mon-body { animation: ppm-breathe 3s ease-in-out infinite; filter: brightness(0.82) saturate(0.85) drop-shadow(0 0.25em 0 rgba(0, 0, 0, 0.2)); }
@keyframes ppm-breathe { 50% { transform: scale(1.03, 0.97); } }
.ppm-is-sick .ppm-mon-body { filter: sepia(0.35) hue-rotate(50deg) saturate(0.8) drop-shadow(0 0.25em 0 rgba(80, 60, 70, 0.16)); animation-duration: 2.4s; }
.ppm-is-sad .ppm-mon-body { filter: grayscale(0.45) drop-shadow(0 0.25em 0 rgba(80, 60, 70, 0.16)); animation-duration: 2.4s; }
.ppm-is-buffed .ppm-mon::after {
	content: "";
	position: absolute;
	top: -8%; right: -8%; bottom: 0; left: -8%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 2px, transparent 3px) 0 0 / 22% 22%;
	animation: ppm-sparkle 1.2s steps(3) infinite;
	pointer-events: none;
}
@keyframes ppm-sparkle { 50% { opacity: 0.3; background-position: 6% 8%; } }
.ppm-mon.ppm-pop { animation: ppm-pop 0.18s steps(2); }
@keyframes ppm-pop { 50% { transform: translateX(-50%) scale(1.07, 0.93); } }
.ppm-mon.ppm-hop { animation: ppm-hopk 0.5s steps(4); }
@keyframes ppm-hopk { 40% { transform: translateX(-50%) translateY(-12%); } 70% { transform: translateX(-50%) scale(1.06, 0.95); } }
.ppm-mon.ppm-wobble { animation: ppm-wob 0.36s steps(4); }
@keyframes ppm-wob { 25% { transform: translateX(-50%) rotate(-8deg); } 75% { transform: translateX(-50%) rotate(8deg); } }

.ppm-bubble {
	position: absolute;
	right: 12%;
	top: 22%;
	z-index: 2;
	padding: 0.3em;
	background: #fff;
	border: 2px solid var(--ppm-ink);
	border-radius: 0.5em;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.2s, transform 0.2s steps(3);
	pointer-events: none;
}
.ppm-bubble::after {
	content: "";
	position: absolute;
	left: 0.4em;
	bottom: -0.55em;
	width: 0.5em;
	height: 0.5em;
	background: #fff;
	border: 2px solid var(--ppm-ink);
	border-top: 0;
	border-right: 0;
	transform: skewY(-35deg);
}
.ppm-bubble.ppm-on { opacity: 1; transform: none; }
.ppm-bubble .ppm-ic { width: 1.3em; height: 1.3em; }
.ppm-bubble .ppm-sp { width: 1.9em; }

.ppm-stars {
	position: absolute;
	left: 0.4em;
	top: 0.4em;
	display: flex;
	align-items: center;
	gap: 0.25em;
	padding: 0.15em 0.5em 0.15em 0.35em;
	background: rgba(255, 248, 243, 0.92);
	border: 2px solid var(--ppm-line);
	border-radius: 1em;
	font-weight: 800;
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
}
.ppm-stars small { font-weight: 600; font-size: 0.78em; opacity: 0.75; }
.ppm-stars, .ppm-name { z-index: 2; }
.ppm-dia { width: 1.15em; margin-left: 0.3em; }

/* Schatztruhe + Geschenk */
.ppm .ppm-chest, .ppm .ppm-gift {
	position: absolute;
	z-index: 2;
	width: 17%;
	filter: drop-shadow(0 0 0.35em rgba(255, 240, 160, 0.95));
}
.ppm .ppm-chest[hidden], .ppm .ppm-gift[hidden] { display: none; }
.ppm .ppm-chest { animation: ppm-chest 0.8s steps(2) infinite; }
@keyframes ppm-chest { 50% { transform: translateY(-10%) rotate(-4deg); } }
.ppm .ppm-gift { right: 3%; bottom: 4%; width: 15%; animation: ppm-chest 1.4s steps(2) infinite; }
.ppm-name {
	position: absolute;
	right: 0.4em;
	top: 0.4em;
	max-width: 50%;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 2px solid var(--ppm-line);
	padding: 0.05em 0.6em;
	background: rgba(255, 248, 243, 0.85);
	border-radius: 1em;
	font-size: 0.78em;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
}

/* Effekte */
.ppm-fx { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.ppm-float {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.15em;
	transform: translate(-50%, 0);
	font-weight: 800;
	font-size: 0.95em;
	color: #fff;
	text-shadow: 0 2px 0 var(--ppm-ink), 2px 0 0 var(--ppm-ink), -2px 0 0 var(--ppm-ink), 0 -2px 0 var(--ppm-ink);
	animation: ppm-rise 0.9s steps(8) forwards;
}
.ppm-float .ppm-ic { width: 0.9em; height: 0.9em; }
.ppm-float.ppm-crit { font-size: 1.35em; color: #fff3a8; }
@keyframes ppm-rise {
	to { transform: translate(-50%, -2.4em); opacity: 0; }
}
.ppm-particle {
	position: absolute;
	top: 35%;
	width: 2em;
	animation: ppm-drift 1.2s steps(10) forwards;
}
@keyframes ppm-drift {
	0% { transform: translateY(0) scale(0.6); opacity: 0; }
	20% { opacity: 1; transform: translateY(-0.4em) scale(1); }
	100% { transform: translateY(-3em) scale(1); opacity: 0; }
}
.ppm-say {
	position: absolute;
	left: 50%;
	top: 18%;
	transform: translateX(-50%);
	padding: 0.25em 0.6em;
	background: #fff;
	border: 2px solid var(--ppm-ink);
	border-radius: 0.6em;
	font-size: 0.8em;
	font-weight: 700;
	white-space: nowrap;
	animation: ppm-fade 1.4s forwards;
}
@keyframes ppm-fade { 80% { opacity: 1; } 100% { opacity: 0; } }
.ppm-flash .ppm-stage::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: #fff;
	animation: ppm-flash 0.7s steps(5) forwards;
	pointer-events: none;
}
@keyframes ppm-flash { to { opacity: 0; } }

/* Aktionen */
.ppm-actions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.35em;
	margin-top: 0.45em;
}
.ppm .ppm-act {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2em;
	padding: 0.5em 0.1em 0.4em;
	background: var(--ppm-cream);
	border: 2px solid var(--ppm-line);
	border-radius: 0.5em;
	font-size: 0.78em;
	font-weight: 700;
	overflow: hidden;
	transition: transform 0.08s;
}
.ppm .ppm-act .ppm-sp { width: 2.1em; height: 2.1em; object-fit: contain; }
.ppm .ppm-act:active:not(:disabled) { transform: translateY(2px); }
.ppm .ppm-act:disabled { opacity: 0.5; }
.ppm .ppm-act.ppm-active { background: var(--ppm-blue-bg); border-color: var(--ppm-blue); box-shadow: inset 0 0 0 1px var(--ppm-blue); }
.ppm .ppm-act.ppm-need { border-color: var(--ppm-pink); animation: ppm-nudge 1.6s steps(2) infinite; }
@keyframes ppm-nudge { 50% { background: #ffe8ee; } }
.ppm-cd {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 0;
	background: var(--ppm-blue);
}
.ppm-act.ppm-cooling .ppm-cd { animation: ppm-cd 2.5s linear forwards; }
@keyframes ppm-cd { from { width: 100%; } to { width: 0; } }

/* Menü */
.ppm-panel {
	position: absolute;
	left: 0.55em;
	right: 0.55em;
	top: 3em;
	bottom: 0.55em;
	z-index: 3;
	display: flex;
	flex-direction: column;
	background: var(--ppm-cream);
	border: 2px solid var(--ppm-line);
	border-radius: 0.5em;
	overflow: hidden;
}
.ppm-panel[hidden] { display: none; }
.ppm-tabs { display: flex; border-bottom: 2px solid var(--ppm-line); overflow-x: auto; scrollbar-width: none; flex: none; }
.ppm-tabs::-webkit-scrollbar { display: none; }
.ppm .ppm-tab { flex: 1 0 auto; padding: 0.55em 0.6em; font-weight: 700; font-size: 0.82em; white-space: nowrap; }
.ppm .ppm-tab[aria-selected="true"] { background: var(--ppm-frame); }
.ppm-panel-body { flex: 1; overflow-y: auto; padding: 0.7em; font-size: 0.85em; }

.ppm-stat { display: grid; grid-template-columns: 1.5em 4.6em 1fr; align-items: center; gap: 0.4em; margin-bottom: 0.45em; }
.ppm-stat .ppm-sp { width: 1.5em; height: 1.5em; object-fit: contain; }
.ppm-bar { height: 0.75em; border: 2px solid var(--ppm-ink); border-radius: 1em; background: #fff; overflow: hidden; }
.ppm-bar i { display: block; height: 100%; background: #9fdc8e; transition: width 0.4s; }
.ppm-bar i.ppm-low { background: var(--ppm-pink); }

.ppm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3em 0.8em; margin: 0.7em 0; }
.ppm-facts div { margin: 0; }
.ppm-facts dt { font-size: 0.8em; opacity: 0.75; margin: 0; }
.ppm-facts dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }

.ppm-field { display: grid; gap: 0.2em; margin: 0.6em 0; font-weight: 700; }
.ppm .ppm-field input {
	font: inherit;
	color: var(--ppm-text);
	padding: 0.35em 0.5em;
	border: 2px solid var(--ppm-line);
	border-radius: 0.4em;
	background: #fff;
	width: 100%;
	margin: 0;
	box-shadow: none;
	height: auto;
}
.ppm .ppm-link { text-decoration: underline; font-size: 0.85em; opacity: 0.75; margin-top: 0.4em; }

.ppm-shop { list-style: none; margin: 0; padding: 0; }
.ppm-shop li {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45em 0;
	border-bottom: 2px dotted var(--ppm-line);
	margin: 0;
}
.ppm-shop li > div { flex: 1; min-width: 0; }
.ppm-shop b { display: block; }
.ppm-shop em { font-style: normal; font-weight: 600; font-size: 0.85em; color: var(--ppm-pink-2); }
.ppm-shop small { display: block; font-size: 0.85em; opacity: 0.8; }
.ppm .ppm-buy {
	display: flex;
	align-items: center;
	gap: 0.2em;
	padding: 0.35em 0.55em;
	background: var(--ppm-pink);
	color: #fff;
	font-weight: 800;
	border-radius: 0.5em;
	box-shadow: 0 3px 0 var(--ppm-pink-2);
	white-space: nowrap;
}
.ppm .ppm-buy .ppm-ic { width: 0.95em; height: 0.95em; }
.ppm .ppm-buy:disabled { background: #e2d6db; box-shadow: 0 3px 0 #cbbcc3; color: #fff; }

.ppm-evo figure { margin: 0; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; }
.ppm-evo figcaption {
	font-size: 0.8em;
	font-weight: 700;
	background: var(--ppm-frame);
	border-radius: 0.4em;
	padding: 0.1em 0;
}
.ppm-unknown .ppm-sp { filter: brightness(0) opacity(0.18); }

/* Sammlung */
.ppm-dex-sum { display: grid; gap: 0.15em; margin-bottom: 0.4em; }
.ppm-dex-sum span { font-size: 0.85em; opacity: 0.75; }
.ppm-dex-sum span:empty { display: none; }
.ppm-dex-group { display: flex; align-items: center; gap: 0.4em; margin: 0.8em 0 0.3em; font-size: 0.9em; }
.ppm-dex-egg { width: 1.2em; }
.ppm-dex { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3em; }
.ppm-dex li {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 0.25em 0.4em;
	background: #fff;
	border: 2px solid var(--ppm-line);
	border-radius: 0.6em;
}
.ppm-dex li.ppm-dex-done { border-color: #f5c96b; background: #fffaf0; }
.ppm-dex li.ppm-dex-new { background: transparent; border-style: dashed; }
.ppm-dex-name { flex: 1; min-width: 0; }
.ppm-dex-name b, .ppm-dex-name small { display: block; }
.ppm-dex-name small { font-size: 0.8em; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppm-dex-done .ppm-dex-name small { color: #c28a12; opacity: 1; font-weight: 700; }
.ppm-dex-stages { display: flex; gap: 0.15em; }
.ppm-dex-stages figure {
	margin: 0;
	width: 2.6em;
	height: 2.4em;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	border-radius: 0.4em;
}
.ppm-dex-stages figure.ppm-now { background: var(--ppm-frame); box-shadow: inset 0 -3px 0 var(--ppm-pink); }
.ppm-dex-stages span { display: block; width: calc(100% * var(--ppm-sc, 1)); }
.ppm-dex-stages .ppm-sp { width: 100%; max-height: 2.3em; object-fit: contain; object-position: 50% 100%; }
.ppm-hint { margin: 0.6em 0; font-size: 0.9em; }
.ppm-center { text-align: center; }

/* Entwicklung */
.ppm-evo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; align-items: end; }
.ppm-evo .ppm-sp { height: 3.4em; width: 100%; object-fit: contain; object-position: 50% 100%; margin-bottom: 0.2em; }
.ppm-evo .ppm-now figcaption { background: var(--ppm-pink); color: #fff; }

/* Vorrat */
.ppm-inv { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0.6em 0; }
.ppm-inv span { position: relative; width: 2.4em; }
.ppm-inv b { position: absolute; right: -0.2em; bottom: -0.2em; background: var(--ppm-ink); color: #fff; border-radius: 1em; font-size: 0.75em; padding: 0 0.35em; }

/* Eier */
.ppm-eggs { display: grid; gap: 0.4em; }
.ppm .ppm-eggbtn {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.45em 0.6em;
	background: #fff;
	border: 2px solid var(--ppm-line);
	border-radius: 0.6em;
	text-align: left;
}
.ppm .ppm-eggbtn:disabled { opacity: 0.55; }
.ppm-eggbtn > .ppm-sp { width: 2.2em; }
.ppm-eggbtn span { flex: 1; }
.ppm-eggbtn b, .ppm-eggbtn small { display: block; }
.ppm-eggbtn small { font-size: 0.85em; opacity: 0.8; }
.ppm-eggbtn em { display: flex; align-items: center; gap: 0.2em; font-style: normal; font-weight: 800; }
.ppm-eggbtn em .ppm-ic { width: 1em; height: 1em; }
.ppm-shop-ic { width: 2em; flex: none; display: grid; place-items: center; }
.ppm-shop-ic .ppm-ic { width: 1.4em; height: 1.4em; }

/* Item-Leiste */
.ppm-tray {
	position: absolute;
	left: 0.35em;
	right: 0.35em;
	bottom: 0.35em;
	z-index: 3;
	padding: 0.35em 0.45em 0.45em;
	background: rgba(255, 248, 243, 0.97);
	border: 2px solid var(--ppm-line);
	border-radius: 0.6em;
	animation: ppm-tray 0.16s steps(2);
}
.ppm-tray[hidden] { display: none; }
@keyframes ppm-tray { from { transform: translateY(20%); opacity: 0; } }
.ppm-tray-head, .ppm-share-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.82em; margin-bottom: 0.25em; }
.ppm .ppm-tray-x { display: grid; place-items: center; width: 1.7em; height: 1.7em; }
.ppm .ppm-tray-x .ppm-ic { width: 0.8em; height: 0.8em; }
.ppm-tray-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3em; }
.ppm .ppm-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.25em 0.1em;
	background: #fff;
	border: 2px solid var(--ppm-line);
	border-radius: 0.5em;
	font-size: 0.72em;
	font-weight: 700;
	min-width: 0;
}
.ppm .ppm-item:disabled { opacity: 0.5; }
.ppm .ppm-item:active:not(:disabled) { transform: translateY(2px); }
.ppm-item .ppm-sp { width: 2.6em; height: 2.6em; object-fit: contain; }
.ppm-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ppm-item small { display: flex; align-items: center; gap: 0.15em; font-weight: 800; color: var(--ppm-pink-2); }
.ppm-item small .ppm-ic { width: 0.9em; height: 0.9em; }

/* Teilen */
.ppm-share {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 0.7em;
	background: var(--ppm-frame);
	overflow-y: auto;
}
.ppm-share[hidden] { display: none; }
.ppm-share-head { font-size: 0.95em; }
.ppm-share > * { flex: none; }
.ppm-share-img { display: grid; place-items: center; min-height: 10em; }
.ppm-share-img img { display: block; width: auto; max-width: 100%; height: auto; max-height: 15.5em; border-radius: 0.4em; border: 2px solid var(--ppm-line); }
.ppm-share-row { display: flex; align-items: center; justify-content: center; gap: 0.9em; }
.ppm-share .ppm-open { text-decoration: none; }

.ppm .ppm-open {
	display: inline-flex;
	justify-content: center;
	padding: 0.45em 1.1em;
	background: var(--ppm-pink);
	color: #fff;
	font-weight: 800;
	border-radius: 0.5em;
	box-shadow: 0 3px 0 var(--ppm-pink-2);
}
.ppm .ppm-open:disabled { background: #e2d6db; box-shadow: 0 3px 0 #cbbcc3; }
.ppm .ppm-wide { width: 100%; }

.ppm-toast {
	position: absolute;
	left: 50%;
	bottom: 0.6em;
	z-index: 6;
	transform: translate(-50%, -0.5em);
	width: max-content;
	max-width: 90%;
	padding: 0.4em 0.8em;
	background: var(--ppm-ink);
	color: #fff;
	border-radius: 0.5em;
	font-size: 0.8em;
	font-weight: 700;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
}
.ppm-toast.ppm-on { opacity: 1; transform: translate(-50%, 0); }

.ppm-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Schwebend */
.ppm.ppm-floating {
	--ppm-ox: 12px;
	--ppm-oy: 16px;
	position: fixed;
	z-index: 99990;
	width: min(320px, calc(100vw - 24px));
	max-width: calc(100vw - var(--ppm-ox) - 8px);
	margin: 0;
}
.ppm.ppm-floating.ppm-pos-br { right: var(--ppm-ox); bottom: calc(var(--ppm-oy) + env(safe-area-inset-bottom, 0px)); }
.ppm.ppm-floating.ppm-pos-bl { left: var(--ppm-ox); bottom: calc(var(--ppm-oy) + env(safe-area-inset-bottom, 0px)); }
.ppm.ppm-floating.ppm-pos-tr { right: var(--ppm-ox); top: calc(var(--ppm-oy) + env(safe-area-inset-top, 0px)); }
.ppm.ppm-floating.ppm-pos-tl { left: var(--ppm-ox); top: calc(var(--ppm-oy) + env(safe-area-inset-top, 0px)); }
.ppm-pos-tr .ppm-dock, .ppm-pos-tl .ppm-dock { align-items: flex-start; }
@media (max-width: 600px) {
	.ppm.ppm-hide-mobile { display: none !important; }
}
.ppm.ppm-floating .ppm-frame { display: none; }
.ppm.ppm-floating.ppm-is-open .ppm-frame { display: block; }
.ppm.ppm-floating.ppm-is-open .ppm-dock { display: none; }
.ppm-dock { display: flex; align-items: flex-end; gap: 0.5em; justify-content: flex-end; }
.ppm-pos-bl .ppm-dock, .ppm-pos-tl .ppm-dock { flex-direction: row-reverse; }
.ppm .ppm-launcher {
	width: 4.2em;
	height: 4.2em;
	padding: 0.35em;
	background: var(--ppm-frame);
	border: 3px solid var(--ppm-ink);
	border-radius: 50%;
	flex: none;
}
.ppm-launcher img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ppm-callout {
	display: none;
	padding: 0.7em 0.8em;
	background: var(--ppm-cream);
	border: 3px solid var(--ppm-ink);
	border-radius: 0.6em;
	max-width: 13em;
}
.ppm-callout p { margin: 0 0 0.5em; font-weight: 800; line-height: 1.25; }
.ppm-calling .ppm-callout { display: block; }
.ppm-calling .ppm-launcher { animation: ppm-hop 1.2s steps(3) infinite; }
@keyframes ppm-hop { 50% { transform: translateY(-6px); } }

.ppm-flash .ppm-stage::after { z-index: 5; }
@media (prefers-reduced-motion: reduce) {
	.ppm *, .ppm *::before, .ppm *::after { animation: none !important; transition: none !important; }
	.ppm-float, .ppm-particle { display: none; }
}

/* Wetter */
.ppm-weather { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
.ppm-weather i {
	position: absolute;
	top: -6%;
	width: 3px;
	height: 3px;
	animation: ppm-fall 8s linear infinite;
}
.ppm-w-snow i { background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }
.ppm-w-petal i { background: #f7b4c8; width: 4px; height: 3px; }
.ppm-w-leaf i { background: #eb8f4f; width: 4px; height: 4px; }
.ppm-w-leaf i:nth-child(odd) { background: #f5b764; }
@keyframes ppm-fall {
	0% { top: -6%; transform: translateX(0) rotate(0); }
	50% { transform: translateX(14px) rotate(180deg); }
	100% { top: 104%; transform: translateX(-6px) rotate(360deg); }
}

/* Schrank */
.ppm-wardrobe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3em; }
.ppm .ppm-acc-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1em;
	padding: 0.35em 0.15em 0.3em;
	background: #fff;
	border: 2px solid var(--ppm-line);
	border-radius: 0.55em;
	font-size: 0.72em;
	font-weight: 700;
	min-width: 0;
}
.ppm .ppm-acc-btn:disabled { opacity: 0.5; }
.ppm .ppm-acc-btn.ppm-owned { background: #fffaf6; }
.ppm .ppm-acc-btn.ppm-worn { border-color: var(--ppm-pink); box-shadow: inset 0 0 0 1px var(--ppm-pink); background: #fff0f4; }
.ppm-acc-btn .ppm-sp { width: 2.8em; height: 2.4em; object-fit: contain; }
.ppm-acc-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ppm-acc-btn small { display: flex; align-items: center; gap: 0.2em; font-weight: 800; color: var(--ppm-pink-2); white-space: nowrap; }
.ppm-acc-btn small .ppm-ic { width: 0.85em; height: 0.85em; }
.ppm-acc-btn small .ppm-dia { width: 1em; margin: 0; }

/* Sammlung: goldene Variante */
.ppm-dex-stages .ppm-dex-gold { border-left: 2px dotted #f0d590; border-radius: 0 0.4em 0.4em 0; padding-left: 0.15em; }
.ppm-dex-stages .ppm-dex-gold.ppm-unknown .ppm-sp { filter: brightness(0) opacity(0.12); }

/* Erfolge */
.ppm-ach { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3em; }
.ppm-ach li {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.4em 0.5em;
	background: #fff;
	border: 2px solid var(--ppm-line);
	border-radius: 0.6em;
}
.ppm-ach li > .ppm-ic { width: 1em; height: 1em; flex: none; }
.ppm-ach .ppm-badge { width: 2.8em; height: 2.8em; object-fit: contain; flex: none; }
.ppm-ach .ppm-ach-locked .ppm-badge { filter: grayscale(1) opacity(0.35); }
.ppm-ach .ppm-ach-locked b { opacity: 0.8; }
.ppm-dex-group small { margin-left: auto; font-size: 0.85em; opacity: 0.7; }
.ppm-ach li > div { flex: 1; min-width: 0; }
.ppm-ach b, .ppm-ach small { display: block; }
.ppm-ach small { font-size: 0.82em; opacity: 0.8; }
.ppm-ach em { display: flex; align-items: center; gap: 0.15em; font-style: normal; font-weight: 800; font-size: 0.8em; white-space: nowrap; }
.ppm-ach em .ppm-dia { width: 1.1em; margin-left: 0.15em; }
.ppm-ach .ppm-ach-ok { border-color: #f5c96b; background: #fffaf0; }
.ppm-bar-s { height: 0.5em; margin-top: 0.25em; border-width: 1.5px; }

/* Tagebuch */
.ppm-diary { list-style: none; margin: 0; padding: 0 0 0 0.9em; border-left: 2px dotted var(--ppm-line); }
.ppm-diary li { position: relative; margin: 0 0 0.7em; }
.ppm-diary li::before {
	content: "";
	position: absolute;
	left: -1.25em;
	top: 0.3em;
	width: 0.55em;
	height: 0.55em;
	background: var(--ppm-pink);
	border-radius: 2px;
}
.ppm-diary b { margin-right: 0.4em; }
.ppm-diary small { opacity: 0.7; }
.ppm-diary p { margin: 0.1em 0 0; }

/* Erinnerungen */
.ppm-notify { display: flex; align-items: center; gap: 0.6em; margin: 0.8em 0 0.4em; padding: 0.5em 0.6em; background: #fff; border: 2px solid var(--ppm-line); border-radius: 0.6em; }
.ppm-notify > div { flex: 1; }
.ppm-notify b, .ppm-notify small { display: block; }
.ppm-notify small { font-size: 0.82em; opacity: 0.8; }
.ppm .ppm-switch {
	position: relative;
	width: 2.6em;
	height: 1.5em;
	flex: none;
	background: #e2d6db;
	border-radius: 1em;
	transition: background 0.15s;
}
.ppm .ppm-switch i {
	position: absolute;
	left: 0.2em;
	top: 0.2em;
	width: 1.1em;
	height: 1.1em;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.15s;
}
.ppm .ppm-switch[aria-checked="true"] { background: var(--ppm-pink); }
.ppm .ppm-switch[aria-checked="true"] i { transform: translateX(1.1em); }

/* Fangspiel */
.ppm-item-mini { background: #fff6e8 !important; }
.ppm-mini { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; display: grid; place-items: center; background: rgba(255, 248, 243, 0.35); }
.ppm-mini[hidden] { display: none; }
.ppm-mini-cv { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.ppm-mini-cv:focus-visible { outline: 3px solid var(--ppm-blue); outline-offset: -3px; }
.ppm-mini-hud {
	position: absolute;
	left: 0.4em;
	right: 0.4em;
	top: 0.4em;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	font-weight: 800;
}
.ppm-mini-hud span {
	display: flex;
	align-items: center;
	gap: 0.25em;
	padding: 0.1em 0.55em 0.1em 0.3em;
	background: rgba(255, 248, 243, 0.92);
	border: 2px solid var(--ppm-line);
	border-radius: 1em;
	font-variant-numeric: tabular-nums;
}
.ppm-mini-hud .ppm-sp { width: 1.2em; }
.ppm-mini-card {
	position: relative;
	max-width: 86%;
	padding: 0.8em 0.9em;
	background: var(--ppm-cream);
	border: 3px solid var(--ppm-ink);
	border-radius: 0.7em;
	text-align: center;
	display: grid;
	gap: 0.45em;
	justify-items: center;
}
.ppm-mini-card p { margin: 0; font-size: 0.85em; }

/* Erfolgs-Meldung mit Abzeichen */
.ppm-toast.ppm-toast-badge { display: flex; align-items: center; gap: 0.5em; text-align: left; padding: 0.35em 0.8em 0.35em 0.4em; }
.ppm-toast.ppm-toast-badge img { width: 2.6em; height: 2.6em; object-fit: contain; flex: none; animation: ppm-badge 0.5s steps(4); }
@keyframes ppm-badge { 0% { transform: scale(0.4) rotate(-15deg); } 60% { transform: scale(1.15) rotate(5deg); } }

/* Hinweis Spielstand */
.ppm-account { margin: 0.8em 0 0.4em; padding: 0.55em 0.65em; background: #fff8e6; border: 2px solid #f0d590; border-radius: 0.6em; }
.ppm-account b, .ppm-account small { display: block; }
.ppm-account small { font-size: 0.82em; opacity: 0.85; margin-top: 0.15em; }
.ppm-account-row { display: flex; align-items: center; gap: 0.9em; margin-top: 0.5em; }
.ppm-account a.ppm-open { text-decoration: none; padding: 0.3em 0.9em; font-size: 0.9em; }
.ppm-account-in { display: flex; align-items: center; gap: 0.5em; background: #f0f9ee; border-color: #bfe3b4; }
.ppm-account-in .ppm-ic { width: 1em; height: 1em; flex: none; }
.ppm-account-in small { margin: 0; }
.ppm a.ppm-link, .ppm a.ppm-link:visited { color: inherit; }

/* =========================================================
 * Design „Schlicht“ – ohne Pixel-Rahmen, für Boxen und Popups
 * ======================================================= */
.ppm.ppm-design-soft {
	--ppm-line: #f1dde3;
	font-family: inherit;
}
.ppm-design-soft .ppm-frame {
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin: 0;
}
.ppm-design-soft .ppm-top { margin-bottom: 0.6em; gap: 0.5em; }
.ppm-design-soft .ppm-hearts {
	background: #fff;
	border: 1.5px solid var(--ppm-line);
	border-radius: 999px;
	padding: 0.35em 0.6em;
}
.ppm-design-soft .ppm-xp { border: 1.5px solid var(--ppm-line); background: #fbf3f5; height: 0.6em; }
.ppm-design-soft .ppm-xp i { background: var(--ppm-pink); }
.ppm-design-soft .ppm-iconbtn {
	width: 2.2em;
	height: 2.2em;
	background: #fff !important;
	border: 1.5px solid var(--ppm-line) !important;
	border-radius: 50% !important;
}
.ppm-design-soft .ppm-stage {
	border: 0;
	border-radius: 18px;
	box-shadow: 0 8px 22px rgba(107, 58, 79, 0.13);
	transform: translateZ(0); /* Safari: runde Ecken beim Überlauf sauber beschneiden */
}
.ppm-design-soft .ppm-actions { gap: 0.55em; margin-top: 0.75em; }
.ppm-design-soft .ppm-act {
	background: #fff;
	border: 1.5px solid var(--ppm-line);
	border-radius: 14px;
	box-shadow: 0 2px 0 var(--ppm-line);
	padding: 0.55em 0.1em 0.45em;
}
.ppm-design-soft .ppm-act.ppm-active { background: #fff5f8; border-color: var(--ppm-pink); box-shadow: 0 2px 0 var(--ppm-pink); }
.ppm-design-soft .ppm-act.ppm-need { border-color: var(--ppm-pink); }
.ppm-design-soft .ppm-stars, .ppm-design-soft .ppm-name { border-width: 1.5px; }
.ppm-design-soft .ppm-panel {
	left: 0;
	right: 0;
	bottom: 0;
	top: 2.85em;
	border: 1.5px solid var(--ppm-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(107, 58, 79, 0.14);
}
.ppm-design-soft .ppm-tab[aria-selected="true"] { background: transparent; box-shadow: inset 0 -3px 0 var(--ppm-pink); }
.ppm-design-soft .ppm-share { background: #fff; border-radius: 18px; }
.ppm-design-soft .ppm-tray, .ppm-design-soft .ppm-mini-card { border-width: 1.5px; border-radius: 14px; }
.ppm-design-soft .ppm-mini-card { border-color: var(--ppm-line); box-shadow: 0 10px 28px rgba(107, 58, 79, 0.18); }
.ppm-design-soft .ppm-toast { border-radius: 999px; }
/* Schwebend + schlicht: eigene weiße Karte, weil es über der Seite liegt */
.ppm.ppm-floating.ppm-design-soft .ppm-frame {
	background: #fff;
	padding: 0.75em;
	border-radius: 22px;
	box-shadow: 0 14px 40px rgba(60, 30, 45, 0.22);
}
.ppm.ppm-floating.ppm-design-soft .ppm-panel { left: 0.75em; right: 0.75em; bottom: 0.75em; top: 3.6em; }
.ppm-design-soft .ppm-launcher { border-width: 2px; box-shadow: 0 8px 20px rgba(60, 30, 45, 0.2); }
.ppm-design-soft .ppm-callout { border-width: 1.5px; border-color: var(--ppm-line); border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(60, 30, 45, 0.16); }

/* Meldungen nach oben, wenn unten die Item-Leiste offen ist */
.ppm-has-tray .ppm-toast { bottom: auto; top: 2.7em; }
.ppm-design-soft .ppm-bar { border: 1.5px solid var(--ppm-line); background: #fbf3f5; }
.ppm-design-soft .ppm-notify, .ppm-design-soft .ppm-shop li, .ppm-design-soft .ppm-dex li, .ppm-design-soft .ppm-ach li, .ppm-design-soft .ppm-acc-btn, .ppm-design-soft .ppm-item, .ppm-design-soft .ppm-eggbtn, .ppm-design-soft .ppm-field input { border-width: 1.5px; }

/* Sofort-Rückmeldung bei jedem Klick */
.ppm [aria-disabled="true"] { opacity: 0.5; }
.ppm .ppm-act[aria-disabled="true"] { opacity: 0.5; }
.ppm .ppm-buy[aria-disabled="true"], .ppm .ppm-open[aria-disabled="true"] { background: #e2d6db; box-shadow: 0 3px 0 #cbbcc3; opacity: 1; }
.ppm-feedback {
	position: absolute;
	left: 50%;
	top: 16%;
	z-index: 7;
	max-width: 86%;
	padding: 0.35em 0.8em;
	background: #fff;
	border: 2px solid var(--ppm-ink);
	border-radius: 0.7em;
	font-size: 0.82em;
	font-weight: 700;
	text-align: center;
	color: var(--ppm-text);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 0.3em) scale(0.92);
}
.ppm-feedback.ppm-on { animation: ppm-popin 1.8s ease forwards; }
@keyframes ppm-popin {
	0% { opacity: 0; transform: translate(-50%, 0.3em) scale(0.92); }
	10% { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
	16% { transform: translate(-50%, 0) scale(1); }
	85% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, -0.2em) scale(1); }
}
.ppm-design-soft .ppm-feedback { border-width: 1.5px; border-color: var(--ppm-line); border-radius: 999px; box-shadow: 0 6px 18px rgba(107, 58, 79, 0.16); }
.ppm .ppm-nope { animation: ppm-nope 0.36s ease; }
.ppm .ppm-mon.ppm-nope { animation: ppm-nope-mon 0.36s ease; }
@keyframes ppm-nope { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes ppm-nope-mon { 20% { transform: translateX(calc(-50% - 4px)); } 40% { transform: translateX(calc(-50% + 4px)); } 60% { transform: translateX(calc(-50% - 3px)); } 80% { transform: translateX(calc(-50% + 2px)); } }
.ppm-has-tray .ppm-feedback { top: 40%; }

/* Shop: Wirkung jetzt und nächste Stufe */
.ppm-up-now, .ppm-up-next { display: block; font-size: 0.78em; line-height: 1.3; margin-top: 0.2em; }
.ppm-up-now { opacity: 0.75; }
.ppm-up-next { color: var(--ppm-pink-2); font-weight: 700; }
.ppm-up-max { color: #5fae5c; opacity: 1; font-weight: 700; }
.ppm-shop li { align-items: flex-start; }
.ppm-shop li > .ppm-buy, .ppm-shop li > .ppm-shop-ic { margin-top: 0.15em; }

/* Auswahl bei zwei verschiedenen Spielständen */
.ppm-conflict { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 8; display: grid; place-items: center; padding: 0.6em; background: rgba(255, 248, 243, 0.9); }
.ppm-conflict[hidden] { display: none; }
.ppm-conflict-card { width: 100%; max-height: 100%; overflow-y: auto; padding: 0.8em; background: #fff; border: 2px solid var(--ppm-line); border-radius: 0.8em; box-shadow: 0 10px 28px rgba(107, 58, 79, 0.18); }
.ppm-conflict-card > b { display: block; font-size: 0.95em; line-height: 1.25; }
.ppm-conflict-card > p { margin: 0.3em 0 0.6em; font-size: 0.82em; }
.ppm-conflict-list { display: grid; gap: 0.45em; }
.ppm .ppm-conflict-opt { display: flex; align-items: center; gap: 0.6em; width: 100%; padding: 0.5em 0.6em; text-align: left; background: var(--ppm-cream); border: 2px solid var(--ppm-line); border-radius: 0.7em; }
.ppm .ppm-conflict-opt:hover, .ppm .ppm-conflict-opt:focus-visible { border-color: var(--ppm-pink); }
.ppm-conflict-opt > .ppm-sp { width: 2.6em; height: 2.6em; object-fit: contain; flex: none; }
.ppm-conflict-opt > span { flex: 1; min-width: 0; }
.ppm-conflict-opt b, .ppm-conflict-opt small { display: block; }
.ppm-conflict-opt small { font-size: 0.78em; opacity: 0.8; }
.ppm-conflict-opt .ppm-conflict-src { opacity: 1; color: var(--ppm-pink-2); font-weight: 700; }
.ppm-conflict-opt em { font-style: normal; font-weight: 800; font-size: 0.8em; color: #fff; background: var(--ppm-pink); padding: 0.3em 0.7em; border-radius: 0.5em; flex: none; }
.ppm-design-soft .ppm-conflict-card, .ppm-design-soft .ppm-conflict-opt { border-width: 1.5px; }
.ppm-design-soft .ppm-conflict { background: rgba(255, 255, 255, 0.92); border-radius: 18px; }
.ppm-conflict-card { padding: 0.65em; }
.ppm-conflict-card .ppm-hint { margin: 0.5em 0 0; font-size: 0.75em; }
.ppm-conflict-opt b { font-size: 0.95em; }
.ppm .ppm-conflict-opt, .ppm .ppm-conflict-opt * { user-select: none; -webkit-user-select: none; cursor: pointer; }