/*
	Pac-Man v nápovědě hledání — legrácka k vydání hry Pac-Man (CZ/SK).
	Pacman proběhne po oranžové horní hraně nápovědy, jí tečky, u velké tečky se duch vyleká
	a pacman ho odežene zpátky. Spouští js/pacman.js, když nápověda nabídne hru; načítá se jen
	když je vyplněný seznam produktů v pacmanVydaniProdukty() (lib/core.php).
	Postavičky jsou čisté CSS, bez obrázků.
*/
:root{
	--pm-velikost: 26px;
	--pm-zluta: #ffd400;
	--pm-duch: #ff3b30;
	--pm-vylekany: #2b4cff;
	--pm-tecka: #f36422;
}

/* ---------- pacman: dvě čelisti, otočení doleva řeší JS přes scaleX ---------- */
.pm-pacman{
	position: absolute;
	width: var(--pm-velikost);
	height: var(--pm-velikost);
	will-change: transform;
}
.pm-pacman::before,
.pm-pacman::after{
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	background: var(--pm-zluta);
}
.pm-pacman::before{
	top: 0;
	border-radius: var(--pm-velikost) var(--pm-velikost) 0 0;
	transform-origin: 50% 100%;
	animation: pm-horni-celist .18s ease-in-out infinite alternate;
}
.pm-pacman::after{
	bottom: 0;
	border-radius: 0 0 var(--pm-velikost) var(--pm-velikost);
	transform-origin: 50% 0;
	animation: pm-dolni-celist .18s ease-in-out infinite alternate;
}
@keyframes pm-horni-celist{ from{ transform: rotate(0); } to{ transform: rotate(-38deg); } }
@keyframes pm-dolni-celist{ from{ transform: rotate(0); } to{ transform: rotate(38deg); } }

/* ---------- duch: zubatý spodní okraj maskou, oči gradienty ---------- */
.pm-duch{
	position: absolute;
	width: 24px;
	height: 26px;
	background: var(--pm-duch);
	border-radius: 12px 12px 0 0;
	-webkit-mask:
		linear-gradient(#000 0 0) top / 100% 80% no-repeat,
		conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 8px 21% repeat-x;
	        mask:
		linear-gradient(#000 0 0) top / 100% 80% no-repeat,
		conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 8px 21% repeat-x;
	will-change: transform;
	transition: background .15s;
}
.pm-duch::before{
	content: '';
	position: absolute;
	top: 6px;
	left: 3px;
	width: 18px;
	height: 8px;
	background:
		radial-gradient(circle at 5px 4px, #1b2bd6 0 2px, transparent 2.5px),
		radial-gradient(circle at 13px 4px, #1b2bd6 0 2px, transparent 2.5px),
		radial-gradient(circle at 4px 4px, #fff 0 4px, transparent 4.5px),
		radial-gradient(circle at 14px 4px, #fff 0 4px, transparent 4.5px);
}
.pm-duch.pm-doleva::before{ transform: translateX(-2px); }
.pm-duch.pm-vylekany{ background: var(--pm-vylekany); animation: pm-blikani .3s steps(1) infinite; }
.pm-duch.pm-vylekany::before{
	/* vyděšený obličej: malé oči a vlnitá pusa */
	background:
		radial-gradient(circle at 5px 3px, #ffd7c2 0 1.6px, transparent 2px),
		radial-gradient(circle at 13px 3px, #ffd7c2 0 1.6px, transparent 2px);
	transform: none;
}
.pm-duch.pm-vylekany::after{
	content: '';
	position: absolute;
	left: 4px;
	top: 15px;
	width: 16px;
	height: 3px;
	background: repeating-linear-gradient(90deg, #ffd7c2 0 2px, transparent 2px 4px);
}
@keyframes pm-blikani{ 50%{ background: #e8e8ff; } }

/* ---------- dráha s tečkami na horní oranžové hraně nápovědy hledání ---------- */
/* polohu a šířku dopočítá JS podle nápovědy; z-index nad ní (.ui-autocomplete má 9999) */
.pm-drah{
	position: absolute;
	height: 30px;
	pointer-events: none;
	z-index: 10000;
	overflow: hidden;
	opacity: 1;
	transition: opacity .4s;
}
.pm-drah.pm-konec{ opacity: 0; }
.pm-drah .pm-tecka{
	position: absolute;
	top: 50%;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: #fff;	/* bílá výplň, ať jsou tečky na oranžové liště vidět */
	box-shadow: 0 0 0 1.5px var(--pm-tecka);
	transition: transform .08s, opacity .08s;
}
.pm-drah .pm-tecka.pm-velka{
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	animation: pm-pulz .4s ease-in-out infinite alternate;
}
.pm-drah .pm-tecka.pm-snezena{ transform: scale(0); opacity: 0; }
.pm-drah .pm-pacman,
.pm-drah .pm-duch{ top: 2px; }
@keyframes pm-pulz{ to{ transform: scale(.7); } }

/* kdo má v systému omezené animace, tomu nic neběží (JS to hlídá taky) */
@media (prefers-reduced-motion: reduce){
	.pm-drah{ display: none !important; }
}